/* The panel. No framework, no build step, no CDN -- the page is a file the
   control plane serves, and a page behind an Entra login should not be
   fetching anything from anywhere else. That rules out a web font, so the
   type works the system stacks hard instead: one weight axis, tight
   tracking on headings, tabular figures everywhere a number can change.

   Colour is three layers of neutral and exactly one accent. A tool that
   reports what a machine costs per hour should be quiet; the only loud
   things on the page are the two states that cost money for nothing.

   Themes: the tokens are defined three times on purpose.

     :root                     light, the baseline
     @media (dark) :root:not([data-theme="light"])   follow the system
     :root[data-theme="dark"]  forced

   The `:not` is what makes "always light" survive a dark system, and the
   forced block is what makes "always dark" survive a light one. Two blocks
   would give a switch that works in one direction. */

:root {
  color-scheme: light;

  /* Surfaces, from the page up. Near-neutral with a trace of warmth, not
     blue-grey: blue-grey is the colour of every admin panel ever shipped,
     and it is what made the first attempt read as generic rather than as
     wrong. */
  --bg: #f7f6f3;
  --card: #ffffff;
  --raised: #fbfbfa;
  --sunken: #f1f1ef;

  --ink: #373530;
  --dim: #787774;
  --faint: #9b9a97;

  --line: rgba(55, 53, 48, .09);
  --line-strong: rgba(55, 53, 48, .16);
  --edge: #a5a39e;

  /* One accent, and a button is NOT made of it. It marks data and focus and
     nothing else. Low chroma on purpose: a saturated brand colour on every
     control is most of what cheap looks like. */
  --accent: #43aa8b;
  --accent-hover: #389177;
  --accent-soft: #43aa8b;
  --accent-wash: rgba(67, 170, 139, .12);

  /* The primary action is ink, not colour. Contrast carries more authority
     than a hue, and it leaves colour free to mean something. */
  --solid: #17161a;
  --solid-hover: #2b2930;
  --solid-ink: #ffffff;

  --ok: #548164;
  --warn: #c29343;
  --bad: #c4554d;
  --warn-bg: #faf3dd;
  --bad-bg: #faecec;

  --shadow: 0 1px 2px rgba(20, 18, 24, .05),
            0 6px 16px rgba(20, 18, 24, .06);
  --shadow-lift: 0 2px 4px rgba(20, 18, 24, .06),
                 0 16px 36px rgba(20, 18, 24, .10);
  --drop: 0 1px 2px rgba(20, 18, 24, .10);
  /* Nothing in light. A highlight along the top edge is how a dark surface
     reads as lit rather than as flat, and on white there is nothing to
     light up. */
  --lit: 0 0 0 0 transparent;

  /* ---- THE THREE AXES ---------------------------------------------------
     Hardware, Engine and Model are what an instance IS, and the panel said
     so only in words. One colour each, carried everywhere the three appear,
     so the shape of the idea is visible before the labels are read.

     From the owner's palette, and it assigned itself: the ramp runs warm to
     cool, so the WARM end takes state -- red, yellow and green already mean
     bad, warn and ok to everybody -- and the COOL end is left for
     structure, which is what the three axes are.

     Slate, teal, blue is the right order within that too: hardware dies
     with the instance and is the most neutral of the three; the model is
     what costs most to replace and is the most saturated.

     They mark, they do not fill. The moment a whole card takes one, the
     page is a toy.
     ------------------------------------------------------------------- */
  --axis-hardware: #787774;
  --axis-engine: #8a67ab;
  --axis-model: #487ca5;

  /* The fills are a TINT of the hue above, not a colour of their own.
     Fourteen percent over whatever the page is, so the surface shows
     through and the same declaration works in both themes -- which is
     also how Notion builds its own callouts: #447acb at about this
     strength over #191919 lands within a shade or two of the #1f282d
     Notion actually uses. Derived rather than copied, so the three stay
     in step if a hue changes. */
  --tint: 14%;

  --radius: 14px;
  --radius-sm: 9px;
  /* The joint. panel.js draws the knob to --tab; the depth has to stand
     well clear of the seam or the head never reaches past the channel and
     the two pieces read as facing each other rather than as fitting. */
  --tab: 44px;
  --seam: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #191919;
    --card: #202020;
    --raised: #252525;
    --sunken: #141414;

    --ink: #d4d4d4;
    --dim: #ada9a3;
    --faint: #7e7a75;

    --line: rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .14);
    --edge: #4a4844;

    --accent: #7fc5b0;
    --accent-hover: #96d3c1;
    --accent-soft: #7fc5b0;
    --accent-wash: rgba(127, 197, 176, .14);

    --solid: #f2f0ee;
    --solid-hover: #ffffff;
    --solid-ink: #121214;

    --ok: #4f9768;
    --warn: #c19138;
    --bad: #be524b;
    --warn-bg: #372e20;
    --bad-bg: #332523;

    --shadow: 0 1px 2px rgba(0, 0, 0, .50),
              0 10px 28px rgba(0, 0, 0, .40);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .55),
                   0 20px 48px rgba(0, 0, 0, .50);
    --drop: 0 1px 3px rgba(0, 0, 0, .55);
    /* The detail that separates a lit surface from a grey rectangle. */
    --lit: inset 0 1px 0 rgba(255, 255, 255, .05);
    /* The three axes on near-black: the same hues lifted toward
       white. The palette is drawn for paper, and its cool end
       goes muddy on #0b0b0d. */
    --axis-hardware: #9b9b9b;
    --axis-engine: #865dbb;
    --axis-model: #447acb;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #191919;
  --card: #202020;
  --raised: #252525;
  --sunken: #141414;

  --ink: #d4d4d4;
  --dim: #ada9a3;
  --faint: #7e7a75;

  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --edge: #4a4844;

  --accent: #7fc5b0;
  --accent-hover: #96d3c1;
  --accent-soft: #7fc5b0;
  --accent-wash: rgba(127, 197, 176, .14);

  --solid: #f2f0ee;
  --solid-hover: #ffffff;
  --solid-ink: #121214;

  --ok: #4f9768;
  --warn: #c19138;
  --bad: #be524b;
  --warn-bg: #372e20;
  --bad-bg: #332523;

  --shadow: 0 1px 2px rgba(0, 0, 0, .50),
            0 10px 28px rgba(0, 0, 0, .40);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .55),
                 0 20px 48px rgba(0, 0, 0, .50);
  --drop: 0 1px 3px rgba(0, 0, 0, .55);
  /* The detail that separates a lit surface from a grey rectangle. */
  --lit: inset 0 1px 0 rgba(255, 255, 255, .05);
  /* The three axes on near-black: the same hues lifted toward
     white. The palette is drawn for paper, and its cool end
     goes muddy on #0b0b0d. */
  --axis-hardware: #9b9b9b;
  --axis-engine: #865dbb;
  --axis-model: #447acb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, .mono {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
               Menlo, Consolas, monospace;
  font-feature-settings: "liga" 0;
}

