/* The look of the system, loaded after style.css: the typefaces, the navy
   sidebar, the header, frosted cards over soft light, and the movement
   between and within pages. Colours come from the variables in style.css, so
   the dark theme and Higher contrast in Display keep working. Brand blue stays
   the colour of buttons and links; the navy and amber are the organisation's
   own, as on the public pages and in the emails.

   The typefaces are served from /static/fonts (see OFL.txt there), so no page
   asks another website for anything. */

@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/dm-sans-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/dm-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/dm-sans-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/dm-sans-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/dm-sans-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/dm-sans-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/dm-sans-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/dm-sans-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/poppins-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/poppins-latin-700-normal.woff2) format("woff2"); }

:root {
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Poppins", "DM Sans", -apple-system, "Segoe UI", sans-serif;
  --navy: #0f153a;
  --accent: #fdba50;
  --primary: var(--brand);
  --primary-dark: var(--brand-dark);
  --on-primary: #ffffff;
  --primary-glow: rgba(29, 78, 216, .22);
}

body { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-head); letter-spacing: -.01em; }

/* ---------------- sidebar ---------------- */
/* The sidebar is pinned to the window; this fills the column below it on a
   page longer than the window, so a full-page capture is not cut off. */
.shell { background: linear-gradient(90deg, #0b1030 248px, transparent 248px); }
.sidebar {
  width: 248px; flex: 0 0 248px;
  background: linear-gradient(180deg, #141c50 0%, #0f153a 34%, #0b1030 100%);
  color: #c9cde3;
}
.brand { padding: 22px 20px 14px; gap: 12px; }
.brand-mark img { width: 32px; height: 32px; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; color: #fff;
  letter-spacing: -.01em; }
.sidebar nav { padding: 4px 14px 28px; gap: 4px; }
.nav-group { margin: 20px 12px 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #a7adcc; }
.nav-group:first-child { margin-top: 8px; }
.sidebar nav a {
  position: relative; color: #e1e4f0; padding: 10px 12px; border-radius: 10px;
  font-size: 0.9375rem; border: 1px solid transparent;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar nav a.active {
  background: linear-gradient(90deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .05));
  border-color: rgba(255, 255, 255, .12); color: #fff; font-weight: 600;
}
.sidebar nav a.active::before {
  content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: var(--accent);
}
.nav-count {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: var(--navy); font-size: 0.75rem; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(253, 186, 80, .18);
}

/* ---------------- header ---------------- */
.topbar {
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  padding: 18px 32px; gap: 20px; align-items: center;
}
@media (min-width: 801px) { .topbar { min-height: 92px; } }
.topbar-title { min-width: 0; flex: 1 1 auto; }
.topbar h1 { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.015em; line-height: 1.25; }
.topbar-sub { margin: 4px 0 0; color: var(--muted); font-size: 0.9375rem; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex: none;
  justify-content: flex-end; margin-left: auto; }
.topbar-actions { gap: 10px; }
.topbar-actions:empty { display: none; }
.date-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid var(--btn-line); border-radius: 999px; background: var(--panel);
  color: var(--label-ink); font-size: 0.9rem; white-space: nowrap;
}
.user-menu { position: relative; }
.user-menu summary {
  list-style: none; display: flex; align-items: center; gap: 8px; height: 42px;
  padding: 0 12px 0 5px; border: 1px solid var(--btn-line); border-radius: 999px;
  background: var(--panel); cursor: pointer; font-weight: 600; color: var(--ink);
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu .avatar { width: 32px; height: 32px; background: #fff3dc; color: var(--navy);
  font-size: 0.75rem; font-weight: 700; }
.user-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 264px; z-index: 60;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 21, 58, .16); padding: 8px;
}
.um-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
  display: flex; flex-direction: column; gap: 2px; }
.um-email { color: var(--muted); font-size: 0.8125rem; }
.um-head .role-pill { align-self: flex-start; margin-top: 6px; }
.user-menu-panel a, .user-menu-panel button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px;
  border-radius: 8px; color: var(--ink); text-decoration: none; font: inherit;
  font-size: 0.9375rem; background: none; border: 0; cursor: pointer; text-align: left;
}
.user-menu-panel a:hover, .user-menu-panel button:hover { background: var(--surface-3); }
.user-menu-panel form { margin: 6px 0 0; border-top: 1px solid var(--line); padding-top: 6px; }
.tool-svg { flex: none; }

/* ---------------- page ---------------- */
.content { padding: 26px 32px 56px; }
.flashes { padding: 18px 32px 0; }

.card { border-radius: var(--radius); margin-bottom: 22px; }
.card-head { padding: 18px 20px; }
.card-head h2 { font-family: var(--font-head); font-size: 1.0625rem; font-weight: 600; }
.card-body { padding: 20px; }
/* "Manage courses", "Outbox", "Audit trail" in a card's head: a button. */
.card-head > a.small:not(.btn) {
  display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid var(--btn-line);
  border-radius: 10px; background: var(--panel); color: var(--ink); font-weight: 600;
  font-size: 0.875rem; text-decoration: none;
}
.card-head > a.small:not(.btn):hover { background: var(--surface-3); }

table th, table td { padding: 14px 18px; }
.grid-2 table th, .grid-2 table td { padding: 12px 16px; }
.cell-main { font-weight: 500; }
.cell-sub { color: var(--muted); font-size: 0.8125rem; margin-top: 2px; }
.students-table td { padding-top: 15px; padding-bottom: 15px; }
th { font-size: 0.72rem; letter-spacing: .1em; font-weight: 700; color: var(--label-ink);
  padding-top: 13px; padding-bottom: 13px; }
tbody tr:hover { background: var(--surface-2); }
table td > a:not(.btn):first-child { font-weight: 600; text-decoration: none; }
table td > a:not(.btn):first-child:hover { text-decoration: underline; }
:root.a11y-underline-links table td > a:not(.btn) { text-decoration: underline; }

.pill, .role-pill {
  padding: 3px 10px; font-size: 0.75rem; font-weight: 700;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}

.stat-grid { gap: 18px; margin-bottom: 22px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stat, a.stat { padding: 20px 20px 18px; display: flex; flex-direction: column; }
.stat .label { order: -1; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .12em;
  font-size: 0.72rem; font-weight: 700; color: var(--label-ink); }
.stat .value { font-size: 1.75rem; font-weight: 700; line-height: 1.15; }
.stat-ico { display: none; }
.stat .note { color: var(--muted); font-size: 0.875rem; margin-top: 6px; }
.ctile-label { text-transform: uppercase; letter-spacing: .12em; font-size: 0.72rem; font-weight: 700;
  font-family: var(--font-body); }
.ctile-value { font-weight: 700; }

.btn { border-radius: 10px; padding: 8px 16px; font-weight: 600; font-family: inherit; }
.btn-sm { border-radius: 8px; padding: 5px 12px; }
.btn-primary {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary);
  box-shadow: 0 1px 2px rgba(15, 21, 58, .10), 0 4px 12px var(--primary-glow);
}
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-teal { box-shadow: 0 1px 2px rgba(15, 21, 58, .10); }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number],
input[type=url], input[type=search], select, textarea { border-radius: 10px; }

.flash, .banner { border-radius: 12px; }

