:root {
  color-scheme: light;
  --bg: #f7f9fc;
  --bg-elevated: #fbfcfe;
  --panel: #ffffff;
  --panel-2: #eef4f8;
  --line: #dce3eb;
  --line-strong: #bac6d4;
  --text: #132234;
  --muted: #647287;
  --cyan: #2f6fad;
  --cyan-bright: #4a90d9;
  --violet: #7259bb;
  --coral: #d56951;
  --amber: #a96328;
  --danger: #a84049;
  --sage-soft: #e5edf4;
  --sand-soft: #fff0e8;
  --violet-soft: #f0ecfb;
  --shadow: 0 22px 60px rgba(31, 53, 78, .11);
  --shadow-small: 0 10px 28px rgba(31, 53, 78, .08);
  --faint: #8c98a8;
  --on-ink: #ffffff;
  --on-accent: #ffffff;
  --ink-2: #26394e;
  --cyan-deep: #1e4468;
  --blue: #3a85c6;
  --hover-line: #a7b6c7;
  --sage-ink: #2d5478;
  --sage-line: #c5d4e3;
  --sand-ink: #8a4d39;
  --violet-ink: #5e4697;
  --amber-soft: #f5ece3;
  --amber-line: #d6b694;
  --amber-ink: #754b2d;
  --slate-soft: #e7eff0;
  --slate-ink: #48636e;
  --blue-soft: #e5edf4;
  --blue-ink: #2d5478;
  --status-line: #c8d4e3;
  --status-bg: #edf3fa;
  --status-ink: #345a7a;
  --chip-bg: #f0f4f8;
  --chip-ink: #58687c;
  --glass-weak: rgba(255, 255, 255, .5);
  --glass: rgba(255, 255, 255, .65);
  --glass-strong: rgba(255, 255, 255, .92);
  --header-bg: rgba(247, 249, 252, .88);
  --panel-glass: rgba(251, 252, 254, .92);
  --grid-line: rgba(90, 111, 137, .045);
  --grid-line-strong: rgba(83, 109, 138, .09);
  --tint-cyan: rgba(47, 111, 173, .10);
  --tint-violet: rgba(114, 89, 187, .08);
  --backdrop: rgba(22, 35, 51, .46);
  --shadow-dialog: 0 30px 90px rgba(32, 37, 31, .18);
  --card-agent: linear-gradient(145deg, #fffdfb, #fff 68%);
  --card-assistant: linear-gradient(145deg, #fdfcff, #fff 68%);
  --card-spec: linear-gradient(145deg, #fbfcff, #fff 68%);
  --card-inference: linear-gradient(145deg, #f9fdff, #fff 68%);
  --card-runtime: linear-gradient(145deg, #fffaf5, #fff 68%);
  --card-pack: linear-gradient(145deg, #f8f7fc, #fff 68%);
  --card-lab: linear-gradient(145deg, #f7f9fb, #fff 68%);
  --card-robot: linear-gradient(145deg, #fffbfa, #fff 68%);
  /* One radius per role, not per size. Containers take --radius, interactive
     controls take --radius-control, badges and toggle chips take
     --radius-chip, and only true circles take --radius-pill. A tile that
     sizes itself is still a container. */
  --radius: 8px;
  --radius-control: 4px;
  --radius-chip: 3px;
  --radius-pill: 999px;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-family: var(--font-body);
  font-synthesis: none;
}

/* The dark palette is defined twice on purpose: once for an OS preference
   with no stored choice, once for an explicit choice. tests/test_web.js
   asserts the two blocks stay identical and that no colour literal appears
   anywhere else in this file. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f141b;
    --bg-elevated: #141a23;
    --panel: #171e28;
    --panel-2: #1f2833;
    --line: #2a3441;
    --line-strong: #3a4757;
    --text: #e6ebf2;
    --muted: #9aa7b8;
    --faint: #6b7789;
    --on-ink: #0f141b;
    --on-accent: #0f141b;
    --ink-2: #c9d3df;
    --cyan: #6ea8dd;
    --cyan-bright: #8ec0f0;
    --cyan-deep: #4a88c4;
    --violet: #a495e0;
    --coral: #e98a74;
    --amber: #d9a15e;
    --danger: #e07b82;
    --blue: #82b9f0;
    --hover-line: #4a5a6e;
    --sage-soft: rgba(110, 168, 221, .14);
    --sand-soft: rgba(233, 138, 116, .14);
    --violet-soft: rgba(164, 149, 224, .16);
    --sage-ink: #9cc4ea;
    --sage-line: rgba(110, 168, 221, .35);
    --sand-ink: #f0a98f;
    --violet-ink: #c3b8ee;
    --amber-soft: rgba(217, 161, 94, .14);
    --amber-line: rgba(217, 161, 94, .4);
    --amber-ink: #e8bd85;
    --slate-soft: rgba(154, 167, 184, .14);
    --slate-ink: #b7c3d2;
    --blue-soft: rgba(130, 185, 240, .16);
    --blue-ink: #c5e0fa;
    --status-line: #3a4757;
    --status-bg: #1f2833;
    --status-ink: #b7c3d2;
    --chip-bg: #1f2833;
    --chip-ink: #b7c3d2;
    --glass-weak: rgba(23, 30, 40, .5);
    --glass: rgba(23, 30, 40, .7);
    --glass-strong: rgba(23, 30, 40, .92);
    --header-bg: rgba(15, 20, 27, .85);
    --panel-glass: rgba(20, 26, 35, .92);
    --grid-line: rgba(154, 167, 184, .06);
    --grid-line-strong: rgba(154, 167, 184, .1);
    --tint-cyan: rgba(110, 168, 221, .08);
    --tint-violet: rgba(164, 149, 224, .07);
    --backdrop: rgba(0, 0, 0, .6);
    --shadow: 0 22px 60px rgba(0, 0, 0, .45);
    --shadow-small: 0 10px 28px rgba(0, 0, 0, .35);
    --shadow-dialog: 0 30px 90px rgba(0, 0, 0, .6);
    --card-agent: linear-gradient(145deg, rgba(233, 138, 116, .07), var(--panel) 68%);
    --card-assistant: linear-gradient(145deg, rgba(164, 149, 224, .08), var(--panel) 68%);
    --card-spec: linear-gradient(145deg, rgba(154, 167, 184, .07), var(--panel) 68%);
    --card-inference: linear-gradient(145deg, rgba(110, 168, 221, .07), var(--panel) 68%);
    --card-runtime: linear-gradient(145deg, rgba(217, 161, 94, .07), var(--panel) 68%);
    --card-pack: linear-gradient(145deg, rgba(164, 149, 224, .06), var(--panel) 68%);
    --card-lab: linear-gradient(145deg, rgba(154, 167, 184, .09), var(--panel) 68%);
    --card-robot: linear-gradient(145deg, rgba(224, 123, 130, .07), var(--panel) 68%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f141b;
  --bg-elevated: #141a23;
  --panel: #171e28;
  --panel-2: #1f2833;
  --line: #2a3441;
  --line-strong: #3a4757;
  --text: #e6ebf2;
  --muted: #9aa7b8;
  --faint: #6b7789;
  --on-ink: #0f141b;
  --on-accent: #0f141b;
  --ink-2: #c9d3df;
  --cyan: #6ea8dd;
  --cyan-bright: #8ec0f0;
  --cyan-deep: #4a88c4;
  --violet: #a495e0;
  --coral: #e98a74;
  --amber: #d9a15e;
  --danger: #e07b82;
  --blue: #82b9f0;
  --hover-line: #4a5a6e;
  --sage-soft: rgba(110, 168, 221, .14);
  --sand-soft: rgba(233, 138, 116, .14);
  --violet-soft: rgba(164, 149, 224, .16);
  --sage-ink: #9cc4ea;
  --sage-line: rgba(110, 168, 221, .35);
  --sand-ink: #f0a98f;
  --violet-ink: #c3b8ee;
  --amber-soft: rgba(217, 161, 94, .14);
  --amber-line: rgba(217, 161, 94, .4);
  --amber-ink: #e8bd85;
  --slate-soft: rgba(154, 167, 184, .14);
  --slate-ink: #b7c3d2;
  --blue-soft: rgba(130, 185, 240, .16);
  --blue-ink: #c5e0fa;
  --status-line: #3a4757;
  --status-bg: #1f2833;
  --status-ink: #b7c3d2;
  --chip-bg: #1f2833;
  --chip-ink: #b7c3d2;
  --glass-weak: rgba(23, 30, 40, .5);
  --glass: rgba(23, 30, 40, .7);
  --glass-strong: rgba(23, 30, 40, .92);
  --header-bg: rgba(15, 20, 27, .85);
  --panel-glass: rgba(20, 26, 35, .92);
  --grid-line: rgba(154, 167, 184, .06);
  --grid-line-strong: rgba(154, 167, 184, .1);
  --tint-cyan: rgba(110, 168, 221, .08);
  --tint-violet: rgba(164, 149, 224, .07);
  --backdrop: rgba(0, 0, 0, .6);
  --shadow: 0 22px 60px rgba(0, 0, 0, .45);
  --shadow-small: 0 10px 28px rgba(0, 0, 0, .35);
  --shadow-dialog: 0 30px 90px rgba(0, 0, 0, .6);
  --card-agent: linear-gradient(145deg, rgba(233, 138, 116, .07), var(--panel) 68%);
  --card-assistant: linear-gradient(145deg, rgba(164, 149, 224, .08), var(--panel) 68%);
  --card-spec: linear-gradient(145deg, rgba(154, 167, 184, .07), var(--panel) 68%);
  --card-inference: linear-gradient(145deg, rgba(110, 168, 221, .07), var(--panel) 68%);
  --card-runtime: linear-gradient(145deg, rgba(217, 161, 94, .07), var(--panel) 68%);
  --card-pack: linear-gradient(145deg, rgba(164, 149, 224, .06), var(--panel) 68%);
  --card-lab: linear-gradient(145deg, rgba(154, 167, 184, .09), var(--panel) 68%);
  --card-robot: linear-gradient(145deg, rgba(224, 123, 130, .07), var(--panel) 68%);
}

* { box-sizing: border-box; }
/* Focus and anchor scrolling stop below whatever sticks to the top: the
   header above phone widths and, in results, the scope strip. app.js writes
   the measured sum (syncStickyClearance). */
html { scroll-behavior: smooth; scroll-padding-top: var(--sticky-clearance, 0px); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -8%, var(--tint-cyan), transparent 28rem),
    radial-gradient(circle at 92% 8%, var(--tint-violet), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, currentColor, transparent 56rem);
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--cyan); text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--cyan) 28%, var(--panel)); color: var(--text); }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 20;
  padding: .7rem 1rem;
  border-radius: var(--radius-chip);
  background: var(--text);
  color: var(--on-ink);
}
.skip-link:focus { top: 1rem; }

.site-header {
  min-height: 88px;
  padding: 0 max(1.5rem, calc((100% - 1360px) / 2));
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(140%);
}
.brand { display: flex; flex-direction: column; justify-content: center; gap: .18rem; }
.brand-link { display: flex; flex-direction: column; gap: .18rem; color: inherit; text-decoration: none; }
.brand-link:hover { color: inherit; text-decoration: none; }
.wordmark {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.035em;
}
.wordmark-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.wordmark-art {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  line-height: 1.02;
}
.wm-pe { grid-area: 1 / 1 / 2 / 2; text-align: right; }
.wm-a { grid-area: 1 / 2 / 3 / 3; font-size: 2.2em; line-height: .68; padding: 0 1px; color: var(--cyan); }
.wm-ceful { grid-area: 1 / 3 / 2 / 4; }
.wm-coexist { grid-area: 2 / 1 / 3 / 2; text-align: right; }
.wm-nce { grid-area: 2 / 3 / 3 / 4; }
.brand small {
  display: block;
  color: var(--muted);
  font: 500 .6rem var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Explore reads the existing boot classifications; every mark uses one scale. */
.explore-sections { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; font-size: .85rem; }
.runtime-features { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.runtime-matrix-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 1rem; }
.runtime-matrix-controls label { display: grid; gap: .4rem; min-width: 0; flex: 1 1 180px; }
.runtime-matrix-controls select { width: 100%; }
.runtime-matrix-note { color: var(--muted); max-width: 85ch; font-size: .85rem; }
.runtime-scroll-hint { color: var(--muted); font-size: .8rem; }
.runtime-features .explore-data-note { font: .75rem var(--font-mono); }
.runtime-matrix-scroll { position: relative; max-width: 100%; overflow-x: auto; }
.runtime-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.runtime-matrix caption { text-align: left; color: var(--muted); padding: 1rem 0; }
.runtime-matrix th, .runtime-matrix td { padding: .8rem .65rem; border-bottom: 1px solid var(--line); text-align: center; min-width: 5.5rem; }
.runtime-matrix th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); min-width: 9rem; max-width: 11rem; text-align: left; }
.runtime-matrix td { color: var(--muted); }
.runtime-matrix .is-recorded { color: var(--cyan); background: var(--tint-cyan); }
.runtime-matrix thead th { font-weight: 500; }
.deployment-scroll { max-width: 100%; overflow-x: auto; }
.deployment-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.deployment-table caption { text-align: left; color: var(--muted); padding: 1rem 0; }
.deployment-table th, .deployment-table td { padding: .4rem; min-width: 6rem; border-bottom: 1px solid var(--line); }
.deployment-table th { text-align: left; font-weight: 500; }
.deployment-table th:first-child { position: sticky; left: 0; z-index: 1; min-width: 8rem; background: var(--bg); }
.deployment-table small { display: block; margin-top: .4rem; font: .7rem var(--font-mono); color: var(--muted); }
.deployment-cell { display: grid; gap: .35rem; padding: .8rem; color: var(--text); font: .8rem var(--font-mono); text-decoration: none; background: color-mix(in srgb, var(--cyan) calc(var(--access-share) * .3), var(--panel)); }
.deployment-cell strong { font-size: 1.05rem; }
a.deployment-cell:hover { text-decoration: underline; outline: 1px solid var(--cyan); }
.deployment-method { margin-top: 1.5rem; }
.deployment-method summary { cursor: pointer; font-weight: 600; }
.deployment-method p { max-width: 75ch; color: var(--muted); }
.explore-heading { margin-bottom: 2.5rem; }
.explore-heading h1 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); line-height: 1.08; }
.explore-heading > p:not(.eyebrow):not(.explore-data-note) { color: var(--muted); font-size: 1.1rem; line-height: 1.6; }
#explore-data-note { font: .75rem var(--font-mono); color: var(--muted); line-height: 1.8; }
.explore-section-heading h2 { margin: 0 0 .5rem; font: 600 1.6rem var(--font-display); letter-spacing: -.025em; }
.explore-section-heading p { margin: 0 0 1.5rem; color: var(--muted); max-width: 68ch; }
.access-route-list { display: grid; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.access-route-list a, .access-route-list li > div { display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem; color: var(--text); text-decoration: none; }
.access-route-label { font-weight: 600; }
.access-route-value { font: .85rem var(--font-mono); align-self: center; }
.access-route-value > span { color: var(--muted); }
.access-route-track { grid-column: 1 / -1; height: 1rem; background: var(--panel-2); }
.access-route-track > span { display: block; width: var(--access-share); height: 100%; background: var(--cyan); }
.access-route-list a:hover .access-route-label { text-decoration: underline; text-underline-offset: .2em; }
.access-scale { display: flex; justify-content: space-between; margin-top: .6rem; color: var(--muted); font: .7rem var(--font-mono); }
.access-matrix-section { margin-top: 3rem; }
.access-combos-section { margin-top: 3rem; }
.access-combo-members { margin: .5rem 0 0; padding-left: 1.1rem; max-height: 16rem; overflow: auto; }
.access-combo-members li { margin: 0 0 .3rem; }
.access-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; }
.access-matrix caption { text-align: left; color: var(--muted); font-size: .85rem; padding-bottom: 1rem; }
.access-matrix th, .access-matrix td { padding: .8rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.access-matrix thead th { font-size: .8rem; font-weight: 500; color: var(--muted); }
.access-matrix th:first-child { width: 31%; padding-left: 0; }
.access-matrix tbody th { font-size: .95rem; font-weight: 500; }
.access-matrix small { display: block; margin-top: .3rem; font: .7rem var(--font-mono); color: var(--muted); }
.access-cell { display: grid; position: relative; grid-template-columns: 1fr auto; gap: .3rem; padding: .7rem .5rem 1rem; font: .8rem var(--font-mono); color: var(--text); text-decoration: none; background: var(--panel-2); }
.access-cell strong { font-size: 1rem; }
.access-cell > span:not(.access-cell-bar) { align-self: center; color: var(--muted); }
.access-cell-bar { position: absolute; bottom: 0; left: 0; height: .25rem; width: var(--access-share); background: var(--cyan); }
a.access-cell:hover { background: var(--sage-soft); text-decoration: underline; }
.explore-method { margin-top: 2rem; border-top: 1px solid var(--line); padding-block: 1.2rem; }
.explore-method summary { cursor: pointer; font-weight: 600; }
.explore-method p { max-width: 75ch; color: var(--muted); }
@media (max-width: 600px) {
  .access-route-list a, .access-route-list li > div { grid-template-columns: 1fr; gap: .4rem; }
  .access-matrix th, .access-matrix td { padding: .65rem .2rem; }
  .access-matrix thead th, .access-matrix tbody th { font-size: .75rem; }
  .access-cell { grid-template-columns: 1fr; padding: .6rem .3rem .8rem; font-size: .7rem; }
  .access-matrix small { font-size: .7rem; }
}

.tabs { display: flex; align-self: center; align-items: center; gap: 1.4rem; padding: 0; border: 0; border-radius: 0; background: none; }
.tab,
.tab-link {
  position: relative;
  text-decoration: none;
  padding: .3rem .05rem .5rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
}
.tab::after, .tab-link::after { display: none; }
.tab:hover, .tab-link:hover { color: var(--text); }
.tab.is-active, .tab-link.is-active { background: none; color: var(--text); box-shadow: none; border-bottom-color: var(--text); }
.tab:focus-visible, .tab-link:focus-visible { outline-offset: 2px; }
.docs-menu { position: relative; display: flex; align-items: center; }
.docs-menu-list {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 20;
  min-width: 12rem;
  margin: 0;
  padding: .35rem;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(140%);
}
.docs-menu-list button,
.docs-menu-list a {
  display: block;
  width: 100%;
  padding: .5rem .7rem;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}
.docs-menu-list button:hover,
.docs-menu-list a:hover { background: var(--glass-weak); color: var(--text); }
/* The blog header reuses this menu without app.js, so its toggle is a
   native disclosure. The summary reads as a tab; the marker would double
   the affordance. */
details.docs-menu > summary { list-style: none; cursor: pointer; }
details.docs-menu > summary::-webkit-details-marker { display: none; }
details.docs-menu > summary::marker { content: ""; }
.header-tools { display: flex; align-items: center; gap: .5rem; justify-self: end; }
.theme-toggle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--glass-weak);
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.theme-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.theme-toggle::before { content: "◐"; }
:root[data-theme="light"] .theme-toggle::before { content: "☼"; }
:root[data-theme="dark"] .theme-toggle::before { content: "☾"; }
.github-link {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--glass-weak);
  color: var(--muted);
  text-decoration: none;
}
.github-link svg { width: 18px; height: 18px; fill: currentColor; }
.github-link:hover { color: var(--text); border-color: var(--line-strong); }
.suggest-link {
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0 .75rem;
  border: 1px solid var(--cyan);
  border-radius: var(--radius-control);
  background: var(--cyan);
  color: var(--on-accent);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.suggest-link:hover { color: var(--on-accent); border-color: var(--cyan-deep); background: var(--cyan-deep); }

main { width: min(1360px, calc(100% - 3rem)); margin: 0 auto; }
.view { display: none; padding: clamp(3.5rem, 7vw, 7rem) 0; }
.view.is-active { display: block; }
#directory.view { padding-top: clamp(2.6rem, 5vw, 5rem); }
.eyebrow {
  margin-bottom: 1rem;
  color: var(--cyan);
  font: 700 .68rem var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1, h2, h3 { font-family: var(--font-display); }
h1 {
  max-width: 1120px;
  margin: 0 0 1.7rem;
  font-size: clamp(3rem, 6.3vw, 6.4rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .96;
}
.hero-copy,
.section-heading > p:last-child {
  max-width: 790px;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.65;
}
.status-notice { border-left: 3px solid var(--amber); }
.link-button { padding: 0; border: 0; background: none; color: var(--cyan); font: inherit; text-decoration: underline; cursor: pointer; }
.link-button:hover { color: var(--cyan-bright); }

/* The kicker and heading sit outside the front door, so the heading stays in
   the page for focus in results, where it is visually hidden (showResults). */
.door-kicker { padding-top: 1rem; }
.front-door { display: grid; gap: 1.4rem; }
.front-door[hidden] { display: none; }
.front-door-copy { max-width: 820px; }
.front-door-copy .hero-copy { margin-top: 0; }
.door-title { max-width: 820px; font-size: clamp(2.6rem, 5vw, 4.6rem); }
.door-title span { color: var(--cyan); }
.door-search { max-width: 820px; }
.door-jobs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.door-jobs-label { margin: 0; color: var(--muted); font: 500 .68rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.door-jobs ul { display: contents; list-style: none; }
.door-job { padding: .45rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-chip); background: var(--glass-weak); color: var(--text); font: 500 .85rem var(--font-body); cursor: pointer; }
.door-job:hover { border-color: var(--cyan); color: var(--cyan); }
.stage-tabs { align-self: stretch; width: 100%; border-bottom: 1px solid var(--line); }
.stage-tabs .tab { font-size: .95rem; }
/* Elements is a taxonomy map, not a ranking or a claim of physical periodicity. */
.elements { margin-block: .5rem 1rem; }
.elements-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; margin-bottom: 1rem; }
.elements-heading h2 { margin: 0; font: 600 1.15rem var(--font-display); }
.elements-heading p { margin: 0; color: var(--muted); font: .75rem var(--font-mono); }
.element-groups { display: grid; grid-template-columns: 1fr 1.2fr .65fr; gap: 1.3rem; }
.element-group { min-width: 0; --element-ink: var(--cyan); }
.element-group[data-element-family="agent_system"] { --element-ink: var(--coral); }
.element-group[data-element-family="assistant_system"] { --element-ink: var(--violet); }
.element-family-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem; border-top: 2px solid var(--element-ink); padding-top: .6rem; margin-bottom: .75rem; }
.element-family-heading h3 { margin: 0; font-size: .9rem; }
.element-family-heading > span { color: var(--muted); font: .7rem var(--font-mono); }
.element-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.element-group[data-element-family="assistant_system"] .element-tiles { grid-template-columns: 1fr; }
.element-tile,
.finder-goal { display: grid; position: relative; align-content: space-between; gap: .55rem; min-height: 112px; padding: .7rem; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); background: color-mix(in srgb, var(--element-ink) 7%, var(--panel)); cursor: pointer; }
.element-tile:hover,
.finder-goal:hover { background: color-mix(in srgb, var(--element-ink) 15%, var(--panel)); }
.element-tile[aria-pressed="true"],
.finder-goal[aria-pressed="true"] { outline: 2px solid var(--element-ink); outline-offset: 1px; }
.element-tile:disabled,
.finder-goal:disabled { opacity: .55; cursor: default; }.element-symbol { color: var(--element-ink); font: 500 1.8rem var(--font-mono); letter-spacing: -.06em; }
.element-count { position: absolute; top: .55rem; right: .6rem; color: var(--muted); font: .7rem var(--font-mono); }
.element-name { font: .73rem/1.3 var(--font-body); overflow-wrap: anywhere; }
/* Keep organization previews subordinate to role symbols and names. The strip
   reserves its height before the logos load and disappears when a role has no
   lab to preview, so tiles do not resize when the marks arrive. */
.element-marks { display: flex; align-items: center; gap: .2rem; min-height: 20px; color: var(--muted); font: .65rem var(--font-mono); }
.element-marks .card-mark { width: 20px; height: 20px; border: 0; background: transparent; }
.element-marks .card-mark svg { width: 16px; height: 16px; }
.element-more-mobile { display: none; }
#element-record-name { display: flex; align-items: center; gap: .6rem; }
#element-record-name > span:last-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .element-marks .card-mark:nth-child(3), .element-more-desktop { display: none; }
  .element-more-mobile { display: inline; }
}
.element-note { margin-block: 1rem 0; color: var(--muted); font: .75rem/1.6 var(--font-body); max-width: 95ch; }
.collection-index-heading { margin-top: .25rem; }
@media (max-width: 1000px) {
  .element-groups { grid-template-columns: 1fr 1.2fr .7fr; gap: .8rem; }
  .element-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .element-tile { min-height: 110px; }
}
@media (max-width: 700px) {
  .element-groups { grid-template-columns: 1fr; gap: 1.3rem; }
  .element-tiles, .element-group[data-element-family="assistant_system"] .element-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .element-tile { min-height: 116px; padding: .6rem; }
  .element-name { font-size: .75rem; }
}
.collection-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.tile { position: relative; display: grid; align-content: start; gap: .5rem; padding: .85rem .9rem 2.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.tile-wide { grid-column: span 2; }
.tile-open { display: grid; grid-template-columns: auto 1fr; gap: .25rem .55rem; align-items: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tile-open .badge-emblem { grid-row: span 2; width: 1.7rem; height: 1.7rem; color: var(--slate-ink); }
/* A tile with no emblem (Robots) stacks its name over its count like the rest. */
.tile-open:not(:has(.badge-emblem)) { grid-template-columns: 1fr; }
.tile-name { font-weight: 600; }
.tile-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.tile-count strong { color: var(--cyan-bright); font: 700 1.05rem var(--font-mono); letter-spacing: -.02em; }
.tile-count small { color: var(--muted); font: .68rem var(--font-mono); }
.tile-categories { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.tile-category { padding: .15rem .5rem; border: 0; border-radius: var(--radius-chip); background: var(--chip-bg); color: var(--chip-ink); font: .7rem var(--font-body); cursor: pointer; }
.tile-category:hover { color: var(--cyan); }
.tile-category strong { font: 700 .62rem var(--font-mono); }
.tile-marks { position: absolute; right: .9rem; bottom: .8rem; display: flex; }
.tile-marks .card-mark { width: 24px; height: 24px; margin-left: -.35rem; border-radius: var(--radius-pill); background: var(--panel-2); }
.tile-marks .card-mark:first-child { margin-left: 0; }
.tile-marks .card-mark svg { width: 14px; height: 14px; }
.tile-marks .card-monogram { font-size: .62rem; }
.state-dot { position: absolute; right: .8rem; top: .8rem; width: .55rem; height: .55rem; border-radius: var(--radius-pill); background: var(--coral); box-shadow: 0 0 0 2px var(--panel); }
.state-dot.is-finder { background: var(--violet); }
.scope-strip { position: sticky; top: var(--header-height, 88px); z-index: 9; margin: 0 0 1rem; padding: .5rem 0 .4rem; border-bottom: 1px solid var(--line); background: var(--header-bg); backdrop-filter: blur(20px) saturate(140%); }
.scope-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.scope-entry { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .35rem .75rem .35rem .45rem; border: 1px solid transparent; border-radius: var(--radius-chip); background: transparent; color: var(--muted); font: 600 .84rem var(--font-body); cursor: pointer; }
.scope-entry .badge-emblem { width: 1.3rem; height: 1.3rem; color: var(--slate-ink); }
.scope-monogram { display: grid; flex: none; place-items: center; width: 1.3rem; height: 1.3rem; border: 1.5px solid currentColor; border-radius: var(--radius-pill); color: var(--slate-ink); font: 700 .66rem var(--font-display); }
.scope-entry:hover { border-color: var(--line); color: var(--text); background: var(--glass); }
.scope-entry.is-active { border-color: var(--text); background: var(--text); color: var(--on-ink); box-shadow: var(--shadow-small); }
.scope-entry.is-active .badge-emblem, .scope-entry.is-active .scope-monogram { color: var(--on-ink); }
/* The frame's fill mixes toward the panel colour, which on the ink pill would
   bury the glyph; the pressed emblem is drawn as outline only. */
.scope-entry.is-active .badge-frame { fill: none; }
.scope-short { display: none; }
.scope-count { color: var(--cyan); font: 700 .68rem var(--font-mono); }
.scope-entry.is-active .scope-count { color: inherit; }
.scope-entry .state-dot { right: -.15rem; top: -.15rem; }
.scope-caption { display: none; margin: .35rem 0 0; color: var(--text); font: 600 .8rem var(--font-body); }
.family-row { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.family-entry { padding: .25rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-chip); background: var(--glass-weak); color: var(--muted); font: 500 .78rem var(--font-body); cursor: pointer; }
.family-entry strong { font: 700 .62rem var(--font-mono); color: var(--cyan); }
.family-entry.is-active { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--cyan); }
.collection-panel[hidden] { display: none; }
/* The results bar: one search for every collection, the collection's Sort,
   and Cards | List. It sticks under the strip at every width (PR 478). The
   filters are the rail above 1000 px and the Filters button's sheet below
   it (ruling R-T3-13), so the bar holds no drawer. */
.results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .75rem; padding: .5rem 0; position: sticky; top: calc(var(--header-height, 88px) + var(--strip-height, 0px)); z-index: 8; background: var(--header-bg); backdrop-filter: blur(20px) saturate(140%); }
.results-bar[hidden] { display: none; }
.results-bar .results-search { flex: 1 1 18rem; min-width: 0; }
.results-sort label { display: flex; align-items: center; gap: .45rem; }
.results-sort label[hidden] { display: none; }
.layout-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-control); }
.layout-toggle button { min-height: 34px; padding: .35rem .7rem; border: 0; background: transparent; color: var(--muted); font: 600 .78rem var(--font-body); cursor: pointer; }
.layout-toggle button + button { border-left: 1px solid var(--line); }
.layout-toggle button[aria-pressed="true"] { background: var(--text); color: var(--on-ink); }
@media (max-width: 767px) {
  .layout-toggle { display: none; }
}
/* At 1000 px and below the Filters button joins the bar beside the search
   box, which gives it room, so the Sort and Cards | List keep their own row
   whole and the bar stays two rows on a phone. Below them, a third row
   would push every result 56 px down. */
