/* =========================================================
   TOE BEANS — CANONICAL MOBILE STYLES

   This file is the single owner for viewport-responsive CSS.

   Shared component rules come first.
   Page-specific mobile rules will be added as each page is
   reviewed and tested.
   ========================================================= */


/* =========================================================
   TABLET NAVIGATION
   ========================================================= */

@media (max-width: 1050px) {

  .ds-navbar-inner {
    min-height: 0;
  }

  .ds-navbar-shell {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    gap: var(--ds-space-2);
  }

  .ds-navbar-right {
    width: 100%;
    justify-content: space-between;
    gap: var(--ds-space-3);
  }

  .ds-navbar-links {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

}


/* =========================================================
   PHONE FOUNDATION
   ========================================================= */

@media (max-width: 700px) {

  h1 {
    font-size: 30px;
  }

  h2 {
    font-size: 24px;
  }


  /* SHARED PAGE LAYOUT */

  .ds-container {
    width: calc(100% - 24px);
  }

  .ds-page {
    min-height: auto;
    padding: 24px 0 48px;
  }

  .ds-section {
    margin-top: 32px;
  }

  .ds-section-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }

  .ds-example-grid {
    grid-template-columns: 1fr;
  }

  .ds-demo-panel {
    padding: 18px;
  }

  .ds-card {
    padding: 18px;
  }


  /* NAVBAR */

  .ds-navbar-inner {
    width: calc(100% - 24px);
    min-height: 0;
    padding: var(--ds-space-2) 0;
  }

  .ds-navbar-shell {
    position: relative;
    min-height: 0;
    gap: var(--ds-space-2);
  }

  .ds-navbar-brand {
    max-width: 100%;
    gap: 10px;
    padding-right: 150px;
    font-size: 22px;
  }

  .ds-navbar-logo {
    width: 46px;
    height: 46px;
  }

  .ds-navbar-right {
    display: block;
    min-width: 0;
  }

  .ds-navbar-links {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2px;
    padding: 0 0 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .ds-navbar-link {
    min-height: 40px;
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 14px;
    white-space: nowrap;
  }

  .ds-navbar-tools {
    position: absolute;
    top: 2px;
    right: 0;
    justify-content: flex-end;
  }

  html[data-tb-navbar-session="signed-out"]
  .ds-navbar-signed-out {
    width: auto;
    justify-content: flex-end;
    gap: 4px;
  }

  html[data-tb-navbar-session="signed-out"]
  .ds-navbar-signed-out
  .ds-navbar-link {
    min-height: 38px;
    padding: 6px 8px;
    font-size: 13px;
  }

  .ds-navbar-icon-button {
    width: 42px;
    height: 42px;
  }

  .ds-navbar-account
  .ds-account-dropdown {
    right: 0;
    width: min(280px, calc(100vw - 24px));
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
  }

  .ds-navbar-notification-dropdown {
    position: fixed;
    top: 64px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
  }

  .ds-navbar-notification-heading {
    align-items: flex-start;
    gap: var(--ds-space-2);
  }


  /* FORMS */

  .ds-form-grid,
  .ds-choice-grid {
    grid-template-columns: 1fr;
  }

  .ds-form-field-full {
    grid-column: auto;
  }

  .ds-form-field input,
  .ds-form-field select,
  .ds-form-field textarea {
    font-size: 16px;
  }


  /* SHARED DIALOGS AND MODALS */

  dialog.ds-modal,
  dialog.ds-modal-demo {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    overflow: auto;
  }

  .ds-modal-header {
    gap: 12px;
    padding: 18px;
  }

  .ds-modal-header h2 {
    font-size: 22px;
  }

  .ds-modal-body {
    padding: 18px;
  }

  .ds-modal-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
  }

  .ds-modal-footer > .ds-button,
  .ds-modal-footer > button,
  .ds-modal-footer > a {
    width: 100%;
  }


  /* ACCOUNT SETTINGS DIALOG */

  .user-settings-header,
  .user-settings-body,
  .user-settings-footer {
    padding-left: var(--ds-space-4);
    padding-right: var(--ds-space-4);
  }

  .user-settings-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .user-settings-action {
    grid-column: 1 / -1;
    width: 100%;
  }


  /* PASSWORD STRENGTH */

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


  /* FOOTER */

  .ds-footer {
    margin-top: var(--ds-space-6);
  }

  .ds-footer-inner {
    width: calc(100% - 24px);
    padding: var(--ds-space-4) 0;
    text-align: center;
  }

}


/* =========================================================
   SMALL PHONE REFINEMENTS
   ========================================================= */

@media (max-width: 520px) {

  h1 {
    font-size: 28px;
  }

  .ds-container,
  .ds-navbar-inner,
  .ds-footer-inner {
    width: calc(100% - 16px);
  }

  .ds-page {
    padding-top: 20px;
  }

  .ds-card,
  .ds-demo-panel {
    padding: 16px;
  }

  .ds-navbar-brand {
    gap: 8px;
    padding-right: 140px;
    font-size: 20px;
  }

  .ds-navbar-logo {
    width: 42px;
    height: 42px;
  }

  .ds-navbar-link {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 13px;
  }

  .ds-navbar-account
  .ds-account-dropdown,
  .ds-navbar-notification-dropdown {
    width: calc(100vw - 16px);
  }

  dialog.ds-modal,
  dialog.ds-modal-demo {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .ds-modal-header,
  .ds-modal-body {
    padding: 16px;
  }

  .ds-modal-footer {
    padding: 14px 16px;
  }

  .ds-password-strength {
    padding: 10px 11px;
  }

  .ds-password-requirements {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   TOE BEANS MOBILE HOMEPAGE

   Canonical mobile owner for index.html and ds-home classes.
   ========================================================= */


/* =========================================================
   HOMEPAGE TABLET LAYOUT
   ========================================================= */

@media (max-width: 900px) {

  .ds-home-hero {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
    gap: var(--ds-space-6);
    padding: var(--ds-space-6) 0 var(--ds-space-8);
  }

  .ds-home-hero-logo img {
    width: min(65vw, 280px);
  }

  .ds-home-hero-copy {
    width: 100%;
  }

  .ds-home-hero h1 {
    max-width: 680px;
    font-size: clamp(36px, 8vw, 52px);
  }

  .ds-home-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   HOMEPAGE PHONE LAYOUT
   ========================================================= */

@media (max-width: 700px) {

  .ds-home-hero {
    width: calc(100% - 24px);
    gap: var(--ds-space-5);
    padding: var(--ds-space-5) 0 var(--ds-space-7);
  }

  .ds-home-hero-logo img {
    width: min(58vw, 220px);
  }

  .ds-home-hero h1 {
    font-size: 34px;
    line-height: 1.08;
  }

  .ds-home-eyebrow,
  .ds-home-kicker {
    margin-bottom: var(--ds-space-2);
    font-size: 13px;
  }

  .ds-home-hero-text {
    margin-top: var(--ds-space-4);
    font-size: 16px;
    line-height: 1.6;
  }

  .ds-home-actions {
    margin-top: var(--ds-space-5);
  }

  .ds-home-hero-actions {
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: none;
  }

  .ds-home-hero-actions
  .ds-button {
    min-height: 46px;
    white-space: normal;
  }

  .ds-home-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: var(--ds-space-4);
  }

  .ds-home-main {
    width: calc(100% - 24px);
    padding: var(--ds-space-5) 0 48px;
  }

  .ds-home-section {
    margin-top: var(--ds-space-5);
    padding: var(--ds-space-5);
    border-radius: var(--ds-radius-lg);
  }

  .ds-home-section-heading {
    margin-bottom: var(--ds-space-5);
  }

  .ds-home-section-heading h2 {
    font-size: 28px;
  }

  .ds-home-intro {
    margin-top: var(--ds-space-2);
    font-size: 16px;
    line-height: 1.6;
  }

  .ds-home-grid {
    gap: var(--ds-space-4);
  }

  .ds-home-info-card {
    padding: var(--ds-space-5);
  }

  .ds-home-settings-modal {
    padding: 12px;
  }

  .ds-home-settings-card {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .ds-home-settings-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--ds-space-4);
    padding: var(--ds-space-4);
  }

  .ds-home-callout
  .ds-home-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ds-home-callout
  .ds-home-actions
  .ds-button {
    width: 100%;
  }

}


/* =========================================================
   HOMEPAGE SMALL PHONE LAYOUT
   ========================================================= */

@media (max-width: 520px) {

  .ds-home-hero,
  .ds-home-main {
    width: calc(100% - 16px);
  }

  .ds-home-hero {
    padding-top: var(--ds-space-4);
  }

  .ds-home-hero-logo img {
    width: min(56vw, 190px);
  }

  .ds-home-hero h1 {
    font-size: 32px;
  }

  .ds-home-section {
    padding: var(--ds-space-4);
  }

  .ds-home-section-heading h2 {
    font-size: 26px;
  }

  .ds-home-info-card {
    padding: var(--ds-space-4);
  }

  .ds-home-icon {
    width: 42px;
    height: 42px;
  }

}

/* =========================================================
   TOE BEANS MOBILE PUBLIC AND AUTHENTICATION

   Canonical mobile owner for public browsing, authentication,
   registration, verification, and public animal information.
   ========================================================= */


/* =========================================================
   ACCOUNT TYPE SELECTION
   ========================================================= */

@media (max-width: 1220px) {

  .ds-create-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-4);
  }

  .ds-create-account-option {
    min-height: 220px;
  }

}

@media (max-width: 800px) {

  .ds-create-account-info {
    max-width: 620px;
  }

  .ds-create-account-info-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ds-create-account-info-item,
  .ds-create-account-info-item:first-child {
    padding: var(--ds-space-3) 0;
    border-left: 0;
    border-top: 1px solid var(--ds-border);
  }

  .ds-create-account-info-item:first-child {
    border-top: 0;
  }

}

@media (max-width: 700px) {

  .ds-create-account-grid {
    grid-template-columns: 1fr;
  }

  .ds-create-account-option {
    min-height: 0;
  }

  .ds-create-account-option
  .ds-button {
    white-space: normal;
  }

  .ds-create-account-shell,
  .ds-create-account-intro {
    margin-top: 0;
  }

  .ds-create-account-description {
    font-size: 15px;
  }

  .ds-create-account-login {
    font-size: 12px;
  }

}


/* =========================================================
   LOGIN PAGES
   ========================================================= */

@media (max-width: 900px) {

  .ds-login-shell {
    width: min(700px, calc(100% - 32px));
    grid-template-columns: 1fr;
    gap: var(--ds-space-5);
    align-items: stretch;
  }

  .ds-login-intro {
    max-width: none;
  }

}

