/* Homebuilder frame — office pages (HOMEBUILDER_M3_BETH_PLAN.md §3).
   Calm and plain: 16px minimum body text, buttons at least 44px tall, one
   main action per card. The "Go to" bar sits at the top of every office
   page; on phone its menu becomes a full-width sheet. Shared office idioms
   (action cards, big buttons, status words) used by Warranty, Insurance,
   Invoices, Locates and Notifications live here too, scoped to homes-app. */

/* ---- Go to bar ---- */
.hm-office-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--hm-bg); border-bottom: 1px solid var(--hm-line); }
.hm-goto { position: relative; }
.hm-goto-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; font: inherit; font-size: 17px; font-weight: 700; color: #fff; background: var(--app-navy); border: 0; border-radius: 12px; cursor: pointer; }
.hm-goto-btn .hm-ic { width: 20px; height: 20px; }
.hm-goto-where { padding-left: 10px; font-weight: 500; border-left: 1px solid rgba(255, 255, 255, .35); }
.hm-goto-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; display: grid; gap: 2px; width: 440px; max-width: calc(100vw - 32px); padding: 8px; background: var(--app-surface); border: 1px solid var(--hm-line); border-radius: 14px; box-shadow: var(--shadow-2); }
.hm-goto-menu[hidden] { display: none; }
.hm-goto-head { display: none; }
.hm-goto-item { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 12px; color: var(--hm-text); text-decoration: none; border-radius: 10px; }
.hm-goto-item:hover, .hm-goto-item:focus-visible { background: var(--app-surface-2); }
.hm-goto-item.is-current { background: var(--app-accent-soft); }
.hm-goto-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; color: var(--app-accent); background: var(--app-accent-soft); border-radius: 10px; }
.hm-goto-text { flex: 1; min-width: 0; }
.hm-goto-text b { display: block; font-size: 17px; color: var(--hm-ink); }
.hm-goto-text small { display: block; font-size: 14px; color: var(--hm-muted); }
.hm-goto-count { flex: none; font-size: 14px; font-weight: 700; color: #c2410c; white-space: nowrap; }
.hm-goto-count:empty { display: none; }
.hm-office-home { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; font-size: 16px; font-weight: 600; color: var(--app-accent); text-decoration: none; border-radius: 10px; }
.hm-office-home:hover { background: var(--app-accent-soft); }

@media (max-width: 719px) {
  .hm-office-bar { padding: 8px 12px; }
  .hm-office-home span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hm-goto-menu { position: fixed; inset: auto 0 0 0; top: auto; width: 100%; max-width: none; max-height: 85dvh; overflow-y: auto; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
  .hm-goto-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 8px; font-size: 17px; color: var(--app-navy); }
  .hm-office-bar.is-open::after { content: ""; position: fixed; inset: 0; z-index: 25; background: rgba(15, 23, 42, .42); }
}

/* Builds and Email keep their split layout under the bar on desktop. */
@media (min-width: 1024px) {
  body.homes-office .main-content:has(> .hm-office-main > .hm-split) { display: flex; flex-direction: column; overflow: hidden; }
  body.homes-office .hm-office-main:has(> .hm-split) { flex: 1; min-height: 0; }
  .hm-office-bar { padding: 12px 32px; }
}

/* ---- Office readability ---- */
body.homes-office .hm-page { font-size: 16px; }
body.homes-office .hm-sub { font-size: 16px; }
body.homes-office .hm-btn { min-height: 44px; font-size: 15px; }
body.homes-office .hm-btn-sm { min-height: 40px; font-size: 14px; }
body.homes-office .hm-row-main b { font-size: 16px; }
body.homes-office .hm-row-main small { font-size: 14px; }
body.homes-office .hm-pill { font-size: 13px; }
body.homes-office .hm-field > span { font-size: 14px; }
body.homes-office .hm-field input, body.homes-office .hm-field select, body.homes-office .hm-field textarea { font-size: 16px; }
body.homes-office .hm-section-title { font-size: 13px; }

/* ---- Shared office idioms ---- */
.hm-btn-big { min-height: 52px; padding: 12px 24px; font-size: 17px; font-weight: 700; border-radius: 12px; }
.hm-btn-big .hm-ic { width: 20px; height: 20px; }
.hm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.hm-act-card { padding: 16px 18px; }
.hm-act-card + .hm-act-card { margin-top: 10px; }
.hm-act-card h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--hm-ink); }
.hm-act-card p { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--hm-text); }
.hm-act-card .hm-meta { margin-top: 6px; font-size: 14px; color: var(--hm-muted); }
.hm-act-card.is-suggested { border-style: dashed; border-width: 2px; background: #fbfcfe; }
.hm-act-card.is-warn { border-color: #fdba74; background: #fff7ed; }
.hm-act-card.is-danger { border-color: #fca5a5; background: #fef2f2; }
.hm-word { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.hm-word::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.hm-word.ok { color: var(--app-ok); }
.hm-word.warn { color: #c2410c; }
.hm-word.danger { color: var(--app-danger); }
.hm-word.muted { color: var(--hm-muted); }
.hm-word.muted::before { background: transparent; border: 1.5px solid currentColor; }
.hm-check-lg { align-items: flex-start; gap: 12px; font-size: 16px; color: var(--hm-text); }
.hm-check-lg input { width: 22px; height: 22px; margin-top: 2px; }
.hm-check-lg b { display: block; font-size: 16px; color: var(--hm-ink); }
.hm-check-lg small { display: block; margin-top: 2px; font-size: 14px; color: var(--hm-muted); }
.hm-kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 16px; }
.hm-kv dt { font-weight: 600; color: var(--hm-muted); }
.hm-kv dd { margin: 0; color: var(--hm-ink); overflow-wrap: anywhere; }
.hm-log { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hm-log li { padding: 10px 0; border-bottom: 1px solid var(--hm-line); font-size: 15px; line-height: 1.45; }
.hm-log li:last-child { border-bottom: 0; }
.hm-log small { display: block; margin-top: 2px; font-size: 13px; color: var(--hm-muted); }
.hm-mail-box { display: grid; gap: 12px; }
.hm-mail-box textarea { min-height: 220px; font-family: inherit; }
.hm-mail-from { font-size: 15px; color: var(--hm-muted); }
.hm-mail-from b { color: var(--hm-ink); }

/* ---- Notifications ---- */
.hm-note { align-items: flex-start; min-height: 72px; padding: 14px 16px; }
.hm-note.is-unread { border-left: 4px solid var(--app-accent); background: #f8fbff; }
.hm-note-sec { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--hm-muted); }
.hm-note-new { padding: 1px 8px; font-size: 12px; color: #fff; background: var(--app-accent); border-radius: var(--radius-pill); }
.hm-note-when { align-self: center; font-size: 14px; }
.hm-note-push { margin-top: 18px; padding: 14px 16px; }

/* ---- Permits ---- */
.hm-soon { max-width: 560px; margin: 24px auto; padding: 28px 24px; text-align: center; }
.hm-soon h1 { margin: 10px 0 6px; font-size: 22px; color: var(--app-navy); }
.hm-soon p { margin: 0 0 8px; font-size: 16px; line-height: 1.55; color: var(--hm-text); }

/* ---- Warranty (rewritten) ---- */
.hm-w-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.hm-w-photo { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--app-surface-3); border-radius: 10px; }
.hm-w-photo img { width: 100%; height: 100%; object-fit: cover; }
.hm-w-photo .hm-btn { position: absolute; top: 6px; right: 6px; min-height: 36px; padding: 4px 10px; background: rgba(255, 255, 255, .92); }
.hm-w-contact a { color: var(--app-accent); font-weight: 600; text-decoration: none; }
.hm-w-detail { display: grid; gap: 14px; }
.hm-w-detail .hm-card { padding: 16px 18px; }
.hm-w-detail h2 { margin: 0 0 10px; font-size: 17px; color: var(--hm-ink); }
.hm-w-desc-lg { margin: 0; font-size: 17px; line-height: 1.55; color: var(--hm-ink); white-space: pre-wrap; }
@media (min-width: 1024px) {
  .hm-w-detail { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
  .hm-w-detail > .hm-w-wide { grid-column: 1 / -1; }
}

/* ---- Insurance (rewritten) ---- */
.hm-ins-table td, .hm-ins-table th { font-size: 15px; }
.hm-ins-table a { color: var(--hm-ink); text-decoration: none; }
.hm-ins-table a:hover b { text-decoration: underline; }
.hm-ins-sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--hm-muted); }
.hm-ins-kinds { display: grid; gap: 10px; }
.hm-ins-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0; border-bottom: 1px solid var(--hm-line); }
.hm-ins-kind:last-child { border-bottom: 0; }
.hm-ins-kind b { min-width: 170px; font-size: 16px; color: var(--hm-ink); }
.hm-ins-kind .hm-spacer { min-width: 8px; }
.hm-ins-detail { display: grid; gap: 14px; }
.hm-ins-detail > .hm-card { padding: 16px 18px; }
.hm-ins-detail h2 { margin: 0 0 10px; font-size: 17px; color: var(--hm-ink); }
@media (min-width: 1024px) { .hm-ins-detail { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } .hm-ins-detail > .hm-ins-wide { grid-column: 1 / -1; } }