/* Thuto360. Tokens follow the original's globals.css: bare "H S% L%" triplets,
   with the school's colours arriving as --brand-* on <html>. */
:root {
  --background: 0 0% 98%;
  --foreground: 222 40% 12%;
  --card: 0 0% 100%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 40%;
  --border: 220 13% 89%;
  --input: 220 13% 85%;
  --primary: var(--brand-primary, 230 57% 39%);
  --primary-foreground: var(--brand-primary-fg, 0 0% 100%);
  --primary-hover: var(--brand-primary-hover, 230 57% 30%);
  --primary-text: var(--primary);
  --accent: var(--brand-accent, 122 42% 49%);
  --success-text: 122 52% 28%;
  --warning-text: 30 90% 28%;
  --destructive-text: 0 72% 42%;
  --frame: var(--brand-primary-tint, 230 60% 96%);
  --nav-text: 222 25% 24%;
  --nav-muted: 220 9% 46%;
  --radius: 0.75rem;
  --nav-width: 16rem;
  color-scheme: light;
}
.dark {
  --background: 220 12% 8%;
  --foreground: 220 15% 92%;
  --card: 220 12% 10%;
  --muted: 220 10% 15%;
  --muted-foreground: 220 9% 68%;
  --border: 220 10% 18%;
  --input: 220 10% 24%;
  --primary: var(--brand-primary-dark, 230 60% 62%);
  --primary-foreground: var(--brand-primary-fg-dark, 0 0% 100%);
  --primary-hover: var(--brand-primary-dark, 230 60% 54%);
  --primary-text: var(--brand-primary-text-dark, 230 60% 78%);
  --success-text: 122 45% 70%;
  --warning-text: 38 90% 68%;
  --destructive-text: 0 80% 75%;
  --frame: 222 16% 6%;
  --nav-text: 220 12% 84%;
  --nav-muted: 220 8% 58%;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: hsl(var(--frame));
  color: hsl(var(--foreground));
  font: 15px/1.5 var(--font-body, "DM Sans"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1 { margin: 0; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.02em; }
h2 { margin: 0 0 0.25rem; font-size: 1.35rem; letter-spacing: -0.01em; }
p { margin: 0.25rem 0 0; }
a { color: hsl(var(--primary-text)); }
small, .small { font-size: 0.8rem; }
.muted { color: hsl(var(--muted-foreground)); }
.block { display: block; }
.right { text-align: right; }
.tabular { font-variant-numeric: tabular-nums; }
.text-destructive { color: hsl(var(--destructive-text)); }
.centred-text { text-align: center; margin-top: 1rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: hsl(var(--card)); padding: 0.5rem 1rem; border-radius: 0.5rem; }
:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }

.icon { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-xs { width: 0.8rem; height: 0.8rem; opacity: 0.6; }
.icon-lg { width: 2rem; height: 2rem; color: hsl(var(--muted-foreground)); }
.when-dark { display: none; }
.dark .when-dark { display: block; }
.dark .when-light { display: none; }

/* The shell: a frame in the school's colour, with each page a sheet inside it. */
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 0.75rem; height: 4rem; padding: 0 1rem; background: hsl(var(--frame)); }
.brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; width: 14.5rem; color: inherit; text-decoration: none; font-weight: 700; }
.brand-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.brand-chip { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 0.6rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 700; }
.topbar-tools { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.topbar-tools form { margin: 0; }
.icon-btn { display: grid; place-items: center; padding: 0.5rem; border: 0; border-radius: 0.5rem; background: none; color: hsl(var(--muted-foreground)); cursor: pointer; }
.icon-btn:hover { background: hsl(var(--card)); color: hsl(var(--foreground)); }
.user-chip { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 0.6rem; color: inherit; text-decoration: none; }
.user-chip:hover { background: hsl(var(--card)); }
.user-text { display: flex; flex-direction: column; line-height: 1.2; }
.user-text strong { font-size: 0.85rem; }
.user-text small { color: hsl(var(--muted-foreground)); }
.avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; background: hsl(var(--primary) / 0.12); color: hsl(var(--primary-text)); font-size: 0.8rem; font-weight: 700; }

.sidebar { position: fixed; top: 4rem; bottom: 0; left: 0; z-index: 30; display: flex; flex-direction: column; width: var(--nav-width); background: hsl(var(--frame)); overflow-y: auto; }
.sidebar nav { flex: 1; padding: 0.25rem 0.75rem; }
.nav-group { margin-bottom: 0.9rem; }
.nav-heading { margin: 0 0 0.25rem; padding: 0 0.6rem; color: hsl(var(--nav-muted)); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.nav-link { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 0.6rem; color: hsl(var(--nav-text)); font-size: 0.9rem; text-decoration: none; }
.nav-link:hover { background: hsl(var(--card)); color: hsl(var(--primary-text)); }
.nav-link[data-current] { background: hsl(var(--card)); color: hsl(var(--primary-text)); font-weight: 600; box-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 4px 12px -6px hsl(var(--primary) / 0.35); }
.nav-link[data-current]::before { content: ""; position: absolute; left: -0.5rem; top: 25%; bottom: 25%; width: 3px; border-radius: 9999px; background: hsl(var(--primary)); }
.nav-children { margin-left: 1.1rem; padding-left: 0.4rem; border-left: 1px solid hsl(var(--border)); }
.powered { padding: 0.5rem 1.25rem 1rem; color: hsl(var(--nav-muted)); font-size: 0.72rem; }

.sheet-wrap { padding: 0 0.75rem 0.75rem var(--nav-width); }
.sheet { min-height: calc(100vh - 4.75rem); border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--card)); box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 12px 32px -18px hsl(var(--primary) / 0.25); }
.dark .sheet { box-shadow: none; }
main#main { padding: 2rem 2.5rem 2.5rem; }
.only-mobile { display: none; }

.nav-collapsed { --nav-width: 4.5rem; }
.nav-collapsed .nav-label, .nav-collapsed .nav-heading, .nav-collapsed .powered, .nav-collapsed .brand-name, .nav-collapsed .nav-children { display: none; }
.nav-collapsed .brand { width: auto; }
.nav-collapsed .nav-link { justify-content: center; }

@media (max-width: 1023px) {
  .only-mobile { display: grid; }
  .only-desktop { display: none; }
  .brand { width: auto; }
  .user-text { display: none; }
  .sidebar { width: 16rem; box-shadow: 0 0 40px rgb(0 0 0 / 0.2); transform: translateX(-100%); transition: transform 0.2s; }
  .nav-open .sidebar { transform: none; }
  .nav-collapsed .nav-label, .nav-collapsed .nav-heading { display: revert; }
  .sheet-wrap { padding: 0; }
  .sheet { border-width: 1px 0 0; border-radius: 1rem 1rem 0 0; }
  main#main { padding: 1.25rem 1rem 2rem; }
}

