/* ============================================================
   Extras: extended nav patterns, densities and Tweaks panel UI.
   Loaded after shell.css + theme-iwakiri.css so it wins.
   ============================================================ */

/* -------------------- DENSITY -------------------- */
html[data-density="compact"] {
  --pad-cell-y: 8px;
  --pad-cell-x: 12px;
  --gap-grid: 12px;
  --pad-page: 16px;
  --pad-panel: 14px;
  --row-h: 36px;
  --fs-base: 13px;
  --topbar-h: 52px;
  --subbar-h: 40px;
}
html[data-density="cozy"] {
  --pad-cell-y: 11px;
  --pad-cell-x: 14px;
  --gap-grid: 16px;
  --pad-page: 20px;
  --pad-panel: 18px;
  --row-h: 42px;
  --fs-base: 13px;
  --topbar-h: 56px;
  --subbar-h: 44px;
}
html[data-density="comfy"] {
  --pad-cell-y: 14px;
  --pad-cell-x: 18px;
  --gap-grid: 20px;
  --pad-page: 24px;
  --pad-panel: 22px;
  --row-h: 48px;
  --fs-base: 14px;
  --topbar-h: 60px;
  --subbar-h: 48px;
}
html[data-density="spacious"] {
  --pad-cell-y: 18px;
  --pad-cell-x: 22px;
  --gap-grid: 26px;
  --pad-page: 32px;
  --pad-panel: 28px;
  --row-h: 56px;
  --fs-base: 14.5px;
  --topbar-h: 68px;
  --subbar-h: 54px;
}

/* Apply density to real surfaces */
html[data-density] .data-table tbody td,
html[data-density] .data-table thead th {
  padding: var(--pad-cell-y) var(--pad-cell-x);
}
html[data-density] .panel {
  padding: var(--pad-panel);
}
html[data-density] .page {
  padding: var(--pad-page);
}
html[data-density] .grid {
  gap: var(--gap-grid);
}
html[data-density] .side__item {
  padding: calc(var(--pad-cell-y) - 2px) 10px;
}
html[data-density] .subnav__item {
  padding: calc(var(--pad-cell-y) - 2px) 14px;
}

/* -------------------- NAV: DUAL-TOP -------------------- */
/* Topbar with KPI strip on top, centered page tabs below. */
.app[data-nav="dual-top"] {
  grid-template-columns: 1fr;
  grid-template-rows: var(--topbar-h) var(--subbar-h) 1fr;
  grid-template-areas: "topbar" "subnav" "main";
}
.app[data-nav="dual-top"] .side { display: none; }
.app[data-nav="dual-top"] .subnav {
  display: flex;
  justify-content: center;
  background: #ffffff;
  border-bottom: 1px solid var(--border-default);
}
.app[data-nav="dual-top"] .subnav__item {
  background: transparent !important;
  color: #3F4254 !important;
  border: 0 !important;
  border-right: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
}
.app[data-nav="dual-top"] .subnav__item.active {
  background: transparent !important;
  color: var(--p-500) !important;
  border-bottom: 2px solid var(--p-500) !important;
}
.app[data-nav="dual-top"] .subnav__item:hover:not(.active) {
  background: transparent !important;
  color: var(--p-600) !important;
}

/* -------------------- NAV: MEGA-TOP -------------------- */
/* Like dual-top but bigger categorical band. */
.app[data-nav="mega-top"] {
  grid-template-columns: 1fr;
  grid-template-rows: var(--topbar-h) 60px 1fr;
  grid-template-areas: "topbar" "subnav" "main";
}
.app[data-nav="mega-top"] .side { display: none; }
.app[data-nav="mega-top"] .subnav {
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 10px 20px;
  background: linear-gradient(180deg, #ffffff, #f7f8fc);
  border-bottom: 1px solid var(--border-default);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04);
}
.app[data-nav="mega-top"] .subnav__item {
  background: #ffffff !important;
  color: #3F4254 !important;
  border: 1px solid var(--border-default) !important;
  border-right: 1px solid var(--border-default) !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  margin-right: 4px;
  font-weight: 600 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.app[data-nav="mega-top"] .subnav__item.active {
  background: var(--p-500) !important;
  color: #fff !important;
  border-color: var(--p-500) !important;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.2);
}
.app[data-nav="mega-top"] .subnav__item:hover:not(.active) {
  background: var(--p-50) !important;
  color: var(--p-700) !important;
  border-color: var(--p-200) !important;
}

