/* ==========================================================================
   frame.css — the ONE product frame: chrome + shared primitives

   Everything is sized off `--u`, a single length set on `.fr` from the
   section's `--z` (zoom depth). `--u` is inherited unchanged by every
   descendant, so unlike `em` it never compounds through nesting — one number
   magnifies the entire interface. That is the zoom.

   Colour comes only from the --fr-* tokens, never page tokens, so one
   vocabulary sits on paper, on the dark section, and in dark theme untouched.
   ========================================================================== */

.fr {
  --u: calc(var(--t-fr) * var(--z, 1));
  font-size: var(--u);
  font-family: var(--font-sans);
  color: var(--fr-text-2);
  background: var(--fr-bg);
  border: 1px solid var(--fr-line);
  border-radius: var(--r-frame);
  box-shadow: var(--shadow-frame);
  overflow: hidden;
}

/* --- window bar ---------------------------------------------------------- */
.fr__bar {
  display: flex; align-items: center; gap: calc(0.9 * var(--u));
  height: calc(2.6 * var(--u));
  padding: 0 calc(1.1 * var(--u));
  background: var(--fr-bg-2);
  border-bottom: 1px solid var(--fr-line);
}
.fr__dots { display: flex; gap: calc(0.42 * var(--u)); }
.fr__dots i {
  width: calc(0.62 * var(--u)); height: calc(0.62 * var(--u));
  border-radius: 50%; background: var(--fr-line-2);
}
.fr__crumb {
  font-family: var(--font-mono); font-size: calc(0.82 * var(--u));
  letter-spacing: 0.04em; color: var(--fr-text-4); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* --- body: sidebar + main ------------------------------------------------ */
.fr__body { display: grid; grid-template-columns: calc(17 * var(--u)) 1fr; }
.fr__body--nosid { grid-template-columns: 1fr; }

.fr__side {
  background: var(--fr-side);
  border-right: 1px solid var(--fr-line);
  padding: calc(1 * var(--u)) calc(0.75 * var(--u));
  display: flex; flex-direction: column; gap: calc(0.15 * var(--u));
}
.fr__logo {
  display: flex; align-items: center; gap: calc(0.6 * var(--u));
  padding: calc(0.3 * var(--u)) calc(0.5 * var(--u)) calc(1 * var(--u));
}
.fr__logo i {
  display: grid; place-items: center;
  width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u));
  border-radius: calc(0.35 * var(--u));
  background: var(--fr-text); color: var(--fr-bg);
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(0.72 * var(--u)); letter-spacing: -0.02em;
}
.fr__logo span {
  font-family: var(--font-display); font-weight: 500;
  font-size: calc(0.95 * var(--u)); letter-spacing: -0.02em; color: var(--fr-text);
}
.fr__sgrp {
  font-family: var(--font-mono); font-size: calc(0.66 * var(--u));
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fr-text-4);
  padding: calc(0.9 * var(--u)) calc(0.5 * var(--u)) calc(0.35 * var(--u));
}
.fr__nav {
  display: flex; align-items: center; gap: calc(0.55 * var(--u));
  height: calc(2.1 * var(--u));
  padding: 0 calc(0.5 * var(--u));
  border-radius: calc(0.4 * var(--u));
  font-size: calc(0.9 * var(--u)); color: var(--fr-text-2);
}
.fr__nav i { width: calc(0.75 * var(--u)); height: calc(0.75 * var(--u));
  border-radius: calc(0.15 * var(--u)); background: var(--fr-line-2); flex: none; }
.fr__nav.is-on { background: var(--fr-fill); color: var(--fr-text); font-weight: 500; }
.fr__nav.is-on i { background: var(--fr-accent); }

/* --- main pane ---------------------------------------------------------- */
.fr__main { min-width: 0; display: flex; flex-direction: column; }
.fr__top {
  display: flex; align-items: center; gap: calc(0.6 * var(--u));
  height: calc(2.9 * var(--u));
  padding: 0 calc(1.1 * var(--u));
  border-bottom: 1px solid var(--fr-line);
}
.fr__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: calc(1.1 * var(--u)); letter-spacing: -0.02em; color: var(--fr-text);
}
.fr__spacer { margin-left: auto; }

