/* Edyex "command post" design: light and dark themes.
 *
 * Loaded after Bootstrap and app.css. Colours are tokens: app.css reads
 * --surface, --ink, --muted... and this file gives them a value per theme.
 * theme.js sets data-theme (and Bootstrap's data-bs-theme) before the first
 * paint, from the visitor's choice or, in automatic mode, the local hour.
 */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/jetbrains-mono-latin-wght-normal.b058178d7f30.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/literata-latin-wght-normal.3dfc6740cd53.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("../fonts/literata-latin-wght-italic.171ab726ef88.woff2") format("woff2"); }

:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-read: "Literata", Georgia, "Times New Roman", serif;
  --radius-panel: .5rem;
  --radius-control: .7rem;

  /* Light theme. Brand colours fill surfaces; their darker shades carry text. */
  --bg: #F3F6FB;
  --grid: rgba(20, 125, 255, .06);
  --chrome: rgba(255, 255, 255, .94);
  --surface: #FFFFFF;
  --surface-2: #F7F9FD;
  --field: #FFFFFF;
  --track: rgba(20, 125, 255, .12);
  --line: rgba(11, 23, 57, .09);
  --line-strong: rgba(11, 23, 57, .17);
  --ink: #0B1739;
  --muted: #4A5D80;
  --faint: #56698F;
  --text-blue: #0B6BE0;
  --text-green: #08724F;
  --text-amber: #8A6500;
  --text-red: #A70F23;
  --tint-blue: #EAF3FF;
  --tint-green: #EAFBF3;
  --tint-amber: #FFF8E1;
  --tint-red: #FFF0F2;
  --action: #0B6BE0;
  --action-hover: #0B4FA8;
  --on-action: #FFFFFF;
  --active-bg: rgba(20, 125, 255, .10);
  --hud: #147DFF;
  /* Energy yellow: a touch on what gets going (start buttons, the current
     place) and on what is achieved. A fill, never text on a light surface. */
  --energy: #FFC21A;
  --energy-hover: #FFB000;
  --on-energy: #241A00;
  --tint-energy: #FFF3C4;
  --stage: #0B1739;
  --shadow: 0 1px 2px rgba(11, 23, 57, .04), 0 12px 32px rgba(35, 44, 94, .07);
  --shadow-raised: 0 1px 2px rgba(11, 23, 57, .05), 0 22px 54px rgba(35, 44, 94, .12);

  --primary: #147DFF;
  --primary-dark: #0B5FC7;
  --bs-body-font-family: var(--font-sans);

  /* Synaptic study timer (synapse-timer.js): ink-blue lines on a light
     panel, glows painted normally. */
  --syn-matter: rgba(20, 125, 255, .07);
  --syn-edge: rgba(11, 95, 199, .13);
  --syn-edge-lit: rgba(20, 125, 255, .55);
  --syn-node: rgba(11, 95, 199, .28);
  --syn-node-lit: #147DFF;
  --syn-core: #0B4FA8;
  --syn-track: rgba(11, 23, 57, .10);
  --syn-arc: #147DFF;
  --syn-focus: #12B981;
  --syn-head: #FFFFFF;
  --syn-blend: source-over;
  --syn-glow-strength: .7;
  --syn-glow-rgb: 57, 167, 255;
  --syn-focus-rgb: 18, 185, 129;
  --syn-spark-rgb: 11, 95, 199;
  --syn-bolt-rgb: 20, 125, 255;
  --bs-link-color-rgb: 11, 107, 224;
  --bs-link-hover-color-rgb: 11, 79, 168;
}

[data-theme="dark"] {
  color-scheme: dark;
  /* Three depth levels: background, panels, nested controls. Each level is
     lighter, bordered and shadowed so components stand out from the ink. */
  --bg: #070D20;
  --grid: rgba(57, 167, 255, .045);
  --chrome: #0C1530;
  --surface: #111C38;
  --surface-2: #1A2747;
  --field: #16223F;
  --track: rgba(140, 180, 255, .2);
  --line: rgba(120, 165, 255, .2);
  --line-strong: rgba(120, 165, 255, .32);
  --ink: #E8F0FF;
  --muted: #A3B4D4;
  --faint: #8396BC;
  --text-blue: #8CCBFF;
  --text-green: #7BE3BD;
  --text-amber: #F4C542;
  --text-red: #FF9B92;
  --tint-blue: #173258;
  --tint-green: #113242;
  --tint-amber: #2C3039;
  --tint-red: #32273F;
  --action: #39A7FF;
  --action-hover: #6FBBFF;
  --on-action: #04101F;
  --active-bg: rgba(57, 167, 255, .16);
  --hud: #39A7FF;
  --energy: #FFCF3D;
  --energy-hover: #FFDC70;
  --on-energy: #1F1700;
  --tint-energy: rgba(255, 207, 61, .14);
  --stage: #0C1530;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .4);
  --shadow-raised: inset 0 1px 0 rgba(255, 255, 255, .07), 0 20px 48px rgba(0, 0, 0, .5);

  --primary: #39A7FF;
  --primary-dark: #8CCBFF;
  --mint: #2FD39A;
  --bs-link-color-rgb: 140, 203, 255;

  /* Synaptic study timer: light that adds up on the dark panel. */
  --syn-matter: rgba(57, 167, 255, .06);
  --syn-edge: rgba(120, 160, 220, .10);
  --syn-edge-lit: rgba(57, 167, 255, .36);
  --syn-node: rgba(140, 170, 220, .35);
  --syn-node-lit: #BFE3FF;
  --syn-core: #FFFFFF;
  --syn-track: rgba(255, 255, 255, .08);
  --syn-arc: #39A7FF;
  --syn-head: #FFFFFF;
  --syn-blend: lighter;
  --syn-glow-strength: 1;
  --syn-spark-rgb: 225, 242, 255;
  --syn-bolt-rgb: 140, 203, 255;
  --bs-link-hover-color-rgb: 185, 223, 255;
}

