/* glen-design: v1 */
/* ============================================================================
   Pulse: the figures leadership watches. Page head with the period control,
   the hero (five figures beside the revenue instrument with its period lens),
   then the divisions against plan, cash against the buffer and the hotels.
   Tokens only; every hover gated; motion additive under no-preference.
   ========================================================================== */

/* --- PAGE HEAD ------------------------------------------------------------ */
.pl-head > div:first-child{ flex: 1 1 480px; min-width: 0; }
.pl-lede{ transition: opacity var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.pl-lede.pl-swap{ opacity: 0; filter: blur(2px); }
.pl-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

/* segmented control whose thumb glides to the pressed period */
.pl-seg{ position: relative; isolation: isolate; }
.pl-seg-thumb{
  position: absolute; inset: 3px; z-index: 0; pointer-events: none; border-radius: 8px;
  background: var(--surface-1);
  clip-path: inset(0 var(--r, 100%) 0 var(--l, 0) round 8px);
}
.pl-seg button{ position: relative; z-index: 1; }
.pl-seg button[aria-pressed="true"]{ background: transparent; box-shadow: none; color: var(--ink); }
.pl-seg button:focus-visible{ outline-offset: 0; }

/* --- HERO ----------------------------------------------------------------- */
.pl-hero{ display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 16fr); gap: var(--s4); margin-bottom: var(--s4); }
.pl-figs{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.pl-fig--lead{ grid-column: 1 / -1; }

.pl-fig{ display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); min-width: 0; }
.pl-fig-h{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.pl-fig-h h3{ font: 600 var(--fs-base)/1.3 var(--font-body); letter-spacing: 0; min-width: 0; }
.pl-fig-h h3 small{ display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-faint); }
.pl-state{ flex: none; font-size: var(--fs-sm); }
.pl-state i{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pl-fig-v{ display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.pl-fig-v .fig{ font-size: var(--fs-2xl); color: var(--ink); white-space: nowrap; }
.pl-fig--lead .pl-fig-v .fig{ font-size: var(--fs-hero); }
.pl-unit{ font-size: var(--fs-base); color: var(--ink-dim); }
.pl-dir{ display: flex; align-items: center; gap: var(--s1); margin: 0; font-size: var(--fs-base); font-weight: 600; line-height: 1.35; color: var(--ink-dim); max-width: none; }
.pl-dir .ic{ width: 16px; height: 16px; flex: none; transition: transform var(--dur-base) var(--ease-out); }
.pl-dir.down .ic{ transform: rotate(180deg); }
.pl-dir.ok{ color: var(--ok); } .pl-dir.warn{ color: var(--warn); } .pl-dir.bad{ color: var(--bad); } .pl-dir.flat{ color: var(--ink-dim); }
.pl-quiet{ margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-dim); max-width: none; }

/* sparkline: the SVG stretches, the frontier dot is HTML so it stays round */
.pl-spark{ position: relative; height: 32px; }
.pl-fig .pl-quiet{ flex: 1 1 auto; }
.pl-fig--lead .pl-spark{ height: 40px; }
.pl-spark svg{ width: 100%; height: 100%; display: block; overflow: visible; }
.pl-spark .sp-l{ fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pl-spark .sp-a{ stroke: none; }
.pl-spark .st0, .pl-plot .st0{ stop-color: var(--accent); stop-opacity: .2; }
.pl-spark .st1, .pl-plot .st1{ stop-color: var(--accent); stop-opacity: 0; }
.pl-spark-now{
  position: absolute; width: 8px; height: 8px; border-radius: 50%; pointer-events: none;
  translate: -50% -50%; background: var(--accent); box-shadow: 0 0 0 3px var(--tint-2), 0 0 12px var(--glow);
}

/* the revenue instrument */
.pl-trend{ display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); min-width: 0; }
.pl-trend-h{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s5); flex-wrap: wrap; }
.pl-read{ min-width: 0; }
.pl-read-t{ font: 600 var(--fs-base)/1.3 var(--font-body); letter-spacing: 0; margin-bottom: var(--s2); }
.pl-read-main{ display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.pl-read-main .fig{ font-size: var(--fs-2xl); }
.pl-read-m{ font: 500 var(--fs-sm)/1.2 var(--font-mono); color: var(--ink-dim); }
.pl-read-gap{ display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: var(--s2) 0 0; font-size: var(--fs-sm); color: var(--ink-dim); max-width: none; }
.pl-read-gap i{ font-style: normal; color: var(--ink-faint); }
.pl-read-gap .good, .pl-read-gap .warnc{ font-weight: 600; }

/* one legend per chart, at the top */
.pl-legend{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-sm); color: var(--ink-dim); }
.pl-legend li{ display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.pl-legend .k{ width: 20px; height: 12px; flex: none; border-radius: 3px; }
.k-line{ background: linear-gradient(var(--accent), var(--accent)) center / 100% 3px no-repeat; }
.k-plan{ background: repeating-linear-gradient(90deg, var(--ink-faint) 0 5px, transparent 5px 9px) center / 100% 2px no-repeat; }
.k-fc{ background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 7px) center / 100% 2px no-repeat; }
.k-buf{ background: repeating-linear-gradient(90deg, var(--warn) 0 5px, transparent 5px 9px) center / 100% 2px no-repeat; }
.k-lens{ background: var(--tint-2); box-shadow: inset 0 2px 0 var(--accent); }
.k-twin{ background: var(--line); box-shadow: inset 0 1px 0 var(--line-2); }
.k-bar{ background: var(--accent); }
.k-avg{ background: repeating-linear-gradient(90deg, var(--ink-faint) 0 3px, transparent 3px 6px) center / 100% 1px no-repeat; }
.k-ghost{ background: linear-gradient(var(--ink-dim), var(--ink-dim)) center / 100% 2px no-repeat; }

/* --- CHART ENGINE ------------------------------------------------------- */
.pl-plot{ position: relative; min-height: 180px; border-radius: var(--r-sm); touch-action: pan-y; cursor: crosshair; outline-offset: 4px; }
.pl-plot--hero{ flex: 1; min-height: 340px; }
.pl-plot--cash{ flex: 1; min-height: 248px; }
.pl-plot--d{ height: 188px; }
.pl-plot > svg{ position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.pl-sk{ position: absolute; inset: var(--s4) 0 var(--s6) var(--s7); }
.pl-plot text{ font-family: var(--font-mono); font-size: var(--fs-micro); fill: var(--ink-faint); }
.pl-plot .g{ stroke: var(--line); stroke-width: 1; }
.pl-plot .s-line{ fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pl-plot--hero .s-line{ stroke-width: 3; filter: drop-shadow(0 4px 10px var(--glow)); }
.pl-plot .s-area{ stroke: none; }
.pl-plot .s-plan{ fill: none; stroke: var(--ink-faint); stroke-width: 1.75; stroke-dasharray: 6 6; stroke-linecap: round; }
.pl-plot .s-fc{ fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-dasharray: 2 6; stroke-linecap: round; stroke-linejoin: round; }
.pl-plot .r-buf{ stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 6 5; }
.pl-plot .r-plan{ stroke: var(--ink-faint); stroke-width: 1.75; stroke-dasharray: 6 6; }
.pl-plot .rl{ fill: var(--warn); font-weight: 500; }
.pl-plot .fc-zone{ fill: var(--line); }
.pl-plot .today{ stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.pl-plot .zl{ fill: var(--ink-dim); }
.pl-plot .low{ fill: var(--accent); }
.pl-plot .low-ring{ fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .45; }
.pl-plot .lowl{ fill: var(--ink); font-weight: 500; }
.pl-plot .low, .pl-plot .low-ring{ transform-box: fill-box; transform-origin: center; transition: transform var(--dur-base) var(--ease-out); }

/* the period lens: a glass band on the months counted, a faint twin on the same months a year earlier */
.pl-lens, .pl-twin{
  position: absolute; left: 0; top: 0; width: 1px; pointer-events: none;
  transform-origin: 0 0; transform: translateX(var(--x, 0)) scaleX(var(--w, 0));
}
.pl-lens{ background: linear-gradient(180deg, var(--tint-2), var(--tint) 40%, transparent); box-shadow: inset 0 2px 0 var(--accent); }
.pl-twin{ background: linear-gradient(180deg, var(--line), transparent 85%); box-shadow: inset 0 1px 0 var(--line-2); }
.pl-tag{
  position: absolute; left: 0; top: var(--s2); display: grid; padding: var(--s1) var(--s2); pointer-events: none; white-space: nowrap;
  border-radius: var(--r-sm); transform: translateX(var(--x, 0));
  background: var(--mat-float); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
}
.pl-tag small{ font-size: var(--fs-micro); line-height: 1.3; color: var(--ink-dim); }
.pl-tag b{ font: 500 var(--fs-base)/1.3 var(--font-mono); color: var(--ink); }
.pl-tag--lens b{ color: var(--accent); }

/* the latest month, and the beacon that runs the counted months to reach it */
.pl-now{
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; pointer-events: none;
  transform: translate(calc(var(--x, 0px) - 6px), calc(var(--y, 0px) - 6px));
  background: var(--accent); box-shadow: 0 0 0 4px var(--tint-2), 0 0 20px var(--glow);
}
.pl-beacon{ fill: var(--accent); stroke: var(--hot); stroke-width: 2; filter: drop-shadow(0 0 6px var(--accent)); offset-rotate: 0deg; offset-distance: 100%; opacity: 0; }

/* scrubbing: a crosshair column with a pin on each line */
.pl-cross{ position: absolute; left: 0; top: 0; bottom: 0; width: 1px; pointer-events: none; background: var(--line-2); transform: translateX(var(--x, 0)); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.pl-pin{
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; opacity: 0;
  transform: translate(calc(var(--x, 0px) - 6px), calc(var(--y, 0px) - 6px)) scale(.4);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pl-pin--a{ background: var(--accent); box-shadow: 0 0 0 3px var(--surface-1), 0 0 14px var(--glow); }
.pl-pin--p{ background: var(--surface-1); box-shadow: inset 0 0 0 2px var(--ink-faint); }
.pl-plot.scrubbing .pl-cross{ opacity: 1; }
.pl-plot.scrubbing .pl-pin{ opacity: 1; transform: translate(calc(var(--x, 0px) - 6px), calc(var(--y, 0px) - 6px)) scale(1); }
.pl-plot.scrubbing .pl-pin[hidden]{ display: none; }
.pl-plot:focus-visible{ outline: 2px solid var(--accent); }

/* --- BENTO ---------------------------------------------------------------- */
.pl-grid{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4); }
.pl-divs, .pl-askstrip{ grid-column: 1 / -1; }
.pl-cash{ grid-column: span 7; }
.pl-hotel{ grid-column: span 5; }
.pl-grid:not(:has(.pl-hotel)) .pl-cash{ grid-column: 1 / -1; }
.pl-cash, .pl-hotel{ display: flex; flex-direction: column; min-width: 0; }
.pl-card-h{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-bottom: var(--s4); }
.pl-card-h h3{ font: 600 var(--fs-lg)/1.25 var(--font-body); letter-spacing: -.01em; }
.pl-card-h .meta{ font-size: var(--fs-sm); }
.pl-sub{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.pl-read-line{ margin: 0; min-height: 1.5em; font-size: var(--fs-sm); color: var(--ink-dim); max-width: none; }
.pl-read-line b{ color: var(--ink); font-weight: 600; }
.pl-read-line .num{ color: var(--ink); }
.pl-read-line .good, .pl-read-line .bad, .pl-read-line .warnc{ font-weight: 600; }
.pl-words{ margin: var(--s4) 0 0; font-size: var(--fs-base); line-height: 1.5; color: var(--ink-dim); max-width: none; }
.pl-words b{ color: var(--ink); font-weight: 600; }
.pl-src{ display: flex; align-items: center; gap: var(--s2); margin-top: auto; padding-top: var(--s4); font-size: var(--fs-sm); color: var(--ink-faint); }
.pl-trend .pl-src{ padding-top: 0; }
.pl-src b{ color: var(--ink-dim); font-weight: 600; }
.pl-src .dot{ flex: none; }

/* --- DIVISIONS -------------------------------------------------------------- */
.pl-ai{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3) var(--s4);
  margin-bottom: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--tint);
}
.pl-ai .chip--ai{ background: var(--surface-1); box-shadow: var(--shadow-1); }
.pl-ai p{ margin: 0; font-size: var(--fs-base); line-height: 1.5; max-width: none; }
.pl-ai p b{ font-weight: 600; }

.pl-rows{ display: grid; }
.pl-row{
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, 1.3fr) 20px;
  align-items: center; gap: var(--s4); padding: var(--s3) var(--s4);
}
.pl-row--head{ padding-top: 0; padding-bottom: var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-dim); box-shadow: inset 0 -1px 0 var(--line); }
.pl-axis{ display: flex; justify-content: space-between; font: 400 var(--fs-micro)/1.2 var(--font-mono); color: var(--ink-faint); }
.pl-axis em{ font-style: normal; }
.pl-div{
  position: relative; width: 100%; min-height: 76px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; color: inherit; font: inherit; text-align: left;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pl-div + .pl-div::before{ content: ''; position: absolute; left: var(--s4); right: var(--s4); top: 0; height: 1px; background: var(--line); }
.pl-div.is-flag{ background: var(--warn-tint); }
.pl-div.is-flag::after{ content: ''; position: absolute; left: 0; top: var(--s3); bottom: var(--s3); width: 3px; border-radius: 3px; background: var(--warn); }
.pl-dn{ display: grid; min-width: 0; line-height: 1.35; }
.pl-dn b{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); font-size: var(--fs-base); font-weight: 600; }
.pl-dn b .chip{ font-style: normal; }
.pl-dn small{ font-size: var(--fs-sm); color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-dv{ display: grid; justify-items: start; line-height: 1.35; min-width: 0; }
.pl-dv b{ font-size: var(--fs-lg); font-weight: 500; }
.pl-dv small, .pl-dp small, .pl-dm small{ font-size: var(--fs-sm); color: var(--ink-dim); }
.pl-dp{ display: grid; gap: var(--s2); min-width: 0; }
.pl-dp small{ font-weight: 600; }
.pl-dp.ok small{ color: var(--ok); } .pl-dp.warn small{ color: var(--warn); } .pl-dp.bad small{ color: var(--bad); }
.pl-dp small .num{ font-weight: 400; }
.pl-dbar{ position: relative; height: 10px; border-radius: var(--r-pill); background: var(--surface-3); }
.pl-dbar::before{ content: ''; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--ink-faint); transform: translateX(-50%); z-index: 1; }
.pl-dbar i{ position: absolute; top: 0; bottom: 0; width: 50%; transform: scaleX(var(--p, 0)); }
.pl-dbar i.pos{ left: 50%; transform-origin: left center; border-radius: 0 var(--r-pill) var(--r-pill) 0; background: var(--ok); }
.pl-dbar i.neg{ right: 50%; transform-origin: right center; border-radius: var(--r-pill) 0 0 var(--r-pill); background: var(--warn); }
.pl-dp.bad .pl-dbar i.neg{ background: var(--bad); }
.pl-dm{ display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s2); min-width: 0; }
.pl-dm b{ font-size: var(--fs-lg); font-weight: 500; }
.pl-dm .chip{ font-style: normal; align-self: center; }
.pl-chev{ display: grid; place-items: center; color: var(--ink-faint); transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.pl-chev .ic{ width: 18px; height: 18px; }

/* --- CASH AND HOTELS -------------------------------------------------------- */
.pl-eq{ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--s2); margin: var(--s4) 0; }
.pl-eq > div{ display: grid; align-content: start; gap: var(--s1); padding: var(--s3); border-radius: var(--r-sm); background: var(--surface-2); min-width: 0; transition: transform var(--dur-base) var(--ease-out); }
.pl-eq .fig{ font-size: var(--fs-xl); }
.pl-eq small{ font-size: var(--fs-sm); line-height: 1.3; color: var(--ink-dim); }
.pl-eq .pl-eq-r{ background: var(--tint); }
.pl-eq-r .fig{ color: var(--accent); }
.pl-op{ align-self: center; font: 300 var(--fs-xl)/1 var(--font-display); color: var(--ink-faint); }
.pl-occ{ margin-top: var(--s4); }
.pl-occ-h{ margin-bottom: var(--s2); }
.pl-occ .pl-read-line{ margin-bottom: var(--s3); }
.pl-bars{ position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s1); height: 128px; padding-bottom: var(--s5); }
.pl-avg{ position: absolute; left: 0; right: 0; bottom: calc(var(--s5) + var(--avg) * (100% - var(--s5))); border-top: 1px dashed var(--ink-faint); pointer-events: none; z-index: 1; }
.pl-bar{ position: relative; height: 100%; }
.pl-bar i{
  position: absolute; inset: 0; border-radius: 4px 4px 2px 2px; transform-origin: 50% 100%; transform: scaleY(var(--h, 0));
  background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 45%, transparent));
}
.pl-bar b{ position: absolute; left: -2px; right: -2px; bottom: calc(var(--g) * 100%); height: 2px; border-radius: 1px; background: var(--ink-dim); z-index: 2; pointer-events: none; }
.pl-bar small{ position: absolute; left: 0; right: 0; top: 100%; padding-top: var(--s1); text-align: center; font: 400 var(--fs-micro)/1.3 var(--font-mono); color: var(--ink-faint); }
.pl-bar.out i{ opacity: .28; }
.pl-bar.out b{ opacity: .4; }
.pl-note{ display: flex; align-items: flex-start; gap: var(--s2); margin: var(--s4) 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-dim); max-width: none; }
.pl-note .ic{ width: 16px; height: 16px; flex: none; color: var(--ok); }

