/* Billing, usage and models pages: only what the component set (app.css) doesn't cover, in tokens. Drawing dimensions
   (dots, bars, the usage track and its swatches) and layout column widths are the only raw sizes. */

/* ---- billing ---- */
.bl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
/* the balance: the plan's credits left at display size, beside the plan's details */
.bl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.bl-hero-n { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); border-right: 1px solid var(--line); }
.bl-big { font: var(--f-display); letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.bl-meter { margin-bottom: var(--s-1); }
dl.kv.bl-kv { padding: var(--s-5); align-content: center; grid-template-columns: 150px 1fr; }
.bl-unit { margin-top: 0; }
.bl-say a { font: var(--f-body); white-space: nowrap; }
.bl-say a, .bl-say a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.panel-b > p.bl-legal { font-weight: var(--w-semibold); display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-1); }
.bl-legal .i { color: var(--ink-3); }
.panel-b p.muted { margin: var(--s-1) 0 0; }
.bl-tiers .bl-cur td { background: var(--accent-wash); }
.bl-act { white-space: nowrap; }
.bl-act .btn + .btn { margin-left: var(--s-1); }
.bl-bh { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-4); }
.bl-bh .say { flex: 1; }
.bl-bh > .btn { margin-left: auto; flex: none; }
.bl-rc { display: inline-block; max-width: 220px; vertical-align: bottom; white-space: nowrap; }
/* narrow screens list the plans instead of the table */
.bl-tierlist { display: none; list-style: none; margin: 0; padding: 0; }
.bl-tierlist li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.bl-tierlist li:first-child { border-top: 0; }
.bl-tierlist li > div { flex: 1; min-width: 0; }
.bl-tierlist small { display: block; font: var(--f-small); color: var(--ink-3); margin-top: var(--s-1); text-wrap: pretty; }
.bl-tierlist li.bl-cur { background: var(--accent-wash); }
/* the wizard's review step */
.bl-review { grid-template-columns: 140px 1fr; }
.bl-req:empty { display: none; }
/* notes inside a modal body sit in its gap */
.modal-b > .note { margin: 0; }
/* budget thresholds: checkbox chips */
.bl-th { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.bl-th legend { padding: 0; margin-bottom: var(--s-2); }
.bl-chip { position: relative; display: inline-flex; cursor: pointer; }
.bl-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bl-chip span {
  display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--line-2);
  font: var(--f-label); color: var(--ink-2); font-variant-numeric: tabular-nums; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s;
}
.bl-chip:hover span { border-color: var(--ink-4); color: var(--ink); }
.bl-chip input:checked + span { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }
.bl-chip input:focus-visible + span { box-shadow: var(--focus); }

