@font-face { font-family: "Bree"; src: url("fonts/bree-serif.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #f7f3ee; --paper: #fffdfa; --ink: #2a1f22; --muted: #63565a; --line: #e2d8cf; --line-strong: #b9aaa0;
  --accent: #b3283d; --accent-ink: #ffffff; --accent-soft: #f8e4e6;
  --pine: #2d5b47; --pine-soft: #e1eee6; --amber: #8f4a00; --amber-soft: #fbead3;
  --focus: #1d5fd1;
  --head: "Bree", Georgia, serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 6px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1416; --paper: #241c1f; --ink: #f3ebe6; --muted: #c4b5b1; --line: #3f3337; --line-strong: #6e5d60;
    --accent: #e2566c; --accent-ink: #1a1416; --accent-soft: #3d2328;
    --pine: #7cc8a3; --pine-soft: #1f3329; --amber: #eaa34f; --amber-soft: #3a2a17;
    --focus: #8ab4ff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--body); }
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* header */
.topbar { border-bottom: 2px dashed var(--accent); background: var(--paper); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 21px/1.2 var(--head); }
.brand svg { color: var(--ink); flex: none; }
.topbar nav { display: flex; gap: 16px; font-size: 15px; }
.topbar nav a { color: var(--muted); text-decoration: none; padding: 10px 0; }
.topbar nav a:hover { color: var(--ink); text-decoration: underline; }

.hero { padding: 22px 0 12px; max-width: 46rem; }
h1 { font: 400 clamp(28px, 6vw, 40px)/1.12 var(--head); margin: 0 0 10px; letter-spacing: -0.2px; }
.lede { margin: 0; color: var(--muted); font-size: 17px; }
h2 { font: 400 24px/1.25 var(--head); margin: 32px 0 10px; }

/* buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--paper); color: var(--ink); font: 600 16px/1.2 var(--body); cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--muted); text-decoration: underline; }
.btn.danger { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.small { min-height: 40px; padding: 6px 12px; font-size: 15px; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; text-underline-offset: 2px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label, .seg legend, .find label { font-size: 15px; font-weight: 600; color: var(--ink); }
input, select, textarea { font: 16px/1.3 var(--body); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: var(--r); padding: 9px 10px; min-height: 44px; width: 100%; min-width: 0; }
textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 0; }
.hint { color: var(--muted); font-size: 15px; margin: 6px 0 0; }
.hint.info { color: var(--amber); }
.warn { background: var(--amber-soft); color: var(--ink); border-left: 4px solid var(--amber); padding: 10px 12px; margin: 10px 0; border-radius: 0 var(--r) var(--r) 0; font-size: 16px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; }
.check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); }

/* tool */
.tool { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 0 0 18px; margin: 8px 0 12px; }
.store-note, .example-bar { margin: 0; padding: 10px 16px; background: var(--amber-soft); border-bottom: 1px solid var(--line); font-size: 15px; border-radius: 10px 10px 0 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); overflow: hidden; }
.tabs button { flex: 1; min-height: 52px; background: transparent; border: 0; border-bottom: 3px solid transparent; font: 400 18px/1.2 var(--head); color: var(--muted); cursor: pointer; padding: 8px 6px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs button:hover { color: var(--ink); }
.panel { padding: 14px 16px 0; }

.drive { border-bottom: 1px solid var(--line); margin: 0 -16px; padding: 0 16px 6px; }
.drive summary { cursor: pointer; padding: 6px 0 10px; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-height: 44px; }
.drive summary::-webkit-details-marker { display: none; }
.drive summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); margin-right: 2px; align-self: center; transition: transform .15s; }
.drive[open] summary::before { transform: rotate(45deg); }
.sum-h { font-weight: 700; }
.sum-v { color: var(--muted); font-size: 15px; }
.drive-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 14px; padding: 0 0 12px; }
.drive-in .wide { grid-column: span 2; }
.money { display: flex; gap: 6px; }
.money select { width: 64px; flex: none; }

.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 8px; }
.h-list { margin: 0; font-size: 22px; }
.list-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.paste { border-left: 4px solid var(--line-strong); padding: 4px 0 4px 12px; margin: 0 0 14px; }
.paste label { font-weight: 600; display: block; margin-bottom: 6px; font-size: 15px; }

.recs, .trows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rec, .trow { border-bottom: 1px solid var(--line); }
.rec-sum, .tr-sum { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 12px; align-items: baseline; width: 100%; min-height: 50px; padding: 10px 4px; background: none; border: 0; text-align: left; color: var(--ink); font: 16px/1.35 var(--body); cursor: pointer; }
.rec-sum:hover, .tr-sum:hover { background: var(--bg); }
.code { font: 400 19px/1.1 var(--head); color: var(--accent); }
.who .nm { color: var(--muted); }
.w1 { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec.dup .code { background: var(--amber-soft); color: var(--amber); padding: 0 4px; border-radius: 4px; }
.rec.open { background: var(--bg); margin: 0 -16px; padding: 0 16px; }
.rec-ed, .tr-ed { padding: 4px 4px 16px; }
.ed-grid, .ed-sizes, .ed-wishes { display: grid; gap: 10px 12px; margin-bottom: 10px; }
.ed-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ed-sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ed-wishes { grid-template-columns: 1fr; }
.ed-more summary { cursor: pointer; color: var(--muted); font-size: 15px; min-height: 44px; display: flex; align-items: center; }
.ed-more .ed-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.empty { color: var(--muted); margin: 14px 0 0; }
.next { margin: 14px 0 0; }

.sample { margin: 16px 0 0; }
.sample-cap { margin: 0 0 8px; font-size: 15px; color: var(--muted); }
.sample-tag { width: 97mm; height: 65mm; max-width: 100%; zoom: var(--sz, 1); background: #fffdf8; color: #231a1c; border: 1px solid #c9bdb4; }
@media (max-width: 420px) { .sample-tag { --sz: .93; } }
@media (max-width: 360px) { .sample-tag { --sz: .8; } }

/* print tab */
.seg { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.seg legend { margin-bottom: 6px; padding: 0; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r); cursor: pointer; font-weight: 600; font-size: 15px; white-space: nowrap; }
.seg input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.popts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; align-items: end; margin-bottom: 4px; }
.popts .seg { grid-column: 1 / -1; margin: 0; }
.blank-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.print-line { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 12px 0; }
.print-line .hint { margin: 0; flex: 1 1 220px; }
.preview { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; overflow: hidden; }
.sheets { zoom: var(--z, 1); width: calc(194mm + 2px); }
.sheets .page, .sheets .sheet { background: #fffdf8; color: #231a1c; box-shadow: 0 1px 4px rgba(0,0,0,.18); margin: 0 0 14px; }
.sheets .page.later { display: none; }
.sheets.all .page.later { display: block; }
.more-pages { font-size: 15px; color: var(--muted); }
.none { color: var(--muted); }

/* tracker */
.tsum-line { margin: 0 0 8px; font-size: 17px; }
.tsum-line .od { color: var(--amber); font-weight: 700; }
.bar { display: flex; height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; margin-bottom: 14px; }
.bar span { display: block; height: 100%; }
.b-ret { background: var(--pine); }
.b-out { background: var(--line-strong); }
.b-od { background: var(--amber); }
.find { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; }
.find input { width: 8em; text-transform: uppercase; }
.find-msg { font-size: 15px; color: var(--amber); flex-basis: 100%; }
.find-msg:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.chips button { min-height: 40px; padding: 6px 12px; border: 1.5px solid var(--line-strong); border-radius: 20px; background: var(--paper); color: var(--ink); font: 600 15px var(--body); cursor: pointer; }
.chips button[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips .n { font-weight: 400; opacity: .85; }
.tr-line { display: flex; align-items: center; gap: 8px; }
.tr-sum { grid-template-columns: 4.2em minmax(0, 1fr) auto; flex: 1; min-width: 0; }
.tr-line > .btn { flex: none; margin-right: 4px; }
.tr-who { display: flex; flex-direction: column; min-width: 0; }
.tr-sub { color: var(--muted); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.chip.st-open { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.chip.st-taken { background: var(--accent-soft); color: var(--ink); }
.chip.st-overdue { background: var(--amber-soft); color: var(--amber); }
.chip.st-returned { background: var(--pine-soft); color: var(--pine); }
.trow.open { background: var(--bg); margin: 0 -16px; padding: 0 16px; }
.trow.none { padding: 12px 4px; color: var(--muted); }
.h-rem, .h-data { font-size: 22px; margin-top: 26px; }
.rem-mode { max-width: 380px; margin-bottom: 10px; }
.rem-list { list-style: none; padding: 0; margin: 10px 0 0; }
.rem { border-left: 4px solid var(--line-strong); padding: 4px 0 8px 12px; margin-bottom: 14px; }
.rem.late { border-left-color: var(--amber); }
.rem-to { margin: 0; }
.rem-to span { color: var(--muted); font-size: 15px; }
.rem-text { margin: 4px 0 0; max-width: 65ch; }
.rem .row-btns { margin-top: 8px; }
.file-btn { cursor: pointer; }
.confirm { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 10px 14px; margin-top: 12px; border-radius: 0 var(--r) var(--r) 0; }
.confirm p { margin: 0; }

.undo-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--paper); padding: 8px 8px 8px 16px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.3); max-width: calc(100% - 32px); font-size: 15px; }
.undo-bar .btn { min-height: 40px; }
.toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 21; max-width: calc(100% - 32px); margin: 0; }
.toast.on { opacity: 1; }
.toast:empty { display: none; }

/* content */
.content { max-width: 46rem; padding-bottom: 20px; }
.content p, .content li { max-width: 68ch; }
.steps { padding-left: 1.4em; }
.steps li { margin-bottom: 8px; }
.steps li::marker { font-family: var(--head); color: var(--accent); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; min-height: 44px; }
.faq details p { margin: 0 0 14px; }
.sources { font-size: 15px; color: var(--muted); margin-top: 24px; }
.nojs { padding: 16px; }

footer { border-top: 1px solid var(--line); margin-top: 24px; padding: 18px 0 30px; font-size: 14px; color: var(--muted); }
footer a { color: var(--muted); }
.sb-footer p { margin: 0 0 8px; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .topbar nav { display: none; }
  .drive-in { grid-template-columns: 1fr 1fr; }
  .drive-in .wide, .drive-in .f-wrap, .drive-in .f-cards { grid-column: 1 / -1; }
  .ed-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-grid { grid-template-columns: 1fr 1fr; }
  .ed-more .ed-grid { grid-template-columns: 1fr; }
  .rec-sum { grid-template-columns: 3.6em minmax(0, 1fr); }
  .rec-sum .w1 { grid-column: 2; }
  .tr-sum { grid-template-columns: 3.2em minmax(0, 1fr); padding-right: 0; }
  .tr-sum .chip { grid-column: 2; justify-self: start; }
  .tr-sub { white-space: normal; }
  .tabs button { font-size: 17px; }
  .seg span { padding: 8px 11px; }
}
@media (max-width: 360px) {
  .drive-in { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ================= printed sheets (also the on-screen preview) ================= */
.page { width: 194mm; height: 260mm; overflow: hidden; position: relative; }
.grid { display: grid; box-sizing: border-box; width: 194mm; height: 259.6mm; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0.3mm solid #9c918c; border-left: 0.3mm solid #9c918c; }
.per-4 .grid { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.per-8 .grid { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.per-10 .grid { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.measure { position: absolute; left: -10000px; top: 0; visibility: hidden; width: 194mm; }
.measure .page.later { display: block; }
.grid > .tag { border-right: 0.3mm solid #9c918c; border-bottom: 0.3mm solid #9c918c; }
.tag { display: flex; overflow: hidden; font-family: var(--body); color: #231a1c; position: relative; height: 100%; }
.tag.empty { background: none; margin: 0; }
.t-body > * { flex: none; }
/* if a tag is still too full, the wishes are cut, never the due date and drop-off line under them */
.t-body > .t-wish, .t-body > .t-note { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.t-body { flex: 1; min-width: 0; min-height: 0; overflow: hidden; padding: 3.2mm 3mm 2.6mm 3mm; display: flex; flex-direction: column; gap: 0.9mm; }
/* the hole sits at the top centre of the whole tag (stub included), so a hung tag hangs upright;
   the heading line stops short of it */
.hole { position: absolute; left: 50%; top: 2.6mm; width: 5mm; height: 5mm; margin-left: -2.5mm; border: 0.35mm solid #8a7d78; border-radius: 50%; }
.per-8 .t-head { padding-right: 16mm; }
.per-10 .t-head { padding-right: 18mm; }
.per-8 .tag:not(.has-stub) .t-head, .per-10 .tag:not(.has-stub) .t-head { padding-right: 49mm; }
.hole::after { content: ""; position: absolute; inset: 1.2mm; border-radius: 50%; background: #e9e1da; }
.t-head { display: flex; align-items: baseline; gap: 2.5mm; flex-wrap: wrap; }
.t-code { font: 400 18pt/1 var(--head); color: #9e2236; }
.t-who { font-weight: 700; font-size: 10.5pt; line-height: 1.15; }
.t-who b { font-weight: 400; }
.t-fill { font-weight: 400; font-size: 9pt; color: #4b3f42; }
.t-title { font: 400 8.5pt/1.15 var(--head); color: #5b4c50; margin-top: -0.4mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-sizes { display: flex; flex-wrap: wrap; gap: 0 3mm; font-size: 8.5pt; line-height: 1.25; color: #3b3033; }
.t-sizes b { color: #231a1c; }
.t-sizes > span { white-space: nowrap; }
.t-wish { margin: 0.3mm 0 0; padding: 0 0 0 4.2mm; font-size: 10pt; line-height: 1.22; }
.t-wish li { padding-left: 0.4mm; }
.t-wish li::marker { color: #9e2236; font-weight: 700; }
.t-note { font-size: 8.5pt; line-height: 1.2; font-style: italic; color: #3b3033; }
.t-wl { display: flex; flex-direction: column; gap: 3.2mm; font-size: 9pt; color: #4b3f42; margin-top: 0.5mm; }
.t-wl .wl-u { display: block; border-bottom: 0.25mm solid #8a7d78; height: 3mm; }
.t-foot { margin-top: auto; font-size: 7.8pt; line-height: 1.25; color: #3b3033; display: flex; flex-direction: column; border-top: 0.25mm solid #d6ccc4; padding-top: 1mm; }
.t-foot span:first-child { font-weight: 700; color: #231a1c; }
.t-keep { color: #5b4c50; }
.stub { flex: none; width: 33mm; border-left: 0.45mm dashed #6f6260; padding: 3.2mm 2.6mm 2.6mm 2.8mm; display: flex; flex-direction: column; gap: 1.2mm; font-size: 7.8pt; line-height: 1.2; }
.s-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6mm 1mm; }
.s-code { font: 400 14pt/1 var(--head); color: #9e2236; white-space: nowrap; }
/* long charity IDs (DC1005A, WAC-2026-0145A) get smaller numbers so they never break or push "Donor slip" out */
.tag.code-l .s-code { font-size: 10.5pt; }
.tag.code-l .t-code { font-size: 15pt; }
.tag.code-xl .s-code { font-size: 8.5pt; }
.tag.code-xl .t-code { font-size: 12pt; }
.s-k { white-space: nowrap; font-size: 7pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #5b4c50; }
.s-who { font-weight: 700; font-size: 8pt; }
.wl { display: flex; flex-direction: column; }
.wl-l { font-size: 7pt; color: #5b4c50; }
.wl .wl-u { border-bottom: 0.25mm solid #8a7d78; height: 3.6mm; }
.s-due { margin-top: auto; font-size: 8pt; }
.s-tip { font-size: 7pt; color: #5b4c50; }
.per-10 .stub { width: 31mm; gap: 0.6mm; padding-top: 2.6mm; }
.per-10 .wl .wl-u { height: 2.8mm; }
.per-10 .t-body { padding-top: 2.6mm; gap: 0.6mm; }
.per-10 .t-code { font-size: 16pt; }
.per-10 .t-wish { font-size: 9.2pt; line-height: 1.18; }
.per-10 .s-tip { display: none; }
/* large: hole at the top, stub across the bottom */
.per-4 .tag { flex-direction: column; }
.per-4 .t-body { padding: 13mm 7mm 4mm; gap: 2mm; }
.per-4 .hole { top: 4mm; margin-left: -3mm; width: 6mm; height: 6mm; }
.per-4 .t-head { justify-content: center; text-align: center; flex-direction: column; align-items: center; gap: 1mm; }
.per-4 .t-code { font-size: 28pt; }
.per-4 .t-who { font-size: 14pt; }
.per-4 .t-title { text-align: center; font-size: 10.5pt; white-space: normal; }
.per-4 .t-sizes { font-size: 10.5pt; justify-content: center; gap: 0 4mm; }
.per-4 .t-wish { font-size: 12.5pt; line-height: 1.3; padding-left: 6mm; margin-top: 2mm; }
.per-4 .t-note { font-size: 10.5pt; }
.per-4 .t-wl { font-size: 11pt; gap: 4.6mm; }
.per-4 .t-wl .wl-u { height: 4mm; }
.per-4 .t-fill { font-size: 11pt; }
.per-4 .t-foot { font-size: 9.5pt; text-align: center; }
.per-4 .stub { width: auto; height: 40mm; border-left: 0; border-top: 0.45mm dashed #6f6260; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto 1fr; gap: 1mm 5mm; padding: 3mm 7mm; font-size: 9pt; }
.per-4 .s-head { grid-column: 1 / -1; justify-content: flex-start; gap: 4mm; }
.per-4 .s-code { font-size: 16pt; }
.per-4 .tag.code-l .t-code { font-size: 24pt; }
.per-4 .tag.code-xl .t-code { font-size: 19pt; }
.per-4 .s-k { font-size: 8.5pt; }
.per-4 .s-who { grid-column: 1 / -1; font-size: 9.5pt; }
.per-4 .wl-l { font-size: 8pt; }
.per-4 .wl .wl-u { height: 5mm; }
.per-4 .s-due { margin-top: 0; align-self: end; font-size: 9.5pt; }
.per-4 .s-tip { align-self: end; font-size: 8.5pt; }
/* lots of text: smaller type (chosen by measuring each tag in app.js) */
.fit-s .t-wish { font-size: 9pt; }
.fit-s .t-sizes, .fit-s .t-note { font-size: 8pt; }
.fit-s .t-keep, .fit-xs .t-keep, .fit-xxs .t-keep { display: none; }
.fit-xs .t-wish, .fit-xxs .t-wish { font-size: 8.2pt; line-height: 1.14; }
.fit-xs .t-sizes, .fit-xs .t-note, .fit-xxs .t-sizes, .fit-xxs .t-note { font-size: 7.4pt; }
.fit-xs .t-foot, .fit-xxs .t-foot { font-size: 7.2pt; }
.fit-xxs .t-title { display: none; }
.fit-xxs .t-code { font-size: 14pt; }
.per-4 .fit-s .t-wish { font-size: 11pt; }
.per-4 .fit-xs .t-wish, .per-4 .fit-xxs .t-wish { font-size: 10pt; }
.per-4 .fit-s .t-sizes, .per-4 .fit-s .t-note { font-size: 9.5pt; }
.per-4 .fit-xs .t-sizes, .per-4 .fit-xs .t-note, .per-4 .fit-xxs .t-sizes, .per-4 .fit-xxs .t-note { font-size: 8.5pt; }
.per-4 .fit-xs .t-foot, .per-4 .fit-xxs .t-foot { font-size: 8.5pt; }
.per-4 .fit-xxs .t-code { font-size: 22pt; }
.per-10 .t-keep { display: none; }

/* flowing sheets */
.sheet.flow { width: 194mm; padding: 6mm 0 4mm; font-family: var(--body); }
.sheets .sheet.flow { padding: 8mm 6mm; }
.sh-head { margin: 0 0 4mm; position: relative; }
.sh-head h3 { font: 400 17pt/1.2 var(--head); margin: 0 0 1mm; color: #231a1c; padding-right: 32mm; }
.sh-head p { margin: 0; font-size: 10pt; color: #3b3033; }
.sh-head .sh-date { position: absolute; right: 0; top: 1mm; font-size: 8.5pt; color: #5b4c50; }
.tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10pt; color: #231a1c; }
.tbl th { text-align: left; font-size: 9pt; font-weight: 700; color: #3b3033; border-bottom: 0.5mm solid #231a1c; padding: 1.2mm 1.5mm; }
.tbl td { border-bottom: 0.25mm solid #b9aaa0; padding: 1mm 1.5mm; height: 9mm; vertical-align: middle; overflow-wrap: break-word; }
.tbl tr { break-inside: avoid; }
.tbl .c-code { font: 400 12pt/1 var(--head); color: #9e2236; }
.tbl .c-who { font-size: 9pt; }
.tbl .c-date { font-size: 9pt; }
.tbl col.w-code { width: 15mm; }
.tbl.codes-l col.w-code { width: 22mm; }
.tbl.codes-xl col.w-code { width: 33mm; }
.tbl.codes-l .c-code, .tbl.codes-xl .c-code { font-size: 10.5pt; white-space: nowrap; }
.signout col.w-who { width: 28mm; }
.signout col.w-name { width: 40mm; }
.signout col.w-contact { width: auto; }
.signout col.w-date { width: 17mm; }
.signout col.w-box { width: 13mm; }
.checkin col.w-wish { width: 56mm; }
.checkin col.w-name { width: 40mm; }
.checkin col.w-in { width: 18mm; }
.checkin col.w-by { width: 24mm; }
.checkin col.w-notes { width: auto; }
.checkin td { vertical-align: top; padding-top: 1.6mm; padding-bottom: 1.6mm; }
.checkin .c-who b { display: block; margin-bottom: 0.6mm; }
.ci-w { display: flex; gap: 1.5mm; align-items: flex-start; font-size: 8.5pt; line-height: 1.25; }
.ci-w .cbox { margin-top: 0.4mm; width: 2.8mm; height: 2.8mm; }
.cbox { display: inline-block; width: 4mm; height: 4mm; border: 0.35mm solid #3b3033; border-radius: 0.6mm; vertical-align: middle; flex: none; position: relative; }
.cbox.on::after { content: ""; position: absolute; left: 1.1mm; top: 0.1mm; width: 1.2mm; height: 2.4mm; border-right: 0.5mm solid #231a1c; border-bottom: 0.5mm solid #231a1c; transform: rotate(45deg); }
.c-in { font-size: 9pt; }
.fam { break-inside: avoid; border: 0.3mm solid #9c918c; border-radius: 1.5mm; padding: 2mm 3mm 1.5mm; margin: 0 0 3mm; }
.fam-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1mm 4mm; border-bottom: 0.3mm solid #d6ccc4; padding-bottom: 1.2mm; margin-bottom: 1mm; }
.fam-n { font: 400 13pt/1.1 var(--head); color: #9e2236; }
.fam-l { font-size: 10pt; font-weight: 700; }
.fam-pick { margin-left: auto; font-size: 9pt; color: #3b3033; display: inline-flex; gap: 1.5mm; align-items: center; }
.fam-r { display: flex; align-items: flex-start; gap: 2.5mm; padding: 1.2mm 0; font-size: 10pt; border-bottom: 0.2mm dotted #c9bdb4; }
.fam-r:last-child { border-bottom: 0; }
.fam-r .cbox { margin-top: 0.6mm; }
.fr-code { font: 400 11pt/1.2 var(--head); min-width: 13mm; flex: none; white-space: nowrap; }
.fr-who { flex: 1; min-width: 0; }
.fr-who b { font-weight: 700; }
.fr-w { display: block; font-size: 8.5pt; color: #3b3033; }
.fr-st { flex: none; font-size: 8.5pt; color: #3b3033; width: 26mm; text-align: right; }
.fr-st.st-overdue { color: #8f4a00; font-weight: 700; }
.fam.blank .fam-r { border-bottom: 0; }
.fam.blank .fam-r .wl-u { flex: 1; border-bottom: 0.25mm solid #8a7d78; height: 6mm; }

@page { margin: 8mm; }
@media print {
  html, body { background: #fff !important; color: #231a1c; font-size: 10pt; }
  body > :not(main), .skip, .hero, .content, .tabs, .store-note, .example-bar, #panel-list, #panel-track,
  #sheet-seg, .popts, .print-line, .warn, .more-pages, .undo-bar, .toast { display: none !important; }
  main .wrap { max-width: none; padding: 0; }
  .tool { border: 0; padding: 0; margin: 0; background: none; }
  #panel-print, #panel-print[hidden] { display: block !important; padding: 0; }
  .preview { border: 0; padding: 0; background: none; overflow: visible; }
  .sheets { zoom: 1 !important; width: 194mm; }
  .sheets .page, .sheets .sheet { box-shadow: none; margin: 0; background: #fff; }
  .sheets .sheet.flow { padding: 0; }
  .sheets .page.later { display: block; }
  .page { break-after: page; }
  .page:last-child { break-after: auto; }
  .tbl thead { display: table-header-group; }
  .hole::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}