/*
 * waylog 车本全局样式 — 跨页混合段
 * 职责：ledger 分类列表（category-rail/category-row/category-*）、bottom-tabbar、workbench、quick-panel 与 ledger-count。按原文件顺序切分，无法按页面完整归组。
 * 拆分自原 styles.css 第 2033-2345 行：规则内容零改动，仅按行切分；级联顺序 = 本文件在 index.html 中的链接顺序。
 * EV 暗色主题适配：bottom-tabbar 悬浮玻璃胶囊条+激活辉光（配方5）；分类行/空态/计数井走控件井+发丝线语言。
 */
.category-rail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-md);
}

.category-row {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "label values"
    "track track";
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-radius: var(--control-radius);
  background: color-mix(in oklch, var(--surface), var(--tone-color, var(--line)) 10%);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--tone-color, var(--line)), transparent 74%);
  color: inherit;
  font: inherit;
  text-align: left;
  overflow: hidden;
}

button.category-row:hover {
  background: color-mix(in oklch, var(--surface), var(--tone-color, var(--line)) 15%);
}

button.category-row:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--tone-color, var(--green)), transparent 24%);
  outline-offset: 2px;
}

.ledger-panel {
  scroll-margin-top: var(--space-md);
}

.category-label {
  grid-area: label;
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-areas:
    "icon name"
    "icon total";
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  overflow: hidden;
}

.category-icon {
  grid-area: icon;
  align-self: center;
  width: 25px;
  height: 25px;
  color: var(--tone-color, var(--green));
  stroke-width: 2.35;
}

.category-name-line {
  grid-area: name;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.category-name {
  min-width: 0;
  color: color-mix(in oklch, var(--ink), transparent 14%);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-count,
.filter-count {
  flex: 0 0 auto;
  min-width: 0;
  color: color-mix(in oklch, var(--muted), var(--tone-color, var(--line)) 22%);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.category-total {
  grid-area: total;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: "Avenir Next Condensed", "DIN Condensed", "PingFang SC", sans-serif;
  font-size: 1rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-total.is-income {
  color: var(--green);
}

.category-track {
  grid-area: track;
  width: 100%;
  min-width: 0;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--line), transparent 46%);
  overflow: hidden;
}

.category-track i {
  display: block;
  width: max(4px, var(--size));
  height: 100%;
  border-radius: inherit;
  background: var(--tone-color, var(--green));
}

.category-row.has-income .category-track i {
  background: linear-gradient(90deg, var(--tone-color, var(--green)), var(--green));
}

[data-tone="green"] {
  --tone-color: var(--green);
}

[data-tone="blue"] {
  --tone-color: var(--blue);
}

[data-tone="amber"] {
  --tone-color: var(--amber);
}

[data-tone="olive"] {
  --tone-color: var(--olive);
}

[data-tone="mint"] {
  --tone-color: var(--mint);
}

[data-tone="cyan"] {
  --tone-color: var(--cyan);
}

[data-tone="red"] {
  --tone-color: var(--red);
}

[data-tone="navy"] {
  --tone-color: var(--navy);
}

[data-tone="gray"] {
  --tone-color: var(--gray);
}

.category-values {
  grid-area: values;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  display: grid;
  gap: 2px;
  text-align: right;
  overflow: hidden;
}

.category-values small {
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-empty-note {
  grid-column: 1 / -1;
  min-height: 38px;
  padding: 0 var(--space-md);
  border-radius: var(--control-radius);
  color: var(--muted);
  background: color-mix(in oklch, var(--surface), var(--canvas) 46%);
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: flex;
  align-items: center;
  font-size: var(--type-control-sm);
  font-weight: 800;
}

.bottom-tabbar {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100% - 20px);
  min-height: 58px;
  display: grid;
  grid-template-columns: repeat(3, 72px);
  justify-content: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--glass-strong);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  box-shadow: var(--shadow-raise), var(--soft-edge);
  transform: translateX(-50%);
}

.tab-button {
  width: 72px;
  height: 46px;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-weight: 900;
  font-size: 0.68rem;
  line-height: 1;
}

.tab-button .lucide {
  width: 21px;
  height: 21px;
}

.tab-button.is-active {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent), transparent 62%), 0 0 18px color-mix(in oklch, var(--accent), transparent 72%);
}

.tab-add .lucide {
  width: 25px;
  height: 25px;
}

.workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: var(--space-xl);
  align-items: start;
}

.quick-panel,
.vehicle-panel,
.insight-panel,
.ledger-panel {
  padding: var(--space-xl);
}

.quick-panel.is-editing {
  background: color-mix(in oklch, var(--surface-panel), var(--blue) 5%);
  box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in oklch, var(--blue), transparent 48%);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xs) var(--space-md);
  align-items: start;
  margin-bottom: var(--space-lg);
}

.section-heading > p,
.section-heading > h1,
.section-heading > h2 {
  grid-column: 1;
}

.section-heading:has(.entry-photo-picker) > h1 {
  align-self: end;
}

.ledger-count {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 30px;
  max-width: min(220px, 44vw);
  padding: 0 10px;
  border-radius: var(--control-radius);
  align-self: end;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  background: color-mix(in oklch, var(--surface), var(--canvas) 42%);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: var(--type-control-sm);
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}