/* guide.css — R-098 T8 guided demo (window.dvDemo) + analyst guide (window.dvGuide).
   Ink-mode, matching css/tokens.css + css/wizard.css. Governed-document register: a serif
   display for titles over the dark UI; coverage chips carry the honesty distinction. */

:root { --dvg-rail: clamp(340px, 34vw, 440px); }   /* demo/guide right-rail width (desktop/tablet-landscape) */

/* ── shared slide-over shell ── */
.dvg-panel, .dvg-guide {
  position: fixed; top: 48px; bottom: 0; right: 0; width: var(--dvg-rail);
  background: rgba(12, 15, 19, 0.975); border-left: 1px solid var(--border);
  z-index: 1002; display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(6px); box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
}
.dvg-panel.is-open, .dvg-guide.is-open { transform: translateX(0); }

.dvg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.dvg-counter { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--accent2); text-transform: uppercase; }
.dvg-close {
  background: transparent; border: 1px solid var(--border); border-radius: 2px; color: var(--muted);
  width: 26px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1; flex-shrink: 0;
}
.dvg-close:hover { border-color: var(--danger); color: var(--danger); }

/* ── guided demo panel ── */
.dvg-title {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--text);
  margin: 18px 18px 4px; letter-spacing: 0.01em;
}
.dvg-body { flex: 1; overflow-y: auto; padding: 8px 18px 4px; color: var(--text); font-size: 14px; line-height: 1.55; }
.dvg-body p { margin: 10px 0; }
.dvg-body code { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent2); background: rgba(90, 169, 222, 0.08); padding: 1px 4px; border-radius: 2px; }
.dvg-body.dvg-emph { border-left: 2px solid var(--warn); margin-left: 6px; padding-left: 14px; }
.dvg-muted { color: var(--muted); font-size: 13px; }
.dvg-disc { color: var(--muted); font-size: 12px; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 12px; }
.dvg-warn { color: #E7C66B; background: rgba(212, 160, 23, 0.08); border: 1px solid rgba(212, 160, 23, 0.4); border-radius: 2px; padding: 10px 12px; }
.dvg-warn strong { color: #F0D68A; }

/* key/value contract table */
.dvg-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 8px 0 12px; font-size: 13px; }
.dvg-kv dt { color: var(--muted); }
.dvg-kv dd { color: var(--text); margin: 0; }

/* coverage chips — the honesty vocabulary, visually distinct */
.dvg-chip { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 2px; border: 1px solid currentColor; white-space: nowrap; vertical-align: baseline; }
.dvg-obs { color: var(--accent2); }
.dvg-oz  { color: var(--ok); }
.dvg-ne  { color: var(--muted); border-style: dashed; }

.dvg-dots { display: flex; gap: 6px; padding: 6px 18px; flex-shrink: 0; }
.dvg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.dvg-dot.is-current { background: var(--accent2); box-shadow: 0 0 0 3px rgba(90, 169, 222, 0.18); }
.dvg-dot.is-done { background: var(--accent); }

.dvg-nav { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); flex-shrink: 0; }
.dvg-btn { flex: 1; background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 2px;
  padding: 9px 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.dvg-btn:hover:not(:disabled) { background: #2680bd; }
.dvg-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.dvg-btn--ghost { flex: 0 0 auto; background: transparent; color: var(--text); border-color: var(--border); font-weight: 500; }
.dvg-btn--ghost:hover:not(:disabled) { border-color: var(--accent2); color: var(--accent2); }

/* ── analyst guide slide-over ── */
.dvg-guide-body { flex: 1; overflow-y: auto; padding: 8px 18px 20px; }
.dvg-guide-sec { padding: 14px 0; border-bottom: 1px solid var(--border); }
.dvg-guide-sec.is-warn { }
.dvg-guide-h { font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.dvg-guide-sec.is-warn .dvg-guide-h { color: #E7C66B; }
.dvg-guide-p { color: var(--text); font-size: 13.5px; line-height: 1.55; }
.dvg-guide-p p { margin: 8px 0; }
.dvg-guide-p ul { margin: 8px 0; padding-left: 18px; }
.dvg-guide-p li { margin: 6px 0; }
.dvg-guide-p code { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent2); }

/* launch buttons in the data tab */
.dvg-launch-row { display: flex; gap: 8px; margin-top: 8px; }
.dvg-launch-row .btn { flex: 1; }
.btn--demo { background: transparent; color: var(--accent2); border: 1px solid var(--accent2); }
.btn--demo:hover { background: rgba(90, 169, 222, 0.1); }
.btn--guide { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn--guide:hover { border-color: var(--text); color: var(--text); }

/* ══ RAIL MODE (desktop + tablet-landscape): shift the legend + timeline clear of the right rail
   so the panel never covers the UI it narrates. ══ */
body.dvg-demo-open .map-legend { right: calc(var(--dvg-rail) + 16px); }
body.dvg-demo-open #dv-timeline-wrap {
  left: 16px; right: auto; transform: none;
  width: min(560px, calc(100vw - var(--dvg-rail) - 40px));
}

/* ══ Translucent map overlays whenever a data view is on the map (dv-view-active — set by
   dvFrameLayer for the view's whole lifetime, so this persists past the demo's Finish AND covers
   the wizard's "Show on map"). Low alpha lets the map read clearly through the legends; a strong
   backdrop blur + saturation frost the map behind the text, and a text-shadow keeps labels crisp
   over bright basemap areas. ══ */
body.dv-view-active .map-legend,
body.dv-view-active .dv-frame-legend,
body.dv-view-active .dv-timeline-bar {
  background: rgba(18, 22, 28, 0.4);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-color: rgba(120, 180, 225, 0.28);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);   /* inherits to the legend/timeline labels */
}

/* keyboard focus visibility (WCAG) */
.dvg-btn:focus-visible, .dvg-close:focus-visible, .dvg-title:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.dvg-title:focus-visible { outline-offset: 4px; }

/* ══ TABLET-PORTRAIT + MOBILE (<= 900px): BOTTOM SHEET — never cover the whole map. The map +
   coverage legend + timeline stay visible ABOVE the sheet; the redundant flood-detection legend
   hides during the demo to declutter the small screen. ══ */
@media (max-width: 900px) {
  :root { --dvg-sheet: 50vh; }
  .dvg-panel, .dvg-guide {
    top: auto; left: 0; right: 0; bottom: 0; width: 100vw; height: var(--dvg-sheet); max-height: var(--dvg-sheet);
    border-left: none; border-top: 1px solid var(--border);
    transform: translateY(102%); box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.45);
  }
  .dvg-panel.is-open, .dvg-guide.is-open { transform: translateY(0); }
  .dvg-title { font-size: 19px; margin-top: 12px; }
  body.dvg-demo-open #map-legend { display: none; }
  body.dvg-demo-open #dv-timeline-wrap {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: calc(var(--dvg-sheet) + 10px); width: min(94vw, 620px);
  }
}

/* Phones: the control sidebar otherwise leaves the map a ~13% sliver — collapse it DURING the
   guided demo so the map (which the demo narrates) is full-bleed above the sheet. Restored on exit. */
@media (max-width: 640px) {
  body.dvg-demo-open .main > .panel { display: none; }
}

/* Small phones: a touch taller sheet + bigger tap targets. */
@media (max-width: 430px) {
  :root { --dvg-sheet: 56vh; }
  .dvg-body { font-size: 13.5px; }
  .dvg-nav .dvg-btn { padding: 11px 10px; }
}