/* ── Underway AI component layer ─────────────────────────────────────────────
   Every reusable primitive is class-driven so hover / focus / press / keyframe
   states live in CSS (inline styles cannot express them). Class prefix: uw-.
   Interaction grammar:
     hover   → 1px lift + elevation step, or ink inversion on outline controls
     press   → drop the lift, scale 0.985, one step darker
     focus   → 2px ink (dark: signal) outline, 2px offset, never removed
     enter   → 220–340ms, --ease-out-quint, opacity + 4px translate
   Nothing bounces on hover. Springs are reserved for discrete flips. */

/* ---------- Button ---------- */
.uw-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-h);padding:0 var(--space-4);border:var(--border-w) solid transparent;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:var(--text-body-sm);font-weight:var(--weight-medium);letter-spacing:-0.005em;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;background:none;transition:var(--transition-control);-webkit-tap-highlight-color:transparent}
.uw-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.uw-btn--sm{height:var(--control-h-sm);padding:0 var(--space-3);font-size:var(--text-caption)}
.uw-btn--lg{height:var(--control-h-lg);padding:0 var(--space-6);font-size:var(--text-body)}
.uw-btn--block{width:100%}
.uw-btn__icon{display:inline-flex;flex:none;transition:transform var(--dur-2) var(--ease-out-quint)}
.uw-btn:hover .uw-btn__icon--trail{transform:translateX(3px)}

.uw-btn--primary{background:var(--accent);color:var(--text-on-accent);box-shadow:var(--shadow-1),var(--shadow-inner-hi)}
.uw-btn--primary:hover{background:var(--accent-hover);transform:translateY(var(--hover-lift));box-shadow:var(--shadow-2),var(--shadow-inner-hi)}
.uw-btn--primary:active{background:var(--accent-press);transform:scale(var(--press-scale));box-shadow:var(--shadow-1)}

.uw-btn--secondary{background:var(--surface-card);color:var(--text-primary);border-color:var(--border-strong)}
.uw-btn--secondary:hover{background:var(--surface-inverse);color:var(--text-inverse);transform:translateY(var(--hover-lift))}
.uw-btn--secondary:active{transform:scale(var(--press-scale));background:var(--n-800)}

.uw-btn--ghost{background:transparent;color:var(--text-primary)}
.uw-btn--ghost:hover{background:var(--surface-sunken)}
.uw-btn--ghost:active{background:var(--surface-inset)}

.uw-btn--danger{background:var(--state-danger);color:#fff}
.uw-btn--danger:hover{background:var(--port-600);transform:translateY(var(--hover-lift));box-shadow:var(--shadow-2)}
.uw-btn--danger:active{transform:scale(var(--press-scale))}

/* raw / near-brutalist variant, for statements and campaign surfaces only */
.uw-btn--raw{background:var(--surface-card);color:var(--text-primary);border:var(--border-w-brutal) solid var(--border-strong);border-radius:0;box-shadow:var(--shadow-hard);font-family:var(--font-mono);font-size:var(--text-caption);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:var(--track-mono-label)}
.uw-btn--raw:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--n-950);background:var(--accent)}
.uw-btn--raw:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--n-950)}
[data-theme="dark"] .uw-btn--raw{box-shadow:4px 4px 0 var(--signal-400)}
[data-theme="dark"] .uw-btn--raw:hover{box-shadow:6px 6px 0 var(--signal-400)}

.uw-btn[disabled],.uw-btn[aria-disabled="true"]{opacity:.42;pointer-events:none}
.uw-btn--loading{color:transparent;position:relative;pointer-events:none}
.uw-btn--loading::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid color-mix(in oklab,var(--n-950) 30%,transparent);border-top-color:var(--n-950);animation:uw-spin var(--dur-slow) linear infinite}
@keyframes uw-spin{to{transform:rotate(1turn)}}

/* ---------- IconButton ---------- */
.uw-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--control-h);height:var(--control-h);border:var(--border-w) solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer;transition:var(--transition-control)}
.uw-iconbtn:hover{background:var(--surface-sunken);color:var(--text-primary)}
.uw-iconbtn:active{transform:scale(var(--press-scale))}
.uw-iconbtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.uw-iconbtn--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.uw-iconbtn--lg{width:var(--control-h-lg);height:var(--control-h-lg)}
.uw-iconbtn--outline{border-color:var(--border-subtle);background:var(--surface-card)}
.uw-iconbtn--outline:hover{border-color:var(--border-strong)}
.uw-iconbtn--solid{background:var(--surface-inverse);color:var(--text-inverse)}
.uw-iconbtn--solid:hover{background:var(--accent);color:var(--text-on-accent)}
.uw-iconbtn--accent{background:var(--accent);color:var(--text-on-accent);box-shadow:var(--shadow-inner-hi)}
.uw-iconbtn--accent:hover{background:var(--accent-hover)}
.uw-iconbtn[data-active="true"]{background:var(--surface-inset);color:var(--text-primary)}

