/* ==========================================================================
   Member Dashboard — CoopEast
   Standalone app surface. Light/dark themes via [data-theme] on <body>.
   1. Theme tokens + base
   2. Sidebar
   3. Top bar
   4. Content grid + cards
   5. Hero, summary cards, charts, goals
   6. Transactions table
   7. Quick actions, announcements, profile
   8. Mobile (off-canvas sidebar, bottom nav)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme tokens + base
   -------------------------------------------------------------------------- */

body.dash {
  --d-bg: #f7f9fb;
  --d-card: #ffffff;
  --d-ink: #111827;
  --d-mut: #6b7280;
  --d-line: #e5e7eb;
  --d-green: var(--clr-primary);
  --d-green-deep: var(--clr-primary-deep);
  --d-green-soft: #2dbe60;
  --d-tint: var(--clr-primary-tint);
  --d-gold: var(--clr-accent);
  --d-danger: #dc2626;
  --d-success: #16a34a;
  --d-shadow:
    0 1px 2px rgba(17, 24, 39, 0.04),
    0 8px 24px -16px rgba(17, 24, 39, 0.1);
  --d-shadow-lift:
    0 2px 4px rgba(17, 24, 39, 0.05),
    0 16px 40px -20px rgba(17, 24, 39, 0.18);
  --dsb-w: 16.5rem;

  font-family: var(--ff-base);
  background-color: var(--d-bg);
  color: var(--d-ink);
}

body.dash[data-theme="dark"] {
  --d-bg: #0e1512;
  --d-card: #17211c;
  --d-ink: #e8ede9;
  --d-mut: #94a39b;
  --d-line: rgba(255, 255, 255, 0.08);
  --d-tint: rgba(45, 190, 96, 0.12);
  --d-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 8px 24px -16px rgba(0, 0, 0, 0.5);
  --d-shadow-lift:
    0 2px 4px rgba(0, 0, 0, 0.35),
    0 16px 40px -20px rgba(0, 0, 0, 0.6);
}

.dash * {
  transition-property: background-color, border-color, color;
  transition-duration: 200ms;
}

.dcard {
  background-color: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: 1rem;
  box-shadow: var(--d-shadow);
}

/* Entry animation — cards fade up in sequence */
@media (prefers-reduced-motion: no-preference) {
  .dash [data-in] {
    opacity: 0;
    transform: translateY(0.875rem);
    animation: dash-in 560ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }

  .dash [data-in="1"] { animation-delay: 60ms; }
  .dash [data-in="2"] { animation-delay: 120ms; }
  .dash [data-in="3"] { animation-delay: 180ms; }
  .dash [data-in="4"] { animation-delay: 240ms; }
  .dash [data-in="5"] { animation-delay: 300ms; }
  .dash [data-in="6"] { animation-delay: 360ms; }
}

@keyframes dash-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.dash :focus-visible {
  outline: 2px solid var(--d-green-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   2. Sidebar
   -------------------------------------------------------------------------- */

.dsb {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: var(--dsb-w);
  background-color: var(--d-card);
  border-right: 1px solid var(--d-line);
  transition: width 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dsb__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1rem 1rem 1.25rem;
  border-bottom: 1px solid var(--d-line);
  min-height: 4rem;
}

.dsb__logo {
  display: inline-flex;
  overflow: hidden;
}

.dsb__logo img {
  width: 6.75rem;
  height: auto;
}

body.dash[data-theme="dark"] .dsb__logo {
  padding: 0.25rem 0.5rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
}

.dsb__collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  color: var(--d-mut);
  transition: background-color 200ms, color 200ms;
}

.dsb__collapse:hover {
  background-color: var(--d-tint);
  color: var(--d-green);
}

.dsb__collapse svg {
  width: 1rem;
  height: 1rem;
  transition: transform 280ms ease;
}

/* Profile mini */
.dsb__user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0.875rem 0.875rem 0;
  padding: 0.625rem;
  border-radius: 0.75rem;
  background-color: var(--d-tint);
}

.dsb__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--d-green);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #ffffff;
}

.dsb__user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsb__user-role {
  font-size: 0.6875rem;
  color: var(--d-mut);
  white-space: nowrap;
}

/* Nav search */
.dsb__search {
  position: relative;
  margin: 0.875rem 0.875rem 0;
}

.dsb__search svg {
  position: absolute;
  top: 50%;
  left: 0.625rem;
  width: 0.875rem;
  height: 0.875rem;
  transform: translateY(-50%);
  color: var(--d-mut);
  pointer-events: none;
}

.dsb__search input {
  width: 100%;
  padding: 0.5rem 0.625rem 0.5rem 2rem;
  font-size: 0.8125rem;
  color: var(--d-ink);
  background-color: var(--d-bg);
  border: 1px solid var(--d-line);
  border-radius: 0.625rem;
}

.dsb__search input:focus {
  outline: none;
  border-color: var(--d-green);
  box-shadow: 0 0 0 3px var(--d-tint);
}

/* Nav */
.dsb__nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.875rem 0.875rem 1.25rem;
}

.dsb__group {
  margin-top: 1rem;
}

.dsb__group:first-child {
  margin-top: 0;
}

.dsb__group-label {
  padding: 0 0.625rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-mut);
  white-space: nowrap;
}

.dsb__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.625rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--d-mut);
  white-space: nowrap;
  transition: background-color 180ms, color 180ms;
}

.dsb__link + .dsb__link {
  margin-top: 0.125rem;
}

.dsb__link:hover {
  background-color: var(--d-tint);
  color: var(--d-green);
}

.dsb__link.is-active {
  background-color: var(--d-green);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 6px 16px -8px rgba(10, 110, 61, 0.5);
}

.dsb__link svg {
  width: 1.0625rem;
  height: 1.0625rem;
  flex-shrink: 0;
}

.dsb__link--danger:hover {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--d-danger);
}

/* Collapsed state */
body.dash.dash--collapsed {
  --dsb-w: 4.5rem;
}

.dash--collapsed .dsb__logo,
.dash--collapsed .dsb__user,
.dash--collapsed .dsb__search,
.dash--collapsed .dsb__group-label,
.dash--collapsed .dsb__link span {
  display: none;
}

.dash--collapsed .dsb__head {
  justify-content: center;
  padding-inline: 0;
}

.dash--collapsed .dsb__collapse svg {
  transform: rotate(180deg);
}

.dash--collapsed .dsb__link {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   3. Top bar
   -------------------------------------------------------------------------- */

.dash__main {
  margin-left: var(--dsb-w);
  transition: margin-left 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.dtop {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
  padding: 0.75rem 1.5rem;
  background-color: color-mix(in srgb, var(--d-card) 85%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--d-line);
}

.dtop__burger {
  display: none;
}

.dtop__greet strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--d-ink);
  white-space: nowrap;
}

.dtop__greet span {
  display: block;
  font-size: 0.75rem;
  color: var(--d-mut);
  white-space: nowrap;
}

.dtop__search {
  position: relative;
  flex: 1;
  max-width: 22rem;
  margin-left: auto;
}

.dtop__search svg {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 0.9375rem;
  height: 0.9375rem;
  transform: translateY(-50%);
  color: var(--d-mut);
  pointer-events: none;
}

.dtop__search input {
  width: 100%;
  padding: 0.5625rem 0.875rem 0.5625rem 2.25rem;
  font-size: 0.8438rem;
  color: var(--d-ink);
  background-color: var(--d-bg);
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
}

.dtop__search input:focus {
  outline: none;
  border-color: var(--d-green);
  box-shadow: 0 0 0 3px var(--d-tint);
}

/* Quick-search results dropdown */
.dsearch {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  z-index: 60;
  padding: 0.3125rem;
  background-color: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
  box-shadow: var(--d-shadow-lift);
  max-height: 20rem;
  overflow-y: auto;
}

.dsearch__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--d-ink);
}

.dsearch__item:hover,
.dsearch__item.is-active {
  background-color: var(--d-tint);
}

.dsearch__item strong {
  font-size: 0.8125rem;
  font-weight: 600;
}

.dsearch__item small {
  font-size: 0.6875rem;
  color: var(--d-mut);
  white-space: nowrap;
}

.dsearch__empty {
  padding: 0.75rem 0.625rem;
  font-size: 0.8125rem;
  color: var(--d-mut);
}

.dsearch mark {
  background-color: rgba(233, 161, 59, 0.28);
  color: inherit;
  border-radius: 2px;
}

.dtop__actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.dtop__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.75rem;
  color: var(--d-mut);
  transition: background-color 180ms, color 180ms;
}

.dtop__icon:hover {
  background-color: var(--d-tint);
  color: var(--d-green);
}

.dtop__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.dtop__badge {
  position: absolute;
  top: 0.375rem;
  right: 0.4375rem;
  min-width: 0.9375rem;
  height: 0.9375rem;
  padding: 0 0.1875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: var(--d-danger);
  font-size: 0.5625rem;
  font-weight: 700;
  color: #fff;
}

.dtop__quick {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5625rem 0.9375rem;
  border-radius: 0.75rem;
  background-color: var(--d-green);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transition: background-color 180ms, transform 180ms;
}

.dtop__quick:hover {
  background-color: var(--clr-primary-dark);
  transform: translateY(-1px);
}

.dtop__quick svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.dtop__profile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
  border-radius: 999px;
  border: 1px solid var(--d-line);
  transition: border-color 180ms, background-color 180ms;
}

.dtop__profile:hover {
  border-color: var(--d-green);
  background-color: var(--d-tint);
}

.dtop__profile .dsb__avatar {
  width: 1.875rem;
  height: 1.875rem;
  font-size: 0.6875rem;
}

.dtop__profile span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
  white-space: nowrap;
}

