@import url("velum-ds.css?v=1");
/* Velum look layer, v1 (Oct 17 2026, Jon: "make the ui design system better, aesthetic, transitions smoothly like
   lovable ... dynamic", for every tab, him first, with an emergency revert).
   One file, one attribute: the Hub sets html[data-look=next] at boot (assets/velum-look.js, lookNext()) and this
   file restyles the shell classes every tab is painted from: cards, buttons, chips, inputs, tables, the sidebar,
   the top bar, drawers, scrims, modals. It changes how things look and move, never what they show or do.
   Tokens come from the Hub (:root + [data-theme]) and velum-ds.css (--ds-ease, --ds-t1/t2/t3, --ds-e1/e2/e3).
   Every selector is scoped under html[data-look=next] (tests/look-layer.test.js pins it).
   Oct 20 2026: sidebar appearance controls retired; stored preferences and audience still apply through velum-look.js.
   Reduced motion turns every animation and transition off. Docs: docs/design-system.md. */

html[data-look=next]{--look-slow:720ms}

/* ---- motion primitives ---- */
@keyframes look-in{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes look-soft{from{opacity:.6}to{opacity:1}}
@keyframes look-pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
/* Oct 17 2026, after Jon's first review ("a little bit glitchy"): the whole page fades and rises once; a stagger over
   every top-level block made busy tabs pop in piece by piece, and a tab that paints twice (loading, then data) popped twice. */
html[data-look=next] #content[data-look-enter]{animation:look-in var(--ds-t1) var(--ds-ease) both}
/* a tab that paints again within 2.5 s of opening (its data arrived) fades the new paint in softly instead of jumping */
html[data-look=next] #content.look-soft{animation:look-soft var(--ds-t1) var(--ds-ease) both}

/* ---- sidebar: the active bar glides, rows answer the hand ---- */
html[data-look=next] .nav{position:relative}
html[data-look=next] .nav button{position:relative;transition:background var(--ds-t1) var(--ds-ease),color var(--ds-t1) var(--ds-ease)}
html[data-look=next] .nav button.active{background:rgba(255,255,255,.07)}
/* The accent mark sits still on the active row (Jon, Oct 17: a bar that travels down the sidebar looked wrong). */
html[data-look=next] .nav button.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);pointer-events:none}
@media(max-width:760px){html[data-look=next] .nav button.active::before{display:none}}
html[data-look=next] .nav-sub{transition:background var(--ds-t1) var(--ds-ease),color var(--ds-t1) var(--ds-ease)}
html[data-look=next] .sidebar .s-foot button{transition:background var(--ds-t1) var(--ds-ease),color var(--ds-t1) var(--ds-ease),border-color var(--ds-t1) var(--ds-ease)}

/* ---- top bar ---- */
html[data-look=next] .search input{border-radius:10px;transition:border-color var(--ds-t1) var(--ds-ease),box-shadow var(--ds-t1) var(--ds-ease),background var(--ds-t1) var(--ds-ease)}
html[data-look=next] .search input:focus{background:var(--surface);box-shadow:0 0 0 3px var(--ds-focus)}
html[data-look=next] .icon-btn{transition:background var(--ds-t1) var(--ds-ease),color var(--ds-t1) var(--ds-ease),transform var(--ds-t1) var(--ds-ease)}
html[data-look=next] .icon-btn:active{transform:scale(.94)}

/* ---- surfaces ---- */
html[data-look=next] .card{border-radius:16px;box-shadow:var(--ds-e1);transition:box-shadow var(--ds-t2) var(--ds-ease),border-color var(--ds-t2) var(--ds-ease),transform var(--ds-t2) var(--ds-ease)}
html[data-look=next] .card.click:hover{transform:translateY(-2px);box-shadow:var(--ds-e2);border-color:var(--ds-line-2)}
html[data-look=next] .stat{border-radius:12px;transition:border-color var(--ds-t1) var(--ds-ease),background var(--ds-t1) var(--ds-ease)}
html[data-look=next] .page-head h1{letter-spacing:-.02em}
html[data-look=next] .kpi .v{letter-spacing:-.02em;font-variant-numeric:tabular-nums}
html[data-look=next] .stat .sv{letter-spacing:-.01em}
html[data-look=next] .empty{font-weight:500}

