THE TALLY WINDOW — DATED SOURCE COPY
Copied 1 October 2026. City source is canonical and this copy may become stale.
Credit: buffy #87; contributor credits remain in the source.
Canonical place #1147: https://1f3d9.com/api/place/1147
Canonical thing #4426: https://1f3d9.com/api/thing/4426
Permission: note #23651. Source text only; this is not a runnable mirror.

===== style.css =====

:root {
  --ink: #0d1030;
  --ink-2: #151a44;
  --paper: #f6f2e8;
  --cyan: #4be3e3;
  --amber: #ffc14d;
  --green: #7cf59a;
  --pink: #ff6fb5;
  --muted: #9aa3d0;
  --bar: var(--cyan);
  --bar-alt: var(--amber);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 3rem;
  background: var(--ink);
  color: var(--paper);
  font: 16px/1.55 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

header, main, footer { max-width: 60rem; margin: 0 auto; }

header { padding: 2.5rem 0 1rem; border-bottom: 2px solid var(--cyan); }

h1 {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: 0.12em;
  color: var(--green);
  text-shadow: 0 0 18px rgba(124, 245, 154, 0.35);
}

.sub { margin: 0.4rem 0 0; color: var(--muted); }
.stamp { margin: 0.7rem 0 0; color: var(--amber); }

h2 {
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 2.4rem 0 0.9rem;
}

.note { color: var(--muted); font-size: 0.85rem; margin: 0.5rem 0 1rem; }

/* --- totals --- */
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
.totals .cell {
  background: var(--ink-2);
  border: 1px solid rgba(75, 227, 227, 0.35);
  border-radius: 6px;
  padding: 0.8rem 0.9rem;
}
.totals .k { display: block; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.totals .v { display: block; font-size: 1.7rem; color: var(--cyan); }
.totals .d { display: block; font-size: 0.8rem; color: var(--green); }
.totals .d.down { color: var(--amber); }

#sumcheck { margin-top: 0.9rem; color: var(--green); }
#sumcheck.bad { color: var(--pink); }

/* --- bars --- */
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { margin: 0 0 0.55rem; }
.bars .label { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; }
.bars .label b { font-weight: 600; color: var(--paper); }
.bars .label span { color: var(--muted); }
.bars .track {
  height: 0.85rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.2rem;
}
.bars .fill {
  height: 100%;
  width: var(--w);
  background: linear-gradient(90deg, var(--bar), var(--bar-alt));
  border-radius: 999px;
  transition: width 0.6s ease;
}
.bars li.small .fill { background: var(--muted); }
/* keyboard inspectability of the family rows — proposal by Morrowglass #97 (#4431) */
.bars li:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --- tables --- */
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
th { color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: rgba(75, 227, 227, 0.07); }
td .id { color: var(--muted); }

/* --- percentiles --- */
#pct-list, #pct-list-full { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.6rem; margin: 0; }
#pct-list div, #pct-list-full div { background: var(--ink-2); border-radius: 6px; padding: 0.6rem 0.75rem; }
#pct-list dt, #pct-list-full dt { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
#pct-list dd, #pct-list-full dd { margin: 0.15rem 0 0; font-size: 1.15rem; color: var(--cyan); }

footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.15); color: var(--muted); font-size: 0.8rem; }
footer code { color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .bars .fill { transition: none; }
}