@font-face {
    font-family: "Inter Tight";
    src: url("/assets/fonts/inter-tight-latin.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
}

@font-face {
    font-family: "Sora";
    src: url("/assets/fonts/sora-800-latin.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
}

/* Tokens. Light is the base; dark is its own set of steps, chosen for the dark surface
   (chart series validated against each surface), applied by system setting unless the
   viewer picked light, or by the viewer's pick. */

:root {
    --logo-bracket: #0f8f80;
    --logo-data: #3d414a;
    color-scheme: light;
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #f0f2f5;
    --surface-3: #e6e9ee;
    --border: #e1e5ea;
    --text: #0f1216;
    --muted: #586170;
    --accent: #0d7f72;
    --accent-ink: #ffffff;
    --accent-soft: #e2f3f0;
    --brand: #0f8f80;
    --series-1: #0f8f80;
    --series-2: #b9791a;
    --series-muted: #c3cad3;
    --grid: rgba(15, 18, 22, 0.07);
    --good: #0b7a6d;
    --good-soft: #e0f3f0;
    --danger: #c43a3a;
    --danger-soft: #fdeaea;
    --shadow: 0 1px 2px rgba(15, 18, 22, 0.04), 0 8px 24px rgba(15, 18, 22, 0.06);
    --shadow-lg: 0 2px 6px rgba(15, 18, 22, 0.05), 0 24px 60px rgba(15, 18, 22, 0.12);
    --dot-grid: rgba(15, 18, 22, 0.09);
    --panel: #ffffff;
    --radius: 14px;
    --sans: "Inter Tight", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --logo-bracket: #2dd4bf;
        --logo-data: #d4d8df;
        --bg: #0a0c0f;
        --surface: #12151a;
        --surface-2: #181c22;
        --surface-3: #20252d;
        --border: #232830;
        --text: #f2f4f7;
        --muted: #98a1ae;
        --accent: #2dd4bf;
        --accent-ink: #0a0c0f;
        --accent-soft: rgba(45, 212, 191, 0.12);
        --brand: #2dd4bf;
        --series-1: #2dd4bf;
        --series-2: #e8b24a;
        --series-muted: #3b424c;
        --grid: rgba(242, 244, 247, 0.07);
        --good: #2dd4bf;
        --good-soft: rgba(45, 212, 191, 0.12);
        --danger: #ff8a8a;
        --danger-soft: rgba(255, 122, 122, 0.12);
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
        --dot-grid: rgba(242, 244, 247, 0.07);
        --panel: #0a0c0f;
    }
}

:root[data-theme="dark"],
.dp-dark {
    color-scheme: dark;
    --logo-bracket: #2dd4bf;
    --logo-data: #d4d8df;
    --bg: #0a0c0f;
    --surface: #12151a;
    --surface-2: #181c22;
    --surface-3: #20252d;
    --border: #232830;
    --text: #f2f4f7;
    --muted: #98a1ae;
    --accent: #2dd4bf;
    --accent-ink: #0a0c0f;
    --accent-soft: rgba(45, 212, 191, 0.12);
    --brand: #2dd4bf;
    --series-1: #2dd4bf;
    --series-2: #e8b24a;
    --series-muted: #3b424c;
    --grid: rgba(242, 244, 247, 0.07);
    --good: #2dd4bf;
    --good-soft: rgba(45, 212, 191, 0.12);
    --danger: #ff8a8a;
    --danger-soft: rgba(255, 122, 122, 0.12);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
    --dot-grid: rgba(242, 244, 247, 0.07);
    --panel: #0a0c0f;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1,
h2,
p {
    margin: 0;
}

h1,
h2 {
    letter-spacing: -0.02em;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dp-icon {
    flex: none;
}

.dp-muted {
    color: var(--muted);
}

.dp-offscreen {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.dp-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.dp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dp-nowrap {
    white-space: nowrap;
}

.dp-truncate {
    max-width: 165px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-empty {
    padding: 28px 0;
    color: var(--muted);
    text-align: center;
}

.dp-wordmark {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}

.dp-wordmark svg {
    display: block;
    height: 1em;
    width: auto;
    overflow: visible;
}

.dp-logo-br {
    fill: var(--logo-bracket);
}

.dp-logo-data {
    fill: var(--logo-data);
}

.dp-logo-part {
    fill: var(--text);
}

.dp-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
}

.dp-key-1 {
    background: var(--series-1);
}

.dp-key-2 {
    background: var(--series-2);
}

.dp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.dp-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    margin-right: 6px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dp-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.dp-status-good {
    background: var(--good-soft);
    color: var(--good);
}

.dp-status-good .dp-dot {
    animation: dp-pulse 2s ease-in-out infinite;
}

.dp-status-idle {
    background: var(--surface-2);
    color: var(--muted);
}

@keyframes dp-pulse {
    50% {
        opacity: 0.35;
    }
}

/* Forms */

.dp-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dp-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
}

.dp-field input {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: 500 15px var(--sans);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dp-field input::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

.dp-field input:hover {
    border-color: var(--surface-3);
}

.dp-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.dp-field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.dp-quiet-link {
    color: var(--muted);
    font-size: 14px;
}

.dp-quiet-link:hover {
    color: var(--text);
}

.dp-hint {
    color: var(--muted);
    font-weight: 500;
}

.dp-button-link {
    display: grid;
    place-items: center;
    margin-top: 10px;
    text-decoration: none;
}

.dp-button-link:hover {
    text-decoration: none;
}

.dp-back {
    align-self: center;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
}

.dp-input-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}

.dp-input-wrap input {
    padding-right: 52px;
}

.dp-reveal {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0 12px 12px 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.dp-reveal:hover {
    color: var(--text);
}

.dp-reveal .dp-icon {
    width: 18px;
    height: 18px;
}

.dp-reveal-hide,
.dp-reveal[aria-pressed="true"] .dp-reveal-show {
    display: none;
}

.dp-reveal[aria-pressed="true"] .dp-reveal-hide {
    display: contents;
}

.dp-reveal-show {
    display: contents;
}

/* Browsers paint autofilled fields their own yellow or blue; this keeps them on theme. */
.dp-field input:-webkit-autofill,
.dp-field input:-webkit-autofill:hover,
.dp-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    box-shadow: 0 0 0 1000px var(--surface) inset;
    transition: background-color 9999s;
}

.dp-field input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--surface) inset, 0 0 0 4px var(--accent-soft);
}

.dp-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    font-size: 14px;
    color: var(--muted);
}

