/* briefing.css ─ Briefing tab: section grid, preset bar, section grouping, advanced disclosure, custom-title rows, per-PGM layout row, live branding preview, preview modal + thumbnail variants. */

/* Briefing-section checkbox grid in Settings panel — single column, tight
   row spacing so 9 options don't dominate the panel. */
.briefing-sections {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 8px;
  padding-left: 4px;
}
.briefing-sections .fmt-check-label { font-size: 11.5px; }
/* AI executive summary row — visually separated so analysts see it as the
   "extra paid feature" it is. */
.briefing-narrative-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #2a2d3e;
}
.briefing-narrative-hint {
  color: #8a8fa3;
  font-size: 10px;
  margin-left: 4px;
}

/* Preset bar — sits above the section list. */
.briefing-preset-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 4px;
}
.briefing-preset-bar .briefing-preset-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #c9a84c;
  margin: 0;
  min-width: 0;
}
.briefing-preset-bar select { flex: 1; min-width: 0; }
.briefing-preset-bar button {
  font-size: 11px;
  padding: 4px 8px;
  white-space: nowrap;
}

/* Reorder hint above the section list — tiny, low-key, doesn't distract. */
.briefing-reorder-hint {
  margin-top: 8px;
  font-size: 11px;
  opacity: 0.7;
}
.briefing-drag-hint-icon { opacity: 0.5; }

/* Section rows are draggable, but only via the ⋮⋮ handle — the rest of the
   row is a normal label whose checkbox/text behave like any other setting.
   Higher specificity than .fmt-check-label so the flex layout wins. */
