/* Generated from packages/design/web/src/css/*.css by packages/design/scripts/build.mjs. Do not edit; edit the partial and run the generator. */
/* ---- src/css/base.css ---- */
:root { --rails-css: 1; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--card); color: var(--ink);
  font-family: var(--type-family); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: var(--type-body-weight);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
:where(h1) {
  font-size: var(--type-large-title-size); line-height: var(--type-large-title-line);
  font-weight: var(--type-large-title-weight); letter-spacing: var(--type-large-title-tracking);
}
:where(h2) {
  font-size: var(--type-title-size); line-height: var(--type-title-line);
  font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking);
}
:where(h3, h4) {
  font-size: var(--type-item-title-size); line-height: var(--type-item-title-line);
  font-weight: var(--type-item-title-weight); letter-spacing: var(--type-item-title-tracking);
}
:where(a) { color: var(--link); }
:where(a:not([class])) { text-decoration-line: underline; text-underline-offset: .15em; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(img, video, canvas) { max-inline-size: 100%; block-size: auto; }
:where(input[type=checkbox], input[type=radio], input[type=range], progress) { accent-color: var(--brand); }
:where(mark) { background: transparent; color: inherit; font-weight: bolder; }
:where(details > summary) { cursor: pointer; min-block-size: var(--space-target); }

:where(a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable="false"])):focus-visible {
  outline: var(--space-focus-ring) solid var(--focus); outline-offset: var(--space-focus-ring);
}
:where(h1, h2, h3, h4, h5, h6, main, section, article, aside, nav, header, footer, form):not([role], :read-write)[tabindex="-1"]:focus-visible,
:where([role="heading"], [role="main"], [role="region"], [role="article"], [role="document"], [role="complementary"], [role="navigation"],
  [role="banner"], [role="contentinfo"], [role="search"], [role="form"], [role="alert"], [role="status"],
  [role="log"], [role="tabpanel"]):not(:read-write)[tabindex="-1"]:focus-visible {
  outline: none;
}

[hidden]:not([hidden="until-found" i]) { display: none !important; }
.sr-only {
  position: absolute !important; inline-size: var(--space-stroke) !important; block-size: var(--space-stroke) !important;
  margin: calc(var(--space-stroke) * -1) !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
abbr[title] { text-decoration: underline dotted var(--muted); text-underline-offset: .15em; cursor: help; }
/* ---- src/css/content.css ---- */
.type-large-title {
  font-size: var(--type-large-title-size); line-height: var(--type-large-title-line);
  font-weight: var(--type-large-title-weight); letter-spacing: var(--type-large-title-tracking);
}
.type-title {
  font-size: var(--type-title-size); line-height: var(--type-title-line);
  font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking);
}
.type-name {
  font-size: var(--type-name-size); line-height: var(--type-name-line);
  font-weight: var(--type-name-weight); letter-spacing: var(--type-name-tracking);
}
.type-body {
  font-size: var(--type-body-size); line-height: var(--type-body-line);
  font-weight: var(--type-body-weight); letter-spacing: var(--type-body-tracking);
}
.type-description {
  font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-line);
  font-weight: var(--type-subtitle-weight); letter-spacing: var(--type-subtitle-tracking); color: var(--muted);
}
.type-row {
  font-size: var(--type-row-size); line-height: var(--type-row-line);
  font-weight: var(--type-row-weight); letter-spacing: var(--type-row-tracking);
}
.type-item-title {
  font-size: var(--type-item-title-size); line-height: var(--type-item-title-line);
  font-weight: var(--type-item-title-weight); letter-spacing: var(--type-item-title-tracking);
}
.type-small {
  font-size: var(--type-small-size); line-height: var(--type-small-line);
  font-weight: var(--type-small-weight); letter-spacing: var(--type-small-tracking);
}
.type-caption {
  font-size: var(--type-caption-size); line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight); letter-spacing: var(--type-caption-tracking);
}
.type-label {
  font-size: var(--type-label-size); line-height: var(--type-label-line);
  font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); color: var(--muted);
}
.type-hint {
  font-size: var(--type-hint-size); line-height: var(--type-hint-line);
  font-weight: var(--type-hint-weight); letter-spacing: var(--type-hint-tracking); color: var(--muted);
}

.type-hero {
  font-size: var(--type-page-hero-size); line-height: var(--type-page-hero-line);
  font-weight: var(--type-page-hero-weight); letter-spacing: var(--type-page-hero-tracking);
}
.type-section {
  font-size: var(--type-page-section-size); line-height: var(--type-page-section-line);
  font-weight: var(--type-page-section-weight); letter-spacing: var(--type-page-section-tracking);
}
.type-subsection {
  font-size: var(--type-page-subsection-size); line-height: var(--type-page-subsection-line);
  font-weight: var(--type-page-subsection-weight); letter-spacing: var(--type-page-subsection-tracking);
}
.type-lede {
  max-inline-size: var(--space-page-lede); color: var(--muted);
  font-size: var(--type-page-lede-size); line-height: var(--type-page-lede-line);
  font-weight: var(--type-page-lede-weight); letter-spacing: var(--type-page-lede-tracking);
}
.type-eyebrow {
  color: var(--muted);
  font-size: var(--type-page-eyebrow-size); line-height: var(--type-page-eyebrow-line);
  font-weight: var(--type-page-eyebrow-weight); letter-spacing: var(--type-page-eyebrow-tracking);
}
.type-page-body {
  font-size: var(--type-page-body-size); line-height: var(--type-page-body-line);
  font-weight: var(--type-page-body-weight); letter-spacing: var(--type-page-body-tracking);
}
.type-page-small {
  color: var(--muted);
  font-size: var(--type-page-small-size); line-height: var(--type-page-small-line);
  font-weight: var(--type-page-small-weight); letter-spacing: var(--type-page-small-tracking);
}

.status--ok { color: var(--ok); }
.status--needs-you { color: var(--signal-text); }
.status--danger { color: var(--danger); }

pre, .code {
  margin: 0; overflow: auto; padding: var(--space-step-12) var(--space-step-16);
  background: var(--fill); border-radius: var(--radius-control);
  font-family: var(--type-mono); font-size: var(--type-control-size);
}
code, samp { font-family: var(--type-mono); font-size: inherit; }
kbd {
  font-family: var(--type-family); color: var(--muted);
  font-size: var(--type-hint-size); line-height: var(--type-hint-line); font-weight: var(--type-hint-weight);
}

.prose {
  max-inline-size: var(--space-measure);
  font-size: var(--type-page-body-size); line-height: var(--type-page-body-line);
  font-weight: var(--type-page-body-weight); letter-spacing: var(--type-page-body-tracking);
}
.prose > * { margin-block: 0; }
.prose > * + * { margin-block-start: var(--space-step-12); }
.prose > * + :where(h1, h2, h3, h4) { margin-block-start: var(--space-step-32); }
.prose :where(h1) {
  font-size: var(--type-page-section-size); line-height: var(--type-page-section-line);
  font-weight: var(--type-page-section-weight); letter-spacing: var(--type-page-section-tracking);
}
.prose :where(h2) {
  font-size: var(--type-page-heading-size); line-height: var(--type-page-heading-line);
  font-weight: var(--type-page-heading-weight); letter-spacing: var(--type-page-heading-tracking);
}
.prose :where(h3) {
  font-size: var(--type-page-subsection-size); line-height: var(--type-page-subsection-line);
  font-weight: var(--type-page-subsection-weight); letter-spacing: var(--type-page-subsection-tracking);
}
.prose :where(h4) {
  font-size: var(--type-page-rule-size); line-height: var(--type-page-rule-line);
  font-weight: var(--type-page-subsection-weight); letter-spacing: var(--type-page-rule-tracking);
}
.prose :where(a:not([class])) { color: var(--link); text-decoration-line: underline; text-underline-offset: .15em; }
.prose :where(ul, ol) { padding-inline-start: var(--space-step-24); }
.prose :where(blockquote) { padding-inline-start: var(--space-step-16); color: var(--muted); }
.prose :where(hr) { border: 0; margin-block: 0; block-size: var(--space-step-24); }
.prose :where(img, video) { border-radius: var(--radius-card); }
.prose :where(figcaption) {
  margin-block-start: var(--space-step-8); color: var(--muted);
  font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: var(--type-caption-weight);
}

.table, .prose :where(table) {
  inline-size: 100%; border-collapse: collapse;
  font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-line); font-weight: var(--type-subtitle-weight);
}
.table :where(th, td), .prose :where(th, td) {
  padding: var(--space-step-8) var(--space-step-12) var(--space-step-8) 0; border: 0;
  vertical-align: top; text-align: start;
}
.table :where(th), .prose :where(th) { font-weight: var(--type-item-title-weight); }
.table :where(caption), .prose :where(caption) {
  caption-side: top; text-align: start; padding-block-end: var(--space-step-8); color: var(--muted);
  font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: var(--type-caption-weight);
}
.table--spec :where(th, td):first-child { inline-size: 42%; color: var(--muted); }
.table-sort {
  appearance: none; position: relative; display: inline-block; margin: 0; border: 0; background: transparent; cursor: pointer;
  min-block-size: var(--space-target); padding: calc((var(--space-target) - 1em * var(--type-subtitle-line)) / 2) 0;
  margin-block: calc((var(--space-target) - 1em * var(--type-subtitle-line)) / -2);
  color: inherit; font: inherit; text-align: inherit; text-decoration-line: underline; text-underline-offset: .15em;
}
:is(th, [role="columnheader"]):is([aria-sort="ascending"], [aria-sort="descending"]) .table-sort { text-decoration-line: none; }
.table--sticky :where(thead th) { position: sticky; inset-block-start: 0; z-index: 1; background: var(--card); }
.table-scroll {
  max-inline-size: calc(100% + 4 * var(--space-focus-ring)); overflow-x: auto;
  margin-inline: calc(-2 * var(--space-focus-ring)); padding-inline: calc(2 * var(--space-focus-ring));
}
.table tr[tabindex]:focus-visible { outline-offset: calc(-1 * var(--space-focus-ring)); }
.table:has(tr[tabindex]) :where(th, td):first-child { padding-inline-start: calc(2 * var(--space-focus-ring)); }

