/* Account and small pages (W4): a checkbox that looks like the design's switch, so the
   settings form works without scripts. Tokens come from product.css. */
.swl{position:relative;display:inline-block;flex:none;width:54px;height:32px;cursor:pointer}
.swl input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.swl .tr{position:absolute;inset:0;border-radius:99px;background:var(--line-strong);transition:background-color .25s var(--ease-out)}
.swl .tr i{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:99px;background:var(--raised);box-shadow:0 2px 4px rgba(0,0,0,.2);transition:translate .52s var(--bounce)}
.swl input:checked + .tr{background:var(--proof-fill)}
.swl input:checked + .tr i{translate:22px 0}
.swl input:focus-visible + .tr{outline:2px solid var(--ink);outline-offset:3px}
.lrow .rowlink{display:flex;align-items:center;gap:14px;flex:1;min-width:0;color:inherit;text-decoration:none}
.lrow form{margin:0}
.lrow .small-note{font-size:13.5px}
.note-pill{height:22px;font-size:11px}
.center-page{text-align:center;padding-top:50px}
.center-page .lead{margin-left:auto;margin-right:auto}
.center-page .acts{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.center-page h1{font-size:46px}
.codebox{display:flex;align-items:center;gap:12px;border-radius:12px;background:var(--night);color:#e9e7e1;padding:14px 16px;font:13.5px/1.7 var(--mono)}
.codebox>span{flex:1;min-width:0;white-space:pre;overflow-x:auto}
@media (max-width:480px){.center-page h1{font-size:34px}}
/* status pills on rows and in the table: grey by default, ink for "running" */
.lrow .pill,.tbl .pill{background:var(--grey-wash);color:var(--ink-2)}
.lrow .pill.proof,.tbl .pill.proof{background:var(--proof-wash);color:var(--proof-ink)}
.lrow .pill.coral,.tbl .pill.coral{background:var(--coral-wash);color:var(--coral-ink)}
.lrow .pill.ink{background:var(--ink);color:var(--on-ink)}
.tbl .pill{height:22px;font-size:11px;margin-left:6px}
/* a toast rendered by the server fades away by itself */
.toasts .toast:not(.out){animation:toastout .3s var(--ease-out) 3.2s forwards}
/* UI pass 6: account tabs as a segmented control; rows and the billing table fit phones */
.acct-tabs{display:inline-flex;gap:4px;padding:4px;margin:0 0 20px;border-radius:999px;background:var(--sunk)}
main .acct-tabs a{height:34px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;font-weight:600;font-size:14px;color:var(--ink-2);text-decoration:none;transition:color .38s var(--ease-out),background-color .38s var(--ease-out)}
main .acct-tabs a:hover{color:var(--ink)}
main .acct-tabs a[aria-current="page"]{background:var(--raised);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04)}
@media (max-width:640px){
  .lrow{flex-wrap:wrap;align-items:flex-start}
  .lrow .rowlink{flex-wrap:wrap;gap:8px 14px}
  .lrow .rowlink>:first-child{flex:1 1 100%!important}
  .tbl-wrap{overflow-x:visible}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{padding:14px 18px;border-top:1px solid var(--line-2)}
  .tbl tr:first-child{border-top:0}
  .tbl td{padding:2px 0!important;border:0!important;text-align:left!important}
  .tbl td:first-child{font:500 12px var(--mono);color:var(--ink-3)}
}
/* second review pass: billing status column, account rows on phones */
.tbl td .pill{margin-left:0}
.lrow .host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){
  .acct-head>div:first-child{flex:1 1 100%!important}
  .lrow form{flex:1 1 100%}
  .tbl td.amt,.tbl td.amt+td{display:inline-block;width:auto;margin-right:8px}
}
@media (max-width:480px){.codebox{flex-wrap:wrap}.codebox>span{flex-basis:100%}}

.agency-box{margin:16px 0 8px;padding:16px 20px;border-radius:16px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);line-height:1.55}