/* crewlog's own bits on top of the house-ui kit (public/kit/, don't edit
   those; see docs/CUSTOMIZE.md). The colour is ONE number, --hue, set from
   Settings at runtime; everything here uses the kit's roles, never hex. */

:root { --hue: 45; }

/* ── shell ── */
[hidden] { display: none !important; }
.app.solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "main"; }
.app.solo > .rail, .app.solo > .navbar { display: none; }
#content > * { max-width: 1100px; }
.appbar-slot { display: flex; flex: 0 1 440px; min-width: 0; }
.appbar-slot:empty { display: none; }
.appbar-end { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; padding-inline-end: var(--sp-2); }
.appbar h1 { font: 650 24px/32px var(--font); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.brand {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--sp-3);
  border-radius: var(--shape-lg); text-decoration: none;
  color: var(--on-primary-container); background: var(--primary-container);
  transition: border-radius var(--dur-medium) var(--ease-spring);
}
.brand:hover { border-radius: var(--shape-xl); }
.brand .icon { font-size: 30px; }
.who-btn {
  display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 50vw; min-height: 40px;
  padding: 0 var(--sp-4); border: 0; border-radius: var(--shape-full); cursor: pointer;
  font: var(--label-l); color: var(--on-secondary-container); background: var(--secondary-container);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.banner { margin: 0 var(--sp-6) var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--shape-md); font: var(--body-m); color: var(--on-error-container); background: var(--error-container); }
.empty { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--on-surface-variant); }
.empty .icon { font-size: 40px; color: var(--outline); }
.empty h2 { margin: 0; font: var(--title-m); color: var(--on-surface); }
.empty p { margin: 0; max-width: 44ch; }
.error-card { color: var(--on-error-container); background: var(--error-container); }
.error-card pre { white-space: pre-wrap; font: var(--body-s); font-family: var(--font-mono); margin: var(--sp-2) 0 0; }
.toast-host { position: fixed; left: 50%; bottom: var(--sp-6); translate: -50% 0; z-index: 50; display: grid; justify-items: center; gap: var(--sp-2); width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.toast-host .snackbar { pointer-events: auto; max-width: 100%; }
.section-title { display: flex; align-items: center; gap: var(--sp-2); font-weight: 650; }
.fine { font: var(--body-s); color: var(--on-surface-variant); margin: var(--sp-2) 0 0; display: flex; gap: var(--sp-1); align-items: flex-start; }
.fine .icon { font-size: 16px; }
.muted { color: var(--on-surface-variant); font: var(--body-s); }
.nowrap { white-space: nowrap; }
.spacer { flex: 1; }
a.btn { text-decoration: none; }
button.list-item { width: 100%; border: 0; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--sp-2); margin-inline-start: var(--sp-2); border-radius: var(--shape-xs); font: var(--label-m); color: var(--on-surface-variant); background: var(--surface-container-highest); vertical-align: middle; }
.tag.ok { color: var(--on-primary-container); background: var(--primary-container); }
.tag.bad { color: var(--on-error-container); background: var(--error-container); }
.warn-text { color: var(--error); font: var(--body-s); }
.danger-text { color: var(--error) !important; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--shape-full); font: var(--label-s); color: var(--on-error); background: var(--error); }

/* ── flags: what the boss should look at ── */
/* A warning role the kit lacks, built like its error role on a fixed amber hue. */
:root {
  --hue-warn: 75;
  --warn-container:    light-dark(oklch(0.93 0.07 var(--hue-warn)), oklch(0.42 0.09 var(--hue-warn)));
  --on-warn-container: light-dark(oklch(0.36 0.09 var(--hue-warn)), oklch(0.93 0.06 var(--hue-warn)));
}
.flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.flag { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--shape-full); font: var(--label-s); color: var(--on-warn-container); background: var(--warn-container); white-space: nowrap; }
.flag .icon { font-size: 14px; }
.flag-far_from_site, .flag-not_signed_out { color: var(--on-error-container); background: var(--error-container); }
.geo { display: inline-flex; align-items: center; gap: 2px; font: var(--body-s); color: var(--on-surface-variant); }
.geo .icon { font-size: 16px; }

