/*
 * BohnenBuch UI. Warm paper surfaces, a sidebar for navigation (tab bar below 900px), copper as the only accent, hairlines instead of heavy borders.
 * Colors are named by role with light, dark and increased-contrast values. All pairs are measured (WCAG):
 * text >= 7:1, secondary text >= 6:1 (6.7:1 on the sidebar), control borders >= 3:1, focus ring >= 4:1, status badges >= 6:1, white on copper 5.5:1.
 * No inline styles anywhere (strict CSP): everything lives here.
 */
:root {
  color-scheme: light dark;
  --bg: #f6f2ec; --panel: #fffdfa; --ink: #1f1b16; --muted: #574f45;
  --side-bg: #efe9e0; --side: 13.5rem; --tabbar: calc(64px + env(safe-area-inset-bottom, 0px));
  --thead: #f1ebe1; --thead-ink: #574f45;
  --accent: #b5440d; --accent-ink: #ffffff; --link: #a33b09; --accent-soft: #fbe9df; --accent-soft-ink: #8f3306;
  --focus: #1558c7;
  --control-border: #8a8174; --line: #e5ddd0;
  --ok: #14663b; --ok-bg: #e3f5ea; --warn: #7a4a00; --warn-bg: #fdf1d3; --bad: #a11d1d; --bad-bg: #fdeaea;
  --danger: #a11d1d; --overlay: rgba(20, 14, 8, .55);
  --shadow: 0 1px 2px rgba(60, 40, 20, .05), 0 6px 18px rgba(60, 40, 20, .05);
  --radius: 16px; --radius-s: 12px; --tap: 60px;
  --dot-sale: var(--accent); --dot-sample: #2f5f9e; --dot-test: #6b6258; --dot-waste: var(--bad);
  --live: #0b6b3a; --ph-dry: #d4e157; --ph-dry-ink: #1d2200; --ph-mail: #8d6e63; --ph-mail-ink: #ffffff; --ph-dev: #ff7043; --ph-dev-ink: #1a0a04;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15120f; --panel: #1f1b17; --ink: #f3ede4; --muted: #b9b0a3;
    --side-bg: #1a1713;
    --thead: #28231e; --thead-ink: #c9c0b3;
    --accent: #b5440d; --accent-ink: #ffffff; --link: #ff9a66; --accent-soft: #3a2218; --accent-soft-ink: #ffb48a;
    --focus: #6ea8ff;
    --control-border: #8f867a; --line: #302a24;
    --ok: #7fe0a8; --ok-bg: #12301f; --warn: #f2c76a; --warn-bg: #33270a; --bad: #ffa8a8; --bad-bg: #3b1717;
    --danger: #b3261e; --shadow: 0 0 0 1px rgba(255, 255, 255, .03);
    --dot-sale: #ff9a66; --dot-sample: #8db8f0; --dot-test: #b9b0a3; --dot-waste: #ffa8a8;
    --live: #00e676;
  }
}
/* Increase Contrast: stronger borders and text */
@media (prefers-contrast: more) {
  :root { --control-border: var(--ink); --line: var(--ink); --muted: var(--ink); --shadow: 0 0 0 2px var(--ink); }
}

* { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 18px at the default setting, scales with the browser's text size */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
h1 { font-size: 1.75rem; margin: .5rem 0 1.1rem; line-height: 1.15; letter-spacing: -.015em; font-weight: 750; }
h2 { font-size: 1.2rem; margin: 1.6rem 0 .6rem; line-height: 1.25; letter-spacing: -.01em; font-weight: 700; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }

/* ---- accessibility helpers */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* the skip link is invisible until a keyboard user tabs to it */
.skip-link { position: absolute; left: .75rem; top: .75rem; z-index: 20; transform: translateY(-300%); background: var(--panel); color: var(--ink); padding: .8rem 1.2rem; border-radius: var(--radius-s); border: 2px solid var(--ink); font-weight: 700; text-decoration: none; box-shadow: var(--shadow); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
main:focus { outline: none; }
[hidden] { display: none !important; }

/* ---- shell: sidebar + content; below 900px the sidebar turns into a tab bar at the bottom */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.shell.bare, .shell.collapsed { grid-template-columns: minmax(0, 1fr); }
.shell.collapsed { --side: 0px; }
.shell.collapsed .sidebar { display: none; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--side-bg); border-right: 1px solid var(--line); padding: 1rem .75rem 5rem; display: flex; flex-direction: column; gap: .15rem; }
.brand { display: flex; align-items: center; gap: .7rem; min-height: 48px; padding: 0 .5rem; margin-bottom: 1rem; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.logo { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: .8rem; font-weight: 800; letter-spacing: 0; flex: none; }
.nav-label { margin: 1.1rem .6rem .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.sidebar nav { display: flex; flex-direction: column; gap: .15rem; }
.sidebar nav a { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: 0 .75rem; border: 1px solid transparent; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font-weight: 550; }
.sidebar nav a svg { flex: none; color: var(--muted); }
.sidebar nav a[aria-current="page"] { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); font-weight: 750; }
.sidebar nav a[aria-current="page"] svg { color: var(--accent); }
.count { margin-left: auto; min-width: 1.6rem; padding: .05rem .5rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .8rem; font-weight: 700; text-align: center; }
.content { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.content > main { width: 100%; flex: 1; }
.topbar { display: flex; align-items: center; gap: .8rem; padding: .55rem 1.4rem; border-bottom: 1px solid var(--line); min-height: 64px; }
.crumbs { margin: 0 auto 0 0; display: flex; gap: .5rem; font-size: .95rem; min-width: 0; }
.crumbs .sep { color: var(--muted); }
.brand-sm { display: none; align-items: center; gap: .6rem; font-weight: 800; color: var(--ink); text-decoration: none; min-height: 48px; }
.shell.bare .brand-sm, .shell.collapsed .brand-sm { display: inline-flex; }
.shell.bare .crumbs, .shell.bare .brand-sm { margin-right: auto; }
.icon-btn { min-height: 48px; width: 48px; padding: 0; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-s); }
.who-form { display: flex; align-items: center; gap: .8rem; margin: 0; }
.who { display: flex; align-items: center; gap: .6rem; line-height: 1.2; font-size: .92rem; font-weight: 650; }
.who small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; }
.avatar { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 800; flex: none; }
main { max-width: 1280px; margin: 0 auto; padding: 1.6rem 1.4rem; }
main > h1 { font-size: 2rem; margin: .1rem 0 1.3rem; }
footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 1.2rem; }

/* ---- surfaces and messages */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
.banner { padding: .85rem 1.1rem; border-radius: var(--radius-s); margin-bottom: 1.1rem; font-weight: 600; }
.banner.ok { background: var(--ok-bg); color: var(--ok); } .banner.err { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 2px var(--bad); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner a { color: inherit; font-weight: 700; }

/* ---- forms */
label { display: block; font-weight: 600; margin: .9rem 0 .35rem; }
input, select, textarea { width: 100%; font: inherit; font-size: 1.15rem; padding: .8rem 1rem; min-height: var(--tap); border: 1.5px solid var(--control-border); border-radius: var(--radius-s); background: var(--panel); color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--focus); }
input::placeholder { color: var(--muted); opacity: 1; }
textarea { min-height: 6rem; }
.row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.filters { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.filters input, .filters select { min-height: 48px; font-size: 1rem; }
/* yes/no setting = switch */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--tap); font-weight: 600; margin: .8rem 0; }
input.switch { appearance: none; -webkit-appearance: none; width: 64px; min-height: 0; height: 38px; padding: 0; border: 2px solid var(--control-border); border-radius: 999px; background: var(--panel); position: relative; flex: none; cursor: pointer; }
input.switch::before { content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--control-border); }
input.switch:checked { background: var(--accent); border-color: var(--accent); }
input.switch:checked::before { left: 30px; background: var(--accent-ink); }
input.switch:checked::after { content: "✓"; position: absolute; left: 10px; top: 4px; color: var(--accent-ink); font-weight: 700; line-height: 26px; }

