/* Boca's Best Handyman app — layout and components. Brand values live in theme.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--body);
  font: 400 16px/1.5 var(--font-body);
}
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); margin: 0; }
h1 { font-size: 30px; line-height: 1.08; font-weight: 900; letter-spacing: -0.02em; }
a { color: var(--blue); }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.topbar :focus-visible, .tabbar :focus-visible { outline-color: var(--gold); }
code { font-size: 14px; background: var(--sand); padding: 1px 6px; border-radius: var(--radius-sm); }
[hidden] { display: none !important; }

.ico { width: 22px; height: 22px; flex: none; vertical-align: -5px; }
.muted { color: var(--muted); }
.tiny { font-size: 14px; }
.pad { padding: 8px 0; }

/* ---------- shell ---------- */
.demo-bar { background: var(--highlight-bg); color: var(--highlight-ink); font-weight: 600; font-size: 14px; text-align: center; padding: 8px 16px; }
.demo-bar a { color: var(--highlight-ink); display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
.demo-bar { padding-top: 2px; padding-bottom: 2px; }
.topbar { background: var(--navy); display: flex; align-items: center; gap: 24px; padding: 8px 16px; position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; min-height: var(--tap-min); }
.brand img { height: 40px; width: auto; display: block; }
.sidenav { display: none; }
main { outline: none; padding-bottom: 96px; }
.page { max-width: 880px; margin: 0 auto; padding: 20px 16px; }
.page.narrow { max-width: 640px; }

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--navy); padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px;
  color: var(--on-navy-muted); text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.tabbar a[aria-current] { color: var(--white); box-shadow: inset 0 3px 0 var(--gold); }

@media (min-width: 900px) {
  .tabbar { display: none; }
  main { padding-bottom: 40px; }
  .sidenav { display: flex; gap: 4px; margin-left: auto; }
  .sidenav a {
    display: flex; align-items: center; gap: 8px; min-height: var(--tap-min); padding: 0 14px; border-radius: var(--radius-md);
    color: var(--on-navy-muted); text-decoration: none; font-weight: 700; font-size: 15px;
  }
  .sidenav a:hover { color: var(--white); background: var(--navy-raised); }
  .sidenav a[aria-current] { color: var(--navy); background: var(--gold); }
  .page { padding: 32px 24px; }
}

