/* Frosted Aura component styles — loaded after tokens.css. Uses design tokens only. */
:root {
  --ring-brand: var(--brand);
  --ring-secure: var(--status-secure);
  --ring-critical: var(--sev-critical);
  --ring-high: var(--sev-high);
  --ring-medium: var(--sev-medium);
  --ring-accent: var(--accent);
}

.fa-icon { display: inline-block; vertical-align: middle; color: inherit; }

/* ---------- Button ---------- */
.fa-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-text); font-weight: 600; letter-spacing: -0.005em;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.fa-btn-sm { font-size: 13px; padding: 6px 14px; }
.fa-btn-md { font-size: 15px; padding: 9px 18px; }
.fa-btn-lg { font-size: 17px; padding: 12px 24px; }
.fa-btn-primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.fa-btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.fa-btn-secondary { background: transparent; color: var(--brand-strong); border-color: var(--brand-strong); }
.fa-btn-secondary:hover { background: var(--brand-soft); }
.fa-btn-ghost { background: transparent; color: var(--brand-strong); border-color: transparent; padding-left: 8px; padding-right: 8px; }
.fa-btn-ghost:hover { text-decoration: underline; }
.fa-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fa-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Badge ---------- */
.fa-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-text); font-size: 12px; font-weight: 600; line-height: 18px;
  padding: 2px 10px; border-radius: var(--radius-sm); white-space: nowrap;
}
.fa-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fa-badge-neutral { background: var(--status-neutral-soft); color: var(--status-neutral-text); }
.fa-badge-brand { background: var(--brand-soft); color: var(--brand-onsoft); }
.fa-badge-secure { background: var(--status-secure-soft); color: var(--status-secure-text); }
.fa-badge-critical { background: var(--sev-critical-soft); color: var(--sev-critical-text); }
.fa-badge-high { background: var(--sev-high-soft); color: var(--sev-high-text); }
.fa-badge-medium { background: var(--sev-medium-soft); color: var(--sev-medium-text); }
.fa-badge-low { background: var(--sev-low-soft); color: var(--sev-low-text); }

/* ---------- Stat tile ---------- */
.fa-tile {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-width: 180px;
}
.fa-tile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.fa-tile-label { font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: -0.004em; color: var(--ink-secondary); }
.fa-tile-icon { color: var(--ink-muted); }
.fa-tile-value { display: flex; align-items: baseline; gap: 4px; }
.fa-tile-num { font-family: var(--font-mono); font-size: 28px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.fa-tile-unit { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.fa-tile-foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.fa-tile-caption { font-family: var(--font-text); font-size: 12px; color: var(--ink-muted); }
.fa-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-text); font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-sm); }
.fa-delta-arrow { font-size: 11px; }
.fa-delta-good { background: var(--status-secure-soft); color: var(--status-secure-text); }
.fa-delta-bad { background: var(--sev-critical-soft); color: var(--sev-critical-text); }
.fa-delta-neutral { background: var(--status-neutral-soft); color: var(--status-neutral-text); }
.fa-spark { margin-left: auto; }

/* ---------- Meter ---------- */
.fa-meter { display: flex; flex-direction: column; gap: 6px; min-width: 180px; font-family: var(--font-text); }
.fa-meter-head { display: flex; justify-content: space-between; align-items: baseline; }
.fa-meter-label { font-size: 13px; font-weight: 600; color: var(--ink-secondary); }
.fa-meter-value { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.fa-meter-track { height: 8px; background: var(--chart-track); border-radius: var(--radius-pill); overflow: hidden; }
.fa-meter-fill { height: 100%; border-radius: var(--radius-pill); }
.fa-fill-brand { background: var(--brand); }
.fa-fill-secure { background: var(--status-secure); }
.fa-fill-critical { background: var(--sev-critical); }
.fa-fill-high { background: var(--sev-high); }
.fa-fill-medium { background: var(--sev-medium); }
.fa-fill-low { background: var(--sev-low); }
.fa-fill-accent { background: var(--accent); }

/* ---------- Ring ---------- */
.fa-ring { position: relative; display: inline-grid; place-items: center; }
.fa-ring svg { display: block; }
.fa-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fa-ring-num { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.fa-ring-label { font-family: var(--font-text); font-size: 12px; color: var(--ink-muted); }

/* ---------- Charts (shared) ---------- */
.fa-chart { width: 100%; }
.fa-chart svg { display: block; overflow: visible; }
.fa-axis-text { font-family: var(--font-text); font-size: 11px; fill: var(--chart-axis); }
.fa-legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin-top: var(--space-3); }
.fa-legend-col { flex-direction: column; gap: var(--space-2); margin-top: 0; }
.fa-legend-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-text); font-size: 12px; color: var(--ink-secondary); }
.fa-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.fa-legend-name { min-width: 84px; }
.fa-legend-val { font-family: var(--font-mono); font-weight: 600; color: var(--ink); margin-left: auto; }

/* ---------- Donut ---------- */
.fa-donut { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.fa-donut-svg { position: relative; flex: none; }
.fa-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fa-donut-num { font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--ink); }
.fa-donut-label { font-family: var(--font-text); font-size: 12px; color: var(--ink-muted); }

/* ---------- Risk heatmap ---------- */
.fa-heat { display: inline-block; font-family: var(--font-text); }
.fa-heat-table { border-collapse: separate; border-spacing: 4px; }
.fa-heat-xl, .fa-heat-yl { font-size: 11px; font-weight: 600; color: var(--ink-muted); font-family: var(--font-text); }
.fa-heat-xl { padding-bottom: 2px; text-align: center; }
.fa-heat-yl { text-align: right; padding-right: 6px; white-space: nowrap; }
.fa-heat-cell { width: 46px; height: 40px; border-radius: var(--radius-sm); text-align: center; vertical-align: middle; }
.fa-heat-count { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.fa-heat-status-neutral { background: var(--status-neutral-soft); color: var(--status-neutral-text); }
.fa-heat-sev-low { background: var(--sev-low-soft); color: var(--sev-low-text); }
.fa-heat-sev-medium { background: var(--sev-medium-soft); color: var(--sev-medium-text); }
.fa-heat-sev-high { background: var(--sev-high-soft); color: var(--sev-high-text); }
.fa-heat-sev-critical { background: var(--sev-critical-soft); color: var(--sev-critical-text); }
.fa-heat-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-muted); margin-top: 6px; padding-left: 88px; }

/* ============================================================ additions */

/* ---------- Card ---------- */
.fa-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); font-family: var(--font-text); }
.fa-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.fa-card-eyebrow { font-family: var(--font-text); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; }
.fa-card-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.fa-card-sub { font-size: 14px; color: var(--ink-muted); margin-top: 2px; }
.fa-card-actions { display: flex; gap: var(--space-2); flex: none; }
.fa-card-body { color: var(--ink-secondary); font-size: 15px; line-height: 1.5; }

/* ---------- Alert ---------- */
.fa-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-family: var(--font-text); }
.fa-alert-icon { flex: none; margin-top: 1px; }
.fa-alert-body { flex: 1; min-width: 0; }
.fa-alert-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.fa-alert-text { font-size: 14px; line-height: 1.45; opacity: .92; }
.fa-alert-x { flex: none; background: none; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; opacity: .6; padding: 0 2px; }
.fa-alert-x:hover { opacity: 1; }
.fa-alert-critical { background: var(--sev-critical-soft); color: var(--sev-critical-text); }
.fa-alert-high { background: var(--sev-high-soft); color: var(--sev-high-text); }
.fa-alert-medium { background: var(--sev-medium-soft); color: var(--sev-medium-text); }
.fa-alert-low { background: var(--sev-low-soft); color: var(--sev-low-text); }
.fa-alert-secure { background: var(--status-secure-soft); color: var(--status-secure-text); }
.fa-alert-neutral { background: var(--status-neutral-soft); color: var(--status-neutral-text); }
.fa-alert-brand { background: var(--brand-soft); color: var(--brand-onsoft); }

/* ---------- Tabs ---------- */
.fa-tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--line); font-family: var(--font-text); }
.fa-tab { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 4px; font-size: 14px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
.fa-tab:hover { color: var(--ink); }
.fa-tab-active { color: var(--brand-strong); border-bottom-color: var(--brand); }
.fa-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.fa-tab-count { font-family: var(--font-mono); font-size: 11px; background: var(--status-neutral-soft); color: var(--status-neutral-text); border-radius: var(--radius-pill); padding: 0 6px; }
.fa-tab-active .fa-tab-count { background: var(--brand-soft); color: var(--brand-onsoft); }

/* ---------- NavBar ---------- */
.fa-nav { display: flex; align-items: center; gap: var(--space-6); padding: 10px var(--space-6); background: var(--surface-raised); border-bottom: 1px solid var(--line); font-family: var(--font-text); }
.fa-nav-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.fa-nav-mark { color: var(--brand); display: inline-flex; }
.fa-nav-items { display: flex; gap: var(--space-5); margin-left: var(--space-4); flex: 1; }
.fa-nav-link { font-size: 14px; font-weight: 600; color: var(--ink-secondary); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.fa-nav-link:hover { color: var(--ink); }
.fa-nav-active { color: var(--brand-strong); border-bottom-color: var(--brand); }
.fa-nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.fa-nav-icon { background: none; border: 0; color: var(--ink-secondary); cursor: pointer; display: inline-flex; padding: 4px; border-radius: var(--radius-sm); }
.fa-nav-icon:hover { color: var(--ink); background: var(--surface-sunken); }
.fa-nav-inverse { background: var(--surface-inverse); border-bottom-color: rgba(255,255,255,0.12); }
.fa-nav-inverse .fa-nav-brand, .fa-nav-inverse .fa-nav-link { color: var(--ink-inverse); }
.fa-nav-inverse .fa-nav-icon { color: var(--ink-inverse); }

/* ---------- Fields (Input / Select) ---------- */
.fa-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-text); min-width: 200px; }
.fa-field-label { font-size: 13px; font-weight: 600; color: var(--ink-secondary); }
.fa-input-wrap { position: relative; display: flex; align-items: center; }
.fa-input-icon { position: absolute; left: 12px; color: var(--ink-muted); pointer-events: none; }
.fa-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--control-border); border-radius: var(--radius-md); padding: 9px 12px; }
.fa-input-hasicon { padding-left: 34px; }
.fa-input::placeholder { color: var(--ink-muted); }
.fa-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
.fa-input-error .fa-input { border-color: var(--sev-critical); }
.fa-field-msg { font-size: 12px; color: var(--ink-muted); }
.fa-field-err { color: var(--sev-critical-text); }
.fa-select-wrap { position: relative; display: flex; align-items: center; }
.fa-select { width: 100%; box-sizing: border-box; appearance: none; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--control-border); border-radius: var(--radius-md); padding: 9px 34px 9px 12px; cursor: pointer; }
.fa-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
.fa-select-caret { position: absolute; right: 12px; color: var(--ink-muted); pointer-events: none; font-size: 12px; }

/* ---------- Toggle ---------- */
.fa-toggle { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-text); font-size: 14px; color: var(--ink-secondary); cursor: pointer; }
.fa-switch { width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--chart-track); border: 1px solid var(--control-border); position: relative; cursor: pointer; padding: 0; transition: background-color .15s ease, border-color .15s ease; }
.fa-switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.fa-switch-on { background: var(--brand); border-color: var(--brand); }
.fa-switch-on .fa-switch-knob { transform: translateX(16px); }
.fa-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fa-toggle-disabled { opacity: .5; cursor: not-allowed; }

/* ---------- DataTable ---------- */
.fa-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.fa-table { width: 100%; border-collapse: collapse; font-family: var(--font-text); font-size: 14px; }
.fa-th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-muted); padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fa-th-sort { cursor: pointer; user-select: none; }
.fa-th-sort:hover { color: var(--ink-secondary); }
.fa-sort-ind { color: var(--brand-strong); }
.fa-td { padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--ink-secondary); vertical-align: middle; }
.fa-table tbody tr:last-child .fa-td { border-bottom: 0; }
.fa-table tbody tr:hover { background: var(--surface-sunken); }
.fa-r { text-align: right; }
.fa-mono { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }

/* ---------- BigStat ---------- */
.fa-bigstat { font-family: var(--font-display); }
.fa-bigstat-eyebrow { font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-2); }
.fa-bigstat-value { display: flex; align-items: baseline; gap: 6px; color: var(--brand); }
.fa-bigstat-num { font-family: var(--font-mono); font-size: 96px; line-height: .95; font-weight: 600; letter-spacing: -0.03em; }
.fa-bigstat-unit { font-family: var(--font-mono); font-size: 40px; font-weight: 600; color: var(--ink-muted); }
.fa-bigstat-label { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-top: var(--space-2); }
.fa-bigstat-caption { font-family: var(--font-text); font-size: 15px; color: var(--ink-muted); margin-top: 4px; }
.fa-tone-secure { color: var(--status-secure); }
.fa-tone-critical { color: var(--sev-critical); }
.fa-tone-high { color: var(--sev-high); }
.fa-tone-accent { color: var(--accent); }

