/*
 * Partner dashboard — sits on top of divisi.css, which owns the brand tokens.
 *
 * Nothing here redefines a colour: every value resolves from --dv-* so the
 * dashboard follows the device theme exactly as the marketing site does, and a
 * brand change lands in one file rather than two.
 *
 * The dashboard is scanned and operated rather than read, so the craft goes into
 * information design: state legible before you read the number, the summary
 * above the detail, and one thing on the page that is obviously the answer.
 */

.dvp {
    font-family: var(--dv-font-body);
    background: var(--bs-body-bg);
    color: var(--dv-text);
    min-height: 100vh;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.dvp-bar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--dv-surface);
    border-bottom: 1px solid var(--bs-border-color);
}

.dvp-bar-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.dvp-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--dv-text);
    font-family: var(--dv-font-heading);
    font-size: 1.06rem;
    letter-spacing: .01em;
    white-space: nowrap;
}

.dvp-brand b {
    color: var(--dv-green-accent);
    font-weight: 700;
}

.dvp-org {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dvp-org-rule {
    width: 1px;
    height: 26px;
    background: var(--bs-border-color);
}

.dvp-org-logo {
    height: 26px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

/* Until a partner uploads a mark, their initial in brand green — a placeholder
   that still reads as theirs rather than as a missing image. */
.dvp-org-initials {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--dv-tag-pill-bg);
    color: var(--dv-green-accent);
    font-weight: 700;
    font-size: .85rem;
}

.dvp-org-name {
    font-size: .9rem;
    color: var(--dv-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A tab set rather than a row of buttons. The current tab is marked by an
   underline instead of a fill: a filled pill reads as something to press, and a
   tab you are already on that looks pressable is a control that appears broken. */
.dvp-nav {
    margin-left: auto;
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 2px;
}

.dvp-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    font-size: .92rem;
    font-weight: 500;
    color: var(--dv-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.dvp-nav a:hover {
    color: var(--dv-text);
    border-bottom-color: var(--bs-border-color);
}

.dvp-nav a[aria-current="page"] {
    color: var(--dv-text);
    font-weight: 600;
    border-bottom-color: var(--dv-green);
}

.dvp-nav a[aria-current="page"] i {
    color: var(--dv-green-accent);
}

.dvp-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background: var(--dv-tag-pill-bg);
    color: var(--dv-green-accent);
    font-weight: 700;
    font-size: .85rem;
    line-height: 1;
}

.dvp-account-mail {
    font-weight: 400;
    font-size: .8rem;
    color: var(--dv-text-muted);
}

/* The programme row. Present only inside a programme, which is what lets the
   row above it keep the same shape everywhere — a top bar that grows and shrinks
   as you navigate makes a reader re-find the same link on every page. */
.dvp-subbar {
    border-top: 1px solid var(--bs-border-color);
    background: var(--dv-surface-alt);
}

.dvp-subbar-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    height: 44px;
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.dvp-subbar-name {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--dv-font-heading);
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dvp-subbar-code {
    font-family: var(--bs-font-monospace);
    font-size: .72rem;
    letter-spacing: .08em;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--dv-tag-pill-bg);
    color: var(--dv-green-accent);
}

.dvp-subbar .dvp-nav a {
    font-size: .88rem;
}

/* ── Page frame ─────────────────────────────────────────────────────────── */
.dvp-main {
    max-width: 1500px;
    margin: 0 auto;
    padding: 22px 20px 64px;
}

.dvp-head {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 18px;
}

.dvp-title {
    font-family: var(--dv-font-heading);
    font-size: 1.75rem;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -.01em;
}

.dvp-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .88rem;
    color: var(--dv-text-muted);
    margin: 0 0 4px;
}

.dvp-crumbs a {
    color: var(--dv-text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.dvp-crumbs a:hover {
    color: var(--dv-green-accent);
    border-bottom-color: currentColor;
}

.dvp-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Cards: crisp borders, no soft glow — the site's "modern retro" ─────── */
.dvp-card {
    background: var(--dv-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}

/* ── Stat strip ─────────────────────────────────────────────────────────── */
.dvp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.dvp-stat {
    background: var(--dv-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 14px 16px;
}

.dvp-stat b {
    display: block;
    font-family: var(--dv-font-heading);
    font-size: 1.9rem;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.dvp-stat span {
    display: block;
    margin-top: 3px;
    font-size: .74rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--dv-text-muted);
}

/* The one number the page exists to surface. Brand green when the book is
   healthy, warning red once tonnes are actually at risk — so the strip reads
   before any of it is parsed. */
.dvp-stat.is-lead {
    border-color: var(--dv-green);
    background: var(--dv-tag-pill-bg);
}

.dvp-stat.is-lead b {
    color: var(--dv-green-accent);
}

.dvp-stat.is-alert {
    border-color: rgba(200, 60, 40, .55);
    background: rgba(200, 60, 40, .07);
}

.dvp-stat.is-alert b {
    color: #c0392b;
}

[data-bs-theme="dark"] .dvp-stat.is-alert b {
    color: #ff8b7a;
}

/* ── Map ────────────────────────────────────────────────────────────────── */
.dvp-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

@media (min-width: 1140px) {
    .dvp-split.has-list {
        grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr);
    }
}

.dvp-map-wrap {
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
}

#map {
    height: 560px;
    background: var(--dv-surface-alt);
}

.dvp-basemap {
    position: absolute;
    z-index: 500;
    right: 10px;
    top: 10px;
    display: flex;
    background: var(--dv-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.dvp-basemap button {
    border: 0;
    background: transparent;
    color: var(--dv-text-muted);
    font-size: .8rem;
    font-weight: 600;
    padding: 6px 12px;
}

.dvp-basemap button[aria-pressed="true"] {
    background: var(--dv-green);
    color: #fff;
}

/* Legend: the colour scale is the only key on the map, so it is stated rather
   than left to be inferred from the dots. */
.dvp-legend {
    position: absolute;
    z-index: 500;
    left: 10px;
    bottom: 22px;
    background: var(--dv-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 8px 11px;
    font-size: .74rem;
    color: var(--dv-text-muted);
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    max-width: calc(100% - 20px);
}

.dvp-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

/* ── Risk list ──────────────────────────────────────────────────────────── */
.dvp-list {
    max-height: 560px;
    overflow-y: auto;
}

.dvp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid var(--bs-border-color);
    text-decoration: none;
    color: inherit;
}

.dvp-row:last-child {
    border-bottom: 0;
}

.dvp-row:hover {
    background: var(--dv-surface-alt);
}

.dvp-row-field {
    font-weight: 600;
    font-size: .95rem;
}

.dvp-row-sub {
    grid-column: 1;
    font-size: .8rem;
    color: var(--dv-text-muted);
}

.dvp-row-risk {
    grid-row: 1 / span 2;
    grid-column: 2;
    text-align: right;
    font-family: var(--dv-font-heading);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.dvp-row-risk small {
    display: block;
    font-family: var(--dv-font-body);
    font-size: .68rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dv-text-muted);
}

/* Reason chips: state as form, not only as words, so the list is scannable
   without reading it. */
.dvp-chip {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.dvp-chip.ok {
    background: var(--dv-tag-pill-bg);
    color: var(--dv-green-accent);
}

.dvp-chip.warn {
    background: rgba(200, 120, 20, .14);
    color: #a9501c;
}

.dvp-chip.crit {
    background: rgba(200, 60, 40, .14);
    color: #a12d1e;
}

[data-bs-theme="dark"] .dvp-chip.warn { color: #f0a860; }
[data-bs-theme="dark"] .dvp-chip.crit { color: #ff8b7a; }

.dvp-section-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-bottom: 1px solid var(--bs-border-color);
}

.dvp-section-head h2 {
    font-family: var(--dv-font-heading);
    font-size: 1rem;
    margin: 0;
}

.dvp-section-head .dvp-reasons {
    font-size: .82rem;
    color: var(--dv-text-muted);
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.dvp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.dvp-table th {
    text-align: left;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--dv-text-muted);
    padding: 11px 14px;
    border-bottom: 1px solid var(--bs-border-color);
}

.dvp-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--bs-border-color);
    /* Top, not middle: a cell carrying a second line would otherwise float its
       neighbours off the baseline they share. */
    vertical-align: top;
}

.dvp-table tr:last-child td {
    border-bottom: 0;
}

.dvp-table tbody tr:hover {
    background: var(--dv-surface-alt);
}

.dvp-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dvp-table a {
    color: var(--dv-text);
    text-decoration: none;
    font-weight: 600;
}

.dvp-table a:hover {
    color: var(--dv-green-accent);
}

/* ── Notices ────────────────────────────────────────────────────────────── */
.dvp-note {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: var(--dv-surface);
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--dv-green);
    border-radius: var(--bs-border-radius);
    padding: 12px 15px;
    font-size: .9rem;
    color: var(--dv-text-muted);
    margin-bottom: 16px;
}

.dvp-note.warn {
    border-left-color: #c8781a;
}

.dvp-note i {
    color: var(--dv-green-accent);
    font-size: 1.15rem;
    line-height: 1.35;
}

.dvp-note.warn i {
    color: #c8781a;
}

.dvp-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--dv-text-muted);
}

.dvp-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
    opacity: .5;
}

/* ── Sign-in ────────────────────────────────────────────────────────────── */
.dvp-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
}

.dvp-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--dv-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-xl);
    padding: 34px 30px;
}

.dvp-auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    font-family: var(--dv-font-heading);
    font-size: 1.2rem;
}

.dvp-auth-brand b {
    color: var(--dv-green-accent);
}

.dvp-auth h1 {
    font-family: var(--dv-font-heading);
    font-size: 1.5rem;
    margin: 0 0 6px;
}

.dvp-auth p.lede {
    color: var(--dv-text-muted);
    font-size: .92rem;
    margin-bottom: 22px;
}

.dvp-auth label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--dv-text-muted);
    margin-bottom: 5px;
    display: block;
}

.dvp-auth .form-control {
    min-height: var(--dv-min-touch);
    border-radius: var(--bs-border-radius);
}

/* A one-time code is read from a phone and typed here — wide tracking so a
   six-digit string does not have to be held in the head between glances. */
.dvp-code {
    font-family: var(--dv-font-heading);
    font-size: 1.35rem;
    letter-spacing: .32em;
    text-align: center;
}

.dvp-auth .btn-primary {
    min-height: var(--dv-min-touch);
    font-weight: 600;
    width: 100%;
}

.dvp-auth-foot {
    margin-top: 18px;
    font-size: .82rem;
    color: var(--dv-text-muted);
    text-align: center;
}

