@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.5rem, 1.3rem + .55vw, 1.875rem);
  }

  h3 {
    font-size: 1.1875rem;
  }

  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: .01em;
  }

  .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);
  }

  .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: var(--radius-object);
    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: var(--radius-control);
  }

  .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;
    cursor: pointer;
    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-primary);
    color: var(--color-on-primary);
  }

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

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

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

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

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

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

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

  .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;
    border-color: var(--color-border);
    background: var(--color-surface-subtle);
    color: var(--color-ink-muted);
    opacity: 1;
    transform: none;
  }

  .app-shell {
    min-height: 100vh;
    background: var(--color-canvas);
  }

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

  .app-shell__chrome {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-canvas);
  }

  .app-shell__topbar {
    display: flex;
    width: min(100%, var(--content-width));
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-inline: auto;
    padding: var(--space-2) clamp(var(--space-4), 4vw, var(--space-7));
  }

  .app-shell__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
  }

  .app-shell__brand {
    flex: 0 0 auto;
  }

  .app-shell__brand .brand-lockup {
    gap: var(--space-2);
  }

  .app-shell__brand .brand-wordmark {
    font-size: var(--font-size-small);
  }

  .app-shell__identity-divider {
    width: 1px;
    height: 1.75rem;
    flex: 0 0 1px;
    background: var(--color-border);
  }

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

  .app-shell__header-separator {
    color: var(--color-ink-faint);
    font-size: 1.1rem;
  }

  .context-switcher {
    position: relative;
    min-width: 0;
  }

  .context-switcher__summary {
    display: flex;
    min-height: 2.5rem;
    max-width: min(22rem, 32vw);
    align-items: center;
    gap: var(--space-2);
    padding: .35rem .55rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    color: var(--color-ink);
    cursor: pointer;
    font-size: var(--font-size-small);
    font-weight: 640;
    list-style: none;
  }

  .context-switcher__summary::-webkit-details-marker {
    display: none;
  }

  .context-switcher__summary:hover,
  .context-switcher[open] > .context-switcher__summary {
    border-color: var(--color-border);
    background: var(--color-surface);
  }

  .context-switcher__summary:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }

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

  .context-switcher--workspace .context-switcher__name {
    color: var(--color-ink);
    font-weight: 720;
  }

  .context-switcher--project .context-switcher__summary {
    color: var(--color-ink-muted);
  }

  .disclosure-chevron {
    display: block;
    width: 1rem;
    height: .625rem;
    flex: 0 0 1rem;
    align-self: center;
    color: var(--color-ink-faint);
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform .14s ease-out;
  }

  .context-switcher[open] > summary .disclosure-chevron,
  .user-menu[open] > summary .disclosure-chevron,
  .primary-navigation-shell[open] > summary .disclosure-chevron {
    transform: rotate(180deg);
  }

  .context-switcher__menu {
    position: absolute;
    z-index: 1;
    top: calc(100% + .35rem);
    left: 0;
    width: min(22rem, calc(100vw - 2rem));
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-floating);
  }

  .context-switcher__menu-heading {
    padding: var(--space-3) var(--space-3) var(--space-1);
    color: var(--color-ink-muted);
    font-size: var(--font-size-label);
    font-weight: 700;
  }

  .context-switcher__list {
    display: grid;
    max-height: min(22rem, 60vh);
    overflow-y: auto;
    padding: var(--space-2);
  }

  .context-switcher__item {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: .55rem .7rem;
    border-radius: var(--radius-control);
    color: var(--color-ink);
    font-size: var(--font-size-small);
    font-weight: 650;
    text-decoration: none;
  }

  .context-switcher__item:hover,
  .context-switcher__item.is-current {
    background: var(--color-surface-raised);
  }

  .context-switcher__item span:first-child {
    overflow-wrap: anywhere;
  }

  .context-switcher__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
  }

  .context-switcher__actions a {
    color: var(--color-link);
    font-size: var(--font-size-label);
    font-weight: 700;
    text-decoration: none;
  }

  .context-switcher__actions a:hover {
    text-decoration: underline;
    text-underline-offset: .18em;
  }

  .context-switcher__check {
    color: var(--color-success);
    font-weight: 800;
  }

  .user-menu {
    position: relative;
    flex: 0 0 auto;
  }

  .user-menu__summary {
    display: flex;
    min-height: 2.75rem;
    max-width: 15rem;
    align-items: center;
    gap: var(--space-2);
    padding: .3rem .55rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    cursor: pointer;
    list-style: none;
  }

  .user-menu__summary::-webkit-details-marker {
    display: none;
  }

  .user-menu__summary:hover,
  .user-menu[open] > .user-menu__summary {
    border-color: var(--color-border);
    background: var(--color-surface);
  }

  .user-menu__summary:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }

  .user-menu__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-label);
    font-weight: 800;
  }

  .user-menu__name {
    min-width: 0;
    overflow: hidden;
    color: var(--color-ink);
    font-size: var(--font-size-small);
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-menu__menu {
    position: absolute;
    z-index: 1;
    top: calc(100% + .35rem);
    right: 0;
    width: min(18rem, calc(100vw - 2rem));
    overflow: hidden;
    padding: var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-floating);
  }

  [data-disclosure-menu-panel] {
    opacity: 1;
    transform: translateY(0);
    transform-origin: top;
    transition: opacity .14s ease-out, transform .14s ease-out;
  }

  [data-disclosure-menu-panel].is-opening,
  [data-disclosure-menu-panel].is-closing {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-.25rem);
  }

  .user-menu__identity {
    display: grid;
    gap: .1rem;
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  .user-menu__identity strong {
    overflow-wrap: anywhere;
  }

  .user-menu__identity span {
    color: var(--color-ink-muted);
    font-size: var(--font-size-label);
  }

  .user-menu__item {
    display: flex;
    width: 100%;
    min-height: 2.5rem;
    align-items: center;
    margin-top: var(--space-1);
    padding: .5rem var(--space-3);
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: 650;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .user-menu__item:hover,
  .user-menu__item:focus-visible {
    background: var(--color-surface-raised);
    color: var(--color-ink);
    text-decoration: none;
  }

  .user-menu__form {
    margin: 0;
  }

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

  .app-shell__navigation {
    width: min(100%, var(--content-width));
    min-width: 0;
    margin-inline: auto;
    padding-inline: clamp(var(--space-4), 4vw, var(--space-7));
    border-top: 1px solid var(--color-border);
  }

  .primary-navigation-shell:not([open]) > .primary-navigation {
    display: block;
  }

  .primary-navigation-shell__summary {
    display: none;
    list-style: none;
  }

  .primary-navigation-shell__summary::-webkit-details-marker {
    display: none;
  }

  .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: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: clamp(var(--space-4), 2vw, 1.75rem);
  }

  .primary-navigation__link {
    display: flex;
    min-height: 3.25rem;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    padding: .15rem 0;
    border-bottom: 2px solid transparent;
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
    font-weight: 650;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
  }

  .section-navigation {
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
  }

  .section-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }

  .page > .section-navigation,
  .resource-page > .section-navigation {
    margin-bottom: 0;
  }

  .section-navigation a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding-block: var(--space-2);
    border-bottom: 2px solid transparent;
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
    text-decoration: none;
  }

  .section-navigation a[aria-current="page"] {
    border-color: var(--color-primary);
    color: var(--color-ink);
    font-weight: 700;
  }

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

  a.primary-navigation__link:hover {
    color: var(--color-ink);
  }

  .primary-navigation__link.is-current {
    border-bottom-color: var(--color-primary);
    color: var(--color-ink);
  }

  .primary-navigation__link[aria-current="page"] {
    font-weight: 720;
  }

  .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-wrap: anywhere;
  }

  .primary-navigation__description,
  .primary-navigation-shell__hint {
    display: none;
  }

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

  .page {
    display: grid;
    gap: clamp(var(--space-6), 3vw, 2.5rem);
    min-width: 0;
  }

  .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-3);
  }

  .page__title {
    overflow-wrap: anywhere;
  }

  .page__intro {
    max-width: 62ch;
    color: var(--color-ink-muted);
    font-size: 1.125rem;
    line-height: 1.55;
  }

  .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-block: var(--space-6);
    border-width: 1px 0;
    border-block: 1px solid var(--color-border);
  }

  .empty-state {
    flex-direction: column;
    align-items: flex-start;
    max-width: 54rem;
  }

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

  .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: flex-start;
    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);
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    border-color: var(--color-primary);
  }

  .field input:disabled,
  .field select:disabled,
  .field textarea:disabled {
    cursor: not-allowed;
    background: var(--color-surface-subtle);
    color: var(--color-ink-muted);
  }

  .identity-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: var(--color-canvas);
  }

  .identity-shell__header {
    display: flex;
    width: min(100%, 36rem);
    min-height: 5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-inline: auto;
    padding: var(--space-5) var(--space-4) var(--space-4);
  }

  .identity-shell__home-link {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: var(--color-link);
    font-size: var(--font-size-small);
    font-weight: 650;
  }

  .identity-shell__content {
    display: flex;
    width: min(100%, 36rem);
    min-width: 0;
    flex: 1;
    align-items: flex-start;
    justify-content: center;
    margin-inline: auto;
    padding: var(--space-4) var(--space-4) var(--space-8);
    background: var(--color-canvas);
  }

  .identity-page {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: var(--space-4);
    padding: clamp(var(--space-5), 5vw, var(--space-6));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }

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

  .identity-page__header h1,
  .identity-state h1 {
    max-width: 24ch;
    font-size: clamp(1.8rem, 1.6rem + .7vw, 2.2rem);
    letter-spacing: -.035em;
  }

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

  .identity-form {
    width: 100%;
  }

  .identity-form.form {
    gap: var(--space-3);
  }

  .identity-form .field {
    min-width: 0;
    gap: var(--space-1);
  }

  .identity-form input,
  .identity-form select,
  .identity-form textarea,
  .identity-form .button--primary {
    width: 100%;
    min-height: 3rem;
  }

  .identity-shell :focus-visible {
    box-shadow: 0 0 0 3px var(--color-focus);
  }

  .identity-form__assist {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 2.75rem;
    font-size: var(--font-size-small);
    font-weight: 650;
  }

  .identity-page__switch a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

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

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

  .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-ink);
  }

  .identity-state {
    display: grid;
    gap: var(--space-4);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .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;
  }

  a.resource-list__title,
  .resource-list__title a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: .06em;
    text-underline-offset: .16em;
  }

  .resource-page__header:has(+ .resource-list) {
    border-bottom: 0;
    padding-bottom: 0;
  }

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

  .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);
  }

}

