/* dc.joes family layer for the Media system (12 Nov 2026, "dc.joes Design Language - Every System").
   The five things that make Media one family with Ridgeline, Anna and dc.joes AI, carried over from
   Ridgeline's approved pages (touch.js, picker.js, startup.js) and dressed in Media's purple glow:
     1. the Keyboard press on every card, capsule and button
     2. one floating glass dock at the bottom
     3. glass pickers instead of the browser's own dropdowns
     4. the ∞43² mark, top right, as the voice and AI button
     5. the shared startup moment
   Nothing here replaces an existing style: the press uses the separate `scale`/`translate` properties
   so every card keeps its own transform, and the film, the capsules and the rows are untouched. */
:root {
  --fam-accent: #b48cff;
  --fam-glow: rgba(170, 120, 255, .55);
  --fam-glass: rgba(255, 255, 255, .14);
  --fam-glass-hi: rgba(255, 255, 255, .26);
  --fam-edge: rgba(255, 255, 255, .34);
  --fam-ink: #fbf7ff;
  --fam-ease: cubic-bezier(.2, .8, .2, 1);
  --fam-spring: cubic-bezier(.34, 1.56, .64, 1);
  --fam-dock-h: 64px;
}

/* ---- 1. the Keyboard press ------------------------------------------------------------------- */
.card, .gcap-line, .gcap .fh-arrow, .btn, .ghost-btn, .hr-cap, .icon-btn, .th-nav, .fh-arrow, .pv-play,
.fhd-close, .sub-toggle, .nav-item, .chip, .fam-dock a, .fam-mark, .glasspick, .gs-row, .fam-btn, .lang-switch button,
.see-all, .seeall, .tab, [role="tab"] {
  transition-property: scale, translate, filter, box-shadow, background, border-color, color, opacity, transform;
  -webkit-tap-highlight-color: transparent;
}
[data-fam-press] {
  scale: .965; translate: 0 1.5px;
  transition: scale 80ms ease-out, translate 80ms ease-out, filter 80ms ease-out !important;
  filter: brightness(1.08) drop-shadow(0 0 10px var(--fam-glow));
}
[data-fam-release] {
  transition: scale 200ms var(--fam-spring), translate 200ms var(--fam-spring), filter 260ms ease-out !important;
}
/* fine glowing edge where the pointer is (cards and capsules light under the finger) */
@media (hover: hover) {
  .card[data-fam-lit], .gcap-line[data-fam-lit], .btn[data-fam-lit], .fam-dock a[data-fam-lit] {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 0 18px -4px var(--fam-glow);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-fam-press] { scale: none; translate: none; }
}

/* ---- 2. the glass dock ------------------------------------------------------------------------ */
.fam-dock {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 60;
  translate: -50% 0; display: flex; gap: 4px; padding: 6px;
  border-radius: 999px; border: 1px solid var(--fam-edge);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)), rgba(28, 18, 46, .42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 14px 38px rgba(10, 4, 24, .45);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  transition: opacity .3s var(--fam-ease), translate .35s var(--fam-ease);
}
.fam-dock a {
  display: grid; justify-items: center; gap: 3px; min-width: 66px; padding: 8px 10px 6px; border-radius: 999px;
  color: rgba(251, 247, 255, .78); text-decoration: none; font: 500 11px/1 Inter, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
  letter-spacing: .01em;
}
.fam-dock a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fam-dock a[aria-current="page"] {
  color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 16px -2px var(--fam-glow);
}
@media (hover: hover) { .fam-dock a:hover { color: #fff; } }
body.fam-has-dock #view { padding-bottom: calc(var(--fam-dock-h) + 40px); }
body:has(#player:not([hidden])) .fam-dock, body.hero-reading .fam-dock { opacity: 0; pointer-events: none; translate: -50% 24px; }
@media (max-width: 420px) { .fam-dock a { min-width: 58px; padding-inline: 6px; } }

/* ---- 3. glass pickers ------------------------------------------------------------------------- */
select.fam-hidden { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.glasspick {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--fam-edge); color: var(--fam-ink); cursor: pointer;
  font: 500 14px/1 Inter, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.06)), rgba(30, 20, 48, .35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px rgba(10, 4, 24, .25);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.glasspick .gp-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .8; }
#fam-sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: end center; pointer-events: none; }
#fam-sheet .gs-back { position: absolute; inset: 0; background: rgba(8, 4, 18, .35); opacity: 0; transition: opacity .3s var(--fam-ease); }
#fam-sheet .gs-panel {
  position: relative; width: min(520px, calc(100vw - 24px)); max-height: min(72vh, 620px); margin-bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; border-radius: 28px; border: 1px solid var(--fam-edge); color: var(--fam-ink);
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08)), rgba(30, 18, 52, .62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 24px 60px rgba(8, 2, 22, .55);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  translate: 0 30px; opacity: 0; transition: translate .4s var(--fam-ease), opacity .3s var(--fam-ease);
}
#fam-sheet[data-on] { pointer-events: auto; }
#fam-sheet[data-on] .gs-back { opacity: 1; }
#fam-sheet[data-on] .gs-panel { translate: 0 0; opacity: 1; }
#fam-sheet .gs-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px 22px; font: 600 16px/1.2 Inter, -apple-system, "SF Pro Display", "Segoe UI", sans-serif; }
#fam-sheet .gs-find { margin: 4px 14px 8px; display: flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 42px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }
#fam-sheet .gs-find input { flex: 1; background: none; border: 0; outline: 0; color: inherit; font: 15px/1 Inter, -apple-system, "Segoe UI", sans-serif; }
#fam-sheet .gs-list, #fam-sheet .gs-body { overflow: auto; padding: 4px 10px 14px; overscroll-behavior: contain; }
#fam-sheet .gs-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 16px; background: transparent; color: inherit; text-align: left; cursor: pointer; font: 15px/1.25 Inter, -apple-system, "Segoe UI", sans-serif; }
#fam-sheet .gs-row:hover { background: rgba(255,255,255,.1); }
#fam-sheet .gs-row.on { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
#fam-sheet .gs-none { opacity: .7; padding: 18px; text-align: center; }
.fam-btn { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--fam-edge); color: inherit; cursor: pointer; background: rgba(255,255,255,.12); }
.fam-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.fam-set { display: grid; gap: 12px; padding: 6px 12px 16px; }
.fam-set label { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 46px; font: 15px/1.25 Inter, -apple-system, "Segoe UI", sans-serif; }
.fam-set input[type=range] { width: 46%; accent-color: var(--fam-accent); }
.fam-switch { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.2); position: relative; cursor: pointer; border: 1px solid var(--fam-edge); transition: background .2s; }
.fam-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: translate .2s var(--fam-spring); }
.fam-switch:checked { background: var(--fam-accent); }
.fam-switch:checked::after { translate: 20px 0; }

