/* © 2026 equusMEDIA Digital Systems · PX030 Ramiel · ramiel-common.css v0.3.105 */
/* NB rebuilt 2026-09-30 from CSSOM after an accidental truncation; comments/exact formatting of the pre-0.3.66 source were not preserved, rules are intact. */
:root { --fs-base: 10pt; --fs-h1: 10pt; --fs-sm: 10pt; --col-icon: 2rem; --col-mini: 5.5rem; --col-badge: 6rem; --col-date: 7.5rem; --col-code: 8rem; --col-count: 8.5rem; --col-status: 9rem; --col-check: 7rem; --col-money: 7rem; --fs-table: 10pt; --col-tick: 5.5rem; --col-tick-n: 3.5rem; --col-tick-wide: 7.5rem; --col-learner: 26%; --halo-blue: #00a4dc; --halo-grey: #606060; --bg: #ffffff; --bg-soft: #f5f7fa; --bg-soft-2: #ebeef2; --border: #d8dde3; --border-soft: #e8ebef; --text: #1a1a1a; --text-muted: #1a1a1a; --text-faint: #1a1a1a; --text-meta: #8b9197; --danger: #c41e3a; --danger-bg: #fde8eb; --ok: #1a8050; --radius: 6px; --radius-lg: 10px; --shadow-sm: 0 1px 2px rgba(20, 25, 35, 0.06); --shadow-md: 0 2px 12px rgba(0,0,0,0.06); --halo-blue-dark: #0080b0; --halo-blue-bg: rgba(0, 164, 220, 0.08); --warn: #b86200; --warn-bg: #fff4e3; --ok-bg: #e8f5ec; --font-mono: inherit; --danger-border: #f0c8c8; --danger-deep: #7c2d12; --danger-soft: #d9534f; --danger-strong: #b91c1c; --detour: #6b4ea8; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --halo-black: #000000; --hrwl: #b94300; --hrwl-bg: #fff0e6; --info: #1f5fa8; --ok-soft: #5eba7d; --ok-strong: #1a6f3a; --ok-tint: #c7eed3; --slate: #1e293b; --warn-border: #f0d9a8; --warn-mid: #b08322; --warn-soft: #f59e0b; --warn-strong: #6b3f00; --white: #ffffff; --devbar-h: 44px; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { transition: border-color 0.12s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--halo-blue); box-shadow: rgba(0, 164, 220, 0.15) 0px 0px 0px 3px; }
html, body { background: var(--bg-soft); color: var(--text); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.3; margin: 0px; height: 100vh; overflow: hidden; padding: 0px; }
.login-card { background: var(--bg); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md); max-width: 460px; padding: 36px 36px 32px; width: 100%; }
.login-logo { display: block; margin: 0px auto 8px; width: 220px; }
.login-portal-label { color: var(--halo-blue); font-size: var(--fs-h1); font-weight: 700; margin-bottom: 12px; margin-top: 18px; text-align: center; white-space: nowrap; }
.login-title { font-size: var(--fs-h1); font-weight: 600; margin: 0px 0px 4px; text-align: center; }
.login-subtitle { color: var(--text-muted); font-size: var(--fs-base); margin: 0px 0px 24px; text-align: center; }
.login-form .field { margin-bottom: 14px; }
.login-form input[type="email"], .login-form input[type="password"], .login-form input[type="text"] { background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); font-family: inherit; font-size: var(--fs-base); padding: 10px 12px; transition: border-color 0.12s; width: 100%; }
.login-form input:focus { border-color: var(--halo-blue); box-shadow: rgba(0, 164, 220, 0.15) 0px 0px 0px 3px; outline: none; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 56px !important; }
.password-wrap .password-toggle { background: none; border-radius: 6px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: none; color: var(--text-muted, var(--text-muted)); cursor: pointer; font-family: inherit; font-size: var(--fs-base); font-weight: 600; height: auto; padding: 4px 6px; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); margin: 0px !important; width: auto !important; }
.password-wrap .password-toggle:hover { background: none; color: var(--halo-blue); }
.login-forgot { margin-top: 14px; min-height: 20px; text-align: center; }
.login-forgot a { color: var(--halo-blue); cursor: pointer; font-size: var(--fs-base); text-decoration: none; }
.login-forgot a:hover { text-decoration: underline; }
.login-form .login-card .btn { width: 100%; }
.login-error { background: var(--danger-bg); border-radius: var(--radius); color: var(--danger); font-size: var(--fs-base); margin-bottom: 14px; padding: 10px 12px; }
.login-help { border-top: 1px solid var(--border-soft); color: var(--text-faint); font-size: var(--fs-base); margin-top: 20px; padding-top: 16px; text-align: center; }
.login-back { margin-top: 12px; text-align: center; }
.login-back a { color: var(--text-muted); cursor: pointer; font-size: var(--fs-base); text-decoration: none; }
.login-back a:hover { color: var(--halo-blue); }
.app-header { align-items: center; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; grid-area: header; justify-content: space-between; padding: 0px 24px; }
.app-header .crumb { color: var(--text-muted); font-size: var(--fs-base); }
.app-header .crumb strong { color: var(--text); font-weight: 600; }
.app-header .crumb a { color: var(--text-muted); cursor: pointer; text-decoration: none; }
.app-header .crumb a:hover { color: var(--halo-blue); }
.user-menu { align-items: center; display: flex; font-size: var(--fs-base); gap: 12px; }
.user-menu .who { color: var(--text-muted); }
.user-menu .who strong { color: var(--text); font-weight: 600; }
.user-menu .role-tag { background: var(--halo-blue); border-radius: 10px; color: white; display: inline-block; font-size: var(--fs-base); font-weight: 600; margin-left: 6px; padding: 2px 7px; }
.user-menu button { background: none; border-radius: var(--radius); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-family: inherit; font-size: var(--fs-base); padding: 6px 12px; transition: 0.12s; }
.user-menu button:hover { border-color: var(--halo-grey); color: var(--text); }
.app-sidebar { background: var(--bg-soft); border-right: 1px solid var(--border); display: flex; flex-direction: column; grid-area: sidebar; height: 100vh; overflow: hidden; }
.sidebar-logo { border-bottom: 1px solid var(--border); padding: 14px 20px 18px; }
.sidebar-logo img { display: block; max-width: 180px; width: 100%; }
.sidebar-system-label { padding: 12px 20px 6px; font-size: var(--fs-h1); font-weight: 700; color: var(--text); }
.sidebar-rto { background: rgba(0, 164, 220, 0.1); border-radius: 6px; border: 1px solid rgba(0, 164, 220, 0.28); margin: 8px 16px 4px; padding: 9px 11px; }
.sidebar-rto .sr-name { color: var(--text); font-size: var(--fs-base); font-weight: 700; line-height: 1.25; }
.sidebar-rto .sr-rto { color: var(--text-muted); font-size: var(--fs-base); font-variant-numeric: tabular-nums; margin-top: 2px; }
.sidebar-rto.none { background: var(--warn-bg); border-color: var(--warn-border); }
.sidebar-rto.none .sr-name { color: var(--warn); font-size: var(--fs-base); font-weight: 600; }
.sidebar-nav { flex: 1 1 0%; overflow-y: auto; padding: 0px 12px 72px; }
.sidebar-nav .nav-section { margin-top: 14px; }
.sidebar-nav .nav-section-title { color: var(--text-faint); font-size: var(--fs-base); font-weight: 600; padding: 8px 8px 4px; }
.sidebar-nav a { align-items: center; border-radius: var(--radius); color: var(--text); cursor: pointer; display: flex; font-size: var(--fs-base); justify-content: space-between; margin-bottom: 1px; padding: 7px 10px; text-decoration: none; user-select: none; }
.sidebar-nav a:hover { background: var(--bg-soft-2); }
.sidebar-nav a.active { background: var(--halo-blue); color: white; font-weight: 500; }
.sidebar-nav a.active .nav-count { background: rgba(255, 255, 255, 0.25); color: white; }
.sidebar-nav a.disabled { color: var(--text-faint); cursor: not-allowed; }
.sidebar-nav a.disabled:hover { background: transparent; }
.nav-count { background: var(--bg-soft-2); border-radius: 9px; color: var(--text-muted); font-size: var(--fs-base); font-weight: 500; min-width: 20px; padding: 1px 7px; text-align: center; }
.sidebar-version { border-bottom: 1px solid var(--border-soft); padding: 4px 20px 10px; }
.app-main { background: var(--bg); grid-area: main; overflow-y: auto; min-height: 0px; padding: var(--sp-y) 12pt 12pt; }
.page-header h1 { font-size: var(--fs-h1); font-weight: 600; margin: 0px 0px 4px; }
.page-header .page-sub { color: var(--text-muted); font-size: var(--fs-base); margin: 0px; }
.page-header .page-actions { display: flex; flex-shrink: 0; gap: 8px; }
.dash-section-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; }
.dash-section-header h3 { align-items: center; display: flex; font-size: var(--fs-base); font-weight: 600; gap: 8px; margin: 0px; }
.dash-section-body { font-size: var(--fs-base); }
.audit-row { align-items: baseline; background: var(--bg); display: grid; font-size: var(--fs-base); gap: 12px; grid-template-columns: 160px 1fr 140px; padding: 8px 12px; }
.audit-when { color: var(--text-muted); font-size: var(--fs-base); }
.audit-what { color: var(--text); }
.audit-who { text-align: right; }
.detail-grid dt { color: var(--text-muted); font-size: var(--fs-base); font-weight: 500; }
.detail-grid dd { font-size: var(--fs-base); margin: 0px; }
.btn { background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: inline-block; font-family: inherit; font-size: var(--fs-base); font-weight: 500; padding: 7px 14px; text-decoration: none; transition: 0.12s; white-space: nowrap; }
.btn:hover { background: var(--bg-soft); border-color: var(--halo-grey); }
.btn-primary { background: var(--halo-blue); border-color: var(--halo-blue); color: white; }
.btn-primary:hover { background: var(--halo-blue-dark); border-color: var(--halo-blue-dark); }
.btn-danger { border-color: var(--danger-border); color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn-sm { font-size: var(--fs-base); padding: 4px 10px; }
.data-table { background: var(--bg); border-collapse: collapse; font-size: var(--fs-base); width: 100%; }
.data-table thead th { background: var(--bg-soft); border-bottom: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-size: var(--fs-base); font-weight: 600; padding: 10px 12px; text-align: left; user-select: none; }
.data-table tbody td { border-bottom: 1px solid var(--border-soft); padding: 5px 12px; vertical-align: top; }
.data-table tbody tr:hover { background: var(--bg-soft); }
.merge-cluster { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 0px 0px 12px; }
.merge-cluster:last-child { margin-bottom: 0px; }
.merge-cluster-h { margin: 0px 0px 4px; font-size: var(--fs-h1); }
.merge-note { margin: 0px 0px 6px; font-size: var(--fs-base); }
.merge-table { margin: 0px; }
.merge-table .merge-keep { text-align: center; width: 44px; }
.merge-cluster-act { margin: 10px 0px 0px; }
.cmp-do-i { display: inline-block; padding: 2px 10px; background: var(--halo-blue-bg, #e8f6fc); border-radius: 4px; }
.docbar { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.docbar-doc { display: inline-flex; align-items: center; gap: 6px; }
.docbar-lbl { font-size: var(--fs-base); color: var(--text-muted); font-weight: 600; margin-right: 2px; }
.docbar .btn-sm { padding: 2px 8px; }
.kp-partner { border: 1px solid var(--border); border-radius: var(--radius); margin: 0px 0px 18px; overflow: hidden; background: var(--bg); }
.kp-phead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 12px 14px; background: var(--bg-soft); border-bottom: 2px solid var(--halo-blue); }
.kp-pname { font-weight: 700; font-size: var(--fs-h1); }
.kp-course { padding: 4px 14px 10px; }
/* Learner tables fit ONE screen (Phil 2026-10-04: "get everything that can, fit onto one screen"): 1pt smaller, tick columns narrow, the learner name a fixed share. All 7 uses of the one construct. */
.kp-course .data-table { font-size: var(--fs-table); }
.kp-course .data-table.list-tight .col-check { width: var(--col-tick); }
.kp-course .data-table.list-tight .col-status { width: var(--col-tick-wide); }
.kp-course .data-table.list-tight th.col-flex:first-child, .kp-course .data-table.list-tight td.col-flex:first-child { width: var(--col-learner); }
.kp-course .cmp-do-i { padding: 2px 6px; }
/* The result group (C · CT · RPL · Date) sits together inside ONE border; C/CT are narrow (Phil 2026-10-04). */
.data-table.list-tight .col-tick-n { width: var(--col-tick-n); text-align: center; }
.col-tick-n .cmp-do-i { padding: 2px 4px; }
.data-table .lu-grp { border-left: 2px solid var(--border); }
.data-table .lu-grp-end { border-right: 2px solid var(--border); }
.kp-chead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0px 6px; }
.kp-ctitle { font-weight: 600; font-size: var(--fs-base); }
.kp-bulkbar { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-lname { font-weight: 600; font-size: var(--fs-table); word-break: break-word; }
.kp-cid { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 400; }
.kp-done { color: rgb(30, 126, 69); font-weight: 700; }
.kp-done .kp-dl { color: var(--text-muted); font-weight: 500; font-size: var(--fs-table); }
.kp-lock { color: var(--text-muted); opacity: 0.55; }
.kp-soacell .docbar { gap: 10px; }
/* Complete/learner tables (Phil 2026-10-04 I-179): a tick column is centred whether or not it has a select-all (headings no longer jump);
   the certificate column (flex) stays left; a tick cell wraps its date / ref under the tick instead of cutting it off. */
.kp-course .data-table.list-tight th.col-check, .kp-course .data-table.list-tight td.col-check,
.kp-course .data-table.list-tight th.col-status, .kp-course .data-table.list-tight td.col-status { text-align: center; white-space: normal; overflow: visible; }
.kp-course .data-table.list-tight th.col-flex { text-align: left; }
.kp-course td.col-check .kp-dl, .kp-course td.col-status .kp-dl { display: block; }
.kp-soaline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kp-soaline .docbar { display: inline-flex; margin: 0; }
.kp-third { color: var(--text-muted); margin-top: 2px; }
.soa-units { margin: 8px 0px 4px; padding-left: 18px; font-size: var(--fs-base); }
.soa-units li { margin: 2px 0px; }
.soa-reissue { border-top: 1px solid var(--border); padding-top: 12px; }
.soa-reissue h4 { margin: 0px 0px 4px; }
.soa-reissue .field { width: 100%; }
.comms-body { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--bg-soft); max-height: 340px; overflow: auto; font-size: var(--fs-base); line-height: 1.5; }
.data-table tbody tr.clickable { cursor: pointer; }
.data-table .col-code { color: var(--text-muted); font-family: var(--font-mono); }
 input#code { width: 11ch; }
.data-table.list-tight { table-layout: fixed; width: 100%; }
.data-table.list-tight th, .data-table.list-tight td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Lists + record windows one point smaller (Phil 2026-10-04: "decrease everything in this and every other similar window by 1pt") —
   the size TOKENS step down inside them, so every rule built on them follows. */
.modal-body { font-size: var(--fs-base); }
/* a column HEADING is never cut off (Phil 2026-10-04: "COMPE…", "+V…") — it wraps instead */
.data-table.list-tight thead th { white-space: normal; overflow: visible; text-overflow: clip; }
.data-table.list-tight th.col-flex, .data-table.list-tight td.col-flex { white-space: normal; overflow: visible; }
.data-table.list-tight .col-mini { width: var(--col-mini); }
.data-table.list-tight .col-badge { width: var(--col-badge); }
.data-table.list-tight .col-date { width: var(--col-date); }
.data-table.list-tight .col-code { width: var(--col-code); }
.data-table.list-tight .col-count { width: var(--col-count); }
.data-table.list-tight .col-status { width: var(--col-status); }
.data-table.list-tight .col-check { width: var(--col-check); text-align: center; }
.data-table.list-tight .col-money { width: var(--col-money); }
.data-table .col-actions { text-align: right; white-space: nowrap; }
.table-controls input[type="search"] { border-radius: var(--radius); border: 1px solid var(--border); font-family: inherit; font-size: var(--fs-base); flex: 0 1 320px; min-width: 220px; padding: 7px 12px; }
.table-controls input[type="search"]:focus { border-color: var(--halo-blue); box-shadow: rgba(0, 164, 220, 0.15) 0px 0px 0px 3px; outline: none; }
.table-controls select { background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); font-family: inherit; font-size: var(--fs-base); flex: 0 0 auto; min-width: 160px; padding: 7px 12px; }
.table-meta { color: var(--text-muted); font-size: var(--fs-base); margin-left: auto; }
.badge { border-radius: 10px; display: inline-block; font-size: var(--fs-base); font-weight: 600; padding: 2px 8px; }
/* RPL box (Phil 2026-10-01): a special, single-learner box — make it VERY obvious. Distinct violet, not a status colour. */
.badge-rpl { background: #6d28d9; color: #fff; border-radius: 6px; display: inline-block; font-size: var(--fs-base); font-weight: 700; padding: 1px 7px; }
/* ONE status colour per status (divergence B2, 2026-10-05) — shown as the coloured word (statusBadge() in the loom). Invoice:
   Draft grey · Sent amber (awaiting payment) · Paid green · Cancelled struck through — the same on every page. */
.badge-acknowledged { color: var(--warn); }
.badge-active { background: var(--ok-bg); color: var(--ok); }
.badge-cancelled { background: var(--bg-soft-2); color: var(--text-muted); text-decoration: line-through; }
.badge-closed { background: var(--bg-soft-2); color: var(--text-muted); }
.badge-competent { background: var(--ok-bg); color: var(--ok); }
.badge-completed { background: var(--bg-soft-2); color: var(--text-muted); }
.badge-current { background: var(--ok-bg); color: var(--ok); }
.badge-deleted { background: var(--bg-soft-2); color: var(--text-muted); }
.badge-draft { background: var(--bg-soft-2); color: var(--text-muted); }
.badge-expired { background: var(--bg-soft-2); color: var(--text-muted); }
.badge-failed { background: var(--danger-border); color: var(--danger-strong); }
.badge-finalised { background: var(--bg-soft-2); color: var(--halo-blue); }
.badge-hrwl { background: var(--hrwl-bg); color: var(--hrwl); }
.badge-inactive { background: var(--bg-soft-2); color: var(--text-muted); }
.badge-invited { background: var(--bg-soft-2); color: var(--text-muted); }
.badge-manual { background: var(--warn-bg); color: var(--warn); }
.badge-not_yet_competent { background: var(--bg-soft-2); color: var(--text-muted); }
.badge-onboarding { background: var(--bg-soft-2); color: var(--text-muted); }
.badge-open { color: var(--danger); }
.badge-paid { background: var(--ok-bg); color: var(--ok); }
.badge-pending { background: var(--bg-soft-2); color: var(--text-muted); }
.badge-pending_approval { background: var(--warn-bg); color: var(--warn); }
.badge-pending_verification { background: var(--warn-bg); color: var(--warn); }
.badge-prereq { background: var(--bg-soft-2); color: var(--detour); }
.badge-rejected { background: var(--danger-bg); color: var(--danger); }
.badge-removed { background: var(--bg-soft-2); color: var(--text-muted); }
.badge-resolved { color: var(--ok); }
.badge-revoked { background: var(--danger-bg); color: var(--danger); }
.badge-sent { background: var(--warn-bg); color: var(--warn); }
.badge-superseded { background: var(--warn-bg); color: var(--warn); }
.badge-suspended { background: var(--warn-bg); color: var(--warn); }
.badge-verified { background: var(--ok-bg); color: var(--ok); }
.badge-void { background: var(--bg-soft-2); color: var(--text-muted); text-decoration: line-through; }
.badge-withdrawn, .badge-lapsed, .badge-incomplete { background: var(--bg-soft-2); color: var(--text-muted); }
.rpl-row > td, tr.rpl-row > td { background: rgba(109, 40, 217, 0.10); }
.rpl-row { box-shadow: inset 3px 0 0 #6d28d9; }
.kp-course.rpl-row { border-left: 3px solid #6d28d9; background: rgba(109, 40, 217, 0.06); }
.audit-dot-green { background: var(--ok-soft); }
.audit-dot-yellow { background: var(--warn-soft); }
.audit-dot-red { background: var(--danger-soft); }
.badge-program-type { background: var(--bg-soft-2); color: var(--text-muted); font-weight: 500; }
.modal { background: var(--bg); border-radius: var(--radius-lg); box-shadow: rgba(0, 0, 0, 0.25) 0px 20px 60px; display: flex; flex-direction: column; max-height: 90vh; max-width: 600px; width: 100%; }
.modal.modal-lg { max-width: 800px; }
.modal.modal-sm { max-width: 420px; }
.modal-header { align-items: center; border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; padding: 18px 22px; }
.modal-header h2 { font-size: var(--fs-h1); font-weight: 600; margin: 0px; }
.modal-header .close { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--text-faint); cursor: pointer; font-size: var(--fs-h1); line-height: 1; padding: 0px 4px; }
.modal-header .close:hover { color: var(--text); }
.modal-body { flex: 1 1 0%; overflow-y: auto; padding: 10px 20px; }
.modal-footer { background: var(--bg-soft); border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: 1px solid var(--border-soft); display: flex; gap: 8px; justify-content: flex-end; padding: 14px 22px; }
/* ONE look (Phil 2026-10-05): "what an item is, should be clear from its location. bold is a stand out. nothing needs to be bold bigger,
   in a custom font and a odd colour." One font, one size (10pt; 8pt footer only), one text colour; bold is the only emphasis. */
/* ONE form element — THE CORNERSTONE (Phil 2026-10-05; success = "everything on this page should be able to fit on a single page without a scroll"): "everything on this page should be 10pt. with 6pt above and 6pt below.
   in every instance, for every field, in every position, for the entire form". Every label, field and hint draws from these
   rules and nothing else — no page, dialog or context restyles a form element. Sizes are tokens: --fs-base (10pt), --sp-y (6pt). */
label { display: block; font-size: var(--fs-base); font-weight: 400; color: var(--text); margin: var(--sp-y) 0; }
/* A tick with its words is ONE element too (Phil 2026-10-05 "same vertical spacing"): box and words on one centred line, no margin of
   its own — it lines up with whatever heading or row it sits in. No page, dialog or list restyles a label. */
label:where(:has(> input[type="checkbox"]), :has(> input[type="radio"])) { display: inline-flex; align-items: center; gap: 4pt; margin: 0; cursor: pointer; }
label > input[type="checkbox"], label > input[type="radio"] { margin: 0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea, .field { box-sizing: border-box; font-family: inherit; font-size: var(--fs-base); line-height: 1.3; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--sp-y) / 2) var(--sp-y); }
input[type="email"]:not(.field), input[type="password"]:not(.field), input[type="text"]:not(.field) { width: 100%; }
.form-field > label, .form-field > input, .form-field > select, .form-field > textarea, .form-field > .hint, .form-field > .checkbox-row,
.modal-field > label, .modal-field > input, .modal-field > select, .modal-field > textarea, .modal-field > .hint,
.modal-body > label, .modal-body > input, .modal-body > select, .modal-body > textarea, .modal-body > .hint { margin: var(--sp-y) 0; }
.form-field > input, .form-field > select, .form-field > textarea, .modal-field > input, .modal-field > select, .modal-field > textarea,
.modal-body > input, .modal-body > select, .modal-body > textarea { display: block; width: 100%; }
input:focus, select:focus, textarea:focus, .field:focus { outline: none; border-color: var(--halo-blue); box-shadow: rgba(0, 164, 220, 0.15) 0px 0px 0px 3px; }
input[readonly], input[disabled], select[disabled], textarea[readonly], .field[readonly], .field:disabled { background: var(--bg-soft); color: var(--text-muted); }
textarea { resize: vertical; min-height: 70px; }
.hint { display: block; font-size: var(--fs-base); color: var(--text-faint); margin: var(--sp-y) 0; }
.form-field { display: block; min-width: 0px; }   /* block, so the 6pt above / 6pt below collapse to ONE 6pt between items */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 12pt; }   /* fields fill the width: a page gets 4 across, a dialog 2 */
.form-grid .full-width, .form-field.full-width { grid-column: 1 / -1; }
/* ONE field row (Phil 2026-10-05: "take office address as the approved formatting for our forms") — the identity row, every contact
   set and every address set draw from it. Width follows the data: a number (Street # · State · P/Code) is ~6 characters; a street name / address
   line is wide; everything else shares the rest. */
.field-row { display: flex; flex-wrap: wrap; gap: 0 12pt; }
.field-row > .form-field { flex: 0 1 10rem; }
.field-row > .form-field.fld-num { flex: 0 0 var(--col-mini); }
.field-row > .form-field.fld-wide { flex: 1 1 18rem; }
.field-row > .form-field.fld-id { flex: 0 0 var(--col-status); }   /* an identifier: ABN (14 with spaces), phone */
.form-field .required-mark { color: var(--danger); }
.field:focus { outline: none; border-color: var(--halo-blue); box-shadow: rgba(0, 164, 220, 0.15) 0px 0px 0px 3px; }
.field[readonly], .field:disabled { background: var(--bg-soft); color: var(--text-muted); }
.field-num { width: 72px; padding-left: 6px; padding-right: 6px; text-align: right; }
.field-sm { width: 96px; }
.field-md { width: 160px; }
.field-lg { width: 220px; }
.field-full { width: 100%; }
.field-grow { flex: 1 1 0%; min-width: 200px; }
.sn-th { text-align: left; width: 200px; font-weight: 600; }
.hint-inline { font-size: var(--fs-base); }
.field-dark { background: rgb(28, 36, 48); color: rgb(255, 255, 255); border-color: rgb(58, 70, 86); }
.upper { }
.mono { font-family: var(--font-mono); }
.tal { text-align: left; }
.gap-r { margin-right: 7px; }
.ack-note-label { display: block; margin-top: 12px; font-size: var(--fs-base); color: var(--text-muted); }
.tr-choice { display: inline-flex; gap: 4px; }
.btn.tr-pass { background: var(--ok); border-color: var(--ok); color: rgb(255, 255, 255); }
.btn.tr-fail { background: var(--danger); border-color: var(--danger); color: rgb(255, 255, 255); }
.btn.tr-block { background: var(--warn); border-color: var(--warn); color: rgb(255, 255, 255); }
.tr-note { min-width: 140px; }
.picker-input { background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); font-family: inherit; font-size: var(--fs-base); padding: 9px 11px; width: 100%; }
.picker-input:focus { border-color: var(--halo-blue); box-shadow: rgba(0, 164, 220, 0.15) 0px 0px 0px 3px; outline: none; }
.picker-results { background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-md); left: 0px; margin-top: 4px; max-height: 480px; overflow-y: auto; position: absolute; right: 0px; top: 100%; z-index: 10; }
.picker-result { align-items: center; border-bottom: 1px solid var(--border-soft); cursor: pointer; display: flex; gap: 8px; padding: 8px 12px; }
.picker-result:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.picker-result .picker-code { color: var(--text-muted); flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-base); min-width: 110px; }
.picker-result .picker-title { flex: 1 1 0%; font-size: var(--fs-base); }
.picker-result .picker-badges { display: flex; flex-shrink: 0; gap: 4px; }
.picker-empty { color: var(--text-muted); font-size: var(--fs-base); padding: 14px 12px; text-align: center; }
.linked-items { border-radius: var(--radius); border: 1px solid var(--border-soft); overflow: hidden; }
.linked-items .linked-item { align-items: center; background: var(--bg); border-bottom: 1px solid var(--border-soft); display: flex; gap: 12px; padding: 8px 12px; }
.linked-items .linked-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.linked-items .li-code { color: var(--text-muted); flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-base); min-width: 110px; }
.linked-items .li-title { flex: 1 1 0%; font-size: var(--fs-base); }
.li-remove { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--text-faint); cursor: pointer; font-size: var(--fs-h1); line-height: 1; padding: 4px 6px; }
.li-remove:hover { color: var(--danger); }
.empty-state { color: var(--text-muted); padding: 48px 20px; text-align: center; }
.empty-state h3 { color: var(--text); font-size: var(--fs-base); font-weight: 600; margin: 0px 0px 4px; }
.empty-state p { font-size: var(--fs-base); margin: 0px 0px 18px; }
.loading { color: var(--text-muted); font-size: var(--fs-base); padding: 40px; text-align: center; }
.toast-container { display: flex; flex-direction: column; gap: 8px; position: fixed; right: 16px; top: 16px; z-index: 200; }
.toast { animation: 0.18s ease-out 0s 1 normal none running toast-in; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-md); font-size: var(--fs-base); max-width: 380px; min-width: 260px; padding: 10px 16px; }
.toast.ok { border-left-color: var(--ok); }
.toast.error { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warn); }
.detail-grid { display: grid; gap: 10px 20px; grid-template-columns: 200px 1fr; margin-bottom: 18px; }
.section-header { align-items: center; border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; margin: var(--sp-y) 0; padding-bottom: 2pt; }
.section-header h3 { font-size: var(--fs-base); font-weight: 600; margin: 0px; }
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-mono { font-family: var(--font-mono); }
.login-version { margin-top: 18px; text-align: center; }
.required-mark { color: var(--danger); }
.hat-card { max-width: 520px; }
.hat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 8px 0px 4px; }
.hat-btn { align-items: center; background: var(--bg); border-radius: var(--radius-lg, 12px); border: 1px solid var(--border, var(--border-soft)); cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 18px 14px; position: relative; text-align: center; transition: border-color 0.12s, box-shadow 0.12s; }
.hat-btn:hover { border-color: var(--halo-blue); box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 10px; }
.hat-btn.current { border-color: var(--halo-blue); }
.hat-logo-wrap { align-items: center; display: flex; height: 56px; justify-content: center; }
.hat-logo { height: auto; max-height: 56px; max-width: 120px; object-fit: contain; width: auto; }
.hat-initials { align-items: center; background: var(--halo-blue); border-radius: 50%; color: var(--bg); display: flex; font-size: var(--fs-h1); font-weight: 700; height: 52px; justify-content: center; width: 52px; }
.hat-name { color: var(--text, var(--slate)); font-size: var(--fs-base); font-weight: 600; line-height: 1.3; }
.hat-roles { color: var(--text-muted, var(--text-muted)); font-size: var(--fs-base); text-transform: capitalize; }
.hat-current-badge { color: var(--halo-blue); font-size: var(--fs-base); font-weight: 600; }
.switch-rto { background: transparent; border-radius: 6px; border: 1px solid var(--border, var(--border-soft)); color: var(--text-muted, var(--text-muted)); cursor: pointer; font-size: var(--fs-base); margin-right: 8px; padding: 6px 12px; }
.switch-rto:hover { border-color: var(--halo-blue); color: var(--halo-blue); }
.page { margin: 0px auto; max-width: 800px; padding: 24px 16px 80px; }
header.brand { align-items: center; display: flex; justify-content: center; padding: 24px 0px; }
header.brand .logo { display: block; height: 64px; width: auto; }
.card { background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-bottom: 12pt; padding: var(--sp-y) 12pt; }
.placeholder { color: var(--text-faint); font-style: italic; padding: 20px; text-align: center; }
h1 { font-size: var(--fs-h1); font-weight: 600; margin: 0px 0px 6px; }
.subtitle { color: var(--text-muted); font-size: var(--fs-base); margin: 0px 0px 24px; }
.btn:disabled { cursor: not-allowed; opacity: 0.5; }
.error-box { background: var(--danger-bg); border-radius: var(--radius); border: 1px solid var(--danger); color: var(--danger); font-size: var(--fs-base); margin-bottom: 16px; padding: 12px 14px; }
.welcome h1 { color: var(--halo-blue); font-size: var(--fs-h1); margin: 0px 0px 8px; }
.section-header h2 { font-size: var(--fs-base); font-weight: 600; margin: 0px; }
.form-field.full-width { grid-column: 1 / -1; }
.data-table th { background: var(--bg-soft); border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-base); font-weight: 600; padding: 8px 10px; text-align: left; }
.data-table td { border-bottom: 1px solid var(--border-soft); padding: 5px 10px; vertical-align: middle; }
.login-card input { border-radius: 6px; border: 1px solid var(--border); font-size: var(--fs-base); margin: 0px 0px 14px; padding: 10px 12px; width: 100%; }
@media (max-width: 600px) {
  .audit-row { grid-template-columns: 1fr; }
  .audit-who { text-align: left; }
}
.sr-acting { font-size: var(--fs-base); font-weight: 700; color: var(--warn-strong); margin-bottom: 2px; }
.btn-link { background: transparent; border-color: transparent; color: var(--halo-blue); font-weight: 600; width: auto; }
.btn-link:hover { background: var(--halo-blue-bg); border-color: transparent; }
.data-table .btn { width: auto; vertical-align: middle; }
.btn-block { width: 100%; }
.login-shell, .entry-host { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; background: var(--bg); padding: 80px 20px 48px; }
.entry-host:empty { display: none; }
* { box-sizing: border-box; }
.login-shell { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; background: var(--bg); padding: 80px 20px 48px; }
.app-shell { display: grid; grid-template: "sidebar header" 56px "sidebar main" 1fr / 240px 1fr; height: 100vh; overflow: hidden; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-y); gap: 12pt; }
.dash-section { background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
/* ONE section tone set (divergence B5, 2026-10-05) — the same words as the count chip: info blue · warn amber ("attention" is the
   same amber) · danger red · quiet faded. Admin dashboard queues + trainer dashboard share it. */
.dash-section.info { border-left: 3px solid var(--halo-blue); }
.dash-section.attention, .dash-section.warn { border-left: 3px solid var(--warn); background: var(--warn-bg); }
.dash-section.danger { border-left: 3px solid var(--danger); }
.dash-section.quiet { opacity: 0.7; }
/* ONE count chip (divergence B3, 2026-10-05): .count-pill + one tone — info blue (work to do) · warn amber (needs attention;
   "attention" is the same amber) · danger red (expired / overdue) · zero grey. The dashboard's own .dash-count-* set is gone. */
.count-pill { border-radius: 11px; display: inline-block; min-width: 22px; text-align: center; font-size: var(--fs-base); font-weight: 700; padding: 2px 9px; }
.count-pill.info { background: var(--halo-blue-bg); color: var(--halo-blue-dark); }
.count-pill.attention, .count-pill.warn { background: var(--warn-bg); color: var(--warn); }
.count-pill.danger { background: var(--danger-bg); color: var(--danger); }
.count-pill.zero { background: var(--bg-soft-2); color: var(--text-muted); }
.btn.btn-link { background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; color: var(--halo-blue); font-size: var(--fs-base); font-weight: 600; cursor: pointer; font-family: inherit; }
.btn.btn-link:hover { text-decoration: underline; }
.audit-list { display: flex; flex-direction: column; gap: 1px; background: var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.btn-xs { padding: 2px 8px; font-size: var(--fs-base); }
.data-table thead th.sortable:hover { background: var(--bg-soft-2); }
.data-table thead th .sort-indicator { margin-left: 4px; color: var(--text-faint); font-size: var(--fs-base); }
.accordion-detail-row { background: var(--bg-soft); }
.accordion-detail-row:hover { background: var(--bg-soft) !important; }
.accordion-title-row { margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.accordion-title-row h2 { font-size: var(--fs-h1); font-weight: 600; margin: 0px; color: var(--text); }
.accordion-detail-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.accordion-detail-footer:empty { display: none; }
.table-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.audit-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; border: 1px solid rgba(0, 0, 0, 0.15); }
.btn-spinner { display: inline-block; width: 11px; height: 11px; border-width: 2px; border-style: solid; border-color: transparent currentcolor currentcolor; border-image: none; border-radius: 50%; animation: 0.6s linear 0s infinite normal none running btn-spin; vertical-align: -1px; margin-right: 7px; }
@keyframes btn-spin { 
  100% { transform: rotate(360deg); }
}
.modal-overlay { position: fixed; inset: 0px; background: rgba(15, 20, 30, 0.4); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal.modal-tall .modal-body { min-height: 540px; }
.form-field .checkbox-row { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); }
.form-field .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0px; }
.picker-input-row { position: relative; }
.picker-result:hover{ background: var(--bg-soft); }
.picker-empty .btn { margin-top: 8px; }
.linked-items .linked-item:hover { background: var(--bg-soft); }
.linked-items .li-badges { display: flex; gap: 4px; flex-shrink: 0; }
.linked-items .li-role-select { font-size: var(--fs-base); padding: 4px 8px; }
@keyframes toast-in { 
  0% { transform: translateX(20px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}
.section-header .section-actions { display: flex; gap: 6px; }
.role-grouped { margin-top: 12px; }
.role-grouped .role-group { margin-bottom: 14px; }
.role-grouped .role-group-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-muted); padding: 4px 0px 6px; }
.mt-3 { margin-top: 12px; }
.wq-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 16px; margin: 0px 0px 14px; font-size: var(--fs-base); color: var(--text-muted); }
details.wq-band { margin-bottom: 12px; }
details.wq-band summary { cursor: pointer; font-size: var(--fs-base); font-weight: 600; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 8px; user-select: none; list-style: none; }
details.wq-band summary::-webkit-details-marker { display: none; }
details.wq-band summary::before { content: "▸ "; color: var(--text-faint); }
details.wq-band[open] summary::before { content: "▾ "; }
details.wq-band[open] summary { margin-bottom: 10px; }
.wq-node.detour { color: var(--detour); }
.module-frame { display: block; width: 100%; height: calc(-64px + 100vh); border: 0px; background: var(--bg); }
#sidebarNav a[data-module] { cursor: pointer; }
.user-menu .partner-tag { display: inline-block; background: var(--halo-blue); color: white; font-size: var(--fs-base); font-weight: 600; padding: 2px 7px; border-radius: 10px; margin-left: 6px; }
.sidebar-partner-label { padding: 12px 20px 6px; font-size: var(--fs-base); font-weight: 600; color: var(--text-faint); }
.sidebar-partner-name { padding: 0px 20px 6px; font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.sidebar-partner-code { padding: 0px 20px 14px; font-size: var(--fs-base); font-family: var(--font-mono); color: var(--text-muted); border-bottom: 1px solid var(--border); }
.partner-info-strip { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.partner-info-strip dt { font-size: var(--fs-base); color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.partner-info-strip dd { margin: 0px; font-size: var(--fs-base); color: var(--text); }
.partner-info-collapsed > summary { cursor: pointer; font-size: var(--fs-base); color: var(--text-muted); padding: 8px 0px; user-select: none; }
.partner-info-collapsed > summary:hover { color: var(--halo-blue); }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; }
.dash-tile { background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 16px 18px; transition: border-color 0.12s, transform 0.12s; display: flex; flex-direction: column; gap: 4px; min-height: 120px; }
.dash-tile.is-link:hover { border-color: var(--halo-blue); transform: translateY(-1px); }
.dash-tile-warn { border-color: var(--warn); background: var(--warn-bg, var(--warn-bg)); }
.dash-tile-label { font-size: var(--fs-base); color: var(--text-muted); font-weight: 600; }
.dash-tile-value { font-size: var(--fs-h1); font-weight: 700; line-height: 1.1; color: var(--text); }
.dash-tile-sub { font-size: var(--fs-base); color: var(--text-muted); flex: 1 1 0%; }
.dash-tile-action { margin-top: 8px; align-self: flex-start; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; color: var(--halo-blue); font-size: var(--fs-base); font-weight: 600; cursor: pointer; font-family: inherit; }
.dash-tile-action:hover { text-decoration: underline; }
.dash-tile-placeholder { padding: 24px; text-align: center; color: var(--text-muted); font-size: var(--fs-base); grid-column: 1 / -1; }
.placeholder-card { background: var(--bg-soft); border: 1px dashed var(--border); border-radius: var(--radius); padding: 28px 24px; text-align: center; color: var(--text-muted); margin-top: 18px; }
.placeholder-card h3 { margin: 0px 0px 6px; font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.placeholder-card p { margin: 0px; font-size: var(--fs-base); }
.picker-result:hover { background: var(--bg-soft); }
.app-shell.hidden { display: none; }
.sidebar-nav a.hidden { display: none; }
[data-page-content].hidden { display: none; }
.card.hidden { display: none; }
.evidence-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.evidence-header h2 { margin: 0px; font-size: var(--fs-h1); }
.evidence-hint { font-size: var(--fs-base); color: var(--text-muted); margin: 0px 0px 14px; }
.btn-add { padding: 7px 14px; border: 1px solid var(--halo-blue); background: var(--bg); color: var(--halo-blue-dark); border-radius: var(--radius); cursor: pointer; font-size: var(--fs-base); font-family: inherit; font-weight: 500; }
.btn-add:hover { background: var(--halo-blue-bg); }
.evidence-list { margin-top: 10px; }
.evidence-item { padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius); margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; }
.evidence-item .title { font-weight: 600; font-size: var(--fs-base); }
.evidence-item .meta { font-size: var(--fs-base); color: var(--text-muted); }
.evidence-item .notes { font-size: var(--fs-base); color: var(--danger); margin-top: 4px; }
.status-pending { background: var(--warn-bg); color: var(--warn); padding: 3px 9px; border-radius: 10px; font-weight: 600; }
.dash-section-body .empty-quiet { color: var(--text-muted); font-size: var(--fs-base); padding: 4px 0px; }
.dash-section-body .dash-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0px; border-bottom: 1px solid var(--border-soft); }
.dash-section-body .dash-row:last-child { border-bottom: 0px; }
.dash-section-body .dash-row .left { min-width: 0px; }
.dash-section-body .dash-row .left .meta { font-size: var(--fs-base); color: var(--text-muted); }
.dash-section-body .dash-row a.action { font-size: var(--fs-base); color: var(--halo-blue); text-decoration: none; }
.dash-section-body .dash-row a.action:hover { text-decoration: underline; }
.status-verified { background: var(--ok-bg); color: var(--ok); padding: 3px 9px; border-radius: 10px; font-weight: 600; }
.status-rejected { background: var(--danger-bg); color: var(--danger); padding: 3px 9px; border-radius: 10px; font-weight: 600; }
.btn-bulk { background: var(--halo-blue); color: white; border-color: var(--halo-blue); font-weight: 600; }
.btn-bulk:hover:not(:disabled) { background: var(--halo-blue-dark); border-color: var(--halo-blue-dark); }
.status-active { background: var(--ok-bg); color: var(--ok); padding: 3px 9px; border-radius: 10px; font-weight: 600; }
.status-expired { background: var(--bg-soft-2); color: var(--text-muted); padding: 3px 9px; border-radius: 10px; font-weight: 600; }
.status-revoked { background: var(--danger-bg); color: var(--danger); padding: 3px 9px; border-radius: 10px; font-weight: 600; }
.dlearner { border-bottom: 1px solid var(--border-soft); }
.dlearner:last-child { border-bottom: 0px; }
.dlearner-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-soft); flex-wrap: wrap; }
.dlearner-header.accordion { cursor: pointer; }
.accordion-caret { font-size: var(--fs-base); color: var(--text-muted); width: 12px; display: inline-block; }
.dlearner-name { font-weight: 600; flex: 1 1 200px; min-width: 0px; }
.dlearner-tally { font-weight: 400; font-size: var(--fs-base); color: var(--text-muted); margin-left: 8px; }
.learner-atts { display: inline-flex; gap: 14px; font-size: var(--fs-base); flex-wrap: wrap; }
.dlearner-actions { display: inline-flex; gap: 6px; }
.dlearner-err { color: var(--danger); font-size: var(--fs-base); padding: 2px 14px 8px; }
.dunits { padding: 2px 14px 12px; }
.dunits.collapsed { display: none; }
.dunit { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 10px 0px; border-top: 1px solid var(--border-soft); }
.dunit-main { min-width: 0px; flex: 1 1 auto; }
.dunit-code { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-base); }
.dunit-title { color: var(--text-muted); font-size: var(--fs-base); margin-left: 8px; }
.dunit-atts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: var(--fs-base); }
.adj-note { margin-top: 6px; }
.adj-note textarea { width: 100%; max-width: 420px; font-size: var(--fs-base); padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); font-family: inherit; resize: vertical; }
.dunit-outcome-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
select.unit-outcome { font-size: var(--fs-base); padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft-2); color: inherit; }
.modal-backdrop { position: fixed; inset: 0px; background: rgba(15, 20, 30, 0.4); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-backdrop.hidden { display: none; }
.modal-field { display: flex; flex-direction: column; min-width: 0px; }
.modal-field input[type="file"] { padding: 6px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; }
h2 { margin: 0px 0px 14px; font-size: var(--fs-h1); }
.message-box { padding: 14px 16px; border-radius: var(--radius); background: var(--halo-blue-bg); border: 1px solid var(--halo-blue); color: var(--text); font-size: var(--fs-base); margin-bottom: 18px; }
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: var(--fs-base); font-weight: 600; }
.status-onboarding { background: var(--warn-bg); color: var(--warn); }
.status-inactive { background: var(--bg-soft-2); color: var(--text-muted); }
.footer { text-align: center; margin-top: 40px; }
.login-card input[type="email"], .login-card input[type="password"], .login-card input[type="text"] { font-size: var(--fs-base); padding: 10px 12px; margin-bottom: 14px; border-radius: 6px; }
.section { background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 20px 24px; margin-bottom: 18px; border-left: 4px solid var(--border-soft); }
.section.attention { border-left-color: var(--halo-blue); }
.section.warn { border-left-color: var(--warn); }
.section.danger { border-left-color: var(--danger); }
.section.ok { border-left-color: var(--ok); }
.section-meta { font-size: var(--fs-base); color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-warn { color: var(--warn); font-weight: 600; }
.text-danger { color: var(--danger); font-weight: 600; }
.empty-row { text-align: center; padding: 16px; color: var(--text-faint); font-style: italic; font-size: var(--fs-base); }
.btn-sm:hover { background: var(--bg-soft); border-color: var(--halo-blue); color: var(--halo-blue-dark); }
.hrwl-flag { display: inline-block; padding: 1px 7px; background: var(--warn-bg); color: var(--warn); border-radius: 4px; font-size: var(--fs-base); font-weight: 600; }
.login-card button#btn_login:hover { background: var(--halo-blue-dark); }
.login-card button#btn_login:disabled { opacity: 0.6; cursor: default; }
.login-card .error-box { margin-bottom: 14px; }
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.summary-card { background: var(--bg); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-md); border-left: 4px solid var(--border-soft); }
.summary-card.attention { border-left-color: var(--halo-blue); }
.summary-card.warn { border-left-color: var(--warn); }
.summary-card.danger { border-left-color: var(--danger); }
.summary-card .label { font-size: var(--fs-base); color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.summary-card .value { font-size: var(--fs-h1); font-weight: 700; color: var(--text); }
.summary-card .sublabel { font-size: var(--fs-base); color: var(--text-faint); margin-top: 2px; }
.subtab-pane { display: none; }
.subtab-pane.active { display: block; }
.modal.sm { max-width: 480px; }
.modal.md { max-width: 640px; }
.modal.lg { max-width: 880px; }
.cb-sel { font-size: var(--fs-base); color: var(--text); margin-top: 6px; }
.cb-sel .cb-sel-code, .cb-sel strong { color: var(--halo-blue); font-weight: 600; }
.cb-sel em { color: var(--text-muted); font-style: normal; }
.cb-panel { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-top: 10px; }
.cb-panel h4 { font-size: var(--fs-base); font-weight: 600; text-transform: none; margin: 12px 0px 6px; color: var(--text); }
.cb-panel h4:first-child { margin-top: 0px; }
.cb-panel .cb-note { font-weight: 400; color: var(--text-muted); font-size: var(--fs-base); }
.cb-panel h4 .cb-spec-title { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cb-panel .cb-spec-all { width: auto; margin: 0px; flex: 0 0 auto; }
.cb-panel .cb-pkg { background: var(--bg-soft); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; }
.cb-panel .cb-pkg-head { font-weight: 600; font-size: var(--fs-base); color: var(--text); }
.cb-panel .cb-pkg-text { font-size: var(--fs-base); color: var(--text-muted); white-space: pre-wrap; margin-top: 4px; max-height: 140px; overflow: auto; line-height: 1.4; }
.cb-panel .cb-meter { margin-top: 6px; font-size: var(--fs-base); color: var(--text); }
.cb-panel .cb-meter-live { font-weight: 600; }
.cb-panel .cb-grp-live { font-weight: 600; font-size: var(--fs-base); margin-left: 6px; color: var(--text-muted); }
.cb-panel .cb-ok { color: rgb(26, 127, 55); }
.cb-panel .cb-under { color: var(--text-muted); }
.cb-panel .cb-over { color: var(--danger, #b3261e); }
.cb-panel .cb-wt { font-size: var(--fs-base); color: var(--text-muted); font-weight: 600; }
.cb-panel .cb-preq, .data-table .cb-preq { display: inline-block; margin-left: 6px; font-size: var(--fs-base); color: rgb(154, 103, 0); }
.cb-panel .cb-pkg-more { margin-top: 4px; }
.cb-panel .cb-pkg-more summary { cursor: pointer; color: var(--text-muted); font-size: var(--fs-base); }
.cb-loc-new { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-top: 8px; background: var(--bg-soft); }
.cb-loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cb-loc-grid > #cbl_name { grid-column: 1 / -1; }
.cb-loc-grid input, .cb-loc-grid select { width: 100%; box-sizing: border-box; }
.cb-loc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.cb-panel .cb-u { display: grid; grid-template-columns: 20px 104px 1fr; gap: 10px; align-items: start; padding: 4px 0px; margin: 0px; text-transform: none; font-weight: 400; font-size: var(--fs-base); color: var(--text); cursor: pointer; text-align: left; }
.cb-panel .cb-u.cb-u-off { opacity: 0.55; cursor: default; }
.cb-panel .cb-u input { margin: 2px 0px 0px; width: auto; }
.cb-panel .cb-u .cb-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-base); color: var(--text-muted); padding-top: 1px; white-space: nowrap; text-transform: none; }
.cb-panel .cb-u .cb-title { line-height: 1.35; text-transform: none; }
#toastHost { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.audit-records-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; padding: 12px; background: var(--bg-soft); border-radius: var(--radius); }
.audit-records-filters .form-field { margin: 0px; min-width: 140px; }
body { margin: 0px; background: var(--bg-soft); color: var(--text); font-size: var(--fs-base); line-height: 1.3; }
a { color: var(--halo-blue); }
.data-table th, .data-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.page-sub { color: var(--text-muted); margin: 6px 0px 0px; }
.login-form button { width: 100%; padding: 11px 12px; background: var(--halo-blue); color: white; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: var(--radius); font-size: var(--fs-base); font-weight: 600; font-family: inherit; cursor: pointer; margin-top: 8px; transition: background 0.12s; }
.login-form button:hover { background: rgb(0, 145, 194); }
.login-form button:disabled { background: var(--text-faint); cursor: not-allowed; }
#modalHost:empty { display: none; }
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0px 18px; align-items: end; }
.filter-field { display: flex; flex-direction: column; }
.filter-field select, .filter-field input { padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-base); font-family: inherit; background: var(--bg); min-width: 160px; }
.data-table tr.clickable:hover { background: var(--bg-soft); cursor: pointer; }
.status-invited { background: var(--halo-blue-bg); color: var(--halo-blue-dark); }
.status-removed { background: var(--danger-bg); color: var(--danger); }
.invite-result { margin-top: 16px; padding: 14px; background: var(--ok-bg); border: 1px solid var(--ok); border-radius: var(--radius); }
.invite-result .url-row { display: flex; gap: 8px; align-items: center; }
.invite-result input { flex: 1 1 0%; font-family: var(--font-mono); font-size: var(--fs-base); padding: 8px 10px; border: 1px solid var(--ok); border-radius: var(--radius); background: var(--bg); }
.module-footer { text-align: center; padding: 14px 0px 18px; }
.welcome .lead { margin: 0px 0px 4px; font-size: var(--fs-h1); }
.welcome .partner { font-weight: 600; }
.welcome .offering { background: var(--bg-soft); padding: 12px 14px; border-radius: var(--radius); margin: 12px 0px 0px; font-weight: 500; }
.form-field .hint.survey { color: var(--halo-blue-dark); font-style: italic; }
.form-field .req { color: var(--danger); margin-left: 2px; }
.form-field input[type="file"] { padding: 6px; font-size: var(--fs-base); }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0px; }
.checkbox-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.declaration { background: var(--bg-soft); padding: 14px 16px; border-radius: var(--radius); margin-bottom: 12px; }
.declaration .dec-title { font-weight: 600; margin-bottom: 6px; }
.declaration .dec-body { font-size: var(--fs-base); color: var(--text-muted); margin-bottom: 8px; }
.error-msg { background: var(--danger-bg); color: var(--danger); padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: var(--fs-base); }
.warn-msg { background: var(--warn-bg); color: var(--warn); padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: var(--fs-base); }
.actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border-soft); margin-top: 20px; }
.loading-overlay { position: fixed; inset: 0px; background: rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-content: center; z-index: 100; flex-direction: column; gap: 12px; }
.spinner { width: 40px; height: 40px; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top-color: var(--halo-blue); border-radius: 50%; animation: 0.8s linear 0s infinite normal none running spin; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.typeahead { position: relative; }
.typeahead .ta-input { padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-base); font-family: inherit; background: var(--bg); width: 100%; }
.typeahead .ta-input:focus { outline: none; border-color: var(--halo-blue); box-shadow: rgba(0, 164, 220, 0.15) 0px 0px 0px 3px; }
.typeahead .ta-dropdown { position: absolute; top: 100%; left: 0px; right: 0px; z-index: 10; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 2px; max-height: 240px; overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; }
.typeahead .ta-item { padding: 8px 12px; cursor: pointer; font-size: var(--fs-base); border-bottom: 1px solid var(--border-soft); }
.typeahead .ta-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.typeahead .ta-item:hover, .typeahead .ta-item.active { background: var(--halo-blue-bg); color: var(--halo-blue-dark); }
.typeahead .ta-empty { padding: 12px; font-size: var(--fs-base); color: var(--text-muted); text-align: center; }
footer.foot { text-align: center; color: var(--text-faint); font-size: var(--fs-base); padding: 20px 0px; }
footer.foot a { color: var(--text-muted); text-decoration: none; }
footer.foot a:hover { color: var(--halo-blue); text-decoration: underline; }
.form-field input.text-mono { font-family: var(--font-mono); }
.success-box { background: var(--ok-bg); border-left: 3px solid var(--ok); padding: 14px 16px; border-radius: var(--radius); margin: 12px 0px; font-size: var(--fs-base); color: var(--text); }
.success-box strong { color: var(--ok); }
.soa-list { display: flex; flex-direction: column; gap: 10px; }
.soa-card { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: 0.12s; }
.soa-card:hover { border-color: var(--halo-blue); background: var(--halo-blue-bg); }
.soa-card.selected { border-color: var(--halo-blue); background: var(--halo-blue-bg); box-shadow: 0 0 0 2px var(--halo-blue); }
.soa-card .parchment { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-base); color: var(--halo-blue-dark); }
.soa-card .title { font-weight: 500; margin-top: 2px; }
.soa-card .meta { font-size: var(--fs-base); color: var(--text-muted); margin-top: 4px; }
html, body { margin: 0px; padding: 0px; font-family: var(--font-body); color: var(--text); background: var(--bg); min-height: 100vh; }
.welcome { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; cursor: pointer; }
.welcome .logo { width: 100%; max-width: 320px; margin-bottom: 28px; }
.welcome .tagline { font-size: var(--fs-base); color: var(--text-muted); margin: 0px 0px 28px; }
.welcome .enter { font-size: var(--fs-base); font-weight: 600; color: var(--halo-blue); }
.welcome .learner-note { font-size: var(--fs-base); color: var(--text-faint); margin-top: 40px; }
.splash { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--fs-base); }
.login-card button:hover { background: var(--halo-blue-dark); }
.login-card button:disabled { opacity: 0.6; cursor: default; }
.app-header .brand { display: flex; align-items: center; gap: 14px; }
.app-header .brand img { height: 30px; width: auto; display: block; }
.app-header .brand .console-title { font-size: var(--fs-h1); font-weight: 700; color: var(--halo-blue); line-height: 1; }
.app-header .user-menu .who { display: flex; flex-direction: row; align-items: center; gap: 8px; line-height: 1.25; }
.app-header .user-menu .who-name { font-weight: 700; font-size: var(--fs-base); color: var(--text); }
.app-header .user-menu .who-role { font-size: var(--fs-base); font-weight: 600; color: var(--halo-blue); }
.app-header .user-menu { display: flex; align-items: center; gap: 14px; font-size: var(--fs-base); color: var(--text-muted); }
.app-header .user-menu button { padding: 7px 14px; background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-base); cursor: pointer; }
.page-header p { margin: 0px; color: var(--text-muted); font-size: var(--fs-base); max-width: 640px; }
.btn-ghost { padding: 6px 12px; background: var(--bg); color: var(--halo-blue); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-base); cursor: pointer; }
table.data-table { width: 100%; border-collapse: collapse; }
.data-table tr:last-child td { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.pill { display: inline-block; font-size: var(--fs-base); font-weight: 600; padding: 2px 9px; border-radius: 20px; }
.pill.active { background: var(--ok-bg); color: var(--ok); }
.pill.suspended { background: var(--danger-bg); color: var(--danger); }
.pill.halo { background: rgba(0, 164, 220, 0.1); color: var(--halo-blue-dark); }
.pill.generic { background: var(--bg-soft-2); color: var(--text-muted); }
.pill.pending { background: var(--warn-bg); color: var(--warn); }
.mono { font-variant-numeric: tabular-nums; font-weight: 600; }
.modal-header .locked { margin-top: 6px; font-size: var(--fs-base); color: var(--text-muted); }
.modal-body .row { display: flex; gap: 14px; }
.modal-body .row > div { flex: 1 1 0%; }
.modal-body .section-label { font-size: var(--fs-base); color: var(--text-faint); margin: 4px 0px 10px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.footer-version { text-align: center; padding: 24px; }
.modal-body .abn-row { display: flex; gap: 10px; align-items: center; margin: 0px 0px 6px; }
.modal-body .abn-row input { margin: 0px; flex: 1 1 0%; }
.modal-body .abn-row button { white-space: nowrap; }
.abn-status { font-size: var(--fs-base); min-height: 15px; margin: 0px 0px 12px; color: var(--text-muted); }
.abn-status.ok { color: var(--ok); }
.abn-status.err { color: var(--danger); }
.lp-h2 { font-size: var(--fs-base); color: var(--text-muted); margin: 24px 0px 10px; font-weight: 700; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lp-frontdoor { grid-template-columns: minmax(260px, 460px); }
.lp-frontdoor .lp-card { border-color: var(--halo-blue); box-shadow: rgba(0, 164, 220, 0.15) 0px 2px 10px; }
.lp-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-md)); }
.lp-card .lp-name { font-size: var(--fs-base); font-weight: 600; }
.lp-card .lp-desc { font-size: var(--fs-base); color: var(--text-muted); flex-grow: 1; min-height: 32px; }
.lp-card .lp-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: var(--fs-base); align-items: center; }
.lp-card .lp-role { background: var(--bg-soft-2, var(--bg-soft-2)); color: var(--text-muted); padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.lp-card .lp-ver { background: var(--ok-bg, var(--ok-bg)); color: var(--ok, var(--ok)); padding: 2px 8px; border-radius: 10px; font-family: var(--font-mono); font-weight: 600; }
.lp-card .lp-ver.warn { background: var(--warn-bg, var(--warn-bg)); color: var(--warn, var(--warn)); }
.lp-card .lp-ver.bad { background: var(--danger-bg, var(--danger-bg)); color: var(--danger, var(--danger)); }
.lp-grouprow td { font-weight: 600; color: var(--text-muted); background: var(--bg-soft); }
.lp-ver { font-family: var(--font-mono); }
td.lp-ok { color: var(--ok); font-weight: 600; }
td.lp-warn { color: var(--warn); }
td.lp-bad { color: var(--danger); font-weight: 600; }
.lp-card .lp-open { margin-top: 6px; align-self: flex-start; background: var(--halo-blue); color: var(--bg); text-decoration: none; padding: 6px 14px; border-radius: var(--radius); font-size: var(--fs-base); font-weight: 600; }
.lp-card .lp-open:hover { background: var(--halo-blue-dark, var(--halo-blue-dark)); }
.tenant-context { padding: 11px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.tenant-context.set { background: rgba(0, 164, 220, 0.08); border-bottom-color: rgba(0, 164, 220, 0.3); }
.tenant-context.none { background: var(--warn-bg); border-bottom-color: var(--warn-border); }
.tenant-context .tc-tag { font-size: var(--fs-base); font-weight: 700; color: var(--text-faint); }
.tenant-context .tc-name { font-weight: 700; font-size: var(--fs-base); color: var(--text); }
.tenant-context .tc-rto { font-variant-numeric: tabular-nums; font-size: var(--fs-base); color: var(--text-muted); }
.tenant-context.none .tc-name { color: var(--warn-mid); font-weight: 600; font-size: var(--fs-base); }
.tenant-context.none .tc-tag { color: var(--warn-mid); }
.tenant-context .tc-current { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tenant-context .tc-switch { display: flex; align-items: center; gap: 8px; }
.tenant-context .tc-switch select { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: var(--fs-base); }
.tenant-context .tc-switch .btn-primary:disabled { opacity: 0.45; cursor: default; }
.user-group { margin-bottom: 18px; }
.user-group:last-child { margin-bottom: 0px; }
.user-group-head { display: flex; align-items: baseline; gap: 10px; padding: 0px 2px 8px; }
.user-group-head .ug-name { font-size: var(--fs-base); font-weight: 700; }
.user-group-head .ug-rto { font-size: var(--fs-base); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.user-group-head .ug-count { font-size: var(--fs-base); color: var(--text-faint); margin-left: auto; }
.user-group.platform .ug-name { color: var(--halo-blue-dark); }
.user-group.unplaced .ug-name { color: var(--warn-mid); }
.op-nav { display: flex; gap: 2px; padding: 0px 28px; background: var(--bg); border-bottom: 1px solid var(--border); overflow-x: auto; }
.op-nav button { appearance: none; background: none; border-width: medium medium 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; padding: 13px 14px; font-size: var(--fs-base); font-weight: 600; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.op-nav button:hover { color: var(--text); }
.op-nav button.active { color: var(--halo-blue); border-bottom-color: var(--halo-blue); }
.op-nav button .nav-count { display: inline-block; min-width: 18px; padding: 0px 5px; margin-left: 5px; font-size: var(--fs-base); font-weight: 700; line-height: 16px; text-align: center; border-radius: 9px; background: var(--bg-soft-2); color: var(--text-muted); vertical-align: middle; }
.op-nav button.active .nav-count { background: rgba(0, 164, 220, 0.14); color: var(--halo-blue-dark); }
.op-nav button .nav-count.alert { background: var(--danger-bg); color: var(--danger); }
.op-nav button .nav-count:empty { display: none; }
.build-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 12px; background: var(--bg); }
.build-card .bc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.build-card .bc-title { font-size: var(--fs-base); font-weight: 700; }
.build-card .bc-when { margin-left: auto; font-size: var(--fs-base); color: var(--text-faint); }
.build-card .bc-summary { font-size: var(--fs-base); color: var(--text); margin: 2px 0px 8px; }
.build-card .bc-affects { font-size: var(--fs-base); color: var(--text-muted); }
.build-card .bc-affects b { color: var(--text); font-weight: 600; }
.issue-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 13px 16px; margin-bottom: 10px; background: var(--bg); }
.issue-card.closed { opacity: 0.62; }
.issue-card .ic-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.issue-card .ic-summary { font-size: var(--fs-base); font-weight: 600; }
.issue-card .ic-when { margin-left: auto; font-size: var(--fs-base); color: var(--text-faint); white-space: nowrap; }
.issue-card .ic-meta { font-size: var(--fs-base); color: var(--text-muted); margin: 6px 0px 0px; }
.issue-card .ic-detail { font-size: var(--fs-base); margin: 8px 0px 0px; white-space: pre-wrap; }
.issue-card details { margin-top: 8px; }
.issue-card details summary { font-size: var(--fs-base); color: var(--halo-blue); cursor: pointer; }
.issue-card pre.ic-env { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 6px; padding: 10px; font-size: var(--fs-base); overflow-x: auto; margin: 8px 0px 0px; max-height: 240px; }
.issue-card .ic-actions { margin-top: 10px; display: flex; gap: 8px; }
.pill.cat { background: var(--bg-soft-2); color: var(--text-muted); }
.pill.st-open { background: var(--danger-bg); color: var(--danger); }
.pill.st-ack { background: var(--warn-bg); color: var(--warn); }
.pill.st-closed { background: var(--ok-bg); color: var(--ok); }
.note-thread { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.note-item { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 6px; padding: 7px 10px; }
.note-meta { display: block; font-size: var(--fs-base); color: var(--text-faint); margin-bottom: 2px; }
.note-text { font-size: var(--fs-base); white-space: pre-wrap; }
.note-empty { font-size: var(--fs-base); color: var(--text-faint); margin-top: 8px; }
.note-add { display: flex; gap: 8px; margin-top: 8px; }
.note-add .note-input { flex: 1 1 0%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: var(--fs-base); }
.reorder { display: inline-flex; flex-direction: column; gap: 2px; margin-right: 2px; }
.reorder .btn-ghost { padding: 0px 7px; line-height: 1.35; font-size: var(--fs-base); }
.reorder .btn-ghost[disabled] { opacity: 0.35; cursor: default; }
.bstatus-select, .prio-select { font-size: var(--fs-base); padding: 3px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.issue-card.prio-urgent { border-left: 3px solid var(--danger); }
.issue-card.prio-high { border-left: 3px solid var(--warn); }
.prod-controls { display: flex; align-items: center; gap: 12px; margin: 0px 0px 14px; flex-wrap: wrap; }
.prod-search { flex: 1 1 0%; min-width: 220px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-base); font-family: inherit; background: var(--bg); color: var(--text); }
.prod-toggle { font-size: var(--fs-base); color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.prod-count { font-size: var(--fs-base); color: var(--text-faint); margin: 0px 0px 10px; }
.change-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 13px 16px; margin-bottom: 10px; background: var(--bg); }
.change-card.ms { border-left: 3px solid var(--halo-blue); }
.change-card .cc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.change-card .cc-ref { font-size: var(--fs-base); font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.change-card .cc-area { font-size: var(--fs-base); font-weight: 600; padding: 2px 9px; border-radius: 20px; background: var(--bg-soft-2); color: var(--text-muted); }
.change-card .cc-ms { font-size: var(--fs-base); font-weight: 600; padding: 2px 9px; border-radius: 20px; background: rgba(0, 164, 220, 0.12); color: var(--halo-blue-dark); }
.change-card .cc-when { margin-left: auto; font-size: var(--fs-base); color: var(--text-faint); white-space: nowrap; }
.change-card .cc-request { font-size: var(--fs-base); font-weight: normal; margin: 8px 0px 0px; white-space: pre-line; }
.change-card .cc-change { font-size: var(--fs-base); color: var(--text); margin: 5px 0px 0px; white-space: pre-line; }
.change-card .cc-affected { font-size: var(--fs-base); color: var(--text-muted); margin: 8px 0px 0px; }
.change-card .cc-affected b { color: var(--text); font-weight: 600; }
.change-card .cc-depends { font-size: var(--fs-base); color: var(--text-muted); margin: 6px 0px 0px; }
.change-card .cc-depends b { color: var(--text); font-weight: 600; }
.change-card .cc-shortfall { font-size: var(--fs-base); margin: 8px 0px 0px; padding: 7px 10px; border-radius: 6px; background: var(--warn-bg); color: var(--warn-strong); border-left: 3px solid var(--warn); }
.change-card .cc-shortfall b { color: var(--warn-strong); font-weight: 600; }
.change-card .cc-edit { margin-left: 6px; }
.chg-ms { font-size: var(--fs-base); color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; }
.empty-scaffold { color: var(--text-muted); padding: 40px 20px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--bg); font-size: var(--fs-base); }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.db-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.db-chip { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft, var(--bg-soft)); min-width: 96px; }
.db-chip .dc-k { font-size: var(--fs-base); color: var(--text-faint, var(--text-faint)); }
.db-chip .dc-v { font-size: var(--fs-h1); font-weight: 700; font-variant-numeric: tabular-nums; }
.status-dot.ok { background: var(--ok); }
.status-dot.bad { background: var(--danger); }
.status-dot.unknown { background: var(--warn-mid); }
.sys-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); }
.sys-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.sys-row .sys-name { font-weight: 600; }
.sys-row .sys-state { font-size: var(--fs-base); color: var(--text-muted); }
.imp-step { margin-bottom: 18px; }
.imp-drop { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 26px; text-align: center; color: var(--text-muted); cursor: pointer; background: var(--bg); }
.imp-drop.drag { border-color: var(--halo-blue); background: rgba(0, 164, 220, 0.05); }
.imp-grouprow td { background: var(--bg-soft); font-size: var(--fs-base); color: var(--text-muted); font-weight: 700; }
.imp-pre { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 6px; padding: 12px; font-family: var(--font-mono); font-size: var(--fs-base); overflow: auto; max-height: 340px; white-space: pre-wrap; }
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .card { padding: 18px; }
}
.nav-module-off { opacity: 0.55; cursor: default; }
.nav-module-flag { font-size: var(--fs-base); font-style: italic; color: var(--text-muted); margin-left: 6px; white-space: nowrap; }
.pricing-table th.grp { text-align: center; background: var(--bg-soft-2); border-left: 1px solid var(--border); }
.pricing-table td { vertical-align: middle; }
.price-input { width: 84px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--fs-base); text-align: right; background: var(--bg); transition: border-color 0.15s, background 0.4s; }
.price-input:focus { outline: none; border-color: var(--halo-blue); }
.price-input.needs { border-color: var(--warn); background: var(--warn-bg); }
.price-input.saved { background: var(--ok-bg); border-color: var(--ok); }
.kind-badge { display: inline-block; font-size: var(--fs-base); padding: 1px 6px; border-radius: 10px; background: var(--bg-soft-2); color: var(--text-muted); }
.ovr-add { margin-top: 12px; padding: 10px 12px; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ovr-add select { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-base); background: var(--bg); }
.data-table td.num, .data-table th.num { text-align: right; font-family: var(--font-mono); }
.modal.modal-wide { max-width: 1080px; }
.data-table.form-rows { table-layout: fixed; }
.data-table.form-rows thead th, .data-table.form-rows tbody td, .data-table.form-rows tfoot td { padding: 2px 5px; vertical-align: middle; }
.data-table.form-rows .col-qty { width: 50px; }
.data-table.form-rows .col-money { width: 84px; }
.data-table.form-rows .col-act { width: 34px; }
.data-table.form-rows td .field { width: 100%; margin: 0px; padding: 4px 6px; font-size: var(--fs-base); vertical-align: middle; }
.data-table.form-rows td.num .field { text-align: right; }
.modal-ver { font-size: var(--fs-sm); font-weight: 400; }
.tab-btn { padding: 8px 16px; background: none; border-width: medium medium 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; margin-bottom: -2px; cursor: pointer; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 400; color: var(--text-muted); }
.tab-btn.active { border-bottom-color: var(--halo-blue); font-weight: 600; color: var(--halo-blue); }
.w150 { width: 150px; }
.logo-prev { max-height: 48px; max-width: 200px; border: 1px solid var(--border); border-radius: 4px; background: rgb(255, 255, 255); padding: 4px; }
.pick-ov { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.45); z-index: 9000; display: flex; align-items: center; justify-content: center; }
.pick-modal { background: var(--bg); color: inherit; border-radius: 12px; max-width: 560px; width: 92%; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.pick-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: center; }
.pick-sub { color: var(--text-muted); }
.pick-x { margin-left: auto; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; cursor: pointer; color: inherit; }
.pick-search-row { padding: 10px 16px; }
.pick-list { overflow: auto; }
.pick-empty { padding: 14px; color: var(--text-muted); }
.pick-email { color: var(--text-muted); flex: 1 1 0%; }
.enq-result-row { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.enq-result-row[data-full] { opacity: 0.7; }
.badge, .kind-badge, .status-pill { background: none; padding: 0px; border-radius: 0px; }
.editor-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; gap: 16px; flex-wrap: wrap; }
.editor-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); gap: 16px; flex-wrap: wrap; }
.ramiel-testframe { position: fixed; inset: 0px; border: 3px solid var(--warn); pointer-events: none; z-index: 9998; }
.ramiel-testframe-label { position: fixed; top: 0px; left: 50%; transform: translateX(-50%); background: var(--warn); color: rgb(255, 255, 255); pointer-events: none; z-index: 9999; font: 600 11px / 1 -apple-system, system-ui, sans-serif; padding: 5px 14px; border-radius: 0px 0px 7px 7px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px; white-space: nowrap; }
.ramiel-crewbtn { position: fixed; left: 16px; bottom: 16px; z-index: 9997; background: var(--halo-blue); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 22px; cursor: pointer; font: 600 12px / 1 -apple-system, system-ui, sans-serif; padding: 10px 16px; box-shadow: rgba(0, 0, 0, 0.28) 0px 3px 10px; display: inline-flex; align-items: center; gap: 7px; }
.ramiel-crewbtn:hover { filter: brightness(1.08); }
/* Staff partner-view bar (partner.html #devBar, I-297, Phil 2026-10-06: it "covers the bottom of any screen"): while it is on the page,
   the app shell stops above it so nothing sits underneath; the crew pill lifts clear of it; a suspended partner reads in red. */
