@layer screens {
  .animal-viewbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--border-default);
  }

  .animal-view-label {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: var(--type-micro);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
  }

  .animal-viewtabs {
    min-width: 0;
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .animal-viewtabs .text-button {
    position: relative;
    flex: 0 0 auto;
    min-height: var(--control-height);
    padding-inline: var(--space-2);
    color: var(--text-muted);
  }

  .animal-viewtabs .text-button::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--active-indicator-width);
    background: transparent;
    content: "";
  }

  .animal-viewtabs .text-button:hover { color: var(--text-primary); }
  .animal-viewtabs .text-button.is-active { color: var(--text-primary); }
  .animal-viewtabs .text-button.is-active::after { background: var(--text-primary); }

  .animal-view-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .saved-view-sheet { max-height: min(86dvh, 760px); overflow-y: auto; }

  .animal-card-editor-sheet {
    max-height: min(94dvh, 900px);
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--space-3) + var(--safe-bottom));
    overflow: hidden;
  }

  .animal-card-editor-sheet .sheet-handle,
  .animal-card-editor-sheet .sheet-title-row,
  .card-editor-footer { flex: 0 0 auto; }
  .animal-card-editor-scroll { min-height: 0; overflow-y: auto; }
  .card-editor-section { padding: var(--space-4) var(--space-1); border-top: 1px solid var(--border-default); }
  .card-editor-section:first-child { padding-top: var(--space-1); border-top: 0; }
  .card-editor-section h3 { margin: 0 0 var(--space-2); color: var(--text-secondary); font-size: var(--type-micro); }
  .card-editor-segmented { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-editor-segmented button { min-width: 0; padding-inline: var(--space-1); font-size: var(--type-micro); }
  .card-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-3); }
  .card-action-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .card-editor-preview { padding-bottom: var(--space-1); }
  .card-preview-frame { width: min(100%, 400px); margin-inline: auto; }
  .card-preview-frame .animal-card-v2 { width: 100%; }

  .card-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
  }

  @media (max-width: 767px) {
    .animal-viewbar { align-items: stretch; flex-direction: column; }
    .animal-view-label { display: none; }
    .animal-view-actions { justify-content: flex-end; }
    .card-field-grid { gap-inline: var(--space-2); }
    .card-action-slots { grid-template-columns: minmax(0, 1fr); }

    .saved-view-sheet.full-screen-dialog,
    .animal-card-editor-sheet.full-screen-dialog {
      width: 100%;
      height: 100dvh;
      max-height: none;
      padding: 0;
      overflow: hidden;
      border: 0;
      border-radius: 0;
    }

    .animal-card-editor-sheet.full-screen-dialog .animal-card-editor-scroll {
      padding-inline: max(var(--space-4), var(--safe-left));
    }

    .animal-card-editor-sheet.full-screen-dialog .card-editor-footer {
      padding: var(--space-3) max(var(--space-4), var(--safe-right)) calc(var(--space-3) + var(--safe-bottom)) max(var(--space-4), var(--safe-left));
      background: var(--bg-elevated);
    }
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    .saved-view-sheet,
    .animal-card-editor-sheet { width: min(100%, 620px); }
  }

  @media (min-width: 1200px) {
    .saved-view-backdrop,
    .animal-card-editor-backdrop { align-items: stretch; justify-items: end; }

    .saved-view-sheet,
    .animal-card-editor-sheet {
      height: 100dvh;
      max-height: 100dvh;
      margin: 0;
      border-width: 0 0 0 1px;
      border-radius: 0;
    }

    .saved-view-sheet { width: 440px; padding: var(--space-4); }
    .animal-card-editor-sheet { width: 470px; padding: var(--space-4); }
    .animal-card-editor-sheet .sheet-handle { display: none; }
  }
}