@media (max-width: 1000px) {
  .results-bar .results-search { flex-basis: 12rem; }
}
/* The score rule under each result count, with the collection's facts. */
.scope-note { margin: 0 0 .75rem; color: var(--muted); font-size: .78rem; }
.scope-note-facts { color: var(--text); font-weight: 600; }
.scope-note button { padding: 0; border: 0; background: transparent; color: var(--cyan); cursor: pointer; font-weight: 600; }
.scope-note button:hover { color: var(--text); }
/* The rail beside the results above 1000 px; a sheet from the bar's
   Filters button below it (Phase 3 spec, section 3). The rail ends above
   the badge legend and the comparison tray, as app.js measures them into
   --bottom-clearance, so no value sits under either. Its height fits under
   its lowest top, where the frame starts (--frame-top) until the page
   scrolls it up to its sticky place, so it clears them at every scroll.
   The front door hides the frame, whatever layout class it carries.
   A focused control's ring, 2 px drawn 3 px out, must fit inside the
   scroller that holds it, or the scroller clips the stroke its edge meets
   (review N1). Every edge gets 8 px, the ring's 5 px and 3 px to spare,
   since a scroll lands on whole pixels. The rail is inset 8 px on its left,
   where its controls start, and a negative margin gives the 8 px back, so
   its values still start where the search box does; its height is
   untouched, since the clearances above size it. Its scroll-padding keeps
   a control that Tab scrolls to 8 px inside the top and bottom edges. */
.results-frame { display: block; }
#results-frame[hidden] { display: none; }
@media (min-width: 1001px) {
  .results-frame.has-rail { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .filter-rail { position: sticky; top: calc(var(--chrome-height, 0px) + .5rem); max-height: calc(100vh - max(var(--chrome-height, 0px) + .5rem, var(--frame-top, 0px)) - var(--bottom-clearance, 0px) - 1rem); overflow-y: auto; margin-left: -8px; padding: 0 .25rem 0 8px; scroll-padding-block: 8px; }
  .filters-button { display: none; }
}
@media (max-width: 1000px) {
  .filter-rail { display: none; }
}
/* The rail's first stop skips it, shown only while it has focus, as the
   page's own skip link is (review I5). It sits 8 px below the rail's top,
   so its ring shows above it too (review N1). */
.rail-skip { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rail-skip:focus { position: static; width: auto; height: auto; margin: 8px 0 .75rem; padding: .45rem .8rem; overflow: visible; clip: auto; border-radius: var(--radius-chip); background: var(--text); color: var(--on-ink); cursor: pointer; }
.filter-group { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.filter-group legend { margin: 0 0 .35rem; padding: 0; color: var(--muted); font: 700 .66rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.filter-option { display: flex; align-items: center; gap: .45rem; padding: .15rem 0; font-size: .82rem; cursor: pointer; }
/* A value is a plain radio and plain text, not the text field and field
   caption the page's input and label rules style. */
.filter-option input { flex: none; width: 1rem; height: 1rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--cyan); }
.filter-option span { margin: 0; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; }
.filter-option .filter-count { margin-left: auto; color: var(--muted); font: 500 .7rem var(--font-mono); }
.filter-option:has(input:disabled) { color: var(--faint); cursor: default; }
.filter-more { font-size: .78rem; }
.filter-note { margin: 0 0 .75rem; color: var(--muted); font-size: .72rem; }
/* The chips row sticks under the results bar, and the result row under it
   (PR 479), so the active constraints and the count stay in view while the
   results scroll (ruling R-T3-13). */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: .25rem 0; position: sticky; top: calc(var(--header-height, 88px) + var(--strip-height, 0px) + var(--results-bar-height, 0px)); z-index: 7; background: var(--header-bg); }
.filter-chips[hidden] { display: none; }
.filter-chip-list { display: contents; }
.filter-chip { padding: .25rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--glass-weak); color: var(--text); font-size: .78rem; cursor: pointer; }
.filter-chip:hover { border-color: var(--cyan); }
/* Glues the removal glyph to the chip's last word so a narrow chip never
   wraps the × onto a line by itself. */
.filter-chip > span[aria-hidden="true"] { white-space: nowrap; }
/* Clear keeps to one line wherever it sits; beside a long count at 390 px
   the count wraps instead, so the result row stays one count and one
   control (review N3). */
#clear-filters { white-space: nowrap; }
.filter-sheet { width: min(100%, 32rem); max-height: 85vh; margin: auto auto 0; padding: 1rem 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: var(--panel); color: var(--text); box-shadow: var(--shadow-dialog); }
/* The open sheet is a column: its groups scroll inside it, without carrying
   the page along, and "Show N results" stays at its foot, in view while the
   reader chooses (review I3). Scoped to [open], so the closed dialog keeps
   the display: none it is given. */
.filter-sheet[open] { display: flex; flex-direction: column; }
.filter-sheet::backdrop { background: var(--backdrop); }
.filter-sheet h2 { margin: 0 0 .75rem; font: 700 1rem var(--font-display); }
/* The groups, the sheet's scroller, are inset 8 px at the sides and given
   the 8 px back by a negative margin, as the rail is, so a focused value's
   whole ring fits inside them while the values stay in line with the title;
   their scroll-padding keeps a control that Tab scrolls to 8 px inside the
   top and bottom edges (review N1). Their top and bottom stay put, so the
   ring the groups draw when they hold focus clears the title and the button. */
.filter-sheet .filter-groups { flex: 1 1 auto; min-height: 0; margin: 0 -8px; padding: 0 8px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 8px; }
#filter-sheet-done { flex: none; width: 100%; margin-top: .5rem; }
#directory.view.is-results { padding-top: .75rem; }

label span {
  display: block;
  margin: 0 0 .42rem .1rem;
  color: var(--muted);
  font: 600 .59rem var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
input, select {
  width: 100%;
  min-height: 42px;
  padding: .66rem .72rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  outline: none;
  background: var(--panel);
  color: var(--text);
  font-size: .84rem;
}
input::placeholder { color: var(--faint); }
input:hover, select:hover { border-color: var(--line-strong); }
input:focus, select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 12%, transparent);
}
.check-field { display: flex; align-items: end; gap: .55rem; padding-bottom: .62rem; }
.check-field input { width: 1rem; min-height: auto; height: 1rem; accent-color: var(--cyan); }
.check-field span { margin: 0; font-size: .68rem; }

