/* Finance FY 2026–27, stage 3 — the registers re-laid (design_handoff_finance_fy27:
   02 Invoices, 03 New invoice, 04 Procurement, 05 Raise a PO, 06 Expenses).
   The FY 2026–27 pilot only (fin-pilot.js); every class here is new, so today's
   screens are untouched. Tokens only (tokens/*.css): no bare hex, weights 400/500.
   The shared parts (.fn4-*, .fn4-kind) live in v4/finance.css. */

/* ── Expenses (06): the register beside Add an expense (420px) ─────────────── */
.fx27-two { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; align-items: start; margin-top: 4px; }
.fx27-main { min-width: 0; }
.fx27-aside { min-width: 0; padding-top: 24px; }
@media (max-width: 1100px) { .fx27-two { grid-template-columns: minmax(0, 1fr); } .fx27-aside { display: none; } }
/* DATE · WHAT · PROJECT · CATEGORY · PAID BY · AMOUNT · STATUS · NEXT — on a wide register.
   Beside Add an expense the register is narrow: Project and Category fold into the
   line under What (a container query, so it follows the column, not the window). */
.fx27-main { container-type: inline-size; }
.fx27-ex { grid-template-columns: 56px minmax(0, 2.2fr) 56px minmax(0, 1.2fr) 90px 84px 84px minmax(150px, 1.3fr); }
.fx27-ex .fn4-next { flex-wrap: nowrap; text-align: right; }
.fx27-ex .fn4-next .fn4-mute { white-space: normal; line-height: 1.35; }
.fx27-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx27-what .fn4-name { font-weight: var(--weight-medium); }
.fx27-what .ex-receipt { font-weight: var(--weight-regular); font-size: var(--text-meta-r); color: var(--link); text-decoration: none; }
.fx27-whatsub { display: none; font-size: var(--text-label); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 980px) {
  .fx27-ex { grid-template-columns: 52px minmax(0, 2fr) 84px 76px 80px minmax(120px, 1.2fr); gap: 0 12px; }
  .fx27-ex .fx27-proj, .fx27-ex .fx27-cat { display: none; }
  .fx27-whatsub { display: block; }
}

/* Add an expense: the card beside the list, or inside the panel. */
.ex27-add { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; border: 1px solid var(--hair); border-radius: var(--radius-md);
  background: var(--surface); min-width: 0; }
.ex27-add.in-panel { border: 0; padding: 0; }
.ex27-add-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ex27-add-h h2 { margin: 0; font-size: var(--text-card-title); font-weight: var(--weight-medium); color: var(--ink); }
.ex27-add-note { font-size: var(--text-meta-r); color: var(--ink-2); }
.ex27-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; text-align: center; cursor: pointer;
  border: 1px dashed var(--hair-strong); border-radius: var(--radius-md); font-size: var(--text-meta-r); color: var(--ink-2); }
.ex27-drop:hover, .ex27-drop.over { border-color: var(--link); background: var(--blue-tint); }
.ex27-drop:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--halo); }
.ex27-drop-s { color: var(--ink-3); }
.ex27-link { border: 0; background: none; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
.ex27-file { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--hair); border-radius: var(--radius-md);
  font-size: var(--text-meta-r); color: var(--ink-2); min-width: 0; }
.ex27-file .ex27-fname { color: var(--ink); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ex27-file .ex27-link { margin-left: auto; }
.ex27-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ex27-lab { font-size: var(--text-label); color: var(--ink-2); }
.ex27-opt { color: var(--ink-3); }
.ex27-help { font-size: var(--text-label); color: var(--ink-3); line-height: 1.45; }
.ex27-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ex27-in { width: 100%; min-height: 38px; text-align: left; padding: 0 12px; border: 1px solid var(--hair); border-radius: var(--radius-md); background: var(--surface);
  color: var(--ink); font-family: inherit; font-size: var(--text-body); box-sizing: border-box; }
.ex27-in:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.ex27-in:disabled { color: var(--ink-3); background: var(--surface-sunk); }
.ex27-add .pp-box { min-height: 38px; }
.ex27-msg { margin: 0; min-height: 18px; font-size: var(--text-meta-r); color: var(--ink-2); }
.ex27-msg.err { color: var(--late); }
.ex27-acts { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.ex27-add.reading .ex27-file .ex27-fstate { color: var(--link); }
.tf-card.tf-panel.ex27-panel { width: min(480px, calc(100 * var(--vw))); }
@media (max-width: 760px) { .ex27-row { grid-template-columns: minmax(0, 1fr); } .ex27-acts .btn { flex: 1 1 auto; min-height: 44px; } }

/* ── Invoices (02): Ledger · Overdue · Credit notes, and the Ready to invoice strip ── */
.iv27 .fn4-tabs { margin-top: 18px; }
.iv27-ready { margin-top: 22px; }
.iv27-ready .fn4-sec-h { border-bottom: 1px solid var(--hair); }
.iv27-ready .fn4-sec-h h2 { font-size: var(--text-section); }
.iv27-ready .iv-rrow { padding: 12px 0; }
.iv27-ready .iv-rrow:last-child { border-bottom: 1px solid var(--hair); }
.iv27-draft { color: var(--ink-3); font-size: var(--text-meta-r); }

/* ── New invoice (03): the form left, the preview right, the checks as one line ── */
.iv27d .iv-card { border: 0; border-radius: 0; padding: 0; background: none; }
.iv27d .iv-card-h { border-bottom: 1px solid var(--rule-head); }
.iv27d .iv-form { gap: 28px; }
.iv27d .iv27-side-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px;
  margin-bottom: 18px; border-bottom: 1px solid var(--hair); }
.iv27d .iv27-side-h h2 { margin: 0; font-size: var(--text-section); font-weight: var(--weight-medium); }
.iv27d .iv-preview .doc-page { box-shadow: none; border: 1px solid var(--hair); border-radius: var(--radius-md); }
.iv27-checkline { padding: 14px 16px; border: 1px solid var(--hair); border-radius: var(--radius-md); background: var(--surface-sunk-2);
  font-size: var(--text-meta-r); color: var(--ink-2); line-height: 1.5; }
.iv27-checkline .bad { color: var(--late); font-weight: var(--weight-medium); }

/* ── Procurement (04): figures above the tabs; the register under a status segment ── */
.po27 .fn4-tabs { margin-top: 18px; }
.po27 .fn4-figs { border-bottom: 1px solid var(--hair); }

/* ── Raise a PO (05): the panel at 560px with the kind cards ── */
.tf-card.tf-panel.por-card.por-fy27 { width: min(560px, calc(100 * var(--vw))); }
@media (max-width: 760px) { .fx27-ex .fx27-whatsub { display: none; } }