.dp-check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--surface-3);
    border-radius: 5px;
    background: var(--surface);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.dp-check input:hover {
    border-color: var(--muted);
}

.dp-check input:checked {
    border-color: var(--accent);
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a0c0f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.dp-check input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dp-button {
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--accent);
    color: var(--accent-ink);
    font: 700 15px var(--sans);
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 0.12s, filter 0.15s;
}

.dp-button:hover {
    filter: brightness(1.07);
}

.dp-button:active {
    transform: translateY(1px);
}

.dp-button:disabled {
    cursor: progress;
    opacity: 0.75;
}

.dp-flash {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

.dp-flash-error {
    background: var(--danger-soft);
    color: var(--danger);
}

.dp-flash-success {
    background: var(--good-soft);
    color: var(--good);
}

.dp-review-bar,
.dp-announcement {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: var(--accent-soft);
    font-size: 14px;
}

.dp-review-bar {
    flex-wrap: wrap;
    justify-content: space-between;
}

.dp-announcement .dp-icon {
    flex: none;
    color: var(--accent);
}

/* Sign in */

.dp-auth-shell {
    display: flex;
    min-height: 100vh;
}

.dp-auth-visual {
    position: relative;
    overflow: hidden;
    flex: 1 1 56%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px;
    background: #06080a;
    color: var(--text);
    border-left: 1px solid var(--border);
}

/* Dot grid fading toward the edges, and a soft teal light behind the spark. */
.dp-auth-visual::before,
.dp-auth-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dp-auth-visual::before {
    background-image: radial-gradient(var(--dot-grid) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 46%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 46%, #000 20%, transparent 75%);
}

.dp-auth-visual::after {
    background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 38%);
}

.dp-auth-visual-inner {
    position: relative;
    z-index: 1;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    text-align: center;
}

.dp-auth-headline {
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

.dp-auth-spark {
    width: 84px;
    height: 84px;
    fill: var(--brand);
    filter: drop-shadow(0 0 22px color-mix(in srgb, var(--brand) 50%, transparent));
    animation: dp-twinkle 5.5s ease-in-out 1.2s infinite;
}

@keyframes dp-twinkle {
    0%,
    78%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 22px color-mix(in srgb, var(--brand) 50%, transparent));
    }

    86% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 40px color-mix(in srgb, var(--brand) 85%, transparent));
    }

    92% {
        transform: scale(0.98);
    }
}