/* ---------- PullQuote ---------- */
.fa-quote { margin: 0; max-width: 720px; }
.fa-quote-text { font-family: var(--font-display); font-size: 32px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; position: relative; padding-left: var(--space-6); border-left: 3px solid var(--brand); }
.fa-quote-by { font-family: var(--font-text); font-size: 15px; color: var(--ink-muted); margin-top: var(--space-4); padding-left: var(--space-6); }

/* ---------- Slide (16:9) ---------- */
.fa-slide { aspect-ratio: 16 / 9; width: 100%; background: var(--surface-canvas); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-12); box-sizing: border-box; display: flex; flex-direction: column; font-family: var(--font-text); overflow: hidden; position: relative; }
.fa-slide-eyebrow, .fa-slide-kicker { font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-strong); }
.fa-slide-title-body { margin: auto 0; }
.fa-slide-h1 { font-family: var(--font-display); font-size: 56px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); margin: var(--space-3) 0 0; }
.fa-slide-lede { font-size: 21px; font-weight: 300; color: var(--ink-secondary); margin: var(--space-4) 0 0; max-width: 60ch; }
.fa-slide-section { background: var(--surface-wash); }
.fa-slide-section-body { margin: auto 0; }
.fa-slide-num { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--brand); }
.fa-slide-h2 { font-family: var(--font-display); font-size: 44px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: var(--space-2) 0 0; }
.fa-slide-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.fa-slide-h3 { font-family: var(--font-display); font-size: 32px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 0; }
.fa-slide-content { flex: 1; min-height: 0; color: var(--ink-secondary); font-size: 16px; }
.fa-slide-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-4); font-size: 12px; color: var(--ink-muted); border-top: 1px solid var(--line); }
.fa-slide-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-secondary); }
.fa-slide-brand .fa-icon { color: var(--brand); }

/* ============================================================ additions 2 */

/* ---------- Combobox ---------- */
.fa-combo { position: relative; }
.fa-combo-backdrop { position: fixed; inset: 0; z-index: 40; }
.fa-combo-list { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); max-height: 240px; overflow-y: auto; }
.fa-combo-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 14px; color: var(--ink-secondary); cursor: pointer; }
.fa-combo-hi { background: var(--brand-soft); color: var(--brand-onsoft); }
.fa-combo-sel { color: var(--ink); font-weight: 600; }
.fa-combo-check { color: var(--brand-strong); }
.fa-combo-empty { padding: 10px; font-size: 14px; color: var(--ink-muted); text-align: center; }

/* ---------- Overlay: Modal + Drawer ---------- */
.fa-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(9, 11, 15, 0.48); display: flex; padding: var(--space-6); box-sizing: border-box; }
.fa-modal { margin: auto; width: min(520px, 100%); max-height: 100%; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: flex; flex-direction: column; overflow: hidden; }
.fa-drawer { width: min(420px, 100%); height: 100%; background: var(--surface-raised); border-left: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.fa-drawer-right { margin-left: auto; }
.fa-drawer-left { margin-right: auto; border-left: 0; border-right: 1px solid var(--line); }
.fa-ovl-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--line); }
.fa-ovl-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.fa-ovl-x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--ink-muted); cursor: pointer; padding: 0 2px; }
.fa-ovl-x:hover { color: var(--ink); }
.fa-ovl-body { padding: var(--space-6); overflow-y: auto; color: var(--ink-secondary); font-family: var(--font-text); font-size: 15px; line-height: 1.5; flex: 1; }
.fa-ovl-foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); }

/* ---------- Breadcrumbs ---------- */
.fa-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-text); font-size: 13px; }
.fa-crumb { color: var(--ink-muted); text-decoration: none; }
.fa-crumb:hover { color: var(--brand-strong); }
.fa-crumb-current { color: var(--ink); font-weight: 600; }
.fa-crumb-sep { color: var(--line-strong); }

/* ---------- Pagination ---------- */
.fa-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-family: var(--font-text); }
.fa-pg-summary { font-size: 13px; color: var(--ink-muted); }
.fa-pg-controls { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.fa-pg-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink-secondary); border-radius: var(--radius-sm); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.fa-pg-btn:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); }
.fa-pg-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.fa-pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.fa-pg-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fa-pg-gap { color: var(--ink-muted); padding: 0 2px; }

