/* ============================================================
   V9 Sales — "ledger rows". The Transactions + Trade Log lists render as a feed
   of hairline obsidian rows with a mono amount anchored right, grouped under day
   headings with a per-day rollup, and a fixed-width "⋯" overflow holding each
   row's actions (fixed so amounts stay column-aligned). Shares the obsidian-
   terminal language of the Analytics "Ledger". Scoped .v9-sales. Also re-skins
   the shared log toolbar + pagination (used only by these two lists).
   ============================================================ */

/* Page chrome (header → sub-tabs → content): tight, even rhythm. The legacy
   section-head margin stacked on top of the grid gap = wasted vertical space. */
.v9-salespage { display: grid; gap: var(--v9-space-3); }
.v9-salespage .section-head { margin-bottom: 0; padding-block-end: 0; }
.v9-salespage .section-head h1 { margin: 0; } /* the h1 carried a big UA default margin */

.v9-sales { display: grid; gap: var(--v9-space-3); max-width: 60rem; }
.v9-led-list { display: grid; gap: 0; }
.v9-led-empty { color: var(--v9-text-mute); font-size: var(--v9-text-sm); padding: var(--v9-space-6) 0; }

/* Scroll viewport: entries scroll inside a capped height so the page chrome stays
   put; a DYNAMIC edge-fade mask (vars driven by the scroll listener) dissolves rows
   in/out at the top + bottom. Scrollbar hidden — the fade is the cue. */
.v9-led-list.is-scroll {
  max-height: clamp(16rem, 56vh, 44rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  --fade-top: 0px; --fade-bottom: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
}
.v9-led-list.is-scroll::-webkit-scrollbar { width: 0; height: 0; }
/* Touch devices: the edge-fade mask forces the whole scrolling list onto an
   offscreen compositing surface — a per-frame cost on phone/tablet GPUs.
   Momentum scrolling + the "More ⌄" pill are affordance enough there. */
@media (pointer: coarse) {
  .v9-led-list.is-scroll {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Scroll affordance — the "you can scroll" cue is a single bouncing, clickable
   "More ⌄" pill (sibling of the list, OUTSIDE the fade mask so it stays crisp);
   it appears only on overflow and hides at the bottom. */
.v9-led-scroll { position: relative; }
/* A soft fade-to-canvas shelf under the "More" pill: present only while there's
   more below, so the pill always floats over a clean gradient instead of
   colliding with the half-faded row behind it (no flanking name/amount poking
   past its edges). Sits above the masked list, below the pill (z 5 < 6). */
.v9-led-scroll::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4.5rem;
  background: linear-gradient(to top, var(--v9-bg) 28%, transparent);
  opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity var(--v9-t-std) var(--v9-ease);
}
.v9-led-scroll.is-scrollable:not(.at-bottom)::after { opacity: 1; }

.v9-led-more {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px;
  border-radius: var(--v9-r-pill); background: var(--v9-raised); border: 1px solid var(--v9-line-strong);
  color: var(--v9-text-mute); font: 500 var(--v9-text-xs) var(--v9-font-ui); cursor: pointer;
  opacity: 0; pointer-events: none; z-index: 6;
  transition: opacity var(--v9-t-std) var(--v9-ease), color var(--v9-t-micro) var(--v9-ease), border-color var(--v9-t-micro) var(--v9-ease);
}
.v9-led-scroll.is-scrollable:not(.at-bottom) .v9-led-more { opacity: 1; pointer-events: auto; animation: v9-led-morebounce 1.5s var(--v9-ease) infinite; }
.v9-led-more:hover { color: var(--v9-text); border-color: var(--v9-accent); }
.v9-led-more-chev { font-size: 1.15em; line-height: 1; color: var(--v9-accent); }
@keyframes v9-led-morebounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }
@media (prefers-reduced-motion: reduce) { .v9-led-more { animation: none !important; } }

/* ---- day heading + rollup ---- */
.v9-led-day { display: flex; align-items: baseline; justify-content: space-between; gap: var(--v9-space-3); padding: var(--v9-space-5) var(--v9-space-2) var(--v9-space-2); border-bottom: 1px solid var(--v9-line); }
.v9-led-day:first-child { padding-top: var(--v9-space-1); }
/* The day divider is the page's color beat: date label + rollup value pick up the
   theme accent (re-tints per theme), so the ledger isn't all greyscale. */
.v9-led-day-l { font: 500 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--v9-accent); }
.v9-led-day-t { font: 400 var(--v9-text-xs) var(--v9-font-mono); color: var(--v9-text-faint); white-space: nowrap; }
.v9-led-day-t b { font-weight: 500; color: var(--v9-accent); }