/* ---------------- signed out ---------------- */
.auth-wrap {
  background: radial-gradient(80% 50% at 50% 0%, rgba(253, 186, 80, .12), transparent 60%),
              linear-gradient(180deg, #141c50 0%, #0f153a 40%, #0b1030 100%);
}
.auth-card { border-radius: 18px; border-top: 4px solid var(--accent);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.auth-card h1 { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; }

/* ---------------- narrower screens ---------------- */
@media (max-width: 1320px) { .date-chip { display: none; } }
@media (max-width: 1100px) { .topbar-right { flex-wrap: wrap; flex: 0 1 auto; } }
@media (max-width: 800px) {
  .sidebar { width: auto; flex: none; }
  .brand { padding: 12px 16px; }
  .topbar { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .topbar-title { flex: 1 1 100%; }
  .topbar h1 { font-size: 1.25rem; }
  .topbar-sub { font-size: 0.875rem; }
  .topbar-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; flex: 1 1 100%; gap: 10px; }
  .topbar-actions { flex: 1 1 100%; flex-wrap: wrap; }
  .filters .actions { flex-wrap: wrap; }
  .content { padding: 16px 16px 40px; }
  .flashes { padding: 12px 16px 0; }
  .nav-group { margin: 14px 12px 4px; }
  table th, table td { padding: 12px 14px; }
  .shell { background: none; }
}


/* =====================================================================
   Light, glass and motion.
   Lights: soft amber and indigo light behind the page, fixed to the
   window, so cards slide over it as you scroll; a glow behind the logo;
   the highlight on the page you are on blooms when it lands.
   Glass: cards, tiles, the header and the menus are frosted, so the light
   shows through them, blurred.
   Flow: the sidebar and the header hold still while only what differs
   fades across, and the highlight slides to the page you moved to.
   All of it scales with --m, which is 0 for anyone who has asked for less
   movement (their device setting, or Reduce movement in Display).
   ===================================================================== */
:root {
  --m: 1;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --avatar-bg: #fff3dc;
  --light-amber: rgba(253, 186, 80, .44);
  --light-indigo: rgba(70, 92, 220, .16);
  --light-rose: rgba(253, 186, 80, .14);
  --glass-bar: rgba(245, 246, 250, .86);
  --glass-card: rgba(255, 255, 255, .66);
  --glass-menu: rgba(255, 255, 255, .92);
  --glass-edge: rgba(15, 21, 58, .08);
  --glass-th: rgba(248, 249, 252, .70);
  --glass-shadow: 0 1px 1px rgba(15, 21, 58, .03), 0 2px 6px rgba(15, 21, 58, .04),
                  0 16px 36px -18px rgba(15, 21, 58, .18);
}
:root.a11y-theme-dark {
  --light-amber: rgba(253, 186, 80, .16); --light-indigo: rgba(99, 115, 255, .20); --light-rose: rgba(253, 186, 80, .06);
  --glass-bar: rgba(11, 18, 32, .86); --glass-card: rgba(21, 28, 40, .70); --glass-menu: rgba(21, 28, 40, .92);
  --glass-edge: rgba(255, 255, 255, .08); --glass-th: rgba(27, 36, 51, .70);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 36px -18px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) { :root:not(.a11y-theme-light) {
  --light-amber: rgba(253, 186, 80, .16); --light-indigo: rgba(99, 115, 255, .20); --light-rose: rgba(253, 186, 80, .06);
  --glass-bar: rgba(11, 18, 32, .86); --glass-card: rgba(21, 28, 40, .70); --glass-menu: rgba(21, 28, 40, .92);
  --glass-edge: rgba(255, 255, 255, .08); --glass-th: rgba(27, 36, 51, .70);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 36px -18px rgba(0, 0, 0, .6);
} }
@media (prefers-reduced-motion: reduce) { :root { --m: 0; } }
:root.a11y-reduce-motion { --m: 0; }

/* ---- lights ---- */
.main { position: relative; isolation: isolate; background: var(--bg); }
.main::before, .main::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%;
}
.main::before {        /* warm, top right */
  top: -220px; right: -160px; width: 860px; height: 620px;
  background: radial-gradient(closest-side, var(--light-amber), transparent);
}
.main::after {         /* cool, left, below the header */
  top: 18vh; left: 60px; width: 900px; height: 820px;
  background: radial-gradient(closest-side, var(--light-indigo), transparent);
}
.sidebar { isolation: isolate; }
.sidebar::before {
  content: ""; position: absolute; left: -60px; top: -80px; width: 320px; height: 260px; z-index: -1;
  background: radial-gradient(closest-side, rgba(253, 186, 80, .18), transparent); pointer-events: none;
}

/* The highlight on the page you are on. One element, so it can slide. */
.sidebar nav a { isolation: isolate; }
.sidebar nav a.active { background: transparent; border-color: transparent; }
.sidebar nav a.active::before { display: none; }
.nav-ind {
  position: absolute; inset: -1px; z-index: -1; border-radius: 10px; pointer-events: none;
  background: linear-gradient(90deg, rgba(253, 186, 80, .16), rgba(255, 255, 255, .09) 40%, rgba(255, 255, 255, .05));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 6px 18px -10px rgba(0, 0, 0, .55);
  view-transition-name: nav-ind;
}
.nav-ind::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 10px 1px rgba(253, 186, 80, .55);
}
.nav-ind::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px;
  background: radial-gradient(160px 44px at 0% 50%, rgba(253, 186, 80, .28), transparent 70%);
  opacity: .4; animation: crm-bloom calc(var(--m) * .9s) ease-out calc(var(--m) * .2s) backwards;
}
@keyframes crm-bloom { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .4; } }

.tray-choice[aria-pressed="true"] { position: relative; overflow: hidden; }
.tray-choice[aria-pressed="true"]::before {
  content: ""; position: absolute; left: -8%; right: -8%; bottom: 0; height: 100%; pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(253, 186, 80, .30), rgba(253, 186, 80, 0));
  opacity: .75; animation: crm-pool calc(var(--m) * .9s) ease-out calc(var(--m) * .14s) backwards;
}
@keyframes crm-pool { 0% { opacity: .4; } 30% { opacity: 1; } 100% { opacity: .75; } }
.period-tabs a.on { box-shadow: 0 6px 16px -6px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, .18); }

/* ---- glass ----
   The cards are see-through onto the lights behind them, without blurring
   them. Behind a card there is only the page's light, which is soft already,
   so a blur changed nothing anybody could see, and it was being worked out
   again on every frame of every scroll: on a long record or a wide table it
   was most of the work the browser did, and the cause of the stutter. The
   header bar keeps its blur, because pages do scroll under it. */
.card, .stat, .period-tabs {
  background: var(--glass-card); border-color: var(--glass-edge); box-shadow: var(--glass-shadow);
}
th { background: var(--glass-th); }
.card.welcome { background: color-mix(in srgb, var(--tint-blue-bg) 78%, transparent); border-color: var(--tint-blue-line); }
/* A frosted card is a layer of its own, so a list that opens out of one
   (the learner finder, the editor's menus) is lifted above the next card. */
