/* Cape Coral Lots POC — mobile-first
   Breakpoints marked: bp: 320 / 375 / 768 / 1024 / 1440
   No horizontal overflow. Long labels and filenames wrap. */
:root {
  --bg:#f7f5f0; --panel:#ffffff; --ink:#303a38; --muted:#63736c;
  --accent:#426a56; --danger:#b13e39; --border:#e3ded4;
}
* { box-sizing: border-box; min-width: 0; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink); background: var(--bg);
  overflow-x: hidden;
}
.demo-banner {
  background:#f59e0b; color:#111; text-align:center; padding:.5rem; font-weight:600;
  font-size: .875rem;
}
.app-header {
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.75rem 1rem; border-bottom:1px solid var(--border);
  position: sticky; top:0; background:var(--panel); z-index: 10;
}
.brand { color:var(--ink); text-decoration:none; font-weight:700; }
.nav-toggle { margin-left:auto; background:transparent; color:var(--ink); border:1px solid var(--border); border-radius:6px; padding:.4rem .6rem; }
.app-nav { display:none; flex-direction:column; width:100%; gap:.25rem; margin-top:.5rem; }
.app-nav.open { display:flex; }
.app-nav a { color:var(--ink); text-decoration:none; padding:.5rem; border-radius:6px; }
.app-nav a:hover { background:var(--border); }
.app-main { padding:1rem; display:grid; gap:1rem; min-width:0; }
.app-footer { padding:1rem; color:var(--muted); text-align:center; font-size:.8rem; }

.card {
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:1rem; min-width:0; overflow-wrap:anywhere;
}
.page-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; }
.page-head h1 { margin:0; font-size:1.4rem; }
.grid { display:grid; gap:1rem; min-width:0; }
.grid.cols-2 { grid-template-columns: minmax(0,1fr); }
.kv { list-style:none; margin:0; padding:0; display:grid; gap:.25rem; }
.kv li { display:flex; justify-content:space-between; gap:.5rem; border-bottom:1px dashed var(--border); padding:.25rem 0; }
.list { list-style:none; margin:0; padding:0; display:grid; gap:.25rem; }
.list li { padding:.4rem 0; border-bottom:1px dashed var(--border); min-width:0; }
.filename, .wrap { overflow-wrap:anywhere; word-break:break-word; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.help { color:var(--muted); font-size:.85rem; margin:.15rem 0 .35rem; }
.req { color:var(--danger); margin-left:.15rem; }

.field { display:flex; flex-direction:column; min-width:0; }
.field label { font-weight:600; margin-bottom:.25rem; overflow-wrap:anywhere; }
.field input, .field select, .field textarea {
  width:100%; min-width:0; padding:.5rem; border-radius:8px;
  border:1px solid var(--border); background:#fff; color:var(--ink);
}
.field input[type=file] { padding:.25rem; }
.actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem; border-radius:8px; border:1px solid var(--border);
  background:#e8dfd0; color:var(--ink); cursor:pointer; font-weight:600;
  min-height: 44px;
}
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn:focus { outline:2px solid #b69a63; outline-offset:2px; }
.table { width:100%; border-collapse:collapse; table-layout:fixed; }
.table th, .table td { text-align:left; padding:.5rem; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.stack > * + * { margin-top:.75rem; }
fieldset.card { margin:0; } legend { font-weight:700; padding:0 .25rem; }
.timeline { padding-left:1rem; display:grid; gap:.25rem; }

/* bp: 375 (small phone) */
@media (min-width: 375px) { .app-main { padding:1.25rem; } }

/* bp: 768 (tablet) */
@media (min-width: 768px) {
  .app-nav { display:flex; flex-direction:row; width:auto; margin-top:0; }
  .nav-toggle { display:none; }
  .grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .app-main { padding:1.5rem; max-width:1100px; margin:0 auto; width:100%; }
}

/* bp: 1024 (desktop) */
@media (min-width: 1024px) {
  .app-main { max-width:1200px; }
  .grid.cols-2 { gap:1.25rem; }
}

/* bp: 1440 (wide) */
@media (min-width: 1440px) { .app-main { max-width:1320px; } }

/* Release 4H: warm coastal real-estate workspace */
.app-header {box-shadow:0 2px 12px #243e3020;}
.brand {font-size:1.12rem;letter-spacing:.01em;}
.card {box-shadow:0 3px 18px #243e300b;}
a {color:#426a56;}
.btn:hover {filter:brightness(.94);}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible {outline:2px solid #b69a63;outline-offset:1px;}
@media (min-width:768px) {.app-header {justify-content:space-between}.app-nav {flex-wrap:wrap;align-items:center;}}