/* Shared look for every page, after duncangeere.com. No monospaced fonts anywhere. */
:root {
  --navy: #173561; --cream: #fffdf1; --coral: #ff7272; --green: #b2e081; --blue: #47a4c7;
  --display: "itc-avant-garde-gothic-pro", "Jost", sans-serif;
  --text: "Vollkorn", Georgia, serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--cream); color: var(--navy); font: 1.05rem/1.45 var(--text); font-variant-numeric: lining-nums; }
header { background: var(--coral); color: var(--cream); padding: 1.5rem 2rem; font-family: var(--display); text-transform: uppercase; }
header h1 { margin: 0; font-size: 1rem; font-weight: 700; }
@media (max-width: 820px) { header { padding: 1.5rem 1rem; } }
h2 { font: 700 .8rem var(--display); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .9rem; }
section { margin-bottom: 2.25rem; min-width: 0; }
label { display: block; margin-bottom: .7rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
input, select, textarea { display: block; width: 100%; margin-top: .2rem; font: inherit; color: inherit; background: #fff; border: 1.5px solid var(--navy); border-radius: 0; padding: .3rem .5rem; }
input[type=color] { padding: 2px; height: 2.25rem; }
textarea { min-height: 11rem; resize: vertical; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.hint { font-style: italic; font-size: .9rem; margin: 0 0 .7rem; }
.button, button { display: inline-block; font: 700 .72rem var(--display); text-transform: uppercase; letter-spacing: .04em; background: var(--navy); color: var(--cream); border: 0; padding: .6rem .85rem; cursor: pointer; }
.button { margin: 0; } /* file-picker labels styled as buttons shouldn't get the label margin */
.button:hover, button:hover { background: var(--coral); }
button:disabled { opacity: .4; cursor: default; background: var(--navy); }
button.ghost { background: none; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
button.ghost:hover { background: var(--coral); color: var(--cream); box-shadow: none; }
button.big { font-size: .9rem; padding: .9rem 1.3rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.button:focus-within { outline: 3px solid var(--blue); outline-offset: 1px; }
.error { color: #b00020; font-weight: 600; }
.notes { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
.notes li::marker { color: var(--coral); }
.paper svg { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 0 0 1.5px var(--navy), .6rem .6rem 0 var(--green); }
.swatch { display: inline-block; width: .9em; height: .9em; vertical-align: -.1em; margin-right: .25em; border: 1px solid var(--navy); }

/* Drawing pad (pad.js) */
.pad-bar { display: grid; gap: .5rem; margin-bottom: .6rem; }
.pad-row { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; }
.pad-group { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.pad-bar button { padding: .5rem .65rem; }
.pad-bar button[aria-pressed=true] { background: var(--navy); color: var(--cream); box-shadow: none; }
.pad-bar label { display: flex; align-items: center; gap: .35rem; margin: 0 0 0 .3rem; font-size: .9rem; }
.pad-bar input { width: 4.2rem; margin: 0; }
.pad-bar label:has(input:disabled) { opacity: .35; }
.pad-canvas { display: block; width: 100%; height: min(72vh, 900px); background: #efecdc; border: 1.5px solid var(--navy); touch-action: none; cursor: crosshair; user-select: none; }
.pad-page { fill: #fff; }
.pad-canvas path { fill: none; stroke-width: .4; stroke-linecap: round; stroke-linejoin: round; }
.pad-canvas path.pad-hit { stroke: var(--coral); stroke-width: 1.2; stroke-opacity: .6; }
.pad-grid-lines line { stroke: var(--blue); stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pad-snap { fill: none; stroke: var(--coral); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.pad-readonly .pad-bar { opacity: .4; pointer-events: none; }
.pad-readonly .pad-canvas { cursor: default; }
.pad-help { margin-top: .5rem; }