/* ============================================================
 * bop.css - BOP app-specific CSS overrides.
 * ============================================================
 *
 * Loaded AFTER the td_styleguide stack (tokens.css, base.css,
 * components.css) so it can override token values or compose
 * project-specific rules. ONLY for BOP-specific styling.
 *
 * If something belongs in EVERY TD project, it's a styleguide
 * change - STOP, tell Seth, implement INTO td_styleguide first
 * (see td_styleguide/README.md rule 2).
 *
 * Hard rules (from td_styleguide/README.md):
 *   1. Build FROM the styleguide. No improvisation.
 *   2. Missing component / pattern? STOP. Tell Seth. Implement INTO
 *      the styleguide FIRST. Then consume from here.
 *   3. The styleguide is the contract.
 *   4. CONVENTIONS are part of the contract - composable class names,
 *      BEM-lite naming, token-only values (var(--*)), Caddy partials,
 *      fetch-on-trigger, td.pour hook chain.
 *   5. STYLEGUIDE CSS IS SACROSANCT. tokens.css / base.css /
 *      components.css are read-only inside this project. NEVER edit
 *      them in-place. Project-specific styling lives HERE.
 *   6. Dev-app prototyping (README rule 5): a styleguide bug or
 *      missing component MAY be prototyped HERE first, against live
 *      content, IF tracked in BOP/PROJECTS/TD STYLEGUIDE/BUGS.md and
 *      back-ported to the styleguide before stage/prod. Such blocks
 *      are tagged "Styleguide-pending prototype" below.
 *
 * Empty by default - add BOP-specific rules below as the project
 * needs them. Always reference styleguide tokens (var(--*)) rather
 * than hardcoded hex/px.
 * ============================================================ */

/* /app/auth.html - sign-in card sits inside a .modal centred on the page.
   Constrains the card so the Google sign-in button + heading don't stretch
   across wide viewports. */
.signin-card { max-width: 420px; }

/* ─── BOP module scaffold ────────────────────────────────
   .bop-module - applied to <main> for every BOP module page. Pairs with
   a module-specific class (e.g. .lia-dashboard) for module-local rules.
   Pattern:
     <main class="app bop-module lia-dashboard">
       ...
     </main>

   Note: shared module-level rules (section rhythm, etc) currently live
   under module-specific selectors (.lia-dashboard ...) because the LIA
   page is the first one built. As a second module page lands, common
   overrides should be promoted to a more general modifier - likely a
   ".dashboard" modifier on <main> (e.g. <main class="app bop-module
   dashboard lia-dashboard">) so dashboard-style pages share rhythm
   without bleeding into other module types (forms, lists, detail views).
   Pending further build - revisit when the next module page exists. */

/* ─── LIA dashboard (module-local) ───────────────────────
   .lia-dashboard - hooks for the LinkedIn Analytics page. Anything here
   is genuinely lia-only OR a candidate for generalisation per the note
   above. Styleguide-level patterns belong in td_styleguide (rule 2). */

/* Section rhythm - 40px between top-level sections on any BOP module page.
   Descendant selector (not '>') because sections may sit inside wrappers
   (e.g. lia's [data-tab-panel]) rather than as direct children of <main>.
   Generalised from .lia-dashboard to .bop-module 2026-05-15 once the
   lightspeed module page became the second consumer. */
.bop-module section {
  margin-bottom: 40px;
}
.bop-module section:last-child {
  margin-bottom: 0;
}

.lia-dashboard .tag-cell {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.lia-dashboard .tag-cell .cell-edit-btn {
  margin-left: auto;
}

/* Material Symbols filled variant. Used in cell edit buttons + similar
   contexts where the filled glyph reads heavier than the outlined default.
   If this becomes universally useful, promote to td_styleguide. */
.lia-dashboard .icon-filled {
  font-variation-settings: 'FILL' 1;
}

/* ─── LightSpeed editor (module-local) ───────────────────
   .lightspeed - hooks for the LightSpeed Project-editor page. */

/* Right-align an action button (.btn is inline-flex, so a text-align:right
   wrapper pushes it to the right edge). Used for the per-segment Remove
   button and the Save Project button. */
.lightspeed .actions-right {
  text-align: right;
}

/* Space adjacent action buttons in a right-aligned row (segment card has
   Check Lead Count + Remove Segment side by side). */
.lightspeed .actions-right .btn + .btn {
  margin-left: var(--s-3);
}

/* Per-segment lead-count result notice sits below the action row. */
.lightspeed .seg-count-result:not(:empty) {
  margin-top: var(--s-3);
}

/* Readable breakdown of the translated search_filters, under the count. */
.lightspeed .seg-filters {
  margin-top: var(--s-3);
}

.lightspeed .seg-filters p {
  margin: var(--s-2) 0 0;
}

.lightspeed .seg-filters p:first-child {
  margin-top: 0;
}

/* project/edit segment card: header row - eyebrow on the left, the
   "Review copy" button on the right, aligned. */
.lightspeed .seg-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ─── LightSpeed segment copy editor (module-local) ──────
   The /segment/{id}/edit screen - the four emails as a 4-up column
   grid. Each column: subject + read-only base body at the top, then
   the five named slots (hook/proof/value/cta/ps) listed beneath.
   Every slot is a base plus any number of wording variants. */

/* Styleguide-pending prototype: .card-row.cols-4 - a 4-up card grid,
   extending the styleguide's .cols-2 / .cols-3. Back-port to
   td-styleguide. Tracked: BOP/PROJECTS/TD STYLEGUIDE/BUGS.md. */
.card-row.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Merge-token hint line above the sequence. */
.lightspeed .token-hint {
  color: var(--c-mid);
}

/* Read-only approved-copy reference at the top of each email column. */
.lightspeed .base-ref-body {
  min-height: 110px;
}

/* One slot - label, full-width base textarea, the Spin it / Add variant
   buttons, then the variant rows. `.seq-slot` is project-specific - the
   bare styleguide `.slot` is an inline-flex pill and must not be used. */
.lightspeed .seq-slot {
  margin-top: var(--s-4);
}

/* A bare textarea keeps its intrinsic column width - force the slot's
   base input to fill the email card. */
.lightspeed .slot-base {
  width: 100%;
  min-height: 110px;
}

/* Action buttons sit just beneath the slot's base textarea. */
.lightspeed .seq-slot .actions-right {
  margin-top: var(--s-2);
}

/* A variant row - textarea + Remove button side by side. */
.lightspeed .variant-row {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  margin-top: var(--s-2);
}

.lightspeed .variant-row .slot-variant {
  flex: 1;
  min-height: 64px;
}

/* Per-email rendered preview, below the card's Preview button. */
.lightspeed .seq-preview:not(:empty) {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--invert-2);
}

