/* ── Finance › Ledger groupings ──────────────────────────────────────────────

   Two pages, and both of them are a Bootstrap card with a table in it. The
   register needs nothing beyond that; everything below dresses ONE line of the
   grouping's own page — the form on the last row, and the list of groups it can
   still offer.

   Its own prefix rather than a reuse of .mlayout / .orglayout: both of those
   document their selectors as staying under their own container so short names
   cannot leak, and borrowing either container would drag its rail and tab
   styling in behind it.

   No colour here that is not one of the paper-palette variables at the end of
   layout.css. Every selector sits under .lgindex or .lgpanel. */

/* ── The register: a card per grouping ──

   The landings' card shape, in the landings' proportions, under this page's own
   prefix. NOT `.lnd-card`: that substrate belongs to the four section boards —
   LandingsShellTest locks its grid to one file and its shell stamps a board's
   own attribute — and this page carries a form, which a board never does.
   Borrowing the wrapper would tell the next reader this page was a board.

   Auto-fit rather than a fixed column count: there are four groupings today and
   there is now a card that makes a fifth, so the grid has to hold a number
   nobody has decided. */

.lgcards {
  display: grid; gap: 1rem; align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.lgcards .lgcard {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--panel); border: 1px solid var(--edge-2); border-radius: 12px;
  overflow: hidden;
}

a.lgcard {
  color: inherit; text-decoration: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
a.lgcard:hover {
  color: inherit; border-color: var(--section-color, var(--green));
  transform: translateY(-1px); box-shadow: 0 4px 14px rgba(32, 38, 29, 0.10);
}

.lgcards .lgcard__head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.8rem;
  padding: 0.6rem 1.1rem; background: var(--rail); border-bottom: 1px solid var(--edge);
}

.lgcards .lgcard__name { font-weight: 600; font-size: 0.95rem; color: var(--ink); }

/* Which of these the app named and which the office did. Not a warning — a
   grouping the office made is the point of the last card. */
.lgcards .lgcard__tag {
  margin-left: auto; font-family: var(--bs-font-monospace);
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4);
}

.lgcards .lgcard__body {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.9rem 1.1rem 1rem; flex: 1; min-width: 0;
}

.lgcards .lgcard__v {
  font-weight: 700; font-size: 1.7rem; line-height: 1.1; color: var(--ink);
  font-family: var(--bs-font-monospace); font-variant-numeric: tabular-nums;
}

/* Nothing chosen is not a nought and is not set like one: it is a sentence
   about the office, and a big 0 would read as a figure somebody had checked. */
.lgcards .lgcard__v--none {
  font-size: 0.95rem; font-weight: 500; color: var(--ink-4); line-height: 1.4;
}

.lgcards .lgcard__n { font-size: 0.76rem; color: var(--ink-4); }

.lgcards .lgcard__no { margin: 0.15rem 0 0; font-size: 0.76rem; color: var(--rust); }

/* ── The card that makes another ── */

.lgcards .lgcard--new { border-style: dashed; background: transparent; }
.lgcards .lgcard--new .lgcard__head { background: transparent; }

.lgcards .lgnew { display: flex; gap: 0.4rem; margin-bottom: 0.35rem; }
.lgcards .lgnew input { min-width: 0; }

/* One quiet line, and only on a grouping the office made: it holds groups and
   resolves ledgers like any other, and nothing reads it yet. */
.lgunread {
  margin: -0.25rem 0 1rem; font-size: 0.8rem; color: var(--gold-ink);
}

/* ── One grouping: what the last change did, and which books are out ── */

.lgpanel .lgnote {
  margin: 0; padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--edge);
  background: var(--rail); font-size: 0.82rem; color: var(--ink-2);
}
.lgpanel .lgnote--no { background: transparent; color: var(--rust); }

.lgpanel .lgbooks {
  margin: 0; padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--edge);
  font-size: 0.78rem; color: var(--gold-ink);
}

.lgpanel .lgnone { margin: 0; color: var(--ink-4); font-size: 0.83rem; }

/* ── The list of groups already in ── */

/* No overflow box around the table: one would clip the list the form's own box
   drops open, which is the whole of the choosing. */
.lgpanel .lgtable { overflow: visible; }

.lgpanel .lglist { font-size: 0.85rem; }
.lgpanel .lglist td[data-group-ledgers] { font-family: var(--bs-font-monospace); }

.lgpanel .lgrow--gone td { color: var(--rust); }

.lgpanel .lggone {
  margin-left: 0.4rem; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--rust);
}

/* `button_to` puts the class on the BUTTON and wraps it in a form of its own,
   so the form is the one selector here that is Rails' spelling and not ours. */
