/* Checkie by Learnnio — the back office as Checkie's clipboard: every class a sheet, every session a box that gets a check.
   World from the app logo: aqua field, white sticker tiles, deep pine ink, lime ticks, sun yellow, the calico mascot.
   Mitr for headings and figures, IBM Plex Sans Thai for text. Printed paper (print.css) keeps the institute's own look. */

@font-face { font-family: "Plex Thai"; font-weight: 400; font-display: swap; src: url(../fonts/IBMPlexSansThai-Regular.woff2) format("woff2"), url(../fonts/IBMPlexSansThai-Regular.ttf) format("truetype"); }
@font-face { font-family: "Plex Thai"; font-weight: 500; font-display: swap; src: url(../fonts/IBMPlexSansThai-Medium.woff2) format("woff2"), url(../fonts/IBMPlexSansThai-Medium.ttf) format("truetype"); }
@font-face { font-family: "Plex Thai"; font-weight: 600; font-display: swap; src: url(../fonts/IBMPlexSansThai-SemiBold.woff2) format("woff2"), url(../fonts/IBMPlexSansThai-SemiBold.ttf) format("truetype"); }
@font-face { font-family: "Mitr"; font-weight: 500; font-display: swap; src: url(../fonts/Mitr-Medium.woff2) format("woff2"); }
@font-face { font-family: "Mitr"; font-weight: 600; font-display: swap; src: url(../fonts/Mitr-SemiBold.woff2) format("woff2"); }

:root {
  /* the logo's field and ink */
  --aqua: #8ee8e0;          /* the logo's aqua: rail, login field, theme colour */
  --aqua-2: #7fe0d8;
  --aqua-wash: #e3f8f4;     /* hover, selected rows, the live clipboard */
  --sun: #ffd23f;           /* yellow sparkle: leave, the clip, the wordmark tick */
  --lime: #5cbf3a;          /* the clipboard's tick: a session that was attended */
  --pine: #1f6b4a;          /* deep green of the line icons and the wordmark */

  --rail: #1f6b4a;          /* pine: the filled action, toast, check-in bar (white type 6.4:1) */
  --rail-2: #17573c;
  --rail-bg: #8ee8e0;       /* the aqua rail and phone bar */
  --rail-ink: #134a33;      /* 7:1 on aqua */
  --rail-mute: #1f5a42;
  --rail-hover: rgb(255 255 255 / .42);
  --ground: #effaf7;
  --panel: #ffffff;
  --panel-2: #f3fbf9;
  --ink: #133b2e;
  --ink-2: #355a4c;
  --mute: #557468;
  --rule: #dcefe9;
  --rule-2: #c3e3da;
  --field-line: #6b9688;    /* 3.3:1 on white: a field's edge is visible */
  --placeholder: #5d7a6f;
  --focus: #0d7f73;

  /* signal and states */
  --signal: #1f6b4a;
  --signal-press: #134a33;
  --ok: #23803a;
  --ok-bg: #e8f6dc;
  --leave: #ffd23f;
  --leave-ring: #d9a400;
  --leave-ink: #6b4f00;
  --leave-bg: #fff4c4;
  --bad: #c63b33;
  --bad-press: #a52f28;
  --bad-bg: #fdecea;
  --info-bg: #e5f2fb;
  --info-ink: #1b5689;

  /* course lines */
  --l-rose: #c2366e;
  --l-cobalt: #1e5bff;
  --l-emerald: #128552;
  --l-violet: #7a4fd8;
  --l-teal: #087d8c;
  --l-brown: #a0561c;
  --l-ink: #0b5a4e;
  /* pastel lines: each with the dark ink its labels and marks need (5:1 or more on the colour) */
  --l-pink: #f4a8c3;   --l-pink-ink: #7d1c47;
  --l-peach: #f6b796;  --l-peach-ink: #7a3312;
  --l-butter: #f3d888; --l-butter-ink: #634700;
  --l-mint: #94dcc0;   --l-mint-ink: #0c5641;
  --l-sky: #a3cbf3;    --l-sky-ink: #11466f;
  --l-lilac: #c6b4f0;  --l-lilac-ink: #432c8c;
  --seafoam: #8ee8e0;
  --seafoam-wash: #e3f8f4;
  --powder: #b9cdf2;
  --powder-wash: #edf2fd;
  --stop-ring: #8fb3a8;

  /* type: Mitr speaks the headings and figures, Plex Thai the text */
  --display: "Mitr", "Plex Thai", "Leelawadee UI", "Noto Sans Thai", system-ui, sans-serif;
  --t-1: 13px;   /* labels, meta, chips */
  --t-2: 15px;   /* body, rows, controls */
  --t-3: 17px;   /* section titles, names that lead a row */
  --t-4: 22px;   /* figures */
  --t-5: 30px;   /* page title, the figure a page is about */
  --t-micro: var(--t-1);
  --t-meta: var(--t-1);
  --t-body: var(--t-2);
  --t-title: var(--t-3);
  --t-figure: var(--t-4);
  --t-page: var(--t-5);

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 22px;
  --shadow-pop: 0 2px 4px rgb(19 74 51 / .08), 0 18px 40px -16px rgb(19 74 51 / .36);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --rail-w: 244px;
  --control: 40px;
}

/* ── base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #a9dcd2 transparent; }
body {
  margin: 0;
  font-family: "Plex Thai", "Leelawadee UI", "Noto Sans Thai", system-ui, sans-serif;
  font-size: var(--t-2);
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: #c4efe7; color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #a9dcd2; border-radius: 10px; border: 3px solid var(--ground); }
::-webkit-scrollbar-track { background: transparent; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 600; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.checkin-bar :focus-visible, .toast :focus-visible { outline-color: #fff; }
.ico { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mute { color: var(--mute); }
.nowrap { white-space: nowrap; }
.demo-tag { font-size: var(--t-1); font-weight: 500; color: var(--leave-ink); }
.rail .demo-tag { display: block; padding: 0 10px 8px; color: var(--leave-ink); }

/* ── shell ────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.rail {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px 12px;
  background: var(--rail-bg); color: var(--rail-ink);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; text-decoration: none; font-size: var(--t-3); font-weight: 600; letter-spacing: .01em; }
.brand .mark { width: 26px; height: 26px; }
.mark { flex: none; }
.rail-nav { display: grid; gap: 2px; }
.rail-nav a {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 0 10px; border-radius: var(--r);
  color: var(--rail-mute); text-decoration: none; font-size: var(--t-2); font-weight: 500;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.rail-nav a .ico { width: 18px; height: 18px; }
.rail-nav a:hover { background: var(--rail-hover); color: var(--rail-ink); }
/* the open page is the stop the line is at: a red stop beside a lit label */
.rail-nav a.on { background: #fff; color: var(--rail-ink); font-weight: 600; }
.rail-nav a.on { box-shadow: inset 3px 0 0 var(--rail); }
.rail-foot { margin-top: auto; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid rgb(13 58 50 / .12); }
.rail-lines { display: flex; gap: 3px; padding: 0 10px 10px; }
.rail-lines i { flex: 1; height: 3px; border-radius: 2px; background: var(--c); opacity: .8; }
.who { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
.who strong { display: block; font-size: var(--t-1); font-weight: 500; line-height: 1.3; }
.who small { color: var(--rail-mute); font-size: var(--t-1); }
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--rail-2); color: #fff; font-weight: 600; font-size: 13px;
}
.rail-out { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; color: var(--rail-mute); text-decoration: none; font-size: var(--t-1); border-radius: var(--r); }
.rail-out:hover, .rail-out.on { color: var(--rail-ink); background: var(--rail-hover); }

.main { padding: 24px clamp(16px, 3vw, 36px) 56px; min-width: 0; max-width: 1360px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.page-head h1 { font-size: var(--t-5); line-height: 1.3; letter-spacing: -.005em; text-wrap: balance; }
.page-head p { color: var(--mute); font-size: var(--t-1); margin-top: 2px; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.crumb { display: inline-flex; align-items: center; gap: 2px; min-height: 28px; margin-bottom: 4px; color: var(--mute); text-decoration: none; font-size: var(--t-1); }
.crumb:hover { color: var(--ink); }

/* ── buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--control); padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--r); cursor: pointer;
  font-size: var(--t-2); font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn .ico { width: 16px; height: 16px; }
.btn-go { background: var(--rail); color: #fff; }
.btn-go:hover { background: #17573c; }
.btn-line { background: var(--panel); color: var(--ink); border-color: var(--rule-2); }
.btn-line:hover { border-color: var(--ink-2); background: var(--panel-2); }
.btn-ink { background: var(--rail); color: #fff; }
.btn-ink:hover { background: var(--rail-2); }
.btn-quiet { background: transparent; color: var(--ink-2); padding-inline: 8px; }
.btn-quiet:hover { background: #e3f6f2; color: var(--ink); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { background: var(--bad-press); }
.btn-danger-quiet { color: var(--bad); }
.btn-danger-quiet:hover { background: var(--bad-bg); color: var(--bad-press); }
.danger-foot { display: flex; justify-content: flex-end; margin: 0; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: var(--t-1); }
.btn-icon { width: var(--control); padding: 0; }
.btn-sm.btn-icon { width: 30px; }
.btn[disabled], .btn[disabled]:hover { background: #dcf3ee; color: var(--ink-2); border-color: transparent; box-shadow: none; cursor: not-allowed; }
.btn[disabled] .ico { opacity: .6; }

/* ── panels ───────────────────────────────────────────── */
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.panel-head h2 { font-size: var(--t-2); line-height: 1.35; }
.panel-head a.more { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-1); color: var(--ink-2); text-decoration: none; }
.panel-head a.more:hover { color: var(--signal); }
.panel-head > .mute { font-size: var(--t-1); }
.panel-body { padding: 16px; }
.panel-head + .panel-body { padding-top: 14px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.stack { display: grid; gap: 16px; }

/* ── route badge ──────────────────────────────────────── */
.route {
  display: inline-grid; place-items: center; flex: none;
  min-width: 30px; height: 22px; padding: 0 6px;
  border-radius: var(--r-sm); background: var(--c); color: var(--k, #fff);
  font-weight: 600; font-size: 12.5px; letter-spacing: .03em; line-height: 1;
}
.route-sm { min-width: 24px; height: 18px; font-size: 11px; padding: 0 4px; }
.route-lg { min-width: 40px; height: 32px; font-size: 15px; border-radius: var(--r); }
.route.is-ended { background: var(--panel-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--field-line); }
.line-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }

/* ── stop track ───────────────────────────────────────── */
.track { --s: 11px; --w: 3px; display: flex; align-items: center; width: 100%; min-width: 0; }
.track-sm { --s: 9px; --w: 3px; }
.track-lg { --s: 18px; --w: 5px; }
.track.dense { --s: 7px; --w: 3px; }
.track .seg { flex: 1 1 0; min-width: 2px; height: var(--w); background: var(--rule-2); transition: background .5s var(--ease); }
.track.dense .seg { min-width: 1px; }
.track .seg.run { background: var(--c); }
.track .stop { position: relative; flex: none; width: var(--s); height: var(--s); border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 var(--w) var(--stop-ring); }
.track .s-in { background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, var(--c)) 40%, transparent); }
.track .s-leave { background: var(--panel); box-shadow: inset 0 0 0 var(--w) var(--leave-ring); }
.track .s-absent { background: var(--panel); box-shadow: inset 0 0 0 var(--w) var(--bad); }
.track .s-absent::after { content: ""; position: absolute; inset: 8%; background: linear-gradient(45deg, transparent 40%, var(--bad) 40%, var(--bad) 60%, transparent 60%); border-radius: 50%; }
.track .s-today { background: var(--panel); box-shadow: inset 0 0 0 var(--w) var(--k, var(--c)), 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); transform: scale(1.25); }
.track-lg .s-today { animation: beacon 2.4s var(--ease) infinite; }
@keyframes beacon {
  0%, 100% { box-shadow: inset 0 0 0 var(--w) var(--c), 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent); }
  50% { box-shadow: inset 0 0 0 var(--w) var(--c), 0 0 0 2px var(--panel), 0 0 0 9px color-mix(in srgb, var(--c) 0%, transparent); }
}
.track .stop.lit { animation: lit .9s var(--ease) both; }
@keyframes lit { 40% { transform: scale(1.7); } }
.track-lg .stop { transition: transform .2s var(--ease); }
.track-lg .stop:hover { transform: scale(1.3); z-index: 2; }
.track-lg .stop[data-tip]:hover::before {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(.8);
  background: var(--rail); color: #fff; font-size: var(--t-1); font-weight: 500; white-space: nowrap;
  padding: 4px 8px; border-radius: var(--r-sm); pointer-events: none;
}
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-1); color: var(--mute); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend .k-in { background: var(--c, var(--ink-2)); }
.legend .k-leave { box-shadow: inset 0 0 0 2px var(--leave-ring); }
.legend .k-absent { box-shadow: inset 0 0 0 2px var(--bad); background: linear-gradient(45deg, transparent 40%, var(--bad) 40%, var(--bad) 60%, transparent 60%); }
.legend .k-next { box-shadow: inset 0 0 0 2px var(--stop-ring); }

/* ── status: a dot and a word; a filled pill only where money or "now" asks for attention ── */
.chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--t-1); font-weight: 500; line-height: 1.4; color: var(--ink-2); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--stop-ring); flex: none; }
.chip:has(.ico)::before { display: none; }
.chip .ico { width: 14px; height: 14px; }
.chip-ok { color: var(--ok); }
.chip-ok::before { background: var(--ok); }
.chip-leave { color: var(--leave-ink); }
.chip-leave::before { background: var(--leave); }
.chip-leave.is-count::before { width: 8px; height: 8px; background: radial-gradient(circle, var(--leave-ink) 0 1.5px, transparent 2px); box-shadow: inset 0 0 0 1.5px var(--leave-ring); }
.chip-bad { color: var(--bad); }
.chip-bad::before { background: var(--bad); }
.chip-info { color: var(--info-ink); }
.chip-info::before { background: var(--focus); }
.chip-live { padding: 1px 8px; border-radius: 999px; background: var(--rail); color: #fff; font-size: var(--t-1); }
.chip-live::before { width: 6px; height: 6px; background: #fff; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ── today: status line ───────────────────────────────── */
.signals { display: flex; flex-wrap: wrap; align-items: center; margin: -8px 0 16px; font-size: var(--t-1); color: var(--mute); }
.signal { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 14px; text-decoration: none; color: var(--ink-2); border-left: 1px solid var(--rule-2); }
.signal:first-child { padding-left: 0; border-left: 0; }
.signal .ico { width: 15px; height: 15px; color: var(--mute); }
.signal b { font-weight: 600; color: var(--ink); }
.signal:hover { color: var(--ink); }
.signal:hover span { text-decoration: underline; text-underline-offset: 3px; }
.signal.warn b, .signal.warn .ico { color: var(--bad); }
.signal.wait b, .signal.wait .ico { color: var(--leave-ink); }

/* ── today: departure list ────────────────────────────── */
.lines { display: grid; }
.line {
  display: grid; grid-template-columns: 64px auto minmax(0, 1fr) auto; align-items: center; gap: 6px 14px;
  padding: 12px 16px; border-top: 1px solid var(--rule); text-decoration: none;
  transition: background .15s var(--ease);
}
.lines > :first-child, .lines > :first-child .line { border-top: 0; }
.line:hover { background: var(--panel-2); }
.line .t { font-weight: 600; font-size: var(--t-2); line-height: 1.25; }
.line .t small { display: block; color: var(--mute); font-weight: 400; font-size: var(--t-1); }
.line .what { min-width: 0; }
.line .what strong { display: block; font-size: var(--t-2); font-weight: 500; line-height: 1.35; }
.line .what > span { color: var(--mute); font-size: var(--t-1); }
.line .track { grid-column: 3 / 4; }
.line .end { text-align: right; display: grid; justify-items: end; gap: 2px; }
.line .end b { font-size: var(--t-1); font-weight: 500; color: var(--mute); }
.line.is-done .what strong { color: var(--ink-2); }
.line.is-live { background: transparent; border-top: 0; }
.line.is-live .track { grid-column: 2 / -1; padding: 6px 2px 2px; }
.live-wrap { border-top: 1px solid var(--rule); background: color-mix(in srgb, var(--rail) 3%, var(--panel)); }
.live-wrap .line { border-top: 0; background: transparent; }
.live-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 2px 16px 12px 94px; }
.kid { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 10px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--rule); font-size: var(--t-1); font-weight: 500; }
.kid .chip { font-size: var(--t-1); }
.live-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 14px 94px; flex-wrap: wrap; }
.live-cta p { color: var(--mute); font-size: var(--t-1); }

/* ── rows, money, bars ────────────────────────────────── */
.rows > * + * { border-top: 1px solid var(--rule); }
.row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.row .grow { flex: 1; min-width: 0; }
.row strong { display: block; font-size: var(--t-2); font-weight: 500; line-height: 1.35; }
.row small { display: block; color: var(--mute); font-size: var(--t-1); }
a.row { text-decoration: none; transition: background .15s var(--ease); }
a.row:hover { background: var(--panel-2); }
.row-cue { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.row:hover .row-cue { color: var(--signal); }
.money { font-weight: 600; white-space: nowrap; }
.money.plus { color: var(--ok); }
.money.minus { color: var(--ink); }
.money.is-owe, .owe-row .money { color: var(--bad); }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: var(--t-1); }
.bar { height: 6px; border-radius: 6px; background: #e2f4ef; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--ok)); }
.net { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--rule); font-size: var(--t-1); color: var(--mute); }
.net b { font-size: var(--t-4); font-weight: 600; color: var(--ink); }

/* ── toolbar, tabs, search ────────────────────────────── */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.search { position: relative; flex: 1 1 260px; max-width: 380px; }
.search .ico { position: absolute; left: 10px; top: 50%; translate: 0 -50%; color: var(--mute); width: 16px; height: 16px; }
.search input { padding-left: 34px; }
.seg-tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r); background: #dcf3ee; }
.seg-tabs a, .seg-tabs button {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--r-sm); border: 0; background: transparent; cursor: pointer;
  font-size: var(--t-1); font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.seg-tabs .on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(11 70 60 / .12); }
.seg-tabs .n { color: var(--mute); margin-left: 5px; }
.subnav { display: flex; gap: 2px; margin: -8px 0 20px; border-bottom: 1px solid var(--rule-2); overflow-x: auto; scrollbar-width: none; }
.subnav a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; text-decoration: none; font-weight: 500; font-size: var(--t-2); color: var(--mute); white-space: nowrap; }
.subnav a .ico { width: 16px; height: 16px; }
.subnav a:hover { color: var(--ink); }
.subnav a.on { color: var(--ink); border-color: var(--rail); }

