/* ---------------------------------------------------------------------------
   Данбъл Финанси — a ledger, not a dashboard.
   The reference is a printed financial statement: warm paper, hairline rules,
   dotted leaders, tabular figures, negatives in parentheses and oxblood, and a
   double rule under anything that is a total. Nothing here is decorative for
   its own sake; every rule weight means something about the arithmetic.
--------------------------------------------------------------------------- */

:root {
  --paper:        #f2efe6;
  --paper-raised: #fbfaf5;
  --ink:          #1a1813;
  --ink-soft:     #5d564a;
  --ink-faint:    #6f6757;   /* 4.87:1 on paper — was #918876 at 3.05:1, which failed */
  --ink-ghost:    #918876;   /* decoration only: rules, dividers. Never text. */
  --rule:         #ddd5c2;
  --rule-strong:  #a89d84;
  --debit:        #8a2a22;
  --credit:       #2c5741;
  --accent:       #1f3a6e;
  --flag:         #8a6410;
  --flag-wash:    #f6efdc;

  --serif: "Spectral", "Iowan Old Style", Georgia, serif;
  --sans:  "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  /* Faint horizontal ledger ruling, the way accounting paper is printed. */
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 27px, rgba(168, 157, 132, .09) 27px 28px
  );
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "tnum" 1;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* --- masthead ------------------------------------------------------------ */

.masthead {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--ink);
  box-shadow: 0 3px 0 -1px var(--paper-raised), 0 4px 0 -1px var(--ink);
  padding: 18px 0 14px;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

.masthead-top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.wordmark { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.wordmark span { color: var(--ink-faint); font-weight: 400; font-style: italic; }
.entity {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 3px;
}

nav.tabs { display: flex; gap: 2px; margin-top: 16px; border-bottom: 1px solid var(--rule); }
nav.tabs a {
  font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  padding: 7px 15px; text-decoration: none; color: var(--ink-soft);
  border: 1px solid transparent; border-bottom: none; margin-bottom: -1px;
}
nav.tabs a:hover { color: var(--ink); background: rgba(255,255,255,.5); }
nav.tabs a[aria-current] {
  color: var(--ink); background: var(--paper-raised);
  border-color: var(--rule); border-bottom: 1px solid var(--paper-raised);
  font-weight: 600;
}
nav.tabs .spacer { flex: 1; }
nav.tabs .who { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); padding: 9px 4px 0 0; letter-spacing: .04em; }

/* --- page --------------------------------------------------------------- */

main { padding: 34px 0 70px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
h1 { font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 0; letter-spacing: -.015em; }
.subtitle { font-size: 13px; color: var(--ink-soft); margin: 3px 0 0; font-style: italic; font-family: var(--serif); }

/* Says which basis the figures below are on — a cycle total and a calendar
   total are both correct and never equal, so the page must never leave the
   reader guessing which one they are looking at. */
.basis {
  font-size: 11.5px; line-height: 1.5; margin: 7px 0 0; max-width: 62ch;
  color: var(--ink-soft); font-family: var(--serif);
  border-left: 2px solid var(--rule); padding-left: 10px;
}
.basis strong { font-weight: 600; }
.basis em { color: var(--ink-faint); }

.period-switch { display: flex; gap: 0; border: 1px solid var(--rule-strong); background: var(--paper-raised); }
.period-switch a {
  padding: 6px 13px; font-size: 12px; text-decoration: none; color: var(--ink-soft);
  border-right: 1px solid var(--rule); letter-spacing: .03em; white-space: nowrap;
}
.period-switch a:last-child { border-right: none; }
.period-switch a[aria-current] { background: var(--ink); color: var(--paper); font-weight: 500; }

.cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

/* --- panels ------------------------------------------------------------- */

.panel { background: var(--paper-raised); border: 1px solid var(--rule-strong); margin-bottom: 24px; }
.panel > h2 {
  margin: 0; padding: 11px 20px 10px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  border-bottom: 1px solid var(--rule-strong); color: var(--ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.panel > h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-faint); }
.panel-body { padding: 6px 20px 16px; }

/* --- the waterfall ------------------------------------------------------ */

.ledger { width: 100%; border-collapse: collapse; }
.ledger td { padding: 6px 0; vertical-align: top; }

.ledger .marg {
  width: 74px; padding-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
  letter-spacing: .02em; padding-right: 12px; white-space: nowrap;
}
.ledger .lbl { width: 42%; }
.ledger .lbl .bg { font-size: 14.5px; display: block; }
.ledger .lbl .en {
  font-size: 11.5px; color: var(--ink-faint); font-style: italic;
  font-family: var(--serif); display: block; line-height: 1.35; margin-top: 1px;
}
/* dotted leader between label and figure, as in a printed statement,
   sitting on the baseline of the first line only */
.ledger .lead { width: 100%; }
.ledger .lead span { display: block; border-bottom: 1px dotted var(--rule-strong); margin: 13px 10px 0; }
.ledger .amt {
  font-family: var(--mono); font-size: 14.5px; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; padding-left: 14px; min-width: 132px;
}
.ledger .neg { color: var(--debit); }
.ledger .pos { color: var(--credit); }

.ledger tr.rule-above td { border-top: 1px solid var(--rule-strong); padding-top: 9px; }
.ledger tr.subtotal td { font-weight: 600; }
.ledger tr.subtotal .lbl .bg { font-size: 15px; letter-spacing: .01em; }
.ledger tr.subtotal .amt { font-weight: 600; }
.ledger tr.final td {
  border-top: 2.5px double var(--ink); border-bottom: 2.5px double var(--ink);
  padding-top: 10px; padding-bottom: 10px;
}
.ledger tr.final .lbl .bg { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.ledger tr.final .lead span { margin-top: 15px; }
.ledger tr.subtotal .lead span { margin-top: 14px; }
.ledger tr.final .amt { font-size: 17px; font-weight: 600; }
.ledger tr.tax td { color: var(--debit); }
.ledger tr.spacer td { height: 9px; padding: 0; }
.ledger tr.muted .lbl .bg, .ledger tr.muted .amt { color: var(--ink-faint); }

/* --- key/value strips --------------------------------------------------- */

.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 7px 0; border-bottom: 1px dotted var(--rule); font-size: 13.5px; }
.kv tr:last-child td { border-bottom: none; }
.kv td:last-child { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kv .k-en { display: block; font-size: 11px; color: var(--ink-faint); font-style: italic; font-family: var(--serif); }

.figure-big {
  font-family: var(--mono); font-size: 27px; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; display: block; margin: 2px 0 1px;
}
.figure-cap { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

/* --- notices ------------------------------------------------------------ */

.notice {
  border-left: 3px solid var(--flag); background: var(--flag-wash);
  padding: 11px 16px; font-size: 13px; margin: 0 0 18px; color: #4a3a13;
}
.notice strong { color: var(--flag); }
.notice.ok { border-left-color: var(--credit); background: #e9f0ea; color: #1e3f2c; }
.notice.err { border-left-color: var(--debit); background: #f7e9e7; color: #6b201a; }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

/* --- forms -------------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 22px; }
.field { padding: 11px 0; border-bottom: 1px dotted var(--rule); }
.field.wide { grid-column: 1 / -1; }
.field > label, legend.lbl-cap {
  display: block; font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 5px; font-weight: 600;
}
.field > label em, legend.lbl-cap em {
  font-family: var(--serif); font-style: italic; text-transform: none;
  letter-spacing: 0; font-size: 12px; color: var(--ink-faint); font-weight: 400; margin-left: 6px;
}
input[type=text], input[type=date], input[type=email], input[type=password], select, textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--rule-strong); border-radius: 0;
  padding: 8px 10px;
}
input.money { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,58,110,.13);
}
.hint { font-size: 11.5px; color: var(--ink-faint); margin-top: 5px; font-style: italic; font-family: var(--serif); line-height: 1.45; }

.radio-row { display: flex; flex-direction: column; gap: 7px; margin-top: 3px; }
.radio-row label { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.radio-row input { margin-top: 3px; flex: none; }
.radio-row .r-note { display: block; font-size: 11.5px; color: var(--ink-faint); font-style: italic; font-family: var(--serif); }

fieldset { border: none; border-top: 1px solid var(--rule-strong); margin: 26px 0 0; padding: 16px 0 0; }
fieldset legend {
  font-family: var(--serif); font-size: 15px; font-weight: 600; padding-right: 12px;
}

button, .btn {
  font-family: var(--sans); font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 600; padding: 11px 26px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper); cursor: pointer; border-radius: 0;
  text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: var(--accent); border-color: var(--accent); }
button.ghost { background: transparent; color: var(--ink-soft); border-color: var(--rule-strong); }
button.ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.actions { display: flex; gap: 12px; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 2.5px double var(--ink); }

/* live running total beside the form */
.tally { position: sticky; top: 22px; }
.tally .total-line { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; font-size: 13.5px; }
.tally .total-line span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tally .total-line.grand { border-top: 2.5px double var(--ink); margin-top: 8px; padding-top: 11px; font-weight: 600; font-size: 16px; }

/* --- small tables ------------------------------------------------------- */

table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
table.list th {
  text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: 0 0 7px; border-bottom: 1px solid var(--rule-strong);
}
table.list td { padding: 7px 0; border-bottom: 1px dotted var(--rule); }
table.list tr:last-child td { border-bottom: none; }
table.list td.num, table.list th.num {
  text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums;
}
table.list th.num { font-family: var(--sans); }
.tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); padding: 1px 6px; color: var(--ink-soft); white-space: nowrap;
}
.tag.warn { border-color: var(--flag); color: var(--flag); background: var(--flag-wash); }

/* --- login -------------------------------------------------------------- */

.login-wrap { max-width: 400px; margin: 92px auto; }
.login-wrap .wordmark { font-size: 32px; text-align: center; }
.login-wrap .entity { text-align: center; margin-bottom: 26px; }

footer.colophon {
  border-top: 1px solid var(--rule); margin-top: 46px; padding-top: 16px;
  font-size: 11.5px; color: var(--ink-faint); font-family: var(--serif); font-style: italic;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}

/* ------------------------------------------------------------------ records
   Lists and detail screens. A row is a line in a book: dense, ruled, and
   scannable down the numeric columns, which stay monospaced and right-aligned
   so digits line up the way they do on a printed отчет. */

.filterbar {
  display: flex; align-items: center; gap: 2px;
  margin: 0 0 22px; padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.filterbar .spacer { flex: 1; }
.filterbar a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none;
  color: var(--ink-soft); padding: 6px 12px; border: 1px solid transparent;
}
.filterbar a:hover { color: var(--ink); background: rgba(255,255,255,.55); }
.filterbar a[aria-current="true"] {
  color: var(--ink); background: var(--paper-raised);
  border-color: var(--rule); font-weight: 600;
}
.filterbar a.ghost { color: var(--accent); }

table.records { width: 100%; border-collapse: collapse; font-size: 14px; }
table.records th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
  text-align: left; padding: 0 10px 7px 0; border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
table.records td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.records tbody tr:hover { background: rgba(255,255,255,.6); cursor: pointer; }
table.records tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

table.records .c-date { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
table.records .c-id   { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
table.records .c-kind { color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
table.records .c-num  {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
table.records .c-num.neg   { color: var(--debit); }
table.records .c-num.muted { color: var(--ink-faint); }
table.records .c-status { text-align: right; white-space: nowrap; }
table.records .c-name a { color: var(--ink); text-decoration: none; font-weight: 500; }
table.records .c-name a:hover { text-decoration: underline; }
table.records .sub {
  display: block; font-size: 11.5px; color: var(--ink-faint);
  font-style: italic; margin-top: 2px;
}
table.records tr.is-writeoff .c-kind,
table.records tr.is-writeoff td { color: var(--debit); }

table.records tfoot tr.total td {
  border-top: 2.5px double var(--ink); border-bottom: none;
  padding-top: 10px; font-weight: 600;
}
table.records tfoot tr.total td:first-child {
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 500; color: var(--ink-soft);
}

.pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--rule-strong);
  color: var(--ink-soft); white-space: nowrap;
}
.pill-paid, .pill-company { border-color: var(--credit); color: var(--credit); }
.pill-open, .pill-part_paid { border-color: var(--debit); color: var(--debit); }
.pill-profit { border-color: var(--accent); color: var(--accent); }

dl.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0; }
dl.facts dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 8px 18px 8px 0; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
dl.facts dd {
  margin: 0; padding: 8px 0; border-bottom: 1px solid var(--rule);
  font-size: 14px; text-align: right;
}
dl.facts dd.mono { font-family: var(--mono); font-size: 12.5px; }

.empty { color: var(--ink-faint); font-style: italic; font-size: 14px; margin: 4px 0; }
.empty em { display: block; margin-top: 4px; font-size: 12.5px; }

.note {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-soft);
  margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
}
.note em { color: var(--ink-faint); }
.note.warn { border-top-color: var(--debit); color: var(--ink); }
.note.warn strong { color: var(--debit); }

.reconcile .ledger tr.ok .lbl .bg  { color: var(--credit); }
.reconcile .ledger tr.bad .lbl .bg,
.reconcile .ledger tr.bad .amt     { color: var(--debit); }

@media (max-width: 720px) {
  table.records .c-kind, table.records th.c-kind { display: none; }
  dl.facts { grid-template-columns: 1fr; }
  dl.facts dt { border-bottom: none; padding-bottom: 0; }
  dl.facts dd { text-align: left; padding-top: 2px; }
}

/* A figure you can open. Underlined on hover only, so the waterfall still
   reads as a printed page rather than a wall of links. */
a.drill { color: inherit; text-decoration: none; }
a.drill:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ledger .lbl a.drill.bg { font-size: 14.5px; display: block; }
.ledger tr.subtotal .lbl a.drill.bg { font-size: 15px; letter-spacing: .01em; }

/* -------------------------------------------------------------- corrections
   A filed year can still be corrected, but never quietly. */

.notice.filed {
  border-left-color: var(--accent); background: #eaeef5; color: #21324f;
}
.notice.filed strong { color: #21324f; }
.notice.filed .drifted { color: var(--debit); font-weight: 600; display: block; margin-top: 4px; }
.notice.filed ul.corrections { list-style: none; margin: 10px 0 0; padding: 0; }
.notice.filed ul.corrections li {
  font-size: 12.5px; padding: 4px 0; border-top: 1px solid rgba(33,50,79,.15);
}
.notice.filed ul.corrections .when {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-right: 8px;
}
.notice.filed ul.corrections .who {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-left: 6px;
}
.notice.filed p.gfo {
  margin: 10px 0 0; padding-top: 8px; font-size: 12px; line-height: 1.5;
  border-top: 1px solid rgba(33,50,79,.2); color: #3c4d68;
}

.panel.needs-reason { border-color: var(--accent); }
.panel.needs-reason > h2 { color: var(--accent); }

legend .leg-en {
  font-family: var(--sans); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}

.btn.ghost-btn, a.btn.ghost-btn {
  background: transparent; color: var(--ink-soft); border-color: var(--rule-strong);
}
.btn.ghost-btn:hover, a.btn.ghost-btn:hover {
  background: transparent; color: var(--ink); border-color: var(--ink);
}

/* Inputs sitting inside a records table, so a correction screen still reads
   like the list it came from. */
table.records.editable td { padding: 6px 8px 6px 0; }
table.records.editable input,
table.records.editable select {
  width: 100%; font-size: 13px; padding: 5px 7px;
  border: 1px solid var(--rule-strong); background: var(--paper-raised);
  color: var(--ink); font-family: var(--sans);
}
table.records.editable input.num-input {
  font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums;
}
table.records.editable input.credit-note {
  margin-top: 5px; font-family: var(--mono); font-size: 12px;
  border-color: var(--debit);
}
table.records.editable tbody tr:hover { background: none; cursor: default; }
table.records.editable select { font-size: 12.5px; }

.period-switch a + a { margin-left: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Polish pass — 2026-08-28
   The page was legible but flat: everything competed, the eye had nowhere to
   land first, and several greys failed contrast. This pass sets a hierarchy
   (one figure per screen leads), makes long tables navigable, and fixes the
   accessibility gaps that a keyboard user would hit immediately.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- focus: visible everywhere, and shaped like the thing it is on -------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}
.masthead nav.tabs a:focus-visible { outline-offset: -2px; }

/* --- motion: the whole interface is calm, and stays calm when asked ------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- masthead: identity and navigation, nothing else ---------------------- */
.masthead .masthead-top { align-items: baseline; }
.wordmark { font-size: 25px; }
nav.tabs { margin-top: 12px; align-items: stretch; }
nav.tabs a { transition: color .15s ease, background-color .15s ease; }
nav.tabs .who {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--ink-faint); align-self: center; margin-right: 14px;
}
/* The new-record links read as actions, not as places. */
nav.tabs a[href$="/new"] { color: var(--accent); }

/* --- page head: one clear entry point ------------------------------------ */
.page-head { align-items: flex-start; margin-bottom: 26px; }
.page-head h1 { line-height: 1.15; }
.subtitle { margin-top: 4px; }

.period-switch a {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

/* --- panels: a quieter frame, so the figures carry the weight ------------- */
.panel + .panel { margin-top: 22px; }
.panel > h2 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}

/* --- long lists: the header stays while 46 rows go by -------------------- */
table.records thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--paper-raised);
  box-shadow: 0 1px 0 var(--rule-strong);
  border-bottom: none;
}
table.records tbody tr { transition: background-color .12s ease; }
table.records tbody tr:last-child td { border-bottom: none; }

/* The whole row is a target, so give it a target's affordance: a rule that
   thickens on the left as the pointer crosses it. */
table.records tbody tr td:first-child {
  box-shadow: inset 2px 0 0 transparent;
  transition: box-shadow .12s ease;
}
table.records tbody tr:hover td:first-child,
table.records tbody tr:focus-visible td:first-child {
  box-shadow: inset 2px 0 0 var(--accent);
}
table.records tbody tr:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}

/* Amounts are the reason the page exists: give them the weight. */
table.records .c-num { font-size: 13.5px; letter-spacing: -.01em; }
table.records tfoot tr.total .c-num { font-size: 15px; }

/* --- pills: quieter, and legible at 10px --------------------------------- */
.pill {
  font-size: 9.5px; letter-spacing: .09em; padding: 3px 8px;
  border-radius: 2px; background: rgba(255,255,255,.5);
}

/* --- forms: a clearer relationship between label, field and consequence --- */
.field input[type="text"], .field input[type="date"], .field select {
  transition: border-color .15s ease, background-color .15s ease;
}
.field input[type="text"]:hover, .field select:hover { border-color: var(--ink-faint); }
.radio-row label { padding: 5px 8px; margin: 0 -8px; border-radius: 2px; }
.radio-row label:hover { background: rgba(255,255,255,.6); }
.radio-row input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- editable table: inputs that still read as a ledger ------------------ */
table.records.editable input:focus, table.records.editable select:focus {
  border-color: var(--accent); background: #fff;
}
table.records.editable tr:has(select option[value="write_off"]:checked) .c-id { color: var(--debit); }

/* --- notice blocks: consistent shape, clear severity --------------------- */
.notice { border-radius: 0 2px 2px 0; line-height: 1.55; }
.notice p:last-child { margin-bottom: 0; }

/* --- the colophon carries the registration details the masthead dropped -- */
.colophon .entity-line {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
  margin-top: 6px;
}

/* --- narrow screens ------------------------------------------------------ */
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page-head { flex-direction: column; gap: 14px; }
  .period-switch { flex-wrap: wrap; }
  /* Wrapping beats scrolling here: a hidden tab is a tab nobody finds. */
  nav.tabs { flex-wrap: wrap; row-gap: 2px; }
  nav.tabs .spacer { display: none; }
  nav.tabs .who { display: none; }
  nav.tabs a { flex: 0 0 auto; padding: 7px 12px; }
  nav.tabs a[href="/logout"] { margin-left: auto; }
  table.records .c-status, table.records th.c-status { display: none; }
  .form-grid { grid-template-columns: 1fr; }
}

/* A write-off that was later paid stays on the record — the history matters —
   but it stops shouting. Oxblood means money still missing. */
table.records tr.is-settled td { color: var(--ink-faint); }
table.records tr.is-settled .c-kind { color: var(--ink-faint); }
.tick {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--credit); border: 1px solid var(--credit);
  border-radius: 2px; vertical-align: 1px;
}

/* --- narrow screens: the ledger drops its margin notes, never its figures --
   On a phone the four-column ledger (margin note, label, dotted leader,
   amount) cannot fit without clipping the amount — which is the one column
   that must never be cut. The leader and the margin note are the parts that
   carry no arithmetic, so they are what go. */
@media (max-width: 700px) {
  .ledger .marg { display: none; }
  .ledger .lead { display: none; }
  .ledger .lbl  { width: auto; }
  .ledger td { padding: 8px 0; }
  .ledger .amt { padding-left: 12px; white-space: nowrap; }
  .ledger .lbl .en { font-size: 11px; }

  .panel-body { padding-left: 16px; padding-right: 16px; }
  .figure-big { font-size: 26px; }

  /* A wide list scrolls inside its own panel rather than the page. */
  .panel-body:has(> table.records) { overflow-x: auto; }
  table.records { min-width: 520px; }

  nav.tabs a { white-space: nowrap; }
  .filterbar { flex-wrap: wrap; gap: 4px; }
  .filterbar .spacer { flex-basis: 100%; height: 0; }

  dl.facts dd { word-break: break-word; }

}

/* --- bank ---------------------------------------------------------------- */
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel.stat .panel-body { padding-top: 16px; }
.panel.stat .figure-big { display: block; margin-bottom: 8px; }
.panel.stat .figure-big.neg { color: var(--debit); }
.panel.stat .hint { margin: 0; }

table.records.bank tbody tr:hover { background: none; cursor: default; }
table.records.bank .c-reason { max-width: 0; width: 55%; }
table.records.bank .party {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.records.bank .c-reason .sub {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.records.bank .sub.mono { font-family: var(--mono); font-size: 10.5px; font-style: normal; }

/* A clipped line is only tidy if the whole of it stays reachable. Hover or tab
   to a row's основание and the bank's own wording opens underneath it. */
.reveal { display: block; position: relative; }
.reveal[tabindex] { cursor: help; }
.reveal[tabindex]:focus { outline: none; }
.reveal[tabindex]:focus-visible .party {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 1px;
}
.reveal .tip {
  position: absolute; z-index: 40; top: calc(100% + 7px); left: -10px;
  width: max-content; max-width: min(560px, 70vw);
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 2px;
  box-shadow: 0 6px 18px rgba(60, 48, 30, .22);
  padding: 9px 12px; font-size: 12.5px; line-height: 1.5;
  white-space: normal; overflow-wrap: anywhere;
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.reveal:hover .tip,
.reveal:focus-visible .tip { opacity: 1; visibility: visible; }
.reveal .tip-line { display: block; color: var(--ink-soft); font-style: normal; }
.reveal .tip-line + .tip-line { margin-top: 4px; }
.reveal .tip-line.strong { color: var(--ink); font-weight: 500; }
.reveal .tip-line.mono {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  letter-spacing: .02em;
}

/* No hover on a touch screen, so nothing may hide behind one: the основание
   wraps in full instead. This block sits after the rules it overrides. */
@media (max-width: 700px) {
  table.records.bank .c-reason { max-width: none; width: auto; }
  table.records.bank .party,
  table.records.bank .c-reason .sub { white-space: normal; overflow: visible; }
  .reveal .tip { display: none; }
  .reveal[tabindex] { cursor: auto; }
}
.pill-unmatched { border-color: var(--rule-strong); color: var(--ink-faint); }
.pill-suggested { border-color: var(--flag); color: var(--flag); }
.pill-confirmed { border-color: var(--credit); color: var(--credit); }

@media (max-width: 900px) { .cols-3 { grid-template-columns: 1fr; } }

.btn-small {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  padding: 4px 10px; border: 1px solid var(--accent); color: var(--accent);
  border-radius: 2px; transition: background-color .15s ease, color .15s ease;
}
.btn-small:hover { background: var(--accent); color: var(--paper-raised); }

/* --------------------------------------------------------------- rhythm ---
   The shape of a cycle. Bars are proportional to the largest single month in
   the period, so the eye compares months rather than reading twelve numbers.
   Colours are the ledger's own — no new palette for one page.
--------------------------------------------------------------------------- */
table.records.rhythm { font-variant-numeric: tabular-nums; }
table.records.rhythm td.mon { white-space: nowrap; font-family: var(--sans); }
table.records.rhythm td.mon .yr { color: var(--ink-faint); font-family: var(--mono); font-size: 11px; }
table.records.rhythm tbody tr:hover { cursor: default; }

/* A month with nothing in it still gets a row: the gaps are the rhythm. */
table.records.rhythm tr.quiet td { color: var(--ink-ghost); }
table.records.rhythm tr.quiet td.mon { opacity: .65; }

/* A deadline Anton works to, named on the month it falls in. */
table.records.rhythm .mark {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: 11px; color: var(--flag); margin-top: 2px;
}

table.records.rhythm tr.after-window td {
  border-top: 2.5px double var(--rule-strong); border-bottom: none;
  padding: 10px 0 4px; font-size: 11.5px; color: var(--ink-soft);
  font-family: var(--sans);
}
table.records.rhythm tr.after-window em {
  display: block; font-family: var(--serif); color: var(--ink-faint); font-size: 11px;
}

table.records.rhythm th.shape, table.records.rhythm td.shape { width: 22%; padding-left: 12px; }
table.records.rhythm td.shape { vertical-align: middle; line-height: 0; }
.bar { display: inline-block; height: 9px; margin-right: 2px; vertical-align: middle; }
.b-pkg  { background: var(--accent); }
.b-upg  { background: var(--credit); }
.b-add  { background: var(--rule-strong); }
.b-prem { background: var(--flag); }

table.records.rhythm tfoot td {
  border-top: 2.5px double var(--ink); font-weight: 600; padding-top: 10px;
}

.legend { margin-top: 12px; font-size: 11.5px; color: var(--ink-soft); font-family: var(--sans); }
.legend .key { display: inline-block; width: 22px; height: 9px; margin: 0 4px 0 14px; vertical-align: middle; }
.legend .key:first-child { margin-left: 0; }

/* ------------------------------------------------------------- password ---
   The lock-out instructions are a procedure, so they are numbered and the
   commands are set in the mono face the rest of the ledger uses for anything
   typed literally.
--------------------------------------------------------------------------- */
ol.steps { margin: 10px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; }
ol.steps li { margin-bottom: 3px; }
ol.steps code, p code {
  font-family: var(--mono); font-size: 11.5px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px; padding: 1px 5px; color: var(--ink);
}

/* ------------------------------------------------------------- segments ---
   Revenue split by market. The market is a heading inside the table rather
   than a separate table, so the totals at the foot cover everything above
   them and cannot drift apart from the waterfall.
--------------------------------------------------------------------------- */
table.list.segments { font-variant-numeric: tabular-nums; }
table.list.segments tr.market td {
  padding-top: 12px; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
}
table.list.segments tr.market:first-child td { padding-top: 2px; }
table.list.segments td.seg-stream { padding-left: 14px; }
table.list.segments .en-inline {
  font-family: var(--serif); font-style: italic; font-size: 11.5px;
  color: var(--ink-faint); margin-left: 7px; text-transform: none;
  letter-spacing: 0; font-weight: 400;
}
/* Five numeric columns in a narrow panel run together without this. */
table.list.segments th.num, table.list.segments td.num { padding-left: 16px; white-space: nowrap; }
table.list.segments td.num.strong { font-weight: 600; }
table.list.segments td.num.muted { color: var(--ink-ghost); }
table.list.segments tfoot td {
  border-top: 2.5px double var(--ink); font-weight: 600; padding-top: 9px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   The period picker — 2026-08-30
   Fifteen periods do not fit in a row of buttons, and the row was the reason
   four приема and five years were unreachable: whatever did not fit was simply
   left out of the markup. A <details> element holds them all, grouped the way
   the two bases are actually thought about — приеми on the left, calendar years
   on the right — and it opens, closes and takes the keyboard without any script.
   The trigger is drawn as a filled-in field on a form, because that is what it
   is: the one setting that governs every figure on the page.
   ═══════════════════════════════════════════════════════════════════════════ */

.period-picker { position: relative; }

.period-picker > summary {
  list-style: none;                       /* the default marker, in every engine */
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "eyebrow caret" "current caret" "note caret";
  align-items: center;
  gap: 0 14px;
  min-width: 236px;
  padding: 7px 13px 8px;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.period-picker > summary::-webkit-details-marker { display: none; }
.period-picker > summary:hover { border-color: var(--ink); }

.pp-eyebrow {
  grid-area: eyebrow;
  font-family: var(--sans); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.pp-current {
  grid-area: current;
  font-family: var(--serif); font-size: 17px; line-height: 1.25; color: var(--ink);
}
.pp-note {
  grid-area: note;
  font-family: var(--mono); font-size: 10px; letter-spacing: .01em; color: var(--ink-faint);
}

/* A drawn caret, not a glyph: it has to sit on the baseline of a serif figure
   and turn when the menu opens, which no font character does reliably. */
.pp-caret {
  grid-area: caret;
  width: 9px; height: 9px; border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.period-picker[open] > summary { border-color: var(--ink); }
.period-picker[open] .pp-caret { transform: rotate(-135deg) translate(-3px, -3px); }

.pp-menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0;
  display: grid; grid-template-columns: repeat(2, minmax(214px, 1fr));
  background: var(--paper-raised);
  border: 1px solid var(--ink);
  /* A hard offset shadow, the way a printed card lies on paper — the rest of
     the interface has no soft blurs and this must not be the first. */
  box-shadow: 4px 4px 0 -1px var(--paper-raised), 5px 5px 0 -1px var(--ink);
}
.pp-group + .pp-group { border-left: 1px solid var(--rule); }

.pp-group h3 {
  margin: 0; padding: 10px 16px 8px;
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
  display: flex; flex-direction: column; gap: 2px;
}
.pp-group h3 em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink-faint);
}
.pp-group ul { list-style: none; margin: 0; padding: 5px 0 7px; }

.pp-menu a {
  display: block; padding: 6px 16px 7px; text-decoration: none; color: var(--ink);
  border-left: 3px solid transparent;
}
.pp-menu a:hover { background: var(--paper); border-left-color: var(--rule-strong); }
.pp-menu a[aria-current] { background: var(--ink); border-left-color: var(--ink); }
.pp-menu a[aria-current] .pp-name { color: var(--paper); font-weight: 500; }
.pp-menu a[aria-current] .pp-meta { color: var(--rule); }

.pp-name { display: block; font-family: var(--serif); font-size: 15px; line-height: 1.3; }
.pp-meta { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); letter-spacing: .01em; }

@media (max-width: 720px) {
  .period-picker { width: 100%; }
  .period-picker > summary { min-width: 0; width: 100%; }
  .pp-menu { grid-template-columns: 1fr; left: 0; right: 0; max-height: 62vh; overflow-y: auto; }
  .pp-group + .pp-group { border-left: none; border-top: 1px solid var(--rule-strong); }
}