/* Maro brand system — "White and Cerulean", from the Brand Board (claude.ai/design).
   White + cerulean (the pen). Type: Geist Sans for the INTERFACE (nav, buttons,
   dashboards, forms — a legible tool), Newsreader for READING & WRITING (the
   essay, course prose, the reader's cited lines, the literary hero), Geist Mono
   for labels. Serif-for-content / sans-for-chrome — the FORGE/VindicaOS split.
   Voice: the kind, sharp reader in your margins. Seen, not scored. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&family=Geist:wght@400;450;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root{
  --paper:#FFFCF7;     /* the sheet — warm white */
  --sky:#F6F1E7;       /* the desk — warm paper ground */
  --sky-wash:#EFE7D8;  /* a second sheet — note panels, highlights */
  --pen:#2D7DBA;       /* cerulean — the reader's pen; marks, links, caret */
  --pen-deep:#1F5E8F;  /* deep cerulean — CTA bands, dark panels */
  --pen-on-dark:#BBD8EE;
  --ink:#1E1A15;       /* near-black, warmed — text, the blot, dark panels */
  --muted:#5A5046;     /* secondary text — 7.0:1 on the ground */
  --faint:#6B6154;     /* tertiary text, labels — 5.4:1 on the ground */
  --faint-line:#B8AC9A;/* NON-text decoration only (dots, rules) — never type */
  --amber:#C4954A;     /* warm spark — small human accents only */
  --amber-deep:#9A7330;

  --line:rgba(30,26,21,0.12);
  --line-soft:rgba(30,26,21,0.09);
  --line-strong:rgba(30,26,21,0.17);
  --pen-line:rgba(45,125,186,0.22);

  --sans:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;  /* the interface */
  --display:'Fraunces','Newsreader',Georgia,serif;  /* headlines only — warm, bookish, opsz-aware */
  --serif:'Newsreader',Georgia,serif;   /* reading & writing surfaces only */
  --mono:'Geist Mono',ui-monospace,monospace;

  --shadow-card:0 20px 54px -38px rgba(31,94,143,0.45);
  --shadow-note:0 16px 34px -20px rgba(45,125,186,0.55);
  --shadow-cta:0 12px 26px -12px rgba(45,125,186,0.7);

  --maxw:1180px;
  /* hand-wobbled sheet edge; used by .torn */
  --deckle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L0 6 Q 40 2 80 5 T 160 6 Q 210 9 260 5 T 350 4 Q 400 8 450 6 T 540 7 Q 590 3 640 6 T 730 5 Q 780 9 830 6 T 920 5 Q 970 2 1020 6 T 1100 5 L1100 12 Z' fill='%23000'/%3E%3C/svg%3E");
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* ── paper ─────────────────────────────────────────────────────────────────
   Maro marks up your writing in cerulean ink. A warm sheet under a cool pen is
   that story; a blue-white one was just a UI. The graph rule sits at ~3% so it
   reads as tooth, not as a table. */
.papergrid{
  background-color:var(--sky);
  background-image:
    linear-gradient(rgba(30,26,21,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,26,21,0.028) 1px, transparent 1px);
  background-size:27px 27px;
  background-position:-1px -1px;
}
/* a torn sheet edge between bands — brand surfaces only, never a task surface */
.torn{ position:relative; }
.torn::before{
  content:''; position:absolute; left:0; right:0; top:-11px; height:12px;
  background:inherit; pointer-events:none;
  -webkit-mask-image:var(--deckle); mask-image:var(--deckle);
  -webkit-mask-size:1100px 12px; mask-size:1100px 12px;
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
}
@media (prefers-reduced-motion:no-preference){
  .papergrid{ transition:background-color .2s ease; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);          /* the interface default — legible, tool-like */
  font-size:16px;
  line-height:1.5;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }

/* ---- reading & writing surfaces — the ONLY place Newsreader lives ----
   The essay editor, course prose, the reader's cited lines, the literary hero.
   Everything else (nav, buttons, dashboards, forms) is the sans interface. */
.reading{ font-family:var(--serif); line-height:1.72; }
.serif{ font-family:var(--serif); }

/* ---- type helpers ----
   Sans carries interface hierarchy (size + weight). The literary display + the
   wordmark keep the serif. Italic is a deliberate accent: the wordmark, and
   genuine <em> emphasis in the reader's own prose. */