.briefing-sections .briefing-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.briefing-drag-handle {
  color: #6b7080;
  font-size: 14px;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
  letter-spacing: -3px;
  padding: 0 4px;
  flex: 0 0 auto;
  cursor: grab;
}
.briefing-drag-handle:hover { color: #c9a84c; }
.briefing-drag-handle:active { cursor: grabbing; }
.briefing-row.is-dragging { opacity: 0.4; }
.briefing-row.drop-above { border-top: 2px solid #c9a84c; }
.briefing-row.drop-below { border-bottom: 2px solid #c9a84c; }

/* Section grouping — Phase 1 of the briefing-tab IA refresh. The 17 section
   rows are nested under collapsible group headers (Intro / Prices / Markets /
   News & equities). The AI executive summary row sits standalone below all
   groups. Drag-to-reorder is constrained within a group. */
.briefing-group {
  margin-bottom: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid #1a1d2b;
}
.briefing-group:last-of-type {
  border-bottom: none;
}
.briefing-group-summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #c9a84c;
  padding: 5px 2px;
  -webkit-user-select: none;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.briefing-group-summary::-webkit-details-marker { display: none; }
.briefing-group-summary::before {
  content: '▸';
  display: inline-block;
  font-size: 10px;
  color: #6b7080;
  transition: transform 0.15s ease;
}
.briefing-group[open] > .briefing-group-summary::before { transform: rotate(90deg); }
.briefing-group-count {
  display: inline-block;
  font-size: 10px;
  color: #8a8fa3;
  background: #1a1d2b;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Top-level groups (Branding, Format & data) — promoted out of Advanced.
   Bigger header than section-list groups, has an emoji icon, and Branding
   opens by default so the live preview is visible without a click. */
.briefing-toplevel-group {
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid #2a2d3e;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
}
.briefing-toplevel-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 12.5px;
  color: #c9a84c;
  padding: 2px 0;
  -webkit-user-select: none;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.briefing-toplevel-summary::-webkit-details-marker { display: none; }
.briefing-toplevel-summary::before {
  content: '▸';
  display: inline-block;
  font-size: 11px;
  transition: transform 0.15s ease;
}
.briefing-toplevel-group[open] > .briefing-toplevel-summary::before { transform: rotate(90deg); }
.briefing-toplevel-icon {
  font-size: 14px;
  line-height: 1;
}

/* Intro paragraph at the top of the briefing tab — slightly more visible
   than a generic settings-hint since it sets workflow expectations. */
.briefing-tab-intro {
  font-size: 11.5px;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* Sticky action bar — pinned to the bottom of #tab-panels (the actual scroll
   container) while the Briefing tab is active, so Generate is always
   reachable without scrolling. Sits OUTSIDE .panel so its background spans
   the full tab width and the top border reads as a real toolbar. */
.briefing-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 10px 14px;
  background: #0f1117;
  border-top: 1px solid #2a2d3a;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
}
.briefing-sticky-actions .btn-primary {
  width: 100%;
}

/* Inline per-section options — Phase 2 of the briefing-tab IA refresh. The
   ⚙ button sits at the right end of section rows that have configurable
   options (cost / news / equities / narrative) and toggles an indented
   options panel directly underneath the row. */
.briefing-row-opts-toggle {
  margin-left: auto;
  flex: 0 0 auto;
  width: 22px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #6b7080;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.briefing-row-opts-toggle:hover {
  color: #c9a84c;
  background: #1a1d2b;
  border-color: #2e3145;
}
.briefing-row-opts-toggle.is-open {
  color: #c9a84c;
  background: #1a1d2b;
  border-color: #c9a84c;
}
.briefing-row-opts {
  margin: 2px 0 6px 26px;     /* indent under the row text, past the drag handle + checkbox */
  padding: 6px 10px;
  background: rgba(201, 168, 76, 0.05);
  border-left: 2px solid #c9a84c;
  border-radius: 0 3px 3px 0;
  font-size: 11.5px;
}
.briefing-row-opts > .settings-hint {
  font-size: 10.5px;
  margin: 0 0 4px;
  opacity: 0.85;
}
.briefing-row-opts .fmt-check-label {
  font-size: 11.5px;
  margin: 3px 0;
}

/* Inline rename ✏️ — Phase 3 of the briefing-tab IA refresh. Every section
   row has a ✏️ button at its right end that toggles an inline text-input
   panel under the row, used to override the section's slide title. The
   button turns gold when an override is set so the user can see at a glance
   which slides have custom titles. */
.briefing-row-rename-toggle {
  flex: 0 0 auto;
  margin-left: auto;
  width: 22px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.briefing-row-rename-toggle:hover {
  opacity: 1;
  background: #1a1d2b;
  border-color: #2e3145;
}
.briefing-row-rename-toggle.is-open {
  opacity: 1;
  background: #1a1d2b;
  border-color: #c9a84c;
}
.briefing-row-rename-toggle.is-set {
  opacity: 1;
  /* Filter trick: shifts the emoji's hue toward gold so the user sees
     "override active" at a glance without needing a separate badge element. */
  filter: hue-rotate(35deg) saturate(1.6) brightness(1.1);
}
/* When the row already has a ⚙ options toggle (cost / news / equities /
   narrative), the ⚙ owns the margin-left:auto and the ✏️ follows it with
   just the row's gap. Otherwise the ✏️'s own margin-left:auto pushes it to
   the right end. */
.briefing-row-opts-toggle ~ .briefing-row-rename-toggle {
  margin-left: 0;
}
.briefing-row-rename {
  margin: 2px 0 6px 26px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid #6b7080;
  border-radius: 0 3px 3px 0;
}
.briefing-row-rename input[type=text] {
  width: 100%;
  padding: 5px 8px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 3px;
  color: #e8e8e8;
  font-size: 11.5px;
}
.briefing-row-rename input[type=text]:focus {
  outline: none;
  border-color: #c9a84c;
}

/* Markets ⚙ panel — sub-sections under the View radios. Each one only
   matters for one specific view (Layout → Balance, Mines breakdown →
   Primary supply). A faint top border separates each sub-section from
   the view radios above so the visual relationship is obvious. The
   visibility is JS-toggled via `.hidden` so only the relevant sub
   shows for the currently-selected view. */
.briefing-mkt-sub {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #2a2d3e;
}

/* Per-section commentary textarea — sits at the bottom of each section's
   ⚙ panel. Stacks the label above the textarea (block, not flex) so the
   textarea can use the panel's full width. */
.briefing-commentary-row {
  display: block;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #2a2d3e;
}
.briefing-commentary-row > span {
  display: block;
  font-size: 10.5px;
  color: #aaa;
  margin-bottom: 4px;
}
.briefing-commentary-row textarea {
  width: 100%;
  padding: 6px 8px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #e8e8e8;
  font-size: 11.5px;
  font-family: inherit;
  resize: vertical;
  min-height: 40px;
}
.briefing-commentary-row textarea:focus {
  outline: none;
  border-color: #c9a84c;
}

/* Per-metal slide layouts — a collapsible widget that sits as the last child
   inside the Prices group. Folded by default since most users don't tweak
   per-metal layouts. Visually distinct from a regular .briefing-row so it
   doesn't get mistaken for a section toggle. */
.briefing-prices-layouts {
  margin: 6px 0 4px 22px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #2a2d3e;
  border-radius: 3px;
}
.briefing-prices-layouts-summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: #c9a84c;
  padding: 3px 0;
  -webkit-user-select: none;
  user-select: none;
  list-style: none;
}
.briefing-prices-layouts-summary::-webkit-details-marker { display: none; }
.briefing-prices-layouts > .settings-hint {
  font-size: 10.5px;
  margin: 4px 0 6px;
  opacity: 0.85;
}

/* Advanced disclosure block — folded by default. */
.briefing-advanced {
  margin-top: 12px;
  padding: 6px 8px;
  border: 1px solid #2a2d3e;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
}
.briefing-advanced > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  color: #c9a84c;
  padding: 2px 0;
  -webkit-user-select: none;
  user-select: none;
  list-style: none;
}
.briefing-advanced > summary::-webkit-details-marker { display: none; }
.briefing-advanced > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
}
.briefing-advanced[open] > summary::before { transform: rotate(90deg); }
.briefing-adv-group {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #2a2d3e;
}
.briefing-adv-group:first-of-type {
  border-top: none;
  margin-top: 6px;
  padding-top: 0;
}
.briefing-adv-group h4 {
  margin: 0 0 4px;
  font-size: 11.5px;
  color: #d6c98a;
  font-weight: 600;
}
.briefing-adv-group .fmt-check-label {
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}
.briefing-num-input { width: 4em; }
.briefing-text-input { width: 16em; }

/* Custom-title rows — one per section, label + input side-by-side. */
.briefing-titles-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}
.briefing-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.briefing-title-row .briefing-title-label {
  flex: 0 0 90px;
  color: #8a8fa3;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#settings-panel .briefing-title-row input[type=text],
#tab-briefing .briefing-title-row input[type=text] {
  flex: 1;
  min-width: 0;
  padding: 3px 5px;
  font-size: 10.5px;
  width: auto;
}
/* Per-PGM layout row — label + layout dropdown + date-range dropdown. */
.briefing-layout-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.briefing-layout-row .briefing-title-label {
  flex: 0 0 80px;
  color: #8a8fa3;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.briefing-layout-row select {
  min-width: 0;
}
.briefing-layout-row select[data-briefing-layout] {
  flex: 1 1 auto;
}
.briefing-layout-row select[data-briefing-range] {
  flex: 0 0 96px;
}
.briefing-layout-row input[type=color] {
  flex: 0 0 32px;
}
.briefing-color-reset {
  flex: 0 0 auto;
  padding: 0 5px;
  height: 22px;
  line-height: 1;
  font-size: 12px;
  color: #8a8fa3;
  background: #1a1d27;
  border: 1px solid #2a2d3e;
  border-radius: 3px;
  cursor: pointer;
}
.briefing-color-reset:hover {
  color: #d8dcec;
  border-color: #3a3f56;
}
#settings-panel .briefing-adv-group input[type=color],
#tab-briefing .briefing-adv-group input[type=color] {
  width: 32px;
  height: 22px;
  padding: 0;
  border: 1px solid #2a2d3e;
  cursor: pointer;
}
.briefing-adv-group input[type=file] { font-size: 10.5px; }
.briefing-logo-preview {
  margin-top: 4px;
  min-height: 0;
}
.briefing-logo-preview img {
  max-height: 40px;
  max-width: 120px;
  border: 1px solid #2a2d3e;
  background: #ffffff;
  padding: 2px;
}