/* ---------- Timeline ---------- */
.fa-timeline { list-style: none; margin: 0; padding: 0; font-family: var(--font-text); }
.fa-tl-item { position: relative; display: flex; gap: var(--space-4); padding-bottom: var(--space-6); }
.fa-tl-item::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.fa-tl-item:last-child { padding-bottom: 0; }
.fa-tl-item:last-child::before { display: none; }
.fa-tl-dot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; z-index: 1; }
.fa-tl-critical { background: var(--sev-critical); }
.fa-tl-high { background: var(--sev-high); }
.fa-tl-medium { background: var(--sev-medium); }
.fa-tl-low { background: var(--sev-low); }
.fa-tl-secure { background: var(--status-secure); }
.fa-tl-neutral { background: var(--status-neutral); }
.fa-tl-brand { background: var(--brand); }
.fa-tl-body { padding-top: 2px; }
.fa-tl-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.fa-tl-time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.fa-tl-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.fa-tl-desc { font-size: 14px; color: var(--ink-secondary); line-height: 1.45; margin-top: 2px; }

/* ============================================================ additions 3 */

/* ---------- Toast ---------- */
.fa-toast-stack { position: fixed; z-index: 200; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); pointer-events: none; }
.fa-toast-stack > * { pointer-events: auto; }
.fa-toast-br { right: 0; bottom: 0; align-items: flex-end; }
.fa-toast-bl { left: 0; bottom: 0; align-items: flex-start; }
.fa-toast-tr { right: 0; top: 0; align-items: flex-end; }
.fa-toast-tc { left: 50%; top: 0; transform: translateX(-50%); }
.fa-toast { display: flex; gap: var(--space-3); align-items: flex-start; width: min(380px, 92vw); box-sizing: border-box; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-4); font-family: var(--font-text); }
.fa-toast-icon { flex: none; margin-top: 1px; }
.fa-toast-body { flex: 1; min-width: 0; }
.fa-toast-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.fa-toast-text { font-size: 13px; color: var(--ink-secondary); line-height: 1.45; margin-top: 2px; }
.fa-toast-action { margin-top: var(--space-2); }
.fa-toast-x { flex: none; background: none; border: 0; font-size: 18px; line-height: 1; color: var(--ink-muted); cursor: pointer; padding: 0 2px; }
.fa-toast-x:hover { color: var(--ink); }
.fa-toast-critical .fa-toast-icon { color: var(--sev-critical); }
.fa-toast-high .fa-toast-icon { color: var(--sev-high); }
.fa-toast-medium .fa-toast-icon { color: var(--sev-medium); }
.fa-toast-low .fa-toast-icon { color: var(--sev-low); }
.fa-toast-secure .fa-toast-icon { color: var(--status-secure); }
.fa-toast-brand .fa-toast-icon { color: var(--brand); }
.fa-toast-neutral .fa-toast-icon { color: var(--status-neutral); }

/* ---------- EmptyState ---------- */
.fa-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); font-family: var(--font-text); }
.fa-empty-compact { padding: var(--space-8) var(--space-6); }
.fa-empty-icon { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-1); }
.fa-empty-neutral { background: var(--status-neutral-soft); color: var(--status-neutral-text); }
.fa-empty-secure { background: var(--status-secure-soft); color: var(--status-secure-text); }
.fa-empty-brand { background: var(--brand-soft); color: var(--brand-onsoft); }
.fa-empty-medium { background: var(--sev-medium-soft); color: var(--sev-medium-text); }
.fa-empty-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.fa-empty-desc { font-size: 14px; color: var(--ink-muted); max-width: 44ch; line-height: 1.5; }
.fa-empty-action { margin-top: var(--space-3); }

/* ============================================================ additions 4 */

