/* Svitgrid docs theme.
 *
 * White ground, JetBrains Mono at every size, amber used sparingly. There is
 * deliberately NO dark mode and no second palette: the white page is a product
 * decision, not an oversight.
 *
 * Two rules the whole file obeys:
 *   - Amber #F59E0B never carries text (2.15:1 on white). Text that must read
 *     as "primary" uses --color-primary-text (#B45309).
 *   - Every directional rule uses logical properties, because Arabic is RTL.
 */

:root {
  --color-primary: #F59E0B;
  --color-primary-light: #FCD34D;
  --color-primary-dark: #D97706;
  /* Amber that is READ. #F59E0B is 2.15:1 on white and may never carry text. */
  --color-primary-text: #B45309;
  --color-bg: #FFFFFF;
  --color-bg-alt: #FAF8F4;
  --color-bg-code: #F3EFE8;
  --color-border: #E9E4DA;
  --color-text: #15120E;
  --color-text-secondary: #57514A;
  /* 4.74:1 on white. #8B8378 measured 3.74:1 and this redesign put it on
     breadcrumbs, group labels, the rail title and the copy button. */
  --color-text-muted: #7A7266;
  --color-sidebar-active: #FEF6E7;
  --shadow-xl: 0 20px 48px rgba(21, 18, 14, 0.18);
  /* One family at every size, matching the landing pages. */
  --font-primary: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  --font-display: var(--font-primary);
  --font-mono: var(--font-primary);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* A focus ring is a non-text UI component and owes 3:1. Amber #F59E0B is
   2.15:1 on white, so the ring uses the readable amber instead. */
:focus-visible {
  outline: 2px solid var(--color-primary-text);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Offscreen via clip, not a negative offset: `left: -9999px` pushes the
   document box outward in RTL and gives the page a horizontal scrollbar. */
.skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; z-index: 200;
  background: var(--color-primary); color: #000;
}
.skip:focus {
  width: auto; height: auto; clip-path: none; overflow: visible;
  inset-inline-start: 8px; top: 8px; padding: 10px 16px; border-radius: 6px;
}

/* Top bar */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 56px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; padding: 0 24px; gap: 16px;
}
.topbar__logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--color-text);
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
}
.topbar__mark { display: block; width: 28px; height: 28px; border-radius: 6px; }
.topbar__badge {
  font-size: 0.7rem; font-weight: 600; text-decoration: none;
  background: var(--color-bg-alt); color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 2px 8px; border-radius: 4px;
}
.topbar__badge:hover { color: var(--color-primary-text); border-color: var(--color-primary); }
.topbar__spacer { flex: 1; }
.topbar__link {
  color: var(--color-text-secondary); text-decoration: none;
  font-size: 0.875rem; font-weight: 500; white-space: nowrap;
}
.topbar__link:hover { color: var(--color-primary-text); }
.topbar__burger { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.topbar__burger svg { width: 24px; height: 24px; color: var(--color-text); }

/* Search button in the top bar. The field itself lives in the modal. */
.searchbtn {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px;
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: 8px; cursor: pointer; color: var(--color-text-muted);
  font: 400 0.875rem var(--font-primary); width: min(260px, 30vw);
}
.searchbtn span { flex: 1; text-align: start; overflow: hidden; white-space: nowrap; }
.searchbtn:hover { border-color: var(--color-primary); color: var(--color-text-secondary); }
.searchbtn__kbd {
  font: 600 0.7rem var(--font-primary); border: 1px solid var(--color-border);
  border-radius: 4px; padding: 1px 5px; background: var(--color-bg);
}

/* Language switcher */
.langpick { position: relative; }
.langpick__btn {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  background: none; border: 1px solid var(--color-border); border-radius: 8px;
  color: var(--color-text-secondary); font: 500 0.875rem var(--font-primary);
  cursor: pointer; white-space: nowrap;
}
.langpick__btn:hover { color: var(--color-primary-text); border-color: var(--color-primary); }
.langpick__menu {
  display: none; position: absolute; inset-inline-end: 0; top: 40px; z-index: 120;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  padding: 6px; min-width: 170px; max-height: 70vh; overflow: auto;
}
.langpick__menu.open { display: block; }
.langpick__menu a {
  display: block; padding: 7px 12px; border-radius: 6px;
  color: var(--color-text-secondary); text-decoration: none; font-size: 0.875rem;
}
.langpick__menu a:hover { background: var(--color-bg-alt); color: var(--color-text); }
.langpick__menu a[aria-current] {
  color: var(--color-primary-text); font-weight: 600; background: var(--color-sidebar-active);
}

/* Layout: sidebar | content | contents rail */
.layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 232px;
  gap: 0;
  max-width: 1440px;
  margin-inline: auto;
  padding-top: 56px;
}

