/* Self-hosted Outfit (variable). No external font CDN: no third-party request, GDPR-clean. */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand: #3b6b8a;
  --ink: #12232e;
  --muted: #5b6b74;
  --line: #dfe6ea;
  --bg: #f6f8fa;
  --ok: #1c7c4a;
  --warn: #9a6a00;
  --danger: #a12020;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* same-page anchors (dashboard collection tiles, admin #delete links) glide, unless the
   user prefers reduced motion */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- header / banner ---------- */
.topbar { background: #fff; border-bottom: 1px solid var(--line); }
/* header rows share the content column: same max-width + padding as .wrap.wide */
.bar-inner {
  max-width: 1320px; margin: 0 auto; width: 100%; padding: 0 24px;
  display: flex; align-items: center; gap: 10px;
}
.topbar .bar-inner { padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 640px) {
  .bar-inner { padding-left: 16px; padding-right: 16px; }
}
.brand-home { display: inline-flex; align-items: center; }
.brand-home:hover { opacity: 0.85; }
.brand-logo { height: 36px; width: auto; display: block; }
.topbar-nav { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.topbar-nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.topbar-nav a:hover { color: var(--brand); }
.topbar-nav a.active {
  color: var(--brand);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.topbar-signout {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 14px;
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.9rem; white-space: nowrap;
}
.topbar-signout:hover { border-color: var(--brand); background: #f1f5f9; }

/* admin tabs share the single header line; tabs are the sanctioned quiet control.
   Current location = solid ink pill, unmissable on the white bar. */
.admin-tabs {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto; overflow-x: auto; overflow-y: hidden;
}
.admin-nav-label {
  margin-right: 14px; padding-right: 16px;
  border-right: 1px solid var(--line);
  color: var(--muted); font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
}
.admin-tab {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 8px;
  color: var(--muted); text-decoration: none;
  font-weight: 600; font-size: 0.95rem; white-space: nowrap;
}
.admin-tab:hover { color: var(--ink); background: #f1f5f9; }
.admin-tab.active, .admin-tab.active:hover { color: #fff; background: var(--ink); font-weight: 700; }
.topbar .topbar-signout { margin-left: auto; }

/* ---------- mobile-first topbar: disclosure menu under 900px ---------- */
/* Desktop: the admin wrapper is layout-transparent so tabs/identity/signout keep
   their places on the bar; the learner nav is the menu element itself. */
.admin-menu { display: contents; }
.nav-toggle {
  display: none; margin-left: auto; height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--muted);
  cursor: pointer; align-items: center; gap: 8px; white-space: nowrap;
}
.nav-toggle:hover { border-color: var(--brand); background: #f1f5f9; }
.nav-toggle:active { background: #e3eaf1; }
@media (max-width: 900px) {
  .bar-inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .topbar-menu, .topbar.nav-open .admin-menu ~ .nav-toggle { display: none; }
  .topbar.nav-open .topbar-menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    flex-basis: 100%; margin: 12px 0 4px; padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .topbar.nav-open .topbar-nav { margin-left: 0; }
  .topbar.nav-open .topbar-nav a { padding: 11px 4px; }
  .topbar.nav-open .topbar-nav a.active { text-underline-offset: 4px; }
  .topbar.nav-open .admin-tabs {
    flex-direction: column; align-items: stretch; margin-left: 0; gap: 2px;
    overflow: visible;
  }
  .topbar.nav-open .admin-nav-label { border-right: 0; padding: 0 4px 8px; }
  .topbar.nav-open .admin-tab { padding: 11px 10px; }
  .topbar.nav-open .nav-name { padding: 11px 4px; }
  .topbar.nav-open .topbar-signout {
    margin: 10px 0 6px; align-self: stretch; text-align: center; padding: 10px 14px;
  }
}
.dev-banner {
  background: #fff3cd; color: #7a5b00; text-align: center;
  padding: 8px 14px; font-size: 0.85rem; border-bottom: 1px solid #f0e0a8;
}

/* ---------- layout container ---------- */
/* Narrow by default (forms read best narrow); .wide for data/content pages. */
.wrap {
  width: 100%; max-width: 560px; align-self: center;
  margin: 0 auto; padding: 20px 16px; flex: 1 0 auto;
}
.wrap.wide { max-width: 1320px; }
@media (min-width: 640px) { .wrap { padding: 28px 24px; } }

/* ---------- footer (professional, column-grouped, sticky to bottom) ---------- */
.foot { margin-top: auto; background: #fff; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
.foot-main {
  max-width: 1320px; margin: 0 auto; padding: 32px 20px;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px 32px;
}
.foot-col h4 { margin: 0 0 12px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); font-weight: 700; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.foot-col a { color: var(--muted); text-decoration: none; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-col-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: fit-content; }
.foot-brand-line { display: flex; align-items: flex-end; gap: 10px; text-decoration: none; }
a.foot-brand-line:hover .foot-product { color: var(--brand); text-decoration: underline; }
.foot-cloud { height: 32px; width: auto; }
.foot-product { font-weight: 700; color: var(--ink); margin: 0; line-height: 1.2; }
.foot-simfx-link { display: inline-flex; align-items: baseline; gap: 6px; margin: 0 0 2px 2px; }
.foot-by-text { color: var(--muted); }
.foot-simfx { height: 13px; width: auto; }
.foot-bar { border-top: 1px solid var(--line); }
.foot-bar-inner { max-width: 1320px; margin: 0 auto; padding: 16px 20px; }
.foot-bar-inner p { margin: 2px 0; color: var(--muted); }
@media (max-width: 720px) { .foot-main { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- typography ---------- */
h1 { font-size: 1.5rem; margin: 0 0 6px; }
h2 { font-size: 1.1rem; margin: 22px 0 10px; }
.lede { color: var(--muted); margin: 0 0 18px; }
.muted { color: var(--muted); font-weight: 400; }
.fineprint { color: var(--muted); font-size: 0.85rem; margin-top: 16px; }
.fineprint-list { color: var(--muted); font-size: 0.85rem; margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.score-fail { color: var(--danger); font-weight: 600; }

/* ---------- cards / messages ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin-bottom: 18px; }
.card > h2:first-child, .card > .drill-head:first-child h2 { margin-top: 0; }
.card > .drill-head:first-child { margin-top: 0; margin-bottom: 12px; }
@media (min-width: 640px) { .card { padding: 28px; } }
.error  { background: #fdecec; color: var(--danger); border: 1px solid #f3c4c4; border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.notice { background: #e9f6ee; color: var(--ok);     border: 1px solid #b9e3c9; border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.dev-note { background: #fff8e6; border: 1px solid #f0e0a8; border-radius: 8px; padding: 12px 14px; margin: 4px 0 14px; }
.dev-note p { margin: 6px 0; }

/* ---------- form controls: ONE consistent size everywhere ---------- */
input, select, textarea { font-family: inherit; }
input:not([type="file"]):not([type="range"]), select {
  height: 40px; padding: 0 12px; box-sizing: border-box; width: 100%;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 0.95rem; background: #fff; color: var(--ink);
}
input[type="file"] {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; background: #fff; font-size: 0.95rem;
}
input:not([type="range"]):focus, select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------- buttons: ONE standard, primary + secondary ---------- */
button, .btn, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; box-sizing: border-box;
  border-radius: 8px; border: 1px solid var(--brand);
  font-family: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: filter .12s, background-color .12s;
}
button, .btn { background: var(--brand); color: #fff; }
button:hover, .btn:hover { filter: brightness(0.93); }
.btn-secondary { background: #fff; color: var(--brand); }
.btn-secondary:hover { background: #f1f5f9; }

/* stacked form (login / enrol) */
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.stack button { width: 100%; }
.rectify-form { max-width: 440px; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.report {
  border-collapse: collapse; width: 100%; background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
}
.report th, .report td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.report thead th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.report tbody tr:last-child td { border-bottom: none; }
.report th:last-child, .report td:last-child { text-align: right; }
/* collection group headers inside a course list (full-width tint, left-aligned) */
.report tr.group-head td, .report tr.group-head td:last-child {
  text-align: left; background: #eef3f8; font-weight: 700; color: var(--ink); font-size: 0.9rem;
}
.row-actions { white-space: nowrap; }
.row-actions > * + * { margin-left: 8px; }

/* Report tables reflow to stacked, labelled cards on small screens. A multi-column
   report is wider than the viewport, forcing a horizontal scroll that hides the
   right-hand columns (and any action button) off-screen. Below 980px each row
   becomes a card; admin.js stamps each cell with its column header as data-label so
   the value reads "Header: value". thead is hidden (sorting is a desktop affordance). */
@media (max-width: 980px) {
  .table-scroll { overflow-x: visible; }
  .report { border: 0; background: transparent; }
  .report, .report tbody, .report tr, .report td { display: block; }
  .report thead { display: none; }
  .report tr {
    border: 1px solid var(--line); border-radius: 10px; background: #fff;
    padding: 14px 16px; margin: 0 0 12px;
  }
  .report tbody tr:last-child { margin-bottom: 0; }
  .report td { border: 0; padding: 2px 0; text-align: left; }
  .report td:last-child { text-align: left; }   /* override the desktop right-align */
  .report td:empty { display: none; }
  .report td:first-child { font-weight: 700; font-size: 1.05rem; padding-bottom: 6px; }
  .report td[data-label]::before {
    content: attr(data-label) ": "; font-weight: 600; color: var(--muted);
  }
  /* Actions stack full-width. Keep display:flex so the base button centring
     (align-items/justify-content: center) still vertically centres the label. */
  .report td.row-actions {
    padding-top: 12px; display: flex; flex-direction: column; gap: 8px;
    align-items: stretch; white-space: normal;
  }
  .report td.row-actions > *,
  .report td.row-actions form button { margin: 0; width: 100%; }
  .report td.row-actions > a,
  .report td.row-actions > button,
  .report td.row-actions form button { display: flex; }
}
.cert-id { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.82rem; color: var(--muted); }
.overdue { color: #b0413e; font-weight: 600; }

/* reports: audit summary tiles + evidence columns */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 0 0 16px; }
.stat { border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; padding: 10px 12px; text-align: center; }
.stat-n { display: block; font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.stat-l { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 2px; }
.stat-bad { background: #fdecec; border-color: #f3c4c4; }
.stat-bad .stat-n { color: var(--danger); }
.serial { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.82rem; color: var(--brand); text-decoration: none; font-weight: 600; }
.serial:hover { text-decoration: underline; }
.verify-ok { color: var(--ok); font-weight: 600; }
.verify-pending { color: var(--warn); font-weight: 700; }
/* course detail: labelled checkbox options with explanation text */
/* Checkbox option rows (Regulated course, Re-verify, Active): a bordered settings row
   with a normal-sized accent checkbox, instead of a bare input inflated by the 40px
   base input height. */
.option-line { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 0;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: #fafbfc; font-weight: 400; cursor: pointer; }
.option-line:hover { border-color: #c9d8e2; }
.check input[type="checkbox"], .option-line input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 auto; margin: 2px 0 0;
  accent-color: var(--brand); cursor: pointer;
}

.kv { border-collapse: collapse; width: 100%; }
.kv th, .kv td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.kv th { width: 180px; color: var(--muted); font-weight: 600; }

/* status: text colour only (never a one-sided coloured border) */
.status-completed, .status-passed { color: var(--ok); font-weight: 700; }
.status-incomplete, .status-browsed { color: var(--warn); font-weight: 600; }
.status-failed { color: var(--danger); font-weight: 700; }

/* ---------- section heads ---------- */
.admin-head, .dash-head, .player-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.dash-head h1 { margin-bottom: 2px; }
.admin-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- filter bar ---------- */
.filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin: 4px 0 18px;
}
.filterbar select { width: auto; min-width: 150px; }
.filterbar input[name="email"] { width: 190px; }
.filterbar input[type="date"] { width: 150px; }
.date-range { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.9rem; }
.filterbar-actions { display: inline-flex; gap: 8px; margin-left: auto; }

/* ---------- view tabs ---------- */
.view-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.view-tabs a { padding: 8px 2px; margin-bottom: -1px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
.view-tabs a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); }

/* clickable summary rows (drill into detail) */
.report tbody tr[data-href] { cursor: pointer; }
.report tbody tr[data-href]:hover { background: #f4f8fc; }
.rowlink { color: var(--brand); text-decoration: none; font-weight: 600; }
.rowlink:hover { text-decoration: underline; }
.drill-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
.drill-head h2 { margin: 0; }
.hint { margin: 0 0 10px; }

/* ---------- action cards / inline forms ---------- */
.enrol-card { margin-top: 22px; }
.enrol-card h2 { margin-top: 0; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* any form that directly follows a table sits clear of it */
.table-scroll + form { margin-top: 16px; }
.inline-form input:not([type="file"]), .inline-form select { width: auto; flex: 1 1 200px; }
.inline-form input[type="file"] { flex: 1 1 240px; }
/* short numeric fields (years, attempt caps): stop them stretching to the card width.
   :not() mirrors the base input selector's specificity so this later rule wins the tie. */
input.input-short:not([type="file"]) { width: 110px; flex: 0 0 auto; }

/* ---------- my development: competency tile grid ---------- */
.dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.dev-tile { display: flex; flex-direction: column; gap: 10px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; padding: 20px;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.dev-tile:hover, .dev-tile:focus-visible { border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(18, 35, 46, 0.08); transform: translateY(-2px); text-decoration: none; }
.dev-tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dev-tile-head h3 { margin: 0; font-size: 1.02rem; }
.dev-tile-intro { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dev-tile-progress { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.dev-tile-progress .progress { flex: 1 1 auto; margin: 0; }
.dev-tile-count { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.dev-tile-meta { margin: 0; color: var(--muted); font-size: 0.8rem; }
.dev-tile-start { color: var(--brand); font-weight: 600; }

/* ---------- topbar identity: initials avatar + account menu ---------- */
.account-menu { position: relative; display: inline-flex; }
.avatar-btn {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid #c9e0ea; background: #e7f2f6; color: var(--brand);
  font: inherit; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.03em;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.avatar-btn:hover { border-color: var(--brand); }
.avatar-btn:active, .avatar-btn[aria-expanded="true"] { outline: 2px solid var(--brand); outline-offset: 1px; }
.account-pop {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(18, 35, 46, 0.14); padding: 14px 16px; z-index: 300;
}
.account-pop-name { margin: 0 0 3px; font-weight: 700; overflow-wrap: anywhere; }
/* roles as small text links to each role's home; the current one lights up in the
   Airbrain cloud purple (sampled from the logo) */
.account-pop-roles { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 3px 10px;
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; }
/* double-class selectors: inside the learner topbar-nav the generic .topbar-nav a rule
   (0.95rem) would otherwise out-rank these and inflate the role text */
.account-pop-roles .pop-role { color: var(--muted); font-weight: 700; text-decoration: none;
  font-size: 0.62rem; }
.account-pop-roles .pop-role:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.account-pop-roles .pop-role.role-on { color: #b224e1; }
.account-pop-roles .pop-role.role-on:hover { color: #b224e1; }
.account-pop .pop-link { display: block; padding: 9px 0; color: var(--ink);
  text-decoration: none; font-weight: 600; border-top: 1px solid var(--line); }
.account-pop .pop-link:hover { color: var(--brand); }
@media (max-width: 900px) {
  /* inside the stacked mobile menu the panel opens in flow, not floating */
  .topbar.nav-open .account-menu { flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 0; }
  .topbar.nav-open .account-pop { position: static; box-shadow: none; width: 100%; }
}

/* account page: the two sections stack on small screens, flow side by side when wide */
.account-flow { max-width: 640px; margin: 0 auto; }
@media (min-width: 960px) {
  .account-flow {
    max-width: none; display: grid; grid-template-columns: 5fr 6fr;
    gap: 18px; align-items: start;
  }
  .account-flow .card { margin-bottom: 0; }
}

/* ---------- course player ---------- */
.player { width: 100%; }
.player-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sco-frame {
  width: 100%; height: calc(100vh - 180px); min-height: 380px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.dse-break-open { gap: 7px; }
.dse-break-open:active { background: #e3eaf1; }
.dse-ico { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- DSE wellbeing: suggestion toast (passive, non-modal) ---------- */
/* The explicit display values below defeat the hidden attribute's UA display:none,
   which left these fixed overlays invisibly covering the player (blocking every click
   and text selection). Restore hidden's meaning explicitly. */
.dse-toast[hidden], .dse-break[hidden] { display: none; }
.dse-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 320px; max-width: calc(100vw - 32px);
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(18, 35, 46, 0.16);
  padding: 14px 16px;
}
/* The rotate hint sits centre-screen so it is unmissable on a phone; the shared
   bottom-right slot can fall under the mobile browser's toolbar. The id overrides
   the .dse-toast motion transform, so only the opacity fade animates it in. */
#rotate-toast {
  top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px));
  gap: 18px; padding: 24px 26px; align-items: center;
  background: #14232e; border-color: #14232e;   /* dark, to stand off the page */
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}
#rotate-toast .dse-toast-title { color: #fff; font-size: 1.18rem; }
#rotate-toast .dse-toast-text { color: #c7d2db; font-size: 0.98rem; }
/* Airbrain cloud logo as the icon. Animation is scoped to .is-visible so it
   restarts from the vertical (90deg) frame every time the toast appears, then
   rotates upright. Reduced-motion: sits upright, still. */
#rotate-toast .rotate-toast-icon { background: none; width: 72px; height: 72px; flex: 0 0 auto; }
#rotate-toast .rotate-toast-logo { width: 64px; height: auto; display: block; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  #rotate-toast.is-visible .rotate-toast-logo { animation: ab-rotate-hint 2.6s ease-in-out infinite; }
}
@keyframes ab-rotate-hint {
  0%       { transform: rotate(90deg); }
  40%, 75% { transform: rotate(0deg); }
  100%     { transform: rotate(90deg); }
}
/* Dismiss reads on the dark card: filled translucent, full border, pressed state. */
#rotate-toast .rotate-toast-dismiss {
  background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.55);
}
#rotate-toast .rotate-toast-dismiss:hover { background: rgba(255, 255, 255, 0.24); }
#rotate-toast .rotate-toast-dismiss:active { background: rgba(255, 255, 255, 0.32); }
.dse-toast-icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: #e7f2f6; color: var(--brand); display: grid; place-items: center;
}
.dse-toast-icon svg { width: 20px; height: 20px; }
.dse-toast-body { flex: 1 1 auto; }
.dse-toast-title { margin: 0 0 3px; font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.dse-toast-text { margin: 0 0 10px; font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.dse-toast-actions { display: flex; gap: 8px; }
.dse-toast-actions .btn, .dse-toast-actions .btn-secondary { height: 34px; padding: 0 12px; font-size: 0.85rem; }
.dse-toast-actions .btn-secondary:active { background: #e3eaf1; }

/* ---------- DSE wellbeing: full-screen break (user-initiated) ---------- */
.dse-break {
  position: fixed; inset: 0; z-index: 80; overflow: hidden;
  display: grid; place-items: center; padding: 24px;
  background: radial-gradient(circle at 50% 28%, #eff7fb 0%, #dcebf2 55%, #cfe1ea 100%);
}
.dse-break-panel { position: relative; z-index: 1; text-align: center; max-width: min(760px, 88vw); }
.dse-break-panel h2 { margin: 0 0 10px; color: var(--ink); font-size: clamp(1.7rem, 3.6vw, 2.9rem); }
.dse-break-lead {
  margin: 0 auto clamp(24px, 4.5vh, 48px); color: var(--muted); line-height: 1.5;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem); max-width: 32ch;
}
.dse-stage {
  position: relative; width: clamp(280px, 48vmin, 560px); aspect-ratio: 1;
  margin: 0 auto clamp(30px, 5vh, 56px); display: grid; place-items: center;
}
.dse-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dse-ring-track { fill: none; stroke: #ffffff; stroke-width: 5; opacity: 0.7; }
.dse-ring-fill { fill: none; stroke: var(--brand); stroke-width: 5; stroke-linecap: round; }
.dse-orb {
  width: 62%; height: 62%; border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #ffffff, #e7f2f6 70%, #d3e6ee);
  box-shadow: 0 10px 34px rgba(59, 107, 138, 0.22);
  display: grid; place-items: center; transform: scale(1);
}
.dse-count { font-size: clamp(2.8rem, 9vmin, 5.5rem); font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.dse-resume { height: clamp(44px, 6vh, 56px); padding: 0 clamp(22px, 3vw, 34px); font-size: clamp(0.95rem, 1.4vw, 1.15rem); }
.dse-clouds { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dse-cloud { position: absolute; background: #ffffff; border-radius: 50%; filter: blur(9px); opacity: 0.55; }
.dse-cloud:nth-child(1) { width: clamp(180px, 20vw, 320px); height: clamp(52px, 6vw, 92px); top: 14%; left: 7%; }
.dse-cloud:nth-child(2) { width: clamp(220px, 26vw, 420px); height: clamp(64px, 7vw, 116px); top: 72%; left: 62%; opacity: 0.4; }
.dse-cloud:nth-child(3) { width: clamp(140px, 15vw, 240px); height: clamp(44px, 5vw, 78px); top: 34%; left: 80%; opacity: 0.45; }

/* Motion only for learners who accept it: entrances, breathing, drifting clouds and the
   depleting ring all collapse to a static, fully-usable state under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .dse-toast { transform: translateY(14px); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
  .dse-toast.is-visible { transform: translateY(0); opacity: 1; }
  .dse-break { opacity: 0; transition: opacity .3s ease; }
  .dse-break.is-open { opacity: 1; }
  .dse-ring-fill { transition: stroke-dashoffset 1s linear; }
  .dse-cloud { animation: dse-drift 15s ease-in-out infinite alternate; }
  .dse-cloud:nth-child(2) { animation-duration: 21s; animation-delay: -4s; }
  .dse-cloud:nth-child(3) { animation-duration: 18s; animation-delay: -9s; }
  @keyframes dse-drift { from { transform: translateX(-38px); } to { transform: translateX(38px); } }
}

/* ---------- settings / branding ---------- */
.settings-form .card { margin-bottom: 18px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.field-grid label, .settings-form label.block { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
/* labels can wrap to two lines (e.g. a muted hint); pack content to the bottom so the
   inputs themselves stay on one line across the row */
.field-grid label { justify-content: flex-end; }
.settings-form label.block { margin-top: 14px; }
textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-family: inherit; font-size: 0.95rem;
}
input[type="color"] { width: 64px; height: 40px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.logo-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.logo-current { display: flex; align-items: center; gap: 12px; }
.logo-preview { max-height: 48px; max-width: 200px; width: auto; }
.logo-controls { display: flex; flex-direction: column; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.check input { width: auto; height: auto; border: 0; padding: 0; }
.policy-row { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.policy-row:last-child { border-bottom: none; }
.policy-head { display: flex; gap: 10px; flex-wrap: wrap; }
.policy-head input { flex: 1 1 220px; }
.policy-head select { width: auto; min-width: 160px; }
.form-actions { margin: 4px 0 20px; }
/* the save row after a checkbox option row needs its own clearance */
.option-line + .form-actions, .option-line + .option-line { margin-top: 12px; }
.settings-form .form-actions { margin-top: 18px; margin-bottom: 0; }
.signin-msg { background: #f1f6fb; border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.policy-body { white-space: pre-wrap; line-height: 1.6; }

/* ---------- collections + enrolment codes ---------- */
.collection-card { margin: 0 0 18px; }
.collection-rename { max-width: 460px; margin: 0 0 14px; }
.collection-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.collection-head h2 { margin: 0; }
.collection-count { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.collection-card .inline-form { margin-top: 14px; }
.progress { height: 10px; background: #e6edf2; border-radius: 5px; overflow: hidden; margin: 0 0 16px; }
.progress-fill { height: 100%; background: var(--ok); }
/* collection tiles: at-a-glance overview at the top of the learner dashboard */
.collection-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0 0 22px; }
.collection-tile {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  transition: border-color .12s, box-shadow .12s;
}
.collection-tile:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(18, 35, 46, 0.08); }
.collection-tile h3 { margin: 0 0 6px; font-size: 1rem; color: var(--ink); }
.collection-tile .progress { margin: 10px 0 8px; }
.collection-tile .tile-count { margin: 0; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.col-actions { white-space: nowrap; }
.inline-mini { display: inline-flex; gap: 6px; margin-left: 6px; }
.btn-mini {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--brand); border-radius: 6px;
  background: #fff; color: var(--brand);
  font-size: 0.85rem; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-mini:hover { background: #f1f5f9; filter: none; }
.btn-mini:active { background: #e3eaf1; }
.btn-mini:disabled { opacity: 0.35; cursor: default; }
.btn-mini:disabled:hover { background: #fff; }
.pill { display: inline-block; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: #f4f7fa; color: var(--ink); font-size: 0.78rem; font-weight: 600; }
.pill-restricted { background: #fdf3e6; border-color: #ecd3ab; color: #8a5a1f; }
.pill-off { background: #f2f2f2; border-color: var(--line); color: var(--muted); margin-left: 6px; }
.pill-catalogue { background: #e7f2f6; border-color: #b6d8e4; color: #1f5a70; }
.row-inactive td { color: var(--muted); }
.code-form .form-actions { margin: 14px 0 0; }

/* ---------- mobile: stack filters full width ---------- */
@media (max-width: 620px) {
  .filterbar { flex-direction: column; align-items: stretch; }
  .filterbar select, .filterbar input, .date-range { width: 100%; min-width: 0; }
  .date-range { justify-content: space-between; }
  .date-range input[type="date"] { flex: 1; width: auto; }
  .filterbar-actions { margin-left: 0; }
  .filterbar-actions button, .filterbar-actions .btn-secondary { flex: 1; }
}

/* ---------- courses: sortable columns + delete ---------- */
.report th.sortable { cursor: pointer; user-select: none; white-space: nowrap; color: var(--brand); }
.report th.sortable:hover { color: var(--brand); background: #e7eff5; }
.report th.sortable:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* always-visible neutral caret in the brand colour so it reads as sortable */
.report th.sortable::after {
  content: "\2195"; display: inline-block; margin-left: 6px;
  font-size: 0.95em; font-weight: 700; color: var(--brand); opacity: 0.6;
}
.report th.sortable:hover::after { opacity: 1; }
/* the active sorted column: brand text, tinted cell, solid arrow */
.report th[aria-sort="ascending"], .report th[aria-sort="descending"] { color: var(--brand); background: #e7eff5; }
.report th[aria-sort="ascending"]::after { content: "\25B2"; opacity: 1; }
.report th[aria-sort="descending"]::after { content: "\25BC"; opacity: 1; }
/* danger button: full fill + full border + pressed state (never a bare control) */
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { filter: brightness(0.92); background: var(--danger); }
.btn-danger:active { filter: brightness(0.85); }
.btn-mini-danger { border-color: #d69a9a; color: var(--danger); }
.btn-mini-danger:hover { background: #fdecec; }
.btn-mini-danger:active { background: #f7dede; }
/* danger zone: recolour the card's full (all-sides) border, no one-sided stripe */
.danger-zone { border-color: #f3c4c4; }
.danger-zone h2 { color: var(--danger); }
/* collection membership chips (course Manage page): full border + radius, no one-sided stripe */
.chip-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px;
  background: #f4f7fa; border: 1px solid var(--line); border-radius: 8px;
  font-weight: 600; font-size: 0.9rem; }
.chip form { display: inline-flex; margin: 0; }
/* validity presets: toggle-style buttons + custom entry (full border + fill + pressed state) */
.preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 6px; }
.preset-btn { height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--brand);
  background: #fff; color: var(--brand); font-size: 0.9rem; }
.preset-btn:hover { background: #f1f5f9; filter: none; }
.preset-btn:active { background: #e3eaf1; }
.preset-btn[aria-pressed="true"] { background: var(--brand); color: #fff; }
.preset-row #validMonths { width: 120px; flex: 0 0 auto; }

/* ---------- competency development log ---------- */
.privacy-note { background: #eef3f8; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 0 0 18px; }
.privacy-note h2 { margin: 0 0 6px; font-size: 1rem; }
.privacy-note p { margin: 0 0 12px; }
.privacy-note form { margin: 0; }
.log-entry { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 10px 0; background: #fbfcfd; }
.log-entry-meta { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; }
.log-entry-meta .inline-mini { margin: 0 0 0 auto; }
.log-entry-body { margin: 0; white-space: pre-wrap; }
.log-edit-form { margin-top: 10px; }
.log-entry.editing .log-entry-body { display: none; }
.log-form { margin-top: 12px; }
.log-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 0.95rem; resize: vertical; }
.log-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.log-form-row { display: flex; align-items: flex-end; gap: 12px; margin-top: 10px; }
.rating-label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.rating-label select { width: auto; min-width: 72px; }
.log-form-row button { margin-left: auto; }
.report-links { list-style: none; padding: 0; margin: 0; }
.report-links li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.report-links li:last-child { border-bottom: none; }
.report-links strong { min-width: 150px; }
/* delegate log: responsive grid of prompt cards (many columns wide, single on mobile) */
.competency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; align-items: start; margin-bottom: 18px; }
.competency-grid > .card { margin-bottom: 0; }
.privacy-note { max-width: none; }
/* self-assessment: a defined, visual segmented control (radio pills + band legend) */
.rating-field { margin-top: 10px; }
.rating-caption { display: block; font-size: 0.8rem; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.rating-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rating-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-pill span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-weight: 700; cursor: pointer; transition: background-color .1s, border-color .1s, color .1s; }
.rating-pill:hover span { border-color: var(--brand); background: #f1f5f9; }
.rating-pill input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.rating-pill input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.rating-legend { margin: 8px 0 0; font-size: 0.75rem; color: var(--muted); line-height: 1.7; }
.rating-legend b { color: var(--ink); }
.log-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.entry-date { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.entry-date input { width: auto; height: 36px; }
/* group detail: spacing for the add-forms below tables, and a manager badge in the members list */
.group-add-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.role-tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ok); background: #e9f6ee; border: 1px solid #b9e3c9; vertical-align: middle; }
/* self-assessment as an optional slider (named extremes, live value) */
.rating-slider { margin-top: 6px; }
/* custom slider so the thumb reaches both ends and aligns with the 0 / max labels */
.rating-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; margin: 0; padding: 0;
  border-radius: 999px; background: #d7e2ea; cursor: pointer; opacity: 0.55;
}
.rating-slider.is-set .rating-range { opacity: 1; }
.rating-range:focus-visible { outline: none; }
.rating-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(59, 107, 138, 0.28); }
.rating-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(59, 107, 138, 0.28); }
.rating-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(18, 35, 46, 0.3);
  cursor: pointer;
}
.rating-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(18, 35, 46, 0.3);
  cursor: pointer;
}
.rating-range::-moz-range-track { height: 8px; border-radius: 999px; background: #d7e2ea; }
.rating-ticks { display: flex; justify-content: space-between; margin-top: 4px; padding: 0 2px; }
.rating-ticks span { flex: 1 1 0; text-align: center; font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rating-ticks span:first-child { text-align: left; }
.rating-ticks span:last-child { text-align: right; }
.rating-ends { display: flex; justify-content: space-between; padding: 0 9px; margin-bottom: 4px; }
.rating-ends span { font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.rating-out { display: block; text-align: center; margin-top: 8px; font-size: 0.95rem; color: var(--muted); font-weight: 700; }
.rating-slider.is-set .rating-out { color: var(--brand); }

/* latest self-assessment shown in the manager overview */
.score-badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: #e7f2f6; color: var(--brand); font-size: 0.78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* collapsible log sections (native <details>, default collapsed) */
details.competency-section > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px;
  font-size: 1.1rem; font-weight: 700; color: var(--ink);
}
details.competency-section[open] > summary { margin-bottom: 12px; }
details.competency-section > summary::-webkit-details-marker { display: none; }
details.competency-section > summary::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 2px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s;
}
details.competency-section[open] > summary::before { transform: rotate(45deg); }
details.competency-section > summary .section-title { flex: 1 1 auto; }
.section-count {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: #e7f2f6; color: var(--brand); font-size: 0.78rem; font-weight: 700;
}
.section-count.is-empty { background: #f2f2f2; color: var(--muted); }
details.competency-section > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* smooth open/close for every collapsible <details>, site-wide (progressive enhancement:
   browsers without ::details-content / interpolate-size just toggle instantly) */
:root { interpolate-size: allow-keywords; }
details::details-content {
  block-size: 0; overflow: clip; overflow-clip-margin: 10px;
  transition: block-size .28s ease;
}
details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  details::details-content { transition: none; }
}

/* manager group console tabs: one task per screen (Progress | People | Courses) */
.manage-tabs { display: flex; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.manage-tabs a { padding: 8px 16px; border-radius: 10px 10px 0 0; color: var(--muted); font-weight: 600; text-decoration: none; }
.manage-tabs a:hover { color: var(--ink); background: #f4f7fa; }
.manage-tabs a.on { color: var(--ink); border: 1px solid var(--line); border-bottom: 2px solid #fff; margin-bottom: -1px; background: #fff; }

/* pager bar under long report tables (injected by admin.js past 60 rows) */
.table-pager { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; }

/* ---------- static preview additions (not in the product) ---------- */
/* One honest line above the app chrome: this is the product preview, sample data.
   The back link is the escape hatch to the marketing site. */
.preview-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 28px; flex-wrap: wrap;
  background: #fdf3e6; color: #8a5a1f; border-bottom: 1px solid #ecd3ab;
  padding: 8px 20px; font-size: 0.85rem;
}
.preview-banner a { color: #8a5a1f; font-weight: 700; }
.preview-banner > span:not(.preview-switch) { flex: 1 1 auto; text-align: center; }
.preview-back { flex: 0 0 auto; white-space: nowrap; text-decoration: none; }
.preview-back:hover { text-decoration: underline; }
.preview-switch { flex: 0 0 auto; white-space: nowrap; }
.preview-switch a { margin-left: 14px; text-decoration: none; }
.preview-switch a:hover { text-decoration: underline; }
.preview-switch a.on { text-decoration: underline; text-underline-offset: 3px; }
/* collection tiles anchor down the page; glide, do not jump */
html { scroll-behavior: smooth; }
@media (max-width: 720px) {
  .preview-banner { flex-direction: column; gap: 3px; text-align: center; }
}