/* TallerFeet: the one stylesheet. Colors are custom properties; the dark theme follows the system setting.
   Fonts are self-hosted (SIL Open Font License; see fonts/OFL-*.txt). */
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-latin-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  --bg:#f6f1e8; --surface:#fffdf9; --sunk:#ece4d6;
  --ink:#2a2119; --muted:#5e5144; --line:#d9cdbb; --line-strong:#8c7c68;
  --accent:#98481f; --accent-hover:#7d3915; --on-accent:#fffdf9; --accent-soft:#f4e0d1; --link:#8a3f1a;
  --focus:#1c5fa6;
  --warn-bg:#fbefd6; --warn-line:#a86a12; --warn-ink:#3f2a06;
  --bad:#a3271b; --bad-bg:#fbe8e4;
  --ok:#2a6539; --ok-bg:#e6f1e6;
  --stage-a:#fbf7f0; --stage-b:#e6dccb;
  --shadow:0 1px 2px rgba(42,33,25,.06),0 8px 24px rgba(42,33,25,.07);
  --radius:14px; --radius-s:9px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1b1612; --surface:#251f19; --sunk:#16120e;
    --ink:#f2eadd; --muted:#c7b9a6; --line:#43392e; --line-strong:#8d7d69;
    --accent:#e39059; --accent-hover:#eea574; --on-accent:#1b1612; --accent-soft:#48301f; --link:#f0a578;
    --focus:#8fc2ff;
    --warn-bg:#3a2c12; --warn-line:#d9a441; --warn-ink:#f8e8c4;
    --bad:#ff9d8f; --bad-bg:#43201b;
    --ok:#93d3a2; --ok-bg:#1d3324;
    --stage-a:#3a3128; --stage-b:#221c16;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.55 var(--sans);overflow-wrap:break-word;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;display:block}
main:focus{outline:none}
[hidden]{display:none !important}
img,svg,canvas{max-width:100%}
img{height:auto}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.15;margin:0 0 .5em;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(1.9rem,5.2vw,3.1rem)}
h2{font-size:clamp(1.4rem,3.2vw,1.8rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.14em}
strong{font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:.75rem;top:-4rem;z-index:20;background:var(--ink);color:var(--bg);padding:.7rem 1rem;border-radius:var(--radius-s);font-weight:600}
.skip:focus{top:.75rem}
.wrap{width:100%;max-width:72rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.narrow{max-width:46rem}
.fine{font-size:.92rem;color:var(--muted)}
.mono{font-family:var(--mono);font-weight:500;font-size:.95em}

/* ---------- header */
.site-head{position:relative;z-index:10;background:var(--surface);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.logo{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;color:var(--ink);text-decoration:none;font:700 1.4rem/1 var(--serif);letter-spacing:-.01em}
.logo .mark{color:var(--accent);flex:none}
.nav-wide{display:none;align-items:center;gap:.25rem}
.nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem;border-radius:var(--radius-s);color:var(--ink);text-decoration:none;font-weight:600}
.nav-link:hover{background:var(--sunk)}
.nav-link[aria-current="page"]{color:var(--link);box-shadow:inset 0 -3px 0 var(--accent);border-radius:var(--radius-s) var(--radius-s) 0 0}
.nav-phone summary{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1.5px solid var(--line-strong);border-radius:var(--radius-s);font-weight:600;cursor:pointer;list-style:none;user-select:none}
.nav-phone summary::-webkit-details-marker{display:none}
.nav-phone[open] summary{background:var(--sunk)}
.nav-phone nav{position:absolute;left:0;right:0;top:100%;display:grid;padding:.5rem clamp(1rem,4vw,2rem) 1rem;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.nav-phone .nav-link{min-height:48px;border-radius:var(--radius-s)}
.nav-phone .nav-link[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent);border-radius:0 var(--radius-s) var(--radius-s) 0}
@media (min-width:52rem){      /* four links and the logo need about 49rem on one line */
  .nav-wide{display:flex}
  .nav-wide .nav-link{white-space:nowrap}
  .nav-phone{display:none}
}

/* ---------- footer */
.site-foot{margin-top:clamp(2.5rem,6vw,4.5rem);background:var(--sunk);border-top:1px solid var(--line);font-size:.97rem;color:var(--muted)}
.foot-grid{display:grid;gap:1.25rem 2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));padding-block:2rem 2.5rem}
.site-foot p{margin:0 0 .5em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li a{display:inline-flex;align-items:center;min-height:44px}
.site-foot a{color:var(--ink)}
.foot-brand{font:700 1.2rem/1.2 var(--serif);color:var(--ink)}
.foot-safety{color:var(--ink)}

/* ---------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.5rem 1.4rem;border:1.5px solid var(--accent);border-radius:var(--radius-s);background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none;text-align:center;line-height:1.2}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--line-strong);font-weight:600}
.btn-quiet:hover{background:var(--sunk);border-color:var(--ink)}
.btn-small{min-height:44px;padding:.3rem .9rem;font-size:.95rem}
.btn-wide{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.link-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 .35rem;border:0;background:none;color:var(--link);text-decoration:underline;text-underline-offset:.18em;font-weight:600}

/* ---------- panels and notes */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1rem,3vw,1.5rem);box-shadow:var(--shadow)}
.panel > h2{font-size:1.35rem}
.note{margin:0 0 1rem;padding:.8rem 1rem;border-radius:var(--radius-s);border:1px solid var(--line);border-left:5px solid var(--line-strong);background:var(--surface)}
.note-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.note-bad{background:var(--bad-bg);border-color:var(--bad)}
.note-ok{background:var(--ok-bg);border-color:var(--ok)}
.note:empty{display:none}
.msg-bad{color:var(--bad);font-weight:600}
.msg-ok{color:var(--ok);font-weight:600}
.page-head{padding-block:clamp(1.5rem,4vw,2.5rem) 1rem}
.page-head h1{font-size:clamp(1.8rem,4.5vw,2.5rem);margin-bottom:.3em}
.page-head p{max-width:42rem}