@media (max-width: 620px) {

  .ds-login-page {
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .ds-login-shell {
    width: calc(100% - 24px);
    gap: var(--ds-space-4);
  }

  .ds-login-intro,
  .ds-login-card {
    padding: 20px;
  }

  .ds-login-intro h1 {
    font-size: clamp(32px, 10vw, 42px);
  }

}


/* =========================================================
   USER AND ORGANIZATION REGISTRATION
   ========================================================= */

@media (max-width: 950px) {

  .ds-user-register-shell,
  .ds-partner-register-shell {
    max-width: 700px;
    grid-template-columns: 1fr;
  }

  .ds-user-register-intro {
    position: static;
  }

}

@media (max-width: 680px) {

  .ds-user-register-page,
  .ds-partner-register-page {
    padding-top: 20px;
  }

  .ds-user-register-shell,
  .ds-partner-register-shell {
    width: calc(100% - 24px);
  }

  .ds-user-register-intro,
  .ds-user-register-card,
  .ds-partner-register-intro,
  .ds-partner-register-card {
    padding: 20px;
  }

  .ds-user-register-row,
  .ds-user-register-address,
  .ds-partner-register-form
  .organization-contact-grid {
    grid-template-columns: 1fr;
  }

  .ds-user-register-address
  > .ds-user-register-row:has(#registerCity):has(#registerState) {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ds-user-register-address-heading,
  .ds-user-register-address > p,
  .ds-user-register-address
  > .ds-user-register-field:has(#registerAddressLine1),
  .ds-user-register-address
  > .ds-user-register-field:has(#registerAddressLine2),
  .ds-user-register-address
  .ds-user-register-field:has(#registerCity),
  .ds-user-register-address
  .ds-user-register-field:has(#registerState),
  .ds-user-register-address
  .ds-user-register-field:has(#registerZipCode) {
    grid-column: auto;
  }

}


/* =========================================================
   PASSWORD RECOVERY AND VERIFICATION
   ========================================================= */

@media (max-width: 650px) {

  .ds-verification-page {
    padding-top: 28px;
  }

  .ds-verification-card {
    padding: 24px 20px;
  }

}

@media (max-width: 600px) {

  .ds-verify-page {
    padding-top: 28px;
  }

  .ds-verify-card {
    padding: 26px 20px;
  }

}

@media (max-width: 550px) {

  .ds-password-reset-page,
  .ds-reset-password-page {
    padding-top: 28px;
  }

  .ds-password-reset-card {
    padding: 22px;
  }

  .ds-reset-password-card {
    padding: 24px 20px;
  }

  .ds-password-reset-links {
    flex-direction: column;
  }

  .ds-reset-password-success-links {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ds-reset-password-success-links.hidden {
    display: none;
  }

}


/* =========================================================
   ORGANIZATION INVITATIONS
   ========================================================= */

@media (max-width: 560px) {

  .organization-invitation-page {
    align-items: start;
    padding: var(--ds-space-4) var(--ds-space-3);
  }

  .organization-invitation-card {
    padding: var(--ds-space-4);
  }

  .organization-invitation-summary
  dl > div {
    grid-template-columns: 1fr;
    gap: var(--ds-space-1);
  }

}


/* =========================================================
   ADOPTABLE PETS
   ========================================================= */

@media (max-width: 900px) {

  .ds-adopt-hero {
    grid-template-columns: 1fr;
  }

  .ds-adopt-filter-card {
    width: 100%;
  }

}

@media (max-width: 620px) {

  .ds-adopt-page {
    padding-top: 26px;
  }

  .ds-adopt-shell {
    width: calc(100% - 24px);
  }

  .ds-adopt-results {
    padding: 20px;
  }

  .ds-adopt-results-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ds-adopt-grid,
  .ds-adopt-pet-actions {
    grid-template-columns: 1fr;
  }

  .ds-adopt-pet-actions
  .ds-button {
    width: 100%;
  }

}


/* =========================================================
   ADOPTION APPLICATION MODAL
   ========================================================= */

@media (max-width: 650px) {

  .ds-adoption-application-modal {
    padding: var(--ds-space-3);
  }

  .ds-adoption-application-card {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .ds-adoption-application-header,
  .ds-adoption-application-body {
    padding: var(--ds-space-4);
  }

  .ds-adoption-application-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ds-adoption-application-actions
  .ds-button {
    width: 100%;
  }

}


/* =========================================================
   ANIMAL AND PET DETAILS
   ========================================================= */

@media (max-width: 900px) {

  .ds-animal-profile {
    grid-template-columns: 1fr;
  }

  .ds-animal-profile-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 700px) {

  .ds-animal-main {
    padding: 34px 0 56px;
  }

  .ds-animal-shell {
    width: calc(100% - 24px);
  }

  .ds-animal-hero {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .ds-animal-hero-actions {
    align-items: stretch;
  }

  .ds-animal-hero-actions
  .ds-button {
    width: 100%;
    justify-content: center;
  }

  .ds-animal-summary-header {
    display: grid;
  }

  .ds-animal-facts,
  .ds-animal-profile-side {
    grid-template-columns: 1fr;
  }

  .ds-animal-summary-card,
  .ds-animal-content-section,
  .ds-animal-photos-card,
  .ds-animal-organization-card,
  .pet-detail-notes-card {
    padding: 22px;
  }

}


/* =========================================================
   PET TRANSFER MODAL
   ========================================================= */

@media (max-width: 700px) {

  .tb-transfer-modal {
    padding: 12px;
  }

  .tb-transfer-modal-card {
    max-height: calc(100dvh - 24px);
    padding: 18px;
  }

  .tb-transfer-options,
  .tb-transfer-user-search {
    grid-template-columns: 1fr;
  }

  .tb-transfer-found-user {
    align-items: stretch;
    flex-direction: column;
  }

}


/* =========================================================
   LOST PETS
   ========================================================= */

@media (max-width: 1000px) {

  .ds-lost-pet-card {
    grid-template-columns: minmax(300px, 40%) minmax(0, 1fr);
  }

  .ds-lost-pet-photo-grid,
  .ds-lost-pet-facts,
  .ds-lost-pet-details-grid {
    grid-template-columns: 1fr;
  }

  .ds-lost-pet-photo-tile {
    aspect-ratio: 4 / 3;
  }

}

@media (max-width: 900px) {

  .ds-lost-pets-hero {
    grid-template-columns: 1fr;
  }

  .ds-lost-pet-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-lost-pets-filter-button-wrap {
    grid-column: 1 / -1;
  }

}

@media (max-width: 760px) {

  .ds-lost-pet-card {
    grid-template-columns: 1fr;
  }

  .ds-lost-pet-media {
    margin: 12px;
    border-right: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
  }

  .ds-lost-pet-body {
    margin: 12px;
    padding: 16px;
  }

  .ds-lost-pet-actions {
    justify-content: stretch;
  }

  .ds-lost-pet-saw-button {
    width: 100%;
  }

}

@media (max-width: 650px) {

  .ds-lost-pets-main {
    width: calc(100% - 24px);
    padding: 24px 0 48px;
  }

  .ds-lost-pets-feed,
  .ds-lost-pet-filter-grid,
  .ds-lost-pet-facts,
  .ds-sighting-two-column,
  .ds-sighting-location-grid,
  .ds-sighting-location-options {
    grid-template-columns: 1fr;
  }

  .ds-lost-pets-hero-copy,
  .ds-lost-pets-help-card,
  .ds-lost-pet-filter-card,
  .ds-lost-pet-filter-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .ds-lost-pet-fact {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .ds-lost-pet-map {
    height: 180px;
  }

  .ds-lost-pet-map-section {
    padding: 14px;
  }

  .ds-sighting-modal {
    padding: 12px;
  }

  .ds-sighting-card {
    max-height: calc(100dvh - 24px);
  }

  .ds-sighting-gps-box {
    align-items: stretch;
    flex-direction: column;
  }

  .ds-sighting-header,
  .ds-sighting-matched-pet-section,
  .ds-sighting-form-section,
  .ds-sighting-modal-actions {
    padding-right: 18px;
    padding-left: 18px;
  }

  .ds-sighting-form-message {
    margin-right: 18px;
    margin-left: 18px;
  }

  .ds-sighting-modal-actions {
    flex-direction: column-reverse;
  }

  .ds-sighting-modal-actions
  .ds-button {
    width: 100%;
  }

}


/* =========================================================
   LOOKUP
   ========================================================= */

@media (max-width: 700px) {

  .ds-lookup-page {
    padding: 24px 16px 40px;
  }

  .ds-lookup-facts,
  .ds-lookup-photo-gallery {
    grid-template-columns: 1fr;
  }

  .ds-lookup-actions {
    justify-content: stretch;
  }

  .ds-lookup-actions
  .ds-button,
  .ds-lookup-search-actions
  .ds-button {
    width: 100%;
  }

}


/* =========================================================
   CONTACT SUPPORT
   ========================================================= */

@media (max-width: 800px) {

  .ds-contact-page {
    padding: 40px 18px 56px;
  }

  .ds-contact-layout {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 560px) {

  .ds-contact-information,
  .ds-contact-form-panel {
    padding: 22px 18px;
  }

  .ds-contact-actions {
    justify-content: stretch;
  }

  .ds-contact-actions
  .ds-button {
    width: 100%;
  }

}

/* =========================================================
   TOE BEANS MOBILE USER PORTAL

   Canonical mobile owner for user.html.
   ========================================================= */


/* =========================================================
   USER PORTAL TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .user-pet-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   USER PORTAL PHONE
   ========================================================= */

@media (max-width: 700px) {

  .user-rebuild-page {
    width: calc(100% - 24px);
    padding-top: var(--ds-space-4);
  }

  .user-account-hero {
    padding: var(--ds-space-5);
  }

  .user-account-hero h1 {
    font-size: 30px;
  }

  .user-section-heading {
    display: grid;
    gap: var(--ds-space-3);
  }


  /* USER PORTAL TABS */

  .user-account-tabs {
    flex-wrap: nowrap;
    gap: var(--ds-space-2);
    padding-bottom: var(--ds-space-2);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .user-account-tab {
    width: auto;
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }


  /* ADOPTION PROFILE AND APPLICATIONS */

  .user-adoption-card {
    gap: var(--ds-space-4);
    padding: var(--ds-space-5);
  }

  .user-adoption-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--ds-space-3);
    padding-bottom: var(--ds-space-4);
  }

  .user-adoption-status {
    align-self: flex-start;
    white-space: normal;
  }

  .user-adoption-section {
    padding: var(--ds-space-4);
  }

  .user-adoption-grid {
    grid-template-columns: 1fr;
  }

  .user-adoption-full {
    grid-column: auto;
  }

  .user-adoption-conditional {
    padding: var(--ds-space-3);
  }

  .user-adoption-actions {
    align-items: stretch;
    flex-direction: column;
    gap: var(--ds-space-3);
  }

  .user-adoption-actions
  .ds-button {
    width: 100%;
    min-width: 0;
  }


  /* USER EMPTY STATES */

  .user-empty-state {
    align-items: flex-start;
    flex-direction: column;
  }


  /* MISSING PET LOCATION OPTIONS */

  .user-missing-pet-location-choice-list {
    grid-template-columns: 1fr;
  }

  .user-missing-pet-location-choice {
    min-height: 0;
  }


  /* USER TOOLS */

  .user-tools-header,
  .user-tools-body,
  .user-tools-footer {
    padding-right: var(--ds-space-4);
    padding-left: var(--ds-space-4);
  }

  .user-tools-section-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .user-tools-count {
    grid-column: 2;
    justify-self: start;
  }

  .user-tools-section-actions {
    justify-content: stretch;
  }

  .user-tools-section-actions
  .ds-button {
    width: 100%;
  }

  .user-tools-list > article {
    grid-template-columns: 1fr;
  }

  .user-tools-list
  > article
  > div:last-child {
    justify-content: stretch;
  }

  .user-tools-list
  > article
  > div:last-child
  .ds-button {
    flex: 1 1 auto;
  }


  /* EDIT PET DIALOG */

  .user-edit-pet-dialog {
    width: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: var(--ds-radius-lg);
  }

  .user-edit-pet-form {
    max-height: calc(100dvh - 24px);
  }

  .user-edit-pet-header {
    padding: var(--ds-space-5);
  }

  #userEditPetMessage {
    margin-right: var(--ds-space-5);
    margin-left: var(--ds-space-5);
  }

  .user-edit-pet-section {
    margin-right: var(--ds-space-5);
    margin-left: var(--ds-space-5);
    padding: var(--ds-space-5);
  }

  .user-edit-pet-form
  .ds-adopt-pet-actions,
  .user-edit-pet-photo-fields {
    grid-template-columns: 1fr;
  }

  .user-edit-pet-form
  .ds-adopt-pet-actions
  .ds-button {
    width: 100%;
  }

  .user-edit-pet-footer {
    padding-right: var(--ds-space-5);
    padding-left: var(--ds-space-5);
  }


  /* EDIT PET MULTI-SELECTS */

  .user-edit-multi-picker-menu {
    position: static;
    max-height: 190px;
    margin-top: var(--ds-space-2);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    box-shadow: none;
  }

  .user-edit-multi-picker-options {
    gap: var(--ds-space-1);
  }

  .user-edit-multi-picker-option {
    min-height: 44px;
  }

  /* PET OWNERS DIALOG */

  .user-pet-owners-dialog {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
  }

  .user-pet-owners-dialog
  .ds-modal-header {
    padding: var(--ds-space-4);
  }

  .user-pet-owners-content {
    padding-right: var(--ds-space-4);
    padding-left: var(--ds-space-4);
    padding-bottom: var(--ds-space-4);
  }

  .user-pet-owner-row,
  .user-pet-owner-found,
  .user-pet-owner-search {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .user-pet-owner-row
  .ds-button,
  .user-pet-owner-found
  .ds-button,
  .user-pet-owner-search
  .ds-button {
    width: 100%;
  }


  /* LOST PET SEARCH DIALOG */

  .user-lost-search-dialog {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
  }

  .user-lost-search-shell {
    max-height: calc(100dvh - 24px);
  }

  .user-lost-search-header {
    padding: var(--ds-space-4);
  }

  .user-lost-search-map {
    height: 360px;
    margin-right: var(--ds-space-4);
    margin-left: var(--ds-space-4);
  }

  #userLostPetSearchMessage,
  #userLostPetSearchMapEmpty,
  .user-lost-search-legend,
  .user-lost-search-sightings-heading,
  .user-lost-search-sightings {
    margin-right: var(--ds-space-4);
    margin-left: var(--ds-space-4);
  }

  .user-lost-search-sightings-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .user-lost-search-sighting-card,
  .user-lost-search-sighting-content {
    grid-template-columns: 1fr;
  }

  .user-lost-search-sighting-photo {
    width: 100%;
    max-width: 260px;
  }

  .user-lost-search-sighting-title {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--ds-space-2);
  }

  .user-lost-search-sighting-contact {
    grid-column: auto;
  }

}


/* =========================================================
   USER PORTAL NARROW PHONE
   ========================================================= */

@media (max-width: 620px) {

  .user-pet-photos,
  .user-pet-facts,
  .user-missing-pet-summary,
  .user-missing-pet-facts {
    grid-template-columns: 1fr;
  }

  .user-pet-fact-wide,
  .user-missing-pet-facts
  .user-pet-fact-wide {
    grid-column: auto;
  }

  .user-pet-actions {
    grid-template-columns: 1fr;
  }

  .user-pet-status-action,
  .user-pet-owners-action {
    grid-column: auto;
  }

  .user-pet-actions
  .ds-button {
    width: 100%;
  }

  .user-missing-pet-summary {
    padding: var(--ds-space-4);
  }

  .user-missing-pet-photo {
    max-width: 240px;
  }

}


/* =========================================================
   USER PORTAL SMALL PHONE
   ========================================================= */

@media (max-width: 520px) {

  .user-rebuild-page {
    width: calc(100% - 16px);
  }

  .user-account-hero,
  .user-adoption-card {
    padding: var(--ds-space-4);
  }

  .user-account-hero h1 {
    font-size: 28px;
  }

  .user-adoption-section {
    padding: var(--ds-space-3);
  }

  .user-edit-pet-header {
    gap: var(--ds-space-3);
    padding: var(--ds-space-4);
  }

  #userEditPetMessage,
  .user-edit-pet-section {
    margin-right: var(--ds-space-4);
    margin-left: var(--ds-space-4);
  }

  .user-edit-pet-section {
    padding: var(--ds-space-4);
  }

  .user-edit-pet-footer {
    display: grid;
    grid-template-columns: 1fr;
    padding: var(--ds-space-4);
  }

  .user-edit-pet-footer
  .ds-button {
    width: 100%;
    min-width: 0;
  }

  .user-lost-search-dialog,
  .user-pet-owners-dialog {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }

  .user-lost-search-shell {
    max-height: calc(100dvh - 16px);
  }

  .user-lost-search-map {
    height: 300px;
  }

}

/* =========================================================
   TOE BEANS MOBILE ORGANIZATION PORTAL

   Canonical mobile owner for organization-portal.html.
   ========================================================= */


/* =========================================================
   ORGANIZATION PORTAL TABLET
   ========================================================= */

@media (max-width: 1100px) {

  #organizationAnimalsSection
  .organization-animal-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 820px) {

  .organization-welcome-card {
    grid-template-columns: 1fr;
    row-gap: var(--ds-space-5);
  }

  .organization-stats {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .partner-application-stat {
    grid-column: auto;
  }

  #organizationArchivedAnimalsSection
  .organization-archive-toolbar,
  #organizationArchivedAnimalsSection
  .organization-animal-card-body {
    grid-template-columns: 1fr;
  }

  #organizationArchivedAnimalsSection
  .organization-animal-card-body {
    grid-template-areas:
      "name"
      "summary"
      "meta"
      "identifier"
      "actions"
      "applications";
  }

  #organizationArchivedAnimalsSection
  .organization-animal-actions {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
    margin-top: var(--ds-space-2);
  }

}


/* =========================================================
   ORGANIZATION PORTAL PHONE
   ========================================================= */

@media (max-width: 700px) {

  .organization-portal-main {
    width: calc(100% - 24px);
    padding:
      var(--ds-space-4)
      0
      var(--ds-space-8);
  }

  .partner-dashboard {
    gap: var(--ds-space-4);
  }

  .organization-welcome-card,
  .organization-animals-card,
  .partner-applications-card,
  #organizationArchivedAnimalsSection.organization-archive-card {
    padding: var(--ds-space-5);
  }

  .organization-welcome-content,
  .organization-animals-header > div,
  .partner-applications-heading-copy,
  .organization-section-header > div,
  .organization-team-identity {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .organization-welcome-content h1 {
    font-size: 1.85rem;
  }

  .organization-welcome-id,
  .organization-animals-description,
  .partner-application-item,
  .partner-application-detail-section,
  .organization-animal-card-body {
    overflow-wrap: anywhere;
  }

  .organization-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-2);
  }

  .partner-application-stat {
    grid-column: 1 / -1;
  }

  .organization-stat-card {
    min-width: 0;
    min-height: 48px;
    padding:
      var(--ds-space-2)
      var(--ds-space-3);
    white-space: normal;
    text-align: center;
  }

  .organization-stat-card span {
    overflow-wrap: anywhere;
  }


  /* WORKSPACE NAVIGATION */

  .organization-workspace-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-2);
  }

  .organization-workspace-tab {
    width: 100%;
    min-width: 0;
  }


  /* ACTIVE ANIMALS */

  .organization-animals-header {
    display: grid;
    gap: var(--ds-space-4);
  }

  .organization-animals-header .ds-button {
    width: 100%;
  }

  .organization-animal-toolbar {
    grid-template-columns: 1fr;
  }

  #organizationAnimalsSection
  .organization-animal-list {
    grid-template-columns: 1fr;
    gap: var(--ds-space-4);
  }

  #organizationAnimalsSection
  .organization-animal-summary {
    min-height: 0;
  }

  #organizationAnimalsSection
  .organization-animal-card-body {
    padding: var(--ds-space-4);
  }

  #organizationAnimalsSection
  .organization-animal-actions {
    grid-template-columns: 1fr;
  }

  #organizationAnimalsSection
  .organization-empty-state {
    grid-column: 1 / -1;
    min-width: 0;
    padding: var(--ds-space-4);
  }


  /* ADOPTION APPLICATIONS */

  .partner-applications-card {
    min-height: 0;
    gap: var(--ds-space-4);
  }

  .partner-applications-heading {
    grid-template-columns: 1fr;
    gap: var(--ds-space-4);
  }

  .partner-applications-heading-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .partner-application-filter-field,
  .partner-applications-refresh {
    width: 100%;
    min-width: 0;
  }

  .partner-application-list,
  .partner-application-item {
    grid-template-columns: 1fr;
  }

  .partner-application-item {
    align-items: stretch;
    gap: var(--ds-space-4);
    padding: var(--ds-space-4);
  }

  .partner-application-card-action {
    width: 100%;
    min-width: 0;
  }

  .partner-application-card-action.ds-button {
    width: 100%;
  }

  .partner-application-empty {
    min-height: 220px;
    padding: var(--ds-space-5);
  }


  /* APPLICATION DETAIL MODAL */

  .partner-application-modal {
    padding: var(--ds-space-2);
  }

  .partner-application-modal-card {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: var(--ds-radius-lg);
  }

  .partner-application-modal-header,
  #partnerApplicationDetail,
  .partner-application-workflow {
    padding: var(--ds-space-4);
  }

  .partner-application-detail-grid,
  .partner-application-workflow-grid {
    grid-template-columns: 1fr;
  }

  .partner-application-detail-section-wide {
    grid-column: auto;
  }

  .partner-application-detail-row {
    grid-template-columns: 1fr;
    gap: var(--ds-space-1);
  }

  .partner-application-workflow-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .partner-application-workflow-actions
  .ds-button {
    width: 100%;
  }


  /* ARCHIVED ANIMALS */

  #organizationArchivedAnimalsSection
  .organization-section-header {
    grid-template-columns: 1fr;
  }

  #organizationArchivedAnimalsSection
  .organization-archive-refresh {
    width: 100%;
    min-width: 0;
  }

  #organizationArchivedAnimalsSection
  .organization-archive-toolbar {
    grid-template-columns: 1fr;
  }

  #organizationArchivedAnimalsSection
  .organization-animal-card {
    grid-template-columns:
      96px minmax(0, 1fr);
  }

  #organizationArchivedAnimalsSection
  .organization-animal-photo-wrap {
    width: 96px;
  }

  #organizationArchivedAnimalsSection
  .organization-animal-actions {
    grid-template-columns: 1fr;
  }

  #organizationArchivedAnimalsSection
  .organization-empty-state,
  #organizationArchivedAnimalsSection
  .organization-animal-loading {
    min-height: 190px;
    padding: var(--ds-space-4);
  }


  /* ANIMAL EDITOR */

  .organization-animal-editor {
    padding: var(--ds-space-2);
  }

  .organization-animal-editor-card,
  .organization-animal-editor-form {
    max-height: calc(100dvh - 16px);
  }

  .organization-animal-editor-card {
    width: 100%;
    border-radius: var(--ds-radius-lg);
  }

  .organization-animal-editor-header {
    gap: var(--ds-space-3);
    padding: var(--ds-space-4);
  }

  .organization-animal-editor-message,
  .organization-animal-editor-section,
  .organization-animal-editor-details {
    margin-right: var(--ds-space-4);
    margin-left: var(--ds-space-4);
  }

  .organization-animal-editor-section {
    padding: var(--ds-space-4);
  }

  .organization-animal-editor-form
  .ds-form-grid,
  .organization-animal-editor-inline-action,
  .organization-animal-editor-photo-grid {
    grid-template-columns: 1fr;
  }

  .organization-animal-editor-inline-action
  .ds-button {
    width: 100%;
  }

  .organization-animal-editor-current-gallery {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .organization-animal-editor-footer {
    padding:
      var(--ds-space-4);
  }

  .organization-animal-editor-footer-actions {
    width: 100%;
  }


  /* ANIMAL EDITOR MULTI-SELECTS */

  .organization-animal-editor-picker-menu {
    position: static;
    max-height: 230px;
    margin-top: var(--ds-space-2);
    overflow: hidden;
    box-shadow: none;
  }

  .organization-animal-editor-multi-picker-options {
    max-height: 170px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .organization-animal-editor-multi-picker-options
  label,
  .organization-animal-editor-picker-option {
    min-height: 44px;
  }

  /* TRANSFER MODAL */

  .tb-transfer-modal {
    padding: var(--ds-space-3);
  }

  .tb-transfer-modal-card {
    width: 100%;
    max-height: calc(100dvh - 24px);
  }

  .tb-transfer-options,
  .tb-transfer-user-search {
    grid-template-columns: 1fr;
  }

  .tb-transfer-status-actions,
  .tb-transfer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .tb-transfer-status-actions
  .ds-button,
  .tb-transfer-actions
  .ds-button,
  .tb-transfer-user-search
  .ds-button {
    width: 100%;
  }


  /* ACCOUNT SETTINGS */

  #userSettingsModal {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }

  #userSettingsModal
  .user-settings-header,
  #userSettingsModal
  .user-settings-body,
  #userSettingsModal
  .user-settings-footer {
    padding-right: var(--ds-space-4);
    padding-left: var(--ds-space-4);
  }

  #userSettingsModal
  .user-settings-row {
    grid-template-columns:
      auto minmax(0, 1fr);
    align-items: start;
    gap: var(--ds-space-3);
  }

  #userSettingsModal
  .user-settings-action {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    white-space: normal;
  }


  /* TEAM MANAGEMENT */

  .organization-team-dialog {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .organization-team-dialog
  .ds-modal-header,
  .organization-team-dialog
  .ds-modal-body,
  .organization-team-dialog
  .ds-modal-footer {
    padding-right: var(--ds-space-4);
    padding-left: var(--ds-space-4);
  }

  .organization-team-invite-form,
  .organization-team-link-row,
  .organization-team-item,
  .organization-team-invitation {
    grid-template-columns: 1fr;
  }

  .organization-team-protected {
    grid-column: auto;
  }

  .organization-team-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .organization-team-actions
  .ds-button,
  .organization-team-invite-form
  .ds-button,
  .organization-team-link-row
  .ds-button {
    width: 100%;
  }

  .organization-team-role-grid {
    grid-template-columns: 1fr;
  }


  /* EDIT ORGANIZATION ACCOUNT */

  #partnerAccountEditModal {
    padding: var(--ds-space-2);
  }

  #partnerAccountEditModal
  .settings-modal-card {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: var(--ds-radius-lg);
  }

  #partnerAccountEditModal
  .settings-modal-header,
  #partnerAccountEditModal
  .tb-account-edit-body {
    padding: var(--ds-space-4);
  }

  #partnerAccountEditModal
  .tb-account-edit-grid {
    grid-template-columns: 1fr;
  }
  #partnerAccountEditModal
  .settings-modal-footer {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    padding: var(--ds-space-4);
  }

  #partnerAccountEditModal
  .settings-modal-footer
  .ds-button {
    width: 100%;
  }

}


/* =========================================================
   ORGANIZATION PORTAL SMALL PHONE
   ========================================================= */

@media (max-width: 520px) {

  .organization-portal-main {
    width: calc(100% - 16px);
  }

  .organization-welcome-card,
  .organization-animals-card,
  .partner-applications-card,
  #organizationArchivedAnimalsSection.organization-archive-card {
    padding: var(--ds-space-4);
  }

  #organizationAnimalsSection
  .organization-animal-meta {
    grid-template-columns: 1fr;
  }

  #organizationArchivedAnimalsSection
  .organization-animal-card {
    grid-template-columns: 1fr;
  }

  #organizationArchivedAnimalsSection
  .organization-animal-photo-wrap {
    width: 100%;
    height: 160px;
    min-height: 160px;
  }

  #organizationArchivedAnimalsSection
  .organization-animal-photo-placeholder {
    min-height: 160px;
  }

  .organization-animal-editor-message,
  .organization-animal-editor-section,
  .organization-animal-editor-details {
    margin-right: var(--ds-space-3);
    margin-left: var(--ds-space-3);
  }

  .organization-animal-editor-current-gallery {
    grid-template-columns: 1fr;
  }

  .organization-animal-editor-footer,
  .organization-animal-editor-footer-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .organization-animal-editor-footer
  .ds-button {
    width: 100%;
    min-width: 0;
  }

  .organization-team-section {
    padding: var(--ds-space-3);
  }

}


@media (max-width: 380px) {

  .organization-stats {
    grid-template-columns: 1fr;
  }

  .partner-application-stat {
    grid-column: auto;
  }

}
/* =========================================================
   TOE BEANS MOBILE ADMIN

   Canonical responsive owner for:
   - admin-login.html
   - admin.html
   ========================================================= */

@media (max-width: 1180px) {
  .ds-admin-page .ds-admin-stat-grid,
  .ds-admin-page [data-admin-view="overview"] .ds-admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-admin-page .ds-admin-organization-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ds-admin-page .ds-admin-overview-grid {
    grid-template-columns: 1fr;
  }

  .ds-admin-page .ds-admin-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-admin-page .ds-admin-toolbar-actions {
    justify-content: stretch;
  }

  .ds-admin-page .ds-admin-toolbar-actions .ds-button {
    flex: 1;
  }

  .ds-admin-page .ds-admin-organization-record-copy {
    grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1.3fr);
  }

  .ds-admin-page .ds-admin-organization-record-meta {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .ds-admin-page
    [data-admin-view="overview"]
    .ds-admin-stat-grid
    > .ds-admin-stat-card {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .ds-admin-login-page .ds-login-page {
    min-height: auto;
    padding: var(--ds-space-6) 0 var(--ds-space-8);
  }

  .ds-admin-login-page .ds-login-shell {
    width: min(100% - 24px, 680px);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-space-5);
  }

  .ds-admin-login-page .ds-login-intro {
    max-width: none;
  }

  .ds-admin-page .ds-admin-layout {
    width: min(100% - 24px, 1180px);
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--ds-space-4);
  }

  .ds-admin-page .ds-admin-sidebar {
    position: static;
    min-width: 0;
  }

  .ds-admin-page .ds-admin-nav {
    display: flex;
    gap: var(--ds-space-2);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: inline proximity;
    padding-bottom: var(--ds-space-2);
  }

  .ds-admin-page .ds-admin-nav-button {
    width: auto;
    min-width: max-content;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .ds-admin-page .ds-admin-main,
  .ds-admin-page .ds-admin-view,
  .ds-admin-page .ds-admin-panel,
  .ds-admin-page .ds-admin-record-copy {
    min-width: 0;
  }

  .ds-admin-page .ds-admin-welcome {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .ds-admin-login-page .ds-login-intro,
  .ds-admin-login-page .ds-login-card {
    padding: var(--ds-space-5);
  }

  .ds-admin-login-page .ds-login-intro h1 {
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .ds-admin-login-page .ds-login-account-link,
  .ds-admin-login-page .ds-login-account-link a {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ds-admin-page .ds-navbar-shell,
  .ds-admin-page .ds-admin-layout {
    width: calc(100% - 16px);
  }

  .ds-admin-page .ds-admin-navbar-label,
  .ds-admin-page .ds-admin-account .ds-account-button small {
    display: none;
  }

  .ds-admin-page .ds-admin-navbar-tools {
    gap: var(--ds-space-2);
  }

  .ds-admin-page .ds-admin-page-heading {
    align-items: stretch;
    flex-direction: column;
    gap: var(--ds-space-4);
  }

  .ds-admin-page .ds-admin-page-actions,
  .ds-admin-page .ds-admin-record-actions,
  .ds-admin-page .ds-admin-dialog-actions {
    justify-content: stretch;
  }

  .ds-admin-page .ds-admin-page-actions .ds-button,
  .ds-admin-page .ds-admin-record-actions .ds-button,
  .ds-admin-page .ds-admin-dialog-actions .ds-button {
    flex: 1 1 100%;
  }

  .ds-admin-page .ds-admin-stat-grid,
  .ds-admin-page [data-admin-view="overview"] .ds-admin-stat-grid,
  .ds-admin-page .ds-admin-toolbar,
  .ds-admin-page .ds-admin-toolbar-compact,
  .ds-admin-page .ds-admin-organization-toolbar,
  .ds-admin-page .ds-admin-user-toolbar,
  .ds-admin-page .ds-admin-pet-toolbar,
  .ds-admin-page .ds-admin-adoption-toolbar,
  .ds-admin-page .ds-admin-lost-pet-toolbar,
  .ds-admin-page .ds-admin-log-toolbar,
  .ds-admin-page .ds-admin-administrator-toolbar,
  .ds-admin-page .ds-admin-directory-toolbar,
  .ds-admin-page .ds-admin-detail-grid,
  .ds-admin-page .ds-admin-permission-grid,
  .ds-admin-page .ds-admin-administrator-field-grid,
  .ds-admin-page .ds-admin-log-change-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-admin-page .ds-admin-record {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-admin-page .ds-admin-organization-record,
  .ds-admin-page .ds-admin-user-record,
  .ds-admin-page .ds-admin-pet-record,
  .ds-admin-page .ds-admin-adoption-record,
  .ds-admin-page .ds-admin-lost-pet-record,
  .ds-admin-page .ds-admin-administrator-record {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .ds-admin-page .ds-admin-organization-record-primary,
  .ds-admin-page .ds-admin-organization-record-copy,
  .ds-admin-page .ds-admin-user-record-primary,
  .ds-admin-page .ds-admin-user-record-copy,
  .ds-admin-page .ds-admin-pet-record-primary,
  .ds-admin-page .ds-admin-pet-record-copy,
  .ds-admin-page .ds-admin-adoption-record-primary,
  .ds-admin-page .ds-admin-adoption-record-copy,
  .ds-admin-page .ds-admin-lost-pet-record-primary,
  .ds-admin-page .ds-admin-lost-pet-record-copy,
  .ds-admin-page .ds-admin-administrator-record-primary,
  .ds-admin-page .ds-admin-administrator-record-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-space-3);
  }

  .ds-admin-page .ds-admin-organization-record-actions,
  .ds-admin-page .ds-admin-user-record-actions,
  .ds-admin-page .ds-admin-pet-record-actions,
  .ds-admin-page .ds-admin-adoption-record-actions,
  .ds-admin-page .ds-admin-lost-pet-record-actions,
  .ds-admin-page .ds-admin-administrator-record-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .ds-admin-page .ds-admin-record-heading,
  .ds-admin-page .ds-admin-organization-record-heading,
  .ds-admin-page .ds-admin-user-record-heading,
  .ds-admin-page .ds-admin-pet-record-heading,
  .ds-admin-page .ds-admin-adoption-record-heading,
  .ds-admin-page .ds-admin-lost-pet-record-heading,
  .ds-admin-page .ds-admin-log-record-heading,
  .ds-admin-page .ds-admin-administrator-record-heading {
    min-width: 0;
    flex-wrap: wrap;
  }

  .ds-admin-page .ds-admin-record-copy,
  .ds-admin-page .ds-admin-record-copy p,
  .ds-admin-page .ds-admin-record-copy span,
  .ds-admin-page .ds-admin-record-meta,
  .ds-admin-page .ds-admin-detail-field,
  .ds-admin-page .ds-admin-detail-field dd,
  .ds-admin-page .ds-admin-result-summary,
  .ds-admin-page pre {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .ds-admin-page .ds-admin-overview-record-button,
  .ds-admin-page .ds-admin-activity-item,
  .ds-admin-page .ds-admin-directory-activity-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-admin-page .ds-admin-activity-time {
    grid-column: auto;
    white-space: normal;
  }

  .ds-admin-page .ds-admin-detail,
  .ds-admin-page .ds-admin-detail-summary,
  .ds-admin-page .ds-admin-directory-dialog .ds-admin-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-admin-page .ds-admin-detail-summary {
    display: grid;
  }

  .ds-admin-page .ds-admin-detail-photo {
    width: 96px;
    height: 96px;
  }

  .ds-admin-page .ds-admin-pet-photo-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-admin-page .ds-admin-dialog {
    width: calc(100% - 16px);
    max-width: none;
    max-height: calc(100dvh - 16px);
    margin: auto;
  }

  .ds-admin-page .ds-admin-dialog .ds-modal-header,
  .ds-admin-page .ds-admin-dialog .ds-modal-footer {
    flex-wrap: wrap;
  }

  .ds-admin-page .ds-admin-dialog .ds-modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .ds-admin-page .ds-admin-dialog .ds-modal-footer {
    gap: var(--ds-space-2);
  }

  .ds-admin-page .ds-admin-dialog .ds-modal-footer .ds-button {
    flex: 1 1 100%;
  }
}

@media (max-width: 520px) {
  .ds-admin-login-page .ds-login-page {
    padding-top: var(--ds-space-4);
    padding-bottom: var(--ds-space-6);
  }

  .ds-admin-login-page .ds-login-shell {
    width: calc(100% - 16px);
  }

  .ds-admin-login-page .ds-login-intro,
  .ds-admin-login-page .ds-login-card {
    padding: var(--ds-space-4);
  }

  .ds-admin-page .ds-admin-sidebar {
    padding: var(--ds-space-3);
  }

  .ds-admin-page .ds-admin-sidebar-heading {
    margin-bottom-bottom: var(--ds-space-3);
  }

  .ds-admin-page .ds-admin-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-2);
    overflow: visible;
    overscroll-behavior-inline: auto;
    scrollbar-width: auto;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .ds-admin-page .ds-admin-nav-button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    flex: none;
    justify-content: flex-start;
    scroll-snap-align: none;
    white-space: normal;
  }

  .ds-admin-page .ds-admin-nav-button .ds-admin-nav-count {
    margin-left: auto;
  }

  .ds-admin-page .ds-admin-stat-grid,
  .ds-admin-page .ds-admin-organization-stats,
  .ds-admin-page .ds-admin-organization-record,
  .ds-admin-page .ds-admin-organization-record-meta,
  .ds-admin-page .ds-admin-organization-detail,
  .ds-admin-page .ds-admin-organization-detail .ds-admin-detail-summary,
  .ds-admin-page .ds-admin-user-record,
  .ds-admin-page .ds-admin-user-record-meta,
  .ds-admin-page .ds-admin-user-detail,
  .ds-admin-page .ds-admin-user-detail .ds-admin-detail-summary,
  .ds-admin-page .ds-admin-pet-record,
  .ds-admin-page .ds-admin-pet-record-meta,
  .ds-admin-page .ds-admin-pet-detail,
  .ds-admin-page .ds-admin-adoption-record,
  .ds-admin-page .ds-admin-adoption-record-meta,
  .ds-admin-page .ds-admin-adoption-detail,
  .ds-admin-page .ds-admin-adoption-detail .ds-admin-detail-summary,
  .ds-admin-page .ds-admin-lost-pet-record,
  .ds-admin-page .ds-admin-lost-pet-record-meta,
  .ds-admin-page .ds-admin-lost-pet-detail,
  .ds-admin-page .ds-admin-lost-pet-detail .ds-admin-detail-summary,
  .ds-admin-page .ds-admin-administrator-record,
  .ds-admin-page .ds-admin-administrator-record-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-admin-page .ds-admin-organization-list-heading,
  .ds-admin-page .ds-admin-user-list-heading,
  .ds-admin-page .ds-admin-pet-list-heading,
  .ds-admin-page .ds-admin-adoption-list-heading,
  .ds-admin-page .ds-admin-lost-pet-list-heading,
  .ds-admin-page .ds-admin-log-list-heading,
  .ds-admin-page .ds-admin-administrator-list-heading,
  .ds-admin-page .ds-admin-directory-list-heading,
  .ds-admin-page .ds-admin-dialog-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .ds-admin-page .ds-admin-organization-record-image,
  .ds-admin-page .ds-admin-user-record-avatar,
  .ds-admin-page .ds-admin-pet-record-image,
  .ds-admin-page .ds-admin-adoption-record-image,
  .ds-admin-page .ds-admin-lost-pet-record-image,
  .ds-admin-page .ds-admin-administrator-record-avatar {
    width: 56px;
    height: 56px;
  }

  .ds-admin-page .ds-admin-organization-detail-photo,
  .ds-admin-page .ds-admin-user-detail-avatar,
  .ds-admin-page .ds-admin-pet-detail-photo,
  .ds-admin-page .ds-admin-adoption-detail-photo,
  .ds-admin-page .ds-admin-lost-pet-detail-photo {
    width: 88px;
    height: 88px;
  }

  .ds-admin-page .ds-admin-pet-photo-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-admin-page .ds-admin-panel-header,
  .ds-admin-page .ds-admin-panel-footer,
  .ds-admin-page .ds-modal-header,
  .ds-admin-page .ds-modal-body,
  .ds-admin-page .ds-modal-footer {
    padding-left: var(--ds-space-4);
    padding-right: var(--ds-space-4);
  }

  .ds-admin-page .ds-admin-account-dropdown {
    position: fixed;
    top: 76px;
    right: 8px;
    left: 8px;
    width: auto;
  }
}