/* Header dropdowns (Quick Actions + Profile) */
.dtop__dd {
  position: relative;
}

/* Normalise the toggles now that they are <button>s */
.dtop__quick {
  border: none;
  cursor: pointer;
}

.dtop__profile {
  background: transparent;
  cursor: pointer;
}

.dtop__profile-chev {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--d-mut);
  transition: transform 180ms ease;
}

.dtop__dd.is-open .dtop__profile-chev {
  transform: rotate(180deg);
}

.dtop__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 13.5rem;
  padding: 0.375rem;
  background-color: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: 0.875rem;
  box-shadow: var(--d-shadow-lift);
  z-index: 60;
}

.dtop__menu--right {
  left: auto;
  right: 0;
}

.dtop__menu[hidden] {
  display: none;
}

.dtop__menu:not([hidden]) {
  animation: dtop-dd-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dtop__menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--d-ink);
  text-decoration: none;
  white-space: nowrap;
}

.dtop__menu-item svg {
  width: 1.0625rem;
  height: 1.0625rem;
  flex: 0 0 auto;
  color: var(--d-mut);
}

.dtop__menu-item:hover {
  background-color: var(--d-tint);
  color: var(--d-green);
}

.dtop__menu-item:hover svg {
  color: var(--d-green);
}

.dtop__menu-item--all {
  margin-top: 0.25rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--d-line);
  border-radius: 0 0 0.5rem 0.5rem;
  font-weight: 600;
}

.dtop__menu-item--danger {
  color: var(--d-danger);
}

.dtop__menu-item--danger svg {
  color: var(--d-danger);
}

.dtop__menu-item--danger:hover {
  background-color: rgba(220, 38, 38, 0.08);
  color: var(--d-danger);
}

@keyframes dtop-dd-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Notifications dropdown */
.dtop__menu--notif {
  width: 20rem;
  max-width: calc(100vw - 2rem);
  padding: 0;
  overflow: hidden;
}

.dnotif__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--d-line);
}

.dnotif__head strong {
  font-size: 0.875rem;
  color: var(--d-ink);
}

.dnotif__count {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--d-green);
  background-color: var(--d-tint);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

.dnotif__item {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--d-line);
  text-decoration: none;
  transition: background-color 150ms ease;
}

.dnotif__item:hover {
  background-color: var(--d-bg);
}

.dnotif__item.is-unread {
  background-color: var(--d-tint);
}

.dnotif__item.is-unread:hover {
  background-color: rgba(45, 190, 96, 0.16);
}

.dnotif__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 0.5rem;
  background-color: var(--d-card);
  border: 1px solid var(--d-line);
  color: var(--d-green);
}

.dnotif__icon svg {
  width: 1rem;
  height: 1rem;
}

.dnotif__body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.dnotif__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
}

.dnotif__text {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--d-mut);
}

.dnotif__time {
  font-size: 0.6875rem;
  color: var(--d-mut);
  margin-top: 0.1875rem;
}

.dnotif__all {
  display: block;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-green);
  text-decoration: none;
}

.dnotif__all:hover {
  background-color: var(--d-tint);
}

/* Notifications full page */
.dnpage {
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.dnpage .dnotif__item:last-child {
  border-bottom: none;
}

.dnpage__group {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-mut);
  margin: 0 0 0.5rem;
}

/* --------------------------------------------------------------------------
   4. Content grid
   -------------------------------------------------------------------------- */

.dash__content {
  flex: 1;
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding: 1.5rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }

/* Grid children default to min-width:auto, so they refuse to shrink below
   their content. A wide table (every cell is white-space:nowrap, so each
   column adds to the minimum) would then push its column past its track and
   slide under the sticky rail instead of scrolling inside .stm-tablewrap.
   Zeroing the minimum lets the overflow container do its job. */
.span-12,
.span-8,
.span-7,
.span-5,
.span-4,
.dcol,
.dcol > *,
.dash__content > * {
  min-width: 0;
}

.dcard--pad {
  padding: 1.25rem;
}

.dcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dcard__title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--d-ink);
}

.dcard__hint {
  font-size: 0.75rem;
  color: var(--d-mut);
}

/* --------------------------------------------------------------------------
   5. Hero, summary cards, charts, goals
   -------------------------------------------------------------------------- */

/* Hero */
.dhero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background:
    radial-gradient(30rem 14rem at 90% -30%, rgba(233, 161, 59, 0.15), transparent 60%),
    linear-gradient(135deg, var(--d-green-deep), var(--d-green));
  color: #fff;
  box-shadow: var(--d-shadow-lift);
}

.dhero__greet {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-gold);
}

.dhero__title {
  margin-top: 0.375rem;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.dhero__sub {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
}

.dhero__completion {
  margin-top: 1.25rem;
  max-width: 22rem;
}

.dhero__completion-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.dhero__completion-bar {
  height: 0.375rem;
  margin-top: 0.375rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.dhero__completion-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background-color: var(--d-gold);
  transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1) 300ms;
}

.dhero__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  align-content: center;
}

.dhero__meta div {
  min-width: 0;
}

.dhero__meta dt {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.dhero__meta dd {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dhero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5625rem;
  border-radius: 999px;
  background-color: rgba(45, 190, 96, 0.25);
  font-size: 0.75rem;
  font-weight: 600;
  color: #b7f4cd;
}

.dhero__status::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--d-green-soft);
}

/* Summary cards */
.dsum {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  grid-column: span 12;
}

.dsum__card {
  padding: 1.125rem;
  transition: transform 240ms cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow 240ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.dsum__card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--d-shadow-lift);
}

.dsum__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dsum__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  background-color: var(--d-tint);
  color: var(--d-green);
}

.dsum__icon svg {
  width: 1rem;
  height: 1rem;
}

.dsum__trend {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--d-success);
}

.dsum__trend--down {
  color: var(--d-danger);
}

.dsum__trend--flat {
  color: var(--d-mut);
}

.dsum__label {
  margin-top: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-mut);
}

.dsum__amount {
  margin-top: 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dsum__spark {
  margin-top: 0.625rem;
  height: 2rem;
}

.dsum__spark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Charts */
.dchart {
  height: 15rem;
}

.dchart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dchart-legend {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--d-mut);
}

.dchart-legend i {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.3125rem;
  border-radius: 3px;
  vertical-align: -1px;
}

/* Goals — circular progress */
.dgoals {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dgoal {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.dgoal__ring {
  position: relative;
  flex-shrink: 0;
  width: 3.75rem;
  height: 3.75rem;
}

.dgoal__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.dgoal__ring circle {
  fill: none;
  stroke-width: 5;
}

.dgoal__ring .track {
  stroke: var(--d-line);
}

.dgoal__ring .bar {
  stroke: var(--d-green);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 300ms;
}

.dgoal__pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--d-ink);
}

.dgoal strong {
  display: block;
  font-size: 0.8438rem;
  font-weight: 600;
  color: var(--d-ink);
}

.dgoal span {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--d-mut);
}

/* --------------------------------------------------------------------------
   6. Transactions table
   -------------------------------------------------------------------------- */

.dtx__tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dtx__search {
  position: relative;
  flex: 1;
  min-width: 10rem;
}

.dtx__search svg {
  position: absolute;
  top: 50%;
  left: 0.625rem;
  width: 0.875rem;
  height: 0.875rem;
  transform: translateY(-50%);
  color: var(--d-mut);
  pointer-events: none;
}

.dtx__search input,
.dtx__filter {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--d-ink);
  background-color: var(--d-bg);
  border: 1px solid var(--d-line);
  border-radius: 0.625rem;
}

.dtx__search input {
  padding-left: 2rem;
}

.dtx__filter {
  width: auto;
  cursor: pointer;
}

.dtx__search input:focus,
.dtx__filter:focus {
  outline: none;
  border-color: var(--d-green);
  box-shadow: 0 0 0 3px var(--d-tint);
}

.dtx__wrap {
  overflow-x: auto;
  margin-top: 0.875rem;
}

.dtx__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.dtx__table th,
.dtx__table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  white-space: nowrap;
}

.dtx__table .dtx__desc {
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Long free-text cells — ledger descriptions and the like. Every other cell
   is nowrap, which is right for dates and amounts but makes one wordy column
   widen the whole table. This one wraps onto a second line instead, so the
   text stays readable in full rather than being truncated. */
.dtx__table .dtx__wrap {
  white-space: normal;
  min-width: 12rem;
  max-width: 22rem;
}

.dtx__table thead th {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-mut);
  border-bottom: 1px solid var(--d-line);
}

.dtx__table tbody tr {
  border-bottom: 1px solid var(--d-line);
  transition: background-color 160ms;
}

.dtx__table tbody tr:hover {
  background-color: var(--d-tint);
}

.dtx__table tbody tr:last-child {
  border-bottom: none;
}

.dtx__desc {
  font-weight: 500;
  color: var(--d-ink);
}

.dtx__amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dtx__amount--in {
  color: var(--d-success);
}

.dtx__amount--out {
  color: var(--d-ink);
}

.dbadge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.5625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.dbadge::before {
  content: "";
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: currentColor;
}

.dbadge--completed {
  background-color: rgba(22, 163, 74, 0.12);
  color: var(--d-success);
}

.dbadge--pending {
  background-color: rgba(233, 161, 59, 0.15);
  color: #b07514;
}

body.dash[data-theme="dark"] .dbadge--pending {
  color: var(--d-gold);
}

.dbadge--failed {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--d-danger);
}

.dbadge--cat {
  background-color: var(--d-tint);
  color: var(--d-green);
}

body.dash[data-theme="dark"] .dbadge--cat {
  color: var(--d-green-soft);
}

.dtx__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5rem;
  color: var(--d-mut);
  transition: background-color 160ms, color 160ms;
}

.dtx__view:hover {
  background-color: var(--d-tint);
  color: var(--d-green);
}

.dtx__view svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.dtx__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--d-line);
  font-size: 0.75rem;
  color: var(--d-mut);
}

.dtx__pages {
  display: flex;
  gap: 0.25rem;
}

.dpage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.875rem;
  height: 1.875rem;
  padding: 0 0.375rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-ink);
  transition: background-color 160ms, color 160ms;
}

.dpage:hover:not(:disabled) {
  background-color: var(--d-tint);
  color: var(--d-green);
}

.dpage.is-active {
  background-color: var(--d-green);
  color: #fff;
}

.dpage:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Empty state */
.dempty {
  padding: 2.5rem 1rem;
  text-align: center;
}

.dempty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--d-tint);
  color: var(--d-green);
}

.dempty__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.dempty h3 {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--d-ink);
}

.dempty p {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--d-mut);
}

.dempty button {
  margin-top: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  background-color: var(--d-green);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
}

/* --------------------------------------------------------------------------
   7. Quick actions, announcements, profile
   -------------------------------------------------------------------------- */

.dqa {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}

.dqa__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  border-radius: 0.875rem;
  border: 1px solid var(--d-line);
  background-color: var(--d-card);
  text-align: center;
  transition: transform 220ms cubic-bezier(0.2, 0.6, 0.2, 1),
    border-color 220ms, box-shadow 220ms;
}

.dqa__tile:hover {
  transform: translateY(-0.25rem);
  border-color: var(--d-green);
  box-shadow: var(--d-shadow-lift);
}

.dqa__tile span:last-child {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-ink);
  line-height: 1.3;
}

.dqa__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background-color: var(--d-tint);
  color: var(--d-green);
}

.dqa__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Announcements */
.dann {
  display: flex;
  flex-direction: column;
}

.dann__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--d-line);
}

.dann__item:first-of-type {
  border-top: none;
  padding-top: 0;
}

.dann__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--d-mut);
}

.dann__title {
  font-size: 0.8438rem;
  font-weight: 600;
  color: var(--d-ink);
}

.dann__preview {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--d-mut);
}

.dann__more {
  align-self: flex-start;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-green);
}

.dann__more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ann-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--d-line);
}

.ann-pager__btn {
  min-width: 2.25rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--d-line);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--d-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.ann-pager__btn:hover:not(:disabled) {
  border-color: var(--d-green);
  color: var(--d-green);
}

.ann-pager__btn.is-current {
  background: var(--d-green);
  border-color: var(--d-green);
  color: #fff;
}

.ann-pager__btn:disabled {
  color: var(--d-mut);
  cursor: not-allowed;
  opacity: 0.5;
}

.dbadge--high {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--d-danger);
}

.dbadge--info {
  background-color: var(--d-tint);
  color: var(--d-green);
}

body.dash[data-theme="dark"] .dbadge--info {
  color: var(--d-green-soft);
}

.dbadge--event {
  background-color: rgba(233, 161, 59, 0.15);
  color: #b07514;
}

body.dash[data-theme="dark"] .dbadge--event {
  color: var(--d-gold);
}

/* Profile card */
.dprofile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dprofile__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--d-green), var(--d-green-soft));
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
}

.dprofile__name {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--d-ink);
}

.dprofile__name svg {
  width: 1rem;
  height: 1rem;
  color: var(--d-green-soft);
}

.dprofile__role {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--d-mut);
}

.dprofile__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--d-line);
  text-align: left;
}

.dprofile__meta dt {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-mut);
}

.dprofile__meta dd {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
}

.dprofile__edit {
  width: 100%;
  margin-top: 1rem;
  padding: 0.625rem;
  border-radius: 0.75rem;
  border: 1px solid var(--d-line);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
  transition: border-color 180ms, color 180ms, background-color 180ms;
}

.dprofile__edit:hover {
  border-color: var(--d-green);
  color: var(--d-green);
  background-color: var(--d-tint);
}

/* --------------------------------------------------------------------------
   8. Mobile
   -------------------------------------------------------------------------- */

.dsb__scrim {
  display: none;
}

.dbottom {
  display: none;
}

@media (max-width: 64rem) {
  .dash__content {
    padding-inline: 1rem;
  }

  .span-8, .span-7, .span-5, .span-4 {
    grid-column: span 12;
  }

  .dsum {
    grid-template-columns: repeat(2, 1fr);
  }

  .dqa {
    grid-template-columns: repeat(3, 1fr);
  }

  .dhero {
    grid-template-columns: 1fr;
  }

  /* Sidebar becomes off-canvas */
  .dash__main {
    margin-left: 0;
  }

  .dsb {
    transform: translateX(-100%);
    box-shadow: 24px 0 64px -24px rgba(0, 0, 0, 0.4);
  }

  body.dash.dash--sidebar .dsb {
    transform: none;
  }

  .dsb__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background-color: rgba(6, 32, 20, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
  }

  body.dash.dash--sidebar .dsb__scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .dsb__collapse {
    display: none;
  }

  .dtop__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 0.75rem;
    color: var(--d-ink);
  }

  .dtop__burger:hover {
    background-color: var(--d-tint);
    color: var(--d-green);
  }

  .dtop__burger svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .dtop__greet span {
    display: none;
  }
}

@media (max-width: 40rem) {
  .dtop {
    padding-inline: 1rem;
    gap: 0.5rem;
  }

  .dtop__search,
  .dtop__quick span,
  .dtop__profile span,
  .dtop__icon--mail {
    display: none;
  }

  .dsum {
    grid-template-columns: 1fr;
  }

  .dqa {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash__content {
    padding-bottom: 6rem;
  }

  /* Bottom navigation */
  .dbottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
    background-color: color-mix(in srgb, var(--d-card) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--d-line);
  }

  .dbottom__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--d-mut);
  }

  .dbottom__link.is-active {
    color: var(--d-green);
    background-color: var(--d-tint);
  }

  .dbottom__link svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   9. Balanced lower section — independent columns + list widgets
   -------------------------------------------------------------------------- */

/* Self-stacking columns: heights never hostage each other */
.dcol {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.dtwo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* "View all" header action */
.dtx__all {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-green);
  white-space: nowrap;
  transition: color 180ms;
}

.dtx__all:hover {
  color: var(--d-green-soft);
}

.dtx__all svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

/* Icon-row list (Upcoming Payments, Financial Insights) */
.dlist {
  display: flex;
  flex-direction: column;
}

.dlist__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--d-line);
}

.dlist__row:first-child {
  border-top: none;
  padding-top: 0;
}

.dlist__row:last-child {
  padding-bottom: 0;
}

.dlist__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  background-color: var(--d-tint);
  color: var(--d-green);
}

.dlist__icon svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.dlist__body {
  flex: 1;
  min-width: 0;
}

.dlist__body strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dlist__body span {
  display: block;
  margin-top: 0.0625rem;
  font-size: 0.6875rem;
  color: var(--d-mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dlist__value {
  flex-shrink: 0;
  font-size: 0.8438rem;
  font-weight: 700;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}

.dlist__value--up {
  color: var(--d-success);
}

/* Announcements as a horizontal strip */
.dann--row {
  flex-direction: row;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.dann--row .dann__item {
  border-top: none;
  border-left: 1px solid var(--d-line);
  padding: 0 0 0 1rem;
}

.dann--row .dann__item:first-of-type {
  border-left: none;
  padding-left: 0;
}

/* Account health rows */
.dhl {
  display: flex;
  flex-direction: column;
}

.dhl__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5625rem 0;
  border-top: 1px solid var(--d-line);
  font-size: 0.8125rem;
  color: var(--d-mut);
}

.dhl__row:first-child {
  border-top: none;
  padding-top: 0;
}

.dhl__row:last-child {
  padding-bottom: 0;
}

.dhl__val {
  font-weight: 700;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 64rem) {
  .dann--row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .dann--row .dann__item {
    border-left: none;
    border-top: 1px solid var(--d-line);
    padding: 0.875rem 0 0;
    margin-top: 0.875rem;
  }

  .dann--row .dann__item:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 40rem) {
  .dtwo {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   10. My Account page — tabs, fields, save bar, toasts
   -------------------------------------------------------------------------- */

.acc {
  align-items: start;
  /* clearance so the fixed "Save Changes" bar never covers the last fields */
  padding-bottom: 6rem;
}

.acc__rail {
  position: sticky;
  top: 5rem;
}

.acc__ring-wrap {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  margin-top: 1rem;
  padding: 0.875rem;
  border-radius: 0.875rem;
  background-color: var(--d-tint);
  text-align: left;
}

.acc__ring-wrap .dgoal__ring {
  position: relative;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
}

.acc__ring-wrap .dgoal__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.acc__ring-wrap .dgoal__ring circle {
  fill: none;
  stroke-width: 5;
}

.acc__ring-wrap .dgoal__ring .track {
  stroke: var(--d-line);
}

.acc__ring-wrap .dgoal__ring .bar {
  stroke: var(--d-green);
  stroke-linecap: round;
  transition: stroke-dashoffset 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.acc__ring-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
}

.acc__ring-sub {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--d-mut);
}

.acc__updated {
  margin-top: 0.875rem;
  font-size: 0.6875rem;
  color: var(--d-mut);
}

/* Segmented tabs */
.acc-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  margin-bottom: 1rem;
  background-color: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: 0.875rem;
  overflow-x: auto;
}

.acc-tab {
  flex: 1;
  padding: 0.5625rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-mut);
  white-space: nowrap;
  transition: background-color 180ms, color 180ms;
}

.acc-tab:hover {
  color: var(--d-green);
}

.acc-tab.is-active {
  background-color: var(--d-green);
  color: #fff;
  box-shadow: 0 4px 12px -6px rgba(10, 110, 61, 0.5);
}

/* Count beside a tab label. Inherits the tab's colour so it stays legible on
   the green active state instead of fighting it. */
.acc-tab__count {
  margin-left: 0.375rem;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* Panels */
.acc-panel[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .acc-panel.is-entering {
    animation: dash-in 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
}

.acc-panel__head {
  margin-bottom: 1.25rem;
}

.acc-panel__head h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--d-ink);
}

.acc-panel__head p {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--d-mut);
}