@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: 60rem) {
  .app-shell__navigation {
    padding-block: var(--space-2);
  }

  .primary-navigation-shell__summary {
    display: grid;
    min-height: 3.25rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: .55rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-ink);
    cursor: pointer;
  }

  .primary-navigation-shell__summary:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }

  .primary-navigation-shell__context {
    display: none;
  }

  .primary-navigation-shell__current {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .primary-navigation-shell__hint {
    display: block;
    grid-column: 1;
    grid-row: 2;
    color: var(--color-ink-muted);
    font-size: var(--font-size-metadata);
    line-height: 1.35;
  }

  .primary-navigation-shell__summary .disclosure-chevron {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    transition: none;
  }

  .primary-navigation-shell:not([open]) > .primary-navigation {
    display: none;
  }

  .primary-navigation-shell[open] > .primary-navigation {
    padding-top: var(--space-2);
    max-height: calc(100dvh - 11rem);
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .primary-navigation__list {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .primary-navigation__link {
    display: grid;
    min-height: 3.5rem;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .15rem var(--space-2);
    align-content: center;
    padding: .55rem .75rem;
    border: 0;
    border-radius: var(--radius-control);
  }

  .primary-navigation__text {
    grid-column: 1;
    font-size: .95rem;
    font-weight: 720;
  }

  .primary-navigation__description {
    display: block;
    grid-column: 1;
    color: var(--color-ink-muted);
    font-size: var(--font-size-metadata);
    font-weight: 500;
    line-height: 1.35;
  }

  .primary-navigation__link.is-current {
    background: var(--color-primary-soft);
    color: var(--color-link);
  }

  .primary-navigation__link.is-current .primary-navigation__description {
    color: currentColor;
    opacity: .82;
  }

  .primary-navigation__badge {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

}

@media (max-width: 48rem) {
  .identity-shell__content {
    padding-top: var(--space-3);
  }

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

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

  .page__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .page__actions {
    justify-content: flex-start;
  }

  .app-shell__topbar,
  .app-shell__navigation {
    padding-inline: var(--space-4);
  }

  .app-shell__brand .brand-wordmark,
  .user-menu__name,
  .user-menu > summary .disclosure-chevron {
    display: none;
  }

  .app-shell__identity:has(.app-shell__header-context) .app-shell__brand,
  .app-shell__identity:has(.app-shell__header-context) .app-shell__identity-divider {
    display: none;
  }

  .app-shell__identity {
    gap: var(--space-2);
  }

  .app-shell__identity-divider {
    height: 1.5rem;
  }

  .context-switcher {
    max-width: min(13rem, 40vw);
  }

  .context-switcher__summary {
    max-width: 100%;
  }

  .context-switcher--project .context-switcher__menu {
    right: 0;
    left: auto;
  }
}

@media (max-width: 34rem) {
  .identity-shell__header {
    min-height: 4rem;
    padding-top: var(--space-3);
  }

  .identity-shell__home-link {
    font-size: var(--font-size-label);
  }

  .identity-shell__content {
    padding-inline: var(--space-4);
  }

  .identity-page {
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .identity-page__header {
    gap: var(--space-2);
  }

  .identity-form.form {
    gap: var(--space-2);
  }

  .identity-form input,
  .identity-form select,
  .identity-form textarea,
  .identity-form .button--primary {
    min-height: 2.75rem;
  }

  .field__hint {
    font-size: var(--font-size-metadata);
    line-height: 1.4;
  }

  .app-shell__topbar {
    min-height: 3.75rem;
    gap: var(--space-2);
  }

  .app-shell__identity,
  .app-shell__header-context {
    flex: 1 1 auto;
  }

  .app-shell__navigation {
    padding-inline: var(--space-3);
  }

  .context-switcher {
    max-width: none;
    flex: 1 1 0;
  }

  .context-switcher--workspace {
    flex-grow: .75;
  }

  .context-switcher--project {
    flex-grow: 1.25;
  }

  .context-switcher__summary {
    min-height: 2.35rem;
    padding-inline: .45rem;
  }

  .context-switcher__menu {
    position: fixed;
    top: 4rem;
    right: var(--space-3);
    left: var(--space-3);
    width: auto;
  }

}

@media (max-width: 18rem) {
  html {
    min-width: 0;
  }

  .primary-navigation__text,
  .user-menu__name {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .app-shell__header-context {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

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

  .context-switcher,
  .context-switcher__summary,
  .context-switcher__name {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .context-switcher__summary {
    justify-content: space-between;
  }

  .context-switcher__name {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
}

@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-2);
    padding-block: var(--space-3);
    border-block: 1px solid var(--color-border-strong);
  }

  .work-items-toolbar__topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
  }

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

  .work-items-toolbar__heading strong {
    font-size: 1rem;
  }

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

  .filter-disclosure {
    min-width: 0;
  }

  .filter-disclosure > summary {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    color: var(--color-ink);
    font-weight: 700;
    list-style: none;
  }

  .filter-disclosure > summary::-webkit-details-marker {
    display: none;
  }

  .filter-disclosure > summary::after {
    content: "+";
    order: 3;
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 1rem;
  }

  .filter-disclosure[open] > summary::after {
    content: "−";
  }

  .filter-disclosure > summary:focus-visible {
    border-radius: var(--radius-control);
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  .work-item-filter-disclosure {
    border-top: 1px solid var(--color-border);
  }

  .work-item-filter-disclosure[open] > summary {
    border-bottom: 1px solid var(--color-border);
  }

  .work-item-filter-disclosure .work-item-filters {
    padding-top: var(--space-4);
  }

  .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: var(--radius-pill);
    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 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    border-block: 1px solid var(--color-border-strong);
  }

  .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 {
    margin-top: calc(-1 * var(--space-3));
  }

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

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

  .work-item-layout__aside {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-strong);
  }

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

  .work-item-section--plain {
    padding-block: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
  }

  .work-item-section--plain .card__header,
  .work-item-section--plain .card__body {
    padding-inline: 0;
  }

  .work-item-section--plain .card__header {
    padding-top: 0;
    border-bottom: 0;
  }

  .work-item-section--plain .card__body {
    padding-bottom: 0;
  }

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

  .work-item-facts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-object);
    background: var(--color-border);
  }

  .work-item-facts div {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-raised);
  }

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

  .work-item-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-ink);
    font-weight: 650;
    line-height: 1.35;
  }

  .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-facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-item-facts > div:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
  }

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

    .work-item-facts > div,
    .work-item-facts > div:last-child:nth-child(odd) {
      grid-column: auto;
    }

    .work-item-facts > div {
      grid-template-columns: minmax(6rem, .4fr) minmax(0, 1fr);
      align-items: baseline;
      gap: var(--space-3);
    }

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

    .work-list .table-wrap {
      overflow: visible;
    }

    .work-list table,
    .work-list tbody {
      display: block;
      min-width: 0;
    }

    .work-list thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .work-list tbody tr {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-4);
      padding: var(--space-4);
      border-bottom: 1px solid var(--color-border);
    }

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

    .work-list tbody th,
    .work-list tbody td {
      min-width: 0;
      padding: 0;
      border: 0;
    }

    .work-list tbody th {
      grid-column: 1 / -1;
    }

    .work-list tbody td {
      display: grid;
      align-content: start;
      gap: var(--space-1);
      overflow-wrap: anywhere;
    }

    .work-list tbody td::before {
      content: attr(data-label);
      color: var(--color-ink-muted);
      font-size: var(--font-size-metadata);
      font-weight: 700;
    }

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

  @media (max-width: 34rem) {
    .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;
  }
}

