/* Sessionbook: phone, tablet and laptop; light and dark.
   Status colours match tracker.xlsx.
   Layout: phone (< 700px) one column, tabs at the bottom;
           tablet (700-1023px) wider content, two-column lists, tabs at the bottom;
           laptop (>= 1024px) the same five tabs in a left sidebar, wide content. */

:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #eef2f8;
  --ink: #0f172a;
  --muted: #5b6b82;
  --line: #e3e8f0;
  --brand-1: #1e3a8a;
  --brand-2: #312e81;
  --brand-glow: #3b82f6;
  --accent: #2563eb;
  --accent-soft: #e0e9ff;
  --on-accent: #ffffff;
  --amber-bg: #fde68a; --amber-ink: #78350f;
  --red-bg: #fecaca;   --red-ink: #7f1d1d;
  --st-not: #e5e7eb;   --st-not-ink: #374151;   --st-not-bar: #cbd5e1;
  --st-draft: #fef3c7; --st-draft-ink: #78350f;
  --st-ready: #dbeafe; --st-ready-ink: #1e3a8a;
  --st-fix: #fecaca;   --st-fix-ink: #7f1d1d;
  --st-rev: #ede9fe;   --st-rev-ink: #4c1d95;
  --st-taught: #dcfce7; --st-taught-ink: #14532d;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .05);
  --shadow-lift: 0 10px 30px rgba(15, 23, 42, .12);
  --nav-h: 66px;
  --side-w: 240px;
  --hero-1: #1e3a8a; --hero-2: #172554; --hero-3: #0f1a3d; --hero-4: #1d4ed8;
  --glow-a: rgba(59, 130, 246, .55); --glow-b: rgba(124, 58, 237, .45);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0f1d;
    --surface: #111a2c;
    --surface-2: #1a2438;
    --ink: #e6ebf4;
    --muted: #93a1b8;
    --line: #23304a;
    --brand-1: #172554;
    --brand-2: #1e1b4b;
    --brand-glow: #2563eb;
    --accent: #6ea8ff;
    --accent-soft: #1b2a4d;
    --on-accent: #0b1120;
    --amber-bg: #78350f; --amber-ink: #fde68a;
    --red-bg: #7f1d1d;   --red-ink: #fecaca;
    --st-not: #334155;   --st-not-ink: #e5e7eb;   --st-not-bar: #475569;
    --st-draft: #713f12; --st-draft-ink: #fef3c7;
    --st-ready: #1e3a8a; --st-ready-ink: #dbeafe;
    --st-fix: #7f1d1d;   --st-fix-ink: #fecaca;
    --st-rev: #4c1d95;   --st-rev-ink: #ede9fe;
    --st-taught: #14532d; --st-taught-ink: #dcfce7;
    --shadow: none;
    --shadow-lift: 0 10px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
.noscript { padding: 16px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ================================================================ splash */
.splash {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(600px 300px at 50% 35%, var(--glow-a), transparent 70%),
              linear-gradient(160deg, var(--hero-1), var(--hero-2) 75%);
  color: #fff;
}
.splash img { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); animation: breathe 1.8s ease-in-out infinite; }
.splash p { margin: 0; font-weight: 700; letter-spacing: .02em; opacity: .9; }
@keyframes breathe { 50% { transform: scale(1.05); } }

/* ================================================================ messages (no access etc.) */
.center {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px 16px; text-align: center;
}
.center h1 { margin: 8px 0 0; font-size: 1.6rem; }
.center p { margin: 0; color: var(--muted); max-width: 36ch; }
.center .uid { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; background: var(--surface-2); padding: 8px 10px; border-radius: 8px; word-break: break-all; }

/* ================================================================ landing (sign-in) */
.landing { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.hero {
  position: relative; overflow: hidden; color: #fff;
  padding: calc(36px + env(safe-area-inset-top)) 20px 84px;
  background:
    radial-gradient(700px 360px at 0% 0%, var(--glow-a), transparent 65%),
    radial-gradient(520px 320px at 100% 20%, var(--glow-b), transparent 60%),
    linear-gradient(165deg, var(--hero-1) 0%, var(--hero-2) 70%, var(--hero-3) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 75%);
}
.hero-in { position: relative; max-width: 560px; }
.brandmark { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.2rem; letter-spacing: .01em; }
.brandmark img { width: 48px; height: 48px; border-radius: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .15); }
.hero h1 { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; margin: 26px 0 12px; font-weight: 800; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #93c5fd, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: 1.05rem; opacity: .88; margin: 0 0 22px; max-width: 46ch; }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.features li { display: flex; gap: 12px; align-items: flex-start; }
.features .ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
}
.features .ic svg { width: 19px; height: 19px; }
.features b { display: block; font-size: .98rem; }
.features span { display: block; font-size: .88rem; opacity: .78; }

.mock { display: none; }
.mock-card {
  position: absolute; width: 250px; padding: 14px 16px; border-radius: 16px; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(2, 6, 23, .35);
  animation: float 7s ease-in-out infinite;
}
.mock-card .mt { font-weight: 700; font-size: .95rem; margin: 6px 0 8px; }
.mock-card .mr { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .78rem; opacity: .9; }
.mock-card .mid { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; opacity: .75; }
.mock-card .status { font-size: .7rem; }
.mock-card:nth-child(2) { animation-delay: -2.3s; }
.mock-card:nth-child(3) { animation-delay: -4.6s; }
@keyframes float { 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }

.signin { margin-top: -52px; padding: 0 16px calc(28px + env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: flex-start; position: relative; }
.signin-card {
  width: min(420px, 100%); background: var(--surface); border-radius: 22px; padding: 26px 24px 22px;
  box-shadow: 0 24px 60px rgba(2, 6, 23, .22); border: 1px solid var(--line);
}
.signin-card h2 { margin: 0 0 4px; font-size: 1.35rem; }
.signin-card p { margin: 0 0 18px; color: var(--muted); }
.signin-card .btn { width: 100%; min-height: 50px; font-size: 1rem; }
.signin-card .fine { margin: 16px 0 0; font-size: .8rem; display: flex; gap: 8px; align-items: center; }
.signin-card .fine svg { flex: none; width: 16px; height: 16px; }

@media (min-width: 960px) {
  .landing { grid-template-columns: minmax(0, 1.3fr) minmax(400px, 1fr); grid-template-rows: none; }
  .hero { padding: 56px clamp(40px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; min-height: 100dvh; }
  .hero-in { max-width: 640px; }
  .hero h1 { font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
  .signin {
    margin: 0; align-items: center; padding: 40px;
    background: radial-gradient(520px 320px at 50% 45%, rgba(59, 130, 246, .14), transparent 70%), var(--bg);
  }
}
@media (min-width: 960px) and (min-height: 720px) {
  .mock { display: block; position: relative; height: 170px; margin-top: 36px; }
  .mock-card { width: 225px; }
  .mock-card:nth-child(1) { left: 0; top: 22px; --r: -4deg; transform: rotate(-4deg); }
  .mock-card:nth-child(2) { left: 200px; top: 0; --r: 2deg; transform: rotate(2deg); z-index: 1; }
  .mock-card:nth-child(3) { left: 400px; top: 30px; --r: -1deg; transform: rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) { .mock-card, .splash img { animation: none; } }

/* ================================================================ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; text-decoration: none; color: var(--ink);
  font-weight: 700; white-space: nowrap; transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.small { min-height: 38px; padding: 0 13px; font-size: .88rem; border-radius: 10px; }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.btn.google { background: #fff; color: #1f2937; border-color: #dadce0; }
.btn.light { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; }

/* ================================================================ app shell */
.shell { min-height: 100dvh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); }
header.top {
  position: sticky; top: 0; z-index: 5; color: #fff;
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, .15);
}
header.top img { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
header.top .t { flex: 1; min-width: 0; }
header.top .t b { display: block; font-size: 1.05rem; letter-spacing: .01em; }
header.top .t span { display: block; font-size: .8rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net { font-size: .75rem; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.net::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.net.wait::before { background: #fbbf24; }
.net.off { background: var(--amber-bg); color: var(--amber-ink); }
.net.off::before { background: currentColor; }

main { padding: 14px 16px; max-width: 1180px; margin: 0 auto; }
h2.view { font-size: 1.4rem; margin: 6px 0 2px; letter-spacing: -.01em; }
.sub { color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
h3.sec { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 22px 0 10px; }

/* ---------------------------------------------------------------- tabs: bottom bar (phone, tablet) */
nav.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
nav.tabs .navbrand, nav.tabs .navfoot { display: none; }
nav.tabs .in { max-width: 640px; margin: 0 auto; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
nav.tabs button {
  height: var(--nav-h); border: 0; background: none; cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: .72rem; color: var(--muted); font-weight: 600;
}
nav.tabs button svg { width: 23px; height: 23px; }
nav.tabs button[aria-current="page"] { color: var(--accent); font-weight: 800; }
nav.tabs button[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
}

/* ---------------------------------------------------------------- tabs: left sidebar (laptop) */
@media (min-width: 1024px) {
  .shell { padding: 0 0 24px var(--side-w); }
  header.top { padding: 12px 32px; }
  header.top img { display: none; }
  main { padding: 22px 32px; }
  nav.tabs {
    top: 0; bottom: 0; right: auto; width: var(--side-w); padding: 0;
    border-top: 0; border-right: 1px solid var(--line); background: var(--surface);
    display: flex; flex-direction: column;
  }
  nav.tabs .navbrand {
    display: flex; align-items: center; gap: 12px; padding: 18px 20px; color: #fff;
    background: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  }
  nav.tabs .navbrand img { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
  nav.tabs .navbrand b { display: block; font-size: 1.05rem; }
  nav.tabs .navbrand span { display: block; font-size: .78rem; opacity: .8; }
  nav.tabs .in { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; margin: 0; max-width: none; }
  nav.tabs button {
    height: 46px; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 0 14px;
    border-radius: 12px; font-size: .95rem; color: var(--ink); font-weight: 600;
  }
  nav.tabs button:hover { background: var(--surface-2); }
  nav.tabs button svg { width: 21px; height: 21px; color: var(--muted); }
  nav.tabs button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  nav.tabs button[aria-current="page"] svg { color: var(--accent); }
  nav.tabs button[aria-current="page"]::before { top: 10px; bottom: 10px; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  nav.tabs .navfoot { display: block; margin-top: auto; padding: 16px 20px; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--line); }
}

/* ================================================================ filter chips */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 7px 14px; font-size: .86rem; cursor: pointer; color: var(--ink); font-weight: 600;
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip .n { opacity: .7; margin-left: 5px; font-weight: 500; }

/* ================================================================ session cards */
.list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .list.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cols .list { grid-template-columns: minmax(0, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--st, var(--line));
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 13px 15px; cursor: pointer;
  text-align: left; width: 100%; display: block; color: var(--ink);
  transition: transform .12s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card .r1 { display: flex; align-items: center; gap: 8px; }
.card .id { font-family: ui-monospace, Consolas, monospace; font-weight: 700; font-size: .86rem; color: var(--muted); }
.card .grow { flex: 1; }
.card .topic { margin: 5px 0 7px; font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.card .topic .pt { font-weight: 500; color: var(--muted); }
.card .topic.none { color: var(--muted); font-weight: 500; font-style: italic; }
.card .r3 { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .82rem; color: var(--muted); align-items: center; }
.tag { font-size: .72rem; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 700; }
.warn { background: var(--amber-bg); color: var(--amber-ink); padding: 1px 7px; border-radius: 6px; }
.bad { background: var(--red-bg); color: var(--red-ink); padding: 1px 7px; border-radius: 6px; }
.note-dot::before { content: "\270E"; margin-right: 3px; }

.status { font-size: .74rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.s-not { background: var(--st-not); color: var(--st-not-ink); }
.s-draft { background: var(--st-draft); color: var(--st-draft-ink); }
.s-ready { background: var(--st-ready); color: var(--st-ready-ink); }
.s-fix { background: var(--st-fix); color: var(--st-fix-ink); }
.s-rev { background: var(--st-rev); color: var(--st-rev-ink); }
.s-taught { background: var(--st-taught); color: var(--st-taught-ink); }

.empty { color: var(--muted); text-align: center; padding: 30px 8px; }

/* ================================================================ Up next */
.nexthero {
  position: relative; overflow: hidden; color: #fff; border-radius: 20px; padding: 20px;
  background: radial-gradient(420px 220px at 100% 0%, var(--glow-b), transparent 65%),
              linear-gradient(135deg, var(--brand-1), var(--hero-4));
  box-shadow: var(--shadow-lift); margin: 8px 0 6px;
}
.nexthero::after {
  content: ""; position: absolute; right: -40px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%;
  border: 28px solid rgba(255, 255, 255, .07);
}
.nexthero .k { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; opacity: .8; font-weight: 700; }
.nexthero .big { font-size: clamp(1.6rem, 6vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin: 2px 0 4px; }
.nexthero .when { opacity: .85; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; z-index: 1; }
.pill { font-size: .8rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .2); }
.pill.ok { background: rgba(34, 197, 94, .25); }
.pill.att { background: rgba(251, 191, 36, .3); }

.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; }
@media (min-width: 900px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slot-item { display: flex; flex-direction: column; gap: 8px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 2px; }

/* ================================================================ summary */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.stat .v { font-size: 1.65rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.stat .l { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.stat.alert { border-color: var(--amber-bg); }
.stat.alert .v { color: #d97706; }
.groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.group .gh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.group .gh b { font-size: 1rem; }
.group .gh span { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-2); margin: 12px 0 10px; }
.bar > i { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ================================================================ more */
.menu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); max-width: 720px; }
.menu > * { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.menu > *:last-child { border-bottom: 0; }
.menu .k { color: var(--muted); font-size: .85rem; text-align: right; }
.menu button { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; font-weight: 700; }
.menu a:hover, .menu button:hover { background: var(--surface-2); }

/* ================================================================ session sheet */
.sheet-back { position: fixed; inset: 0; background: rgba(2, 6, 23, .5); z-index: 20; animation: fade .15s ease; }
.sheet {
  position: fixed; inset: 0; z-index: 21; background: var(--bg);
  display: flex; flex-direction: column; animation: up .2s ease;
}
@media (min-width: 760px) {
  .sheet { left: auto; width: min(600px, 92vw); border-left: 1px solid var(--line); box-shadow: -20px 0 50px rgba(2, 6, 23, .25); animation: slide .2s ease; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-back { animation: none; } .card:hover { transform: none; } }

.sheet header {
  display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 12px 12px 18px; color: #fff;
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2));
}
.sheet header .t { flex: 1; min-width: 0; }
.sheet header .t b { display: block; font-family: ui-monospace, Consolas, monospace; opacity: .85; font-size: .85rem; }
.sheet header .t span { display: block; font-weight: 800; font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x { width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer; font-size: 1.4rem; }
.sheet .body { flex: 1; overflow-y: auto; padding: 4px 16px 24px; -webkit-overflow-scrolling: touch; }
.sheet footer {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
}
.sheet footer .msg { flex: 1; font-size: .85rem; color: var(--muted); }
.sheet footer .msg.err { color: var(--red-ink); background: var(--red-bg); padding: 6px 9px; border-radius: 8px; }

.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.field { margin: 10px 0 16px; }
.field:last-child { margin-bottom: 4px; }
.field > label, .field > .lbl { display: block; font-weight: 800; font-size: .9rem; margin-bottom: 7px; }
.field .hint { color: var(--muted); font-size: .8rem; margin-top: 5px; }
textarea, input[type="date"] {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
  padding: 10px 12px; min-height: 46px;
}
textarea:focus, input[type="date"]:focus { outline: 2px solid var(--accent); outline-offset: 0; background: var(--surface); }
textarea { min-height: 88px; resize: vertical; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  border: 1px solid var(--line); background: var(--surface); border-radius: 12px;
  min-height: 42px; padding: 0 14px; cursor: pointer; font-weight: 700; font-size: .9rem;
}
.seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

dl.kv { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 9px 12px; margin: 6px 0 0; font-size: .9rem; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; word-break: break-word; }
.pdf-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #0f172a; color: #fff; padding: 11px 18px; border-radius: 12px; z-index: 40; font-size: .9rem; font-weight: 600;
  max-width: calc(100% - 32px); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); animation: fade .2s ease;
}
@media (min-width: 1024px) { .toast { bottom: 28px; left: calc(50% + var(--side-w) / 2); } }
.footnote { color: var(--muted); font-size: .78rem; margin: 22px 0 6px; }

/* ================================================================ Deckshelf (faculty site): emerald */
html[data-site="deckshelf"] {
  --brand-1: #065f46; --brand-2: #134e4a;
  --hero-1: #065f46; --hero-2: #064e3b; --hero-3: #022c22; --hero-4: #0f766e;
  --glow-a: rgba(16, 185, 129, .5); --glow-b: rgba(20, 184, 166, .45);
  --accent: #047857; --accent-soft: #d1fae5;
}
@media (prefers-color-scheme: dark) {
  html[data-site="deckshelf"]:not([data-theme="light"]) {
    --brand-1: #064e3b; --brand-2: #042f2e; --hero-4: #0f766e;
    --accent: #34d399; --accent-soft: #10302a;
  }
}
html[data-site="deckshelf"] .hero h1 em { background: linear-gradient(90deg, #6ee7b7, #99f6e4); -webkit-background-clip: text; background-clip: text; }

/* ================================================================ Studyshelf (parents' site): teal */
html[data-site="studyshelf"] {
  --brand-1: #115e59; --brand-2: #134e4a;
  --hero-1: #0f766e; --hero-2: #115e59; --hero-3: #042f2e; --hero-4: #0891b2;
  --glow-a: rgba(45, 212, 191, .5); --glow-b: rgba(34, 211, 238, .4);
  --accent: #0f766e; --accent-soft: #ccfbf1;
}
@media (prefers-color-scheme: dark) {
  html[data-site="studyshelf"]:not([data-theme="light"]) {
    --brand-1: #134e4a; --brand-2: #042f2e; --hero-4: #0e7490;
    --accent: #2dd4bf; --accent-soft: #0f2f2d;
  }
}
html[data-site="studyshelf"] .hero h1 em { background: linear-gradient(90deg, #5eead4, #a5f3fc); -webkit-background-clip: text; background-clip: text; }
.regform { margin: 0 0 14px; }
.regform .field:first-child { margin-top: 0; }
.signin-card .fine.err { color: var(--red-ink); font-weight: 700; }
.signin-card .fine.err:empty { display: none; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 700; cursor: pointer; text-decoration: underline; }

/* Families (super admin): one row per item, a button per file to release */
.relrow { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.relrow:first-of-type { border-top: 0; }
.relrow .seg button[aria-pressed="true"] { font-weight: 800; }
.person .k.small { color: var(--muted); font-size: .85rem; }

/* ================================================================ badges, requests, forms */
.tabicon { display: inline-flex; }
.tabicon svg { width: 20px; height: 20px; }
nav.tabs button .tabicon svg { width: 23px; height: 23px; }
@media (min-width: 1024px) { nav.tabs button .tabicon svg { width: 21px; height: 21px; } }
.badge {
  position: absolute; top: 8px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: .68rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (min-width: 1024px) { .badge { position: static; margin-left: auto; } }

.reqs { display: grid; gap: 10px; }
@media (min-width: 900px) { .reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.req { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.req .rh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.req .rh .grow { flex: 1; }
.req .when { color: var(--muted); font-size: .78rem; }
.req .who { color: var(--muted); font-size: .82rem; margin-top: 6px; }
.req .txt { margin: 8px 0 0; white-space: pre-wrap; }
.req .reply { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: .9rem; white-space: pre-wrap; }
.req .row-actions { margin-top: 10px; padding: 0; }
details.older { margin-top: 10px; }
details.older summary { cursor: pointer; color: var(--muted); font-weight: 700; font-size: .88rem; margin-bottom: 10px; }

.input, .select {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
  padding: 10px 12px; min-height: 46px;
}
.input:focus, .select:focus { outline: 2px solid var(--accent); outline-offset: 0; background: var(--surface); }
.menu small { font-size: .78rem; }
.sheet footer .btn { flex: none; }
.box + .reqs { margin-top: 12px; }

/* ================================================================ supervisor desk (1.3) */
button.stat { text-align: left; cursor: pointer; font: inherit; color: inherit; }
button.stat:hover { box-shadow: var(--shadow-lift); }
h3.sec.small { margin-top: 6px; }
.muted { color: var(--muted); }
.okc { background: var(--st-taught); color: var(--st-taught-ink); padding: 1px 7px; border-radius: 6px; }

.attn { display: grid; gap: 8px; }
@media (min-width: 900px) { .attn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.attn-item {
  display: block; text-align: left; width: 100%; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--st-ready-ink);
  border-radius: 14px; padding: 11px 14px; box-shadow: var(--shadow);
}
button.attn-item { cursor: pointer; }
.attn-item.att { border-left-color: #f59e0b; }
.attn-item b { display: block; font-size: .92rem; }
.attn-item span { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px; word-break: break-word; }

.stream .who { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .84rem; color: var(--muted); }
.facts > span:first-child { font-weight: 700; color: var(--ink); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.toolbar .chips { padding: 0; }
.planblock { margin-bottom: 22px; }
.planblock > .group { margin-bottom: 10px; }
.tl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.tl-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); align-items: start; }
.tl-row:last-child { border-bottom: 0; }
.tl-row.past { opacity: .62; }
.tl-row.now { background: var(--accent-soft); opacity: 1; }
.tl-row.cancelled { background: repeating-linear-gradient(135deg, transparent 0 8px, var(--surface-2) 8px 16px); }
.tl-row.beyond { background: var(--amber-bg); color: var(--amber-ink); }
.tl-date b { display: block; font-size: .9rem; }
.tl-date span { display: block; font-size: .74rem; color: var(--muted); }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 999px;
  padding: 4px 10px 4px 8px; font: inherit; font-size: .8rem; cursor: pointer;
}
.pchip:hover { border-color: var(--accent); }
.pchip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--st, var(--muted)); flex: none; }
.pchip b { font-family: ui-monospace, Consolas, monospace; font-size: .76rem; }
.pchip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
@media (max-width: 480px) { .tl-row { grid-template-columns: 1fr; gap: 6px; } .pchip span { max-width: 16ch; } }

.visits { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.visit-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.visit-row:last-child { border-bottom: 0; }
.visit-row.now { background: var(--accent-soft); }
.vr-counts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 560px) { .visit-row { grid-template-columns: 1fr auto; } .vr-counts { grid-column: 1 / -1; grid-row: 2; } }

.whatif table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 6px; }
.whatif th { text-align: left; color: var(--muted); font-weight: 700; font-size: .78rem; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
.whatif td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.whatif tr.chg td { font-weight: 700; }
.whatif tr.chg td:last-child { color: var(--accent); }
.whatif small { display: block; font-weight: 600; margin-top: 2px; }
.req.off { opacity: .6; }
.req .txt.muted { margin-top: 4px; }
input[type="number"].input { max-width: 140px; }

/* ================================================================ planning assistant (1.4) */
.box.assist { margin-bottom: 14px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.box.assist .lbl { font-weight: 800; margin-bottom: 4px; }
.ai-answer { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); white-space: pre-wrap; }

/* ================================================================ programme switcher (2.0) */
/* The switcher sits in the top bar and in the sidebar's brand block; undo the
   tab-button and "span is a block" rules of those places. */
header.top .t .progswitch, nav.tabs .navbrand .progswitch {
  display: inline; height: auto; min-height: 0; width: auto; gap: 0; position: static;
  font: inherit; font-size: inherit; font-weight: inherit; color: inherit; background: none;
  border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
nav.tabs .navbrand .progswitch:hover { background: none; }
header.top .t .progswitch .caret, nav.tabs .navbrand .progswitch .caret { display: inline; font-size: .9em; opacity: 1; }
.menu button[aria-current="true"] { background: var(--accent-soft); }
.menu .soon { opacity: .5; cursor: not-allowed; font-weight: 700; }

/* ================================================================ programme cards and library (2.1) */
.progcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
@media (min-width: 820px) { .progcards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.progcard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; box-shadow: var(--shadow);
}
.progcard b { font-size: .98rem; }
.progcard span { font-size: .82rem; color: var(--muted); }
.progcard[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.progcard.soon { opacity: .5; cursor: not-allowed; box-shadow: none; }
.libsearch { width: 100%; max-width: 520px; margin: 0 0 10px; }
.libgroup h3.sec { margin-top: 18px; }
.libgrid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .libgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .libgrid { grid-template-columns: repeat(3, 1fr); } }
.libcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.libcard .r1 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .8rem; }
.libcard .topic { font-weight: 700; }
.libcard .row-actions { padding: 0; margin-top: 2px; flex-wrap: wrap; }
.libcard [aria-disabled="true"] { opacity: .55; cursor: default; }

/* ================================================================ automatic sync (2.2) */
.agentstrip {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: .85rem; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 0 0 14px; cursor: pointer;
}
.agentstrip .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none; }
.agentstrip.att .dot { background: #f59e0b; }
.agentlog { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; white-space: pre-wrap; padding: 8px 4px; color: var(--muted); }
.agentlog div { padding: 1px 0; }

/* ================================================================ alerts and corrections (2.3) */
.row-actions.quiet .input { width: 150px; flex: none; }

/* ================================================================ what's new (2.4) */
.newlist { display: flex; flex-direction: column; gap: 12px; }
.newdate { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px; }
.newday { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.newday .newdate { padding: 10px 14px 0; }
.newitem { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-top: 1px solid var(--line); padding: 10px 14px; cursor: pointer; }
.newday .newdate + .newitem { border-top: 0; }
.newitem:hover { background: var(--surface-2); }
.newitem .tag { flex: none; margin-top: 2px; }
.newtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.newtext .muted { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.newitem .when { flex: none; font-size: .8rem; color: var(--muted); }

/* ================================================================ search (2.5) */
header.top .searchbtn { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .12); color: inherit; cursor: pointer; }
header.top .searchbtn:hover { background: rgba(255, 255, 255, .22); }
header.top .searchbtn svg { width: 20px; height: 20px; }
.sheet .body > .input[type="search"] { width: 100%; margin-bottom: 10px; }
.searchres { margin-top: 10px; }
.searchlist { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.searchhit { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-top: 1px solid var(--line); padding: 10px 12px; cursor: pointer; }
.searchhit:first-child { border-top: 0; }
.searchhit:hover { background: var(--surface-2); }
.searchhit .tag { flex: none; margin-top: 2px; }

/* ================================================================ people and access (2.7) */
.people { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 900px) { .people { grid-template-columns: repeat(2, 1fr); } }
.person { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.person .rh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; word-break: break-all; }
.accessrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.accessrow.ended { opacity: .55; }
.accessrow .k { color: var(--muted); }

/* Messages (Studyshelf families): one conversation per family */
.thread { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.msg-b { max-width: min(560px, 86%); align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 9px 13px; box-shadow: var(--shadow); }
.msg-b.mine { align-self: flex-end; background: var(--accent-soft); border-color: transparent; border-radius: 16px 16px 4px 16px; }
.msg-b .mh { display: flex; align-items: baseline; gap: 8px; font-size: .78rem; color: var(--muted); margin-bottom: 2px; }
.msg-b .mh b { color: var(--ink); font-size: .82rem; }
.msg-b .mh .linkbtn { margin-left: auto; font-size: .78rem; font-weight: 600; }
.msg-b .mt { white-space: pre-wrap; overflow-wrap: anywhere; }
.sheet footer.composer { align-items: flex-end; }
.sheet footer.composer textarea { flex: 1; min-width: 0; resize: vertical; min-height: 48px; }

/* Timetables (Studyshelf families and batches) */
.agenda { display: flex; flex-direction: column; }
.agenda.box { padding: 4px 14px; }
.agrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.agrow:first-child { border-top: 0; }
.agrow .ag-what { flex: 1; min-width: 140px; }
.agrow .k { color: var(--muted); font-size: .85rem; }
.agrow.off .ag-what, .agrow.off .k { text-decoration: line-through; opacity: .7; }
.agrow.past { opacity: .55; }
.tag.t-test { background: var(--amber-bg); color: var(--amber-ink); }
.upcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.upcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.upcard.test { border-color: var(--amber-bg); }
.upcard .uk { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.upcard .uv { font-weight: 800; font-size: 1.05rem; margin-top: 3px; }
.upcard .us { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.timepair > div { display: flex; gap: 8px; }
.timepair > div .input { flex: 1; min-width: 0; }
.menu .linkbtn { flex: none; }

/* Attendance (step 4) */
.rollrow { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.rollrow:first-child { border-top: 0; padding-top: 2px; }
.tag.m-present { background: var(--st-taught); color: var(--st-taught-ink); }
.tag.m-late { background: var(--st-draft); color: var(--st-draft-ink); }
.tag.m-absent { background: var(--red-bg); color: var(--red-ink); }
.tag.m-excused { background: var(--st-rev); color: var(--st-rev-ink); }
.agrow select.input.small { width: auto; min-height: 34px; padding: 4px 8px; font-size: .85rem; }
.missnote { margin-top: 8px; font-size: .82rem; color: var(--accent); font-weight: 700; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
@media (min-width: 700px) { .sheet .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }