/* ============================================================
   Showrunner — LOCKED shared stylesheet · Direction A "Family"
   Extracted from style-a.html (winning direction, Jul 13 2026)
   and extended with the Stage B component kit — same tokens,
   same language, one scheme.

   Naming scheme (short 3-letter + x prefixes, as in style-a):
   btn/chip/av  atoms          sbx/tbx  sidebar/topbar
   phx  page header            rlx/rlc  pipeline rail
   mrx  mini-rail              colx     2-col layout
   cdx  card                   gtx      navy gate card
   bfx  brief fields/refs      tkx      task rows
   acx  activity               tmx      team list
   scx  script side card       ftx      footer bar
   kbx  kanban                 stx      stat strip
   chx  chat bubbles           cpx      composer
   opx  option rows/cards      sgx      segment list
   plx  player frame           dzx      dropzone
   vrx  version rail  vcx chips ckx     checklist
   cmx  comments               bnx      banner strip
   cix  citations              shx      section headings
   lsx  generic list rows      tyx      type chip
   pmx  prompt block           stp      numbered steps
   thx  thumb card             prx      script prose
   chp  chapters               tagx     tag chip
   emx  empty state            hintx    hint row
   fld/inpx form fields
   ============================================================ */

/* ------------------------------------------------------------
   1 · TOKENS
   ------------------------------------------------------------ */
:root{
  /* gua type */
  --gua-font-display:'Plus Jakarta Sans',sans-serif;
  --gua-font-body:'DM Sans',sans-serif;
  /* gua gray scale */
  --gua-gray-50:#f8fafc; --gua-gray-100:#f1f5f9; --gua-gray-200:#e2e8f0;
  --gua-gray-300:#cbd5e1; --gua-gray-400:#94a3b8; --gua-gray-500:#64748b;
  --gua-gray-600:#475569; --gua-gray-700:#334155; --gua-gray-800:#1e293b;
  --gua-gray-900:#0f172a;
  /* gua brand — warm gradient reserved for PRIMARY CTAs only */
  --gua-gradient:linear-gradient(135deg,#f77062,#fe5196,#bc4cf4);
  --gua-gradient-hover:linear-gradient(135deg,#e8634f,#e8458a,#a83de0);
  --gua-navy:#1a1a2e;
  /* Showrunner identity (YouTube category orange) */
  --srx-accent:#e37400;
  --srx-accent-2:#f5a623;
  --srx-accent-grad:linear-gradient(135deg,#e37400,#f5a623);
  --srx-accent-soft:rgba(227,116,0,.08);
  --srx-accent-ink:#b35c00;
  /* semantic */
  --srx-success:#0d9488; --srx-success-ink:#0b7568; --srx-success-soft:rgba(13,148,136,.1);
  --srx-danger:#d93025;  --srx-danger-ink:#b3261e;  --srx-danger-soft:rgba(217,48,37,.07);
  /* gua radii */
  --gua-radius-sm:6px; --gua-radius-md:8px; --gua-radius-lg:12px;
  --gua-radius-xl:16px; --gua-radius-full:9999px;
  /* gua shadows */
  --gua-shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --gua-shadow-sm:0 2px 8px rgba(15,23,42,.06);
  --gua-shadow-md:0 6px 18px rgba(15,23,42,.09);
  --gua-shadow-lg:0 12px 32px rgba(15,23,42,.12);
  --gua-shadow-xl:0 24px 60px rgba(15,23,42,.16);
  /* gua motion */
  --gua-duration-fast:.15s; --gua-duration-base:.25s;
  --gua-ease:cubic-bezier(.4,0,.2,1);
}

/* ------------------------------------------------------------
   2 · BASE
   ------------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--gua-font-body);
  color:var(--gua-gray-600);
  background-color:var(--gua-gray-50);
  /* gua textures: dot grid + accent blobs */
  background-image:
    radial-gradient(620px 420px at 88% -60px, rgba(227,116,0,.05), transparent 70%),
    radial-gradient(540px 420px at 4% 340px, rgba(247,112,98,.04), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(15,23,42,.035) 1px, transparent 0);
  background-size:auto,auto,48px 48px;
  background-repeat:no-repeat,no-repeat,repeat;
  font-size:16px;line-height:1.4;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
svg{display:block;flex:none}
button{font:inherit}
.wrap{max-width:1400px;margin:0 auto;padding:0 24px}

/* micro label (uppercase kicker used across blocks) */
.microlabel{display:block;font-family:var(--gua-font-display);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gua-gray-400);margin-bottom:14px}

/* ------------------------------------------------------------
   3 · BUTTONS
   ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--gua-font-display);
  font-size:13px;font-weight:600;border-radius:var(--gua-radius-full);cursor:pointer;
  border:none;transition:transform var(--gua-duration-base) var(--gua-ease),
  box-shadow var(--gua-duration-base) var(--gua-ease),
  border-color var(--gua-duration-base) var(--gua-ease),
  color var(--gua-duration-base) var(--gua-ease),
  background-color var(--gua-duration-base) var(--gua-ease)}
.btn-primary{background-image:var(--gua-gradient);color:#fff;padding:11px 26px;
  box-shadow:0 8px 20px rgba(254,81,150,.28)}
.btn-primary:hover{background-image:var(--gua-gradient-hover);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(254,81,150,.34)}
.btn-secondary{background:#fff;color:var(--gua-gray-700);padding:10px 24px;
  border:1.5px solid var(--gua-gray-300)}
.btn-secondary:hover{border-color:var(--gua-gray-400);background:var(--gua-gray-50);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--gua-gray-600);padding:8px 16px;font-size:12px;
  border:1.5px solid var(--gua-gray-300)}
.btn-ghost:hover{border-color:rgba(227,116,0,.5);color:var(--srx-accent-ink)}
.btn-text{background:none;color:var(--gua-gray-600);padding:10px 4px;gap:6px}
.btn-text svg{transition:transform var(--gua-duration-base) var(--gua-ease)}
.btn-text:hover{color:var(--srx-accent)}
.btn-text:hover svg{transform:translateX(3px)}
/* on-navy secondary (inside .gtx gate cards) */
.btn-onnavy{background:rgba(255,255,255,.07);color:#fff;padding:10px 24px;
  border:1.5px solid rgba(255,255,255,.22)}
.btn-onnavy:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.4)}
/* small size modifier */
.btn-sm{padding:7px 14px;font-size:12px}
/* disabled (attribute or .is-disabled) */
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover,.btn.is-disabled:hover{transform:none;box-shadow:none}
.btn-primary[disabled]:hover,.btn-primary.is-disabled:hover{background-image:var(--gua-gradient)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(227,116,0,.28)}

