/* ===== Chart toggle button ===== */
#chart-toggle {
  position: fixed; right: 12px; bottom: 12px; z-index: 9999;
  background: #1c1c1e; color: #fff; border: 1px solid #444;
  padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
#chart-toggle:hover { background: #2c2c2e; }

/* ===== Tablet-sized chart card — Jeppesen plate shape (631:1072 W:H) =====
   Centered in map area (right of nav-sidebar 72px + layer-panel 250px = 322px).
   --cv-left-offset shifts drawer right by half of left-UI width (≈161px). */
#chart-drawer {
  --cv-left-offset: 161px;
  position: fixed; left: 50%; top: 50%; z-index: 9998;
  width: 600px; max-width: 95vw;
  aspect-ratio: 631 / 1072;
  max-height: 96vh;
  display: flex; flex-direction: column;
  pointer-events: none;
  transform: translate(calc(-50% + var(--cv-left-offset)), calc(-50% + 120vh));
  transition: transform 0.28s ease;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #111;
  border: 1px solid rgba(0,0,0,0.4);
  border-radius: 8px;
  overflow: hidden;
}
#chart-drawer.open { transform: translate(calc(-50% + var(--cv-left-offset)), -50%); }
/* On narrow viewports (collapsed sidebar or small screens), reset offset so drawer doesn't go off-screen */
@media (max-width: 1100px) { #chart-drawer { --cv-left-offset: 36px; } }
@media (max-width: 800px)  { #chart-drawer { --cv-left-offset: 0px; } }

/* Re-enable interaction on solid sections only */
#chart-drawer-head,
#chart-drawer .chart-panel-top,
#chart-drawer .chart-panel-bottom { pointer-events: auto; }

/* Background opacity is controlled by --chart-bg-opacity (0–1) set via slider */
#chart-drawer { --chart-bg-opacity: 1; }
#chart-drawer .chart-panel-top,
#chart-drawer .chart-panel-bottom { background: rgba(255,255,255, var(--chart-bg-opacity)); }

/* When bg-opacity is low, add white text outline for legibility */
#chart-drawer.bg-low text,
#chart-drawer.bg-low .v,
#chart-drawer.bg-low .label,
#chart-drawer.bg-low .freqs,
#chart-drawer.bg-low .body { paint-order: stroke; -webkit-text-stroke: 2.5px rgba(255,255,255,0.85); }
#chart-drawer.bg-low .chart-panel-top,
#chart-drawer.bg-low .chart-panel-bottom { box-shadow: none; }

/* Slider styling */
#chart-drawer-head input[type=range] { flex: 1; max-width: 180px; height: 4px; cursor: pointer; }

#chart-drawer-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: #f3f3f3; border-bottom: 1px solid #ccc;
  font-size: 12px; font-weight: 600;
}
#chart-drawer-head .title { flex: 1; }
#chart-drawer-head button {
  background: #fff; border: 1px solid #888; padding: 2px 8px;
  font-size: 11px; cursor: pointer; border-radius: 3px;
}
#chart-drawer-head button.active { background: #1c1c1e; color: #fff; border-color: #111; }

/* Body uses Jeppesen IAP plate vertical proportions:
   header 21% : plan view 43% : (profile + minimums + footer) 36% */
.chart-panel-body {
  flex: 1; display: grid;
  grid-template-rows: 21fr 43fr 36fr;
  overflow: hidden; position: relative; min-height: 0;
}

