/* Batch 27 — the surfaces this batch built.
 *
 * ONE sheet rather than rules scattered across six, because everything here
 * was authored together and a later batch that reverts this one should be
 * able to see exactly what it is reverting. Loaded before the appearance
 * layer, so the appearance layer can still correct it without !important.
 *
 * Every colour below is a TOKEN with a light-theme literal fallback. Nothing
 * here defines a colour only inside a dark block — the four appearances
 * (Light / Blue / Black / Auto) all resolve because the tokens do.
 */

/* ── A3 · a table row that is a door ──────────────────────────────────────
   The Budget tab's receipt rows were static <tr>s. They are buttons now, and
   they have to LOOK like it before the pointer arrives — a clickable row that
   only reveals itself on hover is a row nobody clicks. */
.av3 .row-clickable { cursor: pointer; }
.av3 .row-clickable:hover {
  background: var(--arbah-surface-sunken, #F8FAFC);
}
.av3 .row-clickable:focus-visible {
  outline: 2px solid var(--focus-ring, #2563EB);
  outline-offset: -2px;
}
.av3 .row-clickable .dt-title { text-decoration-color: transparent; }
.av3 .row-clickable:hover .dt-title { text-decoration: underline; }

/* ── A3 · the receipt, opened ─────────────────────────────────────────── */
.rcd { display: flex; flex-direction: column; gap: 16px; }
.rcd-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.rcd-total {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 20px; font-weight: 700; color: var(--arbah-ink, #0F172A);
}
.rcd-photo {
  border-radius: var(--r-8, 10px); overflow: hidden;
  background: var(--arbah-surface-sunken, #F8FAFC);
  border: 1px solid var(--arbah-border, #E2E8F0);
  max-height: 320px; display: flex; align-items: center; justify-content: center;
}
.rcd-photo img { width: 100%; height: auto; max-height: 320px; object-fit: contain; display: block; }
.rcd-photo--none {
  flex-direction: column; gap: 10px; padding: 28px 16px;
  color: var(--arbah-ink-subtle, #64748B);
}

.rcd-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px;
}
.rcd-field { min-width: 0; }
.rcd-label {
  font-size: 11px; font-weight: 650; letter-spacing: .3px; text-transform: uppercase;
  color: var(--arbah-ink-subtle, #64748B); margin-bottom: 3px;
}
.rcd-value {
  font-size: 13.5px; color: var(--arbah-ink, #0F172A);
  overflow-wrap: anywhere;
}
/* Where a value came from, when it was READ rather than typed. Quiet, but
   present — a figure the app extracted must never be indistinguishable from
   one a person entered. */
.rcd-prov {
  margin-inline-start: 6px; font-size: 11px; font-weight: 600;
  color: var(--arbah-ink-subtle, #64748B);
}

.rcd-money {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--arbah-border, #E2E8F0);
  border: 1px solid var(--arbah-border, #E2E8F0);
  border-radius: var(--r-8, 10px); overflow: hidden;
}
.rcd-money-cell { background: var(--arbah-surface, #FFF); padding: 11px 13px; }
.rcd-money-cell--strong .rcd-value {
  font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; font-size: 15px;
}

.rcd-trail {
  border-top: 1px solid var(--arbah-border, #E2E8F0); padding-top: 13px;
}
.rcd-trail-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rcd-trail-list li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--arbah-ink-muted, #475569);
  padding-inline-start: 14px; position: relative;
}
.rcd-trail-list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--arbah-brand, #A06A2C);
}
.rcd-trail-what { font-weight: 650; color: var(--arbah-ink, #0F172A); }
.rcd-trail-when { color: var(--arbah-ink-subtle, #64748B); font-size: 11.5px; }

/* The Law-4 read, offered and reviewable. Visually a PROPOSAL — inset,
   dashed, clearly not yet part of the record — because on localhost the
   source is the Law-5 stub and a fixture must never be mistaken for what is
   printed on the photo. */
.rcd-read {
  border: 1px dashed var(--arbah-border-strong, #CBD5E1);
  border-radius: var(--r-8, 10px);
  background: var(--arbah-surface-sunken, #F8FAFC);
  padding: 11px 13px;
}
.rcd-read-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--arbah-ink-muted, #475569);
}
.rcd-read-why { flex: 1; min-width: 180px; }
.rcd-read-proposal { display: flex; flex-direction: column; gap: 8px; }
.rcd-read-src {
  font-size: 11.5px; font-weight: 600;
  color: var(--arbah-warning-ink, #B54708);
}
.rcd-read-row {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-size: 13px; color: var(--arbah-ink, #0F172A);
}
.rcd-read-row .rcd-label { margin: 0; min-width: 92px; }

.rcd-paidfrom { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.rcd-paidfrom .cfs-method { font-size: 11.5px; padding: 5px 10px; }
.dt-amt.is-negative { color: var(--arbah-danger-ink, #B42318); }

.rcd-actions { display: flex; gap: 10px; }

@media (max-width: 560px) {
  .rcd-grid { grid-template-columns: minmax(0, 1fr); }
  .rcd-money { grid-template-columns: minmax(0, 1fr); }
  .rcd-total { font-size: 18px; }
}

/* ── C · A KPI TILE THAT IS A DOOR ────────────────────────────────────────
   The tile becomes a <button>, so it must lose the button defaults and keep
   the tile's own look exactly — a connectedness pass that changes what the
   dashboard looks like is a redesign nobody asked for. The only VISIBLE
   difference is the affordance: a pointer, a lift on hover, and a focus ring,
   which is the minimum a thing you can click owes the person clicking it. */
.av3 button.kpi {
  font: inherit; text-align: start; width: 100%;
  appearance: none; -webkit-appearance: none;
}
.av3 .kpi--door { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.av3 .kpi--door:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--arbah-ink, #0F172A) 10%, transparent);
}
.av3 .kpi--door:focus-visible {
  outline: 2px solid var(--focus-ring, #2563EB); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .av3 .kpi--door, .av3 .kpi--door:hover { transition: none; transform: none; }
}

/* ── B · THE NEW PROJECT WIZARD, ONE QUESTION PER SCREEN ──────────────────
 *
 * "It looks like a scary form." The fix is not smaller labels — it is one
 * question at a time, in type large enough that the question is the page.
 * Everything below serves that: a single question, its hint, one control, and
 * two navigation controls. Nothing else is on screen.
 *
 * `.npw--ask` scopes all of it, so the edit-mode form (which is deliberately
 * still a form) keeps the Batch 26 primitives untouched.
 */
.av3.npw--ask {
  display: flex; flex-direction: column; gap: 18px;
  min-height: min(560px, 70vh);
  padding: 4px 2px;
}
.av3 .npw-brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 650; letter-spacing: .2px;
  color: var(--arbah-ink-muted, #475569);
}
.av3 .npw-brand img { width: 26px; height: 26px; object-fit: contain; }

.av3 .npw-dots { display: flex; gap: 7px; align-items: center; }
.av3 .npw-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--arbah-border-strong, #CBD5E1);
  transition: background .15s, transform .15s;
}
.av3 .npw-dot.is-done { background: color-mix(in srgb, var(--arbah-brand, #A06A2C) 55%, transparent); }
.av3 .npw-dot.is-on {
  background: var(--arbah-brand, #A06A2C); transform: scale(1.35);
}

.av3 .npw-screen {
  display: flex; flex-direction: column; gap: 12px;
  flex: 1; justify-content: center;
}
/* THE QUESTION. Big and warm — this is the whole point of the rebuild. */
.av3 .npw-q {
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 700; line-height: 1.25;
  color: var(--arbah-ink, #0F172A);
  letter-spacing: -.01em;
}
.av3 .npw--ask .npw-hint {
  font-size: 14.5px; line-height: 1.55;
  color: var(--arbah-ink-muted, #475569);
  margin: 0;
}
/* THE ANSWER. One control, sized to match the question. */
.av3 .npw-big {
  width: 100%; font: inherit; font-size: 20px; font-weight: 600;
  padding: 14px 16px; border-radius: var(--r-12, 14px);
  color: var(--arbah-ink, #0F172A);
  background: var(--arbah-surface, #FFF);
  border: 2px solid var(--arbah-border, #E2E8F0);
}
.av3 .npw-big:focus {
  outline: none; border-color: var(--arbah-brand, #A06A2C);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--arbah-brand, #A06A2C) 15%, transparent);
}
.av3 .npw-big--date { max-width: 320px; }

/* The drop, first and friendly. */
.av3 .npw--ask .npw-drop {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 34px 22px;
  border: 2px dashed var(--arbah-border-strong, #CBD5E1);
  border-radius: var(--r-16, 18px);
  background: var(--arbah-surface-sunken, #F8FAFC);
}
.av3 .npw--ask .npw-drop .npw-q { font-size: clamp(19px, 2.6vw, 25px); }
.av3 .npw-drop-ico { color: var(--arbah-brand, #A06A2C); }
.av3 .npw-drop-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.av3 .npw-file { display: none; }
.av3 .npw-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 650;
  color: #FFF; background: var(--arbah-brand, #A06A2C); border: none;
}
.av3 .npw-cta:disabled { opacity: .6; cursor: default; }
.av3 .npw-cta--ghost {
  color: var(--arbah-brand-ink, #7A4F1D);
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--arbah-brand, #A06A2C) 40%, transparent);
}
.av3 .npw-skip {
  align-self: center; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--arbah-ink-muted, #475569);
  text-decoration: underline; text-underline-offset: 3px;
  padding: 6px;
}
.av3 .npw-skip:hover { color: var(--arbah-ink, #0F172A); }

/* The five building cards — big tap targets, not a <select>. */
.av3 .npw-cards {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.av3 .npw-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 12px; cursor: pointer;
  border-radius: var(--r-12, 14px);
  background: var(--arbah-surface, #FFF);
  border: 2px solid var(--arbah-border, #E2E8F0);
  color: var(--arbah-ink-muted, #475569);
  font: inherit; font-size: 15px; font-weight: 650;
  transition: border-color .15s, background .15s, color .15s;
  min-height: 118px;
}
.av3 .npw-card:hover { border-color: color-mix(in srgb, var(--arbah-brand, #A06A2C) 45%, transparent); }
.av3 .npw-card.is-on {
  border-color: var(--arbah-brand, #A06A2C);
  background: var(--arbah-brand-soft, #F5EDE0);
  color: var(--arbah-brand-ink, #7A4F1D);
}
.av3 .npw-card-ico { color: currentColor; }
.av3 .npw-card:focus-visible { outline: 2px solid var(--focus-ring, #2563EB); outline-offset: 2px; }

/* The floors stepper, and the building that grows. */
.av3 .npw-stepper {
  display: flex; align-items: center; gap: 18px;
}
.av3 .npw-stepbtn {
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 26px; font-weight: 600; line-height: 1;
  color: var(--arbah-brand-ink, #7A4F1D);
  background: var(--arbah-brand-soft, #F5EDE0);
  border: 1.5px solid color-mix(in srgb, var(--arbah-brand, #A06A2C) 35%, transparent);
}
.av3 .npw-stepbtn:disabled { opacity: .4; cursor: default; }
.av3 .npw-stepval { display: flex; flex-direction: column; }
.av3 .npw-stepnum {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 34px; font-weight: 700; line-height: 1;
  color: var(--arbah-ink, #0F172A);
}
.av3 .npw-stepword { font-size: 13px; color: var(--arbah-ink-muted, #475569); }
.av3 .npw-tower {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  margin-top: 4px;
}
.av3 .npw-roof {
  width: 74px; height: 0;
  border-inline: 10px solid transparent;
  border-bottom: 14px solid var(--arbah-brand, #A06A2C);
}
.av3 .npw-storey {
  width: 56px; height: 15px; border-radius: 2px;
  background: color-mix(in srgb, var(--arbah-brand, #A06A2C) 32%, transparent);
}
.av3 .npw-storey.is-ground { width: 74px; background: var(--arbah-brand, #A06A2C); }

/* Navigation. Back is always there; Next is the only other control. */
.av3 .npw-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px;
}
.av3 .npw-back {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--arbah-ink-muted, #475569); padding: 10px 4px;
}
.av3 .npw-back:hover { color: var(--arbah-ink, #0F172A); }
.av3 .npw-next {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 13px 26px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 650;
  color: #FFF; background: var(--arbah-brand, #A06A2C); border: none;
}
.av3 .npw-next:disabled { opacity: .45; cursor: default; }
.av3 .npw-next--go { background: var(--arbah-success-ink, #067647); }

.av3 .npw-screen--done { align-items: flex-start; }
.av3 .npw-done-ico { color: var(--arbah-success-ink, #067647); }
.av3 .npw-summary {
  display: grid; gap: 8px; margin: 8px 0 0; width: 100%;
}
.av3 .npw-summary > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--arbah-border, #E2E8F0);
}
.av3 .npw-summary dt { font-size: 13px; color: var(--arbah-ink-muted, #475569); margin: 0; }
.av3 .npw-summary dd { font-size: 14.5px; font-weight: 650; margin: 0; color: var(--arbah-ink, #0F172A); text-align: end; }

.av3 .npw--ask .npw-read {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--arbah-success-ink, #067647);
}
.av3 .npw--ask .npw-from {
  align-self: flex-start; font-size: 11.5px; font-weight: 650;
  color: var(--arbah-success-ink, #067647);
}
.av3 .npw--ask .npw-note { font-size: 13px; color: var(--arbah-ink-muted, #475569); margin: 2px 0 0; }
.av3 .npw-readerr { font-size: 13px; color: var(--arbah-warning-ink, #B54708); text-align: center; }

@media (max-width: 560px) {
  .av3.npw--ask { min-height: auto; gap: 14px; }
  .av3 .npw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .av3 .npw-big { font-size: 18px; }
  .av3 .npw-next { padding: 12px 20px; font-size: 15px; }
  .av3 .npw-drop-actions { flex-direction: column; width: 100%; }
  .av3 .npw-drop-actions .npw-cta { justify-content: center; width: 100%; }
}
/* A desktop browser has no camera roll to speak of; the control is a phone
   affordance and says so by only appearing on one. */
@media (min-width: 561px) and (hover: hover) and (pointer: fine) {
  .av3 .npw-camera-btn { display: none; }
}

/* ── B · THE FACT SHEET AS THE OPTIONAL SCREEN ────────────────────────────
   A "not recorded" row is a BUTTON now, and the whole row is the target. The
   "Tap to fill" cue is quiet until the row is hovered or focused, so a sheet
   with eleven blanks does not read as eleven calls to action. */
.av3 .fs-tap {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; font: inherit;
  padding: 2px 4px; margin: -2px -4px; border-radius: 6px;
  text-align: start;
}
.av3 .fs-tap:hover { background: var(--arbah-surface-sunken, #F8FAFC); }
.av3 .fs-tap:focus-visible { outline: 2px solid var(--focus-ring, #2563EB); outline-offset: 1px; }
.av3 .fs-tap-cta {
  font-size: 11px; font-weight: 650; letter-spacing: .2px;
  color: var(--arbah-brand-ink, #7A4F1D);
  opacity: 0; transition: opacity .12s;
}
.av3 .fs-tap:hover .fs-tap-cta,
.av3 .fs-tap:focus-visible .fs-tap-cta { opacity: 1; }

/* The pencil on a row that already has a value: a correction, not a prompt. */
.av3 .fs-pencil {
  background: none; border: none; cursor: pointer; padding: 3px;
  margin-inline-start: 6px; border-radius: 5px; vertical-align: middle;
  color: var(--arbah-ink-subtle, #64748B);
  opacity: 0; transition: opacity .12s;
}
.av3 .fs-row:hover .fs-pencil,
.av3 .fs-pencil:focus-visible { opacity: 1; }
.av3 .fs-pencil:hover { background: var(--arbah-surface-sunken, #F8FAFC); color: var(--arbah-ink, #0F172A); }

/* Source 2 — a value the app already knew, marked so it is never mistaken
   for something somebody entered. */
.av3 .fs-known {
  margin-inline-start: 7px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 650;
  color: var(--arbah-ink-subtle, #64748B);
  background: var(--arbah-surface-sunken, #F8FAFC);
  border: 1px solid var(--arbah-border, #E2E8F0);
}

/* One field, inline. */
.av3 .fs-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.av3 .fs-input {
  flex: 1 1 150px; min-width: 0; font: inherit; font-size: 13.5px;
  padding: 6px 9px; border-radius: 7px;
  color: var(--arbah-ink, #0F172A);
  background: var(--arbah-surface, #FFF);
  border: 1.5px solid var(--arbah-brand, #A06A2C);
}
.av3 .fs-input:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--arbah-brand, #A06A2C) 18%, transparent); }
.av3 .fs-save, .av3 .fs-cancel {
  padding: 6px 11px; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 650; white-space: nowrap;
}
.av3 .fs-save { color: #FFF; background: var(--arbah-brand, #A06A2C); border: none; }
.av3 .fs-cancel {
  color: var(--arbah-ink-muted, #475569); background: transparent;
  border: 1px solid var(--arbah-border, #E2E8F0);
}

/* Source 1 — the section drop, at the top of each section. */
.av3 .fs-drop {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 2px 0 10px; padding: 8px 11px;
  border: 1px dashed var(--arbah-border-strong, #CBD5E1);
  border-radius: 9px;
  background: var(--arbah-surface-sunken, #F8FAFC);
}
.av3 .fs-drop-text { flex: 1; min-width: 140px; font-size: 12px; color: var(--arbah-ink-muted, #475569); }
.av3 .fs-file { display: none; }
.av3 .fs-drop-btn {
  padding: 5px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 12px; font-weight: 650;
  color: var(--arbah-brand-ink, #7A4F1D);
  background: var(--arbah-brand-soft, #F5EDE0);
  border: 1px solid color-mix(in srgb, var(--arbah-brand, #A06A2C) 35%, transparent);
}
.av3 .fs-drop-btn:disabled { opacity: .6; cursor: default; }
.av3 .fs-drop-note { flex-basis: 100%; font-size: 11.5px; color: var(--arbah-warning-ink, #B54708); }

/* ── A6 · Cashflow on the Saudi model ─────────────────────────────────────
   The hero is an EQUATION, laid out as one: received − used = left. The old
   page put three unrelated KPI tiles in a row and the reader had to work out
   that the third was the first two subtracted. */
.cfs { display: flex; flex-direction: column; gap: 16px; }
.cfs-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.2fr;
  align-items: stretch; gap: 8px;
  background: var(--arbah-surface, #FFF);
  border: 1px solid var(--arbah-border, #E2E8F0);
  border-radius: var(--r-12, 14px);
  padding: 18px 16px;
}
.cfs-cell { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* C — the two figures with records behind them are buttons. Same tile, plus
   the affordance a clickable thing owes the person clicking it. */
.cfs-cell--door, .cfs-side-row--door {
  font: inherit; text-align: start; cursor: pointer;
  background: none; border: none; padding: 0;
  border-radius: 8px;
}
.cfs-side-row--door {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--arbah-border, #E2E8F0);
  border-radius: 0;
}
.cfs-cell--door:hover .cfs-value,
.cfs-side-row--door:hover .cfs-side-val { text-decoration: underline; }
.cfs-cell--door:focus-visible, .cfs-side-row--door:focus-visible {
  outline: 2px solid var(--focus-ring, #2563EB); outline-offset: 3px;
}
.cfs-cell--head {
  background: var(--arbah-surface-sunken, #F8FAFC);
  border-radius: var(--r-8, 10px);
  padding: 10px 14px; margin: -10px -4px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--arbah-brand, #A06A2C) 22%, transparent);
}
.cfs-op {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 300;
  color: var(--arbah-ink-subtle, #64748B);
  padding: 0 4px;
}
.cfs-label {
  font-size: 11px; font-weight: 650; letter-spacing: .3px; text-transform: uppercase;
  color: var(--arbah-ink-subtle, #64748B);
}
.cfs-value {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 19px; font-weight: 700; color: var(--arbah-ink, #0F172A);
  overflow-wrap: anywhere;
}
.cfs-value--big { font-size: 26px; }
.cfs-cell--head.is-negative .cfs-value { color: var(--arbah-danger-ink, #B42318); }
.cfs-sub { font-size: 11.5px; color: var(--arbah-ink-muted, #475569); }

/* The sentence. It is the one thing on the page a person can act on, so it
   is a band and not a footnote. */
.cfs-sentence {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-8, 10px);
  font-size: 13.5px; line-height: 1.55;
}
.cfs-sentence.tone-bad {
  background: var(--arbah-danger-soft, #FEF3F2);
  color: var(--arbah-danger-ink, #B42318);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--arbah-danger-ink, #B42318) 22%, transparent);
}
.cfs-sentence.tone-good {
  background: var(--arbah-success-soft, #ECFDF3);
  color: var(--arbah-success-ink, #067647);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--arbah-success-ink, #067647) 22%, transparent);
}
.cfs-sentence.tone-neutral {
  background: var(--arbah-surface-sunken, #F8FAFC);
  color: var(--arbah-ink-muted, #475569);
  box-shadow: inset 0 0 0 1px var(--arbah-border, #E2E8F0);
}
.cfs-sentence svg { flex: 0 0 auto; margin-top: 1px; }

.cfs-next-amount {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 24px; font-weight: 700; margin: 6px 0 10px;
  color: var(--arbah-ink, #0F172A);
}
.cfs-next-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 13px; margin-bottom: 6px; color: var(--arbah-ink, #0F172A);
}
.cfs-next-row .cfs-label { min-width: 96px; }
.cfs-away {
  display: inline-flex; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650;
  color: var(--arbah-brand-ink, #7A4F1D);
  background: var(--arbah-brand-soft, #F5EDE0);
}
.cfs-allpaid { font-size: 13px; color: var(--arbah-success-ink, #067647); margin: 6px 0 0; }
.cfs-hint { font-size: 12px; color: var(--arbah-ink-muted, #475569); margin: 6px 0 0; }

.cfs-side-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--arbah-border, #E2E8F0);
}
.cfs-side-row:last-child { border-bottom: none; }
.cfs-side-val {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 15px; font-weight: 700; white-space: nowrap;
  color: var(--arbah-ink, #0F172A);
}
.cfs-side-val.is-owed { color: var(--arbah-warning-ink, #B54708); }

/* Two series, twelve buckets. CSS bars — this does not need a chart library,
   and the y-axis-overpaint bug the last one had cannot recur without one. */
.cfs-legend { display: flex; gap: 16px; margin: 4px 0 12px; font-size: 11.5px; color: var(--arbah-ink-muted, #475569); }
.cfs-lg { display: inline-flex; align-items: center; gap: 6px; }
.cfs-lg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cfs-lg-in { background: var(--arbah-success-ink, #067647); }
.cfs-lg-out { background: var(--arbah-brand, #A06A2C); }
.cfs-bars {
  display: flex; align-items: flex-end; gap: 8px;
  height: 190px; overflow-x: auto; padding-bottom: 4px;
}
.cfs-bargroup { flex: 1 1 0; min-width: 42px; display: flex; flex-direction: column; height: 100%; }
.cfs-barpair { flex: 1; display: flex; align-items: flex-end; gap: 3px; }
.cfs-bar { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; }
.cfs-bar--in { background: var(--arbah-success-ink, #067647); }
.cfs-bar--out { background: var(--arbah-brand, #A06A2C); }
.cfs-barlabel {
  padding-top: 6px; text-align: center;
  font-size: 10.5px; color: var(--arbah-ink-subtle, #64748B);
}

/* Recording a دفعة: the DROP first, the form as the fallback — Law 4's order
   made visible. */
.cfs-drop {
  border: 1px dashed var(--arbah-border-strong, #CBD5E1);
  border-radius: var(--r-12, 14px);
  background: var(--arbah-surface-sunken, #F8FAFC);
  padding: 18px 16px; text-align: center;
}
.cfs-drop-title { font-size: 14.5px; font-weight: 650; color: var(--arbah-ink, #0F172A); }
.cfs-drop-hint { font-size: 12.5px; color: var(--arbah-ink-muted, #475569); margin: 6px 0 12px; }
.cfs-drop-note { font-size: 12px; margin: 10px 0 0; color: var(--arbah-warning-ink, #B54708); }
.cfs-or {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  color: var(--arbah-ink-subtle, #64748B);
}
.cfs-or::before, .cfs-or::after {
  content: ''; flex: 1; height: 1px; background: var(--arbah-border, #E2E8F0);
}
.cfs-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.cfs-method {
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--arbah-ink-muted, #475569);
  background: var(--arbah-surface, #FFF);
  border: 1px solid var(--arbah-border, #E2E8F0);
}
.cfs-method.is-on {
  color: var(--arbah-brand-ink, #7A4F1D);
  background: var(--arbah-brand-soft, #F5EDE0);
  border-color: color-mix(in srgb, var(--arbah-brand, #A06A2C) 45%, transparent);
}
.cfs-method:focus-visible { outline: 2px solid var(--focus-ring, #2563EB); outline-offset: 2px; }

@media (max-width: 760px) {
  .cfs-hero { grid-template-columns: minmax(0, 1fr); }
  .cfs-op { display: none; }
  .cfs-cell--head { margin: 6px 0 0; }
  .cfs-value--big { font-size: 22px; }
}

/* ── A2 · the phase strip, opened at TODAY ────────────────────────────────
   The scroll happens inside these boxes and never on the page: scrolling the
   window on load would throw the owner past the hero and the "how far behind"
   badge, which is to fix the strip by hiding its own headline. */

/* On a phone the project strip stacks into a column. It gets a scroll box of
   its own so "current at top" has a top to be at — without it, a 44-step
   programme is 44 screens of page. */
@media (max-width: 720px) {
  .av3 .timeline {
    max-height: 62vh;
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* Site › Progress is a vertical list in both layouts, so its box is not
   media-gated. 44 steps at ~64px each is nearly 3,000px of list; the current
   phase sat below the fold on every load. */
.av3 .phaseplan--scroll {
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* The current step is RINGED, so "the strip opened here" reads as a statement
   about the phase rather than as an accident of scroll position. */
.av3 .tl-step.phase-current .tl-label {
  position: relative;
}
.av3 .tl-step.phase-current .tl-dot {
  box-shadow: 0 0 0 2px var(--arbah-brand, #A06A2C),
              0 0 0 5px color-mix(in srgb, var(--arbah-brand, #A06A2C) 20%, transparent);
}
.av3 .tl-step.phase-current .tl-name {
  font-weight: 700; color: var(--arbah-ink, #0F172A);
}
/* "Planned by today" — the number that says whether the job is behind, put
   beside the phase it judges rather than in a panel further down. */
.av3 .phase-planned {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  color: var(--arbah-ink-muted, #475569);
  background: var(--arbah-surface-sunken, #F8FAFC);
  border: 1px solid var(--arbah-border, #E2E8F0);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.av3 .phase-planned.is-behind {
  color: var(--arbah-danger-ink, #B42318);
  background: var(--arbah-danger-soft, #FEF3F2);
  border-color: color-mix(in srgb, var(--arbah-danger-ink, #B42318) 24%, transparent);
}
.av3 .phase-planned.is-ahead {
  color: var(--arbah-success-ink, #067647);
  background: var(--arbah-success-soft, #ECFDF3);
  border-color: color-mix(in srgb, var(--arbah-success-ink, #067647) 24%, transparent);
}