/* Kelrodis look (spec 014): the pilot demo's tokens and component values as they are. Phone first (390px),
   no framework. Only the brief's rules override the demo: text never below 15px (the demo's 12-14px sizes
   are 15px here), inputs 16px, tap targets at least 44px. */

/* --- Font: Inter (variable, latin + latin-ext for Lithuanian), self-hosted; licence in fonts/OFL.txt. --- */
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-latin-ext-wght-normal.1ad231aac0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens: one place for colour, radius and shadow (a brand colour setting can later override --brand*). --- */
:root {
  --bg: #f4f5f9; --surface: #ffffff; --ink: #14161f; --ink-2: #5d6275; --line: #e6e8ef;
  --brand: #2f8f7a; --brand-2: #1f6f5e; --brand-soft: #e3f3ef;
  --danger: #d1453b; --danger-soft: #fde9e7; --warn: #b7790b; --warn-soft: #fdf3df; --info: #4a63e0; --info-soft: #e8ecfd;
  /* Text shades (Danielius 2026-10-29: easier to read for older instructors): the demo's green, yellow and red
     one step darker wherever they carry text, so every text/background pair is >= 4.5:1. The demo shades above
     stay for fills that carry no text (brand mark, borders, focus rings, left bars). */
  --brand-ink: #2a7f6c; --danger-ink: #b42f26; --warn-ink: #7a5208;
  --radius: 14px; --radius-sm: 12px; --radius-xs: 10px;
  --shadow: 0 1px 2px rgba(20, 22, 31, .05), 0 4px 16px rgba(20, 22, 31, .06);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --tap: 44px;
}

/* --- Base: page background, type, headings. --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font: 15px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; overflow-wrap: anywhere; }
h1 { font-size: 22px; letter-spacing: -.01em; }
h2 { font-size: 19px; }
p { margin: 0; }
ul, ol { margin: 0; }
small { font-size: 15px; }
a { color: var(--brand-2); }
.muted { color: var(--ink-2); }
[hidden] { display: none !important; } /* components with their own display (buttons, rows) still hide */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Brand mark: rounded square with the school's first letter, next to the school name. --- */
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 36px; height: 36px; border-radius: var(--radius-xs); display: grid; place-items: center; flex: none; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand), #4fb39c); }
.brand-text { min-width: 0; font-weight: 700; font-size: 16px; line-height: 1.2; }
.brand-text > span, .brand-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-text small { font-weight: 400; color: var(--ink-2); }

