/* ============================================================
   H&P DASHBOARD — SHARED COMPONENTS
   Cards, buttons, headers, terminals, row states
   ============================================================ */

/* Global: let icon strokes that hit the viewBox edge render past it — prevents the hair-thin clipping seen on many peach glyphs. */
svg { overflow: visible; }

/* ============================================================
   PAGE LAYOUT
   ============================================================ */

.page {
  /* No max-width — content area follows the screen edges (with --side-gutter
     padding). Cards inside section-col stay centered at their own max-width
     (--card-width = 560px), so on wide desktop they sit centered with lots of
     breathing room rather than pinned to a 800px container.
     On mobile (≤480px) --card-width drops to 100% so the card fills the
     available width minus gutter — the natural narrow-viewport behavior. */
  margin: 0 auto;
  padding: 0 var(--side-gutter) 60px;
  box-sizing: border-box;
}

/* Section column — full available width of .page (which is now uncapped),
   so the section spans the full viewport with --side-gutter on each edge.
   Cards inside still center at --card-width, getting the breathing-room feel
   the user asked for. On mobile (≤480px) --card-width drops to 100% so the
   card fills the column naturally. */
.section-col {
  width: 100%;
  margin: 0 auto;
}

/* Card wrapper — 560px centered. Card itself doesn't expand; the terminal
   panels inside (Full Message, AI Summary, Draft Reply, Summary, etc.)
   are what expand to viewport edges. */
/* A card takes the width it is given. Paired in a two-up row that is the
   column; on its own it is the whole content width, the way Mail Station
   already was — the 880px cap left every other group short of it. */
.card-wrap {
  width: 100%;
  margin: 0;   /* left-aligned to the section title */
}

/* Hidden-by-status cards: Lost/Limbo events + Lost contacts. Rendered to
   the DOM with their searchable text but invisible in the default view.
   applySearch() sets an inline `display:block` when a query matches,
   which overrides this rule and reveals the card temporarily. Clearing
   the search resets inline display to '' and the card hides again.
   Implementation note: uses display:none (not visibility) so the layout
   does NOT reserve space for these cards in the default view. */
.card-wrap.hidden-by-status {
  display: none;
}

/* ============================================================
   SECTION LAYOUT
   ============================================================ */

.section {
  margin-top: var(--gap-section);
}

.section:first-child {
  margin-top: 20px;
}

.subsection {
  margin-top: var(--gap-sub);
}

/* ============================================================
   SECTION HEADING (24px peach above card)
   ============================================================ */

.section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 0 10px 0;
  /* Section column is now full-width — the old --section-col-offset (100px)
     was sized to align titles with the card-wrap edge in a 760px section-col.
     Now that section-col spans the viewport, that fixed offset would stick
     titles to the left while cards float centered. Use a calc that derives
     the card's left edge from current section width: (section-width - card-
     width) / 2 produces the correct title-aligns-with-card position at any
     screen width. Falls back to 0 on narrow viewports where card width is
     100% and title sits flush with the card edge. */
  padding-left: 0;   /* title and card share one left edge */
}

/* First subsection directly under a title — no extra top margin (title padding already provides 20px) */
.section-title + .subsection {
  margin-top: 0;
}

.section-title-text {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: var(--fs-section);
  line-height: 1.25;
  letter-spacing: 2.4px;
  color: var(--peach);
  text-transform: uppercase;
}

/* Small icon beside section title (e.g. @ icon next to COMMS STATUS) */
.section-title-icon {
  display: inline-flex;
  align-items: center;
  color: var(--peach);
  opacity: 0.6;
  margin-left: 4px;
}

/* ============================================================
   SECTION HEADER BAR (peach bar with title + count)
   ============================================================ */

.section-header {
  width: 100%;
  height: 60px;
  background: var(--peach-fill);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 var(--card-pad-r) 0 var(--card-pad-l);
}

.section-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.section-header-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: var(--fs-bar);
  line-height: 1.4;
  letter-spacing: 1.8px;
  color: var(--on-peach);
  text-transform: uppercase;
}

.section-header-right {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
}

/* Count row: label + number inline on one line */
.section-header-count-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.section-header-label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-meta);
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--on-peach-dim);
  text-transform: uppercase;
}

.section-header-count {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--on-peach);
}

.section-header-sub {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-meta);
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--on-peach);
  text-transform: uppercase;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  width: 100%;
  background: var(--bg2);
  border: var(--border-w) solid var(--border);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  position: relative;
  overflow: visible;
}

/* Card body: left col + right col */
.card-body {
  display: flex;
  padding: var(--card-pad-t) var(--card-pad-r) 0 0;
  min-height: 88px;
}

.card-left {
  width: var(--left-col);
  min-width: var(--left-col);
  padding: 0 var(--col-gap) 0 var(--card-pad-l);
  flex-shrink: 0;
  position: relative;
}

.card-right {
  flex: 1;
  min-width: 0;
}

/* Date and type labels */
.card-date {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-name);
  line-height: 1.25;
  overflow-wrap: break-word;
  letter-spacing: 0;
  color: var(--peach);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.card-type {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--fs-meta);
  line-height: 1.3;
  letter-spacing: 0.4px;
  color: var(--dim-text);
  text-transform: uppercase;
}

/* Icon row below date/type */
.card-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.card-icons .icon,
.card-btns-trailing .icon,
.card-btns-trailing .gi-feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  cursor: pointer;
  flex-shrink: 0;
}
/* The glyphs were drawn at 15px inline, which reads as an afterthought
   beside a 28px pill. Height drives the scale and width follows the viewBox,
   so the phone (14x15) and the HoneyBook mark (26x15) stay in proportion. */
.card-icons .icon svg,
.card-btns-trailing .icon svg,
.card-btns-trailing .gi-feedback-btn svg,
.card-btns-trailing .gmail-open-link svg {
  height: 20px;
  width: auto;
}

.icon-dim { opacity: 0.25; }

/* Right col content */
.card-name {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-name);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--peach);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.card-venue {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--fs-meta);
  line-height: 1.3;
  letter-spacing: 0.4px;
  color: var(--dim-text);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.card-pkg {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-meta);
  line-height: 1.3;
  letter-spacing: 0.4px;
  color: var(--red);
  text-transform: uppercase;
  margin-top: 8px;
}

/* Event card SUMMARY panel — rich block (Crew + Inventory + Notes) rendered
   under the Claude-generated AI summary text. Mirrors the dynamic logistics
   URL inventory layout but compact for the in-card terminal panel. */
.evt-summary-section { margin-top: 16px; }
.evt-summary-section-lbl {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 0.5px solid rgba(var(--border-rgb),0.3);
}

/* Crew grid — fluid columns set inline per render */
.evt-summary-crew-grid { display: grid; gap: 6px; }
.evt-summary-crew-box  {
  background: rgba(var(--bg-rgb),0.5);
  border-radius: 2px;
  padding: 8px 10px;
}
.evt-summary-crew-name {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.evt-summary-crew-role {
  font-size: 10px;
  color: rgba(var(--white-rgb),0.7);
  line-height: 1.4;
}

/* Inventory groups + per-group footer */
.evt-summary-group { margin-bottom: 12px; }
.evt-summary-group-lbl {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dim-faint);
  margin-bottom: 5px;
}
.evt-summary-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.evt-summary-list li {
  font-size: 11px;
  color: var(--body, var(--white-body));
  display: flex;
  gap: 8px;
  line-height: 1.4;
  padding: 1px 0;
}
.evt-summary-qty { color: var(--peach); min-width: 22px; font-size: 10px; flex-shrink: 0; }
.evt-summary-totals {
  font-size: 9px;
  color: rgba(var(--white-rgb),0.5);
  letter-spacing: 0.5px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 0.5px solid rgba(var(--border-rgb),0.18);
}

/* Grand Total band — same Helvetica bold treatment as the URL */
.evt-summary-grand-total {
  background: rgba(var(--peach-rgb),0.05);
  border-radius: 2px;
  padding: 12px 14px;
  margin-top: 10px;
}
.evt-summary-grand-lbl-row {
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 10px;
  text-align: center;
}
.evt-summary-grand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 10px 6px;
}
.evt-summary-grand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.evt-summary-grand-qty {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--peach);
  padding-bottom: 5px;
}
.evt-summary-grand-item-lbl {
  font-size: 8px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(var(--white-rgb),0.45);
  text-align: center;
  line-height: 1.2;
}

/* Notes — preserves whitespace + line breaks from AT */
.evt-summary-notes {
  font-size: 11px;
  color: rgba(var(--white-rgb),0.85);
  line-height: 1.5;
  white-space: pre-wrap;
  background: rgba(var(--bg-rgb),0.4);
  padding: 10px 12px;
  border-radius: 2px;
}

/* Agentic Query — Loadout response.
   Date-range inventory rollup, styled to match the logistics-URL Grand Total
   so the planner gets the same "what to pack" treatment in the query panel. */
.loadout-hdr { margin-bottom: 12px; }
.loadout-answer {
  font-size: 11px;
  color: var(--peach);
  letter-spacing: 0.3px;
}
.loadout-section-lbl {
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dim-faint);
  margin-bottom: 6px;
}
.loadout-events { margin-bottom: 14px; }
.loadout-events-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.loadout-events-list li {
  font-size: 11px;
  color: var(--body, var(--white-body));
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
}
.loadout-event-date {
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--peach);
  min-width: 70px;
  flex-shrink: 0;
}
.loadout-event-name { font-weight: 700; }
.loadout-event-meta { color: rgba(var(--peach-rgb),0.4); font-size: 9px; }

.loadout-grand-total {
  background: rgba(var(--peach-rgb),0.05);
  border-radius: 2px;
  padding: 14px 16px;
}
.loadout-grand-lbl {
  font-size: 8px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 12px;
  text-align: center;
}
.loadout-grand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 12px 8px;
}
.loadout-grand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.loadout-grand-qty {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--peach);
  padding-bottom: 5px;
}
.loadout-grand-item-lbl {
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(var(--white-rgb),0.4);
  text-align: center;
  line-height: 1.3;
}
.loadout-empty {
  font-size: 11px;
  color: rgba(var(--white-rgb),0.5);
  font-style: italic;
  padding: 10px 0;
}

/* EVENT DAY pill — matches .badge sizing.
   Visible at Month of Prep / Week of Prep stages.
   Click → always opens dynamic logistics URL in new tab. */
.event-day-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pill-h);
  padding: 0 var(--ctl-pad);
  border-radius: var(--radius-pill);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-btn);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  /* Green key colours — this is a readiness state, not a peach action, and a
   solid peach slab was the loudest thing on the card. */
  background: rgba(var(--green-rgb),0.25);
  color: var(--green-ink);
  border: 1px solid var(--green-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.event-day-pill.incomplete { opacity: 0.5; }
.event-day-pill:active     { opacity: 0.8; }

/* 30-day separator — subtle horizontal rule between events ≤30 days and >30 days.
   Lives inline within the unified Active Events list. No label, just the rule. */
.events-30day-sep {
  height: 0;
  border-top: 1px solid rgba(var(--border-rgb),0.3);
  margin: 10px 0 10px;
}

.card-event-line {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--fs-meta);
  line-height: 14px;
  color: var(--dim-text);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.card-preview {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.5;
  /* Body copy is the light grey, not peach — peach is for labels and chrome.
     Matches the message body inside the panel it previews. */
  color: var(--white-body);
  margin-top: 10px;
  /* Force long unbreakable strings (URLs, tracking links) to wrap inside the card */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ============================================================
   BUTTON ROW (bottom of card)
   ============================================================ */

.card-btns {
  display: flex;
  align-items: center;
  padding: 0 var(--card-pad-r) 14px var(--card-pad-l);
  margin-top: 16px;
}

/* Tapping a tagged message's event pill expands it to show the full event
   name. On a narrow card the row ran out of room and the pill stopped dead at
   the trailing icons, so the name stayed cut off. Let the row wrap instead:
   the icon cluster drops to its own line (still right-aligned, since
   margin-left:auto applies per flex line) and the card grows to fit, using the
   band the "n MORE BELOW" pill would occupy. The pill itself must not shrink,
   or flex would squeeze it back down rather than wrapping. */
.card-btns { flex-wrap: wrap; row-gap: 8px; }
.card-btns .event-tag { flex-shrink: 0; }
.card-btns-trailing {
  margin-left: auto;
  padding-right: 14px;
  display: flex;
  align-items: center;
  gap: 14px;   /* the mockup's spacing — 6px put three icons in a huddle */
}
/* While expanded, allow the full 320px even if that forces the wrap. */
.card-btns .event-tag--tagged.is-expanded { flex-basis: auto; }

/* Buttons act as tabs — flush with open terminal below */
.card.has-open-terminal .card-btns {
  padding-bottom: 0;
}

/* Thread bar cards — remove card-btns bottom padding so thread bar controls its own spacing */
.card.has-thread-bar .card-btns {
  padding-bottom: 0;
}

/* Right-side icon buttons (G, Hb) pinned to card right */
.card-btns-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-right: var(--card-pad-r);
}

/* Base button */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-btn);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  /* Full radius: these are pills now, and they sit apart rather than flush.
     The square-tab-strip reading is gone, so the corner contrast against the
     status pills beside them goes with it. */
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  outline: none;
  padding: 0 var(--ctl-pad);
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}

