:root {
  --bg: #eef3f2; --card: #fff; --ink: #14201e; --muted: #64748b; --line: #e3eae8; --field: #f1f5f4;
  --brand: #0f9d8a; --brand-2: #0b6e8a; --brand-ink: #fff; --danger: #dc2626; --ok: #16a34a; --hl: #e3f5f1;
  --grad: linear-gradient(135deg, #14b8a6 0%, #0f9d8a 45%, #0b6e8a 100%);
  --shadow-sm: 0 1px 2px rgba(15, 40, 36, .06), 0 1px 3px rgba(15, 40, 36, .05);
  --shadow: 0 2px 6px rgba(15, 40, 36, .05), 0 10px 24px -8px rgba(15, 40, 36, .12);
  --radius: 18px; --header-h: 60px; --tabbar-h: 0px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0c1312; --card: #151f1d; --ink: #e8efed; --muted: #94a3a0; --line: #24312e; --field: #1c2826;
    --brand: #2dd4bf; --brand-2: #0ea5a0; --hl: #133430; --danger: #f87171; --ok: #4ade80; --brand-ink: #04201c;
    --grad: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 50%, #0e7490 100%);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -10px rgba(0,0,0,.6); }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased; }

/* ---------- Header ---------- */
header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px;
  min-height: var(--header-h); padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  padding-top: max(8px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line); isolation: isolate; }
/* blur lives on a pseudo-element: backdrop-filter on header itself would trap the fixed tab bar inside it */
header::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
header a { color: inherit; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; letter-spacing: -.01em; color: var(--ink); }
.brand b { color: var(--brand); }
.logo { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 3px 6px rgba(15, 157, 138, .35)); }
.tabs { display: flex; gap: 4px; margin-left: auto; }
.tabs a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; color: var(--muted); font-weight: 600; font-size: .95rem; }
.tabs a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs a.active { color: var(--brand); background: var(--hl); }
header select { width: auto; min-height: 36px; padding: 4px 30px 4px 12px; border-radius: 99px; font-size: .85rem; font-weight: 600; }

/* ---------- Layout ---------- */
main { max-width: 920px; margin: 0 auto; padding: 20px 16px 16px; } /* the space for the bottom tab bar is under the footer */
h1 { font-size: 1.6rem; letter-spacing: -.02em; margin: 4px 0 16px; line-height: 1.2; }
h1 .muted { font-weight: 500; font-size: 1rem; margin-left: 4px; }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; }
.crumb { color: var(--muted); font-size: .9rem; margin: 0 0 2px; }
.crumb a { color: var(--brand); text-decoration: none; font-weight: 600; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.muted { color: var(--muted); font-size: .9rem; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row > .grow { flex: 1 1 160px; min-width: 0; }
code { background: var(--field); padding: 1px 6px; border-radius: 6px; font-size: .85em; }

/* ---------- Forms ---------- */
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { min-height: 48px; padding: 10px 16px; border: 1.5px solid transparent; border-radius: 14px;
  background: var(--field); width: 100%; transition: border-color .15s, box-shadow .15s, background .15s; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); background-color: var(--card);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
textarea { min-height: 120px; border-radius: 16px; resize: vertical; }

button, .btn { min-height: 48px; padding: 10px 20px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer;
  text-decoration: none; color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; transition: transform .1s, box-shadow .15s, background .15s, opacity .15s; }
button:active, .btn:active { transform: scale(.97); }
button:focus-visible, .btn:focus-visible, .tabs a:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
button.primary, .btn.primary { background: var(--grad); border-color: transparent; color: #fff; letter-spacing: .02em;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent); }
button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, var(--line)); }
button.small, label.btn.small { min-height: 38px; padding: 6px 14px; font-size: .875rem; border-radius: 12px; }
button:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }

/* ---------- Lists: each item is a raised row ---------- */
ul.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ul.list li { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s; }
ul.list li:has(> a.main):hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow); }
ul.list li > a.main, ul.list li > .main { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; padding: 4px 0; }
ul.list li > a.main { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
ul.list li > a.main::after { content: "›"; margin-left: auto; font-size: 1.5rem; line-height: 1; color: var(--muted); }
ul.list li > a.main strong { color: var(--ink); font-size: 1.05rem; }
.card ul.list + form { margin-top: 16px; }
.tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--hl); color: var(--brand); vertical-align: middle; }
details summary { cursor: pointer; padding: 6px 0; color: var(--brand); }

/* ---------- CSV import ---------- */
.import-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.csv-preview { margin: 4px 0 16px; padding: 16px; border-radius: 16px; background: var(--hl);
  border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, transparent); }
.csv-preview > p:first-child { margin-top: 0; }
.table-wrap { max-height: 320px; overflow: auto; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table-wrap th, .table-wrap td { padding: 8px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap th { position: sticky; top: 0; background: var(--field); color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Result entry ---------- */
#rows { padding: 10px; }
.result { display: grid; grid-template-columns: 2.2em 1fr 120px auto; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-sm); transition: border-color .2s, background .2s; }
.result:last-child { margin-bottom: 0; }
.result .rank { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 10px; background: var(--field); color: var(--muted);
  font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.result.done .rank:not(:empty) { background: var(--hl); color: var(--brand); }
.result .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.result input { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 44px; padding: 8px 12px; }
.result.saved input { border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.result.done { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.result .tap { min-width: 80px; min-height: 44px; }
.result.done .tap { opacity: .4; box-shadow: none; }

/* ---------- Timer ---------- */
.runner { position: sticky; top: calc(var(--header-h) + 8px); z-index: 4; background: var(--grad); border: 0; color: #fff;
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--brand) 75%, transparent); overflow: hidden; }
.runner::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.22), transparent 60%); }
.runner > * { position: relative; }
.clock { font-size: clamp(2.6rem, 12vw, 4.5rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: center; line-height: 1.1; }
.clock-sub { text-align: center; color: rgba(255,255,255,.85); margin: 4px 0 14px; font-size: .9rem; }
.runner button { min-width: 120px; border-radius: 99px; background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.35); color: #fff; }
.runner button.primary { background: #fff; color: var(--brand-2); border-color: #fff; box-shadow: 0 6px 16px -6px rgba(0,0,0,.35); }
@media (prefers-color-scheme: dark) { .runner button.primary { color: #0b4f5c; } }

.stats { display: flex; flex-wrap: wrap; gap: 10px; }
.stats div { background: var(--field); border-radius: 14px; padding: 8px 14px; min-width: 84px; }
.stats div b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--brand); }
.stats div .muted { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Beep test ---------- */
.runner.beep { padding-top: 14px; }
.beep-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pill { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: 99px; background: rgba(255,255,255,.2); }
.runner .beep-top button { min-width: 0; min-height: 34px; padding: 4px 12px; font-size: .8rem; }
.bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.25); overflow: hidden; margin: 10px 0 14px; }
.bar span { display: block; height: 100%; width: 0; background: #fff; border-radius: inherit; }
.beep-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.beep-meta div { background: rgba(255,255,255,.14); border-radius: 12px; padding: 8px 4px; }
.beep-meta b { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.beep-meta span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
/* Stop button behind every name: rows never move during the test, so several quick taps hit the right students */
.result.beep-row { grid-template-columns: 2.2em 1fr 84px 128px; }
.stop-btn { min-height: 52px; padding: 8px 12px; border: 0; border-radius: 14px; font-size: 1.05rem; font-weight: 800; letter-spacing: .02em;
  background: #e11d48; color: #fff; box-shadow: 0 6px 14px -6px rgba(225, 29, 72, .6); font-variant-numeric: tabular-nums; }
.stop-btn.recorded { background: var(--hl); color: var(--brand); box-shadow: none; border: 1.5px solid color-mix(in srgb, var(--brand) 35%, transparent); font-weight: 700; }
#rows:not(.live) .stop-btn:not(.recorded) { opacity: .45; box-shadow: none; }
.beep-top { gap: 8px; }
.beep-top button { margin-left: auto; }
#running:empty { display: none; }

/* ---------- Test grid ---------- */
.toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.toolbar input[type=search] { background-color: var(--card); box-shadow: var(--shadow-sm); border-color: var(--line); padding-left: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center; background-size: 20px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { min-height: 38px; padding: 6px 16px; border-radius: 99px; font-size: .875rem; flex: none; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-bottom: 20px; }
.test-card { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 14px 12px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.test-card:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c) 35%, var(--line)); }
.test-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c); }
.tc-head { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.tc-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: color-mix(in srgb, var(--c) 14%, var(--card)); color: var(--c); }
.tc-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-cat { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--c); }
/* settings / delete: quiet icon buttons in the corner */
.tc-tools { margin-left: auto; display: flex; gap: 2px; }
.tc-tool { display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--muted); box-shadow: none; }
.tc-tool:hover, .tc-tool:focus-visible { background: var(--field); color: var(--ink); }
.tc-tool.danger:hover { color: var(--danger); }
.tc-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.test-card h3 { margin: 2px 0 0; font-size: 1rem; line-height: 1.3; }
.tc-desc { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 2px; }
.tc-tags .tag { background: var(--field); color: var(--muted); font-size: .7rem; padding: 1px 8px; }
/* slim footer: compact buttons instead of full-size form buttons */
/* "Klasse zuweisen" on its own line, "Ansehen" and "Starten" side by side below it: fits every card width */
.tc-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--line); }
.test-card .tc-actions .tc-btn.primary { flex: 1 1 100%; }
.test-card .tc-actions .tc-btn:not(.primary) { flex: 1 1 0; min-width: 0; justify-content: center; }
.tc-btn { min-height: 36px; padding: 6px 12px; border-radius: 10px; font-size: .85rem; font-weight: 600; gap: 6px; box-shadow: none; }
.tc-btn.primary { flex: 1; box-shadow: none; letter-spacing: 0; }
.tc-btn:not(.primary) { background: none; color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.tc-btn:not(.primary):hover { background: var(--hl); }
.tc-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Class grid ---------- */
/* Same card as the test grid (test-card / tc-*); only the class-specific bits here */
.cc-badge { font-size: .78rem; font-weight: 800; letter-spacing: -.01em; }
.class-card h3 a { color: inherit; text-decoration: none; }
.class-card h3 a:hover { color: var(--c); }
.tc-btn:disabled { opacity: .4; }
.add-card { border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, var(--line)); background: color-mix(in srgb, var(--brand) 4%, var(--card)); box-shadow: none; }
.add-card::before { display: none; }
.add-card input { min-height: 38px; padding: 6px 12px; border-radius: 10px; font-size: .9rem; background-color: var(--card); }
.add-card .tc-actions { margin-top: auto; }

/* ---------- Assign sheet ---------- */
dialog.sheet { border: 0; padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); border-radius: 24px;
  background: var(--card); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); }
dialog.sheet::backdrop { background: rgba(10, 20, 18, .45); backdrop-filter: blur(3px); }
dialog.sheet form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sheet-head p { margin: 0; }
.sheet-head h3 { margin: 2px 0 0; font-size: 1.2rem; }
.icon-btn { min-height: 40px; min-width: 40px; padding: 0; border-radius: 99px; border: 0; background: var(--field); flex: none; }
.class-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height: 40dvh; overflow-y: auto; padding: 2px; }
.class-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer;
  transition: border-color .15s, background .15s; }
.class-opt input { width: 20px; min-height: 0; height: 20px; margin: 0; accent-color: var(--brand); flex: none; }
.class-opt span { display: flex; flex-direction: column; min-width: 0; }
.class-opt small { color: var(--muted); font-size: .78rem; }
.class-opt:has(input:checked) { border-color: var(--brand); background: var(--hl); }
.class-opt.empty { opacity: .5; cursor: default; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--muted); }

