/* =====================================================================
   Inset home drawer chrome - mirrors the mock's dw-scrim / dw layer
   (plays.css). Two departures the design review called for:
     1. the scrim is a FLAT translucent tint (no backdrop-blur) - the
        drawer casts the shadow, it does not blur the area behind it;
     2. the panel eases in AND out (symmetric slide + fade), so closing
        is animated rather than an instant vanish.
   This sheet holds NO raw values. Every shadow and scrim is a token from
   `packages/shared/src/styles/tokens.css` (--scrim-overlay,
   --shadow-drawer-panel, --shadow-card-lift, …) and every size is a step
   off the locked type ramp (--fs-*, --lh-*). Both used to be literals
   here, with hand-written `.dark` rules patching the ones that looked
   wrong in dark — the per-theme patch being the tell that the value
   belonged in the token layer. Needing a value that does not exist yet is
   a token-promotion decision, not a literal in this file.
   ===================================================================== */

/* ---- scrim: flat tint, fades in with a 4px rise (mock pl-fadein) ---- */
@keyframes hdw-scrim-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes hdw-scrim-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
.hdw-scrim {
  background: var(--scrim-overlay);
  animation: hdw-scrim-in 0.15s ease-out;
}
.hdw-scrim.is-closing {
  animation: hdw-scrim-out 0.2s ease-in forwards;
}

/* ---- panel: casts the shadow, eases in and out on the same curve ---- */
@keyframes hdw-in {
  from { transform: translateX(60px); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}
@keyframes hdw-out {
  from { transform: none; opacity: 1; }
  to { transform: translateX(60px); opacity: 0; }
}
.hdw {
  box-shadow: var(--shadow-drawer-panel);
  animation: hdw-in 0.24s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.hdw.is-closing {
  animation: hdw-out 0.2s cubic-bezier(0.3, 0.8, 0.3, 1) forwards;
}

/* =====================================================================
   Drawer CONTENT layer - mirrors the mock's plays3/plays4 drawer rules
   (dw-head/back/title, p3-sigbody left-rule, pt-ex-ph section head,
   fc-add, pt-ex-p person card, p4-facts, p4-sigcard). Mock metrics
   verbatim; the mock's CSS vars are mapped to our design tokens (surface,
   text, line, accent all coincide - see signal-tokens.md). Prefixed
   `hdw-` and scoped to the drawer so nothing leaks to the app.
   ===================================================================== */

/* ---- header (dw-head) ---- */
.hdw-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.hdw-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px 4px 6px;
  border-radius: 9999px;
}
/* One line, always. The thread header carries a back pill, an avatar, a name,
   the step controls and a close inside 480px; left to wrap, the pill took two
   lines and shoved everything else out of shape. The label truncates rather
   than the person's name, which is what the drawer is actually about. */
.hdw-back {
  flex-shrink: 0;
  max-width: 14ch;
  white-space: nowrap;
  overflow: hidden;
}
.hdw-back:hover {
  color: var(--text-primary);
  background: var(--surface-well);
}
.hdw-back svg {
  width: 13px;
  height: 13px;
}

.hdw-title {
  font-size: var(--text-sm);
  font-weight: 680;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  display: flex;
  /* Baseline, not center: the name (14px) and sub (11.5px) share one text
     baseline. Box-centering the two sizes floated the sub high and made the
     name read as pushed down. */
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
/* Under width pressure the SUB gives way (ellipsizes) first; the name only
   truncates as a last resort - otherwise "Audience" collapses to "Au..."
   while its subtitle keeps full width. */
.hdw-title-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hdw-title .hdw-sub {
  flex: 0 999 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---- signal body (p3-sigtop / headline / sigbody left-rule / why) ---- */

.hdw-when {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* signal-details title: the signal headline at the table's size, sitting under
   the "Signal details" section header. May wrap to 2 lines; the "View source"
   link trails the text inline. */
.hdw-sig-title {
  margin: 0 0 8px;
  font-size: var(--text-dense);
  font-weight: 600;
  line-height: var(--lh-normal);
  color: var(--text-primary);
  text-wrap: pretty;
}
/* inline "View source" link trailing the title — smaller and quiet, wraps as a
   unit after the title text. */
.hdw-sig-src {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  vertical-align: middle;
  white-space: nowrap;
  transition: color 0.1s;
}
.hdw-sig-src:hover {
  color: var(--accent-text);
}
.hdw-sigbody {
  border-left: 3px solid color-mix(in srgb, var(--accent-brand) 55%, transparent);
  padding: 2px 0 2px 13px;
  margin: 10px 0;
}
.hdw-why b {
  display: block;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 7px;
}
.hdw-why p {
  margin: 0 0 8px;
  font-size: var(--text-dense);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: 70ch;
  text-wrap: pretty;
}
.hdw-why p.hdw-sum {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* ---- section head (pt-ex-ph): label · count chip · action ----
   The SAME cream band as the Lists drawer's account group bars
   (`.hdw-au-ghead` below) and the tables' column header (`.htbl thead th` in
   home-tables.css), so every heading a reader meets — Lists group bar, drawer
   section head, table header — reads as one surface. This used to be a
   bare uppercase label trailed by a full-width hairline, which made the Home
   and Outreach drawers look like a different system from the Lists drawer they
   open beside. Sentence case and the 12px/0.01em step come from the same
   place; the band's own hairlines replace the trailing rule, so trailing
   actions right-align on a plain `flex-1` spacer instead.
   Asserted against `.hdw-au-ghead` in drawer-affordances.spec.ts. */
.hdw-ph {
  display: flex;
  align-items: center;
  /* Tighter than the 8px `.hdw-au-ghead` uses, because the count here is a
     PILL, not bare text: its own `padding: 0 7px` stacks on top of the gap, so
     a matching 8px read as ~15px of air between a label and its own count. */
  gap: 5px;
  background: var(--surface-well);
  /* full-bleed: cancel DrawerBody's px-4 so the band spans edge to edge. */
  margin-left: -16px;
  margin-right: -16px;
  /* The band OWNS its vertical rhythm, so every drawer breathes identically.
     Call sites used to set this with Tailwind and had drifted to FIVE different
     values (`mt-3.5` / `mt-4` / `mt-5` / `mb-2` / none), so how much air a band
     got depended on which section you happened to be looking at. Setting it
     here is also why these are longhands: with the `margin: 0 -16px` shorthand
     `.hdw-au-ghead` can afford, the vertical values would be locked to 0.
     More above than below — the band belongs to the content beneath it. */
  margin-top: 28px;
  margin-bottom: 16px;
  padding: 4px 16px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
.hdw-ph .hdw-ct {
  /* Pinned, NOT inherited. The count is a chip on the heading, not part of it,
     so it holds the Lists group bar's count step (`.hdw-au-ct`, 11px) while the
     label sits at 12px. Leaving it to inherit is what made it grow with the
     heading when this band replaced the old uppercase head. */
  font-size: var(--text-caption);
  font-weight: 650;
  color: var(--text-secondary);
  /* Borderless: the chip reads against the band by SURFACE alone. Sitting on
     `--surface-well`, a card-colored fill already separates it, and the extra
     hairline only thickened a 2-character chip. */
  background: var(--surface-card);
  border-radius: 9999px;
  padding: 0 7px;
  font-variant-numeric: tabular-nums;
}

/* ---- section body: FLUSH with the heading band's label, sharing DrawerBody's
   px-4 edge. `.hdw-sec-body` used to add a 12px hanging indent to separate a
   bare uppercase label from its content; the band does that job now, and the
   indent had become the thing that broke the drawer's left edge — only 5 of the
   15 section bodies ever opted in, so "Their signals" and "Research" sat 12px
   right of every `.hdw-cards` body (Outreach, the signal lists, both Outreach
   drawers) and read as arbitrarily pushed in. The class stays as the hook
   `.is-hero` compounds with; it no longer insets anything on its own.
   `.is-hero` still adds the accent rail — reserved for the one primary section
   per drawer, never every section. ---- */
.hdw-sec-body.is-hero {
  padding: 1px 0 1px 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent-brand) 55%, transparent);
}

/* ---- AI overview (person quick synthesis): a native drawer section, no card.
   Header reuses .hdw-ph; the body uses the same 13px/secondary type as the rest
   of the drawer. ---- */
.hdw-ai {
  margin: 2px 0 4px;
}
.hdw-ai-ctl {
  display: inline-flex;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.1s;
}
.hdw-ai-ctl:hover {
  color: var(--text-primary);
}
/* loading / graceful-degrade line */
.hdw-ai-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-dense);
  color: var(--text-muted);
}
/* Person research body: always a BFC (`overflow: hidden`) so the first
   section's top margin does not collapse differently when peek toggles —
   that was the few-pixel jump on expand/collapse. Peek only adds max-height. */
.hdw-ai-snapshot {
  overflow: hidden;
  overflow-anchor: none;
}
.hdw-ai-snapshot.is-peek {
  max-height: 6.9rem; /* ~4–5 lines of 13px/1.55 body under the first sec head */
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}
/* Peek toggle: a text link, not decoration — pointer + hover recolor, matching
   .hdw-more / .hdw-ai-ctl. Rest is already accent, so hover lands on primary. */
.hdw-ai-more {
  display: inline-block;
  margin-top: 5px;
  font-size: var(--text-xs);
  color: var(--accent-text);
  cursor: pointer;
  transition: color 0.1s;
}
.hdw-ai-more:hover {
  color: var(--text-primary);
}
/* Account / person research: compact firmographic line above insight groups. */
.hdw-ai-facts {
  margin: 0 0 10px;
  font-size: var(--text-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}
/* expanded body: group sub-labels + insight rows. Sub-labels are deliberately
   NOT the uppercase eyebrow of the RESEARCH section head — they're a sentence-
   case accent mini-heading so the inner groups read as subordinate. */
.hdw-ai-sec {
  margin: 15px 0 6px;
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--accent-text);
}
.hdw-ai-sec:first-child {
  margin-top: 4px;
}
.hdw-ai-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hdw-ai-item {
  display: flex;
  gap: 7px;
  font-size: var(--text-dense);
  line-height: var(--lh-relaxed);
}
.hdw-ai-emoji {
  flex-shrink: 0;
}
.hdw-ai-item .hdw-ai-body {
  min-width: 0;
  color: var(--text-secondary);
}
.hdw-ai-item .hdw-ai-body b {
  font-weight: 600;
  color: var(--text-primary);
}
.hdw-ai-src {
  margin-left: 3px;
  color: var(--text-muted);
  vertical-align: baseline;
}
.hdw-ai-src:hover {
  color: var(--accent-text);
}
/* career list: each entry is two tight lines — company · dates, then the role —
   so long companies/roles/dates never fight for one line and get truncated. */
.hdw-ai-career {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hdw-ai-job {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hdw-ai-job-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hdw-ai-job-co {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-dense);
  font-weight: 600;
  color: var(--text-primary);
}
.hdw-ai-job-dates {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.hdw-ai-job-role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-dense);
  color: var(--text-secondary);
}

/* ---- "Add all N" section-head chip (fc-add, accent treatment) ---- */
.hdw-fcadd {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 9999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-text);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.12s;
}
.hdw-fcadd svg {
  width: 12px;
  height: 12px;
}
.hdw-fcadd:hover {
  background: color-mix(in srgb, var(--accent-brand) 16%, var(--surface-card));
}
.hdw-fcadd.is-added {
  background: var(--accent-brand);
  border-color: var(--accent-brand);
  color: var(--text-inverse);
}

