/* ============================================================================
   iso-ui.css  -  ISO27k Suite presentation layer (rebuild 2026-06-30)

   A portfolio-grade restyle for an ISO 27001 governance platform. Purely
   ADDITIVE and presentation-only: it adds a type system, a polarity-aware
   semantic colour ramp, a component language (pills, tables, drawers,
   skeletons, KPIs, the assurance ring) and motion, by refining the existing
   shared classes (.card-custom / .card-stat / .table-dark / .btn-* / .badge /
   .severity-* / .form-control / .top-bar). Because those classes are used on
   every screen, every screen lifts. No markup is required for the baseline
   restyle; high-value screens add iso-* components on top.

   Loaded AFTER base.html inline styles and falcon-shell.css, so it wins on
   equal specificity. Brand chrome (navy sidebar/topbar + copper accent) is
   preserved. Australian English, no em dashes.

   TOKEN SYSTEM
   - Type:  IBM Plex Sans (UI/headings) + IBM Plex Mono (machine data: finding
            IDs, ARNs, control codes, timestamps, KPI numerals). A coherent
            technical superfamily, chosen over the Inter default and over any
            serif. Mono numerals read as evidence.
   - Brand: navy #1d1934 chrome, copper #9f6a43 / #c58e5a accent (active/brand
            only, never a status colour).
   - Polarity ramp (status only, AA in both themes, always paired with an
            icon and a text label, never colour alone):
              alarm (critical)  crimson
              warn  (high)      amber
              caution (medium)  ochre
              info  (low)       steel blue
              neutral (info)    slate
              positive (confirmed / implemented / zero-gap)  green
   - Signature: the assurance ring (.iso-ring), a radial gauge of ISO 27001
            control readiness with a mono count-up centre.
   ========================================================================== */

/* ---- Fonts (loaded via <link> in base.html); set the family vars ---------- */
:root {
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "IBM Plex Sans", var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (1.2 minor third, base 1rem). */
  --t-eyebrow: 0.72rem;
  --t-caption: 0.78rem;
  --t-body: 0.94rem;
  --t-h6: 1rem;
  --t-h5: 1.15rem;
  --t-h4: 1.35rem;
  --t-h3: 1.6rem;
  --t-display: 2.4rem;

  /* Elevation refinement (cooler, calmer than the default). */
  --iso-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --iso-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Polarity-aware semantic ramp (LIGHT) --------------------------------- */
:root, [data-theme="light"] {
  --alarm:   #c0143c;  --alarm-soft:   rgba(192, 20, 60, 0.10);  --alarm-line:   rgba(192, 20, 60, 0.28);
  --warn:    #c25a08;  --warn-soft:    rgba(194, 90, 8, 0.10);   --warn-line:    rgba(194, 90, 8, 0.26);
  --caution: #9a6b00;  --caution-soft: rgba(154, 107, 0, 0.12);  --caution-line: rgba(154, 107, 0, 0.26);
  --info:    #1f6fb2;  --info-soft:    rgba(31, 111, 178, 0.10); --info-line:    rgba(31, 111, 178, 0.26);
  --neutral: #51607c;  --neutral-soft: rgba(81, 96, 124, 0.10);  --neutral-line: rgba(81, 96, 124, 0.24);
  --pos:     #1f7a52;  --pos-soft:     rgba(31, 122, 82, 0.10);  --pos-line:     rgba(31, 122, 82, 0.26);
  --brandt:  var(--accent); --brandt-soft: var(--accent-soft);   --brandt-line: rgba(168, 90, 31, 0.26);

  /* Chart series, themed to the system (no default library colours). */
  --chart-1: #1f6fb2; --chart-2: #1f7a52; --chart-3: #9a6b00; --chart-4: #c25a08; --chart-5: #c0143c;
  --chart-grid-soft: rgba(20, 33, 61, 0.07);

  --iso-track: rgba(20, 33, 61, 0.08);     /* ring/track base in light */
  --iso-glow: rgba(168, 90, 31, 0.10);
}

/* ---- Polarity-aware semantic ramp (DARK) ---------------------------------- */
[data-theme="dark"] {
  --alarm:   #ff6b81;  --alarm-soft:   rgba(255, 107, 129, 0.14);  --alarm-line:   rgba(255, 107, 129, 0.30);
  --warn:    #ff9d4d;  --warn-soft:    rgba(255, 157, 77, 0.14);   --warn-line:    rgba(255, 157, 77, 0.28);
  --caution: #e2b341;  --caution-soft: rgba(226, 179, 65, 0.14);   --caution-line: rgba(226, 179, 65, 0.28);
  --info:    #5cb3e8;  --info-soft:    rgba(92, 179, 232, 0.14);   --info-line:    rgba(92, 179, 232, 0.28);
  --neutral: #9aa7c0;  --neutral-soft: rgba(154, 167, 192, 0.14);  --neutral-line: rgba(154, 167, 192, 0.26);
  --pos:     #4cc38a;  --pos-soft:     rgba(76, 195, 138, 0.14);   --pos-line:     rgba(76, 195, 138, 0.28);
  --brandt:  var(--accent); --brandt-soft: var(--accent-soft);     --brandt-line: rgba(212, 175, 55, 0.30);

  --chart-1: #5cb3e8; --chart-2: #4cc38a; --chart-3: #e2b341; --chart-4: #ff9d4d; --chart-5: #ff6b81;
  --chart-grid-soft: rgba(203, 213, 225, 0.08);

  --iso-track: rgba(203, 213, 225, 0.10);
  --iso-glow: rgba(212, 175, 55, 0.12);
}

/* ============================================================================
   TYPOGRAPHY
   ========================================================================== */
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.005em;
}
h1, h2, h3, h4, h5, h6, .fds-side__brand-text, .fds-topbar__product {
  font-family: var(--font-display);
}
h1, h2, h3, h4 { letter-spacing: -0.012em; font-weight: 650; }

