:root {
  --accent:#4F46E5;          
  --card-border: #e8e8ee;            
  --card-shadow: 0 1px 2px rgba(20, 20, 40, 0.04);
  --card-shadow-hover: 0 8px 20px rgba(20, 20, 40, 0.08),
                       0 2px 6px rgba(109, 91, 208, 0.08);
  --card-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out feel */
  --card-duration: 200ms;
}

.risk-grid { 
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; 
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171923;
  background: #f8f8f6;
  font-synthesis: none;
}
.risk-card {
  min-width: 0; padding: 16px 15px 14px; border: 1px solid #e6e5e2;
  border-radius: 13px; background: rgba(255,255,255,.63); box-shadow: 0 1px 2px rgba(20,25,35,.015);
}
.risk-card h2 {
  font: 400 clamp(1.05rem, 1.48vw, 1.45rem)/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: -.035em; min-height: 44px; margin: 2px 3px 17px;
}
.alert-row {
  display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 9px 12px;
  border: 1px solid #efefee; border-radius: 10px; background: #fff; color: #475166;
  font-size: 11px; white-space: nowrap; overflow: hidden;
}
.alert-row > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.chevron { margin-left: auto; font-size: 23px; font-weight: 300; color: #7a8499; line-height: 1; }
.dot { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; display: inline-block; }
.red { background: #ff5361; } .orange { background: #ff941d; } .yellow { background: #ffbf19; }
.icon-box { width: 23px; height: 23px; display: inline-grid; place-items: center; border-radius: 7px; flex: 0 0 23px; font-size: 12px; }
.purple { color: #6d48ed; background: #f0edff; } .lavender { color: #7c6cf4; background: #f0efff; }
.mini-panel { margin-top: 0; border: 1px solid #efefee; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.72); }
.record { min-height: 56px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 7px; padding: 9px 9px 7px 12px; border-bottom: 1px solid #f0f0ef; font-size: 10px; }
.record:last-child, .bill-row:last-child { border-bottom: 0; }
.record > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amount { font-weight: 600; white-space: nowrap; }
.record small { grid-column: 2; color: #858da0; text-align: right; margin-top: -8px; font-size: 9px; }
.pill { display: inline-block; padding: 7px 9px; border-radius: 10px; font-size: 10px; white-space: nowrap; line-height: 1; font-weight: 600; }
.red-pill { color: #ef4652; background: #ffe6e7; }
.orange-pill { color: #d76d12; background: #fff0df; }
.yellow-pill { color: #a86a00; background: #fff4d6; }
.gray-pill { color: #4e5b75; background: #edf0f7; }
.vendor { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid #f0f0ef; }
.round-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #edf0f8; color: #35445f; }
.vendor b, .bill-row b { display: block; font-size: 11px; font-weight: 500; }
small { display: block; color: #858da0; font-size: 10px; margin-top: 4px; }
.metric-split { display: grid; grid-template-columns: 1fr 1fr; padding: 11px 12px 6px; }
.metric-split > div + div { border-left: 1px solid #eee; padding-left: 12px; }
.metric-split b { display: block; margin-top: 5px; font-size: 14px; font-weight: 500; }
.bar-chart { height: 62px; padding: 0 15px; display: flex; align-items: end; gap: 11px; }
.bar-chart i { flex: 1; min-width: 7px; border-radius: 4px 4px 0 0; background: #e8e5ff; }
.months { display: flex; justify-content: space-around; padding: 5px 8px 8px; color: #858da0; font-size: 9px; }
.bill-row { min-height: 69px; display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: center; column-gap: 8px; padding: 9px 8px; border-bottom: 1px solid #f0f0ef; }
.doc-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #f0f2f8; color: #33415e; font-size: 13px; }
.bill-row > div { min-width: 0; }
.bill-row b, .bill-row small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bill-row strong { font-size: 10px; font-weight: 500; white-space: nowrap; }
.bill-row .pill { grid-column: 3; justify-self: end; margin-top: 3px; }
.compare { display: flex; align-items: center; gap: 5px; padding: 17px 12px 9px; }
.compare > div { flex: 1; min-width: 0; }
.compare > div + div { border-left: 1px solid #d8dbe2; padding-left: 20px; }
.compare b { display: block; font-size: clamp(1.1rem, 1.3vw, 1.45rem); font-weight: 500; letter-spacing: -.04em; white-space: nowrap; }
.compare small { font-size: 10px; }
.compare .pill { margin-left: auto; }
.chart-panel > .pill { margin-left: 12px; }
.line-chart { display: block; width: calc(100% - 24px); height: 88px; margin: 12px 12px 0; overflow: visible; }
.gridline { fill: none; stroke: #f0f0f0; stroke-width: 1; }
.plan-line { fill: none; stroke: #c2c9db; stroke-width: 1.5; stroke-dasharray: 4 4; }
.actual-line { fill: none; stroke: #5145ff; stroke-width: 1.7; }
.area { fill: url(#chartFill); fill: #f0efff; opacity: .6; }
.end-dot { fill: #ff5361; stroke: #ffe1e3; stroke-width: 5; }
.dso { display: flex; justify-content: space-between; gap: 8px; padding: 14px 12px 5px; }
.dso b { display: block; font-size: 23px; font-weight: 500; letter-spacing: -.04em; }
.dso .pill { margin-bottom: 2px; }
.expense-title { display: flex; align-items: center; gap: 10px; padding: 12px; }
.expense-title b { font-size: 11px; font-weight: 600; }
.red-text { color: #ed4d58; }
.expense-bars { height: 104px; display: flex; align-items: end; gap: 7px; padding: 0 12px 0; }
.expense-bars i { flex: 1; min-width: 6px; background: #efedff; border-radius: 3px 3px 0 0; }
.expense-bars i.hot { background: #ff5361; }
@media (min-width: 1500px) {
  .risk-card { padding: 18px 16px 15px; }
  .risk-card h2 { min-height: 47px; }
  .bill-row { min-height: 70px; }
}
@media (max-width: 1200px) {
  .risk-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .risk-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .risk-card { padding: 12px 10px; }
  .risk-card h2 { font-size: 1.12rem; min-height: 44px; margin: 2px 1px 12px; }
  .alert-row { padding: 8px; gap: 7px; font-size: 10px; }
  .record { grid-template-columns: minmax(0,1fr) auto; }
  .record .pill { grid-column: 2; grid-row: 1; }
  .record small { grid-column: 1 / -1; grid-row: 2; text-align: left; margin: 0; }
  .bill-row { grid-template-columns: 24px minmax(0,1fr); gap: 7px; padding: 9px 6px; }
  .bill-row strong { grid-column: 2; grid-row: 2; }
  .bill-row .pill { grid-column: 2; grid-row: 3; justify-self: start; }
  .doc-icon { width: 24px; height: 24px; }
  .compare { gap: 10px; padding: 12px 8px 8px; }
  .compare > div + div { padding-left: 10px; }
  .compare b { font-size: 1.1rem; }
  .compare .pill { margin: 0; }
}
@media (max-width: 430px) {
  .risk-grid { grid-template-columns: 1fr; }
  .risk-card h2 { font-size: 1.3rem; min-height: 0; }
  .bill-row { grid-template-columns: 27px minmax(0,1fr) auto; }
  .bill-row strong { grid-column: 3; grid-row: 1; }
  .bill-row .pill { grid-column: 3; grid-row: 2; justify-self: end; }
}

/* Whole card stays clickable: the link covers the entire card */
 .risk-card mini-panel {
  transform-origin: center top;
  transition: transform var(--card-duration) var(--card-ease);
}

.risk-card .chevron {
  display: inline-block;
  transition: transform var(--card-duration) var(--card-ease);
} 

/* Hover + keyboard focus so the effect isn't mouse-only */
.risk-card:hover,
.risk-card:focus-within {
  cursor: pointer;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--card-border));
  box-shadow: var(--card-shadow-hover);
  transition: transform 0.2s ease-in-out;
}

/* .risk-card:hover .mini-panel,
.risk-card:focus-within .mini-panel {
  transform: scale(1.05);
  transition: transform 0.2s ease-in-out;
} */

.risk-card:hover .chevron,
.risk-card:focus-within .chevron {
  transform: translateX(3px);
}

.alert-row:focus-visible {
  outline: none; /* the card's own focus ring below replaces it */
}
.risk-card:has(.alert-row:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion: keep the color/shadow feedback, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .risk-card,
  .mini-panel,
  .risk-card .chevron {
    transition: border-color 0.01ms, box-shadow 0.01ms;
  }

  .risk-card:hover,
  .risk-card:focus-within,
  .risk-card:hover .card__content,
  .risk-card:focus-within .card__content,
  .risk-card:hover .chevron,
  .risk-card:focus-within .chevron {
    transform: none;
  }
}