.result-row {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  position: sticky;
  top: calc(var(--header-height, 88px) + var(--strip-height, 0px) + var(--results-bar-height, 0px) + var(--chips-height, 0px));
  z-index: 7;
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(140%);
  color: var(--muted);
  font-size: .86rem;
}
.ghost-button,
.primary-button {
  min-height: 40px;
  padding: .65rem .9rem;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-weight: 500;
}
.ghost-button { border: 1px solid var(--line-strong); background: transparent; color: var(--muted); }
.ghost-button:hover { border-color: var(--text); color: var(--text); }
.primary-button { border: 1px solid var(--cyan); background: var(--cyan); color: var(--on-accent); }
.primary-button:hover { border-color: var(--cyan-deep); background: var(--cyan-deep); }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.15rem;
  color: var(--muted);
  font-size: .84rem;
}
.pager-size { display: flex; align-items: center; gap: .5rem; }
.pager-size span { color: var(--muted); font: 600 .59rem var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.pager-size select { width: auto; min-height: 34px; padding: .3rem .5rem; }
.pager-nav { display: flex; align-items: center; gap: .65rem; }
.pager-nav .ghost-button { min-height: 34px; padding: .35rem .7rem; }
.pager-nav .ghost-button:disabled { opacity: .45; cursor: default; }
.pager-nav .ghost-button:disabled:hover { border-color: var(--line-strong); color: var(--muted); }

.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
.project-grid.is-list { display: block; overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
/* Break long words only once a column is already too narrow. `anywhere` on every
   cell let Score, Local-first, and review dates shrink to a few characters while
   Deployment and Licenses kept the width. */
.results-table th, .results-table td { padding: .65rem .5rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line); overflow-wrap: break-word; }
.results-table thead th { border-top: 0; white-space: nowrap; overflow-wrap: normal; color: var(--muted); font: 600 .62rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.results-table .link-button { font: 600 .95rem var(--font-display); letter-spacing: -.02em; }
.results-table .card-badges { margin-top: .35rem; }
.results-table .name-cell { min-width: 12rem; }
.results-table .role-cell { min-width: 9.5rem; }
/* Shrink-to-fit: a 1% width with nowrap sizes the column to its text, so a date,
   a score, or "No GitHub metrics" cannot be broken to feed a wider prose column. */
.results-table .fit-cell,
.results-table .compare-cell { width: 1%; white-space: nowrap; overflow-wrap: normal; }
.results-table .token-cell { overflow-wrap: anywhere; }
.project-card {
  min-height: 340px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass-strong);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--cyan);
}
.project-card.agent_system { background: var(--card-agent); }
.project-card.agent_system::before { background: var(--coral); }
.project-card.assistant_system { background: var(--card-assistant); }
.project-card.assistant_system::before { background: var(--violet); }
.specification-card { min-height: 360px; background: var(--card-spec); }
.specification-card::before { background: var(--violet); }
.inference-service-card { min-height: 380px; background: var(--card-inference); }
.inference-service-card::before { background: var(--blue); }
.local-runtime-card { min-height: 380px; background: var(--card-runtime); }
.local-runtime-card::before { background: var(--amber); }
.agent-pack-card { min-height: 380px; background: var(--card-pack); }
.agent-pack-card::before { background: var(--cyan); }
.lab-card { min-height: 360px; background: var(--card-lab); }
.lab-card::before { background: var(--slate-ink); }
.robot-card { min-height: 380px; background: var(--card-robot); }
.robot-card::before { background: var(--violet); }
.mixed-directory-card { min-height: 330px; }
.project-card:hover {
  transform: translateY(-4px);
  border-color: var(--hover-line);
  box-shadow: var(--shadow);
}
.card-top { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.card-identity { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.card-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-top: .1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  color: var(--text);
}
.card-mark svg { width: 20px; height: 20px; fill: currentColor; }
.card-monogram { color: var(--muted); font: 600 1.05rem var(--font-display); }
/* A card's geography: the headquarters country of the lab it joins to, and any
   reviewed research location (ADR 052, ADR 053). Flags overlap on the mark's
   bottom-right corner; each extra circle steps 9px to the right. */
.card-mark-wrap { position: relative; flex: none; display: grid; }
.card-flags {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  pointer-events: none;
}
.card-flag {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel);
  font-size: .68rem;
  line-height: 1;
  overflow: hidden;
  pointer-events: none;
}
.card-flag + .card-flag { margin-left: -9px; }
.family-label {
  margin: 0 0 .42rem;
  color: var(--muted);
  font: 700 .58rem var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.card-top h2 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.045em;
}
.repo { margin-top: .3rem; color: var(--muted); font: .72rem var(--font-mono); }
.score-ring {
  min-width: 54px;
  padding: .38rem .45rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-chip);
  color: var(--cyan);
  background: var(--glass);
  font: 700 .9rem var(--font-mono);
  text-align: center;
}
.status-badge {
  max-width: 120px;
  padding: .38rem .48rem;
  border: 1px solid var(--status-line);
  border-radius: var(--radius-chip);
  background: var(--status-bg);
  color: var(--status-ink);
  font: 600 .63rem var(--font-mono);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
.role-badge {
  display: inline-flex;
  align-self: flex-start;
  margin: 1.2rem 0 .75rem;
  padding: .3rem .52rem;
  border-radius: var(--radius-chip);
  background: var(--sage-soft);
  color: var(--sage-ink);
  font: 700 .58rem var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.memory_system .role-badge { background: var(--blue-soft); color: var(--blue-ink); }
.agent_system .role-badge { background: var(--sand-soft); color: var(--sand-ink); }
.assistant_system .role-badge { background: var(--violet-soft); color: var(--violet-ink); }
.specification-card .role-badge { background: var(--slate-soft); color: var(--slate-ink); }
.inference-service-card .role-badge { background: var(--blue-soft); color: var(--blue-ink); }
.local-runtime-card .role-badge { background: var(--amber-soft); color: var(--amber-ink); }
.lab-card .role-badge { background: var(--slate-soft); color: var(--slate-ink); }
.license-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: -.25rem 0 .75rem;
}
/* A reviewed-model card has no role pill above its licence row, so the
   negative offset above (which sits the row under a pill's own bottom
   margin) would pull it up into card-top instead. Restore the pill's own
   top margin so the row sits the same distance below the card's identity
   row as everywhere else. Imported cards keep their pill, so this excludes
   them. */
.model-card:not(.imported-model-card) .license-row {
  margin-top: 1.2rem;
}
.license-badge,
.source-badge,
.review-badge {
  padding: .25rem .42rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  background: var(--bg-elevated);
  color: var(--muted);
  font: 600 .62rem var(--font-mono);
}
.source-badge {
  border-color: var(--sage-line);
  background: var(--sage-soft);
  color: var(--sage-ink);
  font-family: var(--font-body);
}
.review-badge {
  border-color: var(--amber-line);
  background: var(--amber-soft);
  color: var(--amber-ink);
  font-family: var(--font-body);
}
/* The description absorbs spare height, so the footer sits at the bottom of
   every card whether or not a badge or tags row follows it. */
.project-card > p { flex-grow: 1; margin: .2rem 0 0; color: var(--muted); font-size: .91rem; line-height: 1.6; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: 1rem; }
.tags span {
  padding: .28rem .45rem;
  border-radius: var(--radius-chip);
  background: var(--chip-bg);
  color: var(--chip-ink);
  font: .62rem var(--font-mono);
}
/* The row sits above the card's details target, so it shrinks to its emblems:
   the card beside the row still opens the record, while a near miss between
   emblems stays inert. It still wraps once the emblems outgrow the card. */
.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  width: fit-content;
  margin: 0;
  padding: 1rem 0 0;
  list-style: none;
}
.card-badge {
  display: inline-flex;
  cursor: help;
}
[data-family="type"] { color: var(--slate-ink); }
[data-family="control"] { color: var(--cyan); }
[data-family="capability"] { color: var(--violet); }
[data-family="platform"] { color: var(--amber); }
[data-family="flags"] { color: var(--danger); }
.badge-emblem {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
}
.badge-frame {
  fill: color-mix(in srgb, currentColor 13%, var(--panel));
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.badge-glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.badge-glyph .badge-dot,
.badge-glyph text { fill: currentColor; stroke: none; }
.badge-glyph text { font: 700 6.4px var(--font-mono); }
.badge-tooltip {
  position: fixed;
  z-index: 40;
  display: grid;
  gap: .15rem;
  width: min(17rem, calc(100vw - 1rem));
  padding: .6rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-dialog);
  font-size: .8rem;
  line-height: 1.45;
}
.badge-tooltip[hidden] { display: none; }
.badge-tooltip-family { font: 600 .6rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.badge-tooltip-name { color: var(--text); font-size: .86rem; }
.badge-tooltip-definition { color: var(--muted); }
/* The strip is fixed over the bottom of the viewport as one slim scrolling row:
   the Key label, the scrolling emblem list, the All badges link, and the close
   button never wrap. Script measures its height into --legend-h, and the rules
   below keep content clear of it. */
.badge-legend {
  position: fixed;
  inset: auto 0 0;
  z-index: 25;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .5rem .75rem;
  padding: .35rem max(.75rem, calc((100% - 1360px) / 2));
  border-top: 1px solid var(--line-strong);
  background: var(--panel-glass);
  backdrop-filter: blur(10px);
  font-size: .74rem;
  overflow: hidden;
}
.badge-legend[hidden], .badge-legend-chip[hidden] { display: none; }
.badge-legend-title { margin: 0; flex: none; color: var(--muted); font: 600 .62rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.badge-legend-items { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: .4rem .8rem; min-width: 0; margin: 0; padding: 0 0 .1rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; white-space: nowrap; list-style: none; }
.badge-legend-items li { display: inline-flex; flex: none; align-items: center; gap: .35rem; white-space: nowrap; }
.badge-legend-items span { color: var(--text); font-weight: 600; }
.badge-legend .badge-emblem { width: 1.15rem; height: 1.15rem; flex: none; }
.badge-legend-more { flex: none; margin-left: auto; color: var(--cyan); font-weight: 600; white-space: nowrap; }
.badge-legend-close { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.badge-legend-close:hover { color: var(--text); }
.badge-legend-chip {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 25;
  padding: .4rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-dialog);
  color: var(--text);
  font: 600 .72rem var(--font-body);
  cursor: pointer;
}
/* The strip is always one row tall, so clearance uses the measured --legend-h. Scroll padding keeps
   focused and scrolled-to elements above the strip; the footer's margin, the
   only bottom clearance, lets the page's end scroll clear of it. */
html:has(body.has-badge-legend) { scroll-padding-bottom: var(--legend-h); }
body.has-badge-legend footer { margin-bottom: var(--legend-h); }
/* Raised above the card's details target for its hover title, so it shrinks
   to its text and the card beside the text still opens the record. */
.card-source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  width: fit-content;
  padding-top: .55rem;
  color: var(--muted);
  font: .62rem var(--font-mono);
}
.card-source-meta span:not(.visually-hidden) + span::before { content: "·"; margin-right: .35rem; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.card-footer {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font: .7rem var(--font-mono);
}
.card-footer button,
.finder-result-footer button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cyan);
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}
.card-footer button:hover,
.finder-result-footer button:hover { color: var(--text); }
/* The details control's target covers its whole card; the card's own controls,
   its emblem row, and its hover-titled facts sit above it, so a tap on an
   emblem only opens its tooltip and Compare only toggles. */
.card-open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.project-card .card-badges,
.project-card .compare-toggle,
.project-card .card-source-meta,
.project-card .license-badge,
.project-card .lab-related,
.finder-result .card-badges,
.finder-result .license-badge {
  position: relative;
  z-index: 2;
}
.project-card:has(.card-open:focus-visible),
.finder-result:has(.card-open:focus-visible) {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.card-actions { display: flex; align-items: center; gap: .8rem; }
.card-footer .compare-toggle,
.results-table .compare-toggle {
  padding: .3rem .5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}
.card-footer .compare-toggle:hover,
.results-table .compare-toggle:hover { border-color: var(--cyan); color: var(--cyan); }
.card-footer .compare-toggle.is-selected,
.results-table .compare-toggle.is-selected {
  border-color: var(--cyan);
  background: var(--sage-soft);
  color: var(--cyan);
}
.card-stars { white-space: nowrap; }
.archived { color: var(--amber); font-weight: 500; }

.taxonomy-content { display: grid; gap: 1rem; margin-top: 3.5rem; }
.taxonomy-group {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-glass);
  box-shadow: var(--shadow-small);
}
.taxonomy-group h2 { margin: 0 0 1.2rem; font-size: 1.25rem; font-weight: 600; }
.taxonomy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.taxonomy-item { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.taxonomy-item strong { color: var(--text); font-size: .9rem; font-weight: 600; }
.taxonomy-item p { margin-bottom: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.taxonomy-lede { margin: -.3rem 0 .8rem; color: var(--muted); font-size: .9rem; }
.taxonomy-item .badge-emblem { float: right; margin-left: .6rem; }
.api-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2.4rem; }
.api-facts article { padding: 1.4rem 1.4rem 1.4rem 0; border-top: 2px solid var(--line-strong); }
.api-facts h2 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 600; }
.api-facts p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.65; }