/* Every figure that can change is tabular, so a countdown does not jitter
   and two numbers in a column line up on the decimal. */
.fact__value, .rows td, .pill, .secret__token { font-variant-numeric: tabular-nums; }

::selection { background: var(--accent-wash); }

/* ------------------------------------------------------------- the bar -- */

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1.5rem;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(14px);
  position: sticky; top: 0; z-index: 10;
}
.bar h1 {
  margin: 0;
  font-size: .95rem; font-weight: 600;
  letter-spacing: -.01em;
}
.bar__right { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.who, .version { color: var(--dim); font-size: .82rem; }
.version { font-variant-numeric: tabular-nums; }

.link { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; }
.link__dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--edge);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--edge) 22%, transparent);
}
.link[data-state="live"] .link__dot {
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
.link[data-state="live"] { color: var(--ok); }
.link[data-state="lost"] .link__dot {
  background: var(--bad);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent);
}
.link[data-state="lost"] { color: var(--bad); }
.link[data-state="stale"] .link__dot {
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent);
}
.link[data-state="stale"] { color: var(--warn); }

/* ------------------------------------------------------ the theme switch -- */

.theme {
  display: inline-flex; align-items: center;
  padding: 2px; gap: 2px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.theme button {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; padding: 0;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--faint);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.theme button:hover { color: var(--ink); }
.theme button[aria-pressed="true"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--drop);
}
.theme button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.theme svg { width: 15px; height: 15px; display: block; }

