/* app.css — the brand, in one place.
 *
 * Every colour here comes from the published style guide at
 * aibrainblueprint.com/brand. Before this file there were THREE palettes in
 * the codebase and none of them was the brand; a test now forbids a page from
 * declaring a colour of its own.
 *
 * Purpose names, never literal ones: --gold rather than --c9a84c, so a value
 * can move without renaming anything that uses it.
 *
 * ONLY THREE VALUES ARE NOT FROM THE GUIDE, each marked NOT-IN-GUIDE below.
 */

/* :root AS WELL AS THE ATTRIBUTE, and this is not belt-and-braces. The
   attribute is set by one inline script. Block that script — JavaScript off, a
   content-security policy, a browser extension — and tokens that live only
   under [data-theme] leave the page with no --bg, no --text and no --border:
   black serif on white, no panels, no gold. Found by loading a page with the
   attribute deleted. Dark is the brand, so dark is what :root carries. */
:root,
[data-theme="dark"] {                 /* "Dark Organic Luxury" — the default */
  --bg: #060F0B;                      /* Forest Dark */
  --surface: #0E1A14;                 /* Forest Mid */
  --surface-2: #172018;               /* Forest Panel */
  --border: #1E2A22;                  /* NOT-IN-GUIDE: forest mid, lifted for hairlines */
  --border-strong: #8F6E28;           /* Gold Muted */
  --text: #EDE8DC;                    /* Cream */
  --text-dim: #C8BFA8;                /* Cream Muted */
  --text-muted: #8E9A8F;              /* NOT-IN-GUIDE: cream muted, dropped for hints */
  --heading: #EDE8DC;                 /* Cream — green headings disappear on forest */
  --gold: #C9A84C;
  --gold-ink: #C9A84C;                /* 8.5:1 on forest; gold reads fine on dark */
  --gold-edge: #8F6E28;               /* Gold Muted */
  --on-gold: #060F0B;
  --teal: #4AADAB;                    /* Teal Light */
  --teal-ink: #4AADAB;
  --warn: #D4705A;                    /* NOT-IN-GUIDE: the guide's #C85A40 is 4.62:1
                                         on forest but only 3.97:1 on a raised panel,
                                         which is where warnings actually sit. Light
                                         needed terracotta DARKER, dark needs it
                                         LIGHTER — the same colour cannot do both. */
  --focus: #C9A84C;
  --el-water: #3A8C8A;
  --el-air: #C8BFA8;
  --el-earth: #6E9A5A;
  --el-fire: #C85A40;
  --ok-ink: #7B9E7C;                  /* readable 'done' on forest, 8.0:1 */

  /* THE TRANSLUCENT LAYER. Forty rgba() literals were hiding in the pages —
     twenty-nine of them the old non-brand gold, and three near-black bars
     that stayed near-black on a bone background. A wash is as much a brand
     decision as an ink, so it is a token too. */
  --gold-glow: rgba(201, 168, 76, .30);   /* focus rings, hover lifts */
  --gold-tint: rgba(201, 168, 76, .10);   /* a faint wash behind a callout */
  --gold-tint-2: rgba(201, 168, 76, .20); /* a lit square on the Map */
  --gold-tint-3: rgba(201, 168, 76, .36); /* the primary square */
  --teal-tint: rgba(74, 173, 171, .12);
  --teal-tint-2: rgba(74, 173, 171, .28);
  --earth-tint: rgba(110, 154, 90, .16);
  --warn-tint: rgba(212, 112, 90, .14);
  --scrim: rgba(0, 0, 0, .72);            /* behind a modal */
  --veil: rgba(6, 15, 11, .94);           /* a fixed bar the page scrolls under */

  /* THE LOBE WASHES — the Brain's four regions, and atmosphere only. Each
     is its element hue carried most of the way to the page, mixed until it
     measured under 1.6:1 against the background rather than chosen by eye.
     They are OPAQUE on purpose: a translucent wash over a translucent panel
     is a contrast figure nobody can compute. Named for the element KEYS the
     code uses, because brain-render writes var(--wash-${element}). */
  --wash-relational: #163531;           /* 1.47:1 on the page, text 10.8:1 */
  --wash-perspective: #31362E;          /* 1.57:1, text 10.1:1 */
  --wash-structural: #253923;           /* 1.56:1, text 10.2:1 */
  --wash-generative: #40261B;           /* 1.40:1, text 11.4:1 */
}

