/* v2 viewer shell — Porter-branded light theme (mirrors the hub: violet
 * primary #3d1c87, secondary #824df7, light-violet borders #e8e7ff, tints
 * #faf9ff/#f0eafd, gradient CTA, Gilmer). Class/id names are load-bearing —
 * wrapper.js binds to them — so re-theme by changing values, never names. */

@font-face {
  font-family: "Gilmer";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("gilmer-400.woff2") format("woff2");
}
@font-face {
  font-family: "Gilmer";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("gilmer-500.woff2") format("woff2");
}
@font-face {
  font-family: "Gilmer";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("gilmer-700.woff2") format("woff2");
}

:root {
  --porter-violet: #3d1c87;
  --porter-violet-2: #824df7;
  --porter-nav-bg: #faf9ff;
  --porter-nav-fg: #0e161e;
  --porter-accent: #824df7;
  --porter-border: #e8e7ff;
  --porter-tint: #f0eafd;
  --porter-muted: #646464;
  --porter-gradient: linear-gradient(245.62deg, #ff578a -27.5%, #824df7 81.47%);
  --porter-font: "Gilmer", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--porter-font);
}

#porter-wrapper { display: flex; height: 100vh; }

.porter-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #fff; }

#porter-page { flex: 1; width: 100%; border: 0; }

/* ── Floating action bar (bottom-left): paging + Share + options + Help ──
 * Replaces the old left sidebar + top header. The bar floats over the report;
 * Help stays collapsed at rest and is revealed on hover / focus-within / while
 * a FAB menu is open (.is-expanded), and is always shown on touch devices. */
.porter-fab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--porter-border);
  border-radius: 30px;
  box-shadow: 0 8px 28px rgba(61, 28, 135, 0.16);
  user-select: none;
}
.porter-fab__body { display: flex; align-items: center; gap: 6px; }

/* Drag handle (also the circle that remains when minimized) + minimize button. */
.porter-fab__handle,
.porter-fab__min {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9a9aa8;
  cursor: pointer;
}
.porter-fab__handle { cursor: grab; touch-action: none; }
.porter-fab__handle:active { cursor: grabbing; }
.porter-fab__handle:hover,
.porter-fab__min:hover { background: #f0eafd; color: var(--porter-accent); }

/* Minimized: collapse to a single circular handle. */
.porter-fab.is-minimized { gap: 0; padding: 4px; }
.porter-fab.is-minimized .porter-fab__body { display: none; }
.porter-fab.is-minimized .porter-fab__handle {
  width: 40px;
  height: 40px;
  color: var(--porter-accent);
  background: var(--porter-tint);
}

/* Dragged near the top / right edge: flip the menus so they stay on screen. */
.porter-fab.is-top .porter-menu__list { top: calc(100% + 8px); bottom: auto; }
.porter-fab.is-right .porter-menu__list { right: 0; left: auto; }

.porter-fab__pager { display: flex; align-items: center; gap: 4px; }

.porter-fab__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #4a4a58;
  cursor: pointer;
}
.porter-fab__nav:hover { background: #f0eafd; color: var(--porter-accent); }
.porter-fab__nav[disabled] { opacity: 0.32; cursor: default; }
.porter-fab__nav[disabled]:hover { background: transparent; color: #4a4a58; }

.porter-fab__pagelabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--porter-border);
  border-radius: 30px;
  background: #fff;
  color: #0e161e;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.porter-fab__pagelabel:hover { background: #f0eafd; color: var(--porter-accent); border-color: var(--porter-accent); }
.porter-fab__pagelabel[aria-expanded="true"] { background: #f0eafd; color: var(--porter-accent); border-color: var(--porter-accent); }

.porter-fab__divider { width: 1px; height: 22px; margin: 0 2px; background: var(--porter-border); }

/* Both classes on the element → out-specify the later .porter-iconbtn rules. */
.porter-iconbtn.porter-fab__share { background: var(--porter-gradient); border: 0; color: #fff; }
.porter-iconbtn.porter-fab__share:hover { background: var(--porter-gradient); color: #fff; opacity: 0.92; border: 0; }

/* Help is the hover-revealed item. We collapse the BUTTON (not the wrapper) so
 * the absolutely-positioned dropdown is never clipped; a negative margin eats
 * the flex gap so the bar stays tight at rest. Revealed on hover, focus-within
 * (keyboard), while a FAB menu is open (.is-expanded), and always on touch. */
.porter-fab__help {
  margin-left: -6px;
  transition: margin-left 0.18s ease;
}
.porter-fab__help .porter-iconbtn {
  width: 0;
  min-width: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: width 0.18s ease, opacity 0.15s ease;
}
.porter-fab:hover .porter-fab__help,
.porter-fab:focus-within .porter-fab__help,
.porter-fab.is-expanded .porter-fab__help {
  margin-left: 0;
}
.porter-fab:hover .porter-fab__help .porter-iconbtn,
.porter-fab:focus-within .porter-fab__help .porter-iconbtn,
.porter-fab.is-expanded .porter-fab__help .porter-iconbtn {
  width: 36px;
  opacity: 1;
  border-width: 1px;
  pointer-events: auto;
}
@media (hover: none) {
  .porter-fab__help { margin-left: 0; }
  .porter-fab__help .porter-iconbtn { width: 36px; opacity: 1; border-width: 1px; pointer-events: auto; }
}

/* Print mode (PDF renderer surface): no chrome, full-bleed page iframe. */
#porter-wrapper.is-print { height: auto; min-height: 100vh; }
#porter-wrapper.is-print .porter-main { background: #fff; }
#porter-wrapper.is-print #porter-page { min-height: 100vh; }

.porter-page-error {
  margin: 16px;
  padding: 14px 16px;
  border: 1px solid #ffaac4;
  border-radius: 12px;
  background: #fff5f8;
  color: #c2255c;
  font-size: 14px;
}

/* Share modal (Drive-style) */
/* The display rules below would override the `hidden` attribute's UA default
   (display:none) — restate it explicitly or the modal can never be closed. */
[hidden] { display: none !important; }
.porter-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(61, 28, 135, 0.4);
}
.porter-modal {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 20px 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(61, 28, 135, 0.18);
}
.porter-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.porter-modal__head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--porter-violet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.porter-modal__close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--porter-muted);
}
.porter-modal__section { margin-top: 18px; }
.porter-modal__section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--porter-muted);
}
.porter-share-add {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.porter-share-add input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--porter-border);
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
}
.porter-share-add input:focus-visible {
  outline: none;
  border-color: var(--porter-violet-2);
  box-shadow: 0 0 0 3px rgba(130, 77, 247, 0.15);
}
.porter-btn {
  padding: 9px 16px;
  border: 1px solid var(--porter-border);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.porter-btn:hover { border-color: var(--porter-accent); color: var(--porter-accent); }
.porter-btn--primary {
  background: var(--porter-gradient);
  border: 0;
  color: #fff;
  font-weight: 700;
  border-radius: 30px;
  padding: 9px 22px;
}
.porter-btn--primary:hover { color: #fff; opacity: 0.92; }
.porter-btn--ghost { border: 0; color: var(--porter-accent); }
.porter-share-people {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.porter-share-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 2px;
  border-bottom: 1px solid #f3f1fc;
  font-size: 14px;
}
.porter-share-person__role { font-size: 12px; color: var(--porter-muted); }
.porter-share-person__remove {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: #c2255c;
  cursor: pointer;
}
.porter-share-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 14px;
}
.porter-share-check input { accent-color: var(--porter-violet-2); }
.porter-share-access select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--porter-border);
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.porter-share-access__hint {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--porter-muted);
}
.porter-share-status {
  margin: 12px 0 0;
  font-size: 13px;
  color: #15803d;
}
.porter-share-status.is-error { color: #c2255c; }
.porter-share-note { font-size: 14px; color: #374151; margin: 0; }
.porter-share-note a { color: var(--porter-accent); }
.porter-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

/* ── Header icon buttons + dropdown menus (kebab / help) ── */
.porter-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--porter-border);
  border-radius: 50%;
  background: #fff;
  color: #4a4a58;
  cursor: pointer;
}
.porter-iconbtn:hover { background: #f0eafd; color: var(--porter-accent); border-color: var(--porter-accent); }
.porter-iconbtn[aria-expanded="true"] { background: #f0eafd; color: var(--porter-accent); }

.porter-menu { position: relative; }
.porter-menu__list {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  min-width: 215px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--porter-border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(61, 28, 135, 0.14);
  z-index: 60;
}
.porter-menu__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: #0e161e;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.porter-menu__item:hover { background: #f0eafd; color: var(--porter-accent); }
.porter-menu__item svg { flex: none; color: #6a6a78; }
.porter-menu__item:hover svg { color: var(--porter-accent); }
.porter-menu__item[disabled] { opacity: 0.55; cursor: progress; }
/* Active page in the picker list (load-bearing class: .is-active is toggled by JS). */
.porter-menu__item.is-active {
  background: var(--porter-tint);
  color: var(--porter-violet);
  font-weight: 700;
}
.porter-menu__item.is-active::after {
  content: "✓";
  margin-left: auto;
  padding-left: 12px;
  color: var(--porter-accent);
  font-weight: 700;
}
.porter-menu__sep { height: 1px; margin: 6px 4px; background: var(--porter-border); }

/* ── Presentation mode: chrome hidden, page full-bleed ── */
#porter-wrapper.is-present { background: #fff; }
#porter-wrapper.is-present ~ #porter-fab { display: none; }
.porter-present-exit {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  padding: 8px 16px;
  border: 0;
  border-radius: 30px;
  background: rgba(14, 22, 30, 0.72);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}
.porter-present-exit:hover { opacity: 1; }

/* ── Report details modal ── */
.porter-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 22px;
  margin: 0;
}
.porter-details dt { color: #6a6a78; font-size: 13px; }
.porter-details dd { margin: 0; font-size: 13.5px; color: #0e161e; font-weight: 600; }
.porter-details__mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px !important; font-weight: 400 !important; }

/* ── Rename modal ── */
.porter-modal--narrow { max-width: 420px; }
.porter-rename-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1.24px solid var(--porter-border);
  border-radius: 14px;
  font: inherit;
  font-size: 14px;
  color: #0e161e;
}
.porter-rename-form input:focus {
  outline: none;
  border-color: var(--porter-accent);
}

/* ── Report abuse modal ── */
.porter-abuse-form {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.porter-abuse-form label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: #0e161e;
  cursor: pointer;
}
.porter-abuse-form input[type="radio"] { accent-color: var(--porter-accent); }
.porter-abuse-form textarea {
  margin-top: 6px;
  padding: 9px 12px;
  border: 1.24px solid var(--porter-border);
  border-radius: 14px;
  font: inherit;
  font-size: 13.5px;
  color: #0e161e;
  resize: vertical;
}
.porter-abuse-form textarea:focus {
  outline: none;
  border-color: var(--porter-accent);
}

/* ── Share / Email-delivery modal tabs ── */
.porter-tabs {
  display: flex;
  gap: 4px;
  margin-top: 14px;
  border-bottom: 1px solid var(--porter-border);
}
.porter-tab {
  padding: 9px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--porter-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.porter-tab:hover { color: var(--porter-violet); }
.porter-tab.is-active { color: var(--porter-violet); border-bottom-color: var(--porter-violet-2); }
.porter-tabpanel[hidden] { display: none !important; }

/* ── Email-delivery (schedule) panel ── */
.porter-sched-row { display: flex; gap: 14px; flex-wrap: wrap; }
.porter-sched-field { flex: 1; min-width: 150px; }
.porter-sched-field h3,
#porter-panel-schedule .porter-modal__section h3 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--porter-muted);
}
#porter-panel-schedule select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--porter-border);
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  color: #0e161e;
}
#porter-panel-schedule select:focus-visible {
  outline: none;
  border-color: var(--porter-violet-2);
  box-shadow: 0 0 0 3px rgba(130, 77, 247, 0.15);
}