.endpoint-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.endpoint {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-small);
}
.endpoint h2 { margin: 0; font-size: .95rem; font-weight: 700; }
.endpoint-link { color: var(--cyan); font: 700 .88rem var(--font-mono); text-decoration: none; word-break: break-all; }
.endpoint-link:hover { text-decoration: underline; }
.endpoint p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.6; }
.endpoint-shape { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line); color: var(--faint); font-size: .72rem; }
.endpoint-shape code { font-size: .72rem; }

.api-notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2.4rem; }
.api-notes article { padding: 1.4rem 1.4rem 1.4rem 0; border-top: 2px solid var(--line-strong); }
.api-notes h2 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 600; }
.api-notes p { margin: 0 0 .7rem; color: var(--muted); font-size: .88rem; line-height: 1.65; }
.api-notes p:last-child { margin-bottom: 0; }

#api code { padding: .1rem .3rem; border-radius: var(--radius-chip); background: var(--chip-bg); color: var(--chip-ink); font: 600 .8em var(--font-mono); }

.definitions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.definitions article { padding: 1.4rem; border-top: 2px solid var(--line-strong); background: transparent; }
.definitions h2 { margin: 0; font-size: 1.15rem; font-weight: 600; }
.definitions p { color: var(--muted); font-size: .9rem; line-height: 1.65; }
.notice {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--amber-line);
  border-radius: var(--radius-chip);
  background: var(--amber-soft);
  color: var(--amber-ink);
}

/* The Finder is the front door's role map with the priority axis added: five
   counted goal columns in the family inks, then the shortlist. Its goal tiles
   ARE element tiles (styles.css above), so its density is the door's by
   construction rather than by parallel rules that can drift apart. */
#finder { padding-block: clamp(2rem, 4vw, 3.2rem) clamp(3.5rem, 7vw, 7rem); }
.finder-heading { max-width: 980px; }
.finder-heading h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.finder-heading > p:last-child { max-width: 70ch; }
/* Two lines, reserved, so choosing a goal — which makes the status line name a
   label, a count, and a ranking — does not shove the tile grid down under the
   pointer. Below 720px the grid is one tall column and the shortlist is far
   past the fold anyway, so the reservation would only read as a gap. */
@media (min-width: 721px) {
  .finder-heading > p:last-child { min-height: 3.3em; }
}
.finder-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.3rem; }
.finder-group { min-width: 0; --element-ink: var(--cyan); }
.finder-group[data-finder-direction="agent_system"] { --element-ink: var(--coral); }
.finder-group[data-finder-direction="assistant_system"] { --element-ink: var(--violet); }
.finder-group[data-finder-direction="inference_service"] { --element-ink: var(--blue); }
.finder-group[data-finder-direction="local_runtime"] { --element-ink: var(--amber); }
.finder-goals { display: grid; grid-template-columns: 1fr; gap: .4rem; }
/* The door's tile spaces a symbol above its name; a goal tile has only a name,
   and its count sits in the door's own corner, so the name centres instead. */
.finder-goal { min-height: 72px; align-content: center; }
.finder-priorities { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.finder-priorities-label { color: var(--muted); font: 500 .68rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.finder-priority[aria-checked="true"] { border-color: var(--cyan); background: var(--cyan); color: var(--on-accent); }
.finder-priority[aria-checked="true"]:hover { color: var(--on-accent); }
.finder-result-heading { margin: 2.6rem 0 1.5rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.finder-result-heading > div { max-width: 760px; }
.finder-result-heading h2 { margin: .35rem 0 .5rem; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; }
.finder-result-heading p,
.finder-disclaimer { color: var(--muted); line-height: 1.65; }
.finder-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.15rem; }
/* The shortlist is a directory card, so "Browse matches" does not change the
   subject: the same frame, the same family accent rule, the same measure. */
.finder-result {
  min-height: 340px;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass-strong);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative; /* Keeps the details control's stretched target inside the result. */
}
.finder-result::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--cyan); }
.finder-result.agent_system { background: var(--card-agent); }
.finder-result.agent_system::before { background: var(--coral); }
.finder-result.assistant_system { background: var(--card-assistant); }
.finder-result.assistant_system::before { background: var(--violet); }
.finder-result.inference_service { background: var(--card-inference); }
.finder-result.inference_service::before { background: var(--blue); }
.finder-result.local_runtime { background: var(--card-runtime); }
.finder-result.local_runtime::before { background: var(--amber); }
.finder-result-top { display: flex; align-items: flex-end; justify-content: space-between; }
.finder-rank { color: var(--faint); font: 500 1.4rem var(--font-mono); }
.finder-result h3 { margin: .2rem 0 .7rem; font-size: 1.55rem; font-weight: 700; letter-spacing: -.045em; }
.finder-result p { color: var(--muted); line-height: 1.55; }
.finder-why { margin-top: auto; padding-top: 1rem; }
.finder-why > strong { color: var(--cyan); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.finder-tradeoff { font-size: .84rem; }
.finder-tradeoff strong { color: var(--amber); }
.finder-result-footer {
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  color: var(--muted);
  font-size: .74rem;
}
.finder-disclaimer { max-width: 900px; margin: 1.5rem auto 0; font-size: .78rem; text-align: center; }

dialog {
  width: min(840px, calc(100% - 2rem));
  max-height: 88vh;
  padding: 1.7rem;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-dialog);
}
dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(5px); }
/* A record name can hold one word wider than a phone line, such as "(DeepReinforce)". */
dialog h1 { overflow-wrap: break-word; }
.dialog-close { float: right; border: 0; background: transparent; color: var(--muted); font-size: 1.8rem; cursor: pointer; }
.dialog-close:hover { color: var(--text); }
.comparison-tray {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 30;
  width: min(940px, calc(100% - 2rem));
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.comparison-tray[hidden] { display: none; }
.comparison-tray-copy { min-width: 0; display: grid; gap: .14rem; }
.comparison-tray-copy .eyebrow { margin: 0; font-size: .6rem; }
.comparison-tray-copy strong { font-family: var(--font-display); font-size: 1rem; }
.comparison-tray-copy > span {
  overflow: hidden;
  color: var(--muted);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comparison-tray-copy small { min-height: 1.05rem; color: var(--amber); }
.comparison-tray-actions { display: flex; flex: 0 0 auto; gap: .55rem; }
.comparison-tray-actions button:disabled {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--faint);
  cursor: not-allowed;
}
.comparison-dialog { width: min(1240px, calc(100% - 2rem)); padding: 1.5rem; }
.comparison-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-right: 2.5rem; }
.comparison-heading h1 { margin: .1rem 0 .35rem; font-size: clamp(2rem, 4vw, 3.5rem); }
.comparison-heading p { max-width: 820px; color: var(--muted); }
.comparison-heading .ghost-button { flex: 0 0 auto; margin-bottom: .35rem; }
.comparison-copy-status { margin: 0 0 1rem; color: var(--muted); font-size: .78rem; }
.comparison-table-wrap {
  max-height: 62vh;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
}
.comparison-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .84rem;
}
.comparison-table th,
.comparison-table td {
  min-width: 205px;
  padding: .75rem .8rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.48;
}
.comparison-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 180px;
  background: var(--panel-2);
}
.comparison-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--text);
  color: var(--on-ink);
  font-family: var(--font-display);
  font-size: .92rem;
}
.comparison-table thead th:first-child { z-index: 4; background: var(--ink-2); }
.comparison-table tr:last-child > * { border-bottom: 0; }
.comparison-table tr > *:last-child { border-right: 0; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; }
.detail-block { padding: 1.05rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.detail-block h3 { margin-top: 0; color: var(--text); font-size: 1rem; font-weight: 600; }
.detail-block p { color: var(--muted); line-height: 1.55; }
.detail-block li { margin: .5rem 0; color: var(--muted); line-height: 1.5; }
.score-table { width: 100%; border-collapse: collapse; }
.score-table td { padding: .45rem; border-bottom: 1px solid var(--line); }
.score-table td:last-child { color: var(--cyan); font-weight: 600; text-align: right; }
.unscored-note { padding-top: .8rem; border-top: 1px solid var(--line); font-size: .82rem; }
/* The trust table spans both grid columns. Three columns of prose do not fit in one
   385px cell: at 1440px the label column held one word per line. A record's trust record
   is one thing read down a column rather than four, so it takes the dialog's full width
   and the other blocks keep their two-up pairing. */
.detail-block:has(.trust-table) { grid-column: 1 / -1; }
.trust-table {
  width: 100%; border-collapse: collapse;
  /* Fixed layout, because the automatic one sizes every column by its content and the
     prose column is now wrappable, which leaves the label column with whatever is left. */
  table-layout: fixed;
}
.trust-table td { padding: .45rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); line-height: 1.45; }
.trust-table td:nth-child(1) { width: 26%; }
/* The status is one of three short enum words, so it never needs to wrap and must not be
   broken mid-word by the `anywhere` its sibling prose needs. The share has to hold the
   longest of them plus its own padding, or the word butts against the note beside it. */