[data-theme="light"] {                /* "Sunlit Intelligence" — for workshops */
  --bg: #FDFBF7;                      /* warm bone */
  --surface: #FFFFFF;
  --surface-2: #F2EFE9;               /* Warm Mist */
  --border: #E4DFD3;                  /* NOT-IN-GUIDE: mist, darkened for hairlines */
  --border-strong: #8F6E28;
  --text: #1A2421;                    /* Forest ink */
  --text-dim: #5B665F;                /* NOT-IN-GUIDE: forest ink lifted, 7.0:1 */
  --text-muted: #616D65;              /* NOT-IN-GUIDE: 4.71:1 on the mist panel. Two
                                         earlier values failed, each caught by the test */
  --heading: #2E5945;                 /* Sunlit forest green */
  --gold: #C9A84C;                    /* FILLS ONLY. 2.21:1 as text — unreadable */
  --gold-ink: #6E5220;                /* Gold Dark from the guide. Gold Muted was
                                         4.59:1 on bone but only 4.13:1 on the mist
                                         panel, where links in .note actually sit. */
  --gold-edge: #8F6E28;
  --on-gold: #1A2421;
  --teal: #3A8C8A;
  --teal-ink: #276E6C;                /* NOT-IN-GUIDE: Teal dark darkened; #2B7A78
                                         was 4.40:1 on the mist panel */
  --warn: #B04A32;                    /* APPROVED 2026-10-10; #C85A40 is 4.07:1 */
  --focus: #8F6E28;
  --el-water: #3A8C8A;
  --el-air: #C8BFA8;
  --el-earth: #6E9A5A;
  --el-fire: #C85A40;
  --ok-ink: #3F6B46;                  /* readable 'done' on bone, 6.4:1 */

  /* The same washes, re-mixed for a light page: a tint has to be stronger to
     register on bone, and the fixed bars go pale rather than near-black. */
  --gold-glow: rgba(143, 110, 40, .28);
  --gold-tint: rgba(201, 168, 76, .16);
  --gold-tint-2: rgba(201, 168, 76, .28);
  --gold-tint-3: rgba(201, 168, 76, .48);
  --teal-tint: rgba(58, 140, 138, .10);
  --teal-tint-2: rgba(58, 140, 138, .26);
  --earth-tint: rgba(110, 154, 90, .18);
  --warn-tint: rgba(176, 74, 50, .12);
  --scrim: rgba(26, 36, 33, .55);
  --veil: rgba(253, 251, 247, .94);
  --wash-relational: #C3DAD6;           /* 1.42:1 on bone, text 10.9:1 */
  --wash-perspective: #EDE9DF;          /* 1.17:1, text 13.1:1 */
  --wash-structural: #D2DEC8;           /* 1.35:1, text 11.4:1 */
  --wash-generative: #EDCBC0;           /* 1.46:1, text 10.6:1 */
}

/* ON A PHOTOGRAPH THE THEME DOES NOT APPLY. The home page's hero and its
   three photo sections sit on dark images in BOTH themes, so their text must
   not follow the light theme's ink: Lauralee, in light mode, found the
   headline in forest green on a jaguar's shadow, the quote and the outline
   button gone, the closing line invisible (2026-10-13). A block on a dark
   image carries `on-photo`, and this scope pins the tokens it reads to the
   dark palette above. The values are the SAME literals as the dark block on
   purpose — test/on-photo.test.js holds them equal, so they cannot drift. */
.on-photo {
  --text: #EDE8DC;
  --text-dim: #C8BFA8;
  --text-muted: #8E9A8F;
  --heading: #EDE8DC;
  --gold: #C9A84C;
  --gold-ink: #C9A84C;
  --gold-edge: #8F6E28;
  --on-gold: #060F0B;
  --border: #1E2A22;
  --border-strong: #8F6E28;
  --focus: #C9A84C;
  --gold-glow: rgba(201, 168, 76, .30);
  --gold-tint: rgba(201, 168, 76, .10);
}

/* NO @supports PALETTE HERE, DELIBERATELY. The guide publishes these in oklch
   as well, and an @supports block used to restate eleven of them in the wider
   gamut — which meant every contrast assertion in test/design-system.test.js
   was measuring a palette no current browser ever painted (the rendered gold
   was visibly peachier than the guide's, and --focus was not restated at all,
   so the focus ring and the button beside it were two different golds). The
   hex values ARE the published guide. A test now forbids the block. */

