/* ============================================================================
   perf-monitor.css — "Website Performance" live diagnostics modal (dev view).
   Glass + cosmic palette via css/base.css tokens. Heavy but cheap motion
   (transform/opacity + SVG), fully reduced-motion safe. See DEV/perf-monitor.js.
   ============================================================================ */

.pm-backdrop {
  position: fixed; inset: 0; z-index: 2147483600;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
  background: rgba(4, 5, 15, 0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.28s var(--ease-out, ease);
}
.pm-backdrop.is-open { opacity: 1; }

.pm-modal {
  position: relative; width: min(1080px, 100%);
  background: linear-gradient(160deg, rgba(15, 21, 53, 0.96), rgba(8, 13, 30, 0.97));
  border: 1px solid var(--glass-border-2, rgba(255,255,255,0.15));
  border-radius: var(--r-2xl, 28px);
  box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  transform: translateY(18px) scale(0.985);
  transition: transform 0.34s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));
  overflow: hidden;
}
.pm-backdrop.is-open .pm-modal { transform: none; }
.pm-glow {
  position: absolute; top: -120px; left: 50%; width: 420px; height: 280px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--glow-cyan, rgba(56,189,248,0.25)) 0%, transparent 70%);
  pointer-events: none; filter: blur(20px); opacity: 0.7;
}

/* ── header ── */
.pm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px 14px; position: relative; }
.pm-head-l { min-width: 0; }
.pm-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: var(--accent-rose); }
.pm-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-rose); box-shadow: 0 0 0 0 rgba(251,113,133,0.6); animation: pm-pulse 1.6s ease-out infinite; }
@keyframes pm-pulse { 0% { box-shadow: 0 0 0 0 rgba(251,113,133,0.55); } 70% { box-shadow: 0 0 0 8px rgba(251,113,133,0); } 100% { box-shadow: 0 0 0 0 rgba(251,113,133,0); } }
.pm-title { font-family: var(--font-display, 'Space Grotesk'), sans-serif; font-size: 22px; font-weight: 600; color: var(--text-primary); margin: 4px 0 2px; }
.pm-sub { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.pm-head-r { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pm-tier-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; padding: 5px 10px; border-radius: 999px; border: 1px solid; }
.pm-tier-badge.is-full { color: var(--accent-emerald); border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.08); }
.pm-tier-badge.is-lite { color: var(--accent-amber); border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.08); }
.pm-close { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; cursor: pointer;
  color: var(--text-muted); background: var(--glass-2, rgba(255,255,255,0.07)); border: 1px solid var(--glass-border, rgba(255,255,255,0.09));
  transition: color 0.15s, background 0.15s, transform 0.15s; }
.pm-close:hover { color: #fff; background: rgba(251,113,133,0.16); border-color: rgba(251,113,133,0.4); }
.pm-close:active { transform: scale(0.92); }

/* ── body ── */
.pm-body { padding: 6px 24px 8px; }
.pm-card { background: var(--glass-1, rgba(255,255,255,0.04)); border: 1px solid var(--glass-border, rgba(255,255,255,0.09)); border-radius: var(--r-lg, 18px); padding: 16px; }
.pm-card-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 12px; }
.pm-card-h svg { color: var(--accent-cyan); flex-shrink: 0; }
.pm-card-tag { margin-left: auto; font-weight: 600; font-size: 10.5px; letter-spacing: 0.02em; color: var(--text-muted); text-transform: none; }
.pm-muted { color: var(--text-dim); font-size: 12px; }

/* hero */
.pm-hero { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 14px; margin-bottom: 14px; }
.pm-card-gauge, .pm-card-mem { display: flex; flex-direction: column; }

/* gauge */
.pm-gauge { width: 100%; height: 116px; }
.pm-gauge-track { stroke: rgba(255,255,255,0.08); stroke-width: 9; }
.pm-gauge-arc { stroke: var(--accent-emerald); stroke-width: 9; transition: stroke-dashoffset 0.45s var(--ease-out, ease), stroke 0.3s; filter: drop-shadow(0 0 5px currentColor); }
.pm-gauge-needle { stroke: var(--accent-emerald); stroke-width: 2.5; transition: all 0.4s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)); }
.pm-gauge-hub { fill: var(--text-primary); }
.pm-gauge-val { font-family: var(--font-display,'Space Grotesk'); font-size: 22px; font-weight: 700; fill: var(--accent-emerald); }
.pm-gauge-unit { font-size: 8px; font-weight: 600; letter-spacing: 0.2em; fill: var(--text-muted); }
.pm-gauge-foot { text-align: center; margin: -6px 0 8px; }
.pm-gauge-verdict { font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* sparkline */
.pm-spark { width: 100%; height: 46px; margin-top: auto; display: block; }
.pm-spark-line { stroke-width: 2; filter: drop-shadow(0 0 4px currentColor); transition: stroke 0.3s; }
.pm-spark-area { opacity: 0.14; transition: fill 0.3s; }

/* load */
.pm-load-big { font-family: var(--font-display,'Space Grotesk'); font-size: 34px; font-weight: 700; line-height: 1; }
.pm-load-verdict { font-size: 12px; font-weight: 600; margin: 4px 0 14px; }
.pm-timeline { display: flex; flex-direction: column; gap: 6px; }
.pm-tl-seg { position: relative; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; font-size: 10.5px; overflow: hidden;
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border, rgba(255,255,255,0.08)); }
.pm-tl-seg::before { content: ''; position: absolute; inset: 0; width: var(--w, 0%); border-radius: 7px 0 0 7px; opacity: 0.30;
  transform-origin: left; animation: pm-grow 0.7s var(--ease-out, ease) both; }
.pm-tl-seg.is-ttfb::before { background: var(--accent-rose); }
.pm-tl-seg.is-fcp::before  { background: var(--accent-amber); }
.pm-tl-seg.is-dcl::before  { background: var(--accent-cyan); }
.pm-tl-seg.is-load::before { background: var(--accent-emerald); }
.pm-tl-seg span { position: relative; color: var(--text-secondary); font-weight: 500; }
.pm-tl-seg b { position: relative; color: var(--text-primary); font-weight: 600; }
@keyframes pm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* memory */
.pm-mem-big { font-family: var(--font-display,'Space Grotesk'); font-size: 30px; font-weight: 700; line-height: 1; color: var(--accent-cyan); }
.pm-mem-sub { font-size: 11px; color: var(--text-muted); margin: 4px 0 0; min-height: 14px; }

/* tiles */
.pm-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
.pm-tiles-4 { grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
.pm-tile { background: var(--glass-1, rgba(255,255,255,0.04)); border: 1px solid var(--glass-border, rgba(255,255,255,0.08)); border-radius: var(--r-md, 12px); padding: 11px 12px; transition: transform 0.15s, border-color 0.15s; }
.pm-tile:hover { transform: translateY(-2px); border-color: var(--glass-border-2, rgba(255,255,255,0.16)); }
.pm-tile-label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pm-tile-val { font-family: var(--font-display,'Space Grotesk'); font-size: 18px; font-weight: 700; color: var(--text-primary); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pm-tile-sub { font-size: 10px; color: var(--text-dim); margin-top: 1px; }

/* two-col */
.pm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

/* donut */
.pm-res { display: flex; align-items: center; gap: 16px; }
.pm-donut { width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  -webkit-mask: radial-gradient(transparent 52%, #000 53%); mask: radial-gradient(transparent 52%, #000 53%);
  animation: pm-spin-in 0.7s var(--ease-out, ease) both; }
@keyframes pm-spin-in { from { transform: rotate(-90deg) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
.pm-donut-hole { text-align: center; }
.pm-donut-hole b { display: block; font-family: var(--font-display,'Space Grotesk'); font-size: 20px; font-weight: 700; color: var(--text-primary); }
.pm-donut-hole span { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.pm-legend { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-secondary); }
.pm-leg { display: flex; align-items: center; gap: 7px; }
.pm-leg i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.pm-leg b { color: var(--text-primary); font-weight: 600; }

/* poll */
.pm-poll-row { display: flex; gap: 10px; margin-bottom: 8px; }
.pm-poll-stat { flex: 1; background: rgba(255,255,255,0.03); border-radius: var(--r-sm, 8px); padding: 8px 10px; }
.pm-poll-stat span { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pm-poll-stat b { display: block; font-family: var(--font-display,'Space Grotesk'); font-size: 17px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pm-poll-note { font-size: 10.5px; color: var(--text-dim); margin: 8px 0 0; }
.pm-poll-note code { color: var(--accent-amber); font-family: ui-monospace, monospace; }

/* waterfall */
.pm-waterfall { display: flex; flex-direction: column; gap: 7px; }
.pm-wf-row { display: grid; grid-template-columns: 200px 1fr 64px; align-items: center; gap: 10px; }
.pm-wf-name { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, monospace; }
.pm-wf-bar-wrap { height: 9px; background: rgba(255,255,255,0.05); border-radius: 5px; overflow: hidden; }
.pm-wf-bar { display: block; height: 100%; border-radius: 5px; width: 0; animation: pm-bar 0.8s var(--ease-out, ease) forwards; }
.pm-wf-bar { width: var(--w); }
@keyframes pm-bar { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }
.pm-wf-ms { font-size: 11px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* footer */
.pm-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 24px 22px; border-top: 1px solid var(--glass-border, rgba(255,255,255,0.07)); margin-top: 4px; }
.pm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); background: var(--glass-2, rgba(255,255,255,0.07)); border: 1px solid var(--glass-border, rgba(255,255,255,0.1)); border-radius: 11px;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.12s; }
.pm-btn svg { color: var(--accent-cyan); }
.pm-btn:hover { color: #fff; border-color: var(--glass-border-2, rgba(255,255,255,0.18)); background: var(--glass-3, rgba(255,255,255,0.1)); transform: translateY(-1px); }
.pm-btn:active { transform: scale(0.96); }
.pm-btn b { color: var(--accent-cyan); font-variant-numeric: tabular-nums; }
.pm-btn-primary { color: #04111f; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-teal)); border-color: transparent; margin-left: auto; }
.pm-btn-primary svg { color: #04111f; }
.pm-btn-primary:hover { color: #04111f; filter: brightness(1.08); }
.pm-btn.is-ok { color: var(--accent-emerald); border-color: rgba(52,211,153,0.5); }
.pm-btn.is-err { color: var(--accent-rose); border-color: rgba(251,113,133,0.5); }

/* ── responsive ── */
@media (max-width: 1024px) {
  .pm-hero { grid-template-columns: 1fr 1fr; }
  .pm-card-mem { grid-column: 1 / -1; }
  .pm-tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .pm-backdrop { padding: 16px 10px; }
  .pm-hero, .pm-grid2 { grid-template-columns: 1fr; }
  .pm-tiles, .pm-tiles-4 { grid-template-columns: repeat(2, 1fr); }
  .pm-wf-row { grid-template-columns: 120px 1fr 52px; }
  .pm-foot { flex-direction: column; }
  .pm-btn-primary { margin-left: 0; }
}

/* ── reduced motion: kill all the entrance/loop motion, keep final frames ── */
@media (prefers-reduced-motion: reduce) {
  .pm-backdrop, .pm-modal { transition: none; }
  .pm-live-dot { animation: none; }
  .pm-gauge-arc, .pm-gauge-needle, .pm-spark-line, .pm-spark-area { transition: none; }
  .pm-tl-seg::before, .pm-donut, .pm-wf-bar { animation: none; }
  .pm-tl-seg::before { transform: scaleX(1); }
  .pm-wf-bar { transform: none; }
}

/* ── Light theme ──────────────────────────────────────────────────────────
   The whole modal is dark-first: a near-black surface gradient, white-tinted
   glass fills (rgba(255,255,255,.03–.08)) and #fff hover text. On the light
   page those surfaces stay dark and the hover text goes invisible. Re-skin the
   modal body onto frosted-white glass, lift the translucent-white fills to the
   light glass tokens, and swap #fff hovers to the dark primary text. */
html[data-theme="light"] .pm-modal {
  background: linear-gradient(160deg, var(--glass-4), var(--glass-3));
  box-shadow: 0 30px 90px rgba(80,90,160,0.18), 0 0 0 1px rgba(130,100,200,0.10) inset;
}
html[data-theme="light"] .pm-close:hover { color: var(--text-primary); }
html[data-theme="light"] .pm-gauge-track { stroke: rgba(130,100,200,0.20); }
html[data-theme="light"] .pm-gauge-hub   { fill: var(--text-primary); }
html[data-theme="light"] .pm-tl-seg      { background: var(--glass-1); }
html[data-theme="light"] .pm-poll-stat   { background: var(--glass-1); }
html[data-theme="light"] .pm-wf-bar-wrap { background: var(--glass-1); }
html[data-theme="light"] .pm-btn:hover   { color: var(--text-primary); }
/* .pm-btn-primary keeps its dark ink on the cyan gradient — correct in both modes */