/* ---------- Tokens ---------- */
:root {
  --brand: #3568AB;
  --brand-link: #274060;
  --brand-border: #CCC;
  --brand-shadow: #888888;
  --brand-highlight: #FFFF99;
  --brand-alt-row: #ECECEC;
  --text: #666666;

  --ink: #1d2433;
  --muted: #5b6372;
  --line: #e3e7ed;
  --line-strong: #c9cfd8;
  --surface: #ffffff;
  --surface-alt: #eef1f5;
  --success-bg: #e6f4ea;
  --success-ink: #1e5631;
  --error-bg: #fbe9e7;
  --error-ink: #8a1c10;

  --radius: 12px;
  --radius-sm: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --tap: 44px;
  --font: Arial, Helvetica, sans-serif;
  --shadow-card: 0 1px 3px rgba(20,30,50,0.15);
  --shadow-float: 0 8px 24px rgba(20,30,50,0.28);
}

/* ---------- Layout ---------- */
.ui-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.ui-row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* ---------- Page header (sits on the school-colour background) ---------- */
.ui-page-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4); color: #ffffff; font-family: var(--font);
}
.ui-eyebrow { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; }
h1.ui-title { margin: var(--space-1) 0 0; font-family: var(--font); font-size: 28px; letter-spacing: 0; color: #ffffff; }
.ui-page-header .ui-row-wrap { gap: 10px; margin-right: 228px; } /* keep clear of the "Hello / Log off" tab at the top-right */
@media (max-width: 700px) { .ui-page-header .ui-row-wrap { margin-right: 0; } }

/* ---------- Card ---------- */
.ui-card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card);
  color: var(--ink); font-family: var(--font); font-size: 14px; overflow: hidden;
}
.ui-card-body { padding: 20px; }
.ui-card-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-3) 20px; border-bottom: 1px solid var(--line);
}
.ui-card-head h2 {
  margin: 0; padding: 0; font-family: var(--font); font-size: 18px; font-weight: bold;
  letter-spacing: 0; text-transform: none; white-space: normal; color: var(--ink);
}
.ui-count {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--surface-alt); color: #3c4453; font-size: 13px; font-weight: bold;
}
.ui-muted { color: var(--muted); font-size: 13px; }

/* ---------- Buttons ---------- */
.ui-btn, a.ui-btn:link, a.ui-btn:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-4); box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  color: var(--ink); font-family: var(--font); font-size: 14px; font-weight: bold;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ui-btn:hover { background: var(--surface-alt); }
.ui-btn-primary, a.ui-btn-primary:link, a.ui-btn-primary:visited {
  border-color: var(--brand); background: var(--brand); color: #ffffff;
}
.ui-btn-primary:hover { background: var(--brand); filter: brightness(1.1); }
.ui-btn-ghost, a.ui-btn-ghost:link, a.ui-btn-ghost:visited {
  border-color: rgba(255,255,255,0.55); background: transparent; color: #ffffff; font-weight: normal;
}
.ui-btn-ghost:hover { background: rgba(255,255,255,0.15); }
.ui-btn-link {
  min-height: var(--tap); padding: 0 var(--space-3); border: none; background: transparent;
  color: inherit; font-family: var(--font); font-size: 14px; text-decoration: underline; cursor: pointer;
}
.ui-btn svg { flex: 0 0 auto; }

/* ---------- Form fields ---------- */
.ui-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-field label { font-size: 13px; font-weight: bold; color: #3c4453; }
.ui-input {
  width: 100%; min-height: 48px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  color: var(--ink); font-family: var(--font); font-size: 16px;
}
.ui-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

.ui-check {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: var(--tap); min-height: var(--tap); cursor: pointer; color: #3c4453; font-size: 14px;
}
.ui-check input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); cursor: pointer; }

/* Segmented toggle group: <div class=ui-toggle-group><a class=is-active>…</a></div> */
.ui-toggle-group { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: 10px; background: var(--surface-alt); }
.ui-toggle-group a:link, .ui-toggle-group a:visited, .ui-toggle-group button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 40px;
  padding: 0 14px; box-sizing: border-box; border: none; border-radius: var(--radius-sm);
  background: transparent; color: #3c4453; font-family: var(--font); font-size: 14px; font-weight: bold;
  text-decoration: none; cursor: pointer;
}
.ui-toggle-group a:hover, .ui-toggle-group button:hover { background: rgba(255,255,255,0.7); }
.ui-toggle-group .is-active, .ui-toggle-group a.is-active:link, .ui-toggle-group a.is-active:visited, .ui-toggle-group .is-active:hover { background: var(--brand); color: #ffffff; }

/* ---------- List rows ---------- */
.ui-list-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
  padding: var(--space-3) 20px var(--space-3) var(--space-2); border-bottom: 1px solid var(--surface-alt);
}
.ui-list-row:last-child { border-bottom: none; }
.ui-list-row.is-selected { background: var(--brand-highlight); }
.ui-lines { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-lines strong { font-size: 15px; }
.ui-grow-2 { flex: 2 1 220px; min-width: 0; }
.ui-grow-1 { flex: 1 1 140px; min-width: 0; }

.ui-photo {
  flex: 0 0 auto; width: 48px; height: 64px; border-radius: var(--radius-sm);
  object-fit: cover; object-position: center top; background: var(--surface-alt);
  box-shadow: 0 1px 2px rgba(20,30,50,0.18);
}
.ui-photo-lg { width: 90px; height: 120px; }

/* ---------- Notices ---------- */
.ui-notice {
  display: flex; align-items: center; gap: var(--space-3); padding: 14px var(--space-4);
  border-radius: var(--radius); font-family: var(--font); font-size: 15px;
}
.ui-notice-success { background: var(--success-bg); color: var(--success-ink); }
.ui-notice-error { background: var(--error-bg); color: var(--error-ink); }
.ui-notice-info { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }

.ui-empty { padding: 48px var(--space-5); text-align: center; color: var(--muted); font-size: 15px; }

/* ---------- Sticky action bar (shown while items are selected) ---------- */
.ui-actionbar {
  position: sticky; bottom: var(--space-4); z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) 20px; border-radius: var(--radius);
  background: var(--ink); color: #ffffff; box-shadow: var(--shadow-float); font-family: var(--font);
}
.ui-actionbar[hidden] { display: none; }
.ui-actionbar .ui-btn-link { color: #c9d3e3; }

/* ---------- Dialog (native <dialog class=ui-dialog>) ---------- */
dialog.ui-dialog {
  width: calc(100% - 32px); max-width: 560px; max-height: 85vh; padding: 0;
  border: none; border-radius: 16px; box-shadow: 0 20px 48px rgba(15,20,30,0.35);
  color: var(--ink); font-family: var(--font);
}
dialog.ui-dialog::backdrop { background: rgba(15,20,30,0.5); }
.ui-dialog-body { padding: 22px var(--space-5) var(--space-2); }
.ui-dialog-body h2 {
  margin: 0 0 6px; padding: 0; font-family: var(--font); font-size: 20px; font-weight: bold;
  letter-spacing: 0; text-transform: none; white-space: normal; color: var(--ink);
}
.ui-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: var(--space-4) var(--space-5) 22px; }

@media print {
  .ui-actionbar, .ui-page-header .ui-row-wrap { display: none; }
  .ui-card { box-shadow: none; border: 1px solid var(--line); }
}

/* ---------- Toolbars and inline forms ---------- */
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); padding: 20px; }
.ui-grow { flex: 999 1 340px; min-width: 0; }
.ui-input-row { display: flex; gap: var(--space-2); }
.ui-input-row .ui-input { flex: 1 1 auto; min-width: 0; }
.ui-btn-lg { min-height: 48px; padding: 0 20px; font-size: 15px; }
.ui-push-right { margin-left: auto; }

/* An on/off setting shown as a link that looks like a checkbox:
   <a class="ui-check-link is-on"><span class=ui-box>✓</span>Label</a> */
a.ui-check-link:link, a.ui-check-link:visited, a.ui-check-link:hover {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap);
  color: #3c4453; font-family: var(--font); font-size: 14px; text-decoration: none;
}
.ui-check-link .ui-box {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  box-sizing: border-box; border: 2px solid #8a93a3; border-radius: 4px; color: #ffffff;
}
.ui-check-link.is-on .ui-box { border-color: var(--brand); background: var(--brand); }

