/* ===========================================================================
   LEDGER — the theme.

   Accounting paper. The actual thing: pale green banded rows, a dark green
   rule, red for what is owed. That reference is doing real work rather than
   being a joke about old software - a revenue clerk has spent a career
   reading banded rows, and the banding is genuinely the fastest way to keep
   your eye on a line across twelve columns of figures.

   - Two greens and one red. Deep green is the department's ink; the pale
     green is paper; red is arrears and nothing else, ever.
   - Every figure is tabular and right-aligned, and the decimal columns line
     up down the page. This is the one screen in the suite where that is not a
     nicety - a column of rupee figures that does not align cannot be scanned.
   - Headings are a text-face with real weight, not a grotesque: this is a
     document, and it should read like one.
   =========================================================================== */
:root{
  --paper:#F5F8F2;
  --band:#E9F0E4;
  --card:#FFFFFF;
  --rule:#C2D4BA;
  --rule-2:#9DB694;
  --ink:#16211A;
  --ink-2:#3C4C41;
  --mut:#5E6E64;
  --green:#14532D;
  --green-2:#1E7A43;
  --gold:#8A6212;
  --gold-soft:#FBF3DE;
  --red:#9F1239;
  --red-soft:#FBEBEF;
  --ui:var(--f-text);
  --txt:var(--f-serif);
  --mono:var(--f-data);
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;color:var(--ink);
  font:14px/1.55 var(--ui);-webkit-font-smoothing:antialiased;
  /* GROUND: the pad itself. A green wash from the top edge over the 22px
     feint rule of accounting paper, continuing behind the cards so the whole
     page reads as one sheet rather than cards on a colour. */
  background:
    radial-gradient(70% 34% at 50% 0%,rgba(20,83,45,.055),transparent 66%),
    repeating-linear-gradient(0deg,rgba(20,83,45,.035) 0 1px,transparent 1px 22px),
    var(--paper);
}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:1420px;margin:0 auto;padding:24px 26px 60px}

/* ------------------------------------------------------------------ head */
.hd{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  border-bottom:2px solid var(--green);padding-bottom:12px}
.hd h1{margin:0;font:600 25px/1.15 var(--txt);letter-spacing:-.01em}
.hd .sub{margin:4px 0 0;font-size:13px;color:var(--mut)}
.hd .pick{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.sel{
  height:34px;border:1px solid var(--rule-2);background:var(--card);padding:0 10px;
  border-radius:3px;font-size:13px;
}
.bt{
  height:34px;padding:0 14px;border:1px solid var(--green);border-radius:3px;
  background:var(--green);color:#fff;cursor:pointer;font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.bt:hover{background:var(--green-2)}
.bt.gh{background:transparent;color:var(--green)}
.bt.gh:hover{background:#E4EEE3}
.bt svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------- the totals */
.tot{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:20px 0 22px}
.tot>div{background:var(--card);padding:14px 16px}
.tot .k{font:700 10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);margin-bottom:8px}
.tot .v{font:600 27px/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tot .d{font-size:12px;color:var(--mut);margin-top:7px;line-height:1.4}
.tot .red .v,.tot .v.red{color:var(--red)}
.tot .grn .v{color:var(--green-2)}

/* ----------------------------------------------------------------- ageing */
.age{display:flex;gap:2px;margin-top:9px;height:9px}
.age i{display:block;border-radius:1px}
.a1{background:#BFD9C6}.a2{background:#E0C98A}.a3{background:#D89B6A}
.a4{background:#B85C60}.a5{background:var(--red)}
.agekey{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:9px;font-size:11px;
  color:var(--mut)}
.agekey span{display:inline-flex;align-items:center;gap:5px}
.agekey i{width:9px;height:9px;border-radius:1px;flex:none}

/* ------------------------------------------------------------------ cols */
.cols{display:grid;grid-template-columns:1fr 396px;gap:22px;align-items:start}
/* A grid item's default min-width is auto, which means "as wide as my widest
   content". The ledger table declares min-width:720px, so the card grew to
   720px and took the page with it - the overflow-x:auto on the scroller
   inside never got a chance, because nothing was overflowing it. One line. */
.cols>*{min-width:0}
.lw{max-width:100%}
.card{background:var(--card);border:1px solid var(--rule)}
.card>h2{
  margin:0;padding:12px 16px;font:600 16px var(--txt);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:10px;
}
.card>h2 .n{margin-left:auto;font:600 12px var(--mono);color:var(--mut)}
.card .cs{margin:0;padding:11px 16px;font-size:12.5px;color:var(--mut);
  border-bottom:1px solid var(--rule);line-height:1.5}

/* ------------------------------------------------------------- the ledger */
.lw{overflow-x:auto}
table.lg{border-collapse:collapse;width:100%;font-size:13px;min-width:720px}
table.lg th{
  text-align:left;font:700 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);padding:9px 10px;background:#DCE8D8;border-bottom:1px solid var(--rule-2);
  white-space:nowrap;position:sticky;top:0;
}
table.lg th.n{text-align:right}
table.lg td{padding:8px 10px;border-bottom:1px solid #E7EEE4;vertical-align:top}
table.lg tbody tr:nth-child(even){background:var(--band)}
table.lg tbody tr:hover{background:#DDEAD8}
table.lg tbody tr.on{background:var(--gold-soft);box-shadow:inset 3px 0 0 var(--gold)}
table.lg td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;white-space:nowrap}
table.lg td.red{color:var(--red);font-weight:600}
table.lg .who{font-weight:600;font-size:13.5px}
table.lg .who span{display:block;font-weight:400;font-size:11.5px;color:var(--mut);
  font-family:var(--ui)}
.rank{
  display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:var(--green);color:#fff;font:700 11px var(--mono);flex:none;
}
.rank.lo{background:var(--rule-2)}
.pillx{
  display:inline-block;font:700 10.5px var(--ui);letter-spacing:.07em;text-transform:uppercase;
  padding:2px 6px;border-radius:2px;border:1px solid;
}
.px-good{background:#E7F1E7;border-color:#B4D0B4;color:var(--green)}
.px-mid{background:var(--gold-soft);border-color:#DFC98E;color:var(--gold)}
.px-bad{background:var(--red-soft);border-color:#E3B6C0;color:var(--red)}

/* -------------------------------------------------------------- the walk */
.walk{position:relative}
.walkmap{background:#EFF4EC;border-bottom:1px solid var(--rule)}
.walkmap svg{display:block;width:100%;height:auto}
.wroad{stroke:#CBDAC4;stroke-width:5;fill:none;stroke-linecap:round}
.wpath{stroke:var(--gold);stroke-width:2.2;fill:none;stroke-dasharray:6 4}
.wstop circle{fill:var(--card);stroke:var(--green);stroke-width:2}
.wstop.on circle{fill:var(--gold);stroke:var(--gold)}
.wstop text{font:700 10px var(--mono);fill:var(--green);text-anchor:middle}
.wstop.on text{fill:#fff}
.wstart circle{fill:var(--green);stroke:var(--green)}
.wstart text{fill:#fff}
ol.stops{margin:0;padding:0;list-style:none}
ol.stops li{
  display:flex;gap:11px;padding:10px 16px;border-bottom:1px solid #E7EEE4;
  align-items:flex-start;cursor:pointer;
}
ol.stops li:hover{background:var(--band)}
ol.stops li.on{background:var(--gold-soft)}
ol.stops li:last-child{border-bottom:0}
ol.stops .nm{flex:1;min-width:0}
ol.stops .nm b{font-size:13.5px;font-weight:600;display:block}
ol.stops .nm span{font-size:11.5px;color:var(--mut);display:block;line-height:1.45}
ol.stops .amt{font:600 13px var(--mono);color:var(--red);text-align:right;flex:none;
  font-variant-numeric:tabular-nums}
ol.stops .amt small{display:block;font:400 10.5px var(--ui);color:var(--mut)}
.wfoot{padding:12px 16px;background:var(--band);border-top:1px solid var(--rule);
  font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.wfoot b{color:var(--ink)}

.note{
  margin:18px 0 0;padding:13px 15px;background:var(--card);border:1px solid var(--rule);
  border-left:3px solid var(--gold);font-size:12.5px;line-height:1.65;color:var(--ink-2);
}
.note b{color:var(--ink)}

@media(max-width:1080px){
  .cols{grid-template-columns:1fr}
  .tot{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .wrap{padding:18px 14px 44px}
  .tot{grid-template-columns:1fr}
  .hd .pick{margin-left:0;width:100%}
  .hd h1{font-size:21px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ------------------------------------------------------- touch, on a phone */
@media(max-width:620px) and (pointer:coarse){
  .bt,.sel{min-height:44px}
  ol.stops li{min-height:56px}
}