/* Staffinator - CEPP / University of Cumbria look.
   Change the variables below (and the logos in public/img/) and the whole site follows.
   Motion is deliberately small and fast (150-300 ms, transform/opacity only) and switches off completely for people who
   ask their system for reduced motion. Nothing here needs JavaScript. */
:root {
  /* CEPP palette: logo purple #BA00FF and cyan #00FFEC; darker purples are used where text sits on a colour (contrast >= 7:1). */
  --brand-dark: #3b0a57;      /* navigation bar, headings */
  --brand-deep: #2a0640;
  --brand: #8a00c2;           /* links, buttons */
  --brand-2: #a21fd6;         /* button gradient end */
  --brand-light: #f5e8fb;     /* panels, table headers */
  --accent: #ba00ff;          /* CEPP purple: header rule, highlights */
  --cyan: #00ffec;            /* CEPP cyan: active-tab underline */
  --ink: #1d2733;
  --muted: #5d6b79;
  --line: #d9e0e6;
  --bg: #f4f6f9;
  --surface: #fff;
  --surface-2: #fafbfc;       /* quiet panel / zebra */
  --hover: #f8effc;           /* row hover */
  --grey-bg: #e8edf1;
  --line-strong: #b9c5cd;     /* input and button borders */
  --line-faint: #edf1f4;      /* grid lines */
  --pop: #ffffff;
  --green: #1e7b34; --green-bg: #e3f4e7;
  --amber: #8a5a00; --amber-bg: #fff1d1;
  --red: #a4161a;   --red-bg: #fde4e4;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(30, 10, 50, .06), 0 2px 8px -4px rgba(59, 10, 87, .12);
  --shadow: 0 1px 2px rgba(30, 10, 50, .06), 0 10px 24px -12px rgba(59, 10, 87, .28);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: 160ms;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-underline-offset: 2px; transition: color var(--t); }
a:hover { color: var(--brand-dark); }
h1 { font-size: 1.65rem; margin: 0 0 .3rem; color: var(--brand-dark); letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; color: var(--brand-dark); }
.lede { color: var(--muted); margin: 0 0 1.25rem; max-width: 62rem; }

/* Soft background glow (fixed, no repaint on scroll) */
.page-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 420px at 92% -8%, rgba(186, 0, 255, .09), transparent 62%),
    radial-gradient(800px 380px at -6% 4%, rgba(0, 255, 236, .12), transparent 58%); }

