/* Finance FY 2026–27 stage 4 — Accounts › Budget (09) and its salary plan
   (views/accounts-budget.js). The grid is .fn4-pl (v4/finance.css); this adds
   its typed cells, the override tint, and the Sales history table. Tokens only. */

/* The typed cell: a number a month. .over = typed over the salary plan. */
.fn4-pl > .c .fn4-cell { width: 100%; max-width: 96px; min-height: 32px; padding: 0 8px; border: 1px solid var(--hair); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; text-align: right; }
.fn4-pl > .c .fn4-cell:focus { border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.fn4-pl > .c .fn4-cell.over { background: var(--blue-tint); border-color: var(--link); }
.fn4-pl > .c .fn4-cell:disabled { background: var(--surface-sunk); color: var(--ink-2); }
.fn4-pl > .c select.fn4-cell { text-align: left; padding: 0 6px; }
.fn4-pl > .c.ok { color: var(--status-ok-ui); }
.fn4-pl > .c.dim { color: var(--ink-3); }
.fn4-pl > .c .fn4-from { margin-left: 6px; font-size: var(--text-meta-r); color: var(--ink-3); }
.fn4-pl > .c .fn4-link.fn4-back { margin-left: 8px; font-size: var(--text-meta-r); }
.fn4-pl > .c .fn4-varies { margin-left: 6px; font-size: var(--text-label); color: var(--ink-3); }
.fn4-pl.fn4-bud { grid-template-columns: minmax(200px, 2.2fr) repeat(var(--pl-cols), minmax(92px, 112px)); }
.fn4-pl.fn4-mo { grid-template-columns: minmax(150px, 1.4fr) repeat(var(--pl-cols), minmax(64px, 92px)); }
.fn4-pl.fn4-sp { grid-template-columns: minmax(180px, 1.8fr) repeat(var(--pl-cols), minmax(84px, 108px)); }

/* Sales history: £k by month, newest FY first. */
.fn4-sech { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 32px 0 10px; }
.fn4-sech h2 { margin: 0; font-size: var(--text-section); font-weight: var(--weight-medium); color: var(--ink); }
.fn4-sech .unit { font-size: var(--text-meta-r); color: var(--ink-3); }
.fn4-hist { display: grid; grid-template-columns: minmax(120px, 1.4fr) repeat(12, minmax(48px, 64px)); min-width: 0; }
.fn4-hist > .h { padding: 0 0 10px; border-bottom: 1px solid var(--rule-head); font-size: var(--text-table-head); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--ink-3); text-align: right; }
.fn4-hist > .h:first-child { text-align: left; }
.fn4-hist > .c { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; border-bottom: 1px solid var(--hair);
  font-size: var(--text-body); font-variant-numeric: tabular-nums; color: var(--ink); }
.fn4-hist > .c.l { justify-content: flex-start; font-weight: var(--weight-medium); }
.fn4-hist-empty { padding: 16px 0; font-size: var(--text-meta-r); color: var(--ink-3); }

/* The salary plan's locked state (no step-up yet). */
.fn4-locked { margin-top: 24px; padding: 24px; border: 1px solid var(--hair); border-radius: var(--radius-10); background: var(--surface); max-width: 72ch; }
.fn4-locked h2 { margin: 0 0 6px; font-size: var(--text-section); font-weight: var(--weight-medium); color: var(--ink); }
.fn4-locked p { margin: 0 0 14px; font-size: var(--text-body); color: var(--ink-2); line-height: 1.5; }
.fn4-msg { margin-top: 10px; font-size: var(--text-label); color: var(--ink-3); }
.fn4-msg.bad { color: var(--late); }
.fn4-msg.ok { color: var(--status-ok-ui); }
.fn4-pl.fn4-bud > .c.l, .fn4-pl.fn4-sp > .c.l { flex-wrap: wrap; column-gap: 0; }

/* v4.36.1 — the Accounts period menu (fin-parts.js periodMenuHTML; screen 14
   "Accounts · period"): ONE head button per Accounts tab, its menu in sections —
   FY · period · exports · Lock the month…. Same geometry as the row menu. */
.fn4-pmenu-wrap { position: relative; display: inline-flex; }
.fn4-pmenu-btn { display: inline-flex; align-items: center; gap: 6px; }
.fn4-pmenu-chev { display: inline-flex; color: var(--ink-3); }
.fn4-pmenu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 400; min-width: 240px; max-width: 340px; padding: 6px 0;
  background: var(--surface); color: var(--ink); border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 12px 32px rgba(12, 17, 57, 0.14); }
.fn4-pmenu[hidden] { display: none; }
.fn4-pmenu-item { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 14px;
  font-size: 13.5px; line-height: 1.35; color: var(--ink); cursor: pointer; }
.fn4-pmenu-item .k { flex: none; font-size: var(--text-label); color: var(--ink-3); }
.fn4-pmenu-item.on .k { color: var(--anchor); font-weight: var(--weight-medium); }
.fn4-pmenu-item:not([data-gated]):hover,
.fn4-pmenu-item:not([data-gated]):focus-visible { background: var(--nav-hover); color: var(--anchor); }
.fn4-pmenu-item:not([data-gated]):focus-visible { box-shadow: inset 0 0 0 2px var(--halo); }
.fn4-pmenu-item[data-gated] { color: var(--ink-3); cursor: default; }
.fn4-pmenu-item.armed { color: var(--late); font-weight: var(--weight-medium); }
.fn4-pmenu-hair { height: 1px; margin: 6px 0; background: var(--hair); }
@media (max-width: 760px) {
  .fn4-pmenu { right: auto; left: 0; }
  .fn4-pmenu-item { min-height: 44px; }
}

/* The overheads tail, opened: the row that folds it back (P&L, Budget). */
.fn4-pl > .fold { grid-column: 1 / -1; display: flex; align-items: center; min-height: 36px; padding-left: 16px; border-bottom: 1px solid var(--hair); }
/* "Both, side by side": last FY's column reads quieter (.c.dim, above) beside this FY's. */
.fn4-pl.fn4-both > .h { line-height: 1.3; }
/* An information band (blue tint, never orange — nothing here is late): the budget's salary plan is out of date. */
.fn4-band { margin-top: 20px; padding: 12px 16px; border: 1px solid var(--hair); border-radius: var(--radius-10); background: var(--nav-hover);
  font-size: var(--text-body); color: var(--ink); }