/* wb-allowance.css: subscriptions design r1 (y product-backlog/cross-product/ysub-design/ux-system-r1), the WithBy
   allowance card and the plan blocks, shared by Drive (index.html), Profile and /plans. Tokens from wb-tokens.css. */
/* WithBy board §1: the allowance card (allowance.ts paintAllowance on Drive; ysub-board.js in Profile). Count left, the bar of what is left, the reset line, then
   what happens next and the ways to more. Tones: the accent; amber at 10 % or less; at zero the bar is empty. */
.wba { margin: 12px 0 14px; padding: 16px; border: 1px solid var(--wb-separator); border-radius: var(--wb-radius-card);
  background: var(--wb-surface); color: var(--wb-ink); text-align: left; display: flex; flex-direction: column; gap: 8px; }
.wba[hidden] { display: none; }
.wba .wba-plan { font-size: 13px; font-weight: 600; color: var(--wb-ink-2); }
.wba .wba-count { line-height: 1.2; }
.wba .wba-num { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wba .wba-units { font-size: var(--wb-type-support); color: var(--wb-ink-2); }
.wba .wba-bar { height: 6px; border-radius: 999px; background: var(--wb-surface-2); overflow: hidden; }
.wba .wba-fill { display: block; height: 100%; border-radius: inherit; background: var(--wb-orange); }
.wba[data-tone="low"] .wba-fill { background: var(--wb-warn); }
.wba .wba-reset { font-size: 13px; color: var(--wb-ink-2); }
.wba .wba-kept { margin: 2px 0; padding: 10px 12px; border-radius: 10px; background: var(--wb-warn-tint); color: var(--wb-ink);
  font-size: var(--wb-type-support); line-height: 1.4; }
.wba .wba-msg { margin: 0; font-size: var(--wb-type-support); line-height: 1.4; color: var(--wb-ink); }
.wba[data-tone="low"] .wba-msg { color: var(--wb-warn-ink); }
.wba .wba-more { display: flex; flex-direction: column; gap: 2px; }
.wba .wba-link { color: var(--wb-orange-text); font-weight: 600; font-size: var(--wb-type-support); text-decoration: none; }
.wba .wba-sub { font-size: 13px; color: var(--wb-ink-2); }
.wba .wba-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--wb-control-primary);
  padding: 8px 16px; border-radius: var(--wb-radius-button); text-decoration: none; text-align: center; }
.wba .wba-primary { background: var(--wb-orange); color: var(--wb-on-orange); }
.wba .wba-secondary { background: var(--wb-surface-2); color: var(--wb-ink); }
.wba .wba-btn-label { font-size: var(--wb-type-support); font-weight: 700; }
.wba .wba-btn-sub { font-size: 12px; opacity: 0.85; }