/* The model overlay: shared by the front page and the Panels tab.

   ONE RENDERER, TWO HOSTS. What an admin evaluates before publishing and what
   the world sees afterwards are the same code on the same payload, so they
   cannot drift. Extracted from control_panel.html rather than copied. */
#mvScrim{position:fixed;inset:0;background:rgba(4,7,11,.72);z-index:60;
  display:none;align-items:center;justify-content:center;padding:26px;
  backdrop-filter:blur(2px)}
#mvScrim.on{display:flex}
#mvBox{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  max-width:940px;width:100%;max-height:88vh;overflow:auto;padding:0;
  box-shadow:0 18px 60px rgba(0,0,0,.5);position:relative}
#mvBox .mvhd{position:sticky;top:0;background:var(--surface);z-index:2;
  border-bottom:1px solid var(--border);padding:16px 22px 12px;
  border-top:3px solid var(--mc,var(--s1));border-radius:14px 14px 0 0}
#mvBox h2{margin:0;font:700 19px Cambria,Georgia,serif;letter-spacing:.4px}
#mvBox .mvsub{color:var(--muted);font-size:12px;margin-top:3px}
#mvClose{position:absolute;top:12px;right:14px;border:1px solid var(--border);
  background:var(--page);color:var(--ink2);border-radius:7px;cursor:pointer;
  font:13px system-ui;padding:3px 10px}
#mvBox .mvbody{padding:16px 22px 24px}
/* the interval rides with its figure at a smaller weight: it qualifies the
   number rather than competing with it */
.mvstat .mvpm{font:500 11px system-ui;color:var(--muted);white-space:nowrap}
.mvsec{margin-bottom:20px}
.mvsec h3{font:600 12px system-ui;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}
.mvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px}
/* FIVE ACROSS, ALWAYS. These are one row of context under a chart, not tiles
   competing with the headline -- so the column count is fixed rather than
   auto-fitted, and the type is a step down. */
.mvgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mvgrid4{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.mvgrid5{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:9px}
.mvgrid5 .mvstat{padding:6px 8px}
.mvgrid5 .mvstat .v{font:600 13.5px system-ui}
.mvstat{background:var(--page);border:1px solid var(--border);border-radius:9px;
  padding:8px 10px}
.mvstat .k{color:var(--muted);font-size:10.5px;letter-spacing:.3px}
.mvstat .v{font:600 16px system-ui;margin-top:2px}
.mvtab{width:100%;border-collapse:collapse;font-size:12.5px}
.mvtab th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;
  padding:4px 8px 4px 0;border-bottom:1px solid var(--border)}
.mvtab td{padding:5px 8px 5px 0;border-bottom:1px solid var(--border)}
.mvnote{color:var(--muted);font-size:11.5px;line-height:1.55;margin-top:7px}
/* the RANGE bar: where the published book sits inside its population */
.mvrange{position:relative;height:26px;background:var(--page);
  border:1px solid var(--border);border-radius:7px;margin-top:6px}
.mvrange .band{position:absolute;top:0;bottom:0;background:var(--ci,var(--s1));
  opacity:.16}
.mvrange .mid{position:absolute;top:0;bottom:0;width:1.5px;background:var(--muted)}
.mvrange .you{position:absolute;top:-3px;bottom:-3px;width:2.5px;
  background:var(--mc,var(--s1));border-radius:2px}
.mvrange .lbl{position:absolute;top:100%;font-size:10px;color:var(--muted);
  margin-top:2px;white-space:nowrap}
.mvchart{background:var(--page);border:1px solid var(--border);border-radius:9px;
  padding:8px 10px 4px;min-height:150px}
.mvload{color:var(--muted);font-size:12px;padding:56px 0;text-align:center}
/* how consistently a control ranks -- 50% is zero, so the bar reads as
   "which half of the scale", not as a magnitude */
.mvbar{height:4px;background:var(--panel2);border-radius:2px;margin-top:3px;
  position:relative;overflow:hidden}
.mvbar i{display:block;height:100%;background:var(--mc,var(--s1));opacity:.7}
/* impact reads left-to-right against a full-width track, so a short bar is
   visibly short rather than merely smaller than its neighbour */
.mvimp{display:inline-block;width:calc(100% - 42px);height:7px;
  background:var(--panel2);border-radius:4px;overflow:hidden;
  vertical-align:middle;margin-right:8px}
.mvimp i{display:block;height:100%;background:var(--mc,var(--s1));opacity:.8}

/* Lock-in fingerprint: per-coin share of bars held long vs short. Moved off the
   dashboard card, where it cost more vertical space than it earned -- it is
   reference detail, not a headline. */
.fpkey{display:flex;justify-content:flex-end;gap:6px;font-size:9.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.fprow{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.fprow .cn{min-width:46px;font-size:11.5px;color:var(--ink2)}
.fpbar{position:relative;flex:1 1 auto;height:9px;background:var(--page);
  border:1px solid var(--border);border-radius:3px;overflow:hidden}
.fpbar .mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--axis)}
.fpbar .seg{position:absolute;top:0;bottom:0}
.fppct{display:flex;gap:6px;font-size:10.5px;font-variant-numeric:tabular-nums}
.fppct span{min-width:34px;text-align:right}
.fpblock{margin-top:11px;padding-top:9px;border-top:1px solid var(--border)}
.fphd{font-size:9.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:5px}

/* Rolling-window strip bands: RED (loss) through neutral to BLUE (gain).
   Deliberately not the green/red used for P&L text on the dashboard -- these cells
   are a rate, not a number you read, and a diverging scale with a neutral
   middle is what makes "when did it lose" legible at a glance. */
:root{--rw-p3:#1f5f9c;--rw-p2:#6a9fc8;--rw-p1:#c8dced;--rw-z:#ece9e3;
  --rw-n1:#f0c9b8;--rw-n2:#d4795a;--rw-n3:#9e2f10}
@media (prefers-color-scheme: dark){:root{
  --rw-p3:#4a9fe0;--rw-p2:#2f6a94;--rw-p1:#213c52;--rw-z:#2a2724;
  --rw-n1:#5c2f22;--rw-n2:#9c4429;--rw-n3:#e0693c}}

/* Per-quarter return bars. Centre-less (all bars start at the left) because the
   sign is carried by colour and the number beside it; a diverging axis would
   halve the width available to a 13-row table. */
.qbar{display:inline-block;width:calc(100% - 54px);height:8px;background:var(--page);
  border:1px solid var(--border);border-radius:4px;overflow:hidden;
  vertical-align:middle;margin-right:8px}
.qbar i{display:block;height:100%;opacity:.75}
.qbar i.up{background:var(--up)}
.qbar i.down{background:var(--down)}