/* Pieces. */
.page-head { margin-bottom: 1.25rem; }
.card { border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
.card-pad { padding: 1.25rem; }
.narrow { max-width: 32rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.stat-link { color: inherit; text-decoration: none; }
.stat { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.1rem; background-image: linear-gradient(160deg, hsl(var(--primary) / 0.06), transparent 55%); transition: border-color 0.15s, transform 0.15s; }
.stat-link:hover .stat { border-color: hsl(var(--primary) / 0.3); transform: translateY(-2px); }
.stat-icon { color: hsl(var(--primary-text)); }
.stat-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 1.1rem; border: 1px solid transparent; border-radius: 9999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { background: hsl(var(--primary-hover)); }
.btn:active { transform: scale(0.97); }
.btn-quiet { background: none; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.btn-quiet:hover { background: hsl(var(--muted)); }
.btn-wide { width: 100%; }

.stack { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.875rem; font-weight: 500; }
.field small { font-weight: 400; }
input, select { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid hsl(var(--input)); border-radius: 0.6rem; background: hsl(var(--card)); color: inherit; font: inherit; }
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; flex: none; }
input[type="search"] { padding-left: 2.1rem; }

.alert { margin: 0 0 1rem; padding: 0.65rem 0.9rem; border-radius: 0.6rem; font-size: 0.9rem; }
.alert-error { background: hsl(0 72% 51% / 0.1); color: hsl(var(--destructive-text)); }
.alert-warning { background: hsl(38 92% 50% / 0.14); color: hsl(var(--warning-text)); }
.alert-success { background: hsl(122 45% 40% / 0.12); color: hsl(var(--success-text)); }
.stack + .alert, .muted + .alert { margin-top: 1rem; }

.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0.9rem; border-bottom: 1px solid hsl(var(--border)); }
.filters select { width: auto; min-width: 9rem; }
.search { position: relative; flex: 1 1 15rem; }
.search .icon { position: absolute; left: 0.65rem; top: 0.72rem; color: hsl(var(--muted-foreground)); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th { padding: 0.6rem 0.9rem; color: hsl(var(--muted-foreground)); font-size: 0.8rem; font-weight: 600; text-align: left; white-space: nowrap; }
th.right { text-align: right; }
td { padding: 0.65rem 0.9rem; border-top: 1px solid hsl(var(--border)); vertical-align: middle; }
tbody tr { transition: background-color 0.12s; }
tbody tr:hover { background: hsl(var(--primary) / 0.05); }
.th-sort { display: inline-flex; align-items: center; gap: 0.3rem; color: inherit; text-decoration: none; }
.row-link { color: inherit; text-decoration: none; }
.person { display: flex; align-items: center; gap: 0.7rem; }
.badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 9999px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.badge-muted { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.badge-default { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary-text)); }
.badge-accent { background: hsl(var(--accent) / 0.15); color: hsl(var(--foreground)); }
.badge-success { background: hsl(122 45% 40% / 0.14); color: hsl(var(--success-text)); }
.badge-warning { background: hsl(38 92% 50% / 0.16); color: hsl(var(--warning-text)); }
.badge-destructive { background: hsl(0 72% 51% / 0.12); color: hsl(var(--destructive-text)); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0.9rem; border-top: 1px solid hsl(var(--border)); }
.pager span:last-child { display: flex; gap: 0.5rem; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 3rem 1rem; text-align: center; }
.details { display: grid; grid-template-columns: 9rem 1fr; gap: 0.5rem 1rem; margin: 0; }
.details dt { color: hsl(var(--muted-foreground)); }
.details dd { margin: 0; }

/* Sign-in. */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); min-height: 100vh; }
.auth-side { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: 3rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.auth-side img { align-self: flex-start; width: auto; max-width: 12rem; border-radius: 0.75rem; background: #fff; padding: 0.25rem; }
.auth-main { display: grid; place-items: center; padding: 2rem 1rem; background: hsl(var(--card)); }
.auth-card { width: 100%; max-width: 24rem; }
.plain { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.centred { text-align: center; }
.centred .btn { margin-top: 1rem; }
.centred h1 { margin-top: 1rem; font-size: 1.5rem; }
@media (max-width: 767px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-side { padding: 1.25rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Shared bits for forms, lists and cards across the modules. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.btn-danger { background: hsl(0 72% 45%); color: #fff; }
.btn-danger:hover { background: hsl(0 72% 38%); }
.inline-form { display: inline; }
.page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crumbs { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.2rem; }
.field-error { color: hsl(var(--destructive-text)); font-weight: 500; }
.check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; }
.check input { margin-top: 0.2rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.85rem 1rem; }
.form-actions { display: flex; gap: 0.5rem; grid-column: 1 / -1; }
.field input, .field select, .field textarea { font: inherit; font-weight: 400; padding: 0.5rem 0.65rem; border: 1px solid hsl(var(--input)); border-radius: 0.5rem; background: hsl(var(--card)); color: inherit; width: 100%; }
.disclosures { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.disclosure > summary { list-style: none; width: fit-content; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure[open] { flex-basis: 100%; }
.disclosure-body { margin-top: 0.6rem; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
.disclosure-end { position: relative; display: inline-block; }
.disclosure-end[open] > .disclosure-body { position: absolute; right: 0; z-index: 30; width: 18rem; text-align: left; box-shadow: 0 10px 30px hsl(0 0% 0% / 0.15); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; align-items: start; }
.cards-2 { grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); }
@media (max-width: 500px) { .cards, .cards-2 { grid-template-columns: 1fr; } }
.card-title { font-size: 1.02rem; font-weight: 700; margin: 0; }
.icon-line { display: flex; gap: 0.4rem; align-items: center; margin: 0; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.metric { border: 1px solid hsl(var(--border)); border-radius: 0.5rem; background: hsl(var(--muted) / 0.4); padding: 0.45rem; text-align: center; }
.metric strong { display: block; font-size: 1.1rem; }
.metric small { color: hsl(var(--muted-foreground)); }
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); }
.tab { padding: 0.5rem 0.9rem; text-decoration: none; color: hsl(var(--muted-foreground)); border-bottom: 2px solid transparent; }
.tab[aria-current] { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--primary)); font-weight: 600; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list > li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid hsl(var(--border)); }
.plain-list > li:last-child { border-bottom: 0; }
.retired { opacity: 0.6; }
.row-actions { display: flex; align-items: center; gap: 0.35rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo-preview { max-height: 4rem; max-width: 12rem; object-fit: contain; }
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.swatch { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 9999px; border: 1px solid hsl(var(--border)); }
.split { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }
.role-list { list-style: none; margin: 0; padding: 0.4rem; }
.role-list a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 0.5rem; text-decoration: none; color: inherit; }
.role-list a:hover, .role-list a[aria-current] { background: hsl(var(--muted)); }
.switch-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.4rem 1rem; margin: 0; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 0.6rem; }
.switch-group legend { padding: 0 0.35rem; font-weight: 700; font-size: 0.9rem; }
.brand-logo { max-height: 2.1rem; max-width: 9rem; object-fit: contain; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.4rem 1rem; }
.profile { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.profile > .avatar { width: 4rem; height: 4rem; font-size: 1.2rem; }
.profile p { margin: 0 0 0.25rem; }
.profile-actions { margin-left: auto; }
.list-pad { padding: 0.25rem 1rem; }
.metrics-2 { grid-template-columns: repeat(2, 1fr); }
.card-link { text-decoration: none; color: inherit; transition: box-shadow 0.15s; }
.card-link:hover { box-shadow: 0 6px 18px hsl(0 0% 0% / 0.08); }
.section-gap { margin-top: 1rem; margin-bottom: 1rem; }
.input-sm { max-width: 6.5rem; }
td input:not([type="checkbox"]), td select { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid hsl(var(--input)); border-radius: 0.4rem; background: hsl(var(--card)); color: inherit; width: 100%; }
td input[type="number"] { min-width: 4.5rem; }
.filters-bare { display: flex; align-items: flex-end; gap: 0.5rem; }
.week { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; align-items: start; }
.period { padding: 0.5rem 0.6rem; border: 1px solid hsl(var(--border)); border-radius: 0.5rem; border-left: 3px solid hsl(var(--primary)); }
.period p { margin: 0; }
.cell-paid { background: hsl(122 45% 40% / 0.14); }
.cell-part { background: hsl(38 92% 50% / 0.16); }
.cell-due { background: hsl(0 72% 51% / 0.1); }
.grid-table td, .grid-table th { white-space: nowrap; }
.pre-line { white-space: pre-line; margin: 0; }
.disclosure-end[open] > .disclosure-wide { width: min(34rem, 88vw); }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: hsl(var(--border)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
.month-head { background: hsl(var(--muted)); padding: 0.35rem; font-size: 0.75rem; font-weight: 700; text-align: center; }
.month-cell { background: hsl(var(--card)); min-height: 5.5rem; padding: 0.3rem; font-size: 0.78rem; }
.month-empty { background: hsl(var(--muted) / 0.4); }
.month-day { color: hsl(var(--muted-foreground)); display: block; }
.month-event { display: block; margin-top: 0.15rem; padding: 0.05rem 0.3rem; border-radius: 0.25rem; background: hsl(var(--primary) / 0.12); text-decoration: none; color: inherit; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 640px) { .month-cell { min-height: 3.5rem; } }
.bell { position: relative; }
.bell-dot { position: absolute; top: -0.2rem; right: -0.2rem; min-width: 1rem; padding: 0 0.2rem; border-radius: 9999px; background: hsl(0 72% 45%); color: #fff; font-size: 0.65rem; line-height: 1rem; text-align: center; }

/* Dashboard and charts. Series colours match the original and passed the colour-blind check. */
:root { --chart-1: var(--brand-chart-1, 229 55% 50%); --chart-2: var(--brand-chart-2, 132 44% 43%); --status-good: 132 44% 43%; --status-warning: 26 91% 37%; --status-serious: 21 90% 48%; --status-critical: 358 66% 45%; }
.dark { --chart-1: var(--brand-chart-1-dark, 230 65% 65%); --chart-2: var(--brand-chart-2-dark, 124 39% 45%); --status-good: 124 39% 45%; --status-warning: 40 90% 45%; --status-serious: 23 73% 50%; --status-critical: 358 68% 62%; }
.chart { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.chart-svg { display: block; width: 100%; height: auto; margin-top: 0.5rem; }
.chart-grid { stroke: hsl(var(--border)); stroke-width: 1; }
.chart-axis { fill: hsl(var(--muted-foreground)); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-value { fill: hsl(var(--foreground)); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-total { fill: hsl(var(--foreground)); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { stroke: hsl(var(--card)); stroke-width: 2; }
.chart-hit { fill: transparent; }
.chart-hit:hover { fill: hsl(var(--foreground) / 0.05); }
.chart-ring { fill: none; stroke-width: 22; }
.chart-ring:hover { stroke-width: 26; }
.chart-empty { padding: 3rem 0; text-align: center; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.85rem; }
.chart-legend li { display: flex; align-items: center; gap: 0.4rem; }
.chart-legend-rows { flex-direction: column; flex: 1; min-width: 10rem; margin: 0; }
.chart-legend-rows li span:nth-child(2) { flex: 1; }
.chart-key { display: inline-block; flex: none; width: 0.7rem; height: 0.7rem; border-radius: 3px; }
.chart-donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.chart-donut { flex: none; width: 10rem; height: 10rem; }
.chart-table { margin-top: 0.4rem; }
.chart-table summary { cursor: pointer; }
.dash-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
@media (min-width: 64rem) { .dash-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-wide { grid-column: span 2; } }
.meter { display: flex; flex-direction: column; gap: 0.25rem; }
.meter progress { width: 100%; height: 0.5rem; border: 0; border-radius: 9999px; overflow: hidden; background: hsl(var(--muted)); appearance: none; }
.meter progress::-webkit-progress-bar { background: hsl(var(--muted)); }
.meter progress::-webkit-progress-value { background: hsl(var(--primary)); border-radius: 9999px; }
.meter progress::-moz-progress-bar { background: hsl(var(--primary)); border-radius: 9999px; }
.setup { border-color: hsl(var(--primary) / 0.3); }
.row-start { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.rank { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: hsl(var(--muted)); font-size: 0.75rem; font-weight: 700; }
.strike { text-decoration: line-through; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.text-success { color: hsl(var(--success-text)); }
.cards > .stack, .dash-3 > .stack { margin-top: 0; }
.cards-2:has(> .chart) { align-items: stretch; }
.filters-bare { padding: 0; border-bottom: 0; margin-bottom: 1rem; }
.plain-list a { text-decoration: none; }
.plain-list a:hover { text-decoration: underline; }
.text-warning { color: hsl(var(--warning-text)); }
.alert-info { background: hsl(var(--primary) / 0.08); }
.public-top { display: flex; align-items: center; padding: 1rem 1.5rem; }
.public-brand { display: flex; align-items: center; gap: 0.6rem; color: inherit; font-weight: 700; text-decoration: none; }
.public-main { padding: 0 1rem 3rem; }
.public-narrow { max-width: 46rem; margin-inline: auto; }
.public-narrow-left { max-width: 42rem; }
.plan-choices { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.plan-choice { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.9rem; border: 1px solid hsl(var(--border)); border-radius: 0.6rem; cursor: pointer; }
.plan-choice:has(input:checked) { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.05); }
.plan-price { color: hsl(var(--primary-text)); font-weight: 600; margin: 0; }
.plan-own { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.04); }
.plan-wanted { border-color: hsl(var(--primary) / 0.6); }
.template-card { overflow: hidden; }
.template-shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: hsl(var(--muted)); }
.template-current { border-color: hsl(var(--primary)); }

/* Guides */
.guide { max-width: 56rem; margin-inline: auto; }
.guide-steps { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.guide-step { overflow: hidden; }
.guide-step-head { display: flex; gap: 1rem; }
.guide-number { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 0.85rem; font-weight: 700; }
.guide-shot { display: block; width: 100%; height: auto; border-top: 1px solid hsl(var(--border)); }
.tight-list { margin: 0; padding-left: 1.1rem; }
.tight-list li + li { margin-top: 0.35rem; }

/* Terms and privacy */
.legal { max-width: 46rem; margin-inline: auto; line-height: 1.65; }
.legal-intro { font-size: 1.1rem; }
.legal-contents ol { columns: 2; margin: 0.5rem 0 0; padding-left: 1.2rem; }
.legal-section { margin-top: 2rem; scroll-margin-top: 1rem; }
.legal-section ul { padding-left: 1.2rem; }
.legal-section li + li { margin-top: 0.4rem; }

/* The front page */
.landing { scroll-behavior: smooth; }
.landing body { background: hsl(var(--background)); }
.site-wrap { max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
.site-nav { position: sticky; top: 0; z-index: 50; background: hsl(var(--background) / 0.92); border-bottom: 1px solid hsl(var(--border)); backdrop-filter: blur(10px); }
.site-nav-row { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.site-links { display: flex; flex: 1; gap: 1.4rem; font-size: 0.9rem; }
.site-links a { color: hsl(var(--muted-foreground)); text-decoration: none; }
.site-links a:hover { color: hsl(var(--foreground)); }
.site-actions { display: flex; align-items: center; gap: 0.9rem; margin-left: auto; font-size: 0.9rem; font-weight: 500; }
.site-actions > a:first-child { color: inherit; text-decoration: none; }
@media (max-width: 54rem) { .site-links { display: none; } }
.btn-lg { padding: 0.8rem 1.6rem; }
.hero { position: relative; overflow: hidden; padding: 5rem 0 6rem; background: radial-gradient(60rem 30rem at 85% -10%, hsl(var(--primary) / 0.45), transparent), radial-gradient(45rem 25rem at -5% 35%, hsl(132 44% 43% / 0.2), transparent), hsl(222 40% 9%); color: #fff; }
.hero-inner { text-align: center; }
.hero h1 { margin: 1.4rem auto 0; max-width: 48rem; font-size: clamp(2.3rem, 6vw, 3.8rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
.hero-accent { color: hsl(210 90% 76%); }
.hero-tag { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.35rem 1rem; border: 1px solid rgb(255 255 255 / 0.15); border-radius: 9999px; background: rgb(255 255 255 / 0.05); color: rgb(255 255 255 / 0.8); font-size: 0.85rem; }
.hero-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: hsl(38 92% 55%); }
.hero-lead { margin: 1.4rem auto 0; max-width: 42rem; color: rgb(255 255 255 / 0.72); font-size: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2.2rem; }
.btn-ghost-light, .btn-white, .btn-outline-light { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.8rem 1.6rem; border-radius: 9999px; font-weight: 600; text-decoration: none; }
.btn-ghost-light { border: 1px solid rgb(255 255 255 / 0.28); color: #fff; }
.btn-ghost-light:hover { background: rgb(255 255 255 / 0.1); }
.btn-white { background: #fff; color: hsl(var(--primary)); }
.btn-outline-light { border: 1px solid rgb(255 255 255 / 0.28); background: transparent; color: #fff; }
.hero-note { margin-top: 1.1rem; color: rgb(255 255 255 / 0.5); font-size: 0.85rem; }
.hero-shot { max-width: 62rem; margin: 3.5rem auto 0; padding: 0.5rem; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 1rem; background: rgb(255 255 255 / 0.05); box-shadow: 0 40px 120px -30px rgb(0 0 0 / 0.8); }
.hero-shot img { display: block; width: 100%; height: auto; border-radius: 0.7rem; }
.proof { border-bottom: 1px solid hsl(var(--border)); }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem; padding-block: 2.5rem; }
.proof-item { display: flex; align-items: center; gap: 0.75rem; }
.proof-item p { margin: 0; }
.site-icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 0.8rem; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary-text)); }
.site-section { padding-block: 5.5rem; scroll-margin-top: 4rem; }
.site-section h2 { margin: 0.6rem 0 0; font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.site-head { max-width: 42rem; margin: 0 auto 3rem; text-align: center; }
.eyebrow { margin: 0; color: hsl(var(--primary-text)); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.site-tint { background: hsl(var(--muted) / 0.45); }
.site-dark { background: hsl(222 40% 9%); color: #fff; }
.site-dark .eyebrow, .site-dark .site-head p:last-child { color: rgb(255 255 255 / 0.68); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; }
.feature { padding: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--card)); transition: transform 0.2s, border-color 0.2s; }
.feature:hover { transform: translateY(-3px); border-color: hsl(var(--primary) / 0.35); }
.feature h3 { margin: 1rem 0 0.4rem; font-size: 1rem; }
.feature p { margin: 0; }
.split-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 3rem; align-items: center; }
.check-list { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid hsl(var(--border)); border-radius: 0.8rem; background: hsl(var(--card)); }
.check-list .icon { flex: none; }
.tick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.5rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.tick-grid li { display: flex; gap: 0.5rem; }
.tick-grid .icon { flex: none; }
.showcase { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.showcase-radio { position: absolute; opacity: 0; }
.showcase-tab { padding: 0.5rem 1rem; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: hsl(var(--card)); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.showcase-radio:checked + .showcase-tab { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.showcase-radio:focus-visible + .showcase-tab { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.showcase-panel { display: none; order: 10; width: 100%; margin-top: 1.5rem; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; align-items: center; }
.showcase-radio:checked + .showcase-tab + .showcase-panel { display: grid; }
@media (max-width: 54rem) { .showcase-panel { grid-template-columns: minmax(0, 1fr); } }
.showcase-frame { overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: 1rem; box-shadow: 0 20px 50px -20px hsl(var(--primary) / 0.3); }
.showcase-frame img { display: block; width: 100%; height: auto; }
.showcase-name { margin: 0.3rem 0 0.6rem; font-size: 1.8rem; }
.showcase-plan { padding: 0.25rem 0.75rem; border-radius: 9999px; background: hsl(var(--muted)); }
.card-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; }
.card-gallery figure { margin: 0; }
.card-gallery img { display: block; width: 100%; height: auto; border: 1px solid hsl(var(--border)); border-radius: 0.7rem; background: #fff; box-shadow: 0 12px 30px -14px rgb(15 23 42 / 0.35); transition: transform 0.25s; }
.card-gallery a:hover img { transform: translateY(-6px) rotate(-0.6deg); }
.card-gallery figcaption { margin-top: 0.8rem; }
.card-gallery figcaption p { margin: 0.2rem 0 0; }
.revision-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.revision-number { color: hsl(var(--primary-text)); font-size: 1.9rem; font-weight: 800; }
.revision-stats p { margin: 0.25rem 0 0; }
.demo-notice { max-width: 36rem; margin-inline: auto; text-align: center; }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.2rem; }
.demo-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--card)); color: inherit; text-decoration: none; transition: transform 0.2s; }
.demo-card:hover { transform: translateY(-3px); border-color: hsl(var(--primary) / 0.4); }
.demo-card small { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; opacity: 0.7; text-transform: uppercase; }
.demo-card strong { font-size: 1.25rem; }
.demo-card span { flex: 1; opacity: 0.8; }
.demo-card em { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.8rem; font-size: 0.88rem; font-style: normal; font-weight: 600; }
.demo-first { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.2rem; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid rgb(255 255 255 / 0.15); border-radius: 1rem; background: rgb(255 255 255 / 0.05); }
.price-figure { margin: 0.8rem 0 0; font-size: 1.9rem; font-weight: 800; }
.price-figure small { font-size: 0.85rem; font-weight: 500; opacity: 0.65; }
.price-note { margin: 0.4rem 0 0; opacity: 0.65; }
.price-lines { display: flex; flex: 1; flex-direction: column; gap: 0.45rem; margin: 1.2rem 0; padding: 0; list-style: none; opacity: 0.88; }
.price-lines li { display: flex; gap: 0.45rem; }
.price-lines .icon { flex: none; color: hsl(132 50% 55%); }
.price-featured { border-color: hsl(var(--primary)); background: #fff; color: #0f172a; }
.price-featured .price-lines .icon { color: hsl(132 44% 35%); }
.price-flag { position: absolute; top: -0.7rem; left: 1.4rem; padding: 0.15rem 0.7rem; border-radius: 9999px; background: hsl(132 44% 35%); color: #fff; font-size: 0.75rem; font-weight: 600; }
.price-foot { margin-top: 2rem; opacity: 0.62; }
.price-actions { display: grid; gap: 0.5rem; }
.price-bonus { text-align: center; font-size: 0.75rem; opacity: 0.7; }
.price-featured .price-subscribe { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.book-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 3rem; align-items: start; }
.faq { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 2rem; }
.faq summary { cursor: pointer; }
.faq p { margin: 0.5rem 0 0; }
.closing { padding: 0 1.25rem 5rem; }
.closing-inner { padding-block: 4rem; border-radius: 1.5rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); text-align: center; }
.closing h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.closing p { margin: 0.8rem 0 0; opacity: 0.82; }
.site-foot { padding-block: 2.5rem 2rem; border-top: 1px solid hsl(var(--border)); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-items: center; }
.foot-links a { color: hsl(var(--muted-foreground)); text-decoration: none; }
.foot-links a:hover { color: hsl(var(--foreground)); }

/* The operator's console */
.platform-top { border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.platform-wrap { max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
.platform-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; padding-block: 0.7rem; }
.platform-brand { color: hsl(var(--primary-text)); font-size: 1.05rem; font-weight: 800; text-decoration: none; }
.platform-brand .muted { font-weight: 500; }
.platform-links { display: flex; flex: 1; flex-wrap: wrap; gap: 0.3rem 1rem; }
.platform-links a { color: hsl(var(--muted-foreground)); text-decoration: none; }
.platform-links a:hover { color: hsl(var(--foreground)); }
.platform-user { display: flex; align-items: center; gap: 0.6rem; }
.platform-main { padding-block: 1.5rem; }
.no-top { margin-top: 0; }
.danger-box { border-color: hsl(var(--destructive-text) / 0.35); }
.split-request { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: 1rem; }
@media (max-width: 40rem) { .split-request { grid-template-columns: minmax(0, 1fr); } }
.award-row { display: grid; flex: 1; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) minmax(0, 1.4fr); gap: 0.5rem; align-items: center; }
@media (max-width: 54rem) { .award-row { grid-template-columns: minmax(0, 1fr); } }
.signature-preview { max-width: 14rem; max-height: 4rem; object-fit: contain; }
.rc-frame-view { display: block; width: 100%; height: 75vh; border: 0; border-top: 1px solid hsl(var(--border)); }
.verify-box { max-width: 32rem; }

/* The Revision Bank */
.rb-nav { flex-wrap: wrap; padding-block: 0.4rem; }
.rb-links { display: flex; flex: 1; flex-wrap: wrap; gap: 0.2rem; }
.rb-links a { padding: 0.3rem 0.7rem; border-radius: 9999px; color: hsl(var(--muted-foreground)); text-decoration: none; white-space: nowrap; }
.rb-links a[data-current] { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary-text)); font-weight: 600; }
.rb-main { padding-block: 1.75rem 3rem; }
.rb-main h1 { margin: 0; font-size: clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing: -0.015em; }
.rb-narrow { max-width: 50rem; margin-inline: auto; }
.rb-center { justify-content: center; }
.rb-grow { flex: 1; min-width: 0; }
.rb-para { margin: 0; line-height: 1.55; }
.rb-daily-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 54rem) { .rb-daily-grid { grid-template-columns: minmax(0, 1fr); } }
.rb-hidden { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; padding: 1rem; border: 1px dashed hsl(var(--border)); border-radius: 0.8rem; }
.rb-hidden p { margin: 0; }
.rb-clock { font-variant-numeric: tabular-nums; }
.rb-meter { flex: 1; margin-left: 1rem; }
.rb-hero { padding: 2rem; border-radius: 1.2rem; background: linear-gradient(135deg, hsl(var(--primary) / 0.1), hsl(var(--primary) / 0.02)); }
.rb-hero p { margin: 0.5rem 0 1rem; max-width: 44rem; }
.rb-totals { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1.5rem 0 0; }
.rb-totals dd { margin: 0; color: hsl(var(--primary-text)); font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rb-totals dt { display: block; }
.rb-ways { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.rb-way { display: flex; flex-direction: column; gap: 0.4rem; color: inherit; text-decoration: none; }
.rb-subject-rows { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.rb-subject-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; color: inherit; text-decoration: none; }
.rb-subject-row:hover, .rb-subject-card:hover { border-color: hsl(var(--primary) / 0.4); }
.rb-subject-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); margin-top: 0.6rem; }
.rb-subject-card { overflow: hidden; color: inherit; text-decoration: none; }
.rb-subject-card svg, .rb-art-small svg { display: block; width: 100%; height: auto; }
.rb-art-small { display: block; flex: none; width: 6.5rem; overflow: hidden; border-radius: 0.6rem; }
.rb-subject-head { align-items: flex-start; }
.rb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.rb-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.9rem; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: hsl(var(--card)); color: inherit; font-size: 0.875rem; text-decoration: none; white-space: nowrap; }
.rb-chip:hover { border-color: hsl(var(--primary) / 0.4); }
.rb-chip[data-current] { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.rb-chip-sm { padding: 0.2rem 0.65rem; font-size: 0.78rem; }
.rb-chip-off { opacity: 0.5; }
.rb-two { display: grid; gap: 1.25rem; grid-template-columns: 17rem minmax(0, 1fr); align-items: start; }
.rb-two-end { grid-template-columns: minmax(0, 1fr) 17rem; }
@media (max-width: 54rem) { .rb-two, .rb-two-end { grid-template-columns: minmax(0, 1fr); } }
.rb-questions li { padding: 0; }
.rb-question-row { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; padding: 0.3rem 0; color: inherit; text-decoration: none; }
.rb-question-row:hover .rb-stem { text-decoration: underline; }
.rb-picture { display: block; max-width: 100%; max-height: 22rem; height: auto; border-radius: 0.5rem; }
.rb-option-picture { display: block; max-width: 8rem; margin-top: 0.4rem; border-radius: 0.3rem; }
.rb-options { display: flex; flex-direction: column; gap: 0.5rem; }
.rb-option { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0.8rem; border: 1px solid hsl(var(--border)); border-radius: 0.8rem; }
label.rb-option { cursor: pointer; }
label.rb-option:hover { border-color: hsl(var(--primary) / 0.4); }
label.rb-option:has(input:checked), .rb-chosen { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.08); }
.rb-option input { position: absolute; opacity: 0; }
.rb-option input:focus-visible + .rb-letter { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.rb-letter { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border: 1px solid hsl(var(--border)); border-radius: 50%; font-size: 0.75rem; font-weight: 700; }
label.rb-option:has(input:checked) .rb-letter { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.rb-right { border-color: hsl(122 45% 40%); background: hsl(122 45% 40% / 0.1); }
.rb-wrong { border-color: hsl(var(--destructive-text)); background: hsl(0 72% 51% / 0.08); }
.rb-runner { max-width: 50rem; margin-inline: auto; }
.rb-runner-bar { position: sticky; top: 4.5rem; z-index: 10; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.rb-q { margin-top: 1rem; }
.rb-q[hidden] { display: none; }
.rb-squares { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; }
.rb-square { width: 1.9rem; height: 1.9rem; border: 1px solid hsl(var(--border)); border-radius: 0.4rem; background: hsl(var(--card)); color: inherit; font-size: 0.75rem; cursor: pointer; }
.rb-square-done { background: hsl(var(--primary) / 0.15); }
.rb-square-on { border-color: hsl(var(--primary)); outline: 2px solid hsl(var(--primary)); }
.rb-score { padding: 2rem; border-radius: 1.2rem; background: hsl(var(--primary) / 0.08); text-align: center; }
.rb-score-pass { background: hsl(122 45% 40% / 0.14); }
.rb-score-fail { background: hsl(0 72% 51% / 0.09); }
.rb-score p { margin: 0.3rem 0; }
.rb-score-figure { font-size: 3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rb-score-figure small { color: hsl(var(--muted-foreground)); font-size: 1.4rem; font-weight: 500; }
.rb-review { margin-top: 0.9rem; }
.rb-part { padding-block: 0.6rem; border-top: 1px solid hsl(var(--border)); }
.rb-part p { margin: 0 0 0.3rem; }
.rb-response { padding: 0.5rem 0.7rem; border-radius: 0.5rem; background: hsl(var(--muted)); }
.rb-mark { max-width: 9rem; }
.rb-rank { flex: none; width: 1.8rem; text-align: center; }
.rb-board li { gap: 0.6rem; }

/* My revision, achievements, families (/learn, /family) */
.cards-3 { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.link-button { padding: 0; border: 0; background: none; color: hsl(var(--primary-text)); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.code-input { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.15em; text-transform: uppercase; }
.lr-welcome { position: relative; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 1.75rem; overflow: hidden; border-radius: 1.4rem; background: linear-gradient(135deg, hsl(var(--primary)), hsl(230 55% 22%)); color: #fff; }
.lr-welcome h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; }
.lr-welcome p { margin: 0.3rem 0 0; color: rgb(255 255 255 / 0.85); }
@media (max-width: 54rem) { .lr-welcome { grid-template-columns: minmax(0, 1fr); } }
.lr-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0 0; }
.lr-pills div { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem; border-radius: 9999px; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15); }
.lr-pills dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.lr-pills dt { color: rgb(255 255 255 / 0.78); font-size: 0.85rem; }
.lr-today { width: 18rem; max-width: 100%; padding: 1.2rem; border-radius: 1rem; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15); }
.lr-today .eyebrow { color: rgb(255 255 255 / 0.75); }
.lr-today p { margin: 0.3rem 0; }
.lr-today .btn { margin-top: 0.6rem; width: 100%; justify-content: center; }
.lr-actions { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin-top: 0.75rem; }
.lr-action { display: flex; flex-direction: column; gap: 0.4rem; color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
a.lr-action:hover { border-color: hsl(var(--primary) / 0.4); transform: translateY(-2px); }
.lr-highlight { border-color: hsl(var(--primary) / 0.5); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1); }
.lr-grow { flex: 1; }
.lr-tone { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; }
.lr-tone-primary { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary-text)); }
.lr-tone-warning { background: hsl(38 92% 50% / 0.16); color: hsl(var(--warning-text)); }
.lr-tone-accent { background: hsl(var(--accent) / 0.16); color: hsl(var(--success-text)); }
.lr-tone-success { background: hsl(122 45% 40% / 0.14); color: hsl(var(--success-text)); }
.lr-progress h2 { margin: 0; }
.lr-bars li { display: block; }
.lr-bar { height: 0.5rem; margin-top: 0.3rem; overflow: hidden; border-radius: 9999px; background: hsl(var(--muted)); }
.lr-bar span { display: block; height: 100%; border-radius: 9999px; background: hsl(var(--primary)); }
.lr-trophy { overflow: hidden; }
.lr-trophy-head { padding: 1rem 1.25rem; background: hsl(222 40% 11%); color: #fff; }
.lr-trophy-head p { margin: 0; }
.lr-trophy-head .strong { color: hsl(43 96% 65%); }
.lr-big { font-size: 1.6rem; font-weight: 800; }
.lr-big small { color: rgb(255 255 255 / 0.6); font-size: 0.95rem; font-weight: 500; }
.lr-trophy-head progress, .lr-collection progress { width: 100%; height: 0.4rem; margin-top: 0.5rem; border: 0; border-radius: 9999px; overflow: hidden; background: rgb(255 255 255 / 0.15); appearance: none; }
.lr-trophy-head progress::-webkit-progress-bar, .lr-collection progress::-webkit-progress-bar { background: rgb(255 255 255 / 0.15); }
.lr-trophy-head progress::-webkit-progress-value, .lr-collection progress::-webkit-progress-value { background: hsl(43 96% 56%); }
.lr-trophy-head progress::-moz-progress-bar, .lr-collection progress::-moz-progress-bar { background: hsl(43 96% 56%); }
.lr-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: 9999px; background: hsl(43 96% 56% / 0.16); font-size: 0.8rem; font-weight: 500; }
.lr-grey { filter: grayscale(1); opacity: 0.7; }
.lr-code { padding: 0.35rem 0.8rem; border: 1px dashed hsl(var(--primary) / 0.5); border-radius: 0.6rem; background: hsl(var(--primary) / 0.05); font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.2em; }
.lr-rule { margin: 0; padding-top: 0.75rem; border-top: 1px solid hsl(var(--border)); }
.lr-collection { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); padding: 1.75rem; border-radius: 1.4rem; background: radial-gradient(circle at 90% 0%, hsl(43 96% 56% / 0.25), transparent 45%), hsl(222 40% 11%); color: #fff; }
.lr-collection .eyebrow { color: hsl(43 96% 65%); }
.lr-collection p { margin: 0.4rem 0 0; }
.lr-collection progress { max-width: 28rem; height: 0.6rem; }
@media (max-width: 54rem) { .lr-collection { grid-template-columns: minmax(0, 1fr); } }
.lr-huge { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; }
.lr-huge small { color: rgb(255 255 255 / 0.6); font-size: 0.55em; }
.lr-collection .lr-chip { background: rgb(255 255 255 / 0.1); }
.lr-tiles { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; align-self: start; }
.lr-tiles div { padding: 1rem; border-radius: 1rem; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.lr-tiles .icon { color: hsl(43 96% 65%); }
.lr-tiles dd { margin: 0.4rem 0 0; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.lr-tiles dt { color: rgb(255 255 255 / 0.65); font-size: 0.78rem; }
.lr-track { display: flex; margin: 0; padding: 0 0 0.5rem; overflow-x: auto; list-style: none; }
.lr-track li { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; min-width: 5.5rem; gap: 0.2rem; text-align: center; }
.lr-track li + li::before { content: ""; position: absolute; top: 1.45rem; right: calc(50% + 1.6rem); left: calc(-50% + 1.6rem); height: 3px; border-radius: 3px; background: hsl(var(--border)); }
.lr-track li.lr-reached + li.lr-reached::before { background: hsl(25 95% 53%); }
.lr-dot { display: grid; place-items: center; width: 3rem; height: 3rem; border: 2px dashed hsl(var(--border)); border-radius: 50%; font-size: 1.3rem; }
.lr-earned .lr-dot { border: 2px solid hsl(25 95% 53%); background: hsl(25 95% 53% / 0.1); }
.lr-locked .lr-dot { filter: grayscale(1); opacity: 0.5; }
.lr-reached .lr-dot { box-shadow: 0 0 0 4px hsl(25 95% 53% / 0.2); }
.lr-badges { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 0.75rem 0 0; padding: 0; list-style: none; }
.lr-badges li { display: flex; gap: 0.8rem; padding: 0.9rem; }
.lr-badges li.lr-earned { border-color: hsl(43 96% 56% / 0.5); background: hsl(43 96% 56% / 0.07); }
.lr-badge-icon { position: relative; display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 0.8rem; background: hsl(43 96% 56% / 0.2); font-size: 1.5rem; }
.lr-locked .lr-badge-icon { background: hsl(var(--muted)); filter: grayscale(1); opacity: 0.6; }
.lr-lock { position: absolute; right: -0.3rem; bottom: -0.3rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid hsl(var(--border)); border-radius: 50%; background: hsl(var(--card)); }
.lr-locked strong { color: hsl(var(--muted-foreground)); }
.lr-earned-on { display: block; margin-top: 0.3rem; color: hsl(var(--warning-text)); font-weight: 600; }
.lr-mini-badges { display: grid; gap: 0.4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.lr-mini-badges li { display: flex; flex-direction: column; align-items: center; padding: 0.4rem 0.2rem; border: 1px solid hsl(var(--border)); border-radius: 0.7rem; font-size: 0.7rem; font-weight: 500; line-height: 1.2; text-align: center; }
.lr-mini-badges .lr-emoji { font-size: 1.4rem; }
.lr-mini-badges .lr-earned { border-color: hsl(var(--accent) / 0.4); background: hsl(var(--accent) / 0.1); }
.lr-mini-badges .lr-locked { filter: grayscale(1); opacity: 0.4; }
.lr-mini-stats { display: grid; gap: 0.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; text-align: center; }
.lr-mini-stats div { padding: 0.5rem; border-radius: 0.6rem; background: hsl(var(--muted) / 0.5); }
.lr-mini-stats .icon { color: hsl(var(--primary-text)); }
.lr-mini-stats dd { margin: 0.2rem 0 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lr-mini-stats dt { color: hsl(var(--muted-foreground)); font-size: 0.7rem; }
.lr-price { margin: 0; font-size: 2rem; font-weight: 800; text-align: right; }
.lr-price small { font-size: 0.85rem; font-weight: 400; }
.lr-plus h2 { margin: 0.4rem 0 0; }

/* Question bank and Thuto360's Revision Bank screens */
.qb-narrow { max-width: 54rem; }
.form-grid-3 { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.qb-picture { max-width: 16rem; max-height: 10rem; border: 1px solid hsl(var(--border)); border-radius: 0.5rem; background: #fff; object-fit: contain; }
.qb-options, .qb-parts { margin: 0; padding: 0; border: 0; }
.qb-options[hidden], .qb-parts[hidden], [data-show-when][hidden] { display: none; }
.qb-option { display: flex; align-items: center; gap: 0.6rem; }
.qb-option .check { flex: none; }
.qb-option input[type="text"], .qb-option input:not([type]) { flex: 1; }
.qb-part { display: flex; gap: 0.75rem; padding-top: 0.6rem; border-top: 1px solid hsl(var(--border)); }
.qb-part-fields { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.qb-part-grid { grid-template-columns: 7rem minmax(0, 1fr); }
.qb-note { min-width: 14rem; max-width: 24rem; }
.qb-section { max-width: none; font-size: 0.8rem; }
.qb-items > li { align-items: stretch; }
.qb-move { flex: none; }
.qb-found > li { justify-content: flex-start; }
.qb-good { background: hsl(var(--status-good)) !important; }
.qb-fair { background: hsl(var(--status-warning)) !important; }
.qb-poor { background: hsl(var(--status-critical)) !important; }
.rb-two-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 54rem) { .rb-two-even { grid-template-columns: minmax(0, 1fr); } }
.qb-reports { border-color: hsl(38 92% 50% / 0.5); background: hsl(38 92% 50% / 0.06); margin-bottom: 1rem; }
.qb-subject { padding-block: 0.6rem; border-bottom: 1px solid hsl(var(--border)); }
.qb-subject p { margin: 0 0 0.3rem; }
.qb-report { display: flex; }
.lr-next { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.lr-links a { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; text-decoration: none; }
.lr-links a:hover { text-decoration: underline; }
.bare-list { margin: 0; padding: 0; list-style: none; }

/* ==========================================================================
   Designs: Atlas, Horizon, Mosaic, Scholar, Aurora (the original's src/templates/templates.css
   and its shells). The layout (layouts/app.php) picks the arrangement; these rules decide
   typefaces, corners, cards, tables and buttons. Colours always come from the school's
   brand variables. A font file is only downloaded by a page that uses it.
   ========================================================================== */
@font-face { font-family: "DM Sans"; font-weight: 100 1000; font-display: swap; src: url("/assets/fonts/web/dm-sans.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500 800; font-display: swap; src: url("/assets/fonts/web/jakarta.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/web/inter.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/assets/fonts/web/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/assets/fonts/web/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700 800; font-display: swap; src: url("/assets/fonts/web/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/web/space-grotesk.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/web/fraunces.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/web/source-sans.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/web/outfit.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/web/manrope.woff2") format("woff2"); }

:root { --secondary: var(--brand-secondary, 21 88% 54%); --font-display: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif; --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --deep: var(--brand-primary-deep, 230 55% 22%); --deeper: var(--brand-primary-deeper, 230 60% 14%); }
html[data-template] body { font-family: var(--font-body); }
html[data-template] h1, html[data-template] h2, html[data-template] h3, html[data-template] .card-title, html[data-template] .stat-value, html[data-template] .brand-name { font-family: var(--font-display); }
html[data-template="horizon"] { --font-display: "Poppins", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --radius: 1.25rem; }
html[data-template="mosaic"] { --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "DM Sans", system-ui, sans-serif; --radius: 0.875rem; }
html[data-template="scholar"] { --font-display: "Fraunces", Georgia, serif; --font-body: "Source Sans 3", system-ui, sans-serif; --radius: 0.125rem; }
html[data-template="aurora"] { --font-display: "Outfit", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif; --radius: 1rem; }
html[data-template="horizon"] .icon, html[data-template="aurora"] .icon, html[data-template="scholar"] .icon { stroke: none; }
html[data-template="mosaic"] .icon { stroke-width: 2; }

/* The shell shows the page title; the page keeps its own for screen readers. */
.shell-owns-title .page-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Menus: <details>, opened by a click with or without script. */
.tpl-menu { position: relative; }
.tpl-menu > summary { list-style: none; cursor: pointer; }
.tpl-menu > summary::-webkit-details-marker { display: none; }
.tpl-panel { position: absolute; z-index: 60; min-width: 15rem; max-height: 75vh; overflow-y: auto; padding: 0.5rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 24px 50px -20px rgb(15 23 42 / 0.45); }
.tpl-panel .nav-heading { margin-top: 0.25rem; }
.tpl-panel .nav-link { color: hsl(var(--foreground)); }
.tpl-panel .nav-link[data-current]::before { display: none; }

/* On a phone, a design's sections live in the drawer. */
@media (max-width: 1023px) {
  .shell-floating .sidebar, .shell-topnav .sidebar, .shell-rail .sidebar { top: 0; z-index: 70; }
}
@media (min-width: 1024px) {
  .shell-topnav .sidebar, .shell-rail .sidebar { display: none; }
}

/* ---- Horizon: a floating drawer in the school's deep colour, and a glass title pill ---- */
html[data-template="horizon"] body { background: radial-gradient(60rem 40rem at 100% -10%, hsl(var(--primary) / 0.14), transparent 60%), radial-gradient(50rem 30rem at -10% 110%, hsl(var(--secondary) / 0.12), transparent 60%), hsl(var(--background)); background-attachment: fixed; }
.hz .sidebar { --nav-text: 0 0% 100%; --nav-muted: var(--brand-primary-soft, 230 40% 80%); top: 0.75rem; bottom: 0.75rem; left: 0.75rem; width: 16.5rem; border-radius: 1.75rem; background: hsl(var(--deep)); color: #fff; box-shadow: 0 24px 60px -20px hsl(var(--deep) / 0.55); }
.hz .nav-link { color: rgb(255 255 255 / 0.86); }
.hz .nav-link:hover { background: hsl(var(--brand-primary-deep-hover, 230 50% 30%)); color: #fff; }
.hz .nav-link[data-current] { background: #fff; color: hsl(var(--deep)); box-shadow: none; }
.hz .nav-link[data-current]::before { display: none; }
.hz .nav-children { border-color: rgb(255 255 255 / 0.2); }
.hz-brand { padding: 1.25rem 1rem 0.75rem; }
.hz-brand .brand { width: auto; color: #fff; }
.hz-brand .brand-logo { background: #fff; border-radius: 0.5rem; padding: 0.15rem; }
.hz-body { padding-left: 17.75rem; }
.hz-pill { position: sticky; top: 0.75rem; z-index: 30; display: flex; align-items: center; gap: 0.5rem; height: 3.5rem; margin: 0.75rem 1rem 0; padding: 0 0.5rem 0 1.25rem; border: 1px solid rgb(255 255 255 / 0.45); border-radius: 9999px; background: hsl(var(--card) / 0.72); box-shadow: 0 12px 40px -12px rgb(15 23 42 / 0.35); backdrop-filter: blur(18px); }
.dark .hz-pill { border-color: rgb(255 255 255 / 0.08); }
.hz-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.hz main#main { padding: 1.5rem 1rem 2.5rem; }
html[data-template="horizon"] .card { border-color: transparent; box-shadow: 0 18px 40px -24px rgb(15 23 42 / 0.28), 0 2px 6px -2px rgb(15 23 42 / 0.06); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s; }
html[data-template="horizon"] .stat:hover, html[data-template="horizon"] a:hover > .card, html[data-template="horizon"] a.card:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -24px hsl(var(--primary) / 0.45); }
html[data-template="horizon"] table { border-collapse: separate; border-spacing: 0 0.35rem; }
html[data-template="horizon"] tbody td { background: hsl(var(--muted) / 0.55); border-bottom: 0; }
html[data-template="horizon"] tbody td:first-child { border-radius: 999px 0 0 999px; }
html[data-template="horizon"] tbody td:last-child { border-radius: 0 999px 999px 0; }
html[data-template="horizon"] tbody tr:hover td { background: hsl(var(--primary) / 0.1); }
html[data-template="horizon"] .btn:not(.btn-quiet):hover { box-shadow: 0 10px 24px -10px hsl(var(--primary) / 0.7); transform: translateY(-1px); }
html[data-template="horizon"] .page-head-row:has(.page-actions) { padding: 0.9rem 1.25rem; border-radius: 1.5rem; background: hsl(var(--card) / 0.7); box-shadow: 0 10px 30px -20px rgb(15 23 42 / 0.4); backdrop-filter: blur(12px); }
@media (max-width: 1023px) {
  .hz-body { padding-left: 0; }
  .hz .sidebar { top: 0; bottom: 0; left: 0; border-radius: 0 1.5rem 1.5rem 0; }
  .hz-pill { margin: 0.5rem; padding-left: 0.5rem; }
}

/* ---- Scholar: menus across a bar in the school's colour, a serif masthead ---- */
html[data-template="scholar"]:not(.dark) { --background: 40 33% 97%; }
html[data-template="scholar"] body { background: hsl(var(--background)); }
.sc-wrap { display: flex; align-items: center; gap: 0.5rem; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.sc-head { position: sticky; top: 0; z-index: 40; color: #fff; box-shadow: 0 6px 20px -12px rgb(0 0 0 / 0.4); }
.sc-strip { background: hsl(var(--deep)); }
.sc-strip .sc-wrap { height: 3rem; }
.sc-strip .brand { width: auto; margin-right: auto; color: #fff; }
.sc-strip .brand-logo { background: #fff; border-radius: 0.25rem; padding: 0.1rem; }
.sc-strip .icon-btn, .sc-strip .user-chip { color: #fff; }
.sc-strip .icon-btn:hover, .sc-strip .user-chip:hover { background: rgb(255 255 255 / 0.15); color: #fff; }
.sc-strip .user-text small { color: rgb(255 255 255 / 0.72); }
.sc-bar { background: hsl(var(--primary)); }
.sc-bar .sc-wrap { height: 3rem; gap: 0; }
.sc-tab { position: relative; display: flex; align-items: center; gap: 0.3rem; height: 3rem; padding: 0 0.85rem; color: hsl(var(--primary-foreground) / 0.92); font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.sc-tab::after { content: ""; position: absolute; right: 0.85rem; bottom: 0; left: 0.85rem; height: 3px; background: hsl(var(--secondary)); transform: scaleX(0); transition: transform 0.2s; }
.sc-tab:hover::after, .sc-tab[data-current]::after, .tpl-menu[open] > .sc-tab::after { transform: scaleX(1); }
.sc-tab .icon { opacity: 1; }
.sc-tab-menu .tpl-panel { top: 100%; left: 0; border-top: 4px solid hsl(var(--secondary)); border-radius: 0; }
.sc-masthead { border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.sc-masthead .sc-wrap { display: block; padding: 2rem 1rem 1.5rem; }
.sc-kicker { margin: 0; color: hsl(var(--primary-text)); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.sc-title { margin: 0.3rem 0 0; font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 600; line-height: 1.15; }
.sc-rule { height: 5px; margin-top: 1.25rem; border-top: 1px solid hsl(var(--foreground) / 0.7); border-bottom: 1px solid hsl(var(--foreground) / 0.7); }
main.sc-wrap { display: block; padding: 2rem 1rem 3rem; }
.sc-foot { border-top: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 0.75rem; }
.sc-foot .sc-wrap { justify-content: space-between; padding: 1.25rem 1rem; }
html[data-template="scholar"] .card { border-top: 3px solid hsl(var(--primary)); box-shadow: none; }
html[data-template="scholar"] .stat { background-image: none; }
html[data-template="scholar"] a:hover > .card, html[data-template="scholar"] .stat:hover { background-color: hsl(var(--primary) / 0.03); }
html[data-template="scholar"] thead th { color: hsl(var(--foreground)); font-family: var(--font-display); letter-spacing: 0; text-transform: none; box-shadow: inset 0 -3px 0 -1px hsl(var(--card)), inset 0 -4px 0 hsl(var(--foreground) / 0.6); }
html[data-template="scholar"] tbody tr:nth-child(even) { background: hsl(var(--foreground) / 0.025); }
html[data-template="scholar"] tbody tr:hover { background: hsl(var(--secondary) / 0.08); }
html[data-template="scholar"] .btn { border-radius: 0.125rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
html[data-template="scholar"] .page-head p.muted { font-style: italic; }
html[data-template="scholar"] .page-head-row:has(.page-actions, p.muted) { padding-bottom: 1rem; border-bottom: 1px solid hsl(var(--foreground) / 0.2); }
@media (max-width: 1023px) {
  .sc-bar { display: none; }
  .sc-strip .brand { margin-right: auto; }
}

/* ---- Mosaic: a dock along the bottom, title and tools as floating chips, tiles with colour caps ---- */
html[data-template="mosaic"]:not(.dark) body { background-color: hsl(220 20% 95%); background-image: linear-gradient(hsl(var(--foreground) / 0.035) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--foreground) / 0.035) 1px, transparent 1px); background-size: 48px 48px; }
.mo-top { position: fixed; top: 0.75rem; right: 0.75rem; left: 0.75rem; z-index: 30; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; pointer-events: none; }
.mo-chip { display: flex; align-items: center; gap: 0.75rem; min-width: 0; padding: 0.4rem 0.75rem; border: 1px solid rgb(255 255 255 / 0.45); border-radius: 1rem; background: hsl(var(--card) / 0.78); box-shadow: 0 10px 30px -14px rgb(15 23 42 / 0.35); pointer-events: auto; backdrop-filter: blur(18px); }
.dark .mo-chip, .dark .mo-dock { border-color: rgb(255 255 255 / 0.08); }
.mo-brand { width: auto; }
.mo-brand .brand-name { display: none; }
.mo-title { max-width: 50vw; margin: 0; overflow: hidden; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.mo main#main { max-width: 90rem; margin: 0 auto; padding: 6.25rem 1.5rem 9rem; }
.mo-powered { position: relative; margin-top: -7.5rem; text-align: center; }
.mo-dock { position: fixed; bottom: 1rem; left: 50%; z-index: 40; display: flex; align-items: flex-end; gap: 0.25rem; max-width: calc(100vw - 1.5rem); padding: 0.65rem 0.75rem; border: 1px solid rgb(255 255 255 / 0.45); border-radius: 1.75rem; background: hsl(var(--card) / 0.72); box-shadow: 0 20px 50px -15px rgb(15 23 42 / 0.45); transform: translateX(-50%); backdrop-filter: blur(24px); }
.mo-item { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 0.15rem; color: inherit; text-decoration: none; }
.mo-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 1rem; background: hsl(var(--card)); box-shadow: 0 2px 6px -2px rgb(15 23 42 / 0.2); transition: transform 0.2s ease-out; }
.mo-icon .icon { width: 1.25rem; height: 1.25rem; }
.mo-item:hover .mo-icon, .tpl-menu[open] > .mo-item .mo-icon { transform: translateY(-6px) scale(1.1); }
.mo-item[data-current] .mo-icon { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 8px 16px -6px hsl(var(--primary) / 0.6); }
.mo-item[data-current]::after { content: ""; position: absolute; bottom: -0.4rem; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: hsl(var(--primary)); }
.mo-label { position: absolute; top: -2rem; left: 50%; padding: 0.1rem 0.5rem; border-radius: 0.4rem; background: hsl(var(--foreground)); color: hsl(var(--background)); font-size: 0.7rem; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateX(-50%); transition: opacity 0.15s; pointer-events: none; }
.mo-item:hover .mo-label, .mo-item:focus-visible .mo-label { opacity: 1; }
.tpl-menu[open] > .mo-item .mo-label { opacity: 0; }
.mo-item-menu .tpl-panel { bottom: calc(100% + 1.1rem); left: 50%; border-color: rgb(255 255 255 / 0.4); border-radius: 1.5rem; background: hsl(var(--card) / 0.92); transform: translateX(-50%); backdrop-filter: blur(20px); }
html[data-template="mosaic"] .card { position: relative; border-color: transparent; box-shadow: 0 1px 0 rgb(15 23 42 / 0.04), 0 6px 16px -10px rgb(15 23 42 / 0.25); transition: transform 0.18s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.18s; }
html[data-template="mosaic"] .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; border-radius: var(--radius) var(--radius) 0 0; background: hsl(var(--primary)); pointer-events: none; }
html[data-template="mosaic"] .card:nth-child(3n + 2)::before { background: hsl(var(--secondary)); }
html[data-template="mosaic"] .card:nth-child(3n)::before { background: hsl(var(--accent)); }
html[data-template="mosaic"] .stat:hover, html[data-template="mosaic"] a.card:hover, html[data-template="mosaic"] a:hover > .card { transform: translateY(-3px) rotate(-0.4deg); box-shadow: 0 16px 30px -18px rgb(15 23 42 / 0.45); }
html[data-template="mosaic"] tbody tr:nth-child(even) { background: hsl(var(--muted) / 0.45); }
html[data-template="mosaic"] tbody tr:hover { background: hsl(var(--secondary) / 0.12); }
html[data-template="mosaic"] .btn { border-radius: 0.75rem; box-shadow: 0 3px 0 hsl(var(--foreground) / 0.25); }
html[data-template="mosaic"] .btn-quiet { box-shadow: 0 3px 0 hsl(var(--border)); }
html[data-template="mosaic"] .btn:active { box-shadow: none; transform: translateY(3px); }
html[data-template="mosaic"] .page-head-row:has(.page-actions, p.muted) { padding: 1rem 1.25rem; border-radius: var(--radius); background: hsl(var(--card)); box-shadow: 0 6px 16px -10px rgb(15 23 42 / 0.25); }
@media (max-width: 700px) {
  .mo-dock { justify-content: flex-start; overflow-x: auto; }
  .mo-item-menu .tpl-panel { position: fixed; right: 0.75rem; bottom: 6rem; left: 0.75rem; transform: none; }
  .mo main#main { padding: 5.5rem 0.75rem 8.5rem; }
}

/* ---- Aurora: a rail of section icons with flyouts, a colour band carrying the title ---- */
.au-rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 4.75rem; padding: 1rem 0; background: hsl(var(--deeper)); }
.au-brand { width: auto; margin-bottom: 1rem; }
.au-brand .brand-name { display: none; }
.au-brand .brand-logo { background: #fff; border-radius: 0.6rem; padding: 0.15rem; }
.au-rail nav { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.au-button { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 1rem; color: rgb(255 255 255 / 0.72); transition: background 0.2s, color 0.2s; }
.au-button .icon { width: 1.3rem; height: 1.3rem; }
.au-button:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.au-button[data-current], .tpl-menu[open] > .au-button { background: #fff; color: hsl(var(--deeper)); box-shadow: 0 0 24px -4px rgb(255 255 255 / 0.6); }
.au-button-menu .tpl-panel { top: 0; left: calc(100% + 1.1rem); border-color: rgb(255 255 255 / 0.1); border-radius: 1.5rem; background: hsl(var(--deeper) / 0.95); color: #fff; backdrop-filter: blur(16px); }
.au-button-menu .tpl-panel .nav-heading { color: rgb(255 255 255 / 0.6); }
.au-button-menu .tpl-panel .nav-link { color: rgb(255 255 255 / 0.86); }
.au-button-menu .tpl-panel .nav-link:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.au-button-menu .tpl-panel .nav-link[data-current] { background: #fff; color: hsl(var(--deeper)); box-shadow: none; }
.au-body { position: relative; padding-left: 4.75rem; }
.au-bar { position: absolute; top: 0; right: 0; left: 4.75rem; z-index: 30; display: flex; align-items: center; gap: 0.75rem; height: 4rem; padding: 0 2rem; color: #fff; }
.au-bar-name { margin-right: auto; font-family: var(--font-display); font-weight: 600; opacity: 0.85; }
.au-bar .icon-btn, .au-bar .user-chip { color: #fff; }
.au-bar .icon-btn:hover, .au-bar .user-chip:hover { background: rgb(255 255 255 / 0.15); color: #fff; }
.au-bar .user-text small { color: rgb(255 255 255 / 0.72); }
.au-band { position: relative; overflow: hidden; padding: 6rem 2rem 6rem; background: linear-gradient(135deg, hsl(var(--deeper)) 0%, hsl(var(--deep)) 45%, hsl(var(--primary)) 100%); color: #fff; }
.au-title { position: relative; margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; }
.au-glow { position: absolute; border-radius: 999px; opacity: 0.55; filter: blur(60px); pointer-events: none; }
.au-glow-a { top: -10rem; right: -6rem; width: 28rem; height: 28rem; background: hsl(var(--secondary)); animation: au-drift 14s ease-in-out infinite alternate; }
.au-glow-b { bottom: -12rem; left: 30%; width: 22rem; height: 22rem; background: hsl(var(--accent)); animation: au-drift 18s ease-in-out infinite alternate-reverse; }
@keyframes au-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-4rem, 2rem) scale(1.15); } }
.au main#main { position: relative; z-index: 10; margin-top: -3.5rem; padding: 0 2rem 3rem; }
.au-powered { text-align: center; }
html[data-template="aurora"] .card { border-color: hsl(var(--border) / 0.6); box-shadow: 0 20px 45px -28px hsl(var(--deeper) / 0.55); transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s; }
html[data-template="aurora"] .stat:hover, html[data-template="aurora"] a.card:hover, html[data-template="aurora"] a:hover > .card { border-color: hsl(var(--primary) / 0.5); box-shadow: 0 0 0 1px hsl(var(--primary) / 0.25), 0 24px 50px -20px hsl(var(--primary) / 0.6); transform: translateY(-3px); }
html[data-template="aurora"] tbody tr:hover { background: linear-gradient(90deg, hsl(var(--primary) / 0.12), transparent 70%); box-shadow: inset 2px 0 0 hsl(var(--secondary)); }
html[data-template="aurora"] .btn:not(.btn-quiet):not(.btn-danger) { background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--deep))); }
html[data-template="aurora"] .page-head { min-height: 3.5rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: hsl(var(--card) / 0.88); box-shadow: 0 20px 40px -24px hsl(var(--deeper) / 0.6); backdrop-filter: blur(14px); }
@media (max-width: 1023px) {
  .au-rail { display: none; }
  .au-body { padding-left: 0; }
  .au-bar { left: 0; padding: 0 0.75rem; }
  .au-band { padding: 5rem 1rem 5rem; }
  .au main#main { padding: 0 0.75rem 2rem; }
}
@media (prefers-reduced-motion: reduce) { .au-glow { animation: none; } }

/* Sign-in pages in each design: the school's side panel takes the design's frame. */
.auth-side { position: relative; overflow: hidden; }
.auth-side > :not(.au-glow) { position: relative; }
.auth-side .au-glow { display: none; }
html[data-template="horizon"] .auth-side { margin: 0.75rem; border-radius: 1.75rem; background: hsl(var(--deep)); }
html[data-template="horizon"] .auth-card { padding: 2rem; border-radius: 1.5rem; box-shadow: 0 24px 60px -30px rgb(15 23 42 / 0.4); }
html[data-template="mosaic"] .auth-main:not(.dark *) { background-color: hsl(220 20% 95%); background-image: linear-gradient(hsl(var(--foreground) / 0.035) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--foreground) / 0.035) 1px, transparent 1px); background-size: 48px 48px; }
html[data-template="mosaic"] .auth-card { padding: 2rem; border-top: 5px solid hsl(var(--secondary)); border-radius: 0.875rem; background: hsl(var(--card)); box-shadow: 0 6px 16px -10px rgb(15 23 42 / 0.25); }
html[data-template="scholar"] .auth-side { background: hsl(var(--deep)); border-right: 6px solid hsl(var(--secondary)); }
html[data-template="scholar"] .auth-side h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; }
html[data-template="scholar"] .auth-card { border-top: 3px solid hsl(var(--primary)); padding-top: 1.5rem; }
html[data-template="aurora"] .auth-side { background: linear-gradient(135deg, hsl(var(--deeper)) 0%, hsl(var(--deep)) 45%, hsl(var(--primary)) 100%); }
html[data-template="aurora"] .auth-side .au-glow { display: block; }

/* Paying by bank transfer: the four steps, the choices, the reference. */
.pay-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.pay-step { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; font-size: 0.8rem; color: hsl(var(--muted-foreground)); position: relative; }
.pay-step + .pay-step::before { content: ""; position: absolute; top: 0.9rem; left: -50%; right: 50%; height: 2px; background: hsl(var(--border)); z-index: 0; }
.pay-step-done + .pay-step::before, .pay-step-done + .pay-step-done::before { background: hsl(var(--primary)); }
.pay-step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 9999px; border: 2px solid hsl(var(--border)); background: hsl(var(--card)); font-weight: 700; color: hsl(var(--muted-foreground)); }
.pay-step-dot .icon { width: 1rem; height: 1rem; }
.pay-step-done .pay-step-dot { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground, 0 0% 100%)); }
.pay-step-now .pay-step-dot { border-color: hsl(var(--primary)); color: hsl(var(--primary)); box-shadow: 0 0 0 4px hsl(var(--primary) / 0.15); }
.pay-step-now { color: hsl(var(--foreground)); font-weight: 600; }
.pay-steps-ended .pay-step-dot { opacity: 0.6; }
.pay-step-badge { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: 0.35rem; border-radius: 9999px; background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); font-size: 0.8rem; vertical-align: middle; }
.pay-options { display: grid; gap: 0.5rem; }
.pay-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; border: 1px solid hsl(var(--border)); border-radius: 0.6rem; cursor: pointer; background: hsl(var(--card)); }
.pay-option:has(input:checked) { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)); background: hsl(var(--primary) / 0.05); }
.pay-option input { width: auto; flex: none; }
.pay-option-what { flex: 1; }
.pay-option-price { font-weight: 700; font-size: 1.05rem; }
.pay-summary { padding: 0.75rem 0.9rem; border-radius: 0.6rem; background: hsl(var(--muted)); }
.pay-summary p { margin: 0; }
.pay-howto { margin: 0; padding-left: 1.2rem; }
.pay-instructions p { margin: 0 0 0.6rem; }
.pay-instructions table td { color: inherit !important; }
.pay-reference { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0; padding: 0.75rem 0.9rem; border: 1px dashed hsl(var(--primary)); border-radius: 0.6rem; }
.pay-reference strong { font-size: 1.35rem; letter-spacing: 0.08em; }
.pay-done { border-left: 4px solid hsl(var(--success-text)); }
@media (max-width: 40rem) { .pay-step-name { font-size: 0.7rem; } }

/* Setting up a school: three steps, the emailed code, and the two ways to finish. */
.pay-steps-3 { grid-template-columns: repeat(3, 1fr); margin-top: 1.5rem; }
.code-input { font-size: 1.6rem; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
.signup-finish { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 30rem) { .signup-finish { grid-template-columns: 1fr; } }

/* Sign-in pages: the way back to the website. */
.auth-back { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 1rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); text-decoration: none; }
.auth-back:hover { color: hsl(var(--foreground)); text-decoration: underline; }
.auth-back .icon { width: 1rem; height: 1rem; }

/* "My dashboard": one entry per account the person can open. */
.dash-menu { position: relative; display: inline-block; }
.dash-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.dash-menu > summary::-webkit-details-marker { display: none; }
.dash-menu-panel { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 50; min-width: 15rem; padding: 0.35rem; border: 1px solid hsl(var(--border)); border-radius: 0.6rem; background: hsl(var(--card)); color: hsl(var(--card-foreground, var(--foreground))); box-shadow: 0 10px 30px hsl(0 0% 0% / 0.15); }
.dash-menu-panel form { margin: 0; }
.dash-menu-item { display: flex; flex-direction: column; width: 100%; padding: 0.5rem 0.65rem; border: 0; border-radius: 0.45rem; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.dash-menu-item:hover, .dash-menu-item:focus-visible { background: hsl(var(--muted)); }
.dash-menu-item small { color: hsl(var(--muted-foreground)); font-size: 0.75rem; }
.dash-menu-item[aria-current] { font-weight: 600; }
.site-menu-link { color: inherit; font: inherit; }

/* ---------- Thuto360's platform console (layouts/platform.php) ---------- */
.pf-body { background: hsl(var(--background)); }
.pf { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); min-height: 100vh; }
.pf-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 0.85rem; background: #17204f; color: #e7eaf7; overflow-y: auto; }
.dark .pf-side { background: hsl(228 35% 11%); border-right: 1px solid hsl(var(--border)); }
.pf-brand { display: flex; align-items: center; gap: 0.65rem; padding: 0.3rem 0.5rem 1rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.pf-brand img { flex: none; padding: 3px; border-radius: 10px; background: #fff; }
.pf-brand strong { display: block; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.01em; }
.pf-brand small { display: block; font-size: 0.72rem; color: #aab2da; }
.pf-nav { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.4rem; }
.pf-nav-head { margin: 1rem 0 0.3rem; padding: 0 0.65rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #8a93c4; }
.pf-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.65rem; border-radius: 0.6rem; color: #d5daf0; font-size: 0.9rem; font-weight: 500; text-decoration: none; }
.pf-link .icon { flex: none; width: 1.1rem; height: 1.1rem; opacity: 0.85; }
.pf-link span:first-of-type { flex: 1; }
.pf-link:hover { background: rgb(255 255 255 / 0.07); color: #fff; }
.pf-link[aria-current] { background: rgb(255 255 255 / 0.12); color: #fff; box-shadow: inset 3px 0 0 #F26A21; }
.pf-link[aria-current] .icon { opacity: 1; }
.pf-count { flex: none; min-width: 1.35rem; padding: 0.05rem 0.4rem; border-radius: 9999px; background: #F26A21; color: #fff; font-size: 0.72rem; font-weight: 700; text-align: center; }
.pf-side-foot { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid rgb(255 255 255 / 0.08); display: flex; flex-direction: column; gap: 0.1rem; }
.pf-link-quiet { font-size: 0.82rem; color: #aab2da; }
.pf-main { display: flex; flex-direction: column; min-width: 0; }
.pf-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1.5rem; background: hsl(var(--card) / 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid hsl(var(--border)); }
.pf-menu { display: none; }
.pf-search { position: relative; flex: 1; max-width: 30rem; }
.pf-search .icon { position: absolute; left: 0.75rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); color: hsl(var(--muted-foreground)); }
.pf-search input { width: 100%; padding: 0.55rem 0.75rem 0.55rem 2.3rem; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: hsl(var(--muted)); font: inherit; font-size: 0.9rem; color: inherit; }
.pf-search input:focus { outline: 2px solid hsl(var(--primary) / 0.4); background: hsl(var(--card)); }
.pf-tools { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.pf-user-chip { list-style: none; display: flex; align-items: center; gap: 0.55rem; padding: 0.25rem 0.45rem 0.25rem 0.25rem; border-radius: 9999px; cursor: pointer; }
.pf-user-chip::-webkit-details-marker { display: none; }
.pf-user-chip:hover { background: hsl(var(--muted)); }
.pf-user-chip .icon { width: 0.9rem; height: 0.9rem; color: hsl(var(--muted-foreground)); }
.pf-avatar { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 9999px; background: #2B3F9E; color: #fff; font-size: 0.8rem; font-weight: 700; }
.pf-user-text strong { display: block; font-size: 0.85rem; line-height: 1.2; }
.pf-user-text small { display: block; font-size: 0.72rem; color: hsl(var(--muted-foreground)); }
.pf-content { width: 100%; padding: 1.75rem 2rem 3rem; }
@media (max-width: 62rem) {
  .pf { grid-template-columns: minmax(0, 1fr); }
  .pf-side { position: fixed; z-index: 70; left: 0; top: 0; width: 16.5rem; transform: translateX(-100%); transition: transform 0.2s; box-shadow: 0 0 40px rgb(0 0 0 / 0.3); }
  .nav-open .pf-side { transform: none; }
  .pf-menu { display: inline-grid; }
  .pf-top { padding-inline: 1rem; }
  .pf-user-text { display: none; }
  .pf-content { padding-inline: 1rem; }
}

/* The overview page. */
.ov-hello { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.ov-hello h1 { margin: 0; font-size: 1.7rem; letter-spacing: -0.02em; }
.ov-hello p { margin: 0.25rem 0 0; }
.ov-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 1rem; }
.ov-kpi { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.2rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.ov-kpi:hover { border-color: hsl(var(--primary) / 0.35); transform: translateY(-2px); }
.ov-kpi-top { display: flex; align-items: center; justify-content: space-between; color: hsl(var(--muted-foreground)); font-size: 0.82rem; font-weight: 600; }
.ov-kpi-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 0.6rem; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary-text)); }
.ov-kpi-icon .icon { width: 1.1rem; height: 1.1rem; }
.ov-kpi strong { font-size: 1.65rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ov-kpi small { color: hsl(var(--muted-foreground)); font-size: 0.78rem; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.ov-attention { margin-top: 1rem; }
.ov-attention ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.ov-task { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; border: 1px solid hsl(var(--border)); border-left-width: 4px; border-radius: 0.65rem; background: hsl(var(--card)); color: inherit; text-decoration: none; }
.ov-task:hover { background: hsl(var(--muted)); }
.ov-task-warning { border-left-color: #F26A21; }
.ov-task-info { border-left-color: #2B3F9E; }
.dark .ov-task-info { border-left-color: hsl(230 65% 65%); }
.ov-task-muted { border-left-color: hsl(var(--border)); }
.ov-task .icon { flex: none; width: 1.2rem; height: 1.2rem; color: hsl(var(--muted-foreground)); }
.ov-task-n { flex: none; min-width: 2rem; font-size: 1.35rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.ov-task-what { flex: 1; min-width: 0; }
.ov-task-what strong { display: block; font-size: 0.9rem; }
.ov-task-what small { display: block; color: hsl(var(--muted-foreground)); font-size: 0.76rem; }
.ov-allclear { display: flex; align-items: center; gap: 0.6rem; }
.ov-allclear .icon { color: hsl(var(--success-text)); }
.ov-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ov-mix { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.ov-mix li { display: grid; grid-template-columns: 7rem 1fr 2.5rem; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.ov-bar { height: 0.55rem; border-radius: 9999px; background: hsl(var(--muted)); overflow: hidden; }
.ov-bar span { display: block; height: 100%; border-radius: 9999px; background: hsl(var(--primary)); }
.ov-grid > * { margin: 0; }
/* Narrow screens: one column whenever two would not fit, and a lighter top bar. */
.ov-kpis { grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); }
.ov-grid { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.ov-attention ul { grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
.pf-search { min-width: 0; }
@media (max-width: 40rem) {
  .pf-search { display: none; }
  .pf-top { gap: 0.4rem; }
  .pf-user-chip > .icon { display: none; }
  .ov-hello h1 { font-size: 1.4rem; }
}
/* In the console every page uses the full width, forms included. */
.pf-content .public-narrow, .pf-content .qb-narrow, .pf-content .narrow { max-width: none; margin-inline: 0; }