/* =========================================================
   MSCinteract · base.css
   Design tokens / reset / header & footer / shared components
   ========================================================= */

:root {
  --bg: #f5f7fb;
  --bg-soft: #eef2f9;
  --panel: #ffffff;
  --ink: #16203a;
  --ink-soft: #3b4869;
  --muted: #6b7897;
  --line: #e2e8f4;
  --line-strong: #cdd7ea;

  --accent: #2f6df6;
  --accent-dark: #1f4fc4;
  --accent-soft: #e8f0ff;
  --teal: #12b3a6;
  --teal-soft: #e2f7f4;
  --amber: #e0862b;
  --amber-soft: #fdf1e2;
  --rose: #d9445f;
  --rose-soft: #fdeaee;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-xs: 0 1px 2px rgba(19, 33, 68, .06);
  --shadow-sm: 0 2px 8px rgba(19, 33, 68, .07);
  --shadow-md: 0 10px 30px rgba(19, 33, 68, .10);

  --font: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --header-h: 62px;

  /* Max width of the page shell; widened on very large screens so that the
     side gutters stay small instead of growing with the viewport. */
  --shell-max: 1440px;
}

* { box-sizing: border-box; }

/* The hidden attribute decides. No rule of ours may give a hidden element a
   display of its own: `.field { display: flex }`, for one, would put the
   element back on the screen, and the attribute would be ignored without a
   word. The attribute is the one thing that must never lose. */
[hidden] { display: none !important; }

html {
  height: 100%;
}

/* ---------------- Scrollbars ----------------
   One thickness for the whole site: the page itself and every card that
   keeps an inner scroll (gene chips, matrix table, autocomplete list) have
   to match exactly.

   The webkit pseudo elements below are global, so they hit the page
   scrollbar and all inner scroll containers alike: a slim rounded bar
   without a track. They must stay the only rule in place for them, because
   Chrome drops the webkit styling as soon as the standard properties are
   used on an element - and it would fall back to the system scrollbar,
   which is thicker.

   Firefox has no webkit pseudo elements, it needs the standard properties.
   Both are inherited, so every scroll container of the page picks them up. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  background-clip: content-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Only Firefox reaches this block, Chrome and Safari ignore the property. */
@supports (-moz-appearance: none) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
}

/* The page is a vertical flex shell: the header sits on top, the main area
   stretches, and the footer is pushed to the bottom of the viewport even when
   the content is shorter than the screen. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }

/* Titles never overflow their box: they wrap at word boundaries and only
   break inside a word when that single word is longer than the line. */