/* ---------- Toast ---------- */
#toast { position: fixed; left: 50%; bottom: calc(20px + var(--tabbar-h) + env(safe-area-inset-bottom)); transform: translate(-50%, 10px); z-index: 20;
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 14px; box-shadow: var(--shadow); font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  width: max-content; max-width: min(92vw, 520px); } /* centred with left:50%, so give it its own width instead of half the screen */
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.has-action { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; }
#toast.has-action.show { pointer-events: auto; }
#toast button { min-height: 38px; padding: 6px 14px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #5eead4; }
@media (prefers-color-scheme: dark) { #toast button { color: #0f766e; background: rgba(0,0,0,.08); } }

/* ---------- Tablet & phone: bottom tab bar ---------- */
@media (max-width: 1024px) {
  :root { --tabbar-h: 64px; }
  header { justify-content: space-between; }
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; margin: 0; gap: 0; justify-content: space-around;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 6px 12px env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -12px rgba(15, 40, 36, .2); }
  .tabs a { flex: 1; max-width: 200px; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 8px; border-radius: 14px; font-size: .72rem; }
  .tabs a { white-space: nowrap; min-width: 0; padding: 4px 2px; }
  /* every icon in the same pill-sized box, so all labels line up; the active one only gets the pill colour */
  .tabs a svg { width: 52px; height: 28px; padding: 2px 14px; border-radius: 99px; flex: none; }
  .tabs a.active { background: none; }
  .tabs a.active svg { background: var(--hl); }
  main { padding-top: 16px; }
}
@media (min-width: 600px) and (max-width: 1024px) {
  main { padding-left: 24px; padding-right: 24px; }
  .card { padding: 22px; }
}

