/* App layer over the vendored ez2bg-ui-web stylesheet (htmlkit.css). Token overrides only where this app has a palette:
   brand navy as the primary, redefined in all three dark-mode states the way ui-web's own header says to. */
:root { --primary: #1E3A5F; --primary-press: #162c49; --hk-content-max: 1100px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --primary: #7fb0ff; --primary-press: #6aa0f5; } }
:root[data-theme="dark"] { --primary: #7fb0ff; --primary-press: #6aa0f5; }
.btn { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { color: #0b1626; } }
:root[data-theme="dark"] .btn { color: #0b1626; }

.col { max-width: 560px; margin: 0 auto; padding: var(--sp-4) 0 var(--sp-5); }
.col.wide { max-width: 1060px; }
.col h1 { font-size: var(--fs-1); margin-bottom: var(--sp-2); }
.col p.lead { color: var(--text-secondary); margin-bottom: var(--sp-4); }
.col form > * + * { margin-top: var(--sp-3); }
.col .fld { display: block; margin-bottom: var(--sp-1); font-weight: 600; }
.col .row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.col .row > .grow { flex: 1 1 200px; }
.col .actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); align-items: center; }
.btn-link { background: none; border: 0; color: var(--text-secondary); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.steps { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.steps .step { padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); background: var(--surface2); color: var(--muted); }
.steps .step.on { background: var(--primary); color: #fff; font-weight: 700; }
.steps .step.done { color: var(--ok); }
.brandbar { text-align: center; margin-bottom: var(--sp-4); }
.brandbar img { max-width: 100%; max-height: 140px; }
.welcome { text-align: center; }
.welcome img { max-width: 100%; width: 700px; height: auto; border-radius: var(--r-md); margin-bottom: var(--sp-4); }
.examrow { display: flex; align-items: center; gap: var(--sp-3); }
.examrow .grow { flex: 1; }
.examrow .name { font-weight: 700; }
.examrow .meta { color: var(--muted); font-size: var(--fs-sm); }
.examrow.done { opacity: .75; }
.check { color: var(--ok); font-size: var(--fs-1); }
.notice { margin-bottom: var(--sp-4); }
.muted { color: var(--muted); }
.warn { color: var(--warn); font-weight: 700; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hk-table th { cursor: pointer; }
code { background: var(--surface2); padding: 1px 6px; border-radius: 4px; }
.hk-topbar__brand { font-weight: 700; }
.pill-line { margin-top: var(--sp-2); }

/* admin: the Student List's two panes and the small controls its tables use */
.col.wide .split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 1000px) { .col.wide .split { grid-template-columns: 1fr; } }
.hk-table-wrap.tall { max-height: 520px; overflow: auto; }
.hk-table-wrap.tall.short { max-height: 320px; }
.hk-table tr.sel td { background: var(--warn-soft); font-weight: 700; }
.hk-table td.ok { color: var(--ok); font-weight: 700; }
.hk-table td.bad { color: var(--danger); font-weight: 700; }
.hk-table.kv th { width: 42%; text-align: left; cursor: default; color: var(--muted); font-weight: 600; }
.hk-tabs a.hk-tab { text-decoration: none; display: inline-block; }
form.inline { display: inline; }
.btn.small { padding: 2px 8px; font-size: var(--fs-xs); }
.col .notice { margin-bottom: var(--sp-3); }

/* secondary buttons keep their own ink (the .btn override above is for the filled primary) */
.btn.btn-secondary { color: var(--primary); }
:root[data-theme="dark"] .btn.btn-secondary { color: var(--primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.btn-secondary { color: var(--primary); } }
/* the admin top bar has seven links: let it wrap under the brand instead of squeezing them */
.hk-topbar__inner { flex-wrap: wrap; row-gap: var(--sp-1); }
.hk-navlink { white-space: nowrap; }
.col.wide .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
a.btn { text-decoration: none; display: inline-block; }
.side .hk-table th, .side .hk-table td { padding: 6px 8px; }


/* ---- the original site's palette (Buena/Styles/Site.css, which the admin's AdminStyle.css repeats), light only ----
   page #b6b7bc, white sheet with a #496077 hairline, header #4b6c9e, text #696969, links #034af3,
   buttons are the old menu buttons (#465c71, hover #bfcbd6), footer ink #4e5766, fieldset rule #ccc */
:root[data-theme="light"] {
  --bg: #b6b7bc; --surface: #ffffff; --surface2: #eef0f4; --surface-highlight: #cfd8ef;
  --text: #696969; --text-secondary: #696969; --muted: #4e5766; --border: #ccc; --divider: #ddd;
  --primary: #465c71; --primary-press: #3a4f63; --secondary: #034af3; --secondary-press: #1d60ff;
  --danger: #c00000; --ok: #2e6b2e;
  --hk-topbar-bg: #4b6c9e; --hk-topbar-fg: #f9f9f9; --hk-topbar-fg-muted: #dde4ec; --hk-topbar-border: #496077;
}
:root[data-theme="light"] body { background: #b6b7bc; font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif; }
:root[data-theme="light"] .hk-appshell__content { background: transparent; }
:root[data-theme="light"] .col { background: #fff; border: 1px solid #496077; margin-top: 5px; padding: var(--sp-4) var(--sp-5) var(--sp-5); max-width: 750px; }
:root[data-theme="light"] .col.wide { max-width: 1100px; }
:root[data-theme="light"] .btn { color: #dde4ec; background: #465c71; border: 1px solid #4e667d; }
:root[data-theme="light"] .btn:hover { background: #bfcbd6; color: #465c71; }
:root[data-theme="light"] .btn.btn-secondary { background: transparent; color: #465c71; border: 1px solid #4e667d; }
:root[data-theme="light"] a { color: #034af3; }
:root[data-theme="light"] a:hover { color: #1d60ff; text-decoration: none; }
:root[data-theme="light"] .hk-topbar a, :root[data-theme="light"] .hk-navlink { color: #f9f9f9; }
:root[data-theme="light"] a.btn { color: #dde4ec; }
:root[data-theme="light"] a.btn:hover { color: #465c71; }
:root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3 { color: #666; font-variant: small-caps; font-weight: 600; }