/* ============================================================
   Bia — Banner: the one notice box of the app
   ============================================================

   Every box that tells the user something sits in this component: a page
   banner over a list or grid (the lab's MRW pickups, the agenda booking for a
   patient), and a notice inside a form, modal, card or sheet (a warning, an
   instruction, a refusal). The look is the lab's pickups banner: tinted box,
   a thick left edge, bold title, actions on the right.

   Two tones, and only two (decision Pedro, 2026-10-18):
     - amber (the default) — everything that asks for attention: warnings,
       instructions, state;
     - clay, the design's red (`banner--error`) — a refusal or a failure:
       nothing was saved.
   See ADR 0017.

   Anatomy — every part but the box is optional:

     <div class="banner [banner--error] [banner--action]" role="status|alert">
       <span class="banner__ico" aria-hidden="true">{{ icon.alert(15) }}</span>
       <span class="banner__count">7</span>
       <div class="banner__body">
         <p class="banner__title">One bold line.</p>
         <p class="banner__text">The detail, in regular weight.</p>
         <ul class="banner__list"><li>…</li></ul>
       </div>
       <div class="banner__actions">…buttons (.btn)…</div>
     </div>

   `banner--action`: the whole banner is the control (it opens something), so
   it takes the pointer and the hover. Its call-to-action is then a look-alike
   `.banner__go`, not a nested button.

   Loaded by every document head (base.html, mobile/base_mobile.html and the
   two login pages), so a modal partial or an HTMX-injected refusal can use it
   anywhere without a page sheet (ADR-0014). It loads BEFORE the glue and page
   sheets, so a context adjusts a banner with a rule of the same weight. Outer
   spacing: a banner keeps 12px below it unless it is the last thing in its box;
   a context that lays its children out with `gap` resets that margin. */

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--c-pending-border);
  border-left: 4px solid var(--amber-500);
  border-radius: var(--r-md);
  background: var(--c-pending-bg);
  color: var(--c-pending);
  font-size: var(--t-sm);
  line-height: 1.4;
  text-align: left;
}
.banner:last-child { margin-bottom: 0; }
/* A class `display` beats the UA's `[hidden]` — banners toggled by script
   (the RX consent note, #917) must still disappear. */
.banner[hidden] { display: none; }
.banner--error {
  border-color: var(--clay-200);
  border-left-color: var(--clay-500);
  background: var(--clay-50);
  color: var(--clay-700);
}

/* A banner with more than a line lines its icon up with the title, not with
   the middle of the paragraph; the actions stay centred. */
.banner:has(.banner__text, .banner__list) { align-items: flex-start; }
.banner__ico { display: inline-flex; flex: none; }
.banner:has(.banner__text, .banner__list) > .banner__ico { margin-top: 2px; }

.banner__count {
  flex: none;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--amber-500);
  color: var(--text-inverse);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.banner--error .banner__count { background: var(--clay-500); }

.banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.banner__title {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
}
.banner__text { margin: 0; }
.banner__list { margin: 2px 0 0; padding-left: 18px; }
.banner__list li + li { margin-top: 2px; }

.banner__actions {
  flex: none;
  align-self: center;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
/* Actions under the text, for a narrow box (the agenda's confirm step). */
.banner__body > .banner__actions {
  align-self: flex-end;
  margin: 8px 0 0;
}
/* The ×: closes the banner (the agenda booking). */
.banner__x {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.banner__x:hover { background: var(--amber-100); }
.banner--error .banner__x:hover { background: var(--clay-100); }
.banner__x:focus-visible { outline: none; box-shadow: var(--ring); }

/* The whole banner is the control. */
.banner--action { cursor: pointer; }
.banner--action:hover { border-color: var(--amber-500); }
.banner--action:focus-visible { outline: none; box-shadow: var(--ring); }
.banner__go {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--btn-primary-bg);
  color: var(--text-inverse);
  font-weight: 600;
}
.banner--action:hover .banner__go { background: var(--btn-primary-bg-hover); }