/* ------------------------------------------------------------
   4 · CHIPS (status vocabulary: Delivered · In progress ·
       Needs changes · Queued · Gate) + stage/pillar/tag chips
   ------------------------------------------------------------ */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--gua-font-display);
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:var(--gua-radius-full);white-space:nowrap}
.chip .dot{width:6px;height:6px;border-radius:50%;flex:none}
.chip-delivered{background:var(--srx-success-soft);color:var(--srx-success-ink)}
.chip-delivered .dot{background:var(--srx-success)}
.chip-progress{background:var(--srx-accent-soft);color:var(--srx-accent-ink)}
.chip-progress .dot{background:var(--srx-accent)}
.chip-changes{background:var(--srx-danger-soft);color:var(--srx-danger-ink)}
.chip-changes .dot{background:var(--srx-danger)}
.chip-queued{background:var(--gua-gray-100);color:var(--gua-gray-500)}
.chip-queued .dot{background:var(--gua-gray-400)}
.chip-gate{background:var(--gua-navy);color:#fff}
.chip-gate svg{color:var(--srx-accent-2)}
/* stage badge — any of the 9 stage names */
.chip-stage{background:var(--srx-accent-soft);color:var(--srx-accent-ink);
  border:1px solid rgba(227,116,0,.14)}
.chip-stage .dot{background-image:var(--srx-accent-grad)}
/* pillar chip (Board cards, headers) */
.chip-pillar{background:var(--gua-gray-100);color:var(--gua-gray-600);font-size:10.5px;padding:3px 9px}

/* type chip — Avatar (HeyGen) / Motion graphic / Screen recording / AI clip */
.tyx{display:inline-flex;align-items:center;gap:6px;font-family:var(--gua-font-display);
  font-size:11px;font-weight:600;color:var(--gua-gray-600);background:var(--gua-gray-100);
  border-radius:var(--gua-radius-full);padding:4px 10px;white-space:nowrap}
.tyx svg{color:var(--gua-gray-400)}

/* plain tag chip (video tags etc.) */
.tagx{display:inline-flex;padding:4px 11px;border-radius:var(--gua-radius-full);
  background:var(--gua-gray-100);color:var(--gua-gray-600);font-size:11.5px;font-weight:500}

/* version chips (v1 · v2 ACTIVE) */
.vcx{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;
  border-radius:var(--gua-radius-full);border:1.5px solid var(--gua-gray-200);background:#fff;
  font-family:var(--gua-font-display);font-size:11.5px;font-weight:700;color:var(--gua-gray-500);
  cursor:pointer;transition:border-color var(--gua-duration-fast) var(--gua-ease)}
.vcx:hover{border-color:var(--gua-gray-300)}
.vcx.on{border-color:rgba(227,116,0,.5);background:var(--srx-accent-soft);color:var(--srx-accent-ink)}

/* citation chips — superscript [1][2] */
.cix{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:15px;
  padding:0 4px;border-radius:4px;background:var(--srx-accent-soft);
  border:1px solid rgba(227,116,0,.18);color:var(--srx-accent-ink);
  font-family:var(--gua-font-display);font-size:9.5px;font-weight:700;line-height:1;
  vertical-align:super;margin:0 1px;cursor:pointer;
  transition:background-color var(--gua-duration-fast) var(--gua-ease)}
.cix:hover{background:rgba(227,116,0,.16)}
/* numbered source list at a digest foot */
.cix-srcs{margin-top:14px;padding-top:12px;border-top:1px solid var(--gua-gray-100);
  display:flex;flex-direction:column;gap:6px}
.cix-srcs li{display:flex;align-items:baseline;gap:8px;font-size:11.5px;color:var(--gua-gray-500);line-height:1.5}
.cix-srcs .cix{vertical-align:baseline;flex:none}

/* inline AI annotation chip (script prose) */
.anx{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:5px;
  background:var(--srx-accent-soft);border:1px dashed rgba(227,116,0,.45);
  color:var(--srx-accent-ink);font-family:var(--gua-font-display);font-size:10.5px;
  font-weight:700;white-space:nowrap;margin-left:4px;vertical-align:1px}

/* ------------------------------------------------------------
   5 · AVATARS
   ------------------------------------------------------------ */
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  color:#fff;font-family:var(--gua-font-display);font-weight:700;flex:none;
  width:30px;height:30px;font-size:12px}
.av-d{background-image:var(--srx-accent-grad)}
.av-p{background-image:linear-gradient(135deg,#0d9488,#2dd4bf)}
.av-a{background-image:linear-gradient(135deg,#7c3aed,#a78bfa)}
.av-sm{width:20px;height:20px;font-size:9px}
.av-ghost{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;border:1.5px dashed var(--gua-gray-300);color:var(--gua-gray-400);flex:none}

/* ------------------------------------------------------------
   6 · FORM FIELDS
   ------------------------------------------------------------ */
.fld{display:block}
.fld label{display:block;font-size:13px;font-weight:500;color:var(--gua-gray-700);margin-bottom:6px}
.inpx,.fld input,.fld textarea,.fld select{width:100%;font-family:var(--gua-font-body);
  font-size:14px;color:var(--gua-gray-800);padding:11px 14px;
  border-radius:var(--gua-radius-md);border:1.5px solid var(--gua-gray-200);background:#fff;
  transition:border-color var(--gua-duration-fast) var(--gua-ease),
  box-shadow var(--gua-duration-fast) var(--gua-ease)}
.inpx:focus,.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;
  border-color:var(--srx-accent);box-shadow:0 0 0 3px rgba(227,116,0,.14)}
.fld textarea,textarea.inpx{min-height:96px;resize:vertical;line-height:1.6}
.inpx-sm{padding:7px 11px;font-size:12.5px;border-radius:7px}
.inpx::placeholder,.fld input::placeholder,.fld textarea::placeholder{color:var(--gua-gray-400)}

/* ------------------------------------------------------------
   7 · APP SHELL (full-page: sidebar + topbar + content)
   Markup: body > .shell > aside.sbx + div.apx-main
           .apx-main > header.tbx + div.apx-content (+ footer.ftx inside)
   ------------------------------------------------------------ */
.shell{min-height:100vh;display:grid;grid-template-columns:226px minmax(0,1fr)}

/* ---- sidebar ---- */
.sbx{background:#fff;border-right:1px solid var(--gua-gray-200);padding:20px 14px 16px;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sbx-logo{display:flex;align-items:center;gap:10px;padding:2px 10px 0}
.sbx-mark{width:30px;height:30px;border-radius:9px;background-image:var(--srx-accent-grad);
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(227,116,0,.35);flex:none}
.sbx-word{font-family:var(--gua-font-display);font-size:16.5px;letter-spacing:-.02em;line-height:1}
.sbx-word .w1{font-weight:700;color:var(--gua-gray-800)}
.sbx-word .w2{font-weight:800;color:var(--gua-gray-900)}
.sbx-sub{display:block;font-family:var(--gua-font-body);font-size:10.5px;font-weight:500;
  color:var(--gua-gray-400);letter-spacing:.02em;margin-top:3px}
.sbx-nav{margin-top:26px;display:flex;flex-direction:column;gap:2px}
.sbx-nav a,.sbx-nav .off{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;
  border-radius:10px;font-family:var(--gua-font-display);font-size:13px;font-weight:500;
  color:var(--gua-gray-500);transition:background-color var(--gua-duration-fast) var(--gua-ease),
  color var(--gua-duration-fast) var(--gua-ease)}
.sbx-nav a svg,.sbx-nav .off svg{color:var(--gua-gray-400);transition:color var(--gua-duration-fast) var(--gua-ease)}
.sbx-nav a:hover{background:var(--gua-gray-50);color:var(--gua-gray-800)}
.sbx-nav a:hover svg{color:var(--gua-gray-600)}
.sbx-nav a.on{background:var(--srx-accent-soft);color:var(--srx-accent-ink);font-weight:600}
.sbx-nav a.on svg{color:var(--srx-accent)}
.sbx-nav a.on::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;
  border-radius:var(--gua-radius-full);background-image:var(--srx-accent-grad)}
/* disabled nav item (Settings) — a <span class="off">, not a link */
.sbx-nav .off{color:var(--gua-gray-400);cursor:default}
.sbx-nav .off svg{color:var(--gua-gray-300)}
.sbx-soon{margin-left:auto;font-family:var(--gua-font-display);font-size:9px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gua-gray-400);
  background:var(--gua-gray-100);padding:2px 7px;border-radius:var(--gua-radius-full)}
.sbx-user{margin-top:auto;border-top:1px solid var(--gua-gray-100);padding:14px 10px 2px;
  display:flex;align-items:center;gap:10px}
.sbx-user .av{width:32px;height:32px;font-size:13px}
.sbx-uname{font-family:var(--gua-font-display);font-size:13px;font-weight:700;color:var(--gua-gray-800);line-height:1.2}
.sbx-urole{font-size:11px;color:var(--gua-gray-500)}

/* ---- topbar (glassmorphism) ---- */
.apx-main{display:flex;flex-direction:column;min-width:0}
.tbx{display:flex;align-items:center;gap:16px;height:60px;padding:0 24px;
  background:rgba(255,255,255,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--gua-gray-200);position:sticky;top:0;z-index:40}
.tbx-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gua-gray-500)}
.tbx-crumb a{transition:color var(--gua-duration-fast) var(--gua-ease)}
.tbx-crumb a:hover{color:var(--srx-accent)}
.tbx-crumb .sep{color:var(--gua-gray-300)}
.tbx-crumb .here{color:var(--gua-gray-800);font-weight:500}
.tbx-search{margin-left:auto;display:flex;align-items:center;gap:8px;width:224px;
  padding:8px 14px;border-radius:var(--gua-radius-full);background:var(--gua-gray-50);
  border:1px solid var(--gua-gray-200);color:var(--gua-gray-400);font-size:12.5px;cursor:text;
  transition:border-color var(--gua-duration-fast) var(--gua-ease)}
