/* ============================================================================
   claude-code.css — the shared Claude Code terminal surface (header + typed
   transcript + composer). Self-contained: the standalone CC pages do NOT link
   _theme.css, so the CC color family + JetBrains Mono font live here.

   Two geometries, both fed by claude-code.mjs:
     • DEFAULT (full-bleed) — 04-claude-code, cc-guard, cc-explore. Copied
       VERBATIM from those pages: `.term { max-width:1000px }` is load-bearing —
       video/src/scenes.mjs records the CC split panes at CC_SP=1048×1000
       *because* of this width. Changing it reflows scenes 06–11. Do not touch.
     • .framed — optimize-workspace LEFT pane only. A rounded bordered window card
       with its own inner scroll + smaller fonts (13px / smaller ccbot / 12px
       meta). Scoped under `.cc-term.framed` so it NEVER leaks into the full-bleed
       path. (optimize-workspace links _theme.css for its bespoke right pane, so
       --violet/--accent etc. resolve there; the .framed block reads CC literals.)
   ============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

/* ── CC color family (was :root on the full-bleed pages; scoped to the surface
   so it can't collide with _theme.css on the framed/optimize page) ── */
.cc-term {
  --bg:#080410; --fg:#d8d4e0; --dim:#7e788f; --faint:#564f66;
  --line:#181226; --line2:#221a33;
  --orange:#e0a256; --green:#6fcf85; --red:#e06c75; --cyan:#5ad4d4; --violet:#b89cf0; --user:#9aa7ff;
}

/* ════════════════════════════ DEFAULT (full-bleed) ════════════════════════ */
/* `body.cc-page` carries the page-level typography + background so the .term
   (which has no bg) shows the dark backdrop — verbatim from the source pages.
   The reset (margin/padding 0 + border-box) is load-bearing: with border-box the
   `.cc-term` min-height:100vh INCLUDES its 14+90px vertical padding (so the body
   is exactly one viewport tall and never scrolls the header off). Without it the
   term grows to 100vh+104px and the autoscroll clips the header. Verbatim from
   the source pages' `*{margin:0;padding:0;box-sizing:border-box}`. */
/* :where() keeps the reset at 0,0,0 specificity (so .cc-term's own padding still
   wins) while scoping it to the full-bleed cc-page document — it never touches a
   _theme.css page like optimize-workspace. */
