/* The Credit Score brand theme: one indigo palette for the whole app.
   Loaded after cs-ui.css (the Kinlo component kit) and cs-shell.css, so it is the single place where brand
   colours are decided. Change a colour here and the sidebar, buttons, charts, pills, portal and sign-in follow.

   Design rules
   - One brand hue (indigo, from the original sidebar). Every surface tint, wash and shadow is a tint of it.
   - One accent for actions and focus. Status colours are separate and never indigo:
     good = green, warn = amber, bad = red, info = cyan-blue (kept clear of the indigo accent).
   - Text on the accent is white and passes WCAG AA for body text (accent on white 8.1:1, hover 6.1:1).
     Muted text on cards passes AA (about 6:1). Status text on its soft tint passes AA.
   - Dark theme lifts the accent to a light indigo so it keeps 7:1 or better on the dark surfaces.
   - Chart series: s1 indigo, s2 coral, s3 gold. Three hues that stay apart for colour-blind readers. */

:root {
  /* brand */
  --cs-accent: #3a4a94;
  --cs-accent-hi: #4a5cb0;
  --cs-accent-ink: #ffffff;
  --cs-accent-soft: #3a4a9420;
  --cs-accent-text: #2f3d80;

  /* shell (sidebar, sign-in, portal bar) */
  --cs-sb-a: #3a4a94;
  --cs-sb-b: #2b3670;
  --cs-sb-ink: #ffffff;
  --cs-side: #ffffffb3;
  --cs-side-2: #ffffff9e;
  --cs-side-ink: #151a33;
  --cs-side-muted: #4b5578;
  --cs-side-pill: #3a4a94;
  --cs-side-pill-ink: #ffffff;
  --cs-side-hover: #1a1f3a0d;
  --cs-side-line: #1a1f3a17;
  --cs-side-rim: #1a1f3a29;

  /* surfaces: cool neutrals tinted toward the brand hue */
  --cs-bg: #eceff6;
  --cs-wash-a: #c8d0f4;
  --cs-wash-wave: #d5dbf6d9;
  --cs-wash-b: #d9d2f0;
  --cs-wash-c: #e3e8f6;
  --cs-wash-band: #c9d1f58c;
  --cs-glass: #ffffff8c;
  --cs-glass-hi: #ffffff9e;
  --cs-glass-rim: #ffffffe6;
  --cs-glass-edge: #1a1f3a12;
  --cs-float: #fbfbfee6;
  --cs-card: #fbfbfe;
  --cs-card-2: #1a1f3a0b;
  --cs-card-3: #1a1f3a17;

  /* text */
  --cs-ink: #151a33;
  --cs-ink-2: #394061;
  --cs-muted: #566082;
  --cs-line: #1a1f3a14;
  --cs-line-2: #1a1f3a26;
  --cs-shadow: 0 1px 2px #1a1f3a0a, 0 14px 34px -18px #1a1f3a33;
  --cs-shadow-lg: 0 2px 6px #1a1f3a0f, 0 28px 60px -24px #1a1f3a57;

  /* status: separate hues, never the brand colour */
  --cs-good: #1f7a45;
  --cs-warn: #96510a;
  --cs-bad: #b3263a;
  --cs-info: #0b6f8c;
  --cs-good-soft: #1f7a451f;
  --cs-warn-soft: #c46e1224;
  --cs-bad-soft: #b3263a1c;
  --cs-info-soft: #0b6f8c1c;

  /* chart series */
  --cs-s1: #4a5cb8;
  --cs-s2: #e8836a;
  --cs-s3: #d9b36a;

  /* tinted tiles: indigo for neutral, one tint per status */
  --cs-tile-aqua: #d3d9f6b8;
  --cs-tile-slate: #e0e4f0b8;
  --cs-tile-sage: #d0e8d8b8;
  --cs-tile-peach: #f8d9d4b8;
  --cs-tile-amber: #f6e6c4b8;
  --cs-tile-ink: #151a33;
  --cs-tile-muted: #151a33a8;
  --cs-mono-ink: #151a33;
  --cs-stamp: #b3263a;
  --cs-night: #232c63;
  --cs-night-2: #ffffff14;
  --cs-night-ink: #eef0fb;
  --cs-night-muted: #b3bbe0;
}