/* --- Top bar (instructor, student): school on the left, "Atsijungti" on the right. --- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.logout { margin: 0; flex: none; }

/* --- Page content column: phone padding, centred; wider for the admin. --- */
.content { width: 100%; max-width: 40rem; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.narrow { width: 100%; max-width: 40rem; display: flex; flex-direction: column; gap: 16px; }

/* --- Admin shell: phone = top bar + scrolling pill tabs; desktop (>= 64rem) = the demo's left sidebar. --- */
.adm { min-height: 100vh; }
.adm-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand user" "links links"; align-items: center; gap: 8px 12px; padding: 8px 12px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.adm-nav .brand { grid-area: brand; }
.nav-user { grid-area: user; display: flex; align-items: center; gap: 10px; }
.nav-user-name { display: none; }
.adm-links { grid-area: links; display: flex; gap: 6px; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.nav-item { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 10px 14px; border-radius: 999px; white-space: nowrap; color: var(--ink-2); background: var(--bg); font-weight: 500; text-decoration: none; }
.nav-item:hover { color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-2); font-weight: 600; }
.adm-main { max-width: 72rem; }
@media (min-width: 64rem) {
  .adm { display: grid; grid-template-columns: 220px minmax(0, 1fr); background: linear-gradient(90deg, var(--surface) 219px, var(--line) 219px 220px, transparent 220px); }
  .adm-nav { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 18px 12px; border-bottom: 0; border-right: 1px solid var(--line); }
  .adm-nav .brand { padding: 4px 8px 20px; }
  .adm-nav .brand-text > span { white-space: normal; overflow-wrap: anywhere; }
  .adm-links { flex-direction: column; gap: 4px; overflow: visible; }
  .nav-item { border-radius: var(--radius-xs); padding: 10px 12px; background: transparent; }
  .nav-item:hover { background: var(--bg); color: var(--ink); }
  .nav-item[aria-current="page"] { background: var(--brand-soft); }
  .nav-user { margin-top: auto; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 6px 0; border-top: 1px solid var(--line); }
  .nav-user-name { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
  .nav-user .logout button { width: 100%; justify-content: flex-start; }
  .adm-main { margin: 0; padding: 24px 28px 40px; }
}

/* --- Page header: h1 + optional sub line on the left, the main action on the right. --- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.page-head h1::first-letter { text-transform: uppercase; }
.page-head > div { min-width: 0; }
.sub { margin: 2px 0 0; color: var(--ink-2); }
.eyebrow { display: block; color: var(--ink-2); }

/* --- Card: white surface, rounded, soft shadow. --- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card h2 { margin: 0; }

/* --- Buttons: primary (brand fill) by default; .secondary, .danger, .link; all at least 44px tall. --- */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 8px 14px; border: 1px solid var(--brand-ink); border-radius: var(--radius-xs); background: var(--brand-ink); color: #fff; font: inherit; font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 4px 14px rgba(47, 143, 122, .28); transition: background .15s, transform .1s; }
button:hover, .button:hover { background: var(--brand-2); }
button:active, .button:active { transform: scale(.98); }
button:focus-visible, .button:focus-visible, a:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; }
button.secondary, .button.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); font-weight: 500; box-shadow: none; }
button.secondary:hover, .button.secondary:hover { background: var(--bg); }
button.danger, .button.danger { background: var(--danger-ink); border-color: var(--danger-ink); color: #fff; box-shadow: none; }
button.danger:hover, .button.danger:hover { background: var(--danger-ink); filter: brightness(.9); }
button.link, a.link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; border: 0; background: transparent; color: var(--brand-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
button.link:hover, a.link:hover { background: transparent; color: var(--ink); }
a.link.danger { color: var(--danger-ink); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Phone: the form's actions stack full width, primary first. */
@media (max-width: 47.99rem) {
  .actions > button, .actions > .button { flex: 1 1 100%; padding: 13px; border-radius: var(--radius-sm); }
}

/* --- Form field: label, input, help, error; the live-validation states come from validate.js. --- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-weight: 600; }
.field label .muted { font-weight: 400; }
input:where(:not([type=hidden], [type=checkbox], [type=radio])), select, textarea {
  width: 100%; min-height: var(--tap); padding: 11px 14px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none;
}
select { padding-right: 10px; }
:where(input, select, textarea):focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
input:where([readonly]) { background: var(--bg); }
.help { display: block; color: var(--ink-2); }
.error { color: var(--danger-ink); font-weight: 500; }
.has-error input, .has-error select, .has-error textarea, [aria-invalid="true"] { border-color: var(--danger); }
.has-error input:focus, .has-error select:focus, [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--danger-soft); }
.field-static { margin: 0; }
/* Duplicate contract number: the field is a warning box until fixed or "Išsaugoti vis tiek". */
.field.is-warning.has-error { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--warn-soft); border-left: 4px solid var(--warn); }
.field.is-warning.has-error input { border-color: var(--warn); }
.field.is-warning.has-error .error { color: var(--warn-ink); font-weight: 600; }
/* Phone: the primary submit of a form is full width. */
@media (max-width: 47.99rem) {
  .stack > button[type=submit] { width: 100%; padding: 13px; border-radius: var(--radius-sm); }
}

/* --- Message / warning box: soft background + 4px left border by kind. --- */
.messages { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.messages li, .notice { padding: 10px 12px; border-radius: var(--radius-sm); border-left: 4px solid var(--info); background: var(--info-soft); color: var(--ink); overflow-wrap: anywhere; }
.messages .msg-success { border-left-color: var(--brand); background: var(--brand-soft); }
.messages .msg-warning, .notice.warning { border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn-ink); font-weight: 600; }
.messages .msg-error, .notice.error { border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger-ink); }
.notice ul { list-style: none; padding: 0; }

/* --- Status pill: the demo's .badge; colour by invite status (.b-done / .b-pending / .b-cancelled). --- */
.status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; background: var(--bg); color: var(--ink-2); }
.status-joined { background: var(--brand-soft); color: var(--brand-2); }
.status-invited { background: var(--warn-soft); color: var(--warn-ink); }
.status-expired { background: var(--danger-soft); color: var(--danger-ink); }
.status-none, .status-archived { background: var(--bg); color: var(--ink-2); }

/* --- Tag: the demo's neutral label (module names on the admin start page). --- */
.tag { display: inline-block; max-width: 100%; margin: 0 4px 4px 0; padding: 2px 8px; border-radius: 6px; background: var(--bg); color: var(--ink-2); font-size: 15px; }
.facts .tag { background: var(--surface); }

/* --- Search bar: the demo's search field + branch + "Ieškoti"; one line on desktop, wraps on a phone. --- */
.searchbar { display: flex; flex-wrap: wrap; gap: 8px; }
.searchbar input[type=search] { flex: 1 1 16rem; width: auto; min-width: 0; max-width: 420px; box-shadow: var(--shadow); }
.searchbar input[type=search]:focus { box-shadow: 0 0 0 4px var(--brand-soft); }
.searchbar select { flex: 0 1 14rem; width: auto; min-width: 0; }
.searchbar button { flex: 0 0 auto; }
@media (max-width: 47.99rem) {
  .searchbar input[type=search] { max-width: none; }
  .searchbar select { flex: 1 1 100%; }
  .searchbar button { flex: 1 1 100%; }
}
/* Links under the search ("Išvalyti paiešką", "Rodyti archyvuotus"). */
.list-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: -8px 0 0; }
.list-links:empty { display: none; }
.list-links a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* --- People list (table.people): one card with divided rows. Desktop = the demo's table; phone (< 48rem) =
   the demo's tight rows: bold name + phone and one muted line on the left, status on the right. --- */