:where(body.cc-page) *, :where(body.cc-page) { margin:0; padding:0; box-sizing:border-box; }
:where(html:has(body.cc-page)), :where(body.cc-page) { height:100%; }
body.cc-page { background:#080410; color:#d8d4e0; font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:13.5px; line-height:1.65; }
/* bottom padding clears the fixed composer + a full line of buffer, so a line
   being streamed in never lands behind the composer before the autoscroll. */
.cc-term { max-width:1000px; margin:0 auto; min-height:100vh; padding:14px 22px 124px; }
.cc-term .cc-head { display:flex; gap:15px; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:14px; }
.cc-term .ccbot { display:flex; flex-direction:column; flex-shrink:0; line-height:0; }
.cc-term .ccbot .brow { display:flex; }
.cc-term .ccbot i { width:6px; height:8px; display:block; }
.cc-term .ccbot i.t { background:#c47f5d; }
.cc-term .ccbot i.e { background:#15100c; }
.cc-term .cc-head .meta { font-size:13px; line-height:1.5; padding-top:1px; }
.cc-term .cc-head .meta .t { color:var(--fg); font-weight:700; }
.cc-term .cc-head .meta .ver { color:var(--faint); font-weight:500; }
.cc-term .cc-head .meta .d { color:var(--dim); }

.cc-term .cc-row { white-space:pre-wrap; word-break:break-word; }
.cc-term .user { display:block; background:rgba(255,255,255,.05); border-radius:5px; padding:4px 10px; margin:3px -10px; color:var(--fg); font-weight:500; }
.cc-term .user .car { color:var(--faint); }
.cc-term .asst { color:var(--fg); } .cc-term .asst .mk { color:var(--fg); }
.cc-term .tool { color:var(--orange); } .cc-term .tool .mk { color:var(--orange); }
.cc-term .cc-sub { color:var(--dim); padding-left:2px; } .cc-term .cc-sub .mk { color:var(--faint); }
.cc-term .dim { color:var(--dim); } .cc-term .faint { color:var(--faint); }
.cc-term .ok { color:var(--green); } .cc-term .err { color:var(--red); }
.cc-term .b { font-weight:700; }
.cc-term .cyan { color:var(--cyan); } .cc-term .green { color:var(--green); } .cc-term .red { color:var(--red); } .cc-term .violet { color:var(--violet); } .cc-term .orange { color:var(--orange); }
.cc-term a.link { color:var(--cyan); text-decoration:underline; text-underline-offset:2px; }
.cc-term .spacer { height:9px; }
.cc-term .blk { margin:8px 0; }
@keyframes cc-bl { 50% { opacity:0; } }

/* composer (fixed, full-bleed) */
.cc-composer { position:fixed; left:0; right:0; bottom:0; background:#080410; padding:14px 22px 18px; }
.cc-composer .inputbox { max-width:1000px; margin:0 auto; border:1px solid #221a33; border-top:1.5px solid #3a7d7d; border-radius:0; padding:12px 14px; display:flex; align-items:center; gap:10px; }
.cc-composer .inputbox .prompt { color:#564f66; }
/* thin caret (a straight vertical line, sharp corners, steady) — sits after the
   prompt without covering any text, instead of a blinking filled block */
.cc-composer .cursor { display:inline-block; width:2px; height:16px; background:#d8d4e0; border-radius:0; }

/* policy paste block (cc-guard) — whole-reveal, readable multi-line */
.cc-term .policy { border:1px solid var(--line2); border-radius:8px; padding:9px 12px; margin:4px 0 2px; background:rgba(255,255,255,.012); font-size:12.5px; line-height:1.7; color:var(--fg); }
.cc-term .policy .pl { display:block; white-space:pre-wrap; }

/* AskUserQuestion UI (04 / cc-explore) */
.cc-term .cc-row.qrow { white-space:normal; }
.cc-term .qintro .mk { color:var(--fg); }
.cc-term .qbox { margin:5px 0 2px; }
.cc-term .qrule { border-top:1px solid #322d46; margin:9px 0; }
.cc-term .qhead { display:inline-block; background:rgba(154,167,255,.18); color:var(--user); padding:2px 9px; border-radius:4px; font-weight:700; margin-bottom:9px; }
.cc-term .qtext { color:var(--fg); margin-bottom:11px; }
.cc-term .qopt { color:var(--dim); padding:1px 0; }
.cc-term .qopt.sel { color:var(--user); }
.cc-term .qdesc { color:var(--faint); padding-left:23px; margin-bottom:7px; }
.cc-term .qfoot { color:var(--faint); margin-top:11px; }
.cc-term .ans-sub { color:var(--dim); } .cc-term .ans-sub b { color:var(--fg); }

/* steps-nav hash rail (04, cc-explore — absent on cc-guard) */
.cc-steps-nav { display:none; position:fixed; right:16px; top:12px; gap:6px; z-index:5; }
body.show-tags .cc-steps-nav { display:flex; }
.cc-steps-nav a { font-size:11px; color:#7e788f; border:1px solid #221a33; border-radius:7px; padding:4px 9px; }
.cc-steps-nav a.on { color:#5ad4d4; border-color:#5ad4d4; }

/* standalone replay affordance (04 only had it; kept for parity, hidden) */
.cc-replay { position:fixed; left:16px; bottom:48px; font-size:11px; color:#7e788f; border:1px solid #221a33; border-radius:7px; padding:5px 10px; cursor:pointer; background:#080410; }

/* scene-tag string (cc-explore) */
.cc-scene-tag { display:none; position:fixed; left:16px; bottom:14px; z-index:50; font:500 12px "JetBrains Mono",monospace; color:#564f66; background:rgba(8,4,16,.8); border:1px solid #221a33; padding:5px 10px; border-radius:8px; }
body.show-tags .cc-scene-tag { display:block; }

/* ══════════════════════════════ .framed (window card) ═════════════════════ */
/* optimize-workspace LEFT pane only. Different geometry, fully scoped: smaller
   fonts (13px / 12px meta / 5×7 ccbot), inner scroll, its own composer + diff
   block. Copied VERBATIM from optimize-workspace.html's `.col.cc` block (class
   names mapped: .crow→.cc-row, .u→.user, .a→.asst, .t-line→.tool, .s→.cc-sub,
   .d→.dim, .sp→.spacer, .cc-scroll→.cc-scroll). The row container is `.cc-row`
   and the tool sub-line is `.cc-sub` — namespaced so they never inherit
   _theme.css's `.row{display:flex}` / `.sub{...}` on this _theme.css-linked page. */
/* No own background — the host card (.col.cc) carries #080410 and the rounded
   overflow:hidden clip; a bg here would blend the rounded corners 1px differently. */
.cc-term.framed { max-width:none; min-height:0; padding:0; margin:0; display:flex; flex-direction:column; flex:1; height:100%;
  background:transparent; color:#d8d4e0; font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:13px; line-height:1.6; }
.cc-term.framed .cc-scroll { flex:1; overflow-y:auto; padding:16px 20px 8px; scrollbar-width:none; }
.cc-term.framed .cc-scroll::-webkit-scrollbar { display:none; }
.cc-term.framed .cc-head { gap:13px; border-bottom:1px solid #181226; padding-bottom:12px; margin-bottom:12px; }
.cc-term.framed .ccbot i { width:5px; height:7px; }
.cc-term.framed .cc-head .meta { font-size:12px; line-height:1.45; padding-top:0; }
.cc-term.framed .cc-head .meta .ver { color:#564f66; font-weight:400; }
.cc-term.framed .user { padding:4px 9px; margin:3px -9px; }
.cc-term.framed .spacer { height:8px; }
.cc-term.framed .diff { border:1px solid #221a33; border-radius:8px; padding:7px 11px; margin:4px 0 2px; background:rgba(255,255,255,.012); font-size:12px; line-height:1.55; }
.cc-term.framed .diff .dl { display:block; white-space:pre-wrap; }
.cc-term.framed .diff .add { color:#6fcf85; background:rgba(111,207,133,.08); }
.cc-term.framed .diff .ctx { color:#564f66; }
.cc-term.framed .cc-composer { position:static; left:auto; right:auto; bottom:auto; background:transparent; padding:10px 20px 14px; max-width:none; }
.cc-term.framed .cc-composer .inputbox { max-width:none; margin:0; border:1px solid #221a33; border-top:1.5px solid #3a7d7d; border-radius:0; padding:10px 13px; gap:9px; }
.cc-term.framed .cc-composer .cursor { width:2px; height:15px; }