/* Strictly·Cash Drops ledger: the members' Drops as dense rows on pure black, in either theme.
   Each row opens inline (one at a time) with photos, details, copy actions and downloads.
   Only the open row's panel height, transform and opacity animate; no blur, no blend modes. */

.ledger {
  --lg-bg: #000;
  --lg-raise: #0b0b0d;
  --lg-line: rgba(255, 255, 255, .08);
  --lg-line-2: rgba(255, 255, 255, .14);
  --lg-ink: #EDEDEF;
  --lg-mute: #A1A1AA;
  --lg-dim: #8B8B94;
  --lg-green: #3DBA74;
  --lg-red: #F87171;
  --lg-ease: cubic-bezier(0.19, 1, 0.22, 1);
  /* Figure columns: never narrower than the design, wider when this currency's longest value needs it (app.js ledgerWidths) */
  --lg-cols: minmax(0, 1fr) max(84px, var(--lg-w-spread, 0px)) 14px;
  background: var(--lg-bg);
  color: var(--lg-ink);
  border: 1px solid var(--lg-line-2);
  border-radius: 14px;
  overflow: clip;
  font-size: 13px;
  line-height: 1.35;
  color-scheme: dark;
}
@media (min-width: 760px) { .ledger { --lg-cols: minmax(0, 1fr) max(88px, var(--lg-w-cost, 0px)) max(112px, var(--lg-w-spread, 0px)) 60px 14px; } }
@media (min-width: 1100px) { .ledger { --lg-cols: minmax(0, 1fr) max(88px, var(--lg-w-cost, 0px)) max(132px, var(--lg-w-resale, 0px)) max(120px, var(--lg-w-spread, 0px)) 60px 14px; } }
@media (min-width: 1280px) { .ledger { --lg-cols: 78px minmax(0, 1fr) max(88px, var(--lg-w-cost, 0px)) max(136px, var(--lg-w-resale, 0px)) max(128px, var(--lg-w-spread, 0px)) 56px 66px 14px; } }

/* Columns: which ones show at each width (the rest move into the open panel) */
.ledger .lg-asset, .ledger .lg-cost, .ledger .lg-resale, .ledger .lg-days, .ledger .lg-stock { display: none; }
@media (min-width: 760px) { .ledger .lg-cost, .ledger .lg-stock { display: block; } .ledger .lg-cost-sm { display: none; } }
@media (min-width: 1100px) { .ledger .lg-resale { display: block; } }
@media (min-width: 1280px) { .ledger .lg-asset, .ledger .lg-days { display: block; } .ledger .lg-asset-sm { display: none; } }

.lg-cols, .lg-head {
  display: grid; grid-template-columns: var(--lg-cols); align-items: center;
  column-gap: 12px; padding: 0 14px;
}
@media (min-width: 760px) { .lg-cols, .lg-head { column-gap: 16px; padding: 0 18px; } }

