/* Priyaan Hub — shared design system. No external dependencies; works over file:// and GitHub Pages. */
:root {
  /* Light is the base palette. A theme is a set of overrides on top of it, chosen with the palette
     button in the top bar and applied as data-theme on <html> before the page paints. */
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-2: #eef0f6;
  --text: #171a26;
  --muted: #5f6875;
  --border: #e2e5ee;
  --accent: #4f6bed;
  --accent-ink: #ffffff;
  --accent-soft: rgba(79,107,237,.13);

  --ok: #1f9d55;
  --ok-soft: rgba(31,157,85,.14);
  --warn: #d98c00;
  --warn-soft: rgba(217,140,0,.16);
  --danger: #d64545;
  --danger-soft: rgba(214,69,69,.14);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -10px rgba(16,24,40,.14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Headings in a serif the device already has. It reads as more considered than the interface face,
     and because every one of these ships with the operating system, nothing is downloaded and the
     site still looks like itself offline. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  color-scheme: light;

  /* Coloured text needs more contrast than a coloured fill, so each role is mixed toward the page's
     ink (--mix-to) by its own amount. Every percentage here was measured against every app accent on
     both --surface and --surface-2: the largest value that still clears WCAG AA, then a little back.
     Changing one without re-measuring is how this palette breaks. */
  --mix-to: #000;
  --p-accent-text: 72%;
  --p-accent-fill: 78%;
  --p-ok: 76%;
  --p-warn: 66%;
  --p-danger: 84%;
}

/* ---- text size ---------------------------------------------------------------------------------
   Everything on the site is sized in rem, so one number on the root scales the whole interface: the
   type, the padding, the buttons and the gaps, all in proportion. Set before the first paint, like the
   theme, so nothing jumps. "m" is the default and writes no attribute at all. */
:root[data-size="s"]  { font-size: 93.75%; }
:root[data-size="l"]  { font-size: 112.5%; }
:root[data-size="xl"] { font-size: 125%; }

/* ---- themes ------------------------------------------------------------------------------------
   shared.js resolves the stored choice (including "system") to one of these before the first paint. */
:root[data-theme="dark"], :root[data-theme="midnight"],
:root[data-theme="forest"], :root[data-theme="ink"], :root[data-theme="dusk"] { color-scheme: dark; }
:root[data-theme="dark"] {
  --bg: #0f1117; --surface: #171a23; --surface-2: #1f232e;
  --text: #e8eaf0; --muted: #98a2b3; --border: #2a2f3c;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -12px rgba(0,0,0,.7);
  --accent-ink: #0f1117;                                      /* dark ink on a light fill reads better in the dark */
  --mix-to: #fff;
  --p-accent-text: 70%; --p-accent-fill: 80%; --p-ok: 70%; --p-warn: 78%; --p-danger: 76%;
}
:root[data-theme="midnight"] {
  --bg: #080b14; --surface: #0f1524; --surface-2: #18203a;
  --text: #dfe7fb; --muted: #9aaacb; --border: #25304f;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -14px rgba(0,0,0,.85);
  --accent-ink: #080b14;
  --mix-to: #fff;
  --p-accent-text: 70%; --p-accent-fill: 82%; --p-ok: 70%; --p-warn: 78%; --p-danger: 76%;
}
:root[data-theme="paper"] {
  --bg: #f3ece0; --surface: #fffaf1; --surface-2: #eae1d1;
  --text: #2b2417; --muted: #635941; --border: #ded2bd;
  --shadow: 0 1px 2px rgba(80,60,20,.06), 0 8px 24px -10px rgba(80,60,20,.18);
  --mix-to: #000;
  --p-accent-text: 66%; --p-accent-fill: 77%; --p-ok: 69%; --p-warn: 60%; --p-danger: 79%;
}
:root[data-theme="slate"] {
  --bg: #eef1f6; --surface: #ffffff; --surface-2: #e2e8f1;
  --text: #16202c; --muted: #54617a; --border: #d3dce8;
  --shadow: 0 1px 2px rgba(22,32,44,.06), 0 8px 24px -10px rgba(22,32,44,.16);
  --mix-to: #000;
  --p-accent-text: 72%; --p-accent-fill: 78%; --p-ok: 76%; --p-warn: 66%; --p-danger: 84%;
}
:root[data-theme="forest"] {
  --bg: #0a1310; --surface: #111f19; --surface-2: #1a2e24;
  --text: #e3efe7; --muted: #9ab5a6; --border: #234030;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 12px 30px -14px rgba(0,0,0,.8);
  --accent-ink: #0a1310;
  --mix-to: #fff;
  --p-accent-text: 62%; --p-accent-fill: 80%; --p-ok: 70%; --p-warn: 78%; --p-danger: 76%;
}
:root[data-theme="ink"] {
  --bg: #121212; --surface: #1b1b1b; --surface-2: #262626;
  --text: #ededed; --muted: #a2a2a2; --border: #343434;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 30px -14px rgba(0,0,0,.8);
  --accent-ink: #121212;
  --mix-to: #fff;
  --p-accent-text: 62%; --p-accent-fill: 80%; --p-ok: 70%; --p-warn: 78%; --p-danger: 76%;
}
:root[data-theme="dusk"] {
  --bg: #141019; --surface: #1d1826; --surface-2: #272033;
  --text: #ece7f4; --muted: #a79eba; --border: #362d45;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 12px 32px -14px rgba(0,0,0,.8);
  --accent-ink: #141019;
  --mix-to: #fff;
  --p-accent-text: 70%; --p-accent-fill: 80%; --p-ok: 70%; --p-warn: 78%; --p-danger: 76%;
}
:root[data-theme="contrast"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f0f0f0;
  --text: #000000; --muted: #3a3a3a; --border: #6b6b6b;
  --shadow: none;
  --mix-to: #000;
  --p-accent-text: 62%; --p-accent-fill: 70%; --p-ok: 70%; --p-warn: 60%; --p-danger: 78%;
}
:root[data-theme="contrast"] .card, :root[data-theme="contrast"] .btn,
:root[data-theme="contrast"] .input, :root[data-theme="contrast"] select,
:root[data-theme="contrast"] textarea { border-width: 2px; }

/* Without JavaScript nothing sets data-theme, so follow the device the way the site always did. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0f1117; --surface: #171a23; --surface-2: #1f232e;
    --text: #e8eaf0; --muted: #98a2b3; --border: #2a2f3c;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -12px rgba(0,0,0,.7);
    --accent-ink: #0f1117;
    --mix-to: #fff;
    --p-accent-text: 70%; --p-accent-fill: 80%; --p-ok: 70%; --p-warn: 78%; --p-danger: 76%;
    color-scheme: dark;
  }
}

/* Per-app accent. Set <body data-app="piano"> etc. */
body[data-app="piano"]    { --accent:#7c5cff; --accent-soft:rgba(124,92,255,.15); }
body[data-app="badges"]   { --accent:#2f8f4e; --accent-soft:rgba(47,143,78,.15); }
body[data-app="math"]     { --accent:#2f6fed; --accent-soft:rgba(47,111,237,.15); }
body[data-app="quiz"]     { --accent:#c2410c; --accent-soft:rgba(194,65,12,.15); }
body[data-app="hindi"]    { --accent:#e0701f; --accent-soft:rgba(224,112,31,.17); }
body[data-app="schedule"] { --accent:#0f9d9a; --accent-soft:rgba(15,157,154,.15); }
body[data-app="calendar"] { --accent:#d64292; --accent-soft:rgba(214,66,146,.15); }
body[data-app="ai"]       { --accent:#0d9488; --accent-soft:rgba(13,148,136,.15); }
body[data-app="python"]   { --accent:#3572a5; --accent-soft:rgba(53,114,165,.16); }
body[data-app="progress"] { --accent:#e11d48; --accent-soft:rgba(225,29,72,.15); }
body[data-app="review"]   { --accent:#9333ea; --accent-soft:rgba(147,51,234,.15); }
body[data-app="profile"]  { --accent:#a16207; --accent-soft:rgba(161,98,7,.16); }
body[data-app="spanish"]  { --accent:#b91c1c; --accent-soft:rgba(185,28,28,.15); }
body[data-app="ask"]      { --accent:#4f46e5; --accent-soft:rgba(79,70,229,.15); }
body[data-app="books"]    { --accent:#7c5a2a; --accent-soft:rgba(124,90,42,.15); }

/* Resolved per element, not once at the root, so each page's own --accent feeds the mix. */
*, *::before, *::after {
  --accent-text: color-mix(in srgb, var(--accent) var(--p-accent-text), var(--mix-to));
  --accent-fill: color-mix(in srgb, var(--accent) var(--p-accent-fill), var(--mix-to));
  --ok-text: color-mix(in srgb, var(--ok) var(--p-ok), var(--mix-to));
  --warn-text: color-mix(in srgb, var(--warn) var(--p-warn), var(--mix-to));
  --danger-text: color-mix(in srgb, var(--danger) var(--p-danger), var(--mix-to));
}
/* ---- the palette button in the top bar ---- */
.theme-wrap { position: relative; display: inline-flex; flex: none; }
#themeBtn { font-size: 1rem; line-height: 1; }
.theme-menu {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: .3rem; min-width: 12.5rem; display: grid; gap: .1rem;
}
.theme-opt, .size-opt {
  display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  font: inherit; font-size: .9rem; color: inherit; background: transparent; border: 0;
  padding: .4rem .5rem; border-radius: 7px; cursor: pointer;
}
.theme-opt:hover, .size-opt:hover { background: var(--surface-2); }
.theme-opt:focus-visible, .size-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.theme-opt.on, .size-opt.on { background: var(--accent-soft); }
.theme-opt .nm, .size-opt .nm { flex: 1; min-width: 0; }
.theme-opt .tick, .size-opt .tick { color: var(--accent-text); font-weight: 700; width: .9rem; text-align: right; }
/* a two-tone chip, so each theme can be told apart at a glance rather than by name alone */
.theme-opt .sw { width: 18px; height: 18px; border-radius: 5px; flex: none; border: 1px solid var(--border); background-size: 100% 100%; }
.sw[data-swatch="system"]   { background-image: linear-gradient(135deg, #ffffff 0 50%, #171a23 50% 100%); }
.sw[data-swatch="light"]    { background-image: linear-gradient(135deg, #ffffff 0 50%, #eef0f6 50% 100%); }
.sw[data-swatch="dark"]     { background-image: linear-gradient(135deg, #171a23 0 50%, #0f1117 50% 100%); }
.sw[data-swatch="midnight"] { background-image: linear-gradient(135deg, #18203a 0 50%, #080b14 50% 100%); }
.sw[data-swatch="paper"]    { background-image: linear-gradient(135deg, #fffaf1 0 50%, #eae1d1 50% 100%); }
.sw[data-swatch="contrast"] { background-image: linear-gradient(135deg, #ffffff 0 50%, #000000 50% 100%); }
.sw[data-swatch="slate"]    { background-image: linear-gradient(135deg, #ffffff 0 50%, #e2e8f1 50% 100%); }
.sw[data-swatch="forest"]   { background-image: linear-gradient(135deg, #1a2e24 0 50%, #0a1310 50% 100%); }
.sw[data-swatch="ink"]      { background-image: linear-gradient(135deg, #262626 0 50%, #121212 50% 100%); }
.sw[data-swatch="dusk"]     { background-image: linear-gradient(135deg, #272033 0 50%, #141019 50% 100%); }
/* ---- the name button in the top bar: set your name from any page ---- */
.who-wrap { position: relative; display: inline-flex; flex: none; }
#whoBtn { display: inline-flex; align-items: center; gap: .35rem; max-width: 9.5rem; }
#whoBtn .who-face { font-size: 1rem; line-height: 1; }
#whoBtn .who-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#whoBtn.unset { border-style: dashed; }
.who-menu {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: .6rem; width: 16rem; display: grid; gap: .45rem;
}
.who-menu label { font-size: .8rem; font-weight: 600; }
.who-menu .hint { font-size: .78rem; color: var(--muted); margin: 0; }
.who-menu .hint:empty { display: none; }
.who-menu #whoErr { color: var(--danger-text); font-weight: 600; }
.who-menu label .opt { font-weight: 400; color: var(--muted); }
.who-menu .row { display: flex; gap: .4rem; }
.who-menu .row .btn { flex: 1; }
/* A narrow phone top bar has room for the back link, the page name and two small buttons -- and no more.
   Below this width the name button keeps only its face, and the name itself lives inside the popover. */
@media (max-width: 560px) {
  #whoBtn .who-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #whoBtn { max-width: none; padding: .4rem; width: 2.1rem; height: 2.1rem; justify-content: center; }
}
@media (max-width: 400px) { .who-menu { right: -.4rem; width: min(14rem, calc(100vw - 1.6rem)); } }
/* ---- the text-size button ---- */
.size-wrap { position: relative; display: inline-flex; flex: none; }
#sizeBtn .aa { font-weight: 800; line-height: 1; letter-spacing: -.04em; }
#sizeBtn .aa small { font-size: .72em; }
.size-menu { min-width: 11.5rem; }
.size-opt .sz { width: 1.5rem; text-align: center; font-weight: 800; color: var(--muted); }
.size-opt.on .sz { color: var(--accent-text); }
.sz-s { font-size: .78rem; } .sz-m { font-size: .95rem; } .sz-l { font-size: 1.12rem; } .sz-xl { font-size: 1.3rem; }
@media print { .theme-wrap, .who-wrap, .size-wrap { display: none !important; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 1rem/1.5 var(--font); min-height: 100vh;   /* 1rem, not 16px, so the text size setting reaches the words too */
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .35em; line-height: 1.22; letter-spacing: -.012em; font-family: var(--font-display); font-weight: 600; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.22rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .75em; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.mono { font-family: var(--mono); }
.center { text-align: center; }
.hidden, [hidden] { display: none !important; }

/* Layout */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .inner {
  max-width: 1040px; margin: 0 auto; padding: .7rem 1rem;
  display: flex; align-items: center; gap: .85rem;
}
.topbar .back {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem; border-radius: 999px; color: var(--muted);
  border: 1px solid var(--border); font-size: .875rem; background: var(--surface);
}
.topbar .back:hover { color: var(--text); text-decoration: none; border-color: var(--accent); }
.topbar .title { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.1rem; }
.topbar h1.title { margin: 0; letter-spacing: normal; font-family: var(--font); font-weight: 700; }   /* the page title is the topbar name; keep h1's semantics, not its size */
.topbar .title .emoji { font-size: 1.35rem; }
.topbar .spacer { flex: 1; }
.container { max-width: 1040px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-2 > .span-2 { grid-column: 1 / -1; } }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: .6rem; }

/* Cards */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow);
}
.card + .card { margin-top: 1rem; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.card-head h2 { margin: 0; }

/* Stat tiles */
.stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stat { background: var(--surface-2); border-radius: var(--radius-sm); padding: .8rem .9rem; }
.stat .num { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: .8rem; color: var(--muted); margin-top: .15rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem .95rem; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: .925rem;
  cursor: pointer; transition: background .12s, border-color .12s, transform .06s; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent-fill); }
.btn-primary:hover { filter: brightness(1.1); background: var(--accent-fill); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); border-color: transparent; }
.btn-danger { color: var(--danger-text); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-sm { padding: .35rem .65rem; font-size: .825rem; }
.btn-icon { padding: .4rem; width: 2.1rem; height: 2.1rem; }
.btn-block { width: 100%; }

/* Inputs */
label { font-size: .85rem; color: var(--muted); font-weight: 600; display: block; margin-bottom: .25rem; }
.field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.input, select, textarea {
  width: 100%; padding: .55rem .7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit;
}
textarea { resize: vertical; min-height: 2.6rem; }
select { appearance: auto; }
input[type="number"].input { width: 6.5rem; }
input[type="range"] { width: 100%; accent-color: var(--accent); }

/* Checkbox rows */
.check {
  display: flex; align-items: flex-start; gap: .7rem; padding: .6rem .7rem;
  border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background .12s;
}
.check:hover { background: var(--surface-2); }
.check input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }
.check .txt { flex: 1; min-width: 0; }
.check.done .txt { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }

/* Pills, progress */
.pill {
  display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; background: var(--accent-soft); color: var(--accent-text); white-space: nowrap;
}
.pill.ok { background: var(--ok-soft); color: var(--ok-text); }
.pill.warn { background: var(--warn-soft); color: var(--warn-text); }
.pill.danger { background: var(--danger-soft); color: var(--danger-text); }
.pill.neutral { background: var(--surface-2); color: var(--muted); }
.progress { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.progress > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }

/* Tabs */
.tabs { display: flex; gap: .25rem; background: var(--surface-2); padding: .25rem; border-radius: var(--radius-sm); width: fit-content; max-width: 100%; overflow-x: auto; }
.tab { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: .9rem; padding: .4rem .85rem; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tab:hover { color: var(--text); }

/* Tables & lists */
.table { width: 100%; border-collapse: collapse; font-size: .925rem; }
.table th, .table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.table tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: .6rem 0; border-bottom: 1px solid var(--border); display: flex; gap: .75rem; align-items: center; }
.list li:last-child { border-bottom: 0; }
.empty { color: var(--muted); text-align: center; padding: 1.5rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: var(--bg); padding: .6rem 1rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Misc */
.divider { height: 1px; background: var(--border); margin: 1rem 0; }
.kbd { font-family: var(--mono); font-size: .8em; padding: .1em .4em; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); color: var(--text); }   /* its own colour: inside a filled button it would inherit white on light grey */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
  .topbar .title .name { display: none; }
  /* the label goes, the button stays — and it stays big enough to hit with a thumb */
  .topbar .btn .lbl { display: none; }
  .topbar .btn { min-width: 2.15rem; justify-content: center; }
  .container { padding: 1rem .75rem 4rem; }
  .card { padding: 1rem; }
}
/* The narrowest phones: the top bar carries one more control than it used to, so give back the
   padding rather than let the page scroll sideways. */
@media (max-width: 400px) {
  /* keep every button: let the bar take a second line rather than push the page sideways */
  .topbar .inner { gap: .35rem; padding: .55rem .6rem; flex-wrap: wrap; row-gap: .35rem; }
  .topbar .spacer { flex: 1 0 auto; }
  .topbar .back { padding: .3rem .5rem; }
  .topbar .title { min-width: 0; }
  .topbar .btn-sm { padding: .3rem .45rem; }
  .theme-menu { right: -.4rem; min-width: 11.5rem; }
}
@media print {
  .topbar, .no-print, .toast { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .container { max-width: none; padding: 0; }
}