/* Billing's look for everyone (inbox 0626, Erik 2026-10-23), filled into shell.head on every page (head.html): the head is
   never swapped (0100). Four parts: the pay page (bpay 53 baked), the thanks page (bthanks 45), the failed-payment bar
   (bbar 35), the dashboard's Billing tab rows (btab 11). Pay page: Stripe's form on the whole site window, a side column of what it buys. The head fill stands above shell.css, so a rule meeting a shell rule (main > section, .sec, .hero, .wrap)
   asks #main to win. Every chrome rule asks :has(#main > .bl-pay), so the chrome is back on any other page. */

/* ░█ the window: no tabs, no titlebar links, no status line ░███████████████████████████████████████████████ */
body:has(#main > .bl-pay) :is(.tabbar2,.tb-reopen,.bar > :not(.dots,.brand,.bar-grow),.status){display:none}
/* the page is the window's height: the column and the form scroll in their own panes when taller, the trust line
   never leaves the column's foot */
#main:has(> .bl-pay){display:grid;height:100%;min-height:100%;grid-template-rows:minmax(0,1fr)}
#main > .bl-pay{display:grid;grid-template-rows:minmax(0,1fr);min-height:0;width:auto;max-width:none;margin:0;border:0;
  border-radius:0;background:none;box-shadow:none}
#main > .bl-pay::before{display:none}
#main > .bl-pay > .sec{display:grid;grid-template-rows:minmax(0,1fr);min-height:0;padding:0}
.bl-pay .wrap.narrow{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"sum form" "alt form" "trust form";
  width:100%;max-width:none;min-height:0;margin:0;padding:0}
.bl-pay .wrap.narrow::before{content:"";grid-column:1;grid-row:1 / -1;border-right:1px solid var(--hl1)}

/* ░█ the form: Stripe's card 50px under the top on one calm surface ░████████████████████████████████████████ */
/* --s3 is the token nearest Stripe's dark pane. Stripe sets the frame's height inline to its content; the 50px is a
   spacer that shrinks to nothing once the form grows (a payment method picked), the rest of the space below it */
#bl-pay{grid-area:form;display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto;background:var(--s3)}
#bl-pay::before{content:"";flex:0 1 50px}
#bl-pay::after{content:"";flex:1 0 0}
#bl-pay iframe{flex:none;width:100%!important}
/* the staff preview's placeholder (?lab=1 without a test key): Stripe's form, one column, about 780px */
.bl-pay-ph{display:flex;flex:1 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:780px;
  padding:24px;border:1px dashed var(--hl3);background:var(--s1);font:500 12px/1.6 var(--fm);color:var(--faint);text-align:center}
.bl-pay-ph b{font:600 13px/1.3 var(--fm);color:var(--dim)}