.tbx-search:hover{border-color:var(--gua-gray-300)}
.tbx-new{padding:9px 18px;font-size:12.5px}

/* ---- content area ---- */
.apx-content{padding:26px 28px 34px;flex:1;min-width:0}

/* ---- page header ---- */
.phx-kicker{font-family:var(--gua-font-display);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--srx-accent-ink)}
.phx-title{font-family:var(--gua-font-display);font-size:26px;font-weight:800;
  letter-spacing:-.03em;color:var(--gua-gray-900);line-height:1.2;margin-top:7px;max-width:900px}
.phx-sub{font-size:13.5px;color:var(--gua-gray-500);margin-top:8px;max-width:720px;line-height:1.6}
.phx-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px}
.phx-meta .mi{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--gua-gray-500)}
.phx-meta .mi svg{color:var(--gua-gray-400)}
.phx-meta .mi strong{font-weight:700;color:var(--gua-gray-700);font-family:var(--gua-font-display)}
.phx-avs{display:flex;align-items:center;padding-left:6px}
.phx-avs .av{width:26px;height:26px;font-size:10.5px;border:2px solid #fff;margin-left:-7px;
  box-shadow:var(--gua-shadow-xs)}
.phx-avs .av:first-child{margin-left:0}

/* ---- footer bar (place at the end of .apx-content, or in .wrap) ---- */
.ftx{margin-top:36px;padding:16px 0 8px;border-top:1px solid var(--gua-gray-200);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ftx-note{font-size:12px;color:var(--gua-gray-400)}
.ftx-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ftx-nav a{font-family:var(--gua-font-display);font-size:12px;font-weight:600;
  color:var(--gua-gray-500);padding:6px 13px;border-radius:var(--gua-radius-full);
  transition:color var(--gua-duration-fast) var(--gua-ease),background-color var(--gua-duration-fast) var(--gua-ease)}
.ftx-nav a:hover{color:var(--gua-gray-800);background:var(--gua-gray-100)}
.ftx-nav a.here{color:var(--srx-accent-ink);background:var(--srx-accent-soft);
  border:1px solid rgba(227,116,0,.16)}
.ftx-nav .sep{color:var(--gua-gray-300);font-size:11px}

/* ------------------------------------------------------------
   8 · PIPELINE RAIL (signature element)
   9 stages as circles + 2 director gates as navy diamonds.
   States: li.done · li.cur · li.todo · li.gate.gatepass · li.gate.gatetodo
   ------------------------------------------------------------ */
.rlc{margin-top:20px;background:#fff;border:1px solid var(--gua-gray-200);
  border-radius:var(--gua-radius-xl);box-shadow:var(--gua-shadow-sm);position:relative;overflow:hidden}
.rlc::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background-image:var(--srx-accent-grad)}
.rlx{display:flex;align-items:flex-start;padding:28px 18px 20px}
.rlx li{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;text-align:center;padding:0 4px}
.rlx li.gate{flex:1.3 1 0}
.rlx li::before,.rlx li::after{content:"";position:absolute;top:18px;height:2px;
  width:50%;background:var(--gua-gray-200)}
.rlx li::before{left:0}
.rlx li::after{right:0}
.rlx li:first-child::before,.rlx li:last-child::after{display:none}
.rlx li.done::before,.rlx li.done::after,
.rlx li.gatepass::before,.rlx li.gatepass::after,
.rlx li.cur::before{background:#f3c48c}
.rlx-dot{position:relative;z-index:1;height:38px;display:flex;align-items:center;justify-content:center}
/* completed stage */
.rlx .done .rlx-node{width:26px;height:26px;border-radius:50%;background-image:var(--srx-accent-grad);
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(227,116,0,.35)}
/* current stage */
.rlx .cur .rlx-node{width:36px;height:36px;border-radius:50%;background:#fff;
  border:2px solid var(--srx-accent);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 5px rgba(227,116,0,.13),0 3px 10px rgba(227,116,0,.28)}
.rlx-pulse{width:13px;height:13px;border-radius:50%;background-image:var(--srx-accent-grad);
  animation:srxPulse 2.2s var(--gua-ease) infinite}
@keyframes srxPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.65}}
/* upcoming stage */
.rlx .todo .rlx-node{width:26px;height:26px;border-radius:50%;background:#fff;
  border:2px solid var(--gua-gray-300);display:flex;align-items:center;justify-content:center}