/* ── Print: the invoice is the only thing anyone prints ─────────────────── */
@media print {
    .dvp-bar, .dvp-actions, .no-print { display: none !important; }
    .dvp-main { padding: 0; max-width: none; }
    body.dvp { background: #fff; color: #000; }
    .dvp-card { border-color: #999; }
}

/* Popup: the map is a way into a field, not a dead end that sends you to the
   list to find the same row again. */
.leaflet-popup-content {
    font-family: var(--dv-font-body);
    font-size: .85rem;
    line-height: 1.5;
}

.dvp-popup-link {
    display: inline-block;
    margin-top: 6px;
    font-weight: 700;
    color: var(--dv-green-dark);
    text-decoration: none;
}

.dvp-popup-link:hover { text-decoration: underline; }

/* ── Programme code ─────────────────────────────────────────────────────── */
/* First thing on the enrolment page, because it is the thing a partner takes
   away and uses everywhere else. */
.dvp-code-card {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 18px 22px;
    margin-bottom: 16px;
    border-color: var(--dv-green);
    background: var(--dv-tag-pill-bg);
}

.dvp-code-label {
    display: block;
    font-size: .72rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--dv-text-muted);
}

.dvp-code {
    font-family: var(--dv-font-heading);
    font-size: 2rem;
    letter-spacing: .18em;
    color: var(--dv-green-accent);
    line-height: 1.2;
}

.dvp-code-help {
    flex: 1 1 300px;
    margin: 0;
    font-size: .88rem;
    color: var(--dv-text-muted);
}

/* ── Funnel ─────────────────────────────────────────────────────────────── */
.dvp-funnel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.dvp-step {
    background: var(--dv-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 12px 14px;
}

.dvp-step b {
    display: block;
    font-family: var(--dv-font-heading);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}

.dvp-step span {
    display: block;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dv-text-muted);
}

/* Undeliverable is the one step a partner can act on, by finding a better
   number, so it is marked rather than left to blend in. */
.dvp-step.warn { border-color: rgba(200, 120, 20, .5); }
.dvp-step.warn b { color: #a9501c; }
[data-bs-theme="dark"] .dvp-step.warn b { color: #f0a860; }

/* ── Forms and prose inside cards ───────────────────────────────────────── */
.dvp-card-title {
    font-family: var(--dv-font-heading);
    font-size: 1.05rem;
    margin: 0 0 6px;
}

/* Explanatory copy sits at the point of the decision rather than in a help page,
   so it needs to read as guidance and not as content. */
.dvp-explainer {
    color: var(--dv-text-muted);
    font-size: .88rem;
    line-height: 1.55;
    margin: 0 0 4px;
}

.dvp-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--dv-text-muted);
    margin-bottom: 5px;
}

/* A one-control form in a table cell — a role select, a remove button. Inline so
   the row keeps its height. */
.dvp-inline-form {
    display: inline-flex;
    margin: 0;
}

.dvp-inline-form .form-select {
    min-width: 132px;
}

.dvp-rule {
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    margin: 22px 0 18px;
    opacity: 1;
}

/* ── Invoice ────────────────────────────────────────────────────────────── */
.dvp-doc {
    max-width: 780px;
    padding: 36px 40px;
}

.dvp-doc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.dvp-doc-head .dvp-title {
    font-size: 1.35rem;
    margin-bottom: 8px;
}

.dvp-doc-issuer {
    text-align: right;
    font-size: .85rem;
    color: var(--dv-text-muted);
    line-height: 1.6;
}

.dvp-doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    margin: 26px 0;
    font-size: .9rem;
}

