/* Visual reference: fz.wiki and the locally saved October 2026 archive.
   Shared appearance layer; component sizing and ledger behavior stay upstream. */
:root {
  --r-sm: .2rem;
  --r: .3rem;
  --r-lg: .4rem;
  --control-r: .25rem;
  --archive-radius: .3rem;
  --archive-grid: #11182705;
  --archive-heading: #edf0f2;
  --archive-grain: url("industrial-grain.svg");
  --archive-etch: #2634450d;
  --archive-edge: #ffffff8c;
  --archive-contour: #85752c0e;
  --archive-hatch: repeating-linear-gradient(125deg, transparent 0 9px, var(--archive-etch) 9px 10px);
  --shadow: 0 2px 3px #11182703;
}
html[data-theme="dark"] {
  --archive-grid: #ffffff04;
  --archive-heading: #242426;
  --archive-etch: #dce6f00b;
  --archive-edge: #ffffff0d;
  --archive-contour: #e3ce7210;
}
body {
  background-image: linear-gradient(var(--archive-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--archive-grid) 1px, transparent 1px);
  background-size: 40px 40px;
}
.sidebar {
  background: var(--surface);
  border-right-color: var(--line-strong);
}
.sidebar__brand { padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.brand-suffix { letter-spacing: .1em; font-size: .5rem; }
.search, .user { border-radius: var(--archive-radius); box-shadow: none; }
.search { background: var(--canvas); }
.nav__group {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .625rem;
  letter-spacing: .14em;
}
.nav__group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.nav__item { border-radius: .2rem; }
.nav__item.is-active { box-shadow: inset 3px 0 var(--accent); }
.sidebar__foot { border-top: 1px solid var(--line); }
.topbar {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-strong);
  position: relative;
  margin-bottom: .6rem;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 3rem;
  height: 3px;
  background: var(--accent);
}
.workspace-kicker {
  margin: 0 0 .4rem;
  font: 600 .55rem/1.5 var(--font-mono);
  letter-spacing: .16em;
  color: var(--ink-3);
}
.workspace-kicker span { color: var(--accent-strong); margin: 0 .35rem; }
.topbar h1 { font-size: 1.7rem; letter-spacing: .02em; font-weight: 750; }
.crumbs { margin-top: .4rem; }
.storage-bar { margin-bottom: 1rem; }
/* Keep page coordinates stable during navigation and focus restoration. */
.view.is-active { animation-name: archive-reveal; }
@keyframes archive-reveal { from { opacity: 0; } to { opacity: 1; } }
.btn, .icon-btn, .row-btn, .conv-tab, .conv-row__input,
.data-form input, .data-form select, .filter-input, .filter-select {
  border-radius: var(--control-r);
}
.btn--primary { border: 1px solid var(--accent-strong); box-shadow: inset 0 1px #ffffff38; }
.btn:not(:disabled):hover, .icon-btn:hover { border-color: var(--accent-strong); }
.card, .metric, [data-view-panel="dashboard"] .card,
[data-view-panel="dashboard"] .metric {
  border-radius: var(--archive-radius);
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 var(--archive-edge), var(--shadow);
  background-image: var(--archive-grain);
  background-size: 160px 160px;
}
.card__title { letter-spacing: .035em; }
[data-view-panel="dashboard"] .card > .card__head,
[data-view-panel="dashboard"] .card > .hero__head {
  border-radius: var(--archive-radius) var(--archive-radius) 0 0;
  background: var(--archive-grain), var(--archive-hatch), linear-gradient(100deg, var(--archive-heading), var(--surface));
  box-shadow: inset 0 1px 0 var(--archive-edge);
  border-bottom: 1px solid var(--line);
}
[data-view-panel="dashboard"] .card > .card__head .card__title,
[data-view-panel="dashboard"] .hero__head .hero__title {
  border-left-width: 3px;
  border-left-color: var(--accent);
}
[data-view-panel="dashboard"] #metrics .metric {
  background: var(--archive-grain), radial-gradient(ellipse at 110% 110%, var(--resource-tint), transparent 75%), var(--surface);
  border-top-width: 3px;
}
[data-view-panel="dashboard"] #metrics .metric__label {
  background: var(--archive-grain), var(--archive-hatch), linear-gradient(100deg, var(--resource-tint), var(--surface));
  box-shadow: inset 0 1px 0 var(--archive-edge);
  border-radius: 0;
}
.metric__value { letter-spacing: -.04em; }
[data-view-panel="dashboard"] .card__foot {
  background: var(--archive-grain), var(--canvas);
  border-radius: 0 0 var(--archive-radius) var(--archive-radius);
}
[data-view-panel="dashboard"] .hero:not(.hero--chart),
[data-view-panel="dashboard"] .hero.hero--chart {
  background-color: var(--surface);
  background-image: var(--archive-grain), radial-gradient(ellipse at 100% 0, #f2cc0012, transparent 65%);
  background-size: auto;
}
/* Broad, faint contour lines belong to the summary surface, not the chart. */
[data-view-panel="dashboard"] .hero:not(.hero--chart) {
  background-image: var(--archive-grain),
    repeating-radial-gradient(ellipse at 115% 130%, transparent 0 30px, var(--archive-contour) 31px 32px, transparent 33px 62px),
    radial-gradient(ellipse at 100% 0, #f2cc0012, transparent 65%);
}
[data-view-panel="dashboard"] .hero.hero--chart {
  background-image: var(--archive-grain), radial-gradient(circle, var(--dash-dot) .7px, transparent 1px);
  background-size: 160px 160px, 14px 14px;
}
[data-view-panel="dashboard"] #trendMetrics .metric { background-image: var(--archive-grain); }
[data-view-panel="dashboard"] #trendMetrics .metric__label {
  background: var(--archive-grain), var(--archive-hatch), var(--archive-heading);
  box-shadow: inset 0 1px 0 var(--archive-edge);
  border-radius: 0;
}
.card__head .card__title { padding-left: .65rem; border-left: 3px solid var(--accent); }
.op-card { border-radius: .2rem; border-color: var(--line-strong); box-shadow: none; }
.op-card:hover { border-color: var(--accent-strong); box-shadow: 0 6px 18px #11182714; }
.op-card__art {
  background-image: linear-gradient(135deg, transparent 60%, var(--grid-line));
}
.op-card__panel {
  padding: .6rem .55rem .5rem;
  background-image: var(--archive-grain);
  box-shadow: inset 0 1px 0 var(--archive-edge);
}
.ef-filter__btn { border-radius: var(--control-r); }
.ef-filter__btn.is-active { box-shadow: inset 0 -2px var(--accent-strong); }
.conv-sum { border-radius: var(--archive-radius); }
.hero__value { letter-spacing: -.05em; }
.table thead th, .ef-table thead th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  font-size: .7rem;
  letter-spacing: .04em;
}
.table tbody tr:hover { background: var(--surface-2); }
.progress, .progress > *, .bar__fill { border-radius: 1px; }
.ef-pool, .ef-stat, .ef-banner, .ef-json { border-radius: var(--archive-radius); }
.modal { border-radius: .4rem; }
:where(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .workspace-kicker { font-size: .5rem; letter-spacing: .1em; }
  .topbar h1 { font-size: 1.4rem; }
  .topbar { padding-bottom: .85rem; }
  .mobile-bar { background: var(--surface); border-bottom-color: var(--line-strong); }
}