/* Paper Test Editor — app and paper styles */
:root {
  /* outline of text boxes and menus: part way from the field colour to the text colour, so it reaches 3:1 in every style */
  --field-line: color-mix(in srgb, var(--ink) 66%, var(--field));
  --bg: #f4f1ea;
  --surface: #fffdf8;
  --ink: #1f2a44;
  --ink-2: #4a5470;
  --muted: #646c80;
  --line: #ddd6c8;
  --line-2: #e9e3d6;
  --accent: #2f5d9a;
  --accent-soft: #e4ecf7;
  --red: #b0462e;
  --red-soft: #f9e6e1;
  --green: #3b754a;
  --green-soft: #e3f0e5;
  --amber: #946112;
  --amber-soft: #fbf0d9;
  --radius: 10px;
  --surface-2: #faf8f3;   /* toolbars, table headers */
  --field: #fff;          /* inputs and editing fields */
  --field-ink: #111;
  --primary: #1f2a44;     /* primary buttons, active tabs, toast */
  --primary-hover: #2c3a5d;
  --primary-ink: #fff;
  --stage: #d9d3c6;       /* the desk behind the paper preview */
  --hl: #fff3c4;          /* fill-in blanks */
  --drop-lines: #efe9dc;
  --dash: #cfc7b6;
  --warn-ink: #6d4708; --bad-ink: #7b2b1b; --ok-ink: #23502e;
  --shadow: 0 1px 3px rgba(31,42,68,.08);
  /* Roles. Components colour themselves through these, never through the raw palette above,
     so a style restyles a role in one place. The defaults are built from the palette, and
     var() resolves after the cascade, so each style's own palette (and its Night look) flows
     in without restating them. Only styles whose look differs (the retro ones) override them.
     --tint is a fill behind body text (code, chips, table headings): keep it apart from
     --line-2, which is a border colour and may be black. */
  --tint: var(--line-2);
  --ok-bg: var(--green-soft);  --ok-fg: var(--ok-ink);     --ok-line: 1px solid transparent;
  --warn-bg: var(--amber-soft); --warn-fg: var(--warn-ink); --warn-line: 1px solid transparent;
  --bad-bg: var(--red-soft);   --bad-fg: var(--bad-ink);   --bad-line: 1px solid transparent;
  --info-bg: var(--accent-soft); --info-fg: var(--ink);    --info-line: 1px solid transparent;
  --pick-bg: var(--green-soft); --pick-fg: var(--green);   /* the correct answer's letter, the chosen True/False */
  color-scheme: light;
  /* Fonts: the device's own fonts first. The fonts in fonts/ are downloaded only on a
     device that has none of the fonts listed before them (the browser fetches a web
     font only when it reaches it in the list). */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", "DejaVu Serif", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, "PTE Fallback Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", "PTE Fallback Mono", monospace;
  /* The paper uses Calibri, the font of the Word export, or its metric twin Carlito, so the
     PDF breaks lines and pages like the .docx. Devices with neither get a bundled copy of Carlito. */
  --paper: Calibri, Carlito, "PTE Paper Sans", sans-serif;
  --paper-mono: Consolas, "Cascadia Mono", Menlo, "DejaVu Sans Mono", "Liberation Mono", "PTE Fallback Mono", monospace;
}
@font-face { font-family: "PTE Fallback Sans"; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PTE Fallback Sans"; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PTE Fallback Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* Inter is used only by the new.css style, and downloaded only when that style is on. */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PTE Paper Sans"; src: url("../fonts/paper-sans-latin-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PTE Paper Sans"; src: url("../fonts/paper-sans-latin-bold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PTE Paper Sans"; src: url("../fonts/paper-sans-latin-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PTE Paper Sans"; src: url("../fonts/paper-sans-latin-bolditalic.woff2") format("woff2"); font-weight: 600 700; font-style: italic; font-display: swap; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: .005em; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.15rem; margin-bottom: .6rem; }
h4, .review-side h3 { font-size: .95rem; margin: .2rem 0 .35rem; }
small, .muted { color: var(--muted); }

/* ---------- top bar & stepper ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: .6rem; }
/* the app name is the page's h1 (text directly inside it, so simple checkers find it) */
.brand-title { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 700; display: block; line-height: 1.1; }
.brand small { display: block; font-size: .8rem; }
.brand-mark { flex: none; color: inherit; }
.top-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

button { cursor: pointer; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: .42rem .85rem; transition: background .12s, border-color .12s, box-shadow .12s; }
button:hover { border-color: var(--ink-2); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#main:focus { outline: none; } /* focused by the skip link */
/* skip link: hidden until it gets keyboard focus, then shown at the top left */
.skip-link { position: absolute; left: .6rem; top: -3rem; z-index: 100; padding: .5rem .9rem; border-radius: 6px; background: var(--primary); color: var(--primary-ink); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: .6rem; }
button.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
button.big { padding: .65rem 1.4rem; font-size: 1.05rem; }
button.link { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; }
button.danger { color: var(--red); }
button.small { padding: .2rem .55rem; font-size: .85rem; }
button:disabled { opacity: .45; cursor: not-allowed; }

.stepper { list-style: none; display: flex; margin: 0; padding: .9rem 1.5rem 0; gap: .35rem; width: 100%; max-width: 1240px; margin-inline: auto; flex-wrap: wrap; } /* width: 100% because #app is a flex column (sticky footer): without it, auto margins would shrink the stepper to fit its content */
.stepper li { flex: 1 1 0; min-width: 150px; }
.stepper button { width: 100%; text-align: left; display: flex; align-items: center; gap: .55rem; border-radius: 999px; padding: .45rem .9rem .45rem .45rem; background: transparent; border-color: transparent; color: var(--ink-2); font-weight: 500; }
.stepper button span { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid var(--muted); font-size: .85rem; font-weight: 700; flex: none; }
.stepper button span { position: relative; }
/* Done steps: a check badge carries the meaning, so it reads the same in every style,
   in colour or monochrome. The colours come from each style's own palette. */
.stepper button.done span { background: var(--step-done-soft, var(--green-soft)); border-color: var(--step-done, var(--green)); color: var(--step-done, var(--green)); }
.stepper button.done span::after { content: ""; position: absolute; right: -.38rem; bottom: -.3rem; width: .9rem; height: .9rem; border-radius: 50%;
  background: var(--step-check, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.6-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")) center / 78% no-repeat, var(--step-done, var(--green)); box-shadow: 0 0 0 2px var(--step-ring, var(--bg)); }
.stepper button.active { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow); }
.stepper button.active span { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }

/* Sticky footer: the whole page (top bar, steps, main, footer) is at least one screen tall, and main takes
   the spare height. A short step keeps the footer at the bottom of the screen; a long one pushes it below.
   The footer also never appears high and then jumps down while the page loads. */
#app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
main { max-width: 1240px; width: 100%; margin: 0 auto; padding: 1rem 1.5rem 2rem; flex: 1 0 auto; }
/* min-height keeps the footer below the first screen while the step panels are filled in by script,
   so it doesn't jump down (layout shift) when they appear. */
.step { display: none; }
.step.active { display: block; animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.step-head { margin: .6rem 0 1.1rem; max-width: 820px; }
.step h2[tabindex="-1"]:focus { outline: none; } /* focused by script after Next/Back, to announce the step */
/* visually hidden, still read by screen readers and reachable by keyboard */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.step-head p { color: var(--ink-2); margin: .35rem 0 0; }
.step-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--line); }

.card, .side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
label { display: block; font-size: .88rem; color: var(--ink-2); font-weight: 500; }
input:not([type=checkbox]):not([type=radio]), select, textarea { display: block; width: 100%; margin-top: .25rem; padding: .48rem .6rem; border: 1px solid var(--field-line); border-radius: 7px; background: var(--field); color: var(--ink); font-weight: 400; }
textarea { resize: vertical; font-family: var(--sans); line-height: 1.45; }
textarea.mono { font-family: var(--mono); font-size: .88rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr 180px; gap: .8rem; margin-bottom: .8rem; }
.inline { display: flex; gap: .35rem; align-items: center; }
.inline input { flex: 1; }
.inline button { margin-top: .25rem; }
fieldset.checks { border: 0; padding: 0; margin: .9rem 0 0; display: grid; gap: .35rem; }
fieldset.checks label, label.check, label.radio { display: flex; gap: .5rem; align-items: baseline; font-weight: 400; color: var(--ink); }
.inline-checks { grid-auto-flow: column; justify-content: start; gap: 1.2rem !important; }
@media (max-width: 560px) { .inline-checks { grid-auto-flow: row; } } /* stack the options on very narrow screens */
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; margin: .9rem 0; }

/* ---------- import ---------- */
.drop { display: grid; place-items: center; gap: .2rem; text-align: center; padding: 2.2rem 1rem; border: 2px dashed var(--dash); border-radius: 14px; background: var(--surface); position: relative; cursor: pointer; transition: border-color .15s, background-color .15s; }
/* The ruled lines sit on their own layer behind the text, so the box itself has a plain colour
   that automated contrast checkers can read. */
.drop::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(0deg, transparent 0 27px, var(--drop-lines) 27px 28px); pointer-events: none; }
.drop > :not(input) { position: relative; }
.drop:hover, .drop.over { border-color: var(--accent); }
/* the file input inside is hidden from view but not from the keyboard: Tab to the box, then Enter or Space */
.drop:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.drop.over { background-color: var(--accent-soft); }
.drop b { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }
.drop span { color: var(--ink-2); font-weight: 400; } /* ink-2, not muted: it stays 4.5:1 where the ruled lines cross it */
.drop-icon { font-size: 1.8rem; color: var(--accent) !important; }
.sample-line { color: var(--muted); font-size: .9rem; }
.pool-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: .8rem; margin-top: 1rem; }
.pool-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: .85rem 1rem; display: grid; gap: .35rem; align-content: start; }
.pool-card header { display: flex; justify-content: space-between; gap: .5rem; align-items: start; }
.pool-card b { font-family: var(--serif); font-size: 1.05rem; }
.chips { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; align-content: flex-start; }
.chip { display: inline-flex; align-items: center; line-height: 1.4; font-size: .75rem; padding: .08rem .45rem; border-radius: 999px; background: var(--tint); color: var(--ink-2); white-space: nowrap; }
.chip.warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip.ok { background: var(--ok-bg); color: var(--ok-fg); }
.chip.bad { background: var(--bad-bg); color: var(--bad-fg); }

/* ---------- blueprint ---------- */
.table-wrap { overflow-x: auto; position: relative; } /* keeps hidden heading text inside the scroll box */
table.slots { width: 100%; border-collapse: collapse; }
.slots th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: .3rem .5rem; border-bottom: 1px solid var(--line); }
.slots td { padding: .5rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.slots td input { margin: 0; }
.slots input.num { width: 5.2rem; }
.slots .order { white-space: nowrap; }
.slots .order button { padding: .1rem .4rem; font-size: .8rem; min-width: 24px; min-height: 24px; } /* WCAG 2.2 target size */
.slots tfoot td { font-weight: 700; border-bottom: 0; }
.slots .pool-name b { font-family: var(--serif); }
.slots .sub { font-size: .8rem; color: var(--muted); }
/* "of N" sits beside the Draw input, so every control in the row centres on one line */
.slots .draw-cell { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
/* sections: banks combined under one label, draw count and points.
   A bar down the bank names ties the rows together; the shared cells span them. */
.slots .row-actions { white-space: nowrap; }
.slots .row-actions button + button { margin-left: .35rem; }
.slots tr.in-section .pool-name { border-left: 3px solid var(--accent); }
.slots tr.sec-first:not(.sec-last) .pool-name, .slots tr.sec-member:not(.sec-last) .pool-name,
.slots tr.sec-first:not(.sec-last) .row-actions, .slots tr.sec-member:not(.sec-last) .row-actions { border-bottom-style: dashed; }
.slots .sec-label, .slots .sec-draw { vertical-align: middle; }
.slots .sec-tag { margin-top: .3rem; }
.slots .mix-note { margin-top: .3rem; max-width: 14rem; white-space: normal; }
.slots .browse-title { margin-bottom: .3rem; font-weight: 600; }
.pool-notes .sec-lines { margin: .15rem 0 .35rem 1.2rem; }
.notice { border-radius: 8px; padding: .55rem .8rem; margin-top: .6rem; font-size: .9rem; display: flex; gap: .55rem; align-items: flex-start; }
/* a sign first (see "status icons"), so the kind of notice never depends on colour alone (and works in 1-bit styles) */
.notice.warn { background: var(--warn-bg); color: var(--warn-fg); border: var(--warn-line); }
.notice.bad { background: var(--bad-bg); color: var(--bad-fg); border: var(--bad-line); }
.notice.ok { background: var(--ok-bg); color: var(--ok-fg); border: var(--ok-line); }
.notice.info { background: var(--info-bg); color: var(--info-fg); border: var(--info-line); }
.qbrowse { margin-top: .4rem; max-height: 360px; overflow: auto; border: 1px solid var(--line-2); border-radius: 8px; }
.qbrowse div { display: flex; gap: .6rem; align-items: center; padding: .35rem .6rem; border-bottom: 1px solid var(--line-2); font-size: .88rem; }
.qbrowse div:last-child { border-bottom: 0; }
.qbrowse span.t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbrowse .chip { flex: none; }

/* ---------- generate ---------- */
.gen-row { display: grid; grid-template-columns: 160px 140px minmax(220px, 360px); gap: .9rem; align-items: end; }
.gen-go { display: flex; gap: 1rem; align-items: center; margin-top: 1.1rem; }
#gen-status { color: var(--ink-2); }
.overlap { border-collapse: collapse; margin: .4rem 0 .6rem; }
.overlap th, .overlap td { padding: .35rem .7rem; text-align: center; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.overlap th { background: var(--tint); font-family: var(--serif); }
.overlap td.self { color: var(--muted); background: var(--surface-2); }
.overlap td.zero { color: var(--ok-fg); font-weight: 600; }
.overlap td.some { background: var(--warn-bg); color: var(--warn-fg); font-weight: 600; }
.pool-notes { display: grid; gap: .25rem; font-size: .9rem; }
.history summary { cursor: pointer; display: flex; align-items: baseline; gap: .6rem; list-style: none; }
.history summary h3 { margin: 0; }
.history summary::before { content: '▸'; color: var(--muted); }
.history[open] summary::before { content: '▾'; }
.hist-row { display: flex; gap: .8rem; padding: .4rem 0; border-bottom: 1px solid var(--line-2); font-size: .9rem; align-items: center; }

/* ---------- review ---------- */
.review { display: grid; grid-template-columns: 250px 1fr; gap: 1.2rem; align-items: start; }
.review-side { position: sticky; top: 76px; }
.review-side .side-card { padding: .8rem .9rem; margin-bottom: .7rem; }
/* rows at least 24px apart, so each small checkbox or radio has room to hit (WCAG 2.2 target size) */
.review-side :is(label.check, label.radio) { min-height: 24px; align-items: center; }
.review-side label.row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .3rem; color: var(--ink); font-weight: 400; }
.review-side label.row input, .review-side label.row select { width: 6.5rem; margin: 0; padding: .25rem .4rem; }
.form-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.form-tabs button { font-family: var(--serif); font-weight: 700; min-width: 2.6rem; }
.form-tabs button.active { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.doc-tabs { display: grid; gap: .25rem; margin-bottom: .7rem; }
.doc-tabs button { text-align: left; }
.doc-tabs button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.overlap-mini { font-size: .85rem; }
.empty { padding: 3rem; text-align: center; color: var(--muted); border: 2px dashed var(--line); border-radius: var(--radius); }
.paper-stage { background: var(--stage); border-radius: var(--radius); padding: 1.5rem; overflow-x: auto; }
.paper-stage .paper { margin: 0 auto; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.paper-stage .pp-q { position: relative; border-radius: 4px; transition: background .12s; }
.paper-stage .pp-q:hover { background: #f4f7fc; box-shadow: 0 0 0 6px #f4f7fc; }
/* Edit and Swap stay in the Tab order: they are only faded out until the question is pointed at or reached with Tab */
.pp-tools { position: absolute; right: -4px; top: -4px; display: flex; gap: .25rem; font-family: var(--sans); opacity: 0; }
.pp-q:hover .pp-tools, .pp-q:focus-within .pp-tools { opacity: 1; }
.pp-tools button { font-size: .78rem; padding: .15rem .55rem; background: #1f2a44; color: #fff; border-color: #1f2a44; border-radius: 6px; box-shadow: none; }
.pp-q.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: #fff3c4; } to { background: transparent; } }

/* ---------- export ---------- */
.export-form { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; align-items: center; }
.export-form .code { font-family: var(--serif); font-size: 2.2rem; font-weight: 700; text-align: center; border: 2px solid var(--ink); border-radius: 8px; line-height: 1.3; }
.export-docs { display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: .6rem; }
.export-docs > div { border: 1px solid var(--line-2); border-radius: 8px; padding: .5rem .7rem; }
.export-docs b { display: block; font-size: .9rem; margin-bottom: .3rem; }
.export-docs .btns { display: flex; gap: .35rem; }
.export-meta { font-size: .82rem; color: var(--muted); margin-top: .35rem; }

/* ---------- modal & toast ---------- */
.modal { position: fixed; inset: 0; background: rgba(31,42,68,.38); display: grid; place-items: center; z-index: 50; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-box { background: var(--surface); border-radius: 12px; width: min(860px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-box header, .modal-box footer { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.2rem; gap: .5rem; }
.modal-box header { border-bottom: 1px solid var(--line); }
.modal-box footer { border-top: 1px solid var(--line); justify-content: flex-end; }
.modal-box footer:empty { display: none; }
.modal-body { padding: 1rem 1.2rem; overflow: auto; }
.x { border: 0; font-size: 1.5rem; line-height: 1; padding: 0 .3rem; background: none; }
.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--primary-ink); padding: .6rem 1.1rem; border-radius: 8px; z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: 90vw; }
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.edit-grid .preview .paper { width: auto; min-height: 0; padding: 0; box-shadow: none; font-size: 10.5pt; }
.edit-grid .preview { background: #fff; color: #000; border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; font-family: var(--serif); min-height: 120px; }
.opt-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: .4rem; align-items: center; margin-top: .35rem; }
.opt-row .lab { font-weight: 700; font-family: var(--serif); width: 1.3rem; }
.opt-row input[type=text], .opt-row textarea { margin: 0; }
.pair-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .4rem; margin-top: .35rem; }
.pair-row input { margin: 0 !important; }
.swap-list { display: grid; gap: .35rem; }
.swap-item { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; }
.swap-item.current { border-color: var(--accent); background: var(--accent-soft); }
.swap-item .t { font-size: .92rem; }
.swap-item .chips { margin-top: .25rem; }
.field-note { font-size: .8rem; color: var(--muted); margin-top: .2rem; }

/* ---------- status icons ----------
   The four signs (error, warning, information, ready) come from the Blackboard Question Editor:
   one set drawn for each style, in icons/status/<style>/, made by tools/make-status-icons.py.
   Paper uses the Question Editor's default ("Studio") set. The clean styles use theirs as masks
   painted in the text colour, so they follow Day and Night; the retro OS styles show theirs as
   full-colour pictures, the way those systems did. The signs only repeat what the text says,
   so screen readers skip them. */
/* Retro styles load their pictures as files. The clean styles' masks are written into this file as
   data: URLs, because browsers refuse mask images loaded from files when the page is opened from disk. */
:root { --ico-size: 16px; --ico-big: 28px; }
:root[data-skin="system"] { --ico-err: url(../icons/status/system/err.svg); --ico-warn: url(../icons/status/system/warn.svg); --ico-info: url(../icons/status/system/info.svg); --ico-ok: url(../icons/status/system/ok.svg); --ico-big: 32px; }
:root[data-skin="win98"] { --ico-err: url(../icons/status/win98/err.svg); --ico-warn: url(../icons/status/win98/warn.svg); --ico-info: url(../icons/status/win98/info.svg); --ico-ok: url(../icons/status/win98/ok.svg); --ico-big: 32px; }
:root[data-skin="xp"] { --ico-err: url(../icons/status/xp/err.svg); --ico-warn: url(../icons/status/xp/warn.svg); --ico-info: url(../icons/status/xp/info.svg); --ico-ok: url(../icons/status/xp/ok.svg); --ico-big: 32px; }
:root[data-skin="win7"] { --ico-err: url(../icons/status/win7/err.svg); --ico-warn: url(../icons/status/win7/warn.svg); --ico-info: url(../icons/status/win7/info.svg); --ico-ok: url(../icons/status/win7/ok.svg); --ico-big: 32px; }
:root[data-skin="sakura"] { --ico-size: 17px; }
/* generated:begin (tools/make-status-icons.py writes everything up to generated:end; edit the script, not these lines) */
:root {
  --ico-err: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EStudio err%3C/title%3E%3Ccircle cx="12" cy="12" r="9.2" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3Cpath d="M8.8 8.8l6.4 6.4m0-6.4-6.4 6.4" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3C/svg%3E');
  --ico-warn: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EStudio warn%3C/title%3E%3Cpath d="M10.3 4.2 2.9 17.4c-.8 1.4.2 3.1 1.8 3.1h14.6c1.6 0 2.6-1.7 1.8-3.1L13.7 4.2c-.8-1.4-2.6-1.4-3.4 0z" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3Cpath d="M12 9.2v4.6" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3Ccircle cx="12" cy="17.1" r="1.15"/%3E%3C/svg%3E');
  --ico-info: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EStudio info%3C/title%3E%3Ccircle cx="12" cy="12" r="9.2" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3Cpath d="M12 11v5.6" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3Ccircle cx="12" cy="7.8" r="1.15"/%3E%3C/svg%3E');
  --ico-ok: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EStudio ok%3C/title%3E%3Ccircle cx="12" cy="12" r="9.2" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3Cpath d="M8.2 12.3l2.6 2.6 5-5.4" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9"/%3E%3C/svg%3E');
}
:root[data-skin="pico"] {
  --ico-err: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EPico err%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M8.6 8.6l6.8 6.8m0-6.8-6.8 6.8" stroke="%23000" stroke-width="2.4" stroke-linecap="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3C/g%3E%3C/svg%3E');
  --ico-warn: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EPico warn%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M12 9.4v4.4" stroke="%23000" stroke-width="2.4" stroke-linecap="round"/%3E%3Ccircle cx="12" cy="17.4" r="1.5" fill="%23000"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Cpath d="M10.2 3.6 1.9 18c-.8 1.4.2 3.2 1.8 3.2h16.6c1.6 0 2.6-1.8 1.8-3.2L13.8 3.6c-.8-1.4-2.8-1.4-3.6 0z"/%3E%3C/g%3E%3C/svg%3E');
  --ico-info: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EPico info%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Ccircle cx="12" cy="7.6" r="1.5" fill="%23000"/%3E%3Cpath d="M12 11v6" stroke="%23000" stroke-width="2.4" stroke-linecap="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3C/g%3E%3C/svg%3E');
  --ico-ok: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EPico ok%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M7.8 12.4l2.8 2.8 5.6-6" fill="none" stroke="%23000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3C/g%3E%3C/svg%3E');
}
:root[data-skin="mvp"] {
  --ico-err: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EMVP err%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M8.6 8.6l6.8 6.8m0-6.8-6.8 6.8" stroke="%23000" stroke-width="3" stroke-linecap="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Crect x="2" y="2" width="20" height="20" rx="5.5"/%3E%3C/g%3E%3C/svg%3E');
  --ico-warn: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EMVP warn%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M12 7.4v5" stroke="%23000" stroke-width="3" stroke-linecap="round"/%3E%3Ccircle cx="12" cy="16.2" r="1.8" fill="%23000"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Crect x="4.2" y="4.2" width="15.6" height="15.6" rx="3.6" transform="rotate(45 12 12)"/%3E%3C/g%3E%3C/svg%3E');
  --ico-info: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EMVP info%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Ccircle cx="12" cy="7.6" r="1.8" fill="%23000"/%3E%3Cpath d="M12 11v6" stroke="%23000" stroke-width="3" stroke-linecap="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Crect x="2" y="2" width="20" height="20" rx="5.5"/%3E%3C/g%3E%3C/svg%3E');
  --ico-ok: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3EMVP ok%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M7.8 13l2.8 2.8 5.6-6" fill="none" stroke="%23000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Crect x="2" y="2" width="20" height="20" rx="5.5"/%3E%3C/g%3E%3C/svg%3E');
}
:root[data-skin="new"] {
  --ico-err: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3Enew.css err%3C/title%3E%3Cpath d="M6 6l12 12M18 6 6 18" fill="none" stroke="%23000" stroke-width="2.6" stroke-linecap="square"/%3E%3C/svg%3E');
  --ico-warn: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3Enew.css warn%3C/title%3E%3Cpath d="M12 3.5v11" fill="none" stroke="%23000" stroke-width="2.6" stroke-linecap="square"/%3E%3Crect x="10.7" y="18" width="2.6" height="2.6"/%3E%3C/svg%3E');
  --ico-info: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3Enew.css info%3C/title%3E%3Crect x="10.7" y="3.4" width="2.6" height="2.6"/%3E%3Cpath d="M8.5 9.6H12v10.8M8.5 20.4h7" fill="none" stroke="%23000" stroke-width="2.6" stroke-linecap="square"/%3E%3C/svg%3E');
  --ico-ok: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3Enew.css ok%3C/title%3E%3Cpath d="M4 12.6l5.2 5.2L20 7" fill="none" stroke="%23000" stroke-width="2.6" stroke-linecap="square" stroke-linejoin="miter"/%3E%3C/svg%3E');
}
:root[data-skin="sakura"] {
  --ico-err: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3ESakura err%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M9.7 9.7l4.6 4.6m0-4.6-4.6 4.6" stroke="%23000" stroke-width="2.5" stroke-linecap="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Cpath transform="rotate(0 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(72 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(144 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(216 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(288 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Ccircle cx="12" cy="12" r="5.9"/%3E%3C/g%3E%3C/svg%3E');
  --ico-warn: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3ESakura warn%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M12 8.4v3.8" stroke="%23000" stroke-width="2.5" stroke-linecap="round"/%3E%3Ccircle cx="12" cy="15.5" r="1.4" fill="%23000"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Cpath transform="rotate(0 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(72 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(144 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(216 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(288 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Ccircle cx="12" cy="12" r="5.9"/%3E%3C/g%3E%3C/svg%3E');
  --ico-info: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3ESakura info%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Ccircle cx="12" cy="8.6" r="1.4" fill="%23000"/%3E%3Cpath d="M12 11.6v3.9" stroke="%23000" stroke-width="2.5" stroke-linecap="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Cpath transform="rotate(0 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(72 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(144 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(216 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(288 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Ccircle cx="12" cy="12" r="5.9"/%3E%3C/g%3E%3C/svg%3E');
  --ico-ok: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Ctitle%3ESakura ok%3C/title%3E%3Cmask id="k"%3E%3Crect width="24" height="24" fill="%23fff"/%3E%3Cpath d="M9.2 12.1l2 2 3.8-4.2" fill="none" stroke="%23000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/mask%3E%3Cg mask="url(%23k)"%3E%3Cpath transform="rotate(0 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(72 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(144 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(216 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Cpath transform="rotate(288 12 12)" d="M12 12C8.2 9.4 7.8 4.6 9.7 2.5c.8-.9 1.7-.7 2.3.5.6-1.2 1.5-1.4 2.3-.5 1.9 2.1 1.5 6.9-2.3 9.5z"/%3E%3Ccircle cx="12" cy="12" r="5.9"/%3E%3C/g%3E%3C/svg%3E');
}
/* generated:end */

/* which sign each message gets */
.sico, .notice.warn { --ico: var(--ico-warn); }
.sico.err, .notice.bad { --ico: var(--ico-err); }
.sico.info, .notice.info { --ico: var(--ico-info); }
.sico.ok, .notice.ok { --ico: var(--ico-ok); }

/* clean styles: a mask in the text colour */
.sico, .notice::before {
  content: ""; display: inline-block; flex: none; width: var(--ico-size); height: var(--ico-size);
  background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
/* retro OS styles: the full-colour picture, pixel art kept sharp (written out: :is() cannot hold ::before) */
[data-skin="system"] .sico, [data-skin="win98"] .sico, [data-skin="xp"] .sico, [data-skin="win7"] .sico,
[data-skin="system"] .notice::before, [data-skin="win98"] .notice::before, [data-skin="xp"] .notice::before, [data-skin="win7"] .notice::before {
  background: var(--ico) center / contain no-repeat; -webkit-mask: none; mask: none;
}
[data-skin="system"] .sico, [data-skin="win98"] .sico,
[data-skin="system"] .notice::before, [data-skin="win98"] .notice::before { image-rendering: pixelated; }

/* the sign sits on the first line of text, however the text wraps */
.notice::before { margin-top: 2px; margin-top: calc(.5lh - var(--ico-size) / 2); }
/* status lines (Generate plan, overlap with other forms): sign, then text, wrapped lines aligned */
.sline { display: flex; gap: .45rem; align-items: flex-start; }
.sline > .sico { margin-top: 2px; margin-top: calc(.5lh - var(--ico-size) / 2); }
.sline > .sline-mark { flex: none; width: var(--ico-size); text-align: center; color: var(--muted); }
.sline > .sico.ok { color: var(--ok-fg); }
.sline > .sico.warn { color: var(--warn-fg); }
.sline > .sico.err { color: var(--bad-fg); }
.sline > .sico.info { color: var(--accent); }

/* dialogs: a large sign beside the message, as in a classic message box */
.modal-msg { display: flex; gap: 14px; align-items: flex-start; }
.modal-msg .sico { --ico-size: var(--ico-big); margin-top: 2px; }
.modal-msg .sico.err { color: var(--bad-fg); }
.modal-msg .sico.warn { color: var(--warn-fg); }
.modal-msg .sico.info { color: var(--accent); }
.modal-msg-body { flex: 1 1 auto; min-width: 0; }
.modal-msg-body > :first-child { margin-top: 0; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--surface); margin-top: 1rem; }
.foot-inner { max-width: 1240px; margin: 0 auto; padding: 1.4rem 1.5rem 1.8rem; display: grid; gap: .6rem; }
.foot-owner { margin: 0; max-width: 80ch; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }
.foot-owner b { color: var(--ink); }
.foot-kicker { display: block; font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 1rem; margin-bottom: .1rem; }
.foot-meta { margin: .2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 0; font-size: .85rem; color: var(--muted); }
.foot-meta > * + *::before { content: "·"; display: inline-block; margin: 0 .65rem; color: var(--muted); text-decoration: none; }
.foot-meta a, .foot-meta button.link { color: var(--accent); font-weight: 500; text-underline-offset: 3px; font-size: inherit; }
.foot-meta time { font-variant-numeric: tabular-nums; }
.foot-legal { margin: 0; font-size: .78rem; color: var(--muted); }
@media (max-width: 560px) { .foot-meta { flex-direction: column; align-items: flex-start; } .foot-meta > * + *::before { content: none; } }

@media (max-width: 860px) {
  .review { grid-template-columns: 1fr; }
  .review-side { position: static; }
  .grid-2, .gen-row, .edit-grid, .export-docs { grid-template-columns: 1fr; }
  .stepper li { min-width: 0; }
  .stepper button { font-size: 0; gap: 0; justify-content: center; padding: .45rem; }
  .stepper button span { font-size: .85rem; }
}

/* =====================================================================
   The paper itself (screen preview and print)
   ===================================================================== */
.paper { --pp-size: 10.5pt; width: 8.5in; min-height: 11in; padding: .75in; background: #fff; color: #000; font: var(--pp-size)/1.42 var(--paper); }
.paper.pp-a4 { width: 210mm; min-height: 297mm; }
.paper.pp-large { --pp-size: 14pt; }
.paper code { font-family: var(--paper-mono); font-size: .95em; }
.paper img { max-width: 100%; height: auto; }
.paper table:not(.pp-key) { border-collapse: collapse; margin: .3em 0; }
.paper table:not(.pp-key) td, .paper table:not(.pp-key) th { border: 1px solid #888; padding: .15em .5em; }
.paper math { font-size: 1.08em; }
/* header (compact, on page 1) */
.pp-head { margin-bottom: 1.1em; }
.pp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; padding-bottom: .7em; border-bottom: 2pt solid #000; }
.pp-course { font-size: 1.05em; font-weight: 600; color: #333; letter-spacing: .02em; }
.pp-head h1, .pp-cover h1 { font-size: 2.1em; line-height: 1.15; margin: .12em 0 .05em; font-weight: 700; }
.pp-doc { font-weight: 600; font-size: 1.25em; color: #222; }
.pp-code { border: 2.5pt solid #000; padding: .25em .9em .3em; text-align: center; min-width: 5.8em; flex: none; }
.pp-code small { display: block; font-size: .8em; letter-spacing: .18em; font-weight: 700; color: #333; text-transform: uppercase; }
.pp-code b { display: block; font-size: 2.7em; line-height: 1.05; }
.pp-info { display: flex; border: 1pt solid #000; border-top: 0; }
.pp-info > div { flex: 1; padding: .4em .9em .45em; border-left: 1pt solid #000; }
.pp-info > div:first-child { border-left: 0; }
.pp-info small { display: block; font-size: .88em; color: #444; }
.pp-info b { display: block; font-size: 1.35em; line-height: 1.2; }
.pp-fields { display: flex; gap: 1.8em; margin: 1.3em 0 1.1em; }
.pp-field { flex: 1; display: flex; align-items: flex-end; gap: .5em; font-weight: 700; font-size: 1.1em; }
.pp-field i { flex: 1; border-bottom: 1pt solid #000; height: 1.9em; }
.pp-instr { background: #f3f3f3; border-left: 3pt solid #555; padding: .65em 1em .7em; margin: .3em 0 1em; font-size: 1.1em; line-height: 1.5; }
.pp-instr b:first-child { display: block; font-size: 1.02em; margin-bottom: .15em; }
.pp-instr ul, .pp-instr ol { margin: .2em 0; padding-left: 1.5em; }
.pp-note { font-size: 1.02em; color: #111; margin: .2em 0 1.2em; padding: .45em .8em; border: 1pt solid #999; border-radius: 3pt; }
/* cover page */
.pp-cover { text-align: center; padding-top: .1in; margin-bottom: 1.2em; }
.pp-cover .pp-course { font-size: 1.3em; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.pp-cover h1 { font-size: 2.9em; margin: .25em 0 .1em; }
.pp-cover .pp-doc { font-size: 1.45em; font-weight: 400; color: #333; }
.pp-cover .pp-code { display: inline-block; margin: .8em auto 1.1em; padding: .3em 1.6em .4em; }
.pp-cover .pp-code b { font-size: 3.8em; }
.pp-cover .pp-info { border-top: 1pt solid #000; max-width: 5.4in; margin: 0 auto; }
.pp-cover .pp-info b { font-size: 1.55em; }
.pp-fields-stacked { flex-direction: column; gap: .9em; max-width: 5.6in; margin: 1.5em auto 1.4em; }
.pp-fields-stacked .pp-field { font-size: 1.3em; }
.pp-fields-stacked .pp-field span { width: 6.2em; text-align: left; }
.pp-fields-stacked .pp-field i { height: 2.1em; }
.pp-instr-cover { font-size: 1.25em; line-height: 1.5; padding: .8em 1.2em .9em; margin: 0 0 1em; }
.pp-note-cover { font-size: 1.2em; padding: .6em 1em; }
.pp-callout { text-align: center; font-weight: 700; font-size: 1.35em; margin: 1.4em 0 0; padding: .6em 0; border-top: 1.5pt solid #000; border-bottom: 1.5pt solid #000; }
table.pp-grade { border-collapse: collapse; font-size: 1.15em; flex: none; }
.pp-cover-row { display: flex; gap: 2.2em; align-items: flex-start; margin: 1.5em 0 1.4em; }
.pp-cover-row .pp-fields-stacked { flex: 1; margin: 0; max-width: none; }
.pp-grade caption { text-align: left; font-weight: 700; padding-bottom: .3em; }
.pp-grade th, .pp-grade td { border: 1pt solid #000; padding: .35em .8em; text-align: left; }
.pp-grade th { background: #eee; }
.pp-grade td:nth-child(2), .pp-grade th:nth-child(2) { text-align: center; width: 5em; }
.pp-grade td:nth-child(3), .pp-grade th:nth-child(3) { width: 5.5em; }
.pp-grade tfoot td { font-weight: 700; }
.pp-section { font-weight: 700; font-size: 1.15em; line-height: 1.3; font-family: inherit; border-bottom: 1pt solid #000; padding-bottom: .15em; margin: 1.2em 0 .5em; break-after: avoid; }
.pp-section small { font-weight: 400; color: #555; font-size: .78em; margin-left: .6em; }
.pp-q { margin: .55em 0 .9em; break-inside: avoid; page-break-inside: avoid; }
.pp-stem { display: flex; gap: .55em; align-items: baseline; }
.pp-n { font-weight: 700; min-width: 1.6em; flex: none; }
.pp-stem-text { flex: 1; }
.pp-pts { color: #555; font-size: .88em; white-space: nowrap; }
.pp-hint { font-style: italic; color: #444; font-size: .9em; margin: .15em 0 .2em 2.15em; }
.pp-choices { list-style: none; margin: .25em 0 0 2.15em; padding: 0; }
.pp-choices li { display: flex; gap: .55em; margin: .12em 0; align-items: baseline; }
.pp-choices.pp-inline { display: flex; gap: 2.5em; }
.pp-lab { font-weight: 700; min-width: 1.3em; flex: none; }
.pp-circle { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; min-width: 0; border: 1pt solid #000; border-radius: 50%; font-size: .85em; }
.pp-match { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5em; margin: .3em 0 0 2.15em; }
.pp-match ol { list-style: none; padding: 0; margin: 0; }
.pp-match li { display: flex; gap: .45em; align-items: baseline; margin: .18em 0; }
.pp-blank { display: inline-block; width: 3em; border-bottom: 1pt solid #000; flex: none; }
/* a row whose content opens with a picture: number and label at the picture's top, not its bottom edge */
.pp-stem.pp-pic-first, .pp-choices li.pp-pic-first, .pp-match li.pp-pic-first { align-items: flex-start; }
.pp-pic-first > .pp-pts { line-height: 1.614; } /* same line box as the 1.42 body text at .88em */
.pp-pic-first > .pp-circle { margin-top: .11em; }
.pp-pic-first > .pp-blank { height: 1.02em; }
.pp-wides { display: flex; flex-wrap: wrap; gap: .4em 1.6em; margin: .55em 0 0 2.15em; }
.pp-wides span { display: flex; align-items: flex-end; gap: .35em; min-width: 40%; }
.pp-wides small { color: #444; font-size: .85em; }
.pp-wides i { flex: 1; border-bottom: 1pt solid #000; height: 1.5em; min-width: 9em; }
.pp-lines { margin: .3em 0 0 2.15em; }
.pp-lines i { display: block; height: 2.05em; border-bottom: .75pt solid #777; }
.pp-large .pp-lines i { height: 2.4em; }
.pp-end { text-align: center; font-size: 1.05em; margin-top: 2em; padding-top: .7em; border-top: 1pt solid #999; break-inside: avoid; }
.pp-break { break-after: page; page-break-after: always; height: 0; }
/* answer sheet */
.pp-grid { columns: 3; column-gap: 1.2em; margin: .6em 0 1.2em; }
.pp-row { display: flex; align-items: center; gap: .3em; break-inside: avoid; padding: .22em 0; }
.pp-row .pp-n { min-width: 2.1em; }
.pp-bubble { display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; border: 1pt solid #000; border-radius: 50%; font-size: .78em; color: #333; }
.pp-bubble.pp-sq { border-radius: 3px; }
.pp-row em { font-size: .72em; color: #555; margin-left: .2em; }
.pp-box { display: inline-block; width: 2.2em; height: 1.7em; border: 1pt solid #000; vertical-align: middle; }
.pp-box.pp-wide { width: 4.4em; }
.pp-row small { color: #777; font-size: .75em; }
.pp-sitem { display: flex; gap: .4em; align-items: flex-start; margin: .5em 0 .9em; break-inside: avoid; }
.pp-sitem .pp-wides, .pp-sitem .pp-lines { margin-left: 0; margin-top: 0; flex: 1; }
.pp-sitem.pp-essay { display: block; }
.pp-sitem.pp-essay .pp-lines { margin-left: 2.15em; }
.pp-boxes { display: flex; flex-wrap: wrap; gap: .5em 1.1em; }
.pp-boxes span { display: flex; align-items: center; gap: .3em; }
.pp-boxes small { font-weight: 700; }
.pp-score { display: flex; justify-content: space-between; border-top: 1pt solid #000; margin-top: 2em; padding-top: .5em; font-size: .9em; }
.pp-score span:first-child { font-weight: 700; }
/* key */
table.pp-key { width: 100%; border-collapse: collapse; margin: .5em 0 1.2em; font-size: .95em; }
.pp-key th, .pp-key td { border: .75pt solid #999; padding: .2em .45em; text-align: left; vertical-align: top; }
.pp-key thead th { background: #eee; }
.pp-key thead { display: table-header-group; }
.pp-key tr { break-inside: avoid; }
.pp-key td.pp-ans { font-weight: 700; font-size: 1.05em; }
.pp-key tfoot td { font-weight: 700; }
.pp-sample, .pp-rubric { margin: .35em 0 0 2.15em; }
.pp-sample > div { background: #f3f3f3; padding: .3em .6em; margin-top: .15em; }
.pp-muted { color: #777; font-style: italic; }

/* =====================================================================
   Printing: only the paper
   ===================================================================== */
#print-root { display: none; }
@media print {
  body.printing #app, body.printing .modal, body.printing .toast { display: none !important; }
  body.printing { background: #fff; }
  body.printing #print-root { display: block; }
  #print-root .paper { width: auto; min-height: 0; padding: 0; box-shadow: none; }
  #print-root .paper + .paper { break-before: page; }
  .pp-tools { display: none !important; }
}

/* ---------- WYSIWYG fields ---------- */
.wy { border: 1px solid var(--field-line); border-radius: 8px; background: var(--field); margin-top: .25rem; position: relative; }
.wy:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wy-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; padding: .3rem .35rem; border-bottom: 1px solid var(--line-2); background: var(--surface-2); border-radius: 8px 8px 0 0; }
.wy-btn { min-width: 2rem; height: 1.9rem; padding: 0 .45rem; border-color: transparent; background: transparent; font-size: .92rem; line-height: 1; color: var(--ink); }
.wy-btn:hover { background: var(--field); border-color: var(--line); }
.wy-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.wy-btn small { font-size: .65em; }
.wy-sep { width: 1px; height: 1.2rem; background: var(--line); margin: 0 .25rem; }
.wy-area { min-height: 5.5rem; padding: .6rem .75rem; outline: none; font: 1rem/1.55 var(--paper); color: var(--field-ink); font-weight: 400; overflow-wrap: anywhere; }
.wy-area.wy-compact { min-height: 0; }
.wy-area ul, .wy-area ol { margin: .2rem 0; padding-left: 1.6rem; }
.wy-area.wy-empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; position: absolute; }
.wy-math { display: inline-block; padding: 0 .2rem; margin: 0 .05rem; border-radius: 4px; background: var(--accent-soft); cursor: pointer; }
.wy-math:hover { outline: 1px solid var(--accent); }
.wy-mpanel { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .6rem; border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.wy-mpanel label { display: flex; align-items: center; gap: .4rem; flex: 1 1 260px; margin: 0; }
.wy-mpanel input { margin: 0 !important; }
.wy-mprev { min-width: 3rem; font-size: 1.05rem; }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .9rem; }
.field-row label { margin: 0; }
/* show where the cover page ends in the on-screen preview */
.paper-stage .pp-break { height: 0; border-top: 2px dashed #b9b2a2; margin: 2.2em -.75in 2em; position: relative; }
.paper-stage .pp-break::after { content: 'page break'; position: absolute; left: 50%; top: -.75em; transform: translateX(-50%); background: #fff; padding: 0 .6em; font: .75rem var(--sans); color: #8a8270; }
.wy-area code { font-family: var(--paper-mono); font-size: .92em; background: var(--tint); color: var(--field-ink); border-radius: 3px; padding: 0 .2em; }
.wy-area table { border-collapse: collapse; margin: .3rem 0; }
.wy-area td, .wy-area th { border: 1px solid var(--muted); padding: .15rem .45rem; min-width: 2.5rem; }
.wy-area th { background: var(--tint); text-align: left; } /* as printed: headings start left */
.wy-area img { max-width: 100%; height: auto; vertical-align: middle; }
.wy-display { display: block; text-align: center; margin: .2rem 0; padding: .2rem; }
.wy-blank { display: inline-block; min-width: 3.2em; padding: 0 .45em; margin: 0 .1em; border-bottom: 1.5px solid var(--ink); background: var(--hl); border-radius: 3px 3px 0 0; font-size: .85em; color: var(--ink-2); text-align: center; cursor: pointer; }
.wy-blank::before { content: '['; color: var(--muted); }
.wy-blank::after { content: ']'; color: var(--muted); }
.wy-mdisp { display: flex !important; align-items: center; gap: .3rem; margin: 0 !important; flex: none !important; font-weight: 400; }
.wy-mpanel input.mono { font-family: var(--mono); }
/* mini fields (answer choices, matching): toolbar only while editing */
.wy-mini .wy-bar { display: none; position: absolute; left: -1px; bottom: calc(100% - 1px); z-index: 6; border: 1px solid var(--accent); border-radius: 8px 8px 0 0; box-shadow: 0 -2px 8px rgba(31,42,68,.08); }
.wy-mini:focus-within .wy-bar { display: flex; }
.wy-mini .wy-mpanel { position: absolute; left: -1px; right: -1px; top: calc(100% - 1px); z-index: 6; border: 1px solid var(--accent); border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(31,42,68,.12); }
.wy-mini .wy-area { padding: .4rem .6rem; }
.wy-area.wy-compact { min-height: 0; }
.wy-q .wy-area { min-height: 6rem; }
.modal-box.wide { width: min(1120px, 100%); }
.field-label { font-size: .88rem; color: var(--ink-2); font-weight: 500; margin-top: .7rem; }
.field-label:first-child { margin-top: 0; }
.edit-grid > div:last-child { position: sticky; top: 0; align-self: start; }
.edit-grid .wy-q { margin-bottom: .4rem; }
.opt-row { align-items: start; }
.opt-row > input, .opt-row > .lab, .opt-row > button { margin-top: .55rem; }
.pair-row { align-items: start; }
.pair-row > button { margin-top: .4rem; }
.pair-row.pair-one { grid-template-columns: 1fr auto; }

/* ---------- question editor layout ---------- */
.ed-fields { min-width: 0; }
.ed-sec + .ed-sec { margin-top: 1.25rem; }
.ed-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .45rem; }
.ed-title { font-weight: 600; font-size: .92rem; color: var(--ink); }
.ed-hint { font-size: .8rem; color: var(--muted); margin-left: auto; text-align: right; }
.ed-list { display: grid; gap: .45rem; }
.ed-row { display: grid; grid-template-columns: 1.6rem 1.6rem minmax(0, 1fr) 2rem; gap: .45rem; align-items: start; }
.ed-pairs .ed-row { grid-template-columns: 1.6rem minmax(0, 1fr) minmax(0, 1fr) 2rem; }
.ed-extras .ed-row { grid-template-columns: 1.6rem minmax(0, 1fr) 2rem; }
.ed-blanks .ed-row { grid-template-columns: 1.6rem auto minmax(0, 1fr) 0; align-items: center; }
.ed-row .wy { margin-top: 0; }
.ed-mark, .ed-lab { height: 2.4rem; display: grid; place-items: center; }
.ed-mark input { margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--green); cursor: pointer; }
.ed-lab { font-family: var(--serif); font-weight: 700; color: var(--ink-2); border-radius: 6px; }
.ed-lab.ok { background: var(--pick-bg); color: var(--pick-fg); }
.ed-muted { color: var(--muted); font-family: var(--sans); font-weight: 400; }
.ed-bname { font-family: var(--mono); font-size: .85rem; background: var(--hl); border-bottom: 1.5px solid var(--ink); padding: .1rem .45rem; border-radius: 3px 3px 0 0; }
.ed-blanks input { margin: 0 !important; }
.ed-x { width: 2rem; height: 2.4rem; padding: 0; border-color: transparent; background: transparent; color: var(--muted); font-size: 1.25rem; line-height: 1; }
.ed-x:hover { color: var(--red); background: var(--red-soft); border-color: transparent; }
.ed-colhead { margin-bottom: -.2rem; }
.ed-colhead span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.ed-addrow { align-items: center; }
.ed-add { width: 100%; display: flex; align-items: center; gap: .55rem; text-align: left; border: 1.5px dashed var(--dash); background: transparent; color: var(--accent); padding: .45rem .75rem; border-radius: 8px; font-weight: 500; }
.ed-add:hover { border-color: var(--accent); background: var(--accent-soft); }
.ed-span2 { grid-column: span 2; }
.ed-plus { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--accent); color: var(--surface); font-weight: 700; font-size: .9rem; line-height: 1; }
.ed-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ed-seg button { border: 0; border-radius: 0; padding: .45rem 1.3rem; background: var(--field); }
.ed-seg button + button { border-left: 1px solid var(--line); }
.ed-seg button.on { background: var(--pick-bg); color: var(--pick-fg); font-weight: 600; }
.ed-inline { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; max-width: 24rem; }
.ed-meta { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.3rem; padding-top: .9rem; border-top: 1px dashed var(--line); }
.ed-meta label { display: flex; align-items: center; gap: .5rem; color: var(--ink); }
.ed-meta input { width: 5.5rem !important; margin: 0 !important; }
.ed-empty { margin: 0; color: var(--muted); font-size: .9rem; }
.ed-side { position: sticky; top: 0; align-self: start; }
.ed-side .ed-title { display: block; margin-bottom: .45rem; }
.wy-mini .wy-area { padding: .45rem .6rem; min-height: 2.4rem; line-height: 1.45; }

/* ---------- picture and table tools ---------- */
.wy-ico { font-size: 1.05rem; line-height: 1; }
.wy-pic { cursor: pointer; border-radius: 2px; }
.wy-pic.selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.wy-area.wy-drop { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--accent-soft); }
.wy-ppanel, .wy-tpanel { display: grid; gap: .55rem; align-items: stretch; }
.wy-ptitle { font-weight: 600; font-size: .9rem; }
.wy-ptitle small { font-weight: 400; color: var(--muted); margin-left: .3rem; }
.wy-prow { display: grid !important; grid-template-columns: 6.5rem 1fr; gap: .3rem .6rem; align-items: center; margin: 0 !important; font-weight: 400; color: var(--ink); }
.wy-prow > span { font-size: .85rem; color: var(--ink-2); }
.wy-prow input[type=text] { margin: 0 !important; }
.wy-size { display: flex; align-items: center; gap: .6rem; }
.wy-size input[type=range] { flex: 1; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.wy-size-label { font-size: .8rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wy-presets { grid-column: 2; display: flex; gap: .3rem; flex-wrap: wrap; }
.wy-seg { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.wy-seg .on, .wy-presets .on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.wy-pactions { display: flex; justify-content: flex-end; gap: .4rem; flex-wrap: wrap; }
.wy-tpick { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.wy-tgrid { display: grid; gap: 3px; }
.wy-tgrid button { width: 1.35rem; height: 1.35rem; padding: 0; border-radius: 3px; border: 1px solid var(--line); background: var(--field); }
.wy-tgrid button.on { background: var(--accent-soft); border-color: var(--accent); }
.wy-tside { display: grid; gap: .45rem; align-content: start; }
.wy-tside label { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 400; color: var(--ink); }
.wy-tside input[type=number] { width: 4.5rem; margin: 0 !important; }
.wy-tside select { width: auto; margin: 0; }
.wy-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; padding: .25rem .4rem; border-bottom: 1px solid var(--line-2); background: var(--accent-soft); }
.wy-tlabel { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; margin-right: .3rem; }
.wy-tb { font-size: .8rem; min-width: 0; height: 1.75rem; padding: 0 .5rem; }
.wy-area table.wy-cur { outline: 2px solid var(--accent-soft); }
.wy-mini .wy-tbar { display: none; }
/* column text alignment: segmented, the current column's choice pressed (outline + fill, not colour alone) */
.wy-tgroup { display: inline-flex; gap: 1px; }
.wy-tbar .wy-tgroup .wy-tb { padding: 0 .4rem; }
.wy-tbar .wy-btn.on { background: var(--surface); border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wy-aico { display: block; }
[data-skin="system"] .wy-tbar .wy-btn.on { background: #000; color: #fff; border-color: #000; box-shadow: none; }
[data-skin="win98"] .wy-tbar .wy-btn.on { background: #dfdfdf; color: #000; box-shadow: var(--in); border-color: transparent; }

/* =====================================================================
   APPEARANCE: Style (data-skin) and Day / Night / Auto (data-theme).
   js/theme.js sets both before the page paints. The paper preview and
   everything printed stay black on white in every style.
   Each look is re-created in this page's own CSS (no framework files are
   loaded), inspired by the projects named in Credits. The retro operating
   system looks are light-only; the others have Day and Night.
   ===================================================================== */
.topbar .top-actions { margin-left: auto; align-items: center; }
.top-actions .divider { width: 1px; align-self: stretch; margin: .3rem .15rem; background: var(--line); }
.appearance { display: flex; align-items: center; gap: .6rem; }
.skin-pick { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-2); font-weight: 500; }
.skin-pick label { display: inline; margin: 0; color: inherit; font: inherit; text-shadow: inherit; }
.skin-pick select { display: inline-block; width: auto; margin: 0; padding: .3rem .5rem; font-size: .88rem; max-width: 13rem; }
.theme-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--surface-2); }
.theme-switch button { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: transparent; color: var(--muted); padding: .25rem .55rem; min-height: 1.9rem; border-radius: 6px; font-size: .84rem; font-weight: 500; }
.theme-switch button:hover { color: var(--ink); border: 0; }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.theme-switch button:disabled { opacity: .4; }
.theme-switch svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.theme-switch svg .fill { fill: currentColor; stroke: none; }
@media (max-width: 1320px) { .theme-switch span { display: none; } }
@media (max-width: 1080px) { .topbar { flex-wrap: wrap; } .topbar .top-actions { margin-left: 0; } }
/* very narrow screens (or 400% zoom): the Style menu and Day/Night switch take their own lines */
@media (max-width: 560px) { .topbar { padding-left: .8rem; padding-right: .8rem; } .appearance { flex-wrap: wrap; } .skin-pick, .skin-pick select { max-width: 100%; } }

/* credits */
.credits h3 { font-size: 1.02rem; margin: 1.2rem 0 .5rem; }
.credits > p:first-child { margin-top: 0; }
.credits-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.credits-list li { font-size: .92rem; line-height: 1.45; }
.credits-list a { font-weight: 600; }
.credits-list .what { display: block; color: var(--ink-2); }
.fineprint { font-size: .82rem; color: var(--muted); margin: .7rem 0 0; }

/* ---------- Paper (original): Night ---------- */
@media (prefers-color-scheme: dark) { :root[data-skin="paper"]:not([data-theme="light"]) { --bg: #12151c; --surface: #1a1e27; --surface-2: #20252f; --field: #151922; --field-ink: #ecebe6; --ink: #ecebe6; --ink-2: #b9bfcc; --muted: #8b92a3;
    --line: #363d4c; --line-2: #282e3a; --accent: #8db4ec; --accent-soft: #22314a; --red: #f19580; --red-soft: #3b2420; --green: #7fcb92; --green-soft: #1d3324;
    --amber: #e9b75f; --amber-soft: #392e16; --primary: #e8e4d8; --primary-hover: #ffffff; --primary-ink: #12151c; --stage: #0b0d12; --hl: #4b4120;
    --drop-lines: #1f2430; --dash: #4a5163; --warn-ink: #f3d39a; --bad-ink: #f6b9aa; --ok-ink: #b5e2c0; --shadow: 0 1px 3px rgba(0,0,0,.45); color-scheme: dark; } }
:root[data-skin="paper"][data-theme="dark"] { --bg: #12151c; --surface: #1a1e27; --surface-2: #20252f; --field: #151922; --field-ink: #ecebe6; --ink: #ecebe6; --ink-2: #b9bfcc; --muted: #8b92a3;
    --line: #363d4c; --line-2: #282e3a; --accent: #8db4ec; --accent-soft: #22314a; --red: #f19580; --red-soft: #3b2420; --green: #7fcb92; --green-soft: #1d3324;
    --amber: #e9b75f; --amber-soft: #392e16; --primary: #e8e4d8; --primary-hover: #ffffff; --primary-ink: #12151c; --stage: #0b0d12; --hl: #4b4120;
    --drop-lines: #1f2430; --dash: #4a5163; --warn-ink: #f3d39a; --bad-ink: #f6b9aa; --ok-ink: #b5e2c0; --shadow: 0 1px 3px rgba(0,0,0,.45); color-scheme: dark; }

/* ---------- System (classic Mac, after System.css) ---------- */
:root[data-skin="system"] {
  --bg: #fff; --surface: #fff; --surface-2: #fff; --field: #fff; --field-ink: #000; --ink: #000; --ink-2: #000; --muted: #555;
  --line: #000; --line-2: #000; --accent: #000; --accent-soft: #e4e4e4; --red: #a00000; --red-soft: #fff; --green: #1b6b2a; --green-soft: #e8f1e9;
  --amber: #5c4400; --amber-soft: #fff; --primary: #000; --primary-hover: #333; --primary-ink: #fff; --stage: #bdbdbd; --hl: #e4e4e4;
  --drop-lines: #eee; --dash: #000; --warn-ink: #000; --bad-ink: #a00000; --ok-ink: #000; --shadow: none; --radius: 0;
  --sans: "Geneva", "Chicago", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Chicago", "Charcoal", "Geneva", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* 1-bit: no hues. Status is told by the sign and the frame (solid = ok, dashed = check, double = problem, dotted = note);
   the chosen answer is inverted, like the current step and pressed buttons. */
:root[data-skin="system"] {
  --red: #000; --red-soft: #fff; --green: #000; --green-soft: #fff; --amber: #000; --amber-soft: #fff; --tint: #e4e4e4;
  --ok-bg: #fff; --ok-fg: #000; --ok-line: 1px solid #000;
  --warn-bg: #fff; --warn-fg: #000; --warn-line: 1px dashed #000;
  --bad-bg: #fff; --bad-fg: #000; --bad-line: 3px double #000;
  --info-bg: #fff; --info-fg: #000; --info-line: 1px dotted #000;
  --pick-bg: #000; --pick-fg: #fff;
}
[data-skin="system"] .ed-x:hover { background: #000; color: #fff; }
[data-skin="system"] body { background: radial-gradient(#a8a8a8 .8px, transparent 1px) 0 0 / 4px 4px, #fff; }
[data-skin="system"] :is(#app, .modal) *:not(.paper, .paper *, button, .theme-switch) { border-radius: 0 !important; }
[data-skin="system"] .topbar { border-bottom: 2px solid #000; }
[data-skin="system"] :is(.card, .side-card, .pool-card, .modal-box, .empty) { border: 1px solid #000; box-shadow: 2px 2px 0 #000; background: #fff; }
[data-skin="system"] .pool-card { border-left-width: 4px; }
[data-skin="system"] :is(.card > h3:first-child, .modal-box > header) {
  display: flex; align-items: center; gap: .6rem; justify-content: center; font-size: 1rem; font-weight: 700;
  margin: -1.1rem -1.25rem .9rem; padding: .25rem .5rem; border-bottom: 1px solid #000;
}
[data-skin="system"] .modal-box > header { margin: 0 !important; }
[data-skin="system"] .modal-box > header h3 { margin: 0; font-size: 1rem; order: 1; }
[data-skin="system"] .modal-box > header .x { order: 0; width: 1.1rem; height: 1.1rem; padding: 0; border: 1px solid #000 !important; border-radius: 0 !important; font-size: 0; background: #fff; }
[data-skin="system"] :is(.card > h3:first-child, .modal-box > header h3)::before,
[data-skin="system"] :is(.card > h3:first-child, .modal-box > header h3)::after { content: ""; flex: 1 1 auto; height: 11px; background: repeating-linear-gradient(#000 0 1px, #fff 1px 2px); }
[data-skin="system"] .card > h3:first-child { display: flex; }
[data-skin="system"] .modal-box > header::after { content: ""; order: 2; width: 1.1rem; }
[data-skin="system"] .modal-box > header h3 { display: flex; align-items: center; gap: .6rem; flex: 1; }
[data-skin="system"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button) { border: 1px solid #000; border-radius: 6px; background: #fff; color: #000; font-weight: 700; box-shadow: none; }
[data-skin="system"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button):hover { background: #000; color: #fff; border-color: #000; }
[data-skin="system"] :is(#app, .modal) button.primary { background: #fff; color: #000; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; border-radius: 8px; margin: 3px; }
[data-skin="system"] :is(#app, .modal) button.primary:hover { background: #000; color: #fff; }
[data-skin="system"] .stepper button.active { background: #000; color: #fff; border-color: #000; border-radius: 6px; box-shadow: none; }
[data-skin="system"] .stepper button.active span { background: #fff; color: #000; border-color: #fff; }
[data-skin="system"] .stepper button { color: #000; }
[data-skin="system"] .stepper li:not(:has(.active)) button { background: #fff; border: 1px solid #000; border-radius: 6px; }
[data-skin="system"] .stepper button:not(.active, .done) span { border: 1.5px dotted #000; color: #000; }
[data-skin="system"] .stepper { --step-done: #000; --step-done-soft: #fff; --step-ring: #fff; }
[data-skin="system"] .stepper button.done span::after { border-radius: 0; width: .8rem; height: .8rem; right: -.55rem; bottom: -.5rem; }
[data-skin="system"] .step-head, [data-skin="system"] .sample-line { background: #fff; }
[data-skin="system"] .site-foot { border-top: 2px solid #000; }
[data-skin="system"] .step-head { padding: .3rem .6rem; border: 1px solid #000; }
[data-skin="system"] .wy-bar { border-bottom-color: #000; }
[data-skin="system"] .wy-btn:hover { background: #000; color: #fff; }
[data-skin="system"] .toast { background: #fff; color: #000; border: 1px solid #000; box-shadow: 2px 2px 0 #000; border-radius: 0; }
[data-skin="system"] .theme-switch, [data-skin="win98"] .theme-switch, [data-skin="xp"] .theme-switch, [data-skin="win7"] .theme-switch { opacity: .55; }

/* ---------- Windows 98 (after 98.css) ---------- */
:root[data-skin="win98"] {
  --bg: #008080; --surface: #c0c0c0; --surface-2: #c0c0c0; --field: #fff; --field-ink: #000; --ink: #000; --ink-2: #222; --muted: #404040;
  --line: #808080; --line-2: #a0a0a0; --accent: #000080; --accent-soft: #d4d8f0; --red: #b00000; --red-soft: #ffe2e2; --green: #006400; --green-soft: #d8f0d8;
  --amber: #6b4a00; --amber-soft: #fff3c4; --primary: #000080; --primary-hover: #0000a8; --primary-ink: #fff; --stage: #808080; --hl: #ffffe1;
  --drop-lines: #b8b8b8; --dash: #404040; --warn-ink: #4a3300; --bad-ink: #800000; --ok-ink: #004000; --shadow: none; --radius: 0;
  --sans: Tahoma, "MS Sans Serif", "Microsoft Sans Serif", Geneva, Verdana, sans-serif; --serif: var(--sans);
  --out: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --in: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --bar: linear-gradient(90deg, #000080, #1084d0);
}
/* Win98: messages in the system's own colours: a white status panel, tooltip yellow for "check this",
   maroon for errors, and navy selection for the chosen answer. */
:root[data-skin="win98"] {
  --tint: #dfdfdf;
  --ok-bg: #fff; --ok-fg: #000; --ok-line: 1px solid #808080;
  --warn-bg: #ffffe1; --warn-fg: #000; --warn-line: 1px solid #000;
  --bad-bg: #ffffe1; --bad-fg: #800000; --bad-line: 1px solid #800000;
  --info-bg: #fff; --info-fg: #000; --info-line: 1px solid #808080;
  --pick-bg: #000080; --pick-fg: #fff;
}
[data-skin="win98"] body { font-size: 14px; }
[data-skin="win98"] .ed-mark input { accent-color: #000; }
[data-skin="win98"] :is(#app, .modal) *:not(.paper, .paper *) { border-radius: 0 !important; }
[data-skin="win98"] .topbar { background: #c0c0c0; border-bottom: 0; box-shadow: var(--out); }
[data-skin="win98"] :is(.card, .side-card, .pool-card, .modal-box, .empty) { background: #c0c0c0; border: 0; box-shadow: var(--out); }
[data-skin="win98"] .pool-card { box-shadow: var(--out), inset 5px 0 0 var(--accent); padding-left: 1.2rem; }
[data-skin="win98"] .empty { color: #222; }
[data-skin="win98"] :is(.card > h3:first-child, .modal-box > header) { background: var(--bar); color: #fff; font-family: var(--sans); font-size: .95rem; font-weight: 700; margin: calc(-1.1rem + 3px) calc(-1.25rem + 3px) .9rem; padding: .25rem .45rem; }
[data-skin="win98"] .modal-box > header { margin: 3px 3px 0 !important; border-bottom: 0; }
[data-skin="win98"] .modal-box > header h3 { font-size: .95rem; font-family: var(--sans); }
[data-skin="win98"] .modal-box > header .x { background: #c0c0c0; color: #000; box-shadow: var(--out); width: 1.35rem; height: 1.2rem; font-size: 1rem; line-height: 1; padding: 0; }
[data-skin="win98"] .modal-box footer { border-top: 0; }
[data-skin="win98"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button), [data-skin="win98"] .ed-seg button, [data-skin="win98"] .stepper button { background: #c0c0c0; color: #000; border: 0; box-shadow: var(--out); font-weight: 400; }
[data-skin="win98"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button):active, [data-skin="win98"] .ed-seg button.on, [data-skin="win98"] :is(.form-tabs, .doc-tabs) button.active, [data-skin="win98"] .stepper button.active { box-shadow: var(--in); background: #dfdfdf; color: #000; }
[data-skin="win98"] :is(#app, .modal) button.primary { box-shadow: inset 0 0 0 1px #000, var(--out); font-weight: 700; background: #c0c0c0; color: #000; }
[data-skin="win98"] :is(#app, .modal) button.primary:hover, [data-skin="win98"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button):hover { background: #c8c8c8; }
[data-skin="win98"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button):disabled { color: #808080; text-shadow: 1px 1px #fff; opacity: 1; }
[data-skin="win98"] .stepper button span { border-color: #000; }
[data-skin="win98"] .stepper button.active span { background: #000080; border-color: #000080; color: #fff; }
[data-skin="win98"] .stepper button:not(.active, .done) span { color: #808080; text-shadow: 1px 1px #fff; border-color: #808080; }
[data-skin="win98"] .stepper { --step-done: #000; --step-done-soft: #fff; --step-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.6-5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-skin="win98"] .stepper button.done span::after { border-radius: 0; background-color: #fff; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; width: .95rem; height: .95rem; right: -.6rem; bottom: -.55rem; }
[data-skin="win98"] .ed-seg { border: 0; gap: 2px; overflow: visible; }
[data-skin="win98"] .ed-seg button + button { border-left: 0; }
[data-skin="win98"] :is(:is(#app, .modal) :is(input:not([type=checkbox], [type=radio], [type=range]), select, textarea), .wy) { background: #fff; border: 0; box-shadow: var(--in); }
[data-skin="win98"] .wy { padding: 2px; }
[data-skin="win98"] .wy:focus-within { box-shadow: var(--in); }
[data-skin="win98"] .wy-bar { background: #c0c0c0; }
[data-skin="win98"] .wy-btn:hover { background: #c0c0c0; box-shadow: var(--out); border-color: transparent; }
[data-skin="win98"] .chip { background: #fff; box-shadow: var(--in); color: #000; }
[data-skin="win98"] .theme-switch { background: #c0c0c0; border: 0; box-shadow: var(--in); }
[data-skin="win98"] .top-actions .divider { background: #808080; box-shadow: 1px 0 #fff; }
[data-skin="win98"] :is(.step-head, .sample-line, .step-foot > span) { color: #fff; }
[data-skin="win98"] :is(.step-head, .sample-line) :is(p, small, .muted, b, i) { color: #fff; }
[data-skin="win98"] .sample-line button.link { color: #ffff80; }
[data-skin="win98"] .site-foot { border-top: 0; box-shadow: var(--out); }
[data-skin="win98"] .step-foot { border-top-color: #fff; }
[data-skin="win98"] .drop { background: #c0c0c0; box-shadow: var(--in); border: 0; }
[data-skin="win98"] .drop:hover, [data-skin="win98"] .drop.over { outline: 1px dotted #000; outline-offset: -6px; }
[data-skin="win98"] .toast { background: #ffffe1; color: #000; border: 1px solid #000; }

/* ---------- Windows XP (after XP.css) ---------- */
:root[data-skin="xp"] {
  --bg: #cfe0f4; --surface: #ece9d8; --surface-2: #f4f3ee; --field: #fff; --field-ink: #000; --ink: #000; --ink-2: #333; --muted: #616161;
  --line: #aca899; --line-2: #d5d2c3; --accent: #2458cf; --accent-soft: #d6e4fb; --red: #b8291c; --red-soft: #fde4e1; --green: #216e1b; --green-soft: #e3f3dc;
  --amber: #7a5300; --amber-soft: #fff4c7; --primary: #245edb; --primary-hover: #1941a5; --primary-ink: #fff; --stage: #6f8fc4; --hl: #fff4c7;
  --drop-lines: #e3e0d0; --dash: #7f9db9; --warn-ink: #5c3e00; --bad-ink: #8a1d13; --ok-ink: #1f5c17; --shadow: none; --radius: 8px;
  --sans: Tahoma, "Trebuchet MS", Verdana, Geneva, sans-serif; --serif: "Trebuchet MS", Tahoma, Verdana, sans-serif;
  --bar: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7);
  --xpbtn: linear-gradient(180deg, #fff, #ecebe6 86%, #d6d0c5);
}
[data-skin="xp"] body { font-size: 14px; background: linear-gradient(180deg, #a9cbf2 0, #dce9f8 70%, #eef4fb 100%) fixed; }
[data-skin="xp"] .topbar { background: linear-gradient(180deg, #3168d5 0, #4993e6 6%, #2157d7 20%, #2663e0 70%, #1941a5 100%); border-bottom: 0; color: #fff; }
[data-skin="xp"] .topbar .brand-mark { filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .4)); }
[data-skin="xp"] .topbar :is(.brand-title, .brand small, .skin-pick) { color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .4); }
[data-skin="xp"] .top-actions button { color: #fff; background: transparent; border-color: transparent; }
[data-skin="xp"] .top-actions button:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
[data-skin="xp"] .top-actions .divider { background: rgba(255, 255, 255, .35); }
[data-skin="xp"] .theme-switch { background: rgba(0, 0, 0, .15); border-color: rgba(255, 255, 255, .3); }
[data-skin="xp"] .theme-switch button { color: #e6efff; }
[data-skin="xp"] :is(.card, .side-card, .pool-card, .modal-box, .empty) { background: #ece9d8; border: 3px solid #0831d9; border-radius: 8px 8px 0 0; box-shadow: 2px 3px 8px rgba(0, 0, 0, .25); }
[data-skin="xp"] :is(.empty, .side-card, .pool-card) { border: 1px solid #7f9db9; border-radius: 4px; box-shadow: none; }
[data-skin="xp"] .pool-card { border-left: 4px solid var(--accent); }
[data-skin="xp"] .card:has(> h3:first-child), [data-skin="xp"] .modal-box { border-top: 0; }
[data-skin="xp"] :is(.card > h3:first-child, .modal-box > header) { background: var(--bar); color: #fff; font-family: var(--serif); font-size: .98rem; font-weight: 700; text-shadow: 1px 1px #0f1089; margin: -1.1rem -1.25rem .9rem; padding: .35rem .7rem; border-radius: 7px 7px 0 0; }
[data-skin="xp"] .modal-box > header { margin: 0 !important; border-bottom: 0; }
[data-skin="xp"] .modal-box > header h3 { font-family: var(--serif); font-size: .98rem; }
[data-skin="xp"] .modal-box > header .x { width: 1.45rem; height: 1.45rem; padding: 0; color: #fff; border: 1px solid #fff; border-radius: 3px; font-size: 1.05rem; background: linear-gradient(180deg, #e8805a, #c6421b); }
[data-skin="xp"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button), [data-skin="xp"] .ed-seg button { border: 1px solid #003c74; border-radius: 3px; color: #000; font-weight: 400; background: var(--xpbtn); }
[data-skin="xp"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button):hover, [data-skin="xp"] .ed-seg button:hover { box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a; border-color: #003c74; }
[data-skin="xp"] :is(#app, .modal) button.primary { color: #fff; font-weight: 700; border-color: #1f6b14; text-shadow: 1px 1px rgba(0, 0, 0, .35); background: linear-gradient(180deg, #5fbb4f, #3c9a2c 50%, #2f8a23 51%, #3fa232); }
[data-skin="xp"] :is(#app, .modal) button.primary:hover { filter: brightness(1.08); box-shadow: none; }
[data-skin="xp"] :is(.form-tabs, .doc-tabs) button.active, [data-skin="xp"] .ed-seg button.on { background: #fff; color: #000; border-color: #245edb; box-shadow: inset 0 -3px #ffc83d; font-weight: 700; }
[data-skin="xp"] .ed-seg { border: 0; gap: 3px; overflow: visible; }
[data-skin="xp"] .stepper button { color: #003399; }
[data-skin="xp"] .stepper button.active { background: #fff; border-color: #7f9db9; color: #000; box-shadow: inset 0 -3px #ffc83d; }
[data-skin="xp"] .stepper button.active span { background: #245edb; border-color: #245edb; }
[data-skin="xp"] .stepper { --step-done: #21a121; --step-done-soft: #eaf7e4; }
:root[data-skin="xp"] { --pick-bg: #eaf7e4; --pick-fg: #1b7a1b; } /* the green of XP's own checkboxes, as in the stepper */
[data-skin="xp"] :is(:is(#app, .modal) :is(input:not([type=checkbox], [type=radio], [type=range]), select, textarea), .wy) { background: #fff; border: 1px solid #64819f; border-radius: 0; box-shadow: none; } /* XP's #7f9db9, darkened to 3:1 */
[data-skin="xp"] .wy:focus-within { border-color: #245edb; box-shadow: none; }
[data-skin="xp"] .wy-bar { border-radius: 0; }
[data-skin="xp"] .site-foot { border-top: 1px solid #aca899; }
[data-skin="xp"] .toast { background: #ffffe1; color: #000; border: 1px solid #000; }

/* ---------- Windows 7 (after 7.css) ---------- */
:root[data-skin="win7"] {
  --bg: #d9e8f6; --surface: #fff; --surface-2: #f3f6fa; --field: #fff; --field-ink: #1e1e1e; --ink: #1e1e1e; --ink-2: #474747; --muted: #656565;
  --line: #abadb3; --line-2: #d4dbe3; --accent: #2968a8; --accent-soft: #dcecfc; --red: #b42318; --red-soft: #fdeceb; --green: #29732d; --green-soft: #e3f3e4;
  --amber: #7a5300; --amber-soft: #fff4d1; --primary: #2a6cb0; --primary-hover: #1f5a96; --primary-ink: #fff; --stage: #8aa9c9; --hl: #fff4d1;
  --drop-lines: #e6eef7; --dash: #8eaccc; --warn-ink: #5c3e00; --bad-ink: #8a1d13; --ok-ink: #1d5c22; --shadow: none; --radius: 6px;
  --sans: "Segoe UI", "Segoe UI Variable", Tahoma, "Helvetica Neue", Arial, sans-serif; --serif: var(--sans);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(214, 233, 250, .65) 45%, rgba(176, 210, 240, .7));
  --w7btn: linear-gradient(180deg, #f2f2f2 45%, #ebebeb 45%, #dddddd 55%, #cfcfcf);
  --w7hot: linear-gradient(180deg, #eaf6fd 45%, #d9f0fc 45%, #bee6fd 55%, #a7d9f5);
}
[data-skin="win7"] body { background: radial-gradient(ellipse at 20% 0, #f4fbff 0, transparent 55%), linear-gradient(160deg, #b9d9f2 0, #e3effa 55%, #cfe3f5 100%) fixed; }
[data-skin="win7"] .topbar { background: var(--glass), #cfe2f5; border-bottom: 1px solid #8eaccc; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-skin="win7"] :is(.card, .side-card, .pool-card, .modal-box, .empty) { background: #fff; border: 1px solid rgba(0, 0, 0, .55); border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 2px 3px 10px rgba(0, 0, 0, .2); }
[data-skin="win7"] :is(.empty, .side-card, .pool-card) { border-color: #a9c2dc; box-shadow: none; background: rgba(255, 255, 255, .75); }
[data-skin="win7"] .pool-card { border-left: 4px solid var(--accent); }
[data-skin="win7"] :is(.card > h3:first-child, .modal-box > header) { background: var(--glass), #dfeaf6; font-weight: 400; font-size: 1rem; text-shadow: 0 0 8px #fff, 0 0 4px #fff; margin: -1.1rem -1.25rem .9rem; padding: .45rem 1.25rem; border-bottom: 1px solid #a9c2dc; border-radius: 6px 6px 0 0; }
[data-skin="win7"] .modal-box > header { margin: 0 !important; }
[data-skin="win7"] .modal-box > header h3 { font-weight: 400; font-size: 1.05rem; }
[data-skin="win7"] .modal-box > header .x { width: 2.6rem; height: 1.3rem; padding: 0; color: #fff; font-size: 1rem; line-height: 1; border: 1px solid rgba(0, 0, 0, .5); border-radius: 3px; background: linear-gradient(180deg, #e8a493, #d0573e 50%, #b8331c 51%, #d26952); }
[data-skin="win7"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button), [data-skin="win7"] .ed-seg button { border: 1px solid #707070; border-radius: 3px; color: #000; font-weight: 400; background: var(--w7btn); box-shadow: inset 0 0 0 1px #fcfcfc; }
[data-skin="win7"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button):hover, [data-skin="win7"] .ed-seg button:hover { border-color: #3c7fb1; background: var(--w7hot); }
[data-skin="win7"] :is(#app, .modal) button.primary { border-color: #3c7fb1; color: #000; background: var(--w7hot); box-shadow: inset 0 0 0 1px #48d2ff; }
[data-skin="win7"] :is(#app, .modal) button.primary:hover { background: linear-gradient(180deg, #e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db); }
[data-skin="win7"] :is(.form-tabs, .doc-tabs) button.active, [data-skin="win7"] .ed-seg button.on { border-color: #2c628b; color: #000; background: linear-gradient(180deg, #e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .25); }
[data-skin="win7"] .ed-seg { border: 0; gap: 2px; overflow: visible; }
[data-skin="win7"] .stepper button.active { background: var(--glass), #eaf3fb; border-color: #8eaccc; }
[data-skin="win7"] :is(:is(#app, .modal) :is(input:not([type=checkbox], [type=radio], [type=range]), select, textarea), .wy) { background: #fff; border: 1px solid #707479; border-top-color: #5f6268; /* 7.css greys, darkened to 3:1 */ border-radius: 2px; box-shadow: none; }
[data-skin="win7"] .wy:focus-within, [data-skin="win7"] :is(#app, .modal) input:focus { border-color: #3d7bad; box-shadow: none; }
[data-skin="win7"] .wy-bar { background: linear-gradient(180deg, #fafcfe, #e9eff6); border-radius: 0; }
[data-skin="win7"] .site-foot { background: rgba(255, 255, 255, .6); border-top: 1px solid #a9c2dc; }
[data-skin="win7"] .toast { background: linear-gradient(180deg, #fff, #e4e5f0); color: #1e1e1e; border: 1px solid #767676; border-radius: 4px; }

/* ---------- Pico (after Pico CSS) ---------- */
:root[data-skin="pico"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #fbfcfc; --field: #fbfcfc; --field-ink: #373c44; --ink: #373c44; --ink-2: #5f6674; --muted: #6a7386;
  --line: #cfd5e2; --line-2: #e7eaf0; --accent: #0172ad; --accent-soft: rgba(2 154 232 / .16); --red: #b71c1c; --red-soft: #fdecec; --green: #1e7b34; --green-soft: #e6f4ea;
  --amber: #8a5a00; --amber-soft: #fdf3d8; --primary: #0172ad; --primary-hover: #015887; --primary-ink: #fff; --stage: #dfe3ea; --hl: #fdf3d8;
  --drop-lines: #e7eaf0; --dash: #cfd5e2; --warn-ink: #8a5a00; --bad-ink: #b71c1c; --ok-ink: #1e7b34; color-scheme: light;
  --radius: .25rem; --shadow: .0625rem .125rem .75rem rgba(129, 145, 181, .12), 0 0 0 .0625rem rgba(129, 145, 181, .05);
}
@media (prefers-color-scheme: dark) { :root[data-skin="pico"]:not([data-theme="light"]) { --bg: #13171f; --surface: #181c25; --surface-2: #1c212c; --field: #1c212c; --field-ink: #c2c7d0; --ink: #c2c7d0; --ink-2: #99a2b3; --muted: #828a9c;
  --line: #3b4457; --line-2: #2a3140; --accent: #01aaff; --accent-soft: rgba(1 170 255 / .2); --red: #ff8a80; --red-soft: #3a1b1b; --green: #6fd08c; --green-soft: #173322;
  --amber: #f2bd55; --amber-soft: #33290f; --primary: #01aaff; --primary-hover: #79c0ff; --primary-ink: #0a0c10; --stage: #0b0d12; --hl: #33290f;
  --drop-lines: #2a3140; --dash: #3b4457; --warn-ink: #f2bd55; --bad-ink: #ff8a80; --ok-ink: #6fd08c; --shadow: 0 0 0 .0625rem rgba(7,9,12,.3), .5rem 1rem 3rem rgba(7,9,12,.3); color-scheme: dark; } }
:root[data-skin="pico"][data-theme="dark"] { --bg: #13171f; --surface: #181c25; --surface-2: #1c212c; --field: #1c212c; --field-ink: #c2c7d0; --ink: #c2c7d0; --ink-2: #99a2b3; --muted: #828a9c;
  --line: #3b4457; --line-2: #2a3140; --accent: #01aaff; --accent-soft: rgba(1 170 255 / .2); --red: #ff8a80; --red-soft: #3a1b1b; --green: #6fd08c; --green-soft: #173322;
  --amber: #f2bd55; --amber-soft: #33290f; --primary: #01aaff; --primary-hover: #79c0ff; --primary-ink: #0a0c10; --stage: #0b0d12; --hl: #33290f;
  --drop-lines: #2a3140; --dash: #3b4457; --warn-ink: #f2bd55; --bad-ink: #ff8a80; --ok-ink: #6fd08c; --shadow: 0 0 0 .0625rem rgba(7,9,12,.3), .5rem 1rem 3rem rgba(7,9,12,.3); color-scheme: dark; }
[data-skin="pico"] body { font-size: 16px; line-height: 1.6; }
[data-skin="pico"] :is(.card, .modal-box) { border: 0; box-shadow: var(--shadow); }
[data-skin="pico"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button) { border-radius: .25rem; padding: .5rem 1.1rem; }
[data-skin="pico"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button):not(.primary) { border-color: var(--line); color: var(--ink-2); background: transparent; }
[data-skin="pico"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button).small, [data-skin="pico"] .slots .order button { padding: .2rem .55rem; }
[data-skin="pico"] :is(:is(#app, .modal) :is(input:not([type=checkbox], [type=radio], [type=range]), select, textarea), .wy) { background: var(--field); border-color: var(--field-line); border-radius: .25rem; }
[data-skin="pico"] :is(#app, .modal) :is(input, select, textarea):not([type=checkbox], [type=radio], [type=range]) { padding: .6rem .85rem; }
[data-skin="pico"] .skin-pick select { padding: .3rem .6rem; }

/* ---------- MVP.css ---------- */
:root[data-skin="mvp"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f8f8f8; --field: #ffffff; --field-ink: #000000; --ink: #000000; --ink-2: #4f4f4f; --muted: #707070;
  --line: #cccccc; --line-2: #f2f2f2; --accent: #116fb6; --accent-soft: #e6f2fd; --red: #c5221f; --red-soft: #fdeceb; --green: #1e7b34; --green-soft: #e6f4ea;
  --amber: #8a5a00; --amber-soft: #fdf3d8; --primary: #1178c8; --primary-hover: #0a6ec0; --primary-ink: #fff; --stage: #e4e4e4; --hl: #fdf3d8;
  --drop-lines: #f2f2f2; --dash: #cccccc; --warn-ink: #8a5a00; --bad-ink: #c5221f; --ok-ink: #1e7b34; color-scheme: light;
  --radius: 8px; --shadow: 2px 2px 10px #cccccc;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", "PTE Fallback Sans", sans-serif; --serif: var(--sans);
}
@media (prefers-color-scheme: dark) { :root[data-skin="mvp"]:not([data-theme="light"]) { --bg: #333333; --surface: #3d3d3d; --surface-2: #444444; --field: #444444; --field-ink: #f7f7f7; --ink: #f7f7f7; --ink-2: #cfcfcf; --muted: #b3b3b3;
  --line: #6a6a6a; --line-2: #555555; --accent: #63baff; --accent-soft: #24445f; --red: #ff9691; --red-soft: #4a2723; --green: #7fd49a; --green-soft: #25402d;
  --amber: #f2bd55; --amber-soft: #4a3e1c; --primary: #0078cc; --primary-hover: #4db8ff; --primary-ink: #fff; --stage: #222222; --hl: #4a3e1c;
  --drop-lines: #555555; --dash: #6a6a6a; --warn-ink: #f2bd55; --bad-ink: #ff9691; --ok-ink: #7fd49a; --shadow: 2px 2px 10px #222; color-scheme: dark; } }
:root[data-skin="mvp"][data-theme="dark"] { --bg: #333333; --surface: #3d3d3d; --surface-2: #444444; --field: #444444; --field-ink: #f7f7f7; --ink: #f7f7f7; --ink-2: #cfcfcf; --muted: #b3b3b3;
  --line: #6a6a6a; --line-2: #555555; --accent: #63baff; --accent-soft: #24445f; --red: #ff9691; --red-soft: #4a2723; --green: #7fd49a; --green-soft: #25402d;
  --amber: #f2bd55; --amber-soft: #4a3e1c; --primary: #0078cc; --primary-hover: #4db8ff; --primary-ink: #fff; --stage: #222222; --hl: #4a3e1c;
  --drop-lines: #555555; --dash: #6a6a6a; --warn-ink: #f2bd55; --bad-ink: #ff9691; --ok-ink: #7fd49a; --shadow: 2px 2px 10px #222; color-scheme: dark; }
[data-skin="mvp"] body { font-size: 16px; line-height: 1.55; }
[data-skin="mvp"] h2, [data-skin="mvp"] h3, [data-skin="mvp"] .brand-title { font-weight: 700; }
[data-skin="mvp"] :is(.card, .modal-box) { border: 1px solid var(--line-2); box-shadow: var(--shadow); }
[data-skin="mvp"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button) { border-radius: 5px; font-weight: 700; border: 2px solid var(--accent); color: var(--accent); background: transparent; }
[data-skin="mvp"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button):hover { background: var(--accent-soft); border-color: var(--accent); }
[data-skin="mvp"] :is(#app, .modal) button.primary { background: var(--accent); color: var(--primary-ink); }
[data-skin="mvp"] :is(#app, .modal) button.primary:hover { filter: brightness(1.12); background: var(--accent); }
[data-skin="mvp"] :is(:is(#app, .modal) :is(input:not([type=checkbox], [type=radio], [type=range]), select, textarea), .wy) { border: 1px solid var(--field-line); border-radius: 5px; }
[data-skin="mvp"] .chip { border-radius: 99px; }

/* ---------- new.css ---------- */
:root[data-skin="new"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f6f8fa; --field: #ffffff; --field-ink: #000000; --ink: #000000; --ink-2: #1a1a1a; --muted: #555c66;
  --line: #d0d4da; --line-2: #e5e7eb; --accent: #0067d8; --accent-soft: #e5f0ff; --red: #c5221f; --red-soft: #fdeceb; --green: #1e7b34; --green-soft: #e6f4ea;
  --amber: #8a5a00; --amber-soft: #fdf3d8; --primary: #0070f3; --primary-hover: #0366d6; --primary-ink: #fff; --stage: #e9ecef; --hl: #fdf3d8;
  --drop-lines: #e5e7eb; --dash: #d0d4da; --warn-ink: #8a5a00; --bad-ink: #c5221f; --ok-ink: #1e7b34; color-scheme: light;
  --radius: 4px; --shadow: none;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: var(--sans);
}
@media (prefers-color-scheme: dark) { :root[data-skin="new"]:not([data-theme="light"]) { --bg: #111111; --surface: #111111; --surface-2: #222222; --field: #1a1a1a; --field-ink: #ffffff; --ink: #ffffff; --ink-2: #eeeeee; --muted: #a8a8a8;
  --line: #444444; --line-2: #333333; --accent: #3291ff; --accent-soft: #10284a; --red: #ff8a7f; --red-soft: #3a1915; --green: #6fd08c; --green-soft: #173322;
  --amber: #f2bd55; --amber-soft: #33290f; --primary: #0074da; --primary-hover: #0070f3; --primary-ink: #fff; --stage: #000000; --hl: #33290f;
  --drop-lines: #333333; --dash: #444444; --warn-ink: #f2bd55; --bad-ink: #ff8a7f; --ok-ink: #6fd08c; --shadow: none; color-scheme: dark; } }
:root[data-skin="new"][data-theme="dark"] { --bg: #111111; --surface: #111111; --surface-2: #222222; --field: #1a1a1a; --field-ink: #ffffff; --ink: #ffffff; --ink-2: #eeeeee; --muted: #a8a8a8;
  --line: #444444; --line-2: #333333; --accent: #3291ff; --accent-soft: #10284a; --red: #ff8a7f; --red-soft: #3a1915; --green: #6fd08c; --green-soft: #173322;
  --amber: #f2bd55; --amber-soft: #33290f; --primary: #0074da; --primary-hover: #0070f3; --primary-ink: #fff; --stage: #000000; --hl: #33290f;
  --drop-lines: #333333; --dash: #444444; --warn-ink: #f2bd55; --bad-ink: #ff8a7f; --ok-ink: #6fd08c; --shadow: none; color-scheme: dark; }
[data-skin="new"] body { font-size: 15.5px; line-height: 1.6; letter-spacing: -.005em; }
[data-skin="new"] h2, [data-skin="new"] h3, [data-skin="new"] .brand-title { font-weight: 700; letter-spacing: -.01em; }
[data-skin="new"] .topbar, [data-skin="new"] .site-foot { background: var(--surface-2); }
[data-skin="new"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button) { border-radius: 4px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-weight: 500; }
[data-skin="new"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button):hover { background: var(--line-2); border-color: var(--line); }
[data-skin="new"] :is(#app, .modal) button.primary { border: 0; background: var(--accent); color: var(--primary-ink); }
[data-skin="new"] :is(#app, .modal) button.primary:hover { background: var(--primary-hover); }
[data-skin="new"] .top-actions button { border-color: transparent; background: transparent; color: var(--ink-2); }
[data-skin="new"] .top-actions button:hover { background: var(--line-2); color: var(--ink); }
[data-skin="new"] :is(:is(#app, .modal) :is(input:not([type=checkbox], [type=radio], [type=range]), select, textarea), .wy) { border-color: var(--field-line); border-radius: 4px; }

/* ---------- Sakura ---------- */
:root[data-skin="sakura"] {
  --bg: #f9f9f9; --surface: #ffffff; --surface-2: #f1f1f1; --field: #ffffff; --field-ink: #4a4a4a; --ink: #4a4a4a; --ink-2: #5e5e5e; --muted: #6c6c6c;
  --line: #c9c9c9; --line-2: #e2e2e2; --accent: #1d7484; --accent-soft: #e2f0f2; --red: #b42318; --red-soft: #fbeaea; --green: #2c794d; --green-soft: #e5f2ea;
  --amber: #8a5a00; --amber-soft: #fbf2da; --primary: #1d7484; --primary-hover: #982c61; --primary-ink: #f9f9f9; --stage: #e6e6e6; --hl: #fbf2da;
  --drop-lines: #e2e2e2; --dash: #c9c9c9; --warn-ink: #8a5a00; --bad-ink: #b42318; --ok-ink: #2c794d; color-scheme: light;
  --radius: 4px; --shadow: none;
  --sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PTE Fallback Sans", sans-serif; --serif: var(--sans);
}
@media (prefers-color-scheme: dark) { :root[data-skin="sakura"]:not([data-theme="light"]) { --bg: #222222; --surface: #2b2b2b; --surface-2: #333333; --field: #2b2b2b; --field-ink: #c9c9c9; --ink: #c9c9c9; --ink-2: #b0b0b0; --muted: #9c9c9c;
  --line: #555555; --line-2: #3d3d3d; --accent: #79bdc9; --accent-soft: #23393d; --red: #ff8a7f; --red-soft: #3a1d1b; --green: #86cfa0; --green-soft: #203a29;
  --amber: #f2bd55; --amber-soft: #3a3016; --primary: #79bdc9; --primary-hover: #e48ab6; --primary-ink: #1b1b1b; --stage: #151515; --hl: #3a3016;
  --drop-lines: #3d3d3d; --dash: #555555; --warn-ink: #f2bd55; --bad-ink: #ff8a7f; --ok-ink: #86cfa0; --shadow: none; color-scheme: dark; } }
:root[data-skin="sakura"][data-theme="dark"] { --bg: #222222; --surface: #2b2b2b; --surface-2: #333333; --field: #2b2b2b; --field-ink: #c9c9c9; --ink: #c9c9c9; --ink-2: #b0b0b0; --muted: #9c9c9c;
  --line: #555555; --line-2: #3d3d3d; --accent: #79bdc9; --accent-soft: #23393d; --red: #ff8a7f; --red-soft: #3a1d1b; --green: #86cfa0; --green-soft: #203a29;
  --amber: #f2bd55; --amber-soft: #3a3016; --primary: #79bdc9; --primary-hover: #e48ab6; --primary-ink: #1b1b1b; --stage: #151515; --hl: #3a3016;
  --drop-lines: #3d3d3d; --dash: #555555; --warn-ink: #f2bd55; --bad-ink: #ff8a7f; --ok-ink: #86cfa0; --shadow: none; color-scheme: dark; }
[data-skin="sakura"] body { font-size: 16px; line-height: 1.618; }
[data-skin="sakura"] .topbar, [data-skin="sakura"] .site-foot { background: var(--bg); }
[data-skin="sakura"] h2, [data-skin="sakura"] h3, [data-skin="sakura"] .brand-title { font-weight: 700; }
[data-skin="sakura"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button) { border-radius: 1px; border: 1px solid var(--accent); background: var(--accent); color: var(--primary-ink); }
[data-skin="sakura"] :is(#app, .modal) button:not(.link, .x, .ed-x, .wy-btn, .ed-add, .wy-tgrid button, .ed-seg button, .stepper button, .theme-switch button, .pp-tools button):hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-ink); }
[data-skin="sakura"] .top-actions button, [data-skin="sakura"] .slots .order button { background: transparent; border-color: transparent; color: var(--accent); }
[data-skin="sakura"] .top-actions button:hover { color: var(--primary-hover); background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
[data-skin="sakura"] :is(:is(#app, .modal) :is(input:not([type=checkbox], [type=radio], [type=range]), select, textarea), .wy) { border-color: var(--field-line); }
[data-skin="sakura"] :is(.credits-list a, button.link, a) { color: var(--accent); }
[data-skin="sakura"] :is(.credits-list a, button.link, a):hover { color: var(--primary-hover); }

/* the printed page never takes a style */
@media print { :root { color-scheme: light; } }
[data-skin="system"] .chip { background: #fff; border: 1px solid #000; color: #000; }
[data-skin="system"] .chip.ok, [data-skin="system"] .chip.warn, [data-skin="system"] .chip.bad { border-style: dashed; }
@media print { html, body { background: #fff !important; color: #000; } :root[data-skin] { color-scheme: light !important; } }

/* ---------- Device contrast settings (every style) ----------
   "Increase contrast" (macOS, iOS, some Windows and Android settings): secondary text and borders
   take the main text colour. Custom properties marked !important win over each style's palette. */
@media (prefers-contrast: more) {
  :root { --muted: var(--ink) !important; --ink-2: var(--ink) !important; --line: var(--ink) !important; --dash: var(--ink) !important; --field-line: var(--ink) !important; }
  :is(button, input, select, textarea, summary, a):focus-visible { outline-width: 3px !important; }
  button.link, .foot-meta a { text-decoration-thickness: 2px; }
}
/* Windows high-contrast mode: the system picks the colours. Shadows and backgrounds are dropped,
   so selected items get an outline and floating boxes get a border. */
@media (forced-colors: active) {
  :is(.stepper button.active, .doc-tabs button.active, .form-tabs button.active, .theme-switch button[aria-pressed="true"],
      .ed-seg button.on, .wy-btn.on, [aria-pressed="true"]) { outline: 2px solid Highlight; outline-offset: 1px; }
  .modal-box, .toast, .pp-tools button, .card, .side-card { border: 1px solid CanvasText; }
  .pp-tools { opacity: 1; } /* fading does not survive forced colours well; keep them shown */
  .drop:focus-within { outline-color: Highlight; }
}