/* home-grid.css — V1 vendor Home Grid view (additive sibling to the List/#s-home tile block).
   Slice: JASON_ARCH_VENDOR_HOME_V1_07192026.md. Mock authority:
   upadate/VENDOR UI UPDATE/GiobizVendorUpdate/GioBiz Vendor Home.html + README.md.
   Filled by /_lib/bo-home-grid.js. index.css / rider.css / ship_manager.css are untouched.

   SEAM LAW (#2/#9): the ONLY rule below allowed to name an EXISTING app class is the pair
   right under this comment — it fires ONLY while #s-home carries the JS-toggled
   .home-mode-grid class, so in List mode (the default DOM, no class present) this stylesheet
   applies ZERO new rules to any pre-existing selector. Every other rule targets brand-new
   selectors this slice introduces itself ([data-vtog], #home-grid-mount, .hg-*). */

#s-home.home-mode-grid .tile { display: none !important; }
#s-home.home-mode-grid #home-grid-mount { display: block; }

#home-grid-mount { display: none; }

/* ── view toggle — [data-vtog]/[data-mode] did not exist anywhere in the app before this
   slice inserted them into #s-home's header (index.html), so these rules touch nothing
   pre-existing, in either view mode. Color lives here (not as an inline style on the button)
   so the .on active-state override below can actually win the cascade. ── */
[data-vtog] button {
  color: rgba(255, 255, 255, .68);
  position: relative; /* WO-TOGGLE-SIZE (chief c822): anchor for the ::before hit-area expansion below.
     index.html shrank the visible box from 48px to 40px (mock-fidelity match to btn-refresh-plan/
     btn-notif-bell). To keep the tap target >=44px without inflating the visible chrome back up,
     ::before adds an invisible, CSS-only 4px inset on every side (40+4+4=48px hit box) — zero new
     DOM elements, zero visual change. */
}
[data-vtog] button::before {
  content: '';
  position: absolute;
  inset: -4px;
}
[data-vtog] button svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
[data-vtog] button.on {
  background: rgba(255, 255, 255, .92);
  color: #0a3a26; /* mock --green, verbatim */
}

/* ── grid tiles — new .hg-* classes only; mock tokens (README §1) applied verbatim ── */
#home-grid-mount .hg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
#home-grid-mount .hg-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 13px 5px 11px;
  border-radius: 16px;
  background: #ffffff;      /* mock --panel */
  border: 1px solid #e4e7e1;/* mock --line */
  position: relative;
  min-height: 90px;
  font-family: inherit;
  cursor: pointer;
}
#home-grid-mount .hg-tile:active { transform: scale(.95); }
#home-grid-mount .hg-tile__ic {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: #e6f2ea; /* mock --chip */
  display: grid; place-items: center;
  font-size: 22px; line-height: 1;
}
#home-grid-mount .hg-tile__lb {
  font-size: 10.5px; font-weight: 700; text-align: center; line-height: 1.2;
  color: #0c1f18; /* mock --ink */
}
#home-grid-mount .hg-pro {
  position: absolute; top: 6px; right: 6px;
  background: #f4c95b; /* mock credits/PRO amber fill — rendered hex, verbatim (README §1 flags
                           the mock's DECLARED --amber:#e0961f as unused by the pills; we follow
                           the rendered hex, same discrepancy the arch doc calls out) */
  color: #3a2a00;       /* mock amber text, verbatim */
  font-size: 8px; font-weight: 800;
  padding: 2px 5px; border-radius: 5px; letter-spacing: .3px;
}
#home-grid-mount .hg-viewall {
  margin: 12px auto 2px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800;
  color: #0a3a26; /* mock --green */
  background: #ffffff;
  border: 1px solid #e4e7e1;
  padding: 9px 20px;
  border-radius: 999px;
  width: fit-content;
  cursor: pointer;
  font-family: inherit;
}
#home-grid-mount .hg-viewall .hg-chev {
  width: 8px; height: 8px;
  border-right: 2.2px solid #0a3a26;
  border-bottom: 2.2px solid #0a3a26;
  transform: rotate(45deg);
  margin-top: -3px;
}
#home-grid-mount .hg-viewall .hg-chev.hg-up { transform: rotate(-135deg); margin-top: 2px; }

