/* ============================================================
   WeatherWindow.AI — Redesign 2 · demo-chrome.css
   ============================================================
   Light-DOM chrome for the ported Sample-Report/Map demo: the two
   thumbnail cards in #report-sample and the modal that opens them
   (js/passage-render/demo.js). Ported structurally from the original
   site's css/styles-splash.css (.demo-grid/.demo-card/.demo-modal/...)
   — same layout, spacing, and states, recolored automatically via the
   var(--token) names mapped in demo-theme.css. The modal content itself
   (Report/Map panes) renders inside Shadow DOM roots styled by the
   injected css/passage-demo-app.css — this file only reaches the
   surrounding chrome and the boat-popup portal, which live in the
   light DOM.
   ============================================================ */

.demo-grid {
  display: grid;
  /* Unequal columns. Baseline: the MacBook frame (1600×1067, aspect
     1.4995) is proportionally wider/shorter than the iPad frame
     (1200×920, aspect 1.3043) by a ratio of 1.4995/1.3043 ≈ 1.14964 — at
     that ratio the MacBook's HEIGHT equals the iPad's height. The MacBook
     is then bumped another 10% on top of that (iPad unchanged), so the
     final column ratio is 1.14964 × 1.1 ≈ 1.264604. Report/MacBook is the
     first grid child, Map/iPad the second. */
  grid-template-columns: 1.264604fr 1fr;
  /* Default grid stretch makes both cards match the taller MacBook
     card's height, but flex-column content inside sits at the top of
     that stretched box — so the shorter iPad device rendered flush with
     the MacBook's top edge instead of centered against it. Centering the
     items (not stretching them) splits the leftover height evenly above
     and below the iPad's own card, centering its device against the
     MacBook's. */
  align-items: center;
  gap: var(--s-6);
  /* iPad sized to 110% of the range-grid iPad above (RANGE — "day sail,
     weekend trip, or offshore passage"): a .range-card's device fills 1/3
     of .wrap (gap 1.4rem) minus the card's own 1.6rem padding and 1px
     border on each side — call that T. iPad target width = 1.1T (unchanged
     by the MacBook bump above). Total content width is therefore
     1.1T × (1 + 1.264604) = 1.1T × 2.264604 = T × 2.4910644; plus this
     grid's own gap, that's what .demo-grid's max-width needs to be. */
  max-width: calc(((100% - 2.8rem) / 3 - 3.2rem - 2px) * 2.4910644 + var(--s-6));
  margin: var(--s-6) auto 0;
}
@media (max-width: 720px) {
  .demo-grid { grid-template-columns: 1fr; }
}

/* Bare device thumbnails — no card chrome (border/background/shadow).
   Matches the .step-media / .showcase-item convention used everywhere
   else on the page: the .device bezel itself is the whole visual, the
   hover lift applies to the device (not a card), and the zoom affordance
   reuses the shared .zoom-badge (sections.css) instead of a one-off. */
.demo-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}
.demo-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius);
}

.demo-shot { position: relative; display: block; }
.demo-shot .device { width: 100%; transition: transform 180ms ease; }
/* The report/map thumbnails (2098×1308 and 1830×1096) are both wider,
   relative to their own height, than the iPad/MacBook device-screen
   cutouts they sit in — the shared .device-screen img rule
   (sections.css) uses object-fit:cover, which was cropping their left
   and right edges to fill the frame. Show the whole screenshot instead;
   .device-screen's own background:#000 fills the leftover top/bottom
   strip so it reads as a deliberate letterbox, not a rendering glitch. */
#demo-mount .device-screen img { object-fit: contain; }
.demo-card:hover .demo-shot .device,
.demo-card:focus-visible .demo-shot .device {
  transform: translateY(-4px) scale(1.02);
}


/* ─── Modal overlay ─────────────────────────────────────────────────────── */
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: var(--s-8);
}
.demo-modal[hidden] { display: none; }

.demo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(4px);
}

.demo-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--bg);
  border: 1px solid var(--hair-brass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

@media (max-width: 480px) {
  .demo-modal { padding: var(--s-4); }
}

.demo-modal__bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.demo-modal__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 40;
  font-weight: 460;
  font-size: var(--fs-md);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-modal__tabs {
  display: inline-flex;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-2);
}
.demo-tab {
  padding: var(--s-1) var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.demo-tab:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.demo-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.demo-tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}

