/*
 * The palette and the boxes are lifted from src/index.css, so the site and the
 * app it advertises are visibly the same piece of software.
 */

:root {
  --bg-base: #e5e5e5;
  --bg-panel: #f5f5f5;
  --bg-input: #ffffff;
  --bg-inverted: #2b2b2b;
  --border-light: #a3a3a3;
  --border-dark: #111111;
  --text-main: #111111;
  --text-muted: #737373;
  --text-inverted: #ffffff;
  --hover-bg: #d4d4d4;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --page: 1140px;
}

:root[data-theme="dark"] {
  --bg-base: #121212;
  --bg-panel: #1e1e1e;
  --bg-input: #121212;
  --bg-inverted: #2d2d2d;
  --border-light: #333333;
  --border-dark: #555555;
  --text-main: #e0e0e0;
  --text-muted: #888888;
  --hover-bg: #2a2a2a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base: #121212;
    --bg-panel: #1e1e1e;
    --bg-input: #121212;
    --bg-inverted: #2d2d2d;
    --border-light: #333333;
    --border-dark: #555555;
    --text-main: #e0e0e0;
    --text-muted: #888888;
    --hover-bg: #2a2a2a;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background-color: var(--bg-base);
  color: var(--text-main);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 0.3s,
    color 0.3s;
}

img,
svg {
  max-width: 100%;
}

a {
  color: inherit;
}

/* ---------- shared furniture ---------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.section {
  padding: 88px 0;
}

.section + .section {
  border-top: 3px solid var(--border-light);
}

.section-head {
  max-width: 640px;
  margin-bottom: 44px;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 800;
}

h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

h3 {
  font-size: 18px;
  font-weight: 700;
}

p {
  margin: 0;
}

.lede {
  font-size: 18px;
  color: var(--text-muted);
  font-weight: 500;
}

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  display: block;
}

/* ---------- the app's boxes ---------- */

.box {
  background-color: var(--bg-panel);
  border: 3px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--border-light);
  transition:
    background-color 0.3s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 12px;
  border: 3px solid var(--border-dark);
  background-color: var(--bg-inverted);
  color: var(--text-inverted);
  box-shadow: 2px 2px 0 var(--border-dark);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.btn-ghost {
  background-color: transparent;
  color: var(--text-main);
  border-color: var(--border-light);
  box-shadow: 2px 2px 0 var(--border-light);
}

.btn-ghost:hover {
  background-color: var(--hover-bg);
}

.btn .icon {
  width: 18px;
  height: 18px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 2px solid var(--border-light);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.chip .icon {
  width: 14px;
  height: 14px;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--bg-panel);
  border-bottom: 3px solid var(--border-light);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-right: auto;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-nav a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--text-main);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  border: 2px solid var(--border-light);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.theme-toggle:hover {
  background-color: var(--hover-bg);
  color: var(--text-main);
}

.theme-toggle .icon {
  width: 18px;
  height: 18px;
}

