/* RateMySpanish / RateMyEnglish — one layout for everyone: a thin header, the
   challenge card on the table, a quiet footer. Neutral greys and one indigo
   accent for the chrome; the game surfaces (.pz-*) bring their own inks. */

:root {
  --content-bg: #ffffff;
  --sidebar-bg: #fafafa;
  --fg: #1f2328;
  --muted: #6b7280;
  --faint: #9aa0a6;
  --line: #ececef;
  --line-soft: #f3f3f5;
  --accent: #5b5bd6;        /* indigo */
  --accent-hover: #4d4dc7;
  --accent-soft: #eeeefc;
  --good: #2f9e6b;
  --bad: #d6455b;
  --radius: 10px;
  --radius-lg: 14px;
  --content-max: 900px;
  --sidebar-w: 256px;
  --ground: #e9ebe8;      /* the table every card sits on — the whole page, header to footer */
  --mark-brand: #2e8b57;  /* the "sounds native" green ink */
}

* { box-sizing: border-box; }

/* min-height (not height) so the document grows with content; a fixed 100%
   height caps body at one viewport and breaks the sticky full-height sidebar on
   long pages. */
html { height: 100%; }
body { min-height: 100%; }

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

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

h1, h2, h3 { line-height: 1.25; }
h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
h3 { font-size: 1.02rem; }

/* ---------- Flash ---------- */
.flash {
  max-width: var(--content-max);
  margin: 1.5rem auto -0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-size: 0.92rem;
}
.flash-notice { background: var(--accent-soft); color: var(--accent-hover); }
.flash-alert { background: #fdecec; color: #a3271f; }

/* ---------- Cards ---------- */
.card {
  background: var(--content-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.25rem;
}
.card h2 { margin-top: 0; }
.card h3 { margin-top: 0; }

/* ---------- Buttons ---------- */
button, .btn, input[type="submit"] {
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
button:hover, .btn:hover, input[type="submit"]:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  text-decoration: none;
}
.btn-secondary {
  background: var(--content-bg);
  color: var(--fg);
  border: 1px solid var(--line);
}
.btn-secondary:hover { background: var(--line-soft); border-color: var(--line); color: var(--fg); }
.btn.small, .btn-secondary.small, button.small, input.small[type="submit"] {
  padding: 0.3rem 0.7rem;
  font-size: 0.84rem;
}
.link-button {
  background: none;
  border: none;
  color: var(--muted);
  padding: 0;
  font-size: 0.88rem;
}
.link-button:hover { background: none; color: var(--fg); text-decoration: underline; }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; align-items: center; }
/* button_to wraps its button in a <form>; let the button be the flex item so it
   lines up with sibling <a class="btn"> links instead of sitting off-center. */
.actions form { display: contents; }

/* ---------- Forms ---------- */
form .field { margin-bottom: 1rem; }
label { display: block; font-size: 0.88rem; color: var(--muted); margin-bottom: 0.35rem; }
input[type="text"], input[type="email"], input[type="password"],
select, textarea {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--fg);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 7rem; resize: vertical; }

.muted { color: var(--muted); }
.small { font-size: 0.88rem; }

/* ---------- Markdown feedback ---------- */
.feedback h1, .feedback h2, .feedback h3 { font-size: 1rem; margin: 0.8rem 0 0.3rem; }
.feedback ul { margin: 0.3rem 0 0.8rem; padding-left: 1.2rem; }
.feedback code { background: var(--accent-soft); padding: 0.1rem 0.3rem; border-radius: 4px; }

/* ---------- Highlight-and-annotate feedback ---------- */
/* Colour families: green = done well, amber = sounds-off (naturalness/word
   choice), blue = mechanical (grammar/accent/punctuation). */
.explain {
  --hl-good: var(--good);   --hl-good-soft: rgba(47, 158, 107, 0.16);
  --hl-amber: #c2861a;      --hl-amber-soft: rgba(217, 154, 43, 0.18);
  --hl-blue: var(--accent); --hl-blue-soft: var(--accent-soft);
}
.explain-verdict { font-weight: 600; font-size: 1.05rem; margin: 0 0 0.75rem; }
.explain-verdict-detail { margin: -0.45rem 0 0.9rem; color: #4b5563; font-size: 0.98rem; line-height: 1.45; }

/* The student's sentence with inline marks */
.explain-sentence {
  font-size: 1.2rem;
  line-height: 1.7;
  margin: 0 0 1.1rem;
}
.explain-sentence .hl {
  background: var(--hl-color-soft);
  color: inherit;
  padding: 0.05em 0.18em;
  border-radius: 5px;
  box-shadow: inset 0 -2px 0 var(--hl-color);
  cursor: default;
  transition: box-shadow 0.12s ease, background 0.12s ease;
}
.hl-good  { --hl-color: var(--hl-good);  --hl-color-soft: var(--hl-good-soft); }
.hl-amber { --hl-color: var(--hl-amber); --hl-color-soft: var(--hl-amber-soft); }
.hl-blue  { --hl-color: var(--hl-blue);  --hl-color-soft: var(--hl-blue-soft); }

/* Annotation cards */
.ann-list { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.1rem; }
.ann {
  display: flex;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  background: var(--line-soft);
  border-left: 3px solid var(--hl-color);
  border-radius: 8px;
  transition: box-shadow 0.12s ease, opacity 0.12s ease, transform 0.12s ease;
}
.ann-icon {
  color: var(--hl-color);
  font-weight: 700;
  line-height: 1.5;
  flex: none;
}
.ann-term { font-weight: 600; }
.ann-note { color: var(--fg); }

/* Hover/focus cross-linking (driven by highlight_controller.js) */
.explain .is-active.hl { box-shadow: inset 0 -2px 0 var(--hl-color), 0 0 0 2px var(--hl-color); }
.explain .is-active.ann {
  background: var(--hl-color-soft);
  box-shadow: 0 2px 10px rgba(31, 35, 40, 0.1);
  transform: translateX(2px);
}
.explain [data-hl] { cursor: pointer; }
.explain .is-dim { opacity: 0.4; }

/* Suggested idiomatic rewrite */
.corrected {
  background: var(--hl-good-soft, rgba(47, 158, 107, 0.16));
  border: 1px solid rgba(47, 158, 107, 0.35);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
}
.corrected-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--good);
}
.corrected-label .ann-icon { color: var(--good); }
.corrected-text { margin: 0.3rem 0 0; font-size: 1.1rem; }
.explain-closing { margin: 0; }