.lgpanel .lglist form.button_to { display: inline-flex; }

.lgpanel .lgout {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--edge-2); background: var(--panel);
  color: var(--ink-3); font-size: 0.65rem; line-height: 1;
}
.lgpanel .lgout:hover { background: var(--rust); border-color: var(--rust); color: var(--panel); }

/* ── The last line: the form ──

   A grid rather than a flex row, so the group box takes whatever is left and
   the book and the button keep the width they need. The row it sits in is a
   table cell, which is why the padding is stated here. */

.lgpanel tfoot .lgadd td { background: var(--rail); padding: 0.7rem 0.75rem; }

.lgpanel .lgform {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: start; gap: 0.5rem;
}

.lgpanel .lgform__book { align-self: start; }
.lgpanel .lgform__add { align-self: start; }

/* ── The group box, and what the book has left to offer ── */

.lgpanel .lgfield { display: block; min-width: 0; }
.lgpanel .lgpick { position: relative; }

.lgpanel .lgmatches {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.2rem);
  max-height: 17rem; overflow-y: auto;
  margin: 0; padding: 0.2rem; list-style: none;
  border: 1px solid var(--edge-2); border-radius: 8px; background: var(--panel);
  box-shadow: 0 8px 22px rgba(32, 38, 29, 0.14);
}

.lgpanel .lgmatch {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 0 0.6rem;
  padding: 0.3rem 0.45rem; border-radius: 6px; cursor: pointer;
}
.lgpanel .lgmatch:hover, .lgpanel .lgmatch.on { background: var(--well); }

.lgpanel .lgmatch__name {
  font-size: 0.83rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lgpanel .lgmatch__path {
  grid-column: 1; font-size: 0.7rem; color: var(--ink-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lgpanel .lgmatch__n {
  grid-row: 1; grid-column: 2;
  font-family: var(--bs-font-monospace); font-size: 0.68rem; color: var(--ink-4);
}

.lgpanel .lgmatch--none { cursor: default; color: var(--ink-4); font-size: 0.8rem; }
.lgpanel .lgmatch--none:hover { background: transparent; }

/* One small line, and only once a group has been picked. */
.lgpanel .lgadds {
  margin: 0.35rem 0 0; font-size: 0.76rem; font-weight: 600; color: var(--green-ink);
}
.lgpanel .lgadds--nil { color: var(--ink-4); font-weight: 400; }

/* Stacks rather than squeezing three controls onto a phone. */
@media (max-width: 767.98px) {
  .lgpanel .lgform { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILED UNDER THE REPORT EACH GROUPING SERVES
   ═══════════════════════════════════════════════════════════════════════════

   A ROW, NOT A TILE. The first attempt stretched .lgcard to full width, which
   produced a name at one end, a number at the other, and a hand's width of
   nothing between — and the tile's own rules (`.lgcards .lgcard`, two classes
   deep) quietly beat every layout written against `.lgcard--wide`, so the grid
   never applied at all.

   So this is its own component. One line per grouping: the name, the groups
   actually chosen, and the two figures — which is what lets a report's
   groupings be compared by running an eye down them. */

.lgset { margin-bottom: 1.5rem; }

.lgset__name {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin: 0 0 0.5rem; padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--ink);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink);
}
.lgset__n {
  font-family: var(--bs-font-monospace); font-size: 0.64rem;
  font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-4);
}

/* The row. Three columns and a fixed height, so a section of them reads as a
   list rather than as a stack of panels. */
.lgrow {
  display: grid;
  grid-template-columns: minmax(190px, 16rem) 1fr auto;
  align-items: center; gap: 1.25rem;
  padding: 0.6rem 0.9rem; margin-bottom: 0.3rem;
  background: var(--panel); border: 1px solid var(--edge-2); border-radius: 10px;
  color: inherit; text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.lgrow:hover { background: var(--rail); border-color: var(--section-color, var(--green)); }
.lgrow__name { color: var(--ink); text-decoration: none; }
.lgrow__name:hover { color: var(--green-ink); text-decoration: underline; }

/* Sits with the figures, quiet until the row is under the pointer: it is an
   action about the report, not the thing the row is for. */
.lgrow__make { opacity: 0; transition: opacity 0.12s ease; white-space: nowrap; }
.lgrow:hover .lgrow__make, .lgrow__make:focus-visible { opacity: 1; }

.lgrow__id { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.lgrow__name {
  font-weight: 600; font-size: 0.92rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lgrow__tag {
  font-family: var(--bs-font-monospace); font-size: 0.6rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4);
}
.lgrow__tag--own { color: var(--green-ink); }

/* What somebody chose, by DISTINCT name: the same group is anchored once per
   book, so the anchors themselves gave "Sales Accounts" three times over. */
.lgrow__of { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; min-width: 0; }
.lgchip {
  padding: 0.08rem 0.45rem; border-radius: 999px;
  font-size: 0.7rem; color: var(--ink-3);
  background: var(--well); border: 1px solid var(--edge-2);
  max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lgchip--more { color: var(--ink-4); background: transparent; border-style: dashed; }
.lgrow__empty { font-size: 0.74rem; color: var(--ink-4); font-style: italic; }

/* A number the eye lands on, and the word under it. */
.lgrow__figs { display: flex; gap: 1.4rem; flex: 0 0 auto; }
.lgfig { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.lgfig b {
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
  font-family: var(--bs-font-monospace); font-variant-numeric: tabular-nums;
}
.lgfig span {
  font-size: 0.58rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-4);
}

/* ── Making another, under the report it belongs to ──
   The report is not a thing to remember and pick — it is where you already are,
   so the form under a heading carries it hidden and asks only for a name. */
/* `.lgmake`, NOT `.lgadd`: the panel's own footer row is a <tr class="lgadd">,
   and a `display: flex` written for this form was landing on that table row —
   which is what pulled the book select and its button out of shape. Two
   different things had one name. */
.lgmake {
  display: flex; gap: 0.4rem; align-items: center;
  padding: 0.15rem 0.9rem 0;
}
.lgmake .form-control { max-width: 26rem; }
.lgmake--refused .form-control { border-color: var(--rust); }
.lgmake__no { margin: 0.3rem 0 0 0.9rem; font-size: 0.74rem; color: var(--rust); }

@media (max-width: 860px) {
  .lgrow { grid-template-columns: 1fr; gap: 0.4rem; }
  /* No hover on a touch screen, so the action is simply there. */
  .lgrow__make { opacity: 1; }
  .lgrow__figs { justify-content: flex-start; }
  .lgfig { align-items: flex-start; }
}

/* ── The grouping's chart of accounts ──
   Drawn by the masters browser's own partial, so almost nothing is needed here:
   the tree, the carets, the indent rail and the balance column all come from
   tally_browse.css. What this adds is the heading row the expand/collapse pair
   sits in, since here it is not floating over a full-height pane. */
.lgtree { margin-top: 1.4rem; }
.lgtree__head { display: flex; align-items: center; gap: 1rem; }
.lgtree__head .lgset__name { flex: 1; }
.tree-fab--inline { position: static; margin-bottom: 0.35rem; }
.lgtree .forest > h3 { font-size: 0.86rem; }

/* ── The two-pane selection editor ──
   The chart of accounts to tick on the left, what the ticks resolve to on the
   right. The tree, the carets and the indent rail are tally_browse.css's; what
   this adds is the two-column frame, the checkbox row, and the vanished-anchor
   strip. No per-page stylesheet — this is the grouping's own file. */
.lgedit__panes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start;
}
.lgedit__pick, .lgedit__resolved { min-width: 0; }
.lgedit__head { display: flex; justify-content: flex-end; margin-bottom: 0.35rem; }

/* The action bar over the editor: the grouping's own name on the left, Save on
   the right. Save is disabled until the selection controller sees a tick move
   the selection off what was saved. */
.lgedit__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem;
}
.lgedit__rename { display: flex; align-items: center; gap: 0.4rem; }
.lgedit__rename .form-control { width: auto; min-width: 14rem; }
.lgedit__rename--fixed { font-weight: 600; }

/* A book is a tree node like any other — a caret and a name, its chart of
   accounts folded inside — on both panes. No checkbox: a book is a container,
   not a thing to tick. The base .tnode rules give it the caret and the fold. */
.tnode--book > summary { font-weight: 600; }
.tnode--book__name { display: inline-flex; align-items: center; }

/* The bottom pane's head carries the balance-year picker beside the
   expand/collapse pair, centred on one line; the fab drops its own bottom
   margin here so it lines up with the select rather than riding above it. */
.lgtree__tools { display: flex; align-items: center; gap: 0.5rem; }
.lgtree__tools .tree-fab--inline { margin-bottom: 0; }
.lgtree__fy { width: auto; min-width: 8.5rem; }

/* The checkbox and its name, on one line, in place of the partial's link. */
.lgcheck { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.lgcheck input { margin: 0; }
.lgcheck__name { }

/* Vanished-node anchors: flagged where they sit, with the one way out. */
.lgorphans { margin-bottom: 1rem; }

@media (max-width: 860px) {
  .lgedit__panes { grid-template-columns: 1fr; }
}