/* Self-hosted fonts (Space Grotesk and Barlow Semi Condensed, SIL Open Font License, via Fontsource).
   Avenir Next Condensed is used where it is installed (Apple devices); Barlow Semi Condensed is the fallback. */
/* space-grotesk-latin-ext-700-normal */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/space-grotesk-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* space-grotesk-latin-700-normal */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/space-grotesk-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* barlow-semi-condensed-latin-ext-400-normal */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/barlow-semi-condensed-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* barlow-semi-condensed-latin-400-normal */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/barlow-semi-condensed-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* barlow-semi-condensed-latin-ext-500-normal */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/barlow-semi-condensed-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* barlow-semi-condensed-latin-500-normal */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/barlow-semi-condensed-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* barlow-semi-condensed-latin-ext-600-normal */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/barlow-semi-condensed-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* barlow-semi-condensed-latin-600-normal */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/barlow-semi-condensed-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg-top:#e7e8ea; --bg-bottom:#c9cbcf; --ink:#1d1f23; --ink-soft:#5b6068; --ink-faint:#8a8f97;
  --panel:#f6f7f8; --panel-line:rgba(29,31,35,.12); --field:#ffffff; --btn:#ffffff; --btn-ink:#1d1f23;
  --dock:rgba(255,255,255,.72); --focus:#1d1f23; --warn:#9a3412;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-top:#3a3d43; --bg-bottom:#16171a; --ink:#eceef1; --ink-soft:#a3a8b0; --ink-faint:#7a8089;
    --panel:#1c1e22; --panel-line:rgba(255,255,255,.12); --field:#26282d; --btn:#26282d; --btn-ink:#eceef1;
    --dock:rgba(24,26,30,.72); --focus:#eceef1; --warn:#fdba74;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg-top:#3a3d43; --bg-bottom:#16171a; --ink:#eceef1; --ink-soft:#a3a8b0; --ink-faint:#7a8089;
  --panel:#1c1e22; --panel-line:rgba(255,255,255,.12); --field:#26282d; --btn:#26282d; --btn-ink:#eceef1;
  --dock:rgba(24,26,30,.72); --focus:#eceef1; --warn:#fdba74;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0;height:100%;overflow:hidden;
  font-family:"Avenir Next Condensed","Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  color:var(--ink);background:var(--panel);
  font-size:16px;line-height:1.4;
}
.app{display:grid;grid-template-columns:minmax(330px,390px) 1fr;height:100%}
.panel{
  background:var(--panel);border-right:1px solid var(--panel-line);
  overflow-y:auto;padding:22px 24px 32px;
}
.stage{
  position:relative;overflow:hidden;
  background:var(--bg-bottom);
  background-image:radial-gradient(120% 80% at 50% 30%, var(--bg-top) 0%, var(--bg-bottom) 100%);
}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#stage:active{cursor:grabbing}