.card:focus-within { position: relative; z-index: 5; }
.topbar {
  position: sticky; top: 0; z-index: 30; background: var(--glass-bar);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--glass-edge);
}
.date-chip, .user-menu summary { background: color-mix(in srgb, var(--panel) 70%, transparent); }
.user-menu-panel {
  background: var(--glass-menu); border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 18px 40px -14px rgba(15, 21, 58, .30);
  max-height: calc(100dvh - 96px); overflow-y: auto;
}
dialog.wn::backdrop {
  background: rgba(15, 21, 58, .26);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
}
/* Solid again where see-through would cost legibility: no blur support,
   a device asking for less transparency, or Higher contrast in Display. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .stat, .period-tabs { background: var(--panel); }
  .topbar { background: var(--surface-2); }
  .user-menu-panel { background: var(--panel); }
  th { background: var(--th-bg); }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .stat, .period-tabs, .user-menu-panel { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .topbar { background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
  th { background: var(--th-bg); }
}
:root.a11y-high-contrast .card, :root.a11y-high-contrast .stat, :root.a11y-high-contrast .period-tabs,
:root.a11y-high-contrast .user-menu-panel { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root.a11y-high-contrast .topbar { background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root.a11y-high-contrast th { background: var(--th-bg); }

/* ---- flow: moving between pages ----
   One even cross-fade of the whole screen. What is the same on both pages
   (the sidebar, the header bar, the background and its light) stays exactly
   where it is; only what differs fades across, and the highlight glides
   from the old page to the new. Both halves run on the same clock and add
   up ("plus-lighter"), so there is never a moment where the page goes thin
   or blank, and nothing is moved, so nothing jumps. */
/* Room kept for the scroll bar on a computer that shows one, so a short
   page and a long one line up instead of shifting sideways. */
@media (min-width: 761px) and (pointer: fine) { html { scrollbar-gutter: stable; } }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: plus-lighter; }
::view-transition-old(root) { animation: crm-out calc(var(--m) * .26s) ease both; }
::view-transition-new(root) { animation: crm-in calc(var(--m) * .26s) ease both; }
::view-transition-group(nav-ind) { animation-duration: calc(var(--m) * .42s); animation-timing-function: var(--ease-out); }
::view-transition-old(nav-ind) { display: none; }
::view-transition-new(nav-ind) { animation: none; }
@keyframes crm-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes crm-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- flow: a page settling in ----
   No block-by-block entrance: pieces arriving one after another read as the
   page jumping. The cross-fade above brings the page in whole. */
@keyframes crm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes crm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes crm-menu { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.user-menu[open] .user-menu-panel { transform-origin: top right; animation: crm-menu calc(var(--m) * .18s) var(--ease-out) backwards; }
.flash { animation: crm-rise calc(var(--m) * .3s) var(--ease-out) backwards; }

/* ---- flow: the next page on its way ----
   Pages are swapped in without a reload (app.js). The page being left stays
   as it is until the next is ready; the link chosen stays lit, and if the
   next page takes more than a moment, a line of light runs along the top of
   the window. Under reduced motion the line simply appears. */
.nav-progress {
  position: fixed; z-index: 1000; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, var(--brand), #6d8bff 55%, var(--accent));
  box-shadow: 0 0 10px rgba(253, 186, 80, .55), 0 0 4px rgba(29, 78, 216, .45);
}
.nav-progress.is-on {
  opacity: 1; transform: scaleX(.88);
  transition: transform calc(var(--m) * 5s) cubic-bezier(.08, .7, .2, 1), opacity .12s linear;
}
.nav-progress.is-done {
  opacity: 0; transform: scaleX(1);
  transition: transform calc(var(--m) * .2s) ease-out, opacity calc(var(--m) * .3s) ease calc(var(--m) * .12s);
}
html.is-navigating, html.is-navigating a, html.is-navigating button { cursor: progress; }
.sidebar nav a.is-pending {
  color: #fff;
  background: linear-gradient(90deg, rgba(253, 186, 80, .12), rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .03));
  border-color: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(253, 186, 80, .10), 0 10px 24px -12px rgba(253, 186, 80, .55);
}
.sidebar nav a.is-pending::after { opacity: 1; }
/* The heading a page swap puts focus on, so a screen reader says where you
   have arrived. It is not a control, so it is not ringed. */
.topbar h1[tabindex="-1"]:focus { outline: none; }
:root.a11y-high-contrast .nav-progress { box-shadow: none; background: var(--ink); }

/* ---- flow: things you touch ---- */
.btn, .sidebar nav a, .user-menu summary, .tray-choice, .period-tabs a, a.stat,
.card-head > a.small, .user-menu-panel a, .user-menu-panel button, tbody tr {
  transition: background-color calc(var(--m) * .18s) ease, border-color calc(var(--m) * .18s) ease,
              color calc(var(--m) * .18s) ease, box-shadow calc(var(--m) * .22s) ease,
              transform calc(var(--m) * .18s) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(.985); }
a.stat:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15, 21, 58, .05), 0 18px 34px -12px rgba(15, 21, 58, .22); }
.btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(15, 21, 58, .12), 0 8px 18px -8px var(--primary-glow); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(15, 21, 58, .12), 0 12px 24px -8px var(--primary-glow); }

/* A short window (200% zoom on a laptop) cannot spare the room for a
   header that stays put, and neither can a phone. */
