/* selfmanaged — the agreed identity. Light theme only for now.
   Square corners, ruled not boxed, no gradients, no shadows. Navy is the one accent;
   brass is the door handle in the mark and nothing else. State colours carry meaning only. */

:root {
  --navy: #1B3348;
  --brass: #A8813F;
  --ink: #15181A;
  --muted: #555956;
  --muted-2: #6C716D;
  --paper: #FCFBF8;
  --white: #FFFFFF;
  --wash: #F1EFE9;
  --line: #DDD9D0;
  --hair: #EBE7E0;
  /* The edge of a form control. --line is for rules between rows; as the only visible edge of
     a white field on paper it measured 1.36:1, and WCAG 1.4.11 wants 3:1. This is 3.46:1 on
     white, 3.34 on paper, 3.08 on the soon wash and 3.01 on the late wash. */
  --field: #878B86;

  --late: #8E2B2C;  --late-wash: #F7EDED;
  --soon: #7E5A12;  --soon-wash: #F9F1E1;
  --fine: #2A6344;  --fine-wash: #EAF2EC;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --col: 560px;
  --gutter: 16px;
  --tabbar-h: 58px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Keep a control reached by Tab clear of the sticky demo banner, the fixed tab bar and the
   status line (WCAG 2.4.11). app.js measures what covers each edge into --inset-top and
   --inset-bottom; the fallbacks cover the moment before it has. */
html {
  scroll-padding-top: calc(var(--inset-top, 0px) + 12px);
  scroll-padding-bottom: calc(var(--inset-bottom, 0px) + 16px);
}
html.has-tabbar {
  scroll-padding-bottom: calc(var(--inset-bottom, calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px))) + 16px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--navy); text-underline-offset: 2px; }
b { font-weight: 600; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
h1:focus-visible, main:focus-visible { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── shell ─────────────────────────────────────────────────────────────────── */
.shell {
  max-width: var(--col);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
}
body.has-tabbar .shell { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

.topbar {
  display: flex;
  align-items: center;
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gutter) 12px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; text-decoration: none; color: var(--navy);
}
.brand svg { flex: none; }
.wordmark { font-family: var(--serif); font-size: 20px; line-height: 1; letter-spacing: -0.01em; color: var(--navy); }

.demo-banner {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  padding: 10px var(--gutter);
  background: var(--wash);
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 500;
}
.demo-banner a { font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; margin: -12px 0; }

main { display: block; padding-bottom: 40px; }
.loading { padding: 24px var(--gutter); color: var(--muted-2); }

/* status line: sits just above the tab bar, collapses when empty */
.status {
  position: fixed; z-index: 20;
  left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--col) - 2 * var(--gutter)));
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 10px);
  padding: 12px 14px;
  background: var(--fine-wash); color: var(--fine);
  border: 1px solid var(--fine);
  font-size: 14px; font-weight: 500;
}
.status.is-error { background: var(--late-wash); color: var(--late); border-color: var(--late); }
.status:empty { padding: 0; border: 0; }
body:not(.has-tabbar) .status { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }

/* ── tab bar ───────────────────────────────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Five tabs. Equal fifths don't fit: at 320px each is 64px and PROPERTIES needs 64.4 even with no
   tracking. auto columns give each label its width plus an equal share of what's left. */
.tabbar-inner { max-width: var(--col); margin: 0 auto; display: grid; grid-template-columns: repeat(5, auto); }
.tabbar a {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tabbar-h);
  font: 600 10px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted-2); text-decoration: none;
}
.tabbar a[aria-current="page"] { color: var(--navy); box-shadow: inset 0 2px 0 var(--navy); }
.tabbar a:focus-visible { outline-offset: -2px; }
/* Less tracking below 400px gives the five labels room (242.6px at .07em, 262.4 at .13em) without
   shrinking the type: at 320 the narrowest cell (RENT) is still about 46px wide, and every cell 58px tall. */
@media (max-width: 399px) { .tabbar a { letter-spacing: .07em; } }

