/* SYGNAL admin: css/home.css (S5). Home 'Today' (js/pages/home.js) and the
 * nav's count pills (js/shell.js setCounts). Loaded after /ui.css; only kit
 * tokens (--ui-*) and kit components, plus the home-* parts below.
 *
 * Mobile-first, as the approved artboards draw it:
 *   base (< 768)   PhoneHome.dc.html: Needs you 2 x 4, Money 2 x 2, charts one
 *                  per row, Product mix 2 x 3, the period as a pill button and a
 *                  bottom sheet;
 *   768 - 1023     TabletHome (834 notes): Needs you 4 x 2 (label only), Money
 *                  2 x 2, charts one per row, Product mix 3 x 2;
 *   1024 - 1279    TabletHome: charts 2 x 2;
 *   1280 and up    Main.dc.html: Money 4 x 1, Product mix 6 x 1, the two
 *                  bottom cards side by side, the period beside the title.
 * Every grid holds 4, 6 or 8 items, so every row is full at every width.
 */

/* ── Count pills in the nav (S5): hidden until Home gives them a number ─── */
.ui-navcount[hidden] { display: none; }
.ui-tabbar__pill, .ui-nav__pill { position: relative; }
.ui-navcount { position: absolute; top: -6px; left: 32px; min-width: 18px; height: 18px; padding: 0 5px; box-shadow: 0 0 0 2px var(--ui-surface); pointer-events: none; }
.ui-menu-tile__top .ui-navcount { position: static; height: 20px; min-width: 20px; box-shadow: none; }
@media (min-width: 1280px) {
  .ui-nav__pill { position: static; }
  .ui-nav__item .ui-navcount { top: 50%; left: auto; right: 12px; height: 20px; min-width: 20px; padding: 0 6px; transform: translateY(-50%); box-shadow: none; }
}

/* ── The page ───────────────────────────────────────────────────────────── */
.home { display: flex; flex-direction: column; gap: var(--ui-section-gap); margin: 0; font-family: var(--ui-font); color: var(--ui-ink); }
.home-head { display: flex; flex-direction: column; gap: 16px; }
.home-head__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-head__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.home-phone { display: contents; }
.home-wide { display: none; }
.home-head__phone { flex: none; }
.home-head__phone .ui-btn { border-radius: var(--ui-radius-pill); }
.home-head__seg { display: none; }
.home-alerts { display: flex; flex-direction: column; gap: 12px; }
.home-alerts:empty { display: none; }
.home-banner .ui-banner__text { font-size: 14px; line-height: 20px; font-weight: 600; }

.home-sec { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.home-sec__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.home-sec__meta:empty { display: none; }

.home-warn { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ui-warning); }
.home-err .ui-banner__text { font-size: 14px; line-height: 20px; }

/* ── Needs you: 2 x 4 on the phone, 4 x 2 from 768 ─────────────────────── */
.home-needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-gap); }
.home-tile { min-width: 0; }
.home-tile .ui-tile__label { overflow-wrap: anywhere; }
.home-tile .ui-btn--row { margin: -8px -8px -8px 0; }

/* ── Money ──────────────────────────────────────────────────────────────── */
.home-money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-gap); }
.home-m { justify-content: flex-start; gap: 4px; min-height: 124px; }
.home-m__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home-m__label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ui-slate); }
.home-m__body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.home-m__value { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; color: var(--ui-ink); overflow-wrap: anywhere; }
.home-v__unit { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; color: var(--ui-slate); }
/* The phone shows '$184.3k'; the full figure is what a screen reader reads. */
.home-v__full { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.home-v__abbr { display: inline; }
.home-m__sub { overflow-wrap: anywhere; }
.home-m__sk { display: block; width: 70%; height: 24px; border-radius: 6px; }
.home-m .ui-tile__go { display: none; }
.home-split { display: flex; gap: 2px; height: 8px; margin-top: auto; }
.home-split__a, .home-split__b { display: block; width: var(--w); min-width: 0; }
.home-split__a { background: var(--ui-chart-1); border-radius: 4px 0 0 4px; }
.home-split__b { background: var(--ui-chart-2); border-radius: 0 4px 4px 0; }
.home-split__legend { display: none; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ui-slate); }
/* Only Awaiting payment keeps its bar on the phone (PhoneHome). */
.home-m[data-home-money="commissions"] .home-split { display: none; }
.home-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ui-slate); }
.home-delta--up { color: var(--ui-success); }
.home-delta--down { color: var(--ui-danger); }
/* trending-down is trending-up mirrored top to bottom (the same Lucide geometry). */
.home-i--down { transform: scaleY(-1); }