/* --- ASK STRIP ---------------------------------------------------------------- */
.pl-askstrip{
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4); padding: var(--s4) var(--s5); border-radius: var(--r);
  background: var(--mat-float); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
}
.pl-ai-mark{ width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--accent); box-shadow: 0 0 24px var(--glow); }
.pl-ai-mark .ic{ width: 20px; height: 20px; }
.pl-askstrip p{ display: grid; margin: 0; line-height: 1.4; }
.pl-askstrip p b{ font-size: var(--fs-base); }
.pl-askstrip p small{ font-size: var(--fs-sm); color: var(--ink-dim); }
.pl-chips{ display: flex; flex-wrap: wrap; gap: var(--s2); margin-left: auto; }
.pl-chips .chip{ min-height: 32px; padding: 0 var(--s3); font-size: var(--fs-sm); }

/* arriving from an alert: the panel it points at is picked out for a moment */
.pl-spot{ box-shadow: var(--shadow-2), 0 0 0 2px var(--accent), 0 0 32px var(--glow); }

/* --- DRAWER ------------------------------------------------------------------ */
.pl-drawer .pl-dmeta{ margin: 0 0 var(--s4); }
.pl-dsec{ margin-top: var(--s5); }
.pl-dsec-h{ display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.pl-dsec-h .sec{ margin: 0; }
.pl-dsec .pl-read-line{ margin: var(--s2) 0; }

/* --- HOVER AND PRESS ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine){
  .pl-div:hover{ transform: translateY(-2px); background: var(--surface-2); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-2); }
  .pl-div.is-flag:hover{ background: var(--warn-tint); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--warn); }
  .pl-div:hover .pl-chev{ color: var(--accent); transform: translateX(3px); }
  .pl-eq > div:hover{ transform: translateY(-2px); }
  .pl-bars.done .pl-bar:hover i{ transform: scale(1.14, var(--h)); filter: drop-shadow(0 0 8px var(--glow)); }
  .pl-plot .low:hover, .pl-plot .low-ring:hover{ transform: scale(1.25); }
  .pl-fig:hover .pl-spark.done .pl-spark-now{ scale: 1.5; }
  .pl-fig:hover .pl-dir:not(.flat):not(.down) .ic{ transform: translateY(-2px); }
  .pl-fig:hover .pl-dir.down .ic{ transform: rotate(180deg) translateY(-2px); }
  .pl-fig:hover .pl-dir.flat .ic{ transform: translateX(2px); }
  .pl-chips .chip:hover{ transform: translateY(-2px); }
}
.pl-div:active{ transform: scale(.99); }
.pl-chips .chip:active{ transform: scale(.97); }
.pl-div:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- MOTION (additive) --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .pl-seg-thumb{ transition: clip-path var(--dur-base) var(--ease-in-out); }

  /* the instrument draws itself in: the lines wipe left to right, the lens
     settles, the tags land, then the latest month lights and the beacon starts */
  .pl-plot .pl-series{ clip-path: inset(-24px 100% -24px -24px); transition: clip-path var(--dur-reveal) var(--ease-out) var(--dur-base); }
  .pl-plot.in .pl-series{ clip-path: inset(-24px -24px -24px -24px); }
  .pl-plot--hero .pl-series{ transition-duration: calc(var(--dur-reveal) * 1.4); }
  .pl-lens, .pl-twin, .pl-tag{ opacity: 0; transition: transform var(--dur-slow) var(--ease-in-out), opacity var(--dur-reveal) var(--ease-out) var(--dur-drawer); }
  .pl-tag{ transition-delay: 0s, var(--dur-reveal); }
  .pl-plot.in .pl-lens, .pl-plot.in .pl-twin, .pl-plot.in .pl-tag{ opacity: 1; }
  .pl-now{ opacity: 0; scale: .3; transition: opacity var(--dur-base) var(--ease-out) calc(var(--dur-reveal) * 1.6), scale var(--dur-slow) var(--spring) calc(var(--dur-reveal) * 1.6), transform var(--dur-base) var(--ease-out); }
  .pl-plot.in .pl-now{ opacity: 1; scale: 1; }
  .pl-plot.in .pl-beacon{ animation: pl-beacon calc(var(--ambient-a) / 4) var(--ease-in-out) calc(var(--dur-reveal) * 2.2) infinite; }
  @keyframes pl-beacon{
    0%{ offset-distance: 0%; opacity: 0; }
    12%, 84%{ opacity: 1; }
    100%{ offset-distance: 100%; opacity: 0; }
  }

  .pl-spark svg{ clip-path: inset(-8px 100% -8px -8px); transition: clip-path var(--dur-reveal) var(--ease-out) var(--dur-slow); }
  .pl-spark.in svg{ clip-path: inset(-8px -8px -8px -8px); }
  .pl-spark .pl-spark-now{ opacity: 0; scale: .3; transition: opacity var(--dur-base) var(--ease-out) var(--dur-reveal), scale var(--dur-slow) var(--ease-out) var(--dur-reveal); }
  .pl-spark.in .pl-spark-now{ opacity: 1; scale: 1; }

  .pl-rows .pl-dbar i{ transform: scaleX(0); transition: transform var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger) + var(--dur-base)); }
  .pl-rows.in .pl-dbar i{ transform: scaleX(var(--p, 0)); }
  .pl-rows.done .pl-dbar i{ transition: transform var(--dur-slow) var(--ease-in-out); }

  .pl-bars .pl-bar i{ transform: scaleY(0); transition: transform var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger) / 2), opacity var(--dur-base) var(--ease-out); }
  .pl-bars.in .pl-bar i{ transform: scaleY(var(--h, 0)); }
  .pl-bars.done .pl-bar i{ transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }
  .pl-bar b{ transition: opacity var(--dur-base) var(--ease-out); }

  .pl-spark.done .pl-spark-now{ transition: scale var(--dur-base) var(--ease-out); }

  /* a revisit has already seen the entrance: everything is simply there */
  .settled .pl-plot .pl-series, .settled .pl-spark svg{ transition: none; clip-path: none; }
  .settled .pl-lens, .settled .pl-twin, .settled .pl-tag, .settled .pl-now, .settled .pl-spark .pl-spark-now{ opacity: 1; scale: 1; transition: transform var(--dur-slow) var(--ease-in-out); }
}
.motion-paused .pl-beacon{ animation-play-state: paused; }
.pl-spot{ transition: box-shadow var(--dur-slow) var(--ease-out); }

