/**
 * Xiva Ink design system.
 *
 * Served to every page like coords.js and auth.js — one stylesheet, no build
 * step, no duplication. Pages that previously each carried their own <style>
 * block drifted apart within days; this exists so a change to a button is a
 * change to a button.
 *
 * ## The register
 *
 * This is software for people signing regulated clinical documents. It should
 * read as careful rather than clever: restrained palette, one accent, generous
 * spacing, type that stays legible at density. Nothing here animates for its
 * own sake, and nothing draws attention away from the document.
 *
 * Colour is used sparingly and always means something — green is completed,
 * amber is waiting, red is refused or destructive. A decorative accent would
 * dilute that, so there isn't one.
 */

:root {
  /* --- palette ------------------------------------------------------------
     Slightly warm greys. A pure-neutral grey reads clinical in the cold sense
     on the large white surfaces this UI is mostly made of. */
  --canvas: #f7f8fa;
  --surface: #ffffff;
  --surface-sunken: #fafbfc;
  --surface-hover: #f4f6f8;

  --ink: #0f1520;
  --ink-secondary: #48515f;
  --ink-muted: #6b7482;
  --ink-faint: #9aa2ad;

  --line: #e3e7ec;
  --line-strong: #cdd4dc;

  /* One accent, deep enough to carry white text at small sizes. */
  --accent: #1a4d8f;
  --accent-hover: #163f76;
  --accent-soft: #eef3fa;
  --accent-line: #c5d8ef;

  --positive: #10693e;
  --positive-soft: #e6f4ec;
  --positive-line: #b8dfc9;

  --caution: #8a5a00;
  --caution-soft: #fdf4e3;
  --caution-line: #f0dcb4;

  --critical: #a52218;
  --critical-soft: #fdeceb;
  --critical-line: #f4c9c5;

  /* --- type --------------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 21px;
  --text-2xl: 26px;

  /* --- space -------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 30px;
  --space-7: 42px;

  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 12px;

  /* Shadows are almost absent by design — borders carry the structure. A UI
     built on drop shadows reads as consumer software. */
  --shadow-sm: 0 1px 2px rgba(15, 21, 32, 0.05);
  --shadow: 0 2px 8px rgba(15, 21, 32, 0.07);
  --shadow-lg: 0 8px 28px rgba(15, 21, 32, 0.12);

  --sidebar-width: 232px;
  --header-height: 60px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.012em; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }
p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono { font-family: var(--font-mono); font-size: var(--text-sm); }

/* ==========================================================================
   Application shell
   ========================================================================== */

.app { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--header-height);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.sidebar__mark {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: -0.03em;
  flex: none;
}
.sidebar__name { font-size: var(--text-base); font-weight: 600; letter-spacing: -0.015em; }

.sidebar__nav { padding: var(--space-4) var(--space-3); flex: 1; overflow-y: auto; }

.sidebar__label {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-faint);
  padding: 0 var(--space-3); margin: var(--space-4) 0 var(--space-2);
}
.sidebar__label:first-child { margin-top: 0; }

.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink-secondary);
  font-size: var(--text-base); font-weight: 500;
  cursor: pointer; border: none; background: none; width: 100%;
  text-align: left; font-family: inherit;
}
.nav-item:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; }
.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item svg { width: 16px; height: 16px; flex: none; opacity: .85; }

.sidebar__footer { border-top: 1px solid var(--line); padding: var(--space-3); flex: none; }
.identity { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  font-size: var(--text-sm); font-weight: 600;
}
.identity__text { min-width: 0; flex: 1; }
.identity__name {
  font-size: var(--text-sm); font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.identity__role { font-size: var(--text-xs); color: var(--ink-muted); }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--header-height);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-6);
  position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.015em; }
.topbar__sub { font-size: var(--text-sm); color: var(--ink-muted); }
.topbar__actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }

.content { padding: var(--space-6); max-width: 1180px; width: 100%; }
.content--wide { max-width: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; }
  .sidebar__nav { display: flex; gap: var(--space-1); padding: var(--space-2); }
  .sidebar__label, .sidebar__footer { display: none; }
  .content { padding: var(--space-4); }
}