/* Sidebar — white, hairline, no beige slab */
.sidebar {
  background: var(--color-bg);
  border-inline-end: 1px solid var(--color-border);
  position: sticky; top: 56px; align-self: start;
  height: calc(100vh - 56px); overflow-y: auto;
  padding: 28px 16px 64px; font-size: 0.8125rem;
}
details.sidebar__group { margin-bottom: 4px; }
details.sidebar__group > summary {
  list-style: none; cursor: pointer;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted);
  padding: 8px 10px; border-radius: 6px;
}
details.sidebar__group > summary::-webkit-details-marker { display: none; }
details.sidebar__group > summary:hover { background: var(--color-bg-alt); color: var(--color-text-secondary); }
.sidebar__items { display: flex; flex-direction: column; padding-block: 2px; }
.sidebar__link {
  display: block; padding: 6px 10px; border-radius: 6px;
  color: var(--color-text-secondary); text-decoration: none; line-height: 1.45;
}
.sidebar__link:hover { background: var(--color-bg-alt); color: var(--color-text); }
.sidebar__link.active {
  background: var(--color-sidebar-active); color: var(--color-primary-text); font-weight: 600;
}
.sidebar__scrim { display: none; }

/* Contents rail */
.rail {
  position: sticky; top: 88px; align-self: start;
  max-height: calc(100vh - 120px); overflow-y: auto;
  padding-block: 40px; padding-inline: 0 24px; font-size: 0.8rem;
}
.rail__title {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 10px;
}
.rail ul { list-style: none; }
.rail a {
  display: block; padding: 4px 0; color: var(--color-text-secondary);
  text-decoration: none; border-inline-start: 2px solid transparent;
  padding-inline-start: 12px; line-height: 1.5;
}
.rail a:hover { color: var(--color-text); }
.rail a.active { color: var(--color-primary-text); border-inline-start-color: var(--color-primary); }
/* A page with no h2 still reserves the column, so the measure never shifts. */
.rail--empty { padding: 0; }

/* Main content */
.content { max-width: 720px; padding: 40px 48px 96px; min-width: 0; }

/* Rhythm: more air ABOVE a heading than below it, so a heading reads as
   belonging to what follows rather than floating between two blocks. */
.content h1 {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
  line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 10px; color: var(--color-text);
}
.content h2 {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
  margin-top: 60px; margin-bottom: 14px; padding-top: 28px;
  border-top: 1px solid var(--color-border); color: var(--color-text);
}
.content h2:first-of-type { border-top: none; margin-top: 36px; padding-top: 0; }
.content h3 {
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600;
  margin-top: 40px; margin-bottom: 10px;
}
.content h4 { font-size: 0.95rem; font-weight: 700; margin: 26px 0 6px; color: var(--color-text-secondary); }
.content p { margin-bottom: 16px; color: var(--color-text-secondary); }
.content ul, .content ol {
  margin-bottom: 16px; padding-inline-start: 24px; color: var(--color-text-secondary);
}
.content ul ul { margin: 6px 0 2px; }
.content li { margin-bottom: 6px; }
.content strong { color: var(--color-text); }
.content a { color: var(--color-primary-text); text-underline-offset: 3px; }
.content a:hover { color: var(--color-primary-text); text-decoration-thickness: 2px; }
.content img { max-width: 100%; height: auto; border-radius: 8px; }

/* Anything the rail or a deep link jumps to has to clear the 56px top bar. */
section[id],
.content h1[id], .content h2[id], .content h3[id], .content h4[id] { scroll-margin-top: 76px; }

/* Phone screenshots are portrait and only 390px wide. Left at max-width:100%
   they are upscaled to the full content column, which makes a crisp capture
   look soft and pushes one step per screenful. Cap them at their natural width
   and centre them instead. */
/* Scoped to /docs/images/, not to one brand. The rule was written when Huawei
   was the only illustrated section, so the Anenji screenshots added alongside
   it rendered at their intrinsic 390px while everything around them scaled --
   the same regression, one directory later. Any future brand inherits it. */