.dp-auth-panel {
    flex: 1 1 44%;
    display: flex;
    flex-direction: column;
    padding: 28px clamp(20px, 5vw, 64px);
    background: var(--panel);
}

.dp-auth-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dp-auth-brand {
    font-size: 26px;
    line-height: 1;
}

.dp-auth-form {
    width: 100%;
    max-width: 380px;
    margin: auto;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dp-auth-form h1 {
    font-size: 32px;
    font-weight: 750;
    letter-spacing: -0.03em;
}

.dp-auth-form h1 {
    margin-bottom: 14px;
}

.dp-auth-form .dp-button {
    margin-top: 6px;
}

.dp-auth-foot {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

@media (max-width: 960px) {
    .dp-auth-visual {
        display: none;
    }
}

/* App shell */

.dp-app {
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
}

.dp-sidebar {
    position: sticky;
    top: 0;
    flex: 0 0 248px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px 12px 0;
    background: var(--surface);
    color: var(--text);
    border-right: 1px solid var(--border);
}

.dp-sidebar-brand {
    padding: 0 12px;
    font-size: 24px;
}

.dp-sidebar-brand:hover {
    text-decoration: none;
}

.dp-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dp-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--muted);
    font-weight: 600;
}

.dp-nav a:hover {
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}

.dp-nav a[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--text);
}

.dp-nav a[aria-current="page"] .dp-icon {
    color: var(--accent);
}

/* Account menu, lifted from MER: avatar trigger at the foot, menu opening upward. */

.dp-sidebar-foot {
    position: relative;
    margin: 0 -12px;
    padding: 8px;
    border-top: 1px solid var(--border);
}

.dp-account-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--text);
    font: 600 14px var(--sans);
    text-align: left;
    cursor: pointer;
}

.dp-account-trigger:hover,
.dp-account-trigger[aria-expanded="true"] {
    background: var(--surface-2);
}

