/* apps/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,
     no shadow at rest, and tomato spent exactly once.

     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 ONE TOMATO GOES (moved 2026-08-14, the founder's Credits
     redesign): the Top up button. It used to be the meter's fill, and the meter
     is gone — the spend spine that replaced it is four steps of ONE ink, since
     a rainbow there would invent four meanings the data does not carry, and an
     accent spent on a report says "look" about a thing nobody can act on. The
     one thing on this screen a person can DO is add money, so that is the one
     thing wearing the accent. Nothing else here is red.

     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 exactly as the top-up quick picks are — 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}
  /* ── ③ 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 (founder, 2026-08-12) ───────────────────────────────────────
     SUPASMART is the biller now, so this screen sells as well as reports. Two
     fixed-SKU plan cards and one top-up slider. credits.js toggles the current
     plan, yearly figures and slider amount. Every price prints "+18% GST"
     beside it because GST is EXCLUSIVE here — a number without that line would
     be smaller than what gets charged.

     SCOPED TO #credits like the meter and the register above it, and written in
     the same §§2-6 voice. The shop first landed on its own branch in the
     RETIRED language — 1.5px ink borders, a 4px 4px 0 yellow offset on the
     current card, uppercase 800 plan names, a 900-weight price, and five tomato
     pills. Every one of those is a §4 ban or a §3 ban, and the merge that
     brought the shop onto the repainted screen re-expressed them here rather
     than restoring them. Nothing about what this shop DOES changed in that
     move: same SKUs, same GST line, same held posture, same checkout.

     WHERE THE TOMATO IS (moved here 2026-08-14, the founder's Credits
     redesign): the Top up button, and nowhere else on the screen. §2 spends
     tomato once per view; until today this screen spent it on the meter fill,
     and the meter is gone. The plan buttons keep §5's SECONDARY idiom (hairline
     on white, ink text, --c-wash on hover) because five buy buttons cannot each
     be the one emphasis moment — the top-up is the shortest, commonest thing a
     tenant comes here to do, so it is the one that gets it. §5 is explicit that
     disabled is a grey pill at opacity 1, never a faded red one. */
  #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 18px;color:var(--ink);font-size:14px;font-weight:400}
  /* Monthly/yearly. A calm §5 chip pair on a --c-fill ground. The chosen side
     used to be white paper with a hairline — one grey off its own track, which
     is a difference a person has to look for. Founder, 2026-08-20, ruling 2 —
     "Ink everywhere": chosen FILLS INK, paper text, the same on-state the
     register's filter chips and the rest of the estate wear. Not a second
     accent — ink is not tomato, and the one tomato on this screen is still the
     Top up button. 44px floor on each half. */
  #credits .plan-switch{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--c-fill)}
  #credits .plan-switch button{min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:999px;background:none;color:var(--muted);font-size:13px;font-weight:500}
  #credits .plan-switch button.is-on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
  #credits .plan-switch button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  #credits .plan-cards{display:grid;gap:16px;margin-top:18px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
  /* A §4 card, the same one the meter and the register are: hairline, 16px, no
     shadow at rest. The plan you are on takes an INK border — and its button
     also reads "Your plan", because §2 forbids leaning on colour alone to carry
     a state, and a border a colour-blind reader cannot rank is exactly that. */
  #credits .plan-card{display:flex;flex-direction:column;padding:20px;border:1px solid var(--c-line);border-radius:16px;background:var(--white)}
  #credits .plan-card.is-current{border-color:var(--ink)}
  /* THE YEARLY BENEFIT, CUT INTO THE CARD (founder, 2026-08-16: "it should be
     cut to show the 10% discount, or you should say one month free"). A tab
     bleeding into the card's own top-left corner — negative margins of exactly
     the 20px padding, the same 16px radius, and a 14px diagonal taken off its
     trailing edge with clip-path, so the tag is CUT rather than boxed. Ink
     ground, white text: §2 spends tomato once and this screen already spent it
     on Top up, and a second red would make a saving compete with the one thing
     here a person can press. Flat — no shadow, no transition, nothing that
     enters (§4, §6). It is in flow rather than absolutely placed, so a long
     benefit sentence pushes the plan name down instead of landing on top of
     it, and `hidden` on the monthly side removes it from the layout entirely. */
  #credits .plan-tag{align-self:flex-start;margin:-20px 0 14px -20px;padding:9px 26px 9px 20px;border-radius:16px 0 0 0;background:var(--ink);color:var(--white);font-size:12px;font-weight:500;letter-spacing:0;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
  #credits .plan-name{margin:0;color:var(--muted);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
  #credits .plan-price{margin:8px 0 0;display:flex;align-items:baseline;gap:6px}
  /* A price is a figure, not a hero. 28px/400 is the page-heading idiom of §3
     rather than the retired 30px/900, and tabular-nums keeps ₹2,000 and
     ₹1,08,000 from shifting the card as the yearly switch swaps them. */
  #credits .plan-price strong{color:var(--ink);font-size:28px;font-weight:400;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  #credits .plan-price span{color:var(--muted);font-size:13px;font-weight:400}
  #credits .plan-gst{margin:4px 0 0;color:var(--muted);font-size:13px}
  #credits .plan-what{margin:12px 0 0;color:var(--ink);font-size:14px;font-weight:400;line-height:1.5}
  /* The yearly saving is a fact credits.js computes from the two SKUs. It is set
     in ink at 500, not in tomato: a second red on this screen would compete with
     the meter for the one emphasis moment, and the sentence carries itself. */
  #credits .plan-save{margin:6px 0 0;color:var(--ink);font-size:13px;font-weight:500}
  /* The phone number, opted into INSIDE the plan (founder, 2026-08-12) rather
     than rented beside it. It is a §5 secondary chip on the same hairline
     idiom as the buy button — the plan it sits in is the purchase, and a second
     emphasis here would compete with it. Ticked = ink border AND a changed
     word, never the border alone (§2). */
  #credits .plan-opt{align-self:flex-start;min-height:44px;margin-top:10px;padding:0 18px;border:1px solid var(--c-line);border-radius:999px;background:var(--white);color:var(--ink);font-size:13px;font-weight:500}
  #credits .plan-opt.is-on{border-color:var(--ink)}
  #credits .plan-opt:not([disabled]):hover{background:var(--c-wash)}
  #credits .plan-opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  #credits .plan-buy,#credits .topup-buy{min-height:44px;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 .plan-buy{margin-top:auto;align-self:flex-start}
  #credits .plan-buy:not([disabled]):hover{background:var(--c-wash)}
  #credits .plan-buy:focus-visible,#credits .topup-buy:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  /* THE ONE TOMATO ON THIS SCREEN. §5's primary pill, verbatim: 999px, white
     text, weight 500, 44px floor, no shadow at any depth, --tomato-dark on
     hover. The border goes TRANSPARENT rather than tomato — §5's primary pill
     has no border, and keeping the 1px width means the accent pill and the
     hairline pills beside it are the same height. One `var(--tomato)` in the
     whole file, which is what the suite counts. */
  #credits .topup-buy{border-color:transparent;background:var(--tomato);color:var(--white)}
  #credits .topup-buy:not([disabled]):hover{border-color:var(--tomato-dark);background:var(--tomato-dark)}
  /* Grey pill at full opacity — a faded control reads as broken, not as held. */
  #credits .plan-buy[disabled],#credits .topup-buy[disabled]{border-color:transparent;background:var(--c-fill);color:var(--muted);cursor:not-allowed}
  #credits .plan-buy.is-current{border-color:transparent;background:var(--c-fill);color:var(--ink);cursor:default}
  /* The top-up slider (founder, 2026-08-13): any amount in ₹100 steps, so the three fixed cards are gone and the quick
     picks are slider positions, not products. The input is 44px tall over a 4px rail — the thumb is the hit target.
     The two thumb rules stay SEPARATE: a browser drops a selector list it cannot parse, so pairing -webkit- with
     -moz- would style neither. Flat, like every control here: a border, never a shadow.

     RULING 2 ("Ink everywhere") WAS APPLIED HERE AND CHANGED NOTHING, which is
     worth writing down because this control was flagged for review and the
     honest answer is that there was never anything to fix. THE SLIDER HAS NO
     TOMATO AND NEVER HAS: the track is --c-line at both spellings, the thumb is
     white on a hairline, the disabled thumb is --c-fill, and there is no
     progress-fill rule on either side of the thumb — this is an unfilled rail,
     not a filled-track meter, so the "a value readout may keep the accent"
     question does not even arise. Nor is a quick pick's chosen state red: it
     takes --c-fill (above), the same neutral its [disabled] sibling wears,
     because these are positions on one slider rather than five things to choose
     between — the FIGURES below are the readout, and they are ink.
     The one tomato within a screen of here is `.topup-buy`, four rules up: a
     primary act, which ruling 2 explicitly leaves to the accent, and which
     test_credits.mjs:114 already pins at exactly one `var(--tomato)` in this
     whole file. Do not paint this rail. A filled track here would be the second
     red on the screen and would put the accent on a number instead of on the
     one thing a person came here to press. */
  #credits .topup-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} #credits .topup-quick button:not([disabled]):hover{background:var(--c-wash)}
  #credits .topup-quick button{min-height:44px;padding:10px 18px;border:1px solid var(--c-line);border-radius:999px;background:var(--white);color:var(--ink);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
  #credits .topup-quick button:focus-visible,#credits .topup-slide input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  #credits .topup-quick button.is-on,#credits .topup-quick button[disabled]{border-color:transparent;background:var(--c-fill)} #credits .topup-quick button[disabled]{color:var(--muted);cursor:not-allowed}
  #credits .topup-slide{display:block;margin-top:16px} #credits .topup-slide-label{display:block;margin-bottom:6px;color:var(--muted);font-size:13px}
  #credits .topup-slide input[type=range]{width:100%;height:44px;background:transparent;-webkit-appearance:none;appearance:none}
  #credits .topup-slide input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--c-line)}
  #credits .topup-slide input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:var(--c-line)}
  #credits .topup-slide input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-10px;width:24px;height:24px;border:1px solid var(--c-line);border-radius:999px;background:var(--white)}
  #credits .topup-slide input[type=range]::-moz-range-thumb{width:24px;height:24px;border:1px solid var(--c-line);border-radius:999px;background:var(--white)}
  #credits .topup-slide input[type=range][disabled]{cursor:not-allowed} #credits .topup-slide input[type=range][disabled]::-webkit-slider-thumb{background:var(--c-fill)}
  #credits .topup-figures{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:4px 0 2px} #credits .topup-figures span{color:var(--ink);font-size:15px}
  /* The money detail sits UNDER what it buys (founder, 2026-08-13): pictures and
     minutes are what a person came here for; the rupees are the receipt. */
  #credits .topup-fine{margin:0 0 14px;color:var(--muted);font-size:13px}
  #credits .topup-figures b{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums}
  #credits .plan-say{margin-top:14px;color:var(--muted);font-size:13px}