.rlx .todo .rlx-node i{width:6px;height:6px;border-radius:50%;background:var(--gua-gray-300)}
/* gates: rotated-diamond checkpoints, deliberately unlike stage circles */
.rlx .gate .rlx-node{width:25px;height:25px;border-radius:7px;transform:rotate(45deg);
  display:flex;align-items:center;justify-content:center}
.rlx .gate .rlx-node svg{transform:rotate(-45deg)}
.rlx .gatepass .rlx-node{background:var(--gua-navy);color:#fff;
  box-shadow:0 3px 8px rgba(26,26,46,.35)}
.rlx .gatetodo .rlx-node{background:#fff;border:2px solid var(--gua-navy);color:var(--gua-navy)}
/* labels */
.rlx-name{margin-top:10px;font-family:var(--gua-font-display);font-size:11px;font-weight:600;
  line-height:1.3;color:var(--gua-gray-500)}
.rlx .todo .rlx-name{color:var(--gua-gray-400);font-weight:500}
.rlx .cur .rlx-name{font-size:12px;font-weight:800;color:var(--gua-gray-900)}
.rlx .gate .rlx-name{font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gua-navy)}
.rlx-sub{margin-top:3px;font-size:10.5px;line-height:1.4;color:var(--gua-gray-400);max-width:150px}
.rlx .cur .rlx-sub{color:var(--srx-accent-ink);font-weight:600;font-size:11px}

/* ------------------------------------------------------------
   9 · MINI-RAIL (compact, for page headers: 9 dots + 2 gate
   diamonds + current highlight). <i> states: done/cur/todo/gpass/gtodo
   ------------------------------------------------------------ */
.mrx{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#fff;
  border:1px solid var(--gua-gray-200);border-radius:var(--gua-radius-full);box-shadow:var(--gua-shadow-xs)}
.mrx i{display:block;width:8px;height:8px;border-radius:50%;flex:none}
.mrx i.done{background-image:var(--srx-accent-grad)}
.mrx i.cur{width:12px;height:12px;background:#fff;border:2.5px solid var(--srx-accent);
  box-shadow:0 0 0 3px rgba(227,116,0,.15)}
.mrx i.todo{background:#fff;border:2px solid var(--gua-gray-300)}
.mrx i.gpass{width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--gua-navy)}
.mrx i.gtodo{width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:#fff;
  border:1.5px solid var(--gua-navy)}
.mrx-lab{margin-left:8px;padding-left:12px;border-left:1px solid var(--gua-gray-200);
  font-family:var(--gua-font-display);font-size:11.5px;font-weight:600;color:var(--gua-gray-500);
  white-space:nowrap}
.mrx-lab strong{color:var(--gua-gray-800);font-weight:700}

/* ------------------------------------------------------------
   10 · LAYOUT — two columns (main + side rail)
   ------------------------------------------------------------ */
.colx{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:20px;margin-top:20px;align-items:start}
.colx-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.colx-side{display:flex;flex-direction:column;gap:16px}

/* ------------------------------------------------------------
   11 · CARDS
   ------------------------------------------------------------ */
.cdx{background:#fff;border:1px solid var(--gua-gray-200);border-radius:var(--gua-radius-xl);
  box-shadow:var(--gua-shadow-sm);overflow:hidden}
.cdx-bar{height:4px;background-image:var(--srx-accent-grad)}
.cdx-bar.dim{opacity:.35}
.cdx-bar.danger{background-image:linear-gradient(135deg,#d93025,#f77062)}
.cdx-body{padding:18px 20px 20px}
.cdx-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cdx-title{font-family:var(--gua-font-display);font-size:15px;font-weight:700;
  letter-spacing:-.01em;color:var(--gua-gray-900);display:flex;align-items:center;gap:8px}
.cdx-title svg{color:var(--srx-accent)}
.cdx-sub{font-size:12px;color:var(--gua-gray-400)}
/* muted placeholder card (e.g. "After publish", metrics placeholder) */
.cdx.muted{background:var(--gua-gray-50);box-shadow:none}
.cdx.muted .cdx-title{color:var(--gua-gray-500)}
.cdx.muted .cdx-title svg{color:var(--gua-gray-400)}

/* ------------------------------------------------------------
   12 · NAVY GATE CARD (director checkpoint CTA)
   ------------------------------------------------------------ */
.gtx{background:var(--gua-navy);border-radius:var(--gua-radius-xl);padding:20px;
  position:relative;overflow:hidden;box-shadow:var(--gua-shadow-md)}
.gtx::before{content:"";position:absolute;top:-70px;right:-60px;width:220px;height:220px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.16),transparent 68%)}
.gtx > *{position:relative}
.gtx-kick{display:flex;align-items:center;gap:7px;font-family:var(--gua-font-display);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.gtx-kick svg{color:var(--srx-accent-2)}
.gtx-title{font-family:var(--gua-font-display);font-size:16px;font-weight:700;color:#fff;margin-top:9px}
.gtx-body{font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.55);margin-top:8px}
.gtx-btn{width:100%;justify-content:center;margin-top:16px}
.gtx-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:9px;
  font-size:11.5px;color:rgba(255,255,255,.4)}
/* checklist rendered on navy (see .ckx below for the light version) */
.gtx .ckx{margin-top:12px}
.gtx .ckx li{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.08)}
.gtx .ckx li.pend{color:rgba(255,255,255,.45)}
.gtx .ckx-meta{color:rgba(255,255,255,.4)}
.gtx .ckx-ic.ok{background:rgba(45,212,191,.15);color:#2dd4bf}
.gtx .ckx-ic.pend{border-color:rgba(255,255,255,.25)}
.gtx .ckx-ic.warn{background:rgba(245,166,35,.15);color:var(--srx-accent-2)}

/* ------------------------------------------------------------
   13 · BRIEF FIELDS + REFERENCE/LINK CHIPS
   (.bfx-ref is the generic reference chip — usable anywhere)
   ------------------------------------------------------------ */
.bfx-field{margin-top:14px}
.bfx-field:first-child{margin-top:0}
.bfx-label{font-family:var(--gua-font-display);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gua-gray-400)}
.bfx-val{font-size:13.5px;line-height:1.6;color:var(--gua-gray-600);margin-top:4px;max-width:640px}
.bfx-refs{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.bfx-ref{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;
  border-radius:var(--gua-radius-full);border:1px solid var(--gua-gray-200);background:#fff;
  font-family:var(--gua-font-display);font-size:12px;font-weight:500;color:var(--gua-gray-600);
  transition:border-color var(--gua-duration-fast) var(--gua-ease),color var(--gua-duration-fast) var(--gua-ease)}
.bfx-ref svg{color:var(--gua-gray-400);transition:color var(--gua-duration-fast) var(--gua-ease)}
.bfx-ref:hover{border-color:rgba(227,116,0,.4);color:var(--srx-accent-ink)}
.bfx-ref:hover svg{color:var(--srx-accent)}

/* ------------------------------------------------------------
   14 · TASK ROWS (clip-task table)
   ------------------------------------------------------------ */
.tkx-list{margin-top:10px}
.tkx{border-radius:10px;transition:background-color var(--gua-duration-fast) var(--gua-ease)}
.tkx + .tkx{border-top:1px solid var(--gua-gray-100)}
.tkx:hover{background:var(--gua-gray-50)}
.tkx-row{display:grid;grid-template-columns:56px 128px minmax(0,1fr) 102px 118px;
  gap:12px;align-items:center;padding:12px 10px}
.tkx-seg{justify-self:start;font-family:var(--gua-font-display);font-size:11px;font-weight:700;
  color:var(--gua-gray-500);background:var(--gua-gray-100);border-radius:var(--gua-radius-sm);
  padding:3px 7px;white-space:nowrap}
.tkx-type{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;
  color:var(--gua-gray-500);min-width:0}
.tkx-type svg{color:var(--gua-gray-400)}
.tkx-type span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkx-title{font-family:var(--gua-font-display);font-size:13px;font-weight:600;
  color:var(--gua-gray-800);line-height:1.4}
.tkx-who{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--gua-gray-600)}
.tkx-who .av{width:20px;height:20px;font-size:9px}
.tkx-who.none{color:var(--gua-gray-400)}
.tkx-who .ghostav{width:20px;height:20px;border-radius:50%;border:1.5px dashed var(--gua-gray-300);flex:none}
.tkx-st{justify-self:end}
/* inline director note under a row */
.tkx-note{display:flex;gap:9px;align-items:flex-start;margin:0 10px 12px 78px;
  padding:10px 14px;border-left:3px solid var(--srx-danger);border-radius:0 var(--gua-radius-md) var(--gua-radius-md) 0;
  background:var(--srx-danger-soft);font-size:12.5px;line-height:1.55;color:var(--gua-gray-600)}