/* ---- row ---- */
.v9-led-row { display: flex; align-items: center; gap: var(--v9-space-4); padding: var(--v9-space-3) var(--v9-space-2); border-bottom: 1px solid var(--v9-line); border-radius: var(--v9-r-sm); cursor: pointer; transition: background-color var(--v9-t-micro) var(--v9-ease); }
.v9-led-row:hover { background: var(--v9-surface); }
.v9-led-row:focus-visible { outline: none; box-shadow: var(--v9-focus-glow); }
.v9-led-row-main { flex: 1; display: grid; gap: 3px; min-width: 0; }
.v9-led-row-title { display: flex; align-items: center; gap: var(--v9-space-2); min-width: 0; }
.v9-led-row-name { font: 500 var(--v9-text-sm) var(--v9-font-ui); color: var(--v9-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v9-led-row-meta { font: 400 var(--v9-text-xs) var(--v9-font-mono); color: var(--v9-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v9-led-row-amt { flex: 0 0 auto; font: 300 var(--v9-text-md) var(--v9-font-mono); font-variant-numeric: tabular-nums; color: var(--v9-text); white-space: nowrap; }
.v9-led-row-amt.is-void { color: var(--v9-text-faint); text-decoration: line-through; }
.v9-led-row-amt.is-out { color: var(--v9-text-mute); }
.v9-led-row.is-voided .v9-led-row-name { color: var(--v9-text-mute); }
.v9-led-row.is-skeleton { cursor: default; pointer-events: none; }

/* ---- status chips (shown only when not a plain recorded sale) ---- */
.v9-led-chip { flex: 0 0 auto; font: 400 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--v9-r-sm); border: 1px solid var(--v9-line-strong); color: var(--v9-text-faint); white-space: nowrap; }
.v9-led-chip.is-void { color: var(--v9-neg); border-color: color-mix(in srgb, var(--v9-neg) 40%, transparent); }
.v9-led-chip.is-pending, .v9-led-chip.is-warn { color: var(--v9-warn); border-color: color-mix(in srgb, var(--v9-warn) 45%, transparent); }
.v9-led-chip.is-test, .v9-led-chip.is-muted, .v9-led-chip.is-dir { color: var(--v9-text-faint); border-color: var(--v9-line-strong); }

/* ---- row overflow menu (fixed-width slot → amounts stay column-aligned) ---- */
.v9-led-menu { flex: 0 0 auto; position: relative; width: 1.6rem; display: flex; justify-content: center; }
.v9-led-menu.is-empty { pointer-events: none; }
.v9-led-menu-btn { width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: var(--v9-r-sm); background: transparent; color: var(--v9-text-faint); font: 500 var(--v9-text-md)/1 var(--v9-font-ui); cursor: pointer; opacity: 0; transition: opacity var(--v9-t-micro) var(--v9-ease), color var(--v9-t-micro) var(--v9-ease), border-color var(--v9-t-micro) var(--v9-ease); }
.v9-led-row:hover .v9-led-menu-btn, .v9-led-menu.is-open .v9-led-menu-btn { opacity: 1; }
.v9-led-menu-btn:hover { color: var(--v9-text); border-color: var(--v9-line); }
.v9-led-menu-btn:focus-visible { opacity: 1; outline: none; box-shadow: var(--v9-focus-glow); }
.v9-led-menu-pop { display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; min-width: 9.5rem; padding: 4px; background: var(--v9-raised); border: 1px solid var(--v9-line-strong); border-radius: var(--v9-r-md); }
.v9-led-menu.is-open .v9-led-menu-pop { display: grid; gap: 2px; }
/* Portaled to <body> on open (escapes the row list's overflow + edge-fade mask);
   position/top/left are set inline by openMenuPop. */
.v9-led-menu-pop.is-portaled { display: grid; gap: 2px; }
.v9-led-menu-item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: var(--v9-r-sm); background: transparent; color: var(--v9-text-mute); font: 400 var(--v9-text-sm) var(--v9-font-ui); cursor: pointer; }
.v9-led-menu-item:hover { background: var(--v9-hover); color: var(--v9-text); }
.v9-led-menu-item.is-danger { color: var(--v9-neg); }
.v9-led-menu-item.is-danger:hover { background: color-mix(in srgb, var(--v9-neg) 14%, var(--v9-hover)); }
.v9-led-menu-item:disabled { opacity: 0.4; cursor: default; }
@media (hover: none) { .v9-led-menu-btn { opacity: 1; } } /* touch: actions always reachable */

/* ---- shared log toolbar, re-skinned to V9 ---- */
.v9-sales .log-toolbar { background: none; border: 0; border-bottom: 1px solid var(--v9-line); border-radius: 0; box-shadow: none; margin: 0; padding: 0 0 var(--v9-space-3); }
.v9-sales .log-toolbar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--v9-space-3) var(--v9-space-5); }
.v9-sales .log-toolbar-group { display: grid; gap: 5px; }
.v9-sales .log-toolbar-label { font: 500 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--v9-text-faint); }
.v9-sales .select, .v9-sales .input { height: 2rem; background-color: var(--v9-surface); border: 1px solid var(--v9-line); border-radius: var(--v9-r-sm); color: var(--v9-text); font: 400 var(--v9-text-sm) var(--v9-font-ui); color-scheme: dark; }
.v9-sales .select { padding: 0 1.8rem 0 var(--v9-space-3); }
.v9-sales .input { padding: 0 var(--v9-space-3); }
.v9-sales .select:focus, .v9-sales .input:focus { outline: none; border-color: var(--v9-accent); box-shadow: var(--v9-focus-glow); }
.v9-sales .log-range-chips { display: flex; flex-wrap: wrap; gap: var(--v9-space-2); }
.v9-sales .log-range-chip { padding: 0.3rem 0.75rem; border-radius: var(--v9-r-pill); cursor: pointer; white-space: nowrap; border: 1px solid var(--v9-line); background: var(--v9-surface); color: var(--v9-text-mute); font: 500 var(--v9-text-sm) var(--v9-font-ui); transition: color var(--v9-t-micro) var(--v9-ease), background-color var(--v9-t-micro) var(--v9-ease), border-color var(--v9-t-micro) var(--v9-ease); }
.v9-sales .log-range-chip:hover { color: var(--v9-text); background: var(--v9-hover); }
.v9-sales .log-range-chip.is-active { color: var(--v9-accent); border-color: color-mix(in srgb, var(--v9-accent) 55%, var(--v9-line)); background: var(--v9-raised); }
.v9-sales .log-range-chip:focus-visible { outline: none; box-shadow: var(--v9-focus-glow); }
.v9-sales .log-custom-range { display: flex; align-items: center; gap: var(--v9-space-2); color: var(--v9-text-faint); font-size: var(--v9-text-xs); }

/* ---- shared log pagination, re-skinned ---- */
.v9-sales .log-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--v9-space-3); flex-wrap: wrap; padding-top: var(--v9-space-3); border-top: 1px solid var(--v9-line); }
.v9-sales .log-results-meta { font: 400 var(--v9-text-xs) var(--v9-font-mono); color: var(--v9-text-faint); }
.v9-sales .log-page-actions { display: flex; align-items: center; gap: var(--v9-space-3); }
.v9-sales .log-page-count { font: 400 var(--v9-text-xs) var(--v9-font-mono); color: var(--v9-text-mute); }
.v9-sales .log-pagination .btn { height: 1.9rem; padding: 0 var(--v9-space-3); background: var(--v9-surface); border: 1px solid var(--v9-line); border-radius: var(--v9-r-sm); color: var(--v9-text-mute); font: 500 var(--v9-text-sm) var(--v9-font-ui); cursor: pointer; transition: color var(--v9-t-micro) var(--v9-ease), background-color var(--v9-t-micro) var(--v9-ease); }
.v9-sales .log-pagination .btn:hover:not(:disabled) { color: var(--v9-text); background: var(--v9-hover); }
.v9-sales .log-pagination .btn:disabled { opacity: 0.4; cursor: default; }

/* ============================================================
   MOBILE (≤640) — a purpose-built layout, NOT a shrunk desktop. Three goals
   (Donovan: "messy, randomly sized, text overly large"): a coherent 3-tier type
   scale, a tight scannable row, and a CONTAINED scroll where the chrome is pinned
   and only the list moves (the page never scrolls).
   ============================================================ */
