/* ============================================================
   The Mnemonicon — 1950s municipal public-works look.
   Cast-plaque navy, drafting-paper cream, brass and oxide.
   All signage set in Nimbus Sans (Helvetica-family grotesque);
   documents set typewriter-style. All layout, touch-target,
   and responsiveness behavior preserved from the prior design.
   ============================================================ */

@font-face {
  font-family: 'Nimbus Sans';
  src: url('fonts/NimbusSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nimbus Sans';
  src: url('fonts/NimbusSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nimbus Sans';
  src: url('fonts/NimbusSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nimbus Sans';
  src: url('fonts/NimbusSans-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}



:root {
  --cream: #f0e9d6;          /* aged drafting paper */
  --cream-dark: #e3d9bd;
  --ink: #1e3352;            /* municipal navy — the new "ink" */
  --ink-deep: #142438;
  --ink-soft: #4d5b70;
  --accent: #9c3d23;         /* oxide red — hazard/danger accents */
  --gold: #a9812e;           /* polished brass */
  --green: #4a5d3a;          /* utility drab green */
  --line: #c3b68d;
  --paper: #f7f1e0;          /* form-sheet white */
  --stencil: 'Nimbus Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --typewriter: 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  /* faint letterpress grain — two barely-there gradients */
  background-image:
    repeating-linear-gradient(0deg, rgba(30,51,82,0.022) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 0%, rgba(169,129,46,0.06), transparent 60%);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.55;
  overflow-x: hidden;                /* never allow sideways scroll */
  /* keep content clear of iPad/iPhone notches and home bars */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

main { max-width: 720px; margin: 0 auto; padding: 1rem 1.25rem 4rem; }

/* comfortable touch targets everywhere (Apple's 44px guideline) */
button {
  min-height: 44px;
  touch-action: manipulation;        /* no double-tap zoom delay on buttons */
}

/* ---------- masthead: cast bronze-and-navy plaque ---------- */
.masthead {
  text-align: center;
  padding: 1.6rem 1rem 0;
  background: var(--ink);
  color: var(--cream);
  border-top: 4px solid var(--gold);
  border-bottom: 4px solid var(--gold);
  box-shadow: inset 0 0 0 3px var(--ink-deep), inset 0 0 0 4px rgba(240,233,214,0.25),
              0 2px 6px rgba(20,36,56,0.35);
}
.masthead h1 {
  margin: 0;
  font-family: var(--stencil);
  font-weight: bold;
  font-size: 2.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
  /* letterpress: dark bite above, brass glint below */
  text-shadow: 0 -1px 0 rgba(0,0,0,0.55), 0 1px 0 rgba(169,129,46,0.35);
}
.tagline {
  margin: 0.15rem 0 0.9rem;
  font-style: italic;
  color: #cdbf9d;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

nav { display: flex; justify-content: center; gap: 0.5rem; }
.nav-btn {
  font-family: var(--stencil);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  background: none; border: none; border-bottom: 4px solid transparent;
  padding: 0.4rem 1rem; cursor: pointer; color: #b9ad8d;
}
.nav-btn.active { color: var(--cream); border-bottom-color: var(--gold); }

.badge {
  background: var(--accent); color: var(--cream);
  border-radius: 999px; padding: 0 0.5em; font-size: 0.8em;
  font-family: Georgia, serif;
  text-shadow: none;
}

/* ---------- stats: riveted gauge plates ---------- */
.stats-row {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  justify-content: center; margin: 1.25rem 0;
}
.stat {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--paper), inset 0 0 0 3px rgba(30,51,82,0.15),
              0 1px 0 rgba(20,36,56,0.25);
  padding: 0.4rem 0.9rem; text-align: center; min-width: 90px;
}
.stat b { display: block; font-size: 1.35rem; font-family: var(--stencil); font-weight: normal; }
.stat span {
  font-size: 0.68rem; color: var(--ink-soft);
  font-family: var(--stencil); text-transform: uppercase; letter-spacing: 0.1em;
}

/* ---------- streak: a quiet commendation under the gauges ---------- */
.streak-note {
  text-align: center; margin: -0.75rem 0 1rem;
  font-family: var(--stencil); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.72rem; color: var(--green);
}

/* ---------- toolbar & buttons: machine-shop labels ---------- */
.toolbar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.spacer { flex: 1; }

/* ---------- search: the card-catalog drawer ---------- */
.search-row { margin-bottom: 0.75rem; }
.search-row input { margin-top: 0; font-size: 0.95rem; }

button { font-family: inherit; cursor: pointer; }
.primary, .ghost, .tag-chip, .mode-btn, .grade-btn, .nav-btn {
  transition: background-color 120ms ease, color 120ms ease,
              border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}
.primary {
  font-family: var(--stencil);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--ink); color: var(--cream);
  border: 2px solid var(--ink-deep);
  border-radius: 2px;
  padding: 0.5rem 1.1rem; font-size: 0.95rem;
  box-shadow: inset 0 1px 0 rgba(240,233,214,0.22), 0 2px 0 rgba(20,36,56,0.4);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}
.ghost {
  font-family: var(--stencil);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.9rem;
  background: none;
  border: 2px solid var(--line);
  border-radius: 2px;
  color: var(--ink-soft);
  padding: 0.45rem 0.9rem;
  box-shadow: inset 0 0 0 1px rgba(195,182,141,0.35);
}
/* pressed-state feedback for touch (hover styles don't fire on tap) */
.primary:active {
  background: var(--accent); border-color: #6f2a17;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.35);
  transform: translateY(1px);
}
.ghost:active { border-color: var(--ink-soft); color: var(--ink); transform: translateY(1px); }
.danger { color: var(--accent); }
.danger.ghost { border-color: #b58366; }

/* ---------- tag bar & collections: stamped tags ---------- */
.tag-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.tag-chip {
  background: none; border: 2px solid var(--line); border-radius: 999px;
  padding: 0.15rem 0.8rem; font-size: 0.72rem; color: var(--ink-soft);
  font-family: var(--stencil); text-transform: uppercase; letter-spacing: 0.09em;
}
.tag-chip.active {
  background: var(--ink); border-color: var(--ink-deep); color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(240,233,214,0.2);
}
.collection-actions { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

/* ---------- piece list: the ledger ---------- */
.piece-list { list-style: none; margin: 0; padding: 0; }
.piece-list li {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--line);
  cursor: pointer; min-height: 44px;
}
.piece-list li:active { background: var(--cream-dark); }
.piece-list .p-title { font-weight: bold; flex: 1; }
.piece-list .p-source { color: var(--ink-soft); font-style: italic; font-size: 0.9rem; }
.piece-list .p-due { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.piece-list .p-due.overdue { color: var(--accent); font-weight: bold; }

.chip {
  font-size: 0.62rem; font-family: var(--stencil);
  text-transform: uppercase; letter-spacing: 0.09em;
  border: 2px solid; border-radius: 999px; padding: 0.05rem 0.6rem; white-space: nowrap;
}
.chip.learning  { color: #866418;  border-color: var(--gold); }  /* darker brass text = readable (WCAG AA) */
.chip.memorized { color: var(--green); border-color: var(--green); }
.chip.maintained{ color: var(--ink);   border-color: var(--ink); }

.empty-note { text-align: center; color: var(--ink-soft); font-style: italic; margin-top: 2.5rem; }

/* ---------- forms: filled out in triplicate ---------- */
form label {
  display: block; margin-bottom: 0.9rem;
  font-family: var(--stencil); text-transform: uppercase;
  letter-spacing: 0.07em; font-size: 0.85rem;
}
form small { font-family: Georgia, serif; text-transform: none; letter-spacing: normal; color: var(--ink-soft); }
input[type="text"], input[type="search"], select, textarea {
  display: block; width: 100%; margin-top: 0.25rem;
  font-family: Georgia, serif; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 2px solid var(--line); border-radius: 2px;
  padding: 0.5rem;
  box-shadow: inset 0 1px 3px rgba(30,51,82,0.12);
}
textarea { resize: vertical; font-family: var(--typewriter); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1.25rem; }

/* ---------- detail & recitation: the typed record ---------- */
.meta { color: var(--ink-soft); font-style: italic; margin: 0.2rem 0 1rem; }
.notes { color: var(--ink-soft); border-left: 4px solid var(--gold); padding-left: 0.8rem; }

h2 { font-family: var(--stencil); font-weight: normal; letter-spacing: 0.05em; }
h3 { font-weight: normal; }

.piece-text {
  font-family: var(--typewriter); font-size: 1rem; line-height: 1.75;
  background: var(--paper); border: 2px solid var(--line);
  box-shadow: inset 0 0 0 1px var(--paper), inset 0 0 12px rgba(30,51,82,0.05);
  padding: 1.25rem 1.5rem; white-space: pre-wrap; overflow-x: auto;
}
.recite { min-height: 8rem; }
.hidden-line { color: transparent; text-shadow: 0 0 8px var(--ink-soft); cursor: pointer; }

/* ---------- review history: the service record ---------- */
.history-panel {
  border: 2px solid var(--line); background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--paper), inset 0 0 0 3px rgba(30,51,82,0.08);
  padding: 1rem 1.25rem; margin: 1.25rem 0;
}
.history-panel h3 {
  margin: 0 0 0.25rem;
  font-family: var(--stencil); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.95rem;
}
.history-panel .meta { margin-bottom: 0.6rem; }
.h-chart {
  display: flex; align-items: flex-end; gap: 2px;
  height: 64px; border-bottom: 2px solid var(--line); padding-bottom: 1px;
}
.h-bar { flex: 1 1 auto; max-width: 14px; min-height: 4px; border-radius: 1px 1px 0 0; }
.h-again { background: var(--accent); }
.h-hard  { background: var(--gold); }
.h-good  { background: var(--green); }
.h-easy  { background: var(--ink); }

/* ---------- record & loop: the control panel ---------- */
.audio-panel {
  border: 2px solid var(--ink); background: var(--cream-dark);
  box-shadow: inset 0 0 0 1px var(--cream-dark), inset 0 0 0 3px rgba(30,51,82,0.15);
  padding: 1rem 1.25rem; margin: 1.25rem 0;
}
.audio-panel h3 {
  margin: 0 0 0.25rem;
  font-family: var(--stencil); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.95rem;
}
.audio-panel .form-actions { margin-top: 0.75rem; }
.loop-controls {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.4rem 0.5rem; margin-top: 0.85rem;
}
.loop-label {
  font-family: var(--stencil); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.68rem; color: var(--ink-soft);
}
.loop-label + .loop-group { margin-right: 0.6rem; }
.loop-group { display: flex; gap: 0.3rem; }
.loop-opt {
  background: none; border: 2px solid var(--line); border-radius: 999px;
  padding: 0.15rem 0.7rem; font-size: 0.72rem; color: var(--ink-soft);
  font-family: var(--stencil); letter-spacing: 0.05em;
  min-height: 34px;   /* inside a panel; the 44px rule is for page-level targets */
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.loop-opt.active {
  background: var(--ink); border-color: var(--ink-deep); color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(240,233,214,0.2);
}

.rec-live {
  background: var(--accent); border-color: #6f2a17;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.65; } }

#r-loop { display: block; margin: 0.75rem auto 0; }

/* ---------- review ---------- */
.mode-row { display: flex; gap: 0.4rem; margin: 0.75rem 0; }
.mode-btn {
  background: none; border: 2px solid var(--line); border-radius: 2px;
  padding: 0.35rem 0.8rem;
  font-size: 0.72rem; color: var(--ink-soft);
  font-family: var(--stencil); text-transform: uppercase; letter-spacing: 0.08em;
}
.mode-btn.active { border-color: var(--ink); color: var(--ink); background: var(--cream-dark); }

.grade-hint { text-align: center; font-style: italic; color: var(--ink-soft); margin: 1.25rem 0 0.5rem; }
.kbd-hint { font-size: 0.8em; opacity: 0.8; }
@media (hover: none) { .kbd-hint { display: none; } }  /* touch screens have no number keys handy */

#review-empty { text-align: center; }
#btn-cram { margin-top: 0.75rem; }
.review-summary {
  display: inline-block; margin: 0.25rem auto 0.75rem;
  padding: 0.5rem 1.1rem;
  font-family: var(--stencil); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.85rem; color: var(--green);
  border: 2px solid var(--green); border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(74,93,58,0.2);
}
.grade-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.grade-btn {
  padding: 0.6rem 0.25rem; font-size: 0.9rem;
  font-family: var(--stencil); text-transform: uppercase; letter-spacing: 0.06em;
  border: 2px solid var(--line); border-radius: 2px; background: var(--paper);
  box-shadow: 0 2px 0 rgba(20,36,56,0.25);
}
.grade-btn small { display: block; font-family: Georgia, serif; text-transform: none; letter-spacing: normal; font-size: 0.7rem; color: var(--ink-soft); }
.grade-btn:active { background: var(--cream-dark); transform: translateY(1px); box-shadow: none; }

/* ---------- footer ---------- */
footer {
  text-align: center; font-size: 0.8rem; color: var(--ink-soft);
  border-top: 4px double var(--gold); padding: 1rem; margin-top: 2rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* ---------- hover effects: mouse/trackpad only ----------
   On touch screens, :hover "sticks" after a tap — so these live
   behind a hover-capability check and phones/tablets never see them. */
@media (hover: hover) and (pointer: fine) {
  .primary:hover { background: var(--accent); border-color: #6f2a17; }
  .ghost:hover { border-color: var(--ink-soft); color: var(--ink); }
  .tag-chip:hover { border-color: var(--ink-soft); color: var(--ink); }
  .piece-list li:hover { background: var(--cream-dark); }
  .hidden-line:hover { text-shadow: 0 0 6px var(--ink); }
  .grade-btn.again:hover { border-color: var(--accent); color: var(--accent); }
  .grade-btn.hard:hover  { border-color: var(--gold);   color: var(--gold); }
  .grade-btn.good:hover,
  .grade-btn.easy:hover  { border-color: var(--green);  color: var(--green); }
}

/* ---------- phones ---------- */
@media (max-width: 520px) {
  .form-row { grid-template-columns: 1fr; }
  .masthead h1 { font-size: 1.65rem; }
  /* stencil caps run wide — let rows wrap and trim type on phones */
  .toolbar, .collection-actions { flex-wrap: wrap; }
  .primary { font-size: 0.85rem; padding: 0.5rem 0.85rem; }
  .ghost { font-size: 0.78rem; padding: 0.45rem 0.6rem; }
  .mode-btn { font-size: 0.64rem; padding: 0.35rem 0.5rem; letter-spacing: 0.05em; }
}

/* ---------- tablets (iPad portrait & landscape) ----------
   Give the reading column a little more air and larger recitation text. */
@media (min-width: 768px) {
  main { max-width: 780px; padding: 1.5rem 2rem 4rem; }
  .piece-text { font-size: 1.1rem; padding: 1.5rem 1.75rem; }
  .grade-btn { padding: 0.8rem 0.25rem; }
}

/* ---------- sync corner (footer) ----------
   Deliberately quiet: one small link until you open it. */
.sync-area { margin-top: 0.8rem; text-align: center; }
.sync-toggle {
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 0.8rem; color: var(--ink-soft);
  text-decoration: underline dotted; padding: 0.2rem 0.6rem;
}
.sync-toggle:active { color: var(--ink); }
.sync-panel {
  max-width: 420px; margin: 0.8rem auto 0; padding: 1rem 1.2rem;
  text-align: left; background: var(--cream-dark);
  border: 2px solid var(--line); border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(195,182,141,0.4);
  font-size: 0.92rem;
}
.sync-panel label { display: block; margin: 0.6rem 0 0.3rem; font-size: 0.85rem; color: var(--ink-soft); }
.sync-panel input {
  width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem;
  font: inherit; background: var(--paper); color: var(--ink);
  border: 2px solid var(--line); border-radius: 2px;
}
.sync-panel .form-actions { margin-top: 0.6rem; }


/* ---------- decks & flashcards (decks.js) ----------
   The study card is the same "typed record" paper as recitation;
   .flash-grade mirrors .grade-btn (kept as its own class so app.js's
   review wiring never grabs these buttons). */
.flash-face {
  font-family: Georgia, serif; font-size: 1.15rem; line-height: 1.7;
  background: var(--paper); border: 2px solid var(--line);
  box-shadow: inset 0 0 0 1px var(--paper), inset 0 0 12px rgba(30,51,82,0.05);
  padding: 1.25rem 1rem; margin: 0.75rem 0; border-radius: 2px;
  overflow-wrap: break-word;
}
.flash-back { border-color: var(--ink); }
.flash-face img { max-width: 100%; height: auto; display: block; margin: 0.5rem auto; }
.flash-face .cloze { color: var(--accent); font-weight: bold; }
.flash-face hr { border: none; border-top: 1px solid var(--line); margin: 0.7rem 0; }

.flash-grade {
  padding: 0.6rem 0.25rem; text-align: center; cursor: pointer;
  font-family: var(--stencil); text-transform: uppercase; letter-spacing: 0.06em;
  border: 2px solid var(--line); border-radius: 2px; background: var(--paper);
  color: var(--ink); font-size: 0.8rem;
}
.flash-grade small { display: block; font-family: Georgia, serif; text-transform: none; letter-spacing: normal; font-size: 0.7rem; color: var(--ink-soft); }
.flash-grade:active { background: var(--cream-dark); transform: translateY(1px); box-shadow: none; }

.pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 1rem 0; }
.pager .meta { margin: 0; }

@media (hover: hover) and (pointer: fine) {
  .flash-grade.again:hover { border-color: var(--accent); color: var(--accent); }
  .flash-grade.hard:hover  { border-color: var(--gold);   color: var(--gold); }
  .flash-grade.good:hover,
  .flash-grade.easy:hover  { border-color: var(--green);  color: var(--green); }
}

/* ---------- keyboard focus: a brass ring, only for key users ----------
   :focus-visible fires for keyboard tabbing but not for taps/clicks,
   so touch users never see a stray outline. */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- reduced motion: respect the OS setting ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- print: a clean broadside of the open piece ----------
   Print (or Save as PDF) from a piece's detail page and you get just
   the title, meta, text, and notes in plain black on white. */
@media print {
  .masthead nav, .toolbar, .search-row, .tag-bar, .collection-actions, .streak-note,
  .stats-row, .audio-panel, .form-actions, .mode-row, .grade-hint,
  .grade-row, footer, #btn-back, #btn-reveal-line, #r-loop, #btn-cram,
  #history-panel { display: none !important; }
  body { background: #fff; color: #000; }
  .masthead { background: none; color: #000; border: none; box-shadow: none; padding: 0 0 0.5rem; }
  .masthead h1 { color: #000; text-shadow: none; font-size: 1.5rem; }
  .tagline { color: #555; }
  main { max-width: none; padding: 0; }
  .piece-text { background: none; border: none; box-shadow: none; padding: 0; font-size: 12pt; }
  .meta, .notes { color: #333; }
}