@font-face { font-family: "Baloo"; src: url("fonts/baloo2-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --bg: #fbf6f7; --paper: #ffffff; --ink: #2a1d26; --muted: #66545f; --line: #ecdfe4; --line-strong: #b9a6b0;
  --accent: #b8222b; --accent-ink: #ffffff; --soft: #fbe6e8;
  --ok: #24704a; --ok-soft: #e1f2e8; --amber: #8a4b00; --amber-soft: #fcefd9;
  --focus: #1a5fd0;
  --head: "Baloo", "Trebuchet MS", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 12px; --r-s: 6px;
  color-scheme: light dark;
}
body[data-season="val"] { --accent: #b31d58; --soft: #fae3ec; }
body[data-season="boo"] { --accent: #a84700; --soft: #fbe9da; }
body[data-season="carn"] { --accent: #24733f; --soft: #e2f1e6; }
body[data-season="other"] { --accent: #0b6874; --soft: #dff0f2; }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1519; --paper: #261c22; --ink: #f6eef2; --muted: #cbb9c3; --line: #3d2f37; --line-strong: #6c5a64;
    --accent: #f17a80; --accent-ink: #1c1519; --soft: #3a2228;
    --ok: #7fd3a3; --ok-soft: #1d3327; --amber: #f1a75a; --amber-soft: #3a2a17;
    --focus: #8ab4ff;
  }
  body[data-season="val"] { --accent: #f27aa8; --soft: #3a2230; }
  body[data-season="boo"] { --accent: #f6a25a; --soft: #3a2a1c; }
  body[data-season="carn"] { --accent: #79d197; --soft: #1e3326; }
  body[data-season="other"] { --accent: #6fd0dc; --soft: #1b3236; }
}

* { 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: 1000px; 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 with a candy-stripe edge */
.topbar { background: var(--paper); position: relative; }
.topbar::after { content: ""; display: block; height: 6px; background: repeating-linear-gradient(-45deg, var(--accent) 0 9px, var(--paper) 9px 18px); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 23px/1 var(--head); }
.brand svg { color: var(--accent); flex: none; }
.topbar nav { display: flex; gap: 18px; 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 10px; max-width: 44rem; }
/* slip -> tag -> bag picture beside the title, wide screens only */
.hero-pic { display: none; }
@media (min-width: 900px) {
  .hero-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
  .hero-pic { display: flex; align-items: center; gap: 8px; padding-top: 14px; font: 600 14px/1.25 var(--body); color: #241820; }
  .hero-pic > div { width: 100px; height: 112px; display: flex; flex-direction: column; gap: 3px; padding: 9px 8px; }
  .fl-arrow { color: var(--accent); font: 800 22px/1 var(--head); }
  .fl-slip { background: #fffdf3; border: 1px solid #d9cfa6; background-image: repeating-linear-gradient(transparent 0 21px, #e5dcb6 21px 22px); transform: rotate(-4deg); font-style: italic; font-weight: 500; color: #3b3355; gap: 0 !important; line-height: 22px; padding-top: 2px !important; }
  .fl-tag { background: #fff; border: 1px solid var(--line-strong); border-top: 5px solid var(--accent); border-radius: var(--r-s); }
  .fl-tag b { align-self: flex-end; font: 800 15px/1 var(--head); color: #fff; background: var(--accent); border-radius: 4px; padding: 3px 6px 1px; }
  .fl-to { font: 800 16px/1.1 var(--head); }
  .fl-bag { position: relative; background: #d8b98c; color: #3a2a17; border-radius: 3px 3px 8px 8px; justify-content: flex-end; }
  .fl-bag-top { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-linear-gradient(90deg, #c9a774 0 8px, #d8b98c 8px 16px); border-radius: 3px 3px 0 0; }
  .fl-bag-l { font: 800 15px/1.1 var(--head); }
}
h1 { font: 800 clamp(29px, 6.4vw, 44px)/1.04 var(--head); margin: 0 0 8px; letter-spacing: -0.3px; }
.lede { margin: 0; color: var(--muted); }
h2 { font: 700 25px/1.2 var(--head); margin: 32px 0 8px; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 18px; border: 2px solid var(--line-strong); border-radius: 999px; 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; padding-left: 8px; padding-right: 8px; }
.btn.danger { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.small { min-height: 40px; padding: 6px 14px; 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, .sale-bar label { font-size: 15px; font-weight: 600; }
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-s); padding: 9px 10px; min-height: 44px; width: 100%; min-width: 0; }
textarea { resize: vertical; }
#rooms, #roster, #paste-box { font: 15px/1.4 ui-monospace, Menlo, Consolas, monospace; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .7; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 0; }
input[aria-invalid="true"] { border-color: var(--amber); }
.hint { color: var(--muted); font-size: 15px; margin: 4px 0 0; }
.hint:empty { display: none; }
.kb-hint { margin: 0 0 0 4px; }
@media (hover: none), (pointer: coarse) { .kb-hint { display: none; } }
.err { color: var(--amber); font-weight: 600; margin: 8px 0 0; }
.warn { background: var(--amber-soft); border-left: 4px solid var(--amber); padding: 10px 12px; margin: 10px 0; font-size: 16px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; cursor: pointer; }
.check input { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--accent); }

/* the tool */
.tool { margin: 10px 0 12px; }
.note-bar { margin: 0 0 10px; padding: 10px 14px; background: var(--amber-soft); border-radius: var(--r-s); font-size: 15px; }
.sale-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 12px; }
.sale-bar select { width: auto; font-weight: 700; border-color: var(--accent); }
.sale-sum { color: var(--muted); font-size: 15px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 0; }
.tabs button { min-height: 46px; padding: 6px 18px; border: 2px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; background: transparent; color: var(--muted); font: 700 19px/1 var(--head); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: inset 0 4px 0 var(--accent); }
.tabs .n { font: 600 14px var(--body); color: var(--muted); }
.panel { background: var(--paper); border: 2px solid var(--line); border-radius: 0 var(--r) var(--r) var(--r); padding: 16px; }

.slip-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 12px; align-items: start; }
.f-to, .f-room { grid-column: span 3; }
.f-from { grid-column: span 3; }
.f-anon { grid-column: span 3; align-self: end; }
.f-msg { grid-column: 1 / -1; }
.f-type { grid-column: span 3; }
.f-qty { grid-column: span 1; }
.f-paid { grid-column: span 2; align-self: end; }
.slip { padding-bottom: 14px; border-bottom: 2px dotted var(--line-strong); margin-bottom: 14px; }
.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; }

.totals { font-size: 16px; margin: 0 0 8px; }
.totals:empty { display: none; }
.totals b { font-family: var(--head); font-size: 20px; font-weight: 700; }
.totals .buy { color: var(--muted); }
.issues { margin: 0 0 12px; }
.issues:empty { display: none; }
.issues details { background: var(--amber-soft); border-radius: var(--r-s); padding: 2px 12px 8px; }
.issues summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.issues ul { margin: 0; padding-left: 1.1em; }
.issues li { margin: 4px 0; }
.issues li.soft { color: var(--muted); }
.issues .link { text-align: left; }

.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 12px 0 8px; }
.h-list { margin: 0; font-size: 22px; }
.list-tools { display: flex; gap: 8px; flex: 1 1 320px; justify-content: flex-end; }
.list-tools input { max-width: 260px; }
.list-tools select { width: auto; }
.orders { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ord { border-bottom: 1px solid var(--line); }
.ord-sum { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; width: 100%; min-height: 50px; padding: 9px 4px; background: none; border: 0; text-align: left; color: var(--ink); font: 16px/1.35 var(--body); cursor: pointer; }
.ord-sum:hover { background: var(--bg); }
.o-to { font-weight: 700; }
.o-room, .o-sub { color: var(--muted); font-size: 15px; }
.o-sub { grid-column: 1 / 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-flags { grid-row: 1; grid-column: 3; display: flex; gap: 4px; justify-content: flex-end; }
.chip { font-size: 13px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.chip.paid { background: var(--ok-soft); color: var(--ok); }
.chip.unpaid { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.chip.held { background: var(--amber-soft); color: var(--amber); }
.chip.fill { background: var(--soft); color: var(--ink); }
.ord.open { background: var(--bg); margin: 0 -16px; padding: 0 16px; }
.ord-ed { padding: 4px 4px 16px; }
.ord-ed .slip-grid { margin-bottom: 4px; }
.more { color: var(--muted); font-size: 15px; }
.empty { color: var(--muted); }
.empty p { margin: 4px 0 0; }
.sample { margin-top: 14px; }
.sample-cap { margin: 0 0 6px; font-size: 15px; }
.sample .tag { width: 97mm; height: 65mm; max-width: 100%; zoom: var(--sz, 1); background: #fff; border: 1px solid #c8b8c0; }
@media (max-width: 430px) { .sample .tag { --sz: .9; } }
@media (max-width: 360px) { .sample .tag { --sz: .78; } }

/* set up */
.h-sec { font-size: 21px; margin: 24px 0 8px; }
.panel > .h-sec:first-child { margin-top: 2px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 14px; }
.grid2 .wide { grid-column: 1 / -1; }
.types { display: flex; flex-direction: column; gap: 10px; }
.trow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.deal { display: flex; align-items: center; gap: 6px; }
.deal input { flex: 1; }
.deal span { font-size: 15px; color: var(--muted); }
.cur-l { font-size: 15px; font-weight: 600; margin-left: 8px; }
.cur { width: 70px; }
.everyone { margin-top: 18px; background: var(--soft); border-radius: var(--r); padding: 6px 14px 14px; }
.file-btn { cursor: pointer; }
.confirm { background: var(--soft); border-left: 4px solid var(--accent); padding: 10px 14px; margin-top: 12px; }
.confirm p { margin: 0; }

/* 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: 2px solid var(--line-strong); border-radius: 999px; 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: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-end; }
.popts .seg { margin: 0; }
.popts .field { width: 150px; }
.print-line { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 14px 0; }
.print-line .hint { margin: 0; flex: 1 1 220px; }
.preview { background: var(--bg); border-radius: var(--r-s); padding: 10px; overflow: hidden; }
.sheets { zoom: var(--z, 1); width: calc(194mm + 2px); }
.sheets .page, .sheets .sheet { background: #fff; color: #241820; box-shadow: 0 1px 4px rgba(0,0,0,.2); 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); }

/* money */
.msum { font-size: 17px; }
.mrow { display: flex; justify-content: space-between; gap: 12px; max-width: 460px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mrow b { font-family: var(--head); font-size: 21px; }
.mrow.bad b { color: var(--amber); }
.mrow.good b { color: var(--ok); }
.counted { max-width: 460px; margin-top: 14px; }
.counted input { max-width: 180px; }
.owed { list-style: none; padding: 0; margin: 0; }
.owed li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.owed .who { font-weight: 700; flex: 1 1 200px; }
.owed .who span { display: block; font-weight: 400; color: var(--muted); font-size: 15px; }
.senders summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; margin-top: 14px; }
.stbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.stbl th, .stbl td { text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--line); }
.stbl td.n, .stbl th.n { text-align: right; white-space: nowrap; }

.undo-bar { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--paper); padding: 8px 8px 8px 16px; border-radius: 18px; 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: 0; right: 0; margin: 0 auto; width: max-content; bottom: 80px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 12px; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 21; max-width: calc(100% - 32px); }
.toast.on { opacity: 1; }
.toast:empty { display: none; }

/* content */
.content { max-width: 44rem; padding-bottom: 20px; }
.content p, .content li { max-width: 68ch; }
.steps { padding-left: 1.4em; }
.steps li { margin-bottom: 8px; }
.steps li::marker { font: 700 18px 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: 640px) {
  body { font-size: 16px; }
  .topbar nav { display: none; }
  .tabs { gap: 4px; flex-wrap: nowrap; }
  .tabs button { flex: 1 1 auto; padding: 6px 8px; font-size: 17px; }
  .tabs .n { display: none; }
  .panel { padding: 14px 12px; border-radius: 0 0 var(--r) var(--r); }
  .ord.open { margin: 0 -12px; padding: 0 12px; }
  .f-to, .f-room, .f-from, .f-anon, .f-type { grid-column: 1 / -1; }
  .f-qty { grid-column: span 3; }
  .f-paid { grid-column: span 3; }
  .ord-sum { grid-template-columns: minmax(0, 1fr) auto; }
  .o-room { grid-column: 1; }
  .o-sub { grid-column: 1 / -1; }
  .o-flags { grid-column: 2; }
  .trow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .trow .t-name { grid-column: 1 / -1; }
  .trow .deal-f { grid-column: 1 / -1; }
  .list-tools { flex-basis: 100%; }
  .list-tools input { max-width: none; }
  .seg span { padding: 8px 12px; }
}
@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; border-top: 0.3mm solid #a8979f; border-left: 0.3mm solid #a8979f; }
.per-4 .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.per-8 .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
.per-12 .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
.per-21 .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); }
.grid > .tag { border-right: 0.3mm solid #a8979f; border-bottom: 0.3mm solid #a8979f; }
.measure { position: absolute; left: -10000px; top: 0; visibility: hidden; width: 194mm; }
.measure .page.later { display: block; }

.tag { display: flex; flex-direction: column; overflow: hidden; height: 100%; padding: 3.2mm 3.6mm 2.8mm; gap: 1mm; font-family: var(--body); color: #241820; --ink-a: #9b1c24; }
.tag.empty { padding: 0; }
.tag > * { flex: none; }
.s-val .tag, .tag.s-val { --ink-a: #a3184f; }
.s-boo .tag, .tag.s-boo { --ink-a: #9a4100; }
.s-carn .tag, .tag.s-carn { --ink-a: #1f6537; }
.s-other .tag, .tag.s-other { --ink-a: #0a5c66; }
.t-top { display: flex; align-items: center; gap: 1.6mm; font-size: 7.6pt; color: #5d4b55; line-height: 1.1; }
.t-top svg { width: 6mm; height: 6mm; flex: none; color: var(--ink-a); }
.t-sale { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 8.6pt/1.1 var(--head); color: var(--ink-a); }
.t-no { font: 700 9pt/1 var(--body); color: #241820; border: 0.3mm solid #8e7c86; border-radius: 1mm; padding: 0.6mm 1.4mm; white-space: nowrap; }
.t-to { font: 800 17pt/1.02 var(--head); margin-top: 0.6mm; overflow-wrap: break-word; }
.t-room { font-size: 8.6pt; font-weight: 700; color: #3d2d36; line-height: 1.2; }
.t-msg { flex: 0 1 auto; min-height: 0; overflow: hidden; font-size: 10.5pt; line-height: 1.25; margin-top: 0.6mm; overflow-wrap: break-word; white-space: pre-line; }
.t-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 2mm; font-size: 8.4pt; line-height: 1.2; border-top: 0.25mm solid #dccdd4; padding-top: 0.9mm; }
.t-from { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.t-from b { font-weight: 700; }
.t-item { flex: none; max-width: 60%; text-align: right; color: #5d4b55; }
.t-line { display: flex; gap: 1.5mm; align-items: flex-end; font-size: 8.6pt; color: #5d4b55; }
.t-line i { flex: 1; border-bottom: 0.25mm solid #8e7c86; height: 4mm; font-style: normal; }
.t-lines { display: flex; flex-direction: column; gap: 3mm; margin-top: 1mm; }
.tag.blank .t-from-l { margin-top: auto; }
.tag.blank .t-lines { gap: 4.2mm; margin-top: 2mm; }
.t-lines i { display: block; border-bottom: 0.25mm solid #8e7c86; height: 3.4mm; }
.per-8 .t-to { font-size: 19pt; }
.per-8 .t-msg { font-size: 12pt; line-height: 1.28; }
.per-8 .t-room { font-size: 9.4pt; }
.per-4 .tag { padding: 7mm 8mm 6mm; gap: 2.2mm; }
.per-4 .t-top { font-size: 9pt; }
.per-4 .t-top svg { width: 10mm; height: 10mm; }
.per-4 .t-sale { font-size: 12pt; }
.per-4 .t-no { font-size: 11pt; }
.per-4 .t-to { font-size: 26pt; margin-top: 3mm; }
.per-4 .t-room { font-size: 11pt; }
.per-4 .t-msg { font-size: 14pt; line-height: 1.32; margin-top: 3mm; }
.per-4 .t-foot { font-size: 10.5pt; padding-top: 2mm; }
.per-4 .t-line { font-size: 11pt; }
.per-4 .t-lines { gap: 6mm; margin-top: 3mm; }
.per-4 .t-lines i { height: 5mm; }
.per-12 .tag { padding: 2.8mm 3mm 2.4mm; }
.per-12 .t-to { font-size: 14pt; }
.per-12 .t-msg { font-size: 9.4pt; }
.per-12 .t-foot { flex-direction: column; align-items: flex-start; gap: 0.2mm; font-size: 8pt; }
.per-12 .t-item { text-align: left; flex: none; max-width: none; }
.per-21 .tag { padding: 1.8mm 2.6mm 1.6mm; gap: 0.4mm; }
.per-21 .t-top svg { display: none; }
.per-21 .t-sale { font-size: 7pt; }
.per-21 .t-no { font-size: 7.6pt; padding: 0.3mm 1mm; }
.per-21 .t-to { font-size: 11.5pt; margin-top: 0; }
.per-21 .t-room { font-size: 7.4pt; }
.per-21 .t-msg { font-size: 7.8pt; line-height: 1.15; margin-top: 0.2mm; }
.per-21 .t-foot { display: block; font-size: 7pt; padding-top: 0.5mm; }
.per-21 .t-from:not(:empty)::after { content: " · "; }
.per-21 .t-lines { gap: 1.6mm; }
.per-21 .t-lines i { height: 2.6mm; }
/* lots of text: smaller type (picked by measuring each tag in app.js) */
.fit-s .t-msg { font-size: 9.6pt; }
.per-8 .fit-s .t-msg { font-size: 10.4pt; }
.per-8 .fit-xs .t-msg { font-size: 9pt; }
.fit-xs .t-msg { font-size: 8pt; line-height: 1.16; }
.fit-xs .t-to { font-size: 14pt; }
.per-8 .fit-l .t-msg { font-size: 14pt; line-height: 1.26; }
.per-4 .fit-l .t-msg { font-size: 18pt; line-height: 1.28; }
.per-4 .fit-s .t-msg { font-size: 12pt; }
.per-4 .fit-xs .t-msg { font-size: 10.5pt; }
.per-4 .fit-xs .t-to { font-size: 22pt; }
.per-12 .fit-s .t-msg { font-size: 8.4pt; }
.per-12 .fit-xs .t-msg { font-size: 7.6pt; }
.per-12 .fit-xs .t-to { font-size: 12pt; }
.per-21 .fit-s .t-msg { font-size: 7.2pt; }
.per-21 .fit-xs .t-msg { font-size: 6.8pt; line-height: 1.1; }
.per-21 .fit-xs .t-to { font-size: 10pt; }

/* flowing sheets */
.sheet.flow { width: 194mm; padding: 6mm 0 4mm; font-family: var(--body); color: #241820; }
.sheets .sheet.flow { padding: 8mm 6mm; }
.sh-head { margin: 0 0 4mm; position: relative; }
.sh-head h3 { font: 800 18pt/1.15 var(--head); margin: 0 0 1mm; padding-right: 34mm; }
.sh-head p { margin: 0; font-size: 10pt; color: #3d2d36; }
.sh-head .sh-date { position: absolute; right: 0; top: 1.4mm; font-size: 8.5pt; color: #5d4b55; }
.tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10.5pt; }
.tbl th { text-align: left; font-size: 9pt; font-weight: 700; color: #3d2d36; border-bottom: 0.5mm solid #241820; padding: 1.2mm 1.5mm; }
.tbl td { border-bottom: 0.25mm solid #c4b3bb; padding: 1.2mm 1.5mm; height: 7.5mm; vertical-align: middle; overflow-wrap: anywhere; }
.tbl tr { break-inside: avoid; }
.tbl .n { text-align: right; }
.tbl .c-no { font-weight: 700; }
.tbl .c-box { text-align: center; }
.cbox { display: inline-block; width: 4mm; height: 4mm; border: 0.35mm solid #3d2d36; border-radius: 0.6mm; vertical-align: middle; }
.bag { break-inside: avoid; margin: 0 0 6mm; }
.bag.long { break-inside: auto; }
.bag-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1mm 5mm; border-bottom: 0.6mm solid #241820; padding-bottom: 1.2mm; margin-bottom: 0.5mm; break-after: avoid; }
.tbl th.bag-th { border-bottom: 0; padding: 0 0 1mm; font-weight: 400; color: #241820; font-size: 10pt; }
.bag-sale { margin: 0 0 1.5mm; font-size: 9pt; color: #5d4b55; }
.bag-h h4 { font: 800 15pt/1.1 var(--head); margin: 0; }
.bag-h .bag-m { font-size: 9.5pt; color: #3d2d36; }
.bag-h .bag-no { margin-left: auto; font-size: 9.5pt; font-weight: 700; }
.bag .tbl th { border-bottom-width: 0.3mm; }
.tbl tbody.keep { break-inside: avoid; }
.tbl tr.foot td { border: 0; height: auto; padding: 0; }
.bag-f { display: flex; flex-wrap: wrap; gap: 2mm 8mm; font-size: 9.5pt; padding-top: 2mm; color: #3d2d36; }
.bag-f span { display: inline-flex; align-items: center; gap: 1.5mm; }
.bag-f i { display: inline-block; width: 32mm; border-bottom: 0.25mm solid #8e7c86; height: 4mm; }
.room-page .bag { break-after: page; break-inside: auto; }
.room-page .bag:last-child { break-after: auto; }
.shop { margin-top: 7mm; break-inside: avoid; }
.shop h4, .msheet h4 { font: 800 14pt/1.2 var(--head); margin: 0 0 2mm; }
.msheet .tot { width: 120mm; margin-bottom: 6mm; }
.msheet .tot td { height: 8mm; }
.msheet .tot td.n { font-weight: 700; font-size: 11pt; }
.sign { display: flex; gap: 10mm; margin-top: 8mm; font-size: 10pt; break-inside: avoid; }
.sign span { flex: 1; border-top: 0.3mm solid #241820; padding-top: 1mm; }
/* order slips */
.slips { width: 194mm; }
.oslip { height: 86mm; border-bottom: 0.4mm dashed #8e7c86; padding: 5mm 4mm 4mm; display: flex; flex-direction: column; gap: 2.2mm; font-size: 10.5pt; color: #241820; break-inside: avoid; overflow: hidden; }
.oslip:nth-child(3n) { border-bottom: 0; }
.os-h { display: flex; align-items: center; gap: 3mm; }
.os-h svg { width: 9mm; height: 9mm; color: var(--ink-a); flex: none; }
.os-h h4 { font: 800 15pt/1.1 var(--head); margin: 0; flex: 1; }
.os-h .os-p { font-size: 9.5pt; text-align: right; color: #3d2d36; }
.os-row { display: flex; gap: 5mm; }
.os-f { flex: 1; display: flex; align-items: flex-end; gap: 1.5mm; white-space: nowrap; }
.os-f i { flex: 1; border-bottom: 0.25mm solid #6f5e68; height: 5mm; }
.os-msg { display: flex; flex-direction: column; gap: 4.4mm; }
.os-msg i { display: block; border-bottom: 0.25mm solid #6f5e68; height: 4mm; }
.os-types { display: flex; flex-wrap: wrap; gap: 1.5mm 6mm; font-size: 10pt; }
.os-types span { display: inline-flex; align-items: center; gap: 1.5mm; }
.os-types i { display: inline-block; width: 9mm; border-bottom: 0.25mm solid #6f5e68; height: 4mm; }
.os-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 8.8pt; color: #3d2d36; gap: 4mm; }
.osheet .tbl td { height: 13mm; }
.osheet .tbl .c-msg { width: auto; }
.os-top { display: flex; gap: 8mm; margin: 0 0 4mm; font-size: 10.5pt; }

@page { margin: 8mm; }
@media print {
  html, body { background: #fff !important; color: #241820; font-size: 10pt; }
  body > :not(main), .skip, .hero, .hero-pic, .content, .tabs, .note-bar, .sale-bar, #panel-orders, #panel-setup, #panel-money,
  #sheet-seg, .popts, .print-line, .warn, .more-pages, .undo-bar, .toast { display: none !important; }
  main .wrap { max-width: none; padding: 0; }
  .tool { margin: 0; }
  #panel-print, #panel-print[hidden] { display: block !important; padding: 0; border: 0; background: none; }
  .preview { 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; }
  .t-top svg, .os-h svg, .t-sale { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}