@layer components {
  .portal-body { background: var(--bg-sunken); }

  .page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
  .page-header__eyebrow { color: var(--text-faint); font-family: "JetBrains Mono", monospace; font-size: 0.65625rem; letter-spacing: 0.1em; text-transform: uppercase; }
  .page-header h1 { margin-top: 0.375rem; font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -0.025em; }
  .page-header__lede { max-width: 62ch; margin-top: 0.625rem; color: var(--text-muted); }

  .panel { padding: 1.25rem; border: 0.0625rem solid var(--border); border-radius: 0.625rem; background: var(--bg-raised); }

  .subnav {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    padding: 0.25rem;
    border: 0.0625rem solid var(--border);
    border-radius: 0.5rem;
    background: var(--bg-raised);
  }

  .subnav a { flex-shrink: 0; padding: 0.4375rem 0.6875rem; border-radius: 0.3125rem; color: var(--text-muted); font-size: 0.8125rem; }
  .subnav a:hover,
  .subnav a[aria-current="page"] { background: var(--accent-soft); color: var(--text); }

  .record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

  .record-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 13rem;
    flex-direction: column;
    padding: 1.25rem;
    border: 0.0625rem solid var(--border);
    border-radius: 0.625rem;
    background: var(--bg-raised);
    transition: border-color 140ms ease, transform 140ms ease;
  }

  .record-card:hover { border-color: var(--border-accent); transform: translateY(-0.125rem); }
  .record-card h2 { margin-top: 1.125rem; font-size: 1.25rem; }
  .record-card h2 a::after { position: absolute; inset: 0; content: ""; }
  .record-card > p { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.875rem; }
  .record-card__meta { margin-top: auto; padding-top: 1rem; color: var(--text-faint); font-size: 0.6875rem; }

  .record-list { overflow: hidden; border: 0.0625rem solid var(--border); border-radius: 0.625rem; background: var(--bg-raised); }
  .record-list__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.125rem; border-bottom: 0.0625rem solid var(--border); }
  .record-list__row:last-child { border-bottom: 0; }
  .record-list__row--link:hover { background: var(--accent-soft); }
  .record-list__row h2,
  .record-list__row h3 { font-size: 1rem; }
  .record-list__row p { margin-top: 0.25rem; color: var(--text-muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
  .record-list__eyebrow { color: var(--text-faint); font-family: "JetBrains Mono", monospace; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; }

  .form-stack { display: flex; flex-direction: column; gap: 1.25rem; max-width: 56rem; }
  .form-section { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1rem, 3vw, 1.5rem); border: 0.0625rem solid var(--border); border-radius: 0.625rem; background: var(--bg-raised); }
  .form-section__heading { padding-bottom: 0.875rem; border-bottom: 0.0625rem solid var(--border); }
  .form-section__heading h2 { font-size: 1.125rem; }
  .form-section__heading p { max-width: 68ch; margin-top: 0.375rem; color: var(--text-muted); font-size: 0.8125rem; }
  .form-section__heading code { color: var(--accent-text); font-size: 0.75rem; }
  .form-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }
  .error-list__item { display: block; }

  .portal-section { margin-top: 2.5rem; }
  .section-title-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 0.875rem; }
  .section-title-row h2 { margin-top: 0.25rem; font-size: 1.25rem; }

  .projection-card { display: flex; min-width: 0; flex-direction: column; gap: 1rem; padding: 1.125rem; border: 0.0625rem solid var(--border); border-radius: 0.625rem; background: var(--bg-raised); }
  .projection-card h3 { font-size: 1rem; }
  .projection-card__pending { padding: 1rem; border: 0.0625rem dashed var(--border-strong); border-radius: 0.4375rem; color: var(--text-muted); font-size: 0.8125rem; }

  .copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; border: 0.0625rem solid var(--border-strong); border-radius: 0.4375rem; background: var(--bg-code); }
  .copy-field__label { grid-column: 1 / -1; padding: 0.375rem 0.625rem; border-bottom: 0.0625rem solid var(--border); color: var(--text-faint); font-family: "JetBrains Mono", monospace; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .copy-field__value { min-width: 0; padding: 0.625rem; overflow-x: auto; color: var(--accent-text); font-size: 0.75rem; }
  .copy-field__button { padding: 0.5rem 0.75rem; border: 0; border-left: 0.0625rem solid var(--border); background: var(--bg-raised); color: var(--text-muted); cursor: pointer; font-family: "JetBrains Mono", monospace; font-size: 0.625rem; text-transform: uppercase; }
  .copy-field__button:hover { color: var(--text); }

  .definition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1.25rem; }
  .definition-grid > div { min-width: 0; }
  .definition-grid dt { color: var(--text-faint); font-family: "JetBrains Mono", monospace; font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; }
  .definition-grid dd { margin-top: 0.1875rem; color: var(--text-muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
  .definition-grid--boxed { padding: 1.25rem; border: 0.0625rem solid var(--border); border-radius: 0.625rem; background: var(--bg-raised); }

  .read-only-field { display: flex; flex-direction: column; padding: 0.875rem 1rem; border: 0.0625rem solid var(--border); border-radius: 0.4375rem; background: var(--bg-sunken); }
  .read-only-field__label { color: var(--text-faint); font-family: "JetBrains Mono", monospace; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .read-only-field strong { margin-top: 0.25rem; }
  .read-only-field > span:last-child { color: var(--text-muted); font-size: 0.75rem; }

  .uri-list { display: flex; flex-direction: column; gap: 0.625rem; }
  .uri-list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
  .uri-list__remove,
  .uri-list__add { border: 0.0625rem solid var(--border-strong); border-radius: 0.375rem; background: var(--bg-raised); color: var(--text-muted); cursor: pointer; font-family: "JetBrains Mono", monospace; font-size: 0.6875rem; }
  .uri-list__remove { padding-inline: 0.625rem; }
  .uri-list__add { width: max-content; padding: 0.4375rem 0.625rem; }
  .uri-list__remove:hover,
  .uri-list__add:hover { border-color: var(--text-faint); color: var(--text); }
  .uri-list__add:disabled { cursor: not-allowed; opacity: 0.5; }

  .permission-legend { display: flex; flex-direction: column; gap: 0.625rem; background: var(--bg-sunken); }
  .permission-legend h2 { font-size: 1rem; }
  .permission-legend__pattern { color: var(--accent-text); font-family: "JetBrains Mono", monospace; font-size: 0.8125rem; }
  .permission-legend__list { display: flex; flex-direction: column; gap: 0.375rem; margin: 0; padding-left: 1.125rem; color: var(--text-muted); font-size: 0.8125rem; }
  .permission-legend__list code { color: var(--accent-text); }

  .permission-group + .permission-group { margin-top: 1.25rem; }
  .permission-group__heading { padding-bottom: 0.5rem; color: var(--text-faint); font-family: "JetBrains Mono", monospace; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }

  .permission-list { display: flex; flex-direction: column; gap: 0.75rem; }
  .permission-row { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border: 0.0625rem solid var(--border); border-radius: 0.5rem; background: var(--bg-sunken); }
  .permission-row__choice { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.625rem; }
  .permission-row__choice input { width: 1rem; height: 1rem; margin-top: 0.1875rem; accent-color: var(--accent); }
  .permission-row__choice label { cursor: pointer; }
  .permission-row__choice code { color: var(--accent-text); }
  .permission-row__label { display: flex; flex-direction: column; gap: 0.125rem; }
  .permission-row__description { color: var(--text-muted); font-size: 0.75rem; }

  .quickstart-actions:empty { display: none; }
  .quickstart-button { width: max-content; }

  .diff-summary { margin-bottom: 1.25rem; }

  .snapshot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-block: 1.25rem; }
  .snapshot-card { display: flex; min-width: 0; flex-direction: column; gap: 0.375rem; padding: 1rem; border: 0.0625rem solid var(--border); border-radius: 0.5rem; background: var(--bg-raised); }
  .snapshot-card--wide { grid-column: 1 / -1; }
  .snapshot-card__label { color: var(--text-faint); font-family: "JetBrains Mono", monospace; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .snapshot-card > p { color: var(--text-muted); font-size: 0.8125rem; }
  .snapshot-card > code { color: var(--accent-text); overflow-wrap: anywhere; }
  .mono-list { margin: 0; padding-left: 1.25rem; color: var(--text-muted); font-size: 0.75rem; }
  .snapshot-scopes { display: flex; flex-direction: column; }
  .snapshot-scopes > div { padding-block: 0.625rem; border-bottom: 0.0625rem solid var(--border); }
  .snapshot-scopes > div:last-child { border-bottom: 0; }
  .snapshot-scopes code { color: var(--accent-text); }
  .snapshot-scopes p { margin-top: 0.25rem; color: var(--text-muted); font-size: 0.8125rem; }

  .choice-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; padding: 1rem; border: 0.0625rem solid var(--border-strong); border-radius: 0.5rem; cursor: pointer; }
  .choice-card:hover { border-color: var(--border-accent); }
  .choice-card input { width: 1rem; height: 1rem; margin-top: 0.1875rem; accent-color: var(--accent); }
  .choice-card span { display: flex; flex-direction: column; }
  .choice-card small { margin-top: 0.25rem; color: var(--text-muted); }

  .review-meta { margin-bottom: 1.25rem; }
  .prose { color: var(--text-muted); }
  .prose p + p { margin-top: 0.75rem; }

  .metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

  .decision-panel { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; padding: 1.25rem; border: 0.0625rem solid var(--border-accent); border-radius: 0.625rem; background: var(--bg-raised); }

  .payload-view { max-height: 34rem; margin: 0; padding: 1rem; overflow: auto; border: 0.0625rem solid var(--border); border-radius: 0.5rem; background: var(--bg-code); color: var(--sx-cmd); font-size: 0.75rem; line-height: 1.65; }

  .disclosure { margin-bottom: 1.75rem; background: var(--bg-sunken); }
  .disclosure summary { cursor: pointer; color: var(--text); font-weight: 500; }
  .disclosure summary + p { margin-top: 0.625rem; }

  @media (max-width: 48rem) {
    .record-grid,
    .metric-grid,
    .snapshot-grid { grid-template-columns: minmax(0, 1fr); }
    .snapshot-card--wide { grid-column: auto; }
    .definition-grid { grid-template-columns: minmax(0, 1fr); }
    .record-list__row { align-items: flex-start; flex-direction: column; }
  }

  @media (max-width: 30rem) {
    .uri-list__row { grid-template-columns: minmax(0, 1fr); }
    .uri-list__remove { min-height: 2rem; }
  }
}