@media (max-height: 560px) { .topbar { position: static; } }
@media (max-width: 800px) {
  .topbar { position: static; }
  .sidebar { position: relative; }
  .main::after { left: -200px; }
}
@media print {
  .user-menu { display: none !important; }
  .topbar { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .main::before, .main::after { display: none; }
  .card, .stat { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
}


/* ---- you, at the foot of the sidebar ----
   Your name and role; it opens upwards into your account, the guide, what's
   new, your display settings and signing out. */
.sidebar .user-menu { position: relative; margin: 8px 14px 16px; }
.sidebar .user-menu summary {
  height: auto; padding: 8px 10px; gap: 10px; border-radius: 12px; font-weight: 600;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #fff;
}
.sidebar .user-menu summary:hover, .sidebar .user-menu[open] summary { background: rgba(255, 255, 255, .11); }
.sidebar .user-menu summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sidebar .user-menu .avatar { position: relative; width: 34px; height: 34px; flex: none;
  background: #fff3dc; color: var(--navy); font-size: 0.75rem; font-weight: 700; }
.sidebar .user-menu .avatar .wn-dot { position: absolute; top: -2px; right: -2px; margin: 0;
  width: 11px; height: 11px; border: 2px solid #0f153a; box-sizing: content-box; }
.sidebar .who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; line-height: 1.25; }
.sidebar .who-name { color: #fff; font-size: 0.9rem; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sidebar .who-role { color: #a7adcc; font-size: 0.75rem; font-weight: 500; }
.sidebar .user-menu .chev { flex: none; opacity: .8; transform: rotate(180deg);
  transition: transform calc(var(--m) * .2s) var(--ease-out); }
.sidebar .user-menu[open] .chev { transform: none; }
.sidebar .user-menu-panel { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; width: auto; z-index: 5; }
.sidebar .user-menu[open] .user-menu-panel { transform-origin: bottom center;
  animation: crm-menu-up calc(var(--m) * .18s) var(--ease-out) backwards; }
@keyframes crm-menu-up { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.um-new { margin-left: auto; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  background: var(--accent); color: var(--navy); }
.topbar-right .date-chip { margin-right: 2px; }

/* Room for your name at the foot without scrolling on a laptop, and kept in
   view when the list does have to scroll (a short window, 200% zoom). */
.sidebar nav { gap: 2px; padding-bottom: 12px; }
.sidebar nav a { padding-top: 9px; padding-bottom: 9px; }
.nav-group { margin-top: 16px; }
.sidebar .user-menu { position: sticky; bottom: 0; margin: 0; padding: 10px 14px 16px;
  background: linear-gradient(180deg, rgba(11, 16, 48, 0), #0b1030 22%); }
/* Above the pages in the list, which sit at z-index 1 over the hover light
   (see "Hovering over tabs" below). Without this they were drawn over your
   menu when it opened — and took the clicks meant for it — and over your
   name as the list scrolled behind it. */
.sidebar .user-menu { z-index: 2; }
.sidebar .user-menu-panel { left: 14px; right: 14px; bottom: calc(100% - 2px); }
.user-menu-panel { color: var(--ink); }

/* ---- hover glow ----
   Whatever tab the pointer is over lights up, so it is clear what a click
   will do: the sidebar's pages, the dashboard's periods, the Students
   tray's actions, and your name. The keyboard gets the same on focus. */
.sidebar nav a::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 10px; pointer-events: none;
  background: radial-gradient(150px 46px at 0% 50%, rgba(253, 186, 80, .30), transparent 72%);
  opacity: 0; transition: opacity calc(var(--m) * .22s) ease;
}
.sidebar nav a:not(.active):hover, .sidebar nav a:not(.active):focus-visible {
  color: #fff; transform: translateX(2px);
  background: linear-gradient(90deg, rgba(253, 186, 80, .12), rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .03));
  border-color: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(253, 186, 80, .10), 0 10px 24px -12px rgba(253, 186, 80, .55);
}
.sidebar nav a:not(.active):hover::after, .sidebar nav a:not(.active):focus-visible::after { opacity: 1; }
.sidebar nav a:hover .nav-svg, .sidebar nav a:focus-visible .nav-svg {
  opacity: 1; color: var(--accent); filter: drop-shadow(0 0 6px rgba(253, 186, 80, .65));
  transition: color calc(var(--m) * .2s) ease, filter calc(var(--m) * .2s) ease;
}
.sidebar nav a.active:hover .nav-svg { color: #fff; }
.sidebar nav a:hover .nav-count { box-shadow: 0 0 0 3px rgba(253, 186, 80, .25), 0 0 14px rgba(253, 186, 80, .6); }

.period-tabs a:not(.on):hover, .period-tabs a:not(.on):focus-visible {
  color: var(--link); background: color-mix(in srgb, var(--link) 10%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--link) 30%, transparent), 0 8px 18px -10px var(--primary-glow);
}
.tray-choice { position: relative; overflow: hidden; }
.tray-choice:not([aria-pressed="true"]):hover, .tray-choice:not([aria-pressed="true"]):focus-visible {
  color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.tray-choice:not([aria-pressed="true"]):hover::after, .tray-choice:not([aria-pressed="true"]):focus-visible::after {
  content: ""; position: absolute; left: -8%; right: -8%; bottom: 0; height: 100%; pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(253, 186, 80, .28), rgba(253, 186, 80, 0));
}
.sidebar .user-menu summary:hover {
  box-shadow: inset 0 0 0 1px rgba(253, 186, 80, .14), 0 10px 24px -12px rgba(253, 186, 80, .55);
  border-color: rgba(255, 255, 255, .18);
}
.sidebar .user-menu summary:hover .avatar { box-shadow: 0 0 0 3px rgba(253, 186, 80, .25), 0 0 16px rgba(253, 186, 80, .5); }
.sidebar .user-menu .avatar { transition: box-shadow calc(var(--m) * .2s) ease; }
:root.a11y-high-contrast .sidebar nav a::after { display: none; }

/* ---- dashboard periods: one highlight that slides ----
   With scripts on, the lit tab is a single highlight that glides to the
   period you choose and catches the light as it lands. Without them, the
   tab simply lights as before. */
.period-tabs { position: relative; isolation: isolate; }
.period-tabs a { position: relative; z-index: 1; }
.seg-ind {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 7px; pointer-events: none;
  width: var(--w, 0px); transform: translateX(var(--x, 0px));
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 94%, #ffffff) 0%, var(--primary) 60%, color-mix(in srgb, var(--primary) 92%, #000000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 1px 2px rgba(15, 21, 58, .14),
              0 8px 20px -8px var(--primary-glow), 0 0 0 1px color-mix(in srgb, var(--primary) 70%, transparent);
  transition: transform calc(var(--m) * .48s) var(--ease-out), width calc(var(--m) * .48s) var(--ease-out);
  overflow: hidden;
}
.seg-ind.no-anim { transition: none; }
.seg-ind::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-130%);
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .38) 50%, transparent 75%);
}
.seg-ind.landed::after { animation: crm-sheen calc(var(--m) * .9s) var(--ease-out) calc(var(--m) * .2s); }
@keyframes crm-sheen { to { transform: translateX(130%); } }
.period-tabs.has-ind a { transition: color calc(var(--m) * .3s) ease, background-color calc(var(--m) * .18s) ease, box-shadow calc(var(--m) * .22s) ease; }
.period-tabs.has-ind a.on, .period-tabs.has-ind a.on:hover { background: transparent; box-shadow: none; color: var(--on-primary); }

/* ---- the figures ----
   Labels, numbers and notes line up across a row of tiles, however many
   lines a label takes. Hovering a tile lights it from where the pointer is;
   changing the period brings the new numbers in on a wave of light. */
.stat-grid > .stat:not(.ctile) { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.stat-grid > .stat:not(.ctile) .label { align-self: start; }
.stat { position: relative; overflow: hidden; }
.stat > * { position: relative; z-index: 1; }
.stat::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, -30%),
              color-mix(in srgb, var(--brand) 11%, transparent), transparent 62%);
  opacity: 0; transition: opacity calc(var(--m) * .35s) ease;
}
.stat:hover::before { opacity: 1; }
.stat { transition: border-color calc(var(--m) * .25s) ease, box-shadow calc(var(--m) * .3s) ease,
                    transform calc(var(--m) * .25s) var(--ease-out); }
