/* The documentation site's one stylesheet — copied verbatim into server/public/docs/ by the generator.
   One file rather than a <style> block per page: the shell is identical on every page, so inlining it
   would ship the same 12 KB twenty times and make a spacing change twenty diffs.
   The palette is the landing page's, to the value, so a reader crossing from jayboard.com/ into the docs
   does not appear to have changed sites. */

:root {
  --bg: #f7f8fa;
  --bg-2: #eef0f5;
  --panel: #ffffff;
  --fg: #12141a;
  --muted: #59606e;
  --border: #e4e7ee;
  --accent: #4f7cff;
  --accent-2: #7c5cff;
  --ok: #17b877;
  --warn: #f5a623;
  --code-bg: #f2f4f8;
  --mark: #fff3bf;
  --radius: 14px;
  --side: 264px;
  --rail: 208px;
  --maxw: 1320px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0e12;
    --bg-2: #0f1218;
    --panel: #14171e;
    --fg: #eef0f5;
    --muted: #99a1b1;
    --border: #232833;
    --accent: #5b8cff;
    --accent-2: #9077ff;
    --ok: #1fca86;
    --code-bg: #11141b;
    --mark: #4a3d12;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c0e12;
  --bg-2: #0f1218;
  --panel: #14171e;
  --fg: #eef0f5;
  --muted: #99a1b1;
  --border: #232833;
  --accent: #5b8cff;
  --accent-2: #9077ff;
  --ok: #1fca86;
  --code-bg: #11141b;
  --mark: #4a3d12;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px / 1.68 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}

/* ---------- top bar ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(7px);
  -webkit-backdrop-filter: saturate(1.2) blur(7px);
}
.top-in {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 750;
  font-size: 16.5px;
  flex: none;
}
.brand-docs {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 999px;
  padding: 2px 8px;
}
/* Right-hand side, next to the sign-in link. The auto margin belongs to the FIRST member of that group
   and to nothing after it: two elements each claiming the free space split it between them, which is how
   a box meant for the right edge ends up in the middle of the bar. Not flex: 1 any more either — that
   would stretch it back across the space it was just moved out of. */
.searchbtn {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  width: 260px;
  max-width: 40vw;
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  padding: 7px 11px;
}
/* Stands in for the search box on the pages that have none, so the sign-in link stays where it is on
   every page of the site rather than jumping left on the blog. */
.top-spacer {
  margin-left: auto;
}
.searchbtn:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--fg);
}
.searchbtn span {
  flex: 1;
  text-align: left;
}
.searchbtn-k,
.searchmodal-foot kbd,
.doc kbd {
  font: 600 11.5px / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 3px 5px;
  white-space: nowrap;
}
.doc kbd {
  font-size: 12.5px;
  color: var(--fg);
  padding: 2px 6px;
}
.top-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.top-links a {
  padding: 7px 11px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.top-links a:hover {
  color: var(--fg);
  background: var(--bg-2);
}
.top-links .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  padding: 8px 15px;
}
.top-links .btn-primary:hover {
  filter: brightness(1.07);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  flex: none;
}
.icon-btn:hover {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.side-toggle {
  display: none;
}

/* Present for the outline and for a screen reader, absent for the eye. The clip-path/1px pattern rather
   than display:none, which would take it out of the accessibility tree along with the layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- shell ---------- */
.shell {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr) var(--rail);
  gap: 44px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}
/* 896px, which is what datafa.st gives a blog article (its outer container is 1280 and the article sits
   in a 896 wrapper). Wider than the 820 this was, and deliberately narrower than the landing page's 1120:
   a paragraph set to 1120 is a line your eye loses its place on. Pages WITH a sidebar use --maxw (1320)
   and are already wider than the landing. */
/* The wells grid wants the room the sidebar would have taken; the reading pages do not. */
.shell--wide {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px;
}
.shell--plain {
  grid-template-columns: minmax(0, 1fr);
  max-width: 896px;
}

