/*! Pole Position Pro — Eladástól a kifizetésig · timeline sections v1.0.0
 *  Single stylesheet. Every selector is scoped under .ppt-stack / .ppt-diagram
 *  / .ppt-compare and every class and custom property carries the ppt- prefix,
 *  so this file cannot affect anything else on the host page.
 *  Re-theme by editing the token block only. */

/* ==========================================================================
   Pole Position Pro — "Eladástól a kifizetésig" diagram, 1. szekció: MA
   --------------------------------------------------------------------------
   Everything is scoped under .ppt-diagram and every class carries the ppt-
   prefix, so this file cannot touch the host page.

   The host page CAN still touch us (global resets leak inward), so the root
   block below re-asserts every property the layout depends on.

   Orientation: ALL positional geometry arrives as custom properties
   (--ppt-off / --ppt-len / --ppt-pos / --ppt-work-len) set by the JS. Desktop
   maps them to left/width, mobile maps the same values to top/height. One
   DOM, two orientations, no second render path.

   To re-theme: edit the token block only.
   ========================================================================== */

/* ==========================================================================
   .ppt-stack — optional wrapper holding the three sections in order.

   It owns the horizontal gutter. The sections cancel that gutter with a
   negative margin to go full-bleed on mobile, so the two values must agree:
   change --ppt-gutter here and the full-bleed follows automatically. Without
   a .ppt-stack the sections fall back to assuming a 1.25rem host gutter.
   ========================================================================== */

.ppt-stack {
  --ppt-gutter: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 4.5rem;                 /* the visual separation between sections */
  box-sizing: border-box;
  padding-inline: var(--ppt-gutter);
}

@media (max-width: 860px) {
  .ppt-stack { gap: 3rem; }
}

.ppt-diagram,
.ppt-compare {
  /* ---- palette, mirrored from the live hu.poleposition.pro case pages ---- */
  --ppt-navy:        #0b132b;
  --ppt-navy2:       #0e1a3d;
  --ppt-panel:       #101a3a;
  --ppt-panel2:      #0d1631;
  --ppt-gold:        #c9a66b;
  --ppt-gold-light:  #ddbb86;
  --ppt-cream:       #f8f5ee;
  --ppt-cream2:      #fffdf8;
  --ppt-muted:       #9aa3b2;
  --ppt-muted2:      #c7c2b4;
  --ppt-border:      #2a2f3a;
  --ppt-border-gold: rgba(201, 166, 107, 0.28);

  /* ---- semantic: the whole argument lives in these two ---- */
  --ppt-work:        var(--ppt-gold);
  --ppt-wait:        rgba(154, 163, 178, 0.17);
  --ppt-wait-line:   rgba(154, 163, 178, 0.32);

  /* ---- metrics ---- */
  --ppt-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --ppt-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --ppt-bar-h:        14px;
  --ppt-row-gap:      1.45rem;
  --ppt-radius:       3px;
  --ppt-meta-w:       27.6rem; /* must cover .ppt-meta columns + gaps (27.5rem) */
  /* Mobile vertical track. Sized by the SHORTEST band in either panel, not by
     overall taste: on mobile a band's height IS its duration, and the AI panel's
     ② DÖNTÉS is 2 of 54 nap. At 960px that band is 36px against a ~29px label,
     so nothing overflows into ③. A min-height would be the wrong fix — it would
     desync the bands from the absolutely-positioned axis ticks. */
  --ppt-track-h:      960px;

  /* ---- re-assert against host-page resets ---- */
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 95%;
  max-width: 1120px;
  margin-inline: auto;
  padding: 2.75rem 2rem 2.25rem;
  font-family: var(--ppt-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  color: var(--ppt-cream);
  background: var(--ppt-panel);
  border: 1px solid var(--ppt-border-gold);
  border-radius: 6px;
  -webkit-font-smoothing: antialiased;
}

.ppt-diagram *,
.ppt-diagram *::before,
.ppt-diagram *::after,
.ppt-compare *,
.ppt-compare *::before,
.ppt-compare *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: inherit;
  text-transform: none;
}