.stat:hover {
  border-color: color-mix(in srgb, var(--brand) 22%, var(--glass-edge));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 5%, transparent),
              0 20px 40px -20px color-mix(in srgb, var(--brand) 42%, transparent), var(--glass-shadow);
}
a.stat:hover { transform: translateY(-2px); }
.stat::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--brand) 10%, transparent) 50%, transparent 70%);
  transform: translateX(-110%); opacity: 0;
}
.stat.updating::after { opacity: 1; animation: crm-sweep calc(var(--m) * 1s) var(--ease-out) calc(var(--i, 0) * var(--m) * 55ms) forwards; }
.stat.updating .value { animation: crm-num calc(var(--m) * .55s) var(--ease-out) calc(var(--i, 0) * var(--m) * 55ms) backwards; }
.stat.updating .label, .stat.updating .note { animation: crm-fade calc(var(--m) * .45s) ease calc(var(--i, 0) * var(--m) * 55ms) backwards; }
@keyframes crm-sweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes crm-num { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.stat .value { font-variant-numeric: tabular-nums; }
:root.a11y-high-contrast .stat::before, :root.a11y-high-contrast .stat::after,
:root.a11y-high-contrast .seg-ind::after { display: none; }

/* Whatever has keyboard focus is never hidden behind the header that stays
   put, or behind your name at the foot of the sidebar (WCAG 2.4.11). The
   header is mostly opaque so its text stays readable over anything that
   scrolls beneath it, a navy email banner included (WCAG 1.4.3). */
html { scroll-padding-top: 112px; }
.sidebar { scroll-padding-bottom: 96px; }
@media (max-width: 800px), (max-height: 560px) { html { scroll-padding-top: 0; } }

/* The inbox's two buttons sit side by side, and stack on a very narrow
   screen rather than pushing the page sideways (WCAG 1.4.10). */
.inbox-actions { white-space: nowrap; }
@media (max-width: 480px) {
  .inbox-actions { white-space: normal; }
  .inbox-actions .btn, .inbox-actions form { display: block !important; width: fit-content; margin: 4px 0 0 auto; }
}

/* =====================================================================
   A learner's record: at a glance across the top, then the record in tabs
   (Profile, Progress, Documents, Conversation, History), each laid out
   across the width rather than down it. Without scripts every section is
   simply shown in turn, as before.
   ===================================================================== */
.learner-hero { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); padding: 0; overflow: hidden; }
.hero-id {
  display: flex; gap: 14px; align-items: center; padding: 20px 22px; border-right: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent 65%);
}
.hero-avatar {
  width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font: 700 1.05rem var(--font-head); color: var(--navy); background: var(--avatar-bg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 22px -10px rgba(253, 186, 80, .7);
}
.hero-who { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hero-who .pill { align-self: flex-start; }
.hero-contact { font-size: 0.875rem; overflow-wrap: anywhere; line-height: 1.35; }
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.glance-item {
  min-width: 0; padding: 14px 18px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: -1px; transition: background-color calc(var(--m) * .2s) ease;
}
.glance-item:hover { background: color-mix(in srgb, var(--link) 5%, transparent); }
.glance dt { margin: 0 0 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--label-ink); }
.glance dd { margin: 0; font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.glance dd.glance-sub { margin-top: 2px; font-weight: 400; font-size: 0.8rem; color: var(--muted); }

/* the tabs */
html:not(.js) .ltabs { display: none; }
.ltabs {
  position: relative; display: flex; gap: 2px; margin: 4px 0 20px; padding: 0 2px;
  overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line);
}
.ltabs::-webkit-scrollbar { display: none; }
.ltab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 12px 16px 14px; border: 0; border-radius: 10px 10px 0 0; background: transparent; cursor: pointer;
  color: var(--muted); font: 600 0.9375rem var(--font-body); overflow: hidden;
  transition: color calc(var(--m) * .22s) ease, background-color calc(var(--m) * .22s) ease;
}
.ltab:hover, .ltab:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--link) 6%, transparent); }
.ltab:not([aria-selected="true"]):hover::before, .ltab:not([aria-selected="true"]):focus-visible::before {
  content: ""; position: absolute; left: -8%; right: -8%; bottom: 0; height: 100%; pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(253, 186, 80, .24), rgba(253, 186, 80, 0));
}
.ltab[aria-selected="true"] { color: var(--ink); }
.ltab:focus-visible { outline: 3px solid var(--focus-outline); outline-offset: -3px; }
.ltab-count {
  padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--surface-3); color: var(--label-ink); transition: background-color calc(var(--m) * .22s) ease, color calc(var(--m) * .22s) ease;
}
.ltab[aria-selected="true"] .ltab-count { background: color-mix(in srgb, var(--link) 14%, var(--panel)); color: var(--link); }
.ltab-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ltab-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.ltab-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent); }
.ltab-dot.quiet { background: var(--chart-other); }
.ltab-ind {
  position: absolute; z-index: 2; left: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; pointer-events: none;
  width: var(--w, 0px); transform: translateX(var(--x, 0px)); background: var(--primary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 55%, transparent);
  transition: transform calc(var(--m) * .48s) var(--ease-out), width calc(var(--m) * .48s) var(--ease-out);
}
.ltab-ind.no-anim { transition: none; }
.ltab-ind::before {
  content: ""; position: absolute; left: -12%; right: -12%; bottom: 3px; height: 40px;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(253, 186, 80, .30), rgba(253, 186, 80, 0)); opacity: .75;
}
.ltab-ind.landed::before { animation: crm-pool calc(var(--m) * .9s) ease-out calc(var(--m) * .1s) both; }

/* the panels
   With scripts on, one panel shows from the first frame: the one early.js
   chose (data-ltab on the root: the tab the address points into, or the one
   last used), or else Profile — so the record never appears on one tab and
   then jumps to another. app.js then takes over with .is-current. */
html.js [data-ltabs] .ltab-panel { display: none; }
html.js [data-ltabs] .ltab-panel.is-current,
html.js:not([data-ltab]) [data-ltabs]:not(.is-ready) #tab-profile,
html[data-ltab="tab-profile"] #tab-profile, html[data-ltab="tab-progress"] #tab-progress,
html[data-ltab="tab-documents"] #tab-documents, html[data-ltab="tab-conversation"] #tab-conversation,
html[data-ltab="tab-history"] #tab-history,
/* The Employer agreements page, the same way: Agreements sent first. */
html.js:not([data-ltab]) [data-ltabs]:not(.is-ready) #sent,
html[data-ltab="sent"] #sent, html[data-ltab="price-list"] #price-list,
html[data-ltab="agreements"] #agreements, html[data-ltab="agreement-settings"] #agreement-settings { display: block; }
.ltab-panel:focus-visible { outline: 3px solid var(--focus-outline); outline-offset: 4px; border-radius: 14px; }
/* Where a browser has no view transitions, the new panel simply fades in. */
.ltab-panel.ltab-enter { animation: ltab-in calc(var(--m) * .26s) var(--ease-out) both; }
@keyframes ltab-in { from { opacity: 0; transform: translateY(6px); } }
.ltab-panel .scroll-list { max-height: none; }
html:not(.js) .ltab-panel + .ltab-panel { margin-top: 4px; }

