/* Palette lifted from the app's Theme (hex values from the background notes).
   Two rules from real mistakes: never a browser-default colour or focus ring,
   and on the cream panel use the ink tokens, never white. */
:root {
  --bg-top: #12110E;
  --bg-bottom: #1D1C14;
  --accent: #CCA852;
  --accent-soft: #D6D175;
  --on-accent: #171611;
  --panel-top: #EDE8DB;
  --panel-bottom: #D6D1C4;
  --ink-on-panel: #1F1C17;
  --accent-on-panel: #856117;
  --warning: #EDB861;
  --alarm: #D96B5C;
  --good: #8DB06A;
  --text: #EFEADB;
  --text-dim: #B4AE9B;
  --hair: rgba(239, 234, 219, .14);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Source Serif Pro", Georgia, serif;
  --sans: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg-top);
  background-image: linear-gradient(var(--bg-top), var(--bg-bottom));
  background-attachment: fixed;
  color: var(--text);
  font: 17px/1.55 var(--sans);
}
main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 28px 16px 40px; }
[hidden] { display: none !important; }

h1, h2, .prompt, .stem, .quote { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 8vw, 2.9rem); line-height: 1.1; margin: .2em 0 .4em; }
h2 { font-size: 1.4rem; line-height: 1.25; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.eyebrow { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); margin: 0; }
.lede { font-size: 1.12rem; color: var(--text); max-width: 34em; }
.muted, .fine { color: var(--text-dim); }
.fine { font-size: .88rem; }

/* Buttons: no system styling anywhere. */
.btn, .link, .option {
  font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  background: transparent; border: 1px solid var(--hair); color: var(--text); font-weight: 600;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.link { background: none; border: 0; padding: 6px 0; color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 6px; }
.card :focus-visible { outline-color: var(--accent-on-panel); }

.facts { list-style: none; padding: 0; margin: 2.2em 0 0; display: grid; gap: 1em; }
.facts li { padding-left: 1em; border-left: 2px solid var(--accent-soft); color: var(--text-dim); }
.facts strong { color: var(--text); }
#start { margin-top: .6em; min-width: 220px; }

/* Test */
.topbar { display: flex; justify-content: space-between; align-items: baseline; color: var(--text-dim); font-size: .92rem; }
.bar { height: 4px; background: var(--hair); border-radius: 4px; margin: 8px 0 18px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }

/* The one pale surface: the question. Fill and shadows live on the card box
   (box-shadow), never as a filter, so the text does not cast shadows of its own. */
.card {
  color: var(--ink-on-panel);
  background: linear-gradient(var(--panel-top), var(--panel-bottom));
  border-radius: 20px;
  padding: 22px 18px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 1px 2px rgba(0, 0, 0, .45),
    0 18px 40px rgba(0, 0, 0, .35);
}
.kind { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-on-panel); margin: 0 0 .5em; font-weight: 700; }
.prompt { font-size: 1.35rem; line-height: 1.3; margin: 0 0 .7em; }
.stem { font-size: 1.5rem; line-height: 1.4; margin: 0 0 1em; font-weight: 500; }
.stem.quote::before { content: "\201C"; } .stem.quote::after { content: "\201D"; }
.gap { display: inline-block; min-width: 3.2em; border-bottom: 2px solid var(--accent-on-panel); transform: translateY(-.15em); margin: 0 .1em; }