/* Inactive: semi-dark bg, very dim peach text */
/* Resting — the card surface, held by a hairline so the shape reads without
   a heavy fill. */
.btn-inactive {
  background: var(--bg2);
  border-color: var(--pill-line);
  color: var(--dim-label);
}

/* Active — filled in. The peach tint rather than solid peach: solid would
   make every open panel shout from across the page, and the tint is the
   same "on" fill .badge-peach already uses. */
.btn-selected {
  background: var(--peach-fill);
  border-color: var(--peach);
  color: var(--on-peach);
}

/* Primary actions by state */
.btn-peach   { background: var(--peach-fill); color: var(--on-peach); padding: 0 10px; }
.btn-red     { background: var(--red);   color: var(--on-red);   padding: 0 10px; }
.btn-green   { background: var(--green); color: var(--on-green); padding: 0 10px; }

/* Dim secondaries */
.btn-dim-red   { background: var(--red-20);   color: var(--white-body); padding: 0 10px; }
.btn-dim-green { background: var(--green-20); color: var(--white-body); padding: 0 10px; }

/* Outline buttons (Draft Reply panel) */
.btn-outline {
  background: transparent;
  border: 0.5px solid var(--border);
  color: var(--peach);
  padding: 0 10px;
}
.btn-outline-red   { border-color: var(--border); color: var(--red); }
.btn-outline-green { border-color: var(--border); color: var(--green); }

/* Pill / save feedback button */
.btn-pill {
  background: var(--peach-25);
  color: var(--on-peach);
  padding: 0 16px;
  border-radius: var(--radius-save);
  height: var(--pill-h);
}

/* ============================================================
   ROW STATE MODIFIERS
   ============================================================ */

/* Default: standard peach */
.row-default { border-color: var(--border); }

/* Urgent: red border, red text overrides */
.row-urgent {
  border: 1px solid var(--red) !important;
}
.row-urgent .card-date,
.row-urgent .card-name,
.row-urgent .card-pkg     { color: var(--red); }
.row-urgent .card-type    { color: var(--red-25); }
.row-urgent .card-event-line { color: var(--red-25); }
.row-urgent .card-preview { color: var(--red); }
.row-urgent .icon         { color: var(--red); }

/* Confirmed: standard, CONFIRMED button */
/* (no extra styles needed — just uses .btn-peach on secondary button) */

/* Dormant: green tint throughout */
.row-dormant .card-date,
.row-dormant .card-name,
.row-dormant .card-pkg         { color: var(--green); }
.row-dormant .card-type        { color: var(--green-50); }
.row-dormant .card-event-line  { color: var(--green-50); }
.row-dormant .card-preview     { color: var(--green); }
.row-dormant .card-venue       { color: var(--green-50); }
.row-dormant .icon             { color: var(--green); }

/* ============================================================
   TERMINAL / VIEWPORT PANELS
   ============================================================ */

.terminal {
  width: 100%;
  background: var(--bg);
  border-radius: var(--radius-card);
  position: relative;
  overflow: visible;
  padding: 14px;
  display: none; /* hidden by default, shown when expanded */
}

.terminal.is-open { display: block; }

.terminal-text {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: 1px;
  color: var(--peach);
}

.terminal-text.is-urgent  { color: var(--red); }
.terminal-text.is-dormant { color: var(--green); }
.terminal-text.is-white   { color: var(--white-body); }

/* SUMMARY panel — cap height + internal scroll so a packed event card
   (long Claude summary + crew + inventory + notes) doesn't push everything
   else off the screen. Hidden scrollbar matches the Mail Station pattern. */
.terminal[data-panel="summary"] .terminal-text {
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge */
}
.terminal[data-panel="summary"] .terminal-text::-webkit-scrollbar { display: none; }

.terminal ul {
  list-style: disc;
  padding-left: 14px;
  margin-bottom: 8px;
}

.terminal li {
  margin-bottom: 2px;
}

.terminal-head {
  font-weight: 700;
  font-size: var(--fs-btn);
  line-height: 1.3;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

/* Minimize button — circular, top-right INSIDE the panel. It used to hang at
   -7.5px, centred on the right border, which only worked while panels bled
   past their card; now that a panel is card-width that put the circle on the
   card edge. (A button inside a .terminal-rail is positioned by the rail.) */
.btn-minimize {
  position: absolute;
  top: 14px;
  right: 14px;
  transform: none;
  width: 15px;
  height: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--peach);
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.btn-minimize.is-urgent  { color: var(--red); }
.btn-minimize.is-dormant { color: var(--green); }
/* Body text keeps clear of the circle it shares a corner with. */
.terminal > .btn-minimize ~ .terminal-text { padding-right: 30px; }

/* ============================================================
   SCROLL DOTS + MINIMIZE RAIL (Mail Station right edge)
   Combined vertical strip: minimize button on top, dots below.
   Sits outside the terminal box on the right.
   ============================================================ */

/* Rail: strip down the right edge, INSIDE the panel. It used to hang at
   -8px, half off the box; the dots and the collapse circle now sit within
   the panel's own bounds and the text is padded to clear them. */
.terminal-rail {
  position: absolute;
  right: 14px;
  top: 0;
  bottom: 0;
  width: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Minimize button inside rail — sits between top and bottom dot groups */
.terminal-rail .btn-minimize {
  position: static;
  transform: none;
  flex-shrink: 0;
  margin: 18px 0; /* 18px edge-to-edge gap between button and nearest dot */
}

/* Scroll dots inside rail — tight group, no flex grow, centered by rail's justify-content */
.terminal-rail .scroll-dots {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  width: auto;
}

.scroll-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--peach-fill);
  opacity: 0.30;            /* visible against the dark terminal even when inactive */
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.scroll-dot.is-active { opacity: 1; }

/* Anything sharing a panel with the rail keeps clear of it. */
.terminal-rail ~ .terminal-head,
.terminal-rail ~ .mail-pane-meta,
.terminal-rail ~ .terminal-text,
.terminal-rail ~ .terminal-scrollable { padding-right: 40px; }

/* Scrollable content area — leave room for the rail */
.terminal-scrollable {
  overflow-y: auto;
  max-height: 275px;
  padding-right: 8px;
  /* No system scrollbar — the right-rail dots are the position indicator. */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}
.terminal-scrollable::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* ============================================================
   MAIL PANELS — reference pane beside the composer
   FULL MESSAGE and AI SUMMARY share one slot; DRAFT REPLY has its
   own and takes the right half when open, so the message being
   answered never leaves the screen. Both panes are the same surface
   colour, so the split reads as one panel rather than two boxes.
   ============================================================ */
.mail-panels {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.mail-panels > .terminal.is-open {
  flex: 1 1 0;
  min-width: 0;
}
.mail-panels .terminal-head { color: var(--dim-text); }

/* Who wrote it and when — the reference pane's own header line. */
.mail-pane-meta {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--fs-meta);
  color: var(--dim-text);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 0.5px solid var(--hair);
}

/* 1180px is where the split actually earns its keep: the rail takes 212 and
   the gutters 56, so the composer still gets ~430px beside a 500px message.
   An iPad in landscape (1024) lands under that and stacks instead. */
@media (min-width: 1180px) {
  .mail-panels.is-split > .terminal[data-panel="full"],
  .mail-panels.is-split > .terminal[data-panel="summary"] {
    flex: 0 1 500px;
    border-radius: 0 0 0 var(--radius-card);
  }
  .mail-panels.is-split > .terminal[data-panel="draft"] {
    flex: 1 1 0;
    border-radius: 0 0 var(--radius-card) 0;
  }
  /* Split: the rail sits on the seam between the panes, so hold it off the
     divider rather than against it. */
  .mail-panels.is-split > .terminal .terminal-rail { right: 18px; }
}
/* Too narrow to sit side by side — stack, the way every other card does. */
@media (max-width: 1179.98px) {
  .mail-panels { display: block; }
}

/* On mobile: rail moves inside (no bleed outside section-col) */
@media (max-width: 480px) {
  .terminal-rail {
    right: 4px;
  }
}

/* ============================================================
   NAV BAR
   ============================================================ */

.nav {
  background: var(--peach-fill);
  width: 100%;
  transition: height 0.25s ease;
}

.nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  height: 70px;
  position: relative;
  display: flex;
  align-items: center;
  transition: height 0.25s ease;
}

.nav-logo {
  position: absolute;
  /* Anchored to the same side gutter as the page + query panel so the logo's
     left edge aligns vertically with all body content below. */
  left: var(--side-gutter);
  top: 0;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: width 0.25s ease, height 0.25s ease;
}

.nav-logo svg {
  flex-shrink: 0;
  transition: width 0.25s ease, height 0.25s ease;
}

/* Compact nav — collapses to button height on scroll */
.nav.is-compact,
.nav.is-compact .nav-inner {
  height: 25px;
  overflow: visible; /* let logo spill below */
}

/* Logo shrinks to 75% of full height (52px), bottom hangs below the compact bar */
.nav.is-compact .nav-logo {
  width: 52px;
  height: 52px;
}

.nav.is-compact .nav-logo svg {
  width: 52px;
  height: 52px;
}

.nav-buttons {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 20px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-nav);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: var(--peach-fill);
  color: var(--on-peach);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.nav-btn.is-active {
  background: var(--bg);
  color: var(--peach);
}

/* Hamburger (mobile) */
.nav-hamburger {
  display: none;
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--on-peach);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}

/* Mobile dropdown */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--peach-fill);
  flex-direction: column;
  z-index: 200;
}

.nav-dropdown.is-open { display: flex; }

.nav-dropdown .nav-btn {
  height: 35px;
  width: 100%;
  justify-content: center;
  border-top: 0.5px solid rgba(var(--ink-rgb),0.15);
}

.nav-sync {
  position: absolute;
  /* Mirror of .nav-logo's left gutter so the sync indicator's right edge
     aligns vertically with the page + query panel's right edges. */
  right: var(--side-gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-sync-time {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--bg);
  white-space: nowrap;
}

.nav-sync-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

@keyframes sync-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.nav-sync-icon.is-syncing svg {
  animation: sync-spin 0.65s linear;
}

.nav-signout-btn {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: 1px;
  line-height: 1.6;
  color: var(--on-peach);
  background: none;
  border: none;
  padding: 0 4px;
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 120ms;
}
.nav-signout-btn:hover { opacity: 1; }

/* ============================================================
   PAGINATION — Show More pill
   ============================================================ */

/* Items hidden by pagination — overrideable by inline style during search */
.is-over-limit { display: none; }

.show-more-wrap {
  padding: 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.show-more-pill {
  background: var(--peach-fill);
  border: none;
  border-radius: 10px;
  height: 16px;
  padding: 0 18px 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--fs-btn);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.show-more-count {
  font-weight: 700;
  color: var(--on-peach);
}
.show-more-label {
  color: var(--on-peach-dim);
  font-weight: 400;
}
.show-more-collapse {
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--peach);
  flex-shrink: 0;
}

/* ============================================================
   NAV SEARCH
   ============================================================ */

.nav-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  margin-right: 8px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.nav-search-btn:hover,
.nav-search-btn.is-active { opacity: 1; }

.nav-search-wrap {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 280px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 150ms ease, opacity 150ms ease;
  z-index: 100;
}
.nav-search-wrap.is-open {
  max-height: 35px;
  opacity: 1;
}
.nav-search-pill-inner {
  display: flex;
  align-items: center;
  background: rgba(var(--bg-rgb),0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  height: 25px;
  padding: 0 12px;
  gap: 6px;
}
.nav-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 10px;
  color: var(--white-body);
  letter-spacing: 1px;
  min-width: 0;
}
.nav-search-input::placeholder { color: rgba(var(--white-rgb),0.35); }
.nav-search-clear {
  background: none;
  border: none;
  color: var(--dim-text);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}
.nav-search-clear:hover { color: var(--white-body); }

.search-zero {
  padding: 12px;
  color: var(--dim-text);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Strategy C — full-history search fallback container.
   Sits above the events list, only shown when local DOM filter returns 0 hits. */
.search-history {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.18);
  border: 0.5px solid rgba(var(--peach-rgb),0.18);
  border-radius: 4px;
}
.search-history-header {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--peach);
  margin-bottom: 8px;
}
.search-history-loading,
.search-history-empty {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--dim-text);
  text-align: center;
  padding: 8px 0;
}
.search-history-section {
  margin-top: 10px;
}
.search-history-section:first-of-type { margin-top: 4px; }
.search-history-section-label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dim-faint);
  margin: 6px 0 4px;
}
.search-history-row {
  padding: 5px 0;
  border-bottom: 0.5px solid rgba(var(--peach-rgb),0.06);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.search-history-row:last-child { border-bottom: none; }
.search-history-row-primary {
  font-size: 11px;
  color: var(--peach);
  margin-bottom: 1px;
}
.search-history-row-secondary {
  font-size: 9px;
  color: rgba(var(--white-rgb),0.45);
  letter-spacing: 0.3px;
}

/* ============================================================
   LEGEND PILLS (Comms Status bottom)
   ============================================================ */

.legend-pills {
  display: flex;
  align-items: center;
  width: 340px;
  height: var(--pill-h);
  margin: 14px 0 0;
}

.legend-pill {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-btn);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--on-peach);
}

