/* Section of Solids Practice: the second sheet of the same drawing course as projection-of-lines-practice, so the
   same board and type, in a different ink: a warm grey ground, the problem sheet as cartridge paper, graphite for the
   views, slate blue for construction (projectors, generators, fold lines), brick red for the section plane and the
   hatching, as students mark the cut in red pencil, and ochre for true lengths. Print: black only, weights, dashes and
   hatching carry the meaning, full size. */
[hidden] { display: none !important; }
:root {
  --bg: #ece9e3;
  --paper: #fbfaf6;
  --sheet: #ffffff;
  --ink: #221d1b;
  --muted: #55504b;
  --line: #d9d3ca;
  --edge: #8a8178;
  --accent: #9b3520;
  --accent-ink: #ffffff;
  --accent-soft: #f3e1da;
  --draw: #1d1a19;
  --con: #3c6585;
  --cut: #b0391f;
  --tl: #8f5600;
  --ok: #1b6a35;
  --ok-soft: #e0f0e3;
  --close: #7a5200;
  --close-soft: #f5ead0;
  --bad: #a3231b;
  --bad-soft: #f8e1dd;
  --info: #23566b;
  --focus: #1d5fd1;
  --head: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, 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: 2px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1715;
    --paper: #24201d;
    --sheet: #211d1b;
    --ink: #ebe6e1;
    --muted: #b9b1aa;
    --line: #3b3430;
    --edge: #7c726b;
    --accent: #f0937a;
    --accent-ink: #2d0d05;
    --accent-soft: #3a211a;
    --draw: #f2eeea;
    --con: #8fb8d8;
    --cut: #f0937a;
    --tl: #f0b45a;
    --ok: #8fd8a3;
    --ok-soft: #15301d;
    --close: #f0c56b;
    --close-soft: #352a12;
    --bad: #ff9c8f;
    --bad-soft: #3a1c18;
    --info: #86c6e0;
    --focus: #8ab8ff;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 16px; }
a { color: var(--accent); text-underline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.hero { padding: 20px 0 6px; max-width: 760px; }
h1 { font: 700 clamp(1.7rem, 4.6vw, 2.5rem)/1.1 var(--head); margin: 0 0 8px; letter-spacing: -0.005em; }
.lede { margin: 0; color: var(--muted); max-width: 64ch; }
h2 { font: 700 1.35rem/1.2 var(--head); margin: 0 0 10px; }

/* setup: one strip like a title block */
.setup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 12px 0; margin-top: 10px; border-top: 3px double var(--ink); }
.setup label, .print-row label { display: flex; flex-direction: column; gap: 3px; font-size: 0.85rem; font-weight: 650; color: var(--muted); }
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; }
select { max-width: 100%; }
.btn { font: inherit; font-weight: 650; min-height: 44px; padding: 8px 18px; border-radius: var(--r); border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.small { padding: 6px 14px; }
.btn:hover { filter: brightness(0.95); }
.link { font: inherit; background: none; border: 0; padding: 10px 0; min-height: 44px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

.rules { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rules > summary { cursor: pointer; padding: 10px 0; min-height: 44px; font-weight: 650; display: flex; align-items: center; }
.rl { margin: 0 0 12px; padding-left: 1.3em; max-width: 78ch; }
.rl li { margin: 0 0 6px; }
.rl .src { color: var(--muted); font-size: 14px; display: block; }

.note { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--close); background: var(--close-soft); overflow-wrap: anywhere; border-radius: var(--r); }
.note.info { border-color: var(--info); background: var(--paper); }
.note .link { min-height: 0; padding: 0; font-weight: 600; }

/* the problem sheet */
.sheet { background: var(--paper); border: 1px solid var(--edge); outline: 1px solid var(--edge); outline-offset: 4px; margin: 18px 5px 8px; padding: 14px 18px 10px; }
.sheet:focus { outline-color: var(--accent); }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; border-bottom: 2px solid var(--ink); padding-bottom: 4px; }
.sheet-head h2 { margin: 0; }
.code { font-family: var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.score { margin: 0; color: var(--muted); font-size: 0.95rem; }
.sline { margin: 6px 0 0; color: var(--muted); font-size: 0.92rem; }
.qs { list-style: none; margin: 0; padding: 0; }
.q { border-bottom: 1px solid var(--line); padding: 16px 0 10px; }
.q h3 { font: 700 1.12rem/1.3 var(--head); margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; }
.qn { font-family: var(--mono); color: var(--accent); font-weight: 700; min-width: 1.4em; }
.scen { margin: 0 0 10px; max-width: 72ch; }
.keyfig svg { display: block; width: 100%; height: auto; background: var(--sheet); border: 1px solid var(--line); }
.keyfig { margin: 4px 0 14px; }
.keyfig figcaption { font: 600 0.92rem/1.3 var(--head); color: var(--muted); margin: 0 0 4px; }
.qparts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 10px 22px; }
.part { margin: 0; border: 0; padding: 0; min-width: 0; }
.part.ch { grid-column: 1 / -1; }
.prompt, .part legend { display: block; font-size: 0.95rem; font-weight: 600; margin-bottom: 3px; padding: 0; }
.ain { display: inline-flex; align-items: center; gap: 6px; }
.ain input { width: 8.5em; font-family: var(--mono); }
.unit { color: var(--muted); min-width: 1.6em; }
.part.is-right .ain input { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.part.is-wrong .ain input, .part.is-unread .ain input { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.part.is-close .ain input { border-color: var(--close); box-shadow: inset 0 0 0 1px var(--close); }
.opts { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.opt { display: flex; gap: 8px; align-items: flex-start; min-height: 44px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); cursor: pointer; }
.opt input { margin: 3px 0 0; min-height: 0; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.fbwrap:empty { display: none; }
.fb { margin: 6px 0 0; padding: 6px 10px; border-radius: var(--r); max-width: 64ch; font-size: 0.95rem; }
.fb.right { background: var(--ok-soft); color: var(--ok); }
.fb.close { background: var(--close-soft); color: var(--close); }
.fb.wrong, .fb.unread { background: var(--bad-soft); color: var(--bad); }
.qfoot { padding: 10px 0 0; }
.work > summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
/* phones: the key keeps a legible size and scrolls sideways inside its own box */
/* phones: the key fits the screen; Zoom in shows it full size, scrolling sideways inside its own box */
.khead { display: none; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 6px; }
.khint { display: none; font-size: 0.9rem; color: var(--muted); }
.zoom { min-height: 40px; padding: 4px 12px; white-space: nowrap; }
@media (max-width: 560px) {
  .khead { display: flex; }
  #qs.zoomed .khint { display: inline; }
  #qs.zoomed .keyfig { overflow-x: auto; }
  #qs.zoomed .keyfig svg { min-width: 560px; }
}
.kt { border-collapse: collapse; width: 100%; font-size: 0.93rem; margin: 6px 0 10px; }
.kt th, .kt td { border-top: 1px solid var(--line); padding: 6px 8px 6px 0; text-align: left; vertical-align: top; }
.kt thead th { color: var(--muted); font-weight: 600; font-size: 0.85rem; border-top: 0; }
.kt tbody th { font-weight: 600; width: 34%; }
.kt .ka { font-family: var(--mono); white-space: nowrap; font-weight: 700; }
.kt .ka.kc { font-family: inherit; white-space: normal; }
.kt .ka small { font-weight: 400; color: var(--muted); }
.kt .kw { color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .kt thead { display: none; }
  .kt tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; border-top: 1px solid var(--line); padding: 6px 0; }
  .kt th, .kt td { border: 0; padding: 2px 0; }
  .kt tbody th { width: auto; }
  .kt .kw { grid-column: 1 / -1; font-size: 0.88rem; }
  .kt .ka { white-space: normal; max-width: 45vw; }
}
.work h4 { font: 700 1rem var(--head); margin: 6px 0 4px; }
.steps { margin: 0 0 10px; padding-left: 1.7em; font-size: 0.95rem; }
.steps li { margin-bottom: 4px; }
.sheet-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 12px 0 4px; }
.hint { color: var(--muted); font-size: 0.9rem; }
.ask { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* line work (stroke widths come from the drawing, in millimetres) */
svg.cons .ln { fill: none; stroke: var(--con); stroke-linecap: round; }
svg.cons .ln.view, svg.cons .ln.xy { stroke: var(--draw); }
svg.cons .ln.tl { stroke: var(--tl); }
svg.cons .ln.cut, svg.cons .ln.ctr { stroke: var(--cut); }
svg.cons .ln.hatch { stroke: var(--cut); }
svg.cons .ln.hid, svg.cons .ln.fold { stroke: var(--draw); }
svg.cons .ln.fold { stroke: var(--con); }
svg.cons ellipse.ln, svg.cons circle.ln { fill: none; }
svg.cons .dot { fill: var(--draw); }
svg.cons text { fill: var(--draw); font-family: Arial, "Helvetica Neue", var(--sans); }
svg.cons text.tg { fill: var(--tl); font-weight: 700; }
svg.cons text.al { fill: var(--con); }
svg.cons text.cap { fill: var(--muted); font-style: italic; }

.share { padding: 8px 0 0; }
.print-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.share-out label { display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; font-weight: 600; margin-top: 8px; }
.share-out input { width: 100%; }
.recent { border-top: 1px solid var(--line); margin-top: 12px; }
.recent summary { cursor: pointer; padding: 11px 0; font-weight: 600; min-height: 44px; }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 4px 0; }
.recent small { display: block; color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 160%); background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--r); max-width: calc(100% - 32px); transition: transform 0.2s; pointer-events: none; z-index: 20; }
.toast.on { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

.content { padding: 28px 0 8px; max-width: 760px; }
.content h2 { margin-top: 26px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.content p, .levels { max-width: 70ch; }
.levels { padding-left: 1.3em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 11px 0; font-weight: 600; min-height: 44px; }
.faq details p { margin: 0 0 12px; }
.sources { font-size: 0.92rem; color: var(--muted); overflow-wrap: anywhere; margin-top: 22px; }
footer { border-top: 1px solid var(--line); margin-top: 20px; padding: 16px 0 28px; color: var(--muted); font-size: 0.92rem; }
.indep { margin: 0 0 10px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.sb-footer a { color: var(--ink); }
@media (max-width: 600px) {
  .sheet { margin: 14px 4px 8px; padding: 12px 10px 8px; }
  .setup .btn { flex: 1 1 auto; }
}

/* ---------- print ---------- */
.print-root { display: none; }
@page { margin: 8mm 12mm; }
@media print {
  :root { --ink: #000; --muted: #333; --line: #999; --paper: #fff; --sheet: #fff; --edge: #555; --draw: #000; --con: #000; --tl: #000; --accent: #000; }
  body { background: #fff; color: #000; font: 10pt/1.35 Arial, 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: 8pt Arial, sans-serif; color: #444; text-align: right; padding-bottom: 3pt !important; }
  section.psheet, section.pkey { break-before: page; page-break-before: always; }
  section:first-child { break-before: auto; page-break-before: auto; }
  .ph { border-bottom: 1.5pt solid #000; margin: 0 0 4pt; break-after: avoid; page-break-after: avoid; }
  .ph h2 { font: 700 14pt var(--head); margin: 0; }
  .ph p { margin: 0 0 3pt; font-size: 9pt; }
  .pnote { margin: 0 0 6pt; font-size: 9pt; }
  /* each key page: a problem's projections and true shape, then its development and answers */
  section.ppage { break-before: page; page-break-before: always; }
  section.ppage > .prun { margin: 0; }
  .pmeta { display: flex; justify-content: space-between; gap: 12pt; margin: 4pt 0 8pt; }
  .pqs { list-style: none; margin: 0; padding: 0; }
  .pq { break-inside: avoid; page-break-inside: avoid; margin: 0 0 8pt; padding-top: 4pt; border-top: 0.75pt solid #000; }
  .pq h3 { font: 700 11pt var(--head); margin: 0 0 2pt; }
  .pscen { margin: 0 0 4pt; font-size: 10pt; }
  /* the frame is an outline, not a border: a border would take room inside the svg box (border-box) and shrink the
     full-size drawing by about 0.3% */
  .space svg { display: block; outline: 0.5pt solid #777; outline-offset: 0; max-width: 100%; }
  svg.cons .ln, svg.cons .ln.view, svg.cons .ln.tl, svg.cons .ln.cut, svg.cons .ln.ctr, svg.cons .ln.hatch, svg.cons .ln.fold { stroke: #000; }
  svg.cons .dot, svg.cons .ah { fill: #000; }
  svg.cons text, svg.cons text.tg, svg.cons text.al, svg.cons text.cap { fill: #000; }
  .pparts { list-style: none; margin: 4pt 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3pt 14pt; }
  .pk { break-inside: avoid; page-break-inside: avoid; }
  .pk h3 { font: 700 11pt var(--head); margin: 2pt 0 2pt; border-top: 0.75pt solid #000; padding-top: 3pt; }
  .pk .space { margin: 3pt 0; }
  .pstepwrap.wide .psteps { column-count: 2; column-gap: 6mm; }
  .pp { display: flex; align-items: flex-end; gap: 4pt; font-size: 9.5pt; min-height: 7mm; }
  .pp.wide { grid-column: 1 / -1; flex-wrap: wrap; }
  .pline { flex: 1 1 18mm; border-bottom: 0.5pt solid #555; min-width: 18mm; height: 1em; }
  .popts { display: inline-flex; flex-wrap: wrap; gap: 2pt 10pt; }
  /* a key keeps its drawing, steps and answer table on one page */
  .pkfig { break-inside: avoid; page-break-inside: avoid; }
  .pkbody { display: flex; flex-wrap: wrap; gap: 3mm 5mm; align-items: flex-start; }
  .pstepwrap { flex: 1 1 48mm; min-width: 48mm; }
  .pkbody.below .pstepwrap { flex-basis: 100%; }
  .pkbody.below .psteps { column-count: 2; column-gap: 6mm; }
  .psh { font: 700 9pt var(--head); margin: 0 0 1pt; }
  .psteps { margin: 0; padding-left: 12pt; font-size: 8pt; line-height: 1.3; }
  .psteps li { margin: 0 0 2pt; break-inside: avoid; }
  table.pkt { width: 100%; border-collapse: collapse; font-size: 8.5pt; margin-top: 4pt; break-inside: avoid; }
  table.pkt td { border: 0.5pt solid #555; padding: 1.5pt 3pt; vertical-align: top; }
  .pkq { width: 32%; font-weight: 700; }
  .pka { width: 15%; font-weight: 700; white-space: nowrap; }
  .pkw { font-size: 8pt; }
}