/* ---- panel legend: the ┌─ MA ─┐ of the ASCII draft ---- */
.ppt-legend {
  position: absolute;
  top: -0.72rem;
  left: 1.75rem;
  padding: 0 0.6rem;
  font-family: var(--ppt-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ppt-gold);
  background: var(--ppt-panel);
}

/* ==========================  row grid  ================================== */

.ppt-plot { position: relative; }

.ppt-row,
.ppt-axis-wrap {
  display: grid;
  grid-template-columns: var(--ppt-meta-w) 1fr;
  align-items: center;
  column-gap: 1.5rem;
}

.ppt-rows {
  display: flex;
  flex-direction: column;
  gap: var(--ppt-row-gap);
  margin-top: 0.35rem;
}

.ppt-meta {
  display: grid;
  /* HOL is sized for the longest value in either panel: "Egy rendszerben" */
  grid-template-columns: 1.4rem 7.4rem 6.2rem 6.7rem 4.4rem;
  align-items: baseline;
  column-gap: 0.35rem;
  grid-template-areas: "num fazis osztaly hol ido";
}

.ppt-num     { grid-area: num;     font-family: var(--ppt-font-display); font-size: 0.95rem; color: var(--ppt-gold); }
.ppt-fazis   { grid-area: fazis;   font-family: var(--ppt-font-display); font-size: 0.86rem; font-weight: 600;
              letter-spacing: 0.07em; color: var(--ppt-cream2); }
.ppt-osztaly { grid-area: osztaly; font-size: 0.78rem; color: var(--ppt-muted2); }
.ppt-hol     { grid-area: hol;     font-size: 0.78rem; color: var(--ppt-muted); }
.ppt-ido     { grid-area: ido;     font-family: var(--ppt-font-display); font-size: 0.8rem; font-weight: 600;
              color: var(--ppt-gold-light); text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================  timeline track  ============================= */

.ppt-track {
  position: relative;
  height: var(--ppt-bar-h);
}

.ppt-bar {
  position: absolute;
  top: 0;
  left: var(--ppt-off);
  width: var(--ppt-len);
  height: 100%;
  display: flex;
  overflow: hidden;
  border-radius: var(--ppt-radius);
  transform: scaleX(0);
  transform-origin: left center;
}

.ppt-work {
  display: block;
  width: var(--ppt-work-len);
  height: 100%;
  background: var(--ppt-work);
  flex: 0 0 auto;
}

/* dead time: hatched, and faintly drifting — the only decorative motion here,
   and it carries meaning (nothing is being produced) */
.ppt-wait,
.ppt-sum-wait,
.ppt-swatch--wait,
.ppt-cmp-wait {
  background-color: var(--ppt-wait);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--ppt-wait-line) 0 1px,
    transparent 1px 6px
  );
  background-size: 8.49px 8.49px;
}

.ppt-wait,
.ppt-sum-wait,
.ppt-cmp-wait { animation: ppt-drift 2.6s linear infinite; }

.ppt-wait {
  display: block;
  height: 100%;
  flex: 1 1 auto;
}

@keyframes ppt-drift {
  from { background-position: 0 0; }
  to   { background-position: 8.49px 0; }
}

/* ==========================  axis  ====================================== */

.ppt-axis-inner { position: relative; }

.ppt-axis-labels {
  position: relative;
  height: 1rem;
  margin-bottom: 0.3rem;
}

