/* ── THE SECTION LANDINGS ────────────────────────────────────────────────────
   ONE skin for the four pages a section opens on: Finance, Sales, Masters and
   Admin. Each of them is a board of CARDS carrying the section's latest
   figures rather than a page of links, and each card is the size of a problem
   or the state of a position — so they are one shape with four subjects, in
   exactly the way the six reports are one shape with six.

   It is written as one file for the reason reports.css is: the four landings
   were DESIGNED in parallel, as four separate previews, and the round before
   this one — four reports built alongside each other by four hands — produced
   three copies of the same table pane under three prefixes and a class claimed
   by two pages for different things. The four previews already shared their
   visual language; this file is that language extracted once, and
   test/controllers/landings_shell_test.rb is what stops the fifth landing
   copying it as prose.

   ── What is NOT here ──────────────────────────────────────────────────────

   The headline strip (`.masthead`) and the empty line (`.none`) are the party
   pages' (tally_parties.css) and are rendered through `reports/headline`; the
   bar rows are the report set's (`.rep-bars`, reports.css) and are rendered
   through `reports/bars`. A landing carries `.pwrap .rep .lnd` for exactly that
   reason — the first two are borrowed component sets, the third is the handful
   of shapes that are genuinely the landing's own: the card, the band meter, the
   fact rows and the quiet strip.

   ── The section's own colour ──────────────────────────────────────────────

   Each preview picked a hue and each picked the section's: Finance gold, Sales
   green, Masters slate, Admin rust. Those are already in the app — the
   layout sets `--section-color` on `.main-wrapper` from ApplicationHelper's
   SECTION_LABELS — so nothing here spells a colour out. One rule, four pages,
   four hues, and a section that ever changes its colour changes it in one
   place. Everything else is the paper palette at the end of layout.css. */

.lnd { --lnd-hue: var(--section-color, var(--ink)); }

/* ── the grid ──
   Twelve columns, and a card says how many it wants. The four previews drew
   three different grids between them (twelve columns, a two-up, and a pair of
   auto-fits); twelve columns answers all three, and a landing that wants
   three-up asks for four columns rather than for a grid of its own. */
/* Cards in a row are the SAME HEIGHT, which is what lets their feet line up:
   the card is a column flexbox and `.lnd-foot` is pushed to the bottom of it,
   so a row of coverage cards ends on one line however much prose each of them
   carries. Left to size themselves they end raggedly, and the eye reads the
   ragged edge as the cards being different kinds of thing. */
.lnd .lnd-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem;
  align-items: stretch;
}
.lnd .lnd-w3  { grid-column: span 3; }
.lnd .lnd-w4  { grid-column: span 4; }
.lnd .lnd-w6  { grid-column: span 6; }
.lnd .lnd-w8  { grid-column: span 8; }
.lnd .lnd-w12 { grid-column: span 12; }

/* The strip sits in the grid like everything else, so a landing has one
   container and not two. Its own margins come off — the grid's gap is the
   spacing on this page. */
.lnd .lnd-grid > .masthead { grid-column: span 12; margin: 0; }

/* Two steps down, the same shape the launchpad steps through: half width, then
   whole. The breakpoints are where a figure and its note stop fitting side by
   side, which is a width and not a device. */
@media (max-width: 64rem) {
  .lnd .lnd-w3, .lnd .lnd-w4, .lnd .lnd-w8 { grid-column: span 6; }
}
@media (max-width: 44rem) {
  .lnd .lnd-w3, .lnd .lnd-w4, .lnd .lnd-w6, .lnd .lnd-w8 { grid-column: span 12; }
}

/* ── the card ──
   One panel, and the whole of it is the link where there is somewhere to go:
   the previews all made the card itself pressable rather than hanging a "view
   all" off the corner, because the figure is what the reader is aiming at. */