/* ── Live branding preview ─────────────────────────────────────────────── */
/* Mini WYSIWYG slide that updates as the user changes branding/format
   below. Aspect ratio is set inline to match the selected slide format. */
.briefing-live-preview-wrap {
  margin: 6px 0 10px;
}
.briefing-live-preview-label {
  font-size: 10.5px;
  color: #8a8fa3;
  margin-bottom: 4px;
}
.briefing-live-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  color: #1a1d27;
  font-family: 'Segoe UI', sans-serif;
}
.briefing-live-title {
  position: absolute;
  left: 4%; top: 6%; right: 4%;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.briefing-live-context {
  position: absolute;
  left: 4%; top: 20%; right: 4%;
  font-size: 8px;
  font-style: italic;
  color: #5a5f6a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.briefing-live-chart {
  position: absolute;
  left: 6%; right: 6%; top: 32%; bottom: 18%;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8eaf0 100%);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b5bac4;
  font-size: 9px;
}
.briefing-live-footer {
  position: absolute;
  left: 4%; right: 16%; bottom: 4%;
  font-size: 7px;
  color: #888888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.briefing-live-page {
  position: absolute;
  right: 4%; bottom: 4%;
  font-size: 7px;
  color: #888888;
}
.briefing-live-logo {
  position: absolute;
  right: 4%; top: 4%;
  max-height: 18%;
  max-width: 22%;
  object-fit: contain;
}
.briefing-live-watermark {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%) rotate(-30deg);
  text-align: center;
  font-weight: 700;
  font-size: 24px;
  color: #e8e8e8;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}

