/* ==========================================================================
   HAL UI v2 - design tokens + base + shell + components
   Proposed path in repo: static/hal/css/hal.css   (namespaced: --hal-*, .hal-*)
   Rules honoured: no hardcoded colours outside the token blocks below; every
   component reads var(--hal-*). Light + dark both defined. WCAG 2.2 AA verified
   (see PLAN.md contrast table).
   ========================================================================== */

/* ---------- 1. TOKENS: colour (light default) ---------- */
:root {
  color-scheme: light;
  --hal-bg:            #f6f7f9;
  --hal-surface:       #ffffff;
  --hal-surface-2:     #eef1f5;   /* zebra, table head, inset areas */
  --hal-overlay:       rgb(15 23 42 / 0.55);
  --hal-text:          #111827;
  --hal-text-muted:    #4b5563;   /* secondary copy, descriptions (was --card-desc) */
  --hal-text-subtle:   #5b6472;   /* hints, timestamps - still >= 4.5:1 */
  --hal-border:        #d0d5dd;   /* decorative dividers only */
  --hal-border-strong: #7b8494;   /* input/control borders (>= 3:1) */
  --hal-primary:       #1d4ed8;   /* fills + focus ring */
  --hal-primary-hover: #1e40af;
  --hal-on-primary:    #ffffff;
  --hal-link:          #1d4ed8;
  --hal-primary-soft:  #e0e9ff;
  --hal-primary-soft-text: #1e3a8a;
  --hal-danger:        #b91c1c;
  --hal-danger-hover:  #991b1b;
  --hal-on-danger:     #ffffff;
  --hal-focus:         #1d4ed8;
  --hal-success-bg: #dcfce7; --hal-success-text: #14532d;
  --hal-warning-bg: #fef3c7; --hal-warning-text: #713f12;
  --hal-danger-bg:  #fee2e2; --hal-danger-text:  #991b1b;
  --hal-info-bg:    #dbeafe; --hal-info-text:    #1e3a8a;
  --hal-neutral-bg: #e5e7eb; --hal-neutral-text: #374151;
  --hal-nav-bg:        #0f172a;
  --hal-nav-text:      #e2e8f0;
  --hal-nav-muted:     #a9b6ca;
  --hal-nav-hover:     #1e293b;
  --hal-nav-active:    #23324d;
  --hal-nav-border:    #26344d;
  --hal-shadow-1: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.08);
  --hal-shadow-2: 0 4px 12px rgb(15 23 42 / 0.10), 0 2px 4px rgb(15 23 42 / 0.06);
  --hal-shadow-3: 0 16px 40px rgb(15 23 42 / 0.20);
}

