/* Field-sales layer. Black chrome, construction yellow, gray and white. Yellow-and-black stripe. Loaded last. */
:root{
  --y:#FFC400;
  --ink:#F7F6F1;
  --mute:#C8C8C2;
  --mute2:#B4B4AE;
  --char:#1A1A1A;
  --tabh:64px;
}
html{font-size:100%}
body{font-size:1rem}
.muted,.mute,.regnote,.sidefoot,.hero p,.asof,.simsg,.sub{color:var(--mute)!important}
.tabbar a{color:#D2D2CC!important;font-size:12px!important;min-height:48px}
.tabbar a.on{color:var(--y)!important}

/* One sample line. Empty stock notes take no space. */
#asof:empty,#stockfoot:empty{display:none!important}
.samplebanner{font-size:14px;padding:8px 14px;background:#FFC400!important;color:#000!important}

/* Search and shortcuts: wrap, never clip a chip. */
.appshell .hero .in{padding:10px 16px 8px!important}
.appshell .hero h1{font-size:clamp(1.6rem,4vw,2.4rem)!important;line-height:1.05!important;margin:2px 0 8px!important}
.appshell .quick{
  display:flex!important;flex-wrap:wrap!important;overflow:visible!important;
  gap:8px!important;margin:10px 0 0!important;padding:0!important;
}
.appshell .quick button{
  flex:0 1 auto!important;min-height:44px!important;white-space:nowrap;
  padding:8px 12px!important;font-size:15px!important;
}
.appshell .regs{margin:10px 0 4px}
.appshell .bar{align-items:center;gap:8px}
.appshell .seg button,.appshell #fbtn{min-height:44px!important}

/* Machine row: the Quote action sits in the thumb / first screen, not under the fold. */
.appshell article.u{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  padding:0!important;
  overflow:hidden;
}
.appshell .ucard{
  padding:12px 8px 12px 14px!important;min-width:0;width:100%;max-width:100%;
  align-items:stretch!important;justify-content:flex-start!important;overflow:hidden;
}
.appshell .u .desc{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;
}
.appshell .u .ttl,.appshell .u .ft,.appshell .u .loc{overflow-wrap:anywhere;min-width:0}
.appshell .uquote{
  align-self:center;
  width:auto!important;
  min-width:92px;
  min-height:48px!important;
  margin:12px 12px 12px 0!important;
  padding:0 16px!important;
  border-radius:12px!important;
}
@media(max-width:520px){
  .appshell .u .desc{display:none!important}
  .appshell .stats{display:none!important}
  .appshell .hero h1{font-size:1.45rem!important;margin:0 0 6px!important}
  .appshell .hero .in{padding:4px 14px 2px!important}
  .appshell .searchbox input{min-height:44px!important}
  .appshell .quick{margin:6px 0 0!important;gap:6px!important}
  .appshell .regs{margin:6px 0 0}
  .appshell .bar{margin:8px 0 6px!important}
  .appshell .ucard{padding:8px 6px 8px 12px!important;gap:4px!important}
  .appshell .u .ft{padding-top:6px!important;margin-top:0!important}
  .appshell .u .ttl small{margin-top:2px!important}
}
/* Two-up cards on a tablet are too narrow for a side Quote button. */
@media(min-width:700px) and (max-width:999px){
  .appshell article.u{grid-template-columns:minmax(0,1fr)!important}
  .appshell .uquote{width:calc(100% - 24px)!important;margin:0 12px 12px!important}
}
@media(max-height:820px) and (min-width:900px){
  .appshell .stats{display:none!important}
  .appshell .hero h1{font-size:1.7rem!important}
}

/* Phone step labels were colliding. The “Step 2 of 5” line carries that job. */
.stages{display:flex!important;flex-wrap:wrap;gap:8px 6px}
.stages button{flex:1 1 calc(33.333% - 6px)!important}
@media(min-width:700px){
  .stages button{flex:1 1 0!important}
}
.appshell .hero{overflow:hidden!important}
.appshell .searchbox:focus-within{box-shadow:inset 0 0 0 3px #FFC400!important}
@media(max-width:819px){
  .top .in>.sp{min-width:0!important}
  html,body{overflow-x:clip}
}
.appshell .searchbox{box-sizing:border-box;width:100%;max-width:100%}
.top .in{flex-wrap:wrap!important;row-gap:6px}
@media(max-width:700px){
  .who .st{display:none!important}
  .fbtop span{display:none!important}
}

/* Continue stays in the thumb zone. The quote column pads so the last tiles scroll clear of it. */
.navrow,.appshell .navrow,#pane-quote .navrow{
  position:fixed!important;
  left:0!important;right:0!important;
  bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px))!important;
  z-index:25!important;
  margin:0!important;
  padding:8px 16px 10px!important;
  background:#000!important;
  border-top:1px solid #262626;
}
#pane-quote #app{padding-bottom:92px!important}
@media(min-width:820px){
  .navrow,.appshell .navrow,#pane-quote .navrow{left:232px!important;bottom:0!important}
}
.navrow .back,.navrow .next{min-height:52px!important}
.navrow .back{width:56px!important}
.stages{overflow:visible!important}
.stages span{font-size:12px!important;white-space:normal!important;min-height:44px}
#pane-quote{padding:8px 16px 28px}
.q h2,.q .lead{overflow-wrap:anywhere}
.opt,.chip,.catb{min-height:48px}
.acb{min-height:64px!important;padding:10px 12px!important}
#pane-quote #app{padding-bottom:120px!important}
.clq button,.clx{min-width:44px!important;min-height:44px!important}

