/* ridge-apps.css: brings the three machining demos (Quote, Tool crib, Order intake) into the Ridge world.
   Load order in each demo: ridge.css → /shared/ridge-tool.css → the page's own <style> → this file (LAST).
   The demos were written in an older dark system whose tokens share names with Ridge (--bg --bg2 --line --line2
   --sans --mono --ok), so this file re-asserts the Ridge values, maps the demos' own names (--ink --sec --ice
   --warn --serif --ground* --hair*) into Ridge, and restyles their components with the same class names.
   Markup and JS can stay as they are; only the shell (nav, .phead, footer, scripts) changes. */

/* ---- tokens: Ridge wins over each demo's :root ---- */
:root{
  --bg:#050607;--bg2:#090B0E;--line:#1A1F24;--line2:#262D35;--ok:#7FD1A4;
  --sans:"Sora",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* the demos' own names, mapped into Ridge: --ice (their accent) becomes plain text; --warn becomes the attention orange */
  --ink:#DDE3EA;--sec:#A7B0BA;--sec2:#7C8793;--ice:#DDE3EA;--warn:#E0693F;--serif:var(--sans);
  --ground:#050607;--ground-2:#090B0E;--ground-3:#11151A;--secondary:#A7B0BA;--hair:#1A1F24;--hair-strong:#262D35;
}
html,body{background:var(--bg);color:var(--text)}
body{font:300 16px/1.6 var(--sans)}
::selection{background:var(--text);color:var(--bg)}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}
::-webkit-scrollbar-thumb{background:var(--line2);border-color:var(--bg)}
a:hover{color:inherit}
.topbar{display:none!important} /* the Ridge nav replaces each demo's own top bar */
.rv{opacity:1;transform:none} /* the demos' own reveal script is retired: use ridge.js data-rv / data-rv-fade */
.email-body .mk{overflow:visible} /* ridge.css uses .mk for text masks; the intake demo uses it for inline highlights */

/* ---- layout: the demos' wrappers sit under a .phead--compact header ---- */
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--g)}
main.wrap,.main-wrap{max-width:1280px;margin-inline:auto;padding:clamp(40px,7vh,72px) var(--g) clamp(64px,10vh,112px)}
section.block,section.blk{border-top:1px solid var(--line);padding-block:clamp(40px,7vh,72px);margin-top:0}
section.block:first-of-type,section.blk:first-of-type{border-top:0;padding-top:0}
.grid-2,.intake-grid{gap:clamp(28px,4vw,64px)}

/* ---- type ---- */
h1,h2,h3{font-family:var(--sans)}
section.block h2,section.blk h2,.sec-head h2,.assembly-builder h2{font:300 clamp(24px,2.4vw,32px)/1.15 var(--sans);letter-spacing:-.025em;color:var(--text);margin-bottom:8px}
.kicker,.sec-tag{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.kicker::before,.sec-tag::before{content:"";width:6px;height:6px;background:var(--dim);transform:rotate(45deg);flex:none}
.lead,.hint,.why-copy{color:var(--mid)}
.lead b,.lead em,.hint b,.why-copy b{color:var(--text);font-weight:600;font-style:normal}
section.block .hint{font-size:15px;line-height:1.6;margin-bottom:26px;max-width:52ch}
.why-copy{font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.75;max-width:62ch}
.back,.back-link{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);text-decoration:none}
.back:hover,.back-link:hover{color:var(--text)}

/* ---- panels and hairlines ---- */
.email-panel,.order-panel{background:linear-gradient(180deg,rgba(221,227,234,.04),rgba(221,227,234,.01) 38%),var(--app-bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:inset 0 1px 0 rgba(221,227,234,.06),0 40px 90px -50px rgba(0,0,0,.95);overflow:hidden}
.email-head,.order-head{padding:14px 18px;border-bottom:1px solid var(--line);background:transparent}
.email-head .from{font:400 13px/1.4 var(--sans);color:var(--mid)}
.email-head .from b{color:var(--text);font-weight:600}
.email-head .subj,.order-head .t,.order-status{font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.order-status.busy{color:var(--text)}
.order-status.done{color:var(--text)}
.order-status.done::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--ok);vertical-align:1px}
.email-body{font:400 15px/1.75 var(--sans);color:var(--text)}
.order-empty{display:flex;justify-content:center;align-items:center;gap:12px;font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.order-empty::before{content:"";width:6px;height:6px;border:1px solid var(--dim);transform:rotate(45deg)}
.email-body .mk{border-radius:3px}
.mk-on{background:rgba(221,227,234,.1);box-shadow:inset 0 -1px 0 rgba(221,227,234,.75)}
.mk-warn-on{background:rgba(224,105,63,.14);box-shadow:inset 0 -1px 0 var(--acc)}
.scan{height:1px;background:linear-gradient(90deg,transparent,var(--text) 30%,var(--text) 70%,transparent);filter:none;opacity:0}
.o-field{border-bottom:1px solid var(--line)}
.o-field .k{font:500 9.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.o-field .v{font:400 14.5px/1.45 var(--sans);color:var(--text)}
.o-field .v.mono{font:400 13px/1.45 var(--mono)}
.o-field .v b{font-weight:600}
.o-field.flag .k,.o-field.flag .v{color:var(--acc)}
.log-strip{border-top:1px solid var(--line);font:400 11.5px/2 var(--mono);color:var(--mid)}
.log-strip .ln i{font-style:normal;color:var(--dim)}
.log-strip .ln.warn{color:var(--text)}
.log-strip .ln.warn i{color:var(--acc)}
.stats-row,.how-grid{border-color:var(--line)}
.stat b{font:300 clamp(36px,4.4vw,60px)/1 var(--sans);letter-spacing:-.045em;color:var(--text);font-variant-numeric:tabular-nums}
.stat span{color:var(--mid);font-size:14px;line-height:1.55}
.how-item{border-top:1px solid var(--line)}
.how-item .n{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--dim)}
.how-item h3{font:600 clamp(17px,1.4vw,20px)/1.3 var(--sans);letter-spacing:-.01em;color:var(--text)}
.how-item p{color:var(--mid);font-size:15px;line-height:1.6}
.fit-list li{border-color:var(--line);color:var(--mid);font-size:16px;line-height:1.6}
.fit-list li::before{top:1.75em;left:2px;width:6px;height:6px;background:transparent;border:1px solid var(--dim);transform:rotate(45deg)}
.fit-list li b{color:var(--text);font-weight:600}
.cta-band h2{font:300 clamp(30px,4vw,56px)/1.08 var(--sans);letter-spacing:-.035em;color:var(--text)}
.cta-band p{color:var(--mid)}
.app-foot{border-top:1px solid var(--line)}
.app-foot .meta{font:500 10.5px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ---- Quote: viewer, upload, spec rows, price ---- */
#viewport-container{background:#030405;border:1px solid var(--line);border-radius:var(--r);box-shadow:inset 0 1px 0 rgba(221,227,234,.05),0 40px 90px -50px rgba(0,0,0,.95)}
.canvas-overlay{background:rgba(9,11,14,.9);border:1px solid var(--line2);border-radius:10px;font:400 11px/1.7 var(--mono);color:var(--mid)}
.canvas-overlay b{color:var(--text);font-weight:500}
.upload-zone{border:1px dashed var(--line2);border-radius:14px;background:rgba(5,6,7,.4);transition:border-color .3s,background-color .3s}
.upload-zone:hover,.upload-zone:focus-visible{border-color:var(--line3);background:rgba(221,227,234,.03)}
.upload-zone svg{fill:var(--mid)}
.upload-zone:hover svg{fill:var(--text)}
.upload-zone h3{font:400 17px/1.3 var(--sans);letter-spacing:-.01em;color:var(--text)}
.upload-zone p{color:var(--mid);font-size:13.5px}
.spec-row,.spec-row:first-of-type{border-top:1px solid var(--line)}
.spec-row .label,.price-label,.break-label{font:500 9.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.spec-row .value,.break-val,.price-total span{font:400 14px/1.3 var(--mono);color:var(--text);font-variant-numeric:tabular-nums}
.price-section{border-top:1px solid var(--line2)}
.price-main{font:300 clamp(44px,5.6vw,76px)/1 var(--sans);letter-spacing:-.05em;color:var(--text)}
.price-unit{font:400 15px/1 var(--sans);color:var(--mid)}
.price-total{font:400 14px/1.4 var(--sans);color:var(--mid)}
.breakdown{border-top:1px solid var(--line)}
.breakdown > div + div{border-left:1px solid var(--line)}
.form-row > label,.select-field label{color:var(--mid)}
.form-row > label{font:400 14px/1.4 var(--sans);letter-spacing:0}
.form-row > label output{font:400 13px/1 var(--mono);color:var(--text)}
.preset-row{flex-wrap:wrap}
.preset-btn{appearance:none;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--mid);font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .3s,border-color .3s,background-color .3s}
.preset-btn:hover{color:var(--text);border-color:var(--line3)}
.preset-btn.active{background:var(--text);border-color:var(--text);color:var(--bg)}

/* ---- form controls (every demo) ---- */
select,input[type="number"],input[type="text"],.select-field select{background-color:rgba(5,6,7,.6);border:1px solid var(--line2);border-radius:10px;color:var(--text);font:400 14px/1.4 var(--sans);min-height:44px}
select,.select-field select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' stroke='%23A7B0BA' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.select-field select{font:400 13px/1.4 var(--mono)}
select:focus,input:focus,.select-field select:focus{outline:none;border-color:var(--text);box-shadow:0 0 0 3px rgba(221,227,234,.12)}
select:hover,.select-field select:hover{border-color:var(--line3)}
.select-field label{font:500 9.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
/* range: the same track and thumb as ridge.css .rng (the demos set --fill themselves) */
input[type="range"]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:40px;margin:0;border-radius:0;background:transparent;cursor:pointer;touch-action:pan-y}
input[type="range"]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--text) var(--fill,0%),var(--line2) var(--fill,0%))}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;background:var(--bg);border:1.5px solid var(--text);box-shadow:0 0 0 5px rgba(221,227,234,.07)}
input[type="range"]::-moz-range-track{height:2px;background:var(--line2)}
input[type="range"]::-moz-range-progress{height:2px;background:var(--text)}
input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--bg);border:1.5px solid var(--text)}
input[type="range"]:focus-visible{outline:none}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--text)}