/* ---------- dark: explicit choice ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --hal-bg:            #0b1220;
  --hal-surface:       #111a2c;
  --hal-surface-2:     #182338;
  --hal-overlay:       rgb(0 0 0 / 0.65);
  --hal-text:          #e6edf7;
  --hal-text-muted:    #a9b6ca;
  --hal-text-subtle:   #93a1b8;
  --hal-border:        #2a3850;
  --hal-border-strong: #6f809a;
  --hal-primary:       #2563eb;
  --hal-primary-hover: #1d4ed8;
  --hal-on-primary:    #ffffff;
  --hal-link:          #7db2ff;
  --hal-primary-soft:  #1a2f5e;
  --hal-primary-soft-text: #c7dbff;
  --hal-danger:        #dc2626;
  --hal-danger-hover:  #b91c1c;
  --hal-on-danger:     #ffffff;
  --hal-focus:         #93c5fd;
  --hal-success-bg: #0f3d24; --hal-success-text: #86efac;
  --hal-warning-bg: #43310a; --hal-warning-text: #fde68a;
  --hal-danger-bg:  #4c1414; --hal-danger-text:  #fecaca;
  --hal-info-bg:    #132f5c; --hal-info-text:    #bfdbfe;
  --hal-neutral-bg: #263247; --hal-neutral-text: #d1d9e6;
  --hal-nav-bg:        #0a101d;
  --hal-nav-text:      #e2e8f0;
  --hal-nav-muted:     #a9b6ca;
  --hal-nav-hover:     #162035;
  --hal-nav-active:    #1d2c48;
  --hal-nav-border:    #1c2940;
  --hal-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --hal-shadow-2: 0 4px 12px rgb(0 0 0 / 0.45);
  --hal-shadow-3: 0 16px 40px rgb(0 0 0 / 0.6);
}

/* ---------- dark: follow OS unless user forced light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --hal-bg: #0b1220; --hal-surface: #111a2c; --hal-surface-2: #182338;
    --hal-overlay: rgb(0 0 0 / 0.65);
    --hal-text: #e6edf7; --hal-text-muted: #a9b6ca; --hal-text-subtle: #93a1b8;
    --hal-border: #2a3850; --hal-border-strong: #6f809a;
    --hal-primary: #2563eb; --hal-primary-hover: #1d4ed8; --hal-on-primary: #ffffff;
    --hal-link: #7db2ff; --hal-primary-soft: #1a2f5e; --hal-primary-soft-text: #c7dbff;
    --hal-danger: #dc2626; --hal-danger-hover: #b91c1c; --hal-on-danger: #ffffff;
    --hal-focus: #93c5fd;
    --hal-success-bg: #0f3d24; --hal-success-text: #86efac;
    --hal-warning-bg: #43310a; --hal-warning-text: #fde68a;
    --hal-danger-bg: #4c1414; --hal-danger-text: #fecaca;
    --hal-info-bg: #132f5c; --hal-info-text: #bfdbfe;
    --hal-neutral-bg: #263247; --hal-neutral-text: #d1d9e6;
    --hal-nav-bg: #0a101d; --hal-nav-text: #e2e8f0; --hal-nav-muted: #a9b6ca;
    --hal-nav-hover: #162035; --hal-nav-active: #1d2c48; --hal-nav-border: #1c2940;
    --hal-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --hal-shadow-2: 0 4px 12px rgb(0 0 0 / 0.45);
    --hal-shadow-3: 0 16px 40px rgb(0 0 0 / 0.6);
  }
}

/* ---------- 2. TOKENS: non-colour (theme independent) ---------- */
:root {
  /* spacing: 4px base */
  --hal-space-1: 0.25rem; --hal-space-2: 0.5rem;  --hal-space-3: 0.75rem;
  --hal-space-4: 1rem;    --hal-space-5: 1.5rem;  --hal-space-6: 2rem;
  --hal-space-7: 3rem;    --hal-space-8: 4rem;
  /* radius */
  --hal-radius-sm: 6px; --hal-radius: 10px; --hal-radius-lg: 14px; --hal-radius-pill: 999px;
  /* type: system stack only (no web fonts, no external requests) */
  --hal-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hal-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hal-text-xs: 0.75rem;  --hal-text-sm: 0.875rem; --hal-text-base: 1rem;
  --hal-text-lg: 1.125rem; --hal-text-xl: 1.375rem; --hal-text-2xl: 1.75rem; --hal-text-3xl: 2.25rem;
  --hal-leading: 1.5; --hal-leading-tight: 1.25;
  /* layout */
  --hal-sidebar-w: 15rem; --hal-sidebar-w-collapsed: 4rem; --hal-topbar-h: 3.5rem;
  --hal-content-max: 90rem;
  --hal-target: 2.5rem;             /* min interactive size (>= 24px WCAG 2.2, 40px comfortable) */
  --hal-z-nav: 100; --hal-z-drawer: 300; --hal-z-menu: 400; --hal-z-modal: 500; --hal-z-toast: 600;
  --hal-ease: 150ms ease;
}

/* ---------- 3. BASE ---------- */
.hal-ui *, .hal-ui *::before, .hal-ui *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.hal-ui body, body.hal-ui {
  margin: 0; background: var(--hal-bg); color: var(--hal-text);
  font: var(--hal-text-base)/var(--hal-leading) var(--hal-font);
}
:where(.hal-ui) :is(h1, h2, h3) { line-height: var(--hal-leading-tight); margin: 0; }
:where(.hal-ui) h1 { font-size: var(--hal-text-2xl); font-weight: 650; }
:where(.hal-ui) h2 { font-size: var(--hal-text-xl);  font-weight: 620; }
:where(.hal-ui) h3 { font-size: var(--hal-text-lg);  font-weight: 600; }
.hal-ui p { margin: 0; }
:where(.hal-ui) a { color: var(--hal-link); text-underline-offset: 2px; }
.hal-ui code, .hal-ui kbd { font-family: var(--hal-font-mono); font-size: 0.9em; }
.hal-ui kbd { background: var(--hal-surface-2); border: 1px solid var(--hal-border-strong); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 0.35em; color: var(--hal-text); }

