/* shared/portal-invoicing.css
 *
 * Carmen's Earnings. Design system tokens only, nothing below --fs-min.
 *
 * The invoice line is the one piece of layout that is load bearing: three
 * surfaces show it (her draft, the family's invoice, the ISF pack) and an
 * auditor reading "9 hours" against two rates needs the working on the page.
 * The sub-rows are aligned so the figures form a column that can be added up by
 * eye, because a sum that does not visibly foot invites an argument.
 */

/* ── THE LAYOUT IS THE FIX, NOT THE WIDTH. 1 Sep 2026, second attempt. ─────
   The founder first said "the text is cut, it's not using the full box", and I
   answered by NARROWING THE COLUMN to 44rem so the box matched its words. He
   rejected that on sight: "the boxes are not using the full width of the page,
   everything is just in the center."

   He was right, and his own layout ruling was the answer all along: a big box at
   the top, and boxes beside each other under it. This screen was a single column
   of full width cards and it was the ONLY portal screen that was, which is
   exactly why it alone showed the problem. Work and Care lay their cards two
   across, so a card is about 600px and its words nearly fill it.

   So the column is back to --portal-measure, the lists sit two across, and the
   text fills the card because the card is now the width of a card and not the
   width of the page. */
.iv { padding: var(--sp-5) var(--sp-4) var(--sp-7); max-width: var(--portal-measure); margin: 0 auto; }
.iv .ds-card p, .iv .ds-card li, .iv .ds-card label { max-width: none; }

/* HER MONEY, THEN HER TWO LISTS BESIDE EACH OTHER. auto-fit rather than 1fr 1fr,
   so they stack on a phone instead of squeezing two columns into 320px. */
.iv-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
  margin-bottom: var(--sp-4);
}
/* A CARD IN A GRID MUST NOT CARRY THE STACKING MARGIN. `.ds-card + .ds-card` in
   hibant-ds.css is (0,2,0) and pushes the second card down; in a grid cell that
   margin is a hole at the top of the right hand column. Same trap the carer's
   Today pair fell into. */
.iv .iv-pair > .ds-card + .ds-card,
.iv .iv-pair > * + * { margin-top: 0; }
.iv-list { display: flex; flex-direction: column; }
.iv-rows { margin-top: var(--sp-3); }
.iv-all { margin-top: var(--sp-3); align-self: flex-start; }
.iv-head { margin-bottom: var(--sp-5); }
.iv-head h1 { font-size: var(--fs-h2); }
.iv-lede { color: var(--t-min); margin-top: var(--sp-2); }
/* Qualified so it actually applies. As a bare class this was (0,1,0) and lost
   to `.hds h1-h4` at (0,1,1), so the size written here never took effect.
   Found 24 Aug 2026 by the first guard to compare a module's headings with
   the system's. */
.iv .iv-h { font-size: var(--fs-lead); margin: var(--sp-6) 0 var(--sp-3); }
.iv-note { margin-top: var(--sp-3); }

/* ── WHAT SHE HAS INVOICED, OVER A PERIOD SHE PICKS. 1 Sep 2026. ───────────
   Two fixed tiles became one figure and a chooser. Two tiles answer two
   questions and no others, and a self employed woman doing a quarter's books or
   checking one month is asking a third. */
.iv-earned { margin-bottom: var(--sp-4); }
.iv-earned__top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.iv-earned__k { font-size: var(--fs-min); font-weight: 700; color: var(--t2); flex: none; }
/* Sized to its longest option rather than stretched across the card: a select
   the width of a box is a control that looks like it wants a sentence. */
.iv .iv-earned__pick { flex: 0 1 16rem; min-height: var(--tap-min); }
.iv-earned__v {
  font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-head);
  margin: var(--sp-3) 0 var(--sp-1); font-variant-numeric: tabular-nums;
}
/* Two dates on one row where there is room, stacked on a phone. */
.iv-earned__dates {
  display: grid; grid-template-columns: auto 1fr auto 1fr;
  gap: var(--sp-2) var(--sp-3); align-items: center; margin-top: var(--sp-3);
}
.iv .iv-earned__dates input { min-height: var(--tap-min); }
@media (max-width: 30rem) {
  .iv-earned__dates { grid-template-columns: auto 1fr; }
}
/* ── Drafts ──────────────────────────────────────────────────────────────── */

.iv-draft + .iv-draft { margin-top: var(--sp-4); }
.iv-draft__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.iv-draft__who { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-head); }
.iv-draft__amt { font-weight: 700; }
.iv-draft__when { font-size: var(--fs-min); color: var(--t3); margin-top: var(--sp-1); }
.iv-draft__hold { font-size: var(--fs-min); color: var(--t2); margin-top: var(--sp-3); }
.iv-draft .ds-actions { margin-top: var(--sp-4); }

/* ── The line ────────────────────────────────────────────────────────────── */

.iv-line { padding: var(--sp-3) 0; border-top: 1px solid var(--bd); }
.iv-line__top { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: baseline; }
.iv-line__when { font-size: var(--fs-min); font-weight: 700; }
.iv-line__amt { font-size: var(--fs-min); font-weight: 700; font-variant-numeric: tabular-nums; }
.iv-line__what { font-size: var(--fs-min); color: var(--t3); margin-top: 2px; }
.iv-line__subs { margin-top: var(--sp-2); padding-left: var(--sp-4); border-left: 2px solid var(--bd-strong); }
.iv-sub { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-min); color: var(--t2); padding: 2px 0; }
/* Tabular figures so the column adds up by eye. */
.iv-sub__amt { font-variant-numeric: tabular-nums; }
.iv-line__dev { margin-top: var(--sp-2); }

/* ── Sent ────────────────────────────────────────────────────────────────── */

.iv-sents { padding: 0; }
/* QUALIFIED 27 Aug 2026, because .iv-sent became a BUTTON on the family's list
   and a bare class is (0,1,0), losing to `.hds button:not(.ds-btn)` at (0,2,1).
   The row is the whole way into her invoice, so the size written here has to
   actually apply. Caught by the guard added on 25 Aug after twelve rules of
   this exact shape were found live. */
.hds .iv-sent:not(.ds-btn) {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--bd);
  min-height: var(--tap-primary);
}
.iv-sent:last-child { border-bottom: none; }
.iv-sent__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.iv-sent__who { font-weight: 700; }
.iv-sent__meta { font-size: var(--fs-min); color: var(--t3); }
.iv-sent__amt { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }

/* ── DELETED 27 Aug 2026: the block that styled a screen nobody renders ─────
   It dressed .iv-setup, .iv-row and .iv-row__sub for a Your setup list that no
   module in shared/ has ever drawn, and its .iv-row rule set flex-direction:
   column. The invoice line rule below is a bare .iv-row too, so the two had
   EQUAL specificity and the cascade merged them property by property: display:
   flex came from below, flex-direction: column survived from above, and every
   line on every invoice stacked the date over the amount, including on the
   printed page a council reads. Dead CSS with a live side effect. */

/* ── Anna's view, and printing it. 27 Aug 2026. ─────────────────────────────
   Founder ruling 26 Aug: the invoice appears in both portals, nothing is
   emailed, and "if anyone wants to get the invoice on their phone or device,
   they can just download the invoice". A print styled page IS that: her phone's
   own print sheet offers Save as PDF, and the plan's agreed compression was a
   print styled page rather than generated files. */

.iv-pay { margin-top: var(--sp-5); }
.iv-bank { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-4); }
.iv-bank dt { font-size: var(--fs-min); font-weight: 700; color: var(--t2); }
.iv-bank dd { font-size: var(--fs-body); }

/* The label a select needs and the eye does not. */
.iv-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.iv-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) 0; }
.iv-row + .iv-row { border-top: 1px solid var(--bd-strong); }
.iv-row__when { font-size: var(--fs-body); flex: 1 1 12rem; min-width: 0; }
/* invoiceLine() draws its own rule and its own padding, and inside a row that
   already has one that reads as a double line. The row owns the separator. */
.iv-row__when .iv-line { border-top: none; padding-top: 0; }
.iv-row__amt { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; }
.iv-row__cur { font-size: var(--fs-min); color: var(--t2); }
.iv .iv-row__in { min-height: 48px; max-width: 7em; }
.hds .iv-row__x:not(.ds-btn) { min-height: 48px; }
.iv-row__mine { flex-basis: 100%; }

.iv-total-row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-4); }
.iv-total-row__k { font-size: var(--fs-body); font-weight: 700; }
.iv-total-row__v { font-family: var(--font-display); font-size: var(--fs-h3); }

.iv-problems { border: 2px solid var(--bd-strong); margin-bottom: var(--sp-4); }
.iv-problem { font-size: var(--fs-min); margin-top: var(--sp-2); }
.iv-err { color: var(--danger, var(--t1)); font-weight: 700; margin-top: var(--sp-4); }

/* WHAT SHE ACTUALLY GETS ON PAPER. Everything that is a control comes off, and
   what is left is the document: who, when, the days, the total and how to pay.
   A printed invoice carrying a "Back" button reads as a screenshot rather than
   a document, and this one may be handed to a council. */
@media print {
  /* HIDE EVERYTHING, THEN SHOW THE INVOICE. The old rule named three chrome
     selectors and the portal's real navigation matched none of them, so the
     site menu printed above the invoice a council reads. Naming chrome one
     selector at a time means the next thing added to the page prints too.
     This way round, anything that is not the invoice cannot print by default. */
  body * { visibility: hidden !important; }
  .iv, .iv * { visibility: visible !important; }
  .iv { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; }
  /* display:none still beats visibility, so a control inside the invoice goes. */
  .iv-noprint, .hds nav, .hds header nav, #mobile-cta-bar { display: none !important; }
  .iv, .iv * { color: #000 !important; background: #fff !important; }
  .iv-rows, .iv-total-row, .iv-pay { border: 1px solid #000 !important; box-shadow: none !important; }
  .iv-row + .iv-row { border-top: 1px solid #666 !important; }
  /* A row is a row on paper too. Stated rather than inherited, so a stacked
     line can never come back silently on the one surface nobody previews. */
  .iv-row { display: flex !important; flex-direction: row !important; align-items: center !important; }
}