/* Technical's own rules (simmons-estate#141). The shared look is css/style.css, copied unchanged from Maintenance.
   Laid out for Adam's rugged tablet first: big touch targets, one column of question cards, a bar that stays at the
   foot of an audit with its progress and Submit. */

.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 90px; }
.apps-link { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-text); text-decoration: none; }
.apps-link:hover { color: var(--red); }
.nav-signout { color: rgba(255,255,255,0.6); }
.login-box { max-width: 420px; margin: 60px auto; padding: 0 16px; }
.viewer-hide { }
body.is-viewer .writer-only { display: none !important; }

/* ── DASHBOARD ── */
.due-list { list-style: none; }
.due-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--cream); }
.due-list li:first-child { border-top: none; }
.due-name { font-weight: 600; }
.due-when { font-size: 13px; color: var(--grey-text); }
.badge-due { background: var(--warn-bg); color: var(--warn); border-color: #FFE08A; }
.badge-done { background: var(--ok-bg); color: var(--ok); border-color: #A5D6A7; }
.badge-overdue, .badge-fail { background: #FFEBEE; color: #B71C1C; border-color: #FFCDD2; }
.badge-draft { background: #E3F2FD; color: #1565C0; border-color: #90CAF9; }
/* Bakery | Shops (technical#13). */
.area-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); padding: 3px; gap: 2px; }
.area-toggle button { min-height: 40px; min-width: 96px; padding: 0 18px; border: 0; border-radius: 19px; background: transparent; color: var(--dark); cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.area-toggle button.on { background: var(--dark); color: var(--cream); }
/* The red buttons, as Complaints & Accidents' "Log a new", in an even grid: every one the same width and height, in
   lined-up rows (technical#17). A button group's choice opens below them. */
.quick-start { margin-bottom: 18px; }
.quick-start-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; color: var(--grey-text); margin-bottom: 8px; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.quick-btn { width: 100%; min-height: 52px; padding: 8px 14px; font-size: 15px; line-height: 1.15; text-align: center; white-space: normal; }
.quick-btn[aria-expanded="true"] { background: var(--red-dark); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }
.quick-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: rgba(255,255,255,0.22); font-size: 13px; }
.quick-choice { margin-top: 12px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--red); border-radius: 8px; padding: 14px 16px 16px; }
.quick-choice-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; }
.quick-pick-btn { color: var(--dark); }
/* An audit in progress: tapped, it shows Carry on and Stop and throw away. */
.drafts li { flex-wrap: wrap; }
.drafts li.tappable { cursor: pointer; }
.draft-more { min-width: 44px; font-size: 18px; letter-spacing: 0; }
.draft-choices { display: none; flex-basis: 100%; gap: 8px; padding-top: 10px; }
.drafts li.open .draft-choices { display: flex; }
.drafts li.open .draft-more { border-color: var(--dark); }
.draft-choices .btn { flex: 1; }
.btn-danger { color: #B71C1C; border-color: #FFCDD2; }
.btn-danger:hover { background: #FFEBEE; color: #B71C1C; border-color: #B71C1C; }
.form-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-height: 130px; }
.form-card:hover { border-color: var(--red); }
.form-card-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 21px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.15; }
.form-card-meta { font-size: 14px; color: var(--grey-text); }
.form-card .btn-row { margin-top: auto; }