/* ---- buttons: primary = Ridge light pill, secondary = mono outline pill, text = mono underline ---- */
.btn-ice,.btn--ice,.btn--full{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--text);color:var(--bg);font:600 13.5px/1 var(--sans);letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer;transition:background-color .3s,color .3s}
.btn-ice:hover,.btn--ice:hover,.btn--full:hover{background:#fff;border-color:transparent;color:var(--bg)}
.btn-ice:disabled,.btn-ice:disabled:hover,.btn--ice:disabled{background:var(--line);color:var(--dim);opacity:1;cursor:default}
.btn--full{width:100%;margin-top:18px}
.link-btn{appearance:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;border-bottom:1px solid var(--line2);border-radius:0;background:none;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text);text-decoration:none;cursor:pointer;transition:border-color .3s}
.link-btn:hover{color:var(--text);border-color:var(--text)}
/* Tool crib's row actions (its .btn clashes with ridge.css .btn, so every variant is set in full here) */
.btn--out,.btn--in,.tool-row__actions .btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--mid);font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .3s,border-color .3s}
.btn--out:hover,.btn--in:hover,.tool-row__actions .btn:hover{color:var(--text);border-color:var(--line3);background:transparent}
.btn--in::before{content:"";width:5px;height:5px;margin-right:8px;border-radius:50%;background:var(--ok)}
.btn--out::before{content:"";width:5px;height:5px;margin-right:8px;border-radius:50%;background:var(--line3)}
@media (max-width:640px){.btn--out,.btn--in,.tool-row__actions .btn{min-height:44px}}