.hal-ui :focus-visible { outline: 2px solid var(--hal-focus); outline-offset: 2px; border-radius: 4px; }
.hal-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hal-skip { position: absolute; left: var(--hal-space-3); top: -4rem; z-index: 1000; background: var(--hal-primary);
  color: var(--hal-on-primary); padding: var(--hal-space-2) var(--hal-space-4); border-radius: var(--hal-radius-sm); }
.hal-skip:focus { top: var(--hal-space-3); }
.hal-icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .hal-ui *, .hal-ui *::before, .hal-ui *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 4. APP SHELL (sidebar + topbar + main) ---------- */
.hal-shell { display: grid; grid-template-columns: var(--hal-sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.hal-shell[data-nav="collapsed"] { grid-template-columns: var(--hal-sidebar-w-collapsed) minmax(0, 1fr); }

.hal-sidebar { background: var(--hal-nav-bg); color: var(--hal-nav-text); position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; border-right: 1px solid var(--hal-nav-border); z-index: var(--hal-z-nav); overflow: hidden; }
.hal-sidebar-head { display: flex; align-items: center; height: var(--hal-topbar-h); border-bottom: 1px solid var(--hal-nav-border); padding-right: var(--hal-space-2); flex: none; }
.hal-brand { display: flex; align-items: center; gap: var(--hal-space-3); padding: 0 var(--hal-space-4); flex: 1; min-width: 0;
  height: 100%; color: var(--hal-nav-text); text-decoration: none; font-weight: 650; }
.hal-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.hal-brand-text small { font-size: var(--hal-text-xs); font-weight: 500; opacity: 0.75; }
.hal-card--link:hover .hal-tool-title { color: var(--hal-link); }
.hal-brand-mark { width: 2rem; height: 2rem; border-radius: var(--hal-radius-sm); background: var(--hal-primary); color: var(--hal-on-primary);
  display: grid; place-items: center; font-weight: 800; flex: none; }
.hal-nav { flex: 1; overflow-y: auto; padding: var(--hal-space-3) var(--hal-space-2); }
.hal-nav-group { margin-bottom: var(--hal-space-4); }
.hal-nav-label { padding: var(--hal-space-1) var(--hal-space-3); font-size: var(--hal-text-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--hal-nav-muted); font-weight: 600; }
.hal-nav a { display: flex; align-items: center; gap: var(--hal-space-3); min-height: var(--hal-target); padding: 0 var(--hal-space-3);
  color: var(--hal-nav-text); text-decoration: none; border-radius: var(--hal-radius-sm); font-size: var(--hal-text-sm); }
.hal-nav a:hover { background: var(--hal-nav-hover); }
.hal-nav a[aria-current="page"] { background: var(--hal-nav-active); font-weight: 600; box-shadow: inset 3px 0 0 var(--hal-focus); }
.hal-sidebar :focus-visible { outline-color: var(--hal-nav-text); }
.hal-shell[data-nav="collapsed"] .hal-nav-label,
.hal-shell[data-nav="collapsed"] .hal-nav a span,
.hal-shell[data-nav="collapsed"] .hal-brand span:not(.hal-brand-mark) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hal-shell[data-nav="collapsed"] .hal-nav a { justify-content: center; padding: 0; }

.hal-main-col { min-width: 0; display: flex; flex-direction: column; }
.hal-topbar { position: sticky; top: 0; z-index: calc(var(--hal-z-nav) - 1); height: var(--hal-topbar-h); display: flex; align-items: center; gap: var(--hal-space-3);
  padding: 0 var(--hal-space-5); background: var(--hal-surface); border-bottom: 1px solid var(--hal-border); }
.hal-topbar-title { font-weight: 600; font-size: var(--hal-text-base); margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hal-menu-btn { display: none; }
.hal-user-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hal-main { width: 100%; max-width: var(--hal-content-max); margin: 0 auto; padding: var(--hal-space-5); }
.hal-page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--hal-space-3); margin-bottom: var(--hal-space-5); }
.hal-page-head p { color: var(--hal-text-muted); margin-top: var(--hal-space-1); }
.hal-breadcrumb { font-size: var(--hal-text-sm); color: var(--hal-text-muted); margin-bottom: var(--hal-space-1); }
.hal-breadcrumb a { color: inherit; }

.hal-scrim { display: none; }
@media (max-width: 62rem) {
  .hal-shell, .hal-shell[data-nav="collapsed"] { grid-template-columns: minmax(0, 1fr); }
  .hal-sidebar { position: fixed; inset: 0 auto 0 0; width: min(18rem, 86vw); transform: translateX(-100%); transition: transform var(--hal-ease); z-index: var(--hal-z-drawer); }
  .hal-shell[data-drawer="open"] .hal-sidebar { transform: none; box-shadow: var(--hal-shadow-3); }
  .hal-shell[data-drawer="open"] .hal-scrim { display: block; position: fixed; inset: 0; background: var(--hal-overlay); z-index: calc(var(--hal-z-drawer) - 1); }
  .hal-menu-btn { display: inline-flex; }
  .hal-main { padding: var(--hal-space-4); }
  .hal-topbar { padding: 0 var(--hal-space-4); }
  .hal-user-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hal-collapse-btn { display: none !important; }
  /* drawer is never "collapsed" visually */
  .hal-shell[data-nav="collapsed"] .hal-nav-label, .hal-shell[data-nav="collapsed"] .hal-nav a span,
  .hal-shell[data-nav="collapsed"] .hal-brand span:not(.hal-brand-mark) { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .hal-shell[data-nav="collapsed"] .hal-nav a { justify-content: flex-start; padding: 0 var(--hal-space-3); }
}

/* ---------- 5. BUTTONS ---------- */
.hal-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--hal-space-2); min-height: var(--hal-target);
  padding: 0 var(--hal-space-4); border-radius: var(--hal-radius-sm); border: 1px solid var(--hal-border-strong); background: var(--hal-surface);
  color: var(--hal-text); font: inherit; font-size: var(--hal-text-sm); font-weight: 550; cursor: pointer; text-decoration: none; transition: background var(--hal-ease), border-color var(--hal-ease); }
