/* Greenhouse trial app.
   It should read like the trial's own paperwork: a field book and a planting
   plan, not an app template. White pages, hairline rules, grey bands for
   grouping, 3px corners, compact controls. The one bold element is the plan
   of the greenhouse on the home screen: a ruled grid of 72 plots. A plot
   counted this round steps back into pale green, so the ones still to do stand
   out in white; an anomaly is an orange corner flag.
   IBM Plex Sans Hebrew, self-hosted. Light only: it is read in daylight.
   The app is always dir="rtl"; where a physical side is used it says so. */

@font-face { font-family: "Plex Hebrew"; font-weight: 400; font-display: swap; src: url("/fonts/plex-hebrew-hebrew-400.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Plex Hebrew"; font-weight: 500; font-display: swap; src: url("/fonts/plex-hebrew-hebrew-500.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Plex Hebrew"; font-weight: 700; font-display: swap; src: url("/fonts/plex-hebrew-hebrew-700.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Plex Hebrew"; font-weight: 400; font-display: swap; src: url("/fonts/plex-hebrew-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Hebrew"; font-weight: 500; font-display: swap; src: url("/fonts/plex-hebrew-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Hebrew"; font-weight: 700; font-display: swap; src: url("/fonts/plex-hebrew-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #ffffff;
  --wash: #f2f4f3;
  --ink: #1c2420;
  --ink-2: #4a5550;
  --ink-3: #626d67;
  --rule: #dfe4e1;
  --rule-2: #bfc8c3;
  --plan: #9aa6a0;
  --green: #1f5c3b;
  --green-2: #2e7a4e;
  --green-wash: #e7f0ea;
  --green-done: #d3e7d9;
  --carrot: #d4610c;
  --carrot-ink: #8f3f05;
  --carrot-wash: #fbeee3;
  --bad: #b3261e;
  --bad-wash: #fbeceb;
  --focus: #1c64d1;
  --r: 3px;
  --tap: 44px;
  --btn: 40px;
  --rail: 224px;
  --tabbar: 58px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 "Plex Hebrew", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--green); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
svg.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── shell ─────────────────────────────────────────────────────────────── */
.shell { min-height: 100dvh; }
.main { min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  min-height: 52px; padding: env(safe-area-inset-top) 12px 0;
  background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule);
}
.topbar h1 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-inline-start: -8px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--ink); cursor: pointer;
}
.topbar .back:hover { background: var(--wash); }
.das { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.pending-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--r);
  background: #b4520a; color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}

.view { max-width: 880px; margin: 0 auto; padding: 16px 16px calc(var(--tabbar) + 28px + env(safe-area-inset-bottom)); }

.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper); border-top: 1px solid var(--rule);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--ink-3); text-decoration: none; font-size: 12px; font-weight: 500;
}
/* The section you are in: green, and a 2px line along the bar's top edge. */
.tabbar a.on { color: var(--green); box-shadow: inset 0 2px 0 var(--green); }
.tabbar a.on svg.icon { stroke-width: 2.1; }

.rail { display: none; }
.wide-only { display: none; }