/* reduced motion: the static composition, with no travelling beacon */
@media (prefers-reduced-motion: reduce){
  .pl-beacon{ display: none; }
  .pl-lens, .pl-twin, .pl-tag, .pl-seg-thumb{ transition: none; }
}

/* --- LAYOUT BREAKPOINTS ------------------------------------------------------------ */
@media (max-width: 1280px){
  .pl-cash, .pl-hotel{ grid-column: 1 / -1; }
}
@media (max-width: 1100px){
  .pl-hero{ grid-template-columns: minmax(0, 1fr); }
  .pl-plot--hero{ min-height: 300px; }
}
@media (max-width: 760px){
  .pl-actions{ width: 100%; }
  .pl-seg{ display: flex; flex: 1 1 100%; }
  .pl-seg button{ flex: 1; min-height: var(--h-touch); padding: 0 var(--s2); }
  .pl-ai .btn{ min-height: var(--h-touch); padding: 0 var(--s4); }
  #plAsk{ flex: 1 1 100%; min-height: var(--h-touch); }

  .pl-figs{ gap: var(--s2); }
  .pl-fig{ padding: var(--s3); }
  .pl-fig-h{ flex-direction: column; gap: var(--s1); }
  .pl-fig:not(.pl-fig--lead) .pl-dir{ font-size: var(--fs-sm); }
  .pl-fig--lead .pl-fig-h{ flex-direction: row; }
  .pl-trend{ padding: var(--s4); }
  .pl-plot--hero{ min-height: 280px; }
  .pl-legend{ gap: var(--s1) var(--s3); }

  .pl-row--head{ display: none; }
  .pl-ai{ grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .pl-div{ grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "n v c" "p p p" "m m m"; gap: var(--s2) var(--s3); padding: var(--s3); }
  .pl-dn{ grid-area: n; } .pl-dv{ grid-area: v; justify-items: end; text-align: right; } .pl-dp{ grid-area: p; } .pl-dm{ grid-area: m; } .pl-chev{ grid-area: c; }
  .pl-dn small{ white-space: normal; }

  .pl-eq{ gap: var(--s1); }
  .pl-eq > div{ padding: var(--s2); }
  .pl-eq .fig{ font-size: var(--fs-lg); }
  .pl-eq small{ font-size: var(--fs-micro); }
  .pl-op{ font-size: var(--fs-lg); }
  .pl-askstrip{ padding: var(--s4); }
  .pl-chips{ margin-left: 0; }
  .pl-chips .chip{ min-height: var(--h-touch); white-space: normal; text-align: left; }
}