/* ░█ the column: Join <name>, what it opens, the guarantee ░█████████████████████████████████████████████████ */
.bl-pay-sum{grid-area:sum;display:flex;flex-direction:column;gap:14px;min-height:0;padding:28px 22px 18px;overflow-y:auto;scrollbar-width:thin}
.bl-pay-name{margin:0;font:800 24px/1.15 var(--fd);color:var(--ink)}
.bl-pay-by{margin:-8px 0 0;font:500 12px/1.3 var(--fm);color:var(--faint)}
:is(.bl-pay-opens,.bl-pay-pkg ul){display:flex;flex-direction:column;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.bl-pay-opens::before{content:"Included";font:500 10px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
:is(.bl-pay-opens,.bl-pay-pkg ul) li{display:flex;align-items:center;gap:8px;font:600 14px/1.35 var(--fd);color:var(--ink)}
:is(.bl-pay-opens,.bl-pay-pkg ul) li::before{content:"\2713";color:var(--green);font-weight:700;line-height:1}
.bl-pay-opens li::after{content:attr(data-kind);margin-left:auto;font:500 10px/1 var(--fm);letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
:is(.bl-pay-acc,.bl-pay-seats){margin:0;font:500 12px/1.4 var(--fm);color:var(--dim)}
.bl-pay-acc{padding-top:14px;border-top:1px solid var(--hl1)}
/* AI Lab: Erik's list replaces the plain one; its heading says Lifetime, so no access or seats line */
.bl-pay-sum:has(.bl-pay-pkg) :is(.bl-pay-opens,.bl-pay-acc,.bl-pay-seats){display:none}
.bl-pay-pkg{margin:6px 0 0}
.bl-pay-wip{margin:0 0 12px;font:500 12px/1.4 var(--fd);color:var(--dim)}
.bl-pay-pk{margin:0;font:500 10px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.bl-pay-pkg ul{gap:10px;margin:14px 0 0}
.bl-pay-pkg li:has(.bl-pay-under){align-items:flex-start}
.bl-pay-was{margin-left:4px;font-weight:500;color:var(--faint)}
.bl-pay-free{color:var(--green);font-weight:700}
.bl-pay-under{display:flex;flex-direction:column;gap:3px;margin-top:5px;font:500 12px/1.35 var(--fd);color:var(--dim)}
/* the guarantee (bguar 56, Erik 2026-10-23): a band across the column's whole width, a green shield, the title and
   the text on --s2 */
.bl-pay-guar{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:8px;align-items:start;margin:16px -22px 0;
  padding:10px 22px;border-block:1px solid var(--hl1);background:var(--s2)}
.bl-pay-gico{grid-column:1;grid-row:1 / span 2;margin-top:1px;color:var(--green)}
.bl-pay-gico svg{display:block}
.bl-pay-gt{grid-column:2;margin:0;font:700 13px/1.3 var(--fd);color:var(--ink)}
.bl-pay-gp{grid-column:2;margin:2px 0 0;font:500 11.5px/1.45 var(--fd);color:var(--faint)}

/* ░█ the robot before AI Lab's name ░█████████████████████████████████████████████████████████████████████████ */
/* ticons.css draws it and blinks it, ticons.js moves its eyes; while Stripe's form holds the focus it shuts them, open
   again on leaving. Chromium matches neither iframe:focus nor :focus-within on a cross-origin frame (measured), so
   pay.html's script sets .shut when the window blurs onto the frame */
.bl-pay-name:has(.bl-pay-bot){display:flex;align-items:center;gap:10px}
.bl-pay-bot{display:inline-flex;flex:none;color:var(--ink)}
.bl-pay-bot-ic{width:35px;height:30px}
.bl-pay-bot .tic-ey{transition:transform .15s ease-out}
.bl-pay-bot.shut .tic-ey{animation:none;transform:scaleY(.12)}

/* ░█ the column's foot: the fallback, then the trust line (Erik 2026-10-23) ░██████████████████████████████████ */
.bl-pay-alt{grid-area:alt;padding:14px 22px 0;border-top:1px solid var(--hl1)}
.bl-pay-alt-q{font:500 12px/1.4 var(--fd);color:var(--faint)}
.bl-pay-alt-go{padding:0;border:0;background:none;font:700 12px/1.4 var(--fd);color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--hl3);text-underline-offset:3px;cursor:pointer}
.bl-pay-alt-go:hover{color:var(--acc);text-decoration-color:currentColor}
.bl-pay-trust{grid-area:trust;display:flex;gap:8px;align-items:flex-start;margin:0;padding:12px 22px 20px;
  font:500 11px/1.45 var(--fm);color:var(--faint)}
.bl-pay-trust svg{flex:none}

/* ░█ a phone: the column on top, the form, the fallback, the trust line; the page scrolls as one ░█████████████ */
@container page (max-width:760px){
  #main:has(> .bl-pay){height:auto;grid-template-rows:none}
  :is(#main > .bl-pay,#main > .bl-pay > .sec){grid-template-rows:none}
  .bl-pay .wrap.narrow{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"sum" "form" "alt" "trust"}
  .bl-pay .wrap.narrow::before{display:none}
  :is(#bl-pay,.bl-pay-sum){overflow:visible}
  .bl-pay-sum{padding:18px 16px;border-bottom:1px solid var(--hl1)}
  .bl-pay-guar{margin-inline:-16px;padding-inline:16px}
  .bl-pay-alt{padding:14px 16px 0}
  .bl-pay-trust{padding:12px 16px 20px}
}

/* ░█ the thanks page (bthanks 45, Erik 2026-10-23): the thank-you.txt card, a timeline, the receipt, a sticker ░█ */
/* thanks.html, every state; the GIF a tilted sticker on the card's top right. The card's padding and the phone's
   sticker width are reused by the rules below */
#main .bl-thx{--thx-pad:28px;--thx-padm:18px;--thx-gwm:172px}
/* the file's name its head, the receipt its foot, the log a timeline under the headline */
#main .bl-thx .wrap.narrow{
  position:relative;display:flex;flex-direction:column;max-width:660px;margin-top:30px;
  padding:0 var(--thx-pad) calc(var(--thx-pad) - 6px);border:1px solid var(--hl2);border-radius:var(--rc);background:var(--s1)}
#main .bl-thx .wrap.narrow::before{
  content:"~/ thank-you.txt";display:block;margin:0 calc(-1 * var(--thx-pad)) calc(var(--thx-pad) - 2px);padding:11px 16px;
  border-bottom:1px solid var(--hl1);border-radius:calc(var(--rc) - 1px) calc(var(--rc) - 1px) 0 0;background:var(--s2);
  font:500 11px/1 var(--fm);color:var(--faint)}
#main .bl-thx .wrap > *{order:3}
#main .bl-thx .wrap > h1{order:1;font-size:2.2rem}
#main .bl-thx .wrap > .bl-thx-log{order:2}
/* the receipt: Training (AI Lab's robot before it), Date, Email, Invoice (Stripe's page once it exists), spread */
#main .bl-thx .wrap > .bl-thx-receipt{
  order:9;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 26px;
  margin:calc(var(--thx-pad) - 2px) calc(-1 * var(--thx-pad)) calc(6px - var(--thx-pad));padding:14px var(--thx-pad);
  border-top:1px solid var(--hl1);border-radius:0 0 calc(var(--rc) - 1px) calc(var(--rc) - 1px);background:var(--s2)}
#main .bl-thx-receipt div{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:100%;font-size:.86rem}
#main .bl-thx-receipt div[hidden]{display:none}
#main .bl-thx-receipt dt{color:var(--faint)}
#main .bl-thx-receipt dd{margin:0;overflow:hidden;font:500 12px/1.5 var(--fm);color:var(--dim2);text-align:left;
  text-overflow:ellipsis;white-space:nowrap}
#main .bl-thx :is(.bl-thx-receipt,.bl-thx-log) a{color:inherit;text-decoration:underline;
  text-decoration-color:var(--hl3);text-underline-offset:3px}
#main .bl-thx :is(.bl-thx-receipt,.bl-thx-log) a:hover{color:var(--acc);text-decoration-color:currentColor}
#main .bl-thx-help{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
#main .bl-thx-help:hover{color:var(--acc)}
#main .bl-thx-bot{display:inline-flex;margin-right:6px;vertical-align:-.25em}
#main .bl-thx-bot-ic{width:1.4em;height:1.2em}
/* the timeline: done nodes green, the open one an orange ring, the waiting ones gray */
#main .bl-thx-log{display:grid;gap:0;margin:24px 0 0 9px;padding:0;border-left:1px solid var(--hl3);list-style:none}
#main .bl-thx-log li{position:relative;display:grid;gap:3px;padding:0 0 20px 26px}
#main .bl-thx-log li::before{
  content:"";position:absolute;left:-6px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--green)}
#main .bl-thx:is([data-state="code"],[data-state="mail"]) .bl-thx-log li:last-child::before,
#main .bl-thx:is([data-state="processing"],[data-state="down"],[data-state="busy"]) .bl-thx-log li:first-child::before,
#main .bl-thx-log li.wait::before{
  left:-7px;width:12px;height:12px;border:2px solid var(--acc);background:var(--s1)}
#main .bl-thx:is([data-state="processing"],[data-state="down"],[data-state="busy"]) .bl-thx-log li:not(:first-child)::before{border:2px solid var(--hl3);background:var(--s1)}
#main .bl-thx-log li > span{font:600 10px/1.3 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
/* the steps' words and the receipt's values a softer gray than the headline's ink (Erik, 2026-10-23: "too white") */
#main .bl-thx-log b{font:600 1rem/1.45 var(--fd);color:var(--dim2)}
#main .bl-thx .btn-row{align-items:center;margin-top:18px}
/* the button, AI Lab's robot on its right, its eyes held on the button (!important beats ticons.js' inline move); it
   blinks when thanks.html's script says, at random, and jumps on the click */
