:root {
  --bg: #f4f2ee;
  --surface: #ffffff;
  --ink: #18202a;
  --muted: #45505c;
  --line: #c9d0d7;
  --field: #7d8893;
  --accent: #0a6a65;
  --accent-ink: #ffffff;
  --accent-soft: #dcefec;
  --err: #a8201a;
  --face: #e8d9bd;
  --panel: #dccbb0;
  --tpl: rgba(10, 106, 101, 0.16);
  --r: 3px;
  --head: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121719;
    --surface: #1d232a;
    --ink: #e6ebf0;
    --muted: #b7c0c9;
    --line: #3b4550;
    --field: #7d8893;
    --accent: #62d0c6;
    --accent-ink: #04211f;
    --accent-soft: #173431;
    --err: #ff9d92;
    --face: #5a4a35;
    --panel: #4a3c2a;
    --tpl: rgba(98, 208, 198, 0.22);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--body); }
a { color: var(--accent); text-underline-offset: 2px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.sr, .seg legend.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--ink); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.top { background: var(--ink); color: var(--bg); }
.top-in { display: flex; align-items: center; min-height: 52px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1.2 var(--head); color: var(--bg); text-decoration: none; letter-spacing: 0.01em; }
.mark { width: 28px; height: 28px; flex: none; }
.m-door { fill: #e8d9bd; }
.m-cup { fill: none; stroke: #0a6a65; stroke-width: 1.8; }

.intro { padding: 22px 0 6px; max-width: 48rem; }
h1 { font: 700 clamp(30px, 5.2vw, 44px)/1.08 var(--head); margin: 0 0 10px; letter-spacing: -0.005em; }
.lede { margin: 0; color: var(--muted); font-size: 18px; }
h2 { font: 700 25px/1.2 var(--head); margin: 0 0 12px; }
h3 { font: 700 20px/1.3 var(--head); margin: 22px 0 6px; }

.tool { display: grid; gap: 22px; margin: 18px 0 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .tool { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: start; }
}
.inputs { min-width: 0; }
.block { margin: 0 0 22px; }

.field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; min-width: 0; }
.field > label { font-weight: 600; }
fieldset { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
input[type=text], select { font: inherit; font-size: 17px; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--field); border-radius: var(--r); background: var(--surface); color: var(--ink); width: 100%; min-width: 0; }
input[aria-invalid="true"] { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
.suffix { display: flex; align-items: stretch; min-width: 0; }
.suffix input { border-radius: var(--r) 0 0 var(--r); }
.suffix b { display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; min-width: 40px; border: 1.5px solid var(--field); border-left: 0; border-radius: 0 var(--r) var(--r) 0; font-weight: 600; background: var(--bg); color: var(--ink); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 14px; }
.narrow { max-width: 240px; }
.err { color: var(--err); margin: 2px 0 0; font-weight: 600; }
.hint, .small-note { color: var(--muted); margin: 0 0 10px; }

.seg { display: flex; flex-wrap: wrap; margin: 0; }
.seg legend { width: 100%; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 13px; border: 1.5px solid var(--field); margin-left: -1.5px; background: var(--surface); color: var(--ink); font-size: 16px; white-space: nowrap; cursor: pointer; }
.seg-opt:first-of-type span { border-radius: var(--r) 0 0 var(--r); margin-left: 0; }
.seg-opt:last-of-type span { border-radius: 0 var(--r) var(--r) 0; }
.seg-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); position: relative; z-index: 1; }
.seg-opt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 2; }

.btn { font: inherit; font-size: 17px; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.small { min-height: 44px; padding: 6px 12px; font-size: 16px; }
.link-btn { font: inherit; font-size: 16px; background: none; border: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 10px 6px; min-height: 44px; }


/* pieces */
.pc-list { list-style: none; margin: 0 0 12px; padding: 0; border-top: 2px solid var(--ink); }
.pc { padding: 10px 0 8px; border-bottom: 1px solid var(--line); }
.pc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pc-num { font: 700 24px/1 var(--head); min-width: 1.6em; color: var(--accent); font-variant-numeric: tabular-nums; }
.pc-del { margin-left: auto; }
.pc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 6.5em minmax(0, 1.3fr); gap: 0 10px; align-items: end; }
.pc-head .seg legend { width: auto; margin-right: 10px; align-self: center; font-weight: 600; }
.pc-head .seg { align-items: center; }
.pc-opts { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-end; }
.pc-opts > div { margin-bottom: 10px; }
.pc-opts .field { margin-bottom: 10px; min-width: 9.5em; flex: 1 1 9.5em; }
.pc-opts .field.name { flex: 2 1 12em; }
.add-row { display: flex; flex-wrap: wrap; gap: 10px; }

