/* ══════════════════════════════════════════════════════════════════════
   Folding criterion cards, for the L1, L2 and L3 audits.

   An audit page is long: every criterion carries its focus, a staff question,
   what strong practice looks like, what to sample, five rating buttons, two
   text areas and four action fields. Opened all at once, finding the one you
   are standing in front of means scrolling past everything else.

   The cards arrive SHUT. The heading keeps the id, the risk and — the part
   that makes shutting them safe — the rating, so a closed card still says
   whether it has been done.

   NOTHING IS RE-RENDERED. Folding is a class on the card and nothing else:
   the textareas, the dates and the chosen radios stay exactly where they are
   in the DOM. That matters more here than anywhere else on the site, because
   an audit is typed into over an hour and L1 and L2 have already lost typed
   ratings once to a redraw.

   Loaded with audit-fold.js by all three audit pages. One copy, because the
   same card markup is in all three and three copies is how the hub banner bug
   happened.
   ══════════════════════════════════════════════════════════════════════ */

/* The heading becomes the control. */
.l1-finding > .l1-finding-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 2px 0;
  user-select: none;
}
.l1-finding > .l1-finding-title:hover { text-decoration: underline; }
.l1-finding > .l1-finding-title:focus-visible {
  outline: 3px solid #1f7a73;
  outline-offset: 3px;
  border-radius: 6px;
}

.qa-caret {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--area-colour, #777);
  transition: transform .15s ease;
}
.l1-finding:not(.is-shut) > .l1-finding-title .qa-caret { transform: rotate(90deg); }

/* What the card says about itself while shut. Pushed to the right so the id
   stays where the eye expects it. */
.qa-state {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 50px;
  border: 1.5px solid #D9E3DC;
  background: #F6F9F7;
  color: #6B7A71;
  white-space: nowrap;
}
.l1-finding[data-rag="GREEN"]      > .l1-finding-title .qa-state { background:#EAF7EE; border-color:#B6DEC3; color:#1F6B37; }
.l1-finding[data-rag="AMBER"]      > .l1-finding-title .qa-state { background:#FFF6E2; border-color:#EDD39A; color:#8A6410; }
.l1-finding[data-rag="RED"]        > .l1-finding-title .qa-state { background:#FDEDEA; border-color:#F0BDB1; color:#A8371E; }
.l1-finding[data-rag="ESCALATION"] > .l1-finding-title .qa-state { background:#FBE9EE; border-color:#E9A9BC; color:#9B1B3F; font-weight:900; }
.l1-finding[data-rag="NOT SEEN"]   > .l1-finding-title .qa-state { background:#F1F3F5; border-color:#D5DBDF; color:#5E6B73; }

/* A card with notes but no rating is half-done, and worth seeing from shut. */
.qa-state[data-part="1"]::after { content: ' · notes'; font-weight: 700; opacity: .85; }

/* Everything except the heading folds away. Display, not height: there is no
   animation to get wrong and nothing shifts when a long card opens. */
.l1-finding.is-shut > *:not(.l1-finding-title) { display: none; }
/* The card itself gets tighter when shut, so a shut list reads as a list. */
.l1-finding.is-shut { padding-top: 10px; padding-bottom: 10px; }

/* Opening everything to print is the whole point of printing it. */
@media print {
  .l1-finding.is-shut > *:not(.l1-finding-title) { display: revert; }
  .qa-caret, .qa-state { display: none; }
  .l1-finding > .l1-finding-title { cursor: auto; }
}