/* Corpus. Warm near-black editorial: hairline rules and whitespace first, boxes
   second. Serif display, mono micro-labels, one burnt-amber accent.

   EVERYTHING to do with look and feel lives in the THEME block below. A restyle
   should be a token swap, never a structural edit (SPEC guardrail 7). */

@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("fonts/libre-baskerville-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("fonts/libre-baskerville-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ======================= THEME (locked 2026-08-01, SPEC section 8) ======================= */
:root {
  --bg: #0D0C0A;                    /* warm near-black */
  --card: rgba(255,255,255,0.02);   /* barely-there surface where needed */
  --rule: rgba(242,239,230,0.10);   /* hairline */
  --rule-2: rgba(242,239,230,0.22); /* stronger rule / double-rule divider */
  --ink: #F2EFE6;                   /* warm cream text, the paper tone */
  --muted: #A8A296;
  --faint: #6E6960;
  --accent: #D98E4A;                /* burnt amber, THE accent */
  --accent-ink: #1A1510;            /* text on accent */
  --good: #7FB88A;  --warn: #D9B36A;  --bad: #C96F5E;
  --font-display: "Libre Baskerville", Georgia, serif;
  --font-ui: "Satoshi", -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --r: 14px;                        /* modest radii, editorial not bubbly */
}
/* ======================= end THEME ======================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 15px/1.6 var(--font-ui); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* The one background element: a faint folio grid, static, 3% opacity. */
#folio {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.03;
  background-image: linear-gradient(var(--ink) 1px, transparent 1px);
  background-size: 100% 92px;
}

/* ---------------- type ---------------- */
.display { font-family: var(--font-display); font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; }
.mono {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
}
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.serif { font-family: var(--font-display); }

/* ---------------- app frame ---------------- */
#app { display: none; }
#app.on { display: flex; min-height: 100vh; }

aside.side {
  width: 236px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 30px 20px 22px;
  border-right: 1px solid var(--rule);
}
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: 0.34em; color: var(--ink); padding-left: 2px;
}
.sidenav { display: flex; flex-direction: column; gap: 1px; margin-top: 40px; }
.sidenav a {
  display: block; padding: 9px 10px; margin-left: -10px; border-radius: 9px;
  color: var(--muted); font-size: 14px; font-weight: 500;
  transition: color 0.18s ease, background 0.18s ease;
}
.sidenav a:hover { color: var(--ink); background: rgba(242,239,230,0.03); text-decoration: none; }
.sidenav a.active { color: var(--ink); }
.sidenav a.active::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-right: 9px; vertical-align: middle;
  position: relative; top: -1px;
}
.sidenav a.active { padding-left: 10px; }
.sidenav a:not(.active) { padding-left: 24px; }
.side .spacer { flex: 1; }
.side .wspick { margin-bottom: 14px; }
.userchip { border-top: 1px solid var(--rule); padding-top: 14px; font-size: 12.5px; color: var(--muted); }
.userchip .who { word-break: break-all; margin-bottom: 6px; }
.userchip button {
  background: none; border: none; color: var(--faint); cursor: pointer;
  font: inherit; font-size: 12.5px; padding: 0; text-decoration: underline;
  text-underline-offset: 3px; transition: color 0.18s ease;
}
.userchip button:hover { color: var(--ink); }

main { flex: 1; min-width: 0; }
.wrap { max-width: 940px; margin: 0 auto; padding: 54px 46px 120px; }

