/* ==========================================================================
   MISPLACED — site styles, taken from the visual reference (wireframe.html).
   Tokens, type and components are copied from it; the CSS-only demo room is
   left out (real pages use the WebGL stage below). Change the reference first,
   then mirror the change here.
   ========================================================================== */
@font-face{font-family:'D-DIN PRO';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/DDINPRO-Regular.woff2) format('woff2')}
@font-face{font-family:'D-DIN PRO';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/DDINPRO-Medium.woff2) format('woff2')}
@font-face{font-family:'Heros Web';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/HerosWeb-Regular.woff2) format('woff2')}
@font-face{font-family:'Heros Web';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/HerosWeb-Bold.woff2) format('woff2')}
:root{--bg:#fff;--fg:#111;--mut:#6b6b66;--line:#e2e2de;--box:#f7f7f4;--acc:#c8444d;--red:200,68,77;--grn:116,164,122;--card:#fff;--scene:#ECEDEE;--sh:44svh;
 --display:'D-DIN PRO','DIN Alternate','Arial Narrow',sans-serif;--sans:'Heros Web',Helvetica,Arial,sans-serif;
 box-sizing:border-box;padding-top:env(safe-area-inset-top,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121211;--fg:#f0efea;--mut:#a3a19a;--line:#2e2d2a;--box:#1b1a18;--card:#121211;--scene:#262624}}
:root[data-theme="dark"]{--bg:#121211;--fg:#f0efea;--mut:#a3a19a;--line:#2e2d2a;--box:#1b1a18;--card:#121211;--scene:#262624}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* units (CLAUDE.md, "Units"): static text carries both systems, [data-u="in"] and [data-u="cm"]; html[data-units] picks one */
html[data-units="cm"] [data-u="in"],html:not([data-units="cm"]) [data-u="cm"]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.55 var(--sans)}
a{color:inherit}
h1,h2{font-family:var(--display);font-weight:500;margin:0 0 10px;line-height:1.06;letter-spacing:.02em;text-transform:uppercase}
h1{font-size:clamp(28px,7.4vw,52px)}h2{font-size:22px;letter-spacing:.04em}
/* markers: red = problem, green = fix */
.mk,.gr{padding:.04em .3em;margin:0 -.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mk{background:linear-gradient(97deg,transparent 0,rgba(var(--red),.42) 1.5%,rgba(var(--red),.32) 50%,rgba(var(--red),.42) 98.5%,transparent 100%)}
.gr{background:linear-gradient(97deg,transparent 0,rgba(var(--grn),.5) 1.5%,rgba(var(--grn),.38) 50%,rgba(var(--grn),.5) 98.5%,transparent 100%)}
.bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}
.logo{display:flex;align-items:center;gap:8px;white-space:nowrap;font:500 19px var(--display);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);padding:6px 12px;background:var(--bg);text-decoration:none}
/* header right: the units switch (.units, ft | cm, js/units.js) and the guides link */
.bar nav{display:flex;align-items:center;gap:8px}
.units button{padding:7px 10px}
.btn{border:1px solid var(--line);padding:10px 18px;font:400 14px var(--sans);background:var(--bg);color:var(--fg);cursor:pointer;text-decoration:none}
.hero{padding:18px 18px 16px;display:flex;flex-direction:column;justify-content:flex-end}
.tagline{align-self:flex-start;font:500 14px var(--display);letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;color:var(--mut)}
.answer{border:1px solid var(--fg);background:var(--bg);padding:14px 16px;margin-top:16px}
.answer .ttl{font:500 16px var(--display);letter-spacing:.14em;text-transform:uppercase}
.answer p{margin:6px 0 0;font-size:16px;color:var(--fg)}
/* stage */
.stage{position:sticky;top:env(safe-area-inset-top,0px);height:var(--sh);padding:8px 16px 10px;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);z-index:10;display:flex;flex-direction:column}
.hud{display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 12px var(--sans);color:var(--mut);padding:4px 0}
#cap{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg{display:inline-flex;flex:none;border:1px solid var(--fg)}
.seg button{border:0;background:var(--bg);color:var(--fg);font:500 11px var(--display);letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
/* zoom: + / − in the bottom-right corner of the view (pinch and ctrl/⌘ + wheel also zoom) */
.zoom{position:absolute;right:8px;bottom:8px;z-index:2;display:flex;flex-direction:column;border:1px solid var(--fg);background:var(--bg)}
.zoom button{width:32px;height:32px;border:0;padding:0;background:var(--bg);color:var(--fg);font:500 18px/1 var(--display);cursor:pointer}
.zoom button+button{border-top:1px solid var(--fg)}
.dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:6px;justify-content:center;z-index:2;pointer-events:none}.dots b{width:7px;height:7px;border-radius:50%;background:var(--line)}.dots b.on{background:var(--fg)}
.frame{flex:1;position:relative;margin:6px 5px;min-height:0;
 background:radial-gradient(circle 4px at 0 0,var(--fg) 98%,transparent),radial-gradient(circle 4px at 100% 0,var(--fg) 98%,transparent),radial-gradient(circle 4px at 0 100%,var(--fg) 98%,transparent),radial-gradient(circle 4px at 100% 100%,var(--fg) 98%,transparent)}