h1{margin:0;font-size:1.65rem;font-weight:600;line-height:1.1}
.panel{position:relative}
.rule{border:0;border-top:2pt solid #000;margin:0 0 16px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rule{border-top-color:#fff} }
:root[data-theme="dark"] .rule{border-top-color:#fff}
h1{font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:-.01em}
h2{font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:-.005em}
.themebtn{
  position:absolute;top:22px;right:24px;font:inherit;font-size:.85rem;font-weight:500;
  color:var(--btn-ink);background:var(--btn);border:1px solid var(--panel-line);border-radius:999px;
  padding:4px 12px;cursor:pointer;
}
.themebtn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:820px){ .themebtn{top:18px;right:18px} }
.headbtns{position:absolute;top:22px;right:24px;display:flex;gap:6px}
.headbtns .themebtn{position:static;padding:3px 10px;font-size:.8rem}
.headbtns{gap:4px}
.headbtns .iconbtn{padding:3px 7px}
/* export button: only in the summary view */
.headbtns .expbtn{display:none}
.summary-on .headbtns .expbtn{display:inline-flex}
.expbtn.busy{opacity:.45;cursor:progress}
.toast{position:absolute;left:50%;top:16px;transform:translateX(-50%);background:var(--dock);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--panel-line);border-radius:999px;padding:6px 14px;font-size:.85rem;z-index:6}
.toast[hidden]{display:none}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;color:var(--ink-soft)}
.iconbtn svg{width:13px;height:13px;display:block}
@media (max-width:820px){ .headbtns{top:18px;right:18px} }
/* summary view: read-only info for sharing as a screenshot */
#summary{display:none}
.summary-on #summary{display:block}
.summary-on .panel > section{display:none}
.summary-on .viewbar{display:none}
#summary section{margin-top:22px}
/* thin grey divider between sections, in both the editing and the summary view */
.panel > section + section, #summary section + section{border-top:1pt solid rgba(127,127,127,.35);padding-top:20px;margin-top:20px}
#summary .sumbig{margin:0;font-size:1.2rem;font-weight:600;line-height:1.25}
#summary .sumfine{margin-top:22px;font-size:.8rem;color:var(--ink-faint)}
.brand{display:block;width:120px;height:auto;margin:0 0 14px;filter:brightness(0)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand{filter:none} }
:root[data-theme="dark"] .brand{filter:none}
.figlabel{position:absolute;left:16px;top:14px;font-size:.9rem;color:var(--ink-soft);pointer-events:none}
.lede{margin:.3rem 0 0;color:var(--ink-soft)}
section{margin-top:26px}
h2{margin:0 0 10px;font-size:1.15rem;font-weight:600}
.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fields[hidden]{display:none}
#sizeFields + .hrow{margin-top:10px}
#sizeFields[hidden] + .hrow{margin-top:0}
.fields.two{grid-template-columns:repeat(2,1fr)}
.field label{display:block;font-size:.95rem;color:var(--ink-soft);margin-bottom:4px}
.input{
  display:flex;align-items:baseline;background:var(--field);
  border:1px solid var(--panel-line);border-radius:10px;padding:0 10px;
}
.input:focus-within{outline:2px solid var(--focus);outline-offset:1px}
.input input{
  font:inherit;font-size:1.2rem;font-weight:500;color:var(--ink);
  background:transparent;border:0;outline:0;width:100%;min-width:0;padding:8px 0;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;
}
.input input::-webkit-outer-spin-button,.input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.input span{color:var(--ink-faint);font-size:.95rem;padding-left:4px}
.rules{margin:10px 0 0;color:var(--ink-soft);font-size:.95rem}