.legend-pill-green {
  background: var(--green-50);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.legend-pill-peach {
  background: rgba(var(--peach-rgb),0.5);
}

.legend-pill-red {
  background: var(--red-50);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

/* ============================================================
   EMAIL / TIMESTAMP ROW
   ============================================================ */

.card-email {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--fs-meta);
  line-height: 1.35;
  letter-spacing: 0.4px;
  color: var(--dim-text);
  text-transform: uppercase;
  margin-top: 4px;
}

.card-timestamp {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--peach);
}

.card-timestamp-dim {
  font-weight: 300;
  font-size: var(--fs-meta);
  color: var(--dim-text);
  margin-left: 7px;
}

/* ============================================================
   DRAFT REPLY PANEL
   ============================================================ */

.draft-header {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-btn);
  line-height: 1.3;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 8px;
}

.draft-header-dim {
  color: var(--dim-text);
}

.draft-body-box {
  border: 0.5px solid var(--border);
  padding: 8px 10px;
  margin-bottom: 6px;
}

.draft-body-text {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--white-body);
}

.draft-feedback-box {
  border: 0.5px solid var(--border);
  padding: 8px 10px;
  margin-bottom: 8px;
}

.draft-feedback-placeholder {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  color: var(--white-body);
  opacity: 0.5;
}

.draft-quality-label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--dim-text);
}

/* ============================================================
   MAIL THREAD COMPONENTS (Frances Cook thread expansion)
   ============================================================ */

/* Small thread-count pill — inline next to sender name */
.mail-thread-count {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--peach-fill);
  border-radius: 999px;
  padding: 0 10px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-micro);
  line-height: var(--pill-h);
  color: var(--on-peach);
  white-space: nowrap;
  margin-right: 5px;
}

/* Bar that sits at bottom of card — always visible on thread cards.
   Padding mirrors the standard card-pad-* tokens so the gap between the
   tabs above and the MORE BELOW button matches every other vertical
   spacing in the card. */
.mail-thread-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--card-pad-t) var(--card-pad-r) var(--card-pad-t) var(--card-pad-l);
}

/* Expand pill button */
.mail-thread-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--peach-fill);
  border-radius: 999px;
  padding: 0 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-btn);
  line-height: var(--pill-h);
  color: var(--on-peach);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.mail-thread-btn-dim {
  color: var(--on-peach-dim);
}

.mail-thread-btn.is-expanded {
  background: var(--bg);
  color: var(--peach);
}

.mail-thread-btn.is-expanded .mail-thread-btn-dim {
  color: var(--dim-text);
}

/* ============================================================
   MAIL THREAD — BUBBLE SKIN
   Same container and the same data as before (.mail-thread-rows keeps
   its id, so toggleThreadPanel / closeThreadPanel are untouched). The
   bordered two-column row became a bubble with a name + time line
   stamped above it: inbound left, outbound right, squared corners —
   a thread, not a chat app.
   ============================================================ */

/* Sibling to card-wrap, matching its width so the thread lines up under
   its parent card. Full-width Mail Station widens both together. */
.mail-thread-rows {
  display: none;
  width: 100%;              /* follows the card above it */
  margin: 0;
  position: relative;
}

.mail-thread-rows.is-open {
  display: block;
  background: var(--bg);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  padding: 20px 22px 24px;
}

/* Rail rides inside the right edge — collapse circle in the middle, scroll
   dots above and below, exactly as the message panels do it. */
.mail-thread-rows .terminal-rail {
  top: 20px;
  bottom: 24px;
}

/* Threads run long. Cap the height and scroll inside; the rail's dots are
   the position indicator, so no system scrollbar. */
.thread-scroll {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 40px;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge */
}
.thread-scroll::-webkit-scrollbar { display: none; }

/* Collapsed: same gap as all other cards */
.mail-thread-rows + .card-wrap {
  margin-top: 5px;
}
/* Expanded: a little air before the next thread starts */
.mail-thread-rows.is-open + .card-wrap {
  margin-top: 18px;
}

.thread-msg {
  display: flex;
  flex-direction: column;
  max-width: 74%;
  margin-bottom: 20px;
}
.thread-msg:last-of-type { margin-bottom: 0; }
.thread-msg.is-out {
  margin-left: auto;
  align-items: flex-end;
}

/* Name + time, stamped above the bubble */
.thread-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim-text);
  margin-bottom: 7px;
}
.thread-meta em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.85;
}
.thread-meta-att { display: inline-flex; line-height: 0; }
.thread-meta-att .att-group-marker,
.thread-meta-att .att-group-marker svg { width: 18px; height: 18px; }

.thread-bubble {
  background: var(--bubble-in);
  color: var(--white-body);
  border-radius: 3px;
  padding: 14px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  /* Long unbreakable strings (tracking URLs) wrap instead of widening the row */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.thread-msg.is-out .thread-bubble {
  background: var(--bubble-out);
}

/* ============================================================
   PAYMENT PROGRESS BAR
   ============================================================ */

.progress-bar {
  height: 8px;
  background: var(--bg);   /* dark track, as the artboard has it */
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0;
}

.progress-fill {
  height: 100%;
  background: var(--peach-fill);
  border-radius: 2px;
  transition: width 0.3s;
}

.progress-fill.is-paid   { background: var(--green); }
.progress-fill.is-urgent { background: var(--red); }

/* ============================================================
   STATUS BADGES
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pill-h);
  padding: 0 var(--ctl-pad);
  border-radius: var(--radius-pill);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-btn);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-peach  { background: var(--peach-25);        color: var(--peach);     }
.badge-red    { background: var(--red-25);          color: var(--red);       }
.badge-green  { background: var(--green-50);        color: var(--on-peach);  }
.badge-grey   { background: rgba(136,136,136,0.2);  color: #888888;          }

/* ============================================================
   STAGED REPLY (lost-deal close-out and similar)
   Worker auto-creates Tasks with a pre-drafted reply body in the
   Description. The DETAIL panel renders it in its own block with
   USE IN MAIL + COPY actions; the preview line shows a compact badge.
   ============================================================ */
.staged-reply-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(var(--red-rgb), 0.18);
  color: var(--red);
  padding: 2px 6px;
  border-radius: 2px;
  margin-right: 6px;
}
.staged-reply {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(var(--peach-rgb), 0.04);
  border: 0.5px solid rgba(var(--peach-rgb), 0.3);
  border-radius: 3px;
}
.staged-reply-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--peach);
  margin-bottom: 4px;
}
.staged-reply-meta {
  font-size: 9px;
  color: var(--dim-faint);
  margin-bottom: 8px;
}
.staged-reply-body {
  font-size: 10px;
  line-height: 1.45;
  color: var(--peach);
  white-space: pre-wrap;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  margin-bottom: 10px;
}
.staged-reply-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.staged-reply-actions .btn {
  height: 22px;
  font-size: 9px;
  padding: 0 12px;
}