.view{position:absolute;inset:0;overflow:hidden;perspective:900px;display:flex;align-items:center;justify-content:center;background:var(--scene);border:1px solid var(--fg)}
/* 3D stage (WebGL): canvas + still-render poster inside .view; .view.ready fades the poster */
.view canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.view canvas:active{cursor:grabbing}
.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s}
.view.ready .poster{opacity:0;pointer-events:none}
/* labels pinned to points in the scene; .ghost = a minimum or guide, not a measurement.
   js/labels.js hides a label that overlaps one already shown (solid beats ghost). */
.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.dim{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:500 10px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:3px 5px;border:1px solid var(--fg);background:color-mix(in srgb,var(--card) 82%,transparent);color:var(--fg);transition:opacity .3s}
.dim.ghost{border-style:dashed;color:var(--mut)}
/* live readout, under the frame (never on the scene): a marker word, then the reason */
.readout{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;min-height:2.2em;padding:2px 5px 0}
.readout b{font:500 14px var(--display);letter-spacing:.12em;text-transform:uppercase}
.readout span{font:400 13px/1.35 var(--sans);color:var(--fg)}
/* .seg.fill stretches its buttons across a .hud row */
.seg.fill{display:flex;flex:1}.seg.fill button{flex:1;padding:6px 2px;white-space:nowrap}
/* steps */
.zone{padding-bottom:24px}
.col{padding:0 18px}
.step{min-height:50svh;padding:26px 0;border-top:1px solid var(--line);opacity:.55;transition:opacity .3s}
.step.on{opacity:1}.step p{max-width:56ch;margin:0 0 14px;color:var(--mut)}
.step p b{color:var(--fg);font-weight:400}
.eyebrow{display:block;font:500 12px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.ph{border:1px solid var(--line);background:var(--box);display:flex;align-items:center;justify-content:center;color:var(--mut);font:400 13px var(--sans);text-align:center;padding:16px}
/* h3: a question inside a section, e.g. one .answers card per size */
h3{font:500 17px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:14px}
.answers .card p{margin:6px 0 0}.answers .card .link{margin-top:10px;font-size:14px}
/* .panel#yours: the reader's answer, first in the steps column right under the 3D: the remaining
   fields and presets, the verdict, layout cards, then "More options" folded. No input appears twice. */
.panel{padding:16px 0 22px;border-bottom:1px solid var(--line)}.panel .calc{margin-top:8px;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}
.panel .calc label{font-size:13px;gap:4px}.panel .calc input,.panel .calc select{font-size:16px;padding:8px 10px}.panel .verdict{margin-top:12px}.panel .presets{margin-top:8px}
.range .num{display:inline-flex;align-items:center;gap:4px;font:500 12px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.range .num input{width:4.4em;font:500 13px var(--display);padding:4px 6px;border:1px solid var(--fg);background:var(--bg);color:var(--fg);border-radius:0}
.presets{margin-top:10px;flex-wrap:wrap}
.form-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--mut);margin:10px 0 0}
.calc label>span:first-child{display:block}
.calc label.check{flex-direction:row;align-self:end;padding:12px 0;color:var(--fg)}
/* .step.decide: the last scroll step, "Your verdict": result, layout cards (.results), optional details */
.step.decide{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.step.decide h2{margin-bottom:6px}
.step.decide fieldset,.step.decide details.more{margin-top:18px}.step.decide fieldset .calc{margin-top:0}
.step.decide .verdict{margin-top:6px}
.results{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
/* .tiles: answers by size as a grid; a tile shows the size and the verdict, its answer opens below
   (js/tiles.js). Every answer stays in the HTML for Google; only the chosen one shows. */
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:14px}
.tile{border:1px solid var(--line);background:var(--bg);color:var(--fg);padding:10px 10px 9px;text-align:left;cursor:pointer;display:grid;gap:5px;font:inherit}
.tile b{font:500 21px/1 var(--display);letter-spacing:.02em}
.tile small{font-size:12px;line-height:1.3;color:var(--mut)}
.tile small span{color:var(--fg)}
.tile[aria-pressed="true"]{border-color:var(--fg);outline:2px solid var(--fg);outline-offset:-3px}
.tiles>article{margin-top:12px;max-width:720px}
.tiles>article:not(.on){display:none}
/* slider in a .hud row: label, range, value */
.range{display:flex;align-items:center;gap:10px;flex:1;min-width:0;font:400 12px var(--sans);color:var(--mut)}
.range input{flex:1;min-width:0;accent-color:var(--fg);margin:0}
.range output{font:500 12px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--fg);white-space:nowrap}
/* the size row shown in the stage; links in tables */
tr[aria-current="true"] td{background:var(--box)}
td a{text-underline-offset:3px}
/* guide cards: a poster still, the section, the question, one line of what it does (guides.html) */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:22px}
a.card.guide{display:grid;gap:4px;align-content:start;font:400 17px/1.35 var(--sans)}
.guide img{display:block;width:calc(100% + 32px);height:auto;aspect-ratio:16/10;object-fit:cover;margin:-14px -16px 10px;background:var(--scene)}
.guide .eyebrow{margin:0}
/* rest */
.sec{max-width:1120px;margin:0 auto;padding:36px 18px}
.lead{color:var(--mut);margin:0;max-width:56ch}
.rule{border:2px solid var(--fg);padding:20px 22px;max-width:720px}
.rule .ttl{font:500 14px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.rule p{margin:0;font:500 clamp(20px,3.4vw,26px)/1.3 var(--display)}
.rule small{display:block;margin-top:12px;font:400 14px var(--sans);color:var(--mut)}
.rule ol{margin:14px 0 0;padding-left:20px;font:400 15px/1.5 var(--sans);color:var(--mut)}.rule li+li{margin-top:4px}
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px;max-width:720px}
.calc label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--mut)}
.calc input,.calc select{font:400 18px var(--sans);padding:10px 12px;border:1px solid var(--fg);background:var(--bg);color:var(--fg);width:100%;min-width:0;border-radius:0}
.calc select{font-size:16px;padding:11px 10px}
fieldset{border:0;margin:0;padding:0;min-width:0}legend{padding:0}
.verdict{margin-top:14px;max-width:720px;border:1px solid var(--line);background:var(--box);padding:14px 16px;font-size:16px}
.verdict .big{display:block;font:500 28px/1.1 var(--display);letter-spacing:.02em;margin-bottom:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}
.card{border:1px solid var(--fg);background:var(--bg);padding:14px 16px;font-size:15px}
.card p{margin:4px 0 0;color:var(--mut)}
.card .big{display:block;font:500 28px/1 var(--display);letter-spacing:.02em;margin-bottom:10px}
a.card{text-decoration:none;display:block}
/* selectable cards: aria-pressed marks the one shown in the stage */
button.card{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;display:grid;gap:4px;justify-items:start}
button.card[aria-pressed="true"]{outline:2px solid var(--fg);outline-offset:-3px}
.card small{font-size:13px;color:var(--mut)}
.check{display:flex;gap:10px;align-items:center;cursor:pointer}
.check input{width:18px;height:18px;accent-color:rgb(var(--grn));margin:0}
.check input:checked+span{text-decoration:line-through;color:var(--mut)}
/* status list: one row per check; dot green = passes, red = fails, red ring = a compromise */
.status{list-style:none;margin:14px 0 0;padding:0;max-width:720px}
.status li{display:grid;grid-template-columns:10px minmax(6.5em,9em) 1fr;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.status li:last-child{border-bottom:1px solid var(--line)}
.status i{width:10px;height:10px;border-radius:50%;background:var(--line);align-self:center}
.status li[data-s="good"] i{background:rgb(var(--grn))}
.status li[data-s="warn"] i{box-shadow:inset 0 0 0 2px rgb(var(--red));background:none}
.status li[data-s="bad"] i{background:rgb(var(--red))}
.status b{font:500 12px var(--display);letter-spacing:.12em;text-transform:uppercase}
.status span{color:var(--mut)}
/* tables */
.tablewrap{overflow-x:auto;margin-top:14px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
th{font:500 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);border-bottom-color:var(--fg)}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.step .tablewrap table{min-width:0}
.link{background:none;border:0;padding:0;font:inherit;color:var(--fg);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
details{border-top:1px solid var(--line);padding:14px 0}details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font:400 18px var(--sans)}
details p{color:var(--mut);margin:8px 0 0}
/* details.more: a size table folded away; visitors come for the 3D, calculator and FAQ, Google still reads it */
details.more{border:0;padding:0;margin-top:14px}
details.more>summary{display:inline-flex;align-items:center;gap:8px;list-style:none;border:1px solid var(--fg);padding:8px 14px;font:500 12px var(--display);letter-spacing:.14em;text-transform:uppercase}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"+";font-size:15px;line-height:1}
details.more[open]>summary::after{content:"−"}
details.more .tablewrap{margin-top:10px}
.sources{font-size:13px;color:var(--mut);margin-top:18px;max-width:72ch}
footer{padding:24px 18px;font:400 13px var(--sans);color:var(--mut);border-top:1px solid var(--line);display:flex;justify-content:space-between;background:var(--bg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
@media(min-width:900px){
 .zone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0 40px;max-width:1120px;margin:0 auto;padding:0 18px}
 .hero{grid-column:1;grid-row:1;padding:20px 0}
 .steps{grid-column:1;grid-row:2}.col{padding:0}
 .stage{grid-column:2;grid-row:1 / span 2;height:100svh;border:none;background:none;padding:20px 0}
 .step{min-height:80svh}.zone{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){.step,.poster,.dim{transition:none}}