.icon{display:block;width:1.25rem;height:1.25rem;flex-shrink:0;color:currentColor}.bill-row{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-1);width:100%;margin:0;text-align:left;color:inherit;background:transparent;border:none;border-bottom:.0625rem solid var(--border-row);border-radius:0;font:inherit;&:last-child{border-bottom:none}&.interactive{cursor:pointer;border-radius:var(--radius-card);transition:background var(--motion-hover);&:hover{background:color-mix(in srgb,var(--chalk) 5%,transparent)}&:active{background:color-mix(in srgb,var(--chalk) 8%,transparent)}&:focus-visible{outline:.125rem solid var(--amber);outline-offset:-.125rem}}.dot{width:.625rem;height:.625rem;border-radius:999rem;flex-shrink:0;&.upcoming{background:var(--chalk-dim)}&.due{background:var(--amber);box-shadow:0 0 0 .25rem var(--amber-soft)}&.overdue{background:var(--cliff);box-shadow:0 0 0 .25rem var(--cliff-soft)}}.paid-mark{display:inline-flex;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;flex-shrink:0;border-radius:999rem;background:var(--lichen-soft);color:var(--lichen);.icon{width:1rem;height:1rem}}.info{flex:1;min-width:0}.name{margin:0 0 .125rem;font-size:.9375rem;font-weight:600;color:var(--chalk)}.meta{margin:0;font-size:.78125rem;font-weight:400;color:var(--chalk-dim)}.figures{text-align:right;flex-shrink:0;white-space:nowrap}.amount{margin:0;font-size:1rem;font-weight:700;color:var(--chalk)}.due-label{margin:.125rem 0 0;font-size:.71875rem;font-weight:500;&.upcoming,&.paid{color:var(--chalk-dim)}&.due{color:var(--amber)}&.overdue{color:var(--cliff)}}}