.trust-table td:nth-child(2) { width: 18%; white-space: nowrap; font-weight: 600; color: var(--text); }
.trust-table td:nth-child(3) { width: 56%; }
/* A record's own prose, and the URLs its trust notes and license scopes quote, carry
   runs with no break points. An element's min-content width is its longest such run,
   so one long URL widens its cell or paragraph, then the block, then the grid track
   holding it, and the dialog scrolls sideways: on 2026-09-30 every inference dialog
   did at 390px, the worst by 288px. `anywhere` rather than `break-word` because the
   min-content width itself has to shrink for the track to shrink; `break-word` only
   breaks once the line is already too long. `minmax(0, 1fr)` above is the other half,
   since a `1fr` track floors at its content's min-content width however well that
   content wraps. The same reason `.lab-channel-link` below carries this already. */
.detail-block, .detail-block p, .detail-block li, .detail-block td, .detail-block h3, .detail-block h4 { overflow-wrap: anywhere; }
.detail-block h4 { margin: 1rem 0 .4rem; color: var(--text); font-size: .92rem; font-weight: 600; }
.detail-block .risk-quote { margin: .6rem 0; padding: .1rem 0 .1rem .9rem; border-left: 3px solid var(--line-strong); color: var(--text); }
.evidence-date { margin-left: .35rem; color: var(--muted); font: .7rem var(--font-mono); }
/* Lab cards name a few joined records inline; the row layout matches the dialog
   release list so names and dates do not run together when markup has no space
   between the link and the date span. */
.lab-related { margin-top: .75rem; }
.lab-related-group + .lab-related-group { margin-top: .65rem; }
.lab-related-label {
  margin: 0 0 .35rem;
  color: var(--muted);
  font: 700 .58rem var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lab-related-list { margin: 0; padding: 0; list-style: none; }
.lab-related-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .2rem .75rem;
  padding: .28rem 0;
  border-top: 1px solid var(--line);
}
.lab-related-list li:first-child { border-top: 0; padding-top: 0; }
.lab-related-list .link-button { text-align: left; }
.lab-related-date { flex: none; color: var(--muted); font: .7rem var(--font-mono); }
.lab-related-more button { color: var(--cyan); font-weight: 600; }
.lab-release-list { margin: .5rem 0 .8rem; padding: 0; list-style: none; }
.lab-release-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .75rem; padding: .35rem 0; border-top: 1px solid var(--line); }
.lab-release-list .link-button { text-align: left; }
/* A channel shows its URL, which has no break points; letting it wrap keeps the
   one-column phone grid from widening to the longest URL. */
.lab-channel-link { overflow-wrap: anywhere; }

footer {
  width: min(1360px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 1.75rem 0 2rem;
  border-top: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: minmax(0, 62ch) auto;
  justify-content: space-between;
  align-items: start;
  column-gap: 2rem;
  row-gap: .35rem;
  color: var(--muted);
  font-size: .76rem;
  text-align: left;
}
.footer-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 1.25rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); }
.footer-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 38px; color: var(--text); font-weight: 600; text-decoration: none; }
.footer-nav a:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: .25em; }
footer #data-date, footer .footer-meta {
  grid-column: 2;
  grid-row: 2 / span 2;
  font: 500 .68rem var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .search-field { grid-column: 1 / -1; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .finder-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .site-header { grid-template-columns: 1fr auto auto; column-gap: .75rem; }
}

/* Between tablet and wide desktop the full names would wrap the strip to two
   or three rows, so each entry shows its short name; the full name stays
   the accessible name, clipped as on phones. Nine full names measure about
   1300 px, so they wait for the content column's 1360 px cap, at 1408 px. */
@media (min-width: 1001px) and (max-width: 1407px) {
  .scope-entry .scope-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .scope-entry .scope-short { display: inline; }
  .scope-row { gap: .2rem; }
  .scope-entry { gap: .3rem; padding: .3rem .5rem .3rem .3rem; font-size: .8rem; }
  .scope-entry .badge-emblem, .scope-monogram { width: 1.15rem; height: 1.15rem; }
}

/* Up to tablet width even short names wrap the strip (they measure 898 px,
   so they need a 1001 px viewport for 16 px of slack), so entries are emblems
   only and the pressed entry's name and count read as the caption under the
   one row. The strip sticks beneath the header at every width. */