/* Bootstrap reads its own variables: point them at the theme tokens. */
:root, [data-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-heading-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--faint);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--line-strong);
  --bs-border-color-translucent: var(--line);
}

/* Page ground: a quiet blueprint grid instead of glows and dots. */
body.app-shell {
  color: var(--ink);
  font-family: var(--font-sans);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
body.app-shell::before { display: none; }

h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -.025em; }
.display-title, .analytics-title, .flash-title { font-weight: 850; letter-spacing: -.045em; }
.mono, .eyebrow, .metric-label, .timer-value, .deck-label, .card-kicker, .language-code, .footer-heading, .footer-bottom {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.eyebrow { color: var(--text-blue); font-size: .72rem; font-weight: 600; letter-spacing: .14em; }
.metric-label { color: var(--faint); font-size: .68rem; font-weight: 500; letter-spacing: .12em; }
.metric-value { font-variant-numeric: tabular-nums; }
.text-secondary { color: var(--muted) !important; }
.gradient-text { background: linear-gradient(90deg, var(--text-blue), var(--text-amber), var(--text-green)); -webkit-background-clip: text; background-clip: text; }

/* Panels: instrument-like, opaque, with a hairline and a soft shadow. */
.glass-card, .metric-card, .form-panel, .deck-card, .company-principle, .company-hero-copy,
.plan-card:not(.premium), .faq-contact, .faq-accordion .accordion-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  backdrop-filter: none;
}
.metric-card::before { height: 2px; }
.deck-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-raised); }
.quick-link { border-radius: var(--radius-control); background: var(--surface-2); }
.quick-link:hover { color: var(--text-blue); border-color: var(--line-strong); background: var(--active-bg); }
.quick-icon { border-radius: .55rem; }