/* -------------------- NAV: FLOATING RAIL -------------------- */
/* Sidebar becomes a floating pill on the left; main content goes full width. */
.app[data-nav="floating-rail"] {
  grid-template-columns: 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "topbar" "main";
  padding-left: 80px;
  position: relative;
}
.app[data-nav="floating-rail"] .side {
  position: fixed;
  left: 12px;
  top: 70px;
  bottom: 12px;
  width: 56px;
  border-radius: 16px;
  overflow-y: auto;
  box-shadow: 0 12px 28px -8px rgba(15,20,32,0.25), 0 4px 10px -4px rgba(15,20,32,0.15);
  border: 1px solid var(--side-border);
  z-index: 20;
}
.app[data-nav="floating-rail"] .side__brand,
.app[data-nav="floating-rail"] .side__brand-switch,
.app[data-nav="floating-rail"] .side__group-label,
.app[data-nav="floating-rail"] .side__item .label,
.app[data-nav="floating-rail"] .side__item .badge,
.app[data-nav="floating-rail"] .side__item .count,
.app[data-nav="floating-rail"] .side__footer .u-name,
.app[data-nav="floating-rail"] .side__footer .u-role {
  display: none;
}
.app[data-nav="floating-rail"] .side__item {
  justify-content: center;
  padding: 10px 8px;
  border-radius: 10px;
  margin: 2px 6px;
}
.app[data-nav="floating-rail"] .side__footer {
  justify-content: center;
  padding: 8px 0;
}

/* -------------------- NAV: COMMAND -------------------- */
/* Header-only; big centered command palette; sidebar hidden. */
.app[data-nav="command"] {
  grid-template-columns: 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "topbar" "main";
}
.app[data-nav="command"] .side { display: none; }
.app[data-nav="command"] .topbar__search {
  width: 500px;
  max-width: 46vw;
}
.app[data-nav="command"] .topbar__search .input {
  background: #f3f6f9;
  border: 1px solid var(--border-default);
  font-weight: 500;
  padding-left: 38px;
}
.app[data-nav="command"] .topbar__search .input::placeholder {
  content: "Jump to any page, player, transaction…";
}
.app[data-nav="command"] .topbar {
  justify-content: center;
  gap: 16px;
}

/* -------------------- TWEAKS PANEL VISUALS -------------------- */
.tweaks {
  width: 320px;
}
.tweaks__body { gap: 18px; }

