/* tallyai — the digital khata. Paper ground, ledger-green ink, ruled registers. */

:root {
  --paper: #f7f4ee;
  --sheet: #fffdf9;
  --rule: #e0d9cc;
  --ink: #20241f;
  --ink-2: #6b6a5f;
  --green: #1e6b4e;
  --green-press: #15523b;
  --dr: #8a3b2e;
  --cr: #1e6b4e;
  --shadow: 0 1px 2px rgb(32 36 31 / .06), 0 4px 16px rgb(32 36 31 / .05);
  --r-ctl: 6px;
  --r-sheet: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 400 0.92rem/1.55 "Spline Sans", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
}

/* ---------------------------------------------------------------- nav */
nav {
  display: flex; align-items: baseline; gap: 1.5rem;
  padding: 0.8rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  white-space: nowrap; overflow-x: auto;
}
@media (max-width: 640px) {
  nav { gap: 1rem; padding: 0.7rem 1rem; }
  nav .brand small { display: none; }
}
nav a { color: var(--ink); text-decoration: none; font-size: 0.88rem; font-weight: 500; }
nav a:hover { color: var(--green); }
nav .brand {
  font-family: "Besley", serif; font-weight: 700; font-size: 1.25rem;
  letter-spacing: -0.01em;
}
nav .brand small {
  font-family: "Spline Sans", sans-serif; font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.09em; color: var(--green); margin-left: 0.55rem; vertical-align: 0.14em;
}
nav .spacer { flex: 1; }
nav .quiet { color: var(--ink-2); }

main { max-width: 1120px; margin: 1.75rem auto 4rem; padding: 0 1.5rem; }

/* ---------------------------------------------------------------- type */
h1 {
  font-family: "Besley", serif; font-weight: 600; font-size: 1.6rem;
  letter-spacing: -0.01em; margin: 0.2rem 0 0.4rem; text-wrap: balance;
}
h1 .muted { font-family: "Spline Sans", sans-serif; font-size: 0.9rem; font-weight: 400; }
h2 {
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-2); margin: 0 0 0.75rem;
}
h3 { font-size: 0.85rem; font-weight: 600; margin: 1.4rem 0 0.5rem; }
.lede { color: var(--ink-2); margin: 0 0 1.4rem; }

/* ---------------------------------------------------------------- sheets */
.card {
  background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--r-sheet); box-shadow: var(--shadow);
  padding: 1.15rem 1.3rem; margin-bottom: 1.15rem;
  animation: rise 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rise { from { transform: translateY(4px); opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }
.narrow { max-width: 440px; }
.center-page { margin: 12vh auto 0; }

.cols { display: grid; grid-template-columns: 3fr 2fr; gap: 1.15rem; align-items: start; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

/* summary line — figures inline, not metric tiles */
.figures {
  display: flex; flex-wrap: wrap; gap: 0.4rem 2.2rem;
  padding: 0.75rem 0 1.1rem; color: var(--ink-2); font-size: 0.88rem;
}
.figures b {
  font-family: "Besley", serif; font-weight: 600; font-size: 1.35rem;
  color: var(--ink); margin-right: 0.4rem; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- registers */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th {
  text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-2);
  border-bottom: 1px solid var(--ink); padding: 0 1rem 0.4rem 0;
}
td {
  padding: 0.55rem 1rem 0.55rem 0;
  border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 0.9rem;
}
th:last-child, td:last-child { padding-right: 0; }
@media (max-width: 640px) {
  .card { overflow-x: auto; }
  .card > table { min-width: 540px; }
}
tr:last-child td { border-bottom: 0; }
tbody tr:hover td, tr[data-hover]:hover td { background: #f1ece2; }
td.num, th.num { text-align: right; }
td:first-child { font-weight: 500; }
tr.done td { color: var(--ink-2); }
tr.done td:first-child { text-decoration: line-through; }
.dr { color: var(--dr); }
.cr { color: var(--cr); }

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.muted { color: var(--ink-2); }
.small { font-size: 0.82rem; }
.err { color: var(--dr); }
.ok { color: var(--cr); }

/* status badges — text, not icons */
.pill {
  display: inline-block; padding: 0.08rem 0.5rem; border-radius: 999px;
  font-size: 0.71rem; font-weight: 600; letter-spacing: 0.02em;
  background: #ece7db; color: var(--ink-2);
}
.pill.pending, .pill.todo { background: #f3e6cf; color: #7a5b1e; }
.pill.received, .pill.doing, .pill.extracted { background: #dcebe3; color: var(--green); }
.pill.complete, .pill.done, .pill.verified, .pill.sheeted { background: #e4e8dc; color: #4a5d3a; }
.pill.waiting { background: #e8e2ef; color: #5d4a78; }
.pill.new, .pill.rejected, .pill.unverified { background: #f2ddd7; color: var(--dr); }

/* ---------------------------------------------------------------- controls */
input, select, textarea, button {
  font: inherit; padding: 0.48rem 0.65rem;
  border: 1px solid var(--rule); border-radius: var(--r-ctl);
  background: var(--sheet); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: #8d8b7f; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--green); outline-offset: 1px;
}
textarea { width: 100%; resize: vertical; }
label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--ink-2); }
label input, label textarea, label select { width: 100%; margin-top: 0.2rem; color: var(--ink); font-weight: 400; }

button {
  background: var(--green); color: #fdfcf8; border: 1px solid var(--green);
  font-weight: 600; cursor: pointer; padding: 0.5rem 1rem;
}
button:hover { background: var(--green-press); border-color: var(--green-press); }
button:disabled {
  background: #ece7db; border-color: var(--rule); color: var(--ink-2); cursor: not-allowed;
}
button.secondary { background: var(--sheet); color: var(--ink); border-color: var(--rule); }
button.secondary:hover { background: #f1ece2; }
button.small { padding: 0.28rem 0.65rem; font-size: 0.79rem; }

.stack { display: flex; flex-direction: column; gap: 0.6rem; }
.stack input, .stack select { width: 100%; }
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

code {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 5px;
  padding: 0.1rem 0.4rem; font-size: 0.84em; word-break: break-all;
}
details summary { cursor: pointer; color: var(--ink-2); }
details summary:hover { color: var(--green); }
details[open] summary { margin-bottom: 0.5rem; }
ul { padding-left: 1.2rem; }

.empty {
  padding: 1.4rem 0 0.6rem; color: var(--ink-2); font-size: 0.88rem;
}
.empty a { font-weight: 500; }