.options { display: grid; gap: 10px; }
.option {
  display: flex; gap: 12px; align-items: baseline; text-align: left; width: 100%;
  padding: 13px 14px; min-height: 52px; border-radius: 14px;
  background: rgba(255, 255, 255, .45); border: 1px solid rgba(31, 28, 23, .18); color: var(--ink-on-panel);
  font-size: 1.04rem; line-height: 1.35;
}
.option .letter { flex: none; width: 1.5em; font-family: var(--serif); font-weight: 700; color: var(--accent-on-panel); }
.option:hover:not(:disabled) { background: rgba(255, 255, 255, .75); }
.option:disabled { cursor: default; }
.option.correct { background: rgba(120, 160, 80, .28); border-color: #5E8A3A; }
.option.wrong { background: rgba(217, 107, 92, .22); border-color: #B2493B; }
.option.dim { opacity: .55; }

.feedback { margin-top: 18px; }
.verdict { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 .25em; }
.verdict.ok { color: var(--good); } .verdict.no { color: var(--warning); }
.explain { color: var(--text); margin-bottom: 1em; }
.explain em { color: var(--accent-soft); font-style: italic; }
.feedback .btn { width: 100%; }

/* Result */
.scale { position: relative; margin: 2em 0 .4em; height: 92px; }
.scale .track { position: absolute; left: 0; right: 0; top: 34px; height: 12px; border-radius: 6px; background: rgba(239, 234, 219, .1); overflow: hidden; }
.scale .range { position: absolute; top: 34px; height: 12px; background: rgba(204, 168, 82, .45); border-radius: 6px; }
.scale .grid { position: absolute; top: 30px; height: 20px; width: 1px; background: var(--hair); }
.scale .band { position: absolute; top: 56px; transform: translateX(-50%); font-family: var(--serif); font-size: .95rem; color: var(--text-dim); }
.scale .band.here { color: var(--accent); font-weight: 700; }
.scale .pin { position: absolute; top: 26px; width: 4px; height: 28px; margin-left: -2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 3px rgba(18, 17, 14, .8); }
.scale .score { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--serif); font-size: 1.1rem; color: var(--accent); white-space: nowrap; }
.scale .end { position: absolute; top: 76px; font-size: .74rem; color: var(--text-dim); }
.scale-note { font-size: 1rem; }

.missed { margin: 2.2em 0 1.4em; }
.mcard { color: var(--ink-on-panel); background: linear-gradient(var(--panel-top), var(--panel-bottom)); border-radius: 16px; padding: 16px; margin: 0 0 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .3); }
.mcard .sent { font-family: var(--serif); font-size: 1.18rem; line-height: 1.4; margin: 0 0 .35em; }
.mcard .sent mark { background: none; color: var(--accent-on-panel); font-weight: 700; border-bottom: 2px solid var(--accent-on-panel); }
.mcard .def { font-size: .95rem; margin: 0; color: #4a4437; }
.mcard .tag { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-on-panel); font-weight: 700; margin: 0 0 .3em; }
.mcard em { font-style: italic; }
.mcard .wrongs { text-decoration: line-through; text-decoration-color: var(--alarm); }

.cta { margin: 2em 0; padding: 22px 18px; border: 1px solid var(--accent); border-radius: 20px; background: rgba(204, 168, 82, .07); }
.cta .btn { width: 100%; }
.row { display: grid; gap: 10px; }
@media (min-width: 520px) { .row { grid-template-columns: 1fr 1fr; } }

