/* Generated from tokens/tokens.json and src/ by scripts/build.mjs. Do not edit. */
/* Tokens, fonts, base type, components and motion in one file. */

:root {
  --dg-version: "0.21.0";
  --dg-color-linen: #F4F4F2;
  --dg-color-hairline: #CFD2D4;
  --dg-color-ink: #10151B;
  --dg-color-midnight: #1F2C3A;
  --dg-color-silver: #9AA3AD;
  --dg-color-slate: #434A52;
  --dg-color-white: #FFFFFF;
  --dg-color-midnight-tint: #E0E1E3;
  --dg-color-evergreen: #2F4A3E;
  --dg-color-evergreen-tint: #D5DBD8;
  --dg-color-emerald: #2F7D5C;
  --dg-color-emerald-tint: #DCEBE2;
  --dg-color-rust: #C8572A;
  --dg-color-rust-deep: #B04A22;
  --dg-color-rust-tint: #F8EBE5;
  --dg-color-sand: #F5EFE3;
  --dg-color-sand-surface: #FFFCF6;
  --dg-color-sand-line: #D8CFB9;
  --dg-color-sand-band: #EDE5D2;
  --dg-color-sand-ink: #1F1D1A;
  --dg-color-sand-muted: #4A463F;
  --dg-color-brick: #C44D3E;
  --dg-color-brick-deep: #B04336;
  --dg-color-sage: #F2F4EE;
  --dg-color-sage-surface: #FAFBF7;
  --dg-color-sage-line: #CCD4C6;
  --dg-color-umber-night: #1A1612;
  --dg-color-umber-dusk: #221D17;
  --dg-color-umber-rule: #3A342A;
  --dg-color-pine-night: #15170F;
  --dg-color-pine-dusk: #1D1F17;
  --dg-color-pine-rule: #3A3D32;
  --dg-color-umber-tint: #2E1F1C;
  --dg-color-pine-tint: #1F2B24;
  --dg-color-umber-raised: #2C261D;
  --dg-color-umber-cream: #EDE5D2;
  --dg-color-umber-mist: #B6AB97;
  --dg-color-rust-glow: #DC6755;
  --dg-color-umber-deep: #0D0B08;
  --dg-color-pine-deep: #0C0E08;
  --dg-color-pine-raised: #25281E;
  --dg-color-pine-cream: #EBE7D8;
  --dg-color-pine-mist: #B5B1A3;
  --dg-color-emerald-glow: #6B9D83;
  --dg-color-night: #0A0E13;
  --dg-color-midnight-raised: #33475B;
  --dg-color-midnight-rule: #586674;
  --dg-color-silver-mist: #AEB7C2;
  --dg-color-harbor-glow: #90BAE3;
  --dg-color-harbor-blue: #2A66D8;
  --dg-color-claret-night: #77283F;
  --dg-color-claret-glow: #FF9EB6;
  --dg-color-claret-fill: #C8344F;
  --dg-color-evergreen-night: #1A4D33;
  --dg-color-evergreen-glow: #7EDDA8;
  --dg-color-amber-night: #55411C;
  --dg-color-amber-glow: #F5C66A;
  --dg-color-claret: #8C1D40;
  --dg-color-claret-tint: #F4E2E9;
  --dg-color-amber: #7F5A0E;
  --dg-color-amber-tint: #F3E2BC;
  --dg-color-midnight-50: #EDEEEF;
  --dg-color-midnight-100: #D2D5D8;
  --dg-color-midnight-200: #AAAFB4;
  --dg-color-midnight-300: #798089;
  --dg-color-midnight-400: #4C5661;
  --dg-color-midnight-500: #1F2C3A;
  --dg-color-midnight-600: #19232E;
  --dg-color-midnight-700: #131A23;
  --dg-color-midnight-800: #0C1217;
  --dg-color-silver-50: #F7F8F8;
  --dg-color-silver-100: #EBEDEF;
  --dg-color-silver-200: #D9DCE0;
  --dg-color-silver-300: #C2C8CE;
  --dg-color-silver-400: #AEB5BD;
  --dg-color-silver-500: #9AA3AD;
  --dg-color-silver-600: #7B828A;
  --dg-color-silver-700: #5C6268;
  --dg-color-silver-800: #3E4145;
  --dg-color-emerald-50: #EEF5F2;
  --dg-color-emerald-100: #D5E5DE;
  --dg-color-emerald-200: #B0CEC1;
  --dg-color-emerald-300: #82B19D;
  --dg-color-emerald-400: #59977D;
  --dg-color-emerald-500: #2F7D5C;
  --dg-color-emerald-600: #26644A;
  --dg-color-emerald-700: #1C4B37;
  --dg-color-emerald-800: #133225;
  --dg-color-evergreen-50: #EEF1F0;
  --dg-color-evergreen-100: #D5DBD8;
  --dg-color-evergreen-200: #B0BAB6;
  --dg-color-evergreen-300: #82928B;
  --dg-color-evergreen-400: #596E65;
  --dg-color-evergreen-500: #2F4A3E;
  --dg-color-evergreen-600: #263B32;
  --dg-color-evergreen-700: #1C2C25;
  --dg-color-evergreen-800: #131E19;
  --dg-color-rust-50: #FBF2EE;
  --dg-color-rust-100: #F4DDD4;
  --dg-color-rust-200: #EABFAE;
  --dg-color-rust-300: #DE9A7F;
  --dg-color-rust-400: #D37955;
  --dg-color-rust-500: #C8572A;
  --dg-color-rust-600: #A04622;
  --dg-color-rust-700: #783419;
  --dg-color-rust-800: #502311;
  --dg-color-claret-50: #F6EDF0;
  --dg-color-claret-100: #E8D2D9;
  --dg-color-claret-200: #D3A9B6;
  --dg-color-claret-300: #BA778C;
  --dg-color-claret-400: #A34A66;
  --dg-color-claret-500: #8C1D40;
  --dg-color-claret-600: #701733;
  --dg-color-claret-700: #541126;
  --dg-color-claret-800: #380C1A;
  --dg-color-amber-50: #F5F2EC;
  --dg-color-amber-100: #E5DECF;
  --dg-color-amber-200: #CEC0A3;
  --dg-color-amber-300: #B29C6E;
  --dg-color-amber-400: #997B3E;
  --dg-color-amber-500: #7F5A0E;
  --dg-color-amber-600: #66480B;
  --dg-color-amber-700: #4C3608;
  --dg-color-amber-800: #332406;
  --dg-bg: var(--dg-color-linen);
  --dg-surface: var(--dg-color-white);
  --dg-text: var(--dg-color-ink);
  --dg-text-muted: var(--dg-color-slate);
  --dg-border: var(--dg-color-hairline);
  --dg-border-strong: var(--dg-color-ink);
  --dg-primary: var(--dg-color-midnight);
  --dg-detail: var(--dg-color-silver);
  --dg-on-dark: var(--dg-color-linen);
  --dg-neutral-tint: var(--dg-color-midnight-tint);
  --dg-danger: var(--dg-color-claret);
  --dg-danger-tint: var(--dg-color-claret-tint);
  --dg-success: var(--dg-color-evergreen);
  --dg-success-tint: var(--dg-color-evergreen-tint);
  --dg-warning: var(--dg-color-amber);
  --dg-warning-tint: var(--dg-color-amber-tint);
  --dg-on-danger: var(--dg-color-white);
  --dg-danger-fill: var(--dg-color-claret);
  --dg-on-danger-fill: var(--dg-color-white);
  --dg-focus: var(--dg-color-ink);
  --dg-focus-on-dark: var(--dg-color-linen);
  --dg-series-1: #2F628A;
  --dg-series-1-tint: #D5E9FB;
  --dg-series-2: #B26D3A;
  --dg-series-2-tint: #FDE0CD;
  --dg-series-3: #3C867D;
  --dg-series-3-tint: #D2EDE9;
  --dg-series-4: #83669D;
  --dg-series-4-tint: #F5E4FB;
  --dg-series-5: #697D44;
  --dg-series-5-tint: #E1EAD3;
  --dg-series-6: #434582;
  --dg-series-6-tint: #D7DCF9;
  --dg-font-serif: Newsreader, Georgia, "Times New Roman", serif;
  --dg-font-sans: Manrope, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --dg-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --dg-font-hand: Caveat, Newsreader, cursive;
  --dg-type-display: 400 56px/1.08 var(--dg-font-serif);
  --dg-type-display-tracking: -1px;
  --dg-type-h1: 400 40px/1.12 var(--dg-font-serif);
  --dg-type-h1-tracking: -0.6px;
  --dg-type-h2: 400 30px/1.2 var(--dg-font-serif);
  --dg-type-h2-tracking: -0.3px;
  --dg-type-h4: 500 22px/1.3 var(--dg-font-serif);
  --dg-type-h4-tracking: -0.2px;
  --dg-type-lede: 400 21px/1.5 var(--dg-font-serif);
  --dg-type-lede-tracking: 0px;
  --dg-type-h3: 600 20px/1.3 var(--dg-font-sans);
  --dg-type-h3-tracking: 0px;
  --dg-type-body: 400 16px/1.65 var(--dg-font-sans);
  --dg-type-body-tracking: 0px;
  --dg-type-small: 400 14px/1.55 var(--dg-font-sans);
  --dg-type-small-tracking: 0px;
  --dg-type-label: 600 13px/1.3 var(--dg-font-sans);
  --dg-type-label-tracking: 1.4px;
  --dg-type-label-case: uppercase;
  --dg-type-caption: 600 13px/1.3 var(--dg-font-sans);
  --dg-type-caption-tracking: 0.8px;
  --dg-type-caption-case: uppercase;
  --dg-type-button: 600 14px/1.1 var(--dg-font-sans);
  --dg-type-button-tracking: 0.8px;
  --dg-type-button-case: uppercase;
  --dg-type-badge: 600 13px/1.25 var(--dg-font-sans);
  --dg-type-badge-tracking: 0px;
  --dg-type-figures: 600 28px/1.2 var(--dg-font-sans);
  --dg-type-figures-tracking: 0px;
  --dg-space-0: 0px;
  --dg-space-1: 4px;
  --dg-space-2: 8px;
  --dg-space-3: 12px;
  --dg-space-4: 16px;
  --dg-space-5: 20px;
  --dg-space-6: 24px;
  --dg-space-8: 32px;
  --dg-space-10: 40px;
  --dg-space-12: 48px;
  --dg-space-16: 64px;
  --dg-space-20: 80px;
  --dg-space-24: 96px;
  --dg-btn-padding: 13px 20px;
  --dg-btn-sm-padding: 9px 14px;
  --dg-btn-xs-height: 28px;
  --dg-btn-icon-size: 48px;
  --dg-btn-icon-sm-size: 36px;
  --dg-field-padding-top: 6px;
  --dg-table-type: var(--dg-type-small);
  --dg-table-head-padding: 10px 12px;
  --dg-table-cell-padding: 14px 12px;
  --dg-table-compact-head-padding: 8px 10px;
  --dg-table-compact-cell-padding: 9px 10px;
  --dg-tab-padding: 14px 0 6px;
  --dg-tabs-gap: var(--dg-space-6);
  --dg-badge-padding: 4px 8px;
  --dg-segmented-height: 44px;
  --dg-bar-padding-block: 18px;
  --dg-radius: 0px;
  --dg-radius-sm: 0px;
  --dg-radius-md: 0px;
  --dg-radius-pill: 0px;
  --dg-border-width-hairline: 1px;
  --dg-border-width-focus: 2px;
  --dg-border-width-accent: 3px;
  --dg-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dg-motion-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dg-motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dg-motion-ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --dg-motion-instant: 80ms;
  --dg-motion-fast: 120ms;
  --dg-motion-base: 200ms;
  --dg-motion-slow: 320ms;
  --dg-motion-slower: 560ms;
  --dg-motion-stagger: 60ms;
  --dg-motion-loop: 1100ms;
  --dg-motion-linger: 1600ms;
  --dg-motion-toast-hold: 4000ms;
  --dg-motion-rise: 8px;
  --dg-motion-nudge: 3px;
  --dg-motion-lift: 2px;
  --dg-motion-press: 0.97;
  --dg-motion-pop: 0.8;
  --dg-motion-bump: 1.25;
  --dg-container: 1200px;
  --dg-gutter: 24px;
  --dg-measure: 720px;
  --dg-tab-bar-height: 64px;
  --dg-action-bar-height: 76px;
}

:root,
[data-site="corporate"] {
  --dg-action: var(--dg-color-midnight);
  --dg-on-action: var(--dg-color-white);
  --dg-action-fill: var(--dg-color-midnight);
  --dg-on-action-fill: var(--dg-color-white);
  --dg-accent: var(--dg-color-silver);
  --dg-tint: var(--dg-color-midnight-tint);
  --dg-action-on-dark: var(--dg-color-linen);
  --dg-on-action-on-dark: var(--dg-color-midnight);
  --dg-bg: var(--dg-color-linen);
  --dg-surface: var(--dg-color-white);
  --dg-border: var(--dg-color-hairline);
  --dg-text: var(--dg-color-ink);
  --dg-text-muted: var(--dg-color-slate);
  --dg-border-strong: var(--dg-color-ink);
  --dg-neutral-tint: var(--dg-color-midnight-tint);
  --dg-radius-sm: 4px;
  --dg-radius-md: 8px;
  --dg-radius-pill: 999px;
  --dg-action-rgb: 31, 44, 58;
}

[data-site="investors"] {
  --dg-action: var(--dg-color-emerald);
  --dg-on-action: var(--dg-color-white);
  --dg-action-fill: var(--dg-color-emerald);
  --dg-on-action-fill: var(--dg-color-white);
  --dg-accent: var(--dg-color-emerald);
  --dg-tint: var(--dg-color-emerald-tint);
  --dg-action-on-dark: var(--dg-color-emerald);
  --dg-on-action-on-dark: var(--dg-color-white);
  --dg-bg: var(--dg-color-sage);
  --dg-surface: var(--dg-color-sage-surface);
  --dg-border: var(--dg-color-sage-line);
  --dg-text: var(--dg-color-ink);
  --dg-text-muted: var(--dg-color-slate);
  --dg-border-strong: var(--dg-color-ink);
  --dg-neutral-tint: var(--dg-color-midnight-tint);
  --dg-radius-sm: 0px;
  --dg-radius-md: 0px;
  --dg-radius-pill: 0px;
  --dg-action-rgb: 47, 125, 92;
}

[data-site="tenants"] {
  --dg-action: var(--dg-color-brick-deep);
  --dg-on-action: var(--dg-color-sand);
  --dg-action-fill: var(--dg-color-brick-deep);
  --dg-on-action-fill: var(--dg-color-sand);
  --dg-accent: var(--dg-color-brick);
  --dg-tint: var(--dg-color-rust-tint);
  --dg-action-on-dark: var(--dg-color-rust-deep);
  --dg-on-action-on-dark: var(--dg-color-white);
  --dg-bg: var(--dg-color-sand);
  --dg-surface: var(--dg-color-sand-surface);
  --dg-border: var(--dg-color-sand-line);
  --dg-text: var(--dg-color-sand-ink);
  --dg-text-muted: var(--dg-color-sand-muted);
  --dg-border-strong: var(--dg-color-sand-ink);
  --dg-neutral-tint: var(--dg-color-sand-band);
  --dg-radius-sm: 0px;
  --dg-radius-md: 0px;
  --dg-radius-pill: 0px;
  --dg-action-rgb: 176, 67, 54;
}

/* Compact density (tokens.json density.compact). */
[data-site="corporate"] {
  --dg-type-display: 400 32px/1.15 var(--dg-font-serif);
  --dg-type-display-tracking: -0.4px;
  --dg-type-h1: 400 24px/1.2 var(--dg-font-serif);
  --dg-type-h1-tracking: -0.2px;
  --dg-type-h2: 400 20px/1.25 var(--dg-font-serif);
  --dg-type-h2-tracking: -0.1px;
  --dg-type-h4: 500 17px/1.3 var(--dg-font-serif);
  --dg-type-h4-tracking: 0px;
  --dg-type-lede: 400 15px/1.5 var(--dg-font-serif);
  --dg-type-lede-tracking: 0px;
  --dg-type-h3: 600 15px/1.35 var(--dg-font-sans);
  --dg-type-h3-tracking: 0px;
  --dg-type-body: 400 14px/1.45 var(--dg-font-sans);
  --dg-type-body-tracking: 0px;
  --dg-type-small: 400 13px/1.4 var(--dg-font-sans);
  --dg-type-small-tracking: 0px;
  --dg-type-label: 600 12px/1.3 var(--dg-font-sans);
  --dg-type-label-tracking: 0px;
  --dg-type-label-case: none;
  --dg-type-caption: 600 12px/1.3 var(--dg-font-sans);
  --dg-type-caption-tracking: 0px;
  --dg-type-caption-case: none;
  --dg-type-button: 600 13px/1.15 var(--dg-font-sans);
  --dg-type-button-tracking: 0px;
  --dg-type-button-case: none;
  --dg-type-badge: 600 12px/1.25 var(--dg-font-sans);
  --dg-type-badge-tracking: 0px;
  --dg-type-figures: 600 20px/1.2 var(--dg-font-sans);
  --dg-type-figures-tracking: 0px;
  --dg-space-2: 6px;
  --dg-space-3: 8px;
  --dg-space-4: 12px;
  --dg-space-5: 14px;
  --dg-space-6: 16px;
  --dg-space-8: 20px;
  --dg-space-10: 24px;
  --dg-space-12: 32px;
  --dg-space-16: 40px;
  --dg-space-20: 48px;
  --dg-space-24: 56px;
  --dg-btn-padding: 7px 12px;
  --dg-btn-sm-padding: 5px 10px;
  --dg-btn-xs-height: 24px;
  --dg-btn-icon-size: 32px;
  --dg-btn-icon-sm-size: 26px;
  --dg-field-padding-top: 4px;
  --dg-table-type: var(--dg-type-body);
  --dg-table-head-padding: 6px 10px;
  --dg-table-cell-padding: 6px 10px;
  --dg-table-compact-head-padding: 4px 8px;
  --dg-table-compact-cell-padding: 4px 8px;
  --dg-tab-padding: 9px 10px 7px;
  --dg-tabs-gap: 0px;
  --dg-badge-padding: 2px 6px;
  --dg-segmented-height: 32px;
  --dg-bar-padding-block: 8px;
}

[data-site]:not([data-site="corporate"]) {
  --dg-type-display: 400 56px/1.08 var(--dg-font-serif);
  --dg-type-display-tracking: -1px;
  --dg-type-h1: 400 40px/1.12 var(--dg-font-serif);
  --dg-type-h1-tracking: -0.6px;
  --dg-type-h2: 400 30px/1.2 var(--dg-font-serif);
  --dg-type-h2-tracking: -0.3px;
  --dg-type-h4: 500 22px/1.3 var(--dg-font-serif);
  --dg-type-h4-tracking: -0.2px;
  --dg-type-lede: 400 21px/1.5 var(--dg-font-serif);
  --dg-type-lede-tracking: 0px;
  --dg-type-h3: 600 20px/1.3 var(--dg-font-sans);
  --dg-type-h3-tracking: 0px;
  --dg-type-body: 400 16px/1.65 var(--dg-font-sans);
  --dg-type-body-tracking: 0px;
  --dg-type-small: 400 14px/1.55 var(--dg-font-sans);
  --dg-type-small-tracking: 0px;
  --dg-type-label: 600 13px/1.3 var(--dg-font-sans);
  --dg-type-label-tracking: 1.4px;
  --dg-type-label-case: uppercase;
  --dg-type-caption: 600 13px/1.3 var(--dg-font-sans);
  --dg-type-caption-tracking: 0.8px;
  --dg-type-caption-case: uppercase;
  --dg-type-button: 600 14px/1.1 var(--dg-font-sans);
  --dg-type-button-tracking: 0.8px;
  --dg-type-button-case: uppercase;
  --dg-type-badge: 600 13px/1.25 var(--dg-font-sans);
  --dg-type-badge-tracking: 0px;
  --dg-type-figures: 600 28px/1.2 var(--dg-font-sans);
  --dg-type-figures-tracking: 0px;
  --dg-space-2: 8px;
  --dg-space-3: 12px;
  --dg-space-4: 16px;
  --dg-space-5: 20px;
  --dg-space-6: 24px;
  --dg-space-8: 32px;
  --dg-space-10: 40px;
  --dg-space-12: 48px;
  --dg-space-16: 64px;
  --dg-space-20: 80px;
  --dg-space-24: 96px;
  --dg-btn-padding: 13px 20px;
  --dg-btn-sm-padding: 9px 14px;
  --dg-btn-xs-height: 28px;
  --dg-btn-icon-size: 48px;
  --dg-btn-icon-sm-size: 36px;
  --dg-field-padding-top: 6px;
  --dg-table-type: var(--dg-type-small);
  --dg-table-head-padding: 10px 12px;
  --dg-table-cell-padding: 14px 12px;
  --dg-table-compact-head-padding: 8px 10px;
  --dg-table-compact-cell-padding: 9px 10px;
  --dg-tab-padding: 14px 0 6px;
  --dg-tabs-gap: var(--dg-space-6);
  --dg-badge-padding: 4px 8px;
  --dg-segmented-height: 44px;
  --dg-bar-padding-block: 18px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --dg-bg: var(--dg-color-ink);
  --dg-surface: var(--dg-color-midnight-600);
  --dg-text: var(--dg-color-linen);
  --dg-text-muted: var(--dg-color-silver);
  --dg-border: var(--dg-color-midnight-400);
  --dg-border-strong: var(--dg-color-silver);
  --dg-primary: var(--dg-color-midnight);
  --dg-detail: var(--dg-color-silver);
  --dg-on-dark: var(--dg-color-linen);
  --dg-neutral-tint: var(--dg-color-midnight);
  --dg-danger: var(--dg-color-claret-300);
  --dg-danger-tint: var(--dg-color-claret-800);
  --dg-success: var(--dg-color-evergreen-200);
  --dg-success-tint: var(--dg-color-evergreen-700);
  --dg-warning: var(--dg-color-amber-200);
  --dg-warning-tint: var(--dg-color-amber-800);
  --dg-on-danger: var(--dg-color-ink);
  --dg-danger-fill: var(--dg-color-claret-300);
  --dg-on-danger-fill: var(--dg-color-ink);
  --dg-focus: var(--dg-color-linen);
  --dg-focus-on-dark: var(--dg-color-linen);
  --dg-series-1: #6A9ECA;
  --dg-series-1-tint: #1E384D;
  --dg-series-2: #D79263;
  --dg-series-2-tint: #4E2B11;
  --dg-series-3: #71BBB1;
  --dg-series-3-tint: #163D38;
  --dg-series-4: #B898D6;
  --dg-series-4-tint: #432F4C;
  --dg-series-5: #A8BE82;
  --dg-series-5-tint: #2F3A1C;
  --dg-series-6: #797EC7;
  --dg-series-6-tint: #292D4E;
}

[data-theme="dark"],
[data-theme="dark"][data-site="corporate"],
[data-theme="dark"] [data-site="corporate"],
[data-site="corporate"] [data-theme="dark"] {
  --dg-action: var(--dg-color-harbor-glow);
  --dg-on-action: var(--dg-color-midnight);
  --dg-action-fill: var(--dg-color-harbor-blue);
  --dg-on-action-fill: var(--dg-color-white);
  --dg-accent: var(--dg-color-harbor-glow);
  --dg-tint: var(--dg-color-midnight-raised);
  --dg-action-on-dark: var(--dg-color-harbor-glow);
  --dg-on-action-on-dark: var(--dg-color-midnight);
  --dg-bg: var(--dg-color-night);
  --dg-surface: var(--dg-color-midnight);
  --dg-border: var(--dg-color-midnight-rule);
  --dg-text: var(--dg-color-white);
  --dg-text-muted: var(--dg-color-silver-mist);
  --dg-border-strong: var(--dg-color-silver);
  --dg-neutral-tint: var(--dg-color-midnight-raised);
  --dg-danger: var(--dg-color-claret-glow);
  --dg-danger-tint: var(--dg-color-claret-night);
  --dg-danger-fill: var(--dg-color-claret-fill);
  --dg-on-danger-fill: var(--dg-color-white);
  --dg-success: var(--dg-color-evergreen-glow);
  --dg-success-tint: var(--dg-color-evergreen-night);
  --dg-warning: var(--dg-color-amber-glow);
  --dg-warning-tint: var(--dg-color-amber-night);
  --dg-focus: var(--dg-color-harbor-glow);
  --dg-primary: var(--dg-color-midnight);
  --dg-on-dark: var(--dg-color-linen);
  --dg-detail: var(--dg-color-silver);
  --dg-series-1: #6A9ECA;
  --dg-series-1-tint: #264761;
  --dg-series-2: #D79263;
  --dg-series-2-tint: #633A1D;
  --dg-series-3: #71BBB1;
  --dg-series-3-tint: #1B4C45;
  --dg-series-4: #B898D6;
  --dg-series-4-tint: #533B5F;
  --dg-series-5: #A8BE82;
  --dg-series-5-tint: #3B4923;
  --dg-series-6: #8E88DD;
  --dg-series-6-tint: #3B406F;
  --dg-action-rgb: 144, 186, 227;
}

[data-theme="dark"][data-site="investors"],
[data-theme="dark"] [data-site="investors"],
[data-site="investors"] [data-theme="dark"] {
  --dg-action: var(--dg-color-emerald-glow);
  --dg-on-action: var(--dg-color-pine-night);
  --dg-action-fill: var(--dg-color-emerald-glow);
  --dg-on-action-fill: var(--dg-color-pine-night);
  --dg-accent: var(--dg-color-emerald-glow);
  --dg-tint: var(--dg-color-pine-tint);
  --dg-action-on-dark: var(--dg-color-emerald-glow);
  --dg-on-action-on-dark: var(--dg-color-pine-night);
  --dg-bg: var(--dg-color-pine-night);
  --dg-surface: var(--dg-color-pine-dusk);
  --dg-border: var(--dg-color-pine-rule);
  --dg-text: var(--dg-color-pine-cream);
  --dg-text-muted: var(--dg-color-pine-mist);
  --dg-border-strong: var(--dg-color-pine-mist);
  --dg-neutral-tint: var(--dg-color-pine-raised);
  --dg-danger: var(--dg-color-claret-300);
  --dg-danger-tint: var(--dg-color-claret-800);
  --dg-danger-fill: var(--dg-color-claret-300);
  --dg-on-danger-fill: var(--dg-color-ink);
  --dg-success: var(--dg-color-evergreen-200);
  --dg-success-tint: var(--dg-color-evergreen-700);
  --dg-warning: var(--dg-color-amber-200);
  --dg-warning-tint: var(--dg-color-amber-800);
  --dg-focus: var(--dg-color-pine-cream);
  --dg-primary: var(--dg-color-pine-deep);
  --dg-on-dark: var(--dg-color-pine-cream);
  --dg-detail: var(--dg-color-pine-mist);
  --dg-series-1: #6A9ECA;
  --dg-series-1-tint: #1E384D;
  --dg-series-2: #D79263;
  --dg-series-2-tint: #4E2B11;
  --dg-series-3: #71BBB1;
  --dg-series-3-tint: #163D38;
  --dg-series-4: #B898D6;
  --dg-series-4-tint: #432F4C;
  --dg-series-5: #A8BE82;
  --dg-series-5-tint: #2F3A1C;
  --dg-series-6: #797EC7;
  --dg-series-6-tint: #292D4E;
  --dg-action-rgb: 107, 157, 131;
}

[data-theme="dark"][data-site="tenants"],
[data-theme="dark"] [data-site="tenants"],
[data-site="tenants"] [data-theme="dark"] {
  --dg-action: var(--dg-color-rust-glow);
  --dg-on-action: var(--dg-color-umber-night);
  --dg-action-fill: var(--dg-color-rust-glow);
  --dg-on-action-fill: var(--dg-color-umber-night);
  --dg-accent: var(--dg-color-rust-glow);
  --dg-tint: var(--dg-color-umber-tint);
  --dg-action-on-dark: var(--dg-color-rust-glow);
  --dg-on-action-on-dark: var(--dg-color-umber-night);
  --dg-bg: var(--dg-color-umber-night);
  --dg-surface: var(--dg-color-umber-dusk);
  --dg-border: var(--dg-color-umber-rule);
  --dg-text: var(--dg-color-umber-cream);
  --dg-text-muted: var(--dg-color-umber-mist);
  --dg-border-strong: var(--dg-color-umber-mist);
  --dg-neutral-tint: var(--dg-color-umber-raised);
  --dg-danger: var(--dg-color-claret-300);
  --dg-danger-tint: var(--dg-color-claret-800);
  --dg-danger-fill: var(--dg-color-claret-300);
  --dg-on-danger-fill: var(--dg-color-ink);
  --dg-success: var(--dg-color-evergreen-200);
  --dg-success-tint: var(--dg-color-evergreen-700);
  --dg-warning: var(--dg-color-amber-200);
  --dg-warning-tint: var(--dg-color-amber-800);
  --dg-focus: var(--dg-color-umber-cream);
  --dg-primary: var(--dg-color-umber-deep);
  --dg-on-dark: var(--dg-color-umber-cream);
  --dg-detail: var(--dg-color-umber-mist);
  --dg-series-1: #6A9ECA;
  --dg-series-1-tint: #1E384D;
  --dg-series-2: #D79263;
  --dg-series-2-tint: #4E2B11;
  --dg-series-3: #71BBB1;
  --dg-series-3-tint: #163D38;
  --dg-series-4: #B898D6;
  --dg-series-4-tint: #432F4C;
  --dg-series-5: #A8BE82;
  --dg-series-5-tint: #2F3A1C;
  --dg-series-6: #797EC7;
  --dg-series-6-tint: #292D4E;
  --dg-action-rgb: 220, 103, 85;
}

