/*
 * Dhangaa Torbanii — foreground stage presentation layer (docs/14).
 * Loaded after app.css. Two responsibilities:
 *   1. shared stage states at every viewport (honest transport, waiting
 *      shimmer, tap-for-sound chip);
 *   2. the DOCK composition — phones/tablets/coarse pointers: the focused
 *      media unit (media + metadata + controls) is composed by CSS as a
 *      fixed, centered presentation inside the USABLE viewport (header-
 *      aware via one measured value, safe-area + dynamic-viewport aware,
 *      aspect-true). JS writes no layout geometry in this mode.
 * app.css owns the hologram (surface-tracking) presentation for fine
 * pointers. Specificity is deliberately high — this layer owns the stage
 * chrome it targets.
 */

/* ---------- shared stage states (all viewports) ---------- */

/* transport controls are FICTION until a player really mounts */
.logo-stage.is-waiting .logo-stage-ctrl [data-seek],
.logo-stage.is-waiting .logo-stage-ctrl [data-toggle-play],
.logo-stage.is-waiting .logo-stage-ctrl [data-logo-prev],
.logo-stage.is-waiting .logo-stage-ctrl [data-logo-next] {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* waiting shimmer: a quiet breathing line where the video is coming */
.logo-stage .logo-stage-loading {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: 96px;
  height: 3px;
  border-radius: 3px;
  background: rgba(138, 200, 160, 0.15);
  overflow: hidden;
  z-index: 5;
}
.logo-stage .logo-stage-loading[hidden] { display: none; }
.logo-stage .logo-stage-loading i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(138, 200, 160, 0.85), transparent);
  animation: dhangaa-stage-sweep 1.15s ease-in-out infinite;
}
@keyframes dhangaa-stage-sweep {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(300%); }
}

/* tap-for-sound chip — the muted-autoplay affordance, on the media */
.logo-stage .logo-stage-sound {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 214, 140, 0.55);
  background: rgba(6, 14, 10, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ffe0a8;
  font: 600 12px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}
.logo-stage .logo-stage-sound[hidden] { display: none; }
.logo-stage .logo-stage-sound:not([hidden]) {
  animation: dhangaa-chip-in 0.4s ease both;
}
@keyframes dhangaa-chip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- THE DOCK COMPOSITION (phones / tablets / coarse pointers) ----------
 * [ SELECTED MEDIA  — aspect-true, centered ]
 * [ title / essential state ]
 * [ compact transparent control bar ]
 * …centered as ONE unit inside the usable viewport. */