/* credit grants: a voided or expired grant reads as spent */
.bl-grants tr.bl-gone td, .bl-grants tr.bl-gone .strong { color: var(--ink-3); }
.bl-grants td .cell-sub a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---- an Order Form (console and admin): the document, set as paper in the serif, beside what is left to sign ---- */
.back-link { display: inline-flex; align-items: center; gap: var(--s-1); font: var(--f-label); color: var(--ink-2); margin: 0 0 var(--s-3) calc(-1 * var(--s-1)); padding: var(--s-1); border-radius: var(--r-s); }
.back-link:hover { color: var(--ink); text-decoration: none; background: var(--hover); }
.back-link .i { width: 14px; height: 14px; }
.of-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.of-page.signing, .of-page:has(.of-side > *) { grid-template-columns: minmax(0, 1fr) 340px; }
.of-side { position: sticky; top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.of-side:empty { display: none; }
.of-doc {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s-12) var(--s-12) var(--s-8);
  max-width: 820px; color: var(--ink); box-shadow: 0 1px 2px light-dark(rgba(35, 31, 43, .04), rgba(0, 0, 0, .25));
}
.of-doc.stamped { position: relative; }
.of-stamp {
  position: absolute; top: var(--s-10); right: var(--s-10); transform: rotate(-6deg); padding: var(--s-1) var(--s-3);
  border: 2px solid var(--bad-ink); border-radius: var(--r-s); color: var(--bad-ink); font: var(--w-semibold) var(--fs-lead)/1.2 var(--sans);
  letter-spacing: .04em; background: var(--panel);
}
.of-body { font: var(--w-regular) var(--fs-heading)/var(--lh-lead) var(--serif); }
.of-body .of-h1 { font: var(--f-title); letter-spacing: var(--track-title); margin: 0 0 var(--s-5); }
.of-body .of-h2 { font: var(--w-semibold) var(--fs-lead)/var(--lh-heading) var(--serif); margin: var(--s-8) 0 var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.of-body p { margin: 0 0 var(--s-3); max-width: 72ch; color: var(--ink-2); text-wrap: pretty; }
.of-body ul { margin: 0 0 var(--s-3); padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.of-body li { padding-left: var(--s-4); position: relative; font-variant-numeric: tabular-nums; }
.of-body li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 5px; height: 1px; background: var(--ink-3); }
.of-sign { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--line-2); }
.of-sig h3 { font: var(--f-label); color: var(--ink-3); margin: 0 0 var(--s-2); }
.of-sig-line { height: 56px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--ink-3); padding-bottom: var(--s-1); overflow: hidden; }
.of-hand { font: italic var(--w-regular) var(--fs-title)/1 var(--serif); color: var(--accent-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-hand.typing { opacity: .8; }
.of-rule { display: inline-block; width: 100%; }
.of-sig-kv { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-1) var(--s-3); margin: var(--s-3) 0 0; font: var(--f-small); }
.of-sig-kv dt { color: var(--ink-3); }
.of-sig-kv dd { margin: 0; min-height: 1.45em; }
.of-sig-kv .of-rule { border-bottom: 1px dashed var(--line-2); height: 1em; }
.of-foot { margin-top: var(--s-8); font: var(--f-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* the Design Partner Agreement's blocks (also a template's read-only view): the header line, notes, the two-column
   term tables, page turns, the customer's blanks and boxes, the generated schedule and the signature page */
.of-body .of-kicker { font: var(--f-small); color: var(--ink-3); margin: 0 0 var(--s-6); font-variant-numeric: tabular-nums; }
.of-body .of-note { font: var(--f-small); color: var(--ink-3); margin: calc(-1 * var(--s-3)) 0 var(--s-4); }
.of-body .of-h1 + .of-note { margin-top: calc(-1 * var(--s-4)); }
.of-tbl { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-5); }
.of-tbl th, .of-tbl td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-top: 1px solid var(--line); }
.of-tbl td:last-child { padding-right: 0; }
.of-tbl thead th { font: var(--f-label); color: var(--ink-3); padding-top: 0; padding-bottom: var(--s-2); border-top: 0; }
.of-tbl tbody th { width: 176px; font: var(--w-semibold) var(--fs-body)/var(--lh-lead) var(--sans); color: var(--ink); }
.of-tbl tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.of-body .of-tbl td p { margin: 0 0 var(--s-2); max-width: none; }
.of-body .of-tbl td p:last-child { margin-bottom: 0; }
.of-tbl .n { text-align: right; font-variant-numeric: tabular-nums; }
.of-kvt tbody th { width: 176px; }
.of-grid thead th { padding-right: var(--s-4); }
.of-grid tbody th { width: auto; }
.of-break { border: 0; border-top: 1px dashed var(--line-2); margin: var(--s-8) calc(-1 * var(--s-12)); }
.of-fill { color: var(--ink-3); letter-spacing: -.02em; white-space: pre-wrap; transition: background .15s var(--ease), color .15s; }
.of-fill.set { color: var(--ink); letter-spacing: 0; text-decoration: underline; text-decoration-color: var(--ink-4); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.of-fill.tpl { letter-spacing: 0; border-bottom: 1px solid var(--ink-4); padding: 0 var(--s-1); }
.of-fill.tpl code { font: var(--f-code); font-size: var(--fs-micro); color: var(--accent-ink); }
.of-box { font-family: var(--sans); color: var(--ink-2); }
.of-box.on { color: var(--ink); }
/* while signing: the blank being filled lights up on the paper, and typed values read as the customer's */
.of-page.signing .of-fill.set, .of-page.signing .of-box.on { color: var(--accent-ink); }
.of-fill.on, .of-box.at { background: var(--accent-wash); color: var(--accent-ink); border-radius: var(--r-xs); box-shadow: 0 0 0 2px var(--accent-wash); }
.of-sched { margin: 0 0 var(--s-5); }
.of-sigpage .of-sign { margin-top: var(--s-6); }
.of-party { font: var(--w-semibold) var(--fs-body)/var(--lh-body) var(--sans); margin: 0 0 var(--s-2); color: var(--ink); }
.of-sig-cap { font: var(--f-micro); color: var(--ink-3); margin: var(--s-1) 0 0; }
.of-sigpage .of-sig-kv { grid-template-columns: 64px 1fr; }
.of-dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-8); margin: var(--s-8) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.of-dates dt { font: var(--f-label); color: var(--ink-3); }
.of-dates dd { margin: var(--s-1) 0 0; font-variant-numeric: tabular-nums; min-height: 1.45em; }
.of-dates .of-rule { border-bottom: 1px dashed var(--line-2); height: 1em; }
/* the sign box */
.of-signbox .panel-b.form { gap: var(--s-4); padding-top: var(--s-4); }
.of-consent { display: flex; flex-direction: column; gap: var(--s-2); }
.of-consent .check { padding: var(--s-3); border-radius: var(--r-m); background: var(--sunk); font: var(--f-small); color: var(--ink-2); text-wrap: pretty; }
.of-consent .check:has(input:checked) { background: var(--accent-wash); color: var(--ink); }
.of-sigfield .input { height: var(--h-lg); font: italic var(--w-regular) var(--fs-figure)/1 var(--serif); color: var(--accent-ink); }
.of-signbox .btn.lg { width: 100%; justify-content: center; }
/* the Design Partner Agreement's signing form: wider, its own scroll beside the paper, in sections */
.of-page.dpa.signing { grid-template-columns: minmax(0, 1fr) 384px; }
.of-page.dpa.signing .of-side { max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-l); scrollbar-width: thin; }
.of-fillbox .panel-b.form { gap: var(--s-5); }
.of-fs { display: flex; flex-direction: column; gap: var(--s-3); }
.of-fs + .of-fs { padding-top: var(--s-5); border-top: 1px solid var(--line); }
.of-fs-h { font: var(--f-label); color: var(--ink); font-weight: var(--w-semibold); margin: 0; }
.of-fill-box { padding: var(--s-3); border-radius: var(--r-m); border: 1px solid var(--line-2); font: var(--f-body); }
.of-fill-box:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.of-fill-box small { margin-top: 2px; text-wrap: pretty; }
.of-cap { display: flex; align-items: center; gap: var(--s-2); }
.of-cap .input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.of-cap > span { color: var(--ink-3); white-space: nowrap; }
.of-signing-as { margin: calc(-1 * var(--s-1)) 0 0; }
.of-fillbox[data-inert] .input, .of-fillbox[data-inert] .check { cursor: default; }
.of-fillbox[data-inert] .btn.lg { pointer-events: none; }
.of-kv { grid-template-columns: 112px 1fr; }
.of-kv .cell-sub { display: block; }
.of-hash { font-size: var(--fs-micro); overflow-wrap: anywhere; color: var(--ink-2); }