/* Recipient chips (mirrors the hub's Email-delivery input) */
.porter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--porter-border);
  border-radius: 12px;
  cursor: text;
}
.porter-chips:focus-within { border-color: var(--porter-violet-2); box-shadow: 0 0 0 3px rgba(130, 77, 247, 0.15); }
.porter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  border-radius: 20px;
  background: var(--porter-tint);
  color: var(--porter-violet);
  font-size: 13px;
}
.porter-chip__x {
  border: 0;
  background: transparent;
  color: var(--porter-violet);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.porter-chips__input {
  flex: 1;
  min-width: 140px;
  border: 0;
  outline: none;
  padding: 4px 2px;
  font: inherit;
  font-size: 14px;
  background: transparent;
}

/* ── Report Share/Email-delivery modal — standardized to the Angular hub modal.
 * Scoped to #porter-share-overlay so the Angular-style class names don't leak.
 * Brand violet is shared (--porter-violet == hub --primary-violet #3d1c87); the
 * grays/secondary violet mirror the hub's edit-schedule-modal.scss verbatim. */
#porter-share-overlay .porter-report-modal { padding: 0; }

#porter-share-overlay .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--porter-border);
}
#porter-share-overlay .modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--porter-violet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#porter-share-overlay .close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}
#porter-share-overlay .close-button:hover { background: #f3f4f6; color: #0e161e; }