.tkx-note svg{color:var(--srx-danger);margin-top:1px}
.tkx-note strong{font-family:var(--gua-font-display);font-weight:700;color:var(--gua-gray-800)}

/* ------------------------------------------------------------
   15 · ACTIVITY LIST (timeline)
   Icon tints: .up upload · .rq request-changes · .cl claim ·
   .gp gate-passed · .ai AI action
   ------------------------------------------------------------ */
.acx{margin-top:6px}
.acx li{position:relative;display:flex;align-items:flex-start;gap:12px;padding:11px 0}
.acx li::before{content:"";position:absolute;left:14px;top:40px;bottom:-12px;width:2px;
  background:var(--gua-gray-100)}
.acx li:last-child::before{display:none}
.acx-ic{position:relative;z-index:1;width:29px;height:29px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(15,23,42,.05)}
.acx-ic.up{background:var(--srx-success-soft);color:var(--srx-success)}
.acx-ic.rq{background:var(--srx-danger-soft);color:var(--srx-danger)}
.acx-ic.cl{background:rgba(124,58,237,.08);color:#7c3aed}
.acx-ic.gp{background:rgba(26,26,46,.07);color:var(--gua-navy)}
.acx-ic.ai{background:var(--srx-accent-soft);color:var(--srx-accent)}
.acx-txt{font-size:13px;line-height:1.5;color:var(--gua-gray-500);padding-top:4px}
.acx-txt strong{font-weight:700;color:var(--gua-gray-700)}
.acx-when{margin-left:auto;padding-top:6px;font-size:11.5px;color:var(--gua-gray-400);white-space:nowrap}

/* ------------------------------------------------------------
   16 · TEAM LIST
   ------------------------------------------------------------ */
.tmx{margin-top:4px}
.tmx li{display:flex;align-items:center;gap:11px;padding:9px 0}
.tmx li + li{border-top:1px solid var(--gua-gray-100)}
.tmx .av{width:30px;height:30px;font-size:12px}
.tmx-name{font-family:var(--gua-font-display);font-size:13px;font-weight:700;
  color:var(--gua-gray-800);line-height:1.25}
.tmx-role{font-size:11.5px;color:var(--gua-gray-500)}
.tmx-meta{margin-left:auto;font-size:11.5px;color:var(--gua-gray-400);white-space:nowrap}
.tmx-ghost{width:30px;height:30px;border-radius:50%;border:1.5px dashed var(--gua-gray-300);
  display:flex;align-items:center;justify-content:center;color:var(--gua-gray-400);flex:none}
.tmx-assign{margin-left:auto;font-family:var(--gua-font-display);font-size:11.5px;font-weight:600;
  color:var(--gua-gray-600);border:1.5px solid var(--gua-gray-300);border-radius:var(--gua-radius-full);
  padding:5px 13px;background:#fff;cursor:pointer;
  transition:border-color var(--gua-duration-fast) var(--gua-ease),color var(--gua-duration-fast) var(--gua-ease)}
.tmx-assign:hover{border-color:rgba(227,116,0,.5);color:var(--srx-accent-ink)}

/* ------------------------------------------------------------
   17 · SCRIPT SIDE CARD (icon header + arrow links)
   ------------------------------------------------------------ */
.scx-head{display:flex;align-items:center;gap:11px}
.scx-ic{width:34px;height:34px;border-radius:10px;background:var(--srx-accent-soft);
  color:var(--srx-accent);display:flex;align-items:center;justify-content:center;flex:none}
.scx-title{font-family:var(--gua-font-display);font-size:13.5px;font-weight:700;color:var(--gua-gray-800)}
.scx-meta{font-size:11.5px;color:var(--gua-gray-500);margin-top:2px}
.scx-links{display:flex;gap:18px;margin-top:14px;padding-top:13px;border-top:1px solid var(--gua-gray-100)}
.scx-links a{display:inline-flex;align-items:center;gap:5px;font-family:var(--gua-font-display);
  font-size:12.5px;font-weight:600;color:var(--gua-gray-600);
  transition:color var(--gua-duration-fast) var(--gua-ease)}
.scx-links a svg{transition:transform var(--gua-duration-base) var(--gua-ease)}
.scx-links a:hover{color:var(--srx-accent)}
.scx-links a:hover svg{transform:translateX(3px)}

/* ------------------------------------------------------------
   18 · KANBAN BOARD (h-scroll INSIDE its container)
   ------------------------------------------------------------ */
.kbx{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 16px;margin-top:20px}
.kbx::-webkit-scrollbar{height:9px}
.kbx::-webkit-scrollbar-track{background:transparent}
.kbx::-webkit-scrollbar-thumb{background:var(--gua-gray-300);border-radius:var(--gua-radius-full)}
.kbx-col{flex:none;width:266px;display:flex;flex-direction:column;gap:10px}
.kbx-head{display:flex;align-items:center;gap:8px;padding:2px 4px 8px;
  border-bottom:2px solid var(--gua-gray-200)}
.kbx-head.hot{border-bottom-color:#f3c48c}
.kbx-hname{font-family:var(--gua-font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gua-gray-500)}
.kbx-head.hot .kbx-hname{color:var(--srx-accent-ink)}
.kbx-count{min-width:20px;height:18px;padding:0 6px;border-radius:var(--gua-radius-full);
  background:var(--gua-gray-100);color:var(--gua-gray-500);font-family:var(--gua-font-display);
  font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.kbx-card{display:block;background:#fff;border:1px solid var(--gua-gray-200);
  border-radius:var(--gua-radius-lg);box-shadow:var(--gua-shadow-xs);overflow:hidden;
  transition:transform var(--gua-duration-base) var(--gua-ease),box-shadow var(--gua-duration-base) var(--gua-ease)}
a.kbx-card:hover{transform:translateY(-2px);box-shadow:var(--gua-shadow-md)}
.kbx-card .bar{height:3px;background-image:var(--srx-accent-grad)}
.kbx-in{padding:12px 14px 13px}
.kbx-ep{display:inline-flex;font-family:var(--gua-font-display);font-size:10.5px;font-weight:700;
  color:var(--gua-gray-500);background:var(--gua-gray-100);border-radius:var(--gua-radius-sm);
  padding:2px 7px;white-space:nowrap}
.kbx-ttl{font-family:var(--gua-font-display);font-size:13px;font-weight:700;
  color:var(--gua-gray-800);line-height:1.4;margin-top:7px}
.kbx-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.kbx-meta .txt{font-size:11px;color:var(--gua-gray-400)}
.kbx-meta .av{width:20px;height:20px;font-size:9px}
/* idea cards: lighter */
.kbx-card.lite{border:1px dashed var(--gua-gray-300);background:rgba(255,255,255,.65);box-shadow:none}
.kbx-card.lite .kbx-ttl{font-weight:600;color:var(--gua-gray-700)}
.kbx-tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--gua-font-display);
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--srx-accent-ink);background:var(--srx-accent-soft);
  border:1px solid rgba(227,116,0,.16);padding:2px 7px;border-radius:var(--gua-radius-full)}
