/* =====================================================================
   Discover Ghana — Investor Portal
   Self-contained design system. No external CSS framework required.
   ===================================================================== */

/* ---- 1. Design tokens --------------------------------------------- */
:root {
  /* Ghana national palette */
  --gh-green:        #006B3F;
  --gh-green-dark:   #004D2D;
  --gh-green-darker: #003820;
  --gh-yellow:       #FCD116;
  --gh-yellow-dark:  #E5BD0C;
  --gh-red:          #CE1126;
  --gh-red-dark:     #A50D1F;

  /* Surfaces */
  --dg-cream:        #FAF6EE;
  --dg-cream-2:      #F3EEDF;
  --dg-paper:        #FFFFFF;
  --dg-ink:          #161616;
  --dg-ink-2:        #2D2D2D;
  --dg-muted:        #525252;
  --dg-muted-2:      #6F6F6F;
  --dg-border:       #E0DBCB;
  --dg-border-soft:  #ECE6D2;

  /* Field & strong-border tokens (Carbon: filled fields, emphasised edge) */
  --dg-field:        #F4EFE3;   /* subtle field fill on white surfaces */
  --dg-field-hover:  #ECE5D4;
  --dg-border-strong:#B7B099;   /* input bottom edge / strong dividers */

  /* Carbon-token aliases so existing inline `var(--cds-*)` usages still resolve */
  --cds-text-primary:       var(--dg-ink);
  --cds-text-secondary:     var(--dg-muted);
  --cds-border-subtle-01:   var(--dg-border);
  --cds-layer-01:           var(--dg-paper);
  --cds-layer-02:           var(--dg-cream-2);
  --cds-link-primary:       var(--gh-green);
  --cds-focus:              var(--gh-green);   /* high-contrast focus on light surfaces */

  /* Accent aliases — some templates reference the --dg-* accent names */
  --dg-green:        var(--gh-green);
  --dg-yellow:       var(--gh-yellow);
  --dg-red:          var(--gh-red);
  --gh-black:        #0B0B0B;   /* Black Star of the flag */

  /* Motion — Carbon productive easing & durations (one rhythm everywhere) */
  --dg-ease:      cubic-bezier(.2, 0, .38, .9);
  --dg-dur-fast:  70ms;
  --dg-dur:       110ms;
  --dg-dur-slow:  150ms;

  /* Spacing scale (Carbon-compatible) */
  --cds-spacing-01: .125rem;
  --cds-spacing-02: .25rem;
  --cds-spacing-03: .5rem;
  --cds-spacing-04: .75rem;
  --cds-spacing-05: 1rem;
  --cds-spacing-06: 1.5rem;
  --cds-spacing-07: 2rem;
  --cds-spacing-08: 2.5rem;
  --cds-spacing-09: 3rem;
  --cds-spacing-10: 4rem;
  --cds-spacing-11: 5rem;
  --cds-spacing-12: 6rem;
  --cds-spacing-13: 10rem;

  /* Typography */
  --dg-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --dg-serif: "IBM Plex Serif", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --dg-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Shadows */
  --dg-shadow-sm: 0 1px 2px rgba(13, 30, 20, .05);
  --dg-shadow-md: 0 4px 14px rgba(13, 30, 20, .07), 0 1px 3px rgba(13, 30, 20, .04);
  --dg-shadow-lg: 0 12px 36px rgba(13, 30, 20, .10), 0 2px 6px rgba(13, 30, 20, .04);

  /* Radii — Carbon is near-square; keep a single hair of softness */
  --dg-r-sm: 0px;
  --dg-r:    2px;
  --dg-r-lg: 3px;
}

/* ---- 2. Reset & base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--dg-sans); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--dg-cream);
  color: var(--dg-ink);
  font-family: var(--dg-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg { max-width: 100%; vertical-align: middle; }
h1, h2, h3, h4 { font-family: var(--dg-serif); font-weight: 500; color: var(--dg-ink); margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; }
h2 { font-size: 1.5rem; line-height: 1.25; }
h3 { font-size: 1.125rem; line-height: 1.3; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p  { margin: 0; }
a  { color: var(--gh-green); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
code { font-family: var(--dg-mono); font-size: .85em; background: var(--dg-cream-2); padding: 1px 6px; border-radius: 3px; }
hr { border: 0; border-top: 1px solid var(--dg-border); margin: var(--cds-spacing-06) 0; }
.dg-muted   { color: var(--dg-muted); }
.dg-empty   { color: var(--dg-muted); padding: var(--cds-spacing-06) 0; }

/* Focus visibility (WCAG 2.4.7) — one consistent, high-contrast ring.
   Green reads on the light cream/white surfaces; dark chrome flips to gold. */
:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}
.dg-header *:focus-visible,
.dg-footer *:focus-visible,
.dg-auth__hero *:focus-visible {
  outline-color: var(--gh-yellow);
}

/* ---- 3. Main layout / page chrome --------------------------------- */
.dg-main { flex: 1 0 auto; }

.dg-flag-band {
  display: flex; height: 6px; width: 100%;
}
.dg-flag-band span { flex: 1; display: block; }
.dg-flag-band span:nth-child(1) { background: var(--gh-green); }
.dg-flag-band span:nth-child(2) { background: var(--gh-yellow); }
.dg-flag-band span:nth-child(3) { background: var(--gh-red); }

.dg-flash-stack { padding: var(--cds-spacing-05) var(--cds-spacing-06); max-width: 80rem; margin: 0 auto; }

/* ---- 4. Header ---------------------------------------------------- */
.dg-header {
  background: var(--gh-green-darker);
  color: #fff;
  border-bottom: 4px solid var(--gh-yellow);
  position: relative;
  z-index: 50;
}
.dg-header__inner {
  display: flex; align-items: center;
  max-width: 90rem; margin: 0 auto;
  padding: 0 var(--cds-spacing-06);
  min-height: 56px;
  gap: var(--cds-spacing-07);
}
.dg-header__brand {
  display: flex; align-items: center; gap: .75rem;
  color: #fff; font-family: var(--dg-serif); font-size: 1.125rem; font-weight: 500;
}
.dg-header__brand:hover { text-decoration: none; }
.dg-header__brand-prefix { color: rgba(255,255,255,.7); font-weight: 400; margin-right: 4px; }
.dg-header__brand-name   { color: #fff; }

.dg-header__nav { flex: 1; }
.dg-header__nav ul { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; }
.dg-header__nav a {
  display: inline-block;
  padding: 18px 16px;
  color: rgba(255,255,255,.78);
  font-size: .875rem; font-weight: 400;
  border-bottom: 3px solid transparent;   /* Carbon header active indicator */
  transition: color var(--dg-dur) var(--dg-ease), border-color var(--dg-dur) var(--dg-ease), background var(--dg-dur) var(--dg-ease);
}
.dg-header__nav a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.08); }
.dg-header__nav a.is-current { color: #fff; font-weight: 500; border-bottom-color: var(--gh-yellow); }

.dg-header__actions { display: flex; align-items: center; gap: 8px; }
.dg-bell, .dg-user {
  position: relative;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,.85);
  padding: 10px 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit;
  border-radius: 4px;
}
.dg-bell:hover, .dg-user:hover { background: rgba(255,255,255,.1); color: #fff; }
.dg-bell__count {
  position: absolute; top: 4px; right: 4px;
  background: var(--gh-red); color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 1px 5px; border-radius: 10px;
  min-width: 16px; text-align: center;
}
.dg-user__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gh-yellow); color: var(--gh-green-darker);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
}
.dg-user__name { font-size: .875rem; }
@media (max-width: 720px) { .dg-user__name { display: none; } }

