@import url("/assets/tokens-ddf324e5.css");

@layer reset, base, objects, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-width: 18rem;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  ul,
  ol {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
    list-style: none;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }
}

@layer base {
  :root {
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 100%;
    line-height: var(--line-height-body);
  }

  body {
    min-height: 100vh;
    background: var(--color-canvas);
    color: var(--color-ink);
    font-size: var(--font-size-body);
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background: var(--color-accent-soft);
    color: var(--color-ink);
  }

  a {
    color: var(--color-link);
    text-decoration-thickness: .08em;
    text-underline-offset: .16em;
  }

  a:hover {
    color: var(--color-link-hover);
  }

  :focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--color-ink);
    font-weight: 680;
    line-height: var(--line-height-tight);
    letter-spacing: -.02em;
  }

  h1 {
    font-size: var(--font-size-title);
  }

  h2 {
    font-size: clamp(1.35rem, 1.15rem + .55vw, 1.75rem);
  }

  h3 {
    font-size: 1.125rem;
  }

  p {
    max-width: 70ch;
  }

  code,
  pre,
  .identifier {
    font-family: var(--font-mono);
  }

  code,
  .identifier {
    overflow-wrap: anywhere;
  }

  .metadata {
    color: var(--color-ink-muted);
    font-size: var(--font-size-metadata);
    letter-spacing: .04em;
  }

  .text-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-link);
    font-weight: 650;
  }

  .text-link--muted {
    color: var(--color-ink-muted);
  }
}