/* ── forms + dialogs ── */
.field > span:first-child { font: var(--body-s); color: var(--on-surface-variant); padding-inline: var(--sp-4); }
.field-like { display: grid; gap: var(--sp-2); }
.field-like > .label, .label { font: var(--body-s); color: var(--on-surface-variant); }
.field-like .hint { font: var(--body-s); color: var(--on-surface-variant); }
.entry-form { display: grid; gap: var(--sp-4); }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.form-status { min-height: 1lh; margin: 0; font: var(--body-m); color: var(--error) !important; }
dialog.dialog .actions { align-items: center; margin-top: var(--sp-2); flex-wrap: wrap; }
dialog.dialog .actions .spacer { flex: 1; }
.actions.start { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-start; margin-top: var(--sp-3); }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.dlg-head h2 { margin-bottom: var(--sp-3) !important; min-width: 0; overflow-wrap: anywhere; }
dialog.dialog { width: min(520px, calc(100vw - 24px)); max-width: none; min-width: 0; max-height: calc(100dvh - 24px); overflow-y: auto; }
.entry-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; margin-bottom: var(--sp-4); font: var(--body-s); }
.history summary { cursor: pointer; font: var(--label-l); color: var(--primary); min-height: 40px; display: flex; align-items: center; }
.history ul { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); font: var(--body-s); }
.switch-row { display: flex; align-items: center; gap: var(--sp-3); font: var(--body-m); cursor: pointer; }
.switch-row input.switch { flex: none; }
.set-block { padding: var(--sp-3) 0; border-block: 1px solid var(--outline-variant); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer; border: 0; border-radius: var(--shape-full); color: white;
  background: light-dark(oklch(0.62 0.14 var(--sw-h)), oklch(0.70 0.12 var(--sw-h)));
  transition: border-radius var(--dur-medium) var(--ease-spring);
}
.swatch:hover { border-radius: var(--shape-sm); }
.swatch.on { outline: 2px solid var(--on-surface); outline-offset: 2px; }
.swatch .icon { font-size: 18px; }
@media (max-width: 599px) {
  dialog.dialog { width: calc(100vw - 16px); padding: var(--sp-5) var(--sp-4); }
  .toast-host { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .toast-host .snackbar { width: 100%; }
  .app.solo ~ .toast-host { bottom: var(--sp-6); }
}

/* ── the staff app's front step (from rink-manage's crew.css) ── */
.app.gate { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
.app.gate > .rail, .app.gate > .navbar, .app.gate .appbar { display: none; }
.gate-page { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; padding: var(--sp-6) var(--sp-4); }
.gate-card { width: 100%; max-width: 420px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.gate-card h1 { margin: 0; font: var(--headline-m); }
.gate-brand { display: flex; align-items: center; gap: var(--sp-2); font: var(--title-m); color: var(--primary); }
.gate-hint { margin: 0; font: var(--body-m); color: var(--on-surface-variant); }
.gate-status { margin: 0; min-height: 1lh; font: var(--body-m); color: var(--error); }
.gate-form { display: flex; gap: var(--sp-2); }
.gate-form > input { flex: 1; min-width: 0; }
.gate-code { height: 56px; padding: 0 var(--sp-4); border: 0; border-radius: var(--shape-lg); background: var(--surface-container-highest); color: var(--on-surface); font: var(--headline-s); letter-spacing: .08em; text-transform: uppercase; }
.gate-form .btn { height: 56px; }

/* ── Today (both apps; the whole staff app) ── */
.today { display: grid; gap: var(--sp-4); max-width: 640px !important; margin-inline: auto; }
.today-date { margin: var(--sp-2) 0 0; font: var(--title-m); color: var(--on-surface-variant); }
.today .card { display: grid; gap: var(--sp-3); }
.today .card h2 { margin: 0; font: var(--title-l); display: flex; align-items: center; gap: var(--sp-2); }
.site-pick { display: grid; gap: var(--sp-2); }
.site-btn {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); align-items: center; text-align: start;
  min-height: 64px; padding: var(--sp-3) var(--sp-4); cursor: pointer;
  border: 2px solid transparent; border-radius: var(--shape-lg); background: var(--surface-container-high); color: var(--on-surface);
}
.site-btn .icon { grid-row: span 2; color: var(--on-surface-variant); }
.site-btn .site-name { font: var(--title-m); }
.site-btn .site-addr { font: var(--body-s); color: var(--on-surface-variant); grid-column: 2; }
.site-btn[aria-checked="true"] { border-color: var(--primary); background: var(--primary-container); color: var(--on-primary-container); }
.site-btn[aria-checked="true"] .icon { color: var(--on-primary-container); font-variation-settings: "FILL" 1; }
.btn.lg.signin, .btn.lg.signout { width: 100%; height: 64px; font: var(--title-l); }
.btn.lg.signin .icon, .btn.lg.signout .icon { font-size: 26px; }
.btn.signout { color: var(--on-primary); background: var(--primary); }
.onsite { background: var(--primary-container); color: var(--on-primary-container); }
.onsite-head { display: flex; align-items: center; gap: var(--sp-2); font: var(--label-l); text-transform: uppercase; letter-spacing: .06em; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in oklch, currentColor 25%, transparent); }
.onsite-site { font: var(--headline-m); overflow-wrap: anywhere; }
.onsite-since { font: var(--title-m); }
.onsite .geo { color: inherit; }
.onsite-wrap { display: grid; gap: var(--sp-4); }
.warn-card { background: var(--warn-container); color: var(--on-warn-container); }
.warn-card p { color: inherit !important; }
.inline-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.inline-form input { min-height: 48px; padding: 0 var(--sp-3); font: var(--title-m); border: 0; border-radius: var(--shape-md); background: var(--surface); color: var(--on-surface); }
.day-card .day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.day-title { font: var(--title-m); }
.day-sub { font: var(--body-m); color: var(--on-surface-variant); }
.notes-label { display: flex; justify-content: space-between; font: var(--label-l); color: var(--on-surface-variant); }
.save-state { font: var(--body-s); }
.day-card textarea {
  width: 100%; min-height: 96px; resize: vertical; padding: var(--sp-3) var(--sp-4); box-sizing: border-box;
  font: var(--body-l); color: var(--on-surface); border: 0; border-bottom: 1px solid var(--on-surface-variant);
  border-radius: var(--shape-xs) var(--shape-xs) 0 0; background: var(--surface-container-highest); outline: none;
}
.day-card textarea:focus { border-bottom: 2px solid var(--primary); }
.break-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.break-seg > button { min-width: 52px; }
.forgot { justify-self: center; }
.recent { display: grid; gap: var(--sp-2); }
.recent .section-title { margin-inline: 0; }
.recent-day { display: grid; gap: var(--sp-1); }
.recent-date { display: flex; justify-content: space-between; font: var(--label-l); color: var(--on-surface-variant); padding: var(--sp-2) var(--sp-1) 0; }
.entry-line { width: 100%; border: 0; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.entry-line .meta { font: var(--title-s); color: var(--on-surface); }

/* ── photos ── */
.photo-block { display: grid; gap: var(--sp-2); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); }
.photos.mini { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); margin: var(--sp-1) var(--sp-4) var(--sp-2); }
.thumb { position: relative; aspect-ratio: 1; border-radius: var(--shape-md); overflow: hidden; background: var(--surface-container-highest); }
.thumb a, .thumb img { display: block; width: 100%; height: 100%; }
.thumb img { object-fit: cover; }
.thumb-x {
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgb(0 0 0 / .55);
}
.thumb-x .icon { font-size: 18px; }
.thumb.pending img { filter: brightness(.55); }
.thumb-state, .thumb-retry {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; padding: var(--sp-1);
  font: var(--label-m); text-align: center; color: #fff;
}
.thumb-retry { width: 100%; border: 0; cursor: pointer; background: color-mix(in oklch, var(--error) 70%, transparent); }
.thumb-retry .icon { font-size: 28px; }
.photo-note { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font: var(--body-m); color: var(--on-surface-variant); }
.photo-note.bad { color: var(--error); }
.photo-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); }
.photo-btn { position: relative; width: 100%; padding: 0 var(--sp-3) !important; cursor: pointer; }
.photo-btn:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Mouse + keyboard (a desktop): there's no camera to open, so just one "add" button. */
@media (pointer: fine) {
  .photo-btn.take { display: none; }
  .photo-btns { grid-template-columns: minmax(0, 18rem); }
}