/* No explicit choice: follow the machine, but default to dark, which is the
   brand. The attribute is set by theme.js before paint; this is the fallback
   for the one case where that script never runs. */
:root { color-scheme: dark; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', Cormorant, Georgia, serif;
  font-weight: 400;
  line-height: 1.15;
  color: var(--heading);
}
code, pre { font-family: 'Fira Code', ui-monospace, SFMono-Regular, monospace; }
a { color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The theme control. Small, quiet, and in the header on every signed-in page. */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 5px;
  width: 32px;
  height: 32px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--border-strong); color: var(--text); }

/* Printing is always light. A dark page costs a cartridge and arrives
   unreadable, and nobody chooses a theme in order to print it. */
@media print {
  :root, [data-theme="dark"], [data-theme="light"] {
    --bg: #FDFBF7; --surface: #FFFFFF; --surface-2: #F2EFE9;
    --border: #E4DFD3; --border-strong: #8F6E28;
    --text: #1A2421; --text-dim: #5B665F; --text-muted: #616D65;
    --heading: #2E5945; --gold: #C9A84C; --gold-ink: #6E5220;
    --gold-edge: #8F6E28; --on-gold: #1A2421;
    --teal: #3A8C8A; --teal-ink: #276E6C; --warn: #B04A32; --focus: #8F6E28;
    --el-water: #3A8C8A; --el-air: #C8BFA8; --el-earth: #6E9A5A; --el-fire: #C85A40;
    --ok-ink: #3F6B46;
    --gold-glow: rgba(143, 110, 40, .28);
    --gold-tint: rgba(201, 168, 76, .16);
    --gold-tint-2: rgba(201, 168, 76, .28);
    --gold-tint-3: rgba(201, 168, 76, .48);
    --teal-tint: rgba(58, 140, 138, .10);
    --teal-tint-2: rgba(58, 140, 138, .26);
    --earth-tint: rgba(110, 154, 90, .18);
    --warn-tint: rgba(176, 74, 50, .12);
    --scrim: rgba(26, 36, 33, .55);
    --veil: rgba(253, 251, 247, .94);   /* a dark bar on paper is a black band */
    --wash-relational: #C3DAD6; --wash-perspective: #EDE9DF;
    --wash-structural: #D2DEC8; --wash-generative: #EDCBC0;
  }
  .theme-toggle { display: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   COMPONENTS
   Folded in from auth.css and legal.css, which are now deleted. Every literal
   colour became a token, and three off-brand choices were corrected on the
   way: the body font was Plus Jakarta Sans (the guide says Inter), the
   primary button was green #1D9E75 (the guide reserves gold for action), and
   the auth pages carried their own near-black that was not Forest Dark.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── auth pages: login, register, forgot, reset, signed-in ── */
.auth-page { min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; }
.auth-logo { font-family: 'Cormorant Garamond', Cormorant, Georgia, serif; font-size: 20px;
  font-weight: 300; color: var(--gold-ink); letter-spacing: .06em; margin-bottom: 40px; text-align: center; }
.auth-logo span { font-style: italic; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: 40px 44px; width: 100%; max-width: 440px; }
@media (max-width: 480px) { .auth-card { padding: 28px 24px; } }
.auth-title { font-family: 'Cormorant Garamond', Cormorant, Georgia, serif; font-size: 30px;
  font-weight: 300; line-height: 1.2; margin-bottom: 6px; color: var(--heading); }
.auth-sub { font-size: 13px; color: var(--text-dim); margin-bottom: 32px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px; }
.field input { width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 3px; padding: 12px 14px; font-family: inherit; font-size: 14px;
  color: var(--text); outline: none; transition: border-color .15s; }
.field input:focus { border-color: var(--border-strong); }
.field input::placeholder { color: var(--text-muted); }

/* Gold, because the guide reserves gold for action. On gold, text is
   --on-gold: forest ink on light, forest dark on dark. Both clear AA. */
.btn-primary { width: 100%; background: var(--gold); color: var(--on-gold); border: none;
  border-radius: 3px; padding: 13px; font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: opacity .2s; margin-top: 8px; }
.btn-primary:hover:not(:disabled) { opacity: .88; }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-ghost { width: 100%; background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 3px; padding: 12px; font-family: inherit;
  font-size: 13px; font-weight: 500; cursor: pointer; transition:color .2s,background-color .2s,border-color .2s,box-shadow .2s,transform .2s,opacity .2s; margin-top: 8px; }
.btn-ghost:hover { border-color: var(--border-strong); color: var(--text); }

.auth-link { display: block; text-align: center; font-size: 13px; color: var(--text-dim); margin-top: 20px; }
.auth-link a { color: var(--gold-ink); text-decoration: none; }
.auth-link a:hover { text-decoration: underline; }

.alert { border-radius: 3px; padding: 12px 16px; font-size: 13px; line-height: 1.6;
  margin-bottom: 20px; display: none; }
.alert.show { display: block; }
.alert-error { background: var(--surface-2); border: 1px solid var(--warn); color: var(--warn); }
.alert-success { background: var(--surface-2); border: 1px solid var(--ok-ink); color: var(--ok-ink); }
.alert-info { background: var(--surface-2); border: 1px solid var(--teal-ink); color: var(--teal-ink); }

.divider { height: 1px; background: var(--border); margin: 24px 0; position: relative; }
.divider span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surface); padding: 0 12px; font-size: 11px; color: var(--text-muted); letter-spacing: .08em; }

