/* ==========================================================================
   Dashboard design "Today first" (key: counter)
   --------------------------------------------------------------------------
   Built by assets/js/app/dash-counter.js; renderDashboard wraps the page in
   .dashx.dashx-counter, so every rule here is scoped to it (the picker
   thumbnail to .dshp-t-counter). Layout follows the CONTAINER width (.tdc):
   one column below 760px (wide-phone tweaks from 420px, so a 768px tablet
   with the sidebar gets them), a 12-column paired
   grid from 760px; without container queries it stays one column.
   Primary text is true black; greys never lighter than #475569; the green
   Today card is the page's only coloured surface. No loops, no marquees.
   ========================================================================== */

.dashx-counter {
    --tdc-ink: #000;
    --tdc-ink-2: #334155;
    --tdc-ink-3: #475569;
    --tdc-icon: #64748b;
    --tdc-line: #e7ebf1;
    --tdc-hair: #eef1f5;
    --tdc-soft: #f6f8fb;
    --tdc-track: #eef2f6;
    --tdc-g1: #065f46;
    --tdc-g2: #064e3b;
    --tdc-g3: #05684c;
    --tdc-accent: #047857;
    --tdc-up: #047857;
    --tdc-down: #dc2626;
    --tdc-focus: #059669;
    color: var(--tdc-ink);
}
.dashx-counter .tdc { container: tdc / inline-size; min-width: 0; }
.dashx-counter .tdc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dashx-counter .tdc-grid > * { min-width: 0; }

/* Zero-specificity resets so every class rule below wins. */
:where(.dashx-counter .tdc) :where(button) {
    -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
:where(.dashx-counter .tdc) :where(h2, p) { margin: 0; }
.dashx-counter .tdc :where(button, [tabindex="0"]):focus-visible { outline: 2px solid var(--tdc-focus); outline-offset: 2px; }

/* The period button and "Change period" open the drawer; no floating filter button. */
.dashx-counter .filter-fab { display: none !important; }

/* ---- Cards ------------------------------------------------------------------ */
.dashx-counter .tdc-card {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: #fff; border: 1px solid var(--tdc-line); border-radius: 16px; padding: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.dashx-counter .tdc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dashx-counter .tdc-head-copy { min-width: 0; }
.dashx-counter .tdc-title { font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--tdc-ink); }
.dashx-counter .tdc-sub { margin-top: 2px; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--tdc-ink-3); text-wrap: pretty; }
.dashx-counter .tdc-link {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
    min-height: 44px; margin: -10px -8px -10px 0; padding: 0 8px; border-radius: 10px;
    font-size: 13px; font-weight: 600; color: var(--tdc-ink-2); transition: background .15s ease, color .15s ease;
}
.dashx-counter .tdc-link i { font-size: 13px; }
.dashx-counter .tdc-link:hover { background: var(--tdc-soft); color: var(--tdc-ink); }

