:root {
  --focus-ring: #1769aa;
  --focus-ring-soft: rgba(23, 105, 170, .18);
  --surface-raised: #fff;
}

/* Keep the authentication form centered without allowing the form element to shrink to its content. */
.auth-shell > form { width: min(420px, 100%); }
.auth-panel { width: 100%; max-width: 420px; }
.auth-panel .auth-error { margin-bottom: 16px; }

/* Use one visible keyboard focus treatment across native and custom controls. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.btn { min-height: 38px; line-height: 1.35; }
.btn:disabled { filter: saturate(.7); }

.modal-backdrop,
.drawer-backdrop { overscroll-behavior: contain; }
.modal {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.modal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-raised);
}
.modal-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--surface-raised);
}
.toast {
  border-left: 4px solid var(--green);
  max-width: min(480px, calc(100vw - 40px));
}

.table-wrap {
  position: relative;
  scrollbar-color: #9aa9a2 #eef2f0;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  .content { max-width: none; }
}

@media (max-width: 520px) {
  /* Keep the page header compact; all sections remain reachable by horizontal scrolling. */
  .nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  .nav button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .auth-shell { padding: 16px; }
  .auth-panel { padding: 22px; }
  .modal-backdrop { padding: 8px; }
  .modal { max-height: calc(100vh - 16px); }
  .modal-head, .modal-body, .modal-foot { padding: 13px 14px; }
  .toast {
    right: 8px;
    bottom: 8px;
    max-width: calc(100vw - 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}