/* ============================================================
   LLMonAI — shared brand layer
   Single source of truth for tokens, brand mark, and the
   primitives every page reuses. Page-specific CSS stays inline.

   Signature palette: warm cream paper, deep navy ink, one
   vermilion accent that owns every interactive state.
   To reshade the whole product, change --brand (+ --brand-deep).
   ============================================================ */

:root{
  /* --- surfaces --- */
  --paper:#F4F1EA;
  --paper-raised:#FFFCF7;
  --paper-sunk:#EBE6DC;

  /* --- ink --- */
  --ink:#14213A;
  --ink-soft:#3D4A5F;
  --meta:#6E7684;
  --hairline:#DDD6C9;
  --hairline-strong:#C7BEAD;

  /* --- the signature --- */
  --brand:#C8452C;          /* fills, active states, on white text */
  --brand-deep:#A5341E;     /* small text on paper, hovers */
  --brand-tint:rgba(200,69,44,.08);
  --brand-tint-strong:rgba(200,69,44,.16);

  /* --- supporting --- */
  --gold:#8A6A2F;
  --ok:#2E6B52;
  --err:#9B3122;

  /* --- category rules (thin bars + dots only, never text) --- */
  --c-research:#2F6F8F;
  --c-industry:#14213A;
  --c-policy:#7A6230;
  --c-ethics:#9B3122;
  --c-tools:#C8452C;
  --c-courses:#2E6B52;
  --c-workforce:#5A6672;
  --c-startups:#5E4C86;

  /* --- layout --- */
  --maxw:1200px;
  --gutter:24px;
  --radius:10px;
  --tap:44px;               /* minimum touch target */

  --shadow-sm:0 1px 2px rgba(20,33,58,.06);
  --shadow-md:0 6px 20px rgba(20,33,58,.09);
  --shadow-lg:0 24px 64px rgba(20,33,58,.20);
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Public Sans', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;          /* nothing may push the page sideways */
}

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:3px;
}

::selection{ background:var(--brand-tint-strong); }

/* ---------- The brand mark ----------
   Three stacked rules — a briefing, in focus. Top rule is the
   accent. Renders identically at 28px and 64px, and doubles as
   the favicon (same geometry, inline SVG in each page head). */
.brandmark{
  width:var(--mark-size,52px);
  height:var(--mark-size,52px);
  flex-shrink:0;
  border-radius:11px;
  background:var(--ink);
  display:grid;
  align-content:center;
  gap:var(--mark-gap,5px);
  padding:var(--mark-pad,13px);
}
.brandmark i{
  display:block;
  height:var(--mark-bar,4px);
  border-radius:2px;
  background:var(--paper);
}
.brandmark i:nth-child(1){ background:var(--brand); width:100%; }
.brandmark i:nth-child(2){ width:74%; opacity:.9; }
.brandmark i:nth-child(3){ width:44%; opacity:.55; }

a.brandmark-link{ text-decoration:none; display:inline-flex; }

/* ---------- Wordmark / eyebrow ---------- */
.wordmark{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--meta);
}
.wordmark b{ color:var(--ink); font-weight:500; }
.wordmark .sep{ color:var(--hairline-strong); }

/* ---------- LLMonAI lockup ---------- */
.llmonai-logo{
  display:block;
  width:210px;
  height:auto;
  max-width:100%;
}
.pitch .llmonai-logo{
  width:230px;
  padding:12px 16px;
  border-radius:10px;
  background:#fff;
}

/* Near-flat dark logo housing. The one-pixel inner edges retain just
   enough separation from dark backgrounds without reading as embossed. */
.logo-panel,
.pitch .logo-panel{
  background:#111519;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 4px 12px rgba(0,0,0,.18);
}

/* ---------- Shared gutter for the page rhythm ----------
   One place to change the page width and side padding. Only
   top-level page bands belong here — nested rows inherit it. */
.masthead,
.contribution-bar,
.archive-bar,
.add-source,
.layout,
.filterbar-inner,
footer{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  min-width:0;
}

/* ---------- Buttons ---------- */
.btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:.02em;
  min-height:var(--tap);
  padding:0 18px;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn-primary:hover{ background:var(--brand-deep); border-color:var(--brand-deep); }
.btn-ink{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-ink:hover{ background:#0C1729; }
.btn-quiet{ background:var(--paper-raised); color:var(--ink-soft); border-color:var(--hairline); }
.btn-quiet:hover{ border-color:var(--ink-soft); color:var(--ink); }
.btn:disabled{ opacity:.55; cursor:default; transform:none; }

/* Small chip-style actions still honour the 44px tap floor via
   an invisible padded hit area rather than a bigger visual box. */
.mini-btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  border:1px solid var(--hairline);
  background:var(--paper-raised);
  color:var(--ink-soft);
  border-radius:6px;
  padding:7px 11px;
  cursor:pointer;
  position:relative;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.mini-btn::after{
  content:"";
  position:absolute; left:0; right:0;
  top:50%; transform:translateY(-50%);
  height:var(--tap);
}
.mini-btn:hover{ border-color:var(--ink-soft); color:var(--ink); }
.mini-btn:disabled{ opacity:.55; cursor:default; }

/* ---------- Fields ---------- */
.field{
  font-family:'Public Sans', sans-serif;
  font-size:16px;                 /* 16px stops iOS Safari zoom-on-focus */
  color:var(--ink);
  background:var(--paper-raised);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:0 13px;
  min-height:var(--tap);
  width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-tint);
}
select.field{
  appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236E7684' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:11px;
}

/* ---------- Text link ---------- */
.tlink{
  color:var(--brand-deep);
  text-decoration:none;
  border-bottom:1px solid var(--brand-tint-strong);
  cursor:pointer;
}
.tlink:hover{ border-bottom-color:var(--brand); }

/* ---------- Section labels ---------- */
.kicker{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--meta);
}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  :root{ --gutter:18px; }
}
@media (max-width:400px){
  :root{ --gutter:15px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}