/* ---------- Open source area (/open-source, /open-source/postern) ----------
 *
 * Ported from the design repo's `opensource/opensource.css` (prototype commit
 * b44d5b0). Only the `.os-*` component layer is here: the prototype ships a
 * standalone page, so its file also restates the tokens, the nav, the buttons,
 * the chips, the eyebrow and the footer — all of which this app already has in
 * the shell and head bundles. Restating them would have put a second copy of
 * the top bar's rules one sheet away from the real one.
 *
 * The prototype is authored at data-theme="dark" on the `.sx` div, so it writes
 * the dark values unprefixed and overrides for light. This app is the mirror of
 * that in both respects — data-theme lives on the root element and the default
 * is light — so every literal below is inverted from the prototype: the light
 * value is unprefixed and the dark one sits under [data-theme="dark"]. Copying
 * the prototype's nesting across renders the dark palette in light mode, on a
 * 200, with nothing in the console (CLAUDE.md records this; it is the reason
 * this comment exists rather than a diff being enough).
 */

/* Page-local status tones. Deliberately the same four values as
 * css/sx-postern-status.css's --pstat-* ramp: the two pages describe the same
 * report, and a subsystem reading amber on one and red on the other would be
 * the platform disagreeing with itself. They are page-scoped rather than
 * global, so — like that sheet's — they need their own dark re-flip; a token
 * declared only in the light block paints its light value in both themes. */
body.open-source-page {
  --os-ok: #187841;
  --os-degraded: #975B00;
  --os-down: #C82143;
  --os-unknown: var(--sx-text-2);
}
[data-theme="dark"] body.open-source-page {
  --os-ok: #6EE7A1;
  --os-degraded: #F5B454;
  --os-down: #F47B7B;
  --os-unknown: var(--sx-text-2);
}

/* ---------- Hero ----------
 * .sx-hero / .sx-hero-bg / .sx-hero-grid come from the shell bundle, including
 * the negative-margin rule that lets the band escape base.html's 1200px
 * .container. Only the prototype's tighter padding and its own type scale are
 * restated here. */
.open-source-page .os-hero { padding: 72px 0 40px; }
.open-source-page .os-hero h1 {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  max-width: 24ch;
}
.open-source-page .os-hero .os-lede {
  margin-top: 18px;
  font-size: 17px;
  color: var(--sx-text-2);
  max-width: 62ch;
  line-height: 1.6;
}
.open-source-page .os-hero .os-lede--lead {
  margin-top: 14px;
  font-size: 19px;
  color: var(--sx-text);
}
.os-actions {
  margin-top: 26px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Fact strip under the hero. */
.os-strip {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 18px 0;
  border-top: 1px solid var(--sx-line);
  border-bottom: 1px solid var(--sx-line);
}
.os-strip > div { padding: 0 24px; border-left: 1px solid var(--sx-line); }
.os-strip > div:first-child { border-left: 0; padding-left: 0; }
.os-strip .label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
.os-strip .val {
  font-family: var(--sx-font-display, 'Geist', system-ui, sans-serif);
  font-size: 20px;
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.os-strip .val .sub { color: var(--sx-text-3); font-size: 14px; font-weight: 400; }
.os-strip .val.mono {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 17px;
  font-weight: 500;
}

/* ---------- Section scaffolding ---------- */
.os-body { padding-top: 56px; padding-bottom: 40px; }
.os-section + .os-section { margin-top: 64px; }
.os-notice + .os-section { margin-top: 56px; }
.os-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.os-section-head h2 { font-size: 26px; font-weight: 600; }
.os-section-head .sub {
  color: var(--sx-text-2);
  font-size: 14px;
  margin-top: 8px;
  max-width: 64ch;
  line-height: 1.6;
}
.open-source-page .os-link {
  color: var(--sx-brand-text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.open-source-page .os-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Pull-quote — the postern the protocol is named after. */
.os-quote {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 2px solid var(--sx-brand-3);
  color: var(--sx-text-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 66ch;
  background: linear-gradient(90deg, rgba(91,124,255,0.06), transparent 70%);
}

/* ---------- Draft notice ---------- */
.os-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  border-radius: var(--sx-r-lg, 14px);
  background: rgba(199,120,0,0.05);
  box-shadow: 0 0 0 1px rgba(199,120,0,0.25) inset;
}
[data-theme="dark"] .os-notice {
  background: rgba(245,180,84,0.05);
  box-shadow: 0 0 0 1px rgba(245,180,84,0.28) inset;
}
.os-notice .ico {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sx-warn);
  background: rgba(245,180,84,0.10);
  box-shadow: 0 0 0 1px rgba(245,180,84,0.30) inset;
}
.os-notice h3 { font-size: 15px; font-weight: 600; color: var(--sx-text); }
.os-notice p {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--sx-text-2);
  line-height: 1.6;
  max-width: 74ch;
}
.open-source-page .os-notice a {
  color: #B45309;
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-theme="dark"] .open-source-page .os-notice a { color: var(--sx-warn); }

/* ---------- The four verbs ---------- */
.os-verbs {
  border-radius: var(--sx-r-lg, 14px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  overflow: hidden;
}
.os-verb {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  padding: 20px 24px;
  border-top: 1px solid var(--sx-line);
  align-items: start;
}
.os-verb:first-child { border-top: 0; }
.os-verb .name {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 15px;
  font-weight: 500;
  color: var(--sx-text);
  display: flex;
  align-items: center;
  gap: 9px;
}
.os-verb .name .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sx-brand-3);
  flex-shrink: 0;
}
.os-verb p { font-size: 14px; color: var(--sx-text-2); line-height: 1.6; }
.os-verb .path {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  color: var(--sx-text-3);
  margin-top: 8px;
}
.os-ceiling {
  margin-top: 14px;
  font-size: 13px;
  color: var(--sx-text-3);
  line-height: 1.6;
  max-width: 74ch;
}
.os-ceiling b { color: var(--sx-text-2); font-weight: 500; }

/* ---------- Install ---------- */
.os-install { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.os-pkg {
  padding: 22px;
  border-radius: var(--sx-r-lg, 14px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.os-pkg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.os-pkg-head .t {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.os-pkg-head .t .ico {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text-2);
}
.os-pkg p { font-size: 13px; color: var(--sx-text-2); line-height: 1.6; }
.os-cmd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--sx-r-md, 10px);
  background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  color: var(--sx-text);
  overflow-x: auto;
}
.os-cmd .p { color: var(--sx-text-3); flex-shrink: 0; }
.os-cmd code { white-space: nowrap; }
/* min-height:0 opts out of responsive.css's 44px site-wide tap-target floor,
 * which beats `height` and would otherwise render this 26px control at 44px
 * beside the 22px chip in the same row (CLAUDE.md). */
.open-source-page .os-copy {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  min-height: 0;
  padding: 0 10px;
  border-radius: var(--sx-r-sm, 6px);
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text-2);
  font-family: var(--sx-font-body);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, box-shadow 120ms ease;
}
.open-source-page .os-copy:hover { color: var(--sx-text); box-shadow: 0 0 0 1px var(--sx-line-2) inset; }
.open-source-page .os-copy.is-done { color: var(--os-ok); box-shadow: 0 0 0 1px rgba(31,157,85,0.35) inset; }
[data-theme="dark"] .open-source-page .os-copy.is-done { box-shadow: 0 0 0 1px rgba(110,231,161,0.35) inset; }
.os-pkg-note {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--sx-text-3);
  line-height: 1.55;
  padding-top: 12px;
  border-top: 1px solid var(--sx-line);
  margin-top: auto;
}