/* Rows: full-width buttons with hairlines between them. */
.dashx-counter .tdc-list { display: flex; flex-direction: column; }
.dashx-counter .tdc-row {
    position: relative; display: grid; align-items: center; column-gap: 12px;
    margin: 0 -8px; padding: 8px; min-height: 56px; border-radius: 12px; text-align: left;
    transition: background .15s ease;
}
.dashx-counter .tdc-row + .tdc-row::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 1px; background: var(--tdc-hair); }
.dashx-counter button.tdc-row:hover { background: var(--tdc-soft); }
.dashx-counter button.tdc-row:hover::before,
.dashx-counter button.tdc-row:hover + .tdc-row::before { opacity: 0; }
.dashx-counter .tdc-row:focus-visible { outline-offset: -2px; }
.dashx-counter .tdc-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dashx-counter .tdc-row-t { min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--tdc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashx-counter .tdc-row-s { min-width: 0; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--tdc-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashx-counter .tdc-amt { flex-shrink: 0; white-space: nowrap; font-size: 13.5px; font-weight: 700; color: var(--tdc-ink); font-variant-numeric: tabular-nums; text-align: right; }
.dashx-counter .tdc-chev { font-size: 12px; color: var(--tdc-icon); }
.dashx-counter .tdc-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dashx-counter .tdc-dot.is-sm { width: 8px; height: 8px; border-radius: 3px; }
.dashx-counter .tdc-meter { display: block; height: 6px; border-radius: 999px; background: var(--tdc-track); overflow: hidden; }
.dashx-counter .tdc-meter > i { display: block; height: 100%; border-radius: inherit; background: #059669; }

/* Phone-only bits: the row caps and their counts (shown by the W < 600 query). */
.dashx-counter .tdc-ph,
.dashx-counter .tdc-more.tdc-ph-btn { display: none; }

/* Text buttons */
.dashx-counter .tdc-more {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
    margin: 4px -8px -10px; padding: 0 8px; border-radius: 10px;
    font-size: 13px; font-weight: 600; color: var(--tdc-accent);
}
.dashx-counter .tdc-more:hover, .dashx-counter .tdc-textbtn:hover, .dashx-counter .tdc-textlink:hover { background: #ecfdf5; }

/* Empty states */
.dashx-counter .tdc-empty {
    flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 14px 8px 8px; text-align: center;
}
.dashx-counter .tdc-empty-ic {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
    background: #f1f5f9; color: var(--tdc-icon); font-size: 18px;
}
.dashx-counter .tdc-empty-copy { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dashx-counter .tdc-empty b { font-size: 13.5px; font-weight: 700; color: var(--tdc-ink); }
.dashx-counter .tdc-empty-copy > span { font-size: 12.5px; font-weight: 500; color: var(--tdc-ink-3); }
.dashx-counter .tdc-outline {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 0 18px;
    border-radius: 12px; background: #fff; border: 1px solid #d6dde6; box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    font-size: 13px; font-weight: 600; color: var(--tdc-accent);
}
.dashx-counter .tdc-outline:hover { border-color: #94a3b8; }

/* ---- Header (no card) --------------------------------------------------------- */
.dashx-counter .tdc-top { display: flex; align-items: center; gap: 4px; min-height: 48px; }
.dashx-counter .tdc-id { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 14px; }
.dashx-counter .tdc-logo {
    position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; overflow: hidden;
    display: grid; place-items: center; background: #ecfdf5; border: 1px solid var(--tdc-line);
}
.dashx-counter .tdc-logo .tdc-ini { font-size: 17px; font-weight: 700; color: var(--tdc-accent); }
.dashx-counter .tdc-logo img,
.dashx-counter .tdc-blogo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.dashx-counter .tdc-logo.is-icon i { font-size: 18px; color: var(--tdc-accent); }
.dashx-counter .tdc-id-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dashx-counter .tdc-name { display: flex; align-items: center; gap: 3px; min-width: 0; }
.dashx-counter .tdc-name-t { min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--tdc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashx-counter .tdc-name i { flex-shrink: 0; font-size: 12px; color: var(--tdc-ink-3); }
.dashx-counter .tdc-greet { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--tdc-ink-3); }
.dashx-counter .tdc-greet > i { flex-shrink: 0; font-size: 12px; }
.dashx-counter .tdc-greet-t {
    --tdc-gl: 17px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline;
    height: var(--tdc-gl); line-height: var(--tdc-gl); overflow: hidden;
}
.dashx-counter .tdc-greet-a { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashx-counter .tdc-greet-n,
.dashx-counter .tdc-greet-d { flex: 0 0 auto; white-space: nowrap; }
/* The date shows here from W 600; below that it rides on the Today card. */
.dashx-counter .tdc-greet-d { display: none; }
.dashx-counter .tdc-top-side { flex-shrink: 0; display: flex; align-items: center; gap: 4px; }

.dashx-counter .tdc-plan {
    position: relative; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 8px;
    border-radius: 999px; background: #fff; border: 1px solid var(--tdc-line); white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .15s ease;
}
.dashx-counter .tdc-plan::after { content: ""; position: absolute; inset: -6px -4px; }
.dashx-counter .tdc-plan:hover { border-color: #94a3b8; }
.dashx-counter .tdc-plan i { font-size: 13px; color: var(--tdc-accent); }
.dashx-counter .tdc-plan-n { display: none; font-size: 12.5px; font-weight: 600; color: var(--tdc-ink); max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.dashx-counter .tdc-plan-d { font-size: 12px; font-weight: 600; color: var(--tdc-ink-3); }
.dashx-counter .tdc-plan.is-urgent { background: #fef2f2; border-color: #fecaca; }
.dashx-counter .tdc-plan.is-urgent i,
.dashx-counter .tdc-plan.is-urgent .tdc-plan-n,
.dashx-counter .tdc-plan.is-urgent .tdc-plan-d { color: #b91c1c; }
.dashx-counter .tdc-plan.is-none { background: #ecfdf5; border-color: #a7f3d0; font-size: 12.5px; font-weight: 600; color: var(--tdc-accent); }

.dashx-counter .tdc-design { position: relative; width: 36px; padding: 0; }
.dashx-counter .tdc-design span { display: none; }
.dashx-counter .tdc-design::after { content: ""; position: absolute; inset: -4px; }

/* Scope toggle + branch select, on their own line; they wrap, never scroll. */
.dashx-counter .tdc-controls .dsb-strip-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; margin: 0; }
.dashx-counter .tdc-controls .dsb-scope-toggle {
    display: flex; flex: 1 1 100%; gap: 3px; height: 40px; margin: 0; padding: 3px;
    border: 0; border-radius: 12px; background: var(--tdc-track);
}
.dashx-counter .tdc-controls .dsb-scope-toggle button {
    position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 34px; padding: 0 12px;
    border: 0; border-radius: 9px; background: transparent; box-shadow: none;
    font-size: 13px; font-weight: 600; color: var(--tdc-ink-2); white-space: nowrap;
}
/* 34px buttons in the 40px track; the hit area reaches 44px. */
.dashx-counter .tdc-controls .dsb-scope-toggle button::after { content: ""; position: absolute; inset: -5px 0; }
.dashx-counter .tdc-controls .dsb-scope-toggle button:hover { color: var(--tdc-ink); }
.dashx-counter .tdc-controls .dsb-scope-toggle button.active { background: #fff; color: var(--tdc-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.dashx-counter .tdc-controls .dsb-strip-branch { flex: 1 1 100%; max-width: 100%; margin: 0; min-width: 0; }
.dashx-counter .tdc-controls select.branch-select {
    width: 100%; max-width: 100%; height: 40px; min-height: 40px; border-radius: 12px;
    border: 1px solid var(--tdc-line); background-color: #fff;
    font-size: 13px; font-weight: 600; color: var(--tdc-ink);
}

/* ---- Today card: the one coloured surface ------------------------------------ */
.dashx-counter .tdc-today {
    position: relative; isolation: isolate; overflow: hidden; min-width: 0;
    display: flex; flex-direction: column; padding: 18px 18px 16px; border-radius: 20px; color: #fff;
    background: linear-gradient(135deg, #065f46 0%, #064e3b 55%, #05684c 100%);
    box-shadow: 0 16px 32px -24px rgba(4, 90, 66, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.dashx-counter .tdc-today::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(112deg, transparent 0 57%, rgba(255, 255, 255, .06) 57% 71%, transparent 71%);
}
.dashx-counter .tdc-today :where(button):focus-visible { outline-color: #fff; }
.dashx-counter .tdc-today-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.dashx-counter .tdc-today-k { min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, .9); }
.dashx-counter .tdc-today-kt,
.dashx-counter .tdc-today-d { white-space: nowrap; }
.dashx-counter .tdc-scope { display: block; }
.dashx-counter .tdc-scope-sep { display: none; }
.dashx-counter .tdc-scope-t { white-space: nowrap; }
.dashx-counter .tdc-count {
    position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
    border-radius: 999px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16);
    font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; transition: background .15s ease;
}
.dashx-counter .tdc-count::after { content: ""; position: absolute; inset: -8px -4px; }
.dashx-counter .tdc-count i { font-size: 13px; }
.dashx-counter .tdc-count:hover { background: rgba(255, 255, 255, .18); }
.dashx-counter .tdc-tfig {
    margin-top: 10px; font-size: clamp(25px, 9vw, 30px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em;
    color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dashx-counter .tdc-tfig.is-long { font-size: 25px; }
.dashx-counter .tdc-tfig.is-xl { font-size: 20px; }
.dashx-counter .tdc-ctx { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, .86); }
.dashx-counter .tdc-ctx-t { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashx-counter .tdc-tbadge {
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16);
    font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap;
}
.dashx-counter .tdc-tbadge i { font-size: 12px; }
.dashx-counter .tdc-month { margin-top: auto; padding-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dashx-counter .tdc-mcell {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 0; min-height: 56px;
    padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16);
    color: #fff; text-align: left; transition: background .15s ease;
}
.dashx-counter .tdc-mcell:hover { background: rgba(255, 255, 255, .16); }
.dashx-counter .tdc-mcell > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashx-counter .tdc-mcell-k { font-size: 11.5px; font-weight: 600; }
.dashx-counter .tdc-mcell-v { font-size: 15px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dashx-counter .tdc-mcell-s { font-size: 11.5px; font-weight: 600; }
.dashx-counter .tdc-first { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 600; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.dashx-counter .tdc-new {
    margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 48px; padding: 0 22px;
    border-radius: 14px; background: #fff; color: #065f46; font-size: 14px; font-weight: 700;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35); transition: background .15s ease, transform .12s ease;
}
.dashx-counter .tdc-new i { font-size: 16px; }
.dashx-counter .tdc-new:hover { background: #f0fdf4; }
.dashx-counter .tdc-new:active { transform: scale(.98); }

/* ---- Period card / bar --------------------------------------------------------- */
.dashx-counter .tdc-period {
    display: grid; grid-template-columns: minmax(0, 1fr) fit-content(62%);
    grid-template-areas: "lab rng" "fig fig" "meta meta"; column-gap: 10px; align-items: center;
}
.dashx-counter .tdc-p-lab { grid-area: lab; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--tdc-ink-3); }
.dashx-counter .tdc-range {
    grid-area: rng; justify-self: end; position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
    height: 36px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid #d6dde6;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: border-color .15s ease;
}
.dashx-counter .tdc-range::after { content: ""; position: absolute; inset: -4px 0; }
.dashx-counter .tdc-range:hover { border-color: #94a3b8; }
.dashx-counter .tdc-range .bi-calendar3 { flex-shrink: 0; font-size: 13.5px; color: var(--tdc-accent); }
.dashx-counter .tdc-range span { min-width: 0; font-size: 13px; font-weight: 600; color: var(--tdc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashx-counter .tdc-range .bi-chevron-down { flex-shrink: 0; font-size: 11px; color: var(--tdc-ink-3); }
.dashx-counter .tdc-p-fig { grid-area: fig; margin-top: 8px; display: flex; align-items: center; gap: 10px; min-height: 36px; min-width: 0; }
.dashx-counter .tdc-pfig-wrap { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
.dashx-counter .tdc-p-fig .sx-eye { flex-shrink: 0; }
.dashx-counter .tdc-pfig {
    font-size: 25px; line-height: 1.1; font-weight: 700; letter-spacing: -.03em; color: var(--tdc-ink);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dashx-counter .tdc-pfig.tdc-pfig-long { font-size: 21px; }
.dashx-counter .tdc-pfig.tdc-pfig-xl { font-size: 18px; }
/* The asterisks ride high in their line box: settle them onto the eye's centre line. */
.dashx-counter .tdc-pfig.sx-masked { letter-spacing: .06em; line-height: 1; transform: translateY(.1em); }
.dashx-counter .sx-eye.tdc-peye {
    position: relative; width: 32px; height: 32px; border-radius: 50%; border: 0;
    background: #f1f5f9; color: var(--tdc-ink-2); font-size: 15px; box-shadow: none;
}
.dashx-counter .sx-eye.tdc-peye::after { content: ""; position: absolute; inset: -6px; }
.dashx-counter .sx-eye.tdc-peye:hover { background: #e2e8f0; transform: none; }
.dashx-counter .tdc-p-meta { grid-area: meta; margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.dashx-counter .tdc-p-delta, .dashx-counter .tdc-p-net { display: inline-flex; min-width: 0; max-width: 100%; }
.dashx-counter .tdc .dsz-delta { height: 26px; padding: 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.dashx-counter .tdc .dsz-delta i { font-size: 11px; }
.dashx-counter .tdc .dsz-delta em { opacity: 1; font-weight: 600; }
.dashx-counter .tdc-net {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; min-width: 0; max-width: 100%;
    border-radius: 999px; background: var(--tdc-soft); border: 1px solid var(--tdc-hair); white-space: nowrap; overflow: hidden;
}
.dashx-counter .tdc-net i { font-size: 12px; }
.dashx-counter .tdc-net .is-up { color: var(--tdc-up); }
.dashx-counter .tdc-net .is-down { color: var(--tdc-down); }
.dashx-counter .tdc-net .is-flat { color: var(--tdc-ink-2); }
.dashx-counter .tdc-net-k { font-size: 12px; font-weight: 600; color: var(--tdc-ink-3); }
.dashx-counter .tdc-net b { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dashx-counter .tdc-net-m { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: var(--tdc-ink-2); }

/* ---- Setup card (the shared markup, restyled light) ---------------------------- */
/* App.snoozeSetupCard() removes the card but not this wrapper: drop the empty slot. */
.dashx-counter .tdc-setup:not(:has(.dsb-setup-card)) { display: none; }
.dashx-counter .tdc-setup .dsb-setup-card {
    margin: 0; padding: 16px; border-radius: 16px; color: var(--tdc-ink);
    background: #fff !important; border: 1px solid var(--tdc-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.dashx-counter .tdc-setup .dsb-setup-card::before { display: none; }
.dashx-counter .tdc-setup .dsb-setup-header { gap: 12px; margin-bottom: 12px; }
.dashx-counter .tdc-setup .dsb-setup-header[style] { padding-right: 40px !important; }
.dashx-counter .tdc-setup .dsb-setup-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--tdc-ink); }
.dashx-counter .tdc-setup .dsb-setup-sub { margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--tdc-ink-3); opacity: 1; }
.dashx-counter .tdc-setup .dsb-setup-ring,
.dashx-counter .tdc-setup .dsb-setup-ring svg { width: 44px; height: 44px; }
.dashx-counter .tdc-setup .dsb-setup-ring path:first-child { stroke: #e6f4ee; }
.dashx-counter .tdc-setup .dsb-setup-ring path:last-child { stroke: #059669; }
.dashx-counter .tdc-setup .dsb-setup-ring span { font-size: 12px; font-weight: 700; color: var(--tdc-accent); }
.dashx-counter .tdc-setup .dsb-setup-steps { display: flex; flex-direction: column; gap: 8px; }
.dashx-counter .tdc-setup .dsb-setup-step.done { display: none; }
.dashx-counter .tdc-setup .dsb-setup-step {
    min-height: 52px; gap: 12px; padding: 8px 12px; border-radius: 14px; background: var(--tdc-soft);
    font-size: 13.5px; font-weight: 600; color: var(--tdc-ink); transition: background .15s ease;
}
.dashx-counter .tdc-setup .dsb-setup-step:hover { background: var(--tdc-track); }
.dashx-counter .tdc-setup .dsb-setup-step:focus-visible { outline: 2px solid var(--tdc-focus); outline-offset: 2px; }
.dashx-counter .tdc-setup .dsb-setup-step-icon { width: 32px; height: 32px; border-radius: 10px; background: #ecfdf5; color: var(--tdc-accent); font-size: 14px; }
.dashx-counter .tdc-setup .dsb-setup-step > div > div + div { color: var(--tdc-ink-3) !important; opacity: 1 !important; font-size: 12px !important; }
.dashx-counter .tdc-setup .dsb-setup-step > .bi-chevron-right { color: var(--tdc-icon); opacity: 1 !important; }
.dashx-counter .tdc-setup .dsb-setup-card > button[onclick*="snoozeSetupCard"] { background: #f1f5f9 !important; color: var(--tdc-ink-2) !important; }
.dashx-counter .tdc-setup .dsb-setup-card > button[onclick*="snoozeSetupCard"]::after { content: ""; position: absolute; inset: -9px; }

/* ---- Needs attention ------------------------------------------------------------ */
.dashx-counter .tdc-at {
    grid-template-columns: 36px minmax(0, 1fr) 12px; grid-template-areas: "chip line chev" "chip s chev";
    align-content: center; row-gap: 2px; min-height: 60px;
}
.dashx-counter .tdc-chip { grid-area: chip; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; }
/* The title keeps its whole width: the overdue tag sits at the line's end
   when both fit and wraps under the title when they don't, at any width. */
.dashx-counter .tdc-at-line { grid-area: line; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; }
.dashx-counter .tdc-at-t { flex: 1 1 auto; font-weight: 600; }
.dashx-counter .tdc-at-s { grid-area: s; font-weight: 600; }
.dashx-counter .tdc-at .tdc-chev { grid-area: chev; }
.dashx-counter .tdc-od {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px;
    background: #fef2f2; color: #b91c1c; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.dashx-counter .tdc-od i { font-size: 11px; }
.dashx-counter .tdc-clear { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.dashx-counter .tdc-clear-ic {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
    background: #ecfdf5; color: var(--tdc-accent); font-size: 16px;
}
.dashx-counter .tdc-clear-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dashx-counter .tdc-clear-t { font-size: 13.5px; font-weight: 600; color: var(--tdc-ink); }
.dashx-counter .tdc-clear-w { display: none; }
.dashx-counter .tdc-clear-s { font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--tdc-ink-3); }
.dashx-counter .tdc-attn-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 10px;
    margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--tdc-hair);
    font-size: 12.5px; font-weight: 600; color: var(--tdc-ink-3);
}
.dashx-counter .tdc-attn-foot.is-solo { justify-content: flex-end; }
.dashx-counter .tdc-textlink { display: inline-flex; align-items: center; min-height: 44px; margin-right: -8px; padding: 0 8px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--tdc-accent); }

/* ---- Shortcuts ------------------------------------------------------------------- */
.dashx-counter .tdc-sc { padding: 12px 8px; }
.dashx-counter .tdc-sc-title { display: none; }
.dashx-counter .tdc-sc-grid { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 4px; }
.dashx-counter .tdc-tile {
    position: relative; flex: 0 0 calc(100% / var(--pc, 4)); max-width: calc(100% / var(--pc, 4)); min-width: 0; min-height: 80px; padding: 6px 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    border-radius: 14px; transition: background .15s ease;
}
.dashx-counter .tdc-tile:hover { background: var(--tdc-soft); }
.dashx-counter .tdc-tile-ic {
    position: relative; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
    color: #fff; font-size: 18px; box-shadow: 0 6px 12px -8px rgba(15, 23, 42, .35); transition: transform .12s ease;
}
.dashx-counter .tdc-tile:active .tdc-tile-ic { transform: scale(.94); }
.dashx-counter .tdc-tile-l { max-width: 100%; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--tdc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashx-counter .tdc-badge {
    position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: #e1251b; color: #fff; box-shadow: 0 0 0 2px #fff;
    font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
}

/* ---- Last 7 days ------------------------------------------------------------------ */
.dashx-counter .tdc-week-tot { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.dashx-counter .tdc-week-v { font-size: 14px; font-weight: 700; color: var(--tdc-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dashx-counter .tdc-week-tot > span:last-child { font-size: 11.5px; font-weight: 600; color: var(--tdc-ink-3); }
.dashx-counter .tdc-plot { position: relative; display: flex; gap: 6px; height: 120px; margin-top: 2px; }
.dashx-counter .tdc-plot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: var(--tdc-hair); pointer-events: none; }
.dashx-counter .tdc-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding-top: 18px; border-radius: 10px; }
.dashx-counter .tdc-col.is-today { background: #ecfdf5; }
.dashx-counter .tdc-col-track { position: relative; flex: 1 1 auto; }
.dashx-counter .tdc-bar {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: min(22px, 56%); border-radius: 4px 4px 0 0; background: #059669;
}
.dashx-counter .tdc-bar.is-zero { height: 3px; background: var(--tdc-line); }
.dashx-counter .tdc-bar-v {
    position: absolute; left: 50%; transform: translateX(-50%); line-height: 14px;
    font-size: 11px; font-weight: 700; color: var(--tdc-ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dashx-counter .tdc-col-day { height: 22px; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--tdc-ink-3); white-space: nowrap; }
.dashx-counter .tdc-col.is-today .tdc-col-day { font-weight: 700; color: var(--tdc-ink); }
.dashx-counter .tdc-col:focus-visible { outline-offset: 1px; }
.dashx-counter .tdc-week.is-zero .tdc-plot { height: 84px; }
.dashx-counter .tdc-week-note { margin-top: 10px; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--tdc-ink-3); }

/* ---- Recent sales ------------------------------------------------------------------ */
.dashx-counter .tdc-day { padding: 8px 0 4px; font-size: 12px; font-weight: 600; color: var(--tdc-ink-3); }
.dashx-counter .tdc-day:first-child { padding-top: 0; }
.dashx-counter .tdc-rs {
    grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: "av main amt" "av main st";
    row-gap: 3px;
}
.dashx-counter .tdc-av { grid-area: av; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
/* Brand banner's five pairs, so a customer keeps their colour across designs. */
.dashx-counter .tdc-av-0 { background: #ecfdf5; color: #065f46; }
.dashx-counter .tdc-av-1 { background: #eff6ff; color: #1d4ed8; }
.dashx-counter .tdc-av-2 { background: #fffbeb; color: #92400e; }
.dashx-counter .tdc-av-3 { background: #f5f3ff; color: #5b21b6; }
.dashx-counter .tdc-av-4 { background: #f0fdfa; color: #115e59; }
.dashx-counter .tdc-av.is-walk { background: #f1f5f9; color: var(--tdc-ink-3); font-size: 16px; }
.dashx-counter .tdc-rs .tdc-row-main { grid-area: main; }
.dashx-counter .tdc-rs-ref { display: none; }
.dashx-counter .tdc-rs-st { grid-area: st; justify-self: end; align-self: start; }
.dashx-counter .tdc-rs-amt { grid-area: amt; align-self: end; }
.dashx-counter .tdc-rs.is-dim .tdc-rs-amt { color: var(--tdc-ink-3); }
.dashx-counter .tdc-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.dashx-counter .tdc-pill.is-green { background: #ecfdf5; color: #047857; }
.dashx-counter .tdc-pill.is-amber { background: #fffbeb; color: #b45309; }
.dashx-counter .tdc-pill.is-red { background: #fef2f2; color: #b91c1c; }
.dashx-counter .tdc-pill.is-muted { background: #f1f5f9; color: var(--tdc-ink-2); }

/* ---- Running low --------------------------------------------------------------------- */
/* Meter rows (Running low, Money in, Best sellers): title over sub on the
   left, the figure over a fixed 88px meter on the right, so a row is one
   52px line pair and every meter in a card shares the same track length. */
.dashx-counter :is(.tdc-lw, .tdc-in, .tdc-bs) { row-gap: 2px; min-height: 52px; }
.dashx-counter :is(.tdc-lw, .tdc-in, .tdc-bs) > .tdc-row-main { display: contents; }
.dashx-counter :is(.tdc-lw, .tdc-in, .tdc-bs) .tdc-row-t { grid-area: t; }
.dashx-counter :is(.tdc-lw, .tdc-in, .tdc-bs) .tdc-row-s { grid-area: s; }
.dashx-counter :is(.tdc-lw-m, .tdc-in-m, .tdc-bs-m) { grid-area: m; justify-self: end; align-self: center; width: 88px; }
.dashx-counter .tdc-lw { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t q" "s m"; }
.dashx-counter .tdc-lw-q { grid-area: q; text-align: right; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--tdc-ink); font-variant-numeric: tabular-nums; }
.dashx-counter .tdc-lw-q.is-out { color: #b91c1c; }
.dashx-counter .tdc-lw-m { background: #fef3c7; }
.dashx-counter .tdc-lw-m > i { background: #d97706; }
.dashx-counter .tdc-lw-m.is-out { background: #fee2e2; }

/* ---- Period detail heading ------------------------------------------------------------- */
.dashx-counter .tdc-head-p { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 0 2px; }
.dashx-counter .tdc-head-p-copy { min-width: 0; }
.dashx-counter .tdc-head-p h2 { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--tdc-ink); }
.dashx-counter .tdc-head-p p { font-size: 13px; font-weight: 600; color: var(--tdc-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashx-counter .tdc-textbtn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-right: -6px; padding: 0 8px;
    border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--tdc-accent); white-space: nowrap;
}
.dashx-counter .tdc-textbtn i { font-size: 13.5px; }

/* ---- Your businesses (scope "all") ------------------------------------------------------ */
.dashx-counter .tdc-bz {
    grid-template-columns: 36px minmax(0, 1fr) auto 12px;
    grid-template-areas: "logo name amt chev" "logo meter pct chev";
    row-gap: 6px; min-height: 60px;
}
.dashx-counter .tdc-blogo {
    grid-area: logo; position: relative; width: 36px; height: 36px; border-radius: 10px; overflow: hidden;
    display: grid; place-items: center; background: #ecfdf5; border: 1px solid var(--tdc-line);
}
.dashx-counter .tdc-blogo .tdc-ini { font-size: 14px; font-weight: 700; color: var(--tdc-accent); }
.dashx-counter .tdc-bz-n { grid-area: name; }
.dashx-counter .tdc-bz-m { grid-area: meter; align-self: center; height: 8px; }
.dashx-counter .tdc-bz-p { grid-area: pct; font-size: 12.5px; font-weight: 700; color: var(--tdc-ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.dashx-counter .tdc-bz-a { grid-area: amt; }
.dashx-counter .tdc-bz-c { grid-area: chev; }
.dashx-counter .tdc-empty.is-slim { flex-direction: row; gap: 10px; padding: 8px; }
.dashx-counter .tdc-empty.is-slim .tdc-empty-ic { margin: 0; width: 36px; height: 36px; font-size: 15px; }

/* ---- Money in and out ------------------------------------------------------------------- */
.dashx-counter .tdc-cap { margin: 2px 0 2px; font-size: 12px; font-weight: 600; color: var(--tdc-ink-3); }
.dashx-counter .tdc-cap.is-out { margin-top: 14px; margin-bottom: 8px; }
.dashx-counter .tdc-in { grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "dot t amt" "dot s m"; }
.dashx-counter .tdc-in .tdc-dot { grid-area: dot; }
.dashx-counter .tdc-in .tdc-amt { grid-area: amt; }
.dashx-counter .tdc-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.dashx-counter .tdc-out-cell {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; min-height: 72px;
    padding: 10px 12px; border-radius: 14px; background: var(--tdc-soft); text-align: left; transition: background .15s ease;
}
.dashx-counter .tdc-out-cell:hover { background: var(--tdc-track); }
.dashx-counter .tdc-out-k { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--tdc-ink-3); }
.dashx-counter .tdc-out-v { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--tdc-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dashx-counter .tdc-out-s { max-width: 100%; font-size: 12px; font-weight: 600; color: var(--tdc-ink-3); }
.dashx-counter .tdc-note { margin-top: auto; padding-top: 14px; font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--tdc-ink-3); }

/* ---- Money flow -------------------------------------------------------------------------- */
.dashx-counter .tdc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; }
.dashx-counter .tdc-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--tdc-ink); }
.dashx-counter .tdc-legend i { display: inline-block; width: 14px; height: 2px; border-radius: 2px; }
.dashx-counter .tdc-chart { position: relative; height: 220px; min-width: 0; overflow: hidden; }
.dashx-counter .tdc-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; }
.dashx-counter .tdc-flow.is-empty .tdc-chart canvas { display: none; }
.dashx-counter .tdc-chart:has(.dsb-line-empty) { height: 150px; }
.dashx-counter .tdc-chart .dsb-line-empty {
    position: absolute; inset: 0; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--tdc-ink-3);
}
.dashx-counter .tdc-chart .dsb-line-empty { padding: 8px; text-align: center; gap: 4px; }
.dashx-counter .tdc-flow-ic {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
    background: #f1f5f9; color: var(--tdc-icon);
}
.dashx-counter .tdc-chart .dsb-line-empty i { font-size: 18px; color: var(--tdc-icon); }
.dashx-counter .tdc-chart .dsb-line-empty b { font-size: 13.5px; font-weight: 700; color: var(--tdc-ink); }
.dashx-counter .tdc-chart .dsb-line-empty b + span { font-size: 12.5px; font-weight: 500; color: var(--tdc-ink-3); }

/* ---- Payments mix (shared helper, resized) ------------------------------------------------ */
.dashx-counter .tdc-seg { position: relative; flex-shrink: 0; display: inline-flex; gap: 2px; height: 32px; padding: 3px; border-radius: 999px; background: var(--tdc-track); }
.dashx-counter .tdc-seg button { position: relative; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--tdc-ink-2); transition: background .15s ease, color .15s ease; }
.dashx-counter .tdc-seg button::after { content: ""; position: absolute; inset: -9px 0; }
.dashx-counter .tdc-seg button.is-on { background: #fff; color: var(--tdc-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.dashx-counter .tdc-mix .dsz-mix { gap: 10px; }
.dashx-counter .tdc-mix .dsz-mix-total span { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tdc-ink-3); }
.dashx-counter .tdc-mix .dsz-mix-total b { font-size: 17px; font-weight: 700; color: var(--tdc-ink); font-variant-numeric: tabular-nums; }
.dashx-counter .tdc-mix .dsz-mix-bar { height: 14px; }
.dashx-counter .tdc-mix .dsz-mix-seg:first-child { border-radius: 7px 3px 3px 7px; }
.dashx-counter .tdc-mix .dsz-mix-seg:last-child { border-radius: 3px 7px 7px 3px; }
.dashx-counter .tdc-mix .dsz-mix-seg:only-child { border-radius: 7px; }
.dashx-counter .tdc-mix .dsz-mix-seg span { display: none; }
.dashx-counter .tdc-mix .dsz-mix-row { font-size: 13px; padding: 8px 1px; border-bottom-color: var(--tdc-hair); }
.dashx-counter .tdc-mix .dsz-mix-row .lbl { font-weight: 600; color: var(--tdc-ink); }
.dashx-counter .tdc-mix .dsz-mix-row .cnt { font-size: 12px; color: var(--tdc-ink-3); }
.dashx-counter .tdc-mix .dsz-mix-row .pct { color: var(--tdc-ink-2); }
.dashx-counter .tdc-mix .dsz-mix-row .amt { color: var(--tdc-ink); }
/* Empty: the same 44px circle + 14px/800 title as the other cards' empty states. */
.dashx-counter .tdc-mix .dsz-mix-empty { flex-direction: column; gap: 10px; padding: 14px 8px 8px; font-size: 13.5px; font-weight: 700; color: var(--tdc-ink); text-align: center; }
.dashx-counter .tdc-mix .dsz-mix-empty i {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: #f1f5f9; color: var(--tdc-icon); font-size: 18px;
}

/* ---- Best sellers --------------------------------------------------------------------------- */
.dashx-counter .tdc-bs { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "rk t amt" "rk s m"; }
.dashx-counter .tdc-rank { grid-area: rk; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #f1f5f9; color: var(--tdc-ink); }
.dashx-counter .tdc-rank.is-first { background: #ecfdf5; color: var(--tdc-accent); }
.dashx-counter .tdc-bs .tdc-amt { grid-area: amt; }
.dashx-counter .tdc-best .tdc-more { margin-top: auto; }

/* ---- Footer line (phones) ---------------------------------------------------------------------- */
.dashx-counter .tdc-footline {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 2px; min-height: 44px;
    font-size: 12.5px; font-weight: 600; color: var(--tdc-ink-3); text-align: center;
}
.dashx-counter .tdc-footline button { min-height: 44px; padding: 0 6px; border-radius: 10px; font-weight: 600; color: var(--tdc-accent); }

/* ---- Wide phones (W >= 420: a 768px tablet with the sidebar measures W 422) ---------------------- */
@container tdc (min-width: 420px) {
    .dashx-counter .tdc-card { border-radius: 18px; }
    .dashx-counter .tdc-setup .dsb-setup-card { border-radius: 18px; }
    .dashx-counter .tdc-today { padding: 20px 22px; border-radius: 22px; }
    .dashx-counter .tdc-new { width: auto; min-width: 220px; align-self: flex-start; }
    .dashx-counter .tdc-plan-n { display: inline; }
    .dashx-counter .tdc-plan-d { font-size: 12.5px; }
    .dashx-counter .tdc-plan { padding: 0 12px; gap: 6px; }
    .dashx-counter .tdc-top, .dashx-counter .tdc-top-side { gap: 8px; }
    .dashx-counter .tdc-tile-ic { width: 48px; height: 48px; }
    .dashx-counter .tdc-tile-l { font-size: 12.5px; }
    .dashx-counter .tdc-plot { height: 132px; }
    .dashx-counter .tdc-chart { height: 240px; }
    .dashx-counter .tdc-today-k .tdc-scope { display: inline; }
    .dashx-counter .tdc-today-k .tdc-scope-sep { display: inline; }
}
/* Very narrow phones (320px screens): money-out cells stack, shortcuts use at most 4 a row. */
@container tdc (min-width: 340px) {
    .dashx-counter .tdc-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container tdc (max-width: 339.98px) {
    .dashx-counter .tdc-tile { flex-basis: calc(100% / var(--pc4, 4)); max-width: calc(100% / var(--pc4, 4)); }
    /* "Choose a plan" keeps its gem (the words stay in its label) so the name and greeting have room. */
    .dashx-counter .tdc-plan.is-none { width: 36px; padding: 0; justify-content: center; }
    .dashx-counter .tdc-plan.is-none span { display: none; }
    .dashx-counter .tdc-today-d { display: none; }
}
/* 320px screens: the plan pill keeps just its gem (the days stay in its
   label), and the period button gets a line of its own. */
@container tdc (max-width: 299.98px) {
    .dashx-counter .tdc-plan:not(.is-none) { width: 36px; padding: 0; justify-content: center; }
    .dashx-counter .tdc-plan:not(.is-none) .tdc-plan-d { display: none; }
    .dashx-counter .tdc-period { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lab" "rng" "fig" "meta"; }
    .dashx-counter .tdc-range { justify-self: start; margin-top: 8px; }
    .dashx-counter .tdc-mcell > .tdc-mcell-k { white-space: normal; line-height: 1.25; }
    .dashx-counter .tdc-at-line .tdc-od { margin-top: 2px; }
}
/* Below W 600 (phones, a 768px tablet with the sidebar): Recent sales,
   Running low and Best sellers list 3 rows, with the phone counts. */
@container tdc (max-width: 599.98px) {
    .dashx-counter .tdc .tdc-x { display: none; }
    .dashx-counter .tdc span.tdc-ph { display: inline; }
    .dashx-counter .tdc .tdc-more.tdc-ph-btn { display: inline-flex; }
}
@container tdc (min-width: 600px) {
    /* The date moves from the Today card's label into the greeting. */
    .dashx-counter .tdc-greet-d { display: inline; }
    .dashx-counter .tdc-design { width: auto; padding: 0 12px; }
    .dashx-counter .tdc-design span { display: inline; }
    .dashx-counter .tdc-footline { display: none; }
}

/* ---- Desktop: the 12-column paired grid (W >= 760) ------------------------------------------------- */
@container tdc (min-width: 760px) {
    .dashx-counter .tdc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
    .dashx-counter .tdc-s12 { grid-column: span 12; }
    .dashx-counter .tdc-s7 { grid-column: span 7; }
    .dashx-counter .tdc-s5 { grid-column: span 5; }
    .dashx-counter .tdc-top,
    .dashx-counter .tdc-controls { order: 0; }
    .dashx-counter .tdc-today { order: 1; }
    .dashx-counter .tdc-attn { order: 2; }
    .dashx-counter .tdc-period { order: 3; }
    .dashx-counter .tdc-setup { order: 4; }
    .dashx-counter .tdc-sc { order: 5; }
    .dashx-counter .tdc-week { order: 6; }
    .dashx-counter .tdc-recent { order: 7; }
    .dashx-counter .tdc-low { order: 8; }
    .dashx-counter .tdc-head-p { order: 9; margin-top: 8px; }
    .dashx-counter .tdc-biz { order: 10; }
    .dashx-counter .tdc-inout { order: 11; }
    .dashx-counter .tdc-flow { order: 12; }
    .dashx-counter .tdc-pay { order: 13; }
    .dashx-counter .tdc-best { order: 14; }
    .dashx-counter .tdc-footline { order: 15; }

    .dashx-counter .tdc-card { padding: 20px; }
    .dashx-counter .tdc-title { font-size: 15px; }
    .dashx-counter .tdc-head { margin-bottom: 12px; }

    /* header */
    .dashx-counter .tdc-top { min-height: 56px; }
    .dashx-counter .tdc-logo { width: 44px; height: 44px; }
    .dashx-counter .tdc-name-t { font-size: 18px; }
    .dashx-counter .tdc-greet { font-size: 13px; }
    .dashx-counter .tdc-greet-t { --tdc-gl: 18px; }
    .dashx-counter .tdc-controls .dsb-scope-toggle { flex: 0 0 auto; height: 36px; }
    .dashx-counter .tdc-controls .dsb-scope-toggle button { flex: 0 0 auto; height: 30px; padding: 0 14px; }
    .dashx-counter .tdc-controls .dsb-strip-branch { flex: 0 1 280px; }
    .dashx-counter .tdc-controls select.branch-select { height: 36px; min-height: 36px; }

    /* today */
    .dashx-counter .tdc-today { padding: 22px 24px 20px; }
    .dashx-counter .tdc-tfig { font-size: 35px; }
    .dashx-counter .tdc-tfig.is-long { font-size: 30px; }
    .dashx-counter .tdc-tfig.is-xl { font-size: 25px; }
    .dashx-counter .tdc-mcell { min-height: 64px; padding: 10px 14px; }

    /* period bar, one row: [period] | label over figure + eye | delta | net.
       Each group after the button sits behind a hairline. The delta and net
       carry their own hairline, so when a huge figure leaves no room the net
       drops under the delta and the two lines still line up. */
    .dashx-counter .tdc-period {
        --tdc-pg: 10px;
        padding: 14px 16px; grid-template-columns: max-content max-content minmax(0, 1fr);
        grid-template-areas: "rng lab meta" "rng fig meta"; column-gap: var(--tdc-pg); row-gap: 0;
    }
    .dashx-counter .tdc-range { justify-self: start; }
    .dashx-counter .tdc-p-lab,
    .dashx-counter .tdc-p-fig { padding-left: var(--tdc-pg); border-left: 1px solid var(--tdc-hair); }
    .dashx-counter .tdc-p-lab { align-self: end; padding-top: 2px; }
    .dashx-counter .tdc-p-fig { align-self: start; margin-top: 0; padding-bottom: 2px; gap: 8px; min-height: 38px; }
    /* A constant width per size step (the widest figure of that step + gap +
       eye), so the masked and revealed figure take the same room: the eye
       follows the figure, the delta and net never move, and the width hints
       at nothing beyond the size step the font already shows. */
    .dashx-counter .tdc-p-fig { min-width: calc(217px + 8px + 32px + var(--tdc-pg) + 1px); }
    .dashx-counter .tdc-p-fig.is-long { min-width: calc(228px + 8px + 32px + var(--tdc-pg) + 1px); }
    .dashx-counter .tdc-p-fig.is-xl { min-width: calc(224px + 8px + 32px + var(--tdc-pg) + 1px); }
    .dashx-counter .tdc-pfig { font-size: 28px; }
    .dashx-counter .tdc-p-lab .tdc-scope,
    .dashx-counter .tdc-p-lab .tdc-scope-sep { display: inline; }
    .dashx-counter .tdc-pfig.tdc-pfig-long { font-size: 25px; }
    .dashx-counter .tdc-pfig.tdc-pfig-xl { font-size: 21px; }
    .dashx-counter .tdc-p-meta {
        align-self: stretch; margin-top: 0; flex-wrap: wrap; align-items: stretch; column-gap: var(--tdc-pg); row-gap: 6px;
    }
    .dashx-counter .tdc-p-meta > .tdc-p-delta,
    .dashx-counter .tdc-p-meta > .tdc-p-net { align-items: center; padding-left: var(--tdc-pg); border-left: 1px solid var(--tdc-hair); }
    .dashx-counter .tdc-p-meta > .tdc-p-delta { flex-shrink: 0; }
    .dashx-counter .tdc-period .dsz-delta,
    .dashx-counter .tdc-period .tdc-net { padding: 0 8px; }

    .dashx-counter .tdc-setup .dsb-setup-card { padding: 20px; }
    /* The ring leads the title (not flung to the far end), and one or two
       remaining steps stay tile-sized instead of stretching across the row. */
    .dashx-counter .tdc-setup .dsb-setup-header { justify-content: flex-start; }
    .dashx-counter .tdc-setup .dsb-setup-ring { order: -1; }
    .dashx-counter .tdc-setup .dsb-setup-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

    /* needs attention: rows a touch denser beside the Today card */
    .dashx-counter .tdc-at { min-height: 56px; }
    /* needs attention: a centred all-clear state in the stretched card */
    .dashx-counter .tdc-attn.is-clear .tdc-clear { flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 10px; padding: 8px 12px 12px; text-align: center; }
    .dashx-counter .tdc-attn.is-clear .tdc-clear-ic { width: 48px; height: 48px; border-radius: 50%; font-size: 18px; }
    .dashx-counter .tdc-attn.is-clear .tdc-clear-copy { align-items: center; gap: 4px; }
    .dashx-counter .tdc-attn.is-clear .tdc-clear-t { font-size: 14px; font-weight: 700; }
    .dashx-counter .tdc-attn.is-clear .tdc-clear-n { display: none; }
    .dashx-counter .tdc-attn.is-clear .tdc-clear-w { display: inline; }
    .dashx-counter .tdc-attn-foot { margin-top: auto; }

    /* shortcuts + week share a row; the plot fills the height */
    .dashx-counter .tdc-sc { padding: 20px; }
    .dashx-counter .tdc-sc-title { display: block; margin-bottom: 8px; }
    .dashx-counter .tdc-sc-grid { flex: 1 1 auto; align-content: center; }
    .dashx-counter .tdc-tile { min-height: 84px; }
    .dashx-counter .tdc-plot,
    .dashx-counter .tdc-week.is-zero .tdc-plot { height: auto; flex: 1 1 0; min-height: 120px; }
    /* the week across the whole row (no shortcuts): fuller bars, a slimmer today band */
    .dashx-counter .tdc-week.tdc-s12 .tdc-plot { gap: 16px; }
    .dashx-counter .tdc-week.tdc-s12 .tdc-bar { width: min(40px, 40%); }
    .dashx-counter .tdc-week.tdc-s12 .tdc-col.is-today { margin: 0 4%; }

    /* recent sales: beside Running low the pill sits inline, so a row is one
       line pair; a table when it has the whole row */
    .dashx-counter .tdc-rs { min-height: 60px; }
    .dashx-counter .tdc-recent:not(.is-wide) .tdc-rs {
        grid-template-columns: 38px minmax(0, 1fr) auto auto; grid-template-areas: "av main st amt"; min-height: 56px;
    }
    .dashx-counter .tdc-recent:not(.is-wide) .tdc-rs-st { align-self: center; }
    .dashx-counter .tdc-recent:not(.is-wide) .tdc-rs-amt { align-self: center; min-width: 96px; }
    .dashx-counter .tdc-recent.is-wide .tdc-rs {
        grid-template-columns: 38px minmax(0, 1fr) 160px 96px 140px; grid-template-areas: "av main ref st amt";
    }
    .dashx-counter .tdc-recent.is-wide .tdc-rs-subref { display: none; }
    .dashx-counter .tdc-recent.is-wide .tdc-rs-ref {
        display: block; grid-area: ref; min-width: 0; font-size: 13px; font-weight: 600; color: var(--tdc-ink-2);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
    }
    .dashx-counter .tdc-recent.is-wide .tdc-rs-st { justify-self: start; align-self: center; }
    .dashx-counter .tdc-recent.is-wide .tdc-rs-amt { align-self: center; }

    .dashx-counter .tdc-lw { min-height: 60px; }
    /* running low across the row (scope "all"): two columns */
    .dashx-counter .tdc-low.is-wide .tdc-low-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
    .dashx-counter .tdc-low.is-wide .tdc-low-list > .tdc-row:nth-child(2)::before { display: none; }
    .dashx-counter .tdc-low .tdc-more { margin-top: auto; }

    /* businesses: meter in its own middle column */
    .dashx-counter .tdc-bz {
        row-gap: 0;
        grid-template-columns: 36px minmax(0, 1fr) minmax(0, 40%) 48px minmax(112px, auto) 12px;
        grid-template-areas: "logo name meter pct amt chev";
    }

    .dashx-counter .tdc-chart,
    .dashx-counter .tdc-chart:has(.dsb-line-empty) { height: auto; flex: 1 1 0; min-height: 240px; }
    /* payments mix beside Best sellers: roomier rows */
    .dashx-counter .tdc-mix .dsz-mix-row { padding: 10px 1px; }
    .dashx-counter .tdc-p-lab { white-space: nowrap; }
}

/* From W 900 (a 1280px screen measures W 960): the Today figure and month
   cells grow into the card stretched beside Needs attention. */
@container tdc (min-width: 900px) {
    .dashx-counter .tdc-tfig { font-size: 40px; }
    .dashx-counter .tdc-tfig.is-long { font-size: 33px; }
    .dashx-counter .tdc-tfig.is-xl { font-size: 26px; }
    .dashx-counter .tdc-mcell { min-height: 72px; }
    .dashx-counter .tdc-mcell-v { font-size: 17px; }
}
/* Wide desktops: the spec's full 20px between the period bar's groups. */
@container tdc (min-width: 1040px) {
    .dashx-counter .tdc-period { --tdc-pg: 20px; padding: 14px 20px; }
}

/* ---- Entrance motion: first render only, never on a soft redraw ------------------------------------ */
@keyframes tdc-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .dashx-counter:not(.is-soft) .tdc-anim {
        animation: tdc-rise 280ms cubic-bezier(.2, .7, .2, 1) both;
        animation-delay: calc(var(--i, 0) * 40ms);
    }
}
@media (prefers-reduced-motion: reduce) {
    .dashx-counter .tdc-anim { animation: none !important; }
    .dashx-counter .tdc :where(button, .tdc-tile-ic) { transition: none !important; }
}

/* ==========================================================================
   Picker thumbnail: a green card top-left beside a white to-do list,
   a slim period bar under them, shortcuts and a week strip below.
   ========================================================================== */
.dshp-t.dshp-t-counter { position: absolute; inset: 0; padding: 0; background: #f5f7fb; overflow: hidden; }
.dshp-t-counter span { display: block; }
.dshp-t-counter .tc-logo { position: absolute; left: 8px; top: 6px; width: 9px; height: 9px; border-radius: 3px; background: #047857; }
.dshp-t-counter .tc-name { position: absolute; left: 21px; top: 7px; width: 36px; height: 4px; border-radius: 2px; background: #000; }
.dshp-t-counter .tc-greet { position: absolute; left: 21px; top: 13px; width: 24px; height: 3px; border-radius: 2px; background: #cbd5e1; }
.dshp-t-counter .tc-design { position: absolute; right: 8px; top: 5px; width: 14px; height: 9px; border-radius: 3px; background: #fff; border: 1px solid #e7ebf1; }
.dshp-t-counter .tc-plan { position: absolute; right: 26px; top: 5px; width: 22px; height: 9px; border-radius: 3px; background: #fff; border: 1px solid #e7ebf1; }
.dshp-t-counter .tc-row1 { position: absolute; top: 22px; bottom: 52px; left: 6px; right: 6px; display: grid; grid-template-columns: 7fr 5fr; gap: 5px; }
.dshp-t-counter .tc-today {
    position: relative; overflow: hidden; border-radius: 9px;
    background:
        linear-gradient(112deg, transparent 57%, rgba(255, 255, 255, .07) 57% 71%, transparent 71%),
        linear-gradient(135deg, #065f46, #064e3b 55%, #05684c);
}
.dshp-t-counter .tc-lbl { position: absolute; left: 7px; top: 7px; width: 28px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .75); }
.dshp-t-counter .tc-fig { position: absolute; left: 7px; top: 14px; width: 50px; height: 9px; border-radius: 3px; background: #fff; }
.dshp-t-counter .tc-cell { position: absolute; left: 7px; top: 29px; width: 40%; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.dshp-t-counter .tc-cell2 { left: 52%; }
.dshp-t-counter .tc-btn { position: absolute; left: 7px; right: 7px; top: 42px; height: 7px; border-radius: 3px; background: #fff; }
.dshp-t-counter .tc-attn { position: relative; overflow: hidden; border-radius: 9px; background: #fff; border: 1px solid #e7ebf1; }
.dshp-t-counter .tc-ar { position: absolute; left: 0; right: 0; height: 6px; }
.dshp-t-counter .tc-ar1 { top: 7px; }
.dshp-t-counter .tc-ar2 { top: 18px; }
.dshp-t-counter .tc-ar3 { top: 29px; }
.dshp-t-counter .tc-ar4 { top: 40px; }
.dshp-t-counter .tc-ar > span { position: absolute; top: 0; }
.dshp-t-counter .tc-ar > span:nth-child(1) { left: 6px; width: 6px; height: 6px; border-radius: 2px; }
.dshp-t-counter .tc-ar > span:nth-child(2) { left: 16px; top: 1px; width: 45%; height: 3px; border-radius: 2px; background: #cbd5e1; }
.dshp-t-counter .tc-ar > span:nth-child(3) { right: 6px; top: 1px; width: 16%; height: 3px; border-radius: 2px; background: #000; }
.dshp-t-counter .tc-ar1 > span:nth-child(1) { background: #7c3aed; }
.dshp-t-counter .tc-ar2 > span:nth-child(1) { background: #0d9488; }
.dshp-t-counter .tc-ar3 > span:nth-child(1) { background: #db2777; }
.dshp-t-counter .tc-ar4 > span:nth-child(1) { background: #b45309; }
.dshp-t-counter .tc-period { position: absolute; bottom: 32px; left: 6px; right: 6px; height: 14px; overflow: hidden; border-radius: 5px; background: #fff; border: 1px solid #e7ebf1; }
.dshp-t-counter .tc-pp { position: absolute; left: 5px; top: 3px; width: 20px; height: 6px; border-radius: 3px; background: #fff; border: 1px solid #d6dde6; }
.dshp-t-counter .tc-pf { position: absolute; left: 30px; top: 4px; width: 30%; height: 5px; border-radius: 2px; background: #000; }
.dshp-t-counter .tc-pd { position: absolute; left: 64%; top: 5px; width: 10%; height: 4px; border-radius: 2px; background: rgba(4, 120, 87, .2); }
.dshp-t-counter .tc-pn { position: absolute; right: 6px; top: 5px; width: 10%; height: 3px; border-radius: 2px; background: #047857; }
.dshp-t-counter .tc-row3 { position: absolute; bottom: 6px; left: 6px; right: 6px; height: 22px; display: grid; grid-template-columns: 7fr 5fr; gap: 5px; }
.dshp-t-counter .tc-sc {
    overflow: hidden; border-radius: 6px; background: #fff; border: 1px solid #e7ebf1;
    display: flex; align-items: center; justify-content: space-evenly;
}
.dshp-t-counter .tc-sc > span { width: 9px; height: 9px; border-radius: 3px; }
.dshp-t-counter .tc-sc > span:nth-child(1) { background: linear-gradient(135deg, #065f46, #059669); }
.dshp-t-counter .tc-sc > span:nth-child(2) { background: linear-gradient(135deg, #b45309, #d97706); }
.dshp-t-counter .tc-sc > span:nth-child(3) { background: linear-gradient(135deg, #c2410c, #eb6834); }
.dshp-t-counter .tc-sc > span:nth-child(4) { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.dshp-t-counter .tc-sc > span:nth-child(5) { background: linear-gradient(135deg, #4338ca, #6366f1); }
.dshp-t-counter .tc-wk {
    overflow: hidden; border-radius: 6px; background: #fff; border: 1px solid #e7ebf1;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 3px; padding: 4px 6px;
}
.dshp-t-counter .tc-wk > span { width: 4px; background: #059669; border-radius: 1px 1px 0 0; }
.dshp-t-counter .tc-wk > span:nth-child(1) { height: 30%; }
.dshp-t-counter .tc-wk > span:nth-child(2) { height: 45%; }
.dshp-t-counter .tc-wk > span:nth-child(3) { height: 25%; }
.dshp-t-counter .tc-wk > span:nth-child(4) { height: 60%; }
.dshp-t-counter .tc-wk > span:nth-child(5) { height: 40%; }
.dshp-t-counter .tc-wk > span:nth-child(6) { height: 70%; }
.dshp-t-counter .tc-wk > .tc-wk-today {
    width: 8px; height: 100%; display: flex; align-items: flex-end; justify-content: center;
    background: #ecfdf5; border-radius: 2px;
}
.dshp-t-counter .tc-wk-today > span { width: 4px; height: 55%; background: #059669; border-radius: 1px 1px 0 0; }

/* The phone picker box is 112px tall: the same pieces, a little tighter. */
@media (max-width: 520px) {
    .dshp-t-counter .tc-row1 { bottom: 46px; }
    .dshp-t-counter .tc-lbl { top: 6px; }
    .dshp-t-counter .tc-fig { top: 12px; height: 8px; }
    .dshp-t-counter .tc-cell { top: 25px; height: 8px; }
    .dshp-t-counter .tc-btn { top: 36px; height: 6px; }
    .dshp-t-counter .tc-ar1 { top: 6px; }
    .dshp-t-counter .tc-ar2 { top: 15px; }
    .dshp-t-counter .tc-ar3 { top: 24px; }
    .dshp-t-counter .tc-ar4 { top: 33px; }
    .dshp-t-counter .tc-period { bottom: 28px; height: 12px; }
    .dshp-t-counter .tc-pp { top: 2px; }
    .dshp-t-counter .tc-pf { top: 3px; }
    .dshp-t-counter .tc-pd, .dshp-t-counter .tc-pn { top: 4px; }
    .dshp-t-counter .tc-row3 { height: 18px; }
    .dshp-t-counter .tc-sc > span { width: 8px; height: 8px; }
}

/* ---- The Today card leads (Oct 2026) ---------------------------------------
   Nothing sits above it: its first row is the business (tap to switch) and
   the Options button (dash-options.js), and the flag fills its top-right
   corner. The date stays on the card's label at every width. */
.dashx-counter .tdc-today { --dbx-flag-w: 92px; --dbx-flag-r: 20px; }
.dashx-counter .tdc-today > :not(.dbx-flag) { position: relative; z-index: 1; }
.dashx-counter .tdc-today-id {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    margin-bottom: 16px; padding-right: 36px;
}
.dashx-counter .tdc-tid {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
    margin: -4px; padding: 4px; border: 0; border-radius: 14px; cursor: pointer;
    background: none; color: #fff; font: inherit; text-align: left;
}
.dashx-counter .tdc-tid:hover { background: rgba(255, 255, 255, .08); }
.dashx-counter .tdc-tlogo {
    position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; overflow: hidden;
    display: grid; place-items: center; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.dashx-counter .tdc-tlogo .tdc-ini { font-size: 17px; font-weight: 700; color: #065f46; }
.dashx-counter .tdc-tlogo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.dashx-counter .tdc-tlogo.is-icon i { font-size: 18px; color: #065f46; }
.dashx-counter .tdc-tname { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 16px; font-weight: 700; }
.dashx-counter .tdc-tname-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashx-counter .tdc-tname i { flex-shrink: 0; font-size: 12px; opacity: .8; }
.dashx-counter .tdc-today-top { padding-right: 22px; }
@container tdc (min-width: 420px) {
    .dashx-counter .tdc-today { --dbx-flag-r: 22px; }
}
@container tdc (min-width: 600px) {
    .dashx-counter .tdc-today { --dbx-flag-w: 112px; }
    .dashx-counter .tdc-today-id { padding-right: 46px; }
    .dashx-counter .tdc-today-top { padding-right: 34px; }
    .dashx-counter .dbx-opt-btn { width: auto; padding: 0 15px; }
    .dashx-counter .dbx-opt-lbl { display: inline; }
}