/* ============================================================
   TASK DETAIL PANEL — enrichment blocks
   Lazy-loaded under each task's DETAIL terminal: linked event,
   related messages (clickable to Gmail), sibling open tasks.
   ============================================================ */
.task-detail-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid rgba(var(--peach-rgb), 0.18);
}
.task-detail-block .terminal-head {
  display: block;
  margin-bottom: 4px;
  opacity: 0.65;
}
.task-detail-msgs,
.task-detail-sibs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-detail-msg {
  padding: 6px 8px;
  background: rgba(var(--peach-rgb), 0.04);
  border-left: 1.5px solid rgba(var(--peach-rgb), 0.35);
  border-radius: 2px;
}
.task-detail-msg-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  color: var(--dim-faint);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.task-detail-msg-subj {
  font-size: 10px;
  font-weight: 700;
  color: var(--peach);
  margin-bottom: 2px;
}
.task-detail-msg-body {
  font-size: 10px;
  line-height: 1.4;
  color: var(--dim-text);
}
.task-detail-sib {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 10px;
  color: var(--peach);
}
.task-detail-deep {
  border-top: 0.5px solid rgba(var(--peach-rgb), 0.4);
}
.task-detail-deep-row .query-deep-btn {
  /* Reuse the same dark-circle "D" pill used in the aut\ panel */
}

/* ============================================================
   PRIORITY PILLS (Tasks)
   ============================================================ */