/* ---- buttons: neutral by default, copper only for the primary action */
button, .btn { font: inherit; font-weight: 650; font-size: 1.08rem; min-height: var(--tap); padding: .7rem 1.5rem; border: 2px solid transparent; border-radius: var(--radius-s); background: var(--ink); color: var(--bg); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
button.primary, .btn.primary { background: var(--accent); color: var(--accent-ink); font-size: 1.25rem; width: 100%; min-height: 72px; border-radius: var(--radius); box-shadow: 0 6px 16px rgba(181, 68, 13, .28); }
button.ghost, .btn.ghost { background: transparent; color: var(--ink); border-color: var(--control-border); }
button.danger { background: var(--danger); color: #ffffff; }
button.small, .btn.small { min-height: 44px; padding: .4rem 1rem; font-size: .95rem; border-radius: 12px; }
button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
@media (hover: hover) {
  button:not(:disabled):hover, .btn:hover { filter: brightness(1.15); }
  button.ghost:not(:disabled):hover, .btn.ghost:hover { background: var(--accent-soft); filter: none; }
  .tile:hover { border-color: var(--accent); }
  tbody tr:hover td { background: var(--accent-soft); }
  tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
}
tbody tr:focus-within td { background: var(--accent-soft); }
tbody tr:focus-within td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  button, .btn, .tile, input.switch, input.switch::before, .sidebar nav a { transition: background-color .15s, border-color .15s, left .15s, filter .15s; }
}
.quick { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.quick a { padding: .65rem 1.1rem; min-height: 48px; display: inline-flex; align-items: center; border: 1.5px solid var(--control-border); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; background: var(--panel); }
.quick a[aria-current="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---- tables (cards up to 1240px wide: no sideways scrolling for the main content) */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; background: var(--panel); font-size: .95rem; }
th, td { padding: .7rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--thead); color: var(--thead-ink); position: sticky; top: 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
td.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85em; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.nowrap { white-space: nowrap; }
tr.storno td { background: var(--bad-bg); } tr.storniert td { color: var(--muted); text-decoration: line-through; }
@media (max-width: 1240px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack tr { border-bottom: 8px solid var(--bg); padding: .5rem .2rem; }
  table.stack td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem .8rem; text-align: right; }
  table.stack td::before { content: attr(data-label); font-weight: 600; color: var(--muted); text-align: left; flex: none; }
  table.stack td.nowrap { white-space: normal; }
  table.stack tr.storno td { background: transparent; }
  table.stack tr.storno { background: var(--bad-bg); }
}

/* ---- tags: a dot plus text, the dot is decoration only */
.tag { display: inline-flex; align-items: center; gap: .45rem; padding: .1rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.tag::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--dot, var(--muted)); }
.tag.cat-VERKAUF { --dot: var(--dot-sale); } .tag.cat-PROBE { --dot: var(--dot-sample); } .tag.cat-TEST { --dot: var(--dot-test); } .tag.cat-AUSSCHUSS { --dot: var(--dot-waste); }

/* ---- badges: always text, never color alone */
.badge { display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 700; background: var(--thead); color: var(--ink); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }

.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.25rem; padding: 1rem; text-align: center; }
.tile small { font-weight: 400; color: var(--muted); font-size: .9rem; }

/* ---- the Einbrand readout: the signature element of the entry screen */
.shrink { font-size: 1.55rem; font-weight: 800; padding: 1.1rem; border-radius: var(--radius); text-align: center; background: var(--thead); color: var(--muted); margin-top: 1rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.shrink.ok { background: var(--ok-bg); color: var(--ok); }
.shrink.low, .shrink.high { background: var(--warn-bg); color: var(--warn); }
.shrink.ok::before { content: "✓ "; content: "✓ " / ""; }
.shrink.low::before { content: "▼ "; content: "▼ " / ""; }
.shrink.high::before { content: "▲ "; content: "▲ " / ""; }
.gauge { width: 100%; height: 14px; margin-top: .7rem; display: block; }
.gauge-scale { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--muted); margin-top: .25rem; }

/* ---- roast profile (collapsible) */
details.profile { margin: 1.1rem 0 0; border: 1.5px solid var(--line); border-radius: var(--radius); padding: .2rem 1rem .6rem; background: var(--panel); }
details.profile > summary { cursor: pointer; font-weight: 700; min-height: 48px; display: flex; align-items: center; padding: .4rem 0; }
details.profile[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: .6rem; }
details.profile h3 { font-size: 1rem; margin: 1.2rem 0 .2rem; }
ul.events { list-style: none; margin: 0; padding: 0; }
ul.events li { padding: .1rem 0; }
ul.events .num { display: inline-block; min-width: 3.5rem; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); }