/* --- primitives --------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: calc(0.35 * var(--u));
  height: calc(1.5 * var(--u)); padding: 0 calc(0.55 * var(--u));
  border-radius: calc(0.3 * var(--u));
  font-size: calc(0.78 * var(--u)); font-weight: 500;
  background: var(--fr-fill); color: var(--fr-text-2); white-space: nowrap;
}
.chip i { width: calc(0.4 * var(--u)); height: calc(0.4 * var(--u));
  border-radius: 50%; background: currentColor; }
.chip--on { background: var(--fr-soft); color: var(--fr-accent); }

.mbtn {
  display: inline-flex; align-items: center; gap: calc(0.35 * var(--u));
  height: calc(1.8 * var(--u)); padding: 0 calc(0.65 * var(--u));
  border: 1px solid var(--fr-line-2); border-radius: calc(0.32 * var(--u));
  font-size: calc(0.8 * var(--u)); color: var(--fr-text-2); white-space: nowrap;
}
.mbtn--p { background: var(--fr-accent); border-color: var(--fr-accent);
  color: var(--accent-fg); font-weight: 500; }

.av {
  display: grid; place-items: center; flex: none;
  width: calc(1.45 * var(--u)); height: calc(1.45 * var(--u));
  border-radius: 50%;
  font-size: calc(0.62 * var(--u)); font-weight: 600; letter-spacing: 0.02em;
  background: var(--fr-fill); color: var(--fr-text-3);
}

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.down { color: var(--fr-down); }
/* direction without colour — the default, so frames stay quiet */
.dir { color: var(--fr-text-4); font-family: var(--font-mono); }

/* --- KPI strip ---------------------------------------------------------- */
.kpis {
  display: grid; grid-template-columns: repeat(var(--n, 5), 1fr);
  border-bottom: 1px solid var(--fr-line);
}
.kpis > div { padding: calc(1 * var(--u)) calc(1.1 * var(--u)); }
.kpis > div + div { border-left: 1px solid var(--fr-line); }
.kpi__l {
  font-family: var(--font-mono); font-size: calc(0.66 * var(--u));
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--fr-text-4);
}
.kpi__v {
  font-family: var(--font-display); font-weight: 500;
  font-size: calc(1.85 * var(--u)); letter-spacing: -0.03em;
  color: var(--fr-text); margin-top: calc(0.4 * var(--u));
  font-variant-numeric: tabular-nums;
}
.kpi__d { font-size: calc(0.76 * var(--u)); margin-top: calc(0.2 * var(--u)); }

/* --- table -------------------------------------------------------------- */
.tbl { width: 100%; }
.tbl__r {
  display: grid; align-items: center;
  grid-template-columns: var(--cols, 2.2fr 1fr 1fr 1fr 0.8fr);
  gap: calc(0.9 * var(--u));
  height: calc(2.5 * var(--u));
  padding: 0 calc(1.1 * var(--u));
  border-bottom: 1px solid var(--fr-line);
  font-size: calc(0.88 * var(--u));
  color: var(--fr-text-2);
}
.tbl__r > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl__r--h {
  height: calc(2.1 * var(--u));
  font-family: var(--font-mono); font-size: calc(0.68 * var(--u));
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fr-text-4);
  background: var(--fr-bg-2);
}
.tbl__r:last-child { border-bottom: 0; }
.tbl__n { display: flex; align-items: center; gap: calc(0.6 * var(--u)); min-width: 0; }
.tbl__n b { font-weight: 500; color: var(--fr-text); overflow: hidden;
  text-overflow: ellipsis; }
.ta-r { text-align: right; }

/* --- mini charts -------------------------------------------------------- */
.bars { display: flex; align-items: flex-end; gap: calc(0.4 * var(--u));
  height: calc(5.5 * var(--u)); }
.bars i { flex: 1; background: var(--fr-fill); border-radius: calc(0.15 * var(--u));
  height: var(--h, 50%); }
.bars i.is-on { background: var(--fr-accent); }

/* --- the one life sign per frame ---------------------------------------- */
/* Decorative pulses live here rather than in JS. Slow on purpose: a frame
   should look alive, not busy — busy is the failure this rebuild is fixing. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fr-pulse {
    0%, 100% { opacity: 0.32; }
    50%      { opacity: 1; }
  }
  @keyframes fr-glow {
    0%, 100% { background: transparent; }
    50%      { background: var(--fr-soft); }
  }
  @keyframes fr-caret {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  .pulse { animation: fr-pulse 3.4s var(--ease) infinite; }
  .glow  { animation: fr-glow 4.6s var(--ease) infinite; }
  .cop__caret { animation: fr-caret 1.05s step-end infinite; }
}

.dot {
  display: inline-block; flex: none;
  width: calc(0.45 * var(--u)); height: calc(0.45 * var(--u));
  border-radius: 50%; background: var(--fr-accent);
}