/* ══════════════════════════════════════════════════════════════════════
   The audit cards — shared by the L1, L2 and L3 audits.

   These rules were in all three pages, written out three times. On 12 Oct 2026
   they moved here, because that shape had just caused two bugs in two days: a
   banner link with no colour rule, missing from both hub pages at once, and a
   criterion fold that would have had to be written three times.

   Level-specific rules stay in their own page, and that page's <style> block
   comes AFTER this file, so a level can still override anything here.

   Loaded as audit.css?v=… — bump that version on ALL THREE audits when this
   changes, or one of them keeps yesterday's stylesheet for up to a day.
   ══════════════════════════════════════════════════════════════════════ */

.l1-panel { background:#fff; border:1.5px solid var(--border); border-radius:var(--radius); padding:18px 22px; margin-bottom:18px; box-shadow:var(--shadow-soft); }
.l1-panel h2 { font-family:'Baloo 2', sans-serif; font-weight:800; font-size:18px; color:var(--text); margin:0 0 10px; }
.l1-panel .l1-lede { font-size:14px; color:var(--text-dim); line-height:1.6; margin:0 0 12px; }
.l1-field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.l1-field label { font-size:12px; font-weight:800; color:var(--text); text-transform:uppercase; letter-spacing:0.04em; }
.l1-field select, .l1-field input[type="text"], .l1-field input[type="date"], .l1-field textarea { padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; font-size:14.5px; font-family:inherit; background:#fff; }
.l1-field textarea { min-height:64px; resize:vertical; line-height:1.5; }
.l1-pick-list { display:flex; flex-direction:column; gap:8px; margin-top:8px; max-height:400px; overflow-y:auto; padding:4px; border:1.5px solid var(--border); border-radius:10px; background:#fafbfc; }
.l1-pick-item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; background:#fff; border:1.5px solid #e2e8ec; border-radius:8px; cursor:pointer; transition:border-color 0.15s, background 0.15s; }
.l1-pick-item:has(input:checked) { border-color:var(--primary); background:#fff5f0; }
.l1-pick-item input { margin-top:2px; flex-shrink:0; width:20px; height:20px; accent-color:var(--primary); cursor:pointer; }
.l1-pick-content { flex:1; font-size:13.5px; line-height:1.5; }
.l1-pick-content .l1-pick-id { font-size:11px; font-weight:800; color:var(--primary-deep); letter-spacing:0.06em; margin-right:6px; }
.l1-pick-content .l1-pick-area { font-size:11px; font-weight:700; color:#4a6b58; }
.l1-pick-content .l1-pick-focus { color:var(--text); margin-top:4px; }
.l1-finding { border:1.5px solid #d8e4dd; border-left:4px solid var(--area-colour, #999); border-radius:12px; padding:14px 18px; margin-bottom:14px; background:#fff; }
.l1-finding-title { font-family:'Baloo 2', sans-serif; font-weight:800; font-size:15px; color:var(--area-colour, #999); margin:0 0 4px; }
.l1-finding-focus { font-style:italic; font-size:13px; color:var(--text-dim); margin:0 0 10px; line-height:1.5; }
.l1-finding-question { background:#EEF5F0; border-left:3px solid #1f7a73; border-radius:0 8px 8px 0; padding:8px 12px; margin:6px 0 12px; font-family:'Baloo 2', sans-serif; font-weight:800; font-size:13.5px; color:#1f7a73; font-style:italic; }
.l1-rag { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.l1-rag label { flex:1; min-width:110px; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; border:2px solid transparent; border-radius:10px; cursor:pointer; font-weight:700; font-size:14px; background:#fafbfc; transition:all 0.15s; }
.l1-rag input[type="radio"] { display:none; }
.l1-rag label[data-rag="GREEN"] { color:#2D5A3D; }
.l1-rag label[data-rag="AMBER"] { color:#8a4500; }
.l1-rag label[data-rag="RED"] { color:#c94f36; }
.l1-rag label[data-rag="ESCALATION"] { color:#8a2929; }
.l1-rag label:has(input:checked)[data-rag="GREEN"] { background:#e5f2ea; border-color:#2D5A3D; }
.l1-rag label:has(input:checked)[data-rag="AMBER"] { background:#fff2d6; border-color:#FAD55A; }
.l1-rag label:has(input:checked)[data-rag="RED"] { background:#ffe5e0; border-color:#c94f36; }
.l1-rag label:has(input:checked)[data-rag="ESCALATION"] { background:#ffd0d0; border-color:#8a2929; box-shadow:0 0 0 3px rgba(138,41,41,0.15); }
.l1-warning { padding:10px 14px; background:#FFE5E0; border-left:4px solid #c94f36; border-radius:0 8px 8px 0; font-size:13px; color:#8a2929; margin-top:8px; font-weight:600; }
/* Aim: Exceptional (owner, 11 Oct 2026). Every area folds; the summary line
   shows how many criteria and how many are rated so far. Print opens them all. */
.qa-aim-banner { background:linear-gradient(135deg, #FFF7E6, #FFF0EE); border:1.5px solid #f1d9a6; border-left:5px solid #c9a227; border-radius:0 12px 12px 0; padding:12px 16px; margin:0 0 18px; font-size:14px; line-height:1.55; color:var(--text); }
.qa-aim-banner a { color:#c94f36; font-weight:800; white-space:nowrap; }
.qa-area { margin:0 0 14px; }
.qa-area-head { display:flex; width:100%; align-items:center; flex-wrap:wrap; gap:6px 10px; cursor:pointer; font:inherit; font-family:'Baloo 2', sans-serif; font-weight:800; font-size:17px; padding:11px 14px; border-radius:10px; background:#fff; border:1.5px solid var(--border); border-left:6px solid var(--area-colour, #999); color:var(--text); text-align:left; box-shadow:var(--shadow-soft); }
.qa-area-head:hover { background:#fafbfc; }
.qa-area-head::before { content:'\25BE'; display:inline-block; width:14px; font-size:14px; color:var(--area-colour, #999); transition:transform .15s ease; }
.qa-area.is-collapsed .qa-area-head::before { transform:rotate(-90deg); }
.qa-area-count { margin-left:auto; font-family:Nunito, sans-serif; font-size:13px; font-weight:700; color:var(--text-dim); }
.qa-area-count.is-done { color:#2D5A3D; }
.qa-area-body { padding-top:12px; }
.qa-area.is-collapsed .qa-area-body { display:none; }
.qa-exc { font-size:13.5px; line-height:1.55; background:#FFF7E6; border-left:4px solid #c9a227; border-radius:0 10px 10px 0; padding:10px 14px; margin:0 0 14px; color:var(--text); }
.qa-strong-line { font-size:12.5px; line-height:1.5; color:#24502f; background:#F0F7F4; border-radius:8px; padding:7px 10px; margin:0 0 10px; }
@media print {
  .qa-area-body { display:block !important; }
  .qa-area-head { box-shadow:none; }
  .qa-area-head::before { display:none; }
}
#submitStatus { margin-top:16px; padding:14px 18px; border-radius:12px; font-size:14.5px; line-height:1.6; }
#submitStatus.status-ok { background:#e5f2ea; color:#2D5A3D; border-left:4px solid #2D5A3D; }
#submitStatus.status-err { background:#FFE5E0; color:#8a2929; border-left:4px solid #c94f36; }


/* ── Suggested criteria, and what a criterion means ──────────────────────
   Added 25 Oct 2026. The suggestion strip stops the same five criteria
   coming round every week; the folded "what this means" surfaces the
   interpretation, red flags and evidence that were already in
   qa-criteria.json but were not being shown. */
.l1-suggest {
  background: #F4FBF6; border: 1.5px solid #b9d8c4; border-radius: 12px;
  padding: 12px 14px; margin: 12px 0 14px;
}
.l1-suggest[hidden] { display: none; }
.l1-suggest-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.l1-suggest-head b { color: #2D5A3D; }
.l1-suggest-head span { font-size: 12px; color: var(--text-dim); }
.l1-suggest-head button {
  margin-left: auto; border: none; background: #2D5A3D; color: #fff;
  padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 12.5px;
  font-weight: 700; cursor: pointer;
}
.l1-suggest-head button:hover { background: #1c4d2b; }
.l1-suggest ul { list-style: none; margin: 0; padding: 0; }
.l1-suggest li { font-size: 13px; padding: 4px 0; border-bottom: 1px dashed #d9e8df; }
.l1-suggest li:last-child { border-bottom: none; }
.l1-suggest li b { color: #2b3b2e; }
.l1-suggest li span { color: var(--text-dim); }
.l1-suggest-note { margin: 8px 0 0; font-size: 12px; color: var(--text-dim); }

.l1-meaning { margin: 8px 0 10px; }
.l1-meaning > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: #2D5A3D;
  padding: 5px 0; list-style: revert;
}
.l1-meaning dl { margin: 6px 0 0; padding: 8px 12px; background: #fafcfa; border-radius: 10px; }
.l1-meaning dt {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #6b7a6e; margin-top: 8px;
}
.l1-meaning dt:first-child { margin-top: 0; }
.l1-meaning dd { margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: #3c4b40; }
.l1-meaning dd.good { color: #276438; }
.l1-meaning dd.bad { color: #B4432A; }

/* Linked from the managers' channel to one audit (25 Oct 2026). */
.r-linked {
  background: #F4FBF6; border-left: 4px solid #2D5A3D; border-radius: 0 10px 10px 0;
  padding: 10px 13px; margin-bottom: 12px; font-size: 13px; color: #3c5544;
}
.r-linked a { color: #276438; font-weight: 700; }
.r-linked-miss { background: #FFF8EC; border-left-color: #C98A1B; color: #6a5220; }

/* Save progress (25 Oct 2026). An L1 audit is twenty minutes of typing,
   often on a tablet that sleeps. */
.l1-draft {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid #dfe7e1; border-radius: 12px;
  padding: 10px 14px; margin: 12px 0 14px; font-size: 13px; color: var(--text-dim);
}
.l1-draft span { flex: 1; min-width: 180px; }
.l1-draft button {
  border: none; background: #2D5A3D; color: #fff; padding: 7px 13px;
  border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.l1-draft button:hover { background: #1c4d2b; }
.l1-draft button.ghost { background: #f1f5f1; color: #2b3b2e; }
@media print { .l1-draft { display: none !important; } }