/* Detail sheet: close control stays clear of the title. */
dialog.sheet{
  position:fixed!important;left:0!important;right:0!important;bottom:0!important;
  width:100%!important;max-width:100vw!important;margin:0!important;box-sizing:border-box!important;
}
dialog.sheet .sc{padding:8px 16px calc(24px + var(--safe-b))!important;box-sizing:border-box}
dialog.sheet .uhead{padding-top:28px!important}
dialog.sheet .ustick,.detailpane .ustick{
  position:static!important;bottom:auto!important;
  margin:16px 0 0!important;padding:0!important;
  background:none!important;box-shadow:none!important;
}
.storeclip,.appshell .ucard small.clip,.who .nm,.who .st,.quoterail h3,.quoterail .clip,.clt b,.clt .mdl,.clt .clip,.stepmodel{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.appshell .ucard,.appshell .ucard .hd,.appshell .ucard .ttl,.appshell .ucard .mt,.cl,.clt,.panel .hd{min-width:0;max-width:100%}
.appshell .ucard .hd{width:100%}
.appshell .ucard .ttl{flex:1 1 auto;overflow:hidden}
.appshell .ucard .mt,.clt .mt{display:flex;flex-direction:column;flex-shrink:1!important;align-items:flex-start!important;width:100%;min-width:0!important;max-width:100%!important}
.appshell .ucard .mt .yr,.clt .mt .yr{width:auto!important;max-width:max-content!important;align-self:flex-start!important}
.appshell article.u{min-width:0;max-width:100%}
.panel .hd h3.storeclip{flex:1;min-width:0}
dialog.sheet .uhead h2,.detailpane .uhead h2,dialog.sheet .kv dd,.detailpane .kv dd{
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;
}
dialog.sheet .uh2,.detailpane .uh2{align-items:flex-start!important}
dialog.sheet .uh2 h2,.detailpane .uh2 h2{flex:1;min-width:0}
dialog.sheet .mt,.detailpane .mt{display:flex!important;flex-direction:column!important;align-items:flex-start!important;width:100%!important;max-width:100%!important}
dialog.sheet .mt .mdl,.detailpane .mt .mdl,.detailpane .mt .mk,dialog.sheet .mt .mk{
  display:block!important;width:100%!important;max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;line-height:1.05!important;
}
.clt .mt .mdl{display:block!important;align-self:stretch;width:100%!important;min-width:0!important;white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important;max-width:100%!important}
.appshell .ucard .mt .mdl{
  display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  white-space:normal!important;word-break:break-word;overflow:hidden!important;
  text-overflow:ellipsis;font-size:18px!important;line-height:1.15!important;
  font-stretch:100%!important;max-width:100%!important;width:100%!important;min-width:0!important;
}
.stepno{display:flex;gap:8px;align-items:baseline;min-width:0}
.stepno .stepmodel{min-width:0;flex:1}
.editrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.editrow button{flex:1 1 calc(50% - 8px);min-height:44px;padding:8px 10px;border-radius:12px;border:1.5px solid #3A3A3A;background:transparent;color:#F7F6F1;font:700 14px var(--font)}
details.more summary{min-height:44px;display:flex;align-items:center;gap:8px}
label.f,.f,label.f small,.f small{color:#C8C8C2!important}
.ustick .k,.ustick .btn{min-height:52px!important}

/* Desktop: shorter intro so the first machine and Quote are on screen. */
@media(min-width:1100px){
  .appshell .hero .in{padding:8px 8px 4px!important}
  .appshell .stats{display:none!important}
  .appshell .finder-layout{align-items:start}
  .detailpane{top:72px}
}

/* Offline, empty, error. */
.offline{
  background:#111;color:#FFC400;text-align:center;
  font:800 15px/1.35 var(--font);padding:10px 16px;
  border-bottom:2px solid #FFC400;
}
.offline[hidden]{display:none!important}
.fastpath{background:#111;border:1px solid #3A3A3A;border-radius:16px;padding:12px 14px;margin:0 0 14px}
.fastpath p{margin:0;color:#F7F6F1;font-size:1rem;line-height:1.4}
.fastpath .eyebrow{margin:0 0 4px}
details.more.attdrop,details.progdrop{margin-top:12px}
.stages button{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font:700 12px var(--font);text-transform:uppercase;letter-spacing:.04em;color:#C8C8C2;border:0;border-top:3px solid #262626;padding:8px 4px 0;background:transparent;text-align:left;min-height:44px;cursor:pointer}
.stages button.on{color:#FFC400;border-color:#FFC400}
.stages button.done{color:#F7F6F1;border-color:#8A7A33}
.empty,.state-error{
  padding:28px 18px!important;text-align:left;
}
.empty b,.state-error b{font-size:1.25rem;color:#F7F6F1}
.empty p,.state-error p{color:#C8C8C2!important;font-size:1rem}

/* Focus, zoom, motion. */
:focus-visible{outline:3px solid #FFC400!important;outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media(min-width:820px){
  .tabbar{display:none!important}
}

/* Sign-in lives on its own page; keep the type large and the gray light enough. */
body.si .sub,body.si .sifoot{color:#C8C8C2!important;font-size:1rem}
/* Surfaces stay gray. The accent stays yellow. Text on yellow stays black. */
a{color:#FFC400}
input,textarea{caret-color:#FFC400}
.samplebanner,.rchip.nodata.on,.regs .rchip.on.nodata{background:#FFC400!important;color:#000!important;border-color:#FFC400!important}
.rchip.nodata{background:transparent!important;color:#F5F4EF!important;border-color:#3A3A3A!important}
.regs .rchip.on.nodata small,.rchip.nodata.on small{color:#000!important;opacity:.75}
.b.confirm,.b.soon{background:#111!important;color:#FFC400!important;border:1.5px solid #FFC400!important}
.prgm.confirm{border-left-color:#FFC400!important}
.state-error{border-color:#3A3A3A!important}
.tip{background:#1E1E1E!important;color:#FFC400!important}
.tip:hover,.btn.ink,button.ink{background:#FFC400!important;color:#000!important}
.u.mine{border-color:#3A3A3A!important}
body.si .again{min-height:44px;display:inline-flex;align-items:center}
body.si #cd{letter-spacing:.4em;font-size:1.5rem;text-align:center}
.pkbox{margin-top:16px}
.pkrow{align-items:center}
.pkrow .btn{min-height:44px}

/* Construction-tape accent. A thin stripe, not a background. */
.tape,.skel::before,.tabbar a.on::after,.sidebar nav a.on::before,.stages button.on::after{
  background:repeating-linear-gradient(-45deg,#FFC400 0 6px,#000 6px 10px);
}
.skel{background:#141414!important;position:relative;overflow:hidden}
.skel::before{content:"";position:absolute;left:0;right:0;top:0;height:6px}
.prog i,.prog>div{background:repeating-linear-gradient(-45deg,#FFC400 0 6px,#111 6px 10px)!important}
.tabbar a{position:relative}
.tabbar a.on::after{content:"";position:absolute;left:22%;right:22%;bottom:3px;height:3px;border-radius:2px}
.sidebar nav a{position:relative}
.sidebar nav a.on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px}
.stages button.on{position:relative}
.stages button.on::after{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.sentscr .tape{height:10px;width:min(240px,70%);margin:4px auto 12px;border-radius:3px}
@media(prefers-reduced-motion:no-preference){
  .skel::before{animation:tape 1s linear infinite}
}
@keyframes tape{to{background-position:20px 0}}

.sil{width:28px;height:16px;display:block;flex:none;background:transparent;container-type:inline-size}
@container (max-width:40px){.fine{display:none}}
.appshell .quick button .sil{width:28px;height:16px}
.cardmark{flex:none;width:46px}
.cardmark .sil{width:46px;height:26px}
.catb .sil{width:100%;height:56px;background:#0B0B0B;border-radius:8px}
.empty .ill .sil{width:72px;height:42px;color:#FFC400;margin-bottom:8px}
.sentscr .sentmark{display:flex;justify-content:center;align-items:center;gap:14px;min-height:52px}
.sentscr .sentmark .sil{width:72px;height:40px;color:#FFC400}

.gauge{display:inline-flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.gauge svg{width:64px;height:36px;flex:none}
.gauge b{font:800 22px/1 var(--disp);color:#F7F6F1}
.gauge small{color:#C8C8C2;font-size:12px}
.kv dd .gauge{max-width:100%}
.gfill{stroke-dasharray:var(--len);stroke-dashoffset:var(--rest)}
@media(prefers-reduced-motion:no-preference){
  .gfill{animation:gfill .6s ease both}
}
@keyframes gfill{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:var(--rest)}}

.appshell .badges{gap:8px}
.stamprow{display:flex;align-items:center;min-height:44px;margin-top:12px;padding:6px 0 4px}
.stamprow .qstamp{transform:rotate(-6deg);transform-origin:left center;margin:0}
.qstamp{
  position:relative;z-index:1;pointer-events:none;display:inline-flex;align-items:center;
  border:3px solid #FFC400;color:#FFC400;background:#000;
  font:800 12px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;
  padding:5px 7px;border-radius:4px;transform:rotate(-8deg);
}
.sentscr .qstamp{position:static;font-size:14px;padding:7px 10px}
@media(prefers-reduced-motion:no-preference){
  .qstamp{animation:qdrop .4s cubic-bezier(.2,.8,.2,1) both}
  .stamprow .qstamp{animation-name:qdropcard}
}
@keyframes qdrop{from{opacity:0;transform:rotate(-18deg) scale(1.3)}to{opacity:1;transform:rotate(-12deg) scale(1)}}
@keyframes qdropcard{from{opacity:0;transform:rotate(-12deg) scale(1.12)}to{opacity:1;transform:rotate(-6deg) scale(1)}}

.score{margin:8px 0 10px;border:1px solid #2A2A2A;border-radius:14px;background:#111}
.score summary{min-height:48px;display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;list-style:none}
.score summary::-webkit-details-marker{display:none}
.score summary span{color:#C8C8C2;font-size:13px;font-weight:700}
.score summary b{color:#F7F6F1;font-size:15px}
.score summary i{margin-left:auto;font-style:normal;color:#FFC400;font-size:13px;font-weight:800}
.score p{margin:0;padding:0 12px 12px;color:#C8C8C2;font-size:14px}

/* Black brand bar with a yellow-and-black stripe. Cards stay dark so they read in sun. */
.top{background:#000!important}
.top::after{content:"";display:block;height:8px;background:repeating-linear-gradient(-45deg,#FFC400 0 8px,#111 8px 14px)}
.brand .wm small,.sidebar .sidebrand small{color:#FFC400!important}
.who .av{background:#FFC400!important;color:#111!important}
.tabbar a.on{color:#FFC400!important}
.tabbar a.on .ic{background:#FFC400!important;color:#000!important}
#askopen{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:#FFC400;color:#111;font:800 15px/1 var(--font,system-ui);flex:none}
#askopen:focus{outline:3px solid #fff;outline-offset:2px}
@media(max-width:700px){
  .top .in{flex-wrap:nowrap!important}
  .brand .wm small{display:none}
  .who{max-width:34vw!important}
}
.asksheet{width:min(560px,100%);max-height:min(80vh,720px);margin:auto auto 0;border:0;border-radius:18px 18px 0 0;padding:0;background:#111;color:#F7F6F1}
.asksheet::backdrop{background:rgba(0,0,0,.55)}
.asksheet header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#000}
.asksheet header b{font-size:18px}
.askx{min-height:44px;padding:0 12px;border-radius:10px;border:1.5px solid #FFC400;background:transparent;color:#FFC400;font-weight:800}
#asklog{max-height:48vh;overflow:auto;padding:12px 14px 4px}
#askform{display:flex;gap:8px;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid #2A2A2A}
#askq{flex:1;min-height:48px;border-radius:12px;border:1.5px solid #3A3A3A;background:#0B0B0B;color:#F7F6F1;padding:0 12px;font-size:16px}
#askform button{min-height:48px;padding:0 14px;border:0;border-radius:12px;background:#FFC400;color:#111;font-weight:800}
.askchips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.askchips button,.asku button{min-height:44px;border-radius:12px;border:1.5px solid #3A3A3A;background:#1A1A1A;color:#F7F6F1;font-weight:700;padding:8px 10px;text-align:left}
.asku{border-top:1px solid #2A2A2A;padding:10px 0}
.asku b{font-size:16px}
.asku span,.asknote,.askq{color:#C8C8C2}
.asku p{margin:4px 0}
.sibrand{display:flex;align-items:center;gap:12px;background:#000;color:#fff;margin:-28px -22px 18px;padding:16px 22px 12px;border-radius:22px 22px 0 0}
.sibrand b{display:block;font:800 18px/1 var(--disp,system-ui);letter-spacing:.08em}
.sibrand small{color:#FFC400;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.sistripe{height:8px;margin:-18px -22px 18px;background:repeating-linear-gradient(-45deg,#FFC400 0 8px,#111 8px 14px)}
body.si{background:#0B0B0B}