.content img[src*="/docs/images/"] {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 1.25rem auto;
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.content code {
  font-family: var(--font-mono); font-size: 0.85em;
  background: var(--color-bg-code); padding: 2px 6px; border-radius: 4px;
}
/* Quieter than the inline-code beige: a block of it filled half the page. */
.content pre {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 16px 20px; overflow-x: auto; margin-bottom: 16px;
}
.content pre code { background: none; padding: 0; font-size: 0.85rem; }

pre { position: relative; }
.copy {
  position: absolute; top: 8px; inset-inline-end: 8px;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 4px; padding: 2px 8px; cursor: pointer;
  font: 500 0.7rem var(--font-mono); color: var(--color-text-muted); opacity: 0;
  transition: opacity 0.15s;
}
pre:hover .copy, .copy:focus { opacity: 1; }
.copy:hover { border-color: var(--color-primary); color: var(--color-text-secondary); }

blockquote {
  border-inline-start: 3px solid var(--color-border); padding-inline-start: 14px;
  margin: 0 0 16px; color: var(--color-text-muted);
}
blockquote p { margin-bottom: 6px; }

/* Callouts — original left-border style and colours */
.callout {
  padding: 16px 20px; border-radius: 8px; margin-bottom: 16px;
  border-inline-start: 4px solid; font-size: 0.9375rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout--info { background: #EFF6FF; border-color: #3B82F6; }
.callout--tip { background: #F0FDF4; border-color: #10B981; }
.callout--warn, .callout--warning { background: #FFFBEB; border-color: #F59E0B; }
.callout--danger { background: #FEF2F2; border-color: #EF4444; }
.callout__title { font-weight: 600; margin-bottom: 4px; color: var(--color-text); }

/* "In short" summary box */
.inshort {
  background: var(--color-sidebar-active);
  border: 1px solid var(--color-primary-light);
  border-radius: 8px; padding: 16px 20px; margin-bottom: 24px;
}
.inshort__label {
  display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--color-primary-text); margin-bottom: 4px;
}
.inshort p { margin: 0; color: var(--color-text); font-size: 1.0625rem; }

/* Collapsed deep-reference block */
.deep {
  border: 1px solid var(--color-border); border-radius: 8px;
  margin-bottom: 16px; background: var(--color-bg-alt);
}
.deep summary {
  cursor: pointer; padding: 12px 20px; font-weight: 600; font-size: 0.9375rem;
  color: var(--color-text-secondary); list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.deep summary::-webkit-details-marker { display: none; }
.deep summary::before { content: "\25B8"; color: var(--color-text-muted); }
.deep[open] summary::before { content: "\25BE"; }
.deep summary:hover { color: var(--color-text); }
.deep__body { padding: 4px 20px 8px; border-top: 1px solid var(--color-border); }
.deep__body > *:first-child { margin-top: 16px; }

/* Breadcrumbs */
.crumbs {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 0.75rem; color: var(--color-text-muted);
}
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-primary-text); }
.crumbs__sep { color: var(--color-border); }
.crumbs__group { color: var(--color-text-secondary); }

/* Previous / next */
.pager {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--color-border);
}
.pager__gap { flex: 1; }
.pager__link {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border: 1px solid var(--color-border); border-radius: 8px;
  color: var(--color-text-secondary); text-decoration: none; font-size: 0.8125rem;
}
.pager__link:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
.pager__arrow { color: var(--color-text-muted); }
/* U+2190/2192 are Bidi_Mirrored, but only inside an RTL run; these sit in
   their own span, so mirror them explicitly instead of hoping. */
html[dir="rtl"] .pager__arrow { display: inline-block; transform: scaleX(-1); }

/* Overview card grid */
.cards { margin-top: 56px; }
.cards__title {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 16px;
  border-top: none; padding-top: 0; margin-top: 0; font-family: var(--font-primary);
}
.cards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cards__card { border: 1px solid var(--color-border); border-radius: 10px; padding: 18px 20px; }
.cards__card h2 {
  font-size: 0.9rem; margin: 0 0 10px; border-top: none; padding-top: 0;
  font-family: var(--font-primary); font-weight: 700;
}
.cards__card ul { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 0; margin: 0; }
.cards__card li { margin: 0; }
.cards__card a { font-size: 0.8125rem; color: var(--color-text-secondary); text-decoration: none; }
.cards__card a:hover { color: var(--color-primary-text); }

/* Was this page helpful? */
.helpful {
  display: flex; align-items: center; gap: 12px; margin-top: 48px;
  font-size: 0.8125rem; color: var(--color-text-muted);
}
.helpful__q { color: var(--color-text-muted); }
.helpful__btn {
  background: none; border: 1px solid var(--color-border); border-radius: 6px;
  padding: 4px 10px; cursor: pointer; font-size: 0.9rem;
  font-family: var(--font-primary); line-height: 1.4;
}
.helpful__btn:hover { border-color: var(--color-primary); }

/* Table */
/* Scroll affordance, CSS only — no script, no pseudo-elements.
   `.table-wrap` IS the `overflow-x: auto` scroller, so anything positioned
   relative to it (a pseudo-element, an absolutely-positioned child) is
   itself scrolled content: it travels away with the table instead of
   staying anchored to the viewport edge. A first version used
   `::before`/`::after` toggled by scroll position and got exactly that
   wrong — correct only at scrollLeft 0, a smear over the table cells at any
   other offset. Background layers do not have this problem, because
   `background-attachment` controls this directly:
     - two solid "cover" layers, `attachment: local` — painted relative to
       the scrolled CONTENT, glued to its two true ends, so they scroll
       away together with the table.
     - two "shadow" layers, `attachment: scroll` — painted relative to the
       scrollport itself, so they stay fixed at the wrap's own left/right
       edge regardless of scroll position.
   At an edge with no more content, the cover sits exactly on top of the
   shadow (hiding it). Scroll that edge's content out of view and its cover
   goes with it, uncovering the shadow underneath — the fade "appears"
   purely as a side effect of which layer the browser happens to be
   painting where, never a class the page has to compute.
   No `html[dir="rtl"]` override, and none is needed: the mechanism reads
   purely off `scrollLeft` reaching its two physical extremes (0 and
   `scrollWidth - clientWidth`), which is direction-agnostic — a physical
   left/right pair, not a logical start/end one. RTL does flip WHICH edge
   shows a shadow at rest (measured on a blank isolated harness table:
   rest-state RTL shades physical left, mirroring LTR's physical right,
   because RTL's column 1 sits at rest against the right edge and hidden
   columns trail off left) — but that flip falls out of `scrollLeft`
   itself; there is no separate rule left to get backwards. See the report
   for the harness measurements at scrollLeft 0 / mid / max in both
   directions that confirmed this. */
.table-wrap {
  overflow-x: auto; margin-bottom: 16px;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
  background-position: left, right, left, right;
  background-attachment: local, local, scroll, scroll;
  background-image:
    linear-gradient(to right, var(--color-bg) 45%, rgba(255,255,255,0)),
    linear-gradient(to left, var(--color-bg) 45%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(21,18,14,0.14), rgba(21,18,14,0)),
    linear-gradient(to left, rgba(21,18,14,0.14), rgba(21,18,14,0));
}
.content table {
  width: 100%; border-collapse: collapse; margin-bottom: 0; font-size: 0.9375rem;
}
.content th, .content td {
  padding: 10px 16px; text-align: start; border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.content th {
  font-weight: 600; color: var(--color-text); background: var(--color-bg-alt);
  white-space: nowrap;
}
.content td { color: var(--color-text-secondary); }

/* Page description */
.page-desc { font-size: 1.125rem; color: var(--color-text-muted); margin-bottom: 32px; }

/* Search modal */
.modal { position: fixed; inset: 0; z-index: 300; display: flex; justify-content: center; }
/* `hidden` loses to the rule above without this, so the modal would ship open. */
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(21,18,14,0.35); }
.modal__panel {
  position: relative; margin-top: 12vh; width: min(620px, 92vw); max-height: 70vh;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 12px; box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal__field {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--color-border); color: var(--color-text-muted);
}
.modal__field input {
  flex: 1; border: 0; background: none; outline: none; min-width: 0;
  font: 400 1rem var(--font-primary); color: var(--color-text);
}
/* `outline: none` above is 0,1,1 and beats the bare :focus-visible rule, which
   left the overlay's primary control with no ring at all. */
.modal__field input:focus-visible {
  outline: 2px solid var(--color-primary-text); outline-offset: 2px; border-radius: 4px;
}
.modal__field kbd {
  font: 600 0.65rem var(--font-primary); border: 1px solid var(--color-border);
  border-radius: 4px; padding: 1px 5px;
}
.modal__results { overflow-y: auto; padding: 8px; }
.modal__group {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 10px 10px 4px; margin: 0;
}
.modal__hint { padding: 24px 12px; color: var(--color-text-muted); font-size: 0.85rem; margin: 0; }
.result {
  display: block; padding: 10px 12px; border-radius: 8px;
  text-decoration: none; color: var(--color-text);
}
.result:hover, .result.selected { background: var(--color-sidebar-active); }
.result__t { display: block; font-weight: 600; font-size: 0.875rem; }
.result__s { display: block; font-size: 0.78rem; color: var(--color-text-secondary); margin-top: 2px; }
.result mark { background: var(--color-primary-light); color: inherit; border-radius: 2px; }

/* Screenshots */
.screenshot {
  display: block; max-width: 280px; border-radius: 16px;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin: 20px 0 24px;
}
.screenshot-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 20px 0 24px; }
.screenshot-row .screenshot { margin: 0; }

/* ------------------------------------------------------------------ mobile */

/* Below 1200 the rail cannot be a column any more. Auto-placement would drop
   it under the sidebar, so both it and the content are placed explicitly and
   the rail becomes a compact card above the page. */
@media (max-width: 1200px) {
  .layout { grid-template-columns: 264px minmax(0, 1fr); }
  .sidebar { grid-column: 1; grid-row: 1 / span 2; }
  .rail {
    grid-column: 2; grid-row: 1; align-self: stretch;
    position: static; max-height: none;
    margin: 32px 48px 0; max-width: 624px; padding: 12px 16px;
    border: 1px solid var(--color-border); border-radius: 10px;
  }
  .rail ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
  .rail a { border-inline-start: 0; padding-inline-start: 0; padding-block: 2px; }
  .rail a.active { border-inline-start-color: transparent; }
  .content { grid-column: 2; grid-row: 2; padding-top: 24px; }
  .rail--empty { display: none; }
  .rail--empty ~ .content { padding-top: 40px; }
}

@media (max-width: 1040px) {
  .topbar__link { display: none; }
}

@media (max-width: 768px) {
  .topbar { gap: 10px; padding: 0 14px; }
  .topbar__burger { display: block; }
  .topbar__badge { display: none; }
  .searchbtn { width: auto; padding: 0 9px; }
  .searchbtn span, .searchbtn__kbd { display: none; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset-block: 56px 0; inset-inline-start: 0; z-index: 99;
    width: 280px; transform: translateX(-102%); transition: transform 0.2s ease;
    background: var(--color-bg);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  }
  html[dir="rtl"] .sidebar { transform: translateX(102%); }
  .sidebar.open { transform: none; }
  .sidebar__scrim.open {
    display: block; position: fixed; inset: 56px 0 0 0;
    background: rgba(0,0,0,0.4); z-index: 98;
  }
  .rail { grid-column: 1; grid-row: 1; margin: 20px 20px 0; }
  .content { grid-column: 1; grid-row: 2; padding: 20px 20px 64px; }
  .rail--empty ~ .content { padding-top: 28px; }
  .pager { flex-direction: column; }
  .pager__gap { display: none; }

  /* Every px of cell padding is 2x-4x-ed across a table (once per side, per
     column), so it is the cheapest place to buy back width on a phone
     screen — well before shrinking body text. */
  .content th, .content td { padding: 8px 8px; }
  /* Desktop keeps header text on one line; on a phone that forces a wide
     word like "Svitgrid Gateway" to demand its own column width regardless
     of how little the padding is. Letting it wrap is what actually buys
     back the space. */
  .content th { white-space: normal; }
  .content th, .content td { overflow-wrap: break-word; }
  /* Auto layout sizes every column to its widest UNWRAPPED content, so one
     long cell can push the table past the viewport even after every other
     lever above. Fixed layout caps the table at the wrap's own width and
     splits it evenly instead — the remaining text still wraps, it just no
     longer decides the table's width.
     Only for tables of 4 columns or fewer (the how-it-works comparison is
     3 data columns plus a label column) — the selector below matches "no
     5th `<th>`", i.e. 1-4 columns, not "exactly 4"; a 3-or-fewer-column
     table gets the same treatment, it just has not been the one observed
     to need it. A wider reference table (the supported-inverters brand
     list is 5, account settings run to 6) has enough genuinely-independent
     content that splitting it evenly would cram every cell into a sliver
     and wrap each into a wall of lines — worse than the horizontal scroll
     it already has with the scroll-shadow background above. */
  .content table:not(:has(thead tr th:nth-child(5))) {
    table-layout: fixed; width: 100%;
  }
}

/* A 4-column comparison table (see how-it-works) is the tightest fit on the
   smallest phones this site supports. Narrowing further than the 768px step
   above so an unlabelled first column plus 3 data columns clears ~360-390px
   without scrolling. */
@media (max-width: 480px) {
  .content { padding-inline: 14px; }
  .content th, .content td { padding: 6px 6px; }
  .content table { font-size: 0.8125rem; }
}