/* ── tables ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table-wrap:has(.row-menu[open]) { overflow: visible; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-2); }
.table th { text-align: left; font-size: var(--t-1); font-weight: 500; color: var(--mute); padding: 8px 12px; background: var(--panel-2); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tbody tr { transition: background .12s var(--ease); }
.table tbody tr:hover { background: var(--panel-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot td { border-top: 1px solid var(--rule-2); border-bottom: 0; padding-block: 12px; font-weight: 600; }
.table .r { text-align: right; }
.table th:first-child, .table td:first-child { padding-left: 16px; }
.table th:last-child, .table td:last-child { padding-right: 16px; }
.table .who-cell { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.table .who-cell strong { display: block; font-weight: 500; line-height: 1.3; }
.table .who-cell small { display: block; color: var(--mute); font-size: var(--t-1); }
.table tr.is-new { animation: rise .45s var(--ease); background: color-mix(in srgb, var(--leave) 8%, var(--panel)); }
.row-act { display: flex; gap: 2px; }
.table .row-act { justify-content: flex-end; }
.face {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--c, var(--l-cobalt)) var(--kw, 12%), #fff);
  color: var(--k, color-mix(in srgb, var(--c, var(--l-cobalt)) 82%, #000));
  font-weight: 600; font-size: 13px;
}
.face-lg { width: 52px; height: 52px; font-size: 20px; }
.face-xl { width: 88px; height: 88px; font-size: 34px; }
.note-date { flex: none; width: 56px; font-weight: 500; font-size: var(--t-1); padding-top: 1px; }
.note-text { display: block; font-size: var(--t-2); }
[data-sum-fee] { font-size: var(--t-3); }
.routes { display: flex; gap: 4px 10px; flex-wrap: wrap; }
.route-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-meta); color: var(--ink-2); white-space: nowrap; }
.doc-link { white-space: nowrap; font-weight: 500; color: var(--ink); text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.doc-link:hover { color: var(--signal); text-decoration-color: currentColor; }

/* ── forms ────────────────────────────────────────────── */
.input, .select, .textarea {
  width: 100%; min-height: var(--control); padding: 6px 10px;
  border: 1px solid var(--field-line); border-radius: var(--r); background: var(--panel);
  font-size: var(--t-2); color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--placeholder); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgb(30 91 255 / .18); }
.select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2356688a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.field { display: grid; gap: 5px; align-content: start; }
.field > span { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.field > small { font-size: var(--t-1); color: var(--mute); }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea, .input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px rgb(194 42 31 / .12); }
.field > .field-error, .field-error { display: flex; align-items: center; gap: 6px; color: var(--bad); font-weight: 500; font-size: var(--t-1); }
.field-error::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.form-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.input-affix { position: relative; display: block; }
.input-affix .input { padding-right: 44px; }
.input-affix em { position: absolute; right: 10px; top: 50%; translate: 0 -50%; font-style: normal; color: var(--mute); font-size: var(--t-1); }
.input-icon { position: relative; display: block; }
.input-icon .ico { position: absolute; left: 10px; top: 50%; translate: 0 -50%; color: var(--mute); width: 16px; height: 16px; }
.input-icon .input { padding-left: 34px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--t-1); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--rail); }
.check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* facts, rules, callouts */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: var(--t-2); }
.facts dt { color: var(--mute); }
.facts dd { font-weight: 500; }
.facts dd.is-owe { color: var(--bad); }
.rules { display: grid; gap: 8px; font-size: var(--t-1); color: var(--ink-2); }
.rules li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.rules .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--mute); }
.callout { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: var(--r); font-size: var(--t-1); line-height: 1.45; }
.callout .ico { width: 16px; height: 16px; margin-top: 2px; }
.callout.leave { background: var(--leave-bg); color: var(--leave-ink); }
.callout.bad { background: var(--bad-bg); color: var(--bad); }
.callout.info { background: var(--info-bg); color: var(--info-ink); }
.slip-again { display: grid; gap: 6px; }
.slip-again .check { align-items: flex-start; font-weight: 600; }
.slip-again .check input { margin-top: 2px; flex: none; }

/* ── packages and pickers ─────────────────────────────── */
.pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 16px; }
.pkg { display: grid; gap: 12px; padding: 14px; min-width: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); }
.pkg > * { min-width: 0; }
.pkg-top { display: flex; align-items: center; gap: 10px; }
.pkg-top strong { flex: 1; font-size: var(--t-4); font-weight: 600; line-height: 1.1; }
.pkg-top strong small { font-size: var(--t-meta); color: var(--mute); font-weight: 400; }
.pkg-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 10px; border-top: 1px solid var(--rule); }
.pkg-facts dt { font-size: var(--t-1); color: var(--mute); }
.pkg-facts dd { font-size: var(--t-2); font-weight: 600; }
.pkg-foot { display: flex; align-items: center; justify-content: space-between; margin: -4px -6px -6px 0; }
.pkg-foot small { font-size: var(--t-1); }
.panel > .panel-body > .rules { padding-top: 12px; border-top: 1px solid var(--rule); }
.pkgs + .panel-body { padding-top: 0; }

.pick-pkg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pick { position: relative; cursor: pointer; }
.pick input, .day input, .swatch input, .ck-opt input, .choose input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card { display: grid; gap: 2px; height: 100%; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-lg); transition: border-color .15s var(--ease), background .15s var(--ease); }
.pick-card b { font-size: var(--t-3); font-weight: 600; line-height: 1.2; }
.pick-card .num { font-weight: 500; font-size: var(--t-2); }
.pick-card small { color: var(--mute); font-size: var(--t-1); }
.pick:hover .pick-card { border-color: var(--ink-2); }
.pick input:checked + .pick-card { border-color: var(--rail); background: #e6f8f4; box-shadow: inset 0 0 0 1px var(--rail); }
.pick input:focus-visible + .pick-card, .day input:focus-visible + span, .ck-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.days { display: flex; flex-wrap: wrap; gap: 6px; }
.day span { display: inline-grid; place-items: center; min-width: 44px; height: 32px; padding: 0 8px; border: 1px solid var(--rule-2); border-radius: var(--r); font-size: var(--t-2); font-weight: 500; cursor: pointer; }
.day input:checked + span { background: var(--rail); border-color: var(--rail); color: #fff; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; max-width: 228px; }
.swatch { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, var(--c)) 30%, transparent), 0 0 0 2px var(--panel), 0 0 0 3px transparent; transition: box-shadow .15s var(--ease); }
.swatch:has(input:checked) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, var(--c)) 30%, transparent), 0 0 0 2px var(--panel), 0 0 0 4px var(--k, var(--c)); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 5px; }
.choose .row { cursor: pointer; }
.choose .row:hover { background: var(--panel-2); }
.choose .row:has(input:checked) { background: #e6f8f4; box-shadow: inset 2px 0 0 var(--rail); }
.choose .row:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.student-pick { display: grid; }
.picked { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel-2); }
.picked .grow { flex: 1; min-width: 0; }
.picked strong { display: block; font-weight: 500; line-height: 1.3; }
.picked small { color: var(--mute); font-size: var(--t-1); }
.picked.arrive { animation: rise .35s var(--ease); }
.pick-results { margin-top: 6px; padding: 4px; display: grid; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-pop); }
.pick-results .row { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--r); padding: 6px 8px; font: inherit; color: inherit; }
.pick-results .row:hover, .pick-results .row:focus-visible, .pick-results .row.is-active { background: #e3f6f2; }
.pick-results li.row { padding: 8px 10px; font-size: var(--t-1); }
.drop { display: grid; justify-items: center; gap: 2px; padding: 20px 16px; text-align: center; cursor: pointer; border: 1px dashed var(--field-line); border-radius: var(--r-lg); color: var(--ink-2); background: var(--panel-2); font-size: var(--t-2); transition: border-color .15s var(--ease), background .15s var(--ease); }
.drop:hover { border-color: var(--rail); background: #e6f8f4; }
.drop small { color: var(--mute); font-size: var(--t-1); }
.drop .ico { color: var(--mute); }
.drop:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.drop-sm { padding: 12px; }
.drop.has-file > .ico, .drop.has-file > strong, .drop.has-file > small { display: none; }
.drop-preview { display: flex; align-items: center; gap: 12px; text-align: left; }
.drop-preview img { width: 44px; height: 56px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--rule); }
.drop-preview b { display: block; font-weight: 500; color: var(--ink); max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-preview small { color: var(--mute); }
.pv-name { display: block; font-size: var(--t-2); font-weight: 500; line-height: 1.3; }
.more-opts { border-top: 1px solid var(--rule); padding-top: 6px; }
.more-opts summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 32px; cursor: pointer; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); list-style: none; }
.more-opts summary::-webkit-details-marker { display: none; }
.more-opts summary::before { content: ""; width: 6px; height: 6px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: -45deg; transition: rotate .2s var(--ease); }
.more-opts[open] summary::before { rotate: 45deg; }
.more-opts summary b { color: var(--ink); font-weight: 500; }
.more-opts summary .mute { font-weight: 400; font-size: var(--t-1); }

/* ── Thai date / time field ───────────────────────────── */
.datefield { position: relative; display: grid; }
.datefield > * { grid-area: 1 / 1; }
.datefield-face { display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.datefield-face .ico { width: 16px; height: 16px; color: var(--mute); }
.datefield.is-empty [data-datefield-text] { color: var(--placeholder); }
.datefield-input { position: relative; z-index: 1; width: 100%; min-height: var(--control); opacity: 0; cursor: pointer; font-size: 16px; border: 0; }
.datefield-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.datefield-clear { z-index: 2; justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-right: 34px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.datefield-clear:hover { color: var(--ink); }
.datefield.is-empty .datefield-clear { display: none; }
.datefield:hover .datefield-face { border-color: var(--ink-2); }
.datefield:focus-within .datefield-face { border-color: var(--focus); box-shadow: 0 0 0 3px rgb(30 91 255 / .18); }

/* ── dialogs, confirm, toast ──────────────────────────── */
.dialog { width: min(540px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow-pop); }
.dialog::backdrop { background: rgb(11 70 60 / .4); }
.dialog[open] { animation: rise .28s var(--ease); }
.dialog .panel-head { border-bottom: 1px solid var(--rule); }
.dialog .panel-head h2 { font-size: var(--t-3); }
.dialog-sm { width: min(420px, calc(100vw - 32px)); }
#pay-dialog { width: min(640px, calc(100vw - 32px)); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.confirm-body { display: grid; gap: 6px; padding: 20px; }
.confirm-body h2 { font-size: var(--t-3); line-height: 1.4; }
.confirm-body p { color: var(--ink-2); font-size: var(--t-2); }
.confirm-body .form-foot { padding-top: 12px; }
.confirm-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bad-bg); color: var(--bad); margin-bottom: 6px; }
.confirm-icon .ico { width: 18px; height: 18px; }
.dialog.is-block .confirm-icon { background: var(--leave-bg); color: var(--leave-ink); }
.dialog.is-ask .confirm-icon { background: var(--info-bg); color: var(--info-ink); }
.toast {
  position: fixed; z-index: 40; left: 50%; bottom: 20px; translate: -50% 0;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 14px; border-radius: var(--r-lg); background: var(--rail); color: #fff;
  font-size: var(--t-2); box-shadow: var(--shadow-pop);
}
.toast > .ico { width: 16px; height: 16px; color: #b6ea8f; }
.toast.is-bad > .ico { color: #ffb4a8; }
.is-saving { opacity: .6; transition: opacity .2s; }
.toast.in { animation: rise .35s var(--ease); }
.toast-undo { min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--r); background: rgb(255 255 255 / .12); color: #fff; font: inherit; font-weight: 500; cursor: pointer; }
.toast-undo:hover { background: rgb(255 255 255 / .2); }

/* ── empty state ──────────────────────────────────────── */
.empty { display: grid; justify-items: center; gap: 4px; padding: 32px 16px 36px; text-align: center; color: var(--ink-2); }
.empty > .ico { width: 22px; height: 22px; color: var(--mute); }
.empty strong { font-size: var(--t-2); font-weight: 500; color: var(--ink); }
.empty p { font-size: var(--t-1); color: var(--mute); max-width: 36ch; margin-bottom: 8px; }
.empty-line { display: flex; align-items: center; width: 96px; margin-bottom: 8px; }
.empty-line i { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--stop-ring) 0 5px, transparent 5px 9px); }
.empty-line b { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--stop-ring); }

/* ── enrollment ───────────────────────────────────────── */
.journey-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px 0 4px; }
.journey-stat { display: grid; gap: 2px; padding: 0 16px; }
.journey-stat + .journey-stat { border-left: 1px solid var(--rule); }
.journey-stat b { font-size: var(--t-4); line-height: 1.1; font-weight: 600; letter-spacing: -.01em; }
.journey-stat b small { font-size: 15px; color: var(--mute); font-weight: 500; }
.journey-stat b.is-date { font-size: var(--t-4); padding-top: 4px; }
.journey-stat > span { font-size: var(--t-1); color: var(--ink-2); line-height: 1.35; }
.journey-stat > span br { display: none; }
.journey-stat > span small { display: block; color: var(--mute); font-size: var(--t-1); }
.journey-line { padding: 22px 20px 6px; }
.journey-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--t-1); color: var(--mute); }
.journey .legend { padding: 4px 20px 14px; }
.more-row { padding: 8px; border-top: 1px solid var(--rule); display: flex; justify-content: center; }

/* payment panel: one bordered strip whose edge colour says what is owed */
.pay { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 18px; align-items: center; padding: 14px 16px; margin-bottom: 16px; }
.pay-wait { border-color: var(--leave-ring); }
.pay-owe { border-color: var(--bad); }
.pay-ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--rule)); }
.pay.arrive { animation: rise .4s var(--ease); }
.pay-slip { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r); }
.pay-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pay-title h2 { font-size: var(--t-3); line-height: 1.35; }
.pay-main > p { font-size: var(--t-1); margin-top: 2px; }
.pay-compare { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 8px; }
.pay-compare dt { font-size: var(--t-1); color: var(--mute); }
.pay-compare dd { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-2); }
.pay-compare .ok dd { color: var(--ok); }
.pay-act { display: grid; gap: 6px; justify-items: stretch; }
.pay-okmark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ok); color: #fff; }
.pay-okmark .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.pay-okmark.is-wait { background: var(--leave-bg); color: var(--leave-ink); }
.pay-okmark.is-owe { background: var(--bad-bg); color: var(--bad); }
.pay-okmark.is-owe .ico, .pay-okmark.is-wait .ico { stroke-width: 2; }
.pay-dlg { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
.pay-dlg [data-pay-drop] { min-height: 240px; }
.pay-cashnote { display: grid; place-items: center; gap: 8px; min-height: 240px; padding: 16px; border: 1px dashed var(--rule); border-radius: var(--r); color: var(--mute); text-align: center; font-size: var(--t-1); }
/* hints that come and go inside a dialog keep their room, so the buttons below never move under the pointer */
[data-mark-effect][hidden] { display: flex !important; visibility: hidden; }
.pay-dlg-side .pay-hints { display: grid; min-height: 46px; }
.pay-dlg-side { display: grid; gap: 12px; }
.pay-log { display: grid; }
.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 8px 8px 16px; border-top: 1px solid var(--rule); }
.pay-row .row-act { margin-left: auto; }
.pay-row:first-child { border-top: 0; }
.pay-row-main { flex: 1; min-width: 0; display: grid; }
.pay-row-main b { font-size: var(--t-2); font-weight: 600; }
.pay-row-main small { color: var(--mute); font-size: var(--t-1); }
.pay-row.is-void .pay-row-main b { color: var(--mute); text-decoration: line-through; }
.pay-log-empty { font-size: var(--t-1); }

/* the slip picture the parent sent */
.slip { display: grid; gap: 6px; margin: 0; }
.slip-img { display: block; width: 100%; max-height: 62vh; object-fit: contain; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel-2); }
.slip-none { display: grid; place-items: center; gap: 6px; min-height: 160px; padding: 16px; border: 1px dashed var(--rule); border-radius: var(--r); color: var(--mute); text-align: center; }
.slip figcaption { font-size: var(--t-micro); color: var(--mute); text-align: center; }
.slip-sm { width: 108px; }
.slip-sm .slip-img { max-height: 150px; object-fit: cover; object-position: top; }
.slip-sm .slip-none { min-height: 96px; padding: 8px; font-size: 11px; }

/* ── check-in sheet ───────────────────────────────────── */
.checkin-line { max-width: 860px; padding: 18px 20px 12px; margin-bottom: 14px; }
.checkin { max-width: 860px; }
.route-head:has(.sheet-pick) { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.sheet-pick { display: grid; gap: 4px; font-size: var(--t-1); color: var(--mute); }
.sheet-pick .select { min-width: 0; max-width: 100%; width: 300px; }
.checkin-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.checkin-hint { flex: 1 1 260px; font-size: var(--t-1); color: var(--mute); }
.checkin-list { display: grid; overflow: hidden; }
.ck { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px 10px 16px; border-top: 1px solid var(--rule); transition: background .2s var(--ease); }
.ck:first-child { border-top: 0; }
.ck[data-state=""] { background: color-mix(in srgb, var(--leave) 6%, var(--panel)); }
.ck-name strong { display: block; font-size: var(--t-2); font-weight: 500; line-height: 1.35; }
.ck-name small { display: flex; align-items: center; gap: 5px; color: var(--mute); font-size: var(--t-1); }
.ck-name small .ico { width: 13px; height: 13px; }
.ck-name .ck-warn { color: var(--leave-ink); font-weight: 500; }
.ck-name .ck-filed { color: var(--leave-ink); font-weight: 500; }
.ck-pick { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r); background: #e2f4ef; }
.ck-opt span { display: inline-grid; place-items: center; min-width: 56px; height: 34px; padding: 0 10px; border-radius: var(--r-sm); font-weight: 500; font-size: var(--t-2); color: var(--ink-2); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.ck-opt span:hover { background: var(--panel); }
.ck-opt input:checked + span { color: #fff; }
.ck-in input:checked + span { background: var(--ok); }
.ck-leave input:checked + span { background: var(--leave); color: var(--ink); }
.ck-absent input:checked + span { background: var(--bad); color: #fff; }
/* leave that costs the session reads like the track's counted-leave stop: a ring, not the filled amber of a free leave */
.ck.leave-counts .ck-leave input:checked + span { background: var(--panel); color: var(--leave-ink); font-weight: 600; box-shadow: inset 0 0 0 2px var(--leave-ring); }
.ck.leave-counts { box-shadow: inset 3px 0 0 var(--leave-ring); }
.checkin-note { font-size: var(--t-1); margin: 10px 2px 0; }
.checkin-bar { position: sticky; bottom: 16px; z-index: 5; margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: var(--r-lg); background: var(--rail); color: var(--rail-ink); font-size: var(--t-2); box-shadow: var(--shadow-pop); }
.checkin-bar b { font-size: var(--t-3); font-weight: 600; color: #fff; }

/* ── finance ──────────────────────────────────────────── */
.ledger-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; overflow: hidden; }
.sum { display: grid; gap: 2px; padding: 14px 16px 12px; }
.sum + .sum { border-left: 1px solid var(--rule); }
.sum span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-1); color: var(--mute); }
.sum span .ico { width: 14px; height: 14px; }
.sum b { font-size: var(--t-4); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.sum-bar { display: none; }
.sum-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--ink-2); }
.qlines { display: grid; gap: 10px; }
.qline { display: grid; grid-template-columns: minmax(0, 1fr) 80px 120px auto; gap: 8px; align-items: end; }

/* ── courses: ended group ─────────────────────────────── */
.ended-group > summary { list-style: none; cursor: pointer; border-bottom: 0; }
.ended-group[open] > summary { border-bottom: 1px solid var(--rule); }
.ended-group > summary::-webkit-details-marker { display: none; }
.ended-group > summary h2::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: -45deg; vertical-align: 2px; transition: rotate .2s var(--ease); }
.ended-group[open] > summary h2::before { rotate: 45deg; }
.ended-group > summary:focus-visible { outline-offset: -2px; }
.ended-group .who-cell strong { color: var(--ink-2); }

/* ── settings preview ─────────────────────────────────── */
.doc-preview { padding: 14px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: #fff; }
.doc-preview-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.doc-preview-head .mark { width: 24px; height: 24px; }
.doc-preview-head strong { display: block; font-size: var(--t-2); font-weight: 600; line-height: 1.25; }
.doc-preview-head small { display: block; font-size: var(--t-1); color: var(--mute); line-height: 1.45; margin-top: 2px; }
.doc-preview-head small.is-ghost { color: var(--placeholder); }
.doc-preview-title { font-weight: 600; font-size: var(--t-1); white-space: nowrap; }
.doc-preview .doc-line { display: flex; gap: 3px; margin: 12px 0 0; }
.doc-preview .doc-line i { flex: 1; height: 2px; border-radius: 2px; background: var(--c); }
.doc-preview-bank { margin-top: 10px; padding: 8px 10px; border-radius: var(--r); background: var(--panel-2); font-size: var(--t-1); font-weight: 500; }
.doc-preview-note { font-size: var(--t-1); margin-top: 10px; }

/* ── login ────────────────────────────────────────────── */
.login { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); min-height: 100vh; min-height: 100dvh; }
.login-map { position: relative; background: linear-gradient(160deg, var(--rail-bg), var(--powder-wash) 70%, #fff); overflow: hidden; }
.login-map svg { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.login-map svg path { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 1.8s var(--ease) forwards; }
.login-map svg path:nth-child(2) { animation-delay: .15s; }
.login-map svg path:nth-child(3) { animation-delay: .3s; }
.login-map svg path:nth-child(4) { animation-delay: .45s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.login-say { position: absolute; left: 40px; bottom: 40px; display: grid; gap: 4px; max-width: 32ch; color: var(--rail-ink); }
.login-say strong { font-size: var(--t-4); font-weight: 600; line-height: 1.3; color: var(--rail-ink); }
.login-say span { font-size: var(--t-2); color: var(--rail-mute); }
.login-form { display: grid; place-items: center; padding: 32px 20px; background: var(--panel); }
.login-card { width: min(360px, 100%); }
.login-card .brand { color: var(--ink); padding: 0 0 28px; font-size: var(--t-3); }
.login-card .brand .mark { width: 30px; height: 30px; }
.login-card h1 { font-size: var(--t-4); line-height: 1.3; }
.login-card .btn-go { width: 100%; min-height: 42px; font-size: var(--t-2); }
.login-help { font-size: var(--t-1); margin-top: 20px; }

/* ── mobile top bar, review index ─────────────────────── */
.mobile-top { display: none; align-items: center; gap: 6px; margin: -4px 0 12px; }
.mobile-top .brand { display: flex; min-height: 44px; padding: 0; margin-right: auto; font-size: var(--t-3); color: var(--ink); }
.ui-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }

/* ── row menu ─────────────────────────────────────────── */
.show-m, .show-m-inline { display: none !important; }
.row-menu { position: relative; display: inline-block; }
.row-menu summary { list-style: none; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu[open] summary { background: #e3f6f2; }
.row-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 200px; display: grid; padding: 4px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-pop); }
.row-menu.up .row-menu-pop { top: auto; bottom: calc(100% + 4px); }
.row-menu-pop .btn-icon { width: 100%; min-height: 40px; justify-content: flex-start; gap: 10px; padding: 0 10px; font-weight: 500; }
.row-menu-pop .btn-icon::after { content: attr(aria-label); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* ── responsive ───────────────────────────────────────── */
@media (max-width: 1180px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  :root { --rail-w: 0px; --control: 44px; --t-4: 20px; --t-5: 24px; }
  .shell { display: block; }
  .rail { position: fixed; z-index: 30; inset: auto 0 0 0; top: auto; height: auto; flex-direction: row; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(13 58 50 / .12); }
  .rail .brand, .rail-foot { display: none; }
  .rail-nav { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; gap: 2px; }
  .rail-nav a { flex-direction: column; gap: 2px; min-height: 52px; padding: 4px; font-size: var(--t-1); justify-content: center; }
  .rail-nav a .ico { width: 20px; height: 20px; }
  .rail-nav a.on { box-shadow: inset 0 3px 0 var(--rail); }
  .main { padding: 14px 16px 96px; }
  /* one place to go (a tutor, a parent): no bottom bar, the top bar has sign-out */
  .shell-solo .rail { display: none; }
  .shell-solo .main { padding-bottom: 32px; }
  .mobile-top { display: flex !important; }
  .page-head { align-items: flex-start; margin-bottom: 16px; }
  .page-head h1 { font-size: var(--t-5); }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1; }
  .page-head .actions .btn-go { order: -1; flex-basis: 100%; }
  .btn-sm { min-height: 40px; }
  .btn-sm.btn-icon { width: 40px; }
  .crumb { min-height: 36px; }
  .signals { flex-wrap: nowrap; overflow-x: auto; margin: -6px -16px 14px; padding: 0 16px; scrollbar-width: none; }
  .signal { flex: none; min-height: 40px; }
  .line { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 12px 14px; gap: 4px 10px; }
  .line .route { display: none; }
  .line .what { grid-column: 2 / 3; }
  .line .track, .line.is-live .track { grid-column: 1 / -1; }
  .line .end { grid-column: 3; grid-row: 1; }
  .route.show-m-inline { display: inline-grid !important; margin-right: 6px; vertical-align: 1px; }
  .track-lg { --s: 10px; --w: 3px; }
  .live-roster { padding: 2px 14px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-cta { padding: 0 14px 14px; }
  .live-cta .btn { width: 100%; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .hide-m { display: none !important; }
  .show-m { display: inline-block !important; }
  .show-m-inline { display: inline !important; }
  .seg-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg-tabs::-webkit-scrollbar { display: none; }
  .seg-tabs a, .seg-tabs button { min-height: 36px; padding: 0 11px; }
  .table { font-size: var(--t-2); }
  .table th:first-child, .table td:first-child { padding-left: 14px; }
  .table th:last-child, .table td:last-child { padding-right: 10px; }
  .subnav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: -6px; border: 0; }
  .subnav a { justify-content: center; min-height: 40px; padding: 0 8px; margin: 0; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); }
  .subnav a.on { border-color: var(--rail); background: var(--rail); color: #fff; }
  .pick-pkg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day span { min-width: 44px; height: 44px; }
  .journey-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; padding: 14px 0 0; }
  .journey-stat:nth-child(3) { border-left: 0; }
  .journey-stat b { font-size: var(--t-4); }
  .journey-line { padding: 20px 14px 6px; }
  .journey .legend { padding: 4px 14px 12px; }
  .pay { grid-template-columns: auto minmax(0, 1fr); padding: 14px; gap: 12px; }
  .pay-act { grid-column: 1 / -1; }
  .slip-sm { width: 76px; }
  .pay-dlg { grid-template-columns: 1fr; }
  .pay-dlg .slip { max-width: 220px; justify-self: center; }
  .checkin-line { padding: 12px 14px 8px; }
  .checkin-line .journey-ends { display: none; }
  .ck { grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; padding: 10px 14px; }
  .ck-pick { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); }
  .ck-opt span { width: 100%; height: 40px; }
  .checkin-bar { bottom: 76px; }
  .ledger-sum { margin-bottom: 14px; }
  .sum { padding: 12px; }
  .sum b { font-size: var(--t-3); }
  .qline { grid-template-columns: 1fr 1fr auto; }
  .qline .field:first-child { grid-column: 1 / -1; }
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-map { height: 168px; }
  .login-map svg { inset: 0; height: 100%; -webkit-mask-image: none; mask-image: none; }
  .login-say { display: none; }
  .login-form { place-items: start center; padding-top: 24px; }
  .login-card .brand { padding-bottom: 20px; }
  .toast { bottom: 80px; }
  .shell-solo ~ .toast { bottom: 16px; }
  .dock-m { position: fixed; z-index: 25; left: 12px; right: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-pop); }
  .form-foot.dock-m { padding: 8px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); }
  button.dock-m { min-height: 48px; }
  body:has(.dock-m) .main { padding-bottom: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .login-map svg path { stroke-dashoffset: 0; }
}

/* validation hosts that are not a .field */
[data-field] > .field-error { padding: 4px 0 0; }
.rows[data-field] > .field-error { padding: 10px 16px; }
.student-pick.is-invalid .search .input { border-color: var(--bad); box-shadow: 0 0 0 3px rgb(194 42 31 / .12); }
.sum-terms { font-size: var(--t-1); padding-top: 10px; border-top: 1px solid var(--rule); }

/* ══ Soft premium (review: today page first, body.soft) ═══════════════════
   Warm paper ground, white sheets that sit on it with a soft two-layer shadow,
   rounder geometry and more air. Same rail, lines, stops and signal red. */
.soft {
  --lift: 0 1px 2px rgb(19 74 51 / .05), 0 10px 26px -14px rgb(19 74 51 / .22);
  --lift-hi: 0 2px 4px rgb(19 74 51 / .06), 0 18px 36px -16px rgb(19 74 51 / .3);
  background: var(--ground);
}
.soft ::selection { background: #c4efe7; }
.soft ::-webkit-scrollbar-thumb { background: #a9dcd2; border-color: var(--ground); }
.soft .main { padding-top: 36px; }

/* rail: pastel mint, rounder stops */
.soft .rail { padding: 20px 14px 14px; }
.soft .rail-nav a { min-height: 40px; border-radius: 12px; }
.soft .rail-nav a.on { background: #fff; color: var(--rail-ink); box-shadow: inset 3px 0 0 var(--rail), 0 1px 2px rgb(16 74 62 / .08); }
.soft .rail-out { border-radius: 12px; }
.soft .avatar { background: linear-gradient(140deg, #8ee8e0, #1f6b4a); }

/* heading: a quiet, larger date; the day's facts underneath */
.soft .page-head { margin-bottom: 24px; align-items: center; }
.soft .page-head h1 { font-size: var(--t-5); line-height: 1.2; letter-spacing: -.012em; }
.soft .page-head p { font-size: var(--t-2); margin-top: 4px; }

/* buttons */
.soft .btn { border-radius: 12px; padding: 0 16px; }
.soft .btn-sm { border-radius: 10px; min-height: 34px; }
.soft .btn-go { box-shadow: 0 1px 2px rgb(11 70 60 / .25); }
.soft .btn-go:hover { box-shadow: 0 1px 2px rgb(11 70 60 / .3); }
.soft .btn-line { border-color: transparent; background: var(--panel); box-shadow: var(--lift); }
.soft .btn-line:hover { background: var(--panel); box-shadow: var(--lift-hi); }

/* sheets: no outline, a soft lift */
.soft .panel { border: 0; border-radius: var(--r-lg); box-shadow: var(--lift); }
.soft .panel-head { min-height: 56px; padding: 18px 22px 6px; border-bottom: 0; }
.soft .panel-head h2 { font-size: var(--t-3); letter-spacing: -.003em; }
.soft .panel-body { padding: 14px 22px 22px; }
.soft .split { gap: 22px; }
@media (min-width: 1181px) { .soft .split { grid-template-columns: minmax(0, 1fr) 340px; } }
.soft .stack { gap: 22px; }

/* what's waiting: soft pills, each with its icon in a tinted disc */
.soft .signals { margin: -6px 0 26px; gap: 10px; }
.soft .signal {
  min-height: 40px; padding: 0 16px 0 6px; gap: 10px; border: 0; border-radius: 999px;
  background: var(--panel); box-shadow: var(--lift); color: var(--ink-2);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.soft .signal:first-child { padding-left: 6px; }
.soft .signal .ico { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: #e2f4ef; color: var(--ink-2); }
.soft .signal.warn .ico { background: var(--bad-bg); }
.soft .signal.wait .ico { background: var(--leave-bg); }
.soft .signal b { font-size: var(--t-2); }
.soft .signal:hover { box-shadow: var(--lift-hi); transform: translateY(-1px); }
.soft .signal:hover span { text-decoration: none; }

/* departures */
.soft .lines { padding: 4px 10px 10px; }
.soft .line { border-top: 0; border-radius: 14px; padding: 14px 14px; grid-template-columns: 68px auto minmax(0, 1fr) auto; }
.soft .lines > * + * { margin-top: 2px; }
.soft .line:hover { background: var(--panel-2); }
.soft .line .t { font-size: var(--t-3); }
.soft .line .what strong { font-size: var(--t-3); }
.soft .route { border-radius: 8px; height: 28px; min-width: 38px; font-size: 13.5px; }
.soft .route-lg { height: 52px; min-width: 60px; border-radius: 14px; font-size: 21px; letter-spacing: .02em; }
.soft .route-sm { border-radius: 6px; height: 20px; min-width: 26px; font-size: 11.5px; }
.soft .live-wrap {
  border-top: 0; border-radius: 16px; margin: 6px 0;
  background: color-mix(in srgb, var(--rail) 4%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rail) 12%, transparent);
}
.soft .live-wrap .line:hover { background: transparent; }
.soft .live-roster { padding: 4px 16px 12px 96px; gap: 8px; }
.soft .kid { border: 0; border-radius: 999px; min-height: 34px; padding: 0 12px 0 14px; background: rgb(255 255 255 / .85); box-shadow: 0 1px 2px rgb(16 74 62 / .06); }
.soft .live-cta { padding: 2px 16px 16px 96px; }

/* stops: a touch larger and rounder on the soft sheet */
.soft .track-sm { --s: 9px; }
.soft .track-lg { --s: 18px; --w: 5px; }

/* states read as soft tinted pills here */
.soft .chip { padding: 2px 10px 2px 8px; border-radius: 999px; background: #e2f4ef; font-size: var(--t-1); }
.soft .chip-ok { background: var(--ok-bg); }
.soft .chip-leave { background: var(--leave-bg); }
.soft .chip-bad { background: var(--bad-bg); }
.soft .chip-info { background: var(--info-bg); }
.soft .chip-live { background: var(--rail); padding: 2px 10px; }
.soft .kid .chip { padding: 0; background: none; }
.soft .line .end .chip { margin-bottom: 2px; }

/* side lists */
.soft .rows { padding: 0 8px 10px; }
.soft .rows > * + * { border-top: 0; }
.soft .row { border-radius: 12px; padding: 10px 14px; }
.soft a.row:hover { background: var(--panel-2); }
.soft .panel-head + .rows { margin-top: 2px; }
.soft .money { font-size: var(--t-2); }
.soft .bar { height: 8px; background: #e2f4ef; }
.soft .bars { gap: 12px; }
.soft .net { border-top-color: var(--rule); margin-top: 16px; padding-top: 14px; }
.soft .net b { font-size: var(--t-4); letter-spacing: -.01em; }
.soft .face { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, var(--c, var(--l-cobalt))) 18%, transparent); }

/* toast and menus round with the sheet */
.soft .toast { border-radius: 14px; }

/* tables sit flush in the sheet, aligned with its heading */
.soft .table th { background: transparent; border-bottom-color: var(--rule); padding-top: 10px; }
.soft .table th:first-child, .soft .table td:first-child { padding-left: 22px; }
.soft .table th:last-child, .soft .table td:last-child { padding-right: 18px; }
.soft .table td { border-bottom-color: #e2f4ef; padding-block: 12px; }
.soft .table tbody tr:hover { background: var(--panel-2); }
.soft .table tfoot td { border-top-color: var(--rule-2); }
.soft .panel > .table-wrap:last-child { padding-bottom: 6px; }
.soft .face { width: 34px; height: 34px; }
.soft .face-lg { width: 56px; height: 56px; }
.soft .face-xl { width: 96px; height: 96px; }

/* toolbar, search, tabs */
.soft .toolbar { gap: 10px; margin-bottom: 16px; }
.soft .search .input { border-color: transparent; box-shadow: var(--lift); border-radius: 12px; }
.soft .search .input:focus { box-shadow: 0 0 0 3px rgb(30 91 255 / .18), var(--lift); border-color: var(--focus); }
.soft .seg-tabs { padding: 4px; border-radius: 12px; background: #dcf3ee; }
.soft .seg-tabs a, .soft .seg-tabs button { border-radius: 9px; min-height: 32px; }
.soft .seg-tabs .on { box-shadow: 0 1px 2px rgb(16 74 62 / .12), 0 2px 6px -2px rgb(16 74 62 / .14); }
.soft .subnav { border-bottom-color: var(--rule-2); margin-bottom: 24px; }
.soft .crumb { margin-bottom: 6px; }

/* forms */
.soft .input, .soft .select, .soft .textarea { border-radius: 10px; border-color: #6b9688; background-color: #fff; }
.soft .input:hover, .soft .select:hover, .soft .textarea:hover { border-color: var(--ink-2); }
.soft .field > span { color: var(--ink-2); }
.soft .grid-2, .soft .grid-3 { gap: 16px; }
.soft .callout { border-radius: 12px; padding: 11px 14px; }
.soft .drop { border-radius: 14px; border-color: #6b9688; background: var(--panel-2); }
.soft .drop:hover { background: #e6f8f4; border-color: var(--ink-2); }
.soft .pick-card { border-radius: 14px; border-color: var(--rule-2); }
.soft .pick input:checked + .pick-card { background: #e6f8f4; }
.soft .choose .row:has(input:checked) { background: #e6f8f4; box-shadow: inset 0 0 0 1.5px var(--rail); }
.soft .day span { border-radius: 10px; }
.soft .picked { border: 0; border-radius: 14px; background: var(--panel-2); }
.soft .pick-results { border: 0; border-radius: 14px; box-shadow: var(--lift-hi); }
.soft .pick-results .row:hover, .soft .pick-results .row:focus-visible, .soft .pick-results .row.is-active { background: #e3f6f2; }
.soft .facts { gap: 8px 18px; }

/* payment strip: the state is a soft wash plus a hairline in its colour */
.soft .pay { padding: 18px 22px; margin-bottom: 22px; }
.soft .pay-wait { background: color-mix(in srgb, var(--leave) 7%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leave-ring) 35%, transparent), var(--lift); }
.soft .pay-owe { background: color-mix(in srgb, var(--bad) 5%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 28%, transparent), var(--lift); }
.soft .pay-ok { background: color-mix(in srgb, var(--ok) 5%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 25%, transparent), var(--lift); }
.soft .pay-okmark { width: 44px; height: 44px; }
.soft .pay-title h2 { font-size: var(--t-3); }
.soft .slip-img, .soft .slip-none { border-radius: 14px; }
.soft .pay-row { padding: 10px 14px 10px 22px; border-top-color: #e2f4ef; }

/* enrollment journey */
.soft .journey-top { padding: 22px 0 6px; }
.soft .journey-stat { padding: 0 22px; }
.soft .journey-stat + .journey-stat { border-left-color: var(--rule); }
.soft .journey-stat b { font-size: var(--t-5); }
.soft .journey-line { padding: 26px 24px 8px; }
.soft .journey .legend { padding: 6px 24px 20px; }
.soft .more-row { border-top-color: #e2f4ef; }

/* check-in */
.soft .checkin-line { padding: 22px 24px 16px; }
.soft .checkin-list { padding: 4px 8px; }
.soft .ck { border-top-color: #e2f4ef; border-radius: 12px; padding: 12px 12px 12px 14px; }
.soft .ck[data-state=""] { background: color-mix(in srgb, var(--leave) 7%, var(--panel)); }
.soft .ck-pick { border-radius: 12px; background: #e2f4ef; padding: 4px; }
.soft .ck-opt span { border-radius: 9px; height: 36px; }
.soft .checkin-bar { border-radius: 18px; padding: 10px 10px 10px 20px; box-shadow: 0 18px 40px -16px rgb(11 70 60 / .5); }

/* finance */
.soft .ledger-sum { margin-bottom: 22px; }
.soft .sum { padding: 18px 22px 16px; }
.soft .sum + .sum { border-left-color: var(--rule); }
.soft .sum b { font-size: var(--t-5); }
.soft .sum-bar { height: 4px; }

/* courses and packages */
.soft .pkgs { gap: 14px; padding: 8px 22px 22px; }
.soft .pkg { border: 0; border-radius: 16px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--rule); padding: 16px; }
.soft .ended-group[open] > summary { border-bottom-color: var(--rule); }

/* settings preview */
.soft .doc-preview { border: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--rule); }
.soft .doc-preview-bank { border-radius: 10px; }

/* dialogs, popovers, empty */
.soft .dialog { border: 0; border-radius: 22px; box-shadow: 0 30px 70px -20px rgb(12 56 48 / .45), 0 2px 6px rgb(12 56 48 / .08); }
.soft .dialog::backdrop { background: rgb(10 46 40 / .38); backdrop-filter: blur(2px); }
.soft .dialog .panel-head { padding: 20px 22px 8px; }
.soft .dialog .panel-body { padding: 12px 22px 22px; }
.soft .confirm-body { padding: 24px; }
.soft .row-menu-pop { border: 0; border-radius: 14px; box-shadow: var(--lift-hi); padding: 6px; }
.soft .row-menu-pop .btn-icon { border-radius: 10px; }
.soft .empty { padding: 40px 20px 44px; }
.soft .form-foot.dock-m { border: 0; border-radius: 18px; }

/* login and printable page */
.soft .login-form { background: var(--ground); }
.soft .login-card { padding: 32px; border-radius: 22px; background: var(--panel); box-shadow: var(--lift-hi); width: min(400px, 100%); }
.soft.doc-page { background: #dcf3ee; }
.soft .doc-bar { background: rgb(255 255 255 / .92); border-bottom-color: var(--rule); }

@media (max-width: 900px) {
  .soft .main { padding-top: 14px; }
  .soft .page-head h1 { font-size: var(--t-5); }
  .soft .rail { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .soft .rail-nav a { min-height: 54px; border-radius: 14px; }
  .soft .signals { flex-wrap: wrap; overflow: visible; margin: -8px 0 18px; padding: 0; gap: 8px; }
  .soft .signal:first-child { padding-left: 6px; }
  .soft .panel-head { padding: 16px 18px 4px; }
  .soft .lines { padding: 2px 6px 8px; }
  .soft .line { grid-template-columns: 54px minmax(0, 1fr) auto; padding: 12px 10px; }
  .soft .live-roster { padding: 2px 12px 10px; }
  .soft .track-lg { --s: 10px; --w: 3px; }
  .track-lg .seg, .track-sm .seg { min-width: 1px; }
  .soft .track-sm { --s: 7px; }
  .soft .live-cta { padding: 0 12px 14px; }
  .soft .rows { padding: 0 6px 8px; }
  .soft .split, .soft .stack { gap: 16px; }
  .soft .btn-sm { min-height: 40px; }
  .soft .seg-tabs a, .soft .seg-tabs button { min-height: 36px; }
  .soft .table th:first-child, .soft .table td:first-child { padding-left: 16px; }
  .soft .table th:last-child, .soft .table td:last-child { padding-right: 10px; }
  .soft .pay { padding: 16px; }
  .soft .journey-stat { padding: 0 16px; }
  .soft .journey-stat b { font-size: var(--t-5); }
  .soft .journey-line { padding: 22px 16px 6px; }
  .soft .journey .legend { padding: 4px 16px 14px; }
  .soft .checkin-line { padding: 16px 16px 10px; }
  .soft .checkin-list { padding: 2px 4px; }
  .soft .sum { padding: 14px 12px; }
  .soft .sum b { font-size: var(--t-3); }
  .soft .pkgs { padding: 6px 14px 16px; }
  .soft .subnav a { border: 0; border-radius: 12px; box-shadow: var(--lift); }
  .soft .subnav a.on { box-shadow: none; }
  .soft .login-form { padding: 16px; }
  .soft .login-card { position: relative; z-index: 1; padding: 22px 18px; margin-top: -36px; }
  .soft .face { width: 30px; height: 30px; }
  .soft .table .who-cell { gap: 8px; }
  .soft .checkin-bar { bottom: 80px; }
}

/* phone student list: the status that matters rides under the name */
@media (max-width: 900px) {
  .table .who-cell .status-m { display: inline-flex !important; margin-top: 4px; }
}

/* ══ The line is the identity ════════════════════════════════════════════
   A class page wears its line like a platform sign: a 6px stripe in the class
   colour under the heading, starting from a stop. */
.route-head { position: relative; }
.route-head h1 { font-size: var(--t-5); }
.route-head .route-lg { box-shadow: 0 1px 2px rgb(11 70 60 / .18); }

/* secondary sheets sit flat on the paper with a hairline; only the main sheet lifts */
.soft .split > aside .panel, .soft .split > .stack + .stack .panel { box-shadow: inset 0 0 0 1px var(--rule); background: rgb(255 255 255 / .72); }
/* the Go button is solid, not glowing */
.soft .btn-go, .soft .btn-go:hover { box-shadow: 0 1px 2px rgb(11 70 60 / .25); }
/* buttons and the search field show their edge */
.soft .btn-line { border-color: #6b9688; box-shadow: none; }
.soft .btn-line:hover { border-color: var(--ink-2); box-shadow: none; }
.soft .search .input { border-color: #6b9688; box-shadow: none; }

@media (max-width: 900px) {
  .route-head .route-lg { height: 44px; min-width: 50px; font-size: 18px; }
}

/* phone course roster: name and counts on one line, the child's line underneath */
@media (max-width: 900px) {
  .roster thead { display: none; }
  .roster tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
  .roster tbody tr:last-child { border-bottom: 0; }
  .roster tbody td, .soft .roster tbody td { padding: 0 !important; border: 0; }
  .roster td.roster-track { grid-column: 1 / -1; grid-row: 2; padding-top: 10px !important; }
}
@media (max-width: 900px) {
  .roster td:nth-child(3)::before { content: "ลา "; color: var(--mute); font-size: var(--t-1); font-weight: 400; }
  .roster td:nth-child(4)::before { content: "เหลือ "; color: var(--mute); font-size: var(--t-1); font-weight: 400; }
}

/* allergy: a safety fact rides with the child's name wherever a teacher sees it */
.allergy { display: inline-flex; align-items: center; gap: 4px; width: fit-content; margin-top: 3px; padding: 1px 8px 1px 6px; border-radius: 999px; background: #fff; color: var(--leave-ink); box-shadow: inset 0 0 0 1.5px var(--leave-ring); font-size: var(--t-1); font-weight: 600; line-height: 1.5; }
.allergy .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.allergy-big { margin-top: 8px; padding: 3px 12px 3px 8px; font-size: var(--t-2); }
.allergy-big .ico { width: 16px; height: 16px; }
.ck-name .allergy, .who-cell .allergy { display: flex; }
.kid .allergy-dot { width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; color: var(--leave-ink); stroke-width: 2.2; }
.facts dd.is-owe { font-weight: 600; }
.facts dd.is-allergy { color: var(--leave-ink); font-weight: 600; }
.left-by { justify-content: flex-end; gap: 4px 12px; }
@media (max-width: 900px) { .left-by { flex-direction: column; align-items: flex-end; } }
.left-by > span { min-height: 22px; display: inline-flex; align-items: center; gap: 4px; }

/* disabled stays solid in the soft layer too (the glow/edge rules must not win) */
.soft .btn[disabled], .soft .btn[disabled]:hover { background: #dcf3ee; color: var(--ink-2); border-color: transparent; box-shadow: none; }

/* skip link: invisible until the keyboard reaches it */
.skip { position: fixed; z-index: 60; left: 12px; top: -60px; padding: 10px 16px; border-radius: var(--r); background: var(--rail); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }
.main:focus { outline: none; }

/* paused course on a profile: same row, no line colour, its resume action under it */
.line.is-paused { grid-template-areas: none; }
[data-held] .paused-act { grid-column: 2 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
@media (max-width: 900px) { [data-held] .paused-act { grid-column: 1 / -1; } }

/* a choice that cannot be made today */
.ck-opt input:disabled + span { color: var(--mute); cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgb(86 112 104 / .5); }
.ck-opt input:disabled + span:hover { background: transparent; }

@media (max-width: 900px) { .soft .rail-nav a.on { box-shadow: inset 0 3px 0 var(--rail); } }

/* on the navy check-in bar the primary action inverts to white */
.checkin-bar .btn-go { background: #fff; color: var(--rail); }
.checkin-bar .btn-go:hover { background: #fff0b3; }
.checkin-bar .btn-go[disabled] { background: rgb(255 255 255 / .2); color: rgb(255 255 255 / .75); }
.table .who-cell .owe-chip { display: flex; width: fit-content; margin-top: 4px; }

/* a paused course is neutral, not the blue of "waiting to start" */
.chip-hold { color: var(--ink-2); }
.chip-hold::before { background: var(--ink-2); }
.soft .chip-hold { background: #dcf3ee; }
/* a child in two classes: each count sits with its own badge */
.left-by .route { margin-right: 4px; }
/* keyboard hint on the check-in sheet (desktop only) */
.ck-keys { font-size: var(--t-1); color: var(--mute); }
.ck-keys kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin: 0 2px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule-2); font: 600 12px/1 "Plex Thai", system-ui, sans-serif; color: var(--ink); }
.ck:focus-within { box-shadow: inset 3px 0 0 var(--rail); }
@media (max-width: 900px) { .ck-keys { display: none; } }

/* phone: a table becomes card rows — the name and the figure on top, the rest underneath */
@media (max-width: 600px) {
  .table.cards-m thead { display: none; }
  .table.cards-m tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
  .table.cards-m tbody tr:last-child { border-bottom: 0; }
  .table.cards-m tbody td, .soft .table.cards-m tbody td { padding: 0 !important; border: 0; }
  .table.cards-m tbody td:first-child { grid-column: 1; grid-row: 1; }
  .table.cards-m tbody td.r { grid-column: 2; grid-row: 1; text-align: right; }
  .table.cards-m tbody td:not(:first-child):not(.r) { grid-column: 1 / -1; }
  .table.cards-m tfoot tr { display: flex; justify-content: space-between; padding: 12px 16px; }
  .table.cards-m tfoot td { padding: 0 !important; }
  .soft .seg-tabs { flex-wrap: wrap; overflow: visible; }
}
/* keyboard focus never hides under the sticky check-in bar */
html:has(.checkin) { scroll-padding-bottom: 120px; }
@media (max-width: 900px) { html:has(.checkin) { scroll-padding-bottom: 190px; } }

.input-icon .pw-toggle { position: absolute; right: 4px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; }
.input-icon .pw-toggle .ico { position: static; translate: none; width: 18px; height: 18px; color: currentColor; }
.pw-toggle .pw-eye-off, .pw-toggle[aria-pressed="true"] .pw-eye { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye-off { display: block; }
.input-icon .pw-toggle:hover { background: #e3f6f2; }
.input-icon:has(.pw-toggle) .input { padding-right: 46px; }

/* a panel head with a note and an action stacks on phones */
@media (max-width: 600px) {
  .panel-head.wrap-m { flex-wrap: wrap; align-items: flex-start; }
  .panel-head.wrap-m > h2 { flex: 1 1 100%; }
  .panel-head.wrap-m > .btn { width: 100%; }
}

.show-m-block { display: none; }
@media (max-width: 900px) { .show-m-block { display: block; } }
.wage-none { font-size: var(--t-1); margin-right: 6px; }

@media (max-width: 900px) {
  /* both record buttons on one row; the four finance tabs as one compact strip */
  .page-head.fin-head .actions { flex-wrap: nowrap; }
  .page-head.fin-head .actions .btn { flex: 1 1 0; order: 0; flex-basis: 0; min-width: 0; padding-inline: 8px; }
  .soft .subnav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .soft .subnav a { flex-direction: column; gap: 2px; min-height: 52px; padding: 4px; font-size: 12.5px; text-align: center; }
  .ledger-sum { margin-bottom: 12px; }
}

.checkin.is-locked .ck, .soft .checkin.is-locked .ck[data-state=""] { background: transparent; }

@media (max-width: 600px) {
  .table.cards-m tbody td.act-m:not(:first-child):not(.r) { grid-column: 2; grid-row: 2; align-self: end; }
  .table.cards-m tbody td.act-m .row-act { justify-content: flex-end; }
}

@media (max-width: 600px) { .table.cards-m tbody td.main-m:not(:first-child):not(.r) { grid-column: 1; grid-row: 2; } }

.table-wrap { position: relative; }
/* phone: a child's log row is one compact card — class session · date / status / note, edit at the right */
@media (max-width: 600px) {
  .table.log-m thead { display: none; }
  .table.log-m tbody tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--rule); }
  .table.log-m tbody tr:last-child { border-bottom: 0; }
  .table.log-m tbody td, .soft .table.log-m tbody td { padding: 0 !important; border: 0; }
  .table.log-m td.c-cls { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding-top: 2px !important; }
  .table.log-m td.c-date { grid-column: 2; grid-row: 1; }
  .table.log-m td.c-state { grid-column: 2; grid-row: 2; }
  .table.log-m td.c-note { grid-column: 2; grid-row: 3; display: block !important; font-size: var(--t-1); }
  .table.log-m td.c-edit { grid-column: 3; grid-row: 1 / span 2; }
  .table.log-m td.c-note:empty { display: none !important; }
}

.facts dd.is-short { color: var(--leave-ink); font-weight: 600; }

@media (max-width: 600px) {
  /* finance tabs as a text strip; totals as one tight line; filter and month on one row */
  .soft .subnav { gap: 0; border-bottom: 1px solid var(--rule); margin-top: -8px; }
  .soft .subnav a .ico { display: none; }
  .soft .subnav a, .soft .subnav a.on { min-height: 40px; padding: 0 2px; font-size: 13px; line-height: 1.2; white-space: normal; background: transparent; box-shadow: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--mute); margin-bottom: -1px; }
  .soft .subnav a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--rail); }
  .soft .sum { padding: 8px 10px; }
  .soft .sum span .ico { display: none; }
  .soft .sum b { font-size: var(--t-3); }
  .toolbar.one-row { flex-wrap: nowrap; }
  .toolbar.one-row .search { flex: 1 1 auto; min-width: 0; }
  .toolbar.one-row .select { flex: none; width: auto; }
  .toolbar.one-row .seg-tabs { flex: 1 1 auto; }
}

.pay-row .row-act [data-void] { margin-left: 10px; }

/* ── round 16 ── */
/* laptop widths (125% scaling ≈ 1024 CSS px): secondary columns step aside */
.show-md-inline { display: none; }
.track-cell { min-width: 160px; }
@media (max-width: 1180px) and (min-width: 601px) {
  .hide-md { display: none !important; }
  .show-md-inline { display: inline; }
  .track-cell { min-width: 0; }
  .track-cell .track { display: none; }
  [data-wages] > .panel-head { flex-wrap: wrap; row-gap: 6px; }
  [data-wages] > .panel-head h2 { flex: 1 0 100%; }
}
/* correcting a session: four states as one column of choices */
.mark-pick { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.mark-pick legend { margin-bottom: 6px; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.mark-pick .check { min-height: 40px; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 10px; }
.mark-pick .check:has(input:checked) { border-color: var(--rail); box-shadow: inset 0 0 0 1px var(--rail); }
.mark-pick .check:has(input:disabled) { opacity: .55; }
/* Today: the allergy reads as words beside the nickname */
.kid { min-height: 36px; padding-block: 4px; }
.kid-name { display: grid; line-height: 1.3; }
.kid-allergy { display: inline-flex; align-items: center; gap: 3px; color: var(--leave-ink); font-size: 11.5px; font-weight: 600; }
.kid-allergy .ico { width: 13px; height: 13px; stroke-width: 2.2; }
/* the search note when a tab search widens to everyone */
.filter-scope { flex-basis: 100%; margin: -4px 0 0; font-size: var(--t-1); }
/* rules: no hairline under the heading; payment log empty line sits on the panel's inset */
.panel > .panel-body > .rules, .soft .panel > .panel-body > .rules { border-top: 0; padding-top: 0; }
.soft .pay-log-empty { padding: 12px 22px 16px; }
/* tap size on phones */
@media (max-width: 600px) {
  .ck-opt, .ck-opt span { min-height: 44px; }
  .seg-tabs a, .seg-tabs button { min-height: 40px; }
  .panel-head .more { min-height: 40px; display: inline-flex; align-items: center; }
  .table .doc-link { display: inline-block; padding-block: 8px; }
  .input-icon .pw-toggle { width: 44px; height: 40px; right: 1px; }
  .check { min-height: 40px; }
  [data-new-student], .link-new { display: inline-flex; align-items: center; min-height: 40px; }
}
.toast-undo { white-space: nowrap; flex: none; }
@media (max-width: 600px) {
  .toast { left: 16px; right: 16px; width: auto; max-width: none; translate: none; }
  .toast > span { flex: 1; min-width: 0; }
  .toast-undo { min-height: 40px; }
  .kid { flex-wrap: wrap; row-gap: 2px; }
  .kid-allergy { white-space: nowrap; }
}

/* ── round 17 ── */
.pw-note { color: var(--ink) !important; font-weight: 600; }

@media (min-width: 601px) and (hover: hover) {
  .ck-keys { display: none; }
  .checkin:focus-within .ck-keys { display: inline; }
}

@media (max-width: 600px) {
  .soft .seg-tabs a, .soft .seg-tabs button { min-height: 40px; }
  .crumb { min-height: 40px; }
  .swatch::after { content: ""; position: absolute; inset: -6px; }
  .end .doc-link, .row .doc-link, .line .doc-link { display: inline-flex; align-items: center; min-height: 40px; }
  .table .who-cell { min-height: 40px; }
  .check { min-height: 40px; display: flex; align-items: center; }
}
.row-cue { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); white-space: nowrap; }

/* ── round 18 ── */
.user-act { display: inline-flex; gap: 4px; flex: none; }
.row.is-off .face, .row.is-off strong { opacity: .5; }
.off-tag { color: var(--fault, #b3261e) !important; }
@media (max-width: 600px) {
  [data-users] .row { flex-wrap: wrap; row-gap: 6px; }
  [data-users] .grow { flex: 1 1 calc(100% - 60px); }
  [data-users] .user-act { margin-left: 46px; flex-wrap: wrap; max-width: calc(100% - 46px); }
}

/* ── round 19 ── */
/* a leave that costs a session: amber ring with a centre dot (it still uses the session) */
.track .s-leave-count { background: var(--panel); box-shadow: inset 0 0 0 var(--w) var(--leave-ring); }
.track .s-leave-count::after { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: var(--leave-ink); }
.legend .k-leave-count { box-shadow: inset 0 0 0 2px var(--leave-ring); position: relative; }
.legend .k-leave-count::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--leave-ink); }
/* sessions an expired course never used */
.track.is-forfeit .s-next { box-shadow: inset 0 0 0 1px var(--mute); background: repeating-linear-gradient(45deg, transparent 0 2px, var(--rule-2) 2px 3px); }
.pkg .track .seg { min-width: 0; }
.pkg .track.dense { --s: 6px; }

.seg-tabs.is-searching .on { background: transparent; box-shadow: none; color: var(--mute); font-weight: 500; }

.users-sheet { margin-top: 24px; max-width: 760px; }
.users-note { margin-top: 8px; font-size: var(--t-1); }

.past-more { grid-column: 1 / -1; margin: 2px 0 4px; font-size: var(--t-1); color: var(--ink-2); }
.past-more summary { cursor: pointer; color: var(--ink); font-weight: 500; min-height: 32px; display: flex; align-items: center; }
.past-more p { margin-top: 4px; }

.is-invalid .pick-card { box-shadow: inset 0 0 0 1.5px var(--bad); }
@media (max-width: 600px) {
  .table .doc-link { display: inline-flex; align-items: center; min-height: 40px; padding-block: 0; }
  [data-user-role] button { min-width: 56px; }
  .panel-head:has(> .legend) { flex-wrap: wrap; }
  .panel-head > .legend { flex-basis: 100%; }
}

/* ── round 20 ── */
.ck-nick { color: var(--mute); font-weight: 400; font-size: var(--t-1); margin-left: 4px; }

@media (max-width: 600px) {
  .swatch { width: 40px; height: 40px; }
  .swatch::after { inset: 0; }
  .past-more summary { min-height: 40px; }
}
.leave-rule { font-size: var(--t-1); }

/* ── round 21 ── */
.users-sheet { max-width: none; }
.legend .k-today { box-shadow: inset 0 0 0 2px var(--c, var(--ink-2)), 0 0 0 2px var(--panel), 0 0 0 3px color-mix(in srgb, var(--c, var(--ink-2)) 30%, transparent); }

.track .is-today { transform: scale(1.25); }

/* ── round 22 ── */
@media (max-width: 600px) {
  .roster tbody tr { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .roster tbody td:nth-child(5) { grid-row: 1; grid-column: 4; }
  .roster tbody td:nth-child(5) .btn-icon { width: auto; padding: 0 10px; gap: 4px; }
}
.roster-leave-t { font-size: var(--t-1); font-weight: 500; }

.plain-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.plain-link:hover { color: var(--ink); border-color: var(--ink-2); }

.filed-why { display: block; font-size: var(--t-1); }
.soft .seg-tabs.is-searching .on, .seg-tabs.is-searching .on { background: transparent !important; box-shadow: none !important; color: var(--mute) !important; font-weight: 500; }
.track .is-today { transform: scale(1.25); box-shadow: inset 0 0 0 var(--w) var(--leave-ring), 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); }

/* ── one-card pages: password, errors (no map beside the form) ── */
.login-solo { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.login-solo .login-form { place-items: center; }
.login-solo .login-card .brand { display: flex; }
.login-solo .login-help { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; border-bottom: 1px solid var(--rule-2); cursor: pointer; }
.login-help .plain-link, .login-help .link-btn { display: inline-flex; align-items: center; min-height: 32px; }
.link-btn:hover { border-bottom-color: currentColor; }
@media (max-width: 900px) {
  .login-solo .login-form { place-items: start center; padding-top: 32px; }
  .soft .login-solo .login-card { margin-top: 0; }
}
a.who { color: var(--rail-ink); text-decoration: none; border-radius: var(--r); }
a.who:hover, a.who.on { background: var(--rail-hover); }
a.who small { display: block; }
/* small text links and name cells are still a finger's width tall on a phone */
@media (pointer: coarse) {
  .plain-link { display: inline-block; padding-block: 6px; }
  .table .who-cell { min-height: 44px; }
}
.ck-empty { list-style: none; padding: 8px; }
/* parent's course row: the payment state sits under the figures; on a phone the row stacks */
.kid-line .kid-pay { grid-column: 4; grid-row: 2; justify-self: end; }
@media (max-width: 900px) {
  .kid-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what what" "t end" "track track" "pay pay"; row-gap: 8px; }
  .kid-line > .route { display: none; }
  .kid-line .what { grid-area: what; }
  .kid-line .t { grid-area: t; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
  .kid-line .end { grid-area: end; text-align: right; }
  .kid-line .t small { display: inline; }
  .kid-line .track { grid-area: track; }
  .kid-line .kid-pay { grid-area: pay; justify-self: start; }
}
/* slip pictures keep their box before the image arrives, so nothing jumps under the pointer */
.slip-img { aspect-ratio: 9 / 13; height: auto; }
.slip-sm .slip-img { aspect-ratio: auto; height: 120px; max-height: none; }
@media (max-width: 900px) { .slip-sm .slip-img { height: 96px; } }
.kid-days { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--t-1); margin: 0; }
@media (max-width: 900px) { .kid-line .kid-days { grid-area: auto; grid-column: 1 / -1; } .kid-line { grid-template-areas: "what what" "t end" "track track" "days days" "pay pay"; } .kid-line .kid-days { grid-area: days; } }
.form-foot .foot-left { margin-right: auto; }
.pay-rejected { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--t-1); color: var(--bad); }
button.rail-out { border: 0; background: none; font-family: inherit; width: 100%; cursor: pointer; text-align: left; }
.is-invalid small[data-hint] { display: none; }
.kid-legend { padding: 4px 16px 12px; }
/* a quotation's actions sit on their own line on a phone instead of squeezing the details */
@media (max-width: 900px) {
  .cards-m .act-m form { display: flex; flex-wrap: wrap; gap: 6px; }
  /* a quotation has several actions: they take their own full line under the details */
  .table.quote-table.cards-m tbody td.act-m:not(:first-child):not(.r) { grid-column: 1 / -1; grid-row: auto; align-self: start; padding-top: 4px !important; }
  .table.quote-table.cards-m tbody td.act-m .row-act { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 900px) { .pay-cashnote, .pay-dlg [data-pay-drop] { min-height: 0; } .pay-cashnote { padding: 10px; } }
/* on a phone a long dialog scrolls, but its buttons stay in reach at the bottom */
@media (max-width: 900px) {
  .dialog { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .dialog form > .form-foot, .dialog .panel-body > .form-foot:last-child { position: sticky; bottom: 0; z-index: 2; background: var(--panel); padding-top: 12px; padding-bottom: 12px; box-shadow: 0 -1px 0 var(--rule); }
}
@media (max-width: 600px) {
  .head-facts .head-start { display: block; }
  .head-facts .dot-sep { display: none; }
  .toolbar .seg-tabs[aria-label="แสดงรายการ"] { flex: none; white-space: nowrap; }
}
/* a dialog footer on a phone: the side action takes its own row so nothing is pushed off the edge */
@media (max-width: 600px) {
  .form-foot { flex-wrap: wrap; }
  .form-foot .foot-left { order: 3; flex: 1 1 100%; justify-content: center; margin: 0; }
  .form-foot .btn-go { flex: 1 1 auto; min-width: 0; white-space: normal; }
  .soft .toolbar .seg-tabs[aria-label="แสดงรายการ"] { flex-wrap: nowrap; }
  .soft .toolbar .seg-tabs[aria-label="แสดงรายการ"] button { padding-inline: 10px; }
}
.table .who-cell small.show-m-block { display: none; }
@media (max-width: 900px) { .table .who-cell small.show-m-block { display: block; } }
.journey-stat { min-width: 0; } .journey-stat b.is-date { overflow-wrap: anywhere; }
.ck.has-clash { box-shadow: inset 3px 0 0 var(--leave-ring); }
.ck-clash { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--leave-ink); font-size: var(--t-1); }
/* Thai names break only between words, never inside one ("รัตน/พันธ์") */
.table .main-m, .table .who-cell strong, .doc-to { word-break: keep-all; overflow-wrap: break-word; }
/* class form: one row per class day */
.slot-list { display: grid; gap: 10px; }
.slot-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.slot-row .slot-del { margin-bottom: 2px; }
.pv-slots { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--t-1); }
@media (max-width: 600px) { .slot-row { grid-template-columns: 1fr 1fr auto; } .slot-row > .field:first-child { grid-column: 1 / -1; } }

/* ── the study card: the institute's paper card, kept on screen ── */
.study-card { display: grid; gap: 14px; padding: 4px 20px 18px; }
.card-who { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; padding-bottom: 10px; border-bottom: 1px dashed var(--rule-2); font-size: var(--t-1); }
.card-who > div { display: flex; gap: 8px; align-items: baseline; }
.card-who dt { color: var(--mute); }
.card-who dd { margin: 0; font-weight: 600; color: var(--ink); }
.card-course { display: grid; gap: 8px; }
.card-course.is-queued .card-no { color: var(--ink-2); }
.card-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: var(--t-1); color: var(--ink-2); }
.card-no { font-weight: 600; color: var(--ink); min-width: 5.5em; }
.card-sizes, .card-leaves { display: inline-flex; align-items: center; gap: 4px; }
.card-sizes .tick, .card-leaves .box { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 5px; border: 1px solid var(--field-line); border-radius: 6px; font-size: 12px; color: var(--mute); background: var(--panel); font-variant-numeric: tabular-nums; }
.card-sizes .tick.on { border-color: var(--ink); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ink); }
.card-leaves .box { min-width: 24px; }
.card-leaves .box.on { min-width: auto; padding: 0 7px; background: var(--leave-bg); border-color: var(--leave-ring); color: var(--leave-ink); font-weight: 600; }
/* a leave this size does not allow: there, but out of reach (dashed and struck, never faded) */
.card-leaves .box.off { border-style: dashed; background: var(--panel-2); text-decoration: line-through; }
.card-paid { display: inline-flex; align-items: baseline; gap: 6px; }
.card-paid .owe { color: var(--bad); }
.card-date { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule-2); border-radius: 10px; overflow: hidden; }
.card-grid .cell { position: relative; display: grid; place-content: center; justify-items: center; gap: 2px; min-height: 58px; padding: 18px 6px 8px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: var(--t-1); text-align: center; }
.card-grid .cell:nth-child(4n) { border-right: 0; }
.card-grid .cell-no { position: absolute; top: 4px; left: 7px; font-size: 12px; line-height: 1; color: var(--mute); font-variant-numeric: tabular-nums; }
.card-grid .cell em { font-style: normal; font-size: 12px; color: var(--ink-2); }
.card-grid .s-absent em { color: var(--bad); }
.card-grid .s-leave-count em { color: var(--leave-ink); }
.card-grid .s-today { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); }
.card-grid .cell.is-pending { background: var(--panel-2); }
/* the state marks are the stop track's: filled = came, amber ring = leave that counted, red ring and slash = absent */
.mk { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, var(--c)) 40%, transparent); }
.mk.s-leave { background: var(--panel); box-shadow: inset 0 0 0 2.5px var(--leave-ring); }
.mk.s-absent { background: var(--panel); box-shadow: inset 0 0 0 2px var(--bad); }
.mk.s-absent::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: linear-gradient(45deg, transparent 42%, var(--bad) 42%, var(--bad) 58%, transparent 58%); }
.mk.s-today { background: var(--panel); box-shadow: inset 0 0 0 2.5px var(--k, var(--c)), 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.is-pending .mk { background: var(--panel); box-shadow: inset 0 0 0 2px var(--c); }
/* the ruled line that ends a course on the paper card */
.card-course.is-full .card-grid { border-bottom: 2px solid var(--ink-2); }
.card-legend-box summary { cursor: pointer; width: fit-content; font-size: var(--t-1); color: var(--ink-2); padding: 4px 0; }
.card-legend-box summary:hover { color: var(--ink); }
.card-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; margin: 6px 0 0; font-size: 12px; color: var(--ink-2); }
@media (max-width: 600px) {
  .study-card { padding: 4px 12px 14px; }
  .card-grid .cell { min-height: 56px; padding: 18px 3px 6px; font-size: 12px; }
  .card-grid .cell .card-date { flex-direction: column; gap: 3px; line-height: 1.25; }
  .card-legend { grid-template-columns: 1fr; }
}
.card-over { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 10px; background: var(--leave-bg); color: var(--leave-ink); font-size: var(--t-1); }
.card-over > span { flex: 1 1 260px; }
.card-renew { display: flex; justify-content: flex-end; align-items: center; gap: 10px; font-size: var(--t-1); }
.wage-part { display: block; margin-bottom: 4px; }
/* a term line with many sessions (a class meeting twice a week) shrinks its stops instead of pushing the page wide */
.track.track-lg.packed, .soft .track.track-lg.packed { --s: 10px; --w: 3px; }
.track.track-lg.packed .seg { min-width: 1px; }
@media (max-width: 600px) { .track.track-lg.packed, .soft .track.track-lg.packed { --s: 6px; --w: 2px; } .track.dense, .soft .track.dense { --s: 5px; --w: 2px; } }
.track { overflow: visible; max-width: 100%; }
.kid-card { grid-column: 1 / -1; } .kid-card .study-card { padding: 4px 0 0; }
.page-callout { margin-bottom: 14px; flex-wrap: wrap; }
.page-callout > span { flex: 1 1 280px; }
.over-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--leave-bg); color: var(--leave-ink); font-style: normal; font-size: var(--t-1); font-weight: 600; vertical-align: middle; }
/* a long row of tabs on a phone scrolls sideways inside itself, never the page */
@media (max-width: 600px) { .seg-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .page-head, .toolbar, .split, .stack, main { min-width: 0; max-width: 100%; } }
/* class roster on a phone: the name gets the full line, its figures sit under it */
@media (max-width: 600px) {
  .table.roster thead { display: none; }
  .table.roster tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
  .table.roster tbody td { padding: 0 !important; border: 0; }
  .table.roster tbody td:first-child { grid-column: 1 / -1; }
  .table.roster .roster-track { grid-column: 1 / -1; }
}
.queued-tag { background: var(--info-bg); color: var(--info-ink); }
.queued-note { color: var(--info-ink); font-weight: 600; white-space: nowrap; }
.roster-note { display: block; color: var(--ink-2); }
.stage-row th { padding-top: 18px; background: transparent; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); text-align: left; }
.stage-pick .select { min-width: 190px; }
.carried-note { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-1); }
.wage-own { border-top: 1px dashed var(--rule); padding-top: 12px; }
.wage-own summary { cursor: pointer; font-weight: 600; }
.wage-own summary .mute { font-weight: 400; font-size: var(--t-1); }
/* teaching calendar: a month grid on wide screens, a day list on phones */
.page-tabs { margin-bottom: 14px; }
.cal-bar { justify-content: space-between; }
.cal-move, .cal-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-move strong { min-width: 9em; text-align: center; font-size: var(--t-3, 1.05rem); }
.cal { padding: 0; overflow: hidden; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head span { padding: 10px 10px 6px; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.cal-grid { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cal-day { min-height: 112px; padding: 6px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.is-out { background: var(--panel-2); }
.cal-day.is-out .cal-date b { color: var(--mute); }
.cal-date { display: flex; align-items: center; gap: 6px; font-size: var(--t-1); }
.cal-date b { font-weight: 600; }
.cal-date em { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 6px; background: var(--rail); color: #fff; }
.cal-long { display: none; }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--rail); }
.cal-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 6px; align-items: center; padding: 3px 5px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 12px; line-height: 1.35;
  background: color-mix(in srgb, var(--c) var(--kw, 12%), transparent); }
.cal-time { display: inline-flex; align-items: center; gap: 4px; }
.cal-time::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.cal-item:hover { background: color-mix(in srgb, var(--c) calc(var(--kw, 12%) + 8%), transparent); }
/* a class already taught keeps full contrast; only its dot goes hollow */
.cal-item.s-done .cal-time::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--k, var(--c)); }
.cal-item.s-live { outline: 2px solid var(--k, var(--c)); }
.cal-time { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cal-what { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cal-what .route { display: none; }
.cal-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-meta { display: none; }
.cal-full { display: none; }
.cal .empty { padding: 28px 16px; }
@media (max-width: 760px) {
  .cal-head { display: none; }
  .cal-grid { display: block; }
  .cal-day { min-height: 0; border-right: 0; padding: 10px 14px; gap: 6px; }
  .cal-day.is-empty, .cal-day.is-out { display: none; }
  .cal-date b { display: none; }
  .cal-long { display: inline; font-weight: 600; }
  .cal-item { grid-template-columns: 3.4em minmax(0, 1fr); padding: 8px 10px; font-size: var(--t-1); min-height: 44px; }
  .cal-what .route { display: inline-grid; }
  .cal-meta { display: block; grid-column: 2; color: var(--ink-2); }
  .cal-short { display: none; }
  .cal-full { display: inline; }
}
.cal-item.s-off { background: repeating-linear-gradient(135deg, var(--panel-2) 0 6px, transparent 6px 12px); color: var(--mute); text-decoration: line-through; }
.cal-item.s-off .cal-time::before { background: var(--mute); }
.cal-off { font-style: normal; font-size: var(--t-1); color: var(--ink-2); text-decoration: none; justify-self: start; }
.line.is-off { opacity: .75; }
.kids-pick { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; display: grid; gap: 2px; }
.kids-pick .check { padding: 6px 4px; }
/* a Thai name is never split mid-word inside a table; long ones get the row's full width before the cell wraps */
@media (min-width: 1200px) { #student-table .who-cell strong, table.roster .who-cell strong { white-space: nowrap; } }
.table .allergy { white-space: nowrap; }
/* the books read as a book: plain category words, amounts in one column, the month's open money beside the net */
.ledger-title { font-weight: 500; color: var(--ink); }
.ledger-cat { color: var(--ink-2); font-size: var(--t-1); }
.sum-note { grid-column: 1 / -1; margin: 0; padding: 10px 16px; border-top: 1px solid var(--rule); font-size: var(--t-1); color: var(--ink-2); }
.c-amt .money { font-variant-numeric: tabular-nums; }
/* phone calendar opens at today: past days fold behind one button */
.cal-past-btn { display: none; }
@media (max-width: 760px) {
  .cal-past-btn { display: flex; width: 100%; justify-content: center; border-radius: 0; border-bottom: 1px solid var(--rule); min-height: 44px; }
  .cal[data-cal-fold]:not(.show-past) .cal-day.is-past { display: none; }
  .cal-past-btn .ico { rotate: 90deg; }
  .cal.show-past .cal-past-btn .ico { rotate: -90deg; }
}
/* phones: the three marks sit beside the name so a class of eight fits on about one screen */
@media (max-width: 760px) {
  .ck { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 10px 8px 12px; }
  .soft .ck { padding: 8px 8px 8px 12px; }
  .ck > .face { display: none; }
  .ck-pick { grid-column: auto; display: inline-flex; align-self: center; }
  .ck-opt span { width: auto; min-width: 46px; height: 44px; padding: 0 8px; }
  .ck-name strong { font-size: var(--t-2); }
}
/* parent page: the next class first, the study card one tap away */
.kid-next { display: grid; gap: 4px; margin-bottom: 16px; padding: 16px 18px; background: color-mix(in srgb, var(--c) 6%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.kid-next-k { font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.kid-next-when { font-size: var(--t-4, 1.35rem); font-weight: 600; line-height: 1.3; }
.kid-next-what { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink-2); }
.kid-next-mark { justify-self: start; margin-top: 4px; font-size: var(--t-1); font-weight: 600; color: var(--ok); }
details.kid-card > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: var(--t-1); font-weight: 500; color: var(--info-ink); }
details.kid-card > summary::-webkit-details-marker { display: none; }
details.kid-card > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: -45deg; transition: rotate .2s var(--ease); }
details.kid-card[open] > summary::before { rotate: 45deg; }
/* price sheet: the owner picks its title */
.qtitle { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.qtitle legend { padding: 0; margin-bottom: 4px; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); width: 100%; }
.qline .field > .input[data-qitem] { margin-top: 6px; }
/* one course shared by several seats (brothers and sisters, or one child in two classes) */
.panel-head .head-note { font-size: var(--t-1); }
.share-pick:empty { display: none; }
.card-shared { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-1); color: var(--ink-2); }
.cell-who { color: var(--ink-2); font-style: normal; }
/* a size not chosen yet: the sixth tile reads as a choice to defer, not a sixth size */
.pick-later .pick-card { border-style: dashed; }
.pick-later .pick-card b { font-size: var(--t-2); }
/* online sizes run in fives (5, 10, 20 sessions): five boxes a row, like their paper card */
.card-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card-grid.cols-5 .cell:nth-child(4n) { border-right: 1px solid var(--rule); }
.card-grid.cols-5 .cell:nth-child(5n) { border-right: 0; }
/* many sizes (online, private, extra): the ticks wrap instead of running off the card */
.card-sizes { flex-wrap: wrap; }
/* a receipt row keeps its number readable; the buttons drop below when the column is narrow */
.pay-row-main { flex: 1 1 150px; }
.seg-pick { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.leave-waive { align-items: flex-start; }
.leave-waive input { margin-top: 3px; flex: none; }
.card-leaves .box.is-borrowed { border-style: dashed; }
.wage-month .select { width: auto; font: inherit; font-weight: 700; padding-block: 6px; }
/* the parent's study card, opened from a shared link */
.share-page { min-height: 100vh; }
.share-wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; display: grid; gap: 16px; }
.share-sheet { display: grid; gap: 14px; padding: 4px; background: var(--bg, transparent); }
.share-head h1 { font-size: var(--t-5); margin: 2px 0 4px; }
.share-head p { margin: 0; color: var(--mute); }
.share-inst { color: var(--mute); font-weight: 600; letter-spacing: .01em; }
.share-course { padding: 16px; display: grid; gap: 14px; }
.share-course-head { display: flex; gap: 12px; align-items: center; }
.share-course-head h2 { margin: 0; font-size: var(--t-3); }
.share-course-head p { margin: 2px 0 0; font-size: var(--t-1); }
.share-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.share-figs > div { background: var(--surface-2, rgb(0 0 0 / .03)); border-radius: var(--r); padding: 10px 12px; }
.share-figs dt { font-size: var(--t-1); color: var(--mute); }
.share-figs dd { margin: 2px 0 0; }
.share-figs b { font-size: var(--t-5); line-height: 1.1; }
.share-figs small { color: var(--mute); margin-left: 2px; }
.share-rule { font-size: var(--t-1); margin: 0; }
.share-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.share-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* today: a course used up is waiting on a renewal now, apart from the ones with a session or two left */
.is-done-list .panel-head h2 { color: var(--bad); }
.is-done-list .row-cue { color: var(--bad); font-weight: 500; }

/* the proof kept with an expense: the bill, the slip that paid it, the transfer back */
.bill-list { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.bill-list[hidden] { display: none; }
.bill-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 4px 6px 6px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--panel); }
.bill-thumb { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 6px; background: var(--panel-2); color: var(--mute); }
.bill-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-2); color: var(--ink); }
.bill-name a { color: inherit; text-underline-offset: 3px; }
.doc-files { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; }

/* wages: paying one tutor for chosen days */
.wage-pick-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wage-pick-head .link-btn { font-size: var(--t-1); font-weight: 400; color: var(--ink-2); }
.wage-days { display: grid; max-height: 232px; overflow-y: auto; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--panel); }
.wage-day { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; min-height: 48px; padding: 6px 12px; border-bottom: 1px solid var(--rule); font-size: var(--t-2); }
.wage-day:last-child { border-bottom: 0; }
.wage-day b { display: block; font-weight: 500; color: var(--ink); }
.wage-day small { display: block; overflow: hidden; color: var(--mute); text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  /* the print button has its own place: under the figure, beside the pay button */
  .table.cards-m tbody td.wage-pay:not(:first-child):not(.r) { grid-column: 1; grid-row: 2; }
  .table.cards-m tbody td.r.wage-print { grid-column: 2; grid-row: 2; align-self: end; }
  .table.cards-m tfoot tr { flex-wrap: wrap; align-items: baseline; gap: 2px 12px; border-top: 1px solid var(--rule-2); }
  .table.cards-m tfoot td, .soft .table.cards-m tfoot td { border-top: 0; }
  .table.cards-m tfoot td:last-child { display: none; }
}

/* the assistant's pay asks only once an assistant is chosen */
.assist:has(#f-assist option[value=""]:checked) .assist-pay { display: none; }

/* student status tabs: the counts carry the meaning, so they read as figures; follow-ups take their colour only when there is someone to follow up */
.status-tabs .n { font-variant-numeric: tabular-nums; }
.status-tabs .is-bad .n { color: var(--bad); font-weight: 600; }
.status-tabs .is-leave .n { color: var(--leave-ink); font-weight: 600; }
.status-tabs .is-zero:not(.on) { color: var(--mute); }
@media (max-width: 600px) {
  .soft .seg-tabs.status-tabs, .seg-tabs.status-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; width: 100%; overflow: visible; }
  .status-tabs a, .soft .status-tabs a { flex-direction: column; justify-content: center; gap: 1px; min-height: 54px; padding: 6px 4px; line-height: 1.25; font-size: var(--t-1); white-space: normal; text-align: center; }
  .status-tabs .n { order: -1; margin: 0; font-size: var(--t-3); font-weight: 600; color: var(--ink); line-height: 1.2; }
  .status-tabs .is-zero .n { color: var(--mute); font-weight: 500; }
  .status-tabs .is-bad .n { color: var(--bad); }
  .status-tabs .is-leave .n { color: var(--leave-ink); }
}

/* student list letter headers, and on a phone the letter strip down the right edge */
.table tr.abc th, .soft .table tr.abc th { padding: 6px 16px 4px; background: var(--panel-2, #f6fbf9); border-bottom: 1px solid var(--rule); font-size: var(--t-1); font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.table tr.abc { scroll-margin-top: 8px; }
.abc-jump { display: none; }
@media (max-width: 600px) {
  .table.cards-m tbody tr.abc { display: block; padding: 0; background: var(--seafoam-wash); }
  .table.cards-m tbody tr.abc th { display: block; padding: 5px 16px 3px; background: transparent; color: var(--l-ink); }
  .abc-jump:not([hidden]) {
    position: fixed; z-index: 20; right: 0; top: 50%; translate: 0 -50%;
    display: flex; flex-direction: column; max-height: calc(100dvh - 190px); width: 24px; padding: 6px 0; border-radius: 11px 0 0 11px;
    background: rgb(255 255 255 / .86); box-shadow: 0 1px 2px rgb(11 70 60 / .1), 0 4px 12px -4px rgb(11 70 60 / .18); touch-action: none;
  }
  .abc-jump button { flex: 0 1 24px; min-height: 13px; padding: 0; border: 0; background: none; font: 600 11px/1 inherit; font-family: inherit; color: var(--l-ink); cursor: pointer; }
  .abc-jump button:active { color: var(--rail); }
  .abc-jump button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 4px; }
}

.wage-part .wage-to { font-weight: 600; color: var(--ink); }

.new-account:not([hidden]) { display: flex; gap: 8px; margin-top: 8px; }
.new-account .input { flex: 1 1 auto; min-width: 0; }

/* many-at-once account dialog: each month under its own name inside the scrolling list */
.bulk-rows { max-height: min(46dvh, 360px); }
.bulk-month { position: sticky; top: 0; z-index: 1; margin: 0; padding: 6px 12px 4px; background: var(--panel-2, #f6fbf9); border-bottom: 1px solid var(--rule); font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.bulk-rows { display: block; }
.bulk-rows .wage-day { min-height: 0; align-items: center; }

/* wage dialog: sessions already paid stay listed, grey and fixed, under their own heading */
.wage-days { position: relative; }
.wage-day.is-paid { align-items: center; background: var(--panel-2, #f6fbf9); color: var(--mute); }
.wage-day.is-paid b { color: var(--ink-2); font-weight: 500; }
.wage-day.is-paid .num { color: var(--mute); }
.wage-paid-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ok-bg, #e3f3ea); color: var(--ok); }
.wage-day.is-paid .num { text-align: right; }
.wage-day.is-paid .wage-paid-on { display: block; white-space: nowrap; font-size: var(--t-1); color: var(--ok); }
button.chip-btn { border: 0; padding: 4px 10px; border-radius: 999px; font: inherit; font-size: var(--t-1); font-weight: 500; cursor: pointer; }
button.chip-btn:hover { filter: brightness(.96); }
button.chip-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ══ Checkie ════════════════════════════════════════════════════════════════
   The logo's world over every screen: aqua rail, white sticker tiles, Mitr headings,
   lime ticks for sessions attended, the sun-yellow clip on the live sheet. */

/* type: headings and the figures a page is about speak in Mitr */
h1, h2, h3, .page-head h1, .panel-head h2, .dialog .panel-head h2, .confirm-body h2,
.sum b, .net b, .journey-stat b, .pkg-top strong, .pick-card b, .kid-next-when, .share-figs b,
.login-card h1, .pay-title h2, .cal-move strong, .wordmark { font-family: var(--display); }
h1, .page-head h1, .soft .page-head h1 { font-weight: 600; letter-spacing: 0; line-height: 1.25; }
h2, .panel-head h2, .soft .panel-head h2 { font-weight: 500; letter-spacing: 0; }
.sum b, .net b, .journey-stat b, .pkg-top strong, .share-figs b, .kid-next-when { font-weight: 500; letter-spacing: 0; }
.money { font-variant-numeric: tabular-nums; }
::selection, .soft ::selection { background: #c4efe7; color: var(--ink); }
html { scrollbar-color: #a9dcd2 transparent; }
input, textarea { caret-color: var(--pine); }
a { text-underline-offset: 3px; }

/* ── the wordmark and the mascot ── */
.wordmark { position: relative; display: inline-block; font-weight: 600; font-size: 22px; line-height: 1; color: var(--pine); letter-spacing: -.005em; }
.wordmark .wm-i { position: relative; display: inline-block; }
.wordmark .wm-i::before { content: ""; position: absolute; left: 50%; top: -.34em; width: .62em; height: .5em; translate: -38% 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M3 8.5l4.6 4.5L17.5 3' fill='none' stroke='%23f2b800' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.by-pill { display: inline-flex; align-items: center; min-height: 20px; padding: 0 9px; border-radius: 999px; background: #dff6d4; color: #2c5f20; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.mascot { display: block; flex: none; width: 40px; height: 40px; border-radius: 28%; box-shadow: 0 1px 2px rgb(19 74 51 / .18), 0 6px 14px -8px rgb(19 74 51 / .45); }
.brand { gap: 12px; padding: 2px 6px 22px; }
.brand-words { display: grid; gap: 5px; justify-items: start; }

/* ── shell: the aqua rail ── */
.rail, .soft .rail {
  padding: 20px 14px 14px;
  background: linear-gradient(170deg, #9aece5 0%, var(--aqua) 46%, var(--aqua-2) 100%);
  color: var(--rail-ink);
}
.rail .brand .mascot { width: 44px; height: 44px; }
.rail-nav { gap: 4px; }
.rail-nav a, .soft .rail-nav a { min-height: 46px; gap: 12px; padding: 0 12px; border-radius: 16px; color: var(--rail-ink); font-weight: 500; }
.rail-nav a .ico { width: 21px; height: 21px; }
.rail-nav a:hover { background: rgb(255 255 255 / .42); color: var(--rail-ink); }
.rail-nav a.on, .soft .rail-nav a.on { background: #fff; color: var(--pine); font-weight: 600; box-shadow: 0 1px 2px rgb(19 74 51 / .12), 0 8px 18px -10px rgb(19 74 51 / .4); }
.rail-nav a.on .ico { color: var(--pine); }
.rail-foot { border-top: 0; gap: 4px; padding-top: 14px; }
.rail-foot::before { content: ""; height: 2px; margin: 0 8px 10px; border-radius: 2px; background: rgb(19 74 51 / .12); }
.rail-lines { display: none; }
a.who { padding: 8px 10px; border-radius: 16px; color: var(--rail-ink); }
a.who:hover, a.who.on { background: rgb(255 255 255 / .42); }
.who small { color: var(--rail-mute); }
.avatar, .soft .avatar { width: 32px; height: 32px; background: #fff; color: var(--pine); font-family: var(--display); font-weight: 600; box-shadow: inset 0 0 0 2px var(--pine); }
.rail-out, .soft .rail-out { min-height: 38px; border-radius: 14px; color: var(--rail-ink); font-size: var(--t-1); font-weight: 500; }
.rail-out:hover, .rail-out.on { background: rgb(255 255 255 / .42); color: var(--rail-ink); }
.rail .demo-tag { display: inline-flex; width: fit-content; margin: 0 10px 8px; padding: 2px 10px; border-radius: 999px; background: var(--sun); color: #4d3900; }
.main, .soft .main { padding-top: 30px; }

/* ── buttons: rounded tiles; pine for the one action, white sticker for the rest ── */
.btn, .soft .btn { border-radius: 14px; font-weight: 600; padding: 0 16px; }
.btn-sm, .soft .btn-sm { border-radius: 11px; min-height: 34px; padding: 0 12px; font-weight: 500; }
.btn-icon, .soft .btn-icon { padding: 0; }
.btn-go, .btn-ink, .soft .btn-go { background: var(--pine); color: #fff; box-shadow: 0 1px 2px rgb(19 74 51 / .3), 0 8px 16px -10px rgb(31 107 74 / .7); }
.btn-go:hover, .btn-ink:hover, .soft .btn-go:hover { background: var(--rail-2); box-shadow: 0 1px 2px rgb(19 74 51 / .3), 0 10px 18px -10px rgb(31 107 74 / .8); }
.btn-go:active, .btn-line:active { transform: translateY(1px); }
.btn-line, .soft .btn-line { background: #fff; color: var(--ink); border: 1.5px solid #b6d9cf; box-shadow: 0 1px 2px rgb(19 74 51 / .06); }
.btn-line:hover, .soft .btn-line:hover { background: #fff; border-color: var(--pine); color: var(--pine); box-shadow: 0 1px 2px rgb(19 74 51 / .06); }
.btn-quiet { color: var(--ink-2); }
.btn-quiet:hover { background: var(--aqua-wash); color: var(--pine); }
.btn-danger { background: var(--bad); }
.btn[disabled], .btn[disabled]:hover, .soft .btn[disabled], .soft .btn[disabled]:hover { background: #e2efeb; color: #5d7a6f; border-color: transparent; box-shadow: none; transform: none; }

/* ── sheets: white sticker tiles on the aqua-white ground ── */
.panel, .soft .panel { border: 0; border-radius: var(--r-lg); background: #fff; box-shadow: var(--lift); }
.soft .split > aside .panel, .soft .split > .stack + .stack .panel { background: #fff; box-shadow: inset 0 0 0 1.5px var(--rule); }
.panel-head h2, .soft .panel-head h2 { font-size: var(--t-3); line-height: 1.35; }
.panel-head a.more { color: var(--pine); font-weight: 500; }
.page-head h1, .soft .page-head h1 { font-size: var(--t-5); }
.page-head p, .soft .page-head p { color: var(--mute); }
.crumb { color: var(--ink-2); font-weight: 500; }
.crumb:hover { color: var(--pine); }

/* the hello line on Today: the mascot beside the date */
.hello { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hello .mascot { width: 58px; height: 58px; border-radius: 30%; }
.hello-spark { position: relative; flex: none; }
.hello-spark::before { content: ""; position: absolute; z-index: 1; left: -10px; top: -10px; width: 22px; height: 22px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg stroke='%23ffcb1f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10 2.5v4'/%3E%3Cpath d='M3 6l3 2.6'/%3E%3Cpath d='M2 13.5l4-1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }

/* ── status chips: soft tinted pills ── */
.soft .chip { padding: 2px 10px 2px 8px; background: #e6f4f0; color: var(--ink-2); font-weight: 500; }
.soft .chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-ok::before { background: var(--lime); }
.soft .chip-leave { background: var(--leave-bg); color: var(--leave-ink); }
.chip-leave::before { background: #f2b800; }
.soft .chip-bad { background: var(--bad-bg); color: var(--bad); }
.soft .chip-info { background: var(--info-bg); color: var(--info-ink); }
.soft .chip-hold { background: #e4efec; color: var(--ink-2); }
.soft .chip-live { background: var(--pine); color: #fff; padding: 2px 11px 2px 9px; }
.chip-live::before { background: var(--sun); }
.soft .kid .chip { background: none; padding: 0; }

/* waiting signals: white sticker pills with a tinted icon disc */
.soft .signal { min-height: 44px; padding: 0 16px 0 6px; border-radius: 999px; background: #fff; box-shadow: var(--lift); color: var(--ink-2); font-weight: 500; }
.soft .signal .ico { width: 32px; height: 32px; padding: 7px; background: var(--aqua-wash); color: var(--pine); }
.soft .signal.warn .ico { background: var(--bad-bg); color: var(--bad); }
.soft .signal.wait .ico { background: var(--leave-bg); color: var(--leave-ink); }
.soft .signal b { font-family: var(--display); font-weight: 600; font-size: var(--t-3); }

/* ── today: class rows, and the live class as Checkie's clipboard ── */
.soft .line { border-radius: 16px; }
.soft .line:hover { background: var(--panel-2); }
.line .t { font-family: var(--display); font-weight: 500; }
.soft .line .t { font-size: var(--t-3); }
.line .t small { font-family: "Plex Thai", system-ui, sans-serif; }
.soft .live-wrap { position: relative; margin: 22px 2px 8px; border-radius: 20px; background: var(--aqua-wash);
  box-shadow: inset 0 0 0 2px #bfeee6; }
.live-wrap::before { content: ""; position: absolute; left: 50%; top: -12px; translate: -50% 0; width: 76px; height: 22px; border-radius: 9px 9px 7px 7px;
  background: var(--sun); box-shadow: inset 0 0 0 2px #d9a400, 0 2px 4px rgb(19 74 51 / .18); }
.live-wrap::after { content: ""; position: absolute; left: 50%; top: -6px; translate: -50% 0; width: 22px; height: 7px; border-radius: 6px; background: #fff7d1; box-shadow: inset 0 0 0 1.5px #d9a400; }
.soft .live-wrap .line { padding-top: 20px; }
.soft .kid { background: #fff; box-shadow: 0 1px 2px rgb(19 74 51 / .08); }

/* ── the stop track: each session is a box on the sheet; attended ones get Checkie's tick ── */
.track .seg { background: #d3e9e3; }
.track .stop { box-shadow: inset 0 0 0 var(--w) var(--stop-ring); }
.track .s-in, .track .stop.s-in { background: var(--lime); box-shadow: inset 0 0 0 1px rgb(19 74 51 / .18); }
.track-lg .s-in, .soft .track-lg .s-in {
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.1L15 6.6' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat; }
.track .s-leave { box-shadow: inset 0 0 0 var(--w) #e6b000; background: #fff8d6; }
.track .s-today { box-shadow: inset 0 0 0 var(--w) var(--pine), 0 0 0 2px #fff, 0 0 0 5px rgb(255 210 63 / .75); }
@keyframes beacon {
  0%, 100% { box-shadow: inset 0 0 0 var(--w) var(--pine), 0 0 0 2px #fff, 0 0 0 5px rgb(255 210 63 / .8); }
  50% { box-shadow: inset 0 0 0 var(--w) var(--pine), 0 0 0 2px #fff, 0 0 0 10px rgb(255 210 63 / 0); }
}
.track .stop.lit { animation: stamp .7s var(--ease) both; }
@keyframes stamp { 0% { transform: scale(.4); } 55% { transform: scale(1.45); } 100% { transform: scale(1); } }
.track-lg .stop[data-tip]:hover::before { background: var(--pine); border-radius: 8px; font-family: "Plex Thai", system-ui, sans-serif; }
.legend .k-in { background: var(--lime); }
.legend .k-leave { box-shadow: inset 0 0 0 2px #e6b000; background: #fff8d6; }
.legend .k-today { box-shadow: inset 0 0 0 2px var(--pine), 0 0 0 2px #fff, 0 0 0 3px rgb(255 210 63 / .9); }
.mk { background: var(--lime); box-shadow: none; }
.mk.s-leave { box-shadow: inset 0 0 0 2.5px #e6b000; background: #fff8d6; }
.mk.s-today { box-shadow: inset 0 0 0 2.5px var(--pine), 0 0 0 3px rgb(255 210 63 / .6); }
.is-pending .mk { box-shadow: inset 0 0 0 2px var(--stop-ring); }

/* class badge: a rounded tile in the class colour, its code in Mitr */
.route, .soft .route { font-family: var(--display); font-weight: 600; letter-spacing: .02em; border-radius: 9px; }
.soft .route-lg { border-radius: 16px; }
.soft .route-sm { border-radius: 6px; }

/* ── forms ── */
.input, .select, .textarea, .soft .input, .soft .select, .soft .textarea { border-radius: 12px; border-width: 1.5px; border-color: var(--field-line); background-color: #fff; }
.input:hover, .select:hover, .textarea:hover, .soft .input:hover, .soft .select:hover, .soft .textarea:hover { border-color: var(--pine); }
.input:focus, .select:focus, .textarea:focus, .soft .input:focus, .soft .select:focus, .soft .textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 4px rgb(13 127 115 / .18); }
.soft .search .input { border-color: var(--field-line); box-shadow: none; }
.soft .search .input:focus { border-color: var(--focus); box-shadow: 0 0 0 4px rgb(13 127 115 / .18); }
.datefield:focus-within .datefield-face { border-color: var(--focus); box-shadow: 0 0 0 4px rgb(13 127 115 / .18); }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f6b4a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.field > span { font-weight: 600; }
.check input { accent-color: var(--pine); }
.soft .callout { border-radius: 14px; }
.soft .drop { border: 2px dashed #9fcdc1; border-radius: 18px; background: var(--panel-2); }
.soft .drop:hover { border-color: var(--pine); background: var(--aqua-wash); }
.soft .pick-card { border-radius: 16px; border-width: 1.5px; }
.pick input:checked + .pick-card, .soft .pick input:checked + .pick-card { border-color: var(--pine); background: var(--aqua-wash); box-shadow: inset 0 0 0 1.5px var(--pine); }
.day input:checked + span { background: var(--pine); border-color: var(--pine); }
.soft .choose .row:has(input:checked) { background: var(--aqua-wash); box-shadow: inset 0 0 0 2px var(--pine); }

/* ── tabs ── */
.seg-tabs, .soft .seg-tabs { background: #dcf3ee; border-radius: 14px; }
.seg-tabs a, .seg-tabs button { font-weight: 500; color: var(--ink-2); }
.seg-tabs .on, .soft .seg-tabs .on { background: #fff; color: var(--pine); font-weight: 600; box-shadow: 0 1px 2px rgb(19 74 51 / .12), 0 4px 10px -6px rgb(19 74 51 / .3); }
.subnav a.on { color: var(--pine); border-color: var(--pine); font-weight: 600; }

/* ── tables ── */
.table th, .soft .table th { color: var(--mute); font-weight: 600; }
.table tbody tr:hover, .soft .table tbody tr:hover { background: #f1fbf8; }
.table tr.abc th, .soft .table tr.abc th { background: var(--aqua-wash); color: var(--pine); font-family: var(--display); font-weight: 500; }

/* ── check-in: the clipboard itself ── */
.soft .ck-pick { background: #e2f4ef; border-radius: 14px; }
.soft .ck-opt span { border-radius: 10px; font-weight: 600; }
.ck-in input:checked + span { background: var(--ok); color: #fff; }
.ck-leave input:checked + span { background: var(--sun); color: #4d3900; }
.ck-in input:checked:focus + span { animation: stamp-btn .45s var(--ease); }
@keyframes stamp-btn { 0% { transform: scale(.88); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.soft .checkin-bar { border-radius: 20px; background: var(--pine); color: #d9f3ea; box-shadow: 0 18px 40px -16px rgb(19 74 51 / .6); }
.checkin-bar b { font-family: var(--display); font-weight: 500; }
.checkin-bar .btn-go, .soft .checkin-bar .btn-go { background: var(--sun); color: #3d2e00; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.checkin-bar .btn-go:hover, .soft .checkin-bar .btn-go:hover { background: #ffdd66; }
.checkin-bar .btn-go[disabled], .soft .checkin-bar .btn-go[disabled] { background: rgb(255 255 255 / .18); color: rgb(255 255 255 / .8); }

/* ── money ── */
.money.plus { color: var(--ok); }
@media (min-width: 901px) { .soft .sum b { font-size: var(--t-5); } }
.soft .pay { border-radius: 22px; }

/* ── calendar ── */
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--pine); background: #f6fdfb; }
.cal-date em { background: var(--pine); border-radius: 999px; }

/* ── empty: the mascot waits with the one action that fills the space ── */
.empty .mascot { width: 76px; height: 76px; margin-bottom: 8px; border-radius: 30%; }
.empty strong { font-family: var(--display); font-weight: 500; font-size: var(--t-3); }

/* ── dialogs, toast, menus ── */
.dialog, .soft .dialog { border-radius: 26px; }
.soft .dialog::backdrop, .dialog::backdrop { background: rgb(12 52 38 / .42); backdrop-filter: blur(2px); }
.toast, .soft .toast { border-radius: 18px; background: var(--pine); }
.toast > .ico { color: #b6ea8f; }
.soft .row-menu-pop { border-radius: 16px; }
.row-menu[open] summary { background: var(--aqua-wash); }

/* ── the install hint: a small sticker above the tab bar ── */
.install { position: fixed; z-index: 35; left: 50%; bottom: 20px; translate: -50% 0; width: min(420px, calc(100vw - 24px));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px;
  border-radius: 22px; background: #fff; box-shadow: var(--shadow-pop), inset 0 0 0 1.5px #bfeee6; animation: rise .4s var(--ease); }
.install .mascot { width: 46px; height: 46px; }
.install strong { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-3); line-height: 1.3; color: var(--ink); }
.install p { font-size: var(--t-1); color: var(--mute); line-height: 1.45; }
.install p .ico { display: inline; vertical-align: -3px; width: 16px; height: 16px; color: var(--pine); }
.install-act { display: flex; align-items: center; gap: 4px; }

/* ── login, password and error cards on the aqua field ── */
.login-map, .soft .login-map { display: grid; place-items: center; background: radial-gradient(120% 90% at 30% 20%, #a9f0e9 0%, var(--aqua) 48%, var(--aqua-2) 100%); }
.login-logo { width: min(420px, 74%); height: auto; aspect-ratio: 1; border-radius: 22%; filter: drop-shadow(0 24px 40px rgb(19 74 51 / .25)); }
.soft .login-form { background: var(--ground); }
.soft .login-card { border-radius: 26px; box-shadow: var(--lift-hi); }
.login-card .brand { padding: 0 0 22px; gap: 12px; }
.login-card .brand .mascot { width: 48px; height: 48px; }
.login-card h1 { font-size: var(--t-5); }
.login-card .btn-go { min-height: 48px; font-size: var(--t-3); }

/* ── phones: a top bar with the mascot, a floating white tab bar ── */
.mobile-top { gap: 6px; margin: -2px 0 14px; }
.mobile-top .brand { gap: 10px; padding: 0; min-height: 48px; }
.mobile-top .brand .mascot { width: 38px; height: 38px; }
.mobile-top .wordmark { font-size: 21px; }
.mobile-top .btn-icon { width: 42px; height: 42px; min-height: 42px; border-radius: 14px; background: #fff; color: var(--pine); box-shadow: 0 1px 2px rgb(19 74 51 / .1); }
.mobile-top .btn-icon:hover { background: var(--aqua-wash); }
.mobile-top .demo-tag { padding: 2px 8px; border-radius: 999px; background: var(--sun); color: #4d3900; }
.mobile-top .wordmark, .mobile-top .demo-tag { white-space: nowrap; }
.mobile-top { position: relative; }
.mobile-top .demo-tag { position: absolute; left: 48px; top: 37px; z-index: 1; padding: 0 7px; font-size: 10.5px; line-height: 1.6; }
.mobile-top:has(+ .page-head .hello) .demo-tag { left: 0; }
.mobile-top .brand { min-width: 0; }
/* Today greets with the mascot beside the date, so its top bar keeps only the wordmark */
.mobile-top:has(+ .page-head .hello) .brand .mascot { display: none; }

@media (max-width: 900px) {
  :root { --t-5: 25px; }
  .rail, .soft .rail {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 6px; border: 0; border-radius: 24px; background: #fff;
    box-shadow: 0 2px 6px rgb(19 74 51 / .1), 0 16px 34px -12px rgb(19 74 51 / .38), inset 0 0 0 1px #d7efe9;
  }
  .rail-nav a, .soft .rail-nav a { min-height: 56px; gap: 3px; padding: 4px 2px; border-radius: 18px; color: #4b6b60; font-size: 12.5px; font-weight: 500; }
  .rail-nav a .ico { width: 23px; height: 23px; }
  .rail-nav a:hover { background: transparent; }
  .rail-nav a.on, .soft .rail-nav a.on { background: var(--aqua-wash); color: var(--pine); box-shadow: none; }
  .rail-nav a.on .ico { stroke-width: 2.4; }
  .main, .soft .main { padding: 12px 16px 112px; }
  .shell-solo .main, .soft .shell-solo .main { padding-bottom: 32px; }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .shell-solo ~ .toast { bottom: 16px; }
  .checkin-bar, .soft .checkin-bar { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .dock-m { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .install { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .shell-solo ~ .install { bottom: 16px; }
  .hello .mascot { width: 48px; height: 48px; }
  .hello { gap: 12px; }
  .soft .live-wrap { margin: 20px 0 8px; }
  .login-map, .soft .login-map { height: auto; padding: 22px 0 54px; }
  .login-logo { width: 168px; }
  .soft .login-card { margin-top: -40px; }
}
@media (max-width: 380px) {
  .mobile-top .wordmark { font-size: 19px; }
  .rail-nav a, .soft .rail-nav a { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .track .stop.lit, .ck-in input:checked:focus + span { animation: none; }
}

/* a row that needs a second look is tinted, not edged */
.ck.leave-counts, .ck.has-clash, .soft .ck.leave-counts, .soft .ck.has-clash { box-shadow: none; background: #fffbe8; }
.ck:focus-within, .soft .ck:focus-within { box-shadow: none; background: var(--aqua-wash); }
@media (max-width: 600px) {
  .soft .sum b { font-size: var(--t-3); }
  .toolbar.one-row .select { flex: 0 1 auto; min-width: 0; }
  .toolbar.one-row .seg-tabs a, .toolbar.one-row .seg-tabs button { padding-inline: 10px; }
}

/* the ticked part of a track is the sheet filling up: lime, not the class colour (that stays on the badge) */
.track .seg.run { background: #a6dd88; }
/* the login card sits beside the big logo, so it carries no second brand */
.login:not(.login-solo) .login-card .brand { display: none; }
/* text links that wrap keep one continuous underline */
.sum-note .plain-link { border-bottom: 0; text-decoration: underline 1px var(--rule-2); text-underline-offset: 4px; }
.sum-note .plain-link:hover { text-decoration-color: currentColor; }
@media (max-width: 900px) {
  /* the check-in sheet is the whole job: the tab bar steps aside and the save bar sits at the bottom edge */
  body:has(.checkin) .rail { display: none; }
  body:has(.checkin) .main { padding-bottom: 32px; }
  body:has(.checkin) .checkin-bar { bottom: calc(10px + env(safe-area-inset-bottom)); }
  body:has(.checkin) .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  html:has(.checkin) { scroll-padding-bottom: 110px; }
}
@media (max-width: 600px) {
  /* a child with a leave or clash note: the marks go full width under the name so the note has room */
  .ck:has(.ck-warn:not([hidden]), .ck-filed, .ck-clash) { grid-template-columns: minmax(0, 1fr); }
  .ck:has(.ck-warn:not([hidden]), .ck-filed, .ck-clash) .ck-pick { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
}

/* printed paper (receipt, quotation, wage voucher, books) keeps the institute's own look: Plex Thai throughout, no Checkie voice */
.doc, .doc * { font-family: "Plex Thai", "Leelawadee UI", "Noto Sans Thai", system-ui, sans-serif; }

/* ── phone Today (picked from the design canvas: waiting cards in two columns, compact classes, a smaller tab bar) ── */
@media (max-width: 900px) {
  /* tab bar: 48px tiles, 20px icons, closer to the edge */
  .rail, .soft .rail { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 4px; border-radius: 20px; }
  .rail-nav a, .soft .rail-nav a { min-height: 48px; gap: 1px; padding: 3px 2px; border-radius: 16px; font-size: 11.5px; }
  .rail-nav a .ico { width: 20px; height: 20px; }
  .rail-nav a.on, .soft .rail-nav a.on { font-weight: 600; }
  .main, .soft .main { padding-bottom: 96px; }
  .toast, .install { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .dock-m { bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* the date stays on one line beside the mascot */
  .hello .mascot { width: 52px; height: 52px; }
  .page-head .hello h1, .soft .page-head .hello h1 { font-size: clamp(18px, 5.6vw, 22px); line-height: 1.25; }
  .page-head .hello p { font-size: var(--t-1); }
  .mobile-top:has(+ .page-head .hello) { margin-bottom: 22px; }

  /* what is waiting: white cards two to a row, the figure above its words */
  .soft .signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: -6px 0 16px; }
  .soft .signal, .soft .signal:first-child { min-height: 56px; padding: 8px 10px; gap: 10px; border-radius: 16px; }
  .soft .signal .ico { width: 34px; height: 34px; padding: 8px; }
  .soft .signal > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; font-size: var(--t-1); }
  .soft .signal b { font-size: 18px; line-height: 1.15; }
  .soft .signal:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 48px; }
  .soft .signal:last-child:nth-child(odd) > span { display: block; }
  .soft .signal:last-child:nth-child(odd) b { margin-right: 4px; }

  /* today's classes: no legend line, the live class a plain aqua sheet, badge beside the time */
  #h-lines + .legend { display: none; }
  .soft .live-wrap { margin: 4px 0 8px; }
  .live-wrap::before, .live-wrap::after { display: none; }
  .soft .live-wrap .line { padding-top: 12px; }
  .soft .line { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; }
  .line .t { display: flex; flex-direction: column; }
  .line .what strong .route.show-m-inline { margin-right: 6px; }
}

/* ── the class teaching now: how the room stands, not every child (the check-in sheet lists them) ── */
.live-body { display: grid; gap: 12px; padding: 4px 16px 16px 96px; }
.live-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; max-width: 520px; }
.live-count > div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 14px; background: #fff; }
.live-count dd { order: -1; margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--t-4); line-height: 1.2; color: var(--ink); }
.live-count dt { font-size: var(--t-1); color: var(--ink-2); }
.live-count .is-in dd { color: var(--ok); }
.live-count .is-leave dd { color: var(--leave-ink); }
.live-count .is-absent dd { color: var(--bad); }
.live-count .is-wait { box-shadow: inset 0 0 0 1.5px var(--stop-ring); }
.live-k { font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.live-wait ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.live-wait li { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 2px 12px; border-radius: 999px; background: #fff; font-weight: 500; }
.live-tag { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--leave-ring); color: var(--leave-ink); font-size: 12px; font-weight: 600; }
.live-tag .ico { width: 13px; height: 13px; }
.live-notes { display: grid; gap: 4px; }
.live-notes li { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; background: #fff; color: var(--ink-2); font-size: var(--t-1); }
.live-notes li.is-leave { background: #fff8d6; color: var(--leave-ink); }
.live-notes li.is-allergy { color: var(--leave-ink); font-weight: 600; }
.live-notes .ico { width: 14px; height: 14px; }
.live-body .live-cta, .soft .live-body .live-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; justify-items: stretch; padding: 0; }
.live-body .live-cta .btn { width: 100%; min-height: 44px; max-width: 520px; }
.live-body .live-cta p { font-size: var(--t-1); color: var(--mute); }

@media (max-width: 900px) {
  .live-body { padding: 0 12px 14px; }
  .live-body .live-cta .btn { max-width: none; }
  .live-body .live-cta p { text-align: center; }
  /* a class row on a phone: time and status on one line, the class and its tutor under it, then its sessions */
  .soft .line { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t end" "what what" "track track"; row-gap: 6px; }
  .soft .line .t { grid-area: t; display: block; font-size: var(--t-2); color: var(--ink-2); }
  .soft .line .t small { display: inline; margin-left: 4px; font-size: var(--t-1); }
  .soft .line .what { grid-area: what; }
  .soft .line .what strong { font-family: var(--display); font-weight: 500; font-size: var(--t-3); }
  .soft .line .end { grid-area: end; display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; }
  .soft .line .end b { font-size: var(--t-1); }
  .soft .line .track, .soft .line.is-live .track { grid-area: track; padding: 4px 0 0; }
}

/* ── owing on Today: who, how much is left, and how far along the payment is ── */
.owe-total { font-size: var(--t-1); color: var(--mute); }
.owe-total b { font-family: var(--display); font-weight: 600; font-size: var(--t-3); color: var(--bad); }
.owe-list { display: grid; padding: 0 8px 8px; }
.owe-item { display: grid; gap: 6px; padding: 12px 10px; border-radius: 16px; color: var(--ink); text-decoration: none; transition: background .15s var(--ease); }
.owe-item { border-radius: 0; }
.owe-item + .owe-item { border-top: 1px solid var(--rule); }
.owe-item:hover { background: var(--panel-2); }
.owe-top { display: flex; align-items: center; gap: 10px; }
.owe-who { flex: 1; min-width: 0; }
.owe-who strong { font-family: var(--display); font-weight: 500; font-size: var(--t-3); }
.owe-who small { font-size: var(--t-1); color: var(--mute); word-break: keep-all; }
.owe-amt { text-align: right; line-height: 1.2; white-space: nowrap; }
.owe-amt b { display: block; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--bad); }
.owe-amt small { font-size: 12px; color: var(--mute); }
.owe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.owe-meta .route { flex: none; }
.owe-bar { display: flex; align-items: center; gap: 8px; }
.owe-track { flex: 1; height: 6px; border-radius: 6px; background: var(--bad-bg); overflow: hidden; }
.owe-track i { display: block; height: 100%; border-radius: inherit; background: var(--lime); }
.owe-paid { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.owe-paid.is-none { color: var(--bad); font-weight: 500; }
.owe-meta { font-size: 12.5px; color: var(--mute); }

/* ── Today's side lists: every name starts at the same left edge; the class badge rides on the second line ── */
.row.item { align-items: center; gap: 10px; text-decoration: none; }
.soft .row.item { border-radius: 0; }
.soft .rows > .row.item + .row.item { border-top: 1px solid var(--rule); }
.item-top { display: block; line-height: 1.35; }
.item-top strong { display: inline; font-family: var(--display); font-weight: 500; font-size: var(--t-3); }
.item-top small { display: inline; font-size: var(--t-1); color: var(--mute); word-break: keep-all; }
.item-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 3px; font-size: var(--t-1); color: var(--ink-2); }
.item-sub .route { flex: none; }
/* the one thing to do with a row reads as a small outlined button */
.soft .row-cue { min-height: 36px; padding: 0 8px 0 12px; border-radius: 12px; border: 1.5px solid #b6d9cf; background: #fff; color: var(--pine); font-weight: 600; }
.soft .row:hover .row-cue { border-color: var(--pine); color: var(--pine); }
.soft .is-done-list .row-cue { color: var(--bad); border-color: #f1c4c0; }
.soft .is-done-list .row:hover .row-cue { border-color: var(--bad); color: var(--bad); }

/* class rows on Today: the class name leads at one left edge; its badge rides on the tutor line */
.soft .lines .line { grid-template-columns: 68px minmax(0, 1fr) auto; }
.soft .lines .line .track { grid-column: 2 / 3; }
.soft .lines .line.is-live .track { grid-column: 2 / -1; }
.line .what > span .route, .item-sub .route, .owe-meta .route { display: inline-grid; vertical-align: 1px; margin-right: 6px; }
.item-sub, .owe-meta { display: block; }
@media (max-width: 900px) {
  .soft .lines .line { grid-template-columns: minmax(0, 1fr) auto; }
  .soft .lines .line .track, .soft .lines .line.is-live .track { grid-column: auto; grid-area: track; }
}

/* ── students: the heading counts the children; the used-so-far bar shows on phones only ── */
.head-count { margin-left: 6px; font-family: "Plex Thai", system-ui, sans-serif; font-size: var(--t-2); font-weight: 400; color: var(--mute); }
.left-bar { display: none; }

/* ── students on a phone (picked from the design canvas, variant B):
   filter pills that scroll, one white card per child, a bar of sessions used ── */
@media (max-width: 600px) {
  .page-head:has(.add-tile) { flex-wrap: nowrap; align-items: center; }
  .page-head:has(.add-tile) .actions { width: auto; }
  .page-head .add-tile { flex: none; width: 46px; min-height: 46px; padding: 0; order: 0; flex-basis: auto; }
  .add-tile .add-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .add-tile .ico { width: 22px; height: 22px; stroke-width: 2.4; }

  /* search and grade on one row, then the pills */
  .toolbar:has(.status-tabs) { display: flex; flex-wrap: wrap; gap: 10px 8px; }
  .toolbar .search { order: 1; flex: 1 1 0; min-width: 0; max-width: none; }
  .toolbar .stage-pick { order: 2; flex: none; }
  .toolbar .stage-pick .select { min-width: 0; width: 116px; }
  .toolbar .filter-scope { order: 3; }
  /* status: six tiles, three to a row, each framed in its own colour; the figure above its word */
  .soft .seg-tabs.status-tabs, .seg-tabs.status-tabs {
    order: 4; flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    margin: 0; padding: 0; overflow: visible; border-radius: 0; background: none;
  }
  .status-tabs a, .soft .status-tabs a {
    --tbg: var(--aqua-wash); --tline: #bfeee6; --tink: var(--pine); --tstrong: var(--pine);
    flex-direction: column; justify-content: center; align-items: center; gap: 0; min-height: 60px; padding: 6px 4px;
    border-radius: 16px; background: var(--tbg); box-shadow: inset 0 0 0 1.5px var(--tline);
    color: var(--ink-2); font-size: 12.5px; font-weight: 500; line-height: 1.3; white-space: nowrap;
    transition: box-shadow .15s var(--ease), background .15s var(--ease);
  }
  .status-tabs .n, .soft .status-tabs .n { order: -1; margin: 0; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--tink); }
  /* each status its colour: all = aqua, studying = lime, nearly done = sun, paused = slate, owing = coral, expired = clay */
  .status-tabs a:nth-child(2) { --tbg: #ecf8e2; --tline: #c9e9ad; --tink: var(--ok); --tstrong: #4e9a2a; }
  .status-tabs a:nth-child(3) { --tbg: #eef3f1; --tline: #d0e0da; --tink: var(--ink-2); --tstrong: #6b9688; }
  .status-tabs a:nth-child(4) { --tbg: #fdeeec; --tline: #f4c9c4; --tink: var(--bad); --tstrong: var(--bad); }
  .status-tabs a:nth-child(5) { --tbg: #fff6d2; --tline: #f1d97c; --tink: var(--leave-ink); --tstrong: #d9a400; }
  .status-tabs a:nth-child(6) { --tbg: #f7efe8; --tline: #e8d3c2; --tink: #7a4a1e; --tstrong: #a0561c; }
  /* the open one: white, ringed in its colour, lifted */
  .status-tabs .on, .soft .status-tabs .on {
    background: #fff; color: var(--ink); font-weight: 600;
    box-shadow: inset 0 0 0 2.5px var(--tstrong), 0 6px 14px -8px rgb(19 74 51 / .35);
  }
  .status-tabs .on .n { color: var(--tink); }
  /* nothing in it: the colour stays, quietly */
  .status-tabs .is-zero:not(.on), .soft .status-tabs .is-zero:not(.on) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tline); color: var(--mute); }
  .status-tabs .is-zero:not(.on) .n { color: var(--mute); font-weight: 500; }
  /* reading order: all, studying, nearly done / paused, owing, expired */
  .status-tabs a:nth-child(1) { order: 1; }
  .status-tabs a:nth-child(2) { order: 2; }
  .status-tabs a:nth-child(5) { order: 3; }
  .status-tabs a:nth-child(3) { order: 4; }
  .status-tabs a:nth-child(4) { order: 5; }
  .status-tabs a:nth-child(6) { order: 6; }

  /* the list: separate cards, no letter headings or letter strip */
  .panel:has(#student-table) { background: none; box-shadow: none; }
  #student-table, #student-table tbody { display: block; }
  #student-table tbody tr.abc, .abc-jump { display: none !important; }
  #student-table tbody tr[data-row] {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who course" "left left";
    align-items: start; gap: 10px 10px; margin-bottom: 8px; padding: 12px 14px; border: 0; border-radius: 18px;
    background: #fff; box-shadow: 0 1px 2px rgb(19 74 51 / .05), 0 8px 20px -14px rgb(19 74 51 / .25);
  }
  #student-table tbody tr[data-row][hidden] { display: none; }
  #student-table tbody tr[data-row] > td { padding: 0 !important; border: 0; }
  #student-table tbody tr[data-row] > td:first-child { grid-area: who; }
  #student-table tbody tr[data-row] > td:nth-child(3) { grid-area: course; justify-self: end; }
  #student-table tbody tr[data-row] > td.r { grid-area: left; text-align: left; }
  #student-table .who-cell { align-items: flex-start; gap: 10px; min-height: 0; }
  #student-table .who-cell .face { width: 38px; height: 38px; font-family: var(--display); font-weight: 500; font-size: 16px; }
  #student-table .who-cell > span { min-width: 0; }
  #student-table .who-cell strong { font-family: var(--display); font-weight: 500; font-size: var(--t-3); line-height: 1.3; }
  #student-table .who-cell small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #student-table .who-cell .status-m { display: none !important; }
  #student-table .who-cell .owe-chip { margin-top: 6px; }
  #student-table .routes { flex-direction: column; align-items: flex-end; gap: 4px; }
  #student-table .route-tag .rt-name, #student-table td.r > :not(.left-bar) { display: none !important; }
  #student-table .route-tag { gap: 4px; font-size: var(--t-1); }

  .left-bar { display: flex; align-items: center; gap: 10px; }
  .left-track { flex: 1; height: 6px; border-radius: 6px; background: var(--aqua-wash); overflow: hidden; }
  .left-track i { display: block; height: 100%; border-radius: inherit; background: var(--lime); }
  .left-bar.is-ending .left-track i, .left-bar.is-full .left-track i { background: #f2b800; }
  .left-bar.is-full .left-track { background: var(--leave-bg); }
  .left-bar.is-hold .left-track i { background: var(--stop-ring); }
  .left-text { flex: none; max-width: 70%; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .left-text b { font-family: var(--display); font-weight: 600; color: var(--ink); }
  .left-bar.is-ending .left-text b { color: var(--leave-ink); }
  .left-bar.is-full .left-text { color: var(--leave-ink); font-weight: 600; }
  .left-bar.is-expired .left-text, .left-bar.is-hold .left-text { color: var(--mute); }
}

/* ── classes on a phone (picked from the design canvas, variant B): the week, one day at a time ── */
.week-m { display: none; }
@media (max-width: 600px) {
  .week-m { display: grid; gap: 12px; margin-bottom: 20px; }
  .classes-table { display: none; }
  .week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .week-days label {
    display: flex; flex-direction: column; align-items: center; min-height: 52px; justify-content: center; padding: 4px 0;
    border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--ink-2); font-size: 12px; cursor: pointer;
  }
  .week-days label b { font-family: var(--display); font-weight: 500; font-size: var(--t-2); line-height: 1.3; color: var(--ink); }
  .week-days label.is-none { background: transparent; box-shadow: inset 0 0 0 1.5px #e6f2ee; color: var(--stop-ring); }
  .week-days label.is-none b { color: var(--mute); }
  .week-days label.is-today { box-shadow: inset 0 0 0 1.5px var(--pine); }
  .week-days input:checked + label { background: var(--pine); color: #d9f3ea; box-shadow: none; }
  .week-days input:checked + label b { color: #fff; }
  .week-days input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
  .week-list { display: none; }
  .week-m:has(#wd-1:checked) .week-list[data-week-day="1"] { display: block; }
  .week-m:has(#wd-2:checked) .week-list[data-week-day="2"] { display: block; }
  .week-m:has(#wd-3:checked) .week-list[data-week-day="3"] { display: block; }
  .week-m:has(#wd-4:checked) .week-list[data-week-day="4"] { display: block; }
  .week-m:has(#wd-5:checked) .week-list[data-week-day="5"] { display: block; }
  .week-m:has(#wd-6:checked) .week-list[data-week-day="6"] { display: block; }
  .week-m:has(#wd-7:checked) .week-list[data-week-day="7"] { display: block; }
  .week-list .panel-head { padding-bottom: 2px; }
  .week-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; margin: 0 14px; padding: 12px 2px; color: var(--ink); text-decoration: none; }
  .week-row + .week-row { border-top: 1px solid var(--rule); }
  .week-row:last-child { margin-bottom: 6px; }
  .week-time { font-family: var(--display); font-weight: 500; font-size: var(--t-3); line-height: 1.2; }
  .week-time small { display: block; font-family: "Plex Thai", system-ui, sans-serif; font-weight: 400; font-size: 12px; color: var(--mute); }
  .week-what { min-width: 0; }
  .week-what strong { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-2); line-height: 1.3; word-break: keep-all; }
  .week-what > span { display: block; margin-top: 2px; font-size: var(--t-1); color: var(--mute); }
  .week-what .route { display: inline-grid; vertical-align: 1px; margin-right: 6px; }
  .week-none { padding: 6px 16px 18px; font-size: var(--t-1); }
}

/* ── money in and out on a phone (picked from the design canvas, variant A + B's category colours and counts):
   the balance first, the two record buttons under it, then the month's rows grouped by day ── */
.month-step, .sum-acts, .pending-m, .ledger-foot, .cat-ico { display: none; }
.ledger-head .seg-tabs .n { margin-left: 2px; font-weight: 500; color: var(--mute); }
.ledger-head .seg-tabs .on .n { color: inherit; }
.ledger-sum .sum-net b.is-neg { color: var(--bad); }
.cat-ico { background: var(--aqua-wash); color: #0d7f73; }
.cat-ico.tone-in { background: #ecf8e2; color: var(--ok); }
.cat-ico.tone-aqua { background: var(--aqua-wash); color: #0d7f73; }
.cat-ico.tone-sun { background: #fff6d2; color: #7a5c00; }
.cat-ico.tone-clay { background: #f7efe8; color: #7a4a1e; }
.cat-ico.tone-slate { background: #eef3f1; color: var(--ink-2); }
@media (max-width: 600px) {
  /* the heading and the month stepper share a row; the record buttons live in the totals card */
  .page-head.fin-head:has(.month-step) { flex-wrap: nowrap; align-items: center; }
  .page-head.fin-head:has(.month-step) [data-fin-sub] { display: none; }
  .page-head.fin-head:has(.month-step) .actions { width: auto; }
  .page-head.fin-head:has(.month-step) .actions > .btn { display: none; }
  .month-step { display: flex; align-items: center; padding: 3px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--rule); }
  .page-head.fin-head .month-step .btn { flex: none; width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 11px; color: var(--pine); }
  .month-step .is-off { color: #b5cfc7; pointer-events: none; }
  .month-step b { padding: 0 2px; font-family: var(--display); font-weight: 500; font-size: 15px; white-space: nowrap; }
  .ledger-tools { display: none; }

  /* finance tabs: one white track, the open one filled */
  .soft .subnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0 0 14px; padding: 4px; border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--rule); }
  .soft .subnav a, .soft .subnav a.on { justify-content: center; min-height: 40px; margin: 0; padding: 0 2px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; font-size: 13px; text-align: center; color: var(--ink-2); }
  .soft .subnav a.on { background: var(--pine); color: #fff; font-weight: 600; }

  /* totals: the balance large, a bar of in against out, the two figures, the two buttons */
  .soft .ledger-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "net net" "bar bar" "in out" "acts acts"; gap: 14px 10px; margin-bottom: 12px; padding: 18px 18px 16px; overflow: visible; }
  .soft .ledger-sum .sum { padding: 0; border: 0; }
  .ledger-sum .sum-net { grid-area: net; }
  .ledger-sum .sum-in { grid-area: in; }
  .ledger-sum .sum-out { grid-area: out; }
  .soft .ledger-sum .sum-net span { font-size: 13.5px; }
  .soft .ledger-sum .sum-net b { font-size: 36px; font-weight: 600; line-height: 1.15; }
  .soft .ledger-sum .sum-in, .soft .ledger-sum .sum-out { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; row-gap: 0; align-items: center; }
  .ledger-sum .sum-in > span, .ledger-sum .sum-out > span { display: contents; font-size: 12.5px; }
  .soft .ledger-sum .sum span .ico { display: block; grid-row: 1 / 3; width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 11px; }
  .ledger-sum .sum-in .ico { background: #ecf8e2; color: var(--ok); }
  .ledger-sum .sum-out .ico { background: #fdeeec; color: var(--bad); }
  .soft .ledger-sum .sum-in b, .soft .ledger-sum .sum-out b { font-size: 18px; line-height: 1.3; }
  .soft .ledger-sum .sum-bar { display: block; grid-area: bar; position: relative; height: 10px; border-radius: 99px; overflow: hidden; background: #f4c9c4; }
  .soft .ledger-sum .sum-bar[hidden] { display: none; }
  .ledger-sum .sum-bar i { width: var(--in); background: var(--lime); }
  .sum-acts { grid-area: acts; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sum-acts .btn { width: 100%; min-height: 46px; }
  .ledger-sum .sum-note { display: none; }

  /* not income yet: its own yellow box */
  .pending-m { display: block; margin-bottom: 14px; padding: 8px 14px; border-radius: 18px; background: #fff6d2; box-shadow: inset 0 0 0 1.5px #f1d97c; }
  .pending-m h2, .soft .pending-m h2 { margin: 2px 0 0; font-family: "Plex Thai", system-ui, sans-serif; font-size: 13px; font-weight: 500; color: var(--leave-ink); }
  .pending-m a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; color: var(--ink); text-decoration: none; }
  .pending-m a + a { border-top: 1px solid #f1d97c; }
  .pending-m b { font-family: var(--display); font-weight: 500; }
  .pending-m small { font-size: 13px; color: var(--leave-ink); }
  .pending-m .ico { flex: none; color: var(--leave-ink); }

  /* the rows: a day line, then picture | what and how | amount; the whole row opens its menu */
  .soft .ledger-list .ledger-head { min-height: 0; padding: 14px 14px 4px; gap: 8px; }
  .ledger-list .ledger-head h2 { font-size: var(--t-3); }
  .ledger-list .ledger-head .seg-tabs { flex: none; }
  .ledger-list .ledger-head .seg-tabs button { min-height: 34px; padding: 0 9px; font-size: 13px; }
  .ledger-list .table-wrap { overflow: visible; }
  .ledger-list .ledger-table, .ledger-list .ledger-table tbody { display: block; }
  .ledger-list .ledger-table thead { display: none; }
  .ledger-list .ledger-table tbody tr { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "day day day" "ico title amt" "ico sub amt"; column-gap: 12px; align-items: center; position: relative; margin: 0 14px; padding: 8px 0; }
  .ledger-list .ledger-table tbody tr[hidden] { display: none; }
  .ledger-list .ledger-table tbody tr:last-child { margin-bottom: 6px; }
  .ledger-list .ledger-table tbody tr.day-first::before { content: attr(data-day); grid-area: day; padding: 4px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--mute); }
  .ledger-list .ledger-table tbody tr.day-first ~ tr.day-first { border-top: 1px solid var(--rule); padding-top: 12px; }
  .soft .ledger-list .ledger-table tbody td { display: block; padding: 0; border: 0; background: none; }
  .soft .ledger-list .ledger-table tbody td.c-title { display: contents; }
  .ledger-list .cat-ico { grid-area: ico; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; }
  .ledger-list .ledger-title { grid-area: title; min-width: 0; line-height: 1.35; }
  .ledger-list .c-title small { grid-area: sub; min-width: 0; font-size: 13px; }
  .ledger-list .m-date { display: none; }
  .soft .ledger-list .ledger-table tbody td.c-amt { grid-area: amt; }
  .ledger-list .c-amt .money { font-family: var(--display); font-weight: 500; font-size: 16px; }
  .soft .ledger-list .ledger-table tbody td:has(> .row-menu) { position: absolute; inset: 0; }
  .soft .ledger-list .ledger-table tbody td:last-child:not(:has(.row-menu)) { grid-column: 1 / -1; justify-self: end; }
  .ledger-list .row-menu { position: static; }
  .ledger-list .row-menu summary { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; margin: 0 -8px; border-radius: 14px; background: transparent; }
  .ledger-list .row-menu summary .ico { display: none; }
  .ledger-list .row-menu[open] summary { background: rgb(142 232 224 / .2); }
  .ledger-list .row-menu-pop { top: calc(100% - 4px); right: 0; }
  .ledger-list .row-menu.up .row-menu-pop { top: auto; bottom: calc(100% - 4px); }

  .ledger-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 4px 0; }
  .ledger-foot a, .ledger-foot button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; font-size: 14px; }
}