/* ---------- landing */
.hero{padding-block:clamp(2rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem)}
.hero-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.lede{font-size:clamp(1.1rem,2.2vw,1.25rem);max-width:36rem}
.hero-art{margin:0}
.hero-art .stage{aspect-ratio:4/3}
.hero-art img{display:block;width:100%;height:100%;object-fit:contain}
.hero-art figcaption{margin-top:.6rem;font-size:.92rem;color:var(--muted);text-align:center}
.band{padding-block:clamp(1.5rem,4vw,2.75rem)}
.steps{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:1rem;counter-reset:step}
.step{counter-increment:step;position:relative;padding:1.25rem 1.25rem 1.25rem 4.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.step::before{content:counter(step);position:absolute;left:1.1rem;top:1.15rem;width:2.3rem;height:2.3rem;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--ink);font:700 1.15rem/1 var(--serif)}
.step h3{margin-bottom:.3em}
.step p{margin:0}
.pair{display:grid;gap:1.25rem;align-items:start}
.box{padding:clamp(1.1rem,3vw,1.6rem);border-radius:var(--radius);border:1px solid var(--line);background:var(--surface)}
.box h2{font-size:1.35rem}
.box ul{margin:0;padding-left:1.2rem}
.box li{margin:.4em 0}
.box > :last-child{margin-bottom:0}
.box-warn{background:var(--warn-bg);border:2px solid var(--warn-line);color:var(--warn-ink)}
.box-warn a{color:inherit}
.tags{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.box .tags{padding:0}
.box .tags li{margin:0;padding:.35rem .8rem;border-radius:999px;background:var(--sunk);border:1px solid var(--line)}
.cta{text-align:center}
.cta .btn-row{justify-content:center}
@media (min-width:54rem){
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pair{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- the 3D stage */
.stage{position:relative;aspect-ratio:4/3;min-height:220px;max-height:440px;width:100%;border-radius:var(--radius-s);overflow:hidden;background:radial-gradient(ellipse at 50% 38%,var(--stage-a),var(--stage-b))}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.stage canvas:active{cursor:grabbing}
.stage-msg{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:1.5rem;text-align:center;color:var(--muted)}
.stage.is-stale canvas{opacity:.45}
.viewer-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem}
.viewer-tools .hint{margin-right:auto}

/* ---------- builder */
.builder{display:grid;gap:1rem;align-items:start}
.builder > *{min-width:0}
@media (min-width:58rem){
  .builder{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"form preview" "form summary";gap:1.25rem}
  .b-form{grid-area:form}
  .b-preview{grid-area:preview}
  .b-summary{grid-area:summary}
}
.b-form{display:grid;gap:1.4rem}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;margin-bottom:.45rem;font-weight:700}
label,.label{font-weight:700}
.field{display:grid;gap:.35rem;align-content:start}
.field-row{display:grid;gap:.9rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.hint{font-size:.92rem;color:var(--muted);font-weight:400;margin:0}
.tip{font-size:.95rem;color:var(--muted);margin:.6rem 0 0}
.field-error{margin:.4rem 0 0;color:var(--bad);font-weight:600}
.field-error:empty,.msg:empty{display:none}
.unit-input{position:relative;display:block}
.unit-input input{padding-right:2.9rem}
.unit-input .unit{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.95rem;pointer-events:none}
input[type="number"],input[type="text"]{width:100%;min-height:48px;padding:.4rem .8rem;border:1.5px solid var(--line-strong);border-radius:var(--radius-s);background:var(--surface);font-size:1.0625rem}
input[aria-invalid="true"]{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
input[type="checkbox"]{width:1.4rem;height:1.4rem;margin:0;flex:none;accent-color:var(--accent)}
.seg-opts{display:flex;flex-wrap:wrap;gap:.5rem}
.seg-opt{position:relative;display:inline-flex;font-weight:600}
.seg-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg-opt span{display:inline-flex;flex-direction:column;justify-content:center;min-height:46px;padding:.3rem 1rem;border:1.5px solid var(--line-strong);border-radius:var(--radius-s);background:var(--surface);line-height:1.2}
.seg-opt small{font-weight:400;font-size:.85rem;color:var(--muted)}
.seg-opt input:checked + span{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.seg-opt input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
/* choices that each carry a line of explanation (material, finish): side by side where there is room, stacked on a phone */
.opt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.5rem}
.opt-cards .seg-opt{display:flex}
.opt-cards .seg-opt span{flex:1;justify-content:flex-start;gap:.2rem;padding:.6rem .9rem}
.opt-cards .seg-opt small{font-size:.88rem;line-height:1.35}
/* the looks: more of them, so a little narrower; the line under them stands clear of the cards */
.look-cards{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr))}
.look-cards + .hint{margin-top:.55rem}
.fit-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.fit-open{margin:0}
.picks{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem}
.pick{min-width:44px;min-height:44px;padding:0 .7rem;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--surface);font-weight:600;font-size:.95rem}
.pick:hover{background:var(--sunk)}
.pick[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.more{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg)}
.more summary{display:flex;align-items:center;min-height:48px;padding:0 1rem;font-weight:700;cursor:pointer}
.more-body{display:grid;gap:1.2rem;padding:.25rem 1rem 1.1rem}
/* a grid, so four colors or sixty line up in even columns; a long color name wraps under its dot */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.5rem,1fr));gap:.5rem .4rem}
.swatch{position:relative;display:grid;justify-items:center;align-content:start;gap:.3rem;min-width:0;padding:.3rem .1rem;font-weight:400;font-size:.92rem;line-height:1.2;text-align:center}
.swatch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.swatch-dot{width:44px;height:44px;border-radius:50%;border:2px solid var(--line-strong)}
.swatch input:checked ~ .swatch-dot{outline:3px solid var(--accent);outline-offset:3px}
.swatch input:checked ~ .swatch-name{font-weight:700}
.swatch input:focus-visible ~ .swatch-dot{outline:3px solid var(--focus);outline-offset:3px}
/* a material with more than the Standard colors: each group under a small heading that runs the width of the grid */
.swatch-group{grid-column:1/-1;margin:.7rem 0 .1rem;padding-bottom:.25rem;border-bottom:1px solid var(--line);font-size:.92rem;font-weight:700;color:var(--muted)}
.swatch-group:first-child{margin-top:0}
.stepper{display:inline-flex;align-items:stretch}
.stepper button{width:48px;min-height:48px;border:1.5px solid var(--line-strong);background:var(--surface);font-size:1.3rem;font-weight:700;line-height:1}
.stepper button:first-child{border-radius:var(--radius-s) 0 0 var(--radius-s)}
.stepper button:last-child{border-radius:0 var(--radius-s) var(--radius-s) 0}
.stepper button:hover{background:var(--sunk)}
.stepper button[disabled]{opacity:.45;cursor:not-allowed}
.stepper input,.stepper output{width:4rem;min-height:48px;display:grid;place-items:center;text-align:center;border:1.5px solid var(--line-strong);border-left:0;border-right:0;border-radius:0;background:var(--surface);font-weight:700}
.stepper input{-moz-appearance:textfield;appearance:textfield;padding:0}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper :focus-visible{position:relative;z-index:1}