/* ── Week ── */
.week { display: grid; gap: var(--sp-4); }
.wk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wk-nav { display: flex; align-items: center; gap: var(--sp-1); }
.wk-range { font: var(--title-m); min-width: 11ch; text-align: center; }
.wk-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wk-grid { display: grid; gap: var(--sp-2); }
.wk-row {
  display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: minmax(8rem, 1.3fr) minmax(0, 7fr) 5.5rem 6.5rem;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--shape-lg); background: var(--surface-container-low);
}
.wk-headrow { background: none; padding-block: 0; font: var(--label-m); color: var(--on-surface-variant); }
.wk-foot { background: var(--surface-container); }
.wk-name { display: grid; min-width: 0; }
.wk-name b { font: var(--title-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-name span { font: var(--body-s); color: var(--on-surface-variant); }
.wk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wk-dh, .wk-dt { display: grid; justify-items: center; font: var(--label-m); }
.wk-dh b { font: var(--title-s); color: var(--on-surface); }
.wk-dh.is-today b { color: var(--primary); }
.wk-cell {
  position: relative; display: grid; place-items: center; height: 48px; min-width: 0; padding: 0; cursor: pointer;
  border: 0; border-radius: var(--shape-md); font: var(--title-s); color: var(--on-surface); background: var(--surface-container-high);
}
.wk-cell .dow { display: none; }
.wk-cell.none { color: var(--outline); background: transparent; border: 1px dashed var(--outline-variant); }
.wk-cell.worked { color: var(--on-secondary-container); background: var(--secondary-container); }
.wk-cell.onsite { color: var(--on-primary); background: var(--primary); }
.wk-cell.noout { color: var(--on-error-container); background: var(--error-container); }
.wk-cell.is-today { outline: 2px solid var(--primary); outline-offset: 1px; }
.wk-cell[data-flag]::after { content: ""; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--error); }
.wk-total { display: grid; justify-items: end; font: var(--title-s); }
.wk-total span { font: var(--body-s); color: var(--on-surface-variant); }
.wk-total .ot { color: var(--error); }
.wk-pay { text-align: end; font: var(--title-s); font-variant-numeric: tabular-nums; }
.needs .section-title { margin-inline: 0; }
.day-notes { margin: 0 var(--sp-4) var(--sp-2); font: var(--body-m); color: var(--on-surface-variant); white-space: pre-wrap; }
/* Phones: each person is a card, name + totals on top, the seven days under. */
@media (max-width: 719px) {
  .wk-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name total pay" "days days days"; row-gap: var(--sp-2); }
  .wk-name { grid-area: name; } .wk-days { grid-area: days; } .wk-total { grid-area: total; } .wk-pay { grid-area: pay; }
  .wk-headrow { display: none; }
  .wk-cell { height: 52px; align-content: center; gap: 0; font: var(--label-l); }
  .wk-cell .dow { display: block; font: var(--label-s); opacity: .75; }
  .wk-actions { width: 100%; }
  .wk-actions > * { flex: 1; }
}

/* ── Team ── */
.team { display: grid; gap: var(--sp-4); }
.team-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.team .list-item.off { opacity: .6; }
.row-actions { display: flex; align-items: center; gap: var(--sp-1); }
.pin-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font: var(--body-m); }
.invite { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; }
.invite-qr svg { display: block; width: 168px; height: 168px; border-radius: var(--shape-sm); }
.invite-info { flex: 1; min-width: 14rem; display: grid; gap: var(--sp-2); }
.invite-url { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--shape-sm); background: var(--surface-container-highest); font: var(--body-s); font-family: var(--font-mono); overflow-wrap: anywhere; user-select: all; }

