/* ============================================================
   CuraFlow UI Kit  ·  cf-ui.css
   shadcn/ui component architecture, re-themed to the CuraFlow brand.
   - Semantic tokens (shadcn model): NEUTRAL surfaces/borders (zinc scale,
     faithful to shadcn's default light theme) + brand green as the ACCENT.
   - Crisp borders + subtle elevation so mockups read as a real app,
     not "text on a coloured background".
   - Vanilla CSS, no React/Tailwind. Prefix: .ui-*
   - Display type = Instrument Serif · UI/text = Instrument Sans
   - Red ONLY for destructive/error. Lucide icons throughout.
   Use these to BUILD product UI; documented live in /sektioner/.
   ============================================================ */

:root{
  /* base surfaces — neutral (shadcn zinc), like real app chrome */
  --ui-background:#ffffff;
  --ui-foreground:#0E1B15;          /* brand ink, near-black for crisp text */
  --ui-card:#ffffff;
  --ui-card-foreground:#0E1B15;
  --ui-popover:#ffffff;
  --ui-popover-foreground:#0E1B15;
  /* brand roles — the accent layer */
  --ui-primary:#005134;             /* brand dark green */
  --ui-primary-foreground:#F2FBF7;
  --ui-primary-hover:#063f29;
  --ui-secondary:#E7F6EF;           /* soft mint-tint surface (brand accent chips/avatars) */
  --ui-secondary-foreground:#0A3D2A;
  --ui-accent:#00E793;              /* mint accent */
  --ui-accent-foreground:#053324;
  --ui-accent-hover:#00C07A;
  --ui-success:#00A868;
  --ui-success-surface:#E4F7EC;
  --ui-success-foreground:#00714A;
  --ui-mint-strong:#00FFA2;         /* bright mint — on-dark accent / primary button text */
  /* destructive — red, ONLY for delete/remove & error states */
  --ui-destructive:#D64545;
  --ui-destructive-hover:#B23434;
  --ui-destructive-surface:#FBEAEA;
  --ui-destructive-foreground:#B23434;
  --ui-destructive-border:#F0C9C9;
  --ui-warning:#B7861B;
  --ui-warning-surface:#FDF6E7;
  --ui-warning-border:#F0DFB0;
  /* neutral chrome — NOT green (this is what makes it look like real UI) */
  --ui-muted:#F4F4F5;               /* zinc-100 — faint neutral surface */
  --ui-muted-foreground:#71767B;    /* zinc-500-ish — neutral secondary text */
  --ui-border:#E4E5E8;              /* zinc-200 — crisp neutral hairline */
  --ui-input:#DCDEE2;               /* slightly darker for form controls */
  --ui-ring:#00C07A;                /* brand focus ring */
  /* elevation — subtle, shadcn-style (mockups only; marketing stays flat) */
  --ui-shadow-sm:0 1px 2px 0 rgba(16,24,40,.05);
  --ui-shadow:0 1px 3px 0 rgba(16,24,40,.09),0 1px 2px -1px rgba(16,24,40,.06);
  --ui-shadow-md:0 8px 24px -6px rgba(16,24,40,.12),0 2px 6px -2px rgba(16,24,40,.06);
  /* shape + type */
  --ui-radius:12px;
  --ui-radius-sm:8px;
  --ui-radius-lg:14px;
  --ui-font:"Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ui-display:"Instrument Serif", Georgia, serif;
}

/* ---------- Button — identical to the site .btn:
   Instrument Serif label, brand colours, 10px radius, and the rounded-panel
   hover that fills the button (mint→dark / dark→mint). ---------- */
.ui-btn{position:relative;z-index:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ui-display);font-weight:400;font-size:16px;line-height:1;
  height:44px;padding:0 20px;border-radius:10px;border:0;cursor:pointer;white-space:nowrap;text-decoration:none;
  background-color:var(--ui-btn-bg);color:var(--ui-btn-fg);transition:color .3s ease;}
.ui-btn::before{content:"";position:absolute;inset:-1.5px;z-index:-1;border-radius:11.5px;
  background:var(--ui-btn-hi);transform:translateY(-102%);transition:transform .36s cubic-bezier(.2,.8,.2,1);}