.side {
  position: sticky;
  top: 60px;
  align-self: start;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 30px 0 60px;
}
.nav-group + .nav-group {
  margin-top: 22px;
}
.nav-title {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.side-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-nav li a {
  display: block;
  padding: 6px 11px;
  margin-left: -11px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.35;
}
.side-nav li a:hover {
  color: var(--fg);
  background: var(--bg-2);
}
.side-nav li a.on {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-weight: 650;
}

/* ---------- the page ---------- */
.doc {
  padding: 34px 0 72px;
  min-width: 0;
}
.crumb {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--muted);
}
.crumb a {
  color: var(--accent);
}
.crumb span {
  margin: 0 6px;
  opacity: 0.6;
}
.doc h1 {
  font-size: clamp(30px, 4vw, 38px);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.doc .lead {
  margin: 0 0 26px;
  font-size: 18px;
  color: var(--muted);
}
.doc h2 {
  font-size: 24px;
  letter-spacing: -.01em;
  margin: 42px 0 12px;
  scroll-margin-top: 84px;
}
.doc h3 {
  font-size: 18px;
  margin: 30px 0 8px;
  scroll-margin-top: 84px;
}
.doc h4 {
  font-size: 15.5px;
  margin: 24px 0 6px;
}
.doc p {
  margin: 0 0 15px;
}
/* Underline links in PROSE only. A heading that is a link, a breadcrumb and a card are all links too,
   and underlining those makes the page look like a 1996 index. */
.doc p a,
.doc li a,
.doc td a,
.doc th a,
.doc blockquote a,
.doc .callout a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.doc p a:hover,
.doc li a:hover,
.doc td a:hover,
.doc blockquote a:hover {
  text-decoration-thickness: 2px;
}
.crumb a,
.release-more a {
  text-decoration: none;
}
/* A well is a card whose whole face is the link, so `.doc li a` above would colour and underline the
   title, the domain and the description together. Two classes and an element beats one class and two, so
   this is the selector that wins rather than an !important. The border and the lift say it is clickable. */
.doc .wells-grid a,
.doc .wells-grid a:hover {
  text-decoration: none;
  color: inherit;
}
.hash {
  margin-left: 8px;
  color: var(--muted);
  opacity: 0;
  text-decoration: none !important;
  font-weight: 400;
}
h2:hover .hash,
h3:hover .hash,
.hash:focus {
  opacity: 0.55;
}
.doc ul,
.doc ol {
  margin: 0 0 15px;
  padding-left: 24px;
}
.doc li {
  margin: 5px 0;
}
.doc li > ul,
.doc li > ol {
  margin: 5px 0 0;
}
.doc hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 34px 0;
}
.doc blockquote {
  margin: 18px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--border);
  color: var(--muted);
}
.doc blockquote p:last-child {
  margin-bottom: 0;
}
.doc img {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 6px 0 18px;
}

.doc code {
  font: 500 13.5px / 1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.5px 5px;
  word-break: break-word;
}
.doc pre {
  position: relative;
  margin: 0 0 18px;
  padding: 14px 16px;
  overflow-x: auto;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.doc pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.6;
}
.copy {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity .12s;
  font: 600 11.5px system-ui;
  color: var(--muted);
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 8px;
}
pre:hover .copy,
.copy:focus {
  opacity: 1;
}
.copy:hover {
  color: var(--fg);
}

.tablewrap {
  overflow-x: auto;
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.doc th,
.doc td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.doc thead th {
  background: var(--bg-2);
  font-weight: 650;
  white-space: nowrap;
}
.doc tbody tr:last-child td {
  border-bottom: 0;
}

.callout {
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--panel);
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout-h {
  margin: 0 0 5px !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.callout--note {
  border-left-color: var(--accent);
}
.callout--note .callout-h {
  color: var(--accent);
}
.callout--tip {
  border-left-color: var(--ok);
}
.callout--tip .callout-h {
  color: var(--ok);
}
.callout--warning {
  border-left-color: var(--warn);
}
.callout--warning .callout-h {
  color: var(--warn);
}

/* previous / next */
.steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 52px;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.step:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}
.step span {
  font-size: 12.5px;
  color: var(--muted);
}
.step strong {
  font-size: 15px;
  font-weight: 650;
}
.step--next {
  text-align: right;
}

/* ---------- the rail ---------- */
.rail {
  position: sticky;
  top: 60px;
  align-self: start;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 40px 0 60px;
}
.rail-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border);
}
.rail li a {
  display: block;
  padding: 5px 0 5px 13px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.4;
}
.rail li a:hover {
  color: var(--fg);
}
.rail li a.on {
  color: var(--accent);
  border-left-color: var(--accent);
}
.rail-h3 a {
  padding-left: 26px;
  font-size: 13px;
}

/* ---------- the /docs hub ---------- */
.doc--hub .hub {
  margin-top: 44px;
}
.doc--hub .hub h2 {
  margin-bottom: 16px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.card:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  transform: translateY(-1px);
}
.card strong {
  font-size: 15.5px;
  font-weight: 650;
}
.card span {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------- the changelog ---------- */
.doc--log .release {
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.doc--log .release:last-of-type {
  border-bottom: 0;
}
/* The subscribe line under the entries. Quiet on purpose: it is an exit, not a call to action. */
.subscribe {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted);
}
.subscribe a {
  color: var(--accent);
  font-weight: 600;
}
.doc--log .release h2 {
  margin: 4px 0 8px;
  font-size: 23px;
}
.doc--log .release h2 a:hover {
  color: var(--accent);
}
.release-date {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: .02em;
}
.release p {
  margin: 0 0 8px;
  color: var(--muted);
}
.release-more a {
  font-size: 14px;
  font-weight: 650;
  color: var(--accent);
}
/* A note that has a shot puts it beside the summary; one that does not is unchanged, which is why the
   grid lives on a modifier rather than on .release itself. */
.release--shot {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 24px;
  align-items: start;
}
.release-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
}
.release-thumb:hover img {
  border-color: var(--accent);
}
/* The same shot at the top of its own note. Bordered because a screenshot of a light theme on a light
   page has no edge of its own. */
