:root {
  --ink: #1c1712;
  --paper: #f4efe4;
  --card: #fffdf8;
  --line: #e2d8c6;
  --muted: #6f6456;
  --copper: #c45c26;
  --up: #1f7a4d;
  --down: #b13333;
  --shadow: 0 10px 30px rgba(40, 28, 12, 0.08);
  --safe: env(safe-area-inset-bottom, 0px);
}

html[data-theme] {
  --ink: color-mix(in srgb, var(--theme) 58%, #1c1712);
  --paper: color-mix(in srgb, var(--theme) 16%, #f4efe4);
  --card: color-mix(in srgb, var(--theme) 7%, #fffdf8);
  --line: color-mix(in srgb, var(--theme) 22%, #e2d8c6);
  --muted: color-mix(in srgb, var(--theme) 28%, #6f6456);
  --copper: var(--theme);
}
html[data-theme] body {
  background:
    radial-gradient(1200px 500px at 10% -10%, color-mix(in srgb, var(--theme) 30%, #fff) 0%, transparent 55%),
    var(--paper);
}
html[data-theme] .primary,
html[data-theme] .dock button.on {
  background: var(--theme);
  border-color: var(--theme);
  color: #fff;
}
html[data-theme] .link,
html[data-theme] .holding b .tag {
  color: var(--theme);
  border-color: var(--theme);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  background:
    radial-gradient(1200px 500px at 10% -10%, #f8e7cf 0%, transparent 50%),
    var(--paper);
  color: var(--ink);
  padding-bottom: calc(88px + var(--safe));
}

#app { max-width: 920px; margin: 0 auto; padding: 18px 16px 24px; }
body.signed-out { padding-bottom: 24px; }
.session-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 13px;
}
.session-bar b { color: var(--ink); }
.login-page {
  max-width: 420px;
  margin: 8vh auto 0;
}
.login-page h1 { margin-bottom: 8px; }
.login-users { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 16px; }
.login-user {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 14px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  color: inherit;
  width: 100%;
}
.login-user.on { box-shadow: 0 0 0 2px var(--chip, var(--copper)); }
.login-user b { font-size: 16px; }
.login-user small { color: var(--muted); font-size: 12px; }
.login-error { color: var(--down); margin: 0; font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}
.eyebrow { margin: 0; letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; }
h1 { margin: 2px 0 0; font-size: 28px; font-weight: 600; }
h2 { margin: 0 0 10px; font-size: 18px; }

.hero, .panel, .detail-hero, .member-card, .holding, .form, .sheet, .bucket, .year-block, .type-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.hero { padding: 18px; margin-bottom: 14px; }
.hero.compact { padding: 14px 16px; }
.hero-main span, .hero-grid span, .facts span, .bucket span { color: var(--muted); font-size: 12px; font-family: ui-sans-serif, system-ui, sans-serif; }
.hero-main strong { display: block; font-size: 34px; margin: 4px 0; }
.hero-main em { color: var(--muted); font-style: normal; font-size: 13px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 0; }
.hero.compact .hero-grid { grid-template-columns: 1fr 1fr 1fr; }
.hero-grid b { display: block; font-size: 18px; }

.top-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.type-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.type-tile { padding: 14px; }
.type-tile > .tile-title {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  font-family: inherit;
}
.type-tile dl { display: grid; gap: 8px; margin: 10px 0 6px; }
.type-tile dt { color: var(--muted); font-size: 12px; font-family: ui-sans-serif, system-ui, sans-serif; }
.type-tile dd { margin: 2px 0 0; font-size: 20px; font-weight: 600; }
.type-tile small { display: block; color: var(--muted); font-size: 12px; }
.type-tile.expected-tile { grid-column: 1 / -1; padding: 16px; }
.type-tile.expected-tile > b { display: block; font-size: 32px; margin: 8px 0 10px; }
.expected-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.expected-meta span { display: block; color: var(--muted); font-size: 12px; font-family: ui-sans-serif, system-ui, sans-serif; }
.expected-meta strong { display: block; font-size: 16px; margin-top: 2px; }
.type-tile.total {
  grid-column: 1 / -1;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}
.type-tile.total b { font-size: 18px; margin: 0; }
.type-tile.total small { margin: 0; }
.invest-chart { width: 100%; height: 140px; color: var(--copper); margin: 8px 0 12px; }
.invest-chart .bar { fill: var(--copper); opacity: 0.45; }
.type-tile .link { margin-top: 8px; display: inline-block; }
.year-split {
  list-style: none; margin: 8px 0 0; padding: 0;
  max-height: 132px; overflow: auto;
  font-size: 12px;
}
.year-split li {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--line);
}
.year-split b { font-size: 12px; font-weight: 600; }

.missed-banner, .await-banner {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--down);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.await-banner { border-left-color: var(--copper); }
.missed-banner b, .await-banner b { display: block; margin-bottom: 4px; }
.missed-banner span, .await-banner span { color: var(--muted); font-size: 13px; }
.missed-banner ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.await-banner .primary { margin-top: 10px; width: auto; min-width: 180px; }

.confirm-cat {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 6px 0;
}
.confirm-cat header { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.confirm-cat strong { display: block; font-size: 16px; margin: 2px 0 4px; }
.confirm-cat small, .confirm-cat em { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.confirm-actions .primary,
.confirm-actions .ghost { width: auto; min-height: 32px; padding: 4px 10px; font-size: 13px; }

.acc-table th:nth-child(2), .acc-table th:nth-child(3),
.acc-table td:nth-child(2), .acc-table td:nth-child(3) { text-align: right; }
.acc-bar {
  display: block;
  height: 6px;
  margin-top: 6px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.acc-bar i { display: block; height: 100%; background: var(--copper); border-radius: 99px; }

.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--muted); }

.chips, .toolbar, .actions, .row-head { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chips { margin: 0 0 14px; }
.chip, .ghost, .primary, .file {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 40px;
}
.chip.on { background: var(--chip, var(--copper)); color: #fff; border-color: transparent; }
.primary { background: var(--ink); color: #fff; border-color: var(--ink); width: 100%; }
.ghost.danger, .danger, .danger-text { color: var(--down); }
.danger-text { background: none; border: 0; width: 100%; margin: 16px 0 8px; }
.link { background: none; border: 0; color: var(--copper); padding: 0; min-height: 0; }

.member-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.member-card {
  padding: 14px; border-top: 4px solid var(--chip);
  text-align: left; color: inherit; width: 100%;
}
.member-card.on { box-shadow: 0 0 0 2px var(--chip); }
.member-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.member-card strong { display: block; font-size: 20px; margin: 8px 0 4px; color: var(--ink); }
.member-card p, .member-card small { margin: 0; color: var(--muted); font-size: 12px; }

.avatar, .avatar-lg {
  width: 48px; height: 48px; border-radius: 50%;
  border: 0;
  background: var(--chip, var(--copper));
  color: #fff;
  display: grid; place-items: center;
  overflow: hidden;
  padding: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
}
.avatar img, .avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-lg { width: 64px; height: 64px; font-size: 20px; }

.buckets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.bucket { padding: 14px; }
.bucket b { display: block; font-size: 20px; margin-top: 6px; }
.bucket em { display: block; font-size: 12px; color: var(--muted); font-style: normal; }

.panel { padding: 16px; margin: 12px 0; }
.list { display: grid; gap: 8px; }
.holding {
  width: 100%;
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  text-align: left;
}
.holding .bar { width: 8px; height: 36px; border-radius: 99px; background: var(--chip, var(--copper)); }
.holding span, .holding em, .holding small { color: var(--muted); font-size: 12px; display: block; }
.holding .right { text-align: right; }
.holding > div > b { display: block; }
.holding b .tag {
  font-size: 10px; font-style: normal; font-family: ui-sans-serif, system-ui, sans-serif;
  color: var(--copper); border: 1px solid var(--copper); border-radius: 999px;
  padding: 1px 6px; margin-left: 6px; display: inline;
}

.toolbar { margin-bottom: 12px; }
.toolbar input, .toolbar select, .form input, .form select, .form textarea, .sheet input, .sheet select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  font-size: 16px;
}
.form, .sheet .form { display: grid; gap: 12px; padding: 16px; }
.form.compact { padding: 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
textarea { min-height: 80px; resize: vertical; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 500; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
td, th { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
td small { display: block; color: var(--muted); }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.facts div, .extras div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.detail-hero { padding: 18px; border-top: 5px solid var(--chip); }
.detail-hero strong { display: block; font-size: 32px; margin: 6px 0; }
.detail-hero > small { display: block; color: var(--muted); margin-top: 10px; }
.detail-pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.detail-pay span { color: var(--muted); font-size: 12px; font-family: ui-sans-serif, system-ui, sans-serif; }
.detail-pay b { display: block; font-size: 20px; margin-top: 4px; }
.detail-pay em { display: block; font-style: normal; color: var(--muted); font-size: 12px; margin-top: 4px; }
.spark { width: 100%; height: 40px; color: var(--copper); margin-top: 10px; }
.actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0; }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); }

.year-list { display: grid; gap: 10px; }
.year-block { padding: 14px; }
.year-block header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.year-block header b { font-size: 20px; }
.year-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  width: 100%;
  background: none;
  border-left: 0; border-right: 0; border-bottom: 0;
  border-radius: 0;
  text-align: left;
  color: inherit;
}
.year-item small { color: var(--muted); }

.people-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.dock {
  position: fixed;
  left: 12px; right: 12px; bottom: calc(10px + var(--safe));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px;
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  z-index: 5;
}
.dock button { border: 0; background: transparent; border-radius: 12px; padding: 10px 6px; font-size: 13px; }
.dock button.on { background: var(--ink); color: #fff; }

#modal {
  position: fixed; inset: 0; background: rgba(28, 23, 18, 0.35);
  display: grid; align-items: end; z-index: 20;
}
#modal[hidden] { display: none; }
.sheet { margin: 12px; padding: 16px; max-height: 88vh; overflow: auto; }
.confirm-sheet {
  max-width: 360px;
  width: calc(100% - 24px);
  margin: 12px auto;
  padding: 12px 14px;
  max-height: 70vh;
}
.confirm-sheet h2 { font-size: 16px; margin: 0 0 8px; }
.confirm-sheet .empty { padding: 12px 8px; font-size: 14px; }
.confirm-sheet #closeModal { min-height: 32px; padding: 4px 12px; margin-top: 6px; width: auto; }
.file { display: grid; place-items: center; margin: 12px 0; }
.file input, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.check { display: flex; gap: 8px; align-items: center; color: var(--ink); }
.check input { width: auto; }

.toast {
  position: fixed; left: 50%; bottom: calc(86px + var(--safe));
  transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px;
  font-size: 14px; z-index: 30; max-width: 90%;
}

@media (min-width: 800px) {
  body { padding-bottom: 24px; }
  .dock { left: auto; right: 24px; bottom: 24px; width: 360px; }
  .member-grid, .buckets { grid-template-columns: repeat(4, 1fr); }
  .type-tiles { grid-template-columns: 1fr 1fr; }
  .type-tile.expected-tile { grid-column: 1 / -1; }
  .type-tile.total { grid-column: 1 / -1; }
  .actions { grid-template-columns: 1fr 1fr 1fr; }
}