.demo-modal__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-8);
  height: var(--s-8);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-dim);
  font-size: var(--fs-md);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.demo-modal__close:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.demo-modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Pane — fills the remaining height; the shadow root inside scrolls itself. */
.demo-modal__pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--bg);
}
.demo-modal__pane[hidden] { display: none; }

/* ── Boat-popup portal (light-DOM, above shadow stacking context) ────────── */
.demo-popup-portal {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;
  overflow: hidden;
}
.demo-popup-portal .passage-boat-popup-overlay {
  position: fixed;
  z-index: 1;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  background: var(--map-popup-bg);
  color: var(--map-popup-text);
  border: 1px solid var(--map-popup-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 310px;
}
.demo-popup-portal .passage-boat-popup-overlay:active { cursor: grabbing; }
.demo-popup-portal .passage-boat-popup-close {
  position: absolute;
  top: 2px;
  right: 5px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: var(--fs-base);
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.demo-popup-portal .passage-boat-popup-close:hover { color: var(--map-popup-text); }
.demo-popup-portal .tw-popup-inner { padding: 6px 2px; min-width: 200px; }
.demo-popup-portal .tw-popup-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}
.demo-popup-portal .tw-popup-coords {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  font-family: var(--font-mono);
  margin-bottom: 6px;
}
.demo-popup-portal .tw-popup-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  padding: 2px 0;
  border-top: 1px solid var(--border-dim);
}
.demo-popup-portal .tw-popup-label { color: var(--text-dim); }
.demo-popup-portal .tw-popup-section {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 7px 0 3px;
  padding-top: 5px;
  border-top: 1px solid var(--border-dim);
}
.demo-popup-portal .tw-popup-wind-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.demo-popup-portal .tw-popup-wind-table th { color: var(--text-dim); font-weight: 600; text-align: left; padding: 1px 4px 1px 0; }
.demo-popup-portal .tw-popup-wind-table td { padding: 1px 4px 1px 0; color: var(--map-popup-text); }
.demo-popup-portal .tw-popup-wind-table .tw-aw { color: var(--success); font-weight: 600; }
.demo-popup-portal .tw-popup-note { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 4px; font-style: italic; }
.demo-popup-portal .tw-popup-elapsed { font-size: var(--fs-xs); font-weight: 400; color: var(--text-dim); letter-spacing: 0.01em; }
.demo-popup-portal .tw-popup-summary { font-size: var(--fs-xs); color: var(--map-popup-text); margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--border-dim); line-height: 1.45; }
/* Port / starboard tack badges */
.demo-popup-portal .awa-ps { font-weight: 700; font-size: var(--fs-sm); padding: 2px 6px; border-radius: var(--radius-sm); white-space: nowrap; }
.demo-popup-portal .awa-p { background: var(--port-bg); color: var(--port-color); }
.demo-popup-portal .awa-s { background: var(--stbd-bg); color: var(--stbd-color); }
/* Sail plan pill badges */
.demo-popup-portal .reef-cell { font-weight: 700; padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--fs-xs); white-space: nowrap; display: inline-block; }
.demo-popup-portal .reef-full    { background: var(--stbd-bg);    color: var(--success); }
.demo-popup-portal .reef-1       { background: var(--accent-bg);  color: var(--accent);  }
.demo-popup-portal .reef-2       { background: var(--warning-bg); color: var(--warning); }
.demo-popup-portal .reef-3       { background: var(--danger-bg);  color: var(--danger);  }
.demo-popup-portal .reef-storm   { background: var(--danger); color: var(--text-on-accent); }
.demo-popup-portal .reef-undefined { background: var(--bg-raised); color: var(--text-dim); }
.demo-popup-portal .reef-motor-badge {
  display: inline-block; font-weight: 700; font-size: var(--fs-xs);
  padding: 1px 6px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-dark);
  border: 1px solid var(--border); margin-left: 4px;
  white-space: nowrap; vertical-align: middle;
}