/* ---------- Icon ---------- */
/* Icons are inline <svg> (see components/core/Icon.jsx) so they inherit currentColor
   and survive print + thumbnail capture. CSS-masked icons flatten to solid squares
   in capture pipelines — never reintroduce a mask here. */
.uw-icon{display:inline-block;flex:none}

/* ---------- Badge ---------- */
.uw-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px 7px;border:var(--border-w) solid transparent;border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:var(--text-micro);font-weight:var(--weight-medium);letter-spacing:var(--track-mono-label);text-transform:uppercase;line-height:1.5;white-space:nowrap}
.uw-badge--neutral{background:var(--surface-inset);color:var(--text-secondary)}
.uw-badge--accent{background:var(--accent);color:var(--text-on-accent)}
.uw-badge--ok{background:var(--state-ok-soft);color:var(--state-ok);border-color:color-mix(in oklab,var(--state-ok) 26%,transparent)}
.uw-badge--warn{background:var(--state-warn-soft);color:var(--amber-600);border-color:color-mix(in oklab,var(--state-warn) 32%,transparent)}
.uw-badge--danger{background:var(--state-danger-soft);color:var(--state-danger);border-color:color-mix(in oklab,var(--state-danger) 28%,transparent)}
.uw-badge--info{background:var(--state-info-soft);color:var(--state-info);border-color:color-mix(in oklab,var(--state-info) 26%,transparent)}
.uw-badge--outline{border-color:var(--border-default);color:var(--text-secondary)}
.uw-badge__dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.uw-badge--live .uw-badge__dot{animation:uw-pulse 1.8s var(--ease-in-out) infinite}
@keyframes uw-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

/* ---------- Tag ---------- */
.uw-tag{display:inline-flex;align-items:center;gap:var(--space-2);height:26px;padding:0 var(--space-3);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-pill);background:var(--surface-card);color:var(--text-secondary);font-size:var(--text-caption);font-family:var(--font-sans);transition:var(--transition-control);cursor:default}
.uw-tag--interactive{cursor:pointer}
.uw-tag--interactive:hover{border-color:var(--border-strong);color:var(--text-primary)}
.uw-tag[data-selected="true"]{background:var(--surface-inverse);border-color:var(--surface-inverse);color:var(--text-inverse)}
.uw-tag__remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;opacity:.55;transition:opacity var(--dur-fast) var(--ease-out)}
.uw-tag__remove:hover{opacity:1}

/* ---------- Card ---------- */
.uw-card{position:relative;display:flex;flex-direction:column;background:var(--surface-card);border:var(--hairline) solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);transition:box-shadow var(--dur-3) var(--ease-out-quint),transform var(--dur-3) var(--ease-out-quint),border-color var(--dur-2) var(--ease-out)}
.uw-card--pad{padding:var(--space-6)}
.uw-card--flat{box-shadow:none;background:var(--surface-sunken);border-color:transparent}
.uw-card--raised{box-shadow:var(--shadow-3)}
.uw-card--cold{background:var(--surface-cold);border-color:transparent}
.uw-card--inverse{background:var(--surface-inverse);border-color:transparent;color:var(--text-inverse)}
.uw-card--interactive{cursor:pointer}
.uw-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-3);border-color:var(--border-subtle)}
.uw-card--interactive:active{transform:translateY(0);box-shadow:var(--shadow-1)}
.uw-card--interactive:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.uw-card__rule{height:2px;background:var(--accent);border-radius:2px 2px 0 0;position:absolute;inset:0 auto auto 0;width:100%;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.uw-card--interactive:hover .uw-card__rule{opacity:1}
.uw-card__label{font:var(--type-label);letter-spacing:var(--track-mono-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-3)}

/* ---------- Input / Textarea ---------- */
.uw-field{display:flex;flex-direction:column;gap:var(--field-gap)}
.uw-field__label{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--track-mono-label);text-transform:uppercase;color:var(--text-secondary)}
.uw-field__hint{font-size:var(--text-caption);color:var(--text-muted)}
.uw-field__error{font-size:var(--text-caption);color:var(--state-danger)}
.uw-input{display:flex;align-items:center;gap:var(--space-2);height:var(--control-h);padding:0 var(--space-3);background:var(--surface-card);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-sm);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-2) var(--ease-out-quint),background-color var(--dur-fast) var(--ease-out)}
.uw-input:hover{border-color:var(--border-default)}
.uw-input:focus-within{border-color:var(--border-strong);box-shadow:0 0 0 3px var(--focus-ring-halo)}
.uw-input--lg{height:var(--control-h-lg);padding:0 var(--space-4)}
.uw-input--invalid{border-color:var(--state-danger)}
.uw-input--invalid:focus-within{box-shadow:0 0 0 3px color-mix(in oklab,var(--state-danger) 26%,transparent)}
.uw-input--multiline{height:auto;padding:var(--space-3)}
.uw-input__el{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-body-sm);line-height:1.4}
.uw-input__el::placeholder{color:var(--text-muted)}
.uw-input__el--mono{font-family:var(--font-mono)}
.uw-input__affix{color:var(--text-muted);display:inline-flex;flex:none;font-size:var(--text-caption)}
.uw-input[data-disabled="true"]{background:var(--surface-sunken);opacity:.6;pointer-events:none}

