/* ============================================================================
   YourAI brand.css — THE visual language. Single source of truth.
   Tokens extracted verbatim from yourai_brand_schema.docx + YourAI_Master_Reference.docx
   (§10 Application UI Direction). Plan ref: MVP_BUILD_TEST_PLAN.md §4.
   Ratios: 90% navy + white · 8% gold (accents only) · 2% utility.
   Gold never as a fill or large block. AVOID #2563EB (bright blue is not brand).
   Fonts are SELF-HOSTED (single-egress forbids runtime CDNs).
   ========================================================================== */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/dm-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400 700; /* single optical master; range declaration avoids synthetic bold */
  font-display: swap;
  src: url("fonts/dm-serif-display.woff2") format("woff2");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/dm-serif-display-italic.woff2") format("woff2");
}

:root{
  --navy:#0B1D3A;      /* primary bg/text/buttons/headers (dominant) */
  --navy-mid:#132C54;  /* gradients / secondary navy surfaces, hover depth */
  --navy-light:#1A3A6B;/* navy hover/active; subtle borders (NOT for text on navy: 1.49:1, fails AA) */
  --navy-muted:#8FA3C4;/* secondary text on navy bg — 6.56:1 on --navy, passes WCAG AA */
  --gold:#C9A84C;      /* logo 'AI', premium highlights, CTA hover */
  --gold-soft:#D4B96A; /* body accents, tag labels */
  --ice:#E8EEF4;       /* borders, dividers, outline-button border */
  --border-input:#7C8FA8; /* text/password/textarea border — --ice on white is 1.17:1, fails WCAG 1.4.11 (3:1); this hits 3.31:1 */
  --ice-warm:#F0F4F8;  /* page bg, section alternation (schema also lists #F4F6F9) */
  --slate:#3D5A80;     /* secondary body text */
  --text-light:#597084;/* captions, timestamps, meta — darkened again: 4.71:1 was measured against
    white, but pages render it on --ice-warm (#F0F4F8), which only gave 4.26:1; this hits 4.66:1 there */
  --green:#24845E;     /* success / 'compliant' / approved — darkened from #2A9D6E (3.42:1 on white,
    and white-on-green pill text failed too) to 4.63:1, same hue */
  --red:#C44F4F;       /* error / destructive / reject */
  --amber:#AF6204;     /* warning / pending sign-off — darkened from #D97706 (3.19:1 on white, and
    white-on-amber pill text failed too) to 4.59:1, same hue */
  --white:#FFFFFF;
  --radius-sm:10px; --radius:16px; --radius-lg:24px;
  --shadow-sm:0 1px 3px rgba(11,29,58,.04);
  --shadow-md:0 4px 16px rgba(11,29,58,.06);
  --shadow-lg:0 8px 32px rgba(11,29,58,.08);
  --font-serif:"DM Serif Display", Georgia, serif;
  --font-sans:"DM Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Base ---------------------------------------------------------------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-sans);
  font-size:15px; line-height:1.6;
  color:var(--slate);
  background:var(--ice-warm);
}

/* Type scale (§4.2). Rule: never DM Serif below 20px. */
h1,.h1{ font-family:var(--font-serif); font-weight:700; font-size:36px; line-height:1.1;
  letter-spacing:-0.03em; color:var(--navy); margin:0 0 12px; }
h2,.h2{ font-family:var(--font-serif); font-weight:400; font-size:28px; line-height:1.2;
  letter-spacing:-0.025em; color:var(--navy); margin:0 0 10px; }
h2 em,.h2 em{ font-style:italic; }
h3,.h3{ font-family:var(--font-sans); font-weight:700; font-size:22px;
  letter-spacing:-0.02em; color:var(--navy); margin:0 0 8px; }
.overline{ font-family:var(--font-sans); font-weight:600; font-size:11px;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--text-light); }
.mono{ font-family:var(--font-mono); font-size:13px; }
.muted{ color:var(--text-light); }
a{ color:var(--navy); }

/* ---- Wordmark (§4.3) — never single-color -------------------------------- */
.wordmark{ font-family:var(--font-serif); font-weight:700; font-size:1.5rem;
  letter-spacing:-0.02em; color:var(--navy); text-decoration:none; }
.wordmark .logo-ai{ color:var(--gold); }
.on-dark .wordmark, .sidebar .wordmark{ color:var(--white); }
.on-dark .wordmark .logo-ai, .sidebar .wordmark .logo-ai{ color:var(--gold); }

