/* ── ALERTS CENTER ───────────────────────────────────────────────────
   Full-screen alert list (js/features/alerts-center.js).

   Tokens: the --bg / --surface / --border / --muted / --text family
   ONLY, because body.dark-mode flips those. Do NOT style this from the
   Clinical Clarity --color-* palette, which is not flipped — same rule
   as skeletons.css, file-viewer.css and med-alerts.css.
   --color-tertiary for the focus ring and the selected chip is the one
   allowance (same allowance those files take).

   z-index 8900: above modals (300), BELOW the med alert overlay (9000)
   so a med alert tapped from here is never underneath it, below the
   resident action sheet (9100), and far below the toast (9999), the
   file viewer (11000) and the terms gate (12000).

   ⚠ SAFE AREAS ARE NOT COSMETIC. In a home-screen PWA there is no
   browser chrome above or below us, so without env(safe-area-inset-top)
   the Close button sits under the status bar / Dynamic Island and
   CANNOT BE TAPPED, and without inset-bottom the last alert row sits
   under the iPhone home bar. That is the trap the file viewer fix
   documented; do not remove these. */

#alerts-center { display: none; }

#alerts-center.ac-shown {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 8900;
  background: rgba(0, 0, 0, .55);
  align-items: stretch;
  justify-content: center;
}

body.ac-lock { overflow: hidden; }

.ac-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  background: var(--bg);
  color: var(--text);
  /* Read at arm's length, on a phone, by someone mid-shift. */
  font-size: 17px;
  line-height: 1.4;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── header ──────────────────────────────────────────────────────── */

.ac-top {
  flex: 0 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px 10px;
}

/* Close is FIRST in the DOM and first in the tab order, has a text
   label (never icon-only) and clears the 44px touch target. */
.ac-close {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.ac-close:hover { background: var(--border); }
.ac-close:focus-visible { outline: 3px solid var(--color-tertiary); outline-offset: 2px; }
.ac-close .lucide { width: 18px; height: 18px; }

.ac-h {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ac-h-sub { font-size: 14px; font-weight: 500; color: var(--muted); }

/* ── filters ─────────────────────────────────────────────────────── */

.ac-filters {
  flex: 0 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 14px 10px;
}

/* Horizontal scroll rather than wrapping: the type bar grows with the
   number of alert types, and a bar that rewraps moves every chip under
   the user's thumb when a count changes. */
.ac-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ac-bar::-webkit-scrollbar { display: none; }
.ac-bar-type { border-top: 1px dashed var(--border); }

.ac-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 13px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 99px;
  cursor: pointer;
}
.ac-chip:hover { background: var(--border); }
.ac-chip:focus-visible { outline: 3px solid var(--color-tertiary); outline-offset: 2px; }
.ac-chip .lucide { width: 17px; height: 17px; }

.ac-chip.ac-on {
  color: #fff;
  background: var(--color-tertiary);
  border-color: var(--color-tertiary);
}
.ac-chip.ac-on:hover { background: var(--color-tertiary-hover); }

.ac-chip-n {
  font-size: 13px;
  font-weight: 800;
  min-width: 22px;
  padding: 1px 6px;
  text-align: center;
  border-radius: 99px;
  background: var(--border);
  color: var(--text);
}
.ac-chip.ac-on .ac-chip-n { background: rgba(255, 255, 255, .28); color: #fff; }

/* ── list ────────────────────────────────────────────────────────── */

/* ⚠ min-height: 0 so the list can shrink below its content and scroll
   INSIDE the dialog. A flex item's automatic minimum size is already
   zero for a scroll container, but stating it keeps the desktop
   max-height honest if the overflow ever changes. */
.ac-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px calc(14px + env(safe-area-inset-bottom));
}

/* Compact enough that seven alerts fit the desktop dialog without
   scrolling, which is the whole point of the dialog. The 48px floor is
   the touch target — the natural height is ~60px, so it only ever
   binds on a one-line row. */
.ac-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  min-height: 48px;
  padding: 8px 11px;
  margin-bottom: 5px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ac-row.ac-can { cursor: pointer; }
.ac-row.ac-can:hover { background: var(--bg); }
.ac-row.ac-can:focus-visible { outline: 3px solid var(--color-tertiary); outline-offset: 2px; }

/* The same four status hues the dashboard rows and MAR cells use —
   literal because they must read identically in both themes. */
.ac-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: #9A948C;
}
.ac-red   .ac-dot { background: #E24B4A; }
.ac-amber .ac-dot { background: #BA7517; }
.ac-grey  .ac-dot { background: #9A948C; }

.ac-red   { border-left: 4px solid #E24B4A; }
.ac-amber { border-left: 4px solid #BA7517; }
.ac-grey  { border-left: 4px solid #9A948C; }

.ac-body { flex: 1 1 auto; min-width: 0; }

/* Type label and name on ONE line, baseline-aligned. The label keeps
   its width and the name takes the rest and wraps inside its own
   column, so a long resident name never pushes the label out of place.

   ⚠ An explicit line-height, because baseline-aligning an 11px label
   against a 16px name inflates the line box by the difference in
   descender offsets — the panel's 1.4 turned a 22px line into 26px,
   which is 4px on every row. */
.ac-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  line-height: 1.25;
}

.ac-type {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ac-type .lucide { width: 13px; height: 13px; }

.ac-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  word-break: break-word;
}
.ac-desc {
  display: block;
  margin-top: 1px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
  word-break: break-word;
}

/* A grouped row's item names — med names, form names, certification
   names: one line, truncated by the renderer with "+N more" and by CSS
   as a backstop, so a long name list can never make the row taller than
   two lines of detail. */
.ac-items {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-chev {
  flex: 0 0 auto;
  align-self: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

/* A role that cannot open the destination still sees the alert — it
   just does not get an action that would end in "no permission". */
.ac-locked {
  flex: 0 0 auto;
  align-self: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 99px;
  padding: 3px 9px;
  white-space: nowrap;
}

.ac-empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.ac-empty .lucide { width: 40px; height: 40px; }
.ac-empty-t { margin-top: 10px; font-size: 19px; font-weight: 700; color: var(--text); }
.ac-empty-s { margin-top: 4px; font-size: 15px; }

/* ── the dashboard launcher ──────────────────────────────────────── */

/* ⚠ NO NEGATIVE MARGIN, deliberately. Bleeding a hover background into
   the card's gutter is exactly what clipped the alert dots and knocked
   the tappable rows 6px out of line (see the note on .ma-alert-row in
   css/med-alerts.css). This heading sits flush with the rows beneath
   it and shows it is tappable with an underline instead. */
.ac-launch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
}
.ac-launch:hover { text-decoration: underline; }
.ac-launch:focus-visible { outline: 3px solid var(--color-tertiary); outline-offset: 2px; }
.ac-launch-chev { width: 16px; height: 16px; color: var(--muted); }

/* The dashboard card's rows are tappable too, and share this file's
   "No access" pill (.ac-locked above) so the two surfaces read the
   same. The chevron is its own class because the card is dense — same
   signal, smaller. ⚠ Trailing flex children ONLY: the dot and the text
   block must keep their x positions, which alert_row_align_dom_test.js
   measures. */
.ma-alert-chev {
  flex: 0 0 auto;
  align-self: center;
  width: 16px;
  height: 16px;
  color: var(--muted);
}
#alerts-body .ac-locked { align-self: center; font-size: 11px; }

/* Brief highlight on the row an alert jumped to — the same treatment
   and the same duration as the MAR card's ma-flash. */
.ac-flash {
  box-shadow: 0 0 0 3px var(--color-tertiary);
  transition: box-shadow .4s;
}
@media (prefers-reduced-motion: reduce) {
  .ac-flash { transition: none; }
}

/* ── DESKTOP: a centred dialog, not a full-height column ─────────────
   Above 768px this is a proper pop-up — at most 720px wide and 80vh
   tall, centred, rounded, with the dimmed backdrop visible all round
   it. The header and both filter bars are already flex: 0 0 auto and
   the list is the only scroller, so capping the panel's height is all
   it takes for the filters to stay put while the list scrolls under
   them.

   At 768px and below NOTHING changes: the panel stays full-screen,
   because on a phone a centred card with a visible backdrop is just a
   smaller phone screen, and the safe-area insets above only matter in
   the full-screen case.

   ⚠ overflow: hidden is what stops the header's --surface background
   squaring off the rounded top corners. */
@media (min-width: 769px) {
  #alerts-center.ac-shown {
    align-items: center;
    padding: 24px;
  }
  .ac-panel {
    max-width: 720px;
    max-height: 80vh;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  }
  /* The dialog's height is capped, so every pixel of chrome is a pixel
     of list. Close and the title share one row here (they stay stacked
     on a phone, where there is height but not width), and the chips
     lose the touch-target padding they only need on a phone. Together
     that is ~55px — the difference between five alerts visible and
     seven. Close is still FIRST in the DOM and first in the tab order;
     only its position changed. */
  .ac-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
  }
  .ac-h { margin-top: 0; font-size: 20px; }
  .ac-bar { padding: 6px 0 2px; }
  .ac-chip { min-height: 34px; }
}

@media (max-width: 600px) {
  .ac-panel { font-size: 18px; }
  .ac-h { font-size: 22px; }
  .ac-title { font-size: 17px; }
}

/* ── THE GROUP SHEET's ITEM LIST ──────────────────────────────────────
   Everything else about the sheet — the container, the box, Close, the
   head, the badge, the "Go to MAR" button — is the .ma-* shell in
   css/med-alerts.css, which names #ac-group-sheet alongside the med
   overlay. ONLY the list below is this file's, so there is one
   definition of the shell and the two cannot drift.

   ⚠ NO NEGATIVE MARGINS HERE EITHER (see the .ac-launch note above and
   the .ma-alert-row note in css/med-alerts.css). */

.acg-sum {
  margin: 14px 0 6px;
  font-size: 19px;
  font-weight: 700;
  word-break: break-word;
}

.acg-items { margin-top: 4px; }

/* Items are read at arm's length on a phone, so they clear 48px and
   keep the shell's large type. */
.acg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-bottom: 6px;
  padding: 9px 11px;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.acg-can { cursor: pointer; }
.acg-can:hover { background: var(--border); }
.acg-can:focus-visible { outline: 3px solid var(--color-tertiary); outline-offset: 2px; }

.acg-body { flex: 1 1 auto; min-width: 0; }
.acg-name { display: block; font-size: 17px; font-weight: 700; word-break: break-word; }
.acg-dose { font-size: 15px; font-weight: 500; color: var(--muted); }
.acg-status {
  display: block;
  margin-top: 1px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
  word-break: break-word;
}
.acg-chev {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

@media print {
  #alerts-center.ac-shown { display: none !important; }
}