/* CLI page only: session terminal, agent comparison, small layout helpers.
   Same visual language as the home terminal (home.css .term), self-contained. */

.cli-hero { padding-top: 0; }
.cterm { border-radius: var(--r-card); background: var(--surface); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(255,255,255,.06); }
.cterm-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 12px 12px 0 var(--s-5); font: 12px/1 var(--font-mono); color: var(--subtle); }
.cterm-bar .where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cterm-replay { height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--fg); font: 12px/1 var(--font-mono); cursor: pointer; transition: color .25s, background .25s; }
.cterm-replay:hover { color: var(--fg-strong); }
.cterm-replay[hidden] { display: none; }
.cterm pre {
  margin: 0; padding: var(--s-4) var(--s-5) var(--s-5); height: 560px; overflow: auto;
  font: var(--t-mono)/1.7 var(--font-mono); color: var(--muted);
  white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; scrollbar-color: var(--faint) transparent;
}
/* Terminal text, mapped from the Rich styles in src/basalt/shell/ui.py:
   bold -> .b, grey50 (DIM) -> .dim, grey35 (FAINT) -> .faint, white -> .w, critical accent -> .crit */
.cterm .p { color: var(--subtle); }
.cterm .c { color: var(--fg-strong); }
.cterm .b { color: var(--fg-strong); font-weight: 500; }
.cterm .w { color: var(--fg-strong); }
.cterm .dim { color: var(--muted); }
.cterm .faint { color: var(--subtle); }
.cterm .crit { color: var(--critical); }
.cterm .spin { color: var(--fg-strong); }
.cterm .code { color: var(--fg-strong); }
.cterm .say { color: var(--fg); }
/* banner: rounded Rich panel, globe on the left, account info on the right */
.cterm .banner { display: inline-flex; align-items: center; gap: 3ch; max-width: 100%; margin: 6px 0 2px; padding: 1.2em 2ch; border: 1px solid var(--faint); border-radius: 8px; }
.cterm .globe { flex: none; display: block; width: 26ch; height: 26ch; }
.cterm .bn-info { min-width: 0; white-space: pre; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
/* approval panel: Rich Panel with the title set into the top border */
.cterm .panel { position: relative; display: inline-block; width: 100%; vertical-align: top; margin: 10px 0 2px; padding: 6px 1ch 4px; border: 1px solid var(--subtle); border-radius: 6px; color: var(--fg); }
.cterm .panel .pt { position: absolute; top: -0.85em; left: 1ch; padding: 0 1ch; background: var(--surface); color: var(--fg-strong); font-weight: 500; line-height: 1.6; }
.cterm .add { color: var(--fg-strong); background: rgba(255,255,255,.06); }
.cterm .del { color: var(--subtle); text-decoration: line-through; text-decoration-color: var(--faint); }
.cterm .cursor { display: inline-block; width: 7px; height: 14px; background: var(--fg-strong); vertical-align: -2px; animation: cblink 1s steps(2, start) infinite; }
@keyframes cblink { to { visibility: hidden; } }
.cterm-note { margin-top: var(--s-4); font-size: 13px; color: var(--subtle); }

/* exit codes */
.exits { display: grid; gap: var(--s-2); margin-top: var(--s-6); }
.exits div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: baseline; font-size: 15px; color: var(--muted); }
.exits code { display: inline-grid; place-items: center; width: 32px; height: 26px; border-radius: 8px; background: var(--surface-3); font-size: 12px; }

.soon { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-3); font: 500 11px/1 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.linear-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: center; padding: var(--s-7) var(--s-6); border-radius: 20px; }
.linear-card h2 { font-size: var(--t-title); line-height: 1.15; letter-spacing: -0.03em; margin-top: var(--s-4); }
.linear-card p { color: var(--muted); }
.issue { padding: var(--s-5); border-radius: var(--r-card); background: var(--surface-2); font-size: 14px; }
.issue .it { color: var(--fg-strong); font-size: 15px; }
.issue .im { margin-top: 6px; font: 12px/1.5 var(--font-mono); color: var(--subtle); }
.issue ul { margin: var(--s-4) 0 0; padding-left: 1.1em; color: var(--muted); display: grid; gap: 4px; }

.code.wrapped pre { white-space: pre-wrap; }

@media (max-width: 960px) {
  .linear-card { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding: var(--s-6) var(--s-5); }
}
@media (max-width: 560px) {
  .cterm pre { height: 480px; font-size: 11.5px; padding: var(--s-4); }
  .cterm-bar { padding-left: var(--s-4); }
  .linear-card { padding: var(--s-5) var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  .cterm .cursor { animation: none; }
}

/* multi-line blocks keep their own wrapping without adding a blank line in the <pre> */
.cterm .say { display: inline-block; width: 100%; vertical-align: top; padding-left: 2ch; }
.cterm .say.li { padding-left: 5ch; text-indent: -3ch; }
.cterm .say.sub { padding-left: 5ch; color: var(--muted); }
.cterm .say.sub .code { color: var(--fg); }

/* comparison: general coding agent vs the Basalt CLI. The Basalt column sits on one surface. */
.vs { position: relative; display: grid; --k: 132px; }
.vs::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc((100% - var(--k)) / 2); border-radius: var(--r-card); background: var(--surface); pointer-events: none; }
.vs-row { position: relative; display: grid; grid-template-columns: var(--k) minmax(0, 1fr) minmax(0, 1fr); }
.vs-row > span { padding: 14px var(--s-5); font-size: 15px; line-height: 1.55; }
.vs-k { font: 12.5px/1.55 var(--font-mono); color: var(--subtle); padding-left: 0 !important; padding-top: 17px !important; }
.vs-a { color: var(--muted); }
.vs-b { color: var(--fg); }
.vs-a, .vs-b { padding-left: calc(var(--s-5) + 20px) !important; }
.vs-row:not(.vs-top) .vs-a::before, .vs-row:not(.vs-top) .vs-b::before { display: inline-block; width: 20px; margin-left: -20px; font-family: var(--font-mono); }
.vs-row:not(.vs-top) .vs-a::before { content: "\2014"; color: var(--subtle); }
.vs-row:not(.vs-top) .vs-b::before { content: "\25CF"; font-size: 11px; vertical-align: 1px; color: var(--fg-strong); }
.vs-top > span { padding-top: var(--s-5); padding-bottom: var(--s-3); font-size: var(--t-small); }
.vs-top .vs-a { color: var(--subtle); }
.vs-top .vs-b { color: var(--fg-strong); }
.vs-row:last-child > span { padding-bottom: var(--s-5); }
.vs code { font-size: 12.5px; }
.vs-a code { color: var(--fg); }
.vs .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cmds { display: flex; flex-direction: column; }
.cmds .link { align-self: flex-start; margin-top: auto; padding-top: var(--s-5); }
.cmdlist { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--s-5); margin: var(--s-2) 0 0; font-size: 14px; }
.cmdlist dt code { font-size: 12.5px; white-space: nowrap; }
.cmdlist dd { margin: 0; color: var(--muted); }

@media (max-width: 760px) {
  .vs::before { display: none; }
  .vs { gap: var(--s-3); }
  .vs-top { display: none; }
  .vs-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .vs-row > span { padding: 0; }
  .vs-k { padding: 0 0 2px !important; }
  .vs-a, .vs-b { padding: var(--s-4) !important; border-radius: 12px; }
  .vs-b { background: var(--surface); }
  .vs-row:not(.vs-top) .vs-a::before, .vs-row:not(.vs-top) .vs-b::before { display: block; width: auto; margin: 0 0 6px; font: 12px/1.4 var(--font-mono); vertical-align: 0; }
  .vs-row:not(.vs-top) .vs-a::before { content: "\2014  " attr(data-who); }
  .vs-row:not(.vs-top) .vs-b::before { content: "\25CF  " attr(data-who); }
  .cmdlist { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cmdlist dd { margin-bottom: var(--s-3); }
}
@media (max-width: 560px) {
  .cterm .globe { width: 11ch; height: 11ch; }
  .cterm .banner { gap: 2ch; padding: 1em 1.5ch; }
  .cterm .bn-info { white-space: pre-wrap; }
}

/* install: OS switch */
.os-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); }
.os-tabs button { border: 0; border-radius: 999px; padding: 7px 14px; background: transparent; color: var(--muted); font: 13px/1 var(--font-mono); cursor: pointer; transition: background .25s, color .25s; }
.os-tabs button[aria-pressed="true"] { background: var(--surface-3); color: var(--fg-strong); }
.os-tabs button:hover { color: var(--fg-strong); }
[data-install] .code pre { white-space: pre-wrap; word-break: break-all; }
[data-install] [hidden] { display: none !important; }