.tweaks__options--nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tweaks__nav-opt {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 8px !important;
  gap: 6px !important;
  text-align: left !important;
  height: auto !important;
}
.tweaks__navpreview {
  width: 100%;
  aspect-ratio: 16/9;
  background: #f3f6f9;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.tweaks__nav-opt.active .tweaks__navpreview {
  background: #fff;
  border-color: var(--p-300);
}
.tweaks__navpreview .p-hdr,
.tweaks__navpreview .p-side,
.tweaks__navpreview .p-sub,
.tweaks__navpreview .p-main {
  position: absolute;
  background: var(--border-default);
}
/* Top bar (Iwakiri red subnav) */
.tweaks__navpreview--top .p-hdr { left:0; right:0; top:0; height:20%; background:#fff; border-bottom:1px solid var(--border-default); }
.tweaks__navpreview--top .p-sub { left:0; right:0; top:20%; height:14%; background:var(--p-500); }
.tweaks__navpreview--top .p-main { left:0; right:0; top:34%; bottom:0; background:#fafbfc; }
/* Sidebar */
.tweaks__navpreview--sidebar .p-hdr { left:28%; right:0; top:0; height:16%; background:#fff; border-bottom:1px solid var(--border-default); }
.tweaks__navpreview--sidebar .p-side { left:0; top:0; bottom:0; width:28%; background:var(--n-800); }
.tweaks__navpreview--sidebar .p-main { left:28%; right:0; top:16%; bottom:0; background:#fafbfc; }
/* Collapsed */
.tweaks__navpreview--collapsed .p-hdr { left:12%; right:0; top:0; height:16%; background:#fff; border-bottom:1px solid var(--border-default); }
.tweaks__navpreview--collapsed .p-side { left:0; top:0; bottom:0; width:12%; background:var(--n-800); }
.tweaks__navpreview--collapsed .p-main { left:12%; right:0; top:16%; bottom:0; background:#fafbfc; }
/* Hybrid */
.tweaks__navpreview--hybrid .p-hdr { left:12%; right:0; top:0; height:18%; background:#fff; border-bottom:1px solid var(--border-default); }
.tweaks__navpreview--hybrid .p-side { left:0; top:0; bottom:0; width:12%; background:var(--n-800); }
.tweaks__navpreview--hybrid .p-sub { left:12%; right:0; top:18%; height:14%; background:var(--p-500); }
.tweaks__navpreview--hybrid .p-main { left:12%; right:0; top:32%; bottom:0; background:#fafbfc; }
/* Dual top */
.tweaks__navpreview--dual-top .p-hdr { left:0; right:0; top:0; height:22%; background:#fff; border-bottom:1px solid var(--border-default); }
.tweaks__navpreview--dual-top .p-sub { left:10%; right:10%; top:22%; height:12%; background:#fff; border-bottom:2px solid var(--p-500); }
.tweaks__navpreview--dual-top .p-main { left:0; right:0; top:34%; bottom:0; background:#fafbfc; }
/* Floating rail */
.tweaks__navpreview--floating-rail .p-hdr { left:0; right:0; top:0; height:16%; background:#fff; border-bottom:1px solid var(--border-default); }
.tweaks__navpreview--floating-rail .p-side { left:4%; top:26%; bottom:6%; width:10%; background:var(--n-800); border-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.tweaks__navpreview--floating-rail .p-main { left:0; right:0; top:16%; bottom:0; background:#fafbfc; }
/* Command */
.tweaks__navpreview--command .p-hdr { left:0; right:0; top:0; height:22%; background:#fff; border-bottom:1px solid var(--border-default); }
.tweaks__navpreview--command .p-hdr::after {
  content:""; position:absolute; left:30%; right:30%; top:25%; bottom:25%;
  background:#f3f6f9; border:1px solid var(--border-default); border-radius:3px;
}
.tweaks__navpreview--command .p-main { left:0; right:0; top:22%; bottom:0; background:#fafbfc; }
/* Mega top */
.tweaks__navpreview--mega-top .p-hdr { left:0; right:0; top:0; height:18%; background:#fff; border-bottom:1px solid var(--border-default); }
.tweaks__navpreview--mega-top .p-sub { left:0; right:0; top:18%; height:22%; background:linear-gradient(180deg,#fff,#f3f6f9); border-bottom:1px solid var(--border-default); }
.tweaks__navpreview--mega-top .p-sub::after {
  content:""; position:absolute; left:8%; top:20%; width:16%; bottom:20%; background:var(--p-500); border-radius:3px;
}
.tweaks__navpreview--mega-top .p-main { left:0; right:0; top:40%; bottom:0; background:#fafbfc; }

.tweaks__nav-text {
  line-height: 1.25;
}
.tweaks__nav-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.tweaks__nav-sub {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tweaks__nav-opt.active .tweaks__nav-label { color: var(--p-600); }

/* -------------------- ACCENT SWATCHES -------------------- */
.tweaks__options--accent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tweaks__accent-opt {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  text-align: left !important;
}
.tweaks__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

/* -------------------- DENSITY TILES -------------------- */
.tweaks__options--density {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tweaks__density-opt {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  padding: 10px !important;
  text-align: left !important;
}
.tweaks__density-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 22px;
  flex-shrink: 0;
}
.tweaks__density-bars span {
  display: block;
  height: 2px;
  background: var(--text-tertiary);
  border-radius: 1px;
  opacity: 0.6;
}
.tweaks__density-bars--compact span { height:2px; margin:0; }
.tweaks__density-bars--compact { gap: 2px; }
.tweaks__density-bars--cozy { gap: 4px; }
.tweaks__density-bars--comfy { gap: 6px; }
.tweaks__density-bars--spacious { gap: 8px; }
.tweaks__density-bars--spacious span { height: 3px; }
.tweaks__density-opt.active .tweaks__density-bars span { background: var(--p-500); opacity: 1; }
.tweaks__density-text { line-height: 1.25; min-width: 0; }
.tweaks__density-label { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.tweaks__density-sub { font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tweaks__density-opt.active .tweaks__density-label { color: var(--p-600); }


/* -------------------- FILTER HERO STRIP -------------------- */
.filter-hero {
  display: grid;
  grid-template-columns: minmax(260px, 2.2fr) repeat(4, minmax(150px, 1fr)) minmax(110px, .8fr);
  gap: 10px;
  margin-bottom: 14px;
}
.filter-hero__card {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 10px 12px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 1px 2px rgba(15,20,32,.04);
  transition: border-color .12s, box-shadow .12s, transform .12s;
  min-width: 0;
}
.filter-hero__card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 10px -2px rgba(15,20,32,.08), 0 1px 2px rgba(15,20,32,.05);
}
.filter-hero__card:focus-within {
  border-color: var(--p-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--p-500) 18%, transparent);
}
.filter-hero__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.filter-hero__input,
.filter-hero__select {
  width: 100%;
  height: 28px;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  min-width: 0;
}
.filter-hero__input::placeholder { color: var(--text-tertiary); font-weight: 400; }
.filter-hero__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238a94a6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 14px;
}
.filter-hero__clear {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 999px;
  background: var(--n-75);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}
.filter-hero__clear:hover { background: var(--n-100); color: var(--text-primary); }

.filter-hero__card--search {
  background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--p-500) 3%, #fff));
  border-color: color-mix(in oklab, var(--p-500) 22%, var(--border-default));
}
.filter-hero__card--result {
  background: linear-gradient(180deg, var(--n-25), var(--n-50));
  border-color: var(--border-default);
}
.filter-hero__value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.filter-hero__value-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
}

@media (max-width: 1280px) {
  .filter-hero {
    grid-template-columns: minmax(240px, 2fr) repeat(2, 1fr) minmax(100px, .9fr);
  }
  /* Phase F/F2 scoped this to the PayBO surface, because unscoped it silently
     dropped two real filters from any Host screen reusing the .filter-hero
     vocabulary. Aug 2026 it was removed outright: hiding two real filters is a
     correctness problem wherever it happens, and the stacking rules below give
     them somewhere to go instead. */
}

/* Below 1280 the strip used to keep four ~150px tracks no matter how narrow the
   viewport got, so on a phone the cards overlapped, labels collided
   ("TIMEFRAME" over "STATUS") and the right-hand cards were clipped off-screen.
   Host screens never hit this — their Hrs strips collapse into a Filters sheet
   first — so it showed up as "PayBO looks broken on mobile". */
@media (max-width: 1100px) {
  .filter-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filter-hero__card--search { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .filter-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .filter-hero__card { padding: 9px 11px 8px; }
  /* The results counter is a summary, not a filter — send it to the end rather
     than leaving it stacked in among the inputs. */
  .filter-hero__card--result {
    order: 99;
    background: var(--bg-subtle, #f8fafc);
  }
}

/* ==== PlatformMobilePagePrimitives =================================
   Host screens are built on the Hrs kit, which handles small screens itself.
   PayBO screens are built on the raw shared primitives — `.page__header`,
   `.panel`, `.tabs` — and none of them had a mobile story, so on a phone the
   header ran 91–206px past the viewport, panels holding wide tables ran up to
   851px past it, and the tab strip clipped.

   Fixing the primitives fixes every screen that uses them at once, without
   touching a page file. Host is unaffected: its Hrs equivalents already carry
   their own rules and do not use these classes for the same job.

   Lives here rather than in theme-iwakiri.css because this file loads later
   (index.html) — see the cascade note in docs/DEAD_CONTROL_AUDIT.md §9. */
@media (max-width: 860px) {
  /* Title block on its own line, actions wrapping full-width beneath it,
     instead of one non-wrapping flex row. */
  .page__header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .page__header > * { min-width: 0; }
  /* shell.css pins `white-space: nowrap` on .page__title, and a Phase F rule
     re-pins it on .page__subtitle for the PayBO surface. Both are fine on a
     desktop header; on a 390px screen they are why the title block measured
     430-528px wide and dragged the header past the viewport. Let them wrap. */
  .page__title,
  /* The PayBO-scoped rule in shell.css:360-361 is five classes deep, so a plain
     `.page__header .page__subtitle` here loses on specificity no matter how
     late this file loads. Mirror its selector rather than reaching for
     !important. */
  .page:not(.hrs-page):not([class*="host-"]) > .page__header .page__subtitle,
  .page:not(.hrs-page):not([class*="host-"]) .page__subtitle {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* An actions cluster is any trailing flex child holding buttons. */
  .page__header [style*="margin-left:auto"],
  .page__header [style*="margin-left: auto"] {
    margin-left: 0 !important;
    width: 100%;
    flex-wrap: wrap;
  }

  /* A panel is a card; a wide table inside one has to scroll within it rather
     than push the whole page sideways. */
  .panel { max-width: 100%; }
  .panel:has(table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* A section head is the same shape as a page header — title left, actions
     right — and fails the same way on a phone. */
  .section__head { flex-wrap: wrap; gap: 8px; }
  .section__head > * { min-width: 0; }
  .section__title { white-space: normal; overflow-wrap: anywhere; }

  /* Development's cards lay out a wide grid that cannot shrink. */
  .paybo-devcard { min-width: 0; }
  .paybo-devcard > * { min-width: 0; max-width: 100%; }

  /* Long ids, urls and note lines are the remaining offenders on both surfaces:
     unbroken strings that no amount of container sizing can wrap. */
  .hsk-listnote, .hsu2-sortnote, .hss-card__ids, .lu-c-url, .hsd-detail, .hsb {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  input, select, textarea { max-width: 100%; }

  /* Chips wrap a status word plus, on the Help screens, a whole page path — the
     padding and the nowrap default made them wider than the phone. */
  .chip {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    height: auto;
  }

  /* The Hrs kit's own blocks: the export panel lays out a row of controls and
     an audit line, the section wrapper holds sub-tables, and Conversion's stat
     tiles are a fixed multi-column strip. All shrink rather than push. */
  .hrs-export, .hrs-section, .hrs-card { min-width: 0; max-width: 100%; }
  .hrs-export { flex-wrap: wrap; }
  .hrs-export__row { flex-wrap: wrap; gap: 8px; }
  /* The row already wrapped; its children did not. Each note is an inline-flex
     box holding a whole sentence, so it stayed on one line and carried the row
     past the viewport on Summary, Daily and Daily Performance. */
  .hrs-export__limit,
  .hrs-export__gate,
  .hrs-export__note {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }

  /* Explanatory copy quotes real identifiers — permission strings, table names,
     filenames — inside <code>. Those are unbreakable tokens by default, which
     is what pushed the Explainer boxes on Deposit methods and Bet from
     backoffice past the edge. Let them break on a phone; they stay intact on
     any screen wide enough to hold them. */
  code { overflow-wrap: anywhere; word-break: break-word; }

  /* `.hss-idcell__nm` is `white-space: nowrap` + ellipsis, which is right on a
     wide table and wrong in a stacked mobile cell — the ellipsis never kicks in
     because the cell has no width to clip against. Let it wrap instead. */
  .hss-idcell__nm { white-space: normal; overflow: visible; overflow-wrap: anywhere; }

  /* Remaining wide blocks: PayBO's Development cards and Frontend preview lay
     out fixed multi-column grids, and Bet-from-backoffice's coupon builder is a
     wide two-pane form. None can shrink below their tracks, so they scroll
     inside themselves rather than dragging the page. */
  .paybo-devcard, .hsb, .page > div[style*="grid-template-columns"] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hsd-detail, .lu-c-url, .lu-url-cell {
    min-width: 0;
    overflow-wrap: anywhere;
    flex-wrap: wrap;
  }

  /* The last offenders are inline-styled grids inside the protected PayBO
     screens — `1fr 200px 200px` on Frontend, `repeat(auto-fill, minmax(360px,
     1fr))` on Settings. A 360px minimum cannot fit a 322px content box, and an
     inline style outranks any stylesheet rule without `!important`.
     One column is the right answer at this width for all of them, so this is
     applied bluntly rather than per-screen — it only bites below 640px, where
     side-by-side has already stopped being readable. */
  #root [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #root [style*="grid-template-columns"] > * { min-width: 0; }
}

/* Only right on a true phone, so kept out of the 860px block above.
   Measured both ways: with this rule 6 routes retain an inner overflow, without
   it 8 (and /payments/frontend is 292px over instead of 66). The
   /payments/fees and /payments/reports regression from 24px to 141px belongs to
   the inline-grid rule above, not to this one — checked separately before
   keeping both. */
@media (max-width: 640px) {
  #root .page [style*="display: flex"],
  #root .page [style*="display:flex"] {
    flex-wrap: wrap;
  }
  .cv-stat, .hss-idcell__nm, .hsb { min-width: 0; overflow-wrap: anywhere; }

  /* Tab strips become a horizontal scroller instead of clipping. */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > * { flex: 0 0 auto; }
}
/* ==== END PlatformMobilePagePrimitives ==== */

/* ---------------------------------------------------------------- Connection
   Only the /dev/connection screen uses these. Kept additive, tokens only, so
   the two themes stay in charge of the palette. */
.sbc-verdict{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--panel);font-size:13.5px;font-weight:500;margin-bottom:14px}
.sbc-verdict--good{border-color:var(--ok,#2e7d5b);color:var(--ok,#2e7d5b)}
.sbc-verdict--warn{border-color:var(--warn,#b47b12);color:var(--warn,#b47b12)}
.sbc-verdict--bad{border-color:var(--danger,#c2384a);color:var(--danger,#c2384a)}
.sbc-good{color:var(--ok,#2e7d5b);font-weight:600}
.sbc-bad{color:var(--danger,#c2384a);font-weight:600}
.sbc-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 18px;padding:4px 2px}
.sbc-kv>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.sbc-kv span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;opacity:.6}
.sbc-kv b{font-size:13px;font-weight:600;word-break:break-all}
.sbc-kv em{opacity:.55;font-weight:400}
.sbc-signin__row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.sbc-signin__row label{display:flex;flex-direction:column;gap:4px;flex:1 1 200px;min-width:0}
.sbc-signin__row label span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;opacity:.6}
.sbc-signin__row input{padding:8px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--input-bg,var(--panel));color:inherit;font:inherit}
.sbc-signin__err{margin-top:10px;padding:9px 12px;border-radius:8px;font-size:12.5px;
  border:1px solid var(--danger,#c2384a);color:var(--danger,#c2384a)}
.sbc-signin__note{margin-top:10px;font-size:12px;opacity:.7;line-height:1.55}