.ppt-axis-label {
  position: absolute;
  left: var(--ppt-pos);
  transform: translateX(-50%);
  font-family: var(--ppt-font-display);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ppt-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ppt-axis {
  position: relative;
  height: 7px;
  border-top: 1px solid var(--ppt-border-gold);
  transform: scaleX(0);
  transform-origin: left center;
}

.ppt-tick {
  position: absolute;
  top: 0;
  left: var(--ppt-pos);
  width: 1px;
  height: 5px;
  background: var(--ppt-border-gold);
}

/* ==========================  brackets  ================================== */

.ppt-brackets {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-top: 1.5rem;
}

.ppt-bracket-track {
  position: relative;
  height: 1.15rem;
}

.ppt-bracket {
  position: absolute;
  top: 0;
  left: var(--ppt-off);
  width: var(--ppt-len);
  height: 100%;
  border-top: 1px solid var(--ppt-border-gold);
  opacity: 0;
}

.ppt-bracket::before,
.ppt-bracket::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 5px;
  background: var(--ppt-border-gold);
}
.ppt-bracket::before { left: 0; }
.ppt-bracket::after  { right: 0; }

.ppt-bracket-label {
  position: absolute;
  top: -0.62rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0.7rem;
  background: var(--ppt-panel);
  font-family: var(--ppt-font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ppt-gold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ppt-bracket--total .ppt-bracket-label {
  color: var(--ppt-cream2);
  font-size: 0.86rem;
}

/* megtakarított idő — the only green in the deck. Every other bracket
   measures time spent; this one measures time not spent, so it reads as a
   different category rather than more gold furniture. */
.ppt-bracket--saved { border-color: var(--ppt-green); }

.ppt-bracket--saved::before,
.ppt-bracket--saved::after { background: var(--ppt-green); }

.ppt-bracket--saved .ppt-bracket-label {
  color: var(--ppt-green);
  font-size: 0.82rem;
}

/* ==========================  zárás row  ================================= */

.ppt-zaras {
  margin-top: 1.9rem;
  padding-top: 1.35rem;
  border-top: 1px dashed var(--ppt-border);
  opacity: 0;
}

.ppt-zaras .ppt-meta { align-items: center; }

.ppt-zaras-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--ppt-muted2);
}

.ppt-pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--ppt-border-gold);
  border-radius: 999px;
  font-family: var(--ppt-font-display);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ppt-gold-light);
  white-space: nowrap;
}

/* ==========================================================================
   MUNKA / VÁRAKOZÁS summary — the closing beat.

   A decomposition of the `teljes ciklus` bracket above it (21 + 33 = 54), not
   a new claim. Deliberately in NAP, same unit as the axis: both sides are
   slices of the same elapsed calendar time, so hours would not be comparable.
   ========================================================================== */

.ppt-summary {
  margin-top: 1.9rem;
  padding-top: 1.45rem;
  border-top: 1px solid var(--ppt-border);
  opacity: 0;
}

.ppt-sum-bar {
  display: flex;
  height: 18px;
  overflow: hidden;
  border-radius: var(--ppt-radius);
  transform: scaleX(0);
  transform-origin: left center;
}

.ppt-sum-work {
  display: block;
  width: var(--ppt-work-len);
  height: 100%;
  background: var(--ppt-work);
  flex: 0 0 auto;
}

.ppt-sum-wait { display: block; height: 100%; flex: 1 1 auto; }

.ppt-sum-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.75rem;
  margin-top: 1rem;
}

.ppt-chip { display: inline-flex; align-items: center; gap: 0.6rem; }

