/* EGD Analytical Practice: the exam paper on a drawing board. Cartridge-paper background, navy pencil ink, a
   terracotta accent, the drawing on its own white sheet and the questions in the papers' numbered table with a
   marks column. Print: drawing pages at true scale, then the question table, then the memo. */
[hidden] { display: none !important; }
:root {
  --bg: #f2eee3;
  --paper: #fffdf8;
  --sheet: #ffffff;
  --ink: #1b2233;
  --muted: #4d5466;
  --line: #d9d2c0;
  --edge: #8b8574;
  --accent: #a8401c;
  --accent-ink: #ffffff;
  --accent-soft: #f4e2d8;
  --navy: #1f3a63;
  --draw: #141a26;
  --draw-soft: #7b8191;
  --fill: #d9dde4;
  --wall: #3d4250;
  --ok: #1d6a37;
  --ok-soft: #dff0e4;
  --close: #7a5300;
  --close-soft: #f6ead0;
  --bad: #a3231b;
  --bad-soft: #f8e1dd;
  --info: #23566b;
  --focus: #1d5fd1;
  --head: "Arial Narrow", "Roboto Condensed", "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: 3px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16191f;
    --paper: #1f232b;
    --sheet: #1b1f27;
    --ink: #e7e4dc;
    --muted: #b1aea5;
    --line: #353a45;
    --edge: #6f7482;
    --accent: #f0956f;
    --accent-ink: #2a0f04;
    --accent-soft: #3a2219;
    --navy: #9fbbe6;
    --draw: #e9ecf2;
    --draw-soft: #9aa1b1;
    --fill: #343b49;
    --wall: #b9bfcc;
    --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: 1320px; 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: 18px 0 4px; max-width: 860px; }
.crumbs { font-size: 0.92rem; color: var(--muted); margin: 0 0 4px; }
.crumbs a { color: var(--muted); }
h1 { font: 700 clamp(1.75rem, 5vw, 2.6rem)/1.08 var(--head); margin: 0 0 8px; color: var(--navy); letter-spacing: 0.01em; text-transform: uppercase; }
.lede { margin: 0 0 6px; color: var(--muted); max-width: 70ch; }
h2 { font: 700 1.35rem/1.2 var(--head); margin: 0 0 10px; }

/* the bar: set code and actions */
.bar { display: flex; align-items: flex-end; gap: 8px 10px; flex-wrap: wrap; padding: 10px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); margin-top: 8px; }
.setid { margin: 0 auto 0 0; font: 700 1.2rem/44px var(--head); }
.code { font-family: var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.psel { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; 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; }
select { max-width: 100%; }
.btn { font: inherit; font-weight: 650; min-height: 44px; padding: 8px 16px; 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; }
.note { margin: 10px 0; padding: 10px 12px; border-left: 5px solid var(--close); background: var(--close-soft); }
.note.info { border-left-color: var(--info); background: var(--paper); }
.note .link { min-height: 0; padding: 0; font-weight: 600; }
.share-out label { display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; font-weight: 600; }
.share-out input { width: 100%; }

/* the work area: drawing and questions; side by side on wide screens with the drawing kept in view */
.work { display: grid; gap: 18px; margin: 14px 0 0; }
@media (min-width: 1100px) and (min-height: 700px) { .dpane { position: sticky; top: 8px; } }
@media (min-width: 1100px) {
  .work { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .dpanel svg { max-height: calc(100vh - 330px); }
}
.dpane { min-width: 0; }
/* phones and tablets: a sticky "Show drawing" button opens the drawing over the questions; the page keeps its place */
.showdwg { position: sticky; bottom: 12px; display: block; margin: 16px 0 0 auto; z-index: 5; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.hidedwg { display: none; }
.dpane.over { position: fixed; inset: 0; z-index: 60; overflow: auto; background: var(--bg); padding: 10px 12px 16px; }
.dpane.over .hidedwg { display: inline-flex; }
.dpane.over .jump { display: none; }
html.dwg-open { overflow: hidden; }
@media (min-width: 1100px) { .showdwg, .hidedwg { display: none !important; } }
.dhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--ink); }
.tab { font: 650 0.95rem var(--head); min-height: 44px; padding: 6px 12px; background: transparent; color: var(--muted); border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.03em; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.zoom { background: transparent; }
.dtools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.jump { min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 1100px) { .jump { display: none; } }
@media (min-width: 1100px) { .zoom { display: none; } }
.dpanel { background: var(--sheet); border: 1px solid var(--edge); padding: 8px; border-radius: var(--r); }
.dpanel figure { margin: 0; }
.dpanel svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.dpanel.zoomed .dwg { overflow-x: auto; }
@media (max-width: 1099px) { .dpanel.zoomed .dwg svg { width: 220%; max-width: none; max-height: none; } }
.work.busy .dpanel, .work.busy .rows { opacity: 0.45; transition: opacity 0.15s; }
.btn:disabled { cursor: progress; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .work.busy .dpanel, .work.busy .rows { transition: none; } }
.dnote { font-size: 0.85rem; color: var(--muted); margin: 6px 0 0; }
.tables { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; margin-top: 8px; }

/* line work on screen (stroke widths come from the drawing, in drawing units) */
svg .ln, svg .sy, svg .ex, svg .dl, svg .ar, svg .ms, svg .hatch, svg .bnd, svg .bl, svg .contour, svg .drain, svg .water, svg .sewer, svg .gl, svg .ffl, svg .win, svg .door, svg .ld, svg .tk { fill: none; stroke: var(--draw); }
svg .ln.v { stroke-linecap: square; }
svg .hatch, svg .contour, svg .water { stroke: var(--draw); }
svg .house { fill: var(--fill); stroke: var(--draw); }
svg .wall { fill: var(--wall); }
svg .ah, svg .fillk { fill: var(--draw); }
svg .filln, svg .mk, svg .fdot { fill: var(--sheet); stroke: var(--draw); }
svg text { fill: var(--draw); font-family: Arial, "Helvetica Neue", var(--sans); }
svg .lt, svg .cpl, svg .corner, svg .dct { font-weight: 700; }
svg .cap { font-weight: 700; letter-spacing: 0.03em; }
svg .room, svg .hl { font-weight: 700; }
svg text.halo { paint-order: stroke; stroke: var(--sheet); stroke-linejoin: round; }

/* tables on the sheet */
.tblock, .tpanel, .survey, .legend, .sched { border-collapse: collapse; background: var(--sheet); color: var(--draw); font: 0.78rem/1.3 Arial, var(--sans); }
.tblock { width: 100%; margin-top: 8px; }
.tblock td, .tpanel td, .tpanel th, .survey td, .survey th, .legend td, .sched td, .sched th { border: 1px solid var(--draw); padding: 3px 5px; vertical-align: top; text-align: left; }
.tbl { font-size: 0.68rem; color: var(--draw-soft); display: block; }
.tblock .symcell svg { width: 32mm; max-width: 100%; display: block; }
.symsvg .sy, .symsvg .ln { stroke: var(--draw); fill: none; }
.tblock .firm, .tpanel .firm b { font-weight: 700; }
.tpanel { max-width: 560px; }
caption { font: 700 0.8rem Arial, var(--sans); text-align: left; padding: 2px 0; color: var(--ink); }
.legend .lsym { width: 22mm; height: 8mm; display: block; }
.tnote { font-size: 0.78rem; margin: 2px 0 0; color: var(--muted); }

/* the question table, as on the papers: number, question, answer, marks */
.qpane { min-width: 0; }
.qtop { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 4px; }
.qtop h2 { margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.qtop h2:focus { outline: none; }
.score { margin: 0; font-size: 0.95rem; color: var(--muted); }
.rows { list-style: none; margin: 0; padding: 0; }
.row { border-bottom: 1px solid var(--line); padding: 10px 0 6px; }
.rq { display: grid; grid-template-columns: 2.1em minmax(0, 1fr) 2em; gap: 8px; align-items: start; }
.rn { font: 700 1rem/1.5 var(--head); color: var(--accent); }
.rp { margin: 0; font-weight: 600; }
.rm { justify-self: end; font: 700 0.85rem/1.6 var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r); padding: 0 5px; }
.ra { margin: 6px 0 0 calc(2.1em + 8px); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; }
.ra > fieldset.part, .ra:has(> .part + .part) > .part { flex-basis: 100%; }
.ra:has(> .part + .part) > .part .ain { margin-bottom: 2px; }
.part { margin: 0; border: 0; padding: 0; min-width: 0; }
.part .fbwrap { max-width: 100%; }
.part legend { padding: 0; font-weight: 600; font-size: 0.92rem; }
.plab { display: block; font-size: 0.92rem; font-weight: 600; margin-bottom: 2px; }
.ain { display: flex; align-items: center; gap: 6px; }
.ain input { width: 13em; max-width: 100%; font-family: var(--mono); }
.unit { color: var(--muted); }
.opts { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(13em, 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(--paper); 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); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rfoot { display: contents; }
.rfoot .fb { margin: 0; }
.fbwrap:empty { display: none; }
.fb { margin: 6px 0 0; padding: 6px 10px; border-radius: var(--r); max-width: 72ch; }
.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); }
.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); }
.memo > summary { cursor: pointer; color: var(--muted); font-size: 0.93rem; padding: 10px 0; min-height: 44px; display: flex; align-items: center; list-style: none; }
.memo > summary::-webkit-details-marker { display: none; }
.memo > summary::before { content: "+"; margin-right: 6px; font-weight: 700; font-family: var(--mono); }
.memo[open] > summary::before { content: "−"; }
.memo { flex-basis: 100%; }
.memo .ans { margin: 0 0 2px; font-weight: 700; }
.steps { margin: 2px 0 8px; padding-left: 1.3em; font-size: 0.94rem; overflow-wrap: anywhere; }
.qfoot { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 12px 0; }
.clear-ask { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recent { border-top: 1px solid var(--line); }
.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); }
.hint { color: var(--muted); font-size: 0.9rem; margin: 8px 0 10px; }

.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; z-index: 20; }
.toast.on { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

.content { padding: 26px 0 8px; max-width: 800px; }
.content h2 { margin-top: 28px; color: var(--navy); }
.content p { max-width: 70ch; }
.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); }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 600px) {
  .ra { margin-left: 0; }
  .bar .btn { flex: 1 1 auto; }
  .setid { flex-basis: 100%; }
  .dpanel { padding: 4px; }
}

/* ---------- print ---------- */
.print-root { display: none; }
@page { margin: 0.42in 0.45in; }
@media print {
  :root { --ink: #000; --muted: #333; --line: #999; --paper: #fff; --sheet: #fff; --edge: #555; --draw: #000; --draw-soft: #555; --fill: #e2e2e2; --wall: #444; --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, .wall, .house { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  svg text.halo { stroke: #fff; }
  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: 4pt !important; }
  section.psheet, section.pqs, section.pkey { break-before: page; page-break-before: always; }
  section:first-child { break-before: auto; page-break-before: auto; }
  .ph { font: 700 13pt var(--head); margin: 0 0 3pt; text-transform: uppercase; border-bottom: 1.5pt solid #000; }
  .pnote { font-size: 8pt; margin: 0 0 4pt; font-style: italic; }
  .print-root figure { margin: 0 0 4pt; }
  .print-root svg { display: block; height: auto; max-width: 100%; }
  .print-root .tables { display: flex; flex-wrap: wrap; gap: 4mm 8mm; margin-top: 3pt; break-inside: avoid; }
  .tblock, .tpanel, .survey, .legend, .sched { font-size: 8pt; break-inside: avoid; }
  .tblock { width: auto; max-width: 180mm; }
  .tblock .symcell svg { width: 26mm; }
  .tpanel { max-width: 170mm; }
  .pplan figure { break-inside: avoid; }
  .pmeta { display: flex; justify-content: space-between; gap: 12pt; margin: 4pt 0 6pt; }
  table.pqt { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  table.pqt th, table.pqt td { border: 0.75pt solid #000; padding: 1.5pt 4pt; vertical-align: top; text-align: left; }
  table.pqt th { background: none; font-weight: 700; }
  .pqr { break-inside: avoid; page-break-inside: avoid; }
  .pn { width: 7mm; font-weight: 700; }
  .pa { width: 52mm; }
  .pm { width: 11mm; text-align: center !important; }
  .pline { border-bottom: 0.5pt solid #777; min-height: 5.5mm; }
  .popts { margin: 1pt 0 0; padding-left: 13pt; list-style: upper-alpha; font-size: 8.5pt; columns: 2; column-gap: 8pt; }
  .calcbox { border: 0.75pt solid #000; min-height: 20mm; margin-top: 3pt; font-size: 8pt; padding: 2pt; }
  .pk .ans { margin: 0; font-weight: 700; }
  .pk .steps { margin: 0 0 1pt; padding-left: 12pt; font-size: 8pt; line-height: 1.2; }
  .pk td { padding-top: 1.5pt !important; padding-bottom: 1.5pt !important; }
  .pk .ans { font-size: 9pt; }
}