/* ---- live roast: read from a distance, big touch targets, no typing while roasting */
.btn.live-start { width: 100%; min-height: 84px; flex-direction: column; gap: .1rem; margin-bottom: 1.1rem; background: var(--accent); color: var(--accent-ink); font-size: 1.3rem; border-radius: var(--radius); box-shadow: 0 6px 16px rgba(181, 68, 13, .28); }
.btn.live-start small { font-weight: 500; font-size: .9rem; opacity: .92; }
.template-hint { padding: .8rem 1rem; border-radius: var(--radius-s); background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 600; }
.live-head h1 { margin-bottom: .2rem; }
.live-grid { display: grid; gap: 1.2rem 1.6rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .live-grid { grid-template-columns: 1.15fr 1fr; } }
.live-main, .live-side { min-width: 0; }
.live-timer { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1rem; text-align: center; container-type: inline-size; }
.live-timer span { display: block; font-size: clamp(4.5rem, 16vw, 9.5rem); font-size: clamp(3.5rem, 26cqw, 9.5rem); line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--live); font-variant-numeric: tabular-nums; }
.live-timer small { display: block; margin-top: .4rem; color: var(--muted); font-size: .85rem; }
.phases { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 1rem 0; padding: 0; }
.phase { text-align: center; padding: .9rem .4rem; border-radius: var(--radius-s); background: var(--thead); color: var(--muted); font-weight: 700; border: 2px solid transparent; }
.phase.current { font-size: 1.15rem; border-color: var(--ink); }
.phase.current::before { content: "▶ "; content: "▶ " / ""; }
.phase.dry.current { background: var(--ph-dry); color: var(--ph-dry-ink); }
.phase.maillard.current { background: var(--ph-mail); color: var(--ph-mail-ink); }
.phase.development.current { background: var(--ph-dev); color: var(--ph-dev-ink); }
.live-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0; }
.live-tiles > div { background: var(--panel); border-radius: var(--radius-s); box-shadow: var(--shadow); padding: .8rem 1rem; }
.live-tiles dt { font-size: .85rem; color: var(--muted); font-weight: 600; }
.live-tiles dd { margin: 0; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-side form { margin: 0 0 .7rem; }
.live-btn { width: 100%; min-height: 96px; flex-direction: column; gap: .1rem; font-size: 1.5rem; border-radius: var(--radius); background: var(--ink); color: var(--bg); }
.live-btn small { font-size: .9rem; font-weight: 500; opacity: .85; }
.live-btn.accent { background: var(--accent); color: var(--accent-ink); }
.live-btn.quiet { min-height: 72px; font-size: 1.2rem; background: transparent; color: var(--ink); border-color: var(--control-border); }
.live-btn.done, .live-btn.done:disabled { opacity: 1; background: var(--ok-bg); color: var(--ok); border-color: transparent; cursor: default; flex-direction: row; font-size: 1.3rem; }
.live-btn .num { font-variant-numeric: tabular-nums; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.chip { min-height: 64px; padding: .4rem; font-size: 1.1rem; background: var(--panel); color: var(--ink); border-color: var(--control-border); }
.note-row { display: flex; gap: .5rem; }
.note-row input { min-height: 52px; font-size: 1rem; }
.hold-btn { position: relative; overflow: hidden; width: 100%; min-height: 112px; margin-top: 1.2rem; border-radius: var(--radius); background: var(--danger); color: #ffffff; font-size: 1.6rem; user-select: none; -webkit-user-select: none; touch-action: manipulation; border: 3px solid transparent; }
.hold-btn .hold-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255, 255, 255, .32); }
.hold-btn.holding .hold-fill { width: 100%; transition: width .6s linear; }
.hold-btn .hold-label { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.hold-btn small { font-size: .95rem; font-weight: 500; }
.discard { margin-top: 1.6rem; text-align: center; }
.banner form.inline { display: inline-block; margin-left: .8rem; }
@media (prefers-reduced-motion: reduce) { .hold-btn.holding .hold-fill { transition-duration: .01s; } }

/* ---- status bar at the bottom: state of the Odoo connection (symbol + text, never color alone) */
.statusbar { --state: var(--ok); position: fixed; left: var(--side); right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap;
  padding: .45rem 1.4rem; font-size: .85rem; background: var(--panel); color: var(--ink); border-top: 3px solid var(--state); box-shadow: 0 -6px 18px rgba(60, 40, 20, .08); }
.statusbar.warn { --state: var(--warn); }
.statusbar.err { --state: var(--bad); }
.statusbar-text { flex: 1 1 18rem; }
.statusbar-text > span:first-child { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-right: .35rem; border-radius: 50%; background: var(--state); color: var(--panel); font-weight: 800; font-size: .8rem; }
.statusbar a { color: var(--ink); font-weight: 700; }
.statusbar button.small { min-height: 36px; padding: 0 .9rem; background: transparent; color: var(--ink); border: 1.5px solid var(--control-border); }
body:has(.statusbar) .content { padding-bottom: 4.2rem; }
.statusbar form { margin: 0; }

/* ---- key figures (today strip, lot balance): big number, small label */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: .8rem; margin: .4rem 0 1.2rem; }
.stat { display: flex; flex-direction: column; justify-content: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.2rem 1rem; box-shadow: var(--shadow); }
.card .stat { background: var(--bg); box-shadow: none; }
.stat dt { color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .25rem; }
.stat dd { margin: 0; font-size: 1.8rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat dd small { font-size: .85rem; font-weight: 600; color: var(--muted); margin-left: .3rem; letter-spacing: 0; }
.today h2 { margin-top: 0; font-size: 1.05rem; }
.today-link { margin: .3rem 0 0; font-size: .95rem; }

/* ---- PIN keypad */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; max-width: 360px; margin: 1rem auto; }
.keypad button { min-height: 78px; font-size: 1.8rem; background: var(--panel); color: var(--ink); border: 1.5px solid var(--control-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.keypad button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-size: 1.5rem; min-height: 78px; width: auto; box-shadow: none; }
.dots { text-align: center; font-size: 2.2rem; letter-spacing: .5rem; min-height: 3rem; }

/* ---- dialogs */
dialog { border: 0; border-radius: 22px; padding: 1.6rem; max-width: 520px; width: 92%; background: var(--panel); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
dialog::backdrop { background: var(--overlay); }
dialog dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; } dialog dt { color: var(--muted); } dialog dd { margin: 0; font-weight: 700; }
dialog .actions { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.3rem; }
dialog .actions button.primary { width: auto; font-size: 1.15rem; min-height: var(--tap); border-radius: var(--radius-s); box-shadow: none; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.4rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; }
.muted { color: var(--muted); } .inline { display: inline; } .right { text-align: right; }

@media (max-width: 900px) {
  .shell, .shell.collapsed { grid-template-columns: minmax(0, 1fr); --side: 0px; }
  .sidebar, .shell.collapsed .sidebar { display: block; position: fixed; inset: auto 0 0 0; z-index: 6; height: auto; overflow: visible; padding: 0 .4rem env(safe-area-inset-bottom, 0px); border-right: 0; border-top: 1px solid var(--line); }
  .sidebar .brand, .nav-label, .side-toggle { display: none; }
  .sidebar nav { flex-direction: row; gap: .2rem; height: 64px; align-items: stretch; }
  .sidebar nav a { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: .15rem; padding: 0 .1rem; font-size: .72rem; position: relative; text-align: center; }
  .sidebar nav a[aria-current="page"] { background: var(--accent-soft); box-shadow: none; border-color: transparent; color: var(--accent-soft-ink); }
  .sidebar nav a[aria-current="page"] svg { color: currentColor; }
  .count { position: absolute; top: 2px; right: 18%; margin: 0; min-width: 1.2rem; padding: 0 .3rem; font-size: .7rem; }
  .brand-sm, .shell.collapsed .brand-sm { display: inline-flex; margin-right: auto; }
  .crumbs { display: none; }
  .statusbar { left: 0; bottom: var(--tabbar); }
  .content { padding-bottom: var(--tabbar); }
  body:has(.statusbar) .content { padding-bottom: calc(var(--tabbar) + 4.2rem); }
  .topbar { padding: .4rem .8rem; }
  main { padding: 1.1rem .9rem; } main > h1 { font-size: 1.6rem; }
}
@media (max-width: 700px) { main { padding: .9rem .7rem; } .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: .5rem; } }
@media (max-width: 480px) { .who > span:last-child { display: none; } }
@media print { .sidebar, .topbar, footer, .statusbar, .no-print, .skip-link { display: none; } .shell { display: block; } body { background: #fff; color: #000; } .card, .table-wrap { box-shadow: none; } }