main { max-width: 64rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.slot { margin: 0 0 1.5rem; color: var(--dim); font-size: .95rem; }
.slot strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------- the notices -- */

.notices { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
.notice {
  margin-top: 1rem; padding: .8rem 1rem;
  border: 1px solid var(--line); border-left: 3px solid var(--edge);
  border-radius: var(--radius-sm); background: var(--card);
  box-shadow: var(--shadow);
  font-size: .92rem;
}
.notice--bad { border-left-color: var(--bad); background: var(--bad-bg); }
.notice--warn { border-left-color: var(--warn); background: var(--warn-bg); }
.notice--ok { border-left-color: var(--ok); }
.notice__code {
  color: var(--faint); font-size: .76rem; margin-top: .2rem;
  font-family: ui-monospace, Menlo, monospace;
}

/* ----------------------------------------------------------- the pieces -- */

.pieces { display: flex; align-items: stretch; flex-wrap: nowrap; }

.piece {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 12rem;
}
.piece + .piece { margin-left: calc(var(--seam) - var(--tab)); }

/* The outline is an SVG path, not a clip-path: a path has both fill and
   stroke, so the piece keeps a border, and the content sits above it
   unclipped, so a keyboard focus ring is never swallowed by a notch. */
.piece__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.piece__shape path {
  fill: var(--card);
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-linejoin: round;
  filter: drop-shadow(var(--drop));
}
.piece[data-state="missing"] .piece__shape path {
  stroke-dasharray: 5 4;
  stroke: var(--edge);
  fill: color-mix(in srgb, var(--card) 55%, transparent);
  filter: none;
}
.piece[data-fit="no"] .piece__shape path { stroke: var(--bad); }

.piece__body {
  position: relative;
  height: 100%;
  padding: 1.15rem 1rem;
  display: flex; flex-direction: column; gap: .55rem;
}
/* Clearance only where there IS a joint. A notch bites one depth into the
   edge and a tabbed edge stops one depth short, so each needs a depth of
   its own -- and the outer edges of the first and last piece need none,
   which is where the room for this comes from.

   It used to be a depth on all four sides and TWICE that on the notched
   one, sized for a geometry where the notch sat a depth inside the edge.
   It does not any more. */
.piece[data-before="yes"] .piece__body { padding-left: calc(var(--tab) + 1rem); }
.piece[data-after="yes"] .piece__body { padding-right: calc(var(--tab) + 1rem); }

.piece__kind {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
}
.piece select {
  font: inherit; width: 100%;
  padding: .45rem .55rem;
  color: var(--ink); background: var(--sunken);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease;
}
.piece select:hover { border-color: var(--edge); }
.piece select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.piece__facts { margin: 0; color: var(--dim); font-size: .84rem; line-height: 1.5; }
.piece__warn { margin: 0; font-size: .79rem; color: var(--warn); }
.piece__state {
  margin-top: auto; font-size: .82rem; display: flex; align-items: center;
  gap: .45rem; color: var(--dim);
}
.dot {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--edge); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--edge) 20%, transparent);
}
.dot--ok {
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);
}
.dot--warn {
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent);
}

/* The reason a pair does not fit lives IN the gap that holds them apart, so
   a warning is visibly the thing keeping the pieces from joining. */
.gap {
  flex: 0 0 9.5rem;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 .5rem;
  font-size: .77rem; line-height: 1.45;
  color: var(--warn);
}
.gap--bad { color: var(--bad); }
.gap + .piece { margin-left: 0; }

/* ---------------------------------------------------------- the running -- */

.run {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem 1.6rem;
  box-shadow: var(--lit), var(--shadow);
}
.run__head {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-bottom: .5rem;
}
.run__slug {
  font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em;
}
.run__owner { color: var(--dim); font-size: .9rem; }
.pill {
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  padding: .15rem .55rem; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--dim);
  text-transform: uppercase;
}
/* A dot and a word. The outline-plus-tint version shouted the one thing on
   the card that is never surprising: the machine you are looking at is on. */
.pill--on {
  color: var(--dim); border-color: transparent; padding-left: 0;
  background: none; display: inline-flex; align-items: center; gap: .4rem;
}
.pill--on::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
}
.pill--off { color: var(--faint); }

