@import 'vendor/fontawesome/css/all.min.css';

/* SQE Suite DS — tokens + components in one file · prefix hz- · prefix hz- · default theme: blue */

/* Inter (self-hosted) */
@font-face {
  font-family: 'Inter';
  src: url('vendor/fonts/Inter-VariableFont.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('vendor/fonts/Inter-Italic-VariableFont.ttf') format('truetype');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* IBM Plex Sans (self-hosted) — display only */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('vendor/fonts/IBMPlexSans-VariableFont.ttf') format('truetype');
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('vendor/fonts/IBMPlexSans-Italic-VariableFont.ttf') format('truetype');
  font-weight: 100 700; font-style: italic; font-display: swap;
}

/* Color ramps */
:root {
  --hz-blue-50:#E6F0FD;     --hz-blue-100:#C2DCFA;    --hz-blue-200:#91C0F6;    --hz-blue-300:#5AA0F2;    --hz-blue-400:#2E86EF;    --hz-blue-500:#006CEB;
  --hz-blue-600:#005CC8;    --hz-blue-700:#004DA7;    --hz-blue-800:#003E86;    --hz-blue-900:#00316A;    --hz-blue-950:#00234D;

  --hz-green-50:#CBF5E6;    --hz-green-100:#8AE5C5;   --hz-green-200:#42DBA6;   --hz-green-300:#21C48B;   --hz-green-400:#1AB07C;   --hz-green-500:#159367;
  --hz-green-600:#107853;   --hz-green-700:#0F6B4B;   --hz-green-800:#0C573D;   --hz-green-900:#154232;   --hz-green-950:#0F2E23;

  --hz-magenta-50:#FFD4F8;  --hz-magenta-100:#FEAAED; --hz-magenta-200:#FC83DE; --hz-magenta-300:#F863CF; --hz-magenta-400:#F14AC0; --hz-magenta-500:#E437AE;
  --hz-magenta-600:#C32690; --hz-magenta-700:#9B1C72; --hz-magenta-800:#731353; --hz-magenta-900:#4D0C37; --hz-magenta-950:#26061B;

  --hz-neutral-0:#FFFFFF;   --hz-neutral-50:#F9FAFC;  --hz-neutral-100:#EDF0F5; --hz-neutral-200:#D5DBE5; --hz-neutral-300:#BAC3D1; --hz-neutral-400:#A4AEBD;
  --hz-neutral-500:#8490A1; --hz-neutral-600:#677485; --hz-neutral-700:#505D6E; --hz-neutral-800:#3B4552; --hz-neutral-900:#29313B; --hz-neutral-950:#1E252E; --hz-neutral-1000:#13171C;

  --hz-orange-50:#FFD9CC;   --hz-orange-100:#FEB69C;  --hz-orange-200:#FC976E;  --hz-orange-300:#F87E49;  --hz-orange-400:#F16A2C;  --hz-orange-500:#E45A18;
  --hz-orange-600:#C3470A;  --hz-orange-700:#9B3705;  --hz-orange-800:#732802;  --hz-orange-900:#4D1A01;  --hz-orange-950:#260D00;

  --hz-purple-50:#E5D9FF;   --hz-purple-100:#D0B9FE;  --hz-purple-200:#B795FC;  --hz-purple-300:#A277F8;  --hz-purple-400:#9160F1;  --hz-purple-500:#7C48E4;
  --hz-purple-600:#6536C3;  --hz-purple-700:#4F299B;  --hz-purple-800:#3A1D73;  --hz-purple-900:#26134D;  --hz-purple-950:#130926;

  --hz-red-50:#FFD9D9;      --hz-red-100:#FAA6A6;     --hz-red-200:#F57878;     --hz-red-300:#EC5151;     --hz-red-400:#E53535;     --hz-red-500:#D92222;
  --hz-red-600:#BA1313;     --hz-red-700:#940D0D;     --hz-red-800:#6F0707;     --hz-red-900:#4A0404;     --hz-red-950:#260202;

  --hz-teal-50:#DBF3FF;     --hz-teal-100:#AEE4FE;    --hz-teal-200:#82D3FC;    --hz-teal-300:#62C7F8;    --hz-teal-400:#3FB6F1;    --hz-teal-500:#2CA7E4;
  --hz-teal-600:#1C8CC3;    --hz-teal-700:#146E9B;    --hz-teal-800:#0D5173;    --hz-teal-900:#08364D;    --hz-teal-950:#041B26;

  --hz-yellow-50:#FFFEDE;   --hz-yellow-100:#FCE397;  --hz-yellow-200:#FFD966;  --hz-yellow-300:#FFCC33;  --hz-yellow-400:#FFBF00;  --hz-yellow-500:#E5AC00;
  --hz-yellow-600:#CC9900;  --hz-yellow-700:#B28600;  --hz-yellow-800:#997300;  --hz-yellow-900:#664C00;  --hz-yellow-950:#332600;

  /* SQE Suite — azure (600 is primary; shared across Polaris, Cosmos, Horizon, Brain, CognifAI) */
  --hz-azure-50:#E3F7FF;    --hz-azure-100:#88D5F3;   --hz-azure-200:#80C0FD;   --hz-azure-300:#8DA6FF;   --hz-azure-400:#389EFF;   --hz-azure-500:#0F76F1;
  --hz-azure-600:#0F47E0;   --hz-azure-700:#1437BF;   --hz-azure-800:#15289F;   --hz-azure-900:#121A80;   --hz-azure-950:#050947;
}

/* Primary palette (theme-scoped) — default: blue */
:root {
  --hz-horizon-primary:#006CEB; --hz-horizon-primary-dark:#004DA7; --hz-horizon-primary-medium:#005CC8;
  --hz-horizon-primary-light:#5AA0F2; --hz-horizon-primary-soft:#91C0F6; --hz-horizon-primary-pale:#E6F0FD;
}
.theme-hz-green   { --hz-horizon-primary:#159367;--hz-horizon-primary-dark:#0F6B4B;--hz-horizon-primary-medium:#107853;--hz-horizon-primary-light:#21C48B;--hz-horizon-primary-soft:#42DBA6;--hz-horizon-primary-pale:#CBF5E6; }
.theme-hz-magenta { --hz-horizon-primary:#E437AE;--hz-horizon-primary-dark:#9B1C72;--hz-horizon-primary-medium:#C32690;--hz-horizon-primary-light:#F863CF;--hz-horizon-primary-soft:#FC83DE;--hz-horizon-primary-pale:#FFD4F8; }
.theme-hz-neutral { --hz-horizon-primary:#8490A1;--hz-horizon-primary-dark:#505D6E;--hz-horizon-primary-medium:#677485;--hz-horizon-primary-light:#BAC3D1;--hz-horizon-primary-soft:#D5DBE5;--hz-horizon-primary-pale:#F9FAFC; }
.theme-hz-orange  { --hz-horizon-primary:#E45A18;--hz-horizon-primary-dark:#9B3705;--hz-horizon-primary-medium:#C3470A;--hz-horizon-primary-light:#F87E49;--hz-horizon-primary-soft:#FC976E;--hz-horizon-primary-pale:#FFD9CC; }
.theme-hz-purple  { --hz-horizon-primary:#7C48E4;--hz-horizon-primary-dark:#4F299B;--hz-horizon-primary-medium:#6536C3;--hz-horizon-primary-light:#A277F8;--hz-horizon-primary-soft:#B795FC;--hz-horizon-primary-pale:#E5D9FF; }
.theme-hz-red     { --hz-horizon-primary:#D92222;--hz-horizon-primary-dark:#940D0D;--hz-horizon-primary-medium:#BA1313;--hz-horizon-primary-light:#EC5151;--hz-horizon-primary-soft:#F57878;--hz-horizon-primary-pale:#FFD9D9; }
.theme-hz-teal    { --hz-horizon-primary:#2CA7E4;--hz-horizon-primary-dark:#146E9B;--hz-horizon-primary-medium:#1C8CC3;--hz-horizon-primary-light:#62C7F8;--hz-horizon-primary-soft:#82D3FC;--hz-horizon-primary-pale:#DBF3FF; }
.theme-hz-yellow  { --hz-horizon-primary:#E5AC00;--hz-horizon-primary-dark:#B28600;--hz-horizon-primary-medium:#CC9900;--hz-horizon-primary-light:#FFCC33;--hz-horizon-primary-soft:#FFD966;--hz-horizon-primary-pale:#FFEFBF; }
.theme-hz-azure   { --hz-horizon-primary:#0F47E0;--hz-horizon-primary-dark:#15289F;--hz-horizon-primary-medium:#1437BF;--hz-horizon-primary-light:#389EFF;--hz-horizon-primary-soft:#8DA6FF;--hz-horizon-primary-pale:#E3F7FF; } /* SQE Suite */


/* Typography — 1rem = 16px */
:root {
  --hz-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --hz-text-2xs-size:.625rem;      --hz-text-2xs-lh:.75rem;       --hz-text-2xs-ls:0em; /* micro labels/badges — use instead of arbitrary text-[10px] */
  --hz-text-body-s-size:.75rem;    --hz-text-body-s-lh:1rem;      --hz-text-body-s-ls:0em;
  --hz-text-body-r-size:.875rem;   --hz-text-body-r-lh:1.25rem;   --hz-text-body-r-ls:0em;
  --hz-text-body-l-size:1rem;      --hz-text-body-l-lh:1.5rem;    --hz-text-body-l-ls:0em;
  --hz-text-body-xl-size:1.125rem; --hz-text-body-xl-lh:1.625rem; --hz-text-body-xl-ls:0em;
  --hz-text-h1-size:2.25rem; --hz-text-h1-lh:2.75rem;  --hz-text-h1-ls:-0.02em;
  --hz-text-h2-size:2rem;    --hz-text-h2-lh:2.5rem;   --hz-text-h2-ls:-0.01em;
  --hz-text-h3-size:1.75rem; --hz-text-h3-lh:2.125rem; --hz-text-h3-ls:-0.01em;
  --hz-text-h4-size:1.5rem;  --hz-text-h4-lh:1.75rem;  --hz-text-h4-ls:-0.01em;
  --hz-text-h5-size:1.25rem; --hz-text-h5-lh:1.5rem;   --hz-text-h5-ls:-0.01em;
  --hz-text-h6-size:1.125rem;--hz-text-h6-lh:1.375rem; --hz-text-h6-ls:-0.01em;
  --hz-fw-regular:400; /* @kind font */ --hz-fw-semibold:600; /* @kind font */ --hz-fw-bold:700; /* @kind font */
  --hz-fw-light:300; /* @kind font */ --hz-fw-medium:500; /* @kind font */ --hz-fw-extrabold:800; /* @kind font */
  --hz-tracking-tighter:-0.05em; /* @kind font */ --hz-tracking-tight:-0.025em; /* @kind font */ --hz-tracking-normal:0em; /* @kind font */ --hz-tracking-wide:0.025em; /* @kind font */ --hz-tracking-wider:0.05em; /* @kind font */
  --hz-leading-none:1; /* @kind font */ --hz-leading-tight:1.25; /* @kind font */ --hz-leading-snug:1.375; /* @kind font */ --hz-leading-normal:1.5; /* @kind font */ --hz-leading-relaxed:1.625; /* @kind font */
  --hz-font-display: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hz-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* Spacing — 4px grid, numerically 1:1 with Tailwind's default spacing scale (space-N === Tailwind p-N/m-N/gap-N) */
:root {
  --hz-space-0:0; --hz-space-0\.5:.125rem; --hz-space-1:.25rem; --hz-space-1\.5:.375rem; --hz-space-2:.5rem; --hz-space-2\.5:.625rem;
  --hz-space-3:.75rem; --hz-space-3\.5:.875rem; --hz-space-4:1rem; --hz-space-5:1.25rem; --hz-space-6:1.5rem; --hz-space-8:2rem;
  --hz-space-10:2.5rem; --hz-space-12:3rem; --hz-space-16:4rem;
}

/* Radius */
:root { --hz-radius-sm:.25rem; --hz-radius-md:.375rem; --hz-radius-lg:.5rem; --hz-radius-xl:.75rem; --hz-radius-full:9999px; }

/* Component heights */
:root { --hz-size-sm:2rem; --hz-size-md:2.5rem; --hz-size-lg:3rem; }

/* Breakpoints — mirror Tailwind defaults 1:1 (sm/md/lg/xl/2xl). CSS custom properties can't be used inside @media conditions, so these are for JS/docs reference — the source of truth is Tailwind's own config. */
:root { --hz-bp-sm:40rem; --hz-bp-md:48rem; --hz-bp-lg:64rem; --hz-bp-xl:80rem; --hz-bp-2xl:96rem; }

/* Container max-widths — same steps as breakpoints */
:root { --hz-container-sm:40rem; --hz-container-md:48rem; --hz-container-lg:64rem; --hz-container-xl:80rem; --hz-container-2xl:96rem; }

/* Z-index scale — Tailwind's z-0…z-50 steps, plus semantic roles */
:root {
  --hz-z-0:0; /* @kind other */ --hz-z-10:10; /* @kind other */ --hz-z-20:20; /* @kind other */ --hz-z-30:30; /* @kind other */ --hz-z-40:40; /* @kind other */ --hz-z-50:50; /* @kind other */
  --hz-z-dropdown:20; /* @kind other */ --hz-z-sticky:30; /* @kind other */ --hz-z-overlay:40; /* @kind other */ --hz-z-modal:50; /* @kind other */ --hz-z-toast:60; /* @kind other */
}

/* Border width scale */
:root { --hz-border-0:0; /* @kind other */ --hz-border-1:1px; --hz-border-2:2px; --hz-border-4:4px; --hz-border-8:8px; }

/* Border style */
:root { --hz-border-style-solid:solid; /* @kind other */ --hz-border-style-dashed:dashed; /* @kind other */ --hz-border-style-dotted:dotted; /* @kind other */ }

/* Outline — focus rings */
:root {
  --hz-outline-width-1:1px; --hz-outline-width-2:2px; --hz-outline-width-4:4px;
  --hz-outline-color-focus:var(--hz-horizon-primary); --hz-outline-color-danger:var(--hz-red-500);
  --hz-outline-style:solid; /* @kind other */
  --hz-outline-offset-0:0; /* @kind other */ --hz-outline-offset-1:1px; --hz-outline-offset-2:2px;
}

/* Opacity scale */
:root { --hz-opacity-0:0; /* @kind other */ --hz-opacity-40:.4; /* @kind other */ --hz-opacity-50:.5; /* @kind other */ --hz-opacity-60:.6; /* @kind other */ --hz-opacity-80:.8; /* @kind other */ --hz-opacity-100:1; /* @kind other */ }

/* Aspect ratios */
:root { --hz-aspect-square:1/1; /* @kind other */ --hz-aspect-video:16/9; /* @kind other */ --hz-aspect-portrait:3/4; /* @kind other */ }

/* Shadows */
:root {
  --hz-shadow-sm: 0 1px 2px 0 rgb(0 0 0/.05);
  --hz-shadow-md: 0 4px 6px -1px rgb(0 0 0/.10), 0 2px 4px -2px rgb(0 0 0/.10);
  --hz-shadow-lg: 0 10px 15px -3px rgb(0 0 0/.10), 0 4px 6px -4px rgb(0 0 0/.10);
  --hz-shadow-xl: 0 20px 25px -5px rgb(0 0 0/.10), 0 8px 10px -6px rgb(0 0 0/.10);
  --hz-shadow-focus: 0 0 0 2px var(--hz-horizon-primary-light);
}

/* Text shadow */
:root { --hz-text-shadow-sm: 0 1px 2px rgb(0 0 0/.15); --hz-text-shadow-md: 0 2px 4px rgb(0 0 0/.2); }

/* Surface roles */
:root {
  --hz-surface-page:var(--hz-neutral-50); --hz-surface-card:var(--hz-neutral-0); --hz-surface-subtle:var(--hz-neutral-100);
  --hz-border-subtle:var(--hz-neutral-200); --hz-border-default:var(--hz-neutral-300); --hz-border-strong:var(--hz-neutral-500);
  --hz-text-primary:var(--hz-neutral-950); --hz-text-secondary:var(--hz-neutral-700); --hz-text-tertiary:var(--hz-neutral-500);
  --hz-text-disabled:var(--hz-neutral-400); --hz-text-inverse:var(--hz-neutral-0);
}

/* Dark mode — two ways to opt in, both setting the same surface-role tokens:
   1) automatic: follows OS preference via the media query below.
   2) explicit: apps with their own theme toggle set data-theme="dark" on <html> (or any ancestor) —
      that attribute scope wins over the media query so a user's manual choice always applies. */
@media (prefers-color-scheme: dark) {
  :root {
    --hz-surface-page:var(--hz-neutral-1000); --hz-surface-card:var(--hz-neutral-950); --hz-surface-subtle:var(--hz-neutral-900);
    --hz-border-subtle:var(--hz-neutral-800); --hz-border-default:var(--hz-neutral-700); --hz-border-strong:var(--hz-neutral-500);
    --hz-text-primary:var(--hz-neutral-0); --hz-text-secondary:var(--hz-neutral-300); --hz-text-tertiary:var(--hz-neutral-400);
    --hz-text-disabled:var(--hz-neutral-600); --hz-text-inverse:var(--hz-neutral-950);
  }
}
[data-theme="dark"] {
  --hz-surface-page:var(--hz-neutral-1000); --hz-surface-card:var(--hz-neutral-950); --hz-surface-subtle:var(--hz-neutral-900);
  --hz-border-subtle:var(--hz-neutral-800); --hz-border-default:var(--hz-neutral-700); --hz-border-strong:var(--hz-neutral-500);
  --hz-text-primary:var(--hz-neutral-0); --hz-text-secondary:var(--hz-neutral-300); --hz-text-tertiary:var(--hz-neutral-400);
  --hz-text-disabled:var(--hz-neutral-600); --hz-text-inverse:var(--hz-neutral-950);
}
[data-theme="light"] {
  --hz-surface-page:var(--hz-neutral-50); --hz-surface-card:var(--hz-neutral-0); --hz-surface-subtle:var(--hz-neutral-100);
  --hz-border-subtle:var(--hz-neutral-200); --hz-border-default:var(--hz-neutral-300); --hz-border-strong:var(--hz-neutral-500);
  --hz-text-primary:var(--hz-neutral-950); --hz-text-secondary:var(--hz-neutral-700); --hz-text-tertiary:var(--hz-neutral-500);
  --hz-text-disabled:var(--hz-neutral-400); --hz-text-inverse:var(--hz-neutral-0);
}

/* Scrim — off-system rgba() overlays (modal/drawer backdrops) replaced with one token */
:root { --hz-scrim: color-mix(in oklab, var(--hz-neutral-950) 60%, transparent); }

/* Categorical chart series — named roles instead of picking arbitrary palette hexes per chart */
:root {
  --hz-chart-1:var(--hz-blue-500); --hz-chart-2:var(--hz-orange-500); --hz-chart-3:var(--hz-purple-500); --hz-chart-4:var(--hz-teal-500);
  --hz-chart-5:var(--hz-green-500); --hz-chart-6:var(--hz-magenta-500); --hz-chart-7:var(--hz-yellow-600); --hz-chart-8:var(--hz-neutral-500);
}

/* Threshold scale — semantic low/mid/high bands for gauges, heatmaps, forecast variance (replaces ad hoc color-mix bands) */
:root {
  --hz-threshold-low:var(--hz-red-500); --hz-threshold-mid:var(--hz-yellow-500); --hz-threshold-high:var(--hz-green-500);
  --hz-threshold-low-bg:var(--hz-red-50); --hz-threshold-mid-bg:var(--hz-yellow-50); --hz-threshold-high-bg:var(--hz-green-50);
}

/* Heading font — headings resolve through this role instead of hardcoding --hz-font-sans, so the display
   typeface becomes reachable by setting --hz-heading-font on any ancestor (see .hz-font-display below)
   instead of overriding all six h1–h6 selectors per app. */
:root { --hz-heading-font: var(--hz-font-sans); }
.hz-font-display { --hz-heading-font: var(--hz-font-display); }


/* ============ COMPONENTS ============ */

/* Horizon components — depends on tokens.css · prefix hz- */

/* Base */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:var(--hz-font-sans); font-size:var(--hz-text-body-l-size); line-height:var(--hz-text-body-l-lh);
  color:var(--hz-text-primary); background:var(--hz-surface-page); -webkit-font-smoothing:antialiased;
}

/* Typography */
.hz-h1{font:var(--hz-fw-bold) var(--hz-text-h1-size)/var(--hz-text-h1-lh) var(--hz-heading-font);letter-spacing:var(--hz-text-h1-ls);margin:0;}
.hz-h2{font:var(--hz-fw-bold) var(--hz-text-h2-size)/var(--hz-text-h2-lh) var(--hz-heading-font);letter-spacing:var(--hz-text-h2-ls);margin:0;}
.hz-h3{font:var(--hz-fw-bold) var(--hz-text-h3-size)/var(--hz-text-h3-lh) var(--hz-heading-font);letter-spacing:var(--hz-text-h3-ls);margin:0;}
.hz-h4{font:var(--hz-fw-bold) var(--hz-text-h4-size)/var(--hz-text-h4-lh) var(--hz-heading-font);letter-spacing:var(--hz-text-h4-ls);margin:0;}
.hz-h5{font:var(--hz-fw-bold) var(--hz-text-h5-size)/var(--hz-text-h5-lh) var(--hz-heading-font);letter-spacing:var(--hz-text-h5-ls);margin:0;}
.hz-h6{font:var(--hz-fw-bold) var(--hz-text-h6-size)/var(--hz-text-h6-lh) var(--hz-heading-font);letter-spacing:var(--hz-text-h6-ls);margin:0;}
.hz-body-xl{font:var(--hz-fw-regular) var(--hz-text-body-xl-size)/var(--hz-text-body-xl-lh) var(--hz-font-sans);}
.hz-body-l {font:var(--hz-fw-regular) var(--hz-text-body-l-size)/var(--hz-text-body-l-lh) var(--hz-font-sans);}
.hz-body-r {font:var(--hz-fw-regular) var(--hz-text-body-r-size)/var(--hz-text-body-r-lh) var(--hz-font-sans);}
.hz-body-s {font:var(--hz-fw-regular) var(--hz-text-body-s-size)/var(--hz-text-body-s-lh) var(--hz-font-sans);}
.hz-bold{font-weight:var(--hz-fw-bold);} .hz-semi{font-weight:var(--hz-fw-semibold);}

/* Buttons */
.hz-btn{
  font-family:var(--hz-font-sans); display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:var(--hz-radius-lg); border:1px solid transparent; cursor:pointer; user-select:none; white-space:nowrap;
  transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s;
  padding:0 1rem; height:var(--hz-size-md);
  font-size:var(--hz-text-body-l-size); line-height:var(--hz-text-body-l-lh); font-weight:var(--hz-fw-bold);
}
.hz-btn--sm{ height:var(--hz-size-sm); padding:0 1rem; font-size:var(--hz-text-body-r-size); line-height:var(--hz-text-body-r-lh); }
.hz-btn--lg{ height:var(--hz-size-lg); padding:0 1.5rem; }
.hz-btn--full{ width:100%; }
.hz-btn:focus-visible{ outline:none; box-shadow:var(--hz-shadow-focus); }
.hz-btn--primary{ background:var(--hz-horizon-primary); color:#fff; }
.hz-btn--primary:hover{ background:var(--hz-horizon-primary-medium); }
.hz-btn--primary:active{ background:var(--hz-horizon-primary-dark); }
.hz-btn--primary[disabled],.hz-btn--primary.is-disabled{ background:var(--hz-neutral-100); color:var(--hz-neutral-400); cursor:not-allowed; }
.hz-btn--secondary{ background:transparent; color:var(--hz-horizon-primary); border-color:var(--hz-horizon-primary); }
.hz-btn--secondary:hover{ background:var(--hz-horizon-primary-pale); border-color:var(--hz-horizon-primary-medium); }
.hz-btn--secondary:active{ border-color:var(--hz-horizon-primary-dark); }
.hz-btn--secondary[disabled]{ border-color:var(--hz-neutral-100); color:var(--hz-neutral-400); cursor:not-allowed; }
.hz-btn--text{ background:transparent; color:var(--hz-horizon-primary); border-color:transparent; }
.hz-btn--text:hover{ background:var(--hz-horizon-primary-pale); }
.hz-btn--text[disabled]{ color:var(--hz-neutral-400); cursor:not-allowed; }
.hz-btn--danger{ background:var(--hz-red-500); color:#fff; }
.hz-btn--danger:hover{ background:var(--hz-red-600); }
.hz-btn .hz-icon{ width:1.25em; height:1.25em; display:block; }
.hz-btn > .fa,.hz-btn > .far,.hz-btn > .fas,.hz-btn > .fal,.hz-btn > .fab{ display:inline-flex; align-items:center; line-height:0; }

/* Chips */
.hz-chip{
  display:inline-flex; align-items:center; gap:.25rem;
  border-radius:var(--hz-radius-lg); border:1px solid var(--hz-neutral-300);
  color:var(--hz-neutral-600); font-size:var(--hz-text-body-r-size); line-height:var(--hz-text-body-r-lh);
  padding:.125rem .75rem; background:transparent; white-space:nowrap;
}
.hz-chip--lg{ padding:.5rem .75rem; }
.hz-chip--active{ color:var(--hz-horizon-primary); background:var(--hz-horizon-primary-pale); border-color:var(--hz-horizon-primary); }
.hz-chip--clickable{ cursor:pointer; }
.hz-chip--clickable:hover{ color:var(--hz-horizon-primary); border-color:var(--hz-horizon-primary); }
.hz-chip--disabled{ background:var(--hz-neutral-50); color:var(--hz-neutral-300); border-color:transparent; cursor:not-allowed; }
.hz-chip > .fa,.hz-chip > .far,.hz-chip > .fas,.hz-chip > .fal,.hz-chip > .fab{ flex:none; }
.hz-chip__dot{ width:.5rem; height:.5rem; border-radius:999px; background:currentColor; flex:none; }
.hz-chip__close{
  display:inline-flex; align-items:center; justify-content:center;
  width:1rem; height:1rem; margin-right:-.125rem; margin-left:.125rem;
  border:0; background:transparent; border-radius:999px; cursor:pointer; color:inherit; opacity:.7;
}
.hz-chip__close:hover{ opacity:1; background:color-mix(in oklab, currentColor 12%, transparent); }
.hz-chip--with-avatar{ padding-left:.125rem; }
.hz-chip--with-avatar > .hz-avatar{ margin-right:.125rem; }
.hz-chip--success{ color:var(--hz-green-700);  background:var(--hz-green-50);  border-color:var(--hz-green-200); }
.hz-chip--warn   { color:var(--hz-yellow-700); background:var(--hz-yellow-50); border-color:var(--hz-yellow-200); }
.hz-chip--danger { color:var(--hz-red-700);    background:var(--hz-red-50);    border-color:var(--hz-red-200); }
.hz-chip--info   { color:var(--hz-teal-700);   background:var(--hz-teal-50);   border-color:var(--hz-teal-200); }

/* Card */
.hz-card{
  background:var(--hz-surface-card); border-radius:var(--hz-radius-lg);
  border:1px solid var(--hz-border-subtle); box-shadow:var(--hz-shadow-md); display:flex; flex-direction:column;
}
.hz-card--borderless{ border-color:transparent; }
.hz-card--clickable{ cursor:pointer; transition:box-shadow .2s; }
.hz-card--clickable:hover{ box-shadow:var(--hz-shadow-lg); }
.hz-card__header{ display:flex; justify-content:space-between; align-items:center; padding:1.5rem; border-bottom:1px solid var(--hz-border-subtle); }
.hz-card__body{ padding:1.5rem; display:flex; flex-direction:column; gap:.75rem; }
.hz-card__footer{ padding:1.5rem; border-top:1px solid var(--hz-border-subtle); }

/* Field */
.hz-field{ display:flex; flex-direction:column; gap:.375rem; }
.hz-field__control{
  position:relative; display:flex; align-items:center; gap:.5rem;
  background:transparent; border:1px solid var(--hz-border-default); border-radius:var(--hz-radius-md);
  padding:0 .875rem; height:56px; transition:border-color .15s, box-shadow .15s;
}
.hz-field__control:hover{ border-color:var(--hz-text-primary); }
.hz-field__control:focus-within{ border-color:var(--hz-horizon-primary); box-shadow:inset 0 0 0 1px var(--hz-horizon-primary); }
.hz-field__label{
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
  font-size:var(--hz-text-body-l-size); line-height:1; color:var(--hz-text-tertiary); font-weight:400;
  pointer-events:none; padding:0 .25rem; background:var(--hz-surface-card);
  transition:top .15s, font-size .15s, color .15s;
}
.hz-field__input{
  flex:1; border:0; outline:none; background:transparent;
  font-family:inherit; font-size:var(--hz-text-body-l-size); line-height:1.25; color:var(--hz-text-primary); padding:0;
}
.hz-field__input::placeholder{ color:transparent; }
.hz-field__control:focus-within .hz-field__label,
.hz-field__control:has(.hz-field__input:not(:placeholder-shown)) .hz-field__label,
.hz-field--filled .hz-field__label{ top:0; font-size:var(--hz-text-body-s-size); font-weight:500; }
.hz-field__control:focus-within .hz-field__label{ color:var(--hz-horizon-primary); }
.hz-field--error .hz-field__control{ border-color:var(--hz-red-500); }
.hz-field--error .hz-field__control:focus-within{ box-shadow:inset 0 0 0 1px var(--hz-red-500); }
.hz-field--error .hz-field__label,
.hz-field--error .hz-field__control:focus-within .hz-field__label{ color:var(--hz-red-600); }
.hz-field--error .hz-field__help{ color:var(--hz-red-600); }
.hz-field--disabled .hz-field__control{ border-style:dashed; opacity:.6; pointer-events:none; }
.hz-field__help{ font-size:var(--hz-text-body-s-size); line-height:var(--hz-text-body-s-lh); color:var(--hz-text-tertiary); padding:0 .875rem; }

/* Check / Radio / Switch */
.hz-check,.hz-radio{
  appearance:none; width:1.125rem; height:1.125rem;
  border:1.5px solid var(--hz-border-default); background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.hz-check{ border-radius:var(--hz-radius-sm); }
.hz-radio{ border-radius:999px; }
.hz-check:checked{
  background:var(--hz-horizon-primary); border-color:var(--hz-horizon-primary);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M6.2 10.8 3.4 8l-1 1L6.2 12.8l7.5-7.5-1-1z'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:80%;
}
.hz-radio:checked{ border-color:var(--hz-horizon-primary); box-shadow:inset 0 0 0 4px var(--hz-horizon-primary); }
.hz-switch{ position:relative; display:inline-block; width:2.5rem; height:1.375rem; cursor:pointer; }
.hz-switch input{ opacity:0; width:0; height:0; }
.hz-switch__slider{ position:absolute; inset:0; background:var(--hz-neutral-300); border-radius:999px; transition:background .2s; }
.hz-switch__slider::before{
  content:""; position:absolute; left:2px; top:2px; width:1.125rem; height:1.125rem;
  background:#fff; border-radius:50%; transition:transform .2s; box-shadow:var(--hz-shadow-sm);
}
.hz-switch input:checked + .hz-switch__slider{ background:var(--hz-horizon-primary); }
.hz-switch input:checked + .hz-switch__slider::before{ transform:translateX(1.125rem); }

/* Divider */
.hz-divider{ height:1px; background:var(--hz-border-subtle); border:0; margin:0; }
.hz-divider--v{ width:1px; height:auto; align-self:stretch; }

/* Tabs */
.hz-tabs{ display:flex; gap:1.5rem; border-bottom:1px solid var(--hz-border-subtle); }
.hz-tab{
  background:none; border:0; padding:.75rem 0; cursor:pointer;
  font-size:var(--hz-text-body-l-size); color:var(--hz-text-secondary); font-weight:var(--hz-fw-semibold);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s;
}
.hz-tab:hover{ color:var(--hz-horizon-primary); }
.hz-tab.is-active{ color:var(--hz-horizon-primary); border-color:var(--hz-horizon-primary); }

/* Tabs — pill */
.hz-tabs--pill{ display:inline-flex; gap:.125rem; padding:.1875rem; background:var(--hz-neutral-100); border-radius:var(--hz-radius-md); border:0; }
.hz-tab--pill{ background:none; border:0; padding:.5rem .875rem; border-radius:var(--hz-radius-sm); cursor:pointer; font-size:var(--hz-text-body-r-size); color:var(--hz-text-tertiary); font-weight:var(--hz-fw-semibold); margin-bottom:0; transition:color .15s, background .15s; }
.hz-tab--pill:hover{ color:var(--hz-text-primary); }
.hz-tab--pill.is-active{ background:var(--hz-surface-card); color:var(--hz-text-primary); box-shadow:var(--hz-shadow-sm); }

/* Badge */
.hz-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.25rem; height:1.25rem; padding:0 .375rem; border-radius:999px;
  background:var(--hz-red-500); color:#fff; font-size:var(--hz-text-body-s-size); line-height:1; font-weight:var(--hz-fw-bold);
}
.hz-badge--dot{ width:.5rem; height:.5rem; min-width:0; padding:0; }
.hz-badge > .fa,.hz-badge > .far,.hz-badge > .fas,.hz-badge > .fal,.hz-badge > .fab{ flex:none; }
.hz-badge--outline{ background:transparent; color:var(--hz-text-primary); box-shadow:inset 0 0 0 1px var(--hz-border); }
.hz-badge--success{ background:var(--hz-green-600); }
.hz-badge--warn{ background:var(--hz-yellow-500); color:var(--hz-neutral-900); }
.hz-badge--danger{ background:var(--hz-red-600); }
.hz-badge--info{ background:var(--hz-teal-600); }
.hz-badge--neutral{ background:var(--hz-neutral-200); color:var(--hz-text-primary); }
.hz-badge--soft{ background:var(--hz-neutral-100); color:var(--hz-text-primary); gap:.375rem; padding:0 .5rem; }
.hz-badge--soft .hz-badge__dot{ width:.375rem; height:.375rem; border-radius:999px; background:currentColor; }
.hz-badge--soft.hz-badge--success{ background:var(--hz-green-50);  color:var(--hz-green-700); }
.hz-badge--soft.hz-badge--warn   { background:var(--hz-yellow-50); color:var(--hz-yellow-700); }
.hz-badge--soft.hz-badge--danger { background:var(--hz-red-50);    color:var(--hz-red-700); }
.hz-badge--soft.hz-badge--info   { background:var(--hz-teal-50);   color:var(--hz-teal-700); }

/* Alert */
.hz-alert{ display:flex; gap:.75rem; align-items:flex-start; padding:.875rem 1rem; border-radius:var(--hz-radius-lg); border:1px solid; background:var(--hz-surface-card); }
.hz-alert__icon{ flex:none; width:1.25rem; height:1.25rem; }
.hz-alert--info   { border-color:var(--hz-teal-200);   background:var(--hz-teal-50);   color:var(--hz-teal-800); }
.hz-alert--success{ border-color:var(--hz-green-200);  background:var(--hz-green-50);  color:var(--hz-green-800); }
.hz-alert--warn   { border-color:var(--hz-yellow-200); background:var(--hz-yellow-50); color:var(--hz-yellow-900); }
.hz-alert--danger { border-color:var(--hz-red-200);    background:var(--hz-red-50);    color:var(--hz-red-800); }

/* Avatar */
.hz-avatar{
  width:2.5rem; height:2.5rem; border-radius:999px;
  background:var(--hz-horizon-primary-pale); color:var(--hz-horizon-primary);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:var(--hz-fw-bold); font-size:var(--hz-text-body-r-size); flex:none;
}
.hz-avatar--sm{ width:2rem; height:2rem; font-size:var(--hz-text-body-s-size); }
.hz-avatar--lg{ width:3rem; height:3rem; font-size:var(--hz-text-body-l-size); }

/* Table */
.hz-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--hz-text-body-r-size); }
.hz-table th,.hz-table td{ text-align:left; padding:.875rem 1rem; border-bottom:1px solid var(--hz-border-subtle); }
.hz-table th{
  font-size:var(--hz-text-body-s-size); text-transform:uppercase; letter-spacing:.04em;
  color:var(--hz-text-tertiary); font-weight:var(--hz-fw-semibold); background:var(--hz-neutral-50);
}
.hz-table tbody tr:hover td{ background:var(--hz-neutral-50); }

/* Progress */
.hz-progress{ height:.5rem; background:var(--hz-neutral-100); border-radius:999px; overflow:hidden; }
.hz-progress__bar{ height:100%; background:var(--hz-horizon-primary); border-radius:999px; }

/* Account menu trigger (pairs with .hz-popover + .hz-menu) */
.hz-account-trigger{ display:flex; align-items:center; gap:.625rem; padding:.5rem .625rem; border-radius:var(--hz-radius-md); cursor:pointer; border:0; background:none; width:100%; text-align:left; }
.hz-account-trigger:hover{ background:var(--hz-neutral-50); }
.hz-account-trigger__name{ font-weight:var(--hz-fw-semibold); font-size:var(--hz-text-body-r-size); color:var(--hz-text-primary); line-height:1.2; }
.hz-account-trigger__role{ font-size:var(--hz-text-body-s-size); color:var(--hz-text-tertiary); }
.hz-account-trigger__chevron{ margin-left:auto; color:var(--hz-text-tertiary); flex:none; }

/* Chat message bubble + composer + AI markdown prose */
.hz-chat{ display:flex; flex-direction:column; gap:1rem; }
.hz-chat__row{ display:flex; gap:.625rem; max-width:640px; }
.hz-chat__row--user{ flex-direction:row-reverse; margin-left:auto; }
.hz-chat__avatar{ flex:none; }
.hz-chat__bubble{ background:var(--hz-neutral-100); color:var(--hz-text-primary); padding:.75rem 1rem; border-radius:var(--hz-radius-lg); border-bottom-left-radius:.25rem; font-size:var(--hz-text-body-r-size); line-height:1.5; }
.hz-chat__row--user .hz-chat__bubble{ background:var(--hz-horizon-primary); color:#fff; border-bottom-left-radius:var(--hz-radius-lg); border-bottom-right-radius:.25rem; }
.hz-chat__meta{ font-size:var(--hz-text-body-s-size); color:var(--hz-text-tertiary); margin-top:.25rem; }
.hz-composer{ display:flex; align-items:flex-end; gap:.5rem; padding:.625rem .75rem; border:1px solid var(--hz-border-default); border-radius:var(--hz-radius-lg); background:var(--hz-surface-card); }
.hz-composer:focus-within{ border-color:var(--hz-horizon-primary); box-shadow:var(--hz-shadow-focus); }
.hz-composer textarea{ flex:1; border:0; outline:0; resize:none; background:none; font-family:inherit; font-size:var(--hz-text-body-r-size); color:var(--hz-text-primary); max-height:120px; min-height:24px; }
.hz-composer__actions{ display:flex; gap:.375rem; flex:none; }
.hz-composer__btn{ width:2rem; height:2rem; border-radius:var(--hz-radius-md); border:0; background:none; color:var(--hz-text-tertiary); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.hz-composer__btn:hover{ background:var(--hz-neutral-100); color:var(--hz-text-primary); }
.hz-composer__send{ background:var(--hz-horizon-primary); color:#fff; }
.hz-composer__send:hover{ background:var(--hz-horizon-primary-medium); }
.hz-composer__send:disabled{ background:var(--hz-neutral-100); color:var(--hz-neutral-400); cursor:not-allowed; }
.hz-composer--disabled{ opacity:.6; pointer-events:none; }
.hz-prose{ font-size:var(--hz-text-body-r-size); line-height:1.6; color:var(--hz-text-primary); }
.hz-prose p{ margin:0 0 .75rem; }
.hz-prose p:last-child{ margin-bottom:0; }
.hz-prose ul,.hz-prose ol{ margin:0 0 .75rem; padding-left:1.25rem; }
.hz-prose li{ margin-bottom:.25rem; }
.hz-prose strong{ font-weight:var(--hz-fw-semibold); }
.hz-prose code{ font-family:var(--hz-font-mono); background:var(--hz-neutral-100); padding:.125rem .375rem; border-radius:var(--hz-radius-sm); font-size:.9em; }
.hz-prose pre{ background:var(--hz-neutral-900); color:var(--hz-neutral-50); padding:.875rem 1rem; border-radius:var(--hz-radius-md); overflow-x:auto; margin:0 0 .75rem; }
.hz-prose pre code{ background:none; padding:0; color:inherit; }

/* Reasoning / step trace */
.hz-trace{ border:1px solid var(--hz-border-subtle); border-radius:var(--hz-radius-lg); overflow:hidden; }
.hz-trace__header{ display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; background:var(--hz-neutral-50); cursor:pointer; font-size:var(--hz-text-body-s-size); font-weight:var(--hz-fw-semibold); color:var(--hz-text-secondary); }
.hz-trace__header i.fa-chevron-down{ margin-left:auto; transition:transform .15s; }
.hz-trace.is-open .hz-trace__header i.fa-chevron-down{ transform:rotate(180deg); }
.hz-trace__steps{ padding:.25rem 1rem 1rem; display:flex; flex-direction:column; gap:.625rem; }
.hz-trace__step{ display:flex; gap:.625rem; font-size:var(--hz-text-body-s-size); color:var(--hz-text-tertiary); }
.hz-trace__step-icon{ flex:none; width:1.25rem; height:1.25rem; border-radius:999px; background:var(--hz-neutral-100); display:inline-flex; align-items:center; justify-content:center; font-size:10px; color:var(--hz-text-tertiary); }
.hz-trace__step.is-done .hz-trace__step-icon{ background:var(--hz-green-50); color:var(--hz-green-700); }
.hz-trace__step.is-active .hz-trace__step-icon{ background:var(--hz-horizon-primary-pale); color:var(--hz-horizon-primary); }

/* Agent action card (AI proposes, human decides) */
.hz-agent-card{ border:1px solid var(--hz-border-subtle); border-radius:var(--hz-radius-lg); padding:1rem 1.125rem; background:var(--hz-surface-card); display:flex; flex-direction:column; gap:.75rem; }
.hz-agent-card__header{ display:flex; align-items:center; gap:.625rem; }
.hz-agent-card__icon{ width:2rem; height:2rem; border-radius:999px; background:var(--hz-horizon-primary-pale); color:var(--hz-horizon-primary); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.hz-agent-card__title{ font-weight:var(--hz-fw-semibold); font-size:var(--hz-text-body-r-size); color:var(--hz-text-primary); }
.hz-agent-card__sub{ font-size:var(--hz-text-body-s-size); color:var(--hz-text-tertiary); }
.hz-agent-card__body{ font-size:var(--hz-text-body-r-size); color:var(--hz-text-secondary); }
.hz-agent-card__actions{ display:flex; gap:.5rem; justify-content:flex-end; }
.hz-agent-card--resolved{ opacity:.65; }
.hz-agent-card__resolved-tag{ font-size:var(--hz-text-body-s-size); font-weight:var(--hz-fw-semibold); display:inline-flex; align-items:center; gap:.375rem; }
.hz-agent-card__resolved-tag--approved{ color:var(--hz-green-700); }
.hz-agent-card__resolved-tag--rejected{ color:var(--hz-red-600); }

/* Confidence / opinion display */
.hz-confidence{ display:flex; align-items:center; gap:.625rem; }
.hz-confidence__bar{ flex:1; height:.375rem; background:var(--hz-neutral-100); border-radius:999px; overflow:hidden; }
.hz-confidence__fill{ height:100%; border-radius:999px; }
.hz-confidence__fill--high{ background:var(--hz-threshold-high); }
.hz-confidence__fill--mid{ background:var(--hz-threshold-mid); }
.hz-confidence__fill--low{ background:var(--hz-threshold-low); }
.hz-confidence__label{ font-size:var(--hz-text-body-s-size); font-weight:var(--hz-fw-semibold); color:var(--hz-text-secondary); flex:none; }

/* Job / run status */
.hz-run-status{ display:inline-flex; align-items:center; gap:.375rem; font-size:var(--hz-text-body-s-size); font-weight:var(--hz-fw-semibold); padding:.1875rem .625rem; border-radius:999px; }
.hz-run-status--queued{ background:var(--hz-neutral-100); color:var(--hz-text-tertiary); }
.hz-run-status--running{ background:var(--hz-horizon-primary-pale); color:var(--hz-horizon-primary-dark); }
.hz-run-status--running .hz-run-status__dot{ animation:hz-skeleton-pulse 1.2s ease-in-out infinite; }
.hz-run-status--success{ background:var(--hz-green-50); color:var(--hz-green-700); }
.hz-run-status--failed{ background:var(--hz-red-50); color:var(--hz-red-600); }
.hz-run-status__dot{ width:.375rem; height:.375rem; border-radius:999px; background:currentColor; }

/* Camera / permission gate + calibration orb (proctoring shell) */
@keyframes hz-spin{ to{ transform:rotate(360deg); } }
.hz-camera-gate{ aspect-ratio:16/9; background:var(--hz-neutral-900); border-radius:var(--hz-radius-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; gap:.75rem; position:relative; overflow:hidden; }
.hz-camera-gate__icon{ width:3rem; height:3rem; border-radius:999px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.hz-camera-gate__title{ font-weight:var(--hz-fw-semibold); font-size:var(--hz-text-body-r-size); }
.hz-camera-gate__desc{ font-size:var(--hz-text-body-s-size); opacity:.7; text-align:center; max-width:260px; }
.hz-camera-gate__orb{ width:110px; height:110px; border-radius:999px; border:3px solid var(--hz-horizon-primary-medium); display:flex; align-items:center; justify-content:center; position:relative; font-size:var(--hz-text-h4-size); font-weight:var(--hz-fw-bold); }
.hz-camera-gate__orb::after{ content:''; position:absolute; inset:-3px; border-radius:999px; border:3px solid transparent; border-top-color:var(--hz-horizon-primary-light); animation:hz-spin 1.2s linear infinite; }

/* Integrity / verdict badges */
.hz-verdict{ display:inline-flex; align-items:center; gap:.375rem; padding:.25rem .75rem; border-radius:999px; font-size:var(--hz-text-body-s-size); font-weight:var(--hz-fw-semibold); }
.hz-verdict--pass{ background:var(--hz-green-50); color:var(--hz-green-700); }
.hz-verdict--flag{ background:var(--hz-yellow-50); color:var(--hz-yellow-700); }
.hz-verdict--fail{ background:var(--hz-red-50); color:var(--hz-red-600); }

/* Score bar (dimension scorecards, confidence-style) */
.hz-score-row{ display:flex; align-items:center; gap:.75rem; }
.hz-score-row__label{ width:130px; flex:none; font-size:var(--hz-text-body-s-size); color:var(--hz-text-secondary); }
.hz-score-row__bar{ flex:1; height:.5rem; background:var(--hz-neutral-100); border-radius:999px; overflow:hidden; }
.hz-score-row__fill{ height:100%; border-radius:999px; background:var(--hz-horizon-primary); }
.hz-score-row__value{ width:2.5rem; flex:none; text-align:right; font-size:var(--hz-text-body-s-size); font-weight:var(--hz-fw-semibold); color:var(--hz-text-primary); }

/* Relationship graph (node-link, static layout) */
.hz-graph{ position:relative; background:var(--hz-neutral-50); border-radius:var(--hz-radius-lg); overflow:hidden; }
.hz-graph__node{ position:absolute; display:flex; flex-direction:column; align-items:center; gap:.375rem; transform:translate(-50%,-50%); }
.hz-graph__node-dot{ width:2.25rem; height:2.25rem; border-radius:999px; background:var(--hz-horizon-primary-pale); color:var(--hz-horizon-primary); display:flex; align-items:center; justify-content:center; font-weight:var(--hz-fw-bold); font-size:var(--hz-text-body-s-size); box-shadow:0 0 0 3px var(--hz-neutral-50); }
.hz-graph__node-dot--center{ background:var(--hz-horizon-primary); color:#fff; width:2.75rem; height:2.75rem; }
.hz-graph__node-label{ font-size:var(--hz-text-2xs-size); font-weight:var(--hz-fw-semibold); color:var(--hz-text-primary); white-space:nowrap; background:var(--hz-surface-card); padding:.125rem .5rem; border-radius:999px; box-shadow:var(--hz-shadow-sm); }

/* Document / file review split panel */
.hz-doc-review{ display:grid; grid-template-columns:1fr 300px; gap:1rem; height:420px; }
.hz-doc-review__preview{ background:var(--hz-neutral-100); border-radius:var(--hz-radius-lg); display:flex; align-items:center; justify-content:center; color:var(--hz-text-tertiary); flex-direction:column; gap:.5rem; }
.hz-doc-review__panel{ border:1px solid var(--hz-border-subtle); border-radius:var(--hz-radius-lg); padding:1rem; display:flex; flex-direction:column; gap:.75rem; overflow-y:auto; }
.hz-doc-review__comment{ display:flex; gap:.5rem; font-size:var(--hz-text-body-s-size); }
.hz-doc-review__comment-body{ background:var(--hz-neutral-50); border-radius:var(--hz-radius-md); padding:.5rem .75rem; flex:1; }
.hz-doc-review__comment-name{ font-weight:var(--hz-fw-semibold); color:var(--hz-text-primary); }
.hz-doc-review__comment-time{ font-size:var(--hz-text-2xs-size); color:var(--hz-text-tertiary); margin-left:.375rem; }

/* Product tour / coachmark */
.hz-coachmark{ position:relative; display:inline-flex; }
.hz-coachmark__pulse{ position:absolute; inset:-4px; border-radius:999px; border:2px solid var(--hz-horizon-primary); animation:hz-skeleton-pulse 1.5s ease-in-out infinite; }
.hz-tour-card{ background:var(--hz-neutral-950); color:#fff; border-radius:var(--hz-radius-lg); padding:1rem 1.125rem; max-width:280px; box-shadow:var(--hz-shadow-xl); display:flex; flex-direction:column; gap:.625rem; }
.hz-tour-card__step{ font-size:var(--hz-text-2xs-size); text-transform:uppercase; letter-spacing:.06em; opacity:.6; }
.hz-tour-card__title{ font-weight:var(--hz-fw-semibold); font-size:var(--hz-text-body-r-size); }
.hz-tour-card__desc{ font-size:var(--hz-text-body-s-size); opacity:.85; }
.hz-tour-card__footer{ display:flex; justify-content:space-between; align-items:center; margin-top:.25rem; }
.hz-tour-card__dots{ display:flex; gap:.25rem; }
.hz-tour-card__dot{ width:.375rem; height:.375rem; border-radius:999px; background:rgba(255,255,255,.3); }
.hz-tour-card__dot.is-active{ background:#fff; }

/* Theme (appearance) picker */
.hz-theme-picker{ display:flex; gap:.625rem; flex-wrap:wrap; }
.hz-theme-swatch{ width:2rem; height:2rem; border-radius:999px; cursor:pointer; border:2px solid transparent; box-shadow:0 0 0 1px var(--hz-border-subtle); }
.hz-theme-swatch.is-active{ border-color:var(--hz-text-primary); box-shadow:0 0 0 1px var(--hz-surface-card),0 0 0 3px var(--hz-text-primary); }

/* Sidebar */
.hz-sidebar{ width:268px; height:100%; background:var(--hz-surface-card); border-right:1px solid var(--hz-border-subtle); display:flex; flex-direction:column; }
.hz-sidebar--collapsed{ width:68px; }
.hz-sidebar--collapsed .hz-sidebar__item{ justify-content:center; }
.hz-sidebar--collapsed .hz-sidebar__label{ display:none; }
.hz-sidebar__item{
  display:flex; align-items:center; gap:.75rem; padding:.5rem .75rem; margin:.125rem .5rem;
  border-radius:var(--hz-radius-md); cursor:pointer; color:var(--hz-text-secondary);
  font-weight:500; font-size:var(--hz-text-body-r-size); position:relative;
}
.hz-sidebar__item:hover{ background:var(--hz-neutral-50); color:var(--hz-text-primary); }
.hz-sidebar__item.is-active{ background:var(--hz-horizon-primary-pale); color:var(--hz-horizon-primary); }
.hz-sidebar__item.is-active::before{
  content:""; position:absolute; left:-.5rem; top:.5rem; bottom:.5rem;
  width:4px; border-radius:0 var(--hz-radius-md) var(--hz-radius-md) 0; background:var(--hz-horizon-primary);
}
.hz-sidebar__icon{ width:1.25rem; height:1.25rem; flex:none; }

/* Topbar */
.hz-topbar{ height:56px; display:flex; align-items:center; gap:1rem; padding:0 1.5rem; background:var(--hz-surface-card); border-bottom:1px solid var(--hz-border-subtle); }

/* Kbd */
.hz-kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.5rem; padding:0 .375rem; height:1.25rem;
  border:1px solid var(--hz-border-default); border-bottom-width:2px; border-radius:var(--hz-radius-sm);
  background:var(--hz-surface-card); font-size:var(--hz-text-body-s-size); font-family:ui-monospace, monospace; color:var(--hz-text-secondary);
}

/* Toast */
.hz-toast{ display:flex; align-items:center; gap:.5rem; border-radius:var(--hz-radius-xl); background:var(--hz-neutral-950); color:#fff; padding:.75rem 1rem; min-height:44px; box-shadow:var(--hz-shadow-lg); }
.hz-toast__message{ flex:1; font-size:var(--hz-text-body-r-size); line-height:var(--hz-text-body-r-lh); font-weight:400; }
.hz-toast__action{ flex:none; font-size:var(--hz-text-body-r-size); line-height:var(--hz-text-body-r-lh); font-weight:var(--hz-fw-bold); background:none; border:0; color:#fff; cursor:pointer; padding:0; }
.hz-toast--error{ background:var(--hz-red-800); }
.hz-toast--success{ background:var(--hz-green-800); }

/* Tooltip */
.hz-tooltip{ position:relative; display:inline-flex; flex-direction:column; align-items:flex-start; gap:1rem; max-width:328px; background:var(--hz-neutral-950); color:#fff; border-radius:var(--hz-radius-xl); box-shadow:var(--hz-shadow-lg); padding:1rem; }
.hz-tooltip__row{ display:flex; gap:.5rem; align-items:flex-start; }
.hz-tooltip__text{ flex:1; font-size:var(--hz-text-body-l-size); line-height:var(--hz-text-body-l-lh); font-weight:400; }
.hz-tooltip__close{ flex:none; width:1.5rem; height:1.5rem; border:0; background:none; color:#fff; opacity:.8; cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.hz-tooltip__close:hover{ opacity:1; }
.hz-tooltip__arrow{ position:absolute; width:23px; height:11px; overflow:hidden; }
.hz-tooltip__arrow::before{ content:""; position:absolute; width:16px; height:16px; background:var(--hz-neutral-950); transform:rotate(45deg); left:3.5px; top:-8px; }
.hz-tooltip--top .hz-tooltip__arrow{ top:-11px; left:50%; margin-left:-11.5px; }
.hz-tooltip--bottom .hz-tooltip__arrow{ bottom:-11px; left:50%; margin-left:-11.5px; transform:scaleY(-1); }
.hz-tooltip--left .hz-tooltip__arrow{ left:-16px; top:50%; margin-top:-5.5px; transform:rotate(-90deg); }
.hz-tooltip--right .hz-tooltip__arrow{ right:-16px; top:50%; margin-top:-5.5px; transform:rotate(90deg); }

/* Pagination */
.hz-pagination{ display:flex; align-items:center; gap:.25rem; }
.hz-pagination__item{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 .5rem; border-radius:var(--hz-radius-sm); border:0; background:transparent; color:var(--hz-text-primary); font-size:var(--hz-text-body-r-size); line-height:var(--hz-text-body-r-lh); cursor:pointer; }
.hz-pagination__item:hover{ background:var(--hz-horizon-primary-pale); }
.hz-pagination__item.is-active{ background:var(--hz-horizon-primary); color:#fff; }
.hz-pagination__item:disabled{ color:var(--hz-text-disabled); cursor:not-allowed; background:transparent; }
.hz-pagination__ellipsis{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; color:var(--hz-text-tertiary); }
.hz-pagination__nav{ width:24px; padding:0 .25rem; }

/* Stepper */
.hz-stepper{ display:flex; align-items:flex-start; gap:1rem; }
.hz-stepper--vertical{ flex-direction:column; gap:0; }
.hz-stepper__step{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; flex:1; position:relative; }
.hz-stepper--vertical .hz-stepper__step{ flex-direction:row; gap:.75rem; flex:none; padding-bottom:1.5rem; }
.hz-stepper__indicator{ width:36px; height:36px; border-radius:999px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--hz-surface-subtle); color:var(--hz-text-tertiary); font-weight:var(--hz-fw-medium); font-size:var(--hz-text-body-xl-size); }
.hz-stepper__indicator--active{ background:#fff; box-shadow:inset 0 0 0 4px var(--hz-horizon-primary); }
.hz-stepper__indicator--complete{ background:var(--hz-horizon-primary-soft); color:var(--hz-horizon-primary-dark); }
.hz-stepper__indicator--inactive{ color:var(--hz-border-default); }
.hz-stepper__connector{ flex:1; align-self:center; height:1px; background:var(--hz-horizon-primary); margin-top:-26px; }
.hz-stepper--vertical .hz-stepper__connector{ position:absolute; left:17px; top:36px; bottom:0; width:1px; height:auto; margin:0; }
.hz-stepper__connector--inactive{ background:var(--hz-border-subtle); }
.hz-stepper__body{ display:flex; flex-direction:column; gap:.125rem; }
.hz-stepper__title{ font-size:var(--hz-text-body-l-size); line-height:var(--hz-text-body-l-lh); font-weight:var(--hz-fw-bold); color:var(--hz-text-primary); }
.hz-stepper__title--inactive{ color:var(--hz-text-tertiary); }
.hz-stepper__desc{ font-size:var(--hz-text-body-s-size); line-height:var(--hz-text-body-s-lh); color:var(--hz-text-tertiary); }
.hz-stepper__card{ display:flex; align-items:center; gap:.75rem; padding:1rem; border-radius:var(--hz-radius-lg); border:1px solid var(--hz-border-subtle); background:var(--hz-surface-card); }
.hz-stepper__card--inactive{ opacity:.55; }

/* Date & Time Picker */
.hz-datepicker{ display:inline-flex; background:var(--hz-surface-card); border-radius:var(--hz-radius-lg); box-shadow:var(--hz-shadow-md); overflow:hidden; }
.hz-datepicker__calendar{ width:326px; display:flex; flex-direction:column; }
.hz-datepicker__nav{ height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 .5rem; border-bottom:1px solid var(--hz-border-subtle); flex:none; }
.hz-datepicker__nav-group{ display:flex; align-items:center; }
.hz-datepicker__nav-btn{ width:24px; height:24px; border:0; background:none; color:var(--hz-text-secondary); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.hz-datepicker__nav-btn:hover{ color:var(--hz-text-primary); }
.hz-datepicker__nav-label{ font-size:var(--hz-text-body-r-size); line-height:var(--hz-text-body-r-lh); font-weight:var(--hz-fw-semibold); color:var(--hz-text-primary); display:flex; gap:.5rem; }
.hz-datepicker__grid{ flex:1; display:grid; grid-template-columns:repeat(7,1fr); padding:.5rem 1rem; gap:0; }
.hz-datepicker__weekday{ height:32px; display:flex; align-items:center; justify-content:center; font-size:var(--hz-text-2xs-size); font-weight:var(--hz-fw-semibold); color:var(--hz-text-tertiary); text-transform:uppercase; }
.hz-datepicker__day{ width:100%; aspect-ratio:1; min-height:36px; border:0; background:none; border-radius:var(--hz-radius-sm); color:var(--hz-text-primary); font-size:var(--hz-text-body-r-size); cursor:pointer; }
.hz-datepicker__day:hover{ background:var(--hz-horizon-primary-pale); }
.hz-datepicker__day.is-selected{ background:var(--hz-horizon-primary); color:#fff; }
.hz-datepicker__day.is-muted{ color:var(--hz-text-disabled); }
.hz-datepicker__day:disabled{ color:var(--hz-text-disabled); cursor:not-allowed; }
.hz-datepicker__footer{ height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 1rem; border-top:1px solid var(--hz-border-subtle); flex:none; }
.hz-datepicker__today{ background:none; border:0; color:var(--hz-horizon-primary); font-weight:var(--hz-fw-semibold); font-size:var(--hz-text-body-r-size); cursor:pointer; padding:0; }
.hz-timepicker{ width:129px; border-left:1px solid var(--hz-border-subtle); display:flex; flex-direction:column; }
.hz-timepicker__nav{ height:42px; display:flex; align-items:center; padding:0 .5rem; border-bottom:1px solid var(--hz-border-subtle); font-size:var(--hz-text-body-r-size); font-weight:var(--hz-fw-semibold); flex:none; }
.hz-timepicker__cols{ flex:1; display:flex; }
.hz-timepicker__col{ flex:1; display:flex; flex-direction:column; padding:.5rem 0; position:relative; }
.hz-timepicker__col + .hz-timepicker__col{ border-left:1px solid var(--hz-border-subtle); }
.hz-timepicker__cell{ height:40px; display:flex; align-items:center; justify-content:center; font-size:var(--hz-text-body-r-size); color:var(--hz-text-secondary); border:0; background:none; cursor:pointer; }
.hz-timepicker__cell.is-selected{ color:var(--hz-horizon-primary); font-weight:var(--hz-fw-bold); }
.hz-datepicker-mobile{ width:100%; max-width:338px; display:flex; flex-direction:column; background:var(--hz-surface-card); }
.hz-datepicker-mobile__tabs{ display:flex; border-bottom:1px solid var(--hz-border-subtle); }
.hz-datepicker-mobile__tab{ flex:1; text-align:center; padding:.5rem 0; font-size:var(--hz-text-body-r-size); color:var(--hz-text-tertiary); font-weight:var(--hz-fw-semibold); }
.hz-datepicker-mobile__tab.is-active{ color:var(--hz-horizon-primary); }
.hz-datepicker-mobile__wheel{ display:flex; }
.hz-datepicker-mobile__col{ flex:1; display:flex; flex-direction:column; align-items:center; padding:.5rem 0; }
.hz-datepicker-mobile__row{ height:40px; display:flex; align-items:center; justify-content:center; font-size:var(--hz-text-body-l-size); color:var(--hz-text-tertiary); width:100%; }
.hz-datepicker-mobile__row.is-selected{ color:var(--hz-text-primary); font-weight:var(--hz-fw-bold); background:var(--hz-surface-subtle); border-radius:var(--hz-radius-sm); }

/* Utilities */
.hz-stack{ display:flex; flex-direction:column; }
.hz-row  { display:flex; flex-direction:row; }
.hz-page-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; padding-bottom:1.5rem; }
.hz-page-header__title{ font:var(--hz-fw-bold) var(--hz-text-h3-size)/var(--hz-text-h3-lh) var(--hz-heading-font); color:var(--hz-text-primary); margin:0; }
.hz-page-header__desc{ margin-top:.375rem; font-size:var(--hz-text-body-r-size); color:var(--hz-text-tertiary); }
.hz-page-header__actions{ display:flex; gap:.75rem; flex:none; }
.hz-layout-2col{ display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; align-items:start; }
.hz-layout-3col{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; }
@media (max-width:900px){ .hz-layout-2col,.hz-layout-3col{ grid-template-columns:1fr; } }
.hz-gap-1{ gap:.25rem; } .hz-gap-2{ gap:.5rem; } .hz-gap-3{ gap:.75rem; }
.hz-gap-4{ gap:1rem; }  .hz-gap-6{ gap:1.5rem; } .hz-gap-8{ gap:2rem; }
.hz-muted{ color:var(--hz-text-tertiary); }

/* Field additions: textarea + stacked (non-floating) label + required mark */
.hz-field__control--textarea{ height:auto; align-items:flex-start; padding:.75rem .875rem; }
.hz-field__textarea{ border:0; outline:0; background:none; resize:vertical; min-height:88px; width:100%; font-family:var(--hz-font-sans); font-size:var(--hz-text-body-r-size); color:var(--hz-text-primary); }
.hz-field--stacked .hz-field__label{ position:static; top:auto; left:auto; transform:none; font-size:var(--hz-text-body-s-size); font-weight:var(--hz-fw-medium); color:var(--hz-text-secondary); }
.hz-field__required{ color:var(--hz-red-500); margin-left:.125rem; }

/* Modal / Dialog */
.hz-modal-overlay{ position:fixed; inset:0; background:var(--hz-scrim); display:flex; align-items:center; justify-content:center; z-index:var(--hz-z-modal); }
.hz-modal{ background:var(--hz-surface-card); border-radius:var(--hz-radius-xl); box-shadow:var(--hz-shadow-xl); width:480px; max-width:calc(100vw - 2rem); max-height:calc(100vh - 4rem); display:flex; flex-direction:column; }
.hz-modal--sm{ width:400px; } .hz-modal--lg{ width:640px; }
.hz-modal__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.5rem 1.5rem 1rem; }
.hz-modal__titlewrap{ display:flex; gap:.75rem; align-items:flex-start; }
.hz-modal__title{ font:var(--hz-fw-bold) var(--hz-text-h5-size)/var(--hz-text-h5-lh) var(--hz-font-sans); color:var(--hz-text-primary); }
.hz-modal__desc{ margin-top:.375rem; font-size:var(--hz-text-body-r-size); color:var(--hz-text-tertiary); }
.hz-modal__close{ flex:none; width:2rem; height:2rem; border:0; background:none; color:var(--hz-text-tertiary); cursor:pointer; border-radius:var(--hz-radius-md); display:inline-flex; align-items:center; justify-content:center; }
.hz-modal__close:hover{ background:var(--hz-neutral-100); color:var(--hz-text-primary); }
.hz-modal__body{ padding:0 1.5rem 1.5rem; overflow-y:auto; display:flex; flex-direction:column; gap:1rem; font-size:var(--hz-text-body-r-size); color:var(--hz-text-secondary); }
.hz-modal__footer{ display:flex; justify-content:flex-end; gap:.75rem; padding:1.25rem 1.5rem; border-top:1px solid var(--hz-border-subtle); }
.hz-modal--confirm{ width:400px; }
.hz-modal__icon{ width:2.75rem; height:2.75rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:1.125rem; flex:none; }
.hz-modal__icon--danger{ background:var(--hz-red-50); color:var(--hz-red-600); }
.hz-modal__icon--warn{ background:var(--hz-yellow-50); color:var(--hz-yellow-700); }
.hz-modal__icon--info{ background:var(--hz-teal-50); color:var(--hz-teal-700); }

/* Popover + Menu (backs Select, Combobox, Dropdown menu) */
.hz-popover{ position:absolute; background:var(--hz-surface-card); border:1px solid var(--hz-border-subtle); border-radius:var(--hz-radius-lg); box-shadow:var(--hz-shadow-lg); z-index:var(--hz-z-dropdown); min-width:220px; }
.hz-popover__header{ padding:.75rem 1rem; border-bottom:1px solid var(--hz-border-subtle); font-size:var(--hz-text-2xs-size); font-weight:var(--hz-fw-semibold); color:var(--hz-text-tertiary); text-transform:uppercase; letter-spacing:.06em; }
.hz-popover__body{ padding:1rem; }
.hz-menu{ padding:.375rem; display:flex; flex-direction:column; gap:.125rem; max-height:280px; overflow-y:auto; }
.hz-menu__item{ display:flex; align-items:center; gap:.625rem; padding:.5rem .625rem; border-radius:var(--hz-radius-md); cursor:pointer; font-size:var(--hz-text-body-r-size); color:var(--hz-text-primary); border:0; background:none; text-align:left; width:100%; }
.hz-menu__item:hover{ background:var(--hz-neutral-50); }
.hz-menu__item.is-selected{ background:var(--hz-horizon-primary-pale); color:var(--hz-horizon-primary-dark); font-weight:var(--hz-fw-semibold); }
.hz-menu__item.is-disabled{ color:var(--hz-text-disabled); cursor:not-allowed; }
.hz-menu__item--danger{ color:var(--hz-red-600); }
.hz-menu__item--danger:hover{ background:var(--hz-red-50); }
.hz-menu__check{ margin-left:auto; flex:none; opacity:0; color:var(--hz-horizon-primary); font-size:13px; }
.hz-menu__item.is-selected .hz-menu__check{ opacity:1; }
.hz-menu__separator{ height:1px; background:var(--hz-border-subtle); margin:.25rem 0; }
.hz-menu__label{ padding:.5rem .625rem .25rem; font-size:var(--hz-text-2xs-size); text-transform:uppercase; letter-spacing:.06em; color:var(--hz-text-tertiary); font-weight:var(--hz-fw-semibold); }
.hz-menu__empty{ padding:1.75rem 1rem; text-align:center; color:var(--hz-text-tertiary); font-size:var(--hz-text-body-r-size); }

/* Select */
.hz-select{ position:relative; display:flex; flex-direction:column; gap:.375rem; width:100%; }
.hz-select__label{ font-size:var(--hz-text-body-s-size); font-weight:var(--hz-fw-medium); color:var(--hz-text-secondary); }
.hz-select__trigger{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; height:var(--hz-size-md); padding:0 .875rem; border:1px solid var(--hz-border-default); border-radius:var(--hz-radius-md); background:var(--hz-surface-card); cursor:pointer; font-size:var(--hz-text-body-r-size); color:var(--hz-text-primary); width:100%; }
.hz-select__trigger:hover{ border-color:var(--hz-neutral-400); }
.hz-select__trigger:focus-visible,.hz-select__trigger.is-open{ outline:none; border-color:var(--hz-horizon-primary); box-shadow:var(--hz-shadow-focus); }
.hz-select__placeholder{ color:var(--hz-text-tertiary); }
.hz-select__chevron{ flex:none; color:var(--hz-text-tertiary); transition:transform .15s; }
.hz-select.is-open .hz-select__chevron{ transform:rotate(180deg); }
.hz-select--error .hz-select__trigger{ border-color:var(--hz-red-500); }
.hz-select--disabled .hz-select__trigger{ background:var(--hz-neutral-50); color:var(--hz-text-disabled); cursor:not-allowed; }
.hz-select__help{ font-size:var(--hz-text-body-s-size); color:var(--hz-text-tertiary); }
.hz-select--error .hz-select__help{ color:var(--hz-red-600); }
.hz-combobox__search{ display:flex; align-items:center; gap:.5rem; padding:.625rem .875rem; border-bottom:1px solid var(--hz-border-subtle); color:var(--hz-text-tertiary); }
.hz-combobox__search input{ flex:1; border:0; outline:0; font-size:var(--hz-text-body-r-size); background:none; color:var(--hz-text-primary); }

/* Skeleton */
@keyframes hz-skeleton-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
.hz-skeleton{ background:var(--hz-neutral-100); border-radius:var(--hz-radius-md); animation:hz-skeleton-pulse 1.6s ease-in-out infinite; }
.hz-skeleton--text{ height:.875rem; border-radius:var(--hz-radius-sm); }
.hz-skeleton--circle{ border-radius:999px; }

/* Empty / error state */
.hz-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.375rem; padding:3rem 1.5rem; }
.hz-empty__icon{ width:3rem; height:3rem; border-radius:999px; background:var(--hz-neutral-100); color:var(--hz-neutral-400); display:inline-flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:.5rem; }
.hz-empty__title{ font:var(--hz-fw-bold) var(--hz-text-h6-size)/var(--hz-text-h6-lh) var(--hz-font-sans); color:var(--hz-text-primary); }
.hz-empty__desc{ font-size:var(--hz-text-body-r-size); color:var(--hz-text-tertiary); max-width:340px; }
.hz-empty--error .hz-empty__icon{ background:var(--hz-red-50); color:var(--hz-red-600); }
.hz-empty__actions{ display:flex; gap:.75rem; margin-top:.75rem; }

/* Table toolbar, bulk bar, extended table cells */
.hz-table-toolbar{ display:flex; align-items:center; gap:.75rem; padding:0 0 1rem; flex-wrap:wrap; }
.hz-table-toolbar__search{ display:flex; align-items:center; gap:.5rem; height:var(--hz-size-md); padding:0 .875rem; border:1px solid var(--hz-border-default); border-radius:var(--hz-radius-md); color:var(--hz-text-tertiary); min-width:220px; }
.hz-table-toolbar__search input{ border:0; outline:0; background:none; flex:1; font-size:var(--hz-text-body-r-size); color:var(--hz-text-primary); }
.hz-table-toolbar__count{ font-size:var(--hz-text-body-s-size); color:var(--hz-text-tertiary); margin-right:auto; }
.hz-table-toolbar__spacer{ margin-left:auto; display:flex; gap:.5rem; }
.hz-table__bulkbar{ display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; background:var(--hz-horizon-primary-pale); border-radius:var(--hz-radius-md); margin-bottom:.5rem; }
.hz-table__bulkbar span{ font-size:var(--hz-text-body-r-size); font-weight:var(--hz-fw-semibold); color:var(--hz-horizon-primary-dark); }
.hz-table__bulkbar-actions{ margin-left:auto; display:flex; gap:.5rem; }
.hz-table th.is-sortable{ cursor:pointer; user-select:none; }
.hz-table th.is-sortable i{ margin-left:.375rem; font-size:11px; color:var(--hz-text-tertiary); }
.hz-table td.is-numeric,.hz-table th.is-numeric{ text-align:right; }
.hz-table__identity{ display:flex; align-items:center; gap:.625rem; }
.hz-table__identity-name{ font-weight:var(--hz-fw-semibold); color:var(--hz-text-primary); }
.hz-table__identity-sub{ font-size:var(--hz-text-body-s-size); color:var(--hz-text-tertiary); }
.hz-table__heat{ display:inline-block; width:.625rem; height:.625rem; border-radius:999px; margin-right:.375rem; }
.hz-table tbody tr.is-selected td{ background:var(--hz-horizon-primary-pale); }
.hz-table__rowcheck{ width:40px; }

/* App shell */
.hz-shell{ display:grid; grid-template-columns:auto 1fr; background:var(--hz-surface-page); }
.hz-shell__main{ display:flex; flex-direction:column; min-width:0; }
.hz-shell__content{ flex:1; overflow:auto; padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }

/* Toast stack */
.hz-toast-stack{ position:fixed; bottom:1.5rem; right:1.5rem; display:flex; flex-direction:column; gap:.5rem; z-index:var(--hz-z-toast); width:360px; }

/* KPI delta */
.hz-kpi__delta{ display:inline-flex; align-items:center; gap:.25rem; font-size:var(--hz-text-body-s-size); font-weight:var(--hz-fw-semibold); }
.hz-kpi__delta--up{ color:var(--hz-green-600); }
.hz-kpi__delta--down{ color:var(--hz-red-600); }

/* Search input — standalone (table-toolbar search composes the same look) */
.hz-search{ display:flex; align-items:center; gap:.5rem; height:var(--hz-size-md); padding:0 .875rem; border:1px solid var(--hz-border-default); border-radius:var(--hz-radius-md); background:var(--hz-surface-card); color:var(--hz-text-tertiary); }
.hz-search:hover{ border-color:var(--hz-neutral-400); }
.hz-search:focus-within{ border-color:var(--hz-horizon-primary); box-shadow:var(--hz-shadow-focus); }
.hz-search input{ border:0; outline:0; background:none; flex:1; font-family:inherit; font-size:var(--hz-text-body-r-size); color:var(--hz-text-primary); }
.hz-search--sm{ height:var(--hz-size-sm); padding:0 .625rem; }
.hz-search--disabled{ background:var(--hz-neutral-50); opacity:.6; pointer-events:none; }
.hz-search__clear{ flex:none; width:1.25rem; height:1.25rem; background:none; border:0; cursor:pointer; color:var(--hz-text-tertiary); display:inline-flex; align-items:center; justify-content:center; }
.hz-search__clear:hover{ color:var(--hz-text-primary); }

/* Drawer / Sheet (right-edge overlay panel, backs edit/detail flows) */
.hz-drawer-overlay{ position:fixed; inset:0; background:var(--hz-scrim); display:flex; justify-content:flex-end; z-index:var(--hz-z-modal); }
.hz-drawer{ background:var(--hz-surface-card); box-shadow:var(--hz-shadow-xl); width:420px; max-width:calc(100vw - 2rem); height:100%; display:flex; flex-direction:column; }
.hz-drawer--lg{ width:560px; }
.hz-drawer--sm{ width:340px; }
.hz-drawer__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.5rem 1.5rem 1rem; border-bottom:1px solid var(--hz-border-subtle); }
.hz-drawer__title{ font:var(--hz-fw-bold) var(--hz-text-h5-size)/var(--hz-text-h5-lh) var(--hz-font-sans); color:var(--hz-text-primary); }
.hz-drawer__desc{ margin-top:.375rem; font-size:var(--hz-text-body-r-size); color:var(--hz-text-tertiary); }
.hz-drawer__close{ flex:none; width:2rem; height:2rem; border:0; background:none; color:var(--hz-text-tertiary); cursor:pointer; border-radius:var(--hz-radius-md); display:inline-flex; align-items:center; justify-content:center; }
.hz-drawer__close:hover{ background:var(--hz-neutral-100); color:var(--hz-text-primary); }
.hz-drawer__body{ flex:1; overflow-y:auto; padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.hz-drawer__footer{ display:flex; justify-content:flex-end; gap:.75rem; padding:1.25rem 1.5rem; border-top:1px solid var(--hz-border-subtle); }
.hz-drawer--loading .hz-drawer__body{ opacity:.5; pointer-events:none; }

/* File dropzone + upload row */
.hz-dropzone{ border:2px dashed var(--hz-border-default); border-radius:var(--hz-radius-lg); padding:2.5rem 1.5rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; cursor:pointer; color:var(--hz-text-tertiary); background:var(--hz-surface-card); }
.hz-dropzone:hover,.hz-dropzone.is-dragover{ border-color:var(--hz-horizon-primary); background:var(--hz-horizon-primary-pale); color:var(--hz-horizon-primary-dark); }
.hz-dropzone--error{ border-color:var(--hz-red-400); background:var(--hz-red-50); }
.hz-dropzone--disabled{ opacity:.5; cursor:not-allowed; }
.hz-dropzone__icon{ width:2.75rem; height:2.75rem; border-radius:999px; background:var(--hz-neutral-100); color:var(--hz-neutral-400); display:inline-flex; align-items:center; justify-content:center; font-size:1.125rem; }
.hz-dropzone.is-dragover .hz-dropzone__icon{ background:var(--hz-horizon-primary-light); color:var(--hz-horizon-primary); }
.hz-dropzone__title{ font-weight:var(--hz-fw-semibold); color:var(--hz-text-primary); font-size:var(--hz-text-body-r-size); }
.hz-dropzone__hint{ font-size:var(--hz-text-body-s-size); color:var(--hz-text-tertiary); }
.hz-upload-row{ display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border:1px solid var(--hz-border-subtle); border-radius:var(--hz-radius-md); }
.hz-upload-row__icon{ flex:none; width:2.25rem; height:2.25rem; border-radius:var(--hz-radius-md); background:var(--hz-neutral-100); color:var(--hz-text-tertiary); display:inline-flex; align-items:center; justify-content:center; }
.hz-upload-row__meta{ flex:1; min-width:0; }
.hz-upload-row__name{ font-weight:var(--hz-fw-semibold); font-size:var(--hz-text-body-r-size); color:var(--hz-text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hz-upload-row__size{ font-size:var(--hz-text-body-s-size); color:var(--hz-text-tertiary); }
.hz-upload-row__progress{ height:4px; background:var(--hz-neutral-100); border-radius:999px; overflow:hidden; margin-top:.375rem; }
.hz-upload-row__progress-bar{ height:100%; background:var(--hz-horizon-primary); }
.hz-upload-row--error .hz-upload-row__progress-bar{ background:var(--hz-red-500); }
.hz-upload-row--error .hz-upload-row__size{ color:var(--hz-red-600); }
.hz-upload-row__status{ flex:none; font-size:1rem; }
.hz-upload-row--success .hz-upload-row__status{ color:var(--hz-green-600); }
.hz-upload-row--error .hz-upload-row__status{ color:var(--hz-red-600); }
.hz-upload-row__remove{ flex:none; width:1.75rem; height:1.75rem; background:none; border:0; cursor:pointer; color:var(--hz-text-tertiary); border-radius:var(--hz-radius-md); display:inline-flex; align-items:center; justify-content:center; }
.hz-upload-row__remove:hover{ background:var(--hz-neutral-100); color:var(--hz-text-primary); }

/* Collapsible / Accordion */
.hz-accordion{ display:flex; flex-direction:column; border:1px solid var(--hz-border-subtle); border-radius:var(--hz-radius-lg); overflow:hidden; background:var(--hz-surface-card); }
.hz-accordion__item{ border-bottom:1px solid var(--hz-border-subtle); }
.hz-accordion__item:last-child{ border-bottom:0; }
.hz-accordion__trigger{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%; padding:1rem 1.25rem; background:none; border:0; cursor:pointer; font-size:var(--hz-text-body-l-size); font-weight:var(--hz-fw-semibold); color:var(--hz-text-primary); text-align:left; }
.hz-accordion__trigger:hover{ background:var(--hz-neutral-50); }
.hz-accordion__chevron{ flex:none; transition:transform .15s; color:var(--hz-text-tertiary); }
.hz-accordion__item.is-open .hz-accordion__chevron{ transform:rotate(180deg); }
.hz-accordion__panel{ padding:0 1.25rem 1.25rem; color:var(--hz-text-secondary); font-size:var(--hz-text-body-r-size); }
.hz-accordion__item.is-disabled .hz-accordion__trigger{ color:var(--hz-text-disabled); cursor:not-allowed; }

/* Sidebar collapsible groups + collapse control (extends .hz-sidebar) */
.hz-sidebar__group-label{ font-size:var(--hz-text-2xs-size); font-weight:var(--hz-fw-bold); letter-spacing:.06em; text-transform:uppercase; color:var(--hz-text-tertiary); padding:14px 12px 6px; }
.hz-sidebar__group-toggle{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding:14px 12px 6px; }
.hz-sidebar__group-toggle i{ font-size:11px; color:var(--hz-text-tertiary); transition:transform .15s; }
.hz-sidebar__group.is-collapsed .hz-sidebar__group-toggle i{ transform:rotate(-90deg); }
.hz-sidebar__group.is-collapsed .hz-sidebar__group-items{ display:none; }
.hz-sidebar__collapse-btn{ width:26px; height:26px; border-radius:var(--hz-radius-md); border:0; background:transparent; color:var(--hz-text-tertiary); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.hz-sidebar__collapse-btn:hover{ background:var(--hz-neutral-100); color:var(--hz-text-primary); }

/* Breadcrumb */
.hz-breadcrumb{ display:flex; align-items:center; gap:.5rem; font-size:var(--hz-text-body-s-size); color:var(--hz-text-tertiary); flex-wrap:wrap; }
.hz-breadcrumb__item{ color:var(--hz-text-tertiary); text-decoration:none; cursor:pointer; background:none; border:0; font:inherit; padding:0; }
.hz-breadcrumb__item:hover{ color:var(--hz-horizon-primary); }
.hz-breadcrumb__item.is-current{ color:var(--hz-text-primary); font-weight:var(--hz-fw-semibold); cursor:default; }
.hz-breadcrumb__sep{ color:var(--hz-neutral-300); font-size:10px; }

/* Language switcher */
.hz-lang-switch{ display:inline-flex; padding:.1875rem; background:var(--hz-neutral-100); border-radius:var(--hz-radius-full); gap:.125rem; }
.hz-lang-switch__opt{ padding:.3125rem .75rem; border-radius:var(--hz-radius-full); font-size:var(--hz-text-body-s-size); font-weight:var(--hz-fw-semibold); color:var(--hz-text-tertiary); cursor:pointer; border:0; background:none; }
.hz-lang-switch__opt:hover{ color:var(--hz-text-primary); }
.hz-lang-switch__opt.is-active{ background:var(--hz-surface-card); color:var(--hz-text-primary); box-shadow:var(--hz-shadow-sm); }
.hz-lang-switch--disabled{ opacity:.5; pointer-events:none; }
.hz-lang-trigger{ display:inline-flex; align-items:center; gap:.5rem; height:var(--hz-size-sm); padding:0 .75rem; border:1px solid var(--hz-border-default); border-radius:var(--hz-radius-md); background:var(--hz-surface-card); cursor:pointer; font-size:var(--hz-text-body-s-size); font-weight:var(--hz-fw-semibold); color:var(--hz-text-primary); }
.hz-lang-trigger:hover{ border-color:var(--hz-neutral-400); }

/* Activity / event timeline */
.hz-timeline{ display:flex; flex-direction:column; }
.hz-timeline__group-label{ font-size:var(--hz-text-2xs-size); text-transform:uppercase; letter-spacing:.06em; color:var(--hz-text-tertiary); font-weight:var(--hz-fw-semibold); margin:0 0 .5rem; }
.hz-timeline__group-label:not(:first-child){ margin-top:1.25rem; }
.hz-timeline__item{ display:flex; gap:.75rem; position:relative; padding-bottom:1.25rem; }
.hz-timeline__item::before{ content:''; position:absolute; left:.9375rem; top:2rem; bottom:0; width:1px; background:var(--hz-border-subtle); }
.hz-timeline__item:last-child::before{ display:none; }
.hz-timeline__dot{ width:2rem; height:2rem; border-radius:999px; background:var(--hz-horizon-primary-pale); color:var(--hz-horizon-primary); display:flex; align-items:center; justify-content:center; font-size:13px; flex:none; z-index:1; }
.hz-timeline__dot--success{ background:var(--hz-green-50); color:var(--hz-green-700); }
.hz-timeline__dot--danger{ background:var(--hz-red-50); color:var(--hz-red-600); }
.hz-timeline__dot--neutral{ background:var(--hz-neutral-100); color:var(--hz-neutral-500); }
.hz-timeline__content{ padding-top:.25rem; }
.hz-timeline__text{ font-size:var(--hz-text-body-r-size); color:var(--hz-text-primary); }
.hz-timeline__text b{ font-weight:var(--hz-fw-semibold); }
.hz-timeline__time{ font-size:var(--hz-text-body-s-size); color:var(--hz-text-tertiary); margin-top:.125rem; }

/* Date range extras (extends .hz-datepicker) */
.hz-datepicker__day.is-range-start,.hz-datepicker__day.is-range-end{ background:var(--hz-horizon-primary); color:#fff; border-radius:var(--hz-radius-md); }
.hz-datepicker__day.is-in-range{ background:var(--hz-horizon-primary-pale); border-radius:0; color:var(--hz-horizon-primary-dark); }
.hz-datepicker__presets{ display:flex; flex-direction:column; gap:.125rem; padding:.5rem; border-right:1px solid var(--hz-border-subtle); }
.hz-datepicker__preset{ padding:.5rem .75rem; border-radius:var(--hz-radius-md); border:0; background:none; text-align:left; cursor:pointer; font-size:var(--hz-text-body-r-size); color:var(--hz-text-secondary); }
.hz-datepicker__preset:hover{ background:var(--hz-neutral-50); }
.hz-datepicker__preset.is-active{ background:var(--hz-horizon-primary-pale); color:var(--hz-horizon-primary-dark); font-weight:var(--hz-fw-semibold); }