/* Modern look for the word trainers (Task 175): Karteikarten (deutsch-coach.html), Nomen, Verben, Adjektive,
   Grammatik-Regeln. Loaded last in <head>, so it restyles the shared building blocks of those pages — tabs, level
   switch, filter chips, stat tiles, the big start button, the coach line — without touching how they work.
   One font (Inter, like the rest of the app), meaning in colour (blue = due, violet = new, orange = difficult,
   green = mastered; a zero is grey), light + dark from the design-system tokens. */
:root {
  --tm-due: #2563eb; --tm-new: #7c3aed; --tm-diff: #ea580c; --tm-done: #16a34a;
  --tm-surface: var(--color-surface, #fff); --tm-ink: var(--color-ink, #0f172a); --tm-soft: var(--color-ink-soft, #64748b);
  --tm-line: var(--color-border, #e2e8f0); --tm-bg: var(--color-bg, #f8fafc); --tm-primary: var(--color-primary, #2563eb);
}
[data-theme="dark"] { --tm-due: #60a5fa; --tm-new: #a78bfa; --tm-diff: #fb923c; --tm-done: #4ade80; }

/* one font: the typewriter + condensed headline fonts made the pages look like three different apps */
.navbtn, .levelchip, .levelchip small, .togglebtn, .sectionlabel, .dashcard .num, .dashcard .lbl, .bigbtn, .bigbtn .subtext,
.coach-line, .pathhint, .levelrow, .topicrow .next, .filterlabel, .chiprow .chip, .chiprow button, .pill, .fccount, .fccount button,
.stat-card .stat-num, .stat-card .stat-lbl { font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important; }

/* ---------- tabs: one row, icon + word on one line, the active one clearly marked ---------- */
.navbar { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px !important; overflow: visible !important; padding: 5px !important; margin-bottom: 18px !important;
  background: var(--tm-surface); border: 1px solid var(--tm-line); border-radius: 16px; box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0/.05)); scrollbar-width: none; }
.navbtn { flex: none !important; min-width: 0 !important; text-align: center !important; line-height: 1.25; padding: 10px 14px !important; border: none !important; border-radius: 11px !important;
  background: transparent !important; color: var(--tm-soft) !important; box-shadow: none !important; font-size: 13.5px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; transform: none !important; display: flex !important; align-items: center; justify-content: center; gap: 4px; }
.navbtn:hover { background: color-mix(in srgb, var(--tm-primary) 9%, transparent) !important; color: var(--tm-ink) !important; }
.navbtn.active { background: var(--tm-primary) !important; color: #fff !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--tm-primary) 35%, transparent) !important; }
.navbtn.navext { color: var(--tm-primary) !important; border: 1.5px dashed color-mix(in srgb, var(--tm-primary) 55%, transparent) !important; }

/* ---------- level switch (A1 … All): a segmented control ---------- */
.levelbar { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; padding: 4px !important; background: var(--tm-surface) !important; border: 1px solid var(--tm-line) !important;
  border-radius: 14px !important; box-shadow: none !important; max-width: 700px !important; width: 100%; overflow-x: auto; }
.levelchip { flex: 1 1 0; min-width: 0 !important; border: none !important; border-radius: 10px !important; padding: 7px 6px !important; background: transparent !important;
  color: var(--tm-ink) !important; font-weight: 700 !important; font-size: 14px !important; text-align: center; box-shadow: none !important; }
.levelchip small { display: block; font-size: 10px !important; line-height: 1.2; font-weight: 500 !important; color: var(--tm-soft) !important; letter-spacing: 0 !important; }
.levelchip:hover { background: color-mix(in srgb, var(--tm-primary) 8%, transparent) !important; }
.levelchip.active { background: var(--tm-primary) !important; color: #fff !important; }
.levelchip.active small { color: rgb(255 255 255 / .85) !important; }

/* ---------- filter chips ---------- */
.togglebtn, .chiprow .chip, .chiprow button, .pill { border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  border: 1px solid var(--tm-line) !important; background: var(--tm-surface) !important; color: var(--tm-ink) !important; box-shadow: none !important; }
.togglebtn.active, .chiprow .chip.active, .chiprow button.active, .pill.active, .chiprow .chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--tm-primary) 14%, var(--tm-surface)) !important; border-color: var(--tm-primary) !important; color: var(--tm-primary) !important; }
.filterlabel { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important; color: var(--tm-soft) !important; }
.filterbox { border-radius: 16px !important; border-color: var(--tm-line) !important; background: var(--tm-surface) !important; }