.foot { display: flex; gap: 18px; justify-content: center; padding: 20px 16px 28px; color: var(--text-dim); font-size: .85rem; }
.foot a { color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .card.swap { animation: rise .28s ease; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* Legal pages */
.legal h1 { margin-bottom: .6em; }
.legal h2 { margin-top: 1.6em; }
.legal a { color: var(--accent-soft); }
.legal code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; color: var(--accent-soft); }
.eyebrow a { color: inherit; text-decoration: none; }
mark.todo { background: rgba(237, 184, 97, .18); color: var(--warning); padding: 0 .2em; border-radius: 4px; }
.draft { padding: 10px 12px; border-left: 3px solid var(--warning); background: rgba(237, 184, 97, .08); }

/* Store badges: neutral stand-ins until the official Apple and Google artwork
   is dropped in, which has its own usage rules. */
.stores { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 1.6em 0 .4em; }
.badge { display: grid; grid-template-columns: auto; gap: 0; min-width: 160px; padding: 9px 18px 8px; border-radius: 10px; text-decoration: none; color: var(--text);
  background: #0b0a08; border: 1px solid rgba(239, 234, 219, .4); text-align: left; position: relative; }
.badge .small { font-size: .68rem; letter-spacing: .02em; color: var(--text-dim); }
.badge .big { font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.badge .soon { margin-top: 3px; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft); }
.badge[aria-disabled="true"], .btn[aria-disabled="true"] { cursor: default; }
.badge[aria-disabled="true"] { opacity: .8; }
.btn.primary[aria-disabled="true"] { opacity: .6; filter: none; }

/* The test must fit the screen it is on. The answer panel is pinned to the
   bottom edge so Next can never fall off it, and type and spacing give way on
   short viewports before anything has to scroll. */
#view-test .feedback {
  position: sticky; bottom: 0; margin: 14px -16px 0; padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(23, 22, 17, 0), rgba(23, 22, 17, .96) 22px);
}
.feedback .verdict { margin: 0 0 .1em; }
.feedback .explain { margin-bottom: .7em; }
@media (max-height: 760px) {
  main { padding-top: 14px; }
  .bar { margin: 6px 0 12px; }
  .card { padding: 16px 14px 14px; border-radius: 18px; }
  .prompt { font-size: 1.2rem; margin-bottom: .5em; }
  .stem { font-size: 1.28rem; line-height: 1.35; margin-bottom: .7em; }
  .options { gap: 8px; }
  .option { min-height: 46px; padding: 9px 12px; font-size: 1rem; }
  .kind { margin-bottom: .3em; }
  .feedback .verdict { font-size: 1.1rem; }
  .feedback .explain { font-size: .95rem; line-height: 1.4; }
}
@media (max-height: 640px) {
  .prompt { font-size: 1.1rem; }
  .stem { font-size: 1.15rem; }
  .option { min-height: 42px; padding: 7px 11px; font-size: .96rem; }
  .card { padding: 12px 12px 12px; }
}

.cta-note { font-size: .92rem; color: var(--accent-soft); margin: -.3em 0 1em; }

/* Languages: the switcher is plain links; the suggestion is one dismissible line. */
.langs { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; padding: 0 16px 28px; font-size: .88rem; color: var(--text-dim); }
.langs a { color: var(--text-dim); }
.langs [aria-current] { color: var(--accent-soft); font-weight: 600; }
.foot { padding-bottom: 10px; }
.suggest { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--hair); border-radius: 12px; font-size: .92rem; color: var(--text-dim); }
.suggest a { color: var(--accent-soft); }
.suggest .link { margin-left: auto; padding: 0 4px; font-size: 1.2rem; text-decoration: none; line-height: 1; }

/* Result actions: the words button is the same cream as the cards it opens,
   full width; share and retake share a line. */
.btn.words { width: 100%; margin: 0 0 10px; border: 0; color: var(--ink-on-panel);
  background: linear-gradient(var(--panel-top), var(--panel-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .3); }
.row.two { grid-template-columns: 1fr 1fr; gap: 10px; }
.row.two .btn { padding: 10px 12px; font-size: .95rem; line-height: 1.25; text-align: center; }

/* About the app (landing page) */
.about { margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--hair); }
.app-icon { display: block; width: 72px; height: 72px; border-radius: 22%; margin: 0 0 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.about h2 { font-size: 1.6rem; line-height: 1.2; }
.about-list { list-style: none; padding: 0; margin: 1.4em 0 1.6em; display: grid; gap: 1em; }
.about-list li { padding-left: 1em; border-left: 2px solid var(--accent-soft); color: var(--text-dim); }
.about-list strong { color: var(--text); }
.about .cta { margin: 1.4em 0 0; }

/* App screenshots: transparent webp, so they sit directly on the page. */
.hero-shot { display: block; width: min(78%, 330px); height: auto; margin: 1.6em auto 1.2em; }
.shots { display: flex; gap: 14px; margin: 1.6em -16px .6em; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.shots figure { flex: 0 0 min(58%, 230px); margin: 0; scroll-snap-align: center; text-align: center; }
.shots img { display: block; width: 100%; height: auto; }
.shots figcaption { margin-top: .5em; font-size: .88rem; color: var(--text-dim); }
.shot-note { text-align: center; margin: 0 0 1.4em; }
@media (min-width: 600px) {
  .shots { overflow: visible; margin: 1.6em 0 .6em; padding: 0; }
  .shots figure { flex: 1 1 0; }
}