.lg-cols {
  height: 40px; border-bottom: 1px solid var(--lg-line-2);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lg-dim);
}
.lg-cols .lg-c { color: var(--lg-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* labels may get longer in other languages: they truncate, the row never wraps */
.lg-cols .lg-num { margin-right: -.16em; }
.lg-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-cols .lg-num { font-family: inherit; }

/* ---------- Row ---------- */
.lg-row { position: relative; border-bottom: 1px solid var(--lg-line); }
.lg-row:last-of-type { border-bottom: 0; }
.lg-row::before {   /* the green rule on the open row */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--lg-green);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform .45s var(--lg-ease);
}
.lg-row.open::before { transform: scaleY(1); }
.lg-head {
  width: 100%; min-height: 60px; border: 0; margin: 0; background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer; transition: background-color .2s ease;
}
.lg-head:hover { background: rgba(255, 255, 255, .035); }
.lg-row.open .lg-head { background: rgba(255, 255, 255, .045); }
.lg-head:focus-visible { outline: 1px solid var(--lg-ink); outline-offset: -1px; }
.lg-row.is-out .lg-head { color: var(--lg-mute); }

.lg-asset { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--lg-mute); }
.lg-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lg-thumb { flex: none; width: 36px; height: 36px; border-radius: 8px; background: #141416; overflow: hidden; display: grid; place-items: center; }
.lg-thumb img { width: 100%; height: 100%; object-fit: contain; }
.lg-names { display: grid; gap: 2px; min-width: 0; }
.lg-brand { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lg-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-asset-sm { font-style: normal; font-family: var(--font-mono); letter-spacing: .06em; margin-left: 8px; color: var(--lg-dim); }
.lg-cost-sm { font-family: var(--font-mono); font-size: 12px; color: var(--lg-mute); }
.lg-name { font-size: 13px; font-weight: 500; color: var(--lg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-row.is-out .lg-name { color: var(--lg-mute); }
.lg-tag {
  flex: none; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lg-mute); border: 1px solid var(--lg-line-2); border-radius: 999px; padding: 2px calc(8px - .12em) 2px 8px; line-height: 1.3;
}
.lg-tag-red { color: var(--lg-red); border-color: rgba(248, 113, 113, .35); }
.lg-cost { color: var(--lg-ink); }
.lg-resale, .lg-days { color: var(--lg-mute); }
.lg-spread { display: grid; justify-items: end; gap: 1px; }
.lg-spread b { font-weight: 600; color: var(--lg-green); }
.lg-spread i { font-style: normal; font-size: 12px; color: var(--lg-mute); }
.lg-spread.neg b { color: var(--lg-red); }
.lg-stock { color: var(--lg-ink); }
.lg-chev { color: var(--lg-dim); display: grid; place-items: center; }
.lg-chev svg { width: 14px; height: 14px; transition: transform .35s var(--lg-ease); }
.lg-row.open .lg-chev svg { transform: rotate(180deg); }
.lg-head:hover .lg-chev { color: var(--lg-ink); }

/* ---------- Accordion: the panel grows from 0 to its height, the content fades up ---------- */
.lg-x { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .36s var(--lg-ease); }
.lg-row.open .lg-x { grid-template-rows: 1fr; }
.lg-x-in { min-height: 0; overflow: hidden; }
.lg-detail {
  display: grid; gap: 18px; padding: 6px 14px 20px;
  opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity .3s ease, transform .4s var(--lg-ease);
}
.lg-row.open .lg-detail { opacity: 1; transform: none; transition-delay: .06s; }
@media (min-width: 760px) { .lg-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 8px 18px 22px 18px; } }
@media (min-width: 1100px) { .lg-detail { grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr) minmax(0, 1fr); } }
@media (min-width: 1280px) { .lg-detail { padding-left: 112px; } }
@media (min-width: 760px) and (max-width: 1099px) { .lg-act { grid-column: 1 / -1; } }

.lg-pane { min-width: 0; display: grid; align-content: start; gap: 10px; }
.lg-h { margin: 6px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lg-dim); }
.lg-dim { margin: 0; font-size: 12px; color: var(--lg-dim); line-height: 1.5; }
.lg-mono { font-family: var(--font-mono); letter-spacing: .04em; }

.lg-hero { aspect-ratio: 4 / 3; border-radius: 10px; background: var(--lg-raise); border: 1px solid var(--lg-line); display: grid; place-items: center; overflow: hidden; }
.lg-hero img { width: 82%; height: 82%; object-fit: contain; }
@media (max-width: 759px) { .lg-hero { aspect-ratio: 16 / 10; } }
.lg-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.lg-strip a, .lg-strip video { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--lg-raise); border: 1px solid var(--lg-line); }
.lg-strip img, .lg-strip video { width: 100%; height: 100%; object-fit: cover; }