/* ---- person pick card (pt-ex-p) + Add pill (pcard-add) ---- */
.hdw-cards {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hdw-pcard {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-card);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  min-width: 0;
}
.hdw-pcard.opens {
  cursor: pointer;
}
.hdw-pcard.opens:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-brand) 4%, var(--surface-card));
  box-shadow: var(--shadow-card-lift);
}
.hdw-pcard.on {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-brand) 6%, var(--surface-card));
}
.hdw-pcard .hdw-pc-t {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hdw-pcard .hdw-pc-n {
  font-size: var(--text-dense);
  font-weight: 650;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hdw-pcard .hdw-pc-n i {
  font-style: normal;
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: 7px;
}
.hdw-pcard .hdw-pc-w {
  margin-top: 3px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hdw-pcard-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  align-self: center;
  flex-shrink: 0;
  width: 74px;
  height: 28px;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--accent-text);
  white-space: nowrap;
  transition: all 0.12s;
  cursor: pointer;
}
.hdw-pcard-add svg {
  width: 12px;
  height: 12px;
}
.hdw-pcard-add.on {
  background: var(--accent-brand);
  border-color: var(--accent-brand);
  color: var(--text-inverse);
}

/* ---- show-more toggle (av-more) + rank note ---- */
.hdw-more {
  /* mock av-more: accent text, full-width row, hover well */
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent-text, var(--accent-brand));
  padding: 6px 8px;
  border-radius: 7px;
  text-align: left;
  cursor: pointer;
  padding: 6px 4px;
}
.hdw-more:hover {
  color: var(--text-primary);
}
.hdw-twist {
  display: inline-grid;
  place-items: center;
  color: var(--text-muted);
  transition: transform 0.16s;
}
.hdw-twist svg {
  width: 14px;
  height: 14px;
}
.hdw-twist.rot {
  transform: rotate(180deg);
}
.hdw-ranknote {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin: 4px 0 6px;
}

/* ---- account/person fact strip (p4-facts) ---- */
.hdw-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 4px;
}
.hdw-facts > span {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hdw-facts i {
  font-style: normal;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hdw-facts b {
  font-size: var(--text-dense);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: var(--lh-snug);
  /* the .hdw-why b label rule uppercases nested bolds; values stay normal
     case (the mock's p4-facts b carries the same counter-declarations) */
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
}
.hdw-facts b.ok svg {
  width: 12px;
  height: 12px;
  color: var(--success-text);
  flex-shrink: 0;
}
.hdw-facts b.pend {
  color: var(--warning-text);
  font-weight: 550;
}
.hdw-facts b.pend svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  animation: hdw-spin 0.9s linear infinite;
}
@keyframes hdw-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- signal mini-card (p4-sigcard) ---- */
.hdw-sigcard {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  font: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-card);
  padding: 9px 11px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.hdw-sigcard:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-brand) 4%, var(--surface-card));
  box-shadow: var(--shadow-card-lift);
}
.hdw-sigcard .hdw-sc-tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hdw-sigcard .hdw-sc-hd {
  font-size: var(--text-dense);
  font-weight: 600;
  color: var(--text-primary);
  line-height: var(--lh-snug);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hdw-sigcard .hdw-sc-mt {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hdw-sigcard .hdw-sc-when {
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.hdw-sigcard .hdw-sc-chev {
  color: var(--text-muted);
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
}
.hdw-sigcard .hdw-sc-chev svg {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
}
.hdw-sigcard:hover .hdw-sc-chev {
  color: var(--accent-text);
}
/* ---- Outreach thread cards (mail / reply), built on the signal card so the
   type scale and metrics match the rest of the drawers. `is-mail` swaps the
   centred layout for a top-aligned one, because these cards grow a body. ---- */
.hdw-sigcard.is-mail {
  align-items: flex-start;
  cursor: pointer;
}
.hdw-sigcard.is-mail .hdw-sc-tx {
  gap: 3px;
}
/* Not sent yet (queued, or written and now abandoned). Dashed on the well
   surface with a receded headline, so "already happened" and "hasn't happened"
   are told apart at a glance rather than by reading the meta line. */
.hdw-sigcard.is-pending,
.hdw-sigcard.is-dead {
  border-style: dashed;
  background: var(--surface-well);
  box-shadow: none;
}
.hdw-sigcard.is-pending .hdw-sc-hd,
.hdw-sigcard.is-dead .hdw-sc-hd {
  font-weight: 550;
  color: var(--text-secondary);
}
.hdw-sigcard.is-dead .hdw-sc-hd {
  text-decoration: line-through;
  text-decoration-color: var(--border-strong);
}
/* Their reply: the one inbound thing in the thread, tinted so it separates
   from our own sends at a glance. Not clickable — it is already expanded. */
.hdw-sigcard.is-reply {
  cursor: default;
  border-color: var(--success-line);
  background: var(--success-soft);
}
.hdw-sigcard.is-reply:hover {
  border-color: var(--success-line);
  background: var(--success-soft);
  box-shadow: none;
}
.hdw-mailicon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--surface-well);
  color: var(--text-muted);
}
.hdw-mailicon svg {
  width: 13px;
  height: 13px;
}
/* Delivered: a green tick, the one unambiguous "this happened". */
.hdw-mailicon.is-sent {
  background: var(--success-soft);
  color: var(--success-text);
  border: 1px solid var(--success-line);
}
/* Queued: the clock reads as waiting, not as a problem, so it stays neutral
   ink on the card's own dashed surface. */
.hdw-mailicon.is-queued {
  background: var(--surface-card);
  border: 1px dashed var(--border-strong);
}
/* Their reply is the win in this thread: the only SOLID tile, so it outranks
   every green tick above it at a glance. */
.hdw-mailicon.is-reply {
  background: var(--success-text);
  color: var(--text-inverse);
  border: 1px solid var(--success-text);
}
.hdw-mailicon.is-bad {
  color: var(--destructive);
}
/* Loading bar inside a thread card, sized by the caller. Same pulse the rest
   of the app uses; the tint is the reply card's own line color so the
   placeholder reads as "a reply is coming", not as broken chrome. */
.hdw-skel {
  display: block;
  border-radius: 4px;
  background: color-mix(in srgb, var(--success-line) 45%, transparent);
  animation: hdw-skel-pulse 1.4s ease-in-out infinite;
}
@keyframes hdw-skel-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Body text inside a thread card: the drawer's paragraph size, not the app's
   body role, so an email never out-shouts the card headline above it. */
.hdw-mailbody {
  display: block;
  margin-top: 5px;
  font-size: var(--text-dense);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  white-space: pre-wrap;
  text-wrap: pretty;
}

/* Static variant (Outreach rows): same card metrics and type scale as the
   signal card, minus the click affordances — these rows open nothing. */
.hdw-sigcard.is-static {
  cursor: default;
}
.hdw-sigcard.is-static:hover {
  border-color: var(--border-subtle);
  background: var(--surface-card);
  box-shadow: none;
}

/* ---- linked account object card (SignalDrawer / PersonDrawer top-of-body) ---- */
.hdw-acctcard {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  font: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-card);
  padding: 8px 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.hdw-acctcard:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-brand) 4%, var(--surface-card));
  box-shadow: var(--shadow-card-lift);
}
.hdw-ac-tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hdw-ac-line1 {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.hdw-ac-name {
  flex: 0 0 auto;
  max-width: 100%;
  font-size: var(--text-sm);
  font-weight: 680;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* One-line company description, lighter, after the name; truncates first so the
   account name always stays intact. */
.hdw-ac-desc {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 440;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hdw-ac-more {
  font-size: var(--text-caption);
  font-weight: 550;
  color: var(--accent-text);
}
.hdw-ac-chev {
  color: var(--text-muted);
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
}
.hdw-ac-chev svg {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
}
.hdw-acctcard:hover .hdw-ac-chev {
  color: var(--accent-text);
}

/* ---- footer (dw-foot) + CTA family (pl-btn) ---- */
.hdw-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: var(--surface-card);
}
.hdw-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 15px;
  white-space: nowrap;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: var(--accent-brand);
  color: var(--text-inverse);
  font: inherit;
  font-size: var(--text-dense);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, opacity 0.12s;
}
.hdw-cta:hover {
  background: var(--accent-brand-strong);
}
.hdw-cta:disabled {
  opacity: 0.45;
  cursor: default;
}
.hdw-cta svg {
  width: 15px;
  height: 15px;
}
.hdw-cta.sm {
  height: 28px;
  padding: 0 11px;
  font-size: var(--text-xs);
  /* Tighter than the 34px base's 7px: at 12px type the glyph and its label are
     one unit, and the base gap left them reading as two separate marks. */
  gap: 5px;
}
/* The glyph scales with the pill, like the shared Button sizes its own icons.
   `.hdw-cta svg` above is sized for the 34px base; left to inherit it, a 15px
   mark sat on a 28px pill next to 12px text — and 1px larger than the `size-7`
   quiet Button's 14px X directly beside it in the audience bar. */
.hdw-cta.sm svg {
  width: 14px;
  height: 14px;
}
.hdw-cta.second {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-text);
}
.hdw-cta.second:hover {
  background: color-mix(in srgb, var(--accent-brand) 18%, var(--surface-card));
}
.hdw-cta.ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.hdw-cta.ghost:hover {
  background: var(--surface-well);
}
.hdw-cta.ghost:disabled {
  opacity: 1;
  color: var(--text-muted);
  border-color: var(--border-subtle);
  background: var(--surface-well);
  cursor: default;
}
.hdw-cta.is-added {
  border-color: var(--accent-line);
  color: var(--accent-text);
  background: var(--accent-soft);
}

