/* THE PATIENT'S QUEUE HEADINGS.
   New sheet 2026-09-07, following the convention: one-off css lives beside the section it styles.
   ⭐ The item title's own comment recorded half of this already - "an id-scoped h4 margin rule in
   index.css beats a utility ... the title a full 17px against its 15". The margin was forced with
   `!important` and the SIZE was left broken. Both belong here, and neither needs forcing. */
/* 🔻 2026-09-08 - MEASURED OFF THE RENDERED DECK, not eyeballed and not read off its
   stylesheet. Spencer: "Card heading do not look like the mockup." The deck's item heading is
   13px at weight 500 with no margin; this was 15px at 700, which is two steps heavier and one
   larger - enough that the title stopped being a line in a card and started being a headline. */
/* 🔻 2026-09-08 - A CLASS, NOT A UTILITY, AND THE REASON IS SPECIFICITY.
   🗣️ Spencer: "Now the card heading are smaller than the due by: and other stuff below it."
   🔍 He was reading it right and the cause was the opposite of what it looked like. The title
   went to 13px as intended; the due line was written as `text-[11px]` and MEASURED 15px, because an
   id-scoped rule in index.css outranks a Tailwind utility class. So the title shrank, the line under
   it did not, and the card ended up with its smallest text at the top.
   ⚠️ This is the third time today the same trap has bitten - the amber banner drew white and an
   h4 margin needed a `!` for the same reason. ANY type or colour that has to hold inside this mount
   belongs in a rule scoped like this one, never in an arbitrary utility. */
#akashic-health-records-patient-portal-root .ahr-queue-item-due {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 400;
  /* REGULAR INK: only the "Due by:" label is amber (DueLine), and the date after it reads as text.
     The SIZE stays 11px: the complaint that started this was that the line outshouted the title. */
  color: var(--ink);
}

/* A grouped item's progress, in the due line's size and ink so neither outshouts the title. */
#akashic-health-records-patient-portal-root .ahr-queue-item-progress {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink);
}

/* The kind is the deck's chip, drawn by the shared pill in QueueKindChip.tsx (provisional). */

/* 🔻 2026-09-11 - MOVED to index.css as `.ahr-list-card-title`, beside the card it titles. Same
   reason as the card itself: a second list now has to match this one, and two copies of a rule that
   must agree is the thing that does not stay agreeing. */

/* =========================================================
   THE QUEUE CARD ITSELF.

   🗣️ Spencer: "Margin between cards don't look like the mockup either."

   📏 Measured on patient-portal.html at scale 1, so these are real pixels rather than
   frame-scaled ones:
     gap between cards   4px   (the deck sets `margin: 0 0 4px` on the card)
     padding             8px 14px
     border              NONE - 0px, and this is the part that matters
     shadow              2px 2px 3px rgba(31,26,20,.1)
     background          white

   ⚠️ THE CARD HAS NO BORDER IN THE DECK. Its edge is the offset shadow alone, and that is
   why 4px of gap is enough there and looks cramped here: a bordered card needs air around it to
   stop two hairlines reading as one thick rule, so the app had opened the gap to 8px to cope with
   a border the deck never had. Take the border off and the deck's own spacing works. Doing one
   without the other is what makes a "spacing fix" look wrong.
   ========================================================= */
/* 🔻 2026-09-11 - THESE TWO RULES MOVED TO index.css AS `.ahr-list-stack` / `.ahr-list-card`.
   🗣️ Spencer: *"The cards in Teams and in Practices don't match the rest of the card styles. I want
   you to match the card styles used in the 'ITEMS NEED ATTENTION' section."* They are the same card
   now, so the declaration is in one place and this sheet keeps only what is the queue's own - its
   kind tones, its due line, its section heading.
   ⛔ Do not copy them back here to tweak one list. The measurements above them in index.css are the
   record of where the numbers came from, and two copies is how the assistant's bubble drifted a day
   after it was written to match. */

/* The queue heading is the shared h2 (DESIGN.md: 17px/500, --ink-strong), so it has no rule here.
   The red uppercase band came from the 2026-09-08 overview drawing and is superseded. */

/* The card's top-right column holds only the "+N more" line. The whole card is the control, so it
   draws no chevron (Spencer, 2026-08-30: "Remove the right chevron on the right side of the list items"). */
#akashic-health-records-patient-portal-root .ahr-queue-item-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  margin-top: 2px;
}
#akashic-health-records-patient-portal-root .ahr-queue-item-aside > svg {
  display: none;
}

/* Pinned to the top-right corner as the deck draws it. */
#akashic-health-records-patient-portal-root .ahr-queue-item-aside {
  position: absolute;
  top: 0;
  right: 0;
}
/* Every card carries the kind chip in that corner, with "+ N more" under it on the practice line,
   so the whole body keeps clear of the column, as the deck pads its card. */
#akashic-health-records-patient-portal-root .ahr-queue-list .ahr-queue-item-body {
  padding-right: 5rem;
}

/* Air above the section, a tight bind to its own rows. */
#akashic-health-records-patient-portal-root .patient-queue-head {
  margin: 16px 0 4px;
}
#akashic-health-records-patient-portal-root .patient-queue-head + .ahr-queue-list {
  margin-top: 0;
}


/* Clickable inside a row whose content lets clicks fall through to the card. */
#akashic-health-records-patient-portal-root button.ahr-queue-item-more {
  pointer-events: auto;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--primary);
  cursor: pointer;
  /* On a phone the words stack, so the card's own lines keep their width. */
  max-width: 76px;
  text-align: right;
}

@media (min-width: 640px) {
  #akashic-health-records-patient-portal-root button.ahr-queue-item-more {
    max-width: none;
    white-space: nowrap;
  }
}

/* Each kind has one hue: the rail down the card and its chip. */
#akashic-health-records-patient-portal-root .ahr-queue-list {
  --queue-task: #6b21a8;
  --queue-message: #1d4ed8;
  --queue-appointment: #4338ca;
  --queue-payment: #0f766e;
}
#akashic-health-records-patient-portal-root .ahr-queue-card[data-kind="form"] { border-left-color: var(--queue-task); }
#akashic-health-records-patient-portal-root .ahr-queue-card[data-kind="message"] { border-left-color: var(--queue-message); }
#akashic-health-records-patient-portal-root .ahr-queue-card[data-kind="appointment"] { border-left-color: var(--queue-appointment); }
#akashic-health-records-patient-portal-root .ahr-queue-card[data-kind="payment"] { border-left-color: var(--queue-payment); }

#akashic-health-records-patient-portal-root .ahr-kind-chip {
  --chip: var(--queue-task);
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--chip) 12%, var(--surface));
  color: var(--chip);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.55;
  text-transform: uppercase;
  white-space: nowrap;
}
#akashic-health-records-patient-portal-root .ahr-kind-chip[data-kind="message"] { --chip: var(--queue-message); }
#akashic-health-records-patient-portal-root .ahr-kind-chip[data-kind="appointment"] { --chip: var(--queue-appointment); }
#akashic-health-records-patient-portal-root .ahr-kind-chip[data-kind="payment"] { --chip: var(--queue-payment); }

/* The org line clips, so a doctor that wraps leaves its leading dot outside the line. */
#akashic-health-records-patient-portal-root .ahr-queue-card .ak-org-line { overflow: hidden; }
#akashic-health-records-patient-portal-root .ahr-queue-card .ak-org-line__name { margin-right: 13px; }
#akashic-health-records-patient-portal-root .ahr-queue-who .ak-org-line__sep {
  display: inline-block;
  box-sizing: border-box;
  width: 13px;
  margin-left: -13px;
  padding-right: 5px;
  text-align: center;
}