.ui-btn:hover{color:var(--ui-btn-hitext);}
.ui-btn:hover::before{transform:translateY(0);}
.ui-btn:focus-visible{outline:2px solid var(--ui-ring);outline-offset:2px;}
.ui-btn svg{width:17px;height:17px;flex:0 0 auto;}
.ui-btn[disabled],.ui-btn.is-disabled{opacity:.5;pointer-events:none;}
/* primary = brand dark green + mint text (= site .btn--dark) */
.ui-btn--primary{--ui-btn-bg:#005134;--ui-btn-fg:#00FFA2;--ui-btn-hi:#00FFA2;--ui-btn-hitext:#005134;}
/* secondary = mint + dark green text (= site .btn--mint) */
.ui-btn--secondary{--ui-btn-bg:#00E793;--ui-btn-fg:#005134;--ui-btn-hi:#005134;--ui-btn-hitext:#00E793;}
/* link = brand text-link (Instrument Sans), no fill */
.ui-btn--link{background:transparent;font-family:var(--ui-font);font-weight:500;font-size:15px;
  color:#005134;height:auto;padding:0;border-radius:0;overflow:visible;}
.ui-btn--link::before{display:none;}
.ui-btn--link:hover{color:#00A868;}
/* destructive = red — ONLY for delete/remove actions */
.ui-btn--destructive{--ui-btn-bg:#D64545;--ui-btn-fg:#fff;--ui-btn-hi:#B23434;--ui-btn-hitext:#fff;}
.ui-btn--destructive-ghost{--ui-btn-bg:transparent;--ui-btn-fg:#C1362F;--ui-btn-hi:#FBEAEA;--ui-btn-hitext:#B23434;}
.ui-btn--sm{height:36px;padding:0 15px;font-size:15px;}
.ui-btn--lg{height:50px;padding:0 26px;font-size:18px;}
.ui-btn--icon{width:44px;padding:0;}
.ui-btn--icon.ui-btn--sm{width:36px;}
@media (prefers-reduced-motion:reduce){.ui-btn::before{transition:none;}}

/* ---------- Card ---------- */
.ui-card{background:var(--ui-card);color:var(--ui-card-foreground);
  border:1px solid var(--ui-border);border-radius:var(--ui-radius);overflow:hidden;box-shadow:var(--ui-shadow-sm);}
.ui-card--flat{box-shadow:none;}
.ui-card__header{padding:18px 20px 0;display:flex;flex-direction:column;gap:5px;}
.ui-card__header--row{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:12px;}
/* heading style = the site's headings: Instrument Sans, weight 400, brand green */
.ui-card__title{margin:0;font-family:var(--ui-font);font-weight:400;font-size:20px;
  letter-spacing:-.02em;line-height:1.2;color:#005134;}
.ui-card__desc{margin:0;font-family:var(--ui-font);font-size:13px;line-height:1.5;color:var(--ui-muted-foreground);}
.ui-card__content{padding:16px 20px;}
.ui-card__footer{padding:0 20px 18px;display:flex;gap:10px;align-items:center;}

/* ---------- Badge ---------- */
.ui-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--ui-font);
  font-weight:500;font-size:11.5px;line-height:1;padding:4px 9px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap;}
.ui-badge svg{width:12px;height:12px;}
.ui-badge--default{background:var(--ui-primary);color:var(--ui-primary-foreground);}
.ui-badge--secondary{background:var(--ui-secondary);color:var(--ui-secondary-foreground);}
.ui-badge--mint{background:var(--ui-accent);color:var(--ui-accent-foreground);}
.ui-badge--outline{background:transparent;border-color:var(--ui-border);color:var(--ui-foreground);}
.ui-badge--success{background:var(--ui-success-surface);color:var(--ui-success-foreground);}
.ui-badge--muted{background:var(--ui-muted);color:var(--ui-muted-foreground);}
.ui-badge--destructive{background:var(--ui-destructive-surface);color:var(--ui-destructive-foreground);}
.ui-badge--warning{background:var(--ui-warning-surface);color:#8A6316;}

/* ---------- Field · Label · Input ---------- */
.ui-field{display:flex;flex-direction:column;gap:6px;}
.ui-label{font-family:var(--ui-font);font-size:13px;font-weight:500;color:var(--ui-foreground);}
.ui-input,.ui-textarea{width:100%;font-family:var(--ui-font);font-size:14px;color:var(--ui-foreground);
  background:var(--ui-background);border:1px solid var(--ui-input);border-radius:var(--ui-radius-sm);
  outline:none;transition:border-color .15s ease,box-shadow .15s ease;}
.ui-input{height:40px;padding:0 12px;}
.ui-textarea{padding:10px 12px;line-height:1.5;resize:vertical;min-height:80px;}
.ui-input::placeholder,.ui-textarea::placeholder{color:var(--ui-muted-foreground);}
.ui-input:focus,.ui-textarea:focus{border-color:var(--ui-ring);box-shadow:0 0 0 3px rgba(0,192,122,.18);}
.ui-hint{font-family:var(--ui-font);font-size:12px;color:var(--ui-muted-foreground);}

/* ---------- Tabs ---------- */
.ui-tabs{display:inline-flex;gap:2px;padding:4px;background:var(--ui-muted);border-radius:var(--ui-radius-sm);}
.ui-tab{border:0;background:transparent;font-family:var(--ui-font);font-size:13px;font-weight:500;
  color:var(--ui-muted-foreground);padding:7px 14px;border-radius:calc(var(--ui-radius-sm) - 2px);
  cursor:pointer;transition:background .15s ease,color .15s ease;white-space:nowrap;}
.ui-tab:hover{color:var(--ui-foreground);}
.ui-tab[aria-selected="true"],.ui-tab.is-active{background:var(--ui-background);color:var(--ui-foreground);}

/* ---------- Table ---------- */
.ui-table{width:100%;border-collapse:collapse;font-family:var(--ui-font);font-size:13.5px;}
.ui-table th{text-align:left;font-weight:500;color:var(--ui-muted-foreground);font-size:12px;
  padding:10px 12px;border-bottom:1px solid var(--ui-border);}
.ui-table td{padding:11px 12px;border-bottom:1px solid var(--ui-border);color:var(--ui-foreground);vertical-align:middle;}
.ui-table tr:last-child td{border-bottom:0;}
.ui-table tbody tr{transition:background .12s ease;}
.ui-table tbody tr:hover{background:var(--ui-muted);}

/* ---------- Avatar ---------- */
.ui-avatar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--ui-secondary);color:var(--ui-secondary-foreground);font-family:var(--ui-font);
  font-weight:600;font-size:13px;overflow:hidden;flex:0 0 auto;}
.ui-avatar img{width:100%;height:100%;object-fit:cover;}
.ui-avatar--sm{width:28px;height:28px;font-size:11px;}
.ui-avatar--lg{width:46px;height:46px;font-size:16px;}

/* ---------- Switch ---------- */
.ui-switch{position:relative;width:38px;height:22px;border-radius:999px;background:var(--ui-border);
  border:0;cursor:pointer;transition:background .18s ease;flex:0 0 auto;padding:0;}
.ui-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .18s ease;}
.ui-switch:focus-visible{outline:2px solid var(--ui-ring);outline-offset:2px;}
.ui-switch[aria-checked="true"],.ui-switch.is-on{background:var(--ui-primary);}
.ui-switch[aria-checked="true"]::after,.ui-switch.is-on::after{transform:translateX(16px);}

/* ---------- Separator ---------- */
.ui-sep{height:1px;width:100%;background:var(--ui-border);border:0;margin:0;}
.ui-sep--v{width:1px;height:auto;align-self:stretch;}

/* ---------- Tooltip (static presentation) ---------- */
.ui-tooltip{display:inline-block;background:var(--ui-primary);color:var(--ui-primary-foreground);
  font-family:var(--ui-font);font-size:12px;font-weight:500;padding:6px 10px;border-radius:var(--ui-radius-sm);}

/* ---------- Progress ---------- */
.ui-progress{height:8px;width:100%;background:var(--ui-muted);border-radius:999px;overflow:hidden;}
.ui-progress__bar{height:100%;background:var(--ui-primary);border-radius:999px;}

/* ---------- KPI / Stat ---------- */
.ui-stat__label{font-family:var(--ui-font);font-size:12.5px;font-weight:500;color:var(--ui-muted-foreground);}
.ui-stat__value{font-family:var(--ui-display);font-weight:400;font-size:30px;letter-spacing:-.01em;
  line-height:1.1;color:var(--ui-foreground);margin-top:4px;font-variant-numeric:tabular-nums;}
.ui-stat__delta{font-family:var(--ui-font);font-size:12px;font-weight:500;color:var(--ui-success);
  display:inline-flex;align-items:center;gap:4px;margin-top:6px;}
.ui-stat__delta svg{width:13px;height:13px;}

/* ---------- List row (avatar · name · meta · action) ---------- */
.ui-row{display:flex;align-items:center;gap:12px;padding:10px 4px;}
.ui-row + .ui-row{border-top:1px solid var(--ui-border);}
.ui-row__main{flex:1 1 auto;min-width:0;}
.ui-row__name{font-family:var(--ui-font);font-weight:500;font-size:13.5px;color:var(--ui-foreground);line-height:1.25;}
.ui-row__meta{font-family:var(--ui-font);font-size:11.5px;color:var(--ui-muted-foreground);}

/* ---------- Alert ---------- */
.ui-alert{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);padding:14px 16px;background:var(--ui-card);}
.ui-alert__ic{flex:0 0 auto;color:var(--ui-primary);margin-top:1px;}
.ui-alert__ic svg{width:20px;height:20px;}
.ui-alert__t{font-family:var(--ui-font);font-weight:600;font-size:13.5px;color:var(--ui-foreground);margin:0 0 2px;}
.ui-alert__d{font-family:var(--ui-font);font-size:13px;line-height:1.5;color:var(--ui-muted-foreground);margin:0;}
.ui-alert--info{background:#F1FAF5;border-color:#D6EBE0;}
.ui-alert--success{background:var(--ui-success-surface);border-color:#BDE7CE;}
.ui-alert--success .ui-alert__ic{color:var(--ui-success);}
.ui-alert--warning{background:var(--ui-warning-surface);border-color:var(--ui-warning-border);}
.ui-alert--warning .ui-alert__ic{color:var(--ui-warning);}
.ui-alert--destructive{background:var(--ui-destructive-surface);border-color:var(--ui-destructive-border);}
.ui-alert--destructive .ui-alert__ic{color:var(--ui-destructive);}
.ui-alert--destructive .ui-alert__t{color:var(--ui-destructive-foreground);}

/* ---------- Checkbox & Radio ---------- */
.ui-check{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui-font);font-size:14px;
  color:var(--ui-foreground);cursor:pointer;}
.ui-check input{position:absolute;opacity:0;width:0;height:0;}
.ui-check .box{width:18px;height:18px;border:1.5px solid var(--ui-border);border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:.15s;flex:0 0 auto;}
.ui-check .box svg{width:12px;height:12px;opacity:0;}
.ui-check input:checked + .box{background:var(--ui-primary);border-color:var(--ui-primary);}
.ui-check input:checked + .box svg{opacity:1;}
.ui-check input:focus-visible + .box{outline:2px solid var(--ui-ring);outline-offset:2px;}
.ui-radio .box{border-radius:50%;}
.ui-radio .box::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;opacity:0;transition:.15s;}
.ui-radio input:checked + .box{background:var(--ui-primary);border-color:var(--ui-primary);}
.ui-radio input:checked + .box::after{opacity:1;}

/* ---------- Select ---------- */
.ui-select{position:relative;display:inline-flex;align-items:center;}
.ui-select select{appearance:none;-webkit-appearance:none;font-family:var(--ui-font);font-size:14px;
  color:var(--ui-foreground);background:var(--ui-background);border:1px solid var(--ui-input);
  border-radius:var(--ui-radius-sm);height:40px;padding:0 38px 0 12px;cursor:pointer;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;}
.ui-select select:focus{border-color:var(--ui-ring);box-shadow:0 0 0 3px rgba(0,192,122,.18);}
.ui-select .chev{position:absolute;right:12px;pointer-events:none;color:var(--ui-muted-foreground);}
.ui-select .chev svg{width:16px;height:16px;display:block;}

/* ---------- Slider (range) ---------- */
.ui-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:var(--ui-border);outline:none;}
.ui-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--ui-primary);cursor:pointer;border:3px solid #fff;box-shadow:0 0 0 1px var(--ui-border);}
.ui-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ui-primary);cursor:pointer;border:3px solid #fff;}
.ui-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(0,192,122,.3);}