.dvp-doc-meta div span {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--dv-text-muted);
    margin-bottom: 2px;
}

.dvp-doc-total {
    margin: 26px 0 18px;
}

.dvp-doc-total b {
    font-family: var(--dv-font-heading);
    font-size: 1.7rem;
    font-variant-numeric: tabular-nums;
}

.dvp-warn-text {
    color: var(--bs-warning-text-emphasis);
}

/* Bootstrap's .btn has no gap, so an icon sits flush against its label and reads
   as a rendering fault rather than an icon. */
.dvp .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dvp .btn i {
    font-size: 1.1em;
    line-height: 1;
}

/* Facts about the thing on screen — crop, area, season — separated by rules
   rather than chevrons, because a chevron promises a hierarchy these do not have. */
.dvp-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 6px 0 0;
    font-size: .88rem;
    color: var(--dv-text-muted);
}

.dvp-facts span + span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin-right: 10px;
    vertical-align: -1px;
    background: var(--bs-border-color);
}

.dvp-facts a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--bs-border-color);
}

.dvp-facts a:hover {
    color: var(--dv-green-accent);
}

.dvp-facts-warn a {
    color: var(--bs-warning-text-emphasis);
}

.dvp-doc-bank {
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 18px 0;
    font-size: .9rem;
    line-height: 1.6;
}

/* ── Choosing between mutually exclusive panels ─────────────────────────── */
.dvp-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 18px;
}

.dvp-choice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    font-size: .87rem;
    cursor: pointer;
}

.dvp-choice:has(input:checked) {
    border-color: var(--dv-green);
    background: var(--dv-tag-pill-bg);
}

/* Type-to-search, with the matches anchored to the box they came from. A
   <datalist> is the browser's own version of this and would have been free, but
   the operating system draws that popup wherever it likes. */
.dvp-search {
    position: relative;
}

.dvp-search-list {
    position: absolute;
    z-index: 500;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgb(0 0 0 / 35%);
}

.dvp-search-list li {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: .93rem;
}

.dvp-search-list li:hover,
.dvp-search-list li.is-active {
    background: var(--dv-tag-pill-bg);
}

.dvp-draw-map {
    height: 340px;
    border-radius: 10px;
    border: 1px solid var(--bs-border-color);
    overflow: hidden;
}

.dvp-field-error {
    color: var(--bs-danger-text-emphasis);
    font-size: .84rem;
    margin: 6px 0 0;
}

/* A named party on the invoice — an address needs to sit on its own lines
   rather than share a row with single-value metadata. */
.dvp-doc-party {
    flex-basis: 100%;
    line-height: 1.55;
}

@media (min-width: 620px) {
    .dvp-doc-party {
        flex-basis: auto;
        max-width: 46%;
    }
}

/* A form on its own row. Capped, because a text field stretched across a
   desktop looks like an accident and reads worse than a narrow one. */
.dvp-form-card {
    padding: 24px;
    max-width: 560px;
    margin-bottom: 16px;
}

/* ── Money ──────────────────────────────────────────────────────────────── */
/* Not .dvp-stat: those are counts of things, and a sum of money wants more
   weight, tabular figures so columns of digits line up, and a state that says
   whether somebody needs to act today. */
