/* ============================================================
   LF WIREFRAME KIT - shared stylesheet
   ink #13174E · accent #D5BD59 · solid 1.5px · sharp corners
   Used by: component kit, marketplace wireframes, mobile stimuli
   ============================================================ */
:root{
  --navy:#13174E;
  --gold:#D5BD59;
  --gold-ink:#8A7420;      /* darkened brand gold for small text on white */
  --rust:#B04F2B;          /* errors only - gold stays positive */
  --offwhite:#EBEAD8;
  --paper:#FFFFFF;
  --faint:#13174E1A;       /* navy @ 10% hairlines */
  --mid:#13174E66;         /* navy @ 40% secondary text */
  --line:1.5px solid var(--navy);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--paper);color:var(--navy);
  font-family:"SF Mono","IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.5;padding:64px 24px 120px;
}
.sheet{max-width:960px;margin:0 auto}
.sheet.narrow{max-width:760px}

/* ---------- title block ---------- */
.titleblock{display:flex;gap:16px;margin-bottom:56px;flex-wrap:wrap}
.titleblock .cell{border:var(--line);padding:14px 18px;letter-spacing:.08em}
.titleblock .cell.main{flex:1;box-shadow:4px 4px 0 var(--gold);font-weight:700;font-size:15px;text-align:center}
.titleblock small{display:block;color:var(--mid);letter-spacing:.08em;font-weight:400}

/* ---------- section header / annotation ---------- */
.sec{display:flex;align-items:center;gap:16px;margin:64px 0 6px}
.sec .tag{color:var(--gold-ink);letter-spacing:.25em;font-weight:700;white-space:nowrap}
.sec .rule{flex:1;border-top:var(--line)}
.sec .num{border:var(--line);padding:2px 10px;font-weight:700}
.note{color:var(--mid);margin:2px 0 20px;max-width:640px}
.ann{color:var(--gold-ink);font-size:12px;letter-spacing:.04em}
.ann::before{content:"▸ "}
.mid-txt{color:var(--mid)}
.callout{border-left:3px solid var(--gold);padding:6px 0 6px 14px;margin-top:18px;color:var(--mid)}
.callout b{color:var(--navy)}

/* ---------- frame (artboard) ---------- */
.frame{border:var(--line);background:var(--paper);padding:28px;position:relative}
.frame::before,.frame::after{content:"+";position:absolute;color:var(--navy);font-weight:700}
.frame::before{top:-9px;left:-5px}
.frame::after{bottom:-10px;right:-5px}

/* ---------- layout ---------- */
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* fixed column grid - columns never wrap, contents shrink to fit */
.cols3{display:grid;grid-template-columns:1fr 1.1fr 1.3fr;gap:clamp(12px,2.5vw,28px);align-items:start}
.cols3>*{min-width:0}
.cols3 .field,.cols3 .search{min-width:0;width:100%}
.cols3 .phonegroup .field{width:auto}
.cols3 .selectbox:not(.phonegroup .selectbox){min-width:0;width:100%}
.stack{display:flex;flex-direction:column;gap:14px}
.sp{flex:1}
.ghost{background:repeating-linear-gradient(90deg,var(--faint) 0 6px,transparent 6px 10px);height:11px;margin:6px 0}
.w40{width:40%}.w60{width:60%}.w80{width:80%}

/* ---------- buttons ---------- */
.btn{border:var(--line);padding:10px 22px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:inline-block;background:var(--paper);font-family:inherit;font-size:12px;color:var(--navy);text-align:center}
.btn.gold{background:var(--gold);box-shadow:3px 3px 0 var(--navy)}
.btn.dark{background:var(--navy);color:var(--paper)}
.btn.disabled{border-color:var(--mid);color:var(--mid);border-style:dashed}
.btn.sm{padding:5px 14px;font-size:11px}
.btn.icon{padding:10px 14px}
.btn.block{display:block;width:100%}

