/* ─────────────────────────────────────────────────────────────
   midas.css — the atom sheet
   Single source of truth for the repeated patterns in MIDAS.
   Edit the class here, never the page.

   COLOUR RULE — hue belongs to the metals.
     · The eight metal plates carry rank, and they are the only place
       hue lives freely. They are surfaces, not paint.
     · Outside them: one blue ramp in four steps (scale, and what is in
       play), acid green for good, acid red for issues. Nothing else.
     · Six neutrals do the rest: two grounds, three inks, one rule weight.
       --hairline is both the rule AND all type on an ink ground.
     · A place is not a claim — the query surface takes no accent.
     · Row tints follow an accent that already exists; never invented alone.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ── Tokens ─────────────────────────────────────────────────── */
[data-theme="void-os"] {
  --font-display: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* accents — hue belongs to the metals. Outside them: blue in four steps
     for scale and what is in play, acid green for good, acid red for issues.
     Nothing else carries colour. */
  --blue-deep: #0A0850;
  --blue-dark: #2318C8;
  --blue: #3D2BFF;
  --blue-light: #8175FF;
  --acid-green: #C9F03D;
  --acid-red: #FF2B3D;

  /* neutrals — six: two grounds, three inks, one rule.
     ink/body-grey/muted are the three inks on paper;
     hairline is both the rule weight AND all type on ink. */
  --ink: #0A0A0A;
  --paper: #FFFFFF;
  --bone: #EFEEE9;
  --hairline: #C2C0B8;
  --body-grey: #4A4A50;
  --muted: #66666C;

  /* row tints — each follows its accent, never invented alone */
  --wash-blue: #F0EEFF;
  --wash-gold: #FDF6E0;
}