/* ── AN AUDIT ── */
.au-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.au-saved { font-size: 14px; color: var(--grey-text); min-height: 20px; }
.au-saved.err { color: #B71C1C; font-weight: 600; }
.au-jump { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 6px; }
.au-jump button { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 7px 12px; font-size: 14px; cursor: pointer; min-height: 38px; }
.au-jump button.full { border-color: #A5D6A7; background: var(--ok-bg); color: var(--ok); }
.au-jump button.has-fail { border-color: #FFCDD2; background: #FFEBEE; color: #B71C1C; }
.au-section { margin-top: 18px; }
.au-section-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 0 8px; border-bottom: 2px solid var(--dark); margin-bottom: 10px; scroll-margin-top: 64px; }
.au-heading { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; margin: 18px 0 8px; color: var(--red); }
.q-card { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 14px 16px; margin-bottom: 10px; scroll-margin-top: 70px; }
.q-card.is-fail { border-left: 5px solid #B71C1C; }
.q-card.is-problem { outline: 2px solid #B71C1C; }
.q-card.is-instruction { background: var(--cream); font-size: 15px; line-height: 1.5; }
.q-label { font-size: 17px; font-weight: 600; line-height: 1.35; margin-bottom: 10px; }
.q-help { font-size: 14px; color: var(--grey-text); margin: -6px 0 10px; }
.q-card textarea, .q-card input[type=text], .q-card input[type=number], .q-card input[type=date], .q-card input[type=datetime-local], .q-card select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); font-size: 17px; min-height: 48px; }
.q-card .num-row { flex-wrap: nowrap; }
.q-card .num-row input { flex: 1; width: auto; min-width: 0; }
.q-card .num-row .num-sign { flex: 0 0 auto; min-width: 64px; min-height: 48px; font-size: 20px; font-weight: 600; }
.q-card textarea { min-height: 90px; resize: vertical; line-height: 1.4; }
.q-card textarea:focus, .q-card input:focus, .q-card select:focus { outline: 2px solid var(--red); outline-offset: -1px; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-btn { flex: 1 1 120px; min-height: 52px; border: 1px solid var(--border); background: var(--surface); border-radius: 4px; font-size: 18px; font-weight: 600; cursor: pointer; }
.seg-btn.on { background: var(--dark); color: var(--cream); border-color: var(--dark); }
.seg-btn.on.yes { background: var(--ok); border-color: var(--ok); color: #fff; }
.seg-btn.on.no { background: #B71C1C; border-color: #B71C1C; color: #fff; }
.opt-list { display: flex; flex-direction: column; gap: 6px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; min-height: 48px; font-size: 16px; background: var(--surface); }
.opt input { width: 22px; height: 22px; accent-color: var(--red); flex-shrink: 0; }
.opt.on { border-color: var(--dark); background: var(--hover); }
.q-other { margin-top: 8px; }
.q-extra { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.q-extra .btn { min-height: 40px; }
.q-extra { align-items: center; }
.cam-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--dark); cursor: pointer; flex-shrink: 0; }
.cam-btn:hover { background: var(--hover); }
.cam-btn.is-fail { background: #B71C1C; border-color: #B71C1C; color: #fff; }
.q-user { font-size: 17px; font-weight: 600; padding: 6px 0; }
.q-note { margin-top: 10px; }
.q-note label { display: block; font-size: 13px; font-weight: 600; color: var(--grey-text); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.q-fail-msg { color: #B71C1C; font-size: 14px; font-weight: 600; margin-top: 8px; }
/* A further Non-Compliance on the question (technical#33). */
.q-more { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #E3B3B3; }
.q-more-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: #B71C1C; text-transform: uppercase; letter-spacing: 0.05em; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.thumb { position: relative; }
.thumb img { width: 110px; height: 82px; object-fit: cover; border-radius: 3px; border: 1px solid var(--border); display: block; cursor: zoom-in; }
.thumb button { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 15px; line-height: 1; }
.sig-pad { width: 100%; max-width: 560px; height: 180px; border: 1px dashed var(--border); border-radius: 4px; background: #fff; touch-action: none; display: block; }
.sig-img { max-width: 320px; border: 1px solid var(--border); border-radius: 3px; background: #fff; display: block; }
.au-bar { position: sticky; bottom: 0; z-index: 10; background: var(--surface); border-top: 1px solid var(--border); padding: 10px 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; box-shadow: 0 -2px 10px rgba(0,0,0,0.06); }
.au-progress { flex: 1; min-width: 180px; }
.au-progress-bar { height: 8px; background: var(--cream); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.au-progress-bar div { height: 100%; background: var(--ok); }
.problems { list-style: none; margin-top: 6px; }
.problems li { padding: 5px 0; font-size: 14px; }
.problems a { color: #B71C1C; font-weight: 600; cursor: pointer; text-decoration: underline; }
.photo-view { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.photo-view.open { display: flex; }
.photo-view img { max-width: 100%; max-height: 100%; }

/* A submitted audit, read and printed. */
.ans-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4px 18px; padding: 9px 0; border-top: 1px solid var(--cream); font-size: 15px; }
.ans-row:first-child { border-top: none; }
.ans-q { color: var(--dark); }
.ans-a { font-weight: 600; word-break: break-word; }
.ans-a .muted { font-weight: 400; }
.ans-row.is-fail .ans-a { color: #B71C1C; }
.ans-note { grid-column: 1 / -1; font-size: 14px; color: var(--grey-text); white-space: pre-wrap; }
.ans-row .thumbs { grid-column: 1 / -1; margin-top: 2px; }

/* ── THE FORM EDITOR ── */
.ed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.ed-section { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; margin-bottom: 16px; }
.ed-section-head { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--cream); flex-wrap: wrap; }
.ed-section-head input { flex: 1; min-width: 180px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: 0.03em; padding: 6px 10px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); }
.ed-items { padding: 10px 14px; }
.ed-item { border: 1px solid var(--border); border-radius: 4px; margin-bottom: 8px; background: var(--surface); }
.ed-item-top { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.ed-item-top:hover { background: var(--hover); }
.ed-item-type { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-text); min-width: 92px; }
.ed-item-label { flex: 1; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-item-flags { display: flex; gap: 4px; }
.ed-item-body { padding: 4px 12px 12px; border-top: 1px solid var(--cream); }
.ed-item.hazard { border-left: 4px solid #E0A100; }
.ed-item.heading .ed-item-label { font-weight: 700; text-transform: uppercase; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em; }
.ed-register { padding: 14px; font-size: 15px; color: var(--grey-text); }
.ed-add { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ed-tools { display: flex; gap: 6px; }
.ed-tools button { width: 36px; height: 36px; border: 1px solid var(--border); background: var(--surface); border-radius: 3px; cursor: pointer; font-size: 15px; }
.ed-tools button:hover { border-color: var(--red); color: var(--red); }
.ed-side { position: sticky; top: 64px; }
.ed-versions { list-style: none; font-size: 14px; }
.ed-versions li { padding: 5px 0; border-top: 1px solid var(--cream); }
.ed-versions li:first-child { border-top: none; }
.field textarea.opts { min-height: 130px; }

/* ── THE REGISTER ── */
.reg-table td input { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 3px; font-size: 15px; background: var(--surface); min-height: 40px; }
.reg-table td.n input { width: 74px; }
.reg-hist { font-size: 13px; color: var(--grey-text); }
.reg-hist li { list-style: none; padding: 2px 0; }

@media (max-width: 1000px) {
  .ed-layout { grid-template-columns: minmax(0, 1fr); }
  .ed-side { position: static; }
}
@media (max-width: 640px) {
  .au-bar { padding: 10px 16px; }
  .ans-row { grid-template-columns: 1fr; }
  .seg-btn { flex-basis: 100px; }
  .ed-item-type { min-width: 0; }
}

/* Printed or saved as PDF: the audit, nothing around it. */
@media print {
  .topbar, .nav-overlay, #themeToggleBtn, .back-row, .no-print, .au-bar { display: none !important; }
  body { background: #fff; }
  .page-header, .content { padding: 8px 0; }
  .panel { border: none; padding: 0; }
  .ans-row { break-inside: avoid; }
  .thumb img { width: 140px; height: 105px; }
}

/* The dashboard's panels two by two on a tablet or wider, one column on a phone. */
.dash-panels.dash-two { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .dash-panels.dash-two { grid-template-columns: 1fr; } }
.ans-a a, .detail a { color: var(--red); font-weight: 600; }
/* A long line - an instruction, a wide register table - scrolls in its own box, never the page. */
.lists-layout > *, .ed-layout > * { min-width: 0; }
@media (max-width: 640px) { .reg-table td.n input { width: 60px; } }

/* ── ON AN IPAD (technical#14) ──
   Held either way, used with a finger: every control at least 44 px, no double-tap zoom, nothing under the iPad's
   own bars, text boxes at 16 px or more so Safari does not zoom in, and the audit's section chips and its foot bar
   always in view. style.css is the house look and stays as it is; what an iPad needs is said here. */
html { -webkit-text-size-adjust: 100%; }
button, .btn, .seg-btn, .opt, .nav-link, .form-card, .due-list li, .back-row, .tab, .area-toggle button, select, label.btn {
  touch-action: manipulation; -webkit-tap-highlight-color: rgba(184,39,44,0.12); }
input, select, textarea { font-size: max(16px, 1em); }
.topbar { padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); }
.au-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); }
.photo-view { padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }

/* The audit: section chips stay under the top bar as it scrolls; the foot bar says how far and whether it is saved. */
.au-jump { position: sticky; top: 52px; z-index: 9; background: var(--cream); padding: 10px 0; margin: 4px 0 6px; box-shadow: 0 6px 8px -8px rgba(0,0,0,0.25); }
.au-jump button { min-height: 44px; padding: 8px 14px; }
.au-section-title, .q-card { scroll-margin-top: 124px; }
.au-progress-line { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.au-progress-line .au-saved { font-weight: 400; min-height: 0; }
.au-bar .btn { min-width: 140px; }
.q-card { padding: 16px 18px; border-radius: 8px; }
.q-label { font-size: 18px; }
.seg-btn { min-height: 56px; border-radius: 6px; padding: 8px 12px; }
.seg-btn:active { transform: scale(0.98); }
.q-pick { width: 100%; min-height: 52px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--dark); font-size: 18px; }
.q-pick:focus { outline: 2px solid var(--red); outline-offset: -1px; }
.q-extra .btn, .q-extra label.btn { min-height: 44px; }
.thumb button { width: 36px; height: 36px; top: -12px; right: -12px; }

/* The dashboard and lists: cards with room to tap, status colours that read in bright light. */
.stat { border-radius: 6px; padding: 12px 16px; }
.stat strong { font-size: 34px; }
.stat-late strong { color: #B71C1C; }
.panel { border-radius: 8px; }
.due-list li { min-height: 56px; }
.badge { font-size: 13px; padding: 3px 10px; }
.form-card { border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
.form-card:active { box-shadow: 0 0 0 3px rgba(184,39,44,0.15); }

/* A finger, not a mouse: every button 44 px, on any screen, so what is checked on a laptop is what an iPad gets;
   nothing depends on hovering. */
.btn-sm, .quick-start .btn-sm { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.menu-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.area-toggle button, .tab, .field input, .field select, .search, .reg-table td input, .ed-section-head input { min-height: 44px; }
.ed-tools button { width: 44px; height: 44px; }
@media (pointer: coarse) {
  .opt { min-height: 52px; }
  .opt input { width: 26px; height: 26px; }
  .data-table td, .data-table th { padding-top: 12px; padding-bottom: 12px; }
}
/* An iPad held upright (768-1023 px): one column of panels, the toggle and buttons full width where they wrap. */
@media (max-width: 1023px) {
  .page-header { padding: 18px 24px 12px; }
  .content { padding: 20px 24px; }
  .au-bar { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .topbar { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  /* The section chips in one row that scrolls sideways, so they never take a third of the screen. */
  .au-jump { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .au-jump::-webkit-scrollbar { display: none; }
  .au-jump button { flex-shrink: 0; }
  .au-section-title, .q-card { scroll-margin-top: 120px; }
}
@media (max-width: 640px) {
  .area-toggle { width: 100%; }
  .area-toggle button { flex: 1; }
}

/* Scores, the last audit at a shop, and the Send to step (technical#20). */
.badge.band-green { background: var(--ok-bg); color: var(--ok); border-color: #A5D6A7; }
.badge.band-amber { background: var(--warn-bg); color: var(--warn); border-color: #FFE08A; }
.badge.band-red { background: #FFEBEE; color: #B71C1C; border-color: #FFCDD2; }
.score-bars { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.score-bars td { padding: 6px 4px; font-size: 15px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.score-bars .sb-name { width: 42%; }
.score-bars .sb-bar div { height: 10px; border-radius: 5px; min-width: 2px; }
.score-bars .sb-bar { background: linear-gradient(var(--hover), var(--hover)) center / 100% 10px no-repeat; }
.score-bars .sb-pct { width: 64px; text-align: right; font-weight: 700; }
.score-bars .band-green { background: var(--ok); }
.score-bars .band-amber { background: #C98A00; }
.score-bars .band-red { background: #B71C1C; }
.last-audit { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--hover); font-size: 15px; }
.last-audit summary { cursor: pointer; min-height: 32px; line-height: 1.6; }
.last-audit .score-bars { margin-top: 10px; }
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--surface); border-radius: 8px; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); }
.modal-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.send-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.send-row { align-items: flex-start; }
.send-missing { font-size: 14px; color: var(--warn); background: var(--warn-bg); border-radius: 4px; padding: 8px 10px; margin-bottom: 10px; }
.send-add input { flex: 1; min-width: 180px; min-height: 44px; }
.modal-foot { justify-content: flex-end; margin-top: 16px; }
@media print { .modal-back { display: none; } }
.ed-scoring { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.ed-weight { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--grey-text); white-space: nowrap; }
.ed-weight input { width: 72px; min-height: 40px; }

/* ---- Safe systems of work (technical#24): the two dashboard sections, a tick box, who is trained, each signing ---- */
.quick-ssw { padding-top: 14px; border-top: 1px solid var(--border); }
.tick-btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); font-size: 17px; font-weight: 600; color: var(--grey-text); cursor: pointer; text-align: left; }
.tick-box { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 2px solid var(--border); border-radius: 6px; font-size: 22px; line-height: 1; flex-shrink: 0; background: #fff; }
.tick-btn.on { border-color: var(--ok); color: var(--dark); background: var(--hover); }
.tick-btn.on .tick-box { background: var(--ok); border-color: var(--ok); color: #fff; }
.tr-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tr-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--dark); border-left: 4px solid var(--red); border-radius: 4px; background: var(--hover); }
.tr-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-who strong { font-size: 17px; }
.tr-who span { font-size: 14px; color: var(--grey-text); overflow-wrap: anywhere; }
.tr-noemail { color: #B71C1C; font-style: normal; }
.tr-remove { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 22px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.tr-search input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); font-size: 17px; min-height: 48px; }
.tr-results { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tr-results:empty { display: none; }
.tr-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); text-align: left; cursor: pointer; font-size: 16px; }
.tr-result span { font-size: 14px; color: var(--grey-text); }
.tr-result:active, .tr-result:focus { border-color: var(--dark); background: var(--hover); }
.tr-typed { border-style: dashed; }
.tr-signs { display: flex; flex-direction: column; gap: 16px; }
.tr-sign { padding-top: 10px; border-top: 1px solid var(--cream); }
.tr-sign:first-child { border-top: 0; padding-top: 0; }
.tr-sign-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 17px; }
.ans-a .tr-signs { gap: 10px; }

/* Editing a submitted audit, and its changes (technical#34). */
.st-warn { background: var(--warn-bg); border-color: #FFE08A; color: var(--warn); }
.edit-entry { padding: 8px 0; border-bottom: 1px solid var(--border); }
.edit-entry:last-child { border-bottom: 0; }
.edit-entry ul { margin: 4px 0 0 18px; padding: 0; font-size: 14px; }

/* The last audits at this place, on each question (technical#38). */
.q-last { font-size: 13px; color: var(--grey-text); margin: 2px 0 8px; }
.q-last.was-fail strong { color: #B71C1C; }
.q-last .tr-ok { color: #2E7D32; font-weight: 700; margin-right: 2px; }
.q-last .tr-x { color: #B71C1C; font-weight: 700; margin-right: 2px; }
.q-last .tr-na { color: var(--grey-text); margin-right: 2px; }
.sec-last { font-size: 13px; font-weight: 400; color: var(--grey-text); text-transform: none; letter-spacing: 0; }

/* The Shops dashboard (technical#48): the All audits tile, and a row's buttons side by side. */
.stat-link { display: block; min-height: 44px; text-decoration: none; color: inherit; border-top-color: var(--red); cursor: pointer; touch-action: manipulation; }
.stat-link:active { background: var(--cream); }
.stat-link strong { color: var(--red); }
.row-actions { white-space: nowrap; text-align: right; }