/* Move In / Move Out Documentation - app.css - no external fonts or assets
   Responsive: mobile first, then tablet, then desktop. No layout should
   overflow horizontally on a phone, and no tap target should be tiny. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #17202a; background: #eef2f5; line-height: 1.5; font-size: 16px; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px 32px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.topbar { background: #12324f; color: #fff; padding: 20px 0 16px; margin-bottom: 18px; }
.topbar-inner { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding-bottom: 0; }
.topbar h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.2; }
.subtitle { margin: 0; opacity: .9; }
.privacy-badge { background: #1e7a4c; border-radius: 10px; padding: 10px 14px; font-size: 14px; min-width: 230px; }
h2 { font-size: 24px; margin: 8px 0 8px; line-height: 1.25; }
h3 { font-size: 18px; margin: 0 0 10px; line-height: 1.3; }
.muted { color: #5a6b7a; }
.small { font-size: 14px; }
.card { background: #fff; border: 1px solid #d7dee5; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 10px; }
/* 16px inputs: stops iOS Safari zooming in on focus, keeps forms usable */
label input, label select, label textarea, .grid3 input, .item-top input, .item-top select { display: block; width: 100%; margin-top: 4px; padding: 11px 10px; border: 1px solid #b9c4ce; border-radius: 8px; font: inherit; font-size: 16px; font-weight: 400; background: #fff; min-height: 44px; }
textarea { resize: vertical; }
.btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #12324f; background: #fff; color: #12324f; padding: 11px 14px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; min-height: 44px; text-align: center; }
.btn.primary { background: #12324f; color: #fff; }
.btn.danger-outline { border-color: #a93226; color: #a93226; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.file-btn { cursor: pointer; }
/* Tabs: sticky on screen so phone users can jump sections without scrolling back */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; position: sticky; top: 0; z-index: 20; background: #eef2f5; padding: 8px 0; }
.tab { border: 1px solid #b9c4ce; background: #fff; padding: 10px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; white-space: nowrap; }
.tab.active { background: #12324f; color: #fff; border-color: #12324f; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.progress-card { background: #fff; border: 1px solid #d7dee5; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.progress-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.progress-bar { height: 12px; background: #dde6ec; border-radius: 999px; overflow: hidden; margin: 8px 0; }
#progressFill { height: 100%; width: 0%; background: #1e7a4c; transition: width .3s; }
.room-card { background: #fff; border: 1px solid #d7dee5; border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.room-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 14px 16px; background: #f4f7f9; cursor: pointer; min-height: 56px; }
.room-head h3 { margin: 0; }
.room-body { padding: 16px; display: none; }
.room-body.open { display: block; }
.badge { display: inline-block; background: #eaf2f8; border-radius: 999px; padding: 3px 9px; font-size: 13px; margin-right: 6px; margin-top: 4px; }
.badge.bad { background: #fdecea; color: #922b21; }
.item-row { border-top: 1px solid #e3e9ee; padding: 12px 0; }
.item-top { display: grid; grid-template-columns: 1.4fr 1fr 2fr auto; gap: 10px; align-items: start; }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.thumb { flex: 0 1 130px; max-width: 160px; }
.thumb img { width: 100%; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid #ccc; display: block; }
.thumb input { width: 100%; font-size: 14px; padding: 8px; margin-top: 4px; min-height: 40px; }
.thumb button { font-size: 14px; margin-top: 4px; min-height: 40px; width: 100%; }
.sig { width: 100%; max-width: 520px; height: 160px; border: 1px solid #333; border-radius: 8px; background: #fff; touch-action: none; display: block; }
.checklist li { margin-bottom: 6px; }
table.print-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.print-table th, table.print-table td { border: 1px solid #999; padding: 6px; text-align: left; vertical-align: top; }
#printArea { display: none; }

/* TABLET: 761px to 1024px - two columns where they fit, stacked checklists */
@media (max-width: 1024px) {
  .wrap { max-width: 100%; }
  .topbar h1 { font-size: 26px; }
  .grid2 { grid-template-columns: 1fr 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .grid3 .btn { grid-column: span 2; }
  .item-top { grid-template-columns: 1fr 1fr; }
  .item-top > div:first-child { grid-column: span 2; }
  .item-top > div:last-child { grid-column: span 2; }
  .item-top > div:last-child .btn { width: 100%; }
  .thumb { flex: 1 1 140px; }
}

/* MOBILE: up to 760px - one column everywhere, horizontal tab scroll, full-width actions */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding-left: 12px; padding-right: 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .topbar { padding-top: 16px; }
  .topbar-inner { flex-direction: column; }
  .topbar h1 { font-size: 24px; }
  .privacy-badge { min-width: 0; width: 100%; }
  h2 { font-size: 22px; }
  .card, .progress-card { padding: 14px; }
  .grid2, .grid3, .item-top { grid-template-columns: 1fr; }
  .grid3 .btn { grid-column: auto; width: 100%; }
  .item-top > div:first-child, .item-top > div:last-child { grid-column: auto; }
  .item-top > div:last-child .btn { width: 100%; }
  /* Tabs become a single swipeable row instead of wrapping into a tall block */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 8px 2px; margin-left: -4px; margin-right: -4px; }
  .tab { flex: 0 0 auto; }
  .toolbar .btn, .toolbar .file-btn { flex: 1 1 100%; }
  .room-head { padding: 14px; align-items: flex-start; }
  .room-head h3 { font-size: 17px; }
  .room-body { padding: 14px; }
  .thumbs { gap: 8px; }
  .thumb { flex: 1 1 calc(50% - 8px); max-width: calc(50% - 4px); }
  .thumb img { height: 110px; }
  .sig { height: 180px; }
  .progress-row { flex-direction: column; gap: 2px; }
}

/* SMALL PHONES: up to 380px - keep headings and badges from overflowing */
@media (max-width: 380px) {
  .topbar h1 { font-size: 21px; }
  h2 { font-size: 20px; }
  .thumb { flex: 1 1 100%; max-width: 100%; }
  .thumb img { height: 150px; }
}

/* LARGE DESKTOP: wider, calmer layout without stretching lines too far */
@media (min-width: 1280px) {
  .wrap { max-width: 1160px; }
}

/* LANDSCAPE PHONES: shorter signature pad so it fits above the fold */
@media (max-height: 500px) and (orientation: landscape) {
  .sig { height: 130px; }
}

@media print {
  body { background: #fff; font-size: 13px; }
  .no-print, footer.no-print { display: none !important; }
  #printArea { display: block !important; }
  .wrap { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
  .print-page-break { break-before: page; page-break-before: always; }
  .print-photo { break-inside: avoid; page-break-inside: avoid; }
  .print-photo img { max-width: 100%; }
}

/* v1.1 accessibility toggles - browser only, do not affect the printed report */
body.large-text { font-size: 19px; }
body.large-text .small { font-size: 16px; }
body.high-contrast { background: #fff; color: #000; }
body.high-contrast .card, body.high-contrast .progress-card, body.high-contrast .room-card { border-color: #000; }
body.high-contrast .btn { border-color: #000; color: #000; }
body.high-contrast .btn.primary { background: #000; color: #fff; }
body.high-contrast .topbar { background: #000; }