/* shared/carer-verification.css
 *
 * WHAT HIBANT HAS CHECKED. Grace's own record of it on her profile, and the
 * admin queue of what is waiting to be checked. Written 31 Aug 2026.
 *
 * ── THIS FILE DID NOT EXIST UNTIL TONIGHT ───────────────────────────────────
 *
 * shared/carer-verification.js writes THIRTY class names and not one of them was
 * defined in any stylesheet anywhere in the repository. Both of its screens have
 * been live since 29 Aug wearing only the `.ds-*` classes they borrow.
 *
 * ON THE PORTAL that is survivable: `.ds-card`, `.ds-meta` and `.ds-btn` carry
 * the carer's own screen and it loses only its layout.
 *
 * ON ADMIN IT IS NOT, because admin.html does not load hibant-ds.css either.
 * MEASURED on the rendered page before this file: the verification cards had no
 * background, no border, no padding and no radius, and the Checked and Send back
 * buttons were NATIVE BROWSER BUTTONS, grey, black text, zero padding, zero
 * min-height. An admin approving somebody's DBS check on default form controls.
 *
 * IT WAS INVISIBLE TO THE GUARD THAT EXISTS FOR IT. That rule reads
 * `fs.existsSync(base + '.css')`, so it catches a stylesheet that exists and was
 * not linked, and cannot see one that was never written. A forgotten link and a
 * stylesheet nobody wrote produce the identical screen. A second rule now checks
 * whether ANYTHING defines the classes a module writes.
 *
 * ── THE .ds-* BLOCK AT THE BOTTOM IS A SECOND COPY, AND I AM SAYING SO ───────
 *
 * portal-admin-notes.css already redefines card and button under `.an` for the
 * same reason. This scopes them under `.cvq`. That is two copies of one idea on
 * one page, which the vault's own rule calls accretion.
 *
 * THE REAL FIX IS TO SCOPE hibant-ds.css. 102 of its selectors are not under
 * .hds, and six of those class names are already on admin markup, `.btn` alone
 * 63 times, so admin cannot simply load it. Prefixing those 102 is mechanical;
 * proving nothing on the seven pages that DO load it breaks is not, and that is
 * a job with its own measurement rather than one to do in passing tonight.
 * Until then, this comment is the note that says why there are two.
 */

/* ── HER OWN RECORD ─────────────────────────────────────────────────────── */

.cv { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 46rem; }
/* .cv .cv__h, NOT .cv__h. It sits on an <h2>, and `.hds h2` weighs (0,1,1)
   against a bare class's (0,1,0), so on portal.html the size written here would
   never have applied. Caught by test/design-system.test.js before it rendered. */
.cv .cv__h { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--t1); margin: 0; }
.cv__lead { margin: 0; }
.cv__back { margin: 0; }
.cv__end { text-align: left; }
.cv__problem { color: var(--alert); font-weight: 700; }

/* ONE ITEM. The label and its state share a line; everything under it is the
   sentence about what Hibant actually keeps, which is the point of the screen. */
.cv-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.cv-item__label { font-size: var(--fs-body); font-weight: 700; color: var(--t1); }
.cv-item__why { margin-top: var(--sp-2); }
/* WHAT HIBANT HOLDS, set apart from what it asks for. These two sentences sit
   next to each other and say different things, and undifferentiated they read as
   one paragraph. */
.cv-item__holds {
  margin-top: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--bd-strong);
}
.cv-item__expiry, .cv-item__soon { margin-top: var(--sp-2); }

/* A FIELD. Label above, input below, hint under that, in that order, because a
   hint above the box is read before the question it answers. */