.table-scroll { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
table.people { width: 100%; border-collapse: separate; border-spacing: 0; }
table.people th, table.people td { text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
table.people td.name a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; color: var(--ink); text-decoration: none; }
table.people td.name a:hover { color: var(--brand-2); text-decoration: underline; }
table.people td.name .sub-line { display: block; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 47.99rem) {
  table.people thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.people, table.people tbody { display: block; width: 100%; }
  table.people tr { position: relative; display: grid; column-gap: 0; align-items: center; padding: 10px 16px 11px; border-bottom: 1px solid var(--line); }
  table.people tbody tr:last-child { border-bottom: 0; }
  table.students tr { grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto; grid-template-areas: "name name status" "meta1 meta2 status"; }
  table.instructors tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name status" "meta1 status"; }
  table.people td { display: block; padding: 0; min-width: 0; }
  table.people td.name { grid-area: name; overflow-wrap: break-word; }
  table.people td.name a { align-items: flex-end; } /* 44px tall link, name sits on top of the phone line */
  table.people td.name a::after { content: ""; position: absolute; inset: 0; } /* the whole row opens the person */
  table.people .phone, table.students .col-branch, table.people .col-contract { display: none; }
  table.students .col-instructor, table.instructors .col-branch { grid-area: meta1; }
  table.students .col-package { grid-area: meta2; }
  table.students .col-instructor, table.students .col-package, table.instructors .col-branch { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.students .col-package::before { content: "\00a0· "; }
  table.people .col-status { grid-area: status; padding-left: 12px; text-align: right; }
  table.people .col-status .muted { display: block; }
}
@media (max-width: 24rem) { /* smallest phones: package on its own line rather than cut or squeezed */
  table.students tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name status" "meta1 status" "meta2 status"; }
  table.students .col-instructor, table.students .col-package { white-space: normal; }
  table.students .col-package::before { content: none; }
}
@media (min-width: 48rem) {
  /* On a narrow desktop a wide table scrolls inside its card, never the page. */
  table.people th, table.people td { overflow-wrap: break-word; }
  table.people th { padding: 11px 16px; color: var(--ink-2); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
  table.people td { padding: 11px 16px; border-bottom: 1px solid var(--line); }
  table.people td.name { padding-top: 0; }
  table.people td.name a { display: flex; align-items: flex-end; } /* 44px tap target, name sits on the phone line */
  table.people .phone { display: none; }
  table.people tbody tr:last-child td { border-bottom: 0; }
  table.people tbody tr:hover { background: var(--bg); }
}

/* --- Empty state: a card with muted, centred text. --- */
.empty { padding: 24px 16px; text-align: center; color: var(--ink-2); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }

/* --- Facts: the demo's details panel (label / value pairs on a soft background). --- */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; padding: 14px 16px; font-size: 15px; background: var(--bg); border-radius: var(--radius-sm); }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
/* Phone: label above value, so long values and tags get the full width. */
@media (max-width: 47.99rem) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts dd + dt { margin-top: 10px; }
}

/* --- Start-page tiles: two big cards linking to the lists. --- */
.tiles { list-style: none; padding: 0; width: 100%; max-width: 40rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px; }
.tile { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 88px; padding: 16px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); font-size: 18px; font-weight: 700; text-decoration: none; overflow-wrap: break-word; min-width: 0; }
.tile::after { content: "→"; color: var(--brand-ink); flex: none; }
.tile:hover { box-shadow: inset 0 0 0 2px var(--brand-soft), var(--shadow); color: var(--brand-2); }

