/* benefits screens: styles for this module only. Loaded after index.html and theme.css, so a plain selector here wins ties. */
/* Everything is scoped to the Benefits page. Tones come from .db-t-* (--c1, --c2 gradient stops, --cg glow as r, g, b). */

/* stat tiles: the icon takes the tile's tone */
html #page[data-module="benefits"] .kpi[class*="db-t-"] .l .ic { background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 16px -9px rgba(var(--cg), .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
html #page[data-module="benefits"] .kpi .s .bn-meter { margin-top: 8px; }
html #page[data-module="benefits"] .grid.g6 .kpi .v { font-size: 24px; }

/* card titles with a small tinted icon */
#page[data-module="benefits"] .bn-h { display: flex; align-items: center; gap: 10px; }
#page[data-module="benefits"] .card > .bn-h { margin-bottom: 12px; }
#page[data-module="benefits"] .bn-hi { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; color: var(--c1); background: rgba(var(--cg), .12); }

/* gradient icon tile: plan type, scheme, category, facility */
#page[data-module="benefits"] .bn-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 16px -9px rgba(var(--cg), .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
#page[data-module="benefits"] .bn-ic.sm { width: 30px; height: 30px; border-radius: 10px; }
#page[data-module="benefits"] .bn-ic svg, #page[data-module="benefits"] .bn-hi svg { display: block; }
#page[data-module="benefits"] .bn-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
#page[data-module="benefits"] .bn-cell > span:last-child { min-width: 0; }

/* meter: a soft track in the tone, a gradient fill */
#page[data-module="benefits"] .bn-meter { display: block; height: 6px; border-radius: 6px; background: rgba(var(--cg), .13); overflow: hidden; min-width: 60px; }
#page[data-module="benefits"] .bn-meter i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--c1), var(--c2)); transform-origin: left; }
#page[data-module="benefits"].page-in .bn-meter i, #page[data-module="benefits"].page-in .bn-split i { animation: db-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
#page[data-module="benefits"] .bn-mrow { display: flex; align-items: center; gap: 10px; min-width: 120px; }
#page[data-module="benefits"] .bn-mrow .bn-meter { flex: 1; }
#page[data-module="benefits"] .bn-mrow b { font-weight: 500; font-size: 12px; color: var(--text-2); white-space: nowrap; }

/* split bar with a legend */
#page[data-module="benefits"] .bn-split { display: flex; gap: 3px; height: 10px; border-radius: 6px; overflow: hidden; background: var(--track); }
#page[data-module="benefits"] .bn-split i { display: block; height: 100%; background: linear-gradient(90deg, var(--c1), var(--c2)); transform-origin: left; }
#page[data-module="benefits"] .bn-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
#page[data-module="benefits"] .bn-leg span { display: inline-flex; align-items: center; gap: 6px; }
#page[data-module="benefits"] .bn-leg i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); }
#page[data-module="benefits"] .bn-leg b { color: var(--text); font-weight: 600; }

/* the big number of a card */
#page[data-module="benefits"] .bn-hero { display: flex; flex-direction: column; gap: 2px; }
#page[data-module="benefits"] .bn-hero .num { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: #1E1B4B; line-height: 1.15; }
#page[data-module="benefits"] .bn-hero small { font-size: 12px; color: var(--text-2); }

/* My benefits: one card per cover */
#page[data-module="benefits"] .bn-covs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
#page[data-module="benefits"] .bn-cov { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 16px; background: linear-gradient(160deg, rgba(var(--cg), .07), rgba(255, 255, 255, 0) 60%), #fff; border: 1px solid rgba(var(--cg), .16); overflow: hidden; min-width: 0; }
#page[data-module="benefits"] .bn-cov-h { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
#page[data-module="benefits"] .bn-cov-h .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#page[data-module="benefits"] .bn-cov-h b { font-weight: 600; line-height: 1.3; }
#page[data-module="benefits"] .bn-cov-h .xs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page[data-module="benefits"] .bn-cov .bn-hero .num { color: var(--c1); }
#page[data-module="benefits"] .bn-mem { display: flex; flex-wrap: wrap; gap: 6px; }
#page[data-module="benefits"] .bn-mem > span { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(var(--cg), .18); font-size: 12px; color: var(--text-soft); }
#page[data-module="benefits"] .bn-mem .av { width: 22px; height: 22px; font-size: 10px; }
#page[data-module="benefits"] .bn-mem em { font-style: normal; }
#page[data-module="benefits"] .bn-cov-f { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed rgba(var(--cg), .22); font-size: 12px; color: var(--text-2); }
#page[data-module="benefits"] .bn-cov-f b { color: var(--text); font-weight: 600; }

/* small empty line inside a card */
#page[data-module="benefits"] .bn-empty { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-size: 13px; }
#page[data-module="benefits"] .bn-empty svg { color: var(--text-3); flex: none; }

/* a quiet timeline: a dot per entry and a hairline between */
#page[data-module="benefits"] .bn-tl .li { position: relative; border-bottom: 0; padding-left: 4px; }
#page[data-module="benefits"] .bn-tl .li + .li::before { content: ""; position: absolute; left: 8px; top: -12px; height: 22px; border-left: 2px solid var(--hair); }
#page[data-module="benefits"] .bn-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 0 4px rgba(var(--cg), .12); }

/* claims: the status pipeline */
#page[data-module="benefits"] .bn-pipe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
#page[data-module="benefits"] .bn-stage { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; background: rgba(var(--cg), .07); min-width: 0; }
#page[data-module="benefits"] .bn-stage .bn-ic { margin-bottom: 4px; }
#page[data-module="benefits"] .bn-stage b { font-size: 22px; font-weight: 600; line-height: 1.1; color: #1E1B4B; }
#page[data-module="benefits"] .bn-stage > span:last-child { font-size: 12px; color: var(--text-2); line-height: 1.3; }
#page[data-module="benefits"] .bn-stage:not(:last-child)::after { content: ""; position: absolute; right: -7px; top: 50%; width: 6px; height: 6px; border-top: 2px solid var(--border-2); border-right: 2px solid var(--border-2); transform: translateY(-50%) rotate(45deg); }
#page[data-module="benefits"] .bn-stage.zero { background: var(--surface-2); }
#page[data-module="benefits"] .bn-stage.zero .bn-ic { background: #e2e8f0; color: #94a3b8; box-shadow: none; }
#page[data-module="benefits"] .bn-stage.zero b { color: var(--text-3); }

/* picked/clickable cards in a card list: icon in the header */
#page[data-module="benefits"] .bn-tile-h { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
#page[data-module="benefits"] .bn-tile-h > .bn-ic { margin-right: auto; }
#page[data-module="benefits"] .cardlist > .card { display: flex; flex-direction: column; }
#page[data-module="benefits"] .cardlist > .card > .row:last-child { margin-top: auto !important; padding-top: 12px; }

/* stacked tables inside cards read lighter */
#page[data-module="benefits"] .t td .bn-ic.sm { width: 28px; height: 28px; border-radius: 9px; }

@media (max-width: 899px) {
  #page[data-module="benefits"] .bn-pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #page[data-module="benefits"] .bn-stage:nth-child(3n)::after { display: none; }
  #page[data-module="benefits"] .bn-covs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  #page[data-module="benefits"] .bn-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page[data-module="benefits"] .bn-stage::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #page[data-module="benefits"] .bn-meter i, #page[data-module="benefits"] .bn-split i { animation: none !important; }
}