@media (max-width: 1000px) {
  .scope-strip { padding: .4rem 0 .35rem; }
  .scope-row { flex-wrap: nowrap; gap: .2rem; }
  .scope-entry { min-height: 0; padding: .2rem; gap: 0; }
  .scope-entry .badge-emblem, .scope-monogram { width: 1.2rem; height: 1.2rem; }
  .scope-entry .scope-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .scope-entry .scope-short { display: none; }
  .scope-entry .scope-count { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .scope-caption { display: block; margin-top: .2rem; }
  .family-row { margin-top: .3rem; }
}

@media (max-width: 720px) {
  main, footer { width: min(100% - 1.5rem, 1360px); }
  .site-header { min-height: 64px; padding: .5rem .75rem; grid-template-columns: auto 1fr auto; column-gap: .5rem; }
  .wordmark { font-size: .85rem; }
  .header-tools { gap: .25rem; }
  .theme-toggle, .github-link { width: 32px; height: 36px; }
  .brand small { display: none; }
  .tabs { flex-wrap: nowrap; justify-content: center; gap: .5rem; min-width: 0; }
  .stage-tabs { flex-wrap: wrap; justify-content: flex-start; row-gap: .1rem; column-gap: .85rem; }
  .tab, .tab-link { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: .3rem 0; font-size: .72rem; white-space: nowrap; }
  /* A button-anchored popup would hang off the viewport on a phone, where
     the Docs entry sits far from the right edge: the menu becomes a sheet
     under the header instead, on both the app and the blog header. */
  .docs-menu { position: static; }
  .tabs .docs-menu-list { left: .75rem; right: .75rem; top: 100%; min-width: 0; }
  h1 { font-size: clamp(2.7rem, 13vw, 4.5rem); }
  .collection-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .tile { padding: .7rem .75rem 2.5rem; }
  /* The index must start above an 812 px phone fold under the header, with
     room for CI's wider Linux text; the five jobs wrap one to a line here. */
  .door-kicker { padding-top: .5rem; }
  .front-door { gap: 1rem; }
  .door-title { margin-bottom: 1rem; font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .front-door .hero-copy { font-size: 1rem; line-height: 1.55; }
  .door-jobs { gap: .4rem; }
  .door-job { padding: .35rem .7rem; font-size: .8rem; }
  /* Inside Systems the family row stays one row under the caption, so the
     sticky strip stays under 80 px below the sticky header on a phone:
     tighter spacing, smaller text, and "All families" reads "All" (its full
     name stays the accessible name through the clipped rest). */
  .scope-strip { padding: .3rem 0; }
  .scope-caption { margin-top: .1rem; font-size: .74rem; line-height: 1.2; }
  .family-row { flex-wrap: nowrap; gap: .25rem; margin-top: .2rem; }
  .family-entry { position: relative; padding: .1rem .4rem; font-size: .62rem; line-height: 1.3; white-space: nowrap; }
  .family-entry strong { font-size: .62rem; }
  .family-entry:not(.is-active) strong { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .family-rest { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .view, #directory.view { padding: 2.6rem 0; }
  .definitions, .taxonomy-grid { grid-template-columns: 1fr; }
  .api-facts, .endpoint-list, .api-notes { grid-template-columns: 1fr; }
  .search-field { grid-column: 1 / -1; }
  .project-grid,
  .finder-results { grid-template-columns: 1fr; }
  .finder-groups { grid-template-columns: 1fr; gap: 1.3rem; }
  .finder-goal { min-height: 64px; }
  .finder-result-heading { align-items: flex-start; flex-direction: column; }
  .finder-result-heading .primary-button { width: 100%; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  /* Three columns of prose do not fit a phone: at 390px the label column held one word
     per line. Each property becomes its own labelled block instead, which is why the
     status cell carries the property name for a screen reader to read with it rather than
     relying on a column header it no longer has. The declared column shares are reset,
     since a percentage still applies to a cell laid out as a block. */
  .trust-table, .trust-table tbody, .trust-table tr, .trust-table td { display: block; }
  /* Fixed layout is what sizes the columns from the declared shares, and those shares
     still bound a cell laid out as a block; without this the label cell stays 68px. Each
     reset repeats the selector it overrides, since a shorter one is the weaker rule and
     the desktop share would simply win. */
  .trust-table { table-layout: auto; }
  .trust-table td { border-bottom: 0; }
  .trust-table td:nth-child(1), .trust-table td:nth-child(2), .trust-table td:nth-child(3) { width: auto; }
  .trust-table tr { padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .trust-table tr:last-child { border-bottom: 0; }
  .trust-table td:nth-child(1) { font-weight: 600; color: var(--text); }
  .trust-table td:nth-child(2) { white-space: normal; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
  .trust-table td:nth-child(3) { margin-top: .3rem; }
  .comparison-tray { align-items: stretch; flex-direction: column; }
  .comparison-tray-actions button { flex: 1; }
  .comparison-heading { align-items: stretch; flex-direction: column; padding-right: 1.5rem; }
  .comparison-heading .ghost-button { align-self: flex-start; }
  .comparison-dialog { padding: 1rem; }
  footer { padding: 1.5rem 0 1.75rem; grid-template-columns: 1fr; }
  footer #data-date, footer .footer-meta { grid-column: 1; grid-row: auto; margin-top: .5rem; text-align: left; }
}

@media (max-width: 360px) {
  .site-header { padding-inline: .5rem; column-gap: .35rem; }
  .wordmark { font-size: .75rem; }
  .tabs { gap: .4rem; }
  .tab, .tab-link { font-size: .68rem; }
}

@media (max-width: 460px) {
  .search-field { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

.record-link { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .2rem 0 1rem; }
.record-link-status { color: var(--muted); font: .72rem var(--font-mono); }

/* Blog pages share this shell and its tokens; they trade the catalog grid for a reading measure. */
.writing-page footer { width: min(46rem, calc(100% - 3rem)); }
.writing-page main { width: min(72rem, calc(100% - 3rem)); }
.writing-layout { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 46rem); gap: clamp(1.5rem, 3vw, 3rem); justify-content: center; align-items: start; }
.post-nav { position: sticky; top: 1.2rem; padding-top: clamp(2.6rem, 5vw, 4.5rem); }
.post-nav-heading { margin: 0 0 .9rem; font: 600 .68rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.post-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.post-nav-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .6rem; }
.post-nav-list a { padding: .35rem .5rem; border-radius: var(--radius-chip); color: var(--text); text-decoration: none; font-size: .95rem; line-height: 1.35; }
.post-nav-list a:hover { background: var(--chip-bg); color: var(--cyan); }
.post-nav-list li.current a { background: var(--chip-bg); color: var(--cyan); }
.post-nav-list .post-nav-date { color: var(--muted); font: .68rem var(--font-mono); }
.writing { padding: clamp(2.6rem, 5vw, 4.5rem) 0 3rem; }
.writing h1 { max-width: none; margin: 0 0 1rem; font-size: clamp(2.3rem, 5vw, 3.6rem); letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
.writing .lead { margin: 0 0 1.1rem; color: var(--muted); font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.6; text-wrap: pretty; }
.byline { margin: 0 0 2.4rem; color: var(--muted); font: 500 .68rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.byline time { white-space: nowrap; }
.writing h2 { margin: 2.4rem 0 .8rem; font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: -.025em; line-height: 1.15; }
.writing p, .writing li { font-size: 1.02rem; line-height: 1.68; }
.writing p { margin: 0 0 1.1rem; }
.writing ul { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.writing li { margin: .35rem 0; }
.writing blockquote { margin: 1.3rem 0; padding: .15rem 0 .15rem 1.1rem; border-left: 3px solid var(--cyan); color: var(--muted); }
.writing blockquote p { margin: 0; }
.writing code { padding: .1rem .3rem; border-radius: var(--radius-chip); background: var(--chip-bg); color: var(--chip-ink); font: 600 .84em var(--font-mono); }
.writing pre { margin: 0 0 1.2rem; padding: 1rem 1.1rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font: .84rem/1.55 var(--font-mono); }
.writing pre code { padding: 0; background: none; color: inherit; font: inherit; }
.writing hr { margin: 2.4rem 0 1.6rem; border: 0; border-top: 1px solid var(--line-strong); }
.writing hr ~ p { color: var(--muted); font-size: .94rem; }
.post-list { display: grid; gap: .9rem; margin-top: 1.6rem; }
.post-card { padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-small); }
.post-card h2 { margin: 0 0 .5rem; font-size: 1.4rem; letter-spacing: -.025em; line-height: 1.15; }
.post-card h2 a { color: var(--text); text-decoration: none; }
.post-card h2 a:hover { color: var(--cyan); }
.post-card p { margin: 0 0 .6rem; color: var(--muted); font-size: .98rem; line-height: 1.6; }
.post-card .byline { margin: 0; }
.footer-meta a { color: inherit; }
@media (max-width: 720px) {
  .writing-page main, .writing-page footer { width: min(100% - 1.5rem, 46rem); }
  .writing-layout { grid-template-columns: 1fr; }
  .post-nav { position: static; padding-top: 0; }
  .post-nav-list { grid-template-columns: 1fr; }
}
/* The query's result count, beside the input, so typing shows its effect
   without scrolling. The live count in the result row stays the announced one. */
.search-field { position: relative; }
.search-field:has(.search-count:not(:empty)) input { padding-right: 6.5rem; }
.search-count {
  position: absolute;
  right: .8rem;
  bottom: .7rem;
  color: var(--muted);
  font: 500 .72rem var(--font-mono);
}
.job-hint {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem 1rem;
  margin: 0 0 1rem;
  padding: .7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line));
  border-radius: var(--radius);
  background: var(--sage-soft);
  color: var(--sage-ink);
  font-size: .9rem;
}
/* The flex display above would otherwise override the hidden attribute. */
.job-hint[hidden] { display: none; }
.job-hint strong { color: var(--text); }
/* One message, not a card: it spans the grid, at a readable measure. */
.empty-search { grid-column: 1 / -1; max-width: 70ch; }
.empty-search p { margin: 0 0 .5rem; }
.empty-search p:last-child { margin-bottom: 0; }
/* The link colour falls below 4.5:1 on these tinted surfaces in the light
   palette, so their links and link buttons take the surface's own ink. The
   underline still marks each one, and hover thickens it rather than
   switching to the brighter link colour. */
.empty-search :is(a, .link-button),
.job-hint .link-button { color: inherit; }
.empty-search :is(a, .link-button):hover,
.job-hint .link-button:hover { color: inherit; text-decoration-thickness: 2px; }

/* The app's mobile shell leaves the shared desktop/blog header unchanged. */
.mobile-nav, .element-family-tabs { display: none; }
.mobile-more { width: min(32rem, calc(100% - 1.5rem)); padding: 1.25rem; }
.mobile-more-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.mobile-more-heading h2 { font: 600 1.2rem var(--font-display); }
.mobile-more nav { display: grid; margin-block: 1rem; }
.mobile-more nav > * { display: block; min-height: 48px; padding: .75rem 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.mobile-more .header-tools { justify-self: stretch; flex-direction: column; gap: .5rem; }
.mobile-more .theme-toggle, .mobile-more .github-link { width: 100%; min-height: 48px; height: auto; grid-template-columns: 24px 1fr; gap: .75rem; padding: .5rem .75rem; text-align: left; justify-items: start; }
.mobile-more .theme-toggle::after, .mobile-more .github-link::after { content: attr(aria-label); font: .85rem var(--font-body); }

@media (max-width: 767px) {
  body.atlas-app { --mobile-nav-h: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--mobile-nav-h); }
  html:has(body.atlas-app) { scroll-padding-bottom: calc(var(--legend-h, 0px) + 80px + env(safe-area-inset-bottom, 0px)); }
  .atlas-app .site-header { min-height: 56px; grid-template-columns: 1fr; padding: .5rem 1rem; }
  .atlas-app .site-header .tabs { display: none; }
  .atlas-app .site-header .brand { justify-self: center; }
  .atlas-app .brand small { display: none; }
  .atlas-app .wordmark { font-size: 1rem; }
  .atlas-app #directory.view:not(.is-results) { padding-top: 1.25rem; }
  .atlas-app .door-kicker { display: none; }
  .atlas-app .door-title { margin-block: 0 .6rem; font-size: 2.2rem; max-width: 22rem; }
  .atlas-app .front-door { gap: .75rem; }
  .atlas-app .front-door .hero-copy { margin-bottom: 0; font-size: .95rem; }
  .atlas-app .desktop-explore-link { display: none; }
  .atlas-app .door-search, .atlas-app .door-jobs { display: none; }
  .atlas-app .elements { margin: 0; }
  .atlas-app .elements > .elements-heading { display: none; }
  .element-family-tabs { display: flex; margin-bottom: .6rem; border-bottom: 1px solid var(--line); }
  .element-family-tabs button { flex: 1; min-height: 48px; padding: .5rem .25rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: 500 .85rem var(--font-body); cursor: pointer; }
  .element-family-tabs button[aria-pressed="true"] { border-bottom-color: var(--cyan); color: var(--cyan); }
  .atlas-app .element-groups { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .atlas-app .element-group:not(.mobile-family-active) { display: none; }
  .atlas-app .element-family-heading { border: 0; padding: 0; margin-bottom: .5rem; }
  .atlas-app .element-family-heading h3 { font-size: .8rem; }
  .atlas-app .element-tiles, .atlas-app .element-group[data-element-family="assistant_system"] .element-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .atlas-app .element-tile { min-height: 94px; padding: .5rem; gap: .3rem; }
  .atlas-app .element-symbol { font-size: 1.5rem; }
  .atlas-app .element-name { font-size: .7rem; }
  .atlas-app .element-note { font-size: .7rem; line-height: 1.45; margin-top: .65rem; }
  .atlas-app .collection-index-heading { margin: .5rem 0 0; }
  .atlas-app .collection-index-heading p { display: none; }
  .atlas-app .collection-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .atlas-app .tile { padding: .6rem; }
  .atlas-app .tile-categories, .atlas-app .tile-marks { display: none; }
  .atlas-app .tile-open { min-height: 48px; }
  .atlas-app .tile-name { font-size: .85rem; }
  .atlas-app .tile-count small { font-size: .65rem; }
  .atlas-app .tile-wide { order: 1; }
  .mobile-nav { display: flex; position: fixed; inset: auto 0 0; z-index: 30; min-height: var(--mobile-nav-h); padding: .25rem max(.25rem, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(.25rem, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--line); background: var(--panel); }
  .mobile-nav button { display: flex; flex: 1; min-width: 0; min-height: 60px; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; border: 0; background: none; color: var(--muted); font: 500 .7rem var(--font-body); cursor: pointer; }
  .mobile-nav svg { width: 22px; height: 22px; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-nav button[aria-current="page"] { color: var(--cyan); }
  .atlas-app .badge-legend { bottom: var(--mobile-nav-h); }
  .atlas-app .badge-legend-chip, .atlas-app .comparison-tray { bottom: calc(var(--mobile-nav-h) + .75rem); }
  .atlas-app:has(.comparison-tray:not([hidden])) { padding-bottom: calc(var(--mobile-nav-h) + 180px); }
  .atlas-app.mobile-keyboard .mobile-nav, .atlas-app.mobile-keyboard .badge-legend, .atlas-app.mobile-keyboard .badge-legend-chip { display: none; }
  .atlas-app.mobile-keyboard .comparison-tray { position: static; margin: 1rem; width: auto; transform: none; }
}