.acc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Fields */
.dfield {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.dfield--full {
  grid-column: 1 / -1;
}

.dfield label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-ink);
}

.dfield label small {
  font-weight: 400;
  color: var(--d-mut);
}

.form-field__legend {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-ink);
}

/* Terms & conditions text block */
.svc-terms {
  padding: 0.875rem 1rem;
  background-color: var(--d-bg);
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--d-mut);
}

.svc-terms p + p {
  margin-top: 0.625rem;
}

/* Terms come out of the database as HTML, so a list is likely. The reset
   zeroes padding on everything, which leaves markers clipped against the
   border — this gives them their indent back, scoped so no other list on the
   page is affected. */
.svc-terms ul,
.svc-terms ol {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.svc-terms li + li {
  margin-top: 0.375rem;
}

.svc-terms strong,
.svc-terms b {
  color: var(--d-ink);
  font-weight: 600;
}

.svc-terms a {
  color: var(--d-green);
  text-decoration: underline;
}

/* Consent / agreement tile */
.check-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.check-tile:hover {
  border-color: var(--d-green);
}

.check-tile input {
  margin-top: 0.0625rem;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  accent-color: var(--d-green);
  cursor: pointer;
}

.check-tile__text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--d-mut);
}

/* Custom checkbox box (used on some service pages) */
.check-tile:has(.check-tile__box) input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.check-tile__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  border: 1.5px solid var(--d-line);
  border-radius: 0.375rem;
  color: transparent;
  transition: all 160ms ease;
}

.check-tile__box svg {
  width: 0.75rem;
  height: 0.75rem;
}

.check-tile input:checked ~ .check-tile__box {
  background-color: var(--d-green);
  border-color: var(--d-green);
  color: #fff;
}

.dfield input,
.dfield select,
.dfield textarea {
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--d-ink);
  background-color: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
  width: 100%;
}

.dfield textarea {
  resize: vertical;
  min-height: 3.5rem;
  font-family: inherit;
}

.dfield input:focus,
.dfield select:focus,
.dfield textarea:focus {
  outline: none;
  border-color: var(--d-green);
  box-shadow: 0 0 0 3px var(--d-tint);
}

.dfield__help {
  font-size: 0.6875rem;
  color: var(--d-mut);
}

.dfield__error {
  display: none;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--d-danger);
}

.dfield.is-invalid input,
.dfield.is-invalid select {
  border-color: var(--d-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.dfield.is-invalid .dfield__error {
  display: block;
}

/* A field can carry more than one error line — one per way it can fail, each
   with its own wording — and the page hides all but the one that applies.
   That rule above is specific enough to beat the reset's [hidden], so the
   hidden ones would show anyway without this. */
.dfield.is-invalid .dfield__error[hidden] {
  display: none;
}

/* Locked fields */
.dfield--locked input {
  background-color: var(--d-bg);
  color: var(--d-mut);
  cursor: not-allowed;
}

/* Tooltip chip */
.dtip {
  position: relative;
  display: inline-flex;
  color: var(--d-mut);
}

.dtip svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

.dtip:hover,
.dtip:focus-visible {
  color: var(--d-green);
}

.dtip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.25rem);
  width: max-content;
  max-width: 14rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.5rem;
  background-color: var(--d-ink);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--d-card);
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms, transform 180ms;
  z-index: 10;
}

.dtip:hover::after,
.dtip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Phone with country code */
.dphone {
  display: flex;
  gap: 0.375rem;
}

.dphone select {
  width: 5.25rem;
  flex-shrink: 0;
  padding: 0.625rem 0.5rem;
  font-size: 0.875rem;
  color: var(--d-ink);
  background-color: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
}

.dphone select:focus {
  outline: none;
  border-color: var(--d-green);
  box-shadow: 0 0 0 3px var(--d-tint);
}

/* Masked inputs */
.dmask {
  position: relative;
}

.dmask input {
  padding-right: 2.75rem;
}

.dmask__eye {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5rem;
  color: var(--d-mut);
  transition: color 160ms;
}

.dmask__eye:hover {
  color: var(--d-green);
}

.dmask__eye svg {
  width: 1rem;
  height: 1rem;
}

/* Info note */
.acc-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  background-color: var(--d-tint);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--d-green);
}

body.dash[data-theme="dark"] .acc-note {
  color: var(--d-green-soft);
}

.acc-note svg {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

/* 2FA switch row */
.acc-switchrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0.875rem;
  border: 1px solid var(--d-line);
  border-radius: 0.875rem;
}

.acc-switchrow strong {
  display: block;
  font-size: 0.8438rem;
  font-weight: 600;
  color: var(--d-ink);
}

.acc-switchrow span {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--d-mut);
}

.dswitch {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.dswitch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.dswitch__track {
  width: 2.625rem;
  height: 1.5rem;
  border-radius: 999px;
  background-color: var(--d-line);
  transition: background-color 200ms;
}

.dswitch__track::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dswitch input:checked + .dswitch__track {
  background-color: var(--d-green);
}

.dswitch input:checked + .dswitch__track::after {
  transform: translateX(1.125rem);
}

.dswitch input:focus-visible + .dswitch__track {
  outline: 2px solid var(--d-green-soft);
  outline-offset: 2px;
}

/* Progressive disclosure */
.acc-disclosure {
  margin-top: 1rem;
  border: 1px solid var(--d-line);
  border-radius: 0.875rem;
}

.acc-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem;
  font-size: 0.8438rem;
  font-weight: 600;
  color: var(--d-ink);
  cursor: pointer;
  list-style: none;
}

.acc-disclosure summary::-webkit-details-marker {
  display: none;
}

.acc-disclosure summary svg {
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--d-mut);
  transition: transform 240ms ease;
}

.acc-disclosure[open] summary svg {
  transform: rotate(180deg);
}

.acc-disclosure__body {
  padding: 0 0.875rem 0.875rem;
}

.acc-session {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
}

.acc-session svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--d-mut);
}

.acc-session div {
  flex: 1;
}

.acc-session strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
}

.acc-session span {
  display: block;
  font-size: 0.6875rem;
  color: var(--d-mut);
}

.acc-signout {
  margin-top: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--d-line);
  border-radius: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-danger);
  transition: border-color 180ms, background-color 180ms;
}

.acc-signout:hover {
  border-color: var(--d-danger);
  background-color: rgba(220, 38, 38, 0.06);
}

/* Sticky save bar */
.dsave {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: min(34rem, calc(100vw - 2rem));
  padding: 0.75rem 1rem;
  background-color: var(--d-ink);
  border-radius: 1rem;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.45);
  animation: dsave-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

body.dash[data-theme="dark"] .dsave {
  background-color: #243430;
  border: 1px solid var(--d-line);
}

.dsave[hidden] {
  display: none;
}

/* The bar is fixed, so it floats over the last fields of the form. While it
   is on screen the form reserves matching bottom clearance — the exact value
   is written inline by js/account.js from the bar's real height (it stacks
   taller on small screens); the class below is the no-JS fallback. */
.acc-form {
  transition: padding-bottom 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.acc-form.has-savebar {
  padding-bottom: 6rem;
}

@keyframes dsave-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(1rem);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.dsave__msg {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.dsave__msg svg {
  width: 1rem;
  height: 1rem;
  color: var(--d-gold);
}

.dsave__actions {
  display: flex;
  gap: 0.5rem;
}

.dsave__discard {
  padding: 0.5625rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  transition: background-color 180ms, color 180ms;
}

.dsave__discard:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.dsave__save {
  padding: 0.5625rem 1.125rem;
  border-radius: 0.625rem;
  background-color: var(--d-green-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #05130c;
  transition: background-color 180ms, transform 180ms;
}

.dsave__save:hover {
  transform: translateY(-1px);
}

.dsave__save.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Toasts */
.dtoasts {
  position: fixed;
  top: 5rem;
  right: 1rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(20rem, calc(100vw - 2rem));
}

.dtoast {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  background-color: var(--d-card);
  border: 1px solid var(--d-line);
  border-left: 3px solid var(--d-success);
  border-radius: 0.75rem;
  box-shadow: var(--d-shadow-lift);
  font-size: 0.8125rem;
  color: var(--d-ink);
  animation: dsave-in-toast 300ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes dsave-in-toast {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.dtoast svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.0625rem;
  color: var(--d-success);
}

/* Failure variant — a toast saying something went wrong should not arrive
   wearing a green tick. */
.dtoast--error {
  border-left-color: var(--d-danger);
}

.dtoast--error svg {
  color: var(--d-danger);
}

/* Responsive */
@media (max-width: 64rem) {
  .acc__rail {
    position: static;
  }
}

@media (max-width: 40rem) {
  .acc-grid {
    grid-template-columns: 1fr;
  }

  .dsave {
    bottom: 4.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
  }

  .dsave__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Taller stacked bar sitting above the mobile nav */
  .acc-form.has-savebar {
    padding-bottom: 12rem;
  }
}

/* --------------------------------------------------------------------------
   11. Profile photo upload
   -------------------------------------------------------------------------- */

.acc-avatar {
  position: relative;
  display: inline-flex;
}

.acc-avatar .dprofile__avatar {
  overflow: hidden;
}

.acc-avatar .dprofile__avatar img,
.dsb__avatar img,
.dtop__profile .dsb__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.dsb__avatar {
  overflow: hidden;
}

.acc-avatar__btn {
  position: absolute;
  right: -0.25rem;
  bottom: -0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--d-green);
  border: 2px solid var(--d-card);
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.4);
  transition: background-color 180ms, transform 180ms;
}

.acc-avatar__btn:hover {
  background-color: var(--clr-primary-dark);
  transform: scale(1.08);
}

.acc-avatar__btn svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

.acc-avatar__remove {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--d-danger);
}

.acc-avatar__remove:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.acc-avatar__remove[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   12. Quick-action chip strip — compact, button-height, under the hero
   -------------------------------------------------------------------------- */

.dqa-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.dqa-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.6875rem;
  border-radius: 0.5rem;
  background-color: transparent;
  border: 1px solid var(--d-line);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-mut);
  white-space: nowrap;
  transition: border-color 160ms, background-color 160ms, color 160ms;
}

.dqa-chip:hover {
  border-color: var(--d-green);
  background-color: var(--d-tint);
  color: var(--d-green);
}

.dqa-chip svg {
  width: 0.8125rem;
  height: 0.8125rem;
  color: var(--d-green);
  opacity: 0.85;
}

@media (max-width: 40rem) {
  .dqa-strip {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }

  .dqa-strip::-webkit-scrollbar {
    display: none;
  }
}

/* Strip label — names the row without turning it into a card */
.dqa-strip__label {
  flex-shrink: 0;
  margin-right: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-mut);
}

/* Hero edit — quiet ghost action, top-right of the welcome card */
.dhero__edit {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.8125rem;
  border-radius: 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  transition: background-color 180ms, border-color 180ms;
}

.dhero__edit:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

.dhero__edit svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

/* --------------------------------------------------------------------------
   13. Service Forms (shared system — hero, info cards, stepper, live
   summary, review, success). Used by every page under Service Forms:
   Savings Withdrawal, Loan Application, Internal Transfers, Change Monthly
   Savings, Retire From Society, Super Savings, Pool Fund, Project
   Subscription and E-Raffle.
   -------------------------------------------------------------------------- */

/* ---- Breadcrumb ---- */
.svc-crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-mut);
  transition: color 160ms;
}

.svc-crumb:hover {
  color: var(--d-green);
}

.svc-crumb svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

/* ---- Hero ---- */
.svc-hero__top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.svc-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, var(--clr-primary-deep), var(--clr-primary));
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(10, 110, 61, 0.55);
}

.svc-hero__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.svc-hero__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-green);
}

.svc-hero__title {
  margin-top: 0.1875rem;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--d-ink);
}

.svc-hero__text {
  max-width: 40rem;
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--d-mut);
}

.svc-hero__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5625rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background-color: var(--d-tint);
  color: var(--d-green);
}

.svc-hero__note svg {
  width: 1.0625rem;
  height: 1.0625rem;
  flex: 0 0 auto;
  margin-top: 0.0625rem;
}

.svc-hero__note span {
  font-size: 0.8125rem;
  line-height: 1.55;
  font-weight: 500;
}

/* ---- Info & eligibility grid ---- */
.svc-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

/* Resources — file download list */
.res-files {
  list-style: none;
  margin: 0;
  padding: 0;
}

.res-files li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--d-line);
}

.res-files li:last-child {
  border-bottom: none;
}

.res-files__name {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.84375rem;
  font-weight: 500;
  color: var(--d-ink);
}

.res-files__name svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  color: var(--d-mut);
}

.res-files__dl {
  flex: 0 0 auto;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-green);
  background-color: var(--d-tint);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.res-files__dl:hover {
  background-color: var(--d-green);
  color: #fff;
}

/* Resources — key contacts */
.res-contact {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--d-line);
}

.res-contact:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.res-contact:first-child {
  padding-top: 0;
}

.res-contact__role {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--d-mut);
  margin: 0 0 0.25rem;
}

.res-contact__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--d-ink);
  margin: 0 0 0.125rem;
}

.res-contact__link {
  font-size: 0.8125rem;
  color: var(--d-green);
  text-decoration: none;
  word-break: break-all;
}

.res-contact__link:hover {
  text-decoration: underline;
}

/* Rate card table (Pool Fund) */
.svc-rates__wrap {
  overflow-x: auto;
}

.svc-rates {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  min-width: 34rem;
}

.svc-rates thead th {
  padding: 0.5rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-mut);
  text-align: center;
  border-bottom: 1px solid var(--d-line);
}

.svc-rates thead th:first-child {
  text-align: left;
}

.svc-rates tbody th {
  padding: 0.625rem 0.75rem;
  font-weight: 600;
  color: var(--d-ink);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--d-line);
}

.svc-rates tbody td {
  padding: 0.625rem 0.75rem;
  font-weight: 500;
  color: var(--d-mut);
  text-align: center;
  border-bottom: 1px solid var(--d-line);
}

.svc-rates tbody tr:last-child th,
.svc-rates tbody tr:last-child td {
  border-bottom: none;
}

.svc-rates tbody tr.is-active th,
.svc-rates tbody tr.is-active td {
  background-color: var(--d-tint);
}

.svc-rates td.is-active {
  color: var(--d-green);
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--d-green);
  border-radius: 0.375rem;
}

.svc-info__item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
  background-color: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: 0.875rem;
}

.svc-info__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 0.5625rem;
  background-color: var(--d-tint);
  color: var(--d-green);
}

.svc-info__icon svg {
  width: 1rem;
  height: 1rem;
}

.svc-info__label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--d-mut);
}

.svc-info__value {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.84375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--d-ink);
  line-height: 1.35;
}

.svc-info__item--warn {
  background-color: rgba(233, 161, 59, 0.08);
  border-color: rgba(233, 161, 59, 0.3);
}

.svc-info__item--warn .svc-info__icon {
  background-color: rgba(233, 161, 59, 0.18);
  color: #b06f14;
}

.svc-info__item--danger {
  background-color: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.25);
}

.svc-info__item--danger .svc-info__icon {
  background-color: rgba(220, 38, 38, 0.12);
  color: var(--d-danger);
}

/* ---- Benefits row (optional, used selectively) ---- */
.svc-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.svc-benefit {
  padding: 1rem;
  transition: transform 220ms cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 220ms;
}

.svc-benefit:hover {
  transform: translateY(-0.1875rem);
  box-shadow: var(--d-shadow-lift);
}

.svc-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  background-color: var(--d-tint);
  color: var(--d-green);
}

.svc-benefit__icon svg {
  width: 1rem;
  height: 1rem;
}

.svc-benefit h3 {
  margin-top: 0.625rem;
  font-size: 0.8438rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--d-ink);
}

.svc-benefit p {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--d-mut);
}

/* ---- Mini step indicator ---- */
.svc-steps {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--d-line);
}

.svc-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-mut);
}

.svc-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  border: 1.5px solid var(--d-line);
  font-size: 0.625rem;
}

.svc-step.is-current {
  color: var(--d-green);
}

.svc-step.is-current span {
  border-color: var(--d-green);
  background-color: var(--d-tint);
}

.svc-step.is-done span {
  background-color: var(--d-green);
  border-color: var(--d-green);
  color: #fff;
}

/* ---- Currency input ---- */
.svc-currency {
  position: relative;
}

.svc-currency > span {
  position: absolute;
  top: 50%;
  left: 0.875rem;
  transform: translateY(-50%);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--d-mut);
  pointer-events: none;
}

.svc-currency input {
  padding-left: 2rem;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Choice cards (funding source, payout method, transfer type...) ---- */
.svc-fund {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-top: 0.375rem;
}

.svc-fund--stack {
  grid-template-columns: 1fr;
}

.svc-fund__opt {
  cursor: pointer;
}

.svc-fund__opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.svc-fund__opt > span {
  display: block;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
  transition: border-color 180ms, background-color 180ms;
}

.svc-fund__opt:hover > span {
  border-color: var(--d-green);
}

.svc-fund__opt input:checked + span {
  border-color: var(--d-green);
  background-color: var(--d-tint);
  box-shadow: inset 0 0 0 1px var(--d-green);
}

.svc-fund__opt input:focus-visible + span {
  outline: 2px solid var(--d-green-soft);
  outline-offset: 2px;
}

.svc-fund__opt strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
}

.svc-fund__opt small {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--d-mut);
}

/* ---- Review list ---- */
.svc-review {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.svc-review > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--d-line);
}

.svc-review dt {
  font-size: 0.8125rem;
  color: var(--d-mut);
}

.svc-review dd {
  font-size: 0.8438rem;
  font-weight: 600;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---- Success screen ---- */
.svc-done {
  padding: 1.5rem 1rem 0.5rem;
  text-align: center;
}

.svc-done__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background-color: var(--d-tint);
  color: var(--d-green);
}

.svc-done__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.svc-done h2 {
  margin-top: 0.875rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--d-ink);
}

.svc-done > p {
  max-width: 26rem;
  margin: 0.375rem auto 0;
  font-size: 0.8438rem;
  line-height: 1.6;
  color: var(--d-mut);
}

.svc-receipt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  max-width: 26rem;
  margin: 1.25rem auto 0;
  padding: 0.9375rem 1.125rem;
  border: 1px solid var(--d-line);
  border-radius: 0.875rem;
  text-align: left;
}

.svc-receipt > div dt {
  font-size: 0.6875rem;
  color: var(--d-mut);
}

.svc-receipt > div dd {
  margin-top: 0.125rem;
  font-size: 0.84375rem;
  font-weight: 700;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}

.svc-next {
  max-width: 26rem;
  margin: 1.25rem auto 0;
  padding: 0;
  text-align: left;
  list-style: none;
}