@media (min-width: 900px) {
  .shell.signed-in { display: grid; grid-template-columns: var(--rail) 1fr; }
  .rail {
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100dvh; padding: 16px 0;
    background: var(--wash); color: var(--ink); border-inline-end: 1px solid var(--rule);
  }
  .rail .trial { font-size: 15px; font-weight: 700; line-height: 1.35; padding: 2px 20px 16px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
  .rail a {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 18px;
    color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 15px;
    border-inline-start: 2px solid transparent;
  }
  .rail a:hover { color: var(--ink); background: #e9eceb; }
  .rail a.on { color: var(--green); border-inline-start-color: var(--green); background: var(--paper); font-weight: 700; }
  .rail .who { margin-top: auto; padding: 12px 20px 0; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--rule); }
  .tabbar { display: none; }
  .wide-only { display: inline; }
  .phone-only { display: none; }
  .view { padding: 24px 32px 48px; }
}

/* ── type and text ─────────────────────────────────────────────────────── */
/* A section starts with a rule, as in a field book. */
h2 { margin: 26px 0 10px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 16px; font-weight: 700; line-height: 1.3; }
h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
h3 { margin: 16px 0 6px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
p { margin: 0 0 12px; }
.lede { color: var(--ink-2); font-size: 14px; margin: 0 0 14px; max-width: 62ch; }
.muted { color: var(--ink-3); }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.empty { color: var(--ink-3); padding: 16px 0; font-size: 15px; }
.loading { color: var(--ink-3); padding: 40px 0; text-align: center; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--btn); padding: 0 14px; border-radius: var(--r);
  border: 1px solid var(--green); background: var(--green); color: #fff;
  font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn svg.icon { width: 18px; height: 18px; }
.btn:hover { background: #174a2f; }
.btn.quiet { background: var(--paper); color: var(--ink); border-color: var(--rule-2); }
.btn.quiet:hover { background: var(--wash); }
.btn.quiet svg.icon { color: var(--green); }
.btn.danger { background: var(--paper); color: var(--bad); border-color: #e3b7b3; }
.btn.danger:hover { background: var(--bad-wash); }
.btn.wide { width: 100%; min-height: var(--tap); }
.btn[disabled] { opacity: .5; cursor: default; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

/* The two field entries on the home screen: one toolbar, two halves. */
.quick { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 18px; border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; }
.quick a {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 10px;
  background: var(--paper); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500;
}
.quick a + a { border-inline-start: 1px solid var(--rule-2); }
.quick a svg.icon { color: var(--green); }
.quick a:hover { background: var(--wash); }
/* The strip clips anything outside it, so the focus ring is drawn inside. */
.quick a:focus-visible { outline-offset: -3px; }

/* ── the plan of the greenhouse ────────────────────────────────────────── */
.stage { margin: 0 0 14px; }
.stage strong { font-size: 15px; }
.stage .lede { margin: 4px 0 0; }
.meter { height: 4px; background: var(--rule); overflow: hidden; margin: 8px 0 0; }
.meter i { display: block; height: 100%; background: var(--green-2); }

.blocks { display: grid; gap: 18px; }
.block h3 { margin: 0 0 6px; color: var(--ink); font-size: 14px; }
.units { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .units { grid-template-columns: 1fr 1fr; } }
.unit { border: 1px solid var(--plan); background: var(--paper); }
.unit-name { font-size: 12.5px; font-weight: 500; color: var(--ink-2); padding: 5px 8px; background: var(--wash); border-bottom: 1px solid var(--plan); }
/* A ruled grid: the 1px gaps show the rule colour behind the cells. */
.cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--rule-2); }
.cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 52px; background: var(--paper); color: var(--ink); text-decoration: none; line-height: 1.15;
}
.cell b { font-size: 16px; font-weight: 700; }
.cell small { font-size: 10.5px; color: var(--ink-3); direction: ltr; margin-top: 2px; }
.cell:hover { background: var(--wash); }
.cell:focus-visible, .roots a:focus-visible { outline-offset: -3px; }
.cell.done { background: var(--green-done); color: var(--green); }
.cell.done small { color: #3a644a; }
.cell.done:hover { background: #c3dcca; }
/* The flag: a triangle in the cell's top corner on the reading side (right, in Hebrew). */
.cell.flag::after {
  content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 14px;
  background: var(--carrot); clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { position: relative; width: 14px; height: 14px; border: 1px solid var(--rule-2); background: var(--paper); }
.legend i.done { background: var(--green-done); border-color: #a9c9b3; }
/* As on the map: the flag sits at the top right, the reading side. */
.legend i.flag::after { content: ""; position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: var(--carrot); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.find { display: flex; margin: 0 0 16px; }
.find input { direction: rtl; border-start-end-radius: 0; border-end-end-radius: 0; }
.find input::placeholder { color: var(--ink-3); }
.find .btn { min-height: var(--tap); border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; }

/* ── lists (sheets, menu, history) ─────────────────────────────────────── */
.list { list-style: none; margin: 0 0 18px; padding: 0; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.list > li + li { border-top: 1px solid var(--rule); }
.list a.item, .list button.item, .list .item.static {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 9px 4px;
  border: 0; background: none; color: var(--ink); text-decoration: none; text-align: start;
}
.list a.item, .list button.item { cursor: pointer; }
.list a.item:hover, .list button.item:hover { background: var(--wash); }
.item .text { flex: 1; min-width: 0; }
.item .title { display: block; font-weight: 500; }
.item .sub { display: block; font-size: 13.5px; color: var(--ink-3); }
.item .fig { font-weight: 700; color: var(--green); white-space: nowrap; }
.item svg.icon { color: var(--green); }
.item svg.icon:last-child { color: var(--ink-3); width: 16px; height: 16px; }
.list .static { padding: 12px 4px; }
/* The short guide: one step per item, the title on its own line. */
.guide { margin: 0 0 8px; padding: 0; padding-inline-start: 22px; max-width: 62ch; }
.guide li { margin: 0 0 16px; padding-inline-start: 4px; }
.guide li::marker { font-weight: 700; color: var(--green); }
.guide strong { display: block; font-weight: 700; }
.guide p { margin: 2px 0 8px; color: var(--ink-2); font-size: 15px; }
.group-label { margin: 22px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-3); }

/* ── panels, facts, computed values ────────────────────────────────────── */
.panel { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 14px; margin: 0 0 14px; }
.panel > p:last-child { margin-bottom: 0; }
/* The plot's facts read like a spec sheet: label over value, ruled below. */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); column-gap: 16px; margin: 0; }
.facts div { min-width: 0; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: 12.5px; color: var(--ink-3); }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
/* Each value draws its own hairline box, so an odd count leaves no grey hole. */
.figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1px; padding: 1px; margin: 4px 0 14px; }
.figures div { background: var(--paper); padding: 8px 10px; box-shadow: 0 0 0 1px var(--rule); }
.figures span { display: block; font-size: 12.5px; color: var(--ink-3); }
.figures strong { font-size: 18px; font-weight: 700; }

/* ── messages ──────────────────────────────────────────────────────────── */
.msg { padding: 9px 12px; margin: 0 0 12px; border-inline-start: 3px solid; font-size: 15px; }
.msg.ok { background: var(--green-wash); border-color: var(--green-2); }
.msg.warn { background: var(--carrot-wash); border-color: var(--carrot); color: var(--carrot-ink); }
.msg.bad { background: var(--bad-wash); border-color: var(--bad); color: var(--bad); }
.msg ul { margin: 4px 0 0; padding-inline-start: 20px; }
/* A status tag, not a pill. */
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 2px; padding: 1px 7px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.pill.ok { background: var(--green-wash); color: var(--green); }
.pill.warn { background: var(--carrot-wash); color: var(--carrot-ink); }
.pill.bad { background: var(--bad-wash); color: var(--bad); }

/* ── forms ─────────────────────────────────────────────────────────────── */
.form { padding-bottom: 8px; }
.field { margin: 0 0 14px; min-width: 0; }
.field label, .field .field-label { display: block; margin: 0 0 5px; font-weight: 500; font-size: 14px; }
.field label.btn { display: inline-flex; margin: 0; font-size: 15px; }
/* Kept in the page (camera, keyboard, screen readers) but drawn by its label. */
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.file-input:focus-visible + label.btn { outline: 2px solid var(--focus); outline-offset: 2px; }
.field .hint { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
.field .req { color: var(--carrot-ink); }
input, select, textarea {
  display: block; width: 100%; max-width: 100%; min-width: 0; min-height: var(--tap);
  padding: 9px 11px; border: 1px solid var(--rule-2); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--green); outline: 1px solid var(--green); outline-offset: 0; }
textarea { min-height: 92px; resize: vertical; }
/* One drawn arrow on every phone, on the side opposite the reading start (left, in Hebrew). */
select {
  -webkit-appearance: none; appearance: none; padding-inline-end: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f5c3b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 12px center; background-size: 15px 15px;
}
input[inputmode="decimal"], input[inputmode="numeric"] { direction: ltr; text-align: right; font-size: 18px; font-weight: 500; }
/* Safari draws date and time inputs at their own minimum width, past a
   narrow card's edge; plain appearance makes them obey width: 100%. */
input[type="date"], input[type="time"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; direction: ltr; text-align: right; }
input::-webkit-date-and-time-value { text-align: right; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pair > * { min-width: 0; }
@media (max-width: 480px) { .pair { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* An email or code inside Hebrew text: read left to right, set at the Hebrew end. */
.ltr-end { direction: ltr; text-align: right; }
.names { display: grid; gap: 8px; margin: 0 0 16px; }
@media (min-width: 640px) { .names { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; } }
.name-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: stretch; }
.name-row label { font-size: 13px; font-weight: 700; color: var(--green); text-align: center;
  background: var(--wash); border: 1px solid var(--rule-2); border-inline-end: 0; border-start-start-radius: var(--r); border-end-start-radius: var(--r);
  display: grid; place-items: center; }
.name-row input { border-start-start-radius: 0; border-end-start-radius: 0; }
.locked { padding: 10px 12px; border-radius: var(--r); background: var(--wash); border: 1px dashed var(--rule-2); font-weight: 500; }

.savebar {
  position: sticky; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); z-index: 10;
  margin: 8px -16px 0; padding: 10px 16px; background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--rule); backdrop-filter: blur(6px);
}
@media (min-width: 900px) { .savebar { bottom: 0; margin: 8px 0 0; padding: 10px 0; } }

/* ── tables ────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); margin: 0 0 14px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; text-align: start; font-size: 15px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th { font-size: 12.5px; font-weight: 500; color: var(--ink-3); background: var(--wash); }
tbody tr:last-child td { border-bottom: 0; }
tr.link { cursor: pointer; }
tr.link:hover td { background: var(--wash); }
tr.hidden-row td { color: var(--ink-3); text-decoration: line-through; }
td.n { direction: ltr; text-align: right; }

/* A segmented control: one strip, the chosen part filled. */
.segments { display: inline-flex; flex-wrap: wrap; margin: 0 0 10px; border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; }
.segments + .segments { margin-inline-start: 8px; }
.segments button {
  min-height: 36px; padding: 0 12px; border: 0; background: var(--paper);
  color: var(--ink-2); font-size: 14px; cursor: pointer;
}
.segments button + button { border-inline-start: 1px solid var(--rule-2); }
.segments button:hover { background: var(--wash); }
.segments button.on { background: var(--green); color: #fff; }
.segments button:focus-visible { outline-offset: -3px; }
.segments button.on:focus-visible { outline-color: #fff; }

.roots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); }
.roots a { display: flex; align-items: center; justify-content: center; min-height: 42px; background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 500; }
.roots a:hover { background: var(--wash); }
.roots a.done { background: var(--green-done); color: var(--green); }

.photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.photos figure { margin: 0; position: relative; }
.photos img { width: 96px; height: 96px; object-fit: cover; border-radius: 2px; border: 1px solid var(--rule); display: block; }
.photos button { position: absolute; top: 4px; left: 4px; min-height: 26px; padding: 0 7px; font-size: 12.5px; border-radius: 2px; border: 0; background: rgba(28, 36, 32, .78); color: #fff; cursor: pointer; }

.history li { padding: 11px 4px; }
.history .what { font-weight: 500; }
.history .diff { margin-top: 4px; font-size: 14px; color: var(--ink-2); }

/* ── sign-in ───────────────────────────────────────────────────────────── */
.signin { max-width: 400px; margin: 9vh auto 0; }
.signin .mark { display: block; margin: 0 0 14px; color: var(--green); }
.signin .mark svg.icon { width: 36px; height: 36px; stroke-width: 1.5; }
.signin h2 { font-size: 22px; margin: 0 0 6px; padding: 0; border: 0; }

.toast {
  position: fixed; inset-inline: 16px; bottom: calc(var(--tabbar) + 14px + env(safe-area-inset-bottom)); z-index: 40;
  margin: 0 auto; max-width: 460px; padding: 11px 14px; border-radius: var(--r);
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; text-align: center;
}
@media (min-width: 900px) { .toast { bottom: 24px; } }

.qr-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qr-card { border: 1px solid var(--rule-2); padding: 6px; text-align: center; background: #fff; break-inside: avoid; }
.qr-card svg { width: 100%; height: auto; }
.qr-card .code { font-weight: 700; direction: ltr; white-space: nowrap; font-size: 13px; }
.qr-card small { display: block; font-size: 11px; color: var(--ink-2); }

@media print {
  .topbar, .tabbar, .rail, .no-print, .toast { display: none !important; }
  body { background: #fff; }
  .shell.signed-in { display: block; }
  .view { max-width: none; padding: 0; }
  .qr-sheet { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }