/* board-apps.css — re-tokens the three demo apps into the Board world. Loaded AFTER each page's inline
 * <style> and after ../shared/board.css, so it only overrides: the pages' own variables, their display
 * type, their few hardcoded dark-theme literals, and their controls. Markup and JS untouched. */

/* ---- variables the pages read (app1 + app4 use --bg/--sec/--ice/--line; app2 uses --ground/--hair) ---- */
:root{
  --bg:#F6F6F1;--bg2:#FFFFFF;--ink:#1B1B1B;--sec:#5B5E5A;--sec2:#6B6F6A;
  --ice:#C0522E;--ok:#2E9E5B;--warn:#C0522E;
  --line:rgba(27,27,27,.14);--line2:rgba(27,27,27,.55);
  --ground:#F6F6F1;--ground-2:#FFFFFF;--ground-3:#ECECE6;--secondary:#5B5E5A;
  --hair:rgba(27,27,27,.14);--hair-strong:rgba(27,27,27,.3);
  --serif:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;--sans:"Barlow",system-ui,sans-serif;--mono:"Barlow",system-ui,sans-serif;
}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans)}
::selection{background:var(--ice);color:#fff}
:focus-visible{outline:2px solid var(--b);outline-offset:3px}
::-webkit-scrollbar-thumb{background:var(--ink);border:2px solid var(--bg);border-radius:0}
a{color:var(--ink)}
a:hover{color:var(--ink)}

/* ---- type: the board's condensed uppercase display ---- */
h1,h2,h3,.sec-head h2,section.block h2,.order-head .t,.how-item h3,.cta-band h2{font-family:var(--serif)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:-.01em;line-height:.95;color:var(--ink)}
h1{font-size:clamp(38px,5.2vw,76px)!important;letter-spacing:-.015em}
.kicker,.sec-tag,.sec-head .tag{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--serif)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--sec)!important;margin-bottom:14px}
.kicker::before,.sec-tag::before,.sec-head .tag::before{content:"";width:12px;height:12px;background:var(--ice)}
.lead,.lead b,.lead em,.hint,.why-copy{font-family:var(--sans)!important;color:var(--sec)}
.lead b,.lead em,.hint b,.why-copy b{color:var(--ink);font-style:normal;font-weight:600}
.meta,.demo-label,.topbar__demo-label,.spec-row .label,.break-label,.price-label,.o-field .k,.audit-cell__label,.tool-row__tag,.status-row .status-text,.stat span,.log-strip .ln{font-family:var(--serif)!important;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sec)}
.mono,.o-field .v.mono,.spec-row .value,.break-val,.price-total,.audit-cell__num,.stock-count,.stat b{font-family:var(--sans)!important;font-variant-numeric:tabular-nums}
.price-total,.price-main,.audit-cell__num,.stat b{font-family:var(--serif)!important;font-weight:700;color:var(--ink)!important}
.price-total span,.accent,#qty-val,#total-price,.total-price{color:var(--ice)!important;font-family:var(--serif)!important}