/* --- Invite link box: brand-soft card; the copy row stays one line. --- */
.invite-box { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.copyrow { display: flex; gap: 8px; }
.copyrow input { flex: 1; min-width: 0; font-family: var(--mono); }
.copyrow button { flex: none; }

/* --- Confirm page (archive / erase): one card with the question, the person and the consequences. --- */
.confirm .person { font-size: 18px; }
.confirm ul { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* --- Danger zone on the person form: archive / restore / erase. --- */
.danger-zone { border-top: 4px solid var(--line); }

/* --- Auth and error pages (login, invite, 403/404/500): a centred card under the brand. --- */
.auth { width: 100%; max-width: 26rem; margin: 0 auto; padding: 16px 0; display: flex; flex-direction: column; gap: 16px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 700; font-size: 18px; }
.auth-brand .brand-mark { width: 48px; height: 48px; border-radius: var(--radius-sm); font-size: 22px; }
.auth .card { padding: 20px; gap: 16px; }
.auth .stack > button[type=submit], .auth .card > .button { width: 100%; }
.error-code { font-family: var(--mono); font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 48rem) { .auth { padding-top: 48px; } }
/* Spec 023 (R-18): the data notice (and its public copy) on the login page's card; the login page links it. */
.notice-list { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.auth-foot { text-align: center; }
.auth-logout button { width: 100%; }

/* --- Instructor phone shell + Kalendorius (spec 015 v2): the pilot demo's .ph / .ph-head / .ph-tabs / .legend /
   .day-chips / .frow / .switch / .sheet / .toast / .scard values as they are; text >= 15px and taps >= 44px win
   over the demo's smaller sizes. The real page is the phone: the shell fills the screen (a centred column on
   desktop) one screen tall, its body scrolls like the demo's phone; overlay, sheet and toast are fixed. --- */
.content.ph-page { max-width: 30rem; padding: 0; gap: 0; }
.ph { height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.ph-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ph-head h2 { font-size: 21px; letter-spacing: -.01em; }
.today-date { display: inline-block; margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--brand-2); background: var(--brand-soft); padding: 3px 10px; border-radius: 999px; }
.today-date::first-letter, .day-title::first-letter { text-transform: uppercase; }
.ph-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; }
.ph-body > * { flex-shrink: 0; }
.ph-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border-top: 1px solid var(--line); padding: 6px 6px 18px; }
.ph-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: var(--tap); padding: 6px 0; border-radius: 10px; font-size: 15px; color: var(--ink-2); text-decoration: none; }
.ph-tabs a span { font-size: 19px; }
.ph-tabs a.active { color: var(--brand-2); font-weight: 600; background: var(--brand-soft); }
.ph-alert { background: var(--warn-soft); color: var(--warn-ink); padding: 10px 12px; border-radius: 12px; font-size: 15px; font-weight: 600; }
.ph-list { display: flex; flex-direction: column; gap: 10px; }
.ph-embed { height: auto; width: 100%; max-width: 30rem; margin: 0 auto; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ph-embed .ph-body { overflow: visible; }
.cal { display: flex; flex-direction: column; gap: 12px; }

/* Demo buttons inside the shell (.btn): white, line border; .wide = full-width sheet buttons. */
.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); border: 1px solid var(--line); background: var(--surface); padding: 8px 14px; border-radius: 10px; font: inherit; font-weight: 500; font-size: 15px; text-decoration: none; color: var(--ink); box-shadow: none; transition: background .15s, transform .1s; }
.btn:hover, button.btn:hover { background: var(--bg); }
.btn.wide { width: 100%; padding: 13px; border-radius: 12px; }
.btn.btn-danger { color: var(--danger-ink); }
.btn.icon { flex: none; min-width: var(--tap); padding: 8px 11px; }

.legend { background: var(--surface); border-radius: 12px; padding: 10px 12px; font-size: 15px; line-height: 2; color: var(--ink-2); box-shadow: var(--shadow); }
.lg { display: inline-block; min-width: 72px; text-align: center; font-weight: 700; font-size: 15px; padding: 1px 8px; border-radius: 6px; margin-right: 4px; border: 1px solid var(--line); }
.lg.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-2); }
.lg.off { background: #eef0f4; color: var(--ink-2); }
.day-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.dchip { flex: none; width: 62px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; color: var(--ink); text-decoration: none; }
.dchip b { font-size: 18px; }
.dchip small { font-size: 15px; color: var(--ink-2); }
.dchip.on { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; } /* demo --brand is 3.9:1 on white text */
.dchip.on small { color: #fff; }
.day-title { font-size: 17px; margin: 4px 0 -2px; }

.frow-form { margin: 0; }
.frow { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 48px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 13px 14px; font: inherit; font-size: 15px; font-weight: 400; color: var(--ink); text-decoration: none; box-shadow: none; }
.frow b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.frow span { color: var(--ink-2); font-size: 15px; overflow-wrap: anywhere; } /* one line at 390px (demo 96px column); wraps on narrower phones, never cut with "…" */
.frow em { font-style: normal; font-weight: 600; font-size: 15px; color: var(--ink-2); }
.frow.on { background: var(--brand-soft); border-color: var(--brand); }
.frow.on em { color: var(--brand-2); }
.frow.off { background: #eef0f4; border-style: dashed; }
.frow.off b { color: var(--ink-2); font-weight: 500; }
.frow.off em { color: var(--brand-2); }
.frow.taken { background: var(--info-soft); border-color: transparent; }
.frow.past { opacity: .45; }
.frow .frow-note { display: block; } /* spec 018 feedback 1: the passed deadline ("penkt. 18:00") under the note */
button.frow, a.frow { cursor: pointer; }
button.frow:hover, a.frow:hover { background: inherit; filter: brightness(.98); }
button.frow:active, a.frow:active { transform: scale(.99); }

.set-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.set-row.repeat-row { align-items: flex-start; }
.repeat-row small { min-height: 3em; } /* two lines either way: switching the repeat never moves the page */
.set-row small { display: block; color: var(--ink-2); }
.card.pad.repeat-row { flex-direction: row; padding: 12px 14px; }
.set-row form { margin: 0; flex: none; }
/* The switch: the demo's 50x30 track, in a 44px-tall tap target. */
.switch, button.switch { position: relative; flex: none; width: 56px; min-height: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; }
.switch::before { content: ""; position: absolute; left: 3px; top: 7px; width: 50px; height: 30px; border-radius: 999px; background: #d5d8e0; transition: background .15s; }
.switch i { position: absolute; top: 10px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); transition: left .15s; }
.switch:hover { background: transparent; }
.switch.on::before { background: var(--brand); }
.switch.on i { left: 26px; }

.overlay { position: fixed; inset: 0; background: rgba(20, 22, 31, .35); z-index: 20; animation: fadein .15s; }
@keyframes fadein { from { opacity: 0; } }
.sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 30rem; z-index: 21; background: var(--surface); border-radius: 22px 22px 0 0; padding: 10px 18px 26px; max-height: 88%; overflow: auto; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 -20px 50px rgba(20, 22, 31, .2); animation: sheetup .22s ease; }
@keyframes sheetup { from { transform: translate(-50%, 40px); opacity: 0; } }
.sheet form { margin: 0; }
.sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 6px; }
.sheet h3 { font-size: 18px; }
.sheet .sub { font-size: 15px; }

/* Toast: the demo's dark pill above the tabs; fades out by itself (no JS). */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 40; width: max-content; max-width: calc(100% - 32px); background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 14px; font-size: 15px; box-shadow: 0 16px 40px rgba(20, 22, 31, .3); animation: up .25s ease, toast-out .4s ease 3.2s forwards; }
.toast-error { background: var(--danger-ink); }
@keyframes up { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }


.scard { display: flex; gap: 12px; align-items: center; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
.scard > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.scard small { color: var(--ink-2); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: linear-gradient(135deg, #5b5fc7, #8b8fe6); color: #fff; font-size: 15px; font-weight: 600; }

@media (max-width: 47.99rem) {
  table.instructors tr { grid-template-areas: "name status" "meta1 status" "cal cal"; }
  table.instructors .col-cal { grid-area: cal; position: relative; z-index: 1; }
}

/* --- Student phone (spec 016): the pilot demo's .ph.stu / .progress-card / .ring / .ucard / .slots / .slot / .hcard /
   .badge / .details values as they are; text >= 15px, taps >= 44px and >= 4.5:1 contrast win over the demo's sizes
   and shades. Same shell as the instructor's (.ph, .ph-head, .ph-body, .ph-tabs, .sheet, .toast). --- */
:root { --info-ink: #3b50c4; }
.ph-head small { display: block; color: var(--ink-2); }
.ph-head h1 { font-size: 21px; letter-spacing: -.01em; } /* the student's greeting: the page's heading, the demo's h2 size */
.ph-head-end { display: flex; align-items: center; gap: 10px; flex: none; }
.stu-main, .stu-book { display: flex; flex-direction: column; gap: 12px; }
.stu-main > * { flex-shrink: 0; }
.btn.btn-primary, button.btn.btn-primary { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; font-weight: 600; }
.btn.btn-primary:hover, button.btn.btn-primary:hover { background: var(--brand-2); }
.btn[disabled], button.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn.small-btn { padding: 5px 12px; flex: none; }

.pad { padding: 16px; }
.card.progress-card { flex-direction: row; align-items: center; gap: 16px; }
.progress-card > div { min-width: 0; }
.progress-card b { font-size: 17px; }
.ring { width: 100px; height: 100px; flex: none; }
.ring circle { fill: none; stroke-width: 9; }
.ring-bg { stroke: var(--brand-soft); }
.ring-fg { stroke: var(--brand); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray .5s ease; }
.ring-n { font-size: 26px; font-weight: 700; fill: var(--ink); }
.ring-t { font-size: 15px; fill: var(--ink-2); }

.ph-h { margin: 4px 0 0; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); display: flex; justify-content: space-between; }
.ph-h small { font-weight: 600; }
.ucard { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
.ucard > div { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ucard small { color: var(--ink-2); }
.ucard small.warn-t { color: var(--warn-ink); font-weight: 600; }  /* demo .warn-t (darker ink: contrast) */

.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slots .muted { grid-column: 1 / -1; }
.slot, button.slot { display: flex; align-items: center; justify-content: center; min-height: var(--tap); border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 12px 0; font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; box-shadow: none; }
.slot.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-2); }
a.slot:hover { background: var(--bg); }
a.slot.on:hover { background: var(--brand-soft); }
.slot[disabled], button.slot[disabled] { opacity: .35; cursor: not-allowed; }

.hcard { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
.hc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge { font-size: 15px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.b-pending { background: var(--warn-soft); color: var(--warn-ink); }

.details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; background: var(--bg); border-radius: 12px; padding: 14px 16px; font-size: 15px; }
.details dt { color: var(--ink-2); }
.details dd { margin: 0; overflow-wrap: anywhere; }
.details.compact { padding: 12px; }

/* Kalendorius lesson row (demo .frow.taken / .lg.taken) — the student's name + "Pamoka". */
.frow.taken em { color: var(--info-ink); }
.lg.taken { background: var(--info-soft); border-color: transparent; color: var(--info-ink); }

/* Admin Nustatymai (demo adminSettings): .set-card with .set-row lines and the − / + stepper. */
.card.set-card { padding: 4px 18px; max-width: 640px; gap: 0; }
.set-card .set-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.set-card .set-row:last-child { border-bottom: 0; }
.set-card .set-row > div:first-child { min-width: 0; }
.stepper { display: flex; align-items: center; gap: 8px; flex: none; }
.stepper form { margin: 0; }
.stepper span { min-width: 64px; text-align: center; font-weight: 700; font-size: 17px; }
.stepper .btn { width: var(--tap); height: var(--tap); padding: 0; font-size: 18px; }

/* --- Instructor Šiandien + lesson / cancel / book sheets (spec 017): the pilot demo's .lcard / .lc-time / .lc-main /
   .lc-actions / .big-btn / .lc-status / .badge b-* / .frow.pick / .details.compact values as they are; text >= 15px,
   taps >= 44px and >= 4.5:1 contrast win (no faded cards: the demo's opacity on marked cards drops the contrast). */
.today { display: flex; flex-direction: column; gap: 12px; }
.today > * { flex-shrink: 0; }
.lcard { display: flex; gap: 12px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; border-left: 4px solid var(--info); }
.lcard.s-pending { border-left-color: var(--warn); }
.lcard.s-done { border-left-color: var(--brand); }
.lcard.s-no_show { border-left-color: #9aa0b1; }
.lc-time { display: flex; flex-direction: column; min-width: 50px; font-variant-numeric: tabular-nums; }
.lc-time b { font-size: 17px; }
.lc-time small { color: var(--ink-2); }
.lc-time small.warn-t { color: var(--warn-ink); font-weight: 600; }
.lc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow-wrap: anywhere; }
.lc-main small { color: var(--ink-2); }
.lc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lc-actions form { display: contents; }
.lc-actions .btn { padding: 9px 10px; }
.lc-actions .btn-primary { flex: 1; }
.btn.big-btn { padding: 13px 10px; font-size: 15px; flex: 1; }
.lc-status { display: flex; margin-top: 8px; } /* same height as .lc-actions' top: a mark swaps buttons for the badge in place */
.b-booked { background: var(--info-soft); color: var(--info-ink); }
.b-done { background: var(--brand-soft); color: var(--brand-2); }
.b-no_show { background: #eef0f4; color: var(--ink-2); }
.b-cancelled, .b-cancelled_used, .b-late_cancel { background: var(--danger-soft); color: var(--danger-ink); }
.sheet > .badge { align-self: flex-start; }
.frow.pick { grid-template-columns: 1fr auto 20px; }
.frow.pick b { white-space: normal; overflow-wrap: anywhere; }
.frow.pick em { color: var(--brand-2); text-align: center; }
.frow.pick.off { cursor: not-allowed; }
.frow.pick.off b { color: var(--ink-2); }
.pick-why { grid-column: 1 / -1; color: var(--ink-2); font-size: 15px; }
.frow.pick.on, a.frow.pick.on:hover { background: var(--brand-soft); }

/* --- Admin Mokiniai + student panel (spec 019): the pilot demo's .card.table / .tr / .th / .click / .meter / .panel /
   .panel-head / .details / .panel-actions / .ph-alert / .plist / .pl-row / .badge b-done / .link-btn, values as they
   are; text >= 15px, taps >= 44px and >= 4.5:1 contrast win (the demo's 12px header and badge text, its --warn). --- */
.mono { font-variant-numeric: tabular-nums; }
.warn-t { color: var(--warn-ink); }
.card.table { padding: 0; gap: 0; }
.tr { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr .9fr 1fr; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.tr > * { min-width: 0; overflow-wrap: anywhere; }
.tr:last-child { border-bottom: 0; }
.tr small { display: block; color: var(--ink-2); }
.tr.th { color: var(--ink-2); font-size: 15px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.tr.click { cursor: pointer; }
.tr.click:hover { background: var(--bg); }
.tr-name a { display: flex; flex-direction: column; justify-content: center; min-height: var(--tap); color: var(--ink); text-decoration: none; }
.tr-name a b { font-weight: 700; }
.tr-name a:hover b { color: var(--brand-2); text-decoration: underline; }
.tr-name .status { padding: 0 8px; margin-left: 4px; }
.tr-left.warn-t small { color: var(--warn-ink); }
.tr-act form { margin: 0; }
.meter { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--brand-soft); overflow: hidden; margin-top: 4px; max-width: 160px; }
.meter-fg { fill: var(--brand); } /* an SVG bar: its width is an attribute (templates carry no inline style) */
@media (max-width: 47.99rem) {
  .tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tr > :nth-child(2), .tr > :nth-child(4) { display: none; }
}

.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 21; background: var(--surface); padding: 22px; overflow: auto; box-shadow: -20px 0 50px rgba(20, 22, 31, .2); animation: slidein .2s ease; }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.panel-head > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.panel-head h2 { font-size: 19px; }
.panel-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); border: 0; background: transparent; font-size: 18px; padding: 4px 8px; border-radius: 8px; color: var(--ink-2); text-decoration: none; }
.icon-btn:hover { background: var(--bg); color: var(--ink); }
.details dd small { display: block; color: var(--ink-2); }
.details dd form { display: inline; margin: 0; }
.link-btn, button.link-btn { display: inline-flex; align-items: center; min-height: var(--tap); border: 0; background: transparent; box-shadow: none; color: var(--brand-2); font: inherit; font-weight: 600; text-decoration: underline; padding: 0 0 0 6px; min-width: var(--tap); justify-content: center; cursor: pointer; margin: -11px 0; vertical-align: middle; }
.details dd > .link-btn:first-child, .details dd form .link-btn { padding-left: 0; }
.link-btn:hover, button.link-btn:hover { background: transparent; color: var(--ink); }
.panel-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.panel-actions form { margin: 0; }
.panel-actions .btn { white-space: normal; text-align: left; }
.panel .ph-alert { margin-top: 16px; }
.panel .lbl { margin-top: 18px; margin-bottom: 8px; }
.lbl { font-size: 15px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.plist { display: flex; flex-direction: column; gap: 6px; }
.pl-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--bg); border-radius: 10px; padding: 8px 12px; font-size: 15px; }
.pl-when { min-width: 0; display: flex; flex-wrap: wrap; column-gap: 8px; }
.pl-when small { color: var(--ink-2); } /* R-22: who taught it (the demo's row has no instructor) */
.progress-card .extras-line { font-weight: 600; color: var(--brand-2); }
.progress-card .badge, .scard .badge { align-self: flex-start; margin-top: 6px; }

/* --- Admin Kalendorius + lesson panel (spec 020): the pilot demo's .toolbar / .date-nav / .date-label / .cal-sum /
   .agenda-m / .am-ins / .am-row / .grid-wrap / .tgrid / .tg-* / .blk / .now-line values as they are (--c = the
   instructor's colour); text >= 15px, taps >= 44px and >= 4.5:1 contrast win (no faded blocks, text wraps instead of
   "…"). Phone (< 48rem): the agenda instead of the grid. --- */
.admin-cal { display: flex; flex-direction: column; gap: 16px; }
.cal-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cal-filter select { width: auto; max-width: 100%; min-height: var(--tap); padding: 8px 10px; font-size: 16px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.date-nav { display: flex; align-items: center; gap: 6px; }
.date-nav .btn { min-width: var(--tap); }
.date-label { width: 220px; display: flex; flex-direction: column; align-items: center; line-height: 1.25; text-align: center; } /* fixed width: arrows never move */
.date-label small { color: var(--ink-2); }
.invisible { visibility: hidden; }
.cal-sum { margin: 0; }
.cal-sum .warn-t { font-weight: 700; }

.grid-wrap { overflow: auto; padding: 0; gap: 0; }
.tgrid { display: grid; grid-template-columns: 56px var(--days); position: relative; }
.tg-corner, .tg-head { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); height: 48px; }
.tg-head { display: flex; align-items: center; gap: 8px; padding: 0 10px; line-height: 1.2; }
.tg-head > span { min-width: 0; }
.tg-head small { display: block; color: var(--ink-2); overflow-wrap: anywhere; }
.tg-head.today b { color: var(--brand-2); }
.tg-times { position: relative; grid-row: 2; }
.tg-times span { position: absolute; right: 8px; color: var(--ink-2); transform: translateY(-50%); }
.tg-times span:first-child { transform: none; }
.tg-col { position: relative; grid-row: 2; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 52px); }
.blk { position: absolute; margin-top: 2px; border: 0; border-left: 4px solid var(--c); border-radius: 9px; background: color-mix(in srgb, var(--c) 13%, white); text-align: left; padding: 4px 8px; display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.blk:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20, 22, 31, .12); z-index: 2; }
.blk b, .blk span { overflow-wrap: anywhere; min-width: 0; }
.blk span { color: var(--ink-2); }
/* side by side (2+ at once): name + start time, words wrap whole, no status line (the stripes / panel show it) */
.blk.side { padding: 3px 5px; }
.blk.side b, .blk.side span { overflow-wrap: break-word; }
.blk.s-pending { background: repeating-linear-gradient(45deg, var(--warn-soft) 0 6px, #fff 6px 12px); border-left-color: var(--warn); }
.blk.s-no_show, .blk.s-cancelled_used, .blk.s-late_cancel { background: repeating-linear-gradient(45deg, var(--danger-soft) 0 6px, #fff 6px 12px); border-left-color: var(--danger); }
.blk.s-done { background: color-mix(in srgb, var(--c) 7%, white); }
.blk.s-returned { background: var(--bg); }
.blk.free { border: 1px dashed var(--line); background: transparent; color: var(--ink-2); justify-content: center; align-items: center; text-align: center; }
.blk.free:hover { background: var(--brand-soft); color: var(--brand-2); }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; pointer-events: none; }

.agenda-m { display: none; flex-direction: column; gap: 10px; }
.am-ins { padding: 12px 14px; gap: 0; }
.am-ins h4 { margin: 0 0 4px; font-size: 15px; }
.am-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); border-top: 1px solid var(--line); border-left: 4px solid var(--c, transparent); padding: 9px 0 9px 10px; text-align: left; color: var(--ink); text-decoration: none; }
.am-row:hover { background: var(--bg); }
.am-row b { font-variant-numeric: tabular-nums; min-width: 44px; }
.am-row span:not(.badge) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.am-row.free { color: var(--ink-2); border-left-style: dashed; }
.am-row .badge { padding: 2px 8px; }
@media (max-width: 47.99rem) {
  .grid-wrap { display: none; } /* time grid -> agenda list on narrow screens */
  .agenda-m { display: flex; }
  .date-nav { width: 100%; justify-content: space-between; }
  .date-label { flex: 1; width: auto; }
}

.b-returned { background: var(--bg); color: var(--ink-2); }
.panel-name { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); text-decoration: none; }
.panel-name:hover { color: var(--brand-2); text-decoration: underline; }
.panel .panel-note { margin-top: 14px; }
.btn.mark-btn.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-2); font-weight: 600; }

