/* KitchenTick: phone-first base rules, then the approved look at the end of the file. */
*{box-sizing:border-box}
body{margin:0;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1d1d1f;background:#f6f6f4}
header{background:#1d1d1f;color:#fff;padding:.7rem 1rem;font-size:1.05rem;letter-spacing:.02em}
nav{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;padding:.6rem 1rem;background:#fff;border-bottom:1px solid #ddd}
nav a,button.link{color:#1d4ed8;text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer;min-height:auto;width:auto;margin:0}
.who{margin:.4rem 1rem 0;color:#555;font-size:.9rem}
main{max-width:40rem;margin:0 auto;padding:1rem}
h1{font-size:1.4rem;margin:.4rem 0 1rem}
h2{font-size:1.1rem;margin:1.6rem 0 .5rem}
label{display:block;margin:.9rem 0 .3rem;font-weight:600}
label.tick{font-weight:400;display:flex;gap:.5rem;align-items:center}
input,select{width:100%;padding:.7rem;font:inherit;border:1px solid #bbb;border-radius:8px;background:#fff}
input[type=checkbox]{width:1.3rem;height:1.3rem}
button,.button{display:inline-block;margin-top:1rem;min-height:48px;padding:.7rem 1.1rem;font:inherit;font-weight:600;color:#fff;
  background:#1d4ed8;border:0;border-radius:8px;cursor:pointer;text-decoration:none;width:100%;text-align:center}
button.small{min-height:36px;padding:.3rem .7rem;margin:0 0 0 .5rem;width:auto;font-weight:400;background:#555}
button.danger{background:#b42318}
form.inline{display:inline}
.flash{padding:.7rem;border-radius:8px}
.flash.ok{background:#e7f6ec;color:#14532d}
.flash.error{background:#fdecea;color:#7f1d1d}
.hint{color:#555;font-size:.9rem}
.tag{display:inline-block;font-size:.75rem;padding:.05rem .4rem;border-radius:4px;background:#eee;color:#333}
ul.people,ul.grants,ul.menu{list-style:none;padding:0}
ul.people li,ul.grants li,ul.menu li{background:#fff;border:1px solid #e3e3e3;border-radius:8px;padding:.7rem;margin:.4rem 0}
.linkbox{background:#fff8e1;border:1px solid #f0d58a;border-radius:8px;padding:.8rem;margin:1rem 0}
code{word-break:break-all}
input.link{font-family:ui-monospace,monospace;font-size:.85rem}
/* Doing the checks (B5): large touch targets for the shop tablet. */
textarea{width:100%;padding:.7rem;font:inherit;border:1px solid #bbb;border-radius:8px;background:#fff}
fieldset{border:1px solid #ddd;border-radius:8px;background:#fff;padding:.6rem .8rem .9rem;margin:.8rem 0}
fieldset.has-error{border-color:#b42318}
legend{font-weight:600;padding:0 .3rem}
.choices{display:grid;gap:.5rem;margin:.4rem 0}
label.choice{display:flex;align-items:center;gap:.7rem;min-height:56px;padding:.6rem .9rem;margin:0;border:2px solid #bbb;border-radius:10px;background:#fff;font-weight:600;cursor:pointer}
label.choice.bad{border-color:#e0a09a}
label.choice input[type=radio]{width:1.5rem;height:1.5rem;flex:none}
label.choice:has(input:checked){border-color:#1d4ed8;background:#eef3ff}
label.choice.bad:has(input:checked){border-color:#b42318;background:#fdecea}
details{margin:.6rem 0}
summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:#1d4ed8}
a.button.secondary{background:#fff;color:#1d4ed8;border:2px solid #1d4ed8;margin-top:.5rem}
ul.checks .button{margin-top:.6rem}
.status{font-weight:600}
.status.missed{color:#b42318}
.status.done,.status.done_late{color:#14532d}
a.small{display:inline-block;padding:.5rem 0;color:#1d4ed8}
li.answered{background:#f3f8f4}
/* Home, alerts and compliance (B7). Alerts are red and on screen only. */
.alertbox{background:#fdecea;border:2px solid #b42318;border-radius:10px;padding:.2rem .9rem .8rem;margin:1rem 0;color:#5f1209}
.alertbox h2{margin-top:.8rem;color:#7f1d1d}
.alertbox h3{font-size:1rem;margin:1rem 0 .3rem;color:#555}
ul.alerts{list-style:none;padding:0}
ul.alerts li.alert{background:#fff;border:1px solid #e0a09a;border-left:6px solid #b42318;border-radius:8px;padding:.6rem;margin:.4rem 0;color:#1d1d1f}
ul.alerts li.alert.seen{background:#f1f1f1;border-color:#ccc;border-left-color:#999;color:#666}
.tag.sev-critical,.tag.sev-missed{background:#b42318;color:#fff}
.tag.sev-serious,.tag.sev-overdue{background:#f5c2bd;color:#5f1209}
.tag.sev-routine,.tag.sev-signoff{background:#eee;color:#333}
section.today{margin:1rem 0}
table.figures{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e3e3e3;border-radius:8px}
table.figures th,table.figures td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid #eee;font-weight:400;vertical-align:top}
table.figures td{text-align:right;font-weight:600}
table.figures thead th{font-weight:600;background:#f6f6f4}
div.problem{margin:.4rem 0}
/* Round 4 fast entry: tap, don't type. Green OK, amber Check again, red Act now, always with a symbol and a word. */
.choices{grid-template-columns:1fr 1fr;align-items:stretch}
.choices label.choice:last-child{grid-column:1 / -1;min-height:44px;font-weight:400}
.temp-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.2rem,1fr));gap:.4rem;margin:.4rem 0}
label.temp{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60px;margin:0;padding:.3rem;
  border:2px solid transparent;border-radius:10px;cursor:pointer;font-weight:600;text-align:center;line-height:1.1}
label.temp input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
label.temp .t{font-size:1.15rem}
label.temp .s{font-size:.72rem;font-weight:600}
label.temp-ok,.tag.temp-ok,li.temp-ok{background:#dcfce7;color:#14532d;border-color:#86efac}
label.temp-check,.tag.temp-check,li.temp-check{background:#fef3c7;color:#713f12;border-color:#fcd34d}
label.temp-act,.tag.temp-act,li.temp-act{background:#fee2e2;color:#7f1d1d;border-color:#fca5a5}
label.temp-plain{background:#fff;color:#1d4ed8;border-color:#93c5fd;flex-direction:row;min-height:48px;padding:.3rem .9rem}
label.temp:has(input:checked){outline:4px solid #1d4ed8;outline-offset:1px;border-color:#1d4ed8}
label.temp:has(input:focus-visible){outline:4px solid #000}
.temp-other{display:flex;gap:.5rem;align-items:center;margin:.3rem 0}
.temp-other input[name^=o_]{max-width:7rem;margin:0}
ul.readings li{border-left:6px solid currentColor}
.why select{width:100%}
.stepper{display:flex;gap:.4rem;align-items:center}
.stepper button{margin:0;min-width:56px;font-size:1.4rem;padding:.3rem}
.stepper input{text-align:center;margin:0}
[hidden]{display:none !important}
/* Round 4 B2: help playbooks ("What to do") */
details.playbook{border:2px solid #2563eb;border-radius:.5rem;padding:.4rem .7rem;background:#eff6ff;color:#1e3a8a}
details.playbook summary{font-weight:600;cursor:pointer}
details.playbook ol{margin:.4rem 0 .2rem 1.2rem;padding:0}
details.playbook li{margin:.25rem 0;background:none;border:0;padding:0}
/* Round 4 item 1b: the getting-started guide on the home, and the step-by-step add-staff and setup-link pages */
section.guide{background:#fff;border:2px solid #1d4ed8;border-radius:10px;padding:.2rem .9rem .8rem;margin:1rem 0}
section.guide h2{margin-top:.8rem}
section.guide h3{font-size:1rem;margin:1rem 0 .3rem}
ol.guide-steps{list-style:none;padding:0;margin:.3rem 0}
ol.guide-steps li{border:1px solid #e3e3e3;border-radius:8px;padding:.6rem;margin:.35rem 0;background:#fff}
ol.guide-steps li.done{background:#f3f8f4;color:#555}
ol.guide-steps li.done .tag{background:#dcfce7;color:#14532d}
ol.guide-steps li.next{border:2px solid #1d4ed8;background:#eef3ff}
ol.guide-steps li.next .tag{background:#1d4ed8;color:#fff}
ol.guide-steps li.next a{font-weight:600}
form.guide-skip,form.guide-show{margin:.6rem 0 0}
p.steps{color:#555;font-size:.9rem;margin:0}
p.steps + h2{margin-top:.2rem}
.guide-buttons{display:flex;flex-direction:column}
button.secondary{background:#fff;color:#1d4ed8;border:2px solid #1d4ed8;margin-top:.5rem}
.guide-choices{grid-template-columns:1fr}
.guide-choices label.choice:last-child{grid-column:auto;min-height:56px;font-weight:600}
.guide-choices label.choice small{font-weight:400;color:#555}
/* Round 6 C6: the Safer food, better business pack. Tables become stacked cards on a phone. */
.sfbb-table{overflow-x:auto;margin:.6rem 0}
.sfbb-table table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e3e3e3}
.sfbb-table th,.sfbb-table td{text-align:left;vertical-align:top;padding:.45rem .6rem;border-bottom:1px solid #eee;font-size:.92rem}
.sfbb-table thead th{background:#f6f6f4;font-weight:600}
.sfbb-table td p{margin:.2rem 0}
.sfbb-table textarea,form.sfbb textarea{width:100%;box-sizing:border-box}
.sfbb-choices{display:flex;flex-wrap:wrap;gap:.4rem;margin:.3rem 0}
.sfbb-choices label.choice{min-height:44px;display:inline-flex;align-items:center;padding:0 .8rem;border:1px solid #ccc;border-radius:6px;background:#fafafa}
.sfbb-follow label.choice{display:block;min-height:44px;margin:.3rem 0}
.sfbb-page{color:#777;margin:1rem 0 .2rem}
.sfbb-credit{margin-top:1.5rem;color:#555}
.progress{font-size:1.05rem}
.tag.ok{background:#d1fadf;color:#05603a}
.tag.warn{background:#fef0c7;color:#7a2e0e}
@media (max-width:640px){
.sfbb-table thead{display:none}
.sfbb-table tr{display:block;border-bottom:2px solid #ddd;padding:.3rem 0}
.sfbb-table td{display:block;border:0}
.sfbb-table td[data-col]:not([data-col=""])::before{content:attr(data-col);display:block;font-size:.75rem;font-weight:600;color:#555;text-transform:uppercase}
}
.sfbb-box{border:2px solid #d0d5dd;border-radius:8px;padding:.4rem .8rem;margin:.8rem 0;background:#fcfcfd}
.sfbb-box h4{margin:.3rem 0}
/* Round 6 C7: diary record sheets */
fieldset.rec .sfbb-choices label.choice{min-height:44px}
.sfbb-choices.days label.choice{min-width:44px;justify-content:center}
fieldset.rec input.other{margin-top:.3rem}
.rec-group{margin:.5rem 0 .1rem;font-weight:600;font-size:.9rem}
.rec-label{color:#555}

/* Round 6 C8: documents, sharing and the inspection view */
.insp-head p { margin: .25rem 0; }
table.insp { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
table.insp th, table.insp td { border: 1px solid #ccc; padding: .35rem .5rem; text-align: left; vertical-align: top; }
ul.insp-list { padding-left: 1.2rem; }
ul.insp-list li { margin: .2rem 0; }
.insp-method { border-top: 1px solid #ddd; padding-top: .5rem; margin-top: 1rem; }
.insp-foot { border-top: 2px solid #333; margin-top: 2rem; padding-top: .5rem; font-size: .85rem; }
form.inline { display: inline; }
@media print {
  .no-print, button, nav, .flash { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .insp-method { break-inside: avoid-page; }
  h2 { break-after: avoid; }
  a { color: #000; text-decoration: none; }
}

/* Round 6 C1: sign-up */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.found { border-left: 4px solid #1d4ed8; padding: .3rem .8rem; margin: .5rem 0; background: #eef3ff; }

ul.suggestions { list-style: none; margin: .25rem 0 .5rem; padding: 0; border: 1px solid #bbb; border-radius: 10px; background: #fff; max-height: 22rem; overflow-y: auto; }
ul.suggestions li { margin: 0; }
button.choice-row { display: block; width: 100%; min-height: 44px; text-align: left; background: #fff; color: #111; border: 0; border-bottom: 1px solid #eee; padding: .55rem .8rem; font-weight: 400; cursor: pointer; }
button.choice-row:hover, button.choice-row:focus { background: #eef3ff; }
button.choice-row:disabled { color: #888; cursor: not-allowed; }
.found button.choice-row { border: 1px solid #ddd; border-radius: 8px; margin: .3rem 0; }

/* Owner, 3 Nov 2026: the free plan's watermark on printed and shared copies */
.watermark { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 50; overflow: hidden; }
.watermark span { font-size: clamp(2.5rem, 11vw, 7rem); font-weight: 800; color: #000; opacity: .07; transform: rotate(-30deg); white-space: nowrap; }
.watermark.print-only { display: none; }
@media print {
  .watermark.print-only { display: flex !important; }
  .watermark span { font-size: 64pt; opacity: .08; }
}

/* ---- The KitchenTick look (owner's design concept, 3 Nov 2026) ----
   Warm off-white pages, deep green and a fresh lime accent, soft cards, a
   menu down the side of manager pages (across the top on a phone). Comes
   last, so it restyles the plainer rules above without changing any page. */
:root{--ink:#1f2d27;--muted:#5f6b65;--green:#1e352d;--green-2:#2b4a3e;--lime:#d6ec7f;--lime-ink:#2c3d12;
  --paper:#faf9f6;--side:#fbfaf7;--card:#fff;--line:#e8e4db;--soft:#f1efe9;--ok-bg:#eef3e6;--ok-ink:#355b26;
  --warn-bg:#fdf3e4;--warn-line:#f1d7b1;--warn-ink:#8a4b0f;--bad-bg:#fdeceb;--bad-line:#efb7b0;--bad-ink:#8f1d12;--radius:14px}
body{font:16px/1.5 "Avenir Next","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--ink);background:var(--paper)}
a{color:var(--green-2)}
h1{font-size:2rem;line-height:1.15;letter-spacing:-.02em;font-weight:700;margin:.2rem 0 1.2rem}
h2{font-size:1.25rem;letter-spacing:-.01em}
.mark{width:1.75rem;height:1.75rem;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon{width:1.3rem;height:1.3rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.brand{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none;font-size:1.6rem;letter-spacing:-.02em}
.brand-name strong{font-weight:700}

/* Pages without a menu: sign-in, the shop tablet, an inspector's copy, sign-up */
body.plain header{background:none;color:var(--ink);padding:1.4rem 1rem .4rem;text-align:center;letter-spacing:0}
body.plain main{max-width:40rem}

/* Manager pages: the menu and the page */
body.app{display:grid;grid-template-columns:16rem minmax(0,1fr);min-height:100vh}
aside.side{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--side);border-right:1px solid var(--line);padding:1.6rem 1rem 1.2rem;display:flex;flex-direction:column;gap:1.4rem}
aside.side header{background:none;color:var(--ink);padding:0 .3rem;letter-spacing:0}
.tagline{margin:.35rem 0 0;color:var(--muted);font-size:.85rem}
aside.side nav{display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:.15rem;padding:0;background:none;border:0}
aside.side nav a{display:flex;align-items:center;gap:.8rem;padding:.72rem .9rem;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:500}
aside.side nav a:hover{background:var(--soft)}
aside.side nav a.current{background:var(--green);color:#fff}
aside.side nav a.current::after{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--lime);margin-left:auto}
.me{margin-top:auto;display:grid;grid-template-columns:auto 1fr;column-gap:.7rem;align-items:center;padding:.8rem .3rem 0;border-top:1px solid var(--line)}
.avatar{grid-row:span 2;width:2.6rem;height:2.6rem;border-radius:50%;background:#e8ede1;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.me .who{margin:0;color:var(--ink);font-size:.88rem}
.me form{justify-self:start}
.me button.link{color:var(--muted);font-size:.85rem;padding:0;margin:0;text-align:left}
.page{min-width:0}
.crumb{padding:1.25rem 2.2rem;border-bottom:1px solid var(--line);color:var(--muted);font-size:.95rem}
.crumb a{color:var(--muted);text-decoration:none}
.crumb span{margin:0 .4rem}
.crumb strong{color:var(--ink);font-weight:600}
body.app main{max-width:62rem;margin:0;padding:1.8rem 2.2rem 3rem}

/* Controls */
input,select,textarea{border:1px solid #d9d4c9;border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid var(--green-2);outline-offset:1px;border-color:var(--green-2)}
button,.button{background:var(--green);border-radius:10px;font-weight:600;letter-spacing:.01em}
button:hover,.button:hover{background:var(--green-2)}
body.app button,body.app .button{width:auto;min-width:10rem;padding:.75rem 1.3rem}
body.app form.inline button,body.app button.small,body.app button.link{min-width:0}
button.small{background:var(--muted)}
button.danger{background:#a5281a}
button.link,nav a{color:var(--green-2)}
button.secondary,a.button.secondary{background:#fff;color:var(--green);border:1.5px solid var(--line)}
button.secondary:hover,a.button.secondary:hover{background:var(--soft)}
summary{color:var(--green-2)}
a.small{color:var(--green-2)}
label.choice{border:1.5px solid var(--line);border-radius:12px}
label.choice:has(input:checked){border-color:var(--green);background:var(--ok-bg)}
label.temp-plain{color:var(--green);border-color:var(--line)}
label.temp:has(input:checked){outline-color:var(--green);border-color:var(--green)}
fieldset{border:1px solid var(--line);border-radius:var(--radius)}

/* Messages and tags */
.flash{border-radius:12px;padding:.8rem 1rem;border:1px solid transparent}
.flash.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:#d7e3c8}
.flash.error{background:var(--bad-bg);color:var(--bad-ink);border-color:var(--bad-line)}
.hint{color:var(--muted)}
.tag{border-radius:6px;padding:.1rem .45rem;background:var(--soft);color:var(--ink)}
.tag.ok{background:var(--ok-bg);color:var(--ok-ink)}
.tag.warn{background:#fdf0cf;color:#7a4a0e}

/* Cards: lists, tables, boxes */
ul.people li,ul.grants li,ul.menu li,ol.guide-steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1.1rem;margin:.5rem 0}
ul.menu li a{font-weight:600;text-decoration:none}
table{border-collapse:separate;border-spacing:0}
table.figures,.sfbb-table table,main > table,form > table{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;width:100%}
main > table th,main > table td,form > table th,form > table td{padding:.6rem .8rem;border-bottom:1px solid var(--soft);text-align:left;vertical-align:top}
table.figures thead th,.sfbb-table thead th,main > table thead th,form > table thead th{background:var(--side);font-weight:600}
.linkbox,.sfbb-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
section.guide{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:.6rem 1.3rem 1.2rem}
ol.guide-steps li.done{background:var(--ok-bg)}
ol.guide-steps li.next{border:1.5px solid var(--green);background:#fff}
ol.guide-steps li.next .tag{background:var(--green);color:#fff}
ol.guide-steps li.done .tag{background:#dbe7cc;color:var(--ok-ink)}
details.playbook{border:1px solid var(--line);border-radius:12px;background:var(--side);color:var(--ink)}
.found{border-left-color:var(--green);background:var(--ok-bg)}
button.choice-row:hover,button.choice-row:focus{background:var(--ok-bg)}

/* Alerts: the "needs attention" card. Critical and missed keep their red tags. */
.alertbox{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:18px;padding:.4rem 1.3rem 1rem;color:var(--warn-ink)}
.alertbox h2{color:var(--warn-ink)}
ul.alerts li.alert{background:#fff;border:1px solid var(--warn-line);border-left:5px solid #c2410c;border-radius:12px;color:var(--ink)}
ul.alerts li.alert.seen{background:var(--soft);border-color:var(--line);border-left-color:#b9b4a8;color:var(--muted)}
.tag.sev-critical,.tag.sev-missed{background:#a5281a;color:#fff}
.tag.sev-serious,.tag.sev-overdue{background:#fde3d4;color:#8a2b0c}
section.today{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:.4rem 1.3rem 1rem}
ul.checks{list-style:none;padding:0}
li.answered{background:var(--ok-bg)}
tr.low td{background:#fdf3e4}

/* A phone: the menu goes across the top and scrolls sideways */
/* On a phone, buttons take the full width. (The old phone menu across the top is gone: redesign batch 1 puts tabs at the bottom.) */
@media (max-width:900px){
  body.app button,body.app .button{width:100%}
}
@media print{
  aside.side,.crumb{display:none !important}
  body.app{display:block}
  body.app main{padding:0}
}

/* The home (KitchenTick concept): greeting, progress, the day's checklists, what needs attention, the records */
.hero{margin:-.6rem 0 1.4rem}
.eyebrow{margin:0 0 .3rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero .lead{margin:0;color:var(--muted);font-size:1.05rem}
.shop-block{margin:0 0 2.2rem}
.progress-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.6rem;align-items:center;background:var(--green);color:#fff;border-radius:22px;padding:1.6rem 1.9rem;margin:0 0 1.4rem}
.ring-box{position:relative;width:6.2rem;height:6.2rem}
.ring{width:100%;height:100%}
.ring-track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:6}
.ring-fill{fill:none;stroke:var(--lime);stroke-width:6;stroke-linecap:round}
.ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;font-size:.95rem;line-height:1.1;color:rgba(255,255,255,.8)}
.ring-text strong{font-size:1.7rem;color:#fff}
.ring-text small{font-size:.66rem;margin-top:.15rem}
.progress-head{margin:0 0 .3rem;font-size:1.2rem;font-weight:700;color:#fff}
.progress-words p{margin:0 0 .3rem;color:rgba(255,255,255,.82)}
.progress-words .progress-shop{font-size:.85rem;color:rgba(255,255,255,.6);margin:0}
.up-next{border-left:1px solid rgba(255,255,255,.16);padding-left:1.6rem;min-width:13rem}
.up-next .eyebrow{color:rgba(255,255,255,.6)}
.next-name{margin:0 0 .8rem;font-weight:700;font-size:1.05rem}
.button.lime{background:var(--lime);color:var(--lime-ink);margin:0;min-height:44px;min-width:0}
.button.lime:hover{background:#cbe36b}
.dash{display:grid;grid-template-columns:minmax(0,1fr) 20rem;grid-template-areas:"list attention" "list records";gap:1.2rem;align-items:start}
.dash > .alertbox{grid-area:attention;margin:0}
.dash > section.today{grid-area:list;margin:0}
.dash > .records-card{grid-area:records}
.alertbox .attention{margin:.6rem 0 .2rem;font-weight:700}
.alertbox h2{font-size:1rem;margin:.2rem 0 .6rem}
ul.checklist{list-style:none;padding:0;margin:.4rem 0}
li.check-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1rem .2rem;border-bottom:1px solid var(--soft)}
li.check-row:last-child{border-bottom:0}
.check-icon{width:2.4rem;height:2.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--soft);color:var(--muted)}
li.check-row.done .check-icon{background:var(--ok-bg);color:var(--ok-ink)}
.check-main strong{display:block;font-weight:600}
.check-main small,.check-side small{color:var(--muted);font-size:.85rem}
.check-side{text-align:right;display:flex;flex-direction:column;gap:.15rem}
.check-side .status{font-size:.88rem;color:var(--ok-ink)}
.check-side .status.not_started,.check-side .status.in_progress{color:var(--ink)}
.check-side .status.missed{color:var(--bad-ink)}
.tag.due{background:#fdf0cf;color:#7a4a0e;margin-left:.3rem}
ul.facts{list-style:none;padding:.8rem 0 0;margin:.4rem 0 0;border-top:1px solid var(--soft);color:var(--muted);font-size:.9rem}
ul.facts li{margin:.2rem 0}
.records-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.3rem 1.4rem}
.records-icon{display:inline-flex;width:2.6rem;height:2.6rem;border-radius:12px;background:var(--ok-bg);color:var(--ok-ink);align-items:center;justify-content:center}
.records-card h2{font-size:1.1rem;margin:.9rem 0 .4rem}
.records-card p{color:var(--muted);margin:.3rem 0}
a.arrow{color:var(--ink);font-weight:600;text-decoration:none}
a.arrow::after{content:" \2192"}
h2.quick{font-size:1rem;color:var(--muted);margin-top:2rem}
@media (max-width:1100px){
  .dash{grid-template-columns:1fr;grid-template-areas:"attention" "list" "records"}
}
@media (max-width:700px){
  .progress-card{grid-template-columns:auto minmax(0,1fr);padding:1.2rem}
  .up-next{grid-column:1 / -1;border-left:0;border-top:1px solid rgba(255,255,255,.16);padding:1rem 0 0}
  .button.lime{width:100%}
}
.ring-text span{white-space:nowrap}
body.app button.small{min-height:36px;padding:.35rem .8rem;font-size:.88rem;width:auto;margin-left:.4rem}

/* Account 1 check of PR #15 (Lows): keyboard focus always shows over a chosen button (black, after the
   green "chosen" outline), focus rings contrast with white, and a box holding a critical or missed alert is red. */
label.temp:has(input:focus-visible),label.choice:has(input:focus-visible){outline:4px solid #000;outline-offset:2px}
button:focus-visible,.button:focus-visible,a:focus-visible{outline:3px solid #000;outline-offset:2px}
.alertbox:has(.sev-critical),.alertbox:has(.sev-missed){background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-ink)}
.alertbox:has(.sev-critical) h2,.alertbox:has(.sev-missed) h2{color:var(--bad-ink)}

/* ==== KitchenTick redesign, batch 1: the shared shell (owner's brief, 4 Nov 2026) ====
   Colours from the reference screens. Lime is only ever a fill with dark green text. Phone first:
   a top bar and four tabs across the bottom; from 900px the tabs become a side menu. */
:root{--paper:#f4f5f0;--side:#fbfbf8;--ink:#16302a;--muted:#55665e;--green:#173f35;--green-2:#215446;--lime:#c9e482;--lime-ink:#173f35;
  --pale:#eaf0dd;--pale-line:#dbe5c9;--line:#e1e5da;--soft:#eef1ea;--bad-bg:#fff6ef;--bad-line:#f3d5c5;--bad-ink:#a3301c;--radius:20px}
/* Owner, 4 Nov 2026: match Apple's rounded font on every device. Apple devices use their own SF Rounded
   (ui-rounded); everywhere else the closest open font, Nunito (SIL Open Font License 1.1, nunito-OFL.txt),
   served from assets/ and subset to Latin. Nothing is loaded from outside the site (CSP). */
@font-face{font-family:"KitchenTick Rounded";src:url("nunito-latin.440359dc73.woff") format("woff");font-weight:200 1000;font-style:normal;font-display:swap}
body{font:17px/1.45 ui-rounded,"SF Pro Rounded","KitchenTick Rounded","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
h1{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;margin:.3rem 0 1.3rem}
main > .eyebrow:first-child{margin:.8rem 0 .2rem}
h2{font-size:1.35rem;font-weight:700}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.brand{font-size:1.45rem;font-weight:700}
.brand .mark{stroke:var(--green);stroke-width:2.6}

/* Bigger controls everywhere: 56px buttons, 52px fields */
button,.button{min-height:56px;border-radius:14px;font-size:1.05rem;background:var(--green)}
input,select{min-height:52px;border-radius:12px}
.button.lime,button.lime{background:var(--lime);color:var(--lime-ink)}
button.secondary,a.button.secondary{background:#fff;color:var(--green);border:1.5px solid var(--line)}
button.link,body.app button.link{min-height:44px;background:none;color:var(--green-2)}
:focus-visible{outline:3px solid #000;outline-offset:2px}

/* The frame */
body.app{display:block}
body.app aside.side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:20;padding:0;background:#fff;border:0;border-top:1px solid var(--line);display:block}
body.app aside.side > header,body.app aside.side .me{display:none}
body.app aside.side nav.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);flex-direction:initial;gap:0;padding:.35rem 0 calc(.6rem + env(safe-area-inset-bottom));background:#fff}
aside.side nav.tabs a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:56px;padding:.3rem 0 0;border-radius:0;
  color:var(--muted);font-size:.8rem;font-weight:500;text-decoration:none;background:none}
aside.side nav.tabs a.current{color:var(--ink);font-weight:700;background:none}
aside.side nav.tabs a.current::before{content:"";position:absolute;top:-.36rem;width:1.8rem;height:4px;border-radius:2px;background:var(--green)}
aside.side nav.tabs a.current::after{display:none}
nav.tabs .icon{width:1.5rem;height:1.5rem}
nav.tabs .count{position:absolute;top:.15rem;left:calc(50% + .3rem);min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:1rem;background:#c2321d;color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.topbar,header.topbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem .3rem;background:none;color:var(--ink);letter-spacing:0}
.top-actions{display:flex;align-items:center;gap:.6rem}
.round{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none}
.round.avatar{background:var(--pale);border:2px solid var(--pale-line);font-weight:700;font-size:.9rem;width:48px;height:48px}
body.app .page{min-width:0}
body.app main{max-width:46rem;margin:0;padding:.6rem 1.4rem 7rem}
.crumb{display:none}

/* Cards and lists */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.card.pad{padding:1.2rem 1.3rem;margin:0 0 1rem}
ul.list{list-style:none;margin:0 0 1rem;padding:0}
ul.list li{margin:0;border:0;padding:0;background:none}
ul.list li+li{border-top:1px solid var(--line)}
a.row{display:flex;align-items:center;gap:.9rem;min-height:4.4rem;padding:.7rem 1rem;color:var(--ink);text-decoration:none}
a.row > span:not(.tile):not(.state){flex:1;min-width:0}
a.row strong{display:block;font-weight:700}
a.row small{display:block;color:var(--muted);font-size:.9rem}
a.row .tile{width:2.6rem;height:2.6rem;border-radius:12px;background:var(--soft);color:var(--green-2);display:inline-flex;align-items:center;justify-content:center;flex:none}
a.row > .icon:last-child{color:var(--ink);flex:none}
.state{font-size:.88rem;color:var(--muted);white-space:nowrap}
.state.done{color:#2f6b2a;font-weight:700}
h2.group{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:1.6rem 0 .6rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:0 0 .4rem}
a.tile-big{display:flex;flex-direction:column;gap:.35rem;min-height:7.5rem;padding:1.1rem;border-radius:var(--radius);background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none}
a.tile-big.pale{background:var(--pale);border-color:var(--pale-line)}
a.tile-big strong{font-size:1.05rem;margin-top:.4rem}
a.tile-big small{color:var(--muted);font-size:.88rem}
.calm{text-align:center;padding:1.6rem}
.big-tick{font-size:2rem;margin:0;color:#2f6b2a}
.lead-name{font-size:1.4rem;font-weight:700;margin:.2rem 0}
ol.steps li{margin:.5rem 0}
.alertbox{border-radius:var(--radius)}
ul.menu li,ul.people li{border-radius:var(--radius)}

/* Wider screens: the tabs become a side menu, and nothing is hidden */
@media (min-width:900px){
  body.app{display:grid;grid-template-columns:16rem minmax(0,1fr)}
  body.app aside.side{position:sticky;top:0;bottom:auto;height:100vh;display:flex;flex-direction:column;gap:1.2rem;padding:1.5rem 1rem;background:var(--side);border-top:0;border-right:1px solid var(--line)}
  body.app aside.side > header{display:block}
  body.app aside.side .me{display:block;margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line)}
  body.app aside.side nav.tabs{display:flex;flex-direction:column;gap:.25rem;padding:0;background:none}
  aside.side nav.tabs a{flex-direction:row;justify-content:flex-start;gap:.8rem;min-height:52px;padding:0 .9rem;border-radius:12px;font-size:1rem}
  aside.side nav.tabs a.current{background:var(--green);color:#fff}
  aside.side nav.tabs a.current::before{display:none}
  nav.tabs .count{position:static;margin-left:auto}
  header.topbar{justify-content:flex-end;padding:1.2rem 2.4rem 0}
  .topbar .brand{display:none}
  body.app main{max-width:64rem;padding:.4rem 2.4rem 3rem}
  h1{font-size:2.6rem}
}

/* ==== KitchenTick redesign, batch 2: Today and Issues (reference screen 2-today.png) ====
   States always carry a symbol and a word, never colour alone. */
.shop-chip{display:flex;align-items:center;gap:.5rem;margin:.6rem 0 1rem;font-weight:700;color:var(--ink)}
.shop-chip .icon{width:1.2rem;height:1.2rem;color:var(--green-2)}
details.switcher{margin:.6rem 0 1.1rem;max-width:24rem}
details.switcher summary{list-style:none;display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1rem;border-radius:999px;background:#fff;border:1px solid var(--line);cursor:pointer;color:var(--ink)}
details.switcher summary::-webkit-details-marker{display:none}
details.switcher summary .label{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
details.switcher summary .icon{width:1.1rem;height:1.1rem;transform:rotate(90deg)}
details.switcher[open] summary .icon{transform:rotate(-90deg)}
details.switcher ul{list-style:none;margin:.5rem 0 0;padding:.3rem;background:#fff;border:1px solid var(--line);border-radius:16px}
details.switcher li{margin:0;padding:0;border:0;background:none}
details.switcher button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:1rem;min-height:52px;padding:0 1rem;margin:0;border-radius:12px;background:none;color:var(--ink);font-weight:600;text-align:left}
details.switcher button:hover{background:var(--soft)}
details.switcher button[aria-current] {background:var(--pale)}
details.switcher .tick{font-size:.85rem;color:var(--green-2);font-weight:700}
section.next-hero{background:var(--green);color:#fff;border-radius:var(--radius);padding:1.4rem 1.4rem 1.5rem;margin:0 0 1rem}
section.next-hero .eyebrow{color:#fff;margin:0 0 .4rem} /* white, the pair Brand checks on the main colour (lane K) */
section.next-hero h2{color:#fff;font-size:1.7rem;font-weight:800;margin:0 0 .4rem;letter-spacing:-.01em}
section.next-hero p{color:#fff;margin:0 0 1.1rem}
section.next-hero .button.lime{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;font-weight:700;border-radius:14px;text-decoration:none}
a.issue-card{display:flex;align-items:center;gap:.9rem;min-height:4.6rem;padding:.9rem 1.1rem;margin:0 0 1rem;border-radius:var(--radius);background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad-ink);text-decoration:none}
a.issue-card > span:not(.mark){flex:1;min-width:0}
a.issue-card strong{display:block;font-weight:700}
a.issue-card small{display:block;color:var(--ink);font-size:.9rem}
a.issue-card .mark{width:2.4rem;height:2.4rem;flex:none;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem}
a.issue-card.calm{background:#fff;border-color:var(--line);color:#2f6b2a;text-align:left;padding:.9rem 1.1rem}
a.issue-card.calm small{color:var(--muted)}
a.issue-card.calm .mark{background:var(--pale)}
p.elsewhere{margin:-.3rem 0 1rem;color:var(--bad-ink);font-size:.95rem}
body.app p.elsewhere form.inline{display:inline;margin:0;padding:0}
body.app p.elsewhere button.link{display:inline-flex;align-items:center;width:auto;min-height:48px;margin:0;padding:0 .2rem;color:var(--bad-ink);font-weight:700;text-decoration:underline;text-align:left}
body.app .shop-sum form.inline{display:block;margin:.6rem 0 0}
body.app .shop-sum button.link{display:inline-flex;align-items:center;width:auto;min-height:48px;padding:0 .2rem;font-weight:700;text-decoration:underline} /* 48px targets (Account 1, PR #19 Low) */
.plan-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:1.4rem 0 .6rem}
.plan-head h2{margin:0}
.plan-head p{margin:0;color:var(--muted);font-size:.9rem}
.plan a.row > span.check-icon{width:2.6rem;height:2.6rem;border-radius:12px;background:var(--soft);color:var(--green-2);display:inline-flex;align-items:center;justify-content:center;flex:none}
.plan a.row .check-icon .icon{fill:none;stroke:currentColor;stroke-width:2;width:1.3rem;height:1.3rem}
.plan a.row.done .check-icon{background:var(--pale)}
.state.later{color:var(--muted)}
.state.due{color:var(--bad-ink);font-weight:700}
.state.bad{color:var(--bad-ink);font-weight:700}
ul.facts{list-style:none;margin:0 0 1rem;padding:0 .3rem;color:var(--muted);font-size:.9rem}
ul.facts li{margin:.2rem 0;padding:0;border:0;background:none}
a.nudge{display:flex;align-items:center;gap:.9rem;min-height:4.6rem;padding:.8rem 1.1rem;margin:0 0 1rem;border-radius:var(--radius);background:var(--pale);border:1px solid var(--pale-line);color:var(--ink);text-decoration:none}
a.nudge > span:not(.ring-mini){flex:1;min-width:0}
a.nudge strong{display:block}
a.nudge small{display:block;color:var(--muted);font-size:.9rem}
.ring-mini{position:relative;width:3rem;height:3rem;flex:none;display:inline-flex;align-items:center;justify-content:center}
.ring-mini svg{position:absolute;inset:0;width:100%;height:100%}
.ring-mini .ring-track{fill:none;stroke:var(--pale-line);stroke-width:4}
.ring-mini .ring-fill{fill:none;stroke:var(--green);stroke-width:4;stroke-linecap:round}
.ring-mini > span{position:relative;font-size:.78rem;font-weight:800;color:var(--green)}
.shop-sums{display:grid;gap:1rem}
.shop-sum h2{margin:0 0 .6rem}
.shop-sum .sum-row{display:flex;align-items:center;gap:.9rem}
.shop-sum .sum-row p{margin:0}
.shop-sum .sum-row small{color:var(--muted)}
.shop-sum .sum-alert{color:var(--bad-ink);font-weight:700;margin:.8rem 0 .2rem}
.shop-sum .sum-ok{color:#2f6b2a;font-weight:700;margin:.8rem 0 .2rem}
p.foot{text-align:center;color:var(--muted);font-size:.85rem;margin:1.6rem 0 0}
@media (min-width:900px){
  .shop-sums{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
  section.next-hero .button.lime{width:auto;display:inline-flex;padding:0 1.6rem}
}
@media print{ details.switcher,a.nudge{display:none !important} }

/* "I'm on it" (owner, 4 Nov 2026): an alert someone is dealing with reads as in hand, not as a fresh red alarm;
   always with a symbol and words, never colour alone. */
a.issue-card.in-hand{background:#fff;border-color:var(--line);color:var(--ink)}
a.issue-card.in-hand .mark{background:var(--soft)}
a.issue-card.in-hand small{color:var(--muted)}
.alertbox li.alert.in-hand{background:#fff;border-left:4px solid var(--line)}
.alertbox small.on-it{display:inline-block;margin-top:.3rem;color:var(--ink);font-weight:600}
.alertbox form.inline{margin-left:.4rem}
body.app .alertbox button.small:not(.secondary){background:var(--green);color:#fff;font-weight:700}

/* Issues follow-up (owner, 5 Nov 2026): the Open / Resolved tabs, an issue card's top line and a missed check's
   activity. Screen only; a print keeps the plain rules at the end of this file. The shown tab is a plain label
   marked aria-current="page", drawn as selected (white on the brand's main colour, which Brand keeps at 4.5:1 or
   more with white); the other is a 48px link that keeps the kit's focus ring. Text colours are --ink and --muted, each at least 4.5:1 on white. */
@media screen{
  .filter-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
  .filter-tabs .tab{display:inline-flex;align-items:center;min-height:48px;padding:0 1.1rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-weight:600}
  .filter-tabs a.tab:hover{background:var(--soft)}
  .filter-tabs .tab[aria-current]{background:var(--green);border-color:var(--green);color:#fff;font-weight:800}
  .alertbox p.issue-top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .3rem}
  .alertbox p.issue-top small{color:var(--muted)}
  .alertbox li.alert h3{margin:.2rem 0 .3rem;font-size:1.05rem;color:var(--ink)}
  ul.people.timeline{list-style:none;margin:0 0 1rem;padding:0 0 0 1rem;border-left:3px solid var(--line)}
  ul.people.timeline li{margin:0 0 .8rem}
  ul.people.timeline small{color:var(--muted)}
}

/* Touch targets of at least 48px (Account 1, PR #18 Low), and words for screen readers only */
body.app button.small{min-height:48px;padding:.4rem .9rem}
.me button.link,body.app .me button.link{min-height:48px;display:flex;align-items:center;width:100%}
.vh{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==== KitchenTick components (lane K) ====
   The shared parts every redesign batch composes; the Html:: helpers emit them, with escaping built in.
   Batches add no global CSS: an area's own rules go in assets/ui-manage.css, ui-records.css, ui-tablet.css or
   ui-auth.css (linked by Html::setArea), and those files never hold @media print or body.plain rules, so the
   print and plain rules at the end of this file always win. Symbol and word, never colour alone; 48px targets.
   Already defined above, kept exactly as they are:
   - white card ............... .card, .card.pad                                  Html::card()
   - tile, pale tile .......... .tiles > a.tile-big, a.tile-big.pale             Html::tile(), Html::tiles()
   - grouped list ............. ul.list.card > li > a.row: span.tile (icon), strong, small, .state, chevron
                                                                                  Html::listCard(), Html::rowLink()
   - row state ................ .state.done / .later / .due / .bad, always with ✓ ○ ! ✕ and a word
   - small-caps group label ... h2.group (and .eyebrow above a heading)         Html::group()
   - progress ring ............ .ring-mini                                        Html::ring()
   - lime button .............. .button.lime: lime only as a fill, always with dark green text (never lime text or lines)
   - issue card ............... a.issue-card (⚠ and words), a.issue-card.calm    Html::issueCard()
   - Today's Up next hero ..... section.next-hero (batch 2; new pages use .hero)
   - calm message ............. .calm
   Added here: the generic hero card (.hero, Html::hero()), the large button (.button.large, Html::buttonLink()
   with lime, dark or secondary) and the empty state (.empty, Html::emptyState()). */
section.hero{background:var(--green);color:#fff;border-radius:var(--radius);padding:1.4rem 1.4rem 1.5rem;margin:0 0 1rem}
section.hero .eyebrow{color:#fff;margin:0 0 .4rem}
section.hero h2{color:#fff;font-size:1.7rem;font-weight:800;margin:0 0 .4rem;letter-spacing:-.01em}
/* All hero text is white: the background is the brand's main colour, which Brand checks for 4.5:1 with white. */
section.hero p{color:#fff;margin:0 0 1.1rem}
/* Keyboard focus on the dark green: white (11.7:1), as the black ring elsewhere would be 1.8:1 here. */
section.hero a:focus-visible,section.hero button:focus-visible,section.next-hero a:focus-visible,section.next-hero button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.button.large{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:56px;padding:0 1.4rem;border-radius:14px;font-weight:700;text-decoration:none}
a.button.large.secondary{margin-top:1rem}
section.empty{text-align:center;padding:1.8rem 1.4rem;margin:0 0 1rem}
section.empty h2{margin:.2rem 0 .4rem}
section.empty p{color:var(--muted);margin:0 0 .4rem}
section.empty .empty-mark{font-size:1.8rem;line-height:1;color:var(--green-2);margin:0}
section.empty .button.large{width:auto;display:inline-flex}
@media (min-width:900px){
  .button.large{width:auto;display:inline-flex}
}
/* A hero on paper: dark text on white, like every other card in a print. */
@media print{
  section.hero{background:#fff;color:#000;border:1px solid #999}
  section.hero h2,section.hero p,section.hero .eyebrow{color:#000}
}

/* Sign-in pages, the inspector's copy and every print keep the plain type and spacing they had before the
   redesign (Account 1, PR #18 M2): this comes after the redesign's rules, so it wins. */
body.plain{font:16px/1.5 "Avenir Next","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
body.plain h1{font-size:2rem;font-weight:700;letter-spacing:-.02em;margin:.2rem 0 1.2rem}
@media print{
  nav.tabs,.topbar,aside.side,.crumb{display:none !important}
  body,body.app,body.plain{display:block;font:11pt/1.4 "Avenir Next","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:#000;background:#fff}
  body.app main,body.plain main{padding:0;margin:0;max-width:none}
  h1{font-size:1.6rem;font-weight:700;letter-spacing:0;margin:0 0 .8rem}
  .card,.alertbox,a.row,.tile-big{background:#fff;border-color:#999;box-shadow:none}
}