/* harness/surface/launcher/ui/credits.css — every rule for the Credits screen.

SPLIT OUT of index.html's <style> block on 2026-08-13, at the 1000-line ratchet
and for its stated reason — exactly as #home's rules went to landing.css, and as
workspace.js and credits.js were split out of the script below it. The whole
block is scoped to #credits already, so this is a move and not a rewrite: not
one selector, property or value changed on the way across.

What made it necessary: the founder's top-up slider. index.html had eight lines
of headroom left, and paying for a slider by compacting readable CSS into
one-liners is the trade the ratchet exists to stop.

Loaded by index.html with a cache-buster, like every other versioned asset. */

  /* ── Credits, in the estate's one voice (founder, 2026-08-12: "fix the
     credits screen and make it consistent with the current theme of the
     application") ──────────────────────────────────────────────────────────
     BRAND.md §10 listed this screen by name as migration debt: `.credit-log`
     wore a 1.5px ink border and the view's one hard 4px 4px 0 yellow offset,
     the register's labels were uppercase 800 micro-stamps, and the page head
     came in at the base `.os-title`'s 900 weight. All of it is §10 now, so all
     of it is gone — replaced by §§2-6: hairlines, Inter 400/500, sentence case
     and no shadow at rest.

     SCOPED TO #credits, exactly as #appStore and #guard scope theirs. The base
     `.os-*`, `.tile` and `.gallery-back` rules above wore the retired paint
     until 2026-08-13, when the founder ruled on the colours estate-wide and My
     connections — the one surface that inherited them — was repainted with
     them. The base is §§2-6 now, so this block only restates it; the three
     scoped copies can collapse into the base whenever someone wants the bytes
     back, and this test-anchored block is the reason nobody has yet.

     WHERE THE TOMATO WENT (retired 2026-09-10, the credits-only wallet). It
     was the meter's fill until 2026-08-14, then the single Top up button: §2
     spends the accent once per view, the spend spine that replaced the meter is
     four steps of ONE ink because a rainbow there would invent four meanings
     the data does not carry, and an accent on a report says "look" about a
     thing nobody can act on — so it went to the one thing a person could press.
     There are THREE of those now, three equal top-up amounts, and accenting one
     of three equals would rank it. So this screen spends no accent at all and
     nothing here is red; the shop block below carries the whole reasoning.

     THE NUMBERS ARE UNTOUCHED (§8). Not one figure, label or note below is
     written in CSS — the answer reads `tenant_credits_status()` and billingd's
     status, the spine and the register read `tenant_credits_ledger_self()`, all
     through ui/credits.js and ui/credits-view.js, and a failed read still says
     so instead of printing a zero.

     WHERE THE VALUES LIVE NOW. Founder, 2026-08-20, ruling 1 — "Serve the
     values": the `#credits{--c-line:…;--c-fill:…;--c-wash:…}` block that opened
     this sheet is deleted. /shell/tokens.css publishes all three names —
     --c-line at the hairline, --c-fill at the calm, --c-wash at the wash — and
     index.html links it above credits.css, so not one var(--c-*) call below
     changed. */
  /* The 44px floor (§5) applies to a back arrow by name. The base class is a
     bare 13px word with no padding at all — a target this screen's own reader
     has to aim at. Widened here, not there, for the scoping reason above. */
  #credits .gallery-back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:16px;color:var(--muted);font-size:13px;font-weight:500;letter-spacing:0}
  #credits .gallery-back:hover{color:var(--ink);text-decoration:underline}
  #credits .gallery-back:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

  /* ── ① the answer (founder ruling, 2026-08-14) ────────────────────────────
     Eyebrow, one figure, one line. Nothing above the figure. The eyebrow is the
     screen's <h1>: heading level is structure, not size, and the figure cannot
     be the heading because a failed read leaves it absent.

     Every number on this screen is tabular — a figure that jitters as it
     updates is a figure a person re-reads. */
  #credits .c-num,#credits .crange,#credits .clog-count{font-variant-numeric:tabular-nums}
  #credits .credit-answer{padding-bottom:30px;border-bottom:1px solid var(--c-line)}
  #credits .credit-eyebrow{color:var(--muted);font-size:13px;font-weight:500;letter-spacing:0}
  #credits .credit-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:10px;color:var(--ink);font-size:clamp(36px,7vw,50px);font-weight:400;letter-spacing:-.015em;line-height:1.05}
  #credits .credit-word{color:var(--muted);font-size:clamp(17px,2.6vw,20px);letter-spacing:0}
  #credits .credit-context{max-width:640px;margin-top:12px;color:var(--muted);font-size:14px}
  #credits .credit-unread{max-width:560px;margin-top:14px;color:var(--ink);font-size:16px}

  /* ── ② the spend spine ───────────────────────────────────────────────────
     One track: the month's budget end to end, filled from the left by spend in
     adjacent segments per kind of work. The unspent remainder is simply track
     left empty. NO TRANSITION on the fill — the figure is already in hand when
     this paints, so easing it into place is decorative entrance choreography,
     which §6 retired on this very element (founder, 2026-08-12) and which the
     suite pins as an absence. */
  #credits .credit-spine{padding:30px 0;border-bottom:1px solid var(--c-line)}
  #credits .cspine-label{color:var(--muted);font-size:13px;font-weight:500}
  #credits .ctrack{height:10px;margin-top:12px;border:1px solid var(--c-line);border-radius:999px;background:var(--white);overflow:hidden}
  #credits .cfill{display:flex;height:100%;width:0}
  #credits .cseg{height:100%;min-width:3px}
  #credits .clegend{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:16px;padding:0;list-style:none}
  #credits .clegend li{display:flex;align-items:baseline;gap:8px;color:var(--muted);font-size:13px}
  #credits .clegend .cswatch{position:relative;top:-2px;flex:none;width:14px;height:6px;border-radius:999px}
  #credits .clegend b{color:var(--ink);font-weight:500}
  #credits .clegend .ccost{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
  #credits .cspine-note{margin-top:14px;color:var(--muted);font-size:13px}

  /* The month's register (founder order 2026-07-29). Same card as the meter,
     hairline row rules, sentence-case column heads, tabular time and figures.
     The reading-paced per-row stagger it used to enter on is gone with the rest
     of §10 — near-static means the month is simply there when you open it. */
  #credits .credit-log{max-width:720px;margin-top:28px;border:1px solid var(--c-line);border-radius:16px;background:var(--white);overflow:hidden}
  /* The head carries the label and the line count on one baseline — the count
     is computed from the rows, so it belongs beside the label rather than
     inside the table. */
  #credits .clog-head{display:flex;align-items:baseline;gap:12px;padding:16px 20px 14px;border-bottom:1px solid var(--c-line)}
  #credits .clog-micro{color:var(--muted);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
  #credits .clog-count{margin-left:auto;color:var(--muted);font-size:13px}
  /* ── the smart filter (founder, 2026-08-16: "add a smart filter") ─────────
     One field and the kinds actually present, sitting between the register's
     head and its rows. Everything here is §5's own vocabulary — a --box input
     at the 44px floor, calm chips at 13px/500, chosen read from ground plus
     aria-pressed rather than from colour alone — because a filter is
     chrome over facts and must not invent a second look for itself. The count
     line under it is drawn from the rows, never typed. */
  #credits .clog-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 20px 14px;border-bottom:1px solid var(--c-line)}
  #credits .clog-find{flex:1 1 220px;min-width:180px}
  #credits .clog-find input{width:100%;min-height:44px;padding:0 14px;border:1px solid var(--box);border-radius:12px;background:var(--white);color:var(--ink);font-size:14px}
  #credits .clog-find input::placeholder{color:var(--faint)}
  #credits .clog-find input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  #credits .clog-chips{display:flex;flex-wrap:wrap;gap:8px}
  #credits .clog-chips button{min-height:44px;padding:0 14px;border:1px solid var(--c-line);border-radius:999px;background:var(--white);color:var(--muted);font-size:13px;font-weight:500}
  /* :not(.is-on) is load-bearing, not tidiness: this selector outranks the
     .is-on rule below it, so without it the cursor repaints a chosen chip's ink
     ground back to near-white and leaves its paper text on top, unreadable. */
  #credits .clog-chips button:not([disabled]):not(.is-on):hover{background:var(--c-wash)}
  /* Chosen fills INK (founder, 2026-08-20, ruling 2 — "Ink everywhere"). It was
     a grey ground with ink text, which reads as "disabled" beside the grey
     [disabled] pills three rules down; the estate's on-state — ink border, ink
     ground, paper text — is unambiguous and is what SupaCRM and SupaSales
     already wear. Still no second accent: ink is not tomato. */
  #credits .clog-chips button.is-on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
  #credits .clog-chips button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  #credits .clog-chips .cchip-n{margin-left:6px;color:var(--faint);font-variant-numeric:tabular-nums}
  /* The count rides INSIDE the chip, so an ink ground has to carry it too:
     --faint on ink is about 2.5:1 and unreadable. --box keeps the count quieter
     than its label without dropping below legible. */
  #credits .clog-chips button.is-on .cchip-n{color:var(--box)}
  #credits .clog-found{width:100%;margin:0;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
  #credits .clog-scroll{overflow-x:auto}
  #credits .credit-table{width:100%;border-collapse:collapse;font-size:13px}
  #credits .credit-table th{padding:12px 20px 10px;border-bottom:1px solid var(--c-line);color:var(--muted);font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;text-align:left}
  #credits .credit-table th.t-num{text-align:right}
  #credits .credit-table td{padding:11px 20px;border-bottom:1px solid var(--c-line);vertical-align:top}
  #credits .credit-table tbody tr:last-child td{border-bottom:0}
  #credits .credit-table td.t-time{white-space:nowrap;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
  #credits .credit-table td.t-what b{font-weight:500;letter-spacing:0}
  #credits .credit-table td.t-what span{display:block;margin-top:2px;color:var(--muted);font-size:13px}
  #credits .credit-table td.t-num{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
  /* An expired hold did not count. The whole row drops to muted — the row's own
     note says so in words too, because §2 forbids leaning on colour alone to
     carry a state. The name keeps its 500 so it stays a name: muting both lines
     AND flattening the weight leaves the surface and its note as one 13px grey
     mush, which is what the first render of this restyle actually looked like. */
  #credits .credit-table tr.is-expired td{color:var(--muted)}
  #credits .credit-table tr.is-expired td.t-what b{color:var(--muted);font-weight:500}
  /* The total is a conclusion, not another row. A hairline rule is all §4 gives
     it, so the ink does the rest of the work the retired 1.5px border used to. */
  #credits .credit-table tfoot td{border-top:1px solid var(--c-line);border-bottom:0;padding:13px 20px}
  #credits .credit-table tfoot td.t-label{color:var(--ink);font-size:13px;font-weight:500}
  #credits .clog-note{padding:14px 20px 16px;color:var(--muted);font-size:13px}

  /* PHONE: the register redraws as a stacked list of rows, not a table with a
     scrollbar (tools-wallet-05 finding 20, board PhoneWallet — 44px targets,
     no `.clog-scroll{overflow-x:auto}` sideways). Same markup credits-view.js
     already builds — a grid on each `<tr>` is the whole transform, so a
     filtered or paginated re-render costs nothing extra to redraw here too. */
  @media (max-width:700px){
    #credits .clog-scroll{overflow-x:visible}
    #credits .credit-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
    #credits .credit-table,#credits .credit-table tbody{display:block;width:100%}
    #credits .credit-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:44px;padding:11px 20px;border-bottom:1px solid var(--c-line)}
    #credits .credit-table td{display:block;padding:0;border-bottom:0}
    #credits .credit-table td.t-time{grid-column:1;grid-row:1}
    #credits .credit-table td.t-what{grid-column:1;grid-row:2;margin-top:2px}
    #credits .credit-table td.t-num{grid-column:2;grid-row:1 / span 2;text-align:right}
    #credits .credit-table tfoot tr{display:grid;grid-template-columns:minmax(0,1fr) auto}
    #credits .credit-table tfoot td{display:block;border-top:0;padding:0}
  }
  /* ── ③ pagination: quiet text, 44px targets, no numbered buttons ─────────
     A disabled arrow is faint text at full opacity, never a faded pill: §5's
     rule about disabled controls, applied to a control that is only a word. */
  #credits .cpager{display:flex;align-items:center;gap:4px;padding:8px 12px;border-top:1px solid var(--c-line)}
  #credits .cpager button{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--ink);font-size:13px;font-weight:500}
  #credits .cpager button:not([disabled]):hover{background:var(--c-wash)}
  #credits .cpager button[disabled]{color:var(--faint);cursor:default}
  #credits .cpager button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  #credits .cpager-dot{color:var(--box)}
  #credits .crange{margin-left:auto;padding-right:8px;color:var(--muted);font-size:13px}

  /* ── the shop: three top-up cards (founder, 2026-08-12; rebuilt 2026-09-10)
     ─────────────────────────────────────────────────────────────────────────
     SUPASMART is the biller, so this screen sells as well as reports. What it
     sells is credits and only credits (founder, 2026-09-10: "The wallet goes
     credits only, and it will say top-ups last ninety days because your earlier
     ruling makes that true"). The two fixed-SKU plan cards, the monthly/yearly
     switch and the ₹100-step slider that used to live here are all gone with
     that ruling, and their rules went with them rather than sitting here
     unused. credits.js draws the three cards from the same amount list billingd
     validates against.

     SCOPED TO #credits like the answer and the register above it, and written
     in the same §§2-6 voice: hairline cards, Inter 400/500, sentence case, no
     shadow at rest.

     WHERE THE TOMATO WENT. It sat on the single Top up button, because §2
     spends the accent once per view and that button was the one thing on a
     reporting screen a person could act on. There are THREE of those now and
     they are equals — a top-up is a top-up — so accenting one would rank it,
     and this screen would be recommending an amount the product has no reason
     to recommend. So all three keep §5's SECONDARY idiom (hairline on white,
     ink text, --c-wash on hover) and the screen spends no accent at all;
     test_credits.mjs pins that at zero var(--tomato) in this whole file. §5 is
     still explicit that disabled is a grey pill at opacity 1. */
  #credits .plan-shop{max-width:720px;margin-top:28px}
  /* Sentence case, matching the register's own micro-label. The base agrees
     since the 2026-08-13 repaint; this only tightens the margins. */
  #credits .os-section{margin:28px 0 10px;color:var(--muted);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
  #credits .plan-now{margin:0 0 6px;color:var(--ink);font-size:14px;font-weight:400}
  #credits .plan-gst{margin:4px 0 0;color:var(--muted);font-size:13px}
  /* The 90-day sentence and, for a tenant still on a legacy subscription, what
     that plan does next. One measure, so a long sentence stays readable. */
  #credits .plan-what{max-width:560px;margin:12px 0 0;color:var(--ink);font-size:14px;font-weight:400;line-height:1.5}
  /* Three equal cards, and they stay equal: auto-fit at a 216px floor drops to
     two and then one as the column narrows, rather than scrolling sideways. */
  #credits .topup-cards{display:grid;gap:16px;margin-top:18px;grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
  /* The same §4 card as the register and the answer above it: hairline, 16px,
     flat. A column, so the button sits on the floor of every card whatever
     length the sentence above it runs to. */
  #credits .topup-card{display:flex;flex-direction:column;padding:20px;border:1px solid var(--c-line);border-radius:16px;background:var(--white)}
  /* An amount is a figure, not a hero: §3's page-heading idiom at 28px/400
     rather than a heavy price, and tabular so ₹2,000 and ₹10,000 cannot shift
     the card beside them. */
  #credits .topup-amount{margin:0;color:var(--ink);font-size:28px;font-weight:400;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  #credits .topup-what{margin:10px 0 0;color:var(--ink);font-size:14px;font-weight:400;line-height:1.5}
  #credits .topup-buy{min-height:44px;margin-top:auto;align-self:flex-start;padding:11px 24px;border:1px solid var(--c-line);border-radius:999px;background:var(--white);color:var(--ink);font-size:14px;font-weight:500}
  #credits .topup-buy:not([disabled]):hover{background:var(--c-wash)}
  #credits .topup-buy:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  /* Grey pill at full opacity — a faded control reads as broken, not as held. */
  #credits .topup-buy[disabled]{border-color:transparent;background:var(--c-fill);color:var(--muted);cursor:not-allowed}
  #credits .plan-say{margin-top:14px;color:var(--muted);font-size:13px}