.kbx-star{display:inline-flex;color:var(--srx-accent)}

/* ------------------------------------------------------------
   19 · STAT STRIP
   ------------------------------------------------------------ */
.stx{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.stx-item{display:flex;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--gua-gray-200);border-radius:var(--gua-radius-lg);
  box-shadow:var(--gua-shadow-xs);padding:12px 18px;min-width:150px}
.stx-num{font-family:var(--gua-font-display);font-size:22px;font-weight:800;
  letter-spacing:-.02em;color:var(--gua-gray-900);line-height:1}
.stx-lab{font-size:11.5px;color:var(--gua-gray-500);line-height:1.35}
.stx-item.accent .stx-num{color:var(--srx-accent-ink)}
.stx-item.warn .stx-num{color:var(--srx-danger-ink)}
.stx-item.ok .stx-num{color:var(--srx-success-ink)}

/* ------------------------------------------------------------
   20 · CHAT (AI refine conversation) + COMPOSER
   Rows: .chx-row.user (right) vs .chx-row.ai (left)
   ------------------------------------------------------------ */
.chx{display:flex;flex-direction:column;gap:12px}
.chx-row{display:flex;align-items:flex-start;gap:9px;max-width:92%}
.chx-row.user{align-self:flex-end;flex-direction:row-reverse}
.chx-row .av{width:26px;height:26px;font-size:10.5px;margin-top:2px}
.chx-avai{width:26px;height:26px;border-radius:50%;background:var(--srx-accent-soft);
  color:var(--srx-accent);display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
.chx-bubble{padding:10px 14px;font-size:13px;line-height:1.55;color:var(--gua-gray-600)}
.chx-row.user .chx-bubble{background:var(--gua-gray-100);color:var(--gua-gray-700);
  border-radius:12px 4px 12px 12px}
.chx-row.ai .chx-bubble{background:#fff;border:1px solid var(--gua-gray-200);
  box-shadow:var(--gua-shadow-xs);border-radius:4px 12px 12px 12px}
.chx-bubble strong{font-weight:700;color:var(--gua-gray-800)}

/* composer — shared by chat panels and comment threads */
.cpx{display:flex;align-items:center;gap:8px;background:#fff;
  border:1.5px solid var(--gua-gray-200);border-radius:var(--gua-radius-full);
  padding:6px 6px 6px 16px;margin-top:14px;
  transition:border-color var(--gua-duration-fast) var(--gua-ease),
  box-shadow var(--gua-duration-fast) var(--gua-ease)}
.cpx:focus-within{border-color:var(--srx-accent);box-shadow:0 0 0 3px rgba(227,116,0,.14)}
.cpx input{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:var(--gua-font-body);font-size:13px;color:var(--gua-gray-800)}
.cpx input::placeholder{color:var(--gua-gray-400)}
.cpx-send{width:34px;height:34px;border-radius:50%;border:none;flex:none;cursor:pointer;
  background-image:var(--srx-accent-grad);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(227,116,0,.3);
  transition:transform var(--gua-duration-fast) var(--gua-ease)}
.cpx-send:hover{transform:translateY(-1px)}

/* ------------------------------------------------------------
   21 · SELECTABLE OPTION ROWS / CARDS (title options, angle picks)
   Add .sel for the selected state. Check svg lives in markup.
   ------------------------------------------------------------ */
.opx{display:flex;flex-direction:column;gap:10px}
.opx-row{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;
  border:1.5px solid var(--gua-gray-200);border-radius:var(--gua-radius-lg);background:#fff;
  cursor:pointer;transition:border-color var(--gua-duration-fast) var(--gua-ease),
  box-shadow var(--gua-duration-fast) var(--gua-ease),
  background-color var(--gua-duration-fast) var(--gua-ease)}
.opx-row:hover{border-color:var(--gua-gray-300);box-shadow:var(--gua-shadow-xs)}
.opx-row.sel,.opx-card.sel{border-color:var(--srx-accent);background:var(--srx-accent-soft);
  box-shadow:0 0 0 3px rgba(227,116,0,.1)}
.opx-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--gua-gray-300);
  flex:none;display:flex;align-items:center;justify-content:center;color:#fff;margin-top:1px;
  transition:background-color var(--gua-duration-fast) var(--gua-ease),
  border-color var(--gua-duration-fast) var(--gua-ease)}
.opx-check svg{opacity:0;transition:opacity var(--gua-duration-fast) var(--gua-ease)}
.sel .opx-check{background-image:var(--srx-accent-grad);border-color:transparent;
  box-shadow:0 2px 6px rgba(227,116,0,.35)}
.sel .opx-check svg{opacity:1}
.opx-title{font-family:var(--gua-font-display);font-size:13.5px;font-weight:700;
  color:var(--gua-gray-800);line-height:1.35}
.opx-sub{font-size:12.5px;color:var(--gua-gray-500);margin-top:3px;line-height:1.5}
.opx-tag{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;
  border-radius:var(--gua-radius-full);background:var(--srx-accent-soft);
  border:1px solid rgba(227,116,0,.16);color:var(--srx-accent-ink);
  font-family:var(--gua-font-display);font-size:9.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:2px}
.opx-act{margin-left:auto;flex:none}
/* card variant (grid of selectable cards) */
.opx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.opx-card{position:relative;display:block;padding:15px 16px;padding-right:44px;
  border:1.5px solid var(--gua-gray-200);border-radius:var(--gua-radius-lg);background:#fff;
  cursor:pointer;transition:border-color var(--gua-duration-fast) var(--gua-ease),
  box-shadow var(--gua-duration-fast) var(--gua-ease),
  background-color var(--gua-duration-fast) var(--gua-ease)}
