/* ═══════════════════════════════════════════════════════════════════════
   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.
   v523: margin-bottom was 28px, which is roughly the same as the space
   ABOVE the heading, so "Vendor watch" floated equidistant between the
   card above it and the card below it and read as belonging to neither.
   A heading owns what follows it: more air above, less below. */
.nx-section { margin-bottom: 14px !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: var(--nx-radius-tight) !important;  /* v571 — token: 14 outer */
  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.
   v523: this block used to give each row its OWN gold left bar, its own
   1px border and a heavy two-layer drop shadow, INSIDE a card that
   already has a gold border and a 4px gold left bar. On the phone that
   read as a frame inside a frame inside a frame. The card is the frame;
   the rows are just rows in it, separated by the hairline that
   nexus-rm.css already draws. Type sizes moved to nexus-rm.css
   (--home-rm-title) so the glyph and arrow can align to the title. */
.home-rm-decision-row {
  padding: 12px 10px !important;
  min-height: 56px !important;
  gap: 12px !important;
}
.home-rm-decision-glyph { transform: scale(1.1); }

/* Work orders feed — same treatment */
.home-rm-wo-list > * { border-radius: var(--nx-radius-tight) !important; min-height: 60px !important; }
.home-rm-wo-title   { font-size: 16px !important; font-weight: 680 !important; letter-spacing: -0.01em !important; line-height: 1.25 !important; color: var(--nx-text-strong) !important; }
.home-rm-wo-meta { font-size: 13px !important; }
/* v571 — the age column is DATA: mono, tabular, warm, pinned to the
   title line. Critical rows get the (gold-remapped) alert ink. */
.home-rm-wo-age {
  font-family: var(--nx-font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--nx-faint) !important;
  align-self: start;
  padding-top: 3px;
}
.home-rm-wo-item.tone-critical .home-rm-wo-age { color: var(--nx-red) !important; font-weight: 700 !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: var(--nx-radius-tight) !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: var(--nx-radius-tight) !important;
  padding: 10px 14px !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. */

/* v451 — dead .nx-mast rules removed: no bare .nx-mast class exists in the
   DOM (the masthead is .nav; only .nx-mast-row/-coin/-date compounds exist).
   The real masthead styling lives in nexus-rm.css. */

.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;
}
/* v523 — the decision rows no longer float (see the decisions block
   above), so they no longer carry a lift shadow in either theme. */
[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);
}
/* v523 — those two tokens carry TEXT on Home (the OVERDUE / QUIET
   kickers). #a8763a measures 3.6:1 on the cream ground, so daylight got
   the text-safe gold. Surfaces keep the tints above. */
[data-theme="light"] #homeView {
  --nx-red: var(--nx-gold-ink);
  --nx-green: var(--nx-gold-ink);
}
/* The decisions card's gold tint darkens the ground under its body copy,
   pushing --nx-muted to 4.3:1. One step deeper clears AA at 5.4:1. */
[data-theme="light"] .home-rm-decisions { --nx-muted: #4a3e2f; }  /* v571 — was cool slate #4c5665; warm espresso-brown, 7.4:1 on the gold-tinted card */
/* 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(var(--nx-bottom-nav-h, 65px) + 21px + 58px + 56px + env(safe-area-inset-bottom)) !important; }  /* v571 — same formula as home.css base; 196px clipped the PHILOSOPHY card */

/* ═══ Phase 3 polish (2026-08-14, Alfredo: "improve the css here and UI")
   Slack-lane steward pass, kept inside this one-file override layer.
   Three targets from his screenshot: the decisions card's frame-in-frame
   heaviness, the vendor rows still wearing the old tight language, and
   the Ask bar's washed/clipped hint. Plus tabular numerals everywhere a
   number can tick over — the whole pass stays token-true.            */

/* Numbers are data: no layout shimmy when a count changes. */
.home-kpi-num, .home-rm-tile-num, .home-rm-decision-meta,
.home-vendor-row-age, .home-item-num, .home-rm-decisions-head,
.home-rm-wo-age, .home-rm-wo-count {
  font-variant-numeric: tabular-nums;
}

/* Decisions card — one frame. Radius nests 20 outside / 14 inside for
   the row's press + hover tint; nothing inside draws a second edge. */
.home-rm-decisions {
  border-radius: var(--nx-radius-tight) !important;
  padding: 14px 14px 12px !important;
}
.home-rm-decisions-head {
  border-bottom-style: solid !important;
  letter-spacing: 0.16em;
}
.home-rm-decisions .home-rm-decision-row { border-radius: var(--nx-radius-tighter) !important; }

/* Vendor watch — same softened language as every other Home card.
   v523: the background was --nx-elevated (an OPAQUE panel) while every
   other Home card is --nx-surface-1, so the vendor rows read as a
   different, lighter material sitting in the middle of the feed. They
   match .home-item now. */
.home-vendor-list { gap: 10px !important; }
.home-vendor-row {
  border-radius: var(--nx-radius-tight) !important;
  padding: 14px 16px !important;
  min-height: 64px !important;
  gap: 12px !important;
  background: var(--nx-surface-2) !important;  /* v571 — same ground as every other Home card */
  border: 1px solid var(--nx-gold-line) !important;
}
.home-vendor-row-name { font-size: 15.5px !important; }
.home-vendor-row-meta { font-size: 12px !important; gap: 12px !important; margin-top: 4px !important; }
/* Two lines before the ellipsis — one line truncated every real ticket
   title mid-word ("…hose is not windi…"), which is worse than no title. */
.home-vendor-row-title {
  font-size: 13.5px !important;
  margin-top: 5px !important;
  white-space: normal !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.home-vendor-row-call {
  width: 44px !important; height: 44px !important;
  transition: transform 0.12s ease, background 0.15s ease;
}
.home-vendor-row-call:active { transform: scale(0.94); }

/* Needs-attention items — join the soft radius language and gain the
   estate card treatment: inner top highlight, guarded hover lift. */
.home-item {
  border-radius: var(--nx-radius-tight) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
@media (hover: hover) {
  .home-item:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035),
                0 8px 22px rgba(6, 10, 20, 0.28);
  }
}
[data-theme="light"] .home-item { box-shadow: none; }
[data-theme="light"] .home-item:hover {
  box-shadow: 0 8px 20px rgba(120, 100, 70, 0.12);
}

/* Ask bar hint — it was both washed out (0.65 ink on gold) and able to
   run into the pill's edge. Readable tint, and ellipsis that actually
   has a width to work against. */
.home-ask { overflow: hidden; }
.home-ask-hint {
  /* v571 — full opacity (hierarchy by SIZE, never by dimming), trailing
     right with room to ellipsize. The fade animation died in home.css. */
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 52%;
  text-align: right;
  font-size: 13px !important;
  font-weight: 400;
}
[data-theme="light"] .home-ask-hint { color: #f7e6c4 !important; }  /* gold tint on the deep-bronze pill: 4.5:1+ across the gradient */

/* Headings breathe evenly when they wrap. */
.nx-section-title { text-wrap: balance; }

/* ═══ v571 — Home light-theme revamp (5-lens fleet + owner screenshot) ═══ */

/* Section headers anchor the page in the darkest ink; gold stays for
   meta (kickers, counters). Loads after nexus.css, same importance,
   higher specificity — so this wins over the v523 gold-ink rule. */
[data-theme="light"] .nx-section-title { color: var(--nx-text-strong) !important; }

/* The "4 OPEN" counter sits on the title baseline, not floated above it. */
.home-rm-wo .nx-section { align-items: baseline !important; }

/* Warm lift on hover in light — the shared hover shadow in nexus-rm.css
   is a 45% blue-black tuned for the dark theme; on cream it reads cold.
   Higher specificity wins the !important tie. */
@media (hover: hover) and (pointer: fine) {
  [data-theme="light"] .nx-card:hover, [data-theme="light"] .nx-card--elevated:hover,
  [data-theme="light"] .home-rm-tile:hover, [data-theme="light"] .home-kpi:hover,
  [data-theme="light"] .home-rm-decision-row:hover, [data-theme="light"] .home-rm-wo-item:hover {
    box-shadow: 0 1px 2px rgba(63, 46, 23, 0.05), 0 8px 20px rgba(63, 46, 23, 0.10) !important;
  }
}

/* Cards carry a soft espresso lift so they separate from the cream page
   (the "beige mush" fix, second half — the first half is the warm ink). */
[data-theme="light"] .home-item,
[data-theme="light"] .home-rm-wo-item,
[data-theme="light"] .home-vendor-row,
[data-theme="light"] .home-rm-decisions,
[data-theme="light"] .dcard {
  box-shadow: 0 1px 2px rgba(63, 46, 23, 0.05), 0 5px 14px rgba(63, 46, 23, 0.08);
}