@media (max-width: 760px), (pointer: coarse) {
  /* the unit: fixed to the viewport, composed by this stylesheet alone */
  .logo-stage.is-dock .logo-stage-plate {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--stage-header-h, 64px) + env(safe-area-inset-top, 0px) + max(10px, 2dvh));
    bottom: calc(env(safe-area-inset-bottom, 0px) + max(12px, 2.5dvh));
    /* the media keeps its true 16:9; the width cap only binds when the
     * viewport is short (landscape) so the WHOLE unit always fits */
    width: min(calc(100vw - 16px), 560px,
                calc((100dvh - var(--stage-header-h, 64px) - 168px
                      - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 16 / 9));
    justify-content: center;   /* center the unit in the usable region */
    gap: 0;
    z-index: 35;               /* above page sections, below the site header */
    pointer-events: none;      /* empty regions stay live for the 3D scene */
  }
  .logo-stage.is-dock .logo-stage-plate > * { pointer-events: auto; }

  .logo-stage.is-dock .logo-stage-video {
    border-radius: 14px 14px 0 0;
    box-shadow: 0 26px 80px -22px rgb(0 0 0 / 0.85);
  }

  /* the control surface: attached directly UNDER the media — one object */
  .logo-stage.is-dock .logo-stage-bar {
    flex-direction: column;
    gap: 7px;
    padding: 9px 10px;
    background: rgba(4, 10, 7, 0.82);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgb(90 170 120 / 0.22);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    white-space: normal;
    opacity: 1;                 /* the bar always stands in dock mode */
    transform: none;
    transition: none;
  }
  /* when chapters follow, the bar passes its rounded foot to them */
  .logo-stage.is-dock .logo-stage-bar:not(:last-child) { border-radius: 0; }
  .logo-stage.is-dock .logo-stage-chapters {
    border-radius: 0 0 14px 14px;
    background: rgba(4, 10, 7, 0.72);
    border: 1px solid rgb(90 170 120 / 0.16);
    border-top: 0;
    margin: 0;
    opacity: 1; transform: none; transition: none;
  }

  /* metadata: a real mobile hierarchy — titles wrap to two lines,
   * never fragment into ellipsis shards */
  .logo-stage.is-dock .logo-stage-meta {
    flex: 1 1 100%;
    max-width: none;
    margin: 0;
    padding: 0 4px;
    text-align: center;
  }
  .logo-stage.is-dock .logo-stage-meta b {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.32;
    overflow-wrap: break-word;
  }
  .logo-stage.is-dock .logo-stage-meta i {
    font-size: 10.5px;
    letter-spacing: 0.07em;
    display: block;
  }

  /* controls: ONE compact row — [✕][prev][play][next][↗]. ±10s stays a
   * gesture on the media (double-tap the sides) where thumbs live. */
  .logo-stage.is-dock .logo-stage-ctrl {
    gap: 6px;
    justify-content: center;
    width: 100%;
  }
  .logo-stage.is-dock .logo-stage-btn.is-desk { display: none; }
  .logo-stage.is-dock .logo-stage-btn {
    min-width: 48px;
    min-height: 48px;
    border-radius: 14px;
    padding: 0;
  }
  .logo-stage.is-dock .logo-stage-btn svg { width: 18px; height: 18px; }
  .logo-stage.is-dock .logo-stage-btn.is-play {
    min-width: 58px;
    min-height: 58px;
    border-radius: 18px;
    background: rgba(224, 133, 133, 0.16);
  }
  .logo-stage.is-dock .logo-stage-btn.is-play svg { width: 21px; height: 21px; }

  /* corner actions become compact icon chips (aria-labels carry meaning) */
  .logo-stage.is-dock .logo-stage-btn.is-close,
  .logo-stage.is-dock .logo-stage-btn.is-open {
    font-size: 0;
  }
  .logo-stage.is-dock .logo-stage-btn.is-close::after { content: '✕'; font-size: 15px; }
  .logo-stage.is-dock .logo-stage-btn.is-open::after { content: '↗'; font-size: 16px; }

  /* progress rail: thicker, easier grab, on the media's own edge */
  .logo-stage .logo-stage-progress { height: 18px; }
  .logo-stage .logo-stage-progress i { height: 4px; }

  /* chapters: horizontal thumb scroll */
  .logo-stage .logo-stage-chapter { min-height: 40px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .logo-stage .logo-stage-loading i { animation: none; }
  .logo-stage .logo-stage-sound:not([hidden]) { animation: none; }
  .logo-stage.is-dock .logo-stage-plate { transition: none; }
}

/* ================= Wave 9.5 — THE MODERN MEDIA SURFACE ================= */

/* The stage bar: SEMI-TRANSPARENT glass (owner direction) — one object
 * with the media, never an opaque slab */
.logo-stage .logo-stage-bar {
  background: linear-gradient(180deg, rgba(5, 14, 9, 0.60), rgba(4, 11, 7, 0.48));
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
}
.logo-stage.is-dock .logo-stage-bar {
  background: linear-gradient(180deg, rgba(5, 14, 9, 0.58), rgba(4, 11, 7, 0.44));
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  border-color: rgba(138, 200, 160, 0.18);
}

/* The controls: proportional glass circles — one modern system
 * (replaces the solid-fill chips) */
.logo-stage .logo-stage-btn {
  background: rgba(138, 200, 160, 0.10);
  border: 1px solid rgba(138, 200, 160, 0.32);
  color: #dff2e6;
  border-radius: 999px;
  min-width: 46px; min-height: 46px; width: 46px; height: 46px;
  padding: 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}