/* ── page furniture ────────────────────────────────────────────────────────── */
.page-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 24px var(--gutter) 14px;
  border-bottom: 1px solid var(--line);
}
.page-head-stack { display: block; }
h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: 30px; line-height: 1.15; letter-spacing: -0.015em;
  text-wrap: balance;
}
.page-date { font-size: 13px; color: var(--muted-2); white-space: nowrap; }
.page-head-stack .page-date { margin-top: 6px; white-space: normal; }
.crumb { padding: 14px var(--gutter) 0; font-size: 14px; }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; text-decoration: none; }
.crumb + .page-head { padding-top: 10px; }

.lede { padding: 16px var(--gutter) 0; color: var(--muted); max-width: 60ch; }
.lede-flush { padding: 8px 0 0; }
.aside { padding: 14px var(--gutter) 0; font-size: 14px; color: var(--muted); }
.pad { padding: 16px var(--gutter) 0; }
.muted { color: var(--muted-2); }
.prose { padding: 16px var(--gutter) 0; color: var(--muted); max-width: 60ch; }
.prose p + p { margin-top: 10px; }
.prose b { color: var(--ink); font-weight: 500; }

.notice {
  margin: 16px var(--gutter) 0;
  padding: 12px 14px;
  background: var(--wash);
  font-size: 14px; color: var(--muted);
}
.notice-fine { background: var(--fine-wash); color: var(--fine); }

.group { margin-top: 28px; }
.group-title {
  font-family: var(--serif); font-weight: 400;
  font-size: 21px; line-height: 1.25; letter-spacing: -0.01em;
  padding: 0 var(--gutter) 10px;
  border-bottom: 1px solid var(--line);
}
.group-sub { padding: 10px var(--gutter) 0; font-size: 13px; color: var(--muted-2); }

/* ── labels ────────────────────────────────────────────────────────────────── */
.eyebrow {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font: 600 10px/1.4 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted-2);
}
.eyebrow .dot { width: 5px; height: 5px; flex: none; background: currentColor; }
.eyebrow.late { color: var(--late); }
.eyebrow.soon { color: var(--soon); }
.eyebrow.fine { color: var(--fine); }

/* ── cards (Today pattern) ─────────────────────────────────────────────────── */
.card { padding: 20px var(--gutter); border-bottom: 1px solid var(--hair); }
.card.is-late { background: var(--late-wash); }
.card.is-soon { background: var(--soon-wash); }
.card.is-fine { background: var(--fine-wash); }
/* On a state wash --muted-2 is under 4.5:1 for small text (4.43 on soon, 4.33 on late, 4.36 on
   fine); --muted is 6.34, 6.20 and 6.24. So inside a washed card every --muted-2 use (a neutral
   eyebrow, a row's detail line, a hint) takes --muted. */
.card.is-late, .card.is-soon, .card.is-fine { --muted-2: var(--muted); }
/* A rent date's row takes focus after it is answered (app.js restoreFocus). */
li[data-focus-key]:focus-visible { outline-offset: 2px; }
.group > div > .card:first-child, .group > .card:first-of-type { border-top: 0; }

.q {
  font-family: var(--serif); font-weight: 400;
  font-size: 20px; line-height: 1.3; letter-spacing: -0.012em;
  margin-bottom: 6px;
  text-wrap: pretty;
}
.q-lg { font-weight: 300; font-size: 26px; }
.meta { font-size: 14px; color: var(--muted); }
.meta b { color: var(--ink); font-weight: 600; }
.meta + .meta { margin-top: 2px; }
.note { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 62ch; }
.cite { margin-top: 6px; font-size: 12px; color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.actions.pad { margin-top: 0; }

/* Sections inside a card (the Rent card's increase and rent dates): ruled, not boxed. Rows and
   facts carry their own gutter, which a card already has. */
.block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.sub {
  font-family: var(--serif); font-weight: 400;
  font-size: 17px; line-height: 1.3; letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.block > .eyebrow { margin-top: 2px; }
.owed { margin-top: 12px; }
.more { margin-top: 16px; }
.more a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.card .rows { margin-top: 8px; border-top: 1px solid var(--hair); }
.card .rows .row, .card .facts { padding-left: 0; padding-right: 0; }
.row-actions { margin-top: 10px; }
/* A state pill on a card washed in the same state would lose its box: give it paper instead. */
.card.is-late .pill.late, .card.is-soon .pill.soon, .card.is-fine .pill.fine { background: var(--white); }
.form-link { margin: 8px 0 18px; }
.actions + .form-link, .form-link:last-child { margin-bottom: 0; }
.block .form-title { font-size: 17px; }
.form-link a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.slot-pad > .form-inset { padding-left: var(--gutter); padding-right: var(--gutter); }

/* The Rent card leads with the money: the dates behind the owed figure sit straight under it,
   each with its answer, then the one thing to record. */
.answer-rows { margin-top: 10px; }
.card .answer-rows { border-top: 1px solid var(--hair); }
.todo { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink); max-width: 62ch; }

/* The law behind a card, folded away (a native <details>, closed until opened). The summary is a
   44px control; its chevron turns when open. */
.law { margin-top: 12px; border-top: 1px solid var(--hair); }
.law > summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 2px 0;
  font-size: 14px; font-weight: 500; color: var(--navy);
  cursor: pointer; list-style: none;
}
.law > summary::-webkit-details-marker { display: none; }
.law > summary::before {
  content: ''; flex: none; width: 7px; height: 7px; margin: 0 2px 3px 1px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
}
.law[open] > summary::before { transform: rotate(45deg); margin-bottom: 5px; }
.law > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.law-body { padding-bottom: 6px; }
.law-body > .note:first-child { margin-top: 0; }
.law-body .form-link { margin: 8px 0 0; }

/* A confirmation checkbox: the label reads as a sentence, not a field label. */
.field.check { display: flex; align-items: flex-start; gap: 12px; }
.field.check input {
  flex: none; width: 24px; min-height: 0; height: 24px; margin: 2px 0 0; padding: 0;
  accent-color: var(--navy); -webkit-appearance: checkbox; appearance: auto;
}
.field.check label {
  margin: 0; font: 400 14px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink);
}
.began, .day-note { margin-top: -6px; margin-bottom: 14px; }

/* ── buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 18px;
  font: 500 14px/1.2 var(--sans); letter-spacing: .01em;
  color: var(--white); background: var(--navy);
  border: 1px solid var(--navy); border-radius: 0;
  text-decoration: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.btn:hover { background: #142838; }
.btn.ghost { background: transparent; color: var(--navy); }
.btn.ghost:hover { background: var(--white); }
.btn.quiet { background: transparent; color: var(--muted); border-color: var(--line); }
.btn.quiet:hover { background: var(--white); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.btn-wide { width: 100%; }
.btn-sm { min-height: 44px; padding: 8px 14px; font-size: 13px; }

.linkish {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  padding: 0; border: 0; background: none;
  font: inherit; font-size: 14px; color: var(--navy);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.forgot { padding: 4px var(--gutter) 0; }
.forgot .form { padding-left: 0; padding-right: 0; }

/* ── rows (ruled lists) ────────────────────────────────────────────────────── */
.rows > li { border-bottom: 1px solid var(--hair); }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 12px var(--gutter);
  color: inherit; text-decoration: none;
}
.rows > li.row { border-bottom: 1px solid var(--hair); }
a.row:hover { background: var(--white); }
a.row:focus-visible { outline-offset: -2px; }
.row .nm { font-weight: 500; }
.row .s { font-size: 13px; color: var(--muted-2); }
.row .r { text-align: right; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row .r .s { display: block; }
.chev { color: var(--muted-2); font-size: 20px; line-height: 1; }
.row-stack { display: block; }
.row-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.row-side { flex: none; padding-top: 2px; }
.row-stack > .btn { margin-top: 10px; }
.row-stack > .linkish { margin-top: 2px; margin-bottom: -8px; }
.row-stack > .form { padding-left: 0; padding-right: 0; }
.quote { margin-top: 8px; padding: 10px 12px; background: var(--wash); font-size: 14px; color: var(--ink); white-space: pre-wrap; }
.quote-label { font-weight: 600; }
.row .s.excerpt { color: var(--ink); overflow-wrap: anywhere; }

.pill {
  display: inline-block; padding: 5px 7px;
  font: 600 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  background: var(--wash); color: var(--muted); white-space: nowrap;
}
.pill.late { background: var(--late-wash); color: var(--late); }
.pill.soon { background: var(--soon-wash); color: var(--soon); }
.pill.fine { background: var(--fine-wash); color: var(--fine); }

/* ── facts (definition lists) ──────────────────────────────────────────────── */
.facts {
  display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 8px 16px;
  padding: 16px var(--gutter) 0;
  font-size: 14px;
}
.facts dt { color: var(--muted-2); }
.facts dd { min-width: 0; overflow-wrap: anywhere; }
.facts dd a { display: inline-block; padding: 2px 0; }
/* A tenant's email and phone, one a line: each a 44px target, as wide as its text. */
.facts dd a.contact { display: flex; align-items: center; min-height: 44px; width: fit-content; max-width: 100%; padding: 0; }
.facts-page { padding-top: 20px; }

/* ── forms ─────────────────────────────────────────────────────────────────── */
.form { padding: 20px var(--gutter) 4px; }
.form-inset { padding: 16px 0 0; }
.form-title {
  font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.3;
  margin-bottom: 6px;
}
.form > .hint { margin: 0 0 12px; }
fieldset { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
legend {
  padding: 0 0 10px; margin-bottom: 14px; width: 100%;
  font-family: var(--serif); font-weight: 400; font-size: 17px;
  border-bottom: 1px solid var(--hair);
}
.field { margin-bottom: 16px; }
.field label {
  display: block; margin-bottom: 6px;
  font: 600 10px/1.4 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.field label .opt { font-weight: 400; letter-spacing: .02em; text-transform: none; font-size: 12px; color: var(--muted-2); }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-width: 0;
  min-height: 44px; padding: 10px 12px;
  font: 400 16px/1.4 var(--sans); /* 16px stops iOS zooming on focus */
  color: var(--ink); background: var(--white);
  border: 1px solid var(--field); border-radius: 0;
}
.field input:not([type="date"]), .field textarea { -webkit-appearance: none; appearance: none; }
.field textarea { resize: vertical; min-height: 96px; }
.field select {
  -webkit-appearance: none; appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B3348' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--navy); outline-offset: -1px; border-color: var(--navy);
}
.hint { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--muted-2); }
/* On a state wash --muted-2 drops under 4.5:1 (4.43 on soon, 4.33 on late); --muted is 6.34
   and 6.20. Forms opened inside a card (the pet decision) sit on the wash. */
.card .hint, .card .field label .opt { color: var(--muted); }
.hint:empty { display: none; }
.hint.over { color: var(--late); font-weight: 500; }
.error { margin: 4px 0 12px; padding: 10px 12px; background: var(--late-wash); color: var(--late); font-size: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: end; }

.pw { position: relative; }
.pw input { padding-right: 76px; min-height: 46px; } /* so the inset toggle is 44px tall */
.reveal {
  position: absolute; top: 1px; right: 1px; bottom: 1px;
  min-width: 64px; padding: 0 12px;
  border: 0; border-left: 1px solid var(--field); background: var(--white);
  font: 500 13px/1 var(--sans); color: var(--navy); cursor: pointer;
}
.reveal:focus-visible { outline-offset: -2px; }

/* ── auth pages ────────────────────────────────────────────────────────────── */
.auth .page-head { border-bottom: 0; padding-top: 32px; }
.auth .form { padding-top: 8px; }

/* ── repairs (Milestone 3) ─────────────────────────────────────────────────── */
.law-pad { padding-top: 8px; }
.law-pad > .law { margin-top: 4px; border-bottom: 1px solid var(--hair); }
.law-sub { margin-top: 14px; font: 600 10px/1.4 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.actions-quiet { gap: 4px 18px; margin-top: 6px; }
.actions-quiet .linkish { font-size: 14px; }
.subform { margin: 0 0 16px; padding: 14px 14px 0; background: var(--wash); }
.card .subform { background: var(--white); }
/* Radio buttons: each choice a 44px row with its label. */
.radios { margin: 0 0 16px; }
.radios legend {
  margin: 0 0 4px; padding: 0; border: 0; width: auto;
  font: 600 10px/1.4 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.radios .radio { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; cursor: pointer; }
.radios .radio input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--navy); }
.radios .hint { margin-top: 2px; }
/* Photo thumbnails: small, tappable, never wider than the column. */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumbs li { border: 0; }
.thumbs a { display: block; min-width: 44px; min-height: 44px; line-height: 0; }
.thumbs img { display: block; width: 104px; height: 78px; object-fit: cover; background: var(--wash); border: 1px solid var(--hair); }
.field input[type="file"] { padding: 9px 10px; font-size: 14px; }

/* ── the evidence file ─────────────────────────────────────────────────────── */
.sample-line {
  margin: 16px var(--gutter) 0; padding: 10px 12px;
  border: 1px solid var(--line); background: var(--wash);
  font: 600 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.pack-facts { padding-top: 16px; }
.pack-about .prose { padding-top: 12px; }
.pack-about .cite { margin-top: 2px; }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline > .ev { padding: 16px var(--gutter); border-bottom: 1px solid var(--hair); }
.ev-num { font: 600 10px/1.4 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; }
.ev-title { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.3; margin-bottom: 4px; overflow-wrap: anywhere; }
.ev-line { font-size: 14px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 62ch; }
.ev-line + .ev-line { margin-top: 2px; }
.ev-ref { margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--navy); }
.ev-when { margin-top: 6px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ev-when + .ev-when { margin-top: 0; }
.ev-label { font-weight: 600; color: var(--ink); }
.ev-correction { background: var(--wash); }
/* 4.33:1 in --muted-2 on --wash, under AA for 10px text; --muted is 6.19:1 (review fixes, 24 Sep 2026). */
.ev-correction .ev-num { color: var(--muted); }
.ev .linkish { margin-top: 4px; }
.pack-foot { margin-top: 28px; }
.fp-groups { margin: 12px 0 6px; font: 500 15px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; color: var(--ink); }
.fp-groups span { display: inline-block; margin-right: 10px; }
.fp-copy { margin: 4px 0 8px; }
.fp-copy .fp-one { font: 400 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ── printing (Print / Save as PDF) ────────────────────────────────────────── */
/* Only the pack: no bars, buttons or forms; nothing fixed (Safari repeats fixed elements on every page);
   no min-height (it adds a blank page); each entry kept whole. The sample's "Sample data" line prints. */
@media print {
  @page { margin: 18mm; }
  html, body { background: #fff !important; }
  html { scroll-padding: 0 !important; }
  .topbar, .tabbar, .status, .demo-banner, .no-print, .crumb, button, form, .law { display: none !important; }
  .shell, body.has-tabbar .shell { max-width: none; min-height: 0 !important; padding-bottom: 0 !important; border: 0 !important; }
  main { padding-bottom: 0; }
  .page-head { padding-top: 0; }
  .ev, .pack-foot, .pack-facts, .sample-line { break-inside: avoid; page-break-inside: avoid; }
  .ev-correction { background: none; border-left: 3px solid #999; }
  a { color: inherit; text-decoration: none; }
  .thumbs img { width: 120px; height: 90px; }
  .sample-line { border: 2px solid #000; background: none; }
}

@media (min-width: 600px) {
  :root { --gutter: 24px; }
  .shell { border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); }
  h1 { font-size: 34px; }
  .page-head { padding-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}