/* Title bar: the application frame, with the brand journey as a hairline. */
.app-navbar {
  position: sticky;
  padding: .55rem 0;
  background: var(--chrome);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.app-navbar::after {
  content: "";
  position: absolute;
  inset: auto 0 -3px;
  height: 2px;
  background: var(--journey-gradient);
  opacity: .85;
  pointer-events: none;
}
.brand-copy { font-weight: 800; letter-spacing: -.02em; }
.brand-copy small { font-family: var(--font-mono); color: var(--faint); letter-spacing: .14em; }
.app-navbar .nav-link { color: var(--muted); border-radius: .6rem; white-space: nowrap; }
.app-navbar .mode-switch { white-space: nowrap; }
.app-navbar .nav-link:hover { color: var(--ink); background: var(--active-bg); }
.app-navbar .nav-link.active { color: var(--ink); background: var(--active-bg); box-shadow: inset 0 -2px 0 var(--energy); }
.app-navbar .dropdown-item:hover { color: var(--ink); background: var(--active-bg); }
.language-code { color: var(--text-blue); background: var(--active-bg); }
.mode-switch { border-radius: var(--radius-control); }

/* Side rail: the application's main navigation for signed-in members. */
.app-frame { display: flex; align-items: stretch; min-width: 0; }
@media (min-width: 992px) {
  /* The rail sticks to the viewport; this column keeps its band continuous
     down to the footer. */
  .app-frame { background: linear-gradient(to right, var(--chrome) calc(6.25rem - 1px), var(--line) calc(6.25rem - 1px), var(--line) 6.25rem, transparent 6.25rem); }
}
.app-content { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.app-rail {
  position: sticky;
  top: var(--app-header-height, 4.25rem);
  align-self: flex-start;
  flex: 0 0 6.25rem;
  height: calc(100vh - var(--app-header-height, 4.25rem));
  padding: .9rem .5rem 1.25rem;
  overflow-y: auto;
  background: var(--chrome);
  border-right: 1px solid var(--line);
  z-index: 1010;
  scrollbar-width: thin;
}
.app-rail-list { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.app-rail-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  min-height: 3.6rem;
  padding: .6rem .25rem;
  color: var(--muted);
  border-radius: .7rem;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.app-rail-link i { font-size: 1.2rem; line-height: 1; }
.app-rail-link:hover { color: var(--ink); background: var(--active-bg); }
.app-rail-link.active { color: var(--ink); background: var(--active-bg); box-shadow: inset 3px 0 0 var(--energy); }
.app-rail-link.active i { color: var(--hud); }
.app-rail-heading { margin: 1.1rem 0 .4rem; color: var(--faint); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.app-rail-list.is-secondary .app-rail-link { min-height: 3.1rem; font-size: .68rem; }
.app-rail-list.is-secondary .app-rail-link i { font-size: 1.05rem; }
@media (max-width: 991.98px) {
  /* Phones and tablets: the rail becomes a scrollable strip under the title bar. */
  .app-frame { flex-direction: column; }
  .app-rail {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: none;
    width: 100%;
    height: auto;
    padding: .35rem .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .app-rail-list { display: flex; gap: .25rem; }
  .app-rail-link, .app-rail-list.is-secondary .app-rail-link { flex-direction: row; min-height: 2.75rem; padding: .45rem .7rem; white-space: nowrap; font-size: .8rem; }
  .app-rail-link.active { box-shadow: inset 0 -2px 0 var(--energy); }
  .app-rail-heading { display: none; }
  .app-rail-list.is-secondary { padding-left: .5rem; border-left: 1px solid var(--line); }
  /* Notices open below the title bar and this strip, never under them. */
  body:has(.app-rail) .edyex-notices { top: calc(var(--app-header-height, 4.25rem) + var(--app-rail-strip-height, 3.5rem) + .6rem); }
}
@media (prefers-reduced-motion: reduce) { .app-rail-link { transition: none; } }

/* Device notification toggle in the title bar. */
.notification-switch { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; }
.notification-switch .notification-icon-on, .notification-switch.is-active .notification-icon-off { display: none; }
.notification-switch.is-active .notification-icon-on { display: inline; color: var(--text-blue); }
.notification-switch .notification-dot { position: absolute; top: .55rem; left: 1.45rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--led-attention); box-shadow: 0 0 0 2px var(--surface); }
.notification-switch.is-active .notification-dot { background: var(--text-green); }
.notification-switch:disabled { opacity: .55; }

/* Theme picker in the title bar. */
.theme-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; }
.theme-switch .theme-icon-dark, [data-theme="dark"] .theme-switch .theme-icon-light { display: none; }
[data-theme="dark"] .theme-switch .theme-icon-dark { display: inline; }
.theme-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.theme-menu .dropdown-item .bi-check2 { margin-left: auto; visibility: hidden; }
.theme-menu .dropdown-item.active { color: var(--ink); background: var(--active-bg); }
.theme-menu .dropdown-item.active .bi-check2 { visibility: visible; }

/* Menus, modals, tables, lists and accordions follow the surfaces. */
.dropdown-menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-color: var(--ink);
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--active-bg);
  --bs-dropdown-link-active-color: var(--ink);
  --bs-dropdown-link-active-bg: var(--active-bg);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-divider-bg: var(--line);
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-raised) !important;
}
.modal { --bs-modal-bg: var(--surface); --bs-modal-border-color: var(--line); --bs-modal-header-border-color: var(--line); --bs-modal-footer-border-color: var(--line); }
.modal-content { box-shadow: var(--shadow-raised); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-striped-bg: var(--surface-2); --bs-table-hover-bg: var(--active-bg); }
.list-group { --bs-list-group-bg: var(--surface); --bs-list-group-color: var(--ink); --bs-list-group-border-color: var(--line); --bs-list-group-action-hover-bg: var(--active-bg); }
.accordion { --bs-accordion-bg: var(--surface); --bs-accordion-color: var(--ink); --bs-accordion-border-color: var(--line); --bs-accordion-btn-color: var(--ink); --bs-accordion-active-color: var(--text-blue); --bs-accordion-active-bg: var(--active-bg); }
.faq-accordion .accordion-button { background: var(--surface); }
.card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--line); --bs-card-cap-bg: var(--surface-2); }
.progress, .modern-progress, .analytics-progress { background: var(--track); }
.text-bg-light { color: var(--ink) !important; background-color: var(--surface-2) !important; }
.badge.border, .text-bg-light.border { border-color: var(--line) !important; }

/* Controls. */
.btn { border-radius: var(--radius-control); }
.btn-primary {
  --bs-btn-color: var(--on-action);
  --bs-btn-hover-color: var(--on-action);
  --bs-btn-active-color: var(--on-action);
  color: var(--on-action);
  border-color: transparent;
  background: var(--action);
  box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus-visible { color: var(--on-action); background: var(--action-hover); box-shadow: none; transform: none; }
.btn-outline-primary { color: var(--text-blue); border-color: var(--line-strong); background: var(--surface-2); }
.btn-outline-primary:hover { color: var(--ink); border-color: var(--hud); background: var(--active-bg); }
.btn-success { color: #03130C; border-color: #12B981; background: #12B981; }
.btn-success:hover, .btn-success:focus-visible { color: #03130C; border-color: #2FD39A; background: #2FD39A; }
.btn-light { color: var(--ink); border-color: var(--line); background: var(--surface-2); }
.btn-light:hover, .btn-light:focus-visible { color: var(--ink); border-color: var(--line-strong); background: var(--active-bg); }
.btn-outline-secondary { color: var(--muted); border-color: var(--line-strong); }
.btn-outline-secondary:hover { color: var(--ink); border-color: var(--line-strong); background: var(--active-bg); }
.form-control, .form-select { color: var(--ink); background-color: var(--field); border-color: var(--line-strong); border-radius: var(--radius-control); }
.form-control::placeholder { color: var(--faint); }
.form-control:focus, .form-select:focus { color: var(--ink); background-color: var(--field); border-color: var(--hud); box-shadow: 0 0 0 .2rem var(--active-bg); }
.form-check-input { background-color: var(--field); border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--action); border-color: var(--action); }

/* Timer stage: a dark instrument panel in both themes. */
.timer-stage {
  border: 1px solid rgba(120, 165, 255, .25);
  border-radius: var(--radius-panel);
  background-color: var(--stage);
  background-image:
    linear-gradient(rgba(57, 167, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 167, 255, .06) 1px, transparent 1px),
    radial-gradient(circle at 85% 0%, rgba(20, 125, 255, .35), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(18, 185, 129, .22), transparent 50%);
  background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%;
  box-shadow: var(--shadow-raised);
}
.timer-stage::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--journey-gradient); }
.timer-stage::after { border-color: rgba(57, 167, 255, .25); }
.timer-value { font-weight: 600; letter-spacing: -.04em; text-shadow: none; }

