/* HiveWorks portal: "Aurora v2b" theme layer (replaces the gold-wash v1).
   Drop-in restyle. Load it LAST (after mockup-style.css, app.css, design.css, round5.css and anything newer).
   It overrides colours, surfaces, borders, shadows, type colour/weight and motion. It does not change layout (grid, margins, padding);
   the only size changes are the stat-tile numbers (+4px on desktop) and the tier badge hex.
   Look: deep navy aurora (blue / indigo / teal), a faint drifting hex grid with glow pulses (motion.js canvas #hw-hexbg),
   gold ONLY as an accent (primary buttons, active tab / nav, money figures, T1 badge, a few bullets).
   Motion: transform and opacity only (plus one box-shadow ring on urgent pills); reduced motion turns everything off (static aurora + grid stay).
   Pairs with motion.js and charts.js. ONE type + contrast system lives in the tokens below. */

@property --hw-ang{syntax:"<angle>";inherits:false;initial-value:0deg}

:root{
  /* surfaces (also re-point the old tokens so unthemed bits pick up the navy) */
  --hw-bg:#060A14;--bg:#060A14;--panel:#0F1B36;--panel2:#14264F;--row:#0B1530;--rowalt:#0E1A38;
  --hw-card-a:rgba(24,40,78,.93);--hw-card-b:rgba(11,20,42,.95);
  --hw-edge:rgba(255,255,255,.10);--hw-edge-blue:rgba(110,170,255,.30);--hw-edge-gold:rgba(255,180,35,.30);
  --hw-gold-glow:rgba(255,180,35,.55);--hw-cyan:#5CC8FF;--hw-teal:#3CE8C8;
  --hw-ease:cubic-bezier(.22,1,.36,1);--hw-spring:cubic-bezier(.34,1.56,.64,1);
  --hw-hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  /* type + contrast tokens (WCAG AA on the navy cards: body >= 4.5:1, large >= 3:1; lowest measured is in the scan report) */
  --muted:#B9C8DE;--text:#EEF4FC;
  --t-hi:#FFFFFF;--t-money:#FFD873;--t-label:#D6E2F4;--t-title:#FFFFFF;--ls-label:.06em;
  --sand:#D6E2F4;--sage:#7FE3C8;--clay:#FF9C8A;--slate:#C4D0E4;--rose:#E0B4B4;--grid:rgba(150,180,230,.18);--line:rgba(110,170,255,.22);
  /* status palette: one place */
  --st-ok-bg:#12806E;--st-ok-bd:#3CE8C8;--st-ok-tx:#FFFFFF;
  --st-pend-bg:rgba(255,180,35,.24);--st-pend-bd:#FFB423;--st-pend-tx:#FFE2A0;
  --st-risk-bg:rgba(255,122,48,.30);--st-risk-bd:#FF8A3D;--st-risk-tx:#FFD2B3;
  --st-late-bg:#C0302C;--st-late-bd:#FF7A70;--st-late-tx:#FFFFFF;
  --st-info-bg:rgba(76,132,240,.28);--st-info-bd:#7DB0FF;--st-info-tx:#D3E4FF;
  --st-neu-bg:rgba(182,194,214,.18);--st-neu-bd:#9DB0CC;--st-neu-tx:#E4ECF8;
}

