/* ==========================================================================
   IQRA — native-feeling app shell
   Light + dark, safe-area aware, motion that can be switched off.
   ========================================================================== */

/* Fonts are self-hosted, not fetched from a font CDN. That keeps the app working
   offline and means the reader's device never talks to a third party just to
   display scripture. */

/* Quran and hadith text. */
@font-face {
  font-family: "Amiri Arabic";
  src: url("/fonts/amiri-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amiri Arabic";
  src: url("/fonts/amiri-arabic-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Only the few Arabic marks that appear inside otherwise-Latin text. System
   fonts have no glyph for the honourific ﷺ, so it rendered as an empty box.
   Scoping the face to those code points means Latin text is untouched. */
@font-face {
  font-family: "IQRA Marks";
  src: url("/fonts/amiri-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+06DE, U+FDFA, U+FDFB;
}

/* Indic scripts: Assamese and Bengali share one block, Hindi has its own.

   Without these, no font in the stack below has Bengali or Devanagari glyphs, so
   the BROWSER asks the operating system — Nirmala UI on Windows, Noto on Android,
   something else again on iOS. The same verse then changes typeface from device to
   device, and a mixed-script line can pull glyphs from two different faces at once.
   Naming the font here removes that guesswork entirely.

   The unicode-range lists come from the downloaded subsets (scripts/make-fonts.mjs
   prints them), and they are what keeps this safe: each face claims only its own
   script, so Latin text and the Arabic verse are never touched. */
@font-face {
  font-family: "Noto Sans Bengali";
  src: url("/fonts/noto-sans-bengali-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6,
    U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC,
    U+A8F1;
}
@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("/fonts/noto-sans-devanagari-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC,
    U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

:root {
  --fs: 20px;

  --accent: #0b6b3a;
  --accent-strong: #095a31;
  --accent-soft: #e7f2ec;
  --on-accent: #ffffff;

  --bg: #ffffff;
  --surface: #f6f8f6;
  --surface-2: #eef2ef;
  --text: #10150f;
  --muted: #5c6b60;
  --border: #e4eae5;
  --shadow: 0 1px 2px rgb(16 21 15 / 6%), 0 8px 24px rgb(16 21 15 / 6%);

  --green: #1a8f3c;
  --yellow: #c08a00;
  --red: #c0392b;
  --gray: #7b857d;

  --radius: 16px;
  --radius-lg: 22px;
  --appbar-h: 56px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* "IQRA Marks" sits near the end so it only supplies glyphs the system fonts
     are missing, and never overrides Latin text.

     The two Indic faces come last for the same reason: the Latin faces above them
     have no Bengali or Devanagari glyphs, so these are reached only by the scripts
     they were downloaded for — and reached BEFORE the browser would otherwise ask
     the operating system. That is what keeps the typeface the same on every
     device. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "IQRA Marks", "Noto Sans Bengali", "Noto Sans Devanagari", sans-serif;
  --font-ar: "Amiri Arabic", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #34c47a;
    --accent-strong: #2aa965;
    --accent-soft: #14251b;
    --on-accent: #04160c;

    --bg: #0a0f0c;
    --surface: #121a14;
    --surface-2: #18211a;
    --text: #edf3ee;
    --muted: #97a89c;
    --border: #1f2a22;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 35%);

    --green: #2fbf71;
    --yellow: #e0ac1c;
    --red: #e0645a;
    --gray: #8c968e;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* --------------------------------------------------------------- splash */

.splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg);
  transition: opacity 0.28s var(--ease), visibility 0.28s;
}
.splash.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-logo {
  width: 104px; height: 104px;
  border-radius: 50%;
  animation: breathe 2.4s ease-in-out infinite;
}
.splash-text { margin: 0; color: var(--muted); font-size: 15px; letter-spacing: 0.02em; }

/* ----------------------------------------------------------- access layer */

/* Shown only while <html> says this device has not been let in yet. The class
   is set before first paint, so the app underneath never flashes. */
.gate { display: none; }

html.is-locked .gate {
  /* flex + auto margins, NOT a centred grid: when the phone keyboard takes half
     the screen the content no longer fits, and a centred grid clips it at the
     top with no way to scroll to it. Here the box scrolls instead, so the Unlock
     button stays reachable with the keyboard up. */
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 140;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* --keyboard-cover is set by the layout's viewport tracker: on iOS the layer
     keeps its full height when the keyboard opens, so the covered strip is added
     as padding to keep the button on screen. Zero everywhere else. */
  padding: calc(26px + env(safe-area-inset-top)) 22px
    calc(26px + env(safe-area-inset-bottom) + var(--keyboard-cover, 0px));
  background:
    radial-gradient(120% 85% at 50% 0%, var(--accent-soft), transparent 62%),
    var(--bg);
  overscroll-behavior: contain;
}
/* The splash belongs to the app; while the gate is up it stays out of the way. */
html.is-locked .splash { display: none; }
html.is-locked, html.is-locked body { overflow: hidden; }

.gate-inner {
  /* auto margins centre it when there is room, and collapse to let the gate
     scroll when the keyboard leaves no room. */
  width: 100%;
  max-width: 358px;
  margin: auto;
  text-align: center;
}
.gate-logo {
  display: block;
  width: 92px; height: 92px;
  margin: 0 auto 14px;
  border-radius: 50%;
}
.gate-name {
  margin: 0;
  font-size: 34px;
  font-weight: 750;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.gate-sub { margin: 8px 0 26px; font-size: 14px; line-height: 1.6; color: var(--muted); }

.gate-form { text-align: left; }
.gate-label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.gate-input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.12em;
}
.gate-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.gate-error { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--red); }
.gate-form .primary-btn { margin-top: 16px; }
.gate-foot { margin: 24px 0 0; font-size: 12px; color: var(--muted); }

.gate.is-shaking .gate-inner { animation: gate-shake 0.4s var(--ease); }
@keyframes gate-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .gate.is-shaking .gate-inner { animation: none; }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.05); opacity: 1; }
}

/* --------------------------------------------------------------- appbar */

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--appbar-h);
  padding: calc(env(safe-area-inset-top) + 6px) 10px 6px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.appbar-title {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.08em;
  margin: 0 auto 0 4px;
}
.appbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  transition: background 0.15s, transform 0.12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { transform: scale(0.92); background: var(--surface-2); }