/* Paper bezel — thin white frame around the chart, like a printed approach plate */
.bezel { position: absolute; background: #fff; pointer-events: auto; z-index: 5; }
.bezel-left  { top: 0; bottom: 0; left: 0;  width: 8px; }
.bezel-right { top: 0; bottom: 0; right: 0; width: 8px; }
/* Top section (header) — solid, height set by parent grid (21%) */
.chart-panel-top {
  background: #fff;
  border-bottom: 2px solid #111;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden; min-height: 0;
}
/* Middle area — plan view hole; height set by parent grid (43%, ≈1.9:1 W:H) */
.chart-panel-mid {
  width: 100%;
  position: relative;
  pointer-events: none;
  min-height: 0;
}

/* Bezel sizes: top/bot = 18px tall, left/right = 22px wide */
.chart-panel-mid {
  --bz-tb: 18px;
  --bz-lr: 22px;
}

/* Inner transparent hole (map shows through) */
.cv-hole {
  position: absolute;
  top: var(--bz-tb); bottom: var(--bz-tb);
  left: var(--bz-lr); right: var(--bz-lr);
  pointer-events: none;
}

/* White bezel strips (full-width top/bot, full-height left/right covering corners) */
.cv-bezel { position: absolute; background: #fff; pointer-events: auto; z-index: 4; }
.cv-bezel-top   { top: 0; left: 0; right: 0; height: var(--bz-tb); }
.cv-bezel-bot   { bottom: 0; left: 0; right: 0; height: var(--bz-tb); }
.cv-bezel-left  { top: 0; bottom: 0; left: 0; width: var(--bz-lr); }
.cv-bezel-right { top: 0; bottom: 0; right: 0; width: var(--bz-lr); }

/* Coordinate tick labels overlay (positioned on bezels) */
.cv-coord-frame { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.cv-tick {
  position: absolute;
  font: 700 8.5px "Helvetica Neue", Arial, sans-serif;
  color: #111;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.cv-tick.top    { top: 4px;    transform: translateX(-50%); }
.cv-tick.bot    { bottom: 4px; transform: translateX(-50%); }
.cv-tick.left   { left: 11px;  transform-origin: center center; transform: translate(-50%, -50%) rotate(-90deg); }
.cv-tick.right  { right: 11px; transform-origin: center center; transform: translate( 50%, -50%) rotate( 90deg); }

/* Bottom section (profile + minimums + MA bar) — solid, height set by parent grid (36%) */
.chart-panel-bottom {
  background: #fff;
  border-top: 2px solid #111;
  box-shadow: 0 -4px 8px rgba(0,0,0,0.1);
  overflow: auto; min-height: 0;
}

/* ===== Header (ASI grid style) ===== */
.cv-hdr { border-bottom: 2px solid #111; }
.cv-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1.5px solid #111; }
.cv-grid > div { padding: 5px 8px; min-height: 36px; display: flex; flex-direction: column; justify-content: center; }
.cv-grid .id b { font-size: 13px; font-weight: 700; }
.cv-grid .id .sub { font-size: 10px; color: #333; }
.cv-grid .center { text-align: center; align-items: center; }
.cv-grid .center .agency { font-size: 11px; font-weight: 700; }
.cv-grid .right { text-align: right; align-items: flex-end; }
.cv-grid .right .ap { font-size: 13px; font-weight: 700; }
.cv-grid .right .type { font-size: 11px; font-weight: 700; }
.cv-grid .right .ifr { font-size: 10px; font-weight: 700; color: #333; }

.cv-body { display: flex; align-items: stretch; }
.cv-body-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cv-body-main > * { border-bottom: 1px solid #111; }
.cv-body-main > *:last-child { border-bottom: none; }

.cv-freq-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.cv-freq-row > div { border-right: 1px solid #111; padding: 4px 8px; }
.cv-freq-row > div:last-child { border-right: none; }
.cv-freq-row .label { font-size: 9.5px; font-weight: 700; color: #222; }
.cv-freq-row .freqs { font-size: 11px; font-weight: 600; }

.cv-meta-row { display: grid; grid-template-columns: repeat(5, 1fr); }
.cv-meta-row > div { border-right: 1px solid #111; padding: 3px 8px; text-align: center; }
.cv-meta-row > div:last-child { border-right: none; }
.cv-meta-row .k { font-size: 9px; color: #444; font-weight: 600; }
.cv-meta-row .v { font-size: 11px; font-weight: 700; }

/* Jeppesen-style procedure info row (LOC / FAC / GS / DA(H) / Apt Elev-TDZE) */
.cv-proc-row { display: grid; grid-template-columns: repeat(5, 1fr); }
.cv-proc-row > div { border-right: 1px solid #111; padding: 4px 6px; text-align: center; }
.cv-proc-row > div:last-child { border-right: none; }
.cv-proc-row .k { font-size: 9px; color: #444; font-weight: 700; letter-spacing: 0.2px; }
.cv-proc-row .v { font-size: 12px; font-weight: 700; line-height: 1.15; }
.cv-proc-row .v.sm { font-size: 10px; font-weight: 600; }

/* GS column: emphasize FAF crossing altitude over fix name (pilot's primary reference) */
#cv-faf-name { font-size: 10px; font-weight: 600; color: #333; }
#cv-faf-alt  { font-size: 14px; font-weight: 800; line-height: 1.1; }

.cv-text { padding: 5px 10px; font-size: 10.5px; line-height: 1.45; }
.cv-text .row { display: flex; gap: 8px; }
.cv-text .row .label { width: 90px; color: #444; font-weight: 600; flex-shrink: 0; }
.cv-text .row .body { flex: 1; }

.cv-msa { width: 160px; flex-shrink: 0; border-left: 1px solid #111; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0 4px; background: #fff; }
.cv-msa svg { width: 140px !important; height: auto !important; max-height: 100%; display: block; }
.cv-msa .ring { fill: #fff; stroke: #111; stroke-width: 1.2; }
.cv-msa .sec-line { stroke: #111; stroke-width: 0.9; }
.cv-msa .alt { font-size: 8px; font-weight: 600; fill: #111; }
.cv-msa .brg { font-size: 7.5px; fill: #333; font-weight: 500; }
.cv-msa .msa-lbl { font-size: 9px; font-weight: 600; fill: #111; }

/* ===== Section titles ===== */
.cv-section-title { font-size: 9px; font-weight: 700; letter-spacing: 0.4px; color: #555; padding: 2px 10px; background: #f3f3f3; border-bottom: 1px solid #d0d0d0; }

/* ===== Profile view ===== */
.cv-profile-wrap { padding: 6px 10px; border-bottom: 1px solid #111; }
.cv-pf { display: block; width: 100%; height: auto; }
.cv-pf text { font-family: "Helvetica Neue", Arial, sans-serif; fill: #111; }
/* Profile view text scale ~1.4× to match Jeppesen visual weight */
.cv-pf .fixname { font-size: 19.5px; font-weight: 700; }
.cv-pf .fixsub { font-size: 12.5px; font-weight: 600; fill: #222; }
.cv-pf .fixdme { font-size: 12px; font-weight: 600; fill: #444; }
.cv-pf .fix-loc-only { font-size: 10.5px; font-weight: 700; fill: #111; letter-spacing: 0.4px; }
.cv-pf .seg-nm { font-size: 13.5px; font-weight: 700; fill: #111; }
.cv-pf .seg-nm-label { font-size: 12px; font-weight: 700; fill: #222; letter-spacing: 0.3px; }
.cv-pf .info-label { font-size: 13.5px; font-weight: 700; fill: #111; }
/* Compact MA symbolic box (top-right of profile view) */
.cv-pf .ma-box { fill: #fff; stroke: #111; stroke-width: 0.8; }
.cv-pf .ma-box-title { font-size: 14px; font-weight: 700; fill: #111; letter-spacing: 0.4px; }
.cv-pf .ma-box-sep { stroke: #888; stroke-width: 0.5; }
.cv-pf .ma-box-line { font-size: 14px; font-weight: 600; fill: #111; }
.cv-pf .alt-text { font-size: 21px; font-weight: 700; }
.cv-pf .alt-hgt { font-size: 12.5px; fill: #444; font-weight: 600; }
.cv-pf .approach { fill: none; stroke: #111; stroke-width: 2.2; stroke-linejoin: round; }
/* Thin dashed continuation from MAPt to THR (visual cue for descent past DA) */
.cv-pf .approach-cont { fill: none; stroke: #444; stroke-width: 1.0; stroke-dasharray: 2 2; }
/* Level dashed segment from MDA point to MAPt (RNP / non-precision level flight at MDA) */
.cv-pf .approach-level { fill: none; stroke: #111; stroke-width: 1.6; stroke-dasharray: 4 3; }
/* Missed Approach — thick dashed up from MAPt */
.cv-pf .ma { fill: none; stroke: #111; stroke-width: 2.0; stroke-dasharray: 5 3; }
.cv-pf .fix-rule { stroke: #111; stroke-width: 0.8; stroke-dasharray: 1.5 2; }
.cv-pf .baseline { stroke: #111; stroke-width: 1.2; }
.cv-pf .nm-label { font-size: 12.5px; fill: #333; }

/* ===== Minimums table ===== */
.cv-minimums { margin-top: 6px; border: 1px solid #111; padding: 4px 8px; background: #fafafa; font-size: 10.5px; }
.cv-minimums:empty { display: none; }
.cv-minimums .cv-section-title { font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; border-bottom: 1px solid #999; padding-bottom: 2px; margin-bottom: 4px; }
.cv-min-table { width: 100%; border-collapse: collapse; }
.cv-min-table th, .cv-min-table td { border: 1px solid #ccc; padding: 2px 6px; text-align: center; }
.cv-min-table th { background: #eee; font-size: 9.5px; font-weight: 700; }
.cv-min-table tbody td:first-child { text-align: left; font-weight: 600; }
.cv-min-notes { font-size: 9.5px; margin: 4px 8px 4px 24px; padding: 0; color: #555; }
.cv-min-notes li { margin: 0; line-height: 1.3; }

/* MINIMUMS section: OCA(H) + Rate of Descent side-by-side */
.cv-min-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 6px;
  padding: 4px 8px;
}
.cv-oca-table, .cv-rod-table {
  width: 100%; border-collapse: collapse; font-size: 10px;
}
.cv-oca-table th, .cv-oca-table td,
.cv-rod-table th, .cv-rod-table td {
  border: 1px solid #111; padding: 2px 5px; text-align: center;
}
.cv-oca-table th, .cv-rod-table th {
  background: #f3f3f3; font-weight: 700; font-size: 9.5px;
}
.cv-oca-table .group-label,
.cv-oca-table .row-label,
.cv-rod-table .row-label {
  text-align: left; font-weight: 600; background: #fafafa;
}
.cv-oca-table .group-label {
  vertical-align: middle; font-weight: 700; writing-mode: horizontal-tb;
  font-size: 9.5px;
}
.cv-oca-table .val, .cv-rod-table .val { font-weight: 700; }
.cv-rod-table .row-label .unit { font-size: 8.5px; font-weight: 500; color: #555; display: block; }
@media (max-width: 700px) {
  .cv-min-grid { grid-template-columns: 1fr; }
}

/* ===== MA bar ===== */
.cv-ma-bar { background: #fafafa; }
.cv-ma-bar:empty { display: none; }
.cv-ma-body { padding: 5px 10px; display: flex; flex-direction: column; gap: 4px; }
.cv-ma-body .ma-text { font-size: 10.5px; line-height: 1.45; color: #111; }
.cv-ma-body .row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 10.5px; }
.cv-ma-body .row .cell { display: flex; gap: 5px; align-items: baseline; }
.cv-ma-body .row .cell .k { font-size: 9px; color: #666; font-weight: 600; }
.cv-ma-body .row .cell .v { font-weight: 700; }