/* ---------- Accordion ---------- */
.ui-accordion{border:1px solid var(--ui-border);border-radius:var(--ui-radius);overflow:hidden;background:var(--ui-card);}
.ui-acc__item + .ui-acc__item{border-top:1px solid var(--ui-border);}
.ui-acc__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:0;cursor:pointer;padding:14px 16px;font-family:var(--ui-font);font-weight:500;
  font-size:14px;color:var(--ui-foreground);text-align:left;}
.ui-acc__trigger .chev{color:var(--ui-muted-foreground);transition:transform .2s ease;flex:0 0 auto;}
.ui-acc__trigger .chev svg{width:16px;height:16px;display:block;}
.ui-acc__item.is-open .ui-acc__trigger .chev{transform:rotate(180deg);}
.ui-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease;}
.ui-acc__item.is-open .ui-acc__panel{grid-template-rows:1fr;}
.ui-acc__panel > div{overflow:hidden;}
.ui-acc__panel p{margin:0;padding:0 16px 14px;font-family:var(--ui-font);font-size:13px;line-height:1.55;color:var(--ui-muted-foreground);}

/* ---------- Toast / notification ---------- */
.ui-toast{display:flex;align-items:flex-start;gap:12px;background:var(--ui-card);border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);padding:13px 15px;max-width:360px;}
.ui-toast__ic{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:var(--ui-secondary);color:var(--ui-primary);}
.ui-toast__ic svg{width:17px;height:17px;}
.ui-toast__b{flex:1 1 auto;min-width:0;}
.ui-toast__t{font-family:var(--ui-font);font-weight:600;font-size:13px;color:var(--ui-foreground);}
.ui-toast__d{font-family:var(--ui-font);font-size:12px;color:var(--ui-muted-foreground);margin-top:1px;}
.ui-toast--success .ui-toast__ic{background:var(--ui-success-surface);color:var(--ui-success);}
.ui-toast--destructive .ui-toast__ic{background:var(--ui-destructive-surface);color:var(--ui-destructive);}

