/* dashboard-v5.css — shared "understandable to a non-financier" component
 * system for the role-cockpit re-skin (Окно 1 FP&A, then Contract + AR).
 *
 * Ported from the approved sample (c:/tmp/ataski-contract-sample/fpa-v5.html).
 * Every class is prefixed ``v5-`` so it never collides with Tailwind's generic
 * utilities (``.grid``, ``.btn``, ``.line``, ``.hero`, …) or the app's
 * editorial classes. Palette + tokens live on the ``.v5-root`` wrapper (NOT
 * ``:root``) so they never leak into the rest of the app; the per-department
 * accent is ``--v5-dept`` and is the ONLY thing a role overrides.
 *
 * CSP: this file carries zero JS. All interactivity is delegated to
 * static/js/dashboard-v5.js via ``data-*`` attributes; tooltips are pure CSS
 * (:hover). Inline ``style=`` is allowed by the app CSP (style-src
 * 'unsafe-inline'); inline <script>/on*= handlers are NOT and never appear here.
 */

.v5-root {
  /* neutrals */
  --v5-bg: #F6F4EF;
  --v5-card: #FFFFFF;
  --v5-ink: #201B16;
  --v5-ink2: #57514A;
  --v5-ink3: #8C857B;
  --v5-line: #EBE6DD;
  --v5-lineS: #DBD4C8;
  /* structural + status */
  --v5-navy: #1E293B;
  --v5-amber: #B45309;
  --v5-amber-s: #FBF1E1;
  --v5-amber-b: #EDD3A6;
  --v5-rose: #C0392B;
  --v5-rose-s: #FBEAE8;
  --v5-rose-b: #F1C4BF;
  --v5-emer: #0B845A;
  --v5-emer-s: #E4F4EC;
  --v5-slate: #64748B;
  --v5-info: #2C5F9E;
  --v5-info-s: #EAF1FB;
  --v5-info-b: #CFE0F3;
  /* per-department accent — role band/active-tab/primary-action. Defaults to
     the finance amber; Contract/AR override on their own .v5-root. */
  --v5-dept: #B45309;
  --v5-dept-s: #FBF1E1;
  --v5-dept-b: #EDD3A6;

  color: var(--v5-ink);
  font-size: 14px;
  line-height: 1.5;
}

/* the v5 surface owns its own neutral canvas — a full-bleed wash behind the
   editorial app <main>. Applied by the role shell wrapper. */
.v5-surface { background: var(--v5-bg); }

.v5-root .v5-tnum { font-variant-numeric: tabular-nums; }
.v5-root .v5-up { color: var(--v5-emer); }
.v5-root .v5-dn { color: var(--v5-rose); }
.v5-root .v5-mut { color: var(--v5-ink3); }
.v5-root svg { display: block; }

/* ── role band + entity chips (sits inside the app shell, full-bleed) ─────── */
.v5-band-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--v5-card);
  border-bottom: 1px solid var(--v5-line);
  padding: 10px 0;
}
.v5-role {
  font-size: 13px;
  font-weight: 700;
  color: var(--v5-navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.v5-role .v5-b {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--v5-dept);
  flex: none;
}
.v5-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--v5-dept);
  background: var(--v5-dept-s);
  border: 1px solid var(--v5-dept-b);
  border-radius: 7px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.v5-chip.v5-neutral {
  color: var(--v5-ink2);
  background: var(--v5-card);
  border-color: var(--v5-lineS);
}
.v5-sp { margin-left: auto; }
.v5-closem {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--v5-dept);
  border-radius: 7px;
  padding: 7px 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  cursor: pointer;
}

/* ── top group nav (6 groups) ────────────────────────────────────────────── */
.v5-sub {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  background: var(--v5-card);
  border-bottom: 1px solid var(--v5-line);
}
.v5-tab {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--v5-ink3);
  padding: 12px 11px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
}
.v5-tab:hover { color: var(--v5-ink); }
.v5-tab.v5-on { color: var(--v5-navy); border-bottom-color: var(--v5-dept); }

/* ── model subnav (pill row) ─────────────────────────────────────────────── */
.v5-msub {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  background: var(--v5-card);
  border: 1px solid var(--v5-line);
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 12px;
}
.v5-msub a,
.v5-msub button {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--v5-ink3);
  padding: 7px 12px;
  border-radius: 7px;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.v5-msub a:hover,
.v5-msub button:hover { color: var(--v5-ink); background: #F2F3F6; }
.v5-msub a.v5-on,
.v5-msub button.v5-on { background: var(--v5-navy); color: #fff; }

/* ── wrap + section title ────────────────────────────────────────────────── */
.v5-wrap { padding: 16px 0 60px; }
.v5-ptitle {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 2px 0 12px;
}
.v5-ptitle h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.v5-ptitle p { font-size: 12.5px; color: var(--v5-ink3); margin-top: 3px; }

/* ── cadence banner (source + frequency) ─────────────────────────────────── */
.v5-cadence {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--v5-ink2);
  background: var(--v5-card);
  border: 1px solid var(--v5-line);
  border-radius: 9px;
  padding: 8px 14px;
  margin-bottom: 12px;
}
.v5-cadence b { color: var(--v5-ink); }
.v5-cadence .v5-rn {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--v5-dept);
  border: 1px solid var(--v5-dept);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  background: none;
  font-family: inherit;
}

/* ── explain strip (What / How) ──────────────────────────────────────────── */
.v5-explain {
  background: var(--v5-info-s);
  border: 1px solid var(--v5-info-b);
  border-radius: 10px;
  padding: 11px 15px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--v5-ink2);
  line-height: 1.5;
}
.v5-explain b { color: var(--v5-info); }
.v5-explain .v5-erow { display: flex; gap: 6px; margin-top: 3px; }
.v5-explain .v5-erow:first-child { margin-top: 0; }
.v5-explain .v5-lbl { color: var(--v5-info); font-weight: 700; min-width: 60px; flex: none; }

/* ── glossary tooltips (dotted term + "?" chip) ──────────────────────────── */
.v5-gl {
  border-bottom: 1px dotted var(--v5-ink3);
  cursor: help;
  position: relative;
  font-weight: 600;
}
.v5-q {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--v5-info-s);
  color: var(--v5-info);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  position: relative;
  border: 1px solid var(--v5-info-b);
  vertical-align: middle;
}
.v5-gl .v5-tip,
.v5-q .v5-tip {
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--v5-navy);
  color: #fff;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  padding: 9px 11px;
  border-radius: 8px;
  width: 250px;
  max-width: 250px;
  opacity: 0;
  visibility: hidden;
  transition: .15s;
  z-index: 55;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .4);
  white-space: normal;
}
.v5-gl .v5-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--v5-navy);
}
.v5-gl:hover .v5-tip,
.v5-gl:focus-visible .v5-tip,
.v5-q:hover .v5-tip,
.v5-q:focus-visible .v5-tip { opacity: 1; visibility: visible; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.v5-btn {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid var(--v5-lineS);
  color: var(--v5-ink);
  background: var(--v5-card);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.v5-btn:hover { border-color: var(--v5-navy); }
.v5-btn.v5-amber { background: var(--v5-dept); border-color: var(--v5-dept); color: #fff; }
.v5-btn.v5-navy { background: var(--v5-navy); border-color: var(--v5-navy); color: #fff; }
.v5-mini {
  font-size: 12px;
  font-weight: 600;
  color: var(--v5-dept);
  border: 1px solid var(--v5-dept);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  background: none;
  font-family: inherit;
}

/* ── KPI "fundamentals" strip (6 tiles) ──────────────────────────────────── */
.v5-fund {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  background: var(--v5-card);
  border: 1px solid var(--v5-lineS);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.v5-ft { padding: 13px 15px; border-right: 1px solid var(--v5-line); }
.v5-ft:last-child { border-right: none; }
.v5-ft .v5-l {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--v5-ink3);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.v5-ft .v5-v { font-size: 21px; font-weight: 700; margin-top: 6px; }
.v5-ft .v5-s { font-size: 11px; color: var(--v5-ink3); margin-top: 4px; }
.v5-ft .v5-vr { font-size: 11px; font-weight: 600; margin-top: 4px; }
.v5-ft .v5-ver {
  font-size: 10.5px;
  color: var(--v5-dept);
  font-weight: 600;
  cursor: pointer;
  margin-top: 5px;
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

/* ── "what changed" cards ────────────────────────────────────────────────── */
.v5-wc {
  background: var(--v5-card);
  border: 1px solid var(--v5-line);
  border-left: 4px solid var(--v5-rose);
  border-radius: 12px;
  padding: 15px 18px;
  margin-bottom: 12px;
}
.v5-wc.v5-amber { border-left-color: var(--v5-amber); }
.v5-wc.v5-slate { border-left-color: var(--v5-slate); }
.v5-wc .v5-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v5-wc .v5-imp { font-size: 18px; font-weight: 700; }
.v5-wc .v5-imp.v5-dn { color: var(--v5-rose); }
.v5-wc .v5-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: var(--v5-rose);
  border-radius: 4px;
  padding: 2px 7px;
}
.v5-wc .v5-tag.v5-slate { background: var(--v5-slate); }
.v5-wc .v5-bdg {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--v5-emer-s);
  color: var(--v5-emer);
}
.v5-wc .v5-obs { font-size: 14.5px; font-weight: 600; margin-top: 9px; }
.v5-wc .v5-k {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--v5-ink3);
  margin-top: 10px;
}
.v5-wc .v5-why { font-size: 13px; color: var(--v5-ink2); margin-top: 3px; }
.v5-wc .v5-why li { margin-left: 16px; }
.v5-wc .v5-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--v5-line);
}
.v5-wc .v5-a {
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 7px;
  border: 1px solid var(--v5-lineS);
  color: var(--v5-ink2);
  background: var(--v5-card);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.v5-wc .v5-a.v5-pri { background: var(--v5-dept); color: #fff; border-color: var(--v5-dept); }

/* ── navy hero (board-ready headline) ────────────────────────────────────── */
.v5-hero {
  background: var(--v5-navy);
  color: #fff;
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.v5-hero .v5-rw .v5-l {
  font-size: 11px;
  color: #A9B4C6;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  gap: 5px;
  align-items: center;
}
.v5-hero .v5-rw .v5-n { font-size: 36px; font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-top: 6px; }
.v5-hero .v5-rw .v5-n .v5-u { font-size: 17px; color: #C4CCD9; }
.v5-hero .v5-rw .v5-s { font-size: 12px; color: #C4CCD9; margin-top: 5px; }
.v5-hero .v5-kg { display: flex; gap: 22px; margin-left: auto; }
.v5-hero .v5-kk .v5-l { font-size: 10.5px; color: #A9B4C6; text-transform: uppercase; }
.v5-hero .v5-kk .v5-v { font-size: 18px; font-weight: 700; margin-top: 4px; }
.v5-hero .v5-kk .v5-d { font-size: 11px; font-weight: 600; margin-top: 2px; }

/* ── section card + navy band + section header ───────────────────────────── */
.v5-sec {
  background: var(--v5-card);
  border: 1px solid var(--v5-line);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.v5-band {
  background: var(--v5-navy);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.v5-band .v5-rt {
  margin-left: auto;
  font-weight: 500;
  color: #A9B4C6;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.v5-sech {
  padding: 11px 16px;
  border-bottom: 1px solid var(--v5-line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--v5-navy);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.v5-sech .v5-rt {
  margin-left: auto;
  font-weight: 500;
  color: var(--v5-ink3);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── strict data grid (tables) ───────────────────────────────────────────── */
.v5-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.v5-grid th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--v5-ink3);
  font-weight: 700;
  text-align: left;
  padding: 8px 14px;
  background: #F1F3F6;
  border-bottom: 1px solid var(--v5-lineS);
  border-right: 1px solid var(--v5-line);
}
.v5-grid th:last-child { border-right: none; }
.v5-grid th.v5-r { text-align: right; }
.v5-grid td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--v5-line);
  border-right: 1px solid var(--v5-line);
  color: var(--v5-ink2);
  white-space: nowrap;
}
.v5-grid td:last-child { border-right: none; }
.v5-grid tbody tr:last-child td { border-bottom: none; }
.v5-grid td.v5-r { text-align: right; }
.v5-grid .v5-ln { font-weight: 600; color: var(--v5-ink); }
.v5-grid tbody tr.v5-click { cursor: pointer; }
.v5-grid tbody tr.v5-click:hover td { background: #F8F9FB; }
.v5-grid tr.v5-foot td { background: #FAFBFC; font-weight: 700; color: var(--v5-ink); }

/* provenance chips */
.v5-prov { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.v5-prov.v5-o { background: var(--v5-emer-s); color: var(--v5-emer); }
.v5-prov.v5-e { background: var(--v5-amber-s); color: var(--v5-amber); }

/* ── driver tree ─────────────────────────────────────────────────────────── */
.v5-tree { background: var(--v5-card); border: 1px solid var(--v5-line); border-radius: 12px; overflow: hidden; }
.v5-tnode {
  display: grid;
  grid-template-columns: 1fr 90px 90px 90px 84px;
  gap: 0;
  border-bottom: 1px solid var(--v5-line);
  font-size: 13px;
}
.v5-tnode:last-child { border-bottom: none; }
.v5-tnode > div { padding: 9px 14px; border-right: 1px solid var(--v5-line); }
.v5-tnode > div:last-child { border-right: none; text-align: right; }
.v5-tnode .v5-nm { font-weight: 600; color: var(--v5-ink); }
.v5-tnode.v5-l1 .v5-nm { padding-left: 0; }
.v5-tnode.v5-l2 .v5-nm { padding-left: 16px; font-weight: 500; }
.v5-tnode.v5-l3 .v5-nm { padding-left: 32px; font-weight: 400; color: var(--v5-ink2); }
.v5-tnode .v5-edit { color: var(--v5-dept); font-weight: 600; cursor: pointer; }
.v5-tnode.v5-hd {
  background: #F1F3F6;
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--v5-ink3);
  font-weight: 700;
}
.v5-tnode.v5-hd > div { padding: 8px 14px; }
.v5-tnode.v5-click { cursor: pointer; }
.v5-tnode.v5-click:hover { background: #F8F9FB; }
.v5-showall {
  text-align: center;
  padding: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--v5-info);
  cursor: pointer;
  background: #FAFBFC;
  border: none;
  width: 100%;
  font-family: inherit;
}

/* ── KPI tiles (4-up) ────────────────────────────────────────────────────── */
.v5-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.v5-tile { background: var(--v5-card); border: 1px solid var(--v5-line); border-radius: 10px; padding: 12px 15px; }
.v5-tile .v5-l { font-size: 11px; color: var(--v5-ink3); font-weight: 600; display: flex; gap: 5px; align-items: center; }
.v5-tile .v5-v { font-size: 19px; font-weight: 700; margin-top: 5px; }

/* ── inbox / narrative rows ──────────────────────────────────────────────── */
.v5-nrow { background: var(--v5-card); border: 1px solid var(--v5-line); border-radius: 11px; padding: 14px 16px; margin-bottom: 11px; }
.v5-nrow .v5-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.v5-ndir { font-size: 10.5px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; }
.v5-ndir.v5-bad { background: var(--v5-rose-s); color: var(--v5-rose); }
.v5-ndir.v5-good { background: var(--v5-emer-s); color: var(--v5-emer); }
.v5-nver { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 5px; background: var(--v5-emer-s); color: var(--v5-emer); }
.v5-nver.v5-d { background: var(--v5-rose-s); color: var(--v5-rose); }
.v5-nrow .v5-claim { font-size: 14px; margin-top: 9px; color: var(--v5-ink); }
.v5-nrow .v5-cite { font-size: 11.5px; color: var(--v5-ink3); margin-top: 6px; }
.v5-nrow .v5-acts { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.v5-na {
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--v5-lineS);
  background: var(--v5-card);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.v5-na.v5-ok { background: var(--v5-emer); color: #fff; border-color: var(--v5-emer); }
.v5-na.v5-rj { color: var(--v5-rose); border-color: var(--v5-rose-b); }

/* ── two-column sections (setup / evidence) ──────────────────────────────── */
.v5-sects { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v5-sect { background: var(--v5-card); border: 1px solid var(--v5-line); border-radius: 12px; padding: 16px 18px; }
.v5-sect.v5-full { grid-column: 1 / -1; }
.v5-sect h4 { font-size: 11.5px; text-transform: uppercase; color: var(--v5-navy); font-weight: 700; margin-bottom: 12px; }
.v5-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--v5-line); font-size: 13px; }
.v5-line:last-child { border-bottom: none; }
.v5-line .v5-nm { color: var(--v5-ink); font-weight: 500; }
.v5-line .v5-meta { color: var(--v5-ink3); font-size: 12px; margin-left: auto; text-align: right; }
.v5-st { font-size: 11px; font-weight: 600; color: var(--v5-emer); }
.v5-authk {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--v5-slate);
  background: #EEF0F4;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 7px;
}

/* ── grid helpers ────────────────────────────────────────────────────────── */
.v5-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v5-cols2 { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── evidence drawer (slide-in) ──────────────────────────────────────────── */
.v5-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 24, .42);
  opacity: 0;
  visibility: hidden;
  transition: .2s;
  z-index: 60;
}
.v5-scrim.v5-open { opacity: 1; visibility: visible; }
.v5-evd {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 560px;
  max-width: 96vw;
  background: var(--v5-bg);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  z-index: 61;
  display: flex;
  flex-direction: column;
  box-shadow: -30px 0 70px -40px rgba(0, 0, 0, .55);
}
.v5-evd.v5-open { transform: none; }
.v5-evd .v5-top2 {
  background: var(--v5-card);
  border-bottom: 1px solid var(--v5-line);
  padding: 15px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.v5-evd .v5-top2 .v5-eb { font-size: 11px; color: var(--v5-dept); text-transform: uppercase; font-weight: 700; }
.v5-evd .v5-top2 h3 { font-size: 17px; font-weight: 700; margin-top: 2px; }
.v5-evd .v5-top2 .v5-x {
  margin-left: auto;
  font-size: 22px;
  color: var(--v5-ink3);
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  font-family: inherit;
}
.v5-evd .v5-body { overflow: auto; padding: 18px 22px 40px; }
.v5-bignum { font-size: 32px; font-weight: 700; }
.v5-bignum.v5-dn { color: var(--v5-rose); }
.v5-srcline { display: flex; gap: 8px; align-items: center; margin: 10px 0 16px; font-size: 12.5px; color: var(--v5-ink2); }
.v5-srcbdg { font-size: 11px; font-weight: 700; color: #fff; background: var(--v5-navy); border-radius: 5px; padding: 2px 8px; }
.v5-pa { display: flex; gap: 20px; background: var(--v5-card); border: 1px solid var(--v5-line); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.v5-pa .v5-c .v5-l { font-size: 11px; color: var(--v5-ink3); text-transform: uppercase; font-weight: 600; }
.v5-pa .v5-c .v5-v { font-size: 16px; font-weight: 700; margin-top: 3px; }
.v5-discl {
  border-left: 3px solid var(--v5-amber);
  background: var(--v5-card);
  border-radius: 0 8px 8px 0;
  padding: 11px 15px;
  font-size: 12px;
  color: var(--v5-ink3);
  margin-bottom: 8px;
}
.v5-fp { font-size: 11.5px; color: var(--v5-ink3); font-variant-numeric: tabular-nums; }
.v5-verdict {
  font-size: 12px;
  color: var(--v5-ink2);
  background: var(--v5-emer-s);
  border-radius: 8px;
  padding: 11px 14px;
  margin: 8px 0 14px;
  display: flex;
  gap: 9px;
  align-items: center;
}
.v5-verdict.v5-d { background: var(--v5-rose-s); }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .v5-root .v5-fund { grid-template-columns: repeat(3, 1fr); }
  .v5-root .v5-tiles { grid-template-columns: 1fr 1fr; }
  .v5-root .v5-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .v5-root .v5-hero .v5-kg { margin-left: 0; }
  .v5-root .v5-sects,
  .v5-root .v5-two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .v5-root .v5-fund { grid-template-columns: 1fr 1fr; }
  .v5-root .v5-tnode { grid-template-columns: 1fr 70px 70px; }
  .v5-root .v5-tnode > div:nth-child(4),
  .v5-root .v5-tnode > div:nth-child(5) { display: none; }
}


/* ============================================================
 * AR Cash Collector — `.arv5`-scoped dashboard-v5 vocabulary.
 * Merged from feature/ar-dashboard-v5. Disjoint selector namespace
 * from the `.v5-*`/`.v5-root` FP&A system above (zero collision):
 * every rule below is scoped under `.arv5`.
 * ============================================================ */

/* dashboard-v5.css — shared "understandable to a non-financier" dashboard
   component system (Rollout step 0). Ported from the founder-approved sample
   (c:/tmp/ataski-contract-sample/ar-v5.html). First consumer: AR Collector
   (`feature/ar-dashboard-v5`); FP&A + Contract windows share the same file.

   Design contract:
   - EVERYTHING is scoped under `.arv5` so these generic class names
     (.hero/.grid/.chip/.tab/.panel…) never leak into or collide with the
     app chrome or Tailwind utilities.
   - Palette tokens live on `.arv5` (not :root) so they override base.html
     tokens ONLY inside the dashboard subtree.
   - Font is inherited from the app shell (General Sans) — NO external font
     import (CSP + one-font rule).
   - No inline handlers anywhere; behaviour is wired by data-* in ar-v5.js. */

.arv5 {
  --bg: #F4F5F8;
  --card: #FFFFFF;
  --ink: #191C22;
  --ink2: #4A515C;
  --ink3: #868D99;
  --line: #E5E8EE;
  --lineS: #D2D7E0;
  --navy: #1E293B;
  --amber: #B45309;
  --amber-s: #FBF1E1;
  --amber-b: #EDD3A6;
  --rose: #C0392B;
  --rose-s: #FBEAE8;
  --rose-b: #F1C4BF;
  --emer: #0B845A;
  --emer-s: #E4F4EC;
  --teal: #0E7C6B;
  --slate: #64748B;
  --violet: #6D46C8;
  --blue: #2C5F9E;
  --info: #2C5F9E;
  --info-s: #EAF1FB;
  --info-b: #CFE0F3;
  color: var(--ink);
  font-size: 14px;
}

/* Full-bleed calm canvas: the base template strips main padding so the
   dashboard paints edge-to-edge; .wrap re-establishes the reading column. */
.arv5 { background: var(--bg); }
.arv5 * { box-sizing: border-box; }
.arv5 .tnum { font-variant-numeric: tabular-nums; }
.arv5 a { color: inherit; text-decoration: none; }
.arv5 button { font-family: inherit; cursor: pointer; border: none; background: none; }
.arv5 svg { display: block; }
.arv5 .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.arv5 .up { color: var(--emer); }
.arv5 .dn { color: var(--rose); }

/* ── Role sub-bar (Сегодня / Черновики / Обещания / Данные и настройки) ── */
.arv5 .sub { background: var(--v5-card); border-bottom: 1px solid var(--line); }
.arv5 .sub-in { max-width: 1320px; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.arv5 .role { font-size: 12px; font-weight: 700; color: var(--navy); padding-right: 12px; margin-right: 5px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 7px; }
.arv5 .role .b { width: 8px; height: 8px; border-radius: 2px; background: var(--amber); }
.arv5 .tab { font-size: 13.5px; font-weight: 600; color: var(--ink3); padding: 12px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.arv5 .tab:hover { color: var(--ink); }
.arv5 .tab.on { color: var(--navy); border-bottom-color: var(--amber); }
.arv5 .run { margin-left: auto; font-size: 12px; font-weight: 600; color: #fff; background: var(--amber); border-radius: 7px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; }
.arv5 .run:hover { filter: brightness(1.05); }

.arv5 .wrap { max-width: 1320px; margin: 0 auto; padding: 16px 22px 60px; }
.arv5 .panel { display: none; }
.arv5 .panel.show { display: block; }

/* ── Cadence strip (data source + refresh) ── */
.arv5 .cadence { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink2); background: var(--v5-card); border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; margin-bottom: 12px; flex-wrap: wrap; }
.arv5 .cadence b { color: var(--ink); }
.arv5 .cadence .rn { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--amber); border: 1px solid var(--amber); border-radius: 6px; padding: 4px 10px; cursor: pointer; }

/* ── Self-explaining strip (Что это / Как работать) ── */
.arv5 .explain { background: var(--info-s); border: 1px solid var(--info-b); border-radius: 10px; padding: 11px 15px; margin-bottom: 14px; font-size: 13px; color: var(--ink2); line-height: 1.5; }
.arv5 .explain b { color: var(--info); }
.arv5 .explain .row { display: flex; gap: 6px; margin-top: 3px; }
.arv5 .explain .row:first-child { margin-top: 0; }
.arv5 .explain .lbl { color: var(--info); font-weight: 700; min-width: 92px; flex: none; }

/* ── Glossary tooltips (DSO / CEI / safe-to-dun …) ── */
.arv5 .gl { border-bottom: 1px dotted var(--ink3); cursor: help; position: relative; font-weight: 600; }
.arv5 .gl .tip, .arv5 .q .tip { position: absolute; bottom: 145%; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 400; line-height: 1.45; padding: 9px 11px; border-radius: 8px; width: 250px; opacity: 0; visibility: hidden; transition: .15s; z-index: 55; text-transform: none; letter-spacing: 0; box-shadow: 0 8px 24px -8px rgba(0,0,0,.4); text-align: left; white-space: normal; }
.arv5 .gl:hover .tip, .arv5 .q:hover .tip, .arv5 .gl:focus-visible .tip, .arv5 .q:focus-visible .tip { opacity: 1; visibility: visible; }
.arv5 .q { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--info-s); color: var(--info); font-size: 10px; font-weight: 700; cursor: help; position: relative; border: 1px solid var(--info-b); }

.arv5 .ptitle { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 2px 0 12px; }
.arv5 .ptitle h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.arv5 .ptitle p { font-size: 12.5px; color: var(--ink3); margin-top: 3px; }

.arv5 .btn { font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--lineS); color: var(--ink); background: var(--v5-card); }
.arv5 .btn:hover { border-color: var(--navy); }
.arv5 .btn.amber { background: var(--amber); border-color: var(--amber); color: #fff; }
.arv5 .btn.emer { background: var(--emer); border-color: var(--emer); color: #fff; }

/* ── Hero + KPI grid ── */
.arv5 .hero { background: var(--navy); color: #fff; border-radius: 14px; padding: 18px 22px; margin-bottom: 12px; display: flex; align-items: center; gap: 26px; }
.arv5 .hero .rw .l { font-size: 11px; color: #A9B4C6; text-transform: uppercase; font-weight: 600; }
.arv5 .hero .rw .n { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-top: 6px; }
.arv5 .hero .rw .s { font-size: 12px; color: #C4CCD9; margin-top: 5px; }
.arv5 .hero .kg { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.arv5 .hero .kk .l { font-size: 10.5px; color: #A9B4C6; text-transform: uppercase; }
.arv5 .hero .kk .v { font-size: 17px; font-weight: 700; margin-top: 4px; }
.arv5 .hero .kk .l .gl { color: #F4A26B; }

.arv5 .kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; background: var(--v5-card); border: 1px solid var(--lineS); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.arv5 .kt { padding: 12px 14px; border-right: 1px solid var(--line); }
.arv5 .kt:last-child { border-right: none; }
.arv5 .kt .l { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink3); font-weight: 600; display: flex; gap: 4px; align-items: center; }
.arv5 .kt .v { font-size: 18px; font-weight: 700; margin-top: 5px; }
.arv5 .kt .v.ab { font-size: 12px; color: var(--ink3); font-weight: 500; padding-top: 5px; }
.arv5 .kt .v .d { font-size: 12px; font-weight: 600; margin-left: 3px; }

/* ── Aging bar ── */
.arv5 .aging { background: var(--v5-card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; }
.arv5 .aging .ah { font-size: 12px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; }
.arv5 .abar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; margin: 10px 0 8px; }
.arv5 .abar div { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; cursor: pointer; min-width: 0; }
.arv5 .aleg { display: flex; gap: 16px; font-size: 11.5px; color: var(--ink2); flex-wrap: wrap; }
.arv5 .aleg span { display: flex; gap: 5px; align-items: center; cursor: pointer; }
.arv5 .aleg i { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* ── Do-not-dun trust centre ── */
.arv5 .dnd { background: var(--emer-s); border: 1px solid #B8E0CC; border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; }
.arv5 .dnd h4 { font-size: 12px; font-weight: 700; color: var(--emer); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.arv5 .dnd .r { display: flex; align-items: center; gap: 11px; padding: 6px 0; font-size: 13px; border-top: 1px solid #CDEBD9; }
.arv5 .dnd .r:first-of-type { border-top: none; }
.arv5 .dnd .r .rn { color: var(--ink); font-weight: 600; }
.arv5 .dnd .r .rs { color: var(--ink3); font-size: 12px; }
.arv5 .dnd .r .amt { margin-left: auto; font-weight: 600; }

/* ── Secondary rollup strips (entities / deductions) ── */
.arv5 .strip { background: var(--v5-card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; }
.arv5 .strip h4 { font-size: 12px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.arv5 .strip .cells { display: flex; flex-wrap: wrap; gap: 10px; }
.arv5 .strip .cell { border: 1px solid var(--line); border-radius: 9px; padding: 9px 13px; }
.arv5 .strip .cell .cn { font-size: 13px; font-weight: 600; color: var(--ink); }
.arv5 .strip .cell .cv { font-size: 15px; font-weight: 700; color: var(--ink); }
.arv5 .strip .cell .cs { font-size: 11.5px; color: var(--ink3); }

/* ── Filter pills + strict grid ── */
.arv5 .fbar { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.arv5 .fp { font-size: 12px; font-weight: 600; color: var(--ink2); border: 1px solid var(--lineS); border-radius: 999px; padding: 5px 12px; background: var(--v5-card); cursor: pointer; }
.arv5 .fp.on { background: var(--navy); color: #fff; border-color: var(--navy); }

.arv5 .grid { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--v5-card); border: 1px solid var(--lineS); border-radius: 10px; overflow: hidden; }
.arv5 .grid th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); font-weight: 700; text-align: left; padding: 8px 14px; background: #F1F3F6; border-bottom: 1px solid var(--lineS); border-right: 1px solid var(--line); }
.arv5 .grid th:last-child { border-right: none; }
.arv5 .grid th.r { text-align: right; }
.arv5 .grid td { padding: 9px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); color: var(--ink2); white-space: nowrap; }
.arv5 .grid td:last-child { border-right: none; }
.arv5 .grid tbody tr:last-child td { border-bottom: none; }
.arv5 .grid td.r { text-align: right; }
.arv5 .grid .ln { font-weight: 600; color: var(--ink); }
.arv5 .grid tbody tr.click { cursor: pointer; }
.arv5 .grid tbody tr.click:hover td { background: #F8F9FB; }
.arv5 .grid .sub2 { font-size: 10.5px; color: var(--ink3); font-weight: 400; }

/* ── Status chips ── */
.arv5 .chip { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px; display: inline-block; }
.arv5 .chip.safe { background: #E3F3F0; color: var(--teal); }
.arv5 .chip.overdue { background: var(--rose-s); color: var(--rose); }
.arv5 .chip.held { background: #EEF0F4; color: var(--slate); }
.arv5 .chip.disputed { background: var(--amber-s); color: var(--amber); }
.arv5 .chip.paid { background: var(--emer-s); color: var(--emer); }
.arv5 .chip.promise { background: var(--info-s); color: var(--info); }
.arv5 .chip.escalated { background: #EDE7FA; color: var(--violet); }
.arv5 .ent-b { font-size: 9.5px; font-weight: 700; color: var(--slate); background: #EEF0F4; border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.arv5 .short-b { font-size: 9.5px; font-weight: 700; color: var(--amber); background: var(--amber-s); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.arv5 .risk { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }

/* ── Drafts ── */
.arv5 .qh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.arv5 .qh .cnt { font-size: 12px; color: var(--ink3); }
.arv5 .qh .bulk { margin-left: auto; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.arv5 .dcard { background: var(--v5-card); border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px; margin-bottom: 12px; }
.arv5 .dcard .h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.arv5 .dcard .step { font-size: 10.5px; font-weight: 700; color: var(--amber); background: var(--amber-s); border-radius: 5px; padding: 2px 8px; }
.arv5 .dcard .ai { font-size: 10.5px; font-weight: 700; color: var(--violet); background: #EDE7FA; border-radius: 5px; padding: 2px 8px; }
.arv5 .dcard .vb { font-size: 10.5px; font-weight: 700; color: var(--emer); background: var(--emer-s); border-radius: 5px; padding: 2px 8px; margin-left: auto; }
.arv5 .dcard .subj { font-weight: 700; font-size: 14.5px; margin-top: 10px; }
.arv5 .dcard .bd { font-size: 13px; color: var(--ink2); background: #FAFBFC; border: 1px solid var(--line); border-radius: 8px; padding: 10px 13px; margin-top: 8px; white-space: pre-line; }
.arv5 .dcard .pl { font-size: 11.5px; font-weight: 600; color: var(--info); margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.arv5 .dcard .paybtn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--blue); border-radius: 7px; padding: 6px 12px; margin-top: 10px; }
.arv5 .dcard .prov { font-size: 11.5px; color: var(--ink3); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.arv5 .dcard .acts { display: flex; gap: 8px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.arv5 .da { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--lineS); background: var(--v5-card); color: var(--ink); }
.arv5 .da.ok { background: var(--emer); color: #fff; border-color: var(--emer); }
.arv5 .da.rj { color: var(--rose); border-color: var(--rose-b); }
.arv5 .binh { font-size: 12.5px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 10px; }
.arv5 .roq { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--v5-card); border: 1px solid var(--line); border-radius: 9px; margin-bottom: 8px; font-size: 13px; }
.arv5 .roq .amt { margin-left: auto; font-weight: 600; }

/* ── Sections (settings / setup) ── */
.arv5 .sects { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.arv5 .sect { background: var(--v5-card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.arv5 .sect.full { grid-column: 1 / -1; }
.arv5 .sect h4 { font-size: 11.5px; text-transform: uppercase; color: var(--navy); font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.arv5 .line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.arv5 .line:last-child { border-bottom: none; }
.arv5 .line .nm { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.arv5 .line .meta { color: var(--ink3); font-size: 12px; margin-left: auto; text-align: right; }
.arv5 .st { font-size: 11px; font-weight: 600; color: var(--emer); }
.arv5 .st.no { color: var(--rose); }
.arv5 .mini2 { font-size: 12px; font-weight: 600; color: var(--amber); border: 1px solid var(--amber); border-radius: 6px; padding: 4px 10px; cursor: pointer; background: var(--v5-card); }
.arv5 .authk { font-size: 9.5px; font-weight: 700; color: var(--slate); background: #EEF0F4; border-radius: 4px; padding: 1px 6px; margin-left: 7px; }
.arv5 .guard { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.arv5 .guard:last-child { border-bottom: none; }
.arv5 .guard .g { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 11px; font-weight: 700; }
.arv5 .guard .g.ok { background: var(--emer-s); color: var(--emer); }
.arv5 .guard .g.no { background: var(--rose-s); color: var(--rose); }
.arv5 .guard .nm { color: var(--ink); font-weight: 500; }
.arv5 .guard .meta { color: var(--ink3); font-size: 12px; margin-left: auto; text-align: right; }

/* Field inputs inside v5 forms */
.arv5 .fld { width: 100%; border: 1px solid var(--lineS); border-radius: 8px; padding: 8px 11px; font-size: 13px; color: var(--ink); background: var(--v5-card); font-family: inherit; }
.arv5 .fld:focus { outline: none; border-color: var(--navy); }
.arv5 .flbl { display: block; font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 5px; }
.arv5 .fhelp { font-size: 11.5px; color: var(--ink3); margin-top: 4px; }

/* Banners */
.arv5 .banner { border-radius: 10px; padding: 11px 15px; margin-bottom: 14px; font-size: 13px; line-height: 1.5; }
.arv5 .banner.ok { background: var(--emer-s); border: 1px solid #B8E0CC; color: #0A5C42; }
.arv5 .banner.warn { background: var(--amber-s); border: 1px solid var(--amber-b); color: #7A3E06; }
.arv5 .banner.info { background: var(--info-s); border: 1px solid var(--info-b); color: #1E4573; }
.arv5 .banner.danger { background: var(--rose-s); border: 1px solid var(--rose-b); color: #7C231A; }

/* Empty state */
.arv5 .empty { border: 2px dashed var(--lineS); background: var(--v5-card); border-radius: 12px; padding: 32px; text-align: center; }
.arv5 .empty .et { font-size: 16px; font-weight: 700; color: var(--ink); }
.arv5 .empty .eb { font-size: 13px; color: var(--ink3); margin-top: 6px; }

/* ── Customer drawer ── */
.arv5 .scrim { position: fixed; inset: 0; background: rgba(15,18,24,.42); opacity: 0; visibility: hidden; transition: .2s; z-index: 60; }
.arv5 .scrim.open { opacity: 1; visibility: visible; }
.arv5 .evd { position: fixed; top: 0; right: 0; height: 100vh; width: 600px; max-width: 96vw; background: var(--bg); transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); z-index: 61; display: flex; flex-direction: column; box-shadow: -30px 0 70px -40px rgba(0,0,0,.55); }
.arv5 .evd.open { transform: none; }
.arv5 .evd .top2 { background: var(--v5-card); border-bottom: 1px solid var(--line); padding: 15px 22px; display: flex; align-items: flex-start; gap: 14px; }
.arv5 .evd .top2 .eb { font-size: 11px; color: var(--amber); text-transform: uppercase; font-weight: 700; }
.arv5 .evd .top2 h3 { font-size: 17px; font-weight: 700; margin-top: 2px; }
.arv5 .evd .top2 .x { margin-left: auto; font-size: 22px; color: var(--ink3); cursor: pointer; line-height: 1; }
.arv5 .evd .body { overflow: auto; padding: 18px 22px 40px; }
.arv5 .dh { font-size: 11.5px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 9px; }
.arv5 .tl { border-left: 2px solid var(--line); padding-left: 14px; margin-left: 4px; }
.arv5 .tli { position: relative; padding: 7px 0; font-size: 13px; }
.arv5 .tli:before { content: ''; position: absolute; left: -19px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.arv5 .tli.reply:before { background: var(--violet); }
.arv5 .tli.note:before { background: var(--slate); }
.arv5 .tli .w { font-size: 11.5px; color: var(--ink3); }
.arv5 .auton { background: var(--info-s); border: 1px solid var(--info-b); border-radius: 10px; padding: 12px 15px; font-size: 13px; color: var(--ink2); margin-bottom: 4px; }
.arv5 .auton b { color: var(--info); }
.arv5 .dtot { display: flex; gap: 20px; margin-bottom: 14px; }
.arv5 .dtot .l { font-size: 11px; color: var(--ink3); text-transform: uppercase; font-weight: 600; }
.arv5 .dtot .n { font-size: 24px; font-weight: 700; }
.arv5 .dtot .h { font-size: 15px; font-weight: 600; padding-top: 6px; }

/* ── G8: guided onboarding checklist ──────────────────────────────────────── */
.arv5 .onb .onb-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.arv5 .onb .onb-hd h4 { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); }
.arv5 .onb-prog { font-size: 11.5px; font-weight: 700; color: var(--navy); background: var(--info-s); border: 1px solid var(--info-b); border-radius: 999px; padding: 4px 11px; white-space: nowrap; flex: none; }
.arv5 .onb-steps { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.arv5 .onb-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--v5-card); }
.arv5 .onb-step.is-done { background: var(--emer-s); border-color: #B8E0CC; }
.arv5 .onb-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; font-size: 12px; font-weight: 700; color: var(--ink2); background: #F1F3F6; border: 1px solid var(--lineS); }
.arv5 .onb-step.is-done .onb-num { color: #fff; background: var(--emer); border-color: var(--emer); }
.arv5 .onb-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.arv5 .onb-txt .onb-t { font-size: 13px; font-weight: 600; color: var(--ink); }
.arv5 .onb-txt .onb-b { font-size: 11.5px; color: var(--ink3); }
.arv5 .onb-side { margin-left: auto; flex: none; }

@media (max-width: 1000px) {
  .arv5 .kpis { grid-template-columns: repeat(3, 1fr); }
  .arv5 .hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .arv5 .hero .kg { margin-left: 0; }
  .arv5 .sects { grid-template-columns: 1fr; }
}

/* ── Premium-editorial typography (2026-07-06) — Fraunces display serif on the
   FP&A cockpit's titles + big numbers (General Sans stays the body face). The
   Fraunces webfont is already loaded globally in base.html. ────────────────── */
.v5-root { --v5-display: "Fraunces", Georgia, "Times New Roman", serif; }
.v5-root .v5-ptitle h2,
.v5-root h2 {
  font-family: var(--v5-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-optical-sizing: auto;
}
/* the headline numbers — KPI tile values + any element opting in via .v5-num */
.v5-root .v5-v,
.v5-root .v5-num {
  font-family: var(--v5-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}