/* ── Browsing the Tally mirror: the masters tree and the voucher anatomy ──
   Ported from the Tally explorer, restyled onto the plant's paper palette (the
   variables at the end of layout.css). No colour is spelled out here that is
   not one of those variables — nothing must reach back for Bootstrap's blue.
   Selectors stay under .mlayout / .tdetail / .vdetail / .omodal so the generic
   names (.doc, .num, .none, .caret) cannot leak onto anyone else's page. */

/* ── two-column layout: book rail + tabbed tree pane ── */
.mlayout { display: flex; gap: 1.4rem; align-items: flex-start; }

/* the book selector — server-scoped, one book at a time */
.bookrail {
  flex: 0 0 220px; display: flex; flex-direction: column; gap: 0.18rem;
  position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto;
}
.bookrail__item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  text-decoration: none; padding: 0.5rem 0.7rem; border-radius: 8px;
  border: 1px solid transparent; font-size: 0.83rem; line-height: 1.25; color: var(--ink-3);
}
.bookrail__item:hover { background: var(--rail); color: var(--ink); }
.bookrail__item.on { background: var(--green); border-color: var(--green-ink); color: var(--deck); font-weight: 600; }
.bookrail__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bookrail__count { font-family: var(--bs-font-monospace); font-size: 0.66rem; opacity: 0.8; flex: 0 0 auto; }
.bookrail__item.on .bookrail__count { color: var(--deck); opacity: 0.9; }

/* ── right pane: category tabs ── */
.mpane { flex: 1 1 auto; min-width: 0; }
.mtabs {
  display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center;
  border-bottom: 2px solid var(--ink); padding-bottom: 0.5rem; margin-bottom: 1.1rem;
}
.mtab {
  font-family: var(--bs-font-monospace); font-size: 0.76rem; padding: 0.45rem 0.85rem; cursor: pointer;
  border: 1px solid var(--edge-2); background: var(--well); color: var(--ink-3); border-radius: 8px 8px 0 0;
}
.mtab:hover { color: var(--ink); }
.mtab.on { background: var(--green); border-color: var(--green-ink); color: var(--deck); font-weight: 600; }
.mtab__n { font-size: 0.66rem; opacity: 0.85; }
.mpanel[hidden] { display: none; }

/* ── tree area + the floating expand/collapse pair over its top-right ── */
.treewrap { position: relative; }
.tree-fab {
  position: sticky; top: 0.6rem; z-index: 6; width: max-content; margin-left: auto;
  margin-bottom: -2.6rem; display: flex; gap: 0.35rem;
}
.tree-fab[hidden] { display: none; }
.tree-fab button {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1.05rem; line-height: 1;
  border: 1px solid var(--edge-2); background: var(--panel); color: var(--ink-3);
  box-shadow: 0 2px 8px rgba(32, 38, 29, 0.14); display: inline-flex; align-items: center; justify-content: center;
}
.tree-fab button:hover { color: var(--ink); border-color: var(--green); box-shadow: 0 3px 11px rgba(32, 38, 29, 0.2); }

/* ── the common search bar (client-side, over the nodes already in the DOM) ── */
.msearch { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.msearch input {
  flex: 1; font-size: 0.95rem; padding: 0.6rem 0.9rem;
  border: 1px solid var(--edge-2); border-radius: 10px; background: var(--panel); color: var(--ink); outline: none;
}
.msearch input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 107, 63, 0.15); }
.msearch__count { font-family: var(--bs-font-monospace); font-size: 0.72rem; color: var(--ink-3); white-space: nowrap; }
.mresults { display: flex; flex-direction: column; gap: 0.05rem; }

/* ── the tree itself ── */
.forest {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 12px;
  padding: 1rem 1.2rem; margin-bottom: 1rem;
}
.forest > h3 { font-weight: 600; font-size: 1.05rem; margin: 0.1rem 0 0.6rem; color: var(--ink); }
.tnode summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.45rem;
  padding: 0.18rem 0.3rem; border-radius: 6px;
}
.tnode summary::-webkit-details-marker { display: none; }
.tnode summary:hover { background: var(--rail); }
.tnode .caret { font-family: var(--bs-font-monospace); color: var(--ink-4); transition: transform 0.15s; font-size: 0.8rem; }
.tnode[open] > summary .caret { transform: rotate(90deg); }
.tchildren { margin-left: 1.05rem; padding-left: 0.55rem; border-left: 1px solid var(--edge); }
.tleaf {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.14rem 0.3rem 0.14rem 1.45rem; border-radius: 6px;
}
.tleaf:hover { background: var(--rail); }
.tnode a, .tleaf a { text-decoration: none; color: var(--ink); font-size: 0.88rem; }
.tnode a:hover, .tleaf a:hover { text-decoration: underline; color: var(--green-ink); }
.ttag {
  font-family: var(--bs-font-monospace); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-4); padding: 0.1rem 0.35rem; background: var(--well); border-radius: 4px;
}
.tcount {
  font-family: var(--bs-font-monospace); font-size: 0.68rem; color: var(--green-ink);
  background: rgba(47, 107, 63, 0.1); padding: 0.05rem 0.45rem; border-radius: 999px;
}