/* ---------- Skeleton ---------- */
.ui-skel{background:linear-gradient(90deg,#EDEDEF 25%,#F6F6F7 50%,#EDEDEF 75%);background-size:200% 100%;
  border-radius:8px;animation:ui-skel 1.3s ease-in-out infinite;}
@keyframes ui-skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.ui-skel{animation:none;}}

/* ---------- Empty state ---------- */
.ui-empty{text-align:center;padding:34px 20px;border:1px dashed var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-muted);}
.ui-empty__ic{width:46px;height:46px;border-radius:12px;background:var(--ui-secondary);color:var(--ui-primary);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;}
.ui-empty__ic svg{width:22px;height:22px;}
.ui-empty__t{font-family:var(--ui-font);font-weight:500;font-size:15px;color:var(--ui-foreground);margin:0 0 4px;}
.ui-empty__d{font-family:var(--ui-font);font-size:13px;line-height:1.5;color:var(--ui-muted-foreground);margin:0 0 16px;}

/* ---------- Dialog / confirm (static presentation) ---------- */
.ui-dialog{border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-card);max-width:400px;padding:22px;}
.ui-dialog__t{font-family:var(--ui-font);font-weight:400;font-size:20px;letter-spacing:-.02em;color:#005134;margin:0 0 6px;}
.ui-dialog__d{font-family:var(--ui-font);font-size:13.5px;line-height:1.55;color:var(--ui-muted-foreground);margin:0 0 18px;}
.ui-dialog__actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;}

