/* The So What? look shared by the app page and every server-rendered page: tokens, type, header, controls, tiles. */
:root { --bg:#E3E7EC; --card:#FFFFFF; --fg:#15181E; --muted:#5B6370; --line:#C8CED6; --accent:#2346C8; --fav:#A8650C; --mark:#FFE83D;
  --shadow:0 1px 2px rgba(21,24,30,.07); --lift:0 1px 2px rgba(21,24,30,.08), 0 14px 36px -12px rgba(21,24,30,.32);
  --sans:"Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --mono:"Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --journal:"STIX Two Text", "STIX Two", Georgia, serif;
  --hand:"Nanum Pen Script", cursive;
  --subscriber:#2E7D4F; --developer:#7B4FB0;
  --wide:1120px; --narrow:760px; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0F1216; --card:#1A1E25; --fg:#E9EBEE; --muted:#9AA3AF; --line:#2E343D; --accent:#93A9FF; --fav:#E0B050; --mark:#6A5D0E; --subscriber:#5CC08A; --developer:#B493E6;
    --shadow:0 1px 2px rgba(0,0,0,.35); --lift:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -12px rgba(0,0,0,.7); }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:400 16px/1.55 var(--sans); }
a { color:var(--accent); text-underline-offset:3px; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

.site-head { position:sticky; top:0; z-index:6; background:var(--bg); border-bottom:1px solid var(--line); }
.site-head .bar { max-width:var(--wide); margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:18px; min-height:58px; }
.wordmark { flex:none; color:var(--fg); font-weight:800; font-size:1.45rem; letter-spacing:-.03em; line-height:1; text-decoration:none; white-space:nowrap; }
.wordmark .q { display:inline-block; margin-left:2px; font:400 2.2rem/0 var(--hand); color:var(--accent); transform:rotate(8deg) translateY(1px); }
.crumbs { flex:1; min-width:0; display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none; }
.crumbs::-webkit-scrollbar { display:none; }
.crumbs > a, .crumbs > button { flex:none; padding:7px 12px; border:0; border-radius:99px; background:none; color:var(--muted); font:500 .92rem/1.2 var(--sans); text-decoration:none; white-space:nowrap; cursor:pointer; }
.crumbs > a:hover, .crumbs > button:hover { color:var(--fg); }
.crumbs > a[aria-current], .crumbs > button.on { color:var(--fg); background:var(--card); }
.crumbs .nav-link { margin-left:auto; }
.crumbs .nav-link ~ .nav-link, .crumbs .nav-link + .account { margin-left:0; }
.crumbs .account { margin-left:auto; flex:none; display:flex; gap:8px; align-items:center; padding-left:8px; color:var(--muted); font-size:.88rem; white-space:nowrap; }
.crumbs > a.account { color:var(--fg); font-weight:700; }
.crumbs .account button { padding:4px 12px; font-size:.82rem; }
.crumbs > a.account { display:block; max-width:12em; overflow:hidden; text-overflow:ellipsis; }
.crumbs > a.subscribe { color:var(--subscriber); }

button, select, input, textarea { font:inherit; color:inherit; }
button { font-size:.88rem; font-weight:500; line-height:1.3; padding:5px 14px; border:1.5px solid var(--line); border-radius:99px; background:none; color:var(--fg); cursor:pointer; }
button:hover { border-color:var(--muted); }
button.on { border-color:var(--accent); color:var(--accent); }
button.fav.on { border-color:var(--fav); color:var(--fav); }
button:disabled { opacity:.5; cursor:default; }
select, input:not([type]), input[type=text], input[type=email], textarea { font-size:.9rem; padding:6px 12px; border:1.5px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); }

/* Ink pills: the one action a block exists for. */
.primary, a.listen, a.lesson.ready { display:inline-flex; align-items:center; gap:9px; padding:7px 16px; border:2px solid var(--fg); border-radius:99px; background:var(--fg); color:var(--bg); font-weight:700; font-size:.92rem; line-height:1.3; text-decoration:none; }
a.listen::before { content:""; border-left:10px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.secondary, a.lesson { display:inline-flex; align-items:center; padding:5px 14px; border:1.5px solid var(--line); border-radius:99px; color:var(--fg); font-weight:500; font-size:.88rem; line-height:1.3; text-decoration:none; }
.secondary:hover, a.lesson:hover { border-color:var(--muted); }
span.lesson { color:var(--muted); }

.slot, .state { display:inline-block; font:500 .72rem/1.65 var(--mono); padding:0 8px; border:1px solid var(--line); border-radius:99px; color:var(--muted); margin-right:6px; vertical-align:1px; }

.tier.subscriber { border-color:var(--subscriber); color:var(--subscriber); }
.tier.developer { border-color:var(--developer); color:var(--developer); }
h1 .tier { vertical-align:middle; }

.page-title { font-weight:800; font-size:clamp(1.9rem, 4vw, 2.6rem); line-height:1.05; letter-spacing:-.03em; margin:32px 0 10px; }
.page-sub { color:var(--muted); margin:0 0 28px; max-width:42em; }
.eyebrow { font:500 .8rem/1.4 var(--mono); color:var(--muted); margin:0 0 14px; }
.eyebrow b { color:var(--fg); font-weight:500; }

.tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.tile { display:flex; flex-direction:column; min-width:0; background:var(--card); border-radius:10px; padding:22px 24px 16px; box-shadow:var(--shadow); }
.tile .meta { font:500 .76rem/1.6 var(--mono); color:var(--muted); }
.tile h3 { font:600 1.22rem/1.28 var(--journal); margin:10px 0; }
.tile h3 a { color:inherit; text-decoration:none; }
.tile h3 a:hover { text-decoration:underline; text-decoration-thickness:1px; }
.tile .actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.puzzle { margin:0 0 16px; color:var(--muted); }
.sowhat { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:baseline; margin:2px 0 16px; }
.sowhat .hand { font:400 1.75rem/1 var(--hand); color:var(--accent); transform:rotate(-4deg); white-space:nowrap; }
.sowhat p { margin:0; }

.site-foot { border-top:1px solid var(--line); margin-top:64px; }
.site-foot .bar { max-width:var(--wide); margin:0 auto; padding:22px 24px 40px; display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; color:var(--muted); font-size:.9rem; }
.site-foot .wordmark { font-size:1.1rem; }
.site-foot .wordmark .q { font-size:1.6rem; }
.site-foot nav { margin-left:auto; display:flex; gap:18px; }
.site-foot nav a { color:var(--muted); }

@media (max-width:860px) { .tiles { grid-template-columns:1fr; } }
@media (max-width:600px) {
  .site-head .bar { padding:0 10px 0 16px; gap:8px; min-height:52px; }
  .wordmark { font-size:1.2rem; }
  .wordmark .q { font-size:1.8rem; }
  .crumbs > a, .crumbs > button { padding:6px 9px; font-size:.86rem; }
  /* The account stays in view at the strip's end while the tabs scroll beneath it. */
  .crumbs > .account { position:sticky; right:0; max-width:8em; padding-left:22px; border-radius:0; background:linear-gradient(to right, transparent, var(--bg) 18px); }
  .tile { padding:18px 18px 14px; }
  .site-foot .bar { padding:20px 16px 32px; }
}