/* When Generate Briefing is repurposed as Cancel during an in-flight run.
   Higher specificity than .btn-primary so the cancel state always wins. */
#btn-generate-briefing.btn-cancel {
  background: #b03a3a;
  border-color: #b03a3a;
  color: #ffffff;
}
#btn-generate-briefing.btn-cancel:hover {
  background: #c94747;
  border-color: #c94747;
}

/* ── Briefing preview modal ──────────────────────────────────────────────── */
/* Covers the entire pane while open; thumbnails of every built slide so
   the analyst can uncheck the ones they don't want before insertion. */
.briefing-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.briefing-preview-modal.hidden { display: none; }
.briefing-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.briefing-preview-dialog {
  position: relative;
  margin: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #1a1d27;
  border: 1px solid #2a2d3e;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  max-height: calc(100vh - 24px);
}
.briefing-preview-head {
  padding: 10px 14px 6px;
  border-bottom: 1px solid #2a2d3e;
}
.briefing-preview-head h3 {
  margin: 0;
  font-size: 14px;
  color: #c9a84c;
}
.briefing-preview-head p {
  margin: 4px 0 0;
  font-size: 11px;
  color: #8a8fa3;
}
.briefing-preview-grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.briefing-preview-card {
  /* Keep each card at its natural height so the grid SCROLLS as slides are
     added, rather than flex-shrinking every thumbnail to fit. Without this,
     overflow:hidden below zeroes the flex min-size and the column compresses
     all cards once their total height exceeds the dialog. */
  flex-shrink: 0;
  border: 1px solid #2a2d3e;
  border-radius: 4px;
  background: #15171f;
  overflow: hidden;
}
.briefing-preview-card.is-unchecked {
  opacity: 0.45;
  background: #101218;
}
.briefing-preview-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #1f2330;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #e6e9f0;
}
.briefing-preview-card-head input[type=checkbox] {
  margin: 0;
  flex: 0 0 auto;
}
/* Body holds a 16:9 "slide canvas" — same aspect as a real PPT 16:9 slide
   (10" × 5.625"). Every body variant (image / cover / text / table) renders
   inside this so all thumbnails look like uniform slides, not stretched
   ribbons. */