/* Chrome brand: keep the product lockup on one line. */
.fds-topbar__brand { flex-shrink: 0; }
.fds-topbar__product, .fds-side__brand-text { white-space: nowrap; }

/* Page title row: an uppercase mono eyebrow + a strong display title. */
.top-bar { align-items: flex-end; padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.top-bar h4 { font-size: var(--t-h4); font-weight: 680; color: var(--text-strong); letter-spacing: -0.015em; }
.top-bar h4 i { color: var(--accent); }

/* Machine data: finding IDs, ARNs, control codes, counts, timestamps. */
.mono, code, .iso-mono, .fds-page-tab__count, .card-stat .value,
td .ctrl-list, .annexa, .arn { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.iso-mono-dim { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.82em; letter-spacing: -0.01em; }

/* ============================================================================
   FOCUS  -  one visible, consistent focus ring on every interactive element.
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .iso-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.fds-side__item:focus-visible, .fds-topbar__link:focus-visible {
  outline: 2px solid var(--c-chrome-accent); outline-offset: -2px;
}

/* ============================================================================
   CARDS  -  refine the shared .card-custom / .card-stat. Subtle gradient sheen
   on the header, hover lift, accent rail option.
   ========================================================================== */
.card-custom {
  border-radius: var(--radius-xl); border-color: var(--border);
  box-shadow: var(--shadow-low); transition: box-shadow var(--t-base) var(--iso-ease), border-color var(--t-base) var(--iso-ease), transform var(--t-base) var(--iso-ease);
}
.card-custom:hover { box-shadow: var(--shadow-mid); }
.card-custom .card-header {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 620; letter-spacing: -0.01em;
  font-size: var(--t-h6); color: var(--text-strong);
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%);
}
.card-custom .card-header .hdr-sub { margin-left: auto; font: 500 var(--t-caption)/1 var(--font-mono); color: var(--text-muted); }

/* KPI cards (.card-stat) -> tactile, polarity-tintable, count-up numeral. */
.card-stat {
  position: relative; border-radius: var(--radius-xl); padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--border); overflow: hidden;
}
.card-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: 0.0; transition: opacity var(--t-base) var(--iso-ease);
}
.card-stat:hover::before { opacity: 0.9; }
.card-stat:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-mid); }
.card-stat .value { font-size: 2rem; font-weight: 600; line-height: 1.05; color: var(--text-strong); }
.card-stat .label { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.card-stat .kpi-icon { position: absolute; right: var(--space-4); top: var(--space-4); font-size: 1.1rem; color: var(--text-muted); opacity: 0.55; }
/* Polarity accents for KPI cards via modifier classes. */
.card-stat.k-alarm::before { background: var(--alarm); } .card-stat.k-alarm .value { color: var(--alarm); }
.card-stat.k-warn::before  { background: var(--warn); }
.card-stat.k-pos::before   { background: var(--pos); }   .card-stat.k-pos .value { color: var(--pos); }
.card-stat.k-info::before  { background: var(--info); }
.card-stat.k-brand .value  { color: var(--accent); }

/* ============================================================================
   PILL LANGUAGE  -  one consistent, polarity-aware, accessible system. Used as
   .iso-pill (new markup) and mapped onto the existing .badge / .severity-* /
   bootstrap utility badges so unedited templates restyle automatically.
   ========================================================================== */
.iso-pill, .badge {
  display: inline-flex; align-items: center; gap: 0.35em; vertical-align: middle;
  font: 600 var(--t-eyebrow)/1 var(--font-sans); letter-spacing: 0.01em;
  padding: 0.32em 0.62em; border-radius: var(--radius-pill);
  border: 1px solid var(--neutral-line); background: var(--neutral-soft); color: var(--neutral);
  white-space: nowrap;
}
.iso-pill i, .badge i { font-size: 0.92em; }
.iso-pill .pill-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }

.iso-pill.p-alarm,   .badge.p-alarm   { background: var(--alarm-soft);   color: var(--alarm);   border-color: var(--alarm-line); }
.iso-pill.p-warn,    .badge.p-warn    { background: var(--warn-soft);    color: var(--warn);    border-color: var(--warn-line); }
.iso-pill.p-caution, .badge.p-caution { background: var(--caution-soft); color: var(--caution); border-color: var(--caution-line); }
.iso-pill.p-info,    .badge.p-info    { background: var(--info-soft);    color: var(--info);    border-color: var(--info-line); }
.iso-pill.p-neutral, .badge.p-neutral { background: var(--neutral-soft); color: var(--neutral); border-color: var(--neutral-line); }
.iso-pill.p-pos,     .badge.p-pos     { background: var(--pos-soft);     color: var(--pos);     border-color: var(--pos-line); }
.iso-pill.p-brand,   .badge.p-brand   { background: var(--brandt-soft);  color: var(--brandt);  border-color: var(--brandt-line); }

/* Map the existing severity helpers + bootstrap utility badges onto the ramp. */
.badge.severity-critical, .severity-critical { background: var(--alarm-soft) !important;   color: var(--alarm) !important;   border-color: var(--alarm-line) !important; }
.badge.severity-high,     .severity-high     { background: var(--warn-soft) !important;    color: var(--warn) !important;    border-color: var(--warn-line) !important; }
.badge.severity-medium,   .severity-medium   { background: var(--caution-soft) !important; color: var(--caution) !important; border-color: var(--caution-line) !important; }
.badge.severity-low,      .severity-low      { background: var(--info-soft) !important;    color: var(--info) !important;    border-color: var(--info-line) !important; }
.badge.bg-success { background: var(--pos-soft) !important;     color: var(--pos) !important;     border-color: var(--pos-line) !important; }
.badge.bg-danger  { background: var(--alarm-soft) !important;   color: var(--alarm) !important;   border-color: var(--alarm-line) !important; }
.badge.bg-warning { background: var(--warn-soft) !important;    color: var(--warn) !important;    border-color: var(--warn-line) !important; }
.badge.bg-info    { background: var(--info-soft) !important;    color: var(--info) !important;    border-color: var(--info-line) !important; }
.badge.bg-secondary { background: var(--neutral-soft) !important; color: var(--neutral) !important; border-color: var(--neutral-line) !important; }
.badge.bg-dark    { background: var(--neutral-soft) !important; color: var(--text-strong) !important; border-color: var(--border-strong) !important; }
.badge.text-dark  { color: inherit !important; }
.status-open   { background: var(--warn-soft) !important; color: var(--warn) !important; border: 1px solid var(--warn-line) !important; }
.status-closed { background: var(--neutral-soft) !important; color: var(--neutral) !important; border: 1px solid var(--neutral-line) !important; }

/* ============================================================================
   BUTTONS  -  refine the shared .btn-cyan / .btn-outline-cyan + bootstrap btns.
   ========================================================================== */
.btn { font-weight: 600; border-radius: var(--radius-md); transition: transform var(--t-fast) var(--iso-ease), box-shadow var(--t-fast) var(--iso-ease), background-color var(--t-fast) var(--iso-ease), color var(--t-fast) var(--iso-ease); }
.btn:active { transform: translateY(1px); }
.btn-cyan { background: var(--accent); color: var(--accent-on); border: 1px solid transparent; box-shadow: var(--shadow-low); }
.btn-cyan:hover { background: var(--accent-hover); color: var(--accent-on); box-shadow: var(--shadow-mid); transform: translateY(-1px); }
.btn-outline-cyan { border: 1px solid var(--border-strong); color: var(--text-strong); background: var(--surface); }
.btn-outline-cyan:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-outline-secondary { border-color: var(--border-strong); color: var(--text); }
.btn-outline-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ============================================================================
   FORM CONTROLS
   ========================================================================== */
.form-control, .form-select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-md); font-size: var(--t-body); transition: border-color var(--t-fast) var(--iso-ease), box-shadow var(--t-fast) var(--iso-ease);
}
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-focus); background: var(--surface); }
.form-label { font-size: var(--t-caption); color: var(--text-muted); font-weight: 600; letter-spacing: 0.01em; }

/* ============================================================================
   DATA TABLES  -  the workhorse. Sticky header, hover lift, zebra-on-hover,
   sortable affordance, click-to-drawer rows, mono cells.
   ========================================================================== */
.table-dark.table { --bs-table-bg: transparent; }
.table-dark thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  color: var(--text-muted); font: 600 var(--t-eyebrow)/1.4 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.07em; border-bottom: 1px solid var(--border);
  padding: var(--space-3) var(--space-4); white-space: nowrap;
}
/* When the header is in a scroll container, soften the sticky seam. */
.card-custom .table-dark thead th { box-shadow: inset 0 -1px 0 var(--border); }
.table-dark tbody td { padding: var(--space-3) var(--space-4); border-color: var(--border); vertical-align: middle; color: var(--text); }
.table-dark tbody tr { transition: background-color var(--t-fast) var(--iso-ease); }
.table-dark.table-hover tbody tr:hover { background: var(--accent-soft); }
.table-dark tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Sortable headers (enhanced by iso-ui.js). */
th.iso-sort { cursor: pointer; user-select: none; }
th.iso-sort::after { content: "\F575"; font-family: "bootstrap-icons"; font-size: 0.8em; opacity: 0.25; margin-left: 0.4em; }
th.iso-sort.asc::after  { content: "\F57B"; opacity: 0.9; color: var(--accent); }
th.iso-sort.desc::after { content: "\F575"; opacity: 0.9; color: var(--accent); }

/* Client pagination control. */
.iso-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); flex-wrap: wrap; }
.iso-pager__info { font: 500 var(--t-caption)/1 var(--font-mono); color: var(--text-muted); }
.iso-pager__btns { display: flex; gap: var(--space-2); }

/* Clickable rows -> detail drawer. */
.iso-row { cursor: pointer; }
.ctrl-list, .annexa { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); letter-spacing: -0.02em; }

/* ============================================================================
   EMPTY STATES  -  directional, not blank.
   ========================================================================== */
.empty-state { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-muted); }
.empty-state i { font-size: 2rem; display: block; margin-bottom: var(--space-3); opacity: 0.4; color: var(--accent); }
.empty-state .es-title { font-weight: 600; color: var(--text-strong); margin-bottom: var(--space-1); }

/* ============================================================================
   SKELETON / SHIMMER  -  reserve space for async-feeling panels (charts, ring).
   ========================================================================== */
.iso-skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-md); }
.iso-skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  animation: iso-shimmer 1.25s infinite;
}
@keyframes iso-shimmer { 100% { transform: translateX(100%); } }
.iso-skeleton.is-done { display: none; }

/* ============================================================================
   ORCHESTRATED REVEAL  -  staggered card entrance on load. JS sets --i.
   ========================================================================== */