.lnd .lnd-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--panel); border: 1px solid var(--edge-2); border-radius: 12px;
  overflow: hidden;
}
a.lnd-card {
  color: inherit; text-decoration: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
a.lnd-card:hover {
  color: inherit; border-color: var(--lnd-hue); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(32, 38, 29, 0.10);
}

/* A WORKLIST card wears the section's colour down its edge — the shape the
   purchases table gives a bucket row. It is not a warning: the number on it is
   how much money is waiting on somebody in this section, and it is meant to be
   the card the eye lands on. */
.lnd .lnd-card--work {
  background: color-mix(in srgb, var(--lnd-hue) 8%, var(--panel));
  box-shadow: inset 3px 0 0 var(--lnd-hue);
}
a.lnd-card--work:hover {
  box-shadow: inset 3px 0 0 var(--lnd-hue), 0 4px 14px rgba(32, 38, 29, 0.10);
}
.lnd .lnd-card--work .lnd-k { color: var(--lnd-hue); }

/* ── the head bar ──
   An eyebrow, what the card IS, and the one qualifier that is data — the year
   it counts, the day it was pulled, the scope it holds to. Only the cards that
   carry a NAME get one; a card whose whole content is one figure says what it
   is in the eyebrow above the figure. */
.lnd .lnd-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);
}
.lnd .lnd-head .lnd-name { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.lnd .lnd-head .lnd-meta {
  margin-left: auto; font-family: var(--party-mono); font-size: 0.66rem; color: var(--ink-4);
}
.lnd .lnd-body { padding: 0.9rem 1.1rem 1rem; flex: 1; min-width: 0; }

/* ── the figure ──
   The eyebrow is the question, the figure is the answer and the note is what
   the answer is made of. `plain` is the party set's rule and the same one
   holds here: a count and a rupee figure are not the same kind of fact and are
   not set at the same size. */
.lnd .lnd-k {
  display: block; font-family: var(--party-mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4);
  margin-bottom: 0.4rem;
}
.lnd .lnd-v {
  display: block; font-weight: 700; font-size: 1.7rem; line-height: 1.1; color: var(--ink);
  font-family: var(--party-mono); font-variant-numeric: tabular-nums;
}
.lnd .lnd-w4 .lnd-v, .lnd .lnd-w3 .lnd-v { font-size: 1.45rem; }
.lnd .lnd-v.plain { font-weight: 500; }
.lnd .lnd-v .suf { font-size: 0.55em; font-weight: 600; opacity: 0.85; margin-left: 0.18rem; }
.lnd .lnd-v .dim { font-size: 0.55em; font-weight: 600; color: var(--ink-3); margin-left: 0.25rem; }
.lnd .lnd-n {
  display: block; font-family: var(--party-mono); font-size: 0.68rem;
  color: var(--ink-3); margin-top: 0.4rem;
}
.lnd .lnd-p { font-size: 0.8rem; color: var(--ink-3); line-height: 1.4; margin-top: 0.45rem; }

/* The card's last line, pushed to the bottom so a row of cards of different
   heights still lines its feet up. */
.lnd .lnd-foot {
  margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--edge);
  font-family: var(--party-mono); font-size: 0.68rem; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem;
}
.lnd .lnd-foot b { color: var(--ink); font-weight: 600; }

/* ── the band meter ──
   A proportion drawn as bands laid end to end. Two questions wear it: the age
   ladder of a position (five bands, the report's own five colours, summing to
   the whole) and how much of something a map answers for (one band and the
   remainder). The same shape says both, because both are "this much of that".

   Taller than the party pages' `.meter`, which is a 3px hairline under a
   figure. This one IS the figure's shape and is read on its own. */
.lnd .lnd-meter { display: flex; gap: 2px; height: 9px; margin: 0.85rem 0 0.5rem; }
.lnd .lnd-meter span { display: block; height: 100%; border-radius: 2px; min-width: 3px; }
.lnd .lnd-meter .b0 { background: var(--green); }
.lnd .lnd-meter .b1 { background: var(--gold); }
.lnd .lnd-meter .b2 { background: var(--gold-ink); }
.lnd .lnd-meter .b3 { background: var(--rust); }
.lnd .lnd-meter .b4 { background: var(--rust-ink); }
.lnd .lnd-meter .ok { background: var(--green); }
.lnd .lnd-meter .bad { background: var(--rust); }
.lnd .lnd-meter .rest { background: var(--well); min-width: 0; }

.lnd .lnd-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem;
  font-family: var(--party-mono); font-size: 0.68rem; color: var(--ink-3);
}
.lnd .lnd-legend b { color: var(--ink); font-weight: 600; }
.lnd .lnd-legend span.ok { color: var(--green-ink); }
.lnd .lnd-legend span.bad { color: var(--rust-ink); }
/* The marker that names a band is the chip below, sized down: it sits on a line
   of prose rather than in a row of its own. */
.lnd .lnd-legend .lnd-chips { display: inline-flex; }
.lnd .lnd-legend .lnd-chip { font-size: 0.62rem; padding: 0.1rem 0.45rem; }

/* ── fact rows ──
   A label, its answer and an optional quiet stamp on the right. What the
   accounts card, the staff card and the register's diary are all made of. */