dl.kv { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: var(--space-step-8) var(--space-step-12); }
dl.kv > dt { color: var(--muted); }
dl.kv > dd { margin: 0; min-inline-size: 0; }

details.disclosure > summary { display: list-item; position: relative; min-block-size: var(--space-target); cursor: pointer; }

@media (width < 600px) {
  .type-hero {
    font-size: var(--type-page-hero-compact-size); line-height: var(--type-page-hero-compact-line);
    font-weight: var(--type-page-hero-compact-weight); letter-spacing: var(--type-page-hero-compact-tracking);
  }
  .type-section, .prose :where(h1) {
    font-size: var(--type-page-section-compact-size); line-height: var(--type-page-section-compact-line);
    font-weight: var(--type-page-section-compact-weight); letter-spacing: var(--type-page-section-compact-tracking);
  }

  .table--stack, .table--stack :where(caption, tbody, tr, th, td) { display: block; }
  .table--stack :where(thead) {
    position: absolute; inline-size: var(--space-stroke); block-size: var(--space-stroke); margin: calc(var(--space-stroke) * -1);
    padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .table--stack :where(tbody) { display: flex; flex-direction: column; gap: var(--space-bubble-gap); }
  .table--stack :where(tbody tr) {
    padding: var(--list-bubble-padding-y) var(--list-bubble-padding-x);
    border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-bubble); background: var(--bubble);
  }
  .table--stack :where(tbody) :where(th, td) { padding: 0; }
  .table--stack :where(tbody) :where(th, td) + :where(th, td) { margin-block-start: var(--space-step-6); }
  .table--stack:has(tr[tabindex]) :where(th, td):first-child { padding-inline-start: 0; }
  .table--stack :where(tbody) :where(th, td)[data-label]::before {
    content: attr(data-label); content: attr(data-label) / ""; display: block; color: var(--muted);
    font-size: var(--type-caption-size); line-height: var(--type-caption-line);
    font-weight: var(--type-caption-weight); letter-spacing: var(--type-caption-tracking);
  }
  .table--stack.table--spec :where(th, td):first-child { inline-size: auto; }
}
/* ---- src/css/layout.css ---- */
.frame {
  display: grid; block-size: 100%; background: var(--frame);
  grid-template: "bar bar" var(--space-title-row) "rail cards" minmax(0, 1fr) / var(--space-rail) minmax(0, 1fr);
}
body.frame { block-size: 100vh; block-size: 100dvh; block-size: var(--frame-height, 100dvh); overflow: hidden; }
.frame--bare { grid-template: "bar" var(--space-title-row) "cards" minmax(0, 1fr) / minmax(0, 1fr); }
.frame--bare > .cards { padding-inline-start: var(--space-frame-inset); }
:is(.frame-bar, .frame-bar-start, .frame-bar-end, .rail) > :focus-visible { outline-color: var(--frame-focus); }

.frame-bar {
  grid-area: bar; display: grid; align-items: center; column-gap: var(--title-row-gap); min-inline-size: 0;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, var(--title-row-search-width)) minmax(max-content, 1fr);
  padding-inline: var(--title-row-lights-inset); color: var(--frame-muted);
}
.frame-bar-start { grid-area: 1 / 1; display: flex; align-items: center; gap: var(--title-row-gap); min-inline-size: 0; }
.frame-bar-end { grid-area: 1 / 3; display: flex; align-items: center; justify-content: flex-end; gap: var(--title-row-gap); min-inline-size: 0; }
.frame-bar[data-lights]::before {
  content: ""; grid-area: 1 / 1;
  inline-size: calc(3 * var(--title-row-traffic-light) + 2 * var(--title-row-traffic-light-gap) + var(--title-row-lights-margin));
}
.frame-bar[data-lights] > .frame-bar-start {
  margin-inline-start: calc(3 * var(--title-row-traffic-light) + 2 * var(--title-row-traffic-light-gap)
    + var(--title-row-lights-margin) + var(--title-row-gap));
}
.frame-plate {
  position: relative; display: grid; place-items: center; flex: none;
  inline-size: var(--title-row-plate); block-size: var(--title-row-plate); margin: 0; padding: 0; border: 0;
  border-radius: var(--radius-control-inner); background: transparent; color: inherit; font: inherit;
  text-align: center; text-decoration: none; appearance: none; cursor: pointer;
}
.frame-plate > svg { inline-size: var(--title-row-glyph); block-size: var(--title-row-glyph); stroke-width: var(--title-row-glyph-stroke); }
.frame-plate:disabled, .frame-plate[aria-disabled="true"] { opacity: var(--title-row-unavailable-opacity); cursor: default; }
@media (hover: hover) {
  .frame-plate:hover:not(:disabled, [aria-disabled="true"]) { background: var(--fill); }
}
.frame-btn {
  appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  block-size: var(--title-row-plate); margin: 0; padding: 0 var(--space-step-10); border: 0;
  border-radius: var(--radius-control-inner); background: transparent; color: var(--frame-ink);
  cursor: pointer; text-align: center; text-decoration: none; white-space: nowrap;
  font: inherit; font-size: var(--type-control-size); line-height: var(--type-control-line);
  font-weight: var(--type-control-weight); letter-spacing: var(--type-control-tracking);
  transition: background-color var(--fade-fast);
}
@media (hover: hover) {
  .frame-btn:hover:not(:disabled, [aria-disabled="true"]) { background: var(--frame-sel); }
}
.frame-btn:active:not(:disabled, [aria-disabled="true"]),
.frame-btn:is([aria-pressed="true"], [aria-expanded="true"]) { background: var(--frame-sel); }
.frame-btn[aria-pressed="true"] { font-weight: var(--type-selected-weight); }
.frame-btn:is(:disabled, [aria-disabled="true"]) { opacity: var(--title-row-unavailable-opacity); cursor: default; }
.frame-search {
  position: relative; display: flex; align-items: center; gap: var(--title-row-search-gap); min-inline-size: 0;
  grid-area: 1 / 2; block-size: var(--title-row-search-height); inline-size: 100%;
  padding: 0 var(--title-row-search-padding-x); border: var(--space-stroke) solid var(--frame-sel-stroke);
  border-radius: var(--radius-control-inner); background: var(--frame-sel); color: var(--frame-muted);
  font-size: var(--type-small-size); line-height: var(--type-small-line); font-weight: var(--type-small-weight);
}
.frame-search > svg {
  flex: none; inline-size: var(--title-row-search-glyph); block-size: var(--title-row-search-glyph);
  stroke-width: var(--title-row-search-glyph-stroke);
}
.frame-search input {
  flex: 1; min-inline-size: 0; margin: 0; padding: 0; border: 0; background: transparent; appearance: none;
  color: var(--frame-ink); font: inherit; text-align: start;
}
.frame-search input::placeholder { color: var(--frame-muted); opacity: 1; }
.frame-search:focus-within { outline: var(--space-focus-ring) solid var(--frame-focus); outline-offset: var(--space-focus-ring); }
.frame-search input:focus-visible { outline: none; }

.rail {
  grid-area: rail; display: flex; flex-direction: column; align-items: center; gap: var(--space-rail-gap);
  min-block-size: 0; padding: var(--rail-padding-top) 0 var(--rail-padding-bottom); overflow-x: hidden; overflow-y: auto;
  --count-ring: var(--frame); --ring-gap: var(--frame);
}
.rail-plate {
  position: relative; display: grid; place-items: center; flex: none;
  inline-size: var(--space-rail-item); block-size: var(--space-rail-item); margin: 0; padding: 0;
  border: var(--space-stroke) solid transparent; border-radius: var(--radius-control);
  background: transparent; color: var(--frame-muted); font: inherit; text-align: center; text-decoration: none;
  appearance: none; cursor: pointer;
}
.rail-plate > svg:not(.tile) { inline-size: var(--rail-glyph); block-size: var(--rail-glyph); stroke-width: var(--rail-glyph-stroke); }
@media (hover: hover) {
  .rail-plate:hover { background: var(--fill); }
}
.rail-plate[aria-current]:not([aria-current="false"]) {
  background: var(--frame-sel); border-color: var(--frame-muted); color: var(--frame-ink);
  --ring-gap: var(--frame-sel);
}
.rail-plate:has(.ring, .tile--ringed, rails-character:is([state="unsure"], [state="approval"], [state="error"], [state="blocked"], [state="capped"])),
.rail-plate[aria-current]:not([aria-current="false"]):has(.ring, .tile--ringed, rails-character:is([state="unsure"], [state="approval"], [state="error"], [state="blocked"], [state="capped"])) {
  background: var(--rail-ring-plate); --ring-gap: var(--rail-ring-plate);
}
.rail-gap { flex: none; block-size: var(--space-rail-gap); }
.rail-spacer { flex: 1; }
.rail-account {
  display: grid; place-items: center; flex: none;
  inline-size: var(--rail-account); block-size: var(--rail-account); border-radius: 50%;
  background: var(--frame-sel); color: var(--frame-ink);
  font-size: var(--type-initial-size); line-height: var(--type-initial-line);
  font-weight: var(--type-initial-weight); letter-spacing: var(--type-initial-tracking);
}