/* ==========================================================================
   Surfaces
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card + .card { margin-top: var(--space-5); }

.card__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--space-3);
}
.card__header h2 { font-size: var(--text-base); }
.card__header .spacer { margin-left: auto; }
.card__hint { font-size: var(--text-sm); color: var(--ink-muted); margin-top: 2px; }
.card__body { padding: var(--space-5); }
.card__body--flush { padding: 0; }

.section-title {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: var(--space-3);
}

/* ==========================================================================
   Controls
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: var(--text-base); font-weight: 500;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--surface-hover); }
.btn:active { background: var(--surface-sunken); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary:active { background: var(--accent-hover); }

.btn--quiet { border-color: transparent; background: transparent; color: var(--ink-secondary); }
.btn--quiet:hover { background: var(--surface-hover); color: var(--ink); }

.btn--danger { color: var(--critical); border-color: var(--critical-line); background: var(--surface); }
.btn--danger:hover { background: var(--critical-soft); }

.btn--sm { font-size: var(--text-sm); padding: 5px 10px; }
.btn--block { width: 100%; }

.btn-group { display: flex; gap: var(--space-2); flex-wrap: wrap; }

label, .label {
  display: block; font-size: var(--text-sm); font-weight: 600;
  color: var(--ink-secondary); margin-bottom: 5px;
}
.label--optional::after {
  content: "optional"; margin-left: 6px; font-weight: 400;
  color: var(--ink-faint); font-size: var(--text-xs);
}

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  width: 100%; padding: 8px 11px;
  font-family: inherit; font-size: var(--text-base); color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder { color: var(--ink-faint); }

.field { margin-bottom: var(--space-4); }
.field:last-child { margin-bottom: 0; }
.field__hint { font-size: var(--text-sm); color: var(--ink-muted); margin-top: 5px; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }

.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: var(--accent); }
.check span { font-size: var(--text-base); color: var(--ink-secondary); }

/* ==========================================================================
   Data
   ========================================================================== */

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-sunken);
  white-space: nowrap;
}
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-base); vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr.is-clickable:hover { background: var(--surface-hover); }
.table tbody tr.is-selected { background: var(--accent-soft); }
.table td.numeric, .table th.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.table--dense td { padding: 7px var(--space-4); font-size: var(--text-sm); }

.cell-primary { font-weight: 500; color: var(--ink); }
.cell-secondary { font-size: var(--text-sm); color: var(--ink-muted); margin-top: 1px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em;
  padding: 3px 9px; border-radius: 99px;
  background: var(--surface-hover); color: var(--ink-secondary);
  border: 1px solid var(--line); white-space: nowrap;
}
.badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .7;
}
.badge--none::before { display: none; }
.badge--positive { background: var(--positive-soft); color: var(--positive); border-color: var(--positive-line); }
.badge--caution { background: var(--caution-soft); color: var(--caution); border-color: var(--caution-line); }
.badge--critical { background: var(--critical-soft); color: var(--critical); border-color: var(--critical-line); }
.badge--accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

.empty { padding: var(--space-7) var(--space-5); text-align: center; }
.empty__icon { color: var(--ink-faint); margin-bottom: var(--space-3); }
.empty__title { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-1); }
.empty__body { font-size: var(--text-base); color: var(--ink-muted); max-width: 380px; margin: 0 auto var(--space-4); }

.definition { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: var(--space-2) var(--space-5); }
.definition dt { font-size: var(--text-sm); color: var(--ink-muted); }
.definition dd { margin: 0; font-size: var(--text-base); }

/* ==========================================================================
   Messages
   ========================================================================== */

.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius); font-size: var(--text-base);
  border: 1px solid var(--line); background: var(--surface-sunken);
  margin-bottom: var(--space-4);
}
.notice svg { flex: none; margin-top: 2px; width: 16px; height: 16px; }
.notice--info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.notice--positive { background: var(--positive-soft); border-color: var(--positive-line); color: var(--positive); }
.notice--caution { background: var(--caution-soft); border-color: var(--caution-line); color: var(--caution); }
.notice--critical { background: var(--critical-soft); border-color: var(--critical-line); color: var(--critical); }
.notice ul { margin: var(--space-2) 0 0; padding-left: 18px; }
.notice li { margin: 2px 0; }

/* ==========================================================================
   Auth pages — centred, no shell
   ========================================================================== */

.auth-page { display: grid; place-items: center; min-height: 100vh; padding: var(--space-5); }
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: var(--space-6);
}
.auth-card--wide { max-width: 460px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); }
.auth-title { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.auth-sub { font-size: var(--text-base); color: var(--ink-muted); margin-bottom: var(--space-5); }

/* ==========================================================================
   Progress
   ========================================================================== */

.steps { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--ink-faint); }
.step__dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  color: var(--ink-faint);
}
.step--active { color: var(--accent); font-weight: 600; }
.step--active .step__dot { border-color: var(--accent); background: var(--accent); color: #fff; }
.step--done { color: var(--positive); }
.step--done .step__dot { border-color: var(--positive-line); background: var(--positive-soft); color: var(--positive); }
.step__line { width: 22px; height: 1px; background: var(--line-strong); }

/* ==========================================================================
   Utilities
   ========================================================================== */

.hidden { display: none !important; }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: var(--space-4); }
.stack--tight > * + * { margin-top: var(--space-2); }
.spacer { flex: 1; }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.small { font-size: var(--text-sm); }
.tiny { font-size: var(--text-xs); }
.strong { font-weight: 600; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.break { word-break: break-all; }
.center { text-align: center; }

.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  animation: spin .7s linear infinite; display: inline-block; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   API reference
   --------------------------------------------------------------------------
   Here rather than in a <style> block on docs.html, for the reason at the top
   of this file: pages that carried their own styles drifted from the system
   within days. The reference is the one page an integrator sees before they
   see anything else we built, and it looking like a different product would
   be its own kind of answer.

   Its own sidebar rather than the console shell, because it is public — there
   is no signed-in identity to show, and asking somebody to log in to read the
   documentation is backwards.
   ========================================================================== */

.docs { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; }

.docs__side {
  background: var(--surface);
  border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
}
.docs__nav { padding: var(--space-3) var(--space-3) var(--space-6); overflow-y: auto; flex: 1; }

.docs__search { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); flex: none; }
.docs__search input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--text-sm); color: var(--ink);
  background: var(--surface-sunken);
}
.docs__search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--surface); }