.dp-avatar {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.dp-account-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-account-chevron {
    display: flex;
    color: var(--muted);
    transition: transform 0.15s ease;
}

.dp-account-trigger[aria-expanded="true"] .dp-account-chevron {
    transform: rotate(180deg);
}

.dp-account-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 8px;
    right: 8px;
    z-index: 20;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.dp-account-menu[hidden] {
    display: none;
}

.dp-account-menu-header {
    padding: 8px 10px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.dp-account-menu-name {
    font-size: 14px;
    font-weight: 650;
}

.dp-account-menu-email {
    margin-top: 2px;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-theme-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.dp-theme-opt {
    display: grid;
    place-items: center;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.dp-theme-opt .dp-icon {
    width: 17px;
    height: 17px;
}

.dp-theme-opt:hover {
    background: var(--surface-3);
    color: var(--text);
}

.dp-theme-opt.is-active {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: var(--accent-soft);
    color: var(--accent);
}

.dp-signout {
    margin: 0;
}

.dp-signout button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    font: 600 14px var(--sans);
    text-align: left;
    cursor: pointer;
}

.dp-signout button:hover {
    background: var(--surface-3);
    color: var(--text);
}

.dp-main {
    flex: 999 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px clamp(16px, 3.5vw, 44px) 56px;
}

.dp-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dp-page-header h1 {
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -0.03em;
}

.dp-range {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.dp-range a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
}

.dp-range a:hover {
    color: var(--text);
    text-decoration: none;
}

.dp-range a[aria-current="true"] {
    background: var(--text);
    color: var(--bg);
}

/* Dashboard */

.dp-hero,
.dp-stat,
.dp-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.dp-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    padding: 28px 30px;
}

.dp-hero-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dp-hero-value {
    font-size: clamp(48px, 6vw, 68px);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.045em;
}

.dp-week {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    padding: 18px 22px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--good);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.dp-week-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dp-week-value {
    font-size: 32px;
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.dp-week-side {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.dp-hero-sub {
    color: var(--muted);
    font-weight: 500;
}

.dp-hero-side {
    flex: 0 1 460px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dp-breakdown {
    display: flex;
    gap: 2px;
    height: 14px;
}

.dp-seg {
    min-width: 4px;
}

.dp-seg:first-child {
    border-radius: 4px 0 0 4px;
}

.dp-seg:last-child {
    border-radius: 0 4px 4px 0;
}

.dp-seg-costs,
.dp-key-costs {
    background: var(--series-muted);
}

.dp-seg-partners {
    background: var(--series-2);
}

.dp-seg-yours {
    background: var(--series-1);
}

.dp-breakdown-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.dp-breakdown-legend div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dp-breakdown-legend dt {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--muted);
}

.dp-breakdown-legend dd {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.dp-hero-meta {
    color: var(--muted);
    font-size: 13px;
}

.dp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.dp-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
}

.dp-spark-line {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 96px;
    height: 28px;
    overflow: visible;
}

.dp-spark-line polyline {
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.dp-spark-line circle {
    fill: var(--series-1);
    stroke: var(--surface);
    stroke-width: 2;
}

.dp-stat-value {
    font-size: 32px;
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.dp-stat-note {
    font-size: 13px;
    color: var(--muted);
}

.dp-stat-note strong {
    color: var(--good);
}

.dp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.dp-span-2 {
    grid-column: span 2;
}

.dp-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.dp-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 20px 22px;
}

.dp-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.dp-card-header h2 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.dp-card-header .dp-muted {
    font-size: 13px;
}

.dp-card-figure {
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -0.03em;
}

.dp-chart {
    position: relative;
    height: var(--h, 240px);
}

.dp-table-view summary {
    width: fit-content;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.dp-table-view summary:hover {
    color: var(--text);
}

.dp-table-view .dp-table-wrap {
    max-height: 260px;
    margin-top: 10px;
}

.dp-table-wrap {
    overflow: auto;
}

.dp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.dp-table th {
    position: sticky;
    top: 0;
    padding: 0 8px 10px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    text-align: left;
    white-space: nowrap;
}

.dp-table td {
    padding: 11px 8px;
    border-top: 1px solid var(--border);
}

.dp-table th:first-child,
.dp-table td:first-child {
    padding-left: 0;
}

.dp-table th:last-child,
.dp-table td:last-child {
    padding-right: 0;
}

.dp-table tbody tr:hover td {
    background: var(--surface-2);
}

.dp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: -4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--muted);
}

.dp-legend li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dp-feed,
.dp-owed,
.dp-rank {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dp-feed li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.dp-feed li:first-child {
    border-top: 0;
    padding-top: 0;
}

.dp-feed-name,
.dp-rank-name {
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-weight: 600;
    line-height: 1.35;
}

.dp-feed-name,
.dp-rank-name {
    overflow: hidden;
}

.dp-feed-name small,
.dp-rank-name small {
    display: flex;
    align-items: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-sources {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: auto 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.dp-sources dd {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}

.dp-sources strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.dp-feed-time {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.dp-owed {
    gap: 18px;
}

.dp-owed li {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-owed-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}

.dp-owed-row.dp-muted {
    font-size: 12px;
}

.dp-invoices {
    display: flex;
    flex-direction: column;
    margin: 4px 0 0;
    padding: 4px 0 0;
    list-style: none;
    border-top: 1px solid var(--border);
}

.dp-invoices li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 0;
}

.dp-invoice-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}

.dp-invoice-amount small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.dp-meter {
    height: 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    overflow: hidden;
}

.dp-meter span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

.dp-rank {
    counter-reset: rank;
}

.dp-rank li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
    counter-increment: rank;
}

.dp-rank li::before {
    content: counter(rank);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dp-rank li:first-child {
    border-top: 0;
    padding-top: 0;
}

.dp-rank-name {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dp-rank-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1180px) {
    .dp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 760px) {
    .dp-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dp-span-2 {
        grid-column: auto;
    }

    /* The sidebar becomes a top bar: brand, nav, then the avatar on its own. */
    .dp-sidebar {
        z-index: 10;
        flex: 1 1 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .dp-sidebar-brand {
        padding: 0 4px;
        font-size: 18px;
    }

    .dp-nav {
        flex-direction: row;
        overflow: visible;
    }

    .dp-nav a {
        min-height: 40px;
    }

    .dp-sidebar-foot {
        margin: 0;
        padding: 0;
        border-top: 0;
    }

    .dp-account-trigger {
        min-height: 44px;
        padding: 6px;
    }

    .dp-account-name,
    .dp-account-chevron {
        display: none;
    }

    .dp-account-menu {
        top: calc(100% + 8px);
        bottom: auto;
        left: auto;
        right: 0;
        width: 260px;
    }

    .dp-range {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .dp-range a {
        flex: 1 0 auto;
        justify-content: center;
        padding: 0 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

.dp-auth > .dp-auth-panel {
    min-height: 100vh;
}

/* ---- Back-office components, shared by every module ---- */

.dp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: 650 14px var(--sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.dp-btn:hover {
    text-decoration: none;
}

.dp-btn .dp-icon {
    width: 17px;
    height: 17px;
}

.dp-btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
}

.dp-btn-primary:hover {
    filter: brightness(1.07);
}

.dp-btn-secondary {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}

.dp-btn-secondary:hover {
    background: var(--surface-2);
}

.dp-btn-ghost {
    background: none;
    color: var(--muted);
}

.dp-btn-ghost:hover {
    background: var(--surface-2);
    color: var(--text);
}

.dp-btn-danger {
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    background: none;
    color: var(--danger);
}

.dp-btn-danger:hover {
    background: var(--danger-soft);
}

.dp-btn-icon {
    width: 32px;
    padding: 0;
}

.dp-btn-icon[aria-label^="Delete"]:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

.dp-btn-sm {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 8px;
}

.dp-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.dp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dp-inline-form {
    display: inline;
    margin: 0;
}

/* Row actions stay on one line so a table row keeps its height. */
.dp-table .dp-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
}

.dp-table .dp-actions form {
    margin: 0;
}

.dp-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.dp-badge-good {
    background: var(--good-soft);
    color: var(--good);
}

.dp-badge-warn {
    background: color-mix(in srgb, #f5a524 16%, transparent);
    color: #c27c0e;
}

:root[data-theme="dark"] .dp-badge-warn,
.dp-dark .dp-badge-warn {
    color: #f5b94a;
}

.dp-badge-bad {
    background: var(--danger-soft);
    color: var(--danger);
}

.dp-badge-idle {
    background: var(--surface-2);
    color: var(--muted);
}

/* Filters sit in one row above the content they scope. */
.dp-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.dp-filters input,
.dp-filters select {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: 500 14px var(--sans);
}

.dp-filters input[type="search"] {
    min-width: 260px;
}

/* Two-column form grid that collapses on a phone. */
.dp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dp-form-grid .dp-span-full {
    grid-column: 1 / -1;
}

.dp-field select,
.dp-field textarea {
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: 500 15px var(--sans);
}

.dp-field textarea {
    min-height: 96px;
    resize: vertical;
}

.dp-field select:focus,
.dp-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.dp-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

/* Native <dialog>: open with data-dialog-open="id", close with data-dialog-close. */
.dp-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.dp-dialog::backdrop {
    background: rgba(5, 7, 10, 0.6);
    backdrop-filter: blur(2px);
}

.dp-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
}

.dp-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.dp-dialog-head h2 {
    font-size: 19px;
}

.dp-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.dp-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.dp-pagination span {
    margin-right: auto;
}

.dp-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
}

.dp-tabs a {
    padding: 10px 14px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-weight: 650;
}

.dp-tabs a:hover {
    color: var(--text);
    text-decoration: none;
}

.dp-tabs a[aria-current="page"] {
    border-bottom-color: var(--accent);
    color: var(--text);
}

/* Label and value pairs for a record's details. */
.dp-details {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px 24px;
    margin: 0;
}

.dp-details dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.dp-details dd {
    margin: 2px 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dp-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    border: 1.5px dashed var(--surface-3);
    border-radius: 14px;
    color: var(--muted);
    text-align: center;
    cursor: pointer;
}

.dp-dropzone:hover,
.dp-dropzone.is-over {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text);
}

.dp-dropzone input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.dp-mono {
    font-family: var(--mono);
    font-size: 13px;
}

.dp-code {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    font: 13px/1.6 var(--mono);
    white-space: pre;
}

@media (max-width: 760px) {
    .dp-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dp-filters input[type="search"] {
        min-width: 0;
        width: 100%;
    }
}

/* ---- people ---- */

.dp-people-danger {
    border-top: 1px solid var(--border);
}

.dp-field[hidden] {
    display: none;
}

/* ---- money ---- */

.dp-table tfoot td {
    border-top: 2px solid var(--border);
    font-weight: 700;
}

.dp-grid > .dp-span-full {
    grid-column: 1 / -1;
}

.dp-owed-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
    font-size: 13px;
}

.dp-owed-progress .dp-meter {
    flex: 1;
}

/* The printable invoice: always light, no app chrome. */
.dp-print {
    background: var(--surface-2);
}

.dp-print-bar {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    max-width: 880px;
    margin: 24px auto 0;
    padding: 0 16px;
}

.dp-print-sheet {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 880px;
    margin: 16px auto 48px;
    padding: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.dp-print-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.dp-print-head .dp-wordmark {
    font-size: 22px;
}

.dp-print-title {
    text-align: right;
}

.dp-print-title h1 {
    font-size: 28px;
}

.dp-print-sheet .dp-table {
    font-size: 13px;
}

.dp-print-due {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.dp-print-due strong {
    font-size: 30px;
    letter-spacing: -0.03em;
}

@media (max-width: 760px) {
    .dp-print-sheet {
        padding: 24px 16px;
        overflow-x: auto;
    }
}

@media print {
    .dp-print {
        background: none;
    }

    .dp-print-bar {
        display: none;
    }

    .dp-print-sheet {
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .dp-print-sheet .dp-table th {
        position: static;
    }
}

/* Dropdowns drop the browser's own styling (WebKit ignores height otherwise) and draw a chevron. */
.dp-field select,
.dp-filters select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2398a1ae' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-size: 18px;
    background-repeat: no-repeat;
}

.dp-field select {
    height: 48px;
}

/* ---- lists ---- */

.dp-lists-stats {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.dp-lists-stats .dp-stat-value {
    font-size: 28px;
    white-space: nowrap;
}

.dp-lists-meta {
    margin-top: -12px;
    font-size: 14px;
}

.dp-lists-meta .dp-badge {
    vertical-align: middle;
}

.dp-lists-name {
    min-width: 180px;
    max-width: 260px;
}

.dp-lists-name .dp-lists-error {
    color: var(--danger);
}

.dp-lists-tabs {
    overflow-x: auto;
}

.dp-lists-tabs a {
    white-space: nowrap;
}

.dp-lists-row-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.dp-lists-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.dp-lists-fieldset legend {
    margin-bottom: 7px;
    padding: 0;
}

.dp-lists-rules {
    grid-template-columns: minmax(0, 1fr);
}

.dp-lists-rules dd {
    font-weight: 500;
    line-height: 1.5;
}

.dp-lists-newkey {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: var(--accent-soft);
}

.dp-lists-newkey .dp-code {
    background: var(--surface);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dp-lists-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dp-lists-code-head h3 {
    font-size: 14px;
    font-weight: 700;
}

.dp-lists-danger {
    display: flex;
    justify-content: flex-end;
}

.dp-lists-checks {
    min-width: 140px;
    font-size: 13px;
}

/* ---- impersonation ---- */
.dp-imp-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 32px;
    padding: 0 1rem;
    background: color-mix(in srgb, var(--accent) 14%, var(--bg));
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

.dp-imp-bar .dp-icon {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--accent);
    animation: dp-imp-eye-pulse 2s infinite;
}

@keyframes dp-imp-eye-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .dp-imp-bar .dp-icon {
        animation: none;
    }
}

.dp-imp-bar strong {
    color: var(--accent);
    font-weight: 650;
}

.dp-imp-bar form {
    margin: 0;
}

.dp-imp-exit {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    text-decoration: underline;
    cursor: pointer;
}

.dp-imp-exit:hover {
    color: var(--accent);
}

body:has(.dp-imp-bar) .dp-sidebar {
    top: 32px;
    height: calc(100vh - 32px);
}

/* ---- toasts ----
   Built by assets/js/toast.js out of the layout's .dp-flash[data-toast], so
   nothing here may hide anything: a rule only JavaScript can undo would take
   the message away wherever the script did not run. */
.dp-toast-region {
    position: fixed;
    z-index: 9500;
    left: calc(50% + 124px);
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(368px, calc(100vw - 40px));
    pointer-events: none;
}

.dp-toast {
    pointer-events: auto;
    max-width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    box-shadow: var(--shadow-lg);
    /* An animation, not a transition from opacity 0: a background tab that
       never runs it must still hold a visible toast. */
    animation: dp-toast-in 0.2s ease both;
}

/* Color lands on the surface and the icon, never on the text. */
.dp-toast--ok {
    border-color: color-mix(in srgb, var(--good) 35%, transparent);
    background: linear-gradient(var(--good-soft), var(--good-soft)), var(--surface);
}

.dp-toast--error {
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    background: linear-gradient(var(--danger-soft), var(--danger-soft)), var(--surface);
}

.dp-toast__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.dp-toast__icon svg {
    width: 14px;
    height: 14px;
}

.dp-toast--ok .dp-toast__icon {
    background: var(--good-soft);
    color: var(--good);
}

.dp-toast--error .dp-toast__icon {
    background: var(--danger-soft);
    color: var(--danger);
}

.dp-toast__body {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dp-toast__close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0 -2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dp-toast__close svg {
    width: 15px;
    height: 15px;
}

.dp-toast--error .dp-toast__close,
.dp-toast__close:hover {
    background: var(--surface-2);
    color: var(--text);
}

.dp-toast__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}

@keyframes dp-toast-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes dp-toast-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(6px) scale(0.98); }
}

.dp-toast.is-out {
    animation: dp-toast-out 0.18s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .dp-toast { animation: none; }
    .dp-toast.is-out { animation: none; opacity: 0; }
}

@media (max-width: 760px) {
    .dp-toast-region {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
        transform: none;
        align-items: stretch;
    }

    .dp-toast__close {
        width: 44px;
        height: 44px;
        margin: -8px -8px 0 0;
    }
}

.dp-quality {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* ---- records by state ---- */

/* Five shades of the accent over a neutral tile; the busiest state is always the darkest. Tile
   text flips from --text to --accent-ink where it reads better, and that point differs by theme. */
.dp-statemap {
    --map-0: var(--surface-2);
    --map-1: color-mix(in srgb, var(--accent) 20%, var(--surface-3));
    --map-2: color-mix(in srgb, var(--accent) 38%, var(--surface-3));
    --map-3: color-mix(in srgb, var(--accent) 56%, var(--surface-3));
    --map-4: color-mix(in srgb, var(--accent) 76%, var(--surface-3));
    --map-5: var(--accent);
    --map-t3: var(--text);
    --map-t4: var(--text);
    --map-t5: var(--accent-ink);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dp-statemap {
        --map-t3: var(--accent-ink);
        --map-t4: var(--accent-ink);
    }
}

:root[data-theme="dark"] .dp-statemap,
.dp-dark .dp-statemap {
    --map-t3: var(--accent-ink);
    --map-t4: var(--accent-ink);
}

.dp-statemap-body {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr);
    gap: 28px;
    align-items: start;
}

.dp-statemap-figure,
.dp-statemap-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.dp-statemap-figure svg {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
}

.dp-statemap-side h3 {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dp-map-tile {
    cursor: default;
    outline: none;
}

.dp-map-tile rect {
    fill: var(--map-0);
    stroke: var(--border);
    stroke-width: 1;
}

.dp-map-tile text {
    fill: var(--muted);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 650;
    text-anchor: middle;
    pointer-events: none;
}

.dp-map-l1 rect,
.dp-map-swatch.dp-map-l1 { background: var(--map-1); fill: var(--map-1); }
.dp-map-l2 rect,
.dp-map-swatch.dp-map-l2 { background: var(--map-2); fill: var(--map-2); }
.dp-map-l3 rect,
.dp-map-swatch.dp-map-l3 { background: var(--map-3); fill: var(--map-3); }
.dp-map-l4 rect,
.dp-map-swatch.dp-map-l4 { background: var(--map-4); fill: var(--map-4); }
.dp-map-l5 rect,
.dp-map-swatch.dp-map-l5 { background: var(--map-5); fill: var(--map-5); }

.dp-map-l1 text,
.dp-map-l2 text { fill: var(--text); }
.dp-map-l3 text { fill: var(--map-t3); }
.dp-map-l4 text { fill: var(--map-t4); }
.dp-map-l5 text { fill: var(--map-t5); }

.dp-map-tile:hover rect,
.dp-map-tile.is-active rect,
.dp-map-tile:focus-visible rect {
    stroke: var(--text);
    stroke-width: 2.5;
}

.dp-map-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--map-0);
    flex: none;
}

.dp-statemap-readout {
    min-height: 22px;
    font-size: 14px;
    font-weight: 600;
}

.dp-statemap-legend {
    margin: 0;
}

.dp-statemap-none {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding-top: 11px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.dp-statemap-none strong {
    color: var(--text);
}

.dp-statemap-notes {
    font-size: 13px;
}

.dp-statemap .dp-card-figure {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .dp-statemap-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .dp-statemap .dp-card-figure {
        font-size: 18px;
    }

    .dp-map-tile text {
        font-size: 16px;
    }
}