.priority-pill {
  display: inline-flex;
  align-items: center;
  height: var(--pill-h);
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.priority-high   { background: var(--red-25);   color: var(--red-ink); }
.priority-medium { background: var(--peach-25);  color: var(--peach); }
.priority-low    { background: rgba(var(--border-rgb),0.2); color: var(--dim-text); }

/* 10px between consecutive cards, per the artboard — 5px read as one block
   of cards rather than a list of them. */
.card-wrap + .card-wrap {
  margin-top: 10px;
}

.card-wrap.has-section-header {
  margin-bottom: 5px;
}

/* ============================================================
   RESPONSIVE — TABLET / MOBILE
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --section-col: 680px;
    --card-width:  480px;
    --section-col-offset: 100px;
  }
}

/* Collapse nav to hamburger earlier — tablets in portrait get clean menu too */
@media (max-width: 720px) {
  .nav-buttons { display: none; }
  .nav-hamburger { display: flex; }
}

/* ------------------------------------------------------------
   MOBILE (phones) — fit viewport, wrap overflowing rows
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  :root {
    --section-col: calc(100% - 8px);
    --card-width:  100%;
    --section-col-offset: 0px;
    --left-col: 92px;           /* narrower date/sender column */
    --card-pad-l: 10px;
    --card-pad-r: 10px;
    --gap-section: 28px;        /* tighter vertical rhythm */
  }

  /* Section titles align with cards (no desktop offset indent) */
  .section-title { padding-left: 6px; padding-right: 6px; }
  .section-title-text { font-size: 20px; line-height: 28px; letter-spacing: 1.8px; }

  /* Card button row: allow a second line instead of overflowing.
     Right cluster (reactions + Gmail + E) stays grouped via .card-btns-right margin-left:auto. */
  .card-btns {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .card-btns-right { gap: 6px; }

  /* Phone: the label can tighten, the target cannot. This used to force
     height 24px to fit three tabs on one row — which is the opposite of what
     a phone needs. The row wraps instead; --ctl-h stays 44 under the touch
     tier and the buttons keep a real tap area. */
  .btn {
    font-size: 10px;
    letter-spacing: 0.6px;
  }
  .btn-inactive,
  .btn-selected { padding: 0 12px; }

  /* Thread bar: wrap rather than overflow */
  .mail-thread-bar {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* Keep terminal inside card bounds on mobile (no negative-margin bleed) */
  .card.has-open-terminal:not(.has-thread-bar) .terminal,
  .card .terminal {
    width: 100%;
    margin-left: 0;
  }

  /* Prevent any media/content from breaking horizontal layout */
  .card,
  .card-wrap,
  .mail-thread-rows { max-width: 100%; overflow-x: hidden; }
  .card img,
  .card video { max-width: 100%; height: auto; }

  /* Nav brand/sync sizing */
  .nav-sync-time { display: none; }     /* timestamp eats too much width */
}

/* ============================================================
   MOBILE V2 — Petal OS dashboard, ≤640px
   ------------------------------------------------------------
   Entire block is self-contained. To revert: delete from this
   marker to the matching END marker at the bottom.
   Goals: cards + terminals run viewport-edge-to-edge, card content
          stacks vertically, all pill/action buttons sit above the
          tab buttons with a thin rule (inset by --card-pad-l/r) above.
   Anything outside cards keeps the standard --side-gutter padding.
   ============================================================ */
@media (max-width: 640px) {

  /* --- Cards: break out of section-col gutter to viewport edges --- */
  .card-wrap {
    margin-left:  calc(-1 * var(--side-gutter));
    margin-right: calc(-1 * var(--side-gutter));
    width: calc(100% + 2 * var(--side-gutter));
    max-width: 100vw;
    box-sizing: border-box;
  }
  .card { width: 100%; max-width: 100%; box-sizing: border-box; }

  /* --- Card body: stack name/role on top, content below ---
     Rule lives on .card-btns (below) so it sits between body content
     and the pill/tabs action area. */
  .card-body {
    flex-direction: column;
    padding: var(--card-pad-t) var(--card-pad-r) 0 var(--card-pad-l);
    position: relative;
    gap: 0;
  }
  .card-left {
    width: 100%;
    min-width: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .card-right {
    width: 100%;
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
  }

  /* Side icons → INLINE in the same flex row as the MAY 1 / WEDDING text.
     Dropped absolute positioning entirely because absolute was being beaten
     somewhere in the cascade. Inline-flex with align-items: flex-start
     guarantees the icons share the exact same top edge as the date text;
     margin-left:auto pushes them to the right edge of the row. */
  .card-icons {
    position: static !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    align-self: flex-start;
    gap: 8px;
    line-height: 0;
    flex-shrink: 0;
  }
  .card-icons .icon {
    display: inline-block;
    line-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
  }
  .card-icons .icon svg {
    display: block;
    vertical-align: top;
    margin: 0;
    padding: 0;
  }
  /* Cards carry absolutely-positioned buttons at the top right: the comms X at
     right:8px with its pencil at right:32px, and the event pencil at right:8px.
     Since the icon trio moved inline to the right edge of this row, it slides
     straight underneath them — on a 390px screen the event pencil landed on top
     of the phone icon, so neither could be tapped. Reserve the width each
     card's button cluster actually occupies, not a single button's worth.
       comms : pencil starts 32px in + 15px icon = 47px, round to 52
       events: pencil starts  8px in + 15px icon = 23px, round to 30 */
  .card.has-dismiss-btn .card-left {
    padding-right: 52px;
  }
  .card.has-edit-btn .card-left {
    padding-right: 30px;
  }

  /* --- EVENT DAY: hide the inline-with-name copy, show the action-row copy.
         Render-events.js emits the same button in both spots; CSS picks
         which is visible per breakpoint. --- */

  .card-btns .event-day-pill  { display: inline-flex; }

  /* --- Action row: pills wrap to their own line above the tabs ---
     Layout strategy:
       • Pills (everything that isn't .btn) get order: 1  → render first
       • A ::after pseudo with order: 2 + flex-basis: 100% forces a new row
       • Tabs (.btn) get order: 3  → render together on the new row
     Rule sits ABOVE the action row, inset by --card-pad-l/r via ::before. */
  .card-btns {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    column-gap: 8px;
    padding: var(--card-pad-t) var(--card-pad-r) var(--card-pad-t) var(--card-pad-l);
    margin-top: var(--card-pad-t);
    border-top: 0;             /* the inset rule comes from ::before */
    position: relative;
  }
  .card-btns::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--card-pad-l);
    right: var(--card-pad-r);
    border-top: 0.5px solid rgba(var(--border-rgb), 0.4);
  }
  /* Row break: 100%-wide zero-height flex item between pills (1) and tabs (3) */
  .card-btns::after {
    content: '';
    flex-basis: 100%;
    width: 100%;
    height: 0;
    order: 2;
  }
  .card-btns > .btn { order: 3; }
  .card-btns > .comms-pill-wrap,
  .card-btns > .comms-priority-wrap,
  .card-btns > .event-att-actions,
  .card-btns > .event-day-pill,
  .card-btns > .att-count-btn,
  .card-btns > .att-group-marker,
  .card-btns > div[style*="margin-left:auto"],
  .card-btns > div[style*="margin-left: auto"],
  .card-btns-right {
    order: 1;
    margin-left: 0 !important;
  }
  /* Push the event attachment-actions cluster to the right edge of the pill row */
  .card-btns > .event-att-actions {
    margin-left: auto !important;
  }

  /* Mobile: lay card-left as a single flex row holding date + type + icons.
     align-items: flex-start ensures the icons' top edges line up with the
     top of the MAY 1 glyph line (since they're all flex children of the
     same line). column-gap handles the visible spacing between date / type;
     icons get pushed to the right via margin-left: auto on .card-icons. */
  .card-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    column-gap: 8px;
  }
  .card-date,
  .card-type {
    display: inline-block;
  }
  /* EVENT DAY pill matches the small badge pills (ACTIVE / WEEK OF PREP) */
  .card-btns .event-day-pill {
    height: 18px;
    padding: 0 8px;
    margin-top: 0;
  }

  /* --- Terminal panels: viewport-wide, flush to edges ---
     The bleed JS now bails on mobile (see footer script), so terminals
     follow the standard CSS box model: 100% of card width = 100vw. */
  .card .terminal,
  .card .terminal.is-open {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- Section header: tighten line-height to match Figma mobile spec.
         Allow the title to wrap to a 2nd line so right-side toggles never
         overlap the text. Header grows to fit; peach background stays
         vertically centered. --- */
  .section-header {
    height: auto;
    min-height: 54px;
    padding-top: 10px;
    padding-bottom: 10px;
    align-items: center;
  }
  .section-header-inner {
    align-items: center;
    gap: 10px;
  }
  .section-header-title {
    font-size: 18px;
    line-height: 18px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Force-fit constraint so "RECENT MESSAGES" wraps to two lines and
       the INBOUND + LATEST toggles get their lane on the right. */
    flex: 0 1 auto;
    max-width: 40%;
    min-width: 0;
  }
  .section-header-right {
    flex-shrink: 0;
  }

  /* --- INBOUND filter: drop out of absolute positioning so it sits inline
         between the section title and the LATEST count column on the right.
         Visual order: RECENT MESSAGES   [INBOUND]   LATEST: 39 +
         translateX(-20px) shifts the whole INBOUND ensemble (button +
         dropdown stack) left by 20px without disturbing the LATEST
         column's position. --- */
  .mail-filter {
    position: static;
    width: auto;
    transform: translateX(-20px);
  }
  .mail-filter-active {
    width: auto;
    height: 22px;
    padding: 0 12px;
  }
  .mail-filter.is-open .mail-filter-active {
    height: 18px;
  }
  .mail-filter-stack {
    bottom: 22px;
  }
  .mail-filter-opt {
    height: 18px;
  }
  .mail-header-right {
    align-items: center;
    gap: 8px;
  }

  /* --- aut\ panel: span edge-to-edge with internal padding preserved --- */
  .query-panel {
    margin-left: var(--side-gutter);
    margin-right: var(--side-gutter);
    width: calc(100% - 2 * var(--side-gutter));
    max-width: 100vw;
    box-sizing: border-box;
  }
  /* Prevent iOS Safari from zooming on input focus while keeping the visual
     font size unchanged. iOS only auto-zooms when the source font-size is
     < 16px, so we set 16px (zoom suppressed) and then transform-scale the
     element back down to its original visual size. transform-origin is left
     center so the cursor and placeholder don't drift. width: 160% combined
     with scale(0.625) keeps the visible box exactly 100% of its parent. */
  /* .query-input rejoins this list: it needs the same 16px-then-scale trick so
     iOS does not zoom on focus and the visual size stays 10px. Its geometry
     (line-height, heights, flex basis) is corrected in index.html, where the
     base .query-input rule lives. */
  .query-input,
  .nav-search-input,
  .event-tag-input,
  .compose-subj-input,
  .ai-rate-feedback,
  .to-pill-input {
    font-size: 16px !important;
    transform: scale(0.625);
    transform-origin: left center;
    width: 160% !important;
  }
  /* Parents need overflow:hidden so the scaled 160%-wide input doesn't push
     past the container before the visual scale brings it back to 100%. */
  .nav-search-pill-inner,
  .query-input-row,
  .compose-subj-bar {
    overflow: hidden;
  }

  /* aut\ compose row — back to the row-scale approach (visual font ~10px,
     matching the rest of the modal). transform-origin: left top so visual
     top = layout top, then a negative margin-bottom soaks up the empty
     layout space below the visual content. Pairs with neighboring margins
     zeroed (compose-addr below, compose-subj-bar above) so the visible gap
     above and below the row lands at exactly 10px. */
  .compose-prompt-row {
    transform: scale(0.625);
    transform-origin: left top;
    width: 160% !important;
    height: 56px !important;
    align-items: stretch;
    margin-top: 10px;
    /* layout 56px × (1 - 0.625) = 21px of empty space below visual content;
       margin-bottom = 10 (target visual gap) - 21 (empty space) = -11px */
    margin-bottom: -11px;
  }
  .compose-prompt {
    font-size: 16px !important;
    padding: 10px 12px !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  .compose-go {
    font-size: 16px !important;
    width: auto !important;
    padding: 0 18px !important;
    min-width: 0;
  }
  .compose-addr {
    margin-bottom: 0 !important;
  }
  .compose-subj-bar {
    margin-top: 0 !important;
  }

  /* Switch compose-addr to a 2-column grid so FROM + pill share row 1 and
     TO + address-pill share row 2. max-content columns + justify-content
     start = each column hugs its content's natural width and the rows
     start at the left edge. column-gap: 10px puts each pill exactly 10px
     to the right of FROM / TO. */
  .compose-addr {
    display: grid !important;
    grid-template-columns: max-content max-content;
    justify-content: start;
    column-gap: 10px;
    row-gap: 6px;
  }
  .compose-addr > .compose-addr-label {
    margin: 0 !important;
  }
  .compose-addr > .compose-pill,
  .compose-addr > .compose-to-pills {
    justify-self: start;
    flex-basis: auto;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
  /* Address pill: shrink everything in the chain — the .compose-to-pills
     container, the .to-pill wrapper, and the .to-pill-input itself — so
     the pill hugs the "address here" placeholder. Fixed 90px on the input
     because :is-editing pill bg makes mismeasurement very visible. */
  .compose-to-pills > .to-pill {
    width: auto !important;
    max-width: max-content;
    flex: 0 0 auto !important;
  }
  .compose-to-pills .to-pill-input {
    min-width: 0 !important;
    width: 90px !important;
    max-width: 90px;
  }

  /* --- Nav search dropdown: span viewport edge-to-edge with internal padding.
         Pill itself gets more internal vertical padding and a fully-rounded
         radius so it stays a true pill shape at the larger height. --- */
  .nav-search-wrap {
    position: fixed;
    top: 50px;
    left: var(--side-gutter);
    right: var(--side-gutter);
    width: auto;
  }
  .nav-search-wrap.is-open {
    max-height: 50px;
  }
  .nav-search-pill-inner {
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
  }

  /* --- Edge-to-edge treatment for trays that aren't already wrapped in
         .card-wrap (Needs Review, GI contacts, Payment Review). The Match
         Review tray already lives inside a .card-wrap so it inherits the
         existing card-wrap bleed. Apply the same negative-margin pattern. --- */
  #needs-review-tray:not(:empty),
  #gi-contacts-tray:not(:empty),
  #payment-review-tray:not(:empty) {
    margin-left:  calc(-1 * var(--side-gutter));
    margin-right: calc(-1 * var(--side-gutter));
    width: calc(100% + 2 * var(--side-gutter));
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* --- Mail thread rows: edge-to-edge + stack date/name on top of body
         (matches the card-body stacking pattern). --- */
  .mail-thread-rows {
    margin-left:  calc(-1 * var(--side-gutter));
    margin-right: calc(-1 * var(--side-gutter));
    width: calc(100% + 2 * var(--side-gutter));
    max-width: 100vw;
    box-sizing: border-box;
  }
  /* Bubbles get most of the width back — 74% of a phone is unreadable. */
  .mail-thread-rows.is-open {
    padding: 16px var(--card-pad-r) 18px var(--card-pad-l);
  }
  .thread-msg { max-width: 88%; }
  .thread-scroll { max-height: 60vh; padding-right: 30px; }

  /* --- Mail terminal: pull scroll dots inside viewport, respecting padding --- */
  .terminal-rail {
    right: var(--card-pad-r);
  }
  .mail-terminal .scroll-dots {
    right: var(--card-pad-r);
  }

  /* --- Minimize circle: move inside container at top-right with the same
         inset padding as everything else (was hanging off the edge at -7.5px). --- */
  .terminal > .btn-minimize {
    top: var(--card-pad-t);
    right: var(--card-pad-r);
    transform: none;
  }

  /* --- Draft Reply: zero out compose-shell padding so the only inset is the
         terminal's own card-pad-* (matches the rest of the card edges).
         !important required because index.html's inline <style> block sets
         padding: 18px 22px on .compose-shell.is-draft and is loaded after
         components.css, so it would otherwise win the cascade. --- */
  .terminal[data-panel="draft"] {
    padding: var(--card-pad-t) var(--card-pad-r) var(--card-pad-t) var(--card-pad-l) !important;
  }
  .compose-shell.is-draft {
    padding: 0 !important;
  }
  .compose-shell.is-draft .compose-minimize {
    top: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  /* --- New Message modal (.compose-shell, not is-draft): match the same
         internal padding tokens as everything else, and pin the X close
         button to the top-right inside that padding (was floating off the
         middle-right edge). --- */
  .compose-shell:not(.is-draft) {
    padding: var(--card-pad-t) var(--card-pad-r) var(--card-pad-t) var(--card-pad-l) !important;
  }
  .compose-shell:not(.is-draft) .compose-minimize {
    top: var(--card-pad-t) !important;
    right: var(--card-pad-r) !important;
    transform: none !important;
  }

  /* --- Belt-and-suspenders: prevent horizontal scroll --- */
  html, body { max-width: 100vw; overflow-x: hidden; }
}

/* EVENT DAY lives on the button row at every width now — there is no second
   copy to pick between. */
/* === END MOBILE V2 === */