/* =========================================================================
   Douglass Family Finance
   One stylesheet. Replaces finance.css, finance-menu.css and every inline
   <style> block that used to be printed from inside a Perl sub.

   Direction: a ledger, not a SaaS dashboard. Ink-dark rail holding the
   navigation and the one figure that matters, opening onto a cool paper
   field. Colour is reserved for money in and money out; brass carries
   interaction. Numbers are tabular everywhere so columns line up.
   ========================================================================= */

:root {
  --ink:        #16202b;
  --ink-2:      #1f2c3a;
  --ink-3:      #33475d;
  --ink-text:   #c3cdd8;

  --paper:      #eceef1;
  --card:       #ffffff;
  --rule:       #d8dde3;
  --rule-soft:  #e8ebef;

  --text:       #1a232e;
  --muted:      #6b7885;

  --brass:      #9a6b1f;
  --brass-lift: #c58f34;

  --in:         #1f6b4a;
  --out:        #a8322c;

  --rail-w:     232px;
  --gap:        20px;
  --radius:     5px;

  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --num: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "Consolas", "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

/* A class that sets display beats the user-agent [hidden] rule on
   specificity, so anything toggled with the hidden attribute needs this. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--brass-lift);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Frame
   ------------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 100vh;
}

/* -------------------------------------------------------------------------
   Rail
   ------------------------------------------------------------------------- */
.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--ink-text);
  padding: 22px 0 16px;
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 24px;
}

.rail-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid var(--brass);
  color: var(--brass-lift);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}

.rail-brand-name {
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8e9dac;
}

.rail-nav { display: flex; flex-direction: column; }

.rail-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 20px 9px 20px;
  color: var(--ink-text);
  font-size: 14px;
  border-left: 3px solid transparent;
}

.rail-link:hover {
  background: var(--ink-2);
  color: #fff;
  text-decoration: none;
}

.rail-link.is-current {
  background: var(--ink-2);
  border-left-color: var(--brass-lift);
  color: #fff;
  font-weight: 600;
}

.rail-badge {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--brass);
  color: #fff;
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  text-align: center;
}

/* The signature: the number the whole app exists to move, always visible. */
.rail-net {
  margin: auto 14px 14px;
  padding: 14px 16px;
  display: block;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  background: var(--ink-2);
  color: inherit;
}

.rail-net:hover { border-color: var(--brass); text-decoration: none; }

.rail-net-label,
.rail-net-date {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7d8b9a;
}

.rail-net-value {
  display: block;
  margin: 4px 0 2px;
  font-family: var(--num);
  font-size: 25px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: #fff;
}

.rail-net-value.is-out { color: #e78c86; }

.rail-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 20px 0;
  border-top: 1px solid var(--ink-2);
  font-size: 12px;
}