/* ---------- segmented / chips ---------- */
.chip{border:var(--line);padding:6px 12px;display:inline-block;letter-spacing:.06em;min-width:110px;text-align:center}
.chip.on{background:var(--gold);font-weight:700}
.chip.off{color:var(--mid);border-color:var(--mid)}
.chip.auto{min-width:auto}
.seg{display:inline-flex}
.seg .s{border:var(--line);border-left-width:0;padding:8px 20px;min-width:100px;text-align:center}
.seg .s:first-child{border-left-width:1.5px}
.seg .s.on{background:var(--navy);color:var(--paper);font-weight:700}

/* ---------- selection controls ---------- */
.ctl{display:flex;gap:12px;align-items:center}
.cbx{width:16px;height:16px;border:var(--line);flex:none;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.cbx.x{background:var(--navy);color:var(--gold)}
.rad{width:16px;height:16px;border:var(--line);border-radius:50%;flex:none;position:relative}
.rad.on::after{content:"";position:absolute;inset:3px;background:var(--gold);border-radius:50%;outline:1px solid var(--navy);outline-offset:-1px}
.tgl{width:44px;height:22px;border:var(--line);flex:none;position:relative}
.tgl .knob{position:absolute;top:2px;width:15px;height:15px;background:var(--navy)}
.tgl.on{background:var(--gold)}
.tgl.on .knob{right:2px}
.tgl.off .knob{left:2px;background:var(--mid)}

/* ---------- inputs ---------- */
.field{border:var(--line);padding:10px 12px;min-width:200px}
.field small{display:block;color:var(--mid);letter-spacing:.12em;font-size:10px;text-transform:uppercase;margin-bottom:2px}
.field.focus{box-shadow:3px 3px 0 var(--gold)}
.field.error{border-color:var(--rust)}
.field.flex1{flex:1}
.err-txt{color:var(--rust);font-size:11px;margin-top:4px}
.caret{display:inline-block;width:2px;height:14px;background:var(--navy);vertical-align:text-bottom;margin-left:1px}
.selectbox{border:var(--line);padding:10px 12px;display:flex;justify-content:space-between;gap:24px;min-width:200px}
.search{border:var(--line);padding:10px 12px;display:flex;gap:10px;min-width:260px}
.search .mag{font-weight:700}
.textarea{border:var(--line);padding:10px 12px;min-height:80px;min-width:280px}

/* ---------- stepper / slider ---------- */
.stepper{display:inline-flex;border:var(--line)}
.stepper span{padding:8px 16px;font-weight:700}
.stepper span:nth-child(2){border-left:var(--line);border-right:var(--line);min-width:56px;text-align:center}
.stepper.sm span{padding:5px 10px;font-size:12px}
.stepper.sm span:nth-child(2){min-width:36px}
.slider{position:relative;width:280px;height:24px}
.slider .track{position:absolute;top:11px;left:0;right:0;border-top:1.5px solid var(--mid)}
.slider .fill{position:absolute;top:11px;left:0;width:55%;border-top:3px solid var(--navy);margin-top:-1px}
.slider .thumb{position:absolute;top:4px;left:55%;width:16px;height:16px;background:var(--gold);border:var(--line);margin-left:-8px}

/* ---------- tabs / accordion ---------- */
.tabs{display:flex;border-bottom:var(--line)}
.tab{padding:8px 20px;color:var(--mid)}
.tab.on{color:var(--navy);font-weight:700;border:var(--line);border-bottom:2px solid var(--paper);margin-bottom:-1.5px;background:var(--paper)}
.acc{border:var(--line)}
.acc .h{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;font-weight:700;border-bottom:var(--line)}
.acc .h:last-child{border-bottom:none}
.acc .body{padding:12px 16px;border-bottom:var(--line);color:var(--mid)}

/* ---------- navigation ---------- */
.nav{border:var(--line);display:flex;align-items:center;gap:24px;padding:12px 18px}
.nav .logo{font-weight:700;letter-spacing:.15em}
.nav a{color:var(--mid);text-decoration:none}
.nav a.on{color:var(--navy);font-weight:700;border-bottom:2px solid var(--gold)}
.crumb{display:flex;gap:10px;color:var(--mid)}
.crumb b{color:var(--navy)}
.bottomnav{border:var(--line);display:flex}
.bn{flex:1;text-align:center;padding:10px 0;color:var(--mid);font-size:11px;border-left:1px solid var(--faint)}
.bn:first-child{border-left:none}
.bn.on{color:var(--navy);font-weight:700;background:var(--offwhite)}
.bn i{display:block;font-style:normal;font-size:15px}

/* ---------- progress / steps / pagination ---------- */
.bar{border:var(--line);height:16px;width:320px;position:relative}
.bar .fill{position:absolute;inset:2px;width:62%;background:repeating-linear-gradient(-45deg,var(--gold) 0 6px,var(--navy) 6px 8px)}
.steps{display:flex;align-items:center}
.dot{width:26px;height:26px;border:var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.dot.done{background:var(--navy);color:var(--gold)}
.dot.now{background:var(--gold)}
.dot.future{border-color:var(--mid);color:var(--mid)}
.link-line{width:48px;border-top:var(--line)}
.link-line.faint{border-color:var(--mid);border-top-style:dashed}
.pager{display:inline-flex;gap:8px}
.pg{border:var(--line);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}
.pg.on{background:var(--navy);color:var(--paper);font-weight:700}
.pg.ghosted{border-color:var(--mid);color:var(--mid)}

/* ---------- ledger states ---------- */
.states{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.state{border:var(--line);padding:6px 16px;letter-spacing:.1em;font-size:11px;text-transform:uppercase}
.state.done{background:var(--navy);color:var(--paper)}
.state.now{background:var(--gold);font-weight:700}
.arrow{padding:0 8px;font-weight:700}

/* ---------- badges / tags ---------- */
.badge{display:inline-block;padding:2px 10px;font-size:11px;letter-spacing:.08em;font-weight:700}
.badge.solid{background:var(--navy);color:var(--paper)}
.badge.gold{background:var(--gold);color:var(--navy)}
.badge.line{border:1.5px solid var(--navy)}
.badge.dim{border:1px dashed var(--mid);color:var(--mid);font-weight:400}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:50%;background:var(--gold);border:var(--line);font-size:11px;font-weight:700}

/* ---------- feedback ---------- */
.alert{border:var(--line);padding:12px 16px;display:flex;gap:12px;align-items:baseline;max-width:520px}
.alert .ic{font-weight:700}
.alert.gold{border-left:6px solid var(--gold)}
.alert.rust{border-left:6px solid var(--rust)}
.toast{display:inline-flex;gap:14px;background:var(--navy);color:var(--paper);padding:12px 18px;box-shadow:4px 4px 0 var(--gold)}
.toast b{color:var(--gold)}
.tooltip{position:relative;display:inline-block}
.tooltip .tip{position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:var(--navy);color:var(--paper);padding:5px 12px;white-space:nowrap;font-size:11px}
.tooltip .tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--navy)}