[data-theme="auto"] { color-scheme: light dark; }

/* data-theme="auto": the dark rules above, when the OS asks for dark. */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --dg-bg: var(--dg-color-ink);
    --dg-surface: var(--dg-color-midnight-600);
    --dg-text: var(--dg-color-linen);
    --dg-text-muted: var(--dg-color-silver);
    --dg-border: var(--dg-color-midnight-400);
    --dg-border-strong: var(--dg-color-silver);
    --dg-primary: var(--dg-color-midnight);
    --dg-detail: var(--dg-color-silver);
    --dg-on-dark: var(--dg-color-linen);
    --dg-neutral-tint: var(--dg-color-midnight);
    --dg-danger: var(--dg-color-claret-300);
    --dg-danger-tint: var(--dg-color-claret-800);
    --dg-success: var(--dg-color-evergreen-200);
    --dg-success-tint: var(--dg-color-evergreen-700);
    --dg-warning: var(--dg-color-amber-200);
    --dg-warning-tint: var(--dg-color-amber-800);
    --dg-on-danger: var(--dg-color-ink);
    --dg-danger-fill: var(--dg-color-claret-300);
    --dg-on-danger-fill: var(--dg-color-ink);
    --dg-focus: var(--dg-color-linen);
    --dg-focus-on-dark: var(--dg-color-linen);
    --dg-series-1: #6A9ECA;
    --dg-series-1-tint: #1E384D;
    --dg-series-2: #D79263;
    --dg-series-2-tint: #4E2B11;
    --dg-series-3: #71BBB1;
    --dg-series-3-tint: #163D38;
    --dg-series-4: #B898D6;
    --dg-series-4-tint: #432F4C;
    --dg-series-5: #A8BE82;
    --dg-series-5-tint: #2F3A1C;
    --dg-series-6: #797EC7;
    --dg-series-6-tint: #292D4E;
  }
  [data-theme="auto"],
  [data-theme="auto"][data-site="corporate"],
  [data-theme="auto"] [data-site="corporate"],
  [data-site="corporate"] [data-theme="auto"] {
    --dg-action: var(--dg-color-harbor-glow);
    --dg-on-action: var(--dg-color-midnight);
    --dg-action-fill: var(--dg-color-harbor-blue);
    --dg-on-action-fill: var(--dg-color-white);
    --dg-accent: var(--dg-color-harbor-glow);
    --dg-tint: var(--dg-color-midnight-raised);
    --dg-action-on-dark: var(--dg-color-harbor-glow);
    --dg-on-action-on-dark: var(--dg-color-midnight);
    --dg-bg: var(--dg-color-night);
    --dg-surface: var(--dg-color-midnight);
    --dg-border: var(--dg-color-midnight-rule);
    --dg-text: var(--dg-color-white);
    --dg-text-muted: var(--dg-color-silver-mist);
    --dg-border-strong: var(--dg-color-silver);
    --dg-neutral-tint: var(--dg-color-midnight-raised);
    --dg-danger: var(--dg-color-claret-glow);
    --dg-danger-tint: var(--dg-color-claret-night);
    --dg-danger-fill: var(--dg-color-claret-fill);
    --dg-on-danger-fill: var(--dg-color-white);
    --dg-success: var(--dg-color-evergreen-glow);
    --dg-success-tint: var(--dg-color-evergreen-night);
    --dg-warning: var(--dg-color-amber-glow);
    --dg-warning-tint: var(--dg-color-amber-night);
    --dg-focus: var(--dg-color-harbor-glow);
    --dg-primary: var(--dg-color-midnight);
    --dg-on-dark: var(--dg-color-linen);
    --dg-detail: var(--dg-color-silver);
    --dg-series-1: #6A9ECA;
    --dg-series-1-tint: #264761;
    --dg-series-2: #D79263;
    --dg-series-2-tint: #633A1D;
    --dg-series-3: #71BBB1;
    --dg-series-3-tint: #1B4C45;
    --dg-series-4: #B898D6;
    --dg-series-4-tint: #533B5F;
    --dg-series-5: #A8BE82;
    --dg-series-5-tint: #3B4923;
    --dg-series-6: #8E88DD;
    --dg-series-6-tint: #3B406F;
    --dg-action-rgb: 144, 186, 227;
  }
  [data-theme="auto"][data-site="investors"],
  [data-theme="auto"] [data-site="investors"],
  [data-site="investors"] [data-theme="auto"] {
    --dg-action: var(--dg-color-emerald-glow);
    --dg-on-action: var(--dg-color-pine-night);
    --dg-action-fill: var(--dg-color-emerald-glow);
    --dg-on-action-fill: var(--dg-color-pine-night);
    --dg-accent: var(--dg-color-emerald-glow);
    --dg-tint: var(--dg-color-pine-tint);
    --dg-action-on-dark: var(--dg-color-emerald-glow);
    --dg-on-action-on-dark: var(--dg-color-pine-night);
    --dg-bg: var(--dg-color-pine-night);
    --dg-surface: var(--dg-color-pine-dusk);
    --dg-border: var(--dg-color-pine-rule);
    --dg-text: var(--dg-color-pine-cream);
    --dg-text-muted: var(--dg-color-pine-mist);
    --dg-border-strong: var(--dg-color-pine-mist);
    --dg-neutral-tint: var(--dg-color-pine-raised);
    --dg-danger: var(--dg-color-claret-300);
    --dg-danger-tint: var(--dg-color-claret-800);
    --dg-danger-fill: var(--dg-color-claret-300);
    --dg-on-danger-fill: var(--dg-color-ink);
    --dg-success: var(--dg-color-evergreen-200);
    --dg-success-tint: var(--dg-color-evergreen-700);
    --dg-warning: var(--dg-color-amber-200);
    --dg-warning-tint: var(--dg-color-amber-800);
    --dg-focus: var(--dg-color-pine-cream);
    --dg-primary: var(--dg-color-pine-deep);
    --dg-on-dark: var(--dg-color-pine-cream);
    --dg-detail: var(--dg-color-pine-mist);
    --dg-series-1: #6A9ECA;
    --dg-series-1-tint: #1E384D;
    --dg-series-2: #D79263;
    --dg-series-2-tint: #4E2B11;
    --dg-series-3: #71BBB1;
    --dg-series-3-tint: #163D38;
    --dg-series-4: #B898D6;
    --dg-series-4-tint: #432F4C;
    --dg-series-5: #A8BE82;
    --dg-series-5-tint: #2F3A1C;
    --dg-series-6: #797EC7;
    --dg-series-6-tint: #292D4E;
    --dg-action-rgb: 107, 157, 131;
  }
  [data-theme="auto"][data-site="tenants"],
  [data-theme="auto"] [data-site="tenants"],
  [data-site="tenants"] [data-theme="auto"] {
    --dg-action: var(--dg-color-rust-glow);
    --dg-on-action: var(--dg-color-umber-night);
    --dg-action-fill: var(--dg-color-rust-glow);
    --dg-on-action-fill: var(--dg-color-umber-night);
    --dg-accent: var(--dg-color-rust-glow);
    --dg-tint: var(--dg-color-umber-tint);
    --dg-action-on-dark: var(--dg-color-rust-glow);
    --dg-on-action-on-dark: var(--dg-color-umber-night);
    --dg-bg: var(--dg-color-umber-night);
    --dg-surface: var(--dg-color-umber-dusk);
    --dg-border: var(--dg-color-umber-rule);
    --dg-text: var(--dg-color-umber-cream);
    --dg-text-muted: var(--dg-color-umber-mist);
    --dg-border-strong: var(--dg-color-umber-mist);
    --dg-neutral-tint: var(--dg-color-umber-raised);
    --dg-danger: var(--dg-color-claret-300);
    --dg-danger-tint: var(--dg-color-claret-800);
    --dg-danger-fill: var(--dg-color-claret-300);
    --dg-on-danger-fill: var(--dg-color-ink);
    --dg-success: var(--dg-color-evergreen-200);
    --dg-success-tint: var(--dg-color-evergreen-700);
    --dg-warning: var(--dg-color-amber-200);
    --dg-warning-tint: var(--dg-color-amber-800);
    --dg-focus: var(--dg-color-umber-cream);
    --dg-primary: var(--dg-color-umber-deep);
    --dg-on-dark: var(--dg-color-umber-cream);
    --dg-detail: var(--dg-color-umber-mist);
    --dg-series-1: #6A9ECA;
    --dg-series-1-tint: #1E384D;
    --dg-series-2: #D79263;
    --dg-series-2-tint: #4E2B11;
    --dg-series-3: #71BBB1;
    --dg-series-3-tint: #163D38;
    --dg-series-4: #B898D6;
    --dg-series-4-tint: #432F4C;
    --dg-series-5: #A8BE82;
    --dg-series-5-tint: #2F3A1C;
    --dg-series-6: #797EC7;
    --dg-series-6-tint: #292D4E;
    --dg-action-rgb: 220, 103, 85;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dg-motion-rise: 0px;
    --dg-motion-nudge: 0px;
    --dg-motion-lift: 0px;
    --dg-motion-press: 1;
    --dg-motion-pop: 1;
    --dg-motion-bump: 1;
  }
}

/* Self-hosted Newsreader, Manrope and Caveat (SIL Open Font License 1.1, see fonts/OFL-*.txt).
   Newsreader roman and Manrope are variable (weights 200-800, no optical-size axis: it doubled
   the file). Newsreader italic is weight 500 for the accent phrase in a headline, plus static 400
   and 300 (Latin only, about 25 KB each) for emphasis in serif running text and the tenants numerals; a
   browser fetches a face only when a page sets that weight. Caveat is
   weight 600 only, for .dg-hand; it is not preloaded, so only a page that uses it fetches it.
   Latin and Latin Extended only; a typical page loads about 83 KB. */

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/dg_design/fonts/newsreader-italic-latin-ext-c9ba7845.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/dg_design/fonts/newsreader-italic-latin-47906bd6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/dg_design/fonts/newsreader-italic-400-latin-d61a95af.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/dg_design/fonts/newsreader-italic-300-latin-24f205ea.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/dg_design/fonts/newsreader-latin-ext-3e75907b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/dg_design/fonts/newsreader-latin-7219dc7d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/dg_design/fonts/manrope-latin-ext-2d7da881.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/dg_design/fonts/manrope-latin-8a556d91.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/dg_design/fonts/caveat-latin-ext-8283a13b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/dg_design/fonts/caveat-latin-24c7b559.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Base: page and type ----------------------------------------------------
   Nothing here styles bare elements, so the bundle can load next to Bootstrap
   or Tailwind. Opt in with class="dg-page" on <body>. */