/* ---------- Checkbox ---------- */
.fa-check { display: inline-flex; align-items: flex-start; gap: 10px; font-family: var(--font-text); cursor: pointer; }
.fa-check-input { position: absolute; opacity: 0; width: 0; height: 0; }
.fa-check-box { flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--surface-raised); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background-color .12s ease, border-color .12s ease; }
.fa-check-mark { opacity: 0; }
.fa-check-input:checked + .fa-check-box { background: var(--brand); border-color: var(--brand); }
.fa-check-input:checked + .fa-check-box .fa-check-mark { opacity: 1; }
.fa-check-input:indeterminate + .fa-check-box { background: var(--brand); border-color: var(--brand); }
.fa-check-input:indeterminate + .fa-check-box .fa-check-mark { opacity: 1; }
.fa-check-input:focus-visible + .fa-check-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.fa-check-text { display: flex; flex-direction: column; gap: 1px; }
.fa-check-label { font-size: 14px; color: var(--ink); line-height: 20px; }
.fa-check-desc { font-size: 12px; color: var(--ink-muted); line-height: 16px; }
.fa-check-disabled { opacity: .5; cursor: not-allowed; }

/* ---------- RadioGroup ---------- */
.fa-radiogroup { display: flex; flex-direction: column; gap: var(--space-3); font-family: var(--font-text); }
.fa-radiogroup .fa-field-label { margin-bottom: 2px; }
.fa-radio { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.fa-radio-input { position: absolute; opacity: 0; width: 0; height: 0; }
.fa-radio-dot { flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--control-border); border-radius: 50%; background: var(--surface-raised); position: relative; transition: border-color .12s ease; }
.fa-radio-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--brand); transform: scale(0); transition: transform .12s ease; }
.fa-radio-input:checked + .fa-radio-dot { border-color: var(--brand); }
.fa-radio-input:checked + .fa-radio-dot::after { transform: scale(1); }
.fa-radio-input:focus-visible + .fa-radio-dot { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ============================================================ additions 5 */

/* ---------- Tooltip ---------- */
.fa-tt { position: relative; display: inline-flex; outline: none; }
.fa-tt-bub { position: absolute; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(2px); transition: opacity .12s ease, transform .12s ease; background: var(--surface-inverse); color: var(--ink-inverse); font-family: var(--font-text); font-size: 12px; line-height: 1.4; font-weight: 500; padding: 6px 10px; border-radius: var(--radius-sm); white-space: nowrap; box-shadow: var(--shadow-card); pointer-events: none; }
.fa-tt:hover .fa-tt-bub, .fa-tt:focus-visible .fa-tt-bub, .fa-tt:focus-within .fa-tt-bub { opacity: 1; visibility: visible; transform: translateY(0); }
.fa-tt-top { bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 2px); }
.fa-tt:hover .fa-tt-top, .fa-tt:focus-within .fa-tt-top { transform: translate(-50%, 0); }
.fa-tt-bottom { top: calc(100% + 6px); left: 50%; transform: translate(-50%, -2px); }
.fa-tt:hover .fa-tt-bottom, .fa-tt:focus-within .fa-tt-bottom { transform: translate(-50%, 0); }
.fa-tt-right { left: calc(100% + 6px); top: 50%; transform: translate(-2px, -50%); }
.fa-tt:hover .fa-tt-right, .fa-tt:focus-within .fa-tt-right { transform: translate(0, -50%); }
.fa-tt-left { right: calc(100% + 6px); top: 50%; transform: translate(2px, -50%); }
.fa-tt:hover .fa-tt-left, .fa-tt:focus-within .fa-tt-left { transform: translate(0, -50%); }

/* ---------- Accordion ---------- */
.fa-acc { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); overflow: hidden; font-family: var(--font-text); }
.fa-acc-item + .fa-acc-item { border-top: 1px solid var(--line); }
.fa-acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: none; border: 0; padding: 14px var(--space-5); font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; }
.fa-acc-head:hover { background: var(--surface-sunken); }
.fa-acc-head:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.fa-acc-chevron { color: var(--ink-muted); font-size: 18px; transition: transform .15s ease; }
.fa-acc-open { transform: rotate(90deg); color: var(--brand-strong); }
.fa-acc-panel { padding: 0 var(--space-5) var(--space-5); color: var(--ink-secondary); font-size: 14px; line-height: 1.55; }

/* ---------- Avatar ---------- */
.fa-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand-onsoft); font-family: var(--font-text); font-weight: 600; overflow: visible; flex: none; }
.fa-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.fa-avatar-initials { line-height: 1; }
.fa-avatar-status { position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; min-width: 8px; min-height: 8px; border-radius: 50%; border: 2px solid var(--surface-raised); }
.fa-st-secure { background: var(--status-secure); }
.fa-st-critical { background: var(--sev-critical); }
.fa-st-neutral { background: var(--status-neutral); }
.fa-st-brand { background: var(--brand); }