.rail-user { color: #7d8b9a; }
.rail-signout { color: #9aa8b6; }
.rail-signout:hover { color: #fff; }

/* -------------------------------------------------------------------------
   Field
   ------------------------------------------------------------------------- */
.field { min-width: 0; padding: 0 28px 48px; }

.field-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  padding: 26px 0 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 22px;
}

.field-title {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.field-tools { display: flex; gap: 12px; align-items: flex-end; }

.field-body > * + * { margin-top: 22px; }

/* -------------------------------------------------------------------------
   Summary strip
   ------------------------------------------------------------------------- */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
}

.stat {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.stat-label {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat-value {
  display: block;
  margin: 6px 0 2px;
  font-family: var(--num);
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.stat-note { display: block; font-size: 12px; color: var(--muted); }
.stat-note + .stat-note { margin-top: 1px; font-size: 11px; }

.stat-value.is-in  { color: var(--in); }
.stat-value.is-out { color: var(--out); }

/* Net is the figure that answers the question, so it gets the emphasis. */
.stat-lead { border-color: var(--ink-3); box-shadow: inset 3px 0 0 var(--ink); }

.col-type { width: 56px; }

/* -------------------------------------------------------------------------
   Panel
   ------------------------------------------------------------------------- */
.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.panel-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}

/* The head is a flex row, so a long note used to squeeze the title into a
   column two words wide and wrap it. Titles are short everywhere in the app,
   so neither of them gives up any width to the note. */
.panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}
.panel-note { margin: 0; font-size: 12px; color: var(--muted); }
.panel-head .tools-form { margin-left: auto; flex: 0 0 auto; }

.panel-figures {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-left: auto;
}

.panel-figures .fig-label {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 5px;
}
.panel-head .note-warn { flex: 0 0 100%; font-size: 12px; }

.panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  background: #fbfcfd;
  border-radius: 0 0 var(--radius) var(--radius);
}

.panel-range { font-size: 12px; color: var(--muted); }

.panel-scroll { overflow-x: auto; }

/* -------------------------------------------------------------------------
   Tables. One design, used by every page.
   ------------------------------------------------------------------------- */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.tbl th,
.tbl td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  white-space: nowrap;
}

.tbl thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f5f6f8;
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.tbl .col-num {
  text-align: right;
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
}

.tbl .col-total { border-left: 1px solid var(--rule); font-weight: 600; }
.tbl .is-nil { color: #c2c9d1; }
.tbl .is-in  { color: var(--in); }
.tbl .is-out { color: var(--out); }

.tbl tfoot th,
.tbl tfoot td {
  background: #f5f6f8;
  border-top: 1px solid var(--rule);
  border-bottom: none;
  font-weight: 600;
}

/* Pivot: the category column stays put while months scroll. */
.tbl-pivot .col-label {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card);
  min-width: 200px;
  font-weight: 500;
}

.tbl-pivot thead .col-label { z-index: 3; background: #f5f6f8; }
.tbl-pivot tfoot .col-label { background: #f5f6f8; }

.row-cat > .col-label { font-weight: 600; }
.row-cat.is-clickable { cursor: pointer; }
.row-cat.is-clickable:hover > * { background: #f7f9fb; }
.row-cat.is-clickable:hover > .col-label { background: #f7f9fb; }

.row-sub > td { background: #fafbfc; color: #4a5765; }
.row-sub > .col-label { background: #fafbfc; padding-left: 38px; font-weight: 400; }

/* Disclosure triangle, rotated when open. */
.disc {
  display: inline-block;
  width: 10px;
  margin-right: 8px;
  color: var(--muted);
  transition: transform .12s ease;
}
.disc::before { content: "\25B8"; }
.disc-empty::before { content: ""; }
.row-cat.is-open .disc { transform: rotate(90deg); }

/* -------------------------------------------------------------------------
   Forms and buttons
   ------------------------------------------------------------------------- */
.fld { display: block; }
.fld-inline { display: flex; align-items: center; gap: 8px; }

.fld-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.fld-inline .fld-label { margin-bottom: 0; }

.fld-input {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

.fld-input:focus { border-color: var(--brass); outline: none; }

select.fld-input { min-width: 130px; }

input[type="number"].fld-input,
.fld-input.is-num {
  text-align: right;
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.btn {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.btn:hover { border-color: #b9c1ca; background: #f7f8fa; text-decoration: none; }

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.btn-primary:hover { background: var(--ink-3); border-color: var(--ink-3); }

.btn-block { display: block; width: 100%; }

.tools-form { display: flex; gap: 10px; align-items: center; }

/* -------------------------------------------------------------------------
   Empty states
   ------------------------------------------------------------------------- */
.empty {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}

.empty-lead { margin: 0 0 6px; font-size: 16px; color: var(--text); }
.empty .btn { margin-top: 16px; }

/* -------------------------------------------------------------------------
   Sign in
   ------------------------------------------------------------------------- */
.signin-body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
}

.signin {
  width: 320px;
  padding: 30px 28px 28px;
  background: var(--card);
  border-radius: 6px;
}

.signin-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--brass);
  border-radius: 3px;
  color: var(--brass);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}

.signin-title {
  margin: 14px 0 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
}

.signin .fld { margin-bottom: 14px; }
.signin .check { margin: 4px 0 18px; }

.signin-notice {
  margin: 0 0 16px;
  padding: 9px 11px;
  border-left: 3px solid var(--out);
  background: #fdf2f1;
  color: var(--out);
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =========================================================================
   Transactions
   ========================================================================= */

/* -------------------------------------------------------------------------
   Filter bar. One row of controls replacing the four separate forms that
   View, Search and List each printed for themselves.

   Every .fld gets a definite flex-basis. With `flex: 0 0 auto` the basis
   comes from the content, and the child select has width:100%, which is a
   percentage against a shrink-to-fit parent - the two resolve against each
   other and the field stretches to the full row.
   ------------------------------------------------------------------------- */
.filters {
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.filters .fld { flex: 0 0 auto; min-width: 0; }
.filters .fld-sm   { flex: 0 0 118px; }
.filters .fld-md   { flex: 0 0 168px; }
.filters .fld-grow { flex: 1 1 200px; min-width: 160px; }

.filters .fld-input { width: 100%; }
.filters select.fld-input { min-width: 0; }

.filters-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}

.filters-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.filters-actions { display: flex; gap: 8px; }

.panel-figure {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.panel-figure.is-in  { color: var(--in); }
.panel-figure.is-out { color: var(--out); }

.note-warn { color: var(--brass); }
.muted { color: var(--muted); font-weight: 400; }

/* -------------------------------------------------------------------------
   Ledger table
   ------------------------------------------------------------------------- */
.tbl-ledger .col-date {
  width: 104px;
  color: var(--muted);
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
}
.tbl-ledger .col-desc { white-space: normal; min-width: 260px; }
.tbl-ledger .col-desc a { color: var(--text); }
.tbl-ledger .col-desc a:hover { color: var(--brass); }
.tbl-ledger .col-acct { color: var(--muted); }

.tbl-ledger tbody tr:hover > td { background: #f7f9fb; }

.col-sort { cursor: pointer; user-select: none; }
.col-sort:hover { color: var(--text); }
.col-sort.is-sorted { color: var(--brass); }
.sort-mark { font-size: 9px; }

/* Editable cells read as editable without shouting about it. The category
   cells keep the underline, because those are the ones you edit in place.
   The rest of the row opens the same editor but does not advertise it - the
   whole row lighting up on every hover would be noise. */
.cell-cat,
.cell-sub {
  cursor: pointer;
  border-bottom: 1px solid var(--rule-soft);
}

.cell-cat:hover,
.cell-sub:hover {
  background: #fff8ea;
  box-shadow: inset 0 -1px 0 var(--brass);
}

.col-date[data-edit],
.col-desc[data-edit],
.col-num[data-edit] { cursor: pointer; }
.tbl-ledger tr:hover .col-date[data-edit] { color: var(--brass); }

.tag-flow {
  display: inline-block;
  min-width: 34px;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: .04em;
  text-align: center;
}

.tag-flow.is-in  { background: #e4f2ea; color: var(--in); }
.tag-flow.is-out { background: #f9e9e8; color: var(--out); }

.tag-todo {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid #e2c893;
  border-radius: 9px;
  background: #fdf5e5;
  color: var(--brass);
  font-size: 11px;
  letter-spacing: .03em;
}

tr.is-editing > td { background: #fff8ea !important; }

.row-subtotal > td {
  background: #f1f4f7;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Inline editor
   ------------------------------------------------------------------------- */
.row-editor > td { padding: 0; background: #fffdf7; }

.editor {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--brass);
}

.editor-fields { display: flex; gap: 12px; }
.editor-fields .fld-input { min-width: 170px; }

.editor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.editor-msg { font-size: 12px; color: var(--muted); }
.editor-msg.is-good { color: var(--in); }
.editor-msg.is-bad  { color: var(--out); }

/* -------------------------------------------------------------------------
   Pager
   ------------------------------------------------------------------------- */
.pager { display: flex; align-items: center; gap: 6px; }

.pager-at {
  padding: 0 8px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.btn-sm { padding: 4px 10px; font-size: 12px; }

.pager .btn[disabled] { opacity: .4; cursor: default; }
.pager .btn[disabled]:hover { border-color: var(--rule); background: var(--card); }

.empty-inset { border: none; border-radius: 0; padding: 40px 24px; }

/* =========================================================================
   Review queue
   ========================================================================= */
.review { max-width: 900px; }

.review-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.review-bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #dde1e6;
  overflow: hidden;
}

.review-bar-fill {
  height: 100%;
  width: 0;
  background: var(--brass);
  transition: width .18s ease;
}

.review-count {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.review-card { padding: 0; }

/* The transaction itself. Everything below is a response to this, so it
   gets the weight and sits on the ink field. */
.review-txn {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 20px;
  background: var(--ink);
  border-radius: var(--radius) var(--radius) 0 0;
}

.review-date {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: #8e9dac;
}

.review-desc {
  flex: 1 1 300px;
  font-size: 19px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
}
.review-desc:hover { color: var(--brass-lift); text-decoration: none; }

.review-amount {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.review-amount.is-in  { color: #7fd0a6; }
.review-amount.is-out { color: #f0a49e; }

.review-account {
  font-size: 12px;
  color: #8e9dac;
  flex-basis: 100%;
}

.review-section { padding: 14px 20px; border-bottom: 1px solid var(--rule-soft); }

.review-label {
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.chips, .review-suggestions { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.chip:hover { border-color: #b3bcc6; background: #f6f8fa; }

.chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.chip-note {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
}
.chip.is-on .chip-note { color: #9fb0c0; }

.chip-suggest { border-color: #e2c893; background: #fdf8ee; }
.chip-suggest:hover { border-color: var(--brass); background: #fbf1dd; }

.review-extras {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 18px;
}
.review-extras .fld-grow { flex: 1 1 320px; }

/* A merchant you have named reads as the name, marked the same way the
   merchant links on Transactions are. */
.review-desc.is-named { border-bottom: 1px solid #cbb489; }

.review-msg.is-warn { color: var(--brass); }

/* =========================================================================
   The wrap-up on the cleared queue
   ========================================================================= */
/* The panel comes in to meet the content rather than the content sitting in
   the middle of a wide white field. */
.empty-wrapup { max-width: 920px; margin-left: auto; margin-right: auto; }
.wrapup { max-width: none; }
.wrapup-slot { width: 100%; margin-top: 26px; text-align: left; }
.wrapup-none { margin: 26px 0 0; font-size: 13px; color: var(--muted); }

.wrapup-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.wrapup-head {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.wrapup-pick {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.wrapup-pick .fld-input { padding: 4px 8px; font-size: 13px; }

.wrap-block {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.wrap-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: help;
}
.wrap-why { font-size: 12px; font-weight: 400; color: var(--muted); }

/* The description and its explanation stack, so a long merchant name wraps
   into its own column instead of shoving the note halfway across the row. */
/* Three columns rather than a flex row, so the figures line up down the
   block whatever length the descriptions are. */
.wrap-row {
  display: grid;
  grid-template-columns: 1fr 104px auto;
  align-items: baseline;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13px;
}
.wrap-row:last-child { border-bottom: 0; }

.wrap-text { min-width: 0; }
.wrap-main { display: block; overflow-wrap: anywhere; }
.wrap-note {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

.wrap-amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.wrap-act { min-width: 0; }
.wrap-row .btn-tiny { opacity: .55; }
.wrap-row:hover .btn-tiny { opacity: 1; }

/* Held back for its amount, not its category. Sits under the transaction
   line because that is what it is talking about. */
.review-flagnote {
  margin: 0;
  padding: 0 20px 12px;
  font-size: 13px;
  color: var(--brass);
}

.review-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 20px;
}

.review-chosen {
  flex: 1;
  font-size: 13px;
  color: var(--muted);
}
.review-chosen.is-set { color: var(--text); font-weight: 600; }

.review-keys {
  margin: 0;
  padding: 0 20px 14px;
  font-size: 12px;
  color: var(--muted);
}

.review-keys strong {
  display: inline-block;
  min-width: 17px;
  padding: 1px 5px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #f5f6f8;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  text-align: center;
}

.review-msg { padding: 0 20px 14px; font-size: 13px; color: var(--muted); }
.review-msg.is-bad { color: var(--out); }

.tools-note { font-size: 13px; color: var(--muted); }

/* =========================================================================
   Import
   ========================================================================= */
.notice {
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 13px;
  color: var(--text);
}

.notice.is-good { border-left-color: var(--in);  background: #f2f9f5; }
.notice.is-bad  { border-left-color: var(--out); background: #fdf3f2; }

.import-form { padding: 0; }

/* The drop target is the label, so the whole panel is the click target and
   the input inside it needs no wiring. The input is taken out of the flow
   rather than display:none, which would stop it being reachable by keyboard
   and stop the label opening the picker in some browsers. */
.dropzone {
  display: block;
  padding: 26px 20px;
  border: 2px dashed var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.dropzone:hover { border-color: var(--brass-lift); background: #fdfaf3; }
.dropzone.is-over {
  border-color: var(--brass);
  background: #fbf1dd;
}
.dropzone.has-file {
  border-style: solid;
  border-color: var(--in);
  background: #f3f8f4;
}

.dropzone-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.dropzone-input:focus + .dropzone-mark { outline: 2px solid var(--brass); }

.dropzone-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 auto 8px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--card);
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
}
.dropzone.is-over .dropzone-mark,
.dropzone:hover .dropzone-mark { border-color: var(--brass); color: var(--brass); }
.dropzone.has-file .dropzone-mark { border-color: var(--in); color: var(--in); }

.dropzone-main {
  display: block;
  font-size: 14px;
  color: var(--text);
}
.dropzone.has-file .dropzone-main { font-weight: 600; overflow-wrap: anywhere; }
.dropzone-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

/* The file is the decision; the two selects are settings for it. Stacking
   them says so, and gives the drop target somewhere to be a target. */
.import-body { padding: 16px; }

.import-opts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  text-align: center;
}
.import-step { font-size: 13px; color: var(--muted); }

/* Every account visible at once. A menu asks you to remember the list; this
   asks you to read it, which is the difference between picking the right one
   and picking the one that was already showing. */
.acct-picks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.acct-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.acct-pick span {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.acct-pick span:hover { border-color: var(--brass); }
.acct-pick input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}
.acct-pick input:focus-visible + span { outline: 2px solid var(--brass); }

.import-go { margin-top: 2px; }

/* Amount signs has been right every time it has been asked, so it stops
   being a question and becomes a setting. Removing it outright would be
   worse: it is the only way to correct a file the guesser reads backwards,
   and by the time you know it was wrong the file has been parsed and
   deleted, so the fix has to be available before the upload. */
.import-adv { flex: 0 0 auto; }
.import-adv > summary {
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  padding: 7px 0;
}
.import-adv > summary::-webkit-details-marker { display: none; }
.import-adv > summary::before { content: "+  "; font-weight: 600; }
.import-adv[open] > summary::before { content: "-  "; font-weight: 600; }
.import-adv > summary:hover { color: var(--text); }
.import-adv .fld-input { margin-top: 4px; font-size: 13px; }

/* The stepped form. Every rule here is behind .is-stepped, which only script
   adds, so nothing is hidden from a browser that cannot reveal it again. */
.import-form.is-stepped .import-opts { display: none; }
.import-form.is-stepped.has-file .import-opts { display: flex; }

.import-form.is-stepped .import-go { display: none; }
.import-form.is-stepped.has-account .import-go { display: block; }

.undo-list { padding: 4px 16px 12px; }
.undo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.undo-row:last-child { border-bottom: 0; }
.undo-text { flex: 1 1 auto; min-width: 0; }
.undo-main { display: block; font-size: 13px; font-weight: 600; }
.undo-note { display: block; font-size: 12px; color: var(--muted); }

/* Once it holds a file the drop target stops being a target and becomes a
   receipt, so it gives its height back to the step that matters now. */
.import-form.is-stepped.has-file .dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  text-align: left;
}
.import-form.is-stepped.has-file .dropzone-mark { margin: 0; flex: 0 0 auto; }
.import-form.is-stepped.has-file .dropzone-main { flex: 1 1 auto; min-width: 0; }
.import-form.is-stepped.has-file .dropzone-sub { margin-top: 0; flex: 0 0 auto; }

/* .tbl td sets white-space: nowrap and outranks a bare .col-note, so this
   has to be qualified or the note column refuses to wrap and drags the whole
   table past the edge of its panel. */
.col-note { color: var(--muted); white-space: normal; }
.tbl th.col-note,
.tbl td.col-note { white-space: normal; }

/* A transfer is neither income nor spending, so it gets neither colour. */
.tag-flow.is-transfer { background: #eceff2; color: #5b6874; }
.panel-figure.is-neutral { color: var(--muted); }

/* =========================================================================
   Setup
   ========================================================================= */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--rule);
}

.tab {
  padding: 9px 16px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: -1px;
}

.tab:hover { color: var(--text); }

.tab.is-on {
  background: var(--card);
  border-color: var(--rule);
  border-bottom: 1px solid var(--card);
  color: var(--text);
  font-weight: 600;
}

.tab-body { margin-top: 18px; }
.tab-body > * + * { margin-top: 22px; }

/* Grid rows that are forms.

   Each row of these lists is its own <form>, which is why they are not
   tables: a <form> between <tbody> and <tr> is invalid and the parser lifts
   it out, detaching every input inside it. */

/* Capped, because these are short names in a wide window. Left to fill the
   panel, a four character subcategory sat in a seven hundred pixel box. */
.setup-panel { max-width: 1060px; }

.slist { display: flex; flex-direction: column; }

.srow {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--rule-soft);
}

.srow:last-child { border-bottom: none; }
.srow:hover { background: #f9fafb; }

.shead {
  background: #f5f6f8;
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.shead:hover { background: #f5f6f8; }

.slist-accounts .srow { grid-template-columns: minmax(150px,1fr) 130px 74px 108px 96px 104px auto; }
.slist-flow     .srow { grid-template-columns: minmax(150px,1fr) minmax(150px,1fr) 128px 112px auto; }
.slist-cats     .srow { grid-template-columns: minmax(160px,300px) minmax(160px,300px) 74px auto; }
.slist-nw       .srow { grid-template-columns: minmax(130px,1fr) 128px 140px 66px 100px 84px auto; }
/* The last track is a fixed width rather than auto because each .srow is
   its own grid, not a subgrid. An auto track collapses to nothing in the
   header, where that cell is empty, and expands to fit two buttons in the
   data rows - and the difference comes out of the flexible tracks, which
   pushed Matches and Disagrees left of their own column headings. */
.slist-rules .srow {
  grid-template-columns:
    minmax(150px, 1.2fr) 112px minmax(118px, 1fr) minmax(118px, 1fr) 76px 96px 132px;
}

/* A rule that argues with your own filing decisions is the whole point of
   the tab, so it is marked in the list rather than only in its count. A rule
   that matches nothing has not earned either colour. */
.srow-warn { background: #fdf6f4; }
.srow-dead { opacity: 0.62; }
.srow .col-num.is-bad { color: var(--out); font-weight: 600; }

.rule-cell { min-width: 0; }
.rule-text {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Most rules have no exception, so an empty field is a ghost - it shows
   only its label until you hover or type in it. Thirty bordered inputs down
   the page doubled the height of the list to say nothing. */
.rule-except {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}
.rule-except-label { font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.rule-except .fld-input {
  padding: 1px 4px;
  font-size: 11px;
  color: var(--muted);
  border-color: transparent;
  background: transparent;
}
.rule-except .fld-input:hover { border-color: var(--rule-soft); }
.rule-except .fld-input:focus {
  border-color: var(--rule);
  background: var(--card);
  color: var(--text);
}

.rule-alt {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}
.rule-alt strong { color: var(--text); font-weight: 600; }

/* Small enough to sit inside a line of explanatory text without breaking it. */
.btn-tiny {
  padding: 0 6px;
  font-size: 11px;
  line-height: 16px;
  border-radius: 3px;
  vertical-align: baseline;
}
.rule-pct {
  display: inline-block;
  min-width: 30px;
  margin-left: 5px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  text-align: right;
}

.slist-rules .srow { padding-top: 5px; padding-bottom: 5px; }
.slist-rules .col-num { white-space: nowrap; }

/* Wrong before, right lately. Marked because the all time figure is the one
   worth acting on even though the score has moved on. */
.rule-alt.is-mended { color: var(--brass); cursor: help; }
.slist-rules .col-actions .btn { padding: 5px 9px; }

/* The reasoning behind the list, closed until it is wanted. Sits outside
   .panel-head, which is a flex row and turns stacked paragraphs into
   columns. */
.setup-more {
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.setup-more > summary {
  padding: 8px 0;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.setup-more > summary::-webkit-details-marker { display: none; }
.setup-more > summary::before { content: "+  "; font-weight: 600; }
.setup-more[open] > summary::before { content: "-  "; font-weight: 600; }
.setup-more > summary:hover { color: var(--text); }
.setup-more p {
  margin: 0 0 10px;
  max-width: 82ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.setup-more p:last-child { padding-bottom: 4px; }

/* =========================================================================
   Logic
   ========================================================================= */
.logic-flow {
  margin: 0;
  padding: 4px 16px 14px 38px;
  border-bottom: 1px solid var(--rule);
}
.logic-flow li { margin: 9px 0; padding-left: 4px; }
.logic-flow li::marker { color: var(--brass); font-weight: 600; }
.logic-flow strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.logic-flow span {
  display: block;
  max-width: 84ch;
  margin-top: 1px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.logic-flow em { font-style: normal; font-family: var(--mono); font-size: 12px; }

/* Fixed layout with a colgroup, because the note column is long enough that
   auto layout let it push the whole table past the edge of the panel. */
.tbl-logic { table-layout: fixed; width: 100%; }
.tbl-logic td, .tbl-logic th {
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tbl-logic .col-note { max-width: none; font-size: 12px; line-height: 1.45; }
.tbl-logic code { white-space: normal; overflow-wrap: anywhere; }

/* A second row of tabs inside a tab. Lighter than the first, so the two
   levels do not compete. */
.tabs-sub { margin-bottom: 14px; }
.tabs-sub .tab { font-size: 13px; padding: 5px 12px; }

.logic-try { padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.logic-try .row-add { flex-wrap: wrap; gap: 10px; }

.logic-block { padding: 10px 16px 14px; border-bottom: 1px solid var(--rule); }
.logic-block .setup-help { margin: 0; }

.logic-line {
  display: flex;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.5;
}
.logic-key {
  flex: 0 0 132px;
  color: var(--muted);
  font-size: 12px;
  padding-top: 1px;
}
.logic-val { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.logic-val .is-bad { color: var(--out); }

.logic-block code, .tbl-logic code, .logic-line code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--paper);
  padding: 1px 5px;
  border-radius: 3px;
}

/* The winner is the whole point of the table, so it is marked in the row
   rather than only by being first. */
.logic-win { background: #f2f7f3; }
.logic-win td { font-weight: 600; }
.logic-mark {
  width: 46px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--in);
}

.logic-verdict {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border-left: 3px solid var(--rule);
}
.logic-verdict.is-good { border-left-color: var(--in); }
.logic-verdict-head { font-size: 15px; font-weight: 600; }
.logic-verdict-as { font-size: 13px; }
.logic-verdict-why { font-size: 13px; color: var(--muted); max-width: 78ch; }

.rule-look { color: inherit; border-bottom: 1px dotted var(--rule); text-decoration: none; }
.rule-look:hover { border-bottom-color: var(--brass); }

.srow .fld-input { width: 100%; padding: 5px 8px; font-size: 13px; min-width: 0; }
.srow .col-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.srow .col-actions { text-align: right; white-space: nowrap; }
.srow .col-actions .btn + .btn { margin-left: 5px; }

/* A category and the subcategories under it should read as one block. */
.srow-cat {
  background: #f4f6f8;
  border-top: 1px solid var(--rule);
  border-bottom-color: var(--rule);
}
.srow-cat:hover { background: #eef2f6; }
.srow-cat .fld-input { font-weight: 600; background: var(--card); }
.srow-cat .col-num { color: var(--text); font-weight: 600; }

.srow-sub { box-shadow: inset 3px 0 0 #dde3e9; }
.srow-sub:hover { box-shadow: inset 3px 0 0 var(--brass); }

/* The add row is always present under every category, so it stays quiet
   until you go near it. */
.srow-new { border-bottom: none; }
.srow-new .fld-input {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
}
.srow-new:hover .fld-input { border-style: solid; background: var(--card); }
.srow-new .btn { opacity: .6; }
.srow-new:hover .btn { opacity: 1; }

.setup-empty { color: var(--muted); font-size: 13px; margin: 0; }

/* The add-a-row controls in a panel footer.
   
   The base .fld-input is width:100%, which is right inside a grid cell but
   wrong here: in a wrapping flex row every control tried to fill the whole
   footer, so each one landed on its own line. */
.row-add {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.row-add .fld-input {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  padding: 6px 9px;
}

.row-add input[type="text"] { flex: 1 1 210px; max-width: 300px; }
.row-add select { max-width: 220px; }
.row-add .btn { flex: 0 0 auto; margin-left: 4px; }

/* A footer that exists to add something reads as its own strip, not as an
   afterthought under the last row. */
.panel-foot .row-add { width: 100%; }

.row-add-label {
  flex: 0 0 auto;
  margin-right: 2px;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.words-body { padding: 16px; }

.setup-help {
  margin: 0 0 14px;
  max-width: 62ch;
  font-size: 13px;
  color: var(--muted);
}

.chip-del { display: inline-flex; gap: 7px; }
.chip-del .chip-x { color: var(--muted); font-size: 14px; line-height: 1; }
.chip-del:hover { border-color: var(--out); color: var(--out); }
.chip-del:hover .chip-x { color: var(--out); }

.panel-foot form { display: contents; }

/* =========================================================================
   Net worth
   ========================================================================= */
.nw-head {
  align-items: flex-end;
  padding-left: 22px;
  padding-right: 22px;
}

.nw-form-foot { padding-left: 22px; padding-right: 22px; }
.nw-head-text { flex: 1; }
.nw-date { flex: 0 0 auto; }
.nw-date .fld-label { white-space: nowrap; }
.nw-date .fld-input { width: 170px; }

.nw-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rule);
}

.nw-panel {
  display: flex;
  flex-direction: column;
  padding: 18px 22px 20px;
}

/* Wealth carries an extra row for Westor, so without this its total sat a
   line below the liabilities total and the two would not read as a pair. */
.nw-total { margin-top: auto; }
.nw-panel + .nw-panel { border-left: 1px solid var(--rule); }

.nw-title {
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--rule);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nw-title.is-in  { color: var(--in);  border-bottom-color: #bfe0cd; }
.nw-title.is-out { color: var(--out); border-bottom-color: #eec4c1; }

/* A hairline under each row gives the eye something to follow across the
   gap between a label on the left and its figure on the right. */
.nw-row {
  display: grid;
  grid-template-columns: 1fr 168px;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--rule);
}

.nw-row label { font-size: 14px; color: var(--text); }

/* The figures are the content, so they are set as figures rather than as
   form fields: no border, no box, aligned in a column. The field only shows
   itself when you go near it, which keeps the panel readable while still
   letting you click a number and type over it. */
.nw-row .fld-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  text-align: right;
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--text);
}

.nw-row:hover .fld-input { border-color: var(--rule); background: var(--card); }

.nw-row .fld-input:focus {
  border-color: var(--brass);
  background: var(--card);
  outline: none;
}

/* Spinners break the alignment and are useless on a dollar amount. */
.nw-row input[type="number"] { -moz-appearance: textfield; }
.nw-row input[type="number"]::-webkit-outer-spin-button,
.nw-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.nw-westor { grid-template-columns: 1fr auto 168px; }

.nw-westor-fields {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nw-westor-fields .fld-input { width: 96px; font-size: 13px; }
.nw-times { color: var(--muted); font-size: 12px; }

.nw-total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  border-bottom: none;
  font-weight: 600;
}

.nw-total span { font-size: 14px; }

.nw-total output,
.nw-derived {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  font-size: 17px;
  padding-right: 8px;
}

.nw-derived { color: var(--muted); font-size: 14px; font-weight: 500; }

/* Net position: the answer, so it gets the size. A quiet band rather than a
   black one - the figure carries it, and the dark bar was competing with the
   rail for attention. */
.nw-net {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--rule);
  background: #f5f6f8;
}

.nw-net > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.nw-net output {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.nw-net output.is-in  { color: var(--in); }
.nw-net output.is-out { color: var(--out); }

.nw-super .nw-panel { background: #fafbfc; }
.nw-super .nw-title { border-bottom-color: var(--rule); color: var(--muted); }

.stat-note.is-in  { color: var(--in); }
.stat-note.is-out { color: var(--out); }

/* -------------------------------------------------------------------------
   Chart
   ------------------------------------------------------------------------- */
.chart-wrap { padding: 16px; }
.chart { width: 100%; height: auto; display: block; }

.chart .grid { stroke: var(--rule-soft); stroke-width: 1; }
.chart .grid.is-zero { stroke: var(--rule); stroke-width: 1.5; }

.chart .axis {
  fill: var(--muted);
  font-family: var(--ui);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot  { stroke: var(--card); stroke-width: 1.5; }

.ln-net { stroke: var(--ink);   }
.ln-in  { stroke: var(--in);    }
.ln-out { stroke: var(--out);   }
.ln-sup { stroke: var(--brass); }
circle.ln-net { fill: var(--ink);   }
circle.ln-in  { fill: var(--in);    }
circle.ln-out { fill: var(--out);   }
circle.ln-sup { fill: var(--brass); }

.chart-keys { display: flex; gap: 16px; margin-left: auto; }

.chart-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.chart-key i {
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.chart-key i.ln-net { background: var(--ink);   }
.chart-key i.ln-in  { background: var(--in);    }
.chart-key i.ln-out { background: var(--out);   }
.chart-key i.ln-sup { background: var(--brass); }

@media (max-width: 1100px) {
  .nw-columns { grid-template-columns: 1fr; }
  .nw-panel + .nw-panel { border-left: none; border-top: 1px solid var(--rule); }
}

/* =========================================================================
   Tags

   Every tag is a toggle in the leading column: a flag for "come back to
   this", a letter for the rest. Off is a faint outline, on is filled, so a
   row says what it carries at a glance and changing it is one click.
   ========================================================================= */
.tag-btn {
  display: inline-block;
  min-width: 17px;
  height: 17px;
  padding: 0 2px;
  margin-right: 2px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: #ccd2d9;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
}

.tag-btn:hover { border-color: var(--rule); color: var(--brass); }

.tag-btn.is-on {
  border-color: var(--brass);
  background: #fdf5e5;
  color: var(--brass);
}

.tag-btn[disabled] { opacity: .5; cursor: default; }

.th-b { margin-left: 4px; font-size: 10px; }

.col-flag { width: 58px; white-space: nowrap; padding-right: 2px; }

/* A tag other than the quick one, shown as a letter so a row says what it
   carries without a column each. */
.editor-tags { display: flex; gap: 16px; }

/* =========================================================================
   Reports
   ========================================================================= */

/* Merchant names run long and sit in the sticky first column, so they wrap
   rather than pushing every other column off the right of the panel. */
.tbl-new .col-label {
  white-space: normal;
  max-width: 420px;
  min-width: 260px;
}

.tbl-new .row-sub .col-label {
  padding-left: 38px;
  font-size: 12px;
  color: #4a5765;
}

.tbl .col-desc { white-space: normal; }

/* A recurring table carries its own yearly total in the header. */
.panel-head .panel-figures { align-self: baseline; }

/* Group row status.

   The count is a fixed width so the pills after it begin at the same x on
   every row and read as a column. */
.grp-meta { white-space: nowrap; }

/* What changed: the movement reads as one thing but is three cells, so the
   dollar figures line up on their decimal, the words start at the same x,
   and the percentages form their own column instead of trailing off the end
   of whatever text preceded them. */
.tbl .chg-word {
  text-align: left;
  white-space: nowrap;
  width: 1%;
  padding-left: 5px;
  padding-right: 14px;
  font-size: 9px;
  line-height: 1;
}
.tbl .chg-pct { width: 1%; white-space: nowrap; color: var(--muted); }

/* The column is right aligned so the percentages line up on their last
   digit, but a lone dash hard against that edge looks like it belongs to
   the column beside it. Centred, it sits under its own heading. */
.tbl .chg-pct.is-nil { text-align: center; }

/* Share of income, then under now, so both columns of percentages line up
   and the comparison reads down the page as well as across. */
/* The window a column covers, under the column it covers rather than in a
   sentence above the table. Reset out of the uppercase header treatment so
   the date reads as a date. */
.tbl thead th .th-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.tbl .chg-share { line-height: 1.25; }
.tbl .chg-was {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

/* Why the category moved, under the name of the category. Its own line
   rather than another column: it is prose, it is only there when one
   supplier explains the movement, and a column of mostly empty cells would
   cost width on every row to say nothing on most of them. */
.tbl .chg-driver {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
.tbl .row-cat .chg-driver { padding-left: 18px; }

.grp-count {
  display: inline-block;
  width: 104px;
  color: var(--muted);
  font-weight: 400;
}

.pill {
  display: inline-block;
  min-width: 86px;
  margin-right: 6px;
  padding: 1px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .02em;
  text-align: center;
}

.pill-changed { border-color: #eec4c1; background: #fdf3f2; color: var(--out); }
.pill-stopped { border-color: #e2c893; background: #fdf5e5; color: var(--brass); }

/* =========================================================================
   Merchant links
   ========================================================================= */
.merchant {
  color: var(--text);
  border-bottom: 1px dotted #c3ccd5;
  text-decoration: none;
}

.merchant:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
  text-decoration: none;
}

/* Title, figures and the way out on one line. They were three bands, and
   with the tabs underneath the merchant view was taller than the table it
   was describing. */
.merchant-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
}

.merchant-id { flex: 1; min-width: 0; }
.merchant-top .btn { flex: 0 0 auto; }

.merchant-facts {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--muted);
}



.review-search,
.review-history {
  font-size: 12px;
  color: #9aa8b6;
  border-bottom: 1px dotted #4a5a6b;
}

.review-search:hover,
.review-history:hover { color: var(--brass-lift); text-decoration: none; }

/* The account a recurring payment comes from. Two cards can carry the same
   subscription, and they are counted separately. */
.row-account {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: var(--muted);
}

/* =========================================================================
   Merchant linking
   ========================================================================= */
.mg-list { display: flex; flex-direction: column; }

.mg-pair {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  grid-template-areas: "keep fold act" "why why act";
  align-items: center;
  gap: 6px 18px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-soft);
}

.mg-pair:hover { background: #f9fafb; }
.mg-list form:last-child .mg-pair { border-bottom: none; }

.mg-side:first-of-type { grid-area: keep; }
.mg-fold { grid-area: fold; position: relative; }

/* The one being folded in is shown as arriving at the one that stays. */
.mg-fold::before {
  content: "\2190";
  position: absolute;
  left: -13px;
  color: var(--brass);
}

.mg-name { display: block; font-size: 13px; font-weight: 600; }
.mg-meta { display: block; font-size: 11px; color: var(--muted); }

.mg-why {
  grid-area: why;
  font-size: 11px;
  color: var(--brass);
}

.mg-act { grid-area: act; }

.mg-linked-head { border-top: 1px solid var(--rule); }

/* Manual merchant linking, on the merchant view. */
.mg-names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-soft);
}

.mg-names .fig-label {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

.mg-linkbox { padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); }

.mg-search { display: flex; align-items: center; gap: 10px; }
.mg-search .fld-input { width: 280px; }

.mg-found { margin-top: 10px; border-top: 1px solid var(--rule-soft); }

.mg-one {
  grid-template-columns: 1fr auto;
  grid-template-areas: "keep act";
  padding: 9px 0;
}

.mg-none { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

/* =========================================================================
   Seasonality
   ========================================================================= */

/* Each month gets a bar drawn from the average of the finished years, so the
   shape of the year is readable without going through the figures.

   The bar sits inside a wrapper with a definite pixel height. A percentage
   height on an absolutely positioned element resolves against its containing
   block, and a table cell is not a reliable one - the bars overflowed
   upwards into the row above. */
.season-cell { vertical-align: bottom; }

.season-plot {
  position: relative;
  display: block;
  height: 42px;
  margin-bottom: 3px;
  overflow: hidden;
}

/* The zero line. Some months are genuinely money in, so the bars grow both
   ways from here rather than all upward from an absolute value. */
.season-plot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--rule);
}

/* Right-aligned, like every figure in the column. Centred in the cell it sat
   slightly left of the numbers above it and the column did not read as one. */
.season-bar {
  position: absolute;
  right: 0;
  width: 46%;
  min-height: 1px;
}

.season-bar.is-out { top: 50%; background: #e6aca7; border-radius: 0 0 2px 2px; }
.season-bar.is-in  { bottom: 50%; background: #9ecdb4; border-radius: 2px 2px 0 0; }

.season-cell:hover .season-bar.is-out { background: var(--out); }
.season-cell:hover .season-bar.is-in  { background: var(--in); }

/* Right-aligned to match the bar above it and the figures above that, so the
   whole column shares one edge. */
.season-val {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--muted);
}

.season-val.is-in  { color: var(--in); }
.season-val.is-out { color: var(--out); }

/* The report tab bar carries its own filters, so it needs room to wrap. */
.panel-head .tools-form { margin-left: auto; flex-wrap: wrap; }

/* A merchant you have named reads as your words, not the bank's. */
.merchant.is-named { border-bottom-style: solid; border-bottom-color: #cbb489; }
.merchant.is-named:hover { border-bottom-color: var(--brass); }

/* Why a row has the category it has. Quieter than the note, which is
   something you wrote, where this is something the importer did. */
.row-why {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  opacity: 0.85;
}

#ed-trace { color: var(--muted); text-decoration: none; }
#ed-trace:hover { color: var(--brass); border-color: var(--brass); }

/* The last column carries the two things a row can do. Nothing else on the
   row said it opened, which made the whole editor undiscoverable. */
.col-open {
  width: 62px;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
}

.row-trace {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 6px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  text-decoration: none;
  color: var(--muted);
  opacity: .45;
}
.tbl-ledger tr:hover .row-trace { opacity: 1; }
.row-trace:hover { border-color: var(--brass); color: var(--brass); }

.row-open {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  opacity: .5;
  transition: transform .12s ease, opacity .12s ease;
}
.tbl-ledger tr:hover .row-open { opacity: 1; color: var(--brass); }
.tbl-ledger tr.is-editing .row-open {
  transform: rotate(90deg);
  opacity: 1;
  color: var(--brass);
}

/* An action offered inside a notice, on its own line so the notice still
   reads as a sentence. */
.notice-act { display: block; margin-top: 9px; }

/* The rows a delete button is about to remove. Shown at the point of the
   decision rather than left for the user to go and find. */
.anon-list {
  margin-top: 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--card);
}
.anon-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 12px;
}
.anon-row:last-child { border-bottom: 0; }
.anon-date { flex: 0 0 88px; color: var(--muted); }
.anon-desc { flex: 1 1 auto; overflow-wrap: anywhere; }
.anon-amt {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.anon-more { color: var(--muted); font-style: italic; }

.row-note {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.row-note::before { content: "\201C"; }
.row-note::after  { content: "\201D"; }

/* Naming a merchant, on the merchant view. */
.mg-namebox {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-soft);
  background: #fbfcfd;
}

.mg-namebox .fld { flex: 0 0 220px; }
.mg-namebox .fld-grow { flex: 1 1 300px; }
.mg-namebox .fld-input { width: 100%; }

.merchant-note {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text);
}

.editor .fld-grow { flex: 1 1 260px; }
.editor .fld-grow .fld-input { width: 100%; }

/* =========================================================================
   Merchant view

   The header was doing four jobs at once. Identity and figures stay on
   screen; recategorising, naming and linking are one at a time behind tabs.
   ========================================================================= */
.tabs-inset {
  padding: 0 16px;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule);
  background: #fbfcfd;
}

.tabs-inset .tab { padding: 8px 14px; font-size: 13px; }
.tabs-inset .tab.is-on { background: var(--card); border-color: var(--rule); }

.tab-count {
  display: inline-block;
  min-width: 16px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 8px;
  background: #e3e8ed;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.mv-body { margin-top: 0; padding: 14px 16px; }
.mv-body > * + * { margin-top: 12px; }

.mv-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.mv-form .fld { flex: 0 0 220px; }
.mv-form .fld-grow { flex: 1 1 300px; }
.mv-form .fld-input { width: 100%; }
.mv-form select.fld-input { width: auto; min-width: 180px; }

.mv-lead {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.mv-body .mg-linkbox,
.mv-body .mg-names { padding: 0; border: none; background: none; }

/* Weekly spend chart */
.chart .bar { opacity: .85; }
.chart .bar:hover { opacity: 1; }
.chart .bar-out { fill: #e6aca7; }
.chart .bar-in  { fill: #9ecdb4; }
.chart .bar-out:hover { fill: var(--out); }
.chart .bar-in:hover  { fill: var(--in); }

.ln-avg { stroke: var(--ink); stroke-width: 2; fill: none; }
.chart-key i.ln-avg { background: var(--ink); }
.chart-key i.key-bar { background: #e6aca7; height: 9px; border-radius: 1px; }

/* Flag button in the Review queue. */
#rv-flag .flag-mark { color: #c3ccd5; }
#rv-flag:hover .flag-mark { color: var(--brass); }
#rv-flag.is-on { border-color: var(--brass); background: #fdf5e5; color: var(--brass); }
#rv-flag.is-on .flag-mark { color: var(--brass); }

/* A merchant tag reads green rather than brass, because it is a statement
   about the merchant rather than a note to come back to. */
.btn-mtag .tag-mark {
  display: inline-block;
  min-width: 12px;
  font-weight: 700;
  color: #c3ccd5;
}
.btn-mtag:hover .tag-mark { color: var(--in); }
.btn-mtag.is-on { border-color: var(--in); background: #eff6f1; color: var(--in); }
.btn-mtag.is-on .tag-mark { color: var(--in); }

/* The results panel while a live search is in flight. Dimmed rather than
   blanked, so the page does not jump between keystrokes. */
#tx-results.is-loading { opacity: .55; transition: opacity .12s ease; }

/* Looking up a merchant you do not recognise. Beside the title rather than
   on it: clicking the heading of the page you are already on and landing on
   Google is not what anyone expects. */
.title-search {
  margin-left: 10px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px dotted #c3ccd5;
  vertical-align: 2px;
}

.title-search:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
  text-decoration: none;
}

/* =========================================================================
   Policies

   The register reads as a table because every row answers the same handful
   of questions in the same order. What is different from Transactions is
   that a cell often carries a figure and a qualification about it - how
   often it is charged and when it last was - so the small print is a block
   under the value rather than a column of its own.
   ========================================================================= */

/* A stat with nothing to report. The table already had this; the strip
   only ever showed figures until the next renewal could be missing. */
.stat-value.is-nil { color: #c2c9d1; }

/* -------------------------------------------------------------------------
   Worth a look

   Above the register rather than inside it. A lapsed policy is not a row
   you happen to scroll past, and a renewal you find out about afterwards
   is the whole reason for keeping a register at all.
   ------------------------------------------------------------------------- */
.pol-attention { border-left: 3px solid var(--brass); }

/* -------------------------------------------------------------------------
   The register: one grid for every panel

   Auto table layout sizes each table to its own contents, so Cost a year
   landed at a different place on Life, Health and Home and the eye had to
   find the column again on every panel. Fixed layout with a colgroup puts
   all three on the same grid, and the figures can be read straight down the
   page. The cost of it is that a long policy name wraps instead of pushing
   the table wider, which is the right trade for a register of ten rows.
   ------------------------------------------------------------------------- */
.tbl-policy { table-layout: fixed; min-width: 940px; }

.tbl-policy .c-policy  { width: auto;  }
.tbl-policy .c-sum     { width: 132px; }
.tbl-policy .c-charged { width: 168px; }
.tbl-policy .c-cost    { width: 176px; }
.tbl-policy .c-change  { width: 116px; }
.tbl-policy .c-renews  { width: 128px; }
.tbl-policy .c-open    { width: 82px;  }

/* -------------------------------------------------------------------------
   Colour in the headers

   Brass carries interaction everywhere else in the app, so it cannot mean
   "heading" as well. What separates a panel here is a hairline of it above
   the column names and the panel title set in ink rather than grey - enough
   to tell three stacked tables apart at a glance without turning a ledger
   into a set of coloured tabs.
   ------------------------------------------------------------------------- */
.tbl-policy thead th {
  border-top: 2px solid var(--brass);
  background: #f3f5f8;
  color: var(--ink-3);
}

.tbl-policy thead th.col-total { color: var(--brass); }

/* The panel's own figures. First row of the table rather than a block
   floating at the right of the head, so each total sits in the column it is
   a total of. Tinted and ruled off beneath, so it reads as the summary of
   what follows rather than as another policy. */
.pol-total > td {
  background: #f8f9fb;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}

.pol-total > td.col-desc {
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}

.pol-total .pol-meta { font-weight: 400; }

/* -------------------------------------------------------------------------
   The register
   ------------------------------------------------------------------------- */
/* The colgroup sets every width now, so these only say what is allowed to
   wrap inside them. */
.tbl-policy .col-desc,
.tbl-policy .col-when { white-space: normal; }
.tbl-policy .col-renew { white-space: normal; }

/* rp_move_cell renders the figure, the arrow and the percentage as three
   cells so that each forms a column of its own. That was designed for the
   single line rows of the reports tables; a policy row runs to three lines,
   and the arrow was dropping to the vertical middle of the row while the
   figure it belongs to sat at the top, so the two read as unrelated.

   Everything in this table aligns to the top, and the arrow inherits the
   row's line height so the glyph centres on the first line beside its own
   figure rather than floating above it. */
.tbl-policy th,
.tbl-policy td { vertical-align: top; }

/* The arrow rides with its own figure rather than sitting in a cell of its
   own. Small, and set on the middle of the line so it reads as a mark on
   the number instead of a character in front of it. */
.pol-chg {
  font-size: 9px;
  margin-right: 5px;
  vertical-align: middle;
}
.tbl-policy .col-actions { text-align: right; white-space: nowrap; }

/* A sub-line under a figure is a qualification of it, never a second figure,
   so it stays on one line. The Charged cell is the exception: its columns
   are now a fixed width and "last 20 Jul 2026 &middot; 2 policies" has to be
   allowed to fall onto a second line rather than run out of its cell. */
.tbl-policy .col-num .pol-meta { white-space: nowrap; }
.tbl-policy .col-when .pol-meta { white-space: normal; }
.tbl-policy tbody tr.pol-row:hover > td { background: #f7f9fb; }

.pol-name { font-weight: 600; }

.pol-meta {
  display: block;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.pol-meta.is-out { color: var(--out); }

/* The number you opened the page to find. Monospaced so a run of digits
   can be read back over the phone without losing your place. */
.pol-ref {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
}

.pol-freq { display: block; font-size: 13px; }

/* Not an error, a fact that needs acting on. Same red as money out, but
   small and unfilled so it does not shout across the table. */
.pol-warn {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--out);
}

.pol-row.is-ended > td { opacity: .55; }

/* -------------------------------------------------------------------------
   The form

   A <details> so it is out of the way when the page is being read and open
   when it is being used. Adding a policy is a once a year job; looking one
   up happens far more often.
   ------------------------------------------------------------------------- */
.pol-form > summary {
  cursor: pointer;
  list-style: none;
}

.pol-form > summary::-webkit-details-marker { display: none; }

.pol-form > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
}

.pol-form[open] > summary::after { content: "-"; }

.pol-form-head { align-items: center; }

.pol-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 16px;
  padding: 16px 18px;
}

.pol-fields .fld-wide { grid-column: 1 / -1; }

/* -------------------------------------------------------------------------
   The merchant link

   Given its own block below the fields because it is the one decision on
   the form that changes what the page can tell you afterwards.
   ------------------------------------------------------------------------- */
.pol-link {
  padding: 16px 18px;
  border-top: 1px solid var(--rule-soft);
  background: #f7f8fa;
}

.pol-link-now {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pol-link-now .fld-label { margin-bottom: 0; }

.pol-linked {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.pol-link .fld { max-width: 420px; }

.pol-mresults {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin-top: 8px;
}

.pol-mresults:empty { margin-top: 0; }

.pol-hit {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-bottom: none;
  background: var(--card);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pol-hit:first-child { border-radius: var(--radius) var(--radius) 0 0; }

.pol-hit:last-child {
  border-bottom: 1px solid var(--rule);
  border-radius: 0 0 var(--radius) var(--radius);
}

.pol-hit:hover { background: #eef2f6; border-color: #b9c1ca; }

.pol-hit-name { display: block; font-size: 13px; font-weight: 600; }

.pol-hit-meta { display: block; font-size: 12px; color: var(--muted); }

.pol-manual {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.pol-manual .fld { max-width: 200px; }

/* -------------------------------------------------------------------------
   One policy

   The cover table is laid out the way an insurer's own schedule is, because
   that is the document you will have open beside it. Sums insured in one
   column, the two premium columns kept apart, fees under the covers, totals
   at the foot.
   ------------------------------------------------------------------------- */
.pol-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.pol-summary .fld-label { display: block; margin-bottom: 2px; }

/* The bank's word against the schedule's. Set apart from the other notes,
   since it is the one line on the panel that can disagree with itself. */
.pol-check {
  padding: 10px 18px;
  border-bottom: 1px solid var(--rule-soft);
  background: #f7f8fa;
}

.tbl-cover tfoot th,
.tbl-cover tfoot td { font-weight: 600; }

/* A fee is not cover. It belongs in the same totals and not in the same
   reading, so it is set back rather than given a column of its own. */
.pol-fee > td:first-child {
  padding-left: 24px;
  color: var(--muted);
  font-style: italic;
}

.pol-asat {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule-soft);
}

.pol-asat .setup-help { margin: 0; flex: 1 1 320px; }

.slist-cover .srow {
  grid-template-columns: minmax(150px, 1fr) 110px 150px 160px 170px;
}

/* A policy that cannot be held inside super has no super column at all, so
   the grid is one track shorter rather than one track empty. */
.slist-cover.no-super .srow {
  grid-template-columns: minmax(150px, 1fr) 110px 150px 170px;
}

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