@media (max-width: 640px) {
  /* --- Contained scroll, page locked ---
     The shell's MAIN slot is a definite height with overflow:auto and .v9-salespage
     is its direct child, so we fill it and hide its overflow: the list becomes the
     ONLY scroll region (no page-scroll, no nested "scroll trap"). The flex chain
     threads through both layouts: sales.js wraps the list in a bare `content` div,
     trades.js puts .v9-sales directly under the page — `> *:last-child` covers both. */
  .v9-salespage {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--v9-space-1);
  }
  .v9-salespage > .section-head,
  .v9-salespage > .v9-inv-subtabs { flex: 0 0 auto; }
  .v9-salespage > *:last-child { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .v9-sales { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--v9-space-1); max-width: none; }
  .v9-sales .log-toolbar { flex: 0 0 auto; }
  .v9-sales .log-pagination { flex: 0 0 auto; }   /* pinned footer, always visible */
  .v9-led-scroll { flex: 1 1 auto; min-height: 0; }
  .v9-led-list.is-scroll { max-height: none; height: 100%; }  /* the flex parent sizes it; keep overflow + edge-fade */
  .v9-led-more { display: none; }                 /* no pill on a phone — the filled, fading list is cue enough */
  /* Analytics: the ledger report is the scroll region inside the locked page.
     The list tabs scroll via .v9-led-scroll; the analytics .v9-ledger had NO
     scroller, so its ~1900px report overflowed the capped page and clipped with
     no way to scroll on mobile. Make it fill + scroll like the lists. */
  .v9-salespage > *:last-child > .v9-ledger { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .v9-salespage > *:last-child > .v9-ledger::-webkit-scrollbar { width: 0; height: 0; }

  /* --- Condensed chrome (reclaim ~110px above the data) --- */
  .v9-salespage .t-eyebrow { display: none; }     /* redundant with the title + tabs */
  .v9-salespage .section-head h1 { font-size: var(--v9-text-lg); line-height: 1.15; }
  .v9-salespage .v9-inv-subtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--v9-space-1); }
  .v9-salespage .v9-inv-subtabs::-webkit-scrollbar { display: none; }
  .v9-salespage .v9-inv-subtab { flex: 0 0 auto; white-space: nowrap; }  /* don't let "Trade Log" wrap */
  .v9-salespage .v9-inv-subtabs .chip { padding: 0.25rem 0.45rem; font-size: var(--v9-text-xs); }  /* all three fit the row */

  /* --- Day header: equal-size label + value (was value > label), tighter --- */
  .v9-led-day { padding: var(--v9-space-3) 0 6px; }
  .v9-led-day-t { font-size: var(--v9-text-2xs); }

  /* --- Tight row (~2 lines, name+amount over a compact meta) --- */
  .v9-led-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: 'title amt menu' 'meta meta menu';
    column-gap: var(--v9-space-3);
    row-gap: 2px;
    align-items: center;
    padding: 6px 0;
    border-radius: 0;
  }
  .v9-led-row-main { display: contents; }
  .v9-led-row-title { grid-area: title; }
  .v9-led-row-meta { grid-area: meta; font-size: var(--v9-text-xs); }
  .v9-led-row-amt { grid-area: amt; justify-self: end; font: 400 var(--v9-text-md) var(--v9-font-mono); }  /* sized with the name, not 1.5x it */
  .v9-led-menu { grid-area: menu; justify-self: end; align-self: center; }
  /* date is redundant under a day header — hide it in grouped views only
     (flat/amount-sorted lists have no day header, so the date stays there) */
  .v9-led-list.is-grouped .v9-led-row-when { display: none; }

  /* --- Toolbar declutter: drop the per-page picker + the SORT/RANGE labels (the
     "Newest first" select + range chips read on their own), compact the rest, keep
     ranges on one swipeable row. Sort + ranges sit on a single wrapping row. --- */
  .v9-sales .log-toolbar { padding-bottom: var(--v9-space-2); }
  .v9-sales .log-toolbar-row { gap: var(--v9-space-2) var(--v9-space-3); align-items: center; }
  .v9-sales .log-toolbar-row > .log-toolbar-group:first-child { display: none; }
  .v9-sales .log-toolbar-label { display: none; }
  .v9-sales .select { height: 1.9rem; }
  .v9-sales .log-range-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .v9-sales .log-range-chips::-webkit-scrollbar { display: none; }

  /* --- Pinned pagination footer: drop the "Showing X of Y" line (the page count
     carries position) so Prev · Page · Next fit one compact row. --- */
  .v9-sales .log-pagination { padding-top: var(--v9-space-2); gap: var(--v9-space-2); flex-wrap: nowrap; justify-content: space-between; }
  .v9-sales .log-results-meta { display: none; }
  .v9-sales .log-pagination .btn { height: 1.8rem; }
}