@layer organisms {
  body:has(.cases-sheet[open]),
  body:has(.cases-queue[open]) {
    overflow: hidden;
  }

  .cases-page {
    --cases-accent-ink: color-mix(in srgb, var(--color-brand-primary-dark) 68%, var(--color-text) 32%);
    --cases-accent-border: color-mix(in srgb, var(--cases-accent-ink) 24%, var(--color-surface));
    --cases-accent-surface: color-mix(in srgb, var(--color-surface) 88%, var(--color-brand-primary) 12%);
    --cases-accent-surface-strong: color-mix(in srgb, var(--color-surface) 82%, var(--color-brand-primary) 18%);
    --cases-focus-color: color-mix(in srgb, var(--color-warning) 76%, var(--color-text) 24%);
    --cases-surface-frost-98: color-mix(in srgb, var(--color-surface) 98%, transparent);
    --cases-surface-frost-96: color-mix(in srgb, var(--color-surface) 96%, transparent);
    --cases-surface-frost-94: color-mix(in srgb, var(--color-surface) 94%, transparent);
    --cases-surface-frost-92: color-mix(in srgb, var(--color-surface) 92%, transparent);
    --cases-surface-frost-90: color-mix(in srgb, var(--color-surface) 90%, transparent);
    --cases-surface-frost-88: color-mix(in srgb, var(--color-surface) 88%, transparent);
    --cases-surface-frost-86: color-mix(in srgb, var(--color-surface) 86%, transparent);
    --cases-surface-frost-82: color-mix(in srgb, var(--color-surface) 82%, transparent);
    --cases-surface-frost-72: color-mix(in srgb, var(--color-surface) 72%, transparent);
    --cases-surface-panel-muted: color-mix(in srgb, var(--color-surface) 96%, var(--color-surface-muted) 4%);
    --cases-surface-panel-soft: color-mix(in srgb, var(--color-surface) 92%, var(--color-surface-muted) 8%);
    --cases-border-brand-soft: color-mix(in srgb, var(--color-brand-primary) 18%, transparent);
    --cases-border-brand-muted: color-mix(in srgb, var(--color-brand-primary) 16%, transparent);
    --cases-border-text-soft: color-mix(in srgb, var(--color-text) 8%, transparent);
    --cases-border-text-muted: color-mix(in srgb, var(--color-text) 10%, transparent);
    --cases-border-text-strong: color-mix(in srgb, var(--color-text) 14%, transparent);
    --cases-border-accent-soft: color-mix(in srgb, var(--cases-accent-ink) 14%, transparent);
    --cases-shadow-soft: color-mix(in srgb, var(--color-text) 8%, transparent);
    --cases-shadow-medium: color-mix(in srgb, var(--color-text) 12%, transparent);
    --cases-overlay-soft: color-mix(in srgb, var(--color-overlay) 48%, transparent);
    --cases-overlay-strong: color-mix(in srgb, var(--color-overlay) 72%, transparent);
    --cases-focus-ring: color-mix(in srgb, var(--cases-focus-color) 20%, transparent);
    --cases-status-info-bg: color-mix(in srgb, var(--color-info) 12%, transparent);
    --cases-status-info-fg: color-mix(in srgb, var(--color-info) 72%, var(--color-text) 28%);
    --cases-status-warning-bg: color-mix(in srgb, var(--color-warning) 14%, transparent);
    --cases-status-warning-fg: color-mix(in srgb, var(--color-warning) 76%, var(--color-text) 24%);
    --cases-status-error-bg: color-mix(in srgb, var(--color-error) 12%, transparent);
    --cases-status-error-fg: color-mix(in srgb, var(--color-error) 82%, var(--color-text) 18%);
    --cases-status-success-bg: color-mix(in srgb, var(--color-success) 12%, transparent);
    --cases-status-success-fg: color-mix(in srgb, var(--color-success) 82%, var(--color-text) 18%);
    --cases-status-error-contrast-bg: color-mix(in srgb, var(--color-error) 70%, var(--color-text) 30%);
    --cases-status-warning-contrast-bg: color-mix(in srgb, var(--color-warning) 78%, var(--color-text) 22%);
    --cases-json-surface: color-mix(in srgb, var(--color-text) 72%, var(--color-overlay) 28%);
    --cases-json-ink: color-mix(in srgb, var(--color-brand-primary-soft) 72%, var(--color-surface) 28%);
    --cases-action-danger-fg: color-mix(in srgb, var(--color-error) 78%, var(--color-text) 22%);
    --cases-action-danger-hover-bg: color-mix(in srgb, var(--color-error) 8%, transparent);
    --cases-action-danger-hover-fg: color-mix(in srgb, var(--color-error) 88%, var(--color-text) 12%);
    --upload-dialog-focus-color: var(--cases-focus-color);
    background:
      radial-gradient(circle at top left, color-mix(in srgb, var(--color-surface) 28%, transparent), transparent 18rem),
      radial-gradient(circle at bottom right, color-mix(in srgb, var(--color-surface) 18%, transparent), transparent 24rem),
      var(--color-brand-gradient-soft),
      var(--color-surface-muted);
  }

  .cases-shell {
    min-height: calc(100dvh - 4.5rem);
  }

  .cases-header-actions {
    justify-content: flex-end;
  }

  .cases-app {
    width: min(100% - 2rem, 95rem);
    margin: 0 auto;
    padding: clamp(var(--space-4), 2vw, var(--space-7));
  }

  .cases-workspace {
    display: grid;
    gap: clamp(var(--space-4), 2vw, var(--space-6));
    min-height: calc(100dvh - 6.5rem);
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--color-surface) 38%, transparent), transparent 24rem),
      linear-gradient(180deg, var(--cases-surface-frost-92), color-mix(in srgb, var(--color-surface) 84%, transparent));
  }

  .cases-workspace__header {
    position: sticky;
    top: calc(4rem + var(--space-3));
    z-index: 2;
    display: grid;
    gap: var(--space-4);
    padding-bottom: var(--space-2);
    background:
      linear-gradient(180deg, var(--cases-surface-frost-98), var(--cases-surface-frost-92)),
      var(--color-surface);
  }

  .cases-workspace__intro {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
    align-items: start;
  }

  .cases-workspace__eyebrow,
  .cases-pane__eyebrow {
    margin: 0;
    color: var(--cases-accent-ink);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cases-workspace__intro h1 {
    margin: var(--space-2) 0 var(--space-3);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.02;

    code {
      color: var(--cases-accent-ink);
      font-family: var(--font-mono);
      font-size: 0.8em;
    }
  }

  .cases-workspace__copy {
    max-width: 48rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
  }

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

  .cases-stat {
    display: grid;
    gap: var(--space-1);
    border: var(--border-width) solid var(--cases-border-brand-soft);
    border-radius: 1rem;
    background: var(--cases-surface-frost-88);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);

    span {
      color: var(--color-text-muted);
      font-size: var(--font-size-xs);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    strong {
      font-size: clamp(1.5rem, 2vw, 2rem);
      line-height: 1;
    }
  }

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

  .cases-search {
    width: min(100%, 32rem);
  }

  .cases-search__field {
    display: grid;
    min-height: 3rem;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--cases-surface-frost-92);
    box-shadow: 0 10px 24px var(--cases-shadow-soft);
    color: var(--color-text);
    padding-inline: var(--space-4);

    &:focus-within {
      border-color: var(--cases-focus-color);
      box-shadow:
        0 0 0 3px var(--cases-surface-frost-92),
        0 0 0 6px var(--cases-focus-ring);
    }

    svg {
      width: 1.15rem;
      height: 1.15rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    input {
      min-height: auto;
      border: 0;
      background: transparent;
      box-shadow: none;
      color: var(--color-text);
      padding: 0;

      &::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
      }

      &:focus {
        box-shadow: none;
      }
    }
  }

  .cases-toolbar__actions {
    justify-content: flex-end;
  }

  .cases-filters {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

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

  .cases-toolbar__meta,
  .cases-toolbar__legacy {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .cases-toolbar__legacy {
    color: var(--color-warning);
    font-weight: 600;
  }

  .cases-workspace__body {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
    min-height: 0;
    align-items: stretch;
  }

  :is(.cases-browser, .cases-detail) {
    display: grid;
    gap: var(--space-4);
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    padding: var(--space-5);
  }

  .cases-pane__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);

    h2 {
      margin: var(--space-1) 0 0;
      font-size: clamp(1.25rem, 1.8vw, 1.7rem);
    }
  }

  .cases-pane__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: var(--radius-pill);
    background: var(--cases-accent-surface-strong);
    color: var(--cases-accent-ink);
    font-size: var(--font-size-sm);
    font-weight: 700;
    padding-inline: var(--space-3);
  }

  .cases-pane__scroll {
    min-height: 0;
    overflow: auto;
    padding-right: var(--space-2);
  }

  .cases-queue {
    width: min(100vw, 30rem);
    max-width: 30rem;
    height: 100dvh;
    margin: 0 0 0 auto;
    border: 0;
    background: transparent;
    padding: 0;

    &::backdrop {
      background: var(--cases-overlay-soft);
      backdrop-filter: blur(0.25rem);
    }
  }

  .cases-queue__surface {
    display: grid;
    gap: var(--space-4);
    height: 100%;
    overflow: auto;
    border-left: 1px solid var(--cases-border-text-soft);
    background:
      linear-gradient(180deg, var(--cases-surface-frost-98), var(--cases-surface-panel-muted)),
      var(--color-surface);
    box-shadow: -24px 0 48px var(--cases-shadow-medium);
    padding: clamp(var(--space-4), 2vw, var(--space-5));
  }

  .cases-queue__header,
  .cases-queue__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .cases-queue__headline h2 {
    margin: var(--space-1) 0 var(--space-2);
    font-size: clamp(1.45rem, 2vw, 1.8rem);
  }

  .cases-queue__headline p:last-child,
  .cases-queue__meta p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .cases-queue__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    color: var(--color-text);
    cursor: pointer;

    svg {
      width: 1.2rem;
      height: 1.2rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }

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

  .cases-queue-stat {
    display: grid;
    gap: var(--space-1);
    border: 1px solid var(--cases-border-text-soft);
    border-radius: 1rem;
    background: var(--cases-surface-frost-90);
    padding: var(--space-3);

    span {
      color: var(--color-text-muted);
      font-size: var(--font-size-xs);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    strong {
      font-size: 1.15rem;
    }
  }

  .cases-queue__list {
    display: grid;
    gap: var(--space-3);
    align-content: start;
  }

  .cases-queue-empty {
    border: 1px dashed var(--cases-border-text-strong);
    border-radius: 1rem;
    color: var(--color-text-muted);
    padding: var(--space-4);
  }

  .cases-queue-item {
    display: grid;
    gap: var(--space-3);
    border: 1px solid var(--cases-border-text-soft);
    border-radius: 1.1rem;
    background: var(--cases-surface-frost-94);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
  }

  .cases-queue-item__header,
  .cases-queue-item__meta,
  .cases-queue-item__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .cases-queue-item__header {
    justify-content: space-between;
  }

  .cases-queue-item__title {
    margin: 0;
    font-size: 1rem;
  }

  .cases-queue-item__subtitle,
  .cases-queue-item__time {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .cases-queue-item__children {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-2);
  }

  .cases-queue-item__child {
    border-top: 1px dashed var(--cases-border-text-muted);
    padding-top: var(--space-2);
  }

  .cases-queue-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.35rem 0.7rem;
  }

  .cases-queue-badge--info {
    background: var(--cases-status-info-bg);
    color: var(--cases-status-info-fg);
  }

  .cases-queue-badge--warning {
    background: var(--cases-status-warning-bg);
    color: var(--cases-status-warning-fg);
  }

  .cases-queue-badge--error {
    background: var(--cases-status-error-bg);
    color: var(--cases-status-error-fg);
  }

  .cases-queue-badge--success {
    background: var(--cases-status-success-bg);
    color: var(--cases-status-success-fg);
  }

  .cases-queue-action {
    border: 1px solid var(--cases-border-text-soft);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    padding: 0.45rem 0.8rem;
    text-decoration: none;
  }

  .cases-queue-action[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .cases-loading,
  .cases-empty {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    border: var(--border-width) dashed var(--color-border-strong);
    border-radius: 1rem;
    background: var(--cases-surface-frost-72);
    color: var(--color-text-muted);
    padding: var(--space-5);

    h3,
    p {
      margin: 0;
    }

    code {
      color: var(--cases-accent-ink);
      font-family: var(--font-mono);
    }
  }

  .cases-accordion {
    display: grid;
    gap: var(--space-3);
  }

  .cases-accordion__item {
    overflow: hidden;
    border: var(--border-width) solid var(--cases-border-brand-muted);
    border-radius: 1rem;
    background: var(--color-surface-muted);
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast),
      transform var(--transition-fast);

    &.is-selected {
      border-color: var(--cases-accent-ink);
      box-shadow: var(--shadow-md);
    }
  }

  .cases-accordion__heading {
    margin: 0;
  }

  .cases-accordion__trigger {
    display: grid;
    width: 100%;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border: 0;
    border-radius: 1rem;
    background: transparent;
    color: var(--color-text);
    text-align: left;
    padding: var(--space-4);

    &:focus-visible {
      outline: 2px solid var(--cases-focus-color);
      outline-offset: 3px;
      box-shadow:
        0 0 0 3px var(--cases-surface-frost-92),
        0 0 0 6px var(--cases-focus-ring);
    }
  }

  .cases-accordion__identity,
  .cases-accordion__meta {
    display: grid;
    gap: 0.2rem;
  }

  .cases-accordion__identity {
    strong {
      font-size: var(--font-size-lg);
    }

    span {
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
    }
  }

  .cases-accordion__meta {
    justify-items: end;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
  }

  .cases-accordion__panel {
    display: grid;
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
  }

  .cases-accordion__pills,
  .cases-accordion__tags,
  .cases-detail__hero-pills,
  .cases-detail__action-list,
  .cases-document-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .cases-accordion__timestamp,
  .cases-document-card__date {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .cases-pill,
  .cases-tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding-inline: var(--space-3);
  }

  .cases-pill--success {
    border: var(--border-width) solid var(--color-success-border);
    background: var(--color-success-bg);
    color: var(--cases-status-success-fg);
  }

  .cases-pill--warning {
    border: var(--border-width) solid var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--cases-status-warning-fg);
  }

  .cases-pill--error {
    border: var(--border-width) solid var(--color-error-border);
    background: var(--color-error-bg);
    color: var(--cases-status-error-fg);
  }

  .cases-pill--info {
    border: var(--border-width) solid var(--cases-accent-border);
    background: var(--cases-accent-surface);
    color: var(--cases-accent-ink);
  }

  .cases-pill--neutral,
  .cases-tag {
    border: var(--border-width) solid var(--color-border);
    background: var(--cases-surface-frost-86);
    color: var(--color-text-muted);
  }

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

  .cases-detail__hero {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    border: var(--border-width) solid var(--cases-border-brand-soft);
    border-radius: 1.25rem;
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--color-surface) 34%, transparent), transparent 16rem),
      var(--cases-accent-surface);
    padding: var(--space-5);
  }

  .cases-detail__hero-copy {
    h3 {
      margin: var(--space-2) 0 var(--space-2);
      font-size: clamp(1.5rem, 2vw, 2.2rem);
    }

    p {
      margin: 0;
      color: var(--color-text-muted);
    }
  }

  .cases-detail__hero-actions {
    display: grid;
    justify-items: end;
    gap: var(--space-3);
  }

  .cases-detail__sections,
  .cases-document-grid {
    display: grid;
    gap: var(--space-4);
  }

  .cases-detail__sections {
    align-content: start;
  }

  .cases-rda {
    display: grid;
    gap: var(--space-4);
    border: var(--border-width) solid var(--cases-border-accent-soft);
    border-radius: 1.25rem;
    background:
      linear-gradient(180deg, var(--cases-surface-frost-94), color-mix(in srgb, var(--color-surface) 96%, var(--color-brand-primary-soft) 4%));
    padding: var(--space-5);
  }

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

  .cases-rda-card {
    display: grid;
    gap: var(--space-4);
    border: var(--border-width) solid var(--cases-border-accent-soft);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-surface) 90%, var(--color-brand-primary) 10%);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);

    &.is-active {
      border-color: var(--cases-accent-ink);
      box-shadow:
        0 1rem 2.5rem var(--cases-shadow-medium),
        0 0 0 1px var(--cases-border-accent-soft);
    }
  }

  .cases-rda-card__header,
  .cases-rda-card__pills,
  .cases-rda-card__actions,
  .cases-rda-tags,
  .cases-rda-finding__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .cases-rda-card__header {
    align-items: flex-start;
    justify-content: space-between;

    h3 {
      margin: var(--space-1) 0 0;
      font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    }
  }

  .cases-rda-card__meta,
  .cases-rda-finding__meta {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;

    div {
      display: grid;
      gap: 0.15rem;
      border: var(--border-width) solid var(--cases-border-text-muted);
      border-radius: 0.85rem;
      background: var(--cases-surface-frost-72);
      padding: var(--space-3);
    }

    dt {
      color: var(--color-text-muted);
      font-size: var(--font-size-xs);
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    dd {
      margin: 0;
      font-size: var(--font-size-sm);
      overflow-wrap: anywhere;
    }
  }

  .cases-rda-card__summary,
  .cases-rda-summary,
  .cases-rda-findings {
    display: grid;
    gap: var(--space-3);
  }

  .cases-rda-summary {
    p {
      margin: 0;
    }
  }

  .cases-rda-finding,
  .cases-rda-findings__empty {
    display: grid;
    gap: var(--space-3);
    border-radius: 1rem;
    background: rgb(255 255 255 / 0.82);
    padding: var(--space-4);
  }

  .cases-rda-finding {
    border: var(--border-width) solid rgb(29 111 111 / 0.14);

    &--error {
      border-color: rgb(153 27 27 / 0.24);
      background: rgb(253 240 240 / 0.95);
    }

    &--warning {
      border-color: rgb(146 64 14 / 0.18);
      background: rgb(255 245 222 / 0.82);
    }

    p {
      margin: 0;
    }
  }

  .cases-rda-code {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding-inline: var(--space-3);
  }

  .cases-rda-code--error {
    background: var(--cases-status-error-contrast-bg);
    color: var(--cidti-white);
  }

  .cases-rda-code--warning {
    background: var(--cases-status-warning-contrast-bg);
    color: var(--cidti-white);
  }

  .cases-rda-card__json {
    border: var(--border-width) solid color-mix(in srgb, var(--cases-accent-ink) 12%, transparent);
    border-radius: 0.95rem;
    background: var(--cases-json-surface);
    color: var(--cases-json-ink);
    padding: var(--space-3) var(--space-4);

    summary {
      cursor: pointer;
      font-weight: 700;
    }

    pre {
      margin: var(--space-3) 0 0;
      overflow: auto;
      white-space: pre-wrap;
      word-break: break-word;
    }
  }

  .cases-document-viewer__analysis {
    display: grid;
    gap: var(--space-4);
    line-height: 1.65;

    :is(h2, h3, h4) {
      margin: 0;
      color: var(--cases-accent-ink);
    }

    :is(p, ul, ol) {
      margin: 0;
    }
  }

  .cases-document-group {
    display: grid;
    gap: var(--space-3);
  }

  .cases-document-group__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);

    h4 {
      margin: var(--space-1) 0 0;
      font-size: var(--font-size-xl);
    }
  }

  .cases-document-card {
    display: grid;
    gap: var(--space-3);
    border: var(--border-width) solid rgb(51 204 204 / 0.12);
    border-radius: 1rem;
    background: var(--color-surface-muted);
    color: var(--color-text);
    padding: var(--space-4);
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);

    &.is-selected {
      border-color: var(--cases-accent-ink);
      background: color-mix(in srgb, var(--color-surface) 72%, var(--color-brand-primary) 28%);
      box-shadow: var(--shadow-md);
    }
  }

  .cases-document-card__select {
    display: grid;
    gap: var(--space-3);
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    text-align: left;
    transition: transform var(--transition-fast);

    &:is(:hover, :focus-visible) {
      transform: translateY(-1px);
    }

    &:focus-visible {
      outline: 2px solid var(--cases-focus-color);
      outline-offset: 3px;
      box-shadow:
        0 0 0 3px var(--cases-surface-frost-92),
        0 0 0 6px var(--cases-focus-ring);
    }
  }

  .cases-document-card:has(.cases-document-card__select:is(:hover, :focus-visible)) {
    border-color: var(--cases-accent-ink);
    box-shadow: var(--shadow-md);
  }

  .cases-document-card__footer {
    display: flex;
    justify-content: flex-end;
  }

  .cases-sheet {
    width: min(84vw, 104rem);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-text);
    padding: 0;

    &::backdrop {
      background:
        linear-gradient(180deg, rgb(11 18 24 / 0.16), rgb(11 18 24 / 0.34)),
        radial-gradient(circle at right, rgb(255 255 255 / 0.14), transparent 26rem),
        var(--color-overlay);
      backdrop-filter: blur(8px);
    }
  }

  .cases-sheet__surface {
    display: grid;
    gap: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.38);
    border-radius: 1.6rem 0 0 1.6rem;
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(246 251 252 / 0.97)),
      radial-gradient(circle at top right, rgb(255 255 255 / 0.26), transparent 18rem),
      var(--color-surface);
    box-shadow:
      -2rem 0 4rem rgb(15 23 42 / 0.12),
      -0.6rem 0 2rem rgb(15 23 42 / 0.1),
      0 0 0 1px rgb(29 111 111 / 0.08);
  }

  .cases-sheet__header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 1px solid rgb(29 111 111 / 0.12);
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(250 252 253 / 0.95)),
      var(--color-surface);
    padding: clamp(var(--space-4), 2vw, var(--space-6));
  }

  .cases-sheet__headline {
    display: grid;
    gap: var(--space-2);

    h2,
    p {
      margin: 0;
    }

    h2 {
      font-size: clamp(1.5rem, 2vw, 2rem);
      line-height: 1.05;
    }

    p:last-child {
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
    }
  }

  .cases-sheet__close {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.85rem;
    min-height: 2.85rem;
    border: 1px solid rgb(29 111 111 / 0.12);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.94);
    color: var(--color-text);
    transition:
      transform var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);

    &:is(:hover, :focus-visible) {
      border-color: var(--cases-accent-ink);
      box-shadow: var(--shadow-sm);
      transform: translateY(-1px);
    }

    svg {
      width: 1rem;
      height: 1rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }

  .cases-sheet__layout {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  }

  .cases-sheet__rail,
  .cases-sheet__content {
    min-height: 0;
    overflow: auto;
  }

  .cases-sheet__rail {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    border-right: 1px solid rgb(29 111 111 / 0.1);
    background:
      linear-gradient(180deg, rgb(248 252 252 / 0.98), rgb(242 248 249 / 0.96)),
      var(--color-surface-muted);
    padding: clamp(var(--space-4), 2vw, var(--space-5));
  }

  .cases-sheet__rail-section,
  .cases-sheet__rail-list {
    display: grid;
    gap: var(--space-2);
  }

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

  .cases-sheet__rail-eyebrow {
    margin: 0;
    color: var(--cases-accent-ink);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cases-sheet__nav-item {
    display: grid;
    gap: var(--space-3);
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    border: 1px solid transparent;
    border-radius: 1rem;
    background: rgb(255 255 255 / 0.66);
    color: var(--color-text);
    text-align: left;
    padding: var(--space-3);
    transition:
      transform var(--transition-fast),
      border-color var(--transition-fast),
      background var(--transition-fast),
      box-shadow var(--transition-fast);

    &:is(:hover, :focus-visible) {
      border-color: var(--cases-border-brand-soft);
      background: var(--cases-surface-frost-92);
      box-shadow: var(--shadow-sm);
      transform: translateY(-1px);
    }

    &:focus-visible {
      outline: 2px solid var(--cases-focus-color);
      outline-offset: 3px;
      box-shadow:
        0 0 0 3px var(--cases-surface-frost-92),
        0 0 0 6px var(--cases-focus-ring);
    }

    &.is-active {
      border-color: var(--cases-accent-ink);
      background: color-mix(in srgb, var(--color-surface) 74%, var(--color-brand-primary) 26%);
      box-shadow:
        inset 0 0 0 1px var(--cases-border-text-soft),
        0 1rem 2rem var(--cases-shadow-soft);
    }
  }

  .cases-sheet__nav-copy {
    display: grid;
    gap: 0.2rem;

    strong {
      font-size: var(--font-size-sm);
    }

    span {
      color: var(--color-text-muted);
      font-size: var(--font-size-xs);
    }
  }

  .cases-sheet__nav-tag {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
  }

  .cases-sheet__content {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    min-width: 0;
    background:
      linear-gradient(180deg, var(--cases-surface-frost-98), var(--cases-surface-panel-muted)),
      var(--color-surface);
    padding: clamp(var(--space-4), 2vw, var(--space-6));
  }

  .cases-sheet__card,
  .cases-sheet__empty {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--cases-accent-ink) 12%, transparent);
    border-radius: 1.15rem;
    background: var(--cases-surface-frost-92);
    box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--color-text) 6%, transparent);
    padding: clamp(var(--space-4), 2vw, var(--space-5));
  }

  .cases-sheet__card--hero {
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--color-surface) 36%, transparent), transparent 14rem),
      color-mix(in srgb, var(--color-surface) 84%, var(--color-brand-primary) 16%);
  }

  .cases-sheet__card-head,
  .cases-sheet__pill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .cases-sheet__card-head h3,
  .cases-sheet__section-head h3,
  .cases-sheet__empty h3 {
    margin: var(--space-1) 0 0;
    font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  }

  .cases-sheet__section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }

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

  .cases-sheet__lead,
  .cases-sheet__empty p {
    margin: 0;
    color: var(--color-text-muted);
  }

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

    div {
      display: grid;
      gap: 0.18rem;
      border: 1px solid rgb(29 111 111 / 0.1);
      border-radius: 0.95rem;
      background: rgb(255 255 255 / 0.72);
      padding: var(--space-3);
    }

    span {
      color: var(--color-text-muted);
      font-size: var(--font-size-xs);
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    strong {
      font-size: var(--font-size-sm);
      overflow-wrap: anywhere;
    }
  }

  .cases-sheet .ui-table-wrap,
  .cases-sheet .cases-rda-card__json,
  .cases-sheet .cases-document-viewer__analysis,
  .cases-sheet pre {
    min-width: 0;
    max-width: 100%;
  }

  .cases-sheet .ui-table-wrap,
  .cases-sheet .cases-document-viewer__analysis {
    overflow: auto;
  }

  .cases-sheet .ui-table-wrap table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
  }

  .cases-sheet .ui-table-wrap :is(th, td),
  .cases-sheet .cases-document-viewer__analysis :is(th, td) {
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
    vertical-align: top;
  }

  .cases-sheet .cases-document-viewer__analysis table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
  }

  .cases-sheet .cases-rda-card__json pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .cases-document-card__meta {
    display: grid;
    gap: 0.2rem;

    strong {
      font-size: var(--font-size-md);
    }

    span {
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
    }
  }

  .cases-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3rem;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-decoration: none;
    padding-inline: var(--space-3);
    transition:
      background var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast),
      transform var(--transition-fast);

    &:is(:hover, :focus-visible) {
      transform: translateY(-1px);
    }

    &:focus-visible {
      outline: 2px solid var(--cases-focus-color);
      outline-offset: 3px;
      box-shadow:
        0 0 0 3px var(--cases-surface-frost-92),
        0 0 0 6px var(--cases-focus-ring);
    }
  }

  .cases-action-link--primary {
    background: var(--color-brand-primary);
    color: var(--color-text);

    &:is(:hover, :focus-visible) {
      background: color-mix(in srgb, var(--color-brand-primary) 88%, var(--color-surface));
      border-color: var(--cases-accent-ink);
      color: var(--color-text);
    }
  }

  .cases-action-link--secondary {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);

    &:is(:hover, :focus-visible) {
      border-color: var(--cases-accent-ink);
      background: var(--cases-accent-surface);
      color: var(--color-text);
    }
  }

  .cases-action-link--ghost {
    color: var(--color-text-muted);

    &:is(:hover, :focus-visible) {
      background: var(--cases-surface-frost-92);
      color: var(--color-text);
    }
  }

  .cases-action-link--danger {
    color: var(--cases-action-danger-fg);

    &:is(:hover, :focus-visible) {
      background: var(--cases-action-danger-hover-bg);
      color: var(--cases-action-danger-hover-fg);
    }
  }

  .cases-page .ui-button {
    &:focus-visible {
      outline: 2px solid var(--cases-focus-color);
      outline-offset: 3px;
      box-shadow:
        0 0 0 3px var(--cases-surface-frost-92),
        0 0 0 6px var(--cases-focus-ring);
    }

    &.ui-button--accent {
      background: var(--color-brand-accent);
      border-color: var(--color-brand-accent);
      color: var(--cidti-white);

      &:hover {
        background: var(--cases-focus-color);
        border-color: var(--cases-focus-color);
        color: var(--cidti-white);
      }
    }

    &.ui-button--ghost.is-active {
      border-color: var(--cases-accent-ink);
      background: var(--cases-accent-surface);
      color: var(--cases-accent-ink);
    }

    &.ui-button--danger {
      border-color: var(--color-error);
      background: var(--color-error);
      color: var(--cidti-white);

      &:hover {
        border-color: var(--cases-action-danger-fg);
        background: var(--cases-action-danger-fg);
        color: var(--cidti-white);
      }
    }
  }

  .cases-confirm-dialog {
    width: min(100% - 2rem, 34rem);
    border: 0;
    border-radius: 1.25rem;
    padding: 0;
    box-shadow: 0 28px 80px color-mix(in srgb, var(--color-text) 28%, transparent);

    &::backdrop {
      background: var(--cases-overlay-strong);
      backdrop-filter: blur(0.25rem);
    }
  }

  .cases-confirm-dialog__surface {
    display: grid;
    gap: var(--space-4);
    padding: clamp(var(--space-4), 2vw, var(--space-5));
    background: linear-gradient(180deg, var(--cases-surface-frost-98), var(--cases-surface-frost-94));
  }

  .cases-confirm-dialog__header h2,
  .cases-confirm-dialog__body p {
    margin: 0;
  }

  .cases-confirm-dialog__body {
    display: grid;
    gap: var(--space-3);
    color: var(--color-text-muted);
  }

  .cases-confirm-dialog__warning {
    border: var(--border-width) solid color-mix(in srgb, var(--color-warning) 28%, var(--color-surface));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface));
    color: var(--color-text);
    font-size: var(--font-size-sm);
    padding: var(--space-3);
  }

  .cases-confirm-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .cases-medication-table-wrap {
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--color-border) 78%, var(--color-brand-primary) 22%);
    border-radius: var(--radius-lg);
  }

  .cases-medication-table {
    width: 100%;
    min-width: 52rem;
    border-collapse: collapse;
    background: var(--color-surface);
  }

  .cases-medication-table :is(th, td) {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
    text-align: left;
    vertical-align: top;
  }

  .cases-medication-table th {
    color: color-mix(in srgb, var(--color-text) 72%, var(--color-brand-support) 28%);
    background: color-mix(in srgb, var(--color-surface) 91%, var(--color-brand-primary) 9%);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .cases-medication-table td small {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: 0.75rem;
  }

  .cases-medication-quantity {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

  .cases-medication-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .cases-medication-status {
    border: 1px solid color-mix(in srgb, var(--color-border) 72%, var(--color-text-muted) 28%);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    padding: 0.18rem 0.48rem;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: capitalize;
  }

  .cases-medication-status--administrado {
    border-color: color-mix(in srgb, var(--color-success) 34%, var(--color-border));
    background: color-mix(in srgb, var(--color-surface) 88%, var(--color-success) 12%);
    color: var(--color-success);
  }

  .cases-medication-status--formulado,
  .cases-medication-status--ordenado {
    border-color: color-mix(in srgb, var(--color-info) 32%, var(--color-border));
    background: color-mix(in srgb, var(--color-surface) 89%, var(--color-info) 11%);
    color: var(--color-info);
  }

  .cases-medication-status--facturado {
    border-color: color-mix(in srgb, var(--color-brand-accent) 32%, var(--color-border));
    background: color-mix(in srgb, var(--color-surface) 90%, var(--color-brand-accent) 10%);
    color: var(--color-brand-accent);
  }

  @media (max-width: 80rem) {
    .cases-filters {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cases-workspace__body {
      grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    }
  }

  @media (max-width: 64rem) {
    .cases-workspace__header {
      position: static;
    }

    .cases-workspace__intro,
    .cases-workspace__body {
      grid-template-columns: 1fr;
    }

    .cases-workspace,
    :is(.cases-browser, .cases-detail) {
      min-height: auto;
    }

    .cases-pane__scroll {
      max-height: none;
      overflow: visible;
      padding-right: 0;
    }

    .cases-detail__hero {
      grid-template-columns: 1fr;
    }

    .cases-detail__hero-actions {
      justify-items: start;
    }

    .cases-rda__grid {
      grid-template-columns: 1fr;
    }

    .cases-sheet {
      width: min(92vw, 78rem);
    }

    .cases-sheet__layout {
      grid-template-columns: 1fr;
    }

    .cases-sheet__rail {
      border-right: 0;
      border-bottom: 1px solid rgb(29 111 111 / 0.1);
    }
  }

  @media (max-width: 48rem) {
    .cases-app {
      width: min(100% - 1rem, 95rem);
      padding-inline: var(--space-3);
    }

    .cases-toolbar {
      align-items: stretch;
    }

    .cases-search {
      width: 100%;
    }

    .cases-toolbar__actions {
      width: 100%;
      justify-content: stretch;
    }

    .cases-filters,
    .cases-workspace__summary {
      grid-template-columns: 1fr;
    }

    .cases-accordion__trigger {
      grid-template-columns: 1fr;
    }

    .cases-accordion__meta {
      justify-items: start;
    }

    .cases-rda-card__meta,
    .cases-rda-finding__meta,
    .cases-sheet__meta-grid {
      grid-template-columns: 1fr;
    }

    .cases-sheet {
      width: 100%;
      max-width: 100%;
      height: 100dvh;
      max-height: 100dvh;
    }

    .cases-sheet__surface {
      border-radius: 0;
      box-shadow:
        0 1.4rem 3rem rgb(15 23 42 / 0.16),
        0 0 0 1px rgb(29 111 111 / 0.08);
    }

    .cases-sheet__header {
      padding: var(--space-4);
    }

    .cases-sheet__rail,
    .cases-sheet__content {
      padding: var(--space-4);
    }

    .cases-medication-table-wrap {
      overflow: visible;
      border: 0;
    }

    .cases-medication-table {
      min-width: 0;
      background: transparent;
    }

    .cases-medication-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
    }

    .cases-medication-table :is(tbody, tr, td) {
      display: block;
      width: 100%;
    }

    .cases-medication-table tr {
      margin-bottom: var(--space-3);
      border: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-brand-primary) 20%);
      border-radius: var(--radius-lg);
      background: var(--color-surface);
      padding: var(--space-3);
    }

    .cases-medication-table td {
      display: grid;
      grid-template-columns: minmax(6.5rem, 0.38fr) minmax(0, 1fr);
      gap: var(--space-3);
      padding: var(--space-2) 0;
    }

    .cases-medication-table td::before {
      content: attr(data-label);
      color: var(--color-text-muted);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
  }
}