:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --ink: #1c2b2d;
  --muted: #6b7a7c;
  --line: #e2ddd3;
  --brand: #13343b;
  --brand-ink: #ffffff;
  --accent: #c4683b;
  --private: #8a4b2f;
  --private-bg: #fbf0e9;
  --ok: #2f7d4f;
  --warn: #b4541f;
  --radius: 14px;
  --pad: 16px;
  color-scheme: light dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  line-height: 1.45;
}

.muted { color: var(--muted); }
.err { color: var(--warn); font-weight: 600; }
[hidden] { display: none !important; }

/* ---------- Passcode gate ---------- */
.gate {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--brand);
  padding: var(--pad);
}
.gate-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 22px;
  width: min(360px, 100%);
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.gate-card h1 { margin: 0 0 4px; letter-spacing: .5px; }
.gate-card input { margin: 16px 0 10px; }

/* ---------- App shell ---------- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 12px) var(--pad) 12px;
  background: var(--brand); color: var(--brand-ink);
}
.brand { font-weight: 700; letter-spacing: .5px; }
.topbar .link { color: var(--brand-ink); opacity: .85; }

.view {
  padding: var(--pad);
  padding-bottom: 96px;
  max-width: 640px;
  margin: 0 auto;
}

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; background: none; border: 0;
  padding: 16px 8px; font-size: 15px; font-weight: 600;
  color: var(--muted);
  /* Kill iOS's double-tap-zoom delay so a single tap registers immediately. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tab.active { color: var(--brand); }

/* ---------- Cards / sections ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.card > h2 { margin: 0 0 4px; font-size: 17px; }
.section-tag {
  display: inline-block; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  padding: 3px 8px; border-radius: 999px; margin-bottom: 8px;
}
.tag-public { background: #e7f0ee; color: var(--brand); }
.tag-private { background: var(--private-bg); color: var(--private); }
.card.private { border-color: #e7cdbe; background: #fffaf6; }

/* ---------- Forms ---------- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }
input, textarea, select {
  width: 100%;
  font: inherit;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
textarea { resize: vertical; min-height: 64px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand); border-color: var(--brand); }

button { cursor: pointer; }
.primary {
  width: 100%;
  background: var(--brand); color: var(--brand-ink);
  border: 0; border-radius: 10px;
  padding: 14px; font-size: 16px; font-weight: 700;
}
.primary:disabled { opacity: .5; }
.secondary {
  width: 100%;
  background: #fff; color: var(--brand);
  border: 1.5px solid var(--brand); border-radius: 10px;
  padding: 13px; font-size: 15px; font-weight: 700;
}
.link { background: none; border: 0; color: var(--brand); font-weight: 600; padding: 8px 0; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.stack > * + * { margin-top: 10px; }

.banner {
  border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600;
}
.banner.private { background: var(--private-bg); color: var(--private); }
.banner.warn { background: #fdecdf; color: var(--warn); }
.banner.ok { background: #e6f3eb; color: var(--ok); }

/* ---------- Voice capture ---------- */
.rec-row { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
#rec-btn { width: auto; padding: 12px 20px; }
#rec-btn.recording { background: var(--warn); color: #fff; border-color: var(--warn); }
.transcript {
  white-space: pre-wrap; word-break: break-word;
  background: #faf8f3; border: 1px dashed var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 14px; margin-top: 8px; color: var(--muted);
}
/* Boxes the app auto-filled from voice — flagged so the operator corrects a
   misread before use. Editing the box clears this (edits win). */
.filled-by-voice {
  background: #fff6ef;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(196, 104, 59, .18);
}

/* ---------- Review: include checkboxes + post co-pilot ---------- */
.include-opts { display: flex; flex-direction: column; gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--ink); }
.check input { width: auto; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.post-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.capture-box { margin-top: 10px; }
.ok { color: var(--ok); font-weight: 600; }

/* ---------- Photos ---------- */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* ---------- Review layout (wide screens get a photo rail on the right) ---------- */
.view.review-wide { max-width: 1040px; }
.review-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 900px) {
  .review-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .review-photos .card { position: sticky; top: 76px; }
}
.review-main { min-width: 0; }
.review-photos { min-width: 0; }