/* ---------- the coach line: a calm note instead of an olive bar ---------- */
.coach-line { background: color-mix(in srgb, var(--tm-primary) 8%, var(--tm-surface)) !important; color: var(--tm-ink) !important;
  border: 1px solid color-mix(in srgb, var(--tm-primary) 22%, transparent) !important; border-left: 4px solid var(--tm-primary) !important;
  border-radius: 12px !important; padding: 12px 14px !important; font-size: 14px !important; }
.sectionlabel { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .05em !important; color: var(--tm-soft) !important; text-transform: uppercase; }

/* ---------- stat tiles: colour = meaning, a zero is grey ---------- */
.dashgrid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 16px !important; }
.dashcard, .stat-card { --k: var(--tm-soft); position: relative; text-align: left !important; background: var(--tm-surface) !important; border: 1px solid var(--tm-line) !important;
  border-radius: 14px !important; padding: 14px 14px 12px !important; overflow: hidden; box-shadow: var(--shadow-sm, none); }
.dashcard::before, .stat-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--k); }
.dashcard[data-k="due"], .stat-card[data-k="due"] { --k: var(--tm-due); }
.dashcard[data-k="new"], .stat-card[data-k="new"] { --k: var(--tm-new); }
.dashcard[data-k="diff"], .stat-card[data-k="diff"] { --k: var(--tm-diff); }
.dashcard[data-k="done"], .stat-card[data-k="done"] { --k: var(--tm-done); }
.dashcard .num, .stat-card .stat-num { font-size: 28px !important; font-weight: 800 !important; line-height: 1.1; color: var(--k) !important; letter-spacing: -.02em; }
.dashcard.zero .num, .stat-card.zero .stat-num { color: var(--tm-soft) !important; opacity: .55; }
.dashcard .lbl, .stat-card .stat-lbl { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .02em !important; color: var(--tm-ink) !important;
  text-transform: none !important; margin-top: 4px !important; line-height: 1.35; }
.dashcard .lbl small { display: block; font-size: 11.5px !important; font-weight: 400 !important; color: var(--tm-soft) !important; opacity: 1 !important; margin-top: 1px; }
.dashcard .lbl br { display: none; }
@media (max-width: 560px) { .dashgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .navbtn { font-size: 12.5px !important; padding: 9px 6px !important; } }

/* ---------- the big start button ---------- */
.bigbtn { border: none !important; border-radius: 16px !important; background: linear-gradient(120deg, var(--tm-primary), var(--tm-new)) !important; color: #fff !important;
  font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.01em !important; padding: 16px 18px !important; text-transform: none !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tm-primary) 30%, transparent) !important; transition: transform .15s ease, box-shadow .15s ease !important; }
.bigbtn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px color-mix(in srgb, var(--tm-primary) 38%, transparent) !important; }
.bigbtn:active { transform: translateY(1px) !important; }
.bigbtn .subtext { font-size: 12.5px !important; font-weight: 500 !important; opacity: .9 !important; margin-top: 4px !important; }
.bigbtn.secondary { background: var(--tm-surface) !important; color: var(--tm-ink) !important; border: 1.5px solid var(--tm-line) !important; box-shadow: none !important; }
.bigbtn.quiet { background: transparent !important; color: var(--tm-soft) !important; border: 1px dashed var(--tm-line) !important; box-shadow: none !important; }

/* ---------- today hero on the flashcard overview: progress ring + what to do now ---------- */
.today-hero { display: flex; gap: 18px; align-items: center; padding: 18px; margin-bottom: 14px; border-radius: 20px; border: 1px solid var(--tm-line);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tm-primary) 13%, var(--tm-surface)), var(--tm-surface) 60%);
  box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0/.08)); animation: tmIn .35s ease both; }
