/* ================= Homebuilder frame — layout =================
   Phone (default): the shell's bottom nav, one column, panes stacked.
   Desktop (>= 1024px): the bottom nav becomes a left rail, list screens
   become list + detail splits with independently scrolling panes, and
   two-part screens sit side by side. Everything is scoped to
   body.homes-app (set by the frame at session start). Small screens
   that have no stylesheet of their own (warranty, insurance, shortcuts,
   contacts) live at the bottom of this file. */

/* ---- list / detail split (Builds, Email) ---- */
.hm-split { min-height: 100%; }
.hm-pane-scroll { padding: 0 16px 28px; }
.hm-split-detail .hm-pane-scroll > .hm-page { padding-left: 0; padding-right: 0; }
.hm-split:not(.has-detail):not(.hm-email) .hm-split-detail { display: none; }
.hm-split.has-detail .hm-split-list { display: none; }
.hm-email .hm-split-detail { display: none; }
.hm-email.is-reading .hm-split-list { display: none; }
.hm-email.is-reading .hm-split-detail { display: block; }
.hm-list-head { position: sticky; top: 0; z-index: 4; display: grid; gap: 10px; margin: 0 -16px; padding: 14px 16px 12px; background: var(--hm-bg); }
.hm-list-title { display: flex; align-items: center; gap: 10px; }
.hm-two-col > section { min-width: 0; }

@media (min-width: 1024px) {
  /* Shell: topbar across the top, rail on the left, content on the right. */
  body.homes-app .app { grid-template-columns: var(--hm-rail) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  body.homes-app .topbar { grid-column: 1 / -1; }
  body.homes-app .main-content { grid-column: 2; grid-row: 2; padding: 0; }
  body.homes-app .bottom-nav {
    position: static; grid-column: 1; grid-row: 2; z-index: 2;
    flex-direction: column; justify-content: flex-start; gap: 2px;
    min-height: 0; padding: 14px 12px; overflow-y: auto;
    background: var(--app-surface); border-top: 0; border-right: 1px solid var(--hm-line);
  }
  body.homes-app .bottom-nav-item {
    flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
    min-height: 42px; padding: 0 12px; border-radius: 10px;
    font-size: 14px; font-weight: 600; color: var(--hm-muted);
    transition: background var(--motion-fast), color var(--motion-fast);
  }
  body.homes-app .bottom-nav-item svg { width: 19px; height: 19px; flex: none; }
  body.homes-app .bottom-nav-item:hover { color: var(--hm-text); background: var(--app-surface-3); }
  body.homes-app .bottom-nav-item.active { color: var(--app-navy); background: var(--app-accent-soft); }
  body.homes-app .bottom-nav-item .nav-badge { position: static; margin-left: auto; font-size: 11px; line-height: 18px; min-width: 20px; }

  /* Ordinary pages scroll in the content area at a readable width. */
  body.homes-app .hm-page { max-width: 1200px; margin: 0 auto; padding: 10px 32px 48px; }
  body.homes-app .hm-page.hm-narrow { max-width: 760px; }
  .hm-head { padding: 18px 0 16px; }
  .hm-title { font-size: 24px; }

  /* Split screens fill the content area; each pane scrolls on its own. */
  body.homes-app .main-content:has(> .hm-split) { overflow: hidden; }
  .hm-split { display: grid; grid-template-columns: var(--hm-pane) minmax(0, 1fr); height: 100%; min-height: 0; }
  .hm-split .hm-split-list, .hm-split .hm-split-detail { display: block !important; min-height: 0; }
  .hm-split-list { background: var(--app-surface); border-right: 1px solid var(--hm-line); }
  .hm-pane-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
  .hm-split-list .hm-pane-scroll { padding: 0 12px 24px; }
  .hm-split-list .hm-list-head { margin: 0 -12px 8px; padding: 18px 16px 12px; background: var(--app-surface); border-bottom: 1px solid var(--hm-line); }
  .hm-split-list .hm-title { font-size: 20px; }
  .hm-split-detail .hm-pane-scroll { padding: 0 28px 48px; }
  .hm-split-detail .hm-pane-scroll > .hm-page { max-width: 1120px; padding: 10px 0 0; }

  .hm-two-col { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
}

@media (min-width: 1440px) {
  body.homes-app { --hm-rail: 236px; --hm-pane: 340px; }
}

/* ---- Warranty ---- */
.hm-w-card { display: grid; gap: 6px; padding: 14px 16px; transition: background var(--motion-fast); }
a.hm-w-card:hover { background: var(--app-surface-2); }
.hm-w-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hm-w-top b { font-size: 15px; color: var(--hm-ink); }
.hm-w-desc { font-size: 14px; line-height: 1.45; color: var(--hm-text); }
.hm-w-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hm-w-meta small { font-size: 12.5px; color: var(--hm-muted); }

/* ---- Insurance ---- */
.hm-search-inline { flex: 1 1 220px; max-width: 360px; }
.hm-search-inline input { min-height: 40px; }
.hm-cert { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hm-cert small { font-size: 12.5px; color: var(--hm-muted); }
.hm-ins-trade { color: var(--hm-muted); }
@media (max-width: 760px) {
  .hm-ins-table thead { display: none; }
  .hm-ins-table, .hm-ins-table tbody { display: block; }
  .hm-ins-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--hm-line); }
  .hm-ins-table tr:last-child { border-bottom: 0; }
  .hm-ins-table th, .hm-ins-table td { display: block; padding: 0; border: 0; }
  .hm-ins-table th { grid-column: 1 / -1; }
  .hm-ins-table .hm-ins-trade { grid-column: 1 / -1; margin-top: -6px; font-size: 13px; }
  .hm-ins-table td[data-label="GL"]::before, .hm-ins-table td[data-label="WC"]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--hm-faint); }
}

/* ---- Shortcuts ---- */
.hm-shortcuts { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hm-shortcut { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 16px; color: inherit; text-decoration: none; background: var(--app-surface); border: 1px solid var(--hm-line); border-radius: 14px; box-shadow: var(--shadow-1); transition: background var(--motion-fast), border-color var(--motion-fast); }
.hm-shortcut:hover { background: var(--app-surface-2); border-color: var(--hm-line-strong); }
.hm-shortcut-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: var(--app-accent); background: var(--app-accent-soft); border-radius: 12px; }
.hm-shortcut-ic .hm-ic { width: 22px; height: 22px; }
.hm-shortcut-text { flex: 1; min-width: 0; }
.hm-shortcut-text b { display: block; font-size: 16px; color: var(--hm-ink); }
.hm-shortcut-text small { display: block; margin-top: 2px; font-size: 13px; color: var(--hm-muted); }
.hm-shortcut-go { color: var(--hm-faint); }
@media (min-width: 560px) { .hm-shortcuts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .hm-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .hm-shortcut { flex-direction: column; align-items: flex-start; min-height: 148px; padding: 18px; }
  .hm-shortcut-go { display: none; }
}

/* ---- Contacts ---- */
.hm-contact { min-height: 60px; }
.hm-contact-phone { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--app-accent); background: var(--app-accent-soft); border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-contact-phone .hm-ic { width: 15px; height: 15px; }
@media (min-width: 1024px) { .hm-contacts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 28px; align-items: start; } }
@media (max-width: 340px) { .hm-contact-phone span { display: none; } .hm-contact-phone { width: 40px; padding: 0; justify-content: center; } }