/* app.css — the base components, every rule against tokens.css and nothing
   else. Hierarchy is a hairline and one surface-lift, never a shadow: the
   THEME family's `no-box-shadow-depth` check reads this file too (the one
   allowed form is `0 0 0 Npx`, a ring, not depth).
   Later tasks append their own sections here (the rail, the canvas, the
   faces); this is the vocabulary they all draw from. */

html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--sans); letter-spacing: -.01em; }
.app { display: grid; grid-template-columns: 56px minmax(0, 1fr); height: 100%; }
.main { min-width: 0; overflow: auto; display: flex; flex-direction: column; }
.view { flex: 1 1 auto; min-height: 0; padding: 24px 32px 48px; }
.view[hidden] { display: none; }
/* editorial split — port of the ancestor dashboard's static/sb-arcado.css:186-208:
   display face for heads, sans to read, mono machine voice */
h1 { font: 500 36px/1.0 var(--display); letter-spacing: -.03em; margin: 0 0 6px; }
h2 { font: 500 16px/1.25 var(--display); letter-spacing: -.02em; margin: 0 0 8px; }
.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.eyebrow { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.mono { font-family: var(--mono); font-size: 12px; }
.hair { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card); padding: 24px; }
.panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 24px; }
.btn { font: 500 13px/1 var(--sans); padding: 9px 14px; border-radius: var(--r-btn); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); cursor: pointer; }
.btn:hover { border-color: var(--text-3); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-quiet { background: none; border-color: transparent; color: var(--text-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.chip { display: inline-block; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border-radius: var(--r-btn); border: 1px solid var(--border-2); color: var(--text-3); vertical-align: middle; margin-left: 6px; }
.chip-live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.chip-staged { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* KPI: zero is quiet — port of the ancestor dashboard's static/sb-arcado.css:305 */
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi b { font: 500 44px/1 var(--display); letter-spacing: -.04em; color: var(--text); }
.kpi.k-zero b { color: var(--text-3); }
.kpi.k-alert b { color: var(--alert); }
.lane { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .when { font: 400 11px/1 var(--mono); color: var(--text-3); flex: none; }
.dot { width: 8px; height: 8px; border-radius: 99px; flex: none; background: var(--text-3); }
.dot.ok { background: var(--ok); } .dot.alert { background: var(--alert); } .dot.accent { background: var(--accent); }
.err { color: var(--alert); font-family: var(--mono); font-size: 12px; }
.empty { color: var(--text-3); font-size: 12.5px; font-style: italic; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
input, textarea, select { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-btn); padding: 8px 10px; }
input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* toast — the actionable variant is the undo (ancestor static/sb.js:18-28).
   z-index above the flyout (.peek, 40): a refusal must never surface under
   the thing he was hovering, and a fixed element with no z-index sits at
   the bottom of the stacking order however late it was painted. */
.toast { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; background: var(--surface-3); border: 1px solid var(--border-2); color: var(--text); font-size: 13px; padding: 10px 14px; border-radius: var(--r-card); transition: opacity .15s, transform .15s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.actionable { border-color: var(--accent); cursor: pointer; }
.toast.actionable::after { content: " — click to undo"; color: var(--accent); }

/* (the first console's PEEK RAIL and CANVAS HOME blocks lived here; v2 has a top bar and a Today face) */

/* ===========================================================================
   THE BOOK — Clients and Calendar, the two sides of one feature: a lane row
   on Clients and a session chip on the Calendar are the same person, so they
   are the same colour.

   The PROGRAM PALETTE is the only colour idea in here that is not the
   console's one accent, and it is deliberately not ink: seven mid-tone hues
   (tokens.css) that appear as a swatch, a left hairline and a wash, never as
   text, so nothing here has to hold 4.5:1. `hashProgram(name)` picks one and
   drops it into an inline `--p-color`; every rule below reads only
   `--p-color`, so swapping the seven in tokens.css recolours both faces at
   once. Ported from the ancestor dashboard's `static/sb-arcado.css:966-1005`
   (the palette comment, the swatch, the `color-mix` chip wash and the
   `has-p` cell tint), with its filter-chip bar left behind: this console
   groups by program, it does not filter by one.

   Depth is a hairline and one surface, as everywhere else in this file —
   there is no shadow here and the THEME family fails the build if one
   appears. */

/* ---- Clients ---- */
.cl-queue { margin-bottom: 24px; padding: 16px 20px; }
.cl-queue .eyebrow { display: block; margin-bottom: 8px; }
.lane-col { background: var(--surface-1); border: 1px solid var(--border); border-left: 3px solid var(--p-color, var(--border-2)); border-radius: var(--r-card); padding: 14px 16px 8px; }
.lane-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.lane-head h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-sw { width: 9px; height: 9px; flex: none; border-radius: 3px; background: var(--p-color, var(--text-3)); }
/* a row is a door: the whole line is the button, and it reads as a row */
.client-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 6px; background: none; border: 0; border-radius: var(--r-btn); font: 400 13px/1.5 var(--sans); color: var(--text-2); cursor: pointer; }
.client-row:hover { background: var(--accent-wash); color: var(--text); }
.client-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-row .when { flex: none; font: 400 10.5px/1.7 var(--mono); color: var(--text-3); }
/* the four answers: one block per question, the question in the machine
   voice above what it answers */
.four { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.four > section { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 18px; }
.four-k { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.four-v { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.four-v .row { font-size: 13px; color: var(--text-2); }
.four > section .btn { margin-top: 12px; }

/* ---- Calendar ---- */
.cal-tools { display: flex; align-items: center; gap: 8px; }
.cal-nav, .cal-mode { display: inline-flex; gap: 4px; }
.cal-add { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cal-quick { flex: 1 1 auto; min-width: 0; max-width: 520px; font-family: var(--mono); font-size: 12.5px; }
.cal-hint { font-size: 11.5px; color: var(--text-3); }
/* the week: seven columns, and below the rail's break a single scrollable
   strip rather than seven columns nobody can read */
/* the grid the week strip or the month map sits in: min-width 0 so a wide
   week never sets the face's width from inside a flex column */
.cal-grid { min-width: 0; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-day { display: flex; flex-direction: column; gap: 6px; min-width: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card); padding: 10px; }
.cal-day.is-today { border-color: var(--accent); }
.cal-day-h { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; }
.cal-day .empty { font-size: 11.5px; }
/* one session. The left hairline and the wash are the program's colour; the
   text stays the palette's ink, so the seven hues never have to be legible. */
.cal-ev { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border-radius: var(--r-btn); border-left: 3px solid var(--p-color, var(--border-2)); background: color-mix(in srgb, var(--p-color, transparent) 18%, transparent); font-size: 12.5px; color: var(--text); }
.cal-ev .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev .k { font: 400 10px/1.6 var(--mono); color: var(--text-3); }
.cal-ev.completed { opacity: .72; }
/* CONTRACT spells it no_show, and the stored value IS the class */
.cal-ev.no_show .t { text-decoration: line-through; }
.cal-ev.no_show { opacity: .72; }
.cal-close { display: flex; gap: 4px; width: 100%; }
.cal-x { font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: var(--r-btn); border: 1px solid var(--border-2); background: none; color: var(--text-3); cursor: pointer; }
.cal-x:hover { border-color: var(--accent); color: var(--accent); }
/* the month map: 42 cells from the Monday on or before the 1st. `.cal-month`
   is the block the two grids sit in: a column that stops its cells being
   the thing that decides the face's width. */
.cal-month { display: flex; flex-direction: column; min-width: 0; }
.cal-dows { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.cal-mo-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-cell { display: flex; flex-direction: column; gap: 4px; min-height: 92px; min-width: 0; padding: 6px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-btn); }
.cal-cell.is-today { border-color: var(--accent); }
.cal-cell.is-out { background: none; color: var(--text-3); }
.cal-num { align-self: flex-start; font: 400 11.5px/1 var(--mono); padding: 2px 4px; background: none; border: 0; border-radius: var(--r-btn); color: var(--text-2); cursor: pointer; }
.cal-num:hover { color: var(--accent); }
.cal-cell.is-out .cal-num { color: var(--text-3); }
.cal-chips { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-cell .cal-ev { padding: 2px 6px; font-size: 11px; }
.cal-more { font: 400 10.5px/1.4 var(--mono); text-align: left; background: none; border: 0; padding: 0 4px; color: var(--text-3); cursor: pointer; }
.cal-more:hover { color: var(--accent); }
@media (max-width: 980px) {
  .cal-week { grid-template-columns: 1fr; }
  .cal-cell { min-height: 68px; }
}

/* ===========================================================================
   THE TWO VERBS — Messages (whose turn it is) and AI Workday (what he answers
   this morning). One idea runs through both: the console never looks like it
   sent anything. A bubble says who wrote it, a card says what Approve would
   file, and the strip that appears when a card moved under him is drawn in
   the accent, not in the alert red — it is the console refusing to do
   something other than what the card said, which is not a failure.

   Depth is a hairline and one surface, as everywhere else in this file; there
   is no shadow here and the THEME family fails the build if one appears. */

/* ---- Messages ---- */
/* which way the ball is pointing: his court is the accent, theirs is an
   empty ring — the same "zero is quiet" rule the KPIs follow */
.ball { width: 9px; height: 9px; flex: none; border-radius: 99px; background: var(--accent); }
.ball.them { background: none; border: 1px solid var(--border-2); }
.lead-row { flex-wrap: wrap; }
.lead-row .lead-l { flex: 1 0 100%; min-width: 0; padding-left: 18px; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the conversation: the app on the left, his own words on the right, and the
   assistant's between the two in a hairline of its own so a scripted line is
   never mistaken for something he wrote */
.thread { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.bubble { max-width: 78%; padding: 10px 12px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface-1); }
.bubble p { margin: 4px 0 0; overflow-wrap: anywhere; }
.bubble .b-who { color: var(--text-3); }
.bubble.in { align-self: flex-start; }
.bubble.out { align-self: flex-end; background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.bubble.assistant { align-self: flex-end; border-style: dashed; }
.compose { display: flex; flex-direction: column; gap: 8px; max-width: 760px; margin-top: 20px; }
.compose-box { width: 100%; resize: vertical; }
.compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---- AI Workday ---- */
.stale { margin-bottom: 20px; padding: 14px 18px; border: 1px solid var(--accent); border-radius: var(--r-card); background: var(--accent-wash); }
.stale[hidden] { display: none; }
.stale p { margin: 6px 0 0; }
.stale .wd-said { color: var(--text-2); font-size: 12.5px; }
.pile { margin-bottom: 24px; }
.pile-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.pile-head h2 { flex: 1; min-width: 0; margin: 0; }
.wd-card { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 720px; margin-bottom: 12px; padding: 16px 18px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card); }
.wd-head { display: flex; align-items: baseline; gap: 10px; }
.wd-head .grow { flex: 1; min-width: 0; font-family: var(--display); font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-quote { margin: 0; padding-left: 10px; border-left: 2px solid var(--border-2); color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.wd-quote .mono { color: var(--text-3); margin-right: 6px; }
.wd-picks { display: flex; align-items: center; gap: 6px; }
/* the three wordings: picking one swaps the box, and the box is what "Send
   my words" files — Approve always files the draft the signature signed */
.variant { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--r-btn); border: 1px solid var(--border-2); background: none; color: var(--text-3); cursor: pointer; }
.variant:hover { color: var(--text); }
.variant.on { border-color: var(--accent); color: var(--accent); }
.wd-box { width: 100%; resize: vertical; font-size: 13px; }
.wd-line { margin: 0; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.wd-promise { margin: 2px 0 0; color: var(--text-2); overflow-wrap: anywhere; }
.wd-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wd-note { margin: 0; font-size: 11.5px; color: var(--text-3); }
.wd-decided { padding: 16px 20px; }
.wd-decided .eyebrow { display: block; margin-bottom: 8px; }
@media (max-width: 980px) { .bubble { max-width: 100%; } }

/* ===========================================================================
   SOCIAL STUDIO + SITE — the two faces whose whole job is not overclaiming.
   The studio draws a week of planned content and a checklist for the posting
   Tyler does BY HAND; the site panel draws six tiles that would rather print
   nothing than print a number nobody sent.

   Status is the one place a second colour appears, and it is still the one
   hue: a card's left hairline runs from granite (an idea) through an accent
   wash (a draft) to the accent itself (approved) and finally to the metric
   green (posted) — the only state that means "this really happened". Nothing
   here is a shadow; depth is a hairline and one surface, as everywhere else
   in this file. */

/* ---- the content week ---- */
.soc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.soc-day { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card); }
.soc-day-h { display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 0 0 2px; background: none; border: 0; text-align: left; font: 500 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); cursor: pointer; }
.soc-day-h:hover { color: var(--accent); }
.soc-day-h .when { flex: none; font: 400 10.5px/1.4 var(--mono); color: var(--text-3); }
.soc-day .empty { font-size: 11.5px; }
/* the card, and the hairline that says where it stands */
.soc-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--text-3); border-radius: var(--r-btn); }
.soc-card-h { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.soc-card-h .grow { flex: 1; min-width: 0; font-family: var(--display); font-size: 13px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.soc-card-h .when { flex: none; font: 400 10px/1.4 var(--mono); color: var(--text-3); }
.soc-body { margin: 0; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.soc-status-idea { border-left-color: var(--text-3); }
.soc-status-draft { border-left-color: var(--accent-dim); background: var(--accent-wash); }
.soc-status-approved { border-left-color: var(--accent); }
.soc-status-posted { border-left-color: var(--ok); }
.soc-status-other { border-left-color: var(--alert); }
/* the ladder: one step at a time, and a step this console does not make is
   drawn as the word alone rather than as a button that would be refused */
.soc-ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.soc-step { font: 500 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: var(--r-btn); border: 1px solid var(--border-2); background: none; color: var(--text-2); cursor: pointer; }
.soc-step:hover { border-color: var(--accent); color: var(--accent); }
.soc-step.on { border-color: var(--accent); color: var(--accent); cursor: default; }
.soc-step.off { border-color: transparent; color: var(--text-3); opacity: .55; cursor: default; }
.soc-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.soc-acts .btn { font-size: 12px; padding: 6px 10px; }
.soc-acts .cal-hint { flex: 1 1 220px; min-width: 0; }

/* ---- the post day: the four things he does by hand ---- */
.soc-day-packet, .soc-drafts { margin-top: 28px; }
.soc-packet .soc-card, .soc-drafts .soc-edit { max-width: 720px; padding: 14px 16px; }
.soc-packet .soc-card-h .grow { font-size: 15px; }
.soc-list { margin: 2px 0 0; padding-left: 2px; list-style: none; }
.soc-list li { padding: 3px 0; font-size: 13px; color: var(--text-2); }
.soc-list label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.soc-list input { accent-color: var(--accent); }
.soc-post { border-left-color: var(--accent); }

/* ---- the words still being written ---- */
.soc-edit { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card); }
.soc-lab { display: flex; flex-direction: column; gap: 4px; }
.soc-t, .soc-b { width: 100%; }
.soc-b { resize: vertical; font-size: 13px; }

/* ---- the site panel: six tiles that print nothing they were not told ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card); }
.tile.off { background: none; }
.tile-k { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.tile-v { font: 500 20px/1.2 var(--display); letter-spacing: -.02em; color: var(--text); overflow-wrap: anywhere; }
/* "not connected yet" and "the source did not send this" are sentences, not
   readings: they take the quiet voice so a real value never has to compete
   with one for attention */
.tile.off .tile-v, .tile-v.none { font: 400 13px/1.4 var(--sans); letter-spacing: 0; color: var(--text-3); }
.tile-why { margin: 0; font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }
.tile-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; color: var(--text-3); }
.site-req { max-width: 720px; margin-top: 28px; }
.site-box { width: 100%; resize: vertical; }

/* ===========================================================================
   RESEARCH + ASSISTANT — the two faces with the least to say, and the two
   that must say the little they have exactly.

   Research draws two folders out loud: the counts, the upkeep line that
   keeps "never ran" apart from "ran, nothing to report", one brief per
   note (five keys, printed under their own names, because those names are
   the grammar he types at the top of the next one) and the form that files
   the same five things as a packet. The Assistant draws a persona it did
   not write, a rack only Tyler's click moves, and a cost line that would
   rather be a sentence than a fabricated figure.

   The quiet voice is doing real work in both: "not said" and "cost not
   available" are SENTENCES, not readings, and they take the muted ink so a
   real value never has to compete with one. Depth is a hairline and one
   surface, as everywhere else in this file; there is no shadow here. */

/* ---- Research: the folders ---- */
.rs-top { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 20px 40px; }
.rs-note { flex: 1 1 320px; max-width: 560px; margin: 0; font-size: 12.5px; color: var(--text-3); }
.rs-upkeep { margin-top: 20px; }
/* the upkeep line: a dot that only lights for a run this console can date */
.upkeep { display: flex; align-items: center; gap: 10px; max-width: 720px; padding: 10px 14px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-btn); font-size: 13px; color: var(--text-2); }
.upkeep .when { margin-left: auto; flex: none; font: 400 11px/1 var(--mono); color: var(--text-3); }
.rs-lane, .rs-new { max-width: 720px; margin-top: 28px; }
/* one note, and the five keys under it */
.brief { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; padding: 14px 16px; background: var(--surface-1); border: 1px solid var(--border); border-left: 3px solid var(--accent-dim); border-radius: var(--r-card); }
.brief-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.brief-h .grow { flex: 1; min-width: 0; font: 500 14px/1.3 var(--display); color: var(--text); overflow-wrap: anywhere; }
.brief-h .when { flex: none; font: 400 10.5px/1.4 var(--mono); color: var(--text-3); }
.brief-kv { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; }
.brief-k { flex: none; width: 128px; font: 500 10.5px/1.6 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.brief-v { flex: 1; min-width: 0; color: var(--text-2); overflow-wrap: anywhere; }
/* a key nobody wrote is a sentence about the note, not a value from it */
.brief-v.none { color: var(--text-3); font-style: italic; }
.rs-lab { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.rs-f { width: 100%; }

/* ---- the Assistant: a persona, a rack and a ledger ---- */
.as-sec { max-width: 780px; }
.as-sec + .as-sec { margin-top: 28px; }
.as-card { display: flex; flex-direction: column; gap: 10px; }
.as-head { margin: 0; font: 500 20px/1.2 var(--display); letter-spacing: -.02em; color: var(--text); }
.as-why { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
/* the persona file's own bytes: wrapped, scrollable, never re-typeset */
.persona { max-height: 320px; overflow: auto; margin: 0; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-btn); font: 400 12.5px/1.6 var(--mono); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.skill-rack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.skill-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card); }
.skill-col > .eyebrow { padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.skill { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--text-3); border-radius: var(--r-btn); }
/* where a skill stands, in the one hue: waiting on him, equipped, put away */
.s-proposed { border-left-color: var(--accent); }
.s-active { border-left-color: var(--ok); }
.s-retired { border-left-color: var(--border-2); opacity: .7; }
.skill-n { font: 500 13px/1.3 var(--display); color: var(--text); overflow-wrap: anywhere; }
.skill-why { margin: 0; font-size: 11.5px; color: var(--text-3); }
.skill .btn { align-self: flex-start; font-size: 12px; padding: 6px 10px; }
.ledger { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 28px; padding: 16px 18px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card); }
.ledger-fig { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ledger-fig b { font: 500 28px/1 var(--display); letter-spacing: -.03em; color: var(--text); }
/* "cost not available" is a sentence, not a reading: the quiet voice */
.ledger-none { font-size: 13px; color: var(--text-3); }
.ledger-why { flex: 1 1 100%; margin: 0; font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }

@media (max-width: 980px) {
  .skill-rack { grid-template-columns: 1fr; }
  .soc-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* mobile: the rail hides, so the grid collapses to one column */
@media (max-width: 780px) { .app { grid-template-columns: 1fr; } .rail { display: none; } .view { padding: 16px; } }