/**
 * DSCC SWMS - Brand tokens
 *
 * Single source of truth for colour and type. base.css and design-system.css
 * both consume these; nothing downstream should hardcode a brand hex.
 *
 * Every colour below is sampled from the corporation's seal
 * (static/images/dscc-seal.png), not chosen:
 *
 *   green   #1D5127   the outer ring      9.30:1 on white
 *   crimson #B61F24   the inner field     6.54:1 on white
 *   gold    #F5B517   the lamp medallion  1.83:1 - accent only
 *
 * Design principle - register, not dashboard. This is the record of what
 * happened in 75 wards today, so green is the institutional voice, gold marks
 * exactly one thing ("here, now, active"), and crimson is reserved for alerts
 * and destructive actions. Giving crimson the danger role means the brand red
 * and the error red are the same red, instead of competing.
 */

:root {
    /* ------------------------------------------------------------------
       Brand, from the seal
       ------------------------------------------------------------------ */
    --dscc-green: #1D5127;         /* 9.30:1 on white */
    --dscc-green-deep: #123419;    /* header ground */
    --dscc-green-mid: #2A6B37;     /* hover */
    --dscc-green-pale: #E4EDE5;    /* tint fills */

    --dscc-crimson: #B61F24;       /* 6.54:1 on white */
    --dscc-crimson-deep: #8C161A;
    --dscc-crimson-pale: #FBE9E9;

    --dscc-gold: #F5B517;          /* 1.83:1 - accent only, never text on white */
    --dscc-gold-deep: #8A6100;     /* 5.54:1 - the readable gold, for text */
    --dscc-gold-pale: #FEF4DC;

    /* ------------------------------------------------------------------
       Ground and ink
       Derived from the green rather than neutral grey, so the whole surface
       belongs to this identity instead of being a generic grey shell.
       ------------------------------------------------------------------ */
    --dscc-paper: #F7F9F7;         /* page ground - near white, faint green cast */
    --dscc-surface: #FFFFFF;
    --dscc-surface-sunk: #F1F4F1;
    --dscc-ink: #152018;           /* 16.78:1 - green-black */
    --dscc-ink-soft: #4A5850;      /* 7.49:1 - secondary text */
    --dscc-ink-faint: #5F6C64;     /* 5.50:1 white, 4.79:1 paper */
    --dscc-rule: #D5DDD6;          /* hairlines */
    --dscc-rule-strong: #B8C4BA;

    /* ------------------------------------------------------------------
       Status
       Kept distinct from the brand greens so "collected" never reads as
       chrome. Each clears 4.5:1 on white as a text colour.
       ------------------------------------------------------------------ */
    --dscc-ok: #12694A;
    --dscc-ok-pale: #E1F0EA;
    --dscc-warn: #8A5A00;
    --dscc-warn-pale: #FDF1DC;
    --dscc-stop: var(--dscc-crimson);
    --dscc-stop-pale: var(--dscc-crimson-pale);
    --dscc-note: #1B5E7A;
    --dscc-note-pale: #E3EFF4;

    /* RGB triplets, so tinted fills can be written rgba(var(--x-rgb), .1)
       instead of pasting a literal that later drifts from the token. */
    --dscc-green-rgb: 29, 81, 39;
    --dscc-green-deep-rgb: 18, 52, 25;
    --dscc-crimson-rgb: 182, 31, 36;
    --dscc-gold-rgb: 245, 181, 23;
    --dscc-ink-rgb: 21, 32, 24;
    --dscc-ok-rgb: 18, 105, 74;
    --dscc-warn-rgb: 138, 90, 0;
    --dscc-note-rgb: 27, 94, 122;

    /* ------------------------------------------------------------------
       Type
       Public Sans is drawn for government interfaces and holds its shape at
       the 12-13px a ward table needs. Bengali carries equal weight here, so
       Noto Sans Bengali sits in the same stack rather than as a fallback.
       ------------------------------------------------------------------ */
    --dscc-font: 'Public Sans', 'Noto Sans Bengali', -apple-system,
                 BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --dscc-font-bn: 'Noto Sans Bengali', 'Public Sans', sans-serif;

    --dscc-text-xs: 0.75rem;    /* 12 - table meta */
    --dscc-text-sm: 0.8125rem;  /* 13 - dense table body */
    --dscc-text-base: 0.9375rem;/* 15 - body. Bengali conjuncts blur below 14 */
    --dscc-text-lg: 1.25rem;    /* 20 */
    --dscc-text-xl: 1.625rem;   /* 26 */
    --dscc-text-2xl: 2.125rem;  /* 34 */

    --dscc-lh-tight: 1.25;
    --dscc-lh: 1.55;

    /* ------------------------------------------------------------------
       Structure
       Panels sit flat with a hairline. Only things that lift on interaction
       get a shadow, so elevation still means something.
       ------------------------------------------------------------------ */
    --dscc-radius: 4px;
    --dscc-radius-lg: 8px;
    --dscc-marker: 3px;         /* the gold state edge */

    --dscc-lift: 0 1px 2px rgba(21, 32, 24, 0.06);
    --dscc-lift-raised: 0 4px 12px rgba(21, 32, 24, 0.10);

    --dscc-space-1: 0.25rem;
    --dscc-space-2: 0.5rem;
    --dscc-space-3: 0.75rem;
    --dscc-space-4: 1rem;
    --dscc-space-5: 1.5rem;
    --dscc-space-6: 2rem;
    --dscc-space-7: 3rem;
}

