/* Alive webapp — Trips ledger. Pixel twin of LedgerScreen.tsx styles:
   summary card (stone wash), day headers, trip cards (42px mode tile,
   15px route, dose number + chevron), details expander, honest footer.
   Bands live at details level only; numbers are tabular Satoshi. */

.num { font-variant-numeric: tabular-nums; font-family: var(--font); }

.lg-host .sheet { top: calc(52px + var(--sat)) }   /* full sheet, like RN */

/* summary card — the ledger's identity well (V2Tint clay = warm stone) */
.lg-summary { margin: 0 14px 14px; padding: 16px 16px 14px; border-radius: 20px;
  background: #F1EFE9; box-shadow: 0 6px 18px rgba(59,52,35,.07) }
.lg-sumrow { display: flex }
.lg-sumcol { flex: 1; min-width: 0 }
.lg-sumnum { color: var(--ink); font-size: 22px; line-height: 30px; font-weight: 600 }
.lg-sumhero { color: var(--ink); font-size: 44px; line-height: 44px; font-weight: 600 }
.lg-sumunithero { color: var(--ink2); font-size: 15px; font-weight: 500 }
.lg-sumunit { color: var(--ink2); font-size: 15px; font-weight: 500 }
.lg-sumcap { color: var(--ink2); font-size: 13px; margin-top: 2px }
.lg-sumfoot { color: var(--ink3); font-size: 13px; margin-top: 10px }
.lg-weekrow { border-top: .5px solid rgba(22,24,29,.06); margin-top: 14px; padding-top: 10px }
.lg-weeklabel { color: var(--ink); font-size: 15px; font-weight: 600 }
.lg-weekline { color: var(--ink2); font-size: 13px; margin-top: 4px }
.lg-barsrow { display: flex; align-items: flex-end; margin-top: 14px; height: 56px; gap: 6px }
.lg-barcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end }
.lg-barfill { width: 14px; border-radius: 7px; min-height: 4px }
.lg-barlbl { color: var(--ink3); font-size: 11px; margin-top: 5px }

/* day headers + trip cards */
.lg-dayhead { color: var(--ink2); font-size: 15px; font-weight: 600; margin: 12px 18px 8px }
.lg-card { margin: 0 14px 10px; background: var(--surface); border-radius: 20px;
  box-shadow: 0 6px 18px rgba(59,52,35,.07); overflow: hidden }
.lg-head { display: flex; align-items: center; min-height: 68px; padding: 12px 14px;
  gap: 12px; width: 100%; text-align: left }
.lg-head:active, .lg-head.open { opacity: .85 }
.lg-modebox { width: 42px; height: 42px; border-radius: 13px; background: var(--surface2);
  display: flex; align-items: center; justify-content: center; flex: none }
.lg-mid { flex: 1; margin-right: 6px; min-width: 0 }
.lg-route { color: var(--ink); font-size: 15px; font-weight: 500; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lg-meta { color: var(--ink3); font-size: 13px; margin-top: 1px; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lg-saved { color: var(--ink2); font-size: 13px; margin-top: 2px; display: block }
.lg-nums { display: flex; flex-direction: column; align-items: flex-end; margin-right: 2px; flex: none }
.lg-cigrow { display: flex; align-items: center; gap: 5px }
.lg-cignum { font-size: 15px; font-weight: 600 }
.lg-outnum { color: var(--ink3); font-size: 13px; margin-top: 2px }
.lg-chev { display: flex; flex: none }
.lg-head.open .lg-chev { transform: rotate(90deg) }

/* detail expander — bands allowed here, never on the surface */
.lg-detail { border-top: .5px solid rgba(22,24,29,.06); padding: 8px 14px 4px }
.lg-drow { display: flex; align-items: center; padding: 6px 0 }
.lg-dlabel { flex: 1; color: var(--ink2); font-size: 15px }
.lg-dright { display: flex; flex-direction: column; align-items: flex-end }
.lg-dvalue { color: var(--ink); font-size: 15px; font-weight: 600 }
.lg-dsub { color: var(--ink3); font-size: 13px; margin-top: 1px }
.lg-dsaved { color: var(--ink2); font-size: 13px; padding: 6px 0 }
.lg-badgerow { display: flex; padding: 4px 0 }
.lg-badge { border-radius: 999px; padding: 4px 11px; background: #EFEDE7;
  color: #2A4D3B; font-size: 13px; font-weight: 500 }
.lg-dhairline { height: .5px; background: rgba(22,24,29,.06); margin-top: 8px }
.lg-ddelete { display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding-right: 10px; color: #A83D30; font-size: 13px; font-weight: 500 }
.lg-ddelete:active { opacity: .6 }

/* empty state — type-led */
.lg-emptywrap { flex: 1; min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 0 44px 72px }
.lg-emptybadge { width: 76px; height: 76px; border-radius: 26px; background: var(--surface2);
  display: flex; align-items: center; justify-content: center }
.lg-emptytitle { color: var(--ink); font-size: 22px; font-weight: 600; margin-top: 18px }
.lg-emptyhint { color: var(--ink2); font-size: 15px; text-align: center; line-height: 22px;
  margin-top: 8px; max-width: 280px }
.lg-emptyprivacy { color: var(--ink3); font-size: 13px; margin-top: 12px }

/* footer — privacy line + delete all */
.lg-footer { display: flex; align-items: center; justify-content: space-between;
  margin: 14px 18px 0 }
.lg-privacy { color: var(--ink3); font-size: 13px; flex: 1 }
.lg-deleteall { display: flex; align-items: center; gap: 7px; min-height: 44px;
  padding: 0 8px; color: #A83D30; font-size: 13px; font-weight: 500 }
.lg-deleteall:active { opacity: .6 }