.cards {
  grid-area: cards; display: flex; gap: var(--space-card-gap); min-block-size: 0; min-inline-size: 0;
  padding-block: 0 var(--space-frame-inset); padding-inline: 0 var(--space-frame-inset);
}
.cards > * { flex: 1 1 0; min-inline-size: 0; }
.card--chat { flex: 0 1 var(--space-chat-card); min-inline-size: var(--space-chat-card-min); }
.splitter {
  flex: none; align-self: stretch; inline-size: var(--space-card-gap); min-inline-size: var(--space-card-gap);
  margin: 0; padding: 0; border: 0; background: transparent;
  cursor: col-resize; touch-action: none; transition: background-color var(--fade-fast);
}
.cards > .splitter { margin-inline: calc(-1 * var(--space-card-gap)); }
@media (hover: hover) {
  .splitter:hover { background: var(--fill); }
}
.splitter:active { background: var(--fill); }
.splitter:focus-visible { outline-color: var(--frame-focus); outline-offset: calc(-1 * var(--space-focus-ring)); }
.card-bar {
  display: flex; align-items: center; gap: var(--bar-gap); flex: none; min-inline-size: 0;
  block-size: var(--space-bar); padding: 0 var(--bar-padding-x);
}
.card-title {
  min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--type-title-size); line-height: var(--type-title-line);
  font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking);
}
.card-scroll { min-block-size: 0; overflow: auto; overscroll-behavior: contain; }
.card-scroll--embedded { overscroll-behavior: auto; }

.app-card { display: grid; grid-template-columns: var(--space-nav-column) minmax(0, 1fr); }
.nav { display: flex; flex-direction: column; gap: var(--space-row-gap); min-inline-size: 0; padding: var(--app-card-nav-padding); }
.nav-header {
  display: flex; align-items: center; gap: var(--app-card-header-gap); flex: none; min-inline-size: 0;
  block-size: var(--app-card-header); padding: 0 var(--app-card-header-padding-x);
}
.nav-name {
  font-size: var(--type-name-size); line-height: var(--type-name-line);
  font-weight: var(--type-name-weight); letter-spacing: var(--type-name-tracking);
}
.nav-header--bare { padding-inline: calc(var(--nav-row-padding-x) + var(--space-stroke)); }
.nav-sub {
  color: var(--muted);
  font-size: var(--type-caption-size); line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight); letter-spacing: var(--type-caption-tracking);
}
.app-body { min-inline-size: 0; padding: var(--app-card-content-padding-y) var(--app-card-content-padding-x); }
.app-body > .type-description { margin-block-start: var(--app-card-description-gap); }
.app-body > .list { margin-block-start: var(--app-card-list-gap); }

.split { display: grid; grid-template-columns: var(--space-list-column) minmax(0, 1fr); min-block-size: 0; }
.list-column {
  display: flex; flex-direction: column; gap: var(--space-row-gap); min-inline-size: 0; min-block-size: 0;
  padding: var(--list-column-padding);
}

body.page {
  display: grid; justify-items: center; align-content: center; min-block-size: 100vh; min-block-size: 100dvh;
  padding: var(--space-step-24) var(--space-page-gutter-compact); background: var(--frame);
}
body.page--top { align-content: start; }
.page-card {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-step-12);
  inline-size: min(100%, calc(var(--space-measure) + 2 * var(--space-page-gutter))); padding: var(--space-page-gutter);
  background: var(--card); color: var(--ink); border-radius: var(--radius-card);
  box-shadow: 0 0 0 var(--ring-card-edge) var(--card-edge);
}
.page-card > hgroup { display: grid; gap: var(--app-card-description-gap); margin: 0; }
.page-card > form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-step-12); margin: 0; }
:is(.page-card, .page-card > form) > :is(.btn, .chip, .seg, .tag, .msg--pill, input[type=checkbox][role=switch].switch, .lockup, .loader,
  rails-character, img, svg, span, a:not([class]), button:not([class])):not(.btn--block) { justify-self: start; }
.page-card > [data-rails-return]:empty { display: none; }
.page-card--wide { inline-size: min(100%, calc(var(--space-page-content) + 2 * var(--space-page-gutter))); }
.page-card--narrow { inline-size: min(100%, calc(var(--space-form) + 2 * var(--space-page-gutter))); }

body.embed { background: var(--card); padding: var(--space-page-gutter); }

body.doc {
  font-size: var(--type-page-body-size); line-height: var(--type-page-body-line);
  font-weight: var(--type-page-body-weight); letter-spacing: var(--type-page-body-tracking);
}
.doc-wrap { max-inline-size: var(--space-page-content); margin-inline: auto; padding-inline: var(--space-page-gutter); }
.doc-section { padding-block-start: var(--space-page-section); }
.doc-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-step-40); align-items: center;
  padding-block-start: var(--space-step-64);
}
.doc-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-step-16); flex-wrap: wrap;
  padding-block-start: var(--space-page-top);
}
.doc-footer {
  padding: var(--space-page-section) 0 var(--space-page-footer-bottom); color: var(--muted);
  font-size: var(--type-page-footer-size); line-height: var(--type-page-footer-line);
  font-weight: var(--type-page-footer-weight); letter-spacing: var(--type-page-footer-tracking);
}
.doc-rules {
  display: grid; gap: var(--space-page-rules-gap); margin: 0; padding: 0; list-style: none;
  font-size: var(--type-page-rule-size); line-height: var(--type-page-rule-line);
  font-weight: var(--type-page-rule-weight); letter-spacing: var(--type-page-rule-tracking);
}
.doc-rules :where(b, strong) { font-weight: var(--type-item-title-weight); }
.doc-grid { display: grid; gap: var(--space-step-16); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--space-page-grid-min)), 1fr)); }
.doc-grid--two { align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--space-page-grid-two-min)), 1fr)); }

.mock-window { overflow: hidden; border-radius: var(--radius-window); box-shadow: var(--mock-window-shadow); }
.mock-lights { display: flex; flex: none; align-items: center; gap: var(--title-row-traffic-light-gap); }
.frame-bar > .mock-lights { grid-area: 1 / 1; justify-self: start; }
.mock-lights > * { display: block; flex: none; inline-size: var(--title-row-traffic-light); block-size: var(--title-row-traffic-light); border-radius: 50%; }
.mock-lights > :nth-child(1) { background: var(--mock-light-close); }
.mock-lights > :nth-child(2) { background: var(--mock-light-minimize); }
.mock-lights > :nth-child(3) { background: var(--mock-light-zoom); }

@media (pointer: coarse) {
  .frame-search input { font-size: var(--type-page-body-size); }
}

@media (width < 1024px) {
  body.frame .cards > * { flex: 1 1 0; min-inline-size: 0; }
  body.frame .cards > .splitter { display: none; }
  body.frame .cards:has(> .card[data-compact-current]) > .card:not([data-compact-current]),
  body.frame .cards:not(:has(> .card[data-compact-current])) > .card:not(:first-child) { display: none; }
}
@media (width < 860px) {
  .doc-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (width < 840px) {
  body:is(.frame, .page, .embed) :is(.app-card, .split) { grid-template-columns: minmax(0, 1fr); }
}

@media (width < 600px) {
  body.frame { grid-template: "cards" minmax(0, 1fr) "rail" auto / minmax(0, 1fr); }
  body.frame .frame-bar, body.frame .rail-gap, body.frame .rail-spacer { display: none; }
  body.frame .rail {
    flex-direction: row; justify-content: space-around; overflow-x: auto; overflow-y: hidden; background: var(--frame);
    padding: var(--rail-padding-top) env(safe-area-inset-right) var(--rail-padding-top) env(safe-area-inset-left);
    padding-block-end: calc(var(--rail-padding-top) + env(safe-area-inset-bottom));
  }
  body.frame .cards { padding: 0; gap: 0; }
  body.frame .cards > .card { border-radius: 0; box-shadow: none; }

  body.page { align-content: start; padding: 0; background: var(--card); }
  body.page .page-card {
    inline-size: 100%; border-radius: 0; box-shadow: none;
    padding: var(--space-page-gutter-compact);
    padding: calc(var(--space-page-gutter-compact) + env(safe-area-inset-top)) calc(var(--space-page-gutter-compact) + env(safe-area-inset-right))
      calc(var(--space-page-gutter-compact) + env(safe-area-inset-bottom)) calc(var(--space-page-gutter-compact) + env(safe-area-inset-left));
  }
  body.embed { padding: var(--space-page-gutter-compact); }
  .doc-wrap { padding-inline: var(--space-page-gutter-compact); }
  .doc-section { padding-block-start: var(--space-page-section-compact); }
}
/* ---- src/css/surfaces.css ---- */
.card {
  position: relative; min-inline-size: 0; min-block-size: 0; overflow: hidden;
  background: var(--card); color: var(--ink); border-radius: var(--radius-card);
  box-shadow: 0 0 0 var(--ring-card-edge) var(--card-edge);
}

.bubble { background: var(--bubble); color: var(--ink); border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-bubble); }
.bubble--chat { border-radius: var(--radius-chat); }

.float {
  background: var(--bubble); color: var(--ink); border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-menu);
  box-shadow: var(--shadow-float);
}
:where(button.float, a.float:any-link) { position: relative; }
.float-card {
  position: relative; min-inline-size: 0; min-block-size: 0; overflow: hidden;
  background: var(--card); color: var(--ink); border-radius: var(--radius-card);
  box-shadow: var(--shadow-float), 0 0 0 var(--ring-card-edge) var(--card-edge);
}
.scrim { position: fixed; inset: 0; background: var(--scrim); }

.highlight, .surface-highlight { box-shadow: 0 0 0 var(--ring-highlight) var(--highlight); }
/* ---- src/css/controls.css ---- */
.btn {
  appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-step-6);
  inline-size: auto; margin: 0; padding: var(--button-padding-y) var(--button-padding-x); border: 0; border-radius: var(--radius-button);
  background: var(--fill); color: var(--ink); cursor: pointer; text-align: center; text-decoration: none; white-space: nowrap;
  font: inherit; font-size: var(--type-button-size); line-height: var(--type-button-line);
  font-weight: var(--type-button-weight); letter-spacing: var(--type-button-tracking);
  transition: background-color var(--fade-fast), color var(--fade-fast), opacity var(--fade-fast);
}
.btn > svg, .btn > rails-character { flex: none; }
.btn:not(.btn--icon) > svg:not(.tile, .mark) {
  inline-size: var(--space-step-16); block-size: var(--space-step-16); stroke-width: var(--title-row-glyph-stroke);
}
.btn--icon { background: transparent; color: var(--ink); }
.btn--secondary { background: var(--fill); color: var(--ink); }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--quiet { background: transparent; color: var(--link); }
.btn--signal { background: var(--signal-fill); color: var(--on-brand); }
.btn--danger { background: var(--danger-fill); color: var(--on-brand); }
.btn--danger-quiet { background: transparent; color: var(--danger); }
.btn--small {
  padding: var(--button-small-padding-y) var(--button-small-padding-x); border-radius: var(--radius-button);
  font-size: var(--type-button-small-size); line-height: var(--type-button-small-line);
  font-weight: var(--type-button-small-weight); letter-spacing: var(--type-button-small-tracking);
}
.btn--review {
  padding: var(--button-review-padding-y) var(--button-review-padding-x); border-radius: var(--radius-review);
  background: var(--signal-fill); color: var(--on-brand);
  font-size: var(--type-review-size); line-height: var(--type-review-line);
  font-weight: var(--type-review-weight); letter-spacing: var(--type-review-tracking);
}
.btn--icon {
  inline-size: var(--title-row-plate); block-size: var(--title-row-plate); padding: 0; border-radius: var(--radius-control-inner);
}
.btn--icon > svg {
  inline-size: var(--title-row-glyph); block-size: var(--title-row-glyph); stroke-width: var(--title-row-glyph-stroke);
}
.btn--icon.btn--lg { inline-size: var(--space-touch); block-size: var(--space-touch); border-radius: 50%; }
.btn--block { display: flex; inline-size: 100%; }
.btn[aria-busy="true"] { cursor: progress; }
@media (hover: hover) {
  :is(.btn--quiet, .btn--danger-quiet, .btn--icon):hover:where(:not(:disabled, [aria-disabled="true"], .btn--secondary, .btn--primary, .btn--signal, .btn--danger, .btn--review)) {
    background: var(--fill);
  }
}

.field {
  appearance: none; display: block; inline-size: 100%; min-inline-size: 0; margin: 0;
  padding: var(--field-padding-y) var(--field-padding-x); border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-field);
  background: var(--bubble); color: var(--ink); text-align: start;
  font: inherit; font-size: var(--type-body-size); line-height: var(--type-body-line);
  font-weight: var(--type-body-weight); letter-spacing: var(--type-body-tracking);
}
.field::placeholder { color: var(--muted); opacity: 1; }
.field:focus-visible { outline-offset: var(--field-focus-offset); }
textarea.field { resize: vertical; }
textarea.field--bare { resize: none; }
select.field { appearance: auto; padding-inline-end: var(--space-step-32); cursor: pointer; }
.field[aria-invalid="true"] { border-color: var(--signal); }
.field--flat { background: var(--fill); border-color: transparent; }
.field--bare { padding: 0; border: 0; border-radius: 0; background: transparent; }
.field-group {
  display: flex; align-items: center; gap: var(--space-step-6); inline-size: 100%; min-inline-size: 0; margin: 0;
  padding: var(--field-padding-y) var(--field-padding-x); border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-field);
  background: var(--bubble); color: var(--muted); cursor: text;
  font-size: var(--type-body-size); line-height: var(--type-body-line);
  font-weight: var(--type-body-weight); letter-spacing: var(--type-body-tracking);
}
.field-group > :not(.field) { flex: none; }
.field-group > .field--bare { flex: 1; inline-size: auto; }
.field-group:focus-within { outline: var(--space-focus-ring) solid var(--focus); outline-offset: var(--field-focus-offset); }
.field-group .field--bare:focus-visible { outline: none; }
.field-group:has(> [aria-invalid="true"]) { border-color: var(--signal); }
.field-label {
  display: block; margin: 0 0 var(--space-step-6); color: var(--ink);
  font-size: var(--type-item-title-size); line-height: var(--type-item-title-line);
  font-weight: var(--type-item-title-weight); letter-spacing: var(--type-item-title-tracking);
}
.field-hint, .field-error {
  display: block; margin: var(--space-step-6) 0 0;
  font-size: var(--type-caption-size); line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight); letter-spacing: var(--type-caption-tracking);
}
.field-hint { color: var(--muted); }
.field-error { color: var(--signal-text); }

.seg {
  display: inline-flex; gap: var(--segmented-gap); margin: 0; padding: var(--segmented-padding);
  border-radius: var(--radius-control); background: var(--fill); vertical-align: middle;
}
.seg > :is(button, a, label) {
  appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  margin: 0; padding: var(--segmented-item-padding-y) var(--segmented-item-padding-x);
  border: var(--space-stroke) solid transparent; border-radius: var(--radius-control-inner);
  background: transparent; color: var(--ink); cursor: pointer; text-align: center; text-decoration: none; white-space: nowrap;
  font: inherit; font-size: var(--type-control-size); line-height: var(--type-control-line);
  font-weight: var(--type-control-weight); letter-spacing: var(--type-control-tracking);
}
.seg > :is(button, a, label):is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"]), :has(> input:checked)) {
  background: var(--bubble); border-color: var(--stroke); font-weight: var(--type-selected-weight);
}
.seg > label:has(> input:focus-visible) { outline: var(--space-focus-ring) solid var(--focus); outline-offset: var(--space-focus-ring); }
.seg > label > input {
  position: absolute; inline-size: var(--space-stroke); block-size: var(--space-stroke); margin: 0; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0;
}
.seg--scroll { max-inline-size: 100%; overflow-x: auto; scroll-padding-inline: var(--space-focus-ring); }
.seg--scroll > :is(button, a):focus-visible, .seg--scroll > label:has(> input:focus-visible) { outline-offset: 0; }
.seg--flat { padding: 0; background: transparent; }
.seg--flat > :is(button, a, label):is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"]), :has(> input:checked)) {
  background: var(--fill); border-color: transparent;
}

.chip {
  appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-step-6);
  margin: 0; padding: var(--chip-padding-y) var(--chip-padding-x); border: var(--space-stroke) solid transparent; border-radius: var(--radius-control);
  background: transparent; color: var(--ink); cursor: pointer; text-align: center; text-decoration: none; white-space: nowrap;
  font: inherit; font-size: var(--type-control-size); line-height: var(--type-control-line);
  font-weight: var(--type-control-weight); letter-spacing: var(--type-control-tracking);
  transition: background-color var(--fade-fast), border-color var(--fade-fast);
}
@media (hover: hover) {
  .chip:hover:where(:not(:disabled, [aria-disabled="true"])) { background: var(--fill); }
}
.chip:is([aria-pressed="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"])) {
  background: var(--bubble); border-color: var(--stroke); font-weight: var(--type-selected-weight);
}
.chip--flat:is([aria-pressed="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"])) {
  background: var(--fill); border-color: transparent;
}

.tag {
  display: inline-flex; align-items: center; gap: var(--space-step-4); inline-size: fit-content; max-inline-size: 100%; margin: 0;
  padding: var(--composer-chip-padding-y) var(--composer-chip-padding-x); border-radius: var(--radius-chip-small);
  background: var(--fill); color: var(--ink);
  font-size: var(--type-caption-size); line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight); letter-spacing: var(--type-caption-tracking);
}

input[type=checkbox][role=switch].switch {
  appearance: none; position: relative; display: inline-block; flex: none; margin: 0; padding: 0; border: 0;
  inline-size: var(--space-step-40); block-size: var(--space-step-24); border-radius: var(--space-step-24);
  background: var(--muted); cursor: pointer; vertical-align: middle;
  transition: background-color var(--fade-fast), opacity var(--fade-fast);
}
input[type=checkbox][role=switch].switch::before {
  content: ""; position: absolute; inset-block-start: var(--space-step-2); inset-inline-start: var(--space-step-2);
  inline-size: var(--space-step-20); block-size: var(--space-step-20); border-radius: 50%;
  background: var(--card); transition: translate var(--spring-quick);
}
input[type=checkbox][role=switch].switch:checked { background: var(--brand); }
input[type=checkbox][role=switch].switch:checked::before {
  translate: calc(var(--space-step-40) - var(--space-step-20) - 2 * var(--space-step-2)) 0;
}
input[type=checkbox][role=switch].switch:checked:dir(rtl)::before {
  translate: calc(2 * var(--space-step-2) + var(--space-step-20) - var(--space-step-40)) 0;
}

.option {
  appearance: none; display: flex; align-items: center; gap: var(--row-gap); inline-size: 100%; min-inline-size: 0; margin: 0;
  padding: var(--list-bubble-padding-y) var(--list-bubble-padding-x); border: var(--space-stroke) solid transparent; border-radius: var(--radius-bubble);
  background: var(--fill); color: var(--ink); cursor: pointer; text-align: start; text-decoration: none;
  font: inherit; font-size: var(--type-pill-size); line-height: var(--type-pill-line);
  font-weight: var(--type-pill-weight); letter-spacing: var(--type-pill-tracking);
  transition: background-color var(--fade-fast), border-color var(--fade-fast);
}
.option > input { flex: none; margin: 0; }
.option:has(> input:checked) { background: var(--bubble); border-color: var(--stroke); }

progress.meter, meter.meter {
  appearance: none; display: block; inline-size: 100%; block-size: var(--space-step-6); margin: 0; border: 0;
  border-radius: var(--space-step-6); background: var(--fill); color: var(--ink); overflow: hidden; vertical-align: middle;
}
.meter::-webkit-progress-bar { background: var(--fill); border-radius: var(--space-step-6); }
.meter::-webkit-progress-value { background: var(--ink); border-radius: var(--space-step-6); }
.meter::-moz-progress-bar { background: var(--ink); border-radius: var(--space-step-6); }
.meter:indeterminate::-moz-progress-bar { background: transparent; animation: none; }
.meter::-webkit-meter-bar { block-size: var(--space-step-6); border: 0; border-radius: var(--space-step-6); background: var(--fill); }
.meter::-webkit-meter-optimum-value { background: var(--ink); border-radius: var(--space-step-6); }
.meter::-webkit-meter-suboptimum-value { background: var(--ink); border-radius: var(--space-step-6); }
.meter::-webkit-meter-even-less-good-value { background: var(--ink); border-radius: var(--space-step-6); }
.meter::-moz-meter-bar { background: var(--ink); border-radius: var(--space-step-6); }
.meter--needs-you::-webkit-progress-value { background: var(--signal); }
.meter--needs-you::-moz-progress-bar { background: var(--signal); }
.meter--needs-you::-webkit-meter-optimum-value { background: var(--signal); }
.meter--needs-you::-webkit-meter-suboptimum-value { background: var(--signal); }
.meter--needs-you::-webkit-meter-even-less-good-value { background: var(--signal); }
.meter--needs-you::-moz-meter-bar { background: var(--signal); }

.btn:is(:disabled, [aria-disabled="true"]),
.field:is(:disabled, [aria-disabled="true"]),
.field-group:has(> .field:is(:disabled, [aria-disabled="true"])),
.seg > :is(button, a, label):is(:disabled, [aria-disabled="true"], :has(> input:disabled)),
.chip:is(:disabled, [aria-disabled="true"]),
input[type=checkbox][role=switch].switch:disabled,
.option:has(> input:disabled) {
  opacity: var(--button-disabled-opacity); cursor: default;
}
.btn[aria-busy="true"]:is(:disabled, [aria-disabled="true"]) { opacity: 1; cursor: progress; }
.field-group > .field:is(:disabled, [aria-disabled="true"]) { opacity: 1; }

@media (pointer: coarse) {
  .field, .field-group { font-size: var(--type-page-body-size); }
}

@media (forced-colors: active) {
  input[type=checkbox][role=switch].switch { border: var(--space-stroke) solid CanvasText; background: Canvas; }
  input[type=checkbox][role=switch].switch::before { background: CanvasText; }
  input[type=checkbox][role=switch].switch:checked { border-color: Highlight; background: Highlight; }
  input[type=checkbox][role=switch].switch:checked::before { background: HighlightText; }
  progress.meter, meter.meter { border: var(--space-stroke) solid CanvasText; }
  .meter::-webkit-progress-value { background: CanvasText; }
  .meter::-moz-progress-bar { background: CanvasText; }
  .meter::-webkit-meter-optimum-value { background: CanvasText; }
  .meter::-webkit-meter-suboptimum-value { background: CanvasText; }
  .meter::-webkit-meter-even-less-good-value { background: CanvasText; }
  .meter::-moz-meter-bar { background: CanvasText; }
}
/* ---- src/css/lists.css ---- */
.list { display: flex; flex-direction: column; gap: var(--space-bubble-gap); min-inline-size: 0; margin: 0; padding: 0; list-style: none; }
.list--rows { gap: var(--space-row-gap); }

.item {
  appearance: none; display: flex; align-items: center; gap: var(--list-bubble-gap); inline-size: 100%; min-inline-size: 0; margin: 0;
  padding: var(--list-bubble-padding-y) var(--list-bubble-padding-x);
  border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-bubble); background: var(--bubble); color: var(--ink);
  text-align: start; text-decoration: none;
  font: inherit; font-size: var(--type-pill-size); line-height: var(--type-pill-line);
  font-weight: var(--type-pill-weight); letter-spacing: var(--type-pill-tracking);
}
a.item, button.item { cursor: pointer; }
.item-body { flex: 1; min-inline-size: 0; }
.item-title {
  display: block;
  font-size: var(--type-item-title-size); line-height: var(--type-item-title-line);
  font-weight: var(--type-item-title-weight); letter-spacing: var(--type-item-title-tracking);
}
.item-sub {
  display: block; color: var(--muted);
  font-size: var(--type-caption-size); line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight); letter-spacing: var(--type-caption-tracking);
}
.item-status { flex: none; white-space: nowrap; }

.row {
  appearance: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--row-gap);
  inline-size: 100%; min-inline-size: 0; margin: 0; padding: var(--row-padding-y) var(--row-padding-x);
  border: var(--space-stroke) solid transparent; border-radius: var(--radius-bubble); background: transparent; color: var(--ink);
  font: inherit; text-align: start; text-decoration: none;
  transition: background-color var(--fade-fast), border-color var(--fade-fast);
}
a.row, button.row { cursor: pointer; }
.row-head { display: flex; align-items: baseline; gap: var(--space-step-6); min-inline-size: 0; }
.row-name {
  flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--type-row-size); line-height: var(--type-row-line);
  font-weight: var(--type-row-weight); letter-spacing: var(--type-row-tracking);
}
.row-time {
  flex: none; color: var(--muted);
  font-size: var(--type-time-size); line-height: var(--type-time-line);
  font-weight: var(--type-time-weight); letter-spacing: var(--type-time-tracking);
}
.row-preview {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; color: var(--muted);
  font-size: var(--type-small-size); line-height: var(--type-small-line);
  font-weight: var(--type-small-weight); letter-spacing: var(--type-small-tracking);
}
.row--unread .row-name { font-weight: var(--type-row-unread-weight); }
.row--unread .row-preview { color: var(--ink); }
.unread {
  display: inline-block; flex: none; align-self: center;
  inline-size: var(--unread-dot); block-size: var(--unread-dot); border-radius: 50%; background: var(--link);
}

.nav-row {
  appearance: none; position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-step-8); flex: none;
  inline-size: 100%; min-inline-size: 0; block-size: var(--space-nav-row); margin: 0; padding: 0 var(--nav-row-padding-x);
  border: var(--space-stroke) solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--ink);
  overflow: hidden; text-align: start; text-decoration: none; white-space: nowrap; cursor: pointer;
  font: inherit; font-size: var(--type-nav-size); line-height: var(--type-nav-line);
  font-weight: var(--type-nav-weight); letter-spacing: var(--type-nav-tracking);
  transition: background-color var(--fade-fast), border-color var(--fade-fast);
}
.nav-row > .type-hint { flex: none; }

@media (hover: hover) {
  .row:hover:where(:not(:disabled, [aria-disabled="true"])),
  .nav-row:hover:where(:not(:disabled, [aria-disabled="true"])) { background: var(--fill); }
  .row:hover:where(:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"])))
    :is(.row-time, .row-preview, .muted, .type-hint, .status--ok, .status--needs-you),
  .nav-row:hover:where(:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"])))
    :is(.type-hint, .muted, .status--ok, .status--needs-you) { color: var(--ink); }
}
.row:is([aria-selected="true"], [aria-current]:not([aria-current="false"])),
.nav-row:is([aria-selected="true"], [aria-current]:not([aria-current="false"])) {
  background: var(--bubble); border-color: var(--stroke); font-weight: var(--type-selected-weight);
}
.row:is([aria-selected="true"], [aria-current]:not([aria-current="false"])):not(.row--unread) .row-name { font-weight: var(--type-selected-weight); }

.label, .menu-label {
  display: block; margin: 0; padding: var(--section-label-padding-top) var(--section-label-padding-x) var(--section-label-padding-bottom);
  color: var(--muted);
  font-size: var(--type-label-size); line-height: var(--type-label-line);
  font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking);
}

.needs-you {
  appearance: none; display: flex; align-items: center; gap: var(--needs-you-gap); inline-size: 100%; min-inline-size: 0; margin: 0;
  padding-block: var(--needs-you-padding-y); padding-inline: var(--needs-you-padding-left) var(--needs-you-padding-right);
  border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-bubble); background: var(--bubble); color: var(--ink);
  text-align: start; text-decoration: none;
  font: inherit; font-size: var(--type-pill-size); line-height: var(--type-pill-line);
  font-weight: var(--type-pill-weight); letter-spacing: var(--type-pill-tracking);
}
a.needs-you, button.needs-you { cursor: pointer; }
.needs-you > :is(.tile, rails-character) { flex: none; inline-size: var(--needs-you-tile); block-size: var(--needs-you-tile); }
.needs-you-body {
  flex: 1; min-inline-size: 0;
  font-size: var(--type-row-size); line-height: var(--type-row-line);
  font-weight: var(--type-row-weight); letter-spacing: var(--type-row-tracking);
}
.needs-you-body > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.needs-you-reason {
  color: var(--muted);
  font-size: var(--type-small-size); line-height: var(--type-small-line);
  font-weight: var(--type-small-weight); letter-spacing: var(--type-small-tracking);
}
.needs-you .btn:not(.btn--icon) {
  padding: var(--button-review-padding-y) var(--button-review-padding-x); border-radius: var(--radius-review);
  font-size: var(--type-review-size); line-height: var(--type-review-line);
  font-weight: var(--type-review-weight); letter-spacing: var(--type-review-tracking);
}

.count {
  display: inline-grid; place-items: center; flex: none;
  min-inline-size: var(--count-min-width); block-size: var(--count-height); padding: 0 var(--count-padding-x);
  border-radius: var(--radius-count); background: var(--signal-fill); color: var(--on-brand);
  font-size: var(--type-count-size); line-height: var(--type-count-line);
  font-weight: var(--type-count-weight); letter-spacing: var(--type-count-tracking);
  text-align: center; white-space: nowrap; vertical-align: middle;
  box-shadow: 0 0 0 var(--ring-count) var(--count-ring, var(--card));
}
.count--corner {
  position: absolute; inset-block-end: calc(var(--count-offset) * -1); inset-inline-end: calc(var(--count-offset) * -1);
}
.count-anchor { position: relative; display: inline-flex; }

.notice {
  display: flex; align-items: center; gap: var(--notice-gap); min-inline-size: 0; margin: 0;
  padding-block: var(--notice-padding-y); padding-inline: var(--notice-padding-left) var(--notice-padding-right);
  border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-bubble); background: var(--bubble); color: var(--ink);
  font-size: var(--type-pill-size); line-height: var(--type-pill-line);
  font-weight: var(--type-pill-weight); letter-spacing: var(--type-pill-tracking);
}
.notice > .btn { margin-inline-start: auto; }
.notice > .btn + .btn { margin-inline-start: 0; }
.notice--danger { color: var(--danger); }
.notice--needs-you { color: var(--signal-text); }

.search {
  appearance: none; display: block; inline-size: 100%; min-inline-size: 0; block-size: var(--search-height); margin: 0;
  padding: 0 var(--search-padding-x); border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-control);
  background: var(--bubble); color: var(--ink); text-align: start;
  font: inherit; font-size: var(--type-pill-size); line-height: var(--type-pill-line);
  font-weight: var(--type-pill-weight); letter-spacing: var(--type-pill-tracking);
}
.search::placeholder { color: var(--muted); opacity: 1; }
.search:focus-visible { outline-offset: var(--field-focus-offset); }

.item:is(:disabled, [aria-disabled="true"]),
.row:is(:disabled, [aria-disabled="true"]),
.nav-row:is(:disabled, [aria-disabled="true"]),
.needs-you:is(:disabled, [aria-disabled="true"]),
.search:is(:disabled, [aria-disabled="true"]) {
  opacity: var(--button-disabled-opacity); cursor: default;
}

@media (width < 600px) {
  .notice:has(> .btn + .btn) { flex-wrap: wrap; row-gap: var(--space-step-8); }
}

@media (pointer: coarse) {
  .search { font-size: var(--type-page-body-size); }
}
@supports (overflow-x: clip) {
  @media (pointer: coarse) {
    .nav-row { overflow-x: clip; overflow-y: visible; }
  }
}
/* ---- src/css/floats.css ---- */
.menu {
  min-inline-size: var(--menu-width); padding: var(--menu-padding);
  border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-menu); background: var(--bubble); color: var(--ink);
  text-align: start; box-shadow: var(--shadow-float);
  font-size: var(--type-pill-size); line-height: var(--type-pill-line);
  font-weight: var(--type-pill-weight); letter-spacing: var(--type-pill-tracking);
}
.menu-item {
  appearance: none; display: flex; align-items: center; gap: var(--menu-item-gap); inline-size: 100%; min-inline-size: 0;
  block-size: var(--menu-item-height); margin: 0; padding: 0 var(--menu-item-padding-x); border: 0; border-radius: var(--radius-menu-item);
  background: transparent; color: var(--ink); cursor: pointer; text-align: start; text-decoration: none; white-space: nowrap;
  font: inherit; font-size: var(--type-pill-size); line-height: var(--type-pill-line);
  font-weight: var(--type-pill-weight); letter-spacing: var(--type-pill-tracking);
}
.menu-item > svg { flex: none; }
@media (hover: hover) {
  .menu-item:hover:where(:not(:disabled, [aria-disabled="true"])) { background: var(--fill); }
}
.menu-item:is([aria-current]:not([aria-current="false"]), [aria-checked="true"], [aria-selected="true"]) {
  background: var(--fill); font-weight: var(--type-selected-weight);
}
.menu-item:focus-visible { outline-offset: var(--space-focus-ring); }
.menu-item:is(:disabled, [aria-disabled="true"]) { opacity: var(--button-disabled-opacity); cursor: default; }
.menu-group + .menu-group { margin-block-start: var(--menu-padding); }

.popover {
  max-inline-size: min(100vw - 2 * var(--space-step-16), var(--space-measure));
  padding: var(--list-bubble-padding-y) var(--list-bubble-padding-x);
  border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-menu); background: var(--bubble); color: var(--ink);
  box-shadow: var(--shadow-float);
}

.sheet {
  max-inline-size: min(100% - 2 * var(--space-step-16), calc(var(--space-measure) + 2 * var(--space-step-24)));
  max-block-size: calc(100vh - 2 * var(--space-step-16)); max-block-size: calc(100dvh - 2 * var(--space-step-16));
  overflow: auto; overscroll-behavior: contain; padding: var(--space-step-24);
  border: 0; border-radius: var(--radius-sheet); background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-float), 0 0 0 var(--ring-card-edge) var(--card-edge);
}
dialog.sheet:not(.sheet--side) { inset: 0; margin: auto; }
dialog.sheet::backdrop { background: var(--scrim); animation: rails-fade-in var(--fade-standard); }
.sheet--side {
  position: fixed; inset-block: var(--space-frame-inset); inset-inline: auto var(--space-frame-inset); margin: 0;
  inline-size: min(100% - 2 * var(--space-frame-inset), calc(var(--space-chat-card) + var(--space-step-40)));
  block-size: auto; max-inline-size: none; max-block-size: none;
}
.sheet--contained { max-block-size: calc(100% - 2 * var(--space-frame-inset)); }

.toast {
  display: flex; align-items: center; gap: var(--notice-gap); min-inline-size: 0;
  max-inline-size: min(100vw - 2 * var(--space-step-16), var(--space-measure));
  padding-block: var(--notice-padding-y); padding-inline: var(--notice-padding-left) var(--notice-padding-right);
  border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-bubble); background: var(--bubble); color: var(--ink);
  box-shadow: var(--shadow-float);
  font-size: var(--type-pill-size); line-height: var(--type-pill-line);
  font-weight: var(--type-pill-weight); letter-spacing: var(--type-pill-tracking);
}
.toast > .btn { margin-inline-start: auto; }
.toast-region {
  position: fixed; inset-inline: 0; inset-block-end: calc(var(--space-step-16) + env(safe-area-inset-bottom));
  display: flex; justify-content: center; padding-inline: var(--space-step-16); pointer-events: none;
}
.toast-region > * { pointer-events: auto; }

.tooltip {
  max-inline-size: min(100vw - 2 * var(--space-step-16), var(--space-measure));
  padding: var(--space-step-4) var(--space-step-8);
  border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-control-inner); background: var(--bubble); color: var(--ink);
  box-shadow: var(--shadow-float);
  font-size: var(--type-small-size); line-height: var(--type-small-line);
  font-weight: var(--type-small-weight); letter-spacing: var(--type-small-tracking);
}

.composer {
  display: flex; flex-direction: column; gap: var(--composer-chip-gap); min-inline-size: 0;
  padding: var(--composer-padding-y) var(--composer-padding-x);
  border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-chat); background: var(--bubble); color: var(--ink);
  box-shadow: var(--shadow-float);
  font-size: var(--type-body-size); line-height: var(--type-body-line);
  font-weight: var(--type-body-weight); letter-spacing: var(--type-body-tracking);
}
.composer:focus-within { outline: var(--space-focus-ring) solid var(--focus); outline-offset: var(--field-focus-offset); }
.composer .field--bare:focus-visible { outline: none; }
.composer:has(:is(button, a[href]):focus-visible) { outline: none; }
.composer-row { display: flex; align-items: center; gap: var(--composer-gap); min-inline-size: 0; }
.composer-row > :is(.tile, rails-character) { flex: none; inline-size: var(--composer-tile); block-size: var(--composer-tile); }
.composer-row > .field--bare { flex: 1; inline-size: auto; }
.composer .btn--icon { inline-size: var(--space-step-32); block-size: var(--space-step-32); border-radius: var(--radius-button); }
.composer-chip {
  display: inline-flex; align-items: center; align-self: flex-start; gap: var(--space-step-4); max-inline-size: 100%; margin: 0;
  padding: var(--composer-chip-padding-y) var(--composer-chip-padding-x); border-radius: var(--radius-chip-small);
  background: var(--fill); color: var(--muted);
  font-size: var(--type-caption-size); line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight); letter-spacing: var(--type-caption-tracking);
}
.composer-chip-dismiss {
  appearance: none; position: relative; display: grid; place-items: center; flex: none;
  inline-size: calc(var(--space-step-12) + 2 * var(--space-stroke));
  block-size: calc(var(--type-caption-size) * var(--type-caption-line) + 2 * var(--composer-chip-padding-y));
  margin-block: calc(-1 * var(--composer-chip-padding-y));
  margin-inline: calc(-1 * var(--space-step-4)) calc(var(--space-step-4) + var(--space-stroke) - var(--composer-chip-padding-x));
  padding: 0; border: 0; border-radius: var(--radius-chip-small); background: transparent; color: inherit; cursor: pointer;
}
.composer-chip-dismiss::after {
  content: ""; position: absolute; top: 50%; inset-inline-start: 0; translate: 0 -50%;
  inline-size: max(100%, var(--space-target)); block-size: max(100%, var(--space-target));
}
.composer-chip-dismiss > svg { inline-size: var(--space-step-12); block-size: var(--space-step-12); stroke-width: var(--title-row-search-glyph-stroke); }
@media (hover: hover) {
  .composer-chip-dismiss:hover { color: var(--ink); }
}
.composer-chip-dismiss:focus-visible { background: var(--bubble); color: var(--ink); outline-offset: calc(-1 * var(--space-focus-ring)); }

.skip-link {
  position: fixed; inset-block-start: var(--space-step-8); inset-inline-start: var(--space-step-8); z-index: 2147483647;
  padding: var(--button-padding-y) var(--button-padding-x);
  border: var(--space-stroke) solid var(--stroke); border-radius: var(--radius-menu); background: var(--bubble); color: var(--ink);
  text-decoration: none; box-shadow: var(--shadow-float);
  font-size: var(--type-button-size); line-height: var(--type-button-line);
  font-weight: var(--type-button-weight); letter-spacing: var(--type-button-tracking);
}
.skip-link:not(:focus) {
  inline-size: var(--space-stroke); block-size: var(--space-stroke); padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@keyframes rails-float-in { from { opacity: 0; scale: var(--enter-scale); } }
@keyframes rails-fade-in { from { opacity: 0; } }
.menu, .popover, .sheet, .toast, .tooltip, .float, .float-card {
  transform-origin: top left; animation: rails-float-in var(--spring-standard);
}
:is(.menu, .popover, .sheet, .tooltip, .float, .float-card):dir(rtl) { transform-origin: top right; }
dialog.sheet:not(.sheet--side) { transform-origin: center; }
.toast { transform-origin: bottom; }

@media (width < 600px) {
  .sheet:not(.sheet--side, .sheet--contained), dialog.sheet:not(.sheet--side, .sheet--contained) {
    inline-size: 100%; max-inline-size: 100%; margin-block: auto 0; margin-inline: 0;
    border-end-start-radius: 0; border-end-end-radius: 0;
    padding-block-end: calc(var(--space-step-24) + env(safe-area-inset-bottom));
    transform-origin: bottom;
  }
}
/* ---- src/css/chat.css ---- */
.chat {
  display: flex; flex-direction: column; gap: var(--space-turn-gap);
  padding-block: var(--chat-column-padding-top) 0;
  padding-inline: var(--chat-column-padding-left) var(--chat-column-padding-right);
  font-size: var(--type-body-size); line-height: var(--type-body-line);
  font-weight: var(--type-body-weight); letter-spacing: var(--type-body-tracking); color: var(--ink);
}
.chat--full { padding-inline: var(--chat-column-full-padding-left) var(--chat-column-full-padding-right); }
:where(ol, ul).chat { margin-block: 0; list-style: none; }

.meta {
  align-self: center;
  font-size: var(--type-time-size); font-weight: var(--type-time-weight); letter-spacing: var(--type-time-tracking);
  color: var(--muted);
}

.turn {
  display: grid; grid-template-columns: var(--message-tile) minmax(0, 1fr); gap: var(--message-tile-gap);
  align-items: end;
}
.turn-tile {
  inline-size: var(--message-tile); block-size: var(--message-tile);
  margin-block-end: var(--message-tile-raise);
}

.stack { display: flex; flex-direction: column; gap: var(--space-stack-gap); min-inline-size: 0; }
.stack[data-join="l"] { align-items: flex-start; }
.stack[data-join="r"] { align-self: flex-end; align-items: flex-end; max-inline-size: var(--message-you-width); }

.msg {
  appearance: none; margin: 0; font: inherit; text-align: start;
  font-size: var(--type-body-size); line-height: var(--type-body-line);
  font-weight: var(--type-body-weight); letter-spacing: var(--type-body-tracking);
  border-radius: var(--r-tl, var(--radius-chat)) var(--r-tr, var(--radius-chat)) var(--r-br, var(--radius-chat)) var(--r-bl, var(--radius-chat));
  overflow-wrap: anywhere;
}
.msg--you {
  border: 0; background: var(--ink); color: var(--card);
  padding: var(--message-you-padding-y) var(--message-you-padding-x);
}
.msg--agent {
  border: var(--space-stroke) solid var(--stroke); background: var(--bubble); color: var(--ink);
  padding: var(--message-agent-padding-y) var(--message-agent-padding-x);
  max-inline-size: var(--message-agent-width);
}
.msg--action {
  border: var(--space-stroke) solid var(--stroke); background: var(--bubble); color: var(--ink);
  padding: var(--message-action-padding-y) var(--message-action-padding-x);
  inline-size: var(--message-action-width);
}
.msg-head { display: flex; justify-content: space-between; gap: var(--space-step-8); }
.msg-title { font-size: var(--type-name-size); font-weight: var(--type-name-weight); letter-spacing: var(--type-name-tracking); }
.msg-sub {
  font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); letter-spacing: var(--type-caption-tracking);
  color: var(--muted);
}
.msg-status { font-size: var(--type-small-size); overflow-wrap: normal; }
.msg-actions { display: flex; flex-wrap: wrap; gap: var(--space-step-6); margin-block-start: var(--space-step-10); }
.msg-actions > .btn { line-height: inherit; }
.msg--pill {
  display: inline-flex; align-items: center;
  border: var(--space-stroke) solid var(--stroke); background: var(--bubble); color: var(--muted);
  padding: var(--message-pill-padding-y) var(--message-pill-padding-x);
  font-size: var(--type-pill-size); font-weight: var(--type-pill-weight); letter-spacing: var(--type-pill-tracking);
  text-decoration: none;
}
.msg--pill:any-link, button.msg--pill { position: relative; cursor: pointer; }
.msg[aria-selected="true"] { box-shadow: 0 0 0 var(--space-focus-ring) var(--ink); }
.msg-speaker {
  position: absolute; inline-size: var(--space-stroke); block-size: var(--space-stroke); margin: calc(var(--space-stroke) * -1);
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.tool-line {
  display: flex; align-items: flex-start; gap: var(--tool-line-gap);
  padding: 0 var(--tool-line-padding-x) var(--tool-line-padding-bottom);
  font-size: var(--type-small-size); font-weight: var(--type-small-weight); letter-spacing: var(--type-small-tracking);
  color: var(--muted);
}
.tool-line > svg, .tool-line > rails-character {
  flex: none; inline-size: var(--tool-line-mark); block-size: var(--tool-line-mark); line-height: inherit;
  margin-block-start: calc((1lh - var(--tool-line-mark)) / 2);
}

.chat-fade {
  position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--chat-fade-height);
  background: linear-gradient(to bottom, transparent, var(--card) var(--chat-fade-stop));
  pointer-events: none;
}
.chat-fade--bare { block-size: var(--chat-fade-height-bare); }

.chat-dock {
  position: absolute; inset-inline: var(--composer-inset); inset-block-end: var(--composer-inset);
  display: flex; flex-direction: column; gap: var(--composer-notice-gap);
}
.chat-dock--full { inset-inline: var(--chat-header-full-padding-left) var(--space-step-24); inset-block-end: var(--composer-inset-bottom); }
.chat-dock--sticky { position: sticky; inset-inline: auto; inset-block-end: var(--composer-inset); }
/* ---- src/css/tile.css ---- */
rails-character { display: inline-block; flex: none; line-height: 0; vertical-align: middle; }

.tile { display: inline-block; flex: none; vertical-align: middle; }

[data-tile="rails"] { --tile: var(--tile-rails); --tink: var(--tile-rails-ink); }
[data-tile="encre"] { --tile: var(--tile-encre); --tink: var(--tile-encre-ink); }
[data-tile="brun"] { --tile: var(--tile-brun); --tink: var(--tile-brun-ink); }
[data-tile="rouge"] { --tile: var(--tile-rouge); --tink: var(--tile-rouge-ink); }
[data-tile="orange"] { --tile: var(--tile-orange); --tink: var(--tile-orange-ink); }
[data-tile="ambre"] { --tile: var(--tile-ambre); --tink: var(--tile-ambre-ink); }
[data-tile="vert"] { --tile: var(--tile-vert); --tink: var(--tile-vert-ink); }
[data-tile="turquoise"] { --tile: var(--tile-turquoise); --tink: var(--tile-turquoise-ink); }
[data-tile="bleu"] { --tile: var(--tile-bleu); --tink: var(--tile-bleu-ink); }
[data-tile="violet"] { --tile: var(--tile-violet); --tink: var(--tile-violet-ink); }
[data-tile="rose"] { --tile: var(--tile-rose); --tink: var(--tile-rose-ink); }
[data-tile="gris"] { --tile: var(--tile-gris); --tink: var(--tile-gris-ink); }
[data-tile="creme"] { --tile: var(--tile-creme); --tink: var(--tile-creme-ink); }
[data-tile="recruiter"] { --tile: var(--tile-recruiter); --tink: var(--tile-recruiter-ink); }
[data-tile="poker"] { --tile: var(--tile-poker); --tink: var(--tile-poker-ink); }
[data-tile="rolodex"] { --tile: var(--tile-rolodex); --tink: var(--tile-rolodex-ink); }
[data-tile="tutor"] { --tile: var(--tile-tutor); --tink: var(--tile-tutor-ink); }
[data-tile="jobbot"] { --tile: var(--tile-jobbot); --tink: var(--tile-jobbot-ink); }
[data-tile="unblock"] { --tile: var(--tile-unblock); --tink: var(--tile-unblock-ink); }
[data-tile="sleep-coach"] { --tile: var(--tile-sleep-coach); --tink: var(--tile-sleep-coach-ink); }
[data-tile="hiring-theory"] { --tile: var(--tile-hiring-theory); --tink: var(--tile-hiring-theory-ink); }
[data-tile="agent-hiring"] { --tile: var(--tile-agent-hiring); --tink: var(--tile-agent-hiring-ink); }
[data-tile="agent-poker"] { --tile: var(--tile-agent-poker); --tink: var(--tile-agent-poker-ink); }
[data-tile="agent-tutor"] { --tile: var(--tile-agent-tutor); --tink: var(--tile-agent-tutor-ink); }
.tile--offline { --tile: var(--offline); }

.ring {
  border-radius: var(--ring-attention-radius);
  box-shadow: 0 0 0 var(--ring-attention-gap) var(--ring-gap, var(--card)), 0 0 0 var(--ring-attention) var(--signal);
}
.tile--ringed { box-shadow: none; }

.mark { display: inline-block; flex: none; vertical-align: middle; --lead: var(--brand); }

.lockup { display: inline-flex; align-items: center; gap: var(--lockup-gap); line-height: 1; white-space: nowrap; vertical-align: -0.395em; }
.lockup > :is(.mark, rails-character) { inline-size: var(--lockup-mark); block-size: var(--lockup-mark); }
.wordmark { display: inline-block; flex: none; block-size: 1.3em; inline-size: auto; fill: currentColor; vertical-align: middle; }

.loader { display: inline-flex; align-items: center; gap: var(--space-step-10); }
.loader > :is(svg, rails-character) { flex: none; }
.loader-rear { fill: currentColor; }
.loader-lead { fill: var(--lead, var(--brand)); }
@keyframes rails-stride-rear { 50% { transform: translate(var(--loader-stride-x), calc(-1 * var(--loader-stride-y))); } }
@keyframes rails-stride-lead { 50% { transform: translate(calc(-1 * var(--loader-stride-x)), var(--loader-stride-y)); } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .loader-rear { animation: rails-stride-rear var(--loader-stride-period) ease-in-out infinite; }
  :root:not([data-motion="reduce"]) .loader-lead { animation: rails-stride-lead var(--loader-stride-period) ease-in-out infinite; }
}
:root[data-motion="full"] .loader-rear { animation: rails-stride-rear var(--loader-stride-period) ease-in-out infinite; }
:root[data-motion="full"] .loader-lead { animation: rails-stride-lead var(--loader-stride-period) ease-in-out infinite; }
.loader-label {
  color: var(--ink);
  font-size: var(--type-page-small-size); line-height: var(--type-page-small-line);
  font-weight: var(--type-page-small-weight); letter-spacing: var(--type-page-small-tracking);
}
/* ---- src/css/states.css ---- */
.skeleton { display: block; background: var(--fill); border-radius: var(--radius-control-inner); }
.skeleton--line { block-size: var(--type-body-size); border-radius: var(--radius-count); }
.skeleton--tile { flex: none; inline-size: var(--row-tile); block-size: var(--row-tile); border-radius: var(--radius-tile); }
.skeleton--bubble { block-size: var(--space-bar); border-radius: var(--radius-bubble); }

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-step-8);
  padding: var(--space-step-40); text-align: center;
}
.empty-title {
  margin: 0; color: var(--ink);
  font-size: var(--type-title-size); line-height: var(--type-title-line);
  font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking);
}
.empty-text {
  max-inline-size: var(--space-measure); margin: 0; color: var(--muted);
  font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-line);
  font-weight: var(--type-subtitle-weight); letter-spacing: var(--type-subtitle-tracking);
}

@media (forced-colors: active) {
  .skeleton { background: GrayText; }
}
/* ---- src/css/a11y.css ---- */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) :is(.menu, .popover, .sheet, .toast, .tooltip, .float, .float-card):not(#rails-motion-weight) {
    animation: rails-fade-in var(--fade-standard);
  }
  :root:not([data-motion="full"]) :not(#rails-motion-weight),
  :root:not([data-motion="full"]) :not(#rails-motion-weight)::before,
  :root:not([data-motion="full"]) :not(#rails-motion-weight)::after {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, visibility;
  }
  :root:not([data-motion="full"]), :root:not([data-motion="full"]) * { scroll-behavior: auto; }
}
:root[data-motion="reduce"] :is(.menu, .popover, .sheet, .toast, .tooltip, .float, .float-card):not(#rails-motion-weight) {
  animation: rails-fade-in var(--fade-standard);
}
:root[data-motion="reduce"] :not(#rails-motion-weight),
:root[data-motion="reduce"] :not(#rails-motion-weight)::before,
:root[data-motion="reduce"] :not(#rails-motion-weight)::after {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, visibility;
}
:root[data-motion="reduce"], :root[data-motion="reduce"] * { scroll-behavior: auto; }

@media (prefers-contrast: more) {
  :root:not([data-contrast="normal"]):not(#rails-contrast-weight), :root:not([data-contrast="normal"]):not(#rails-contrast-weight) [data-scheme] {
    --stroke: var(--muted); --card-edge: var(--muted); --frame-muted: var(--frame-ink);
  }
  :root:not([data-contrast="normal"]) .seg:not(.seg--flat) { box-shadow: inset 0 0 0 var(--space-stroke) var(--muted); }
  :root:not([data-contrast="normal"]) .composer-chip,
  :root:not([data-contrast="normal"]) .field--flat::placeholder,
  :root:not([data-contrast="normal"]) :is(.option, .chip:hover, .menu-item:is(:hover, [aria-current]:not([aria-current="false"]), [aria-checked="true"], [aria-selected="true"]))
    :is(.muted, .type-hint, .type-description, kbd) { color: var(--ink); }
}
:root[data-contrast="more"]:not(#rails-contrast-weight), :root[data-contrast="more"]:not(#rails-contrast-weight) [data-scheme] {
  --stroke: var(--muted); --card-edge: var(--muted); --frame-muted: var(--frame-ink);
}
:root[data-contrast="more"] .seg:not(.seg--flat) { box-shadow: inset 0 0 0 var(--space-stroke) var(--muted); }
:root[data-contrast="more"] .composer-chip,
:root[data-contrast="more"] .field--flat::placeholder,
:root[data-contrast="more"] :is(.option, .chip:hover, .menu-item:is(:hover, [aria-current]:not([aria-current="false"]), [aria-checked="true"], [aria-selected="true"]))
  :is(.muted, .type-hint, .type-description, kbd) { color: var(--ink); }

:root[data-frame-tint="on"]:not([data-scheme="dark"]) .frame-search input::placeholder { color: var(--frame-ink); }
@media (prefers-color-scheme: dark) {
  :root[data-frame-tint="on"]:not([data-scheme="light"]) .frame-search input::placeholder { color: var(--frame-muted); }
}

@media (pointer: coarse) {
  :is(.btn, .chip, .seg > :is(button, a, label), input[type=checkbox][role=switch].switch, .frame-plate, .frame-btn, .rail-plate, .frame-search,
    details.disclosure > summary, .msg--pill:any-link, button.msg--pill, .nav-row, button.float, a.float:any-link)::after {
    content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
    inline-size: max(100%, var(--space-touch)); block-size: max(100%, var(--space-touch));
  }
  .table-sort::after {
    content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
    inline-size: max(100%, var(--space-touch)); block-size: calc(1em * var(--type-subtitle-line) + 2 * var(--space-step-8));
  }
  .composer-chip-dismiss::after { inline-size: max(100%, var(--space-touch)); block-size: calc(100% + 2 * var(--composer-chip-gap)); }
  .frame-search { isolation: isolate; }
  .frame-search::after { z-index: -1; }
}

@media (forced-colors: active) {
  .bubble, .item, .needs-you, .notice, .search, .field:not(.field--bare), .field-group, .option, .tag, .count,
  .menu, .popover, .sheet, .toast, .tooltip, .composer, .float, .float-card, .card, .page-card, .frame-search,
  .msg--you, .msg--agent, .msg--action, .msg--pill, .btn:not(.btn--quiet, .btn--icon) {
    border: var(--space-stroke) solid CanvasText;
  }
  .row:is([aria-selected="true"], [aria-current]:not([aria-current="false"])),
  .nav-row:is([aria-selected="true"], [aria-current]:not([aria-current="false"])),
  .seg > :is(button, a, label):is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"]), :has(> input:checked)),
  .chip:is([aria-pressed="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"])),
  .frame-btn:is([aria-pressed="true"], [aria-expanded="true"]),
  .option:has(> input:checked),
  .rail-plate[aria-current]:not([aria-current="false"]) {
    forced-color-adjust: none; border-color: Highlight; background-color: Highlight; color: HighlightText;
  }
  .rail-plate[aria-current]:not([aria-current="false"]):has(.ring, .tile--ringed, rails-character:is([state="unsure"], [state="approval"], [state="error"], [state="blocked"], [state="capped"])) {
    background-color: Highlight; --ring-gap: Highlight;
  }
  .msg[aria-selected="true"]:not(:focus-visible) { outline: var(--space-focus-ring) solid Highlight; outline-offset: 0; }
  .menu-item:is([aria-current]:not([aria-current="false"]), [aria-checked="true"], [aria-selected="true"]) {
    forced-color-adjust: none; background-color: Highlight; color: HighlightText;
  }
  :is(.row:is([aria-selected="true"], [aria-current]:not([aria-current="false"])),
    .nav-row:is([aria-selected="true"], [aria-current]:not([aria-current="false"])),
    .option:has(> input:checked), .rail-plate[aria-current]:not([aria-current="false"]),
    .menu-item:is([aria-current]:not([aria-current="false"]), [aria-checked="true"], [aria-selected="true"]))
    :not(.count, .count *) { color: inherit; }
  rails-character, .tile, .ring, .mark, .unread, .mock-lights { forced-color-adjust: none; }
  :is(.highlight, .surface-highlight):not(:focus-visible) { outline: var(--space-focus-ring) dashed Highlight; outline-offset: var(--ring-attention-gap); }
}

@media print {
  :root { print-color-adjust: exact; }
  :is(.rail, .frame-bar, .splitter, .composer, .chat-dock, .chat-fade, .toast-region, .menu, .popover, .tooltip, .scrim, .skip-link):not(.mock-window, .mock-window *) { display: none; }
  :is(body.frame, .frame, .cards):not(.mock-window, .mock-window *) { display: block; block-size: auto; overflow: visible; padding: 0; }
  :is(body, .frame, .card, .page-card, .float-card):not(.mock-window, .mock-window *) { background: transparent; box-shadow: none; }
  :is(.card, .float-card, .card-scroll):not(.mock-window, .mock-window *) { overflow: visible; }
  .cards:not(.mock-window, .mock-window *) > * + * { margin-block-start: var(--space-step-24); }
  .msg--you:not(.mock-window *) { background: transparent; color: var(--ink); border: var(--space-stroke) solid var(--stroke); }
  .mock-window { break-inside: avoid; }
}