/* Conduit Bending Practice: a shop drawing on a job-site bench. Concrete grey ground, white drawing sheets with a
   heavy left rule, DIN-style condensed headings, dimension lines in drafting blue, and safety orange for the marks
   you put on the stick (and for actions). Black on white on paper, with every line and label readable without
   colour. */
:root {
  --bg: #e8ebe9;
  --paper: #fcfcfa;
  --ink: #18201e;
  --muted: #4b5652;
  --line: #cdd4d0;
  --edge: #7d8984;
  --accent: #ad3c09;
  --accent-ink: #ffffff;
  --accent-soft: #f6e3d7;
  --dim: #1d5b8c;
  --info: #1d5b8c;
  --ok: #156a3a;
  --ok-soft: #dcefe3;
  --close: #7a5200;
  --close-soft: #f6ecd3;
  --bad: #a3241d;
  --bad-soft: #f8e0dd;
  --focus: #1b5fd0;
  --cond: #39464c;
  --steel: #d9e0e3;
  --obs: #e3e6e4;
  --pipe: #eef0ef;
  --hatch: #8f9a95;
  --head: Bahnschrift, "DIN Alternate", "DIN Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --r: 4px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121615;
    --paper: #1a201e;
    --ink: #e3eae6;
    --muted: #a6b2ad;
    --line: #2d3633;
    --edge: #5f6b66;
    --accent: #f2914f;
    --accent-ink: #231000;
    --accent-soft: #3a2618;
    --dim: #8cc0ea;
    --info: #8cc0ea;
    --ok: #8adca6;
    --ok-soft: #14301f;
    --close: #f0c56b;
    --close-soft: #352a12;
    --bad: #ff9c8f;
    --bad-soft: #3a1c18;
    --focus: #8ab8ff;
    --cond: #c9d5da;
    --steel: #3a4549;
    --obs: #252d2a;
    --pipe: #222a27;
    --hatch: #6d7974;
  }
}
* { 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(--sans); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
a { color: var(--info); text-underline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--head); font-stretch: condensed; line-height: 1.15; }
.hero { padding: 22px 0 10px; }
.hero h1 { font-size: clamp(30px, 6vw, 46px); margin: 0 0 6px; letter-spacing: -0.01em; }
.lede { margin: 0; max-width: 62ch; color: var(--muted); }

/* ---------- controls ---------- */
.tool { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
.setup { background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--ink); border-radius: var(--r); padding: 12px 14px; }
.setgrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px 14px; align-items: end; }
.qcount select { flex: 1; }
#new { width: 100%; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font: 600 14px var(--sans); color: var(--muted); padding: 0; margin-bottom: 4px; }
.seg { display: grid; border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden; }
.seg2 { grid-template-columns: 1fr 1fr; }
.seg3 { grid-template-columns: 1fr 1fr 1fr; }
.sg { position: relative; display: block; min-width: 0; }
.sg + .sg { border-left: 1px solid var(--edge); }
.sg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 4px 6px; font-size: 15px; line-height: 1.15; }
.sg input:checked + span { background: var(--ink); color: var(--paper); font-weight: 600; }
.sg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.sg input:disabled + span { opacity: 0.45; }
.tdet { margin-top: 6px; }
.tdet summary, .table summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.tsum { font-weight: 400; color: var(--muted); font-size: 15px; }
.toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; padding-top: 4px; }
.tg { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; min-height: 44px; }
.tg input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.tg b { display: block; font-weight: 600; font-size: 15.5px; }
.tg small { display: block; color: var(--muted); font-size: 14px; line-height: 1.3; }
.tg.off { opacity: 0.55; }
.setrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
select, input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); min-height: 44px; padding: 6px 10px; }
.btn { font: 600 16px var(--sans); min-height: 44px; padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--edge); background: var(--paper); color: var(--ink); cursor: pointer; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.small { min-height: 40px; padding: 6px 12px; font-size: 15px; }
.link { font: inherit; background: none; border: 0; color: var(--info); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 44px; padding: 0 4px; }

/* ---------- the bender table ---------- */
.table { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 14px 10px; align-self: start; }
.table h3 { font-size: 17px; margin: 6px 0 4px; }
.tdl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 4px 0 8px; font-size: 15.5px; }
.tdl dt { color: var(--muted); }
.tdl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
table.mt { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
table.mt th, table.mt td { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: right; }
table.mt th:first-child, table.mt td:first-child { text-align: left; }
table.mt thead th { font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--edge); }
.bender { display: grid; gap: 6px; margin: 4px 0 10px; padding: 8px 10px; border: 1px dashed var(--edge); border-radius: var(--r); }
.bender .bhead { margin: 0; font-weight: 600; }
.bender label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; font-size: 15.5px; }
.bender input { width: 7em; }
.tnote { font-size: 14px; color: var(--muted); margin: 8px 0 0; line-height: 1.4; }

/* ---------- the sheet ---------- */
.note { margin: 0 0 10px; padding: 10px 12px; border-left: 4px solid var(--bad); background: var(--bad-soft); border-radius: var(--r); font-size: 15.5px; }
.note.info { border-color: var(--info); background: var(--paper); }
.sheet:focus { outline: none; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.sheet-head h2 { font-size: 26px; margin: 6px 0 0; }
.code { font-family: var(--mono); font-stretch: normal; letter-spacing: 0.06em; }
.score { margin: 0; color: var(--muted); font-size: 15px; }
.sline { margin: 2px 0 8px; color: var(--muted); font-size: 14px; }
.qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.q { background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--ink); border-radius: var(--r); padding: 12px 14px 14px; min-width: 0; }
.qhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.q h3 { font-size: 21px; margin: 0; }
.qn { color: var(--accent); margin-right: 6px; }
.scen { margin: 6px 0 8px; max-width: 75ch; }
.figview { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 0 8px; }
figure.job, figure.stickfig { margin: 0; }
figure.job figcaption, figure.stickfig figcaption { font-size: 14px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
svg.fig { display: block; max-width: 100%; height: auto; }
.zoomed svg.fig { max-width: none; }
.endv { margin-top: 4px; }
.run { display: grid; gap: 4px; }
.runlist { margin: 0; padding-left: 26px; font-size: 16px; }
/* drawing ink */
.sf { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.ht { fill: none; stroke: var(--hatch); stroke-width: 0.9; }
.bx { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.bx.fb { fill: var(--steel); }
.obs { fill: var(--obs); stroke: var(--ink); stroke-width: 1.5; }
.pipe { fill: var(--pipe); stroke: var(--ink); stroke-width: 1.6; }
.ko { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.cd { fill: none; stroke: var(--cond); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.cd.plan { stroke-width: 2.6; stroke-dasharray: 9 5; stroke-linecap: butt; }
.cd.cut { stroke-width: 2.2; stroke-dasharray: 2 4; }
.cl { fill: none; stroke: var(--muted); stroke-width: 0.9; stroke-dasharray: 10 3 2 3; }
.ext, .dl { fill: none; stroke: var(--dim); stroke-width: 0.9; }
.ah { fill: var(--dim); }
.dt { fill: var(--dim); font: 600 14px var(--sans); font-variant-numeric: tabular-nums; }
.lb { fill: var(--muted); font: 13px var(--sans); }
.lb.sm { font-size: 12.5px; }
.nts { fill: var(--muted); font: italic 11.5px var(--sans); }
.tag circle { fill: var(--accent); }
.tag text { fill: var(--accent-ink); font: 700 12px var(--sans); }
.stick { fill: var(--steel); stroke: var(--ink); stroke-width: 1.2; }
.tick { stroke: var(--accent); stroke-width: 2.4; }
.mk { fill: var(--ink); font: 13.5px var(--sans); font-variant-numeric: tabular-nums; }
.mk .mid { fill: var(--accent); font-weight: 700; }
.legend { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.tapnote { font-size: 13.5px; color: var(--muted); margin: -4px 0 8px; }

/* answer boxes */
.qparts { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 6px; }
.part { border: 0; margin: 0; padding: 0; min-width: 0; }
.part .prompt, .part legend { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; margin-bottom: 4px; color: var(--ink); }
.ain { display: flex; align-items: center; gap: 8px; }
.ain input { width: 11em; max-width: 100%; font-variant-numeric: tabular-nums; }
.unit { color: var(--muted); }
.opts { display: grid; gap: 6px; }
.opts.row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.opt { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.opt input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--accent); flex: none; }
.part.is-right input:not([type="radio"]) { border-color: var(--ok); background: var(--ok-soft); }
.part.is-wrong input:not([type="radio"]) { border-color: var(--bad); background: var(--bad-soft); }
.part.is-close input:not([type="radio"]) { border-color: var(--close); background: var(--close-soft); }
.fb { margin: 4px 0 0; font-size: 15px; line-height: 1.4; padding: 4px 8px; border-radius: var(--r); }
.fb.right { color: var(--ok); background: var(--ok-soft); }
.fb.wrong { color: var(--bad); background: var(--bad-soft); }
.fb.close, .fb.unread { color: var(--close); background: var(--close-soft); }
.qfoot { display: flex; gap: 10px; align-items: center; }
details.work { margin-top: 4px; border-top: 1px dashed var(--line); padding-top: 4px; }
details.work summary { cursor: pointer; color: var(--info); min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.ans { margin: 8px 0 2px; }
.steps { margin: 0 0 4px; padding-left: 20px; color: var(--muted); font-size: 15.5px; }
.keyfig { margin: 6px 0 10px; }
.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 6px; }
.ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--accent-soft); padding: 6px 10px; border-radius: var(--r); }
.share { margin: 16px 0 6px; }
.print-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.print-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.share-out label { display: grid; gap: 4px; font-weight: 600; margin-top: 8px; }
.share-out input { width: 100%; }
.recent { margin-top: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 12px; }
.recent summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.recent small { display: block; color: var(--muted); font-size: 14px; }
.hint { color: var(--muted); font-size: 14px; }
.toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(150%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r); max-width: min(92vw, 520px); font-size: 15.5px; transition: transform 0.2s; z-index: 20; }
.toast.on { transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- content ---------- */
.content { max-width: 75ch; padding: 26px 0 20px; }
.content h2 { font-size: 26px; margin: 26px 0 6px; }
table.ltab { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; background: var(--paper); }
table.ltab th, table.ltab td { border: 1px solid var(--line); padding: 5px 7px; text-align: left; }
table.ltab thead th { background: var(--obs); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; padding: 10px 0; min-height: 44px; }
.faq p { margin: 0 0 12px; }
.sources { font-size: 14.5px; color: var(--muted); }
footer { border-top: 1px solid var(--line); padding: 16px 0 28px; font-size: 14.5px; color: var(--muted); }
.indep { margin: 0 0 10px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.print-root { display: none; }

@media (min-width: 900px) {
  .tool { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .work-area { grid-column: 1 / -1; }
  .qparts { grid-template-columns: 1fr 1fr; gap: 12px 22px; }
  .qparts .qfoot, .qparts details.work { grid-column: 1 / -1; }

}
@media (max-width: 480px) {
  .setgrid { gap: 8px 10px; }
  .sg span { font-size: 14px; padding: 4px 2px; }
  .seg3 .sg span { font-size: 13.5px; letter-spacing: -0.01em; }
  .hero { padding-top: 14px; }
  .lede { font-size: 16px; }
  .zoom { min-height: 36px; padding: 4px 10px; white-space: nowrap; }
  .q { padding: 10px 10px 12px; }
  .zoomed svg.fig { width: 600px; }
  table.ltab { font-size: 13.5px; }
  table.ltab th, table.ltab td { padding: 4px 4px; }
}
@media (min-width: 481px) { .zoom { display: none; } }

/* ---------- print ---------- */
@media print {
  :root { --ink: #000; --muted: #333; --line: #999; --paper: #fff; --edge: #555; --dim: #000; --cond: #000; --steel: #fff; --obs: #fff; --pipe: #fff; --hatch: #555; --accent: #000; --accent-ink: #fff; }
  @page { margin: 13mm 12mm; }
  body { background: #fff; color: #000; font: 10.5pt/1.38 var(--sans); }
  main, footer, .toast, .skip { display: none !important; }
  .print-root { display: block; }
  svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  table.pt { width: 100%; border-collapse: collapse; }
  table.pt > tbody > tr > td, table.pt > thead > tr > td { padding: 0; }
  .prun { font: 8.5pt var(--sans); color: #444; text-align: right; padding-bottom: 5pt !important; }
  .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 10pt; border-bottom: 2pt solid #000; margin-bottom: 4pt; }
  .ph h2 { font: 700 16pt var(--head); margin: 0; white-space: nowrap; }
  .ph p { margin: 0; font-size: 9pt; text-align: right; }
  .pmeta { display: flex; justify-content: space-between; gap: 12pt; margin: 4pt 0 4pt; }
  .plabel { margin: 0 0 4pt; font-size: 9pt; }
  .ptable { display: grid; grid-template-columns: auto 1fr; gap: 0 10pt; border: 0.8pt solid #000; padding: 3pt 6pt; margin: 0 0 6pt; font-size: 8.8pt; break-inside: avoid; }
  .ptable p { margin: 0; }
  .pq { list-style: none; margin: 0; padding: 0; }
  .pq > li { padding: 5pt 0 6pt; border-bottom: 0.75pt solid #999; break-inside: avoid; page-break-inside: avoid; }
  .pq h3 { font: 700 12pt var(--head); margin: 0 0 2pt; }
  .pscen { margin: 0 0 4pt; }
  .pfig { display: flex; align-items: flex-end; gap: 6mm; }
  .pfig svg.fig { max-width: 100%; width: auto; max-height: 48mm; margin: 0 0 2pt; }
  .pfig svg.endv { max-height: 30mm; }
  .pfig .run { display: block; }
  .pfig .dt { font-size: 18px; }
  .pfig .lb { font-size: 15px; }
  .pfig .runsvg { max-height: 18mm; }
  .runlist { font-size: 10pt; padding-left: 18pt; }
  figure.job figcaption, figure.stickfig figcaption { font-size: 8.5pt; color: #000; }
  .cd { stroke-width: 3.6; }
  .dt { font-size: 13px; }
  .pparts { display: grid; grid-template-columns: 1fr 1fr; gap: 1pt 8mm; font-size: 9.8pt; }
  .pparts .pp { break-inside: avoid; }
  .pparts .pp p { margin: 0; }
  .pline { margin: 5pt 0 3pt !important; }
  .popts span { margin-right: 9pt; white-space: nowrap; }
  .pkey { break-before: page; page-break-before: always; }
  .pk { list-style: none; margin: 0; padding: 0; }
  .pk > li { padding: 5pt 0 7pt; border-bottom: 0.75pt solid #999; break-inside: avoid; page-break-inside: avoid; }
  .pk h3 { font: 700 11.5pt var(--head); margin: 0 0 3pt; }
  .pkfigs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6mm; align-items: start; }
  .pkfigs svg.fig { max-height: 50mm; width: 100%; }
  .sticksvg .mk { font-size: 19px; }
  .pkfigs .job .dt { font-size: 21px; }
  .pkfigs .job .lb { font-size: 17px; }
  .pkfigs .tag circle { r: 11px; }
  .pkfigs .tag text { font-size: 15px; }
  .sticksvg .lb { font-size: 16px; }
  .pkfigs .legend { font-size: 8pt; color: #000; }
  table.pkt { width: 100%; border-collapse: collapse; font-size: 9pt; margin-top: 3pt; table-layout: fixed; }
  table.pkt td { border-top: 0.5pt solid #bbb; padding: 2pt 4pt; vertical-align: top; }
  table.pkt td.pkq { width: 38%; }
  table.pkt td.pka { width: 18%; font-weight: 700; }
  .tag circle { fill: #000; }
  .tag text { fill: #fff; }
  .mk .mid { fill: #000; }
  .tick { stroke: #000; }
}