.dg-page {
  margin: 0;
  background: var(--dg-bg);
  color: var(--dg-text);
  font: var(--dg-type-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.dg-page ::selection { background: var(--dg-tint); color: var(--dg-text); }

/* The hidden attribute wins over a component's own display (a hidden .dg-btn, list row or line).
   Not a bare [hidden] rule: Bootstrap's reboot and Tailwind's preflight already ship one, and
   hidden="until-found" must stay findable (the browser shows it on find-in-page). */
[class*="dg-"][hidden]:not([hidden="until-found"]) { display: none !important; }

/* Next to Tailwind's preflight (* { margin: 0 }), an open modal would pin to the top left;
   the browser centers a modal dialog with margin: auto. */
dialog.dg-modal:modal { margin: auto; }

/* Any Midnight surface. Switches the focus ring to a color visible on it. */
.dg-dark { --dg-focus: var(--dg-focus-on-dark); background: var(--dg-primary); color: var(--dg-on-dark); }

/* Overlays (modals, the phone menu, photo chips) dim the page in both themes: Ink at 60%. */
:root { --dg-scrim: color-mix(in srgb, var(--dg-color-ink) 60%, transparent); }

/* Skip link (dg_skip_link): hidden until focused, then pinned to the top left. */
.dg-skip-link { position: absolute; top: var(--dg-space-2); left: var(--dg-space-2); z-index: 1000; padding: var(--dg-space-2) var(--dg-space-4); background: var(--dg-surface); color: var(--dg-text); font: var(--dg-type-small); font-weight: 600; transform: translateY(-200%); }
.dg-skip-link:focus { transform: none; outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }

/* A jump to an element on the page (an error summary link, #section) stops short of the top, so a
   sticky header doesn't cover it and the field's label stays in view. Apps set the offset. */
.dg-page :target { scroll-margin-top: var(--dg-scroll-offset, 6rem); }

/* A link with no class still looks like a link (the browser default is blue). */
/* Any link the components do not style still gets the house focus ring, not the browser's. */
:where(.dg-page) a:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
/* :where() keeps a bare link as weak as one element, so a component that styles its own links
   (segmented options, tabs, menus) wins without repeating the reset. */
.dg-page a:where(:not([class])) { color: var(--dg-link, var(--dg-action)); text-decoration: underline; text-underline-offset: 3px; }
/* An email address or phone number keeps its own case and spacing inside an uppercase label or
   heading: lowercase is what tells l from I and 0 from O in an address someone has to type. */
.dg-page :is(a[href^="mailto:"], a[href^="tel:"]) { text-transform: none; letter-spacing: normal; }
/* On Midnight bands and inside alerts a bare link takes the surrounding text color. */
:is(.dg-dark, .dg-section--dark, .dg-footer, .dg-banner, .dg-bar, .dg-card--dark, .dg-alert, .dg-help__tip) { --dg-link: currentColor; }

/* With a fixed tab bar, keyboard focus and in-page links stop above it. */
html:has(.dg-tab-bar) { scroll-padding-bottom: calc(var(--dg-tab-bar-height) + env(safe-area-inset-bottom)); }

.dg-container { max-width: var(--dg-container); margin-inline: auto; padding-inline: var(--dg-gutter); }

/* Newsreader (serif) styles: headlines and ledes. */
.dg-display { margin: 0; font: var(--dg-type-display); letter-spacing: var(--dg-type-display-tracking); }
.dg-h1      { margin: 0; font: var(--dg-type-h1); letter-spacing: var(--dg-type-h1-tracking); }
.dg-h2      { margin: 0; font: var(--dg-type-h2); letter-spacing: var(--dg-type-h2-tracking); }
.dg-h4      { margin: 0; font: var(--dg-type-h4); letter-spacing: var(--dg-type-h4-tracking); }
.dg-lede    { margin: 0; font: var(--dg-type-lede); letter-spacing: var(--dg-type-lede-tracking); }
/* The accent phrase in a headline: italic in the site action color. One per headline. */
:is(.dg-display, .dg-h1, .dg-h2, .dg-h4) em { color: var(--dg-action); font-style: italic; }

/* Manrope (sans) styles: everything functional. */
.dg-h3      { margin: 0; font: var(--dg-type-h3); letter-spacing: var(--dg-type-h3-tracking); }
.dg-body    { margin: 0; font: var(--dg-type-body); }
.dg-small   { margin: 0; font: var(--dg-type-small); }
.dg-label   { margin: 0; font: var(--dg-type-label); letter-spacing: var(--dg-type-label-tracking); text-transform: var(--dg-type-label-case); }
.dg-caption { margin: 0; font: var(--dg-type-caption); letter-spacing: var(--dg-type-caption-tracking); text-transform: var(--dg-type-caption-case); }
.dg-figures { margin: 0; font: var(--dg-type-figures); font-variant-numeric: tabular-nums lining-nums; }
.dg-muted   { color: var(--dg-text-muted); }

/* Editorial pieces for a page meant to be read (the tenants home): a large italic numeral leading
   a numbered column (01, 02, 03), a passage set in Newsreader, and a quiet italic note under it
   (a column's aside, a story's attribution). The numeral and the note are the only italics
   outside a headline's accent phrase. */
.dg-numeral { display: block; margin: 0; color: var(--dg-action); font: italic 500 56px/1 var(--dg-font-serif); font-variant-numeric: lining-nums; }
.dg-body--serif { margin: 0; font: 400 17px/1.6 var(--dg-font-serif); }
.dg-footnote { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); font-style: italic; }

/* Caveat, the tenants site's handwritten accent: a greeting, a signature, a section aside.
   Never information. Caveat runs small, so 1.6em of its context and at least 20px. The site
   action color passes 4.5:1 on the page; --muted is for a quiet aside. Tilted a little, so a
   span becomes an inline block (an inline box cannot rotate). */
.dg-hand { margin: 0; color: var(--dg-action); font-family: var(--dg-font-hand); font-size: max(20px, 1.6em); font-weight: 600; line-height: 1.1; transform: rotate(-1.5deg); transform-origin: left center; }
.dg-hand--muted { color: var(--dg-text-muted); }
span.dg-hand { display: inline-block; }
/* In running text (a signature at the end of a lede), 1.25em keeps it inside the line. */
:is(p, li, dd) > span.dg-hand { font-size: max(20px, 1.25em); }

/* The wordmark is the only place the serif is set in capitals. */
.dg-wordmark {
  font-family: var(--dg-font-serif);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dg-wordmark--sm { font-size: 16px; letter-spacing: 0.25em; }

@media (max-width: 640px) {
  .dg-display { font-size: 40px; }
  .dg-h1      { font-size: 32px; }
  .dg-h2      { font-size: 26px; }
  .dg-wordmark:not(.dg-wordmark--sm) { font-size: 26px; }
}

.dg-rule { height: 0; margin: var(--dg-space-6) 0; border: 0; border-top: var(--dg-border-width-hairline) solid var(--dg-border); }
.dg-rule--accent { width: 48px; border-top-color: var(--dg-accent); }
/* Dashed: a light break between items of one list (stories, steps), under the solid rule between topics. */
.dg-rule--dashed { border-top-style: dashed; }

/* Inline links: a faint underline at rest and a full one on hover, painted as two
   1px backgrounds so motion.css can draw the full line in from the left. */
.dg-inline-link {
  color: var(--dg-action);
  text-decoration: none;
  background:
    linear-gradient(currentColor, currentColor) no-repeat right bottom / 0% 1px,
    linear-gradient(color-mix(in srgb, currentColor 35%, transparent), color-mix(in srgb, currentColor 35%, transparent)) no-repeat left bottom / 100% 1px;
}
.dg-inline-link:is(:hover, :focus-visible) { background-position: left bottom, left bottom; background-size: 100% 1px, 100% 1px; }
/* Windows high contrast drops background images; use a real underline there. */
@media (forced-colors: active) {
  .dg-inline-link { text-decoration: underline; text-underline-offset: 3px; }
}
.dg-inline-link:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }

/* Page sections (dg_section): a band of background and padding around a .dg-container.
   --alt is a White band between Linen ones, --dark a Midnight one. --sm, --lg and --none
   change the padding (--tight is the older name for --sm). */
.dg-section { padding-block: var(--dg-space-20); }
.dg-section--sm,
.dg-section--tight { padding-block: var(--dg-space-12); }
.dg-section--lg { padding-block: var(--dg-space-24); }
.dg-section--none { padding-block: 0; }
.dg-section--alt {
  border-block: var(--dg-border-width-hairline) solid var(--dg-border);
  background: var(--dg-surface);
}
.dg-section--dark { --dg-focus: var(--dg-focus-on-dark); background: var(--dg-primary); color: var(--dg-on-dark); }
/* --ruled starts a new topic after a plain band: a hairline across the top and its own padding. */
.dg-section--ruled { border-top: var(--dg-border-width-hairline) solid var(--dg-border); }
/* Two bands in a row on the same tone share one gap, not two paddings. */
.dg-section:not(.dg-section--alt, .dg-section--dark) + .dg-section:not(.dg-section--alt, .dg-section--dark, .dg-section--ruled),
.dg-section--alt + .dg-section--alt,
.dg-section--dark + .dg-section--dark { padding-top: 0; }
/* The page header already ends in padding; a plain section after it would double the gap. */
.dg-page-header + .dg-section:not(.dg-section--alt, .dg-section--dark) { padding-top: 0; }
/* …and one White band, with no hairline inside it. */
.dg-section--alt:has(+ .dg-section--alt) { border-bottom: 0; }
.dg-section--alt + .dg-section--alt { border-top: 0; }
@media (max-width: 640px) {
  .dg-section { padding-block: var(--dg-space-12); }
  .dg-section--sm,
  .dg-section--tight { padding-block: var(--dg-space-8); }
  .dg-section--lg { padding-block: var(--dg-space-16); }
}

/* Narrow: the reading width plus the gutters, for prose and single-column sections. */
.dg-container--narrow { max-width: calc(var(--dg-measure) + 2 * var(--dg-gutter)); }

/* A readable line length for text-led pages. */
.dg-measure { max-width: var(--dg-measure); }
.dg-measure--center { margin-inline: auto; }

/* Hidden on screen, read by screen readers. */
.dg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Long-form text (legal pages, articles, guides). Styles the plain elements
   inside it, so content from Markdown or a CMS needs no classes. */
/* About 70 characters a line. In em, not ch: Manrope's "0" is wide, so 68ch ran to 97. */
.dg-prose { max-width: min(var(--dg-measure), 32em); font: var(--dg-type-body); }
.dg-prose > :first-child { margin-top: 0; }
.dg-prose h2 { margin: var(--dg-space-12) 0 var(--dg-space-4); font: var(--dg-type-h2); letter-spacing: var(--dg-type-h2-tracking); }
.dg-prose h3 { margin: var(--dg-space-8) 0 var(--dg-space-3); font: var(--dg-type-h3); }
.dg-prose p,
.dg-prose ul,
.dg-prose ol { margin: 0 0 var(--dg-space-4); }
.dg-prose ul,
.dg-prose ol { padding-left: var(--dg-space-5); }
.dg-prose li + li { margin-top: var(--dg-space-2); }
.dg-prose a { color: var(--dg-action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dg-prose a:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
/* A blockquote in prose reads as an ordinary paragraph; a pull quote is opt-in with .dg-quote. */
.dg-prose blockquote { margin: 0 0 var(--dg-space-4); }
/* Pull quote: italic serif set off by the accent rule, the attribution a small label under it. */
.dg-quote { margin: var(--dg-space-8) 0; padding: var(--dg-space-2) 0 var(--dg-space-2) var(--dg-space-6); border-left: var(--dg-border-width-accent) solid var(--dg-accent); color: var(--dg-text); font: italic 400 clamp(1.3rem, 2.4vw, 1.7rem)/1.4 var(--dg-font-serif); letter-spacing: -0.01em; }
.dg-quote__cite { display: block; margin-top: var(--dg-space-3); color: var(--dg-text-muted); font: var(--dg-type-label); font-style: normal; letter-spacing: var(--dg-type-label-tracking); text-transform: var(--dg-type-label-case, uppercase); }
.dg-prose hr { margin: var(--dg-space-8) 0; border: 0; border-top: var(--dg-border-width-hairline) solid var(--dg-border); }
.dg-prose small { color: var(--dg-text-muted); font: var(--dg-type-small); }

/* ---- Components: Sharp style ------------------------------------------------
   Square corners (unless a site sets --dg-radius-*), 1px hairlines, uppercase Manrope labels. Palette colors come
   only from role variables, so data-site swaps the accent without touching this
   file. Two exceptions: hover states mix with #000 or #fff (color-mix), and the
   checkbox tick and select chevron are SVG data URIs with fixed colors
   (--dg-check-tick, --dg-select-chevron; the dark theme swaps them, see the end).
   Other icons are masks (--dg-icon-*) and take the text color.
   Resting looks and state changes only: every transition and animation is in motion.css. */

/* Button */
.dg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dg-space-2);
  box-sizing: border-box; /* links don't get it from the browser; --block on an <a> overflowed */
  padding: var(--dg-btn-padding);
  border: var(--dg-border-width-hairline) solid transparent;
  border-radius: var(--dg-radius-sm);
  font: var(--dg-type-button);
  letter-spacing: var(--dg-type-button-tracking);
  text-transform: var(--dg-type-button-case);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.dg-btn:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-btn:disabled,
.dg-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.dg-btn--primary { background: var(--dg-action-fill); color: var(--dg-on-action-fill); }
.dg-btn--primary:hover { background: color-mix(in srgb, var(--dg-action-fill) 86%, #000); }
.dg-btn--secondary { background: transparent; color: var(--dg-text); border-color: var(--dg-border-strong); }
.dg-btn--secondary:hover { background: var(--dg-text); color: var(--dg-bg); }
/* For Midnight surfaces (.dg-dark, .dg-bar). */
.dg-btn--inverse { --dg-focus: var(--dg-focus-on-dark); background: var(--dg-on-dark); color: var(--dg-action); }
/* Hover lightens the Linen toward white: darkening it would drop a green or rust label below
   4.5:1, and the surface color is Midnight in the dark theme. */
.dg-btn--inverse:hover { background: color-mix(in srgb, var(--dg-on-dark) 40%, #fff); }
.dg-btn--danger { background: var(--dg-danger-fill); color: var(--dg-on-danger-fill); }
.dg-btn--danger:hover { background: color-mix(in srgb, var(--dg-danger-fill) 86%, #000); }
/* Toned buttons: an action's kind at a glance in a row of several (move forward, schedule, put aside),
   drawn like the toned badges: the tint as fill, the tone as text and a 1px rule. Info has no status
   role, so it takes series 1 for the fill and rule and keeps body text (each pair gated in tokens.json).
   Hover doubles the rule instead of darkening the fill, which would drop the text below 4.5:1. */
.dg-btn--success { border-color: var(--dg-success); background: var(--dg-success-tint); color: var(--dg-success); }
.dg-btn--warning { border-color: var(--dg-warning); background: var(--dg-warning-tint); color: var(--dg-warning); }
.dg-btn--info { border-color: var(--dg-series-1); background: var(--dg-series-1-tint); color: var(--dg-text); }
:is(.dg-btn--success, .dg-btn--warning, .dg-btn--info):hover { box-shadow: inset 0 0 0 1px var(--dg-btn-tone-hover, currentColor); }
.dg-btn--info:hover { --dg-btn-tone-hover: var(--dg-series-1); }
/* No box at rest, a tint on hover: an icon inside a row or a nav, where a bordered square is noise. */
.dg-btn--quiet { border-color: transparent; background: transparent; color: var(--dg-text-muted); }
.dg-btn--quiet:hover { background: color-mix(in srgb, var(--dg-text) 10%, transparent); color: var(--dg-text); }
/* 13px: uppercase is never set smaller (see the type note in tokens.json). */
.dg-btn--sm { padding: var(--dg-btn-sm-padding); font-size: 13px; }
.dg-btn--block { display: flex; width: 100%; }
/* Icon button (dg_icon_button): a square holding one dg_icon, named by aria-label. A toggle
   (Save / Saved) carries aria-pressed; pressed, it looks like a chosen boxed answer. */
.dg-btn--icon { flex: none; width: var(--dg-btn-icon-size); height: var(--dg-btn-icon-size); padding: 0; }
.dg-btn--icon.dg-btn--sm { width: var(--dg-btn-icon-sm-size); height: var(--dg-btn-icon-sm-size); }
.dg-btn--secondary.dg-btn--icon[aria-pressed="true"] { border-color: var(--dg-action); background: var(--dg-tint); color: var(--dg-action); }
.dg-btn--secondary.dg-btn--icon[aria-pressed="true"]:hover { background: var(--dg-action); color: var(--dg-on-action); }

/* Link (navigational, uppercase). For links inside paragraphs use .dg-inline-link. */
.dg-link {
  padding-bottom: 2px;
  border-bottom: var(--dg-border-width-hairline) solid transparent;
  color: var(--dg-action);
  font: var(--dg-type-button);
  letter-spacing: var(--dg-type-button-tracking);
  text-transform: var(--dg-type-button-case);
  text-decoration: none;
}
/* On a <button> (Remove, Undo): drop the browser's button box. */
/* dg_link(plain: true): a link in running text, a phone number or an email. Sentence case. */
.dg-link--plain { padding-bottom: 0; border-bottom: 0; font: inherit; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; }
button.dg-link { padding-inline: 0; padding-top: 0; border-width: 0 0 var(--dg-border-width-hairline); background: none; cursor: pointer; }
.dg-link:hover { border-bottom-color: currentColor; }
.dg-link:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 3px; }
/* Icon: dg_icon (Phosphor Light), sized by its width and height, colored by the text. */
.dg-icon { display: inline-block; flex: none; vertical-align: -0.2em; }
.dg-btn .dg-icon,
.dg-link .dg-icon { vertical-align: -0.25em; }

/* Arrows, chevrons, checks and crosses are SVG masks painted in currentColor:
   the → ✓ ✕ characters are not in the shipped font subsets. A checkbox tick and a select
   chevron are backgrounds, which can't take currentColor, so they carry their color. */
:root {
  --dg-check-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E");
  --dg-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%2310151B' stroke-width='1.2'/%3E%3C/svg%3E");
  --dg-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h9.5M6.5 2l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --dg-icon-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11 6H1.5M5.5 2l-4 4 4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --dg-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9l6-6M4.5 3H9v4.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --dg-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --dg-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --dg-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --dg-icon-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --dg-icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --dg-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 3h10M1 6h10M1 9h10' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}
.dg-link--arrow::after,
.dg-link--external::after,
.dg-link--back::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.1em;
  background: currentColor;
  -webkit-mask: var(--dg-mask) center / contain no-repeat;
  mask: var(--dg-mask) center / contain no-repeat;
}
.dg-link--arrow::after { --dg-mask: var(--dg-icon-arrow); margin-left: 0.45em; }
.dg-link--external::after { --dg-mask: var(--dg-icon-external); margin-left: 0.4em; }
.dg-link--back::before { --dg-mask: var(--dg-icon-back); margin-right: 0.45em; }
/* Arrow and back links stand alone as navigation, so they get a 24px target (WCAG 2.5.8). */
.dg-link--arrow,
.dg-link--back { display: inline-block; padding-top: 4px; padding-bottom: 4px; }
/* A link that is not available (first or last page). */
.dg-link[aria-disabled="true"] { color: var(--dg-text-muted); pointer-events: none; }

/* Field: label, underline input, hint or error */
.dg-field { display: flex; flex-direction: column; gap: var(--dg-space-1); }
.dg-field__label { color: var(--dg-text); font: var(--dg-type-small); font-weight: 500; }
.dg-field__input {
  box-sizing: border-box;
  width: 100%;
  /* The underline sits close under the text, and the label 10px above it, so a label reads as
     its own field's in a stack of fields. The input is still 30px tall (26px compact). */
  padding: var(--dg-field-padding-top) 0 3px;
  border: 0;
  border-bottom: var(--dg-border-width-hairline) solid var(--dg-border-strong);
  border-radius: var(--dg-radius-sm);
  background: transparent;
  color: var(--dg-text);
  font: var(--dg-type-body);
  line-height: 1.25;
  appearance: none;
}
.dg-field__input::placeholder { color: var(--dg-text-muted); opacity: 1; }
/* Focus shows as a thicker underline. The transparent outline is invisible until Windows high
   contrast drops the shadow and paints it, so focus still shows there. */
.dg-field__input:focus { outline: var(--dg-border-width-focus) solid transparent; outline-offset: 2px; border-bottom-color: var(--dg-action); box-shadow: 0 1px 0 0 var(--dg-action); }
/* A checkbox or radio also gets the ring on keyboard focus. Text fields, selects and file fields
   do not: browsers treat a click into them as focus-visible, so a ring sat round the field while
   someone used it; the thicker underline in the action colour marks it. */
:is([type="checkbox"], [type="radio"]).dg-field__input:focus-visible { outline-color: var(--dg-focus); outline-offset: 4px; }
/* A date, month, week or time field sizes to its value instead of stretching across a row. */
.dg-field__input:is([type="date"], [type="month"], [type="week"], [type="time"]) { width: auto; max-width: 100%; align-self: start; justify-self: start; }
/* A checkbox or radio given the text-field class (form builder defaults) stays a box. */
.dg-field__input:is([type="checkbox"], [type="radio"]) { width: auto; padding: 0; border: 0; box-shadow: none; appearance: auto; }
textarea.dg-field__input { min-height: 96px; resize: vertical; }
select.dg-field__input {
  padding-right: 24px;
  /* Centred on the text, not the box: the padding plus half the 1.25 line, less half the chevron. */
  background: var(--dg-select-chevron) right 0 top calc(var(--dg-field-padding-top) + 0.625em - 6px) / 12px no-repeat;
}
/* The open list is drawn by the browser; on some systems it stays white whatever the theme, so the
   options carry their own colors instead of inheriting the field's. */
select.dg-field__input option { background-color: var(--dg-surface); color: var(--dg-text); }
.dg-field__hint { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-field__error { margin: 0; color: var(--dg-danger); font: var(--dg-type-small); }
.dg-field--error .dg-field__input { border-bottom-color: var(--dg-danger); box-shadow: 0 1px 0 0 var(--dg-danger); }
/* A prefix such as "$": the underline moves from the input to the wrapper. */
.dg-field__control {
  display: flex;
  align-items: baseline;
  gap: var(--dg-space-2);
  border-bottom: var(--dg-border-width-hairline) solid var(--dg-border-strong);
}
.dg-field__control .dg-field__input,
.dg-field__control .dg-field__input:focus { border-bottom: 0; box-shadow: none; outline: none; }
.dg-field__control:focus-within { outline: var(--dg-border-width-focus) solid transparent; outline-offset: 2px; border-bottom-color: var(--dg-action); box-shadow: 0 1px 0 0 var(--dg-action); }
.dg-field--error .dg-field__control { border-bottom-color: var(--dg-danger); box-shadow: 0 1px 0 0 var(--dg-danger); }
.dg-field__prefix { color: var(--dg-text-muted); font: var(--dg-type-body); }
/* Suggestions: a list under a search or address field. Wrap the input and the list in
   .dg-combobox; the input takes role="combobox", the list role="listbox" and each row
   role="option". The app fills the list and moves aria-selected="true" with the arrow keys. */
.dg-combobox { position: relative; }
.dg-suggest {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 30;
  max-height: 20rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: var(--dg-border-width-hairline) solid var(--dg-border-strong);
  border-radius: var(--dg-radius-sm);
  background: var(--dg-surface);
  list-style: none;
}
.dg-suggest__option { display: flex; flex-direction: column; gap: 2px; padding: var(--dg-space-3) var(--dg-space-4); color: var(--dg-text); font: var(--dg-type-body); font-weight: 500; line-height: 1.3; cursor: pointer; }
.dg-suggest__option + .dg-suggest__option { border-top: var(--dg-border-width-hairline) solid var(--dg-border); }
.dg-suggest__option:hover,
.dg-suggest__option[aria-selected="true"] { background: var(--dg-tint); }
.dg-suggest__detail { color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-suggest__empty { padding: var(--dg-space-4); color: var(--dg-text-muted); font: var(--dg-type-small); }
/* File inputs: the picker button looks like a small secondary button. */
.dg-field__input[type="file"] { padding: 8px 0; border-bottom: 0; color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-field__input[type="file"]:focus { box-shadow: none; }
.dg-field__input[type="file"]:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-field__input::file-selector-button {
  margin-right: var(--dg-space-3);
  padding: 9px 14px;
  border: var(--dg-border-width-hairline) solid var(--dg-border-strong);
  border-radius: var(--dg-radius-sm);
  background: transparent;
  color: var(--dg-text);
  font: var(--dg-type-button);
  font-size: 12px;
  letter-spacing: var(--dg-type-button-tracking);
  text-transform: var(--dg-type-button-case);
  cursor: pointer;
}
.dg-field__input::file-selector-button:hover { background: var(--dg-text); color: var(--dg-bg); }
/* Drop zone (dg_drop_zone): a dashed area around a file input. The input covers the zone, so a
   click opens the picker and a dropped file lands in the input without JavaScript. Add
   --over while a file is dragged over it, if the app's JavaScript tracks that. */
.dg-drop-zone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--dg-space-2);
  padding: var(--dg-space-10) var(--dg-space-6);
  border: var(--dg-border-width-hairline) dashed var(--dg-border-strong);
  background: var(--dg-surface);
  color: var(--dg-text);
  text-align: center;
}
/* It sizes to its prompt (at least 18rem, never past its column) and sits at the start, so a
   short "Choose a file" is not a bar across the page. */
.dg-drop-zone { justify-self: start; inline-size: fit-content; min-inline-size: min(100%, 18rem); max-inline-size: 100%; box-sizing: border-box; }
.dg-drop-zone > .dg-icon { margin-bottom: var(--dg-space-1); color: var(--dg-action); }
.dg-drop-zone__title { color: var(--dg-text); font: var(--dg-type-h3); }
.dg-drop-zone__body { margin: 0; font: var(--dg-type-body); }
.dg-drop-zone__browse { color: var(--dg-action); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dg-drop-zone__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dg-drop-zone:hover { border-color: var(--dg-action); }
.dg-drop-zone--over { border-style: solid; border-color: var(--dg-action); }
.dg-drop-zone:has(input[type="file"]:focus-visible) { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-drop-zone--error { border-color: var(--dg-danger); }
/* Button drop zone (.dg-drop-zone--button on a <label> holding an icon, its text and the file
   input): a one-line picker the size of a button that still takes a dropped file, for an uploader
   whose picker is the page's action. --primary fills it like a primary button. */
.dg-drop-zone--button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dg-space-2);
  min-inline-size: 0;
  padding: var(--dg-btn-padding);
  border-radius: var(--dg-radius-sm);
  font: var(--dg-type-button);
  letter-spacing: var(--dg-type-button-tracking);
  text-transform: var(--dg-type-button-case);
  white-space: nowrap;
  cursor: pointer;
}
.dg-drop-zone--button > .dg-icon { flex: none; margin: 0; }
.dg-drop-zone--button > input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dg-drop-zone--button:is(:hover, .dg-drop-zone--over) { border-style: solid; background: var(--dg-tint); }
.dg-drop-zone--primary { border: var(--dg-border-width-hairline) solid var(--dg-action-fill); background: var(--dg-action-fill); color: var(--dg-on-action-fill); }
.dg-drop-zone--primary > .dg-icon { color: inherit; }
.dg-drop-zone--primary:is(:hover, .dg-drop-zone--over) { border-color: var(--dg-action-fill); background: color-mix(in srgb, var(--dg-action-fill) 86%, #000); }

/* Uploader: a drop zone (or a button) and a queue of files, each with its state. The app's script
   adds and updates the rows (dg_uploader_file renders the same markup for files already attached).
   A failed or refused file gets the danger rule and its reason in the status line. */
.dg-uploader { display: grid; gap: var(--dg-space-4); }
.dg-uploader__queue { margin: 0; padding: 0; list-style: none; border: var(--dg-border-width-hairline) solid var(--dg-border); background: var(--dg-surface); }
.dg-uploader__file { display: flex; align-items: center; gap: var(--dg-space-3); padding: var(--dg-space-3) var(--dg-space-4); }
.dg-uploader__file + .dg-uploader__file { border-top: var(--dg-border-width-hairline) solid var(--dg-border); }
.dg-uploader__preview { display: flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; object-fit: cover; background: var(--dg-bg); color: var(--dg-text-muted); }
.dg-uploader__main { display: grid; flex: 1; gap: 2px; min-width: 0; }
.dg-uploader__name { overflow: hidden; font: var(--dg-type-body); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.dg-uploader__status { display: flex; align-items: center; gap: 6px; color: var(--dg-text-muted); font: var(--dg-type-small); font-variant-numeric: tabular-nums; }
.dg-uploader__track { height: 2px; margin-top: var(--dg-space-1); background: var(--dg-border); }
.dg-uploader__fill { display: block; height: 100%; background: var(--dg-action); }
.dg-uploader__file--done .dg-uploader__status { color: var(--dg-success); }
.dg-uploader__file--failed { box-shadow: inset var(--dg-border-width-accent) 0 0 var(--dg-danger); }
.dg-uploader__file--failed .dg-uploader__status { color: var(--dg-danger); }
.dg-uploader__summary { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); font-variant-numeric: tabular-nums; }
/* Nothing to report yet (or every action hidden, as when uploads start on their own): no empty row or rule. */
.dg-uploader__summary:empty,
.dg-form-actions:not(:has(> :not([hidden]))) { display: none; }

/* Compact fields for filter bars. */
.dg-field--compact { --dg-field-padding-top: 4px; gap: var(--dg-space-1); }
.dg-field--compact .dg-field__label { color: var(--dg-text-muted); font: var(--dg-type-caption); letter-spacing: var(--dg-type-caption-tracking); text-transform: var(--dg-type-caption-case); }
.dg-field--compact .dg-field__input { font: var(--dg-type-small); line-height: 1.25; }
.dg-field--compact select.dg-field__input { padding-right: 22px; }

/* Checkbox and radio, filled with the site action color when on: the checkbox a ticked square, the
   radio always a circle with a dot (on every site, square corners or not), so the two never read alike. */
.dg-check { display: inline-flex; align-items: center; gap: 10px; color: var(--dg-text); font: var(--dg-type-body); cursor: pointer; }
.dg-check__input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: var(--dg-border-width-hairline) solid var(--dg-border-strong);
  border-radius: var(--dg-radius-sm);
  background: var(--dg-surface) center / 12px no-repeat;
  appearance: none;
  cursor: pointer;
}
.dg-check__input[type="radio"] { border-radius: 50%; }
.dg-check__input:checked {
  border-color: var(--dg-action);
  background-color: var(--dg-action);
  background-image: var(--dg-check-tick);
}
.dg-check__input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 4px var(--dg-surface); }
.dg-check__input:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-check__input:disabled { opacity: 0.45; cursor: not-allowed; }
/* dg_checkbox with an error: the box takes the danger color. */
.dg-check--error .dg-check__input { border-color: var(--dg-danger); }
/* A checkbox or radio with a second line of explanation. */
.dg-check--hint { align-items: flex-start; }
.dg-check--hint .dg-check__input { margin-top: 3px; }
.dg-check__text { display: flex; flex-direction: column; gap: 2px; }
.dg-check__hint { color: var(--dg-text-muted); font: var(--dg-type-small); }
/* Consent: a standalone opt-in line ("Text me. Reply STOP to opt out."), dg_checkbox consent: true.
   A 44px tap height, and the box stays on the first line when the words wrap. */
.dg-check--consent { align-items: flex-start; box-sizing: border-box; min-height: 44px; padding-block: 10px; }
.dg-check--consent .dg-check__input { margin-top: 4px; }
/* Radios or checkboxes in a row (yes / no pairs). --boxed draws each as a box. */
.dg-choices { display: flex; flex-wrap: wrap; gap: var(--dg-space-3) var(--dg-space-6); margin: 0; padding: 0; border: 0; }
.dg-choices--boxed { gap: var(--dg-space-2); }
.dg-choices--boxed .dg-check {
  padding: 11px 16px;
  border: var(--dg-border-width-hairline) solid var(--dg-border);
  border-radius: var(--dg-radius-sm);
  background: var(--dg-surface);
}
.dg-choices--boxed .dg-check:hover { border-color: var(--dg-border-strong); }
.dg-choices--boxed .dg-check:has(:checked) { border-color: var(--dg-action); background: var(--dg-tint); }
/* Answers: boxed choices sized for a thumb, for one question per screen (dg_radios boxed: :answers).
   One answer per row; --short sets short answers (Yes / No, 1 2 3 4+) side by side in even
   columns (boxed: :short_answers). */
.dg-choices--answers { flex-direction: column; flex-wrap: nowrap; }
.dg-choices--answers .dg-check { box-sizing: border-box; min-height: 56px; padding: 14px 16px; }
/* A box is never wider than --dg-choices-box-max (10rem), so Yes / No stay two ordinary boxes on
   a wide screen. --short alone lets the boxes share a row as far as the room goes (72px at
   least), so a row of three and a row of two come out different widths. Fix the count with
   --cols-2, --cols-3 or --cols-4 (dg_radios cols:): the boxes share the width on a phone and stop
   growing at the cap. Other counts: add .dg-choices--cols and set --dg-choices-cols on the element. */
.dg-choices--short { --dg-choices-box-max: 10rem; flex-direction: row; flex-wrap: wrap; }
.dg-choices--short .dg-check { flex: 1 1 72px; max-width: var(--dg-choices-box-max); padding-inline: 12px; }
.dg-choices--cols {
  display: grid;
  grid-template-columns: repeat(var(--dg-choices-cols), minmax(0, 1fr));
  max-width: calc(var(--dg-choices-cols) * var(--dg-choices-box-max) + (var(--dg-choices-cols) - 1) * var(--dg-space-2));
}
.dg-choices--cols .dg-check { gap: 6px; padding-inline: 8px; }
.dg-choices--cols-2 { --dg-choices-cols: 2; }
.dg-choices--cols-3 { --dg-choices-cols: 3; }
.dg-choices--cols-4 { --dg-choices-cols: 4; }
/* Segmented switch: two to four short options joined in one bar, one of them chosen (Drive /
   Walk / Bus, List / Map). Radios (dg_radios boxed: :segmented) need no script; buttons with
   aria-pressed or links with aria-current switch a view. A hint under an option (Coming soon)
   sits in small capitals. */
.dg-segmented {
  max-width: 100%;
  overflow-x: auto;
  display: inline-grid;
  grid-auto-columns: minmax(max-content, 1fr);
  grid-auto-flow: column;
  gap: 0;
  border: var(--dg-border-width-hairline) solid var(--dg-border-strong);
  border-radius: var(--dg-radius-pill); /* the options are square; the scroller clips them to it */
  background: var(--dg-surface);
}
.dg-segmented > :is(.dg-check, button, a) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-sizing: border-box;
  min-height: var(--dg-segmented-height);
  margin: 0;
  padding: 0 var(--dg-space-4);
  border: 0;
  border-radius: 0;
  background: var(--dg-surface);
  color: var(--dg-text);
  font: var(--dg-type-body);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
/* Small: a filter row beside fields, not a page-level switch. */
.dg-segmented--sm > :is(.dg-check, button, a) { min-height: 32px; padding-inline: var(--dg-space-3); font: var(--dg-type-small); font-weight: 500; }
.dg-segmented > * + * { border-left: var(--dg-border-width-hairline) solid var(--dg-border-strong); }
.dg-segmented > :not(:has(:checked, :disabled), [aria-pressed="true"], [aria-current="page"], [aria-current="true"], :disabled, [aria-disabled="true"]):hover { background: var(--dg-tint); }
.dg-segmented > :is(.dg-check:has(:checked), [aria-pressed="true"], [aria-current="page"], [aria-current="true"]) { background: var(--dg-action-fill); color: var(--dg-on-action-fill); }
.dg-segmented > :is(:disabled, [aria-disabled="true"], .dg-check:has(:disabled)) { background: var(--dg-bg); color: var(--dg-text-muted); cursor: not-allowed; }
.dg-segmented > :is(button, a):focus-visible,
.dg-segmented > .dg-check:has(:focus-visible) { z-index: 1; outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
/* The radio covers its option, unseen, so the whole option is its target. */
.dg-segmented .dg-check__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.dg-segmented .dg-check__text { align-items: center; }
.dg-segmented .dg-check__hint { color: inherit; font: var(--dg-type-caption); letter-spacing: var(--dg-type-caption-tracking); text-transform: var(--dg-type-caption-case); }
/* Windows high contrast drops backgrounds and shadows; use native controls there. */
@media (forced-colors: active) {
  .dg-check__input { appearance: auto; }
}

/* Help: a circled question mark that shows a short explanation on hover, keyboard focus or
   tap. Works without JavaScript; commands.js keeps the bubble on screen by setting
   --dg-help-shift, --dg-help-max and .dg-help--below. ::before bridges the gap so the pointer
   can move onto the bubble. */
.dg-help { position: relative; display: inline-flex; vertical-align: middle; }
.dg-help__button {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -4px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dg-text-muted);
  cursor: help;
  transition: color var(--dg-motion-fast) var(--dg-motion-ease);
}
.dg-help__button .dg-icon { vertical-align: 0; }
.dg-help:hover .dg-help__button,
.dg-help:focus-within .dg-help__button { color: var(--dg-action); }
.dg-help__button:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 0; }
.dg-help__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: -8px;
  z-index: 20;
  width: max-content;
  max-width: min(280px, calc(100vw - 2 * var(--dg-gutter)), var(--dg-help-max, 280px));
  padding: var(--dg-space-3) var(--dg-space-4);
  border: var(--dg-border-width-hairline) solid transparent; /* shows in forced colors */
  border-radius: var(--dg-radius-sm);
  background: var(--dg-primary);
  color: var(--dg-on-dark);
  font: var(--dg-type-small);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  /* Closed, the bubble is out of layout, so one near the edge can't widen the page. */
  display: none;
  opacity: 0;
  transition: opacity var(--dg-motion-fast) var(--dg-motion-ease), display var(--dg-motion-fast) allow-discrete;
  translate: var(--dg-help-shift, 0px) 0;
}
.dg-help__tip::before { content: ""; position: absolute; top: 100%; right: 0; left: 0; height: 12px; }
/* The caret points at the mark's centre (12px into the 24px button, 8px in from the bubble),
   and moves back by the bubble's shift so it still does. */
.dg-help__tip::after { content: ""; position: absolute; top: 100%; left: calc(15px - var(--dg-help-shift, 0px)); border: 5px solid transparent; border-top-color: var(--dg-primary); }
.dg-help--end .dg-help__tip { right: -8px; left: auto; }
.dg-help--end .dg-help__tip::after { right: calc(15px + var(--dg-help-shift, 0px)); left: auto; }
/* No room above: the bubble opens below the mark. */
.dg-help--below .dg-help__tip { top: calc(100% + 10px); bottom: auto; }
.dg-help--below .dg-help__tip::before { top: auto; bottom: 100%; }
.dg-help--below .dg-help__tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--dg-primary); }
.dg-help:hover .dg-help__tip,
.dg-help:focus-within .dg-help__tip { display: block; opacity: 1; }
@starting-style {
  .dg-help:hover .dg-help__tip,
  .dg-help:focus-within .dg-help__tip { opacity: 0; }
}
/* Escape hides the bubble (commands.js) until the pointer or focus leaves. */
.dg-help.dg-help--hidden .dg-help__tip { display: none; opacity: 0; }
.dg-field__head { display: flex; align-items: center; gap: var(--dg-space-1); }

/* Badge: the same colors on every site, so a status reads the same everywhere. The tone is the
   background; the text is always Ink. Sentence case at 13px: a badge can hold a short phrase.
   A sentence-length warning is a dg_alert, not a badge. */
.dg-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--dg-badge-padding);
  border-radius: var(--dg-radius-pill);
  background: var(--dg-neutral-tint);
  color: var(--dg-text);
  font: var(--dg-type-badge);
  letter-spacing: var(--dg-type-badge-tracking);
  white-space: nowrap;
}
.dg-badge--neutral { background: var(--dg-neutral-tint); }
/* A toned badge takes its tone's colour for the text too: the tints are kept faint for alerts,
   so on their own they read as neutral. Each pair is gated at 4.5:1 in both themes. */
.dg-badge--danger { background: var(--dg-danger-tint); color: var(--dg-danger); }
.dg-badge--success { background: var(--dg-success-tint); color: var(--dg-success); }
.dg-badge--warning { background: var(--dg-warning-tint); color: var(--dg-warning); }

/* Count: a number on a tab, nav item or heading. */
.dg-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: var(--dg-radius-pill);
  background: var(--dg-action);
  color: var(--dg-on-action);
  font: var(--dg-type-caption);
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}

/* Card */
.dg-card {
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-4);
  padding: var(--dg-space-6);
  border: var(--dg-border-width-hairline) solid var(--dg-border);
  border-radius: var(--dg-radius-md);
  background: var(--dg-surface);
  color: var(--dg-text);
  text-decoration: none;
}
/* Linked card (dg_card or dg_card_head with href:): the title link stretches over the whole card, so the card
   is one click target but screen readers hear only the title. Other links and buttons in it
   sit above the stretched link. */
.dg-card:has(.dg-card__link) { position: relative; }
.dg-card__link { color: inherit; text-decoration: none; }
.dg-card__link::after { content: ""; position: absolute; inset: 0; }
.dg-card:has(.dg-card__link) :is(a, button, input, select, textarea, summary, label, [tabindex]):not(.dg-card__link) { position: relative; z-index: 1; }
.dg-card:has(.dg-card__link):hover { border-color: var(--dg-border-strong); }
/* The focus ring goes round the card, not the title. */
.dg-card__link:focus-visible { outline: none; }
.dg-card:has(.dg-card__link:focus-visible) { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
/* On a Midnight card the Linen ring goes inside, where it shows. */
.dg-card--dark:has(.dg-card__link:focus-visible) { outline-offset: calc(-2 * var(--dg-border-width-focus)); }
/* On a narrow card the badge moves above the title instead of squeezing it to a word a line. */
.dg-card__head { display: flex; flex-wrap: wrap-reverse; align-items: flex-start; justify-content: space-between; gap: var(--dg-space-2) var(--dg-space-4); }
.dg-card__heading { display: flex; flex-direction: column; gap: var(--dg-space-2); min-width: 0; }
/* Beside a badge it takes the room; straight inside the (column) card a 14rem basis would be its height. */
.dg-card__head > .dg-card__heading { flex: 1 1 14rem; }
.dg-card__title { margin: 0; font: var(--dg-type-h4); letter-spacing: var(--dg-type-h4-tracking); }
.dg-card__body { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dg-space-4);
  padding-top: var(--dg-space-4);
  border-top: var(--dg-border-width-hairline) solid var(--dg-border);
}
.dg-card__meta-label { color: var(--dg-text-muted); font: var(--dg-type-label); letter-spacing: var(--dg-type-label-tracking); text-transform: var(--dg-type-label-case); }
.dg-card__meta-value { font: var(--dg-type-body); font-weight: 500; font-variant-numeric: tabular-nums; }
.dg-card__eyebrow { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-label); letter-spacing: var(--dg-type-label-tracking); text-transform: var(--dg-type-label-case); }
.dg-card__amount { margin: 0; color: var(--dg-text); font: var(--dg-type-figures); font-variant-numeric: tabular-nums lining-nums; }
.dg-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dg-space-3); margin-top: var(--dg-space-2); }
/* A photo across the top of the card, edge to edge. */
.dg-card__media { order: -1; margin: calc(-1 * var(--dg-space-6)) calc(-1 * var(--dg-space-6)) 0; }
.dg-card__media { position: relative; }
.dg-card__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dg-card__media > .dg-badge { position: absolute; top: var(--dg-space-3); left: var(--dg-space-3); }
/* A photo card (listings): its badge sits on the photo, and the facts below sit closer together. */
.dg-card:has(> .dg-card__media) { position: relative; gap: var(--dg-space-2); }
.dg-card:has(> .dg-card__media) > .dg-card__media { margin-bottom: var(--dg-space-3); }
.dg-card:has(> .dg-card__media) > .dg-card__head > .dg-badge { position: absolute; top: var(--dg-space-3); left: var(--dg-space-3); z-index: 2; }
.dg-card:has(> .dg-card__media) .dg-card__amount { font: var(--dg-type-h3); }
/* Accent and danger: a 3px rule on the left, like stats and alerts. */
.dg-card--accent { border-left: var(--dg-border-width-accent) solid var(--dg-accent); }
.dg-card--danger { border-left: var(--dg-border-width-accent) solid var(--dg-danger); }
/* Midnight card for headline money. */
.dg-card--dark { --dg-focus: var(--dg-focus-on-dark); border-color: var(--dg-primary); background: var(--dg-primary); color: var(--dg-on-dark); }
.dg-card--dark .dg-card__amount,
.dg-card--dark .dg-card__title { color: var(--dg-on-dark); }
.dg-card--dark .dg-card__eyebrow,
.dg-card--dark .dg-card__body,
.dg-card--dark .dg-card__meta-label { color: var(--dg-detail); }
.dg-card--dark .dg-card__meta { border-top-color: color-mix(in srgb, var(--dg-detail) 40%, transparent); }
/* A card inside a card: Linen, no border. */
.dg-card--inset { padding: var(--dg-space-4) var(--dg-space-5); border-color: transparent; background: var(--dg-bg); }
/* Inside a dark card the inset is a lighter Midnight, not the light page color under light text. */
.dg-card--dark .dg-card--inset { background: color-mix(in srgb, var(--dg-on-dark) 10%, var(--dg-primary)); }
.dg-card--dark .dg-card--inset .dg-card__body { color: var(--dg-on-dark); }

/* Stat: a key number with an accent bar */
.dg-stat { display: flex; flex-direction: column; gap: 4px; padding-left: var(--dg-space-4); border-left: var(--dg-border-width-accent) solid var(--dg-accent); }
.dg-stat__value { color: var(--dg-text); font: var(--dg-type-figures); font-variant-numeric: tabular-nums lining-nums; }
.dg-stat__label { color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-stat--danger { border-left-color: var(--dg-danger); }
.dg-stat--danger .dg-stat__value { color: var(--dg-danger); }
a.dg-stat { color: inherit; text-decoration: none; }
/* Linked stats: on hover the label underlines and an arrow appears after it. */
a.dg-stat .dg-stat__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
a.dg-stat:hover .dg-stat__label { color: var(--dg-action); text-decoration-color: currentColor; }
a.dg-stat .dg-stat__label::after {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--dg-icon-arrow) center / contain no-repeat;
  mask: var(--dg-icon-arrow) center / contain no-repeat;
  opacity: 0;
}
a.dg-stat:is(:hover, :focus-visible) .dg-stat__label::after { opacity: 1; }
a.dg-stat:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 4px; }
/* A row of stats that wraps: two up on phones, up to six on wide screens. */
.dg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dg-space-6); }

/* Alert */
.dg-alert { padding: var(--dg-space-4) var(--dg-space-5); border-left: var(--dg-border-width-accent) solid var(--dg-accent); background: var(--dg-tint); color: var(--dg-text); font: var(--dg-type-small); }
.dg-alert--danger { border-left-color: var(--dg-danger); background: var(--dg-danger-tint); }
.dg-alert--neutral { border-left-color: var(--dg-primary); background: var(--dg-neutral-tint); }
.dg-alert--success { border-left-color: var(--dg-success); background: var(--dg-success-tint); }
.dg-alert--warning { border-left-color: var(--dg-warning); background: var(--dg-warning-tint); }
/* Info has no status role, so like the info button it takes series 1 for the rule and tint. */
.dg-alert--info { border-left-color: var(--dg-series-1); background: var(--dg-series-1-tint); }
.dg-alert__title { margin: 0 0 var(--dg-space-1); font: var(--dg-type-body); font-weight: 500; }
.dg-alert > p:last-child { margin-bottom: 0; }
.dg-alert a:not(.dg-btn, .dg-link) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* The action color and muted text are too light on some tints; inside an alert both read as text. */
.dg-alert :is(.dg-link, .dg-muted) { color: var(--dg-text); }
/* A one-line alert with its action (dg_alert class: 'dg-alert--action'): the message on the
   left, one link or button on the right, in a slim band; they stack when the row runs out. */
.dg-alert--action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dg-space-2) var(--dg-space-6); padding-block: var(--dg-space-3); }
.dg-alert--action > p { margin: 0; }
/* Flash messages: alerts stacked at the top of the page. */
.dg-flash { display: grid; gap: var(--dg-space-2); }

/* Bar: Midnight header or footer band with the site accent underneath */
.dg-bar {
  --dg-focus: var(--dg-focus-on-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dg-space-6);
  /* With viewport-fit=cover (the app's web views) the bar is the top chrome, so it clears the
     status bar and notch; env() is 0 everywhere else. */
  padding: calc(var(--dg-bar-padding-block) + env(safe-area-inset-top)) calc(var(--dg-space-6) + env(safe-area-inset-right))
    var(--dg-bar-padding-block) calc(var(--dg-space-6) + env(safe-area-inset-left));
  border-bottom: var(--dg-border-width-accent) solid var(--dg-accent);
  background: var(--dg-primary);
  color: var(--dg-on-dark);
}
/* Sticky: the app web views' top chrome stays put while the page scrolls under it. */
.dg-bar--sticky { position: sticky; top: 0; z-index: 20; }
.dg-bar__brand { color: var(--dg-on-dark); text-decoration: none; }
.dg-bar__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dg-space-6); }
/* Text links only: a dg_button in the bar or the phone menu keeps its own colors. */
.dg-bar__nav a:not(.dg-btn) {
  color: var(--dg-detail);
  font: var(--dg-type-button);
  letter-spacing: var(--dg-type-button-tracking);
  text-transform: var(--dg-type-button-case);
  text-decoration: none;
}
.dg-bar__nav a:not(.dg-btn):hover,
.dg-bar__nav a:not(.dg-btn)[aria-current="page"] { color: var(--dg-on-dark); }
.dg-bar a:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 4px; }
.dg-bar__actions { display: flex; align-items: center; gap: var(--dg-space-3); }
/* Below 768px the nav folds into a popover opened by the Menu button (no JS:
   popovertarget). From 768px up the same element is shown inline; these
   rules undo the browser's popover styles. */
.dg-bar__toggle {
  display: none;
  align-items: center;
  gap: var(--dg-space-2);
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--dg-on-dark);
  font: var(--dg-type-button);
  letter-spacing: var(--dg-type-button-tracking);
  text-transform: var(--dg-type-button-case);
  cursor: pointer;
}
.dg-bar__toggle::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--dg-icon-menu) center / contain no-repeat;
  mask: var(--dg-icon-menu) center / contain no-repeat;
}
.dg-bar__toggle:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 4px; }
.dg-bar__close,
.dg-bar__menu-actions { display: none; }
@media (min-width: 768px) {
  .dg-bar__nav[popover] { position: static; inset: auto; width: auto; height: auto; margin: 0 0 0 auto; padding: 0; overflow: visible; border: 0; background: none; color: inherit; }
}
@media (max-width: 767.98px) {
  .dg-bar__toggle { display: inline-flex; margin-left: auto; }
  .dg-bar__actions { margin-left: auto; }
  .dg-bar__actions + .dg-bar__toggle { margin-left: 0; }
  .dg-bar { gap: var(--dg-space-4); padding-inline: var(--dg-space-4); }
  .dg-bar__nav[popover] {
    --dg-focus: var(--dg-focus-on-dark);
    flex-direction: column;
    gap: var(--dg-space-5);
    inset: 0 0 0 auto;
    width: min(320px, 100vw);
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: var(--dg-space-16) var(--dg-space-6) var(--dg-space-6);
    box-sizing: border-box;
    border: 0;
    border-left: var(--dg-border-width-accent) solid var(--dg-accent);
    background: var(--dg-primary);
    color: var(--dg-on-dark);
  }
  .dg-bar__nav[popover]:not(:popover-open) { display: none; }
  .dg-bar__nav[popover]::backdrop { background: var(--dg-scrim); }
  .dg-bar__nav[popover] a:not(.dg-btn) { display: block; padding-block: var(--dg-space-3); font-size: 15px; }
  .dg-bar__close {
    position: absolute;
    top: var(--dg-space-5);
    right: var(--dg-space-6);
    display: inline-flex;
    align-items: center;
    gap: var(--dg-space-2);
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--dg-detail);
    font: var(--dg-type-button);
    letter-spacing: var(--dg-type-button-tracking);
    text-transform: var(--dg-type-button-case);
    cursor: pointer;
  }
  .dg-bar__close::after { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--dg-icon-cross) center / contain no-repeat; mask: var(--dg-icon-cross) center / contain no-repeat; }
  .dg-bar__close:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 4px; }
}
@media (max-width: 479.98px) {
  /* Only a bar with a menu moves its actions there; without one they stay in the bar. */
  .dg-bar:has(> .dg-bar__nav) > .dg-bar__actions { display: none; }
  .dg-bar__menu-actions { display: flex; flex-wrap: wrap; gap: var(--dg-space-3); margin-top: var(--dg-space-4); }
}
/* Page bar (class: 'dg-bar--page'): the header on the page's own background with a hairline
   under it, for a site whose header should read as part of the page (the tenants site and
   portals). The wordmark is in sentence case with an accent dot, links in sentence case, and
   buttons in it are the ordinary primary and secondary. */
.dg-bar--page { --dg-focus: inherit; border-bottom: var(--dg-border-width-hairline) solid var(--dg-border); background: var(--dg-bg); color: var(--dg-text); }
.dg-bar--page .dg-bar__brand { color: var(--dg-text); }
.dg-bar--page .dg-wordmark,
.dg-wordmark--dot { display: inline-flex; align-items: baseline; gap: 0.3em; font-size: 22px; letter-spacing: -0.015em; text-transform: none; }
.dg-bar--page .dg-wordmark::after,
.dg-wordmark--dot::after { content: ""; flex: none; width: 0.36em; height: 0.36em; border-radius: 50%; background: var(--dg-accent); transform: translateY(-0.1em); }
.dg-bar--page :is(.dg-bar__nav a:not(.dg-btn), .dg-bar__toggle, .dg-bar__close) { font: var(--dg-type-small); font-weight: 500; letter-spacing: normal; text-transform: none; }
.dg-bar--page .dg-bar__nav a:not(.dg-btn) { color: var(--dg-text-muted); }
/* A quiet dg_menu in the page bar's nav reads as one of its links. */
.dg-bar--page .dg-bar__nav .dg-menu__trigger.dg-btn--quiet { padding-inline: 0; color: var(--dg-text-muted); font: var(--dg-type-small); font-weight: 500; letter-spacing: normal; text-transform: none; }
.dg-bar--page .dg-bar__nav .dg-menu__trigger.dg-btn--quiet:hover { color: var(--dg-action); background: none; }
.dg-bar--page .dg-bar__nav a:not(.dg-btn):hover,
.dg-bar--page .dg-bar__nav a:not(.dg-btn)[aria-current="page"] { color: var(--dg-action); }
.dg-bar--page :is(.dg-bar__toggle, .dg-bar__close) { color: var(--dg-text); }
@media (max-width: 767.98px) {
  .dg-bar--page .dg-bar__nav[popover] { --dg-focus: inherit; border-left: var(--dg-border-width-hairline) solid var(--dg-border); background: var(--dg-bg); color: var(--dg-text); }
}
/* A dg_tab_bar in the bar's actions (the portals): the phone's bottom navigation, and from
   768px the bar's own links. */
@media (min-width: 768px) {
  .dg-bar .dg-tab-bar { position: static; display: flex; gap: var(--dg-space-5); margin-right: var(--dg-space-3); padding: 0; border: 0; background: none; }
  /* Icon beside the label; the current page is underlined, like dg_tabs. */
  .dg-bar .dg-tab-bar__item { flex-direction: row; gap: var(--dg-space-2); padding: 6px 0; border-bottom: var(--dg-border-width-focus) solid transparent; }
  .dg-bar .dg-tab-bar__item svg { width: 20px; height: 20px; }
  .dg-bar .dg-tab-bar__item .dg-count { position: static; }
  .dg-bar .dg-tab-bar__item:hover { color: var(--dg-text); }
  .dg-bar .dg-tab-bar__item[aria-current="page"] { color: var(--dg-action); border-bottom-color: var(--dg-action); }
  .dg-bar .dg-tab-bar__item:focus-visible { outline-offset: 4px; }
  .dg-bar .dg-tab-bar__label { font: var(--dg-type-body); font-weight: 500; letter-spacing: normal; }
  .dg-page:has(.dg-bar .dg-tab-bar) { padding-bottom: 0; }
}

/* Table: statements, ledgers, unit lists */
.dg-table { width: 100%; border-collapse: collapse; color: var(--dg-text); font: var(--dg-table-type); }
.dg-table th {
  padding: var(--dg-table-head-padding);
  border-bottom: var(--dg-border-width-hairline) solid var(--dg-border-strong);
  color: var(--dg-text-muted);
  font: var(--dg-type-label);
  letter-spacing: var(--dg-type-label-tracking);
  text-align: left;
  text-transform: var(--dg-type-label-case);
}
.dg-table td { padding: var(--dg-table-cell-padding); border-bottom: var(--dg-border-width-hairline) solid var(--dg-border); }
.dg-table .dg-table__num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.dg-table tbody tr:hover { background: color-mix(in srgb, var(--dg-tint) 50%, transparent); }
.dg-table--compact th { padding: var(--dg-table-compact-head-padding); }
.dg-table--compact td { padding: var(--dg-table-compact-cell-padding); }
/* A highlighted column, such as "Dorian Gray" in a comparison table. */
.dg-table .dg-table__hl { background: var(--dg-tint); color: var(--dg-text); font-weight: 500; }
.dg-table th.dg-table__hl { color: var(--dg-text); }
/* A sortable heading is a link: it keeps the heading look and gains an underline on hover. */
.dg-table th a { color: inherit; text-decoration: none; }
.dg-table th a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* A full-width label row that groups the rows under it, or marks "Today". */
.dg-table .dg-table__group th,
.dg-table .dg-table__group td {
  padding-top: var(--dg-space-6);
  border-bottom-color: var(--dg-border-strong);
  color: var(--dg-text);
  font: var(--dg-type-label);
  letter-spacing: var(--dg-type-label-tracking);
  text-transform: var(--dg-type-label-case);
}
.dg-table tbody tr.dg-table__group:hover { background: none; }
/* Money in and out: green for money in, red for money owed, text color for money out. Wrappers
   (summary values, muted rows) don't set a color on the element itself, so these always show. */
.dg-amount { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.dg-amount--in { color: var(--dg-success); }
.dg-amount--due { color: var(--dg-danger); }
/* On the row, not its cells, so a cell's .dg-amount--* tone still shows. */
.dg-table__muted { color: var(--dg-text-muted); }

/* Page header: eyebrow (or back link), title, intro, actions */
.dg-page-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--dg-space-4); padding-block: var(--dg-space-16) var(--dg-space-12); }
/* A page header used as the band around its own container: the container still spans the page
   (its auto margins would otherwise shrink it to its content in the column). */
.dg-page-header > .dg-container { box-sizing: border-box; width: 100%; }
.dg-page-header__eyebrow { margin: 0; color: var(--dg-action); font: var(--dg-type-label); letter-spacing: var(--dg-type-label-tracking); text-transform: var(--dg-type-label-case); }
.dg-page-header__title { max-width: 20ch; margin: 0; font: var(--dg-type-h1); letter-spacing: var(--dg-type-h1-tracking); }
/* One italic accent phrase in the title, in the site action color. */
.dg-page-header__title em,
.dg-section-heading__title em { color: var(--dg-action); font-style: italic; }
.dg-page-header__intro { max-width: var(--dg-measure); margin: 0; font: var(--dg-type-lede); letter-spacing: var(--dg-type-lede-tracking); }
.dg-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dg-space-3) var(--dg-space-6); margin-top: var(--dg-space-2); }
.dg-page-header--lg .dg-page-header__title { font: var(--dg-type-display); letter-spacing: var(--dg-type-display-tracking); }
.dg-page-header--sm { gap: var(--dg-space-3); padding-block: var(--dg-space-8) var(--dg-space-6); }
.dg-page-header--sm .dg-page-header__title { max-width: none; font: var(--dg-type-h2); letter-spacing: var(--dg-type-h2-tracking); }
.dg-page-header--sm .dg-page-header__intro { color: var(--dg-text-muted); font: var(--dg-type-body); }
@media (max-width: 640px) {
  .dg-page-header { padding-block: var(--dg-space-10) var(--dg-space-8); }
  .dg-page-header__title { font-size: 32px; }
  .dg-page-header--lg .dg-page-header__title { font-size: 40px; }
}

/* Section heading: eyebrow, title, lede */
.dg-section-heading { display: flex; flex-direction: column; gap: var(--dg-space-3); max-width: var(--dg-measure); margin-bottom: var(--dg-space-10); }
.dg-section-heading--center { align-items: center; margin-inline: auto; text-align: center; }
.dg-section-heading__eyebrow { margin: 0; color: var(--dg-action); font: var(--dg-type-label); letter-spacing: var(--dg-type-label-tracking); text-transform: var(--dg-type-label-case); }
.dg-section-heading__title { margin: 0; font: var(--dg-type-h2); letter-spacing: var(--dg-type-h2-tracking); }
.dg-section-heading__lede { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-body); }
.dg-section--dark :is(.dg-section-heading__eyebrow, .dg-section-heading__lede) { color: var(--dg-detail); }
/* On Midnight, corporate's action color (Midnight) would vanish, so a dark band takes each
   site's on-dark action: Linen for corporate; investors and tenants keep their own. The
   accent phrase, links and primary buttons all follow --dg-action. */
.dg-section--dark { --dg-action: var(--dg-action-on-dark); --dg-on-action: var(--dg-on-action-on-dark); }
/* Text links are Linen on every site: Emerald and Rust Deep text on Midnight is under
   3:1. Buttons keep the site color; their text is on the button, not on Midnight. */
.dg-section--dark :is(.dg-link, .dg-inline-link) { color: var(--dg-on-dark); }
/* The band swaps --dg-action to its on-dark value, which on corporate is the inverse button's
   own Linen fill, so the button takes Midnight text there on every site. */
.dg-section--dark .dg-btn--inverse { color: var(--dg-primary); }
/* Any Midnight surface: a dark band, a .dg-dark block or a dark card. */
:is(.dg-section--dark, .dg-dark, .dg-card--dark) .dg-btn--secondary { border-color: color-mix(in srgb, var(--dg-on-dark) 55%, transparent); color: var(--dg-on-dark); }
:is(.dg-section--dark, .dg-dark, .dg-card--dark) .dg-btn--secondary:hover { background: var(--dg-on-dark); color: var(--dg-primary); }
/* A heading that is the last thing in its column (beside the body) needs no gap under it. */
.dg-section-heading:last-child { margin-bottom: 0; }

/* Breadcrumbs */
.dg-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--dg-space-2); margin: 0; padding: 0; list-style: none; }
.dg-breadcrumbs li { display: flex; align-items: center; gap: var(--dg-space-2); color: var(--dg-text-muted); font: var(--dg-type-caption); letter-spacing: var(--dg-type-caption-tracking); text-transform: var(--dg-type-caption-case); }
.dg-breadcrumbs li + li::before { content: "/"; color: var(--dg-border-strong); }
/* a[href]: beats the base rule that underlines unclassed links. */
.dg-breadcrumbs a[href] { display: inline-block; padding-block: 4px; color: var(--dg-text-muted); text-decoration: none; }
.dg-breadcrumbs a[href]:hover { color: var(--dg-action); }
.dg-breadcrumbs a:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-breadcrumbs [aria-current="page"] { color: var(--dg-text); }

/* Accordion: <details> rows, no JavaScript. Give items the same name to open one at a time. */
.dg-accordion { border-top: var(--dg-border-width-hairline) solid var(--dg-border-strong); }
.dg-accordion__item { border-bottom: var(--dg-border-width-hairline) solid var(--dg-border); }
/* dg_accordion_item(heading:): the heading keeps the summary's look. */
.dg-accordion__heading { margin: 0; font: inherit; letter-spacing: inherit; }
.dg-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dg-space-4);
  padding: var(--dg-space-5) 0;
  color: var(--dg-text);
  font: var(--dg-type-h3);
  list-style: none;
  cursor: pointer;
}
.dg-accordion__summary::-webkit-details-marker { display: none; }
.dg-accordion__summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--dg-action);
  -webkit-mask: var(--dg-icon-chevron-down) center / contain no-repeat;
  mask: var(--dg-icon-chevron-down) center / contain no-repeat;
}
.dg-accordion__item[open] > .dg-accordion__summary::after { transform: rotate(180deg); }
.dg-accordion__summary:hover { color: var(--dg-action); }
.dg-accordion__summary:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-accordion__body { padding-bottom: var(--dg-space-6); color: var(--dg-text-muted); font: var(--dg-type-body); }
.dg-accordion__body > :first-child { margin-top: 0; }
.dg-accordion__body > :last-child { margin-bottom: 0; }
.dg-accordion--compact .dg-accordion__summary { padding: var(--dg-space-3) 0; font: var(--dg-type-body); font-weight: 500; }

/* Steps: numbered, done / current / to do. Vertical by default, --row across. */
.dg-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dg-steps__item { position: relative; display: flex; gap: var(--dg-space-4); padding-bottom: var(--dg-space-6); }
.dg-steps__item:last-child { padding-bottom: 0; }
/* The line joining one marker to the next. */
.dg-steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 13.5px;
  border-left: var(--dg-border-width-hairline) solid var(--dg-border);
}
.dg-steps__marker {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: var(--dg-border-width-hairline) solid var(--dg-border-strong);
  background: var(--dg-surface);
  color: var(--dg-text);
  font: var(--dg-type-caption);
  font-variant-numeric: tabular-nums;
}
.dg-steps__text { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.dg-steps__title { color: var(--dg-text); font: var(--dg-type-body); font-weight: 500; text-decoration: none; }
a.dg-steps__title:hover { color: var(--dg-action); text-decoration: underline; text-underline-offset: 3px; }
a.dg-steps__title:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-steps__body { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-steps__item--current .dg-steps__marker { border-color: var(--dg-action); background: var(--dg-action); color: var(--dg-on-action); }
.dg-steps__item--done .dg-steps__marker { border-color: var(--dg-action); color: transparent; }
.dg-steps__item--done .dg-steps__marker::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--dg-action);
  -webkit-mask: var(--dg-icon-check) center / contain no-repeat;
  mask: var(--dg-icon-check) center / contain no-repeat;
}
.dg-steps__item--done:not(:last-child)::before { border-left-color: var(--dg-action); }
.dg-steps__item--todo .dg-steps__marker { border-color: var(--dg-border); color: var(--dg-text-muted); }
.dg-steps__item--todo .dg-steps__title { color: var(--dg-text-muted); font-weight: 400; }
@media (min-width: 768px) {
  .dg-steps--row { flex-direction: row; }
  .dg-steps--row .dg-steps__item { flex: 1; flex-direction: column; gap: var(--dg-space-3); padding: 0 var(--dg-space-4) 0 0; }
  .dg-steps--row .dg-steps__item:not(:last-child)::before { top: 13.5px; right: 0; bottom: auto; left: 36px; border-left: 0; border-top: var(--dg-border-width-hairline) solid var(--dg-border); }
  .dg-steps--row .dg-steps__item--done:not(:last-child)::before { border-top-color: var(--dg-action); }
  .dg-steps--row .dg-steps__text { padding-top: 0; }
}

/* Tasks: numbered steps that open to do them (move-in, lease signing), dg_tasks and dg_task. Each
   row is a <details> with a status on the right; a locked step is a plain row with its reason. */
.dg-tasks { margin: 0; padding: 0; border-top: var(--dg-border-width-hairline) solid var(--dg-border); list-style: none; counter-reset: dg-task; }
.dg-tasks__item { border-bottom: var(--dg-border-width-hairline) solid var(--dg-border); counter-increment: dg-task; }
.dg-tasks__row { display: flex; align-items: center; gap: var(--dg-space-4); padding: var(--dg-space-4) 0; list-style: none; }
summary.dg-tasks__row { cursor: pointer; }
summary.dg-tasks__row::-webkit-details-marker { display: none; }
summary.dg-tasks__row:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-tasks__marker {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: var(--dg-border-width-hairline) solid var(--dg-border-strong);
  color: var(--dg-text);
  font: var(--dg-type-caption);
  font-variant-numeric: tabular-nums;
}
/* The number comes from the list, so steps renumber when one is added or left out. */
.dg-tasks__marker::before { content: counter(dg-task); }
.dg-tasks__main { display: grid; flex: 1; gap: 2px; min-width: 0; }
.dg-tasks__title { font: var(--dg-type-body); font-weight: 500; }
.dg-tasks__note { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-tasks__status { display: inline-flex; flex: none; align-items: center; gap: var(--dg-space-1); color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-tasks__action { display: inline-flex; flex: none; align-items: center; gap: var(--dg-space-2); }
/* On a narrow row the control drops under the title instead of squeezing it to a word a line. */
.dg-tasks__row:has(> .dg-tasks__action) { flex-wrap: wrap; }
.dg-tasks__row:has(> .dg-tasks__action) > .dg-tasks__main { flex: 1 1 12rem; }
.dg-tasks__row > .dg-tasks__action { margin-inline-start: auto; }
.dg-tasks__chevron {
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--dg-text-muted);
  -webkit-mask: var(--dg-icon-chevron) center / contain no-repeat;
  mask: var(--dg-icon-chevron) center / contain no-repeat;
  transform: rotate(90deg);
}
details[open] > .dg-tasks__row .dg-tasks__chevron { transform: rotate(-90deg); }
/* The panel lines up with the title (28px marker + 16px gap). */
.dg-tasks__panel { display: grid; gap: var(--dg-space-4); padding: 0 0 var(--dg-space-6) 44px; }
.dg-tasks__panel > * { margin: 0; }
.dg-tasks__item--current .dg-tasks__marker { border-color: var(--dg-action); background: var(--dg-action); color: var(--dg-on-action); }
.dg-tasks__item--current .dg-tasks__status { color: var(--dg-action); }
.dg-tasks__item--done .dg-tasks__marker { border-color: var(--dg-action); color: transparent; }
.dg-tasks__item--done .dg-tasks__marker::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--dg-action);
  -webkit-mask: var(--dg-icon-check) center / contain no-repeat;
  mask: var(--dg-icon-check) center / contain no-repeat;
}
.dg-tasks__item--done .dg-tasks__status { color: var(--dg-success); }
.dg-tasks__item--locked .dg-tasks__marker { border-color: var(--dg-border); color: var(--dg-text-muted); }
.dg-tasks__item--locked .dg-tasks__title { color: var(--dg-text-muted); font-weight: 400; }

/* Progress */
.dg-progress { display: flex; flex-direction: column; gap: var(--dg-space-2); }
.dg-progress__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--dg-space-1) var(--dg-space-4); }
.dg-progress__label { color: var(--dg-text); font: var(--dg-type-label); letter-spacing: var(--dg-type-label-tracking); text-transform: var(--dg-type-label-case); }
.dg-progress__value { color: var(--dg-text-muted); font: var(--dg-type-small); font-variant-numeric: tabular-nums; }
/* Meta: a short note on the right in the action color, such as the tour time ("Tour Thu, 2pm"). */
.dg-progress__meta { margin-left: auto; color: var(--dg-action); font: var(--dg-type-small); white-space: nowrap; }
.dg-progress__meta .dg-icon { margin-right: 6px; }
.dg-progress__track { height: 4px; background: var(--dg-border); }
.dg-progress__fill { display: block; height: 100%; background: var(--dg-action); }

/* Check list: included (tick) and not included (cross) */
.dg-check-list { display: flex; flex-direction: column; gap: var(--dg-space-3); margin: 0; padding: 0; list-style: none; font: var(--dg-type-body); }
.dg-check-list__item { display: flex; gap: var(--dg-space-3); }
.dg-check-list__item::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.3em;
  background: var(--dg-action);
  -webkit-mask: var(--dg-icon-check) center / contain no-repeat;
  mask: var(--dg-icon-check) center / contain no-repeat;
}
.dg-check-list__item--no { color: var(--dg-text-muted); }
.dg-check-list__item--no::before { background: var(--dg-text-muted); -webkit-mask-image: var(--dg-icon-cross); mask-image: var(--dg-icon-cross); }
/* Neutral: a muted dash for a fact that doesn't match an answer but isn't a problem. The text stays. */
.dg-check-list__item--neutral::before { background: var(--dg-text-muted); -webkit-mask-image: var(--dg-icon-dash); mask-image: var(--dg-icon-dash); }

/* Summary: label and value rows (lease terms, bills, receipts), with an optional total */
.dg-summary { margin: 0; font: var(--dg-type-body); }
.dg-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dg-space-6);
  padding: var(--dg-space-3) 0;
  border-bottom: var(--dg-border-width-hairline) solid var(--dg-border);
}
.dg-summary__label { margin: 0; color: var(--dg-text-muted); }
.dg-summary__note { display: block; color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-summary__value { min-width: 0; margin: 0; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; text-align: right; overflow-wrap: anywhere; }
.dg-summary__row--total { border-top: var(--dg-border-width-hairline) solid var(--dg-border-strong); border-bottom: 0; }
.dg-summary__row--total .dg-summary__label { color: var(--dg-text); font: var(--dg-type-label); letter-spacing: var(--dg-type-label-tracking); text-transform: var(--dg-type-label-case); }
.dg-summary__row--total .dg-summary__value { font-weight: 600; }
/* Fee: a charge added on top (card or bank fee), kept in the list but set apart from the
   line items: a tinted band in small type, no rule, value written with its "+". The band
   stays inside the list's width (its text is inset) with a gap above, so it never juts past
   the rows or the total's rule. */
.dg-summary__row--fee {
  margin-top: var(--dg-space-2);
  padding: var(--dg-space-2) var(--dg-space-3);
  border-bottom: 0;
  background: var(--dg-neutral-tint);
  font: var(--dg-type-small);
}
.dg-summary__row--fee .dg-summary__label { color: var(--dg-text); }
.dg-summary__row--fee .dg-summary__value { font-weight: 400; }
.dg-summary__row--fee + .dg-summary__row--total { margin-top: var(--dg-space-2); }
/* Stacked: label above value, in a grid (contact details, policy facts). */
/* Compact (class: 'dg-summary--compact'): 14px rows about 40px tall, for short facts in a card
   (distances, routes). The last row has no rule under it. */
.dg-summary--compact { font: var(--dg-type-small); }
.dg-summary--compact .dg-summary__row { gap: var(--dg-space-4); padding-block: var(--dg-space-2); }
.dg-summary--compact .dg-summary__row:last-child { padding-bottom: 0; border-bottom: 0; }
.dg-summary--stacked { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--dg-space-5) var(--dg-space-6); }
.dg-summary--stacked .dg-summary__row { flex-direction: column; gap: var(--dg-space-1); padding: 0; border: 0; }
.dg-summary--stacked .dg-summary__label { font: var(--dg-type-label); letter-spacing: var(--dg-type-label-tracking); text-transform: var(--dg-type-label-case); }
.dg-summary--stacked .dg-summary__value { text-align: left; }

/* List: rows of links or records. Optional icon, description, meta (badge, amount) and status rail. */
.dg-list { border: var(--dg-border-width-hairline) solid var(--dg-border); background: var(--dg-surface); }
.dg-list__items { margin: 0; padding: 0; list-style: none; }
.dg-list__head {
  margin: 0;
  padding: 10px var(--dg-space-5);
  border-bottom: var(--dg-border-width-hairline) solid var(--dg-border);
  background: var(--dg-bg);
  color: var(--dg-text-muted);
  font: var(--dg-type-label);
  letter-spacing: var(--dg-type-label-tracking);
  text-transform: var(--dg-type-label-case);
}
.dg-list__item + .dg-list__item { border-top: var(--dg-border-width-hairline) solid var(--dg-border); }
.dg-list__row {
  display: flex;
  align-items: center;
  gap: var(--dg-space-4);
  padding: var(--dg-space-4) var(--dg-space-5);
  color: var(--dg-text);
  text-decoration: none;
}
/* Linked rows: a tint behind the hovered row (a layer, so motion.css can sweep it in). It
   starts after the status rail, so the rail stays visible. */
a.dg-list__row { position: relative; isolation: isolate; }
a.dg-list__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--dg-tint) 50%, transparent);
  opacity: 0;
}
a.dg-list__row:is(.dg-list__row--site, .dg-list__row--neutral, .dg-list__row--danger, .dg-list__row--success)::before { left: var(--dg-border-width-accent); }
a.dg-list__row:is(:hover, :focus-visible)::before { opacity: 1; }
a.dg-list__row:hover .dg-list__title { color: var(--dg-action); }
a.dg-list__row:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: -2px; }
/* Links get a faint chevron that firms up in the action color on hover; external links an
   up-right arrow. */
a.dg-list__row::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--dg-text-muted);
  opacity: 0.45;
  -webkit-mask: var(--dg-icon-chevron) center / contain no-repeat;
  mask: var(--dg-icon-chevron) center / contain no-repeat;
}
a.dg-list__row:is(:hover, :focus-visible)::after { opacity: 1; background-color: var(--dg-action); }
a.dg-list__row--external::after { -webkit-mask-image: var(--dg-icon-external); mask-image: var(--dg-icon-external); }
.dg-list__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--dg-tint); color: var(--dg-action); }
.dg-list__icon svg { width: 20px; height: 20px; }
.dg-list__main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.dg-list__title { margin: 0; font: var(--dg-type-body); font-weight: 500; }
.dg-list__desc { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-list__meta { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: var(--dg-space-1); font: var(--dg-type-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Below 480px the meta (an amount, a phone number) drops under the text, in the text's column,
   so it doesn't squeeze the description to a few words a line. */
@media (max-width: 479px) {
  .dg-list__row:has(> .dg-list__meta) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--dg-space-2) var(--dg-space-4); }
  .dg-list__row:has(> .dg-list__icon):has(> .dg-list__meta) { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .dg-list__row:has(> .dg-list__meta) > .dg-list__icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .dg-list__row:has(> .dg-list__meta) > :is(.dg-list__main, .dg-list__meta) { grid-column: -3 / -2; }
  .dg-list__row:has(> .dg-list__meta) > .dg-list__meta { grid-row: 2; align-items: flex-start; }
  .dg-list__row:has(> .dg-list__meta)::after { grid-column: -2 / -1; grid-row: 1 / span 2; align-self: center; }
}
/* Status rail: 3px on the left in the tone color (an inset bar, so the text stays aligned). */
.dg-list__row--site { box-shadow: inset var(--dg-border-width-accent) 0 0 var(--dg-accent); }
.dg-list__row--neutral { box-shadow: inset var(--dg-border-width-accent) 0 0 var(--dg-primary); }
.dg-list__row--danger { box-shadow: inset var(--dg-border-width-accent) 0 0 var(--dg-danger); }
.dg-list__row--success { box-shadow: inset var(--dg-border-width-accent) 0 0 var(--dg-success); }
/* A row on its own (a dashboard line such as "Past due · View"): it takes the list's box, so the
   action at its end reads as part of it. A danger row is outlined in the danger colour. */
.dg-list__row:not(.dg-list *) { border: var(--dg-border-width-hairline) solid var(--dg-border); background: var(--dg-surface); }
.dg-list__row--danger:not(.dg-list *) { border-color: var(--dg-danger); }

/* Empty state */
.dg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dg-space-2);
  padding: var(--dg-space-12) var(--dg-space-6);
  border: var(--dg-border-width-hairline) solid var(--dg-border);
  background: var(--dg-surface);
  text-align: center;
}
.dg-empty__title { margin: 0; color: var(--dg-text); font: var(--dg-type-h3); }
.dg-empty__body { max-width: 46ch; margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dg-space-3); margin-top: var(--dg-space-3); }

/* Pager: "Showing 1–50 of 1,234", previous / page X of Y / next */
.dg-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dg-space-3) var(--dg-space-6); padding-block: var(--dg-space-4); }
.dg-pager__status { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); font-variant-numeric: tabular-nums; }
.dg-pager__nav { display: flex; align-items: center; gap: var(--dg-space-6); }
.dg-pager__page { color: var(--dg-text-muted); font: var(--dg-type-small); font-variant-numeric: tabular-nums; }

/* Tabs: links between views. Mark the current one with aria-current. */
.dg-tabs {
  display: flex;
  gap: var(--dg-tabs-gap);
  overflow-x: auto;
  border-bottom: var(--dg-border-width-hairline) solid var(--dg-border);
  scrollbar-width: none;
}
.dg-tabs__tab {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: var(--dg-space-1);
  margin-bottom: -1px;
  padding: var(--dg-tab-padding);
  border-bottom: var(--dg-border-width-focus) solid transparent;
  color: var(--dg-text-muted);
  font: var(--dg-type-button);
  letter-spacing: var(--dg-type-button-tracking);
  text-transform: var(--dg-type-button-case);
  text-decoration: none;
  white-space: nowrap;
}
/* A tab that is a <button> (tabs that switch panels in place) loses the browser's button box. */
button.dg-tabs__tab { margin-top: 0; margin-inline: 0; border-top: 0; border-inline: 0; background: none; cursor: pointer; }
.dg-tabs__tab:hover { color: var(--dg-text); }
.dg-tabs__tab[aria-current="page"],
.dg-tabs__tab[aria-selected="true"] { border-bottom-color: var(--dg-action); color: var(--dg-text); }
.dg-tabs__tab:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: -2px; }
/* A count is a small chip after the label ("Human tasks 3"): neutral unless the item gives it a tone. */
.dg-tabs__tab .dg-count { margin-left: var(--dg-space-2); vertical-align: 1px; }
.dg-tabs__tab .dg-count:not([class*="dg-count--"]) { background: var(--dg-neutral-tint); color: var(--dg-text); }
/* Vertical from 992px: a side menu for a page with many sections. */
@media (min-width: 992px) {
  .dg-tabs--side { flex-direction: column; gap: 0; border-bottom: 0; border-left: var(--dg-border-width-hairline) solid var(--dg-border); }
  .dg-tabs--side .dg-tabs__tab { margin: 0 0 0 -1px; padding: 10px var(--dg-space-4); border-bottom: 0; border-left: var(--dg-border-width-focus) solid transparent; }
  .dg-tabs--side .dg-tabs__tab[aria-current="page"] { border-left-color: var(--dg-action); }
}

/* Tab bar: the phone app's bottom navigation (portals) */
.dg-tab-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 10;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: var(--dg-border-width-focus) solid var(--dg-action);
  background: var(--dg-surface);
}
.dg-tab-bar--static { position: static; }
/* Keep the end of the page clear of the fixed bar. */
.dg-page:has(.dg-tab-bar:not(.dg-tab-bar--static)) { padding-bottom: calc(var(--dg-tab-bar-height) + env(safe-area-inset-bottom)); }
.dg-tab-bar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dg-space-1);
  padding: 10px var(--dg-space-1) var(--dg-space-2);
  color: var(--dg-text-muted);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.dg-tab-bar__item svg { width: 24px; height: 24px; }
.dg-tab-bar__label { font: var(--dg-type-badge); letter-spacing: var(--dg-type-badge-tracking); }
.dg-tab-bar__item[aria-current="page"] { color: var(--dg-action); }
.dg-tab-bar__item:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: -4px; }
/* The count overlaps the icon's top-right corner (icon: 24px, 10px from the top); with no
   icon it follows the label. */
.dg-tab-bar__item .dg-count { position: absolute; top: 3px; left: calc(50% + 9px); }
.dg-tab-bar__item:not(:has(svg)) { flex-direction: row; justify-content: center; gap: var(--dg-space-1); }
.dg-tab-bar__item:not(:has(svg)) .dg-count { position: static; }

/* Action bar (dg_action_bar): on phones a bar fixed to the foot of the screen, like the tab bar,
   holding icon buttons and one primary button (Save · Text me · Book a tour). From 768px it is
   an ordinary row where it sits in the page. --static keeps the phone bar in the page flow;
   --inline never becomes a phone bar (a page header's actions: wrapping, natural-width buttons). */
.dg-action-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--dg-space-2); }
@media (max-width: 767.98px) {
  .dg-action-bar:not(.dg-action-bar--inline) {
    flex-wrap: nowrap;
    padding: var(--dg-space-3) var(--dg-space-4) calc(var(--dg-space-3) + env(safe-area-inset-bottom));
    border-top: var(--dg-border-width-hairline) solid var(--dg-border);
    background: var(--dg-surface);
  }
  .dg-action-bar:not(.dg-action-bar--static, .dg-action-bar--inline) { position: fixed; inset: auto 0 0; z-index: 10; }
  .dg-action-bar:not(.dg-action-bar--inline) > .dg-btn:not(.dg-btn--icon) { flex: 1; min-width: 0; }
  /* Keep the end of the page clear of the fixed bar. */
  .dg-page:has(.dg-action-bar:not(.dg-action-bar--static, .dg-action-bar--inline)) { padding-bottom: calc(var(--dg-action-bar-height) + env(safe-area-inset-bottom)); }
}

/* Footer: Midnight, link columns and a legal line */
.dg-footer {
  --dg-focus: var(--dg-focus-on-dark);
  padding-block: var(--dg-space-16) var(--dg-space-8);
  border-top: var(--dg-border-width-accent) solid var(--dg-accent);
  background: var(--dg-primary);
  color: var(--dg-on-dark);
}
.dg-footer__top { display: grid; grid-template-columns: minmax(220px, 1.4fr) 3fr; gap: var(--dg-space-12); padding-bottom: var(--dg-space-12); }
.dg-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--dg-space-4); }
.dg-footer__brand a { color: var(--dg-on-dark); text-decoration: none; }
.dg-footer__blurb { max-width: 36ch; margin: 0; color: var(--dg-detail); font: var(--dg-type-small); }
.dg-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dg-space-8); }
.dg-footer__heading { margin: 0 0 var(--dg-space-4); color: var(--dg-detail); font: var(--dg-type-label); letter-spacing: var(--dg-type-label-tracking); text-transform: var(--dg-type-label-case); }
.dg-footer__links { display: flex; flex-direction: column; gap: var(--dg-space-3); margin: 0; padding: 0; list-style: none; }
.dg-footer a { display: inline-block; padding-block: 2px; color: var(--dg-on-dark); font: var(--dg-type-small); text-decoration: none; }
.dg-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dg-footer a:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dg-space-2) var(--dg-space-6);
  padding-top: var(--dg-space-6);
  border-top: var(--dg-border-width-hairline) solid color-mix(in srgb, var(--dg-detail) 35%, transparent);
  color: var(--dg-detail);
  font: var(--dg-type-small);
}
.dg-footer__legal a { color: var(--dg-detail); }
.dg-footer__legal a:hover { color: var(--dg-on-dark); }
.dg-footer--quiet { padding-block: var(--dg-space-6); }
.dg-footer--quiet .dg-footer__legal { padding-top: 0; border-top: 0; }
@media (max-width: 767.98px) {
  .dg-footer__top { grid-template-columns: 1fr; gap: var(--dg-space-10); }
}
/* Page footer (class: 'dg-footer--page'), the counterpart of dg-bar--page: the footer on the
   page's own background under a hairline, in the page's text colors, for the tenants site. The
   wordmark has the accent dot; the blurb is set in the serif. Columns share the space 2:2:…:3
   and wrap two to a row on a phone, the last one full width. */
.dg-footer--page {
  --dg-focus: inherit;
  padding-block: clamp(var(--dg-space-10), 5vw, var(--dg-space-16)) var(--dg-space-6);
  border-top: var(--dg-border-width-hairline) solid var(--dg-border);
  background: var(--dg-bg);
  color: var(--dg-text);
}
.dg-footer--page .dg-footer__top { grid-template-columns: 5fr 7fr; padding-bottom: var(--dg-space-6); }
.dg-footer--page .dg-footer__brand { gap: var(--dg-space-5); }
.dg-footer--page .dg-wordmark { display: inline-flex; align-items: baseline; gap: 0.3em; font-size: 26px; letter-spacing: -0.015em; text-transform: none; }
.dg-footer--page .dg-wordmark::after { content: ""; flex: none; width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--dg-accent); transform: translateY(-0.1em); }
.dg-footer--page .dg-footer__blurb { max-width: 32ch; color: var(--dg-text-muted); font: 400 15px/1.65 var(--dg-font-serif); }
.dg-footer--page .dg-footer__cols { display: flex; flex-wrap: wrap; gap: var(--dg-space-6) var(--dg-space-12); }
.dg-footer--page .dg-footer__cols > * { flex: 2 1 0; min-width: 140px; }
.dg-footer--page .dg-footer__cols > :last-child { flex-grow: 3; }
.dg-footer--page .dg-footer__heading { color: var(--dg-text-muted); }
.dg-footer--page .dg-footer__links { gap: var(--dg-space-2); }
.dg-footer--page a:not(.dg-btn) { padding-block: 3px; color: var(--dg-text-muted); font: 400 15px/1.65 var(--dg-font-sans); text-decoration: none; }
.dg-footer--page a:not(.dg-btn):hover { color: var(--dg-action); text-decoration: none; }
.dg-footer--page .dg-footer__brand a:not(.dg-btn) { color: var(--dg-text); }
.dg-footer--page .dg-footer__legal {
  justify-content: space-between;
  padding-top: var(--dg-space-4);
  border-top-color: var(--dg-border);
  color: var(--dg-text-muted);
  font: 400 12.5px/1.65 var(--dg-font-sans);
}
.dg-footer--page .dg-footer__legal a:not(.dg-btn) { padding-block: 0; font: inherit; }
.dg-footer--page .dg-footer__legal a:not(.dg-btn):hover { color: var(--dg-text); }
.dg-footer--page.dg-footer--quiet { padding-block: var(--dg-space-5) var(--dg-space-6); }
/* In dark the page footer drops to the deep band color (tenants: the live site's near-black footer). */
[data-theme="dark"] .dg-footer--page { background: var(--dg-primary); }
.dg-footer--page.dg-footer--quiet .dg-footer__legal { padding-top: 0; }
@media (max-width: 767.98px) {
  .dg-footer--page .dg-footer__top { grid-template-columns: 1fr; gap: var(--dg-space-6); }
  .dg-footer--page .dg-footer__cols { column-gap: var(--dg-space-6); }
}

/* Banner: a full-width system notice above everything (impersonation, read-only) */
.dg-banner {
  --dg-focus: var(--dg-focus-on-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--dg-space-2) var(--dg-space-4);
  padding: 10px var(--dg-gutter);
  background: var(--dg-primary);
  color: var(--dg-on-dark);
  font: var(--dg-type-small);
  text-align: center;
}
.dg-banner--danger { background: var(--dg-danger); color: var(--dg-on-danger); }
.dg-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.dg-banner a:focus-visible,
.dg-banner button:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }

/* Fieldset: a titled group of fields */
.dg-fieldset { display: flex; flex-direction: column; gap: var(--dg-space-6); min-width: 0; margin: 0; padding: 0; border: 0; }
.dg-fieldset__legend { float: left; width: 100%; margin: 0 0 var(--dg-space-1); padding: 0; color: var(--dg-text); font: var(--dg-type-h3); }
.dg-fieldset__legend + * { clear: both; }
.dg-fieldset__hint { margin: calc(-1 * var(--dg-space-4)) 0 0; color: var(--dg-text-muted); font: var(--dg-type-small); }
/* The hint sits 8px under the legend and 12px above the choices; a group's error follows the
   choices 8px below, as a field's error follows its input. The 24px gap is for the fields themselves. */
.dg-fieldset > .dg-field__error { margin-top: calc(-1 * var(--dg-space-4)); }
.dg-fieldset > .dg-fieldset__hint + * { margin-top: calc(-1 * var(--dg-space-3)); }
/* A group with an error (dg_radios): a 3px danger rule on the left, like alerts. The message is a .dg-field__error. */
.dg-fieldset--error { padding-left: var(--dg-space-4); border-left: var(--dg-border-width-accent) solid var(--dg-danger); }

/* Form actions: back on the left, save and continue on the right */
.dg-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dg-space-3);
  margin-top: var(--dg-space-8);
  padding-top: var(--dg-space-6);
  border-top: var(--dg-border-width-hairline) solid var(--dg-border);
}
.dg-form-actions__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dg-space-3); margin-left: auto; }

/* Filters: compact fields in a row, with a clear link */
.dg-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--dg-space-4) var(--dg-space-5); }
.dg-filters > .dg-field { flex: 0 1 180px; }
.dg-filters__clear { align-self: center; }

/* Error summary: every problem in the form, linked to its field */
.dg-error-summary:focus { outline: var(--dg-border-width-focus) solid var(--dg-danger); outline-offset: 2px; }
.dg-error-summary__list { margin: 0; padding-left: var(--dg-space-5); }
.dg-error-summary__list li + li { margin-top: var(--dg-space-1); }

/* Modal: a native <dialog>. Open it with a button carrying commandfor="<id>" command="show-modal". */
.dg-modal {
  width: min(560px, calc(100vw - 2 * var(--dg-space-4)));
  max-height: calc(100dvh - 2 * var(--dg-space-8));
  padding: 0;
  border: var(--dg-border-width-hairline) solid var(--dg-border-strong);
  border-radius: var(--dg-radius-md);
  background: var(--dg-surface);
  color: var(--dg-text);
}
.dg-modal::backdrop { background: var(--dg-scrim); }
.dg-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dg-space-4);
  padding: var(--dg-space-6) var(--dg-space-6) var(--dg-space-4);
  border-bottom: var(--dg-border-width-hairline) solid var(--dg-border);
}
.dg-modal__title { margin: 0; font: var(--dg-type-h4); letter-spacing: var(--dg-type-h4-tracking); }
.dg-modal__close {
  flex: none;
  width: 32px;
  height: 32px;
  margin: -4px -8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dg-text);
  cursor: pointer;
}
.dg-modal__close::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: auto;
  background: currentColor;
  -webkit-mask: var(--dg-icon-cross) center / contain no-repeat;
  mask: var(--dg-icon-cross) center / contain no-repeat;
}
.dg-modal__close:hover { background-color: var(--dg-tint); color: var(--dg-action); }
.dg-modal__close:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: -2px; }
.dg-modal__body { display: flex; flex-direction: column; gap: var(--dg-space-4); padding: var(--dg-space-6); font: var(--dg-type-body); }
.dg-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--dg-space-3); padding-top: var(--dg-space-2); }

/* Pay modals: a dg-modal around one form (dg_bank_pay_modal, dg_card_pay_modal). */
.dg-pay { display: flex; flex-direction: column; gap: var(--dg-space-5); margin: 0; }
.dg-pay__source { display: flex; align-items: center; gap: var(--dg-space-4); padding: var(--dg-space-4) var(--dg-space-5); background: var(--dg-bg); color: var(--dg-primary); }
.dg-pay__source-text { display: flex; flex-direction: column; gap: 2px; }
.dg-pay__source-label { color: var(--dg-text-muted); font: var(--dg-type-label); letter-spacing: var(--dg-type-label-tracking); text-transform: var(--dg-type-label-case); }
.dg-pay__source-name { color: var(--dg-text); font: var(--dg-type-body); font-weight: 500; }
/* The processor's hosted card field, framed like a dg-field input. */
.dg-pay__card { min-height: 32px; padding: 10px 0 3px; border-bottom: var(--dg-border-width-hairline) solid var(--dg-border-strong); }
.dg-pay__card:focus-within { outline: var(--dg-border-width-focus) solid transparent; outline-offset: 2px; border-bottom-color: var(--dg-action); box-shadow: 0 1px 0 0 var(--dg-action); }
.dg-pay__terms { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-pay__terms--secure { display: flex; align-items: flex-start; gap: var(--dg-space-2); }
.dg-pay__terms--secure .dg-icon { margin-top: 2px; }
.dg-pay__ack { align-items: flex-start; }
.dg-pay__ack .dg-check__input { margin-top: 3px; }
.dg-pay__message { margin: 0; color: var(--dg-danger); font: var(--dg-type-small); }
.dg-pay__message:empty { display: none; }
.dg-pay .dg-modal__actions { padding-top: 0; }

/* Timeline: what happened, newest first */
.dg-timeline { margin: 0; padding: 0 0 0 var(--dg-space-6); border-left: var(--dg-border-width-hairline) solid var(--dg-border); list-style: none; }
.dg-timeline__item { position: relative; display: flex; flex-direction: column; gap: 2px; }
.dg-timeline__item + .dg-timeline__item { margin-top: var(--dg-space-6); }
.dg-timeline__item::before {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(-1 * var(--dg-space-6) - 4.5px);
  width: 9px;
  height: 9px;
  background: var(--dg-accent);
}
.dg-timeline__when { color: var(--dg-text-muted); font: var(--dg-type-caption); letter-spacing: var(--dg-type-caption-tracking); text-transform: var(--dg-type-caption-case); }
.dg-timeline__title { margin: 0; color: var(--dg-text); font: var(--dg-type-body); font-weight: 500; }
.dg-timeline__body { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); }

/* Photos: a grid of square thumbnails */
.dg-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--dg-space-2); margin: 0; padding: 0; list-style: none; }
.dg-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--dg-border); }
.dg-photos a:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
/* "+4 photos": the last tile links to the rest, a camera over the count. */
.dg-photos__more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--dg-space-1); aspect-ratio: 1; background: var(--dg-tint); color: var(--dg-text); font: var(--dg-type-small); font-weight: 500; text-decoration: none; }
.dg-photos__more .dg-icon { color: var(--dg-action); }
.dg-photos__more:hover { color: var(--dg-action); }

/* Gallery (dg_gallery): a home's photos. Phones show the first at 4:3; from 768px one large and
   four small (2fr 1fr 1fr, the first over two rows), and fewer photos fill the space. The foot
   names the photo, counts them and links to all. --inactive greys them (a home no longer available). */
.dg-gallery__photos { display: grid; gap: var(--dg-space-2); margin: 0; padding: 0; list-style: none; }
.dg-gallery__photos > li { min-width: 0; min-height: 0; }
.dg-gallery__photos img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--dg-border); }
.dg-gallery__photos a { display: block; height: 100%; }
.dg-gallery__photos a:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-gallery--inactive img { filter: grayscale(1); }
.dg-gallery__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--dg-space-2) var(--dg-space-4); padding-top: var(--dg-space-3); }
.dg-gallery__caption { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-gallery__caption:empty { display: none; }
@media (max-width: 767.98px) {
  .dg-gallery__photos > li:not(:first-child) { display: none; }
  .dg-gallery__photos img { aspect-ratio: 4 / 3; }
}
@media (min-width: 768px) {
  .dg-gallery__photos { grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-columns: 2fr 1fr 1fr; aspect-ratio: 5 / 2; }
  .dg-gallery__photos > li:first-child { grid-row: span 2; }
  .dg-gallery__photos > li:nth-child(n + 6) { display: none; }
  .dg-gallery__photos:has(> li:only-child) { grid-template-columns: 1fr; }
  .dg-gallery__photos:has(> li:nth-child(2):last-child, > li:nth-child(3):last-child) { grid-template-columns: 2fr 1fr; }
  .dg-gallery__photos > li:nth-child(2):last-child { grid-row: span 2; }
  .dg-gallery__photos > li:nth-child(4):last-child { grid-column: span 2; }
  /* Five photos show at once, so "1 of 14" is for phones. */
  .dg-gallery__position { display: none; }
}

/* Document frame: an embedded PDF */
.dg-doc-frame { display: block; width: 100%; height: 70vh; border: var(--dg-border-width-hairline) solid var(--dg-border); background: var(--dg-surface); }

/* Done: a check (ring, then tick) beside a short confirmation. dg_done('Paid · Oct 7').
   motion.css draws the check in. */
.dg-done { display: flex; align-items: center; gap: var(--dg-space-3); color: var(--dg-text); font: var(--dg-type-body); }
.dg-done__text { margin: 0; }
.dg-done__mark { flex: none; width: 32px; height: 32px; fill: none; stroke: var(--dg-action); stroke-width: 1.5; }
.dg-done__mark path { stroke-width: 2; stroke-linecap: square; }

/* Skeleton: placeholder bars while content loads; motion.css adds a slow sweep.
   <span class="dg-skeleton" style="width: 60%"></span>; add --title or --figure for size. */
.dg-skeleton { display: block; height: 12px; background-color: color-mix(in srgb, var(--dg-text) 6%, transparent); }
.dg-skeleton--title { height: 18px; }
.dg-skeleton--figure { height: 32px; }

/* Dark theme (data-theme="dark"): the roles swap in tokens.css. Primary stays Midnight for bars,
   footers and dark bands, so the few places that use it as a text or rule color take the text
   or detail color instead, and the fixed-color tick and chevron turn Ink and Linen. */
[data-theme="dark"] {
  --dg-check-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%2310151B' stroke-width='1.6'/%3E%3C/svg%3E");
  --dg-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23F4F4F2' stroke-width='1.2'/%3E%3C/svg%3E");
}
[data-theme="dark"] .dg-alert--neutral { border-left-color: var(--dg-detail); }
[data-theme="dark"] .dg-list__row--neutral { box-shadow: inset var(--dg-border-width-accent) 0 0 var(--dg-detail); }
[data-theme="dark"] .dg-pay__source { color: var(--dg-text); }
/* In the dark theme the inverse button is a softened Linen: full Linen glares on a dark page. */
[data-theme="dark"] .dg-btn--inverse { background: color-mix(in srgb, var(--dg-on-dark) 88%, var(--dg-primary)); }
[data-theme="dark"] .dg-btn--inverse:hover { background: var(--dg-on-dark); }
/* Dark-theme fills carry dark labels, so hover lightens them instead of darkening. */
[data-theme="dark"] .dg-btn--primary:hover { background: color-mix(in srgb, var(--dg-action-fill) 60%, #fff); }
/* A secondary hover tints rather than fills: a filled hover would outweigh the primary beside it. */
[data-theme="dark"] .dg-btn--secondary:hover { border-color: var(--dg-text); background: color-mix(in srgb, var(--dg-text) 12%, transparent); color: var(--dg-text); }
[data-theme="dark"] .dg-drop-zone--primary:is(:hover, .dg-drop-zone--over) { background: color-mix(in srgb, var(--dg-action-fill) 60%, #fff); }
[data-theme="dark"] .dg-btn--danger:hover { background: color-mix(in srgb, var(--dg-danger-fill) 82%, #fff); }
/* Danger is a light rose in dark, for text. As a full-width fill it glares, so the banner takes the
   deep tint with a rose rule instead. */
[data-theme="dark"] .dg-banner--danger { border-bottom: var(--dg-border-width-accent) solid var(--dg-danger); background: var(--dg-danger-tint); color: var(--dg-text); }
/* The inverse button is Linen with action-colored text; dark action colors are light too. */
[data-theme="dark"] .dg-btn--inverse { color: var(--dg-primary); }

/* Touch screens: every control reaches the 44px target (WCAG 2.5.5, Apple HIG), including the
   compact and small variants sized for a mouse. */
@media (pointer: coarse) {
  :is(.dg-field__input, .dg-btn, .dg-segmented > :is(.dg-check, button, a), .dg-tabs__tab, .dg-menu__item, .dg-drop-zone--button,
      .dg-bar__toggle, .dg-bar__brand, .dg-list__row--line, .dg-list__fold > summary) { min-height: 44px; }
  .dg-bar__brand { display: inline-flex; align-items: center; }
  :is(.dg-btn--icon, .dg-modal__close) { min-width: 44px; min-height: 44px; }
  .dg-link--plain:is(a, button) { display: inline-flex; align-items: center; min-height: 44px; }
  /* Inline controls keep their drawn size; an invisible 44px hit area surrounds them. */
  :is(.dg-help__button, .dg-table__toggle) { position: relative; }
  :is(.dg-help__button, .dg-table__toggle)::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  .dg-link--back { display: inline-flex; align-items: center; min-height: 44px; }
  /* Footer links stack as 44px rows (no extra gap); icon-only links get a 44px square. */
  .dg-footer :is(.dg-footer__links, .dg-footer__legal) a { display: inline-flex; align-items: center; min-height: 44px; }
  .dg-footer .dg-footer__links { gap: 0; }
  .dg-footer a:has(> .dg-icon:only-child) { justify-content: center; min-width: 44px; }
}
/* data-theme="auto": the dark rules above, when the OS asks for dark. */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .dg-footer--page { background: var(--dg-primary); }
  [data-theme="auto"] {
    --dg-check-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%2310151B' stroke-width='1.6'/%3E%3C/svg%3E");
    --dg-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23F4F4F2' stroke-width='1.2'/%3E%3C/svg%3E");
  }
  [data-theme="auto"] .dg-alert--neutral { border-left-color: var(--dg-detail); }
  [data-theme="auto"] .dg-list__row--neutral { box-shadow: inset var(--dg-border-width-accent) 0 0 var(--dg-detail); }
  [data-theme="auto"] .dg-pay__source { color: var(--dg-text); }
  [data-theme="auto"] .dg-btn--inverse { background: color-mix(in srgb, var(--dg-on-dark) 88%, var(--dg-primary)); }
  [data-theme="auto"] .dg-btn--inverse:hover { background: var(--dg-on-dark); }
  [data-theme="auto"] .dg-btn--primary:hover { background: color-mix(in srgb, var(--dg-action-fill) 60%, #fff); }
  [data-theme="auto"] .dg-btn--secondary:hover { border-color: var(--dg-text); background: color-mix(in srgb, var(--dg-text) 12%, transparent); color: var(--dg-text); }
  [data-theme="auto"] .dg-drop-zone--primary:is(:hover, .dg-drop-zone--over) { background: color-mix(in srgb, var(--dg-action-fill) 60%, #fff); }
  [data-theme="auto"] .dg-btn--danger:hover { background: color-mix(in srgb, var(--dg-danger-fill) 82%, #fff); }
  [data-theme="auto"] .dg-banner--danger { border-bottom: var(--dg-border-width-accent) solid var(--dg-danger); background: var(--dg-danger-tint); color: var(--dg-text); }
  [data-theme="auto"] .dg-btn--inverse { color: var(--dg-primary); }
}

/* ---- Corporate dark (the back office): depth and emphasis the role tokens can't give alone. ----
   tokens.json sets the ladder (Night page < Midnight surface < raised tint, each gated at 1.3:1)
   and gates every badge fill at 1.35:1 off a card, so badges are plain filled pills. On a raised
   band (a table head, a chosen row, the current tab or menu item, an alert) a fill would match the
   band, so it is deepened 45% toward the page instead: 1.46:1 or more off the raised step, and its
   text gains contrast. Table heads are a raised band, a chosen row takes the raised step as well
   as its rail, the current tab names itself in the action colour, and amounts lead a dense row in
   semibold. Every rule is scoped to corporate dark, so the public sites never see it. */
:is([data-site="corporate"][data-theme="dark"], [data-site="corporate"] [data-theme="dark"], [data-theme="dark"] [data-site="corporate"]) :is(thead, tr:has(> .dg-table__select :checked), [aria-current="page"], [aria-selected="true"], .dg-alert) :is(.dg-badge, .dg-tabs__tab .dg-count:not([class*="dg-count--"])) { background-image: linear-gradient(color-mix(in srgb, var(--dg-bg) 45%, transparent), color-mix(in srgb, var(--dg-bg) 45%, transparent)); }
/* The primary button is the saturated action fill with white text; hover lightens it 7% (white keeps 4.6:1). */
:is([data-site="corporate"][data-theme="dark"], [data-site="corporate"] [data-theme="dark"], [data-theme="dark"] [data-site="corporate"]) .dg-btn--primary:hover { background: color-mix(in srgb, var(--dg-action-fill) 93%, #fff); }
/* A secondary button stays a quiet fill on hover: no outline. */
:is([data-site="corporate"][data-theme="dark"], [data-site="corporate"] [data-theme="dark"], [data-theme="dark"] [data-site="corporate"]) .dg-btn--secondary:hover { border-color: transparent; background: color-mix(in srgb, var(--dg-text) 12%, var(--dg-tint)); }
/* A stat tile off the page is told apart by its fill (1.36:1), so it needs no outline. */
:is([data-site="corporate"][data-theme="dark"], [data-site="corporate"] [data-theme="dark"], [data-theme="dark"] [data-site="corporate"]) .dg-stat { border-color: transparent; }
:is([data-site="corporate"][data-theme="dark"], [data-site="corporate"] [data-theme="dark"], [data-theme="dark"] [data-site="corporate"]) .dg-table thead th { background: var(--dg-tint); }
:is([data-site="corporate"][data-theme="dark"], [data-site="corporate"] [data-theme="dark"], [data-theme="dark"] [data-site="corporate"]) .dg-table tbody tr:has(> .dg-table__select :checked) { background: var(--dg-tint); }
:is([data-site="corporate"][data-theme="dark"], [data-site="corporate"] [data-theme="dark"], [data-theme="dark"] [data-site="corporate"]) .dg-amount,
:is([data-site="corporate"][data-theme="dark"], [data-site="corporate"] [data-theme="dark"], [data-theme="dark"] [data-site="corporate"]) .dg-table .dg-table__num,
:is([data-site="corporate"][data-theme="dark"], [data-site="corporate"] [data-theme="dark"], [data-theme="dark"] [data-site="corporate"]) .dg-summary__value { font-weight: 600; }
/* data-theme="auto": the dark rules above, when the OS asks for dark. */
@media (prefers-color-scheme: dark) {
  :is([data-site="corporate"][data-theme="auto"], [data-site="corporate"] [data-theme="auto"], [data-theme="auto"] [data-site="corporate"]) :is(thead, tr:has(> .dg-table__select :checked), [aria-current="page"], [aria-selected="true"], .dg-alert) :is(.dg-badge, .dg-tabs__tab .dg-count:not([class*="dg-count--"])) { background-image: linear-gradient(color-mix(in srgb, var(--dg-bg) 45%, transparent), color-mix(in srgb, var(--dg-bg) 45%, transparent)); }
  :is([data-site="corporate"][data-theme="auto"], [data-site="corporate"] [data-theme="auto"], [data-theme="auto"] [data-site="corporate"]) .dg-btn--primary:hover { background: color-mix(in srgb, var(--dg-action-fill) 93%, #fff); }
  :is([data-site="corporate"][data-theme="auto"], [data-site="corporate"] [data-theme="auto"], [data-theme="auto"] [data-site="corporate"]) .dg-btn--secondary:hover { border-color: transparent; background: color-mix(in srgb, var(--dg-text) 12%, var(--dg-tint)); }
  :is([data-site="corporate"][data-theme="auto"], [data-site="corporate"] [data-theme="auto"], [data-theme="auto"] [data-site="corporate"]) .dg-stat { border-color: transparent; }
  :is([data-site="corporate"][data-theme="auto"], [data-site="corporate"] [data-theme="auto"], [data-theme="auto"] [data-site="corporate"]) .dg-table thead th { background: var(--dg-tint); }
  :is([data-site="corporate"][data-theme="auto"], [data-site="corporate"] [data-theme="auto"], [data-theme="auto"] [data-site="corporate"]) .dg-table tbody tr:has(> .dg-table__select :checked) { background: var(--dg-tint); }
  :is([data-site="corporate"][data-theme="auto"], [data-site="corporate"] [data-theme="auto"], [data-theme="auto"] [data-site="corporate"]) .dg-amount,
  :is([data-site="corporate"][data-theme="auto"], [data-site="corporate"] [data-theme="auto"], [data-theme="auto"] [data-site="corporate"]) .dg-table .dg-table__num,
  :is([data-site="corporate"][data-theme="auto"], [data-site="corporate"] [data-theme="auto"], [data-theme="auto"] [data-site="corporate"]) .dg-summary__value { font-weight: 600; }
}

/* ---- Corporate (the back office): a calm product look on top of the sharp components. ----
   tokens.json rounds corporate's corners (--dg-radius-*). These rules change what a token can't:
   secondary buttons and fields are quiet fills instead of outlined boxes, a pressed toggle is a
   pill, a stat is one filled tile, the current tab is filled as well as underlined, and a series
   badge drops its rule (a pill holds its hue). The public sites never match, so they keep their
   square, outlined look. :where() keeps each rule as weak as the one it replaces, so focus, error,
   checkbox and dark-band rules still win. corporate-dark.css holds the colours for the dark theme. */
/* A hairline keeps a secondary button a button on a tinted panel, where the fill alone matches the panel. */
:where([data-site="corporate"]) .dg-btn--secondary { border-color: var(--dg-border); background: var(--dg-tint); }
:where([data-site="corporate"]) .dg-btn--secondary:hover { background: color-mix(in srgb, var(--dg-text) 10%, var(--dg-tint)); color: var(--dg-text); }
/* Filter toggles (aria-pressed): pills, and pressed takes the action fill so the choice is plain. */
:where([data-site="corporate"]) .dg-btn[aria-pressed] { border-radius: var(--dg-radius-pill); }
:where([data-site="corporate"]) .dg-btn[aria-pressed="true"] { border-color: transparent; background: var(--dg-action-fill); color: var(--dg-on-action-fill); }

/* Fields: a faint fill and a soft border all round instead of the underline. */
:where([data-site="corporate"]) :is(.dg-field__input, .dg-field__control, .dg-search__box) {
  padding: var(--dg-field-padding-top) var(--dg-space-3);
  border: var(--dg-border-width-hairline) solid var(--dg-border);
  border-radius: var(--dg-radius-sm);
  background-color: color-mix(in srgb, var(--dg-text) 5%, transparent);
}
:where([data-site="corporate"]) select.dg-field__input {
  padding-right: 28px;
  background-color: color-mix(in srgb, var(--dg-text) 5%, transparent);
  background-position: right var(--dg-space-3) top calc(var(--dg-field-padding-top) + 0.625em - 6px);
}
:where([data-site="corporate"]) :is(.dg-field__control, .dg-search__box) :is(.dg-field__input, .dg-search__input),
:where([data-site="corporate"]) .dg-field__input[type="file"] { padding-inline: 0; border: 0; background: none; }
:where([data-site="corporate"]) :is(.dg-field__input:focus, .dg-field__control:focus-within, .dg-search__box:focus-within) { border-color: var(--dg-action); box-shadow: none; }
:where([data-site="corporate"]) .dg-field--error :is(.dg-field__input, .dg-field__control) { border-color: var(--dg-danger); box-shadow: none; }

/* A stat is a filled tile: no accent rule beside an outline. Inside a card it takes the raised step. */
[data-site="corporate"] .dg-stat { padding: var(--dg-space-3) var(--dg-space-4); border: var(--dg-border-width-hairline) solid var(--dg-border); border-radius: var(--dg-radius-md); background: var(--dg-surface); }
[data-site="corporate"] :is(.dg-card, .dg-panel, .dg-modal) .dg-stat { border-color: transparent; background: var(--dg-tint); }
/* The current tab is filled as well as underlined (tabs-gap and tab-padding in tokens.json give the fill its room). */
/* The current tab is bright text over the accent underline; no fill (a filled tab read as a button). */
[data-site="corporate"] .dg-tabs__tab:is([aria-current="page"], [aria-selected="true"]) { color: var(--dg-text); }
[data-site="corporate"] [class*="dg-badge--series-"] { border-left: 0; }
/* A badge with no tone is the site tone (Applied, New, Pre-approved): in the back office it takes
   the accent, so it reads as a state rather than as grey. Neutral states use dg-badge--neutral. */
[data-site="corporate"] .dg-badge:not([class*="dg-badge--"]) { color: var(--dg-action); }

/* ---- Small building blocks for dense back-office pages: text buttons, panels, dense buttons,
   code, small notices and small empty states. Same rules as components.css: role variables
   only, square corners, no shadows, no transitions. ---- */

/* Text button (dg_text_button): a sentence-case action drawn as an underlined link (Copy, Clear,
   Reveal, Remove), on a <button> or an <a>. The size class makes the box at least 24px square
   (WCAG 2.5.8) around the text, centered, so the baseline still lines up with the row. Plain
   links in running text (dg_link plain: true, no size class) are left as they are. */
.dg-link--plain:is(.dg-link--xs, .dg-link--sm, .dg-link--md) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 24px;
  min-height: 24px;
  white-space: nowrap;
  cursor: pointer;
}
.dg-link--plain.dg-link--xs { font: var(--dg-type-small); font-size: 13px; font-weight: 500; }
.dg-link--plain.dg-link--sm { font: var(--dg-type-small); font-weight: 500; }
.dg-link--plain.dg-link--md { font: var(--dg-type-body); font-weight: 500; }
.dg-link--plain:is(.dg-link--xs, .dg-link--sm, .dg-link--md):hover { text-decoration-thickness: 2px; }
/* Tones. Inside an alert every link reads as text (components.css), these included. */
.dg-link--danger { color: var(--dg-danger); }
.dg-link--muted { color: var(--dg-text-muted); }
.dg-link--muted:hover { color: var(--dg-text); }
.dg-link:disabled { color: var(--dg-text-muted); cursor: not-allowed; text-decoration: none; }

/* Dense button (dg_button size: :xs): for table rows and toolbars, 28px tall (24px compact). Sentence case:
   uppercase is for labels of 13px and up with tracking, which would make a row of these as wide
   as the small buttons they replace. */
.dg-btn--xs { gap: 6px; min-height: var(--dg-btn-xs-height); padding: 0 10px; font-size: 13px; letter-spacing: 0; text-transform: none; }
.dg-btn--xs .dg-icon { width: 16px; height: 16px; }
.dg-btn--icon.dg-btn--xs { width: var(--dg-btn-xs-height); height: var(--dg-btn-xs-height); padding: 0; }

/* Panel (dg_panel): a region of a page under a heading, its actions on the right. A <section>
   named by its heading. --flush drops the body padding so a table, code block or list runs edge
   to edge; a table's first and last columns then line up with the heading. */
.dg-panel { min-width: 0; border: var(--dg-border-width-hairline) solid var(--dg-border); border-radius: var(--dg-radius-md); background: var(--dg-surface); color: var(--dg-text); }
.dg-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dg-space-2) var(--dg-space-4);
  padding: var(--dg-space-3) var(--dg-space-4);
  border-bottom: var(--dg-border-width-hairline) solid var(--dg-border);
}
.dg-panel__head:last-child { border-bottom: 0; }
.dg-panel__heading { display: flex; flex: 1 1 10rem; flex-direction: column; gap: 2px; min-width: 0; }
.dg-panel__title { margin: 0; color: var(--dg-text); font: var(--dg-type-body); font-weight: 600; line-height: 1.4; }
.dg-panel__description { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dg-space-2) var(--dg-space-3); margin-left: auto; }
.dg-panel__body { padding: var(--dg-space-4); }
.dg-panel--flush > .dg-panel__body { padding: 0; }
.dg-panel--flush .dg-table :is(th, td):first-child { padding-left: var(--dg-space-4); }
.dg-panel--flush .dg-table :is(th, td):last-child { padding-right: var(--dg-space-4); }
.dg-panel--flush .dg-table > :last-child > tr:last-child > * { border-bottom: 0; }
.dg-panel--flush > .dg-panel__body > .dg-code { border: 0; }
/* Edge to edge, the focus ring goes inside, where the panel's border can't hide it. */
.dg-panel--flush > .dg-panel__body > .dg-code:focus-visible { outline-offset: calc(-1 * var(--dg-border-width-focus)); }
.dg-panel--flush > .dg-panel__body > :is(.dg-empty--sm, .dg-alert) { margin: var(--dg-space-4); }

/* Code. .dg-mono: an id, slug or key inside a line of text. .dg-kbd: a key to press.
   dg_code: a block (a payload, a log), scrolling past 20rem; one that may scroll is a named
   region in the tab order, so the focus ring shows when a keyboard is scrolling it. */
.dg-mono { font-family: var(--dg-font-mono); font-size: 0.875em; font-variant-ligatures: none; overflow-wrap: break-word; }
.dg-kbd {
  display: inline-block;
  box-sizing: border-box;
  min-width: 1.75em;
  padding: 0 0.4em;
  border: var(--dg-border-width-hairline) solid var(--dg-border);
  border-bottom-width: 2px;
  background: var(--dg-surface);
  color: var(--dg-text);
  font: 500 0.8125em/1.5 var(--dg-font-mono);
  text-align: center;
  white-space: nowrap;
}
.dg-code {
  box-sizing: border-box;
  max-height: 20rem;
  margin: 0;
  padding: var(--dg-space-3) var(--dg-space-4);
  overflow: auto;
  border: var(--dg-border-width-hairline) solid var(--dg-border);
  background: var(--dg-bg);
  color: var(--dg-text);
  font: 400 13px/1.5 var(--dg-font-mono);
  font-variant-ligatures: none;
  tab-size: 2;
  white-space: pre;
}
.dg-code code { font: inherit; }
.dg-code:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }

/* Small notice (dg_alert size: :sm): a compact note for a field, a table row or a card. An icon
   drawn for each tone (info, a warning triangle, a warning circle, a check) says the tone
   without the color. Icons are masks in the tone color; site and neutral use the text color,
   since the accent is too light on the tint. */
:root {
  --dg-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M8 7v4.6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='4.9' r='0.9'/%3E%3C/svg%3E");
  --dg-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M8 4.4V9' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='11.2' r='0.9'/%3E%3C/svg%3E");
  --dg-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l6.7 12.2H1.3z' fill='none' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M8 6.2v3.9' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='12' r='0.9'/%3E%3C/svg%3E");
  --dg-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M5.2 8.2l2 2 3.7-4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}
.dg-alert--sm {
  --dg-mask: var(--dg-icon-info);
  --dg-alert-icon: var(--dg-text);
  position: relative;
  padding: var(--dg-space-2) var(--dg-space-3) var(--dg-space-2) calc(var(--dg-space-3) + 16px + var(--dg-space-2));
  font: var(--dg-type-small);
  font-size: 13px;
  line-height: 1.45;
}
.dg-alert--sm::before {
  content: "";
  position: absolute;
  top: calc(var(--dg-space-2) + (1.45em - 16px) / 2);
  left: var(--dg-space-3);
  width: 16px;
  height: 16px;
  background: var(--dg-alert-icon);
  -webkit-mask: var(--dg-mask) center / contain no-repeat;
  mask: var(--dg-mask) center / contain no-repeat;
}
.dg-alert--sm.dg-alert--danger { --dg-mask: var(--dg-icon-alert); --dg-alert-icon: var(--dg-danger); }
.dg-alert--sm.dg-alert--warning { --dg-mask: var(--dg-icon-warning); --dg-alert-icon: var(--dg-warning); }
.dg-alert--sm.dg-alert--success { --dg-mask: var(--dg-icon-success); --dg-alert-icon: var(--dg-success); }
.dg-alert--sm.dg-alert--info { --dg-alert-icon: var(--dg-series-1); }
/* An alert's own icon (dg_alert icon:), in the tone's color where the tone's icon would be. */
.dg-alert--danger { --dg-alert-icon: var(--dg-danger); }
.dg-alert--warning { --dg-alert-icon: var(--dg-warning); }
.dg-alert--success { --dg-alert-icon: var(--dg-success); }
.dg-alert--info { --dg-alert-icon: var(--dg-series-1); }
.dg-alert:has(> .dg-alert__icon) { position: relative; padding-left: calc(var(--dg-space-5) + 20px + var(--dg-space-3)); }
.dg-alert__icon { position: absolute; top: calc(var(--dg-space-4) + 2px); left: var(--dg-space-5); display: flex; color: var(--dg-alert-icon, var(--dg-text)); }
.dg-alert--sm:has(> .dg-alert__icon) { padding-left: calc(var(--dg-space-3) + 16px + var(--dg-space-2)); }
.dg-alert--sm:has(> .dg-alert__icon)::before { content: none; }
.dg-alert--sm > .dg-alert__icon { top: calc(var(--dg-space-2) + (1.45em - 16px) / 2); left: var(--dg-space-3); }
.dg-alert--sm .dg-alert__title { margin: 0; font: inherit; font-weight: 600; }
.dg-alert--sm > p { margin: 0; }
.dg-alert--sm > p + p { margin-top: var(--dg-space-1); }
@media (forced-colors: active) {
  .dg-alert--sm::before { background: CanvasText; }
  .dg-alert__icon { color: CanvasText; }
}

/* Small empty state (dg_empty size: :sm): a plain line in small type, left-aligned, for inside
   a panel, a card or a table. The title is a paragraph, not a heading. */
.dg-empty--sm { align-items: flex-start; gap: 2px; padding: 0; border: 0; background: none; text-align: left; }
.dg-empty--sm .dg-empty__title { color: var(--dg-text-muted); font: var(--dg-type-small); font-weight: 500; }
.dg-empty--sm .dg-empty__actions { justify-content: flex-start; margin-top: var(--dg-space-1); }

/* ---- Fields, checkboxes, switches and search fields that work without a form builder. ---- */

/* Inline field (inline: true): the label beside the input, for dense edit grids. Labels take
   --dg-field-label-width (10rem), so a column of fields lines up; the hint or error sits under
   the input. Below 480px the label goes back on top. */
.dg-field--inline {
  display: grid;
  grid-template-columns: var(--dg-field-label-width, 10rem) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--dg-space-1) var(--dg-space-4);
}
.dg-field--inline > :not(.dg-field__label, .dg-field__head) { grid-column: 2; }
@media (max-width: 479.98px) {
  .dg-field--inline { display: flex; align-items: stretch; }
}

/* Switch (dg_switch): a checkbox with role="switch" for a setting that is simply on or off. A
   square track with a square knob: off, a hollow track with the knob on the left in the border
   color; on, the track fills with the action color and the knob moves right in on-action. The
   knob is a background, so it needs no extra element; Windows high contrast drops it and gets
   the native control instead. */
.dg-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 2px var(--dg-space-3);
  color: var(--dg-text);
  font: var(--dg-type-body);
}
.dg-switch__input {
  box-sizing: border-box;
  width: 44px;
  height: 24px;
  margin: 0;
  border: var(--dg-border-width-hairline) solid var(--dg-border-strong);
  border-radius: 0;
  background: var(--dg-surface) linear-gradient(var(--dg-border-strong), var(--dg-border-strong)) left 3px center / 16px 16px no-repeat;
  appearance: none;
  cursor: pointer;
}
.dg-switch__input:checked {
  border-color: var(--dg-action);
  background-color: var(--dg-action);
  background-image: linear-gradient(var(--dg-on-action), var(--dg-on-action));
  background-position: right 3px center;
}
.dg-switch__input:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-switch__input:disabled { opacity: 0.45; cursor: not-allowed; }
.dg-switch__label { cursor: pointer; }
.dg-switch:has(.dg-switch__input:disabled) .dg-switch__label { color: var(--dg-text-muted); cursor: not-allowed; }
.dg-switch__hint { grid-column: 2; margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); }
@media (forced-colors: active) {
  .dg-switch__input { width: auto; height: auto; appearance: auto; }
}

/* Search field (dg_search_field): a magnifying glass, the input, a result count and a clear
   control on one underline, like a field's. The count is a polite live region a filtering script
   rewrites. The clear control replaces the browser's own cross. */
.dg-search { display: flex; flex-direction: column; gap: var(--dg-space-2); }
.dg-search__label { color: var(--dg-text); font: var(--dg-type-small); font-weight: 500; }
.dg-search__box {
  display: flex;
  align-items: center;
  gap: var(--dg-space-2);
  padding: 10px 0 3px;
  border-bottom: var(--dg-border-width-hairline) solid var(--dg-border-strong);
}
/* Focus: the thicker underline, plus the ring, as on a field. The transparent outline shows in
   Windows high contrast, where the shadow is dropped. */
.dg-search__box:focus-within { outline: var(--dg-border-width-focus) solid transparent; outline-offset: 4px; border-bottom-color: var(--dg-action); box-shadow: 0 1px 0 0 var(--dg-action); }
.dg-search__box:has(.dg-search__input:focus-visible) { outline-color: var(--dg-focus); }
.dg-search__icon { color: var(--dg-text-muted); }
.dg-search__input {
  flex: 1;
  width: 100%; /* a percentage lets the box shrink below the input's 20-character default */
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--dg-text);
  font: var(--dg-type-body);
  line-height: 1.25;
  appearance: none;
}
.dg-search__input:focus { outline: none; }
.dg-search__input::placeholder { color: var(--dg-text-muted); opacity: 1; }
.dg-search__box:has(.dg-search__clear) .dg-search__input::-webkit-search-cancel-button { display: none; }
.dg-search__count { flex: none; color: var(--dg-text-muted); font: var(--dg-type-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A 32px target that doesn't push the underline down. */
.dg-search__clear {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-block: -6px;
  padding: 0;
  border: 0;
  border-radius: var(--dg-radius-sm);
  background: transparent;
  color: var(--dg-text-muted);
  text-decoration: none;
  cursor: pointer;
}
.dg-search__clear:hover { color: var(--dg-text); }
.dg-search__clear:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 0; }

/* Searchable select (data-dg-combobox on a <select>; searchable: true on dg_select and
   dg_select_tag). commands.js hides the select, which keeps the value, and puts a text box with
   role="combobox" in its place: the box takes the select's classes, wears the select's chevron and
   filters a .dg-suggest list as you type. The list is a manual popover in the top layer, placed by
   the script, so no panel, table scroller or modal clips it; its rows take the box's text size. */
.dg-select-search { display: contents; }
.dg-select-search__native { display: none !important; }
.dg-select-search__input {
  min-width: 0;
  padding-right: 24px;
  background-image: var(--dg-select-chevron);
  background-position: right 6px center;
  background-repeat: no-repeat;
  background-size: 12px;
  text-overflow: ellipsis;
}
.dg-select-search__input.dg-field__input { background-position: right 0 top calc(var(--dg-field-padding-top) + 0.625em - 6px); }
.dg-field--compact .dg-select-search__input.dg-field__input { padding-right: 22px; }
.dg-suggest.dg-select-search__popup {
  position: fixed;
  inset: auto;
  z-index: 1000; /* the top layer already sits above the page; this is for browsers without popovers */
  box-sizing: border-box;
  width: max-content;
  max-width: min(32rem, calc(100vw - 2 * var(--dg-space-2)));
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--dg-radius-md);
  color: var(--dg-text);
  font: var(--dg-type-body);
  font-size: inherit;
}
/* The listbox is the scroller (its height set by the script), so axe and screen readers treat it as
   the combobox's list rather than a region that needs its own focus. */
.dg-select-search__popup [role="listbox"] { position: relative; padding: var(--dg-space-1) 0; overflow-y: auto; overscroll-behavior: contain; }
.dg-select-search__popup .dg-suggest__option {
  flex-direction: row;
  align-items: baseline;
  gap: var(--dg-space-2);
  padding: var(--dg-space-2) var(--dg-space-3);
  font: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.3;
}
.dg-select-search__popup .dg-suggest__option + .dg-suggest__option { border-top: 0; }
/* The chosen option carries a tick; the active one (arrow keys, hover) the tint. */
.dg-select-search__popup .dg-suggest__option--current { font-weight: 600; }
.dg-select-search__popup .dg-suggest__option--current::after {
  content: "";
  flex: none;
  align-self: center;
  width: 12px;
  height: 12px;
  margin-left: auto;
  background: currentColor;
  -webkit-mask: var(--dg-icon-check) center / contain no-repeat;
  mask: var(--dg-icon-check) center / contain no-repeat;
}
.dg-select-search__popup .dg-suggest__option[aria-disabled="true"] { color: var(--dg-text-muted); cursor: not-allowed; }
.dg-select-search__popup .dg-suggest__option[aria-disabled="true"]:hover { background: none; }
.dg-select-search__match { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.dg-select-search__group {
  padding: var(--dg-space-2) var(--dg-space-3) var(--dg-space-1);
  color: var(--dg-text-muted);
  font: var(--dg-type-caption);
  letter-spacing: var(--dg-type-caption-tracking);
  text-transform: var(--dg-type-caption-case);
}
.dg-select-search__popup .dg-suggest__empty { padding: var(--dg-space-2) var(--dg-space-3); }
@media (forced-colors: active) {
  .dg-select-search__popup .dg-suggest__option[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ---- Foundations: series badges, the compact progress bar and the compact stage strip. ---- */

/* Series badges (dg_badge series: 1 … 6): a category, never a status. The tint
   carries the text, and a rule in the series color on the left keeps the categories apart
   where tints alone are close, and apart from status badges, which have no rule. */
.dg-badge--series-1 { border-left: var(--dg-border-width-accent) solid var(--dg-series-1); background: var(--dg-series-1-tint); }
.dg-badge--series-2 { border-left: var(--dg-border-width-accent) solid var(--dg-series-2); background: var(--dg-series-2-tint); }
.dg-badge--series-3 { border-left: var(--dg-border-width-accent) solid var(--dg-series-3); background: var(--dg-series-3-tint); }
.dg-badge--series-4 { border-left: var(--dg-border-width-accent) solid var(--dg-series-4); background: var(--dg-series-4-tint); }
.dg-badge--series-5 { border-left: var(--dg-border-width-accent) solid var(--dg-series-5); background: var(--dg-series-5-tint); }
.dg-badge--series-6 { border-left: var(--dg-border-width-accent) solid var(--dg-series-6); background: var(--dg-series-6-tint); }

/* Progress: a caption under the bar, and --sm, thin and close-set for table cells and cards. */
.dg-progress__caption { margin: 0; color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-progress--sm { gap: var(--dg-space-1); }
.dg-progress--sm .dg-progress__track { height: 2px; }

/* Steps --sm: 20px markers and small titles. */
.dg-steps--sm .dg-steps__item { gap: var(--dg-space-3); padding-bottom: var(--dg-space-4); }
.dg-steps--sm .dg-steps__item:last-child { padding-bottom: 0; }
.dg-steps--sm .dg-steps__item:not(:last-child)::before { top: 20px; left: 9.5px; }
.dg-steps--sm .dg-steps__marker { width: 20px; height: 20px; }
.dg-steps--sm .dg-steps__item--done .dg-steps__marker::after { width: 10px; height: 10px; }
.dg-steps--sm .dg-steps__text { padding-top: 0; }
.dg-steps--sm .dg-steps__title { font: var(--dg-type-small); font-weight: 500; }
.dg-steps--sm .dg-steps__item--todo .dg-steps__title { font-weight: 400; }

/* Steps --sm --row: a one-line stage strip at every width, marker beside its title and a rule
   running on to the next stage. When the stages don't fit, they wrap rather than scroll. */
.dg-steps--sm.dg-steps--row { flex-flow: row wrap; row-gap: var(--dg-space-2); }
.dg-steps--sm.dg-steps--row .dg-steps__item { flex: 1 1 auto; flex-direction: row; align-items: center; gap: var(--dg-space-2); padding: 0; }
.dg-steps--sm.dg-steps--row .dg-steps__item:last-child { flex: none; }
.dg-steps--sm.dg-steps--row .dg-steps__item:not(:last-child)::before { content: none; }
.dg-steps--sm.dg-steps--row .dg-steps__item:not(:last-child)::after {
  content: "";
  flex: 1 1 var(--dg-space-4);
  min-width: var(--dg-space-2);
  margin-right: var(--dg-space-2);
  border-top: var(--dg-border-width-hairline) solid var(--dg-border);
}
.dg-steps--sm.dg-steps--row .dg-steps__item--done:not(:last-child)::after { border-top-color: var(--dg-action); }
.dg-steps--sm.dg-steps--row .dg-steps__title { white-space: nowrap; }

/* Steps --icons: the marker shows the state, not the number. Done is a tick, current a filled
   marker with a square in it, to do an empty one. The helper also says each state in words. */
.dg-steps--icons .dg-steps__item--current .dg-steps__marker::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--dg-on-action);
}
.dg-steps--sm.dg-steps--icons .dg-steps__item--current .dg-steps__marker::after { width: 6px; height: 6px; }
.dg-steps--icons .dg-steps__item--todo .dg-steps__marker { border-color: var(--dg-text-muted); }

/* ---- Modal sizes and footers, toasts scripts can add, busy states, copy buttons, tooltips and in-page tab panels. ---- */

/* Modal sizes (dg_modal size:). The dialog scrolls; its head and foot stay put. */
.dg-modal { overflow-y: auto; overscroll-behavior: contain; }
.dg-modal--lg { width: min(800px, calc(100vw - 2 * var(--dg-space-4))); }
.dg-modal--xl { width: min(1140px, calc(100vw - 2 * var(--dg-space-4))); }
.dg-modal--full { width: calc(100vw - 2 * var(--dg-space-4)); max-width: none; height: calc(100dvh - 2 * var(--dg-space-4)); max-height: none; }
/* A short body still puts the foot at the bottom of a full-screen modal. Only while open: a closed
   dialog must keep the browser's display: none. */
.dg-modal--full[open] { display: flex; flex-direction: column; }
.dg-modal--full .dg-modal__body { flex: 1 0 auto; }
.dg-modal__head { position: sticky; top: 0; z-index: 1; background: var(--dg-surface); }
/* Footer (dg_modal footer:): Cancel and Confirm, at the foot while the body scrolls. */
.dg-modal__foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--dg-space-3);
  padding: var(--dg-space-4) var(--dg-space-6);
  border-top: var(--dg-border-width-hairline) solid var(--dg-border);
  background: var(--dg-surface);
}

/* Toasts a script adds (dg_toast_region, DgToast.show): a strip at the foot of the screen, clear of
   the tab and action bars, that lets clicks through around the toasts. motion.css brings each one
   in and takes notes away; commands.js removes them once gone. */
.dg-toasts {
  position: fixed;
  right: var(--dg-space-4);
  bottom: calc(var(--dg-space-6) + env(safe-area-inset-bottom));
  left: var(--dg-space-4);
  z-index: 20;
  display: grid;
  gap: var(--dg-space-2);
  width: min(420px, calc(100% - 2 * var(--dg-space-4)));
  margin-inline: auto;
  pointer-events: none;
}
.dg-toasts > * { border-radius: var(--dg-radius-md); pointer-events: auto; }
.dg-page:has(.dg-tab-bar:not(.dg-tab-bar--static)) .dg-toasts { bottom: calc(var(--dg-tab-bar-height) + var(--dg-space-6) + env(safe-area-inset-bottom)); }
@media (max-width: 767.98px) {
  .dg-page:has(.dg-action-bar:not(.dg-action-bar--static)) .dg-toasts { bottom: calc(var(--dg-action-bar-height) + var(--dg-space-6) + env(safe-area-inset-bottom)); }
}

/* A message with a close button (dg_flash dismissible:, toasts). */
.dg-alert--dismissible { display: flex; align-items: flex-start; gap: var(--dg-space-3); }
.dg-alert__text { flex: 1; min-width: 0; }
.dg-alert__close {
  flex: none;
  width: 24px;
  height: 24px;
  margin: -1px -8px -1px 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.dg-alert__close::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: auto;
  background: currentColor;
  -webkit-mask: var(--dg-icon-cross) center / contain no-repeat;
  mask: var(--dg-icon-cross) center / contain no-repeat;
}
.dg-alert__close:hover { background-color: color-mix(in srgb, currentColor 10%, transparent); }
.dg-alert__close:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: -2px; }

/* Spinner (dg_spinner): a ring with one quarter drawn, in the text color. The only round thing in
   the system. motion.css turns it, and holds it still for reduced motion. */
.dg-spinner,
:is(.dg-btn[aria-busy="true"], form[aria-busy="true"] .dg-btn--primary[type="submit"])::before {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: var(--dg-border-width-focus) solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
}
.dg-spinner { display: inline-block; flex: none; vertical-align: middle; }
.dg-spinner--16 { width: 16px; height: 16px; }
.dg-spinner--24 { width: 24px; height: 24px; }
.dg-spinner--32 { width: 32px; height: 32px; }
.dg-spinner--48 { width: 48px; height: 48px; }

/* Busy button: aria-busy="true" on any .dg-btn (Turbo sets it on a submitting form). The label
   turns clear and holds the width, a spinner sits in its place, and clicks stop (commands.js stops
   Enter and Space too). */
:is(.dg-btn[aria-busy="true"], form[aria-busy="true"] .dg-btn--primary[type="submit"]) {
  position: relative;
  pointer-events: none;
  -webkit-text-fill-color: transparent;
}
:is(.dg-btn[aria-busy="true"], form[aria-busy="true"] .dg-btn--primary[type="submit"]) > * { visibility: hidden; }
:is(.dg-btn[aria-busy="true"], form[aria-busy="true"] .dg-btn--primary[type="submit"])::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
}
@media (forced-colors: active) {
  :is(.dg-btn[aria-busy="true"], form[aria-busy="true"] .dg-btn--primary[type="submit"]) { -webkit-text-fill-color: ButtonText; }
}

/* Copy button (dg_copy_button): a .dg-link with both labels stacked in one cell, so the width holds
   when Copy turns to Copied. Only the visible one names the button. */
.dg-copy { display: inline-flex; align-items: center; }
.dg-copy__text { display: inline-grid; }
.dg-copy__label,
.dg-copy__done { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--dg-space-1); }
.dg-copy__done,
.dg-copy--copied .dg-copy__label { visibility: hidden; }
.dg-copy--copied .dg-copy__done { visibility: visible; }

/* Tooltip (dg_tooltip): a short label over its trigger on hover and keyboard focus, in the dg_help
   bubble's colors. Centred on the trigger; commands.js keeps it on screen with --dg-tooltip-shift,
   --dg-tooltip-max and .dg-tooltip-anchor--below, as it does for dg_help. ::before bridges the gap
   so the pointer can move onto it; Escape hides it (.dg-tooltip-anchor--hidden). */
/* fit-content: in a flex column or grid (a modal body) the anchor would stretch, and the tooltip
   would centre on the row rather than the trigger. */
.dg-tooltip-anchor { position: relative; display: inline-flex; width: fit-content; }
.dg-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 20;
  display: none;
  width: max-content;
  max-width: min(240px, calc(100vw - 2 * var(--dg-gutter)), var(--dg-tooltip-max, 240px));
  padding: var(--dg-space-1) var(--dg-space-2);
  border: var(--dg-border-width-hairline) solid transparent; /* shows in forced colors */
  border-radius: var(--dg-radius-sm);
  background: var(--dg-primary);
  color: var(--dg-on-dark);
  font: var(--dg-type-small);
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  white-space: normal;
  translate: calc(-50% + var(--dg-tooltip-shift, 0px)) 0;
}
.dg-tooltip::before { content: ""; position: absolute; top: 100%; right: 0; left: 0; height: 10px; }
/* The caret stays on the trigger's centre however far the tooltip slides. */
.dg-tooltip::after { content: ""; position: absolute; top: 100%; left: calc(50% - 5px - var(--dg-tooltip-shift, 0px)); border: 5px solid transparent; border-top-color: var(--dg-primary); }
.dg-tooltip-anchor--below .dg-tooltip { top: calc(100% + 8px); bottom: auto; }
.dg-tooltip-anchor--below .dg-tooltip::before { top: auto; bottom: 100%; }
.dg-tooltip-anchor--below .dg-tooltip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--dg-primary); }
.dg-tooltip-anchor:hover .dg-tooltip,
.dg-tooltip-anchor:has(:focus-visible) .dg-tooltip { display: block; }
.dg-tooltip-anchor.dg-tooltip-anchor--hidden .dg-tooltip { display: none; opacity: 0; }
/* Midnight on the dark page's Ink needs an edge. */
[data-theme="dark"] .dg-tooltip { border-color: var(--dg-border); }

/* In-page tab panels (dg_tab_panels): dg_tabs' look on buttons, one panel showing. With scripts off
   commands.js can't switch them, so every panel shows, one under another. */
.dg-tab-panels__panel { padding-top: var(--dg-space-6); }
.dg-tab-panels__panel:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
@media (scripting: none) {
  .dg-tab-panels__panel[hidden] { display: block !important; }
}
/* data-theme="auto": the dark rules above, when the OS asks for dark. */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .dg-tooltip { border-color: var(--dg-border); }
}

/* ---- Pieces the tenant and owner portals share: a to-do list, dense ledger lines that open in
   place, a band of stats and a card's foot of chips. Same rules as components.css: role
   variables only, no transitions (motion.css has them). ---- */

/* To-do list (dg_todo_list, dg_todo): toned small alerts in a list under a heading, each with its
   title, a note and one control that always stays on the right (the text wraps instead), so
   every row's action lines up. A fold under the row (details:) opens to what the total is made of. */
.dg-todo { display: grid; gap: var(--dg-space-3); }
.dg-todo__title { margin: 0; font: var(--dg-type-h4); letter-spacing: var(--dg-type-h4-tracking); }
.dg-todo__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dg-space-2); margin: 0; padding: 0; list-style: none; }
.dg-todo__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dg-space-2) var(--dg-space-4); }
.dg-todo__text { flex: 1 1 0; min-width: 0; margin: 0; }
.dg-todo__item > :is(.dg-btn, a, button):not(.dg-todo__details *) { flex: none; }
.dg-todo__name { display: block; font-weight: 600; }
.dg-todo__note { display: block; }
.dg-todo__details { flex-basis: 100%; }
.dg-todo__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--dg-space-1);
  min-height: 24px;
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
  cursor: pointer;
}
.dg-todo__summary::-webkit-details-marker { display: none; }
.dg-todo__summary::before,
.dg-list__fold > summary::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--dg-icon-chevron) center / contain no-repeat;
  mask: var(--dg-icon-chevron) center / contain no-repeat;
}
.dg-todo__details[open] > .dg-todo__summary::before,
.dg-list__fold[open] > summary::before { rotate: 90deg; }
.dg-todo__summary:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-todo__body { padding-top: var(--dg-space-2); }
/* Compact (dg_todo_list compact: true): one line per row, a tone stripe instead of a fill, the
   note beside the title and cut short; the fold still opens under the row. */
.dg-todo--compact .dg-todo__items { gap: 0; border-top: var(--dg-border-width-hairline) solid var(--dg-border); }
.dg-todo--compact .dg-todo__item {
  padding-block: var(--dg-space-2);
  border: 0;
  border-bottom: var(--dg-border-width-hairline) solid var(--dg-border);
  border-left: var(--dg-border-width-accent) solid var(--dg-alert-icon, var(--dg-border));
  background: none;
}
.dg-todo--compact .dg-todo__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dg-todo--compact :is(.dg-todo__name, .dg-todo__note) { display: inline; }
.dg-todo--compact .dg-todo__note { margin-left: var(--dg-space-2); color: var(--dg-text-muted); }
.dg-todo--compact .dg-todo__details { padding-left: var(--dg-space-1); }
/* An amount in a fold never breaks across lines; its label wraps instead. */
:is(.dg-todo__body, .dg-list__body) .dg-summary__value { white-space: nowrap; }

/* Compact list (dg_list density: :compact): every row tighter, for long lists. */
.dg-list--compact .dg-list__head { padding: 6px var(--dg-space-3); }
.dg-list--compact .dg-list__row { gap: var(--dg-space-3); padding: var(--dg-space-2) var(--dg-space-3); }
.dg-list--compact .dg-list__icon { width: 32px; height: 32px; }

/* Ledger line (dg_list_row): about 40px tall, dense in any list. The title, a muted secondary and a
   badge wrap together on the left; the amount keeps the right. With a block the line is the
   summary of a <details>: a caret before it turns as the body opens under the title. */
.dg-list__row--line { flex-wrap: wrap; color: inherit; text-decoration: none; align-items: baseline; align-content: center; gap: 2px var(--dg-space-3); box-sizing: border-box; min-height: 40px; padding: var(--dg-space-2) var(--dg-space-3); }
.dg-list__lead { display: inline-flex; flex: 1 1 10rem; flex-wrap: wrap; align-items: baseline; gap: 0 var(--dg-space-2); min-width: 0; }
.dg-list__lead > .dg-badge { align-self: center; }
.dg-list__secondary { color: var(--dg-text-muted); font: var(--dg-type-small); }
.dg-list__amount { margin-inline-start: auto; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.dg-list__fold > summary { list-style: none; cursor: pointer; }
.dg-list__fold > summary::-webkit-details-marker { display: none; }
.dg-list__fold > summary::before { align-self: center; color: var(--dg-text-muted); }
.dg-list__fold > summary:hover { background: color-mix(in srgb, var(--dg-tint) 50%, transparent); }
.dg-list__fold > summary:hover .dg-list__title { color: var(--dg-action); }
.dg-list__fold > summary:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: -2px; }
.dg-list__body { padding: 0 var(--dg-space-3) var(--dg-space-3) calc(var(--dg-space-3) * 2 + 12px); font: var(--dg-type-small); }
/* A line reached by its link (#bill-12) is ringed and tinted while it is the :target. */
:is(.dg-list__fold, .dg-list__row--line):target { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: -2px; background: color-mix(in srgb, var(--dg-tint) 60%, transparent); }

/* Stat band (dg_stats band: true): one filled, ruled band. Two up below 36rem (an odd last stat
   spans both), one line from 36rem; a container query, so a narrow column folds it too. Labels
   sit above smaller values; a danger stat is ruled across its top. */
.dg-stats--band { display: block; container-type: inline-size; border: var(--dg-border-width-hairline) solid var(--dg-border); border-radius: var(--dg-radius-md); background: var(--dg-surface); }
.dg-stats__band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dg-stats--band .dg-stats__band > .dg-stat { gap: 2px; padding: var(--dg-space-2) var(--dg-space-4); border: 0; border-radius: 0; background: none; }
.dg-stats--band .dg-stats__band > .dg-stat:nth-child(even) { border-inline-start: var(--dg-border-width-hairline) solid var(--dg-border); }
.dg-stats--band .dg-stats__band > .dg-stat:nth-child(n+3) { border-block-start: var(--dg-border-width-hairline) solid var(--dg-border); }
.dg-stats--band .dg-stats__band > .dg-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dg-stats--band .dg-stats__band > .dg-stat--danger { box-shadow: inset 0 var(--dg-border-width-accent) 0 var(--dg-danger); }
@container (min-width: 36rem) {
  .dg-stats__band { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; grid-template-columns: none; }
  .dg-stats--band .dg-stats__band > .dg-stat:nth-child(n+3) { border-block-start: 0; }
  .dg-stats--band .dg-stats__band > .dg-stat + .dg-stat { border-inline-start: var(--dg-border-width-hairline) solid var(--dg-border); }
  .dg-stats--band .dg-stats__band > .dg-stat:last-child:nth-child(odd) { grid-column: auto; }
}
.dg-stats__band .dg-stat__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dg-space-1); order: -1; }
.dg-stats__band .dg-stat__value { font: var(--dg-type-h3); font-variant-numeric: tabular-nums lining-nums; }
.dg-stat__note { color: var(--dg-text-muted); }
/* A linked value (dg_stat href: with help:, or any linked stat in a band): the action color with a
   resting underline and an arrow, so it reads as a link before it is hovered. */
:is(.dg-stat__link, .dg-stats__band a.dg-stat .dg-stat__value) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: var(--dg-action);
  text-decoration: underline 2px;
  text-underline-offset: 6px;
}
:is(.dg-stat__link, .dg-stats__band a.dg-stat .dg-stat__value)::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--dg-icon-arrow) center / contain no-repeat;
  mask: var(--dg-icon-arrow) center / contain no-repeat;
}
.dg-stat--danger :is(.dg-stat__link, a.dg-stat__value),
.dg-stats__band a.dg-stat--danger .dg-stat__value { color: var(--dg-danger); }
:is(.dg-stat__link, .dg-stats__band a.dg-stat .dg-stat__value):hover,
.dg-stats__band a.dg-stat:hover .dg-stat__value { text-decoration-thickness: 3px; }
.dg-stat__link:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-stats__band a.dg-stat .dg-stat__label { text-decoration: none; }
.dg-stats__band a.dg-stat:hover .dg-stat__label { color: var(--dg-text-muted); }
.dg-stats__band a.dg-stat .dg-stat__label::after { content: none; }

/* Card foot (dg_card_meta items:): one line of icon-and-text chips across the card's foot, never
   wrapping; the arrow at its end when the card is a link. :medium and :low chips leave the line
   on a narrow card (under 16rem and 24rem) first; any chip still past the end drops whole. All stay
   in the accessible text. */
.dg-card__foot {
  container-type: inline-size;
  display: flex;
  align-items: center;
  gap: var(--dg-space-3);
  margin: auto calc(-1 * var(--dg-space-6)) calc(-1 * var(--dg-space-6));
  padding: var(--dg-space-2) var(--dg-space-6);
  border-top: var(--dg-border-width-hairline) solid var(--dg-border);
  border-radius: 0 0 var(--dg-radius-md) var(--dg-radius-md);
  background: var(--dg-bg);
  color: var(--dg-text-muted);
  font: var(--dg-type-small);
}
/* One line tall: a chip that does not fit wraps onto the clipped second line whole, never cut. */
.dg-card__chips { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--dg-space-2) var(--dg-space-3); height: 20px; min-width: 0; margin: 0; padding: 0; overflow: hidden; list-style: none; white-space: nowrap; }
.dg-card__chip { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 20px; }
.dg-card__chip > .dg-icon { flex: none; }
.dg-card__chip--danger { color: var(--dg-danger); }
.dg-card__chip--warning { color: var(--dg-warning); }
.dg-card__chip--success { color: var(--dg-success); }
:is(.dg-card:has(.dg-card__link), a.dg-card) .dg-card__foot::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--dg-action);
  -webkit-mask: var(--dg-icon-arrow) center / contain no-repeat;
  mask: var(--dg-icon-arrow) center / contain no-repeat;
}
.dg-card--dark .dg-card__foot { border-top-color: color-mix(in srgb, var(--dg-detail) 40%, transparent); background: color-mix(in srgb, var(--dg-on-dark) 8%, var(--dg-primary)); color: var(--dg-detail); }
.dg-card--dark .dg-card__foot::after { background: var(--dg-on-dark); }
@container (max-width: 24rem) {
  .dg-card__chip--low { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@container (max-width: 16rem) {
  .dg-card__chip--medium { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* Touch screens: the folds, linked values and summaries reach 44px. */
@media (pointer: coarse) {
  :is(.dg-list__fold > summary, .dg-todo__summary, .dg-stat__link) { min-height: 44px; }
}

/* ---- The app shell for back-office tools: side navigation with sections, counts and a filter; menu buttons. ---- */

/* Shell (dg_shell): the navigation column, the page (<main id="main">) and an optional aside.
   Below 1280px the navigation is a drawer: the same element, a popover that dg_shell_toggle
   opens (no JS). Closed, it is display: none, so its links leave the Tab order; Escape and a
   click outside close it and focus returns to the toggle. The breakpoint is written into the
   media queries (a custom property can't be used in one). Tune the rest per app:
   --dg-shell-top is the height of a sticky header above the shell, so the column sits under it. */
.dg-shell {
  --dg-shell-nav-width: 15rem;
  --dg-shell-aside-width: 20rem;
  --dg-shell-gutter: var(--dg-space-8);
  --dg-shell-top: 0px;
  display: grid;
  grid-template: "nav main" auto / var(--dg-shell-nav-width) minmax(0, 1fr);
  align-items: start;
}
.dg-shell--aside { grid-template: "nav main aside" auto / var(--dg-shell-nav-width) minmax(0, 1fr) var(--dg-shell-aside-width); }
.dg-shell__main { grid-area: main; min-width: 0; padding: var(--dg-shell-gutter); }
.dg-shell__aside {
  grid-area: aside;
  align-self: stretch;
  min-width: 0;
  padding: var(--dg-shell-gutter);
  border-left: var(--dg-border-width-hairline) solid var(--dg-border);
}
/* From 1280px the popover is shown in place, as a sticky column; these rules undo the
   browser's popover styles. */
.dg-shell__nav {
  grid-area: nav;
  position: sticky;
  inset: auto;
  top: var(--dg-shell-top);
  display: block;
  box-sizing: border-box;
  width: auto;
  height: calc(100dvh - var(--dg-shell-top));
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-right: var(--dg-border-width-hairline) solid var(--dg-border);
  background: var(--dg-surface);
  color: var(--dg-text);
}
.dg-shell__toggle,
.dg-shell__close {
  display: none;
  align-items: center;
  gap: var(--dg-space-2);
  padding: 8px 0;
  border: 0;
  background: none;
  color: inherit;
  font: var(--dg-type-button);
  letter-spacing: var(--dg-type-button-tracking);
  text-transform: var(--dg-type-button-case);
  cursor: pointer;
}
.dg-shell__toggle::before,
.dg-shell__close::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--dg-shell-mask) center / contain no-repeat;
  mask: var(--dg-shell-mask) center / contain no-repeat;
}
.dg-shell__toggle::before { --dg-shell-mask: var(--dg-icon-menu); }
.dg-shell__close::after { --dg-shell-mask: var(--dg-icon-cross); width: 12px; height: 12px; }
.dg-shell__toggle:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 4px; }
.dg-shell__close:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: -2px; }
@media (max-width: 1279.98px) {
  .dg-shell { grid-template: "main" auto / minmax(0, 1fr); }
  .dg-shell--aside { grid-template: "main aside" auto / minmax(0, 1fr) var(--dg-shell-aside-width); }
  .dg-shell__toggle { display: inline-flex; }
  .dg-shell__nav {
    position: fixed;
    inset: 0 auto 0 0;
    flex-direction: column;
    width: min(20rem, calc(100vw - var(--dg-space-12)));
    height: 100dvh;
    max-height: none;
    border-right-color: var(--dg-border-strong);
  }
  .dg-shell__nav:popover-open { display: flex; }
  .dg-shell__nav:not(:popover-open) { display: none; }
  .dg-shell__nav::backdrop { background: var(--dg-scrim); }
  .dg-shell__close { display: inline-flex; flex: none; align-self: flex-end; margin: var(--dg-space-2) var(--dg-space-2) 0 0; padding: 8px; color: var(--dg-text-muted); }
  .dg-shell__close:hover { color: var(--dg-text); }
}
@media (max-width: 991.98px) {
  .dg-shell--aside { grid-template: "main" auto "aside" auto / minmax(0, 1fr); }
  .dg-shell__aside { border-top: var(--dg-border-width-hairline) solid var(--dg-border); border-left: 0; }
}
@media (max-width: 767.98px) {
  .dg-shell { --dg-shell-gutter: var(--dg-space-4); }
}
/* In a dg_bar, pass the toggle as actions:. Below 480px the bar moves its actions into its own
   menu; the toggle stays in the bar instead, so the drawer never opens from inside that menu. */
@media (max-width: 479.98px) {
  .dg-bar > .dg-bar__actions:has(> .dg-shell__toggle) { display: flex; }
  .dg-bar > .dg-bar__actions:has(> .dg-shell__toggle) > :not(.dg-shell__toggle),
  .dg-bar__menu-actions > .dg-shell__toggle { display: none; }
}

/* Side navigation (dg_sidenav): plain lists and folding sections of links, all sentence case at
   14px: section names in the text color and semibold, links muted. The current page has the
   action rule on the left; counts are quiet chips pushed right (the current page's in the action color). */
.dg-sidenav { display: flex; flex-direction: column; gap: var(--dg-space-2); padding: var(--dg-space-4) 0 var(--dg-space-6); }
.dg-sidenav__filter { padding: 0 var(--dg-space-4) var(--dg-space-2); }
.dg-sidenav__list { margin: 0; padding: 0; list-style: none; }
.dg-sidenav__link {
  display: flex;
  align-items: center;
  gap: var(--dg-space-2);
  padding: 7px var(--dg-space-4) 7px calc(var(--dg-space-4) - var(--dg-border-width-focus));
  border-left: var(--dg-border-width-focus) solid transparent;
  color: var(--dg-text-muted);
  font: var(--dg-type-small);
  text-decoration: none;
}
.dg-sidenav__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dg-sidenav__link:hover { background: var(--dg-tint); color: var(--dg-text); }
.dg-sidenav__link[aria-current="page"] { border-left-color: var(--dg-action); background: var(--dg-tint); color: var(--dg-text); font-weight: 600; }
.dg-sidenav__link:focus-visible,
.dg-sidenav__summary:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: -2px; }
.dg-sidenav__summary {
  display: flex;
  align-items: center;
  gap: var(--dg-space-2);
  padding: var(--dg-space-3) var(--dg-space-4) var(--dg-space-2);
  color: var(--dg-text);
  font: var(--dg-type-small);
  font-weight: 600;
  text-align: left;
  list-style: none;
  cursor: pointer;
}
.dg-sidenav__summary::-webkit-details-marker { display: none; }
.dg-sidenav__heading { margin-right: auto; }
.dg-sidenav__summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--dg-icon-chevron-down) center / contain no-repeat;
  mask: var(--dg-icon-chevron-down) center / contain no-repeat;
}
.dg-sidenav__section[open] > .dg-sidenav__summary::after { transform: rotate(180deg); }
.dg-sidenav__summary:hover { color: var(--dg-action); }
.dg-sidenav .dg-count { flex: none; background: var(--dg-neutral-tint); color: var(--dg-text); }
.dg-sidenav__link[aria-current="page"] .dg-count:not(.dg-count--warning, .dg-count--danger) { background: var(--dg-action); color: var(--dg-on-action); }

/* Count tones (dg_count tone:): the badge tints, so a warning reads the same everywhere. In tabs,
   where a count is plain "(4)", the number takes the tone color. */
.dg-count.dg-count--warning { background: var(--dg-warning-tint); color: var(--dg-text); }
.dg-count.dg-count--danger { background: var(--dg-danger-tint); color: var(--dg-text); }
.dg-tabs__tab .dg-count.dg-count--warning { background: none; color: var(--dg-warning); }
.dg-tabs__tab .dg-count.dg-count--danger { background: none; color: var(--dg-danger); }

/* Menu button (dg_menu): a popover menu under its trigger, lined up with the trigger's end
   (--end) or start (--start), flipping when there is no room. Escape and an outside click close
   it with no JS. Without anchor positioning the browser centres the popover on screen. */
.dg-menu { display: inline-flex; }
.dg-menu__trigger:not(.dg-btn--icon)::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--dg-icon-chevron-down) center / contain no-repeat;
  mask: var(--dg-icon-chevron-down) center / contain no-repeat;
}
.dg-menu:has(> .dg-menu__list:popover-open) > .dg-menu__trigger { background: var(--dg-text); color: var(--dg-bg); }
/* A quiet trigger (trigger: :quiet) has no box; open, it keeps the hover tint rather than filling. */
.dg-menu:has(> .dg-menu__list:popover-open) > .dg-menu__trigger.dg-btn--quiet { background: color-mix(in srgb, var(--dg-text) 10%, transparent); color: var(--dg-text); }
.dg-menu__list {
  box-sizing: border-box;
  min-width: 12rem;
  max-width: min(20rem, calc(100vw - 2 * var(--dg-space-4)));
  padding: var(--dg-space-1) 0;
  border: var(--dg-border-width-hairline) solid var(--dg-border-strong);
  border-radius: var(--dg-radius-md);
  background: var(--dg-surface);
  color: var(--dg-text);
}
.dg-menu__list:popover-open { display: flex; flex-direction: column; }
@supports (position-area: block-end) {
  .dg-menu__list {
    inset: auto;
    margin: var(--dg-space-1) 0;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  }
  .dg-menu--start .dg-menu__list { position-area: block-end span-inline-end; }
}
.dg-menu__form { display: block; margin: 0; }
.dg-menu__item {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 9px var(--dg-space-4);
  border: 0;
  background: none;
  color: var(--dg-text);
  font: var(--dg-type-small);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.dg-menu__item:hover { background: var(--dg-tint); }
.dg-menu__item:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: -2px; background: var(--dg-tint); }
.dg-menu__item--danger { color: var(--dg-danger); }
/* An item with an icon (icon: on the item): icon then label, the icon muted unless hovered. */
.dg-menu__item:has(> .dg-icon) { display: flex; align-items: center; gap: var(--dg-space-3); }
.dg-menu__item > .dg-icon { flex: none; color: var(--dg-text-muted); }
.dg-menu__item:is(:hover, :focus-visible) > .dg-icon { color: currentColor; }

/* ---- The table kit: scroll wrapper, sortable headings, captions, empty rows, row toggles and bulk selection. ---- */

/* Scroll wrapper (dg_table): a wide table scrolls sideways inside it, never the page. With label:
   it is a named region with tabindex="0", so the keyboard can focus and scroll it. min-width: 0
   lets it shrink when it is a flex or grid item. position: relative keeps absolutely placed
   cell content (.dg-sr-only labels) inside the scroller; without it they widen the page. */
.dg-table-wrap { position: relative; max-width: 100%; min-width: 0; overflow-x: auto; border-radius: var(--dg-radius-md); }
.dg-table-wrap:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-table > caption {
  padding-bottom: var(--dg-space-3);
  color: var(--dg-text);
  font: var(--dg-type-h3);
  letter-spacing: var(--dg-type-h3-tracking);
  text-align: start;
}

/* Sortable heading (dg_sort_header): the link keeps the heading look; the sorted column reads in
   the text color with one caret, a column that can be sorted shows both carets, faint. */
.dg-table .dg-table__sort { display: inline-flex; align-items: center; gap: 6px; }
.dg-table .dg-table__sort:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: 2px; }
.dg-table th:is([aria-sort="ascending"], [aria-sort="descending"]) { color: var(--dg-text); }
.dg-table__sort-icon { display: inline-grid; flex: none; }
.dg-table__sort-icon .dg-icon { grid-area: 1 / 1; }
.dg-table__sort-icon--none { opacity: 0.55; }
.dg-table__sort-icon--none .dg-icon:first-child { translate: 0 -3px; }
.dg-table__sort-icon--none .dg-icon:last-child { translate: 0 3px; }

/* Cells. .dg-table__num (right-aligned tabular figures) is in components.css; it works on th too.
   A muted second line under a cell's main text: <span class="dg-table__caption">Unit 2B</span>. */
.dg-table__caption { display: block; margin-top: 2px; color: var(--dg-text-muted); font: 400 13px/1.4 var(--dg-font-sans); }
/* Right-aligned buttons and links that wrap onto a second line rather than widen the table. */
.dg-table .dg-table__actions { text-align: end; }
.dg-table td.dg-table__actions > * { margin-block: 2px; vertical-align: middle; }
.dg-table td.dg-table__actions > * + * { margin-inline-start: var(--dg-space-3); }

/* Empty row (dg_table empty:): one cell across every column. */
.dg-table .dg-table__empty { padding-block: var(--dg-space-8); color: var(--dg-text-muted); text-align: center; }
.dg-table tbody tr:has(> .dg-table__empty):hover { background: none; }

/* Expandable rows (dg_row_toggle): the caret button opens the .dg-table__detail row right after
   its row. The detail row shows while the toggle's aria-expanded is "true", so a script only
   flips that attribute. */
.dg-table__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-block: -8px;
  padding: 0;
  border: 0;
  border-radius: var(--dg-radius-sm);
  background: none;
  color: var(--dg-text);
  vertical-align: middle;
  cursor: pointer;
}
.dg-table__toggle:hover { background: var(--dg-tint); }
.dg-table__toggle:focus-visible { outline: var(--dg-border-width-focus) solid var(--dg-focus); outline-offset: -2px; }
.dg-table__toggle[aria-expanded="true"] .dg-icon { rotate: 90deg; }
.dg-table__toggle:dir(rtl) .dg-icon { scale: -1 1; }
.dg-table__toggle:dir(rtl)[aria-expanded="true"] .dg-icon { rotate: -90deg; }
.dg-table tr:has(.dg-table__toggle[aria-expanded="false"]) + .dg-table__detail { display: none; }
.dg-table tr:has(.dg-table__toggle[aria-expanded="true"]) > :is(td, th) { border-bottom-color: transparent; }
.dg-table .dg-table__detail > td { padding-block: var(--dg-space-2) var(--dg-space-6); box-shadow: inset var(--dg-border-width-accent) 0 0 var(--dg-accent); }
.dg-table tbody tr.dg-table__detail:hover { background: none; }

/* Bulk selection: the narrow checkbox column, and a select-all box that shows a dash when only
   some rows are chosen (input.indeterminate = true). */
.dg-table .dg-table__select { width: 18px; padding-inline-end: 0; vertical-align: middle; }
.dg-table .dg-table__select .dg-check__input { display: block; }
:is(.dg-table__select, .dg-selection-bar) .dg-check__input:indeterminate {
  border-color: var(--dg-action);
  background: var(--dg-action) linear-gradient(var(--dg-on-action), var(--dg-on-action)) center / 10px 2px no-repeat;
}
/* A chosen row: a rail in the action color. No tint: investors links on any tint drop below 4.5:1. */
.dg-table tbody tr:has(> .dg-table__select :checked) > .dg-table__select { box-shadow: inset var(--dg-border-width-accent) 0 0 var(--dg-action); }

/* Selection bar (dg_selection_bar): sticks to the foot of the screen while rows are chosen. At
   data-count="0" it leaves the screen but its count stays readable, so "1 selected" is announced. */
.dg-selection-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dg-space-3) var(--dg-space-6);
  padding: var(--dg-space-3) var(--dg-space-4);
  border: var(--dg-border-width-hairline) solid var(--dg-border-strong);
  background: var(--dg-surface);
  color: var(--dg-text);
}
.dg-selection-bar__count { margin: 0; font: var(--dg-type-label); letter-spacing: var(--dg-type-label-tracking); text-transform: var(--dg-type-label-case); }
.dg-selection-bar__number { font-variant-numeric: tabular-nums lining-nums; }
.dg-selection-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dg-space-3); }
.dg-selection-bar[data-count="0"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.dg-selection-bar[data-count="0"] .dg-selection-bar__actions { display: none; }
/* A flagged row (class: 'dg-table__row--danger', --warning, --success): a 3px rule on its first
   cell, as list rows have, instead of tinting the whole row, which buries the data in colour. */
.dg-table tr:is(.dg-table__row--danger, .dg-table__row--warning, .dg-table__row--success) > :first-child { box-shadow: inset var(--dg-border-width-accent) 0 0 var(--dg-row-flag); }
.dg-table tr.dg-table__row--danger { --dg-row-flag: var(--dg-danger); }
.dg-table tr.dg-table__row--warning { --dg-row-flag: var(--dg-warning); }
.dg-table tr.dg-table__row--success { --dg-row-flag: var(--dg-success); }

/* ---- Tenants (dgapartments.com): brand identity only. ----
   Type, buttons, fields, corners, alerts, cards and layout are the common look. The site's brand
   is its warm palette (tokens.json site and theme.dark.site) and these three rules a token can't
   express: a large headline's accent phrase in the brighter accent red (24px and up, so 3:1 is
   enough; smaller headings keep the action color), numerals in the light italic, and the alternate
   band in the darker paper. :where() keeps each rule as weak as the one it replaces. */
:where([data-site="tenants"]) :is(.dg-display, .dg-h1, .dg-h2, .dg-page-header__title, .dg-section-heading__title) em { color: var(--dg-accent); }
:where([data-site="tenants"]) .dg-numeral { font-weight: 300; }
:where([data-site="tenants"]) .dg-section--alt { background: var(--dg-neutral-tint); }
/* In dark the band is the surface step, where the action color still reads 4.5:1. */
:is([data-site="tenants"][data-theme="dark"], [data-site="tenants"] [data-theme="dark"], [data-theme="dark"] [data-site="tenants"]) .dg-section--alt { background: var(--dg-surface); }
/* data-theme="auto": the dark rules above, when the OS asks for dark. */
@media (prefers-color-scheme: dark) {
  :is([data-site="tenants"][data-theme="auto"], [data-site="tenants"] [data-theme="auto"], [data-theme="auto"] [data-site="tenants"]) .dg-section--alt { background: var(--dg-surface); }
}

/* ---- Motion -----------------------------------------------------------------
   Everything that moves, in one place. Without this file every component still
   works; it just doesn't move. components.css and base.css set the resting look and
   the state changes (hover, open, checked); this file only adds the movement between
   them. Page crossfades are opt-in, in view-transitions.css.

   - Interaction feedback (press, hover, open, close) is on by default.
   - Entrances that would replay on every page load are opt-in: .dg-rise, .dg-draw, .dg-reveal,
     and .dg-new for something that just appeared or changed.
   - Things arrive on --dg-motion-ease (expo-out) and leave faster on --dg-motion-ease-in.
   - Reduced motion: tokens.css sets the distances (rise, nudge, press, pop) to nothing,
     so movement becomes a fade. Loops, sweeps and line draws are switched off at the end
     of this file. */

@keyframes dg-fade-in { from { opacity: 0; } }
@keyframes dg-rise-in { from { opacity: 0; translate: 0 var(--dg-motion-rise); } }
@keyframes dg-drop-in { from { opacity: 0; translate: 0 calc(-0.5 * var(--dg-motion-rise)); } }
@keyframes dg-pop-in { from { scale: var(--dg-motion-pop); } }
@keyframes dg-draw-x { from { scale: 0 1; } }
@keyframes dg-draw-y { from { scale: 1 0; } }

/* Buttons sink a little while pressed and spring back on release. */
.dg-btn {
  transition: background-color var(--dg-motion-fast) var(--dg-motion-ease), color var(--dg-motion-fast) var(--dg-motion-ease),
    border-color var(--dg-motion-fast) var(--dg-motion-ease), scale var(--dg-motion-base) var(--dg-motion-ease);
}
.dg-btn:active { scale: var(--dg-motion-press); transition-duration: var(--dg-motion-fast), var(--dg-motion-fast), var(--dg-motion-fast), var(--dg-motion-instant); }

/* Busy: a spinner turns where the label was (overlays.css draws it). Turbo sets aria-busy on
   a submitting form; set it on the button yourself otherwise. */
.dg-spinner,
:is(.dg-btn[aria-busy="true"], form[aria-busy="true"] .dg-btn--primary[type="submit"])::before { animation: dg-spin var(--dg-motion-loop) linear infinite; }
@keyframes dg-spin { to { rotate: 1turn; } }

/* Link arrows point where the link goes. */
.dg-link--arrow::after,
.dg-link--external::after,
.dg-link--back::before { transition: translate var(--dg-motion-base) var(--dg-motion-ease); }
.dg-link--arrow:is(:hover, :focus-visible)::after { translate: var(--dg-motion-nudge) 0; }
.dg-link--back:is(:hover, :focus-visible)::before { translate: calc(-1 * var(--dg-motion-nudge)) 0; }
.dg-link--external:is(:hover, :focus-visible)::after { translate: calc(0.7 * var(--dg-motion-nudge)) calc(-0.7 * var(--dg-motion-nudge)); }

/* Inline links: on hover the full underline draws in from the left and leaves to the right. */
.dg-inline-link { transition: background-size var(--dg-motion-base) var(--dg-motion-ease); }

/* Checkboxes and radios pop in when ticked. Only while focused, so boxes that load
   ticked stay still; unticking is instant. */
.dg-check__input:checked:focus { animation: dg-pop-in var(--dg-motion-base) var(--dg-motion-ease); }

/* Color changes on hover and focus ease rather than snap. */
.dg-link { transition: border-color var(--dg-motion-fast) var(--dg-motion-ease); }
.dg-bar__nav a { transition: color var(--dg-motion-fast) var(--dg-motion-ease); }
.dg-tabs__tab { transition: color var(--dg-motion-fast) var(--dg-motion-ease), border-color var(--dg-motion-fast) var(--dg-motion-ease); }
.dg-modal__close { transition: color var(--dg-motion-fast) var(--dg-motion-ease), background-color var(--dg-motion-fast) var(--dg-motion-ease); }
.dg-check__input { transition: background-color var(--dg-motion-fast) var(--dg-motion-ease), border-color var(--dg-motion-fast) var(--dg-motion-ease); }
.dg-choices--boxed .dg-check { transition: border-color var(--dg-motion-fast) var(--dg-motion-ease); }
.dg-drop-zone { transition: border-color var(--dg-motion-fast) var(--dg-motion-ease); }
.dg-field__input,
.dg-field__control,
.dg-pay__card { transition: border-color var(--dg-motion-fast) var(--dg-motion-ease), box-shadow var(--dg-motion-fast) var(--dg-motion-ease); }
.dg-progress__fill { transition: width var(--dg-motion-base) var(--dg-motion-ease); }

/* Tab bar: the icon dips while pressed. */
.dg-tab-bar__item svg { transition: translate var(--dg-motion-base) var(--dg-motion-ease), scale var(--dg-motion-base) var(--dg-motion-ease); }
.dg-tab-bar__item:active svg { translate: 0 var(--dg-motion-nudge); scale: var(--dg-motion-press); transition-duration: var(--dg-motion-instant); }

/* Tab ink: the current tab's underline as its own element (.dg-tabs__ink, rendered by
   dg_tabs), so view-transitions.css can slide it to the new tab between pages. */
.dg-tabs__tab:has(> .dg-tabs__ink) { position: relative; border-bottom-color: transparent; }
.dg-tabs__ink {
  position: absolute;
  right: 0;
  bottom: calc(-1 * var(--dg-border-width-focus));
  left: 0;
  height: var(--dg-border-width-focus);
  background: var(--dg-action);
  view-transition-name: dg-tabs-ink;
}
@media (min-width: 992px) {
  .dg-tabs--side .dg-tabs__ink { top: 0; right: auto; bottom: 0; left: calc(-1 * var(--dg-border-width-focus)); width: var(--dg-border-width-focus); height: auto; }
}

/* Rows: the hover tint sweeps in from the left and fades on leave. */
a.dg-list__row::before {
  scale: 0 1;
  transform-origin: left center;
  transition: opacity var(--dg-motion-fast) var(--dg-motion-ease), scale 0s linear var(--dg-motion-fast);
}
a.dg-list__row:is(:hover, :focus-visible)::before { scale: 1 1; transition: opacity var(--dg-motion-instant) linear, scale var(--dg-motion-base) var(--dg-motion-ease); }

/* Linked rows: the title and chevron step toward the link. */
a.dg-list__row .dg-list__title { transition: color var(--dg-motion-fast) var(--dg-motion-ease), translate var(--dg-motion-base) var(--dg-motion-ease); }
a.dg-list__row::after { transition: opacity var(--dg-motion-base) var(--dg-motion-ease), translate var(--dg-motion-base) var(--dg-motion-ease), background-color var(--dg-motion-fast) var(--dg-motion-ease); }
a.dg-list__row:is(:hover, :focus-visible) .dg-list__title { translate: var(--dg-motion-nudge) 0; }
a.dg-list__row:is(:hover, :focus-visible)::after { translate: var(--dg-motion-nudge) 0; }

/* Linked cards rise 2px while the border firms up. No shadow. */
.dg-card:has(.dg-card__link) { transition: border-color var(--dg-motion-fast) var(--dg-motion-ease), translate var(--dg-motion-base) var(--dg-motion-ease); }
.dg-card:has(.dg-card__link):hover { translate: 0 calc(-1 * var(--dg-motion-lift)); }

/* Table rows: the hover tint comes in quickly and lingers a moment on the way out. */
.dg-table tbody tr { transition: background-color var(--dg-motion-base) var(--dg-motion-ease); }
.dg-table tbody tr:hover { transition-duration: var(--dg-motion-fast); }

/* Ledger lines and to-do folds: the caret turns as the fold opens; a line reached by its link
   fades its tint out after a moment. */
:is(.dg-list__fold > summary, .dg-todo__summary)::before { transition: rotate var(--dg-motion-base) var(--dg-motion-ease); }
:is(.dg-list__fold, .dg-list__row--line):target { animation: dg-target-fade var(--dg-motion-slower) var(--dg-motion-ease) 1.2s forwards; }
@keyframes dg-target-fade { to { background-color: transparent; } }

/* Accordion: the answer glides open to its height and fades in a beat later. Needs
   ::details-content (Chrome/Edge 131+); other browsers open instantly. */
.dg-accordion__summary::after { transition: transform var(--dg-motion-slow) var(--dg-motion-ease); }
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .dg-accordion { interpolate-size: allow-keywords; }
  /* The answer clips only while it moves: once open, overflow comes back a beat later so a
     tooltip or help bubble inside it is not cut off; closing clips at once. */
  .dg-accordion__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dg-motion-slow) var(--dg-motion-ease), content-visibility var(--dg-motion-slow) allow-discrete, overflow 0s allow-discrete;
  }
  .dg-accordion__item[open]::details-content {
    block-size: auto;
    overflow: visible;
    transition: block-size var(--dg-motion-slow) var(--dg-motion-ease), content-visibility var(--dg-motion-slow) allow-discrete, overflow 0s var(--dg-motion-slow) allow-discrete;
  }
  .dg-accordion__body { opacity: 0; translate: 0 calc(0.5 * var(--dg-motion-rise)); transition: opacity var(--dg-motion-fast) var(--dg-motion-ease-in), translate var(--dg-motion-fast) var(--dg-motion-ease-in); }
  .dg-accordion__item[open] .dg-accordion__body { opacity: 1; translate: 0 0; transition: opacity var(--dg-motion-slow) var(--dg-motion-ease) var(--dg-motion-stagger), translate var(--dg-motion-slow) var(--dg-motion-ease) var(--dg-motion-stagger); }
}

/* Phone menu: the panel and backdrop fade in and the links rise one after another;
   closing is one quick fade. */
@media (max-width: 767.98px) {
  .dg-bar__nav[popover],
  .dg-bar__nav[popover]::backdrop {
    opacity: 0;
    transition-property: opacity, display, overlay;
    transition-duration: var(--dg-motion-fast);
    transition-timing-function: var(--dg-motion-ease-in);
    transition-behavior: allow-discrete;
  }
  .dg-bar__nav[popover]:popover-open,
  .dg-bar__nav[popover]:popover-open::backdrop { opacity: 1; transition-duration: var(--dg-motion-slow); transition-timing-function: var(--dg-motion-ease); }
  @starting-style {
    .dg-bar__nav[popover]:popover-open,
    .dg-bar__nav[popover]:popover-open::backdrop { opacity: 0; }
  }
  /* backwards, not both: a held transform gives each item its own layer, and a dropdown in the menu
     would then draw under the items after it. */
  .dg-bar__nav[popover]:popover-open > * { animation: dg-rise-in var(--dg-motion-slow) var(--dg-motion-ease) backwards; }
  .dg-bar__nav[popover]:popover-open > :nth-child(2) { animation-delay: calc(1 * var(--dg-motion-stagger)); }
  .dg-bar__nav[popover]:popover-open > :nth-child(3) { animation-delay: calc(2 * var(--dg-motion-stagger)); }
  .dg-bar__nav[popover]:popover-open > :nth-child(4) { animation-delay: calc(3 * var(--dg-motion-stagger)); }
  .dg-bar__nav[popover]:popover-open > :nth-child(5) { animation-delay: calc(4 * var(--dg-motion-stagger)); }
  .dg-bar__nav[popover]:popover-open > :nth-child(n + 6) { animation-delay: calc(5 * var(--dg-motion-stagger)); }
}

/* Flash messages drop in, one after another. */
.dg-flash:not(.dg-flash--toast) > * { animation: dg-drop-in var(--dg-motion-slow) var(--dg-motion-ease) both; }
.dg-flash:not(.dg-flash--toast) > :nth-child(2) { animation-delay: var(--dg-motion-stagger); }
.dg-flash:not(.dg-flash--toast) > :nth-child(n + 3) { animation-delay: calc(2 * var(--dg-motion-stagger)); }

/* Linked stats: the label's underline fades in and the arrow slides in after it. */
a.dg-stat .dg-stat__label { transition: color var(--dg-motion-fast) var(--dg-motion-ease), text-decoration-color var(--dg-motion-fast) var(--dg-motion-ease); }
a.dg-stat .dg-stat__label::after {
  translate: calc(-1 * var(--dg-motion-nudge)) 0;
  transition: opacity var(--dg-motion-base) var(--dg-motion-ease), translate var(--dg-motion-base) var(--dg-motion-ease);
}
a.dg-stat:is(:hover, :focus-visible) .dg-stat__label::after { translate: 0 0; }

/* Modals rise into place while the backdrop fades; closing is quicker. */
.dg-modal,
.dg-modal::backdrop {
  opacity: 0;
  transition-property: opacity, translate, display, overlay;
  transition-duration: var(--dg-motion-fast);
  transition-timing-function: var(--dg-motion-ease-in);
  transition-behavior: allow-discrete;
}
.dg-modal { translate: 0 var(--dg-motion-rise); }
.dg-modal[open],
.dg-modal[open]::backdrop { opacity: 1; translate: 0 0; transition-duration: var(--dg-motion-slow); transition-timing-function: var(--dg-motion-ease); }
@starting-style {
  .dg-modal[open] { opacity: 0; translate: 0 var(--dg-motion-rise); }
  .dg-modal[open]::backdrop { opacity: 0; }
}

/* Field errors drop in under the field. Shown after a submit, so they play once. */
.dg-field__error { animation: dg-drop-in var(--dg-motion-base) var(--dg-motion-ease) both; }

/* Steps: on arriving at a step, the line into it draws down and its marker fills. */
.dg-steps__item--done:has(+ .dg-steps__item--current)::before { transform-origin: top; animation: dg-draw-y var(--dg-motion-slow) var(--dg-motion-ease-in-out) var(--dg-motion-fast) both; }
.dg-steps__item--current .dg-steps__marker { animation: dg-step-fill var(--dg-motion-base) var(--dg-motion-ease) calc(var(--dg-motion-fast) + var(--dg-motion-slow)) both; }
.dg-steps__item--done .dg-steps__marker::after { animation: dg-pop-in var(--dg-motion-base) var(--dg-motion-ease) both; }
@keyframes dg-step-fill { from { border-color: var(--dg-border-strong); background: var(--dg-surface); color: var(--dg-text); } }
@media (min-width: 768px) {
  .dg-steps--row .dg-steps__item--done:has(+ .dg-steps__item--current)::before { transform-origin: left; animation-name: dg-draw-x; }
}

/* .dg-new marks something that just appeared or changed. Rows rise in and hold the tint
   for a moment; a banner slides down from under the bar; a count grows a little and settles. */
.dg-new { animation: dg-rise-in var(--dg-motion-slow) var(--dg-motion-ease) both, dg-new-tint var(--dg-motion-linger) var(--dg-motion-ease-in-out) both; }
@keyframes dg-new-tint { 0%, 30% { background-color: var(--dg-tint); } }
.dg-banner.dg-new { animation: dg-banner-in var(--dg-motion-slow) var(--dg-motion-ease) both; }
@keyframes dg-banner-in { from { opacity: 0; translate: 0 calc(-1 * var(--dg-motion-rise)); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.dg-count.dg-new { animation: dg-bump var(--dg-motion-base) var(--dg-motion-ease-snap); }
@keyframes dg-bump { 40% { scale: var(--dg-motion-bump); } }

/* Toast: dg_flash(flash, toast: true). Confirmations rise in at the bottom, hold, then
   leave faster. Pointing at one or focusing a link in it holds it until you move away.
   The strip around the alerts lets clicks through to the page. Errors are never toasts;
   dg_flash keeps them in the page. */
.dg-flash--toast {
  position: fixed;
  right: var(--dg-space-4);
  bottom: calc(var(--dg-space-6) + env(safe-area-inset-bottom));
  left: var(--dg-space-4);
  z-index: 20;
  width: min(420px, calc(100% - 2 * var(--dg-space-4)));
  margin-inline: auto;
  pointer-events: none;
  animation: dg-rise-in var(--dg-motion-slow) var(--dg-motion-ease) both, dg-toast-out var(--dg-motion-base) var(--dg-motion-ease-in) var(--dg-motion-toast-hold) forwards;
}
.dg-flash--toast > * { pointer-events: auto; }
.dg-flash--toast:is(:hover, :focus-within) { animation-play-state: paused; }
.dg-page:has(.dg-tab-bar:not(.dg-tab-bar--static)) .dg-flash--toast { bottom: calc(var(--dg-tab-bar-height) + var(--dg-space-6) + env(safe-area-inset-bottom)); }
@media (max-width: 767.98px) {
  .dg-page:has(.dg-action-bar:not(.dg-action-bar--static)) .dg-flash--toast { bottom: calc(var(--dg-action-bar-height) + var(--dg-space-6) + env(safe-area-inset-bottom)); }
}
@keyframes dg-toast-out { to { opacity: 0; translate: 0 var(--dg-motion-rise); visibility: hidden; } }

/* Toasts a script adds (DgToast.show): each rises in; notes hold, then leave, and commands.js
   removes them on animationend. Failures stay until dismissed. Pointing at one or focusing it holds it. */
.dg-toasts > .dg-alert { animation: dg-rise-in var(--dg-motion-slow) var(--dg-motion-ease) both; }
.dg-toasts > .dg-alert:not(.dg-alert--danger) { animation: dg-rise-in var(--dg-motion-slow) var(--dg-motion-ease) both, dg-toast-out var(--dg-motion-base) var(--dg-motion-ease-in) var(--dg-motion-toast-hold) forwards; }
.dg-toasts > .dg-alert:is(:hover, :focus-within) { animation-play-state: paused; }

/* Tooltips fade in. */
.dg-tooltip { opacity: 0; transition: opacity var(--dg-motion-fast) var(--dg-motion-ease), display var(--dg-motion-fast) allow-discrete; }
.dg-tooltip-anchor:hover .dg-tooltip,
.dg-tooltip-anchor:has(:focus-visible) .dg-tooltip { opacity: 1; }
@starting-style {
  .dg-tooltip-anchor:hover .dg-tooltip,
  .dg-tooltip-anchor:has(:focus-visible) .dg-tooltip { opacity: 0; }
}

/* Done: the check draws itself, ring then tick. */
.dg-done__mark :is(circle, path) { stroke-dasharray: 1; }
.dg-done__mark circle { animation: dg-stroke var(--dg-motion-slow) var(--dg-motion-ease-in-out) var(--dg-motion-fast) both; }
.dg-done__mark path { animation: dg-stroke var(--dg-motion-base) var(--dg-motion-ease) calc(var(--dg-motion-fast) + var(--dg-motion-slow)) both; }
@keyframes dg-stroke { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Skeleton: a slow low-contrast sweep across the placeholder bars. */
.dg-skeleton {
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dg-surface) 70%, transparent), transparent);
  background-repeat: no-repeat;
  background-size: 60% 100%;
  background-position: -150% 0;
  animation: dg-shimmer var(--dg-motion-linger) var(--dg-motion-ease-in-out) infinite;
}
@keyframes dg-shimmer { to { background-position: 250% 0; } }

/* Opt-in entrances. They replay on every page load, so use them on marketing pages and
   first views, not on screens people move between all day. */
/* .dg-rise: each child fades in and rises, one after another. */
.dg-rise > * { animation: dg-rise-in var(--dg-motion-slow) var(--dg-motion-ease) both; }
.dg-rise > :nth-child(2) { animation-delay: calc(1 * var(--dg-motion-stagger)); }
.dg-rise > :nth-child(3) { animation-delay: calc(2 * var(--dg-motion-stagger)); }
.dg-rise > :nth-child(4) { animation-delay: calc(3 * var(--dg-motion-stagger)); }
.dg-rise > :nth-child(5) { animation-delay: calc(4 * var(--dg-motion-stagger)); }
.dg-rise > :nth-child(n + 6) { animation-delay: calc(5 * var(--dg-motion-stagger)); }
/* .dg-draw on a .dg-rule draws it from the left; on a .dg-progress, the bar fills. */
.dg-rule.dg-draw,
.dg-draw .dg-progress__fill { transform-origin: left center; animation: dg-draw-x var(--dg-motion-slower) var(--dg-motion-ease) var(--dg-motion-fast) both; }
/* .dg-reveal: fades and rises in as it scrolls into view, for long marketing pages. Needs
   scroll-driven animations (Chrome/Edge 115+, Safari 26+); elsewhere it's simply there. */
@supports (animation-timeline: view()) {
  .dg-reveal { animation: dg-rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}
.dg-draw .dg-progress__value { animation: dg-fade-in var(--dg-motion-base) var(--dg-motion-ease) calc(var(--dg-motion-fast) + var(--dg-motion-slower) * 0.8) both; }

/* Reduced motion: no loops, sweeps or draws. Fades stay. */
@media (prefers-reduced-motion: reduce) {
  .dg-skeleton { animation: none; }
  .dg-spinner,
  :is(.dg-btn[aria-busy="true"], form[aria-busy="true"] .dg-btn--primary[type="submit"])::before { animation: none; }
  .dg-steps__item--done:has(+ .dg-steps__item--current)::before,
  .dg-rule.dg-draw,
  .dg-draw .dg-progress__fill { animation-name: dg-fade-in; }
  .dg-done__mark :is(circle, path) { animation-name: dg-fade-in; }
  .dg-inline-link { transition: none; }
  a.dg-list__row::before { scale: 1 1; transition: opacity var(--dg-motion-fast) var(--dg-motion-ease); }
  .dg-accordion__item::details-content { transition: none; }
  .dg-banner.dg-new { animation-name: dg-fade-in; }
}