/* Live work task and guest timer share the instrument look. */
.work-live, .work-live.measure, .work-live.countdown, .guest-timer-card.text-bg-primary {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  border: 1px solid rgba(120, 165, 255, .25);
  border-radius: var(--radius-panel);
  background-color: var(--stage) !important;
  background-image:
    linear-gradient(rgba(57, 167, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 167, 255, .06) 1px, transparent 1px),
    radial-gradient(circle at 85% 0%, rgba(20, 125, 255, .35), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(18, 185, 129, .22), transparent 50%);
  background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%;
  box-shadow: var(--shadow-raised);
}
.work-live::before, .guest-timer-card.text-bg-primary::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--journey-gradient); }

/* Progress ring behind a running clock. */
.stage-ring-host { position: relative; display: grid; place-content: center; justify-items: center; min-height: 300px; isolation: isolate; }
.stage-ring-host > :not(.stage-ring-svg) { position: relative; z-index: 1; }
/* The ring never exceeds its column, so narrow layouts shrink it rather
   than letting it run under the neighbouring buttons. */
.stage-ring-svg { position: absolute; left: 50%; top: 50%; z-index: 0; width: min(300px, 100%); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.stage-ring-ticks { fill: none; stroke: rgba(140, 203, 255, .35); stroke-width: 6; }
.stage-ring-ticks.is-major { stroke: rgba(140, 203, 255, .8); stroke-width: 12; }
.stage-ring-track { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .12); stroke-width: 9; }
.stage-ring-arc { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.stage-ring-head { fill: #fff; stroke: #12B981; stroke-width: 4; }
.stage-ring-host .timer-time-meta { justify-content: center !important; max-width: 200px; margin-inline: auto; gap: .35rem !important; }
.stage-ring-host .timer-time-meta > span { padding: .18rem .42rem; gap: .3rem; }
.stage-ring-host .timer-time-meta small { font-size: .56rem; }
.stage-ring-host .timer-time-meta strong { font-size: .7rem; }
.stage-ring-host .timer-time-meta { margin-top: .55rem !important; }
.stage-ring-host #work-clock-label { margin-bottom: .2rem; font-size: .72rem; }
/* The live work task lays its clock out in a grid column sized for text. */
.work-live-clock.stage-ring-host { min-width: 300px; }
/* Digits must stay inside the ring: a moderate size here, and
   focus-stage.js shrinks them further when a long value (H:MM:SS) would
   touch the arc. */
.stage-ring-host .timer-value, .stage-ring-host #active-work-timer, .stage-ring-host #guest-timer {
  display: inline-block;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1;
  white-space: nowrap;
}

/* Synaptic study timer: the brain sits above the clock; in immersive mode
   the tunnel canvas fills the screen behind the content. */
.synapse-host { display: grid; justify-items: center; gap: .35rem; }
.synapse-canvas { width: min(260px, 100%); aspect-ratio: 1; max-width: 100%; }
.synapse-host .timer-value, .synapse-host #guest-timer { font-size: clamp(2.2rem, 4vw, 3rem); }
.embedded-study-timer .synapse-canvas { width: min(190px, 100%); }
.timer-readout .synapse-canvas { width: min(200px, 100%); }
.review-break-bar .synapse-canvas, .pdf-reader-break .synapse-canvas { width: min(140px, 100%); }
.synapse-status { min-height: 1.2em; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.synapse-tunnel { position: absolute !important; inset: 0; z-index: 0 !important; width: 100%; height: 100%; pointer-events: none; }
.synapse-tunnel ~ * { position: relative; z-index: 1; }
.synapse-tunnel[hidden], .synapse-canvas[hidden] { display: none; }
[data-immersive].is-immersive .synapse-host { min-height: min(52vh, 80vw); align-content: center; }
/* Compact chips under the clock keep the enclosing ring small. */
[data-immersive].is-immersive .synapse-host .timer-time-meta { justify-content: center !important; max-width: 260px; margin-inline: auto; margin-top: .4rem !important; gap: .35rem !important; }
[data-immersive].is-immersive .synapse-host .timer-value, [data-immersive].is-immersive .synapse-host #guest-timer { font-family: var(--font-sans); font-weight: 300; font-size: clamp(3rem, 12vmin, 7.5rem); letter-spacing: -.04em; transition: color .6s; }
.synapse-host .is-final { color: var(--syn-focus); }
/* Calm screen: the break fades to a dim ring and the clock, nothing else. */
[data-immersive].is-immersive.is-calm .synapse-tunnel { opacity: .25; transition: opacity 1.2s; }
[data-immersive].is-immersive.is-calm > .row > :not(.synapse-host) { opacity: .12; transition: opacity 1.2s; }
[data-immersive].is-immersive.is-calm > .row > :not(.synapse-host):hover, [data-immersive].is-immersive.is-calm > .row > :not(.synapse-host):focus-within { opacity: 1; }
[data-immersive].is-immersive.is-calm .synapse-host .timer-value { opacity: .55; }
[data-immersive].is-immersive:is(.study-stage, .break-timer-stage) { background-image: none !important; background-color: var(--stage) !important; }
.synapse-print { width: min(180px, 60vw); aspect-ratio: 1; display: block; margin-inline: auto; }

/* Measured break offer: one quiet card everywhere, a segmented choice of
   duration and a single action. */
.break-offer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem; padding: 1rem 1.25rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: .9rem; }
.break-offer[hidden] { display: none; }
.break-offer.is-stacked { flex-direction: column; align-items: stretch; }
.break-offer-copy { display: flex; align-items: flex-start; gap: .85rem; flex: 1 1 16rem; min-width: 0; }
.break-offer-icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; color: var(--text-green); background: var(--tint-green); border-radius: .6rem; }
.break-offer-title { margin: 0 0 .15rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.break-offer-copy p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.break-offer-form { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.break-offer.is-stacked .break-durations { display: flex; }
.break-offer.is-stacked .break-durations label { flex: 1; }
.break-durations { display: inline-flex; gap: 2px; margin: 0; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: .6rem; }
.break-durations label { position: relative; margin: 0; }
.break-durations input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.break-durations span { display: block; padding: .35rem .7rem; color: var(--muted); font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; border-radius: .45rem; }
.break-durations input:checked + span { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(8, 20, 45, .14), 0 0 0 1px var(--line); }
.break-durations input:focus-visible + span { outline: 2px solid var(--text-blue); outline-offset: 1px; }
.break-start { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
@media (max-width: 575px) { .break-offer-form, .break-durations { width: 100%; } .break-durations label { flex: 1; } .break-start { width: 100%; justify-content: center; } }

/* The session's fingerprint hangs in a picture frame: a walnut moulding, a
   bevelled mat and a small plate. The mat follows the theme so the network
   keeps its own rendering (drawn over light in light mode, glowing over dark). */
:root { --frame-wood: #5A3B24; --frame-wood-light: #8A5F3C; --frame-wood-dark: #2E1C10; --frame-mat: #FBF8F1; --frame-plate: #C9A45C; --frame-plate-ink: #2E2312; }
:root[data-theme="dark"] { --frame-mat: #0E1830; --frame-plate: #B8934D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --frame-mat: #0E1830; --frame-plate: #B8934D; } }
.synapse-frame { display: inline-flex; flex-direction: column; align-items: center; gap: .75rem; margin: .25rem auto 1.25rem; }
.synapse-frame-mat { padding: clamp(.9rem, 4vw, 1.4rem); background: var(--frame-mat);
  border: clamp(10px, 2.6vw, 14px) solid var(--frame-wood);
  border-color: var(--frame-wood-light) var(--frame-wood) var(--frame-wood-dark) var(--frame-wood);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), inset 0 2px 6px rgba(0, 0, 0, .22), 0 1px 0 1px rgba(0, 0, 0, .25), 0 14px 28px rgba(8, 20, 45, .22); }
.synapse-frame-plate { display: flex; flex-direction: column; align-items: center; padding: .3rem .9rem; color: var(--frame-plate-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--frame-plate) 75%, #fff), var(--frame-plate));
  border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.synapse-frame-plate small { font-weight: 600; font-size: .68rem; opacity: .8; }
.synapse-dialog { max-width: min(26rem, calc(100vw - 2rem)); padding: 1.5rem; text-align: center; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 24px 60px rgba(8, 20, 45, .35); }
.synapse-dialog::backdrop { background: rgba(8, 15, 35, .55); }
.synapse-dialog .synapse-frame { display: flex; }

/* The study timer and its recovery break follow the theme: a light panel in
   light mode, the dark instrument in dark mode. Other timers stay dark in both. */
[data-theme="light"] .timer-stage:is(.study-stage, .break-timer-stage), [data-theme="light"] .guest-timer-card.study-stage {
  color: var(--ink) !important;
  --bs-heading-color: var(--ink);
  --stage: #F7FAFF;
  border-color: rgba(20, 125, 255, .2);
  background-color: #F7FAFF !important;
  background-image:
    linear-gradient(rgba(20, 125, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 125, 255, .05) 1px, transparent 1px),
    radial-gradient(circle at 85% 0%, rgba(57, 167, 255, .16), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(18, 185, 129, .10), transparent 50%);
}
[data-theme="light"] :is(.study-stage, .break-timer-stage)::after { border-color: rgba(20, 125, 255, .12); box-shadow: none; }
[data-theme="light"] :is(.study-stage, .break-timer-stage) .text-white-50 { color: var(--muted) !important; }
[data-theme="light"] :is(.study-stage, .break-timer-stage) .timer-value { text-shadow: none; }
[data-theme="light"] :is(.study-stage, .break-timer-stage) .btn-outline-light { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
[data-theme="light"] :is(.study-stage, .break-timer-stage) .btn-outline-light:hover { color: var(--ink); border-color: var(--hud); background: var(--active-bg); }
[data-theme="light"] :is(.study-stage, .break-timer-stage) .btn-light { color: #fff; border-color: var(--ink); background: var(--ink); }
[data-theme="light"] :is(.study-stage, .break-timer-stage) .btn-light:hover { background: #1B2A55; }
[data-theme="light"] :is(.study-stage, .break-timer-stage) .timer-time-meta > span { color: var(--ink); background: var(--surface); border-color: var(--line-strong); box-shadow: none; }
[data-theme="light"] :is(.study-stage, .break-timer-stage) .timer-time-meta small { color: var(--muted); }
[data-theme="light"] :is(.study-stage, .break-timer-stage) .timer-time-meta strong { color: var(--ink); text-shadow: none; }
[data-theme="light"] :is(.study-stage, .break-timer-stage) .timer-time-meta i { color: var(--amber, #D29E00); }

/* Dark instrument panels keep light headings in both themes. */
.timer-stage, .work-live, .guest-timer-card.text-bg-primary { --bs-heading-color: #fff; }

/* Immersive mode: the running timer fills the screen, nothing else. */
body.has-immersive { overflow: hidden; }
/* .app-main creates a stacking context; lift it so the overlay covers the
   title bar and the rail, which are hidden anyway. */
body.has-immersive .app-main { z-index: auto; }
body.has-immersive .app-navbar, body.has-immersive .app-rail { visibility: hidden; }
[data-immersive].is-immersive {
  position: fixed !important;
  inset: 0;
  z-index: 2000;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 2rem;
  margin: 0 !important;
  padding: 5vh 5vw !important;
  overflow: auto;
  text-align: center;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
}
[data-immersive].is-immersive > .row, [data-immersive].is-immersive > .card-body { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; width: 100%; max-width: 720px; margin: 0; }
[data-immersive].is-immersive > .row > [class*="col-"] { width: 100%; max-width: 640px; text-align: center !important; }
[data-immersive].is-immersive.work-live { display: flex !important; }
[data-immersive].is-immersive .stage-ring-host { min-height: min(58vh, 86vw); width: 100%; }
[data-immersive].is-immersive .stage-ring-svg { width: min(56vh, 84vw); height: min(56vh, 84vw); }
[data-immersive].is-immersive .timer-value, [data-immersive].is-immersive .stage-ring-host #active-work-timer, [data-immersive].is-immersive .stage-ring-host #guest-timer { font-size: clamp(3rem, 11vmin, 7rem); }
/* Button columns become a centred row; the timer column (the break's
   synaptic host is also a col-lg-3) keeps its stacked layout. */
[data-immersive].is-immersive .d-grid, [data-immersive].is-immersive .col-lg-3:not(.synapse-host) { display: flex !important; flex-wrap: wrap; justify-content: center; gap: .6rem; }
[data-immersive].is-immersive .d-grid > *, [data-immersive].is-immersive .col-lg-3:not(.synapse-host) > * { width: auto !important; margin: 0 !important; }
@media (prefers-reduced-motion: reduce) { .stage-ring-arc { transition: none; } }

/* Reading comfort: reader, summaries and flashcards. theme.js sets the
 * reader's choices (ambiance, font, size, spacing, width) on <html>.
 * Long texts never use pure white on black: the dark ink is softened and
 * the page is a calm grey-blue, without grid or glow. */
:root {
  --read-font: var(--font-read);
  --read-size: 18px;
  --read-leading: 1.8;
  --read-measure: 66ch;
  --read-bg: var(--surface);
  --read-ink: #1C2740;
  --read-muted: var(--muted);
}
[data-theme="dark"] { --read-bg: #161D2B; --read-ink: #CDD3DE; --read-muted: #9AA5B8; }
:root[data-read-font="sans"] { --read-font: var(--font-sans); }
:root[data-read-ambiance="warm"] { --read-bg: #F7F0E1; --read-ink: #3A3125; --read-muted: #6B5D48; }
:root[data-theme="dark"][data-read-ambiance="warm"] { --read-bg: #1D1913; --read-ink: #DDD3C2; --read-muted: #A89E8C; }
:root[data-read-ambiance="contrast"] { --read-bg: #FFFFFF; --read-ink: #000000; --read-muted: #2A2A2A; }
:root[data-theme="dark"][data-read-ambiance="contrast"] { --read-bg: #0A0D13; --read-ink: #F2F5F9; --read-muted: #C8D0DC; }

:root .summary-paper, :root .text-document-viewer, :root .pdf-reading-sheet { color: var(--read-ink); background: var(--read-bg); border-color: var(--line); }
:root .summary-prose, :root .text-document-viewer, :root .pdf-audio-transcript {
  color: var(--read-ink);
  font-family: var(--read-font);
  font-size: var(--read-size);
  line-height: var(--read-leading);
}
:root .summary-prose, :root .pdf-reading-column { max-width: var(--read-measure); }
:root .pdf-reading-column { color: var(--read-ink); font: inherit; }
:root .text-document-viewer { padding-inline: max(1.25rem, calc((100% - var(--read-measure)) / 2)); }
:root .text-document-viewer h1, :root .text-document-viewer h2, :root .text-document-viewer h3 { color: var(--read-ink); }
:root .text-document-viewer blockquote, :root .summary-note { color: var(--read-muted); }
:root .summary-paper-header { border-color: var(--line); }
/* PDF pages are white paper: in the dark theme they can be dimmed. */
:root[data-theme="dark"][data-read-dim-pdf="on"] #pdf-viewer { filter: invert(.88) hue-rotate(180deg) contrast(.92); }

.reading-comfort-toggle { display: inline-flex; align-items: center; gap: .45rem; }
.reading-comfort-glyph { font-family: var(--font-read); font-size: 1.05rem; font-weight: 700; line-height: 1; }
.reading-comfort-panel { width: min(320px, calc(100vw - 2rem)); padding: 1rem; }
.reading-comfort-label { margin: .9rem 0 .4rem; color: var(--faint); font-family: var(--font-mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; }
.reading-comfort-label:first-child { margin-top: 0; }
.reading-comfort-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.reading-comfort-options.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reading-comfort-options button, .reading-comfort-size button {
  min-height: 2.75rem;
  padding: .35rem .4rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: .6rem;
  font-size: .8rem;
  font-weight: 600;
}
.reading-comfort-options button:hover, .reading-comfort-size button:hover { background: var(--active-bg); }
.reading-comfort-options button.active { border-color: var(--hud); background: var(--active-bg); box-shadow: inset 0 0 0 1px var(--hud); }
.reading-comfort-options .is-serif { font-family: var(--font-read); }
.reading-swatch { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.reading-swatch span { display: grid; place-items: center; width: 2.4rem; height: 1.7rem; border: 1px solid var(--line-strong); border-radius: .35rem; font-family: var(--font-read); font-size: .85rem; }
.reading-swatch.is-standard span { color: var(--ink); background: var(--surface); }
.reading-swatch.is-warm span { color: #3A3125; background: #F7F0E1; }
[data-theme="dark"] .reading-swatch.is-warm span { color: #DDD3C2; background: #1D1913; }
.reading-swatch.is-contrast span { color: #000; background: #fff; }
[data-theme="dark"] .reading-swatch.is-contrast span { color: #F2F5F9; background: #0A0D13; }
.reading-comfort-size { display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; gap: .35rem; }
.reading-comfort-size output { color: var(--ink); font-family: var(--font-mono); font-size: .85rem; text-align: center; }
.reading-comfort-check { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; margin-top: .6rem; color: var(--ink); font-size: .85rem; }
.reading-comfort-reset { margin-top: .4rem; padding-inline: 0; }
.summary-reading-tools { display: flex; justify-content: flex-end; margin: -2.75rem 0 1rem; }

/* Flashcard review: one calm card, the answer in the reading face. */
.study-card { border-radius: .9rem; box-shadow: var(--shadow-raised); }
[data-theme="dark"] .study-card { background: #1C2638; border-color: rgba(205, 211, 222, .16); }
.study-card h2 { font-weight: 650; letter-spacing: -.015em; }
.study-answer { color: var(--read-ink); font-family: var(--read-font); font-size: calc(var(--read-size) + 1px); line-height: 1.7; }
.review-rating { border-radius: .75rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.review-rating.hard { color: var(--text-amber); }

/* Footer: a status line under the application. */
.footer-heading { color: var(--faint); font-weight: 500; letter-spacing: .14em; }
.footer-contact { background: var(--surface); }
.footer-bottom { letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; }

@media (prefers-reduced-motion: reduce) {
  .quick-link, .deck-card { transition: none; }
}

/* Critical-point count on the rail's Watch entry. */
.app-rail-link { position: relative; }
.app-rail-alert { position: absolute; top: .35rem; right: .55rem; display: grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; color: #fff; background: #E5484D; border-radius: 999px; box-shadow: 0 0 0 2px var(--chrome), 0 0 10px rgba(229, 72, 77, .6); font-family: var(--font-mono); font-size: .62rem; font-weight: 700; line-height: 1; }
@media (max-width: 991.98px) { .app-rail-alert { position: static; margin-left: .2rem; } }

/* Dark theme: exam reminder icons in a muted coral instead of Bootstrap's
   saturated danger red, easier on the eyes against the ink background. */
[data-theme="dark"] .quick-icon.text-danger {
  color: #E8A29B !important;
  background-color: rgba(232, 162, 155, .1) !important;
  box-shadow: inset 0 0 0 1px rgba(232, 162, 155, .18);
}
[data-theme="dark"] .quick-icon.text-warning-emphasis {
  color: #E3C77E !important;
  background-color: rgba(227, 199, 126, .1) !important;
  box-shadow: inset 0 0 0 1px rgba(227, 199, 126, .18);
}

/* Dark theme: semantic colours retuned for the ink background. Bootstrap's
   defaults (#198754, #DC3545...) are either too dark or too saturated there,
   so success, danger, warning and info take lighter, softer brand tones. */
[data-theme="dark"] {
  --text-red: #F0968D;
  --bs-primary-rgb: 57, 167, 255;
  --bs-success-rgb: 79, 216, 166;
  --bs-danger-rgb: 240, 150, 141;
  --bs-warning-rgb: 244, 197, 66;
  --bs-info-rgb: 140, 203, 255;
  --bs-primary-text-emphasis: #B9DFFF;
  --bs-primary-bg-subtle: #173258;
  --bs-primary-border-subtle: rgba(140, 203, 255, .35);
  --bs-info-text-emphasis: #B9DFFF;
  --bs-info-bg-subtle: #173258;
  --bs-info-border-subtle: rgba(140, 203, 255, .35);
  --bs-success-text-emphasis: #8DE9C6;
  --bs-success-bg-subtle: #123B3A;
  --bs-success-border-subtle: rgba(79, 216, 166, .38);
  --bs-danger-text-emphasis: #F6B8B1;
  --bs-danger-bg-subtle: #35263D;
  --bs-danger-border-subtle: rgba(240, 150, 141, .35);
  --bs-warning-text-emphasis: #F6D57A;
  --bs-warning-bg-subtle: #33311F;
  --bs-warning-border-subtle: rgba(244, 197, 66, .35);
  --bs-form-valid-color: #4FD8A6;
  --bs-form-valid-border-color: #4FD8A6;
  --bs-form-invalid-color: #F0968D;
  --bs-form-invalid-border-color: #F0968D;
}
/* Solid fills: the lighter tones need dark ink, not white. */
[data-theme="dark"] .text-bg-success, [data-theme="dark"] .bg-success.text-white { color: #03130C !important; }
[data-theme="dark"] .text-bg-danger, [data-theme="dark"] .bg-danger.text-white { color: #2A0A0E !important; }
[data-theme="dark"] .text-bg-warning { color: #2A2000 !important; }
/* A coloured card reads better tinted than filled. */
[data-theme="dark"] .card.bg-success {
  color: var(--bs-success-text-emphasis) !important;
  background-color: var(--bs-success-bg-subtle) !important;
  border-color: var(--bs-success-border-subtle);
}
[data-theme="dark"] .card.bg-success .card-header { color: #4FD8A6; background: rgba(79, 216, 166, .1); border-color: var(--bs-success-border-subtle); }
[data-theme="dark"] .card.bg-success .card-title { color: #E8FFF6; }
[data-theme="dark"] .btn-danger {
  --bs-btn-color: #2A0A0E; --bs-btn-bg: #E8786F; --bs-btn-border-color: #E8786F;
  --bs-btn-hover-color: #2A0A0E; --bs-btn-hover-bg: #F0968D; --bs-btn-hover-border-color: #F0968D;
  --bs-btn-active-color: #2A0A0E; --bs-btn-active-bg: #F0968D; --bs-btn-active-border-color: #F0968D;
}
[data-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #F0968D; --bs-btn-border-color: rgba(240, 150, 141, .45);
  --bs-btn-hover-color: #F6B8B1; --bs-btn-hover-bg: rgba(240, 150, 141, .14); --bs-btn-hover-border-color: #F0968D;
  --bs-btn-active-color: #F6B8B1; --bs-btn-active-bg: rgba(240, 150, 141, .2); --bs-btn-active-border-color: #F0968D;
}
[data-theme="dark"] .btn-outline-success {
  --bs-btn-color: #4FD8A6; --bs-btn-border-color: rgba(79, 216, 166, .45);
  --bs-btn-hover-color: #8DE9C6; --bs-btn-hover-bg: rgba(79, 216, 166, .14); --bs-btn-hover-border-color: #4FD8A6;
  --bs-btn-active-color: #8DE9C6; --bs-btn-active-bg: rgba(79, 216, 166, .2); --bs-btn-active-border-color: #4FD8A6;
}
/* Colours hard-coded in app.css for the light theme. */
[data-theme="dark"] .exam-completion-warning { color: #F6D57A; }
[data-theme="dark"] .exam-completed-checkbox.form-check-input { border-color: #E3C77E; }
[data-theme="dark"] .exam-completed-checkbox.form-check-input:focus { border-color: #F6D57A; }
[data-theme="dark"] .exam-completed-checkbox.form-check-input:checked { border-color: #2FD39A; background-color: #2FD39A; }
[data-theme="dark"] .pdf-context-card { background: #2A2438; border-color: rgba(240, 150, 141, .22); }
[data-theme="dark"] .pdf-context-card.recommendation, [data-theme="dark"] .pdf-context-card.exam { border-left-color: #D9837B; background: #2A2438; }
[data-theme="dark"] .pdf-context-card::after { background: rgba(240, 150, 141, .05); }
[data-theme="dark"] .pdf-context-icon, [data-theme="dark"] .pdf-context-card.exam .pdf-context-icon { background: rgba(240, 150, 141, .1); border-color: rgba(240, 150, 141, .18); }

/* Reader: the reading comfort control sits on the document itself. */
.pdf-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .75rem .5rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.pdf-viewer-bar > span { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.reading-comfort-note { margin: .8rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }

/* Ambiances also tint PDF pages, in both themes and with dark-theme dimming. */
#pdf-viewer { transition: filter .2s ease; }
:root[data-read-ambiance="warm"] #pdf-viewer { filter: sepia(.32) saturate(.92) brightness(.97); }
:root[data-read-ambiance="contrast"] #pdf-viewer { filter: contrast(1.18) saturate(1.05); }
:root[data-theme="dark"][data-read-ambiance="warm"] #pdf-viewer { filter: sepia(.3) brightness(.9); }
:root[data-theme="dark"][data-read-dim-pdf="on"][data-read-ambiance="warm"] #pdf-viewer { filter: invert(.86) hue-rotate(180deg) sepia(.35) contrast(.9); }
:root[data-theme="dark"][data-read-dim-pdf="on"][data-read-ambiance="contrast"] #pdf-viewer { filter: invert(.94) hue-rotate(180deg) contrast(1.08); }

/* Timetable reminder: a modal dialog, so the rest of the page is inert while it is open. */
.timetable-reminder { width: min(28rem, calc(100vw - 2rem)); padding: 1.5rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.timetable-reminder::backdrop { background: rgba(6, 12, 30, .55); backdrop-filter: blur(2px); }
.timetable-reminder-lines { padding-left: 1.1rem; margin-bottom: 0; }

/* Energy button: the start of something (an assessment, a timer). */
.btn-energy { --bs-btn-color: var(--on-energy); --bs-btn-bg: var(--energy); --bs-btn-border-color: var(--energy);
  --bs-btn-hover-color: var(--on-energy); --bs-btn-hover-bg: var(--energy-hover); --bs-btn-hover-border-color: var(--energy-hover);
  --bs-btn-active-color: var(--on-energy); --bs-btn-active-bg: var(--energy-hover); --bs-btn-active-border-color: var(--energy-hover);
  --bs-btn-disabled-color: var(--on-energy); --bs-btn-disabled-bg: var(--energy); --bs-btn-disabled-border-color: var(--energy);
  --bs-btn-focus-shadow-rgb: 255, 194, 26; font-weight: 650; }