body:has(#devBar) .app-shell, body:has(#devBar) .app-sidebar { height: calc(100vh - var(--devbar-h)); }
body:has(#devBar) .ramiel-crewbtn { bottom: calc(var(--devbar-h) + 12px); }
#devBar { min-height: var(--devbar-h); box-sizing: border-box; }
#devSel option[data-status="suspended"], #devSel[data-status="suspended"] { color: var(--danger); font-weight: 600; }
#devSel option:not([data-status="suspended"]) { color: var(--text); font-weight: 400; }
.ramiel-crewbtn:active { transform: translateY(1px); }
:root { --fs-title: 10pt; --fs-head: 10pt; --fs-base: 10pt; --fs-foot: 8pt; --sp-y: 6pt; }
html, body { font-size: var(--fs-base); }
h1, h2 { font-size: var(--fs-head); margin-top: var(--sp-y); margin-bottom: var(--sp-y); }
h3, h4, h5, h6 { font-size: var(--fs-base); margin-top: var(--sp-y); margin-bottom: var(--sp-y); }
table, th, td, .data-table, .data-table th, .data-table td { font-size: var(--fs-base); }
/* Non-function information — footers and version stamps — is the ONE place grey is used (Phil 2026-10-05). */
 footer, .footer, .module-footer, .footer-version, .sidebar-version, .login-version{ font-size: var(--fs-foot); color: var(--text-meta); }
 .login-title { font-size: var(--fs-title); }
.u-hide { display: none !important; }
.u-flex { display: flex; }
.u-iflex { display: inline-flex; }
.u-block { display: block; }
.u-ib { display: inline-block; }
.u-col { flex-direction: column; }
.u-wrap { flex-wrap: wrap; }
.u-aic { align-items: center; }
.u-aie { align-items: flex-end; }
.u-ais { align-items: flex-start; }
.u-jsb { justify-content: space-between; }
.u-jcc { justify-content: center; }
.u-tac { text-align: center; }
.u-tar { text-align: right; }
.u-tal { text-align: left; }
.u-ptr { cursor: pointer; }
.u-cap { text-transform: capitalize; }
.u-nowrap { white-space: nowrap; }
.u-ovh { overflow: hidden; }
.u-ova { overflow: auto; }
.u-fw4 { font-weight: 400; }
.u-fw5 { font-weight: 500; }
.u-fw6 { font-weight: 600; }
.u-fw7 { font-weight: 700; }
.u-soft { color: var(--text-muted); }
.u-m0 { margin: 0px; }
.u-mt0 { margin-top: 0px; }
.u-mt1 { margin-top: 6pt; }
.u-mt2 { margin-top: 12pt; }
.u-mt3 { margin-top: 18pt; }
.u-mt4 { margin-top: 24pt; }
.u-upper { }
.u-dim { opacity: 0.5; }
.text-sm { font-size: var(--fs-sm); }
.w130 { width: 130px; }
.w200 { width: 200px; }
.u-mb1 { margin-bottom: 6pt; }
.u-mb2 { margin-bottom: 12pt; }
.u-mb4 { margin-bottom: 24pt; }
.u-gap1 { gap: 6pt; }
.u-gap2 { gap: 12pt; }
.u-gapxs { gap: 3pt; }
.u-m0 { margin: 0px; }
.u-p1 { padding: 6pt; }
.u-py1 { padding-top: 6pt; padding-bottom: 6pt; }
.u-px1 { padding-left: 6pt; padding-right: 6pt; }
.u-ml1 { margin-left: 6pt; }
.u-mr1 { margin-right: 6pt; }
.u-p2 { padding: 12pt; }
.u-py2 { padding-top: 12pt; padding-bottom: 12pt; }
.u-px2 { padding-left: 12pt; padding-right: 12pt; }
.u-ml2 { margin-left: 12pt; }
.u-p3 { padding: 18pt; }
.u-py3 { padding-top: 18pt; padding-bottom: 18pt; }
.u-p4 { padding: 24pt; }
.ig-1 { line-height: 1.5; }
.ig-2 { width: 100%; box-sizing: border-box; }
.ig-3 { margin: 0px 0px 10px; line-height: 1.5; }
.ig-4 { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-soft); }
.ig-5 { margin: 0px 0px 14px; }
.ig-6 { border: 1px solid var(--border); border-radius: var(--radius); max-height: 280px; background: var(--bg); }
.ig-7 { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.ig-8 { text-transform: none; }
.ig-9 { margin: 12px 0px 0px; }
.ig-10 { flex: 1 1 0%; }
.ig-11 { width: 64px; }
.ig-12 { border-bottom: 1px solid var(--border-soft); }
.ig-14 { background: rgb(255, 255, 255); border-radius: 10px; max-width: 360px; width: 90%; box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 40px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.ig-15 { margin: 0px 0px 4px; color: rgb(26, 39, 51); }
.ig-16 { margin: 0px 0px 14px; color: var(--text); }
.ig-17 { width: 100%; border: 1px solid rgb(214, 219, 224); border-radius: 6px; box-sizing: border-box; }
.ig-18 { color: rgb(192, 57, 43); min-height: 16px; }
.ig-19 { width: 100%; background: rgb(0, 164, 220); color: rgb(255, 255, 255); border: 0px; border-radius: 6px; }
.ig-24 { padding: 2px 0px; }
.ig-34 { margin: -4px 0px 10px; }
.ig-37 { margin: 8px 0px; }
.ig-38 { margin: 4px 0px 0px; }
.ig-39 { text-transform: none; color: var(--text); }
.ig-40 { opacity: 0.6; cursor: default; }
.ig-41 { opacity: 0.5; cursor: default; }
.ig-43 { max-width: 560px; }
.ig-44 { margin: 6px 0px 0px; }
.ig-45 { border-bottom: 2px solid rgb(226, 232, 240); margin: 0px 0px 18px; }
.ig-47 { border-top: 1px solid var(--border); padding-top: 12px; }
.ig-48 { max-width: 620px; }
.ig-50 { border: 1px solid rgb(0, 164, 220); border-radius: 10px; background: rgba(0, 164, 220, 0.06); }
.ig-51 { margin: 0px 0px 4px; }
.ig-56 { margin: 6px 0px 10px; }
.ig-59 { color: var(--danger); }
.ig-60 { border-top: 1px solid var(--border-soft); padding-top: 12px; }
.ig-63 { margin: 0px 0px 12px; }
.ig-64 { background: var(--bg-soft); border-left: 3px solid var(--halo-blue); border-radius: 0 var(--radius) var(--radius) 0; }
.ig-65 { background: var(--bg-soft); border-radius: var(--radius); }
.ig-67 { border-bottom: 1px solid var(--border); }
.ig-69 { margin: 0px 0px 8px; }
.ig-70 { background: var(--bg-soft); }
.ig-71 { border: 1px solid var(--border); border-radius: 8px; background: rgb(255, 255, 255); }
.ig-72 { flex: 1 1 0%; min-width: 240px; }
.ig-73 { width: 100%; margin: 6px 0px; }
.ig-75 { margin: 5px 0px; }
.ig-76 { align-items: end; }
.ig-78 { padding: 4px 0px; }
.ig-80 { margin: 4px 0px 10px; }
.ig-81 { margin: 0px 0px 6px; }
.ig-82 { align-items: baseline; }
.ig-83 { width: 55%; }
.ig-84 { max-width: 700px; }
.ig-85 { width: 280px; }
.ig-89 { border: 1px solid var(--border); border-radius: var(--radius); }
.ig-92 { color: var(--warn); }
.ig-93 { width: 100%; border-collapse: collapse; }
.ig-94 { padding: 7px 0px; width: 35%; }
.ig-95 { padding: 7px 0px; }
.ig-96 { max-width: 240px; }
.ig-104 { background: var(--bg); color: inherit; border-radius: 12px; max-width: 620px; width: 92%; max-height: 80vh; }
.ig-105 { margin-left: auto; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; color: inherit; }
.ig-106 { max-width: 520px; margin: 64px auto; }
.ig-111 { background: var(--bg-soft-2); }
.ig-113 { }
.ig-117 { margin-left: auto; opacity: 0.65; }
.ig-118 { background: rgb(227, 244, 231); color: rgb(45, 138, 62); border-radius: 6px; }
.ig-119 { margin: 22px 0px 10px; }
.ig-120 { padding: 16px 0px; }
.ig-121 { margin: 30px 0px 10px; }
.ig-122 { overflow-x: auto; }
.ig-123 { padding: 18px 0px; }
.ig-124 { margin: 8px 2px; }
.ig-125 { margin: 28px 0px 12px; }
.ig-126 { padding: 14px 0px; }
.ig-127 { margin: 34px 0px 4px; }
.ig-128 { margin: 34px 0px 12px; }
.ig-129 { padding: 10px 0px; }
.ig-130 { border-top: 1px solid var(--border); padding-top: 14px; }
.ig-131 { z-index: 60; }
.ig-132 { max-width: 440px; }
.ig-133 { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; padding-top: 0px; }
.ig-134 { max-width: 520px; }
.ig-135 { max-width: 600px; }
.ig-136 { text-transform: none; }
.ig-137 { color: var(--text-faint); }
.ig-138 { padding: 16px 0px; color: var(--danger); }
.ig-139 { }
.ig-140 { margin-left: auto; }
.ig-141 { background: var(--warn-bg); color: var(--warn); }
.ig-142 { margin: 10px 0px 0px; }
.ig-143 { width: 11px; height: 11px; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top-color: var(--halo-blue); border-radius: 50%; animation: 0.8s linear 0s infinite normal none running spin; vertical-align: -1px; }
.ig-144 { color: var(--text-faint, #8b9197); }
.ig-145 { font-variant-numeric: tabular-nums; }
.ig-146 { border-top: 2px solid var(--border); }
.ig-147 { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font: inherit; }
.ig-148 { color: var(--danger,#b42318); }
.ig-149 { width: 34%; }
.ig-150 { width: 40%; }
.ig-151 { width: 26%; }
.ig-152 { color: var(--ok,#1a7f37); }
.ig-153 { color: var(--text-muted); }
.ig-156 { width: 90px; }
.ig-157 { padding: 6px 0px; }
.ig-158 { width: 110px; }
.ig-159 { width: 120px; }
.ig-160 { width: 200px; }
.ig-161 { width: 220px; }
.ig-162 { width: 150px; }
.ig-163 { max-width: 640px; }
.ig-164 { background: var(--halo-blue); color: white; border: 0px; border-radius: var(--radius); }
.ig-165 { width: 50px; }
.ig-167 { border-radius: 4px; }
.ig-168 { margin: 6px 0px 12px; }
.ig-169 { color: var(--halo-blue); text-decoration: none; }
.ig-170 { padding: 8px 0px; width: 40%; }
.ig-171 { padding: 8px 0px; }
.ig-172 { border-top: 1px solid var(--border-soft); padding-top: 14px; }
.ig-173 { font-family: monospace; }
.ig-174 { padding-top: 6px; }
.ig-175 { margin: 0px 0px 10px; }
.ig-176 { color: var(--ok); }
.ig-177 { background: var(--bg-soft); border-bottom: 1px solid var(--border-soft); }
.ig-178 { position: fixed; bottom: 6px; right: 9px; font: 11px / 1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: rgb(139, 145, 151); background: rgba(255, 255, 255, 0.85); border-radius: 4px; z-index: 99999; pointer-events: none; }
.ig-179 { background: rgb(255, 244, 214); border: 1px solid rgb(224, 179, 74); border-radius: 8px; margin: 0px 0px 12px; }
.ig-180 { margin: 0px 0px 16px; line-height: 1.4; }
.ig-181 { color: var(--text-muted, #666); padding-left: 26px; }
.ig-183 { background: rgb(0, 164, 220); color: rgb(255, 255, 255); border-radius: 8px; text-decoration: none; }
.ig-184 { background: rgb(255, 255, 255); color: rgb(0, 164, 220); border: 1.5px solid rgb(0, 164, 220); border-radius: 8px; text-decoration: none; }
.ig-185 { color: var(--text); }
.ig-186 { font: inherit; border: 1px solid var(--border,#d8dde3); border-radius: 6px; }
.ig-187 { flex-direction: row; }
.ig-188 { width: auto; }
.ig-189 { padding-left: 18px; }
.ig-190 { background: rgb(255, 255, 255); color: var(--halo-blue,#00a4dc); }
.ig-191 { width: 100%; font: inherit; border: 1px solid var(--border,#d8dde3); border-radius: 6px; }
.mm-qual { margin: 0px 0px 14px; }
.mm-qual h4 { margin: 0px 0px 6px; font-size: var(--fs-base); }
.mm-u { display: flex; align-items: baseline; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.mm-u:hover { background: var(--bg-soft); }
.mm-u input { margin: 0px; }
.mm-code { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 110px; }
.mm-t { color: var(--text-muted); }
.mm-note { color: var(--halo-blue,#00a4dc); font-size: var(--fs-base); }
.mm-dim { opacity: 0.5; cursor: not-allowed; }
.mm-dim:hover { background: none; }

/* explicit Add-unit control (Phil 2026-09-30, no magic) */
.picker-input-row { display: flex; gap: 8px; align-items: center; }
.picker-input-row .picker-input { flex: 1 1 auto; width: auto; }
.picker-input-row .unit-add-btn { flex: 0 0 auto; white-space: nowrap; }
.picker-pick-note { color: var(--text-muted); font-size: var(--fs-sm); padding: 6px 11px 2px; }

/* ===== TABLE ALIGNMENT — Phil 2026-10-04 (one rule, every table) =====
   Text (learner names, partner/source names, descriptions) stays LEFT. FUNCTION columns — the ticks (ID, +VOC, +Card, Hold,
   Invoice, Paid, Send, the competent action) — are CENTRED, header select-all UNDER its title. Money is RIGHT (tabular).
   (Correction 10-04: "learner names can all stay to justify left … my formatting comments were about the 'function' actions".) */
.data-table .col-check, .data-table .col-status,
.data-table th:has(> input[type="checkbox"]), .data-table td:has(> input[type="checkbox"]), .data-table td:has(> .cmp-do-i) { text-align: center; }
.data-table th.num, .data-table td.num, .data-table th.u-tar, .data-table td.u-tar, .data-table .col-money { text-align: right; font-variant-numeric: tabular-nums; }
table thead th input[type="checkbox"] { display: block; margin: 4px auto 0; }

/* v0.3.73: ONE table class (Phil 2026-10-04: "how can there be a different class for the same look and feel?"). The forks
   .kp-ltable / .imp-map-tbl / .outcomes-grid / .audit-records-table / .ig-13 / .ig-112 are gone — every list or form grid is
   .data-table (+ .list-tight widths, + .form-rows editing). Status words keep their colour, never a pill. */
.data-table.form-rows td select, .data-table.form-rows td input[type="text"] { width: 100%; margin: 0px; padding: 4px 6px; font-size: var(--fs-base); }

/* ONE Brisbane clock, centred between the breadcrumb and the user menu in every page's top bar (Phil 2026-10-04). */
.app-header { position: relative; }
.hdr-clock { position: absolute; left: 50%; transform: translateX(-50%); color: var(--text-muted); font-size: var(--fs-base); white-space: nowrap; pointer-events: none; }
.hdr-clock strong { color: var(--text); font-weight: 600; }
@media (max-width: 1100px) { .hdr-clock { display: none; } }
.hdr-clock-warn { color: var(--warn); }

/* ONE status word (Phil 2026-10-04: "Paid capital 'P'. Active capital 'A' for all"): every status chip reads as a word with a capital
   first letter — never ALL CAPS, never lower case — whatever the stored value. Ticks stay ticks (✓). */
.badge::first-letter, .status-badge::first-letter, .kind-badge::first-letter, .kp-lock::first-letter { text-transform: uppercase; }

/* Partner header action row (All to invoice + Close & issue invoice) — every item on the line centred vertically (Phil 2026-10-04). */
.kp-pact { display: flex; align-items: center; gap: 12px; }
.kp-pact input[type="checkbox"], .kp-pact .btn { margin: 0; vertical-align: middle; }