/* BILLING (CJ 10/13): clearance picker (js/billing.js), gate enlist form + flash */
#bill{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--scrim);backdrop-filter:blur(5px)}
#bill.wall{background:radial-gradient(ellipse at 50% 40%,var(--red-bg),transparent 60%),repeating-linear-gradient(to bottom,transparent 0 2px,var(--scan) 3px),var(--bg)}
#bill .bl-box{position:relative;width:min(620px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overscroll-behavior:contain;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:22px;background:var(--glass2);border:1px solid var(--red-line);border-top:3px solid var(--red);box-shadow:var(--glow-red),var(--shadow);animation:popIn .2s ease-out;scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
#bill .bl-load{font-size:11px;letter-spacing:.24em;color:var(--dim);text-align:center;padding:30px 0}
#bill .bl-x{position:absolute;top:10px;right:10px;font-size:10px;letter-spacing:.14em;color:var(--dim);border:1px solid var(--line);padding:4px 7px;min-height:28px;transition:color .15s,border-color .15s,background .15s}
#bill .bl-x:hover{color:var(--ink-hi);border-color:var(--cy);background:var(--hover)}
#bill .bl-head h3{font:700 20px var(--hd);letter-spacing:.24em;color:var(--ink-hi);padding-right:48px}
#bill .bl-head small{display:block;margin-top:3px;font-size:10px;letter-spacing:.18em;color:var(--red2)}
#bill .bl-note{font-size:10px;letter-spacing:.14em;color:var(--warn);border:1px solid var(--warn-line);border-left:3px solid var(--warn);background:var(--warn-bg);padding:6px 8px}
#bill .bl-iv{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
#bill .bl-iv button{min-height:40px;font:700 12px var(--hd);letter-spacing:.2em;color:var(--dim);transition:color .15s,background .15s}
#bill .bl-iv button:hover:not([aria-pressed="true"]){color:var(--ink-hi);background:var(--hover)}
#bill .bl-iv button em{font-style:normal;font:10px var(--mono);letter-spacing:.08em;color:var(--ok);margin-left:4px}
#bill .bl-iv button[aria-pressed="true"]{color:var(--on-accent);background:var(--cy)}
#bill .bl-iv button[aria-pressed="true"] em{color:var(--on-accent)}
#bill .bl-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#bill .bl-tier{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 10px;text-align:left;border:1px solid var(--line2);background:var(--panel);color:var(--ink);min-height:44px;transition:border-color .15s,background .15s,box-shadow .15s}
#bill .bl-tier:hover:not(:disabled){border-color:var(--red2);background:color-mix(in srgb,var(--red) 5%,var(--panel))}
#bill .bl-tier[aria-pressed="true"]{border-color:var(--red);background:var(--red-bg);box-shadow:0 0 18px var(--red-bg) inset,inset 0 3px 0 var(--red)}
#bill .bl-tier:disabled,#bill .bl-add:disabled{opacity:.5;cursor:default}
#bill .bl-tn{font:700 14px var(--hd);letter-spacing:.2em;color:var(--ink-hi)}
#bill .bl-pr{font:700 20px var(--hd);color:var(--red2);white-space:nowrap}
#bill .bl-pr small{font:11px var(--mono);color:var(--dim)}
#bill .bl-pr em{display:block;font-style:normal;font:10px var(--mono);color:var(--dim)}
#bill .bl-tier ul{display:flex;flex-direction:column;gap:4px;font-size:10.5px;line-height:1.4;color:var(--ink2)}
#bill .bl-tier li{position:relative;padding-left:12px}#bill .bl-tier li::before{content:"";position:absolute;left:1px;top:5px;width:5px;height:5px;background:var(--red);transform:rotate(45deg)}
#bill .bl-tag{position:absolute;top:8px;right:8px;font-style:normal;font-size:9px;letter-spacing:.16em;color:var(--ok)}
#bill .bl-h{font-size:10px;letter-spacing:.26em;color:var(--cy2);font-weight:400}
#bill .bl-adds{display:flex;flex-direction:column;gap:6px}
#bill .bl-add{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;text-align:left;border:1px solid var(--line2);background:var(--panel);color:var(--ink);min-height:44px;transition:border-color .15s,background .15s}
#bill .bl-add:hover:not(:disabled){border-color:var(--red2)}
#bill .bl-add[aria-pressed="true"]{border-color:var(--red);background:var(--red-bg);box-shadow:inset 3px 0 0 var(--red)}
#bill .bl-add b{display:block;font:700 13px var(--hd);letter-spacing:.18em;color:var(--ink-hi)}
#bill .bl-add small{font-size:10px;color:var(--dim)}
#bill .bl-add .bl-pr{font-size:15px}
#bill .bl-fine{font-size:9.5px;line-height:1.5;letter-spacing:.06em;color:var(--dim)}
#bill .bl-sum{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px}
#bill .bl-sum span{font-size:10px;letter-spacing:.26em;color:var(--dim)}#bill .bl-sum b{font:700 22px var(--hd);color:var(--ink-hi);letter-spacing:.06em}
#bill .bl-due{min-height:13px;font-size:10px;letter-spacing:.1em;color:var(--warn);text-align:right}
#bill .bl-go{min-height:46px;border:1px solid var(--red-fill);background:var(--red-fill);color:#fff;font:700 14px var(--hd);letter-spacing:.26em;box-shadow:var(--glow-red);transition:background .15s,box-shadow .15s,transform .1s}
#bill .bl-go:hover:not(:disabled){background:var(--red-fill2);box-shadow:0 0 26px color-mix(in srgb,var(--red) 50%,transparent)}
#bill .bl-go:active:not(:disabled){transform:translateY(1px)}
#bill .bl-go:disabled{opacity:1;cursor:not-allowed;background:var(--red-bg);color:var(--red-ink);border-color:var(--red-line);box-shadow:none}
#bill .bl-msg{min-height:14px;font-size:11px;letter-spacing:.12em;color:var(--dim);text-align:center}
#bill .bl-msg.bad{color:var(--red2)}#bill .bl-msg.ok{color:var(--ok)}
#bill .bl-foot{display:flex;justify-content:center;gap:10px}
#bill .bl-foot button{font-size:10px;letter-spacing:.2em;color:var(--cy2);border:1px solid var(--line);background:var(--cy-bg2);padding:8px 12px;min-height:36px;transition:color .15s,border-color .15s,background .15s}
#bill .bl-foot button:hover{border-color:var(--cy);color:var(--ink-hi);background:var(--cy-bg)}
@media (max-width:620px){
  #bill{padding:0;align-items:stretch}
  #bill .bl-box{max-height:100vh;max-height:100dvh;border-left:0;border-right:0;padding:16px;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  #bill .bl-x{top:calc(10px + env(safe-area-inset-top))}
  #bill .bl-iv button em{display:block;margin:0}
  #bill .bl-tiers{grid-template-columns:1fr}
  #bill .bl-tier{display:grid;grid-template-columns:1fr auto;align-items:baseline}
  #bill .bl-tier ul{grid-column:1/-1}
  #bill .bl-tag{position:static;grid-column:1/-1}
  #bill .bl-tag:empty{display:none}
}
/* gate: enlist + forgot links, post-checkout flash */
#gate .glinks{display:flex;justify-content:space-between;gap:10px}
#gate .glink{font-size:10px;letter-spacing:.18em;color:var(--cy2);padding:6px 0;min-height:32px}
#gate .glink:hover{color:var(--ink-hi);text-decoration:underline;text-underline-offset:3px}
#gate .gnote{font-size:10px;line-height:1.5;letter-spacing:.08em;color:var(--dim);text-align:center}
#gate .ghp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#bill-flash{position:fixed;z-index:330;left:50%;top:calc(18px + env(safe-area-inset-top));transform:translateX(-50%);padding:10px 16px;border:1px solid var(--ok);background:var(--glass2);backdrop-filter:blur(12px);color:var(--ok);font:700 13px var(--hd);letter-spacing:.22em;box-shadow:0 0 24px var(--ok-bg),var(--shadow);transition:opacity .6s;max-width:calc(100vw - 32px);text-align:center}
#bill-flash.bad{border-color:var(--red);color:var(--red2);background:var(--glass2)}
#bill-flash.out{opacity:0}
/* touch: 44px targets, 16px gate inputs are in auth.css (proposed) */
@media (pointer:coarse){#bill .bl-x{min-height:44px;min-width:44px;padding:4px 10px}#bill .bl-iv button{min-height:44px}#bill .bl-foot button{min-height:44px}#gate .glink{min-height:44px;display:inline-flex;align-items:center}}
#bill .bl-tier:focus-visible,#bill .bl-add:focus-visible,#bill .bl-go:focus-visible,#bill .bl-iv button:focus-visible{outline:2px solid var(--cy2);outline-offset:-2px}