.back-link { font-size: 12px; color: var(--text-muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 24px; }
.back-link:hover { color: var(--text-dim); }

.password-wrap { position: relative; }
.password-wrap input { padding-right: 44px; }
.toggle-pw { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 13px; padding: 4px; }
.toggle-pw:hover { color: var(--text-dim); }

.strength-bar { height: 2px; border-radius: 2px; background: var(--border); margin-top: 6px; overflow: hidden; }
.strength-fill { height: 100%; border-radius: 2px; transition: width .3s, background .3s; }

/* Consent: separate from the account, never pre-ticked. */
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 4px;
  font-size: 13px; line-height: 1.55; color: var(--text-dim); cursor: pointer; text-align: left; }
.consent input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px;
  accent-color: var(--gold); cursor: pointer; }
.consent span { flex: 1; }
/* Links inside a consent sentence. Without this they fall back to the
   browser's default blue, which looked broken against the brand the first
   time the terms box shipped. Underlined on purpose — unlike the standalone
   links elsewhere, these sit mid-sentence and have to read as links, because
   somebody is agreeing to what is behind them. */
.consent a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--gold-edge); }
.consent a:hover { text-decoration-color: var(--gold-ink); }

/* ── legal pages: privacy, terms ── */
.wrap { max-width: 46rem; margin: 0 auto; padding: 48px 20px 96px; }
.wrap h1 { font-size: clamp(34px, 6vw, 46px); line-height: 1.08; margin-bottom: 10px; }
.wrap h1 em { color: var(--gold-ink); font-style: italic; }
.wrap h2 { font-size: clamp(24px, 4vw, 30px); margin: 44px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--border); }
.wrap h3 { font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 16px; margin: 26px 0 6px; }
.wrap p { margin-bottom: 16px; }
.wrap ul, .wrap ol { margin: 0 0 18px 22px; }
.wrap li { margin-bottom: 9px; }
.wrap strong { color: var(--text); font-weight: 600; }
.updated { color: var(--text-dim); font-size: 14px; margin-bottom: 8px; }
.lede { color: var(--text-dim); font-size: 18px; line-height: 1.7; margin-bottom: 8px; }
.home { display: inline-block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none; margin-bottom: 40px; }
.home:hover { color: var(--gold-ink); }
.summary { background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--gold); border-radius: 6px; padding: 22px 24px; margin: 28px 0 8px; }
.summary h3 { margin-top: 0; color: var(--gold-ink); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.summary ul { margin-bottom: 0; }
.note { background: var(--surface-2); border: 1px solid var(--teal-ink);
  border-radius: 6px; padding: 16px 20px; margin: 18px 0; }
.note p:last-child { margin-bottom: 0; }
.wrap table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.wrap th, .wrap td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.wrap th { color: var(--text-dim); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.wrap footer { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: 14px; }
.wrap footer a { margin-right: 18px; }
@media (max-width: 600px) {
  .wrap { padding: 32px 16px 72px; }
  .wrap table, .wrap thead, .wrap tbody, .wrap th, .wrap td, .wrap tr { display: block; }
  .wrap thead { display: none; }
  .wrap td { border: none; padding: 3px 0; }
  .wrap tr { border-bottom: 1px solid var(--border); padding: 12px 0; }
  .wrap td:first-child { color: var(--gold-ink); font-size: 14px; }
}

/* The toggle sits out of the way on pages with no header of their own. */
.theme-toggle.floating { position: fixed; top: 16px; right: 16px; z-index: 20; }

/* ───────────────────────────────────────────────────────────────────────────
   THE BRAIN
   A picture of what has been BUILT — never the navigation, and never a
   score. The list beside it is how anybody actually gets anywhere.

   THE COLOUR RULE, three levels (Lauralee 2026-10-10, refined by measuring):
     gold as a FILL      act here, or done. The only thing that means "do"
     element as a RING   which part of you this is, at full strength
     element as a WASH   the lobe's body. Atmosphere only, never identity
   ─────────────────────────────────────────────────────────────────────────── */

.brain { width: 100%; max-width: 1000px; height: auto; margin: 0 auto; display: block; }
.brain-summary { text-align: center; font-size: 12.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-dim); margin: 0 0 4px; }

.lobe-body { transition: stroke-opacity .3s; }
/* ONLY --text MAY SIT ON A WASH. Measured across every ink in the system:
   --text clears 10:1 on all four washes in both themes and --text-dim
   drops to 3.96 in light. So the second line is made secondary by SIZE and
   letter-spacing rather than by going quieter — a wash is a quiet
   background, which is exactly why a quiet ink cannot go on one. */
.lobe-label { fill: var(--text); font-size: 14.5px; }
.lobe-sub { fill: var(--text); font-size: 11px; letter-spacing: .12em; }
.lobe-seat.is-on { filter: none; }
.brain-lobe.is-clickable { cursor: pointer; }
.brain-lobe.is-clickable:hover .lobe-body { stroke-opacity: 1; }
.core-label { fill: var(--text); font-size: 16px; letter-spacing: .2em; }
.core-sub { fill: var(--text); font-size: 10.5px; letter-spacing: .14em; }

/* PICK UP HERE. One thing, and it is a real button. */
.brain-next { margin: 18px auto 0; max-width: 760px; }
.next-cta { display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--gold-tint); border: 1px solid var(--gold-edge); border-radius: 6px;
  padding: 16px 20px; font-family: inherit; color: var(--text); }
.next-cta:hover { background: var(--gold-tint-2); }
.next-cta .eyebrow { display: block; font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold-ink); }
.next-cta .title { display: block; font-size: 17px; margin-top: 6px; }
.next-cta .why { display: block; font-size: 13.5px; color: var(--text-dim); margin-top: 4px; }
body.first-run .brain-next { text-align: center; font-size: 16px; color: var(--text); }

/* THE LIST IS THE REAL ONE. It carries the links, the keyboard order and
   the screen-reader text; the drawing is a second rendering of the same
   thing. Hidden here means visually hidden, never display:none. */
.brain-list { margin: 22px 0 0; padding: 0; list-style: none; }
.brain-list.is-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Visually hidden is not hidden from the KEYBOARD, and that is the point.
   But tabbing into invisible links tells a sighted keyboard user nothing,
   so focus inside brings the whole list back. */
.brain-list.is-hidden:focus-within { position: static; width: auto; height: auto;
  overflow: visible; clip-path: none; white-space: normal; }
.brain-group { display: flex; align-items: center; gap: 10px; margin: 20px 0 2px; }
.brain-group .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.brain-group .name { font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-dim); }
.brain-group .pct { font-size: 12px; color: var(--text-muted); }
.brain-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 2px 12px 19px; border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text); font-size: 14.5px; }
.brain-row:hover { color: var(--gold-ink); }
.brain-row .right { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.brain-row .state { font-size: 12.5px; color: var(--text-muted); }
.brain-row .state.is-confirmed { color: var(--ok-ink); }
.brain-row .state.is-written, .brain-row .state.is-seed, .brain-row .state.is-partial { color: var(--gold-ink); }
.brain-row .go { font-size: 12.5px; color: var(--text-muted); }

.brain-crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

/* WHERE IT IS THIN. A critique of the artifact, never of the person. */
.brain-thin { border-top: 1px solid var(--border); margin-top: 26px; padding-top: 18px; }
.brain-thin h3 { font-size: 19px; margin-bottom: 4px; }
.brain-thin ul { list-style: none; margin: 0; padding: 0; }
/* The row owns its own layout. The rule that used to live here was
   `.brain-thin button`, which is more specific than `.thin-row` and so
   quietly forced display:block over the grid — the bar stretched the full
   width instead of sitting beside the sentence. */

/* Below this the drawing is cramped rather than useful, so the list takes
   over. Confirmed acceptable: the workshop is laptops. */
@media (max-width: 767px) {
  .brain, .brain-summary { display: none; }
  .brain-list.is-hidden { position: static; width: auto; height: auto;
    overflow: visible; clip-path: none; white-space: normal; }
}

/* The one animation, and it only ever says a lobe is full. With motion
   reduced the states still differ by density and rim, never by movement. */
@media (prefers-reduced-motion: no-preference) {
  .brain-lobe.is-full .lobe-seat.is-on { animation: brain-breathe 3.4s ease-in-out infinite; }
  @keyframes brain-breathe { 0%, 100% { opacity: 1 } 50% { opacity: .72 } }
}

.clear-start { background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 3px; padding: 4px 10px;
  font-size: 12px; font-family: inherit; cursor: pointer; margin: 0 0 12px 2px; }
.clear-start:hover { border-color: var(--warn); color: var(--warn); }
.clear-msg { color: var(--warn); font-size: 12.5px; }

/* FIRST RUN. One node lit; everything else present but quiet, so the shape
   of what is coming is visible without competing for the click. */
/* EVERY TOOL IS HIDDEN ON THE FIRST RUN, the Connections strip included.
   Measured: with them showing, the one node somebody is meant to look at
   started 676px down a 760px screen — below the fold, under a row of
   controls for work that does not exist yet. The key gets its own moment
   later, once there is a file for an agent to read. */
body.first-run #brand-groups,
body.first-run #profile-section,
body.first-run #usage-strip,
body.first-run #connections,
body.first-run #drive-strip,
body.first-run #co-card,
body.first-run #dl-all { display: none; }
body.first-run .brain-next { font-size: 16px; color: var(--text); max-width: 46em;
  margin-left: auto; margin-right: auto; }

/* The AI key, given its own moment rather than a strip among others. */
.key-moment { border: 1px solid var(--gold-edge); background: var(--gold-tint);
  border-radius: 6px; padding: 24px 26px; margin: 22px 0; }
.key-moment h2 { font-size: 22px; margin-bottom: 8px; }
.key-moment p { color: var(--text-dim); margin-bottom: 12px; }
.key-moment ul { list-style: none; margin: 0 0 16px; padding: 0; }
.key-moment li { color: var(--text-dim); padding: 6px 0 6px 18px; position: relative; line-height: 1.6; }
.key-moment li::before { content: '·'; position: absolute; left: 4px; color: var(--gold-ink); }
.key-moment li b { color: var(--text); font-weight: 600; }
.key-moment-actions { display: flex; gap: 12px; align-items: center; }
.key-moment-actions button { background: var(--gold); color: var(--on-gold); border: none;
  border-radius: 4px; padding: 10px 18px; font-family: inherit; font-size: 14px; cursor: pointer; }
.key-moment-actions button.quiet { background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); }

/* A READ OF YOU. Full width, below the Brain, and visually a different
   kind of thing from it — one is a record of work, the other a mirror. */
.profile-section { border-top: 1px solid var(--border); margin-top: 34px; padding-top: 24px; }
.profile-section > h2 { font-size: 24px; margin-bottom: 4px; }
.profile-section > .sub { color: var(--text-dim); font-size: 14.5px; margin-bottom: 16px;
  max-width: 48em; }
/* Her orientation line, below the picture rather than above it: the Brain
   is the main feature and three lines of prose were pushing it off the
   bottom of a laptop screen. */
.brain-sub { text-align: center; max-width: 60ch; margin: 16px auto 0; color: var(--text-dim); }
.brain-elsewhere { color: var(--text-muted); font-size: 13.5px;
  padding: 11px 2px 11px 19px; border-bottom: 1px solid var(--border); }

/* ───────────────────────────────────────────────────────────────────────────
   THE STACK — Blueprint → CO → Specialist Packs
   A plain tiered column, deliberately NOT a second organic drawing. The
   Brain is the picture on this page; two rival diagrams would be worse
   than one, so this one reads as an org chart and nothing else.
   ─────────────────────────────────────────────────────────────────────────── */
.pack-stack { margin-top: 38px; border-top: 1px solid var(--border); padding-top: 28px; }
.stack-tier { border: 1px solid var(--border); border-radius: 6px; padding: 14px 18px;
  background: var(--surface); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.stack-tier.is-foundation { border-color: var(--gold-edge); background: var(--gold-tint); }
.stack-tier-label { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--text); }
.stack-tier-note { font-size: 13px; color: var(--text-dim); }
/* The arrow is drawn, not typed: a character would be read aloud.
   NAMED `stack-`, because `.tier` already means an agent's brain size
   and reusing it put uppercase letter-spacing on every agent row. */