.grid {
  display: grid; gap: 1.4rem 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 1.4rem 0;
}
.fact__label {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; margin-bottom: .15rem;
}
.fact__value { font-size: 1.02rem; }
.fact__value--big {
  font-size: 2rem; font-weight: 550; letter-spacing: -.03em;
  line-height: 1.1; margin-top: .1rem;
}
.fact__note { font-size: .79rem; color: var(--dim); margin-top: .2rem; line-height: 1.45; }
/* The gone phase, which bills like a healthy one and is not. */
.fact__note--bad { color: var(--bad); }
.fact__value--bad { color: var(--bad); }

.spark {
  display: block; width: 100%; height: 2.75rem;
  margin-top: .35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.spark__plot { fill: var(--sunken); }
/* Requests in flight are the engine doing its work, so the line is the
   engine's colour -- the same square that sits beside the word ENGINE. */
.spark__area { fill: color-mix(in srgb, var(--axis-engine) 16%, transparent); }
.spark__line {
  fill: none; stroke: var(--axis-engine); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ------------------------------------------------------- the GPU cards -- */

.card {
  margin-top: .9rem; padding: .95rem 1.1rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--lit);
}
.card + .card { margin-top: .6rem; }
.card__head { display: flex; align-items: baseline; gap: .55rem; }
.card__name {
  font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--axis-hardware);
}
.card__model { font-size: .88rem; color: var(--ink); }

.meter {
  height: .4rem; margin: .7rem 0 .4rem;
  background: var(--sunken);
  border-radius: 999px; overflow: hidden;
}
.meter__fill {
  height: 100%; border-radius: 999px;
  /* Hardware's colour, because that is what is being measured: how full
     a card is. A chart that borrows the label's colour needs no legend. */
  background: var(--axis-hardware);
  transition: width .4s ease;
}
/* A card this full is one allocation away from failing, and seeing it
   before that happens is the whole point of showing the figure. */
.meter__fill--full { background: var(--warn); }

.card__memory {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .82rem; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.card__amount { color: var(--ink); }
.card__pct { color: var(--dim); }

.card__figures {
  display: flex; gap: 1.75rem; margin-top: .85rem;
  padding-top: .75rem; border-top: 1px solid var(--line);
}
.card__key {
  font-size: .64rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.card__val {
  font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums;
  margin-top: .1rem;
}

#loose p { margin: .7rem 0 0; font-size: .85rem; color: var(--warn); }

.actions {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  margin-top: 1.4rem;
}
button {
  font: inherit; font-size: .9rem; font-weight: 500;
  padding: .5rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--raised);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
button:hover:not(:disabled) { background: var(--sunken); border-color: var(--edge); }
button:active:not(:disabled) { transform: translateY(.5px); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Ink, not colour. A saturated fill on the one button somebody presses is
   the single loudest thing on a page whose job is to be quiet, and it
   spends the only hue available on something that needs no hue at all. */
button.go {
  background: var(--solid); border-color: var(--solid); color: var(--solid-ink);
  font-weight: 600;
}
button.go:hover:not(:disabled) {
  background: var(--solid-hover); border-color: var(--solid-hover);
}
button.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
button.danger:hover:not(:disabled) {
  background: var(--bad-bg); border-color: var(--bad);
}
button[aria-busy="true"] { opacity: .55; cursor: progress; }
.note { color: var(--dim); font-size: .85rem; }

.sub {
  margin-top: 1.25rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.6rem;
  box-shadow: var(--lit), var(--shadow);
}
.sub h2 {
  margin: 0 0 .9rem; font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.sub p { font-size: .88rem; }

.rows { width: 100%; border-collapse: collapse; font-size: .86rem; }
.rows th {
  text-align: left; font-size: .67rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); font-weight: 600;
  padding: 0 .9rem .5rem 0; white-space: nowrap;
}
.rows td {
  padding: .55rem .9rem .55rem 0; border-top: 1px solid var(--line);
}
.rows td:first-child { font-family: ui-monospace, Menlo, monospace; }
.rows tr[data-axis] td:first-child { position: relative; padding-left: .95rem; }
.rows tr[data-axis] td:first-child::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: .2rem; height: 1.05rem; border-radius: 2px;
  background: var(--axis);
}
.rows tr:hover td { background: var(--sunken); }
button.small { padding: .2rem .6rem; font-size: .78rem; }

/* Shown once, and then it is gone from everywhere. */
.secret {
  margin-top: 1rem; padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ok) 6%, var(--card));
}
.secret p { margin: 0 0 .7rem; font-size: .88rem; }
.secret__token, .secret__snippet {
  margin: 0 0 .85rem; padding: .7rem .8rem; overflow-x: auto;
  background: var(--sunken); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, Menlo, monospace; font-size: .83rem;
  user-select: all;
}
.secret__token { font-size: .92rem; letter-spacing: .01em; }
.secret__snippet { user-select: text; white-space: pre; }