/* --- "💬 Pastaba" (spec 023, slice 9): the pilot demo's .note-fab (text >= 15px and a 44px tap win over its 12px
   chip). Phone: bottom-right of the shell, just above the tab bar; the shell's body keeps a free strip at its end so
   the chip never lies over a button or the last row (e2e/ux.py `covered`). The sheet is the shell's .sheet
   (a dialog on desktop, 3b); the admin's is the side .panel (demo adminNote), opened from the sidebar item. --- */
.note-dock { position: relative; height: 0; flex: none; } /* at the tab bar's top edge, whatever its height */
.note-fab { position: absolute; right: 12px; bottom: 10px; z-index: 15; min-height: var(--tap); white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 8px 14px; font-size: 15px; font-weight: 600; box-shadow: var(--shadow); }
.note-fab:hover { background: var(--bg); color: var(--ink); }
.ph.has-note .ph-body { padding-bottom: 76px; }
.note .sheet .field, .note .panel .field { margin: 4px 0; }
.note textarea { resize: vertical; min-height: 6.5em; }
.note .panel .sub { display: block; }
button.nav-item { border: 0; box-shadow: none; font: inherit; font-weight: 500; cursor: pointer; }
button.nav-item:hover { background: var(--bg); color: var(--ink); }
button.icon-btn { box-shadow: none; }
button.icon-btn:hover { background: var(--bg); color: var(--ink); }
@media (min-width: 48rem) {
  /* desktop (3b column): the chip at the column's bottom-right corner, the window scrolls past it */
  .ph-page .note-fab { position: fixed; right: max(16px, calc((100vw - 44rem) / 2 + 16px)); bottom: 24px; }
  .ph-page .ph.has-note .ph-body { padding-bottom: 96px; }
}