.lnd .lnd-rows { display: flex; flex-direction: column; }
.lnd .lnd-row {
  display: flex; align-items: baseline; gap: 0.6rem; padding: 0.42rem 0;
  border-bottom: 1px solid var(--edge); font-size: 0.86rem;
}
.lnd .lnd-row:first-child { padding-top: 0; }
.lnd .lnd-row:last-child { border-bottom: none; padding-bottom: 0; }
.lnd .lnd-row .lnd-rk { color: var(--ink-3); flex-shrink: 0; }
.lnd .lnd-row .lnd-rv { color: var(--ink); }
.lnd .lnd-row .lnd-rt {
  margin-left: auto; font-family: var(--party-mono); font-size: 0.7rem;
  color: var(--ink-4); white-space: nowrap;
}
/* The second line of a row: what a night's reconciliation actually did, under
   the badge that says whether it landed. It wraps, so the row grows down
   rather than pushing the stamp on its right off the end. */
.lnd .lnd-row .lnd-rs { display: block; font-size: 0.84rem; color: var(--ink-2); margin-top: 0.25rem; }
.lnd .lnd-row .lnd-rv { min-width: 0; }
/* The diary's rows are a date and a sentence rather than a label and a figure,
   so the date column is fixed and the sentence wraps under nothing. */
.lnd .lnd-rows--dated .lnd-row { display: grid; grid-template-columns: 6.6rem 1fr; gap: 0.9rem; }
.lnd .lnd-rows--dated .lnd-rk { font-family: var(--party-mono); font-size: 0.72rem; color: var(--ink-4); }
.lnd .lnd-rows--dated .lnd-rv b { font-weight: 600; }
.lnd .lnd-rows--dated .lnd-row--quiet .lnd-rv { color: var(--ink-3); font-style: italic; }

/* ── the quiet strip ──
   One sentence the cards above it are all read under — what is left out of
   them, or the one thing two of them are saying together. It is a statement
   about the figures and it sits with them, in the grid, at full width. */
.lnd .lnd-note {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline;
  font-size: 0.83rem; line-height: 1.55; color: var(--ink-2);
  background: var(--rail); border: 1px solid var(--edge);
  border-left: 3px solid var(--lnd-hue); border-radius: 10px; padding: 0.6rem 1rem;
}
.lnd .lnd-note b { color: var(--ink); font-weight: 600; }
.lnd .lnd-note .lnd-tag {
  font-family: var(--party-mono); font-size: 0.6rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--lnd-hue); white-space: nowrap;
}

/* ── badges ──
   The three states a standing job or a night's reconciliation can be in, in
   the palette's own green, gold and rust — the same three an accepted sample
   and a paid invoice wear. */
.lnd .lnd-badge {
  font-family: var(--party-mono); font-size: 0.66rem; padding: 0.14rem 0.5rem;
  border-radius: 6px; color: var(--panel); white-space: nowrap;
}
.lnd .lnd-badge--ok   { background: var(--green); }
.lnd .lnd-badge--warn { background: var(--gold); }
.lnd .lnd-badge--bad  { background: var(--rust); }

/* A chip is a fact wearing a tone rather than a state wearing a colour: a book
   in step, an order state with nothing in it, a bag name nobody has claimed. */
.lnd .lnd-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lnd .lnd-chip {
  font-family: var(--party-mono); font-size: 0.68rem; padding: 0.2rem 0.55rem;
  border-radius: 6px; background: var(--well); color: var(--ink-3); white-space: nowrap;
}
.lnd .lnd-chip b { color: var(--ink); font-weight: 600; margin-left: 0.3rem; }
.lnd .lnd-chip--ok   { background: rgba(47, 107, 63, 0.14); color: var(--green-ink); }
.lnd .lnd-chip--warn { background: rgba(146, 117, 36, 0.18); color: var(--gold-ink); }
.lnd .lnd-chip--bad  { background: rgba(168, 67, 29, 0.16); color: var(--rust-ink); }
/* …and the five rungs of the ageing ladder, so a chip that names a band wears
   the band's own colour. Fresh through old, as the meter draws them. */
.lnd .lnd-chip--b0 { background: rgba(47, 107, 63, 0.14); color: var(--green-ink); }
.lnd .lnd-chip--b1,
.lnd .lnd-chip--b2 { background: rgba(146, 117, 36, 0.18); color: var(--gold-ink); }
.lnd .lnd-chip--b3,
.lnd .lnd-chip--b4 { background: rgba(168, 67, 29, 0.16); color: var(--rust-ink); }

/* ── the two halves ──
   A card that answers one question twice — money in and money out, the credits
   named and the credits not, the portal's logins and the chat's. A rule
   between them rather than two cards, because the pair is the point. */
.lnd .lnd-halves { display: flex; flex-direction: column; }
.lnd .lnd-half + .lnd-half { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--edge); }
.lnd .lnd-half .lnd-v { font-size: 1.2rem; }
.lnd .lnd-half .lnd-k { margin-bottom: 0.15rem; }
.lnd .lnd-line { font-size: 0.84rem; color: var(--ink-2); margin-top: 0.35rem; }

/* ── the standing strip ──
   Four cells across the foot of a board, each one a job and its last outcome.
   Its own grid because these are not cards — nothing here is pressable and
   nothing carries a figure worth a card's weight. */
.lnd .lnd-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.lnd .lnd-cell { padding: 0.85rem 1.1rem; border-right: 1px solid var(--edge); min-width: 0; }
.lnd .lnd-cell:last-child { border-right: none; }
.lnd .lnd-cell .lnd-ck { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.lnd .lnd-cell .lnd-cn {
  font-family: var(--party-mono); font-size: 0.66rem; color: var(--ink-4); margin: 0.15rem 0 0.4rem;
}
.lnd .lnd-cell .lnd-cv { font-size: 0.8rem; color: var(--ink-2); }
.lnd .lnd-cell .ok { color: var(--green-ink); }
.lnd .lnd-cell .warn { color: var(--gold-ink); }
.lnd .lnd-cell .bad { color: var(--rust-ink); }
@media (max-width: 64rem) {
  .lnd .lnd-strip { grid-template-columns: 1fr 1fr; }
  .lnd .lnd-cell:nth-child(2n) { border-right: none; }
  .lnd .lnd-cell:nth-child(-n+2) { border-bottom: 1px solid var(--edge); }
}
@media (max-width: 44rem) {
  .lnd .lnd-strip { grid-template-columns: 1fr; }
  .lnd .lnd-cell { border-right: none; border-bottom: 1px solid var(--edge); }
  .lnd .lnd-cell:last-child { border-bottom: none; }
}

/* ── a register inside a card ──
   The newest few rows of something, at the grain the office reads them: a date,
   a number, a name, an amount. It is the party set's `.plist` narrowed to fit a
   card — one head, no sort, no page. */
.lnd .lnd-list { border-collapse: collapse; width: 100%; font-size: 0.82rem; table-layout: fixed; }
.lnd .lnd-list thead th {
  background: var(--ink); color: var(--deck); font-family: var(--party-mono);
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-align: left; padding: 0.4rem 0.9rem; font-weight: 600;
}
.lnd .lnd-list th.num, .lnd .lnd-list td.num { text-align: right; }
.lnd .lnd-list td {
  padding: 0.42rem 0.9rem; border-bottom: 1px solid var(--edge);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lnd .lnd-list tbody tr:last-child td { border-bottom: none; }
.lnd .lnd-list tbody tr:hover td { background: var(--rail); }
.lnd .lnd-list td.num { font-family: var(--party-mono); font-variant-numeric: tabular-nums; }
.lnd .lnd-list td.dim, .lnd .dim { color: var(--ink-4); }

/* ── the page's own stamp ──
   The one line under the section's name: what the figures are as at, and how
   fresh the books behind them are. It rides in the page header's actions slot,
   which is where every other page in the app puts what it wants on that line. */
.lnd-stamp {
  font-family: var(--bs-font-monospace); font-size: 0.72rem; color: var(--ink-3);
  text-align: right; line-height: 1.5;
}
.lnd-stamp b { color: var(--ink); font-weight: 600; }

/* ── the borrowed sets, sized for a card ──
   The bar rows come from reports.css and are drawn at report scale, where they
   have a whole column to themselves. Inside a card the name column has to give
   way to the figure, and the heading above them is a card's sub-heading rather
   than a page's. Sizes only: nothing here re-draws a bar. */
.lnd .lnd-body .rep-chart { min-width: 0; }
.lnd .lnd-body h2.sect { font-size: 0.95rem; margin: 0 0 0.5rem; }
.lnd .lnd-body .rep-bar { grid-template-columns: minmax(0, 9rem) 1fr 6.4rem; gap: 0.6rem; }
.lnd .lnd-body .rep-bar--counted { grid-template-columns: minmax(0, 9rem) 1.8rem 1fr 6.4rem; }
.lnd .lnd-body .rep-bar-name.more { color: var(--ink-4); font-style: italic; font-weight: 500; }
.lnd .lnd-body .rep-bar-track span.more { background: var(--edge-2); }
.lnd .lnd-body .rep-bar-track span.hue { background: var(--lnd-hue); }
@media (max-width: 44rem) {
  .lnd .lnd-body .rep-bar { grid-template-columns: minmax(0, 7rem) 1fr 5.4rem; }
}