/* ---------- Text ---------- */
/* Read by screen readers but not shown, e.g. a label for an icon-only or empty heading */
.ui-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
h2.ui-heading {
  margin: 0; padding: 0; font-family: var(--font); font-size: 18px; font-weight: bold;
  letter-spacing: 0; text-transform: none; white-space: normal; color: var(--ink);
}
.ui-label-success { font-size: 12px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: var(--success-ink); }
.ui-card-head.has-check { padding-left: var(--space-2); }

/* ---------- Dialog list ---------- */
.ui-dialog-list { max-height: 50vh; overflow-y: auto; margin: 0; padding: 0 var(--space-5); list-style: none; }
.ui-dialog-list li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--surface-alt);
}

@media print {
  .ui-list-row.is-selected { background: #ffffff; }
}

/* ---------- Card footer (totals, secondary actions) ---------- */
.ui-card-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-3) 20px; border-top: 1px solid var(--line); background: var(--surface-alt);
}
.ui-amount { font-weight: bold; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-total { font-size: 18px; }

/* ---------- Tables: <div class=ui-table-wrap><table class=ui-table> (add "sortable" for sorttable.js) ---------- */
/* Every rule here also undoes the older global table, th and td styles in styles.php */
.ui-table-wrap { overflow-x: auto; }
table.ui-table {
  width: 100%; border: none; border-radius: 0; box-shadow: none; table-layout: auto;
  border-collapse: collapse; font-family: var(--font);
}
.ui-table th, .ui-table td {
  padding: 10px var(--space-3); border: none; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; box-shadow: none; text-shadow: none; text-align: left; vertical-align: top;
  overflow: visible; font-family: var(--font); font-size: 14px; font-weight: normal; color: var(--ink);
}
.ui-table th {
  background: var(--brand); color: #ffffff; border-bottom-color: var(--brand); font-size: 12px; font-weight: bold;
  letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap;
}
.ui-table th:first-child, .ui-table th:last-child, .ui-table th:only-child,
.ui-table tr:last-child td:first-child, .ui-table tr:last-child td:last-child { border-radius: 0; }
.ui-table th:first-child, .ui-table td:first-child { padding-left: 20px; }
.ui-table th:last-child, .ui-table td:last-child { padding-right: 20px; }
.ui-table.sortable th { cursor: pointer; }
.ui-table tbody tr:nth-child(even) { background: var(--brand-alt-row); box-shadow: none; }
.ui-table tbody tr:hover, .ui-table tbody tr:nth-child(even):hover { background: var(--brand-highlight); }
.ui-table tfoot td { border-bottom: none; background: var(--surface-alt); font-weight: bold; }
.ui-table .ui-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-table-middle td { vertical-align: middle; } /* For rows that end in a button */
/* Highlight one column, e.g. the period happening now: class=is-now on its th and each td */
.ui-table td.is-now { background: var(--brand-highlight); background: color-mix(in srgb, var(--brand) 9%, transparent); }

/* Frozen headers: the header row stays at the top of the window while a long table scrolls.
   Sticking only works when nothing around the table clips or scrolls, so on wider screens the
   wrapper and its card let the table show in full. Narrow screens scroll the table sideways instead. */
.ui-table thead th { position: sticky; top: 0; z-index: 2; }
/* Thin white line on the left of every header column and the right of the last one; an inset shadow
   rather than a border so it moves with a frozen header */
.ui-table thead th { box-shadow: inset 1px 0 0 rgba(255,255,255,0.6); }
.ui-table thead th:last-child { box-shadow: inset 1px 0 0 rgba(255,255,255,0.6), inset -1px 0 0 rgba(255,255,255,0.6); }
/* A highlighted column's header also gets a white bar along its bottom */
.ui-table thead th.is-now { box-shadow: inset 1px 0 0 rgba(255,255,255,0.6), inset 0 -4px 0 rgba(255,255,255,0.85); }
.ui-table thead th.is-now:last-child { box-shadow: inset 1px 0 0 rgba(255,255,255,0.6), inset -1px 0 0 rgba(255,255,255,0.6), inset 0 -4px 0 rgba(255,255,255,0.85); }
@media (min-width: 901px) {
  .ui-table-wrap { overflow: visible; }
  .ui-card:has(> .ui-table-wrap) { overflow: visible; }
  .ui-card > .ui-table-wrap:last-child tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
  .ui-card > .ui-table-wrap:last-child tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }
}