/* Desktop (spec 022, slice 3b): the same instructor / student screens, laid out for a computer — a centred
   ~44rem column 24px from the top, the window scrolls (no inner .ph-body scroll), header + tabs one card on
   top (tabs horizontal, icon and label on one line), sheets as centred dialogs, headings a step bigger.
   Phone (< 48rem) is the reference and is untouched. Scoped to .ph-page (the instructor / student shell) so
   admin pages that reuse .ph-body, .sheet and .toast stay as they are; last in the file so it wins. */
@media (min-width: 48rem) {
  .content.ph-page { max-width: 44rem; padding: 24px 16px; }
  .ph-page .ph { height: auto; min-height: 0; }
  .ph-page .ph-head { order: 0; border: 1px solid var(--line); border-radius: 16px 16px 0 0; padding: 20px 24px; }
  .ph-page .ph-head h1, .ph-page .ph-head h2 { font-size: 24px; }
  .ph-page .ph-tabs { order: 1; display: flex; gap: 6px; justify-content: flex-start; padding: 8px 18px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: var(--shadow); }
  .ph-page .ph-tabs a { flex-direction: row; gap: 8px; padding: 8px 16px; }
  .ph-page .ph-tabs a span { font-size: 17px; }
  .ph-page .ph-body { order: 2; overflow: visible; padding: 20px 0 40px; gap: 14px; }
  .ph-page .sheet { top: 50%; bottom: auto; transform: translate(-50%, -50%); border-radius: 22px; max-width: 30rem; max-height: 88vh; padding: 20px 22px 22px; box-shadow: 0 20px 50px rgba(20, 22, 31, .25); animation-name: dialogin; }
  .ph-page .sheet-grip { display: none; }
  .ph-page .toast { bottom: 32px; }
}
@keyframes dialogin { from { transform: translate(-50%, calc(-50% + 24px)); opacity: 0; } }