/* AQcredix — internal audit.
   Colours come from the site's own theme tokens (styles.css) rather than a private
   palette, so this page follows light / dark / neon automatically. The earlier version
   hardcoded white cards and only overrode them under [data-theme="dark"], which left the
   whole page glaring white in the neon palette.

   The status tints are the one thing defined locally, because the Kamishibai convention
   is fixed — green / amber / red mean the same thing on screen and in the Excel export —
   but even those are re-tinted per theme so they sit on the surface instead of shouting
   off it. Status is never colour alone: every chip carries its letter. */

:root {
  --aud-ok-bg: var(--ok-tint);     --aud-ok-fg: var(--ok);     --aud-ok-line: var(--ok);
  --aud-warn-bg: var(--warn-tint); --aud-warn-fg: var(--warn); --aud-warn-line: var(--warn);
  --aud-bad-bg: var(--nc-tint);    --aud-bad-fg: var(--nc);    --aud-bad-line: var(--nc);
  --aud-na-bg: var(--border-soft); --aud-na-fg: var(--fg-faint);
  --aud-line: var(--border);
  --aud-soft: var(--border-soft);
  --aud-surface: var(--bg-elevated);
}

.aud-sub { color: var(--aud-na-fg); font-size: .92rem; margin: 4px 0 0; }
.aud-gh { margin: 26px 0 10px; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--aud-na-fg); }
.aud-empty { color: var(--aud-na-fg); max-width: 62ch; }
.aud-count { font-size: .8rem; background: var(--aud-soft); border-radius: 20px;
  padding: 2px 10px; vertical-align: middle; color: var(--aud-na-fg); }

/* ------------------------------- picker ------------------------------- */
.aud-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.aud-dept { text-align: left; background: var(--aud-surface); border: 1px solid var(--aud-line);
  border-radius: 10px; padding: 14px 15px; cursor: pointer; font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, transform .15s; }
.aud-dept:hover { border-color:var(--brand-2); transform: translateY(-1px); }
.aud-dept:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.aud-dept .n { font-weight: 600; }
.aud-dept .m { font-size: .8rem; color: var(--aud-na-fg); }
/* Secondary action inside a card: opens the printable blank checklist.
   Kept visually recessive so it doesn't compete with the primary start-audit
   affordance of the card body itself. */
.aud-dept-blank {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--aud-line);
  font-size: .78rem; font-weight: 500;
  color: var(--brand-2); text-decoration: none;
  align-self: flex-start;
}
.aud-dept-blank:hover { text-decoration: underline; }
.aud-dept-blank:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: 2px; }

/* ------------------------------ checklist ----------------------------- */
.aud-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.aud-headact { display: flex; gap: 8px; flex-wrap: wrap; }

.aud-quick { background: var(--aud-surface); border: 1px solid var(--aud-line);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.aud-quick summary { cursor: pointer; font-weight: 600; }
.aud-quick ul { columns: 2; column-gap: 28px; margin: 10px 0 2px; padding-left: 18px; font-size: .9rem; }
@media (max-width: 700px) { .aud-quick ul { columns: 1; } }

.aud-sticky { position: sticky; top: 0; z-index: 5; background: var(--bg);
  padding: 10px 0; border-bottom: 1px solid var(--aud-line); }
.aud-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.aud-chip { border: 1px solid var(--aud-line); background: transparent; color: inherit;
  border-radius: 20px; padding: 4px 12px; font-size: .84rem; cursor: pointer; }
.aud-chip.on { background:var(--accent-solid); border-color:var(--brand-2); color: var(--on-accent); }
#audQ { width: 100%; max-width: 340px; padding: 7px 11px; border: 1px solid var(--aud-line);
  border-radius: 8px; background: transparent; color: inherit; }

.aud-bar { height: 6px; background: var(--aud-soft); border-radius: 4px; overflow: hidden; margin: 8px 0 6px; }
.aud-bar i { display: block; height: 100%; background:var(--accent-solid); transition: width .25s; }
.aud-tallies { display: flex; gap: 12px; font-size: .82rem; flex-wrap: wrap; }
.aud-tallies .aud-compliant { color: var(--aud-ok-line); }
.aud-tallies .aud-partial { color: var(--aud-warn-line); }
.aud-tallies .aud-nc { color: var(--aud-bad-line); }
.aud-tallies .aud-na, .aud-tallies .aud-un { color: var(--aud-na-fg); }

