/* billing section: styles only this section uses. */

/* Activity calendar: 13 px days, a year shrinks them so 53 weeks fit. */
.bl-hm { --c: 13px; --g: 3px; }
.bl-hm.y { --c: 6px; --g: 2px; }
.bl-hm-days { display: grid; grid-template-rows: repeat(7, var(--c)); gap: var(--g); font-size: 10px; line-height: var(--c); padding-top: calc(13px + var(--g)); flex-shrink: 0; }
.bl-hm-scroll { display: flex; flex-direction: column; gap: var(--g); min-width: 0; }
.bl-hm.y .bl-hm-scroll { overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; }
.bl-hm-months { display: flex; gap: var(--g); font-size: 10px; height: 13px; }
.bl-hm-months > span { width: var(--c); flex-shrink: 0; white-space: nowrap; }
.bl-hm-grid { display: grid; grid-template-rows: repeat(7, var(--c)); grid-auto-flow: column; grid-auto-columns: var(--c); gap: var(--g); }
.bl-hm-grid .hm { width: var(--c); height: var(--c); }
.bl-hm.y .bl-hm-grid .hm { border-radius: 2px; }
.bl-hm.y .bl-hm-grid .hm.sel, .bl-hm.y .bl-hm-grid a.hm.sel:hover { box-shadow: 0 0 0 1px var(--panel), 0 0 0 2.5px var(--accent); }
.bl-hm-grid a.hm { transition: box-shadow 80ms; }
.bl-hm-grid a.hm:hover { box-shadow: 0 0 0 1.5px var(--muted); }
.bl-hm-grid a.hm.sel:hover { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent); }

/* API keys: the code sample follows the picked language. */
.bl-code pre[data-lang] { display: none; }
.bl-code:has(input[value="curl"]:checked) pre[data-lang="curl"],
.bl-code:has(input[value="python"]:checked) pre[data-lang="python"],
.bl-code:has(input[value="node"]:checked) pre[data-lang="node"] { display: block; }

/* Usage: the spend on the left, the money column on the right. Tables are .th/.tr rows,
   each kind with its own --cols. */
.bl-b { display: grid; grid-template-columns: minmax(0, 1fr) 320px; flex-grow: 1; min-height: 0; background: var(--panel); }
.bl-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.bl-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.bl-strip > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-left: 1px solid var(--line); min-width: 0; }
.bl-strip > div:first-child { border-left: 0; }
.bl-strip .big { font-size: 24px; line-height: 1.15; }
.bl-strip .sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-cap { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }

.bl-chart { padding: 10px 18px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.bl-sh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bl-leg { display: flex; gap: 12px; font-size: 12px; color: var(--muted); margin-right: 4px; }
.bl-leg i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; }
.bl-leg i.ok, .bl-col i.ok { background: var(--c1); }
.bl-leg i.fail, .bl-col i.fail { background: var(--c-bad); }
.bl-plot { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; }
.bl-y { position: relative; height: 120px; font-size: 10.5px; color: var(--muted); }
.bl-y span { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; }
.bl-bars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; height: 120px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--line-2) 1px, transparent 1px) 0 0 / 100% 50%; }
.bl-col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; transition: background-color 80ms; }
.bl-col i { display: block; flex-shrink: 0; }
a.bl-col:hover { background: var(--hover); }
.bl-col.cur, a.bl-col.cur:hover { background: var(--cur-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.bl-x { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; margin-top: 4px; font-size: 10.5px; color: var(--muted); }
.bl-x span { white-space: nowrap; }
.bl-x span:last-child { justify-self: end; }

.bl-table { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.bl-tool { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; flex-wrap: wrap; }
.bl-filter { background: var(--neu-bg); color: var(--text); }
.bl-filter:hover { color: var(--text); text-decoration: none; background: var(--hover); }
.bl-filter .i { width: 12px; height: 12px; }
.bl-rows { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.bl-rows > .tr { border-bottom: 1px solid var(--line-2); }
.bl-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bl-empty { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.bl-u { --cols: minmax(0, 1fr) 72px 64px 84px 88px 140px; }
.bl-entry { --cols: 56px minmax(0, 1fr) 110px; }
.bl-plan { --cols: 110px 80px 70px minmax(0, 1fr) 96px; }
.bl-month { --cols: minmax(0, 1fr) 64px 60px 96px 44px; }
.bl-month .chip { margin-left: 6px; }
.bl-credit { --cols: 96px minmax(0, 1fr) 96px; }
.bl-key { --cols: minmax(0, 1fr) 150px 110px 110px 150px; }
.bl-key form { display: contents; }

/* the money column: balance, spend limits, history */
.bl-money { border-left: 1px solid var(--line); overflow-y: auto; min-height: 0; }
.bl-blk { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 16px; border-bottom: 1px solid var(--line); }
.bl-bh { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.bl-bh .bl-cap { flex-grow: 1; }
.bl-bal { font-size: 28px; line-height: 1.1; }
.bl-blk > .sub { font-size: 12.5px; }
.bl-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bl-blk .bl-acts { margin-top: 4px; }
.bl-lim { display: flex; flex-direction: column; gap: 6px; }

/* dialogs: add credit, plans, spend limits */
.bl-box { display: flex; justify-content: space-between; padding: 12px 14px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line-2); }
.bl-plans-t { margin: 0 -20px; }
.bl-plans-t > * { padding: 0 20px; }
.bl-form { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.bl-money-in { display: flex; align-items: center; gap: 6px; }
.bl-money-in > span { color: var(--muted); }
.bl-money-in .inp { width: 160px; }

/* API keys */
.bl-keys { display: flex; flex-direction: column; background: var(--panel); min-height: 100%; }
.bl-keys > .tr { border-bottom: 1px solid var(--line-2); }
.bl-code { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px; }

@container content (width < 880px) {
  .bl-b { display: flex; flex-direction: column; overflow-y: auto; }
  .bl-main, .bl-money { flex-shrink: 0; }
  .bl-main { overflow: visible; }
  .bl-money { border-left: 0; border-top: 1px solid var(--line); overflow: visible; order: -1; }
  .bl-rows { overflow: visible; flex: none; }
  .bl-table { flex: none; }
  .bl-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-strip > div:nth-child(3) { border-left: 0; }
  .bl-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bl-u { --cols: minmax(0, 1fr) 56px 76px; }
  .bl-u > :nth-child(3), .bl-u > :nth-child(4), .bl-u > :nth-child(6) { display: none; }
  .bl-key { --cols: minmax(0, 1fr) auto; }
  .bl-key > :nth-child(2), .bl-key > :nth-child(3), .bl-key > :nth-child(4) { display: none; }
}