/* ---------- Form layout: <form class=ui-form> of .ui-field blocks ---------- */
/* Two columns at most, one on narrow screens */
.ui-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - var(--space-4)) / 2)), 1fr)); gap: var(--space-4); margin: 0; }
.ui-field-wide { grid-column: 1 / -1; }
.ui-field label .ui-muted { font-weight: normal; }
.ui-input-prefix { position: relative; display: flex; align-items: center; }
.ui-input-prefix > span { position: absolute; left: 14px; color: var(--muted); font-size: 16px; pointer-events: none; }
.ui-input-prefix .ui-input { padding-left: 30px; }
input[type=file].ui-input { padding: 12px 14px; font-size: 14px; }
.ui-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ui-text { margin: 0; line-height: 1.5; }
.ui-text a:link, .ui-text a:visited { color: var(--brand-link); text-decoration: underline; }

@media print {
  .ui-table-wrap { overflow: visible; }
  .ui-table th, .ui-table td { font-size: 11px; padding: 4px 6px; }
  .ui-table th { background: #ffffff; color: #000000; border-bottom: 2px solid #000000; } /* Backgrounds usually don't print */
  .ui-table thead th { box-shadow: inset 1px 0 0 #999999; }
  .ui-table thead th:last-child { box-shadow: inset 1px 0 0 #999999, inset -1px 0 0 #999999; }
  .ui-card-foot { background: #ffffff; }
}

/* ---------- More fields ---------- */
textarea.ui-input { min-height: 160px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
select.ui-input { padding-right: 8px; }
.ui-btn-danger, a.ui-btn-danger:link, a.ui-btn-danger:visited { border-color: var(--error-ink); background: var(--error-ink); color: #ffffff; }
.ui-btn-danger:hover { background: var(--error-ink); filter: brightness(1.15); }
.ui-label-error { font-size: 12px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: var(--error-ink); }

/* ---------- Stat counters: <div class=ui-stats><div class=ui-stat>…</div></div> ---------- */
.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
.ui-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) 20px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-card); font-family: var(--font); color: var(--ink); }
.ui-stat-value { font-size: 30px; font-weight: bold; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ui-stat-label { color: var(--muted); font-size: 13px; }

/* ---------- Menu tiles: <div class=ui-tiles><a class=ui-tile>…</a></div> ---------- */
.ui-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
a.ui-tile:link, a.ui-tile:visited {
  display: flex; flex-direction: column; gap: var(--space-2); min-height: 120px; padding: 20px; box-sizing: border-box;
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-card);
  color: var(--ink); font-family: var(--font); text-decoration: none;
}
a.ui-tile:hover { box-shadow: var(--shadow-float); }
.ui-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--brand); color: #ffffff; }
.ui-tile-title { font-size: 16px; font-weight: bold; }
.ui-tile-text { color: var(--muted); font-size: 13px; line-height: 1.4; }
a.ui-tile-danger:link, a.ui-tile-danger:visited { color: var(--ink); }
.ui-tile-danger .ui-tile-icon { background: var(--error-bg); color: var(--error-ink); }

/* ---------- Spotlight: one big result, e.g. a welcome on check-in ---------- */
.ui-spotlight { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding: var(--space-5); }
.ui-spotlight .ui-photo-lg { width: 120px; height: 160px; }
.ui-spotlight-title { margin: var(--space-1) 0; font-family: var(--font); font-size: 40px; font-weight: bold; line-height: 1.1; color: var(--ink); }
.ui-spotlight-text { margin: 0; font-size: 16px; color: var(--muted); }
@media (max-width: 640px) { .ui-spotlight-title { font-size: 28px; } }

/* ---------- Text helpers ---------- */
.ui-key { font-family: Menlo, Consolas, monospace; font-size: 11px; font-weight: normal; color: var(--muted); }

/* ---------- App icons: <img class=ui-app-icon src=/images/<app_id>.png> ---------- */
.ui-app-icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.ui-app-icon-lg { width: 36px; height: 36px; border-radius: 8px; }

/* ---------- List and detail side by side: <div class=ui-split><div class="ui-card ui-split-side">…<div class="ui-card ui-split-main"> ---------- */
.ui-split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); }
.ui-split-side { flex: 1 1 260px; max-width: 320px; min-width: 0; }
.ui-split-main { flex: 999 1 480px; min-width: 0; position: sticky; top: var(--space-4); }
@media (max-width: 800px) { .ui-split-side { max-width: none; } .ui-split-main { position: static; } }