.stack-arrow { width: 1px; height: 26px; margin: 0 auto; background: var(--gold-edge); position: relative; }
.stack-arrow::after { content: ''; position: absolute; bottom: 0; left: -3px;
  border: 3px solid transparent; border-top-color: var(--gold-edge); }

.packs-head h2 { font-size: 24px; margin-bottom: 4px; }
.packs-head .sub { color: var(--text-dim); font-size: 14px; max-width: 58ch; margin-bottom: 18px; }
.packs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.pack-card { border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.pack-card h3 { font-size: 20px; }
.pack-by { font-size: 12.5px; color: var(--text-dim); }
.pack-desc { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin: 4px 0 2px; }
.pack-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 6px; }
.pack-count { font-size: 12.5px; color: var(--text-muted); }
.pack-price { font-size: 12.5px; color: var(--gold-ink); }
.pack-soon { font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-ink); border: 1px solid var(--gold-edge); border-radius: 3px; padding: 3px 8px; }
.pack-card > button { margin-top: 12px; align-self: flex-start; background: transparent;
  border: 1px solid var(--border); border-radius: 4px; color: var(--text);
  font-family: inherit; font-size: 13.5px; padding: 9px 15px; cursor: pointer; }
.pack-card > button:hover { border-color: var(--gold-edge); color: var(--gold-ink); }
.pack-open { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.pack-open[hidden] { display: none; }
.pack-body { font-size: 13.5px; color: var(--text-dim); line-height: 1.65; }
.pack-roles { list-style: none; margin: 14px 0 0; padding: 0; }
.pack-roles li { border-top: 1px solid var(--border); padding: 11px 0; }
.pack-roles .r-title { font-size: 14.5px; color: var(--text); }
.pack-roles .r-desc { font-size: 13px; color: var(--text-dim); margin-top: 2px; line-height: 1.55; }
.pack-expert { margin-top: 14px; font-size: 13px; color: var(--text-dim); }
.packs-mine { margin-bottom: 22px; }
.packs-mine h3 { font-size: 17px; margin-bottom: 8px; }
.packs-mine ul { list-style: none; margin: 0; padding: 0; }
.packs-mine li { display: flex; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid var(--border); padding: 10px 2px; font-size: 14px; }
body.first-run .pack-stack { display: none; }

/* WHERE IT IS THIN — the gap SHOWN, not only described. The first version
   was a real button that looked exactly like a bullet point, so nobody
   pressed it: a control that does not read as one is worse than a broken
   one, because nobody even tries. */
.brain-thin li { border-bottom: 1px solid var(--border); }
.thin-row { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: center;
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14.5px; color: var(--text); padding: 13px 2px; }
.thin-row:hover { color: var(--gold-ink); }
.thin-row:hover .thin-do { border-color: var(--gold-edge); color: var(--gold-ink); }
/* The bar carries the session's own intelligence colour, so the list and
   the lobes above are visibly one system. */
.thin-bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-2);
  overflow: hidden; }
.thin-bar i { display: block; height: 100%; border-radius: 3px; }
.thin-said { color: var(--text-dim); line-height: 1.5; }
.thin-do { font-size: 12.5px; color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 3px; padding: 5px 11px; white-space: nowrap; }
.stack-tier.is-foundation { justify-content: space-between; }
.stack-tier > div { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
#stack-continue { cursor: pointer; font-family: inherit; }
@media (max-width: 560px) {
  .thin-row { grid-template-columns: 1fr; gap: 8px; }
  .thin-do { justify-self: start; }
}