.lightspeed .seq-preview p {
  margin: var(--s-2) 0 0;
}

.lightspeed .seq-preview p:first-child {
  margin-top: 0;
}

/* Spam-check result notice under the sequence action row. */
.lightspeed .seq-check-result:not(:empty) {
  margin-top: var(--s-3);
}

/* Preview button sits in the seq-card's .card-footer (canonical
   styleguide pattern - margin-top + padding-top + border-top all
   handled by .card-footer). The footer is flex with space-between, so
   a single button defaults to the left edge; push it right with
   margin-left: auto to keep the actions-right visual semantic. */
.lightspeed .seq-preview-btn { margin-left: auto; }

/* Smoke-push result panel (button itself lives inline with the Segment
   section heading via .card-header; only the result panel needs spacing). */
.lightspeed .smoke-push-result:not(:empty) {
  margin-top: var(--s-3);
}

.lightspeed .smoke-push-bullets {
  margin: var(--s-2) 0 var(--s-3) var(--s-4);
  padding: 0;
  list-style: disc;
}
.lightspeed .smoke-push-bullets li {
  margin-bottom: var(--s-1);
}

.lightspeed .smoke-push-modal-card {
  max-width: 520px;
}

/* Live-push result panel + modal: same shape as smoke (sibling
   operation - cohort-level vs segment-level). */
.lightspeed .live-push-result:not(:empty) {
  margin-top: var(--s-3);
}
.lightspeed .live-push-bullets {
  margin: var(--s-2) 0 var(--s-3) var(--s-4);
  padding: 0;
  list-style: disc;
}
.lightspeed .live-push-bullets li {
  margin-bottom: var(--s-1);
}
.lightspeed .live-push-modal-card {
  max-width: 560px;
}

/* Per-segment action row on the project edit page: chips left, buttons
   right. Same row container as the existing .actions-right + Save row,
   just split into two flex columns for the chip + button arrangement. */
.lightspeed .seg-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}
.lightspeed .seg-chips {
  display: inline-flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.lightspeed .seg-chips .chip { pointer-events: none; }

/* Pull modal: cap-input field + bullets. Same shape as smoke / live
   push modals - max-width keeps the dialog readable. */
.lightspeed .seg-pull-modal-card {
  max-width: 560px;
}
.lightspeed .seg-pull-bullets {
  margin: var(--s-2) 0 var(--s-3) var(--s-4);
  padding: 0;
  list-style: disc;
}
.lightspeed .seg-pull-bullets li {
  margin-bottom: var(--s-1);
}

/* Pull result panel + timing block - identical shape to live push
   variants for visual consistency. */
.lightspeed .seg-pull-result:not(:empty) {
  margin-top: var(--s-3);
}
.lightspeed .seg-pull-timing {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-invert-1);
}
.lightspeed .seg-pull-timing summary {
  cursor: pointer;
}

/* Live-push timing breakdown - collapsible <details> block under the
   result notice. Compact table for at-a-glance per-segment ms reads. */
.lightspeed .live-push-timing {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-invert-1);
}
.lightspeed .live-push-timing summary {
  cursor: pointer;
}
.lightspeed .live-push-timing-table {
  margin-top: var(--s-2);
  font-size: 14px;
  border-collapse: collapse;
  width: 100%;
}
.lightspeed .live-push-timing-table th,
.lightspeed .live-push-timing-table td {
  text-align: right;
  padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--c-invert-2);
}
.lightspeed .live-push-timing-table th:first-child,
.lightspeed .live-push-timing-table td:first-child {
  text-align: left;
}

/* Campaign analytics - 6 stat panels inline (Total + step 1-4 + Conversions).
   Mini-cards with simple right-aligned label / value rows (no header/border on
   the rows). Module one-off; promote to styleguide if it proves reusable. */
.lightspeed .ls-stat-panels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
}
.lightspeed .ls-stat-title {
  margin: 0 0 var(--s-1);
}
.lightspeed .ls-stat-row {
  display: grid;
  grid-template-columns: 1fr 68px;
  column-gap: var(--s-1);
}
.lightspeed .ls-stat-label,
.lightspeed .ls-stat-value {
  text-align: right;
}
.lightspeed .ls-stat-value {
  font-weight: 600;
  color: var(--c-secondary);
}
/* PRR = headline metric: top row, bold label. Promoted 2 scale steps via the
   canonical scale-up1 utility on the row (24px / 36px leading / rhythm - the
   coupled scale triple, not a cherry-picked font-size). */
.lightspeed .ls-stat-row-prr .ls-stat-label {
  font-weight: 700;
}
/* Visual break after Positive Replies - separates engagement from disposition stats. */
.lightspeed .ls-stat-gap-after {
  margin-bottom: var(--s-4);
}