/* =========================================================================
   Flashcards — default theme ("classic").
   Neutral, quiet surfaces so the flashcard is the loudest thing on screen.
   An alternative look lives in press.css and is loaded only when the user
   picks it in Settings; this file must stand alone.
   ========================================================================= */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eceef1;
  --text: #1c1f24;
  --muted: #5c6470;
  --border: #d8dce2;
  --accent: #2f6fd0;
  --accent-soft: #e5eefb;
  --accent-text: #ffffff;
  --danger: #c0392b;
  --ok-bg: #e4f5e9; --ok-text: #1d6b39;
  --warn-bg: #fdf1dc; --warn-text: #8a5b00;
  --err-bg: #fbe4e2; --err-text: #9c2a1c;
  --info-bg: #e5eefb; --info-text: #1e4d8f;
  --card-front: #ffffff;
  --card-back: #eef3fb;
  --wall-bg: #4b4f55;
  --wall-line: #f2ede3;
  --star: #e0a32e;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 20, 26, .08), 0 6px 20px rgba(16, 20, 26, .06);
}
[data-theme="dark"] {
  --bg: #14171b;
  --surface: #1d2126;
  --surface-2: #262b31;
  --text: #e8eaed;
  --muted: #9aa3ae;
  --border: #333a42;
  --accent: #5b9bff;
  --accent-soft: #17263c;
  --accent-text: #0d1117;
  --danger: #ef6b5c;
  --ok-bg: #16331f; --ok-text: #8fe0a7;
  --warn-bg: #3a2e14; --warn-text: #f0c56a;
  --err-bg: #3a1d19; --err-text: #f2a094;
  --info-bg: #17263c; --info-text: #9dc2f5;
  --card-front: #232930;
  --card-back: #1b2836;
  --wall-bg: #0f1216;
  --wall-line: #d7d2c6;
  --star: #f0c56a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); }
h1 { font-size: clamp(1.35rem, 3.5vw, 1.9rem); margin: 0 0 .3rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
h3 { font-size: 1.02rem; margin: 0 0 .3rem; }
code { background: var(--surface-2); padding: .1em .35em; border-radius: 4px; font-size: .9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.break { word-break: break-all; display: block; margin-top: .5rem; font-size: .8rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--accent);
  color: var(--accent-text); padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem clamp(.8rem, 3vw, 1.5rem);
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 700; text-decoration: none; color: var(--text); font-size: 1.05rem; }
.brand span { display: none; }
@media (min-width: 480px) { .brand span { display: inline; } }
.topnav { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
/* :not(.btn) matters — this selector is more specific than .btn-primary, so
   without it the nav's Register button would get muted text on its blue fill. */
.topnav > a:not(.btn) {
  text-decoration: none; color: var(--muted); padding: .4rem .6rem;
  border-radius: 8px; font-size: .92rem;
}
.topnav > a:not(.btn):hover,
.topnav > a:not(.btn).active { background: var(--surface-2); color: var(--text); }

.container { max-width: 960px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem); }
.page-head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: flex-start; justify-content: space-between; margin-bottom: 1.2rem;
}
.section-head {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between;
  margin: 2rem 0 .8rem;
}
.section-title { margin: 0; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(.9rem, 2.5vw, 1.4rem);
  box-shadow: var(--shadow); margin-bottom: 1.2rem;
}
.card.narrow { max-width: 520px; margin: 2rem auto; }
.card.empty { text-align: center; }

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.list-card header { display: flex; justify-content: space-between; align-items: start; gap: .5rem; }
.list-card h2, .list-card h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
.list-card a { text-decoration: none; }
.list-card a:hover { text-decoration: underline; }
.rank { color: var(--muted); font-size: .9rem; margin-right: .15rem; }
.meta { font-size: .88rem; color: var(--muted); margin: .4rem 0; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.muted { color: var(--muted); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.hint { font-size: .82rem; color: var(--muted); font-weight: 400; }
.eyebrow { font-size: .95rem; margin: 0 0 .2rem; }

/* ---------- Forms & buttons ---------- */
.stack { display: grid; gap: .9rem; }
.row { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .row { grid-template-columns: 1fr 1fr; } }
label { display: block; font-weight: 600; font-size: .92rem; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"],
input[type="number"], input:not([type]), textarea, select, input[type="file"] {
  width: 100%; margin-top: .3rem; padding: .6rem .7rem; font: inherit;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 9px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible, .flashcard:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
textarea { resize: vertical; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem .95rem; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  min-height: 42px;
}
.btn:hover { filter: brightness(.97); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-ghost { background: transparent; }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: .32rem .6rem; font-size: .85rem; min-height: 34px; }
.btn-lg { padding: .8rem 1.6rem; font-size: 1.05rem; min-height: 52px; }
.icon-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 9px;
  cursor: pointer; font-size: 1rem; line-height: 1; padding: .45rem .6rem; min-height: 42px;
}
.inline { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.card-actions.center { justify-content: center; }
.add-row { margin-top: .8rem; flex-wrap: wrap; }
.add-row input { width: auto; flex: 1 1 200px; margin-top: 0; }

fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem; margin: 0; }
legend { font-weight: 700; padding: 0 .4rem; }
.check { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; margin: .35rem 0; }
.check input { width: 20px; height: 20px; margin: .12rem 0 0; flex: none; accent-color: var(--accent); }
.checks-grid { display: grid; gap: .1rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.checks-grid.compact { gap: 0; }
.check-actions { display: flex; gap: .4rem; margin: .3rem 0 .6rem; }
.radios { display: grid; gap: .4rem; }
.option { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400;
  padding: .5rem; border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.option:hover { background: var(--surface-2); }
.option:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.option input { width: 20px; height: 20px; margin: .2rem 0 0; flex: none; accent-color: var(--accent); }
.option small { display: block; color: var(--muted); }
.option input:disabled + span { opacity: .55; }
.cap-field { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .8rem; font-weight: 400; font-size: .9rem; }
.cap-field input { width: 5.5rem; margin-top: 0; }
/* The search form takes a row of its own at full width: squeezed into the
   leftover space beside the heading it was too narrow, and the button wrapped
   onto a second line. nowrap plus min-width:0 lets the field shrink instead of
   pushing the button down, and stretch matches their heights. */
.search {
  display: flex; flex-wrap: nowrap; gap: .5rem; align-items: stretch;
  flex: 1 1 100%; width: 100%;
}
.search input[type="search"] {
  flex: 1 1 auto; min-width: 0; width: auto; margin-top: 0;
  /* --surface is white in light mode, so the field reads as a distinct box
     against the grey page rather than blending into it. In dark mode it
     resolves to the dark card colour: a literally white field there would
     leave light text on white. */
  background: var(--surface);
}
.search .btn { flex: 0 0 auto; min-height: 0; }

/* ---------- Flash & badges ---------- */
.flash { padding: .7rem .9rem; border-radius: 9px; margin-bottom: 1rem; font-size: .93rem; }
.flash-success { background: var(--ok-bg); color: var(--ok-text); }
.flash-warning { background: var(--warn-bg); color: var(--warn-text); }
.flash-error { background: var(--err-bg); color: var(--err-text); }
.flash-info { background: var(--info-bg); color: var(--info-text); }
.badge {
  display: inline-block; font-size: .74rem; font-weight: 700; padding: .18rem .5rem;
  border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
.badge-public { background: var(--ok-bg); color: var(--ok-text); }
.badge-private { background: var(--surface-2); color: var(--muted); }
.chip {
  display: inline-block; font-size: .78rem; padding: .12rem .45rem; margin: .1rem .2rem .1rem 0;
  border-radius: 999px; background: var(--surface-2); color: var(--muted);
}

/* ---------- Favourites ---------- */
.fav-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; padding: .2rem .55rem; min-height: 32px; line-height: 1;
  color: var(--muted); font-size: .9rem; display: inline-flex; align-items: center; gap: .3rem;
}
.fav-btn:hover { border-color: var(--star); color: var(--star); }
.fav-btn.is-fav { color: var(--star); border-color: var(--star); background: transparent; }
.fav-btn .star { font-size: 1rem; }
.fav-count { font-size: .78rem; }

/* ---------- Tables & lists ---------- */
.table-wrap { overflow-x: auto; }
table.entries { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.entries th, table.entries td { padding: .5rem .4rem; border-bottom: 1px solid var(--border); text-align: left; }
table.entries th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); display: block; }
.thumb-cell { width: 58px; }

.group-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.group-list li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.group-row { display: flex; gap: .4rem; align-items: center; flex: 1 1 220px; }
.group-row input { margin-top: 0; }
.count { font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }

.progress-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.progress-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.progress-right { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

.setting-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; padding: .7rem 0; border-top: 1px solid var(--border);
}
.setting-row p { margin: .2rem 0 0; }

.device-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.device-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 9px;
}
.device-list li.current { border-color: var(--accent); background: var(--accent-soft); }
.device-list p { margin: .2rem 0 0; font-size: .82rem; }

.multi-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.multi-item { border: 1px solid var(--border); border-radius: 9px; padding: .6rem .8rem; }
.multi-item:has(input[data-toggle-list]:checked) { border-color: var(--accent); background: var(--accent-soft); }
.multi-head { margin: 0; }
.multi-head span { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.multi-detail { margin: .7rem 0 .2rem 1.75rem; padding-left: .9rem; border-left: 2px solid var(--accent); }

.sample { background: var(--surface-2); padding: .7rem; border-radius: 9px; overflow-x: auto; font-size: .87rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.import-report { background: var(--surface-2); border-radius: 9px; padding: .7rem .9rem; margin-bottom: .9rem; }
.import-report .errors { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .89rem; color: var(--err-text); }
.danger-zone { border-color: var(--danger); }
.image-editor { display: grid; gap: .6rem; }
.preview { max-width: 200px; border-radius: 9px; border: 1px solid var(--border); }
.image-facts { font-size: .8rem; color: var(--muted); }
.panel-tally { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.dev-link { border: 1px dashed var(--accent); border-radius: 9px; padding: .9rem; margin: 1rem 0; }
.resend { margin-bottom: 1rem; }

/* Continue-where-you-left-off strip */
.resume-strip {
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius); background: var(--surface);
  padding: .9rem 1rem; margin-bottom: 1.4rem;
}
.resume-strip h2 { margin: 0 0 .1rem; }
.resume-list { list-style: none; padding: 0; margin: .7rem 0 0; display: grid; gap: .5rem; }
.resume-item {
  display: grid; gap: .3rem; text-decoration: none; color: var(--text);
  border: 1px solid var(--border); border-radius: 9px; padding: .6rem .8rem; background: var(--bg);
}
.resume-item:hover { border-color: var(--accent); }
.resume-title { font-weight: 600; }
.resume-meta { font-size: .8rem; color: var(--muted); }
.resume-bar { display: block; height: 5px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.resume-bar span { display: block; height: 100%; background: var(--accent); }

/* Card-style table rows on narrow screens instead of a shrunken grid. */
@media (max-width: 620px) {
  table.entries thead { display: none; }
  table.entries, table.entries tbody, table.entries tr, table.entries td { display: block; width: 100%; }
  table.entries tr {
    border: 1px solid var(--border); border-radius: 10px;
    padding: .6rem; margin-bottom: .6rem; background: var(--bg);
  }
  table.entries td { border: none; padding: .2rem 0; }
  table.entries td[data-label]::before {
    content: attr(data-label) ": "; font-weight: 700; color: var(--muted); font-size: .8rem;
  }
  table.entries td.right { text-align: left; margin-top: .4rem; }
}

/* ---------- Prison-wall tally ---------- */
.tally { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.tally-group { position: relative; display: inline-flex; gap: 4px; padding: 2px 3px; }
.tally-group i {
  display: block; width: 3px; height: 22px; background: var(--text);
  border-radius: 1px; transform: rotate(-4deg); opacity: .85;
}
.tally-group i:nth-child(2) { transform: rotate(3deg); }
.tally-group i:nth-child(3) { transform: rotate(-2deg); }
.tally-group i:nth-child(4) { transform: rotate(5deg); }
/* The fifth mark is struck diagonally across the other four. */
.tally-group i.slash {
  position: absolute; left: -3px; top: 50%; width: calc(100% + 6px); height: 3px;
  transform: translateY(-50%) rotate(-20deg);
}
.tally-count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); font-size: .85rem; }
.tally-empty { font-size: .85rem; color: var(--muted); }

/* ---------- Study screen ---------- */
.study-main {
  max-width: 1000px; margin: 0 auto; padding: .7rem clamp(.7rem, 3vw, 1.5rem) 1rem;
  display: flex; flex-direction: column; gap: .7rem;
  min-height: calc(100dvh - 58px);
}
.study-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.study-top-actions { display: flex; gap: .35rem; }
.mode-badge {
  font-size: .8rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px;
  background: var(--info-bg); color: var(--info-text);
}
.study-meters { display: flex; gap: .8rem; align-items: stretch; flex-wrap: wrap; }
.meter { flex: 1 1 260px; }
.meter-head { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .25rem; }
.progressbar {
  height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden;
  border: 1px solid var(--border);
}
.progressbar-fill {
  height: 100%; width: 0; background: var(--accent); border-radius: 999px;
  transition: width .25s ease;
}
/* Visually distinct from the progress bar: scratched into a dark wall. */
.wall {
  flex: 0 1 auto; display: flex; align-items: center; gap: .6rem;
  background: var(--wall-bg); border-radius: 10px; padding: .4rem .75rem;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 7px);
}
.wall-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #b9b3a6; }
.wall-tally .tally-group i { background: var(--wall-line); box-shadow: 0 0 2px rgba(0,0,0,.5); opacity: .95; }
.wall-tally .tally-count, .wall-tally .tally-empty { color: #b9b3a6; }

.card-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }
.card-stage > .flashcard { display: flex; flex-direction: column; }
.flashcard {
  width: 100%; max-width: 720px; aspect-ratio: 3 / 2; max-height: 62dvh;
  perspective: 1400px; cursor: pointer; border-radius: 18px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
.flashcard-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, .7, .3, 1);
}
.flashcard-inner.flipped { transform: rotateY(180deg); }
.flashcard-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  padding: clamp(1rem, 4vw, 2rem);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
  overflow: hidden; text-align: center;
}
.flashcard-face.front { background: var(--card-front); }
.flashcard-face.back { background: var(--card-back); transform: rotateY(180deg); }
.face-label {
  position: absolute; top: .8rem; left: .9rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
}
.card-source {
  position: absolute; top: .8rem; right: .9rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
}
.face-text {
  margin: 0; font-size: clamp(1.6rem, 6vw, 3.1rem); font-weight: 700;
  line-height: 1.15; overflow-wrap: anywhere;
}
/* The picture must never push the answer text off the card. */
.face-image { max-width: 100%; max-height: 60%; object-fit: contain; border-radius: 10px; }
.flip-hint { position: absolute; bottom: .7rem; font-size: .78rem; color: var(--muted); }
.study-controls { display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom); }
#next-btn { min-width: 220px; }

.pass-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(10, 12, 16, .72);
}
.pass-overlay[hidden] { display: none; }
.pass-dialog {
  background: var(--surface); border-radius: var(--radius); padding: 1.5rem;
  max-width: 420px; text-align: center; box-shadow: var(--shadow);
}
.pass-dialog .tally { justify-content: center; margin: 1rem 0; }

@media (max-width: 620px) {
  /* Stacked meters: reset the row-oriented flex basis, which would otherwise
     be read as a 260px HEIGHT once the direction becomes column. */
  .study-meters { flex-direction: column; gap: .5rem; }
  .meter { flex: 0 0 auto; }
  .wall { justify-content: space-between; }
  /* Let the card grow into the stage instead of resolving a percentage
     height against a parent that has no definite height. */
  .flashcard { aspect-ratio: auto; flex: 1 1 auto; min-height: 300px; max-height: none; }
  .card-stage { align-items: stretch; }
  .study-main { gap: .5rem; padding-bottom: .6rem; }
  .multi-detail { margin-left: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .flashcard-inner, .progressbar-fill { transition: none; }
}

/* ---------- Guest notice ---------- */
.guest-note {
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius); background: var(--surface);
  padding: .8rem 1rem; margin-bottom: 1.4rem; font-size: .93rem;
}
.guest-note p { margin: 0; }