/* ---------- Select ---------- */
.uw-select{position:relative;display:inline-flex;align-items:center;width:100%}
.uw-select__el{appearance:none;width:100%;height:var(--control-h);padding:0 var(--space-8) 0 var(--space-3);background:var(--surface-card);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-body-sm);cursor:pointer;transition:var(--transition-control)}
.uw-select__el:hover{border-color:var(--border-default)}
.uw-select__el:focus-visible{outline:0;border-color:var(--border-strong);box-shadow:0 0 0 3px var(--focus-ring-halo)}
.uw-select__caret{position:absolute;right:var(--space-3);pointer-events:none;color:var(--text-muted);font-size:11px;transition:transform var(--dur-2) var(--ease-out-quint)}
.uw-select:hover .uw-select__caret{transform:translateY(1px)}

/* ---------- Checkbox / Radio ---------- */
.uw-check{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font-size:var(--text-body-sm);color:var(--text-primary);line-height:1.35}
.uw-check__box{position:relative;flex:none;width:18px;height:18px;margin-top:1px;background:var(--surface-card);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-xs);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring)}
.uw-check__box--radio{border-radius:50%}
.uw-check:hover .uw-check__box{border-color:var(--border-strong)}
.uw-check input{position:absolute;opacity:0;width:0;height:0}
.uw-check input:focus-visible+.uw-check__box{outline:2px solid var(--focus-ring);outline-offset:2px}
.uw-check input:checked+.uw-check__box{background:var(--surface-inverse);border-color:var(--surface-inverse)}
.uw-check input:checked+.uw-check__box::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4e62e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;animation:uw-pop var(--dur-2) var(--ease-spring)}
.uw-check input:checked+.uw-check__box--radio::after{background:var(--accent);inset:4px;border-radius:50%}
.uw-check input:indeterminate+.uw-check__box{background:var(--surface-inverse);border-color:var(--surface-inverse)}
.uw-check input:indeterminate+.uw-check__box::after{content:"";position:absolute;left:3px;right:3px;top:7.5px;height:2px;background:var(--accent)}
.uw-check[data-disabled="true"]{opacity:.45;pointer-events:none}
@keyframes uw-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- Switch ---------- */
.uw-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font-size:var(--text-body-sm)}
.uw-switch input{position:absolute;opacity:0;width:0;height:0}
.uw-switch__track{position:relative;flex:none;width:40px;height:22px;border-radius:var(--radius-pill);background:var(--surface-inset);border:var(--border-w) solid var(--border-subtle);transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.uw-switch__thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface-card);box-shadow:var(--shadow-1);transition:transform var(--dur-3) var(--ease-spring),background-color var(--dur-2) var(--ease-out)}
.uw-switch input:checked+.uw-switch__track{background:var(--surface-inverse);border-color:var(--surface-inverse)}
.uw-switch input:checked+.uw-switch__track .uw-switch__thumb{transform:translateX(18px);background:var(--accent)}
.uw-switch input:focus-visible+.uw-switch__track{outline:2px solid var(--focus-ring);outline-offset:2px}
.uw-switch[data-disabled="true"]{opacity:.45;pointer-events:none}