[data-theme="dark"] {
  --cs-accent: #8f9cf2;
  --cs-accent-hi: #a8b2f6;
  --cs-accent-ink: #0e1230;
  --cs-accent-soft: #8f9cf226;
  --cs-accent-text: #aab4f6;

  --cs-sb-a: #232a5c;
  --cs-sb-b: #151a3d;
  --cs-side: #151a3de6;
  --cs-side-2: #ffffff0d;
  --cs-side-ink: #eceefa;
  --cs-side-muted: #a2a9cc;
  --cs-side-pill: #8f9cf2;
  --cs-side-pill-ink: #0e1230;
  --cs-side-hover: #eceefa0f;
  --cs-side-line: #eceefa17;
  --cs-side-rim: #eceefa2e;

  --cs-bg: #0e1020;
  --cs-wash-a: #8f9cf233;
  --cs-wash-wave: #8f9cf21a;
  --cs-wash-b: #8a6fe02b;
  --cs-wash-c: #5a6fb81f;
  --cs-wash-band: #8f9cf212;
  --cs-glass: #171a2ef2;
  --cs-glass-hi: #ffffff0d;
  --cs-glass-rim: #ffffff17;
  --cs-glass-edge: #ffffff0f;
  --cs-float: #171a2eeb;
  --cs-card: #171a2e;
  --cs-card-2: #eceefa0b;
  --cs-card-3: #eceefa17;

  --cs-ink: #eceefa;
  --cs-ink-2: #c9cde6;
  --cs-muted: #9aa1c4;
  --cs-line: #eceefa14;
  --cs-line-2: #eceefa29;
  --cs-shadow: 0 1px 2px #0000004d, 0 14px 32px -16px #0009;
  --cs-shadow-lg: 0 2px 6px #0006, 0 30px 70px -24px #000c;

  --cs-good: #6ccb8f;
  --cs-warn: #f0a160;
  --cs-bad: #f4878f;
  --cs-info: #6fc4dd;
  --cs-good-soft: #6ccb8f24;
  --cs-warn-soft: #f0a16024;
  --cs-bad-soft: #f4878f24;
  --cs-info-soft: #6fc4dd24;

  --cs-s1: #8f9cf2;
  --cs-s2: #f29a7c;
  --cs-s3: #c9a964;

  --cs-tile-aqua: #8f9cf233;
  --cs-tile-slate: #2f3558a6;
  --cs-tile-sage: #28503873;
  --cs-tile-peach: #6e3a3a66;
  --cs-tile-amber: #6b4a1f66;
  --cs-tile-ink: #eceefa;
  --cs-tile-muted: #eceefaa8;
  --cs-mono-ink: #eceefa;
  --cs-night: #1b2150e0;
  --cs-night-2: #ffffff12;
}

/* A warning tile is amber. The kit paints it aqua. */
.cs-kpi--warn { background: var(--cs-tile-amber); }

/* shell */
body.cs-body { background: linear-gradient(180deg, var(--cs-sb-a) 0%, var(--cs-sb-b) 100%); }
.sb { background: linear-gradient(180deg, var(--cs-sb-a) 0%, var(--cs-sb-b) 100%); }
.sb-i.on i { color: var(--cs-sb-b); }
.sb-user .pic { background: linear-gradient(135deg, var(--cs-accent-hi), var(--cs-accent)); color: var(--cs-accent-ink); }
[data-theme="dark"] .sb-user .pic { color: var(--cs-accent-ink); }

/* signed-in marks and pill shadows that the kit hard-coded in teal */
.cs-nav__pill { filter: drop-shadow(0 6px 12px #3a4a9447); }
.cs-tabbar__pill { filter: drop-shadow(0 6px 12px #3a4a9450); }
.cs-ipaper__mark { background: var(--cs-accent); color: var(--cs-accent-ink); }
.cs-paint { --cs-p-bg: #eceff6; --cs-p-card: #fbfbfe; --cs-p-side: #3a4a94; --cs-p-pill: #3a4a94; --cs-p-ink: #151a33; --cs-p-dim: #151a334d; }
.cs-paint--dark { --cs-p-bg: #0e1020; --cs-p-card: #1b1f36; --cs-p-side: #151a3d; --cs-p-pill: #8f9cf2; --cs-p-ink: #eceefa; --cs-p-dim: #eceefa4d; }
.cs-paint__tiles i:first-child, .cs-paint--split .cs-paint__tiles i:first-child { background: var(--cs-accent); }

/* customer portal bar: same indigo as the sidebar */
.cs-ptop { background: linear-gradient(120deg, var(--cs-sb-b), var(--cs-sb-a)); }
.cs-pbrand, .cs-pnav a:hover, .cs-pnav a[aria-current="page"], .cs-pnav__out { color: #fff; }


/* ---- Shared page patterns (enquiries, reciprocity, portal) ---- */
.cs-split{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:18px;align-items:start}
@media (max-width:1000px){.cs-split{grid-template-columns:1fr}}
.cs-split--even{grid-template-columns:1fr 1fr}
@media (max-width:1000px){.cs-split--even{grid-template-columns:1fr}}
.cs-form{display:flex;flex-direction:column;gap:14px}
.cs-row3{display:grid;grid-template-columns:1.2fr 80px 1.6fr;gap:10px}
.cs-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-hint{font-size:12px;color:var(--cs-muted);line-height:1.5;margin:0}
.cs-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.01em}
.cs-consent{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--cs-line,#d5daea);border-radius:12px;background:var(--cs-accent-soft);font-size:12.5px;line-height:1.5;color:var(--cs-ink-2);cursor:pointer}
.cs-consent input{margin-top:3px;accent-color:var(--cs-accent)}
.cs-notice{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:12px;font-size:13px;line-height:1.5;margin-bottom:16px;border:1px solid transparent}
.cs-notice i{margin-top:2px}
.cs-notice--warn{background:var(--cs-tile-amber);color:var(--cs-warn);border-color:color-mix(in srgb,var(--cs-warn) 30%,transparent)}
.cs-notice--good{background:color-mix(in srgb,var(--cs-good) 12%,transparent);color:var(--cs-good);border-color:color-mix(in srgb,var(--cs-good) 30%,transparent)}
.cs-notice--bad{background:color-mix(in srgb,var(--cs-bad) 10%,transparent);color:var(--cs-bad);border-color:color-mix(in srgb,var(--cs-bad) 30%,transparent)}
.cs-notice--info{background:var(--cs-accent-soft);color:var(--cs-accent-text);border-color:color-mix(in srgb,var(--cs-accent) 25%,transparent)}
.cs-notice b{font-weight:650}
.cs-answer-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.cs-answer-head .cs-mono{font-weight:600;font-size:13px}
.cs-tierbadge{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--cs-sb-a),var(--cs-sb-b));color:#fff;font-size:30px;font-weight:700}
.cs-tierhead{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.cs-tierhead h3{margin:0;font-size:17px}
.cs-tierhead p{margin:2px 0 0;font-size:13px;color:var(--cs-muted)}
.cs-checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cs-checklist label{display:flex;gap:8px;align-items:center;padding:9px 12px;border:1px solid var(--cs-line,#d5daea);border-radius:10px;font-size:13px;cursor:pointer;background:var(--cs-card)}
.cs-checklist input{accent-color:var(--cs-accent)}
.cs-checklist label:has(input:checked){border-color:var(--cs-accent);background:var(--cs-accent-soft)}
.cs-empty-note{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:36px 20px;color:var(--cs-muted);font-size:13px}
.cs-empty-note i{font-size:26px;color:var(--cs-accent);opacity:.7}
.cs-empty-note b{color:var(--cs-ink);font-size:14px}
.cs-card + .cs-card,.cs-split + .cs-card,.cs-notice + .cs-card{margin-top:16px}

/* Text inputs match the selects */
.cs-field input:not([type=checkbox]):not([type=radio]):not([type=file]),.cs-field textarea{width:100%;box-sizing:border-box;height:40px;padding:0 12px;border:1px solid var(--cs-line-2,#cfd5ea);border-radius:10px;background:var(--cs-card);color:var(--cs-ink);font:inherit;font-size:13.5px;transition:border-color .15s,box-shadow .15s}
.cs-field textarea{height:auto;padding:10px 12px}
.cs-field input:focus,.cs-field textarea:focus{outline:none;border-color:var(--cs-accent);box-shadow:0 0 0 3px var(--cs-accent-soft)}
.cs-field input:disabled{background:var(--cs-accent-soft);color:var(--cs-muted)}
.cs-field input[type=file]{font-size:13px;color:var(--cs-ink-2)}
.cs-field label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:600;color:var(--cs-ink-2)}

/* Native selects and textareas styled like the kit, and sane field rhythm everywhere */
.cs-field select:not(.cs-select){width:100%;box-sizing:border-box;height:40px;padding:0 36px 0 12px;border:1px solid var(--cs-line-2,#cfd5ea);border-radius:10px;background:var(--cs-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23566082' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--cs-ink);font:inherit;font-size:13.5px;appearance:none;-webkit-appearance:none;cursor:pointer}
.cs-field select:focus{outline:none;border-color:var(--cs-accent);box-shadow:0 0 0 3px var(--cs-accent-soft)}
.cs-field textarea{width:100%;box-sizing:border-box;border:1px solid var(--cs-line-2,#cfd5ea);border-radius:10px;background:var(--cs-card);color:var(--cs-ink);font:inherit;font-size:13.5px;line-height:1.5;resize:vertical;min-height:96px}
.cs-field textarea::placeholder,.cs-field input::placeholder{color:var(--cs-muted);opacity:.7}
.cs-field + .cs-field{margin-top:16px}
.cs-field + .cs-btn,.cs-field + button,.cs-field + a.cs-btn{margin-top:18px}
.cs-form .cs-field + .cs-field{margin-top:0}
.cs-link-tile{display:block;text-decoration:none;transition:transform .15s,box-shadow .15s}
.cs-link-tile:hover{transform:translateY(-2px)}
.cs-sublist{margin:0;padding:0}
.cs-split > .cs-card + .cs-card,.cs-split > * + *{margin-top:0}


/* =====================================================================================
   BRAND: navy and gold, taken from the The Credit Score logo.
   Navy #05123D is the logo's ink. Gold #E0A84A is its accent block. Everything above that
   says "indigo" is superseded here (later rules win), so this block is the one to edit.
   - Navy: sidebar, portal bar, primary buttons, headings. Gold: the active item, focus
     highlights and the small accents. Status colours are unchanged.
   - Gold on navy 8.4:1, white on navy 17:1, navy on gold 8.4:1 (all pass WCAG AA).
   ===================================================================================== */
:root {
  --cs-accent: #12296e;
  --cs-accent-hi: #1d3a8f;
  --cs-accent-ink: #ffffff;
  --cs-accent-soft: #12296e1a;
  --cs-accent-text: #0f2360;
  --cs-gold: #e0a84a;
  --cs-gold-ink: #05123d;

  --cs-sb-a: #0b1d57;
  --cs-sb-b: #05123d;
  --cs-side-pill: #e0a84a;
  --cs-side-pill-ink: #05123d;

  --cs-bg: #edf0f6;
  --cs-wash-a: #cfd8ee;
  --cs-wash-wave: #d9e0f2d9;
  --cs-wash-b: #e4e3ef;
  --cs-wash-c: #e8edf6;
  --cs-wash-band: #d0d9f08c;
  --cs-card: #fbfcfe;
  --cs-ink: #0b1430;
  --cs-ink-2: #34405e;
  --cs-muted: #53607f;
  --cs-line: #0b143014;
  --cs-line-2: #0b143026;

  --cs-s1: #2a4aa8;
  --cs-s2: #e8836a;
  --cs-s3: #e0a84a;

  --cs-tile-aqua: #d6e0f5b8;
  --cs-tile-slate: #e1e6f0b8;
  --cs-night: #0b1d57;
}
[data-theme="dark"] {
  --cs-accent: #e0a84a;
  --cs-accent-hi: #ecbb68;
  --cs-accent-ink: #05123d;
  --cs-accent-soft: #e0a84a22;
  --cs-accent-text: #ecbb68;
  --cs-sb-a: #0b1d57;
  --cs-sb-b: #040c2a;
  --cs-side-pill: #e0a84a;
  --cs-side-pill-ink: #05123d;
  --cs-bg: #060b1f;
  --cs-card: #0d1530;
  --cs-card-2: #eceefa0b;
  --cs-glass: #0d1530f2;
  --cs-float: #0d1530eb;
  --cs-wash-a: #2a4aa833;
  --cs-wash-wave: #2a4aa81a;
  --cs-wash-b: #1d3a8f2b;
  --cs-wash-c: #0b1d571f;
  --cs-s1: #7f9cf2;
  --cs-s3: #e0a84a;
  --cs-tile-aqua: #2a4aa833;
  --cs-tile-slate: #1a2549a6;
  --cs-night: #0b1d57e0;
}

/* shell details */
.sb-i.on { background: var(--cs-gold); color: var(--cs-gold-ink); font-weight: 600; box-shadow: 0 6px 16px -8px #e0a84a99; }
.sb-i.on i { color: var(--cs-gold-ink); }
.sb-sec { color: #e0a84acc; letter-spacing: .12em; }
.sb-brand .mk { width: 40px; height: 40px; border-radius: 11px; object-fit: contain; box-shadow: 0 0 0 1px #ffffff26; background: #05123d; }
.sb-user .pic { background: linear-gradient(135deg, #f0c26e, #e0a84a); color: #05123d; }
.cs-nav__pill { filter: drop-shadow(0 6px 12px #05123d47); }
.cs-tabbar__pill { filter: drop-shadow(0 6px 12px #05123d50); }
.cs-paint { --cs-p-side: #0b1d57; --cs-p-pill: #e0a84a; --cs-p-ink: #0b1430; --cs-p-bg: #edf0f6; }
.cs-paint--dark { --cs-p-side: #040c2a; --cs-p-pill: #e0a84a; --cs-p-bg: #060b1f; }
.cs-ptop { background: linear-gradient(120deg, #05123d, #0b1d57); box-shadow: 0 1px 0 #e0a84a55; }
.cs-pnav a[aria-current="page"] { background: #e0a84a; color: #05123d; }
.cs-pbrand__mk { background: #05123d; color: #e0a84a; }

/* primary buttons: navy, gold on hover and focus ring; sign-in and portal included */
.cs-btn--primary { background: linear-gradient(135deg, #12296e, #0b1d57); color: #fff; box-shadow: 0 8px 18px -10px #05123d99; }
.cs-btn--primary:hover { background: linear-gradient(135deg, #1d3a8f, #12296e); }
[data-theme="dark"] .cs-btn--primary { background: #e0a84a; color: #05123d; }
.cs-field input:focus, .cs-field textarea:focus, .cs-field select:focus { border-color: var(--cs-gold); box-shadow: 0 0 0 3px #e0a84a33; }
.cs-a-mk { background: transparent; }

/* Demo-mode banner lives inside the content panel, so the panel's curved corner sits over the navy shell */
.main > .cs-demo-in { margin: -14px -26px 0 -22px; padding: 7px 14px !important; background: #fbf0d2 !important; border-bottom: 1px solid #ecd28a !important; }
.cs-demo-in + .cs-top { margin-top: 0; }
@media (max-width: 900px) { .main > .cs-demo-in { margin: -12px -16px 0; } }

/* =====================================================================================
   Refinement pass: meaningful colour, one primary action, softer navigation
   ===================================================================================== */

/* Risk scale: green, amber, orange-red, deep red. Never the brand navy. */
:root { --cs-rlow: #1f8a4c; --cs-rmed: #e0a020; --cs-rhigh: #d4572a; --cs-rcrit: #8f1230; }
[data-theme="dark"] { --cs-rlow: #4ac27e; --cs-rmed: #f0b84a; --cs-rhigh: #f0794a; --cs-rcrit: #e0526e; }

/* KPI tiles: neutral by default, tinted only when the number is a status */
.cs-kpi--slate { background: var(--cs-card); box-shadow: inset 0 0 0 1px var(--cs-line), var(--cs-shadow); }
.cs-kpi--aqua { background: var(--cs-tile-amber); }
.cs-kpi__label i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--cs-accent-soft); color: var(--cs-accent); font-size: 12px; margin-right: 8px; }
.cs-kpi--peach .cs-kpi__label i { background: #b3263a1f; color: var(--cs-bad); }
.cs-kpi--aqua .cs-kpi__label i { background: #96510a1f; color: var(--cs-warn); }
.cs-kpi--sage .cs-kpi__label i { background: #1f7a451f; color: var(--cs-good); }

/* One primary action per screen: the dark kit button becomes brand navy, not black */
.cs-btn--dark { background: linear-gradient(135deg, #12296e, #0b1d57); color: #fff; box-shadow: 0 8px 18px -10px #05123d99; }
.cs-btn--dark:hover { background: linear-gradient(135deg, #1d3a8f, #12296e); }
[data-theme="dark"] .cs-btn--dark { background: #e0a84a; color: #05123d; }
.cs-btn:not(.cs-btn--primary):not(.cs-btn--dark):not(.cs-btn--sm):hover { border-color: var(--cs-accent); }

/* Active menu item: a gold bar and soft glow instead of a solid gold block */
.sb-i.on { background: linear-gradient(90deg, #e0a84a2e, #e0a84a0f); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #e0a84a; }
.sb-i.on i { color: #e0a84a; }

/* Gold signature: a short rule under each page title and on card headers */
.cs-phead h1::after { content: ""; display: block; width: 34px; height: 3px; border-radius: 3px; background: #e0a84a; margin-top: 8px; }

/* =====================================================================================
   File upload fields, everywhere: a dashed drop area with a branded "Choose file" button.
   Targets every <input type="file">, so no markup changes are needed.
   ===================================================================================== */
input[type="file"], .cs-field input[type="file"], input[type="file"].cs-input {
  display: block; width: 100%; box-sizing: border-box; height: auto; min-height: 52px;
  padding: 8px 10px; border: 1.5px dashed color-mix(in srgb, var(--cs-accent) 38%, transparent);
  border-radius: 12px; background: var(--cs-accent-soft); color: var(--cs-muted);
  font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
input[type="file"]:hover { border-color: var(--cs-accent); background: color-mix(in srgb, var(--cs-accent) 14%, transparent); }
input[type="file"]:focus-visible { outline: none; border-color: var(--cs-gold, #e0a84a); box-shadow: 0 0 0 3px #e0a84a33; }
input[type="file"]::file-selector-button {
  margin: 0 12px 0 0; padding: 9px 16px; border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(135deg, #12296e, #0b1d57); color: #fff;
  font: inherit; font-size: 13px; font-weight: 650; letter-spacing: .01em;
  box-shadow: 0 6px 14px -8px #05123d99; transition: background .15s, transform .15s;
}
input[type="file"]::file-selector-button:hover { background: linear-gradient(135deg, #1d3a8f, #12296e); }
input[type="file"]:active::file-selector-button { transform: translateY(1px); }
[data-theme="dark"] input[type="file"]::file-selector-button { background: #e0a84a; color: #05123d; }
input[type="file"]:disabled { opacity: .55; cursor: not-allowed; }