/* Site-wide chart viewer for blog post bodies.
 *
 * Two parts: the "Enlarge" button that sits over a chart inside the post, and
 * the full-screen viewer that shows a scaled copy of it. Everything is written
 * from scratch: the site's Bootstrap bundle is purged, so no Bootstrap class is
 * relied on here. Class names carry the ctdcv- prefix so a post's own styles
 * never collide with them.
 */

/* ---- the button over a chart ---- */

/* Anchors: an element the post already owns (position made relative, which
 * shifts no layout) or a wrapper this script inserted around a lone chart. */
.ctdcv-anchor { position: relative; }
.ctdcv-wrap { display: block; position: relative; }

/* The button sits inside the post, where a rule of the post's own such as
 * "#profile .chart-card svg { width:100% }" outranks every class selector
 * here. The handful of properties that decide the button's size and place are
 * therefore forced; the rest stay overridable. */
.ctdcv-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 20;
  box-sizing: border-box;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-height: 40px;
  min-width: 40px;
  margin: 0 !important;
  padding: 0 12px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.ctdcv-btn svg {
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
  display: block !important;
  flex: 0 0 auto;
}
.ctdcv-btn:hover { background: #0e7490; border-color: #0e7490; color: #ffffff; }
.ctdcv-btn:focus-visible { outline: 3px solid #0e7490; outline-offset: 2px; }

/* "Share this chart" and "Enlarge" sit together in one bar at the chart's top
 * right. Inside the bar the Enlarge button gives up its own absolute place. */
.ctdcv-actions {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 20;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ctdcv-actions .ctdcv-btn { position: static !important; }
.ctdcv-share {
  position: static !important;
  box-sizing: border-box;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-height: 40px;
  min-width: 40px;
  margin: 0 !important;
  padding: 0 12px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.ctdcv-share svg {
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
  display: block !important;
  flex: 0 0 auto;
}
.ctdcv-share:hover { background: #0e7490; border-color: #0e7490; color: #ffffff; }
.ctdcv-share:focus-visible { outline: 3px solid #0e7490; outline-offset: 2px; }

/* ---- the viewer ---- */

.ctdcv-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: rgba(15, 23, 42, 0.92);
  /* A drag that runs past the edge of the stage must not scroll the page
   * underneath, nor trigger the WebView's rubber band. */
  overscroll-behavior: contain;
  /* The system's own furniture (status bar, notch, home indicator) sits over
   * the page inside the app and on a phone held sideways. Zero on a desktop,
   * where the viewer is a card with room around it; the fullscreen layout
   * below fills them in. */
  --ctdcv-top: 0px;
  --ctdcv-bottom: 0px;
  --ctdcv-left: 0px;
  --ctdcv-right: 0px;
}
/* A closed overlay must not sit over the page and swallow taps. */
.ctdcv-overlay[hidden] { display: none !important; }

.ctdcv-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1180px;
  height: 94vh;
  /* Small viewport units on a phone: 100vh is the height with the browser
   * chrome retracted, so a viewer sized in vh hangs its bottom row (the hint,
   * and in landscape the tools) below the visible area. */
  height: 94dvh;
  max-height: 100%;
  overflow: hidden;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.ctdcv-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: calc(10px + var(--ctdcv-top, 0px)) 12px 10px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.ctdcv-title {
  flex: 1 1 180px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 1.02rem;
  color: #0f172a;
}
.ctdcv-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.ctdcv-tool {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.ctdcv-tool svg { width: 19px; height: 19px; }
.ctdcv-tool:hover { background: #0e7490; border-color: #0e7490; color: #ffffff; }
.ctdcv-tool:focus-visible { outline: 3px solid #0e7490; outline-offset: 2px; }
.ctdcv-tool.ctdcv-close { background: #0f172a; border-color: #0f172a; color: #ffffff; }
.ctdcv-tool.ctdcv-close:hover { background: #0e7490; border-color: #0e7490; }

.ctdcv-level {
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.82rem;
  color: #334155;
}

.ctdcv-stage {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  touch-action: none;
  cursor: grab;
}
.ctdcv-stage.is-panning { cursor: grabbing; }
.ctdcv-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}
/* The copy is for looking at: taps and hovers belong to the chart in the page. */
.ctdcv-canvas svg { display: block; width: 100%; height: auto; pointer-events: none; }

.ctdcv-hint {
  flex: 0 0 auto;
  padding: 9px 12px calc(9px + var(--ctdcv-bottom, 0px));
  text-align: center;
  font-size: 0.8rem;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

/* ---- the viewer filling the screen ---- */

/* A phone upright, a phone held sideways (short and wide), and the iPhone app
 * at any size: the viewer is the whole screen, so it must keep itself clear of
 * the status bar, the notch and the home indicator. The app runs the WebView
 * edge to edge (viewport-fit=cover, contentInset 'never' in
 * mobile/capacitor.config.ts), so nothing else does this for us: without the
 * top inset the Close button sits under the clock and the battery, and the
 * reader has no way out of the viewer at all. */
@media (max-width: 760px), (max-height: 520px) {
  .ctdcv-overlay {
    padding: 0;
    --ctdcv-top: env(safe-area-inset-top, 0px);
    --ctdcv-bottom: env(safe-area-inset-bottom, 0px);
    /* Sideways the insets are not the same on both edges: the notch is on one
     * long edge and the home indicator on the other. */
    --ctdcv-left: env(safe-area-inset-left, 0px);
    --ctdcv-right: env(safe-area-inset-right, 0px);
  }
  .ctdcv-inner {
    height: 100vh;
    height: 100dvh;
    max-width: none;
    border-radius: 0;
    /* The notch eats a strip of one long edge; the white card runs under it,
     * its rows do not. */
    padding-left: var(--ctdcv-left);
    padding-right: var(--ctdcv-right);
    box-sizing: border-box;
  }
  .ctdcv-hint { font-size: 0.75rem; }
  .ctdcv-actions { top: 6px !important; right: 6px !important; }
  .ctdcv-btn, .ctdcv-share { padding: 0 10px; font-size: 0.78rem; }
}

/* Upright: the title takes its own line and the tools spread under it. Left
 * out of the landscape case, where a second row would cost most of the height
 * the reader rotated the phone to get. */
@media (max-width: 760px) and (min-height: 521px) {
  .ctdcv-title { flex: 1 1 100%; order: -1; font-size: 0.96rem; }
  .ctdcv-tools { flex: 1 1 auto; width: 100%; justify-content: space-between; }
}

/* The app on an iPad is wider than the phone query but still edge to edge. */
html.is-native .ctdcv-overlay {
  padding: 0;
  --ctdcv-top: env(safe-area-inset-top, 0px);
  --ctdcv-bottom: env(safe-area-inset-bottom, 0px);
  --ctdcv-left: env(safe-area-inset-left, 0px);
  --ctdcv-right: env(safe-area-inset-right, 0px);
}
html.is-native .ctdcv-inner {
  height: 100vh;
  height: 100dvh;
  max-width: none;
  border-radius: 0;
  padding-left: var(--ctdcv-left);
  padding-right: var(--ctdcv-right);
  box-sizing: border-box;
}

/* ---- the way out of a viewer this script does not own ---- */

/* Posts written before this viewer existed carry one of their own, and some of
 * those open a full-screen box whose close control ends up under the status
 * bar in the app. Whenever such a box is up, a button of ours sits below the
 * inset and closes it (static/js/chart_viewer.js). */
.ctdcv-escape {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  right: calc(env(safe-area-inset-right, 0px) + 10px) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2147483000;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.ctdcv-escape[hidden] { display: none !important; }
.ctdcv-escape svg { width: 22px; height: 22px; display: block; }
.ctdcv-escape:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* A post's own full-screen box, pushed clear of the status bar while it is up. */
.ctdcv-stray {
  box-sizing: border-box !important;
  padding-top: calc(env(safe-area-inset-top, 0px) + 4px) !important;
}

/* A post's own "Enlarge" trigger, replaced by this viewer's button. */
.ctdcv-superseded { display: none !important; }

/* A post's own box locked the page while it was up; once this script has taken
 * it away, that lock must not outlive it. */
html.ctdcv-freed,
html.ctdcv-freed body {
  overflow: auto !important;
  position: static !important;
}

/* While a chart fills the screen, the page behind it holds still. The script
 * locks the body itself (inline and important, so a lock a post's own viewer
 * left behind cannot outrank it); this keeps the rubber band off the WebView. */
html.ctdcv-open,
html.ctdcv-open body {
  overscroll-behavior: none;
}

/* On a narrow phone the share button keeps its icon and its accessible name. */
@media (max-width: 480px) {
  .ctdcv-share__label { display: none; }
  .ctdcv-share { padding: 0; justify-content: center; }
}