/* ======================================================================
   Bridge: the two stylesheets this project already had disagreed with each
   other - base.css ran a lime/forest-green palette, design-system.css ran a
   generic blue, and both loaded on every page. Rather than rewrite 2,000
   lines of rules, their variables are re-pointed at the tokens above so every
   existing rule inherits the seal palette.
   ====================================================================== */
:root {
    /* base.css */
    --primary-green: var(--dscc-green);
    --secondary-green: var(--dscc-green-mid);
    /* base.css used this token for two conflicting jobs: solid CTA fills on
       light surfaces, and link text on dark ones. Fills win the variable (a
       gold CTA is 1.83:1 and gold is meant to mark state, not carry actions);
       the on-dark text cases are re-stated as gold in the rules below. */
    --accent-green: var(--dscc-green);
    --dark-green: var(--dscc-green-deep);
    --olive-accent: var(--dscc-green-mid);
    --main-accent: var(--dscc-gold);
    --main-accent-dark: var(--dscc-gold-deep);
    --main-accent-light: var(--dscc-gold-pale);
    --dark-forest-green: var(--dscc-green);
    --olive-green: var(--dscc-green-mid);
    --medium-lime-green: var(--dscc-green-mid);
    --very-dark-green: var(--dscc-green-deep);
    --text-dark: var(--dscc-ink);
    --text-light: var(--dscc-ink-faint);

    /* design-system.css */
    --color-primary: var(--dscc-green);
    --color-primary-light: var(--dscc-green-mid);
    --color-primary-dark: var(--dscc-green-deep);
    --color-primary-hover: var(--dscc-green-mid);
    --color-primary-solid: var(--dscc-green);
    --color-success: var(--dscc-ok);
    --color-success-solid: var(--dscc-ok);
    --color-warning: var(--dscc-warn);
    --color-warning-solid: var(--dscc-warn);
    --color-danger: var(--dscc-crimson);
    --color-danger-solid: var(--dscc-crimson);
    --color-info: var(--dscc-note);
    --color-info-solid: var(--dscc-note);
    --color-background: var(--dscc-paper);
    --color-surface: var(--dscc-surface);
    --color-text-primary: var(--dscc-ink);
    --color-text-secondary: var(--dscc-ink-soft);
    --color-border: var(--dscc-rule);

    /* The -dark/-light and grey ramps design-system.css also defines. Without
       these, any rule using them keeps the pre-DSCC palette - which is how
       .alert-warning kept its old amber after the first pass. */
    --color-success-dark: var(--dscc-ok);
    --color-success-light: var(--dscc-ok-pale);
    --color-warning-dark: var(--dscc-warn);
    --color-warning-light: var(--dscc-warn-pale);
    --color-danger-dark: var(--dscc-crimson-deep);
    --color-danger-light: var(--dscc-crimson-pale);
    --color-info-dark: var(--dscc-note);
    --color-info-light: var(--dscc-note-pale);

    --color-gray-50:  #FAFBFA;
    --color-gray-100: var(--dscc-surface-sunk);
    --color-gray-200: var(--dscc-rule);
    --color-gray-300: var(--dscc-rule-strong);
    --color-gray-400: #93A096;
    --color-gray-500: var(--dscc-ink-faint);
    --color-gray-600: var(--dscc-ink-soft);
    --color-gray-700: #3A463E;
    --color-gray-800: #26302A;
    --color-gray-900: var(--dscc-ink);

    /* base.css status + grey ramp */
    --success: var(--dscc-ok);
    --warning: var(--dscc-warn);
    --danger: var(--dscc-crimson);
    --info: var(--dscc-note);
    --gray-100: var(--dscc-surface-sunk);
    --gray-200: var(--dscc-rule);
    --gray-300: var(--dscc-rule-strong);
    --gray-400: #93A096;
    --gray-500: var(--dscc-ink-faint);
    --gray-600: var(--dscc-ink-soft);
    --gray-700: #3A463E;
    --gray-800: #26302A;
    --gray-900: var(--dscc-ink);

    /* platform_owner_base.html */
    --primary-color: var(--dscc-green);
    --success-color: var(--dscc-ok);
    --warning-color: var(--dscc-warn);
    --danger-color: var(--dscc-crimson);
    --info-color: var(--dscc-note);
    --dark-color: var(--dscc-ink);
    --light-bg: var(--dscc-paper);

    /* Bootstrap theme channels */
    --bs-primary-rgb: 29, 81, 39;
    --bs-success-rgb: 18, 105, 74;
    --bs-warning-rgb: 138, 90, 0;
    --bs-danger-rgb: 182, 31, 36;
    --bs-info-rgb: 27, 94, 122;
    --bs-body-color: var(--dscc-ink);
    --bs-body-bg: var(--dscc-paper);
    --bs-border-color: var(--dscc-rule);
    --bs-link-color: var(--dscc-green);
    --bs-link-hover-color: var(--dscc-green-deep);
}

/* ======================================================================
   Base
   ====================================================================== */
body {
    font-family: var(--dscc-font);
    font-size: var(--dscc-text-base);
    line-height: var(--dscc-lh);
    color: var(--dscc-ink);
    background-color: var(--dscc-paper);
    -webkit-font-smoothing: antialiased;
}

:lang(bn) { font-family: var(--dscc-font-bn); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dscc-font);
    line-height: var(--dscc-lh-tight);
    color: var(--dscc-ink);
    letter-spacing: -0.011em;
}
h1 { font-size: var(--dscc-text-2xl); font-weight: 700; }
h2 { font-size: var(--dscc-text-xl); font-weight: 700; }
h3 { font-size: var(--dscc-text-lg); font-weight: 600; }
h4, h5, h6 { font-size: var(--dscc-text-base); font-weight: 600; }

/* Nearly every column in this system is a ward number, a tonnage, an amount or
   a date. Lining figures keep those columns aligned down the page. */
table, .stat-value, .metric-value, .figure, time, .badge, input, td, th {
    font-variant-numeric: tabular-nums;
}

/* ======================================================================
   Masthead - the seal and the bilingual lockup.
   This is the one loud element; everything else stays quiet.
   ====================================================================== */
.dscc-mast {
    display: flex;
    align-items: center;
    gap: var(--dscc-space-3);
    text-decoration: none;
}
.dscc-mast__seal {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    object-fit: contain;
    /* The seal is a fixed artwork; never let a parent stretch it. */
}
.dscc-mast__names {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.dscc-mast__bn {
    font-family: var(--dscc-font-bn);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dscc-ink);
    white-space: nowrap;
}
.dscc-mast__en {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--dscc-green);
    white-space: nowrap;
}
/* Kept for the few dark surfaces that remain, e.g. the login card header. */
.dscc-mast--ondark .dscc-mast__bn,
.bg-dark .dscc-mast__bn,
.login-header .dscc-mast__bn { color: #FFFFFF; }
.dscc-mast--ondark .dscc-mast__en,
.bg-dark .dscc-mast__en,
.login-header .dscc-mast__en { color: var(--dscc-gold); }

@media (max-width: 575.98px) {
    .dscc-mast__seal { width: 34px; height: 34px; flex-basis: 34px; }
    .dscc-mast__bn { font-size: 0.8125rem; }
    .dscc-mast__en { font-size: 0.625rem; }
}

/* ======================================================================
   Navigation - a solid bound edge, not a floating bar
   ====================================================================== */
.navbar-main,
.navbar-custom,
.navbar {
    background: var(--dscc-surface) !important;
    border-bottom: 1px solid var(--dscc-rule);
    box-shadow: none;
}
/* One green hairline under the bar carries the brand without a solid mass. */
.navbar-main::after,
.navbar-custom::after {
    content: '';
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--dscc-green);
}
.navbar-main, .navbar-custom { position: relative; }