/* ---- 5. Slide-in side panels ------------------------------------- */
.dg-panel {
  position: fixed; top: 60px; right: 16px;
  width: 360px; max-width: calc(100vw - 32px);
  background: var(--dg-paper);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-r-lg);
  box-shadow: var(--dg-shadow-lg);
  z-index: 100;
  overflow: hidden;
}
.dg-panel[hidden] { display: none; }
.dg-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
  border-bottom: 1px solid var(--dg-border-soft);
  background: var(--dg-cream-2);
}
.dg-panel__head h2 { font-family: var(--dg-serif); font-size: 1rem; font-weight: 500; color: var(--dg-ink); }
.dg-panel__list, .dg-panel__menu {
  list-style: none; margin: 0; padding: 0;
  max-height: 60vh; overflow-y: auto;
}
.dg-panel__item, .dg-panel__menu li {
  border-bottom: 1px solid var(--dg-border-soft);
}
.dg-panel__item a, .dg-panel__menu a {
  display: block; padding: var(--cds-spacing-05) var(--cds-spacing-06);
  color: var(--dg-ink);
}
.dg-panel__item a:hover, .dg-panel__menu a:hover { background: var(--dg-cream); text-decoration: none; }
.dg-panel__item strong { display: block; font-size: .9375rem; margin-bottom: 2px; }
.dg-panel__item span { display: block; color: var(--dg-muted); font-size: .8125rem; margin-bottom: 4px; }
.dg-panel__item time { font-size: .75rem; color: var(--dg-muted-2); }
.dg-panel__item--unread { background: linear-gradient(90deg, rgba(0,107,63,.06), transparent 30%); border-left: 3px solid var(--gh-green); }
.dg-panel__empty { padding: var(--cds-spacing-07) var(--cds-spacing-06); color: var(--dg-muted); text-align: center; }
.dg-panel__foot { padding: var(--cds-spacing-04) var(--cds-spacing-06); border-top: 1px solid var(--dg-border-soft); background: var(--dg-cream-2); text-align: center; font-size: .875rem; }

/* ---- 6. Grid system ---------------------------------------------- */
.cds--grid { max-width: 90rem; margin: 0 auto; padding: 0 var(--cds-spacing-06); }
.cds--row  { display: flex; flex-wrap: wrap; margin: 0 calc(var(--cds-spacing-05) * -1); }
[class*="cds--col-"] {
  padding: 0 var(--cds-spacing-05);
  margin-bottom: var(--cds-spacing-06);
  flex: 0 0 100%; max-width: 100%;
}
/* 16-col large screens */
@media (min-width: 1056px) {
  .cds--col-lg-2  { flex: 0 0 12.5%;  max-width: 12.5%;  }
  .cds--col-lg-3  { flex: 0 0 18.75%; max-width: 18.75%; }
  .cds--col-lg-4  { flex: 0 0 25%;    max-width: 25%;    }
  .cds--col-lg-5  { flex: 0 0 31.25%; max-width: 31.25%; }
  .cds--col-lg-6  { flex: 0 0 37.5%;  max-width: 37.5%;  }
  .cds--col-lg-8  { flex: 0 0 50%;    max-width: 50%;    }
  .cds--col-lg-10 { flex: 0 0 62.5%;  max-width: 62.5%;  }
  .cds--col-lg-12 { flex: 0 0 75%;    max-width: 75%;    }
  .cds--col-lg-16 { flex: 0 0 100%;   max-width: 100%;   }
}
/* 8-col medium */
@media (min-width: 672px) and (max-width: 1055px) {
  .cds--col-md-2 { flex: 0 0 25%;  max-width: 25%;  }
  .cds--col-md-4 { flex: 0 0 50%;  max-width: 50%;  }
  .cds--col-md-6 { flex: 0 0 75%;  max-width: 75%;  }
  .cds--col-md-8 { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 671px) {
  .cds--col-sm-2 { flex: 0 0 50%;  max-width: 50%;  }
  .cds--col-sm-4 { flex: 0 0 100%; max-width: 100%; }
}

/* ---- 7. Page head & surfaces ------------------------------------- */
.dg-page-head {
  padding: var(--cds-spacing-09) 0 var(--cds-spacing-06);
  border-bottom: 1px solid var(--dg-border-soft);
  background:
    radial-gradient(circle at 90% 20%, rgba(252,209,22,.08), transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(0,107,63,.06), transparent 60%),
    var(--dg-cream);
}
.dg-page-head h1 { margin-bottom: var(--cds-spacing-04); }
.dg-page-head__eyebrow {
  font-family: var(--dg-mono); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gh-green); font-weight: 500;
  margin-bottom: var(--cds-spacing-04);
}
.dg-page-head__sub { color: var(--dg-muted); font-size: 1.0625rem; max-width: 50rem; }