.foot {
  max-width: 64rem; margin: 0 auto; padding: 0 1.5rem 2.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--faint); font-size: .78rem;
}

/* ------------------------------------------------------------- narrow -- */

/* Stacking turns the joints from left/right into top/bottom. panel.js draws
   the other set of paths; this is the half that decides when. */
@media (max-width: 46rem) {
  .bar { padding: .7rem 1rem; }
  main { padding: 1.5rem 1rem 3rem; }
  .notices, .foot { padding-left: 1rem; padding-right: 1rem; }
  .run, .sub { padding: 1.15rem 1.1rem; }

  .pieces { flex-direction: column; }
  .piece + .piece { margin-left: 0; margin-top: calc(var(--seam) - var(--tab)); }
  /* `flex: 1 1 0` is right in a row and wrong in a column: there the basis
     is the HEIGHT, so every piece would be squeezed to nothing and its text
     would run out of its own outline into the next one. Stacked, each piece
     is as tall as what it holds. */
  .piece { flex: 0 0 auto; min-height: 9rem; }
  .piece__body { padding: .9rem 1.1rem; }
  .piece[data-before="yes"] .piece__body {
    padding-top: calc(var(--tab) + .8rem);
  }
  .piece[data-after="yes"] .piece__body {
    padding-bottom: calc(var(--tab) + .8rem);
  }
  .gap { flex: 0 0 auto; padding: .6rem 1rem; }
  .gap + .piece { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --------------------------------------------------------- the axes -- */

/* A 7px square before the label, and nothing else. It appears in the
   chooser and again on the running instance, so the same three colours
   mean the same three things in both places -- which is the only reason to
   colour them at all. */
[data-axis="hardware"] { --axis: var(--axis-hardware); }
[data-axis="engine"]   { --axis: var(--axis-engine); }
[data-axis="model"]    { --axis: var(--axis-model); }

/* ------------------------------------------------- the axes as surfaces -- */

/* The three pieces are not outlined in their colour. They ARE it.
   White text throughout, and every control inside borrowed from the white
   rather than from the page, so a piece is one object and not a tinted box
   with the page's furniture sitting on it. */
[data-axis="hardware"] { --axis: var(--axis-hardware); }
[data-axis="engine"]   { --axis: var(--axis-engine); }
[data-axis="model"]    { --axis: var(--axis-model); }
[data-axis] { --fill: color-mix(in srgb, var(--axis) var(--tint), transparent); }

.piece[data-axis] .piece__shape path {
  fill: var(--fill);
  stroke: color-mix(in srgb, var(--axis) 34%, transparent);
  stroke-width: 1;
  filter: none;
}
.piece[data-axis][data-state="missing"] .piece__shape path {
  fill: color-mix(in srgb, var(--axis) 6%, transparent);
  stroke: color-mix(in srgb, var(--axis) 45%, transparent);
  stroke-dasharray: 5 4;
}
.piece[data-fit="no"] .piece__shape path {
  stroke: var(--bad); stroke-width: 2; stroke-dasharray: none;
}

/* A tint carries the PAGE's text. White on it was right while the fill
   was opaque; over a fourteen percent wash it is a smear. The colour
   comes back in the one place it reads as a label rather than as a
   decoration, which is Notion's own pattern: a coloured word on a tinted
   block. */
.piece[data-axis] .piece__kind { color: var(--axis); }

/* On the running instance there is no room for three coloured panels, so
   the three facts take a band of their colour down the left instead --
   enough to be the same three things, not enough to be three cards. */
.fact[data-axis] {
  padding-left: .7rem;
  border-left: 3px solid var(--fill);
}