.navbar-main .nav-link,
.navbar-custom .nav-link,
.navbar .nav-link {
    color: var(--dscc-ink-soft) !important;
    font-weight: 500;
    border-bottom: var(--dscc-marker) solid transparent;
    transition: color 0.12s ease;
}
.navbar-main .nav-link:hover,
.navbar-main .nav-link:focus-visible,
.navbar-custom .nav-link:hover,
.navbar .nav-link:hover {
    color: var(--dscc-green-deep) !important;
    background-color: transparent;
}
/* The gold marker. One device, one meaning: you are here. */
.navbar-main .nav-link.active,
.navbar-custom .nav-link.active,
.navbar .nav-link.active {
    color: var(--dscc-green-deep) !important;
    border-bottom-color: var(--dscc-gold);
    background-color: transparent;
    font-weight: 600;
}
.navbar-toggler { border-color: var(--dscc-rule-strong); }

/* These were white for the old dark sidebar and became invisible when it went
   light. Same for the section headings above each nav group. */
.user-name, .user-role, .user-info, .sidebar .user-name, .sidebar .user-role {
    color: var(--dscc-ink) !important;
}
.user-role, .nav-section-title { color: var(--dscc-ink-faint) !important; }
.user-avatar {
    background: var(--dscc-green-pale) !important;
    color: var(--dscc-green-deep) !important;
}

/* Sidebars: light, with the same marker rule. */
.sidebar,
.admin-sidebar {
    background: var(--dscc-surface) !important;
    border-right: 1px solid var(--dscc-rule);
}
.sidebar-header,
.admin-sidebar .sidebar-header {
    border-bottom: 1px solid var(--dscc-rule) !important;
}
.sidebar-header h4,
.sidebar-header h5,
.sidebar .nav-section-title,
.admin-sidebar .nav-section-title { color: var(--dscc-ink-soft) !important; }
.sidebar .nav-link,
.admin-sidebar .nav-link {
    border-left: var(--dscc-marker) solid transparent;
    color: var(--dscc-ink-soft) !important;
    border-radius: 0;
}
.sidebar .nav-link:hover,
.admin-sidebar .nav-link:hover {
    background: var(--dscc-green-pale);
    color: var(--dscc-green-deep) !important;
}
.sidebar .nav-link.active,
.admin-sidebar .nav-link.active {
    background: var(--dscc-green-pale);
    border-left-color: var(--dscc-gold);
    color: var(--dscc-green-deep) !important;
    font-weight: 600;
}

/* ======================================================================
   Panels - flat with a hairline; elevation reserved for interaction
   ====================================================================== */
.card,
.panel,
.dashboard-card {
    background: var(--dscc-surface);
    border: 1px solid var(--dscc-rule);
    border-radius: var(--dscc-radius);
    box-shadow: none;
}
.card-header {
    background: var(--dscc-surface-sunk);
    border-bottom: 1px solid var(--dscc-rule);
    font-weight: 600;
    color: var(--dscc-ink);
}
a.card:hover,
.card--interactive:hover {
    box-shadow: var(--dscc-lift-raised);
    border-color: var(--dscc-rule-strong);
}