/* ── Charts: one per row, 2 x 2 from 1024 ───────────────────────────────── */
.home-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-gap); }
.home-chart { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 300px; padding: 16px; }
.home-chart__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.home-chart__titles { display: flex; flex-direction: column; min-width: 0; }
.home-chart__head .ui-btn--icon { margin: -8px -10px 0 0; }
.home-chart__body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-width: 0; }
.home-chart__body > .ui-btn--tertiary { align-self: flex-start; margin-left: -12px; }
.home-chart__sk { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.home-chart__empty { margin: auto 0; text-align: center; }
.home-plot { position: relative; height: 200px; min-width: 0; }
.home-plot canvas { display: block; }

.home-c-open, .home-c-sw { background: var(--ui-chart-1); }
.home-c-won { background: var(--ui-chart-3); }
.home-c-lost, .home-c-hw { background: var(--ui-chart-2); }
.home-sw { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; }

.home-out__hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.home-out__pct { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.home-out__won { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ui-slate); }
.home-out__none { margin: 0; }
.home-stack { display: flex; gap: 2px; height: 24px; min-width: 0; }
.home-stack--28 { height: 28px; }
.home-stack__seg { display: flex; align-items: center; width: var(--w); min-width: 0; overflow: hidden; }
.home-stack__seg:first-child { border-radius: 6px 0 0 6px; }
.home-stack__seg:last-child { border-radius: 0 6px 6px 0; }
.home-stack__seg:only-child { border-radius: 6px; }
.home-stack__in { padding-left: 10px; font-size: 13px; line-height: 28px; font-weight: 600; white-space: nowrap; }
.home-c-sw .home-stack__in { color: var(--ui-on-fill); }
.home-c-hw .home-stack__in { color: var(--ui-ink); }
.home-legend { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.home-legend__row { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 -8px; padding: 0 8px; border-radius: var(--ui-radius-control); color: var(--ui-ink); text-decoration: none; }
.home-legend__label { flex: 1 1 auto; font-size: 15px; line-height: 22px; font-weight: 600; }
.home-legend__val { font-size: 15px; line-height: 22px; color: var(--ui-slate); white-space: nowrap; }
.home-legend__go { color: var(--ui-muted); }
/* A row that opens no list keeps its value in line with the rows that do (their chevron). */
.home-legend__gap { flex: none; width: 18px; }
.home-hbars { display: flex; flex-direction: column; justify-content: center; gap: 8px; flex: 1 1 auto; margin: 0; padding: 0; list-style: none; }
.home-hbar { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 -8px; padding: 0 8px; border-radius: var(--ui-radius-control); color: var(--ui-ink); text-decoration: none; }
.home-hbar__label { flex: none; width: 112px; font-size: 15px; line-height: 22px; font-weight: 500; }
.home-hbar__track { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
/* The bar takes its share of what is left after the value (max ~72 px). */
.home-hbar__fill { display: block; flex: none; width: calc((100% - 80px) * var(--f)); min-width: 2px; height: 28px; border-radius: 4px; background: var(--ui-chart-1); }
.home-hbar__val { flex: none; font-size: 15px; line-height: 22px; font-weight: 600; white-space: nowrap; }
.home-hwsw__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ui-slate); }
.home-hwsw__legend > span { display: inline-flex; align-items: center; gap: 8px; }
.home-hwsw__row { display: flex; flex-direction: column; gap: 8px; }
.home-hwsw__row + .home-hwsw__row { margin-top: 12px; }
.home-hwsw__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.home-hwsw__label { font-size: 15px; line-height: 22px; font-weight: 600; }
.home-hwsw__out { margin: 0; color: var(--ui-ink); }
@media (hover: hover) {
  a.home-legend__row:hover, a.home-hbar:hover { background: var(--ui-bg); color: var(--ui-ink); }
}
.home-legend__row:focus-visible, .home-hbar:focus-visible, .home-q:focus-visible, .home-sheet__opt:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

/* Show as table: the same series as a real table. */
.home-tablewrap { min-width: 0; overflow-x: auto; }
.home-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.home-table caption { text-align: left; }
.home-table th, .home-table td { height: 40px; padding: 0 8px; border-bottom: 1px solid var(--ui-line); text-align: left; white-space: nowrap; }
.home-table thead th { background: var(--ui-surface-2); color: var(--ui-slate); font-size: 13px; line-height: 18px; font-weight: 600; }
.home-table tbody th { font-weight: 600; }
.home-table .home-num { text-align: right; }

/* ── Product mix: 2 x 3, 3 x 2 from 768, 6 x 1 from 1280 ────────────────── */
.home-mix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-gap); }
.home-mix__tile { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; min-height: 104px; padding: 14px; }
.home-mix__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home-mix__n { font-size: 28px; line-height: 32px; font-weight: 700; }
.home-mix__i { color: var(--ui-brand); }
.home-mix__label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ui-slate); overflow-wrap: anywhere; }
.home-mix__unit { font-weight: 500; color: var(--ui-muted); }

/* ── Latest quotes and Training ─────────────────────────────────────────── */
.home-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-gap); }
.home-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.home-card__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 16px 12px; }
.home-card__head > div { display: flex; flex-direction: column; min-width: 0; }
.home-card__pad { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0 16px 16px; }
.home-card__foot { margin-top: auto; padding: 16px; border-top: 1px solid var(--ui-line); }
.home-latest { margin: 0; padding: 0; list-style: none; }
.home-q { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 16px; border-top: 1px solid var(--ui-line); color: var(--ui-ink); text-decoration: none; }
@media (hover: hover) { .home-q:hover { background: var(--ui-surface-2); color: var(--ui-ink); } }
.home-q__avatar { display: none; }
.home-q__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.home-q__line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.home-q__name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 15px; line-height: 22px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.home-q__line .ui-badge { flex: none; }
.home-q__amt { flex: none; font-size: 15px; line-height: 22px; font-weight: 700; white-space: nowrap; }
.home-q__code { font-size: 13px; font-weight: 500; color: var(--ui-muted); }
.home-q__meta { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.home-train__n { flex: none; font-size: 24px; line-height: 30px; font-weight: 700; white-space: nowrap; }
.home-train__unit { font-size: 15px; font-weight: 600; color: var(--ui-slate); }
/* The map is its own stacking context: Leaflet's panes (z-index up to 1000) stay under the bars. */
.home-map-wrap { position: relative; z-index: 0; isolation: isolate; margin: 0 16px; border-radius: var(--ui-radius-control); overflow: hidden; background: var(--ui-line); }
.home-map { height: 200px; background: var(--ui-line); }
/* The basemap in grey, so the single-blue ramp reads (design-spec). */
.home-map .leaflet-tile-pane { filter: grayscale(1) contrast(0.85) brightness(1.08); }
.home-map__note { position: absolute; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; pointer-events: none; }
.home-map__note[hidden] { display: none; }
.home-map__note > span { max-width: 320px; padding: 12px 16px; border-radius: var(--ui-radius-control); background: var(--ui-surface); box-shadow: var(--ui-shadow-1); }
.home-legendbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px 0; }
.home-legendbar__ramp { display: flex; flex: 1 1 auto; height: 8px; border-radius: 4px; overflow: hidden; }
.home-legendbar__ramp > span { flex: 1 1 0; }
.home-ramp-0 { background: #CDE2FB; }
.home-ramp-1 { background: #9EC5F4; }
.home-ramp-2 { background: #5C97DE; }
.home-ramp-3 { background: #2D5FAF; }
.home-ramp-4 { background: #104281; }
.home-legendbar__ends { padding: 4px 16px 0; }

.home-foot { display: flex; align-items: flex-start; gap: 8px; }
.home-foot .ui-i { margin-top: 1px; }

/* ── The phone's period sheet (?panel=period) ───────────────────────────── */
.home-sheet__list { display: flex; flex-direction: column; margin: 0 -8px; }
.home-sheet__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--ui-radius-control); background: transparent; color: var(--ui-ink); font-family: var(--ui-font); font-size: 16px; line-height: 24px; font-weight: 600; text-align: left; cursor: pointer; }
.home-sheet__opt[aria-pressed="true"] { background: var(--ui-brand-50); color: var(--ui-brand); }
.home-sheet__check { color: var(--ui-brand); }

/* ── 768 and up: the tablet ─────────────────────────────────────────────── */
@media (min-width: 768px) {
  .home-head__phone { display: none; }
  .home-head__seg { display: block; }
  .home-needs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* TabletHome: the label only (the description is the desktop's). */
  .home-tile .ui-tile__meta:not(.ui-tile__meta--clear):not(.ui-tile__meta--error) { display: none; }
  .home-m { gap: 6px; min-height: 160px; padding: 20px; }
  .home-m__label { font-size: 14px; line-height: 20px; }
  .home-m__value { font-size: 32px; line-height: 40px; }
  .home-v__full { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .home-v__abbr { display: none; }
  .home-v__unit { font-size: 16px; line-height: 24px; }
  .home-m .ui-tile__go { display: inline-block; }
  .home-split { height: 10px; }
  .home-m[data-home-money="commissions"] .home-split { display: flex; }
  .home-split__legend { display: flex; }
  .home-chart { min-height: 320px; padding: 20px; }
  .home-plot { height: 220px; }
  .home-out__pct { font-size: 32px; line-height: 40px; }
  .home-mix { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-mix__tile { padding: 16px 20px; }
  .home-card__head { padding: 20px 20px 12px; }
  .home-card__pad { padding: 0 20px 20px; }
  .home-phone { display: none; }
  .home-wide { display: contents; }
  .home-card__foot { padding: 8px; }
  .home-q { padding: 8px 20px; }
  .home-q__avatar { display: inline-flex; }
  .home-map-wrap { margin: 0 20px; }
  .home-map { height: 280px; }
  .home-legendbar { padding: 12px 20px 0; }
  .home-legendbar__ends { padding: 4px 20px 0; }
  .home-train__n { font-size: 28px; line-height: 34px; }
}
/* 834 portrait: the 4 x 2 tiles are 161 px wide (TabletHome notes: count 28/32, 128 tall). */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-tile { min-height: 128px; padding: 16px; }
  .home-tile .ui-tile__top { gap: 8px; }
  .home-tile .ui-tile__count { font-size: 28px; line-height: 32px; }
}
@media (min-width: 1024px) {
  .home-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-chart { min-height: 340px; }
}

/* ── 1280 and up: Main.dc.html ──────────────────────────────────────────── */
@media (min-width: 1280px) {
  .home-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .home-head__seg .ui-seg--fill { display: inline-flex; width: auto; }
  .home-head__seg .ui-seg--fill .ui-seg__opt { flex: none; padding: 0 14px; }
  .home-tile .ui-tile__meta:not(.ui-tile__meta--clear):not(.ui-tile__meta--error) { display: block; }
  .home-money { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-m { min-height: 184px; }
  .home-m__value { font-size: 36px; line-height: 44px; }
  .home-chart { min-height: 360px; }
  .home-plot { height: 240px; }
  .home-mix { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .home-mix__tile { min-height: 120px; padding: 16px; }
  .home-mix__top { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
  .home-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-map { height: 260px; }
}