.profile-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 22px; align-items: start; }
.profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
.profile-grid .field-row { display: contents; }
.profile-grid .field { margin-bottom: 14px; }
.profile-grid .field:has(#welcome_cc) { grid-column: span 2; }
.profile-grid .field:has(#notes) { grid-column: 1 / -1; }
.panel-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.panel-cols-wide { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }

@media (max-width: 1180px) {
  .learner-hero { grid-template-columns: 1fr; }
  .hero-id { border-right: 0; border-bottom: 1px solid var(--line); }
  .profile-layout, .panel-cols, .panel-cols-wide { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* On a phone the glance strip moves sideways, a swipe at a time. */
@media (max-width: 640px) {
  .glance { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .glance-item { scroll-snap-align: start; border-bottom: 0; margin-bottom: 0; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-grid .field:has(#welcome_cc) { grid-column: auto; }
  .ltab { padding: 10px 12px 12px; }
}
@media print {
  .ltabs { display: none !important; }
  html.js [data-ltabs] .ltab-panel { display: block !important; }
}
:root.a11y-high-contrast .ltab-ind::before, :root.a11y-high-contrast .ltab::before { display: none; }

/* The lawful basis card brings a top margin of its own (inline, for the add
   form); beside the profile it lines up with it. */
.profile-layout > div > :first-child, .panel-cols > div > :first-child { margin-top: 0 !important; }

/* Small controls get room: the "other bases" link and the "send new
   documents" fold are at least 24px to press (WCAG 2.5.8). Tick boxes are
   pressed by their label, which is part of the target. */
.linklike, .doc-again > summary { min-height: 24px; padding-block: 2px; }
.linklike { display: inline-flex; align-items: center; }
/* On a narrow screen the tabs keep their names and the bar scrolls sideways. */
.ltab { flex: none; }

/* The other addresses a learner has had, above the conversation that covers
   them all. */
.also-known { margin: 0; padding: 10px 20px; border-bottom: 1px solid var(--line); }

/* Moving between a learner's tabs: the record, the tabs and the page stay
   put, the underline slides, and only the panel changes, fading in with a
   short drift (.ltab-enter above). Opacity and transform only, so it costs
   the browser nothing to draw. */

/* =====================================================================
   Finding learners, kept plain: one row of a search box, Status, Course
   and a Filters button. Everything else waits in the Filters panel, and
   what is applied shows underneath only once something is.
   ===================================================================== */
.finder { padding: 16px 20px; }
.finder-row { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.finder-field { min-width: 0; }
.finder-field > label { margin-bottom: 6px; }
.finder-search { flex: 1 1 320px; }
.finder-search-box { position: relative; }
.finder-search input {
  width: 100%; height: calc(1.5em + 22px); padding: 0 52px 0 42px; border: 1px solid var(--input-line); border-radius: 10px;
  font: inherit; background: var(--surface); color: var(--ink);
  transition: box-shadow calc(var(--m) * .2s) ease, border-color calc(var(--m) * .2s) ease;
}
.finder-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 14%, transparent); }
.finder-search input:focus-visible { outline: 3px solid var(--focus-outline); outline-offset: 2px; }
.finder-search input::-webkit-search-cancel-button { cursor: pointer; }
.finder-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.finder-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); height: 22px; padding: 0 6px;
  display: grid; place-items: center; border: 1px solid var(--btn-line); border-bottom-width: 2px; border-radius: 6px;
  font: 600 0.72rem var(--font-body); color: var(--muted); background: var(--surface-2); pointer-events: none;
  transition: opacity calc(var(--m) * .15s) ease;
}
.finder-search input:focus ~ .finder-kbd, .finder-search input:not(:placeholder-shown) ~ .finder-kbd { opacity: 0; }
.finder-field select { width: auto; min-width: 170px; max-width: 250px; height: calc(1.5em + 22px); border-radius: 10px; }
.finder-row > .btn { height: calc(1.5rem + 22px); border-radius: 10px; }

/* Without scripts, a button sends the search; with them, choices apply. */
html.js .finder-go { display: none; }

/* The Filters button, and the panel it opens inside the card: it pushes
   the list down rather than covering it. */
.finder-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; white-space: nowrap; }
.finder-toggle[aria-expanded="true"] { border-color: var(--brand); color: var(--ink);
  background: color-mix(in srgb, var(--link) 8%, var(--surface)); }
.finder-ico-sm { flex: none; }
.finder-n {
  min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--primary); color: var(--on-primary);
}
.finder-n[hidden] { display: none; }
html:not(.js) .finder-toggle, html:not(.js) .finder-cancel, html:not(.js) .finder-reset { display: none; }

/* Shut, it takes no room and is out of the tab order. Opening and shutting
   are eased by app.js: the height glides with a gentle start and a soft
   landing, the fields drift down into place as it opens, and the cards below
   ride along on their own layers, so nothing is repainted on the way. Without
   scripts it is simply open. */
.finder-pop { height: 0; overflow: hidden; visibility: hidden; }
.finder-panel.is-open > .finder-pop, html:not(.js) .finder-pop { height: auto; visibility: visible; }
.content.is-shifting > * { will-change: transform; }
.finder-pop-inner {
  margin: 14px 0 2px; padding: 16px 16px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--link) 3%, var(--surface));
  container-type: inline-size;
}
/* Five choices: one row of five when there is room, otherwise two columns
   with the documents choice across both, so none is left on its own. */
.finder-pop-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; }
.finder-pop-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
@container (max-width: 860px) {
  .finder-pop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finder-pop-grid > :last-child { grid-column: 1 / -1; }
}
@container (max-width: 560px) {
  .finder-pop-grid, .finder-pop-dates { grid-template-columns: 1fr; }
}
.finder-range { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.finder-range legend { padding: 0; margin-bottom: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--label-ink); }
.range { display: flex; align-items: center; gap: 10px; }
.range input { flex: 1; min-width: 0; }
.range-sep { color: var(--muted); font-size: 0.875rem; }
.finder-pop-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.finder-pop-buttons { display: flex; gap: 8px; margin-left: auto; }

/* What is applied, under the row, once something is. */
.finder-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.finder-applied[hidden] { display: none; }
.finder-applied-label { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.fchip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 3px 2px 12px; border-radius: 999px; font-size: 0.8125rem;
  background: color-mix(in srgb, var(--link) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--link) 22%, transparent);
  color: var(--ink); animation: crm-fade calc(var(--m) * .2s) ease backwards;
}
.fchip b { font-weight: 600; color: var(--label-ink); }
.fchip a {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  color: var(--muted); text-decoration: none; font-size: 1rem; line-height: 1;
}
.fchip a:hover { background: color-mix(in srgb, var(--link) 14%, transparent); color: var(--ink); }
.fchip a:focus-visible { outline: 3px solid var(--focus-outline); outline-offset: 1px; }
.finder-clear { font-size: 0.875rem; font-weight: 600; }