/* Cross-page fade (supported browsers only; the header stays still while the page changes) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
header.site { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: 0s; }

/* Header: frosted white top bar carrying the University logo, dark gradient navigation bar underneath. Sticks while scrolling. */
header.site { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 0; box-shadow: 0 1px 0 var(--line), 0 6px 18px -12px rgba(59, 10, 87, .35); }
header.site::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--accent), var(--cyan) 60%, var(--accent)); background-size: 200% 100%; animation: sheen 14s linear infinite; }
header.site .topbar { max-width: 1280px; margin: 0 auto; padding: .5rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
header.site a.logos { display: flex; align-items: center; gap: 1.1rem; text-decoration: none; color: inherit; border-radius: 10px; transition: transform .25s var(--ease), box-shadow .25s; }
header.site a.logos:hover { transform: translateY(-1px); }
header.site a.logos:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
header.site .logo-wide { height: 62px; width: auto; display: block; }
header.site .logo-cepp { height: 66px; width: auto; display: block; transition: transform .4s var(--ease); }
header.site .logos:hover .logo-cepp { transform: rotate(-6deg) scale(1.06); }
header.site .title { font-weight: 650; line-height: 1.15; color: var(--brand-dark); padding-left: 1.1rem; border-left: 2px solid var(--line); font-size: 1.4rem; }
header.site .title small { display: block; font-weight: 400; color: var(--muted); font-size: .76rem; }
header.site .who { font-size: .88rem; color: var(--ink); display: flex; align-items: center; gap: .6rem; }
header.site .who form { display: inline; margin: 0; }
header.site .who-name { font-weight: 600; }
button.ghost { background: transparent; color: var(--brand); border: 1px solid transparent; padding: .3rem .7rem; box-shadow: none; }
button.ghost:hover { background: var(--brand-light); border-color: #e3c4f2; box-shadow: none; filter: none; }
header.site nav.mainnav { background: linear-gradient(90deg, var(--brand-deep), var(--brand-dark) 55%, #4b0f6e); }
header.site nav.mainnav .navin { max-width: 1280px; margin: 0 auto; padding: 0 .6rem; display: flex; gap: .1rem; flex-wrap: wrap; }
header.site nav.mainnav a { position: relative; color: rgba(255, 255, 255, .92); text-decoration: none; padding: .62rem .85rem; font-size: .92rem; transition: color var(--t), background var(--t); }
header.site nav.mainnav a::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--cyan); transform: scaleX(0); transform-origin: center; transition: transform .22s var(--ease); }
header.site nav.mainnav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
header.site nav.mainnav a:hover::after { transform: scaleX(.55); }
header.site nav.mainnav a.active { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600; }
header.site nav.mainnav a.active::after { transform: scaleX(1); }
@keyframes sheen { to { background-position: 200% 0; } }

/* Dropdown menus (<details class="menu">): open/close with a short fade-slide */
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; padding: .3rem .75rem; border: 1px solid #e0c3ef; border-radius: 999px; background: var(--surface); color: var(--brand-dark); font-weight: 600; font-size: .85rem; transition: background var(--t), box-shadow var(--t); user-select: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary::after { content: ""; display: inline-block; width: .38rem; height: .38rem; margin-left: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
details.menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
details.menu > summary:hover { background: var(--brand-light); }
details.menu[open] > summary { box-shadow: 0 0 0 3px rgba(138, 0, 194, .15); }
.menu-panel { position: absolute; right: 0; top: calc(100% + .45rem); z-index: 70; width: min(30rem, 92vw); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .8rem; animation: pop .16s var(--ease); transform-origin: top right; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-note { margin: 0 0 .6rem; font-size: .8rem; color: var(--muted); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.menu-cols form { min-width: 0; }
.menu-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .25rem; }
.menu-scroll { max-height: 15rem; overflow-y: auto; margin: 0 -.25rem; padding: 0 .25rem; }
.menu-item { display: block; width: 100%; text-align: left; background: transparent; color: var(--ink); border: 0; border-radius: 6px; padding: .3rem .5rem; font-size: .88rem; box-shadow: none; transition: background var(--t), padding-left var(--t) var(--ease); }
.menu-item small { display: block; color: var(--muted); font-size: .72rem; }
.menu-item:hover { background: var(--brand-light); color: var(--brand-dark); padding-left: .8rem; filter: none; box-shadow: none; transform: none; }

/* "Viewing as" bar: impossible to miss, one click back */
.viewas-bar { position: sticky; top: 0; z-index: 90; color: #fff; background: repeating-linear-gradient(-45deg, #5a1a00 0 14px, #6d2400 14px 28px); border-bottom: 3px solid #ffb020; animation: slide-down .25s var(--ease); }
.viewas-in { max-width: 1280px; margin: 0 auto; padding: .45rem 1rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.viewas-eye { font-size: 1.2rem; }
.viewas-text { flex: 1; min-width: 14rem; }
.viewas-text strong { color: #ffd37a; font-size: 1.02rem; }
.viewas-sub { display: block; font-size: .78rem; opacity: .85; }
.viewas-bar form { margin: 0; }
.viewas-back { background: var(--surface); color: #5a1a00; font-weight: 700; border-radius: 999px; padding: .4rem 1rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.viewas-back:hover { background: #ffe9b8; filter: none; }
.is-viewing header.site { top: 3.1rem; }   /* sits just under the viewing bar */
body.is-viewing::after { content: ""; position: fixed; inset: 0; border: 4px solid #ffb020; pointer-events: none; z-index: 120; opacity: .85; }
@keyframes slide-down { from { transform: translateY(-100%); } to { transform: none; } }

/* Signed-out pages: centred square logo above the card */
/* Signed-out pages (sign in, two-step code, password): the system's name is the hero. The logos sit small and quiet above it, a
   heartbeat line draws itself under the name (once; still under reduced motion), and the subheading sits underneath. */
.guest-brand { text-align: center; padding: clamp(1.5rem, 6vh, 3.5rem) 1rem 0; animation: rise .4s var(--ease) both; }
.guest-brand .guest-logos { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; padding: .45rem .9rem; margin-bottom: clamp(1rem, 3vh, 1.75rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); }
.guest-brand .logo-square { height: 44px; width: auto; display: block; }
.guest-brand .logo-cepp-full { height: 44px; width: auto; display: block; }
.guest-brand .guest-logo-rule { width: 1px; height: 28px; background: var(--line); }
.guest-brand .guest-name { margin: 0; font-size: clamp(3rem, 9vw, 5.25rem); line-height: 1; font-weight: 800; letter-spacing: .14em; padding-left: .14em;
  color: var(--brand-dark); background: linear-gradient(100deg, var(--brand-deep) 0%, var(--brand) 55%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.guest-brand .guest-ecg { display: block; width: min(320px, 80vw); height: 40px; margin: .35rem auto .25rem; overflow: visible; }
.guest-brand .guest-ecg path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; animation: ecg-draw 1.6s .25s var(--ease) both; }
@keyframes ecg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.guest-brand .guest-sub { margin: 0; color: var(--muted); font-size: clamp(.95rem, 2.2vw, 1.1rem); letter-spacing: .01em; }
html[data-theme=dark] .guest-brand .guest-name { background: linear-gradient(100deg, #e9c8ff 0%, #c77dff 55%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; }
html[data-theme=dark] .guest-brand .guest-logos { background: #fff; border-color: transparent; }   /* the logos are drawn for a white ground */
@media (prefers-reduced-motion: reduce) { .guest-brand .guest-ecg path { animation: none; } }
@media (max-width: 520px) { .guest-brand .logo-square, .guest-brand .logo-cepp-full { height: 34px; } }

main { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
/* Content eases in (first few blocks, staggered) */
main > * { animation: rise .38s var(--ease) both; }
main > *:nth-child(2) { animation-delay: .04s; } main > *:nth-child(3) { animation-delay: .08s; } main > *:nth-child(4) { animation-delay: .12s; }
main > *:nth-child(5) { animation-delay: .16s; } main > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); transition: box-shadow .2s, border-color .2s, transform .2s var(--ease); }
.card:hover { box-shadow: var(--shadow); border-color: #d9c4e6; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid > .card { margin-bottom: 0; }
.flash { background: var(--green-bg); color: var(--green); border: 1px solid #b9dfc2; padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; animation: slide-in .3s var(--ease); }
.errors { background: var(--red-bg); color: var(--red); border: 1px solid #f3b7b7; padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; animation: slide-in .3s var(--ease); }
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .92rem; }
th, td { text-align: left; padding: .45rem .65rem; border-bottom: 1px solid #e9eef2; vertical-align: top; }
th { background: var(--brand-light); color: var(--brand-dark); font-weight: 600; position: sticky; top: 0; z-index: 1; }
tbody tr { transition: background var(--t); }
tbody tr:hover { background: var(--hover); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--surface); }
.table-wrap table { border-radius: var(--radius); }

.badge { display: inline-block; padding: .08rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.badge.green { background: var(--green-bg); color: var(--green); }
.badge.amber { background: var(--amber-bg); color: var(--amber); }
.badge.red { background: var(--red-bg); color: var(--red); }
.badge.grey { background: var(--grey-bg); color: var(--muted); }
.badge.blue { background: var(--brand-light); color: var(--brand-dark); }
.tag { display: inline-block; padding: 0 .4rem; border-radius: 4px; font-size: .7rem; font-weight: 600; letter-spacing: .02em; }
.tag-gantt { background: #e6f1ff; color: #12437e; }
.tag-manual { background: #fff1d1; color: #7a4d00; }
.srcline { margin-top: .15rem; line-height: 1.25; }
.forecast { font-style: italic; opacity: .85; }

form.inline { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-bottom: 1rem; }
label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .15rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  font: inherit; padding: .4rem .55rem; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); min-width: 9rem; transition: border-color var(--t), box-shadow var(--t); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(138, 0, 194, .16); }
textarea { width: 100%; min-height: 4rem; }
button, .btn { font: inherit; background: linear-gradient(180deg, var(--brand-2), var(--brand)); color: #fff; border: 0; border-radius: 7px; padding: .45rem .95rem; cursor: pointer; text-decoration: none; display: inline-block;
  box-shadow: 0 1px 2px rgba(59, 10, 87, .3), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform var(--t) var(--ease), box-shadow var(--t), filter var(--t); }
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(59, 10, 87, .55), inset 0 1px 0 rgba(255, 255, 255, .18); filter: brightness(1.06); color: #fff; }
button:active, .btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
button:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(59, 10, 87, .55); }
button.secondary, .btn.secondary { background: var(--surface); color: var(--brand-dark); border: 1px solid var(--line-strong); box-shadow: none; }
button.secondary:hover, .btn.secondary:hover { background: var(--brand-light); color: var(--brand-dark); box-shadow: none; }
button.danger { background: linear-gradient(180deg, #c42a2e, var(--red)); }
.exports { display: flex; gap: .4rem; align-items: center; margin: .25rem 0 .75rem; font-size: .85rem; color: var(--muted); }
.exports a { padding: .2rem .65rem; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; background: var(--surface); transition: background var(--t), border-color var(--t); }
.exports a:hover { background: var(--brand-light); border-color: #d9c4e6; }

/* Pill tabs and filter chips */
.subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.subnav a { padding: .3rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--brand); text-decoration: none; font-size: .9rem; transition: background var(--t), color var(--t), transform var(--t) var(--ease), box-shadow var(--t); }
.subnav a:hover { background: var(--brand-light); transform: translateY(-1px); }
.subnav a.active { background: linear-gradient(180deg, var(--brand-2), var(--brand)); border-color: var(--brand); color: #fff; font-weight: 600; box-shadow: 0 3px 10px -4px rgba(59, 10, 87, .6); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.chip { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: .88rem; color: var(--ink); transition: background var(--t), border-color var(--t), box-shadow var(--t); user-select: none; margin: 0; }
.chip:hover { background: var(--brand-light); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); font-weight: 600; box-shadow: 0 0 0 2px rgba(138, 0, 194, .12); }
.chip:has(input:checked)::before { content: "\2713"; font-weight: 700; color: var(--brand); }
.chip:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* Collapsible block (<details class="fold">) with animated open/close (Chromium/Edge; elsewhere it simply opens) */
details.fold { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 1rem; box-shadow: var(--shadow-sm); interpolate-size: allow-keywords; }
details.fold > summary { cursor: pointer; padding: .65rem 1rem; font-weight: 600; color: var(--brand-dark); list-style: none; display: flex; align-items: center; gap: .6rem; border-radius: var(--radius); transition: background var(--t); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: ""; width: .5rem; height: .5rem; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); transition: transform .25s var(--ease); flex: none; }
details.fold[open] > summary::before { transform: rotate(45deg); }
details.fold > summary:hover { background: var(--brand-light); }
details.fold > summary .sub { font-weight: 400; color: var(--muted); font-size: .85rem; margin-left: auto; }
details.fold .fold-body { padding: .2rem 1rem 1rem; }
details.fold::details-content { block-size: 0; overflow: clip; transition: block-size .28s var(--ease), content-visibility .28s allow-discrete; }
details.fold[open]::details-content { block-size: auto; }

.login { max-width: 400px; margin: clamp(1.25rem, 4vh, 2.25rem) auto 2.5rem; padding: 1.5rem 1.6rem 1.1rem; }
.login .login-h { margin: 0 0 .9rem; font-size: 1.15rem; }
.login .login-go button { width: 100%; padding: .65rem 1rem; font-size: 1rem; }
.note { font-size: .85rem; color: var(--muted); }
.warn { color: var(--amber); }
.sev-warn { border-left: 4px solid var(--amber); } .sev-info { border-left: 4px solid var(--brand); } .sev-red { border-left: 4px solid var(--red); }
.mono { font-family: Consolas, "Courier New", monospace; }
.qr-box { display: inline-block; max-width: 100%; margin: .5rem 0 1rem; padding: .35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.qr-box svg { display: block; width: 200px; height: 200px; max-width: 100%; }

/* Pagination */
.pager { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .9rem 0; font-size: .9rem; }
.pager .pager-info { color: var(--muted); margin-right: .5rem; }
.pager .pager-btn { display: inline-block; min-width: 2rem; text-align: center; padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--brand); text-decoration: none; transition: background var(--t), transform var(--t) var(--ease); }
.pager a.pager-btn:hover { background: var(--brand-light); transform: translateY(-1px); }
.pager .pager-btn.current { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pager .pager-btn.disabled { color: var(--muted); background: #f3f3f3; }
.pager .pager-gap { color: var(--muted); padding: 0 .25rem; }
.qr-fallback { margin: 0 0 1rem; }
.qr-fallback summary { cursor: pointer; color: var(--brand); }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .45rem .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .4rem; transition: border-color var(--t), box-shadow var(--t); }
ul.plain li:hover { border-color: #d9c4e6; box-shadow: var(--shadow-sm); }
.kv { display: grid; grid-template-columns: 11rem 1fr; gap: .25rem .75rem; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }

/* Cohort admin table */
.cohort-table th.group { text-align: center; border-bottom: 2px solid #e3c4f2; }
.cohort-table input[type=date] { min-width: 8.6rem; }

/* Tooltips: <span data-tip="text"> is shown by public/js/tips.js in ONE floating box (#tt-tipbox) that flips and stays inside the window.
   Hover tips and pop-ups ALWAYS show. The "i" button in the header only shows/hides the non-vital explanatory notes (class "hint");
   the default is off (<html data-tips="on"> when on). */
#tt-tipbox { position: fixed; z-index: 310; max-width: min(24rem, calc(100vw - 16px)); background: #241033; color: #fff; padding: .3rem .55rem; border-radius: 6px; font-size: .76rem; font-weight: 400; line-height: 1.35; text-align: left; white-space: normal; overflow-wrap: anywhere; pointer-events: none; box-shadow: var(--shadow); }
#tt-tipbox[hidden] { display: none; }
html:not([data-tips="on"]) .hint { display: none !important; }

/* ============ Timetable grid (like the original Excel calendar: months across, days down) ============ */
.tt-block { margin-bottom: 1.1rem; }
.tt-keydates { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin: 0 0 .7rem; }
.tt-kd { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .25rem .6rem; font-size: .82rem; line-height: 1.25; }
.tt-kd b { display: block; font-size: .95rem; color: var(--brand-dark); }
.tt-kd span { color: var(--muted); font-size: .72rem; }
.tt-legend { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: .3rem 0 .6rem; font-size: .78rem; color: var(--muted); }
.tt-legend i { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; margin-right: .3rem; border: 1px solid rgba(0, 0, 0, .12); }
.tt-legend i.k-f2f { background: #cfe3ff; } .tt-legend i.k-online { background: #e5d4f7; } .tt-legend i.k-ind { background: #bff0c4; } .tt-legend i.k-form { background: #fff3b8; }
.tt-legend i.k-sum { background: #ffd94a; } .tt-legend i.k-resub { background: #9de3d8; } .tt-legend i.k-resub2 { background: #2f9d8f; } .tt-legend i.k-tpr { background: #ffc58a; }
.tt-legend i.k-bh { background: #ff9d9d; } .tt-legend i.k-we { background: #aeb7c2; } .tt-legend i.k-mcp { background: #1f3a8a; } .tt-legend i.k-mcb { background: #c7d2fe; } .tt-legend i.k-upab { background: #f6a8d0; }
.ttwrap { overflow: auto; max-height: 76vh; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
table.tt { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: .7rem; table-layout: fixed; }
table.tt th, table.tt td { padding: 0; border-right: 1px solid var(--line-faint); border-bottom: 1px solid var(--line-faint); height: 1.62rem; text-align: left; vertical-align: middle; background: none; position: static; transition: none; }
table.tt tbody tr:hover { background: none; }
table.tt thead th { position: sticky; top: 0; z-index: 3; background: linear-gradient(180deg, #4b0f6e, var(--brand-dark)); color: #fff; font-size: .74rem; text-align: center; height: 2rem; border-right: 1px solid rgba(255, 255, 255, .15); }
table.tt thead th small { display: block; font-weight: 400; opacity: .75; font-size: .62rem; line-height: 1; }
table.tt th.tt-day { position: sticky; left: 0; top: auto; z-index: 2; background: var(--brand-light); color: var(--brand-dark); width: 2.1rem; min-width: 2.1rem; text-align: center; font-weight: 600; border-right: 2px solid #e3c4f2; }
table.tt thead th.tt-day { z-index: 4; top: 0; background: var(--brand-dark); color: #fff; }
table.tt td.tt-c { width: 6.7rem; min-width: 6.7rem; padding: 0 .25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #26323d; }
table.tt td.tt-c .d { color: rgba(0, 0, 0, .38); font-size: .62rem; margin-right: .3rem; }
table.tt td.tt-c.has { cursor: default; transition: filter .12s; }
table.tt td.tt-c.has:hover { filter: brightness(.94); outline: 2px solid rgba(59, 10, 87, .55); outline-offset: -2px; position: relative; z-index: 1; }
table.tt td.k-none { background: repeating-linear-gradient(45deg, #f3f4f6 0 4px, #e9ecef 4px 8px); }
table.tt td.k-we { background: #aeb7c2; color: #3f4a57; }
table.tt td.k-f2f { background: #cfe3ff; color: #0b2e66; }
table.tt td.k-online { background: #e5d4f7; color: #3b0a57; }
table.tt td.k-ind { background: #bff0c4; color: #0d4a17; font-weight: 700; }
table.tt td.k-l6 { background: #8be39a; color: #0d4a17; font-weight: 700; }
table.tt td.k-form { background: #fff3b8; color: #4a3b00; font-weight: 600; }
table.tt td.k-sum { background: #ffd94a; color: #3d2f00; font-weight: 700; }
table.tt td.k-resub { background: #9de3d8; color: #05433b; font-weight: 600; }
table.tt td.k-resub2 { background: #2f9d8f; color: #fff; font-weight: 600; }
table.tt td.k-tpr { background: #ffc58a; color: #5a2b00; }
table.tt td.k-bh { background: #ff9d9d; color: #5c0000; font-weight: 600; }
table.tt td.k-mcp { background: #1f3a8a; color: #fff; font-weight: 700; }
table.tt td.k-mcb { background: #c7d2fe; color: #1e1b4b; font-weight: 600; }
table.tt td.k-upab { background: #f6a8d0; color: #6b0f3a; font-weight: 700; }
/* a teaching day that is also an assessment day: teaching colour stays, the assessment sits on it as a chip */
table.tt td.k-mix { box-shadow: inset -4px 0 0 #f2b705; }
table.tt td.tt-c .chip-a { display: inline-block; margin-left: .3rem; padding: 0 .3rem; border-radius: 4px; font-size: .62rem; font-weight: 700; line-height: 1.35; border: 1px solid rgba(0, 0, 0, .25); vertical-align: 1px; }
table.tt td.tt-c .chip-a.k-form { background: #fff3b8; color: #4a3b00; }
table.tt td.tt-c .chip-a.k-sum { background: #ffd94a; color: #3d2f00; }
table.tt td.tt-c .chip-a.k-resub { background: #9de3d8; color: #05433b; }
table.tt td.tt-c .chip-a.k-resub2 { background: #2f9d8f; color: #fff; }
table.tt td.tt-c .chip-a.k-mcp { background: #1f3a8a; color: #fff; }
table.tt td.tt-c .chip-a.k-mcb { background: #c7d2fe; color: #1e1b4b; }
table.tt td.tt-c .chip-a.k-upab { background: #f6a8d0; color: #6b0f3a; }
/* TPR window = ONE block: orange wash and side bars on every day of the window (weekends too), top / bottom caps at its ends */
table.tt td.tpr-in { border-left: 3px solid #e8590c; border-right: 3px solid #e8590c; }
table.tt td.tpr-in.tpr-top { border-top: 2px solid #e8590c; }
table.tt td.tpr-in.tpr-bot { border-bottom: 2px solid #e8590c; }
table.tt td.tpr-in.k-blank { background-color: #ffe0bd; }
table.tt td.tpr-in.k-we { background-color: #d9a56a; }
/* the label "TPR n" is drawn down the WHOLE block (--run = number of cells in this month column), big and bold, not on one small cell */
table.tt td.tpr-in { position: relative; overflow: visible; }
table.tt td.tpr-in .tpr-tag { position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--run, 1) * 100%); z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: visible; font-weight: 800; font-size: clamp(.8rem, 1.05vw, 1.15rem); letter-spacing: .06em; color: #7a2e00; text-shadow: 0 0 3px rgba(255, 255, 255, .9), 0 0 6px rgba(255, 255, 255, .7); white-space: nowrap; }
/* the "Assessment schedule" strip under the month headers (like the top of the original Excel timetable) */
table.tt thead tr.tt-asm th, table.tt thead tr.tt-asm td { position: static; background: var(--surface-2); color: #3d2f00; text-align: left; vertical-align: top; height: auto; padding: .2rem .25rem; border-right: 1px solid #efe3a8; border-bottom: 2px solid #f2b705; font-weight: 400; }
table.tt thead tr.tt-asm th.tt-day { position: sticky; left: 0; background: #f2b705; color: #3d2f00; font-size: .58rem; line-height: 1.1; font-weight: 700; z-index: 4; }
table.tt .asm-chip { display: block; margin: 0 0 .15rem; padding: 0 .3rem; border-radius: 4px; font-size: .62rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid rgba(0, 0, 0, .18); font-weight: 600; }
table.tt .asm-chip b { margin-right: .25rem; }
table.tt .asm-chip.k-form { background: #fff3b8; color: #4a3b00; }
table.tt .asm-chip.k-sum { background: #ffd94a; color: #3d2f00; }
table.tt .asm-chip.k-resub { background: #9de3d8; color: #05433b; }
table.tt .asm-chip.k-resub2 { background: #2f9d8f; color: #fff; }
table.tt td.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.tt-note { font-size: .82rem; color: var(--muted); margin: .4rem 0 0; }

/* ============ Mini calendars (TPR windows) ============ */
.cal-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); margin: .4rem 0 1rem; }
.cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .55rem .6rem; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s var(--ease); }
.cal:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.cal.has-tpr { border-color: #f5b36b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .15), var(--shadow-sm); }
.cal-h { font-weight: 650; color: var(--brand-dark); font-size: .9rem; margin-bottom: .3rem; display: flex; justify-content: space-between; align-items: baseline; }
.cal-h small { font-weight: 400; color: var(--muted); font-size: .7rem; }
.cal-w { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-w .dow { font-size: .62rem; color: var(--muted); padding-bottom: 2px; }
.cal-d { position: relative; font-size: .72rem; line-height: 1.7; border-radius: 5px; color: #26323d; background: #f6f8fa; transition: transform .12s var(--ease); }
.cal-d.pad { background: none; }
.cal-d.we { color: #3f4a57; background: #b4bcc7; }
.cal-d.teach { background: #d8e8ff; color: #0b2e66; }
.cal-d.teach.online { background: #e9dbf8; color: #3b0a57; }
.cal-d.bh { background: #ffc9c9; color: #7a0000; }
.cal-d.tpr { background: #ffa94d; color: #4a2300; font-weight: 700; }
.cal-d.tpr { border-radius: 0; box-shadow: 2px 0 0 0 #ffa94d, 0 2px 0 0 #ffa94d, 2px 2px 0 0 #ffa94d; }
.cal-d.tpr.tpr-r { box-shadow: 0 2px 0 0 #ffa94d; }
.cal-d.tpr.tpr-b { box-shadow: 2px 0 0 0 #ffa94d; }
.cal-d.tpr.tpr-r.tpr-b { box-shadow: none; }
.cal-d.tpr.tpr-l.tpr-t { border-top-left-radius: 7px; }
.cal-d.tpr.tpr-r.tpr-t { border-top-right-radius: 7px; }
.cal-d.tpr.tpr-l.tpr-b { border-bottom-left-radius: 7px; }
.cal-d.tpr.tpr-r.tpr-b { border-bottom-right-radius: 7px; }
.cal-d.tpr.we { background: #e69b4d; color: #4a2300; }
.cal-d.tpr:hover { z-index: 2; filter: brightness(.95); }
.cal-d.today { outline: 2px solid var(--accent); outline-offset: 0; }
/* TPR cells are taller so the label can sit under the day number; it is drawn across every day of the week-row of the window */
.cal-d.tpr { min-height: 2.5rem; line-height: 1.5; padding-top: .05rem; }
.cal-tag { position: absolute; left: 0; bottom: 2px; width: calc(var(--run, 1) * 100% + (var(--run, 1) - 1) * 2px); height: 1.2rem; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3; white-space: nowrap; font-size: .82rem; font-weight: 800; letter-spacing: .05em; color: #5a2300; }

/* ============ Marking dates ============ */
.mk-top { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: end; margin-bottom: .6rem; }
.mk-sec { margin: 1.1rem 0 .4rem; display: flex; align-items: baseline; gap: .6rem; }
.mk-sec h2 { margin: 0; }
.mk-sec .count { color: var(--muted); font-size: .88rem; }
table.mk td, table.mk th { vertical-align: middle; }
table.mk tr.band-red > td:first-child { box-shadow: inset 5px 0 0 var(--red); }
table.mk tr.band-amber > td:first-child { box-shadow: inset 5px 0 0 #e0a100; }
table.mk tr.band-green > td:first-child { box-shadow: inset 5px 0 0 #2fa04a; }
table.mk tr.band-red { background: #fff6f6; } table.mk tr.band-amber { background: #fffaf0; }
.due-pill { display: inline-block; min-width: 5.6rem; text-align: center; padding: .18rem .6rem; border-radius: 999px; font-weight: 700; font-size: .8rem; }
.due-pill.red { background: var(--red-bg); color: var(--red); }
.due-pill.amber { background: var(--amber-bg); color: var(--amber); }
.due-pill.green { background: var(--green-bg); color: var(--green); }
.due-pill.grey { background: var(--grey-bg); color: var(--muted); }
.due-pill.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(164, 22, 26, .35); } 50% { box-shadow: 0 0 0 6px rgba(164, 22, 26, 0); } }
.mk-open { white-space: nowrap; font-weight: 600; text-decoration: none; padding: .2rem .6rem; border-radius: 999px; border: 1px solid #e0c3ef; background: var(--surface); display: inline-block; transition: background var(--t), transform var(--t) var(--ease); }
.mk-open:hover { background: var(--brand-light); transform: translateX(2px); }
.mk-open::after { content: " \203A"; }
.na { color: #9aa5b1; }
.stat-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 1rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .9rem; min-width: 7.5rem; box-shadow: var(--shadow-sm); }
.stat b { display: block; font-size: 1.35rem; line-height: 1.1; }
.stat span { color: var(--muted); font-size: .78rem; }
.stat.red b { color: var(--red); } .stat.amber b { color: #a36b00; } .stat.green b { color: var(--green); }

@media (max-width: 700px) {
  header.site .logo-wide, header.site .logo-cepp { height: 44px; }
  header.site .title { display: none; }
  .kv { grid-template-columns: 1fr; }
  th, td { padding: .4rem; }
  .menu-cols { grid-template-columns: 1fr; }
}
@media print {
  header.site, .exports, form.inline, .viewas-bar, .page-glow { display: none; }
  body { background: var(--surface); }
  main > * { animation: none; }
}
/* People who ask for less motion get none */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* assessment timetable (one row per assessment, one column per attempt) */
table.asm { table-layout: fixed; width: 100%; min-width: 640px; }
table.asm col.asm-c-mod { width: 30%; }
table.asm th, table.asm td { vertical-align: top; overflow-wrap: anywhere; }
table.asm .asm-cell { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .35rem; }
.asm-date { display: inline-block; margin: .1rem .3rem .1rem 0; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid rgba(0, 0, 0, .15); white-space: nowrap; }
.asm-date.k-form { background: #fff3b8; color: #4a3b00; }
.asm-date.k-sum { background: #ffd94a; color: #3d2f00; }
.asm-date.k-resub { background: #9de3d8; color: #05433b; }
.asm-date.k-resub2 { background: #2f9d8f; color: #fff; }
.tt-legend i.k-mix { background: #cfe3ff; box-shadow: inset -4px 0 0 #f2b705; }
table.tt thead tr.tt-asm th.tt-day { top: auto; }

/* ---- marking sheet ---- */
table.ms { font-size: .88rem; }
table.ms tbody { border-top: 2px solid #e1d3ea; }
table.ms td { vertical-align: top; }
table.ms input.ms-num { width: 5.2rem; min-width: 0; }
table.ms select { min-width: 0; max-width: 11rem; }
table.ms input[type=date] { min-width: 0; }
table.ms input[type=text] { min-width: 0; width: 11rem; }
table.ms tbody.ms-fail > tr:first-child > td:first-child { box-shadow: inset 5px 0 0 var(--red); }
table.ms tbody.ms-mp { background: #fff3f3; }
table.ms tbody.ms-mp > tr:first-child > td:first-child { box-shadow: inset 5px 0 0 #7a0c0c; }
table.ms .ms-raw { font-size: 1.1rem; }
table.ms .ms-check { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink); font-size: .8rem; margin: .25rem 0 0; cursor: pointer; }
table.ms tr.ms-notes-row > td { padding-top: 0; border-bottom: 0; }
details.ms-notes > summary { cursor: pointer; font-size: .82rem; color: var(--brand); list-style: revert; }
.ms-notes-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: .35rem; }
.ms-notes-grid textarea { min-height: 3.2rem; }
.ms-actions { position: sticky; bottom: 0; z-index: 5; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); padding: .5rem 0; display: flex; gap: .75rem; align-items: center; }

/* ---- notifications ---- */
a.bell { display: inline-block; background: #7a0c0c; color: #fff; font-size: .78rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; text-decoration: none; margin-right: .5rem; }
a.bell:hover { filter: brightness(1.15); color: #fff; }
ul.notes-list { list-style: none; margin: 0; padding: 0; }
ul.notes-list li { padding: .5rem .75rem; border-left: 4px solid #cbd5dd; background: var(--surface-2); margin-bottom: .45rem; border-radius: 0 7px 7px 0; }
ul.notes-list li.unread { border-left-color: #7a0c0c; background: #fff6f6; }
ul.notes-list li form { display: inline; }

/* ---- marking calendar (Marking dates, bottom) ---- */
a.chip { text-decoration: none; }
a.chip.on { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); font-weight: 600; box-shadow: 0 0 0 2px rgba(138, 0, 194, .12); }
.gantt-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--muted); margin: 0 0 .5rem; align-items: center; }
.gantt-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.gantt-legend i { display: inline-block; width: 1.2rem; height: .7rem; border-radius: 2px; border: 1px solid rgba(0, 0, 0, .15); }
.gantt-wrap { max-height: 38rem; overflow: auto; }
table.gantt { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: .78rem; }
table.gantt th, table.gantt td { padding: 0; text-align: center; height: 1.7rem; border-right: 1px solid var(--line-faint); border-bottom: 1px solid var(--line-faint); background: var(--surface); }
table.gantt thead th { position: sticky; z-index: 3; background: linear-gradient(180deg, #4b0f6e, var(--brand-dark)); color: #fff; font-weight: 600; height: 1.5rem; }
table.gantt thead tr:first-child th { top: 0; }
table.gantt thead tr:nth-child(2) th { top: 1.5rem; height: 2.1rem; line-height: 1; }
table.gantt thead th small { display: block; font-weight: 400; opacity: .75; font-size: .6rem; }
table.gantt thead th.gmonth { text-align: left; padding-left: .4rem; border-left: 2px solid rgba(255, 255, 255, .35); }
table.gantt thead th.gl { left: 0; z-index: 5; text-align: left; padding-left: .6rem; min-width: 15rem; }
table.gantt tbody th.gl { position: sticky; left: 0; z-index: 2; text-align: left; padding: .15rem .6rem; background: var(--surface); font-weight: 600; min-width: 15rem; max-width: 15rem; border-right: 2px solid #e3c4f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.gantt tbody th.gl small { display: block; font-weight: 400; color: var(--muted); font-size: .68rem; }
table.gantt .gc { min-width: 1.55rem; width: 1.55rem; }
table.gantt.wk .gc { min-width: 2.3rem; width: 2.3rem; }
table.gantt .gc.we { background-color: #dfe4ea; }
table.gantt thead th.we { background: #6d5a80; }
table.gantt .gc.today { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
table.gantt tr.gsum th.gl { background: var(--surface-2); color: var(--brand-dark); font-size: .74rem; }
table.gantt tr.gsum td { font-weight: 700; color: #3b0a57; }
table.gantt td.h1 { background: #efe0f8; } table.gantt td.h2 { background: #d9b4ef; } table.gantt td.h3 { background: #b66ee0; color: #fff; }
table.gantt .gb-first { background: #cfe3ff; } table.gantt .gb-mod { background: #e5d4f7; } table.gantt .gb-feedback { background: #fff3b8; }
table.gantt .gb-two { background: linear-gradient(90deg, #cfe3ff 50%, #e5d4f7 50%); }
.gantt-legend i.gb-first { background: #cfe3ff; } .gantt-legend i.gb-mod { background: #e5d4f7; } .gantt-legend i.gb-feedback { background: #fff3b8; }
.gm { display: inline-block; min-width: 1rem; padding: 0 .12rem; margin: 0 .5px; border-radius: 3px; font-size: .62rem; line-height: 1.25rem; font-weight: 700; color: #fff; text-align: center; font-style: normal; }
.gm-S { background: #0b6bcb; } .gm-F { background: #c2410c; } .gm-M { background: #7c3aed; } .gm-R { background: #b45309; } .gm-P { background: #15803d; } .gm-B { background: #1f3a8a; }
@media (prefers-reduced-motion: no-preference) { table.gantt tbody tr:not(.gsum):hover td, table.gantt tbody tr:not(.gsum):hover th { filter: brightness(.96); } }

/* ---- marking sheet rosters ---- */
table.ms input.ms-paper { width: 11rem; font-weight: 600; }
table.ms input.ms-link { width: 8.5rem; margin-top: .25rem; font-size: .8rem; }
table.ms button.ms-remove { padding: .1rem .4rem; font-size: .75rem; margin-top: .25rem; color: #7a0c0c; }
table.ms button.ms-remove:hover { background: #fdecec; color: #7a0c0c; border-color: #f3b7b7; }
table.ms tbody.ms-slot { background: var(--surface-2); }
ul.plain li form { margin-left: .5rem; }

/* ---------- teaching overview (weeks across, cohorts down) and the week page ---------- */
.muted { color: var(--muted); }
table.gantt.wk.teach .gc { min-width: 3.3rem; width: 3.3rem; }
table.gantt.teach td.tg { height: 2.9rem; position: relative; }
.show-clash table.gantt.teach td.tg.clash { background-color: #fde8e8; }
.show-busy table.gantt.teach td.tg.busy { background-color: #fff6e0; }
table.gantt.teach thead th.tg-h a { display: block; color: #fff; text-decoration: none; line-height: 1; padding: .2rem 0; }
.show-clash table.gantt.teach thead th.tg-h.clash { background: #b91c1c; }
.show-busy table.gantt.teach thead th.tg-h.busy { background: #b45309; }
table.gantt.teach td.tg-sum { font-weight: 700; }
table.gantt.teach td.tg-sum.one { background: #efe0f8; color: #3b0a57; }
.show-busy table.gantt.teach td.tg-sum.busy { background: #fde7b0; color: #7a4a00; }
.show-clash table.gantt.teach td.tg-sum.clash { background: #f5b5b5; color: #7a0b0b; }
a.tg-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .22rem; height: 100%; min-height: 2.8rem; padding: .15rem .1rem; text-decoration: none; color: var(--ink); transition: background var(--t); }
a.tg-cell:hover { background: rgba(138, 0, 194, .1); }
.tg-ses { font-size: .66rem; font-weight: 700; line-height: 1; min-height: .66rem; }
/* one stripe per teaching day: blue = face to face, purple = online (the colours staff know from the timetable). A day with no mode
   in the timetable is a blue/purple diagonal split, never grey. */
.tg-strip { display: flex; gap: 1px; }
.tg-strip i { display: block; width: .34rem; height: .66rem; border-radius: 1px; background: #4f8fe8; }
.tg-strip i.f2f { background: #4f8fe8; } .tg-strip i.online { background: #a97be0; } .tg-strip i.other { background: linear-gradient(135deg, #4f8fe8 50%, #a97be0 50%); }
.tg-live { position: absolute; top: 3px; right: 4px; width: .4rem; height: .4rem; border-radius: 50%; background: #f2b705; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.tg-key { display: inline-block; width: .5rem; height: .85rem; border-radius: 1px; border: 1px solid rgba(0, 0, 0, .12); }
.tg-key.f2f { background: #4f8fe8; } .tg-key.online { background: #a97be0; } .tg-key.other { background: linear-gradient(135deg, #4f8fe8 50%, #a97be0 50%); }
.tg-key.clash { width: 1.2rem; height: .7rem; background: #fde8e8; border-color: #b91c1c; } .tg-key.busy { width: 1.2rem; height: .7rem; background: #fff6e0; border-color: #b45309; }
.tg-key.live { width: .5rem; height: .5rem; border-radius: 50%; background: #f2b705; }
ul.clash-list { margin: 0; padding-left: 1.1rem; } ul.clash-list li { margin: .25rem 0; }
.callout { border-left: 4px solid var(--brand); background: var(--brand-light); padding: .6rem .9rem; border-radius: 6px; margin: 0 0 1rem; }
.callout.red { border-color: var(--red); background: var(--red-bg); } .callout.amber { border-color: #d99a00; background: var(--amber-bg); }
details.fold.selected { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(138, 0, 194, .15); }
table.wk-day { width: 100%; }
table.wk-day th { text-align: left; vertical-align: top; white-space: nowrap; }
table.wk-day tr.we th, table.wk-day tr.we td { background: #e4e8ed; }
table.wk-day tr.today th { box-shadow: inset 3px 0 0 var(--accent); }
.wk-item { display: flex; gap: .6rem; align-items: baseline; padding: .12rem 0; }
.wk-tag { flex: none; min-width: 6.8rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: .05rem .55rem; text-align: center; background: var(--grey-bg); color: var(--muted); }
.wk-tag.f2f { background: #cfe3ff; color: #0b2e66; } .wk-tag.online { background: #e5d4f7; color: #3b0a57; } .wk-tag.induction { background: #bff0c4; color: #0d4a17; }
.wk-tag.assess { background: #fff3b8; color: #5c4400; } .wk-tag.board { background: #c7d2fe; color: #1f3a8a; } .wk-tag.tpr { background: #ffd9b0; color: #7a3a00; } .wk-tag.bh { background: #ff9d9d; color: #5c0000; }
.show-clash table.gantt.teach thead th.tg-h.maybe { box-shadow: inset 0 -4px 0 #b91c1c; }
.show-clash table.gantt.teach td.tg.maybe { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(185, 28, 28, .09) 6px 12px); }
.tg-key.maybe { width: 1.2rem; height: .7rem; background: repeating-linear-gradient(135deg, #fff 0 3px, #f3c4c4 3px 6px); border-color: #b91c1c; }

/* ---- full screen panels (public/js/fullscreen.js) ---- */
.fs-target { position: relative; }
.fs-target:fullscreen, .fs-target.fs-fallback { background: var(--bg); padding: .8rem 1.2rem; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; }
.fs-target.fs-fallback { position: fixed; inset: 0; z-index: 200; }
/* the panel is exactly one screen (no page scrollbar); a very tall table scrolls inside its own frame only when it really must */
.fs-target:fullscreen .gantt-wrap, .fs-target.fs-fallback .gantt-wrap { flex: 1 1 auto; min-height: 0; max-height: none; }
button.chip { cursor: pointer; font: inherit; }

/* ---- bigger, easier-to-read calendar (marking calendar) ---- */
.gantt-wrap.big { max-height: 72vh; }
table.gantt.big { font-size: .92rem; }
table.gantt.big th, table.gantt.big td { height: 2.3rem; }
table.gantt.big thead tr:nth-child(2) th { top: 1.5rem; height: 2.5rem; }
table.gantt.big thead th small { font-size: .7rem; }
table.gantt.big .gc { min-width: 2.2rem; width: 2.2rem; }
table.gantt.big.wk .gc { min-width: 3.2rem; width: 3.2rem; }
table.gantt.big thead th.gl, table.gantt.big tbody th.gl { min-width: 19rem; max-width: 19rem; font-size: .9rem; }
table.gantt.big tbody th.gl small { font-size: .74rem; }
table.gantt.big .gm { min-width: 1.25rem; font-size: .76rem; line-height: 1.55rem; margin: 0 1px; }

/* ---- marking sheet ---- */
.ms-why { display: inline-block; max-width: 16rem; color: #0b4a8c; font-size: .74rem; line-height: 1.25; }
button.ms-ontime { font-size: 1rem; padding: .6rem 1.1rem; box-shadow: 0 0 0 3px rgba(186, 0, 255, .18); }
section.ms-setup { border-left: 4px solid var(--accent); }
section.ms-extcard { border-left: 4px solid #d99a00; }
table.ms.ms-extension tbody { background: var(--surface-2); }

/* ---- home: my marking ---- */
ul.act-list { margin: 0; padding: 0; list-style: none; }
ul.act-list li { display: flex; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid var(--line-faint); align-items: baseline; }
ul.act-list li:last-child { border-bottom: 0; }
.act-date { flex: none; width: 5.6rem; font-weight: 700; color: var(--brand-dark); font-size: .85rem; }
.act-what { display: flex; flex-direction: column; gap: .05rem; }

/* ---- timetable: compact one-screen grid, full screen, hover popup ---- */
.tt-bar { display: flex; justify-content: flex-end; margin: 0 0 .3rem; }
.ttwrap { max-height: none; overflow-x: auto; }
table.tt { width: 100%; min-width: 58rem; }
table.tt th, table.tt td { height: 1.16rem; }
table.tt td.tt-c { width: auto; min-width: 4.4rem; padding: 0 .18rem; font-size: .66rem; }
table.tt thead th { height: 1.6rem; }
table.tt td.tt-c.has { cursor: help; }
/* full screen = exactly one screen, no scrollbar: the grid is stretched to the space left under the legend, so the 31 day rows share the height */
.tt-fs:fullscreen, .tt-fs.fs-fallback { display: flex; flex-direction: column; overflow: hidden; }
.tt-fs:fullscreen .ttwrap, .tt-fs.fs-fallback .ttwrap { flex: 1 1 auto; min-height: 0; max-height: none; overflow: hidden; }
.tt-fs:fullscreen table.tt, .tt-fs.fs-fallback table.tt { height: 100%; min-width: 0; }
.tt-fs:fullscreen table.tt td.tt-c, .tt-fs.fs-fallback table.tt td.tt-c { font-size: clamp(.68rem, 1.35vh, .95rem); height: auto; }
#tt-popbox { position: fixed; z-index: 300; max-width: 28rem; min-width: 14rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: .55rem .75rem; font-size: .8rem; line-height: 1.35; pointer-events: none; }
#tt-popbox[hidden] { display: none; }
.tt-pop-h { font-weight: 700; color: var(--brand-dark); margin-bottom: .2rem; }
.tt-pop-i { color: var(--muted); }
.tt-pop-s { margin-top: .45rem; font-weight: 700; color: var(--brand-dark); border-top: 1px solid var(--line); padding-top: .35rem; }
.tt-pop-s small { font-weight: 400; color: var(--muted); }
ul.tt-pop-l { margin: .2rem 0 0; padding: 0; list-style: none; }
ul.tt-pop-l li { padding: .12rem 0; }
ul.tt-pop-l li b { display: inline-block; min-width: 5rem; color: #3b0a57; }
ul.tt-pop-l li span { display: block; margin-left: 5rem; color: var(--muted); font-size: .74rem; }
ul.tt-pop-l li span.open { color: var(--red); font-weight: 600; }

/* ---- assessment timetable by module ---- */
.asm-cell { margin: .15rem 0; }
.asm-comp { color: var(--muted); font-size: .76rem; margin-left: .15rem; }
td.has-pop { cursor: help; text-decoration: underline dotted rgba(59, 10, 87, .45); text-underline-offset: 3px; }

/* ---- teaching overview: bigger blocks, narrow cohort column, full screen ---- */
.tg-wrap { max-height: 76vh; }
table.gantt.teach { width: 100%; table-layout: fixed; }
table.gantt.teach thead th.gl, table.gantt.teach tbody th.gl { width: 8rem; min-width: 8rem; max-width: 8rem; font-size: .9rem; }
table.gantt.wk.teach .gc { width: auto; min-width: 2.2rem; }
table.gantt.teach td.tg { height: 4.1rem; }
table.gantt.teach tbody th.gl small { font-size: .7rem; }
table.gantt.teach tbody th.gl a { color: var(--brand-dark); text-decoration: none; }
a.tg-cell { min-height: 4rem; gap: .35rem; }
.tg-ses { font-size: .78rem; min-height: .8rem; }
.tg-strip { width: 88%; gap: 2px; }
.tg-strip i { flex: 1; width: auto; height: 1.15rem; border-radius: 2px; }
/* full screen: the panel is exactly one screen. The table is stretched to fill what is left under the toggles, so the rows grow
   to use the height (no white gap, no scrollbar) and the proportions stay the same. */
.tg-fs:fullscreen, .tg-fs.fs-fallback { display: flex; flex-direction: column; overflow: hidden; }
.tg-fs:fullscreen .tg-wrap, .tg-fs.fs-fallback .tg-wrap { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; overflow: hidden; }
.tg-fs:fullscreen table.gantt.teach, .tg-fs.fs-fallback table.gantt.teach { height: 100%; min-width: 0 !important; }
.tg-fs:fullscreen table.gantt.teach td.tg, .tg-fs.fs-fallback table.gantt.teach td.tg { height: auto; }
.tg-fs:fullscreen a.tg-cell, .tg-fs.fs-fallback a.tg-cell { min-height: 0; }
.tg-fs:fullscreen .tg-strip i, .tg-fs.fs-fallback .tg-strip i { height: clamp(1.15rem, 3.2vh, 2.2rem); }


/* teaching overview: switchable layers (clash / busy / admin weeks / TPR blocks) */
.tg-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; padding: .35rem .1rem .55rem; }
.tg-tlabel { font-size: .8rem; color: var(--muted); margin-right: .2rem; }
.chip.tog { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.chip.tog i { width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid currentColor; opacity: .55; transition: background var(--t), opacity var(--t), transform var(--t); }
.chip.tog.on i { opacity: 1; background: currentColor; transform: scale(1.1); }
.chip.tog.t-red { color: #b91c1c; } .chip.tog.t-amber { color: #b45309; } .chip.tog.t-green { color: #1e8e4a; } .chip.tog.t-orange { color: #d9480f; }
.chip.tog.on { background: color-mix(in srgb, currentColor 11%, var(--surface, #fff)); border-color: currentColor; font-weight: 600; }
.chip.tog span, .chip.tog { --lbl: var(--ink); }
.show-admin table.gantt.teach thead th.tg-h.admin { background: #1e8e4a; }
.show-admin table.gantt.teach td.tg.admin, .show-admin table.gantt.teach td.tg-sum.admin { background-color: #dff5e6; }
.show-admin table.gantt.teach td.tg-sum.admin { color: #146c37; }
.tg-adm { display: none; font-size: .62rem; font-weight: 800; letter-spacing: .02em; }
.show-admin .tg-adm { display: inline; }
/* TPR layer: ONE orange block across the weeks of the window with a big "TPR n" label (it covers the whole cell when the
   cohort is not teaching; over a teaching block it is a band along the top) */
.tg-tpr { display: none; position: absolute; top: 0; left: 0; z-index: 2; box-sizing: border-box; align-items: center; justify-content: center; background: rgba(255, 159, 67, .93); color: #4a2300; font-weight: 800; letter-spacing: .04em; border: 2px solid #e8590c; border-radius: 6px; }
.tg-tpr.full { bottom: 0; font-size: clamp(.95rem, 1.5vw, 1.5rem); }
.tg-tpr.band { height: 1.55rem; font-size: .95rem; border-radius: 6px 6px 0 0; }
.show-tpr .tg-tpr { display: flex; animation: tg-drop .25s var(--ease, ease-out); }
.show-tpr table.gantt.teach td.tg.has-tpr { background-color: rgba(255, 159, 67, .14); }
.show-tpr table.gantt.teach td.tg.has-tpr a.tg-cell { padding-top: 1.7rem; }
tr.tg-tpronly { display: none; }
.show-tpr tr.tg-tpronly { display: table-row; }
@keyframes tg-drop { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
.tg-key.admin { width: 1.2rem; height: .7rem; background: #dff5e6; border-color: #1e8e4a; } .tg-key.tpr { width: 1.2rem; height: .7rem; background: #ff9f43; border-color: #e8590c; }
.stat.green b { color: #1e8e4a; }

/* =====================================================================================================================
   DARK THEME. Everything above uses variables for surfaces, so the dark theme is mostly a new set of variable values.
   html[data-theme="dark"] is set by a tiny script in <head> before the page paints (no flash); the choice is saved on the profile.
   Coloured timetable cells keep their own colours and text colours on purpose (same picture in both themes).
   ===================================================================================================================== */
html { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --brand-dark: #e9d0ff;      /* headings */
  --brand: #d28cff;           /* links, button base (buttons keep white text on a deeper gradient, see below) */
  --brand-2: #8a2fc0;
  --brand-light: #2c1f3d;
  --ink: #ebe6f2;
  --muted: #a99fbb;
  --line: #3b2f4d;
  --bg: #130e1b;
  --surface: #1c1627;
  --surface-2: #231c31;
  --hover: #2a2038;
  --grey-bg: #2f2842;
  --line-strong: #54466a;
  --line-faint: #2b2339;
  --pop: #241d33;
  --green: #66d98a; --green-bg: #15301f;
  --amber: #f1b94a; --amber-bg: #3a2c0c;
  --red: #ff8a8f;   --red-bg: #3d1519;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px -4px rgba(0, 0, 0, .5);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -12px rgba(0, 0, 0, .65);
}
html[data-theme="dark"] .page-glow { background: radial-gradient(900px 420px at 92% -8%, rgba(186, 0, 255, .16), transparent 62%), radial-gradient(800px 380px at -6% 4%, rgba(0, 255, 236, .07), transparent 58%); }
html[data-theme="dark"] header.site { background: rgba(24, 17, 34, .9); box-shadow: 0 1px 0 var(--line), 0 6px 18px -12px rgba(0, 0, 0, .8); }
html[data-theme="dark"] header.site .logo-wide { background: #fff; border-radius: 6px; padding: 3px 6px; }   /* the University logo is dark-on-light */
html[data-theme="dark"] button, html[data-theme="dark"] .btn { background: linear-gradient(180deg, #9a3fd0, #7a1fb0); color: #fff; }
html[data-theme="dark"] button.secondary, html[data-theme="dark"] .btn.secondary { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] button.ghost { color: var(--brand); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] input::placeholder { color: #8478a0; }
html[data-theme="dark"] th { background: var(--brand-light); color: var(--ink); }
html[data-theme="dark"] .badge.blue { background: #16304f; color: #9cc8ff; }
html[data-theme="dark"] .tag-gantt { background: #16304f; color: #9cc8ff; }
html[data-theme="dark"] .tag-manual { background: #3a2c0c; color: #f1b94a; }
html[data-theme="dark"] .flash { border-color: #245d37; }
html[data-theme="dark"] .errors { border-color: #7a2a30; }
html[data-theme="dark"] table.mk tr.band-red, html[data-theme="dark"] ul.notes-list li.unread { background: #2e1519; }
html[data-theme="dark"] table.mk tr.band-amber { background: #2b2210; }
html[data-theme="dark"] table.wk-day tr.we th, html[data-theme="dark"] table.wk-day tr.we td { background: #251e33; }
html[data-theme="dark"] table.tt td.k-none { background: repeating-linear-gradient(45deg, #1b1626 0 4px, #231c30 4px 8px); }
:where(html[data-theme="dark"]) table.tt td.tt-c, :where(html[data-theme="dark"]) table.tt td.tt-c .d { color: var(--ink); }
html[data-theme="dark"] table.tt td.tt-c .d { color: rgba(255, 255, 255, .45); }
html[data-theme="dark"] table.tt td.k-f2f .d, html[data-theme="dark"] table.tt td.k-online .d, html[data-theme="dark"] table.tt td.k-ind .d, html[data-theme="dark"] table.tt td.k-form .d,
html[data-theme="dark"] table.tt td.k-sum .d, html[data-theme="dark"] table.tt td.k-resub .d, html[data-theme="dark"] table.tt td.k-tpr .d, html[data-theme="dark"] table.tt td.k-bh .d { color: rgba(0, 0, 0, .4); }
html[data-theme="dark"] table.tt td.tpr-in.k-blank { background-color: #5a3a1c; }
html[data-theme="dark"] .cal-d { color: var(--ink); }
html[data-theme="dark"] .cal-d.tpr, html[data-theme="dark"] .cal-d.teach { color: #1d2733; }
html[data-theme="dark"] .tt-legend i.lg, html[data-theme="dark"] .tg-key { border-color: rgba(255, 255, 255, .25); }
html[data-theme="dark"] .qr-box { background: #fff; }
html[data-theme="dark"] .show-clash table.gantt.teach td.tg.clash { background-color: #3a1a20; }
html[data-theme="dark"] .show-busy table.gantt.teach td.tg.busy { background-color: #3a2c12; }
html[data-theme="dark"] .show-admin table.gantt.teach td.tg.admin, html[data-theme="dark"] .show-admin table.gantt.teach td.tg-sum.admin { background-color: #14301f; color: #7be0a0; }
html[data-theme="dark"] table.gantt.teach td.tg-sum.one { background: #35214a; color: #e9d0ff; }
html[data-theme="dark"] .show-busy table.gantt.teach td.tg-sum.busy { background: #5a4310; color: #ffe2a0; }
html[data-theme="dark"] .show-clash table.gantt.teach td.tg-sum.clash { background: #6b1f27; color: #ffd1d4; }
html[data-theme="dark"] table.gantt td.h1 { background: #35214a; } html[data-theme="dark"] table.gantt td.h2 { background: #5a2f80; } html[data-theme="dark"] table.gantt td.h3 { background: #8a3fc2; }
html[data-theme="dark"] .exports a, html[data-theme="dark"] .subnav a, html[data-theme="dark"] .chip { color: var(--ink); }
html[data-theme="dark"] .subnav a.active { color: #fff; }
html[data-theme="dark"] .chip.on { background: var(--brand-light); border-color: var(--brand); color: var(--ink); }
html[data-theme="dark"] #tt-popbox { color: var(--ink); }
html[data-theme="dark"] #tt-tipbox { background: #0c0812; border: 1px solid var(--line); }
/* the tips switch (beside the light/dark button): filled when tips are on */
.tips-toggle svg { transition: transform .3s var(--ease); } .tips-toggle:hover svg { transform: scale(1.1); }
.tips-toggle.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.tips-toggle.on:hover { background: var(--brand-dark); color: #fff; }
html[data-theme="dark"] .tips-toggle.on { background: var(--brand); color: #fff; }

/* =====================================================================================================================
   Header controls: theme switch, bell, customise, drawer button
   ===================================================================================================================== */
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--brand-dark); box-shadow: none; cursor: pointer; position: relative; transition: background var(--t), transform .2s var(--ease), border-color var(--t); }
.iconbtn:hover { background: var(--brand-light); border-color: var(--brand); transform: translateY(-1px); box-shadow: none; filter: none; color: var(--brand-dark); }
.iconbtn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] .iconbtn { background: var(--surface-2); color: var(--ink); }
.theme-toggle .sun { display: none; } html[data-theme="dark"] .theme-toggle .sun { display: block; } html[data-theme="dark"] .theme-toggle .moon { display: none; }
.theme-toggle svg { transition: transform .45s var(--ease); } .theme-toggle:hover svg { transform: rotate(25deg) scale(1.08); }
.rails-btn { display: none; } 
.bell-wrap { position: relative; }
.bell-badge { position: absolute; top: -.3rem; right: -.35rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .28rem; border-radius: 999px; background: #e0262f; color: #fff; font-size: .68rem; font-weight: 800; line-height: 1.15rem; text-align: center; box-shadow: 0 0 0 2px var(--surface); animation: badge-pop .35s var(--ease); }
.bell-badge[hidden] { display: none; }
.bell.ring svg { animation: bell-ring .9s var(--ease); transform-origin: 50% 0; }
.bell-panel { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 80; width: min(24rem, 92vw); background: var(--pop); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); animation: pop .16s var(--ease); transform-origin: top right; overflow: hidden; }
.bell-panel[hidden] { display: none; }
.bell-head { display: flex; align-items: center; justify-content: space-between; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.bell-head button { font-size: .78rem; padding: .15rem .55rem; }
ul.bell-list { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow: auto; }
ul.bell-list li { padding: .55rem .8rem .55rem .95rem; border-bottom: 1px solid var(--line-faint); border-left: 4px solid transparent; font-size: .86rem; animation: rise .25s var(--ease) both; }
ul.bell-list li.unseen { background: color-mix(in srgb, #e0262f 7%, var(--pop)); border-left-color: #e0262f; }
ul.bell-list li.sev-warn { border-left-color: #f0a500; } ul.bell-list li.sev-urgent { border-left-color: #e0262f; }
ul.bell-list li.read { opacity: .65; }
ul.bell-list li { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
ul.bell-list li .bl-title { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.bell-list li a.bl-title:hover { color: var(--purple-link, #8a00c2); text-decoration: underline; }
ul.bell-list li small { flex: 0 0 auto; color: var(--muted); font-size: .74rem; }
ul.notes-list.headlines li { display: flex; align-items: baseline; gap: .6rem; padding: .4rem .75rem; margin-bottom: .3rem; }
ul.notes-list.headlines .nh-title { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.notes-list.headlines .nh-time { flex: 0 0 auto; font-size: .76rem; }
ul.notes-list.headlines li.sev-urgent { border-left-color: #e0262f; } ul.notes-list.headlines li.sev-warn { border-left-color: #f0a500; }
ul.notes-list.headlines li.unread .nh-title { color: inherit; }
ul.notes-list.headlines li form { flex: 0 0 auto; margin: 0; } ul.notes-list.headlines li form button { padding: .05rem .5rem; font-size: .75rem; }
ul.bell-list li.bell-empty { color: var(--muted); text-align: center; padding: 1.2rem; border-left: 0; }
.bell-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; padding: .55rem .8rem; border-top: 1px solid var(--line); background: var(--surface-2); font-size: .8rem; }
.bell-foot label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.bell-foot button { font-size: .75rem; padding: .15rem .5rem; }
.bell-hint { margin: 0; padding: .4rem .8rem .6rem; font-size: .76rem; color: var(--muted); background: var(--surface-2); }
@keyframes badge-pop { 0% { transform: scale(.2); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } 75% { transform: rotate(3deg); } }

/* =====================================================================================================================
   Navigation: hover / keyboard sub-menus on the main tabs (pure CSS)
   ===================================================================================================================== */
header.site nav.mainnav .navin { display: flex; flex-wrap: wrap; }
.navitem { position: relative; display: flex; }
.navitem.has-sub > a.navlink::before { content: ""; position: absolute; right: .3rem; top: 50%; width: .3rem; height: .3rem; margin-top: -.2rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.navitem.has-sub > a.navlink { padding-right: 1.15rem; }
.navdrop { position: absolute; left: 0; top: 100%; z-index: 60; min-width: 13.5rem; padding: .35rem; background: var(--pop); border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s var(--ease), transform .15s var(--ease), visibility 0s linear .15s; }
.navitem.has-sub:hover > .navdrop, .navitem.has-sub:focus-within > .navdrop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
header.site nav.mainnav .navdrop a { display: block; position: static; color: var(--ink); padding: .42rem .7rem; border-radius: 6px; font-size: .88rem; white-space: nowrap; background: none; transition: background var(--t), padding-left var(--t) var(--ease); }
header.site nav.mainnav .navdrop a::after { display: none; }
header.site nav.mainnav .navdrop a:hover, header.site nav.mainnav .navdrop a:focus { background: var(--brand-light); color: var(--brand-dark); padding-left: 1rem; }
.navdrop .nd-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: .3rem .7rem .1rem; }

/* =====================================================================================================================
   Page shell with side rails (wide screens) / drawer (narrow screens)
   ===================================================================================================================== */
.shell { display: block; }
.shell > main { max-width: 1280px; margin: 0 auto; }
.rail { display: none; }
@media (min-width: 1600px) {
  .shell { display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(0, 1280px) minmax(13rem, 1fr); gap: 1.1rem; padding: 0 1.2rem; align-items: start; }
  /* explicit columns: <main> must ALWAYS sit in the middle one. Signed-out pages (login, two-factor, password) have no rails, and without
     this the lone <main> was auto-placed in the first (left) column, so the login card sat left of centre on wide screens. */
  .shell > .rail-left { grid-column: 1; grid-row: 1; }
  .shell > main { grid-column: 2; grid-row: 1; width: 100%; margin: 0; max-width: none; }
  .shell > .rail-right { grid-column: 3; grid-row: 1; }
  .rail { display: flex; flex-direction: column; gap: .8rem; position: sticky; top: 7.4rem; max-height: calc(100vh - 8.4rem); overflow: auto; padding: 1.25rem .15rem 1rem; max-width: 19rem; scrollbar-width: thin; }
  .rail-left { justify-self: end; width: 100%; } .rail-right { justify-self: start; width: 100%; }
}
@media (max-width: 1599.98px) {
  .rails-btn { display: inline-flex; }
  body.rails-open .rail { display: flex; flex-direction: column; gap: .8rem; position: fixed; z-index: 85; top: 0; bottom: 0; width: min(20rem, 92vw); overflow: auto; padding: 1rem; background: var(--bg); }
  body.rails-open .rail-right { right: 0; box-shadow: -12px 0 30px -10px rgba(0, 0, 0, .35); animation: slide-left .2s var(--ease); }
  body.rails-open .rail-left { left: 0; box-shadow: 12px 0 30px -10px rgba(0, 0, 0, .35); animation: slide-right .2s var(--ease); }
}
@media (max-width: 760px) {
  body.rails-open .rail { width: 100%; left: 0; right: 0; }
  body.rails-open .rail-left { bottom: 50%; } body.rails-open .rail-right { top: 50%; }
}
@keyframes slide-left { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-right { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* widgets (rails and home) */
.widget { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow .2s, border-color .2s, opacity .2s, transform .2s var(--ease); }
.widget:hover { box-shadow: var(--shadow); }
.widget > .wh { display: flex; align-items: center; gap: .4rem; padding: .5rem .75rem; border-bottom: 1px solid var(--line-faint); }
.widget > .wh h3 { margin: 0; flex: 1; font-size: .9rem; font-weight: 650; color: var(--brand-dark); }
.widget > .wb { padding: .7rem .85rem .85rem; font-size: .88rem; }
.rail .widget > .wb p { margin: .25rem 0; }
.widget .wctl, .widget .wgrip { display: none; }
body.customising .widget .wctl { display: inline-flex; gap: .2rem; } body.customising .widget .wgrip { display: inline-flex; cursor: grab; color: var(--muted); }
.wbtn { width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); box-shadow: none; font-size: .78rem; line-height: 1; }
.wbtn:hover { background: var(--brand-light); box-shadow: none; filter: none; transform: none; color: var(--brand-dark); }
.widget.is-hidden { display: none; }
body.customising .widget.is-hidden { display: block; opacity: .45; border-style: dashed; }
body.customising .widget { outline: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; cursor: grab; }
.widget.dragging { opacity: .4; transform: scale(.98); } .widget.drop-before { box-shadow: 0 -4px 0 0 var(--accent); } .widget.drop-after { box-shadow: 0 4px 0 0 var(--accent); }
body.customising .rail { min-height: 4rem; }
.cust-bar { position: fixed; z-index: 95; left: 50%; bottom: 1rem; transform: translateX(-50%); display: none; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: center; max-width: 94vw; padding: .6rem 1rem; border-radius: 999px; background: #2a0640; color: #fff; box-shadow: 0 10px 34px -8px rgba(0, 0, 0, .55); border: 1px solid #6b2a95; font-size: .88rem; }
body.customising .cust-bar { display: flex; animation: rise .25s var(--ease); }
.cust-bar button { background: #fff; color: #2a0640; border-radius: 999px; padding: .3rem .85rem; font-weight: 650; box-shadow: none; } .cust-bar button.warn { background: transparent; color: #ffd0d3; border: 1px solid #a24; }
.cust-bar button:hover { filter: none; transform: none; background: #f3e1ff; }
/* Home widgets: a 12-column grid. full = 12, half = 6, third = 4 columns. `grid-auto-flow: dense` lets a small card slot into a gap beside a larger one;
   with JavaScript (widgets.js adds .masonry) every card also takes exactly the rows its content needs, so a tall card never leaves a hole under
   its short neighbour and several small cards stack beside one large one. Without JavaScript the plain grid below still works. */
.home-widgets { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; grid-auto-flow: row dense; }
.home-widgets > .widget { margin: 0; min-width: 0; grid-column: span 6; }
.home-widgets > .widget.size-full { grid-column: 1 / -1; }
.home-widgets > .widget.size-half { grid-column: span 6; }
.home-widgets > .widget.size-third { grid-column: span 4; }
.home-widgets.masonry { grid-auto-rows: 8px; row-gap: 0; }
.home-widgets.masonry > .widget { align-self: start; margin-bottom: 0; }
@media (max-width: 1150px) { .home-widgets > .widget.size-third { grid-column: span 6; } }
@media (max-width: 900px) { .home-widgets > .widget, .home-widgets > .widget.size-half, .home-widgets > .widget.size-third { grid-column: 1 / -1; } }
.home-widgets .widget > .wb { padding: .55rem .75rem .7rem; }
.home-widgets .widget ul.plain li { padding: .3rem .5rem; margin-bottom: .3rem; }
.home-widgets .widget details.coming-up { margin-top: .5rem; }
.home-widgets .widget .note + a { margin-left: .25rem; }
.home-widgets .widget > .wb > h2:first-child { margin-top: 0; }
.home-widgets .widget > .wb > section.card { margin: 0; border: 0; box-shadow: none; padding: 0; }
.rw-links { list-style: none; margin: 0; padding: 0; } .rw-links li a { display: block; padding: .32rem .5rem; margin: 0 -.5rem; border-radius: 6px; text-decoration: none; transition: background var(--t), padding-left var(--t) var(--ease); }
.rw-links li a:hover { background: var(--brand-light); padding-left: .8rem; }
.rw-big { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--brand-dark); } .rw-sub { color: var(--muted); font-size: .8rem; }
.rw-mini { display: flex; height: .7rem; border-radius: 999px; overflow: hidden; margin: .4rem 0 .3rem; background: var(--grey-bg); }
.rw-mini i { display: block; transition: flex-grow .6s var(--ease); height: 100%; }
.rw-legend { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .76rem; color: var(--muted); } .rw-legend b { color: var(--ink); }
.rw-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .25rem; }
.page-tools { display: flex; justify-content: flex-end; margin: -.2rem 0 .5rem; }

/* =====================================================================================================================
   Charts (drawn by public/js/charts.js; they build in with a quick animation and re-build when a filter changes)
   ===================================================================================================================== */
.chart-card .chart-top { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-bottom: .6rem; }
.chart-card .chips { margin: 0; } .chart-card .chip { font-size: .78rem; padding: .18rem .65rem; }
.chart-card select { min-width: 0; font-size: .8rem; padding: .18rem .4rem; }
.donut-wrap { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.donut-svg { width: 9.5rem; height: 9.5rem; flex: none; }
.donut-svg .seg { fill: none; stroke-width: 15; transition: stroke-dasharray .7s var(--ease), opacity .2s, stroke-width .2s; cursor: pointer; }
.donut-svg .track { fill: none; stroke: var(--grey-bg); stroke-width: 15; }
.donut-svg g.segs { transform: rotate(-90deg); transform-origin: 60px 60px; }
.donut-svg text { text-anchor: middle; fill: var(--ink); } .donut-svg .big { font-size: 22px; font-weight: 700; } .donut-svg .lab { font-size: 7.5px; fill: var(--muted); }
.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 9rem; }
.donut-legend li { display: flex; align-items: center; gap: .45rem; padding: .22rem .35rem; border-radius: 6px; transition: background var(--t), opacity .2s; cursor: default; animation: rise .3s var(--ease) both; }
.donut-legend li i { width: .7rem; height: .7rem; border-radius: 3px; flex: none; } .donut-legend li b { margin-left: auto; font-variant-numeric: tabular-nums; } .donut-legend li span.pc { color: var(--muted); font-size: .76rem; min-width: 2.4rem; text-align: right; }
.donut-legend li:hover, .donut-legend li.hl { background: var(--brand-light); } .donut-legend li a { color: inherit; text-decoration: none; display: contents; }
.donut-wrap.dim .seg:not(.hl) { opacity: .25; } .donut-svg .seg.hl { stroke-width: 18; }
.cbars { display: flex; align-items: flex-end; gap: .35rem; height: 10rem; padding-top: 1.2rem; border-bottom: 1px solid var(--line); }
.cbars .cb { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; cursor: default; text-decoration: none; }
.cbars .cb .fill { width: 78%; max-width: 2.2rem; border-radius: 5px 5px 0 0; height: 0; min-height: 0; background: var(--brand); transition: height .65s var(--ease), filter .15s; transition-delay: calc(var(--i, 0) * 35ms); }
.cbars .cb:hover .fill { filter: brightness(1.15); }
.cbars .cb .val { position: absolute; font-size: .68rem; font-weight: 700; color: var(--ink); opacity: 0; transition: opacity .3s .4s; transform: translateY(-1.1rem); bottom: var(--h, 0%); }
.cbars.ready .cb .val { opacity: 1; }
.cblabels { display: flex; gap: .35rem; margin-top: .25rem; } .cblabels span { flex: 1; text-align: center; font-size: .66rem; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbars .cb.now .fill { box-shadow: 0 0 0 2px var(--cyan); }
.chart-empty { color: var(--muted); font-size: .85rem; padding: .8rem 0; }
.gauge-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.gauge-svg { width: 11rem; flex: none; }
.gauge-svg .gtrack { fill: none; stroke: var(--grey-bg); stroke-width: 11; stroke-linecap: round; }
.gauge-svg .gval { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); }
.gauge-svg text { text-anchor: middle; fill: var(--ink); } .gauge-svg .gbig { font-size: 26px; font-weight: 800; } .gauge-svg .glab { font-size: 7.5px; fill: var(--muted); }
.health-parts { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 14rem; }
.health-parts li { margin: 0 0 .5rem; } .health-parts .hp-top { display: flex; justify-content: space-between; font-size: .84rem; } .health-parts .hp-bar { height: .4rem; background: var(--grey-bg); border-radius: 999px; overflow: hidden; margin: .15rem 0; }
.health-parts .hp-bar i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .8s var(--ease); } .health-parts small { color: var(--muted); }
.band-green { color: #1e9e4a; } .band-amber { color: #d98f00; } .band-red { color: #d6283a; } .band-grey { color: #8f9bab; }
.bg-green { background: #1e9e4a; } .bg-amber { background: #f0a500; } .bg-red { background: #d6283a; } .bg-grey { background: #a9b4c0; }

/* learner timeline */
.tl { position: relative; margin: 1.8rem .4rem 2.6rem; }
.tl-track { position: relative; height: .95rem; border-radius: 999px; background: var(--grey-bg); overflow: visible; display: flex; }
.tl-seg { height: 100%; position: relative; }
.tl-seg.l5 { background: color-mix(in srgb, #8a00c2 35%, var(--grey-bg)); border-radius: 999px 0 0 999px; } .tl-seg.l6 { background: color-mix(in srgb, #00b8a9 40%, var(--grey-bg)); border-radius: 0 999px 999px 0; } .tl-seg.only { border-radius: 999px; }
.tl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #8a00c2, #ba00ff 60%, #00d9c8); transition: width 1.1s var(--ease); box-shadow: 0 0 12px -2px rgba(186, 0, 255, .6); }
.tl-now { position: absolute; top: -.45rem; width: 0; height: 1.85rem; border-left: 3px solid var(--ink); transition: left 1.1s var(--ease); z-index: 3; left: 0; }
.tl-now::after { content: "Today"; position: absolute; top: -1.3rem; left: -1.3rem; width: 2.6rem; text-align: center; font-size: .7rem; font-weight: 700; background: var(--ink); color: var(--surface); border-radius: 4px; padding: 0 .2rem; }
/* Markers: a roomy, centred hit area (the popup itself comes from popover.js, so nothing can clip it) */
.tl-mark { position: absolute; top: -.55rem; width: 1.5rem; height: 2.05rem; margin-left: -.75rem; z-index: 2; cursor: help; display: flex; align-items: center; justify-content: center; outline: none; }
.tl-mark i { display: block; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--surface); background: #8a00c2; box-shadow: 0 0 0 1px var(--line-strong); transition: transform .15s var(--ease), box-shadow .15s; }
.tl-mark:hover i, .tl-mark:focus-visible i { transform: scale(1.5); box-shadow: 0 0 0 2px var(--brand, #8a00c2); }
.tl-mark.tpr.s-complete i { background: #1e9e4a; } .tl-mark.tpr.s-booked i, .tl-mark.tpr.s-due i { background: #1f6fd1; }
.tl-mark.tpr.s-overdue i, .tl-mark.tpr.s-open i { background: #d6283a; } .tl-mark.tpr.s-soon i { background: #f0a500; } .tl-mark.tpr.s-waived i { background: #a9b4c0; }
.tl-mark.start i { background: var(--ink); width: .6rem; height: .6rem; }
.tl-mark.l6 i { background: #00b8a9; border-radius: 2px; transform: rotate(45deg); } .tl-mark.l6:hover i, .tl-mark.l6:focus-visible i { transform: rotate(45deg) scale(1.5); }
.tl-mark.upab i { background: #d6283a; border-radius: 2px; width: .8rem; height: .8rem; }
.tl-fill { pointer-events: none; }   /* so the level segments underneath can show their popup */
.tl-seg[data-pop] { cursor: help; } .tl-seg[data-pop]:hover { filter: brightness(1.08); }
.tl-now { pointer-events: auto; cursor: help; }
.tl-now::before { content: ""; position: absolute; top: 0; bottom: 0; left: -.6rem; width: 1.2rem; }
.tl-ends { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); margin-top: .35rem; }
/* the big figures under the timeline: the number (and its %) is the headline, the words under it are small. The label rule must only
   touch the direct child span, otherwise it also shrinks the count-up span inside the number (it did). */
.tl-stats { display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; margin-top: 1.2rem; }
.tl-stats > div > b { display: block; font-size: 2.1rem; font-weight: 700; color: var(--brand-dark); line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tl-stats > div > b > span { font-size: inherit; color: inherit; }
.tl-stats > div > span { display: block; margin-top: .15rem; font-size: .8rem; color: var(--muted); }
html[data-theme="dark"] .tl-stats > div > b { color: var(--ink); }
.nowrap { white-space: nowrap; }
.lede-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; }

/* more motion, still small and fast */
.card.chart-card, .widget { animation: rise .4s var(--ease) both; }
.home-widgets > .widget:nth-child(2) { animation-delay: .04s; } .home-widgets > .widget:nth-child(3) { animation-delay: .08s; } .home-widgets > .widget:nth-child(4) { animation-delay: .12s; } .home-widgets > .widget:nth-child(n+5) { animation-delay: .16s; }
.stat { transition: transform .2s var(--ease), box-shadow .2s; } .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.badge { transition: transform .15s var(--ease); } .badge:hover { transform: scale(1.06); }
.fx-pulse { animation: fx-pulse 1.6s ease-in-out 2; } @keyframes fx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(186, 0, 255, 0); } 50% { box-shadow: 0 0 0 6px rgba(186, 0, 255, .22); } }
@media (prefers-reduced-motion: reduce) {
  .donut-svg .seg, .cbars .cb .fill, .tl-fill, .tl-now, .gauge-svg .gval, .health-parts .hp-bar i, .navdrop, .bell-badge, .bell.ring svg { transition: none !important; animation: none !important; }
}
html.theme-fade, html.theme-fade * { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }

.tl-lvls { display: flex; margin-top: .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .tl-lvls span { overflow: hidden; white-space: nowrap; }

/* ---- TPR tracker, RAG, OTJH, Four Week Rule ---- */
.tpr-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem .12rem .12rem; border-radius: 999px; font-size: .74rem; border: 1px solid transparent; margin: 0 .25rem .2rem 0; cursor: default; transition: transform .15s var(--ease), box-shadow .15s; }
.tpr-chip b { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: .72rem; color: #fff; }
.tpr-chip i { font-style: normal; font-weight: 600; }
.tpr-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.tpr-chip.ok { background: var(--green-bg); color: var(--green); } .tpr-chip.ok b { background: #1e9e4a; }
.tpr-chip.bk { background: #e3edfb; color: #1c4f9c; } .tpr-chip.bk b { background: #3b7be0; }
.tpr-chip.du { background: var(--amber-bg); color: var(--amber); border-color: #f1d58c; } .tpr-chip.du b { background: #e0a100; }
.tpr-chip.so { background: var(--amber-bg); color: var(--amber); } .tpr-chip.so b { background: #e0a100; }
.tpr-chip.op { background: #ffe3bd; color: #8a4a00; } .tpr-chip.op b { background: #e07b00; }
.tpr-chip.ov { background: var(--red-bg); color: var(--red); } .tpr-chip.ov b { background: #d6283a; }
.tpr-chip.up { background: var(--grey-bg); color: var(--muted); } .tpr-chip.up b { background: #9aa8b5; }
.tpr-chip.wv { background: var(--grey-bg); color: var(--muted); text-decoration: line-through; } .tpr-chip.wv b { background: #b9c5cd; }
.tpr-chip.no { background: transparent; color: var(--muted); border-color: var(--line); } .tpr-chip.no b { background: #c9d3db; }
.chips-cell { white-space: nowrap; }
table.tpr-table tr.has-flag.overdue td:first-child, table tr.has-flag.overdue td:first-child { box-shadow: inset 3px 0 0 #d6283a; }
table tr.has-flag.open td:first-child { box-shadow: inset 3px 0 0 #e07b00; }
table tr.has-flag.soon td:first-child { box-shadow: inset 3px 0 0 #e0a100; }
.flag-text.overdue { color: var(--red); font-weight: 600; } .flag-text.open { color: #8a4a00; font-weight: 600; } .flag-text.soon { color: var(--amber); font-weight: 600; }
.tpr-edit { margin-top: .3rem; }
.tpr-edit > summary { cursor: pointer; color: var(--brand); font-size: .85rem; font-weight: 600; }
.tpr-form { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: end; margin: .5rem 0; padding: .6rem .75rem; background: var(--surface-2); border: 1px solid var(--line-faint); border-radius: 8px; }
.tpr-form label { display: flex; flex-direction: column; gap: .15rem; font-size: .78rem; color: var(--muted); }
.tpr-form label.wide { flex: 1 1 18rem; }
.tpr-form p.wide { flex: 1 1 100%; margin: 0; }
.tpr-form input[type=text], .tpr-form input[type=date], .tpr-form select { font-size: .88rem; }
tr.edit-row td { padding-top: 0; border-top: 0; background: var(--surface-2); }
.case-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; margin-top: .5rem; }
.flash-list { margin: .35rem 0 0 1.1rem; padding: 0; font-size: .9rem; }
html[data-theme="dark"] .tpr-chip.bk { background: #1c2f4d; color: #a9c8f5; }
html[data-theme="dark"] .tpr-chip.op { background: #4a3210; color: #ffcf8f; }
html[data-theme="dark"] .tpr-form { background: var(--surface-2); }

/* TPR chips as switches (a <button> that looks like the chip) */
button.tpr-chip.switch { font: inherit; font-size: .74rem; cursor: pointer; box-shadow: none; line-height: 1.25; }
button.tpr-chip.switch:hover { transform: translateY(-1px); box-shadow: 0 2px 8px -3px rgba(59, 10, 87, .5); filter: none; }
button.tpr-chip.switch:active { transform: scale(.96); }
button.tpr-chip.switch:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
button.tpr-chip.switch.saving { opacity: .55; pointer-events: none; }
.tpr-chip.just-saved { animation: chip-saved .9s var(--ease); }
@keyframes chip-saved { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(30, 158, 74, .55); } 30% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(30, 158, 74, .25); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(30, 158, 74, 0); } }
.tpr-pop { position: absolute; z-index: 400; width: 17rem; background: var(--pop); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: .75rem .85rem; font-size: .85rem; animation: pop .14s var(--ease); }
.tpr-pop-h { font-weight: 700; color: var(--brand-dark); margin-bottom: .15rem; }
.tpr-pop label { display: flex; flex-direction: column; gap: .15rem; margin-top: .5rem; font-size: .78rem; color: var(--muted); }
.tpr-pop input[type=date] { font-size: .9rem; }
.tpr-pop-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.tpr-pop-row button { font-size: .8rem; padding: .25rem .65rem; }
.tpr-pop-err { color: var(--red); font-size: .78rem; margin-top: .3rem; }
.tpr-toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 500; display: flex; align-items: center; gap: .6rem; background: var(--ink); color: var(--surface); padding: .5rem .5rem .5rem .95rem; border-radius: 999px; box-shadow: var(--shadow); font-size: .86rem; animation: rise .22s var(--ease) both; }
.tpr-toast button.ghost { color: var(--cyan); padding: .15rem .65rem; border-radius: 999px; }
.tpr-toast button.ghost:hover { background: rgba(255, 255, 255, .12); border-color: transparent; }
html[data-theme="dark"] .tpr-toast button.ghost { color: #7a0c9e; }

/* "Who needs attention": the two counts are buttons that open this list */
button.stat.stat-btn { font: inherit; text-align: left; cursor: pointer; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
button.stat.stat-btn b { color: inherit; }
button.stat.stat-btn:hover { background: var(--brand-light); filter: none; }
button.stat.stat-btn.red b { color: var(--red); } button.stat.stat-btn.amber b { color: #a36b00; } button.stat.stat-btn.green b { color: var(--green); }
button.stat.stat-btn::after { content: "Show who"; display: block; margin-top: .15rem; font-size: .7rem; font-weight: 600; color: var(--brand); }
details.attn .attn-bar { padding: 0 1rem .4rem; display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
details.attn .table-wrap { padding: 0 .5rem .6rem; }
details.attn table { margin: 0; }
details.attn tr[hidden] { display: none; }
/* Red RAG learners: one collapsible card per learner */
a.chip { text-decoration: none; } a.chip.on { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); font-weight: 600; }
details.red-card > summary { flex-wrap: wrap; row-gap: .15rem; }
details.red-card .rc-name { font-weight: 700; min-width: 12rem; }
details.red-card .rc-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; font-weight: 400; flex: 1 1 auto; }
details.red-card .rc-since { margin-left: auto; font-weight: 400; }
details.red-card[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.rc-body { padding: .8rem 1rem 1rem; }
.rc-facts { margin-top: 0; }
.rc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .8rem 1.4rem; margin: .6rem 0 .8rem; }
.rc-cols h3 { margin: 0 0 .25rem; font-size: .9rem; color: var(--brand-dark); }
.rc-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; line-height: 1.45; background: var(--surface-2); border: 1px solid var(--line-faint); border-radius: 8px; padding: .55rem .7rem; max-height: 16rem; overflow: auto; }
.red-form textarea { width: 100%; font: inherit; font-size: .88rem; }
.red-form label.wide { flex: 1 1 100%; }
/* "Show who" inside a home action */
details.action-list { margin: .15rem 0 .1rem; }
details.action-list > summary { cursor: pointer; color: var(--brand); font-size: .85rem; font-weight: 600; }
details.action-list ul { list-style: none; margin: .3rem 0 .2rem; padding: 0 0 0 .2rem; max-height: 14rem; overflow: auto; }
details.action-list ul li { padding: .12rem 0 .12rem .55rem; border-left: 3px solid var(--line); margin-bottom: .15rem; font-size: .86rem; }
details.action-list ul li.flag-overdue { border-left-color: #d6283a; } details.action-list ul li.flag-open { border-left-color: #e07b00; } details.action-list ul li.flag-soon { border-left-color: #e0a100; }

/* ---------------------------------------------------------------------------------------------------------- teaching allocation */
.al-day { margin-top: .5rem; display: grid; gap: .45rem; }
.al-half { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; }
.al-topic { border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 8px; padding: .5rem .65rem; background: var(--surface); transition: box-shadow var(--t) var(--ease); }
.al-topic.gap { border-left-color: #d6283a; box-shadow: inset 0 0 0 1px rgba(214, 40, 58, .45); }
.al-topic:hover { box-shadow: 0 4px 14px -8px rgba(59, 10, 87, .4); }
.al-topic.gap:hover { box-shadow: inset 0 0 0 1px rgba(214, 40, 58, .45), 0 4px 14px -8px rgba(59, 10, 87, .4); }
.al-head { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
.al-title { font-weight: 700; }
.al-hours { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--brand-dark); }
.al-people { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 .2rem; }
.al-person { display: inline-flex; align-items: center; gap: .3rem; background: var(--brand-light); color: var(--brand-dark); border-radius: 999px; padding: .1rem .2rem .1rem .7rem; font-size: .88rem; }
.al-person.me { box-shadow: inset 0 0 0 2px var(--accent); }
.al-person.ph { background: var(--grey-bg); color: var(--ink); font-style: italic; }
.al-person.gone { background: var(--red-bg); color: var(--red); }
.al-person small { opacity: .75; }
.al-x { display: inline; margin: 0; }
button.al-xbtn { background: none; color: inherit; box-shadow: none; padding: 0 .45rem; border-radius: 999px; line-height: 1.5; font-size: 1.1rem; filter: none; transform: none; }
button.al-xbtn:hover { background: rgba(0, 0, 0, .14); transform: none; box-shadow: none; color: inherit; filter: none; }
.al-add { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .3rem 0 0; }
.al-add select { max-width: 16rem; }
.al-add button { padding: .25rem .75rem; font-size: .85rem; }
.al-edit { margin-top: .4rem; }
.al-edit > summary { cursor: pointer; font-size: .85rem; color: var(--brand); font-weight: 600; }
.al-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem .75rem; margin-top: .5rem; align-items: end; }
.al-form label { display: flex; flex-direction: column; font-size: .8rem; gap: .15rem; }
.al-form label.wide { grid-column: 1 / -1; }
.al-form input[readonly] { background: var(--grey-bg); color: var(--muted); }
.al-scope { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 8px; padding: .4rem .7rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; }
.al-scope legend { font-size: .75rem; font-weight: 700; color: var(--muted); padding: 0 .3rem; }
.al-scope label { flex-direction: row; gap: .4rem; align-items: center; font-size: .85rem; }
.al-remove { margin-top: .5rem; }
.al-nogap { margin-top: .4rem; font-size: .9rem; }
.al-restore { display: flex; gap: .6rem; align-items: center; margin: .25rem 0; }
.al-restore form { margin: 0; }
/* overview: topics nobody is allocated to */
b.tg-gap { position: absolute; top: 1px; right: 2px; min-width: 1rem; padding: 0 .25rem; border-radius: 999px; background: #d6283a; color: #fff; font-size: .62rem; font-weight: 800; line-height: 1.05rem; text-align: center; z-index: 2; }
b.tg-gap.static { position: static; display: inline-block; margin-right: .3rem; }
.tg-gapcell.has-gap a { display: inline-block; background: #d6283a; color: #fff; border-radius: 4px; padding: 0 .3rem; font-weight: 700; text-decoration: none; }
/* teaching hours page */
.th-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.th-bar { position: relative; height: .7rem; background: var(--grey-bg); border-radius: 999px; }
.th-bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.th-bar i.over { background: #d6283a; }
.th-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .7; }
.th-months { display: inline-flex; align-items: flex-end; gap: 2px; height: 26px; }
.th-months i { width: 5px; background: var(--brand); border-radius: 2px 2px 0 0; }
.th-table tr.th-flag th { box-shadow: inset 3px 0 0 #e07b00; }
.th-table tr.th-left { opacity: .7; }

/* ---- teaching week grid (hours down the side, like the weekly sheets) ---- */
.wg-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--muted); margin: 0 0 .6rem; align-items: center; }
.wg-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.wg-sw { display: inline-block; width: .85rem; height: .85rem; border-radius: 3px; border: 1px solid var(--line-strong); }
.wg-sw.lunch { background: repeating-linear-gradient(45deg, #f6f1e0 0 4px, #efe6c6 4px 8px); }
.wg-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.wg { display: grid; grid-template-columns: 3.6rem repeat(var(--n), minmax(9.6rem, 1fr)); grid-template-rows: auto auto var(--h) auto; min-width: calc(3.6rem + var(--n) * 9.6rem); }
.wg-corner { background: var(--brand-light); border-bottom: 1px solid var(--line); }
.wg-rowlabel { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .35rem .35rem; text-align: right; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.wg-head { padding: .35rem .5rem .4rem; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--brand-light); min-width: 0; }
.wg-head.today { box-shadow: inset 0 3px 0 var(--accent); }
.wg-head.we, .wg-rcell.we, .wg-col.we { background-color: #e4e8ed; }
.wg-head.we { background: #d9dfe6; }
.wg-date { font-weight: 700; color: var(--brand-dark); font-size: .9rem; }
.wg-sess { font-size: .76rem; color: var(--ink); margin-top: .1rem; display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.wg-sess .wk-tag { min-width: 0; font-size: .6rem; padding: .02rem .45rem; }
.wg-chip { margin-top: .25rem; font-size: .7rem; line-height: 1.25; border-radius: 6px; padding: .12rem .4rem; background: var(--grey-bg); color: var(--ink); overflow-wrap: anywhere; }
.wg-chip b { font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; margin-right: .15rem; }
.wg-chip.assess { background: #fff3b8; color: #5c4400; } .wg-chip.board { background: #c7d2fe; color: #1f3a8a; } .wg-chip.tpr { background: #ffd9b0; color: #7a3a00; }
.wg-chip.bh { background: #ffb3b3; color: #5c0000; } .wg-chip.induction { background: #bff0c4; color: #0d4a17; }
.wg-rcell { padding: .3rem .3rem; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.wg-split { font-size: .72rem; }
.wg-rl { display: block; font-weight: 700; font-size: .76rem; }
.wg-rl small { font-weight: 400; color: var(--muted); }
.wg-rp { display: flex; flex-wrap: wrap; gap: .15rem .25rem; margin-top: .2rem; }
.wg-p { display: inline-block; font-style: normal; font-size: .74rem; background: var(--brand-light); color: var(--brand-dark); border-radius: 999px; padding: 0 .5rem; line-height: 1.35; }
.wg-p.open, .al-person.open { background: transparent; color: var(--red); border: 1.5px dashed var(--red); }
.wg-p.ph { background: var(--grey-bg); color: var(--ink); font-style: italic; }
.wg-p.gone { background: var(--red-bg); color: var(--red); }
.wg-p.me { box-shadow: 0 0 0 2px var(--accent); }
em.wg-need { font-style: normal; font-weight: 700; font-size: .72rem; color: var(--red); }
.wg-axis { position: relative; height: var(--h); border-right: 1px solid var(--line); background: var(--surface-2); }
.wg-hr { position: absolute; right: .4rem; font-size: .68rem; color: var(--muted); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.wg-hr:first-child { transform: none; }
.wg-col { position: relative; height: var(--h); border-left: 1px solid var(--line); min-width: 0;
  background-image: repeating-linear-gradient(to bottom, var(--line-faint) 0, var(--line-faint) 1px, transparent 1px, transparent var(--px)); }
.wg-col.today { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }
.wg-col.addable { cursor: cell; }
.wg-lunch { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(45deg, #f6f1e0 0 5px, #efe6c6 5px 10px); opacity: .85; border-top: 1px solid #e3d8b0; border-bottom: 1px solid #e3d8b0; }
.wg-lunch span { position: absolute; left: .35rem; top: 50%; transform: translateY(-50%); font-size: .66rem; color: #7a6a2e; letter-spacing: .03em; }
.wg-fullday { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(59, 130, 246, .10), rgba(59, 130, 246, .04)); }
.wg-fullday span { position: absolute; left: .4rem; top: .25rem; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #2c5aa0; opacity: .8; }
.wg-ghost { position: absolute; left: 2px; right: 2px; z-index: 1; pointer-events: none; border-top: 2px dashed var(--accent); background: rgba(186, 0, 255, .07); height: 14px; font-size: .66rem; line-height: 14px; padding-left: .3rem; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.wg-ghost[hidden] { display: none; }
.wg-t { font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wg-m { font-size: .66rem; opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wg-w { display: flex; flex-wrap: wrap; gap: .1rem .2rem; align-items: center; margin-top: .05rem; }
.wg-foot { border-left: 1px solid var(--line); border-top: 1px solid var(--line-faint); padding: .3rem .35rem; min-width: 0; }
.wg button.wg-addbtn, .wg-foot button.wg-addbtn { padding: .15rem .55rem; font-size: .76rem; }
.wg-foot .al-edit { margin-top: .3rem; }
/* pop-ups */
dialog.wg-dialog { padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); width: min(46rem, 94vw); max-height: 88vh; overflow: auto; box-shadow: 0 24px 60px -20px rgba(30, 10, 50, .6); animation: wg-in .18s var(--ease); }
dialog.wg-dialog::backdrop { background: rgba(20, 8, 32, .5); backdrop-filter: blur(2px); }
.wg-dialog-body { padding: 1rem 1.2rem 1.15rem; }
button.wg-x { position: absolute; top: .45rem; right: .6rem; z-index: 2; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; font-size: 1.3rem; line-height: 1; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); box-shadow: none; filter: none; transform: none; }
button.wg-x:hover { background: var(--brand-light); color: var(--brand-dark); box-shadow: none; transform: none; filter: none; }
.wg-dialog h3 { color: var(--brand-dark); padding-right: 2rem; }
.wg-dialog .al-topic { border-left-width: 4px; }
.wg-hoursform { grid-template-columns: minmax(8rem, 1.2fr) 6rem 9rem auto; }
@keyframes wg-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.wg-dialog { animation: none; } }
/* dark theme */
html[data-theme="dark"] .wg-head.we, html[data-theme="dark"] .wg-rcell.we, html[data-theme="dark"] .wg-col.we { background-color: #251e33; }
html[data-theme="dark"] .wg-head.we { background: #2a2239; }
html[data-theme="dark"] .wg-lunch { background: repeating-linear-gradient(45deg, #2a2616 0 5px, #231f12 5px 10px); border-color: #3b3419; }
html[data-theme="dark"] .wg-lunch span { color: #c9b872; }
html[data-theme="dark"] .wg-sw.lunch { background: repeating-linear-gradient(45deg, #2a2616 0 4px, #231f12 4px 8px); }
html[data-theme="dark"] .wg-fullday span { color: #9cc8ff; }
html[data-theme="dark"] .wg-chip.assess { background: #4a3b00; color: #ffe27a; } html[data-theme="dark"] .wg-chip.board { background: #1f2a5c; color: #c7d2fe; }
html[data-theme="dark"] .wg-chip.tpr { background: #4a2b00; color: #ffd9b0; } html[data-theme="dark"] .wg-chip.bh { background: #5c1a1a; color: #ffd0d0; }
html[data-theme="dark"] .wg-chip.induction { background: #12391a; color: #bff0c4; }
/* hours page: comparison with the team's tally sheet */
.th-compare th, .th-compare td { padding: .25rem .4rem; font-size: .8rem; }
.th-compare td.th-diff { background: var(--amber-bg); color: var(--amber); font-weight: 700; }

/* Face-to-face days rostered per site (7 Nov 2026): one line per site in the roster box, one section per site in the day pop-up, and a room space */
.wg-site { display: block; margin-top: .25rem; padding-left: .35rem; border-left: 3px solid var(--green); }
.wg-site.short { border-left-color: #d6283a; }
.wg-site.nosite { border-left-color: var(--muted); border-left-style: dashed; }
.wg-site > b { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; }
.wg-site .wg-rp { margin-top: .05rem; }
.wg-roomtag { display: inline-block; margin-top: .1rem; font-size: .68rem; color: var(--muted); }
.wg-roomtag::before { content: "Room: "; font-weight: 700; }
.wg-sitebox { border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 10px; padding: .45rem .7rem .55rem; margin: .5rem 0; background: var(--surface); }
.wg-sitebox.short { border-left-color: #d6283a; background: var(--red-bg); }
.wg-sitebox.nosite { border-left-color: var(--muted); border-left-style: dashed; }
.wg-sitebox h4 { margin: 0 0 .15rem; font-size: .95rem; }
.wg-sitebox h4 small { font-weight: 400; margin-left: .35rem; color: var(--muted); }
.wg-room { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .35rem 0 .15rem; font-size: .85rem; }
.wg-room-l { font-weight: 700; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; min-width: 3rem; }
.wg-roomform { margin: 0; }
.wg-roomform input[type="text"] { max-width: 14rem; padding: .2rem .5rem; font-size: .85rem; }
html[data-theme="dark"] .wg-sitebox { background: var(--surface); }
html[data-theme="dark"] .wg-sitebox.short { background: #3d1519; }


/* ---------------------------------------------------------------------------------------------------------------------------------
   Teaching week grid, 7 Nov 2026 (Jerry's list): solid colours for face-to-face (blue) and online (purple) alike, sessions that are
   yours in gold, an "Allocate me" button on every unallocated session, notes, a compact day heading, a "Suggested for you" card and
   the mini calendar. Blocks and roster boxes are role="button" elements (not <button>s) so they can hold their own forms.
   --------------------------------------------------------------------------------------------------------------------------------- */
:root { --wg-f2f: #2f6bd1; --wg-f2f-d: #1d4fa3; --wg-on: #7c3fc4; --wg-on-d: #5a2896; --wg-none: #5b6778; --wg-none-d: #3f4a59; --wg-gold: #ffc928; --wg-gold-d: #7a5600; --wg-red: #d6283a; }
html[data-theme="dark"] { --wg-f2f: #2a5fc0; --wg-f2f-d: #1a3f80; --wg-on: #7140b5; --wg-on-d: #4d2a80; --wg-none: #4a5565; --wg-none-d: #343c48; --wg-gold: #ffd54a; --wg-gold-d: #ffe9a3; }

.wg-sw.f2f { background: var(--wg-f2f); border-color: var(--wg-f2f-d); }
.wg-sw.online { background: var(--wg-on); border-color: var(--wg-on-d); }
.wg-sw.none { background: var(--wg-none); border-color: var(--wg-none-d); }
.wg-sw.gap { background: var(--surface); border: 2px solid var(--wg-red); }
.wg-sw.me { background: var(--wg-gold); border-color: var(--wg-gold-d); }
.wg-sw.fam { background: linear-gradient(180deg, var(--wg-gold) 0 35%, var(--surface-2) 35% 100%); border-color: var(--wg-gold-d); }

.wg .wg-block { position: absolute; z-index: 2; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; gap: .08rem; text-align: left; padding: .25rem .45rem; border-radius: 8px; font-size: .74rem; line-height: 1.2; cursor: pointer;
  color: #fff; background: var(--wg-none); border: 0; border-left: 4px solid var(--wg-none-d); box-shadow: 0 1px 2px rgba(30, 10, 50, .25); transition: box-shadow var(--t), transform var(--t) var(--ease), filter var(--t); }
.wg .wg-block.f2f { background: linear-gradient(160deg, #3b7de6, var(--wg-f2f)); border-left-color: var(--wg-f2f-d); }
.wg .wg-block.online { background: linear-gradient(160deg, #9055d8, var(--wg-on)); border-left-color: var(--wg-on-d); }
.wg .wg-block.none { background: linear-gradient(160deg, #6b7889, var(--wg-none)); border-left-color: var(--wg-none-d); }
.wg .wg-block:hover { box-shadow: 0 8px 18px -8px rgba(30, 10, 50, .7); transform: translateY(-1px); filter: brightness(1.06); z-index: 4; }
.wg .wg-block:focus-visible, .wg .wg-roster:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wg .wg-block:target { outline: 3px solid var(--accent); outline-offset: 1px; }
/* needs a lecturer: a red ring and a white-on-red tag, the mode colour stays */
.wg .wg-block.gap { box-shadow: 0 0 0 2px var(--wg-red), 0 1px 2px rgba(30, 10, 50, .25); }
.wg .wg-block.gap:hover { box-shadow: 0 0 0 2px var(--wg-red), 0 8px 18px -8px rgba(30, 10, 50, .7); }
/* the content of a full day: the same solid colour, a little softer because nobody has to be found for it */
.wg .wg-block.info { opacity: .94; }
/* yours: always gold */
.wg .wg-block.me { box-shadow: 0 0 0 3px var(--wg-gold), 0 0 0 5px rgba(122, 86, 0, .55); }
.wg .wg-block.me.gap { box-shadow: 0 0 0 3px var(--wg-gold), 0 0 0 5px var(--wg-red); }
/* taught before and still unallocated: a gold bar across the top */
.wg .wg-block.fam { box-shadow: inset 0 4px 0 var(--wg-gold), 0 0 0 2px var(--wg-red); }
.wg-t { font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wg-m { font-size: .66rem; opacity: .92; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wg-w { display: flex; flex-wrap: wrap; gap: .12rem .22rem; align-items: center; margin-top: .05rem; }
.wg-pp { font-style: normal; font-size: .68rem; background: rgba(255, 255, 255, .9); color: #2a1140; border-radius: 999px; padding: 0 .45rem; font-weight: 600; }
.wg-pp.ph { font-style: italic; } .wg-pp.gone { background: #ffe0e3; color: #8c1220; } .wg-pp.me { background: var(--wg-gold); color: #3b2a00; }
.wg .wg-block .wg-need { background: #fff; color: var(--wg-red); border-radius: 999px; padding: 0 .4rem; font-size: .66rem; }
.wg .wg-block.compact { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: .3rem; padding: .1rem .35rem; }
.wg .wg-block.compact .wg-t { -webkit-line-clamp: 1; flex: 1 1 auto; min-width: 0; }
.wg .wg-block.compact .wg-w { flex: none; margin: 0; flex-wrap: nowrap; }
.wg .wg-block.compact .wg-fam { display: none; }

/* "You" tag and "taught before" tag */
.wg-you { display: inline-block; background: var(--wg-gold); color: #3b2a00; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 0 .4rem; line-height: 1.5; }
.wg-fam { display: inline-block; font-size: .6rem; font-weight: 700; border-radius: 999px; padding: 0 .4rem; line-height: 1.5; background: rgba(255, 201, 40, .22); color: inherit; box-shadow: inset 0 0 0 1px var(--wg-gold); }
.wg .wg-block .wg-fam { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 213, 74, .9); }

/* "Allocate me": one click, no pop-up */
.wg-am { display: inline; margin: 0; }
button.wg-amb { padding: .08rem .55rem; font-size: .68rem; font-weight: 700; line-height: 1.5; border-radius: 999px; background: #fff; color: var(--wg-f2f-d); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); filter: none; transform: none; cursor: pointer; }
button.wg-amb:hover { background: var(--wg-gold); color: #3b2a00; transform: none; filter: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.wg .wg-roster button.wg-amb, .wg-suggest button.wg-amb, .al-add button.wg-amb { background: var(--brand); color: #fff; border-color: var(--brand-dark); box-shadow: none; }
.wg .wg-roster button.wg-amb:hover, .wg-suggest button.wg-amb:hover, .al-add button.wg-amb:hover { background: var(--wg-gold); color: #3b2a00; border-color: var(--wg-gold-d); }
button.wg-amb.big { padding: .35rem 1.1rem; font-size: .9rem; }
.wg .wg-site .wg-am { display: block; margin-top: .2rem; }

/* the day's roster box (a div now) */
.wg .wg-roster { display: block; width: 100%; box-sizing: border-box; text-align: left; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 8px; padding: .3rem .45rem; font-size: .8rem; cursor: pointer; transition: box-shadow var(--t), transform var(--t) var(--ease); }
.wg .wg-roster.short { border-left-color: var(--wg-red); background: var(--red-bg); box-shadow: inset 0 0 0 1px rgba(214, 40, 58, .4); }
.wg .wg-roster:hover { box-shadow: 0 4px 12px -6px rgba(59, 10, 87, .5); transform: translateY(-1px); }
.wg .wg-roster.short:hover { box-shadow: inset 0 0 0 1px rgba(214, 40, 58, .4), 0 4px 12px -6px rgba(59, 10, 87, .5); }
.wg .wg-roster.fam { box-shadow: inset 0 3px 0 var(--wg-gold), inset 0 0 0 1px rgba(214, 40, 58, .4); }
/* yours: gold edge and gold name chips, always */
.wg .wg-roster.mine { border-color: var(--wg-gold-d); border-left-color: var(--wg-gold); background: color-mix(in srgb, var(--wg-gold) 16%, var(--surface)); box-shadow: 0 0 0 2px var(--wg-gold); }
.wg-site.mine { border-left-color: var(--wg-gold); }
.wg-p.me { background: var(--wg-gold); color: #3b2a00; font-weight: 700; box-shadow: none; }
.al-person.me { background: var(--wg-gold); color: #3b2a00; box-shadow: none; font-weight: 700; }

/* day heading: short, wraps instead of overflowing */
.wg-sess { font-size: .76rem; color: var(--ink); margin-top: .1rem; display: flex; flex-wrap: wrap; gap: .2rem .3rem; align-items: center; min-width: 0; }
.wg-sess b { font-weight: 800; white-space: nowrap; }
.wg-mods { font-size: .68rem; color: var(--muted); margin-top: .05rem; overflow-wrap: anywhere; line-height: 1.25; }
.wg-sess .wk-tag { min-width: 0; font-size: .58rem; padding: .02rem .4rem; white-space: nowrap; }
.wg-head { overflow: hidden; }
.wg-notetext { margin-top: .25rem; font-size: .7rem; line-height: 1.25; padding: .15rem .4rem; border-radius: 6px; background: #fff3b8; color: #4d3a00; border-left: 3px solid var(--wg-gold); white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
html[data-theme="dark"] .wg-notetext { background: #4a3b00; color: #ffe9a3; }
/* "You are teaching X hours": one line each for the calendar month and the calendar year */
.my-hours .mh-periods { display: grid; gap: .25rem; margin-top: .35rem; }
.my-hours .mh-period { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.my-hours .mh-when { font-weight: 700; min-width: 8.5rem; }
.my-hours .mh-hours { font-variant-numeric: tabular-nums; }

/* a day that has a NOTE is highlighted: amber heading, a "Note" tag, and an amber edge down the whole column (Jerry, 7 Nov 2026) */
.wk-tag.note { background: #ffb020; color: #3d2900; }
.wg-head.has-note { background: #fff6cc; box-shadow: inset 0 3px 0 #ffb020; }
.wg-head.has-note.today { box-shadow: inset 0 3px 0 var(--accent), inset 0 -3px 0 #ffb020; }
.wg-rcell.has-note, .wg-col.has-note, .wg-foot.has-note { box-shadow: inset 3px 0 0 rgba(255, 176, 32, .8), inset -3px 0 0 rgba(255, 176, 32, .8); }
.wg-notetext { font-weight: 600; box-shadow: 0 1px 2px rgba(122, 86, 0, .25); }
html[data-theme="dark"] .wg-head.has-note { background: #3b3000; box-shadow: inset 0 3px 0 #ffb020; }
html[data-theme="dark"] .wk-tag.note { background: #ffb020; color: #2b1d00; }
.wg-notebox textarea { width: 100%; box-sizing: border-box; font-size: .8rem; }
.wg-noteform { display: grid; gap: .3rem; margin-top: .3rem; }
.wg-noteform .muted { font-size: .7rem; }

/* "Suggested for you" */
.wg-suggest { border: 1px solid var(--wg-gold-d); border-left: 6px solid var(--wg-gold); border-radius: var(--radius); background: color-mix(in srgb, var(--wg-gold) 12%, var(--surface)); padding: .55rem .8rem .65rem; margin: 0 0 .9rem; }
.wg-suggest h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--brand-dark); } .wg-suggest h3 small { font-weight: 400; color: var(--muted); font-size: .78rem; margin-left: .4rem; }
.wg-suggest ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.wg-suggest li { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center; }
.wg-suggest li form { margin: 0; }
.wg-suggest .sg-when { font-weight: 700; min-width: 5.2rem; font-variant-numeric: tabular-nums; }

/* mini calendar: pick a week */
.minical { width: 15.5rem; max-width: 100%; font-size: .78rem; }
.mc-head { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-bottom: .3rem; }
.mc-head b { font-size: .88rem; color: var(--brand-dark); }
.mc-head button { padding: .05rem .5rem; font-size: .9rem; line-height: 1.4; border-radius: 6px; }
.mc-grid { display: grid; grid-template-columns: 1.4rem repeat(7, 1fr); gap: 2px; }
.mc-grid .mc-dow { text-align: center; font-size: .62rem; color: var(--muted); text-transform: uppercase; padding-bottom: .1rem; }
.mc-wk { display: contents; text-decoration: none; color: inherit; }
.mc-wk > span { text-align: center; padding: .2rem 0; border-radius: 4px; font-variant-numeric: tabular-nums; color: var(--ink); background: transparent; transition: background var(--t); }
.mc-wk > .mc-n { font-size: .6rem; color: var(--muted); }
.mc-wk > .mc-out { color: var(--muted); opacity: .55; }
.mc-wk > .mc-we { color: var(--muted); }
.mc-wk:hover > span { background: var(--brand-light); }
.mc-wk.cur > span { background: var(--brand); color: #fff; opacity: 1; }
.mc-wk.cur > .mc-n { color: #fff; }
.mc-wk.now > span:nth-child(n+2) { box-shadow: inset 0 -2px 0 var(--accent); }
.mc-wk.has > .mc-n::after { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--wg-gold); margin: 1px auto 0; }
.mc-foot { margin-top: .35rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.mc-foot a { font-size: .74rem; }
.minical-panel { width: auto; right: auto; left: 0; }
details.minical-menu { display: inline-block; }


/* ---- Allocate fairly (Phase 14) ---- */
.chip.auto { background: var(--brand-light); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.wg-auto { display: inline-block; margin-top: .3rem; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.4;
    background: var(--surface); border: 1px solid var(--brand); color: var(--brand); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.wg-auto:hover, .wg-auto:focus-visible { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(138, 0, 194, .25); }
.auto-table td { vertical-align: top; }
.auto-table select { max-width: 17rem; }
.auto-why { margin: 0; padding-left: 1.1rem; font-size: .85rem; }
.auto-why .warn, .auto-alt .warn { color: var(--red); }
.auto-alt { margin-top: .3rem; font-size: .82rem; }
.auto-alt ul { margin: .3rem 0 0 1.1rem; padding: 0; }
.auto-load td, .auto-load th { white-space: nowrap; }
html[data-theme="dark"] .chip.auto, html[data-theme="dark"] .wg-auto { color: #d9a3f2; border-color: #b768d9; background: #2a2239; }


/* =================================================================================================================================
   Phase 17 (7 Nov 2026, Jerry's list): a quieter top of the teaching week page, pastel blue/purple blocks, a neutral lunch band,
   the "lecturers needed at each site" control, and the teaching-hours "this is me" row.
   ================================================================================================================================= */

/* "Everything this week has a lecturer": big and green */
.wk-allset { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; padding: .85rem 1.2rem; border-radius: var(--radius);
  background: var(--green-bg); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); border-left: 8px solid var(--green);
  font-size: 1.35rem; font-weight: 800; letter-spacing: .005em; line-height: 1.25; }
.wk-allset-tick { flex: none; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--green); color: var(--green-bg); font-size: 1.25rem; line-height: 1; }

/* the clash / busy / check-the-mode note is a small button: hover or click opens the explanation */
.wk-pill { position: relative; z-index: 40; display: inline-block; margin: 0 0 .7rem; }
/* every direct child of <main> is its own stacking context (the entrance animation), so the panel's own z-index only works INSIDE the pill: the pill itself
   must sit above the blocks that follow it, or their text shows through and runs into the explanation (Jerry, 7 Nov 2026). Opaque panel, clear gap, wrapped text. */
button.wk-pill-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .16rem .55rem .16rem .5rem; font-size: .76rem; font-weight: 700; line-height: 1.45; border-radius: 999px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; transform: none; filter: none; }
button.wk-pill-btn:hover { background: var(--hover); color: var(--ink); transform: none; filter: none; box-shadow: none; }
.wk-pill-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--brand); }
.wk-pill.red button.wk-pill-btn { background: var(--red-bg); color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.wk-pill.red .wk-pill-dot { background: var(--red); }
.wk-pill.amber button.wk-pill-btn { background: var(--amber-bg); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.wk-pill.amber .wk-pill-dot { background: #d99a00; }
.wk-pill.blue .wk-pill-dot { background: #4f8fe8; }
.wk-pill-i { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid currentColor; font-size: .66rem; font-style: italic; font-family: Georgia, serif; line-height: 1; }
.wk-pill-panel { display: none; position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); width: min(34rem, 86vw); padding: .65rem .85rem; border-radius: 8px; font-size: .86rem; line-height: 1.45; text-align: left; white-space: normal; overflow-wrap: anywhere;
  background: var(--pop); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 10px 28px rgba(20, 8, 40, .22), 0 2px 6px rgba(20, 8, 40, .12); }
.wk-pill-panel p { margin: 0 0 .45rem; } .wk-pill-panel p:last-child { margin-bottom: 0; }
.wk-pill-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }     /* a bridge over the gap, so the panel does not close while the pointer crosses it */
.wk-pill:hover > .wk-pill-panel, .wk-pill:focus-within > .wk-pill-panel, .wk-pill.open > .wk-pill-panel { display: block; }

/* blue (face to face) and purple (online) blocks: pastel, dark text */
:root { --wg-f2f: #bcd5f6; --wg-f2f-2: #d0e2fa; --wg-f2f-d: #7ba3de; --wg-f2f-ink: #10315f;
  --wg-on: #d9c9f2; --wg-on-2: #e7dcf8; --wg-on-d: #a98ad6; --wg-on-ink: #34135a;
  --wg-none: #d8dde5; --wg-none-2: #e6eaf0; --wg-none-d: #a3adbb; --wg-none-ink: #2b3542; }
html[data-theme="dark"] { --wg-f2f: #3d5a8a; --wg-f2f-2: #47669b; --wg-f2f-d: #6f93cf; --wg-f2f-ink: #eaf1ff;
  --wg-on: #5d4a85; --wg-on-2: #6b5696; --wg-on-d: #9a82cc; --wg-on-ink: #f1eaff;
  --wg-none: #454e5c; --wg-none-2: #515b6a; --wg-none-d: #7b8797; --wg-none-ink: #e6ebf2; }
.wg .wg-block { color: var(--wg-none-ink); background: linear-gradient(160deg, var(--wg-none-2), var(--wg-none)); border-left-color: var(--wg-none-d); box-shadow: 0 1px 2px rgba(30, 10, 50, .14); }
.wg .wg-block.f2f { background: linear-gradient(160deg, var(--wg-f2f-2), var(--wg-f2f)); border-left-color: var(--wg-f2f-d); color: var(--wg-f2f-ink); }
.wg .wg-block.online { background: linear-gradient(160deg, var(--wg-on-2), var(--wg-on)); border-left-color: var(--wg-on-d); color: var(--wg-on-ink); }
.wg .wg-block.none { background: linear-gradient(160deg, var(--wg-none-2), var(--wg-none)); border-left-color: var(--wg-none-d); color: var(--wg-none-ink); }
.wg .wg-block:hover { filter: saturate(1.2); box-shadow: 0 8px 18px -10px rgba(30, 10, 50, .55); }
.wg .wg-block.gap { box-shadow: 0 0 0 2px var(--wg-red), 0 1px 2px rgba(30, 10, 50, .14); }
.wg .wg-block.gap:hover { box-shadow: 0 0 0 2px var(--wg-red), 0 8px 18px -10px rgba(30, 10, 50, .55); }
.wg .wg-block.me { box-shadow: 0 0 0 3px var(--wg-gold), 0 0 0 5px rgba(122, 86, 0, .45); }
.wg .wg-block .wg-fam { background: rgba(255, 255, 255, .55); color: inherit; box-shadow: inset 0 0 0 1px var(--wg-gold-d); }
html[data-theme="dark"] .wg .wg-block .wg-fam { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px var(--wg-gold); }
button.wg-amb { color: #1d4fa3; }
.wg-sw.f2f { background: var(--wg-f2f); border-color: var(--wg-f2f-d); }
.wg-sw.online { background: var(--wg-on); border-color: var(--wg-on-d); }
.wg-sw.none { background: var(--wg-none); border-color: var(--wg-none-d); }
/* the overview's day stripes and key, the same two hues, softer */
.tg-strip i.f2f, .tg-key.f2f { background: #8fb7ee; } .tg-strip i.online, .tg-key.online { background: #c3a9ea; }
.tg-strip i.other, .tg-key.other { background: linear-gradient(135deg, #8fb7ee 50%, #c3a9ea 50%); }
html[data-theme="dark"] .tg-strip i.f2f, html[data-theme="dark"] .tg-key.f2f { background: #4a6ea8; } html[data-theme="dark"] .tg-strip i.online, html[data-theme="dark"] .tg-key.online { background: #7a62a8; }
html[data-theme="dark"] .tg-strip i.other, html[data-theme="dark"] .tg-key.other { background: linear-gradient(135deg, #4a6ea8 50%, #7a62a8 50%); }

/* lunch: a plain neutral band with thin lines, like the rest of the grid (no more cream stripes) */
.wg-lunch, html[data-theme="dark"] .wg-lunch { background: color-mix(in srgb, var(--line) 40%, transparent); opacity: 1;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wg-lunch span, html[data-theme="dark"] .wg-lunch span { color: var(--muted); }
.wg-sw.lunch, html[data-theme="dark"] .wg-sw.lunch { background: color-mix(in srgb, var(--line) 40%, var(--surface)); border-color: var(--line-strong); }

/* lecturers needed at each site (module lead / manager) */
.wg-persite { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; margin: 0 0 .6rem; padding: .4rem .6rem; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.wg-ps-lab small { color: var(--muted); }
.wg-psform { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin: 0; }
.wg-psform button.secondary { padding: .15rem .6rem; font-size: .76rem; }
.wg-psform button.secondary.on { background: var(--brand); color: #fff; border-color: var(--brand-dark); }
.wg-ps { display: inline-block; margin-left: .3rem; padding: 0 .4rem; font-size: .6rem; font-weight: 700; line-height: 1.5; border-radius: 999px; background: var(--grey-bg); color: var(--muted); vertical-align: middle; }

/* teaching hours: my own row */
.th-table tr.th-me th { box-shadow: inset 4px 0 0 var(--wg-gold); }

/* double-booked: somebody teaching in two places at once (Jerry, 7 Nov 2026) */
.wg-p.dbl, .wg-pp.dbl, .al-person.dbl { outline: 2px solid #d99a00; outline-offset: 1px; }
.wg-dbm { display: inline-grid; place-items: center; width: .95em; height: .95em; margin-left: .25em; border-radius: 50%; background: #d99a00; color: #2b1d00; font-size: .8em; font-weight: 800; line-height: 1; font-style: normal; }
.wg-dbl { display: inline-block; padding: 0 .4rem; border-radius: 999px; background: #ffe7a3; color: #5a3d00; border: 1px solid #d99a00; font-size: .62rem; font-weight: 800; line-height: 1.5; letter-spacing: .01em; }
.al-dbl { display: block; margin-top: .1rem; color: #8a5b00; font-weight: 700; }
.wk-pill-panel ul { margin: 0 0 .45rem 1.05rem; padding: 0; } .wk-pill-panel li { margin: 0 0 .35rem; }
#week-doubles .wk-pill-panel { max-height: 55vh; overflow: auto; }
.wk-pill + .wk-pill { margin-left: .5rem; }
html[data-theme="dark"] .wg-dbl { background: #4a3a10; color: #ffe7a3; }
html[data-theme="dark"] .al-dbl { color: #ffd166; }
.clash-confirm-form { display: flex; gap: .6rem; align-items: center; margin-top: .2rem; }
/* the same question as a pop-up (week-grid.js): narrower than the session pop-ups, with an amber top edge */
dialog.wg-dialog.clash { width: min(32rem, 94vw); border-top: 5px solid #d99a00; }
.wg-dialog.clash .clash-title { margin: 0 2.2rem .7rem 0; font-size: 1.15rem; color: var(--brand-dark); }
.wg-dialog.clash .callout { margin: 0 0 .9rem; }
.wg-dialog.clash .clash-confirm-form { justify-content: flex-end; }
@media (max-width: 480px) { .wg-dialog.clash .clash-confirm-form { flex-direction: column-reverse; align-items: stretch; } }

/* ---- Utilisation dashboard (admin only): who is busy and who has room ---- */
:root {
  --ut-t: #7ba3de; --ut-m: #a98ad6; --ut-d: #2fb5a8;
  --ut-q0: #eef1f4; --ut-q1: #dff3e6; --ut-q2: #b9e4c5; --ut-q3: #ffe39a; --ut-q4: #ffc08a; --ut-q5: #f4959a;
  --ut-ink: #1d2733;
}
html[data-theme="dark"] {
  --ut-t: #5f86c4; --ut-m: #8c6cc2; --ut-d: #27978c;
  --ut-q0: #2a2338; --ut-q1: #1c3a2a; --ut-q2: #25663f; --ut-q3: #7a5d12; --ut-q4: #8c4b16; --ut-q5: #8e2a31;
  --ut-ink: #ebe6f2;
}
.ut-key { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; margin: .2rem 0 1rem; font-size: .8rem; color: var(--muted); }
.ut-key .k { display: inline-flex; align-items: center; gap: .35rem; }
.ut-key .sep { width: 1px; height: 1rem; background: var(--line); }
.ut-key i { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .12); }
.ut-key i.t, .ut-track i.t { background: var(--ut-t); }
.ut-key i.m, .ut-track i.m { background: var(--ut-m); }
.ut-key i.d, .ut-track i.d { background: var(--ut-d); }
.ut-q0 { background: var(--ut-q0); } .ut-q1 { background: var(--ut-q1); } .ut-q2 { background: var(--ut-q2); }
.ut-q3 { background: var(--ut-q3); } .ut-q4 { background: var(--ut-q4); } .ut-q5 { background: var(--ut-q5); }
.ut-key i.na, .ut-c.na { background: repeating-linear-gradient(135deg, var(--ut-q0) 0 4px, transparent 4px 8px); }

.ut-card { padding-bottom: .6rem; }
.ut-bars { display: grid; gap: .5rem; margin-top: .4rem; }
.ut-row { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(8rem, 1fr) 6.5rem minmax(10rem, auto); gap: .4rem .9rem; align-items: center; padding: .25rem 0; border-top: 1px solid var(--line); }
.ut-row:first-child { border-top: 0; }
.ut-who b { display: block; line-height: 1.15; }
.ut-who span { color: var(--muted); font-size: .76rem; }
.ut-track { display: flex; height: 1.1rem; border-radius: 999px; background: var(--grey-bg); overflow: hidden; outline-offset: 2px; }
.ut-track i { display: block; height: 100%; width: 0; transform-origin: left center; animation: ut-grow .6s var(--ease) both; }
@keyframes ut-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ut-num { text-align: right; line-height: 1.1; }
.ut-num b { display: block; font-size: 1.05rem; }
.ut-num span { color: var(--muted); font-size: .74rem; }
.ut-flags { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.ut-tut { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); }
.ut-tbar { display: inline-block; width: 3.4rem; height: .45rem; border-radius: 999px; background: var(--grey-bg); overflow: hidden; }
.ut-tbar i { display: block; height: 100%; background: var(--ut-d); }
.ut-tbar i.over { background: #d6283a; }

.ut-scroll { overflow-x: auto; padding-bottom: .4rem; }
table.ut-grid { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: .78rem; }
table.ut-grid th, table.ut-grid td { padding: 0; }
.ut-grid .ut-name { text-align: left; white-space: nowrap; padding: .2rem .6rem .2rem 0; position: sticky; left: 0; background: var(--surface); z-index: 1; font-weight: 600; }
.ut-grid .ut-name small { display: block; font-weight: 400; color: var(--muted); font-size: .7rem; }
.ut-grid .ut-wk { font-weight: 600; color: var(--muted); font-size: .7rem; white-space: nowrap; }
.ut-grid .ut-wk span { display: block; padding: 0 .15rem .15rem; }
.ut-grid .ut-wk.now { color: var(--brand); }
.ut-c { min-width: 2.3rem; height: 1.7rem; text-align: center; vertical-align: middle; border-radius: 4px; color: var(--ut-ink); font-variant-numeric: tabular-nums; }
.ut-c.now, .ut-team.now { box-shadow: 0 0 0 2px var(--brand); }
.ut-team { text-align: center; font-weight: 700; background: var(--surface-2); border-radius: 4px; height: 1.7rem; font-variant-numeric: tabular-nums; }
.ut-avg { text-align: right; padding-left: .5rem !important; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.ut-assume p { margin: 0 0 .5rem; }
.ut-assume p:last-child { margin-bottom: 0; }
@media (max-width: 800px) { .ut-row { grid-template-columns: 1fr 5.5rem; } .ut-track { grid-column: 1 / -1; order: 3; } .ut-flags { grid-column: 1 / -1; order: 4; } }
@media (prefers-reduced-motion: reduce) { .ut-track i { animation: none; } }

/* Breaks in learning (CIC) - Phase 20 */
.cic-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.cic-actions form.inline { margin-bottom: 0; }
.cic-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; margin: .4rem 0 1rem; }
.cic-plan-grid > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .8rem; box-shadow: var(--shadow-sm); }
.cic-plan-grid b { display: block; font-size: 1.1rem; line-height: 1.2; }
.cic-plan-grid span { color: var(--muted); font-size: .78rem; }
tr.cic-chosen { background: var(--brand-light); }
.cic-return-mode { display: grid; gap: .45rem; }
.cic-return-mode label { display: block; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.cic-return-mode label:has(:checked) { border-color: var(--brand); background: var(--brand-light); }
.cic-return-mode input[type="date"] { width: auto; margin-left: .3rem; }
.cic-return-mode input:disabled { opacity: .55; }
.email-box { width: 100%; font: inherit; font-family: Consolas, "Courier New", monospace; font-size: .86rem; line-height: 1.45; }
.email-field { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.email-field input { width: 100%; }
.email-field label { color: var(--muted); font-size: .82rem; }
.copy-ok { color: var(--green); font-size: .8rem; margin-left: .4rem; }

/* ---- Results (Phase 21): attainment pills, tables ---- */
.rc { display: inline-block; min-width: 2.2rem; text-align: center; padding: .12rem .5rem; border-radius: 999px; font-size: .82rem; font-weight: 600; line-height: 1.3; }
.rc.ok { background: var(--green-bg); color: var(--green); }
.rc.warn { background: var(--amber-bg); color: var(--amber); }
.rc.bad { background: var(--red-bg); color: var(--red); }
.rc.info { background: var(--brand-light); color: var(--brand-dark); }
.rc.none { background: var(--grey-bg); color: var(--muted); font-weight: 400; }
table.rs th.grp { text-align: center; border-bottom: 1px solid var(--line); }
table.rs td.c, table.rs th.c, table.rs-person td.c { text-align: center; vertical-align: middle; }
table.rs tr.rs-history td { color: var(--muted); }
table.rs tr.rs-mine td, table.rs tr.rs-total td { background: color-mix(in srgb, var(--brand-light) 55%, var(--surface)); }
table.rs tr.rs-total td { font-weight: 600; border-top: 2px solid var(--line); }
table.rs-person tr.rs-top td { border-top: 1px solid var(--line); }
table.rs-person td, table.rs td { vertical-align: middle; }
.bad-text { color: var(--red); }
html[data-theme="dark"] .rc.info { background: #16304f; color: #9cc8ff; }

/* ---- results: health badges, grade distribution bars, side-by-side tables ---- */
.hl { display: inline-block; padding: .08rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 700; cursor: help; }
.hl.green { background: var(--green-bg); color: var(--green); } .hl.amber { background: var(--amber-bg); color: var(--amber); }
.hl.red { background: var(--red-bg); color: var(--red); } .hl.grey { background: var(--grey-bg); color: var(--muted); }
.bandbar { display: flex; width: 9rem; height: .8rem; border-radius: 5px; overflow: hidden; background: var(--grey-bg); }
.bandbar i { display: block; height: 100%; }
.bb-0 { background: #1b6e32; } .bb-1 { background: #3f9a54; } .bb-2 { background: #8cc46f; } .bb-3 { background: #e5c34a; }
.bb-4 { background: #e69a3a; } .bb-5 { background: #d4533d; } .bb-6 { background: #8a8a96; } .bb-7 { background: #3b3b46; }
.bandkey { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .78rem; margin: .4rem 0 1rem; color: var(--muted); }
.bandkey span::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.bandkey .k0::before { background: #1b6e32; } .bandkey .k1::before { background: #3f9a54; } .bandkey .k2::before { background: #8cc46f; } .bandkey .k3::before { background: #e5c34a; }
.bandkey .k4::before { background: #e69a3a; } .bandkey .k5::before { background: #d4533d; } .bandkey .k6::before { background: #8a8a96; } .bandkey .k7::before { background: #3b3b46; }
.dlt { font-size: .74rem; font-weight: 600; margin-left: .25rem; white-space: nowrap; }
.dlt.up { color: var(--green); } .dlt.down { color: var(--red); } .dlt.flat { color: var(--muted); }
table.rs td.rs-best, table.cmp td.rs-best { background: var(--green-bg); box-shadow: inset 0 0 0 1px #9ad0a8; }
table.cmp { border-collapse: collapse; width: 100%; }
table.cmp th, table.cmp td { padding: .45rem .6rem; border-bottom: 1px solid var(--line-faint); vertical-align: top; text-align: left; }
table.cmp thead th { background: var(--surface-2); position: sticky; top: 0; }
table.cmp td.c { text-align: center; }
table.cmp tr.cmp-level td, table.cmp tr.cmp-level th { background: var(--surface-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
table.cmp td .cmp-avg { display: block; font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.cmp-flags { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .82rem; }
.cmp-pick { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 .8rem; }
.cmp-bar { position: sticky; bottom: 0; z-index: 5; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 -6px 18px rgba(0,0,0,.06); display: flex; align-items: center; gap: .8rem; margin-top: .6rem; }
.callout.green { border-color: var(--green); background: var(--green-bg); }

/* ---- learning-outcome tags on the marking sheet ---- */
.ms-los label { display: block; font-size: .85rem; }
.ms-lo-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.ms-lo-list .chip { margin: 0; cursor: pointer; }

/* ---- internal moderation form ---- */
/* three tick-box buttons: one height, a square box on the left, label and who/when beside it */
.im-ticks { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: .6rem 0 1rem; }
.im-tickbtn { display: flex; align-items: center; gap: .7rem; height: 4rem; box-sizing: border-box; padding: 0 .9rem; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; box-shadow: var(--shadow-sm);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease), background var(--t); }
.im-tickbtn:hover:not(:disabled) { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
.im-tickbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.im-tickbtn:disabled { cursor: not-allowed; opacity: .6; box-shadow: none; }
.im-tickbtn .im-box { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border: 2px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: #fff; font-size: 1.1rem; font-weight: 700; line-height: 1; }
.im-tickbtn.done { border-color: var(--green); background: var(--green-bg); }
.im-tickbtn.done .im-box { background: var(--green); border-color: var(--green); }
.im-tk-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.im-tk-text strong { font-size: .95rem; }
.im-tk-text small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html[data-theme="dark"] .im-tickbtn.done { background: color-mix(in srgb, var(--green) 22%, var(--surface)); }
/* mode and first markers are filled in from the assessment and the marking sheets; changing them is the exception */
.im-auto { margin: 0 0 .35rem; }
.im-auto-l { display: block; font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.im-fix { margin: -.15rem 0 .5rem; font-size: .85rem; }
.im-fix summary { cursor: pointer; color: var(--brand); }
.im-fix select { margin-top: .3rem; }
.im-form .card { margin-bottom: 1rem; }
.im-form textarea { width: 100%; box-sizing: border-box; min-height: 3.2rem; }
/* ---- high fail report ---- */
.hfr-form .card { margin-bottom: 1rem; }
.hfr-form textarea, .hfr-form input[type=text] { width: 100%; box-sizing: border-box; }
.hfr-form textarea { min-height: 3.2rem; }
.hfr-form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hfr-form .btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
@media (max-width: 700px) { .hfr-form .grid-2 { grid-template-columns: 1fr; } }
.im-table { width: 100%; border-collapse: collapse; }
.im-table th, .im-table td { border-bottom: 1px solid var(--line-faint, var(--line)); padding: .4rem .5rem; vertical-align: top; text-align: left; }
.im-table td:first-child { min-width: 15rem; }
.im-section th { background: var(--surface-2, var(--brand-light)); font-size: .85rem; letter-spacing: .02em; }
.im-grid { display: grid; gap: 1rem; grid-template-columns: minmax(14rem, 1fr) 3fr; align-items: start; margin-bottom: .8rem; }
@media (max-width: 800px) { .im-grid { grid-template-columns: 1fr; } }
.im-bands { border-collapse: collapse; }
.im-bands th, .im-bands td { border: 1px solid var(--line); padding: .3rem .6rem; text-align: center; font-variant-numeric: tabular-nums; }
.im-trends { margin: .6rem 0; }

/* ---- Phase 24 (10 Nov 2026): frozen table heads, thin result rows, intercalation + started-with-cohort tags ---- */
/* A wide table scrolls INSIDE its frame (never taller than the window), so its head row stays frozen while the rows move beneath it and the
   side scroll bar is always in view; the learner columns stay put when it is scrolled sideways. --site-h is the site header's height (app.js). */
.table-wrap.sticky-head { overflow: auto; max-height: calc(100vh - var(--site-h, 0px) - 1.2rem); }
.table-wrap.sticky-head thead th { position: sticky; top: 0; z-index: 6; box-shadow: 0 1px 0 var(--line); }
.table-wrap.sticky-head thead tr.rs-h2 th { top: var(--rs-h1, 2rem); }
table.rs-thin td.rs-chk, table.rs-thin th.rs-chk { position: sticky; left: 0; z-index: 3; background: var(--surface); }
table.rs-thin td.rs-name, table.rs-thin th.rs-name { position: sticky; left: 1.9rem; z-index: 3; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
table.rs-thin th.rs-chk, table.rs-thin th.rs-name { z-index: 8; background: var(--brand-light); }
table.rs-thin tbody tr:hover td.rs-chk, table.rs-thin tbody tr:hover td.rs-name { background: var(--hover); }
table.rs-thin thead tr.rs-h1 th { height: var(--rs-h1, 2rem); box-sizing: border-box; padding-top: .2rem; padding-bottom: .2rem; }
table.rs-thin th { white-space: nowrap; padding-left: .45rem; padding-right: .45rem; }
table.rs-thin th.c, table.rs-thin td.c { text-align: center; }
table.rs th.grp.l5, table.rs th.l5 { background: color-mix(in srgb, #8a00c2 16%, var(--surface)); }
table.rs th.grp.l6, table.rs th.l6 { background: color-mix(in srgb, #00b8a9 20%, var(--surface)); }
table.rs th.grp { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
table.rs.rs-thin td { padding: .16rem .45rem; white-space: nowrap; vertical-align: middle; }
table.rs-person.rs-thin td { padding: .22rem .5rem; }
table.rs.rs-thin .rc { padding: .04rem .42rem; font-size: .78rem; min-width: 2rem; }
table.rs td.rs-chk, table.rs th.rs-chk { width: 1.6rem; padding-right: 0; }
table.rs td.rs-name { min-width: 15rem; }
table.rs td.rs-c { font-variant-numeric: tabular-nums; }
table.rs td .rs-modtitle { margin-left: .35rem; }
.rs-num { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: .35rem; }
.rs-st { font-size: .66rem; color: var(--muted); background: var(--grey-bg); border-radius: 999px; padding: 0 .4rem; margin-left: .3rem; vertical-align: 1px; }
.rs-key { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; font-size: .8rem; color: var(--muted); margin: -.5rem 0 .9rem; }
.rs-key .rc { margin-right: .2rem; min-width: 0; }
details.rs-modkey { margin: 0 0 .7rem; font-size: .85rem; }
details.rs-modkey ul { columns: 2; column-gap: 2rem; margin: .3rem 0 0; }
/* has intercalated: an amber tag and a softly tinted row, so programme leads preparing for UPAB cannot miss them */
.bil-tag { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .03em; padding: 0 .4rem; border-radius: 4px; background: #ffe3bd; color: #8a4a00; border: 1px solid #f0c27a; margin-left: .3rem; vertical-align: 1px; }
table.rs tr.rs-bil td { background: color-mix(in srgb, #ffe3bd 24%, var(--surface)); }
table.rs tr.rs-bil td.rs-name { box-shadow: inset 3px 0 0 #e0a100; }
/* the cohort the learner started this module with, when a later attempt was with another cohort */
.rc-moved { display: inline-block; font-size: .64rem; font-weight: 700; padding: 0 .3rem; margin-left: .25rem; border-radius: 4px; background: #e3edfb; color: #1c4f9c; border: 1px solid #bcd0ee; vertical-align: 1px; white-space: nowrap; }
.rc-moved.wide { margin-left: 0; font-size: .7rem; }
html[data-theme="dark"] .bil-tag { background: #4a3210; color: #ffcf8f; border-color: #7a5a22; }
html[data-theme="dark"] table.rs tr.rs-bil td { background: color-mix(in srgb, #4a3210 30%, var(--surface)); }
html[data-theme="dark"] .rc-moved { background: #1c2f4d; color: #a9c8f5; border-color: #2d4a78; }

/* ---- Phase 24: moderation-form oversight ---- */
.im-mini-row { display: inline-flex; gap: .2rem; margin-right: .35rem; vertical-align: middle; }
.im-mini { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border: 2px solid var(--line-strong); border-radius: 4px; font-size: .68rem; font-weight: 700; color: var(--muted); background: var(--surface); }
.im-mini.done { background: var(--green); border-color: var(--green); color: #fff; }

/* ---- Phase 24: Prepare for Gateway ---- */
.gw-table .gw-th { text-align: center; max-width: 7rem; }
.gw-table .gw-td { text-align: center; }
.gw-cell { margin: 0; display: inline-block; }
.gw-box { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 2px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: #fff; font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: none; transition: background var(--t), border-color var(--t), transform var(--t) var(--ease); }
.gw-box:hover { border-color: var(--brand); transform: translateY(-1px); }
.gw-box:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gw-box.done { background: var(--green); border-color: var(--green); }
.gw-table tr.gw-done td { background: color-mix(in srgb, var(--green-bg) 55%, var(--surface)); }

/* ---- Phase 25: leave timetable ---- */
.lv-key { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; font-size: .8rem; color: var(--muted); margin: 0 0 .7rem; }
.lv-keyitem { display: inline-flex; align-items: center; gap: .3rem; }
.lv-wrap { max-height: 78vh; }
table.lv { border-collapse: separate; border-spacing: 0; font-size: .78rem; width: max-content; min-width: 100%; }
table.lv th, table.lv td { padding: 0; border-bottom: 1px solid var(--line-faint); border-right: 1px solid var(--line-faint); text-align: center; background: var(--surface); }
table.lv th.lv-name { position: sticky; left: 0; z-index: 2; text-align: left; padding: .25rem .6rem; min-width: 11rem; background: var(--surface); font-weight: 600; white-space: nowrap; }
table.lv thead th { position: sticky; top: 0; z-index: 3; background: var(--brand-light); }
table.lv thead tr.lv-weekband th { top: 0; height: 6px; padding: 0; z-index: 3; }
table.lv thead tr:nth-child(2) th { top: 6px; }
table.lv thead th.lv-name { z-index: 4; }
table.lv .lv-d { min-width: 1.7rem; width: 1.7rem; height: 1.9rem; }
table.lv .lv-d small { display: block; font-size: .6rem; color: var(--muted); font-weight: 400; line-height: 1; }
table.lv.lv-year .lv-d { min-width: 1.5rem; width: 1.5rem; }
table.lv .lv-d.we { background: var(--grey-bg); }
table.lv .lv-d.bh { background: color-mix(in srgb, var(--red-bg) 80%, var(--surface)); }
table.lv thead .lv-d.we, table.lv thead .lv-d.bh { background: inherit; }
table.lv thead th.lv-d.today { box-shadow: inset 0 -3px 0 var(--accent); }
table.lv .lv-tot { min-width: 2.6rem; font-weight: 600; padding: 0 .4rem; }
table.lv tr.lv-group th { text-align: left; padding: .2rem .6rem; background: var(--brand-light); color: var(--brand-dark); font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; position: static; }
table.lv tbody tr:hover th.lv-name, table.lv tbody tr:hover td { background: var(--hover); }
.lv-wb { padding: 0; }
.lv-sev-clash { background: #d9534f !important; }
.lv-sev-busy { background: #e9b949 !important; }
.lv-sev-one, .lv-sev-none { background: transparent; }
.lv-band { display: inline-block; width: 1.1rem; height: .45rem; border-radius: 2px; }
.lv-cell { --c: #cfe9d6; --ink-c: #1e5b2c; display: block; margin: 2px; padding: 0; border-radius: 4px; background: var(--c); color: var(--ink-c); font-size: .66rem; font-weight: 700; line-height: 1.5rem; min-width: 1.3rem; }
.lv-keyitem .lv-cell { display: inline-block; margin: 0; padding: 0 .35rem; }
.lv-cell.k-annual { --c: #cfe9d6; --ink-c: #1e5b2c; }
.lv-cell.k-rasa { --c: #cfe0f7; --ink-c: #1c4f9c; }
.lv-cell.k-csr, .lv-cell.k-rtp { --c: #c9eeea; --ink-c: #0e5c55; }
.lv-cell.k-study { --c: #e2d3f4; --ink-c: #5a2a8a; }
.lv-cell.k-maternity { --c: #dfe3e7; --ink-c: #4a5560; }
.lv-cell.k-other { --c: #f6e3b8; --ink-c: #7a5200; }
.lv-cell.part-am { background: linear-gradient(to right, var(--c) 50%, transparent 50%); }
.lv-cell.part-pm { background: linear-gradient(to left, var(--c) 50%, transparent 50%); }
.lv-cell.status-requested { background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255, 255, 255, .55) 4px 7px); outline: 1px dashed var(--ink-c); outline-offset: -1px; opacity: .85; }
table.lv .lv-y { font-size: .68rem; font-weight: 700; color: #1e5b2c; }
table.lv .lv-y1 { background: #e1f3e6; }
table.lv .lv-y2 { background: #c6e8cf; }
table.lv .lv-y3 { background: #a8dcb6; }
table.lv .lv-y4 { background: #86cb99; }
table.lv .lv-y5 { background: #5fb87a; color: #0e3d1c; }
table.lv .lv-y.status-requested { background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255, 255, 255, .6) 4px 7px); }
.lv-halves { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.lv-form { align-items: flex-end; }
.lv-ent { margin: 0; gap: .3rem; }
.lv-req .callout { margin: .5rem 0; }
.wk-leave { margin: 0 0 .7rem; font-size: .9rem; }
.wk-leave-one { display: inline-block; padding: 0 .5rem; border-radius: 999px; background: #cfe9d6; color: #1e5b2c; font-weight: 600; font-size: .82rem; }
.wk-leave-one.pending { background: var(--amber-bg); color: var(--amber); }
html[data-theme="dark"] .lv-cell.k-annual { --c: #25492f; --ink-c: #bfe8c9; }
html[data-theme="dark"] .lv-cell.k-rasa { --c: #1c2f4d; --ink-c: #a9c8f5; }
html[data-theme="dark"] .lv-cell.k-csr, html[data-theme="dark"] .lv-cell.k-rtp { --c: #12433f; --ink-c: #a8e6df; }
html[data-theme="dark"] .lv-cell.k-study { --c: #3a2656; --ink-c: #d9c2f5; }
html[data-theme="dark"] .lv-cell.k-maternity { --c: #3a424b; --ink-c: #cfd6dd; }
html[data-theme="dark"] .lv-cell.k-other { --c: #4a3a10; --ink-c: #ffe0a0; }
html[data-theme="dark"] table.lv .lv-y1 { background: #1f3a27; } html[data-theme="dark"] table.lv .lv-y2 { background: #25492f; }
html[data-theme="dark"] table.lv .lv-y3 { background: #2d5a3a; } html[data-theme="dark"] table.lv .lv-y4 { background: #37704a; }
html[data-theme="dark"] table.lv .lv-y5 { background: #43895a; color: #fff; }
html[data-theme="dark"] table.lv .lv-y { color: #bfe8c9; }
html[data-theme="dark"] .wk-leave-one { background: #25492f; color: #bfe8c9; }
html[data-theme="dark"] .wk-leave-one.pending { background: #4a3a10; color: #ffe0a0; }

/* ---- Timetable generator, timetable editor, board / role editors, Adjust page (Phase 25) ---- */
.gen-form { align-items: flex-end; }
button.small { padding: .18rem .7rem; font-size: .82rem; }
.te-row-form { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0 .35rem .25rem 0; }
.te-row-form input[type="date"], .te-row-form input[type="text"] { padding: .2rem .4rem; font-size: .86rem; }
.te-suggest summary { font-size: .86rem; }
.te-suggest form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; }
.te-stack { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.te-stack textarea { width: 100%; max-width: 38rem; }
tr.muted-row td { color: var(--muted); }
.adjust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.adjust-card h3 { margin: 0 0 .4rem; font-size: 1.02rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.adjust-card p { margin: 0 0 .5rem; }
.adjust-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 0 !important; }

/* leave flag where people are allocated (Phase 26) */
.wg-onleave{display:inline-block;font-size:.72rem;font-weight:600;padding:.05rem .4rem;border-radius:999px;background:#fde7c7;color:#7a4300;border:1px solid #f0b766;white-space:nowrap}
html[data-theme=dark] .wg-onleave{background:#5a3a0e;color:#ffd9a3;border-color:#a8701f}
.wg-alm{margin-left:.2rem;font-size:.6rem;font-weight:800;padding:0 .2rem;border-radius:3px;background:#f0b766;color:#3d2200}

/* Settings page (Phase 26) */
.set-search input[type=search]{min-width:min(34rem,100%);font-size:1rem;padding:.5rem .7rem}
.set-layout{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:1rem;align-items:start}
.set-nav{position:sticky;top:5.5rem;display:flex;flex-direction:column;gap:.15rem;padding:.6rem}
.set-nav a{padding:.3rem .5rem;border-radius:6px;text-decoration:none}
.set-nav a:hover{background:var(--hover)}
.set-nav a small{color:var(--muted,#777);float:right}
.set-sec{scroll-margin-top:5.5rem}
.set-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:.4rem 1rem;padding:.6rem .2rem;border-top:1px solid var(--line-faint,#eee);scroll-margin-top:6rem}
.set-row.changed{background:linear-gradient(90deg,rgba(217,154,0,.08),transparent 60%)}
.set-row.chip,.set-own .set-row{display:flex;grid-template-columns:none;border-top:0;padding:.3rem 0}
.set-form{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.set-form textarea{width:100%;font-family:ui-monospace,monospace;font-size:.85rem}
.set-note{flex:1 1 8rem;min-width:6rem}
.set-key{font-family:ui-monospace,monospace;font-size:.72rem}
.set-versions,.set-reset,.set-err{grid-column:1/-1}
.set-ver{display:inline-flex;gap:.25rem;align-items:center;margin:0 .5rem .2rem 0;padding:.1rem .4rem;border:1px solid var(--line);border-radius:6px}
.inline-form{display:inline}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width: 900px){.set-layout{grid-template-columns:1fr}.set-nav{position:static;flex-direction:row;flex-wrap:wrap}.set-row{grid-template-columns:1fr}}

/* Permissions page (Phase 26) */
.callout.blue{border-color:#3b6fd1;background:#e8f0fd}
html[data-theme=dark] .callout.blue{background:#1d2b45}
.perm-filter{margin-left:auto;min-width:14rem}
.perm-wrap{max-height:75vh;overflow:auto}
.perm-grid{border-collapse:separate;border-spacing:0}
.perm-grid thead th{position:sticky;top:0;background:var(--surface);z-index:2}
.perm-grid th.perm-role{height:9rem;vertical-align:bottom;padding:.2rem;width:2.2rem}
.perm-grid th.perm-role span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:.78rem}
.perm-grid td.perm-cap{position:sticky;left:0;background:var(--surface);min-width:18rem}
.perm-grid td.perm-cap .hint{display:block;font-family:ui-monospace,monospace;font-size:.7rem}
.perm-grid .perm-cell{text-align:center}
.perm-grid .perm-cell.changed{outline:2px solid #d99a00;outline-offset:-3px;border-radius:4px}
.perm-group th{text-align:left;background:var(--surface-2,#f4f4f6);padding:.3rem .4rem}
.perm-person tr.changed td{background:rgba(217,154,0,.08)}
tr.row-bad td{background:var(--red-bg)}
/* undo menu in the header (Phase 27) */
details.undo-menu > summary.iconbtn{padding:0;border:0;background:none;border-radius:50%}
details.undo-menu > summary::after{display:none}
details.undo-menu .menu-panel{min-width:14rem}
details.undo-menu form{margin:0}
.flash .inline-form{margin-left:.5rem}
/* timetable editor calendar (Phase 27) */
.te-cal-grid{border-collapse:collapse;width:100%;table-layout:fixed}
.te-cal-grid th,.te-cal-grid td{border:1px solid var(--line-faint,#eee);vertical-align:top;padding:.2rem}
.te-cal-grid th.te-wk{width:7.5rem;text-align:left;font-weight:600;white-space:nowrap}
.te-cal-grid th.te-wk small{display:block;font-weight:400;color:var(--muted,#777)}
.te-cal-grid th.te-wk.can-drag{cursor:grab}
.te-cal-grid td.te-day{height:2.6rem}
.te-dn{font-size:.7rem;color:var(--muted,#888);margin-right:.2rem}
.te-ev{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;padding:.05rem .3rem;margin:.05rem 0;border-radius:4px;background:#eee;color:#222}
.te-ev[draggable=true]{cursor:grab}
.te-ev.k-teaching.f2f,.te-ev.k-induction{background:#bcd5f6}
.te-ev.k-teaching.online{background:#d9c9f2}
.te-ev.k-summative,.te-ev.k-formative{background:#fff2a8}
.te-ev.k-resub,.te-ev.k-resub2{background:#a7e3dd}
.te-ev.k-bank_holiday{background:#f6c4c4}
.te-cal-key{margin:.3rem 0}
.te-over.free{outline:2px solid #1e7b34;outline-offset:-2px}
.te-over.busy{outline:2px solid #d99a00;outline-offset:-2px}
.te-over.clash{outline:2px solid #c62828;outline-offset:-2px}
.te-tip{position:fixed;z-index:1000;pointer-events:none;max-width:22rem;padding:.4rem .6rem;border-radius:6px;font-size:.8rem;box-shadow:0 4px 16px rgba(0,0,0,.2);background:#fff;color:#222;border-left:4px solid #1e7b34}
.te-tip.busy{border-left-color:#d99a00}.te-tip.clash{border-left-color:#c62828;background:#fff1f1}
html[data-theme=dark] .te-tip{background:#2a2333;color:#eee}
html[data-theme=dark] .te-ev{color:#111}
button.danger{background:#c62828;color:#fff;border-color:#c62828}
details.report-menu .menu-panel{min-width:18rem}

/* ---- Phase 28: change log, settings tests and plain-word rules, backups, assessment timetables, generator example ---- */
table.changes tr.ch-new td { background: color-mix(in srgb, #f5b400 14%, var(--surface, #fff)); }
table.changes tr.ch-new td:first-child { box-shadow: inset 3px 0 0 #f5b400; }
.set-test { margin: .5rem 0 1rem; padding-top: .4rem; border-top: 1px dashed var(--line, #ddd); }
.set-test .callout ul { margin: .3rem 0 0; }
.set-phrases textarea { font-family: inherit; min-width: 22rem; }
.set-phrases code { background: var(--surface-2, #f4f4f4); padding: 0 .25rem; border-radius: 3px; }
.set-try { margin-top: .3rem; gap: .4rem; flex-wrap: wrap; }
.set-backup table { width: 100%; }
.lt-scroll { overflow-x: auto; }
table.lt-grid { border-collapse: collapse; width: 100%; margin: .4rem 0 1rem; }
table.lt-grid th, table.lt-grid td { border: 1px solid var(--line, #ddd); padding: .35rem .45rem; vertical-align: top; text-align: left; }
table.lt-grid thead th { background: var(--surface-2, #f5e8fb); min-width: 11rem; }
table.lt-grid .lt-time { white-space: nowrap; background: var(--surface-2, #f7f7f7); }
table.lt-grid.edit .lt-time input[type=time] { width: 6.5rem; display: block; margin-bottom: .2rem; }
table.lt-grid.edit select, table.lt-grid.edit thead input[type=text], table.lt-grid.edit thead select { width: 100%; margin-bottom: .2rem; }
table.lt-grid select.lt-spld, .lt-l.lt-spld { background: #fff1c7; color: #4a3500; font-weight: 600; }
.lt-l { padding: .1rem 0; } .lt-other { font-style: italic; color: var(--muted, #666); } .lt-empty { min-height: 1.1rem; }
.lt-ass, .lt-room { font-weight: 400; font-size: .85em; color: var(--muted, #555); }
.lt-assessors { max-height: 12rem; overflow: auto; display: grid; gap: .1rem; font-weight: 400; }
.lt-site { margin: 1rem 0 .2rem; }
.lt-notes { white-space: normal; }
.gen-example .ttwrap { max-height: 70vh; overflow: auto; }
@media print { .no-print, header.site, .rail, .flash, nav { display: none !important; } table.lt-grid { font-size: 10pt; } }
html[data-theme=dark] table.lt-grid select.lt-spld, html[data-theme=dark] .lt-l.lt-spld { background: #5a4300; color: #fff3cf; }
html[data-theme=dark] table.changes tr.ch-new td { background: rgba(245, 180, 0, .14); }

/* Undo (Jerry, 10 Nov 2026): the options show only while hovering the back arrow or when it has keyboard focus */
.undo-hover { position: relative; display: inline-flex; }
.undo-hover > .undo-panel { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 14rem; width: max-content; }
.undo-hover::after { content: ""; position: absolute; left: -6px; right: -6px; top: 100%; height: 8px; }
.undo-hover:hover > .undo-panel, .undo-hover:focus-within > .undo-panel { display: block; }
.undo-hover form { margin: 0; }

/* Pill toggles (Settings, Jerry 10 Nov 2026): a switch instead of a "Yes" tick box. The checkbox stays (keyboard, forms, screen readers). */
.pill-toggle { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; user-select: none; }
.pill-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pill-toggle .pt-track { position: relative; flex: 0 0 auto; width: 2.6rem; height: 1.45rem; border-radius: 999px; background: var(--line-strong, #c9c3d2); transition: background var(--t, .2s); }
.pill-toggle .pt-track::after { content: ""; position: absolute; top: .18rem; left: .18rem; width: 1.09rem; height: 1.09rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease, ease); }
.pill-toggle input:checked + .pt-track { background: var(--brand, #8a00c2); }
.pill-toggle input:checked + .pt-track::after { transform: translateX(1.15rem); }
.pill-toggle input:focus-visible + .pt-track { outline: 2px solid var(--brand, #8a00c2); outline-offset: 2px; }
.pill-toggle .pt-state::after { content: "Off"; font-size: .85rem; color: var(--muted, #666); }
.pill-toggle input:checked ~ .pt-state::after { content: "On"; color: var(--brand-dark, #3b0a57); font-weight: 600; }
.set-own .pill-toggle { display: flex; margin: .35rem 0; }
@media (prefers-reduced-motion: reduce) { .pill-toggle .pt-track, .pill-toggle .pt-track::after { transition: none; } }
html[data-theme="dark"] .pill-toggle .pt-track { background: #4a4258; }
html[data-theme="dark"] .pill-toggle input:checked ~ .pt-state::after { color: #e9d4ff; }

/* live assessment timetables: the kind of timetable above the title (summative / resubmission / 2nd resubmission) */
.lt-kind { margin: 0 0 .15rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }