@font-face {
  font-family: 'Big Shoulders Stencil';
  src: url(../fonts/big-shoulders-stencil.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url(../fonts/archivo.woff2) format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Permanent Marker';
  src: url(../fonts/permanent-marker.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* One inch on paper; on screen, whatever makes a label or page fit its frame. */
@property --u { syntax: '<length>'; inherits: true; initial-value: 1in; }

:root {
  color-scheme: light;
  --kraft: #c39a6b;
  --kraft-hi: #d4b088;
  --kraft-lo: #a57c4e;
  --kraft-deep: #8a6339;
  --kraft-ink: #3a2816;
  --paper: #fffdf8;
  --paper-2: #f6f0e6;
  --ink: #221a12;
  --ink-2: #4e4134;
  --muted: #776654;
  --line: #e7ddcd;
  --line-2: #d2c2aa;
  --tape: rgba(240, 222, 182, .72);
  --tape-edge: rgba(150, 118, 70, .25);
  --stamp: #c4122f;
  --go: #23794a;
  --go-soft: #dcefe2;
  --warn: #9a5a00;
  --warn-soft: #fbedd2;
  --bad: #b3261e;
  --bad-soft: #f9e1de;
  --shadow: 0 1px 0 rgba(70, 45, 15, .07), 0 10px 22px -14px rgba(70, 45, 15, .55);
  --stencil: 'Big Shoulders Stencil', Impact, 'Arial Narrow Bold', sans-serif;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --marker: 'Permanent Marker', 'Marker Felt', 'Comic Sans MS', cursive;
  --tabs-h: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 16px/1.45 var(--sans);
  background-color: var(--kraft);
  /* Cardboard: a few soft fibres over the brown. */
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255, 236, 205, .35), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .23 0 0 0 0 .1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)' opacity='.38'/%3E%3C/svg%3E");
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom));
}
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
p, li { text-wrap: pretty; }
h1, h2, h3 { line-height: 1.1; margin: 0; }
.icon { width: 22px; height: 22px; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- The top: a strip of packing tape across the box ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: linear-gradient(180deg, rgba(250, 236, 205, .55), rgba(232, 206, 160, .5)), var(--kraft-hi);
  border-bottom: 1px solid var(--tape-edge);
  box-shadow: 0 6px 14px -10px rgba(60, 35, 10, .5);
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--kraft-ink);
  font: 800 1.55rem/1 var(--stencil); letter-spacing: .04em; text-transform: uppercase;
}
.brand-up { width: 26px; height: 26px; }
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom));
  padding: 0 4px env(safe-area-inset-bottom);
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -8px 20px -14px rgba(60, 35, 10, .5);
}
.tabs a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--muted);
  font: 650 .74rem/1 var(--sans); font-stretch: 90%; letter-spacing: .02em; text-transform: uppercase;
}
.tabs a.on { color: var(--ink); }
.tabs a.on .icon { color: var(--ink); }
.tabs a.on::before {
  content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--ink);
}
.badge {
  position: absolute; top: 7px; left: calc(50% + 6px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--stamp); color: #fff; font: 700 .7rem/18px var(--sans); text-align: center;
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .top { padding: 12px max(24px, calc(50vw - 520px)); }
  .tabs {
    position: static; display: flex; gap: 4px; height: auto; margin-left: auto;
    padding: 0; background: none; border: 0; box-shadow: none;
  }
  .tabs a { flex-direction: row; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: .86rem; color: var(--kraft-ink); }
  .tabs a:hover { background: rgba(255, 250, 240, .45); }
  .tabs a.on { background: var(--ink); color: var(--paper); }
  .tabs a.on .icon { color: var(--paper); }
  .tabs a.on::before { display: none; }
  .badge { position: static; margin-left: -2px; }
}

/* ---------- Page ---------- */
main { display: block; max-width: 1040px; margin: 0 auto; padding: 18px 16px 28px; outline: none; }
.narrow { max-width: 620px; margin: 0 auto; }
.screen-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 2px 14px; }
.screen-head h1 { font: 800 2.1rem/0.95 var(--stencil); letter-spacing: .03em; text-transform: uppercase; color: var(--kraft-ink); }
.screen-head p { margin: 4px 0 0; color: var(--kraft-ink); opacity: .85; }
.kicker { font: 700 .74rem/1.2 var(--sans); font-stretch: 85%; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.card {
  background: var(--paper); border-radius: 14px; box-shadow: var(--shadow);
  padding: 18px 16px; margin: 0 0 14px;
}
.card > h2, .card-h { font: 750 1.08rem/1.2 var(--sans); margin: 0 0 10px; }
.card p { margin: 0 0 10px; color: var(--ink-2); }
.card p:last-child { margin-bottom: 0; }
.hint { color: var(--muted); font-size: .9rem; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row.end { justify-content: flex-end; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.grow { flex: 1 1 auto; }

/* ---------- Buttons, chips, fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink);
  font: 700 .98rem/1.15 var(--sans); text-decoration: none; text-align: center;
  transition: transform .08s, background .15s, border-color .15s;
}
.btn:hover { border-color: var(--ink-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.primary:hover { background: #3a2e22; }
.btn.go { background: var(--go); border-color: var(--go); color: #fff; }
.btn.danger { color: var(--bad); border-color: #e6b8b2; }
.btn.small { min-height: 36px; padding: 6px 13px; font-size: .88rem; }
.btn.wide { width: 100%; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn .icon { width: 20px; height: 20px; }
/* Not available yet: solid and quiet, never see-through (on a phone the Save button floats over the label). */
.btn[aria-disabled="true"], .btn:disabled { pointer-events: none; background: #ece5d9; border-color: #ddd3c3; color: #9c8d7a; }
.btn.primary[aria-disabled="true"], .btn.primary:disabled { background: #b8ab99; border-color: #b8ab99; color: #f8f3eb; }
.linkish { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 650; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 7px 13px; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: var(--paper);
  font: 650 .93rem/1.1 var(--sans); color: var(--ink);
}
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.add { border-style: dashed; color: var(--ink-2); }
.chip .dot { width: 16px; height: 16px; flex: none; }
.chip small { font-weight: 500; opacity: .7; }

label.field { display: grid; gap: 6px; font-weight: 650; font-size: .92rem; }
.input, textarea.input, select.input {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff;
  font-size: 1rem; font-weight: 450;
}
textarea.input { resize: vertical; line-height: 1.5; }
.input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(34, 26, 18, .12); }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); }
.seg button { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--ink-2); min-height: 38px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* A room's sticker: its shape, in its colour. */
.dot { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: -4px; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6)); }
.dot.big { width: 34px; height: 34px; }

/* Flag icons */
.ficon { width: 18px; height: 18px; flex: none; }
.f-fragile { color: var(--stamp); }
.f-first { color: #c98a00; }
.f-heavy { color: var(--ink-2); }
.f-car { color: #2a6fb0; }

/* ---------- Welcome ---------- */
.welcome { max-width: 620px; margin: 6px auto 0; display: grid; gap: 14px; }
.sample { margin: 0; }
.sample .boxside { padding: 18px 20px 22px; }
.sample figcaption { margin: 8px 6px 0; text-align: center; color: var(--kraft-ink); font-size: .9rem; text-wrap: balance; }
@media (min-width: 900px) {
  .welcome { max-width: 1000px; grid-template-columns: minmax(0, 1fr) 420px; align-items: center; column-gap: 28px; }
  .welcome > .how, .welcome > .hint { grid-column: 1 / -1; }
  .sample .boxside { transform: rotate(1.2deg); }
}
.hero {
  position: relative; overflow: hidden;
  background: var(--paper); border-radius: 18px; box-shadow: var(--shadow);
  padding: 22px 18px 20px;
}
.hero h1 { font: 800 2.6rem/.92 var(--stencil); letter-spacing: .02em; text-transform: uppercase; margin: 0 0 12px; }
.hero p { margin: 0 0 12px; color: var(--ink-2); font-size: 1.04rem; }
.hero .row { margin-top: 16px; }
.how { display: grid; gap: 0; margin: 0; padding: 4px 16px; list-style: none; background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); }
.how li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 14px 0; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.how li:last-child { border-bottom: 0; }
.how b { color: var(--ink); }
.center { text-align: center; }
.welcome > .hint { color: var(--kraft-ink); margin: 0 8px; }

/* ---------- Banners and nudges ---------- */
.banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px 14px; margin: 0 0 12px; border-radius: 14px;
  background: var(--paper); box-shadow: var(--shadow); border-left: 6px solid var(--ink);
}
.banner p { margin: 0; flex: 1 1 260px; color: var(--ink-2); }
.banner p b { color: var(--ink); }
.banner.warn { border-left-color: #d98c00; background: #fffaf0; }
.nudges { display: grid; gap: 8px; margin: 0 0 14px; }
@media (min-width: 760px) { .nudges { grid-template-columns: 1fr 1fr; } }
.nudge {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 10px 14px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink-2); line-height: 1.3;
}
.nudge b { color: var(--ink); }
.nudge > .icon:first-child, .nudge > .ficon:first-child { width: 24px; height: 24px; color: var(--ink); }
.nudge.first > .ficon { color: #c98a00; }
.nudge .go { margin-left: auto; width: 20px; height: 20px; color: var(--muted); }
.nudge:hover { box-shadow: var(--shadow), 0 0 0 2px rgba(34, 26, 18, .14); }

/* ---------- Boxes: search, summary and the list ---------- */
.find { position: relative; margin: 0 0 12px; }
.find .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.find input {
  width: 100%; height: 54px; padding: 0 44px 0 46px; border-radius: 16px;
  border: 0; background: var(--paper); box-shadow: var(--shadow);
  font-size: 1.08rem; font-weight: 500;
}
.find input::-webkit-search-cancel-button, .find input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.find input::placeholder { color: #9b8a76; font-family: var(--marker); font-size: 1.06rem; letter-spacing: .01em; }
.find input:focus { outline: none; box-shadow: var(--shadow), 0 0 0 3px rgba(34, 26, 18, .2); }
.find .clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; background: none; border-radius: 50%; color: var(--muted); display: grid; place-items: center; }
.tally { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 2px 12px; }
.tally span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; background: rgba(255, 250, 240, .5); color: var(--kraft-ink); font: 650 .86rem/1.3 var(--sans); }
.tally b { font: 800 1.05rem/1 var(--stencil); letter-spacing: .02em; }
.filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -16px 4px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters .chip { flex: none; min-height: 36px; padding: 5px 12px; font-size: .88rem; background: rgba(255, 252, 245, .8); border-color: rgba(120, 90, 50, .25); }
.filters .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 2px 8px; color: var(--kraft-ink); }
.list-head h2 { font: 800 1.2rem/1 var(--stencil); letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }

.boxes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
@media (min-width: 760px) { .boxes { grid-template-columns: 1fr 1fr; } }
.boxrow {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px 10px 10px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow);
  text-decoration: none; color: inherit; min-height: 82px;
}
.boxrow:hover { box-shadow: var(--shadow), 0 0 0 2px rgba(34, 26, 18, .14); }
.boxrow .what { min-width: 0; }
.boxrow .where { display: block; font-weight: 750; font-size: 1rem; line-height: 1.25; }
.boxrow .where small { font-weight: 500; color: var(--muted); font-size: .84rem; margin-left: 6px; white-space: nowrap; }
.boxrow .where .to { font-weight: 600; color: var(--ink-2); font-size: .9rem; margin-left: 6px; white-space: nowrap; }
.boxrow .things { margin: 3px 0 0; color: var(--ink-2); font-size: .92rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.boxrow .flags { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.boxrow.done { opacity: .62; }
.status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; font: 700 .72rem/1.3 var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.status.on { background: var(--go-soft); color: var(--go); }
.status.warn { background: var(--warn-soft); color: var(--warn); }
.status.off { background: var(--paper-2); color: var(--muted); }

/* A box from above: brown, taped down the middle, its number stencilled on, the room's sticker in the corner. */
.tile {
  position: relative; width: 62px; height: 62px; border-radius: 6px;
  background: linear-gradient(135deg, var(--kraft-hi), var(--kraft) 55%, var(--kraft-lo));
  box-shadow: inset 0 0 0 1px rgba(90, 60, 25, .25), inset 0 -3px 0 rgba(90, 60, 25, .15);
  display: grid; place-items: center; overflow: hidden;
}
.tile::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 15px; transform: translateX(-50%); background: var(--tape); border-left: 1px solid var(--tape-edge); border-right: 1px solid var(--tape-edge); }
.tile b { position: relative; font: 800 1.9rem/1 var(--stencil); color: #1e140b; letter-spacing: .01em; }
.tile[data-digits="3"] b { font-size: 1.55rem; }
.tile[data-digits="4"] b { font-size: 1.2rem; }
.tile .dot { position: absolute; right: 3px; bottom: 3px; width: 19px; height: 19px; filter: drop-shadow(0 1px 1px rgba(40, 25, 10, .35)); }
.tile.piece { background: linear-gradient(135deg, #b9b2a6, #9d968a 60%, #8a8377); border-radius: 50% 50% 8px 8px / 20% 20% 8px 8px; }
.tile.piece::before { display: none; }
.tile.small { width: 44px; height: 44px; }
.tile.small b { font-size: 1.35rem; }
.tile.small::before { width: 10px; }

.empty-note { text-align: center; padding: 26px 16px; color: var(--kraft-ink); }
.empty-note p { margin: 0 0 12px; text-wrap: balance; }
.empty-note .row { justify-content: center; }

.group-head { display: flex; align-items: center; gap: 8px; margin: 14px 2px 8px; font: 800 1.15rem/1 var(--stencil); letter-spacing: .05em; text-transform: uppercase; color: var(--kraft-ink); }
.group-head small, .list-head h2 small { font: 700 .85rem/1 var(--sans); letter-spacing: 0; opacity: .75; }
.icon.xs { width: 14px; height: 14px; }
.kraft { color: var(--kraft-ink); }
.kicker.kraft { opacity: .8; }
.crumb { display: inline-flex; align-items: center; gap: 4px; color: var(--kraft-ink); font-weight: 650; font-size: .9rem; text-decoration: none; margin-bottom: 4px; }
.crumb:hover { text-decoration: underline; }
.warn-text { color: var(--warn); }

/* The answer to a search */
.answer {
  display: flex; align-items: center; gap: 14px; padding: 14px; margin: 0 0 10px;
  border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); text-decoration: none;
  border: 2px solid var(--ink);
}
.answer .tile.big { width: 76px; height: 76px; }
.answer .tile.big b { font-size: 2.4rem; }
.answer .tile.big .dot { width: 24px; height: 24px; }
.answer-q { display: block; color: var(--muted); font-size: .92rem; }
.answer-a { display: block; font: 800 1.45rem/1.1 var(--sans); font-stretch: 85%; margin: 2px 0 4px; }
.answer-things { display: block; color: var(--ink-2); font-size: .9rem; line-height: 1.35; }
.answer-things mark, .boxrow mark { background: #ffe58a; color: inherit; border-radius: 2px; padding: 0; box-shadow: 0 0 0 2px #ffe58a; }
.answer.none { display: block; border: 0; text-align: center; color: var(--ink-2); }
.answer.none p { margin: 0 0 4px; }

/* ---------- Packing ---------- */
.pack-grid { display: grid; gap: 14px; align-items: start; }
@media (min-width: 900px) {
  .pack-grid { grid-template-columns: minmax(0, 1fr) 400px; }
  .pack-side { position: sticky; top: 84px; }
}
.pack-form { display: grid; gap: 16px; margin: 0; }
.pack-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.num-field { max-width: 130px; }
.input.num { font: 800 1.7rem/1 var(--stencil); letter-spacing: .04em; text-align: center; padding: 6px 10px; }
.num-note { margin: -8px 0 0; font-size: .9rem; color: var(--muted); min-height: 0; }
.num-note:empty { display: none; }
.num-note.bad { color: var(--bad); font-weight: 600; }
.rooms-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.rooms-pick legend { font-weight: 750; font-size: .95rem; padding: 0; margin-bottom: 8px; }
.rooms-pick legend .hint { font-weight: 450; font-size: .86rem; margin-left: 4px; }
.flags-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.flagbtn {
  display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 62px; padding: 9px 11px; border-radius: 12px;
  border: 1.5px solid var(--line-2); background: #fff;
}
.flagbtn .ficon { width: 26px; height: 26px; }
.flagbtn b { display: block; font-size: .95rem; line-height: 1.15; }
.flagbtn small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.2; margin-top: 2px; }
.flagbtn[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.flagbtn.f-fragile[aria-pressed="true"] { background: #fdeceb; }
.flagbtn.f-first[aria-pressed="true"] { background: #fff4d6; color: #8a5d00; }
.flagbtn.f-heavy[aria-pressed="true"] { background: #f0ebe4; color: var(--ink); }
.flagbtn.f-car[aria-pressed="true"] { background: #e6f0fa; }
.flagbtn[aria-pressed="true"] b { color: inherit; }
.photos-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.photos-pick #photoStrip { flex-basis: 100%; }
.photos-pick #photoStrip:empty { display: none; }
.photos-pick .hint { flex: 1 1 200px; font-size: .84rem; }
.save-bar { margin-top: 12px; display: grid; gap: 6px; }
.save-bar .btn { min-height: 56px; font-size: 1.08rem; }
.save-bar .hint { color: var(--kraft-ink); font-size: .86rem; }
/* The label inside the form, on a phone: a bit of box with the label on it, just above what's in it. */
.label-slot:empty { display: none; }
.label-slot .label-block { display: grid; gap: 8px; }
.label-slot .kicker { margin: 0; color: var(--muted); opacity: 1; }
.label-slot .boxside { padding: 14px 16px 16px; }
.label-slot .hint.under { display: none; }
/* Saved a moment ago (beside the next box's number, so nothing sits on the Save button), and a draft brought back. */
.saved-note { display: grid; justify-items: end; gap: 3px; margin: 0; color: var(--kraft-ink); font-weight: 700; font-size: .92rem; line-height: 1.25; text-align: right; }
.saved-note .icon { vertical-align: -2px; color: var(--go); stroke-width: 3; }
.saved-note a { font-weight: 800; text-underline-offset: 3px; }
.draft-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--paper-2); border: 1.5px dashed var(--line-2); color: var(--ink-2); font-size: .92rem; }
/* On a phone the Save button waits just above the tabs, wherever you are in the form. */
@media (max-width: 899px) {
  /* The footer (and the end of the form) clear the Save button. */
  body:has(.save-bar) .jd-foot { padding-bottom: 104px; }
  .save-bar { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 10px); z-index: 15; margin: 0; }
  .save-bar .btn { box-shadow: 0 12px 26px -8px rgba(30, 20, 10, .7); }
  .save-bar .hint { display: none; }
  /* Any message clears the Save button. */
  body:has(.save-bar) .toast { bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 84px); }
}

/* Photos */
.photos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; padding: 0; }
.photos li { position: relative; }
.ph { display: block; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-missing { display: grid; place-items: center; gap: 2px; height: 100%; color: var(--muted); font-size: .7rem; line-height: 1.1; padding: 6px; text-align: center; }
.ph-x { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper); display: grid; place-items: center; padding: 0; }
.ph-x .icon { width: 14px; height: 14px; }
.ph-big { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; background: #000; }

/* ---------- One box ---------- */
.box-grid { display: grid; gap: 14px; align-items: start; }
@media (min-width: 900px) { .box-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .box-label { position: sticky; top: 84px; } }
.label-acts { margin: 10px 2px 0; }
.label-acts .hint { color: var(--kraft-ink); font-size: .88rem; }
.where-big { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; }
.where-big > span { display: grid; }
.where-big small { color: var(--muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.where-big b { font: 800 1.5rem/1.1 var(--sans); font-stretch: 80%; }
.where-big .from b { font-size: 1.1rem; font-weight: 650; }
.flag-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 !important; }
.flagtag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--paper-2); font-weight: 700; font-size: .9rem; color: var(--ink); }
.things-list { margin: 0 0 6px; padding: 0 0 0 1.1em; display: grid; gap: 3px; }
.things-list li { padding-left: 2px; }
.things-list li::marker { color: var(--kraft-lo); }
.stages { display: grid; gap: 8px; }
.stages h2 { margin-bottom: 2px; }
.stage {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  min-height: 58px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff;
}
.stage b { display: block; }
.stage small { display: block; color: var(--muted); font-size: .84rem; }
.stage-box { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--line-2); display: grid; place-items: center; flex: none; }
.stage-ic { margin-left: auto; color: var(--muted); }
.stage.on { border-color: var(--go); background: var(--go-soft); }
.stage.on .stage-box { background: var(--go); border-color: var(--go); color: #fff; }
.icon-btn { width: 40px; height: 40px; border: 0; background: none; border-radius: 10px; display: grid; place-items: center; color: var(--muted); flex: none; }
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }

/* ---------- A label read by someone else's phone ---------- */
.scan-wrap { padding-top: 4px; }
.scanned { --rc: #d9d2c5; --ri: #3b3329; background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.scanned.plain { padding: 22px 18px; }
.scanned.plain p { color: var(--ink-2); }
.scanned.plain > :last-child { margin-bottom: 0; }
.scan-room { display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px; background: var(--rc); color: var(--ri); }
.scan-room.none { background: repeating-linear-gradient(-45deg, #f1ede6 0 10px, #fff 0 20px); color: var(--muted); }
.scan-room > span:not(.scan-shape) { display: grid; flex: 1 1 auto; min-width: 0; }
.scan-room small { font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.scan-room b { font-weight: 860; font-stretch: 68%; font-size: 2.6rem; line-height: .95; text-transform: uppercase; overflow-wrap: anywhere; }
.scan-shape { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; color: var(--rc); flex: none; }
.scan-shape svg { width: 66%; height: 66%; }
.scan-up { width: 34px; height: 34px; flex: none; }
.scan-body { padding: 16px 18px 20px; }
.scan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.scan-num { margin: 0; font: 900 5.5rem/.8 var(--stencil); }
.scan-num small { display: block; font: 800 .95rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; color: var(--muted); }
h1.scan-num { font-size: 3.4rem; margin: 6px 0 12px; letter-spacing: .02em; text-transform: uppercase; }
.scan-flags { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 7.6px; }
.scan-piece { font: 860 1.9rem/1 var(--sans); font-stretch: 70%; text-transform: uppercase; margin: 12px 0 4px; }
.scan-body h2 { font-size: .85rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.scan-body .things-list { font-size: 1.12rem; }
.scan-from { margin: 14px 0 0; color: var(--ink-2); }
.scan-from small { font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.scan-match { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); color: var(--ink-2); font-size: .94rem; }
.scan-match .shape { width: 22px; height: 22px; flex: none; color: var(--rc); filter: drop-shadow(0 0 1px rgba(0,0,0,.5)); }
.tagline { margin: 16px 12px 0; text-align: center; color: var(--kraft-ink); font-size: .9rem; line-height: 1.5; }
.tagline .up { width: 15px; height: 15px; vertical-align: -2px; margin-right: 3px; }
.tagline a { font-weight: 700; white-space: nowrap; }
.tagline.small { margin-top: 8px; font-size: .82rem; opacity: .85; }
body.bare .tabs { display: none; }
body.bare { padding-bottom: 0; }

/* ---------- The label, on paper and on screen ----------
   1em is a thirty-third of the label's height (a 3⅓ in label: 0.1 in), so everything scales with it.
   Wide labels: room band, then the number beside the code, then flags and contents across the bottom.
   Tall labels: the same pieces stacked, with the code at the foot.
   layout() in js/labels.js does the same sums as these sizes to work out how many lines of contents fit
   (and how big the flags can be), so a change to a height here needs the same change there. */
.lab {
  --rc: #d9d2c5; --ri: #3b3329;
  position: relative; overflow: hidden;
  width: calc(var(--lw) * var(--u)); height: calc(var(--lh) * var(--u));
  background: #fff; color: #111;
  font-family: var(--sans);
  font-size: calc(var(--u) * var(--lh) / 33.3);
  padding: 1.15em;
  display: grid; column-gap: 1em;
  grid-template-columns: minmax(0, 1fr) 15em;
  grid-template-rows: 6.2em 15em auto minmax(0, 1fr);
  grid-template-areas: "room room" "num qr" "flags flags" "items items";
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.lab.tall {
  /* A thirty-fifth of the width, or a fiftieth of the height on a squat label (plain Letter paper). */
  font-size: min(calc(var(--u) * var(--lw) / 35), calc(var(--u) * var(--lh) / 50));
  grid-template-columns: 15em minmax(0, 1fr);
  grid-template-rows: 6.2em auto auto minmax(0, 1fr) 15.9em;
  grid-template-areas: "room room" "num num" "flags flags" "items items" "qr foot";
}
.lab p { margin: 0; color: inherit; } /* the label keeps its own ink, inside a card or not */
.lab-room {
  grid-area: room;
  display: flex; align-items: center; gap: .7em;
  padding: 0 1.1em 0 1em; border-radius: .9em;
  background: var(--rc); color: var(--ri);
}
.lab.no-room .lab-room { background: repeating-linear-gradient(-45deg, #f1ede6 0 .6em, #fff 0 1.2em); color: #8a8070; border: .12em dashed #bdb2a0; }
.lab-shape { display: grid; place-items: center; width: 4.4em; height: 4.4em; flex: none; border-radius: 50%; background: #fff; color: var(--rc); }
.lab-shape svg { width: 70%; height: 70%; }
.lab-room-name {
  flex: 1 1 auto; min-width: 0;
  font-weight: 860; font-stretch: 66%; font-size: var(--rn, 4.1em); line-height: 1; letter-spacing: .005em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lab-room-name.two { white-space: normal; line-height: .92; }
.lab.no-room .lab-room-name { font-size: 2.2em; font-weight: 700; font-stretch: 85%; text-transform: none; }
.lab-up { width: 3.5em; height: 3.5em; flex: none; }
.lab-numwrap { grid-area: num; align-self: start; min-width: 0; margin-top: 1em; }
.lab-numrow { display: flex; align-items: flex-start; gap: .35em; }
.lab-kind { font-weight: 800; font-stretch: 70%; font-size: 1.9em; letter-spacing: .06em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1; padding-bottom: .1em; }
.lab-num { display: block; font-family: var(--stencil); font-weight: 900; font-size: 15em; letter-spacing: -.01em; line-height: .82; }
.lab[data-digits="3"] .lab-num { font-size: 13.2em; }
.lab[data-digits="4"] .lab-num { font-size: 10em; }
.lab.piece .lab-num { font-size: 7em; }
.lab.piece[data-digits="3"] .lab-num { font-size: 6.2em; }
.lab.piece[data-digits="4"] .lab-num { font-size: 4.9em; }
.lab-piece { margin-top: .2em !important; font-weight: 860; font-stretch: 66%; font-size: 3em; line-height: .95; text-transform: uppercase; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.lab-foot { grid-area: num; align-self: end; display: flex; flex-direction: column; gap: .3em; min-width: 0; padding-bottom: .1em; }
.lab-mark { display: inline-flex; align-items: center; gap: .3em; font-family: var(--stencil); font-weight: 800; font-size: 1.6em; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.lab-up2 { width: 1.15em; height: 1.15em; flex: none; }
.lab-from { flex: 1 1 auto; min-width: 0; align-self: center; text-align: right; font-size: 1.45em; line-height: 1.15; font-weight: 650; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lab-qr { grid-area: qr; width: 15em; height: 15em; display: block; margin-top: .9em; }
.lab-flags { grid-area: flags; display: flex; flex-wrap: wrap; gap: .5em .6em; margin-top: .9em; min-width: 0; }
.lab-flag {
  display: inline-flex; align-items: center; gap: .3em; flex: none;
  padding: .35em .7em .35em .5em; border-radius: .45em;
  font-weight: 860; font-stretch: 72%; font-size: var(--ff, 1.85em); line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  border: .14em solid currentColor;
}
/* One row of flags stays one row: a little too wide (a font that didn't arrive) runs off the edge, not onto the code. */
.lab-flags[data-rows="1"] { flex-wrap: nowrap; }
.lab-flags .lab-from { flex: 1 1 0; }
.lab-flags .lab-from.own { flex-basis: 100%; }
/* Where the flags leave no line for what's inside: the first things in the room left on their row, or "41 things". */
.lab-snip { flex: 1 1 0; min-width: 0; align-self: center; display: flex; gap: .3em; font-size: 1.62em; line-height: 1.22; font-weight: 560; white-space: nowrap; }
.lab-snip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lab-snip i { font-style: normal; color: #9a9184; }
.lab-snip em { flex: none; font-style: normal; font-weight: 750; color: #555; }
.lab-flag .ficon { width: 1.15em; height: 1.15em; color: inherit; }
.lab-fragile { color: var(--stamp); transform: rotate(-2.5deg); border-width: .18em; box-shadow: inset 0 0 0 .1em #fff, inset 0 0 0 .2em var(--stamp); padding: .4em .8em .4em .55em; }
.lab-first { background: #111; color: #fff; border-color: #111; }
.lab-first .ficon { color: #ffd23f; }
.lab-heavy { color: #111; }
.lab-car { color: #0d4e8c; }
/* As many lines as layout() says fit (--lines), and never taller than that. */
.lab-items {
  grid-area: items; align-self: start; margin-top: .7em !important; font-size: 1.62em; line-height: 1.22; font-weight: 560;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: var(--lines, 2); -webkit-box-orient: vertical;
  max-height: calc(var(--lines, 2) * 1.22em); text-wrap: wrap;
}
.lab-items:empty { display: none; }
.lab-items i { font-style: normal; color: #9a9184; }
.lab-items em { font-style: normal; font-weight: 750; color: #555; white-space: nowrap; }

/* Labels that reach the paper's edge (half sheets) keep everything a quarter inch in, where printers reach. */
.lab.edge { padding: calc(var(--u) * .25); }
/* Half sheets: number, a list of what's in it, and the code, side by side. */
.lab.xwide {
  grid-template-columns: fit-content(17em) minmax(0, 1fr) 15em; column-gap: 1.6em;
  grid-template-rows: 6.2em minmax(0, 1fr) auto;
  grid-template-areas: "room room room" "num items qr" "flags flags flags";
}
.lab.xwide .lab-num { font-size: 18.5em; }
.lab.xwide[data-digits="2"] .lab-num { font-size: 15em; }
.lab.xwide[data-digits="3"] .lab-num { font-size: 11.5em; }
.lab.xwide[data-digits="4"] .lab-num { font-size: 9em; }
.lab.xwide.piece .lab-num { font-size: 10em; }
.lab.xwide .lab-flags { margin-bottom: .2em; }
.lab.xwide .lab-items { display: block; list-style: none; margin: 1.1em 0 0 !important; padding: 0 0 0 1.4em; border-left: .14em solid #d9d2c5; font-size: 1.75em; line-height: 1.32; overflow: hidden; max-height: calc(var(--lines, 7) * 1.32em); }
.lab.xwide .lab-items li { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; text-wrap: wrap; }
.lab.xwide .lab-items .lab-from-li { color: #444; font-weight: 650; font-size: .86em; }
.lab.xwide .lab-flags { margin-top: .8em; }
/* Tall labels */
.lab.tall .lab-num { font-size: 17.5em; }
.lab.tall[data-digits="3"] .lab-num { font-size: 14em; }
.lab.tall[data-digits="4"] .lab-num { font-size: 10.5em; }
.lab.tall.piece .lab-num { font-size: 10em; }
.lab.tall .lab-foot { grid-area: foot; align-self: center; gap: .6em; margin-top: .9em; }
.lab.tall .lab-from { white-space: normal; text-align: left; font-size: 1.7em; flex: none; align-self: stretch; padding-left: .1em; }
.lab.tall .lab-mark { font-size: 2em; }
.lab.tall .lab-flags { flex-wrap: wrap; }

/* On screen: a label stuck on a bit of box. */
.lab-frame { container-type: inline-size; }
/* cqw has to be read inside the container: on the container itself it means its parent's width. */
.lab-frame > .lab-stuck { --u: calc(100cqw / var(--lw)); }
.lab-stuck { display: inline-block; vertical-align: top; transform: rotate(-.6deg); box-shadow: 0 1px 2px rgba(60, 40, 15, .25), 0 10px 22px -12px rgba(60, 40, 15, .55); border-radius: calc(var(--u) * .08); overflow: hidden; }
.boxside {
  padding: 20px 18px 22px; border-radius: 12px;
  background: linear-gradient(160deg, var(--kraft-hi), var(--kraft) 50%, var(--kraft-lo));
  box-shadow: inset 0 0 0 1px rgba(90, 60, 25, .25), var(--shadow);
}

/* ---------- Moving day ---------- */
.truck-screen { max-width: 560px; margin: 0 auto; }
.truck-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.truck-head h1 { font: 800 1.9rem/1 var(--stencil); letter-spacing: .03em; text-transform: uppercase; color: var(--kraft-ink); }
.truck-head .seg a { padding: 7px 13px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--ink-2); }
.truck-head .seg a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.truck-card { position: relative; overflow: hidden; background: var(--paper); border-radius: 16px; box-shadow: var(--shadow); padding: 10px 14px 12px; margin-bottom: 10px; }
.truck-art { display: flex; justify-content: center; }
.truck { display: block; height: 104px; width: auto; max-width: 100%; overflow: visible; }
.tr-cargo { fill: #f4efe6; stroke: #2a2017; stroke-width: 3; }
.tr-boxes rect { fill: #c9a06c; stroke: #7d5a33; stroke-width: 1.2; }
.tr-boxes path { stroke: rgba(240, 222, 182, .95); stroke-width: 4; }
.tb.pop { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: translateY(-14px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.tr-shutter { fill: #e9e1d4; stroke: #2a2017; stroke-width: 3; transform-origin: 112px 9px; transform: scaleY(0); }
.tr-brand { fill: #2a2017; opacity: 0; }
.tr-brand text { font: 900 17px var(--stencil); letter-spacing: 1px; }
.tr-cab { fill: #e2523a; stroke: #2a2017; stroke-width: 3; stroke-linejoin: round; }
.tr-glass { fill: #bfe0f2; stroke: #2a2017; stroke-width: 2.5; stroke-linejoin: round; }
.tr-bumper, .tr-chassis { fill: #2a2017; }
.tr-wheel circle:first-child { fill: #2a2017; }
.tr-wheel circle:last-child { fill: #d7d0c4; }
.tr-road { stroke: #b9ab95; stroke-width: 3; stroke-dasharray: 14 10; stroke-linecap: round; }
.tr-puff { fill: #d8d2c8; opacity: 0; }
.truck-count { margin: 6px 0 0; text-align: center; font-size: 1.02rem; color: var(--ink-2); }
.truck-count b { font: 900 1.7rem/1 var(--stencil); letter-spacing: .02em; color: var(--ink); vertical-align: -2px; }
.truck-count small { display: block; color: var(--muted); font-size: .86rem; margin-top: 2px; }
.truck-card.finished .truck-count b { font-family: var(--sans); font-size: 1.2rem; font-weight: 800; letter-spacing: 0; }
/* Done: loading shuts the side; unloading drives off (and is parked there, empty, on a later visit). */
.truck-screen[data-stage="load"] .finished .tr-shutter { transform: scaleY(1); }
.truck-screen[data-stage="load"] .finished .tr-brand { opacity: 1; }
.truck-screen[data-stage="load"] .finished.celebrate .tr-shutter { animation: shut .9s ease-in-out both; }
.truck-screen[data-stage="load"] .finished.celebrate .tr-brand { animation: fadein .4s .8s both; }
@keyframes shut { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.truck-screen[data-stage="unload"] .finished.celebrate .truck-body { animation: drive 2.6s cubic-bezier(.55, 0, .7, .4) .5s both; }
.truck-screen[data-stage="unload"] .finished.celebrate .tr-wheel { animation: spin .5s linear .5s 5; }
.truck-screen[data-stage="unload"] .finished.celebrate .tr-puff { animation: puff 1.4s ease-out .4s both; }
@keyframes drive { 0% { transform: translateX(0); } 12% { transform: translateX(-6px); } 100% { transform: translateX(var(--drive, 440px)); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes puff { 0% { opacity: 0; transform: translateX(0) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateX(-30px) scale(1.5); } }
.truck-card.finished.celebrate .truck-count { animation: fadein .5s 1s both; }
.truck-card { scroll-margin-top: 76px; }
.empty-truck { text-align: center; }
.empty-truck .truck { height: 96px; margin: 0 auto 10px; }
.rooms-card { margin-top: 14px; }
.rooms-card h2 { font-size: .95rem; }
.rooms-prog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.rooms-prog li { position: relative; display: flex; align-items: center; gap: 6px; font-size: .86rem; padding-bottom: 5px; min-width: 0; }
.rooms-prog li span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rooms-prog li b { font-weight: 750; font-variant-numeric: tabular-nums; }
.rooms-prog li i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--line); }
.rooms-prog li i::after { content: ''; position: absolute; inset: 0; width: calc(var(--p) * 100%); background: var(--go); border-radius: inherit; transition: width .3s; }
.rooms-prog li.full span { color: var(--go); }
.rooms-prog .dot { width: 16px; height: 16px; }

.pad-card { background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); padding: 10px; }
/* One height whatever it shows (a box with four flags and a long room name, or nothing yet), so a key is always where
   it was a moment ago. */
.readout { height: 100px; border-radius: 12px; background: var(--paper-2); display: grid; align-items: stretch; margin-bottom: 10px; overflow: hidden; }
.readout.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.rd-num { display: flex; align-items: center; gap: 14px; padding: 8px 14px; min-width: 0; }
.rd-num b { flex: none; font: 900 3.6rem/1 var(--stencil); }
.rd-num span { color: var(--muted); font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
/* Nothing keyed in yet: a caret where the number goes. */
.rd-num.empty b { width: 3px; height: 46px; border-radius: 2px; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.readout.bad { background: var(--bad-soft); }
.readout.bad .rd-num span { color: var(--bad); font-weight: 750; }
.readout.warn { background: var(--warn-soft); }
.readout.warn .rd-num span { color: var(--warn); font-weight: 750; }
.readout.nobox .rd-num span { color: var(--bad); }
.rd-box { --rc: #d9d2c5; --ri: #3b3329; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; min-width: 0; }
.rd-n { font: 900 3.6rem/.9 var(--stencil); }
.rd-box[data-digits="4"] .rd-n { font-size: 2.7rem; }
.rd-what { display: grid; gap: 5px; min-width: 0; }
.rd-to { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px; border-radius: 10px; background: var(--rc); color: var(--ri); width: fit-content; max-width: 100%; min-width: 0; }
.rd-to.plain { background: none; color: var(--ink); padding: 0; }
.rd-to > span:last-child { display: grid; min-width: 0; }
.rd-to small { font-size: .68rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-to b { font: 860 1.5rem/1.05 var(--sans); font-stretch: 68%; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-to.none b { color: var(--muted); font-size: 1.3rem; }
.rd-shape { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--rc); flex: none; }
.rd-shape svg { width: 68%; height: 68%; }
.rd-things { color: var(--ink-2); font-size: .86rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-things:empty { display: none; }
/* Flags down the side as icons, as in the box list: two to a column. */
.rd-flags { display: grid; grid-template-rows: repeat(2, 22px); grid-auto-flow: column; grid-auto-columns: 22px; gap: 6px 4px; place-items: center; }
.rd-flag .ficon { width: 21px; height: 21px; }
.rd-tick { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--go); color: #fff; animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.rd-already { max-width: 70px; font-size: .74rem; line-height: 1.2; font-weight: 750; color: var(--warn); text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.readout.ok { background: var(--go-soft); }
/* A box that goes in the car, not on the truck: amber, it says so, and the key says Car. */
.readout.car { background: var(--warn-soft); box-shadow: inset 0 0 0 2px #e3a440; }
.readout.car .rd-to small { color: var(--warn); opacity: 1; font-weight: 850; }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.key {
  min-height: 62px; border-radius: 14px; border: 0; background: #efe8dc; color: var(--ink);
  font: 800 2rem/1 var(--stencil); box-shadow: inset 0 -3px 0 rgba(90, 60, 25, .18);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.key:active { transform: translateY(2px); box-shadow: none; background: #e4dbcc; }
.key.soft { background: #f6f1e8; color: var(--ink-2); }
.key.soft .icon { width: 28px; height: 28px; }
.key.tick { background: var(--go); color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; font: 800 1.5rem/1 var(--sans); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.key.tick .icon { width: 28px; height: 28px; stroke-width: 3; }
.truck-screen .key.tick.car { background: #b86200; }
.truck-screen[data-stage="unload"] .key.tick { background: #2f6db5; }
.truck-screen[data-stage="unpack"] .key.tick { background: #8a5a2b; }
.truck-head .seg a { white-space: nowrap; }

.pile .tr-boxes path { stroke-width: 6; }
.pile .home { animation: pop .6s cubic-bezier(.2, 1.6, .4, 1) both; transform-origin: 165px 136px; }
.last { height: 30px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; font-size: .9rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.last > span { overflow: hidden; text-overflow: ellipsis; }
.center-row { justify-content: center; margin-top: 12px; }
.center-row .btn b { margin-left: 4px; }
.missing h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 10px 0 6px; }
.missing h3 small { color: var(--muted); font-weight: 600; }
.missing ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.missing li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.missing li > span { display: grid; min-width: 0; }
.missing li small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.missing li.gone { opacity: .5; }
.sheet-body .missing { max-height: 56vh; overflow-y: auto; }
.pickrow { width: 100%; border: 0; text-align: left; font: inherit; }
@media (min-width: 900px) {
  .key { min-height: 66px; }
  .truck { height: 128px; }
}
/* On a phone the heading, the truck, its count and the whole pad fit above the tabs, and none of them changes height
   as boxes are ticked. */
@media (max-width: 899px) {
  .truck-screen { margin-top: -6px; }
  .truck-head { flex-wrap: nowrap; margin: 0 0 8px; }
  .truck-head h1 { flex: none; font-size: 1.45rem; }
  .truck-head .seg { flex: 0 1 auto; min-width: 0; display: flex; }
  .truck-head .seg a { flex: 1 1 auto; min-width: 0; text-align: center; padding: 8px 9px; font-size: .8rem; }
  .truck-card { height: 172px; display: flex; flex-direction: column; justify-content: center; }
  .truck { height: 100px; }
  .readout { height: 94px; }
  .key { min-height: 0; height: 60px; }
}
@media (max-width: 380px) {
  .truck-head { gap: 8px; }
  .truck-head h1 { font-size: 1.25rem; }
  .truck-head .seg a { padding: 8px 6px; font-size: .76rem; }
}
/* The smallest phones: the three parts of the day get the whole row (the heading stays for screen readers), and
   on a short one the count goes without the truck so 0 and On still sit above the tabs. */
@media (max-width: 340px) {
  .truck-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .truck-head .seg { flex: 1 1 auto; }
}
/* A shorter phone (or a browser's own bars taking the room): the truck and its count side by side. */
@media (max-width: 899px) and (max-height: 760px) {
  .truck-card { height: 82px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 6px 12px 6px 6px; }
  .truck { height: 62px; --drive: 1100px; } /* drawn small, so it drives further to leave the card */
  .truck-count { margin: 0; text-align: left; font-size: .95rem; line-height: 1.25; }
  .truck-count b { font-size: 1.45rem; }
  .truck-count small { font-size: .8rem; line-height: 1.25; }
  .truck-card.finished .truck-count b { font-size: 1rem; }
  .readout { height: 86px; }
  .key { height: 52px; }
}
@media (max-width: 899px) and (max-height: 600px) {
  .truck-card { height: 58px; grid-template-columns: minmax(0, 1fr); padding: 6px 14px; }
  .truck-art { display: none; }
  .readout { height: 80px; }
  .key { height: 48px; }
}

/* ---------- The first night ---------- */
.first-boxes { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.first-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 12px; }
.first-box > a { text-decoration: none; }
.first-box.done { opacity: .6; }
.fb-head { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px !important; font-weight: 800; font-size: 1.05rem; }
.fb-head a { color: var(--ink); text-decoration: none; }
.fb-things { color: var(--ink-2); margin: 0 !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.essentials { margin-top: 18px; }
.essentials h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.essentials h2 small { color: var(--muted); font-weight: 650; font-size: .9rem; }
.essentials ul { list-style: none; margin: 4px 0 8px; padding: 0; }
/* Where it's packed, what it is, and the cross; "Open it first" goes under the words, not beside them. */
.essentials li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.essentials li:last-child { border-bottom: 0; }
/* A mark, not a box to tick: in a box to open first, packed somewhere else, or not packed yet. */
.ess-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--paper-2); color: var(--muted); font: 800 1rem/1 var(--sans); }
.ess-mark .icon { width: 16px; height: 16px; stroke-width: 3.2; }
.essentials li.yes .ess-mark { background: var(--go); color: #fff; }
.essentials li.maybe .ess-mark { background: var(--warn-soft); color: var(--warn); }
.ess-what { display: grid; flex: 1 1 auto; min-width: 0; }
.ess-what small { color: var(--muted); font-size: .86rem; }
.essentials li.maybe .ess-what small { color: var(--warn); }
.essentials li .btn.small { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 6px; padding: 5px 10px; font-size: .82rem; min-height: 34px; }
.essentials li .icon-btn { grid-column: 3; grid-row: 1; width: 32px; height: 32px; }
.essentials li .icon-btn .icon { width: 16px; height: 16px; }

/* ---------- More ---------- */
.row-link { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.row-link > span { display: grid; flex: 1 1 auto; min-width: 0; }
.row-link small { color: var(--muted); font-size: .88rem; }
.row-link .go { color: var(--muted); }
.row-link:hover { box-shadow: var(--shadow), 0 0 0 2px rgba(34, 26, 18, .14); }
.stack { display: grid; gap: 8px; margin-top: 12px; }
.stack .btn { justify-content: flex-start; text-align: left; border-radius: 16px; padding: 10px 16px; }
.stack .btn > span { display: grid; }
.stack .btn small { font-weight: 500; color: var(--muted); font-size: .84rem; }
.copy-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.link-text { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border-radius: 10px; background: var(--paper-2); font: 600 .86rem/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
.arrive h2 { font-size: 1.3rem; margin-bottom: 10px; }
.merge-sum { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 10px; }
.merge-sum li { padding: 6px 12px; border-radius: 8px; background: var(--paper-2); font-weight: 600; }
.merge-sum b { font: 900 1.25rem/1 var(--stencil); }
.room-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.room-list li { display: flex; align-items: center; gap: 8px; }
.room-list .room-name { flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 8px 10px; }
.room-list .hint { flex: none; font-size: .84rem; min-width: 56px; text-align: right; }
button.dot { border: 0; padding: 0; background: none; cursor: pointer; }
.room-list button.dot { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; }
.room-list button.dot:hover { background: var(--paper-2); }
.style-now { display: flex; align-items: center; gap: 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
#styleBody .kicker { margin: 0 0 8px; }
#styleBody .style-now { margin: 0 0 14px; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; background: var(--rc); box-shadow: 0 0 0 1.5px var(--line-2); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); }
.shape-sw { background: #fff; color: var(--ink); display: grid; place-items: center; border-radius: 12px; }
.shape-sw svg { width: 26px; height: 26px; }
.add-room { flex-wrap: nowrap; }

/* ---------- Print ---------- */
.print-tabs { display: flex; margin: 0 0 14px; max-width: 520px; }
.print-tabs a { flex: 1; text-align: center; padding: 9px 10px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.print-tabs a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.print-grid { display: grid; gap: 14px; align-items: start; }
@media (min-width: 900px) {
  .print-grid { grid-template-columns: 390px minmax(0, 1fr); }
  .print-preview { position: sticky; top: 84px; }
}
.print-controls .card h2 { font-size: 1rem; }
.field-label { font-weight: 700; font-size: .92rem; margin: 14px 0 8px !important; color: var(--ink) !important; }
.field-label .hint { font-weight: 450; font-size: .84rem; margin-left: 4px; }
.only { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; color: var(--ink) !important; }
.picklist { list-style: none; margin: 10px 0 0; padding: 0; max-height: 340px; overflow-y: auto; border-top: 1px solid var(--line); }
.picklist.rooms { max-height: none; }
.picklist li { border-bottom: 1px solid var(--line); }
.picklist label { display: flex; align-items: center; gap: 10px; padding: 7px 2px; cursor: pointer; }
.picklist input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; }
.picklist label > span:last-child { display: grid; min-width: 0; font-weight: 650; }
.picklist small { color: var(--muted); font-weight: 450; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.start-row { display: flex; align-items: center; gap: 14px; }
.start-row .hint { flex: 1 1 auto; }
.mini-sheet { flex: none; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 4px; padding: 7px; width: 112px; aspect-ratio: var(--ratio); background: #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2), inset 0 0 0 1px var(--line); }
.mini { border: 1.5px solid var(--line-2); border-radius: 4px; background: #fff; font: 800 1rem/1 var(--stencil); color: var(--muted); min-height: 0; padding: 0; }
.mini.used { background: repeating-linear-gradient(-45deg, var(--paper-2) 0 5px, #fff 0 10px); border-style: dashed; }
.mini[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.print-go { display: grid; gap: 10px; }
.print-go .btn small { font-weight: 500; opacity: .75; margin-left: 4px; }
.print-go .btn.wide { min-height: 54px; font-size: 1.05rem; }
.how-print summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.how-print p { font-size: .92rem; margin: 6px 0 0 !important; }
.nudger { border-top: 1px solid var(--line); padding-top: 4px; }
.nudger .field-label { margin-top: 10px !important; }
.nudge-pad { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 4px 6px; max-width: 280px; }
.nudge-pad span { text-align: center; font-weight: 650; font-size: .92rem; }
.nudge-pad .icon-btn { border: 1.5px solid var(--line-2); width: 44px; height: 40px; color: var(--ink); }

/* The pages: true size on paper; in the preview, shrunk to the column. */
.preview { container-type: inline-size; display: grid; gap: 16px; }
.preview > .page { --u: calc(100cqw / var(--pw)); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 16px 30px -16px rgba(40, 25, 10, .7); }
.page { position: relative; overflow: hidden; background: #fff; color: #111; width: calc(var(--pw) * var(--u)); height: calc(var(--ph) * var(--u)); }
.slot { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); border-radius: calc(var(--r) * var(--u)); overflow: hidden; }
.preview .slot { box-shadow: 0 0 0 1px #ddd5c8; }
.preview .slot.empty { background: repeating-linear-gradient(-45deg, #f6f2ec 0 6px, #fff 0 12px); }
.more-sheets { margin: 0; text-align: center; color: var(--kraft-ink); font-weight: 650; }
.cuts { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cuts line { stroke: #8f877b; stroke-width: .012; stroke-dasharray: .09 .07; }
.page.test .slot.outline { border: calc(var(--u) * .014) solid #222; color: #b9b1a5; padding: calc(var(--u) * .14) calc(var(--u) * .18); }
.page.test .slot.outline b { display: block; font: 900 calc(var(--u) * .6) / .9 var(--stencil); }
.page.test .slot.outline span { display: block; font: 600 calc(var(--u) * .12) / 1.3 var(--sans); color: #8a8276; margin-top: calc(var(--u) * .05); }
.ruler { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); font: 600 calc(var(--u) * .12) / 1.3 var(--sans); color: #333; }
.ruler i { display: block; width: calc(3 * var(--u)); height: calc(var(--u) * .12); border: solid #111; border-width: 0 calc(var(--u) * .014) calc(var(--u) * .014); box-sizing: border-box; }
.ruler.cm i { width: calc(7 / 2.54 * var(--u)); }
.ruler span { display: block; margin-top: calc(var(--u) * .04); }

/* Door signs */
.page.sign {
  display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: calc(var(--u) * .45);
  padding: calc(var(--u) * .5);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sign-colour { background: var(--rc); border-radius: calc(var(--u) * .35); display: grid; place-items: center; }
.sign-disc { display: grid; place-items: center; width: 72%; aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--rc); }
.sign-shape { width: 72%; height: 72%; }
.sign-words { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sign-kicker { display: flex; align-items: center; gap: calc(var(--u) * .1); margin: 0; font: 800 calc(var(--u) * .26) / 1.15 var(--sans); font-stretch: 80%; letter-spacing: .06em; text-transform: uppercase; }
.sign-up { width: calc(var(--u) * .42); height: calc(var(--u) * .42); flex: none; }
.sign-name { margin: calc(var(--u) * .15) 0; font: 900 calc(var(--u) * var(--fs, 1.6)) / .88 var(--sans); font-stretch: 64%; text-transform: uppercase; overflow-wrap: anywhere; }
.sign-count { margin: 0; font: 800 calc(var(--u) * .5) / 1 var(--stencil); letter-spacing: .03em; }

/* ---------- Toast and sheet ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabs-h) + 14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 40; width: max-content; max-width: min(92vw, 480px);
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px 11px 16px; border-radius: 14px;
  background: var(--ink); color: var(--paper); font-weight: 650; font-size: .96rem;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .55);
}
.toast button { border: 0; background: none; color: #ffd98a; font-weight: 800; padding: 6px 4px; }
@media (min-width: 900px) { .toast { bottom: 24px; } }
.sheet {
  border: 0; padding: 0; width: min(94vw, 540px); max-height: 88vh; border-radius: 20px;
  background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}
.sheet::backdrop { background: rgba(40, 25, 10, .5); }
.sheet-body { padding: 22px 18px 18px; display: grid; gap: 12px; }
.sheet-body h2 { font: 800 1.6rem/1 var(--stencil); letter-spacing: .03em; text-transform: uppercase; }
.sheet-body p { margin: 0; color: var(--ink-2); }
.sheet-body .row { justify-content: flex-end; }

/* ---------- Footer ---------- */
.jd-foot { max-width: 1040px; margin: 0 auto; padding: 4px 16px 26px; text-align: center; font-size: .85rem; color: var(--kraft-ink); }
.jd-foot a { text-underline-offset: 2px; }
.jd-foot a:hover, .jd-foot a:focus-visible { color: #000; }
.noscript { text-align: center; padding: 3rem 16px; color: var(--kraft-ink); }

#print-root { display: none; }

@media print {
  body.printing { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  body.printing > :not(#print-root) { display: none !important; }
  body.printing #print-root { display: block !important; }
  #print-root .page { --u: 1in; break-after: page; page-break-after: always; }
  #print-root .page:last-child { break-after: auto; page-break-after: auto; }
  #print-root .slot { overflow: visible; }
  body:not(.printing) .tabs, body:not(.printing) .toast { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}