.dvp-money {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.dvp-money-card {
    background: var(--dv-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dvp-money-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--dv-text-muted);
}

.dvp-money-card b {
    font-family: var(--dv-font-heading);
    font-size: 1.85rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.dvp-money-note {
    font-size: .82rem;
    color: var(--dv-text-muted);
}

/* Due, and overdue, are different states: one is a date in the diary and the
   other is a phone call. Colour carries that, and the border carries it again
   for anyone who cannot see the colour. */
.dvp-money-card.is-due {
    border-color: rgba(200, 120, 20, .5);
}

.dvp-money-card.is-due b {
    color: var(--bs-warning-text-emphasis);
}

.dvp-money-card.is-overdue {
    border-color: var(--bs-danger-border-subtle);
    background: var(--bs-danger-bg-subtle);
}

.dvp-money-card.is-overdue b,
.dvp-money-card.is-overdue .dvp-money-label {
    color: var(--bs-danger-text-emphasis);
}

/* A worked sum, so a partner can follow the arithmetic instead of reading a
   paragraph about it. */
.dvp-sum td {
    padding-top: 9px;
    padding-bottom: 9px;
}

.dvp-sum tr:hover td {
    background: none;
}

.dvp-sum-line td {
    border-top: 1px solid var(--bs-border-color);
    font-weight: 600;
}

.dvp-sum-total td {
    border-top: 2px solid var(--dv-green);
    font-weight: 700;
    font-size: 1.02rem;
}

/* Wide tables scroll inside their own card rather than pushing the page
   sideways. */
.dvp-table-wrap {
    overflow-x: auto;
}

/* The one number a payer types into their bank. It sits inside the Pay to block
   because that is where somebody is already looking, and it is emphasised
   because quoting the wrong one is what makes a transfer unreconcilable. */
.dvp-doc-payref {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--bs-border-color);
}

.dvp-doc-payref b {
    font-family: var(--bs-font-monospace);
    font-size: 1.05rem;
    letter-spacing: .04em;
}

.dvp-doc-late {
    color: var(--bs-danger-text-emphasis);
    font-size: .8rem;
}

/* The band a partner is actually in. Tinted rather than bordered, because the
   row sits inside a table where a border would read as a section break. */
.dvp-band-current td {
    background: var(--dv-tag-pill-bg);
    font-weight: 600;
}

.dvp-band-notes {
    padding: 16px 18px 18px;
    border-top: 1px solid var(--bs-border-color);
}

.dvp-band-notes p:last-child {
    margin-bottom: 0;
}

/* ── Choropleth ─────────────────────────────────────────────────────────── */
/* The area's name and total, drawn on the shape. A choropleth that has to be
   clicked to be read is a colour swatch rather than a report. */
.dvp-area-label {
    background: none;
    border: 0;
    box-shadow: none;
    color: #0B2E1F;
    font-family: var(--dv-font-body);
    font-size: .78rem;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .85);
    white-space: nowrap;
}

.dvp-area-label::before {
    display: none;
}

.dvp-legend-title {
    font-weight: 600;
    color: var(--dv-text);
}

.dvp-legend-title::after {
    content: "";
}

/* List price above the charged one, struck through. Muted, because the number
   that matters is the one below it. */
.dvp-doc-list-price {
    color: var(--dv-text-muted);
    font-size: .85rem;
}

.dvp-doc-saving td {
    color: var(--dv-green-accent);
}

/* ── Demographics ───────────────────────────────────────────────────────── */
.dvp-demo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px 34px;
    padding: 4px 18px 18px;
}

.dvp-demo-title {
    font-family: var(--dv-font-heading);
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dv-text-muted);
    margin: 10px 0 10px;
}

/* Label, meter, number. The meter is decoration over the number rather than
   instead of it — somebody reading this into a report needs the figure.
 *
 * Named `dvp-meter`, NOT `dvp-bar`: the header is `.dvp-bar`, and a nine-pixel
 * `height` with `overflow: hidden` meant for a progress track collapsed the whole
 * navigation bar. A prefix is not a namespace. */
.dvp-meter-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    font-size: .88rem;
}

.dvp-meter {
    display: block;
    height: 9px;
    border-radius: 5px;
    background: var(--dv-surface-alt);
    overflow: hidden;
}

.dvp-meter i {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--dv-green);
    min-width: 2px;
}

.dvp-meter-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.dvp-area-split {
    font-size: .72rem;
    opacity: .85;
}

.dvp-popup-muted {
    color: var(--dv-text-muted);
    font-size: .82rem;
}

/* The part of a cohort no published area accounts for. Muted, because it is a
   caveat rather than a finding — but present, because omitting it makes a table
   that does not add up. */
.dvp-row-remainder td {
    color: var(--dv-text-muted);
    font-style: italic;
}

/* ── Season dates ─────────────────────────────────────────────────────────── */
/* Two dates read as one fact, so they sit side by side and wrap together on a
   narrow screen rather than stacking into a column of four form rows. */
.dvp-dates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

/* A season past its end date and still open. Only visible between the end date
   and the nightly sweep — or where that sweep has stopped running, which is
   exactly when somebody needs to see it. */
.dvp-overdue {
    color: var(--bs-warning-text-emphasis);
    font-weight: 600;
}