.release-shot {
  margin: 22px 0 28px;
}
.release-shot img {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}
@media (max-width: 720px) {
  .release--shot {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .release-thumb img {
    aspect-ratio: 16 / 9;
  }
}

/* ---------- wells ---------- */
.wells-find {
  display: flex;
  justify-content: center;
  margin: 32px 0 18px;
}
#wells-q {
  width: 100%;
  max-width: 580px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--fg);
  font: inherit;
  font-size: 16.5px;
  padding: 15px 20px;
}
#wells-q:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
/* The subjects under the box. Buttons rather than links: they change what is on the page, they do not
   go anywhere — and aria-pressed is what says which one you are in. */
.wells-topics {
  display: grid;
  gap: 8px;
  margin: 0 auto 34px;
  justify-items: center;
}
.topic-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.topic {
  cursor: pointer;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 13px;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.topic:hover {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.topic[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--fg);
}
.wells-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 24px;
}
.well-card {
  display: block;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  transition: border-color .12s ease, transform .12s ease;
}
.well-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  transform: translateY(-2px);
}
.well-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.well-text {
  padding: 15px 17px 18px;
}
.well-text h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -.01em;
}
.well-url {
  margin: 3px 0 9px;
  font-size: 12.5px;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.well-text p:last-child {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.wells-empty {
  color: var(--muted);
  text-align: center;
  padding: 46px 0 30px;
}
@media (max-width: 1000px) {
  .wells-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .wells-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- search ---------- */
.searchmodal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  /* flex-start, not the default stretch: a stretched card is 70vh of empty panel under two results. */
  align-items: flex-start;
  padding: 12vh 20px 20px;
}
.searchmodal[hidden] {
  display: none;
}
.searchmodal-back {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 15, 0.55);
}
.searchmodal-card {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.searchmodal-input {
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--fg);
  font: 16px system-ui;
  padding: 16px 18px;
  outline: none;
}
.searchmodal-results {
  overflow-y: auto;
  padding: 8px;
}
.sr {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.sr.on,
.sr:hover {
  background: var(--bg-2);
  border-color: var(--border);
}
.sr-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.sr-title {
  font-weight: 650;
  font-size: 14.5px;
}
.sr-section {
  font-size: 12px;
  color: var(--muted);
}
.sr-body {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45;
}
.sr mark {
  background: var(--mark);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.sr-empty {
  padding: 22px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.searchmodal-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--border);
  margin-top: 20px;
}
/* The landing page's footer, to the value — same four columns, same order, same brand block. Two sites
   that share a palette and then part company at the footer look like two sites. */
.foot-in {
  display: grid;
  grid-template-columns: minmax(230px, 1.6fr) repeat(4, minmax(104px, 1fr));
  gap: 34px 28px;
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 44px 22px 38px;
  font-size: 13.5px;
  color: var(--muted);
}
.foot .brand {
  font-size: 15px;
}
.foot-brand p {
  margin: 14px 0 0;
  max-width: 38ch;
  line-height: 1.65;
}
.foot-brand .foot-copy {
  margin-top: 18px;
}
/* Not an <h2>: these label four short lists, and putting them in the outline would end every page's
   headings with Product, Resources, Legal, More tools. Each column is a labelled <nav> instead. */
.foot-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 13px;
}
.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.foot-col a {
  color: var(--muted);
}
.foot-col a:hover {
  color: var(--accent);
}
@media (max-width: 860px) {
  .foot-in {
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  .foot-in {
    grid-template-columns: 1fr;
  }
}

/* ---------- narrow screens ---------- */
@media (max-width: 1180px) {
  .shell {
    grid-template-columns: var(--side) minmax(0, 1fr);
    gap: 36px;
  }
  /* Restated, and they have to be. The rule above has the same specificity as these two and comes later
     in the file, so without this every page with no sidebar and no rail — the changelog, the blog, an
     entry page, the wells — got a sidebar-sized column anyway and its content was squeezed into it.
     That shipped: between 901px and 1180px the changelog's text was 98 pixels wide, the blog's 83, an
     entry page 264 against 852, and the wells 264 against 1136. Below 901px the single-column rule
     further down happened to put it right again, which is why it looked fine on a phone. */
  .shell--plain,
  .shell--wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .rail {
    display: none;
  }
}
@media (max-width: 900px) {
  /* Sign in is the only link left in the bar, so it stays: hiding it would leave a header with no way
     into the app at all. The search box shrinks instead. */
  .searchbtn {
    width: 180px;
  }
  .side-toggle {
    display: inline-flex;
    order: -1;
  }
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .side {
    position: fixed;
    inset: 60px auto 0 0;
    z-index: 25;
    width: 290px;
    max-height: none;
    height: calc(100vh - 60px);
    padding: 22px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform .16s ease;
  }
  .side.open {
    transform: none;
  }
  .doc {
    padding-top: 26px;
  }
  .steps {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .searchbtn span,
  .searchbtn-k {
    display: none;
  }
  .searchbtn {
    flex: none;
    width: 36px;
    justify-content: center;
    padding: 8px;
  }
  .brand-docs {
    display: none;
  }
}