/* ======================================================================
   Register tables - horizontal rules only. A register rules its rows; it
   does not box every cell.
   ====================================================================== */
.table {
    --bs-table-bg: transparent;
    border-color: var(--dscc-rule);
}
.table > thead > tr > th {
    background: var(--dscc-surface-sunk);
    border-bottom: 2px solid var(--dscc-rule-strong);
    color: var(--dscc-ink-soft);
    font-size: var(--dscc-text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.table > tbody > tr > td {
    border-bottom: 1px solid var(--dscc-rule);
    vertical-align: middle;
}
.table > tbody > tr:hover > td { background: var(--dscc-surface-sunk); }
.table > tbody > tr.is-current > td { background: var(--dscc-gold-pale); }
/* The marker belongs to the row, so it goes on the leading cell only.
   Putting it on every td draws a gold rule down each column instead. */
.table > tbody > tr.is-current > td:first-child {
    box-shadow: inset var(--dscc-marker) 0 0 0 var(--dscc-gold);
}

/* ======================================================================
   Buttons
   ====================================================================== */
.btn { border-radius: var(--dscc-radius); font-weight: 600; }
.btn-primary {
    --bs-btn-bg: var(--dscc-green);
    --bs-btn-border-color: var(--dscc-green);
    --bs-btn-hover-bg: var(--dscc-green-deep);
    --bs-btn-hover-border-color: var(--dscc-green-deep);
    --bs-btn-active-bg: var(--dscc-green-deep);
    --bs-btn-disabled-bg: var(--dscc-green);
    --bs-btn-disabled-border-color: var(--dscc-green);
}
/* base.css sets `border: none` on .btn, which strips the outline off every
   outline button. Bootstrap draws them with a border, so put it back here for
   the whole family rather than variant by variant. */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning, .btn-outline-info,
.btn-outline-light, .btn-outline-dark {
    border: 1px solid var(--bs-btn-border-color, currentColor);
}

/* The outline variants, on the seal palette. design-system.css covers most of
   these but is only loaded by the platform-owner base, so pages extending
   base/base.html fell back to Bootstrap's own blue, grey and red. */
.btn-outline-primary {
    --bs-btn-color: var(--dscc-green);
    --bs-btn-border-color: var(--dscc-green);
    --bs-btn-hover-bg: var(--dscc-green);
    --bs-btn-hover-border-color: var(--dscc-green);
    --bs-btn-hover-color: #fff;
}
.btn-outline-secondary {
    --bs-btn-color: var(--dscc-ink-soft);
    --bs-btn-border-color: var(--dscc-rule-strong);
    --bs-btn-hover-bg: var(--dscc-ink-soft);
    --bs-btn-hover-border-color: var(--dscc-ink-soft);
    --bs-btn-hover-color: #fff;
}
.btn-outline-success {
    --bs-btn-color: var(--dscc-ok);
    --bs-btn-border-color: var(--dscc-ok);
    --bs-btn-hover-bg: var(--dscc-ok);
    --bs-btn-hover-border-color: var(--dscc-ok);
    --bs-btn-hover-color: #fff;
}
.btn-outline-danger {
    --bs-btn-color: var(--dscc-crimson);
    --bs-btn-border-color: var(--dscc-crimson);
    --bs-btn-hover-bg: var(--dscc-crimson);
    --bs-btn-hover-border-color: var(--dscc-crimson);
    --bs-btn-hover-color: #fff;
}
.btn-outline-warning {
    --bs-btn-color: var(--dscc-warn);
    --bs-btn-border-color: var(--dscc-warn);
    --bs-btn-hover-bg: var(--dscc-warn);
    --bs-btn-hover-border-color: var(--dscc-warn);
    --bs-btn-hover-color: #fff;
}
.btn-outline-info {
    --bs-btn-color: var(--dscc-note);
    --bs-btn-border-color: var(--dscc-note);
    --bs-btn-hover-bg: var(--dscc-note);
    --bs-btn-hover-border-color: var(--dscc-note);
    --bs-btn-hover-color: #fff;
}

/* An icon-only button must still be reachable by name. */
.btn > i:only-child { pointer-events: none; }
.btn-danger {
    --bs-btn-bg: var(--dscc-crimson);
    --bs-btn-border-color: var(--dscc-crimson);
    --bs-btn-hover-bg: var(--dscc-crimson-deep);
    --bs-btn-hover-border-color: var(--dscc-crimson-deep);
}

/* Keyboard focus must survive on both the green header and white panels. */
:focus-visible {
    outline: 2px solid var(--dscc-gold);
    outline-offset: 2px;
    border-radius: 2px;
}
.navbar-main :focus-visible { outline-color: var(--dscc-gold); }

/* ======================================================================
   Status pills - tinted ground, dark text. Solid saturated fills at this
   size are hard to read and shout louder than the data they label.
   ====================================================================== */
.badge.bg-success, .status--ok {
    background: var(--dscc-ok-pale) !important;
    color: var(--dscc-ok) !important;
}
.badge.bg-warning, .status--warn {
    background: var(--dscc-warn-pale) !important;
    color: var(--dscc-warn) !important;
}
.badge.bg-danger, .status--stop {
    background: var(--dscc-stop-pale) !important;
    color: var(--dscc-stop) !important;
}
.badge.bg-info, .status--note {
    background: var(--dscc-note-pale) !important;
    color: var(--dscc-note) !important;
}
.badge.bg-primary {
    background: var(--dscc-green-pale) !important;
    color: var(--dscc-green-deep) !important;
}
.badge { font-weight: 600; border-radius: var(--dscc-radius); }

/* ======================================================================
   Forms
   ====================================================================== */
.form-control, .form-select {
    border-color: var(--dscc-rule-strong);
    border-radius: var(--dscc-radius);
    color: var(--dscc-ink);
}
.form-control:focus, .form-select:focus {
    border-color: var(--dscc-green);
    box-shadow: 0 0 0 3px rgba(29, 81, 39, 0.14);
}
.form-label { font-weight: 600; font-size: var(--dscc-text-sm); color: var(--dscc-ink-soft); }

/* ======================================================================
   Footer
   ====================================================================== */
.footer {
    background: var(--dscc-surface-sunk);
    color: var(--dscc-ink-soft);
    border-top: 2px solid var(--dscc-green);
}
.footer a,
.footer-links a { color: var(--dscc-green); }
.footer a:hover,
.footer-links a:hover { color: var(--dscc-green-deep); }
/* Still dark: the login card header and any explicit .bg-dark block. */
.bg-dark a, .login-header a { color: var(--dscc-gold); }
.bg-dark a:hover, .login-header a:hover { color: #FFFFFF; }

/* base.css tints nav hover with the old lime at rgba(191,254,42,...). On any
   light surface that reads as a stray highlighter mark. */
.nav-link:hover,
.nav-link.active { background-color: transparent; }
.navbar-main .nav-link:hover,
.navbar-custom .nav-link:hover { background-color: rgba(255,255,255,.07); }
.navbar-main .nav-link.active,
.navbar-custom .nav-link.active { background-color: rgba(255,255,255,.10); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ======================================================================
   Collection strip - a resident's last fortnight, one cell per day.
   Lives here rather than inline in the dashboard: that template's
   extra_head already carries a <style>, and an injected second one merged
   into it, silently dropping the first rule.
   ====================================================================== */
.collection-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.collection-strip .day {
    width: 40px;
    height: 44px;
    border-radius: var(--dscc-radius);
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}
/* Colour is never the only signal: every cell keeps its date. */
.collection-strip .is-completed { background: var(--dscc-ok);      color: #fff; }
.collection-strip .is-skipped   { background: var(--dscc-crimson); color: #fff; }
.collection-strip .is-pending   { background: var(--dscc-warn);    color: #fff; }
.collection-strip .is-none {
    background: var(--dscc-surface-sunk);
    color: var(--dscc-ink-faint);
    border-color: var(--dscc-rule);
}
.collection-strip .is-today { outline: 2px solid var(--dscc-gold); outline-offset: 1px; }