/* ---------------- views + page heads ---------------- */
.view { display: none; }
.view.on { display: block; animation: viewIn 0.4s cubic-bezier(0.22, 0.8, 0.3, 1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The signature: a double-rule divider under every page title. */
.pagehead { margin-bottom: 40px; }
.pagehead h1 { font-family: var(--font-display); font-weight: 400; font-size: 27px; letter-spacing: -0.01em; }
.pagehead .sub { color: var(--muted); font-size: 14px; margin-top: 8px; max-width: 54ch; }
.pagehead .rules { margin-top: 18px; border-top: 1px solid var(--rule-2); }
.pagehead .rules::after { content: ""; display: block; margin-top: 3px; border-top: 1px solid var(--rule); }

.sectionmark { display: flex; align-items: baseline; gap: 12px; margin: 46px 0 18px; }
.sectionmark::after { content: ""; flex: 1; border-top: 1px solid var(--rule); position: relative; top: -3px; }

/* staggered entrances */
.view.on .anim { opacity: 0; animation: fadeUp 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------------- cards ---------------- */
.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 26px 28px; transition: border-color 0.25s ease, transform 0.25s ease;
}
.card + .card { margin-top: 14px; }
/* Inside a grid the gap does the spacing; the stacking margin would push every
   card after the first down by 14px and break the row alignment. */
.grid2 > .card + .card, .libgrid > .card + .card, .toolgrid > .card + .card { margin-top: 0; }
.card.lift:hover { border-color: var(--rule-2); transform: translateY(-2px); }
.card h2 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 14.5px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------------- home ---------------- */
.greeting { font-family: var(--font-display); font-weight: 400; font-size: 38px; line-height: 1.2; letter-spacing: -0.015em; }
.greetsub { color: var(--muted); font-size: 15px; margin-top: 12px; }

/* current phase: the one place the accent leads */
.phasecard { border-color: var(--rule-2); position: relative; overflow: hidden; }
.phasecard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.phasecard h2 { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 10px 0 8px; }

.callwhen { font-family: var(--font-display); font-size: 20px; margin: 10px 0 4px; }
.callzone { font-size: 13px; color: var(--faint); }

/* waiting lists */
.waitcol h3 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.waitlist { list-style: none; margin-top: 14px; }
.waitlist li {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 0;
  border-top: 1px solid var(--rule); font-size: 14.5px; color: var(--ink);
}
.waitlist li:first-child { border-top: none; }
.waitlist li.done { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--rule-2); }
.tick {
  flex-shrink: 0; width: 17px; height: 17px; margin-top: 3px; border-radius: 5px;
  border: 1px solid var(--rule-2); background: none; cursor: pointer; padding: 0;
  display: grid; place-items: center; transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.tick:hover { border-color: var(--accent); }
.tick:active { transform: scale(0.88); }
.tick svg { width: 11px; height: 11px; stroke: var(--accent-ink); stroke-width: 3; fill: none; opacity: 0; transition: opacity 0.18s ease; }
.tick.on { background: var(--accent); border-color: var(--accent); }
.tick.on svg { opacity: 1; }
.tick.static { cursor: default; border-style: dashed; }
.tick.static:hover { border-color: var(--rule-2); }

/* ---------------- sessions ---------------- */
.session { padding: 26px 0; border-top: 1px solid var(--rule); }
.session:first-of-type { border-top: none; padding-top: 6px; }
.session .when { margin-bottom: 8px; }
.session h2 { font-family: var(--font-display); font-weight: 400; font-size: 21px; margin-bottom: 14px; }
.summary { color: var(--muted); font-size: 14.5px; max-width: 66ch; }
.summary p + p { margin-top: 12px; }
.summary strong { color: var(--ink); font-weight: 700; }
.actions-list { list-style: none; margin-top: 18px; }
.actions-list li { padding: 8px 0 8px 20px; border-top: 1px solid var(--rule); font-size: 14.5px; position: relative; }
.actions-list li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 6px; height: 1px; background: var(--accent); }

/* ---------------- decisions ---------------- */
/* The log reads as a quiet editorial list: hairline dividers, a mono date beside a
   small status pill, serif idea, muted reason. Client read-only; the accent stays out
   of it, the good/warn/bad pill carries the verdict. */
.decision { padding: 24px 0; border-top: 1px solid var(--rule); }
.decision:first-of-type { border-top: none; padding-top: 6px; }
.decision .when { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.decision h2 { font-family: var(--font-display); font-weight: 400; font-size: 20px; margin-bottom: 8px; }
.decision .reason { color: var(--muted); font-size: 14.5px; max-width: 66ch; }

/* ---------------- roadmap ---------------- */
/* Named stages only. No dates, durations, counters or percentages anywhere here. */
.phase { display: grid; grid-template-columns: 22px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--rule); }
.phase:first-child { border-top: none; }
.phasedot { width: 9px; height: 9px; border-radius: 50%; margin-top: 8px; border: 1px solid var(--rule-2); }
.phase.done .phasedot { background: var(--muted); border-color: var(--muted); }
.phase.current .phasedot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(217,142,74,0.14); }
.phase h2 { font-family: var(--font-display); font-weight: 400; font-size: 20px; margin-bottom: 7px; }
.phase.done h2, .phase.done p { color: var(--muted); }
.phase.upcoming h2 { color: var(--muted); }
.phase.upcoming p { color: var(--faint); }
.phase .state { margin-bottom: 9px; }
.phase.current .state { color: var(--accent); }

