/* ============================================================================
   redesign:web-WS7b-logbook-money — styling for Log › Logbook (+ import), Log › Money (Ledger),
   Log › Sessions (list + detail), the Flight-operations event-log / cost cards and the radio-notes
   (ATIS / Departure / Taxi) cards.

   Loaded AFTER kit.css. Tokens only (--c-* and the kit helpers): a theme change (Day / Dusk / Night)
   recolours every rule with no JS. No colour literals; radius 0; 1px hairline; nothing animates and
   nothing flashes. Web type floor: 11px for UPPERCASE tracked labels only, 12px for everything else.
   Class prefix lm- (log / money).
   ============================================================================ */

/* ---- page furniture --------------------------------------------------------------------------- */
.lm-page { max-width: var(--content-max, 1240px); }
.lm-body { margin-top: 16px; }
.lm-note { font-size: 12px; color: var(--c-ink-3); margin-top: 10px; max-width: 86ch; }
.lm-lede { font-size: 13px; color: var(--c-ink-2); margin-top: 8px; max-width: 86ch; }
.lm-back { display: inline-block; margin-bottom: 8px; font: 600 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-ink); }
.lm-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.lm-actions .push { margin-left: auto; }
.lm-card { padding: 14px 16px; }
.lm-card > h3, .lm-card > .sec-label { margin: 0 0 8px; }
.lm-card + .lm-card { margin-top: 14px; }
.lm-card .lm-card-note { font-size: 12px; color: var(--c-ink-3); margin: 0 0 10px; }
.lm-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 899.98px) { .lm-cols2 { grid-template-columns: 1fr; } }
.lm-fields { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.lm-fields > .field { flex: 1 1 150px; min-width: 0; margin-bottom: 8px; }
.lm-fields > .field.sm { flex: 0 1 120px; }
.lm-fields > .field.lg { flex: 2 1 260px; }
.lm-inline-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lm-sec { margin-top: 26px; }
.lm-sec > .sec-head { margin-top: 0; margin-bottom: 8px; }
.lm-tabs { margin-top: 14px; }
.lm-tabs .seg-opt.gated:not(.active) { color: var(--c-ink-2); }
.lm-tabs .seg > .gated.active, .lm-tabs .seg > .gated[aria-current] { color: var(--c-on-accent); }

/* the money / logbook tables use the kit's .table skin on plain <table>s too */
.lm-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.lm-table th { font: 600 11px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.lm-table td { padding: 8px 10px; border-bottom: 1px solid var(--c-line-2); vertical-align: top; }
.lm-table tbody tr:last-child td { border-bottom: 0; }
.lm-table .num, .lm-table th.num { text-align: right; white-space: nowrap; }
.lm-table .sub { font-size: 12px; color: var(--c-ink-2); }
.lm-scroll { overflow-x: auto; }

/* ---- Money: count tiles + spend by month -------------------------------------------------------- */
.lm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 18px; }
.lm-tile { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lm-tile .lm-k { font: 600 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.lm-tile .lm-v { font: 600 28px/1.1 var(--font-heading); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.lm-tile .lm-sub { font-size: 12px; color: var(--c-ink-2); }
.lm-tile .lm-why { margin-top: 6px; align-self: flex-start; }
.lm-tile.nodata .lm-v { color: var(--c-ink-2); }

.lm-chart { padding: 14px; }
.lm-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lm-chart-head .lm-src { font-size: 12px; color: var(--c-ink-3); }
.lm-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 10px; border-bottom: 1px solid var(--c-line); }
.lm-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.lm-seg { display: block; width: 100%; min-height: 0; }
.lm-seg.s1 { background: var(--c-accent); }
.lm-seg.s2 { background: repeating-linear-gradient(135deg, var(--c-accent-ink) 0 3px, var(--c-surface) 3px 5px); border-top: 1px solid var(--c-accent-ink); }
.lm-seg.s3 { background: var(--c-ink-3); }
.lm-months { display: flex; justify-content: space-between; gap: 6px; font: 500 11px/1 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); margin-top: 4px; }
.lm-months > span { flex: 1 1 0; text-align: center; min-width: 0; }
.lm-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--c-ink-2); }
.lm-legend i { display: inline-block; width: 14px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.lm-legend i.s1 { background: var(--c-accent); }
.lm-legend i.s2 { background: repeating-linear-gradient(135deg, var(--c-accent-ink) 0 3px, var(--c-surface) 3px 5px); border: 1px solid var(--c-accent-ink); }
.lm-legend i.s3 { background: var(--c-ink-3); }
.lm-chart details { margin-top: 10px; }
.lm-chart summary { cursor: pointer; font-size: 12px; color: var(--c-accent-ink); }
.lm-receipt { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; font: 600 11px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--c-line-control); color: var(--c-ink-2); white-space: nowrap; }
.lm-receipt.filed { background: var(--c-accent-tint); border-color: var(--c-accent); color: var(--c-accent-ink); }
.lm-receipt.none { border-style: dashed; }
.lm-lock { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Logbook ------------------------------------------------------------------------------------ */
.lm-kv-full .pvkv { grid-template-columns: minmax(170px, 280px) 1fr; }
.lm-import-list { max-height: 360px; overflow: auto; border: 1px solid var(--c-line); margin: 10px 0; }
.lm-check { display: inline-flex; gap: 8px; align-items: center; margin-right: 16px; font-size: 14px; min-height: 44px; }
.lm-check input { width: auto; }

/* ---- Sessions: list ----------------------------------------------------------------------------- */
.lm-radio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 8px; }
.lm-record h3 { margin: 0 0 8px; font-size: 17px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lm-record ol { margin: 6px 0 0 18px; padding: 0; font-size: 14px; }
.lm-record .lm-inline-actions { margin-top: 10px; }

/* ---- Sessions: detail --------------------------------------------------------------------------- */
.lm-player { margin-top: 16px; }
.lm-player-row { display: flex; align-items: center; gap: 12px; }
.lm-play { flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; }
.lm-scrub { position: relative; flex: 1 1 auto; height: 44px; min-width: 0; }
.lm-track { position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: var(--c-line-control); }
.lm-fill { position: absolute; left: 0; top: 20px; height: 4px; width: 0; background: var(--c-accent); }
.lm-tick { position: absolute; width: 2px; background: var(--c-ink-3); pointer-events: none; transform: translateX(-1px); }
.lm-tick.own { top: 10px; height: 24px; background: var(--c-accent); }
.lm-tick.oth { top: 15px; height: 14px; }
.lm-tick.alert { top: 6px; height: 32px; background: var(--c-caution-fill); outline: 1px solid var(--c-caution); outline-offset: 0; }
.lm-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.lm-scrub:focus-within { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.lm-time { flex: 0 0 auto; font: 600 14px/1 var(--font-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lm-time span { color: var(--c-ink-2); font-weight: 400; }
.lm-player-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: 12px; color: var(--c-ink-2); }
.lm-player-meta select { height: 36px; width: auto; }
.lm-player-meta label, .lm-player-meta a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.lm-player-meta a { color: var(--c-accent-ink); }
.lm-timeline-ends { display: flex; justify-content: space-between; gap: 10px; font: 500 11px/1 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); margin-top: 6px; }

.lm-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; margin-top: 14px; align-items: start; }
@media (max-width: 959.98px) { .lm-detail-grid { grid-template-columns: 1fr; } }
.lm-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lm-stream { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lm-tx { padding: 10px 14px; border-left: 3px solid transparent; }
.lm-tx.own { border-left-color: var(--c-accent); }
.lm-tx.alert-high, .lm-tx.alert-critical { border-left-color: var(--c-caution); }
.lm-tx.alert-critical { border-left-color: var(--c-blocking); }
.lm-tx-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lm-tx-time { font: 600 13px/1.2 var(--font-heading); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.lm-tx-meta { font: 500 12px/1.2 var(--font-heading); letter-spacing: .06em; color: var(--c-ink-2); }
.lm-who { font: 600 11px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-ink); border: 1px solid var(--c-accent); padding: 3px 6px; }
.lm-conf { margin-left: auto; font: 500 11px/1 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); }
.lm-conf.low { color: var(--c-caution); }
.lm-tx-alerts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.lm-tx-text { font-size: 15px; margin-top: 4px; overflow-wrap: anywhere; }
.lm-tx-raw { font: 12px/1.4 ui-monospace, Menlo, monospace; color: var(--c-ink-2); margin-top: 3px; overflow-wrap: anywhere; }
.lm-tx audio { margin-top: 6px; width: 100%; max-width: 420px; height: 34px; }
.lm-tx-notes { margin-top: 6px; }
.lm-note-row { margin-top: 6px; padding: 6px 10px; border: 1px solid var(--c-line-control); font-size: 13px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.lm-note-row.flagged { border-color: var(--c-caution); }
.lm-note-row .lm-note-who { font: 600 11px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); }
.lm-note-row.flagged .lm-note-who { color: var(--c-caution); }
.lm-note-row .note-text { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.lm-tx details.lm-note-add { margin-top: 6px; }
.lm-tx details.lm-note-add > summary { cursor: pointer; font-size: 12px; color: var(--c-accent-ink); min-height: 44px; display: flex; align-items: center; }
.lm-tx details.lm-note-add .row { margin-top: 6px; align-items: center; }
.lm-tx details.lm-note-add input.tx-note-input { flex: 2 1 180px; min-width: 0; }
.lm-aside .lm-card h6, .lm-aside .lm-card .sec-label { margin: 0 0 6px; }
.lm-alert-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lm-match-state { font-size: 13px; }
.lm-flagtag { font: 600 11px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-caution); border: 1px solid var(--c-caution); padding: 1px 6px; }

/* ---- Flight operations: event log + cost cards -------------------------------------------------- */
.lm-fop { padding: 14px 16px; }
.lm-fop > h3 { margin: 0 0 6px; }
.lm-fop .row { margin-top: 10px; }
.lm-fop .lm-hint { font-size: 12px; color: var(--c-ink-2); margin: 0; max-width: 86ch; }

/* the phone-only account line under the vendor (the Account column is dropped below 600px) */
.lm-phone-only { display: none; }

/* ---- phones ------------------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  .lm-table .col-acct { display: none; }
  .lm-phone-only { display: block; }
  .lm-tile .lm-v { font-size: 24px; }
  .lm-player-row { gap: 8px; }
  .lm-bars { gap: 3px; }
  .lm-months { font-size: 12px; letter-spacing: 0; }
  .lm-kv-full .pvkv { grid-template-columns: 1fr; }
  .lm-kv-full .pvk { border-bottom: 0; padding-bottom: 0; }
}