.opx-card:hover{border-color:var(--gua-gray-300);box-shadow:var(--gua-shadow-xs)}
.opx-card .opx-check{position:absolute;top:12px;right:12px;margin-top:0}

/* ------------------------------------------------------------
   22 · SEGMENT LIST (grouped: task group header + segment rows)
   ------------------------------------------------------------ */
.sgx{display:flex;flex-direction:column;gap:16px;margin-top:14px}
.sgx-group{border:1px solid var(--gua-gray-200);border-radius:var(--gua-radius-lg);
  background:#fff;overflow:hidden}
.sgx-ghead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;
  background:var(--gua-gray-50);border-bottom:1px solid var(--gua-gray-100)}
.sgx-gtitle{font-family:var(--gua-font-display);font-size:13px;font-weight:700;color:var(--gua-gray-800)}
.sgx-gmeta{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sgx-row{display:grid;grid-template-columns:54px minmax(0,1fr) 260px;gap:14px;
  align-items:start;padding:12px 14px}
.sgx-row + .sgx-row{border-top:1px solid var(--gua-gray-100)}
.sgx-id{justify-self:start;font-family:var(--gua-font-display);font-size:11px;font-weight:700;
  color:var(--gua-gray-500);background:var(--gua-gray-100);border-radius:var(--gua-radius-sm);
  padding:3px 7px;white-space:nowrap}
.sgx-narr{font-size:13px;line-height:1.6;color:var(--gua-gray-600)}
.sgx-narr .chiprow{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.sgx-note{border:1.5px solid var(--gua-gray-200);border-radius:var(--gua-radius-md);
  padding:8px 11px;background:#fff;font-size:12px;line-height:1.55;color:var(--gua-gray-600);
  transition:border-color var(--gua-duration-fast) var(--gua-ease)}
.sgx-note:hover{border-color:var(--gua-gray-300)}
.sgx-note .lbl{display:block;font-family:var(--gua-font-display);font-size:9px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gua-gray-400);margin-bottom:3px}

/* ------------------------------------------------------------
   23 · PLAYER FRAME (16:9 dark poster + play affordance)
   ------------------------------------------------------------ */
.plx-frame{position:relative;aspect-ratio:16/9;border-radius:var(--gua-radius-lg);overflow:hidden;
  background:
    radial-gradient(420px 260px at 72% 18%, rgba(245,166,35,.18), transparent 60%),
    radial-gradient(500px 320px at 18% 92%, rgba(188,76,244,.15), transparent 65%),
    linear-gradient(135deg,#1a1a2e,#232347)}
.plx-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;
  transition:transform var(--gua-duration-base) var(--gua-ease),
  background-color var(--gua-duration-base) var(--gua-ease)}
.plx-play:hover{transform:translate(-50%,-50%) scale(1.07);background:rgba(255,255,255,.2)}
.plx-play svg{margin-left:3px}
.plx-dur{position:absolute;right:12px;bottom:10px;background:rgba(10,10,22,.62);color:#fff;
  font-family:var(--gua-font-display);font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:var(--gua-radius-sm)}
.plx-tag{position:absolute;left:12px;top:10px}

/* ------------------------------------------------------------
   24 · UPLOAD DROPZONE
   ------------------------------------------------------------ */
.dzx{display:flex;flex-direction:column;align-items:center;gap:8px;
  border:2px dashed var(--gua-gray-300);border-radius:var(--gua-radius-lg);
  padding:26px 18px;text-align:center;cursor:pointer;background:rgba(248,250,252,.6);
  transition:border-color var(--gua-duration-fast) var(--gua-ease),
  background-color var(--gua-duration-fast) var(--gua-ease)}
.dzx:hover{border-color:rgba(227,116,0,.5);background:var(--srx-accent-soft)}
.dzx-ic{width:38px;height:38px;border-radius:50%;background:var(--srx-accent-soft);
  color:var(--srx-accent);display:flex;align-items:center;justify-content:center}
.dzx-txt{font-family:var(--gua-font-display);font-size:13px;font-weight:700;color:var(--gua-gray-700)}
.dzx-sub{font-size:11.5px;color:var(--gua-gray-400)}

/* ------------------------------------------------------------
   25 · VERSION RAIL / LIST
   ------------------------------------------------------------ */
.vrx{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.vrx-item{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border:1.5px solid var(--gua-gray-200);border-radius:var(--gua-radius-md);background:#fff;
  transition:border-color var(--gua-duration-fast) var(--gua-ease)}
.vrx-item.on{border-color:rgba(227,116,0,.5);background:var(--srx-accent-soft)}
.vrx-item.empty{border-style:dashed;justify-content:center;color:var(--gua-gray-400);
  font-size:12px;background:transparent}
.vrx-name{font-family:var(--gua-font-display);font-size:13px;font-weight:700;color:var(--gua-gray-800)}
.vrx-meta{font-size:11.5px;color:var(--gua-gray-500)}
.vrx-act{margin-left:auto;flex:none}

/* ------------------------------------------------------------
   26 · CHECKLIST ROWS (.ok done · .pend pending · .warn attention)
   Set the state class on BOTH the li and the .ckx-ic.
   ------------------------------------------------------------ */
.ckx li{display:flex;align-items:center;gap:10px;padding:8px 0;
  font-size:13px;color:var(--gua-gray-600);line-height:1.45}
.ckx li + li{border-top:1px solid var(--gua-gray-100)}
.ckx li.pend{color:var(--gua-gray-400)}
.ckx-ic{width:21px;height:21px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center}
.ckx-ic.ok{background:var(--srx-success-soft);color:var(--srx-success)}
.ckx-ic.pend{border:2px solid var(--gua-gray-300)}
.ckx-ic.warn{background:var(--srx-accent-soft);color:var(--srx-accent)}
.ckx-meta{margin-left:auto;font-size:11px;color:var(--gua-gray-400);white-space:nowrap}

/* ------------------------------------------------------------
   27 · COMMENT THREAD (timecodes stay plain text in the body)
   ------------------------------------------------------------ */
.cmx{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.cmx-item{display:flex;align-items:flex-start;gap:11px}
.cmx-item .av{width:28px;height:28px;font-size:11px;margin-top:2px}
.cmx-main{min-width:0;flex:1}
.cmx-head{display:flex;align-items:baseline;gap:8px}
.cmx-name{font-family:var(--gua-font-display);font-size:12.5px;font-weight:700;color:var(--gua-gray-800)}
.cmx-when{font-size:11px;color:var(--gua-gray-400)}
.cmx-bubble{margin-top:4px;background:var(--gua-gray-50);border:1px solid var(--gua-gray-100);
  border-radius:4px 12px 12px 12px;padding:10px 13px;font-size:13px;line-height:1.6;
  color:var(--gua-gray-600)}
.cmx-bubble strong{font-weight:700;color:var(--gua-gray-800)}

/* ------------------------------------------------------------
   28 · BANNER / INFO STRIP (default neutral · .accent · .warn)
   ------------------------------------------------------------ */
.bnx{display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-radius:var(--gua-radius-lg);border:1px solid var(--gua-gray-200);
  background:rgba(26,26,46,.04);font-size:12.5px;line-height:1.5;color:var(--gua-gray-600)}
.bnx svg{color:var(--gua-navy);flex:none}
.bnx strong{font-family:var(--gua-font-display);font-weight:700;color:var(--gua-gray-800)}
.bnx.accent{background:var(--srx-accent-soft);border-color:rgba(227,116,0,.18);color:var(--srx-accent-ink)}
.bnx.accent svg{color:var(--srx-accent)}
.bnx.accent strong{color:var(--srx-accent-ink)}
.bnx.warn{background:var(--srx-danger-soft);border-color:rgba(217,48,37,.18);color:var(--srx-danger-ink)}
.bnx.warn svg{color:var(--srx-danger)}
.bnx.warn strong{color:var(--srx-danger-ink)}

/* ------------------------------------------------------------
   29 · SECTION-HEADING KIT (page sections outside cards)
   ------------------------------------------------------------ */
.shx{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.shx:first-child{margin-top:0}
.shx-name{font-family:var(--gua-font-display);font-size:14px;font-weight:800;
  letter-spacing:-.01em;color:var(--gua-gray-900);white-space:nowrap}
.shx-count{min-width:20px;height:18px;padding:0 7px;border-radius:var(--gua-radius-full);
  background:var(--gua-gray-100);color:var(--gua-gray-500);font-family:var(--gua-font-display);
  font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.shx-rule{flex:1;height:1px;background:var(--gua-gray-200)}
.shx-sub{font-size:12px;color:var(--gua-gray-400);white-space:nowrap}
.shx-act{flex:none}

/* ------------------------------------------------------------
   30 · GENERIC LIST ROWS (sources, pillars, compact task lists)
   ------------------------------------------------------------ */
.lsx li{display:flex;align-items:center;gap:11px;padding:10px 0}
.lsx li + li{border-top:1px solid var(--gua-gray-100)}
.lsx-ic{width:32px;height:32px;border-radius:9px;background:var(--srx-accent-soft);
  color:var(--srx-accent);display:flex;align-items:center;justify-content:center;flex:none}
.lsx-ic.gray{background:var(--gua-gray-100);color:var(--gua-gray-500)}
.lsx-ic.navy{background:rgba(26,26,46,.07);color:var(--gua-navy)}
.lsx-ic.ok{background:var(--srx-success-soft);color:var(--srx-success)}
.lsx-title{font-family:var(--gua-font-display);font-size:13px;font-weight:700;
  color:var(--gua-gray-800);line-height:1.3}
.lsx-meta{font-size:11.5px;color:var(--gua-gray-500);margin-top:1px}
.lsx-act{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px}

/* ------------------------------------------------------------
   31 · PROMPT BLOCK (copy-ready, navy) + STEPS + REF THUMBS
   ------------------------------------------------------------ */
.pmx{position:relative;background:var(--gua-navy);border-radius:var(--gua-radius-lg);
  padding:16px 18px;color:rgba(255,255,255,.82);font-size:13px;line-height:1.7;overflow:hidden}
.pmx::before{content:"";position:absolute;top:-60px;right:-50px;width:180px;height:180px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.14),transparent 68%)}
.pmx > *{position:relative}
.pmx-kick{display:block;font-family:var(--gua-font-display);font-size:9.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:8px}

/* numbered steps */
.stp{display:flex;flex-direction:column;gap:9px}
.stp li{display:flex;align-items:flex-start;gap:10px;font-size:13px;
  color:var(--gua-gray-600);line-height:1.5}
.stp-n{width:21px;height:21px;border-radius:50%;background:var(--srx-accent-soft);
  color:var(--srx-accent-ink);font-family:var(--gua-font-display);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}

/* reference thumbnails (posters = CSS gradients, set inline) */
.thx{width:132px}
.thx-lg{width:100%}
.thx-img{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;
  border:1px solid var(--gua-gray-200);
  background:linear-gradient(135deg,#1a1a2e,#3b3b63);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5)}
.thx-name{margin-top:6px;font-family:var(--gua-font-display);font-size:11.5px;font-weight:600;
  color:var(--gua-gray-500)}
.thx.sel .thx-img{box-shadow:0 0 0 2.5px var(--srx-accent),0 0 0 6px rgba(227,116,0,.15)}
.thx-badge{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  background-image:var(--srx-accent-grad);color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:0 2px 6px rgba(227,116,0,.4)}
.thx-row{display:flex;gap:14px;flex-wrap:wrap}

/* ------------------------------------------------------------
   32 · SCRIPT PROSE (draft body: section heads, elide, annotation)
   ------------------------------------------------------------ */
.prx{font-size:13.5px;line-height:1.75;color:var(--gua-gray-600);max-width:680px}
.prx h3{font-family:var(--gua-font-display);font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--srx-accent-ink);margin:20px 0 8px}
.prx h3:first-child{margin-top:0}
.prx p{margin:0 0 10px}
.prx-elide{display:flex;align-items:center;gap:10px;color:var(--gua-gray-400);
  font-size:11.5px;font-style:italic;margin:12px 0;white-space:nowrap}
.prx-elide::before,.prx-elide::after{content:"";flex:1;height:1px;background:var(--gua-gray-200)}

/* ------------------------------------------------------------
   33 · CHAPTERS LIST (timestamp + label)
   ------------------------------------------------------------ */
.chp{display:flex;flex-direction:column;gap:7px}
.chp li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--gua-gray-600)}
.chp-t{font-family:var(--gua-font-display);font-size:11px;font-weight:700;
  color:var(--srx-accent-ink);background:var(--srx-accent-soft);border-radius:var(--gua-radius-sm);
  padding:2px 8px;min-width:48px;text-align:center;flex:none}

/* ------------------------------------------------------------
   34 · EMPTY STATE + HINT ROW
   ------------------------------------------------------------ */
.emx{border:1.5px dashed var(--gua-gray-300);border-radius:var(--gua-radius-lg);
  padding:20px 16px;text-align:center;font-size:12.5px;line-height:1.55;
  color:var(--gua-gray-400);background:rgba(255,255,255,.6)}
.emx strong{font-family:var(--gua-font-display);font-weight:600;color:var(--gua-gray-500)}
.hintx{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--gua-gray-400)}
.hintx svg{color:var(--gua-gray-400)}

/* ------------------------------------------------------------
   35 · RESPONSIVE SAFETY + REDUCED MOTION
   ------------------------------------------------------------ */
@media (max-width:1240px){
  .shell{grid-template-columns:200px minmax(0,1fr)}
  .colx{grid-template-columns:minmax(0,1fr) 300px}
  .rlx-sub{max-width:110px}
  .sgx-row{grid-template-columns:54px minmax(0,1fr)}
  .sgx-row .sgx-note{grid-column:2}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}