/* ---- Buttons (§4.4) ------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-family:var(--font-sans); font-size:14px; font-weight:600;
  padding:14px 28px; border-radius:8px; cursor:pointer;
  transition:all .2s ease; text-decoration:none; line-height:1;
  /* Buttons default to a shrinkable flex item inside row layouts (e.g. .inline-form) — under space
     pressure that shrinks the button below its label's width, wrapping "Reset password" to 2 lines
     instead of the row simply allocating more space. Labels must stay one line; shrink elsewhere. */
  white-space:nowrap; flex-shrink:0;
}
.btn-compact{ padding:10px 22px; }
.btn-primary{
  background:var(--navy); color:var(--white); border:2px solid var(--navy);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-outline{
  background:var(--white); color:var(--navy); border:2px solid var(--ice); font-weight:500;
}
.btn-outline:hover{ border-color:var(--navy); }
.btn-gold{ background:var(--gold); color:var(--navy); border:2px solid var(--gold); }
.btn-gold:hover{ background:transparent; color:var(--navy); border-color:var(--gold); }
.btn-danger{ background:var(--red); color:var(--white); border:2px solid var(--red); }
.btn-danger:hover{ background:transparent; color:var(--red); border-color:var(--red); }
.btn-success{ background:var(--green); color:var(--white); border:2px solid var(--green); }
.btn-success:hover{ background:transparent; color:var(--green); border-color:var(--green); }
.btn:disabled, .btn[disabled]{
  background:var(--ice); color:var(--text-light); border-color:var(--ice);
  cursor:not-allowed; box-shadow:none;
}
.btn:disabled:hover{ background:var(--ice); color:var(--text-light); border-color:var(--ice); }
.btn .icon{ width:16px; height:16px; }
/* "Continue with Google" — neutral white button (Google brand: colored G on white), + an "or" divider
   between it and the email/password form on the login + signup pages. */
.btn-google{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:var(--white); color:#3c4043; border:1px solid #dadce0; font-weight:600; text-decoration:none; }
.btn-google:hover{ background:#f8faff; border-color:#c6cdd6; }
.btn-google svg{ flex:0 0 18px; }
.or-divider{ display:flex; align-items:center; text-align:center; color:var(--text-light); margin:16px 0; font-size:13px; }
.or-divider::before, .or-divider::after{ content:""; flex:1; height:1px; background:var(--ice); }
.or-divider span{ padding:0 12px; }

/* ---- Cards (§4.4) --------------------------------------------------------- */
.card{
  background:var(--white); border:1px solid var(--ice); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow-sm); transition:all .2s ease;
}
.card:hover{ box-shadow:var(--shadow-md); border-color:var(--navy-light); }
.card-dark{ background:var(--navy); color:var(--white); border-color:var(--navy-mid); }
.card-dark h3{ color:var(--white); }

/* ---- Status pills (§4.4) -------------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:100px; padding:4px 14px;
  font-family:var(--font-sans); font-size:12px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
  background:var(--ice); color:var(--slate);
  white-space:nowrap; /* multi-word labels (e.g. ENTER-MATTER) must not wrap inside the fixed pill shape */
  /* This exact shared component is the root cause behind several independently-"fixed" table-column
     overflow bugs (audit log Event pills, others) — white-space:nowrap alone has no escape valve when
     the CONTAINER (a table-layout:fixed column) ends up narrower than the pill's natural content width,
     so the pill just paints over its neighbor instead of adapting. max-width+ellipsis makes every pill
     everywhere degrade gracefully on its own, without each table needing its own bespoke fix — a pill
     that already fits (the common case) renders identically to before. */
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.pill-green{ background:var(--green); color:var(--white); }
.pill-amber{ background:var(--amber); color:var(--white); }
.pill-red{ background:var(--red); color:var(--white); }

/* ---- App shell (Master Ref §10): fixed left navy sidebar ------------------ */
.app{ display:grid; grid-template-columns:224px 1fr; min-height:100vh; }
.sidebar{
  background:var(--navy); color:var(--white);
  padding:24px 18px; display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh;
}
.sidebar .brandrow{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.sidebar .brandrow img{ height:26px; display:block; }
.sidebar nav{ display:flex; flex-direction:column; gap:2px; }
.sidebar .navitem{
  display:flex; align-items:center; gap:10px;
  color:var(--white); text-decoration:none; font-size:14px; font-weight:500;
  padding:9px 12px; border-radius:8px; transition:all .2s ease; opacity:.92;
}
.sidebar .navitem:hover, .sidebar .navitem.active{ background:var(--navy-light); opacity:1; }
.sidebar .navitem .icon{ width:18px; height:18px; fill:currentColor; }
.sidebar .spacer{ flex:1; }
.sidebar .meta{ color:var(--navy-muted); font-size:12px; }
.sidebar .meta strong{ color:var(--white); font-weight:500; display:block; }
.main{ padding:36px 40px; min-width:0; }
.app .main{ font-size:14px; } /* denser in-app body per Master Ref §10 */

/* ---- Narrow viewports: the fixed 224px sidebar + sticky/100vh treatment leaves a permanent
   dead margin under the sidebar for the rest of the page on any phone-width screen (confirmed
   live at 390px — the grid never reflows because nothing here has ever set a breakpoint). Stack
   instead of side-by-side; the sidebar becomes a normal top block, not a fixed-height rail.
   640px (not 860px): this two-column grid only needs a 224px rail + reasonable content width,
   so it stays two-column at any ordinary desktop window size — confirmed live, an 855px-wide
   window was incorrectly collapsing to mobile stacking at the old 860px threshold. The chat
   page's separate 3-pane breakpoint in workspace.html legitimately needs more room and keeps
   its own 860px value. ---- */
@media (max-width: 640px){
  .app{ display:flex; flex-direction:column; }
  /* .sidebar and .main are themselves flex siblings of .app now, so .main needs a lower order
     than .sidebar (not just its inner nav/meta children) or .sidebar as a whole still precedes it. */
  .sidebar{ position:static; height:auto; display:flex; flex-wrap:wrap; order:1; }
  .sidebar .brandrow{ width:100%; order:0; }
  .sidebar nav, .sidebar .spacer, .sidebar .meta, .sidebar form{ order:2; }
  .main{ order:0; padding:20px 16px; }
  .sidebar .spacer{ flex:none; height:0; }
}

.icon{ width:18px; height:18px; fill:currentColor; flex:none; }

/* ---- Forms ----------------------------------------------------------------- */
label{ display:block; font-size:13px; font-weight:600; color:var(--navy); margin:0 0 6px; }
input[type=text], input[type=email], input[type=password], textarea{
  width:100%; font-family:var(--font-sans); font-size:15px; color:var(--navy);
  background:var(--white); border:1px solid var(--border-input); border-radius:var(--radius-sm);
  padding:12px 14px; outline:none; transition:border-color .2s ease;
}
/* box-shadow ring (not just border-color) so focus is visible per WCAG 2.4.7, not just a 1px near-white-to-navy tint shift */
input:focus, textarea:focus{ border-color:var(--navy-light); box-shadow:0 0 0 3px rgba(26,58,107,0.35); }
.field{ margin-bottom:16px; }
.form-error{ color:var(--red); font-size:14px; font-weight:500; margin:0 0 14px; }

/* ---- Numbered steps / show-your-work circles ------------------------------- */
.step-circle{
  width:40px; height:40px; border-radius:50%; background:var(--ice-warm);
  color:var(--navy); font-family:var(--font-sans); font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ---- Streaming agent log (mono on ice-warm) -------------------------------- */
.agentlog{
  font-family:var(--font-mono); font-size:13px; line-height:1.55;
  background:var(--ice-warm); border:1px solid var(--ice); border-radius:var(--radius-sm);
  padding:14px 16px; overflow-y:auto; white-space:pre-wrap; word-break:break-word;
  color:var(--navy);
}
.agentlog .ev-tool{ color:var(--slate); }
.agentlog .ev-text{ color:var(--navy); }
.agentlog .ev-meta{ color:var(--text-light); }

/* ---- Misc ------------------------------------------------------------------ */
.section-ice{ background:var(--ice-warm); }
.section-white{ background:var(--white); }
.divider{ border:none; border-top:1px solid var(--ice); margin:20px 0; }
.row{ display:flex; align-items:center; gap:12px; }
.row .grow{ flex:1; }
.spin{ animation:yai-spin 1s linear infinite; }
@keyframes yai-spin{ to{ transform:rotate(360deg); } }