/* Declared for parity with the mock's full token sheet (README §1: header gradient
   150deg #124e34→#0a3a26, --bg #eef1ed). #home-grid-mount is a SIBLING of #s-home's header
   (.home-hdr), not an ancestor of it, so a custom property declared here cannot cascade to it
   (CSS custom properties only flow to descendants) — V2 below applies the same mock hexes
   directly on the elements that actually need them instead of trying to share this var(). Left
   declared here for token-sheet parity / any future #home-grid-mount descendant that wants it. */
#home-grid-mount {
  --hg-header-gradient: linear-gradient(150deg, #124e34 0%, #0a3a26 70%);
  --hg-bg: #eef1ed;
}

/* ══════════════════════════════════════════════════════════════════════════════
   V2 — grid-mode token pass (chief c808 V2 + c817 queue). Slice:
   COORDINATOR/JASON_ARCH_VENDOR_HOME_V1_07192026.md's seam laws still bind: every rule below is
   scoped under #s-home.home-mode-grid (fires ONLY once the JS-toggled class is present) or is a
   brand-new .hg-* selector — List mode (no .home-mode-grid on #s-home) gets ZERO new rules
   applied to any pre-existing selector, same guarantee as V1.
   ══════════════════════════════════════════════════════════════════════════════ */

/* page background — mock --bg (README §1). The mock's `body{background:radial-gradient(...),#eef4f0}`
   treatment is HONESTLY SKIPPED: in the mock itself it renders fully hidden under the opaque
   `.app{background:var(--bg)}` layer (never visible), and `body` here is shared by EVERY screen in
   this app (not just #s-home) — repainting it would leak outside Home entirely, breaking the seam
   law's scoping guarantee. The solid #eef1ed on #s-home.home-mode-grid alone matches what the mock
   actually renders. */
#s-home.home-mode-grid {
  background: #eef1ed;
}

/* header gradient — mock 150deg #124e34→#0a3a26 (README §1). .home-hdr is the SAME element used by
   both List and Grid mode (index.html has no separate grid-mode header markup) — this rule is safe
   to scope purely via the ancestor class because List mode's .home-hdr background (var(--g800),
   solid — index.css) is set by a bare `.home-hdr` selector with lower specificity than this
   `#s-home.home-mode-grid .home-hdr` chain; List mode never carries .home-mode-grid, so this rule
   never matches and index.css's rule is the only one that ever applies there — zero touch to any
   inline style, zero touch to shared markup, per arch law #6's header carve-out. */
#s-home.home-mode-grid .home-hdr {
  background: linear-gradient(150deg, #124e34 0%, #0a3a26 70%);
}

/* ── recent-activity card (grid mode) — new .hg-act* classes, mock README §3 item 7 /
   .act/.act__h/.act__row/.act__ic/.act__tx/.act__view tokens verbatim. Filled by
   bo-home-grid.js's loadActivity()/buildActivityHTML() from the REAL /api/bo/activity-log feed
   (the same endpoint bo-activity.js's Activity screen reads) — never fabricated sample rows. ── */
#home-grid-mount .hg-act {
  background: #ffffff;       /* mock --panel */
  border: 1px solid #e4e7e1; /* mock --line */
  border-radius: 18px;
  overflow: hidden;
  margin-top: 14px;
}
#home-grid-mount .hg-act__h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 15px 10px;
}
#home-grid-mount .hg-act__h h3 {
  font-size: 14.5px; font-weight: 800; color: #0c1f18; /* mock --ink */
  margin: 0;
}
#home-grid-mount .hg-act__row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px;
  border-top: 1px solid #e4e7e1; /* mock --line */
  border-left: 0; border-right: 0; border-bottom: 0;
  text-align: left; width: 100%;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
#home-grid-mount .hg-act__ic {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: #e6f2ea; /* mock --chip */
  display: grid; place-items: center;
  font-size: 16px; flex: 0 0 auto;
}
#home-grid-mount .hg-act__tx {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  text-align: left;
}
#home-grid-mount .hg-act__tx b {
  display: block; font-size: 12.5px; font-weight: 700; color: #0c1f18; /* mock --ink */
}
#home-grid-mount .hg-act__tx span {
  display: block; font-size: 11px; font-weight: 500; color: #93a29a; /* mock --faint */
}
#home-grid-mount .hg-act__view {
  font-size: 12px; font-weight: 800; color: #1ba368; /* mock --accent */
  flex: 0 0 auto;
}
#home-grid-mount .hg-act__empty {
  padding: 18px 15px;
  font-size: 12.5px; font-weight: 500; color: #93a29a; /* mock --faint */
  text-align: center;
}