/* Plain, phone-first layout for round 2. Restyled once a theme is approved. */
*{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; }
}