/* Hypothesis on the web — direction D.
 *
 * Shared by every page, because four copies of the same tokens is how a ghost
 * button ends up blue on one page and not another. Page-specific rules stay in
 * the page; anything two pages need lives here.
 *
 * THE ONE RULE: structure comes from rules and alignment, never from corners,
 * elevation or fills. No border-radius in this file. No shadows, no gradients.
 *
 * LAYOUT. Mobile is the default and needs no media query — a shared link is
 * opened on a phone more often than not. Above `--wide` the page stops being a
 * column and becomes content plus a sidebar, because a 34rem measure centred in
 * a 1440px window is a phone screenshot, not a web page. Answering is the
 * exception and stays narrow at every size: one question at a time, because a
 * scrolling form hides how much is left.
 */

:root {
  color-scheme: light dark;
  --ink:#0A0A0A; --mid:#4A4A4A; --muted:#8A8A8A; --bg:#fff;
  --rule:#DEDEDE; --hair:#EDEDED; --wash:#FAFAFA; --accent:#E5231B;

  /* The measure for prose. Not the width of the page. */
  --measure: 34rem;
  /* Where the layout earns a second column. */
  --wide: 62rem;
  --gutter: 24px;
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#F2F2F2; --mid:#B4B4B4; --muted:#7C7C7C; --bg:#0A0A0A;
          --rule:#2E2E2E; --hair:#1F1F1F; --wash:#141414; }
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--bg); color:var(--ink);
  padding:32px var(--gutter) 72px;
  font:16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* The page shell. `main` is the column on a phone and the full sheet on a
 * desktop; `.measure` is what keeps prose readable inside it. */
main { max-width:var(--measure); margin:0 auto; }
main.sheet { max-width:76rem; }
.measure { max-width:var(--measure); }

/* Content plus sidebar. One column until there is genuinely room for two —
 * 62rem, not 48, because a cramped second column is worse than none. */
.split { display:grid; gap:26px; }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr) 21rem; gap:44px; align-items:start; }
  .split > .full { grid-column: 1 / -1; }
}

/* Answering never splits and never widens. */
.narrow { max-width:34rem; margin:0 auto; }

.figures { font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
           font-variant-numeric:tabular-nums; }
.lbl { font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
       color:var(--muted); }

header { display:flex; align-items:baseline; justify-content:space-between;
         border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:26px; }
header .brand { font-size:13px; font-weight:700; letter-spacing:.22em;
                color:inherit; text-decoration:none; }
header nav { display:flex; gap:18px; align-items:baseline; }
header nav a { color:var(--muted); text-decoration:none; font-size:10px; font-weight:600;
               letter-spacing:.2em; text-transform:uppercase; }
header nav a:hover, header nav a[aria-current="page"] { color:var(--ink); }

h1 { font-size:1.65rem; line-height:1.2; letter-spacing:-.02em; margin:0 0 6px; }
.sub { color:var(--muted); font-size:.9rem; margin:0 0 24px; }
@media (min-width: 62rem) { h1 { font-size:2rem; letter-spacing:-.03em; } }

/* Buttons and links that act as buttons. Square, full width, uppercase. */
.btn, button.primary, a.primary {
  display:block; width:100%; padding:16px; border:0; background:var(--ink);
  color:var(--bg); font:inherit; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; font-size:.8rem; cursor:pointer;
  text-align:center; text-decoration:none;
}
button.primary[disabled] { background:var(--hair); color:var(--muted); cursor:default; }
button.ghost, a.ghost, button.secondary {
  display:block; width:100%; padding:14px; margin-top:10px;
  border:1px solid var(--rule); background:none; color:inherit; font:inherit;
  font-size:.85rem; cursor:pointer; text-align:center; text-decoration:none;
}

/* Result rows and their bars. */
.row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:14px; }
.row .figures { margin-left:auto; }
.row .figures + .margin { margin-left:0; }
.margin { color:var(--muted); font-size:.8rem; min-width:2.6em; text-align:right; }
.bar { height:10px; background:var(--hair); margin-top:5px; display:flex; }
.bar i { display:block; height:100%; background:var(--ink); }
.bar i.alt { background:var(--rule); }
.mine { font-weight:700; }

.note { color:var(--muted); font-size:.82rem; line-height:1.5; margin-top:18px;
        border-top:1px solid var(--hair); padding-top:14px; }
.err { color:var(--accent); font-size:.85rem; }

footer { margin-top:40px; padding-top:16px; border-top:1px solid var(--hair);
         color:var(--muted); font-size:.85rem; }
footer a { color:var(--ink); }

.hidden, [hidden] { display:none !important; }