.photo-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.photo-grid a { display: block; line-height: 0; }
.photo-grid img {
  width: 200px; height: 200px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); background: #faf8f3;
}
@media (max-width: 480px) { .photo-grid img { width: 44vw; height: 44vw; } }

/* The AI description is the longest field — give it real room and let JS grow
   it to fit, so the phone doesn't cram it into a two-line scroller. */
#rv-description { min-height: 150px; line-height: 1.5; }

.listing-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.state-pill {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.state-pill.draft { background: #eee; color: #555; }
.state-pill.approved { background: #e6f3eb; color: var(--ok); }
.state-pill.none { background: var(--private-bg); color: var(--private); }

/* ---------- Search / dashboard ---------- */
.searchbar { position: sticky; top: 60px; z-index: 4; background: var(--bg); padding-bottom: 8px; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.filters .full { grid-column: 1 / -1; }

.result {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
  width: 100%; text-align: left;
}
.result .meta { flex: 1; min-width: 0; }
.result .title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result .sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result .price { font-weight: 700; color: var(--accent); }

.chip {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.chip.draft { background: #eee; color: #555; }
.chip.listed { background: #e3eef9; color: #1f5fa6; }
.chip.pending_pickup { background: #fdf0d8; color: #9a6b16; }
.chip.sold { background: #e6f3eb; color: var(--ok); }
.chip.archived { background: #efe7e2; color: #7a5a48; }

.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.packet-out {
  white-space: pre-wrap; word-break: break-word;
  background: #faf8f3; border: 1px dashed var(--line); border-radius: 10px;
  padding: 12px; font-size: 14px; margin-top: 10px;
}
.spinner { text-align: center; color: var(--muted); padding: 20px; }

/* ---------- Dark theme (auto: follows the device's dark mode) ----------
   Warm dark to match the light theme's warmth; the green header and orange
   accent are kept as-is. Only colors change here — never layout. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14120e;
    --surface: #211d17;
    --ink: #ece5d8;
    --muted: #9c9280;
    --line: #37312a;
    --brand: #13343b;      /* header green — unchanged */
    --brand-ink: #ffffff;
    --accent: #d07a4a;     /* nudged brighter so it reads on dark */
    --private: #d79c78;
    --private-bg: #2a1f18;
    --ok: #6cc389;
    --warn: #e08a5b;
  }

  input, textarea, select { background: #1b1811; color: var(--ink); }
  input:focus, textarea:focus, select:focus { outline-color: var(--accent); border-color: var(--accent); }

  .card.private { border-color: #4a3423; background: #221812; }
  .tag-public { background: #172a2a; color: #86b4ae; }

  /* Outline button + active tab: brand green is too dark on a dark surface. */
  .secondary { background: transparent; color: #8fb9b3; border-color: #2f5b62; }
  .tab.active { color: #86b4ae; }

  .banner.warn { background: #3a241a; color: #e8a074; }
  .banner.ok { background: #1c3125; color: #82d1a0; }

  .chip.draft { background: #2c2c2c; color: #cbcbcb; }
  .chip.listed { background: #1c2c3c; color: #8fb8e0; }
  .chip.pending_pickup { background: #342a15; color: #d8b46a; }
  .chip.sold { background: #1c3125; color: #82d1a0; }
  .chip.archived { background: #2e251f; color: #c2a893; }

  .state-pill.draft { background: #2c2c2c; color: #cbcbcb; }
  .state-pill.approved { background: #1c3125; color: #82d1a0; }

  .packet-out { background: #1b1811; }
  .photo-grid img { background: #1b1811; }

  .transcript { background: #1b1811; }
  .filled-by-voice { background: #2a1f18; box-shadow: 0 0 0 2px rgba(208, 122, 74, .25); }
}