/* Loaded after page styles so narrow-screen fixes cannot be undone by desktop rules. */
.mobile-account-toggle { display: none; }
.sidebar { height: 100vh; height: 100dvh; }
.sidebar-head, .sidebar-status { flex-shrink: 0; }
.primary-nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  .app-shell, .workspace { min-width: 0; min-height: 100dvh; }
  .workspace-topbar {
    height: auto;
    min-height: 60px;
    gap: 12px;
    padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  }
  .topbar-leading { min-width: 0; gap: 10px; }
  .workspace-context { min-width: 0; }
  .workspace-context > strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { position: relative; flex-shrink: 0; gap: 0; }
  .sidebar-open, .sidebar-close { flex: 0 0 44px; width: 44px; min-height: 44px; }
  .sidebar-open::before, .sidebar-open::after, .sidebar-open span { left: 12px; width: 18px; }
  .sidebar-open::before { top: 14px; }
  .sidebar-open span { top: 21px; }
  .sidebar-open::after { top: 28px; }
  .sidebar-close::before, .sidebar-close::after { left: 13px; top: 21px; width: 18px; }
  .mobile-account-toggle { display: inline-flex; width: auto; min-width: 72px; min-height: 44px; align-items: center; justify-content: center; gap: 8px; font-size: 14px; }
  .account-menu { display: none; position: absolute; top: calc(100% + 7px); right: 0; width: min(240px, calc(100vw - 24px)); padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 30px #11182026; }
  .account-menu.is-open { display: grid; gap: 0; }
  .account-menu > span { display: block; padding: 8px 12px; overflow-wrap: anywhere; }
  .account-menu a { display: flex; align-items: center; min-height: 44px; border: 0; padding: 10px 12px; font-size: 14px; }
  .sidebar { width: min(300px, calc(100vw - 48px)); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); visibility: hidden; }
  .sidebar-visible .sidebar { visibility: visible; }
  .sidebar .primary-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .sidebar-status { margin-bottom: 12px; padding-top: 12px; }
  body.sidebar-visible { position: fixed; top: var(--sidebar-scroll-top, 0px); left: 0; right: 0; width: 100%; }
  .sidebar-scrim { height: 100vh; height: 100dvh; min-height: 0; touch-action: none; }
  .page { min-width: 0; padding: 20px max(14px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) { min-width: 0; max-width: 100%; font-size: 16px; }
  main :is(button, .button, .row-action) { min-height: 44px; font-size: 14px; }
  main summary { min-height: 44px; }
  .command-header p, .section-heading p, .team-directory-muted, .team-domain-overview small { font-size: 13px; line-height: 1.65; }
  .control-section, .panel, .section-heading, .source-section .table-scroll { min-width: 0; max-width: 100%; }
  .source-section .source-table { width: 100%; max-width: 100%; min-width: 0; }
  .source-table :is(tbody, tr, td) { max-width: 100%; }
  .source-table td { white-space: normal; overflow-wrap: anywhere; }
  .source-table td > * { min-width: 0; max-width: 100%; }
  .source-table td strong, .source-table td code { white-space: normal; overflow-wrap: anywhere; }
  .table-scroll, .data-table-scroll, .migration-table-wrap { max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  body[data-endpoint="admin_teams"] .package-assignment-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-endpoint="admin_teams"] .package-assignment-summary > div { min-width: 0; padding: 12px 10px; overflow-wrap: anywhere; }
  body[data-endpoint="admin_teams"] .package-assignment-summary > div + div { border-top: 0; border-left: 1px solid var(--line); }
  body[data-endpoint="admin_teams"] .package-assignment-summary .row-action { font-size: 12px; white-space: normal; }
  body[data-endpoint="admin_teams"] .command-header > .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body[data-endpoint="admin_teams"] .command-header > .actions > :last-child { grid-column: 1 / -1; }
  .team-role-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .team-role-navigation .button { padding-inline: 8px; white-space: normal; text-align: center; }
  .probe-readout > span, .probe-readout time, .node-row-identity small { font-size: 12px; line-height: 1.6; }
  .team-directory-row > .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 8px; }
  .team-directory-row > .actions > :first-child { grid-column: 1 / -1; }
  .team-directory-row > .actions .button { width: 100%; white-space: normal; text-align: center; padding-inline: 8px; }
  .team-directory-controls > details > summary { min-height: 44px; padding: 11px 12px; font-size: 14px; }
  .node-metrics, .ops-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-metrics > div { min-width: 0; padding: 14px 10px; overflow-wrap: anywhere; }
  .account-metrics > div + div { border-top: 0; border-left: 1px solid var(--line); }
  .account-metrics > div:nth-child(3) { border-top: 0; }
  .account-metrics strong { font-size: 21px; }
  .account-metrics small { font-size: 12px; }
  [id] { scroll-margin-top: calc(76px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 359px) {
  .account-metrics { grid-template-columns: 1fr; }
  .account-metrics > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .account-metrics > div:nth-child(3) { border-top: 1px solid var(--line); }
  .source-table td { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
}

/* The fixed sidebar leaves less content width just above the phone breakpoint. */
@media (min-width: 761px) and (max-width: 1040px) {
  .team-directory-row-with-domains { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .team-directory-row-with-domains > * { min-width: 0; }
  .team-directory-row-with-domains .team-domain-overview { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--line); }
  .source-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-create-form > label, .source-create-form input { min-width: 0; }
}

/* Real capacity snapshots must also fit beside the persistent tablet sidebar. */
@media (min-width: 761px) and (max-width: 1220px) {
  .capacity-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; }
  .capacity-row > * { min-width: 0; overflow-wrap: anywhere; }
  .capacity-meter > div { flex-wrap: wrap; }
  .capacity-forecast { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: 14px 0 0; }
}