.hal-btn:hover { background: var(--hal-surface-2); }
.hal-btn[disabled], .hal-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.hal-btn--primary { background: var(--hal-primary); border-color: var(--hal-primary); color: var(--hal-on-primary); }
.hal-btn--primary:hover { background: var(--hal-primary-hover); }
.hal-btn--danger { background: var(--hal-danger); border-color: var(--hal-danger); color: var(--hal-on-danger); }
.hal-btn--danger:hover { background: var(--hal-danger-hover); }
.hal-btn--ghost { background: transparent; border-color: transparent; }
.hal-btn--ghost:hover { background: var(--hal-surface-2); }
.hal-btn--sm { min-height: 2rem; padding: 0 var(--hal-space-3); }
.hal-btn--icon { width: var(--hal-target); padding: 0; }
.hal-nav-btn { color: var(--hal-nav-text); }

/* ---------- 6. FORMS ---------- */
.hal-field { display: grid; gap: var(--hal-space-1); }
.hal-label { font-size: var(--hal-text-sm); font-weight: 600; color: var(--hal-text); }
.hal-hint { font-size: var(--hal-text-xs); color: var(--hal-text-subtle); }
.hal-error-text { font-size: var(--hal-text-xs); color: var(--hal-danger-text); font-weight: 600; }
.hal-input, .hal-select, .hal-textarea { width: 100%; min-height: var(--hal-target); padding: 0 var(--hal-space-3); background: var(--hal-surface);
  color: var(--hal-text); border: 1px solid var(--hal-border-strong); border-radius: var(--hal-radius-sm); font: inherit; font-size: var(--hal-text-sm); }