.theme-toggle .on-dark {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .on-dark {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .on-light {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .on-dark {
    display: block;
  }
  :root:not([data-theme="light"]) .theme-toggle .on-light {
    display: none;
  }
}


/* ---------- hero ---------- */

.hero {
  padding: 76px 0 0;
}

.hero-inner {
  display: grid;
  gap: 34px;
  justify-items: start;
  max-width: 780px;
}

.hero h1 {
  max-width: 15ch;
}

.hero .lede {
  max-width: 56ch;
  font-size: 19px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.hero-shot {
  margin-top: 56px;
}

.shot {
  display: block;
  width: 100%;
  /* Without this the height attribute on the img pins the box and the drawing
     letterboxes inside it. */
  height: auto;
  border-radius: 14px;
}

.shot-frame {
  padding: 0;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 10px 10px 0 var(--border-light);
  line-height: 0;
}

/* ---------- claims strip ---------- */

.claims {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 34px 0 0;
}

.claim {
  padding: 20px;
  display: grid;
  gap: 8px;
}

.claim .icon {
  width: 22px;
  height: 22px;
  color: var(--text-main);
}

.claim strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.claim span {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ---------- feature grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.card {
  padding: 26px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.card:hover {
  border-color: var(--text-main);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--border-light);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background-color: var(--bg-inverted);
  color: var(--text-inverted);
  margin-bottom: 4px;
}

.card p {
  font-size: 14.5px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ---------- spotlights ---------- */

.spotlight {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: center;
}

.spotlight + .spotlight {
  margin-top: 88px;
}

/* Flipped, the picture moves left; it keeps the wider half of the row. */
.spotlight.flip {
  grid-template-columns: 7fr 5fr;
}

.spotlight.flip .spotlight-copy {
  order: 2;
}

.spotlight-copy {
  display: grid;
  gap: 18px;
  align-content: start;
}

.spotlight-copy p {
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 500;
}

.ticks {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ticks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  font-weight: 600;
}

.ticks .icon {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  color: var(--text-main);
}

/* ---------- tables ---------- */

.specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.spec {
  padding: 0;
  overflow: hidden;
}

.spec header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 24px;
  background-color: var(--hover-bg);
  border-bottom: 3px solid var(--border-light);
}

.spec header h3 {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
}

.spec header span {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.spec td {
  padding: 13px 24px;
  font-size: 14px;
  border-bottom: 2px solid var(--border-light);
  vertical-align: top;
}

.spec tr:last-child td {
  border-bottom: 0;
}

.spec td:first-child {
  width: 110px;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.spec td:last-child {
  font-weight: 500;
}

.note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  max-width: 78ch;
}

/* ---------- download page ---------- */

.downloads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.dl {
  padding: 30px 26px;
  display: grid;
  gap: 16px;
  align-content: start;
  text-align: center;
  justify-items: center;
}

.dl.recommended {
  border-color: var(--text-main);
  box-shadow: 6px 6px 0 var(--border-light);
}

.dl .os-mark {
  width: 58px;
  height: 58px;
  color: var(--text-main);
}

.dl h3 {
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dl .meta {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
  min-height: 20px;
}

.dl .btn {
  width: 100%;
}

.dl .alt {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.dl .alt a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid var(--border-light);
  padding-bottom: 1px;
}

.dl .alt a:hover {
  color: var(--text-main);
  border-color: var(--text-main);
}

.for-you {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: 8px;
  background-color: var(--bg-inverted);
  color: var(--text-inverted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dl {
  position: relative;
}

.steps {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
}

.step {
  padding: 26px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.step .os-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step .os-line svg {
  width: 20px;
  height: 20px;
}

.step h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.step p {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  background-color: var(--hover-bg);
  border-radius: 6px;
  padding: 2px 6px;
  font-weight: 600;
  color: var(--text-main);
  /* Broken over two lines the tinted box looks like two separate ones. */
  white-space: nowrap;
}

.callout {
  padding: 26px 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.callout .icon {
  width: 26px;
  height: 26px;
  margin-top: 2px;
  color: var(--text-main);
}

.callout p {
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 500;
}

.callout strong {
  color: var(--text-main);
}

/* ---------- closing call ---------- */

.closer {
  padding: 64px 48px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 22px;
  background-color: var(--bg-inverted);
  border-color: var(--border-dark);
  box-shadow: 8px 8px 0 var(--border-dark);
  color: var(--text-inverted);
}

.closer h2 {
  color: var(--text-inverted);
  max-width: 18ch;
}

.closer p {
  color: #b5b5b5;
  max-width: 52ch;
  font-weight: 500;
}

.closer .btn {
  background-color: var(--bg-panel);
  color: var(--text-main);
  border-color: var(--border-light);
  box-shadow: 2px 2px 0 var(--border-light);
}

.closer img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 3px solid var(--border-light);
  background-color: var(--bg-panel);
  padding: 38px 0;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  align-items: center;
}

.site-footer .brand {
  margin-right: auto;
  font-size: 14px;
}

.site-footer .brand img {
  width: 28px;
  height: 28px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.site-footer a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text-main);
}

.site-footer small {
  width: 100%;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ---------- narrower windows ---------- */

@media (max-width: 960px) {
  .grid,
  .downloads,
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .claims {
    grid-template-columns: repeat(2, 1fr);
  }

  .specs {
    grid-template-columns: 1fr;
  }

  .spotlight {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .spotlight.flip .spotlight-copy {
    order: 0;
  }

  .section {
    padding: 64px 0;
  }
}

/* Below this the header's own row is what overflows, not the content. */
@media (max-width: 420px) {
  .site-header .wrap {
    gap: 10px;
    padding: 0 14px;
  }

  .brand {
    font-size: 14px;
    letter-spacing: 0.1em;
    gap: 8px;
  }

  .site-nav {
    gap: 16px;
  }

  .brand img {
    width: 28px;
    height: 28px;
  }

  .theme-toggle {
    width: 34px;
    height: 34px;
  }

}

@media (max-width: 680px) {
  .grid,
  .downloads,
  .steps,
  .claims {
    grid-template-columns: 1fr;
  }

  .site-nav a:not(.always) {
    display: none;
  }

  /* A whole command no longer fits on one line, and overflowing the page is
     worse than a tinted box split across two. */
  code {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .hero {
    padding-top: 52px;
  }

  .closer {
    padding: 44px 26px;
  }
}

/* ---------- the language menu ---------- */

/*
 * A <details> rather than a scripted menu, so it opens on a page whose
 * JavaScript has not arrived, or is not coming.
 */
.lang {
  position: relative;
  flex: none;
}

.lang > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 2px solid var(--border-light);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.15s,
    background-color 0.15s;
}

/* Both are needed: one browser draws a triangle from each. */
.lang > summary {
  list-style: none;
}

.lang > summary::-webkit-details-marker {
  display: none;
}

.lang > summary:hover,
.lang[open] > summary {
  background-color: var(--hover-bg);
  color: var(--text-main);
}

.lang .icon,
.lang .flag {
  flex: none;
}

.lang ul {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 170px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background-color: var(--bg-panel);
  border: 2px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.lang li a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.lang li a:hover {
  background-color: var(--hover-bg);
  color: var(--text-main);
}

.lang li a[aria-current="true"] {
  color: var(--text-main);
  font-weight: 800;
}

/* ---------- the page that is not there ---------- */

.hero.lost {
  padding: 120px 0 140px;
}

.hero.lost .eyebrow {
  font-size: 13px;
}

/* ---------- right to left ---------- */

/*
 * Arabic is the only one, and the stylesheet only has two rules that care
 * which way the page runs.
 */
[dir="rtl"] .brand,
[dir="rtl"] .site-footer .brand {
  margin-right: 0;
  margin-inline-end: auto;
}

/* The language name is what makes the button wide, and the header runs out of
   room before the content does. */
@media (max-width: 860px) {
  .lang > summary span {
    display: none;
  }

  .lang > summary {
    width: 38px;
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .lang > summary {
    width: 34px;
    height: 34px;
  }
}

/* ---------- a header that survives translation ---------- */

/*
 * German and Russian labels run half as long again as the English ones. The
 * row used to shrink the brand until the wordmark ran underneath the first
 * link, so nothing in it shrinks below its own text any more: the gaps close
 * up first, and the links drop out at a width where they no longer fit.
 */
.site-header .brand,
.site-header .site-nav,
.site-header .lang,
.site-header .theme-toggle {
  flex: none;
}

.site-nav a {
  white-space: nowrap;
}

@media (max-width: 1040px) {
  .site-header .wrap {
    gap: 12px;
  }

  .site-nav {
    gap: 15px;
  }

  .site-nav a {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
}

/* The anchors go before the brand does. Downloading is the point of the page,
   so that one stays. */
@media (max-width: 900px) {
  .site-nav a:not(.always) {
    display: none;
  }
}

/* ---------- the wiki ---------- */

.wiki {
  padding: 42px 0 88px;
}

.wiki-wrap {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 54px;
  align-items: start;
}

/* The sidebar follows the page down, clearing the header, which is itself
   sticky and 68px tall. */
.wiki-nav {
  position: sticky;
  top: 88px;
}

.wiki-home {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--border-light);
}

.wiki-home .icon {
  width: 18px;
  height: 18px;
}

.wiki-nav .eyebrow {
  margin: 24px 0 8px;
}

.wiki-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.wiki-nav li a {
  display: block;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.wiki-nav li a:hover {
  background-color: var(--hover-bg);
  color: var(--text-main);
}

.wiki-nav li a[aria-current="page"] {
  background-color: var(--bg-inverted);
  color: var(--text-inverted);
}

.wiki-body {
  max-width: 750px;
}

/* The two full model tables are data, not prose: the 750px reading width made
   for paragraphs is exactly what forces a table six columns wide into a
   horizontal scrollbar it does not need on an ordinary desktop window. */
.wiki-body:has(.model-table) {
  max-width: none;
}

.wiki-body h1 {
  margin-bottom: 12px;
}

.wiki-body > .lede {
  margin-bottom: 30px;
}

.wiki-body h2 {
  font-size: 23px;
  margin: 46px 0 14px;
}

.wiki-body h3 {
  font-size: 17px;
  margin: 28px 0 10px;
}

.wiki-body p {
  margin: 0 0 16px;
}

.wiki-body .ticks {
  margin: 0 0 22px;
}

/* The marker is drawn rather than written, so a translated list does not carry
   an icon element in every one of its items. */
.wiki-body .ticks li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background-color: var(--text-muted);
}

.wiki-body p a,
.wiki-body li a,
.wiki-body td a {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* A table is the one thing here that cannot be made narrower, so it scrolls
   inside its own box rather than widening the page on a phone. */
.wiki-table {
  overflow-x: auto;
  margin: 0 0 24px;
  border: 3px solid var(--border-light);
  border-radius: 12px;
}

.wiki-table table {
  margin: 0;
}

.wiki-body th,
.wiki-body td {
  padding: 11px 16px;
  text-align: start;
  font-size: 14px;
  font-weight: 600;
  vertical-align: top;
  border-bottom: 2px solid var(--border-light);
}

.wiki-body th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background-color: var(--bg-panel);
  white-space: nowrap;
}

.wiki-body tr:last-child td {
  border-bottom: 0;
}

.wiki-body pre {
  margin: 0 0 22px;
  padding: 16px 18px;
  overflow-x: auto;
  background-color: var(--bg-panel);
  border: 3px solid var(--border-light);
  border-radius: 12px;
}

.wiki-body pre code {
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  white-space: pre;
}

.wiki-shot {
  margin: 26px 0 30px;
}

.wiki-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--border-light);
  border-radius: 12px;
}

/* The interactive full model table: a toolbar of filters above a table that scrolls inside its
   own box, the same way an ordinary wiki table does on a phone. */
.model-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.model-table-search {
  flex: 1 1 220px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
  background-color: var(--bg-panel);
  border: 3px solid var(--border-light);
  border-radius: 10px;
}

.model-table-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.model-table-filters button {
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background-color: var(--bg-panel);
  border: 2px solid var(--border-light);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.model-table-filters button:hover {
  background-color: var(--hover-bg);
}

/* Without this, an unfocused browser default (a solid gold fill in some
   Windows setups) stands out as if it were a broken, half-selected state. */
.model-table-filters button:focus-visible,
.model-table-search:focus-visible,
.model-table-grid th:focus-visible {
  outline: 2px solid var(--text-main);
  outline-offset: 2px;
}

.model-table-filters button[aria-pressed="true"] {
  color: var(--text-inverted);
  background-color: var(--bg-inverted);
  border-color: var(--bg-inverted);
}

.model-table-count {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.model-table-scroll {
  overflow-x: auto;
  border: 3px solid var(--border-light);
  border-radius: 12px;
}

.model-table-grid {
  width: 100%;
  min-width: 620px;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0;
}

.model-table-grid th,
.model-table-grid td {
  padding: 10px 16px;
  text-align: start;
  font-size: 13px;
  font-weight: 600;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: break-word;
  border-bottom: 2px solid var(--border-light);
}

/* Model, parameters, best use, hardware, supports, notes: the last is the one
   worth the most room, so the row grows down rather than the table growing
   past its box and hiding the very column somebody scrolled in to read. */
.model-table-grid th:nth-child(1),
.model-table-grid td:nth-child(1) {
  width: 14%;
}
.model-table-grid th:nth-child(2),
.model-table-grid td:nth-child(2) {
  width: 12%;
}
.model-table-grid th:nth-child(3),
.model-table-grid td:nth-child(3) {
  width: 13%;
}
.model-table-grid th:nth-child(4),
.model-table-grid td:nth-child(4) {
  width: 9%;
}
.model-table-grid th:nth-child(5),
.model-table-grid td:nth-child(5) {
  width: 13%;
}
.model-table-grid th:nth-child(6),
.model-table-grid td:nth-child(6) {
  width: 39%;
}

.model-table-grid th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background-color: var(--bg-panel);
  cursor: pointer;
  user-select: none;
}

.model-table-grid th[aria-sort]::after {
  content: " \2191";
}

.model-table-grid th[aria-sort="descending"]::after {
  content: " \2193";
}

.model-table-grid tr:last-child td {
  border-bottom: 0;
}

.model-table-grid tbody tr:hover {
  background-color: var(--hover-bg);
}

.model-table.model-table-failed::after {
  content: "Could not load the model list.";
  display: block;
  padding: 20px;
  font-weight: 700;
  color: var(--text-muted);
}

.wiki-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 36px;
}

.wiki-card {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  text-decoration: none;
}

.wiki-card h3 {
  margin: 0;
  font-size: 16px;
}

.wiki-card p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
}

.wiki-card:hover {
  border-color: var(--border-dark);
}

.wiki-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 48px;
  padding-top: 26px;
  border-top: 3px solid var(--border-light);
}

.wiki-step {
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  border: 3px solid var(--border-light);
  border-radius: 12px;
  text-decoration: none;
}

.wiki-step:hover {
  border-color: var(--border-dark);
}

.wiki-step span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wiki-step strong {
  font-size: 15px;
}

/* On its own, the next link stays on the side it points to. */
.wiki-step-next {
  grid-column: 2;
  text-align: end;
}

@media (max-width: 900px) {
  .wiki-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .wiki-nav {
    position: static;
  }

  .wiki-cards,
  .wiki-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .wiki-step-next {
    grid-column: auto;
    text-align: start;
  }
}

/* ---------- flags ---------- */

/*
 * Round, and drawn at the size they are read at rather than scaled down from
 * something bigger, so the stripes stay crisp.
 */
.flag {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  /* A white flag on a white page needs an edge to be a flag at all. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.lang li a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang li .flag {
  width: 20px;
  height: 20px;
}