.lg-figs, .lg-kv { margin: 0; display: grid; }
.lg-figs div, .lg-kv div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--lg-line); }
.lg-figs dt, .lg-kv dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--lg-mute); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lg-figs dd { flex: none; white-space: nowrap; }   /* figures are never shortened; only words truncate */
.lg-figs dd, .lg-kv dd { margin: 0; text-align: right; color: var(--lg-ink); min-width: 0; }
.lg-figs dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.lg-figs .pos { color: var(--lg-green); }
.lg-figs .neg { color: var(--lg-red); }
.lg-kv dd { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lg-size { font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--lg-line-2); border-radius: 6px; padding: 2px 6px; }
.lg-size i { font-style: normal; color: var(--lg-mute); margin-left: 6px; }
.lg-size.out { color: var(--lg-dim); text-decoration: line-through; }
.lg-liq { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lg-mute); margin-right: 6px; align-self: center; }
.lg-liq-high { background: var(--lg-green); }
.lg-liq-medium { background: #F5A524; }

/* ---------- Actions ---------- */
.lg-primary {
  width: 100%; min-height: 44px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--lg-ink); color: #000; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em; padding: 0 0 0 .04em;
  transition: transform .2s ease, opacity .2s ease;
}
.lg-primary:hover { opacity: .9; }
.lg-primary:active { transform: scale(.98); }
.lg-primary:disabled { background: #1a1a1d; color: var(--lg-mute); cursor: not-allowed; }
.lg-save {
  width: 100%; min-height: 40px; border-radius: 10px; cursor: pointer; background: transparent; color: var(--lg-ink);
  border: 1px solid var(--lg-line-2); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 0 0 0 .14em;
}
.lg-save:hover { border-color: rgba(255, 255, 255, .3); }
.lg-save .on, .lg-save[aria-pressed="true"] .off { display: none; }
.lg-save[aria-pressed="true"] .on { display: inline; color: var(--lg-green); }
.lg-list { display: grid; border: 1px solid var(--lg-line); border-radius: 10px; overflow: hidden; }
.lg-list > .lg-dim { padding: 10px 12px; }
.lg-copy, .lg-dl {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 12px;
  border: 0; border-bottom: 1px solid var(--lg-line); background: transparent; color: var(--lg-ink);
  font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .2s ease;
}
.lg-list > :last-child { border-bottom: 0; }
.lg-copy:hover, .lg-dl:hover { background: rgba(255, 255, 255, .05); }
.lg-copy:focus-visible, .lg-dl:focus-visible, .lg-save:focus-visible, .lg-primary:focus-visible, .lg-strip a:focus-visible { outline: 1px solid var(--lg-ink); outline-offset: -1px; }
.lg-copy i { font-style: normal; font-family: var(--font-mono); color: var(--lg-mute); margin-left: 8px; }
.lg-copy svg { flex: none; width: 15px; height: 15px; color: var(--lg-mute); }
.lg-copy:hover svg { color: var(--lg-ink); }
.lg-dl b { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; margin-right: -.12em; color: var(--lg-mute); }

.lg-foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 18px;
  border-top: 1px solid var(--lg-line-2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--lg-dim);
}
.lg-foot span:last-child { margin-right: -.1em; }
@media (max-width: 759px) { .lg-foot { padding: 12px 14px; } .lg-foot span + span:not(.lg-fx) { display: none; } }

/* Rows slide in after a filter or layout change (same timing as the cards) */
.ledger.fx-in .lg-row { animation: lgIn .5s var(--lg-ease) both; animation-delay: calc(var(--k, 0) * 22ms); }
@keyframes lgIn { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }

/* ---------- Ledger | Cards switch ---------- */
.vswitch { display: flex; flex: none; padding: 3px; gap: 2px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.vswitch button {
  display: flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; padding: 0 11px 0 10px; min-height: 42px; cursor: pointer;
  background: transparent; color: var(--ink-2, var(--ink)); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
.vswitch button svg { width: 16px; height: 16px; }
.vswitch [data-view="ledger"] svg { transform: scale(1.06); }   /* three lines carry less ink than four squares */
.vswitch button[aria-pressed="true"] { background: #000; color: #EDEDEF; }
:root[data-theme="dark"] .vswitch button[aria-pressed="true"] { background: #EDEDEF; color: #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vswitch button[aria-pressed="true"] { background: #EDEDEF; color: #000; } }
.vswitch button:focus-visible { outline: 2px solid var(--blue, currentColor); outline-offset: 1px; }
@media (max-width: 759px) { .vswitch button { padding: 0 10px; } .vswitch button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* ---------- Optical alignment ----------
   Measured, not guessed: each value is the gap between an icon's ink centre and its box centre, taken with the
   real fonts at 2x. Half-pixel shifts only on high-density screens; on 1x screens they would blur 2px strokes.
   - Chevron "v": ink sits 0.22px high and the open top reads heavy, so it drops 0.5px (and rises 0.5px when turned to "^").
   - Copy icon: ink sits 0.43px above the label's centre line, so it drops 0.5px.
   - PNG / IMG / PAGE: capitals sit 0.5px high in the line box (room kept for descenders they don't have).
   - Tracked capitals end with an extra letter-space; the margins and paddings above cancel it so edges line up. */
@media (min-resolution: 2dppx) {
  .lg-chev svg { transform: translateY(.5px); }
  .lg-row.open .lg-chev svg { transform: translateY(-.5px) rotate(180deg); }
  .lg-copy svg { transform: translateY(.5px); }
  @supports not (text-box: trim-both cap alphabetic) { .lg-dl b { transform: translateY(.5px); } }
}
@supports (text-box: trim-both cap alphabetic) { .lg-dl b { text-box: trim-both cap alphabetic; } }

@media (prefers-reduced-motion: reduce) {
  .lg-x, .lg-detail, .lg-row::before, .lg-chev svg { transition: none; }
  .ledger.fx-in .lg-row { animation: none; }
}
@media print {
  .lg-x { grid-template-rows: 1fr; }
  .lg-detail { opacity: 1; transform: none; }
}