.orients{display:flex;flex-direction:column;gap:6px}
.orient{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;
  width:100%;text-align:left;font:inherit;color:var(--btn-ink);
  background:var(--btn);border:2px solid transparent;border-radius:12px;padding:7px 10px;cursor:pointer;
}
.orient:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.orient[aria-checked="true"]{
  background:linear-gradient(var(--btn),var(--btn)) padding-box,
    conic-gradient(from 210deg,#ff3b6b,#ffb300,#f4ff4a,#3bff9d,#2fd3ff,#6a5bff,#ff3bd8,#ff3b6b) border-box;
}
.orient:disabled{cursor:default;opacity:.5}
.orient svg{display:block;margin:auto}
.orient .n{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;text-align:right;font-size:.85rem}
.orient .n small{display:block;font-weight:400;color:var(--ink-soft);font-size:.75rem}
.orient{grid-template-columns:26px minmax(0,1fr) auto;gap:8px;font-size:.85rem}
.orient .nm{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orient > span:nth-child(2){min-width:0}
.orient svg{width:24px;height:24px}
.orient .tag{display:block;font-size:.85rem;color:var(--ink-soft)}
.bestlink{margin-top:8px;font:inherit;font-size:.95rem;background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;cursor:pointer}
.bestlink[hidden]{display:none}

.total{display:flex;align-items:baseline;gap:10px;margin:0}
.total b{font-size:3.4rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.total span{font-size:1.2rem;color:var(--ink-soft)}
.breakdown{margin:6px 0 0;font-size:1.05rem}
.note{margin:6px 0 0;color:var(--ink-soft);font-size:.95rem}
.warn{color:var(--warn)}
dl.parts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
dl.parts dt{color:var(--ink-soft)}
dl.parts dd{margin:0;font-variant-numeric:tabular-nums;text-align:right}
.field.wide{margin-bottom:10px}
.psearch{margin-bottom:6px}
.psearch input{font-size:.95rem;padding:6px 0}
.presets{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:12px}
.preset{
  font:inherit;text-align:left;color:var(--btn-ink);background:var(--btn);
  border:2px solid transparent;border-radius:12px;padding:6px 10px;cursor:pointer;line-height:1.2;
}
.preset small{display:block;color:var(--ink-soft);font-size:.85rem;font-variant-numeric:tabular-nums}
.shelflist{display:flex;flex-direction:column;gap:8px;margin:8px 0 6px}
.shelfrow{background:var(--btn);border-radius:12px;padding:8px 10px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.shelfrow .top{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;font-weight:600}
.shelfrow select{font:inherit;font-size:.85rem;color:var(--ink);background:var(--field);border:1px solid var(--panel-line);border-radius:8px;padding:5px 6px;min-width:0;width:100%}
.shelfrow .rm{font:inherit;font-size:.8rem;background:none;border:0;padding:0;color:var(--ink-soft);text-decoration:underline;cursor:pointer}
.shelfrow .rm:disabled{visibility:hidden}
.shelfrow .lab{display:inline-flex;align-items:center;gap:4px}
.grip{display:inline-flex;align-items:center;border:0;background:none;padding:2px 3px;margin-left:-3px;color:var(--ink-soft);cursor:grab;touch-action:none;border-radius:6px}
.grip svg{width:15px;height:15px;display:block}
.grip:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.shelfrow{position:relative}
.shelfrow.dragging{z-index:3;box-shadow:0 10px 24px rgba(0,0,0,.18);cursor:grabbing}
.shelfrow.dragging .grip{cursor:grabbing}
.shelfrow.drop-above{box-shadow:0 -3px 0 0 var(--ink)}
.shelfrow.drop-below{box-shadow:0 3px 0 0 var(--ink)}
.shelfrow .stat{grid-column:1 / -1;font-size:.8rem;color:var(--ink-soft)}
.shelfrow .stat.warn{color:var(--warn)}
.preset:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.preset[aria-pressed="true"]{
  background:linear-gradient(var(--btn),var(--btn)) padding-box,
    conic-gradient(from 210deg,#ff3b6b,#ffb300,#f4ff4a,#3bff9d,#2fd3ff,#6a5bff,#ff3bd8,#ff3b6b) border-box;
}
.input select{font:inherit;font-size:1.1rem;font-weight:500;color:var(--ink);background:transparent;border:0;outline:0;width:100%;padding:9px 0;cursor:pointer}
.strength{margin:12px 0 0;padding:4px 0 4px 10px;border-left:3px solid #16a34a;font-size:.8rem;line-height:1.4;color:var(--ink-soft)}
.strength b{color:var(--ink)}
.strength[data-status="borderline"]{border-left-color:#d97706}
.strength[data-status="over"]{border-left-color:#dc2626}
.strength[hidden]{display:none}

.viewbar{
  position:absolute;left:50%;transform:translateX(-50%);bottom:16px;
  display:flex;gap:6px;padding:8px;border-radius:999px;
  background:var(--dock);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--panel-line);max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none;
}
.viewbar::-webkit-scrollbar{display:none}
.viewbar button{
  font:inherit;font-size:1rem;font-weight:500;color:var(--btn-ink);
  background:var(--btn);border:2px solid transparent;border-radius:999px;
  padding:5px 13px;cursor:pointer;white-space:nowrap;flex:0 0 auto;
}
.viewbar button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.viewbar button[aria-pressed="true"]{
  background:linear-gradient(var(--btn),var(--btn)) padding-box,
    conic-gradient(from 210deg,#ff3b6b,#ffb300,#f4ff4a,#3bff9d,#2fd3ff,#6a5bff,#ff3bd8,#ff3b6b) border-box;
}
.err{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:24px;font-size:1.1rem;color:var(--ink)}

@media (max-width:820px){
  .app{grid-template-columns:1fr;grid-template-rows:46% 1fr}
  .stage{order:-1}
  .panel{border-right:0;border-top:1px solid var(--panel-line);padding:18px 18px 28px}
  .total b{font-size:2.8rem}
  .viewbar{bottom:10px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }

/* price estimate, bottom right of the 3D view; view buttons move left to make room */
.price{
  position:absolute;right:16px;bottom:16px;max-width:400px;
  display:flex;flex-direction:column;gap:2px;
  background:var(--dock);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--panel-line);border-radius:16px;padding:12px 16px;
}
.price[hidden]{display:none}
/* the price card reads the same in the editing and the summary view */
.price .sum-only{display:inline}
.price .edit-only{display:none}
.price .perq{font-size:1.1rem;font-weight:600;color:var(--ink-soft);margin-left:6px;letter-spacing:0}
.price .disc{
  display:block;margin-top:12px;padding:0;
  font-size:.95rem;line-height:1.4;color:var(--ink);white-space:normal;
}
.price .disc strong{font-weight:700}
/* shelf strength is only for configuring, not for the summary */
.summary-on .wcard{display:none !important}
/* price card and shelf strength card stacked at the bottom right of the 3D view */
.rightstack{position:absolute;right:16px;bottom:16px;width:min(400px, calc(100% - 32px));display:flex;flex-direction:column;gap:16px;align-items:flex-end}
.rightstack .price{position:static;max-width:none}
.wcard{
  width:100%;background:none;border:0;padding:2px 4px;
  display:flex;align-items:center;justify-content:flex-end;gap:8px;color:#16a34a;cursor:help;
}
.wcard[hidden]{display:none}
.wcard[data-status="borderline"]{color:#d97706}
.wcard[data-status="over"]{color:#dc2626}
.wcard .lbl{font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:-.005em;color:inherit}
.wcard .sym svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.addshelf{
  width:100%;height:36px;border-radius:12px;border:0;background:rgba(127,127,127,.09);color:var(--btn-ink);
  font:inherit;font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.addshelf:hover{background:rgba(127,127,127,.15)}
.addshelf:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.shelfrow .rm{font-size:1.15rem !important;line-height:1;text-decoration:none !important;padding:0 4px !important;color:var(--ink-soft)}
.wcard p{margin:4px 0 0;font-size:.82rem;line-height:1.4;color:var(--ink-soft)}
.wcard p b{color:var(--ink)}
.panel .strength{display:none}
.price .lbl{font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:-.005em;color:var(--ink)}
.price b{font-size:3.5rem;font-weight:600;line-height:1.05;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.price .sub{font-size:.95rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.price .row{font-size:.95rem;font-variant-numeric:tabular-nums}
.price .fine{font-size:.78rem;color:var(--ink-faint);margin-top:4px;line-height:1.3}
.viewbar{left:16px;transform:none;max-width:calc(100% - 440px)}
/* view buttons with the reference figure label next to them, bottom left of the 3D view */
.bottombar{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 440px);pointer-events:none}
.bottombar > *{pointer-events:auto}
.bottombar .viewbar{position:static;left:auto;bottom:auto;transform:none;max-width:none;min-width:0;flex:0 1 auto}
.bottombar .figlabel{position:static;white-space:nowrap}
@media (max-width:820px){
  .rightstack{top:36px;bottom:auto;right:10px;width:min(280px, calc(100% - 20px))}
  .wcard{padding:6px 10px}
  .wcard .lbl{font-size:.95rem}
  .wcard p{font-size:.72rem;max-height:2.9em;overflow:hidden}
  .price{top:36px;bottom:auto;right:10px;padding:8px 12px;max-width:280px}
  .price b{font-size:2.2rem}
  .price .row,.price .fine{display:none}
  .viewbar{left:50%;transform:translateX(-50%);max-width:calc(100% - 24px)}
  .bottombar{left:10px;right:10px;bottom:10px;max-width:none;justify-content:center;gap:8px}
  .bottombar .figlabel{font-size:.75rem}
}