/* ---- account score chip (as-score) ---- */
.hdw-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  font-weight: 650;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: 9999px;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- message drawer recipients strip (aim-who) ---- */

/* ---- compose play bar: subtle accent wash so the top controls read as
   branded chrome, not a blank form ---- */
/* Plain card, no accent wash. The bar is a form, not a highlight: with the
   controls now carrying their own fill, a tint underneath them turned the
   whole thing lilac and the pills read as holes punched in it. Separation
   comes from the border below. */
.cmp-playbar {
  background: var(--surface-card);
}

/* ---- compose recipient rail: account grouping bar ----
   Styled like the home tables' bucket header rows (.htbl-day, e.g. "In this
   audience"): same accent wash + an uppercase, letter-spaced, accent-text
   label, sized for the rail's own padding. */
.cmp-acct-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: color-mix(in srgb, var(--accent-brand) 6%, var(--surface-card));
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
/* Rail row remove: revealed on hover / focus, and held open on the active row
   so the person being read always has the control in reach. */
.cmp-recipient-remove {
  opacity: 0;
  transition: opacity 0.12s ease-out;
  margin-right: 6px;
}
.cmp-recipient-row:hover .cmp-recipient-remove,
.cmp-recipient-row.is-active .cmp-recipient-remove,
.cmp-recipient-remove:focus-visible {
  opacity: 1;
}
.cmp-acct-bar-name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- audience v4 flat grouped list (au-*) ---- */
/* Accounts render as full-width bars (like the home tables' bucket header
   rows), NOT bordered cards: the well-tinted header bar bleeds to the drawer
   edges and separates one account from the next, so there are no nested
   containers or inter-card margins. */
.hdw-au-groups {
  display: flex;
  flex-direction: column;
}
.hdw-au-ghead {
  display: flex;
  align-items: center;
  gap: 8px;
  /* The SAME cream band as the tables' column header (`.htbl thead th` in
     home-tables.css) — the drawer opens over the Lists table, so its group bars
     and that header should read as one surface. This used to take `.htbl-day`'s
     accent wash instead, which made the drawer look like a different table.
     Asserted in drawer-affordances.spec.ts against home-tables.css. */
  background: var(--surface-well);
  /* full-bleed: cancel DrawerBody's px-4 so the bar spans edge to edge */
  margin: 0 -16px;
  padding: 4px 16px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
/* Every group bar carries BOTH hairlines — no exceptions for the consecutive
   or first-child cases, which used to drop `border-top` so adjacent rules would
   not double up. Banding each heading identically is the point; a bar that
   silently loses an edge depending on its position is the inconsistency. */
/* First bar sits flush under the drawer header: -14px cancels DrawerBody's top
   pad, and the extra -1px lands the bar's own top hairline exactly ON
   `.hdw-head`'s bottom hairline. Both are 1px --border-subtle, so they coincide
   and read as a single rule — without this the two stack into a 2px line. The
   bar keeps its border rather than dropping it, so every heading is banded
   identically. */
.hdw-au-groups > .hdw-au-group:first-child .hdw-au-ghead {
  margin-top: -15px;
}
.hdw-au-ghead b {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
.hdw-au-ct {
  font-size: var(--text-caption);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hdw-au-ct svg {
  width: 12px;
  height: 12px;
  animation: hdw-spin 0.9s linear infinite;
}
/* Contacts get room to breathe: the rows used to butt straight up against each
   other (no gap) at 5px of vertical padding, so a run of contacts read as one
   dense block rather than as separate people. A flex column adds the separation
   between rows; the padding bump gives each row its own margin. The `.hdw-more`
   toggle is a flex child too and picks up the same gap. */
/* The row checkbox shares a vertical CENTRE LINE with the group bar's account
   avatar — not a left edge. The two are different widths (20px avatar, 15px
   checkbox), so matching left edges leaves their centres 2.5px apart and the
   column reads as off-axis.

   Measuring from the drawer edge: DrawerBody contributes 16px of padding and
   `.hdw-au-ghead` cancels it (`margin: 0 -16px`) before re-adding 16px of its
   own, so the avatar spans 16-36px — centre 26px. The checkbox must therefore
   start at 26 - 15/2 = 18.5px, which is 2.5px inside the content edge:

     16 (DrawerBody) - 11.5 (this pull-back) + 14 (row padding) = 18.5

   The right margin stays -8px against the row's 8px, so that edge still lands
   flush on the drawer's content edge. */
.hdw-au-people {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Equal vertical inset: 12px between the group bar's bottom hairline and the
     first contact, and the same between the last contact and the NEXT bar's top
     hairline. Uneven values make the block look like it belongs to the heading
     below it rather than the one above. */
  padding: 12px 0;
  margin: 0 -8px 0 -11.5px;
}
.hdw-au-p {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  /* 8px all round except a 14px left inset, which the list's -14px left pull
     cancels so the checkbox still lands on the group bar's avatar edge. */
  padding: 8px 8px 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.hdw-au-p:hover {
  background: var(--surface-well);
}
.hdw-au-p.off .hdw-au-t {
  opacity: 0.5;
}
.hdw-au-t {
  min-width: 0;
  flex: 1;
}
/* Name + title share one line: the name never shrinks, the title clips. */
.hdw-au-n {
  font-size: var(--text-dense);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.hdw-au-n b {
  font-weight: 600;
  flex-shrink: 0;
}
.hdw-au-n i {
  font-style: normal;
  font-weight: 500;
  font-size: var(--text-caption);
  color: var(--text-muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hdw-au-w {
  /* block, not inline: an inline span can't clip, so the reason text ran
     under the drawer edge instead of ellipsizing */
  display: block;
  font-size: var(--text-caption);
  color: var(--text-muted);
  line-height: var(--lh-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.hdw-au-freshnote {
  font-size: var(--text-caption);
  color: var(--text-muted);
  padding: 8px 12px 10px;
  line-height: var(--lh-relaxed);
}

/* ---- message intent dial (aim-*) + segmented control (pl-seg) ---- */

/* =====================================================================
   Lists layer (mock plays5 l5-*) - the Lists page table chrome. The list
   detail view reuses the audience drawer (hdw-au-*). Prefixed `hl-`.
   ===================================================================== */
/* The count beside the Lists page title. Same object as the drawer section
   heads' count chip (`.hdw-ph .hdw-ct` — "Recent signals 1"): a borderless
   pill, neutral secondary text, tabular figures. It was an accent-tinted pill,
   which read as a brand or status mark rather than "how many rows are below" —
   and spent the page's one accent on a number, next to a real accent CTA.

   Two deliberate differences from `.hdw-ct`, both of which keep the pair
   matching rather than break it:

   FILL. `.hdw-ct` fills with `--surface-card` because it sits ON the drawer's
   `--surface-well` band, and reads by surface alone. This chip sits on the page
   shell, where `--surface-card` is a ~1% step in light (#fffdf8 on #fdf9ee) and
   would disappear — while staying plainly visible in dark, so the two themes
   would disagree about whether there is a chip at all. `--surface-well` is the
   same one-step-off-its-own-background relationship, and it holds in both.
   Do not "align" this to `--surface-card`.

   SIZE. `.hdw-ct` pins 11px because its LABEL is 12px. This label is the 24px
   `.text-page-title`, so 12px is already the quiet end of the ratio; copying
   the 11px would shrink the chip against a title twice the drawer heading's
   size. The style being matched is the treatment, not the pinned step.

   The gap takes `.hdw-ph`'s 5px for the same reason that band gives: the count
   is a PILL, so its own horizontal padding stacks on top of the gap. At the
   previous 10px the optical distance was 19px — the chip read as floating
   beside the title rather than belonging to it. 5px + 9px lands at 14px, the
   drawer band's 12px plus the two steps this larger title carries. */
.hl-headct {
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--text-secondary);
  background: var(--surface-well);
  border-radius: 9999px;
  padding: 2px 9px;
  margin-left: 5px;
  vertical-align: 3px;
  font-variant-numeric: tabular-nums;
}
.hl-glyph {
  /* 28px — the most-used tile size in the app (LogoAvatar's `sm` default). The
     row's leading identity mark sits a step above the 26px account tiles two
     columns over. */
  width: 28px;
  height: 28px;
  /* Corner deliberately MATCHES those 26px account tiles rather than scaling
     with this tile (a 25% corner here would be 7px). Same row, same shape. */
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-text);
  flex-shrink: 0;
}
.hl-glyph svg {
  width: 14px;
  height: 14px;
}
/* member preview: overlapped logos/faces with a 2px card outline */

.hl-logos,
.hl-faces {
  display: inline-flex;
  align-items: center;
  /* Center the strip in the table cell: an inline-flex defaults to baseline
     alignment, which sits the accounts and people strips at different heights
     (Ohad review). */
  vertical-align: middle;
}
/* Same -6px overlap as the audience bar, and the same separation device: a
   solid 2px --surface-card ring that cuts each tile out of the neighbour it
   covers. TRA-1438 drops the lift the bar still carries — on Lists BOTH strips
   are flat, so logos and faces read as one system. */
.hl-logos > *,
.hl-faces > * {
  margin-right: -6px;
}
.hl-logos > *:last-child,
.hl-faces > *:last-child {
  margin-right: 0;
}
/* Scoped to the avatar element only (like the bar's [data-slot=avatar] rule),
   so the "+N" chip below keeps its own ring. The .htbl-card prefix outranks
   the generic inset-hairline tile rule below (which also matches .htbl-card
   tiles) — same trick the .hdw-ab override uses; the rule must therefore keep
   declaring box-shadow so that generic inset hairline stays overridden. */
.htbl-card .hl-logos [data-slot='avatar']:not(.rounded-full) {
  border-radius: 6px;
  /* No lift on account logos — the solid ring is the ONLY layer, and it exists
     to cut each tile out of its overlapping neighbor, not to raise it. */
  box-shadow: 0 0 0 2px var(--surface-card);
}
/* Faces use the SAME ring as the logo tiles above — not the bar's translucent
   white hairline — so the two strips separate identically. `--surface-card`
   theme-flips on its own, and nothing later in the file can reach these (the
   generic tile rules require `[data-slot=avatar]:not(.rounded-full)`, while a
   PersonAvatar root is a plain `.rounded-full` div), so there is no dark
   counterpart to this rule. */
.hl-faces > *:not(.hl-chip) {
  border-radius: 9999px;
  box-shadow: 0 0 0 2px var(--surface-card);
}
/* There used to be a `.dark` twin of the `.hl-logos` rule above here, needed
   only because a `.dark .htbl-card [data-slot=avatar]` generic rule of equal
   specificity came later and would otherwise win. That generic dark rule is
   gone — its hairline is now a token that flips on its own — and the light
   rule outranks the remaining generic one on specificity, so both themes are
   covered by the single rule above. */

/* actions: delete revealed on row hover */
.hl-acts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
/* Reveal only. The delete control is a shared <Button variant='tertiary'>
   tinted destructive (see UserLists.tsx) — circle, border and colours all come
   from the primitive plus Tailwind classes, exactly as the Signals pane does
   it. Nothing here may restyle it, or the two would drift apart. */
.hl-acts .hl-del {
  opacity: 0;
  transition: opacity 0.12s ease-out;
}
.hl-row:hover .hl-acts .hl-del {
  opacity: 1;
}
/* Keyboard parity: the reveal is hover-only above, so a tabbing user would
   otherwise focus an invisible control. */
.hl-acts .hl-del:focus-visible {
  opacity: 1;
}

/* ---- audience bar (ab-*) - popover pill with an accent ring ----
   The wrapper hugs its content, centered, and slides left of the detail
   drawer when one is open (shifted) so the bar stays visible without
   overlapping. */
.hdw-ab-wrap {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  /* TRA-1532: the chat launcher publishes its corner footprint on the root
     while mounted; padding (not inset) so it applies identically in-card and
     docked, and the container queries below — which measure the content box —
     collapse the pill earlier to match the room it really has. The pill then
     shares the bottom row with the launcher instead of running under it. */
  padding-right: var(--chat-bubble-clearance, 0px);
  /* The bar's collapse steps are container queries against THIS box — see the
     block near the end of the file. Safe to contain: the wrap's inline size
     comes from its insets (or, docked, from an inline width), never from its
     contents. */
  container-type: inline-size;
  /* above the detail-drawer scrim (z-20) so the shifted bar stays bright and
     clickable next to the panel; below the panel itself (z-30 is to its right,
     no overlap). */
  z-index: 25;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: right 0.26s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.hdw-ab-wrap.shifted {
  right: calc(min(480px, 82%) + 16px);
}
/* Docked (TRA-1359): pages without a full-height relative card (Find) pin the
   bar to the viewport bottom; left/width are set inline from the measured
   content column so the bar centers on the content, not the viewport. */
.hdw-ab-wrap.docked {
  position: fixed;
  left: auto;
  right: auto;
  /* No transition until the first measured paint (dock-anim, armed a frame
     later): the bar must appear already in place, not slide up from the
     pre-measure fallback position. */
  transition: none;
}
.hdw-ab-wrap.docked.dock-anim {
  transition: bottom 0.26s cubic-bezier(0.3, 0.8, 0.3, 1);
}
/* Lift above the floating bulk-selection bar is applied INLINE (measured
   bottom + 78px) so it composes with the layout-derived dock offset. */
.hdw-ab {
  pointer-events: auto;
  width: fit-content;
  min-width: min(460px, 100%);
  max-width: 100%;
}
/* Overflow backstop: if the caps estimate ever overshoots, the avatar strips
   clip instead of the fixed chrome (label, counts, CTAs) pushing past the
   bar's edge. */
.hdw-ab > * {
  flex-shrink: 0;
}
.hdw-ab .hdw-ab-strip {
  flex-shrink: 1;
  min-width: 26px;
  /* Clip as an overshoot backstop, but with a margin so the tile/avatar drop
     shadows (~8px) still paint instead of being sheared on every edge (Ohad
     review). caps sizes the strip to the row, so normally nothing clips. */
  overflow: clip;
  overflow-clip-margin: 10px;
}
/* The STRIP shrinks; its tiles must not. They are square/round by construction
   (`size-6.5` plus a radius), but as flex items they squash along the main axis
   before the strip ever reaches its clip — a 26px circle becomes a visibly
   squished ellipse, which is what the `+N` chip did first because it sits last
   on the line. Pin them and let the overflow above do the giving, which is the
   backstop it was already there for. */
.hdw-ab-strip > * {
  flex-shrink: 0;
}
/* The `+N` chip closes a strip, so it wears that strip's own separator ring
   rather than a Tailwind hairline — otherwise the last tile in the row is the
   one that looks different. The card-colored ring ONLY: the logo tiles' dark
   hairline + inner edge (--shadow-tile-overlap) were tried on the accounts
   chip and read as a sand border around it (TRA-1532 review) — the chip is a
   flat count, not logo art needing a cut-out band. Theme-flips on its own. */
.hdw-ab-strip .hdw-ab-more {
  box-shadow: var(--shadow-face-overlap);
}
/* Clear + Save + Outreach: denser than the status-side gap-3. The clear X is
   the shared quiet Button (same control as the drawer header's close), so its
   circle and size live in the primitive — nothing to override here. */
.hdw-ab-acts {
  flex-shrink: 0;
}
/* The bar's shadow lives on a layer painted BELOW the note toast (mock
   ab-wrap::before), so the toast never sits in the bar's shadow. */
.hdw-ab-stack::before {
  content: '';
  position: absolute;
  inset: 0;
  /* must equal the bar's own radius or the shadow corner peeks past the bar
     corner and reads as a second border (.hdw-ab is `rounded-full`) */
  border-radius: 9999px;
  /* blur-only elevation: a spread band reads as a second border at a larger
     radius against the cream bg (Ohad review) */
  box-shadow: var(--shadow-float-bar);
  pointer-events: none;
}
.hdw-ab-wrap.shifted .hdw-ab {
  min-width: 0;
}
.hdw-ab-lbl {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hdw-ab-lbl svg {
  width: 13px;
  height: 13px;
  color: var(--accent-text);
}
/* Flex row, not inline text: the 16px number and the 11.5px label are
   different sizes, so default baseline alignment pinned the label to the
   number's bottom edge. Centering the two boxes against each other reads as
   one unit. `gap` replaces the number's old margin-right. */
.hdw-ab-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hdw-ab-count b {
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--lh-none);
  color: var(--text-primary);
}

/* Below md the DOCUMENT scrolls (TRA-1509), so the card is as tall as its list
   and an absolute bar sits at its bottom, not the screen's. `docked` sets its
   own left/width inline, so leave it alone. */
@media (max-width: 767px) {
  .hdw-ab-wrap:not(.docked) {
    position: fixed;
  }
  /* A phone drawer covers the page; `shifted` would leave a 38px sliver of
     unreachable chrome behind it. */
  .hdw-ab-wrap.shifted {
    display: none;
  }
  /* Same reason: `absolute inset-y-0` stretched the panel to the card's full
     list height, so its header scrolled off and left a blank body on screen. */
  .hdw-scrim,
  .hdw {
    position: fixed;
  }
}

/* ---- the bar as its own box narrows (TRA-1512).
   The full bar needs ~568px of CONTENT; below that Outreach and Save list get
   clipped off the right edge and the surface's primary action is unreachable.

   CONTAINER queries, not viewport ones. The constraint is the width of
   `.hdw-ab-wrap`; the viewport is only ever a proxy for it, and `shifted`
   breaks that proxy outright — it hands ~496px to an open drawer, so a 1140px
   desktop leaves the bar 348px, the same room an unshifted 375px phone gives
   it. No viewport threshold can be right for both.

   Two steps, because the bar has two different problems:
     <= 612px  the chrome does not fit. The list name, the rules and the Save
               list text go; gaps and padding tighten. The avatars stay — there
               is room, and they are the bar's only glanceable content.
     <= 492px  the avatars do not fit either. They go, and the pill drops its
               min-width so it can shrink to the counts.
   612/492 are the wrap widths the earlier 640/520 VIEWPORT steps produced, so
   plain-viewport behaviour is unchanged and `shifted` now gets the same
   treatment.

   Two placement facts, both of which broke this silently while it was written:
   1. NOT Tailwind variants. `drawer.css` is imported unlayered, so its
      `display` declarations outrank Tailwind's layered utilities however
      specific the utility is — the class lands on the element, the rule ships,
      and nothing happens.
   2. NOT earlier in the file. A query adds NO specificity, so these blocks have
      to sit AFTER every base rule they override (`.hdw-ab`, `.hdw-ab-lbl`,
      `.hdw-ab-count`). Above them they lose outright.
   Keep both blocks last, and keep every switch in them. ---- */
@container (max-width: 612px) {
  /* The list NAME goes; its bookmark glyph stays. Filled vs outline is the
     saved-vs-draft signal and it costs 13px, so it is the one piece of the
     label worth keeping — and it holds the bar's left edge, which otherwise
     starts on a bare number. */
  .hdw-ab-lbl-t,
  .hdw-ab-rule {
    display: none;
  }
  /* Everything below is the width budget, not styling — drop one line and
     Outreach leaves the box again. (`px-3`/`gap-3`/`gap-1.5` are Tailwind
     classes on the elements; these unlayered rules outrank them.) */
  .hdw-ab {
    gap: 6px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .hdw-ab-acts {
    gap: 4px;
  }
  /* Save list collapses to its glyph — the label is aria-hidden with an
     sr-only twin keeping the accessible name. Without the reset it stays a
     wide pill drawn around a lone icon. Outreach keeps its label: it is the
     action this whole layout exists to protect. */
  .hdw-ab-acts .hdw-cta-label {
    display: none;
  }
  .hdw-ab-acts .hdw-cta.sm.second,
  .hdw-ab-acts .hdw-cta.sm.ghost {
    padding: 0;
    width: 28px;
    gap: 0;
  }
  .hdw-ab-acts .hdw-cta.sm:not(.second):not(.ghost) {
    padding: 0 9px;
  }
}

@container (max-width: 492px) {
  /* The pill no longer needs its desktop floor. And rather than shrink-wrap
     and float centered with dead space either side (TRA-1532, 390px review),
     it fills the row and distributes its content — glyph, strips, counts,
     actions — evenly across it, so the full-width pill has no single large
     void. The strips stay through this band (TRA-1532 review: "show avatars
     instead of white space") and sit right beside their counts; caps sizes
     them to the room. The acts cluster's ml-auto must go, or its auto margin
     swallows the leftover before space-between can share it. */
  .hdw-ab {
    min-width: 0;
    width: 100%;
    justify-content: space-between;
  }
  .hdw-ab-acts {
    margin-left: 0;
  }
  /* The stack between wrap and pill shrink-wraps as a flex item, so the
     pill's 100% resolves against the pill's own natural width without this. */
  .hdw-ab-stack {
    width: 100%;
  }
}

@container (max-width: 430px) {
  /* Not lower: below this each strip is down to a single avatar plus a `+N`
     chip, 46px to say "there are some" where the count beside it already says
     it better — and the two of them together still did not fit. A strip that
     cannot show a row is not worth the width. */
  .hdw-ab-strip {
    display: none;
  }
  /* …and the counts become the side that gives way, which they must NOT be
     while the strips are still here: `.hdw-ab .hdw-ab-strip` is already
     `flex-shrink: 1`, so granting the counts the same while strips show made
     the two compete and the counts lost — "6 accounts" truncated to "accour"
     while the avatars kept their full width. Above this step the strips do the
     giving (they clip, which is what their `overflow` is for); below it there
     is nothing left but the counts, and a truncated "128 accounts" still beats
     Outreach leaving the bar. */
  .hdw-ab-count {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* TRA-1532: with the chat launcher docked beside the bar, the wrap loses
   another 56px (--chat-bubble-clearance) and common phone widths land below
   the ladder's last step — the counts were ellipsizing at 390. The bookmark
   glyph is the one remaining ornament; drop it and tighten the chrome so the
   count words survive, leaving the ellipsis as the true last resort. Without
   the launcher (no clearance) a 375 viewport keeps a 347px container and
   never enters this step. */
@container (max-width: 330px) {
  .hdw-ab-lbl {
    display: none;
  }
  .hdw-ab {
    gap: 4px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .hdw-ab-acts {
    gap: 3px;
  }
}

/* ---- account-added note: hangs off the bar's top edge (mock ab-notebar) ---- */
.hdw-ab-stack {
  position: relative;
  pointer-events: none;
  max-width: 100%;
}
.hdw-ab-stack .hdw-ab {
  position: relative;
  z-index: 1;
}
.hdw-ab-note {
  pointer-events: auto;
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 48px);
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 12px;
  background: color-mix(in srgb, var(--accent-brand) 13%, var(--surface-card));
  border: 1px solid color-mix(in srgb, var(--accent-brand) 45%, transparent);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  font-size: var(--text-xs);
  font-weight: 550;
  color: var(--text-primary);
  min-width: 0;
  box-shadow: var(--shadow-float-note);
  overflow: hidden;
  white-space: nowrap;
  animation: hdw-abn-rise 0.22s cubic-bezier(0.3, 0.8, 0.3, 1);
}
@keyframes hdw-abn-rise {
  from { transform: translateY(12px); }
  to { transform: none; }
}
@keyframes hdw-abn-drop {
  to { transform: translateY(12px); }
}
.hdw-ab-note.out {
  animation: hdw-abn-drop 0.2s ease-in forwards;
}
.hdw-ab-note-check {
  width: 12px;
  height: 12px;
  color: var(--success-text);
  flex-shrink: 0;
}
.hdw-ab-note-t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hdw-ab-note-t b {
  font-weight: 700;
}
/* `.hdw-abn-seg` lived here as a hand-rolled copy of the shared
   SegmentedSwitch. BOTH consumers now compose that primitive — the drawer's
   cohort lever (AudienceDrawer) and the added-note's per-account seg
   (AudienceBar) — each carrying the warning tint through tokens, so the
   duplicate track/segment rules are gone. Deleting these rules while only the
   first had migrated left the note's control unstyled with no visible selected
   state; `home-css-orphans.spec.ts` now fails on that class of mistake. */
.hdw-abn-undo {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--accent-text, var(--accent-brand));
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  flex-shrink: 0;
}
.hdw-abn-undo:hover {
  color: var(--text-primary);
}

/* ---- consistent logo tiles: white backing + faint inner hairline so mixed
   logo art reads as one shape, especially when overlapping (Ohad review).
   Scoped to home surfaces; excludes circular person avatars. ---- */
.htbl-card [data-slot='avatar']:not(.rounded-full),
.hdw [data-slot='avatar']:not(.rounded-full),
.hdw-ab [data-slot='avatar']:not(.rounded-full) {
  background: var(--logo-tile-backing);
  box-shadow: inset 0 0 0 1px var(--logo-tile-hairline);
}

/* ---- quiet button (mock pl-btn.quiet.sm): borderless text action for drawer
   headers (Save as list / Clear all) ---- */
.hdw-quiet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px;
  /* Reserved but invisible, so the hover hairline cannot resize the control —
     same device the shared Button's `quiet` variant uses. */
  border: 1px solid transparent;
  border-radius: 9999px;
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
/* Identical to the `quiet` Button variant's hover (border-strong hairline +
   well fill + primary ink), so "Clear all" and the drawer's X resolve the same
   way. Asserted in drawer-affordances.spec.ts against the variant. */
.hdw-quiet:hover {
  border-color: var(--border-strong);
  background: var(--surface-well);
  color: var(--text-primary);
}
.hdw-quiet:disabled {
  opacity: 1;
  color: var(--text-muted);
  cursor: default;
  pointer-events: none;
}
.hdw-quiet svg {
  width: 12px;
  height: 12px;
}

/* ---- bar avatars/logos: the separator rings, and NOTHING that lifts. The
   tiles keep their border exactly as it was — the solid card-colored band that
   cuts each one out of its overlapping neighbour, the thin dark hairline around
   that, and the faint inner edge — but the `0 2px 6px` drop shadow is gone. It
   was the one layer doing elevation rather than separation, and it made a strip
   of 26px tiles read as chips floating over the pill.
   The logo selector carries :not(.rounded-full) to outrank the generic
   inset-hairline tile rule above (same trick, higher specificity). ---- */
.hdw-ab [data-slot='avatar']:not(.rounded-full) {
  /* the token opens with a solid card-colored ring, which cuts each tile out
     of its overlapping neighbour (square logos need a real band, not a
     hairline, to read as separate). No lift layer — #2138 took the drop shadow
     off these tiles and the token carries that. */
  box-shadow: var(--shadow-tile-overlap);
}
/* Ring in the bar's OWN surface color (not a translucent white), so each face
   cuts cleanly out of the one it overlaps — the same band the square logo
   tiles beside them already use. Its drop shadow came off with theirs. */
.hdw-ab .hdw-face,
.hdw-ab .hdw-face > * {
  box-shadow: var(--shadow-face-overlap);
  border-radius: 9999px;
}