.today-hero .ring { position: relative; width: 112px; height: 112px; flex: 0 0 auto; }
.today-hero .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.today-hero .ring circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.today-hero .ring .track { stroke: color-mix(in srgb, var(--tm-soft) 18%, transparent); }
.today-hero .ring .seg { transition: stroke-dasharray .8s ease; }
.today-hero .ring .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.today-hero .ring .mid b { font-size: 24px; font-weight: 800; color: var(--tm-ink); letter-spacing: -.02em; line-height: 1; }
.today-hero .ring .mid span { font-size: 10.5px; color: var(--tm-soft); margin-top: 3px; line-height: 1.2; max-width: 80px; }
.today-hero .body { flex: 1 1 auto; min-width: 0; }
.today-hero .kicker { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tm-primary); }
.today-hero .say { font-size: 16px; line-height: 1.45; color: var(--tm-ink); margin: 4px 0 12px; }
.today-hero .legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--tm-soft); margin-top: 10px; }
.today-hero .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.today-hero .bigbtn { margin: 0 !important; width: 100%; }
@media (max-width: 560px) { .today-hero { flex-direction: column; text-align: center; padding: 16px; } .today-hero .legend { justify-content: center; } }
@keyframes tmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .today-hero, .today-hero .ring .seg { animation: none; transition: none; } }

/* progress bars by level / topic: rounded, one calm colour */
.barouter { height: 10px !important; border-radius: 999px !important; background: color-mix(in srgb, var(--tm-soft) 16%, transparent) !important; }
.barinner { border-radius: 999px !important; background: linear-gradient(90deg, var(--tm-primary), var(--tm-new)) !important; }
.levelrow { font-size: 13px !important; }

/* cards per round: the chosen number in the app's blue, not stamp red */
.fccount button[aria-pressed="true"] { background: var(--tm-primary) !important; border-color: var(--tm-primary) !important; color: #fff !important; }
.fccount button { border-color: var(--tm-line) !important; background: var(--tm-surface) !important; }

/* never wider than the phone: the padded bars count their padding inside their width */
.levelbar, .navbar, .today-hero, .dashgrid, .coach-line, .fccount { box-sizing: border-box !important; max-width: 100%; }


/* form labels (Positiv, Komparativ, Präteritum …): tap for what the term means — js/app-shell.js dcTermExplain */
.formrow .flabel[data-term] { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; font-size: 11.5px !important; padding: 6px 0; }
.formrow .flabel[data-term]::after { content: " ⓘ"; text-decoration: none; display: inline-block; margin-left: 2px; color: var(--tm-primary, #2563eb); }
.dc-term-x { margin: -2px 0 8px; padding: 9px 12px; border-radius: 10px; background: #eef4ff; border: 1px solid #c7d7fe;
  font: 13.5px/1.45 Inter, system-ui, sans-serif; color: #1e293b; text-align: left; }
.dc-term-x b { color: #1d4ed8; } .dc-term-x .ex { margin-top: 4px; font-style: italic; } .dc-term-x .ta { margin-top: 4px; color: #475569; }
:root[data-theme="dark"] .dc-term-x { background: #172036; border-color: #2c3e66; color: #e2e8f0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dc-term-x { background: #172036; border-color: #2c3e66; color: #e2e8f0; } }

/* word pictures: the card's icon box is 52–64 px (made for line icons); a picture is bigger, so the box grows with it
   instead of letting the picture spill over the word below */
.prompt .wordicon:has(> .wimg) { width: auto !important; height: auto !important; margin: 4px auto 8px !important; }

/* home tab grid: six equal tiles, icon on top, one short word below (no ragged two-line labels) */
.navbtn.navtile { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 64px; padding: 9px 4px !important; white-space: nowrap; font-weight: 700 !important; font-size: 13.5px !important;
  background: color-mix(in srgb, var(--tm-primary) 6%, transparent) !important; }
.navbtn.navtile .nic { font-size: 22px; line-height: 1; }
.navbtn.navtile .ntx { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.navbtn.navtile.active { background: var(--tm-primary) !important; }
.navbtn.navtile.navext { background: transparent !important; }