/* Screen styles: lifestyle group (Trips, Notes, Shopping List, Electricity,
   Categories & Settings). Uses the tokens in app.css. */

.ls-stack { gap: 18px; }

/* A record row with room for a checkbox before it and buttons after it. */
.ls-item { display: flex; align-items: center; position: relative; }
.ls-item + .ls-item::before { content: ""; position: absolute; left: 64px; right: 0; top: 0; height: 1px; background: var(--hair-2); }
.ls-item > .rec-row { flex: 1; min-width: 0; }
.ls-item > .rec-row:hover { background: none; }
.ls-item:hover { background: var(--fill-soft); }
.ls-item.dim > .rec-row { opacity: .6; }
.ls-item .rec-title { overflow-wrap: anywhere; }
.ls-actions { display: flex; align-items: center; gap: 2px; padding-right: 8px; flex: none; }
.ls-actions .btn-sm:not(.btn-icon) { padding-inline: 10px; }
.ls-hidden { visibility: hidden; }
.ls-pinned { color: var(--accent-ink); }
.ls-unpinned { color: var(--text-2); opacity: .55; }
.ls-unpinned:hover { opacity: 1; }
.ls-check { display: grid; place-items: center; padding-left: 14px; cursor: pointer; }
.ls-check input { width: 18px; height: 18px; accent-color: var(--accent-fill); cursor: pointer; }
.ls-item:has(.ls-check) > .rec-row { padding-left: 10px; }
.ls-item:has(.ls-check) + .ls-item::before { left: 96px; }

/* ---------- Trips ---------- */

.ls-trip-hero {
  --hero-ink: #fff;
  border-radius: var(--radius-hero); padding: 18px; color: var(--hero-ink);
  background: linear-gradient(135deg, var(--trip, var(--accent)), color-mix(in srgb, var(--trip, var(--accent)) 75%, transparent));
  display: flex; flex-direction: column; gap: 8px;
}
.ls-trip-hero.light-ink { --hero-ink: #3b2016; }
.ls-hero-label { font-size: 13px; font-weight: 700; opacity: .75; }
.ls-hero-figure { font-size: 32px; font-weight: 700; line-height: 1.1; }
.ls-hero-caption { font-size: 13px; opacity: .88; }
.ls-hero-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--hero-ink) 25%, transparent); overflow: hidden; }
.ls-hero-bar span { display: block; height: 100%; border-radius: inherit; background: var(--hero-ink); }
.ls-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-hero-chips span { background: color-mix(in srgb, var(--hero-ink) 16%, transparent); border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.ls-hero-chips b { font-weight: 700; }
.ls-cat-list { display: flex; flex-direction: column; gap: 8px; }
.ls-cat-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ls-pct { width: 40px; text-align: right; font-size: 12px; color: var(--text-2); flex: none; }
.ls-entry { display: flex; align-items: center; gap: 4px; }
.ls-entry > .tx-row { flex: 1; min-width: 0; }
.ls-entry + .ls-entry { border-top: 1px solid var(--hair); }
.ls-entry > .tx-row + .tx-row { border-top: 0; }
.ls-pick-tools { flex-wrap: wrap; gap: 10px; }
.ls-pick-tools .input { flex: 1 1 220px; min-width: 0; }
.ls-pick-list { max-height: min(52vh, 460px); overflow: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hair); }
.ls-pick { display: flex; align-items: center; gap: 10px; padding: 2px 12px; cursor: pointer; }
.ls-pick + .ls-pick { border-top: 1px solid var(--hair); }
.ls-pick:hover { background: var(--fill-soft); }
.ls-pick input { width: 16px; height: 16px; accent-color: var(--accent-fill); flex: none; }
.ls-pick .tx-row { padding: 6px 0; }

/* ---------- Shopping List & Price Book ---------- */

.ls-search { margin-bottom: 8px; }
.ls-price-list { display: flex; flex-direction: column; }
.ls-price-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 4px; width: 100%;
  background: none; border: 0; color: inherit; text-align: left; cursor: pointer; border-radius: 10px;
}
.ls-price-row + .ls-price-row { border-top: 1px solid var(--hair); border-radius: 0; }
.ls-price-row:hover { background: var(--fill-soft); }
.ls-price-row .grow { min-width: 0; }
.ls-price-fig { gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }
.ls-promo {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px;
  background: var(--accent-fill); color: var(--on-accent); font-size: 11px; font-weight: 700; white-space: nowrap;
}
.ls-change { font-size: 12px; font-weight: 600; white-space: nowrap; }
.ls-up { color: var(--expense); }
.ls-down { color: var(--income); }
.ls-trip-disc { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--accent-ink); background: var(--accent-soft); }
.ls-hist-head { display: flex; flex-direction: column; gap: 4px; }
.ls-hist-figure { font-size: 30px; font-weight: 700; }
.ls-lowest { font-weight: 600; }
.ls-hist-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.ls-hist-row + .ls-hist-row { border-top: 1px solid var(--hair); }

/* ---------- Electricity ---------- */

.ls-rate { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.ls-rate-label { font-weight: 600; }
.ls-rate-input { width: 120px; text-align: right; }
.ls-rate .grow { flex: 1 1 200px; }
.ls-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-preset { border: 0; cursor: pointer; font-family: inherit; padding: 5px 11px; font-size: 13px; }
.ls-preset:hover { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- Categories & Settings ---------- */

.ls-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ls-setting-row .select { width: auto; min-width: 140px; }
.ls-settings .panel-title { flex-wrap: wrap; }
.ls-cat-table { margin-top: 6px; }
.ls-cat-item + .ls-cat-item { border-top: 1px solid var(--hair-2); }
.ls-cat-item.dim .ls-cat-main > :not(.check) { opacity: .55; }
.ls-cat-main { display: flex; align-items: center; gap: 12px; padding: 9px 12px; }
.ls-cat-main .grow { min-width: 0; }
.ls-cat-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 3px; }
.ls-swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px var(--hair-2); }
.ls-swatch.round { border-radius: 50%; }
.ls-colour { max-width: 150px; }
.ls-add-row { margin-top: 10px; gap: 8px; flex-wrap: wrap; }
.ls-add-row .input { flex: 1 1 180px; min-width: 0; width: auto; }
.ls-subs { padding: 4px 12px 12px 58px; display: flex; flex-direction: column; gap: 4px; }
.ls-sub-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.ls-sub-row .icon { color: var(--text-2); }
.ls-tag-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; }
.ls-tag-row + .ls-tag-row { border-top: 1px solid var(--hair-2); }
.ls-tag-row .grow { min-width: 0; }
.ls-tag-row > .icon { color: var(--accent-ink); }
.ls-settings-table td { vertical-align: top; }
.ls-key { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.ls-val { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 560px) {
  .ls-item:has(.ls-check) .rec-row .tile { display: none; }
  .ls-item:has(.ls-check) + .ls-item::before { left: 44px; }
  .ls-item .rec-row { gap: 8px; padding-inline: 10px; }
  .ls-item .rec-title.truncate { white-space: normal; overflow-wrap: anywhere; }
  .ls-actions .btn-icon { padding: 4px; }
  .ls-actions { padding-right: 4px; }
  .ls-actions .btn-sm:not(.btn-icon) { padding-inline: 8px; }
  .ls-subs { padding-left: 16px; }
  .ls-hero-figure { font-size: 28px; }
  .ls-cat-main { flex-wrap: wrap; }
}