.iso-reveal { opacity: 0; transform: translateY(10px); }
.iso-revealed .iso-reveal { animation: iso-rise 0.55s var(--iso-ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes iso-rise { to { opacity: 1; transform: none; } }
/* Soft fade (no transform) for cards that host a canvas, so Chart.js repaint is
   never disturbed by a compositing transform on the parent. */
.iso-reveal-soft { opacity: 0; }
.iso-revealed .iso-reveal-soft { animation: iso-fade 0.5s var(--iso-ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes iso-fade { to { opacity: 1; } }

/* ============================================================================
   ASSURANCE RING  -  the signature element. Radial gauge of ISO 27001 control
   readiness with a mono count-up centre. Built as inline SVG in the dashboard.
   ========================================================================== */
.iso-ring-wrap { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.iso-ring { position: relative; width: 184px; height: 184px; flex: 0 0 auto; }
.iso-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; filter: drop-shadow(0 0 16px var(--iso-glow)); }
.iso-ring .ring-track { stroke: var(--iso-track); }
.iso-ring .ring-val { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--iso-ease-out); }
.iso-ring .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.iso-ring .ring-pct { font: 600 2.1rem/1 var(--font-mono); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.iso-ring .ring-sub { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-top: 4px; }

/* Posture legend + segmented coverage bar. */
.iso-legend { display: flex; flex-direction: column; gap: var(--space-3); min-width: 200px; }
.iso-legend-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--t-caption); }
.iso-legend-row .lg-key { width: 0.7em; height: 0.7em; border-radius: 3px; flex: 0 0 auto; }
.iso-legend-row .lg-label { color: var(--text); }
.iso-legend-row .lg-val { margin-left: auto; font-family: var(--font-mono); font-weight: 600; color: var(--text-strong); }
.iso-cov-bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--iso-track); margin-top: var(--space-2); }
.iso-cov-seg { height: 100%; transition: width 1s var(--iso-ease-out); }

/* Mini meter (review backlog etc). */
.iso-meter { height: 8px; border-radius: var(--radius-pill); background: var(--iso-track); overflow: hidden; }
.iso-meter > span { display: block; height: 100%; border-radius: var(--radius-pill); transition: width 1s var(--iso-ease-out); }

/* ============================================================================
   DETAIL DRAWER  -  slides in from the right for row detail / quick view.
   ========================================================================== */
.iso-drawer-scrim { position: fixed; inset: 0; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--iso-ease); z-index: 1190; }
.iso-drawer-scrim.open { opacity: 1; pointer-events: auto; }
.iso-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 94vw); z-index: 1200;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-high);
  transform: translateX(100%); transition: transform var(--t-base) var(--iso-ease-out);
  display: flex; flex-direction: column; overflow: hidden;
}
.iso-drawer.open { transform: none; }
.iso-drawer__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.iso-drawer__title { font-family: var(--font-display); font-weight: 620; color: var(--text-strong); font-size: var(--t-h6); }
.iso-drawer__close { margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; border-radius: var(--radius-sm); width: 32px; height: 32px; }
.iso-drawer__close:hover { color: var(--text-strong); background: var(--accent-soft); }
.iso-drawer__body { padding: var(--space-5); overflow-y: auto; }
.iso-drawer dl { display: grid; grid-template-columns: 38% 62%; gap: var(--space-2) var(--space-3); margin: 0; }
.iso-drawer dt { color: var(--text-muted); font-size: var(--t-caption); }
.iso-drawer dd { margin: 0; color: var(--text); font-size: var(--t-caption); word-break: break-word; }
.iso-drawer dd.mono { font-family: var(--font-mono); font-size: 0.78rem; }
.iso-drawer__foot { margin-top: auto; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); display: flex; gap: var(--space-2); }

/* ============================================================================
   TOASTS  -  the messages framework restyled to a quiet, branded toast.
   ========================================================================== */
.flash-messages .alert {
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-mid); color: var(--text); font-size: var(--t-caption);
  border-left: 3px solid var(--accent);
}
.flash-messages .alert-success { border-left-color: var(--pos); }
.flash-messages .alert-error, .flash-messages .alert-danger { border-left-color: var(--alarm); }
.flash-messages .alert-warning { border-left-color: var(--warn); }

/* ============================================================================
   REVIEW QUEUE module cards (restyle hook).
   ========================================================================== */
.rq-progress { height: 6px; border-radius: var(--radius-pill); background: var(--iso-track); overflow: hidden; margin-top: var(--space-2); }
.rq-progress > span { display: block; height: 100%; background: var(--accent); transition: width 0.9s var(--iso-ease-out); }

/* ============================================================================
   MOTION OFF  -  honour prefers-reduced-motion everywhere.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .iso-reveal, .iso-reveal-soft { opacity: 1 !important; transform: none !important; animation: none !important; }
  .iso-skeleton::after { animation: none; }
  .iso-ring .ring-val, .iso-cov-seg, .iso-meter > span, .rq-progress > span { transition: none !important; }
  .iso-drawer, .iso-drawer-scrim { transition: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 700px) {
  .iso-ring-wrap { gap: var(--space-4); }
  .iso-ring { width: 150px; height: 150px; }
  .iso-drawer { width: 100vw; }
  .card-stat .value { font-size: 1.6rem; }
}