.ppt-chip-label {
  font-family: var(--ppt-font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  color: var(--ppt-cream2);
}

.ppt-chip-val {
  font-family: var(--ppt-font-display);
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ppt-chip--work .ppt-chip-val { color: var(--ppt-gold-light); }
.ppt-chip--wait .ppt-chip-val { color: var(--ppt-muted2); }

.ppt-swatch {
  display: inline-block;
  width: 1.6rem;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.ppt-swatch--work { background: var(--ppt-work); }

/* ==========================  footer  ==================================== */

.ppt-foot {
  margin-top: 1.7rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ppt-border);
  opacity: 0;
}

.ppt-note {
  font-size: 0.74rem;
  color: var(--ppt-muted);
}

/* ==========================================================================
   MOBILE — the timeline rotates 90°.

   Horizontal at 375px gives 298px / 54 nap = 5.5px per nap, which kills the
   work/wait split on the short phases. Vertical at 620px gives 11.5px per
   nap — desktop parity (11.3) on a phone.
   ========================================================================== */

@media (max-width: 860px) {

  /* full bleed: cancel the wrapper's gutter exactly. Inside .ppt-stack the two
     values are guaranteed to agree; standalone, it falls back to 1.25rem. */
  .ppt-diagram,
  .ppt-compare {
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * var(--ppt-gutter, 1.25rem));
    padding: 2.25rem 0.85rem 1.6rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .ppt-plot { padding-bottom: 2.6rem; }

  /* ---- axis becomes a vertical gutter overlaying the track ---- */
  .ppt-axis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 2.1rem;
    height: var(--ppt-track-h);
  }

  .ppt-axis-inner { height: 100%; }

  .ppt-axis-labels {
    position: absolute;
    inset: 0;
    height: auto;
    margin: 0;
  }

  .ppt-axis-label {
    top: var(--ppt-pos);
    left: auto;
    right: 0.5rem;
    transform: translateY(-50%);
  }

  .ppt-axis {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    border-top: 0;
    border-left: 1px solid var(--ppt-border-gold);
    transform: scaleY(0);
    transform-origin: center top;
  }

  .ppt-tick {
    top: var(--ppt-pos);
    left: auto;
    right: 0;
    width: 5px;
    height: 1px;
  }

  /* ---- rows stack contiguously; each row's HEIGHT is its duration ---- */
  .ppt-rows {
    position: relative;
    display: block;
    height: var(--ppt-track-h);
    margin: 0 0 0 2.75rem;
    gap: 0;
  }

  .ppt-row--phase {
    height: var(--ppt-len);
    grid-template-columns: 16px 1fr;
    grid-template-areas: "track meta";
    align-items: start;
    column-gap: 0.7rem;
    padding-right: 4rem; /* keeps labels clear of the bracket rails */
  }

  .ppt-row--phase > .ppt-meta  { grid-area: meta; }
  .ppt-row--phase > .ppt-track { grid-area: track; height: 100%; }

  .ppt-bar {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    transform: scaleY(0);
    transform-origin: center top;
  }

  .ppt-work { width: 100%; height: var(--ppt-work-len); }
  .ppt-wait { width: 100%; }

  /* label block: two lines, ① spanning as a left gutter marker.
     Type is tightened here because the block has to clear the shortest band
     (② DÖNTÉS, 36px) — 38px at desktop metrics would not. */
  .ppt-meta {
    grid-template-columns: 1.2rem 1fr auto;
    grid-template-areas:
      "num fazis   ido"
      "num osztaly hol";
    row-gap: 0;
    column-gap: 0.45rem;
    align-items: baseline;
    line-height: 1.2;
  }

  .ppt-rows .ppt-fazis,
  .ppt-rows .ppt-ido { font-size: 0.8rem; line-height: 1.2; }

  .ppt-rows .ppt-osztaly,
  .ppt-rows .ppt-hol { font-size: 0.7rem; line-height: 1.2; }

  .ppt-hol { text-align: right; }

  /* ---- brackets become right-hand vertical rails ---- */
  .ppt-brackets {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 100%;          /* rails stay right-offset; the saved block needs
                             the full width, so the container carries it */
    height: var(--ppt-track-h);
    margin: 0;
  }

  .ppt-row--bracket {
    display: block;
    position: absolute;
    inset: 0;
  }

  .ppt-bracket-track { position: absolute; inset: 0; height: 100%; }

  .ppt-bracket {
    top: var(--ppt-off);
    left: auto;
    width: 0;
    height: var(--ppt-len);
    border-top: 0;
    border-left: 1px solid var(--ppt-border-gold);
  }

  .ppt-bracket--cycle { right: 2.3rem; }
  .ppt-bracket--total { right: 0.6rem; }

  .ppt-bracket::before,
  .ppt-bracket::after {
    top: auto;
    left: -5px;
    width: 6px;
    height: 1px;
  }
  .ppt-bracket::before { top: 0; }
  .ppt-bracket::after  { bottom: 0; }

  /* labels drop below the rail ends, staggered so they can't collide */
  .ppt-bracket-label {
    top: auto;
    bottom: -0.65rem;
    left: auto;
    right: 0.4rem;
    transform: none;
    padding: 0 0.35rem;
  }

  .ppt-bracket--total .ppt-bracket-label { bottom: -2.05rem; }

  /* megtakarított idő: the saved span covers the region where no phase
     labels exist, so on mobile it becomes a block filling that empty area
     rather than a third cramped rail */
  .ppt-bracket--saved {
    top: var(--ppt-off);
    height: var(--ppt-len);
    left: 2.75rem;        /* aligns with .ppt-rows */
    right: 4.3rem;        /* clears the two gold rails */
    width: auto;
    border: 1px dashed var(--ppt-green);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ppt-bracket--saved::before,
  .ppt-bracket--saved::after { display: none; }

  .ppt-bracket--saved .ppt-bracket-label {
    position: static;
    inset: auto;
    transform: none;
    background: none;
    padding: 0 0.5rem;
    text-align: center;
  }

  /* ---- below the plot ---- */
  .ppt-zaras { grid-template-columns: 1fr; row-gap: 0.6rem; margin-top: 1.6rem; }

  .ppt-sum-chips { flex-direction: column; gap: 0.75rem; }

  /* the empty left-hand cells only exist to align with the meta column */
  .ppt-spacer { display: none; }
}

/* ==========================  reduced motion  ============================ */

@media (prefers-reduced-motion: reduce) {
  .ppt-wait { animation: none; }
}


/* ==========================================================================
   Pole Position Pro — Section 3, comparison slide
   --------------------------------------------------------------------------
   Requires ppt-diagram.css, which defines the --ppt-* tokens and the panel
   chrome for both .ppt-diagram and .ppt-compare, plus the shared hatch fill.

   Own class namespace (ppt-cmp-*) so the panel's mobile rotation rules — which
   target .ppt-bar, .ppt-rows, .ppt-axis unqualified — cannot reach the overlay.
   The overlay stays horizontal at every width.
   ========================================================================== */

.ppt-compare { padding-bottom: 2rem; }

/* ==========================  legend  ==================================== */

/* Desktop: one line on the border. Names never break internally — the hyphen
   in AI-VEZÉRELT would otherwise split across lines. */
.ppt-cmp-legend { white-space: nowrap; }

.ppt-cmp-leg-a,
.ppt-cmp-leg-b { white-space: nowrap; }

.ppt-cmp-leg-sep::before {
  content: "→";
  margin: 0 0.35em;
  color: var(--ppt-muted);
}

/* variant b: the old way muted, the new way gold — same logic the tables use */
.ppt-compare[data-ppt-legend="b"] .ppt-cmp-leg-a { color: var(--ppt-muted2); }
.ppt-compare[data-ppt-legend="b"] .ppt-cmp-leg-b { color: var(--ppt-gold); }

/* ==========================  overlay  =================================== */

.ppt-cmp-plot { margin-top: 0.4rem; }

.ppt-cmp-row {
  display: grid;
  grid-template-columns: 9.5rem 1fr 5.5rem;
  align-items: center;
  column-gap: 1.25rem;
}

.ppt-cmp-label {
  font-family: var(--ppt-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--ppt-cream2);
}

.ppt-cmp-total {
  font-family: var(--ppt-font-display);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ppt-gold-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ppt-cmp-track {
  position: relative;
  height: 16px;
}

.ppt-cmp-bar {
  position: absolute;
  top: 0;
  left: var(--ppt-off);
  width: var(--ppt-len);
  height: 100%;
  display: flex;
  overflow: hidden;
  border-radius: var(--ppt-radius);
  transform: scaleX(0);
  transform-origin: left center;
}

.ppt-cmp-work {
  display: block;
  width: var(--ppt-work-len);
  height: 100%;
  background: var(--ppt-work);
  flex: 0 0 auto;
}

.ppt-cmp-wait { display: block; height: 100%; flex: 1 1 auto; }

/* track rows are spaced apart; the two bars must read as adjacent, not as a
   list, so the gap between them is deliberately tight */
.ppt-cmp-row--track { margin-top: 1.05rem; }
.ppt-cmp-row--track + .ppt-cmp-row--track { margin-top: 0.75rem; }

/* ---- axis ---- */

.ppt-cmp-axis-labels {
  position: relative;
  height: 1rem;
  margin-bottom: 0.3rem;
}

.ppt-cmp-axis-label {
  position: absolute;
  left: var(--ppt-pos);
  transform: translateX(-50%);
  font-family: var(--ppt-font-display);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ppt-muted);
  font-variant-numeric: tabular-nums;
}

.ppt-cmp-axis {
  position: relative;
  height: 7px;
  border-top: 1px solid var(--ppt-border-gold);
  transform: scaleX(0);
  transform-origin: left center;
}

.ppt-cmp-tick {
  position: absolute;
  top: 0;
  left: var(--ppt-pos);
  width: 1px;
  height: 5px;
  background: var(--ppt-border-gold);
}

/* ---- the shortfall: an upward bracket under the shorter track ---- */

.ppt-cmp-row--gap { margin-top: 0.1rem; }

.ppt-cmp-gaptrack {
  position: relative;
  height: 1.7rem;
}

.ppt-cmp-gap {
  position: absolute;
  top: 0;
  left: var(--ppt-off);
  width: var(--ppt-len);
  height: 0.5rem;
  border-top: 1px solid var(--ppt-border-gold);
  border-left: 1px solid var(--ppt-border-gold);
  border-right: 1px solid var(--ppt-border-gold);
  opacity: 0;
}

.ppt-cmp-gap-label {
  position: absolute;
  top: 0.62rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ppt-font-display);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ppt-gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- key ---- */

.ppt-cmp-row--key { margin-top: 0.9rem; }

.ppt-cmp-key {
  display: flex;
  gap: 1.5rem;
  font-size: 0.75rem;
  color: var(--ppt-muted2);
}

.ppt-cmp-key-item { display: inline-flex; align-items: center; gap: 0.45rem; }

/* ==========================  tables  ==================================== */

.ppt-cmp-group { opacity: 0; }

.ppt-cmp-group--sourced {
  margin-top: 2rem;
  padding-top: 1.45rem;
  border-top: 1px solid var(--ppt-border);
}

.ppt-cmp-group--derived { margin-top: 1.75rem; }

.ppt-cmp-head {
  font-family: var(--ppt-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--ppt-muted);
  margin-bottom: 0.9rem;
}

/* one grid for the whole group so columns align across rows */
.ppt-cmp-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.5rem 6rem 4rem;
  align-items: baseline;
  row-gap: 0.6rem;
  column-gap: 0.75rem;
}

.ppt-cmp-table--nopct { grid-template-columns: minmax(0, 1fr) 9.5rem 6rem; }

.ppt-cmp-k  { font-size: 0.84rem; color: var(--ppt-cream); }

.ppt-cmp-ba {
  font-family: var(--ppt-font-display);
  font-size: 0.82rem;
  color: var(--ppt-muted2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ppt-cmp-ba i {
  font-style: normal;
  color: var(--ppt-muted);
  padding: 0 0.15rem;
}

.ppt-cmp-d,
.ppt-cmp-p {
  font-family: var(--ppt-font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.ppt-cmp-d { font-size: 0.88rem; color: var(--ppt-gold); }
.ppt-cmp-p { font-size: 0.8rem;  color: var(--ppt-muted); }

/* ==========================  footer  ==================================== */

.ppt-cmp-foot {
  margin-top: 1.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ppt-border);
  opacity: 0;
}

/* ==========================  mobile  ==================================== */

@media (max-width: 860px) {

  /* The comparison legend names both systems in full (51 chars, ~496px) and
     cannot fit the ~313px of a phone panel on one line at any readable size.
     So it leaves the top border and becomes a wrapping heading inside the
     panel. The diagram panels keep their border legends — those are 23 chars
     and fit. */
  .ppt-compare { padding-top: 1.5rem; }

  .ppt-compare > .ppt-legend {
    position: static;
    display: block;
    padding: 0;
    margin-bottom: 1.3rem;
    background: none;
    line-height: 1.4;
    white-space: normal;   /* names still nowrap individually */
  }

  /* default stacking for a–d; "e" opts back into inline below */
  .ppt-cmp-leg-a,
  .ppt-cmp-leg-b   { display: block; }
  .ppt-cmp-leg-sep { display: none; }

  /* ---- a: gold hairline between, both names gold ---- */
  .ppt-compare[data-ppt-legend="a"] .ppt-cmp-leg-b,
  .ppt-compare[data-ppt-legend="b"] .ppt-cmp-leg-b {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--ppt-border-gold);
  }

  /* ---- b: same hairline, plus the muted/gold split set above ---- */

  /* ---- c: direction kept as a vertical arrow ---- */
  .ppt-compare[data-ppt-legend="c"] .ppt-cmp-leg-sep {
    display: block;
    margin: 0.15rem 0;
    letter-spacing: normal;
  }
  .ppt-compare[data-ppt-legend="c"] .ppt-cmp-leg-sep::before {
    content: "↓";
    margin: 0;
    color: var(--ppt-gold);
  }

  /* ---- d: gold left rule, separation by rhythm alone ---- */
  .ppt-compare[data-ppt-legend="d"] > .ppt-legend {
    border-left: 2px solid var(--ppt-gold);
    padding-left: 0.85rem;
  }
  .ppt-compare[data-ppt-legend="d"] .ppt-cmp-leg-b { margin-top: 0.85rem; }

  /* ---- e: minimal — inline, break only allowed around the arrow ---- */
  .ppt-compare[data-ppt-legend="e"] .ppt-cmp-leg-a,
  .ppt-compare[data-ppt-legend="e"] .ppt-cmp-leg-b,
  .ppt-compare[data-ppt-legend="e"] .ppt-cmp-leg-sep { display: inline; }

  /* label and total move above the track so the bar gets the full width —
     at 375px that is ~355px for 54 nap (6.6px/nap). Lengths stay legible;
     the 1-day work slice in ② is marginal. If it reads badly, the fallback
     is rotating the overlay like the panels do. */
  .ppt-cmp-row {
    grid-template-columns: 1fr auto;
    row-gap: 0.4rem;
  }

  /* explicit placement: auto-flow would push the total below the spanning
     track instead of keeping it on the label's line */
  .ppt-cmp-row--track > .ppt-cmp-label { grid-area: 1 / 1 / 2 / 2; }
  .ppt-cmp-row--track > .ppt-cmp-total { grid-area: 1 / 2 / 2 / 3; }
  .ppt-cmp-row--track > .ppt-cmp-track { grid-area: 2 / 1 / 3 / -1; }

  .ppt-cmp-row--gap   > .ppt-cmp-gaptrack,
  .ppt-cmp-row--key   > .ppt-cmp-key,
  .ppt-cmp-row--axis  > .ppt-cmp-axis-wrap { grid-column: 1 / -1; }

  .ppt-cmp-spacer { display: none; }

  .ppt-cmp-total { text-align: right; }
  .ppt-cmp-row--track + .ppt-cmp-row--track { margin-top: 1.1rem; }

  /* tables: label on its own line, numbers beneath it */
  .ppt-cmp-table,
  .ppt-cmp-table--nopct {
    grid-template-columns: 1fr auto auto;
    row-gap: 0.95rem;
  }

  .ppt-cmp-k { grid-column: 1 / -1; }
  .ppt-cmp-ba { font-size: 0.78rem; }
}