.briefing-preview-card-body {
  padding: 8px;
  font-size: 11px;
  color: #c2c6d1;
  background: #0d0f15;
}
.briefing-preview-slide {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #ffffff;
  color: #1a1d27;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Image variant — chart PNG fills the slide canvas while keeping its
   own aspect ratio. */
.briefing-preview-slide-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}
/* ── Faithful slide chrome on preview thumbnails ──────────────────────────
   Logo / title / footer / page number positioned as % of the slide canvas
   so the thumbnail reads like the inserted slide, not a bare chart. */
.briefing-preview-chrome-head {
  position: absolute;
  top: 4%;
  left: 3.5%;
  right: 17%;
  z-index: 2;
}
.briefing-preview-chrome-title {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.briefing-preview-chrome-ctx {
  margin-top: 1px;
  font-size: 6.5px;
  font-style: italic;
  color: #5a5f6a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.briefing-preview-slide-stage {
  position: absolute;
  top: 15%;
  bottom: 9%;
  left: 2.5%;
  right: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.briefing-preview-chrome-logo {
  position: absolute;
  top: 3.5%;
  right: 2%;
  max-width: 14%;
  max-height: 9%;
  object-fit: contain;
  z-index: 3;
}
.briefing-preview-chrome-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ededed;
  pointer-events: none;
  z-index: 1;
}
.briefing-preview-chrome-commentary {
  position: absolute;
  left: 3.5%;
  right: 3.5%;
  bottom: 7%;
  max-height: 12%;
  overflow: hidden;
  font-size: 6.5px;
  font-style: italic;
  color: #5a5f6a;
  z-index: 2;
}
.briefing-preview-chrome-footer,
.briefing-preview-chrome-page {
  position: absolute;
  bottom: 2.5%;
  font-size: 6px;
  color: #8a8f99;
  z-index: 2;
}
.briefing-preview-chrome-footer { left: 3.5%; }
.briefing-preview-chrome-page  { right: 3%; }
/* Cover variant — centred title + subtitle, larger type. */
.briefing-preview-cover {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px 14px;
  background: #ffffff;
  color: #1a1d27;
}
.briefing-preview-cover-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.25;
}
.briefing-preview-cover-sub {
  font-size: 12px;
  color: #555a66;
}
/* Text variant — title strip at top, body paragraph below. */
.briefing-preview-slide-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  background: #ffffff;
  color: #1a1d27;
}
.briefing-preview-slide-text-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #c9a84c;
}
.briefing-preview-text {
  flex: 1;
  white-space: pre-wrap;
  font-size: 10.5px;
  line-height: 1.35;
  color: #1a1d27;
  overflow: hidden;
}
/* Table variant — title strip at top, mini-table below. */
.briefing-preview-slide-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #ffffff;
  color: #1a1d27;
  overflow: hidden;
}
.briefing-preview-slide-table-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #c9a84c;
}
.briefing-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
}
.briefing-preview-table th,
.briefing-preview-table td {
  border: 1px solid #2a2d3e;
  padding: 2px 4px;
  text-align: left;
  vertical-align: top;
}
.briefing-preview-table th {
  background: #1a1d27;
  color: #c9a84c;
}
.briefing-preview-more {
  margin-top: 4px;
  font-size: 10px;
  color: #8a8fa3;
  font-style: italic;
}
/* Italic date-range subtitle below a slide thumbnail's title. */
.briefing-preview-rangelabel {
  font-size: 10px;
  font-style: italic;
  color: #5a5f6a;
  margin: -2px 0 4px;
}