/* Sort sits with the list it orders. */
.list-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-width: 0; }
.list-sort { display: flex; align-items: center; gap: 8px; }
.list-sort label { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.list-sort select { width: auto; height: auto; padding: 5px 30px 5px 10px; border-radius: 8px; font-size: 0.875rem; }


@media (max-width: 760px) {
  .finder-row { gap: 10px; }
  .finder-field:not(.finder-search) { flex: 1 1 140px; }
  .finder-field select { width: 100%; min-width: 0; max-width: none; }
  .finder-toggle { flex: 1 1 100%; justify-content: center; }
  .finder-kbd { display: none; }
  .finder-search input { padding-right: 12px; }
}
@media (max-width: 480px) {
  .finder-pop-inner { padding: 14px 12px 10px; }
}

/* "Still there?", two minutes before the idle sign-out. */
.idle-dialog {
  width: min(420px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); color: var(--ink); box-shadow: 0 24px 60px -20px rgba(15, 21, 58, .45);
}
.idle-dialog::backdrop { background: rgba(15, 21, 58, .32);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.idle-dialog h2 { margin: 0 0 8px; font-size: 1.25rem; }
.idle-dialog p { margin: 0; }
.idle-actions { display: flex; justify-content: flex-end; margin-top: 18px; }

/* =====================================================================
   What's new, in the system's own colours: a navy head lit with amber, as
   the sidebar is, over a frosted body, with a soft glow around it. The
   light blooms once as it opens and then stays still; no movement at all
   for anybody who has asked for less. Solid, without the glow, wherever
   see-through would cost legibility.
   ===================================================================== */
dialog.wn {
  border-color: var(--glass-edge); border-radius: 20px; background: var(--glass-menu);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
}
dialog.wn:modal {
  box-shadow: 0 0 0 1px rgba(253, 186, 80, .16),
              0 0 70px -10px rgba(253, 186, 80, .34),
              0 34px 90px -30px rgba(29, 78, 216, .6),
              0 30px 70px -26px rgba(15, 21, 58, .45);
  animation: wn-rise calc(var(--m) * .5s) var(--ease-out);
}
@keyframes wn-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } }
dialog.wn::backdrop { animation: wn-fade calc(var(--m) * .3s) ease-out; }

dialog.wn .wn-head {
  flex: none; isolation: isolate; overflow: hidden; color: #fff;
  background:
    radial-gradient(200px 120px at -20px -40px, rgba(253, 186, 80, .32), transparent 70%),
    radial-gradient(460px 240px at 105% 130%, rgba(70, 92, 220, .5), transparent 70%),
    linear-gradient(165deg, #172057, var(--navy) 70%);
}
/* The amber stays round the badge and in the corner, never behind the words:
   the eyebrow is amber too, and keeps more than 4.5:1 on what is under it. */
dialog.wn .wn-head::before {          /* the bloom, behind the badge */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90px 80px at 44px 44px, rgba(253, 186, 80, .34), transparent 70%);
  opacity: .5; animation: wn-bloom calc(var(--m) * 1.2s) ease-out calc(var(--m) * .25s) backwards;
}
@keyframes wn-bloom { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .5; } }
dialog.wn .wn-head::after {           /* a line of amber light along its foot */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(253, 186, 80, .7) 28%, rgba(253, 186, 80, .14) 78%, transparent);
}
dialog.wn .wn-badge {
  border-radius: 12px; background: var(--avatar-bg); color: var(--navy);
  box-shadow: 0 0 0 4px rgba(253, 186, 80, .2), 0 0 18px rgba(253, 186, 80, .4);
}
dialog.wn .wn-eyebrow { color: var(--accent); letter-spacing: .12em; }
dialog.wn .wn-head h2 { color: #fff; font-size: 1.375rem; }
dialog.wn .wn-head p { color: rgba(255, 255, 255, .8); }

dialog.wn .wn-item { border-bottom: 1px solid var(--glass-edge); }
dialog.wn .wn-item:last-child { border-bottom: 0; }
/* Each icon on a tile catching the same light: amber from above, a blue
   halo round it, and the line of the icon itself softly lit. The light
   blooms once on each in turn as the popup opens. */
dialog.wn .wn-icon {
  position: relative; isolation: isolate; color: var(--link);
  background: radial-gradient(56px 34px at 30% 0%, rgba(253, 186, 80, .34), transparent 72%),
              color-mix(in srgb, var(--brand) 7%, var(--panel));
  border-color: color-mix(in srgb, var(--brand) 20%, var(--glass-edge));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
              0 0 0 3px color-mix(in srgb, var(--brand) 5%, transparent),
              0 8px 20px -8px rgba(29, 78, 216, .38),
              0 0 20px -4px rgba(253, 186, 80, .42);
}
dialog.wn .wn-icon .wn-svg { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--link) 45%, transparent)); }
dialog.wn .wn-icon::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(253, 186, 80, .30), transparent 70%);
  opacity: 0; animation: wn-icon-bloom calc(var(--m) * 1.1s) ease-out calc(var(--m) * (.45s + var(--i, 0) * .12s)) backwards;
}
@keyframes wn-icon-bloom { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
dialog.wn .wn-item:nth-child(2) .wn-icon { --i: 1; }
dialog.wn .wn-item:nth-child(3) .wn-icon { --i: 2; }
dialog.wn .wn-item:nth-child(4) .wn-icon { --i: 3; }
dialog.wn .wn-item:nth-child(n+5) .wn-icon { --i: 4; }
dialog.wn .wn-foot { border-top-color: var(--glass-edge); background: color-mix(in srgb, var(--surface-2) 72%, transparent); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  dialog.wn { background: var(--panel); }
  dialog.wn .wn-foot { background: var(--surface-2); }
}
@media (prefers-reduced-transparency: reduce) {
  dialog.wn { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
  dialog.wn .wn-foot { background: var(--surface-2); }
}
:root.a11y-high-contrast dialog.wn { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root.a11y-high-contrast dialog.wn:modal { box-shadow: 0 24px 60px rgba(15, 21, 58, .45); }
:root.a11y-high-contrast dialog.wn .wn-head { background: var(--navy); }
:root.a11y-high-contrast dialog.wn .wn-head::before,
:root.a11y-high-contrast dialog.wn .wn-head::after { display: none; }
:root.a11y-high-contrast dialog.wn .wn-badge,
:root.a11y-high-contrast dialog.wn .wn-icon { box-shadow: none; }
:root.a11y-high-contrast dialog.wn .wn-icon { background: color-mix(in srgb, var(--brand) 7%, var(--panel)); }
:root.a11y-high-contrast dialog.wn .wn-icon .wn-svg { filter: none; }
:root.a11y-high-contrast dialog.wn .wn-icon::after { display: none; }
:root.a11y-high-contrast dialog.wn .wn-head p { color: #fff; }
:root.a11y-high-contrast dialog.wn .wn-foot { background: var(--surface-2); }

/* =====================================================================
   The dashboard's lists, compact, in two cards of tabs.
   Tighter rows and smaller controls; each list scrolls inside its card
   instead of stretching the page. The scroll bar is always shown, slim and
   in the brand blue, so a list that scrolls looks like one; the header row
   stays put while the rows move; and the last row fades out while there is
   more below it.
   ===================================================================== */
.dash-pair .card-head { padding: 12px 16px; }
.dash-count {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; vertical-align: 2px;
  font: 600 0.72rem/1.5 var(--font-body); color: var(--label-ink);
  background: color-mix(in srgb, var(--brand) 8%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--glass-edge));
}
.dash-pair table th, .dash-pair table td { padding: 7px 14px; font-size: 0.8438rem; line-height: 1.35; }
.dash-pair table th { font-size: 0.66rem; white-space: nowrap; }
.dash-pair .pill { padding: 1px 8px; font-size: 0.7rem; }
.dash-pair .btn-sm { padding: 3px 10px; font-size: 0.75rem; min-height: 26px; border-radius: 7px; }
.dash-course td:first-child { font-weight: 500; }
.dash-when { white-space: nowrap; font-size: 0.75rem; }
.dash-recent td .small { font-size: 0.75rem; line-height: 1.35; }
.dash-pair .timeline li { padding: 7px 0; line-height: 1.35; }

/* The scrolling part. */
.dash-scroll { position: relative; overflow: auto; overscroll-behavior: contain; max-height: 22rem; }
/* The list scrolls as a whole, so the table inside does not scroll on its
   own (which would also stop its header row staying put). */
.dash-scroll > .table-wrap { overflow: visible; }
.dash-scroll:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: -2px; border-radius: 0 0 14px 14px; }
.dash-scroll::-webkit-scrollbar { width: 10px; }
.dash-scroll::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--brand) 6%, transparent); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box; margin: 6px 0;
}
.dash-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brand) 42%, transparent); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box; min-height: 36px;
}
.dash-scroll::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--brand) 68%, transparent); }
@supports (-moz-appearance: none) {
  .dash-scroll { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 35%, transparent) transparent; }
}
/* The header row stays at the top of the list while it scrolls. */
.dash-scroll thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--line), 0 6px 10px -10px rgba(15, 21, 58, .35);
}
/* The rows below fade out while there are more to come (where the browser
   can tell how far a list is scrolled; elsewhere they simply stop). */