/* ── Data ── */
.data { display: grid; gap: var(--sp-4); }
.data .card { display: grid; gap: var(--sp-2); }
.data .card h2 { margin: 0; font: var(--title-l); display: flex; align-items: center; gap: var(--sp-2); }
.import-text, .prompt {
  width: 100%; box-sizing: border-box; padding: var(--sp-3); font: var(--body-s); font-family: var(--font-mono);
  color: var(--on-surface); border: 1px solid var(--outline-variant); border-radius: var(--shape-sm); background: var(--surface);
}
.prompt { margin: 0; white-space: pre-wrap; max-height: 16rem; overflow: auto; }
.table-wrap { overflow-x: auto; }
.plan { border-collapse: collapse; width: 100%; font: var(--body-s); }
.plan th, .plan td { padding: 6px 8px; border-bottom: 1px solid var(--outline-variant); text-align: start; vertical-align: top; }
.plan tr.duplicate td { color: var(--on-surface-variant); }
.plan tr.error td { color: var(--error); }
.plan-sum { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.plan-sum .tag { margin: 0; }
.import-preview > p { display: flex; align-items: center; gap: var(--sp-1); margin: var(--sp-2) 0; }
.ok-note { color: var(--primary); }

/* ── Recap: a sign-in sheet, on screen and on paper ── */
.recap { display: grid; gap: var(--sp-6); }
.recap-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.recap-controls select { min-height: 40px; padding: 0 var(--sp-3); font: var(--body-m); border-radius: var(--shape-sm); border: 1px solid var(--outline-variant); background: var(--surface); color: var(--on-surface); }
.sheet { padding: var(--sp-6); border-radius: var(--shape-lg); background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); }
.sheet-head { display: grid; gap: 2px; margin-bottom: var(--sp-4); }
.sheet-co { font: var(--label-l); color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: .06em; }
.sheet-head h2 { margin: 0; font: var(--headline-s); }
.sheet-addr, .sheet-week { font: var(--body-m); color: var(--on-surface-variant); }
.sheet-table-wrap { overflow-x: auto; }
.sheet-table { width: 100%; border-collapse: collapse; font: var(--body-s); }
.sheet-table th { text-align: start; font: var(--label-m); color: var(--on-surface-variant); border-bottom: 2px solid var(--outline); padding: 6px 8px; }
.sheet-table td { padding: 6px 8px; border-bottom: 1px solid var(--outline-variant); vertical-align: top; }
.sheet-table .num, .sheet-table th.num { text-align: end; font-variant-numeric: tabular-nums; }
.sheet-table .work { min-width: 16rem; white-space: pre-wrap; }
.sheet-table tfoot td { border-bottom: 0; padding-block: 3px; }
.sheet-table tfoot tr:first-child td { padding-top: var(--sp-3); }
.sheet-table tr.grand td { border-top: 1px solid var(--outline); }
.sheet-key { margin: var(--sp-3) 0 0; font: var(--body-s); color: var(--on-surface-variant); }
.sheet-photos h3 { font: var(--title-s); margin: var(--sp-5) 0 var(--sp-2); }
.sheet-photo-day { margin-bottom: var(--sp-3); break-inside: avoid; }
.sheet-photo-date { font: var(--label-l); margin-bottom: var(--sp-1); }
.sheet-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.sheet-photo-grid figure { margin: 0; break-inside: avoid; }
.sheet-photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--shape-xs); display: block; }
.sheet-photo-grid figcaption { font: var(--body-s); color: var(--on-surface-variant); }
.sheet-foot { margin-top: var(--sp-4); font: var(--body-s); color: var(--on-surface-variant); }

@media print {
  :root { color-scheme: light; }
  .rail, .navbar, .appbar, .no-print, .toast-host, .banner { display: none !important; }
  .app, .app > .main, .main .content { display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important; background: #fff !important; }
  body { background: #fff; color: #000; }
  #content > * { max-width: none; }
  .sheet { border: 0; padding: 0; break-after: page; background: #fff; }
  .sheet-table th, .sheet-table td { color: #000; border-color: #999; }
  .sheet-table-wrap { overflow: visible; }
}