@layer objects {
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .stack--tight {
    gap: var(--space-2);
  }

  .stack--loose {
    gap: var(--space-6);
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .cluster--between {
    justify-content: space-between;
  }

  .grid {
    display: grid;
    gap: var(--space-5);
  }

  .grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reading-width {
    width: min(100%, var(--reading-width));
  }

  .content-width {
    width: min(100%, var(--content-width));
    margin-inline: auto;
  }
}

@layer components {
  .skip-link {
    position: fixed;
    z-index: 20;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-ink);
    color: var(--color-surface);
    font-weight: 700;
    transform: translateY(-150%);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .flash-region {
    position: fixed;
    z-index: 15;
    top: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
    display: grid;
    gap: var(--space-2);
    width: min(32rem, calc(100% - (2 * var(--space-4))));
    margin-inline: auto;
  }

  .flash {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-floating);
  }

  .flash p {
    flex: 1;
    overflow-wrap: anywhere;
  }

  .flash--success {
    border-color: var(--color-success);
  }

  .flash--warning {
    border-color: var(--color-warning);
  }

  .flash--danger {
    border-color: var(--color-danger);
  }

  .brand-lockup {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-ink);
    font-weight: 760;
    letter-spacing: -.02em;
    text-decoration: none;
  }

  .brand-lockup:hover {
    color: var(--color-ink);
  }

  a.brand-lockup:visited {
    color: var(--color-ink);
  }

  .brand-mark {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    place-items: center;
    border-radius: .6rem;
    background: var(--color-accent-solid);
    color: var(--color-on-accent);
  }

  .brand-mark--small {
    width: 1.5rem;
    height: 1.5rem;
    flex-basis: 1.5rem;
    border-radius: .45rem;
  }

  .brand-mark__image {
    width: 1.35rem;
    height: 1.35rem;
  }

  .brand-mark--small .brand-mark__image {
    width: 1rem;
    height: 1rem;
  }

  .button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  }

  .button:hover {
    text-decoration: none;
    transform: translateY(-1px);
  }

  .button:active {
    transform: translateY(0);
  }

  .button--primary {
    background: var(--color-accent-solid);
    color: var(--color-on-accent);
  }

  .button--primary:hover {
    background: var(--color-accent-solid-hover);
    color: var(--color-on-accent);
  }

  a.button--primary:link,
  a.button--primary:visited {
    color: var(--color-on-accent);
  }

  .button--secondary {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .button--secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-ink);
  }

  .button--quiet {
    color: var(--color-accent-ink);
  }

  .button--quiet:hover {
    background: var(--color-accent-soft);
  }

  .button--danger {
    border-color: var(--color-danger);
    color: var(--color-danger);
  }

  .button--large {
    min-height: 3.25rem;
    padding-inline: var(--space-5);
    font-size: 1rem;
  }

  .button--small {
    min-height: 2.25rem;
    padding: var(--space-2) var(--space-3);
  }

  .button[disabled],
  .button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
  }

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

  .app-shell__sidebar {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-4);
    border-right: 1px solid var(--color-brand-dark);
    background: var(--color-brand-dark);
    color: var(--color-canvas);
  }

  .app-shell__brand {
    padding-inline: var(--space-2);
  }

  .app-shell__sidebar .brand-lockup,
  .app-shell__sidebar .brand-lockup:hover,
  .app-shell__sidebar a.brand-lockup:link,
  .app-shell__sidebar a.brand-lockup:visited {
    color: #f3f0df;
  }

  .app-shell__sidebar .brand-wordmark {
    color: #f3f0df;
  }

  .workspace-context {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid #4a473f;
    border-radius: var(--radius-card);
    background: #232220;
  }

  .workspace-context__item {
    display: grid;
    min-width: 0;
    gap: .1rem;
  }

  .workspace-context__label,
  .primary-navigation__label,
  .user-context__label {
    color: #b9b5a5;
    font-size: var(--font-size-label);
  }

  .workspace-context__value {
    overflow-wrap: anywhere;
    color: #f3f0df;
    font-weight: 680;
    text-decoration: none;
  }

  .app-shell__sidebar a.workspace-context__value:link,
  .app-shell__sidebar a.workspace-context__value:visited {
    color: #f3f0df;
    -webkit-text-fill-color: #f3f0df;
  }

  .app-shell__sidebar-footer {
    display: grid;
    gap: var(--space-4);
    margin-top: auto;
  }

  .user-context {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-top: 1px solid #4a473f;
  }

  .user-context__avatar {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent-ink);
    font-size: var(--font-size-small);
    font-weight: 760;
  }

  .user-context__label {
    overflow: hidden;
    color: #f3f0df;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
  }

  .app-shell__main {
    min-width: 0;
  }

  .app-shell__header {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-7));
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-canvas) 88%, transparent);
  }

  .app-shell__header-context,
  .app-shell__header-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
  }

  .app-shell__header-account,
  .app-shell__header-project {
    overflow: hidden;
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-shell__header-project {
    color: var(--color-ink);
  }

  .app-shell__header-separator {
    color: var(--color-ink-faint);
  }

  .app-shell__content {
    width: min(100%, var(--content-width));
    margin-inline: auto;
    padding: clamp(var(--space-5), 4vw, var(--space-8)) clamp(var(--space-4), 4vw, var(--space-7));
  }

  .primary-navigation {
    min-width: 0;
  }

  .primary-navigation__label {
    margin-bottom: var(--space-2);
    padding-inline: var(--space-2);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .primary-navigation__list {
    display: grid;
    gap: var(--space-1);
  }

  .primary-navigation__link {
    display: flex;
    min-height: 2.75rem;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    color: #c8c4b5;
    font-size: var(--font-size-small);
    font-weight: 650;
    text-decoration: none;
  }

  .app-shell__sidebar a.primary-navigation__link:link,
  .app-shell__sidebar a.primary-navigation__link:visited {
    color: #c8c4b5;
  }

  .app-shell__sidebar .primary-navigation__text,
  .app-shell__sidebar .primary-navigation__icon {
    color: #c8c4b5;
  }

  a.primary-navigation__link:hover,
  .primary-navigation__link.is-current {
    background: #aecacd;
    color: #161616;
  }

  .app-shell__sidebar a.primary-navigation__link:hover,
  .app-shell__sidebar a.primary-navigation__link.is-current,
  .app-shell__sidebar a.primary-navigation__link.is-current:visited {
    color: #161616;
  }

  .app-shell__sidebar a.primary-navigation__link:hover .primary-navigation__text,
  .app-shell__sidebar a.primary-navigation__link:hover .primary-navigation__icon,
  .app-shell__sidebar a.primary-navigation__link.is-current .primary-navigation__text,
  .app-shell__sidebar a.primary-navigation__link.is-current .primary-navigation__icon {
    color: #161616;
  }

  .primary-navigation__link.is-disabled {
    cursor: not-allowed;
    opacity: .55;
  }

  .primary-navigation__icon {
    display: inline-grid;
    width: 1.25rem;
    flex: 0 0 1.25rem;
    place-items: center;
    color: currentColor;
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    font-weight: 760;
  }

  .primary-navigation__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .primary-navigation__badge {
    margin-left: auto;
    border-radius: var(--radius-pill);
    background: #393731;
    color: #d8d4c4;
    font-size: var(--font-size-metadata);
    line-height: 1.4;
    padding: .1rem .4rem;
  }

  .page {
    display: grid;
    gap: var(--space-6);
  }

  .page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .page__heading {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
  }

  .page__title {
    overflow-wrap: anywhere;
  }

  .page__intro {
    max-width: 65ch;
    color: var(--color-ink-muted);
    font-size: 1.0625rem;
  }

  .page__actions {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: var(--space-2);
  }

  .section-heading {
    display: grid;
    gap: var(--space-3);
    max-width: 46rem;
  }

  .section-heading--centered {
    margin-inline: auto;
    text-align: center;
  }

  .section-heading--centered p {
    margin-inline: auto;
  }

  .card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }

  .card__header,
  .card__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
  }

  .card__header {
    border-bottom: 1px solid var(--color-border);
  }

  .card__footer {
    align-items: center;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
  }

  .card__title {
    overflow-wrap: anywhere;
  }

  .card__body {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .card__body > p {
    color: var(--color-ink-muted);
  }

  .status-badge {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    padding: .2rem .55rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-label);
    font-weight: 700;
    line-height: 1.2;
  }

  .status-badge__icon {
    display: inline-grid;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 800;
  }

  .status-badge--accent {
    color: var(--color-accent-ink);
    background: var(--color-accent-soft);
  }

  .status-badge--info {
    color: var(--color-info);
    background: var(--color-info-soft);
  }

  .status-badge--success {
    color: var(--color-success);
    background: var(--color-success-soft);
  }

  .status-badge--warning {
    color: var(--color-warning);
    background: var(--color-warning-soft);
  }

  .status-badge--danger,
  .status-badge--critical {
    color: var(--color-danger);
    background: var(--color-danger-soft);
  }

  .status-badge--critical {
    color: var(--color-critical);
    background: var(--color-critical-soft);
  }

  .status-badge--muted {
    color: var(--color-ink-muted);
    background: var(--color-muted-soft);
  }

  .empty-state,
  .state-panel {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: clamp(var(--space-5), 5vw, var(--space-7));
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-panel);
    background: var(--color-surface-raised);
  }

  .empty-state {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .empty-state p,
  .state-panel p {
    color: var(--color-ink-muted);
  }

  .empty-state p {
    margin-inline: auto;
  }

  .empty-state__icon,
  .state-panel__icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--color-info);
    font-family: var(--font-mono);
    font-weight: 800;
  }

  .empty-state--success .empty-state__icon {
    color: var(--color-success);
  }

  .empty-state--warning .empty-state__icon {
    color: var(--color-warning);
  }

  .empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }

  .state-panel__content {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
  }

  .state-panel__details {
    font-size: var(--font-size-small);
  }

  .state-panel--success {
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));
    background: var(--color-success-soft);
  }

  .state-panel--warning {
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
    background: var(--color-warning-soft);
  }

  .state-panel--danger,
  .state-panel--critical {
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));
    background: var(--color-danger-soft);
  }

  .state-panel--muted,
  .state-panel--permission {
    border-style: solid;
    background: var(--color-muted-soft);
  }

  .state-panel--plan {
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
    background: var(--color-accent-soft);
  }

  .form-errors {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-card);
    background: var(--color-danger-soft);
    color: var(--color-ink);
  }

  .form-errors h2 {
    font-size: 1rem;
  }

  .form-errors ul {
    display: grid;
    gap: var(--space-1);
    padding-left: var(--space-5);
    list-style: disc;
  }

  .form {
    display: grid;
    gap: var(--space-5);
    width: min(100%, var(--reading-width));
  }

  .field {
    display: grid;
    gap: var(--space-2);
  }

  .field__label {
    color: var(--color-ink);
    font-weight: 700;
  }

  .field__hint {
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
  }

  .field__error {
    color: var(--color-danger);
    font-size: var(--font-size-small);
    font-weight: 650;
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .field textarea {
    min-height: 8rem;
    resize: vertical;
  }

  .field input::placeholder,
  .field textarea::placeholder {
    color: var(--color-ink-faint);
  }

  .field input[aria-invalid="true"],
  .field select[aria-invalid="true"],
  .field textarea[aria-invalid="true"] {
    border-color: var(--color-danger);
  }

  .identity-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr);
    background: var(--color-surface);
  }

  .identity-shell__story {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding: clamp(var(--space-5), 5vw, var(--space-8));
    background: var(--color-brand-dark);
    color: #f3f0df;
  }

  .identity-shell__story .brand-lockup,
  .identity-shell__story .brand-lockup:hover,
  .identity-shell__story a.brand-lockup:link,
  .identity-shell__story a.brand-lockup:visited {
    color: #f3f0df;
  }

  .identity-shell__story .brand-wordmark {
    color: #f3f0df;
  }

  .identity-shell__message {
    display: grid;
    gap: var(--space-7);
  }

  .identity-shell__message > p {
    max-width: 15ch;
    color: #f3f0df;
    font-size: clamp(2rem, 1.25rem + 2.4vw, 3.6rem);
    font-weight: 720;
    letter-spacing: -.055em;
    line-height: 1.02;
  }

  .identity-loop {
    display: grid;
    border-top: 1px solid #4a473f;
  }

  .identity-loop li {
    display: grid;
    grid-template-columns: 2rem 5rem minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-bottom: 1px solid #4a473f;
    align-items: baseline;
  }

  .identity-loop span {
    color: #ff7a45;
    font-family: var(--font-mono);
    font-size: var(--font-size-metadata);
  }

  .identity-loop strong {
    color: #aecacd;
  }

  .identity-loop small,
  .identity-shell__note {
    color: #b9b5a5;
  }

  .identity-shell__note {
    font-size: var(--font-size-small);
  }

  .identity-shell__content {
    display: grid;
    min-width: 0;
    place-items: center;
    padding: clamp(var(--space-6), 8vw, var(--space-9));
    background: var(--color-canvas);
  }

  .identity-page {
    display: grid;
    width: min(100%, 32rem);
    gap: var(--space-6);
  }

  .identity-page--wide {
    width: min(100%, 43rem);
  }

  .identity-page__header {
    display: grid;
    gap: var(--space-3);
  }

  .identity-page__header h1,
  .identity-state h1 {
    max-width: 13ch;
    font-size: clamp(2.25rem, 1.65rem + 1.8vw, 3.4rem);
    letter-spacing: -.055em;
  }

  .identity-page__header p,
  .identity-page__switch {
    color: var(--color-ink-muted);
  }

  .identity-form {
    width: 100%;
  }

  .identity-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .identity-form .button--primary {
    width: 100%;
  }

  .identity-form__assist {
    font-size: var(--font-size-small);
    font-weight: 650;
  }

  .identity-page__switch {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  .identity-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .identity-page__error {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }

  .identity-state {
    padding: clamp(var(--space-5), 5vw, var(--space-7));
  }

  .resource-page {
    display: grid;
    gap: var(--space-6);
  }

  .resource-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
  }

  .resource-page__heading {
    display: grid;
    gap: var(--space-2);
  }

  .resource-page__heading p,
  .resource-page__section > p,
  .resource-list__body p {
    color: var(--color-ink-muted);
  }

  .resource-page__actions,
  .resource-page__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .resource-page__section {
    display: grid;
    gap: var(--space-4);
  }

  .resource-list {
    display: grid;
    border-top: 1px solid var(--color-border-strong);
  }

  .resource-list__item {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .resource-list__body {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
  }

  .resource-list__title {
    font-size: 1.0625rem;
    font-weight: 720;
  }

  .resource-list__meta {
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
  }

  .resource-page__form {
    width: min(100%, 42rem);
  }

  .resource-page__form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
  }

  .resource-page__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-3);
    border-block: 1px solid var(--color-border);
  }

  .resource-page__nav a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    font-weight: 680;
  }

  .secret-reveal {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-warning);
    background: var(--color-warning-soft);
  }

  .secret-reveal code {
    display: block;
    padding: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
    background: var(--color-surface);
    font-size: var(--font-size-small);
  }

  .compact-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-2);
  }

  .compact-form select {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .field-group {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
  }

  .field-group legend {
    padding-inline: var(--space-2);
    font-weight: 700;
  }

  .field-group label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .marketing-main {
    min-height: 70vh;
  }

  .marketing-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .marketing-header__inner,
  .marketing-footer__inner {
    display: flex;
    width: min(100%, var(--content-width));
    min-height: 4.75rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-inline: auto;
    padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-7));
  }

  .marketing-header__navigation,
  .marketing-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
  }

  .marketing-page {
    overflow: hidden;
    background: var(--color-canvas);
  }

  .marketing-hero,
  .marketing-section,
  .marketing-cta {
    width: min(100%, var(--content-width));
    margin-inline: auto;
    padding: clamp(var(--space-8), 10vw, var(--space-9)) clamp(var(--space-4), 4vw, var(--space-7));
  }

  .marketing-hero {
    display: grid;
    min-height: min(46rem, calc(100vh - 4.75rem));
    align-items: center;
    grid-template-columns: minmax(0, .95fr) minmax(23rem, 1.05fr);
    gap: clamp(var(--space-7), 7vw, var(--space-9));
  }

  .marketing-hero__copy {
    display: grid;
    gap: var(--space-5);
  }

  .marketing-hero h1 {
    max-width: 11ch;
    font-size: var(--font-size-display);
    letter-spacing: -.06em;
  }

  .marketing-hero__lede {
    max-width: 58ch;
    color: var(--color-ink-muted);
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  }

  .marketing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .marketing-hero__trust {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
  }

  .marketing-hero__trust span {
    color: var(--color-success);
    font-size: .7rem;
  }

  .loop-board {
    display: grid;
    min-width: 0;
    border: 1px solid #161616;
    background: #161616;
    color: #f3f0df;
  }

  .loop-board__header,
  .loop-board__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-small);
  }

  .loop-board__header {
    border-bottom: 1px solid #45423b;
    color: #b9b5a5;
  }

  .loop-board__status {
    padding: .2rem .55rem;
    border: 1px solid #aecacd;
    border-radius: var(--radius-pill);
    color: #aecacd;
    font-size: var(--font-size-metadata);
    font-weight: 700;
  }

  .loop-board__flow {
    display: grid;
  }

  .loop-board__row {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: clamp(var(--space-4), 4vw, var(--space-5));
    border-bottom: 1px solid #45423b;
  }

  .loop-board__row::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: .3rem;
    background: #ff5b19;
    content: "";
  }

  .loop-board__row--work::before {
    background: #aecacd;
  }

  .loop-board__row--verify::before {
    background: #e87461;
  }

  .loop-board__index {
    color: #888477;
    font-family: var(--font-mono);
    font-size: var(--font-size-metadata);
  }

  .loop-board__row div {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
  }

  .loop-board__row strong {
    color: #f3f0df;
  }

  .loop-board__row small {
    overflow-wrap: anywhere;
    color: #b9b5a5;
  }

  .loop-board__state {
    color: #aecacd;
    font-size: var(--font-size-metadata);
    font-weight: 700;
  }

  .loop-board__footer {
    background: #aecacd;
    color: #161616;
  }

  .marketing-proofline {
    display: grid;
    width: min(100%, var(--content-width));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: auto;
    border-block: 1px solid var(--color-border-strong);
  }

  .marketing-proofline p {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5) clamp(var(--space-4), 3vw, var(--space-6));
  }

  .marketing-proofline p + p {
    border-left: 1px solid var(--color-border-strong);
  }

  .marketing-proofline span {
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
  }

  .marketing-section {
    display: grid;
    gap: var(--space-7);
    border-top: 1px solid var(--color-border);
  }

  .marketing-section--first-value {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .step-list {
    display: grid;
    gap: var(--space-4);
  }

  .step-list__item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .step-list__number {
    color: var(--color-accent-hover);
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    font-weight: 760;
  }

  .step-list__item div {
    display: grid;
    gap: var(--space-2);
  }

  .step-list__item p,
  .marketing-section__body p {
    color: var(--color-ink-muted);
  }

  .marketing-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block: 1px solid var(--color-border);
  }

  .marketing-principle {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-5);
  }

  .marketing-principle + .marketing-principle {
    border-left: 1px solid var(--color-border);
  }

  .marketing-principle p {
    color: var(--color-ink-muted);
  }

  .marketing-section--quiet {
    background: var(--color-brand-blue);
  }

  .marketing-section--quiet h2,
  .marketing-section--quiet .marketing-section__body p {
    color: #161616;
  }

  .marketing-section--quiet .metadata {
    color: #3f5254;
  }

  .marketing-section__split {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: var(--space-7);
  }

  .marketing-section__body {
    display: grid;
    align-content: start;
    gap: var(--space-4);
  }

  .marketing-cta {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  .marketing-cta p {
    color: var(--color-ink-muted);
  }

  .marketing-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .marketing-footer__inner {
    min-height: 5.5rem;
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nowrap {
    white-space: nowrap;
  }

  .break-anywhere {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 68rem) {
  .identity-shell {
    grid-template-columns: minmax(16rem, .65fr) minmax(0, 1.35fr);
  }

  .identity-loop li {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .identity-loop small {
    grid-column: 2;
  }

  .app-shell {
    display: block;
  }

  .app-shell__sidebar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-7));
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .app-shell__brand {
    padding: 0;
  }

  .workspace-context {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: 0;
    border: 0;
    background: transparent;
  }

  .workspace-context__item {
    max-width: 14rem;
  }

  .workspace-context__label {
    display: none;
  }

  .app-shell__sidebar > .primary-navigation {
    grid-column: 1 / -1;
    overflow-x: auto;
  }

  .primary-navigation__list {
    display: flex;
    min-width: max-content;
    gap: var(--space-1);
  }

  .primary-navigation__label {
    display: none;
  }

  .app-shell__sidebar-footer {
    display: none;
  }

  .marketing-hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .marketing-section--first-value,
  .marketing-section__split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  .identity-shell {
    grid-template-columns: 1fr;
  }

  .identity-shell__story {
    min-height: auto;
    gap: var(--space-5);
    padding: var(--space-4);
  }

  .identity-shell__message > p,
  .identity-loop {
    display: none;
  }

  .identity-shell__content {
    min-height: calc(100vh - 9rem);
    place-items: start center;
    padding: clamp(var(--space-5), 8vw, var(--space-8)) var(--space-4);
  }

  .identity-form__row {
    grid-template-columns: 1fr;
  }

  .resource-page__header,
  .resource-list__item {
    align-items: stretch;
    flex-direction: column;
  }

  .grid--two,
  .grid--three,
  .marketing-principles,
  .marketing-proofline {
    grid-template-columns: 1fr;
  }

  .marketing-principle + .marketing-principle,
  .marketing-proofline p + p {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .page__header,
  .marketing-header__inner,
  .marketing-footer__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .page__actions,
  .marketing-header__navigation,
  .marketing-footer__links {
    justify-content: flex-start;
  }

  .marketing-hero h1 {
    max-width: 15ch;
  }

}

@media (max-width: 34rem) {
  .app-shell__sidebar {
    grid-template-columns: 1fr;
  }

  .app-shell__sidebar > .primary-navigation {
    overflow-x: visible;
  }

  .primary-navigation__list {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .primary-navigation__link {
    justify-content: center;
    gap: var(--space-1);
    padding-inline: var(--space-2);
  }

  .workspace-context {
    justify-content: flex-start;
  }

  .app-shell__header {
    min-height: 3.75rem;
  }

  .app-shell__header-actions {
    display: none;
  }

  .marketing-hero,
  .marketing-section,
  .marketing-cta {
    padding-block: var(--space-7);
  }

  .loop-board__row {
    grid-template-columns: 1.5rem minmax(0, 1fr);
  }

  .loop-board__state {
    grid-column: 2;
  }
}

@layer components {
  .work-items-page,
  .work-item-page {
    display: grid;
    gap: var(--space-6);
  }

  .work-items-page__header,
  .work-item-page__header {
    margin-bottom: 0;
  }

  .work-items-toolbar {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }

  .work-items-toolbar__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
  }

  .work-items-toolbar__heading h2 {
    width: 100%;
  }

  .work-items-toolbar__heading h2 {
    margin-top: calc(var(--space-2) * -1);
  }

  .view-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .work-item-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(8rem, 1fr));
    gap: var(--space-3);
    align-items: end;
  }

  .work-item-filter,
  .work-item-filters__actions,
  .state-controls form,
  .assignment-form,
  .comment-form {
    display: grid;
    gap: var(--space-2);
  }

  .work-item-filter label,
  .work-item-filters__actions label,
  .state-controls label,
  .assignment-form label,
  .comment-form label,
  .comment-actions label {
    color: var(--color-ink-muted);
    font-size: var(--font-size-metadata);
    font-weight: 700;
  }

  .work-item-filter input,
  .work-item-filter select,
  .work-item-filters__actions input,
  .state-controls select,
  .state-controls textarea,
  .assignment-form select,
  .comment-form textarea,
  .comment-actions textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .state-controls textarea,
  .comment-form textarea,
  .comment-actions textarea {
    min-height: 5rem;
    resize: vertical;
  }

  .work-board {
    display: grid;
    gap: var(--space-3);
  }

  .work-board__scroll {
    display: grid;
    grid-template-columns: repeat(8, minmax(15rem, 1fr));
    gap: var(--space-3);
    overflow-x: auto;
    padding: var(--space-1);
    overscroll-behavior-inline: contain;
  }

  .work-column {
    display: grid;
    min-height: 14rem;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
  }

  .work-column__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .work-column__header h2 {
    font-size: 1rem;
  }

  .work-column__count {
    display: inline-grid;
    min-width: 1.75rem;
    min-height: 1.75rem;
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    color: var(--color-ink-muted);
    font-size: var(--font-size-metadata);
    font-weight: 700;
  }

  .work-card-list {
    display: grid;
    gap: var(--space-3);
  }

  .work-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
  }

  .work-card__badges,
  .work-card__footer,
  .work-item-status-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .work-card__kind,
  .work-card__owner,
  .priority-text {
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
  }

  .work-card__title {
    font-size: 1rem;
  }

  .work-card__title a {
    color: var(--color-ink);
    text-decoration: none;
  }

  .work-card__title a:hover {
    color: var(--color-accent-ink);
    text-decoration: underline;
  }

  .work-card__owner {
    overflow-wrap: anywhere;
  }

  .work-card__footer {
    justify-content: space-between;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
  }

  .work-card__move-form {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border-strong);
  }

  .work-card__move-form label {
    color: var(--color-ink-muted);
    font-size: var(--font-size-metadata);
    font-weight: 700;
  }

  .work-card__move-form select {
    min-height: 2.5rem;
    max-width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
  }

  .work-column__empty {
    padding: var(--space-4) var(--space-2);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-control);
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
    text-align: center;
  }

  .work-list .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }

  .work-list table {
    width: 100%;
    min-width: 42rem;
    border-collapse: collapse;
  }

  .work-list th,
  .work-list td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
  }

  .work-list thead th {
    background: var(--color-surface-raised);
    color: var(--color-ink-muted);
    font-size: var(--font-size-metadata);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .work-list tbody tr:last-child th,
  .work-list tbody tr:last-child td {
    border-bottom: 0;
  }

  .work-list tbody th {
    display: grid;
    gap: var(--space-1);
    font-weight: 650;
  }

  .work-board__alternative {
    padding-inline: var(--space-1);
  }

  .work-item-status-line {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }

  .work-item-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem);
    gap: var(--space-5);
    align-items: start;
  }

  .work-item-layout__main,
  .work-item-layout__aside {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
  }

  .work-item-section .card__body {
    display: grid;
    gap: var(--space-4);
  }

  .work-item-description,
  .comment-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .work-item-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .work-item-facts div {
    display: grid;
    gap: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
  }

  .work-item-facts dt {
    color: var(--color-ink-muted);
    font-size: var(--font-size-metadata);
    font-weight: 700;
  }

  .work-item-facts dd {
    overflow-wrap: anywhere;
  }

  .evidence-list,
  .assignment-list,
  .comment-list,
  .activity-list,
  .status-history {
    display: grid;
    gap: var(--space-3);
  }

  .evidence-list__item,
  .assignment-list li,
  .comment-list__item,
  .activity-list__item,
  .status-history li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  .evidence-list__item:last-child,
  .assignment-list li:last-child,
  .comment-list__item:last-child,
  .activity-list__item:last-child,
  .status-history li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .evidence-list__item > div,
  .assignment-list li > div,
  .comment-list__item article {
    min-width: 0;
    flex: 1;
  }

  .evidence-list__item h3 {
    margin-block: var(--space-1);
    font-size: 1rem;
  }

  .evidence-list__item p,
  .comment-list__item p {
    overflow-wrap: anywhere;
  }

  .activity-list__item {
    justify-content: flex-start;
  }

  .activity-list__marker {
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent-ink);
  }

  .status-history li {
    display: grid;
    justify-content: initial;
    gap: var(--space-1);
  }

  .status-history__state {
    font-weight: 700;
  }

  .comment-list__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .comment-actions {
    margin-top: var(--space-3);
  }

  .comment-actions summary {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    color: var(--color-accent-ink);
    cursor: pointer;
    font-size: var(--font-size-small);
    font-weight: 700;
  }

  .comment-actions__body {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-surface-raised);
  }

  .assignment-list li {
    align-items: center;
  }

  .assignment-list li > div {
    display: grid;
    gap: var(--space-1);
  }

  .state-controls,
  .state-controls form + form {
    display: grid;
    gap: var(--space-4);
  }

  @media (max-width: 68rem) {
    .work-item-filters {
      grid-template-columns: repeat(3, minmax(8rem, 1fr));
    }

    .work-item-layout {
      grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    }
  }

  @media (max-width: 48rem) {
    .work-item-filters,
    .work-item-layout,
    .work-item-facts {
      grid-template-columns: 1fr;
    }

    .work-board__scroll {
      grid-template-columns: repeat(8, minmax(14rem, 82vw));
    }

    .work-item-layout__aside {
      order: -1;
    }
  }

  @media (max-width: 34rem) {
    .work-items-toolbar,
    .work-card,
    .work-column,
    .work-item-section .card__body {
      padding: var(--space-3);
    }

    .evidence-list__item,
    .assignment-list li {
      align-items: flex-start;
      flex-direction: column;
    }

    .evidence-list__item .status-badge {
      align-self: flex-start;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .button:hover {
    transform: none;
  }
}

@layer components {
  .signal-page {
    gap: var(--space-5);
  }

  .signal-page__header {
    align-items: flex-end;
  }

  .signal-filters {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
  }

  .signal-filters__header,
  .signal-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .signal-filters__header > div,
  .signal-section-heading > div {
    display: grid;
    gap: var(--space-2);
  }

  .signal-filters__header h2,
  .signal-section-heading h2 {
    font-size: 1.25rem;
  }

  .signal-filters__form {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: end;
  }

  .signal-filter-field {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
  }

  .signal-filter-field label {
    color: var(--color-ink-muted);
    font-size: var(--font-size-label);
    font-weight: 700;
  }

  .signal-filter-field select {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .signal-filters__actions {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-2);
  }

  .signal-list {
    display: grid;
    gap: var(--space-3);
  }

  .signal-list__item {
    min-width: 0;
  }

  .signal-row {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1.6fr) minmax(14rem, .9fr);
    gap: var(--space-4) var(--space-6);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-ink);
    text-decoration: none;
  }

  .signal-row:hover {
    border-color: var(--color-accent);
    color: var(--color-ink);
    text-decoration: none;
  }

  .signal-row:focus-visible {
    border-color: var(--color-focus);
  }

  .signal-row__main,
  .signal-row__facts,
  .signal-row__footer {
    min-width: 0;
  }

  .signal-row__main {
    display: grid;
    align-content: start;
    gap: var(--space-2);
  }

  .signal-row__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .signal-row__title {
    overflow-wrap: anywhere;
    font-size: 1.2rem;
  }

  .signal-row__summary {
    overflow: hidden;
    color: var(--color-ink-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .signal-severity,
  .signal-label {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    padding: .2rem .55rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-label);
    font-weight: 700;
    line-height: 1.2;
  }

  .signal-severity__mark {
    display: inline-grid;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 800;
  }

  .signal-severity--critical {
    color: var(--color-critical);
    background: var(--color-critical-soft);
  }

  .signal-severity--danger {
    color: var(--color-danger);
    background: var(--color-danger-soft);
  }

  .signal-severity--warning {
    color: var(--color-warning);
    background: var(--color-warning-soft);
  }

  .signal-severity--info {
    color: var(--color-info);
    background: var(--color-info-soft);
  }

  .signal-severity--success {
    color: var(--color-success);
    background: var(--color-success-soft);
  }

  .signal-severity--muted,
  .signal-label {
    color: var(--color-ink-muted);
    background: var(--color-muted-soft);
  }

  .signal-row__facts,
  .signal-facts {
    display: grid;
    gap: var(--space-3);
  }

  .signal-row__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }

  .signal-row__facts div:last-child {
    grid-column: 1 / -1;
  }

  .signal-row__facts div,
  .signal-facts div {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: .2rem;
  }

  .signal-row__facts dt,
  .signal-facts dt,
  .signal-sample__attributes dt {
    color: var(--color-ink-muted);
    font-size: var(--font-size-metadata);
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .signal-row__facts dd,
  .signal-facts dd {
    overflow-wrap: anywhere;
    font-size: var(--font-size-small);
    font-weight: 680;
  }

  .signal-row__footer {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: var(--space-2) var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-ink-muted);
    font-size: var(--font-size-metadata);
  }

  .signal-row__open {
    margin-left: auto;
    color: var(--color-accent-ink);
    font-weight: 700;
  }

  .signal-detail__overview {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
    gap: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }

  .signal-detail__overview-main {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    min-width: 0;
  }

  .signal-detail__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .signal-detail__summary {
    max-width: 70ch;
    overflow-wrap: anywhere;
    color: var(--color-ink-muted);
    font-size: 1.0625rem;
  }

  .signal-detail__summary--muted,
  .signal-sample__empty {
    color: var(--color-ink-faint);
    font-style: italic;
  }

  .signal-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }

  .signal-detail__section {
    display: grid;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
  }

  .signal-samples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .signal-sample {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
  }

  .signal-sample__header {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .signal-sample__header h3 {
    overflow-wrap: anywhere;
  }

  .signal-sample__summary {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .signal-sample__attributes {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }

  .signal-sample__attributes div {
    display: grid;
    grid-template-columns: minmax(5rem, .35fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
  }

  .signal-sample__attributes dd {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .signal-sample__attributes code {
    white-space: pre-wrap;
  }

  .signal-work-items {
    display: grid;
    gap: var(--space-2);
  }

  .signal-work-item {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
  }

  .signal-work-item__main {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
  }

  .signal-work-item__main h3 {
    overflow-wrap: anywhere;
  }

  .signal-detail__empty {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
  }

  .signal-detail__empty p {
    color: var(--color-ink-muted);
  }

  .signal-detail__bounded-note {
    padding-top: var(--space-1);
  }

}

@media (max-width: 68rem) {
  .signal-filters__form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .signal-detail__overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  .signal-page__header,
  .signal-filters__header,
  .signal-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .signal-filters__form,
  .signal-samples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signal-row {
    grid-template-columns: 1fr;
  }

  .signal-row__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signal-row__footer {
    grid-column: auto;
  }
}

@media (max-width: 34rem) {
  .signal-filters__form,
  .signal-row__facts,
  .signal-facts,
  .signal-samples {
    grid-template-columns: 1fr;
  }

  .signal-row__footer {
    display: grid;
  }

  .signal-row__facts div:last-child {
    grid-column: auto;
  }

  .signal-row__open {
    margin-left: 0;
  }

  .signal-sample__attributes div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .signal-work-item {
    align-items: flex-start;
    flex-direction: column;
  }
}