/* ---------------- library ---------------- */
.libgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.libcard { display: flex; flex-direction: column; gap: 8px; }
.libcard h3 { font-size: 15.5px; font-weight: 700; }
.libcard p { font-size: 14px; color: var(--muted); flex: 1; }
.libcard .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }

/* ---------------- tools ---------------- */
.toolgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tool h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; }
.tool p { font-size: 14px; }
/* No opacity dim on "coming soon" cards. While every tool is still coming soon that
   would grey out the whole page and read as broken; the pill already says it. */
.tool.soon h3 { color: var(--muted); }
.tool .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }

/* ---------------- ONYX cross-recommend ---------------- */
/* Tools flagship: the ONE place the accent leads on this view. Accent left edge plus
   the amber CTA; the coming-soon tools stay muted so nothing competes with it. */
.onyxflagship {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start;
  position: relative; overflow: hidden; border-color: var(--rule-2);
}
.onyxflagship:hover { text-decoration: none; }
.onyxflagship::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.onyxflagship h3 { font-family: var(--font-display); font-weight: 400; font-size: 21px; margin: 10px 0 8px; }
.onyxflagship p { color: var(--muted); max-width: 60ch; }
.onyxflagship .onyxcta { margin-top: 16px; }

/* Home nudge: deliberately calm. No amber here, so Home keeps the accent on the
   current-phase edge and the Join button only. A quiet hairline card that reads as an
   aside, and disappears the moment the client is on ONYX. */