/* A list of things to pick from, each a link: <div class=ui-pick-list><a class="ui-pick is-active"> */
.ui-pick-list { max-height: 600px; overflow-y: auto; }
a.ui-pick:link, a.ui-pick:visited {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); padding: 4px 20px; box-sizing: border-box;
  border-bottom: 1px solid var(--surface-alt); color: var(--ink); font-family: var(--font); font-size: 14px; text-decoration: none;
}
a.ui-pick:hover { background: var(--surface-alt); }
a.ui-pick.is-active:link, a.ui-pick.is-active:visited { background: var(--brand-highlight); font-weight: bold; }
.ui-pick[hidden] { display: none; }

/* Compact grid of checkboxes: <div class=ui-checklist><label class=ui-check-row><input type=checkbox>…</label> */
.ui-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 0 var(--space-3); padding: var(--space-2) var(--space-4) var(--space-3); }
.ui-check-row { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 6px; border-radius: 6px; font-family: var(--font); font-size: 13px; line-height: 1.2; color: var(--ink); cursor: pointer; }
.ui-check-row:hover { background: var(--surface-alt); }
.ui-check-row input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.ui-check-row[hidden] { display: none; }

/* ---------- On/off switch: <input type=checkbox class=ui-switch> ---------- */
.ui-switch {
  -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto; width: 44px; height: 26px; margin: 0;
  border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: background 0.15s;
}
.ui-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: left 0.15s; }
.ui-switch:checked { background: var(--brand); }
.ui-switch:checked::after { left: 21px; }
.ui-switch:disabled { cursor: default; opacity: 0.7; }
.ui-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Cards with a switch, e.g. apps to turn on or off: <div class=ui-app-grid><label class=ui-app-card> */
.ui-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); padding: var(--space-4) 20px 20px; }
.ui-app-card {
  display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: 10px 14px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-family: var(--font); font-size: 14px; color: var(--ink); cursor: pointer;
}
.ui-app-card .ui-switch { margin-left: auto; }
.ui-app-card.is-off { background: #f7f8fa; color: var(--muted); }
.ui-app-card.is-off .ui-app-icon { opacity: 0.45; }
.ui-app-card[hidden] { display: none; }

/* ---------- Bar chart: <div class=ui-bars role=img aria-label=…><div class=ui-bar-col><span class=ui-bar-value>…</span><span class=ui-bar style="height:…"></span></div></div> ---------- */
.ui-bars[hidden] { display: none; }
.ui-bars { display: flex; align-items: flex-end; gap: 10px; height: 260px; padding-top: var(--space-5); border-bottom: 1px solid var(--line-strong); }
.ui-bar-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.ui-bar { display: block; width: 100%; max-width: 56px; border-radius: 6px 6px 0 0; background: var(--brand); }
.ui-bar.is-partial { opacity: 0.55; }
.ui-bar-value { font-family: var(--font); font-size: 12px; font-weight: bold; color: #3c4453; font-variant-numeric: tabular-nums; }
.ui-bar-labels { display: flex; gap: 10px; padding-top: var(--space-2); }
.ui-bar-labels span { flex: 1 1 0; min-width: 0; text-align: center; font-family: var(--font); font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .ui-bar-value { display: none; } .ui-bars, .ui-bar-labels { gap: 4px; } }

/* ---------- Chips: short pieces of data in a row, e.g. <span class=ui-chips><span class=ui-chip>ENG4U1 <strong>92</strong></span></span> ---------- */
.ui-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ui-chip {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-alt); color: #3c4453; font-family: var(--font); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ui-chip strong { color: var(--ink); }
.ui-chip.is-counted { background: var(--brand-highlight); }
@media print { .ui-chip { background: none; border: 1px solid var(--line); } }