/* Split-dual layout thumbnail — title strip + two charts side-by-side. */
.briefing-preview-split {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #ffffff;
  color: #1a1d27;
  overflow: hidden;
}
.briefing-preview-split-row {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-height: 0;
}
/* Three-column variant for the mktSideBySide body type (Markets ⚙ →
   Side-by-side). Otherwise identical to the 2-column splitDual preview. */
.briefing-preview-split-row--three {
  grid-template-columns: 1fr 1fr 1fr;
}
.briefing-preview-split-half {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.briefing-preview-split-caption {
  font-size: 9px;
  font-weight: 600;
  color: #5a5f6a;
  text-align: center;
  margin-bottom: 2px;
}
.briefing-preview-split-half img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  min-height: 0;
}
/* dualStack preview — two charts stacked vertically inside the split shell. */
.briefing-preview-stack-row {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 3px;
}
.briefing-preview-stack-row img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: contain;
}
/* quad preview — 2×2: chart / chart / stats / monthly returns. */
.briefing-preview-quad {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #ffffff;
  color: #1a1d27;
  overflow: hidden;
}
.briefing-preview-quad-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  min-height: 0;
}
.briefing-preview-quad-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.briefing-preview-quad-cell img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: contain;
}
.briefing-preview-quad-cap {
  font-size: 8.5px;
  font-weight: 600;
  color: #5a5f6a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.briefing-preview-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-style: italic;
  color: #888;
}

/* Chart + stats panel layout thumbnail. */
.briefing-preview-cs {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #ffffff;
  color: #1a1d27;
  overflow: hidden;
}
.briefing-preview-cs-row {
  flex: 1;
  display: grid;
  grid-template-columns: 62fr 38fr;
  gap: 6px;
  min-height: 0;
}
.briefing-preview-cs-chart {
  display: flex;
  min-width: 0;
  min-height: 0;
}
.briefing-preview-cs-chart img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.briefing-preview-cs-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
}
.briefing-preview-cs-price {
  font-size: 14px;
  font-weight: 700;
  color: #1a1d27;
  margin-bottom: 3px;
}
.briefing-preview-cs-row-item {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}
.briefing-preview-cs-lbl {
  font-weight: 600;
  color: #5a5f6a;
}
.briefing-preview-cs-val {
  font-weight: 700;
}
.briefing-preview-cs-comm {
  margin-top: 4px;
  font-size: 9px;
  font-style: italic;
  color: #5a5f6a;
}

/* Chart + monthly returns table layout thumbnail. */
.briefing-preview-ct {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #ffffff;
  color: #1a1d27;
  overflow: hidden;
}
.briefing-preview-ct-img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: contain;
}
.briefing-preview-ct-table {
  margin-top: 4px;
  font-size: 9px;
}

/* Consolidated multi-PGM grid thumbnail — N tiles, 3 per row. Distinct class
   from the modal's #briefing-preview-grid scroll container: sharing the name
   let this rule's `overflow: hidden` win the cascade and kill list scrolling. */
.briefing-preview-gridslide {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: #ffffff;
  color: #1a1d27;
  overflow: hidden;
}
.briefing-preview-grid-tiles {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  min-height: 0;
}
.briefing-preview-grid-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.briefing-preview-grid-cap {
  font-size: 9px;
  font-weight: 600;
  color: #1a1d27;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.briefing-preview-grid-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  min-height: 0;
}
/* Reserve a bottom strip on the dense body thumbnails so the slide-chrome
   footer / page number (added by addChrome) doesn't sit on their content.
   The image / cover bodies inset their own content, so they're excluded. */
.briefing-preview-split,
.briefing-preview-quad,
.briefing-preview-gridslide,
.briefing-preview-cs,
.briefing-preview-ct,
.briefing-preview-slide-text,
.briefing-preview-slide-table {
  padding-bottom: 16px;
}

.briefing-preview-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid #2a2d3e;
  background: #15171f;
}
.briefing-preview-actions button {
  font-size: 11.5px;
  padding: 5px 10px;
}
.briefing-preview-spacer { flex: 1; }