/* Direction C, "Ardoise": dark slate, large type, swipe to rate. */
:root {
  --bg: #24313a;
  --surface: #2e3d47;
  --ink: #eeede6;
  --muted: #a7b2b8;
  --line: #44545f;
  --chalk: #ecc766;
  --miss: #f0907e;
  --good: #8fcfaa;
  --chart: #ecc766;
  --focus: #ecc766;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", system-ui, sans-serif;
  color-scheme: dark;
}

.brand { font-weight: 800; letter-spacing: -0.02em; }
.tabs { background: var(--surface); border-radius: 999px; padding: 3px; }
.tabs button { border-radius: 999px; padding: 6px 12px; }
.tabs button[aria-current="page"] { background: var(--ink); color: var(--bg); font-weight: 600; }

.card {
  flex: 1;
  min-height: 360px;
  background: var(--surface);
  border-radius: 22px;
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
}
.card[data-lean="miss"] { border-color: var(--miss); }
.card[data-lean="good"] { border-color: var(--good); }
.front {
  margin-top: auto;
  font-weight: 800;
  font-size: clamp(2.3rem, 11vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.card[data-cat="quote"] .front { font-weight: 600; font-size: 1.6rem; line-height: 1.25; letter-spacing: -0.01em; }
.back-wrap { margin-top: 18px; color: var(--chalk); font-size: 1.2rem; line-height: 1.4; }
.example { color: var(--muted); }
.kind span:first-child { color: var(--chalk); }
.flag { color: var(--miss); }

.swipe-hint { display: block; margin: 0; text-align: center; font-size: 0.85rem; color: var(--muted); }
#rate[hidden] + .swipe-hint { display: none; }

.reveal, form button[type="submit"], .done button {
  border: 0;
  border-radius: 999px;
  background: var(--chalk);
  color: var(--bg);
  font-weight: 800;
  font-size: 1.05rem;
}
.rate button { border: 0; border-radius: 999px; background: var(--surface); font-weight: 600; }
.rate button[data-rating="miss"] { color: var(--miss); }

.done h1 { font-weight: 800; font-size: 2.2rem; line-height: 1.05; letter-spacing: -0.02em; }
#add h1, #progress h1 { font-weight: 800; letter-spacing: -0.02em; }

.seg span { border-radius: 999px; background: var(--surface); }
.seg input:checked + span { background: var(--chalk); color: var(--bg); font-weight: 700; }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.field input, .field textarea, .field select { border: 0; border-radius: 14px; background: var(--surface); }

.example-note { background: var(--surface); border-radius: 14px; color: var(--chalk); }
.chart .dot { stroke: var(--bg); }
.tip { background: var(--chalk); color: var(--bg); }
.toast { background: var(--chalk); color: var(--bg); }