/* ---------- dropdown / combobox ---------- */
.dd{display:inline-block;min-width:220px;position:relative}
.dd.block{display:block}
.dd .menu{border:var(--line);border-top:none;background:var(--paper);position:absolute;top:100%;left:0;right:0;z-index:20;box-shadow:4px 4px 0 var(--faint)}
.dd .item{padding:9px 12px;border-bottom:1px solid var(--faint);display:flex;justify-content:space-between;gap:8px}
.dd .item:last-child{border-bottom:none}
.dd .item.on{background:var(--offwhite);font-weight:700}
.dd .item.dim{color:var(--mid)}
.hl{background:var(--gold);font-weight:700}

/* ---------- modal / scrim ---------- */
.scrim{background:repeating-linear-gradient(-45deg,var(--faint) 0 8px,transparent 8px 16px);padding:36px;display:flex;justify-content:center}
.modal{background:var(--paper);border:var(--line);box-shadow:6px 6px 0 var(--navy);max-width:380px;width:100%}
.modal .mh{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:var(--line);font-weight:700}
.modal .mb{padding:18px;color:var(--mid)}
.modal .mf{display:flex;justify-content:flex-end;gap:12px;padding:14px 18px;border-top:var(--line)}

/* ---------- card ---------- */
.card{border:var(--line);max-width:300px}
.card .img{height:110px;background:repeating-linear-gradient(-45deg,var(--offwhite) 0 10px,transparent 10px 20px);border-bottom:var(--line);position:relative}
.card .img::after{content:"IMG 3:2";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--mid);letter-spacing:.2em;font-size:11px}
.card .cb{padding:16px}