.aud-row { display: grid; grid-template-columns: 1fr 320px; gap: 18px;
  background: var(--aud-surface); border: 1px solid var(--aud-line); border-left-width: 4px; border-radius: 10px;
  padding: 13px 15px; margin: 9px 0; outline: none; }
.aud-row:focus { box-shadow: 0 0 0 2px var(--accent-bright); }
.aud-row[data-status="compliant"] { border-left-color: var(--aud-ok-line); }
.aud-row[data-status="partial"] { border-left-color: var(--aud-warn-line); }
.aud-row[data-status="nc"] { border-left-color: var(--aud-bad-line); }
.aud-row[data-status="na"] { border-left-color: var(--fg-faint); }
.aud-row.aud-blocked { box-shadow: 0 0 0 2px var(--aud-bad-line); }
@media (max-width: 820px) { .aud-row { grid-template-columns: 1fr; } }

.aud-row-meta { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.aud-code { font-weight: 700; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.aud-ch, .aud-cat, .aud-sop, .aud-iv { font-size: .7rem; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 7px; border-radius: 4px; background: var(--aud-soft);
  color: var(--aud-na-fg); }
.aud-sop { background: var(--accent-bright-tint); color:var(--accent-text); }
.aud-el { margin: 0 0 5px; line-height: 1.45; }
.aud-std { margin: 0; font-size: .8rem; color: var(--aud-na-fg); }

.aud-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 7px; }
.aud-sb { border: 1px solid var(--aud-line); background: transparent; color: inherit;
  border-radius: 7px; padding: 9px 0; font-weight: 700; font-size: .85rem; cursor: pointer;
  min-height: 40px; }
.aud-sb.aud-compliant.on { background: var(--aud-ok-bg); color: var(--aud-ok-fg); border-color: var(--aud-ok-line); }
.aud-sb.aud-partial.on { background: var(--aud-warn-bg); color: var(--aud-warn-fg); border-color: var(--aud-warn-line); }
.aud-sb.aud-nc.on { background: var(--aud-bad-bg); color: var(--aud-bad-fg); border-color: var(--aud-bad-line); }
.aud-sb.aud-na.on { background: var(--aud-na-bg); color: var(--aud-na-fg); }

.aud-note { width: 100%; border: 1px solid var(--aud-line); border-radius: 7px;
  padding: 7px 9px; font: inherit; font-size: .87rem; background: transparent; color: inherit; resize: vertical; }
.aud-fix { display: grid; gap: 6px; margin-top: 7px; }
.aud-fix select, .aud-fix input { border: 1px solid var(--aud-line); border-radius: 7px;
  padding: 7px 9px; font: inherit; font-size: .87rem; background: transparent; color: inherit; }
/* The severity dropdown, specifically.
   `background: transparent` above is fine for the closed control but it is the reason the
   OPEN option list rendered white with near-white text — the dropdown looked empty until
   the cursor moved over an item and the browser drew its own blue highlight. The popup is
   drawn by the operating system, which decides light or dark from color-scheme and from
   the control's own resolved background, not from the page theme. Naming both here, at
   the specificity that beats the transparent rule, makes the list match the workspace.
   The options themselves are handled by the global `select option` rules in styles.css. */
.aud-fix select {
  background: var(--aud-surface);
  color: var(--fg);
  color-scheme: dark;
}
:root[data-theme="light"] .aud-fix select { color-scheme: light; }

.aud-kpis { list-style: none; padding: 0; margin: 10px 0 0; }
.aud-kpis li { padding: 6px 0; border-bottom: 1px solid var(--aud-line); font-size: .9rem; }
.aud-kpis label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }

.aud-blockmsg { border: 1px solid var(--aud-bad-line); background: var(--aud-bad-bg);
  color: var(--aud-bad-fg); border-radius: 10px; padding: 13px 16px; margin: 14px 0; }
.aud-blockmsg ul { margin: 8px 0 0; padding-left: 20px; }

/* ------------------------------- report ------------------------------- */
.aud-rep-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.aud-rep-grid { display: grid; gap: 14px; grid-template-columns: 300px 1fr; margin-bottom: 14px; }
@media (max-width: 800px) { .aud-rep-grid { grid-template-columns: 1fr; } }
.aud-card { background: var(--aud-surface); border: 1px solid var(--aud-line);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.aud-card h3 { margin: 0 0 10px; font-size: 1rem; }
.aud-score { text-align: center; }
.aud-band { display: inline-block; padding: 4px 14px; border-radius: 20px; font-weight: 600;
  margin: 8px 0 6px; font-size: .9rem; }
.aud-band-strong { background: var(--aud-ok-bg); color: var(--aud-ok-fg); }
.aud-band-workable { background: var(--aud-warn-bg); color: var(--aud-warn-fg); }
.aud-band-notready, .aud-band-substantial { background: var(--aud-bad-bg); color: var(--aud-bad-fg); }
.aud-mini { display: flex; justify-content: center; gap: 18px; margin: 12px 0 0; }
.aud-mini dt { font-size: .7rem; text-transform: uppercase; color: var(--aud-na-fg); }
.aud-mini dd { margin: 2px 0 0; font-weight: 600; }

.aud-legend { list-style: none; padding: 0; margin: 0; }
.aud-legend li { display: flex; align-items: center; gap: 9px; padding: 6px 0;
  border-bottom: 1px solid var(--aud-line); }
.aud-legend b { margin-left: auto; }
.sw { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.sw.ok { background: var(--aud-ok-line); } .sw.warn { background: var(--aud-warn-line); }
.sw.bad { background: var(--aud-bad-line); } .sw.na { background: var(--fg-faint); }
.sw.un { background: transparent; border: 1px solid var(--aud-line); }
.aud-flag { margin: 10px 0 0; font-size: .87rem; color: var(--aud-bad-fg); }
.aud-caveat { font-size: .84rem; color: var(--aud-na-fg); margin: 10px 0 0; }

.aud-heat { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
.aud-heat-cell { border-radius: 8px; padding: 9px 6px; text-align: center; display: grid; gap: 2px; }
.aud-heat-cell.ok { background: var(--aud-ok-bg); color: var(--aud-ok-fg); }
.aud-heat-cell.warn { background: var(--aud-warn-bg); color: var(--aud-warn-fg); }
.aud-heat-cell.bad { background: var(--aud-bad-bg); color: var(--aud-bad-fg); }
.aud-heat-cell .ch { font-weight: 700; font-size: .85rem; }
.aud-heat-cell .pc { font-size: 1.05rem; font-weight: 700; }
.aud-heat-cell .ct { font-size: .66rem; opacity: .8; }

.aud-tablewrap { overflow-x: auto; }
.aud-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.aud-table th { text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--aud-na-fg); border-bottom: 1px solid var(--aud-line);
  padding: 7px 9px; white-space: nowrap; }
.aud-table td { padding: 9px; border-bottom: 1px solid var(--aud-line); vertical-align: top; }
.aud-ev { font-size: .82rem; color: var(--aud-na-fg); margin-top: 3px; }
.aud-codes { font-family: ui-monospace, Menlo, monospace; font-size: .78rem; }
.aud-chip.aud-nc, .aud-chip.aud-partial { }
.aud-table .aud-chip { border-radius: 5px; padding: 2px 7px; font-weight: 700; font-size: .75rem; }
.aud-table .aud-chip.aud-nc { background: var(--aud-bad-bg); color: var(--aud-bad-fg); }
.aud-table .aud-chip.aud-partial { background: var(--aud-warn-bg); color: var(--aud-warn-fg); }
.aud-sev { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 4px; background: var(--aud-soft); }
.aud-sev-critical { background: var(--aud-bad-bg); color: var(--aud-bad-fg); font-weight: 700; }
.aud-sev-major { background: var(--aud-warn-bg); color: var(--aud-warn-fg); font-weight: 600; }
.aud-next { margin: 0; padding-left: 20px; }
.aud-next li { margin-bottom: 6px; }

.aud-records .aud-n { font-weight: 700; text-align: center; }
.aud-records .aud-compliant { color: var(--aud-ok-line); }
.aud-records .aud-partial { color: var(--aud-warn-line); }
.aud-records .aud-nc { color: var(--aud-bad-line); }
.aud-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.btn-sm { padding: 4px 9px !important; font-size: .78rem !important; }
.aud-del:hover { color: var(--aud-bad-fg); border-color: var(--aud-bad-line); }
.aud-inprog { font-size: .7rem; background: var(--aud-warn-bg); color: var(--aud-warn-fg);
  border-radius: 4px; padding: 1px 6px; }
.aud-spark { color:var(--accent-text); opacity: .85; }

@media print {
  .no-print, #site-header, #site-footer, .ws-nav, .aud-rep-actions { display: none !important; }
  .aud-card { break-inside: avoid; border-color: #ccc; }
  .aud-report { font-size: 11pt; }
  a[href]:after { content: ""; }
}

/* ---------- Walk-the-floor result on the finished report ----------
 * What the department physically has is the first thing an assessor establishes, so it gets
 * a panel of its own rather than a line in a summary. Present and absent are listed by name
 * side by side: "9 of 13" tells nobody what to go and fix.
 *
 * Colour never carries the meaning alone — each column is titled, and the absent list is
 * marked with a symbol as well as a colour, so the printed and greyscale versions survive.
 */
.aud-quickrep .aud-qbar{
  height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin:4px 0 10px;
}
.aud-quickrep .aud-qbar span{
  display:block;height:100%;border-radius:999px;background:var(--ok);
  /* Grows on reveal so the number is read rather than skimmed past. */
  animation:aud-qgrow .9s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes aud-qgrow{from{width:0 !important;}}
.aud-qcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:6px;}
.aud-qcols h4{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);
  font-family:var(--font-mono);margin:0 0 8px;
}
.aud-qlist{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:13.5px;}
.aud-qlist li{display:flex;gap:9px;align-items:flex-start;line-height:1.5;}
.aud-qlist li::before{flex-shrink:0;font-weight:700;}
.aud-qlist.ok li::before{content:"\2713";color:var(--ok);}
.aud-qlist.bad li::before{content:"\00D7";color:var(--nc);}
.aud-qlist.bad li{color:var(--fg);}

@media (prefers-reduced-motion:reduce){
  .aud-quickrep .aud-qbar span{animation:none;}
}
@media print{
  .aud-quickrep .aud-qbar span{animation:none;}
  .aud-qcols{grid-template-columns:1fr 1fr;}
}

/* ---------- Quick list: tick plus a four-way status ----------
 * Presence and compliance are different questions. The tick is the fast path for "fully in
 * place"; the four buttons are how an auditor says it exists but with gaps, is missing, or
 * does not apply here. They are one value with two ways in, so they can never disagree.
 *
 * The letters carry the meaning, not the colour — this has to survive greyscale printing and
 * colour vision deficiency, and it is filled in on a phone on a ward.
 */
.aud-qlist-edit{list-style:none;padding:0;margin:0;display:grid;gap:2px;}
.aud-qlist-edit li{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--border);
}
.aud-qlist-edit li:last-child{border-bottom:0;}
.aud-qtick{
  display:flex;align-items:flex-start;gap:9px;flex:1;min-width:190px;cursor:pointer;
  font-size:14px;line-height:1.45;
}
.aud-qtick input{margin-top:2px;flex-shrink:0;width:17px;height:17px;accent-color:var(--ok);cursor:pointer;}

.aud-qstates{display:flex;gap:4px;flex-shrink:0;}
.aud-qst{
  min-width:38px;height:30px;padding:0 8px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--border);background:var(--surface-1);color:var(--fg-muted);
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.03em;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.aud-qst:hover{border-color:var(--brand-2);color:var(--fg);}
.aud-qst:focus-visible{outline:2px solid var(--brand-2);outline-offset:1px;}
.aud-qst.is-on.aud-qst-compliant{background:var(--ok-tint);color:var(--ok);border-color:var(--ok);}
.aud-qst.is-on.aud-qst-partial{background:var(--warn-tint);color:var(--warn);border-color:var(--warn);}
.aud-qst.is-on.aud-qst-nc{background:var(--nc-tint);color:var(--nc);border-color:var(--nc);}
.aud-qst.is-on.aud-qst-na{background:var(--surface-2);color:var(--fg);border-color:var(--fg-faint);}

/* A ward round happens on a phone. The states stay reachable without a horizontal scroll. */
@media (max-width:560px){
  .aud-qlist-edit li{gap:7px;}
  .aud-qtick{min-width:100%;}
  .aud-qstates{width:100%;}
  .aud-qst{flex:1;min-width:0;height:34px;}
}
@media (prefers-reduced-motion:reduce){
  .aud-qst{transition:none;}
}

/* The report's walk-the-floor groups gained two more states. Each is marked with a symbol as
   well as a colour, so the printed and greyscale versions still read. */
.aud-qlist.warn li::before{content:"\25D1";color:var(--warn);}   /* half-filled: in place, with gaps */
.aud-qlist.un li::before{content:"\003F";color:var(--fg-faint);} /* not scored */
.aud-qlist.na li::before{content:"\2013";color:var(--fg-faint);} /* not applicable */
.aud-qlist.un li,.aud-qlist.na li{color:var(--fg-muted);}