/* Morning Coffee — site styles.
   Design system lifted from BLUEPRINT.md: off-white canvas, one teal accent,
   hairline-bordered rounded cards, monospaced numbers, lowercase labels. */

:root {
  --bg: 252 252 250;
  --surface: 255 255 255;
  --border: 226 226 224;
  --fg: 23 23 22;
  --muted: 115 115 110;
  --accent: 13 148 136;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: 12 13 14;
    --surface: 22 23 25;
    --border: 38 40 43;
    --fg: 240 240 238;
    --muted: 140 142 145;
    --accent: 45 212 191;
  }
}

/* Manual override wins over the system preference. */
html[data-theme="light"] {
  --bg: 252 252 250; --surface: 255 255 255; --border: 226 226 224;
  --fg: 23 23 22; --muted: 115 115 110; --accent: 13 148 136;
}
html[data-theme="dark"] {
  --bg: 12 13 14; --surface: 22 23 25; --border: 38 40 43;
  --fg: 240 240 238; --muted: 140 142 145; --accent: 45 212 191;
}

* { box-sizing: border-box; border-color: rgb(var(--border)); }

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

body {
  margin: 0;
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgb(var(--accent) / 0.25); }

.tnum { font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

a { color: rgb(var(--accent)); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ---- hero ---- */
.hero {
  position: relative;
  border-bottom: 1px solid rgb(var(--border));
  overflow: hidden;
}
.grain::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 20% 0%, rgb(var(--accent) / 0.10), transparent 70%),
    radial-gradient(50% 70% at 90% 10%, rgb(var(--accent) / 0.08), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; padding-top: 40px; padding-bottom: 44px; }

.crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgb(var(--muted));
  margin-bottom: 18px;
}
.crumb .dot { opacity: 0.5; }

.headline {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
  margin: 0 0 14px;
}
.headline .accent { color: rgb(var(--accent)); }
.lede { color: rgb(var(--muted)); font-size: 16px; max-width: 60ch; margin: 0; }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 22px;
}

/* ---- pills / buttons ---- */
.pill {
  display: inline-block;
  font-size: 10px; text-transform: lowercase; letter-spacing: 0.04em;
  color: rgb(var(--accent));
  background: rgb(var(--accent) / 0.10);
  border: 1px solid rgb(var(--accent) / 0.30);
  border-radius: 999px; padding: 2px 10px;
}
.ghost {
  font: inherit; font-size: 12px; cursor: pointer;
  color: rgb(var(--muted));
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: 999px; padding: 5px 12px;
  transition: border-color 0.15s, color 0.15s;
}
.ghost:hover { border-color: rgb(var(--accent) / 0.40); color: rgb(var(--fg)); }

/* ---- cards ---- */
.card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: 14px;
  padding: 20px;
}
.stack { display: grid; gap: 14px; }
section.body { padding: 34px 0 60px; }

/* ---- quiz ---- */
.qhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.qnum { font-size: 12px; color: rgb(var(--muted)); }
.qtext { font-size: 17px; font-weight: 600; margin: 0 0 14px; letter-spacing: -0.01em; }
.opts { display: grid; gap: 8px; }
.opt {
  font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  color: rgb(var(--fg));
  background: rgb(var(--bg));
  border: 1px solid rgb(var(--border));
  border-radius: 10px; padding: 11px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.opt:hover { border-color: rgb(var(--accent) / 0.45); }
.q[data-answered="true"] .opt { cursor: default; }
.opt.correct {
  border-color: rgb(var(--accent) / 0.6);
  background: rgb(var(--accent) / 0.12);
  color: rgb(var(--fg));
}
.opt.wrong {
  border-color: rgb(225 90 90 / 0.6);
  background: rgb(225 90 90 / 0.10);
}
.opt .mark { float: right; font-weight: 600; }
.explain {
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px dashed rgb(var(--border));
  font-size: 14px; color: rgb(var(--muted));
  display: none;
}
.q[data-answered="true"] .explain { display: block; }

.scoreline {
  font-size: 12px; color: rgb(var(--muted)); text-transform: lowercase;
  letter-spacing: 0.02em;
}
.scoreline b { color: rgb(var(--accent)); font-variant-numeric: tabular-nums; }

/* ---- archive grid ---- */
.grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }
.edition { display: flex; flex-direction: column; gap: 8px; transition: border-color 0.15s; }
.edition:hover { border-color: rgb(var(--accent) / 0.40); }
.edition .date { font-size: 12px; color: rgb(var(--muted)); }
.edition h3 { font-size: 16px; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.edition p { font-size: 14px; color: rgb(var(--muted)); margin: 0; flex: 1; }
.edition .more { font-size: 13px; color: rgb(var(--accent)); }
a.edition { color: inherit; text-decoration: none; }
a.edition:hover { text-decoration: none; }

/* ---- footer ---- */
footer { border-top: 1px solid rgb(var(--border)); }
footer .wrap { padding: 22px 24px; }
.foot { font-size: 12px; color: rgb(var(--muted)); }

.empty { color: rgb(var(--muted)); font-size: 15px; }

/* ---- digest: sections of items (jobs, briefings, …) ---- */
.block { margin-top: 30px; }
.block-h {
  font-size: 12px; font-weight: 600; text-transform: lowercase; letter-spacing: 0.06em;
  color: rgb(var(--muted)); margin: 0 0 12px;
}
.item-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.item-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: rgb(var(--fg)); }
a.item-title:hover { color: rgb(var(--accent)); text-decoration: none; }
.item-meta { font-size: 12px; color: rgb(var(--muted)); white-space: nowrap; }
.item-sub { font-size: 13px; color: rgb(var(--accent)); margin-top: 3px; }
.item-sum { font-size: 14px; color: rgb(var(--muted)); margin: 8px 0 0; }
.note { color: rgb(var(--muted)); font-size: 14px; }

/* scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: rgb(var(--border)); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--accent) / 0.5); }