/* ---------- Repository contents ---------- */
.os-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.os-res-item {
  padding: 18px;
  border-radius: var(--sx-r-md, 10px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.os-res-item:hover { background: var(--sx-surface-2); box-shadow: 0 0 0 1px var(--sx-line-2) inset; }
.os-res-item .path {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  color: var(--sx-brand-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.os-res-item .desc { font-size: 13px; color: var(--sx-text-2); line-height: 1.55; margin-top: 2px; }
.os-res-item .count {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--sx-text-3);
}

/* ---------- Appendix A ---------- */
.os-log {
  border-radius: var(--sx-r-lg, 14px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  padding: 26px;
}
.os-log-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--sx-line);
}
.os-log-head .ver {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 14px;
  font-weight: 500;
  color: var(--sx-text);
}
.os-log-head .note { font-size: 13px; color: var(--sx-text-3); }
/* The appendix is vendored whole — 39 entries of specification prose and growing —
   so the list scrolls in its own region rather than adding ~6000px to the page. The
   fade marks the cut: without it a list clipped mid-entry reads as one that ended. */
.os-log-scroll {
  max-height: 520px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 18px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
.os-log-scroll:focus-visible { outline: 2px solid var(--sx-brand-text, currentColor); outline-offset: 3px; }
/* The mask hides the last entry's descenders otherwise. */
.os-log-scroll ul { padding-bottom: 28px; }
.os-log ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.os-log-empty { color: var(--sx-text-3); }
.os-log li {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  font-size: 13.5px;
  color: var(--sx-text-2);
  line-height: 1.6;
}
.os-log li .ref {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--sx-text-3);
  padding-top: 2px;
}
/* Upstream's stamp, under the citation it shares a column with. Block rather
   than inline so a wrapped citation cannot leave the date mid-line, and
   tabular figures so a column of ISO dates aligns on its own digits. Every
   colour here is a token, so the dark theme follows without a second block. */
.os-log li .ref .os-when {
  display: block;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
/* A shade brighter than the citation, and dotted rather than solid: this is
   the one thing in the column that can be clicked, and it should read as
   interactive without competing with the prose beside it. */
.os-log li .ref .os-when a {
  color: var(--sx-text-2);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.os-log li .ref .os-when a:hover,
.os-log li .ref .os-when a:focus-visible {
  color: var(--sx-brand-text, var(--sx-text));
  text-decoration-style: solid;
}
.os-log li .ref .os-when a:focus-visible {
  outline: 2px solid var(--sx-brand-text, currentColor);
  outline-offset: 2px;
  border-radius: 2px;
}
.os-log li code {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px;
  color: var(--sx-text);
  background: var(--sx-bg);
  padding: 1px 5px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.os-log-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--sx-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--sx-text-3);
}

/* ---------- Contribute ---------- */
.os-contrib {
  padding: 28px;
  border-radius: var(--sx-r-xl, 20px);
  background: radial-gradient(600px 220px at 100% 0%, rgba(26,31,107,0.10), transparent 60%), var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: center;
}
[data-theme="dark"] .os-contrib {
  background: radial-gradient(600px 220px at 100% 0%, rgba(61,77,255,0.18), transparent 60%), var(--sx-surface);
}
.os-contrib h2 { font-size: 24px; font-weight: 600; max-width: 22ch; }
.os-contrib p { margin-top: 10px; font-size: 14px; color: var(--sx-text-2); max-width: 54ch; line-height: 1.6; }
.os-contrib-links { display: grid; gap: 8px; }
.os-contrib-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--sx-r-md, 10px);
  background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  font-size: 13px;
  color: var(--sx-text-2);
  transition: box-shadow 120ms ease, color 120ms ease;
}
.os-contrib-link:hover { color: var(--sx-text); box-shadow: 0 0 0 1px var(--sx-line-2) inset; }
.os-contrib-link .f {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  color: var(--sx-text-3);
}

/* ---------- Project card (index) ---------- */
.os-projects { display: grid; gap: 14px; }
.os-project {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px;
  padding: 28px;
  border-radius: var(--sx-r-xl, 20px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  transition: box-shadow 160ms ease, background 160ms ease;
}
.os-project:hover {
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset, 0 16px 40px -22px rgba(14,19,32,0.16);
}
[data-theme="dark"] .os-project:hover {
  box-shadow: 0 0 0 1px var(--sx-line-2) inset, 0 16px 40px -22px rgba(0,0,0,0.7);
}
.os-project-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.os-project h3 { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; margin-top: 14px; }
/* Not `.tag`, which the prototype calls it: base.css declares a bare `.tag`
 * pill site-wide, and it ships in the head bundle. A `.os-project .tag`
 * out-specifies it on the properties it names and inherits the rest — so the
 * tagline rendered as a rounded, bordered, filled pill with correct type
 * inside it. Renaming removes the collision instead of restating six
 * properties to fight it. */
.os-project .os-tagline { font-size: 14px; color: var(--sx-text-2); margin-top: 8px; max-width: 46ch; line-height: 1.55; }
.os-project .body { font-size: 13.5px; color: var(--sx-text-2); margin-top: 16px; line-height: 1.65; max-width: 56ch; }
.os-project-actions { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.os-project-facts {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  border-radius: var(--sx-r-lg, 14px);
  background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  overflow: hidden;
}
.os-project-facts .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  border-top: 1px solid var(--sx-line);
  font-size: 13px;
}
.os-project-facts .row:first-child { border-top: 0; }
.os-project-facts .row .k { color: var(--sx-text-3); }
.os-project-facts .row .v {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px;
  color: var(--sx-text);
}
.os-project-facts .verbs {
  padding: 14px 16px;
  border-top: 1px solid var(--sx-line);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.os-project-facts .verbs span {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--sx-text-2);
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}

/* ---------- Three commitments ---------- */
.os-tenets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.os-tenet {
  padding: 22px;
  border-radius: var(--sx-r-lg, 14px);
  background: transparent;
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.os-tenet .n {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--sx-text-3);
}
.os-tenet h3 { font-size: 16px; font-weight: 600; margin-top: 12px; }
.os-tenet p { font-size: 13px; color: var(--sx-text-2); margin-top: 8px; line-height: 1.6; }

/* ---------- Organisation band ---------- */
.os-org {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border-radius: var(--sx-r-lg, 14px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  flex-wrap: wrap;
}
.os-org .l { display: flex; align-items: center; gap: 14px; }
.os-org .ico {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text-2);
}
.os-org .t { font-size: 15px; font-weight: 600; }
.os-org .d { font-size: 13px; color: var(--sx-text-3); margin-top: 3px; }
.os-org .os-org-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.os-org .handle {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px;
  color: var(--sx-text-3);
}

/* ---------- Status ----------
 * Rendered from the same report /status/postern serves, so `data-state` is a
 * real verdict rather than a fixed "operational": a hardcoded green here would
 * be a claim this page cannot stand behind, and it would contradict the status
 * page during the one hour it matters. */
.os-status {
  border-radius: var(--sx-r-lg, 14px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  overflow: hidden;
}
.os-status-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--sx-line);
  flex-wrap: wrap;
}
.os-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--os-tone, var(--os-ok));
  background: color-mix(in srgb, var(--os-tone, var(--os-ok)) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--os-tone, var(--os-ok)) 32%, transparent) inset;
  font-size: 12.5px;
  font-weight: 600;
}
.os-status-pill .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}
.os-status-endpoint {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  color: var(--sx-text-3);
}
.os-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 15px 22px;
  border-top: 1px solid var(--sx-line);
}
.os-status-row:first-of-type { border-top: 0; }
.os-status-row .l { font-size: 14px; font-weight: 500; color: var(--sx-text); }
.os-status-row .d { font-size: 12.5px; color: var(--sx-text-3); margin-top: 4px; line-height: 1.5; }
.os-status-row .s {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--os-tone, var(--os-ok));
  font-weight: 500;
  white-space: nowrap;
}
.os-status-row .s .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
[data-state="operational"] { --os-tone: var(--os-ok); }
[data-state="degraded"]    { --os-tone: var(--os-degraded); }
[data-state="down"]        { --os-tone: var(--os-down); }
[data-state="unknown"]     { --os-tone: var(--os-unknown); }
.os-status-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-top: 1px solid var(--sx-line);
  background: var(--sx-bg);
  flex-wrap: wrap;
}
.os-status-foot .note {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--sx-text-3);
  line-height: 1.55;
}

@media (max-width: 1000px) {
  .os-install { grid-template-columns: 1fr; }
  .os-res { grid-template-columns: 1fr 1fr; }
  .os-tenets { grid-template-columns: 1fr; }
  .os-project { grid-template-columns: 1fr; }
  .os-contrib { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .open-source-page .os-hero h1 { font-size: 38px; }
  .os-strip { grid-template-columns: 1fr 1fr; gap: 18px; }
  .os-strip > div { border-left: 0; padding: 0; }
  .os-verb { grid-template-columns: 1fr; gap: 10px; }
  .os-res { grid-template-columns: 1fr; }
  .os-log li { grid-template-columns: 1fr; gap: 4px; }
}