.pill-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.12s var(--ease), background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.pill-btn:active { transform: scale(0.95); background: var(--surface-2); }

.offline-bar {
  position: sticky;
  top: var(--appbar-h);
  z-index: 19;
  padding: 8px 16px;
  font-size: 13px;
  text-align: center;
  background: var(--yellow);
  color: #17130a;
}

/* --------------------------------------------------------------- layout */

main { display: block; }

.view {
  min-height: calc(100dvh - var(--appbar-h));
  padding-bottom: calc(env(safe-area-inset-bottom) + 32px);
}

.view-enter { animation: view-in 0.26s var(--ease) both; }
.view-enter-back { animation: view-in-back 0.26s var(--ease) both; }
@keyframes view-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.995); }
  to { opacity: 1; transform: none; }
}
@keyframes view-in-back {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- home view */

.view-home {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
}
.home-inner {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: view-in 0.35s var(--ease) both;
}

.brand-block { text-align: center; }
.brand-logo {
  width: 112px; height: 112px;
  border-radius: 50%;
  display: block;
  margin: 0 auto 14px;
  box-shadow: var(--shadow);
}
.brand-name {
  margin: 0;
  font-size: 40px;
  font-weight: 750;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.brand-sub { margin: 6px 0 0; color: var(--muted); font-size: 15px; }

.search { display: flex; flex-direction: column; gap: 12px; }
.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.search-field:focus-within {
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.search-icon { width: 20px; height: 20px; color: var(--muted); flex: none; }
#q {
  flex: 1;
  min-width: 0;
  padding: 15px 0;
  border: 0;
  background: transparent;
  font-size: 17px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#q::-webkit-search-cancel-button { display: none; }

.clear-btn {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--muted);
}
.clear-btn svg { width: 14px; height: 14px; }

.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 17px;
  font-weight: 650;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: transform 0.12s var(--ease), filter 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.primary-btn:hover { filter: brightness(1.06); }
.primary-btn:active { transform: scale(0.975); }
.primary-btn[disabled] { opacity: 0.55; cursor: default; transform: none; }
.primary-btn.small { width: auto; padding: 11px 20px; font-size: 15px; border-radius: 999px; }

.spinner {
  width: 17px; height: 17px;
  border: 2px solid color-mix(in srgb, var(--on-accent) 35%, transparent);
  border-top-color: var(--on-accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.lang-row label { font-size: 14px; color: var(--muted); }
.lang-select {
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 0;
  outline: none;
  text-align: right;
}

.section-label {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 650;
}
.history-head { display: flex; align-items: center; justify-content: space-between; }
.history-head .section-label { margin-bottom: 8px; }
.link-btn {
  border: 0; background: transparent; color: var(--accent);
  font-size: 13px; font-weight: 600; padding: 0 0 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 14px;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform 0.12s var(--ease), background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.chip:active { transform: scale(0.96); }

.home-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

/* -------------------------------------------------------- results view */

.view-results { padding: 0 0 32px; }

.toolbar {
  position: sticky;
  top: var(--appbar-h);
  z-index: 15;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.tool-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  transition: transform 0.12s var(--ease), background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tool-btn:active { transform: scale(0.94); background: var(--surface-2); }

.query-echo {
  max-width: 820px;
  margin: 18px auto 0;
  padding: 0 18px;
  font-size: 14px;
  color: var(--muted);
  word-break: break-word;
}

.lang-note {
  max-width: 820px;
  margin: 14px auto 0;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Raised when the writing step could not run at all. A popup rather than a
   toast, because it changes what the reader is actually looking at. */
.service-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 820px;
  margin: 14px auto 0;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--border));
  border-radius: var(--radius);
  background: var(--surface);
}
.service-note-text { flex: 1; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.service-note-text strong { display: block; margin-bottom: 3px; font-size: 14px; color: var(--text); }
.service-note-actions { display: flex; align-items: center; gap: 4px; }
.service-note-actions .pill-btn { white-space: nowrap; }

.loading-block {
  max-width: 820px;
  margin: 20px auto 0;
  padding: 0 18px;
}

.steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.step { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--muted); }
.step-text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.step-text em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--muted);
  opacity: 0.75;
}
.step-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex: none;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.step.is-active { color: var(--text); font-weight: 600; }
.step.is-active .step-dot {
  border-color: var(--accent);
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}
.step.is-active .step-text em { opacity: 1; }
.step.is-done { color: var(--muted); }
.step.is-done .step-dot { border-color: var(--accent); background: var(--accent); animation: none; }
.step.is-done .step-text em { opacity: 0; }
.step.is-done .step-dot::after {
  content: "";
  position: absolute;
  left: 2.5px; top: 0.5px;
  width: 3px; height: 6px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.step.is-error .step-dot { border-color: var(--red); background: var(--red); animation: none; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.status-line {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  min-height: 20px;
}

.progress {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.5s var(--ease);
}

.skeletons {
  max-width: 820px;
  margin: 22px auto 0;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.sk {
  display: block;
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.sk-title { height: 18px; width: 42%; }
.sk-line.short { width: 62%; }
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.results-actions {
  max-width: 820px;
  margin: 22px auto 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.results-count { font-size: 13px; font-weight: 650; color: var(--muted); }
.source-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.source-badge {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
}

/* --------------------------------------------------------------- cards */

.out { max-width: 820px; margin: 0 auto; padding: 0 18px; }

.card {
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs);
  line-height: 1.75;
  animation: view-in 0.3s var(--ease) both;
}
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.card-ref {
  margin: 0;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-transform: uppercase;
}
.card-kitab {
  font-size: 0.72em;
  color: var(--muted);
}
.grade {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.66em;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.grade.green { background: var(--green); }
.grade.yellow { background: var(--yellow); color: #1d1707; }
.grade.red { background: var(--red); }
.grade.gray { background: var(--gray); }

.ar {
  font-family: var(--font-ar);
  font-size: 1.7em;
  line-height: 2.05;
  text-align: right;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  word-break: break-word;
}

.mn { margin: 0 0 12px; }
.mn.is-pending { color: var(--muted); font-style: italic; }

.tf-wrap { margin: 0; }
.tf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 6px 0;
  font-size: 0.74em;
  font-weight: 650;
  color: var(--accent);
}
.tf-toggle svg { width: 12px; height: 12px; transition: transform 0.2s var(--ease); }
.tf-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.tf {
  margin: 8px 0 0;
  padding: 14px 16px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.88em;
  line-height: 1.8;
  color: var(--text);
}
.tf-source { display: block; margin-top: 8px; font-size: 0.72em; color: var(--muted); }

.card-foot {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.foot-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 0.68em;
  font-weight: 600;
  color: var(--muted);
  transition: transform 0.12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.foot-btn:active { transform: scale(0.94); }

/* -------------------------------------------------------------- notices */

.notice {
  max-width: 820px;
  margin: 24px auto 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.notice-title { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.notice-body { margin: 0 0 14px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.notice-body:last-child { margin-bottom: 0; }

.home-link {
  display: block;
  text-align: center;
  padding: 30px 18px 8px;
  font-size: 15px;
  font-weight: 650;
  color: var(--accent);
  text-decoration: none;
}

.disclaimer {
  max-width: 820px;
  margin: 0 auto;
  padding: 12px 18px 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 22px);
  transform: translateX(-50%) translateY(14px);
  z-index: 60;
  max-width: min(88vw, 420px);
  padding: 12px 18px;
  border-radius: 999px;
  background: #1b241d;
  color: #f2f7f3;
  font-size: 14px;
  text-align: center;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------- sheet */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(0 0 0 / 42%);
  opacity: 0;
  transition: opacity 0.24s var(--ease);
}
.sheet-backdrop.is-open { opacity: 1; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 8px 18px calc(env(safe-area-inset-bottom) + 20px);
  background: var(--bg);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgb(0 0 0 / 24%);
  transform: translateY(102%);
  transition: transform 0.3s var(--ease);
}
.sheet.is-open { transform: translateY(0); }

.sheet-grab {
  width: 40px;
  height: 5px;
  margin: 6px auto 12px;
  border-radius: 999px;
  background: var(--border);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-title { margin: 0; font-size: 17px; font-weight: 700; }
.sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.sheet-label { font-size: 15px; }
.sheet-value { font-size: 15px; font-weight: 600; color: var(--muted); }
.sheet-actions { display: flex; gap: 8px; }
.sheet-foot { margin: 16px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ------------------------------------------------------- print / motion */

@media print {
  .appbar, .toolbar, .home-link, .loading-block, .skeletons, .toast, .offline-bar,
  .disclaimer, .results-actions, .card-foot, .tf-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 13pt; }
  .card { break-inside: avoid; border-color: #ddd; }
  .ar { background: none; border-color: #ddd; }
  .tf { background: none; }
  .grade { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .query-echo { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (min-width: 700px) {
  .brand-name { font-size: 46px; }
  .card { padding: 28px 0; }
}