/* ---------- Tabs ---------- */
.uw-tabs{display:flex;align-items:stretch;gap:var(--space-1);border-bottom:var(--hairline) solid var(--border-hairline)}
.uw-tab{position:relative;appearance:none;border:0;background:transparent;padding:var(--space-3) var(--space-3) calc(var(--space-3) - 1px);font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--track-mono-label);text-transform:uppercase;color:var(--text-muted);cursor:pointer;transition:color var(--dur-fast) var(--ease-out)}
.uw-tab:hover{color:var(--text-secondary)}
.uw-tab[aria-selected="true"]{color:var(--text-primary)}
.uw-tab::after{content:"";position:absolute;left:var(--space-2);right:var(--space-2);bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-3) var(--ease-out-quint)}
.uw-tab[aria-selected="true"]::after{transform:scaleX(1)}
.uw-tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.uw-tab__count{margin-left:var(--space-2);color:var(--text-muted);font-size:var(--text-micro)}
.uw-tabs--pill{border:0;gap:var(--space-1);padding:3px;background:var(--surface-sunken);border-radius:var(--radius-md);display:inline-flex}
.uw-tabs--pill .uw-tab{padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm)}
.uw-tabs--pill .uw-tab::after{display:none}
.uw-tabs--pill .uw-tab[aria-selected="true"]{background:var(--surface-card);box-shadow:var(--shadow-1)}

/* ---------- Breadcrumbs ---------- */
.uw-crumbs{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--track-mono-label);text-transform:uppercase;color:var(--text-muted)}
.uw-crumbs a{color:var(--text-muted);background:none;padding:0}
.uw-crumbs a:hover{color:var(--text-primary)}
.uw-crumbs__sep{opacity:.5}
.uw-crumbs__current{color:var(--text-primary)}

/* ---------- Tooltip ---------- */
.uw-tip{position:relative;display:inline-flex}
.uw-tip__bubble{position:absolute;z-index:var(--z-overlay);left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);background:var(--surface-inverse);color:var(--text-inverse);font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:0.02em;padding:5px 8px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-2) var(--ease-out-quint);box-shadow:var(--shadow-2)}
.uw-tip[data-open="true"] .uw-tip__bubble{opacity:1;transform:translate(-50%,0)}
.uw-tip__bubble--bottom{bottom:auto;top:calc(100% + 8px);transform:translate(-50%,-4px)}

/* ---------- Dialog ---------- */
.uw-scrim{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--space-6);background:var(--scrim);backdrop-filter:blur(var(--blur-veil));animation:uw-fade var(--dur-2) var(--ease-out) both}
.uw-dialog{width:100%;max-width:460px;background:var(--surface-raised);border:var(--hairline) solid var(--border-hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-4);padding:var(--space-7);animation:uw-rise var(--dur-3) var(--ease-out-quint) both}
.uw-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-3)}
.uw-dialog__title{font-family:var(--font-display);font-size:var(--text-h2);font-weight:var(--weight-semibold);letter-spacing:var(--track-heading);margin:0}
.uw-dialog__body{color:var(--text-secondary);font-size:var(--text-body-sm);line-height:var(--leading-body)}
.uw-dialog__foot{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-7)}
@keyframes uw-fade{from{opacity:0}to{opacity:1}}
@keyframes uw-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- Toast ---------- */
.uw-toast{position:relative;display:flex;gap:var(--space-3);align-items:flex-start;min-width:280px;max-width:400px;padding:var(--space-4);background:var(--surface-raised);border:var(--hairline) solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);overflow:hidden;animation:uw-toast-in var(--dur-3) var(--ease-out-quint) both}
.uw-toast::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--accent)}
.uw-toast--ok::before{background:var(--state-ok)}
.uw-toast--warn::before{background:var(--state-warn)}
.uw-toast--danger::before{background:var(--state-danger)}
.uw-toast--info::before{background:var(--state-info)}
.uw-toast--ok .uw-toast__icon{color:var(--state-ok)}
.uw-toast--warn .uw-toast__icon{color:var(--state-warn)}
.uw-toast--danger .uw-toast__icon{color:var(--state-danger)}
.uw-toast--info .uw-toast__icon{color:var(--state-info)}
.uw-toast__title{font-size:var(--text-body-sm);font-weight:var(--weight-semibold);margin:0 0 2px}
.uw-toast__msg{font-size:var(--text-caption);color:var(--text-secondary);margin:0}
.uw-toast__icon{color:var(--accent);font-size:16px;margin-top:1px}
@keyframes uw-toast-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- ProgressTrack ---------- */
.uw-progress{position:relative;height:4px;width:100%;background:var(--surface-inset);border-radius:var(--radius-pill);overflow:hidden}
.uw-progress__fill{height:100%;background:var(--accent);border-radius:inherit;transition:width var(--dur-4) var(--ease-out-quint)}
.uw-progress--indeterminate .uw-progress__fill{width:38%;animation:uw-sweep 1.4s var(--ease-in-out) infinite}
.uw-progress--tall{height:8px}
.uw-progress__meta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--track-mono-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
@keyframes uw-sweep{0%{transform:translateX(-105%)}100%{transform:translateX(300%)}}