/* Direction A, "Fiche": each card is a ruled index card on a cool desk. */
:root {
  --bg: #dbe3e9;
  --surface: #ffffff;
  --ink: #1d2a35;
  --muted: #586774;
  --line: #c6d6e3;
  --rule: #e2766f;
  --accent: #23486e;
  --miss: #a8322b;
  --chart: #23486e;
  --focus: #23486e;
  --font-display: "Young Serif", Georgia, serif;
  --font-body: "Figtree", system-ui, sans-serif;
}

.brand { font-size: 1.4rem; }
.tabs button[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }

/* The word sits on the title line above the red rule. The answer is written on the ruled lines. */
.card {
  --ruled: repeating-linear-gradient(to bottom, transparent 0 27px, var(--line) 27px 28px, transparent 28px 32px);
  background: var(--surface);
  border-radius: 3px;
  padding: 18px 20px 0;
  min-height: 360px;
  box-shadow: 0 1px 0 #b9c6d1, 0 10px 24px -14px rgba(29, 42, 53, 0.45);
  display: flex;
  flex-direction: column;
}
.kind span:first-child { color: var(--accent); font-weight: 600; }
.front {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 8vw, 2.5rem);
  line-height: 1.15;
  margin: 14px -20px 0;
  padding: 0 20px 12px;
  border-bottom: 2px solid var(--rule);
}
.card[data-cat="quote"] .front { font-size: 1.4rem; line-height: 1.35; }
.back-wrap, .card:not(.is-revealed)::after {
  flex: 1;
  margin: 0 -20px;
  padding: 4px 20px 32px;
  background: var(--ruled) 0 4px;
  font-size: 1.1rem;
  line-height: 32px;
}
.card:not(.is-revealed)::after { content: ""; }
.back, .example { margin: 0; }
.flag { margin: 0 0 12px; color: var(--miss); line-height: 32px; }

.reveal, form button[type="submit"], .done button {
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.rate button {
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
}
.rate button[data-rating="miss"] { border-color: var(--miss); color: var(--miss); }

.done h1, #add h1, #progress h1, #progress h2 { font-family: var(--font-display); font-weight: 400; }
.done h1 { font-size: 1.8rem; line-height: 1.2; }

.seg span { border: 1.5px solid var(--line); border-radius: 6px; background: var(--surface); }
.seg input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.field input, .field textarea, .field select { border: 1.5px solid var(--line); border-radius: 6px; background: var(--surface); }

.example-note { background: var(--surface); border-left: 3px solid var(--rule); }
.chart, .bars { background: var(--surface); padding: 14px; border-radius: 3px; }