h1, h2, h3, h4, h5, h6,
.panel__title,
.empty__title {
  overflow-wrap: break-word;
  word-break: normal;
}
p { margin: 0; }
code { font-family: var(--mono); font-size: .92em; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

a { color: var(--accent); text-decoration: none; }
/* The links of the site never underline themselves when the pointer comes: a
   line under the words cuts them into pieces, and the round help button in the
   corner of the head would wear a stroke it does not need. The colour of the
   link says that it leads somewhere. */
a:hover { text-decoration: none; }

/* ---------------- Header ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  max-width: min(var(--shell-max), 96vw);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  /* There are more tabs than fit on one line on a narrow screen: they wrap
     to a second line instead of being cut off. */
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 10px; color: inherit; }
.brand:hover { text-decoration: none; }
.brand__mark { display: flex; }
.brand__mark img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: 16px; letter-spacing: -.02em; }
.brand__text small { font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
/* The name and the release number share one line. */
.brand__title { display: flex; align-items: center; gap: 6px; }

/* The release number next to the name. The changelog feeds it, so it stays
   hidden until the version has been read. */
.brand__version {
  display: none;
  border: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.brand__version.is-on { display: inline-block; }
/* The number lifts a little and takes a soft shadow. This happens on every
   page, also where the number is a label and cannot be pressed. */
.brand__version:hover {
  background: #dbe8ff;
  box-shadow: 0 2px 6px rgba(47, 109, 246, .18);
  transform: translateY(-1px);
  /* the number of the release is a link, and it never underlines itself */
  text-decoration: none;
}
.brand__version:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Only where the number opens the changelog it is a button and says so with
   the pointer. */
button.brand__version { cursor: pointer; }

/* ---------------- The header while the site is under maintenance ----------

   The header tells the same story as the notice page: the release that runs,
   an arrow in flight, the release the maintenance is building. The chip of the
   header becomes a bare frame for the pair, so the two badges carry the look. */
.brand__version.is-maint {
  padding: 0;
  background: transparent;
}
.brand__version.is-maint:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.maint-upgrade { display: inline-flex; align-items: center; gap: 7px; }
/* the badges keep the monospace of the chip, on every page that shows it, so
   the pair reads as a version number and not as prose */
.maint-version {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.maint-version--next {
  position: relative;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
/* the ring: one pulse per cycle, spreading from behind the badge */
.maint-version--next::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1.5px solid rgba(47, 109, 246, .55);
  pointer-events: none;
  animation: maint-ping 1.8s cubic-bezier(0, .35, .55, 1) infinite;
}
.maint-upgrade__arrow {
  display: inline-flex;
  color: var(--accent-dark);
  animation: maint-arrow 1.8s cubic-bezier(.4, 0, .35, 1) infinite;
}
.maint-upgrade__arrow svg { display: block; }
/* take off, glide, land, and fade so the next cycle starts clean */
@keyframes maint-arrow {
  0%   { transform: translateX(-4px); opacity: 0; }
  16%  { transform: translateX(-1px); opacity: 1; }
  55%  { transform: translateX(2px);  opacity: 1; }
  72%, 100% { transform: translateX(4px); opacity: 0; }
}
@keyframes maint-ping {
  0%   { transform: scale(1);    opacity: .65; }
  55%  { transform: scale(1);    opacity: .35; }
  72%, 100% { transform: scale(1.5); opacity: 0; }
}

/* A link into the explorer while the app is down: it keeps its shape, loses
   its purpose, and says so on the label. */
[data-app-link].is-down,
[data-app-link].is-down:hover {
  color: var(--muted);
  opacity: .7;
  cursor: not-allowed;
  text-decoration: none;
  pointer-events: none;
}
.btn.is-down,
.btn.is-down:hover {
  background: var(--bg-soft);
  border-color: var(--line);
  color: var(--muted);
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .maint-upgrade__arrow,
  .maint-version--next::after { animation: none; }
  .maint-version--next::after { opacity: 0; }
}

.site-header__side {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-soft);
  border-radius: 999px;
  border: 1px solid var(--line);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  padding: 5px 9px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 550;
  font-size: 12px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: background .15s ease, color .15s ease;
}
.tab:hover { background: rgba(255, 255, 255, .7); }
.tab[aria-selected="true"] {
  background: var(--panel);
  color: var(--accent-dark);
  box-shadow: var(--shadow-xs);
}
.tab__badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* The tabs that are announced but not built yet. They look like the others,
   but they say that they are not there yet when they are pressed. */
.tab--soon {
  color: var(--muted);
  cursor: pointer;
}
.tab--soon:hover { background: rgba(255, 255, 255, .55); }
.tab--soon .tab__badge {
  background: var(--bg-soft);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* A tab that is a link to another page: the way back to the app in the head of
   the documentation. It wears the look of the tab of the app: a quiet grey
   pill in the track, white only when the reader puts the pointer on it. And it
   is a link, so it never underlines itself. */
a.tab,
a.tab:hover { text-decoration: none; }
.tab--on {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: none;
}
.tab--on:hover {
  background: var(--panel);
  color: var(--accent-dark);
  box-shadow: var(--shadow-xs);
}
/* The pill stays grey while the app is down: it keeps its shape and says on the
   label that there is nothing to open. */
.tab.is-down,
.tab.is-down:hover {
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

/* Circular "?" button in the top-right corner: opens the online documentation. */
.help-btn {
  width: 30px;
  height: 30px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.help-btn:hover { background: var(--accent-soft); color: var(--accent-dark); transform: translateY(-1px); }
.help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.site-header__progress { height: 2px; background: var(--line); overflow: hidden; }
.site-header__progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--teal));
  transition: width .2s ease;
}

/* ---------------- Main ---------------- */

.site-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: min(var(--shell-max), 96vw);
  margin: 0 auto;
  padding: 26px 24px 60px;
}

.tab-panel[hidden] { display: none; }

/* ---------------- Shared components ---------------- */

/* The legend of a chart, told as labelled rows: the label of a row is a narrow
   column on the left, the content takes the rest. Every row starts on the same
   line, which is what keeps a legend tidy whatever it holds.
   Add .legend-rows next to .chart-legend; the rows go inside it. */
.legend-rows {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.legend-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
}

.legend-row__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .8;
}

.legend-row__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  min-width: 0;
}

/* the scales of a chart stand on one baseline, their numbers on one line */
.legend-row__value--scales {
  align-items: flex-end;
  gap: 0 18px;
}

.legend-row__caption {
  align-self: flex-end;
  padding-bottom: 1px;
  font-size: 11.5px;
  color: var(--muted);
}

/* the small print under the rows: no label of its own, and a dot that sticks
   to the sentence that follows it instead of dangling at the end of a line */
.legend-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
}

.legend-notes > span + span::before {
  content: '·';
  margin-right: 11px;
  color: var(--line-strong);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* A panel whose content runs to its edge (a table, for example) keeps its
   corners only when the content is cut off by the radius. */
.panel--clip { overflow: hidden; }

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.panel__title { font-size: 14px; font-weight: 650; min-width: 0; }
.panel__hint { font-size: 12px; color: var(--muted); min-width: 0; }
.panel__body { padding: 16px 18px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink-soft);
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* A button that is a link keeps the look of a button: it is a button, and a
   button never wears a line under its words. */
a.btn, a.btn:hover { text-decoration: none; }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(47, 109, 246, .28);
}
.btn--primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--bg-soft); }
.btn--sm { padding: 4px 10px; font-size: 12.5px; }
.btn--block { width: 100%; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--bg-soft);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.chip--accent { background: var(--accent-soft); color: var(--accent-dark); border-color: #cfe0ff; }
.chip--teal { background: var(--teal-soft); color: #0b7d74; border-color: #c8ece7; }
.chip--amber { background: var(--amber-soft); color: #a9631f; border-color: #f4dfc4; }
.chip--muted { background: var(--bg-soft); color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.input, .select, .textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 109, 246, .14);
}
.textarea { min-height: 84px; resize: vertical; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.checkbox { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: var(--ink-soft); }
.checkbox input { accent-color: var(--accent); width: 14px; height: 14px; }

.range { width: 100%; accent-color: var(--accent); }

/* Tables */
/* The matrix table is wider than its panel, so only the horizontal scroll
   stays. Vertically the table grows with its rows. */
.table-wrap { overflow-x: auto; max-width: 100%; }
.table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.table th, .table td {
  padding: 7px 10px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafd;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid var(--line-strong);
}
.table th:first-child, .table td:first-child { text-align: left; position: sticky; left: 0; background: var(--panel); z-index: 1; }
.table th:first-child { z-index: 3; background: #f8fafd; }
.table tbody tr:hover td { background: #f6f9ff; }
.table tbody tr:hover td:first-child { background: #f0f5ff; }
.table .num { font-family: var(--mono); font-size: 12px; }
.table .muted { color: var(--muted); }
.table--compact th, .table--compact td { padding: 5px 8px; font-size: 12px; }
.table tbody tr.is-focus td { background: var(--amber-soft) !important; }
.table tbody tr.is-focus td:first-child { background: #fbe9d3 !important; }

.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--accent-dark); }
.sortable::after { content: "\2195"; opacity: .3; margin-left: 5px; font-size: 10px; }
.sortable.is-asc::after { content: "\2191"; opacity: .9; }
.sortable.is-desc::after { content: "\2193"; opacity: .9; }

/* Tooltip */
.tooltip {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  background: rgba(18, 26, 48, .94);
  color: #fff;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: var(--shadow-md);
  max-width: 280px;
}
.tooltip b { color: #9fd0ff; }
.tooltip .t-row { display: flex; justify-content: space-between; gap: 14px; }

/* a tooltip with a long list of gene symbols in it */
.tooltip--wide { max-width: 460px; }

/* Toast: the short answer to a press that cannot do anything yet */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 90;
  transform: translate(-50%, 10px);
  background: rgba(18, 26, 48, .94);
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.tooltip .t-row span:last-child { font-family: var(--mono); }

/* Status messages */
.status { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty { padding: 34px 18px; text-align: center; color: var(--muted); font-size: 13px; }
.empty__title { font-weight: 650; color: var(--ink-soft); margin-bottom: 4px; font-size: 14px; }

.alert { padding: 10px 13px; border-radius: var(--radius-sm); font-size: 13px; border: 1px solid; }
.alert--error { background: var(--rose-soft); border-color: #f3c6cf; color: #a32f45; }
.alert--info { background: var(--accent-soft); border-color: #cfe0ff; color: var(--accent-dark); }

/* Footer */
.site-footer {
  flex: 0 0 auto;
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.site-footer__inner {
  max-width: min(var(--shell-max), 96vw);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--muted);
}
.site-footer__meta { font-family: var(--mono); font-size: 11.5px; }
.site-footer__contact { color: var(--muted); }

/* The address of the site: it is a link, but the footer is a quiet place, so
   it never wears an underline - not at rest, not on hover. The emphasis goes
   to the colour and to a faint tint under the word, and the keyboard gets an
   outline of its own. */
.site-footer__contact a {
  color: var(--accent);
  text-decoration: none;
  padding: 1px 4px;
  margin: 0 -4px;
  border-radius: 5px;
  transition: color .15s ease, background-color .15s ease;
}
.site-footer__contact a:hover {
  color: var(--accent-dark);
  background: var(--accent-soft);
  text-decoration: none;
}
.site-footer__contact a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  /* The head of the site on a phone. The name and the round help button stand
     on the first line, the track of the tabs takes the whole second line and
     scrolls sideways: there are more tabs than a phone can show, and the ones
     that do not fit have to be within reach of the finger.
     The wrapper around the tabs and the help button steps out of the way, so
     that its two children can stand where they belong. */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand help"
      "tabs tabs";
    align-items: center;
    gap: 8px 12px;
    min-height: 0;
    padding: 9px 12px;
  }
  .site-header__side { display: contents; }
  .brand { grid-area: brand; min-width: 0; }
  .brand__text { min-width: 0; }
  .brand__title { flex-wrap: wrap; }
  .tabs { grid-area: tabs; overflow-x: auto; }
  .help-btn { grid-area: help; }
  .site-main { padding: 18px 14px 48px; }

  /* The chrome of the site takes the same step down on every page: the name of
     the app, the round help button and the line of the footer are the same size
     on the explorer, on the documentation and on the notice of the maintenance.
     The step itself is written down once, in the help of the phone. */
  .brand__text strong { font-size: 15px; }
  .brand__text small { font-size: 10px; }
  .help-btn { font-size: 13px; }

  /* The footer on a phone: its lines stand close together and read as one small
     block of print instead of three loose ones, the bottom of the page keeps the
     room the home bar of the phone needs, and the address of the site gets a
     target a finger can hit. */
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px 16px;
    padding: 13px 16px;
    padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px));
    line-height: 1.5;
    font-size: 12px;
  }
  .site-footer__contact { font-size: 11.5px; }
  .site-footer__contact a { padding: 4px 6px; margin: 0 -6px; }
}

/* ---------------- Wide screens ----------------
   On very wide monitors the shell grows so the empty side gutters stay narrow. */

@media (min-width: 1700px) {
  :root { --shell-max: 1600px; }
}
@media (min-width: 1900px) {
  :root { --shell-max: 1780px; }
}
@media (min-width: 2200px) {
  :root { --shell-max: 2080px; }
}
@media (min-width: 2560px) {
  :root { --shell-max: 2400px; }
}
@media (min-width: 3200px) {
  :root { --shell-max: 3000px; }
}