/* Subscribers → Sequences — the six-board artefact of 2026-09-17 (Kit's
   layout, our styling) under app tokens. No raw hex: every colour is a token
   with a fallback. The page-head, .btn, .input, .textarea come from app-shell. */

.seq-empty { padding: 40px 0; color: var(--text-2, #4d5168); font-size: 14.5px; line-height: 1.6; }
.seq-empty a, .seq-help a { color: var(--accent, #6a4cf1); }
.seq-help { font-size: 12.5px; color: var(--text-3, #8a8fa6); line-height: 1.5; }
.seq-help-lg { font-size: 13.5px; color: var(--text-2, #4d5168); }
.seq-muted { color: var(--text-3, #8a8fa6); }
.seq-msg { font-size: 13px; color: var(--danger, #c0423a); min-height: 1em; }
/* ⚠ THE LINE IS RED BECAUSE EVERYTHING THAT USED IT WAS A FAILURE.
   "Test sent to you" in the danger colour reads as "test failed", so
   good news gets the ordinary text colour instead. */
.seq-msg.ok { color: var(--text-2, #4d5168); }
/* The hover bubble beside a tag picker (Alex, 2026-09-20: "There should be a
   little information bubble that you can hover over"). Focusable as well as
   hoverable, so it is reachable from the keyboard and on a touch screen. */
/* ⚠ IT SITS INSIDE `.seq-label`, WHICH IS UPPERCASE AND LETTER-SPACED.
   Both inherit, so without these resets the bubble SHOUTS ITS WHOLE
   PARAGRAPH IN CAPITALS, spaced out, which is unreadable. */
.seq-info { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; cursor: help; flex: none;
  background: var(--surface-3, #f1eee5); color: var(--text-2, #4d5168);
  font: 600 11px Inter, sans-serif; font-style: normal; vertical-align: middle;
  text-transform: none; letter-spacing: normal; }
.seq-info:hover, .seq-info:focus { background: var(--accent-soft, #efeaff); color: var(--accent-deep, #4a32b8); outline: none; }
/* Opens DOWNWARD. Upward looked tidier and clipped: the tag picker sits near
   the top of a scrolling settings panel, and a five-line bubble above it was
   cut off by the panel edge (measured in Chromium, 2026-09-20). */
.seq-info > span { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 40; width: 280px; max-width: 70vw; padding: 10px 12px; border-radius: 10px;
  background: var(--text, #15172b); color: #fff; font: 400 12.5px/1.5 Inter, sans-serif;
  text-align: left; text-transform: none; letter-spacing: normal; white-space: normal;
  box-shadow: 0 8px 24px rgba(21, 23, 43, .18);
  opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; }
.seq-info > span b { font-weight: 600; }
.seq-info:hover > span, .seq-info:focus > span { opacity: 1; visibility: visible; }
/* Near the left edge the bubble would hang off the panel. */
.seq-grid2 .seq-info > span { left: 0; transform: none; }
.hidden { display: none !important; }
.seq-card { background: var(--surface, #fff); border: 1px solid var(--border, #e8e4d8); border-radius: var(--radius, 12px); }
.seq-stack { display: flex; flex-direction: column; gap: 20px; }
.seq-narrow { max-width: 860px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 24px; }
.seq-h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700; margin: 0; }
.seq-label { font-size: 12.5px; font-weight: 600; color: var(--text-2, #4d5168); text-transform: uppercase; letter-spacing: .04em; }
.seq-field { display: flex; flex-direction: column; gap: 6px; }
.seq-row-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.seq-row-inline > .input { flex: 1; min-width: 160px; }

/* Pills. */
.seq-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.seq-pill-sm { height: 20px; font-size: 11px; }
.seq-pill-good { background: var(--good-soft, #e2f3ea); color: var(--good, #1c8e5a); }
.seq-pill-muted { background: var(--surface-3, #f1eee5); color: var(--text-2, #4d5168); }
.seq-pill-warn { background: var(--warn-soft, #fbf0d9); color: var(--warn, #b87410); }
.seq-pill-accent { background: var(--accent-soft, #efeaff); color: var(--accent-deep, #4a32b8); font-size: 12px; vertical-align: middle; margin-left: 8px; }

/* The toggle (Kit's Active switch). */
.seq-toggle { width: 44px; height: 24px; border-radius: 999px; background: var(--border-strong, #d8d3c2); border: 0; position: relative; cursor: pointer; padding: 0; flex: none; }
.seq-toggle.on { background: var(--good, #1c8e5a); }
.seq-toggle i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .12s; }
.seq-toggle.on i { left: 23px; }
.seq-toggle-wrap { display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--text-2, #4d5168); }

/* Tables. */
/* Sideways scroll, never clipping: at phone width the Analytics table's click
   rate and unsubscribes columns were cut off behind the card edge (measured at
   390px on the 2026-09-18 real-data render). The table keeps a readable width
   and the card scrolls. */
.seq-table-wrap { overflow-x: auto; overflow-y: hidden; }
@media (max-width: 700px) { .seq-table-wrap .seq-table { min-width: 620px; } }
.seq-table { border-collapse: collapse; width: 100%; }
.seq-table th { text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3, #8a8fa6); font-weight: 500; padding: 12px 16px; border-bottom: 1px solid var(--border, #e8e4d8); background: var(--surface-2, #faf9f4); white-space: nowrap; }
.seq-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-soft, #efece2); font-size: 14px; vertical-align: middle; }
.seq-table tr:last-child td { border-bottom: 0; }
.seq-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.seq-th-name { width: 34%; }
.seq-th-check { width: 40px; }
.seq-row { cursor: pointer; }
.seq-row:hover td { background: var(--surface-2, #faf9f4); }
.seq-row-n { font-weight: 600; }
.seq-row-d { font-size: 12.5px; color: var(--text-3, #8a8fa6); margin-top: 2px; }
.seq-kebab-cell { text-align: right; width: 44px; }

/* ⋮ menus: native <details>, no popover library. */
.seq-menu { position: relative; display: inline-block; }
.seq-menu summary { list-style: none; cursor: pointer; color: var(--text-3, #8a8fa6); font-size: 18px; padding: 2px 8px; border-radius: 8px; user-select: none; }
.seq-menu summary::-webkit-details-marker { display: none; }
.seq-menu summary:hover { background: var(--surface-3, #f1eee5); color: var(--text, #15172b); }
.seq-menu:not([open]) > div { display: none; }
.seq-menu > div { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 200px; padding: 6px; background: var(--surface, #fff); border: 1px solid var(--border, #e8e4d8); border-radius: 10px; box-shadow: 0 8px 24px rgba(21, 23, 43, .08); display: flex; flex-direction: column; }
.seq-menu > div button { text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: 8px; font: 13.5px Inter, sans-serif; color: var(--text, #15172b); cursor: pointer; }
.seq-menu > div button:hover { background: var(--surface-2, #faf9f4); }

/* Board 1 · the list. */
.seq-list-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.seq-chips { display: inline-flex; background: var(--surface, #fff); border: 1px solid var(--border, #e8e4d8); border-radius: 10px; padding: 4px; gap: 2px; }
.seq-chip { height: 32px; padding: 0 14px; border: 0; background: transparent; border-radius: 8px; font: 500 13.5px Inter, sans-serif; color: var(--text-2, #4d5168); cursor: pointer; }
.seq-chip.on { background: var(--accent-soft, #efeaff); color: var(--accent-deep, #4a32b8); font-weight: 600; }
/* The two ways people get into a sequence (migration 741). Sits in the
   settings grid's value column, so it must not inherit .seq-label's caps. */
.seq-entry-mode { display: flex; flex-direction: column; gap: 6px; text-transform: none; letter-spacing: normal; }
.seq-entry-mode .seq-radio-row { margin: 0; }

.seq-sort { display: flex; align-items: center; gap: 8px; color: var(--text-2, #4d5168); font-size: 13.5px; }
/* ⚠ A HEIGHT ON TOP OF .input's PADDING CLIPS THE WORDS INSIDE A <select>.
   `.input` (app-shell) is padding: 11px 14px, and `* { box-sizing: border-box }`
   means this 36px is the OUTER box: 36 - 22 - 2 = a 12px content box for a
   14px font. Measured in Chromium on this exact markup: "Recently updated"
   came back with the descenders of its y and p sliced off, on the Automations
   list bar and the Sequences one alike — one rule, two screens.
   So the compact height stays (it sits beside 32px chips) and the vertical
   padding goes, which is what a native <select> wants anyway: with no padding
   it centres its own text in the box. Horizontal padding is kept. */
.seq-sort .input { height: 36px; padding-top: 0; padding-bottom: 0; }

/* Boards 2–6 · the editor head. */
.seq-ed-head .seq-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seq-iconbtn { background: none; border: 0; padding: 4px; color: var(--text-3, #8a8fa6); cursor: pointer; border-radius: 8px; display: inline-flex; }
.seq-iconbtn:hover { color: var(--text, #15172b); background: var(--surface-3, #f1eee5); }
.seq-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border, #e8e4d8); margin: 8px 0 18px; overflow-x: auto; }
.seq-tab, .seq-rtab { height: 40px; padding: 0 14px; border: 0; background: none; font: 500 14px Inter, sans-serif; color: var(--text-2, #4d5168); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.seq-tab.on, .seq-rtab.on { color: var(--text, #15172b); border-bottom-color: var(--accent, #6a4cf1); font-weight: 600; }
.seq-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 10px; background: var(--accent-soft, #efeaff); color: var(--accent-deep, #4a32b8); font-size: 13.5px; margin-bottom: 18px; flex-wrap: wrap; }
.seq-banner .btn { height: 34px; }
.seq-banner-info { margin-bottom: 0; line-height: 1.5; }

/* Board 2 · Content. */
.seq-content { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .seq-content { grid-template-columns: minmax(0, 1fr); } }
.seq-editor { min-width: 0; }
.seq-editor { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.seq-empty-card { padding: 24px; color: var(--text-2, #4d5168); line-height: 1.6; }
.seq-controls { display: flex; gap: 28px; align-items: flex-end; flex-wrap: wrap; }
.seq-controls .seq-field { gap: 8px; }
.seq-controls select.input { min-width: 200px; }
.seq-sliders { height: 40px; }
.seq-who { gap: 6px; }
.seq-who-btn { text-align: left; cursor: pointer; max-width: 100%; white-space: normal; line-height: 1.35; }
.seq-who-btn.on { border-color: var(--accent, #4338CA); background: var(--accent-soft, #EEEDFB); }
.seq-who-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border, #E4E2DA); border-radius: 10px; }
.seq-who-rows { display: flex; flex-direction: column; gap: 6px; }
.seq-who-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.seq-who-x { border: 0; background: none; font-size: 18px; line-height: 1; min-width: 44px; min-height: 44px; cursor: pointer; color: var(--text-2, #5B5A63); }
.seq-who-join { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seq-who-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.seq-held-note { font-size: 12.5px; color: var(--warn, #b87410); background: var(--warn-soft, #fbf0d9); padding: 8px 12px; border-radius: 8px; }
.seq-brief { font-size: 13px; color: var(--text-2, #4d5168); line-height: 1.5; }
.seq-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border, #e8e4d8); border-radius: 10px 10px 0 0; padding: 6px 10px; background: var(--surface-2, #faf9f4); margin-bottom: -16px; }
.seq-tools { display: flex; gap: 2px; align-items: center; }
.seq-tools > button, .seq-merge summary { height: 32px; min-width: 32px; padding: 0 8px; border: 0; background: none; border-radius: 8px; font: 500 14px Inter, sans-serif; color: var(--text-2, #4d5168); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.seq-tools > button:hover, .seq-tools > button.on, .seq-merge summary:hover { background: var(--surface-3, #f1eee5); color: var(--text, #15172b); }
.seq-tools > button.on { color: var(--accent-deep, #4a32b8); }
.seq-merge > div { left: 0; right: auto; }
.seq-body-wrap { border: 1px solid var(--border, #e8e4d8); border-top: 0; border-radius: 0 0 10px 10px; }
.seq-body { width: 100%; border: 0; border-radius: 0 0 10px 10px; padding: 16px; font-size: 15px; line-height: 1.6; resize: vertical; box-sizing: border-box; min-height: 300px; }
.seq-body:focus { outline: 2px solid var(--accent-soft, #efeaff); }
.seq-preview { padding: 16px; }
.seq-preview-head { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3, #8a8fa6); margin-bottom: 6px; }
.seq-preview-sub { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.seq-preview iframe { width: 100%; border: 1px solid var(--border, #e8e4d8); border-radius: 8px; min-height: 240px; background: var(--surface, #fff); }
.seq-cta { font-size: 12.5px; color: var(--text-2, #4d5168); word-break: break-all; }
.seq-cta.missing { color: var(--warn, #b87410); }
.seq-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.seq-actions .input { flex: 1; min-width: 220px; }
.seq-expanded .seq-body { min-height: 640px; }

.seq-rail { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.seq-rail-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border, #e8e4d8); }
.seq-rail-list { display: flex; flex-direction: column; gap: 8px; }
.seq-rail-row { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; border: 1px solid var(--border-soft, #efece2); background: var(--surface, #fff); cursor: pointer; }
.seq-rail-row:hover { border-color: var(--border, #e8e4d8); }
.seq-rail-row.on { border-color: var(--accent, #6a4cf1); background: var(--accent-softer, #f5f1ff); }
.seq-rail-row.dragging { opacity: .5; }
.seq-rail-row.over { border-top: 2px solid var(--accent, #6a4cf1); }
.seq-grip { color: var(--text-4, #b3b6c4); cursor: grab; display: inline-flex; }
.seq-grip.off { visibility: hidden; }
.seq-rail-main { flex: 1; min-width: 0; }
.seq-rail-t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; min-width: 0; }
.seq-rail-t > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.seq-rail-d { font-size: 12px; color: var(--text-3, #8a8fa6); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.seq-rail-d svg { width: 12px; height: 12px; }
.seq-rail-add { justify-content: center; }
.seq-styles { display: flex; flex-direction: column; gap: 10px; }
.seq-style { display: flex; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; }
.seq-style small { color: var(--text-3, #8a8fa6); }
.seq-style-thumb { width: 72px; height: 52px; border: 1px solid var(--border, #e8e4d8); border-radius: 8px; background: var(--surface-2, #faf9f4); display: flex; flex-direction: column; gap: 4px; padding: 7px; box-sizing: border-box; flex: none; }
.seq-style-thumb i { display: block; height: 4px; width: 80%; background: var(--border-soft, #efece2); border-radius: 2px; }
.seq-style-thumb i:first-child { height: 6px; width: 40%; background: var(--border-strong, #d8d3c2); }
.seq-style-thumb b { display: block; height: 8px; width: 30%; background: var(--accent, #6a4cf1); border-radius: 3px; margin-top: 2px; }

/* Board 3 · Analytics. */
.seq-tiles { display: flex; flex-wrap: wrap; }
.seq-tile { flex: 1 1 140px; padding: 18px 20px; border-right: 1px solid var(--border-soft, #efece2); }
.seq-tile:last-child { border-right: 0; }
.seq-tile .k { font-size: 13px; color: var(--text-2, #4d5168); margin-bottom: 8px; }
.seq-tile .v { font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 700; }

/* A number that opens the people behind it. It inherits type from whatever it
   sits in — a 30px tile figure or a 14px table cell — so one rule serves both
   and neither needs to know it has become a button. The affordance is the
   underline on hover, not a colour: these are figures first. */
.seq-drill { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color .12s ease, color .12s ease; }
.seq-drill:hover, .seq-drill:focus-visible { color: var(--accent, #3d5afe); text-decoration-color: currentColor; }
.seq-drill:focus-visible { outline: 2px solid var(--accent, #3d5afe); outline-offset: 3px; border-radius: 4px; }

/* "Email 2 ×" beside the recipients filter, when a drill-down is scoped to one. */
.seq-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px;
  border: 1px solid var(--border-soft, #efece2); border-radius: 999px; font-size: 13px;
  color: var(--text-2, #4d5168); background: var(--surface-2, #faf9f5); white-space: nowrap; }
.seq-filter-chip button { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1;
  color: var(--text-3, #8a8fa6); padding: 2px 4px; border-radius: 4px; }
.seq-filter-chip button:hover { color: var(--text, #15172b); }

/* Board 4 · Recipients. */
.seq-recip-bar { margin: 0; }
.seq-recip-filter { width: 220px; }
.seq-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; color: var(--text-3, #8a8fa6); }
.seq-search input { border: 0; outline: 0; flex: 1; font: 14px Inter, sans-serif; background: transparent; color: var(--text, #15172b); }
.seq-addpanel { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.seq-add-hits { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.seq-add-hit { display: flex; gap: 10px; align-items: center; font-size: 14px; padding: 6px 4px; }
.seq-add-hit span:last-child { margin-left: auto; font-size: 12.5px; }

/* Board 5 · Used in. */
.seq-note { padding: 16px; font-size: 14px; }

/* Board 6 · Settings. */
.seq-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 1000px) { .seq-settings { grid-template-columns: 1fr; } .seq-settings-right { border-left: 0 !important; padding-left: 0 !important; } }
.seq-settings-col { display: flex; flex-direction: column; gap: 28px; }
.seq-settings-right { border-left: 1px solid var(--border, #e8e4d8); padding-left: 32px; }
.seq-section { display: flex; flex-direction: column; gap: 16px; }
.seq-grid2 { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px 16px; align-items: center; }
@media (max-width: 700px) { .seq-grid2 { grid-template-columns: 1fr; } }
.seq-tmpl { display: flex; align-items: center; gap: 14px; }
.seq-tmpl a { font-size: 13px; color: var(--accent, #6a4cf1); }
.seq-days-pick { display: flex; gap: 18px; flex-wrap: wrap; }
.seq-days-pick label { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2, #4d5168); }
.seq-time { width: 120px; flex: none !important; min-width: 0 !important; }
.seq-radios { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.seq-radio-inline { display: flex; align-items: center; gap: 8px; }
/* The two clock radios live INSIDE the "Around" row so the choice sits where
   the time is picked (Alex, 2026-09-21). `.seq-row-inline` wraps, so without a
   full-width basis they would trail after the time and zone selects on a wide
   screen and read as a third control rather than a question about the first
   two. */
.seq-clock-pick { flex-basis: 100%; }
/* The bubble hangs off the END of the second radio, which sits mid-row, so the
   centred default would put half of a 280px popup outside the settings column. */
.seq-clock-pick .seq-info > span { left: 0; transform: none; }
.seq-q { font-size: 14.5px; font-weight: 600; }
.seq-radio-row { display: flex; gap: 10px; font-size: 14px; align-items: flex-start; cursor: pointer; }
.seq-radio-row input { margin-top: 3px; flex: none; }
.seq-radio-row > span { display: flex; flex-direction: column; gap: 2px; }
.seq-radio-t { font-weight: 500; }
.seq-exclude summary { display: flex; align-items: center; list-style: none; cursor: pointer; }
.seq-exclude summary::-webkit-details-marker { display: none; }
.seq-exclude-body { margin-top: 8px; padding: 12px; border: 1px solid var(--border, #e8e4d8); border-radius: 10px; background: var(--surface, #fff); display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.seq-check-inline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.seq-settings-actions { margin-top: 8px; }
/* pointer-events: none — a positioned toast at opacity 0 is invisible but still
   hit-testable, and this one sits over the editor's save bar (ratchet:
   tests/toast-never-eats-a-tap.test.js). */
.seq-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--text, #15172b); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13.5px; z-index: 50; pointer-events: none; }

/* ── The 48-hour send forecast, on each email in the rail ──────────────────
   Alex, 2026-09-21: "It'd be nice to have some visibility into the future as
   to what's being sent out when you hover over it in the email sequence."

   ⚠️ OPENS DOWNWARD AND TO THE LEFT. The rail is the left column and these
   rows sit near the top of it, so a popover anchored upward is clipped by the
   card — the same trap the tag info bubble hit on 2026-09-20, fixed there the
   same way and worth not rediscovering a third time.
   ⚠️ AND IT RESETS text-transform / letter-spacing, because .seq-rail-d is
   small-caps and tracked; inherited, the numbers come out shouted. */
.seq-fc { position: relative; display: inline-flex; align-items: center; margin-left: 8px;
          color: var(--seq-muted, #94a3b8); cursor: default; outline: none; }
.seq-fc .ico { width: 13px; height: 13px; }
/* ⚠️ IT OPENS LEFTWARD, AND THAT IS THE FIX FOR THE BUG ALEX SAW.
   It used to be `left: -8px`, growing rightward from the icon. The icon lives
   in the email rail, which sits on the RIGHT of the editor, so on a 1280
   viewport the popup's right edge measured 1340 — sixty pixels off the screen,
   with no way to read or reach the end of it. Anchoring to the icon's right
   edge and growing left keeps it on screen at every width, because there is
   always more room to the left of the rail than to the right of it. */
.seq-fc-pop { position: absolute; top: calc(100% + 8px); right: -8px; left: auto; z-index: 40;
              display: none; width: 272px; max-width: calc(100vw - 32px); padding: 12px 14px;
              background: #13111c; border: 1px solid #3d3650; border-radius: 10px;
              box-shadow: 0 12px 32px rgba(0,0,0,.42);
              text-transform: none; letter-spacing: normal; font-size: 12px; line-height: 1.55;
              color: #cbd5e1; white-space: normal; }
.seq-fc:hover .seq-fc-pop, .seq-fc:focus .seq-fc-pop, .seq-fc:focus-within .seq-fc-pop { display: block; }
/* ⚠️ BUT ONLY WHILE THE RAIL IS ON THE RIGHT (B-48). At 1000px and under the
   editor is one column (.seq-content above) and the rail is the full width of
   the screen, so "more room to the left" stops being true: on a 390 phone the
   first email's icon sits near x = 218, and a 272px box grown leftward from it
   ran its first third off the screen with no way to scroll to it. There the
   box hangs from the email's own row instead, the full width of that row,
   which is always on screen. */
@media (max-width: 1000px) {
  .seq-rail-row { position: relative; }
  .seq-rail-row .seq-fc { position: static; }
  .seq-rail-row .seq-fc-pop { left: 0; right: 0; top: calc(100% + 4px); width: auto; max-width: none; }
}
.seq-fc-pop b { display: block; color: #e2e8f0; font-size: 12px; margin-bottom: 8px; }
/* ⚠️ THE ROWS CANNOT OVERFLOW, WHICH IS THE WHOLE POINT OF THE REWRITE.
   The old `.seq-fc-chart` was a flex strip of 48 bars that escaped its popup
   on the real page and ran the width of the window. This is a fixed-width
   stack of at most six rows: nothing here can be wider than the popup,
   because every part of it is either a fixed column or a percentage of one. */
.seq-fc-rows { display: block; margin: 2px 0 8px; }
.seq-fc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.seq-fc-when { flex: none; width: 64px; font-size: 11px; color: #94a3b8;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seq-fc-track { flex: 1 1 auto; min-width: 0; height: 8px; border-radius: 4px; background: #2d2640; overflow: hidden; }
.seq-fc-fill { display: block; height: 100%; border-radius: 4px;
               background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.seq-fc-n { flex: none; min-width: 44px; text-align: right; font-size: 11px;
            color: #e2e8f0; font-variant-numeric: tabular-nums; }
/* ⚠️ THESE TWO WERE DELETED BY ACCIDENT AND THE RENDER CAUGHT IT. Replacing
   the old bar-chart rules took `.seq-fc-sum` and `.seq-fc-late` out with them,
   because they sat inside the block being replaced. The screenshot showed it
   at once: three summary sentences ran together on one line
   ("…next two days.8,940 in the next 48 hours.2,495 after that.") and the
   overdue warning lost its red box and read as ordinary text. Nothing failed;
   it just looked wrong, which is exactly what only looking finds. */
.seq-fc-sum { display: block; color: #94a3b8; margin-top: 4px; }
.seq-fc-late { display: block; margin-bottom: 8px; padding: 5px 8px; border-radius: 6px;
               background: rgba(220,38,38,.16); color: #fca5a5; }

/* ✉️ Funnel follow-ups (docs/projects/funnel-emails/SPEC.md): the way back to
   the funnel, and a change Maya proposed to a running email (Was / Now). */
.seq-funnel-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600;
  color: var(--accent-deep, #4a32b8); text-decoration: none; }
.seq-change { border: 1px solid var(--warn-soft, #efe3bf); background: #fffcf3; border-radius: 12px; padding: 14px;
  margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.seq-change-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.seq-change-l { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3, #6b7087); }
.seq-change-old { background: #fbeeec; color: #7a2a24; border-radius: 8px; padding: 9px 11px; font-size: 13px; line-height: 1.5;
  text-decoration: line-through; }
.seq-change-new { background: #e2f3ea; color: #0f5436; border-radius: 8px; padding: 9px 11px; font-size: 13px; line-height: 1.5; }
.seq-change-acts { display: flex; flex-wrap: wrap; gap: 8px; }