/* ---- Tool crib: shelf rows, assembly builder, audit ---- */
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sec-head h2{margin:0}
.sec-head .tag{border:0;padding:0;border-radius:0;font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:normal}
.tool-row{border-top:1px solid var(--line)}
.tool-row:last-child{border-bottom:1px solid var(--line)}
.tool-row::before{width:2px;background:transparent}
.tool-row:hover{background:rgba(221,227,234,.025)}
.tool-row:hover::before{background:var(--line3)}
.tool-row.low::before{background:var(--acc)}
.tool-row__name{font:400 15.5px/1.3 var(--sans);color:var(--text)}
.tool-row__tag,.tool-row__pn{font:500 9.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.stock-bar-wrap{height:2px;border-radius:2px;background:var(--line2)}
.stock-bar{background:var(--text)}
.stock-bar.low{background:var(--acc)}
.stock-count{font:400 13px/1 var(--mono);color:var(--text)}
.stock-count .max{color:var(--dim)}
.status-dot{width:6px;height:6px;background:var(--mid);box-shadow:none}
.status-dot.low{background:var(--acc);box-shadow:none}
.status-row .status-text{font:500 9.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.status-row.low .status-text{color:var(--acc)}
.sig-strip{border-top:1px solid var(--line);font:400 10.5px/1.6 var(--mono);letter-spacing:.06em;color:var(--dim);background:none}
.assembly-preview{background:radial-gradient(420px 200px at 50% 100%,rgba(221,227,234,.06),transparent 70%),var(--app-bg);border:1px solid var(--line);border-radius:var(--r)}
.assembly-preview::before{background-image:radial-gradient(rgba(221,227,234,.1) 1px,transparent 1.3px);background-size:18px 18px}
.assembly-graphic{animation:none}
.cutter-glint{background:rgba(221,227,234,.75)}
.assembly-label{font:500 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--text);font-weight:500}
.audit-grid{border-color:var(--line)}
.audit-cell{border-color:var(--line)}
.audit-cell__label{font:500 9.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.audit-cell__num{font:300 clamp(28px,2.6vw,36px)/1 var(--sans);letter-spacing:-.035em;color:var(--text);font-variant-numeric:tabular-nums}
.audit-cell__num.warn{color:var(--acc)}
.audit-sync{border-color:var(--line)}
.audit-sync__dot{width:6px;height:6px;background:var(--ok);box-shadow:none;animation:none}
.audit-sync__text{font:400 10.5px/1.5 var(--mono);color:var(--mid)}
.divider{background:var(--line)}

/* ---- toast (Tool crib's #toast, and wfiToast) ---- */
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:120;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(calc(100vw - 32px),520px);padding:12px 16px;background:rgba(9,11,14,.96);border:1px solid var(--line2);border-radius:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.95);font:400 12px/1.45 var(--mono);letter-spacing:.02em;color:var(--text);opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .35s,transform .5s var(--ease)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text);flex:none}
#toast.warn::before{background:var(--acc)}
#toast.ok::before{background:var(--ok)}

@media (max-width:640px){
  .preset-row{gap:8px}.preset-btn{flex:1 1 30%;padding:0 10px;font-size:10px;letter-spacing:.08em}
  .breakdown{grid-template-columns:1fr 1fr 1fr}
  .breakdown > div + div{padding-left:10px}
}
@media (prefers-reduced-motion:reduce){.cutter-glint,.assembly-graphic,.scanning .scan{animation:none}}