.mlayout .none, .tdetail .none, .vdetail .none {
  padding: 2.5rem; text-align: center; font-family: var(--bs-font-monospace); color: var(--ink-4);
}

@media (max-width: 760px) {
  .mlayout { flex-direction: column; }
  .bookrail { flex-basis: auto; width: 100%; flex-direction: row; flex-wrap: wrap; position: static; max-height: none; }
  .bookrail__item { flex: 0 0 auto; }
}


/* ── the shared Turbo-Frame modal (master detail, voucher detail) ── */
.omodal {
  border: 0; border-radius: 16px; padding: 0; max-width: min(760px, 94vw); width: 100%;
  background: var(--deck); color: var(--ink); box-shadow: 0 24px 60px rgba(32, 38, 29, 0.4);
}
.omodal::backdrop { background: rgba(32, 38, 29, 0.45); }
.omodal__card { position: relative; max-height: 88vh; overflow: auto; padding: 1.5rem 1.6rem 2rem; }
.omodal__close {
  position: absolute; top: 0.7rem; right: 0.8rem; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--edge-2); background: var(--panel); color: var(--ink-3); cursor: pointer; font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.omodal__close:hover { color: var(--ink); border-color: var(--rust); }

/* ── key/value tables and raw XML, shared by both detail views ── */
.kv { background: var(--panel); border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; }
.kv table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.kv td { padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--edge); vertical-align: top; word-break: break-word; }
.kv tr:last-child td { border-bottom: 0; }
.kv td:first-child { font-family: var(--bs-font-monospace); font-size: 0.74rem; color: var(--ink-3); width: 220px; }
pre.xml {
  background: var(--ink); color: var(--deck); border-radius: 10px; font-family: var(--bs-font-monospace);
  font-size: 0.74rem; line-height: 1.55; padding: 1rem 1.1rem; overflow: auto; max-height: 480px;
}

/* ── master detail ── */
.teyebrow, .veyebrow {
  font-family: var(--bs-font-monospace); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rust-ink); margin: 0 0 0.3rem;
}
.tdetail .ttitle, .vdetail .vtitle { font-weight: 700; font-size: 1.45rem; margin: 0; line-height: 1.15; color: var(--ink); }
.tmeta, .vmeta {
  display: flex; gap: 0.5rem 1.4rem; flex-wrap: wrap; font-family: var(--bs-font-monospace);
  font-size: 0.76rem; color: var(--ink-3); margin: 0.7rem 0 1.2rem; align-items: baseline;
}
.tmeta b, .vmeta b { color: var(--ink); font-weight: 600; }
.tsection { font-weight: 600; font-size: 1.05rem; margin: 1.6rem 0 0.5rem; color: var(--ink); }

/* ── voucher anatomy ── */
.vdetail .vdate { font-weight: 500; font-style: italic; color: var(--ink-3); }
.vdetail .vamount { font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.vdetail .vdeleted {
  font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--deck); background: var(--rust); padding: 0.12rem 0.5rem; border-radius: 999px;
}

/* the document chain: order → challan → invoice */
.chain { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: stretch; margin: 1.2rem 0; }
.chain .doc {
  display: flex; flex-direction: column; gap: 0.1rem; text-decoration: none; min-width: 150px;
  border: 1px solid var(--edge-2); border-radius: 12px; padding: 0.55rem 0.8rem;
  background: var(--panel); color: var(--ink);
}
.chain .doc:hover { border-color: var(--green); }
.chain .doc.current { border-color: var(--green); box-shadow: 0 0 0 2px rgba(47, 107, 63, 0.22); }
.chain .stage {
  font-family: var(--bs-font-monospace); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rust-ink);
}
.chain .dnum { font-family: var(--bs-font-monospace); font-size: 0.74rem; color: var(--ink-3); }
.chain .dtype { font-size: 0.8rem; font-weight: 600; }
.chain .arrow { align-self: center; font-family: var(--bs-font-monospace); color: var(--ink-4); }

/* expand/collapse the whole anatomy */
.vtools { display: flex; gap: 0.4rem; margin: 1.1rem 0 0; }
.vtool {
  font-family: var(--bs-font-monospace); font-size: 0.7rem; padding: 0.32rem 0.8rem; cursor: pointer;
  border: 1px solid var(--edge-2); border-radius: 999px; background: var(--rail); color: var(--ink-3);
}
.vtool:hover { background: var(--well); color: var(--ink); border-color: var(--green); }

.entgrid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; margin-top: 0.7rem; }
.entcard { background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; }
.entcard > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
  margin: 0; padding: 0.55rem 0.9rem; font-family: var(--bs-font-monospace); font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--deck); background: var(--ink); font-weight: 600;
}
.entcard > summary::-webkit-details-marker { display: none; }
.entcard > summary .caret { transition: transform 0.15s; font-size: 0.7rem; opacity: 0.7; }
.entcard[open] > summary .caret { transform: rotate(90deg); }
.entcard .ecount { margin-left: auto; opacity: 0.75; letter-spacing: 0.04em; }
.entcard table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.entcard td, .entcard th { padding: 0.45rem 0.9rem; border-bottom: 1px solid var(--edge); text-align: left; }
.entcard th { font-family: var(--bs-font-monospace); font-size: 0.6rem; text-transform: uppercase; color: var(--ink-3); }
.entcard td.num, .entcard th.num { text-align: right; font-family: var(--bs-font-monospace); white-space: nowrap; }
.entcard td.qty { font-family: var(--bs-font-monospace); white-space: nowrap; }
.entcard .sub { font-family: var(--bs-font-monospace); font-size: 0.64rem; color: var(--ink-4); }
.entcard tr.totals td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 700; background: var(--well); }
.entcard tr.billgroup td {
  font-family: var(--bs-font-monospace); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); background: var(--well); font-weight: 600;
}
.drcr { font-family: var(--bs-font-monospace); font-size: 0.6rem; font-weight: 600; padding: 0.12rem 0.45rem; border-radius: 5px; }
.drcr.dr { background: rgba(168, 67, 29, 0.13); color: var(--rust-ink); }
.drcr.cr { background: rgba(47, 107, 63, 0.13); color: var(--green-ink); }
.balcheck { font-family: var(--bs-font-monospace); font-size: 0.68rem; }
.balcheck.ok { color: var(--green-ink); }
.balcheck.bad { color: var(--rust-ink); }

.vdetail .narr {
  margin: 1rem 0 0; font-size: 0.88rem; background: rgba(146, 117, 36, 0.09);
  border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 0.55rem 0.9rem; color: var(--ink-2);
}
.entcard.tech { margin-top: 1.2rem; }
.entcard.tech .techbody { padding: 0.9rem; }
.entcard.tech .techh { font-weight: 600; font-size: 0.95rem; margin: 1rem 0 0.3rem; color: var(--ink); }
.entcard.tech .techh:first-child { margin-top: 0; }

/* ── the register's filter bar ───────────────────────────────────────────────
   One row, and it has to stay one row at a desk. Only the search box flexes;
   every other control is content-width, sized HERE rather than by an inline
   style so the whole budget for the row can be read in one place.

   The budget is real and tight. A 1280px window gives this bar 1108px, because
   the page sits in Bootstrap's .container (1140px at that breakpoint, less
   2×16 padding) — so the widths below are what fits, measured in the browser,
   not what looks about right:

     search 240→420 | book 168 | period 146 | type 164 | toggle+Clear 175
     + five 8px gaps  = 1054 of 1108 with a period chosen, 873 without.

   Custom… adds two 138px date boxes and their gaps (292px) to a row with 54px
   left, so at exactly 1280 the tail drops to a second line. That is the one
   state that wraps at a desk, it is opt-in, and it wraps CORRECTLY — see below.
   From 1400 up the container is 1288px and even Custom is one line.

   Clear is a quiet link and needs almost nothing — but it is also the thing
   that used to wrap off the end onto a line of its own, which reads as a stray
   link rather than as part of the bar. It is therefore not a flex item of the
   BAR at all: it rides in .vfilter__tail with the toggles, so any width narrow
   enough to wrap takes them down together and Clear is never stranded. */
.vfilter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.vfilter__field { flex: 0 0 auto; }
.vfilter__search { flex: 1 1 240px; min-width: 180px; max-width: 420px; }
.vfilter__book { width: 168px; }
.vfilter__period { width: 146px; }
.vfilter__type { width: 164px; }

/* the From/To pair — one item, so the two boxes never come apart, and folded
   away entirely unless the period is Custom… */
.vfilter__dates { display: flex; flex: 0 0 auto; gap: 0.4rem; }
.vfilter__dates[hidden] { display: none; }
.vfilter__dates input { width: 138px; }

/* what the chosen word resolved to, sat on the baseline of the controls */
.vfilter__range {
  flex: 0 0 auto; white-space: nowrap; padding-bottom: 0.45rem;
  font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* THE TAIL WRAPS INSIDE ITSELF, and it did not use to. It was nowrap while it
   held one toggle and Clear — a pair narrow enough that nothing could make it
   overflow. The sales bar now carries TWO toggles ("include non-customer sales"
   and "include own-group sales" are two questions, so they are two boxes), and
   nowrap on ~430px of controls put a horizontal scrollbar on the page at phone
   widths.

   Wrapping here keeps the promise the comment above makes rather than breaking
   it. The items are a long toggle, a long toggle and a short link: at any width
   that splits them, the link goes onto the line the second toggle took, because
   it is the narrowest thing here and follows it. Clear is still never alone on
   a line — it just has a different neighbour. Each toggle stays nowrap, so a
   label never breaks mid-phrase. */
.vfilter__tail {
  display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center;
  gap: 0.15rem 0.4rem; padding-bottom: 0.3rem;
}
.vfilter__tail .form-check { margin-bottom: 0; white-space: nowrap; }
.vfilter__tail .btn { padding-left: 0.4rem; padding-right: 0.4rem; }

/* ── the voucher register ────────────────────────────────────────────────────
   Ported from the explorer's voucher-display component, restyled onto the paper
   palette. A CSS grid rather than a table: the row is a link target and the
   column widths are set once, on .vd-head and .vd-body, from the server's track
   list — so the head and its rows cannot fall out of step. Everything is under
   .vd, so `.num` and `.deleted` cannot leak onto anyone else's page. */
.vd { border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; background: var(--panel); }
.vd-scroll { max-height: 68vh; overflow-y: auto; }

.vd-head {
  position: sticky; top: 0; z-index: 1; display: grid; gap: 0.5rem; padding: 0.55rem 0.9rem;
  background: var(--ink); color: var(--deck); font-family: var(--bs-font-monospace);
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.vd-body { display: flex; flex-direction: column; }
.vd-row {
  display: grid; grid-template-columns: var(--vd-grid); gap: 0.5rem;
  padding: 0.45rem 0.9rem; border-bottom: 1px solid var(--edge);
  font-size: 0.84rem; align-items: baseline; cursor: pointer;
  /* clears the sticky .vd-head when the arrows scroll a row up to the top */
  scroll-margin-top: 2.2rem; scroll-margin-bottom: 0.4rem;
}
.vd-row:last-child { border-bottom: 0; }
.vd-row:hover { background: var(--rail); }

/* the keyboard's place in the list. A wash of the gold accent rather than a
   border or an outline: the row must not change height or shift its columns as
   the selection runs down the register, or a fast scan reads as a flicker. */
.vd-row.selected { background: rgba(146, 117, 36, 0.15); }
.vd-row.selected:hover { background: rgba(146, 117, 36, 0.2); }
.vd-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-head .num, .vd-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.vd-row a { font-weight: 600; color: var(--green-ink); text-decoration: none; }
.vd-row a:hover { text-decoration: underline; }
.vd-number, .vd-amount { font-family: var(--bs-font-monospace); font-size: 0.78rem; }
.vd-book, .vd-narr { color: var(--ink-3); }
.vd-narr { font-size: 0.78rem; }

/* a voucher deleted in Tally, shown only because the audit toggle asked */
.vd-row.vd-gone { background: rgba(168, 67, 29, 0.07); }
.vd-row.vd-gone:hover { background: rgba(168, 67, 29, 0.12); }
/* selected AND deleted: deepen the rust rather than washing gold over it — the
   row has to keep saying "deleted" while it is the one being read. */
.vd-row.vd-gone.selected { background: rgba(168, 67, 29, 0.18); }
.vd-row.vd-gone.selected:hover { background: rgba(168, 67, 29, 0.22); }
.vd-deleted {
  font-family: var(--bs-font-monospace); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--deck); background: var(--rust); padding: 0.05rem 0.4rem; border-radius: 999px;
}

.vd-sentinel, .vd-empty {
  padding: 0.9rem; font-family: var(--bs-font-monospace); font-size: 0.72rem;
  color: var(--ink-4); text-align: center;
}
.vd-empty { text-align: left; padding: 1.4rem 0.9rem; }

@media (max-width: 900px) {
  .vd-scroll { overflow-x: auto; }
  .vd-head, .vd-body { min-width: 780px; }
}

/* ── Trial balance figures in the masters tree ──
   A group's net sits hard right of its name, where an eye running down the
   tree finds a column. Dr and Cr rather than a minus sign: an accountant reads
   the side, not the arithmetic. */
.tbal {
  margin-left: auto; padding-left: 0.6rem; flex: 0 0 auto;
  font-family: var(--bs-font-monospace); font-size: 0.7rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tbal--dr { color: var(--ink-2); }
.tbal--cr { color: var(--green-ink); }
.tbal--nil { color: var(--ink-4); }

/* What the figures are, said once above the tree. */
.tbnote {
  margin: 0 0 0.6rem; font-size: 0.72rem; color: var(--ink-4);
  font-family: var(--bs-font-monospace);
}
.tbnote__ok { color: var(--green-ink); }
.tbnote__off { color: var(--rust); }
.tbnote__fy { color: var(--ink); font-weight: 600; }

/* ── One master's record ────────────────────────────────────────────────────
   The voucher anatomy's shape at the master grain: an eyebrow, a title, the
   figure, then foldable cards. Everything here reuses .entcard / .vtools, so
   the two records read as one family rather than two pages. */

/* where it sits, root first — a figure means little without the groups above */
.tpath {
  margin: 0.35rem 0 0; font-size: 0.76rem; color: var(--ink-4);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem;
}
.tpath a { color: var(--ink-3); text-decoration: none; }
.tpath a:hover { color: var(--green-ink); text-decoration: underline; }
.tpath__sep { opacity: 0.5; }

/* what it is worth: opening + movement = closing, read left to right */
.tbcard {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  margin: 0.9rem 0 0.2rem; padding: 0.7rem 0.9rem;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 14px;
}
.tbcard__fig { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tbcard__k {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-4);
}
.tbcard__v {
  font-family: var(--bs-font-monospace); font-size: 0.92rem;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2);
}
.tbcard__op { font-size: 1.05rem; color: var(--ink-4); }
/* the answer carries the weight; the two it is made of do not */
.tbcard__fig--closing .tbcard__v { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.tbcard__note {
  margin-left: auto; font-size: 0.68rem; color: var(--ink-4); white-space: nowrap;
}

/* label/value rows inside a card */
.fcard { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.fcard td { padding: 0.45rem 0.9rem; border-bottom: 1px solid var(--edge); vertical-align: top; }
.fcard tr:last-child td { border-bottom: 0; }
.fcard__k { width: 190px; color: var(--ink-3); }
.fcard__v { color: var(--ink); word-break: break-word; }
/* the raw Tally keys are machine names and read as such */
.fcard--mono .fcard__k { font-family: var(--bs-font-monospace); font-size: 0.72rem; }

.tdetail .tguid {
  font-family: var(--bs-font-monospace); font-size: 0.64rem; color: var(--ink-4);
  margin-left: auto;
}
.tdetail pre.xml { margin: 0; border: 0; border-radius: 0; }

/* The balances toggle sits at the far end of the tab strip: it is a display
   option for the whole page, not a sixth category of master. */
.mtab--opt { margin-left: auto; text-decoration: none; border-radius: 8px; }

/* The FY select sits beside the balances toggle; styled to read as one of the
   tabs rather than a stray browser control. */
.mtb-fy { display: inline-flex; }
.mtb-fy__select {
  font-family: var(--bs-font-monospace); font-size: 0.76rem; padding: 0.4rem 0.6rem;
  border: 1px solid var(--edge-2); background: var(--well); color: var(--ink); border-radius: 8px;
}
.tbal--kg { color: var(--ink-2); }
/* the stock note belongs to the inventory panel, so it sits with the tree
   rather than over the whole page */
.tbnote--stock { margin-top: 0.2rem; }