.logo-stage .logo-stage-btn:hover { background: rgba(138, 200, 160, 0.20) !important; border-color: rgba(138, 200, 160, 0.5); }
.logo-stage .logo-stage-btn:active { transform: scale(0.92); background: rgba(138, 200, 160, 0.28) !important; }
.logo-stage .logo-stage-btn.is-play {
  width: 58px; height: 58px; min-width: 58px; min-height: 58px;
  background: rgba(224, 133, 133, 0.18);
  border-color: rgba(224, 133, 133, 0.52);
  color: #f4e4e4;
  box-shadow: 0 0 22px rgba(224, 133, 133, 0.18);
}
.logo-stage .logo-stage-btn.is-play:hover { background: rgba(224, 133, 133, 0.28) !important; }
.logo-stage .logo-stage-btn.is-close { border-color: rgba(224, 133, 133, 0.35); color: #e8c2c2; }

/* the archive counters: never off-screen (found at x = -12 on phones) */
@media (max-width: 640px) {
  .hero-scale {
    left: 12px !important; right: 12px !important; width: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .hero-stat { min-width: 0; padding: 0.35rem 0.45rem; }
}

/* ---------- THE RECENT-PROGRAMS QUICK RAIL (owner's yellow annotation) ----------
 * While a session lives, the most recent dialogues ride a translucent
 * strip above the dock: horizontally scrollable thumbnails, tap to switch
 * the SAME session. Appears on scroll-up/idle, tucks away on scroll-down
 * — recent programs are always one gesture away, never in the way. */
.dm-recents {
  position: fixed;
  left: 10px; right: 10px;
  bottom: calc(var(--dock-plate-h, 65px) + 52px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: flex; gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(6, 14, 10, 0.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(138, 200, 160, 0.16);
  overflow-x: auto;
  scrollbar-width: none;
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.3s cubic-bezier(0.22, 1, 0.32, 1);
}
.dm-recents::-webkit-scrollbar { display: none; }
.dm-recents.is-out {
  opacity: 1; pointer-events: auto; transform: none;
}
.dm-recents button {
  flex: none; width: 76px;
  border: 0; padding: 0; border-radius: 10px; overflow: hidden;
  background: #06110c; cursor: pointer;
  position: relative;
}
.dm-recents button img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.dm-recents button span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 5px 4px;
  font: 600 8.5px/1.15 ui-sans-serif, system-ui, sans-serif;
  color: #e7f5ec; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(3, 9, 6, 0.9));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dm-recents button.is-live { outline: 2px solid rgba(224, 133, 133, 0.85); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .dm-recents { transition: opacity 0.18s ease; } }

/* ---------- THE SIGNAL WEB (Wave 10) — the related constellation ----------
 * Related dialogues as a living constellation of the archive's own
 * evidence: real thumbnails with the projection system's corner anchors,
 * the deterministic engine's shared-entity NAMES as chips, a
 * signal-strength meter (the real score), and a play affordance that
 * hands the dialogue to the GLOBAL session. A signal line binds the
 * cards and draws itself as the section reveals. Horizontal scroll on
 * phones, grid from tablet up. */
.sig-web {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(206px, 232px);
  gap: 12px;
  overflow-x: auto;
  padding: 6px 2px 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
@media (min-width: 768px) {
  .sig-web { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); overflow-x: visible; }
}
.sig-line {
  position: absolute; left: 0; top: 14px; height: 34px;
  width: 100%; min-width: 100%;
  pointer-events: none; z-index: 0;
  overflow: visible;
}
.sig-line path {
  fill: none;
  stroke: rgba(138, 200, 160, 0.34);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
}
.sig-line.is-drawn path { animation: sig-draw 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes sig-draw {
  from { stroke-dashoffset: 1200; opacity: 0; }
  12% { opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
.sig-line circle { fill: #0a1f16; stroke: rgba(138, 200, 160, 0.75); stroke-width: 1.4; }
.sig-line circle.is-live { stroke: #e08585; fill: rgba(224, 133, 133, 0.3); }
@media (prefers-reduced-motion: reduce) { .sig-line.is-drawn path { animation: none; } }
.sig-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(175deg, rgba(10, 26, 19, 0.72), rgba(6, 14, 10, 0.55));
  border: 1px solid rgba(138, 200, 160, 0.18);
  text-decoration: none; color: #e7f5ec;
  scroll-snap-align: start;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.32, 1), border-color 0.22s ease, box-shadow 0.3s ease;
}
.sig-card:hover, .sig-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(138, 200, 160, 0.5);
  box-shadow: 0 20px 46px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(138, 200, 160, 0.14), inset 0 0 30px rgba(138, 200, 160, 0.05);
}
.sig-card.is-live { border-color: rgba(224, 133, 133, 0.55); }
.sig-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #06110c; }
.sig-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 6s linear, filter 0.3s ease;
  filter: saturate(0.92);
}
.sig-card:hover .sig-thumb img { transform: scale(1.1); filter: saturate(1.06); }
@media (prefers-reduced-motion: reduce) { .sig-thumb img { transition: filter 0.3s ease; } }
.sig-thumb-ph { display: block; width: 100%; height: 100%;
  background: radial-gradient(120% 90% at 50% 20%, rgba(20, 58, 42, 0.55), transparent 60%), #0a1f16; }
/* the projection grammar: four corner data anchors on every record */
.sig-anchors { position: absolute; inset: 0; pointer-events: none; }
.sig-anchors i {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(138, 200, 160, 0.9);
  box-shadow: 0 0 6px rgba(138, 200, 160, 0.55);
}
.sig-anchors i:nth-child(1) { left: 7px; top: 7px; }
.sig-anchors i:nth-child(2) { right: 7px; top: 7px; }
.sig-anchors i:nth-child(3) { left: 7px; bottom: 7px; }
.sig-anchors i:nth-child(4) { right: 7px; bottom: 7px; }
.sig-card.is-playable .sig-anchors i { animation: sig-anchor-breathe 2.4s ease-in-out infinite; }
@keyframes sig-anchor-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sig-anchors i { animation: none; } }
.sig-dur {
  position: absolute; right: 7px; bottom: 7px;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(3, 9, 6, 0.85);
  font: 600 10px/1.4 ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #cfe4d6; letter-spacing: 0.03em;
}
.sig-body { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 12px; min-width: 0; }
.sig-title { font-size: 13px; line-height: 1.35; font-weight: 600; }
.sig-title a { color: #f0f7f2; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s ease; }
.sig-card:hover .sig-title a { color: #ffd9d9; }
.sig-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; color: rgba(196, 222, 206, 0.72); }
.sig-meter { display: inline-flex; align-items: center; gap: 5px; }
.sig-meter b { font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: rgba(169, 216, 187, 0.85); }
.sig-meter i { position: relative; width: 44px; height: 3px; border-radius: 3px; background: rgba(138, 200, 160, 0.18); overflow: hidden; }
.sig-meter u { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: linear-gradient(90deg, #8ac8a0, #e08585); }
.sig-why { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 0; margin: 0; }
.sig-why li {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%;
  padding: 3px 8px; border-radius: 999px;
  font-size: 9.5px; line-height: 1.25; letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sig-why li svg { width: 10px; height: 10px; flex: none; }
.sig-why li.is-guest {
  background: rgba(224, 133, 133, 0.1);
  border: 1px solid rgba(224, 133, 133, 0.3);
  color: #f2c4c4;
}
.sig-why li.is-topic {
  background: rgba(138, 200, 160, 0.1);
  border: 1px solid rgba(138, 200, 160, 0.28);
  color: #a9d8bb;
}
.sig-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 1px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(224, 133, 133, 0.45);
  background: rgba(224, 133, 133, 0.12); color: #ffd9d9;
  font: 650 10.5px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.16s ease;
}
.sig-play svg { width: 11px; height: 11px; }
.sig-play:hover { background: rgba(224, 133, 133, 0.22); border-color: rgba(224, 133, 133, 0.65); }
.sig-play:active { transform: scale(0.96); }
.sig-card.is-live .sig-play { border-color: rgba(255, 224, 168, 0.6); color: #ffe0a8; }
@media (prefers-reduced-motion: reduce) {
  .sig-card, .sig-card:hover { transform: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
}