/* Profile Lab — Pete Stone's dark visual language (theme.py values).
 * Colours here MUST match app/profile_lab/frontend/theme.py. */
.profile-lab-page{--pl-bg:#0a0e14;--pl-panel:#131923;--pl-raised:#1a2230;
  --pl-border:#1f2937;--pl-border-bright:#28344a;--pl-text:#d3d8df;
  --pl-bright:#e6ecf3;--pl-muted:#7d8696;--pl-accent:#38f9a3;
  background:var(--pl-bg);color:var(--pl-text);
  font:11px "Segoe UI",Inter,system-ui,sans-serif}
.pl-wrap{padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:0}
.pl-header{display:flex;align-items:center;gap:12px}
.pl-title{color:var(--pl-bright);font-size:13px;font-weight:600;letter-spacing:.02em}
.pl-status{display:flex;gap:6px;align-items:center}
.pl-chip{padding:2px 8px;border-radius:3px;font-size:9px;font-weight:700;
  letter-spacing:.06em;border:1px solid var(--pl-border);color:var(--pl-muted);
  background:var(--pl-raised)}
.pl-chip--live{color:var(--pl-accent);border-color:var(--pl-accent)}
.pl-chip--historical{color:#4cc9f0;border-color:#28344a}
.pl-chip--stale,.pl-chip--partial{color:#ffd166;border-color:#3a3320}
.pl-chip--rejected,.pl-chip--unavailable{color:#f4845f;border-color:#3a281f}
.pl-chip--accepted{color:var(--pl-accent);border-color:#1e3a2e}

/* KPI strip — Pete's _metric_tile styling */
.pl-kpis{display:flex;flex-wrap:wrap;gap:6px}
.pl-kpi{background:var(--pl-raised);padding:6px 10px;border-radius:4px;
  border:1px solid var(--pl-border);min-width:104px}
.pl-kpi-label{color:var(--pl-muted);font-size:9px;text-transform:uppercase;
  letter-spacing:.05em}
.pl-kpi-value{font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums}

/* controls */
.pl-controls,.pl-playback{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  background:var(--pl-panel);border:1px solid var(--pl-border);
  border-radius:6px;padding:8px 10px}
.pl-field{display:flex;flex-direction:column;gap:4px}
.pl-label{color:var(--pl-muted);font-size:10px;text-transform:uppercase;
  letter-spacing:.06em}
.pl-checks{display:flex;gap:10px}
.pl-check{display:flex;align-items:center;gap:4px;color:var(--pl-text);font-size:11px}
/* The Live switch is a control in its own right, not a layer toggle: it sits
   on the controls baseline instead of inheriting .pl-field's column stack,
   which was rendering the box above the word. */
.pl-live-toggle{flex:0 0 auto;align-self:flex-end;gap:5px;padding-bottom:6px;
  white-space:nowrap;color:var(--pl-accent)}
.pl-btn{background:var(--pl-raised);color:var(--pl-text);
  border:1px solid var(--pl-border-bright);border-radius:4px;padding:6px 12px;
  cursor:pointer;font-size:12px}
.pl-btn:hover{background:#222c3d}
.pl-btn--icon{padding:5px 10px;min-width:34px}
.pl-btn:focus-visible{outline:2px solid var(--pl-accent);outline-offset:1px}

/* Playback ACTIVE. The glyph alone changes to a pause bar, which is easy to
   miss on a 34px control, so the running state also carries the accent. */
.pl-btn--playing{background:#123528;border-color:var(--pl-accent);
  color:var(--pl-accent)}
.pl-btn--playing:hover{background:#164534}

/* Return to Live. Inert once following, mirroring Pete's button. */
.pl-btn--live{border-color:var(--pl-accent);color:var(--pl-accent);
  white-space:nowrap}
.pl-btn--live:hover{background:#123528}
.pl-btn--live:disabled{opacity:.72;cursor:default;background:#123528}
.pl-btn--live:disabled:hover{background:#123528}
.pl-range,.pl-slider{accent-color:var(--pl-accent);background:transparent}
.pl-slider{flex:1 1 220px;min-width:160px}
.pl-time{color:var(--pl-muted);font-size:11px;min-width:120px}
.pl-mono{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------
 * SELECT — the deployed defect was pale text on the WHITE native option
 * menu. Windows Chrome paints <option> from the SELECT's own background/
 * color, so BOTH must be set, and color-scheme:dark keeps the native
 * popup, scrollbar and focus ring dark instead of the OS light default.
 * ------------------------------------------------------------------- */
.pl-select{color-scheme:dark;background-color:var(--pl-raised);
  color:var(--pl-bright);border:1px solid var(--pl-border-bright);
  border-radius:4px;padding:5px 8px;font-size:12px;min-width:150px;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--pl-muted) 50%),
    linear-gradient(135deg,var(--pl-muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 51%,calc(100% - 10px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px}
.pl-select:hover{border-color:var(--pl-accent)}
.pl-select:focus,.pl-select:focus-visible{outline:2px solid var(--pl-accent);
  outline-offset:1px;border-color:var(--pl-accent)}
.pl-select:disabled{opacity:.5;cursor:not-allowed}
/* The open native menu inherits these on Chromium/Windows. */
.pl-select option{background-color:#131923;color:#e6ecf3}
.pl-select option:checked,.pl-select option:hover{
  background-color:#1e3a2e;color:#ffffff}
.pl-select option:disabled{color:#7d8696}
.pl-select::-webkit-scrollbar{width:10px}
.pl-select::-webkit-scrollbar-track{background:#0a0e14}
.pl-select::-webkit-scrollbar-thumb{background:#28344a;border-radius:5px}

.pl-body{flex:1 1 auto;min-height:0}
.pl-plot{width:100%;height:620px;min-height:420px}
.pl-empty{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;height:260px;color:var(--pl-muted);
  font-size:12px;text-align:center;padding:16px}
.pl-error{color:#f4845f}

/* embedded in an Exposure Lab card ------------------------------------------
   An .rmod-card is a fixed-height grid cell with overflow:hidden. The module
   previously laid itself out at its standalone height -- 731px of content in a
   356px card -- so the figure began 27px BELOW the card's bottom edge and had
   ZERO visible pixels until the user scrolled. The chart is the module, so the
   rules below exist to make it fit and stay visible at the default card size:
   the strip and controls become compact fixed-height rows that scroll
   sideways, and the plot takes whatever height is left. */
.profile-lab-embed{height:100%;min-height:0;display:flex;flex-direction:column}
.profile-lab-embed .pl-wrap{padding:6px 8px;gap:6px;height:100%;
  flex:1 1 auto;min-height:0;overflow:hidden}
.profile-lab-embed .pl-header{flex:0 0 auto}

/* One sideways-scrolling row instead of a two-row wrap: 20 tiles must not
   consume half the card.

   The scroll must ADVERTISE itself. Chrome draws overlay scrollbars that fade
   out when idle, so a user could see 11 tiles and reasonably conclude there
   were only 11. The strip therefore reserves a permanent gutter, paints a
   track the thumb rides in (styling ::-webkit-scrollbar opts out of overlay
   mode, so it never fades), and adds a right-edge fade that is only present
   while there is more to reach. */
.profile-lab-embed .pl-kpis{flex:0 0 auto;flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;                      /* our rail is the affordance */
  position:relative;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
/* No fade once the strip is scrolled to the end - nothing left to hint at. */
.profile-lab-embed .pl-kpis.pl-scroll-end{
  -webkit-mask-image:none;mask-image:none}
.profile-lab-embed .pl-kpi{min-width:78px;padding:4px 7px}
.profile-lab-embed .pl-kpi-label{font-size:8px}
.profile-lab-embed .pl-kpi-value{font-size:12px}

.profile-lab-embed .pl-controls,
.profile-lab-embed .pl-playback{flex:0 0 auto;flex-wrap:nowrap;gap:8px;
  padding:6px 8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.profile-lab-embed .pl-field{flex:0 0 auto}
.profile-lab-embed .pl-time{min-width:104px}

/* The figure absorbs the remaining height; min-height:0 lets it shrink. */
.profile-lab-embed .pl-body{flex:1 1 auto;min-height:0}
.profile-lab-embed .pl-plot{height:100%;min-height:0}

.rmod-profile-lab-wrap{padding:0}

/* The rail we draw ourselves.
   The platform scrollbar is not a dependable affordance here: Chrome's
   overlay scrollbars reserve no layout space and fade when idle, so the strip
   read as "11 tiles, that's all" rather than "scroll for 9 more". This rail is
   an ordinary element - always painted while the row overflows, positioned by
   JS from scrollLeft. Hidden entirely when everything already fits (the
   standalone page). */
.profile-lab-embed .pl-kpis::-webkit-scrollbar{width:0;height:0}
.pl-kpiwrap{display:flex;flex-direction:column;gap:0;min-width:0}
.pl-rail{display:none}
.profile-lab-embed .pl-rail{display:block;position:relative;height:7px;
  margin:4px 1px 0;border-radius:4px;background:#0d131c;
  border:1px solid #222e42;overflow:hidden}
.profile-lab-embed .pl-rail-thumb{position:absolute;top:0;bottom:0;left:0;
  min-width:24px;border-radius:4px;background:#6c88ad;
  transition:left .08s linear}
.profile-lab-embed .pl-kpis:hover ~ .pl-rail .pl-rail-thumb{background:#89a5c9}

@media (max-width:1400px){
  .pl-kpi{min-width:92px}
  .pl-kpi-value{font-size:13px}
  .pl-plot{height:520px}
}