a { color: #3D2BFF; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: #0A0A0A; text-decoration-color: #3D2BFF; }

/* ── Type atoms ─────────────────────────────────────────────── */
.mono-xs {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.masthead-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ── State marks: absent ≠ unknown ≠ zero ───────────────────── */
.pip {
  width: 9px;
  height: 9px;
  flex: none;
  display: inline-block;
  background: #3D2BFF;
  animation: pp 2s ease-in-out infinite;
}

.hatch {
  background-color: #EFEEE9;
  background-image: repeating-linear-gradient(45deg, rgba(10, 10, 10, 0.30) 0 2px, transparent 2px 5px);
}

/* ── Page states: the five a page must draw ─────────────────── */
/* empty/not-seeded · stale · partial · error · refused.
   Same mono chip; the ground carries the meaning. Colour stays
   inside §3 — error is the one acid-red strip, refused is neutral
   (a refusal is not a failure), staleness reads as the system's
   own hatch texture. */
.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid #0A0A0A;
  padding: 4px 9px;
  white-space: nowrap;
}
.state-empty   { background: #EFEEE9; color: #66666C; border-style: dashed; border-color: rgba(10, 10, 10, 0.45); }
.state-stale   { background-color: #EFEEE9; background-image: repeating-linear-gradient(45deg, rgba(10, 10, 10, 0.12) 0 2px, transparent 2px 6px); color: #0A0A0A; }
.state-partial { background: #FFFFFF; color: #0A0A0A; }
.state-partial::before { content: ''; width: 8px; height: 8px; flex: none; border: 1px solid #0A0A0A; background: linear-gradient(90deg, #0A0A0A 50%, transparent 50%); }
.state-error   { background: #FF2B3D; color: #0A0A0A; }
.state-refused { background: #0A0A0A; color: #C2C0B8; }
.state-good    { background: #C9F03D; color: #0A0A0A; }

/* ── Provenance: any AI-derived fact carries its run ─────────── */
/* which run · which model · which prompt version. The blue tick
   marks it derived; never sits on a figure without one. */
.prov {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: #4A4A50;
  border: 1px dashed rgba(10, 10, 10, 0.45);
  padding: 3px 8px;
}
.prov::before { content: ''; width: 7px; height: 7px; flex: none; background: #3D2BFF; }

/* ── As-of watermark: every figure states when it was true ───── */
.asof {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #66666C;
}

/* ── Role variant marker: owner-only · rep-only · both ───────── */
/* Tints follow accents that already exist (wash-gold, wash-blue). */
.role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid #0A0A0A;
  background: #FFFFFF;
  color: #0A0A0A;
  padding: 3px 9px;
}
.role.is-owner { background: #FDF6E0; }
.role.is-rep   { background: #F0EEFF; }
.role.is-both  { background: #FFFFFF; }

/* ── The metal ladder ───────────────────────────────────────── */
/* Every plate is exactly three stacked layers:
     1. cylindrical shading — bright top, shadowed base, bounce light
     2. brushed grain — fine anisotropic striation, horizontally brushed
     3. the sweep — banded, twin specular highlights, deep shadows
   Only layer 3 ever moves. */
.fill-gold, .fill-gold-plus,
.fill-platinum, .fill-platinum-plus,
.fill-silver, .fill-bronze, .fill-blue, .fill-obsidian {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 165% 100%;
  background-position: 0 0, 0 0, 50% 50%;
}

.fill-gold > *, .fill-gold-plus > *,
.fill-platinum > *, .fill-platinum-plus > *,
.fill-silver > *, .fill-bronze > *, .fill-blue > *, .fill-obsidian > * {
  position: relative;
  z-index: 2;
}

.fill-gold, .fill-gold-plus, .fill-platinum, .fill-platinum-plus, .fill-silver {
  color: #241900;
}
.fill-bronze, .fill-blue, .fill-obsidian { color: #FFFFFF; }

.fill-gold {
  background-color: #C9A227;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 18%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.1) 68%, rgba(0,0,0,0.22) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 1px, rgba(0,0,0,0.09) 1px 2px),
    linear-gradient(101deg, #C9A227 0%, #E8CF72 7%, #FBF3D0 13%, #E8CF72 19%, #8A6A18 26%, #C9A227 33%, #E8CF72 40%, #FBF3D0 45%, #E8CF72 50%, #8A6A18 57%, #C9A227 64%, #E8CF72 71%, #FBF3D0 76%, #E8CF72 82%, #8A6A18 88%, #C9A227 94%, #C9A227 100%);
}

.fill-gold-plus {
  background-color: #D9B63C;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 18%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.1) 68%, rgba(0,0,0,0.22) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 1px, rgba(0,0,0,0.09) 1px 2px),
    linear-gradient(101deg, #D9B63C 0%, #F2E094 7%, #FFFEF0 13%, #F2E094 19%, #A8831F 26%, #D9B63C 33%, #F2E094 40%, #FFFEF0 45%, #F2E094 50%, #A8831F 57%, #D9B63C 64%, #F2E094 71%, #FFFEF0 76%, #F2E094 82%, #A8831F 88%, #D9B63C 94%, #D9B63C 100%);
  animation: gd 18s ease-in-out infinite alternate;
}

.fill-platinum {
  background-color: #B3C2D6;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 18%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.1) 68%, rgba(0,0,0,0.22) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 1px, rgba(0,0,0,0.09) 1px 2px),
    linear-gradient(101deg, #B3C2D6 0%, #E4ECF8 7%, #FFFFFF 13%, #E4ECF8 19%, #8496AE 26%, #B3C2D6 33%, #E4ECF8 40%, #FFFFFF 45%, #E4ECF8 50%, #8496AE 57%, #B3C2D6 64%, #E4ECF8 71%, #FFFFFF 76%, #E4ECF8 82%, #8496AE 88%, #B3C2D6 94%, #B3C2D6 100%);
  animation: pd 14s ease-in-out infinite alternate;
}

.fill-platinum-plus {
  background-color: #CEDBEC;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 18%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.1) 68%, rgba(0,0,0,0.22) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 1px, rgba(0,0,0,0.09) 1px 2px),
    linear-gradient(101deg, #CEDBEC 0%, #F2F7FE 7%, #FFFFFF 13%, #F2F7FE 19%, #A3B4CB 26%, #CEDBEC 33%, #F2F7FE 40%, #FFFFFF 45%, #F2F7FE 50%, #A3B4CB 57%, #CEDBEC 64%, #F2F7FE 71%, #FFFFFF 76%, #F2F7FE 82%, #A3B4CB 88%, #CEDBEC 94%, #CEDBEC 100%);
  animation: pd 12s ease-in-out infinite alternate;
}

.fill-silver {
  background-color: #C0C2C5;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 18%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.1) 68%, rgba(0,0,0,0.22) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 1px, rgba(0,0,0,0.09) 1px 2px),
    linear-gradient(101deg, #C0C2C5 0%, #DCDDDF 7%, #EFEFF0 13%, #DCDDDF 19%, #A2A4A8 26%, #C0C2C5 33%, #DCDDDF 40%, #EFEFF0 45%, #DCDDDF 50%, #A2A4A8 57%, #C0C2C5 64%, #DCDDDF 71%, #EFEFF0 76%, #DCDDDF 82%, #A2A4A8 88%, #C0C2C5 94%, #C0C2C5 100%);
}

.fill-bronze {
  background-color: #A9722F;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 18%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.1) 68%, rgba(0,0,0,0.22) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 1px, rgba(0,0,0,0.09) 1px 2px),
    linear-gradient(101deg, #A9722F 0%, #D9A362 7%, #F0CFA0 13%, #D9A362 19%, #6E4A1E 26%, #A9722F 33%, #D9A362 40%, #F0CFA0 45%, #D9A362 50%, #6E4A1E 57%, #A9722F 64%, #D9A362 71%, #F0CFA0 76%, #D9A362 82%, #6E4A1E 88%, #A9722F 94%, #A9722F 100%);
}

.fill-blue {
  background-color: #3D2BFF;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 18%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.1) 68%, rgba(0,0,0,0.22) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 1px, rgba(0,0,0,0.09) 1px 2px),
    linear-gradient(101deg, #3D2BFF 0%, #6A5AFF 7%, #9B92FF 13%, #6A5AFF 19%, #1E12A8 26%, #3D2BFF 33%, #6A5AFF 40%, #9B92FF 45%, #6A5AFF 50%, #1E12A8 57%, #3D2BFF 64%, #6A5AFF 71%, #9B92FF 76%, #6A5AFF 82%, #1E12A8 88%, #3D2BFF 94%, #3D2BFF 100%);
  animation: bd 13s ease-in-out infinite alternate;
}

.fill-obsidian {
  background-color: #2C2C34;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 18%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.1) 68%, rgba(0,0,0,0.22) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 1px, rgba(0,0,0,0.09) 1px 2px),
    linear-gradient(101deg, #2C2C34 0%, #4A4A54 7%, #6E6E78 13%, #4A4A54 19%, #14141A 26%, #2C2C34 33%, #4A4A54 40%, #6E6E78 45%, #4A4A54 50%, #14141A 57%, #2C2C34 64%, #4A4A54 71%, #6E6E78 76%, #4A4A54 82%, #14141A 88%, #2C2C34 94%, #2C2C34 100%);
  animation: od 12s ease-in-out infinite alternate;
}

/* The travelling glint — a skewed band crossing the plate */
.fill-gold-plus::after,
.fill-platinum::after, .fill-platinum-plus::after,
.fill-blue::after, .fill-obsidian::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -60%;
  width: 30%;
  z-index: 1;
  transform: skewX(-16deg);
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.10) 28%,
    rgba(255,255,255,0.34) 44%,
    rgba(255,255,255,0.64) 50%,
    rgba(255,255,255,0.34) 56%,
    rgba(255,255,255,0.10) 72%,
    rgba(255,255,255,0) 100%);
}
.fill-gold-plus::after     { animation: pg 8.5s cubic-bezier(.4,0,.5,1) infinite; }
.fill-platinum::after      { animation: pg 9s   cubic-bezier(.4,0,.5,1) infinite; }
.fill-platinum-plus::after { animation: pg 7.5s cubic-bezier(.4,0,.5,1) infinite; }
.fill-blue::after          { animation: bgl 8s  cubic-bezier(.4,0,.5,1) infinite; }
.fill-obsidian::after      { animation: og 6.5s cubic-bezier(.4,0,.5,1) infinite; }

/* Sheen modifiers — how hard the plate catches the light */
.sheen-soft { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }
.sheen-full {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.50), inset 0 -1px 0 rgba(0,0,0,0.26);
}
.sheen-max {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -2px 0 rgba(0,0,0,0.30);
}
/* Light type needs a dark drop, whatever sheen it is paired with. */
.fill-bronze, .fill-blue, .fill-obsidian,
.fill-bronze.sheen-soft, .fill-bronze.sheen-full, .fill-bronze.sheen-max,
.fill-blue.sheen-soft, .fill-blue.sheen-full, .fill-blue.sheen-max,
.fill-obsidian.sheen-soft, .fill-obsidian.sheen-full, .fill-obsidian.sheen-max {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

/* ── Rank badge — the one way rank is shown ─────────────────── */
.tier-badge {
  flex: none;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0A0A0A;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.tier-badge.hatch { color: #4A4A50; border-style: dashed; border-color: rgba(10, 10, 10, 0.45); }

/* ── Row states ─────────────────────────────────────────────── */
tr.is-lit { background: #FDF6E0; }

/* ── Hover reveal ───────────────────────────────────────────── */
.hov-host { cursor: default; }
.hov-pop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.hov-host:hover > .hov-pop,
.hov-host:focus > .hov-pop,
.hov-host:focus-within > .hov-pop,
.hov-host:hover .hov-pop,
.hov-host:focus .hov-pop,
.hov-host:focus-within .hov-pop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.hov-host:focus-visible { box-shadow: inset 0 0 0 2px #3D2BFF; }

/* ── Filter tokens + expanding panel ────────────────────── */
.filter-token {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 2px solid #0A0A0A;
  background: #FFFFFF;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.tok-label { font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #0A0A0A; }
.tok-val { font-family: var(--font-mono); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #3D2BFF; }
/* the value is data-driven and unbounded — cap it so a token can never
   grow wide enough to push its neighbours out of the bar */
.tok-val { display: inline-block; max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.filter-token:hover { background: #EFEEE9; }
.filter-token.is-open { background: #0A0A0A; border-color: #0A0A0A; }
.filter-token.is-open .tok-label { color: #FFFFFF; }
.filter-token.is-open .tok-val { color: #FFFFFF; }
.filter-token.is-open .tok-x { color: #FFFFFF; }
.filter-token.has-value .tok-val { color: #3D2BFF; }
.filter-token.is-open.has-value .tok-val { color: #FFFFFF; }
.tok-x { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1; color: inherit; padding: 0 1px; cursor: pointer; }

/* The bar is one line. Two primaries are pinned, the rest ride a rail that
   the arrows drive — so the hidden scrollbar has a visible control. */
.filter-rail {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filter-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rail-btn {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0A0A0A;
  background: #FFFFFF;
  color: #0A0A0A;
  cursor: pointer;
  padding: 0;
  transition: background 0.1s ease, opacity 0.12s ease;
}
.rail-btn:hover { background: #EFEEE9; }
.rail-btn.is-off { opacity: 0.28; cursor: default; }
.rail-btn.is-off:hover { background: #FFFFFF; }

.active-count {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  background: #0A0A0A;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Link card — a whole panel that is one link ──────────────── */
.link-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 3px solid #0A0A0A;
  background: #FFFFFF;
  color: #0A0A0A;
  text-decoration: none;
  box-shadow: 5px 5px 0 #0A0A0A;
  transition: background 0.12s linear, box-shadow 0.06s linear, transform 0.06s linear;
}
.link-card:hover { background: #EFEEE9; }
.link-card:active { transform: translate(5px, 5px); box-shadow: 0 0 0 #0A0A0A; }
.link-card:focus-visible { outline: none; box-shadow: 5px 5px 0 #0A0A0A, inset 0 0 0 3px #3D2BFF; }
.link-card:focus { outline: none; box-shadow: 5px 5px 0 #0A0A0A, inset 0 0 0 3px #3D2BFF; }

/* ── Carousel chrome ────────────────────────────────────────── */
/* Arrows are chrome, not furniture: present only while the rail they
   drive is hovered or holds focus. Keyboard reach is preserved —
   :focus-within on the parent brings them back before they can be
   tabbed to, and reduced motion drops the fade, never the reveal. */
.rail-nav-group {
  opacity: 0;
  transition: opacity 0.18s ease;
}
*:hover > .rail-nav-group,
*:focus-within > .rail-nav-group,
.rail-nav-group:focus-within { opacity: 1; }
/* a card carousel: the arrow floats over the rail it drives */
.arrow-host .arrow-btn {
  opacity: 0;
  transition: opacity 0.18s ease;
  border: 2px solid #0A0A0A;
  background: #FFFFFF;
  color: #0A0A0A;
  cursor: pointer;
  padding: 0;
}
.arrow-host:hover .arrow-btn,
.arrow-host:focus-within .arrow-btn { opacity: 1; }
.arrow-host .arrow-btn:hover { background: #EFEEE9; }
.arrow-host .arrow-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #3D2BFF; }

[data-tier-wrap] [data-tier-nav] { opacity: 0; transition: opacity 0.18s ease; }
[data-tier-wrap]:hover [data-tier-nav],
[data-tier-wrap]:focus-within [data-tier-nav] { opacity: 1; }
[data-tier-wrap] [data-tier-nav]:hover { background: #EFEEE9; }
@media (prefers-reduced-motion: reduce) {
  .rail-nav-group, [data-tier-wrap] [data-tier-nav], .arrow-host .arrow-btn { transition: none; }
}

/* ── Option grids — dense bordered chips, code + count ──────── */
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
/* facets whose options are words, not codes, need wider tracks */
.chip-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(162px, 1fr)); gap: 8px; }

.grid-chip {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 11px;
  border: 2px solid #0A0A0A;
  background: #FFFFFF;
  font: inherit;
  cursor: pointer;
  transition: background 0.1s ease, box-shadow 0.12s ease;
}
/* a long label (an industry name) wraps between words inside its chip instead of running over the next chip */
.chip-code { font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; color: #0A0A0A; white-space: normal; overflow-wrap: break-word; min-width: 0; }
.chip-count { font-family: var(--font-mono); font-size: 0.62rem; color: #66666C; white-space: nowrap; }
.grid-chip:hover { background: #EFEEE9; }
.grid-chip:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #3D2BFF; }
.grid-chip.is-picked { background: #0A0A0A; box-shadow: inset 0 -4px 0 #3D2BFF; }
.grid-chip.is-picked .chip-code { color: #FFFFFF; }
.grid-chip.is-picked .chip-count { color: #C2C0B8; }

.place-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 44px;
  padding: 11px 12px;
  border: 2px solid #0A0A0A;
  background: #FFFFFF;
  font: inherit;
  cursor: pointer;
  transition: background 0.1s ease, box-shadow 0.12s ease;
}
.place-count { font-family: var(--font-mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.02em; color: #0A0A0A; }
.place-name { font-family: var(--font-mono); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.04em; color: #0A0A0A; text-align: center; }
.place-meta { font-family: var(--font-mono); font-size: 0.6rem; color: #4A4A50; }
.place-chip:hover { background: #EFEEE9; }
.place-chip:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #3D2BFF; }
.place-chip.is-picked { background: #0A0A0A; box-shadow: inset 0 -4px 0 #3D2BFF; }
.place-chip.is-picked .place-name { color: #FFFFFF; }
.place-chip.is-picked .place-count { color: #FFFFFF; }
.place-chip.is-picked .place-meta { color: #C2C0B8; }

.drill-head { font-family: var(--font-mono); font-weight: 500; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: #3D2BFF; }

/* panel commit — blue because it is an action, not good news */
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.panel-done {
  flex: none; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #FFFFFF; background: #3D2BFF; border: 3px solid #0A0A0A; box-shadow: 3px 3px 0 #0A0A0A;
  padding: 11px 18px; min-height: 44px; cursor: pointer;
  transition: background 0.12s linear, box-shadow 0.12s linear, transform 0.12s linear;
}
.panel-done:hover { background: #2318C8; }
.panel-done:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #0A0A0A; }
.panel-done:focus-visible { outline: none; box-shadow: 3px 3px 0 #0A0A0A, 0 0 0 3px #8175FF; }
.panel-done .done-n { font-weight: 500; color: #FFFFFF; letter-spacing: 0.1em; }

.filter-panel { animation: panelIn 0.26s cubic-bezier(.2,.7,.3,1) both; }
@keyframes panelIn { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.filter-panel .grid-chip, .filter-panel .place-chip { animation: mi 0.26s cubic-bezier(.2,.7,.3,1) both; }
.opt-row > *:nth-child(1) { animation-delay: 0.01s; }
.opt-row > *:nth-child(2) { animation-delay: 0.02s; }
.opt-row > *:nth-child(3) { animation-delay: 0.03s; }
.opt-row > *:nth-child(4) { animation-delay: 0.04s; }
.opt-row > *:nth-child(5) { animation-delay: 0.05s; }
.opt-row > *:nth-child(6) { animation-delay: 0.06s; }
.opt-row > *:nth-child(7) { animation-delay: 0.07s; }
.opt-row > *:nth-child(8) { animation-delay: 0.08s; }
.opt-row > *:nth-child(9) { animation-delay: 0.09s; }
.opt-row > *:nth-child(10) { animation-delay: 0.10s; }
.opt-row > *:nth-child(11) { animation-delay: 0.11s; }
.opt-row > *:nth-child(12) { animation-delay: 0.12s; }

/* ── Form controls ──────────────────────────────────────────── */
.field, .num {
  min-height: 40px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: #0A0A0A;
  background: #FFFFFF;
  border: 2px solid #0A0A0A;
  border-radius: 0;
  padding: 10px 12px;
  outline: none;
  transition: box-shadow 0.1s ease;
}
.field:focus { box-shadow: inset 0 -4px 0 #3D2BFF; }
.num {
  width: 64px;
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.num:focus { box-shadow: inset 0 -4px 0 #C9F03D; }

.btn-save {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0A0A0A;
  background: #FFFFFF;
  border: 2px solid #0A0A0A;
  border-radius: 0;
  box-shadow: 3px 3px 0 #0A0A0A;
  padding: 12px 18px;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.btn-save:hover { background: #3D2BFF; }
.btn-save:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0A0A0A; }
/* An unavailable control is stated in the six neutrals, never in alpha —
   opacity cannot hold the 4.5:1 floor. --muted on bone is 4.9:1. */
.btn-save[disabled], .btn-save.is-off {
  background: #EFEEE9;
  color: #66666C;
  border-color: rgba(10, 10, 10, 0.45);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.btn-save[disabled]:hover, .btn-save.is-off:hover { background: #EFEEE9; }

/* A text link that is really a button ("Reveal", "Start over"). Blue because
   it acts; 44px because it is reachable. */
.lnk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: none;
  background: none;
  padding: 0;
  color: #3D2BFF;
  cursor: pointer;
}
.lnk:hover { color: #0A0A0A; }
.lnk:focus-visible { outline: none; box-shadow: inset 0 -4px 0 #3D2BFF; }

.ref {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: #4A4A50;
  background: #EFEEE9;
  border: 2px dashed rgba(10, 10, 10, 0.45);
  padding: 0 11px;
}

/* ── Printable documents ────────────────────────────────────── */
/* A sheet has one true width. On screen it is scaled to fit the pane; in
   print nothing is touched — doc-page owns the page box. These cannot be
   inline: page-break behaviour, ::first-letter and @media print have no
   inline equivalent. */
doc-page:not(:defined) { visibility: hidden; }
.keep { break-inside: avoid; page-break-inside: avoid; }
.fitbox { position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; }
.fitscale { width: 1056px; transform-origin: top left; }
.fitscale .bleed { box-sizing: border-box; }
.bleed { margin-left: -0.5in; margin-right: -0.5in; }
.rule { height: 3px; background: #0A0A0A; }
.drop::first-letter {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.4em;
  line-height: 0.78;
  float: left;
  padding: 4px 10px 0 0;
}
@media print {
  .fitbox { overflow: visible; height: auto !important; }
  .fitscale { width: auto; transform: none !important; }
  .deskbar, [data-fitsensor] { display: none !important; }
}

/* ── Sheet — a modal layer over the page ────────────────────── */
/* The scrim is ink at 72%. It is a ground for nothing, so alpha is legal
   here and nowhere else. The sheet itself is a paper plate with a hard
   ink drop, like .link-card; its head is an ink band with hairline type.
   Escape closes it, and the page behind it does not scroll. */
.sheet-back {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 10, 10, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
}
.sheet {
  width: 100%;
  max-height: 88vh;
  overflow: auto;
  border: 3px solid #0A0A0A;
  background: #FFFFFF;
  color: #0A0A0A;
  box-shadow: 12px 12px 0 #0A0A0A;
  animation: sheetIn 0.22s cubic-bezier(.2,.7,.3,1) both;
}
.sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: #0A0A0A;
  color: #C2C0B8;
}
.sheet-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.sheet-sub {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: #C2C0B8;
}
/* the dismiss — hairline on ink, the one control that lives in the head */
.sheet-x {
  flex: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid #C2C0B8;
  background: transparent;
  color: #C2C0B8;
  padding: 9px 13px;
  cursor: pointer;
}
.sheet-x:hover { background: #C2C0B8; color: #0A0A0A; }
/* focus inside a sheet is a blue-light ring — legible on paper, ink and blue */
.sheet button:focus-visible, .sheet a:focus-visible, .sheet-x:focus-visible { outline: none; box-shadow: 0 0 0 3px #8175FF; }

/* ── Utilities ──────────────────────────────────────────────── */
.noscroll { scrollbar-width: none; -ms-overflow-style: none; }
.noscroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── Motion ─────────────────────────────────────────────────── */
@keyframes gd  { from { background-position: 0 0, 0 0, 22% 50%; } to { background-position: 0 0, 0 0, 78% 50%; } }
@keyframes pd  { from { background-position: 0 0, 0 0, 18% 50%; } to { background-position: 0 0, 0 0, 82% 50%; } }
@keyframes bd  { from { background-position: 0 0, 0 0, 20% 50%; } to { background-position: 0 0, 0 0, 80% 50%; } }
@keyframes od  { from { background-position: 0 0, 0 0, 20% 50%; } to { background-position: 0 0, 0 0, 80% 50%; } }
@keyframes pg  { 0% { left: -60%; } 42%, 100% { left: 140%; } }
@keyframes bgl { 0% { left: -60%; } 44%, 100% { left: 150%; } }
@keyframes og  { 0% { left: -60%; } 46%, 100% { left: 150%; } }
@keyframes pp  { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes mi  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  /* 0s, not 0.01ms — a sub-millisecond duration still latches every property
     at its from-value, so class-driven state (picked chips, open tokens,
     focus underlines) would never paint at all. */
  *, *::before, *::after { animation-play-state: paused !important; transition-duration: 0s !important; }
  /* a paused entry animation would leave these stuck invisible */
  .filter-panel, .filter-panel .grid-chip, .filter-panel .place-chip, .sheet { animation: none !important; }
}

/* Phone: long mono lines (crumbs, meta rows, ids) wrap instead of pushing
   the page sideways. Desktop is unchanged. Inside a table they break only at
   word ends (break-word), so a table column never splits into single letters. */
@media (max-width: 600px) {
  :where([data-theme="void-os"] .mono-xs:not([style*="text-overflow: ellipsis"], [style*="overflow-x: auto"] *):not(doc-page *)) { white-space: normal !important; overflow-wrap: anywhere; }
  :where([data-theme="void-os"] :is(table, td, th) .mono-xs:not(doc-page *)) { overflow-wrap: break-word; }
  /* a button or link label breaks only between words ("OLDER →", never "OLDE / R") */
  :where([data-theme="void-os"] :is(button, a).mono-xs:not(doc-page *)) { overflow-wrap: break-word; }
}

/* ── Shared states (F-004, F-006): an unavailable control looks unavailable and says why in its title.
   .btn-save and controls a page styles itself (cursor: not-allowed inline) keep their own neutral look: no alpha. ── */
[data-theme="void-os"] button:disabled,
[data-theme="void-os"] input:disabled,
[data-theme="void-os"] select:disabled,
[data-theme="void-os"] [aria-disabled="true"] { cursor: not-allowed !important; box-shadow: none !important; }
:where([data-theme="void-os"] :is(button, input, select):disabled:not(.btn-save, [style*="not-allowed"]),
       [data-theme="void-os"] [aria-disabled="true"]:not(.btn-save, [style*="not-allowed"])) { opacity: .55; }
[data-theme="void-os"] a[aria-disabled="true"] { text-decoration: none; color: #66666C; }

/* ── Phone layout system (F-002). Below 760px every page stacks; nothing pushes the page sideways.
   Utilities a page can use:  .phone-stack (row -> column)  .phone-cols-1 (grid -> one column)  .phone-cols-2
   .phone-wrap (flex row wraps)  .phone-scroll (keep the width, scroll inside)  .phone-hide  .phone-full (fill the width)
   .phone-keep (opt out of the automatic rules below for this element). Desktop is unchanged.
   The automatic rules sit in :where(:not(doc-page *)) (no specificity), so a page's own phone rule always wins over them. ── */
@media (max-width: 760px) {
  [data-theme="void-os"] .phone-stack { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
  [data-theme="void-os"] .phone-cols-1 { grid-template-columns: minmax(0, 1fr) !important; }
  [data-theme="void-os"] .phone-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-theme="void-os"] .phone-wrap { flex-wrap: wrap !important; }
  [data-theme="void-os"] .phone-scroll { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  [data-theme="void-os"] .phone-hide { display: none !important; }
  [data-theme="void-os"] .phone-full { width: auto !important; min-width: 0 !important; max-width: 100% !important; flex: 1 1 auto !important; }

  /* automatic: multi-column layout grids become one column. These keep their columns:
     label/value rows ("1fr auto"); rows built to scroll sideways in their box (a min-width that is not 0) and the rows
     next to such a header;
     grids with fixed rows (a QR square); token boxes (a row of nothing but inputs: a row that mixes an input with
     labels or buttons stacks like any other); grids of five or more equal cells
     (calendars, day strips, chip panels); and matrices (a fixed label column, then repeated cells). */
  :where([data-theme="void-os"] [style*="grid-template-columns"]:not(.phone-keep, .phone-cols-2, [style*="1fr) auto"], [style*="1fr auto"],
      [style*="min-width"]:not([style*="min-width: 0"]), :has(> [style*="grid-template-columns"][style*="min-width"]:not([style*="min-width: 0"])) > *,
      [style*="grid-template-rows"], :has(> input):not(:has(> :not(input))),
      :is([style*="repeat(5,"], [style*="repeat(6,"], [style*="repeat(7,"], [style*="repeat(8,"], [style*="repeat(9,"], [style*="repeat(1"]):is([style*="minmax(0"]), [style*="px repeat("]):not(doc-page *)) { grid-template-columns: minmax(0, 1fr) !important; }
  /* …but a grid of short plain items (codes, chips: no child holds more than its text) keeps two columns */
  :where([data-theme="void-os"] [style*="grid-template-columns"]:not(.phone-keep, .phone-cols-2, [style*="1fr) auto"], [style*="1fr auto"],
      [style*="min-width"]:not([style*="min-width: 0"]), :has(> [style*="grid-template-columns"][style*="min-width"]:not([style*="min-width: 0"])) > *,
      [style*="grid-template-rows"], :has(> input):not(:has(> :not(input))),
      :is([style*="repeat(5,"], [style*="repeat(6,"], [style*="repeat(7,"], [style*="repeat(8,"], [style*="repeat(9,"], [style*="repeat(1"]):is([style*="minmax(0"]), [style*="px repeat("]):has(> span + span):not(:has(> * > :not(.sc-interp), > p, > div)):not(doc-page *)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* equal-cell chip panels wider than a phone (five or more columns, not a calendar week) wrap their cells */
  :where([data-theme="void-os"] [style*="grid-template-columns"]:is([style*="repeat(5,"], [style*="repeat(6,"], [style*="repeat(8,"], [style*="repeat(9,"], [style*="repeat(1"])[style*="minmax(0"]:not(.phone-keep, [style*="min-width"]:not([style*="min-width: 0"]), [style*="grid-template-rows"], :has(> input):not(:has(> :not(input))), [style*="px repeat("]):not(doc-page *)) { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important; }
  /* a matrix or a scrolling row that is wider than the phone scrolls inside its box, header and rows together */
  :where([data-theme="void-os"] :has(> [style*="grid-template-columns"][style*="px repeat("], > [style*="grid-template-columns"][style*="min-width"]:not([style*="min-width: 0"])):not(.phone-keep):not(doc-page *)) { overflow-x: auto; max-width: 100%; }
  :where([data-theme="void-os"] [style*="grid-template-columns"]:not(.phone-keep, [style*="min-width"]:not([style*="min-width: 0"]), [style*="grid-template-rows"], [style*="repeat(7,"], [style*="px repeat("]) > [style*="grid-column"]:not(doc-page *)) { grid-column: auto !important; }
  :where([data-theme="void-os"] [style*="grid-template-areas"]:not(.phone-keep):not(doc-page *)) { grid-template-areas: none !important; }
  :where([data-theme="void-os"] [style*="grid-template-areas"]:not(.phone-keep) > *:not(doc-page *)) { grid-area: auto !important; }
  /* tables scroll inside themselves instead of widening the page */
  :where([data-theme="void-os"] table:not(.phone-keep):not(doc-page *)) { display: block; max-width: 100%; overflow-x: auto; min-width: 0 !important; }
  :where([data-theme="void-os"] table:not(.phone-keep) :is(th, td):not(doc-page *)) { overflow-wrap: normal; }
  /* …and a chip or note in a cell that breaks "anywhere" breaks only between words: the table scrolls, so the column
     keeps the word instead of stacking its letters (Clients Projects "sadmin@thetrenches.biz") */
  :where([data-theme="void-os"] table:not(.phone-keep) :is(th, td) [style*="overflow-wrap: anywhere"]:not(doc-page *)) { overflow-wrap: break-word !important; }
  /* fixed widths never exceed the screen; long words and ids wrap. Inside a sideways scroller (tab bars, scrolling rows)
     items keep their content width and their no-wrap labels; a text that cuts itself off with an ellipsis stays on one line. */
  :where([data-theme="void-os"] [style*="width:"]:not([style*="max-width"], [style*="position: absolute"]):not(.phone-keep):not(doc-page *)) { max-width: 100%; }
  /* a hover card keeps its own width (100% would be its small anchor's width), up to the screen */
  :where([data-theme="void-os"] [style*="position: absolute"][style*="width:"]:not([style*="max-width"]):not(.phone-keep):not(doc-page *)) { max-width: calc(100vw - 32px); }
  :where([data-theme="void-os"] [style*="min-width: max-content"]:not(.phone-keep, [style*="overflow-x: auto"] > *):not(doc-page *)) { min-width: 0 !important; }
  :where([data-theme="void-os"] [style*="white-space: nowrap"]:not(.phone-keep, [style*="text-overflow: ellipsis"], [style*="overflow-x: auto"] *):not(doc-page *)) { white-space: normal !important; }
  /* the one no-wrap item of a row (a time, a count) is never squeezed below 9em beside a long text */
  :where([data-theme="void-os"] [style*="display: flex"]:not([style*="flex-direction: column"], .phone-keep):not(:has(> [style*="white-space: nowrap"] ~ [style*="white-space: nowrap"])) > [style*="white-space: nowrap"]:not(:only-child, .phone-keep):not(doc-page *)) { min-width: min(100%, 9em); }
  [data-theme="void-os"] { overflow-wrap: break-word; }
  :where([data-theme="void-os"] :is(img, video, canvas, iframe):not(doc-page *)) { max-width: 100%; }
  :where([data-theme="void-os"] pre:not(doc-page *)) { white-space: pre-wrap; }
  /* items of a wrapping row never exceed the row; a row inside one wraps too; long tokens break */
  :where([data-theme="void-os"] [style*="flex-wrap: wrap"]:not(.phone-keep) > *:not(.phone-keep):not(doc-page *)) { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  :where([data-theme="void-os"] [style*="flex-wrap: wrap"]:not(.phone-keep) > [style*="display: flex"]:not(.phone-keep):not([style*="flex-direction: column"]):not(doc-page *)) { flex-wrap: wrap; }
  /* a big display-font figure beside its label keeps its width (up to the row) and the label wraps instead,
     so "$13,850" never splits into "$13,8" / "50" */
  :where([data-theme="void-os"] [style*="display: flex"]:not([style*="flex-direction: column"]) > [style*="font-family: var(--font-display)"]:not(:only-child):not(doc-page *)) { flex-shrink: 0; max-width: 100%; }
  /* …and its row wraps, so a note or badge beside a heading that fills the row moves under it instead of being
     squeezed into a one-letter column ("never sent to a provider", "what we owe, and by when", HIGH/MEDIUM) */
  :where([data-theme="void-os"] [style*="display: flex"]:not([style*="flex-direction: column"], [style*="overflow"], .phone-keep):has(> [style*="font-family: var(--font-display)"]:not(:only-child)):not(doc-page *)) { flex-wrap: wrap; }
  /* in a label/value row the label keeps its own width (up to half the row) and a long value wraps beside it,
     instead of the value squeezing the label into a one-letter column ("they own", "dry-run digest") */
  :where([data-theme="void-os"] [style*="display: flex"][style*="justify-content: space-between"]:not([style*="flex-direction: column"], .phone-keep) > .mono-xs:first-child:not(:only-child):not(doc-page *)) { flex-shrink: 0; max-width: 50%; }
  :where([data-theme="void-os"] [style*="display: flex"][style*="justify-content: space-between"]:not([style*="flex-direction: column"], .phone-keep) > .mono-xs:first-child + *:not(doc-page *)) { min-width: 0; }
  /* a black section band (heading left, note right) keeps its words off the band's edges */
  :where([data-theme="void-os"] :is([style*="background: #0A0A0A"], [style*="background: rgb(10, 10, 10)"]):is([style*="padding: 15px 0;"], [style*="padding: 15px 0px;"])[style*="flex-wrap: wrap"]:not(.phone-keep):not(doc-page *)) { padding-left: 12px !important; padding-right: 12px !important; }
  /* a no-wrap row that is not a scroller wraps on a phone */
  :where([data-theme="void-os"] [style*="flex-wrap: nowrap"]:not([style*="overflow"]):not(.phone-keep):not(doc-page *)) { flex-wrap: wrap !important; }
}