/* ---- hairlines instead of cards, and the few dark literals ---- */
section.block,section.blk,.email-panel,.order-panel,.inventory-container,.assembly-builder,.audit-dashboard,.how-item,.price-section,.breakdown,.upload-zone,.spec-row,.tool-row{background:transparent;border-color:var(--line);border-radius:0;box-shadow:none}
.email-panel,.order-panel{background:var(--bg2);border:1.5px solid var(--ink)}
.email-head,.order-head{border-bottom:1px solid var(--line);background:var(--ground-3)}
.canvas-overlay{background:rgba(27,27,27,.86);color:#F6F6F1;border-color:rgba(246,246,241,.2);border-radius:0}
.canvas-overlay b{color:#E0693F}
#viewport-container{background:#111;border:1.5px solid var(--ink);border-radius:0;box-shadow:0 26px 40px -30px rgba(27,27,27,.7)}
.upload-zone{border:1px dashed var(--line2);background:var(--bg2)}
.upload-zone:hover{border-color:var(--ice);background:rgba(192,82,46,.05)}
.upload-zone svg{fill:var(--ice)}
.mk-on{background:rgba(192,82,46,.16);box-shadow:0 1px 0 rgba(192,82,46,.6)}
.mk-warn-on{background:rgba(43,108,217,.14);box-shadow:0 1px 0 rgba(43,108,217,.6)}
.scan{filter:drop-shadow(0 0 6px rgba(192,82,46,.5));background:var(--ice)}
.o-field.on .v{color:var(--ink)}
.o-field.flag .k,.o-field.flag .v{color:var(--ice)}
.log-strip .ln.on{color:var(--ink)}
.log-strip .ln i{background:var(--line2)}.log-strip .ln.on i{background:var(--ok)}.log-strip .ln.warn i{background:var(--ice)}
.tool-row::before{background:var(--line2)}
.tool-row:hover::before{background:var(--ice)}
.tool-row.low::before{background:var(--ice)}
.stock-bar{background:var(--ink)}.stock-bar.low{background:var(--ice)}
.status-dot{background:var(--ok)}.status-dot.low{background:var(--ice)}
.assembly-preview{background:var(--ground-3);border:1.5px solid var(--ink);border-radius:0}
.assembly-preview::before{background:none}
.assembly-graphic{filter:none}
.cutter-glint{background:rgba(192,82,46,.8);box-shadow:none}
.part-holder,.part-extension,.part-collet,.part-cutter{background:var(--ink);box-shadow:none;border-radius:0}
.part-cutter{background:var(--ice)}
.audit-sync__dot{background:var(--ok);box-shadow:none}
.audit-cell__num.warn{color:var(--ice)!important}
#toast,.toast{background:var(--bg2);border:1px solid var(--ink);color:var(--ink);border-radius:0;box-shadow:0 12px 28px -14px rgba(27,27,27,.7)}
#toast::before{background:var(--ice)}#toast.warn::before{background:var(--b)}
.sig-strip{background:var(--ink);color:var(--bg)}
.email-body p,.how-item p,.fit-list li{color:var(--sec)}
.fit-list li::before{background:var(--ice)}
.fit-list li b{color:var(--ink)}
.stats-row,.how-grid{border-color:var(--line)}

/* ---- controls: magnet strips ---- */
.btn,.btn-ice,.btn--ice,.preset-btn,.link-btn,.btn--out,.btn--in,.btn--full{border-radius:0!important;font-family:var(--sans)!important;font-weight:600!important;letter-spacing:.02em}
.btn-ice,.btn--ice,.btn--full{display:inline-flex;align-items:center;min-height:44px;padding:0 18px 0 0!important;background:var(--ice)!important;border:1px solid var(--ice)!important;color:#fff!important;box-shadow:0 6px 16px -10px rgba(27,27,27,.6);transition:transform .15s cubic-bezier(.2,1.4,.4,1),background .2s}
.btn-ice::before,.btn--ice::before,.btn--full::before{content:"";width:10px;align-self:stretch;background:var(--ink);margin-right:12px}
.btn-ice:hover,.btn--ice:hover,.btn--full:hover{background:#A8461F!important;border-color:#A8461F!important;color:#fff!important;transform:translateY(-2px)}
.btn-ice:disabled,.btn-ice:disabled:hover{background:var(--ground-3)!important;border-color:var(--line2)!important;color:var(--sec)!important;transform:none}
.btn,.preset-btn,.btn--out,.btn--in,.link-btn{background:var(--bg2)!important;border:1px solid var(--ink)!important;color:var(--ink)!important;min-height:40px}
.btn:hover,.preset-btn:hover,.link-btn:hover{transform:translateY(-2px);background:var(--bg2)!important;color:var(--ink)!important}
.preset-btn.active{background:var(--ink)!important;color:var(--bg)!important;border-color:var(--ink)!important}
.btn--out{color:var(--ice)!important}.btn--out:hover{background:var(--ice)!important;color:#fff!important;border-color:var(--ice)!important}
.btn--in{color:var(--ok)!important}.btn--in:hover{background:var(--ok)!important;color:#fff!important;border-color:var(--ok)!important}
select,input[type="number"],input[type="text"],.select-field select{background:var(--bg2)!important;border:1px solid var(--ink)!important;border-radius:0!important;color:var(--ink)!important;font-family:var(--sans)!important}
select:focus,input:focus,.select-field select:focus{outline:2px solid var(--b)!important;outline-offset:2px;border-color:var(--ink)!important}
input[type="range"]{background:linear-gradient(90deg,var(--ink) var(--fill,0%),rgba(27,27,27,.2) var(--fill,0%))!important;border-radius:0!important;height:2px}
input[type="range"]::-webkit-slider-thumb{width:26px;height:16px;border-radius:0;border:1px solid var(--ink);background:linear-gradient(90deg,var(--ink) 0 8px,var(--ice) 8px)}
input[type="range"]::-moz-range-thumb{width:26px;height:16px;border-radius:0;border:1px solid var(--ink);background:linear-gradient(90deg,var(--ink) 0 8px,var(--ice) 8px)}
.form-row > label,.select-field label{color:var(--sec);font-weight:500}
.form-row > label output{color:var(--ink);font-family:var(--sans);font-weight:600}

/* ---- the shared shell replaces each page's topbar; hide any leftover ---- */
.topbar{display:none!important}
main.wrap,.main-wrap,.wrap{padding-top:calc(var(--rail) + 8vh)}
.back,.back-link{color:var(--sec)}
.back:hover,.back-link:hover{color:var(--ink)}
.rv{opacity:1;transform:none}
/* app2 section heads: tag as a kicker above the title, never beside it */
.sec-head{display:grid!important;gap:8px;align-items:start;border-bottom:1.5px solid var(--line2)!important}
.sec-head .tag{order:-1;margin:0!important}
.sec-head h2{margin:0}
.sec-head .tag{position:static!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;transform:none!important;opacity:1!important;white-space:normal}
.sec-head .tag::before{position:static!important;width:12px!important;height:12px!important;margin-right:10px;bottom:auto;top:auto}