#main .bl-thx-go{margin-top:6px}
#main .bl-thx-go .btn-row{flex-flow:row nowrap}
#main .bl-thx-robot{display:inline-flex;flex:none;margin-left:6px;color:var(--ink)}
#main .bl-thx-robot-ic{width:50px;height:43px}
#main .bl-thx-robot .tic-eyes{transform:translate(-3.4px,.4px)!important}
#main .bl-thx-robot .tic-ey{animation:none;transition:transform .07s}
#main .bl-thx-robot.blink .tic-ey{transform:scaleY(.12)}
#main .bl-thx-robot.jump{animation:bl-robot-jump .36s cubic-bezier(.3,.7,.4,1)}
@keyframes bl-robot-jump{0%,100%{transform:none}45%{transform:translateY(-14px) rotate(-5deg)}75%{transform:translateY(2px)}}
#main .bl-thx-confirm{margin:10px 0 0;font:500 12px/1.5 var(--fd);color:var(--faint)}
#main .bl-thx-confirm a{color:inherit;text-decoration:underline;text-decoration-color:var(--hl3);text-underline-offset:3px}
#main .bl-thx-confirm a:hover{color:var(--acc)}
/* the clip: Bunny's mp4 (thanks.html), the whole clip at its 480 x 290, a tilted sticker on the card; its frame 5px
   (Erik, 2026-10-23: "reduce padding in the gif card a bit", 45 had 10px) */
#main .bl-thx .wrap > .bl-thx-gif{
  position:absolute;top:-34px;right:-44px;z-index:1;display:block;width:273px;margin:0;padding:5px;
  border:1px solid var(--hl3);border-radius:var(--rb);background:var(--s2);transform:rotate(4deg);box-shadow:0 10px 24px -12px var(--canvas)}
#main .bl-thx-gif video{
  display:block;box-sizing:border-box;width:100%;aspect-ratio:48 / 29;object-fit:cover;border:1px solid var(--hl2);border-radius:5px;
  background:var(--s2)}
/* the party popper after "Welcome to LRA": LRA, the popper and the ! never part (a flex box drops the template's
   whitespace between them); the cone tilts, the confetti bursts out of it, rests and fades, every 3.2 s */
#main .bl-thx-nw{display:inline-flex;align-items:baseline;white-space:nowrap}
#main .bl-thx-pop{flex:none;width:1em;height:1em;margin:0 .04em 0 .2em;overflow:visible}
#main .bl-thx-pop .pp-cone{transform-box:fill-box;transform-origin:0 100%;animation:bl-pp-tilt 3.2s ease-in-out .2s infinite both}
/* where each bit flies from: the g is child 1, the bits 2 to 9 */
#main .bl-thx-pop > :nth-child(2){--dx:-6px;--dy:9px}
#main .bl-thx-pop > :nth-child(3){--dx:-10px;--dy:6px}
#main .bl-thx-pop > :nth-child(4){--dx:-13px;--dy:0px}
#main .bl-thx-pop > :nth-child(5){--dx:-1px;--dy:12px}
#main .bl-thx-pop > :nth-child(6){--dx:-13px;--dy:12px}
#main .bl-thx-pop > :nth-child(7){--dx:-4px;--dy:5px}
#main .bl-thx-pop > :nth-child(8){--dx:-6px;--dy:1px}
#main .bl-thx-pop > :nth-child(9){--dx:4px;--dy:10px}
#main .bl-thx-pop .pp-bit{transform-box:fill-box;transform-origin:center;animation:bl-pp-pop 3.2s cubic-bezier(.2,.8,.3,1) .2s infinite both}
@keyframes bl-pp-tilt{0%{transform:rotate(0)}10%{transform:rotate(-14deg)}24%{transform:rotate(6deg)}38%{transform:rotate(-3deg)}50%,100%{transform:rotate(0)}}
@keyframes bl-pp-pop{0%,10%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}30%{opacity:1}55%,85%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@media (prefers-reduced-motion:reduce){ #main .bl-thx-pop :is(.pp-cone,.pp-bit){animation:none} }
/* a phone: the card's narrow padding; the sticker stands above the card, clear of the headline, its frame 4px (45: 8px) */
@container page (max-width:760px){
  #main .bl-thx .wrap.narrow{margin:calc(.604 * var(--thx-gwm) - 32px) 16px 0;padding:0 var(--thx-padm) var(--thx-padm)}
  #main .bl-thx .wrap.narrow::before{margin:0 calc(-1 * var(--thx-padm)) calc(var(--thx-padm) + 4px)}
  #main .bl-thx .wrap > .bl-thx-receipt{gap:8px 20px;margin:calc(var(--thx-padm) + 4px) calc(-1 * var(--thx-padm)) calc(-1 * var(--thx-padm));
    padding:12px var(--thx-padm)}
  #main .bl-thx h1{font-size:1.9rem}
  #main .bl-thx .wrap > .bl-thx-gif{top:calc(38px - .604 * var(--thx-gwm));right:-8px;width:var(--thx-gwm);padding:4px}
}

/* ░█ the failed-payment bar (bbar 35, Erik 2026-10-23): a red line above the status bar, words and an arrow ░█ */
/* notice.html, billing's fill into shell.notice on every page of a plan's owner with a part open: the sentence
   light red, the plan white, Pay it here a quiet chip that lights red on hover, the arrow stepping right */
.bl-notice{display:flex;align-items:center;gap:10px;height:30px;padding:0 16px;
  border-top:1px solid color-mix(in srgb,var(--red) 45%,transparent);background:color-mix(in srgb,var(--red) 12%,var(--s1));
  font:600 11px/1 var(--fm);letter-spacing:.04em;color:var(--ink)}
.bl-notice-i{display:block;flex:none;color:var(--red)}
.bl-notice-i svg{display:block;width:13px;height:13px}
.bl-notice p{display:flex;align-items:center;flex:1;gap:12px;margin:0;white-space:nowrap;overflow:hidden}
.bl-notice-t{min-width:0;overflow:hidden;text-overflow:ellipsis;color:color-mix(in srgb,var(--red) 70%,var(--ink))}
.bl-notice-p{color:var(--ink)}
.bl-notice a{display:inline-flex;flex:none;align-items:center;gap:6px;margin-left:auto;padding:4px 8px;border-radius:5px;
  font-weight:700;color:var(--ink);text-decoration:none;transition:background .16s,color .16s}
.bl-notice a::after{content:"\2192";transition:transform .16s}
.bl-notice a:is(:hover,:focus-visible){background:color-mix(in srgb,var(--red) 32%,transparent);color:var(--ink)}
.bl-notice a:is(:hover,:focus-visible)::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){ .bl-notice a::after{transition:none} }
/* a phone's width: the line wraps */
@container page (max-width:640px){ .bl-notice{font-size:12px} }
@media (max-width:640px){
  .bl-notice{height:auto;padding:7px 12px}
  .bl-notice p{white-space:normal;flex-wrap:wrap}
}

/* ░█ the Billing tab (btab 11, Erik 2026-10-23): a running plan's parts still to come, gray and dated ░██████ */
/* account_billing.html's rows above the paid ones, the due part red with its Pay link; accounts.css draws the table */
.ac-inv .ac-inv-next td{color:var(--faint)}
.ac-inv .ac-inv-next-open td{color:var(--red)}
.ac-inv .ac-inv-next .ac-inv-dl{font:600 11px/1 var(--fm);letter-spacing:.06em;color:var(--ink);text-decoration:underline;text-underline-offset:3px}