/* Headings carry the warmth. Roman, never italic — italic stays reserved for the
   wordmark and the reader's own <em> (see PRODUCT.md's typography rule). */
h1,h2,h3{ font-family:var(--display); font-weight:600; letter-spacing:-0.015em; font-style:normal; text-wrap:balance; }

.display{ font-family:var(--display); font-weight:600; letter-spacing:-0.015em; line-height:1.05; }
.serif-italic{ font-family:var(--serif); font-style:italic; }   /* opt-in accent — the reader's voice, used sparingly */
.mono{ font-family:var(--mono); }
.label{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); }
.label.pen{ color:var(--pen); }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--pen); }

/* ---- stage switching ----
   Every page that moves between stages calls a local show() that toggles this
   class. It used to be declared per page, in each page's own <style> block —
   which meant a new page inherited the pattern and NOT the rule that makes it
   work. exam.html and homework.html both shipped that way and rendered all
   three of their stages at once. It lives here now so the next page cannot.
   Pages that already declare it locally (some with !important) still win. */
.hidden{ display:none; }

/* ---- visually hidden, still announced (live regions, extra labels) ---- */
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---- layout ---- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:56px; padding-right:56px; }
.sky{ background:var(--sky); }

/* ---- the reader's highlight (cerulean pen wash under text) ---- */
.hl{ background:linear-gradient(transparent 60%, rgba(45,125,186,0.22) 60%); padding:0 1px; }
.hl-amber{ background:linear-gradient(transparent 60%, rgba(196,149,74,0.32) 60%); padding:0 1px; }
.underline-pen{ text-decoration:underline; text-decoration-color:var(--pen); text-underline-offset:2px; }

/* ---- cards ---- */
.card{ background:var(--paper); border:1px solid var(--line); border-radius:16px; }
.card.float{ box-shadow:var(--shadow-card); }
.panel-deep{ background:var(--pen-deep); color:#fff; border-radius:16px; }
.panel-ink{ background:var(--ink); color:#fff; border-radius:24px; }

/* ---- pills / status chips ---- */
.pill{ display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:0.08em; padding:6px 14px; border-radius:20px;
  color:var(--pen-deep); background:var(--sky-wash); border:1px solid rgba(45,125,186,0.25); }
.pill.amber{ color:var(--amber-deep); background:var(--paper); border-color:rgba(196,149,74,0.45); }

/* ---- buttons (interface — sans) ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-weight:500;
  font-size:16px; line-height:1; padding:13px 26px; border-radius:24px; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; }
.btn:active{ transform:translateY(1px); }
.btn-pen{ background:var(--pen); color:#fff; box-shadow:var(--shadow-cta); }
.btn-pen:hover{ background:#2A72A8; }
.btn-paper{ background:var(--paper); color:var(--ink); border-color:var(--line-strong); }
.btn-paper:hover{ border-color:var(--pen); }
.btn-ghost{ background:transparent; color:var(--muted); border-color:rgba(35,43,51,0.18); }
.btn-ghost:hover{ color:var(--ink); border-color:var(--line-strong); }
/* `btn-quiet` was used on four pages (course, diagnose, exam, homework) and
   defined on none of them, so every one of those buttons fell through to the
   browser's own control styling: a cold #F0F0F0 face with pure black text,
   sitting on warm paper. It is the low-emphasis sibling of btn-paper. */
.btn-quiet{ background:var(--paper); color:var(--muted); border-color:var(--line); }
.btn-quiet:hover{ color:var(--ink); border-color:var(--pen); }
.btn-link{ background:none; color:var(--pen-deep); border:0; border-bottom:2px solid rgba(45,125,186,0.4); border-radius:0; padding:2px 0; }
.btn-sm{ font-size:14px; padding:9px 18px; }

/* ---- focus: a visible, consistent ring everywhere (keyboard + a11y) ---- */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--pen); outline-offset:2px; border-radius:6px;
}

/* ---- the wordmark (keeps the literary serif italic) ---- */
.wordmark{ font-family:var(--serif); font-style:italic; font-weight:500; letter-spacing:-0.01em; }

/* ---- skip link (first tab stop; visually hidden until focused) ---- */
.skip{ position:absolute; left:12px; top:-48px; z-index:60; background:var(--pen); color:#fff; padding:9px 16px;
  border-radius:0 0 10px 10px; font-family:var(--sans); font-size:14px; transition:top .15s ease; }
.skip:focus{ top:0; }

/* ---- the shared app bar (one nav, every signed-in page — js/maro-nav.js) ---- */
.appbar{ position:sticky; top:0; z-index:30; background:var(--paper); border-bottom:1px solid var(--line); }
.appbar .in{ max-width:1120px; margin:0 auto; padding:12px clamp(20px,4vw,48px); display:flex; align-items:center; gap:18px; }
.appbar .brand{ display:flex; align-items:center; gap:10px; color:var(--ink); flex:none; }
.appbar nav{ display:flex; gap:2px; align-items:center; flex:1; flex-wrap:wrap; }
.appbar nav a{ font-family:var(--sans); font-size:15px; color:var(--muted); padding:8px 14px; border-radius:9px;
  transition:background .12s, color .12s; }
.appbar nav a:hover{ background:var(--sky); color:var(--ink); }
.appbar nav a[aria-current="page"]{ color:var(--pen); background:var(--sky-wash); font-weight:500; }
.appbar .acct{ flex:none; font-family:var(--sans); font-size:14px; color:var(--faint); background:none; border:0;
  padding:8px 10px; border-radius:8px; cursor:pointer; transition:color .12s, background .12s; }
.appbar .acct:hover{ color:var(--ink); background:var(--sky); }
/* Narrow screens: one row wrapped the brand, six doors and Sign out into an
   unreadable cluster. Brand + Sign out keep the top row; the nav becomes its
   own horizontally scrollable row — every door stays one thumb-swipe away. */
@media (max-width:700px){
  .appbar .in{ flex-wrap:wrap; gap:10px; padding-bottom:0; }
  .appbar .brand{ order:1; }
  .appbar .acct{ order:2; margin-left:auto; }
  .appbar nav{ order:3; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin:0 calc(-1 * clamp(20px,4vw,48px)); padding:2px clamp(20px,4vw,48px) 10px; }
  .appbar nav::-webkit-scrollbar{ display:none; }
  .appbar nav a{ white-space:nowrap; padding:8px 10px; font-size:14px; }
}

/* ---- skeleton / shimmer (loading placeholder — a calm wait, not a spinner) ---- */
.sk{ position:relative; overflow:hidden; background:var(--sky-wash); border-radius:8px; }
.sk::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent); animation:skShim 1.35s ease-in-out infinite; }
.sk-line{ height:14px; margin:10px 0; }
@keyframes skShim{ 100%{ transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce){
  .sk::after{ animation:none; }
  .sk{ background:linear-gradient(90deg,var(--sky-wash),rgba(45,125,186,0.08),var(--sky-wash)); }
}
/* the reader "thinking" line — used while Maro grades a draft */
.reading-dots::after{ content:""; animation:readDots 1.4s steps(4,end) infinite; }
@keyframes readDots{ 0%{content:"";} 25%{content:"·";} 50%{content:"· ·";} 75%{content:"· · ·";} }
@media (prefers-reduced-motion:reduce){ .reading-dots::after{ content:"· · ·"; animation:none; } }

/* ---- Maro, the ink-blot mascot. Size via --bs (blot width in px). ---- */
.blot{ position:relative; display:grid; place-items:center; width:var(--bs,40px); aspect-ratio:96/88; flex:none;
  background:var(--ink); border-radius:62% 38% 55% 45% / 58% 50% 50% 42%; transform:rotate(-6deg); }
.blot.pen{ background:var(--pen); }
.blot.amber{ background:var(--amber); }
.blot .eyes{ display:flex; gap:calc(var(--bs,40px)*0.12); }
.blot .eye{ width:calc(var(--bs,40px)*0.13); height:calc(var(--bs,40px)*0.13); background:#fff; border-radius:50%; }
.blot .spark{ position:absolute; right:-7%; bottom:5%; width:calc(var(--bs,40px)*0.13); height:calc(var(--bs,40px)*0.13);
  background:var(--amber); border-radius:50%; }
.blot.float{ animation:maroFloat 5.5s ease-in-out infinite; transform:none; }

/* ---- keyframes (from the design helmets) ---- */
@keyframes maroDrawIn{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes maroFloat{ 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-7px) rotate(-4deg);} }
@keyframes maroPulse{ 0%,100%{ opacity:0.5; } 50%{ opacity:1; } }

/* ---- small responsive guard for the marketing grids ---- */
@media (max-width:900px){
  .wrap{ padding-left:24px; padding-right:24px; }
}