.docs-link {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 5px var(--space-3); border-radius: var(--radius-sm);
  color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.4;
  cursor: pointer; text-decoration: none;
}
.docs-link:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; }
.docs-link[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.docs-link__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.docs__main { min-width: 0; }
.docs__body { padding: var(--space-6) var(--space-7); max-width: 900px; }

.docs-section { scroll-margin-top: var(--space-5); margin-bottom: var(--space-7); }
.docs-section__title { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.docs-section__lede { color: var(--ink-secondary); margin-bottom: var(--space-5); }

/* --- one operation ------------------------------------------------------- */

.op {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); margin-bottom: var(--space-4);
  scroll-margin-top: var(--space-4); overflow: hidden;
}
.op__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer; user-select: none; width: 100%;
  background: none; border: none; font-family: inherit; text-align: left;
}
.op__head:hover { background: var(--surface-hover); }
.op__head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The verb carries the meaning, so it gets the colour and the weight. */
.verb {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.04em; padding: 4px 8px; border-radius: var(--radius-sm);
  flex: none; min-width: 58px; text-align: center; border: 1px solid transparent;
}
.verb--get { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.verb--post { background: var(--positive-soft); color: var(--positive); border-color: var(--positive-line); }
.verb--patch, .verb--put { background: var(--caution-soft); color: var(--caution); border-color: var(--caution-line); }
.verb--delete { background: var(--critical-soft); color: var(--critical); border-color: var(--critical-line); }
.verb--event { background: var(--surface-hover); color: var(--ink-secondary); border-color: var(--line-strong); }

.op__path { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.op__summary { color: var(--ink-muted); font-size: var(--text-sm); margin-left: auto; text-align: right; flex: 1 1 auto; }
.op__chevron { flex: none; color: var(--ink-faint); transition: transform .15s ease; }
.op[open] .op__chevron { transform: rotate(90deg); }

.op__detail { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--line); }
.op__prose { padding-top: var(--space-4); color: var(--ink-secondary); font-size: var(--text-base); }
.op__prose p { margin: 0 0 var(--space-3); }
.op__prose p:last-child { margin-bottom: 0; }
.op__prose strong { color: var(--ink); font-weight: 600; }
.op__prose code {
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; color: var(--ink);
}
.op__prose ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); }

.docs-h {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-faint);
  margin: var(--space-5) 0 var(--space-2);
}

.params { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.params th {
  text-align: left; font-weight: 600; color: var(--ink-muted);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0 var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--line);
}
.params td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.params tr:last-child td { border-bottom: none; }
.params__name { font-family: var(--font-mono); color: var(--ink); white-space: nowrap; }
.params__type { font-family: var(--font-mono); color: var(--ink-muted); font-size: var(--text-xs); white-space: nowrap; }
.params__note { color: var(--ink-secondary); }
.params__req { color: var(--critical); font-weight: 600; font-size: var(--text-xs); }

.code {
  background: #0f1520; color: #e6ebf2;
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6;
  overflow-x: auto; margin: 0; white-space: pre;
}
.code .tok-key { color: #9ecbff; }
.code .tok-str { color: #a5e8a0; }
.code .tok-num { color: #f0c674; }
.code .tok-lit { color: #e0a8f0; }

.status-row { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.status-row:last-child { border-bottom: none; }
.status-code {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600;
  min-width: 40px; flex: none;
}
.status-code--ok { color: var(--positive); }
.status-code--bad { color: var(--caution); }
.status-code--err { color: var(--critical); }
.status-text { color: var(--ink-secondary); font-size: var(--text-sm); }

.scopes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.scope-chip {
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: 2px 8px; border-radius: 99px;
  background: var(--surface-hover); border: 1px solid var(--line); color: var(--ink-secondary);
}

@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; }
  .docs__side { position: static; height: auto; max-height: 320px; }
  .docs__body { padding: var(--space-5) var(--space-4); }
  .op__summary { display: none; }
}