#porter-share-overlay .modal-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid var(--porter-border);
}
#porter-share-overlay .modal-tab {
  padding: 12px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.15s ease;
}
#porter-share-overlay .modal-tab:hover { color: var(--porter-violet); }
#porter-share-overlay .modal-tab.active { color: var(--porter-violet); border-bottom-color: var(--porter-violet); }

#porter-share-overlay .modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
}
#porter-share-overlay .form-row { display: flex; gap: 16px; }
#porter-share-overlay .form-row .form-field { flex: 1; min-width: 0; }
#porter-share-overlay .form-field { display: flex; flex-direction: column; gap: 8px; }
#porter-share-overlay .field-label { font-size: 13px; font-weight: 500; color: #0e161e; }
#porter-share-overlay .field-hint { font-size: 12px; color: #9ca3af; }
#porter-share-overlay .field-hint a { color: var(--porter-accent); }
#porter-share-overlay .field-error { font-size: 12px; color: #e0395e; }
/* Modal status line (#porter-share-status / #porter-sched-status). Doubles as
 * success + error via the .is-error toggle: green w/ check by default, red w/
 * alert when .is-error. */
#porter-share-overlay .error-message {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: #15803d;
}
#porter-share-overlay .error-message::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
#porter-share-overlay .error-message.is-error { color: #e0395e; }
#porter-share-overlay .error-message.is-error::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0395e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

#porter-share-overlay .chips-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  background: #fff;
  border: 1.24px solid var(--porter-border);
  border-radius: 14px;
  cursor: text;
  transition: border-color 0.2s ease;
}
#porter-share-overlay .chips-input:focus-within { border-color: var(--porter-violet); }
#porter-share-overlay .chips-input.has-error { border-color: #e0395e; }
#porter-share-overlay .recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  background: var(--porter-border);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  color: #7f54b3;
  white-space: nowrap;
}
#porter-share-overlay .chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: rgba(127, 84, 179, 0.15);
  border-radius: 50%;
  color: #7f54b3;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
#porter-share-overlay .chip-remove:hover { background: rgba(127, 84, 179, 0.3); }
#porter-share-overlay .porter-people-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#porter-share-overlay .porter-person-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
#porter-share-overlay .porter-person-email {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: #0e161e;
}
#porter-share-overlay .porter-person-role {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid #d5d7db;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: #0e161e;
  cursor: pointer;
}
#porter-share-overlay .chips-text-input {
  flex: 1;
  min-width: 140px;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #0e161e;
  padding: 4px 2px;
}
#porter-share-overlay .chips-text-input::placeholder { color: #9ca3af; }

#porter-share-overlay .share-checks { gap: 10px; }
#porter-share-overlay .share-check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #0e161e;
  cursor: pointer;
}
#porter-share-overlay .share-check input { width: 16px; height: 16px; accent-color: var(--porter-violet); cursor: pointer; }

/* Native select styled as the hub's dropdown-button (resting-state parity). */
#porter-share-overlay .dropdown-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  padding: 0 40px 0 16px;
  border: 1.24px solid var(--porter-border);
  border-radius: 14px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%230E161E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  font: inherit;
  font-size: 14px;
  color: #0e161e;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
#porter-share-overlay .dropdown-select:hover,
#porter-share-overlay .dropdown-select:focus { outline: none; border-color: var(--porter-violet); }

#porter-share-overlay .modal-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--porter-border);
}
#porter-share-overlay .footer-spacer { flex: 1; }
#porter-share-overlay .footer-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--porter-accent);
  cursor: pointer;
}
#porter-share-overlay .cancel-button {
  height: 44px;
  padding: 0 24px;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
}
#porter-share-overlay .cancel-button:hover { background: #f3f4f6; border-color: #d1d5db; }
#porter-share-overlay .save-button {
  height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--porter-violet) 0%, #9333ea 100%);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
#porter-share-overlay .save-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(127, 84, 179, 0.4); }
#porter-share-overlay .save-button:disabled { background: #d1d5db; color: #9ca3af; cursor: not-allowed; }