/* ---- usage ---- */
.us-fig { margin: 0 0 var(--s-2); }
.us-track { width: 100%; height: 40px; display: block; }
.us-rail { fill: none; stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.us-on { fill: var(--accent); }
.us-soft { opacity: .55; }
.us-hold { fill: url(#us-hatch); }
.us-hatch-bg { fill: var(--accent-wash); }
.us-hatch-ln { stroke: var(--accent); stroke-width: 2; opacity: .55; }
.us-cut { stroke: var(--ink-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* each minute label at its mark on the track: 0 and the end flush with its ends, 15/30/45 centred on theirs */
.us-axis { position: relative; height: 1lh; font: var(--f-micro); font-weight: var(--w-regular); color: var(--ink-3); margin-top: var(--s-2); font-variant-numeric: tabular-nums; }
.us-axis span { position: absolute; top: 0; white-space: nowrap; }
.us-axis span:nth-child(1) { left: 0; }
.us-axis span:nth-child(2) { left: 25%; transform: translateX(-50%); }
.us-axis span:nth-child(3) { left: 50%; transform: translateX(-50%); }
.us-axis span:nth-child(4) { left: 75%; transform: translateX(-50%); }
.us-axis span:nth-child(5) { right: 0; }
.us-steps { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3) var(--s-5); }
.us-steps li { display: flex; gap: var(--s-2); align-items: flex-start; font: var(--f-small); color: var(--ink-2); }
.us-steps b { color: var(--ink); }
.us-k { width: 14px; height: 10px; border-radius: var(--r-xs); flex: none; margin-top: var(--s-1); }
.us-k.on { background: var(--accent); }
.us-k.hold { background: repeating-linear-gradient(45deg, var(--accent-wash) 0 3px, var(--accent) 3px 4.5px); }
.us-k.off { box-shadow: inset 0 0 0 1px var(--line-2); }
.us-bars { display: flex; flex-direction: column; gap: var(--s-3); max-width: 640px; }
.us-bar-r { display: grid; grid-template-columns: 120px 1fr 130px; gap: var(--s-3); align-items: center; }
.us-bar-l { font: var(--f-small); color: var(--ink-2); }
.us-bar { height: 14px; display: block; }
.us-bar i { display: block; height: 100%; background: var(--accent); border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.us-b1 { width: 20%; }
.us-b5 { width: 100%; }
.us-bar-v { font: var(--f-small); color: var(--ink-2); white-space: nowrap; }
.us-bar-v b { color: var(--ink); }
.us-bars + .aside { margin-top: var(--s-4); max-width: 72ch; }

/* ---- models ---- */
.md-bar { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.md-scale { width: 22%; min-width: 120px; }
.md-track { display: block; height: 6px; }
.md-track i { display: block; height: 100%; min-width: 2px; background: var(--accent); border-radius: 0 var(--r-xs) var(--r-xs) 0; opacity: .85; }
.md-off td { color: var(--ink-3); }
.md-off .strong { color: var(--ink-2); }
.md-off .md-track i { background: var(--ink-4); }
.md-in { white-space: nowrap; }
/* the per-hour price and the project's verdict repeat columns that narrow screens hide, so only they show them */
.md-tbl td .cell-sub.md-rate-s, .md-tbl td .cell-sub.md-no-s { display: none; }

@media (max-width: 1080px) {
  .of-page.signing, .of-page:has(.of-side > *), .of-page.dpa.signing { grid-template-columns: minmax(0, 1fr); }
  .of-side, .of-page.dpa.signing .of-side { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 760px) {
  .of-doc { padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--r-m); }
  .of-body .of-h1 { font-size: var(--fs-figure); }
  .of-sign { grid-template-columns: 1fr; gap: var(--s-6); margin-top: var(--s-8); }
  .of-break { margin-left: calc(-1 * var(--s-5)); margin-right: calc(-1 * var(--s-5)); }
  /* a term table reads as label over entry */
  .of-tbl:not(.of-grid) tr { display: block; border-top: 1px solid var(--line); padding: var(--s-3) 0; }
  .of-tbl:not(.of-grid) tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .of-tbl:not(.of-grid) th, .of-tbl:not(.of-grid) td { display: block; width: auto; border: 0; padding: 0; }
  .of-tbl:not(.of-grid) tbody tr:last-child > * { border-bottom: 0; }
  .of-tbl:not(.of-grid) tbody th { margin-bottom: var(--s-1); }
  .of-tbl:not(.of-grid) thead { display: none; }
  .of-grid { display: block; overflow-x: auto; }
  .of-dates { grid-template-columns: 1fr; gap: var(--s-3); }
  .bl-hero { grid-template-columns: 1fr; }
  .bl-hero-n { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s-4); }
  dl.kv.bl-kv { padding: var(--s-4); grid-template-columns: 112px 1fr; }
  .bl-bh { flex-direction: column; }
  .bl-tiers-wrap { display: none; }
  .bl-tierlist { display: block; }
  .bl-review { grid-template-columns: 1fr; gap: var(--s-1); }
  /* budgets and commit requests are cards here (app.css .tbl.cards): a request's status sits right of its commit and
     its date under it */
  .bl-act .btn + .btn { margin-left: 0; }
  .bl-reqs.cards td:nth-child(3) { grid-column: 1; grid-row: 2; font: var(--f-small); color: var(--ink-3); }
  .bl-reqs.cards td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; }
  /* an invoice: its number and amount, then "Due <date>" and its status, then its PDF */
  .bl-inv.cards td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .bl-inv.cards td:nth-child(4) { grid-column: 2; grid-row: 1; font-weight: var(--w-semibold); }
  .bl-inv.cards td:nth-child(3) { grid-column: 1; grid-row: 2; font: var(--f-small); color: var(--ink-3); }
  .bl-inv.cards td:nth-child(5) { grid-column: 2; grid-row: 2; text-align: right; }
  /* a grant: its type and credits, then "Expires <date>" with its status */
  .bl-grants.cards td:nth-child(4) { grid-column: 1 / -1; font: var(--f-small); color: var(--ink-3); }
  .bl-inv.cards td[data-label]::before, .bl-grants.cards td[data-label]::before { display: inline; font: inherit; color: inherit; margin-right: var(--s-1); }
  /* the open-request note's button goes under its text, aligned with it, so the text keeps the note's width */
  .bl-open { flex-wrap: wrap; }
  .bl-open > p { flex-basis: calc(100% - 16px - var(--s-3)); }
  .bl-open > .btn { margin-left: calc(16px + var(--s-3)); }
  .bl-review dd { margin-bottom: var(--s-2); }
  .us-bar-r { grid-template-columns: 96px 1fr; }
  .us-bar-v { grid-column: 2; }
  .md-tbl td .cell-sub.md-rate-s, .md-tbl td .cell-sub.md-no-s { display: block; }
  /* a row here can carry three lines (name, id, the project's verdict): keep it off the rules */
  .md-tbl td { padding-top: var(--s-2); padding-bottom: var(--s-2); }
  /* the two columns left here share the width: heads and sub-lines wrap instead of running off the panel */
  .md-tbl td, .md-tbl th { white-space: normal; }
  .md-tbl td .cell-sub.md-rate-s { white-space: nowrap; }
}