.hal-textarea { padding: var(--hal-space-2) var(--hal-space-3); min-height: 5rem; resize: vertical; }
.hal-input::placeholder { color: var(--hal-text-subtle); opacity: 1; }
.hal-input:hover, .hal-select:hover, .hal-textarea:hover { border-color: var(--hal-text-muted); }
.hal-input:focus-visible, .hal-select:focus-visible, .hal-textarea:focus-visible { outline: 2px solid var(--hal-focus); outline-offset: 0; border-color: var(--hal-focus); }
.hal-input[aria-invalid="true"] { border-color: var(--hal-danger); }
.hal-input--sm, .hal-select--sm { min-height: 2rem; font-size: var(--hal-text-xs); }
.hal-check { display: inline-flex; align-items: center; gap: var(--hal-space-2); min-height: var(--hal-target); font-size: var(--hal-text-sm); cursor: pointer; }
.hal-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--hal-primary); }
.hal-search { position: relative; }
.hal-search .hal-icon { position: absolute; left: var(--hal-space-3); top: 50%; translate: 0 -50%; color: var(--hal-text-subtle); pointer-events: none; }
.hal-search .hal-input { padding-left: 2.25rem; }

/* ---------- 7. CARDS, BADGES, STATS, ALERTS, EMPTY ---------- */
.hal-card { background: var(--hal-surface); border: 1px solid var(--hal-border); border-radius: var(--hal-radius); box-shadow: var(--hal-shadow-1); }
.hal-card-body { padding: var(--hal-space-5); }
.hal-card--link { display: flex; flex-direction: column; gap: var(--hal-space-2); padding: var(--hal-space-4); color: inherit; text-decoration: none;
  transition: box-shadow var(--hal-ease), border-color var(--hal-ease), translate var(--hal-ease); height: 100%; }
.hal-card--link:hover { box-shadow: var(--hal-shadow-2); border-color: var(--hal-border-strong); translate: 0 -2px; }
.hal-card--link[aria-disabled="true"] { opacity: 0.7; cursor: not-allowed; }
.hal-card--link[aria-disabled="true"]:hover { translate: none; box-shadow: var(--hal-shadow-1); border-color: var(--hal-border); }

.hal-badge { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.1rem 0.6rem; border-radius: var(--hal-radius-pill); font-size: var(--hal-text-xs); font-weight: 600;
  background: var(--hal-neutral-bg); color: var(--hal-neutral-text); white-space: nowrap; }
.hal-badge::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; } /* shape cue: never colour alone */
.hal-badge--success { background: var(--hal-success-bg); color: var(--hal-success-text); }
.hal-badge--warning { background: var(--hal-warning-bg); color: var(--hal-warning-text); }
.hal-badge--danger  { background: var(--hal-danger-bg);  color: var(--hal-danger-text); }
.hal-badge--info    { background: var(--hal-info-bg);    color: var(--hal-info-text); }
.hal-badge--plain::before { display: none; }

.hal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--hal-space-3); margin-bottom: var(--hal-space-5); }
.hal-stat { padding: var(--hal-space-4); }
.hal-stat-value { font-size: var(--hal-text-2xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hal-stat-label { font-size: var(--hal-text-sm); color: var(--hal-text-muted); }

.hal-alert { display: flex; gap: var(--hal-space-3); padding: var(--hal-space-3) var(--hal-space-4); border-radius: var(--hal-radius-sm); border: 1px solid currentColor; font-size: var(--hal-text-sm); }
.hal-alert--info { background: var(--hal-info-bg); color: var(--hal-info-text); }
.hal-alert--danger { background: var(--hal-danger-bg); color: var(--hal-danger-text); }
.hal-alert--success { background: var(--hal-success-bg); color: var(--hal-success-text); }
.hal-alert--warning { background: var(--hal-warning-bg); color: var(--hal-warning-text); }

.hal-empty { text-align: center; padding: var(--hal-space-7) var(--hal-space-4); color: var(--hal-text-muted); }
.hal-empty .hal-icon { width: 2.5rem; height: 2.5rem; margin-bottom: var(--hal-space-2); color: var(--hal-text-subtle); }
.hal-empty h3 { color: var(--hal-text); margin-bottom: var(--hal-space-1); }
.hal-skeleton { background: linear-gradient(90deg, var(--hal-surface-2), var(--hal-border), var(--hal-surface-2)); background-size: 200% 100%;
  animation: hal-shimmer 1.2s linear infinite; border-radius: var(--hal-radius-sm); height: 1rem; }
@keyframes hal-shimmer { to { background-position: -200% 0; } }

/* ---------- 8. MENUS / MODAL / TOAST / PAGINATION / TABS ---------- */
.hal-menu-wrap { position: relative; display: inline-block; }
.hal-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 14rem; max-height: 22rem; overflow: auto; z-index: var(--hal-z-menu);
  background: var(--hal-surface); color: var(--hal-text); border: 1px solid var(--hal-border-strong); border-radius: var(--hal-radius); box-shadow: var(--hal-shadow-2); padding: var(--hal-space-2); }
.hal-menu[hidden] { display: none; }
.hal-menu-item { display: flex; align-items: center; gap: var(--hal-space-2); width: 100%; min-height: 2.25rem; padding: 0 var(--hal-space-3); background: none; border: 0;
  color: inherit; font: inherit; font-size: var(--hal-text-sm); text-align: left; border-radius: var(--hal-radius-sm); cursor: pointer; }
.hal-menu-item:hover { background: var(--hal-surface-2); }
.hal-menu-item[aria-pressed="true"] { background: var(--hal-primary-soft); color: var(--hal-primary-soft-text); font-weight: 600; }
.hal-menu-heading { padding: var(--hal-space-1) var(--hal-space-3); font-size: var(--hal-text-xs); color: var(--hal-text-subtle); text-transform: uppercase; letter-spacing: 0.05em; }

dialog.hal-modal { border: 1px solid var(--hal-border); border-radius: var(--hal-radius-lg); background: var(--hal-surface); color: var(--hal-text);
  box-shadow: var(--hal-shadow-3); padding: 0; width: min(34rem, calc(100vw - 2rem)); }
dialog.hal-modal::backdrop { background: var(--hal-overlay); }
.hal-modal-head, .hal-modal-foot { padding: var(--hal-space-4) var(--hal-space-5); }
.hal-modal-head { border-bottom: 1px solid var(--hal-border); display: flex; justify-content: space-between; align-items: center; }
.hal-modal-body { padding: var(--hal-space-5); }
.hal-modal-foot { border-top: 1px solid var(--hal-border); display: flex; justify-content: flex-end; gap: var(--hal-space-2); }

.hal-toasts { position: fixed; right: var(--hal-space-4); bottom: var(--hal-space-4); display: grid; gap: var(--hal-space-2); z-index: var(--hal-z-toast); max-width: min(24rem, calc(100vw - 2rem)); }
.hal-toast { padding: var(--hal-space-3) var(--hal-space-4); border-radius: var(--hal-radius-sm); background: var(--hal-nav-bg); color: var(--hal-nav-text);
  border-left: 4px solid var(--hal-focus); box-shadow: var(--hal-shadow-2); font-size: var(--hal-text-sm); }
.hal-toast--error { border-left-color: var(--hal-danger-text); }
.hal-toast--success { border-left-color: var(--hal-success-text); }

.hal-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hal-space-2); justify-content: space-between; padding: var(--hal-space-3) var(--hal-space-4); border-top: 1px solid var(--hal-border); font-size: var(--hal-text-sm); color: var(--hal-text-muted); }
.hal-pagination-nav { display: flex; align-items: center; gap: var(--hal-space-1); }

.hal-chips { display: flex; flex-wrap: wrap; gap: var(--hal-space-2); }
.hal-chip { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--hal-space-3); border-radius: var(--hal-radius-pill); border: 1px solid var(--hal-border-strong);
  background: var(--hal-surface); color: var(--hal-text); font: inherit; font-size: var(--hal-text-sm); cursor: pointer; }
.hal-chip[aria-pressed="true"] { background: var(--hal-primary-soft); color: var(--hal-primary-soft-text); border-color: var(--hal-primary); font-weight: 600; }

/* ---------- 9. LANDING (portal) ---------- */
.hal-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--hal-space-4); }
.hal-tool-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--hal-radius-sm); background: var(--hal-primary-soft); color: var(--hal-primary-soft-text); display: grid; place-items: center; }
.hal-tool-head { display: flex; align-items: center; gap: var(--hal-space-3); }
.hal-tool-title { font-weight: 620; font-size: var(--hal-text-base); }
.hal-tool-desc { color: var(--hal-text-muted); font-size: var(--hal-text-sm); }
.hal-section-title { font-size: var(--hal-text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--hal-text-muted); margin: var(--hal-space-6) 0 var(--hal-space-3); }
.hal-tool { position: relative; list-style: none; }
.hal-tool .hal-card--link { padding-right: 3.25rem; }
.hal-pin { position: absolute; top: var(--hal-space-2); right: var(--hal-space-2); }
.hal-pin[aria-pressed="true"] { color: var(--hal-primary-soft-text); background: var(--hal-primary-soft); }
.hal-pin[aria-pressed="true"] .hal-icon { fill: currentColor; }
.hal-tools-list { list-style: none; margin: 0; padding: 0; }
.hal-coming { margin-left: 0; }

/* tabs (WAI-ARIA tabs pattern, roving tabindex handled in page script) */
.hal-tabs { display: flex; gap: var(--hal-space-1); border-bottom: 1px solid var(--hal-border); margin-bottom: var(--hal-space-4); }
.hal-tab { background: none; border: 0; border-bottom: 3px solid transparent; padding: var(--hal-space-3) var(--hal-space-4); font: inherit; font-size: var(--hal-text-sm); font-weight: 600; color: var(--hal-text-muted); cursor: pointer; min-height: var(--hal-target); }
.hal-tab:hover { color: var(--hal-text); }
.hal-tab[aria-selected="true"] { color: var(--hal-primary-soft-text); border-bottom-color: var(--hal-primary); }
.hal-theme-note { font-size: var(--hal-text-xs); color: var(--hal-text-subtle); }

/* ---------- 10. DATA TABLE (used by hal-table.js) ---------- */
.hal-dt { --dt-pad-y: 0.6rem; }
.hal-dt-toolbar { display: flex; flex-wrap: wrap; gap: var(--hal-space-2); align-items: center; padding: var(--hal-space-3) var(--hal-space-4); border-bottom: 1px solid var(--hal-border); }
.hal-dt-toolbar .hal-search { flex: 1 1 14rem; max-width: 24rem; }
.hal-dt-spacer { flex: 1; }
.hal-dt-toolbar--flush { border-bottom: 0; padding-bottom: 0; }
.hal-select--auto { width: auto; }
.hal-check--menu { display: flex; padding: 0 var(--hal-space-2); }
.hal-dt-scroll { overflow: auto; max-height: min(70vh, 48rem); position: relative; }
.hal-dt-scroll:focus-visible { outline-offset: -2px; }
table.hal-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--hal-text-sm); font-variant-numeric: tabular-nums; }
.hal-table caption { text-align: left; padding: var(--hal-space-2) var(--hal-space-4); color: var(--hal-text-muted); font-size: var(--hal-text-xs); caption-side: bottom; }
.hal-table th, .hal-table td { padding: var(--dt-pad-y) var(--hal-space-3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--hal-border); }
.hal-table thead th { position: sticky; background: var(--hal-surface-2); z-index: 2; font-weight: 650; white-space: nowrap; }
.hal-table thead tr:first-child th { top: 0; }
.hal-table thead tr.hal-dt-filters th { top: var(--dt-head-h, 2.75rem); padding: var(--hal-space-1) var(--hal-space-2); font-weight: 400; z-index: 1; }
.hal-table tbody tr:hover td { background: var(--hal-surface-2); }
.hal-table td.is-num, .hal-table th.is-num { text-align: right; }
.hal-table th.is-num .hal-th-btn { flex-direction: row-reverse; }
.hal-th-btn { display: inline-flex; align-items: center; gap: var(--hal-space-1); background: none; border: 0; color: inherit; font: inherit; font-weight: 650; cursor: pointer; padding: 0.25rem 0.35rem; margin: -0.25rem -0.35rem; border-radius: var(--hal-radius-sm); }
.hal-th-btn:hover { background: var(--hal-border); }
.hal-sort-ind { display: inline-grid; width: 1em; color: var(--hal-text-subtle); }
.hal-sort-ind svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
th[aria-sort="ascending"] .hal-sort-ind, th[aria-sort="descending"] .hal-sort-ind { color: var(--hal-primary-soft-text); }
th[aria-sort="ascending"] .hal-sort-ind .dn, th[aria-sort="descending"] .hal-sort-ind .up { display: none; }
th[aria-sort="none"] .hal-sort-ind { opacity: 0.7; }
.hal-sort-rank { font-size: 0.65rem; font-weight: 700; }
.hal-dt-filters .hal-input, .hal-dt-filters .hal-select { min-height: 1.85rem; font-size: var(--hal-text-xs); padding: 0 var(--hal-space-2); min-width: 5.5rem; }
.hal-dt-filters .hal-input[data-active="true"], .hal-dt-filters .hal-select[data-active="true"] { border-color: var(--hal-primary); background: var(--hal-primary-soft); color: var(--hal-primary-soft-text); }
.hal-dt-status { font-size: var(--hal-text-sm); color: var(--hal-text-muted); }
.hal-dt-state td { text-align: center; }
.hal-dt-pin { position: sticky; left: 0; z-index: 1; background: var(--hal-surface); }
.hal-table thead th.hal-dt-pin { z-index: 3; background: var(--hal-surface-2); }
.hal-table tbody tr:hover td.hal-dt-pin { background: var(--hal-surface-2); }
.hal-dt[data-loading="true"] .hal-dt-scroll { opacity: 0.6; }
.hal-dt-num-filter { display: grid; gap: 2px; }

/* narrow screens: optional card layout when table has data-responsive="cards" */
@media (max-width: 40rem) {
  .hal-dt[data-responsive="cards"] table.hal-table, .hal-dt[data-responsive="cards"] .hal-table tbody, .hal-dt[data-responsive="cards"] .hal-table tr, .hal-dt[data-responsive="cards"] .hal-table td { display: block; width: 100%; }
  .hal-dt[data-responsive="cards"] .hal-table thead tr.hal-dt-head-row { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hal-dt[data-responsive="cards"] .hal-table thead tr.hal-dt-filters { display: flex; flex-wrap: wrap; }
  .hal-dt[data-responsive="cards"] .hal-table thead tr.hal-dt-filters th { display: block; flex: 1 1 8rem; position: static; }
  .hal-dt[data-responsive="cards"] .hal-table tbody tr { border: 1px solid var(--hal-border); border-radius: var(--hal-radius); margin: var(--hal-space-3); width: auto; }
  .hal-dt[data-responsive="cards"] .hal-table td { display: grid; grid-template-columns: 8rem 1fr; gap: var(--hal-space-2); text-align: left !important; }
  .hal-dt[data-responsive="cards"] .hal-table td::before { content: attr(data-label); font-weight: 600; color: var(--hal-text-muted); }
}

/* ---------- 11. UTILITIES ---------- */
.hal-row { display: flex; flex-wrap: wrap; gap: var(--hal-space-3); align-items: center; }
.hal-mt-4 { margin-top: var(--hal-space-4); } .hal-mb-4 { margin-bottom: var(--hal-space-4); }
.hal-muted { color: var(--hal-text-muted); }
.hal-mono { font-family: var(--hal-font-mono); }
/* .hal-ui scope keeps [hidden] from leaking into legacy pages */
.hal-ui [hidden] { display: none !important; }
@media print { .hal-sidebar, .hal-topbar, .hal-dt-toolbar, .hal-pagination, .hal-dt-filters { display: none !important; } .hal-shell { display: block; } }

/* icon sprite holder (inline <svg><symbol/></svg> at top of <body>) */
.hal-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hal-sidebar-foot { padding: var(--hal-space-2); border-top: 1px solid var(--hal-nav-border); margin: 0; display: flex; justify-content: flex-end; }
.hal-shell[data-nav="collapsed"] .hal-collapse-btn .hal-icon { rotate: 180deg; }
.hal-menu a.hal-menu-item { text-decoration: none; color: inherit; }
.hal-coming { align-self: flex-start; }

/* Section sub-navigation: link tabs shown under the page header of a multi-page app. */
a.hal-tab { display: inline-flex; align-items: center; text-decoration: none; }
a.hal-tab[aria-current="page"] { color: var(--hal-primary-soft-text); border-bottom-color: var(--hal-primary); }
.hal-tabs { overflow-x: auto; }
.hal-tab { white-space: nowrap; }
.hal-num { text-align: right; font-variant-numeric: tabular-nums; }

/* top collapse toggle: replaces the brand mark when the rail is collapsed so it can always be re-expanded from the top */
.hal-shell[data-nav="collapsed"] .hal-sidebar-head { justify-content: center; padding-right: 0; }
.hal-shell[data-nav="collapsed"] .hal-sidebar-head .hal-brand { display: none; }
.hal-collapse-btn--top { flex: none; color: var(--hal-nav-text); }