/* ---------- table ---------- */
table{border-collapse:collapse;width:100%}
td,th{border:1px solid var(--navy);padding:8px 12px;text-align:left;font-size:12px}
th{letter-spacing:.12em;text-transform:uppercase;font-size:10px;background:var(--offwhite)}
tr.sel td{background:var(--gold)}
tr.total td{font-weight:700;background:var(--gold)}

/* ---------- calendar ---------- */
.cal{border:var(--line);display:inline-block;background:var(--paper)}
.cal .ch{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:var(--line);font-weight:700}
.cal table{border:none}
.cal td,.cal th{border:none;width:34px;height:30px;text-align:center;padding:0;font-size:12px;background:none}
.cal th{color:var(--mid)}
.cal td.dim{color:var(--mid)}
.cal td.on{background:var(--gold);font-weight:700;outline:1.5px solid var(--navy);outline-offset:-1.5px}
.cal td.range{background:var(--offwhite)}

/* ---------- avatars ---------- */
.avatar{width:36px;height:36px;border:var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;background:var(--offwhite)}
.avatar.gold{background:var(--gold)}
.avatar.dark{background:var(--navy);color:var(--paper)}
.avgroup{display:inline-flex}
.avgroup .avatar{margin-left:-10px;box-shadow:0 0 0 2px var(--paper)}
.avgroup .avatar:first-child{margin-left:0}

/* ---------- upload ---------- */
.dropzone{border:1.5px dashed var(--navy);padding:28px;text-align:center;max-width:380px}
.filerow{display:flex;gap:12px;align-items:center;border:var(--line);padding:8px 12px;max-width:380px;margin-top:10px}
.filerow .minibar{flex:1;border:1px solid var(--navy);height:8px;position:relative}
.filerow .minibar span{position:absolute;inset:1px;width:70%;background:var(--gold)}

/* ---------- radio card ---------- */
.radiocard{border:var(--line);padding:14px 16px;display:flex;gap:14px;align-items:flex-start;max-width:420px;background:var(--paper)}
.radiocard.on{box-shadow:4px 4px 0 var(--gold)}
.radiocard.unavail{border-style:dashed;border-color:var(--mid);color:var(--mid)}
.radiocard .rc-body{flex:1}

/* ---------- phone group (joined field + selectbox, one line, never overflows) ---------- */
.phonegroup{display:flex;align-items:stretch;flex-wrap:nowrap;min-width:0}
.phonegroup .selectbox{min-width:80px;width:80px;flex:none;align-items:center}
.phonegroup .selectbox:first-child{border-right:none}
.phonegroup .field{flex:1 1 auto;width:auto;min-width:0}

