/* RegimeLab shared embed stylesheet, v2.
   Written from the realised grammar in the ADX reader, 20 Jul 2026.
   Replaces the previous file entirely: that one defined ~30 classes and no
   tool linked it, so none of it had ever rendered.

   BOUNDARY. This file owns anything appearing in more than one tool:
   container, masthead, rules, labels, tags, footer, FCA line, colour tokens,
   type scale, state classes. A tool's inline <style> owns only what is unique
   to it: the ADX gauge, the timeline band, the breadth proportion bar.
   If a rule would be identical in two tools, it belongs here.

   TYPE. Mono is for values the market produced: numbers, pair symbols,
   timestamps, axis marks. Body is for words the interface chose: labels,
   headers, prose, status, the FCA line.

   SIZES. 10, 11.5, 12.5, 13, 14, 16, 24, 30. Nothing between.

   COLOUR. Saturation scales inversely with area. Large fills take the muted
   values, small elements take the full accents. */

:root{
  --paper:#fff;
  --grid:#EDF1F4;          /* internal section rules */
  --line:#E3E8EC;          /* container + masthead rule */
  --line-2:#CDD5DC;        /* control underlines, swatch borders */

  --ink:#12161B;           /* primary */
  --ink-2:#39404A;         /* body */
  --ink-3:#6A737D;         /* secondary */
  --ink-4:#666E79;         /* labels + micro, WCAG AA on white */

  /* small elements: dots, pips, legend swatches */
  --trend:#0F9D58; --range:#B37400; --bear:#D93A22;
  /* large filled areas: bars, bands, gauges */
  --trend-fill:#4FA47A; --range-fill:#D4A33F; --bear-fill:#D96F58;
  --void:#E4E9ED;          /* no data */

  --display:'Space Grotesk',sans-serif;
  --body:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

*{box-sizing:border-box;margin:0;}

body{
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--body);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:18px;
}

/* ── container ───────────────────────────────────────────────────────────
   One box. Not a card inside a card inside a card. Sections within it are
   separated by rules and space, never by nested surfaces. */
.rl{
  max-width:620px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 20px 18px;
  font-variant-numeric:tabular-nums;
}

/* ── masthead ────────────────────────────────────────────────────────────
   A rule, not a dark bar. Reads as a publication header. */
.rl-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 0 12px;
  border-bottom:1px solid var(--line);
}
.rl-mark{display:flex;gap:2px;align-items:flex-end;height:14px;}
.rl-mark i{display:block;width:3px;border-radius:1px;}
.rl-name{font-size:11.5px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);}
.rl-tags{margin-left:auto;display:flex;gap:6px;}
.tag{
  font-size:10px;font-weight:500;letter-spacing:.03em;color:var(--ink-4);
  border:1px solid var(--line);border-radius:4px;padding:2px 7px;
}

/* ── shared type ─────────────────────────────────────────────────────── */
.lab{font-size:10px;font-weight:500;letter-spacing:.05em;color:var(--ink-4);}
.hero{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.1;}
.say{margin-top:16px;font-size:14px;color:var(--ink-2);max-width:52ch;}
.say strong,.say b{color:var(--ink);font-weight:500;}
.note{margin-top:8px;font-size:13px;color:var(--ink-3);max-width:52ch;}

/* ── section rule ────────────────────────────────────────────────────────
   How a second reading is separated. Not by a panel. */
.rl-sub{margin-top:18px;padding-top:16px;border-top:1px solid var(--grid);}

/* ── footer ───────────────────────────────────────────────────────────── */
.rl-foot{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:18px;padding-top:13px;border-top:1px solid var(--grid);
}
.rl-upd{font-size:11.5px;color:var(--ink-4);}
.rl-link{
  margin-left:auto;font-size:12.5px;color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid var(--line-2);padding-bottom:1px;
}
.rl-link:hover{color:var(--ink);border-color:var(--ink-3);}

/* FCA line sits OUTSIDE the container, and is prose so it is body not mono. */
.rl-fca{max-width:620px;margin-top:10px;font-size:11.5px;color:var(--ink-4);}

/* ── states ──────────────────────────────────────────────────────────── */
.skel{
  color:transparent!important;background:var(--grid);border-radius:4px;
  animation:rl-pulse 1.4s ease-in-out infinite;
}
@keyframes rl-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.is-error .rl-upd{color:var(--bear);}
@media (prefers-reduced-motion:reduce){.skel{animation:none;}}

@media(max-width:520px){
  body{padding:12px;}
  .rl,.rl-fca{max-width:none;}
  .rl{padding:0 15px 15px;}
  .say,.note{font-size:13px;}
}