/* Native: day sky, white clouds and glass (spec 8.0, docs/mockups/*-glass.html),
   and the night sky of the dark theme.
   No black anywhere: text is soft navy. Backgrounds are flat, no gradients.
   Motion is transform/opacity (filter only for the glass materialize).
   Every colour comes from the variables on :root, so the dark theme only
   redefines them: with the system setting (unless data-theme="light") and
   with data-theme="dark" from the native_theme cookie. */

:root {
  color-scheme: light;
  --text: #22324A;
  --muted: #4A5A70;
  --accent: #0066CC;
  --accent-hover: #0058B0;
  --link: #0058B0;
  --sky: #CFE4F6;
  --on-accent: #FFFFFF; /* text on accent buttons */
  --surface: #FFFFFF; /* solid fields, pills, outline buttons */
  --surface-solid: #FFFFFF; /* glass under prefers-reduced-transparency */
  --capsule: #FFFFFF; /* active menu item and pressed switch button */
  --active-text: #0058B0;
  --active-tint: rgba(0, 102, 204, .10); /* active item on solid panels */
  --capsule-shadow: 0 1px 2px rgba(34, 50, 74, .08);
  --scrim: rgba(22, 36, 59, .40); /* behind a modal dialog */
  --glass: rgba(255, 255, 255, .62);
  --glass-edge: rgba(255, 255, 255, .75);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 16px 40px rgba(30, 60, 90, .12);
  --top-shadow: 0 8px 24px rgba(30, 60, 90, .10);
  --line: rgba(34, 50, 74, .08);
  --field-edge: #8A96A8; /* 3:1 against white for input borders */
  --seg-edge: #6B7A90; /* switch edge: 3.3:1 on the sky, 4:1 on glass */
  --hover: rgba(255, 255, 255, .7);
  --thumb: rgba(34, 50, 74, .22);
  --thumb-hover: rgba(34, 50, 74, .4);
  --error: #B42318;
  --success: #1A6B3A; /* 6.6:1 on white, 5.0:1 on the sky */
  --error-bg: #FDECEA;
  --viewas-bg: #7A2E0E;
  --viewas-text: #FFFFFF;
  --cloud: #FFFFFF;
  --cloud-far: .5;
  --cloud-mid: .7;
  --cloud-near: .9;
  --star: #E6EDF7;
  --stars: 0; /* stars show only at night */
  --mark-day: block; /* the brand icon: sun by day, moon at night */
  --mark-night: none;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", system-ui, sans-serif;
}

/* Night sky (spec 8.0): the same scene in deep navy, never black. Every
   text pair is 4.5:1 or more (numbers in the task 5 report). Keep the two
   copies below identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --text: #E6EDF7;
    --muted: #A9B6C8;
    --accent: #4DA3FF;
    --accent-hover: #7AB8FF;
    --link: #7AB8FF;
    --sky: #0F1B2D;
    --on-accent: #0F1B2D;
    --surface: #1B2C46;
    --surface-solid: #16243B;
    --capsule: rgba(230, 237, 247, .12);
    --active-text: #8CC4FF;
    --active-tint: rgba(77, 163, 255, .18);
    --capsule-shadow: none;
    --scrim: rgba(0, 0, 0, .55);
    --glass: rgba(28, 44, 70, .55);
    --glass-edge: rgba(255, 255, 255, .12);
    --glass-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 16px 40px rgba(6, 12, 24, .35);
    --top-shadow: 0 8px 24px rgba(6, 12, 24, .3);
    --line: rgba(230, 237, 247, .1);
    --field-edge: #6E809A; /* 3:1 against the dark fields */
    --seg-edge: #6E809A; /* 4.3:1 on the night sky, 3.9:1 on glass */
    --hover: rgba(230, 237, 247, .08);
    --thumb: rgba(230, 237, 247, .22);
    --thumb-hover: rgba(230, 237, 247, .4);
    --error: #FF9B8F;
    --success: #6FD59A; /* 7.8:1 on the dark surface */
    --error-bg: #3D2028;
    --cloud: #8EA2BF;
    --cloud-far: .12;
    --cloud-mid: .18;
    --cloud-near: .25;
    --stars: .9;
    --mark-day: none;
    --mark-night: block;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --text: #E6EDF7;
  --muted: #A9B6C8;
  --accent: #4DA3FF;
  --accent-hover: #7AB8FF;
  --link: #7AB8FF;
  --sky: #0F1B2D;
  --on-accent: #0F1B2D;
  --surface: #1B2C46;
  --surface-solid: #16243B;
  --capsule: rgba(230, 237, 247, .12);
  --active-text: #8CC4FF;
  --active-tint: rgba(77, 163, 255, .18);
  --capsule-shadow: none;
  --scrim: rgba(0, 0, 0, .55);
  --glass: rgba(28, 44, 70, .55);
  --glass-edge: rgba(255, 255, 255, .12);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 16px 40px rgba(6, 12, 24, .35);
  --top-shadow: 0 8px 24px rgba(6, 12, 24, .3);
  --line: rgba(230, 237, 247, .1);
  --field-edge: #6E809A; /* 3:1 against the dark fields */
  --seg-edge: #6E809A; /* 4.3:1 on the night sky, 3.9:1 on glass */
  --hover: rgba(230, 237, 247, .08);
  --thumb: rgba(230, 237, 247, .22);
  --thumb-hover: rgba(230, 237, 247, .4);
  --error: #FF9B8F;
  --success: #6FD59A; /* 7.8:1 on the dark surface */
  --error-bg: #3D2028;
  --cloud: #8EA2BF;
  --cloud-far: .12;
  --cloud-mid: .18;
  --cloud-near: .25;
  --stars: .9;
  --mark-day: none;
  --mark-night: block;
}

* { box-sizing: border-box; }

html { background: var(--sky); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--sky);
  color: var(--text);
  font: 16px/24px var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 16px; }
h2 { font-size: 18px; line-height: 28px; font-weight: 700; margin: 24px 0 8px; }
p { text-wrap: pretty; }
a { color: var(--link); }

/* Soft scrollbars: transparent track, thin translucent navy thumb, no arrows. */
html, * { scrollbar-width: thin; scrollbar-color: var(--thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--thumb); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--thumb-hover); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.skip {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 10;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--link);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ---------- Sky and clouds ---------- */

.sky { background: var(--sky); }

.clouds { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.cloud {
  position: absolute;
  left: -360px;
  border-radius: 999px;
  background: var(--cloud);
  will-change: transform;
  animation: drift 110s linear infinite;
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: var(--cloud); border-radius: 999px; }
.cloud::before { width: 55%; height: 170%; left: 14%; bottom: 28%; }
.cloud::after { width: 38%; height: 130%; right: 12%; bottom: 22%; }

/* Depth: far clouds are small, blurred and slow; near ones big, sharp, faster. */
.cloud.far { width: 140px; height: 30px; opacity: var(--cloud-far); filter: blur(3px); animation-duration: 150s; }
.cloud.mid { width: 220px; height: 46px; opacity: var(--cloud-mid); filter: blur(1px); animation-duration: 110s; }
.cloud.near { width: 300px; height: 64px; opacity: var(--cloud-near); animation-duration: 80s; }

.cloud:nth-child(1) { top: 8%; animation-delay: -40s; --rest: calc(18vw + 360px); }
.cloud:nth-child(2) { top: 34%; animation-delay: -70s; --rest: calc(62vw + 360px); }
.cloud:nth-child(3) { top: 58%; animation-delay: -110s; --rest: calc(84vw + 360px); }
.cloud:nth-child(4) { top: 80%; animation-delay: -30s; --rest: calc(40vw + 360px); }
.cloud:nth-child(5) { top: 18%; animation-delay: -95s; --rest: calc(6vw + 360px); }

/* Inside cabinets the sky is calmer: every pass takes two minutes or more. */
.cabinet .cloud.far { animation-duration: 240s; }
.cabinet .cloud.mid { animation-duration: 180s; }
.cabinet .cloud.near { animation-duration: 140s; }

/* Stars: a few small dots drawn as shadows of two pseudo-elements, visible
   only when --stars is above 0 (night). The second group twinkles slowly. */
.clouds::before, .clouds::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  opacity: var(--stars);
}
.clouds::before {
  box-shadow: 12vw 9vh var(--star), 31vw 24vh var(--star), 54vw 6vh var(--star), 77vw 17vh var(--star), 91vw 41vh var(--star);
}
.clouds::after {
  box-shadow: 22vw 47vh var(--star), 66vw 33vh var(--star), 43vw 71vh 0 .5px var(--star);
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: var(--stars); } to { opacity: calc(var(--stars) * .35); } }

@keyframes drift { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 720px)); } }

/* ---------- Glass ---------- */