/* ---------- otp ---------- */
.otp{display:inline-flex;gap:8px}
.otp span{width:38px;height:44px;border:var(--line);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.otp span.empty{border-color:var(--mid);color:var(--mid)}

/* ---------- timeline ---------- */
.timeline{position:relative;padding-left:26px;max-width:420px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;border-left:1.5px solid var(--navy)}
.tl{position:relative;padding-bottom:18px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-26px;top:3px;width:12px;height:12px;border:var(--line);background:var(--paper)}
.tl.done::before{background:var(--navy)}
.tl.now::before{background:var(--gold)}
.tl.future{color:var(--mid)}
.tl.future::before{border-color:var(--mid);border-style:dashed}
.tl small{display:block;color:var(--mid);font-size:11px}
/* schedule variant: port calls are clickable, marks move */
.timeline.schedule .tl{cursor:pointer}
.timeline.schedule .tl:hover b{text-decoration:underline}

/* ---------- drawer / bottom sheet ---------- */
.drawerdemo{border:var(--line);display:flex;height:200px;overflow:hidden}
.drawerdemo .page{flex:1;padding:14px;background:repeating-linear-gradient(-45deg,var(--faint) 0 8px,transparent 8px 16px)}
.drawerdemo .drawer{width:44%;border-left:var(--line);background:var(--paper);padding:14px;box-shadow:-4px 0 0 var(--gold)}
.sheetdemo{border:var(--line);max-width:320px;height:200px;display:flex;flex-direction:column;justify-content:flex-end;background:repeating-linear-gradient(-45deg,var(--faint) 0 8px,transparent 8px 16px);overflow:hidden}
.bsheet{background:var(--paper);border-top:var(--line);box-shadow:0 -4px 0 var(--gold);padding:12px 16px 16px}
.grab{width:44px;border-top:3px solid var(--navy);margin:0 auto 10px}

/* ---------- sticky price bar ---------- */
.stickybar{border:var(--line);display:flex;align-items:center;gap:16px;padding:12px 16px;box-shadow:0 -4px 0 var(--gold);background:var(--paper)}

/* ---------- rating ---------- */
.stars{letter-spacing:6px;font-size:18px}
.stars .off{color:var(--mid)}
.nps{display:inline-flex}
.nps span{width:30px;height:30px;border:var(--line);border-left-width:0;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.nps span:first-child{border-left-width:1.5px}
.nps span.pick{background:var(--gold);font-weight:700}

/* ---------- carousel / misc ---------- */
.caro{border:var(--line);max-width:340px}
.caro .slide{height:120px;background:repeating-linear-gradient(-45deg,var(--offwhite) 0 10px,transparent 10px 20px);display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:var(--navy);font-weight:700}
.dots{display:flex;gap:8px;justify-content:center;padding:10px 0}
.dots i{width:8px;height:8px;border:1.5px solid var(--navy);border-radius:50%;font-style:normal}
.dots i.on{background:var(--gold)}
.spinner{width:26px;height:26px;border:3px solid var(--faint);border-top-color:var(--navy);border-radius:50%;display:inline-block;animation:spin 1s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.divlabel{display:flex;align-items:center;gap:14px;color:var(--mid);letter-spacing:.2em;font-size:11px}
.divlabel::before,.divlabel::after{content:"";flex:1;border-top:1px solid var(--faint)}
.fab{width:52px;height:52px;border:var(--line);border-radius:50%;background:var(--gold);display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;box-shadow:3px 3px 0 var(--navy)}

/* ---------- tasks / diff (marketplace) ---------- */
.task{display:flex;gap:14px;border-bottom:1px solid var(--faint);padding:12px 4px;align-items:baseline}
.task:has(.rad){align-items:center} /* option rows center on the radio */
.task:last-child{border-bottom:none}
.box{width:14px;height:14px;border:var(--line);flex:none;position:relative;top:2px}
.box.x{background:var(--navy)}
.task .who{margin-left:auto;color:var(--mid);font-size:11px;white-space:nowrap}
.diff{display:grid;grid-template-columns:1fr 40px 1fr;gap:0;align-items:stretch}
.diff .col{border:var(--line);padding:14px}
.diff .mid{display:flex;align-items:center;justify-content:center;font-weight:700}
.strike{text-decoration:line-through;color:var(--mid)}
.price{font-size:22px;font-weight:700}

/* ---------- skeleton / empty ---------- */
.skel{border:var(--line);padding:16px;max-width:300px}
.skel.dashed{border-style:dashed}

/* ---------- mobile artboards (375px stimuli) ---------- */
.boards{display:flex;gap:48px;flex-wrap:wrap;align-items:flex-start;justify-content:center}
.board{width:375px;flex:none}
.board .blabel{display:flex;justify-content:space-between;margin-bottom:10px;color:var(--gold-ink);letter-spacing:.15em;font-size:11px;font-weight:700}
.board .blabel .bnum{border:var(--line);color:var(--navy);padding:1px 8px}
.phone{border:var(--line);background:var(--paper);position:relative;display:flex;flex-direction:column;min-height:720px}
.phone::before,.phone::after{content:"+";position:absolute;color:var(--navy);font-weight:700}
.phone::before{top:-9px;left:-5px}
.phone::after{bottom:-10px;right:-5px}
.statusbar{display:flex;justify-content:space-between;padding:8px 16px;font-size:10px;letter-spacing:.1em;color:var(--mid);border-bottom:1px solid var(--faint)}
.appbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:var(--line);font-weight:700;letter-spacing:.1em}
.screen{padding:16px;flex:1;display:flex;flex-direction:column;gap:14px}
.phone .stickybar{margin-top:auto;border-left:none;border-right:none;border-bottom:none}
.phone .bottomnav{border-left:none;border-right:none;border-bottom:none}
.phone .field,.phone .selectbox,.phone .search{min-width:0;width:100%}
.phone .radiocard{max-width:none}
.phone .chip{min-width:0;flex:1}

footer{margin-top:96px;border-top:var(--line);padding-top:16px;color:var(--mid);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;letter-spacing:.08em;font-size:11px}

/* ============================================================
   INTERACTION LAYER - v01.2
   durations 100-250ms · ease-out entrances · transform/opacity only
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}

/* cursor: everything pressable */
.btn:not(.disabled),.chip:not(.off),.seg .s,.tab,.acc .h,.radiocard:not(.unavail),
.ctl,.cbx,.rad,.tgl,.pg:not(.ghosted),.bn,.dd .item:not(.dim),.selectbox,
.nps span,.dots i,.fab,.stepper span:first-child,.stepper span:last-child,
.nav a,.crumb b,.task .box,.slider .thumb{cursor:pointer}
.btn.disabled,.chip.off,.pg.ghosted,.dd .item.dim,.radiocard.unavail{cursor:not-allowed}
.slider .thumb{cursor:grab}
.slider .thumb.grabbing{cursor:grabbing}

/* press feedback - instant, 140ms out */
.btn,.chip,.seg .s,.pg,.fab,.cbx,.tgl,.dot,.bn,.nps span,.stepper span{
  transition:transform 140ms var(--ease-out),background-color 140ms ease,color 140ms ease,box-shadow 140ms var(--ease-out);
}
.btn:not(.disabled):active,.chip:not(.off):active,.pg:not(.ghosted):active,
.seg .s:active,.cbx:active,.nps span:active,.bn:active{transform:scale(.97)}
/* hard-shadow buttons seat fully into their shadow: fast down, eased release */
.btn.gold:active,.fab:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--navy);transition-duration:60ms}