@property --dash-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }
@supports (animation-timeline: scroll()) {
  .dash-scroll {
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--dash-fade)), transparent);
    animation: dash-more linear both; animation-timeline: scroll(self);
  }
  @keyframes dash-more { 0%, 92% { --dash-fade: 28px; } 100% { --dash-fade: 0px; } }
}

:root.a11y-high-contrast .dash-scroll { mask-image: none; animation: none; }
:root.a11y-high-contrast .dash-scroll thead th { background: var(--th-bg); box-shadow: inset 0 -1px 0 var(--line); }


/* ---- the dashboard's lists, in tabs ----
   Two cards of tabs, in the look of a learner's record: the underline glides
   to the tab chosen and catches the light; the list fades in. Every tab's
   list is the same height, so changing tab never moves the page. Without
   scripts the tabs are not shown and every list appears under its own
   heading, as before. */
.dtabs-head { padding: 0 14px 0 8px; align-items: stretch; flex-wrap: nowrap; gap: 8px; }
html:not(.js) .dtabs { display: none; }
.dtabs { position: relative; display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dtabs::-webkit-scrollbar { display: none; }
.dtab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 15px 12px 14px; border: 0; border-radius: 10px 10px 0 0; background: transparent; cursor: pointer;
  color: var(--muted); font: 600 0.9rem var(--font-head); letter-spacing: -.005em; overflow: hidden;
  transition: color calc(var(--m) * .22s) ease, background-color calc(var(--m) * .22s) ease;
}
.dtab:hover, .dtab:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--link) 6%, transparent); }
.dtab:not([aria-selected="true"]):hover::before, .dtab:not([aria-selected="true"]):focus-visible::before {
  content: ""; position: absolute; left: -8%; right: -8%; bottom: 0; height: 100%; pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(253, 186, 80, .24), rgba(253, 186, 80, 0));
}
.dtab[aria-selected="true"] { color: var(--ink); }
.dtab:focus-visible { outline: 3px solid var(--focus-outline); outline-offset: -3px; }
.dtab .ltab-count { font-family: var(--font-body); font-size: 0.7rem; }
.dtab[aria-selected="true"] .ltab-count { background: color-mix(in srgb, var(--link) 14%, var(--panel)); color: var(--link); }
.dtabs .ltab-ind { bottom: 0; }
.dtabs-links { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
html.js .dtabs-links a:not(.is-current) { display: none; }
html.js .dtab-title { display: none; }
.dtab-title { margin: 0; padding: 14px 18px 6px; font-size: 0.9375rem; }
html.js [data-card-tabs] .dtab-panel:not(.is-current) { display: none; }
.dtab-panel.is-entering { animation: crm-fade calc(var(--m) * .24s) ease both; }
.dash-tabbed .dash-scroll.card-body:not(.tight) { padding: 2px 16px; }
@media (min-width: 1001px) {
  .dash-tabbed .dtab-panel .dash-scroll { height: 25rem; max-height: none; }
}

/* =====================================================================
   Hovering over tabs: one light that flows between them (app.js).
   Each edge is its own property, so the leading edge can move first and
   the trailing one catch up: it stretches as it travels and settles when
   it lands. Where it is in use, the tabs' own hover backgrounds step
   aside; their text and icons still brighten.
   ===================================================================== */
.has-glide { position: relative; }
.glide {
  position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; pointer-events: none;
  box-sizing: border-box; opacity: 0;
  transition-property: transform, width, height, opacity;
  transition-duration: 0s, 0s, 0s, .2s;
  /* Quick to set off, gentle to arrive. */
  transition-timing-function: cubic-bezier(.32, .72, 0, 1), cubic-bezier(.32, .72, 0, 1),
                              cubic-bezier(.32, .72, 0, 1), ease;
  will-change: transform, opacity;
}
.glide.is-on { opacity: 1; }
.glide::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }

/* The sidebar: amber light on the navy, as the page you are on is lit. */
.sidebar nav > .glide {
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(253, 186, 80, .13), rgba(255, 255, 255, .075) 55%, rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 10px 24px -12px rgba(253, 186, 80, .55);
}
.sidebar nav > .glide::after { background: radial-gradient(150px 46px at 0% 50%, rgba(253, 186, 80, .26), transparent 72%); }
.sidebar nav.has-glide > a { z-index: 1; }

/* A learner's tabs and the dashboard's cards of tabs: a soft blue wash
   with the amber pool of light along its foot. */
.ltabs > .glide, .dtabs > .glide {
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--link) 7%, transparent);
}
.ltabs > .glide::after, .dtabs > .glide::after {
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(253, 186, 80, .14), rgba(253, 186, 80, 0));
}
/* The dashboard's periods: under the lit period, whichever was set up first. */
.period-tabs > .glide {
  z-index: -1; border-radius: 7px;
  background: color-mix(in srgb, var(--link) 10%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--link) 26%, transparent), 0 8px 18px -10px var(--primary-glow);
}

:root:not(.a11y-high-contrast) .sidebar nav.has-glide a:not(.active):hover,
:root:not(.a11y-high-contrast) .sidebar nav.has-glide a:not(.active):focus-visible {
  background: transparent; border-color: transparent; box-shadow: none;
}
:root:not(.a11y-high-contrast) .sidebar nav.has-glide a:not(.active):hover::after,
:root:not(.a11y-high-contrast) .sidebar nav.has-glide a:not(.active):focus-visible::after { opacity: 0; }
:root:not(.a11y-high-contrast) .ltabs.has-glide .ltab:hover, :root:not(.a11y-high-contrast) .ltabs.has-glide .ltab:focus-visible,
:root:not(.a11y-high-contrast) .dtabs.has-glide .dtab:hover, :root:not(.a11y-high-contrast) .dtabs.has-glide .dtab:focus-visible { background: transparent; }
:root:not(.a11y-high-contrast) .ltabs.has-glide .ltab::before, :root:not(.a11y-high-contrast) .dtabs.has-glide .dtab::before { display: none; }
:root:not(.a11y-high-contrast) .period-tabs.has-glide a:not(.on):hover,
:root:not(.a11y-high-contrast) .period-tabs.has-glide a:not(.on):focus-visible { background: transparent; box-shadow: none; }
:root.a11y-high-contrast .glide { display: none; }