@media (prefers-contrast: more) {
  .button,
  .field input,
  .field select,
  .field textarea {
    border-width: 2px;
  }

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

  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    box-shadow: none;
  }
}

@media (forced-colors: active) {
  .button,
  .field input,
  .field select,
  .field textarea {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }

  .button--primary {
    background: ButtonText;
    color: ButtonFace;
  }

  .button--secondary {
    background: ButtonFace;
    color: ButtonText;
  }

  :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
    box-shadow: none;
  }
}

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

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

  .signal-filters {
    display: grid;
    gap: 0;
    padding: 0;
    border-block: 1px solid var(--color-border-strong);
  }

  .signal-filters > summary {
    padding: var(--space-2) 0;
  }

  .signal-filters[open] > summary {
    border-bottom: 1px solid var(--color-border);
  }

  .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;
    padding: var(--space-4) 0;
  }

  .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: 0;
    border-top: 1px solid var(--color-border-strong);
  }

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

  .signal-row {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-ink);
    text-decoration: none;
  }

  .signal-row:hover {
    background: var(--color-surface-raised);
    color: var(--color-ink);
    text-decoration: none;
  }

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

  .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;
    color: var(--color-link);
    font-size: 1.05rem;
    text-decoration: underline;
    text-decoration-thickness: .07em;
    text-underline-offset: .16em;
  }

  .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.5rem;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    padding: 0;
    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);
  }

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

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

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

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

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

  .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-1);
    color: var(--color-ink-muted);
    font-size: var(--font-size-metadata);
  }

  .signal-row__evidence {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
  }

  .signal-row__evidence strong {
    color: var(--color-ink);
  }

  .signal-empty-result {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--color-border);
  }

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

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

  .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);
  }

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

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

  .signal-decision__heading > div {
    display: grid;
    gap: var(--space-2);
    max-width: 62ch;
  }

  .signal-decision__heading p,
  .signal-decision__body > p {
    color: var(--color-ink-muted);
  }

  .signal-decision__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--color-border);
  }

  .signal-decision__options details {
    min-width: 0;
    padding-top: var(--space-3);
  }

  .signal-decision__options details + details {
    padding-left: var(--space-5);
    border-left: 1px solid var(--color-border);
  }

  .signal-decision__options summary {
    width: fit-content;
    min-height: 2.75rem;
    align-content: center;
    color: var(--color-link);
    font-weight: 700;
    cursor: pointer;
  }

  .signal-decision__body,
  .signal-link-form,
  .signal-state-actions,
  .signal-suppression-form {
    display: grid;
    gap: var(--space-3);
  }

  .signal-link-form {
    grid-template-columns: minmax(0, 1.5fr) minmax(9rem, .75fr) auto;
    align-items: end;
  }

  .signal-link-form .button,
  .signal-suppression-form .button {
    align-self: end;
  }

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

  .signal-suppression-form {
    grid-template-columns: minmax(13rem, 1fr) auto;
    align-items: end;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }

  .work-item-form-page {
    max-width: 62rem;
  }

  .work-item-form-page,
  .work-item-form {
    gap: var(--space-5);
  }

  .work-item-form {
    width: 100%;
  }

  .work-item-form-source {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-3) 0;
    border-block: 1px solid var(--color-border);
  }

  .work-item-form-source > div:first-child {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
  }

  .work-item-form-source h2,
  .work-item-form-source p {
    overflow-wrap: anywhere;
  }

  .work-item-form-source h2 {
    font-size: 1rem;
    line-height: 1.45;
  }

  .work-item-form-source p {
    max-width: 65ch;
    color: var(--color-ink-muted);
    font-size: var(--font-size-small);
  }

  .work-item-form-source__state {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

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

  .work-item-form textarea {
    min-height: 6.5rem;
  }

  .work-item-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  .inbox-page {
    width: min(100%, 58rem);
  }

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

  .notification-list__item {
    padding: var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .notification-list__item--unread {
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  }

  .notification-list__item article,
  .notification-list__header > div {
    display: grid;
    gap: var(--space-2);
  }

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

  .notification-list__header h2 {
    font-size: var(--font-size-heading-3);
    overflow-wrap: anywhere;
  }

  .notification-list__priority {
    color: var(--color-ink-muted);
    font-size: var(--font-size-metadata);
  }

  .notification-list__unread {
    width: fit-content;
    color: var(--color-info);
    font-size: var(--font-size-metadata);
    font-weight: 750;
  }

  .notification-list__priority--high,
  .notification-list__priority--critical {
    color: var(--color-danger);
    font-weight: 700;
  }

  .notification-list__actions {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

}

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

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

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

  .signal-decision__options,
  .signal-link-form {
    grid-template-columns: 1fr;
  }

  .signal-decision__options details + details {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 48rem) {
  .signal-page__header,
  .signal-filters__header,
  .signal-section-heading,
  .signal-decision__heading,
  .work-item-form-source {
    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;
  }

  .work-item-form__grid,
  .signal-suppression-form {
    grid-template-columns: 1fr;
  }

  .notification-list__header {
    flex-direction: column;
    gap: var(--space-2);
  }
}

@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-sample__attributes div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

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

@media (min-width: 60.001rem) {
  .app-shell__topbar {
    width: 100%;
    padding-inline: 2rem;
  }

  .app-shell__body {
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr);
    max-width: 112rem;
    margin-inline: auto;
    min-height: calc(100dvh - 4.5rem);
  }

  .app-shell__navigation {
    position: sticky;
    top: 4.5rem;
    align-self: start;
    width: 100%;
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    padding: 1.75rem 1rem;
    border-top: 0;
  }

  .app-shell__content {
    min-width: 0;
    width: 100%;
    padding: 2rem clamp(1.5rem, 3vw, 3rem) 4rem;
    border-left: 1px solid var(--color-border);
  }

  .primary-navigation__list {
    display: grid;
    gap: .25rem;
  }

  .primary-navigation__link {
    min-height: 2.75rem;
    padding: .65rem .85rem;
    border: 0;
    border-radius: var(--radius-control);
  }

  .primary-navigation__link.is-current {
    background: var(--color-surface-raised);
    color: var(--color-ink);
  }

  .primary-navigation__link:hover {
    background: var(--color-surface-raised);
  }
}