.design-name{font-weight:600}
.readout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1rem;margin:0 0 1rem;padding:.9rem 1rem;border-radius:var(--radius-s);background:var(--bg);border:1px solid var(--line)}
.readout dt{color:var(--muted)}
.readout dd{margin:0;font-family:var(--mono);font-weight:500;font-size:.98rem}
.readout .alt{color:var(--muted);font-weight:400;display:inline-block}
.is-stale .readout,.is-stale .load{opacity:.5}
@media (max-width:30rem){
  .readout{grid-template-columns:minmax(0,1fr);gap:.1rem}
  .readout dd{margin-bottom:.55rem}
  .readout dd:last-child{margin-bottom:0}
}
.load{margin:0 0 .3rem;font-weight:600}
.price{margin:1.1rem 0;padding-top:1rem;border-top:1px solid var(--line)}
.price-main{margin:0;font-size:1.3rem;font-weight:700;line-height:1.3}
.price p{margin:0 0 .25rem}
.price.is-pending .price-main,.price.is-pending .price-ship{opacity:.55}
/* leveling risers: the table of legs, what each leg gets, and a set's price */
.safety{font-weight:600}
.more-body > p{margin:0}
.uneven-table{display:grid;gap:1.2rem}
.uneven-table > p{margin:0}
.how{margin:0;padding-left:1.4rem}
.how li{margin:.3em 0}
.leg-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.7rem .9rem;margin-bottom:.5rem}
.leg-rows.is-coins .unit-input input{padding-right:5.4rem}
.leg-rows ~ .hint + .hint{margin-top:.3rem}
.leg-plan{margin:0}
.leg-plan caption{padding-bottom:.2rem;text-align:left;font-weight:700}
.leg-plan th[scope="row"]{font-size:inherit;color:inherit;white-space:nowrap}
#leg-plan-box.is-stale{opacity:.5}
.plates{margin:0 0 .3rem;font-weight:600}
.is-stale .plates{opacity:.5}
.price-parts{list-style:none;margin:0 0 .25rem;padding:0}
.price.is-pending .price-parts{opacity:.55}
.check{display:flex;gap:.7rem;align-items:flex-start;min-height:44px;font-weight:400;cursor:pointer}
.check input{margin-top:.15rem}
.check-inline{align-items:center}

/* ---------- your order */
.order-panel{margin-top:1.25rem;scroll-margin-top:1rem}
.order-lines{list-style:none;margin:0 0 1rem;padding:0}
.order-line{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main main" "qty price" "remove remove";gap:.6rem 1rem;align-items:center;padding:1rem 0;border-top:1px solid var(--line)}
.ol-main{grid-area:main;min-width:0}
.ol-main p{margin:0 0 .2rem}
.ol-name{font-weight:700}
.ol-meta{color:var(--muted);font-size:.95rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}
.ol-dot{display:inline-block;width:.9rem;height:.9rem;border-radius:50%;border:1.5px solid var(--line-strong);flex:none}
.ol-qty{grid-area:qty}
.ol-price{grid-area:price;margin:0;text-align:right}
.ol-price strong{display:block;font-size:1.1rem}
.ol-price span{color:var(--muted);font-size:.92rem}
.ol-remove{grid-area:remove;justify-self:start}
.order-line.is-bad{background:var(--bad-bg);margin-inline:-.6rem;padding-inline:.6rem;border-radius:var(--radius-s)}
@media (min-width:44rem){
  .order-line{grid-template-columns:minmax(0,1fr) auto 7.5rem auto;grid-template-areas:"main qty price remove"}
}
.undo-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;margin:0 0 1rem;padding:.4rem 1rem;border-radius:var(--radius-s);background:var(--sunk)}
.totals{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem 0;margin:0 0 .5rem;padding-top:1rem;border-top:1px solid var(--line);max-width:24rem;margin-left:auto}
.totals dt{color:var(--muted)}
.totals dd{margin:0;padding-left:1rem;text-align:right;font-family:var(--mono);font-weight:500}
.totals .grand{color:var(--ink);font-weight:700;font-size:1.1rem;padding-top:.4rem;border-top:1px solid var(--line)}
.totals.is-pending dd{opacity:.5}
.checkout{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--line);display:grid;gap:1rem;max-width:44rem}
.checkout p{margin:0}
.agree{padding:.9rem 1rem;border:1.5px solid var(--line-strong);border-radius:var(--radius-s);background:var(--bg)}

/* ---------- order status */
.status-line{font-size:1.2rem;font-weight:700}
.track{list-style:none;margin:1.25rem 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem}
.track li{position:relative;min-width:0;padding-top:2.4rem;text-align:center;font-size:clamp(.76rem,3.4vw,.92rem);color:var(--muted);line-height:1.25;overflow-wrap:normal}
.track li::before{content:"";position:absolute;top:.45rem;left:50%;width:1.5rem;height:1.5rem;margin-left:-.75rem;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);z-index:1}
.track li::after{content:"";position:absolute;top:1.1rem;left:-50%;width:100%;height:3px;background:var(--line)}
.track li:first-child::after{display:none}
.track li.is-done,.track li.is-now{color:var(--ink);font-weight:600}
.track li.is-done::before,.track li.is-now::before{background:var(--accent);border-color:var(--accent)}
.track li.is-now::before{box-shadow:0 0 0 4px var(--accent-soft)}
.track li.is-done::after,.track li.is-now::after{background:var(--accent)}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1.25rem;margin:0 0 1rem}
.facts dt{color:var(--muted)}
.facts dd{margin:0}
.table{width:100%;border-collapse:collapse;margin:0 0 1rem}
.table th,.table td{padding:.6rem .4rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table th{font-size:.92rem;color:var(--muted);font-weight:600}
.table .num{text-align:right;white-space:nowrap}
.table th.num{white-space:normal}
.table .sub{display:block;color:var(--muted);font-size:.92rem}
.stack{display:grid;gap:1.25rem}

/* ---------- work order: the page of whoever makes an order (/work/) */
.banner-bad{margin:0;padding:1rem 1.1rem;border-radius:var(--radius-s);background:var(--bad);color:var(--surface);font-size:1.15rem;font-weight:700}
.ship-to{margin:0 0 .8rem;padding:.9rem 1rem;border-radius:var(--radius-s);background:var(--bg);border:1px solid var(--line);font-family:var(--mono);font-weight:500;white-space:pre-line;-webkit-user-select:all;user-select:all}
.work-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem 1rem;align-items:center;margin-bottom:.9rem}
.work-qty{margin:0;font:700 clamp(2.4rem,9vw,3.2rem)/1 var(--serif);white-space:nowrap}
.work-head h2{margin:0 0 .3rem;font-size:1.2rem}
.work-color{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .55rem;margin:0;font-weight:700}
.work-color .ol-dot{width:1.4rem;height:1.4rem}
.work-line h3{margin:1.1rem 0 .4rem;font:700 1rem/1.3 var(--sans)}
.work-files{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.pad-preview{display:block;max-width:100%;max-height:15rem;margin:.7rem 0 0;padding:.5rem;border:1px solid var(--line-strong);border-radius:var(--radius-s);background:#fff}
.work-acts{display:grid;gap:1.1rem}
.work-acts > *{margin:0}
.ship-form{display:grid;gap:.8rem;padding:1rem;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg)}
.ship-form .field-row{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
select{width:100%;min-height:48px;padding:.4rem .8rem;border:1.5px solid var(--line-strong);border-radius:var(--radius-s);background:var(--surface);font-size:1.0625rem}
@media (max-width:30rem){
  .ship-form .field-row{grid-template-columns:minmax(0,1fr)}
}

/* ---------- long text pages */
.prose{width:100%;max-width:46rem;margin-inline:auto;padding:clamp(1.5rem,4vw,2.75rem) clamp(1rem,4vw,2rem) 1rem}
.prose h1{font-size:clamp(1.8rem,4.5vw,2.5rem);margin-bottom:.6em}
.prose h2{font-size:1.4rem;margin-top:2em}
.prose h3{font-size:1.12rem;margin-top:1.6em}
.prose p,.prose ul,.prose ol,.prose table{margin:0 0 1.1em}
.prose ul,.prose ol{padding-left:1.4rem}
.prose li{margin:.35em 0}
.prose li > ul,.prose li > ol{margin:.35em 0 0}
.prose table{width:100%;border-collapse:collapse;font-size:.97rem}
.prose th,.prose td{padding:.6rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.prose th{font-weight:700;border-bottom:2px solid var(--line-strong)}
.prose a{font-weight:600}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}
@media print{
  .site-head,.site-foot,.skip,.viewer-tools{display:none}
  body{background:#fff;color:#000}
}

/* the owner's admin page: colors in stock, and the orders */
.stock-group{margin:1.2rem 0 0;padding:0;border:0}
.stock-group legend{padding:0;font-weight:700;font-size:1.05rem}
.stock-group .btn-row{margin:.5rem 0 .6rem}
.stock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.35rem .75rem}
.stock{display:flex;align-items:center;gap:.6rem;min-height:48px;padding:.15rem .4rem;border-radius:var(--radius);cursor:pointer}
.stock:hover{background:var(--sunk)}
.stock input{width:1.35rem;height:1.35rem;flex:none;accent-color:var(--accent)}
.stock .swatch-dot{width:28px;height:28px;flex:none}
.stock-name{min-width:0}
.table-scroll{overflow-x:auto}

/* a code box in the order panel, and the address a free order asks for */
.code-row{display:flex;gap:.5rem;align-items:center;max-width:26rem}
.code-row input{flex:1;min-width:0}
.checkout .ship-form{margin:1rem 0;padding:0;border:0;display:grid;gap:.6rem;max-width:30rem}
.checkout .ship-form legend{padding:0;font-weight:700;font-size:1.05rem}

/* ====================================================================================================================
   ILLUSTRATIONS (one block, added together): the drawings on the text pages, the "In short" box on /help/, the drawing
   in the landing page's leveling section, and the leveling demo on /level/. Nothing above this line was changed for them.
   ==================================================================================================================== */

/* ---------- drawings. The files in assets/img are drawn for a light ground, so a figure is a light panel in both themes. */
.prose figure,.fig{--ink:#2a2119;--muted:#5e5144;--link:#8a3f1a;--focus:#1c5fa6;color-scheme:light;margin:0 0 1.25rem;padding:.85rem;border:1px solid #d9cdbb;border-radius:var(--radius-s);background:#fbf7f0;color:var(--ink)}
.prose figure img,.fig img{display:block;width:100%;max-width:22rem;margin-inline:auto}
.prose figcaption,.fig figcaption{margin-top:.6rem;font-size:.97rem;line-height:1.45}
.fig-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem;margin:0 0 1.25rem}
.prose .fig-row figure{margin:0}
@media (min-width:40rem){      /* a drawing with its caption beside it */
  .prose figure.fig-side{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:1.1rem;align-items:center}
  .prose .fig-side figcaption{margin:0}
}

/* ---------- /help/: the four steps at the top */
.short{margin:0 0 1.75rem;padding:1.1rem 1.25rem 1.25rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.prose .short h2{margin:0 0 .7em;font-size:1.3rem}
.prose .short ol{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.8rem 1.5rem;counter-reset:short}
.prose .short li{counter-increment:short;position:relative;margin:0;padding-left:2.7rem;min-height:2rem}
.short li::before{content:counter(short);position:absolute;left:0;top:.05rem;width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--ink);font:700 1.05rem/1 var(--serif)}
.prose .short .btn-row{margin:0}
.prose .btn{font-weight:700}
@media (min-width:40rem){
  .prose .short ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- landing: the leveling section, words beside a drawing */
.lv-pair{display:grid;gap:1.25rem;align-items:center}
.lv-pair .fig{margin:0}
@media (min-width:54rem){
  .lv-pair{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:2rem}
  .lv-pair > div > :last-child{margin-bottom:0}
}

/* ---------- the leveling demo (/level/, "How leveling works"): four small drawings, each with a caption.
   As written here they are four still frames: a column on a phone, two by two where there is room. That is what a visitor who asked
   for reduced motion sees. Where motion is allowed (the last part of this block) the four drawings share one stage, the width of the
   text, and play in turn, once, 12 seconds in all. site/js/level-demo.js only starts it and runs "Play again"; every movement is here.
   The page is a .prose page, so the rules that undo its list and paragraph spacing start with .ld to outrank it. */
.ld{--ld-wood:#c9a676;--ld-wood-line:#8a6a41;--ld-riser:#d9773f;--ld-riser-line:#8f4317;--ld-plate:#f6d2b0;--ld-tea:#7b4a2d;margin:0 0 1.5rem}
@media (prefers-color-scheme:dark){
  .ld{--ld-wood-line:#6b5131;--ld-riser:#e08a52;--ld-riser-line:#7f3a12;--ld-tea:#b0703f}
}
.ld .ld-steps{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.ld .ld-step{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.75rem;align-items:center;margin:0}
.ld-pic{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--radius-s);background:radial-gradient(ellipse at 50% 38%,var(--stage-a),var(--stage-b))}
.ld .ld-cap{margin:0}
.ld .ld-ctl{display:none;margin:0;min-height:44px}
@media (min-width:34rem){
  .ld .ld-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .ld .ld-step{grid-template-columns:minmax(0,1fr);gap:.5rem;align-content:start}
}
/* the drawings' own colors, from the palette, so they follow the theme */
.ld-pic text{font:700 12px var(--sans);word-spacing:1.5px;fill:var(--ink)}
.ld-ground{fill:var(--ink);fill-opacity:.07}
.ld-floor{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-linecap:round}
.ld-wood{fill:var(--ld-wood);stroke:var(--ld-wood-line);stroke-width:1.5;stroke-linejoin:round}
.ld-riser{fill:var(--ld-riser);stroke:var(--ld-riser-line);stroke-width:1.5;stroke-linejoin:round}
.ld-pocket{fill:var(--ld-riser-line)}
.ld-plate{fill:var(--ld-plate);stroke:var(--ld-riser-line);stroke-width:1.25;stroke-linejoin:round}
.ld-line{fill:none;stroke:var(--ink);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.ld-cup{fill:var(--surface);stroke:var(--ink);stroke-width:1.25;stroke-linejoin:round}
.ld-tea{fill:var(--ld-tea)}
.ld-level,.ld-bubble{fill:var(--ok)}
.ld-vial{fill:var(--ok-bg)}
.ld-tick{fill:none;stroke:var(--ok);stroke-width:.8}
/* how each piece stands in its still frame. Lengths are the drawing's own units (its viewBox is 240 wide). */
.ld-rock{transform-origin:73px 150px;transform:rotate(2.7deg)}      /* the table, tipped onto its short leg, about the foot of the other */
.ld-slop{transform-origin:89px 43px;transform:rotate(9deg)}         /* the drink in the cup */
.ld-leg{transform:translateY(-18px)}                                /* the leg, standing on the two plates */
.ld-s1 .ld-cam,.ld-s2 .ld-cam{transform-origin:193.2px 156.5px}     /* the point the close-up grows out of: the short leg's foot */
.ld-s3 .ld-cam,.ld-s4 .ld-cam{transform-origin:193.2px 153.8px}

@media (prefers-reduced-motion:no-preference){
  @supports (grid-template-rows:subgrid){
    /* one stage. Every step lies over the whole grid and borrows its rows and columns, so the drawings stack in the stage and the
       captions keep the row under it: on a phone they take turns in one place; where there is room they sit side by side. */
    .ld{display:grid;grid-template:auto auto auto/minmax(0,1fr);gap:.6rem 1rem;padding:.75rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
    .ld .ld-steps{grid-area:1/1/3/-1;grid-template:subgrid/subgrid;gap:inherit}
    .ld-steps::before{content:"";grid-area:1/1/2/-1;align-self:start;aspect-ratio:16/9;border-radius:var(--radius-s);background:radial-gradient(ellipse at 50% 38%,var(--stage-a),var(--stage-b))}
    .ld .ld-step{grid-area:1/1/-1/-1;grid-template:subgrid/subgrid;gap:inherit;align-items:start}
    .ld-pic{grid-area:1/1/2/-1;background:none}
    .ld .ld-cap{grid-area:2/1;--ld-dim:0;--ld-rest:0}
    .ld .ld-s4 .ld-cap{--ld-rest:1}
    .ld .ld-ctl{display:block;grid-area:3/1/4/-1}
    @media (min-width:40rem){
      .ld{grid-template:auto auto auto/repeat(4,minmax(0,1fr))}
      .ld .ld-cap{font-size:.95rem;line-height:1.4;--ld-dim:.5;--ld-rest:1}
      .ld .ld-s2 .ld-cap{grid-column:2}
      .ld .ld-s3 .ld-cap{grid-column:3}
      .ld .ld-s4 .ld-cap{grid-column:4}
    }

    /* the play, in seconds:
       0 to 2.8    the table rocks, three taps
       2.8 to 3.6  the view closes in on the short leg
       3.8 to 5    the leg taps the floor twice, then the gap is marked
       5.9 to 6.4  the riser appears under the leg, cut in half
       6.4 to 7    the leg lifts out;  6.9 the 2 mm plate goes in;  7.8 the 1 mm plate;  8.8 to 9.4 the leg comes down on them
       10.3 to 11.1 the view opens out;  10.9 to 11.8 the level's bubble settles */
    .ld-s1 .ld-pic{animation:ld-out .4s 3.05s forwards}
    .ld-s2 .ld-pic{animation:ld-in .4s 2.95s both,ld-out .5s 5.9s forwards}
    .ld-s3 .ld-pic{animation:ld-in .5s 5.9s both,ld-out .4s 10.45s forwards}
    .ld-s4 .ld-pic{animation:ld-in .45s 10.35s both}
    .ld-s1 .ld-cam{--ld-z:4.4;animation:ld-zoom-to .8s 2.8s ease-in-out both}
    .ld-s2 .ld-cam{--ld-z:.2273;animation:ld-zoom-from .8s 2.8s ease-in-out both}
    .ld-s3 .ld-cam{--ld-z:.2273;animation:ld-zoom-to .8s 10.3s ease-in-out both}
    .ld-s4 .ld-cam{--ld-z:4.4;animation:ld-zoom-from .8s 10.3s ease-in-out both}
    .ld-rock{animation:ld-rock .8s 3.5 both}
    .ld-slop{animation:ld-slop .8s ease-in-out 3.5 both}
    .ld-drop{animation:ld-drop .8s linear 3.5 both}
    .ld-tap{animation:ld-tap .6s 3.8s 2 both}
    .ld-gap{animation:ld-in .3s 5s both}
    .ld-leg{animation:ld-leg 3s 6.4s both}
    .ld-p2{--ld-y:-56px;animation:ld-plate .8s 6.9s both}
    .ld-p1{--ld-y:-46px;animation:ld-plate .8s 7.8s both}
    .ld-l2{animation:ld-in .25s 7.7s both}
    .ld-l1{animation:ld-in .25s 8.6s both}
    .ld-sum{animation:ld-in .3s 9.4s both}
    .ld-bubble{animation:ld-bubble .9s 10.9s ease-out both}
    .ld-s1 .ld-cap{animation:ld-cap1 12s linear both}
    .ld-s2 .ld-cap{animation:ld-cap2 12s linear both}
    .ld-s3 .ld-cap{animation:ld-cap3 12s linear both}
    .ld-s4 .ld-cap{animation:ld-cap4 12s linear both}      /* the captions: the step being shown stands out (on a phone it is the only one shown) */
    /* waiting to be scrolled into view: the first frame, nothing moving */
    .ld.is-off *{animation:none !important}
    .ld.is-off .ld-step:not(.ld-s1) .ld-pic{opacity:0}
    .ld.is-off .ld-step:not(.ld-s1) .ld-cap{opacity:var(--ld-dim)}
  }
}
@keyframes ld-in{from{opacity:0}}
@keyframes ld-out{to{opacity:0}}
@keyframes ld-zoom-to{to{transform:scale(var(--ld-z))}}
@keyframes ld-zoom-from{from{transform:scale(var(--ld-z))}}
@keyframes ld-rock{0%{animation-timing-function:ease-out}50%{transform:none;animation-timing-function:ease-in}}
@keyframes ld-slop{50%{transform:rotate(-9deg)}}
@keyframes ld-drop{0%,100%{opacity:1;transform:none}30%{opacity:0;transform:translate(3px,-5px)}80%{opacity:0;transform:translate(-3px,5px)}}
@keyframes ld-tap{0%{transform:none;animation-timing-function:ease-in}35%{transform:translateY(22px);animation-timing-function:ease-out}70%,100%{transform:none}}
@keyframes ld-leg{0%{transform:none;animation-timing-function:ease-in-out}20%{transform:translateY(-74px)}80%{transform:translateY(-74px);animation-timing-function:ease-in-out}100%{transform:translateY(-18px)}}
@keyframes ld-plate{0%{transform:translate(170px,var(--ld-y));animation-timing-function:ease-out}60%{transform:translate(0,var(--ld-y));animation-timing-function:ease-in}100%{transform:none}}
@keyframes ld-bubble{0%{transform:translateX(-6px)}55%{transform:translateX(1.5px)}100%{transform:none}}
@keyframes ld-cap1{0%,24%{opacity:1}25.5%,97%{opacity:var(--ld-dim)}100%{opacity:var(--ld-rest)}}
@keyframes ld-cap2{0%,25.5%{opacity:var(--ld-dim)}27%,49%{opacity:1}50.5%,97%{opacity:var(--ld-dim)}100%{opacity:var(--ld-rest)}}
@keyframes ld-cap3{0%,50.5%{opacity:var(--ld-dim)}52%,86%{opacity:1}87.5%,97%{opacity:var(--ld-dim)}100%{opacity:var(--ld-rest)}}
@keyframes ld-cap4{0%,87.5%{opacity:var(--ld-dim)}89%,100%{opacity:1}}
/* end of the illustrations block */

/* ==== UX FIXES: ORDER AND OWNER PAGES ==== */
.order-links{margin:0;padding-left:1.2rem}
.order-links li{margin:.3em 0}
.work-strength{margin:.2rem 0 0;font-weight:600}
.more-panel > summary{font-weight:700;font-size:1.15rem;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.5rem}
.more-panel[open] > summary{margin-bottom:.75rem}

/* ==== UX FIXES: PAGES AND ORDER PANEL ==== */
/* One block, added for the UX review of 2026-11-10: the order panel, the checkout form, the landing page, the text pages and the
   leveling demo's buttons. Nothing above this line was changed; where a rule above had to give way, it is overridden here. */

/* ---------- a link in running text that a thumb has to hit: a taller target, drawn no differently */
.page-head p a,.b-form .hint a,.ol-plan a,.checkout .fine a{position:relative}
.page-head p a::after,.b-form .hint a::after,.ol-plan a::after,.checkout .fine a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.btn-row > a:not(.btn){display:inline-flex;align-items:center;min-height:44px}

/* ---------- landing: an example with its price, and buttons that turn the riser */
.hero-price{max-width:36rem;font-weight:500}
.hero-tools{justify-content:center;margin:.6rem 0 0}

/* ---------- your order: each line says its sizes, its leg plan, and what is wrong with it */
.ol-main .ol-sizes{margin:.15rem 0 .3rem}
.ol-meta{flex-wrap:nowrap;align-items:flex-start}
.ol-meta .ol-dot{margin-top:.3rem}
.ol-main .ol-plan{margin:.55rem 0 .3rem;padding:.5rem .75rem;border-left:4px solid var(--accent);border-radius:0 var(--radius-s) var(--radius-s) 0;background:var(--bg);font-size:.97rem}
.order-line.is-bad .ol-plan{background:var(--surface)}
.ol-plan a{font-weight:600;white-space:nowrap}
.ol-main .ol-note{margin:.4rem 0 0;font-size:.92rem;color:var(--muted)}
.ol-note:empty{display:none}
.ol-main .msg-bad{margin:.4rem 0 0}
.ol-main .ol-fix{margin:.55rem 0 0}
.ol-fix .btn{background:var(--surface)}
@media (min-width:44rem){
  .order-line{align-items:start}
  .order-line .ol-price{padding-top:.3rem}
}

/* ---------- checkout: the tick box with its own message, and the address a free order asks for */
.agree-box{display:grid;gap:.45rem}
input[type="email"]{width:100%;min-height:48px;padding:.4rem .8rem;border:1.5px solid var(--line-strong);border-radius:var(--radius-s);background:var(--surface);font-size:1.0625rem}
select[aria-invalid="true"]{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
/* the address is one panel, as wide as the tick box above it, with its heading inside */
.checkout .ship-form{margin:0;max-width:none;padding:1rem 1rem 1.15rem;border:1.5px solid var(--line-strong);border-radius:var(--radius-s);background:var(--bg);gap:.8rem}
.checkout .ship-form > legend{float:left;width:100%;margin:0;padding:0;font-size:1.05rem}
.checkout .ship-form > legend + *{clear:both}
.checkout .ship-form > .field,.checkout .ship-form > .field-row{max-width:30rem}
.checkout .ship-form .field-row{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:.8rem}
.checkout .ship-form .field-error{margin:0}
@media (max-width:30rem){
  .checkout .ship-form .field-row{grid-template-columns:minmax(0,1fr)}
}

/* ---------- the leveling demo's buttons: back a step, pause or play, on a step */
@media (prefers-reduced-motion:no-preference){
  @supports (grid-template-rows:subgrid){
    .ld .ld-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
  }
}
/* end of the UX fixes block */

/* ==== UX FIXES: BUILDER ==== */
/* The builder form, its preview and "Your riser" (the UX review of 2026-11-10). Nothing above this line was changed for them:
   where a rule above had to give way, it is overridden here.

   ---------- the preview and the price stay in view
   The form is first in the page, so the keyboard reaches it first. On a phone .b-side has no box of its own: the preview is shown
   above the form, the price bar under the preview, and "Your riser" below the form. The bar then stays at the top of the screen
   while the form scrolls. At the top it can't cover the box being typed in (the browser keeps that box clear of it, by the
   scroll padding), and the on-screen keyboard, which comes up from the bottom, can't cover it. On a screen too short to spare the
   room (a phone on its side, or a browser that shrinks the page for the keyboard) the bar stays where it lies and scrolls away. */
.b-side{display:contents}
.b-side > *{min-width:0}
.b-preview{order:-2}
.b-bar{order:-1}
.b-summary{order:1;display:flex;flex-direction:column}
.b-summary > *{flex:none}
.b-facts{order:1}
.b-buy{order:2}
.b-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.7rem;min-height:4.25rem;margin-inline:calc(-1 * clamp(1rem,4vw,2rem));padding:.3rem clamp(1rem,4vw,2rem);background:var(--surface);border-block:1px solid var(--line);box-shadow:0 8px 14px -10px rgba(42,33,25,.45);color:var(--ink);text-decoration:none;line-height:1.25}
.b-bar-view{flex:none;width:3.5rem;height:3.5rem;border-radius:var(--radius-s);background:radial-gradient(ellipse at 50% 38%,var(--stage-a),var(--stage-b))}
.b-bar-text{flex:1;min-width:0;display:grid}
.b-bar-text strong{font-size:1.05rem}
.b-bar-text span{font-size:.9rem;color:var(--muted)}
.b-bar-go{flex:none;font-size:.9rem;font-weight:600;color:var(--link);text-decoration:underline;text-underline-offset:.18em}
.b-bar.is-pending strong,.b-bar.is-pending .b-bar-text span{opacity:.55}
.b-bar{transition:opacity .15s,visibility .15s}
.b-bar.is-away{opacity:0;visibility:hidden}
.b-bar.is-stale .b-bar-view{opacity:.45}
.b-bar.is-stale strong{font-size:.95rem;color:var(--bad)}
@media (max-width:57.99rem){
  html:has(.b-bar){scroll-padding-top:5.25rem}
}
@media (max-height:26rem){
  .b-bar{position:static}
  html:has(.b-bar){scroll-padding-top:0}
}
@media (min-width:58rem){
  /* a wide screen: the form on the left; on the right the preview, the price and "Your riser", which stay put while the form
     scrolls. The column is never taller than the screen: what does not fit scrolls inside it. (The 1rem all round is room for
     the panels' shadows, which the scrolling box would otherwise cut off.) */
  .builder{grid-template-areas:"form side";grid-template-rows:auto}
  .b-side{grid-area:side;display:grid;gap:1.25rem;align-content:start;position:sticky;top:0;margin:-1rem -1rem 0;padding:1rem 1rem 2.5rem;max-height:100vh;max-height:100dvh;overflow-y:auto;scrollbar-width:thin;
    /* what runs on below the screen fades out instead of being cut through a line: there is more, and it scrolls */
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 2.25rem),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 2.25rem),transparent)}
  .b-preview,.b-summary{grid-area:auto;order:0}
  .b-bar{display:none}
  /* the preview takes the height the screen can spare, so that the price and the button under it are on the screen too:
     on a laptop it is shorter, on a tall screen as large as before */
  .b-side{--rest:31rem;--stage-h:clamp(11rem,calc(100vh - var(--rest)),26rem);gap:1rem}
  @supports (height:100dvh){
    .b-side{--stage-h:clamp(11rem,calc(100dvh - var(--rest)),26rem)}
  }
  @media (max-width:70rem){      /* a narrower column: its lines wrap, so the rest of it is taller */
    .b-side{--rest:36rem}
  }
  .b-side > .panel{padding:1rem 1.25rem}
  .b-side .stage{aspect-ratio:auto;height:var(--stage-h);min-height:0;max-height:none}
  .b-preview{position:relative}
  .b-side .viewer-tools{gap:.4rem}
  /* "Drag to turn it." is a caption in the corner of the picture, not a line of its own */
  .b-side .viewer-tools .hint{position:absolute;left:1.75rem;top:calc(1rem + var(--stage-h) - 2.1rem);margin:0;padding:.1rem .6rem;border-radius:999px;background:var(--surface);opacity:.88;font-size:.85rem;pointer-events:none}
  /* the price and the button come straight after the riser's name, so they are in view however short the screen */
  .b-buy{order:0}
  .b-buy .price{margin:.2rem 0 .9rem;padding-top:.8rem}
  .b-facts{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line)}
}
@media print{
  .b-bar{display:none}
}

/* ---------- the size boxes: text boxes that take 1 3/8, each with its own error under it */
.len{display:flex;flex-wrap:wrap;gap:.4rem}
.len .unit-input{flex:1 1 7rem;min-width:0}
.frac{display:none;flex:0 1 7.25rem;width:auto;min-width:0;padding-inline:.6rem}
@media (pointer:coarse){      /* a phone's number keys have no slash: the sixteenths are chosen from a list beside the box */
  .frac:not([hidden]){display:block}
}
.b-form .field .field-error,.b-form fieldset > .field-error{margin:0}
#look-field > .field-error{margin-top:.55rem}
.builder .hint:empty,.price-note:empty,.leg-price:empty,.b-form .seg-opt small:empty{display:none}
.hint-strong{color:var(--ink);font-weight:600}
#size-honest{margin:.7rem 0 0}
/* a link inside a line of the builder's text: the line is as it was, and the link takes a thumb (44 px tall to the touch) */
a.tap{padding-block:.85rem}
#weight-msg a{color:inherit}
/* "More options" says what is in it and what it is set to, and that it opens */
.more-now{font-weight:400}
#cup-more > summary{padding-block:.6rem;line-height:1.3}
#cup-more > summary::after{content:"Change";margin-left:auto;padding-left:.75rem;font-size:.92rem;font-weight:600;color:var(--link);text-decoration:underline;text-underline-offset:.18em}
#cup-more[open] > summary::after{content:"Close"}
.more-act{margin:0}

/* ---------- choices: what each adds to the price, a picture for each look, and one that can't be chosen */
.b-form .seg-opt .adds{color:var(--ink);font-weight:600}
.b-form .seg-opt input:disabled{cursor:not-allowed}
.b-form .seg-opt input:disabled + span{opacity:.6;border-style:dashed}
.look-cards{grid-template-columns:repeat(auto-fill,minmax(8.25rem,1fr))}
@media (max-width:30rem){      /* the three fits stay on one row of a phone, each with what it adds */
  #ease-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  #ease-opts .seg-opt span{width:100%;padding:.35rem .5rem}
}
.look-cards + .field-error + .hint,.look-cards ~ .hint{margin-top:.55rem}
.look-pic{display:block;align-self:center;width:4.5rem;height:4.5rem;margin:-.1rem 0 .1rem}
.look-opt b{font-weight:600}
/* a Strength card says what it carries, what it adds and whether that is enough: a sentence or two, so each has the form's width */
#build-opts{grid-template-columns:minmax(0,1fr)}
#build-opts ~ .hint:not(:empty){margin-top:.55rem}
.pick[disabled]{opacity:.4;cursor:not-allowed}
.pick[disabled]:hover{background:var(--surface)}

/* ---------- the price, and what "Add to order" is waiting for */
.price-note{margin:.2rem 0 .35rem;padding:.3rem .6rem;border-radius:var(--radius-s);border-left:4px solid var(--warn-line);background:var(--warn-bg);color:var(--warn-ink);font-size:.95rem}
.add-why{margin:0 0 .55rem;font-weight:600}
.design-name:empty{display:none}
.leg-price{margin:.6rem 0 0;font-weight:600}
.set-list{margin:.2rem 0 1rem;padding-left:1.2rem;font-size:.97rem}
.set-list li{margin:.25em 0}
#set-lead{margin-bottom:.35rem}

/* ---------- the preview's backdrop follows the riser's color: a white riser needs a deeper ground than cream, and in the dark
   theme a black one needs a lighter ground than the stage's own (lib/viewer.js sets the two classes) */
.stage.is-pale{background:radial-gradient(ellipse at 50% 38%,#e6dccb,#b3a38b)}
@media (prefers-color-scheme:dark){
  .stage.is-pale{background:radial-gradient(ellipse at 50% 38%,var(--stage-a),var(--stage-b))}
  .stage.is-inky{background:radial-gradient(ellipse at 50% 38%,#a39584,#62564a)}
}
/* ==== end of UX FIXES: BUILDER ==== */