.dg-surface {
  background: var(--dg-paper);
  border: 1px solid var(--dg-border-soft);
  border-radius: var(--dg-r-lg);
  padding: var(--cds-spacing-07);
  margin-bottom: var(--cds-spacing-06);
  box-shadow: var(--dg-shadow-sm);
}
.dg-surface h2 { font-family: var(--dg-serif); font-size: 1.25rem; }
.dg-surface__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--cds-spacing-05); gap: var(--cds-spacing-04);
}

/* ---- 8. Buttons --------------------------------------------------- */
.cds--btn, .dg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--dg-sans); font-size: .875rem; font-weight: 500;
  line-height: 1.29; letter-spacing: .01em;
  padding: 12px 18px;
  min-height: 48px;                 /* Carbon large field height */
  border-radius: var(--dg-r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dg-dur) var(--dg-ease),
              border-color var(--dg-dur) var(--dg-ease),
              color var(--dg-dur) var(--dg-ease);
  text-decoration: none;
}
.cds--btn:hover, .dg-btn:hover { text-decoration: none; }
.cds--btn:disabled, .dg-btn:disabled { opacity: .5; cursor: not-allowed; }
.cds--btn--sm, .dg-btn--sm { padding: 8px 14px; min-height: 40px; font-size: .8125rem; }