/* ---------- headings ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 20px; flex-wrap: wrap; }
.section-label { margin: 0 0 6px; color: var(--blue); font: 700 13px/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.h-sec { font-size: 20px; font-weight: 800; margin: 28px 0 12px; display: flex; align-items: center; gap: 10px; }
.h-card { font-size: 18px; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.h-sub { font: 700 14px/1.3 var(--font-body); color: var(--muted); margin: 16px 0 6px; text-transform: uppercase; letter-spacing: 0.08em; }
.h-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.h-row .h-card { margin: 0; }
.count { font: 700 14px/1 var(--font-body); color: var(--muted); }
.back { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap-min); font-weight: 700; text-decoration: none; }
.day-label { font: 700 13px/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 14px 0 2px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--button-min); padding: 0 20px;
  border-radius: var(--radius-md); border: 2px solid transparent; font: 800 16px/1.2 var(--font-body); text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover { background: #F5BB12; color: var(--navy); }
.btn-dark { background: var(--navy); color: var(--white); }
.btn-dark:hover { background: var(--navy-raised); color: var(--white); }
.btn-outline { background: var(--white); color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--sand); color: var(--navy); }
.btn-ghost { background: transparent; color: var(--blue); padding: 0 10px; }
.btn-ghost:hover { background: var(--blue-tint); }
.btn-ghost.danger { color: var(--note); }
.btn-sm { min-height: var(--tap-min); padding: 0 14px; font-size: 15px; }
.btn-block { width: 100%; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border: 0; background: transparent; color: var(--muted); border-radius: var(--radius-md); cursor: pointer; }
.icon-btn:hover { background: var(--sand); color: var(--navy); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.file-btn { cursor: pointer; }
.mini-select { min-height: var(--tap-min); border: 1.5px solid var(--input-border); border-radius: var(--radius-md); padding: 0 10px; font: 600 16px var(--font-body); color: var(--navy); background: var(--white); }

/* ---------- cards, lists ---------- */
.card { display: block; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 20px; margin-bottom: 16px; color: var(--body); text-decoration: none; }
a.card:hover { border-color: var(--input-border); color: var(--body); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack .card { margin: 0; }
.list { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.list.flush { border: 0; border-radius: 0; margin: 0 -20px -8px; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 20px;
  border-top: 1px solid var(--border); color: var(--body); text-decoration: none;
}
.row:first-child { border-top: 0; }
a.row:hover { background: var(--cream); color: var(--body); }
.row > div:first-child, .row .row-ico + div { display: flex; flex-direction: column; min-width: 0; }
.row strong { color: var(--ink); }
.row .muted { font-size: 14px; }
.row > .ico:last-child { color: var(--muted); }
.row-end { display: flex; align-items: center; gap: 10px; flex: none; }
.row-ico { color: var(--blue); }

.alert-card { display: flex; align-items: center; gap: 14px; background: var(--highlight-bg); border-color: #F2DFA6; }
.alert-card > div { display: flex; flex-direction: column; flex: 1; }
.alert-card strong { color: var(--ink); }
.alert-card .ico:first-child { color: var(--highlight-ink); }
.note-card { background: var(--sand); }
.note-box { background: var(--sand); border-radius: var(--radius-lg); padding: 12px 14px; margin: 12px 0 0; white-space: pre-line; }

.job-card { display: flex; gap: 14px; align-items: flex-start; }
.job-time { display: flex; flex-direction: column; flex: none; width: 128px; padding-right: 12px; border-right: 1px solid var(--border); }
.job-time strong { color: var(--ink); font-family: var(--font-display); font-weight: 800; white-space: nowrap; }
.job-time span { font-size: 14px; color: var(--muted); }
.job-main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.job-main strong { color: var(--ink); font-size: 17px; }
.job-main .muted { font-size: 14px; display: flex; gap: 4px; align-items: center; }
.job-main .ico { width: 16px; height: 16px; vertical-align: 0; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, 1fr); } .stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { min-width: 0; }
.stat strong { overflow-wrap: anywhere; } .stats-2 { grid-template-columns: repeat(2, 1fr); } }
.stats-3 { grid-template-columns: repeat(3, 1fr); }
.stat { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.stat span { font: 700 13px/1.3 var(--font-body); color: var(--muted); }
.stat strong { font: 900 26px/1.1 var(--font-display); color: var(--ink); }
.stat small { font-size: 13px; color: var(--muted); }

.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.dl dt { color: var(--muted); font-weight: 600; font-size: 15px; }
.dl dd { margin: 0; color: var(--ink); }
.prop { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.prop:first-of-type { border-top: 0; }
.prop > div:first-child { display: flex; flex-direction: column; }
.prop strong { color: var(--ink); }
.log { margin: 0; padding-left: 18px; }

/* ---------- tags ---------- */
.tag { display: inline-flex; align-items: center; border-radius: var(--radius-sm); padding: 3px 8px; font: 800 12px/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.tag-paid { background: var(--paid-bg); color: var(--paid-ink); }
.tag-unpaid { background: var(--highlight-bg); color: var(--highlight-ink); }
.tag-overdue { background: var(--overdue-bg); color: var(--overdue-ink); }
.tag-info { background: var(--blue-tint); color: var(--blue); }
.tag-muted { background: var(--sand); color: var(--muted); }
.tag-lg { font-size: 15px; padding: 8px 14px; }
.lines .tag { margin-left: 8px; }

/* ---------- chips / search ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--white); color: var(--navy); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.chip[aria-current] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.chip[aria-current] .count { color: var(--on-navy-muted); }
.search { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1.5px solid var(--input-border); border-radius: var(--radius-md); padding: 0 12px; margin-bottom: 14px; color: var(--muted); }
.search input { border: 0; outline: none; flex: 1; min-width: 0; width: 100%; min-height: var(--tap-min); font: 16px var(--font-body); background: transparent; color: var(--ink); }
.search:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font: 600 14px/1.35 var(--font-body); color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--tap-min); border: 1.5px solid var(--input-border); border-radius: var(--radius-md);
  padding: 10px 12px; font: 16px/1.35 var(--font-body); color: var(--ink); background: var(--white);
}
.field textarea { resize: vertical; }
.check { display: flex; gap: 10px; align-items: center; min-height: var(--tap-min); font-weight: 600; color: var(--ink); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--navy); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.field { min-width: 0; }
/* iPhone Safari gives date/time boxes a minimum width that spills into the next column */
.field input[type=date], .field input[type=time] {
  -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left;
}
.field input::-webkit-date-and-time-value { text-align: left; }
@media (max-width: 599px) {
  .grid2:has(input[type=date]), .grid2:has(input[type=time]) { grid-template-columns: minmax(0, 1fr); }
}
.fs { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px 0; margin: 0 0 14px; }
.fs legend { font: 700 14px var(--font-body); color: var(--ink); padding: 0 6px; }
.form-error { background: var(--overdue-bg); color: var(--note); border-radius: var(--radius-md); padding: 10px 12px; font-weight: 600; }

/* ---------- sheets (dialogs) ---------- */
.sheet-wrap { position: fixed; inset: 0; background: rgba(15, 42, 74, 0.45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--cream); width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.sheet-wide { max-width: 760px; }
@media (min-width: 700px) { .sheet-wrap { align-items: center; } .sheet { border-radius: var(--radius-xl); } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 4px 20px; }
.sheet-head h2 { font-size: 22px; font-weight: 800; }
.sheet-body { padding: 12px 20px; overflow-y: auto; }
.sheet-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--white); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

/* ---------- job screen ---------- */
.visit-when { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.visit-when .ico { color: var(--blue); margin-top: 2px; }
.visit-when div { display: flex; flex-direction: column; }
.visit-when strong { color: var(--ink); font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.visit-who { display: flex; flex-direction: column; gap: 6px; }
.visit-who a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.gate summary { cursor: pointer; color: var(--blue); font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.gate p { margin: 0; font-weight: 700; color: var(--ink); background: var(--highlight-bg); padding: 8px 12px; border-radius: var(--radius-md); }
.arrival { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: var(--radius-lg); }
.arrival.ok { background: var(--paid-bg); color: var(--paid-ink); }
.arrival.late { background: var(--overdue-bg); color: var(--note); }
.checks { list-style: none; margin: 0; padding: 0; counter-reset: chk; }
.chk { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); counter-increment: chk; }
.chk:first-child { border-top: 0; }
.chk-item { color: var(--ink); font-size: 15px; }
.chk-item::before { content: counter(chk) ". "; font-weight: 800; color: var(--muted); }
.chk-item .muted { display: block; }
.chk.attention .chk-item { font-weight: 700; }
.chk .muted { font-size: 14px; font-weight: 400; }
.seg { display: inline-flex; border: 1.5px solid var(--input-border); border-radius: var(--radius-md); overflow: hidden; flex: none; }
.seg button { min-height: 44px; min-width: 48px; border: 0; border-left: 1px solid var(--input-border); background: var(--white); color: var(--navy); font: 700 14px var(--font-body); cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.chk.attention .seg button[aria-pressed="true"] { background: var(--gold); color: var(--navy); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 6px; }
.photos-sm { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.ph { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--sand); cursor: pointer; min-height: 44px; }
.ph img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.ph:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ph-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; font: 600 12px/1.25 var(--font-body); color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(15, 42, 74, 0.85)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-group { padding: 10px 0 12px; border-top: 1px solid var(--border); }
.ph-group:first-of-type { border-top: 0; }
.ph-group .h-row { align-items: center; margin: 0; }
.ph-group .h-sub { margin: 4px 0; }
.ph-group .h-sub a { color: var(--navy); text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; min-height: 44px; }
.ph-full { display: block; width: 100%; max-height: 52vh; object-fit: contain; background: var(--navy); border-radius: var(--radius-md); }
.seg-wide { display: flex; width: 100%; }
.seg-opt { flex: 1; position: relative; border-left: 1px solid var(--input-border); }
.seg-opt:first-child { border-left: 0; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt span { display: flex; align-items: center; justify-content: center; min-height: 44px; background: var(--white); color: var(--navy); font: 700 15px var(--font-body); }
.seg-opt input:checked + span { background: var(--navy); color: var(--white); }
.seg-opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: -3px; }
.ba { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px; margin-top: 8px; }
.ba-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ba-imgs figure { margin: 0; position: relative; }
.ba-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: var(--radius-md); }
.ba-imgs figcaption { position: absolute; top: 6px; left: 6px; padding: 3px 9px; border-radius: 999px; font: 800 12px var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; background: var(--navy); color: #fff; }
.ba-imgs figure + figure figcaption { background: var(--gold); color: var(--navy); }
.ba-cap { margin: 6px 2px 0; font-weight: 700; }
.ba .actions { margin-top: 8px; }
@media (min-width: 600px) { .photos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }

/* ---------- quote / invoice lines ---------- */
.lines { list-style: none; margin: 0; padding: 0; }
.line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.line:first-child { border-top: 0; }
.line > div:first-child { color: var(--ink); }
.line .muted { display: block; font-size: 14px; }
.line.struck > div:first-child { text-decoration: line-through; color: var(--muted); }
.credit { color: var(--paid-ink); }
.total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 0; margin-top: 8px; border-top: 2px solid var(--navy); color: var(--ink); }
.total-row strong { font: 900 26px/1 var(--font-display); }
.total-row.sub { border-top: 0; padding-top: 6px; color: var(--muted); }
.pay-card { border-width: 2px; }
.pay-list { margin-top: 12px; }

/* ---------- misc ---------- */
.empty { text-align: center; padding: 40px 20px; background: var(--white); border: 1px dashed var(--input-border); border-radius: var(--radius-xl); }
.empty h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.empty p { margin: 0 0 14px; color: var(--muted); }
.loading { padding: 60px 16px; text-align: center; color: var(--muted); font-weight: 600; }
.lead p { margin: 8px 0 0; }
.lead-head { display: flex; justify-content: space-between; gap: 12px; }
.lead-head > div { display: flex; flex-direction: column; }
.lead-head strong { color: var(--ink); font-size: 17px; }
.lead-head .muted { font-size: 14px; }
.steps { padding-left: 20px; margin: 0 0 14px; }
.steps li { margin-bottom: 6px; }
.table-wrap { overflow-x: auto; margin: 12px 0; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 700; }
.secret { word-break: break-all; }

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); opacity: 0; transition: 0.25s; z-index: 60;
  background: var(--navy); color: var(--white); padding: 12px 18px; border-radius: var(--radius-md); font-weight: 700; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-err { background: var(--note); }
.toast-warn { background: var(--highlight-ink); }
@media (min-width: 900px) { .toast { bottom: 32px; } }

/* ---------- sign-in ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--sand); }
.login-card { width: 100%; max-width: 420px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 0 28px 28px; overflow: hidden; }
.login-brand { background: var(--navy); margin: 0 -28px 24px; padding: 22px 28px; display: flex; justify-content: center; }
.login-brand img { height: 52px; width: auto; display: block; }
.login-card h1 { margin-bottom: 4px; }
.login-card .muted { margin: 0 0 18px; }

/* ---------- quote breakdown ---------- */
.lead-text { font-size: 17px; color: var(--ink); margin: 0 0 14px; }
.sums { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.sums > div { display: flex; justify-content: space-between; gap: 12px; color: var(--body); }
.sums strong { color: var(--ink); }
.bullets { margin: 0 0 8px; padding-left: 20px; }
.bullets li { margin-bottom: 4px; }

/* ---------- every phone size, notches and foldables ---------- */
/* Long words, emails and addresses wrap instead of pushing the page sideways */
.row > div, .line > div:first-child, .prop > div:first-child, .job-main, .lead-head > div, .dl dd, .chk-item, .note-box { min-width: 0; overflow-wrap: anywhere; }
.line > div:first-child { flex: 1; }
.row-end { flex-wrap: wrap; justify-content: flex-end; }
.btn { max-width: 100%; }
.actions .btn { white-space: normal; text-align: center; }

/* Notch / Dynamic Island: keep content clear in landscape and in the home-screen app */
.topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.page { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.tabbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (display-mode: standalone) { .topbar { padding-top: max(8px, env(safe-area-inset-top)); } }

/* Very narrow screens: iPhone SE 1st gen, Galaxy Fold cover, iPhone Duo Split View */
@media (max-width: 360px) {
  h1 { font-size: 26px; }
  .page { padding-top: 16px; }
  .card { padding: 16px; }
  .list.flush { margin: 0 -16px -8px; }
  .row { padding: 12px 16px; }
  .stats, .stats-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat strong { font-size: 22px; }
  .dl { grid-template-columns: 1fr; gap: 0; }
  .dl dt { margin-top: 8px; }
  .grid2 { grid-template-columns: 1fr; }
  .job-time { width: 96px; }
  .job-time strong { white-space: normal; }
  .chk { flex-wrap: wrap; }
  .chk-item { flex: 1 1 100%; }
  .tabbar a { font-size: 11px; letter-spacing: 0; }
  .total-row strong { font-size: 22px; }
  .page-head .btn { padding: 0 14px; }
  .sheet-body, .sheet-foot { padding-left: 16px; padding-right: 16px; }
}

/* Phones turned sideways: short screens get the room back */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { position: static; padding-top: 4px; padding-bottom: 4px; }
  .brand img { height: 32px; }
  .tabbar a { min-height: 48px; flex-direction: row; gap: 6px; font-size: 13px; }
  main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .sheet { max-height: 96vh; max-height: 96dvh; }
  .login { align-items: flex-start; }
  .login-brand { padding: 12px 28px; }
}

/* Wider open foldables (iPhone Duo / Galaxy Z Fold open): use the width for side-by-side stats */
@media (min-width: 600px) and (max-width: 899px) {
  .page { max-width: 760px; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- CRM: tags and follow-ups ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 16px; }
.tag-row a.tag { text-decoration: none; min-height: 40px; padding: 8px 12px; }
.row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tag-pick { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--input-border); border-radius: var(--radius-pill); background: var(--white); color: var(--navy); font-weight: 600; cursor: pointer; }
.tag-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tag-pick:has(input:checked) { background: var(--navy); border-color: var(--navy); color: var(--white); }
.tag-pick:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.fu-list { padding-top: 4px; padding-bottom: 4px; }
.fu { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.fu:first-child { border-top: 0; }
.fu-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.fu-main a { color: var(--ink); text-decoration: none; display: inline-flex; min-height: 40px; align-items: center; align-self: flex-start; }
.fu-main strong { color: var(--ink); }
.fu-actions { flex: 1 1 100%; margin: 4px 0 0; }
.fu-done .fu-main { color: var(--muted); }
.fu-history summary { cursor: pointer; color: var(--blue); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.quick-dates { margin: -6px 0 12px; }
.quick-dates .chip { cursor: pointer; font: 700 14px var(--font-body); }
.list-actions { margin-top: 14px; }

/* ---------- jobs calendar ---------- */
.cal { padding: 14px 12px 10px; }
.cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.cal-head .h-card { margin: 0 auto 0 4px; order: -1; flex: 1; }
.cal-head .icon-btn { font: 800 26px/1 var(--font-display); color: var(--navy); text-decoration: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-dow { text-align: center; font: 700 12px var(--font-body); color: var(--muted); padding: 4px 0; letter-spacing: 0.06em; }
.cal-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 48px; padding: 6px 0 4px;
  border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; }
.cal-day:hover { background: var(--sand); color: var(--ink); }
.cal-day.other { color: var(--muted); opacity: 0.55; }
.cal-day.past .num { color: var(--muted); }
.cal-day.closed { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--sand) 6px 8px); }
.cal-day.today .num { border: 2px solid var(--blue); border-radius: var(--radius-pill); min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; margin-top: -4px; }
.cal-day.sel { background: var(--navy); color: var(--white); opacity: 1; }
.cal-day.sel .num { color: var(--white); border-color: var(--gold); }
.dots { display: flex; gap: 3px; align-items: center; min-height: 8px; }
.dots b { font: 800 10.5px var(--font-body); color: inherit; }
.dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--navy); display: inline-block; }
.cal-day.sel .dot { background: var(--gold); }
.dot-2 { background: var(--blue); }
.cal-day.sel .dot-2 { background: var(--white); }
.dot-done { background: var(--input-border); }
.cal-key { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; margin: 8px 4px 0; }
.cal-key .dot { margin-right: -4px; }
.cal-dayview { margin-bottom: 16px; }
.cal-dayview .h-row { margin: 4px 0 10px; }
.cal-dayview .h-sec { margin: 0; }
.cal-job.is-done { opacity: 0.75; }
.cal-open { padding: 8px 4px; border-left: 3px solid var(--border); margin-left: 6px; padding-left: 12px; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip.slot { min-height: 40px; border-style: dashed; color: var(--blue); font-weight: 700; }
.chip.slot:hover { background: var(--blue-tint); }
@media (min-width: 760px) {
  .page-cal { max-width: 1100px; }
  .cal-layout { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
  .cal-layout .cal { position: sticky; top: 84px; }
}
@media (max-width: 360px) {
  .cal { padding: 12px 6px 8px; }
  .cal-day { font-size: 14px; min-height: 44px; }
}
.slot-who { color: var(--muted); font-weight: 600; margin-left: 2px; }
.cal-dayview .h-sec { font-size: 19px; flex-wrap: wrap; }
.cal-head .icon-btn { flex: none; }
@media (max-width: 360px) {
  .cal { margin-left: -12px; margin-right: -12px; padding: 10px 2px 8px; border-radius: var(--radius-lg); }
  .cal-grid { gap: 0; }
  .cal-head { padding: 0 6px; }
  .cal-head .h-card { font-size: 16px; }
  .cal-head .btn-sm { padding: 0 8px; }
}

/* phone calendar links */
.cal-feed { padding: 10px 0 12px; border-top: 1px solid var(--border); }
.cal-feed:first-of-type { border-top: 0; }
.cal-feed .h-sub { margin: 4px 0 8px; }
.cal-feed .check { margin-top: 10px; }
.cal-feed .danger { margin-top: 4px; }
.steps-list { margin: 8px 0; padding-left: 20px; line-height: 1.5; }
.steps-list li { margin-bottom: 6px; }
details.tiny > summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--navy); cursor: pointer; }
.cal-sync { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.cal-sync > div { flex: 1; display: flex; flex-direction: column; }

/* quotes, notes */
.card.attention { border-left: 5px solid var(--gold); }
.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; }
.ph-notes { margin-top: 6px; }
.ph-notes > summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--navy); cursor: pointer; font-size: 14px; }
.ph-notes textarea { width: 100%; }
.stack-sm { flex-direction: column; align-items: stretch; }