/* hover - fine pointers only, under 200ms, no theatrics */
@media (hover:hover) and (pointer:fine){
  .btn:not(.disabled):not(.gold):not(.dark):hover,
  .chip:not(.on):not(.off):hover,
  .seg .s:not(.on):hover,
  .pg:not(.on):not(.ghosted):hover,
  .dd .item:not(.dim):hover,
  .tab:not(.on):hover,
  .acc .h:hover,
  .bn:not(.on):hover{background:var(--offwhite)}
  .btn.gold:hover:not(:active),.fab:hover:not(:active){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--navy)}
  .btn.dark:hover{background:#1c2166}
  .radiocard:not(.on):not(.unavail):hover{box-shadow:3px 3px 0 var(--faint)}
  .tab:not(.on):hover,.nav a:not(.on):hover{color:var(--navy)}
  .tgl:hover .knob{transform:scaleX(1.15)}
}

/* focus - keyboard visible, distinct from hover */
:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px}

/* moving parts */
.tgl .knob{transition:transform 160ms var(--ease-out)}
.tgl.on .knob{right:auto;left:2px;transform:translateX(25px);background:var(--navy)}
.radiocard{transition:box-shadow 180ms var(--ease-out)}
.rad::after{transition:opacity 120ms ease}
.slider .thumb,.slider .fill{transition:none} /* driven by pointer, stays 1:1 */

/* expander - summary row with a Change link that reveals detail */
.collapsed{display:none}

/* entrance - rare/occasional UI only (menus, popped content) */
@keyframes kit-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.pop{animation:kit-pop 180ms var(--ease-out)}
.dd .menu.hidden{display:none}
.acc .body.closed{display:none}

/* tooltip - hover/focus driven */
.tooltip .tip{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(3px);transition:opacity 150ms ease,transform 150ms var(--ease-out)}
.tooltip:hover .tip,.tooltip:focus-within .tip{opacity:1;transform:translateX(-50%) translateY(0)}

/* toast - one entrance on load (rare event) */
.toast{animation:kit-pop 220ms var(--ease-out)}

/* value bump when a number changes (stepper) */
@keyframes kit-bump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.bump{animation:kit-bump 180ms var(--ease-out)}

/* editable field values (JS wraps trailing text in .val) */
.field{cursor:text}
.field .val{display:block;outline:none;min-height:1.2em;white-space:nowrap;overflow:hidden}
.field:focus-within{box-shadow:3px 3px 0 var(--gold)}

/* ---------- annotation hotspots (research notes, not design) ---------- */
/* pulsing dot anchored to the element it annotates; click reveals the note */
.spot-anchor{position:relative}
.spot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--paper);border:1.5px solid var(--navy);cursor:pointer;z-index:30}
.spot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--navy)}
.spot::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--navy);animation:spot-pulse 3.2s ease infinite}
@keyframes spot-pulse{0%,20%{transform:scale(1);opacity:.4}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.spot-pop{position:absolute;z-index:40;width:300px;max-width:82vw;background:var(--paper);border:var(--line);border-left:6px solid var(--gold);padding:12px 14px;font-size:12px;color:var(--mid);box-shadow:4px 4px 0 var(--faint);display:none}
.spot-pop b{color:var(--navy)}
.spot-pop .ids{display:block;margin-top:8px;color:var(--gold-ink);letter-spacing:.1em;font-size:10px;text-transform:uppercase}
.spot-pop.open{display:block;animation:kit-pop 180ms var(--ease-out)}

/* juice - reserved for rare, first-time moments (claims, reveals) */
.hero-band{background:
  repeating-linear-gradient(-45deg,#D5BD5926 0 2px,transparent 2px 14px),
  var(--paper)}
.reveal>*{animation:kit-rise 420ms var(--ease-out) backwards} /* backwards, not both: a persisted transform would stack later siblings above overlays */
.reveal>*:nth-child(2){animation-delay:70ms}
.reveal>*:nth-child(3){animation-delay:140ms}
.reveal>*:nth-child(4){animation-delay:210ms}
.reveal>*:nth-child(5){animation-delay:280ms}
@keyframes kit-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.bigzero{font-size:44px;font-weight:700;line-height:1;letter-spacing:-.02em}
.bigzero small{display:block;font-size:11px;font-weight:400;color:var(--gold-ink);letter-spacing:.2em;text-transform:uppercase;margin-top:6px}

/* reading surfaces never animate: tables, timelines, ledgers stay static */

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}