/* ---------- Stepper ---------- */
.fa-stepper { list-style: none; margin: 0; padding: 0; display: flex; font-family: var(--font-text); }
.fa-step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.fa-step-marker { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; z-index: 1; border: 1.5px solid var(--line-strong); background: var(--surface-raised); color: var(--ink-muted); }
.fa-step-label { font-size: 12px; color: var(--ink-muted); max-width: 12ch; }
.fa-step-line { position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.fa-step-done .fa-step-marker { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.fa-step-done .fa-step-label { color: var(--ink-secondary); }
.fa-step-done .fa-step-line { background: var(--brand); }
.fa-step-current .fa-step-marker { border-color: var(--brand); color: var(--brand-strong); box-shadow: 0 0 0 3px var(--brand-soft); }
.fa-step-current .fa-step-label { color: var(--ink); font-weight: 600; }

/* ---------- Skeleton ---------- */
.fa-sk { display: block; background: var(--chart-track); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.fa-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(127,127,127,0.14), transparent); animation: fa-shimmer 1.3s infinite; }
@keyframes fa-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .fa-sk::after { animation: none; } }
.fa-sk-stack { display: flex; flex-direction: column; gap: 10px; }
.fa-sk-line { height: 12px; }
.fa-sk-circle { border-radius: 50%; }
.fa-sk-block { border-radius: var(--radius-md); }

/* ---------- CodeBlock ---------- */
.fa-code { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); }
.fa-code-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid var(--line); font-family: var(--font-text); }
.fa-code-label { font-size: 12px; font-weight: 600; color: var(--ink-secondary); letter-spacing: 0.03em; text-transform: uppercase; }
.fa-code-copy { background: none; border: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--brand-strong); cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); }
.fa-code-copy:hover { background: var(--brand-soft); }
.fa-code-pre { margin: 0; padding: var(--space-4); overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--ink); }

/* ---------- DescriptionList ---------- */
.fa-dl { margin: 0; font-family: var(--font-text); }
.fa-dl-row { display: flex; gap: var(--space-4); padding: 8px 0; border-bottom: 1px solid var(--line); }
.fa-dl-row:last-child { border-bottom: 0; }
.fa-dl-term { flex: none; width: 40%; max-width: 200px; font-size: 13px; color: var(--ink-muted); }
.fa-dl-val { margin: 0; font-size: 14px; color: var(--ink); }
.fa-dl-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-8); }
.fa-dl-cols .fa-dl-row { border-bottom: 1px solid var(--line); }

/* ---------- Chip ---------- */
.fa-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-text); font-size: 13px; font-weight: 500; padding: 3px 6px 3px 10px; border-radius: var(--radius-pill); background: var(--status-neutral-soft); color: var(--status-neutral-text); }
.fa-chip:not(:has(.fa-chip-x)) { padding-right: 10px; }
.fa-chip-icon { margin-left: -2px; }
.fa-chip-brand { background: var(--brand-soft); color: var(--brand-onsoft); }
.fa-chip-secure { background: var(--status-secure-soft); color: var(--status-secure-text); }
.fa-chip-critical { background: var(--sev-critical-soft); color: var(--sev-critical-text); }
.fa-chip-x { background: none; border: 0; font-size: 15px; line-height: 1; cursor: pointer; color: inherit; opacity: .6; padding: 0 2px; border-radius: 50%; }
.fa-chip-x:hover { opacity: 1; }

/* ============================================================ Frosted Aura: gold-low contrast fixes */
.fa-tl-low { color: #1a1e20; }
.fa-toast-low .fa-toast-icon { color: var(--sev-low-text); }

/* ============================================================ Frosted Aura charts */
.fa-radar svg { overflow: visible; }
.fa-gauge { display: inline-flex; flex-direction: column; align-items: center; }
.fa-gauge svg { display: block; }
.fa-gauge-foot { display: flex; flex-direction: column; align-items: center; margin-top: -8px; }
.fa-gauge-num { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.fa-gauge-label { font-family: var(--font-text); font-size: 12px; color: var(--ink-muted); }
.fa-bullet { font-family: var(--font-text); width: 100%; min-width: 220px; }
.fa-bullet svg { display: block; }
.fa-bullet-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); font-size: 13px; font-weight: 600; color: var(--ink-secondary); margin-bottom: 6px; }
.fa-bullet-val { font-family: var(--font-mono); color: var(--ink); }