.place summary, .jobs summary, #earlier summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 700 22px/1.2 var(--head); }
.jobs summary, #earlier summary { font: 600 17px/1.3 var(--body); color: var(--accent); }
.place[open] summary { margin-bottom: 6px; }
.grp { border-top: 1px solid var(--line); padding-top: 10px; }
.grp > legend { font: 700 19px/1.3 var(--head); float: left; width: 100%; margin-bottom: 6px; }
.grp > legend + * { clear: both; }
.radio-col { display: flex; flex-direction: column; margin: 0 0 10px; }
.radio-col label { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.radio-col input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin: 0; }
.rc-h { font-weight: 600; margin-top: 4px; }
.settings { margin-top: -6px; }

/* result */
.result { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--r); padding: 18px; min-width: 0; }
.answer { margin: 0 0 4px; font: 400 22px/1.25 var(--head); }
.answer b { font-size: 30px; font-weight: 700; }
.sub { margin: 0 0 6px; color: var(--muted); }
.res-wait { font-size: 18px; margin: 4px 0; }
.problems ul { margin: 6px 0 0; padding-left: 1.2em; }
.problems li { margin: 0 0 6px; }
.problems a { color: var(--err); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 6px; }
.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 14px; margin: 14px 0 6px; }
.grp-card { margin: 0; min-width: 0; }
.pv { display: block; width: 100%; max-height: 190px; }
.pv-face { fill: var(--face); stroke: var(--ink); stroke-width: 0.5; }
.pv-panel { fill: var(--panel); stroke: var(--ink); stroke-width: 0.25; }
.pv-tpl { fill: var(--tpl); stroke: var(--accent); stroke-width: 0.5; stroke-dasharray: 1.5 1; }
.pv-hole { fill: var(--ink); }
.pv-pull { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.pv-hinge { fill: var(--muted); }
.grp-card figcaption { font-size: 16px; line-height: 1.35; margin-top: 6px; overflow-wrap: anywhere; }
.grp-card figcaption b { color: var(--accent); font: 700 19px/1 var(--head); margin-right: 2px; }
.grp-card figcaption > span:not(.nw) { display: block; color: var(--muted); }
.jobs { margin-top: 8px; }
.job-t { border-collapse: collapse; width: 100%; font-size: 16px; font-variant-numeric: tabular-nums; }
.job-t th, .job-t td { text-align: left; vertical-align: top; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: break-word; }
.job-t th { font-weight: 600; color: var(--muted); overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 560px) {
  .job-t thead { display: none; }
  .job-t tr { display: grid; grid-template-columns: 2em 1fr; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .job-t td { border: 0; padding: 2px 0; grid-column: 2; }
  .job-t td:first-child { grid-column: 1; grid-row: 1 / span 4; font-weight: 700; color: var(--accent); }
  .job-t td:nth-child(3)::before { content: "Make "; }
}

.saved-sec { margin: 4px 0 0; }
.save-note { padding: 8px 12px; background: var(--accent-soft); border-radius: var(--r); }
#earlier-list { list-style: none; padding: 0; margin: 0 0 10px; }
#earlier-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.reset-row { margin: 0; }
.reset-row .link-btn { padding-left: 0; }
.reset-ask { margin: 8px 0 0; padding: 10px 12px; background: var(--accent-soft); border-radius: var(--r); }
.reset-ask .btn { margin: 6px 6px 0 0; }
#ov-cap { color: var(--muted); margin: 8px 0 6px; }
.undo-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 16px; background: var(--ink); color: var(--bg); border-radius: var(--r); max-width: calc(100vw - 32px); }
.undo-bar .btn { background: var(--bg); color: var(--ink); border-color: var(--bg); }

.content { max-width: 48rem; margin: 30px 0 40px; }
.content section { margin: 0 0 30px; }
.content p { margin: 0 0 12px; }
.steps { padding-left: 1.4em; margin: 0 0 12px; }
.steps li { margin: 0 0 8px; }
.sources { color: var(--muted); }

.foot { border-top: 1px solid var(--line); padding: 22px 0 30px; background: var(--surface); }
.sb-footer { font-size: 16px; color: var(--muted); }
.sb-more { margin: 0 0 10px; line-height: 1.7; }
.sb-privacy, .sb-credit { margin: 0 0 6px; }
.sb-footer a { color: var(--ink); }

#print-root { display: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

@page { margin: 10mm; }
@media print {
  body { background: #fff; color: #000; font: 10.5pt/1.35 Arial, Helvetica, sans-serif; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block; color: #000; }
  #print-root svg.sheet { display: block; break-after: page; page-break-after: always; overflow: hidden; }
  #print-root svg.sheet:last-child { break-after: auto; page-break-after: auto; }
  .job-t { width: 188mm; border-collapse: collapse; font-size: 10.5pt; }
  .job-t th, .job-t td { border-bottom: 0.3mm solid #888; padding: 1.6mm 2mm 1.6mm 0; text-align: left; vertical-align: top; color: #000; }
  .job-t th { font-weight: 700; }
  .job-t tr { break-inside: avoid; }
  .print-msg { font: 13pt Arial, sans-serif; }
}
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.jump { border-color: transparent; color: var(--accent); text-decoration: underline; }
@media (min-width: 960px) { .jump { display: none !important; } }
.job-t th:first-child, .job-t td:first-child, .job-t th:nth-child(3), .job-t td:nth-child(3) { white-space: nowrap; }
.notes { margin: 0 0 8px; padding-left: 1.2em; }
.nw { white-space: nowrap; }
.grp-card figcaption .sheets { color: var(--ink); font-weight: 600; }
/* Fold-outs show a chevron that turns when open. */
.place summary, .jobs summary, #earlier summary { list-style: none; gap: 12px; }
.place summary::-webkit-details-marker, .jobs summary::-webkit-details-marker, #earlier summary::-webkit-details-marker { display: none; }
.place summary::after, .jobs summary::after, #earlier summary::after { content: ""; flex: none; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: translateY(-3px) rotate(45deg); }
.place[open] summary::after, .jobs[open] summary::after, #earlier[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.place summary { border: 1.5px solid var(--field); border-radius: var(--r); padding: 6px 14px; justify-content: space-between; background: var(--surface); }
/* Phones: width and height share a row, so a typed fraction such as 14-15/16 shows whole. */
@media (max-width: 560px) {
  .pc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .suffix input { padding-left: 7px; padding-right: 5px; }
  .suffix b { min-width: 32px; padding: 0 6px; }
}

/* hinge settings and the overlay calculator */
.hinge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.ov-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin: 4px 0 12px; }
.ov-box p { margin: 0 0 4px; }
.ov-main { font: 700 26px/1.2 var(--head); }
.ov-sum { font-variant-numeric: tabular-nums; font-size: 18px; }
.ov-how, .ov-cup { color: var(--muted); }
.ov-cup b { color: var(--ink); }
.fold { margin: 0 0 12px; }
.fold summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 12px; font: 600 17px/1.3 var(--body); color: var(--accent); list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: ""; flex: none; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: translateY(-3px) rotate(45deg); }
.fold[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.tbl-wrap { overflow-x: auto; max-width: 100%; }
.ov-t, .chart-t { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 16px; }
.ov-t caption { text-align: left; color: var(--muted); padding-bottom: 6px; caption-side: top; }
.ov-t th, .ov-t td, .chart-t th, .chart-t td { padding: 5px 9px; border-bottom: 1px solid var(--line); text-align: right; }
.chart-t th, .chart-t td { text-align: left; }
.ov-t thead th, .chart-t thead th { color: var(--muted); font-weight: 600; }
.ov-t td.on { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
.custom-box { border-top: 1px solid var(--line); padding-top: 10px; }
.pv-hinge { fill: var(--accent); }
.page-nav { margin: 0 0 4px; }
.sources-list { padding-left: 1.2em; color: var(--ink); }
.sources-list li { margin: 0 0 8px; }
.sources-list .pg { color: var(--muted); }
/* The door top box on each door row, and narrow phones. */
.place .field { max-width: 24rem; }
@media (max-width: 360px) {
  .pc-head { gap: 6px; }
  .pc-head .seg legend { margin-right: 6px; }
  .pc-head .seg-opt span { padding: 6px 9px; }
}
.pc-grid .tb-err { grid-column: 1 / -1; margin: -4px 0 10px; }