/* ---- 4. the ∞43² mark: voice and AI ----------------------------------------------------------- */
.fam-mark {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 14px; z-index: 61; height: 44px; padding: 0 14px;
  display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--fam-edge); cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08)), rgba(28, 18, 46, .42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 26px rgba(10, 4, 24, .4);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
}
.fam-mark img { height: 26px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(140, 100, 255, .45)); }
.fam-mark[data-listening] { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 3px rgba(180,140,255,.35), 0 0 26px var(--fam-glow); animation: famPulse 1.4s ease-in-out infinite; }
@keyframes famPulse { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 7px rgba(180,140,255,.12), 0 0 34px var(--fam-glow); } }
.fam-bubble {
  position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 54px); right: 14px; z-index: 61; max-width: min(360px, calc(100vw - 28px));
  padding: 12px 16px; border-radius: 22px; color: var(--fam-ink); border: 1px solid var(--fam-edge);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)), rgba(28, 18, 46, .62);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 16px 40px rgba(10, 4, 24, .45);
  font: 15px/1.35 Inter, -apple-system, "Segoe UI", sans-serif; opacity: 0; translate: 0 -8px; pointer-events: none;
  transition: opacity .25s var(--fam-ease), translate .3s var(--fam-ease);
}
.fam-bubble[data-on] { opacity: 1; translate: 0 0; pointer-events: auto; }
.fam-bubble .fb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fam-bubble small { opacity: .72; font-size: 12px; }
/* the old header language/logo stay; the topbar keeps clear of the mark */
.topbar { padding-right: 96px; }

/* ---- 5. the shared startup moment ------------------------------------------------------------- */
#fam-hello { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(130% 110% at 50% 38%, #24163a 0%, #0b0714 70%); animation: famHelloOut .6s cubic-bezier(.4,0,.2,1) 1.6s both; }
#fam-hello .hm { position: relative; width: min(58vw, 480px); animation: famHelloIn .7s var(--fam-ease) both; }
#fam-hello img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 46px rgba(140, 100, 255, .42)); }
#fam-hello .hm i { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(255,255,255,.92) 48%, rgba(255,255,255,.55) 53%, transparent 62%);
  background-size: 260% 100%; background-position: 150% 0; mix-blend-mode: screen;
  -webkit-mask: var(--fam-mark) center/contain no-repeat; mask: var(--fam-mark) center/contain no-repeat;
  animation: famSweep 1.1s cubic-bezier(.45,0,.25,1) .35s both; }
@keyframes famHelloIn { from { opacity: 0; scale: .955; } to { opacity: 1; scale: 1; } }
@keyframes famSweep { from { background-position: 150% 0; } to { background-position: -90% 0; } }
@keyframes famHelloOut { to { opacity: 0; visibility: hidden; } }
body.fam-rising #view, body.fam-rising .topbar { animation: famRise .7s var(--fam-ease) 1.3s both; }
@keyframes famRise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { #fam-hello { display: none; } body.fam-rising #view, body.fam-rising .topbar { animation: none; } }

/* the other pages (base.html): their header's language switch keeps clear of the ∞43² mark */
.site-header .header-tools { margin-right: 104px; }
@media (max-width: 520px) { .site-header .header-tools { margin-right: 96px; } }

/* ---- dc.joes AI inside Media: a full-height glass sheet (12 Nov) ---- */
#fam-ai { position: fixed; inset: 0; z-index: 95; display: grid; place-items: stretch; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  background: rgba(8, 4, 18, .38); opacity: 0; transition: opacity .35s var(--fam-ease); }
#fam-ai[data-on] { opacity: 1; }
#fam-ai .fa-panel { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--fam-edge);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)), rgba(28, 18, 46, .55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 28px 70px rgba(6, 2, 18, .55);
  -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  translate: 0 24px; transition: translate .4s var(--fam-ease); }
#fam-ai[data-on] .fa-panel { translate: 0 0; }
#fam-ai iframe { border: 0; width: 100%; height: 100%; display: block; background: transparent; }
#fam-ai .fa-back { position: absolute; top: 12px; left: 12px; z-index: 2; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.1)), rgba(28,18,46,.5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* 12 Nov correction (Jose): ONE ∞43² mark, at the TOP LEFT; the back arrow sits beside it; no hamburger */
.fam-mark { right: auto !important; left: 14px; }
.fam-bubble { right: auto !important; left: 14px; }
.topbar { padding-right: 0 !important; padding-left: 0 !important; }
@media (min-width: 1100px) { .fam-mark, .fam-bubble { left: calc(var(--side, 272px) + 14px); } }
.site-header .header-tools { margin-right: 0 !important; }   /* the mark moved to the left (12 Nov) */