/* WalletWhisper's page: a light band in the app's blues, its dashboard card, and the sample-household demo
   (demo.js). Chart colors follow the app: deep blue, sky blue, orange, green, violet, always in that order
   and always with their values written beside them. */

:root { --product-accent: #005594; --product-dark: #0B3354; --product-glow: rgba(67, 152, 211, 0.5); }

.ww-band {
    background:
        radial-gradient(55% 80% at 100% 0%, rgba(67, 152, 211, 0.2), transparent 70%),
        radial-gradient(45% 70% at 0% 100%, rgba(238, 141, 61, 0.1), transparent 70%),
        #F1F5F8;
    border-bottom: 1px solid var(--rule);
}
.ww-band .btn-solid, .product-cta .btn-solid { background: #005594; border-color: #005594; color: var(--white); }
.ww-band .btn-solid:hover, .product-cta .btn-solid:hover { background: #00406F; border-color: #00406F; }

.ww-card {
    padding: 1.25rem 1.35rem;
    background: var(--white);
    border: 1px solid rgba(23, 42, 58, 0.1);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(23, 42, 58, 0.04), 0 18px 40px -24px rgba(23, 42, 58, 0.3);
}
.ww-hero-card { justify-self: end; width: 100%; max-width: 420px; animation: ww-rise 0.5s var(--ease) 0.1s both; }
@keyframes ww-rise { from { opacity: 0; transform: translateY(10px); } }
.ww-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ww-month { font-weight: 700; letter-spacing: -0.01em; }
.ww-ok { padding: 2px 10px; font-size: 0.75rem; font-weight: 600; color: #1F6B32; background: #E6F2E9; border-radius: 980px; }
.ww-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.ww-stat-label { font-size: 0.75rem; color: var(--gray); }
.ww-stat { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ww-up { color: #A4511A; }
.ww-split { display: flex; align-items: center; gap: 1.25rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #EDF0F2; }
.ww-donut { flex: none; width: 112px; height: 112px; transform: rotate(-90deg); }
.ww-donut circle { fill: none; stroke-width: 14; }
.ww-legend { flex: 1; min-width: 0; list-style: none; font-size: 0.85rem; }
.ww-legend li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.ww-legend i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.ww-legend b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.ww-legend .ww-pct { width: 3.2em; text-align: right; color: var(--gray); font-variant-numeric: tabular-nums; }
.ww-people { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid #EDF0F2; }
.ww-person { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; align-items: center; gap: 10px; margin-top: 6px; font-size: 0.85rem; }
.ww-person b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ww-track { height: 8px; background: #EDF0F2; border-radius: 4px; }
.ww-track i { display: block; height: 100%; background: #005594; border-radius: 4px; }

/* The demo */
.ww-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 1.5rem; }
.ww-seg { display: inline-flex; padding: 3px; background: #E7EBEE; border-radius: 980px; }
.ww-seg button {
    min-height: 40px; padding: 0.4rem 1rem; font: inherit; font-size: 0.9rem; font-weight: 500; color: var(--gray);
    background: transparent; border: 0; border-radius: 980px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.ww-seg button:hover { color: var(--navy); }
.ww-seg button[aria-pressed="true"] { color: var(--navy); background: var(--white); box-shadow: 0 1px 3px rgba(23, 42, 58, 0.15); }
.ww-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.ww-check input { width: 18px; height: 18px; accent-color: #005594; }
.ww-panels { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1rem; }

.ww-chart-card { position: relative; }
.ww-chart { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 2vw, 18px);
            height: 280px; margin-top: 2.25rem; padding-left: 2.6rem; border-bottom: 1px solid #C9D0D5; }
.ww-grid { position: absolute; left: 2.6rem; right: 0; height: 0; border-top: 1px dashed #E3E7EA; pointer-events: none; }
.ww-grid span { position: absolute; left: -2.6rem; top: -0.55rem; width: 2.2rem; font-size: 0.7rem; text-align: right; color: var(--gray); }
.ww-col {
    position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
    height: 100%; padding: 0 clamp(0px, 1vw, 8px); font: inherit; background: none; border: 0; border-radius: 8px 8px 0 0; cursor: pointer;
}
.ww-col:hover, .ww-col:focus-visible { background: rgba(0, 85, 148, 0.06); }
.ww-stack { display: flex; flex-direction: column-reverse; gap: 2px; }
.ww-stack i { display: block; min-height: 2px; transition: height 0.35s var(--ease); }
.ww-stack i:last-child { border-radius: 4px 4px 0 0; }
.ww-stack i.ww-dup { background: repeating-linear-gradient(135deg, #9AA4AB 0 3px, #C9D0D5 3px 6px) !important; }
.ww-total { margin-bottom: 4px; font-size: 0.72rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.ww-label { position: absolute; left: 0; right: 0; bottom: -1.6rem; font-size: 0.8rem; text-align: center; color: var(--gray); }
.ww-col[aria-pressed="true"] .ww-label { font-weight: 700; color: var(--navy); }
.ww-col[aria-pressed="true"] { background: rgba(0, 85, 148, 0.08); }
.ww-chart-card { padding-bottom: 2.4rem; }
.ww-tip {
    position: absolute; z-index: 2; min-width: 170px; padding: 0.6rem 0.75rem; font-size: 0.8rem; pointer-events: none;
    background: var(--white); border: 1px solid rgba(23, 42, 58, 0.14); border-radius: 10px; box-shadow: 0 10px 30px -12px rgba(23, 42, 58, 0.35);
}
.ww-tip b { display: block; margin-bottom: 4px; }
.ww-tip div { display: flex; align-items: center; gap: 6px; }
.ww-tip i { width: 8px; height: 8px; border-radius: 2px; }
.ww-tip span { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }

.ww-detail h3 { margin-bottom: 0.15rem; font-size: 1.15rem; }
.ww-detail .ww-split { border-top: 0; padding-top: 0.25rem; }
.ww-detail .ww-legend li { padding: 4px 0; }
.ww-note { min-height: 1.6em; margin-top: 0.9rem; font-size: 0.9rem; color: var(--gray); }

@media (max-width: 900px) {
    .ww-hero-card { justify-self: start; }
    .ww-panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .ww-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ww-stats > :last-child { display: none; }
    .ww-split { flex-direction: column; align-items: stretch; }
    .ww-donut { align-self: center; }
    .ww-seg button { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
    .ww-chart { height: 220px; }
    .ww-total { font-size: 0.62rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ww-hero-card { animation: none; }
    .ww-stack i, .ww-seg button { transition: none; }
}