/* Primary — Ghana green */
.cds--btn--primary {
  background: var(--gh-green); color: #fff; border-color: var(--gh-green);
}
.cds--btn--primary:hover  { background: var(--gh-green-dark); border-color: var(--gh-green-dark); color: #fff; }
.cds--btn--primary:active { background: var(--gh-green-darker); }

/* Secondary — quieter, used for status changes etc */
.cds--btn--secondary {
  background: var(--dg-ink); color: #fff; border-color: var(--dg-ink);
}
.cds--btn--secondary:hover { background: var(--dg-ink-2); color: #fff; }

/* Tertiary — outlined */
.cds--btn--tertiary {
  background: transparent; color: var(--gh-green); border-color: var(--gh-green);
}
.cds--btn--tertiary:hover { background: var(--gh-green); color: #fff; }

/* Ghost — minimal */
.cds--btn--ghost, .dg-btn--ghost {
  background: transparent; color: var(--gh-green); border-color: transparent;
  padding-left: 12px; padding-right: 12px;
}
.cds--btn--ghost:hover, .dg-btn--ghost:hover { background: rgba(0,107,63,.08); color: var(--gh-green-dark); }

/* Danger variants — Ghana red */
.cds--btn--danger {
  background: var(--gh-red); color: #fff; border-color: var(--gh-red);
}
.cds--btn--danger:hover { background: var(--gh-red-dark); border-color: var(--gh-red-dark); color: #fff; }
.cds--btn--danger--ghost {
  background: transparent; color: var(--gh-red); border-color: transparent;
  padding-left: 12px; padding-right: 12px;
}
.cds--btn--danger--ghost:hover { background: rgba(206,17,38,.08); color: var(--gh-red-dark); }

.cds--link {
  color: var(--gh-green); font-weight: 500;
  border-bottom: 1px solid rgba(0,107,63,.35);
}
.cds--link:hover { text-decoration: none; border-bottom-color: var(--gh-green); }

/* ---- 9. Form controls -------------------------------------------- */
.cds--form-item { display: block; }
.cds--label {
  display: block; font-size: .75rem; font-weight: 500;
  color: var(--dg-muted); margin-bottom: 6px; letter-spacing: .02em;
}
.cds--text-input, .cds--text-area, .cds--select-input {
  display: block; width: 100%;
  background: var(--dg-field); color: var(--dg-ink);
  border: none;
  border-bottom: 1px solid var(--dg-border-strong);   /* Carbon: filled field, single emphasised edge */
  border-radius: 0;
  padding: 12px 14px; min-height: 44px;
  font-family: var(--dg-sans); font-size: .9375rem;
  transition: background var(--dg-dur) var(--dg-ease), border-color var(--dg-dur) var(--dg-ease);
}
.cds--text-input::placeholder, .cds--text-area::placeholder { color: var(--dg-muted-2); }
.cds--text-input:hover, .cds--text-area:hover, .cds--select-input:hover {
  background: var(--dg-field-hover); border-bottom-color: var(--dg-ink);
}
.cds--text-input:focus, .cds--text-area:focus, .cds--select-input:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
  border-bottom-color: var(--cds-focus);
  background: var(--dg-field);
}
.cds--text-area { min-height: 80px; font-family: inherit; resize: vertical; }
.cds--select { position: relative; }
.cds--select-input { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23525252' d='M6 9L1 4h10z'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; }

.cds--checkbox { width: 18px; height: 18px; accent-color: var(--gh-green); }
.cds--checkbox-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .9375rem; }
.cds--checkbox-label-text { color: var(--dg-ink); }

/* ---- 10. Tables --------------------------------------------------- */
.cds--data-table {
  width: 100%; border-collapse: collapse;
  background: var(--dg-paper);
  font-size: .875rem;
  border-radius: var(--dg-r); overflow: hidden;
  border: 1px solid var(--dg-border-soft);
}
.cds--data-table thead {
  background: var(--dg-cream-2);
}
.cds--data-table th {
  text-align: left; font-weight: 600; font-size: .8125rem;
  letter-spacing: 0; text-transform: none; color: var(--dg-ink);
  padding: 14px; border-bottom: 1px solid var(--dg-border); white-space: nowrap;
}
.cds--data-table td {
  padding: 14px; border-bottom: 1px solid var(--dg-border-soft);
  vertical-align: middle; font-variant-numeric: tabular-nums;
}
.cds--data-table tbody tr:last-child td { border-bottom: 0; }
.cds--data-table tbody tr:hover { background: var(--dg-cream); }
.cds--data-table--sm th { padding: 10px 12px; }
.cds--data-table--sm td { padding: 10px 12px; }

/* ---- 11. Tags ----------------------------------------------------- */
.cds--tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font-size: .75rem; font-weight: 500;
  border-radius: 10px;
  line-height: 1.4;
  white-space: nowrap;
}
.cds--tag--green     { background: rgba(0,107,63,.10);  color: var(--gh-green-darker); }
.cds--tag--red       { background: rgba(206,17,38,.10); color: var(--gh-red-dark); }
.cds--tag--yellow    { background: rgba(252,209,22,.20); color: #6B5A00; }
.cds--tag--blue      { background: #E0EAF8; color: #1F3A6A; }
.cds--tag--teal      { background: #D7EEF0; color: #0F4F5C; }
.cds--tag--purple    { background: #ECE3F5; color: #4F2D7A; }
.cds--tag--magenta   { background: #F8E3F0; color: #7A1F60; }
.cds--tag--cool-gray { background: #E8E8EE; color: #393952; }
.cds--tag--warm-gray { background: #ECE6D8; color: #5C4D2A; }

/* ---- 12. Inline notifications ------------------------------------ */
.cds--inline-notification {
  display: flex;
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
  border-radius: var(--dg-r);
  border-left: 4px solid;
  background: var(--dg-paper);
  margin-bottom: var(--cds-spacing-04);
  box-shadow: var(--dg-shadow-sm);
}
.cds--inline-notification--error    { border-color: var(--gh-red);    background: #fff5f6; }
.cds--inline-notification--success  { border-color: var(--gh-green);  background: #f3faf6; }
.cds--inline-notification--info     { border-color: #2A6FCB;          background: #f4f8ff; }
.cds--inline-notification--warning  { border-color: var(--gh-yellow); background: #fffdf2; }
.cds--inline-notification__title    { font-weight: 600; margin: 0 0 4px 0; font-size: .9375rem; }
.cds--inline-notification__subtitle { color: var(--dg-muted); font-size: .875rem; }

/* ---- 13. Stats & tiles ------------------------------------------- */
.dg-stat {
  background: var(--dg-paper);
  border: 1px solid var(--dg-border-soft);
  border-radius: var(--dg-r-lg);
  padding: var(--cds-spacing-06);
  position: relative; overflow: hidden;
  transition: border-color var(--dg-dur) var(--dg-ease), box-shadow var(--dg-dur) var(--dg-ease);
}
.dg-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--gh-green);
}
/* Stable hover (no layout shift): edge darkens, faint elevation appears */
.dg-stat:hover { border-color: var(--dg-border-strong); box-shadow: var(--dg-shadow-sm); }
.dg-stat--yellow::before { background: var(--gh-yellow); }
.dg-stat--red::before    { background: var(--gh-red);    }
.dg-stat__label, .dg-stat__sub {
  font-family: var(--dg-mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dg-muted); margin-bottom: var(--cds-spacing-03);
}
.dg-stat__sub { margin-bottom: 0; margin-top: var(--cds-spacing-03); }
.dg-stat__value, .dg-stat__num {
  font-family: var(--dg-serif); font-size: 2.25rem; line-height: 1; color: var(--dg-ink); font-weight: 500;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

/* Application tile (used on dashboard & list screens) */
.dg-tile {
  display: block;
  background: var(--dg-paper);
  border: 1px solid var(--dg-border-soft);
  border-radius: var(--dg-r-lg);
  padding: var(--cds-spacing-07);
  color: var(--dg-ink); text-decoration: none;
  height: 100%;
  position: relative; overflow: hidden;
  transition: border-color var(--dg-dur) var(--dg-ease), box-shadow var(--dg-dur) var(--dg-ease);
}
.dg-tile::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; background: var(--gh-green); opacity: .9;
  transition: width var(--dg-dur) var(--dg-ease);
}
.dg-tile--yellow::after { background: var(--gh-yellow); }
.dg-tile--red::after    { background: var(--gh-red); }
/* Clickable tiles get a Carbon affordance: edge darkens, accent grows — no jump */
.dg-tile:hover { border-color: var(--dg-border-strong); box-shadow: var(--dg-shadow-sm); text-decoration: none; }
a.dg-tile:hover::after { width: 6px; }
.dg-tile__eyebrow { font-family: var(--dg-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gh-green); margin-bottom: var(--cds-spacing-04); }
.dg-tile h3 { margin-bottom: var(--cds-spacing-03); font-family: var(--dg-serif); font-size: 1.25rem; font-weight: 500; }
.dg-tile p  { color: var(--dg-muted); font-size: .9375rem; }

/* ---- 14. Auth / homepage hero ------------------------------------ */
.dg-auth {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: calc(100vh - 6px);
}
@media (max-width: 900px) { .dg-auth { grid-template-columns: 1fr; min-height: 0; } }

.dg-auth__hero {
  background:
    radial-gradient(circle at 80% 10%, rgba(252,209,22,.18), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(206,17,38,.12), transparent 55%),
    linear-gradient(135deg, var(--gh-green-darker) 0%, var(--gh-green) 100%);
  color: #fff;
  padding: clamp(2rem, 6vw, 5rem);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.dg-auth__hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 24px, rgba(255,255,255,.025) 24px 25px);
  pointer-events: none;
}
.dg-auth__hero > * { position: relative; z-index: 1; }
.dg-auth__hero h1 {
  color: #fff; font-family: var(--dg-serif);
  font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.05;
  margin-top: var(--cds-spacing-06);
}
.dg-auth__hero .dg-page-head__eyebrow { color: var(--gh-yellow); }
.dg-quote { font-size: 1.0625rem; line-height: 1.55; max-width: 32rem; color: rgba(255,255,255,.85); font-family: var(--dg-serif); font-weight: 400; }

.dg-auth__form {
  background: var(--dg-paper);
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.dg-auth__form h2 { font-family: var(--dg-serif); font-size: 1.75rem; }

/* Hero proof points (homepage) */
.dg-hero-proof {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--cds-spacing-05);
  margin-top: var(--cds-spacing-09);
  max-width: 32rem;
}
.dg-hero-proof__item {
  border-left: 2px solid rgba(252,209,22,.5);
  padding: 4px 0 4px 14px;
}
.dg-hero-proof__num   { font-family: var(--dg-serif); font-size: 1.5rem; font-weight: 500; color: #fff; line-height: 1.1; }
.dg-hero-proof__label { font-size: .8125rem; color: rgba(255,255,255,.75); margin-top: 2px; }

/* ---- 15. Footer --------------------------------------------------- */
.dg-footer {
  background: var(--gh-green-darker); color: rgba(255,255,255,.75);
  padding: var(--cds-spacing-09) 0 var(--cds-spacing-07);
  margin-top: var(--cds-spacing-10);
  border-top: 4px solid var(--gh-yellow);
}
.dg-footer .cds--grid { max-width: 90rem; }
.dg-footer__brand { font-family: var(--dg-serif); color: #fff; font-size: 1.0625rem; margin-bottom: 4px; }
.dg-footer a { color: rgba(255,255,255,.85); }
.dg-footer a:hover { color: #fff; text-decoration: underline; }
.dg-footer .dg-muted { color: rgba(255,255,255,.6); }

/* ---- 16. Misc utilities used inline by pages --------------------- */
.dg-bell, .dg-user, .cds--btn { outline-offset: 2px; }
.cds--type-heading-04 { font-size: 1.75rem; font-family: var(--dg-serif); font-weight: 500; line-height: 1.2; }
.cds--type-heading-03 { font-size: 1.25rem; font-family: var(--dg-serif); font-weight: 500; }

/* "deny" panel for marketplace KYC gate */
.dg-locked {
  text-align: center; padding: var(--cds-spacing-10) var(--cds-spacing-07);
  background: linear-gradient(180deg, var(--dg-paper) 0%, var(--dg-cream-2) 100%);
  border: 1px dashed var(--dg-border);
  border-radius: var(--dg-r-lg);
}
.dg-locked svg { color: var(--gh-green); margin-bottom: var(--cds-spacing-05); }

/* Compact responsive tweaks */
@media (max-width: 720px) {
  .dg-header__nav { display: none; }
  .dg-header__nav.is-open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--gh-green-darker); border-bottom: 4px solid var(--gh-yellow);
    box-shadow: var(--dg-shadow-lg);
  }
  .dg-header__nav.is-open ul { flex-direction: column; }
  .dg-header__nav.is-open a { display: block; padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .dg-surface { padding: var(--cds-spacing-06); }
  .dg-page-head { padding-top: var(--cds-spacing-07); }
}

/* =====================================================================
   17. National identity layer
   Chrome that makes the portal read as an official Government of Ghana
   service: official identifier banner, accessible skip link, refined
   masthead, working mobile navigation, breadcrumbs. Carbon structure,
   Ghana accents throughout.
   ===================================================================== */

/* ---- 17.1 Skip link (WCAG 2.4.1 — expected of public-sector sites) */
.dg-skip-link {
  position: absolute; left: 8px; top: -64px; z-index: 200;
  background: var(--gh-green-darker); color: #fff;
  padding: 10px 16px; font-size: .875rem; font-weight: 500;
  border: 2px solid var(--gh-yellow); border-radius: 0 0 var(--dg-r) var(--dg-r);
  transition: top .15s ease;
}
.dg-skip-link:focus { top: 0; text-decoration: none; outline: none; }

/* ---- 17.2 Official government identifier banner ------------------ */
.dg-gov-banner {
  background: var(--dg-cream-2);
  border-bottom: 1px solid var(--dg-border);
  color: var(--dg-ink-2);
  font-size: .8125rem;
}
.dg-gov-banner__inner {
  max-width: 90rem; margin: 0 auto;
  padding: 7px var(--cds-spacing-06);
  display: flex; align-items: center; gap: 10px;
}
.dg-gov-banner__flag {
  width: 21px; height: 14px; border-radius: 2px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.dg-gov-banner__text { font-weight: 400; }
.dg-gov-banner__btn {
  background: none; border: 0; cursor: pointer;
  color: var(--gh-green-dark); font-family: inherit; font-size: .8125rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px; border-radius: 3px;
}
.dg-gov-banner__btn:hover { text-decoration: underline; background: rgba(0,107,63,.06); }
.dg-gov-banner__btn svg { transition: transform .15s ease; }
.dg-gov-banner__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dg-gov-banner__detail {
  max-width: 90rem; margin: 0 auto;
  padding: var(--cds-spacing-03) var(--cds-spacing-06) var(--cds-spacing-05);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--cds-spacing-07);
}
.dg-gov-banner__detail[hidden] { display: none; }
.dg-gov-banner__col { display: flex; gap: 10px; align-items: flex-start; max-width: 40rem; }
.dg-gov-banner__col svg { flex-shrink: 0; color: var(--gh-green); margin-top: 1px; }
.dg-gov-banner__col p { font-size: .8125rem; line-height: 1.5; color: var(--dg-muted); }
.dg-gov-banner__col strong { color: var(--dg-ink); display: block; margin-bottom: 2px; }
.dg-gov-banner__col code { background: rgba(0,107,63,.08); color: var(--gh-green-dark); }
@media (max-width: 671px) {
  .dg-gov-banner__text { display: none; }   /* keep the bar to one compact line on phones */
  .dg-gov-banner__btn { margin-left: 0; }
  .dg-gov-banner__detail { grid-template-columns: 1fr; gap: var(--cds-spacing-05); }
}

/* ---- 17.3 Masthead — official wordmark & crest ------------------- */
.dg-header__crest-img {
  display: block; width: 40px; height: 40px;
  object-fit: contain;
}
.dg-header__wordmark { display: flex; flex-direction: column; line-height: 1.08; }
.dg-header__overline {
  font-family: var(--dg-mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gh-yellow); font-weight: 500;
}
.dg-header__title { font-family: var(--dg-serif); font-size: 1.125rem; font-weight: 500; }

/* ---- 17.4 Mobile navigation toggle ------------------------------- */
.dg-nav-toggle {
  display: none;
  background: transparent; border: 0; cursor: pointer; color: #fff;
  padding: 10px; border-radius: 4px;
  align-items: center; justify-content: center;
}
.dg-nav-toggle:hover { background: rgba(255,255,255,.12); }
@media (max-width: 720px) {
  .dg-nav-toggle { display: inline-flex; }
}

/* ---- 17.5 Breadcrumb — wayfinding on deep pages ------------------ */
.dg-breadcrumb { margin-bottom: var(--cds-spacing-05); }
.dg-breadcrumb ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin: 0; padding: 0; font-size: .8125rem;
}
.dg-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; color: var(--dg-muted); }
.dg-breadcrumb li:not(:last-child)::after { content: "›"; color: var(--dg-muted-2); }
.dg-breadcrumb a { color: var(--gh-green); font-weight: 500; }
.dg-breadcrumb a:hover { text-decoration: underline; }
.dg-breadcrumb [aria-current="page"] { color: var(--dg-muted); }

/* ---- 17.6 Layout helpers referenced by templates ----------------- */
.dg-spacer     { height: var(--cds-spacing-09); }
.dg-spacer--sm { height: var(--cds-spacing-06); }
.dg-row-gap    { align-items: stretch; }   /* equal-height tiles across a row */

/* ---- 17.7 Stat delta + tile CTA (previously undefined) ----------- */
.dg-stat__delta {
  font-size: .8125rem; color: var(--dg-muted);
  margin-top: var(--cds-spacing-03); line-height: 1.4;
}
.dg-tile { display: flex; flex-direction: column; }
.dg-tile > .cds--btn { align-self: flex-start; }
.dg-tile__cta {
  align-self: flex-start; margin-top: auto; padding-top: var(--cds-spacing-05);
  color: var(--gh-green); font-weight: 600; font-size: .875rem;
  display: inline-flex; align-items: center; gap: 4px;
  transition: gap .15s ease;
}
.dg-tile:hover .dg-tile__cta { gap: 9px; }

/* Application icon chip — colour-matched to each tile's accent */
.dg-tile__icon {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--dg-r);
  background: rgba(0,107,63,.10); color: var(--gh-green);
  margin-bottom: var(--cds-spacing-05);
}
.dg-tile__icon svg { width: 26px; height: 26px; }
.dg-tile--yellow .dg-tile__icon { background: rgba(252,209,22,.22); color: #8A6D00; }
.dg-tile--red .dg-tile__icon    { background: rgba(206,17,38,.10);  color: var(--gh-red); }

/* ---- 17.8 Field & table sizes referenced by templates ------------ */
.cds--text-input--sm { padding: 7px 12px; min-height: 36px; font-size: .875rem; }   /* Carbon sm field */
.cds--text-input--md { padding: 9px 13px; min-height: 40px; }                        /* Carbon md field */
.cds--data-table--md th,
.cds--data-table--md td { padding: 13px 16px; }

/* ---- 17.9 Reduced-motion (accessibility) ------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}