/* ---- buttons: hover tints, press scales to 97%, focus shows ---- */
html[data-look=next] .btn-ghost,html[data-look=next] .btn-sm,html[data-look=next] .btn-primary,html[data-look=next] .hs,html[data-look=next] .hg{transition:background var(--ds-t1) var(--ds-ease),border-color var(--ds-t1) var(--ds-ease),color var(--ds-t1) var(--ds-ease),transform var(--ds-t1) var(--ds-ease),box-shadow var(--ds-t1) var(--ds-ease),opacity var(--ds-t1) var(--ds-ease)}
html[data-look=next] .btn-ghost:hover{border-color:var(--ds-line-2)}
html[data-look=next] .btn-sm:hover,html[data-look=next] .btn-primary:hover{background:var(--accent-2)}
html[data-look=next] .btn-sm:disabled:hover{background:var(--accent)}
html[data-look=next] .btn-ghost:active,html[data-look=next] .btn-sm:active,html[data-look=next] .btn-primary:active,html[data-look=next] .hg:active,html[data-look=next] .icon-btn:active,html[data-look=next] .nav button:active{transform:scale(.97)}
html[data-look=next] .btn-ghost:disabled:active,html[data-look=next] .btn-sm:disabled:active{transform:none}
html[data-look=next] :is(button,a,[role=button],[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
html[data-look=next] .nav button:focus-visible{outline-offset:-2px}

/* ---- inputs: one focus ring everywhere ---- */
html[data-look=next] .field input,html[data-look=next] .field select,html[data-look=next] .field textarea,html[data-look=next] .filters input,html[data-look=next] .filters select,html[data-look=next] .filter-grid input,html[data-look=next] .filter-grid select{transition:border-color var(--ds-t1) var(--ds-ease),box-shadow var(--ds-t1) var(--ds-ease),background var(--ds-t1) var(--ds-ease)}
html[data-look=next] .field input:focus,html[data-look=next] .field select:focus,html[data-look=next] .field textarea:focus,html[data-look=next] .filters input:focus,html[data-look=next] .filters select:focus,html[data-look=next] .filter-grid input:focus,html[data-look=next] .filter-grid select:focus,html[data-look=next] .hs:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ds-focus)}
html[data-look=next] input:focus-visible,html[data-look=next] select:focus-visible,html[data-look=next] textarea:focus-visible{outline:0}

/* ---- pills, checks, rows, bars, drop zones ---- */
html[data-look=next] .pill{font-weight:700;transition:background var(--ds-t1) var(--ds-ease),color var(--ds-t1) var(--ds-ease)}
html[data-look=next] .check{border-radius:7px;transition:background var(--ds-t1) var(--ds-ease),border-color var(--ds-t1) var(--ds-ease),transform var(--ds-t1) var(--ds-ease)}
html[data-look=next] .check:active{transform:scale(.9)}
html[data-look=next] tbody tr{transition:background var(--ds-t1) var(--ds-ease)}
html[data-look=next] .live-row{transition:background var(--ds-t1) var(--ds-ease)}
html[data-look=next] .live-recency{transition:width var(--look-slow) var(--ds-ease)}
html[data-look=next] .lrow{transition:background var(--ds-t1) var(--ds-ease)}
html[data-look=next] .bar{transition:height var(--look-slow) var(--ds-ease),background var(--ds-t1) var(--ds-ease)}
html[data-look=next] .drop{transition:border-color var(--ds-t1) var(--ds-ease),background var(--ds-t1) var(--ds-ease)}
html[data-look=next] .eod-stat.click{transition:border-color var(--ds-t1) var(--ds-ease),transform var(--ds-t1) var(--ds-ease)}
html[data-look=next] .pp-card{transition:opacity var(--ds-t1) var(--ds-ease),border-color var(--ds-t1) var(--ds-ease)}
html[data-look=next] .mini-av{transition:transform var(--ds-t1) var(--ds-ease)}

/* ---- overlays: scrim fades, drawer and modal settle on the easing ---- */
html[data-look=next] .scrim{transition:opacity var(--ds-t3) var(--ds-ease)}
html[data-look=next] .drawer{transition:transform var(--ds-t3) var(--ds-ease),opacity var(--ds-t3) var(--ds-ease);box-shadow:var(--ds-e3)}
html[data-look=next] .modal{animation:look-pop var(--ds-t2) var(--ds-ease) both;box-shadow:var(--ds-e3)}
html[data-look=next] .sidebar{transition:transform var(--ds-t3) var(--ds-ease)}

/* Phone (Oct 19 2026, the chatter preview at 390 px): Claim Submissions, Outside Pay and Pay Adjustments draw their rows as
   grids with fixed tracks (410 to 490 px); #content clips, so the amount and the button columns were cut off. Under 640 px
   the list card scrolls sideways inside itself, the way the Shift Ops and Accounts tables do. */
@media(max-width:640px){html[data-look=next] .card:has(>.pad>div[style*="grid-template-columns"]),html[data-look=next] .card:has(>div>.mc-row){overflow-x:auto}}

@media (prefers-reduced-motion:reduce){
  html[data-look=next] *,html[data-look=next] *::before,html[data-look=next] *::after{animation:none !important;transition:none !important}
}