.onyxnudge {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 28px; padding: 18px 20px;
  border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--muted); transition: border-color 0.2s ease;
}
.onyxnudge:hover { border-color: var(--rule-2); text-decoration: none; }
.onyxnudge .nudgeline { color: var(--ink); font-size: 15px; }
.onyxnudge .nudgego { margin-left: auto; color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.onyxnudge:hover .nudgego { color: var(--ink); }
@media (max-width: 880px) { .onyxnudge .nudgego { margin-left: 0; } }

/* ---------------- pills, buttons, inputs ---------------- */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 10.5px;
  font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--rule-2); color: var(--muted);
}
.pill.accent { border-color: var(--accent); color: var(--accent); }
.pill.good { border-color: rgba(127,184,138,0.4); color: var(--good); }
.pill.warn { border-color: rgba(217,179,106,0.4); color: var(--warn); }
.pill.bad  { border-color: rgba(201,111,94,0.4);  color: var(--bad); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
  cursor: pointer; font: inherit; font-weight: 700; font-size: 13.5px;
  padding: 9px 18px; border-radius: 99px;
  transition: transform 0.15s ease, filter 0.18s ease, background 0.18s ease;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn.ghost { background: none; color: var(--ink); border-color: var(--rule-2); }
.btn.ghost:hover { border-color: var(--ink); filter: none; }
.btn.small { padding: 6px 13px; font-size: 12.5px; font-weight: 500; }
.btn.danger { background: none; color: var(--bad); border-color: rgba(201,111,94,0.4); }

input[type="text"], input[type="email"], input[type="url"], input[type="date"], input[type="datetime-local"], textarea, select {
  width: 100%; background: rgba(0,0,0,0.25); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: 14px; transition: border-color 0.2s ease;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
label { display: block; font-size: 12.5px; color: var(--muted); margin: 16px 0 6px; font-weight: 500; }
label:first-child { margin-top: 0; }
.fieldnote { font-size: 12.5px; color: var(--faint); margin-top: 7px; }
.inline { display: flex; gap: 8px; align-items: center; }
.inline input, .inline select { flex: 1; }

/* ---------------- empty states ---------------- */
.empty { color: var(--muted); font-size: 14.5px; padding: 26px 0; border-top: 1px solid var(--rule); }
.empty.plain { border-top: none; padding-top: 6px; }

/* ---------------- admin ---------------- */
.adminrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--rule); font-size: 14.5px;
}
.adminrow:first-of-type { border-top: none; }
.adminrow .meta { color: var(--faint); font-size: 12.5px; }
.adminrow .acts { display: flex; gap: 8px; flex-shrink: 0; }
.editrow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; padding: 12px 0; border-top: 1px solid var(--rule); }
.editrow .acts { display: flex; gap: 6px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.tabs button {
  background: none; border: 1px solid var(--rule); color: var(--muted); cursor: pointer;
  font: inherit; font-size: 12.5px; padding: 6px 13px; border-radius: 99px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.tabs button:hover { color: var(--ink); border-color: var(--rule-2); }
.tabs button.active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* ---------------- modal + toast ---------------- */
.overlay {
  position: fixed; inset: 0; background: rgba(6,5,4,0.72); z-index: 40;
  display: none; align-items: flex-start; justify-content: center; padding: 8vh 16px;
  overflow-y: auto;
}
.overlay.open { display: flex; }
.overlay.open .modal { animation: popIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal {
  background: #131210; border: 1px solid var(--rule-2); border-radius: var(--r);
  width: 100%; max-width: 520px; padding: 28px; margin-bottom: 8vh;
}
.modal h3 { font-family: var(--font-display); font-weight: 400; font-size: 20px; margin-bottom: 4px; }
.modal .acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 26px; }

#toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(14px);
  background: #16130F; border: 1px solid var(--rule-2); color: var(--ink);
  padding: 10px 20px; border-radius: 99px; font-size: 13.5px; z-index: 60; opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------- login + dead end ---------------- */
#login { display: none; }
#login.on { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; }
.loginbox { width: 100%; max-width: 380px; animation: fadeUp 0.6s cubic-bezier(0.22, 0.8, 0.3, 1); }
.loginmark { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.38em; margin-bottom: 30px; }
.loginbox h1 { font-family: var(--font-display); font-weight: 400; font-size: 25px; line-height: 1.3; margin-bottom: 12px; }
.loginbox p { color: var(--muted); font-size: 14.5px; }
.loginrules { border-top: 1px solid var(--rule-2); margin: 26px 0; }
.loginrules::after { content: ""; display: block; margin-top: 3px; border-top: 1px solid var(--rule); }

/* ---------------- responsive ---------------- */
@media (max-width: 880px) {
  #app.on { flex-direction: column; }
  /* Static, not sticky: three stacked rows of chrome would eat a third of a phone
     screen on every scroll. It scrolls away instead. */
  aside.side {
    width: 100%; height: auto; position: static;
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 14px 18px; border-right: none; border-bottom: 1px solid var(--rule);
    background: var(--bg);
  }
  .sidenav { flex-direction: row; flex-wrap: wrap; gap: 2px; margin-top: 0; margin-left: auto; }
  .sidenav a { padding: 6px 10px; font-size: 13px; margin-left: 0; }
  .sidenav a:not(.active) { padding-left: 10px; }
  .sidenav a.active::before { width: 4px; height: 4px; margin-right: 6px; }
  .side .spacer { display: none; }
  .userchip { border-top: none; padding-top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .userchip .who { margin-bottom: 0; font-size: 11.5px; }
  .side .wspick { margin-bottom: 0; width: 100%; }
  .wrap { padding: 30px 20px 90px; }
  .grid2, .libgrid, .toolgrid { grid-template-columns: 1fr; }
  .greeting { font-size: 29px; }
  .pagehead h1 { font-size: 23px; }
  .card { padding: 20px; }
  .adminrow { flex-wrap: wrap; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* Entrance animations start at opacity 0 and animate up. With animations off that
     leaves the content invisible, so put it back. */
  .view.on .anim, .view.on { opacity: 1 !important; }
}