/* ---------- base + aurora ---------- */
html{background:var(--hw-bg)}
body{background:transparent;background-image:none}
::selection{background:rgba(92,200,255,.35);color:#fff}
*{scrollbar-color:rgba(110,170,255,.38) transparent}
body::before,body::after{content:"";position:fixed;z-index:-2;pointer-events:none;inset:-22%;will-change:transform,opacity}
body::before{
  background:
    radial-gradient(42% 46% at 24% 20%,rgba(36,92,210,.34),transparent 70%),
    radial-gradient(38% 42% at 84% 12%,rgba(46,168,255,.22),transparent 72%),
    radial-gradient(34% 38% at 52% 58%,rgba(70,60,190,.22),transparent 72%);
  animation:hw-drift-a 34s ease-in-out infinite alternate,hw-breathe-a 9s ease-in-out infinite;
}
body::after{
  background:
    radial-gradient(44% 48% at 74% 84%,rgba(30,110,220,.26),transparent 70%),
    radial-gradient(36% 40% at 18% 88%,rgba(60,50,180,.24),transparent 72%),
    radial-gradient(30% 34% at 94% 50%,rgba(40,170,200,.14),transparent 72%);
  animation:hw-drift-b 46s ease-in-out infinite alternate,hw-breathe-b 12s ease-in-out infinite;
}
@keyframes hw-drift-a{0%{transform:translate3d(-4%,-3%,0) scale(1)}50%{transform:translate3d(3%,4%,0) scale(1.08)}100%{transform:translate3d(6%,-2%,0) scale(1.03) rotate(2deg)}}
@keyframes hw-drift-b{0%{transform:translate3d(4%,3%,0) scale(1.04)}50%{transform:translate3d(-3%,-4%,0) scale(1)}100%{transform:translate3d(-6%,2%,0) scale(1.1) rotate(-2deg)}}
@keyframes hw-breathe-a{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes hw-breathe-b{0%,100%{opacity:1}50%{opacity:.72}}
html.hw-paused *,html.hw-paused *::before,html.hw-paused *::after{animation-play-state:paused!important}
/* hex grid canvas (motion.js): between the aurora and the page */
#hw-hexbg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}

/* ---------- top banner, header, logo ---------- */
.banner{background:linear-gradient(90deg,rgba(14,28,62,.96),rgba(22,40,86,.96),rgba(14,28,62,.96));border-bottom:1px solid var(--hw-edge-blue);color:var(--t-label)}
.top{background:rgba(7,12,26,.88);border-bottom:1px solid var(--hw-edge-blue);box-shadow:0 10px 30px -22px rgba(0,0,0,.9)}
.top img{filter:drop-shadow(0 2px 10px rgba(40,120,255,.35))}
.top .who{color:var(--muted)}
.top .who b{color:var(--t-hi)}
.top nav a{border-radius:10px;color:var(--t-label);transition:color .2s,transform .2s var(--hw-ease)}
.top nav a:hover{color:#fff}
.top nav a.on{color:var(--gold-hot);background:linear-gradient(180deg,rgba(255,180,35,.2),rgba(255,180,35,.06));box-shadow:inset 0 -2px 0 var(--gold)}
@media(min-width:761px){body:has(.shell>.side .hw-brand) .top .logo{display:none}}

.hw-brand{display:block;padding:8px 12px 16px;margin:0 0 8px;border-bottom:1px solid var(--hw-edge-blue);line-height:0;text-decoration:none}
.hw-brand img{display:block;width:100%;height:auto;max-width:188px;filter:drop-shadow(0 4px 14px rgba(40,120,255,.4))}

/* ---------- sidebar nav ---------- */
.side{border-right:1px solid var(--hw-edge-blue)}
@media(min-width:761px){
  .shell{position:relative}
  .shell:has(>.side)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:220px;pointer-events:none;background:linear-gradient(180deg,rgba(9,16,36,.9),rgba(6,11,24,.88))}
}
.side a{position:relative;border-radius:12px;color:var(--t-label);transition:color .2s,background-color .2s}
.side a svg{transition:transform .25s var(--hw-spring)}
.side a:hover{color:#fff;background:linear-gradient(90deg,rgba(110,170,255,.14),rgba(110,170,255,.03))}
.side a:hover svg{transform:scale(1.14);filter:drop-shadow(0 0 6px rgba(92,200,255,.6))}
.side a.on{color:var(--gold-hot);background:linear-gradient(90deg,rgba(255,180,35,.2),rgba(255,180,35,.04));box-shadow:none}
.side a.on::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:3px;background:var(--gold);box-shadow:0 0 12px 2px var(--hw-gold-glow);animation:hw-glow 3.2s ease-in-out infinite;pointer-events:none}
.side .sep{background:linear-gradient(90deg,transparent,var(--hw-edge-blue),transparent)}
@media(max-width:760px){.side{background:linear-gradient(180deg,rgba(10,18,40,.99),rgba(6,10,22,.99));box-shadow:24px 0 60px -20px rgba(0,0,0,.8)}}
@keyframes hw-glow{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- surfaces: cards, tiles, columns ---------- */
.card,.pipecol,.pgroup,.me,.sheet{background:linear-gradient(165deg,var(--hw-card-a),var(--hw-card-b));border:1px solid var(--hw-edge);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px -18px rgba(0,0,0,.7)}
.card,.pipecol,.pgroup{position:relative}
.tile{position:relative;background:linear-gradient(90deg,transparent,rgba(92,200,255,.85),transparent) top center/56% 2px no-repeat,linear-gradient(165deg,var(--hw-card-a),var(--hw-card-b));border:1px solid var(--hw-edge);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px -18px rgba(0,0,0,.7);transition:transform .35s var(--hw-spring),box-shadow .3s}
.tile:hover,.tile:active{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -16px rgba(40,120,255,.55)}
.tile.bad,.tile.warn{background-image:linear-gradient(90deg,transparent,rgba(255,138,61,.95),transparent),linear-gradient(165deg,var(--hw-card-a),var(--hw-card-b))}
.card.narrow,.card.offer,details.fold{border-radius:14px}
.card h2,.head h2,.pgroup h2,h1,h3{color:var(--t-title)}
.card .tablewrap,.tablewrap{background:transparent}
.tablewrap{border-color:var(--hw-edge)}
.note,.callout{border-radius:10px}

/* glowing border that TRACES around the card on hover / press / touch (conic gradient ring, opacity fade-in, rotation only while active) */
.card::before,.tile::before,.pipecol::before,.pgroup::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .35s var(--hw-ease);
  background:conic-gradient(from var(--hw-ang),transparent 0deg,transparent 215deg,rgba(60,200,196,.5) 275deg,#5CC8FF 325deg,#FFD873 353deg,#fff 359deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 5px rgba(92,200,255,.8))}
.card:hover::before,.tile:hover::before,.pipecol:hover::before,.pgroup:hover::before,.tile:active::before,.card.hw-touch::before,.tile.hw-touch::before{opacity:1;animation:hw-trace 2.6s linear infinite}
.card.narrow::before,.card.offer::before{opacity:0}
@keyframes hw-trace{to{--hw-ang:360deg}}

/* shimmer sweep over cards, staggered: a band travels edge to edge INSIDE the card (translate + opacity, no overflow) every few seconds */
.tile::after,.card::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;pointer-events:none;opacity:0;border-radius:inherit;
  background:linear-gradient(105deg,transparent 12%,rgba(160,210,255,.13) 50%,transparent 88%);animation:hw-sweep 9s ease-in-out infinite;animation-delay:calc(1.2s + var(--hw-i,0)*.7s)}
.tiles>.tile:nth-child(2n)::after{animation-delay:2.6s}
.tiles>.tile:nth-child(3n)::after{animation-delay:4.8s}
.tiles>.tile:nth-child(5n)::after{animation-delay:6.9s}
.card:nth-of-type(2n)::after{animation-delay:3.4s}.card:nth-of-type(3n)::after{animation-delay:5.6s}.card:nth-of-type(4n)::after{animation-delay:7.4s}
.tile:hover::after{animation:hw-sweep-fast .9s var(--hw-ease) 1}
@keyframes hw-sweep{0%{opacity:0;transform:translateX(0)}3%{opacity:1}14%{opacity:1;transform:translateX(194%)}16%,100%{opacity:0;transform:translateX(194%)}}
@keyframes hw-sweep-fast{0%{opacity:0;transform:translateX(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(194%)}}

/* ---------- type hierarchy (one system) ---------- */
.tile .l,.tile .rn,.card .lab,.lab,.flab,.me dt,label.pf,.fgrid label,.chips .lab{color:var(--t-label);font-weight:700;letter-spacing:var(--ls-label)}
.tile .l{text-transform:uppercase}
.tile .n,.bigmoney,.bignum,.ts-stat .n,.mstat b{color:var(--t-hi);font-weight:700;font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(120,190,255,.35)}
.tile .n,.bigmoney{font-size:32px}
@media(max-width:560px){.tile .n,.bigmoney{font-size:24px}}
.tile.bad .n{color:var(--clay)}.tile.warn .n{color:var(--t-money)}.tile.blank .n{color:var(--muted)}
.hw-money{color:var(--t-money)!important;text-shadow:0 0 22px rgba(255,200,90,.35)}
td.hw-money{font-weight:700;text-shadow:none}
td,.tablewrap td{font-variant-numeric:tabular-nums}
td.name,td.name a,td:first-child a.lnk{color:#fff}
td[data-l="Won"],td[data-l="Deals won"],td[data-l="Offers"],td[data-l="Deals sent"],td[data-l="Sent"],td[data-l="Closed won"]{color:#fff;font-weight:700}
td[data-l="Fees earned"],td[data-l="Our total fees"],td[data-l="Avg offer"],td[data-l="Average buyout"],td[data-l="Avg buyout"],td[data-l="Fee"],td[data-l="Payout"],td[data-l="Est. payout"],td[data-l="Expected fees"],td[data-l="Fees"]{color:var(--t-money);font-weight:700}
.tabbar .tab,.seg button,.segb{color:var(--t-label);font-weight:700}
.chips .lab,.showing{color:var(--t-label)}

/* ---------- tables ---------- */
table{border-color:var(--hw-edge)}
thead th,.tablewrap th,th{background:linear-gradient(180deg,rgba(110,170,255,.14),rgba(110,170,255,.04)),#12203F;color:var(--t-label);font-weight:600;letter-spacing:.06em;border-bottom:1px solid var(--hw-edge-blue)}
th.sortable:hover,th .thlab:hover{color:#fff}
td,tr.clickrow td{border-bottom-color:rgba(150,180,230,.14)}
tbody tr:hover td,tr.clickrow:hover td{background:linear-gradient(90deg,rgba(92,200,255,.12),rgba(92,200,255,.03))}
tr.clickrow:hover td:first-child,tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--hw-cyan)}
.pcard{background:linear-gradient(165deg,rgba(26,44,86,.96),rgba(13,23,48,.97));border-color:var(--hw-edge);border-radius:10px;transition:transform .25s var(--hw-spring),border-color .2s}
.pcard:hover{transform:translateY(-2px);border-color:var(--hw-edge-blue)}
.pcard.late-card{border-color:rgba(255,122,112,.75)}
.late{color:var(--clay)}

/* ---------- status pills + chips (every .chip.c-* maps onto ONE palette) ---------- */
.chip{position:relative;font-weight:700;letter-spacing:.01em}
/* green, solid: Signed / Approved / Paid / On track / Closed won / Match / Ready */
.chip.c-sage{background:var(--st-ok-bg);border-color:var(--st-ok-bd);color:var(--st-ok-tx)}
/* amber: Pending / Sent / Open / Under review / Invoiced / Waiting */
.chip.c-gold,.chip.c-sand{background:var(--st-pend-bg);border-color:var(--st-pend-bd);color:var(--st-pend-tx)}
/* red: Overdue / Declined / Expired / Not a fit / Not sent */
.chip.c-clay{background:var(--st-late-bg);border-color:var(--st-late-bd);color:var(--st-late-tx)}
/* blue: in verification / payment (info) */
.chip.c-blue{background:var(--st-info-bg);border-color:var(--st-info-bd);color:var(--st-info-tx)}
/* neutral slate: Not contacted / Draft / None / counts */
.chip.c-mute,.chip.c-slate{background:var(--st-neu-bg);border-color:var(--st-neu-bd);color:var(--st-neu-tx)}
/* urgent: Overdue (red) pulses; At risk / Expiring / Due today (orange) pulse. motion.js adds .hw-pulse from the text */
.chip.hw-pulse.c-gold,.chip.hw-pulse.c-sand{background:var(--st-risk-bg);border-color:var(--st-risk-bd);color:var(--st-risk-tx);animation:hw-ring-r 2s ease-out infinite}
.chip.hw-pulse.c-clay{animation:hw-ring-l 1.6s ease-out infinite}
@keyframes hw-ring-r{0%{box-shadow:0 0 0 0 rgba(255,138,61,.7)}80%,100%{box-shadow:0 0 0 8px rgba(255,138,61,0)}}
@keyframes hw-ring-l{0%{box-shadow:0 0 0 0 rgba(255,90,80,.75)}80%,100%{box-shadow:0 0 0 8px rgba(255,90,80,0)}}
/* pulsing status dot in table pills */
td .chip:not(.tagwrap):not(.sm):not(.to-confirm)::before,.chip.hw-pulse::before{content:"";display:inline-block;width:8px;height:8px;margin:0 8px 1px 0;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;vertical-align:middle;animation:hw-dot 2.8s ease-in-out infinite}
.chip.hw-pulse::before{animation-duration:1.4s}
@keyframes hw-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
.cchip.yes{background:var(--st-ok-bg);border-color:var(--st-ok-bd);color:var(--st-ok-tx)}
.cchip.no{background:var(--st-late-bg);border-color:var(--st-late-bd);color:var(--st-late-tx)}
.cchip.unconfirmed{background:var(--st-pend-bg);border-color:var(--st-pend-bd);color:var(--st-pend-tx)}
.cchip.none{background:var(--st-neu-bg);border-color:var(--st-neu-bd);color:var(--st-neu-tx)}
.stepper.seg .step.cur::before{animation:hw-glow 2.8s ease-in-out infinite}

/* ---------- tier badges: T1 solid gold hex + soft glow / T2 outlined blue hex / T3 dashed teal hex; the label is always visible ---------- */
.tier{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0;border:0;border-radius:0;background:none;font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;vertical-align:middle}
.tier::before{content:attr(data-n);display:grid;place-items:center;flex:none;width:28px;height:32px;margin:0;background:var(--hx) center/100% 100% no-repeat;font:700 13px/1 "Chakra Petch",system-ui,sans-serif;letter-spacing:0;color:var(--hxc)}
.tier.t1{color:#FFE2A0;--hxc:#241500;--hx:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE08A'/%3E%3Cstop offset='1' stop-color='%23F2A31B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='14,1 27,8.5 27,23.5 14,31 1,23.5 1,8.5' fill='url(%23g)'/%3E%3C/svg%3E")}
.tier.t1,.tier.t2,.tier.t3,.tier.t0{background:none;border:0;padding:0}
.tier.t1::before{filter:drop-shadow(0 0 6px rgba(255,180,35,.65))}
.tier.t2{color:#B5D2FF;--hxc:#B5D2FF;--hx:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Cpolygon points='14,1.5 26.5,8.8 26.5,23.2 14,30.5 1.5,23.2 1.5,8.8' fill='%230E1C3E' stroke='%235C9BFF' stroke-width='2'/%3E%3C/svg%3E")}
.tier.t3{color:#8FE6DB;--hxc:#8FE6DB;--hx:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Cpolygon points='14,1.5 26.5,8.8 26.5,23.2 14,30.5 1.5,23.2 1.5,8.8' fill='%230D2530' stroke='%235FD8CC' stroke-width='2' stroke-dasharray='3.5 3'/%3E%3C/svg%3E")}
.tier.t0{color:var(--muted);--hxc:var(--muted);--hx:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Cpolygon points='14,1.5 26.5,8.8 26.5,23.2 14,30.5 1.5,23.2 1.5,8.8' fill='none' stroke='%238DA0BC' stroke-width='1.5' stroke-dasharray='2 3'/%3E%3C/svg%3E")}
.tier.t1::before{content:"1"}.tier.t2::before{content:"2"}.tier.t3::before{content:"3"}.tier.t0::before{content:"–"}
td.name .tier{margin-top:4px}

/* ---------- buttons, inputs, tabs, segments ---------- */
.btn,.tf-btn,.tabbar .tab,.segb,.isegbtn,.tf-seg button,.bigchoice,.pgroup button.user{position:relative;transition:transform .2s var(--hw-spring),color .2s,border-color .2s,background-color .2s}
.btn:hover:not(:disabled),.tf-btn:hover{transform:translateY(-1px)}
.btn:active:not(:disabled),.tf-btn:active,.tabbar .tab:active,.bigchoice:active{transform:translateY(0) scale(.97)}
.btn.solid,.tf-btn.primary{background:linear-gradient(180deg,var(--gold-hot),var(--gold) 55%,#E69A12);border-color:var(--gold);color:#1A1203;box-shadow:0 8px 22px -10px var(--hw-gold-glow),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.solid:hover:not(:disabled),.tf-btn.primary:hover{background:linear-gradient(180deg,#FFE7A2,var(--gold-hot) 55%,var(--gold))}
.btn:focus-visible,.tf-btn:focus-visible,.tabbar .tab:focus-visible,.segb:focus-visible,.side a:focus-visible,.top nav a:focus-visible,summary:focus-visible{outline:2px solid var(--gold-hot);outline-offset:2px}
.inp,.tf-in,select.inp,textarea.inp{background:rgba(5,10,24,.8);border-color:rgba(150,180,230,.26);border-radius:10px;color:var(--text)}
.inp:hover,.tf-in:hover{border-color:rgba(92,200,255,.5)}
.inp:focus,.tf-in:focus,.tf-in:focus-visible{border-color:var(--hw-cyan);box-shadow:0 0 0 3px rgba(92,200,255,.22);outline:none}

.tabbar{background:linear-gradient(180deg,rgba(6,10,22,.97),rgba(6,10,22,.9));border-bottom:1px solid var(--hw-edge-blue)}
.tabbar .tab{background:rgba(255,255,255,.05);border-color:rgba(150,180,230,.24);border-radius:10px}
.tabbar .tab:hover{background:rgba(92,200,255,.12);border-color:var(--hw-edge-blue);color:#fff}
.tabbar .tab.on{background:linear-gradient(180deg,var(--gold-hot),var(--gold));border-color:var(--gold);color:#1A1203;box-shadow:0 8px 20px -8px var(--hw-gold-glow)}
.tabbar .tab.on::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 22px 3px var(--hw-gold-glow);opacity:.45;animation:hw-glow 3.2s ease-in-out infinite}
.seg{background:rgba(255,255,255,.04);border-color:rgba(150,180,230,.26);border-radius:10px}
.segb.on,.tf-seg button.on{background:linear-gradient(180deg,rgba(255,180,35,.28),rgba(255,180,35,.1));color:var(--gold-hot);box-shadow:inset 0 -2px 0 var(--gold)}
.isegbtn.on{box-shadow:0 0 0 1px var(--gold),0 6px 18px -8px var(--hw-gold-glow)}
details.fold>summary{transition:color .2s;color:var(--t-label);font-weight:700}
details.fold>summary:hover{color:#fff}
.tf-pop{background:linear-gradient(165deg,#16284A,#0A1430);border:1px solid var(--hw-edge-blue);box-shadow:0 24px 60px -16px rgba(0,0,0,.85)}

/* ---------- login / demo picker (index.html), sign-in cards ---------- */
.shell-hero h1{font-size:28px;color:#fff;text-shadow:0 0 28px rgba(92,200,255,.45)}
.pgroup button.user{background:rgba(255,255,255,.05);border:1px solid rgba(150,180,230,.26);border-radius:12px}
.pgroup button.user:hover{transform:translateY(-3px);border-color:var(--hw-cyan);background:linear-gradient(165deg,rgba(92,200,255,.16),rgba(92,200,255,.05));box-shadow:0 14px 28px -14px rgba(40,120,255,.6)}
.bigchoice{border-radius:12px}
.bigchoice:hover{transform:translateY(-2px);border-color:var(--hw-cyan)}
.pbar{background:rgba(5,10,24,.8);border-color:rgba(150,180,230,.24)}
.pfill,.prog i,.iprog-fill,.likebar i,.hb .t i{box-shadow:none}
.pfill,.iprog-fill{background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-hot))}
.hb .t{background:rgba(30,48,92,.9)}

/* ---------- hex loader + empty states + modals (reusable) ---------- */
.hw-hexload{display:inline-block;width:56px;height:56px;vertical-align:middle}
.hw-hexload svg{display:block;width:100%;height:100%;overflow:visible}
.hw-hexload polygon{fill:rgba(92,200,255,.18);stroke:#5CC8FF;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:hw-hxp 1.4s ease-in-out infinite;animation-delay:calc(var(--k,0)*.12s)}
.hw-hexload polygon.mid{fill:rgba(255,180,35,.35);stroke:#FFB423}
@keyframes hw-hxp{0%,100%{opacity:.25;transform:scale(.82)}45%{opacity:1;transform:scale(1)}}
.tf-empty,.empty,.emptystate{color:var(--muted)}
.tf-empty::before,.emptystate::before{content:"";display:block;width:44px;height:50px;margin:0 auto 12px;background:var(--hx-empty) center/contain no-repeat;opacity:.9;--hx-empty:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Cpolygon points='14,1.5 26.5,8.8 26.5,23.2 14,30.5 1.5,23.2 1.5,8.8' fill='%230E1C3E' stroke='%235C9BFF' stroke-width='1.5' stroke-dasharray='3.5 3'/%3E%3C/svg%3E")}

/* ---------- ripple (motion.js adds .hw-rip-wrap > .hw-rip on pointerdown) ---------- */
.hw-rip-wrap{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.hw-rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.38);opacity:.55;transform:scale(0);animation:hw-ripple .6s var(--hw-ease) forwards}
.btn.solid .hw-rip,.tf-btn.primary .hw-rip,.tabbar .tab.on .hw-rip{background:rgba(26,18,3,.28)}
@keyframes hw-ripple{to{transform:scale(1);opacity:0}}

/* ---------- entrance + page / tab transitions (transform + opacity only, "backwards" fill so nothing sticks) ---------- */
@keyframes hw-page{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hw-pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes hw-row{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hw-slide{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes hw-tab{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hw-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

main>*:not(.tabbar):not(.menubtn){animation:hw-page .55s var(--hw-ease) backwards;animation-delay:calc(var(--hw-i,0)*55ms)}
.tabpane{animation:hw-tab .45s var(--hw-ease) backwards}
.tiles>.tile{animation:hw-pop .6s var(--hw-spring) backwards;animation-delay:calc(var(--hw-i,0)*45ms + 80ms)}
.grid2>.card,.cards>.card,.pipeline>.pipecol,.picker>.pgroup,.bigpick>*{animation:hw-pop .6s var(--hw-ease) backwards;animation-delay:calc(var(--hw-i,0)*70ms + 60ms)}
.pipecol .pcard{animation:hw-row .45s var(--hw-ease) backwards;animation-delay:calc(var(--hw-i,0)*35ms + 160ms)}
tbody>tr{animation:hw-row .45s var(--hw-ease) backwards;animation-delay:calc(var(--hw-i,0)*70ms + 120ms)}
.hb{animation:hw-slide .5s var(--hw-ease) backwards;animation-delay:calc(var(--hw-i,0)*55ms + 80ms)}
.hb .t i,.prog i,.pfill,.iprog-fill,.likebar i{transform-origin:left center;animation:hw-grow 1s var(--hw-ease) backwards;animation-delay:calc(var(--hw-i,0)*55ms + 220ms)}
.stepper .step::before{transform-origin:left center;animation:hw-grow .8s var(--hw-ease) backwards;animation-delay:calc(var(--hw-i,0)*90ms + 150ms)}
.shell-hero{animation:hw-page .7s var(--hw-ease) backwards}

/* stagger indices (CSS only, so they also apply to nodes the app re-renders) */
main>:nth-child(2),.tiles>:nth-child(2),.grid2>:nth-child(2),.cards>:nth-child(2),.pipeline>:nth-child(2),.picker>:nth-child(2),.pipecol>.pcard:nth-child(2),tbody>tr:nth-child(2),.hb:nth-child(2),.stepper>:nth-child(2){--hw-i:1}
main>:nth-child(3),.tiles>:nth-child(3),.grid2>:nth-child(3),.cards>:nth-child(3),.pipeline>:nth-child(3),.picker>:nth-child(3),.pipecol>.pcard:nth-child(3),tbody>tr:nth-child(3),.hb:nth-child(3),.stepper>:nth-child(3){--hw-i:2}
main>:nth-child(4),.tiles>:nth-child(4),.grid2>:nth-child(4),.cards>:nth-child(4),.pipeline>:nth-child(4),.picker>:nth-child(4),.pipecol>.pcard:nth-child(4),tbody>tr:nth-child(4),.hb:nth-child(4),.stepper>:nth-child(4){--hw-i:3}
main>:nth-child(5),.tiles>:nth-child(5),.grid2>:nth-child(5),.cards>:nth-child(5),.pipeline>:nth-child(5),.picker>:nth-child(5),.pipecol>.pcard:nth-child(5),tbody>tr:nth-child(5),.hb:nth-child(5),.stepper>:nth-child(5){--hw-i:4}
main>:nth-child(6),.tiles>:nth-child(6),.grid2>:nth-child(6),.cards>:nth-child(6),.pipeline>:nth-child(6),.picker>:nth-child(6),.pipecol>.pcard:nth-child(6),tbody>tr:nth-child(6),.hb:nth-child(6),.stepper>:nth-child(6){--hw-i:5}
main>:nth-child(7),.tiles>:nth-child(7),.grid2>:nth-child(n+7),.cards>:nth-child(n+7),.pipeline>:nth-child(n+7),.picker>:nth-child(n+7),.pipecol>.pcard:nth-child(7),tbody>tr:nth-child(7),.hb:nth-child(7),.stepper>:nth-child(n+7){--hw-i:6}
main>:nth-child(n+8),.tiles>:nth-child(8),.pipecol>.pcard:nth-child(8),tbody>tr:nth-child(8),.hb:nth-child(8){--hw-i:7}
.tiles>:nth-child(9),.pipecol>.pcard:nth-child(9),tbody>tr:nth-child(9),.hb:nth-child(9){--hw-i:8}
.tiles>:nth-child(10),.pipecol>.pcard:nth-child(10),tbody>tr:nth-child(10),.hb:nth-child(10){--hw-i:9}
.tiles>:nth-child(11),tbody>tr:nth-child(11),.hb:nth-child(11){--hw-i:10}
.tiles>:nth-child(n+12),tbody>tr:nth-child(n+12),.hb:nth-child(n+12){--hw-i:11}

/* ---------- print + reduced motion ---------- */
@media print{body::before,body::after,#hw-hexbg,.hw-brand{display:none!important}*,*::before,*::after{animation:none!important}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .tile:hover,.btn:hover:not(:disabled),.pcard:hover,.pgroup button.user:hover,.bigchoice:hover{transform:none!important}
}

/* sidebar section label: same 13px floor + label colour as every other label */
.side .side-label{font-size:13px;font-weight:700;color:var(--t-label);letter-spacing:.12em}

/* 13px floor + label tokens on the sign-in / picker page too (it does not load design.css) */
.banner,.ro,small,.note,.chip,.chip.sm,.tile .l,.tile .rn,.pgroup button.user small{font-size:13px}
.ro{color:var(--st-neu-tx);background:var(--st-neu-bg);border-color:var(--st-neu-bd);font-weight:700}
.pgroup h2{font-size:18px;color:var(--t-title)}
.segb .segn{opacity:1;color:inherit}
.card::after{background:linear-gradient(105deg,transparent 12%,rgba(160,210,255,.06) 50%,transparent 88%)}

/* ---- sign-in picker (index.html) normalised to the shared scale ---- */
body:has(.shell-hero) main{padding:24px 24px 40px}
.shell-hero{padding-left:0;padding-right:0}
.shell-hero .card,.shell-hero .card.narrow{padding:16px;margin-top:16px !important;margin-bottom:16px}
.shell-hero .card>h2{font-size:18px !important;margin-bottom:8px}

.pgroup button.user small{font-size:13px}
body small,.top .who{font-size:13px !important}
body:has(.shell-hero) main{padding-bottom:32px}
@media(max-width:480px){body:has(.shell-hero) main{padding-left:16px;padding-right:16px}}
.shell-hero .sub,.shell-hero details.more summary,.pgroup details.more summary{font-size:13px}

/* =====================================================================
   TYPE PASS (Patrick, phone review): bigger, bolder, brighter lettering. ONE token set, no per-page rules.
   Display face: Space Grotesk, self-hosted (assets/space-grotesk-latin.woff2, no CDN, nothing for the demo gate to block).
   Body face stays Manrope. Numbers keep tabular numerals.
   ===================================================================== */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500 700;font-display:swap;src:url("assets/space-grotesk-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --f-disp:"Space Grotesk","Chakra Petch",system-ui,sans-serif;
  --muted:#C9D6EA;--t-label:#E6EEFB;--text:#F2F7FF;
  /* headings */
  --h1-size:32px;--h1-size-sm:32px;--h2-size:20px;--h3-size:17px;--sub-color:#E1EBF9;
  --glow-title:0 0 22px rgba(255,190,60,.38),0 0 36px rgba(92,200,255,.28);
  /* ONE stat-card style (.hw-stat + every existing stat/metric class below) */
  --stat-l-size:15px;--stat-l-w:600;--stat-l-color:#F4F8FF;--stat-l-ls:.03em;
  --stat-n-w:700;--stat-n-color:#FFFFFF;--stat-n-glow:0 0 22px rgba(120,190,255,.38);
  --stat-note-size:14px;--stat-note-color:#D3E0F3;
  --stat-chip-size:14px;--stat-chip-w:700;
  /* chips (status + change + alert) */
  --chip-size:14px;--chip-w:700;
  --st-pend-bg:rgba(255,180,35,.36);--st-risk-bg:rgba(255,122,48,.44);--st-info-bg:rgba(76,132,240,.40);--st-neu-bg:rgba(182,194,214,.26);
  /* nav / table / tabs one step up */
  --tab-size:15px;--th-size:14px;--td-size:14px;--side-size:15px;
}
body{font-weight:500}

/* ---- page + section titles ---- */
h1,h2,h3,.tile .l,.tile .n,.ts-stat .l,.ts-stat .n,.mstat b,.mstat .flab,.bigmoney,.bignum,.hw-stat,.hw-stat *,td.hw-money,.cnt{font-family:var(--f-disp)}
h1,.shell-hero h1{font-size:var(--h1-size);font-weight:700;line-height:1.15;letter-spacing:-.005em;color:#fff;text-shadow:var(--glow-title)}
@media(max-width:560px){h1,.shell-hero h1{font-size:var(--h1-size-sm)}}
.sub,.head .sub,.lede{color:var(--sub-color);font-weight:500}
h2,.card h2,.card>h2,.pgroup h2,.head h2,.shell-hero .card>h2{font-size:var(--h2-size)!important;font-weight:700;color:#fff;letter-spacing:.005em}
h3{font-size:var(--h3-size);font-weight:700;color:#fff}
.head h2 .cnt{font-size:14px;font-weight:700}
details.fold>summary,details.card>summary{font-size:16px;font-weight:700;color:#fff}

/* ---- ONE stat-card style: label / value / note / chip ---- */
.tile .l,.ts-stat .l,.mstat .flab,.offer .figs .fact .flab,.hw-stat .hw-stat-l{
  font-size:var(--stat-l-size);font-weight:var(--stat-l-w);color:var(--stat-l-color);letter-spacing:var(--stat-l-ls);text-transform:none;line-height:1.25;overflow-wrap:anywhere}
.tile .n,.ts-stat .n,.mstat b,.bigmoney,.bignum,.hw-stat .hw-stat-n{
  font-weight:var(--stat-n-w);color:var(--stat-n-color);font-variant-numeric:tabular-nums lining-nums;text-shadow:var(--stat-n-glow);letter-spacing:-.01em}
.tile .rn,.ts-stat .rn,.hw-stat .hw-stat-note{font-size:var(--stat-note-size);font-weight:600;color:var(--stat-note-color);line-height:1.3}
.tile .chip,.ts-stat .chip,.mstat .chip,.offer .figs .fact .chip,.hw-stat .chip{font-size:var(--stat-chip-size);font-weight:var(--stat-chip-w);padding:3px 10px;min-height:26px}
.tile .n.avg,.tile .n.none{font-weight:var(--stat-n-w)}
.ts-stat .n.txt,.mstat.txt b{font-weight:700;color:#fff}
.ts-stat .n:not(.txt){color:var(--t-money)}
.tile.bad .n{color:#FFB3A6}.tile.warn .n{color:var(--t-money)}.tile.won .n{color:var(--sage)}
.tile,.ts-stat,.mstat,.hw-stat{min-width:0}
.tile,.ts-stat,.mstat{align-content:center}
/* money in tables + figures */
td.hw-money,td.pill .bignum{font-weight:700;letter-spacing:-.005em}

/* ---- chips: alert / status / change ---- */
.chip,.cchip{font-size:var(--chip-size);font-weight:var(--chip-w);letter-spacing:.01em}
.chip.sm{font-size:13px}
.chip.hw-pulse{font-weight:700}

/* ---- tabs, nav, table text one step up ---- */
.tabbar .tab,.seg button,.segb,.tf-seg button{font-size:var(--tab-size);font-weight:700}
.side a{font-size:var(--side-size);font-weight:700}
.side a:not(.on):not(.active):not([aria-current]){color:#E1EBF9}
thead th,.tablewrap th,th{font-size:var(--th-size);font-weight:700;color:#EAF1FC;letter-spacing:.05em}
td,.tablewrap td{font-size:var(--td-size);color:#EDF3FC}
.tablewrap td::before{font-size:13px;font-weight:700;color:#DCE7F8}
.note,small,.cnt,.lab,.flab{font-weight:600}
body small,.top .who{font-size:13px!important}
label.pf,.fgrid label,.flab{color:#E6EEFB}

/* type pass: fit fixes (found by the scan) */
thead th,.tablewrap th,th{letter-spacing:.02em}
td.pill .chip,.tablewrap .chip{white-space:normal;max-width:100%;text-align:center;line-height:1.25}
.tile .n,.ts-stat .n{max-width:100%;overflow-wrap:anywhere}
@media(max-width:560px){.tiles.team .tile .n,.tiles.heroes .tile .n,.tile .n{font-size:26px}.mstat b{font-size:28px}.mstat.txt b{font-size:22px}}
.cnt,.head h2 .cnt{font-size:13px;font-weight:700}
details.fold>summary,details.card>summary{font-size:14px}
h3,.card h3,.card>h3,.head h3{font-size:var(--h3-size)!important}
.istep h3{font-size:13px!important}
.tile .n.avg{font-size:19px}
.tiles.team .tile .n.avg,.tiles.heroes .tile .n.avg{font-size:19px}
thead th,.tablewrap th,th{letter-spacing:0}
.tile .n .avg,.tile .n .avg.none{font-size:19px}
.tablewrap table th,.tablewrap table.fit th{padding-left:4px;padding-right:4px}
.tile .n.hw-long,.ts-stat .n.hw-long,.mstat b.hw-long{font-size:20px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
.tiles.team .tile .n.hw-long{font-size:20px;white-space:normal}
.item .t,.item .t small,.item .t a{min-width:0;overflow-wrap:anywhere}
@media(max-width:560px){.tile .n.hw-long,.ts-stat .n.hw-long,.mstat b.hw-long,.tiles.team .tile .n.hw-long{font-size:18px}}
.item .t a.lnk,a.lnk{white-space:normal}
@media(max-width:560px){.tile .n,.tiles.team .tile .n,.tiles.heroes .tile .n{font-size:24px}}
@media(max-width:560px){.tile .n,.tiles.team .tile .n,.tiles.heroes .tile .n{font-size:32px}
  .tile .n.hw-mid,.tiles.team .tile .n.hw-mid,.tiles.heroes .tile .n.hw-mid,.ts-stat .n.hw-mid{font-size:24px}
  .tile .n.hw-long,.ts-stat .n.hw-long,.mstat b.hw-long,.tiles.team .tile .n.hw-long{font-size:18px}}

/* ---- stat grids: no orphans (shared, all pages). Phones use a 6-col grid: pairs span 3; when the count is odd the LAST THREE
   cards share one row (span 2 each), so 3 -> one row of 3, 5 -> 2+3, 7 -> 2+2+3. A lone card (count 1) spans the row. ---- */
@media(max-width:560px){
  .tiles:not(#_){display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
  .tiles:not(#_)>*{grid-column:span 3!important;margin:0}
  .tiles:not(#_)>:nth-child(odd):last-child,.tiles:not(#_)>:nth-child(even):nth-last-child(2),.tiles:not(#_)>:nth-child(odd):nth-last-child(3){grid-column:span 2!important;padding:16px 8px}
  .tiles:not(#_)>:only-child{grid-column:1/-1!important;padding:24px}
  .tiles:not(#_)>:nth-child(odd):last-child .n,.tiles:not(#_)>:nth-child(even):nth-last-child(2) .n,.tiles:not(#_)>:nth-child(odd):nth-last-child(3) .n{font-size:24px}
  .tiles:not(#_)>:nth-child(odd):last-child .n.hw-mid,.tiles:not(#_)>:nth-child(even):nth-last-child(2) .n.hw-mid,.tiles:not(#_)>:nth-child(odd):nth-last-child(3) .n.hw-mid{font-size:20px}
}
.hw-stat .n.hw-money,.hw-stat b.hw-money,.fact .bigmoney{white-space:nowrap}

/* ---- stat cards: content sits centred, so a card stretched by a taller neighbour never looks empty ---- */
.tile.hw-stat,.ts-stat.hw-stat,.mstat.hw-stat{display:flex;flex-direction:column;justify-content:center}
.tile.hw-stat>.chip,.ts-stat.hw-stat>.chip,.mstat.hw-stat>.chip{align-self:flex-start}

/* ---- label / value fields: LABEL is the bold bright part, the VALUE is regular weight (stat cards, money amounts and status pills keep theirs) ---- */
:root{--fld-l-size:14px;--fld-l-w:700;--fld-l-color:#F4F8FF;--fld-v-size:14px;--fld-v-w:400;--fld-v-color:#E8EFFB}
.fact:not(.hw-stat)>.flab,.kv>.flab,.pline>.flab,.tstep>.flab,.klist dt,.me dt,.pshow .flab,.bkv .flab,.fgrid .flab,.basisline .flab,.slimline .flab{
  font-size:var(--fld-l-size);font-weight:var(--fld-l-w);color:var(--fld-l-color);letter-spacing:.04em}
.fact:not(.hw-stat)>b:not(.hw-amt),.facts.big .fact:not(.hw-stat)>b:not(.hw-amt),.tstep>b:not(.hw-amt),.klist dd:not(.hw-amt),.me dd,.kv>div:not(.hw-amt),.pline>span:not(.flab):not(.hw-amt),.pshow b:not(.hw-amt){
  font-size:var(--fld-v-size);font-weight:var(--fld-v-w);color:var(--fld-v-color)}
.facts.big .fact:not(.hw-stat)>b:not(.hw-amt){font-size:15px}
.fact:not(.hw-stat)>b .chip,.klist dd .chip,.kv .chip,.pline .chip{font-weight:var(--stat-chip-w)}
.fact.warnfact>b{color:var(--gold-hot)}
.fact:not(.hw-stat)>b.hw-amt,.klist dd.hw-amt,.kv>div.hw-amt,.pline>span.hw-amt{font-weight:700;color:#fff}

/* ---- phones (390/375): the page header block is centred (title, names, subtitle, back link, badge rows, action rows). Desktop untouched. ---- */
@media(max-width:560px){
  main>.head:not(#_),main>div:not(.tabpane)>.head:first-child:not(#_){flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}
  main>.head>*,main>div:not(.tabpane)>.head:first-child>*{max-width:100%;text-align:center}
  main>.head h1,main>div:not(.tabpane)>.head:first-child h1,main>.head .sub,main>div:not(.tabpane)>.head:first-child .sub,main>.head a.lnk,main>div:not(.tabpane)>.head:first-child a.lnk{text-align:center;margin-left:auto;margin-right:auto}
  main>.head a.lnk,main>div:not(.tabpane)>.head:first-child a.lnk{display:inline-block}
  main>.head .row,main>div:not(.tabpane)>.head:first-child .row,main>.head .bbadges,main>div:not(.tabpane)>.head:first-child .bbadges{justify-content:center;flex-wrap:wrap}
}

/* ---- Title Case lives in the source strings now: no uppercase transform on titles, headers or labels (pills, the demo banner and the brand wordmark keep theirs) ---- */
:root{--ls-label:.02em;--stat-l-ls:.01em}
h1,h2,h3,.card h2,.pgroup h2,.istep h3,.tile .l,.ts-stat .l,.mstat .flab,.flab,.lab,.chips .lab,.likely,.me dt,.klist dt,th,thead th,.tst th,.tablewrap th,.side .side-label,.tab,.side a,summary,label.pf,.fgrid label,.tf-f,.tf-f>span{text-transform:none!important}
th,thead th,.tablewrap th,.tst th{letter-spacing:.02em!important}
.fact:not(.hw-stat)>.flab,.kv>.flab,.pline>.flab,.tstep>.flab,.klist dt,.me dt,.pshow .flab,.bkv .flab,.fgrid .flab,.basisline .flab,.slimline .flab,.flab,.lab,.side .side-label{letter-spacing:.02em}