/* ===================================================================
   Phase 19 — responsive contract, typography, a11y, print
   =================================================================== */

/* Base typography (19.6) */
html { -webkit-text-size-adjust: 100%; }
body { font-size: 14px; line-height: 1.55; overflow-x: hidden; }
table td, table th { font-size: 13px; }
table td { padding-top: 0.7rem; padding-bottom: 0.7rem; }
p { line-height: 1.6; }

/* 16px inputs stop iOS auto-zoom; 44px touch targets (19.1) */
.input, input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"], input[type="time"],
input[type="search"], input[type="url"], select, textarea { font-size: 16px; }
@media (min-width: 1024px) {
  .input, select.input, input.input, textarea.input { font-size: 14px; }
}
.btn-primary, .btn-outline, .btn-ghost { min-height: 44px; }
@media (max-width: 1023px) {
  main button, header button, header a[aria-label], .touch-target { min-height: 44px; }
  header button, header a[aria-label] { min-width: 44px; }
  #app-sidebar nav a { min-height: 44px; }
}

/* Visible focus ring everywhere (19.7). */
:focus-visible { outline: 3px solid #1B4FFF; outline-offset: 2px; }
#app-sidebar :focus-visible { outline-color: #9DB8FF; }
.input:focus-visible { outline: 2px solid #1B4FFF; outline-offset: 1px; }

/* Skip link */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: #0D2080; color: #fff; padding: 10px 16px; border-radius: 8px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* Off-canvas drawer below lg (19.1) */
.app-sidebar { transition: transform .2s ease; }
@media (max-width: 1023px) {
  .app-sidebar { transform: translateX(-100%); visibility: hidden; }
  .app-sidebar.is-open { transform: translateX(0); visibility: visible; }
}
.app-backdrop { display: none; }
@media (max-width: 1023px) {
  .app-backdrop.is-open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 25; }
}
@media (prefers-reduced-motion: reduce) { .app-sidebar { transition: none; } }

/* Never let wide content stretch the page (19.1) */
main, .app-main { min-width: 0; max-width: 100vw; }
main img, main svg, main canvas { max-width: 100%; }
main pre { overflow-x: auto; }
.chart-box { width: 100%; min-width: 0; }

/* Login pages: card scrolls inside the viewport (19.3) */
.login-shell { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center;
  justify-content: center; padding: 16px; overflow-y: auto; }
.login-card { width: 100%; max-width: 28rem; padding: 24px; }
@media (min-width: 640px) { .login-card { padding: 40px; } }

/* Badges (19.4) */
.ui-badge { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 10px;
  border-radius: 9999px; border: 1px solid currentColor; line-height: 1.3; }

/* Print (19.10) */
@media print {
  aside, header, nav, form, button, .no-print, .app-backdrop, .skip-link,
  [data-no-print] { display: none !important; }
  body, main { background: #fff !important; color: #000 !important; }
  .app-main { margin-left: 0 !important; }
  .overflow-x-auto, .overflow-y-auto, .overflow-auto { overflow: visible !important; }
  .hidden.md\:block { display: block !important; }
  .md\:hidden { display: none !important; }
  * { box-shadow: none !important; }
  a[href^="http"]:after, a[href^="/"]:after { content: " (" attr(href) ")"; font-size: 11px; }
  a[href^="#"]:after, a[href^="javascript"]:after { content: ""; }
}

/* Admin portal pages: collapse multi-column grids on phones through shared CSS
   (page templates are owned by Phase 18). */
@media (max-width: 639px) {
  .admin-main .grid-cols-4, .admin-main .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-main .grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
  .admin-main table { font-size: 13px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }