/**
 * DebtSunset — "flat sunset color-blocking"
 *
 * Calm, orderly, forward-moving. Color blocks instead of layers: no shadows,
 * no hairline dividers, depth only from value contrast between adjacent blocks.
 * The sunset is the palette, not imagery.
 *
 * Load order (debtsunset.libraries.yml):
 *   1. css/pico-layer.css  imports the UNMODIFIED css/pico.min.css (Pico v2.1.1)
 *                          into the cascade layer `pico`, so every unlayered rule
 *                          below beats Pico regardless of specificity.
 *   2. css/style.css       this file (unlayered).
 *
 * Mechanism: redefine --pico-* custom properties first (sections 3–4); write
 * bespoke selectors only where Pico exposes no variable. No !important, no ID
 * selectors. Everything is scoped to `.debtsunset-layout`, so the admin toolbar
 * (which sits outside it) is never restyled.
 *
 * Sections
 *   1  @font-face
 *   2  Brand tokens (--ds-*)
 *   3  Light theme: semantic aliases + Pico mapping
 *   4  Dark theme: [data-theme="dark"] + prefers-color-scheme
 *   5  Base / element overrides
 *   6  Button tiers
 *   7  Section blocks (+ site chrome: header, navigation, hero, footer)
 *   8  Forms
 *   9  Tables and progress
 *  10  Cards and components
 *  11  Drupal core overrides
 *  12  Responsive adjustments
 */


/* ==========================================================================
   1. @FONT-FACE — self-hosted, latin + latin-ext, variable weight axis
   ========================================================================== */

/* Inter: body / UI (400–600). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var-latin-ext.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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var-latin.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;
}

/* Inter Tight: display / headings (600–700). */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-tight-var-latin-ext.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: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-tight-var-latin.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;
}

/* Metric-matched fallbacks: while a web font is still loading, text is set in
   Arial (or its metric twin) scaled to Inter's / Inter Tight's proportions, so
   the swap doesn't reflow the page. Values measured from the woff2 files. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107.48%;
  ascent-override: 90.14%;
  descent-override: 22.44%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Tight Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 102%;                     /* headings are 600-700, wider than the 400 the file's default instance measures */
  ascent-override: 94.98%;
  descent-override: 23.65%;
  line-gap-override: 0%;
}

/* Pacifico: the logo-lockup wordmark ONLY. Never a heading or body face. */
@font-face {
  font-family: "Pacifico";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pacifico-400-latin.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;
}


/* ==========================================================================
   2. BRAND TOKENS — the only colors this theme uses
   ========================================================================== */

:root {
  --ds-night:       #0A1A33;  /* body text, darkest block */
  --ds-twilight:    #13294B;  /* nav, secondary dark block */
  --ds-horizon:     #1F4B57;  /* tertiary block, deep teal */
  --ds-ember:       #B8402B;  /* PRIMARY action, links */
  --ds-ember-deep:  #96331F;  /* primary hover */
  --ds-sunset:      #E05A47;  /* DECORATIVE ONLY — never text on light */
  --ds-flare:       #F97F3D;  /* gradients, chart mid, focus ring */
  --ds-marigold:    #FBB03B;  /* ACCENT button bg, progress fill */
  --ds-amber:       #FFC24A;  /* marigold hover */
  --ds-peach:       #F3C9A6;  /* soft fills */
  --ds-sand:        #FBEEE2;  /* warm page ground */
  --ds-linen:       #FDF8F3;  /* card surface */
  --ds-muted:       #6B5647;  /* warm muted text */

  /* Specified by the brief for the dark theme's muted text, and for the one
     place white is allowed (label on --ds-ember). */
  --ds-muted-night: #9FB0C4;
  --ds-white:       #FFFFFF;

  /* Shape: the radius split is the signature — pills vs. containers. */
  --ds-radius-pill:      999px;
  --ds-radius-container: 16px;

  /* Type. Pacifico is deliberately absent from both stacks. */
  --ds-font-body:     "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-display:  "Inter Tight", "Inter Tight Fallback", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-wordmark: "Pacifico", cursive;
}


/* ==========================================================================
   3. LIGHT THEME — semantic aliases, then the Pico mapping
   ========================================================================== */

/* 3a. Semantic aliases. Components read THESE, never raw brand tokens, so a
       section (or the dark theme) re-themes everything inside it by redefining
       them. Light is the default and primary design target. */
:root,
[data-theme="light"] {
  color-scheme: light;

  --ds-ground:            var(--ds-sand);
  --ds-surface:           var(--ds-linen);
  --ds-soft:              var(--ds-peach);
  --ds-surface-on-soft:   var(--ds-linen);
  --ds-block-linen:       var(--ds-linen);        /* what .section--linen paints */

  --ds-ink:               var(--ds-night);
  --ds-ink-muted:         var(--ds-muted);
  --ds-ink-on-soft:       var(--ds-night);       /* muted-on-peach is only 4.50:1, so soft blocks use full ink */

  --ds-link:              var(--ds-ember);
  --ds-link-hover:        var(--ds-ember-deep);
  --ds-link-on-soft:      var(--ds-ember-deep);  /* ember on peach is 3.60:1; ember-deep is 4.92:1 */

  --ds-input-bg:          var(--ds-linen);
  --ds-input-border:      var(--ds-muted);
  --ds-input-border-active: var(--ds-ember);
  --ds-invalid:           var(--ds-ember);
  --ds-valid:             var(--ds-horizon);

  --ds-btn-primary-bg:       var(--ds-ember);
  --ds-btn-primary-ink:      var(--ds-white);
  --ds-btn-primary-bg-hover: var(--ds-ember-deep);
  --ds-btn-ghost-bg:         var(--ds-linen);
  --ds-btn-ghost-ink:        var(--ds-night);
  --ds-btn-ghost-border-hover: var(--ds-night);

  --ds-secondary:         var(--ds-horizon);
  --ds-secondary-hover:   var(--ds-twilight);
  --ds-secondary-inverse: var(--ds-sand);

  --ds-focus:             var(--ds-ember);       /* flare was 2.27:1 on sand; ember is 4.84 sand · 5.23 linen · 3.60 peach */

  --ds-table-head-bg:     var(--ds-twilight);
  --ds-badge-date-bg:     var(--ds-horizon);       /* the payoff date: deep teal, white on it 9.5:1 */
  --ds-badge-date-ink:    var(--ds-white);
  --ds-table-head-ink:    var(--ds-sand);
  --ds-table-zebra:       color-mix(in srgb, var(--ds-peach) 35%, transparent);
  --ds-track:             color-mix(in srgb, var(--ds-night) 12%, transparent);
  --ds-code-bg:           color-mix(in srgb, var(--ds-peach) 45%, transparent);

  /* Chart ramp. Sequential (darkest = earliest / largest):
       night → horizon → ember → flare → marigold → peach
     Categorical (creditors) — the brief's six, then the rest of the palette so
     11 creditors still get 11 distinct fills. Meaning is never hue-only: every
     chart pairs these with a legend / label / tooltip. */
  --ds-seq-1: var(--ds-night);
  --ds-seq-2: var(--ds-horizon);
  --ds-seq-3: var(--ds-ember);
  --ds-seq-4: var(--ds-flare);
  --ds-seq-5: var(--ds-marigold);
  --ds-seq-6: var(--ds-peach);
  --ds-cat-1:  var(--ds-ember);
  --ds-cat-2:  var(--ds-horizon);
  --ds-cat-3:  var(--ds-marigold);
  --ds-cat-4:  var(--ds-twilight);
  --ds-cat-5:  var(--ds-flare);
  --ds-cat-6:  var(--ds-muted);
  --ds-cat-7:  var(--ds-ember-deep);
  --ds-cat-8:  var(--ds-sunset);
  --ds-cat-9:  var(--ds-amber);
  --ds-cat-10: var(--ds-night);
  --ds-cat-11: var(--ds-peach);
  --ds-cat-12: var(--ds-muted-night);
  --ds-chart-text:      var(--ds-muted);
  --ds-chart-grid:      color-mix(in srgb, var(--ds-night) 12%, transparent);
  --ds-chart-total:     var(--ds-twilight);   /* "all creditors" line */
  --ds-chart-marker:    var(--ds-horizon);    /* projected-payoff marker: on track */
  --ds-chart-marker-ink: var(--ds-sand);
  --ds-chart-interest:  var(--ds-ember);      /* behind / cost */
  --ds-chart-principal: var(--ds-horizon);    /* on track */

  /* Utilization bands (credit-card balance ÷ limit). The one new hue in the
     theme: nothing in the warm brand palette reads as "safe/good", so a
     green is added for ideal/low; moderate/high/critical reuse the brand's
     own amber/orange/red-ember rather than importing foreign ones. */
  --ds-util-good:       #2F8F5B;
  --ds-util-moderate:   var(--ds-marigold);
  --ds-util-high:       var(--ds-flare);
  --ds-util-critical:   var(--ds-ember);
  --ds-util-track:      var(--ds-track);
}

/* 3b. Pico mapping. Declared on :root AND on every .section / [data-theme] so
       the var() references re-resolve against a section's local aliases
       (custom properties inherit their RESOLVED value, not the var() text). */
:root,
[data-theme],
.section {
  --pico-background-color: var(--ds-ground);
  --pico-color: var(--ds-ink);
  --pico-text-selection-color: color-mix(in srgb, var(--ds-marigold) 45%, transparent);
  --pico-muted-color: var(--ds-ink-muted);
  --pico-muted-border-color: color-mix(in srgb, var(--ds-ink) 14%, transparent);

  --pico-primary: var(--ds-link);
  --pico-primary-background: var(--ds-btn-primary-bg);
  --pico-primary-border: transparent;
  --pico-primary-underline: color-mix(in srgb, var(--ds-link) 55%, transparent);
  --pico-primary-hover: var(--ds-link-hover);
  --pico-primary-hover-background: var(--ds-btn-primary-bg-hover);
  --pico-primary-hover-border: transparent;
  --pico-primary-hover-underline: var(--ds-link-hover);
  /* Pico paints focus as a box-shadow ring; the brief forbids shadows and
     specifies an outline, so the ring colors are transparent (see section 5). */
  --pico-primary-focus: transparent;
  --pico-primary-inverse: var(--ds-btn-primary-ink);

  --pico-secondary: var(--ds-secondary);
  --pico-secondary-background: var(--ds-secondary);
  --pico-secondary-border: transparent;
  --pico-secondary-underline: color-mix(in srgb, var(--ds-secondary) 55%, transparent);
  --pico-secondary-hover: var(--ds-secondary-hover);
  --pico-secondary-hover-background: var(--ds-secondary-hover);
  --pico-secondary-hover-border: transparent;
  --pico-secondary-hover-underline: var(--ds-secondary-hover);
  --pico-secondary-focus: transparent;
  --pico-secondary-inverse: var(--ds-secondary-inverse);

  --pico-contrast: var(--ds-ink);
  --pico-contrast-background: var(--ds-ink);
  --pico-contrast-border: transparent;
  --pico-contrast-underline: color-mix(in srgb, var(--ds-ink) 55%, transparent);
  --pico-contrast-hover: var(--ds-ink-muted);
  --pico-contrast-hover-background: var(--ds-ink-muted);
  --pico-contrast-hover-border: transparent;
  --pico-contrast-hover-underline: var(--ds-ink-muted);
  --pico-contrast-focus: transparent;
  --pico-contrast-inverse: var(--ds-ground);

  --pico-card-background-color: var(--ds-surface);
  --pico-card-border-color: transparent;
  --pico-card-box-shadow: none;
  --pico-card-sectioning-background-color: var(--ds-ground);

  --pico-form-element-background-color: var(--ds-input-bg);
  --pico-form-element-selected-background-color: var(--ds-soft);
  --pico-form-element-border-color: var(--ds-input-border);
  --pico-form-element-color: var(--ds-ink);
  --pico-form-element-placeholder-color: var(--ds-ink-muted);
  --pico-form-element-active-background-color: var(--ds-input-bg);
  --pico-form-element-active-border-color: var(--ds-input-border-active);
  --pico-form-element-focus-color: transparent;
  --pico-form-element-disabled-opacity: 1;   /* disabled controls are not faded (see the disabled rules): fading breaks label contrast */
  --pico-form-element-invalid-border-color: var(--ds-invalid);
  --pico-form-element-invalid-active-border-color: var(--ds-invalid);
  --pico-form-element-invalid-focus-color: transparent;
  --pico-form-element-valid-border-color: var(--ds-valid);
  --pico-form-element-valid-active-border-color: var(--ds-valid);
  --pico-form-element-valid-focus-color: transparent;

  --pico-h1-color: var(--ds-ink);
  --pico-h2-color: var(--ds-ink);
  --pico-h3-color: var(--ds-ink);
  --pico-h4-color: var(--ds-ink);
  --pico-h5-color: var(--ds-ink);
  --pico-h6-color: var(--ds-ink);

  --pico-table-border-color: transparent;
  --pico-table-row-stripped-background-color: var(--ds-table-zebra);

  --pico-progress-background-color: var(--ds-track);
  --pico-progress-color: var(--ds-ember);

  --pico-mark-background-color: var(--ds-marigold);
  --pico-mark-color: var(--ds-night);
  --pico-ins-color: var(--ds-valid);
  --pico-del-color: var(--ds-invalid);
  --pico-blockquote-border-color: var(--ds-link);
  --pico-blockquote-footer-color: var(--ds-ink-muted);
  --pico-code-background-color: var(--ds-code-bg);
  --pico-code-color: var(--ds-ink-muted);
  --pico-code-kbd-background-color: var(--ds-ink);
  --pico-code-kbd-color: var(--ds-ground);

  --pico-switch-background-color: var(--ds-ink-muted);
  --pico-switch-checked-background-color: var(--ds-btn-primary-bg);
  --pico-switch-color: var(--ds-btn-primary-ink);
  --pico-switch-thumb-box-shadow: none;
  --pico-range-border-color: var(--ds-track);
  --pico-range-active-border-color: var(--ds-ink-muted);
  --pico-range-thumb-border-color: var(--ds-ground);
  --pico-range-thumb-color: var(--ds-secondary);
  --pico-range-thumb-active-color: var(--ds-link);

  --pico-accordion-border-color: transparent;
  --pico-accordion-close-summary-color: var(--ds-ink-muted);
  --pico-accordion-open-summary-color: var(--ds-ink);
  --pico-accordion-active-summary-color: var(--ds-ink);
  --pico-dropdown-background-color: var(--ds-surface);
  --pico-dropdown-border-color: transparent;
  --pico-dropdown-box-shadow: none;
  --pico-dropdown-color: var(--ds-ink);
  --pico-dropdown-hover-background-color: var(--ds-soft);
  --pico-modal-overlay-background-color: color-mix(in srgb, var(--ds-night) 70%, transparent);
  --pico-modal-overlay-backdrop-filter: none;      /* Pico blurs the page behind modals: glassmorphism, so off */
  --pico-tooltip-background-color: var(--ds-ink);
  --pico-tooltip-color: var(--ds-ground);

  /* Never a shadow: buttons, groups, cards, dropdowns. */
  --pico-button-box-shadow: none;
  --pico-button-hover-box-shadow: none;
  --pico-group-box-shadow: none;
  --pico-group-box-shadow-focus-with-button: none;
  --pico-group-box-shadow-focus-with-input: none;
}

/* 3c. Pico scalars — theme-independent, so plain :root. */
:root {
  --pico-font-family-sans-serif: var(--ds-font-body);
  --pico-font-family: var(--ds-font-body);
  /* Pico scales the root 100% → 131% by viewport; that would inflate every rem
     in the type scale below. Pinned; body size is set explicitly in section 5. */
  --pico-font-size: 100%;
  --pico-font-weight: 400;
  --pico-line-height: 1.6;
  --pico-border-radius: var(--ds-radius-container);      /* containers. Buttons are 999px (section 6). */
  --pico-border-width: 2px;
  --pico-outline-width: 3px;
  --pico-spacing: 1rem;
  --pico-typography-spacing-vertical: 1.5rem;
  --pico-block-spacing-vertical: 2rem;
  --pico-block-spacing-horizontal: 1.5rem;
  --pico-form-element-spacing-vertical: 0.75rem;
  --pico-form-element-spacing-horizontal: 1.1rem;
  --pico-transition: 0.2s ease;

  /* Icons: Pico bakes gray/green/red into its SVG data URIs, which no
     variable can recolor except by redefining the whole URI. Recolored to the
     palette (muted ink; ember = invalid; horizon = valid). */
  --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B5647' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B5647' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B5647' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23B8402B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%236B5647' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
  --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B5647' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B5647' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231F4B57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}


/* ==========================================================================
   4. DARK THEME — night-sky inversion, not gray
      ground night · elevated twilight · text sand · muted #9FB0C4 ·
      links + primary marigold (primary button: marigold, night label)
   ========================================================================== */

/* Explicit choice. */
[data-theme="dark"] {
  color-scheme: dark;

  --ds-ground:            var(--ds-night);
  --ds-surface:           var(--ds-twilight);
  --ds-soft:              var(--ds-horizon);
  --ds-surface-on-soft:   var(--ds-twilight);
  --ds-block-linen:       var(--ds-twilight);
  --ds-ink:               var(--ds-sand);
  --ds-ink-muted:         var(--ds-muted-night);
  --ds-ink-on-soft:       var(--ds-sand);
  --ds-link:              var(--ds-marigold);
  --ds-link-hover:        var(--ds-amber);
  --ds-link-on-soft:      var(--ds-marigold);
  --ds-input-bg:          var(--ds-twilight);
  --ds-input-border:      var(--ds-muted-night);
  --ds-input-border-active: var(--ds-marigold);
  --ds-invalid:           var(--ds-flare);
  --ds-valid:             var(--ds-peach);
  --ds-btn-primary-bg:       var(--ds-marigold);
  --ds-btn-primary-ink:      var(--ds-night);
  --ds-btn-primary-bg-hover: var(--ds-amber);
  --ds-btn-ghost-bg:         var(--ds-twilight);
  --ds-btn-ghost-ink:        var(--ds-sand);
  --ds-btn-ghost-border-hover: var(--ds-sand);
  --ds-secondary:         var(--ds-peach);
  --ds-secondary-hover:   var(--ds-sand);
  --ds-secondary-inverse: var(--ds-night);
  --ds-focus:             var(--ds-flare);
  --ds-table-head-bg:     var(--ds-horizon);
  --ds-badge-date-bg:     var(--ds-sand);          /* teal would sink into the twilight surface */
  --ds-badge-date-ink:    var(--ds-night);
  --ds-table-head-ink:    var(--ds-sand);
  --ds-table-zebra:       color-mix(in srgb, var(--ds-sand) 6%, transparent);
  --ds-track:             color-mix(in srgb, var(--ds-sand) 16%, transparent);
  --ds-code-bg:           color-mix(in srgb, var(--ds-sand) 10%, transparent);
  --ds-cat-1:  var(--ds-marigold);
  --ds-cat-2:  var(--ds-flare);
  --ds-cat-3:  var(--ds-peach);
  --ds-cat-4:  var(--ds-sunset);
  --ds-cat-5:  var(--ds-sand);
  --ds-cat-6:  var(--ds-muted-night);
  --ds-cat-7:  var(--ds-amber);
  --ds-cat-8:  var(--ds-linen);
  --ds-cat-9:  var(--ds-ember);
  --ds-cat-10: var(--ds-horizon);
  --ds-cat-11: var(--ds-ember-deep);
  --ds-cat-12: var(--ds-muted);
  --ds-chart-text:      var(--ds-muted-night);
  --ds-chart-grid:      color-mix(in srgb, var(--ds-sand) 14%, transparent);
  --ds-chart-total:     var(--ds-sand);
  --ds-chart-marker:    var(--ds-marigold);
  --ds-chart-marker-ink: var(--ds-night);
  --ds-chart-interest:  var(--ds-flare);
  --ds-chart-principal: var(--ds-peach);

  --ds-util-good:       #4CAF7A;
  --ds-util-moderate:   var(--ds-marigold);
  --ds-util-high:       var(--ds-flare);
  --ds-util-critical:   var(--ds-sunset);

  --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230A1A33' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239FB0C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239FB0C4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239FB0C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F97F3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%239FB0C4' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
  --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230A1A33' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239FB0C4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239FB0C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F3C9A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

/* No explicit choice: follow the OS, but an explicit light choice still wins
   (the :not([data-theme="light"]) guard). Same values as above — CSS has no
   mixin, and a selector list can't span an @media boundary. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ds-ground:            var(--ds-night);
    --ds-surface:           var(--ds-twilight);
    --ds-soft:              var(--ds-horizon);
    --ds-surface-on-soft:   var(--ds-twilight);
    --ds-block-linen:       var(--ds-twilight);
    --ds-ink:               var(--ds-sand);
    --ds-ink-muted:         var(--ds-muted-night);
    --ds-ink-on-soft:       var(--ds-sand);
    --ds-link:              var(--ds-marigold);
    --ds-link-hover:        var(--ds-amber);
    --ds-link-on-soft:      var(--ds-marigold);
    --ds-input-bg:          var(--ds-twilight);
    --ds-input-border:      var(--ds-muted-night);
    --ds-input-border-active: var(--ds-marigold);
    --ds-invalid:           var(--ds-flare);
    --ds-valid:             var(--ds-peach);
    --ds-btn-primary-bg:       var(--ds-marigold);
    --ds-btn-primary-ink:      var(--ds-night);
    --ds-btn-primary-bg-hover: var(--ds-amber);
    --ds-btn-ghost-bg:         var(--ds-twilight);
    --ds-btn-ghost-ink:        var(--ds-sand);
    --ds-btn-ghost-border-hover: var(--ds-sand);
    --ds-secondary:         var(--ds-peach);
    --ds-secondary-hover:   var(--ds-sand);
    --ds-secondary-inverse: var(--ds-night);
    --ds-focus:             var(--ds-flare);
    --ds-table-head-bg:     var(--ds-horizon);
    --ds-badge-date-bg:     var(--ds-sand);          /* teal would sink into the twilight surface */
    --ds-badge-date-ink:    var(--ds-night);
    --ds-table-head-ink:    var(--ds-sand);
    --ds-table-zebra:       color-mix(in srgb, var(--ds-sand) 6%, transparent);
    --ds-track:             color-mix(in srgb, var(--ds-sand) 16%, transparent);
    --ds-code-bg:           color-mix(in srgb, var(--ds-sand) 10%, transparent);
    --ds-cat-1:  var(--ds-marigold);
    --ds-cat-2:  var(--ds-flare);
    --ds-cat-3:  var(--ds-peach);
    --ds-cat-4:  var(--ds-sunset);
    --ds-cat-5:  var(--ds-sand);
    --ds-cat-6:  var(--ds-muted-night);
    --ds-cat-7:  var(--ds-amber);
    --ds-cat-8:  var(--ds-linen);
    --ds-cat-9:  var(--ds-ember);
    --ds-cat-10: var(--ds-horizon);
    --ds-cat-11: var(--ds-ember-deep);
    --ds-cat-12: var(--ds-muted);
    --ds-chart-text:      var(--ds-muted-night);
    --ds-chart-grid:      color-mix(in srgb, var(--ds-sand) 14%, transparent);
    --ds-chart-total:     var(--ds-sand);
    --ds-chart-marker:    var(--ds-marigold);
    --ds-chart-marker-ink: var(--ds-night);
    --ds-chart-interest:  var(--ds-flare);
    --ds-chart-principal: var(--ds-peach);

    --ds-util-good:       #4CAF7A;
    --ds-util-moderate:   var(--ds-marigold);
    --ds-util-high:       var(--ds-flare);
    --ds-util-critical:   var(--ds-sunset);

    --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230A1A33' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239FB0C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239FB0C4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239FB0C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F97F3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    --pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%239FB0C4' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
    --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230A1A33' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239FB0C4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239FB0C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F3C9A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  }
}


/* ==========================================================================
   5. BASE / ELEMENT OVERRIDES
   ========================================================================== */

body.debtsunset-theme {
  margin: 0;
  background-color: var(--ds-ground);
  color: var(--ds-ink);
}

.debtsunset-layout {
  font-family: var(--ds-font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--ds-ink);
  -webkit-font-smoothing: antialiased;
}

/* Display type: tight negative tracking is what separates designed from
   default, and larger type gets tighter, never looser. */
.debtsunset-layout :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ds-font-display);
  color: var(--ds-ink);
  margin-top: 0;
  margin-bottom: var(--pico-typography-spacing-vertical);
  text-wrap: balance;                    /* no one-word last lines in headings */
}

.debtsunset-layout :is(p, li) {
  text-wrap: pretty;
}

.debtsunset-layout h1 {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.debtsunset-layout h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
}

.debtsunset-layout h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.debtsunset-layout h4 { font-size: 1.25rem;  font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.debtsunset-layout h5 { font-size: 1.125rem; font-weight: 600; line-height: 1.3;  letter-spacing: -0.008em; }
.debtsunset-layout h6 { font-size: 1rem;     font-weight: 600; line-height: 1.35; letter-spacing: -0.006em; }

/* Small / meta text. */
.debtsunset-layout :is(small, .meta, .debt-tracker-subtitle, .debt-tracker-note) {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ds-ink-muted);
}

/* Links: brand colour, no underline in the interface (navigation, cards,
   footer, actions): placement and colour say "link", and the underline
   appears on hover and keyboard focus. Buttons opt out; their tiers own
   their text colour. */
.debtsunset-layout a:not(.button, [role="button"]) {
  color: var(--ds-link);
  text-decoration: none;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

.debtsunset-layout a:not(.button, [role="button"]):is(:hover, :focus-visible) {
  color: var(--ds-link-hover);
  text-decoration: underline;
}

/* Links inside running text (articles, legal pages, FAQ answers, messages)
   keep a slim, soft underline: colour alone must not be the only cue there
   (WCAG 1.4.1). It firms up on hover. */
.debtsunset-layout :is(.ds-article__body, .ds-faq, .messages, .ds-prose) a:not(.button, [role="button"]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.2em;
}

.debtsunset-layout :is(.ds-article__body, .ds-faq, .messages, .ds-prose) a:not(.button, [role="button"]):is(:hover, :focus-visible) {
  text-decoration-thickness: 0.09em;
  text-decoration-color: currentColor;
}

.debtsunset-layout ::selection {
  background-color: var(--pico-text-selection-color);
  color: var(--ds-ink);
}

/* Focus ring: 3px flare outline, 2px offset, on every interactive element and
   every button tier. Pico's own ring (a box-shadow) is neutralised by the
   transparent --pico-*-focus variables above. */
.debtsunset-layout :is(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
}

/* <main> is only a tabindex="-1" landing target for the skip link, not a
   control: a ring around the whole page body would be noise. */
.debtsunset-layout > main[tabindex="-1"]:focus-visible {
  outline: none;
}

/* Skip link. Core prints it before .debtsunset-layout, so nothing above styles
   it; without this it showed as default serif text with no focus indicator.
   Core's own .focusable rules keep it in the flow at the top of the page. */
body.debtsunset-theme > a.visually-hidden.focusable:focus {
  display: block;
  padding: 0.75rem var(--ds-gutter);
  background-color: var(--ds-night);
  color: var(--ds-sand);                 /* sand on night 15.25 */
  font-family: var(--ds-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  outline: 3px solid var(--ds-flare);    /* flare on night 6.73 */
  outline-offset: -3px;
}

.debtsunset-layout hr {
  height: 2rem;
  margin: 0;
  border: 0;
  background: transparent;
}

.debtsunset-layout img {
  border-radius: var(--ds-radius-container);
}

/* Restrained motion: background-color and border-color, 0.2s, nothing else. */
.debtsunset-layout :is(a, button, input, select, textarea, summary, [role="button"], .button, progress) {
  transition: background-color 0.2s, border-color 0.2s;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.debtsunset-layout) {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .debtsunset-layout *,
  .debtsunset-layout *::before,
  .debtsunset-layout *::after {
    transition: none;
    animation: none;
    scroll-behavior: auto;
  }
}


/* ==========================================================================
   6. BUTTON TIERS
      Primary (ember) · Accent (marigold, one per screen) · Ghost (linen)
      All: 999px, 56px tall, no shadow, 2px transparent border so hover/focus
      swap the border colour with zero layout shift.
   ========================================================================== */

/* Base geometry + the machinery. The tiers below only set --btn-* variables;
   colors are applied here once, so state rules can't drift from tier rules.
   :where() keeps this at zero specificity. */
.debtsunset-layout :where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], .button) {
  /* Default tier for native buttons: PRIMARY. */
  --btn-bg: var(--ds-btn-primary-bg);
  --btn-ink: var(--ds-btn-primary-ink);
  --btn-border: transparent;
  --btn-bg-hover: var(--ds-btn-primary-bg-hover);
  --btn-ink-hover: var(--ds-btn-primary-ink);
  --btn-border-hover: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-height: 3.5rem;                /* 56px */
  margin: 0;
  padding: 0.9rem 1.75rem;           /* 28px inline */
  border: 2px solid var(--btn-border);
  border-radius: var(--ds-radius-pill);
  background-color: var(--btn-bg);
  background-image: none;
  box-shadow: none;
  color: var(--btn-ink);
  font-family: var(--ds-font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.debtsunset-layout :where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], .button):is(:hover, :active, :focus-visible) {
  border-color: var(--btn-border-hover);
  background-color: var(--btn-bg-hover);
  color: var(--btn-ink-hover);
  text-decoration: none;
}

/* Disabled: signalled by a flat, dashed, muted look, NOT by fading (opacity drags
   any label below readable contrast). Muted ink on the ground: 6.0:1 light, 7.9:1 dark. */
.debtsunset-layout :where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], .button):is(:disabled, [aria-disabled="true"]) {
  border-style: dashed;
  border-color: var(--ds-ink-muted);
  background-color: var(--ds-ground);
  color: var(--ds-ink-muted);
  box-shadow: none;
  opacity: 1;                             /* Pico fades disabled buttons to .5; that is what broke contrast */
  cursor: not-allowed;
  pointer-events: none;
}

/* Disabled fields (the Extra dollars box under "Minimal payments"): same flat, dashed,
   muted look as disabled buttons, at full opacity so the value stays readable. */
.debtsunset-layout :where(input, select, textarea):is(:disabled, [aria-disabled="true"]) {
  border-style: dashed;
  background-color: var(--ds-ground);
  color: var(--ds-ink-muted);
  cursor: not-allowed;
}

/* Adjacent link-buttons (Drupal renders them as bare siblings). */
.debtsunset-layout a.button {
  margin: 0 0.5rem 0.75rem 0;
}

/* GHOST — Drupal's plain .button: linen fill, night label, transparent 2px
   border that becomes night on hover. Covers secondary form actions too
   ("Add another", "Upload", "Remove"). */
.debtsunset-layout .button {
  --btn-bg: var(--ds-btn-ghost-bg);
  --btn-ink: var(--ds-btn-ghost-ink);
  --btn-border: transparent;
  --btn-bg-hover: var(--ds-btn-ghost-bg);
  --btn-ink-hover: var(--ds-btn-ghost-ink);
  --btn-border-hover: var(--ds-btn-ghost-border-hover);
}

/* PRIMARY — explicit .button--primary, and the main action of any Drupal form. */
.debtsunset-layout :is(.button--primary, .form-actions .form-submit) {
  --btn-bg: var(--ds-btn-primary-bg);
  --btn-ink: var(--ds-btn-primary-ink);
  --btn-border: transparent;
  --btn-bg-hover: var(--ds-btn-primary-bg-hover);
  --btn-ink-hover: var(--ds-btn-primary-ink);
  --btn-border-hover: transparent;
}

/* ACCENT — the single highest-emphasis CTA per screen ("Add a creditor",
   "Run my plan"). Marigold with night ink; white on marigold is never used. */
.debtsunset-layout .button.button--accent {
  --btn-bg: var(--ds-marigold);
  --btn-ink: var(--ds-night);
  --btn-border: transparent;
  --btn-bg-hover: var(--ds-amber);
  --btn-ink-hover: var(--ds-night);
  --btn-border-hover: transparent;
}

.debtsunset-layout .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.debtsunset-layout .form-actions > * {
  margin: 0;
}


/* ==========================================================================
   7. SECTION BLOCKS — full-bleed, color-blocked
      The color change IS the divider: adjacent sections must never share a
      background. Each variant sets its own background AND text color, and
      redefines the semantic aliases, so nesting can't make an illegible pair.
   ========================================================================== */

.section {
  margin: 0;
  padding-block: clamp(3.5rem, 8vw, 7rem);
  background-color: var(--ds-ground);
  color: var(--ds-ink);
}

/* Light-family blocks follow the active theme. */
.section--sand   { background-color: var(--ds-ground); color: var(--ds-ink); }
.section--linen  {
  --ds-surface: var(--ds-ground);        /* cards inside a linen block sit on the ground colour */
  background-color: var(--ds-block-linen);
  color: var(--ds-ink);
}
.section--peach  {
  --ds-ink: var(--ds-ink-on-soft);
  --ds-ink-muted: var(--ds-ink-on-soft);
  --ds-link: var(--ds-link-on-soft);
  --ds-surface: var(--ds-surface-on-soft);
  --ds-input-bg: var(--ds-surface-on-soft);
  background-color: var(--ds-soft);
  color: var(--ds-ink);
}

/* Dark blocks are dark in both themes. */
.section--night,
.section--twilight,
.section--horizon {
  --ds-ink: var(--ds-sand);              /* sand on night 15.25 · twilight 12.74 · horizon 8.37 */
  --ds-link: var(--ds-marigold);         /* marigold on night 9.41 · twilight 7.86 · horizon 5.17 */
  --ds-link-hover: var(--ds-amber);
  --ds-input-bg: var(--ds-night);
  --ds-input-border: var(--ds-muted-night);
  --ds-input-border-active: var(--ds-marigold);
  --ds-focus: var(--ds-flare);           /* ember is too dark here; flare is 6.73 night · 5.62 twilight · 3.69 horizon */
  color-scheme: dark;
  color: var(--ds-ink);
}

.section--night {
  --ds-ink-muted: var(--ds-muted-night); /* on night 7.85 */
  --ds-surface: var(--ds-twilight);
  --ds-table-head-bg: var(--ds-twilight);
  background-color: var(--ds-night);
}

.section--twilight {
  --ds-ink-muted: var(--ds-muted-night); /* on twilight 6.55 */
  --ds-surface: var(--ds-night);
  --ds-table-head-bg: var(--ds-night);
  background-color: var(--ds-twilight);
}

.section--horizon {
  --ds-ink-muted: var(--ds-peach);       /* on horizon 6.23; muted-night would be under 4.5 */
  --ds-surface: var(--ds-twilight);
  --ds-table-head-bg: var(--ds-twilight);
  background-color: var(--ds-horizon);
}

/* THE GUTTER. One setting for every section (brand row, nav bar, hero, content,
   footer), so their left and right edges always line up. On screens 900px and
   wider it is 12.5% of the page width on each side, 25% in total. Below that a
   quarter of a phone or tablet screen would be wasted, so it falls back to a
   slim 1rem–2rem. Change --ds-gutter to tune it. */
:root {
  --ds-gutter: clamp(1rem, 4vw, 2rem);
}

@media (min-width: 900px) {
  :root {
    --ds-gutter: 12.5%;
  }
}

/* Contents of a section fill the width between the gutters (no max-width cap). */
.debtsunset-container {
  box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}

/* Page frame: the footer sits at the bottom of a short page instead of
   floating mid-screen, and the frame stretches to the full width of its
   container. `stretch` is new, so older browsers get the fallbacks above it. */
.debtsunset-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 100%;
  min-width: -webkit-fill-available;
  min-width: stretch;
}

.debtsunset-layout > main {
  flex: 1 0 auto;
}

/* The content block is a working area, not a landing-page section: the big
   landing padding would leave 7rem of nothing under the nav bar. */
.debtsunset-main {
  padding-block: clamp(2rem, 5vw, 4rem);
}

/* --- Site chrome: header -------------------------------------------------- */

/* Brand row (sand) over the nav bar (twilight); the colour change is the divider. */
.debtsunset-brand {
  padding-block: 1rem;
}

.debtsunset-brand-link {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  text-decoration: none;
}

/* The logo is 307px wide at 52px tall: max-width keeps it inside a 320px phone,
   object-fit keeps its proportions when it has to shrink. */
.debtsunset-layout .debtsunset-banner-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 3.25rem;
  object-fit: contain;
  border-radius: 0;
}

/* Light and dark logos: one shows at a time. Dark when the person chose
   it (data-theme="dark"), or their device is dark and they did not choose
   light. */
.debtsunset-layout .debtsunset-banner-img--dark {
  display: none;
}

[data-theme="dark"] .debtsunset-layout .debtsunset-banner-img--light {
  display: none;
}

[data-theme="dark"] .debtsunset-layout .debtsunset-banner-img--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .debtsunset-layout .debtsunset-banner-img--light {
    display: none;
  }

  :root:not([data-theme="light"]) .debtsunset-layout .debtsunset-banner-img--dark {
    display: block;
  }
}

.debtsunset-navbar {
  padding-block: 0;
}

/* Bar: [primary navigation .............. account]. On phones the toggle
   button joins it and the navigation drops below (section 12). */
.debtsunset-navbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.debtsunset-primary {
  flex: 1 1 auto;
  min-width: 0;
}

/* Pico makes every <nav> a flex row, which shrinks the list to its content
   width; a block nav lets the list (and the mobile rows) span the full width. */
.debtsunset-primary .menu-block {
  display: block;
}

.debtsunset-account {
  flex: 0 0 auto;
}

/* Pico injects a zero-width floated ::before into every `nav li`; drop it so
   the items are exactly the size of their links. */
.debtsunset-layout .menu-block li::before {
  content: none;
}

/* --- Primary navigation, top level ---------------------------------------- */

.debtsunset-primary .menu--level-0 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.debtsunset-primary .menu--level-0 > .menu-item {
  position: relative;
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each top-level link is the full height of the bar; its 3px bottom border
   sits on the bar's edge and swaps to marigold — no layout shift. */
.debtsunset-primary .menu--level-0 > .menu-item > a {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 3.75rem;
  margin: 0;                             /* Pico gives `nav li a` margin: -1rem -0.5rem, which made the hover box bleed out of the bar */
  padding: 0 1.1rem;
  border-bottom: 3px solid transparent;
  border-radius: 0;                      /* the hover block is square and flush with the bar */
  color: var(--ds-sand);                 /* sand on twilight 12.74 */
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.debtsunset-primary .menu--level-0 > .menu-item--has-children > a {
  padding-right: 0.35rem;
}

/* Submenu button: injected by nav.js next to the link of every parent item, so
   the submenu works from the keyboard and on touch (hover alone can't). */
.debtsunset-primary .submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.25rem;
  min-height: 3.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FBEEE2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem;
  color: var(--ds-sand);
  cursor: pointer;
}

.debtsunset-primary .menu-item.is-open > .submenu-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FBEEE2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}

/* Touch tablets that get the desktop bar (iPad landscape): 44px wide target. */
@media (min-width: 900px) and (pointer: coarse) {
  .debtsunset-primary .submenu-toggle {
    width: 2.75rem;
  }
}

/* Hover, keyboard focus, the current page and its parent all read the same:
   a marigold underline and a slightly darker block. */
.debtsunset-primary .menu--level-0 > .menu-item.is-open > :is(a, .submenu-toggle),
.debtsunset-primary .menu--level-0 > .menu-item--active-trail > :is(a, .submenu-toggle),
.debtsunset-primary .menu--level-0 > .menu-item > a.is-active,
.debtsunset-primary .menu--level-0 > .menu-item > :is(a, .submenu-toggle):focus-visible,
.debtsunset-primary .menu--level-0 > .menu-item:has(> .menu--sub :focus-visible) > :is(a, .submenu-toggle) {
  border-bottom-color: var(--ds-marigold);
  background-color: color-mix(in srgb, var(--ds-night) 45%, transparent);
}

/* Hover only where there is a real hover, so a tap doesn't leave it stuck. */
@media (hover: hover) and (pointer: fine) {
  .debtsunset-primary .menu--level-0 > .menu-item:hover > :is(a, .submenu-toggle) {
    border-bottom-color: var(--ds-marigold);
    background-color: color-mix(in srgb, var(--ds-night) 45%, transparent);
  }
}

/* Keyboard focus already gets the outline; keep it inside the bar edge. */
.debtsunset-primary .menu--level-0 > .menu-item > :is(a, .submenu-toggle):focus-visible {
  outline-offset: -3px;
}

/* --- Submenu panel: a night block, attached to the bar -------------------- */

.debtsunset-primary .menu--sub {
  z-index: 50;
  min-width: 15rem;
  max-width: min(24rem, calc(100vw - 2rem));
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  border-radius: 0 0 var(--ds-radius-container) var(--ds-radius-container);
  background-color: var(--ds-night);
}

.debtsunset-primary .menu--sub > .menu-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Submenu links are pills: 2px transparent border that swaps to marigold. */
.debtsunset-primary .menu--sub > .menu-item > a {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 2.75rem;
  margin: 0;
  padding: 0 1.1rem;
  border: 2px solid transparent;
  border-radius: var(--ds-radius-pill);
  color: var(--ds-sand);                 /* sand on night 15.25 */
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.debtsunset-primary .menu--sub > .menu-item > a:is(:hover, :focus-visible) {
  border-color: var(--ds-marigold);
  background-color: var(--ds-twilight);
  color: var(--ds-sand);
}

.debtsunset-primary .menu--sub > .menu-item > a.is-active {
  background-color: var(--ds-twilight);
  color: var(--ds-sand);
}

/* Desktop: the panel floats under its parent. It opens for a mouse (hover), for
   the keyboard (:focus-visible) and for touch (.is-open, set by nav.js). It is
   hover-gated to fine pointers so a tap on a phone never leaves it stuck open. */
@media (min-width: 900px) {
  .debtsunset-primary .menu--sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
  }

  .debtsunset-primary .menu--level-0 > .menu-item:last-child > .menu--sub {
    left: auto;
    right: 0;
  }

  .debtsunset-primary .menu-item.is-open > .menu--sub,
  .debtsunset-primary .menu-item:has(> .menu--sub :focus-visible) > .menu--sub {
    display: flex;
  }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .debtsunset-primary .menu-item:hover > .menu--sub {
    display: flex;
  }
}

/* --- Mobile menu button (shown by nav.js, only on phones) ------------------ */

.debtsunset-navbar .nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 3rem;                           /* 48px round touch target */
  height: 3rem;
  min-height: 3rem;                      /* the base button rule's 56px would win otherwise */
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-night);
  color: var(--ds-sand);                 /* sand on night 15.25 */
  cursor: pointer;
}

.debtsunset-navbar .nav-toggle:is(:hover, :focus-visible),
.debtsunset-navbar .nav-toggle[aria-expanded="true"] {
  border-color: var(--ds-marigold);
  background-color: var(--ds-night);
  color: var(--ds-sand);
}

.debtsunset-navbar .nav-toggle[hidden] {
  display: none;
}

/* The word "Menu" is the button's accessible name; only the icon is drawn. */
.debtsunset-navbar .nav-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hamburger drawn with three gradient bars (24px icon, 2px bars, 4px apart);
   a cross while open. No transforms. */
.debtsunset-navbar .nav-toggle__icon {
  display: block;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 5px, 0 11px, 0 17px;
}

.debtsunset-navbar .nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  background-image:
    linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 100% 100%;
  background-position: center;
}

/* --- Account links: ghost pills (linen fill, night label) ------------------ */

.debtsunset-account .menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;                         /* 10px between "My account" and "Log out" */
  margin: 0;
  padding: 0;
  list-style: none;
}

.debtsunset-account .menu-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.debtsunset-account .menu-item > a {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 2.75rem;
  margin: 0;
  padding: 0 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-linen);
  color: var(--ds-night);                /* night on linen 16.47 */
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.debtsunset-account .menu-item > a:is(:hover, :focus-visible, .is-active) {
  border-color: var(--ds-night);
  background-color: var(--ds-linen);
  color: var(--ds-night);
}

/* --- Hero — home page only (page.html.twig) -------------------------------- */
.debtsunset-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.debtsunset-eyebrow {
  margin: 0 0 1rem;
  color: var(--ds-peach);                /* on horizon 6.23 */
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;                /* a label, not display type */
  text-transform: uppercase;
}

.debtsunset-hero h1 {
  margin-bottom: 1.25rem;
}

.debtsunset-lede {
  max-width: 36rem;
  margin: 0 0 2rem;
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.55;
}

/* The offer under the hero buttons: three short proof points, the first
   (one payment, no subscription) leading. Ticks in marigold. */
.debtsunset-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.4;
}

.debtsunset-hero__proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  list-style: none;
}

.debtsunset-hero__proof li::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%230A1A33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat,
    var(--ds-marigold, #FBB03B);
}

.debtsunset-hero__proof strong {
  font-weight: 700;
}

/* The phoenix mark has dark-teal parts that vanish on a dark block, so it
   rides on a linen chip. */
.debtsunset-hero-logo {
  display: block;
  justify-self: end;
  box-sizing: border-box;
  width: 100%;
  max-width: 20rem;
  height: auto;
  padding: 1.5rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-linen);
}

/* --- Footer — twilight, so it never touches the (sand or night) content block */
.debtsunset-footer {
  padding-block: 2.5rem;
}

.debtsunset-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.debtsunset-lockup {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.debtsunset-lockup__mark {
  box-sizing: border-box;
  display: block;
  height: 3.25rem;
  width: auto;
  padding: 0.35rem 0.6rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-linen);
}

/* The only place Pacifico appears: the logo-lockup wordmark. */
.debtsunset-wordmark {
  color: var(--ds-marigold);             /* on twilight 7.86 */
  font-family: var(--ds-font-wordmark);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}

.debtsunset-tagline {
  color: var(--ds-ink-muted);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.debtsunset-copy {
  margin: 0;
  color: var(--ds-ink-muted);
  font-size: 0.875rem;
}


/* ==========================================================================
   8. FORMS — style what Drupal emits: .form-item, bare <label>, .description,
      input.form-text, .fieldset-wrapper, .form-actions. The BEM names from
      Claro-style themes (.form-item__label / __description) are covered too.

      Structure: every form is a CARD (surface colour, 16px). Fieldsets inside
      it are INSET blocks in the ground colour, so the colour change — not a
      line — is what separates one group of fields from the next.
   ========================================================================== */

.debtsunset-layout .content-region form:not(.debt-tracker-apply-form) {
  box-sizing: border-box;
  min-width: 100%;
  min-width: -webkit-fill-available;
  min-width: stretch;                    /* fills the content width; no max-width cap */
  margin: 0 auto 2rem;                   /* centred: matters for the narrow forms (login) */
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
}

/* Short forms read better narrow. min-width would beat max-width, so it is
   released here; the creditor form is the wide, two-column one. */
.debtsunset-layout .content-region form:is(.user-login-form, .user-pass, .magic-login-code-form) {
  min-width: 0;
  max-width: 30rem;
}

.debtsunset-layout .content-region form.debt-tracker-creditor-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  min-width: 100%;
  min-width: -webkit-fill-available;
  min-width: stretch;
  max-width: none;
}

/* In that grid, whole-row items: the name, the file upload, every fieldset, the
   action row. Everything else (type, balance, APR, promo months) pairs up. */
.debtsunset-layout .debt-tracker-creditor-form > :is(fieldset, .form-actions, .form-item-creditor-name, .form-managed-file, .js-form-type-managed-file, .description) {
  grid-column: 1 / -1;
}

.debtsunset-layout .form-item {
  min-width: 0;
  margin: 0 0 1.25rem;
}

.debtsunset-layout .form-item :is(label, .form-item__label) {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--ds-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.debtsunset-layout label.form-required::after {
  content: " *";
  color: var(--ds-link);
}

.debtsunset-layout .form-item :is(.description, .form-item__description) {
  margin: 0.375rem 0 0;
  color: var(--ds-ink-muted);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}

/* Field boxes: gently rounded (16px), 2px border. Height, padding, border
   colour and the active-border swap come from the --pico-form-* variables set
   in section 3; only the minimum height and the type need help. */
.debtsunset-layout :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]), select, textarea) {
  box-sizing: border-box;
  min-height: 3.5rem;
  border-radius: var(--ds-radius-container);
  font-family: var(--ds-font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: normal;
}

/* Single-line fields are exactly 56px (Pico's own formula gives a fractional
   height); textareas keep their natural height. The prefix/suffix boxes below
   use the same number. */
.debtsunset-layout :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]), select:not([multiple], [size])) {
  height: 3.5rem;
}

.debtsunset-layout textarea {
  min-height: 8rem;
}

/* Amounts line up digit-for-digit when typed. */
.debtsunset-layout input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* --- Fieldsets: inset blocks ----------------------------------------------- */

.debtsunset-layout form fieldset {
  min-width: 0;
  margin: 0 0 1.5rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 0;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-ground);
}

/* A borderless <fieldset> pins its <legend> to the top edge with no padding
   above it. Floating the legend turns it into an ordinary block inside the
   padding, and the content clears it. */
.debtsunset-layout form fieldset > legend {
  float: left;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  color: var(--ds-ink);
  font-family: var(--ds-font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.debtsunset-layout form fieldset > legend + * {
  clear: both;
}

.debtsunset-layout .fieldset-legend {
  font: inherit;
  letter-spacing: inherit;
}

/* The fields inside a fieldset pair up in two columns; anything that needs the
   whole row (helper text, a textarea, an entry row, buttons) spans it. */
.debtsunset-layout .fieldset-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  align-items: start;
}

.debtsunset-layout .fieldset-wrapper > :is(.description, .form-type-textarea, .js-form-type-textarea, .debt-tracker-entry-row, .form-actions, .form-managed-file, .js-form-type-managed-file, .form-wrapper, fieldset, .form-submit) {
  grid-column: 1 / -1;
}

.debtsunset-layout .fieldset-wrapper > .form-submit {
  justify-self: start;
}

.debtsunset-layout .fieldset-wrapper > .description {
  margin: 0.5rem 0 0;
  color: var(--ds-ink-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* The last field in a block doesn't need its bottom margin. */
.debtsunset-layout .fieldset-wrapper > .form-item:last-child {
  margin-bottom: 0;
}

/* --- Prefix / suffix fields ($ 7,000  ·  90 days) --------------------------- */

.debtsunset-layout .form-item > :is(.field-prefix, .field-suffix) {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 3.5rem;                        /* == the input's height, to the pixel */
  padding: 0 1rem;
  border: 2px solid var(--ds-input-border);
  background-color: var(--ds-soft);
  color: var(--ds-ink-on-soft);          /* night on peach 11.35 */
  font-weight: 600;
}

.debtsunset-layout .form-item > .field-prefix {
  border-right: 0;
  border-radius: var(--ds-radius-container) 0 0 var(--ds-radius-container);
}

.debtsunset-layout .form-item > .field-suffix {
  border-left: 0;
  border-radius: 0 var(--ds-radius-container) var(--ds-radius-container) 0;
}

.debtsunset-layout .form-item > .field-prefix + :is(input, select) {
  border-radius: 0 var(--ds-radius-container) var(--ds-radius-container) 0;
}

.debtsunset-layout .form-item > :is(input, select):has(+ .field-suffix) {
  border-radius: var(--ds-radius-container) 0 0 var(--ds-radius-container);
}

/* The box beside a focused / invalid field takes the same border colour, so
   the two read as one continuous outline. */
.debtsunset-layout .form-item:has(> :is(input, select):focus) > :is(.field-prefix, .field-suffix) {
  border-color: var(--ds-input-border-active);
}

.debtsunset-layout .form-item:has(> :is(input, select)[aria-invalid="true"]) > :is(.field-prefix, .field-suffix) {
  border-color: var(--ds-invalid);
}

/* Focus ring for a joined "$ [input]" / "[input] %" pair: ONE ring around the
   whole group. The input's own ring stopped at the box beside it and cut
   across it (or fell short of it), so it is replaced by an ::after that spans
   the pair: row 2 of the item's grid when there is a visible label above it,
   row 1 otherwise. Absolutely positioned, so it takes no part in the grid. */
.debtsunset-layout .form-item:has(> :is(.field-prefix, .field-suffix)) {
  position: relative;
}

.debtsunset-layout .form-item:has(> :is(.field-prefix, .field-suffix))::after {
  content: "";
  position: absolute;
  inset: 0;
  grid-row: 1 / 2;                       /* explicit end line: on an absolutely positioned item, `auto` means the container's edge */
  grid-column: 1 / -1;
  border-radius: var(--ds-radius-container);
  pointer-events: none;
}

.debtsunset-layout .form-item:has(> :is(.field-prefix, .field-suffix)):has(> label:not(.visually-hidden), > .form-item__label)::after {
  grid-row: 2 / 3;
}

.debtsunset-layout .form-item:has(> :is(.field-prefix, .field-suffix)):has(> :is(input, select):focus-visible)::after {
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
}

.debtsunset-layout .form-item:has(> :is(.field-prefix, .field-suffix)) > :is(input, select):focus-visible {
  outline: none;                         /* the group ring above replaces it */
}

/* With a visible label the prefix + input would otherwise wrap onto two lines
   (the input is width:100%). A small grid keeps them on one: label on top,
   then [prefix][input]. */
.debtsunset-layout .form-item:has(> .field-prefix, > .field-suffix) {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  align-content: start;                  /* extra height from a taller neighbour must not stretch the rows */
}

.debtsunset-layout .form-item:has(> .field-suffix):not(:has(> .field-prefix)) {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.debtsunset-layout .form-item:has(> .field-prefix, > .field-suffix) > :is(label, .description, .form-item__label, .form-item__description) {
  grid-column: 1 / -1;
}

.debtsunset-layout .form-item:has(> .field-prefix, > .field-suffix) > input {
  margin-bottom: 0;
}

/* --- Entry rows: "Month [select]  Amount [$ ____]" (windfalls, unplanned usage,
       special additions) ---------------------------------------------------- */

.debtsunset-layout .debt-tracker-entry-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.debtsunset-layout .debt-tracker-entry-row > .form-item {
  margin: 0;
}

.debtsunset-layout .debt-tracker-entry-row > .form-type-select {
  flex: 1 1 12rem;
  max-width: 16rem;
}

/* The amount box: the label is visually hidden, so the $ and the input sit in
   one inline-flex group. (The first rule is exactly the selector requested; the
   second covers every "Add another" row, which gets windfalls-1, -2 …) */
.debtsunset-layout .js-form-item.form-item.form-type-number.js-form-type-number.form-item-windfalls-0-amount.js-form-item-windfalls-0-amount.form-no-label {
  display: inline-flex;
}

.debtsunset-layout .debt-tracker-entry-row > .form-type-number {
  display: inline-flex;
  flex: 0 1 13rem;
  align-items: stretch;
}

.debtsunset-layout .debt-tracker-entry-row > .form-type-number > input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}

/* --- Checkbox / radio: the input comes first, the label after it ------------ */

/* The control in its own column, the label beside it (wrapping under
   itself, never under the box), any description under the label. */
.debtsunset-layout :is(.form-type-checkbox, .form-type-radio, .js-form-type-checkbox, .js-form-type-radio) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.2rem 0.65rem;
}

.debtsunset-layout :is(.form-type-checkbox, .form-type-radio, .js-form-type-checkbox, .js-form-type-radio) > input {
  margin: 0.1rem 0 0;
}

.debtsunset-layout :is(.form-type-checkbox, .form-type-radio, .js-form-type-checkbox, .js-form-type-radio) > label {
  margin: 0;
  padding-block: 0.05rem;
  font-weight: 500;
  cursor: pointer;
}

/* The chosen option reads as chosen. */
.debtsunset-layout :is(.form-type-checkbox, .form-type-radio, .js-form-type-checkbox, .js-form-type-radio):has(> input:checked) > label {
  font-weight: 650;
}

.debtsunset-layout :is(.form-type-checkbox, .form-type-radio, .js-form-type-checkbox, .js-form-type-radio) > .description {
  grid-column: 2;
  margin: 0;
}

/* --- The controls themselves ---------------------------------------------
   Drawn here rather than by Pico: its checked radio uses the primary
   *border* colour (transparent in this theme, for the pill buttons), which
   made the chosen dot vanish, and its checkbox takes the container radius,
   which made checkboxes round. Unchecked: a strong ink outline on the
   input background. Checked: the primary button colours (ember/white in
   light, marigold/night in dark), a tick or a solid dot. Custom-drawn
   inputs (strategy cards, Bill Pay ticks) keep their own look. */
.debtsunset-layout {
  --ds-control-size: 1.3rem;
  --ds-control-line: color-mix(in srgb, var(--ds-ink) 78%, var(--ds-input-bg));
  --ds-control-on: var(--ds-btn-primary-bg);
  --ds-control-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

[data-theme="dark"] .debtsunset-layout,
.debtsunset-layout[data-theme="dark"] {
  --ds-control-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1A33' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .debtsunset-layout {
    --ds-control-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1A33' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  }
}

.debtsunset-layout input:is([type="checkbox"], [type="radio"]):not([role="switch"], .debt-tracker-strategy-card__input, .ds-billpay__tick input) {
  flex: 0 0 auto;
  width: var(--ds-control-size);
  height: var(--ds-control-size);
  padding: 0;
  border: 2px solid var(--ds-control-line);
  border-radius: 0.35rem;
  background-color: var(--ds-input-bg);
  background-image: none;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ds-night) 12%, transparent);
  vertical-align: middle;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
  -webkit-appearance: none;
  appearance: none;
}

.debtsunset-layout input[type="radio"]:not(.debt-tracker-strategy-card__input, .ds-billpay__tick input) {
  border-radius: 50%;
}

/* Hover: the box answers before it is clicked. */
.debtsunset-layout input:is([type="checkbox"], [type="radio"]):not([role="switch"], .debt-tracker-strategy-card__input, .ds-billpay__tick input, :disabled):hover,
.debtsunset-layout :is(.form-type-checkbox, .form-type-radio):has(> label:hover) > input:is([type="checkbox"], [type="radio"]):not(:disabled) {
  border-color: var(--ds-control-on);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-control-on) 18%, transparent);
}

.debtsunset-layout input[type="checkbox"]:not([role="switch"], .debt-tracker-strategy-card__input, .ds-billpay__tick input):checked {
  border-color: var(--ds-control-on);
  background-color: var(--ds-control-on);
  background-image: var(--ds-control-tick);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 78% auto;
}

.debtsunset-layout input[type="checkbox"]:not([role="switch"], .debt-tracker-strategy-card__input, .ds-billpay__tick input):indeterminate {
  border-color: var(--ds-control-on);
  background: linear-gradient(var(--ds-btn-primary-ink), var(--ds-btn-primary-ink)) center / 55% 2.5px no-repeat, var(--ds-control-on);
}

.debtsunset-layout input[type="radio"]:not(.debt-tracker-strategy-card__input, .ds-billpay__tick input):checked {
  border-color: var(--ds-control-on);
  background-color: var(--ds-input-bg);
  background-image: radial-gradient(circle, var(--ds-control-on) 0 42%, transparent 46%);
}

.debtsunset-layout input:is([type="checkbox"], [type="radio"]):not([role="switch"], .debt-tracker-strategy-card__input, .ds-billpay__tick input):focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
}

.debtsunset-layout input:is([type="checkbox"], [type="radio"]):not([role="switch"], .debt-tracker-strategy-card__input, .ds-billpay__tick input):disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.debtsunset-layout input:is([type="checkbox"], [type="radio"]):not([role="switch"], .debt-tracker-strategy-card__input, .ds-billpay__tick input)[aria-invalid="true"],
.debtsunset-layout input:is([type="checkbox"], [type="radio"]).error {
  border-color: var(--ds-invalid);
}

/* --- File upload: the chooser and its Upload button share a row ------------- */

.debtsunset-layout .form-managed-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.debtsunset-layout .form-managed-file > input[type="file"] {
  flex: 1 1 16rem;
  margin: 0;
}

/* --- Collapsible sections (the account form's time zone) -------------------- */

.debtsunset-layout form details {
  margin: 0 0 1.25rem;
  padding: 0.25rem 1.25rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-ground);
}

.debtsunset-layout form details > summary {
  padding: 0.75rem 0;
  font-weight: 600;
}

.debtsunset-layout form details[open] > summary {
  margin-bottom: 0.5rem;
}

/* Drupal gives every <summary> role="button", which the button rule above
   paints as a primary pill (ember; marigold in dark mode). A section heading
   is not a button: plain text with the disclosure triangle. */
.debtsunset-layout details > summary[role="button"] {
  display: list-item;
  min-height: 0;
  padding: 0.75rem 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--ds-ink);
  font-size: inherit;
  font-weight: 600;
  text-align: left;
}

.debtsunset-layout details > summary[role="button"]:is(:hover, :active, :focus-visible) {
  border: 0;
  background-color: transparent;
  color: var(--ds-ink);
}

/* An information box inside a form (e.g. "How signing in works" on /signin). */
.debtsunset-layout form .magic-login-how {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-ground);
}

.debtsunset-layout form .magic-login-how h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.debtsunset-layout form .magic-login-how ul {
  margin: 0;
  padding-left: 1.25rem;
}

.debtsunset-layout form .magic-login-how li + li {
  margin-top: 0.3rem;
}

/* --- Action row ---------------------------------------------------------------- */

.debtsunset-layout form .form-actions {
  margin-top: 2rem;
}

/* --- Strategy / report controls that are not Drupal forms --------------------- */

.debtsunset-layout .debt-tracker-extra-input-group {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 2px solid var(--ds-input-border);
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-input-bg);
}

/* overflow:hidden would clip the focus outline, so the group draws it instead. */
.debtsunset-layout .debt-tracker-extra-input-group:focus-within {
  border-color: var(--ds-input-border-active);
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
}

.debtsunset-layout .debt-tracker-extra-input-group input {
  width: 8rem;
  min-height: 3.25rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  outline: none;
}

.debtsunset-layout .debt-tracker-extra-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.9rem;
  background-color: var(--ds-soft);
  color: var(--ds-ink-on-soft);
  font-weight: 600;
}


/* ==========================================================================
   9. TABLES AND PROGRESS
   ========================================================================== */

/* Tables are wrapped in .table-scroll (templates/table.html.twig): a wide table
   — the 11-column creditors list — scrolls sideways in its own rounded box
   instead of pushing the page wider than the screen. */
.debtsunset-layout .table-scroll {
  /* Contains absolutely positioned descendants (visually-hidden form labels),
     which would otherwise escape the scroller and widen the page. */
  position: relative;
  max-width: 100%;
  margin: 0 0 1.5rem;
  overflow-x: auto;
  border-radius: var(--ds-radius-container);
  /* A visible, always-on scrollbar is the cue that the table scrolls sideways.
     The wrapper is keyboard-focusable (table.html.twig), so it scrolls with the
     arrow keys. Standard properties for Chromium/Firefox; the -webkit rules
     below keep the bar visible on iOS Safari, which hides overlay scrollbars. */
  scrollbar-width: thin;
  scrollbar-color: var(--ds-ink-muted) var(--ds-track);
}

.debtsunset-layout .table-scroll::-webkit-scrollbar {
  height: 0.75rem;
}

.debtsunset-layout .table-scroll::-webkit-scrollbar-track {
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-track);
}

.debtsunset-layout .table-scroll::-webkit-scrollbar-thumb {
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-ink-muted);
}

.debtsunset-layout .table-scroll > table {
  margin: 0;
}

.debtsunset-layout table {
  width: 100%;
  margin: 0 0 1.5rem;
  border-collapse: separate;             /* borders are off anyway; keeps sticky headers clean */
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.debtsunset-layout caption {
  padding: 0 0 0.75rem;
  color: var(--ds-ink-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
}

/* Cells: Pico paints every cell with the page background; give them a surface. */
.debtsunset-layout :is(th, td) {
  padding: 0.8rem 1rem;
  border: 0;
  background-color: var(--ds-surface);
  color: var(--ds-ink);
  vertical-align: middle;
}

/* Header row on twilight with sand text. It sticks to the top of a tall table
   (desktop only: the box gets a max-height there, so it scrolls vertically). */
.debtsunset-layout thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--ds-table-head-bg);
  color: var(--ds-table-head-ink);       /* sand on twilight 12.74 */
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Zebra rows: peach at low alpha layered over the surface. */
.debtsunset-layout tbody tr:nth-child(even) :is(td, th) {
  background-image: linear-gradient(var(--ds-table-zebra), var(--ds-table-zebra));
}

/* Currency and other figures: right-aligned, tabular, never wrapped. */
.debtsunset-layout :is(th.numeric, td.numeric) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sortable column headers on the Creditors table (js/creditors_sort.js). The
   button is the header text itself, in the header's own ink; two small
   triangles show the direction, the active one at full strength. */
.debtsunset-layout .debt-tracker-creditors-table thead .debt-tracker-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.debtsunset-layout .debt-tracker-creditors-table thead .debt-tracker-sort:hover {
  text-decoration: underline;
}

.debtsunset-layout .debt-tracker-creditors-table thead .debt-tracker-sort:focus-visible {
  outline: 3px solid var(--ds-table-head-ink);   /* the header's sand ink: the ember ring is too faint on twilight */
  outline-offset: 3px;
}

.debtsunset-layout .debt-tracker-sort__icon {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.debtsunset-layout .debt-tracker-sort__icon::before,
.debtsunset-layout .debt-tracker-sort__icon::after {
  content: "";
  border-inline: 0.28rem solid transparent;
  opacity: 0.4;
}

.debtsunset-layout .debt-tracker-sort__icon::before {
  border-block-end: 0.32rem solid currentColor;
}

.debtsunset-layout .debt-tracker-sort__icon::after {
  border-block-start: 0.32rem solid currentColor;
}

.debtsunset-layout th[aria-sort="ascending"] .debt-tracker-sort__icon::before,
.debtsunset-layout th[aria-sort="descending"] .debt-tracker-sort__icon::after {
  opacity: 1;
}

/* Card art: the very small card thumbnail that leads each row of the
   Creditors table. The column shrinks to fit it. */
.debtsunset-layout :is(th, td).card-art {
  width: 1%;
  padding-inline-end: 0;
}

.debtsunset-layout img.debt-tracker-card-art {
  display: block;
  width: 4rem;
  max-width: none;
  height: auto;
  aspect-ratio: 856 / 540;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Totals row block. */
.debtsunset-layout td.debt-tracker-total-row {
  background-color: var(--ds-soft);
  background-image: none;
  color: var(--ds-ink-on-soft);
  font-weight: 700;
}

@media (min-width: 900px) {
  .debtsunset-layout .table-scroll {
    max-height: min(75vh, 46rem);
  }
}

/* --- Progress / payoff bars ----------------------------------------------
   "The sun going down on the balance": ember → flare → marigold. Pico's fill
   is `background-color` only, so the gradient needs the vendor pseudo-elements
   — one of the few bespoke selectors. Pill radius, 12px tall; the percentage
   label sits BESIDE the bar (see .payoff), never inside it. */
.debtsunset-layout progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.75rem;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-track);
  color: var(--ds-ember);
}

.debtsunset-layout progress::-webkit-progress-bar {
  border-radius: var(--ds-radius-pill);
  background: transparent;
}

.debtsunset-layout progress[value]::-webkit-progress-value {
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-ember);
  background-image: linear-gradient(to right, var(--ds-ember), var(--ds-flare), var(--ds-marigold));
  transition: none;
}

.debtsunset-layout progress::-moz-progress-bar {
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-ember);
  background-image: linear-gradient(to right, var(--ds-ember), var(--ds-flare), var(--ds-marigold));
}

.debtsunset-layout .payoff {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.debtsunset-layout .payoff progress {
  flex: 1 1 auto;
}

.debtsunset-layout .payoff__label {
  flex: 0 0 auto;
  min-width: 3.5em;
  color: var(--ds-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}


/* ==========================================================================
   10. CARDS AND COMPONENTS
   ========================================================================== */

/* Cards: linen surface, 16px, no shadow, 2px transparent border. */
.debtsunset-layout :is(article, .card) {
  margin: 0 0 1.5rem;
  padding: 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
  box-shadow: none;
}

/* Creditor card: the balance is the largest element. */
.debtsunset-layout .creditor-card {
  border: 2px solid transparent;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
  box-shadow: none;
}

.debtsunset-layout .creditor-card:is(:hover, :focus-within) {
  border-color: var(--ds-ember);
}

.debtsunset-layout .creditor-card__name {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.debtsunset-layout .creditor-card__balance {
  display: block;
  margin: 0 0 0.75rem;
  color: var(--ds-ink);
  font-family: var(--ds-font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Status semantics — the sunset range covers every state; no green or red.
   Each is also spelled out in the badge text, never hue alone. */
.debtsunset-layout .status {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.85rem;
  border: 2px solid transparent;
  border-radius: var(--ds-radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}
.debtsunset-layout .status--paid     { background-color: var(--ds-marigold); color: var(--ds-night); }  /* paid off: celebration, warm  9.41 */
.debtsunset-layout .status--on-track { background-color: var(--ds-horizon);  color: var(--ds-sand);  }  /* on track  8.37 */
.debtsunset-layout .status--behind   { background-color: var(--ds-ember);    color: var(--ds-white); }  /* behind    5.52 */

/* --- Debt Tracker components ---------------------------------------------- */

/* Chart cards fill the content width and start at the same left edge as the
   text above them (the module centres them in a 900px column). */
.debtsunset-layout .debt-tracker-chart-wrapper {
  box-sizing: border-box;
  max-width: none;
  margin: 0 0 2rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
}

.debtsunset-layout .debt-tracker-chart-row {
  max-width: none;
  margin: 0 0 2rem;
  gap: 1.5rem;
  justify-content: stretch;
}

.debtsunset-layout .debt-tracker-chart-row > .debt-tracker-chart-wrapper {
  margin-bottom: 0;
}

.debtsunset-layout .debt-tracker-chart-wrapper--third {
  flex: 1 1 16rem;
  max-width: none;
}

.debtsunset-layout .debt-tracker-chart-wrapper--half {
  flex: 1 1 22rem;
  max-width: none;
}

/* Reports charts. Chart.js sizes a chart from its container's width and the
   canvas's width:height ratio, so left alone each one fills its card. The
   template wraps every canvas in a frame that keeps the space the chart used to
   take (full width, same ratio) around a narrower box, centred, that holds the
   canvas: the card stays exactly the size it was and the chart is drawn at 70%.
   Phones keep the full width, since 70% of a 358px card is too small to read. */
.debtsunset-layout .debt-tracker-chart-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 300 / 140;
}

.debtsunset-layout .debt-tracker-chart-frame--tall {                /* the stacked bar chart: canvas height="260" */
  aspect-ratio: 300 / 260;
}

.debtsunset-layout .debt-tracker-chart-canvas {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
}

@media (min-width: 641px) {
  .debtsunset-layout .debt-tracker-chart-canvas {
    flex-basis: 70%;
  }
}

.debtsunset-layout .debt-tracker-total-min-payment {
  font-size: 1.125rem;
}

/* "Showing: Debt snowball": a subheading whose line is exactly as tall as its
   strategy icon. The icons are black line art on transparent, so they are used
   as a mask filled with the theme's ink colour: they follow light/dark mode and
   stay sharp at any size. Sized by height; the width follows the icon's own
   proportions (they all differ). */
.debtsunset-layout .debt-tracker-strategy-heading {
  --strategy-icon-height: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
}

.debtsunset-layout .debt-tracker-strategy-heading h2 {
  margin: 0;
  font-size: 1.875rem;
  line-height: var(--strategy-icon-height);
}

.debtsunset-layout .debt-tracker-strategy-icon {
  flex: 0 0 auto;
  height: var(--strategy-icon-height);
  background-color: var(--ds-ink);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.debtsunset-layout .debt-tracker-strategy-icon--snowball {
  aspect-ratio: 292 / 176;
  -webkit-mask-image: url("../images/strategy-snowball.png");
  mask-image: url("../images/strategy-snowball.png");
}

.debtsunset-layout .debt-tracker-strategy-icon--avalanche {
  aspect-ratio: 205 / 176;
  -webkit-mask-image: url("../images/strategy-avalanche.png");
  mask-image: url("../images/strategy-avalanche.png");
}

.debtsunset-layout .debt-tracker-strategy-icon--min_only {
  aspect-ratio: 329 / 176;
  -webkit-mask-image: url("../images/strategy-minimal.png");
  mask-image: url("../images/strategy-minimal.png");
}

.debtsunset-layout .debt-tracker-strategy-icon--utilization_beatdown {
  aspect-ratio: 1 / 1;
  -webkit-mask-image: url("../images/gauge.svg");
  mask-image: url("../images/gauge.svg");
}

/* Under the Apply button: the plan it will apply (strategy and extra), which
   the Strategy page script keeps in step with the picker. */
.debtsunset-layout .debt-tracker-apply-summary {
  margin: 0.75rem 0 0.5rem;
  color: var(--ds-ink);
  font-size: 0.9375rem;
}

/* The payoff milestones table under the per-creditor chart. Dates stay on one
   line ("2026-10-20" would otherwise wrap at its hyphens). */
.debtsunset-layout .debt-tracker-milestone-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Room for a creditor's name, so it wraps to two lines at most. On a narrow
   screen the table scrolls sideways inside its own box instead. */
.debtsunset-layout .debt-tracker-milestones td:first-child {
  min-width: 11rem;
}

/* Seven columns of figures: a little less side padding lets the whole table
   fit a desktop-width content area without scrolling. */
.debtsunset-layout .debt-tracker-milestones :is(th, td) {
  padding-inline: 0.65rem;
}

.debtsunset-layout .debt-tracker-milestones-title {
  margin: 2rem 0 0.75rem;
}

/* Subheading under a projected-payoff chart title: the total monthly payment,
   its amount picked out in amber (marigold with night text, 9.41:1). */
.debtsunset-layout .debt-tracker-monthly-total {
  margin: -0.5rem 0 1rem;
  font-size: 1.125rem;
  font-weight: 500;
}

.debtsunset-layout .debt-tracker-monthly-total__amount {
  display: inline-block;
  padding: 0.1rem 0.75rem;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-marigold);
  color: var(--ds-night);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Badges that pick a key figure out of a sentence: the projected payoff date
   (teal / sand) and the total monthly payment (amber, like the amount above). */
.debtsunset-layout .debt-tracker-badge {
  display: inline-block;
  padding: 0.1rem 0.75rem;
  border-radius: var(--ds-radius-pill);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.debtsunset-layout .debt-tracker-badge--date {
  background-color: var(--ds-badge-date-bg);
  color: var(--ds-badge-date-ink);
}

.debtsunset-layout .debt-tracker-badge--amount {
  background-color: var(--ds-marigold);
  color: var(--ds-night);
}

/* The combined-payoff sentence under "Projected payoff - all creditors": a size
   up from body text, with a little room around the badges. */
.debtsunset-layout .debt-tracker-payoff-summary {
  font-size: 1.125rem;
  line-height: 2;
}

/* A link on the peach "totals / debt-free" row: plain ember is 3.6:1 there, so it takes
   the on-soft link colour (ember-deep 4.9:1; marigold in dark mode). */
.debtsunset-layout td.debt-tracker-total-row a {
  color: var(--ds-link-on-soft);
}

/* "(debt-free)" in the milestones table stays on one line instead of breaking at its hyphen. */
.debtsunset-layout .debt-tracker-milestones td strong {
  white-space: nowrap;
}

/* The subtitle that follows no longer needs to be pulled up to the heading. */
.debtsunset-layout .debt-tracker-monthly-total + .debt-tracker-subtitle {
  margin-top: 0;
}

.debtsunset-layout .debt-tracker-total-min-payment strong {
  font-family: var(--ds-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
}

.debtsunset-layout :is(.debt-tracker-welcome, .debt-tracker-login-required) {
  box-sizing: border-box;
  max-width: 900px;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--ds-radius-container);
  font-size: 1.0625rem;
}

/* Welcome: a soft (peach) block, calm, not celebratory, across the full
   content width (inside the page gutters). */
.debtsunset-layout .debt-tracker-welcome {
  max-width: none;
  background-color: var(--ds-soft);
  color: var(--ds-ink-on-soft);
}
.debtsunset-layout .debt-tracker-welcome a { color: var(--ds-link-on-soft); }

/* Login prompt: a linen card. */
.debtsunset-layout .debt-tracker-login-required {
  background-color: var(--ds-surface);
  color: var(--ds-ink);
}

/* The strategy picker and the pie charts' month picker are cards capped at
   46rem (the strategy picker is then released below). */
.debtsunset-layout :is(.debt-tracker-strategy-picker, .debt-tracker-pie-month-picker, .debt-tracker-plan-summary, .debt-tracker-apply-card) {
  box-sizing: border-box;
  max-width: 46rem;
  margin: 0 0 1.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
}

.debtsunset-layout .debt-tracker-pie-month-picker {
  margin-inline: 0;
}

/* On the strategy page the picker is a card like the forms around it, so it
   fills the content width instead of stopping at 46rem. */
.debtsunset-layout :is(.debt-tracker-strategy-picker, .debt-tracker-pie-month-picker, .debt-tracker-plan-summary, .debt-tracker-apply-card) {
  max-width: none;
}

/* The total monthly payment worked out in plain sight: minimums, plus extra,
   equals total. Figures right-aligned and tabular so the columns add up. */
.debtsunset-layout .debt-tracker-plan-summary h3 {
  margin-bottom: 0.75rem;
}

.debtsunset-layout .debt-tracker-plan-summary__rows {
  margin: 0;
}

.debtsunset-layout .debt-tracker-plan-summary__rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.35rem;
}

.debtsunset-layout .debt-tracker-plan-summary__rows dt {
  margin: 0;
  font-weight: 500;
}

.debtsunset-layout .debt-tracker-plan-summary__rows dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.debtsunset-layout .debt-tracker-plan-summary__total {
  margin-top: 0.5rem;
  font-size: 1.125rem;
}

.debtsunset-layout .debt-tracker-plan-summary__footnote {
  margin: 1rem 0 0;
}

.debtsunset-layout .debt-tracker-windfall-month {
  white-space: nowrap;
}

/* Amber is reserved for buttons that save to the database. "Update monthly
   payment" only refreshes the page, so it is a ghost button, like "Add
   another". Ghost buttons are linen (twilight in dark mode), which would vanish
   on these cards, so here it is filled with the page ground instead. */
.debtsunset-layout .debt-tracker-extra-form .button {
  --btn-bg: var(--ds-ground);
  --btn-bg-hover: var(--ds-ground);
}

/* The Update form's own explanation sits under its button. */
.debtsunset-layout .debt-tracker-extra-form > .debt-tracker-note {
  margin: 0;
}

/* The windfalls form fills the whole content width, like the tables and charts
   around it (the module caps it at 700px; the theme lifts that). */
.debtsunset-layout .debt-tracker-windfalls-wrapper {
  max-width: none;
  min-width: 100%;
  min-width: -webkit-fill-available;
  min-width: stretch;
}

.debtsunset-layout .debt-tracker-apply-form-wrapper {
  margin-top: 1.25rem;
}

.debtsunset-layout .debt-tracker-swatch {
  border-radius: 4px;
}

.debtsunset-layout .debt-tracker-bar-pager button {
  --btn-bg: var(--ds-btn-ghost-bg);
  --btn-ink: var(--ds-btn-ghost-ink);
  --btn-bg-hover: var(--ds-btn-ghost-bg);
  --btn-ink-hover: var(--ds-btn-ghost-ink);
  --btn-border-hover: var(--ds-btn-ghost-border-hover);
}

.debtsunset-layout .debt-tracker-account {
  padding: 1.5rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
}

.debtsunset-layout .debt-tracker-account dt {
  color: var(--ds-ink-muted);
  font-size: 0.875rem;
  font-weight: 600;
}


/* ==========================================================================
   11. DRUPAL CORE OVERRIDES
   ========================================================================== */

/* Blocks (class hooks added by templates/block.html.twig). */
.debtsunset-layout .block {
  margin-bottom: 1.5rem;
}

.debtsunset-layout .block__title {
  font-size: 1.25rem;
}

/* Status messages — flat solid blocks from the palette.
     status  sand on horizon 8.37 · warning night on marigold 9.41 ·
     error   white on ember 5.52 */
.debtsunset-layout .messages {
  margin: 0 0 1.5rem;
  padding: 1rem 1.5rem;
  border-radius: var(--ds-radius-container);
  font-weight: 500;
}

.debtsunset-layout .messages :is(ul, ol) {
  margin: 0;
  padding-left: 1.25rem;
}

.debtsunset-layout .messages > :last-child { margin-bottom: 0; }

.debtsunset-layout .messages a { color: inherit; text-decoration: underline; }

/* Each message is a coloured block, so it sets the ink tokens for everything
   inside it (the way the .section--* blocks do). Without this the theme's
   general `li, p { color: var(--ds-ink) }` won: in light mode ink is night, so a
   multi-line message (Drupal wraps those in a list) came out as dark navy on
   teal, 1.82:1. */
.debtsunset-layout .messages--status {
  --ds-ink: var(--ds-sand);
  --ds-ink-muted: var(--ds-peach);
  --ds-link: var(--ds-sand);
  background-color: var(--ds-horizon);
  color: var(--ds-ink);
}

.debtsunset-layout .messages--warning {
  --ds-ink: var(--ds-night);
  --ds-ink-muted: var(--ds-night);
  --ds-link: var(--ds-night);
  background-color: var(--ds-marigold);
  color: var(--ds-ink);
}

.debtsunset-layout .messages--error {
  --ds-ink: var(--ds-white);
  --ds-ink-muted: var(--ds-white);
  --ds-link: var(--ds-white);
  background-color: var(--ds-ember);
  color: var(--ds-ink);
}

/* Whatever markup a message holds, its text is the message's colour. */
.debtsunset-layout .messages :is(ul, ol, li, p, div, span, strong, em, b, i, dt, dd, h2) {
  color: inherit;
}

/* Local task tabs (class hooks from menu-local-tasks.html.twig): pills; the
   active one is a solid night pill. */
.debtsunset-layout .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.debtsunset-layout .tabs > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.debtsunset-layout .tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-surface);
  color: var(--ds-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.debtsunset-layout .tabs a:is(:hover, :focus-visible) {
  border-color: var(--ds-ink);
  color: var(--ds-ink);
}

.debtsunset-layout .tabs .is-active > a,
.debtsunset-layout .tabs a.is-active {
  background-color: var(--ds-ink);
  color: var(--ds-ground);               /* sand on night 15.25 (light theme) */
}

/* Local actions ("Add creditor"): right-aligned button row. */
.debtsunset-layout .action-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.debtsunset-layout .action-links > li { margin: 0; padding: 0; list-style: none; }
.debtsunset-layout .action-links a.button { margin: 0; }

/* Pager. */
.debtsunset-layout .pager {
  margin: 2rem 0;
}

.debtsunset-layout .pager__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.debtsunset-layout .pager__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.debtsunset-layout .pager__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 2px solid transparent;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-surface);
  color: var(--ds-ink);
  font-weight: 600;
  text-decoration: none;
}

.debtsunset-layout .pager__item a:is(:hover, :focus-visible) {
  border-color: var(--ds-ink);
}

.debtsunset-layout .pager__item.is-active a {
  background-color: var(--ds-ink);
  color: var(--ds-ground);
}

/* Breadcrumb: quiet muted line. */
.debtsunset-layout .breadcrumb,
.debtsunset-layout nav[aria-labelledby="system-breadcrumb"] {
  margin: 0 0 1rem;
  color: var(--ds-ink-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.debtsunset-layout :is(.breadcrumb, nav[aria-labelledby="system-breadcrumb"]) :is(ol, ul) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.debtsunset-layout :is(.breadcrumb, nav[aria-labelledby="system-breadcrumb"]) li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--ds-ink-muted);
}

/* Nodes (front-page teasers etc.), fields, Views tables. */
.debtsunset-layout .node {
  margin-bottom: 1.5rem;
  padding: 1.75rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
}

.debtsunset-layout .node h2 {
  font-size: 1.75rem;
}

.debtsunset-layout .field {
  margin: 0 0 1rem;
}

.debtsunset-layout .field__label,
.debtsunset-layout .field--label-above > .field__label {
  color: var(--ds-ink-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.debtsunset-layout .views-table {
  width: 100%;
}


/* ==========================================================================
   12. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* --- Phones and small tablets (< 900px): the navigation collapses -------------
   Bar:    [ Menu ]                          [ Log in ]
   Opened: the navigation drops below as a stack of full-width, thumb-sized
           rows; parent items get a chevron button that opens their submenu
           inline. Without JavaScript nothing collapses: the html.ds-js class
           (set in <head> by no-flash.js) is what turns collapsing on. */
@media (max-width: 899px) {
  .debtsunset-navbar__inner {
    padding-block: 0.6rem;
    gap: 0.6rem 1rem;
  }

  .debtsunset-navbar .nav-toggle {
    display: inline-flex;
    order: 1;
  }

  .debtsunset-account {
    order: 2;
    margin-left: auto;
  }

  .debtsunset-primary {
    order: 3;
    flex: 1 1 100%;
  }

  html.ds-js .debtsunset-primary:not(.is-open) {
    display: none;
  }

  .debtsunset-primary .menu--level-0 {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.25rem 0 0.5rem;
  }

  .debtsunset-primary .menu--level-0 > .menu-item {
    flex-wrap: wrap;
  }

  /* Rows: a 4px marigold marker on the left instead of the desktop underline. */
  .debtsunset-primary .menu--level-0 > .menu-item > a {
    flex: 1 1 0;
    min-width: 0;
    min-height: 3rem;
    padding: 0 1rem;
    border-bottom: 0;
    border-left: 4px solid transparent;
    border-radius: var(--ds-radius-container);
    white-space: normal;
  }

  .debtsunset-primary .menu--level-0 > .menu-item--has-children > a {
    padding-right: 1rem;
  }

  .debtsunset-primary .submenu-toggle {
    flex: 0 0 3rem;
    width: 3rem;
    min-height: 3rem;
    border-bottom: 0;
    border-radius: var(--ds-radius-container);
  }

  .debtsunset-primary .menu--level-0 > .menu-item.is-open > :is(a, .submenu-toggle),
  .debtsunset-primary .menu--level-0 > .menu-item--active-trail > :is(a, .submenu-toggle),
  .debtsunset-primary .menu--level-0 > .menu-item > a.is-active,
  .debtsunset-primary .menu--level-0 > .menu-item > :is(a, .submenu-toggle):focus-visible,
  .debtsunset-primary .menu--level-0 > .menu-item:has(> .menu--sub :focus-visible) > :is(a, .submenu-toggle) {
    border-bottom-color: transparent;
    background-color: var(--ds-night);
  }

  .debtsunset-primary .menu--level-0 > .menu-item > a:is(:focus-visible, .is-active),
  .debtsunset-primary .menu--level-0 > .menu-item--active-trail > a {
    border-left-color: var(--ds-marigold);
  }

  @media (hover: hover) and (pointer: fine) {
    .debtsunset-primary .menu--level-0 > .menu-item:hover > :is(a, .submenu-toggle) {
      border-bottom-color: transparent;
      background-color: var(--ds-night);
    }

    .debtsunset-primary .menu--level-0 > .menu-item > a:hover {
      border-left-color: var(--ds-marigold);
    }
  }

  .debtsunset-primary .menu--level-0 > .menu-item > :is(a, .submenu-toggle):focus-visible {
    outline-offset: 2px;
  }

  /* Submenu: an indented night block, in the flow, right under its parent.
     Collapsed by default when JS is running; always shown when it isn't. */
  .debtsunset-primary .menu--sub {
    display: flex;
    position: static;
    flex: 0 0 calc(100% - 1rem);         /* full row minus its 1rem indent: no overflow */
    min-width: 0;
    max-width: none;
    margin: 0.25rem 0 0.5rem 1rem;
    border-radius: var(--ds-radius-container);
  }

  html.ds-js .debtsunset-primary .menu--sub {
    display: none;
  }

  html.ds-js .debtsunset-primary .menu-item.is-open > .menu--sub {
    display: flex;
  }

  .debtsunset-primary .menu--sub > .menu-item > a {
    min-height: 3rem;
    white-space: normal;
  }
}

/* Very small phones: keep the bar on one line where it fits, tighten the pills. */
@media (max-width: 400px) {
  .debtsunset-account .menu-item > a {
    padding: 0 1rem;
  }
}

/* --- Tablets and below ----------------------------------------------------------- */
@media (max-width: 899px) {
  .debtsunset-hero__inner {
    grid-template-columns: 1fr;
  }

  .debtsunset-hero-logo {
    justify-self: start;
    max-width: 14rem;
  }
}

/* --- Phones ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  /* Field pairs stack into one column. */
  .debtsunset-layout .content-region form.debt-tracker-creditor-form,
  .debtsunset-layout .fieldset-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .debtsunset-layout .form-actions .form-submit {
    width: 100%;
  }

  /* Entry rows: month select and amount take a full line each. */
  .debtsunset-layout .debt-tracker-entry-row > :is(.form-type-select, .form-type-number) {
    flex: 1 1 100%;
    max-width: none;
  }

  .debtsunset-layout .content-region form {
    padding: 1.25rem;
  }

  .debtsunset-layout .debt-tracker-account {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .debtsunset-layout .debt-tracker-account dd {
    margin-bottom: 0.75rem;
  }

  .debtsunset-layout .debt-tracker-chart-wrapper--third {
    flex-basis: 100%;
  }

  .debtsunset-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .debtsunset-layout .action-links {
    justify-content: flex-start;
  }

  .debtsunset-layout .tabs a {
    padding: 0 1rem;
  }
}


/* ==========================================================================
   13. PRINT — ink-friendly: no colour blocks, no navigation, links spelled out
       Text is re-inked to night on white paper (the dark blocks' sand text
       would vanish without their backgrounds), controls that do nothing on
       paper are dropped, and wide tables print in full.
   ========================================================================== */

@media print {
  .debtsunset-layout {
    display: block;
    min-height: 0;
  }

  .debtsunset-layout :is(.debtsunset-navbar, .debtsunset-footer, .tabs, .action-links, .pager, .button, .form-actions, button, input[type="submit"]) {
    display: none;
  }

  .debtsunset-layout .section {
    --ds-ink: var(--ds-night);
    --ds-ink-muted: var(--ds-night);
    --ds-link: var(--ds-ember-deep);
    --ds-surface: transparent;
    --ds-table-head-bg: transparent;
    --ds-table-head-ink: var(--ds-night);
    padding-block: 0.5rem;
    background-color: transparent;
    color: var(--ds-night);
  }

  .debtsunset-layout .debtsunset-eyebrow {
    color: var(--ds-night);              /* it is peach on the horizon block, which isn't printed */
  }

  .debtsunset-layout :is(.status, .messages) {
    border: 2px solid var(--ds-night);
    background-color: transparent;
    color: var(--ds-night);
  }

  .debtsunset-layout .content-region a[href]:not([href^="#"], .button)::after {
    content: " (" attr(href) ")";
    font-size: 0.875em;
    overflow-wrap: anywhere;
  }

  .debtsunset-layout .table-scroll {
    overflow: visible;
    max-height: none;
  }

  .debtsunset-layout thead th {
    position: static;
  }

  .debtsunset-layout :is(tr, article, .card, .creditor-card, .debt-tracker-chart-wrapper) {
    break-inside: avoid;
  }

  .debtsunset-layout :is(h1, h2, h3, h4, h5, h6) {
    break-after: avoid;
  }
}

/* =====================================================================
   Debt Tracker: guided journey, dashboard, balance check-in
   Built only from palette tokens; coloured blocks set their own ink tokens
   (see README-contrast.txt).
   ===================================================================== */

/* --- The three-step journey ------------------------------------------------ */
.debtsunset-layout .debt-tracker-journey {
  display: block;
}

.debtsunset-layout .debt-tracker-journey ol {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.debtsunset-layout .debt-tracker-journey__step {
  flex: 1 1 13rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.debtsunset-layout .debt-tracker-journey__step a {
  display: flex;
  margin: 0;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  box-sizing: border-box;
  padding: 0.7rem 1rem;
  border: 2px solid transparent;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
  color: var(--ds-ink);
  text-decoration: none;
}

.debtsunset-layout .debt-tracker-journey__step a:hover {
  border-color: var(--ds-ink-muted);
}

.debtsunset-layout .debt-tracker-journey__mark {
  display: grid;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background-color: var(--ds-soft);
  color: var(--ds-ink-on-soft);
  font-weight: 700;
}

.debtsunset-layout .debt-tracker-journey__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.debtsunset-layout .debt-tracker-journey__label {
  font-weight: 700;
}

.debtsunset-layout .debt-tracker-journey__hint {
  color: var(--ds-ink-muted);
  font-size: 0.8125rem;
}

.debtsunset-layout .debt-tracker-journey__step--current a {
  border-color: var(--ds-link);
}

.debtsunset-layout .debt-tracker-journey__step--current .debt-tracker-journey__mark {
  background-color: var(--ds-btn-primary-bg);
  color: var(--ds-btn-primary-ink);
}

.debtsunset-layout .debt-tracker-journey__step--done .debt-tracker-journey__mark {
  background-color: var(--ds-badge-date-bg);
  color: var(--ds-badge-date-ink);
}

/* --- Sibling-page switcher (Timelines | Monthly) ---------------------------- */
.debtsunset-layout .debt-tracker-subnav {
  display: inline-flex;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
  padding: 0.25rem;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-surface);
}

.debtsunset-layout .debt-tracker-subnav a {
  padding: 0.4rem 1.1rem;
  border-radius: var(--ds-radius-pill);
  color: var(--ds-ink);
  font-weight: 600;
  text-decoration: none;
}

.debtsunset-layout .debt-tracker-subnav a.is-active {
  background-color: var(--ds-btn-primary-bg);
  color: var(--ds-btn-primary-ink);
}

/* --- Welcome / sample data ---------------------------------------------------- */
.debtsunset-layout .debt-tracker-welcome__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.debtsunset-layout .debt-tracker-welcome__actions .button {
  margin: 0;
}

/* The notice tints its links for peach; a button keeps the ink its own style sets. */
.debtsunset-layout .debt-tracker-welcome a.button {
  color: var(--btn-ink);
}

.debtsunset-layout .debt-tracker-welcome a.button:hover {
  color: var(--btn-ink-hover);
}

/* --- Summary cards ------------------------------------------------------------- */
.debtsunset-layout .debt-tracker-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.debtsunset-layout .debt-tracker-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
  color: var(--ds-ink);
}

.debtsunset-layout .debt-tracker-kpi__label {
  color: var(--ds-ink-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.debtsunset-layout .debt-tracker-kpi__value {
  font-family: var(--ds-font-display);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.debtsunset-layout .debt-tracker-kpi__note {
  color: var(--ds-ink-muted);
  font-size: 0.875rem;
}

/* The debt-free card is the headline: the payoff badge colours (teal / sand). */
.debtsunset-layout .debt-tracker-kpi--free {
  --ds-ink: var(--ds-badge-date-ink);
  --ds-ink-muted: var(--ds-badge-date-ink);
  background-color: var(--ds-badge-date-bg);
  color: var(--ds-ink);
}

.debtsunset-layout .debt-tracker-kpi--free .debt-tracker-kpi__label,
.debtsunset-layout .debt-tracker-kpi--free .debt-tracker-kpi__note {
  color: inherit;
}

/* --- Due soon and progress ------------------------------------------------------ */
.debtsunset-layout .debt-tracker-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
}

.debtsunset-layout .debt-tracker-upcoming,
.debtsunset-layout .debt-tracker-progress {
  padding: 1.1rem 1.25rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
}

.debtsunset-layout .debt-tracker-upcoming h2,
.debtsunset-layout .debt-tracker-progress h2 {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
}

.debtsunset-layout .debt-tracker-upcoming ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.debtsunset-layout .debt-tracker-upcoming li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.debtsunset-layout .debt-tracker-upcoming a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background-color: var(--ds-soft);
  color: var(--ds-ink-on-soft);
  text-decoration: none;
}

.debtsunset-layout .debt-tracker-upcoming__name {
  font-weight: 700;
}

.debtsunset-layout .debt-tracker-upcoming__amount {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.debtsunset-layout .debt-tracker-upcoming__when {
  font-size: 0.875rem;
}

.debtsunset-layout .debt-tracker-upcoming__when--soon {
  font-weight: 700;
}

.debtsunset-layout .debt-tracker-progress__headline {
  margin: 0 0 0.5rem;
}

.debtsunset-layout .debt-tracker-progress__headline strong {
  font-family: var(--ds-font-display);
  font-size: 1.75rem;
}

.debtsunset-layout .debt-tracker-progress__chart {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  color: var(--ds-link);
}

/* --- The creditors list ----------------------------------------------------------- */
.debtsunset-layout .debt-tracker-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.75rem;
}

.debtsunset-layout .debt-tracker-list__head h2 {
  margin: 0;
}

.debtsunset-layout .debt-tracker-count {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0 0.5rem;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-soft);
  color: var(--ds-ink-on-soft);
  font-family: var(--ds-font-body);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.debtsunset-layout .debt-tracker-list__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.debtsunset-layout .debt-tracker-list__actions .button {
  margin: 0;
}

.debtsunset-layout .debt-tracker-creditors-wrap {
  overflow-x: auto;
  border-radius: var(--ds-radius-container);
}

.debtsunset-layout .debt-tracker-creditors-table {
  width: 100%;
  margin: 0;
}

.debtsunset-layout .debt-tracker-creditor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.debtsunset-layout .debt-tracker-creditor__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.debtsunset-layout .debt-tracker-creditors-table td small {
  display: block;
  color: var(--ds-ink-muted);
  font-size: 0.8125rem;
}

.debtsunset-layout .debt-tracker-creditors-table td.numeric small {
  margin-left: auto;
}

/* --- Utilization (creditor cards / creditors table) ---------------------------------- */

/* Above the table: total limit, total balance, overall utilization at a glance. */
.debtsunset-layout .debt-tracker-util-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
  font-size: 0.875rem;
}

.debtsunset-layout .debt-tracker-util-summary dt {
  display: inline;
  color: var(--ds-ink-muted);
}

.debtsunset-layout .debt-tracker-util-summary dd {
  display: inline;
  margin: 0 0 0 0.35rem;
  font-weight: 700;
  color: var(--ds-ink);
}

.debtsunset-layout .debt-tracker-util-summary dd[data-ds-util-band] {
  color: var(--util-color);
}

/* The compact ring + figure used both in the creditors table and the
   Utilization report: a small SVG donut (percentage-length trick — the two
   paths are drawn on a circle whose total length is exactly 100 units, so
   stroke-dasharray can just be "{{ percent }}, 100") plus the number and its
   band label beside it. --util-color is set per band by the modifier class. */
.debtsunset-layout .debt-tracker-util {
  --util-color: var(--ds-util-good);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.debtsunset-layout .debt-tracker-util--low,
.debtsunset-layout .debt-tracker-util--ideal { --util-color: var(--ds-util-good); }
.debtsunset-layout .debt-tracker-util--moderate { --util-color: var(--ds-util-moderate); }
.debtsunset-layout .debt-tracker-util--high { --util-color: var(--ds-util-high); }
.debtsunset-layout .debt-tracker-util--critical { --util-color: var(--ds-util-critical); }

.debtsunset-layout .debt-tracker-util__ring {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  transform: rotate(-90deg);
}

.debtsunset-layout .debt-tracker-util__track {
  fill: none;
  stroke: var(--ds-util-track);
  stroke-width: 4;
}

.debtsunset-layout .debt-tracker-util__fill {
  fill: none;
  stroke: var(--util-color);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}

.debtsunset-layout .debt-tracker-util__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}

.debtsunset-layout .debt-tracker-util__text strong {
  font-size: 0.9375rem;
  color: var(--util-color);
}

.debtsunset-layout .debt-tracker-util__text small {
  font-size: 0.75rem;
  color: var(--ds-ink-muted);
}

.debtsunset-layout .debt-tracker-util__estimated {
  display: block;
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--ds-ink-muted);
}

.debtsunset-layout .debt-tracker-util--na {
  color: var(--ds-ink-muted);
  font-size: 0.8125rem;
  font-style: italic;
}

/* The Utilization report's summary KPI value, colored by band (reuses the
   --util-color the .debt-tracker-util--* modifier classes above set). */
.debtsunset-layout .debt-tracker-kpi__value.debt-tracker-util--low,
.debtsunset-layout .debt-tracker-kpi__value.debt-tracker-util--ideal,
.debtsunset-layout .debt-tracker-kpi__value.debt-tracker-util--moderate,
.debtsunset-layout .debt-tracker-kpi__value.debt-tracker-util--high,
.debtsunset-layout .debt-tracker-kpi__value.debt-tracker-util--critical {
  color: var(--util-color);
}

/* --- Utilization report: education cards, per-creditor table, timeline --------------- */
.debtsunset-layout .debt-tracker-util-intro {
  max-width: 60rem;
  margin: 0 0 1.5rem;
  font-size: 1.0625rem;
  color: var(--ds-ink-muted);
}

.debtsunset-layout .debt-tracker-util-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
}

.debtsunset-layout .debt-tracker-util-card {
  padding: 1.25rem 1.5rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
}

.debtsunset-layout .debt-tracker-util-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
}

.debtsunset-layout .debt-tracker-util-card p {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  color: var(--ds-ink-muted);
}

.debtsunset-layout .debt-tracker-util-card p:last-child {
  margin-bottom: 0;
}

.debtsunset-layout .debt-tracker-util-table {
  width: 100%;
  margin: 0 0 0.5rem;
}

.debtsunset-layout .debt-tracker-util-table td,
.debtsunset-layout .debt-tracker-util-table th {
  vertical-align: middle;
}

.debtsunset-layout .debt-tracker-util-table td small {
  display: block;
  color: var(--ds-ink-muted);
  font-size: 0.8125rem;
}

.debtsunset-layout .debt-tracker-util-others {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
}

.debtsunset-layout .debt-tracker-util-others h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.debtsunset-layout .debt-tracker-util-others ul {
  margin: 0;
  padding-left: 1.25rem;
}

.debtsunset-layout .debt-tracker-util-others li {
  margin: 0.25rem 0;
  color: var(--ds-ink-muted);
  font-size: 0.9375rem;
}

.debtsunset-layout .debt-tracker-util-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-soft);
  color: var(--ds-ink-on-soft);
}

.debtsunset-layout .debt-tracker-util-cta p {
  margin: 0;
  max-width: 40rem;
}

.debtsunset-layout .debt-tracker-due--soon {
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-marigold);
  color: var(--ds-night);
  font-weight: 700;
}

.debtsunset-layout .debt-tracker-cell-actions {
  white-space: nowrap;
}

.debtsunset-layout .debt-tracker-cell-actions a {
  margin-right: 0.75rem;
  font-size: 0.9375rem;
}

.debtsunset-layout .debt-tracker-quiet {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
}

.debtsunset-layout .debt-tracker-empty {
  padding: 2rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
  text-align: center;
}

/* Phones: the table becomes one card per creditor, each figure labelled. */
@media (max-width: 760px) {
  .debtsunset-layout .debt-tracker-creditors-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .debtsunset-layout .debt-tracker-creditors-table,
  .debtsunset-layout .debt-tracker-creditors-table tbody,
  .debtsunset-layout .debt-tracker-creditors-table tr,
  .debtsunset-layout .debt-tracker-creditors-table td {
    display: block;
  }

  .debtsunset-layout .debt-tracker-creditors-table tr {
    margin: 0 0 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: var(--ds-radius-container);
    background-color: var(--ds-surface);
  }

  .debtsunset-layout .debt-tracker-creditors-table tbody tr:nth-child(even) :is(td, th) {
    background-image: none;
  }

  .debtsunset-layout .debt-tracker-creditors-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    background-color: transparent;
    text-align: right;
  }

  .debtsunset-layout .debt-tracker-creditors-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--ds-ink-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
  }

  .debtsunset-layout .debt-tracker-creditors-table td.debt-tracker-cell-name {
    display: block;
    padding: 0.5rem 0;
    text-align: left;
  }

  .debtsunset-layout .debt-tracker-creditors-table td.debt-tracker-cell-name::before,
  .debtsunset-layout .debt-tracker-creditors-table td.debt-tracker-cell-actions::before {
    content: none;
  }

  .debtsunset-layout .debt-tracker-creditors-table td.debt-tracker-cell-actions {
    justify-content: flex-start;
    padding-top: 0.5rem;
  }

  .debtsunset-layout .debt-tracker-creditors-table td small {
    margin: 0 0 0 0.5rem;
  }
}

/* --- Balance check-in ---------------------------------------------------------------- */
.debtsunset-layout .debt-tracker-lede {
  max-width: 42rem;
  margin: 0 0 1.25rem;
  color: var(--ds-ink-muted);
  font-size: 1.0625rem;
}

.debtsunset-layout .debt-tracker-balance-list {
  display: grid;
  gap: 0.5rem;
  max-width: 44rem;
  margin: 0 0 1.5rem;
}

.debtsunset-layout .debt-tracker-balance-row {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.6rem 1rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
}

.debtsunset-layout .debt-tracker-balance-row__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
}

.debtsunset-layout .debt-tracker-balance-row .form-item {
  margin: 0;
}

.debtsunset-layout .debt-tracker-balance-row .form-type-number {
  display: inline-flex;
  flex: 0 1 12rem;
  align-items: stretch;
}

.debtsunset-layout .debt-tracker-balance-row .form-type-number > input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}

.debtsunset-layout .debt-tracker-balance-row .form-type-checkbox {
  flex: 1 1 100%;
  order: 3;
  margin: 0;
}

.debtsunset-layout .debt-tracker-balance-row .form-type-checkbox > label {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--ds-ink-muted);
}

/* The statement minimum: a smaller box beside the balance. */
.debtsunset-layout .debt-tracker-balance-row .form-type-number.debt-tracker-balance-row__min-item {
  flex: 0 1 11rem;
}

.debtsunset-layout .debt-tracker-balance-row__min-item > .field-prefix {
  font-size: 0.85rem;
  white-space: nowrap;
}


/* ==========================================================================
   Strategy page: numbered steps, strategy cards, accordions
   ========================================================================== */

/* Each of the three decisions is a card with a numbered heading. */
.debtsunset-layout .debt-tracker-step {
  box-sizing: border-box;
  min-width: 0;
  margin: 0 0 1.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 0;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
  color: var(--ds-ink);
}

.debtsunset-layout .debt-tracker-step__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 1.375rem;
  line-height: 1.25;
}

.debtsunset-layout .debt-tracker-step__num {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-soft);
  color: var(--ds-ink-on-soft);
  font-size: 1rem;
  font-weight: 700;
}

.debtsunset-layout .debt-tracker-extra-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 0.75rem;
}

.debtsunset-layout .debt-tracker-extra-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.9rem;
  color: var(--ds-ink-muted);
  font-size: 0.9375rem;
  white-space: nowrap;
}

.debtsunset-layout .debt-tracker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.debtsunset-layout .debt-tracker-chip {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 2px solid var(--ds-input-border);
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-ground);
  color: var(--ds-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.debtsunset-layout .debt-tracker-chip:hover {
  border-color: var(--ds-link);
}

.debtsunset-layout .debt-tracker-chip:focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
}

/* --- Strategy cards: one radio group, each option shows its own result ------- */
.debtsunset-layout .debt-tracker-strategy-cards__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0.75rem 0;
}

/* Three equal columns (minmax(0, 1fr), so content can never make one wider);
   every card in the row is the same height. One column on narrow screens. */
@media (min-width: 46rem) {
  .debtsunset-layout .debt-tracker-strategy-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.debtsunset-layout .debt-tracker-strategy-card {
  position: relative;
  display: flex;
  box-sizing: border-box;
  /* Pico sizes a label that holds a radio to its content; every card fills its column. */
  width: 100%;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

/* The radio stays a real, visible control (top right); the whole card is its label. */
.debtsunset-layout .debt-tracker-strategy-card__input {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--ds-input-border);
  border-radius: 50%;
  background-color: var(--ds-input-bg);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.debtsunset-layout .debt-tracker-strategy-card__input:checked {
  border-color: var(--ds-link);
  background-image: radial-gradient(circle, var(--ds-link) 0 45%, transparent 50%);
}

.debtsunset-layout .debt-tracker-strategy-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 3rem 1.1rem 1.1rem;
  border: 2px solid var(--ds-input-border);
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-ground);
  color: var(--ds-ink);
}

.debtsunset-layout .debt-tracker-strategy-card:hover .debt-tracker-strategy-card__body {
  border-color: var(--ds-link);
}

.debtsunset-layout .debt-tracker-strategy-card:has(:checked) .debt-tracker-strategy-card__body {
  border-color: var(--ds-link);
  box-shadow: inset 0 0 0 1px var(--ds-link);
}

.debtsunset-layout .debt-tracker-strategy-card:has(:focus-visible) .debt-tracker-strategy-card__body {
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
}

.debtsunset-layout .debt-tracker-strategy-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
}

.debtsunset-layout .debt-tracker-strategy-card .debt-tracker-strategy-icon {
  --strategy-icon-height: 1.75rem;
}

.debtsunset-layout .debt-tracker-strategy-card__title {
  font-family: var(--ds-font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.debtsunset-layout .debt-tracker-strategy-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex-basis: 100%;
  min-height: 1.6rem;
}

.debtsunset-layout .debt-tracker-strategy-card__badges .debt-tracker-badge {
  padding: 0.05rem 0.6rem;
  background-color: var(--ds-badge-date-bg);
  color: var(--ds-badge-date-ink);
  font-size: 0.8125rem;
}

.debtsunset-layout .debt-tracker-strategy-card__badges .debt-tracker-badge[hidden] {
  display: none;
}

.debtsunset-layout .debt-tracker-strategy-card__tagline {
  color: var(--ds-ink-muted);
  font-size: 0.9375rem;
}

.debtsunset-layout .debt-tracker-strategy-card__label {
  margin-top: 0.6rem;
  color: var(--ds-ink-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.debtsunset-layout .debt-tracker-strategy-card__date {
  font-family: var(--ds-font-display);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.debtsunset-layout .debt-tracker-strategy-card__meta {
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.debtsunset-layout .debt-tracker-strategy-card__meta[hidden] {
  display: none;
}

.debtsunset-layout .debt-tracker-strategy-cards[aria-busy="true"] .debt-tracker-strategy-card__date {
  color: var(--ds-ink-muted);
}

/* Total-payment card and apply button live in one card now. */
.debtsunset-layout .debt-tracker-plan-summary .debt-tracker-apply-card {
  margin: 1.25rem 0 0;
  padding: 0;
  background: none;
}

/* --- Accordions for the optional refinements ------------------------------------ */
.debtsunset-layout .debt-tracker-accordion {
  margin: 0 0 1rem;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-surface);
  color: var(--ds-ink);
}

.debtsunset-layout .debt-tracker-accordion > summary {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 3rem 1rem 1.25rem;
  border-radius: var(--ds-radius-container);
  cursor: pointer;
  list-style: none;
  position: relative;
}

.debtsunset-layout .debt-tracker-accordion > summary::-webkit-details-marker {
  display: none;
}

.debtsunset-layout .debt-tracker-accordion > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--ds-ink);
  border-bottom: 2px solid var(--ds-ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s ease;
}

.debtsunset-layout .debt-tracker-accordion[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.debtsunset-layout .debt-tracker-accordion > summary:focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
}

.debtsunset-layout .debt-tracker-accordion__title {
  color: var(--ds-ink);
  font-family: var(--ds-font-display);
  font-size: 1.125rem;
  font-weight: 700;
}

.debtsunset-layout .debt-tracker-accordion__optional,
.debtsunset-layout .debt-tracker-accordion__hint {
  color: var(--ds-ink-muted);
  font-size: 0.9375rem;
  font-weight: 400;
}

.debtsunset-layout .debt-tracker-accordion > :not(summary) {
  padding: 0 1.25rem 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .debtsunset-layout .debt-tracker-accordion > summary::after {
    transition: none;
  }
}


/* Dashboard table: tighter cells so all seven columns fit at content width, and
   names keep a readable measure instead of wrapping word by word. */
@media (min-width: 761px) {
  .debtsunset-layout .debt-tracker-creditors-table :is(th, td) {
    padding: 0.7rem 0.5rem;
  }

  .debtsunset-layout .debt-tracker-creditors-table td.debt-tracker-cell-name {
    min-width: 10.5rem;
  }

  .debtsunset-layout .debt-tracker-creditors-table .debt-tracker-cell-actions {
    white-space: nowrap;
  }

  .debtsunset-layout .debt-tracker-creditors-table .debt-tracker-cell-actions a + a {
    margin-left: 0.75rem;
  }
}

/* ==========================================================================
   Timelines: tabs
   ========================================================================== */
.debtsunset-layout .debt-tracker-tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
  padding: 0.25rem;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-surface);
}

.debtsunset-layout .debt-tracker-tabs__list[hidden] {
  display: none;
}

.debtsunset-layout .debt-tracker-tabs__list [role="tab"] {
  min-height: 2.75rem;
  margin: 0;
  padding: 0 1.25rem;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.debtsunset-layout .debt-tracker-tabs__list [role="tab"][aria-selected="true"] {
  background-color: var(--ds-btn-primary-bg);
  color: var(--ds-btn-primary-ink);
}

.debtsunset-layout .debt-tracker-tabs__list [role="tab"]:focus-visible,
.debtsunset-layout .debt-tracker-tabs__panel:focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
}

.debtsunset-layout .debt-tracker-tabs__download {
  margin-left: auto;
  padding: 0 1rem;
  color: var(--ds-link);
  font-weight: 600;
}

.debtsunset-layout .debt-tracker-tabs__panel[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .debtsunset-layout .debt-tracker-tabs__list {
    border-radius: var(--ds-radius-container);
  }

  .debtsunset-layout .debt-tracker-tabs__download {
    flex-basis: 100%;
    margin: 0;
    padding: 0.5rem 1rem;
  }
}

/* Statement schedule folded to its first year (statement.js). */
.debtsunset-layout .debt-tracker-statement tbody tr[hidden] {
  display: none;
}

.debtsunset-layout .debt-tracker-statement-toggle {
  margin: 0 0 1.5rem;
}


/* "More options (optional)" on the Add form: a quiet disclosure, not a button. */
.debtsunset-layout form details.debt-tracker-more {
  grid-column: 1 / -1;
  padding: 0;
  background: none;
}

.debtsunset-layout form details.debt-tracker-more > summary {
  display: block;
  width: auto;
  margin: 0;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--ds-link);
  font-weight: 600;
  text-align: left;
}

.debtsunset-layout form details.debt-tracker-more > summary:hover {
  color: var(--ds-link-hover);
}

.debtsunset-layout form details.debt-tracker-more[open] {
  padding: 0.5rem 1.25rem 0.25rem;
  background-color: var(--ds-ground);
}

/* Pico gives <nav> negative side margins for its link rows; the journey is not one. */
.debtsunset-layout nav.debt-tracker-journey,
.debtsunset-layout nav.debt-tracker-subnav {
  margin-inline: 0;
}

.debtsunset-layout nav.debt-tracker-journey ol {
  margin-inline: 0;
}

/* Pico's own chevron is drawn for filled buttons (white); use an ink one. */
.debtsunset-layout form details.debt-tracker-more > summary::after {
  content: "";
  float: none;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0 0.2rem 0.6rem;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  background: none;
  transform: rotate(45deg);
}

.debtsunset-layout form details.debt-tracker-more[open] > summary::after {
  margin-bottom: -0.1rem;
  transform: rotate(-135deg);
}


/* A second, quieter submit beside the main one (ground fill so it shows on a linen card). */
.debtsunset-layout .form-actions .form-submit.debt-tracker-secondary-submit {
  --btn-bg: var(--ds-ground);
  --btn-ink: var(--ds-ink);
  --btn-border: var(--ds-input-border);
  --btn-bg-hover: var(--ds-ground);
  --btn-ink-hover: var(--ds-ink);
  --btn-border-hover: var(--ds-link);
}

.debtsunset-layout form details.debt-tracker-more > summary::after {
  background-image: none;
}

/* The "due soon" pill sits on marigold, so it takes night ink, not the muted small-print colour. */
.debtsunset-layout .debt-tracker-creditors-table td small.debt-tracker-due--soon {
  color: var(--ds-night);
}

/* A card with no "saves" line keeps the space, so the three cards are the same height when stacked too. */
.debtsunset-layout .debt-tracker-strategy-card__saved.is-empty {
  visibility: hidden;
}

.debtsunset-layout .debt-tracker-strategy-card__meta {
  min-height: 1.5em;
}

/* ==========================================================================
   General-purpose icons (Lucide, via the iconify_icons module — sourced as
   local, single-colour SVGs and used exactly like the strategy icons above:
   a mask filled with currentColor, so they follow ink/link colour, light and
   dark mode and any size, with no per-request network dependency for
   visitors. Used sparingly: the four summary cards, the "mark paid" toggle,
   the journey's done checkmark, and the empty-state hint.
   ========================================================================== */
.debtsunset-layout .debt-tracker-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.debtsunset-layout .debt-tracker-icon--credit-card { -webkit-mask-image: url("../images/credit-card.svg"); mask-image: url("../images/credit-card.svg"); }
.debtsunset-layout .debt-tracker-icon--banknote { -webkit-mask-image: url("../images/banknote.svg"); mask-image: url("../images/banknote.svg"); }
.debtsunset-layout .debt-tracker-icon--flag { -webkit-mask-image: url("../images/flag.svg"); mask-image: url("../images/flag.svg"); }
.debtsunset-layout .debt-tracker-icon--bell { -webkit-mask-image: url("../images/bell.svg"); mask-image: url("../images/bell.svg"); }
.debtsunset-layout .debt-tracker-icon--check-circle { -webkit-mask-image: url("../images/check-circle.svg"); mask-image: url("../images/check-circle.svg"); }
.debtsunset-layout .debt-tracker-icon--circle-outline { -webkit-mask-image: url("../images/circle-outline.svg"); mask-image: url("../images/circle-outline.svg"); }
.debtsunset-layout .debt-tracker-icon--piggy-bank { -webkit-mask-image: url("../images/piggy-bank.svg"); mask-image: url("../images/piggy-bank.svg"); }
.debtsunset-layout .debt-tracker-icon--gauge { -webkit-mask-image: url("../images/gauge.svg"); mask-image: url("../images/gauge.svg"); }
.debtsunset-layout .debt-tracker-icon--snowflake { -webkit-mask-image: url("../images/snowflake.svg"); mask-image: url("../images/snowflake.svg"); }
.debtsunset-layout .debt-tracker-icon--mountain-snow { -webkit-mask-image: url("../images/mountain-snow.svg"); mask-image: url("../images/mountain-snow.svg"); }
.debtsunset-layout .debt-tracker-icon--target { -webkit-mask-image: url("../images/target.svg"); mask-image: url("../images/target.svg"); }
.debtsunset-layout .debt-tracker-icon--calendar-plus { -webkit-mask-image: url("../images/calendar-plus.svg"); mask-image: url("../images/calendar-plus.svg"); }
.debtsunset-layout .debt-tracker-icon--calendar-cog { -webkit-mask-image: url("../images/calendar-cog.svg"); mask-image: url("../images/calendar-cog.svg"); }
.debtsunset-layout .debt-tracker-icon--info { -webkit-mask-image: url("../images/info.svg"); mask-image: url("../images/info.svg"); }
.debtsunset-layout .debt-tracker-icon--repeat { -webkit-mask-image: url("../images/repeat.svg"); mask-image: url("../images/repeat.svg"); }
.debtsunset-layout .debt-tracker-icon--shovel { -webkit-mask-image: url("../images/shovel.svg"); mask-image: url("../images/shovel.svg"); }

/* --- Summary card icons ---------------------------------------------------- */
.debtsunset-layout .debt-tracker-kpi {
  position: relative;
}

.debtsunset-layout .debt-tracker-kpi__icon {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ds-ink-muted);
}

.debtsunset-layout .debt-tracker-kpi--free .debt-tracker-kpi__icon {
  color: inherit;
}

/* --- Journey step's "done" checkmark --------------------------------------- */
.debtsunset-layout .debt-tracker-journey__mark .debt-tracker-icon {
  width: 1.1rem;
  height: 1.1rem;
}

/* --- Empty state ------------------------------------------------------------ */
.debtsunset-layout .debt-tracker-empty__icon {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 0 0.75rem;
  color: var(--ds-ink-muted);
}

/* --- "Due in the next two weeks": the mark-paid toggle and the Paid badge --- */
.debtsunset-layout .debt-tracker-upcoming__item {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.debtsunset-layout .debt-tracker-upcoming__link {
  flex: 1 1 auto;
  min-width: 0;
}

.debtsunset-layout .debt-tracker-upcoming__toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.debtsunset-layout .debt-tracker-mark-paid-form {
  margin: 0;
}

.debtsunset-layout .debt-tracker-mark-paid-form .form-actions {
  margin: 0;
}

.debtsunset-layout .form-actions .form-submit.debt-tracker-mark-paid-btn {
  --btn-bg: var(--ds-ground);
  --btn-ink: var(--ds-ink);
  --btn-bg-hover: var(--ds-ground);
  --btn-ink-hover: var(--ds-ink);
  min-height: 2.75rem;
  padding: 0 1rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.debtsunset-layout .form-actions .form-submit.debt-tracker-mark-paid-btn.is-paid {
  --btn-bg: transparent;
  --btn-ink: var(--ds-ink-muted);
  --btn-bg-hover: var(--ds-ground);
  --btn-ink-hover: var(--ds-ink);
  border-color: transparent;
}

/* A paid item keeps its amount and due date exactly as before — highlighted
   with a badge and a border, never by fading it out (see README-contrast.txt:
   never signal state with opacity). */
.debtsunset-layout .debt-tracker-upcoming__item.is-paid .debt-tracker-upcoming__link {
  border-radius: 0.75rem;
  box-shadow: inset 0 0 0 2px var(--ds-badge-date-bg);
}

.debtsunset-layout .debt-tracker-paid-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.5rem;
  padding: 0.05rem 0.6rem 0.05rem 0.4rem;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-badge-date-bg);
  color: var(--ds-badge-date-ink);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.debtsunset-layout .debt-tracker-paid-badge .debt-tracker-icon {
  width: 0.9em;
  height: 0.9em;
}

/* Main creditors table: the same "Paid" mark, quieter, next to the due date. */
.debtsunset-layout .debt-tracker-due--paid {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--ds-ink-muted);
  font-weight: 600;
}

.debtsunset-layout .debt-tracker-due--paid .debt-tracker-icon {
  width: 0.9em;
  height: 0.9em;
  color: var(--ds-valid);
}

@media (max-width: 760px) {
  .debtsunset-layout .debt-tracker-upcoming__item {
    flex-wrap: wrap;
  }

  .debtsunset-layout .debt-tracker-upcoming__toggle {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}

/* ==========================================================================
   Edit Creditor form: break-glass locked fields, the unlock link, and the
   autopay confirm's inline tooltip.
   ========================================================================== */
.debtsunset-layout .debt-tracker-icon--lock { -webkit-mask-image: url("../images/lock.svg"); mask-image: url("../images/lock.svg"); }

/* A locked field is read-only text, not a disabled control: full ink, no
   border, no opacity change (see README-contrast.txt — state is never
   signalled with opacity on this site). The small lock mark is the only cue. */
.debtsunset-layout .debt-tracker-locked-field {
  padding: 0.65rem 0;
}

.debtsunset-layout .debt-tracker-locked-value {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.debtsunset-layout .debt-tracker-locked-value .debt-tracker-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ds-ink-muted);
}

/* The quiet break-glass link: out of the way, small, at the foot of the
   form — a real link (never a low-contrast colour) that just does not
   compete for attention against the Save button. */
.debtsunset-layout .debt-tracker-unlock {
  margin: 1.5rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ds-input-border);
}

.debtsunset-layout .debt-tracker-unlock__link {
  font-size: 0.875rem;
}

.debtsunset-layout .debt-tracker-unlock--active {
  padding: 0.9rem 1.1rem;
  border-top: 0;
  border-radius: var(--ds-radius-container);
  background-color: var(--ds-soft);
  color: var(--ds-ink-on-soft);
}

.debtsunset-layout .debt-tracker-unlock--active p {
  margin: 0 0 0.5rem;
}

.debtsunset-layout .debt-tracker-unlock--active .debt-tracker-unlock__link {
  color: var(--ds-link-on-soft);
  font-weight: 600;
}

/* The autopay confirm's inline "What's the difference?" tooltip: a small
   disclosure inside the field description, not a full accordion card. */
.debtsunset-layout .form-item :is(.description, .form-item__description) .debt-tracker-tooltip {
  display: block;
  margin: 0.5rem 0;
}

.debtsunset-layout .debt-tracker-tooltip > summary {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-link);
  font-weight: 600;
  font-size: inherit;
  cursor: pointer;
  list-style: none;
}

.debtsunset-layout .debt-tracker-tooltip > summary::-webkit-details-marker {
  display: none;
}

.debtsunset-layout .debt-tracker-tooltip > summary:hover {
  color: var(--ds-link-hover);
}

.debtsunset-layout .debt-tracker-tooltip > summary:focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
}

.debtsunset-layout .debt-tracker-tooltip > p {
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background-color: var(--ds-ground);
  color: var(--ds-ink);
  font-weight: 400;
}

.debtsunset-layout .debt-tracker-icon--unlock { -webkit-mask-image: url("../images/unlock.svg"); mask-image: url("../images/unlock.svg"); }

/* Lock/unlock icons in the break-glass link and notice, sized to sit inline
   with the text. */
.debtsunset-layout .debt-tracker-unlock__link .debt-tracker-icon {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.15rem;
  vertical-align: -0.1em;
}

.debtsunset-layout .debt-tracker-unlock--active .debt-tracker-icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
  vertical-align: -0.15em;
}

/* The combined "Creditor" identity display reads a little larger — it is
   effectively the page's own heading restated, not just one figure. */
.debtsunset-layout #edit-creditor-display .debt-tracker-locked-value {
  font-size: 1.25rem;
}

/* The card art below the locked creditor name/type. */
.debtsunset-layout .debt-tracker-locked-thumb {
  margin-top: 0.6rem;
}

.debtsunset-layout .debt-tracker-locked-thumb img {
  display: block;
  max-width: 6rem;
  height: auto;
  border-radius: 0.5rem;
}

/* The combined "Creditor" identity field is hand-built (name/type/thumbnail
   together), not a plain #type=>item, so its label needs the same block
   layout the other locked fields get for free from Drupal's form-element
   wrapper. */
.debtsunset-layout .debt-tracker-locked-field > label {
  display: block;
  margin: 0 0 0.35rem;
  font-weight: 600;
}