/* ---------- Charts (inline SVG/CSS, brand-themed) ---------- */
.ui-chart svg{display:block;width:100%;height:auto;overflow:visible;}
.ui-chart-grid{stroke:#ECECEF;stroke-width:1;}
.ui-chart-line{fill:none;stroke:#00A868;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.ui-chart-line--ref{stroke:#C9DBD2;stroke-width:2;}
.ui-chart-dot{fill:#00A868;stroke:#fff;stroke-width:2.5;}
.ui-chart-axis{font-family:var(--ui-font);font-size:10px;fill:#8AA79A;}
.ui-chart-tip{font-family:var(--ui-font);font-size:10px;font-weight:600;fill:var(--ui-foreground);}
/* bar chart */
.ui-bars2{display:flex;align-items:flex-end;gap:10px;height:118px;}
.ui-bars2 .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end;}
.ui-bars2 .bar i{width:100%;border-radius:5px 5px 3px 3px;background:#17A06E;min-height:6px;}
.ui-bars2 .bar.mut i{background:#E4E5E8;}
.ui-bars2 .bar span{font-family:var(--ui-font);font-size:10.5px;color:#8AA79A;}
/* donut */
.ui-donut{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.ui-donut__c{position:relative;width:120px;height:120px;flex:0 0 auto;}
.ui-donut__c svg{width:120px;height:120px;transform:rotate(-90deg);}
.ui-donut__lab{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ui-donut__lab b{font-family:var(--ui-display);font-weight:400;font-size:27px;color:var(--ui-foreground);line-height:1;}
.ui-donut__lab span{font-family:var(--ui-font);font-size:11px;color:var(--ui-muted-foreground);margin-top:3px;}
.ui-legend{display:flex;flex-direction:column;gap:10px;}
.ui-legend div{display:flex;align-items:center;gap:8px;font-family:var(--ui-font);font-size:13px;color:var(--ui-foreground);}
.ui-legend b{font-family:var(--ui-display);font-weight:400;margin-left:2px;}
.ui-legend i{width:10px;height:10px;border-radius:3px;flex:0 0 auto;}
/* sparkline (inline in stat cards) */
.ui-spark{display:block;width:100%;height:36px;}
.ui-spark path{fill:none;stroke:#00A868;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- Window (app-screenshot frame) ----------
   A real floating app window: white surface, crisp neutral border, soft
   elevation. This is what makes a mockup read as UI, not text-on-a-panel. */
.ui-window{background:var(--ui-card);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);
  overflow:hidden;box-shadow:var(--ui-shadow-md);}
/* app-header bar retired everywhere (read too much like app chrome) */
.ui-window__bar{display:none;align-items:center;gap:7px;padding:11px 15px;
  border-bottom:1px solid var(--ui-border);background:#FAFAFA;}
.ui-window__dot{width:10px;height:10px;border-radius:50%;background:#D9DADE;flex:0 0 auto;}
.ui-window__ttl{margin-left:8px;font-family:var(--ui-font);font-size:12px;font-weight:500;
  color:var(--ui-muted-foreground);letter-spacing:.01em;}
.ui-window__body{padding:16px 18px;}
.ui-window__body > * + *{margin-top:14px;}
.ui-window__meta{margin-left:auto;font-family:var(--ui-font);font-size:11px;color:var(--ui-muted-foreground);display:inline-flex;align-items:center;gap:6px;}

/* ---------- Dashboard helpers (rich product-UI compositions) ---------- */
/* compact inline KPI + bordered KPI grid for dashboard headers */
.ui-kpi{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ui-kpi__l{font-family:var(--ui-font);font-size:11px;font-weight:500;color:var(--ui-muted-foreground);letter-spacing:.01em;white-space:nowrap;}
.ui-kpi__v{font-family:var(--ui-display);font-weight:400;font-size:24px;line-height:1.05;color:var(--ui-foreground);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap;}
.ui-kpi__d{font-family:var(--ui-font);font-size:11px;font-weight:500;color:var(--ui-success);display:inline-flex;align-items:center;gap:3px;}
.ui-kpi__d svg{width:12px;height:12px;}
.ui-kpi__d--mut{color:var(--ui-muted-foreground);}
/* down-trend = neutral (red is reserved for destructive/delete only) */
.ui-kpi__d--down{color:var(--ui-muted-foreground);}
.ui-kpigrid{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:10px;}
.ui-kpigrid > .ui-kpi{padding:11px 13px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-card);}

/* week-day strip (mini calendar header) */
.ui-week{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.ui-week__d{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;border:1px solid var(--ui-border);
  border-radius:10px;background:var(--ui-card);position:relative;}
.ui-week__d span{font-family:var(--ui-font);font-size:10px;font-weight:600;color:var(--ui-muted-foreground);text-transform:uppercase;letter-spacing:.03em;}
.ui-week__d b{font-family:var(--ui-display);font-weight:400;font-size:17px;color:var(--ui-foreground);line-height:1;}
.ui-week__d.is-today{background:var(--ui-primary);border-color:var(--ui-primary);}
.ui-week__d.is-today span{color:var(--ui-mint-strong);}
.ui-week__d.is-today b{color:#fff;}
.ui-week__d.has-gap{border-color:var(--ui-accent);background:var(--ui-secondary);}
.ui-week__d.has-gap b{color:var(--ui-primary);}
.ui-week__d.has-gap::after{content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--ui-accent);}

/* horizontal step / progress timeline */
.ui-steps{display:flex;align-items:center;gap:0;}
.ui-step{display:flex;align-items:center;gap:7px;min-width:0;}
.ui-step__n{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui-font);font-size:11px;font-weight:600;background:var(--ui-muted);color:var(--ui-muted-foreground);border:1px solid var(--ui-border);}
.ui-step__n svg{width:12px;height:12px;}
.ui-step__t{font-family:var(--ui-font);font-size:11.5px;font-weight:500;color:var(--ui-muted-foreground);white-space:nowrap;}
.ui-step__bar{height:2px;flex:1;background:var(--ui-border);margin:0 6px;border-radius:2px;min-width:6px;}
.ui-step.is-done .ui-step__n{background:var(--ui-success-surface);color:var(--ui-success);border-color:transparent;}
.ui-step.is-done .ui-step__t{color:var(--ui-foreground);}
.ui-step.is-done + .ui-step__bar{background:var(--ui-success);}
.ui-step.is-active .ui-step__n{background:var(--ui-primary);color:var(--ui-mint-strong);border-color:transparent;}
.ui-step.is-active .ui-step__t{color:var(--ui-primary);font-weight:600;}

/* chat / transcript bubbles */
.ui-chat{display:flex;flex-direction:column;gap:7px;}
.ui-chat__m{max-width:84%;font-family:var(--ui-font);font-size:12.5px;line-height:1.4;padding:8px 11px;border-radius:12px;}
.ui-chat__m--in{align-self:flex-start;background:var(--ui-muted);color:var(--ui-foreground);border-bottom-left-radius:4px;}
.ui-chat__m--out{align-self:flex-end;background:var(--ui-primary);color:var(--ui-primary-foreground);border-bottom-right-radius:4px;}
.ui-chat__m b{font-weight:600;}

/* live pill with pulsing dot */
.ui-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui-font);font-size:11px;font-weight:600;color:var(--ui-success-foreground);}
.ui-live i{width:7px;height:7px;border-radius:50%;background:var(--ui-success);animation:ui-pulse 1.8s ease-out infinite;}
@keyframes ui-pulse{0%{box-shadow:0 0 0 0 rgba(0,168,104,.5)}70%{box-shadow:0 0 0 6px rgba(0,168,104,0)}100%{box-shadow:0 0 0 0 rgba(0,168,104,0)}}
@media (prefers-reduced-motion:reduce){.ui-live i{animation:none;}}

/* subtle section label inside a window body */
.ui-sublabel{font-family:var(--ui-font);font-size:11.5px;font-weight:500;color:var(--ui-muted-foreground);}