/* ---------- Lists ---------- */
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft); }
.list li:last-child { border-bottom: none; }
.term { font-weight: 600; }

/* ---------- Spinner ---------- */
.thinking { color: var(--muted); font-style: italic; }
.loading {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-style: italic;
}
.spinner {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: pulse 1.2s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
}
button[disabled], input[type="submit"][disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Auth ---------- */
.auth { max-width: 400px; margin: 1.5rem auto; }

/* ===================================================================
   Page chrome (header / footer) and the marketing sections (pricing, the
   "sound like a local" pages).
   =================================================================== */
/* Header, then the ground (main) fills whatever the content leaves, then the
   footer — so a short page never shows a white void under the table. */
body.marketing { background: var(--ground); min-height: 100%; display: flex; flex-direction: column; }
.marketing main { display: block; flex: 1 0 auto; }
/* Auto margins on a flex item would collapse it to content width: pin both bars. */
.m-header, .m-footer { width: 100%; }

/* Header: sits on the table like everything else — no bar, no rule. The
   wordmark is the card's serif with the game's ink mark under it (the same
   stroke the grader draws under a word that sounds native). */
.m-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.15rem 1.5rem 0.9rem;
}
.brand { position: relative; display: inline-block; color: var(--fg); line-height: 1; }
.brand__word { font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.015em; }
.brand__mark {
  position: absolute; left: 1px; right: 2px; bottom: -6px; height: 5px; border-radius: 3px;
  background: var(--mark-brand); opacity: 0.8; mix-blend-mode: multiply; transform: rotate(-1.2deg);
  transform-origin: left center;
}
.m-header .brand:hover { text-decoration: none; }
.m-header .brand:hover .brand__mark { opacity: 1; }
.m-nav { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.m-nav > * { flex: 0 1 auto; min-width: 0; }
.m-nav .locale-trigger { max-width: 100%; }
.m-nav-link { color: var(--muted); font-weight: 500; }
.m-nav-link:hover { color: var(--fg); text-decoration: none; }

/* The member menu: a <details> popover under the name — no script needed. */
.m-user { position: relative; }
.m-user__name {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.34rem 0.7rem; border: 1px solid rgba(31, 35, 40, 0.16); border-radius: 999px;
  background: rgba(250, 248, 242, 0.75); font-size: 0.85rem; color: var(--muted); max-width: 11rem;
}
.m-user__name::-webkit-details-marker { display: none; }
.m-user__name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-user__name::after { content: ""; width: 6px; height: 6px; flex: none; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint); transform: translateY(-2px) rotate(45deg); }
.m-user__name:hover, .m-user[open] .m-user__name { color: var(--fg); border-color: #e2e2e6; background: var(--sidebar-bg); }
.m-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px;
  display: flex; flex-direction: column; gap: 1px; padding: 0.3rem;
  background: var(--content-bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(17, 18, 20, 0.13);
}
.m-user__item {
  display: block; width: 100%; padding: 0.46rem 0.6rem; text-align: left;
  font: inherit; font-size: 0.9rem; color: var(--fg); background: transparent; border: 0; border-radius: 7px;
}
.m-user__item:hover { background: var(--line-soft); text-decoration: none; }
.m-user__menu form { display: contents; }
.m-user__button { color: var(--muted); cursor: pointer; }

/* Standalone pages inside the shared main (auth, contact, account): a single
   card centred under the header. */
.marketing main > .auth, .marketing main > .page-card { margin: 2rem auto 3rem; padding-left: 1rem; padding-right: 1rem; }
.page-card { max-width: 560px; }
.page-card .card + .card { margin-top: 1.25rem; }
.page-card > .actions { margin: 1.5rem 0 0; }
.page-card h1 { font-size: 1.5rem; margin: 0 0 1.2rem; letter-spacing: -0.01em; }
.page-card .field label { display: flex; gap: 0.5rem; align-items: center; }
.page-card .field label input[type="checkbox"] { width: auto; }
.plan-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.plan-line strong { font-size: 1.1rem; }

/* Keep the header from overflowing on phones (the "Get started" button was
   getting clipped off the right edge). Drop the redundant "Sign in" link
   (also in the hero + footer) and tighten spacing so brand + language + CTA fit. */
@media (max-width: 820px) {
  .m-header { padding: 0.9rem 1rem 0.7rem; gap: 0.5rem; }
  .m-header .brand { white-space: nowrap; flex: none; }
  .m-header .brand__word { font-size: 1.25rem; }
  /* The language pill keeps only its globe: locale names like "Español
     (Latinoamérica)" would otherwise push the page wider than the phone. */
  .m-header .locale-current, .m-header .locale-chevron { display: none; }
  .m-header .locale-trigger { padding: 0.34rem 0.5rem; }
  .m-header .locale-trigger .locale-globe { width: 17px; height: 17px; }
  .m-nav { gap: 0.55rem; }
  .m-nav .m-nav-link { display: none; }
  .m-nav .btn { flex: none; white-space: nowrap; padding: 0.45rem 0.8rem; }
  .m-user__name { max-width: 7.5rem; }
}
/* Belt and braces: nothing in the chrome may ever widen the page. */
body.marketing { overflow-x: clip; }

/* Shared section rhythm */
.marketing main > section { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
.section-title { text-align: center; font-size: 1.7rem; margin: 0 0 2rem; letter-spacing: -0.02em; }
.btn-lg { padding: 0.7rem 1.4rem; font-size: 1.02rem; border-radius: 10px; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
  padding-top: 3.5rem !important;
  padding-bottom: 4rem !important;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 0.8rem;
}
.hero h1 {
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
}
.lede { font-size: 1.18rem; color: var(--muted); margin: 0 0 1.6rem; max-width: 36ch; }
.lede strong { color: var(--fg); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.9rem; }
.hero-cta__form { display: contents; }

/* Feature grid */
.features { padding-top: 2rem !important; padding-bottom: 3rem !important; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.feature {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem;
  background: var(--content-bg);
}
.feature-icon {
  width: 2.1rem; height: 2.1rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 9px; font-weight: 700; margin-bottom: 0.7rem;
}
.feature h3 { margin: 0 0 0.35rem; }
.feature p { margin: 0; color: var(--muted); }
.feature strong { color: var(--fg); }

/* Final CTA */
.final-cta { text-align: center; padding: 3rem 1.5rem 4rem !important; }
.final-cta h2 { font-size: 1.9rem; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.final-cta p { margin: 0 0 1.4rem; }

/* Footer */
.m-footer {
  border-top: 1px dashed rgba(31, 35, 40, 0.28);
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 2.5rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.m-footer .brand .brand__word { font-size: 1.1rem; }
.m-footer-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.m-footer-links a { white-space: nowrap; }
@media (max-width: 640px) {
  .m-footer { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .m-footer-links { margin-left: 0; flex-direction: column; gap: 0.55rem; }
  .m-footer-links .m-footer-sister { margin-top: 0.4rem; }
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.4rem !important; }
  .hero h1 { font-size: 2.3rem; }
  /* Lead with the headline + CTA on mobile; the demo follows (DOM order). */
  .feature-grid { grid-template-columns: 1fr; }
}

/* ---------- Language switcher (globe pill + popover) ---------- */
.locale-switcher { position: relative; display: inline-block; }

.locale-trigger {
  display: inline-flex; align-items: center; gap: 0.4rem;
  width: auto; max-width: 100%;
  padding: 0.34rem 0.6rem;
  font: inherit; font-size: 0.85rem; color: var(--muted);
  background: rgba(250, 248, 242, 0.75);
  border: 1px solid rgba(31, 35, 40, 0.16);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.locale-trigger:hover { background: var(--sidebar-bg); color: var(--fg); border-color: #e2e2e6; }
.locale-trigger[aria-expanded="true"] { color: var(--fg); border-color: var(--accent); }
.locale-trigger .locale-globe { width: 15px; height: 15px; flex: none; color: var(--faint); }
.locale-trigger .locale-chevron { width: 13px; height: 13px; flex: none; color: var(--faint); }
.locale-trigger .locale-current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.locale-menu {
  position: absolute; left: 0; z-index: 60;
  min-width: 220px; margin: 0; padding: 0.3rem;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--content-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(17, 18, 20, 0.13);
}
.locale-menu[hidden] { display: none; }
.locale-menu--down { top: calc(100% + 6px); }
.locale-menu--up { bottom: calc(100% + 6px); }

.locale-option {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 0.46rem 0.6rem;
  font: inherit; font-size: 0.9rem; text-align: left; color: var(--fg);
  background: transparent; border: 0; border-radius: 7px; cursor: pointer;
}
.locale-option:hover { background: var(--line-soft); }
.locale-option:focus-visible { outline: none; background: var(--line-soft); }
.locale-option.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.locale-option .locale-check { width: 15px; height: 15px; flex: none; color: var(--accent); }

/* Right-edge placements: anchor the menu to the right so it stays on-screen. */
.m-nav .locale-menu { left: auto; right: 0; }

/* Plan cards (pricing + account) */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.plan-card { display: flex; flex-direction: column; gap: .5rem; }
.plan-card--current { outline: 2px solid var(--accent, #5b5bd6); }
.plan-card .plan-price { font-size: 1.4rem; font-weight: 600; margin: 0; }
.plan-card .btn { margin-top: auto; }
.plan-card .plan-alt { margin: -0.3rem 0 0; }
.plan-card .plan-buy { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.plan-card .plan-buy .btn { width: 100%; margin-top: 0; }

/* --- Marketing page furniture (region pages, pricing) -------------------- */
.exam-demands { max-width: 46rem; }
.exam-demands p { color: var(--muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-block; padding: 0.3rem 0.75rem; border: 1px solid #e2e2e6;
  border-radius: 999px; font-size: 0.85rem; color: var(--muted);
  background: #fff; text-decoration: none;
}
a.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.faq-list { display: grid; gap: 1.1rem; max-width: 46rem; }
.faq-list h3 { margin: 0 0 0.3rem; }
.faq-list p { margin: 0; color: var(--muted); }
.hero--single { grid-template-columns: 1fr; max-width: 46rem; }

/* --- Public pricing page --- */
.pricing-note { max-width: 46rem; margin-top: 1.2rem; }

/* --- "Sound like a local" region pages (app/views/regions/show) ---------- */
.phrase-table-wrap { overflow-x: auto; max-width: 52rem; margin-top: 1rem; }
.phrase-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.phrase-table th, .phrase-table td { text-align: left; padding: 0.55rem 0.7rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.phrase-table th { font-weight: 600; color: var(--muted); font-size: 0.85rem; }
.phrase-table td .small { display: block; }
.region-changes { max-width: 46rem; padding-left: 1.2rem; display: grid; gap: 0.6rem; color: var(--muted); }
.region-changes strong { color: var(--fg); }

/* ===================================================================
   The daily challenge — stamps. A card on a table: card stock, a serif
   sentence, ink marks under the words, and the score as a distressed round
   stamp in the variety's ink (--ink, set inline). The app's indigo chrome
   stays around it; nothing on the card uses it.
   =================================================================== */
:root {
  --table: #e9ebe8;
  --stock: #faf8f2;
  --stock-line: rgba(31, 35, 40, 0.18);
  --ink: #b8322a;
  --ink-soft: rgba(184, 50, 42, 0.12);
  --mark-g: #2e8b57; --mark-y: #d29a1b; --mark-r: #b8322a;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --narrow: 'Archivo Narrow', 'Arial Narrow', 'Helvetica Neue', sans-serif;
}
.btn-ink, .btn.btn-ink, input[type="submit"].btn-ink, button.btn-ink {
  background: #1f2328; border-color: #1f2328; color: var(--stock);
  font-family: var(--narrow); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 4px; min-height: 44px; padding: 0 1.2rem;
}
.btn-ink:hover, .btn.btn-ink:hover, input[type="submit"].btn-ink:hover, button.btn-ink:hover { background: #000; border-color: #000; color: #fff; }

.pz-game, .marketing main > section.pz-game { max-width: 560px; margin: 0 auto; padding: 1.25rem 1rem 2rem; display: flex; flex-direction: column; gap: 14px; }
.marketing main > section.pz-game { padding-top: 1.5rem; padding-bottom: 2rem; }
.marketing main { background: var(--table); }
.app .pz-game { padding-top: 0; }
.pz-muted { color: #6b7280; font-size: 0.9rem; }
.pz-table-head { margin: 0; padding: 0 4px; font-family: var(--narrow); font-size: 0.95rem; letter-spacing: 0.02em; }

/* The card */
.pz-card {
  position: relative; background: var(--stock);
  background-image: radial-gradient(rgba(31, 35, 40, 0.035) 0.6px, transparent 0.6px); background-size: 6px 6px;
  border-radius: 6px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.08), 0 14px 28px -14px rgba(31, 35, 40, 0.45), 0 30px 50px -30px rgba(31, 35, 40, 0.35);
}
.pz-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--stock-line); border-radius: 3px; pointer-events: none; }
.pz-card > * { position: relative; }
.pz-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pz-card__id { display: flex; flex-direction: column; gap: 2px; }
.pz-card__no { font-family: var(--narrow); font-size: 0.82rem; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; }
.pz-typical { font-family: var(--narrow); font-size: 0.78rem; color: #6b7280; border: 1px solid rgba(31, 35, 40, 0.25); border-radius: 3px; padding: 2px 6px; white-space: nowrap; }
.pz-instruction { margin: 0.4rem 0 0; font-size: 0.95rem; color: #6b7280; }
.pz-instruction strong { color: var(--ink); }
.pz-sentence { font-family: var(--serif); font-size: 1.7rem; line-height: 1.22; font-weight: 500; letter-spacing: -0.01em; margin: 0; color: #1f2328; text-wrap: pretty; }
.pz-sentence--result { font-size: 1.35rem; }
.pz-label { margin: 0.4rem 0 0; font-size: 0.85rem; color: #6b7280; }
.pz-card__foot { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: center; border-top: 1px dashed rgba(31, 35, 40, 0.3); padding-top: 12px; margin-top: 4px; }
/* The picker: a strip of variety seals and a difficulty dial, set into the
   card below the dashed rule like the stamp tray of a passport desk. */
.pz-config { display: flex; flex-direction: column; gap: 16px; margin-top: 2px; }
.pz-config fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pz-config__label {
  display: block; font-family: var(--narrow); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(31, 35, 40, 0.55); margin: 0 0 6px; padding: 0;
}
.pz-flags__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 0 -4px; padding: 2px 0 0; }
.pz-flag {
  position: relative; flex: 0 0 25%; max-width: 96px; min-width: 74px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px 4px;
  border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pz-flag__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
/* The cloth: a 3:2 flag with a hairline edge and a whisper of a shadow, so it
   sits on the card like a printed sticker rather than a flat icon. */
.pz-flag__cloth {
  display: block; width: 54px; height: 36px; border-radius: 3px; overflow: hidden; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(31, 35, 40, 0.18), 0 1px 2px rgba(31, 35, 40, 0.18);
  transform: scale(0.94); opacity: 0.6; filter: saturate(0.75);
  transition: transform 0.25s cubic-bezier(0.2, 1.3, 0.4, 1), opacity 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.pz-flag__cloth .flag { display: block; width: 100%; height: 100%; }
.pz-flag__name {
  font-family: var(--narrow); font-weight: 600; font-size: 0.72rem; line-height: 1.1; text-align: center;
  color: rgba(31, 35, 40, 0.55); max-width: 88px; transition: color 0.2s ease;
}
.pz-flag:hover .pz-flag__cloth { opacity: 0.9; filter: none; transform: scale(1); }
.pz-flag__input:checked ~ .pz-flag__cloth {
  opacity: 1; filter: none; transform: scale(1.1);
  box-shadow: inset 0 0 0 1px rgba(31, 35, 40, 0.18), 0 0 0 2px var(--stock), 0 0 0 3.5px var(--flag-ink), 0 3px 8px rgba(31, 35, 40, 0.25);
}
.pz-flag__input:checked ~ .pz-flag__name { color: var(--flag-ink); font-weight: 700; }
.pz-flag__input:focus-visible ~ .pz-flag__cloth { box-shadow: inset 0 0 0 1px rgba(31, 35, 40, 0.18), 0 0 0 2px var(--stock), 0 0 0 4px #1f2328; }
.pz-flag__cloth { position: relative; overflow: visible; }
/* Wide cards seat every flag in a single row (up to seven). */
@media (min-width: 520px) { .pz-flag { flex-basis: calc(100% / 7); min-width: 0; max-width: none; } }

.pz-dial { --dial-pct: 0%; }
.pz-dial__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pz-dial__value {
  font-family: var(--narrow); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); line-height: 1;
}
.pz-dial__range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 2px 0 0; background: transparent; cursor: pointer;
  --track: linear-gradient(to right, var(--ink) 0 var(--dial-pct), transparent var(--dial-pct) 100%),
           repeating-linear-gradient(to right, rgba(31, 35, 40, 0.38) 0 6px, transparent 6px 10px);
}
.pz-dial__range::-webkit-slider-runnable-track { height: 2px; background: var(--track); border-radius: 1px; }
.pz-dial__range::-moz-range-track { height: 2px; background: var(--track); border-radius: 1px; }
.pz-dial__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--stock); box-shadow: 0 0 0 1px var(--ink), 0 2px 6px rgba(31, 35, 40, 0.35);
  transition: transform 0.15s ease;
}
.pz-dial__range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--stock); box-shadow: 0 0 0 1px var(--ink), 0 2px 6px rgba(31, 35, 40, 0.35);
}
.pz-dial__range:active::-webkit-slider-thumb, .pz-dial__range:focus-visible::-webkit-slider-thumb { transform: scale(1.18); }
.pz-dial__range:focus { outline: none; }
.pz-dial__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px var(--ink-soft); }
/* Tick labels sit under the slider's stops: the thumb travels between
   11px insets, so the label row is inset the same and each tick is placed
   at its stop's percentage (--tick-pos), edges anchored to the ends. */
.pz-dial__ticks { position: relative; height: 1rem; margin: 2px 11px 0; }
.pz-dial__tick {
  position: absolute; top: 0; left: var(--tick-pos, 0%); transform: translateX(-50%); white-space: nowrap;
  font-family: var(--narrow); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(31, 35, 40, 0.42); transition: color 0.2s ease;
}
.pz-dial__tick:first-child { transform: translateX(-11px); }
.pz-dial__tick:last-child { transform: translateX(calc(-100% + 11px)); }
.pz-dial__tick.is-on { color: var(--ink); font-weight: 700; }
.pz-dial.is-dealing { opacity: 0.6; pointer-events: none; }
/* Phones: only the two ends; the current name already sits above the dial. */
@media (max-width: 420px) { .pz-dial__tick:not(:first-child):not(:last-child) { visibility: hidden; } }

/* Answer box */
.pz-play { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pz-play form { display: flex; flex-direction: column; gap: 8px; }
.pz-input {
  width: 100%; font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; padding: 0.7rem 0.85rem;
  border: 1px solid rgba(31, 35, 40, 0.35); border-radius: 4px; background: #fff; resize: vertical;
  background-image: repeating-linear-gradient(transparent 0 30px, rgba(31, 35, 40, 0.08) 30px 31px);
}
.pz-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-soft); }
.pz-play__row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }

/* Words with ink marks */
.pz-words { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.pz-word { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.pz-word__text { font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.pz-mark { height: 6px; border-radius: 2px; opacity: 0.85; mix-blend-mode: multiply; }
.pz-mark--g { background: var(--mark-g); }
.pz-mark--y { background: var(--mark-y); }
.pz-mark--r { background: var(--mark-r); }
[data-controller~="reveal"] .pz-mark { opacity: 0; transform: scaleX(0.2) !important; transition: opacity 0.25s ease, transform 0.3s ease; }
[data-controller~="reveal"] .pz-mark.is-on { opacity: 0.85; transform: none !important; }

/* Verdict + stamp */
.pz-result { position: relative; display: flex; align-items: flex-start; gap: 10px; min-height: 150px; margin-top: 4px; }
.pz-result__text { display: flex; flex-direction: column; gap: 6px; max-width: 58%; padding-top: 14px; }
.pz-verdict { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.pz-reaction { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.3; color: #1f2328; }
.pz-result--top .pz-reaction, .pz-result--good .pz-reaction { color: var(--mark-g); }
.pz-result--low .pz-reaction { color: #6b7280; }
.pz-stamp { position: absolute; right: -6px; top: -2px; width: 150px; height: 150px; }
.pz-stamp .stamp { width: 100%; height: 100%; display: block; }
[data-controller~="reveal"] .pz-stamp { opacity: 0; transform: scale(1.6) rotate(6deg); }
[data-controller~="reveal"] .pz-stamp.is-on { opacity: 1; transform: none; transition: opacity 0.18s ease-out, transform 0.28s cubic-bezier(0.2, 1.4, 0.4, 1); }
.pz-trap, .pz-focus { margin: 0; }
.pz-beat { border-top: 1px dashed rgba(31, 35, 40, 0.3); padding-top: 14px; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.pz-beat .btn-ink { display: inline-flex; align-items: center; }
.pz-beat h2 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 0.6rem; font-weight: 600; }

/* The weekly review quiz: options as full-width buttons on the card stock;
   after an answer the right one takes the green wash, a wrong pick the red,
   and the progress row records the run in the mark inks. */
.pz-quiz__progress { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; gap: 5px; flex-wrap: wrap; }
.pz-quiz__dot { width: 10px; height: 10px; border-radius: 50%; border: 1px dashed rgba(31, 35, 40, 0.35); }
.pz-quiz__dot--right { background: var(--mark-g); border-color: var(--mark-g); }
.pz-quiz__dot--wrong { background: var(--mark-r); border-color: var(--mark-r); }
.pz-quiz__dot--now { border: 2px solid var(--ink); }
.pz-quiz__prompt { font-size: 1.45rem; margin-top: 0.9rem; }
.pz-quiz__hl { text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.pz-quiz__options { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pz-quiz__option { display: flex; align-items: baseline; gap: 0.7rem; width: 100%; text-align: left; font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; color: #1f2328; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(31, 35, 40, 0.25); border-radius: 6px; padding: 0.7rem 0.85rem; }
button.pz-quiz__option--pick { cursor: pointer; }
button.pz-quiz__option--pick:hover { border-color: #1f2328; background: #fff; }
.pz-quiz__option--right { background: rgba(46, 139, 87, 0.14); border-color: var(--mark-g); }
.pz-quiz__option--wrong { background: rgba(184, 50, 42, 0.12); border-color: var(--mark-r); }
.pz-quiz__letter { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--narrow); font-weight: 700; font-size: 0.8rem; color: #faf8f2; background: #1f2328; transform: translateY(0.2rem); }
.pz-quiz__option--right .pz-quiz__letter, .pz-quiz__letter--right { background: var(--mark-g); }
.pz-quiz__option--wrong .pz-quiz__letter { background: var(--mark-r); }
.pz-quiz__verdict { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.pz-quiz__verdict--right .pz-verdict { color: var(--mark-g); }
.pz-quiz__verdict--wrong .pz-verdict { color: var(--mark-r); }
.pz-quiz__why { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.05rem; }
.pz-quiz .btn-ink { margin-top: 1rem; display: inline-flex; align-items: center; }
.pz-quiz__missed { border-top: 1px dashed rgba(31, 35, 40, 0.3); padding-top: 14px; margin-top: 0.5rem; }
.pz-quiz__missed h2 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 0.6rem; font-weight: 600; }
.pz-quiz__missed-list { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.pz-quiz__missed-list li p { margin: 0.15rem 0; }
.pz-quiz__missed-prompt { font-family: var(--serif); font-size: 1.1rem; }
.pz-quiz__missed-answer { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-family: var(--serif); font-size: 1.05rem; }

/* Challenge a friend: the standings (who is in the challenge, best first,
   the winner's rosette in gold), then the name, the link and the email row. */
.pz-challenge { border-top: 1px dashed rgba(31, 35, 40, 0.3); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 1rem; }
.pz-challenge__ask { display: flex; flex-direction: column; gap: 2px; }
.pz-challenge__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 0; }
.pz-challenge__body { margin: 0; font-size: 0.95rem; line-height: 1.45; }
.pz-challenge__form { display: flex; flex-direction: column; gap: 10px; }
.pz-challenge__name { display: flex; flex-direction: column; gap: 4px; }
.pz-challenge__name .pz-label { margin: 0; }
.pz-challenge__name .pz-subscribe__input, .pz-play__name .pz-subscribe__input { flex: none; width: 100%; max-width: 280px; }
.pz-challenge__row { display: flex; gap: 8px; flex-wrap: wrap; }
.pz-challenge__row .btn { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.pz-challenge__row .btn[hidden] { display: none; }
.pz-challenge .btn-secondary, .pz-challenge input[type="submit"].btn-secondary { background: transparent; border: 1px solid rgba(31, 35, 40, 0.3); border-radius: 4px; color: #1f2328; font-family: var(--narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pz-challenge .btn-secondary:hover, .pz-challenge input[type="submit"].btn-secondary:hover { border-color: #1f2328; background: rgba(255, 255, 255, 0.6); }
.pz-challenge__link { flex: none; width: 100%; font-size: 0.9rem; }
.pz-challenge__link[hidden] { display: none; }
.pz-challenge__note { margin: 0; }
.pz-challenge__waiting { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--narrow); }
.pz-challenge__email { color: #1f2328; overflow-wrap: anywhere; }
.pz-play__name { display: flex; flex-direction: column; gap: 4px; }
.pz-play__name .pz-label { margin: 0; }
.pz-standings { display: flex; flex-direction: column; gap: 6px; }
.pz-standings__head { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.pz-standings__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pz-standings__row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; padding: 7px 6px; border-top: 1px dashed rgba(31, 35, 40, 0.18); font-family: var(--narrow); }
.pz-standings__row:first-child { border-top: 0; }
.pz-standings__row.is-you { background: var(--ink-soft); border-radius: 6px; border-top-color: transparent; }
.pz-standings__row.is-you + .pz-standings__row { border-top-color: transparent; }
.pz-standings__mark { display: flex; justify-content: center; }
.pz-standings__name { font-size: 1.02rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-standings__name a { color: inherit; text-decoration: underline; text-decoration-color: rgba(31, 35, 40, 0.3); text-underline-offset: 3px; }
.pz-standings__score { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pz-standings .pz-grid { flex-wrap: wrap; max-width: 150px; justify-content: flex-end; }
/* A friend's translation before the visitor has played: the marks alone. */
.pz-words--hidden { gap: 8px 10px; padding-top: 6px; }
.pz-words--hidden .pz-mark { height: 12px; border-radius: 3px; }
.pz-words__note { margin: 0; }
.pz-grid { display: inline-flex; gap: 3px; }
.pz-cell { width: 12px; height: 12px; border-radius: 2px; background: var(--line); }
.pz-cell--g { background: var(--mark-g); } .pz-cell--y { background: var(--mark-y); } .pz-cell--r { background: var(--mark-r); }

/* The strip under the card: seal + streak + link to your page */
.pz-strip { display: flex; align-items: center; gap: 10px; padding: 4px 6px 0; }
.pz-strip .stamp--seal { width: 34px; height: 34px; flex: none; }
.pz-strip__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pz-strip__text strong { font-family: var(--narrow); font-size: 1rem; font-weight: 700; }
.pz-strip__link { font-family: var(--narrow); font-weight: 600; color: #2f4d9c; white-space: nowrap; }
.pz-links { max-width: 560px; margin: 0 auto; padding: 0 1rem 1.5rem; }
.pz-next { max-width: 560px; margin: 0 auto; padding: 0 1rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.pz-cta .btn { margin-right: 0.5rem; }

/* Guest "how it works" */
.pz-how, .marketing main > section.pz-how { max-width: 560px; margin: 0 auto; padding: 0.5rem 1rem 2.5rem; }
.pz-how h2 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 0.5rem; font-weight: 600; }
.pz-how ol { margin: 0 0 0.8rem; padding-left: 1.3rem; color: #6b7280; line-height: 1.5; }
.pz-how li { margin-bottom: 0.35rem; }

/* Your page: the month of stamps */
.pz-card--page { background-image: radial-gradient(rgba(31, 35, 40, 0.035) 0.6px, transparent 0.6px), repeating-linear-gradient(0deg, rgba(47, 77, 156, 0.06) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, rgba(47, 77, 156, 0.04) 0 1px, transparent 1px 9px); background-size: 6px 6px, auto, auto; padding: 20px 16px 22px; gap: 12px; }
.pz-page__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.pz-page__month { font-family: var(--serif); font-size: 1.75rem; font-weight: 500; line-height: 1.1; margin: 0; }
.pz-page__streak { display: flex; flex-direction: column; align-items: flex-end; }
.pz-page__streak-n { font-family: var(--narrow); font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--mark-r); }
.pz-page__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.pz-slot { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.pz-slot__day { position: absolute; left: 6px; top: 4px; font-family: var(--narrow); font-size: 0.72rem; color: #9aa0a6; }
.pz-slot__stamp, .pz-slot__stamp .stamp { display: block; width: 62px; height: 62px; }
.pz-slot__empty { width: 40px; height: 40px; border-radius: 50%; border: 1px dashed rgba(31, 35, 40, 0.2); display: block; }
.pz-slot__empty--link:hover { border-color: var(--ink); border-style: solid; }
.pz-slot--future { opacity: 0.45; }
.pz-page__foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed rgba(31, 35, 40, 0.3); padding-top: 12px; }
.pz-page__inks { display: flex; align-items: center; gap: 10px; }
.pz-page__ink { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: -6px; }
.pz-page__note { margin: 0 6px; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  [data-controller~="reveal"] .pz-mark, [data-controller~="reveal"] .pz-stamp { transition: none; }
}
@media (max-width: 420px) {
  .pz-card { padding: 18px 16px 16px; }
  .pz-sentence { font-size: 1.5rem; }
  .pz-stamp { width: 132px; height: 132px; right: -8px; }
  .pz-result__text { max-width: 55%; }
}
/* Marketing header on game pages: no competing call to action. */
.m-header--quiet .m-nav .btn { display: none; }
.m-header--quiet .m-nav .m-nav-link--signin { display: inline; }

/* Grading in flight: the answer box dims under card stock and an ink ring
   turns while the stepped messages walk (demo_progress_controller). */
.pz-play .demo-busy { display: none; }
.pz-play.is-busy .demo-busy {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem;
  position: absolute; inset: -6px; border-radius: 6px; background: rgba(250, 248, 242, 0.9);
  font-family: var(--narrow); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
}
.pz-play.is-busy .demo-busy .spinner {
  width: 46px; height: 46px; border: 3px dashed var(--ink); border-top-color: transparent; border-radius: 50%;
  animation: pz-ink-spin 1.1s linear infinite; opacity: 0.85; mix-blend-mode: multiply;
}
@keyframes pz-ink-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pz-play.is-busy .demo-busy .spinner { animation: none; } }

/* Below the card: the account ask and the tutor's notes, on the same card
   stock as the card (scoped so practice mode keeps the app's own cards). */
.pz-next .card {
  background: var(--stock); border: none; border-radius: 6px; padding: 20px 20px 18px; position: relative;
  background-image: radial-gradient(rgba(31, 35, 40, 0.035) 0.6px, transparent 0.6px); background-size: 6px 6px;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.08), 0 10px 22px -12px rgba(31, 35, 40, 0.4);
}
.pz-next .card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--stock-line); border-radius: 3px; pointer-events: none; }
.pz-next .card > * { position: relative; }
.pz-next .card h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.pz-next .card p.muted { color: #6b7280; }
.pz-next .btn { background: #1f2328; border-color: #1f2328; color: var(--stock); font-family: var(--narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 4px; min-height: 44px; padding: 0 1.1rem; display: inline-flex; align-items: center; }
.pz-next .btn:hover { background: #000; color: #fff; }
.pz-next .btn-secondary { background: transparent; color: #1f2328; border: 1px solid rgba(31, 35, 40, 0.35); }
.pz-next .btn-secondary:hover { background: rgba(31, 35, 40, 0.06); color: #1f2328; }
.pz-next .actions { align-items: center; }

/* The tutor as proofreader: ink-wash highlights with small circled numbers
   on the sentence, and a numbered list of notes keyed to them — no boxes,
   no rules. The corrected line sits in a soft green wash. */
.pz-next .explain { --hl-good: var(--mark-g); --hl-amber: var(--mark-y); --hl-blue: #2f4d9c; }
.pz-next .explain-verdict { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.9rem; }
.pz-next .explain-verdict-detail { font-family: var(--serif); font-size: 1.05rem; margin-top: -0.6rem; }
.pz-next .explain-sentence { font-family: var(--serif); font-size: 1.35rem; line-height: 1.7; margin: 0 0 1.1rem; }
.pz-next .explain-sentence mark.hl {
  background: transparent; border: none; box-shadow: none; text-decoration: none; border-radius: 3px; padding: 0.05em 0.12em; margin: 0 -0.04em; color: inherit;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; mix-blend-mode: multiply;
}
.pz-next .explain-sentence mark.hl-good  { background: rgba(46, 139, 87, 0.22); }
.pz-next .explain-sentence mark.hl-amber { background: rgba(210, 154, 27, 0.28); }
.pz-next .explain-sentence mark.hl-blue  { background: rgba(47, 77, 156, 0.16); }
.pz-next .explain-sentence mark.hl[data-n]::after {
  content: attr(data-n); display: inline-flex; align-items: center; justify-content: center; vertical-align: super;
  width: 1.05rem; height: 1.05rem; margin-left: 0.15rem; border-radius: 50%; font-family: var(--narrow); font-size: 0.68rem; font-weight: 700;
  color: #fff; line-height: 1; mix-blend-mode: normal;
}
.pz-next .explain-sentence mark.hl-good[data-n]::after  { background: var(--mark-g); }
.pz-next .explain-sentence mark.hl-amber[data-n]::after { background: var(--mark-y); }
.pz-next .explain-sentence mark.hl-blue[data-n]::after  { background: #2f4d9c; }
.pz-next .explain-sentence mark.hl.is-active { outline: 2px solid rgba(31, 35, 40, 0.35); outline-offset: 1px; }

.pz-next .ann-list { display: flex; flex-direction: column; gap: 0.85rem; margin: 0 0 1.1rem; }
.pz-next .ann { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.7rem; align-items: start; background: transparent; border: none; border-radius: 0; padding: 0; }
.pz-next .ann-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; margin-top: 0.1rem;
  font-family: var(--narrow); font-weight: 700; font-size: 0.85rem; color: #fff; background: #6b7280;
}
.pz-next .ann-icon[data-n] { font-size: 0; }
.pz-next .ann-icon[data-n]::after { content: attr(data-n); font-size: 0.85rem; }
.pz-next .ann.hl-good .ann-icon  { background: var(--mark-g); }
.pz-next .ann.hl-amber .ann-icon { background: var(--mark-y); }
.pz-next .ann.hl-blue .ann-icon  { background: #2f4d9c; }
.pz-next .ann-body { line-height: 1.5; }
.pz-next .ann-term { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; }
.pz-next .ann.is-dim { opacity: 0.45; }
.pz-next .ann.is-active .ann-body { text-decoration: none; }

.pz-next .corrected { background: rgba(46, 139, 87, 0.12); border: none; border-radius: 6px; padding: 0.85rem 1rem; margin: 0 0 1rem; }
.pz-next .corrected-label { font-family: var(--narrow); letter-spacing: 0.08em; font-size: 0.75rem; color: var(--mark-g); }
.pz-next .corrected-label .ann-icon { display: none; }
.pz-next .corrected-text { font-family: var(--serif); font-size: 1.25rem; margin: 0.25rem 0 0; }
.pz-next .explain-closing { font-family: var(--serif); font-style: italic; color: #4b5563; }

/* A correction the player hasn't opened: a small ink padlock, how many things
   the tutor marked (one dot each, in the ink of the mark under the word),
   and the way in. No notes are in the markup, so nothing is blurred. */
.pz-next turbo-frame.card { display: block; }
.pz-locked-note { display: flex; flex-direction: column; gap: 0.7rem; }
.pz-locked-note p { margin: 0; line-height: 1.45; }
.pz-locked-note__lead { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; display: flex; align-items: flex-start; gap: 0.5rem; }
.pz-lock { flex: none; color: #1f2328; opacity: 0.75; margin-top: 0.3em; }
.pz-locked-note__kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-family: var(--narrow); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; color: #4b5563; }
.pz-locked-note__kinds li { display: inline-flex; align-items: center; gap: 0.4rem; }
.pz-locked-note__dots { display: inline-flex; gap: 3px; }
.pz-dot { width: 10px; height: 10px; border-radius: 50%; mix-blend-mode: multiply; }
.pz-dot--y { background: var(--mark-y); }
.pz-dot--r { background: var(--mark-r); }
.pz-locked-note .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin: 0.15rem 0 0; }
.pz-locked-note .pz-subscribe__form { margin-top: 0.1rem; }

/* "Play another" under the result: the deal button behind the same ink-ring
   overlay as grading (demo_progress_controller). */
.pz-more .pz-play--deal { position: relative; margin-top: 0.4rem; }
.pz-more .pz-play--deal form { display: inline-block; }

/* The retention ask: tomorrow's challenge by email, no password. */
/* The gate: a guest's first look at their result is a short card with
   nothing on it but the ask — a serif question, the email field, and the
   wave-off underneath in the same quiet narrow face as the strip links. */
.pz-gate { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 2px; }
.pz-gate__title { font-family: var(--serif); font-size: 1.7rem; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; margin: 0; text-wrap: pretty; }
.pz-gate__body { margin: 0; font-size: 0.95rem; color: #6b7280; line-height: 1.45; }
.pz-gate__form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.pz-gate__form .pz-subscribe__input { flex: 1 1 200px; }
.pz-gate form:has(.pz-gate__skip) { display: inline-flex; align-self: flex-start; }
.pz-gate__skip, button.pz-gate__skip {
  align-self: flex-start; background: none; border: 0; border-radius: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer;
  font-family: var(--narrow); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; color: #6b7280;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(31, 35, 40, 0.3); text-decoration-thickness: 1px;
}
.pz-gate__skip:hover, button.pz-gate__skip:hover { color: #1f2328; text-decoration-color: #1f2328; background: none; border: 0; }
@media (max-width: 420px) { .pz-gate__title { font-size: 1.5rem; } }

.pz-subscribe { display: flex; flex-direction: column; gap: 0.6rem; }
.pz-subscribe--result { padding: 0; }
.pz-subscribe__text { display: flex; flex-direction: column; gap: 0.15rem; }
.pz-subscribe__text strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.pz-subscribe__form { display: flex; gap: 8px; flex-wrap: wrap; }
.pz-subscribe__input {
  flex: 1 1 200px; min-height: 44px; font: inherit; font-size: 1.05rem; padding: 0 0.85rem;
  border: 1px solid rgba(31, 35, 40, 0.35); border-radius: 4px; background: #fff;
}
.pz-subscribe__input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-soft); }
.pz-subscribe .btn-ink { white-space: nowrap; }
.pz-subscribe--home {
  margin-top: 0.25rem; padding: 14px 16px; background: var(--stock); border-radius: 6px;
  background-image: radial-gradient(rgba(31, 35, 40, 0.035) 0.6px, transparent 0.6px); background-size: 6px 6px;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.08), 0 10px 22px -12px rgba(31, 35, 40, 0.4);
}
.pz-next .pz-subscribe--result { padding: 18px 20px; background: var(--stock); border-radius: 6px;
  background-image: radial-gradient(rgba(31, 35, 40, 0.035) 0.6px, transparent 0.6px); background-size: 6px 6px;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.08), 0 10px 22px -12px rgba(31, 35, 40, 0.4); }

/* Vocabulary hints: tappable words in the sentence, and the tray of hints
   bought (a Turbo frame under the sentence). */
.pz-sentence--tappable .pz-hint-word { cursor: pointer; border-bottom: 1px dotted rgba(31, 35, 40, 0.22); border-radius: 2px; transition: background 0.15s ease; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pz-sentence--tappable .pz-hint-word:hover, .pz-sentence--tappable .pz-hint-word.is-picked { background: var(--ink-soft); border-bottom-style: solid; border-bottom-color: var(--ink); }
/* An expression ("break room") is one tap: the underline runs under the whole
   of it, spaces included, so it reads as a unit before it is touched. */
.pz-sentence--tappable .pz-hint-word--unit { border-bottom-style: dashed; border-bottom-color: rgba(31, 35, 40, 0.4); }
.pz-hints { display: block; }
.pz-hints:empty { display: none; }
.pz-hints__prompt { margin: 0.35rem 0 0; font-size: 0.85rem; }
.pz-hints__left { white-space: nowrap; }
.pz-hints__alert { margin: 0.35rem 0 0; font-size: 0.9rem; color: #b8322a; }
.pz-hints__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; margin-top: 0.5rem; padding: 0.55rem 0.7rem; background: var(--ink-soft); border-radius: 4px; }
.pz-hints__ask[hidden] { display: none; }
.pz-hints__question { font-family: var(--serif); font-size: 1.05rem; }
.pz-hints__busy { display: none; margin: 0.4rem 0 0; font-size: 0.9rem; align-items: center; gap: 0.5rem; }
.pz-hints[busy] .pz-hints__form { display: none; }
.pz-hints[busy] .pz-hints__busy { display: flex; }
.pz-hint { margin-top: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 4px; background: rgba(255, 255, 255, 0.55); border: 1px dashed rgba(31, 35, 40, 0.25); }
.pz-hint__head { margin: 0; font-size: 0.9rem; }
.pz-hint__unit { font-family: var(--serif); font-size: 1.05rem; }
.pz-hint__sense { margin: 0.15rem 0 0; font-size: 0.95rem; }
.pz-hint__options { margin: 0.35rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.2rem; }
.pz-hint__options li { font-size: 0.95rem; }
.pz-hint__term { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.pz-hint__note { margin: 0.3rem 0 0; font-size: 0.85rem; }
.pz-hints-used { margin: 0; }
.pz-hints-used__item { white-space: nowrap; }

/* Legal pages (privacy): a readable column on the table. */
.legal { max-width: 46rem; margin: 2rem auto 4rem; padding: 2rem clamp(1rem, 4vw, 2.5rem); background: var(--stock, #faf8f2); border-radius: 6px; line-height: 1.6; }
.legal h1 { font-family: var(--serif); font-size: 2.2rem; margin: 0 0 .25rem; }
.legal h2 { font-family: var(--serif); font-size: 1.35rem; margin: 2rem 0 .5rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: .4rem 0; }