/* ---------- Phone ---------- */
@media (max-width: 480px) {
  :root { --radius: 16px; }
  h1 { font-size: 1.4rem; }
  .card { padding: 14px; }
  .brand { font-size: 1.1rem; }
  .row > .grow { flex-basis: 100%; }
  form .row > button.primary { flex: 1 1 100%; }
  #rows { padding: 8px; }
  .result { grid-template-columns: 1.9em 1fr 84px auto; gap: 8px; padding: 6px 8px; }
  .result .tap { min-width: 60px; padding: 8px 10px; }
  .result input { padding: 8px 10px; }
  .stats { gap: 8px; }
  .stats div { flex: 1; min-width: 0; padding: 8px 10px; }
  /* compact beep panel: it stays pinned while the teacher scrolls the runner tiles */
  .runner.beep { padding: 12px 12px 14px; }
  .runner.beep .clock { font-size: 2.3rem; }
  .runner.beep .clock-sub { display: none; }
  .runner.beep .bar { margin: 8px 0 10px; }
  .runner.beep .row { margin-top: 10px; }
  .beep-meta { gap: 6px; }
  .beep-meta div { padding: 6px 2px; }
  .beep-meta b { font-size: .95rem; }
  .beep-meta span { font-size: .62rem; }
  .result.beep-row { grid-template-columns: 1.7em 1fr 46px 84px; gap: 6px; }
  .stop-btn { min-height: 50px; font-size: .98rem; padding: 6px 8px; }
  .result.beep-row input { padding: 8px 6px; }
  dialog.sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  dialog.sheet form { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* Quick run: keep the runner name field and Add on one line, even on phones */
#addRunners .row { flex-wrap: nowrap; }
#addRunners .row > .grow { flex: 1 1 auto; }
#addRunners .row > button.primary { flex: none; }
#addRunners p { margin-bottom: 0; }
.beep-top .pill { white-space: nowrap; }
@media (max-width: 480px) {
  .beep-top .pill { font-size: .66rem; padding: 4px 9px; letter-spacing: .02em; }
  .runner .beep-top button { padding: 4px 10px; font-size: .75rem; }
}

/* Shuttle run: full name (wraps, never cut off) with the result spelled out below it */
.result.beep-row .name { white-space: normal; overflow: visible; display: flex; flex-direction: column; line-height: 1.25; }
.result.beep-row .name b { font-weight: 600; overflow-wrap: anywhere; }
.res-line { color: var(--brand); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.res-line:empty { display: none; }

/* Beep test grades */
.grade { display: inline-block; padding: 0 7px; margin-right: 2px; border-radius: 6px; font-weight: 800; font-size: .78rem; line-height: 1.5;
  color: #fff; background: #64748b; white-space: nowrap; }
.grade.g1, .grade.g2 { background: #16a34a; }
.grade.g3 { background: #0f9d8a; }
.grade.g4 { background: #d97706; }
.grade.g5, .grade.g6 { background: #dc2626; }
.grade.none { background: none; color: var(--muted); font-weight: 600; padding: 0; white-space: normal; }
.grade-info { margin: -4px 2px 12px; font-size: .85rem; color: var(--muted); }
.grade-info b { color: var(--danger); }

/* ---------- Test settings ---------- */
.tag.graded { background: color-mix(in srgb, #16a34a 15%, var(--card)); color: #15803d; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid textarea { min-height: 70px; }
.chip.add { border-style: dashed; color: var(--brand); }
#klassen { margin-bottom: 12px; }
.grade-table { max-height: none; }
.grade-table td, .grade-table th { padding: 4px 8px; }
.grade-table td:first-child { font-weight: 700; width: 3.5em; text-align: center; }
.grade-table tr.whole td:first-child { color: var(--brand); font-size: 1.05rem; }
.grade-table tr.whole { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.grade-table input { min-height: 40px; padding: 6px 10px; border-radius: 10px; text-align: center; font-variant-numeric: tabular-nums; background-color: var(--field); }
.grade-table input.bad { border-color: var(--danger); background-color: color-mix(in srgb, var(--danger) 10%, var(--card)); }
.errors { margin: 10px 0 0; padding-left: 18px; color: var(--danger); font-size: .88rem; }
.errors:empty { display: none; }
.settings-actions { position: sticky; bottom: calc(12px + var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 3; display: flex; gap: 10px; flex-wrap: wrap;
  padding: 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.settings-actions .primary { flex: 1; }
.grade-info a { color: var(--brand); font-weight: 600; }
@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Kerncurriculum ---------- */
.kc-banner { display: flex; align-items: center; gap: 12px; margin: -4px 0 14px; padding: 12px 14px; border-radius: 14px; text-decoration: none;
  color: var(--ink); background: color-mix(in srgb, var(--brand) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); }
.kc-banner.empty { background: var(--card); border-style: dashed; }
.kc-banner svg { width: 26px; height: 26px; flex: none; color: var(--brand); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kc-banner span { display: flex; flex-direction: column; min-width: 0; }
.kc-banner small { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-banner i { margin-left: auto; font-style: normal; font-size: 1.5rem; color: var(--muted); }
.chip.kc { color: #b45309; border-color: color-mix(in srgb, #f59e0b 45%, var(--line)); }
.chip.kc.on { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.tc-tags .tag.kc { background: color-mix(in srgb, #f59e0b 18%, var(--card)); color: #b45309; letter-spacing: .04em; }
@media (prefers-color-scheme: dark) { .tc-tags .tag.kc, .chip.kc { color: #fbbf24; } }
.tc-why { font-size: .8rem; color: var(--muted); }
.tc-why summary { color: var(--muted); padding: 0; font-weight: 600; list-style-position: outside; }
.tc-why blockquote, .kc-gap blockquote { margin: 6px 0 2px; padding: 6px 10px; border-left: 3px solid var(--c, var(--brand)); background: var(--field);
  border-radius: 0 8px 8px 0; font-size: .8rem; color: var(--ink); line-height: 1.4; }
.kc-intro { max-width: 60ch; margin-top: -6px; }
.kc-add .row .primary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kc-paste { margin-top: 10px; }
.kc-paste form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.kc-paste form .primary { align-self: flex-start; }
.kc-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kc-summary .tc-icon { width: 40px; height: 40px; }
.kc-summary .tc-icon svg { width: 22px; height: 22px; }
.kc-title { flex: 1; min-width: 180px; }
h2.plain { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 1.1rem; margin: 0; }
.kc-tools { display: flex; gap: 8px; }
h2.section { margin: 22px 2px 10px; }
.kc-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-topic { padding: 5px 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: .85rem; }
.kc-topic b { color: var(--brand); font-variant-numeric: tabular-nums; }
.kc-topic.gap { border-style: dashed; }
.kc-topic.gap b { color: var(--muted); }
.kc-gaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.kc-gap { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px; box-shadow: var(--shadow-sm); }
.kc-gap .tc-btn { align-self: flex-start; }
.kc-unmentioned { margin-top: 18px; box-shadow: none; }
.kc-unmentioned summary { color: var(--muted); }
.kc-note { margin-top: 14px; }

/* Language switch (DE | EN) in the header */
.lang-switch { display: flex; padding: 3px; border-radius: 99px; background: var(--field); border: 1px solid var(--line); flex: none; }
.lang-switch button { min-height: 30px; min-width: 38px; padding: 2px 10px; border: 0; border-radius: 99px; background: none;
  font-size: .78rem; font-weight: 700; color: var(--muted); box-shadow: none; }
.lang-switch button.on { background: var(--card); color: var(--brand); box-shadow: var(--shadow-sm); }
@media (min-width: 1025px) { .lang-switch { margin-left: 4px; } }
@media (max-width: 1024px) { header .lang-switch { margin-left: auto; } }
@media (max-width: 380px) { .brand span { display: none; } } /* very small phones: logo only */

/* ---------- Class grade overview ---------- */
/* the head: title and the main actions; below, one toolbar row (period, weighting, settings) of equal height */
.grades-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.grades-head h2 { margin: 0 auto 0 0; }
.gh-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.gh-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; background: var(--field); border-radius: 14px; }
.gh-tools .period-sel select, .gh-tools > button { min-height: 36px; margin: 0; }
@media (min-width: 601px) {
  .gh-tools .grades-settings { margin-left: auto; }
  .gh-tools .grades-controls { align-items: center; gap: 8px 14px; }
  .gh-tools .grades-controls .field { flex-direction: row; align-items: center; gap: 6px; font-size: .8rem; }
  .gh-tools .grades-controls select, .gh-tools .grades-controls input { min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: .85rem; }
  .gh-tools .grades-controls input { width: 90px; }
  .gh-tools .sport-class { align-self: center; min-height: 36px; font-size: .85rem; }
}
.grades-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.grades-controls .field { min-width: 0; }
.grades-controls select { min-height: 40px; padding: 6px 34px 6px 12px; border-radius: 10px; font-size: .9rem; width: auto; }
.grades-controls input { min-height: 40px; padding: 6px 12px; border-radius: 10px; font-size: .9rem; width: 150px; }
.grade-overview { max-height: none; }
.grade-overview table { font-size: .88rem; }
.grade-overview th, .grade-overview td { padding: 7px 10px; vertical-align: middle; }
.grade-overview thead th { white-space: normal; min-width: 92px; max-width: 150px; text-transform: none; letter-spacing: 0; font-size: .78rem; line-height: 1.25; }
.grade-overview thead th a { color: var(--ink); text-decoration: none; font-weight: 700; }
.grade-overview thead th small { display: block; font-weight: 500; color: var(--muted); }
.grade-overview thead th.ungraded a { color: var(--muted); font-weight: 600; }
.grade-overview td { text-align: center; white-space: nowrap; }
.grade-overview td small { display: block; margin-top: 2px; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.grade-overview td.ungraded small { font-size: .82rem; color: var(--ink); }
.grade-overview .grade { font-size: .82rem; min-width: 2.2em; text-align: center; }
/* names stay visible while scrolling sideways */
.grade-overview .sticky { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; font-weight: 600; white-space: nowrap;
  box-shadow: 1px 0 0 var(--line); }
.grade-overview thead .sticky { z-index: 3; background: var(--field); }
.grade-overview tbody tr:hover td, .grade-overview tbody tr:hover th { background: color-mix(in srgb, var(--brand) 5%, var(--card)); }
.grade-overview .avg { background: var(--hl); border-left: 1px solid var(--line); }
.grade-overview thead th.avg { background: var(--hl); text-align: center; min-width: 64px; }
.grade-overview tfoot th, .grade-overview tfoot td { border-top: 2px solid var(--line); border-bottom: 0; background: var(--field); font-weight: 700; }
.grade-overview tfoot .sticky { background: var(--field); }
.th-sort { min-height: 0; padding: 2px 6px; border: 0; border-radius: 6px; background: none; box-shadow: none; font: inherit; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.th-sort.on { color: var(--brand); }
.th-sort.on::after { content: " ↓"; }
.grade-overview thead th.avg .th-sort { font-size: 1rem; letter-spacing: 0; }
.grade-notes { margin: 10px 2px 0; font-size: .82rem; }
.grade-table .pts { display: block; font-size: .65rem; font-weight: 600; color: var(--muted); }
@media (max-width: 480px) {
  .grades-controls { width: 100%; }
  .grades-controls .field { flex: 1 1 140px; }
  .grades-controls select, .grades-controls input { width: 100%; }
  .grade-overview .sticky { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
}
/* student names and the average row are row headers: normal text, not the uppercase column-header style */
.grade-overview tbody th, .grade-overview tfoot th { text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--ink); }
.grade-overview tfoot th { font-size: .8rem; color: var(--muted); }

/* ---------- Student cell: number, avatar, last name bold, first name below ---------- */
.st-num { width: 1.6em; flex: none; text-align: right; font-size: .78rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: hsl(var(--h) 45% 30%); background: hsl(var(--h) 60% 90%); }
@media (prefers-color-scheme: dark) { .avatar { color: hsl(var(--h) 60% 85%); background: hsl(var(--h) 35% 26%); } }
.st-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.st-name b { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-name small { font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Student list (roster): thin lines instead of cards, actions behind "⋯" ---------- */
.roster { list-style: none; margin: 0 -18px; padding: 0; border-top: 1px solid var(--line); }
.roster li { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 12px; border-bottom: 1px solid var(--line); min-height: 58px; }
.roster li:hover { background: color-mix(in srgb, var(--brand) 4%, var(--card)); }
.roster .st-name { flex: 1; }
.st-meta { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-menu { position: relative; flex: none; }
.dots { display: grid; place-items: center; width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--card); color: var(--muted); font-size: 1.1rem; line-height: 1; letter-spacing: 0; box-shadow: none; }
.dots:hover, .dots[aria-expanded="true"] { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; min-width: 170px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px -10px rgba(15, 40, 36, .35); }
.menu[hidden] { display: none; }
.menu button { justify-content: flex-start; min-height: 38px; padding: 6px 12px; border: 0; border-radius: 8px; background: none; box-shadow: none;
  font-size: .9rem; font-weight: 600; }
.menu button:hover, .menu button:focus-visible { background: var(--field); }
.roster + .import-bar { margin-top: 16px; }
@media (max-width: 480px) { .roster { margin: 0 -14px; } .st-meta { display: none; } }

/* ---------- Grade table, gradebook style ---------- */
.grade-overview table { font-size: .88rem; }
.grade-overview tbody td { text-align: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.grade-overview tbody tr:nth-child(even) td:not(.avg), .grade-overview tbody tr:nth-child(even) th { background: color-mix(in srgb, var(--field) 55%, var(--card)); }
.grade-overview .student { padding: 6px 12px 6px 8px; }
.grade-overview .student, .grade-overview .student * { text-transform: none; letter-spacing: 0; }
.grade-overview th.student { min-width: 190px; }
.st-cell { display: flex; align-items: center; gap: 10px; }
.grade-overview .student .avatar { width: 30px; height: 30px; font-size: .7rem; }
/* category bands */
.grade-overview thead tr.groups th.grp { padding: 6px 10px; text-align: left; border-bottom: 0; border-left: 2px solid var(--card);
  background: color-mix(in srgb, var(--c) 16%, var(--card)); color: var(--c); }
.grade-overview thead tr.groups th.grp span { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.grade-overview thead tr.groups th.grp svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.grade-overview thead tr.tests th { background: color-mix(in srgb, var(--c) 7%, var(--card)); border-left: 2px solid var(--card); border-top: 3px solid color-mix(in srgb, var(--c) 55%, transparent);
  text-align: center; vertical-align: bottom; }
.grade-overview thead tr.tests th a { font-weight: 700; }
.grade-overview thead .corner { vertical-align: bottom; background: var(--card) !important; }
.sort-pill { min-height: 0; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--field); box-shadow: none;
  font-size: .74rem; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.sort-pill:hover { color: var(--brand); }
/* plain grades, only poor ones stand out */
.gv { display: block; font-size: 1.12rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.gv.g5, .gv.g6 { color: var(--danger); }
.gv.none { color: var(--muted); font-weight: 600; }
.grade-overview .none { color: var(--muted); }
.grade-overview td small { margin-top: 1px; }
.grade-overview td.avg .gv { font-size: 1.05rem; }
.grade-overview thead th.avg { font-size: 1.05rem; vertical-align: middle; color: var(--brand); }
.grade-overview tfoot td .gv { font-size: .95rem; }
@media (max-width: 480px) { .grade-overview th.student { min-width: 150px; max-width: 170px; } .grade-overview .student .st-num { display: none; } }
@media (prefers-color-scheme: dark) {
  /* category colours are tuned for light backgrounds: lift them so the band labels stay readable */
  .grade-overview thead tr.groups th.grp { color: color-mix(in srgb, var(--c) 55%, #fff); }
}

/* ---------- Entering grades by hand ---------- */
.grade-overview td.cellbtn { cursor: pointer; transition: background .12s; }
.grade-overview td.cellbtn:hover, .grade-overview td.cellbtn:focus-visible { background: color-mix(in srgb, var(--brand) 10%, var(--card)) !important; outline: none; }
.grade-overview td.cellbtn:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }
.gv.manual::after { content: "✎"; font-size: .6em; font-weight: 600; color: var(--muted); margin-left: 2px; vertical-align: super; }
/* an empty cell that takes a grade: a quiet "+", clearer on hover */
.grade-overview .add-grade { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border: 1.5px dashed var(--line); border-radius: 8px;
  color: var(--muted); font-weight: 700; line-height: 1; opacity: .7; transition: opacity .12s, color .12s, border-color .12s; }
.grade-overview td.cellbtn:hover .add-grade, .grade-overview td.cellbtn:focus-visible .add-grade { opacity: 1; color: var(--brand); border-color: var(--brand); }
.col-edit { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; font-weight: 700; color: var(--ink); white-space: normal; }
.col-edit:hover { color: var(--brand); }
dialog.picker .picker-body, dialog.student-notes .picker-body, dialog .col-form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.picker-info { margin: -6px 0 0; font-size: .85rem; }
.grade-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grade-picks.few { grid-template-columns: repeat(3, 1fr); }
.grade-picks button { min-height: 52px; font-size: 1.15rem; font-weight: 800; border-radius: 12px; font-variant-numeric: tabular-nums; }
.grade-picks button.g5, .grade-picks button.g6 { color: var(--danger); }
.grade-picks button.on { background: var(--grad); border-color: transparent; color: #fff; }
.picker-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: .85rem; }
.picker-status { display: flex; gap: 8px; margin: 10px 0 4px; }
.picker-status button { flex: 1; }
.picker-status button.on { background: var(--hl); color: var(--brand); border-color: var(--brand); }
.picker-foot .muted { margin-left: auto; }
.picker-foot .picker-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.picker-foot .picker-nav .muted { margin-left: 0; font-variant-numeric: tabular-nums; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.check input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--brand); }
@media (max-width: 480px) { .grade-picks { gap: 6px; } .grade-picks button { min-height: 48px; } }

/* ---------- Sportmotorische Tests: attempts, norm tables ---------- */
.result .tries { display: flex; align-items: center; gap: 6px; }
.result .tries input { width: 74px; min-height: 40px; padding: 6px 8px; text-align: center; }
.result .tries .best { min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; color: var(--brand); }
.result:has(.tries) { grid-template-columns: 2.2em 1fr auto auto; }
.band-grades { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.band-grades select { min-height: 40px; padding: 6px 28px 6px 10px; border-radius: 10px; }
.norm-table table { font-size: .85rem; }
.norm-table th, .norm-table td { text-align: center; padding: 6px 8px; }
.norm-table th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--brand); }
.chip-gap { width: 10px; flex: none; }
.sport-class { align-self: flex-end; min-height: 40px; font-size: .9rem; font-weight: 600; color: var(--muted); }
@media (max-width: 480px) {
  .result:has(.tries) { grid-template-columns: 1.9em 1fr; }
  .result:has(.tries) .tries { grid-column: 1 / -1; justify-content: flex-end; }
  .result .tries input { width: 64px; }
  .band-grades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Test with parts: tabs, overview ---------- */
.part-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -4px 0 14px; padding-bottom: 2px; }
.part-tabs::-webkit-scrollbar { display: none; }
.part-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .88rem; white-space: nowrap; }
.part-tab small { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.part-tab.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.part-tab.on small { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.battery-overview thead th { text-align: center; }
.battery-overview thead th a { color: var(--ink); font-weight: 700; text-decoration: none; }
.battery-overview td { text-align: center; }
.battery-overview .cell-link { display: block; color: inherit; text-decoration: none; }
.battery-overview td small { display: block; font-size: .72rem; color: var(--muted); }
.part-chips { width: 100%; margin-bottom: 6px; }
.part-pick { color: var(--ink); text-decoration: none; }
.battery-overview .pts { font-variant-numeric: tabular-nums; }
.battery-overview th.pts small { display: block; font-size: .7rem; font-weight: 500; color: var(--muted); }
.battery-overview td.pts b { font-size: 1.05rem; }

/* Session rows of graded tests: a big grade in its own column, live while typing */
.result.graded-row { grid-template-columns: 2.2em 1fr 120px 3.6em auto; }
.result.graded-row.has-tries { grid-template-columns: 2.2em 1fr auto 3.6em auto; }
.result .grade-cell { display: grid; place-items: center; min-height: 44px; }
.grade.big { font-size: 1.15rem; line-height: 1; padding: 9px 0; min-width: 2.6em; text-align: center; border-radius: 10px; margin: 0; }
.result .gc-empty { color: var(--muted); font-weight: 700; font-size: 1.1rem; }
.result .gc-detail { color: var(--muted); font-size: .78rem; margin-left: 4px; }
.result.preview .grade.big { outline: 2px dashed currentColor; outline-offset: -4px; } /* typed, not saved yet */
@media (max-width: 480px) {
  .result.graded-row { grid-template-columns: 1.9em 1fr 84px 3em auto; }
  .result.graded-row.has-tries { grid-template-columns: 1.9em 1fr auto 3em auto; }
  .result.graded-row .name { white-space: normal; line-height: 1.25; }
  .grade.big { font-size: 1rem; min-width: 2.4em; padding: 8px 0; }
}
/* phones and small tablets: the attempts get their own line under the name, so names stay readable */
@media (max-width: 700px) {
  .result.has-tries, .result.graded-row.has-tries { grid-template-columns: 1.9em minmax(0, 1fr) auto auto;
    grid-template-areas: "rank name grade btn" "rank tries tries tries"; row-gap: 6px; }
  .result.has-tries .rank { grid-area: rank; }
  .result.has-tries .name { grid-area: name; }
  .result.has-tries .gcol { grid-area: grade; }
  .result.has-tries .tries { grid-area: tries; }
  .result.has-tries > :last-child:not(.tries):not(.gcol) { grid-area: btn; }
  .result.has-tries .tries input { flex: 1 1 0; width: auto; min-width: 0; }
  .result.has-tries .tries .best { min-width: 3.2em; text-align: right; }
}
/* "Gender: Boy | Girl" in a session row when a grade needs it */
.gender-fix { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .8rem; color: var(--danger); font-weight: 600; }
.gender-fix .chip { min-height: 30px; padding: 3px 10px; font-size: .8rem; }
.result .name:has(.gender-fix) { white-space: normal; }
/* labels in session rows: "Bestwert" above the best attempt, "Note" above the grade */
.result .gcol, .result .bcol { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.result .cap { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); line-height: 1.1; }
.result .gcol .grade-cell { min-height: 36px; }
/* "choose the year: 5 6 7 …" when students have no birth year and the class name has no year */
.year-fix { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.year-fix .chip { min-height: 32px; min-width: 40px; padding: 3px 10px; }

/* "View" window of a test: how it works, parts, grading with guide values */
dialog.test-view { width: min(620px, calc(100vw - 32px)); }
.test-view .tv-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.test-view .tv-body > p { margin: 0; }
.test-view h4 { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.test-view section { border-top: 1px solid var(--line); padding-top: 12px; }
.tv-cat { display: flex; align-items: center; gap: 6px; color: var(--c); font-weight: 700; font-size: .8rem; }
.tv-cat svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tv-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.tv-facts dt { color: var(--muted); }
.tv-facts dd { margin: 0; font-weight: 600; }
.tv-parts { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.tv-parts small { color: var(--muted); margin-left: 6px; }
.tv-parts p { margin: 2px 0 0; font-size: .85rem; }
.tv-chips { margin-bottom: 8px; }
.tv-note { margin: 0 0 6px; font-size: .82rem; }
.tv-table table { font-variant-numeric: tabular-nums; }
.tv-table th, .tv-table td { text-align: center; padding: 5px 8px; white-space: nowrap; }
.tv-table td:first-child, .tv-table th:first-child { text-align: left; }
.tv-actions { flex-wrap: wrap; }
.tv-actions .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 480px) { .tv-facts { grid-template-columns: 1fr; gap: 2px; } .tv-facts dd { margin-bottom: 6px; } }
.tv-table th small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; }

/* ---------- Account: log in / register ---------- */
body.logged-out .tabs, body.logged-out #csvFormat { display: none; }
.auth { max-width: 440px; margin: 6vh auto 0; display: flex; flex-direction: column; gap: 16px; }
.auth-intro h1 { margin: 0 0 6px; }
.auth-intro p { margin: 0; }
.auth-card { display: flex; flex-direction: column; gap: 14px; }
.auth-card .field small { display: block; margin-top: 4px; }
.tabs-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--field); }
.tabs-inline button { min-height: 38px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-weight: 600; box-shadow: none; }
.tabs-inline button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.auth-card .check { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; line-height: 1.4; }
.auth-card .check input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; flex: none; }
.auth-switch { margin: 0; text-align: center; font-size: .9rem; }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--brand); font-weight: 600; box-shadow: none; text-decoration: underline; cursor: pointer; }
.user-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; font-size: .85rem;
  font-weight: 600; background: var(--field); color: var(--ink); border: 1px solid var(--line); box-shadow: none; max-width: 180px; }
.user-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 600px) { .user-btn span, .user-btn .caret { display: none; } .user-btn { padding: 4px 9px; } }
.user-btn[hidden] { display: none; }

/* Assessment (Volleyball-Überprüfung): a grade select per part, criteria above the table */
.assess-criteria summary { cursor: pointer; }
.assess-criteria dl { margin: 10px 0 0; display: grid; gap: 4px 0; }
.assess-criteria dt { font-weight: 600; margin-top: 6px; }
.assess-criteria dd { margin: 0 0 0 30px; color: var(--muted); font-size: .88rem; }
.assess-criteria .letter { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--hl); color: var(--brand); font-weight: 800; font-size: .8rem; margin-right: 4px; }
.assessment th small { display: block; font-weight: 500; font-size: .7rem; color: var(--muted); text-transform: none; }
.assessment td { text-align: center; }
.grade-sel { min-height: 40px; min-width: 64px; padding: 4px 8px; border-radius: 10px; font-weight: 700; text-align: center; }
.grade-sel.g1, .grade-sel.g2 { border-color: #16a34a; }
.grade-sel.g3 { border-color: #0f9d8a; }
.grade-sel.g4 { border-color: #d97706; }
.grade-sel.g5, .grade-sel.g6 { border-color: #dc2626; }
.assessment td.unused .grade-sel { opacity: .45; text-decoration: line-through; } /* the choice part that does not count */
.tv-criteria { margin: 2px 0 0; font-size: .85rem; }
/* compact, so "Gesamt" stays visible on a tablet */
.assessment th, .assessment td { padding: 6px 4px; }
.assessment .grade-sel { min-width: 52px; padding: 4px 2px 4px 8px; }
.assessment td.tech, .assessment td.avg { min-width: 52px; }
.assessment td.tech .gv, .assessment td.avg .gv { font-size: 1rem; }
@media (max-width: 900px) { .assessment .student .st-num, .assessment .student .avatar { display: none; } }
.assessment th.student, .assessment th.corner { min-width: 0; max-width: 170px; }

/* ---------- Account settings ---------- */
.account-card h2 { margin-top: 0; }
.account-card .row { margin-top: 4px; }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.danger-zone h2 { color: var(--danger); }

/* banner under the header, e.g. "please confirm your email" */
.banner { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; padding: 10px 16px; font-size: .9rem;
  background: color-mix(in srgb, #f59e0b 16%, var(--card)); border-bottom: 1px solid color-mix(in srgb, #f59e0b 40%, var(--line)); text-align: center; }
.banner[hidden] { display: none; }
body.logged-out .banner { display: none; }

/* footer with the legal links */
.app-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 24px 16px calc(32px + var(--tabbar-h) + env(safe-area-inset-bottom)); font-size: .8rem; }
.app-footer a { color: var(--muted); text-decoration: none; }
.app-footer a:hover { color: var(--brand); text-decoration: underline; }
.auth-card .check a { color: var(--brand); }

/* offline bar: grey when offline, amber when results are waiting */
.offline-bar { background: color-mix(in srgb, var(--muted) 18%, var(--card)); border-bottom-color: var(--line); }
.offline-bar.waiting { background: color-mix(in srgb, #f59e0b 16%, var(--card)); }
.offline-bar[hidden] { display: none; }

/* Lap counter: a big +1 per student, − to correct, the field shows laps+rest */
.result.counting { grid-template-columns: 2.2em minmax(0, 1fr) auto 3.6em auto; }
.lap-entry { display: flex; align-items: center; gap: 8px; }
.lap-entry input { width: 96px; }
.lapctl { display: flex; align-items: center; gap: 6px; }
.lap-plus { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; min-width: 88px; padding: 6px 14px; border-radius: 14px; }
.lap-plus .lap-count { font-size: 1.35rem; font-variant-numeric: tabular-nums; min-width: 1.6em; text-align: right; }
.lap-plus small { font-weight: 700; opacity: .85; }
.lap-minus { min-height: 44px; min-width: 40px; padding: 4px 10px; border-radius: 12px; font-size: 1.2rem; }
.lap-len { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.lap-len input { width: 76px; min-height: 36px; padding: 4px 8px; text-align: right; }
button.small.on { background: var(--hl); color: var(--brand); border-color: var(--brand); }
@media (max-width: 700px) {
  .result.counting { grid-template-columns: 1.9em minmax(0, 1fr) auto auto; grid-template-areas: "rank name grade btn" "rank laps laps laps"; row-gap: 6px; }
  .result.counting .rank { grid-area: rank; }
  .result.counting .name { grid-area: name; }
  .result.counting .lap-entry { grid-area: laps; }
  .result.counting .gcol { grid-area: grade; }
  .result.counting > :last-child:not(.lap-entry):not(.gcol) { grid-area: btn; }
  .lap-plus { flex: 1; justify-content: center; }
  .lap-entry input { width: 84px; }
}

/* Attendance: excused / absent */
.status-sel { min-height: 30px; padding: 2px 6px; margin-left: 6px; font-size: .75rem; border-radius: 8px; max-width: 120px; }
.status-sel:not(.set) { color: var(--muted); }
.status-sel.set { font-weight: 700; }
.st-chip { display: inline-grid; place-items: center; min-width: 2.2em; padding: 6px 8px; border-radius: 10px; font-weight: 800; font-size: .95rem;
  background: color-mix(in srgb, var(--muted) 20%, var(--card)); color: var(--ink); }
.st-chip.excused { background: color-mix(in srgb, #3b82f6 22%, var(--card)); }
.st-chip.absent { background: color-mix(in srgb, #f59e0b 25%, var(--card)); }
.result.status-excused .name, .result.status-absent .name { opacity: .85; }
.result.status-excused input:not(.status-sel), .result.status-absent input:not(.status-sel) { opacity: .5; }
.catchup { display: block; font-size: .68rem; font-weight: 700; color: #b45309; text-transform: none; }
.grade-overview th.student .status-sel { display: block; margin: 4px 0 0 0; }

/* New school year and archive */
.class-head { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.class-head h1 { margin: 0; }
.prev-year { margin: 4px 0 12px; font-size: .85rem; }
.prev-year a { color: var(--brand); }
.archived-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--muted) 14%, var(--card)); }
.archived-note p { margin: 0; }
.stay-list { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; max-height: 40vh; overflow-y: auto; display: grid; gap: 6px; margin: 0; }
.stay-list legend { padding: 0 6px; font-weight: 600; font-size: .9rem; }
dialog .check { display: flex; gap: 10px; align-items: center; }
dialog .check input { width: 20px; height: 20px; min-height: 0; margin: 0; flex: none; }
details.archive { margin-top: 8px; }
details.archive > summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 8px 0; }
details.archive .test-card { opacity: .8; }

/* Sportabzeichen: medals */
.medal { display: inline-grid; place-items: center; min-width: 4.2em; padding: 6px 10px; border-radius: 10px; font-weight: 800; font-size: .85rem; color: #1f2937; }
.medal.small { min-width: 0; padding: 3px 8px; font-size: .75rem; border-radius: 8px; }
.medal.gold { background: linear-gradient(135deg, #fde68a, #f59e0b); }
.medal.silver { background: linear-gradient(135deg, #f1f5f9, #94a3b8); }
.medal.bronze { background: linear-gradient(135deg, #fed7aa, #c2410c); color: #fff; }
.medal-sel { min-height: 44px; min-width: 120px; font-weight: 700; }
.dsa-discs { margin: -6px 0 12px; }
.dsa-discs .chip small { opacity: .7; }
.dsa-overview td small { display: block; font-size: .7rem; color: var(--muted); margin-top: 2px; }
.dsa-overview .dsa-age { display: block; font-size: .7rem; }
.swim-ok { color: var(--ok, #16a34a); font-weight: 700; font-size: .8rem; }
/* Bundesjugendspiele: points and certificates (same colours as the medals: honour = gold, winner = silver) */
.bjs-pts { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cert { display: inline-block; padding: 4px 9px; border-radius: 8px; font-weight: 700; font-size: .75rem; color: #1f2937; white-space: nowrap; }
.cert.honour { background: linear-gradient(135deg, #fde68a, #f59e0b); }
.cert.winner { background: linear-gradient(135deg, #f1f5f9, #94a3b8); }
.cert.participation { background: var(--line, #e5e7eb); color: var(--ink); }
.cert-mini { display: inline-block; padding: 2px 6px; border-radius: 6px; font-weight: 700; font-size: .75rem; color: #1f2937; font-variant-numeric: tabular-nums; }
.cert-mini.honour { background: #fbbf24; }
.cert-mini.winner { background: #cbd5e1; }
.cert-mini.participation { background: var(--line, #e5e7eb); color: var(--ink); }
.bjs-overview td.not-counted { opacity: .45; }
.bjs-overview td.pts small { display: block; font-weight: 500; white-space: normal; max-width: 8.5em; margin: 2px auto 0; line-height: 1.25; }
.bjs-overview td.avg small { white-space: normal; }
.swim-check { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; }
.swim-check input { width: 20px; height: 20px; min-height: 0; margin: 0; }
.dsa-hint { margin: -4px 0 12px; font-size: .85rem; }
.dsa-overview thead th small { display: block; font-weight: 500; font-size: .68rem; color: var(--muted); text-transform: none; letter-spacing: 0; }
.tv-dsa { margin: 0; padding-left: 20px; display: grid; gap: 2px; }

/* Final grade: weighted suggestion, the teacher's grade; weighting dialog */
.grade-overview td.final { cursor: pointer; }
.grade-overview td.final small { display: block; font-size: .68rem; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.gv.suggested { border: 1.5px dashed currentColor; border-radius: 8px; padding: 0 7px; opacity: .9; } /* a suggestion, not set yet */
.final-head small { display: block; font-size: .65rem; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }
.period-sel select { min-height: 36px; padding: 4px 10px; font-size: .85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.final-breakdown { width: 100%; border-collapse: collapse; font-size: .9rem; }
.final-breakdown td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.final-breakdown tr.total td { font-weight: 700; border-bottom: 0; }
.grade-picks button.suggest { outline: 2px dashed var(--brand); outline-offset: -4px; }
dialog.weighting form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
dialog.weighting fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; display: grid; gap: 8px; }
dialog.weighting legend { padding: 0 6px; font-weight: 600; font-size: .9rem; }
.area-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.area-row .pct { display: inline-flex; align-items: center; gap: 4px; }
.area-row .pct input { width: 72px; text-align: right; }
.col-areas { max-height: 34vh; overflow-y: auto; }
.col-area { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: .9rem; }
.col-area select { min-height: 36px; padding: 4px 8px; max-width: 170px; }
.warn { color: #b45309; font-size: .85rem; }

/* AI test import: upload card and the review dialog */
.ai-card { border: 2px dashed var(--line); }
.ai-card.drag { border-color: var(--brand); background: var(--hl); }
.ai-card.busy { opacity: .7; pointer-events: none; }
.ai-card label.btn { cursor: pointer; }
.small-print { font-size: .78rem; margin: 8px 0 0; }
.ai-busy { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.ai-review { max-width: 720px; }
.ai-notes { background: var(--hl); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; font-size: .9rem; }
.ai-notes ul { margin: 4px 0 0; padding-left: 18px; }
.ai-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 12px; }
.ai-tables h4 { margin: 16px 0 6px; }
.ai-group { margin-bottom: 14px; }
.ai-years { flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ai-years .chip { min-width: 2.4em; padding: 4px 8px; }
.ai-grid { border-collapse: collapse; }
.ai-grid th, .ai-grid td { padding: 2px 6px; text-align: center; }
.ai-grid input { width: 6.5em; text-align: right; min-height: 36px; }

/* Notes in lessons */
.note-day { align-items: center; gap: 6px; flex-wrap: wrap; }
.note-day input[type=date] { width: auto; }
.note-day #noteKinds { margin-left: auto; }
.note-list { padding: 4px 0; }
.note-row { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.note-row:last-child { border-bottom: 0; }
.note-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.note-chips { flex-wrap: wrap; gap: 6px; }
.note-chip { font-size: .85rem; }
.note-chip.tone-plus.on { background: #16a34a; border-color: #16a34a; color: #fff; }
.note-chip.tone-minus.on { background: #dc2626; border-color: #dc2626; color: #fff; }
.note-chip.tone-neutral.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.note-totals { display: inline-flex; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.note-totals .plus { color: var(--ok); }
.note-totals .minus { color: var(--danger); }
.kind-list { display: grid; gap: 6px; margin: 8px 0 12px; }
.kind-row { display: flex; align-items: center; gap: 8px; }
.kind-row input[data-label] { flex: 1; min-width: 0; }
.kind-row .grow { flex: 1; }
/* notes on the final grade: ▲ 0,25 better / ▼ worse */
.note-adj { font-size: .72rem; font-weight: 700; margin-left: 4px; }
.note-adj.plus, .final-breakdown .plus { color: var(--ok); }
.note-adj.minus, .final-breakdown .minus { color: var(--danger); }
/* gradebook: 📝 with the notes' balance next to each name, opens the student's notes */
.grade-overview th.student { white-space: nowrap; }
@media (max-width: 600px) { .grade-overview th.student { white-space: normal; } .grade-overview th.student .note-btn { display: flex; width: max-content; margin: 4px 0 0; } }
.student-notes a { color: var(--brand); font-weight: 600; }
.grade-overview th.student .st-cell { display: inline-flex; vertical-align: middle; }
.note-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px 8px; min-height: 30px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--field); color: var(--ink); font-size: .8rem; font-weight: 600; cursor: pointer; vertical-align: middle; }
.note-btn:hover, .note-btn:focus-visible { border-color: var(--brand); }
.student-notes .sheet-head h3 .note-totals { font-size: 1rem; margin-left: 6px; }
.student-notes .note-chips { margin: 10px 0; }
.note-history { list-style: none; padding: 0; margin: 6px 0 12px; display: grid; gap: 4px; max-height: 40vh; overflow: auto; }
.note-history li { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.note-history li .icon-btn { margin-left: auto; }
.note-history .plus { color: var(--ok); font-weight: 600; }
.note-history .minus { color: var(--danger); font-weight: 600; }
/* the teacher's menu at their name: Konto, Beobachtungsarten, Abmelden */
.user-menu { position: relative; }
.user-btn { cursor: pointer; }
.user-btn .caret { font-style: normal; font-size: .7rem; opacity: .7; }
.user-btn[aria-expanded="true"] { border-color: var(--brand); }
.user-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; padding: 6px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); display: grid; gap: 2px; }
.user-pop[hidden] { display: none; }
.user-pop .up-head { display: grid; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.user-pop .up-head small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.user-pop [role=menuitem] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: left; text-decoration: none; box-shadow: none; cursor: pointer; }
.user-pop [role=menuitem]:hover, .user-pop [role=menuitem]:focus-visible { background: var(--hl); outline: none; }
.user-pop [data-um=logout] { color: var(--danger); }
.user-pop [role=menuitem] > span:first-child { width: 22px; text-align: center; font-size: 1rem; flex: none; }
.user-pop [role=menuitem] { justify-content: flex-start; }
/* session rows on phones: name, 📝 and attendance wrap instead of being cut off */
@media (max-width: 600px) {
  .result .name { white-space: normal; line-height: 1.3; }
  .result .name .note-btn { margin: 3px 4px 0 0; }
  .result .name .status-sel { margin: 3px 0 0; }
}
/* the empty card for an own test at the start of the test grid */
.new-test-tile { border: 2px dashed var(--line); background: transparent; justify-content: flex-start; }
.new-test-tile:hover, .new-test-tile.drag { border-color: var(--brand); background: var(--hl); }
.new-test-tile .ntt-plus { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.8rem; font-weight: 700;
  color: var(--brand); background: var(--hl); line-height: 1; }
.new-test-tile .tc-actions { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px; margin-top: auto; }
.new-test-tile label.tc-btn { cursor: pointer; text-align: center; }
.new-test-tile .small-print { margin: 0; }
.ai-busy[hidden] { display: none; }
.new-test-tile .tc-actions .tc-btn { flex: none; width: 100%; justify-content: center; white-space: normal; }
/* the test dialog: "fill in with AI" from a file or pasted text */
.ai-fill { border: 2px dashed var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; display: grid; gap: 8px; }
.ai-fill p { margin: 0; }
.ai-fill p small { display: block; margin-top: 2px; }
.ai-fill .row { gap: 8px; flex-wrap: wrap; }
.ai-fill label.btn { cursor: pointer; }
.ai-fill textarea { width: 100%; min-height: 110px; }
.ai-fill.busy { border-color: var(--brand); }
.ai-fill.off { opacity: .75; }
/* AI review: a value the AI gave that is not in the document */
.ai-grid input.unsure { border: 2px solid #f59e0b; background: color-mix(in srgb, #f59e0b 14%, var(--field)); }
/* year plan from the Kerncurriculum: units by half-year */
.year-plan .yp-top { align-items: center; gap: 8px; flex-wrap: wrap; }
.year-plan .yp-top h2 { margin: 0; }
.yp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; margin-top: 10px; }
.yp-col h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.yp-unit { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--card); display: grid; gap: 6px; }
.yp-unit.unsure { border-color: #f59e0b; }
.yp-head { display: flex; align-items: center; gap: 6px; }
.yp-head h4 { margin: 0; flex: 1; font-size: 1rem; }
.yp-head select { min-height: 32px; font-size: .8rem; max-width: 150px; }
.yp-area { margin: -4px 0 0; font-size: .8rem; }
.yp-comp { margin: 0; padding-left: 18px; font-size: .85rem; color: var(--muted); display: grid; gap: 2px; }
.yp-tests { flex-wrap: wrap; gap: 6px; align-items: center; }
.yp-tests .chip { font-size: .8rem; }
.yp-tests .chip.idea { border-style: dashed; }
.yp-tests select { min-height: 32px; font-size: .8rem; max-width: 180px; }
.yp-quote summary { cursor: pointer; font-size: .78rem; color: var(--muted); }
.yp-unit.unsure .yp-quote summary { color: #b45309; }
.yp-quote blockquote { margin: 6px 0 0; font-size: .82rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: 8px; }
.yp-tests .chip { white-space: normal; text-align: left; max-width: 100%; }
/* calendar of a school year: months, tests as dots, today, the year plan's units as bars */
.cal { margin: 10px 0 4px; }
.cal-months { display: grid; grid-template-columns: repeat(12, 1fr); font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cal-months span { padding: 0 0 4px 4px; border-left: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.cal-track { position: relative; height: 26px; border-radius: 8px; background: repeating-linear-gradient(90deg, var(--field) 0 calc(100% / 12 - 1px), var(--line) calc(100% / 12 - 1px) calc(100% / 12)); }
.cal-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--brand); border: 2px solid var(--card); }
a.cal-dot:hover, a.cal-dot:focus-visible { transform: scale(1.35); outline: none; }
.cal-today { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #ef4444; border-radius: 2px; }
.cal-bars { display: grid; gap: 3px; margin-top: 6px; }
.cal-bar { position: relative; height: 20px; border-radius: 6px; background: hsl(var(--h) 55% 45% / .28); border: 1px solid hsl(var(--h) 55% 50% / .55); overflow: hidden; }
.cal-bar span { position: absolute; inset: 0 6px; font-size: .72rem; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal.mini { margin: 4px 0 0; }
.cal.mini .cal-months { font-size: .6rem; }
.cal.mini .cal-months span { padding-left: 2px; }
.cal.mini .cal-track { height: 14px; border-radius: 5px; }
.cal.mini .cal-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-width: 1px; }
.cc-plan { font-size: .78rem; margin: 4px 0 0; }
.cc-plan summary { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.cc-plan summary b { color: var(--ink); }
.cc-units { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.cc-units li { display: grid; grid-template-columns: 7.5em 1fr; gap: 6px; line-height: 1.3; }
.cc-units li.past { opacity: .55; }
.cc-units li.now { font-weight: 700; color: var(--brand); }
.cc-when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.cc-units li.now .cc-when { color: inherit; }
.class-overview .co-top { align-items: baseline; gap: 10px; flex-wrap: wrap; }
.class-overview .co-top h2 { margin: 0; }
/* the stats in one row: equal columns, a long label wraps instead of pushing a tile to the next line */
.class-overview .co-stats { margin-top: 10px; display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.class-overview .co-stats > div { min-width: 0; }
.class-overview .co-stats div .muted { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.class-overview .co-stats .warn b { color: #d97706; }
.class-overview .co-next { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .9rem; }
.class-overview .co-next .chips { flex-wrap: wrap; gap: 6px; }
.cal-months i { font-style: normal; }
.cal-months .m-n { display: none; }
.cal.mini .cal-months .m-s { display: none; }
.cal.mini .cal-months .m-n { display: inline; }
@media (max-width: 600px) {
  .cal-months .m-s { display: none; }
  .cal-months .m-n { display: inline; }
  .class-overview .co-stats { gap: 6px; }
  .class-overview .co-stats > div { padding: 8px 6px; }
  .class-overview .co-stats div .muted { font-size: .62rem; letter-spacing: .02em; }
}
/* holidays (shaded) and public holidays (marks) in the calendar; the class's PE lessons */
.cal-hol { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(245, 158, 11, .35) 0 4px, rgba(245, 158, 11, .18) 4px 8px); border-radius: 3px; }
.cal-pub { position: absolute; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; background: #f59e0b; opacity: .8; }
.cal-dot, .cal-today { z-index: 1; }
.class-overview .co-lessons { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 10px; font-size: .92rem; }
.class-overview .co-next-lesson { font-weight: 600; color: var(--brand); }
.class-overview .co-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: .92rem; }
.class-overview .co-state select { width: auto; min-height: 36px; }
.class-overview .co-hol { margin: 8px 0 0; font-size: .88rem; }
.lesson-rows { display: grid; gap: 6px; }
.lesson-row { display: grid; grid-template-columns: auto 3em 1fr; align-items: center; gap: 10px; }
.lesson-row input[type=checkbox] { width: 20px; height: 20px; min-height: 0; margin: 0; }
.lesson-row input[type=time] { max-width: 160px; }
/* grade table = student list: the name opens the student (edit / remove) */
.grade-overview .st-edit { background: none; border: 0; padding: 0; margin: 0; min-height: 0; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.grade-overview .st-edit:hover .st-name b, .grade-overview .st-edit:focus-visible .st-name b { text-decoration: underline; }
.grade-overview .st-edit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
.empty-students { display: grid; justify-items: start; gap: 8px; }
.add-students textarea { width: 100%; }
.add-students .import-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* calendar switch (school year / month) and the month view */
.cal-switch { align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.seg { display: inline-flex; gap: 4px; }
.mc-nav { display: inline-flex; align-items: center; gap: 6px; }
.mc-nav b { min-width: 9em; text-align: center; }
.mcal { margin-top: 8px; }
.mc-head, .mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mc-head span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0 4px 4px; }
.mc-day { min-height: 84px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 3px; background: var(--card); min-width: 0; }
.mc-day.out { border: 0; background: none; }
.mc-day.we { background: var(--field); }
.mc-day.hol { background: repeating-linear-gradient(135deg, rgba(245, 158, 11, .16) 0 6px, rgba(245, 158, 11, .07) 6px 12px); }
.mc-day.pub { box-shadow: inset 0 3px 0 #f59e0b; }
.mc-day.today { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444; }
.mc-num { font-size: .8rem; font-weight: 700; color: var(--muted); }
.mc-day.today .mc-num { color: #ef4444; }
.mc-hol, .mc-pubname { font-size: .68rem; color: #b45309; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-lesson { font-size: .72rem; font-weight: 700; background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--ink); border-radius: 5px; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-test { font-size: .7rem; color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-test::before { content: "● "; }
@media (max-width: 600px) {
  .mc-day { min-height: 58px; padding: 3px; }
  .mc-hol, .mc-pubname { display: none; }
  .mc-lesson { font-size: .62rem; padding: 0 2px; }
  .mc-test { font-size: 0; } .mc-test::before { font-size: .7rem; }
}
/* the week's PE lessons of all classes */
.week-plan .wp-top { align-items: center; gap: 10px; flex-wrap: wrap; }
.week-plan .wp-top h2 { margin: 0; }
.wp-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.wp-day { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: grid; gap: 6px; align-content: start; }
.wp-day h4 { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.wp-day.today { border-color: #ef4444; }
.wp-day.today h4 { color: #ef4444; }
.wp-day.free { background: repeating-linear-gradient(135deg, rgba(245, 158, 11, .14) 0 6px, rgba(245, 158, 11, .06) 6px 12px); }
.wp-free { margin: 0; font-size: .78rem; color: #b45309; }
.wp-lesson { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; border-left: 4px solid var(--c); background: var(--field); color: var(--ink); text-decoration: none; }
.wp-lesson:hover, .wp-lesson:focus-visible { background: var(--hl); }
.wp-day.free .wp-lesson { opacity: .5; text-decoration: line-through; }
.wp-time { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.wp-none { margin: 0; }
.lesson-row { grid-template-columns: auto 3em 1fr 6.5em; }
.lesson-row input[type=number] { min-height: 40px; }
.lesson-head { font-size: .75rem; }
.mc-lesson i { font-style: normal; }
.mc-lesson .mc-short { display: none; }
@media (max-width: 600px) { .mc-lesson .mc-full { display: none; } .mc-lesson .mc-short { display: inline; } }
/* the year strip's holiday row: names over the holidays */
.cal-holrow { position: relative; height: 18px; margin-top: 3px; overflow: hidden; }
.cal-holname { position: absolute; top: 0; height: 18px; min-width: 4px; border-radius: 4px; background: rgba(245, 158, 11, .28); border: 1px solid rgba(245, 158, 11, .6); overflow: visible; }
.cal-holname i { position: absolute; left: 2px; top: 1px; font-style: normal; font-size: .66rem; font-weight: 700; line-height: 14px; white-space: nowrap; color: #b45309; background: var(--card); border-radius: 3px; padding: 0 3px; }
@media (prefers-color-scheme: dark) { .cal-holname i { color: #fbbf24; } }
:root[data-theme="dark"] .cal-holname i { color: #fbbf24; }
/* icons in the year plan card (the book next to the Kerncurriculum) */
.year-plan svg { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--brand); }
/* subscription: banner, plans, cancellation */
.bill-banner { background: color-mix(in srgb, var(--brand) 14%, var(--card)); }
.bill-banner.ended { background: color-mix(in srgb, #f59e0b 22%, var(--card)); }
.bill-banner a { font-weight: 700; margin-left: 6px; }
.bill-status { font-weight: 600; }
.bill-status.ended { color: #b45309; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 10px 0; }
.plan { display: grid; gap: 2px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; position: relative; }
.plan.on { border-color: var(--brand); background: var(--hl); }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.plan-price { font-size: 1.5rem; font-weight: 800; }
.cancel-row { margin: 12px 0 0; }
.cancel-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; }
.cancel-facts dt { color: var(--muted); }
.cancel-done { font-weight: 600; color: var(--ok); }
.app-footer .cancel-link { font-weight: 700; }
.bill-banner a, .billing-card a:not(.btn) { color: var(--brand); }
/* student import: classes in a file */
.file-classes { flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.file-classes small { opacity: .7; margin-left: 2px; }
.ic-table td, .ic-table th { padding: 6px 8px; text-align: left; }
.ic-table input[type=checkbox] { width: 20px; height: 20px; min-height: 0; }
.ic-year { max-width: 200px; }
.add-card .tc-actions { flex-direction: column; }
.add-card .tc-actions .tc-btn { width: 100%; justify-content: center; }

/* year plan: what to teach, with suggested times */
.yp-overview { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 10px; }
.yp-overview h3 { margin: 0 0 6px; }
.yp-sched { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.yp-sched li { display: grid; grid-template-columns: 9.5em 1fr auto; gap: 8px; align-items: baseline; }
.yp-when { font-variant-numeric: tabular-nums; white-space: nowrap; }
.yp-len { white-space: nowrap; font-size: .85rem; }
@media (max-width: 520px) { .yp-sched li { grid-template-columns: 1fr auto; gap: 0 8px; } .yp-sched li > span:nth-child(2) { order: -1; grid-column: 1 / -1; } }
.co-unit { margin: 6px 0; }
.mc-unit { display: block; font-size: .65rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .mc-unit { display: none; } }

/* Year plan tab: the class chips, the timeline in lanes, dragging */
.plan-head { gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; }
.plan-head select { min-width: 10em; font-weight: 600; }
.yp-howto { margin: 8px 0 4px; }
.yp-lanes { display: grid; gap: 14px; margin-top: 8px; }
@media (min-width: 1000px) { .yp-lanes { grid-template-columns: 1fr 1fr; } .yp-lane[data-lane="year"] { grid-column: 1 / -1; } }
.yp-lane h3 { margin: 0 0 6px; }
.yp-lane h3 .muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
.yp-list { list-style: none; margin: 0; padding: 6px; display: grid; gap: 6px; min-height: 56px; border: 1px dashed var(--line); border-radius: 12px; }
.yp-list:empty::before { content: attr(data-empty); color: var(--muted); font-size: .85rem; align-self: center; justify-self: center; }
.yp-item { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.yp-item[hidden] { display: none; }
.yp-item.unsure { border-color: #d97706; }
.yp-row { display: flex; align-items: center; gap: 8px; }
.yp-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.yp-when { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--brand); font-weight: 600; font-size: .85rem; }
.yp-handle { flex: none; width: 36px; height: 40px; border: 0; background: var(--field); border-radius: 8px; font-size: 1.2rem; line-height: 1; color: var(--muted);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; padding: 0; }
.yp-handle:active { cursor: grabbing; }
.yp-move { display: flex; gap: 2px; flex: none; }
.yp-more { margin: 4px 0 0 44px; }
.yp-more > summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.yp-ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: .92; box-shadow: 0 10px 30px rgba(0,0,0,.3); list-style: none; margin: 0; transform: rotate(1deg); }
.yp-gap { border: 2px dashed var(--brand); border-radius: 10px; background: color-mix(in srgb, var(--brand) 10%, transparent); }
@media (max-width: 600px) { .yp-len { display: none; } .yp-move { flex-direction: column; } .yp-more { margin-left: 0; } }
.yp-short .yp-top { align-items: baseline; gap: 10px; }
.yp-short .cc-units { font-size: .95rem; }

/* Year plan tab: the calendar – the school year Aug – Jul, holidays hatched, topics as blocks to drag */
.pc-scroll { overflow-x: auto; margin: 6px 0 0; padding-bottom: 6px; }
.pc { min-width: 760px; position: relative; }
.pc-halves { display: flex; font-size: .78rem; font-weight: 700; margin-bottom: 4px; }
.pc-halves span { padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-halves span + span { border-left: 2px solid var(--muted); }
.pc-months { display: grid; grid-template-columns: repeat(12, 1fr); font-size: .72rem; color: var(--muted); text-transform: uppercase; }
.pc-months span { padding: 0 0 4px 4px; }
.pc-track { position: relative; height: 96px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background-color: var(--field);
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: calc(100% / 12) 100%; }
.pc-hol { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(217, 119, 6, .22) 0 5px, transparent 5px 10px); }
.pc-split { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--muted); opacity: .6; }
.pc-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ef4444; z-index: 3; pointer-events: none; }
.pc-block { position: absolute; top: 8px; bottom: 8px; box-sizing: border-box; border: 2px solid hsl(var(--h) 60% 50% / .8); border-left-width: 1px; border-right-width: 1px;
  background: hsl(var(--h) 60% 45% / .30); border-radius: 8px; padding: 5px 6px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; z-index: 1;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pc-block b { font-size: .76rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-block span { font-size: .68rem; color: var(--muted); white-space: nowrap; }
.pc-block.unsure { border-style: dashed; }
.pc-block.sel, .pc-yearbar.sel { outline: 3px solid var(--brand); outline-offset: 1px; z-index: 2; }
.pc-block:focus-visible, .pc-yearbar:focus-visible { outline: 3px solid var(--brand); }
.pc-block.dragging, .pc-yearbar.dragging { opacity: .3; }
.pc-ghost { position: fixed !important; bottom: auto !important; z-index: 1000; pointer-events: none; opacity: .95; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); margin: 0; }
.pc-mark { position: absolute; top: 2px; bottom: 2px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--brand); z-index: 4;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent); pointer-events: none; }
.pc-holnames { position: relative; height: 16px; font-size: .66rem; color: #d97706; }
.pc-holnames span { position: absolute; top: 2px; padding-left: 3px; white-space: nowrap; }
.pc-yearrow { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 46px; padding: 6px; border: 1px dashed var(--line); border-radius: 10px; }
.pc-yearrow.over { border: 2px solid var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.pc-rowlabel { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.pc-yearbar { padding: 7px 12px; border-radius: 8px; border: 1px solid hsl(var(--h) 60% 50% / .8); background: hsl(var(--h) 60% 45% / .30); font-size: .8rem; font-weight: 600;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pc-detail { list-style: none; padding: 0; margin: 10px 0 0; }
.yp-top .seg { display: flex; gap: 4px; }

/* Year plan tab: the grid of all classes, by year level */
.pg-group .pg-top { align-items: baseline; gap: 10px; }
.pg-group .pg-top h2 { margin: 0; }
.pg-scroll { overflow-x: auto; margin-top: 6px; padding-bottom: 4px; }
.pg { min-width: 820px; display: grid; gap: 6px; }
.pg-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: stretch; cursor: pointer; }
.pg-head { cursor: default; }
.pg-name { display: flex; flex-direction: column; justify-content: center; text-decoration: none; color: inherit; min-width: 0;
  position: sticky; left: 0; z-index: 4; background: var(--card); padding-right: 6px; } /* stays in view when the year scrolls sideways */
.pg-head > span:first-child { position: sticky; left: 0; z-index: 4; background: var(--card); }
.pg-name b { font-size: 1rem; }
.pg-name small { font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-track { position: relative; height: 58px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background-color: var(--field);
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: calc(100% / 12) 100%; }
.pg-row:hover .pg-track { border-color: var(--brand); }
.pg-block { position: absolute; top: 4px; height: 32px; box-sizing: border-box; padding: 2px 5px; border-radius: 6px; border: 1px solid hsl(var(--h) 60% 50% / .8);
  background: hsl(var(--h) 60% 45% / .32); font-size: .7rem; font-weight: 600; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; z-index: 1; }
.pg-year { position: absolute; left: 6px; right: 6px; bottom: 3px; font-size: .66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
.pg-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; padding-left: 12px; z-index: 5; pointer-events: none; }
.pg-empty > * { pointer-events: auto; }
@media (max-width: 600px) { .pg-row { grid-template-columns: 70px 1fr; } }

/* Year plan grid: year levels to expand and collapse */
.pg-intro { align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.pg-intro p { margin: 0; min-width: 220px; }
details.pg-group > summary { list-style: none; cursor: pointer; align-items: baseline; gap: 10px; user-select: none; }
details.pg-group > summary::-webkit-details-marker { display: none; }
.pg-chev { display: inline-block; transition: transform .15s; color: var(--muted); font-size: 1.15rem; width: 1em; }
details.pg-group[open] .pg-chev { transform: rotate(90deg); }
details.pg-group:not([open]) { padding-bottom: 12px; }
/* an open year level: its header stays in view while scrolling through it (below the app's header), and a button at its end */
details.pg-group[open] > summary { position: sticky; top: 60px; z-index: 6; background: var(--card); margin: -6px -8px 0; padding: 6px 8px; border-radius: 10px; }
.pg-fold { display: block; margin: 10px auto 0; }

/* The gradebook's settings: inline on wide screens, folded under "⚙" on phones */
.grades-settings > summary { cursor: pointer; color: var(--muted); font-size: .9rem; font-weight: 600; padding: 6px 0; }
@media (min-width: 601px) { .grades-settings > summary { display: none; } }

/* The gradebook on phones: the buttons as an even 2 × 2 grid; a narrow one-line name column, so more grade columns fit */
@media (max-width: 600px) {
  .gh-title, .gh-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
  .gh-title h2 { grid-column: 1 / -1; margin: 0 0 2px; }
  .gh-tools { padding: 8px; }
  .grades-head .gh-title > button, .grades-head .gh-tools > button { width: 100%; margin: 0; min-height: 42px; }
  .grades-head .period-sel, .grades-head .period-sel select { width: 100%; min-height: 42px; margin: 0; }
  .grades-settings { grid-column: 1 / -1; }
  .grades-settings[open] > summary { margin-bottom: 6px; }
  .grade-overview th.student { min-width: 0; width: 128px; max-width: 128px; white-space: nowrap; padding: 4px 4px 4px 8px; }
  .grade-overview th.student .st-cell { width: 76px; overflow: hidden; vertical-align: middle; } /* a fixed width: percentages inside table cells shrink it */
  .grade-overview .student .avatar, .grade-overview .student .st-num { display: none; }
  .grade-overview th.student .note-btn { display: inline-flex; width: auto; margin: 0 0 0 2px; padding: 2px 5px; min-height: 30px; font-size: .72rem; vertical-align: middle; }
  .grade-overview .st-name b { font-size: .86rem; }
  .grade-overview .st-name small { font-size: .74rem; }
  .grade-overview .sort-pill { font-size: .68rem; padding: 4px 8px; white-space: normal; text-align: left; }
  .grade-overview .grp span { font-size: .66rem; }
  /* the name starts at the left edge and ends with … when it is long */
  .grade-overview th.student .st-cell { justify-content: flex-start; text-align: left; padding: 0 2px 0 3px; }
  .grade-overview th.student .st-name { min-width: 0; width: 100%; overflow: hidden; align-items: stretch; text-align: left; }
  .grade-overview th.student .st-name b, .grade-overview th.student .st-name small { display: block; text-align: left; }
  /* test headings: smaller and at most three lines, so the columns stay narrow */
  .grade-overview thead tr.tests th { min-width: 76px; max-width: 104px; font-size: .7rem; padding: 6px 6px; }
  .grade-overview thead tr.tests th a, .grade-overview thead tr.tests th .col-edit { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .grade-overview td { padding: 6px 6px; height: 52px; }
}

/* Phones and tablets: the page never scrolls sideways (wide tables and calendars scroll inside their own box),
   and every field has at least 16px text – smaller text makes iOS zoom in on tap and stay zoomed in */
html, body { max-width: 100%; overflow-x: clip; }
@media (pointer: coarse), (max-width: 1024px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; } /* over the compact sizes of single fields */
}
@media (max-width: 600px) { #csvFormat { display: none; } }

/* The test view on phones: everything as wide as the screen */
@media (max-width: 600px) {
  /* the results: no card around the rows (no double frame), the rows themselves are the cards */
  #rows { padding: 0; background: none; border: 0; box-shadow: none; }
  .result { grid-template-columns: 1.7em minmax(0, 1fr) 100px auto; gap: 8px; padding: 8px 10px; }
  .result .rank { width: 1.7em; height: 1.7em; }
  .result input { padding: 8px 8px; }
  /* statistics: an even row across the width, labels fit */
  .stats { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .stats div .muted { font-size: .64rem; letter-spacing: .02em; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* buttons in the test's toolbar and the timer: shared evenly across the width */
  .card:has(> .row > .stats) .row > button, .card:has(> .row > .stats) .row > label, .card:has(> .row > .stats) .row > .row { flex: 1 1 auto; }
  .card:has(> .row > .stats) .row > .row { width: 100%; }
  .runner .row { width: 100%; }
  .runner .row > button { flex: 1 1 0; min-width: 0; }
}

/* Phones: every pop-up (sheet) is as wide as the screen and sits at the bottom – also those with their own width (e.g. "View test") */
@media (max-width: 480px) {
  dialog.sheet[class] { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; }
}

/* Importing results: what was read, before it is saved */
.result-import .ri-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 40vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.result-import .ri-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.result-import .ri-list li:last-child { border-bottom: 0; }
.result-import .ri-list b { font-variant-numeric: tabular-nums; }
.result-import .ri-warn { color: #b45309; font-size: .88rem; }
.result-import label.btn { cursor: pointer; }

/* ---------- Annual report (Jahresbericht) ---------- */
.report-head { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.report-head h1 { margin: 0; }
.report-meta { margin: 4px 0 14px; }
.report-stats { margin-bottom: 16px; }
.report-sec h2 { margin-top: 0; }
.report-wrap { overflow-x: auto; }
.report-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.report-table th, .report-table td { padding: 7px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.report-table thead th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; background: var(--field); }
.report-table tbody th { font-weight: 600; white-space: nowrap; }
.report-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.report-table tr.future { color: var(--muted); }

/* ---------- Print / Save as PDF: no app frame, no buttons; tables in full length ---------- */
@media print {
  @page { margin: 14mm; }
  :root { --bg: #fff; --card: #fff; --ink: #000; --muted: #555; --line: #ccc; --field: #f2f2f2; --brand: #000; }
  body { background: #fff; color: #000; font-size: 11pt; }
  header, .tabs, .app-footer, #toast, #offlineBar, .banner, .no-print, .crumb, dialog { display: none !important; }
  main#app { padding: 0; margin: 0; max-width: none; }
  .card { box-shadow: none !important; border: 0; padding: 0; margin: 0 0 14px; background: none; }
  .table-wrap, .report-wrap { max-height: none !important; overflow: visible !important; border: 0; }
  .table-wrap th { position: static; }
  tr, .report-sec h2 { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .report-sec { break-inside: auto; }
  /* the gradebook alone: the class name and the grade table */
  body.print-grades #app > :not(.class-head):not(.grades-card) { display: none !important; }
  body.print-grades .class-head > :not(h1) { display: none !important; }
  body.print-grades .gh-tools, body.print-grades .gh-title button, body.print-grades .add-grade,
  body.print-grades .note-btn, body.print-grades .sort-pill { display: none !important; }
  body.print-grades .col-edit { border: 0; background: none; padding: 0; color: inherit; font: inherit; }
}

/* Fehlzeiten column in the gradebook (next to the names) */
.grade-overview .miss { text-align: center; min-width: 64px; border-right: 1px solid var(--line); }
.grade-overview .miss small { display: block; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.grade-overview th.miss-head { font-size: .72rem; vertical-align: bottom; }
.report-table tfoot th, .report-table tfoot td { font-weight: 600; border-top: 2px solid var(--line); border-bottom: 0; }

/* ---------- Schwimmabzeichen ---------- */
.medal.seahorse { background: linear-gradient(135deg, #a5f3fc, #0891b2); color: #fff; }
.swim-overview td.swim-done { color: var(--ok); font-weight: 700; }
.swim-overview th a { color: inherit; }
.swim-ticks td { text-align: center; }
.swim-ticks th small { display: block; max-width: 9em; white-space: normal; font-weight: 500; text-transform: none; letter-spacing: 0; }
.swim-tick { width: 22px; height: 22px; accent-color: var(--brand); cursor: pointer; }
ol.swim-req { margin: 0 0 12px; padding-left: 1.4em; font-size: .9rem; }
ol.swim-req li { margin: 2px 0; }
.swim-req-head { margin: 12px 0 6px; }

/* ---------- Notes on a student (allergy, support …) ---------- */
.st-info { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 5px; vertical-align: .1em; border-radius: 50%;
  background: var(--brand-2); color: #fff; font: 700 12px/1 system-ui, sans-serif; font-style: normal; cursor: pointer; flex: none; }
.st-info.health { background: var(--danger); font-size: 13px; }
.st-cell .st-info { align-self: center; margin-left: -4px; }
@media (max-width: 600px) { /* the narrow name column: the badge in its corner, the name keeps the width */
  .grade-overview th.student .st-cell:has(.st-info) { position: relative; padding-right: 16px; } /* a strip on the right for the badge */
  .grade-overview th.student .st-cell .st-info { position: absolute; top: 50%; right: 1px; transform: translateY(-50%); width: 14px; height: 14px; margin: 0; font-size: 9px; }
  .grade-overview th.student .st-cell .st-info.health { font-size: 10px; }
}
.st-info::before { content: ""; position: absolute; inset: -10px; } /* a bigger tap target */
.st-info { position: relative; }
.st-info-line { margin: 4px 0 0; font-size: .85rem; color: var(--muted); display: flex; gap: 6px; align-items: baseline; }
.st-info-line .st-info { margin-left: 0; cursor: default; }
.st-info-edit { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 4px; margin: 4px 0 12px; min-width: 0; } /* a fieldset is as wide as its content otherwise */
.st-info-edit legend { padding: 0 6px; font-weight: 600; }
.st-info-edit .chips { margin-bottom: 10px; flex-wrap: wrap; overflow: visible; } /* all tags in view, in several lines */
.st-info-edit textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }

/* Pop-ups never wider than the screen: no sideways scrolling, fields shrink with the dialog (also the date field on iPhone) */
dialog.sheet { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
dialog.sheet .field input, dialog.sheet .field select, dialog.sheet .field textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }
dialog.sheet input[type=date] { -webkit-appearance: none; appearance: none; display: block; width: 100%; }
@media (max-width: 480px) {
  dialog.sheet { max-height: calc(100dvh - 12px); }
  /* the student dialog: "Save" stays in reach while scrolling */
  dialog.student-edit form > .row:last-child { position: sticky; bottom: 0; background: var(--card); margin: 0 -20px -20px; padding: 12px 20px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); flex-wrap: nowrap; }
  dialog.student-edit form > .row:last-child .danger { flex: none; }
}

/* ---------- Grade scale (Notenskala) ---------- */
dialog.grade-scale { width: min(720px, calc(100vw - 32px)); }
dialog.grade-scale .picker-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 480px) {
  dialog.grade-scale .picker-body { padding: 16px 12px; }
  .scale-table th, .scale-table td { padding: 7px 6px; font-size: .85rem; }
}
.scale-table { max-height: none; }
.scale-table th, .scale-table td { text-align: center; }
.scale-table thead th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; }
.scale-table tbody th { text-align: left; white-space: nowrap; }
.scale-table tbody th small { display: block; color: var(--muted); font-weight: 500; }
@media print {
  /* only the grade scale: the page behind it hidden, the pop-up as a normal block */
  body.print-scale #app, body.print-scale header, body.print-scale .app-footer { display: none !important; }
  body.print-scale dialog.grade-scale { display: block !important; position: static; width: auto; max-height: none; overflow: visible; box-shadow: none; border-radius: 0; margin: 0; }
  body.print-scale dialog.grade-scale::backdrop { display: none; }
  body.print-scale .scale-table { border: 1px solid #999; }
  body.print-scale .scale-table th, body.print-scale .scale-table td { border: 1px solid #bbb; padding: 6px 8px; font-size: 11pt; }
}

/* Grading systems per school level (account) and the tip on the class overview */
.gs-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.gs-example { font-weight: 500; }
.gs-tip { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 12px 16px; }
.gs-tip a { font-weight: 600; color: var(--brand); }

/* ---------- Class overview: facts, calendar header, plan bars in rows ---------- */
.class-overview .co-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 8px; margin: 12px 0 0; }
.class-overview .co-facts > div { background: var(--field); border-radius: 12px; padding: 8px 12px; min-width: 0; }
.class-overview .co-facts dt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.class-overview .co-facts dd { margin: 0; font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.class-overview .co-facts dd .link { font-size: .82rem; margin-left: 4px; }
.class-overview .co-facts select { width: 100%; min-height: 34px; padding: 4px 10px; font-size: .88rem; }
.class-overview .co-cal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; }
.class-overview .co-cal-head h3 { margin: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); flex: 1; }
.seg-small { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--field); }
.seg-small button { min-height: 28px; padding: 2px 12px; border: 0; border-radius: 8px; background: none; font-size: .8rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg-small button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.cal-bars { display: grid; gap: 4px; margin-top: 8px; }
.cal-lane { position: relative; height: 20px; }
.cal-lane .cal-bar { position: absolute; top: 0; bottom: 0; height: auto; }
.class-overview .co-next { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.class-overview .co-next-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 4px; }
.class-overview .co-next button { min-height: 32px; padding: 4px 12px; font-size: .82rem; }
.class-head > .row { gap: 8px; align-items: center; }
.class-head > .row > .btn, .class-head > .row > button { min-height: 36px; display: inline-flex; align-items: center; }
@media (max-width: 480px) {
  .class-overview .co-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-overview .co-facts > div { padding: 7px 9px; }
}
.class-overview .co-next button { white-space: normal; text-align: left; max-width: 100%; line-height: 1.25; }
/* the class header: "Annual report" (a link) and "New school year" (a button) the same size */
.class-head > .row > .btn.small, .class-head > .row > button.small { min-height: 36px; padding: 6px 14px; font-size: .875rem; font-weight: 600; line-height: 1.2; }
@media (max-width: 480px) { /* the numbers: three per row, labels never broken mid-word */
  .class-overview .co-stats { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .class-overview .co-stats div .muted { overflow-wrap: normal; hyphens: auto; font-size: .64rem; }
}

/* Class overview as three cards: overview on top, calendar (wide) and next tests (narrow) side by side */
.class-overview { display: grid; gap: 16px; margin-bottom: 16px; }
.class-overview > .card, .class-overview .co-grid > .card { margin: 0; }
.class-overview .co-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; } /* both cards as tall as the taller one */
.class-overview .co-grid.single { grid-template-columns: minmax(0, 1fr); }
.class-overview .co-cal .co-cal-head { margin-top: 0; }
.class-overview .co-next { display: block; margin-top: 0; }
.class-overview .co-next h3, .class-overview .co-cal .co-cal-head h3 { margin: 0 0 10px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.class-overview .co-cal .co-cal-head h3 { margin: 0; }
.co-next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.co-next-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--field); }
.co-next-list li > span { min-width: 0; font-weight: 600; font-size: .9rem; line-height: 1.3; overflow-wrap: anywhere; }
.co-next-list li small { display: block; font-weight: 500; font-size: .75rem; }
.class-overview .co-next-list button { flex: none; min-height: 32px; padding: 4px 12px; font-size: .82rem; white-space: nowrap; }
@media (max-width: 860px) { .class-overview .co-grid { grid-template-columns: minmax(0, 1fr); } }

/* Every pop-up's content box has the same inner space (before: only some listed ones – e.g. "Add students" had none and
   its text ran into the edges); a form inside it does not add a second padding */
dialog.sheet .picker-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
dialog.sheet .picker-body form:not(.picker-body) { padding: 0; }
@media (max-width: 480px) { dialog.sheet .picker-body { padding: 16px 16px max(16px, env(safe-area-inset-bottom)); } }
dialog.sheet .picker-body p { margin: 0; }
dialog.sheet code { overflow-wrap: anywhere; } /* long examples wrap instead of running out */
.add-students .import-bar { margin-top: 0; }

/* "Enter grades": test or column without a test */
.col-form .col-mode { align-self: flex-start; }
.col-form .col-test, .col-form .col-own { display: flex; flex-direction: column; gap: 14px; }
.col-form .col-test[hidden], .col-form .col-own[hidden] { display: none; }
.col-form .col-what { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 10px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.col-form .col-what legend { padding: 0 6px; font-weight: 600; font-size: .85rem; }
.col-form .col-what .check { align-items: flex-start; font-size: .9rem; line-height: 1.35; }
.col-form .col-what input:disabled + span { opacity: .5; }

/* grade picker: the result field of a test column (the grade worked out while typing) */
.picker-result { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 10px; padding: 0 !important; }
.picker-result .field { margin: 0; }
.picker-result .pr-grade { align-self: center; padding-top: 18px; font-weight: 700; white-space: nowrap; }
.picker-result .pr-grade .muted { font-weight: 500; white-space: normal; font-size: .82rem; }
.picker-result button { min-height: 44px; }
.picker-or { margin: 0; }
@media (max-width: 480px) { .picker-result { grid-template-columns: minmax(0, 1fr) auto; } .picker-result .pr-grade { grid-column: 1 / -1; padding-top: 0; } }
.picker-saved { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: .88rem; font-weight: 600; background: color-mix(in srgb, var(--ok) 14%, var(--card)); color: var(--ink); }
.picker-saved.warn { background: color-mix(in srgb, #f59e0b 18%, var(--card)); }
.pr-gender { display: inline-flex; gap: 6px; margin-left: 6px; vertical-align: middle; }
.pr-gender button { min-height: 30px; padding: 2px 10px; }

/* Grade columns with technique + game (ball sports) */
.col-form .col-split { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 10px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.col-form .col-split legend { padding: 0 6px; font-weight: 600; font-size: .85rem; }
.col-form .col-split .check { align-items: flex-start; font-size: .9rem; line-height: 1.35; }
.col-form .col-weight[hidden] { display: none; }
.split-parts { display: block; font-size: .68rem; color: var(--muted); white-space: nowrap; }
.split-total { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.split-row { display: grid; gap: 6px; }
.split-row > b { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.col-form .col-split[hidden], .col-form .test-weight[hidden] { display: none; }
.col-form .col-sports { display: grid; gap: 6px; }
.col-form .col-sports > span { font-size: .85rem; font-weight: 600; }
.col-form .col-sports .chips { flex-wrap: wrap; overflow: visible; }
.col-form .col-variant[hidden] { display: none; }

/* "Add students": wider on desktop, two sections (type in / from a file) with a divider */
dialog.add-students { width: min(640px, calc(100vw - 32px)); }
.add-students .as-sec { display: flex; flex-direction: column; gap: 10px; }
.add-students .as-sec h4 { margin: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.add-students .as-file { border-top: 1px solid var(--line); padding-top: 16px; }
.add-students #addStudents { gap: 10px; }
.add-students #addStudents p:last-child { margin: 0; }
.add-students textarea { min-height: 130px; }
.add-students #csvPreview:empty { display: none; } /* no extra space at the bottom until a file is read */