/* ═══════════════════════════════════════════════════════════════════════
   home-soft.css — Home screen visual overhaul (override layer)
   Loaded last so it wins without touching render logic. Design language:
   Apple HIG type scale (bigger, calmer hierarchy), Material 3 shape
   (large radii, soft tonal surfaces), generous touch targets (≥56px).
   Remove this one file to revert the entire overhaul.
   ═══════════════════════════════════════════════════════════════════════ */

/* Sections — bigger, friendlier headers */
.nx-section { margin-bottom: 28px !important; }
.nx-section-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  line-height: 1.2 !important;
}

/* Stat tiles — calm instrument readout (flat, gold hairline). These are
   STATUS, not actions, so they sit quiet and let the action rows lead. */
.home-rm-tile {
  border-radius: 20px !important;
  padding: 16px 14px !important;
  min-height: 86px !important;
  border: 1px solid var(--nx-gold-line) !important;
  background: var(--nx-elevated) !important;
  box-shadow: none !important;
}
.home-rm-tile-num {
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
}
.home-rm-tile-lbl {
  font-size: 11.5px !important;
  letter-spacing: 0.06em !important;
  opacity: .78;
  margin-top: 6px !important;
}

/* Decisions needed — THE focal element. These float and carry a gold
   imperial edge so the eye lands on what needs action, not on the stats. */
.home-rm-decision-row {
  border-radius: 20px !important;
  padding: 16px 16px !important;
  min-height: 64px !important;
  gap: 14px !important;
  background: var(--nx-surface-solid) !important;
  border: 1px solid var(--nx-border) !important;
  border-left: 3px solid var(--nx-gold) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 22px rgba(6,10,20,.34) !important;
}
.home-rm-decision-title { font-size: 17px !important; font-weight: 650 !important; line-height: 1.3 !important; }
.home-rm-decision-meta  { font-size: 14px !important; line-height: 1.45 !important; }
.home-rm-decision-glyph { transform: scale(1.15); }

/* Work orders feed — same treatment */
.home-rm-wo-list > * { border-radius: 22px !important; min-height: 60px !important; }
.home-rm-wo-title   { font-size: 16.5px !important; font-weight: 650 !important; }
.home-rm-wo-meta, .home-rm-wo-age { font-size: 13.5px !important; }
.home-rm-wo-viewall {
  font-size: 15px !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  min-height: 48px !important;
}

/* Wins + pills — rounder, softer */
.home-rm-wins-pill { border-radius: 999px !important; padding: 10px 16px !important; font-size: 14px !important; }

/* Global softening inside the home view: gentler dividers, more breath */
#homeFeed, .home-rm-decision-body, .home-rm-wo-body { line-height: 1.5 !important; }

/* Larger base type for any home text that inherits */
.nx-view-home, #viewHome { font-size: 16.5px; }

@media (prefers-reduced-motion: no-preference) {
  .home-rm-tile, .home-rm-decision-row { transition: transform .15s ease; }
  .home-rm-tile:active, .home-rm-decision-row:active { transform: scale(.985); }
}

/* ── Phase 2: the KPI glance grid (tickets/down/overdue/services) ─────── */
.home-kpi {
  border-radius: 20px !important;
  min-height: 86px !important;
  padding: 14px 12px !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--nx-gold-line) !important;
  background: var(--nx-elevated) !important;
  box-shadow: none !important;
}
.home-kpi-num   { font-size: 32px !important; font-weight: 700 !important; letter-spacing: -0.02em; line-height: 1.05 !important; }
.home-kpi-label { font-size: 11.5px !important; letter-spacing: 0.05em !important; opacity: .78; text-align: center; }
.home-kpi.is-warn {
  border-color: var(--nx-red) !important;
  box-shadow: 0 0 0 1px var(--nx-red-line), 0 6px 20px var(--nx-red-soft) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .home-kpi { transition: transform .15s ease; }
  .home-kpi:active { transform: scale(.985); }
}


/* ── Field fix: the overdue banner floated OVER content (translucent red
   blur covering the headline). Put it in normal flow as a compact card. */
#overdueBanner {
  position: static !important;
  margin: 0 0 14px !important;
  border-radius: 20px !important;
  padding: 10px 14px !important;
  backdrop-filter: none !important;
  background: var(--nx-red-soft) !important;
  border: 1px solid var(--nx-red-line) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  box-shadow: none !important;
}
#overdueBanner .alert-kicker { font-size: 11px !important; }

/* ═══ Chrome polish — masthead (bulkhead) + bottom nav buttons ══════════
   Additive layer. Dark mode gets the "floating marble shelf" treatment
   (lapis frost, gold hairline, soft lift); light keeps its own bars via
   higher-specificity [data-theme] rules. The active bottom-nav button
   becomes a rounded gold lozenge (Material-3 style) instead of a thin
   underline — rounder, friendlier, reads instantly. Home keeps its ring. */

.nx-mast {
  background: var(--nx-bottom-nav-bg) !important;
  border-bottom: 1px solid var(--nx-gold-line) !important;
  box-shadow: 0 2px 18px rgba(0,0,0,.20) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.bottom-nav {
  background: var(--nx-bottom-nav-bg) !important;
  border-top: 1px solid var(--nx-gold-line) !important;
  box-shadow: 0 -2px 18px rgba(0,0,0,.20) !important;
}

/* Rounded active lozenge (both themes). */
.bnav-btn {
  border-radius: 18px;
  margin: 5px 3px;
  transition: color .2s, background .2s, transform .1s;
}
.bnav-btn.active:not(.bnav-btn-home) {
  background: var(--nx-gold-soft);
}
.bnav-btn.active:not(.bnav-btn-home)::after { display: none !important; }

/* ═══ Light-mode lift — cards float on stone ════════════════════════════
   With warm-white surfaces over deeper limestone, a soft shadow + the
   masthead/nav getting their own light surface completes the separation. */
[data-theme="light"] .home-rm-tile,
[data-theme="light"] .home-kpi {
  box-shadow: none !important;
}
[data-theme="light"] .home-rm-decision-row {
  box-shadow: 0 1px 2px rgba(120,100,70,.10), 0 8px 20px rgba(120,100,70,.12) !important;
}
[data-theme="light"] .nx-mast {
  background: var(--nx-surface-solid) !important;
  border-bottom: 1px solid var(--nx-gold-line) !important;
  box-shadow: 0 2px 14px rgba(120,100,70,.10) !important;
}
[data-theme="light"] .bottom-nav {
  background: var(--nx-surface-solid) !important;
  border-top: 1px solid var(--nx-gold-line) !important;
  box-shadow: 0 -2px 14px rgba(120,100,70,.10) !important;
}

/* ═══ v18.40 — Home obeys the ladder (no reds, no greens) ═════════════
   Alfredo's law, already live in emails and daily notes, now on Home:
   overdue wears solid gold, wins wear gold-on-sand. Scoped token
   override converts every var() usage inside Home in one stroke. */
#homeView {
  --nx-red: #a8763a;
  --nx-red-soft: rgba(212, 164, 78, 0.14);
  --nx-red-line: rgba(212, 164, 78, 0.45);
  --nx-green: var(--nx-gold, #d4a44e);
}
/* The wins card's hard-coded greens, re-inked in gold/sand. */
#homeView .home-rm-wins {
  background: linear-gradient(135deg, rgba(212, 164, 78, 0.08) 0%, transparent 60%) !important;
  border-color: rgba(212, 164, 78, 0.32) !important;
  border-left-color: var(--nx-gold, #d4a44e) !important;
}
#homeView .home-rm-wins-head { border-bottom-color: rgba(212, 164, 78, 0.28) !important; }
#homeView .home-rm-wins-pill { background: rgba(212, 164, 78, 0.16) !important; }
#homeView .home-rm-wins-pill.is-quiet { background: rgba(212, 164, 78, 0.07) !important; }

/* Last card must clear the floating Ask bar + bottom nav on phones. */
#homeView .home-page { padding-bottom: calc(196px + env(safe-area-inset-bottom)) !important; }