.svc-next li {
  position: relative;
  padding: 0 0 0.875rem 1.75rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--d-mut);
}

.svc-next li:last-child {
  padding-bottom: 0;
}

.svc-next li::before {
  content: counter(svc-next-count);
  counter-increment: svc-next-count;
  position: absolute;
  left: 0;
  top: 0.0625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--d-tint);
  color: var(--d-green);
  font-size: 0.6875rem;
  font-weight: 700;
}

.svc-next {
  counter-reset: svc-next-count;
}

.svc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

.svc-actions .dprofile__edit {
  width: auto;
  margin-top: 0;
  padding: 0.5625rem 1.125rem;
}

/* A panel that carries one set of wording per state keeps them all in the
   markup and hides the ones that do not apply. `hidden` alone is not enough
   for every element: the browser's own [hidden] rule loses to any author
   rule that sets a display, and .dtop__quick — the "Change Monthly Savings"
   link — is inline-flex. */
[data-existing-copy][hidden] {
  display: none !important;
}

/* ---- Project facts ----
   The read-only description of the chosen project on Project Subscription:
   label on the left, the server's value on the right, one row each. Not a
   form — nothing in here is editable or posted. */
/* Sits between the project select above and the Unit / Payment Plan row
   below, so it needs the gap on both sides — matching .acc-grid's own 1rem
   keeps the whole step evenly spaced. */
.pj-facts {
  margin: 1rem 0;
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
  overflow: hidden;
}

.pj-facts > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.75rem;
  padding: 0.6875rem 0.9375rem;
}

.pj-facts > div + div {
  border-top: 1px solid var(--d-line);
}

.pj-facts > div:nth-child(odd) {
  background-color: var(--d-bg);
}

.pj-facts dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-mut);
}

.pj-facts dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--d-ink);
}

/* The label column is a luxury on a phone — stack instead of squeezing the
   value into a sliver. */
@media (max-width: 40rem) {
  .pj-facts > div {
    grid-template-columns: 1fr;
    gap: 0.125rem;
  }
}

/* ---- Side rail — live summary ---- */
.svc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  text-align: center;
}

.svc-empty svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--d-mut);
  opacity: 0.6;
}

.svc-empty p {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--d-mut);
}

.svc-sum__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5625rem 0;
  border-bottom: 1px solid var(--d-line);
  font-size: 0.8125rem;
}

.svc-sum__row:last-of-type {
  border-bottom: none;
}

.svc-sum__row span {
  color: var(--d-mut);
}

.svc-sum__row strong {
  font-weight: 700;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}

.svc-sum__row--total strong {
  color: var(--d-green);
  font-size: 0.9375rem;
}

.svc-sum__note {
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--d-line);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--d-mut);
}

/* ---- Service Forms hub ---- */
.svc-hub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.svc-card {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.25rem;
  background-color: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: 1rem;
  box-shadow: var(--d-shadow);
  transition: transform 200ms cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 200ms, border-color 200ms;
}

.svc-card:hover {
  transform: translateY(-0.1875rem);
  box-shadow: var(--d-shadow-lift);
  border-color: var(--d-green);
}

.svc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: 0.75rem;
  background-color: var(--d-tint);
  color: var(--d-green);
}

.svc-card__icon svg {
  width: 1.1875rem;
  height: 1.1875rem;
}

.svc-card__body {
  min-width: 0;
}

.svc-card__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--d-ink);
}

.svc-card__title svg {
  width: 0.8125rem;
  height: 0.8125rem;
  flex: 0 0 auto;
  color: var(--d-mut);
  transition: transform 200ms;
}

.svc-card:hover .svc-card__title svg {
  transform: translateX(0.1875rem);
  color: var(--d-green);
}

.svc-card__desc {
  margin-top: 0.25rem;
  font-size: 0.78125rem;
  line-height: 1.55;
  color: var(--d-mut);
}

@media (max-width: 64rem) {
  .svc-info,
  .svc-hub {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 40rem) {
  .svc-info,
  .svc-benefits,
  .svc-fund,
  .svc-hub,
  .svc-receipt {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   14. Account Statement page
   -------------------------------------------------------------------------- */

/* Filter card — one lightweight line on desktop */
.stm-filter {
  padding: 1rem 1.25rem;
}

.stm-filter__row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.stm-filter__field {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  flex: 1;
  min-width: 9rem;
}

.stm-filter__field label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--d-ink);
}

.stm-filter__field label small {
  font-weight: 400;
  color: var(--d-mut);
}

.stm-filter__field select,
.stm-filter__field input {
  padding: 0.5625rem 0.75rem;
  font-size: 0.8438rem;
  color: var(--d-ink);
  background-color: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: 0.625rem;
}

.stm-filter__field select:focus,
.stm-filter__field input:focus {
  outline: none;
  border-color: var(--d-green);
  box-shadow: 0 0 0 3px var(--d-tint);
}

.stm-filter__error {
  display: none;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--d-danger);
}

.stm-filter__field.is-invalid select,
.stm-filter__field.is-invalid input {
  border-color: var(--d-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.stm-filter__field.is-invalid .stm-filter__error {
  display: block;
}

.stm-filter__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.stm-filter__reset {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-mut);
  white-space: nowrap;
  transition: color 160ms;
}

.stm-filter__reset:hover {
  color: var(--d-danger);
}

/* Welcome empty state */
.stm-hello {
  padding: 3rem 1rem;
  text-align: center;
}

.stm-hello__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 1rem;
  background-color: var(--d-tint);
  color: var(--d-green);
}

.stm-hello__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.stm-hello h2 {
  margin-top: 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--d-ink);
}

.stm-hello p {
  max-width: 26rem;
  margin: 0.375rem auto 0;
  font-size: 0.8438rem;
  line-height: 1.6;
  color: var(--d-mut);
}

.stm-loading {
  padding: 0.5rem 0;
}

/* Compact summary strip */
.stm-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.875rem;
  border-radius: 0.75rem;
  background-color: var(--d-bg);
  border: 1px solid var(--d-line);
}

.stm-summary__item span {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-mut);
}

.stm-summary__item strong {
  display: block;
  margin-top: 0.0625rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}

.stm-summary__item strong.is-credit {
  color: var(--d-success);
}

/* Toolbar: count left, quiet exports right */
.stm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.stm-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-mut);
}

.stm-exports {
  display: flex;
  gap: 0.375rem;
}

.stm-export {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.6875rem;
  border: 1px solid var(--d-line);
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--d-mut);
  white-space: nowrap;
  transition: border-color 160ms, color 160ms, background-color 160ms;
}

.stm-export:hover {
  border-color: var(--d-green);
  background-color: var(--d-tint);
  color: var(--d-green);
}

.stm-export svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Table: sticky header inside its own scroll area */
.stm-tablewrap {
  max-height: 56vh;
  overflow: auto;
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
}

.stm-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--d-card);
}

.stm-table th:first-child,
.stm-table td:first-child {
  padding-left: 1rem;
}

.stm-table th:last-child,
.stm-table td:last-child {
  padding-right: 1rem;
}

.stm-ref {
  font-size: 0.75rem;
  color: var(--d-mut);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 64rem) {
  .stm-filter__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 40rem) {
  .stm-filter__field {
    min-width: calc(50% - 0.375rem);
  }

  .stm-summary {
    gap: 0.75rem 1.25rem;
  }
}

/* ==========================================================================
   15. Loans area — Outstanding / Finished / Guarantorship
   ========================================================================== */

/* Sub-nav tabs (anchor variant of .acc-tabs) */
.loan-tabs {
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
}

.loan-tabs .acc-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.125rem;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
}

/* Sortable table headers */
.adm-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.adm-sort::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.3;
  transition: transform 160ms, opacity 160ms;
}

.adm-sort.is-asc::after {
  opacity: 1;
  transform: rotate(180deg);
}

.adm-sort.is-desc::after {
  opacity: 1;
}

.adm-sort:hover::after {
  opacity: 0.7;
}

/* Loan status badges */
.dbadge--active {
  background-color: var(--d-tint);
  color: var(--d-green);
}

.dbadge--near {
  background-color: rgba(233, 161, 59, 0.14);
  color: #b06f14;
}

.dbadge--overdue {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--d-danger);
}

body.dash[data-theme="dark"] .dbadge--near {
  color: #e9a13b;
}

body.dash[data-theme="dark"] .dbadge--overdue {
  color: #f87171;
}

/* Clickable loan rows + inline view button */
.stm-table tr[data-loan] {
  cursor: pointer;
}

.stm-table tr[data-loan]:hover td {
  background-color: var(--d-tint);
}

.lview {
  display: inline-block;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--d-line);
  border-radius: 0.5rem;
  background-color: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms, color 160ms;
}

.lview:hover {
  border-color: var(--d-green);
  color: var(--d-green);
}

/* Loan ledger — header */
.lgh {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.lgh__type {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--d-ink);
  margin: 0;
}

.lgh__id {
  font-size: 0.8125rem;
  color: var(--d-mut);
  margin: 0.1875rem 0 0;
}

.lgh__progress {
  margin-top: 1.125rem;
}

.lgh__progress small {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--d-mut);
}

/* Repayment progress bar */
.lprog {
  height: 0.375rem;
  margin-top: 0.75rem;
  border-radius: 999px;
  background-color: var(--d-line);
  overflow: hidden;
}

.lprog span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--d-green), var(--d-green-soft));
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Loan details side panel
   -------------------------------------------------------------------------- */

.ldrawer {
  position: fixed;
  inset: 0;
  z-index: 240;
}

.ldrawer__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(6, 22, 14, 0.45);
  opacity: 0;
  transition: opacity 240ms;
}

.ldrawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(26.5rem, 100%);
  display: flex;
  flex-direction: column;
  background-color: var(--d-card);
  box-shadow: -24px 0 60px -30px rgba(6, 22, 14, 0.4);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ldrawer.is-open .ldrawer__scrim {
  opacity: 1;
}

.ldrawer.is-open .ldrawer__panel {
  transform: translateX(0);
}

.ldrawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--d-line);
}

.ldrawer__type {
  font-size: 1rem;
  font-weight: 700;
  color: var(--d-ink);
}

.ldrawer__id {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--d-mut);
}

.ldrawer__x {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 0.5rem;
  color: var(--d-mut);
  cursor: pointer;
  transition: background-color 160ms, color 160ms;
}

.ldrawer__x:hover {
  background-color: var(--d-tint);
  color: var(--d-green);
}

.ldrawer__x svg {
  width: 1.05rem;
  height: 1.05rem;
}

.ldrawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 2rem;
}

.ldrawer__balance {
  padding: 1rem 1.125rem 1.125rem;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, var(--clr-primary-deep), var(--clr-primary));
  color: #fff;
}

.ldrawer__balance > span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.ldrawer__balance strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ldrawer__balance .lprog {
  background-color: rgba(255, 255, 255, 0.22);
}

.ldrawer__balance .lprog span {
  background: linear-gradient(90deg, var(--clr-accent), #f6c469);
}

.ldrawer__balance small {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.71875rem;
  color: rgba(255, 255, 255, 0.8);
}

.ldrawer__sub {
  margin: 1.5rem 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--d-mut);
}

.ldrawer__kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
}

.ldrawer__kv > div dt {
  font-size: 0.6875rem;
  color: var(--d-mut);
}

.ldrawer__kv > div dd {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
}

.ldrawer__list {
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
  overflow: hidden;
}

.lrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6875rem 1rem;
  font-size: 0.8125rem;
}

.lrow + .lrow {
  border-top: 1px solid var(--d-line);
}

.lrow__main {
  min-width: 0;
}

.lrow__main strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lrow__main small {
  display: block;
  margin-top: 0.0625rem;
  font-size: 0.6875rem;
  color: var(--d-mut);
}

.lrow__amt {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--d-ink);
}

.lrow--doc {
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
  font: inherit;
  transition: background-color 160ms;
}

.lrow--doc:hover {
  background-color: var(--d-tint);
}

.lrow--doc svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--d-green);
}

/* --------------------------------------------------------------------------
   Guarantorship requests
   -------------------------------------------------------------------------- */

.greq-intro h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--d-ink);
}

.greq-intro p {
  margin-top: 0.375rem;
  max-width: 46rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--d-mut);
}

.greq-list {
  display: grid;
  gap: 1rem;
}

.greq {
  padding: 1.375rem 1.5rem;
  background-color: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: 1rem;
  box-shadow: var(--d-shadow);
}

.greq__top {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.greq__avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background-color: var(--d-tint);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--d-green);
}

.greq__who {
  min-width: 0;
  flex: 1;
}

.greq__who strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--d-ink);
}

.greq__who small {
  display: block;
  margin-top: 0.0625rem;
  font-size: 0.75rem;
  color: var(--d-mut);
}

.greq__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem 1.25rem;
  margin-top: 1.25rem;
  padding: 0.9375rem 1.125rem;
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
}

.greq__meta > div span {
  display: block;
  font-size: 0.6875rem;
  color: var(--d-mut);
}

.greq__meta > div strong {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.84375rem;
  font-weight: 700;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}

.greq__more {
  margin-top: 0.875rem;
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
  overflow: hidden;
}

.greq__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
  cursor: pointer;
  list-style: none;
}

.greq__more summary::-webkit-details-marker {
  display: none;
}

.greq__more summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--d-mut);
  border-bottom: 2px solid var(--d-mut);
  transform: rotate(45deg);
  transition: transform 200ms;
}

.greq__more[open] summary::after {
  transform: rotate(-135deg);
}

.greq__more-body {
  padding: 0 1.125rem 1.125rem;
  display: grid;
  gap: 0.875rem;
}

.greq__more-body h5 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-mut);
}

.greq__more-body p,
.greq__more-body li {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--d-ink);
}

.greq__more-body ul {
  margin-top: 0.25rem;
  padding-left: 1.125rem;
  list-style: disc;
}

.greq__more-body ul li {
  margin-top: 0.125rem;
  color: var(--d-mut);
}

.greq__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.125rem;
}

.greq__actions .dtop__quick {
  padding: 0.4375rem 0.8125rem;
  font-size: 0.75rem;
  border-radius: 0.5rem;
}

.greq__actions .dprofile__edit {
  width: auto;
  margin-top: 0;
  padding: 0.4375rem 0.8125rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
}

.greq__decline {
  padding: 0.4375rem 0.8125rem;
  border: 1px solid var(--d-line);
  border-radius: 0.5rem;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--d-danger);
  cursor: pointer;
  transition: border-color 160ms, background-color 160ms;
}

.greq__decline:hover {
  border-color: var(--d-danger);
  background-color: rgba(220, 38, 38, 0.06);
}

.greq__result {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.125rem;
  padding: 0.8125rem 1.125rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.greq__result svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

.greq__result--approved {
  background-color: var(--d-tint);
  color: var(--d-green);
}

.greq__result--declined {
  background-color: rgba(220, 38, 38, 0.08);
  color: var(--d-danger);
}

/* --------------------------------------------------------------------------
   Portal confirmation modal
   -------------------------------------------------------------------------- */

.dmodal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.dmodal[hidden] {
  display: none;
}

.dmodal__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(6, 22, 14, 0.5);
  opacity: 0;
  transition: opacity 220ms;
}

.dmodal__panel {
  position: relative;
  width: min(28.5rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background-color: var(--d-card);
  border-radius: 1.125rem;
  box-shadow: var(--d-shadow-lift);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 240ms, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dmodal.is-open .dmodal__scrim {
  opacity: 1;
}

.dmodal.is-open .dmodal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dmodal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.375rem 0.875rem;
  border-bottom: 1px solid var(--d-line);
}

.dmodal__head h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--d-ink);
}

.dmodal__body {
  padding: 1.125rem 1.375rem;
}

.dmodal__amount {
  padding: 0.9375rem 1.125rem;
  border-radius: 0.75rem;
  background-color: var(--d-tint);
  text-align: center;
}

.dmodal__amount span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-green);
}

.dmodal__amount strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--d-green);
}

.dmodal__amount small {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.75rem;
  color: var(--d-mut);
}

.dmodal__points {
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
  padding-left: 1.125rem;
  list-style: disc;
}

.dmodal__points li {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--d-ink);
}

.dmodal__disclaimer {
  margin-top: 1rem;
  padding: 0.75rem 0.9375rem;
  border-left: 3px solid var(--clr-accent);
  border-radius: 0 0.5rem 0.5rem 0;
  background-color: rgba(233, 161, 59, 0.08);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--d-mut);
}

.dmodal__check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1.125rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--d-line);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color 160ms, background-color 160ms;
}

.dmodal__check:hover {
  border-color: var(--d-green);
}

.dmodal__check input {
  margin-top: 0.125rem;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  accent-color: var(--d-green);
  cursor: pointer;
}

.dmodal__check span {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--d-ink);
}

.dmodal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  padding: 0.875rem 1.375rem 1.25rem;
}

.dmodal__foot .dprofile__edit,
.dmodal__foot .dtop__quick {
  padding: 0.4375rem 0.9375rem;
  font-size: 0.75rem;
  border-radius: 0.5rem;
}

.dmodal__foot .dprofile__edit {
  width: auto;
  margin-top: 0;
}

.dmodal__foot .dtop__quick[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Save-success banner — same shape as the login alert, success colours.
   Sits above the account panels rather than in a modal. */
.acc-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #146c34;
  background-color: #eefaf1;
  border: 1px solid #c7ead3;
  border-radius: 0.625rem;
}

.acc-alert svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  margin-top: 0.05rem;
}

.acc-alert[hidden] {
  display: none;
}

body.dash[data-theme="dark"] .acc-alert {
  color: #a7e8bd;
  background-color: rgba(45, 190, 96, 0.12);
  border-color: rgba(45, 190, 96, 0.32);
}

@media (prefers-reduced-motion: no-preference) {
  .acc-alert {
    animation: dash-in 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
}

/* Failure variant — same banner, red. Used at the top of the service forms so
   the server can report a rejected request without any JavaScript: render it
   with the message inside, or leave the `hidden` attribute on. */
.acc-alert--error {
  color: #8a1c1c;
  background-color: #fdf0f0;
  border-color: #f3cccc;
}

body.dash[data-theme="dark"] .acc-alert--error {
  color: #f5b5b5;
  background-color: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.32);
}

/* Warning variant — the request went through but needs attention. */
.acc-alert--warn {
  color: #8a5a12;
  background-color: #fdf6e9;
  border-color: #f0dcb8;
}

body.dash[data-theme="dark"] .acc-alert--warn {
  color: #f0cf94;
  background-color: rgba(233, 161, 59, 0.14);
  border-color: rgba(233, 161, 59, 0.34);
}

/* --------------------------------------------------------------------------
   Responsive + reduced motion
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .greq__meta {
    grid-template-columns: repeat(2, 1fr);
  }

  .ldrawer__kv {
    grid-template-columns: 1fr;
  }

  .loan-tabs {
    display: flex;
    align-items: center;
    justify-self: stretch;
  }

  .loan-tabs .acc-tab {
    flex: 1;
  }
}

@media (max-width: 30rem) {
  .greq__actions .dtop__quick,
  .greq__actions .greq__decline,
  .greq__actions .dprofile__edit {
    flex: 1 1 100%;
    text-align: center;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ldrawer__panel,
  .ldrawer__scrim,
  .dmodal__panel,
  .dmodal__scrim,
  .lprog span {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   9. Print

   What the Print button in the table toolbars produces, and what the member
   gets from Ctrl+P on any dashboard page. On screen these pages are an app —
   a fixed sidebar, a sticky top bar, a table scrolling inside a 56vh box. On
   paper all three are wrong: the sidebar is furniture, and an overflow box
   prints only the slice that fits, silently dropping the rest of the table.
   So print gets its own layout — the record, and nothing that operates it.

   js/table-tools.js does the other half: it un-hides the rows paging had
   taken off screen before opening the dialog, and puts them back after.
   -------------------------------------------------------------------------- */

@media print {
  /* Paper is white whatever the member is using on screen. The dark theme's
     light-on-dark text would otherwise come out nearly invisible, since
     browsers drop background colours by default but keep the text ones. */
  body.dash,
  body.dash[data-theme="dark"] {
    --d-bg: #ffffff;
    --d-card: #ffffff;
    --d-ink: #000000;
    --d-mut: #444444;
    --d-line: #999999;
    --d-tint: #ffffff;
    --d-shadow: none;
    --d-shadow-lift: none;

    background: #fff;
    color: #000;
  }

  @page {
    size: A4;
    margin: 14mm;
  }

  /* The app frame and everything that only exists to be clicked. */
  .dsb,
  .dsb__scrim,
  .dtop,
  .dtoasts,
  .stm-exports,
  .stm-filter__actions,
  .stm-filter__error,
  .dtx__pages,
  .dpage,
  .dtx__view,
  .greq__actions,
  .acc-tabs,
  .dmodal,
  .ldrawer,
  .dsb__collapse,
  .dtop__burger,
  [data-export],
  [data-svc-back],
  [data-svc-review],
  [data-svc-submit] {
    display: none !important;
  }

  /* The sidebar is gone, so the margin it reserved has to go with it. */
  .dash__main {
    margin-left: 0 !important;
    min-height: 0;
    display: block;
  }

  /* The 12-column grid collapses to a single flow — column tracks mean
     nothing once the page is a fixed width of paper. */
  .dash__content {
    display: block;
    max-width: none;
    padding: 0;
  }

  .dash__content > * {
    margin-bottom: 0.5rem;
  }

  /* Cards keep their outline as a light rule but lose the app styling, and
     are asked not to straddle a page fold. */
  .dcard {
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Cards animate in on load; a print snapshot taken mid-animation would
     come out blank, so pin them to their finished state. */
  .dash [data-in] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* The one that actually breaks the Print button: on screen the table
     scrolls inside this box, and an overflow container prints only what
     fits inside it. Let the table run as long as it needs and take as many
     sheets as that takes. */
  .stm-tablewrap {
    max-height: none !important;
    overflow: visible !important;
    border: none;
    border-radius: 0;
  }

  .dtx__table,
  .stm-table {
    width: 100%;
    font-size: 10pt;
  }

  /* A sticky header sticks to nothing on paper — it would print once, at the
     top of the first sheet. As a proper table header group the browser
     repeats it on every sheet instead. */
  .stm-table thead th,
  .dtx__table thead th {
    position: static !important;
    background: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .dtx__table thead,
  .stm-table thead {
    display: table-header-group;
  }

  .dtx__table tr,
  .stm-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .dtx__table th,
  .dtx__table td {
    border-bottom: 1px solid #ccc;
  }

  /* Column headers that sort are buttons on screen; on paper they are just
     the column's name. */
  .adm-sort {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
  }

  .adm-sort svg {
    display: none;
  }

  /* Status and category badges read as plain outlined text — their fill is a
     background colour the printer would drop anyway. */
  .dbadge {
    border: 1px solid #999 !important;
    background: none !important;
    color: #000 !important;
  }

  /* A closed <details> — the loan terms behind "More about this loan" — is a
     screen affordance for saving space. On paper there is nothing to click,
     and those are the terms the member is being asked to stand behind, so
     they print open. Chrome hides the closed content with content-visibility
     rather than display, hence both. */
  details > *:not(summary) {
    display: block !important;
    content-visibility: visible !important;
  }

  details > summary {
    list-style: none;
    font-weight: 600;
  }

  /* Rows the pager or a filter has hidden stay hidden; table-tools.js decides
     which of those come back before printing. */
  [hidden] {
    display: none !important;
  }
}

/* ==========================================================================
   Dashboard notice — the guarantorship alert

   Server-controlled: the markup ships with `hidden` and the backend takes it
   off. [hidden] is honoured below with !important because this sits in a grid
   whose `display` would otherwise override the attribute and show a notice
   nobody meant to show.
   ========================================================================== */

.dnotice {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid #f0d9a8;
  border-left: 3px solid #d08700;
  border-radius: 0.75rem;
  background-color: #fffaf0;
  color: var(--d-ink);
}

.dnotice[hidden] {
  display: none !important;
}

.dnotice__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: #fdf0d5;
  color: #a86a00;
}

.dnotice__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

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

.dnotice__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--d-ink);
}

/* The count. Sized from the text so it stays round with 1 or 12 in it. */
.dnotice__badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.4375rem;
  border-radius: 99px;
  background-color: #d08700;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dnotice__text {
  margin-top: 0.3125rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--d-mut);
}

.dnotice__text strong {
  font-weight: 600;
  color: var(--d-ink);
}

.dnotice__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.dnotice__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  background-color: #111827;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.dnotice__cta:hover {
  opacity: 0.88;
}

.dnotice__close {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--d-mut);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dnotice__close svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.dnotice__close:hover {
  background-color: rgba(17, 24, 39, 0.06);
  color: var(--d-ink);
}

/* ----- Dark ----- */

[data-theme="dark"] .dnotice {
  background-color: rgba(208, 135, 0, 0.1);
  border-color: rgba(240, 217, 168, 0.22);
  border-left-color: #d08700;
}

[data-theme="dark"] .dnotice__icon {
  background-color: rgba(208, 135, 0, 0.18);
  color: #f0c274;
}

[data-theme="dark"] .dnotice__cta {
  background-color: #e8ede9;
  color: #0e1512;
}

[data-theme="dark"] .dnotice__close:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* ----- Narrow screens: the actions drop under the message ----- */

@media (max-width: 40rem) {
  .dnotice {
    flex-wrap: wrap;
  }

  .dnotice__body {
    flex-basis: calc(100% - 3.125rem);
  }

  .dnotice__actions {
    width: 100%;
    justify-content: space-between;
    margin-top: 0.25rem;
  }
}

/* ==========================================================================
   "Review" on a pending guarantorship row

   The table is the record of every request; approving happens on the cards
   behind the Pending tab. This button carries the member from one to the
   other, so a pending row is actionable from where they found it.
   ========================================================================== */

.greq-go {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--d-line);
  border-radius: 0.375rem;
  background-color: transparent;
  color: var(--d-ink);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.greq-go:hover {
  background-color: var(--d-ink);
  border-color: var(--d-ink);
  color: var(--d-card);
}

/* Decided rows keep the column but have nothing to act on. */
.greq-go__none {
  color: var(--d-mut);
}

/* The card the member was sent to, marked for a couple of seconds so it is
   obvious which of the pending requests they landed on. */
.greq.is-targeted {
  border-color: #d08700;
  box-shadow: 0 0 0 3px rgba(208, 135, 0, 0.16);
}

@media (prefers-reduced-motion: no-preference) {
  .greq {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
}

/* ==========================================================================
   Platform news dialog

   Rides on .dmodal (scrim, panel, open transition) so it matches the
   confirmation dialogs already in the portal. Only the parts unique to an
   announcement are here.
   ========================================================================== */

.dnews .dmodal__panel {
  width: min(30rem, 100%);
  overflow: hidden;
}

/* The band across the top — what makes this read as an announcement rather
   than a form asking for a decision. */
.dnews__banner {
  display: grid;
  place-items: center;
  height: 6.5rem;
  background: linear-gradient(135deg, #14532d 0%, #1c7a45 55%, #d08700 190%);
  color: rgba(255, 255, 255, 0.92);
}

.dnews__banner svg {
  width: 2.5rem;
  height: 2.5rem;
}

.dnews .dmodal__head {
  align-items: flex-start;
  padding-top: 1.125rem;
  border-bottom: 0;
}

.dnews__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin-bottom: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #1c7a45;
}

/* The date, quieter than the label it follows. */
.dnews__eyebrow span {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--d-mut);
}

.dnews__eyebrow span::before {
  content: "·";
  margin-right: 0.4375rem;
}

.dnews .dmodal__head h3 {
  font-size: 1.125rem;
  line-height: 1.3;
}

.dnews .dmodal__body {
  padding-top: 0;
}

.dnews__text {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--d-mut);
}

[data-theme="dark"] .dnews__eyebrow {
  color: #6ed19a;
}

@media (max-width: 30rem) {
  .dnews__banner {
    height: 5rem;
  }

  .dnews__banner svg {
    width: 2rem;
    height: 2rem;
  }
}

/* ==========================================================================
   `hidden` must win

   The browser's own rule for the attribute is `[hidden] { display: none }` —
   one class's worth of nothing, at the very bottom of the cascade. Any rule
   in this file that sets a display beats it. So a component styled
   `display: flex` stays on screen when the server marks it hidden, keeping
   its padding, margin and border: an empty band where something used to be.

   That is what happened on the outstanding-loans page for a member with no
   loans — .stm-summary is flex, so `hidden` on it did nothing and the strip
   sat there empty above the table.

   Rather than guard each component one at a time and miss the next one, the
   attribute wins outright here. If an element needs to be on screen, it does
   not carry `hidden` — which is what the attribute means everywhere else.
   ========================================================================== */

[hidden] {
  display: none !important;
}