.cv-field { margin-top: var(--sp-4); }
.cv-field__label { display: block; font-weight: 700; color: var(--t1); margin-bottom: var(--sp-1); }
.cv-field__input {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--control-bd, var(--bd-strong));
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--t1);
  font-family: inherit;
  font-size: var(--fs-body);
}
.cv-field__input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cv-field__hint { margin-top: var(--sp-1); }
.cv-field__problem { color: var(--alert); font-weight: 700; margin-top: var(--sp-2); }
.cv-field__choices { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.cv-field__confirm { margin-top: var(--sp-2); }

.cv-ref__h { margin-bottom: var(--sp-2); }

/* ── WHERE SHE IS UP TO, drawn above the eight cards ───────────────────────
   .ds-hero carries the ground and the type colour. Everything here is the
   three things it does not know about: the sentence under the title, the
   count, and the bar. NOTHING here redefines a card, a button or a meta line,
   which this file learned the hard way and says so at the bottom. */
.cvj__body { margin: var(--sp-2) 0 0; color: var(--t2); max-width: var(--portal-reading); }

.cvj__count {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-min); letter-spacing: .04em; text-transform: uppercase;
  color: var(--t3); font-variant-numeric: tabular-nums;
}
/* THE BAR IS DECORATION ON TOP OF THE COUNT, never instead of it. A bar with
   no number is a shape, and a screen reader reads nothing at all, which is why
   the count is real text above it and the bar itself carries the same words in
   an aria-label. */
.cvj__bar {
  height: 6px; border-radius: 3px; background: var(--control-bd);
  overflow: hidden; max-width: 22rem;
}
.cvj__bar > span { display: block; height: 100%; background: var(--brand); border-radius: 3px; }

/* SOMETHING CAME BACK TO HER, so the accent is the one the rest of the product
   uses for that, and the count stops leading. */
.cvj--attention .cvj__bar > span { background: var(--rust); }

.cvj .ds-actions { margin-top: var(--sp-4); }

/* ── THE ADMIN QUEUE ───────────────────────────────────────────────────── */

.cvq { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 52rem; }
.cvq > h2 { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--t1); margin: 0; }
.cvq > p { margin: 0; }
.cvq__problem { color: var(--alert); font-weight: 700; }

.cvq__who { font-size: var(--fs-body); color: var(--t2); margin-bottom: var(--sp-3); }
.cvq__who strong { color: var(--t1); }

/* HER ANSWERS, which are the whole point of a review, as a description list
   rather than a run of paragraphs. */
.cvq__answers { margin: 0; }
.cvq__answers dt {
  font-size: var(--fs-min);
  color: var(--t3);
  text-transform: capitalize;
  margin-top: var(--sp-2);
}
.cvq__answers dd {
  font-size: var(--fs-body);
  color: var(--t1);
  margin: 0 0 var(--sp-1);
  font-variant-numeric: tabular-nums;
}

/* WHOEVER HAS FINISHED COMES FIRST. Its own stacking context, because .cvq
   sets the gap on ITS OWN children and this block's h3, sentence and cards are
   one level further down, so without this they would sit flush against each
   other while everything around them breathed. */
.cvq__ready { display: flex; flex-direction: column; gap: var(--sp-4); }
.cvq__ready > h3 {
  font-family: var(--font-display); font-size: var(--fs-h3);
  color: var(--t1); margin: 0;
}
.cvq__ready > p { margin: 0; }

.cvq__run { margin-top: var(--sp-3); }
.cvq__run a { color: var(--brand); font-weight: 700; }
.cvq__reason { margin-top: var(--sp-4); border-top: 1px solid var(--bd); padding-top: var(--sp-3); }
.cvq__reason[hidden] { display: none; }

/* TURNING SOMEBODY AWAY, which is the heavier of the two and reads as such.
   Same shape as the reason box above it, with the alert edge, because these are
   the only two controls on this screen a person cannot undo from a screen. */
.cvq__decline {
  margin-top: var(--sp-4);
  border-top: 2px solid var(--alert);
  padding-top: var(--sp-3);
}
.cvq__decline[hidden] { display: none; }
.cvq__decline .ds-meta { margin: var(--sp-1) 0 var(--sp-2); }

/* ── THE PRIMITIVES CAME OUT, 31 Aug 2026, AND THIS IS THE POINT OF SCOPING ──
   This file carried its own .cvq .ds-card, .ds-meta, .ds-actions and .ds-btn,
   written the same evening, purely because admin.html could not load
   hibant-ds.css: 103 of that file's selectors had generic names and admin markup
   uses .btn sixty-three times.

   ALL 97 ARE SCOPED UNDER .hds NOW, admin loads the design system, and admin
   deliberately does not carry that wrapper, so it gets the .ds-* components and
   none of the generic names.

   AND THE COPIES HAD ALREADY DRIFTED, which is the whole argument in one line:
   the card here bordered with --bd where the real one uses --bd-strong, and the
   action row used --sp-3 where the real one uses --tap-gap. Two definitions of
   one idea, four hours old, already disagreeing. */