.glass, .side, .block, .guest-card, .guest-top, .m-top::before, .tabbar {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}

/* Glass materializes once when the page opens: blur, scale and opacity together. */
/* Fill backwards: the start frame covers the delay, and once it ends the
   block keeps no filter (a leftover filter costs paint and breaks the
   backdrop blur in some browsers). */
.guest-card, .block { animation: materialize 600ms var(--ease) backwards; }
.block:nth-child(2) { animation-delay: 50ms; }
.block:nth-child(3) { animation-delay: 100ms; }
.block:nth-child(4) { animation-delay: 150ms; }
@keyframes materialize {
  from { opacity: 0; transform: translateY(8px) scale(0.99); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Controls ---------- */

label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--muted); }

input, select, textarea, .input {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--field-edge);
  border-radius: 10px;
  padding: 8px 12px;
  min-height: 40px;
  font-size: 15px;
  width: 100%;
}
select { width: auto; padding: 0 12px; cursor: pointer; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
/* With a mouse, browsers that can (Chromium 135+) draw the open list of a
   select themselves, in the look of the fields; fingers keep the system
   picker, which already fits the phone. */
@supports (appearance: base-select) {
  @media (hover: hover) and (pointer: fine) {
    select:not([multiple]), select:not([multiple])::picker(select) { appearance: base-select; }
    select:not([multiple]) { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; }
    select::picker-icon { content: ""; width: 7px; height: 7px; margin: 0 2px 4px 4px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; rotate: 45deg; transition: rotate 160ms var(--ease), margin 160ms var(--ease); }
    select:open::picker-icon { rotate: 225deg; margin-bottom: -4px; }
    select::picker(select) { margin-top: 4px; padding: 4px; border: 1px solid var(--field-edge); border-radius: 12px; background: var(--surface-solid); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
    select option { min-height: 36px; padding: 8px 12px; border-radius: 8px; font-size: 15px; }
    select option::checkmark { display: none; }
    select option:hover, select option:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); outline: none; }
    select option:checked { color: var(--accent); font-weight: 600; }
    select option:disabled { color: var(--muted); }
    select option[value=""]:disabled { display: none; }
  }
}
::placeholder { color: var(--muted); opacity: 1; }

button { font: inherit; min-height: 40px; border-radius: 10px; cursor: pointer; color: var(--text); }
button, a.button, .att-up, .side a, .tabbar a { transition: transform 160ms var(--ease), background-color 120ms ease, border-color 120ms ease; }
button:active:not(:disabled), a.button:active, .att-up:active, .side a:active, .tabbar a:active { transform: scale(0.97); }
button:disabled { opacity: .45; cursor: default; }

/* Buttons in the manner of Space: compact, 10px corners; an ordinary one
   has a thin edge on the surface, the main one is filled with the accent.
   :where keeps them weaker than the special buttons (.seg, .icon-btn…). */
:where(button:not([class]), button.bt-add, button.bt-del, button.b-del, button.cal-danger, button.room-pencil, button.room-mat-open, button.room-end, button.room-mat-pick, button.board-btn, button.room-view, .board-file, button.att-rm, button.sv-again, a.button, .att-up, .md-dlg-file) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--field-edge);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}
/* Elements and labels outweigh :where: the button look is set again. */
a.button, label.att-up { color: var(--text); font-size: 15px; font-weight: 600; line-height: 20px; }
[data-js-hide][hidden], .has-js [data-js-hide] { display: none; }
.stack .btn-primary { margin-top: 8px; }
.stack > .btn-primary, .stack > button { align-self: flex-start; }


.welcome-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.welcome-actions a.button { display: inline-flex; width: auto; }

button.link {
  min-height: 0;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-hover); }
  :where(button:not([class]), button.bt-add, button.bt-del, button.b-del, button.cal-danger, button.room-pencil, button.room-mat-open, button.room-end, button.room-mat-pick, button.board-btn, button.room-view, .board-file, button.att-rm, button.sv-again, a.button, .att-up, .md-dlg-file):hover:not(:disabled) { background: var(--hover-solid, var(--hover)); border-color: var(--muted); }
  .side a:hover { background: var(--hover); }
  .side a.on:hover { background: var(--capsule); }
  .seg button[aria-pressed="false"]:hover, .icon-btn:hover { background: var(--hover); }
}

.stack { display: flex; flex-direction: column; gap: 8px; }
.inline { display: flex; align-items: center; gap: 4px; margin: 0; }
.or { margin: 12px 0 4px; text-align: center; color: var(--muted); }

.error {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--error-bg);
  color: var(--error);
}

.muted { color: var(--muted); font-size: 14px; line-height: 20px; font-weight: 400; }
.who { color: var(--muted); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.soon { color: var(--muted); font-size: 14px; line-height: 20px; margin: 0; }

.pill {
  display: inline-block;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

/* ---------- Guest pages: centred glass card on the sky ---------- */

.guest-top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  width: fit-content;
  max-width: calc(100% - 2 * max(16px, env(safe-area-inset-left), env(safe-area-inset-right)));
  margin: 16px auto 0;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  box-shadow: var(--top-shadow);
  font-size: 14px;
  line-height: 20px;
}

.brand { color: var(--text); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }

/* Brand mark: icon + name on one line. The 28px icon matches the 28px line,
   so the text sits where it sat before; the tile keeps its own corners. */
.brand, .side .logo { display: inline-flex; align-items: center; gap: 8px; }
.mark { flex: none; width: 28px; height: 28px; border-radius: 7px; }
.mark-day { display: var(--mark-day); }
.mark-night { display: var(--mark-night); }
.top-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.guest {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 32px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
}

.guest-card { width: 100%; max-width: 420px; padding: 32px; border-radius: 24px; }
.guest-card:has(.prose) { max-width: 720px; }
.guest-card > :last-child { margin-bottom: 0; }

.prose { max-width: 65ch; }
.prose > :first-child { margin-top: 0; }

.site-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  font-size: 14px;
  line-height: 20px;
}
.site-foot a { color: var(--text); }

/* ---------- Cabinet: glass panel on the left, content on the right ---------- */

.shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
}

.side {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: min(560px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px 12px;
  border-radius: 20px;
}
.side .logo { padding: 0 12px 16px; color: var(--text); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.side a:not(.logo) {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
}
.side a.on { background: var(--capsule); color: var(--active-text); box-shadow: var(--capsule-shadow); }
.side .ico { flex: none; width: 20px; height: 20px; }
/* The logo and links wrapper is invisible (its children stay items of the
   panel); phones hide the whole panel. */
.side-links { display: contents; }
.side-foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding: 12px 4px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; }
/* Name and the round logout button share a row; a long name is cut. */
.menu-link { display: flex; align-items: center; min-height: 44px; padding: 0 8px; color: inherit; }
.side-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding-left: 8px; }
.side-user .who { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.side-prefs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

/* Language and theme switches: small buttons in one capsule, the chosen one
   pressed. The theme buttons are icons, so both fit the 232px panel. */
.seg-form { display: flex; align-items: center; margin: 0; }
.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--seg-edge); border-radius: 999px; }
.seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.seg-icons button, .seg-lang button { padding: 4px 8px; }
.seg svg { display: block; width: 16px; height: 16px; }
.seg button[aria-pressed="true"] { background: var(--capsule); color: var(--active-text); box-shadow: var(--capsule-shadow); }

/* Round icon button (logout): the same edge as the switches. */
.icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--seg-edge);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
}
.icon-btn svg { display: block; width: 18px; height: 18px; }

/* The soft ring of the switches: thinner than the page default. */
.seg button:focus-visible, .icon-btn:focus-visible, .side a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tabbar a:focus-visible, .m-menu summary:focus-visible, .m-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Fingers need 44px targets; the mouse keeps the compact switch. */
@media (pointer: coarse) {
  button, input, select, a.button, .att-up, .btn-primary { min-height: 44px; }
  .seg button { min-height: 44px; min-width: 44px; }
  .icon-btn { width: 44px; height: 44px; min-height: 44px; }
}

.content { min-width: 0; padding: 8px 4px; }
.page-title { margin: 4px 0 16px; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.025em; }

.blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.block { min-width: 0; padding: 24px; border-radius: 20px; }
.block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.block-head a { color: var(--link); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.big-num { margin: 0 0 4px; font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.list-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.list-row > :last-child { margin-left: auto; color: var(--muted); text-align: right; }
.list-row { flex-wrap: wrap; } /* long labels drop below the name, kept to the right */

/* Phones: the top bar and the bottom tab bar replace the side panel. They
   are hidden on wide screens. */
.m-top, .tabbar { display: none; }

/* Narrow screens (Apple tab bar pattern): the side panel hides; a compact
   glass bar on top holds the logo and the round user menu button (name,
   language, theme, logout in a panel below it); every section of the role
   is a tab in the glass bar fixed to the bottom, above the home indicator.
   The bar's glass is its ::before, so the menu panel, glass itself, blurs
   the page and not the bar (no glass on glass). The tab bar hides while a
   field has focus, so it never covers the field above the keyboard. Weak
   phones get a lighter blur. */
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
  .glass, .side, .block, .guest-card, .guest-top, .m-top::before, .tabbar {
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
  }
  .side { display: none; }

  .m-top { display: flex; }
  .m-top {
    position: relative;
    z-index: 3;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    margin: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    padding: 8px 8px 8px 16px;
  }
  .viewas-bar + .m-top { margin-top: 8px; }
  .viewas-bar { padding-top: max(8px, env(safe-area-inset-top)); }
  .m-top::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 20px; }
  .m-logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }

  .m-menu { position: relative; }
  .m-menu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--seg-edge);
    border-radius: 999px;
    color: var(--text);
    list-style: none;
    cursor: pointer;
    transition: transform 160ms var(--ease);
  }
  .m-menu summary::-webkit-details-marker { display: none; }
  .m-menu summary:active { transform: scale(0.97); }
  .m-menu summary .ico { width: 22px; height: 22px; }
  .m-menu[open] summary { background: var(--capsule); color: var(--active-text); box-shadow: var(--capsule-shadow); }
  .m-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(288px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    padding: 16px 12px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 20px;
    transform-origin: top right;
    animation: menu-in 200ms var(--ease) backwards;
  }
  .m-panel .side-prefs { justify-content: flex-start; }

  .tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: calc(56px + env(safe-area-inset-bottom));
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    border-width: 1px 0 0;
    border-radius: 0;
  }
  .tabbar { display: grid; }
  .tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    margin: 4px 0;
    border-radius: 14px;
    color: var(--muted);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    text-decoration: none;
  }
  .tabbar .ico { flex: none; width: 24px; height: 24px; }
  /* -0.02em: the longest label, «Пригласить», fits a 64px tab at 320px. */
  /* Eight tabs (the admin) leave 48px each at 390px: smaller labels, no gaps. */
  .tabbar:has(a:nth-child(8)) a { font-size: 10px; padding: 0 1px; }
  .tabbar:has(a:nth-child(8)) span { letter-spacing: -0.04em; }
  .tabbar span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: -0.02em; }
  .tabbar a.on { background: var(--capsule); color: var(--active-text); box-shadow: var(--capsule-shadow); }
  body:has(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]):focus, select:focus, textarea:focus) .tabbar { display: none; }
  .content { padding-bottom: calc(56px + env(safe-area-inset-bottom) + 16px); }

  .blocks { grid-template-columns: minmax(0, 1fr); }
  .guest-card { padding: 24px; }
  .guest-top { border-radius: 24px; }

  /* People cards: one column of full-width controls, labels above them. */
  .person .person-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person .person-edit, .person .pay-actions, .person .person-actions { align-items: stretch; }
  .person .person-edit { display: grid; grid-template-columns: minmax(0, 1fr); }
  .person .person-edit .field, .person .pay-form .field { width: 100%; }
  .person .person-edit .field select, .person .pay-form .field select { width: 100%; }
  .person .person-edit button, .person .pay-actions button, .person .person-actions button { width: 100%; min-height: 44px; }
  .person .pay-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(88px, 112px); align-items: end; }
  .person .pay-until { grid-column: 1 / -1; }
  .person .pay-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .person .person-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .person .person-actions form, .person .pay-actions form { display: block; }

  /* Pages: cards breathe at 20px, headings 28px, form buttons fill the row. */
  .block { padding: 20px 16px; }
  h1, .page-title { font-size: 28px; line-height: 34px; overflow-wrap: anywhere; }
  .guest-card .btn-primary, .block .btn-primary, .welcome-actions a.button, .linkbox button { display: flex; width: 100%; }
  .welcome-actions { flex-direction: column; align-items: stretch; }
  .welcome-actions .inline { justify-content: center; }
  .welcome-actions button.link { min-height: 44px; }
  .guest-card a.button { width: 100%; }
  .block-head a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -12px -8px;
    padding: 0 8px;
  }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }

/* ---------- Admin: invite form and people rows ---------- */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field select { width: 100%; }
.form-submit { width: 100%; margin-top: 16px; }
#created:not(:empty), #admin-error:not(:empty) { margin-top: 12px; }
#created:not(:empty) + .only-empty { display: none; }
@media (max-width: 760px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* A full-width block for the people lists, whose rows need room. */
.block-wide { max-width: 960px; }

.person { padding: 12px 0; border-bottom: 1px solid var(--line); }
.person:last-child { border-bottom: 0; }
.person, .person-head, .person-mail, .person-badges { overflow-wrap: anywhere; }
.person-head { font-size: 16px; line-height: 24px; }
.person-mail { margin-top: 2px; }
.person-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }

.pill-warn { color: var(--error); }

/* Inner groups are separated by a hairline, not by more glass. */
.person-edit, .pay, .person-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pay > .list-row:first-child { padding: 0 0 8px; border-top: 0; }
.person-edit, .pay-form, .pay-actions, .person-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.pay-form { margin: 0; }
.person-edit .field, .pay-form .field { width: auto; }
.person-edit .field select, .pay-form .field select { width: auto; }
.person form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.field-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--muted); }
.person button, .linkbox button { padding: 4px 12px; border: 1px solid var(--field-edge); background: var(--surface); }
.pay-actions { margin-top: 8px; padding-top: 0; }

.linkbox { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.linkbox .hint { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }

/* View-as banner above the page while an admin views another cabinet.
   White on #7A2E0E is about 9:1. */
.viewas-bar {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 8px 16px;
  background: var(--viewas-bg);
  color: var(--viewas-text);
  overflow-wrap: anywhere;
}
.viewas-bar p { margin: 0; }
.viewas-bar button { padding: 4px 12px; border: 2px solid var(--viewas-text); background: transparent; color: var(--viewas-text); font-weight: 600; }
.viewas-bar button:focus-visible { outline-color: var(--viewas-text); }

/* ---------- System preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; transform: translateX(var(--rest)); }
  .clouds::after { animation: none; }
  .guest-card, .block { animation: fade 200ms var(--ease) both; }
  .m-panel { animation: fade 200ms var(--ease) backwards; }
  button, a.button, .side a, .tabbar a, .m-menu summary { transition: none; }
  button:active, a.button:active, .side a:active, .tabbar a:active, .m-menu summary:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .glass, .side, .block, .guest-card, .guest-top, .m-top::before, .tabbar {
    background: var(--surface-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* The panel is solid now, so the active item gets a tint and an edge. */
  .side a.on, .tabbar a.on, .m-menu[open] summary, .seg button[aria-pressed="true"] { background: var(--active-tint); box-shadow: inset 0 0 0 1px var(--active-text); }
}

/* Reminder above a student cabinet until the email is confirmed. */
.verify-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; box-shadow: var(--glass-shadow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.verify-banner p { margin: 0; flex: 1 1 240px; }
.verify-banner form { margin: 0; }

/* ---------- Questionnaire (welcome) ---------- */

.welcome-blocks { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.welcome-top { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.welcome-top .muted { margin: 0; white-space: nowrap; }
.progress-marks { display: flex; flex: 1; gap: 6px; margin: 0; padding: 0; list-style: none; }
.progress-marks li { flex: 1; height: 6px; border-radius: 999px; background: var(--line); }
.progress-marks li.on { background: var(--accent); }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
@media (max-width: 560px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: 2px solid var(--field-edge);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.card span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.card.on, .card:has(input:checked) { border-color: var(--accent); background: var(--capsule); }
.card.on::after, .card:has(input:checked)::after { content: "\2713"; color: var(--accent); font-size: 20px; font-weight: 700; }
/* The checkbox covers the whole card: invisible, but it takes the click and the focus. */
.card input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.answers { margin: 0 0 8px; }

/* ---------- Materials library (admin and teacher) ---------- */

.mat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.mat-head a.button { width: auto; }
.mat-page { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* The grade tabs scroll inside their own strip; the right edge fades. */
.grade-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-mask-image: linear-gradient(to right, #fff calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #fff calc(100% - 24px), transparent);
}
.grade-tabs a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.grade-tabs a.on { background: var(--accent); color: var(--on-accent); }

.mat-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.mat-filters .field { flex: 1 1 140px; }
.mat-filters .field select { width: 100%; }
.mat-gap { margin-top: 24px; }

.mat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.mat-num { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.mat-main { flex: 1 1 200px; min-width: 0; }
.mat-title { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-size: 16px; font-weight: 600; text-decoration: none; }
.mat-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mat-actions, .mat-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.mat-bar { margin-top: 12px; }
.mat-actions form, .mat-bar form { margin: 0; }
.mat-bar a.button { width: auto; }
.mat-paste-box { margin: 16px 0 0; }
.mat-paste-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.mat-paste-acts .btn-primary { margin: 0; }

/* The student view of a material and its link in the builder. */
/* The builder's top bar sticks to the top: the title and state of the
   material, the state of saving and the main actions. The palette and the
   anchors below it read its height from --b-bar-h (builder-autosave.js). */
.b-bar { position: sticky; top: max(0px, env(safe-area-inset-top)); z-index: 6; max-width: 1200px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-solid); }
.b-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.b-bar-info { display: flex; flex: 1 1 240px; align-items: center; gap: 8px; min-width: 0; }
.b-bar-title { min-width: 0; margin: 0; overflow: hidden; font-size: 20px; line-height: 28px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.b-chip { flex: none; }
.b-save { min-width: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.b-save[data-state="failed"] { color: var(--error); }
.b-retry { min-height: 0; }
.b-bar-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.b-bar-acts form { margin: 0; }
.b-left { color: var(--muted); font-size: 14px; line-height: 20px; }
.b-left a { color: var(--accent); font-weight: 600; }
.b-bar .b-msg { margin: 6px 0 0; }
.b-bar .b-msg:empty { display: none; }
.b-flash { margin: 6px 0 0; color: var(--success); font-weight: 600; }
.b-bar .more-panel { z-index: 30; background: var(--surface-solid); }
/* Anchors and scrolling to a block stop below the bar. */
.b-card, .b-part, #b-meta { scroll-margin-top: calc(var(--b-bar-h, 64px) + 16px); }
/* A field scrolled into view (the keyboard opening, Tab) stops under the bar. */
html:has(.b-bar) { scroll-padding-top: calc(var(--b-bar-h, 64px) + var(--b-strip-h, 0px) + 16px); }
.js-only { display: none; }
.has-js .js-only { display: inline-flex; }
.sv-back { margin: 0 0 12px; }
.sv-note { max-width: 960px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--muted); }
.sv-again { margin-top: 8px; }

/* «⋯» menu: a square button and a panel under it. */
.more { position: relative; }
.more-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--field-edge); border-radius: 10px; background: var(--surface); color: var(--text); list-style: none; cursor: pointer; transition: transform 160ms var(--ease), background-color 120ms ease; }
.more-btn::-webkit-details-marker { display: none; }
.more-btn:active { transform: scale(0.97); }
.more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.more[open] .more-btn { background: var(--capsule); color: var(--active-text); }
.more-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: flex; flex-direction: column; width: max-content; min-width: 220px; max-width: calc(100vw - 32px); padding: 6px; border-radius: 12px; transform-origin: top right; animation: menu-in 160ms var(--ease) backwards; }
.more-panel form { margin: 0; }
.more-h { margin: 6px 10px 2px; color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.more-item { display: flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 8px; color: var(--text); font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; }
.more-item:focus-within, .more-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.more-note { margin: 2px 10px 6px; color: var(--muted); font-size: 12px; line-height: 16px; }
/* A button in the menu looks like a link in it. */
.more-panel button.more-item { width: 100%; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 500; text-align: left; }
.more-panel button.more-item:disabled { opacity: .45; cursor: default; }
.more-panel .more-item.b-del { color: var(--error); }
.b-more { margin-left: auto; }
/* A file dragged over a drop zone (app.js). */
.drop-over { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
@media (hover: hover) and (pointer: fine) { .more-item:hover, .more-btn:hover { background: var(--hover); } }
@media (pointer: coarse) { .more-btn { width: 44px; height: 44px; } .more-item { min-height: 44px; } }

.mat-json { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--field-edge); border-radius: 12px; background: var(--surface); color: var(--text); font-family: ui-monospace, Consolas, monospace; font-size: 14px; line-height: 20px; tab-size: 2; }
.mat-paste { min-height: 120px; }

.problems { margin: 0 0 12px; padding: 8px 12px 8px 28px; border-radius: 12px; background: var(--error-bg); color: var(--error); overflow-wrap: anywhere; }
.plain { margin: 0; padding-left: 20px; }
.pv-block { padding: 8px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.pv-kind { font-weight: 700; }

/* ---------- Tasks (types 1-4) ---------- */
.task { padding: 8px 0; min-width: 0; overflow-wrap: anywhere; }
.tk-instr { margin: 0 0 8px; font-weight: 600; }
.tk-hint { margin: 0 0 8px; }
.tk-hint summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--muted); }
.tk-bank { margin: 0 0 8px; }
.tk-bank-words { font-weight: 600; }
.tk-item { padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.tk-text { margin: 0; }
.tk-cell { display: inline-flex; min-height: 44px; vertical-align: middle; align-items: center; gap: 4px; max-width: 100%; white-space: nowrap; }
.tk-letter { font-weight: 700; }
.tk-gap { width: 10ch; min-width: 6ch; max-width: 100%; }
@supports (field-sizing: content) { .tk-gap { width: auto; field-sizing: content; } }
.tk-text select, .tk-pair select { max-width: 100%; }
.tk-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.tk-prompt { padding: 0; margin-bottom: 4px; font-weight: 600; color: var(--text); }
.tk-opt { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 400; color: var(--text); }
.tk-opt input { width: 20px; min-width: 20px; height: 20px; min-height: 0; padding: 0; flex: none; }
.tk-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tk-left { display: flex; align-items: center; gap: 8px; flex: 1 1 140px; min-width: 0; }
.tk-img { max-width: 96px; max-height: 96px; border-radius: 8px; }
.task-mark { font-weight: 700; }
.task-ok { color: var(--success); }
.task-bad { color: var(--error); }
.tk-pts { color: var(--muted); }
.tk-exp { margin: 4px 0 0; color: var(--muted); }
.tk-score { margin: 8px 0 0; }
.tk-submit { margin-top: 12px; }

/* ---------- Tasks 5-9, attachments, theory ---------- */
.tk-positions { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-positions .tk-cell { max-width: 100%; }
.tk-positions select { max-width: 100%; }
.tk-sentence, .tk-source { margin: 0 0 4px; }
.tk-errors .tk-pair { margin-top: 4px; }
.tk-errors .tk-gap { width: 14ch; }
.tk-key { margin: 0 0 4px; }
.tk-keyword { text-transform: uppercase; letter-spacing: 0.04em; }
.tk-area { display: block; width: 100%; min-height: 96px; resize: vertical; font-size: 16px; }
.tk-note { margin: 4px 0; }
.tk-attach { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; min-width: 0; }
.tk-attach p { margin: 0; }
.tk-example { padding: 8px 12px; border-radius: 12px; background: var(--surface); }
.tk-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tk-fig { margin: 0; min-width: 0; }
.tk-fig img, .md-img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.tk-attach audio { display: block; width: 100%; max-width: 480px; }
.tk-predict summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; }
.tk-video { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.tk-reading { padding: 12px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 17px; line-height: 1.6; max-width: 68ch; min-width: 0; }
.tk-dialog { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tk-line { max-width: 92%; padding: 8px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.tk-line-b { align-self: flex-end; border-color: var(--field-edge); }
.theory { padding: 8px 0; min-width: 0; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 12px; }
.md-scroll table { border-collapse: collapse; }
.md th, .md td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; }
.md pre { max-width: 100%; overflow-x: auto; }

/* Student lessons: the list rows and the lesson page. */
.ls-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.ls-row:first-of-type { border-top: 0; }
.ls-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.ls-title { font-size: 16px; line-height: 24px; font-weight: 600; }
.ls-n { color: var(--muted); font-weight: 400; }
.ls-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ls-badge { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.ls-prog { margin: 0; }
.ls-act { margin: 0; flex: none; }
a.ls-act { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.ls-next .ls-title { font-size: 18px; }
.lesson-progress { margin: 0 0 16px; }
.lp-text { margin: 0 0 4px; }
.lp-bar { display: block; width: 100%; max-width: 480px; height: 8px; }
.lesson-viewing { margin: 0 0 16px; }
.lt { padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.lt-form { margin: 0; }
.lt-err { margin: 8px 0 0; }
.lt-err:empty { display: none; }
@media (max-width: 760px) {
  .ls-act, a.ls-act, .ls-act .btn-primary { width: 100%; }
}

/* A student moves or cancels a lesson with a teacher (student_lesson_move.html). */
.ls-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ls-late, .ls-left { margin: 0; }
.ls-left { padding-top: 8px; }
.mv-page { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.mv-page > * { max-width: 100%; margin: 0; }
.mv-when { font-weight: 600; overflow-wrap: anywhere; }
.mv-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.mv-acts form { margin: 0; }
.mv-days { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.mv-day { margin: 0; padding: 0; border: 0; min-width: 0; }
.mv-day legend { padding: 0 0 8px; font-weight: 600; }
.mv-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
@media (max-width: 760px) {
  .ls-acts, .ls-acts a.button, .mv-acts, .mv-acts button, .mv-acts a.button { width: 100%; }
  .mv-acts { flex-direction: column; }
}

/* ---------- Material builder (admin and teacher) ---------- */
.b-msg:empty { display: none; }
/* The status is a calm line: the problems themselves are at the blocks. */
.b-status { max-width: 1200px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); overflow-wrap: anywhere; }
.b-status.b-ok { color: var(--success); }
.b-status p { margin: 0; }
.b-status a { color: var(--accent); font-weight: 600; }
.b-fresh { color: var(--muted); }
/* A block with problems: a mark on the card, the fields lit in its form. */
.b-card-warn { box-shadow: inset 3px 0 0 var(--error); }
.b-warn-pill { flex: none; color: var(--error); font-size: 13px; }
.b-bad input, .b-bad textarea, .b-bad select, .b-bad .md-editor { border-color: var(--error); }
.b-bad label { color: var(--error); }
.b-need { border-color: color-mix(in srgb, var(--error) 45%, transparent); color: var(--error); }
.b-errs { margin: 4px 0 0; padding-left: 20px; }
.b-errs li { padding: 2px 0; }

/* The palette is on the right, so it does not stand next to the cabinet
   menu; it comes first in the page for the phone strip. */
.b-layout { display: grid; grid-template-columns: minmax(0, 1fr) 216px; align-items: start; gap: 16px; max-width: 1200px; }
.b-main { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.b-palette { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--b-bar-h, 64px) + 24px); z-index: 2; min-width: 0; padding: 16px 12px; border-radius: 20px; }
.b-pal-h { margin: 0 4px 4px; font-size: 16px; line-height: 24px; font-weight: 700; }
.b-pal-hint { margin: 0 4px 8px; }
.b-pal-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.b-pal-list form { margin: 0; }
.b-pal {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  text-align: left;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.b-pal.b-press { background: var(--active-tint); }
.b-pal:focus-visible, .b-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.b-ico { display: inline-flex; flex: none; color: var(--accent); }
.b-svg { display: block; }

.block.b-part { animation: none; }
.b-list { display: flex; flex-direction: column; gap: 8px; min-height: 8px; margin: 0; padding: 0; list-style: none; }
.b-empty { margin: 0; padding: 16px; border: 2px dashed var(--field-edge); border-radius: 14px; color: var(--muted); font-size: 14px; line-height: 20px; text-align: center; }
.b-target .b-empty { border-color: var(--accent); color: var(--accent); }
.b-card { min-width: 0; padding: 4px 12px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow-wrap: anywhere; }
.b-editing { border-color: var(--accent); }
.b-head { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; }
.b-handle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 44px;
  margin-left: -8px;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.b-type { flex: none; font-weight: 700; }
.b-line { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.b-id { flex: none; color: var(--muted); font-size: 12px; }
.b-pv summary { display: flex; align-items: center; min-height: 44px; color: var(--link); font-weight: 600; cursor: pointer; }
.b-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.b-acts form { display: flex; gap: 8px; margin: 0; }
.b-del { color: var(--error); }
.b-moveto select, .b-add select { min-width: 0; max-width: 100%; }
/* With a mouse the card's actions are a quiet toolbar: no edges until
   hovered (fingers keep the bigger buttons below). */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .b-acts { gap: 4px; }
  .b-acts form { gap: 4px; }
  .b-acts :where(button, a.button) { min-height: 36px; padding: 0 12px; border-color: transparent; background: transparent; font-size: 14px; border-radius: 8px; }
  .b-acts :where(button, a.button):hover:not(:disabled) { border-color: var(--field-edge); background: var(--hover-solid, var(--hover)); }
  .b-acts select { min-height: 36px; border-radius: 8px; font-size: 14px; }
}
.b-add { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.b-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.b-wide { grid-column: 1 / -1; }
.b-goals { display: flex; flex-wrap: wrap; gap: 0 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.b-goals legend { margin-bottom: 4px; padding: 0; }
.b-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 400; }
.b-check input { flex: none; width: 20px; min-width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; }
.b-form textarea { resize: vertical; }
.b-md { min-height: 200px; font-family: ui-monospace, Consolas, monospace; font-size: 15px; line-height: 22px; }

/* Task forms (task 11): problems, item rows with their buttons, and the
   attachments with uploads (builder-attach.js). */
.bt-errs { margin: 0; padding: 8px 12px 8px 28px; border-radius: 12px; background: var(--error-bg); color: var(--error); }
.bt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bt-wide { grid-column: 1 / -1; }
.bt-items, .att { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.bt-items legend, .att legend { margin-bottom: 4px; padding: 0; }
.att { padding-top: 12px; border-top: 1px solid var(--line); }
.bt-syn { margin: 0; }
.bt-rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bt-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
.bt-main { flex: 1 1 260px; }
.bt-ans { flex: 0 0 auto; }
.bt-w { flex: 0 0 112px; }
.bt-img { flex: 1 1 100%; }
.bt-pick { display: flex; flex-wrap: wrap; gap: 0 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.bt-del, .att-rm { color: var(--error); }
.bt-add { align-self: flex-start; }
.bt-err { flex-basis: 100%; margin: 0; color: var(--error); font-size: 14px; line-height: 20px; }
/* Types 5-9 (task 12): the free-tier note and the per-row fields of a free
   answer (second sentence on its own line, key word or minimum beside). */
.bt-warn { margin: 0; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
.bt-sub { flex: 1 1 100%; }
.bt-kw { flex: 1 1 160px; }
.att-line { display: flex; gap: 8px; min-width: 0; }
.att-line input { flex: 1 1 auto; min-width: 0; }
.att-up { flex: none; cursor: pointer; }
.att-up:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.att-prev:empty, .att-imgs:empty { display: none; }
.att-audio { display: block; width: 100%; max-width: 420px; }
.att-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.att-img { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 132px; }
.att-thumb { display: block; width: 132px; height: 96px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); object-fit: cover; }
.att-rm { align-self: flex-start; }
.att-rm[hidden] { display: none; }
.att-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.att-note.att-bad { color: var(--error); }

/* Markdown editor (md-editor.js): a toolbar and the mode switch above the
   field, all inside one field edge. The toolbar scrolls inside its strip on
   a phone; the page does not move sideways. */
.md-editor {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--field-edge);
  border-radius: 12px;
  background: var(--surface);
}
.md-editor:focus-within { border-color: var(--accent); }
.md-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.md-sep { flex: none; width: 1px; height: 24px; margin: 0 4px; background: var(--line); }
.md-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
}
.md-btn svg, .md-menu svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.md-btn[aria-pressed="true"], .md-btn.md-on,
.md-btn[aria-expanded="true"], .md-modes button[aria-pressed="true"] { background: var(--active-tint); box-shadow: none; }
.md-btn:focus-visible, .md-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.md-modes { margin: 4px 6px 4px 0; }
.md-modes button[hidden] { display: none; }
.md-editor > textarea, .md-editor > .md-visual {
  grid-column: 1 / -1;
  min-width: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 11px 11px;
  outline: none;
}
/* The visual area draws the text as the student sees it (the .md rules of
   the lesson); a wide table scrolls inside itself. */
.md-editor > .md-visual { min-height: 200px; padding: 8px 12px; overflow-wrap: anywhere; cursor: text; }
.md-visual[hidden] { display: none; }
/* Chrome counts 600 and more as bold: a bold heading would make the Bold
   button add a font-weight style span (blocked by the CSP) instead of <b>.
   Just under it, Bold gives a real <b> in a heading (drawn bolder). */
.md-visual h2, .md-visual h3, .md-visual th { font-weight: 590; }
.md-visual table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 12px; }
.md-visual th, .md-visual td { min-width: 3em; overflow-wrap: normal; }
/* The builder card is a list item: lists in it would inherit its markers. */
.md-visual ul { list-style-type: disc; }
.md-visual ul ul, .md-visual ol ul { list-style-type: circle; }
.md-visual ol { list-style-type: decimal; }
.md-visual img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.md-editor > .md-note, .md-editor > .md-hint { grid-column: 1 / -1; margin: 0; padding: 6px 12px; border-top: 1px solid var(--line); }
.md-menu {
  position: absolute;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--capsule-shadow);
}
.md-menu[hidden] { display: none; }
.md-menu button {
  min-height: 36px;
  padding: 4px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.md-menu .md-h2 { font-size: 20px; font-weight: 700; }
.md-menu .md-h3 { font-size: 17px; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .md-btn:hover, .md-menu button:hover { background: var(--active-tint); }
}
@media (pointer: coarse) {
  .md-btn { width: 44px; min-height: 44px; }
  .md-menu button { min-height: 44px; }
  .md-modes button { min-height: 44px; }
}
/* A phone: the mode switch goes under the toolbar, which keeps the width. */
@media (max-width: 520px) {
  .md-editor { grid-template-columns: minmax(0, 1fr); }
  .md-modes { justify-self: start; margin: 0 6px 6px; }
}
.md-note { color: var(--muted); font-size: 14px; line-height: 20px; }
.md-note.md-bad { color: var(--error); }
.md-note[hidden] { display: none; }

/* The link, picture and table dialogs of the editor (md-editor.js): one
   <dialog> per page, fields of 44px, the actions at the bottom right. */
.md-dlg {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-solid);
  color: var(--text);
  box-shadow: var(--top-shadow);
}
.md-dlg::backdrop { background: var(--scrim); }
.md-dlg form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.md-dlg-title { margin: 0; font-size: 20px; line-height: 28px; }
.md-dlg-f { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.md-dlg-f input { min-height: 44px; }
.md-dlg-f input[aria-invalid="true"] { border-color: var(--error); }
.md-dlg-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.md-dlg-err { margin: 0; color: var(--error); font-size: 14px; line-height: 20px; }
.md-dlg-err[hidden] { display: none; }
.md-dlg-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.md-dlg-acts .btn-primary { border: 0; background: var(--accent); }
.md-dlg-file { align-self: flex-start; }
.md-dlg-unlink { margin-right: auto; color: var(--error); }
@media (hover: hover) and (pointer: fine) {
  .md-dlg-acts button:not(.btn-primary):hover, .md-dlg-file:hover { background: var(--active-tint); }
}

/* Dragging (builder.js): the ghost follows the pointer 1:1 (translate is set
   per move), the source stays dimmed in place, a line marks the drop. */
.b-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  margin: 0;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(30, 60, 90, .22);
  opacity: .96;
  pointer-events: none;
  transition: scale 150ms var(--ease);
}
.b-ghost.b-lifted { scale: 1.03; }
.b-ghost.b-head { box-sizing: border-box; padding: 0 12px; }
.b-dragging { opacity: .4; }
.b-drop { height: 3px; margin: -2px 0; border-radius: 2px; background: var(--accent); list-style: none; }
.b-drag-on, .b-drag-on * { cursor: grabbing; -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .b-ghost { transition: none; }
  .b-ghost.b-lifted { scale: none; }
}

/* Phone: the palette is a strip above the parts that scrolls sideways and
   stays at the top while the parts scroll. */
@media (max-width: 760px) {
  .b-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .b-main, .b-palette { grid-column: auto; grid-row: auto; }
  /* The strip is opaque (nothing shows through it) and sits right under the
     bar; the blocks below scroll to a place under both. */
  .b-palette { top: calc(var(--b-bar-h, 56px) + 4px + max(0px, env(safe-area-inset-top))); padding: 8px; border-radius: 16px; background: var(--surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .b-card, .b-part, #b-meta { scroll-margin-top: calc(var(--b-bar-h, 56px) + var(--b-strip-h, 80px) + 16px); }
  /* The stack of sticky things is kept short: a slim bar, no spare gaps. */
  .b-bar { padding: 6px 10px; margin-bottom: 8px; }
  .b-bar-row { gap: 4px 8px; }
  .b-bar-title { font-size: 18px; line-height: 24px; }
  .b-bar-acts { width: 100%; justify-content: flex-start; }
  .b-pal-h, .b-pal-hint { display: none; }
  .b-pal-list {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, #fff calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #fff calc(100% - 24px), transparent);
  }
  .b-pal-list li { flex: 0 0 auto; }
  .b-pal { width: auto; border-color: var(--line); background: var(--surface); white-space: nowrap; }
  .b-meta { grid-template-columns: minmax(0, 1fr); }
  .b-head { flex-wrap: wrap; }
  .b-line { flex-basis: 100%; order: 5; white-space: normal; }
  .b-errs a { display: inline-flex; align-items: center; min-height: 44px; }
  .b-add { flex-wrap: wrap; }
  /* Card actions: «Изменить» and «⋯». */
  .b-card .b-acts { flex-wrap: nowrap; }
  .b-card .b-acts > a.button { flex: 1 1 auto; }
  /* Task forms: one column, the text of a row on its own line. */
  .bt-grid { grid-template-columns: minmax(0, 1fr); }
  .bt-main { flex-basis: 100%; }
  .bt-w { flex: 1 1 96px; }
}

/* Page dividers in the builder and page sections in the student view. */
.b-page { margin: 0 0 8px; padding-top: 6px; border-top: 2px dashed var(--accent); color: var(--accent); font-size: 13px; line-height: 18px; font-weight: 600; }
.sv-part { margin: -4px 0 12px; font-size: 14px; line-height: 20px; }

/* ---------- Teacher calendar (calendar.js opens the lesson cards) ---------- */

.cal-page { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cal-block { max-width: none; min-width: 0; }
.cal-who { font-weight: 400; color: var(--muted); }
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.cal-nav, .cal-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-range { font-variant-numeric: tabular-nums; }
.cal-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.cal-pick .field { min-width: 220px; }

/* The wide week: an hour column and seven day columns. Light cells are
   working hours, the blue chip is a lesson, the grey chip an unpaid one. */
.cal-hd, .cal-row { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-row { margin-top: 2px; }
.cal-h { padding: 4px 0; text-align: center; font-size: 14px; font-weight: 600; border-radius: 8px; }
.cal-h.cal-today { background: var(--active-tint); color: var(--active-text); }
.cal-t { padding: 4px 6px 0 0; text-align: right; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cal-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 56px; padding: 2px; border-radius: 6px; background: var(--hover); }
.cal-c.cal-w { background: var(--active-tint); }
a.cal-lesson {
  display: block; min-width: 0; padding: 3px 6px; border-radius: 6px;
  background: var(--accent); color: var(--on-accent);
  font-size: 13px; line-height: 18px; text-decoration: none; overflow-wrap: anywhere;
}
a.cal-lesson time { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-c a.cal-lesson { flex: 1 1 auto; }
.cal-c a.cal-lesson.cal-half { flex: 0 0 50%; margin-top: auto; }
a.cal-lesson:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
a.cal-lesson.cal-unpaid { background: color-mix(in srgb, var(--muted) 30%, var(--surface-solid)); color: var(--text); }
.cal-flag { display: block; font-size: 12px; opacity: .85; }
.ls-row.cal-unpaid { opacity: .75; }

.cal-list { display: none; }
.cal-day { padding: 12px 0; border-top: 1px solid var(--line); }
.cal-day:first-child { border-top: 0; }
.cal-dh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 8px; font-size: 16px; line-height: 24px; }
.cal-day.cal-today .cal-dh { color: var(--active-text); }
.cal-day a.cal-lesson { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; padding: 8px 12px; border-radius: 10px; font-size: 15px; line-height: 20px; }
.cal-day .cal-flag { display: inline; }

.cal-sum { cursor: pointer; font-size: 16px; line-height: 24px; font-weight: 700; }
.cal-form .error { margin-top: 12px; }
.cal-wds { margin: 12px 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; min-width: 0; }
.cal-wds legend { padding: 0; margin-bottom: 4px; }
.cal-wd { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--text); }
.cal-wd input { width: auto; min-height: 0; }
.cal-hday { margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.cal-hday legend { padding: 0; margin-bottom: 4px; }
.cal-hrow { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cal-hrow input { width: auto; flex: 1 1 0; min-width: 0; max-width: 160px; }
.cal-hacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ---------- Entry timer and lesson page (plan 4, task 5) ---------- */
.upcoming { display: flex; justify-content: center; margin: 0 0 12px; }
.upcoming:empty { display: none; }
.up { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; max-width: 100%; padding: 8px 8px 8px 20px; border-radius: 14px; background: var(--active-tint); color: var(--active-text); font-weight: 600; }
.up-text { min-width: 0; }
.up-form { margin: 0; }
.up .btn-primary { min-height: 36px; }
.up [hidden], .up[hidden] { display: none; }
.up-wait { opacity: 0.45; cursor: default; }

.room-back { margin: 0 0 8px; }
.room-when { margin: 0 0 12px; }
.room-note { margin: 0 0 16px; font-weight: 600; }
.room { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.room-main { max-width: none; min-width: 0; }
.room-pages { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.room-part { display: flex; flex: none; align-items: center; gap: 6px; }
.room-part-h { color: var(--muted); font-size: 14px; line-height: 20px; }
.room-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.room-pg.on { border-color: transparent; background: var(--accent); color: var(--on-accent); }
.room-pg.off { color: var(--muted); opacity: 0.5; cursor: not-allowed; }
.room-step { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.room-side { position: sticky; top: 16px; min-width: 0; min-height: 200px; }
.room-side > p { margin: 0; }
.room-side-x, .room-chat-btn { display: none; }
.room-video { min-width: 0; }
/* The teacher's tools: the switcher of the lesson's materials, the bar under
   the page, the pencil's canvas over the page, comments under the tasks and
   the material dialog. */
.room-mats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.room-mat { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.room-mat.on { border-color: transparent; background: var(--accent); color: var(--on-accent); }
.room-mat.off { color: var(--muted); opacity: 0.5; cursor: not-allowed; }
.room-page { position: relative; }
.room-ink { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; color: var(--error); }
.room.inking .room-ink { pointer-events: auto; cursor: crosshair; touch-action: none; }
.room-bar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 16px -24px 0; padding: 8px 24px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface-solid); }
.room-tools-err:empty { display: none; }
.room-tools-err { flex-basis: 100%; margin: 0; }
.room-bar .room-step { margin: 0; }
.room-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.room-tools form { margin: 0; }
.room-pencil[aria-pressed="true"] { border-color: transparent; background: var(--accent); color: var(--on-accent); }
button.room-end { color: var(--error); }
.room-cm { margin: 8px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; }
.room-cm:empty { display: none; }
.room-cm-item { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.room-cm-item + .room-cm-item { margin-top: 6px; }
.room-cm-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 8px 0 16px; }
.room-cm-form textarea { flex: 1 1 240px; min-width: 0; }
.room-dlg { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-solid); color: var(--text); box-shadow: var(--top-shadow); }
.room-dlg::backdrop { background: var(--scrim); }
.room-dlg .block-head { margin-top: 0; }
.room-dlg input[type="search"] { width: 100%; }
.room-mat-h { margin: 16px 0 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
.room-mat-ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.room-mat-pick { max-width: 100%; text-align: left; overflow-wrap: anywhere; }
.room-dlg form[method="dialog"] { margin: 16px 0 0; }

/* The lesson board (board.js): a field of 6400 x 3600 units scaled by a CSS
   transform; objects sit on it at their own place. Without the script the
   objects are a plain list. */
.board-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.board-bar .board-file { margin: 0; }
.board-zoom { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.board-pct { min-width: 48px; text-align: center; color: var(--muted); font-size: 14px; }
.board-view { position: relative; width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-solid); }
.board-field { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.board-field img, .board-field video { max-width: 100%; height: auto; }
.board-live .board-view { aspect-ratio: 16 / 9; max-height: 75vh; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.board-live.board-ro .board-view { touch-action: pan-y; }
.board-view.drop { outline: 2px dashed var(--accent); outline-offset: -4px; }
.board-live .board-field { position: absolute; left: 0; top: 0; display: block; width: 6400px; height: 3600px; padding: 0; transform-origin: 0 0; background-image: radial-gradient(var(--line) 5px, transparent 6px); background-size: 200px 200px; }
.board-live .bo { position: absolute; box-sizing: border-box; }
.bo-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.board-live .bo-text { padding: 20px; overflow: hidden; color: var(--text); font-size: 100px; line-height: 1.25; }
.board-live .bo img, .board-live .bo video { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.board-live .bo audio { display: block; width: 100%; height: 100%; }
.board-live.board-ro .bo audio, .board-live.board-ro .bo video { pointer-events: none; }
.board-live .bo.sel { outline: calc(3px * var(--inv, 1)) solid var(--accent); }
.bo-grip, .bo-handle { position: absolute; z-index: 1; width: 28px; height: 28px; padding: 0; border: 0; background: var(--accent); color: var(--on-accent); touch-action: none; transform-origin: 0 0; transform: scale(var(--inv, 1)); }
.bo-grip { left: 0; top: 0; border-radius: 0 0 8px 0; cursor: move; }
.bo-grip::before { content: "\2725"; font-size: 16px; line-height: 28px; }
.bo-handle { right: 0; bottom: 0; border-radius: 8px 0 0 0; cursor: nwse-resize; transform-origin: 100% 100%; }
.board-live .bo .bo-ta { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 20px; box-sizing: border-box; border: calc(3px * var(--inv, 1)) solid var(--accent); border-radius: 0; background: var(--surface-solid); color: var(--text); font: inherit; font-size: 100px; line-height: 1.25; resize: none; }
.board-empty { margin: 8px 0 0; }
.board-empty[hidden], .board-err:empty { display: none; }
.board-err { margin: 8px 0 0; }
.room-view-form, .room-swap { margin: 0; }
@media (max-width: 760px) {
  .room { grid-template-columns: minmax(0, 1fr); }
  .room-pages { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .room-side { display: none; }
  .room-side:target { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: 50dvh; overflow: auto; border-radius: 20px 20px 0 0; background: var(--surface-solid); }
  .room-side-x { display: inline-flex; margin-bottom: 8px; }
  .room-chat-btn { display: inline-flex; position: fixed; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 4; }
  /* Above the tab bar; the chat button then rises above the room bar. */
  .room-bar { bottom: calc(56px + env(safe-area-inset-bottom)); margin: 16px -16px 0; padding: 8px 16px; }
  body:has(.room-bar) .room-chat-btn { bottom: calc(136px + env(safe-area-inset-bottom)); }
  .room-video { position: fixed; top: 76px; right: 12px; z-index: 4; width: 120px; border-radius: 12px; overflow: hidden; }
}

/* The lesson card: a dialog on the calendar, a plain block on its own page. */
.cal-dlg {
  width: min(480px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-solid);
  color: var(--text);
  box-shadow: var(--top-shadow);
}
.cal-dlg::backdrop { background: var(--scrim); }
.cal-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.cal-card > * { max-width: 100%; margin-top: 0; margin-bottom: 0; }
.cal-card-h { margin: 0; font-size: 20px; line-height: 28px; overflow-wrap: anywhere; }
.cal-card-t { display: block; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--muted); }
.cal-f { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0; width: 100%; }
.cal-f .field { flex: 1 1 140px; }
.cal-f select { width: 100%; }
.cal-danger, button.cal-danger { color: var(--error); }
.cal-one { max-width: 520px; }

@media (max-width: 760px) {
  .cal-grid { display: none; }
  .cal-list { display: block; }
  .cal-bar, .cal-nav, .cal-acts { width: 100%; }
  .cal-hrow input { max-width: none; }
}

/* The bell in the cabinet header: the round button with the number of unread
   notices on its corner (hidden at zero). */
/* The bell is an icon button inside the side panel, whose links carry
   padding: it keeps the icon button's own box. */
.bell { position: relative; padding: 0; text-decoration: none; }
.bell svg { flex: none; }
.bell-n {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
}
.bell-n[data-n="0"] { display: none; }
.m-right { display: flex; align-items: center; gap: 12px; }
.notice-actions { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.notice-new .ls-title { font-weight: 700; }

/* Menu items with a number (the works to review): the count sits at the end
   of the label and is hidden at zero. */
.nav-n {
  margin-left: 6px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
}
.nav-n[data-n="0"] { display: none; }
/* On the phone tab bar the number sits on the icon corner. */
.tabbar a { position: relative; }
.tabbar .nav-n { position: absolute; top: 0; left: calc(50% + 6px); margin: 0; }

/* The review queue: one card per work. */
.rv-card { display: flex; flex-direction: column; gap: 8px; }
.rv-card p { margin: 0; }
.rv-answer { white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-ai { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.rv-form { display: flex; flex-direction: column; gap: 8px; }
.rv-label { display: flex; flex-direction: column; gap: 4px; }
.rv-label textarea { resize: vertical; }
.rv-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-verdict { margin: 4px 0; }

/* «Создать с ИИ»: the files area, the two mode cards, the rights box. */
.pf-drop { padding: 14px; border: 1px dashed var(--muted); border-radius: 12px; align-items: flex-start; }
.pf-drop .att-up { align-self: flex-start; }
.pf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.pf-list:empty { display: none; }
.pf-list li { display: flex; justify-content: space-between; gap: 12px; }
.pf-list .pf-size { color: var(--muted); flex: none; }
.pf-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.pf-modes legend { padding: 0; margin-bottom: 6px; }
.pf-mode { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); cursor: pointer; font-weight: 400; }
.pf-mode input { flex: none; width: 20px; min-width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; }
.pf-mode-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-mode-text strong { font-weight: 600; }
.pf-mode:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pf-mode:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-rights[hidden] { display: none; }

/* The lesson board's drawing, YouTube and tools (board-draw.js, board-media.js). */
.board-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.board-pen-wrap { position: relative; display: inline-block; }
.board-pen { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: max-content; max-width: 260px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-solid); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.board-pen[hidden], .board-yt[hidden], .board-sound[hidden] { display: none; }
.board-sw { width: 28px; height: 28px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: var(--c); cursor: pointer; }
.board-sw[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
.board-wd { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer; }
.board-wd[aria-pressed="true"] { background: var(--accent); }
.board-wd-dot { width: var(--d, 8px); height: var(--d, 8px); border-radius: 50%; background: var(--text); }
.board-wd[aria-pressed="true"] .board-wd-dot { background: var(--on-accent); }
.board-yt { display: flex; gap: 8px; margin: 0 0 8px; }
.board-yt input { flex: 1; min-width: 0; }
.board-draw { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.board-live.tool-pen .board-view { cursor: crosshair; }
.board-live.tool-eraser .board-view { cursor: cell; }
.board-live .bo-youtube { background: var(--surface-solid); }
.bo-yt { position: relative; width: 100%; height: 100%; }
.bo-yt iframe { display: block; width: 100%; height: 100%; border: 0; }
.bo-yt-shield { position: absolute; inset: 0; }
.board-live:not(.board-ro) .bo.sel .bo-yt-shield { display: none; }
.board-live.board-ro .bo iframe { pointer-events: none; }
.bo-yt-link { display: block; padding: 8px; }
.board-sound { position: absolute; left: 50%; top: 50%; z-index: 30; transform: translate(-50%, -50%); padding: 14px 22px; border: 0; border-radius: 14px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 18px; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.board-bar .board-btn, .board-bar .board-file { font-family: inherit; font-size: 15px; font-weight: 600; line-height: 20px; }
.board-progress { display: block; width: 100%; height: 8px; margin: 0 0 8px; }
.board-progress[hidden] { display: none; }

/* Builder stage 2: the «Новый материал» chooser, the library search and
   drafts, folded parts of the task forms and the «+» between blocks. */
.nm-dialog, .b-ins-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 20px; color: inherit; overflow: auto; }
.nm-dialog::backdrop, .b-ins-dlg::backdrop { background: rgba(15, 27, 45, 0.45); }
.nm-in { padding: 16px; }
.nm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nm-head .block-head { margin: 0; }
.nm-opts, .nm-found, .b-ins-list, .mat-mine-list { margin: 0; padding: 0; list-style: none; }
.nm-opts { display: grid; gap: 10px; margin-top: 12px; }
.nm-opt { margin: 0; padding: 0; }
.nm-copy { padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.nm-h { margin: 0 0 4px; font-size: 16px; }
.nm-btn { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.nm-btn span { color: var(--muted); font-size: 14px; }
.nm-btn:hover, .nm-btn:focus-visible { border-color: var(--accent); }
.nm-search { display: flex; gap: 8px; margin: 8px 0; }
.nm-search input { flex: 1 1 auto; min-width: 0; }
.nm-found { display: grid; gap: 6px; }
.nm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.nm-row form { margin: 0 0 0 auto; }
.nm-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.nm-page { max-width: 560px; }
.mat-find { display: flex; gap: 8px; margin: 0 0 12px; }
.mat-find input[type="search"] { flex: 1 1 auto; min-width: 0; }
.mat-mine-list { display: grid; gap: 6px; }
.mat-mine-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* A part of the form that holds only defaults is folded when scripts run;
   without them, or with a value in it, it stays open. */
.b-fold-btn { display: none; }
.has-js .b-fold[data-fold-default]:not(.is-open) > .b-fold-body { display: none; }
.has-js .b-fold[data-fold-default]:not(.is-open) > .b-fold-btn { display: inline-flex; align-items: center; min-height: 32px; }
.b-fold-h { margin: 0; }
.bt-wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.has-js .att [data-att-kind][data-att-empty]:not(.is-on) { display: none; }
.att-add { align-items: center; gap: 8px; margin-top: 8px; }
.att-add[hidden] { display: none; }

/* The «+» between blocks: quiet until the pointer is near, always at hand
   for a finger. */
.b-ins { display: none; justify-content: center; margin: 0; padding: 0; list-style: none; }
.b-plus { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); opacity: 0.55; cursor: pointer; }
.b-ins:hover .b-plus, .b-plus:focus-visible { border-color: var(--line); background: var(--surface); color: var(--accent); opacity: 1; }
@media (pointer: coarse) { .b-plus { width: 44px; height: 44px; border-color: var(--line); } }
.b-ins-on .b-ins { display: flex; }
.b-ins-on .b-add { display: none; }
.b-ins-list { display: grid; gap: 6px; margin-top: 12px; }
.b-ins-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.b-ins-opt:hover, .b-ins-opt:focus-visible { border-color: var(--accent); }
.b-ins-t { display: flex; flex-direction: column; min-width: 0; }
.b-ins-t small { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) { .b-plus, .nm-btn, .b-ins-opt { transition: border-color 0.15s, background-color 0.15s, opacity 0.15s; } }

/* ---------- Visual task editors (vx-*.js): the item rows as text with chips
   and fields, over the markup rows; the «Разметка» switch shows the markup. ---------- */
.vx-toolbar { margin: 0; }
.vx { display: none; flex-direction: column; gap: 8px; min-width: 0; }
.bt-items.vx-visual .vx { display: flex; }
.bt-items.vx-visual .bt-row:not(.vx-raw) .bt-main > textarea,
.bt-items.vx-visual .bt-row:not(.vx-raw) .bt-main > input[type="text"] { display: none; }
.vx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
button.vx-make, button.vx-add, button.vx-del, button.vx-ok { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--field-edge); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; }
button.vx-ok { border-color: transparent; background: var(--accent); color: var(--on-accent); }
button.vx-del { color: var(--error); }
button.vx-add { align-self: flex-start; }
.vx-tip { font-size: 13px; }
.vx-text { min-height: 44px; padding: 8px 12px; border: 1px solid var(--field-edge); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 15px; line-height: 30px; white-space: pre-wrap; overflow-wrap: anywhere; }
.vx-text:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
button.vx-chip { display: inline-flex; align-items: center; min-height: 28px; margin: 0 2px; padding: 0 10px; border: 1px dashed var(--accent); border-radius: 8px; background: var(--active-tint); color: var(--active-text); font-size: 15px; font-weight: 600; line-height: 20px; vertical-align: baseline; }
button.vx-chip.is-open { border-style: solid; }
.vx-pop { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-solid); }
.vx-pop[hidden] { display: none; }
.vx-h { margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 20px; }
.vx-f { display: flex; flex-direction: column; gap: 4px; }
.vx-list { display: flex; flex-direction: column; gap: 6px; }
.vx-li { display: flex; align-items: center; gap: 8px; }
.vx-li .vx-in { flex: 1 1 auto; min-width: 0; }
input.vx-ck { flex: none; width: 24px; min-height: 24px; height: 24px; padding: 0; accent-color: var(--accent); }
button.vx-rm { flex: none; width: 40px; padding: 0; border: 0; background: none; color: var(--error); font-size: 20px; line-height: 1; }
.vx-acts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

/* ---------- Live student view beside an open block (builder-live.js) ---------- */
.b-edit { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.b-edit > .b-form, .b-live { min-width: 0; }
.b-views { align-self: flex-start; gap: 0; padding: 3px; border: 1px solid var(--seg-edge); border-radius: 12px; background: var(--surface); }
button.b-view { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; font-size: 14px; font-weight: 600; }
button.b-view[aria-pressed="true"] { background: var(--active-tint); color: var(--active-text); }
.b-live { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-solid); }
.b-live-h, .b-live-ph { margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 20px; }
.b-live-probs { padding: 8px 12px; border-radius: 12px; background: var(--error-bg); color: var(--error); }
.b-live-probs ul { margin: 4px 0 0; padding-left: 20px; }
.b-live-probs .b-live-ph { color: inherit; }
.b-card:not(.b-editing) .b-line { cursor: pointer; }
@media (min-width: 1100px) {
  .b-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 16px; }
  .b-edit > .b-views { display: none; }
  .b-live { position: sticky; top: calc(var(--b-bar-h, 0px) + 12px); max-height: calc(100vh - var(--b-bar-h, 0px) - 24px); overflow: auto; }
}
@media (max-width: 1099.98px) {
  .has-js .b-edit[data-view="student"] > .b-form { display: none; }
  .has-js .b-edit:not([data-view="student"]) > .b-live { display: none; }
}

/* ---------- Undo / redo in the builder bar, the history page ---------- */
.b-steps { display: inline-flex; gap: 4px; }
.b-steps form { display: contents; }
button.b-step { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--field-edge); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; }
@media (max-width: 759.98px) {
  .b-step-t { display: none; }
  button.b-step { width: 40px; padding: 0; justify-content: center; }
}
.hist-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hist-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.hist-main { display: flex; flex-direction: column; min-width: 0; }
.hist-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hist-acts form { margin: 0; }
.bt-items.vx-visual .vx-syn { display: none; }