#porter-share-overlay .toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  align-self: flex-start;
}
#porter-share-overlay .toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: #d1d5db;
  transition: background 0.2s ease;
}
#porter-share-overlay .toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
#porter-share-overlay .toggle-text { font-size: 13px; font-weight: 500; color: #6b7280; }
#porter-share-overlay .toggle-switch.on .toggle-track { background: var(--porter-violet); }
#porter-share-overlay .toggle-switch.on .toggle-thumb { transform: translateX(18px); }
#porter-share-overlay .toggle-switch.on .toggle-text { color: var(--porter-violet); }

/* ── Custom dropdowns (hub-style button + popup) for the report modal ──
 * Progressive enhancement of the native <select> (kept as the value source,
 * hidden). The popup is position:fixed so the modal's overflow never clips it
 * (mirrors the hub's CDK overlay). */
#porter-share-overlay .porter-select { position: relative; }
#porter-share-overlay .porter-select__native { display: none; }
#porter-share-overlay .dropdown-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1.24px solid var(--porter-border);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: #0e161e;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
#porter-share-overlay .dropdown-button:hover,
#porter-share-overlay .dropdown-button:focus,
#porter-share-overlay .dropdown-button[aria-expanded="true"] {
  outline: none;
  border-color: var(--porter-violet);
}
#porter-share-overlay .dropdown-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#porter-share-overlay .dropdown-button svg { flex: none; color: #0e161e; }

#porter-share-overlay .porter-select__list {
  position: fixed;
  z-index: 60;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--porter-border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(61, 28, 135, 0.14);
}
#porter-share-overlay .porter-select__item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: #0e161e;
  cursor: pointer;
}
#porter-share-overlay .porter-select__item:hover { background: #f0eafd; color: var(--porter-accent); }
#porter-share-overlay .porter-select__item.is-selected { background: var(--porter-tint); color: var(--porter-violet); font-weight: 600; }
#porter-share-overlay .porter-select__search {
  position: sticky;
  top: 0;
  background: #fff;
  padding-bottom: 6px;
}
#porter-share-overlay .porter-select__search input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--porter-border);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  outline: none;
}
#porter-share-overlay .porter-select__search input:focus { border-color: var(--porter-violet); }

/* Export-to-PDF toast (bottom-center): the kebab closes on click, so the
 * export's progress / error surfaces here. */
.porter-export-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 55;
  transform: translateX(-50%);
  max-width: min(90vw, 420px);
  padding: 11px 18px;
  border: 1px solid var(--porter-border);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(61, 28, 135, 0.16);
  color: #0e161e;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* ── Video overlay ──────────────────────────────────────────────────────────
   The official platform player, opened by the chrome on a report's request.
   z-index 80 clears every other layer (present-mode chrome is 70, modals 60,
   the FAB 45) so it also works while presenting. */
.porter-video__overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 10, 18, 0.78);
}
.porter-video {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(1100px, 100%);
}
/* Portrait platforms (reels, TikTok, Shorts) letterbox badly at 16:9. */
.porter-video[data-aspect="portrait"] {
  width: min(420px, 100%);
}
.porter-video[data-aspect="square"] {
  width: min(620px, 100%);
}
.porter-video__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.porter-video__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-family: var(--porter-font);
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.porter-video__link {
  color: #fff;
  font-family: var(--porter-font);
  font-size: 13px;
  opacity: 0.85;
  text-decoration: underline;
  white-space: nowrap;
}
.porter-video__link:hover {
  opacity: 1;
}
.porter-video__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}
.porter-video__close:hover {
  background: rgba(255, 255, 255, 0.24);
}
.porter-video__frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-height: calc(100vh - 140px);
  border-radius: 12px;
  background: #000;
  aspect-ratio: 16 / 9;
}
.porter-video[data-aspect="portrait"] .porter-video__frame {
  aspect-ratio: 9 / 16;
}
.porter-video[data-aspect="square"] .porter-video__frame {
  aspect-ratio: 4 / 5;
}
.porter-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Shown when the platform is known but no embed can be built (a shortener, an
   unsupported shape) — the external link is then the whole offer. */
.porter-video__hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--porter-font);
  font-size: 13px;
  text-align: center;
}
body.porter-video-open {
  overflow: hidden;
}
/* Belt and braces: the overlay markup is already omitted in print mode. */
@media print {
  .porter-video__overlay {
    display: none !important;
  }
}