/* BreakPass app (portal and admin). Tokens, fonts and the footer come from foundation.css.
   No inline styles are used anywhere (the CSP allows only same-origin styles). */

/* ---- base ---------------------------------------------------------------------------------- */
.app-body{background:var(--band)}
/* F24 (D-1514): the accent is lime #C6FE1E (the logo's ringing marks); the old pink is gone. Text on lime is dark
   ink #161616 (about 17:1), never white. Errors use the error colour #C8102E (CLAUDE.md). */
:root{--lime-btn:#C6FE1E;--lime-btn-h:#B5EB12;--lime-btn-p:#A2D40F}
.app-main{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:32px 0 72px}
.app-main--narrow{width:min(760px,calc(100% - 32px))}
.app-main--wide{width:min(1240px,calc(100% - 48px))}
.app-main h1,.page-h{margin:0;font:400 32px/40px var(--f-serif);color:var(--ink-d)}
.app-main h2{margin:0;font:700 20px/28px var(--f-sans);color:var(--ink-d)}
.app-main h3{margin:0;font:700 16px/24px var(--f-sans);color:var(--ink-d)}
.app-main p{margin:0}
.lead{color:var(--grey-a);font-size:16px;line-height:24px}
.muted{color:var(--grey-a)}
.small{font-size:14px;line-height:20px}
.fine{font-size:13px;line-height:20px;color:var(--grey-a)}
.mono{font-family:var(--f-mono);font-size:15px;line-height:24px;word-break:break-all}
.stack{display:flex;flex-direction:column;gap:16px}
.stack--lg{gap:24px}
.stack--sm{gap:8px}
ul.stack,ol.stack{list-style:none;margin:0;padding:0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.row--between{justify-content:space-between}
.row--end{justify-content:flex-end}
.grow{flex:1 1 auto;min-width:0}
.caps{font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink-d)}
.nowrap{white-space:nowrap}
a.link,.link{color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
a.link:hover{color:var(--ink-d)}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.page-head__t{display:flex;flex-direction:column;gap:6px}
.page-head__a{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.grid{display:grid;gap:24px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.section{margin-top:32px}
/* A note right under a card or table in the page (Billing's top-up line, Download statement): .app-main p sets margin:0 (D-1268). */
.app-main>.card+p,.app-main>.table-wrap+p{margin-top:16px}

/* ---- header --------------------------------------------------------------------------------- */
.app-hdr{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--line)}
.app-hdr__bar{display:flex;align-items:center;gap:20px;min-height:64px;padding:0 24px;width:min(1240px,100%);margin:0 auto;box-sizing:border-box}
.app-hdr__logo{display:block;line-height:0;flex:none}
.app-hdr__logo img{display:block;height:24px;width:auto}
.app-nav{display:flex;align-items:center;gap:4px;flex:1 1 auto;min-width:0}
.app-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:5px;color:var(--ink);text-decoration:none;font:400 16px/24px var(--f-sans)}
.app-nav a:hover{background:var(--band);color:var(--ink-d)}
.app-nav a[aria-current=page]{font-weight:700;color:var(--ink-d);box-shadow:inset 0 -2px 0 var(--ink-d);border-radius:0}
.app-hdr__end{display:flex;align-items:center;gap:12px;flex:none;margin-left:auto}
.app-hdr__link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-radius:5px;color:var(--ink);text-decoration:none;font:400 14px/20px var(--f-sans);white-space:nowrap}
.app-hdr__link:hover{background:var(--band);color:var(--ink-d)}
.app-hdr__link:focus-visible{outline:2px solid var(--ink-d);outline-offset:2px}
.bal-chip{display:inline-flex;align-items:baseline;gap:8px;padding:6px 12px;border-radius:999px;background:var(--band);color:var(--ink);text-decoration:none;font:400 14px/20px var(--f-sans);min-height:32px;box-sizing:border-box;align-items:center}
.bal-chip b{font-weight:700;color:var(--ink-d)}
.app-menu{display:none;position:relative}
.app-menu>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer;border-radius:5px;color:var(--ink)}
.app-menu>summary::-webkit-details-marker{display:none}
.app-menu__panel{position:absolute;right:0;top:52px;width:min(320px,calc(100vw - 16px));background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:8px}
.app-menu__panel a,.app-menu__panel button{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:10px;color:var(--ink);text-decoration:none;font:400 16px/24px var(--f-sans);width:100%;box-sizing:border-box;background:none;border:0;text-align:left;cursor:pointer}
.app-menu__panel a:hover,.app-menu__panel button:hover{background:var(--band)}
.app-menu__panel a[aria-current=page]{font-weight:700;color:var(--ink-d)}
.app-menu__panel hr{border:0;height:1px;background:var(--line);margin:6px 14px}
.signout-form{display:inline}
/* Setup header (BR-B3.5, D-1242): logo, "Need help?" and the account menu. The menu is the only way out, so it
   shows at every width, and "Need help?" stays visible where the app header would hide it. */
.app-hdr--setup .app-menu{display:block}
.app-hdr--setup .app-hdr__end{gap:8px}
@media (max-width:899.98px){
  .app-nav{display:none}
  .app-menu{display:block}
  .app-hdr__bar{padding:0 8px 0 16px;gap:12px}
  .app-hdr__end .signout-form{display:none}
  .app-hdr__end .app-hdr__link{display:none}
  .app-hdr--setup .app-hdr__end .app-hdr__link{display:inline-flex}
  .app-main,.app-main--narrow,.app-main--wide{width:calc(100% - 32px);padding:24px 0 56px}
  .app-main h1,.page-h{font-size:26px;line-height:34px}
  .grid--3,.grid--2,.grid--4{grid-template-columns:minmax(0,1fr)}
}

/* ---- cards, banners, pills ------------------------------------------------------------------ */
.card{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:24px;box-sizing:border-box}
.card--flat{box-shadow:none;border:1px solid var(--line)}
.card--danger{box-shadow:none;border:1px solid var(--err)}
.card__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.card--pad-lg{padding:40px}
.big-num{font:400 44px/52px var(--f-serif);color:var(--ink-d)}
.kv{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:16px;line-height:24px}
.kv>div{display:flex;justify-content:space-between;gap:12px}
/* Label left, value right on one row; a long value wraps in its own column (D-1005). */
.kv>div>:first-child{flex:none}
.codes{display:flex;flex-direction:column;gap:16px;margin:16px 0 0}
.codes__row{padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;scroll-margin-top:96px}
.codes__row:target{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.codes__row dt{font-weight:700}
.codes__row dd{margin:8px 0 0}
.codes__row dd p{margin:4px 0}
.code-tag{white-space:nowrap}
.kv>div>:last-child{min-width:0;text-align:right}
.kv dt,.kv dd{margin:0}
.kv dd{text-align:right}
.kv .k{color:var(--grey-a)}
.banner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--field);font-size:16px;line-height:24px;margin-bottom:16px}
.banner__ic{flex:none;margin-top:2px}
.banner__body{flex:1 1 0;min-width:0} /* basis 0: on a phone the text stays beside the icon; only the action wraps */
.banner__act{flex:none;align-self:center}
.banner--err{border-color:var(--err);color:var(--err)}
.banner--err .banner__body{color:var(--ink-d)}
.banner--err .banner__ic{color:var(--err)}
.banner--warn{background:#FFF8E6;border-color:#E8C46A}
.banner--ok{background:#F2FAF4;border-color:#9BCFA9}
.banner--info{background:#fff}
/* Links in a banner take its text colour; buttons keep their own (dark ink on lime; D-1002, D-1514). */
.banner a:not(.btn){color:inherit}
@media (max-width:639.98px){.banner{flex-wrap:wrap}.banner__act{align-self:stretch;width:100%}}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#F0F0F0;color:#4A4A4A;font:700 12px/16px var(--f-sans);white-space:nowrap}
.pill--ok{background:#E4F4E9;color:#14602B}
.pill--run{background:#E8F0FE;color:#1B4DB1}
.pill--warn{background:#FFF1CC;color:#7A5200}
.pill--err{background:#FBE3E6;color:var(--err)}
.pill--muted{background:#F0F0F0;color:var(--grey-a)}
.pill--outline{background:#fff;border:1px solid var(--ink);color:var(--ink)}

/* ---- buttons -------------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 28px;box-sizing:border-box;border:0;border-radius:5px;background:var(--lime-btn);color:var(--ink-d);font:700 16px/20px var(--f-sans);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;cursor:pointer;box-shadow:var(--glow);transition:background-color .15s,transform .1s}
.btn:hover{background:var(--lime-btn-h);color:var(--ink-d)}
.btn:active{background:var(--lime-btn-p);transform:translateY(1px)}
/* Disabled reads as disabled, not as a paler pink button: grey fill, #5C5C5C text (5.7:1; D-1002). */
.btn[disabled],.btn[aria-disabled=true]{background:#EDEDED;color:#5C5C5C;box-shadow:none;cursor:not-allowed;transform:none}
.btn--secondary{background:#fff;color:var(--ink);border:1px solid var(--field);box-shadow:none;padding:0 27px}
.btn--secondary:hover{background:var(--band);border-color:var(--grey);color:var(--ink)}
.btn--secondary:active{background:#EDEDED;border-color:var(--ink)}
.btn--secondary[disabled],.btn--secondary[aria-disabled=true]{background:#fff;color:var(--grey);border-color:var(--line);cursor:not-allowed}
/* White on the error red is 5.6:1 (axe, Q-F-009). The base .btn text is ink, which gave 3.1:1 here. Same red, same name. */
/* U-57, U-187 (Q-F-014): the one busy state for a button that starts a slow action. It turns grey (the disabled grey) with
   a spinner inside, in place of the label, and can't be pressed again until the page answers. /js/app.js sets aria-busy on
   submit (a link opts in with data-busy); the invite and onboarding pages use the same state. */
.btn[aria-busy=true]{position:relative;background:#EDEDED!important;border-color:var(--line)!important;color:transparent!important;box-shadow:none!important;pointer-events:none;cursor:progress}
.btn[aria-busy=true]>*{visibility:hidden}
.btn[aria-busy=true]::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;box-sizing:border-box;border:2px solid var(--field);border-top-color:var(--ink);border-radius:50%;animation:bp-spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.btn[aria-busy=true]::after{animation-duration:2.4s}}
.btn--danger{background:var(--err);color:var(--bg);box-shadow:none}
/* F23 (D-1392): the brand's lime with ink on it (never white on lime), for the OAuth Allow button. Ink on lime 17:1. */
.btn--lime{background:#C6FE1E;color:var(--ink-d);box-shadow:none}
.btn--lime:hover{background:#B5EB12;color:var(--ink-d)}
.btn--lime:active{background:#A2D40F;color:var(--ink-d)}
.btn--danger:hover{background:#A10D26;color:#fff}
.btn--small{min-height:44px;padding:0 18px;font-size:13px}
.btn--block{display:flex;width:100%}
.btn--text{background:none;border:0;box-shadow:none;color:var(--ink);text-transform:none;letter-spacing:0;font:400 16px/24px var(--f-sans);text-decoration:underline;text-underline-offset:4px;padding:0 8px;min-height:44px}
.btn--text:hover{background:none;color:var(--ink-d)}
.btn--text:active{background:none}
/* A disabled text button is plain text (a countdown, D-1002): ink on the band 8.3:1, no underline. */
.btn--text[disabled],.btn--text[aria-disabled=true]{background:none;color:var(--ink);text-decoration:none;cursor:default}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* A price option (plan dialog, D-1005): the price in bold, interval and tax small, sentence case. */
.btn--opt{flex:1 1 200px;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:60px;padding:10px 18px;text-align:left;text-transform:none;letter-spacing:0}.page-head__a--note{flex-direction:column;align-items:flex-end;gap:6px;max-width:320px}
.page-head__a--note p{text-align:right}
@media (max-width:639.98px){.page-head__a--note{align-items:flex-start;max-width:none}.page-head__a--note p{text-align:left}}
@media (max-width:639.98px){.btn-row--stack>.btn{width:100%}}

/* ---- forms ---------------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field__lab{font:700 14px/20px var(--f-sans);color:var(--ink)}
.field__lab .opt{font-weight:400;color:var(--grey-a)}
.field__help{font:400 14px/20px var(--f-sans);color:var(--grey-a)}
.input,.select,.textarea{display:block;width:100%;box-sizing:border-box;min-height:48px;padding:0 16px;background:#fff;border:1px solid var(--field);border-radius:5px;outline:0;font:400 16px/24px var(--f-sans);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.textarea{padding:12px 16px;min-height:96px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:var(--ink-d);box-shadow:0 0 0 4px rgba(198,254,30,.75)}
.input[aria-invalid=true],.select[aria-invalid=true],.textarea[aria-invalid=true]{border-color:var(--err)}
.input[readonly]{background:var(--band)}
.input--mono{font-family:var(--f-mono);font-size:15px}
.input--code{font-family:var(--f-mono);font-size:28px;line-height:36px;letter-spacing:.5em;text-align:center;max-width:320px}
.input--money{max-width:200px}
.select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%234A4A4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
.field__err{display:flex;align-items:flex-start;gap:6px;font:400 14px/20px var(--f-sans);color:var(--err)}
.field__err svg{flex:none;margin-top:2px}
.check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 0;cursor:pointer;font:400 16px/24px var(--f-sans);color:var(--ink)}
.check input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--ink-d);cursor:pointer}
.check input:focus-visible{outline:2px solid var(--ink-d);outline-offset:3px}
.check__t{min-width:0}
/* ---- searchable country picker (D-1243) -------------------------------------------------------
   The native <select> stays in the DOM and keeps posting the field; /js/app.js hides it and shows this
   combobox. Nothing here applies until the script adds .is-enhanced, so a browser without it sees the select. */
.country-field{position:relative}
.country-field.is-enhanced>.select.is-replaced{display:none}
.cbx__btn{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;min-height:48px;padding:0 44px 0 16px;background:#fff;border:1px solid var(--field);border-radius:5px;font:400 16px/24px var(--f-sans);color:var(--ink);text-align:left;cursor:pointer;position:relative}
.cbx__btn[data-empty=yes]{color:var(--grey-a)}
.cbx__btn[aria-invalid=true]{border-color:var(--err)}
.cbx__btn:focus-visible{border-color:var(--ink-d);box-shadow:0 0 0 4px rgba(198,254,30,.75);outline:0}
.cbx__btn-text{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbx__chev{position:absolute;right:16px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.cbx__panel{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;display:flex;flex-direction:column;max-height:min(360px,60vh);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.cbx__head{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid var(--line)}
.cbx__search{min-height:44px}
.cbx__close{display:none;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:0;border-radius:5px;background:none;color:var(--ink);cursor:pointer}
.cbx__close:focus-visible{outline:2px solid var(--ink-d);outline-offset:2px}
.cbx__list{list-style:none;margin:0;padding:4px;overflow-y:auto;flex:1 1 auto}
.cbx__opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:8px;color:var(--ink-d);font:400 16px/24px var(--f-sans);cursor:pointer}
.cbx__opt[hidden]{display:none}
.cbx__opt.is-active{background:var(--band)}
.cbx__opt[aria-selected=true]{font-weight:700}
.cbx__flag{flex:none}
.cbx__name{flex:1 1 auto}
.cbx__dial{flex:none;color:var(--grey-a);font-variant-numeric:tabular-nums}
.cbx__none{margin:0;padding:12px 14px;color:var(--grey-a);font:400 16px/24px var(--f-sans)}
/* Small screens: the panel is a full-screen sheet, so 250 countries and a keyboard both fit. */
@media (max-width:599.98px){
  .country-field.is-open>.cbx__panel{position:fixed;inset:0;top:0;left:0;right:0;bottom:0;max-height:none;border:0;border-radius:0;z-index:80}
  .country-field.is-open>.cbx__panel .cbx__close{display:flex}
  .cbx__head{padding:12px}
}@media (max-width:639.98px){}
/* A copy field (D-1005): the address keeps a full row on a phone and ends in an ellipsis when it is
   longer than the box; the Copy button sits below it, full width. */
.copy-field{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.copy-field .input{flex:1 1 240px;min-width:0;text-overflow:ellipsis}
.copy-field .btn{flex:none}
@media (max-width:639.98px){.copy-field .input{flex-basis:100%;font-size:14px}.copy-field .btn{flex:1 1 auto}}@media (max-width:639.98px){}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.seg{display:inline-flex;margin:0;min-width:0;border:1px solid var(--field);border-radius:999px;padding:3px;background:#fff;gap:2px}
.seg>a,.seg>button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:44px;padding:0 18px;border-radius:999px;border:0;background:none;color:var(--grey-a);font:700 14px/20px var(--f-sans);text-decoration:none;cursor:pointer}
.seg>a[aria-current=true],.seg>button[aria-pressed=true]{background:var(--ink);color:#fff}
.seg>a:not([aria-current=true]):hover,.seg>button[aria-pressed=false]:hover{color:var(--ink)}
.rate{border:0;margin:0 0 24px;padding:0;min-width:0}
.rate__lab{display:block;padding:0;margin-bottom:8px;font:700 16px/24px var(--f-sans);color:var(--ink-d)}
.rate__row{display:flex;gap:8px;flex-wrap:wrap}
.rate__o{position:relative;display:inline-flex}
.rate__o input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.rate__o span{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;box-sizing:border-box;border:1px solid var(--field);border-radius:12px;background:#fff;font:700 16px/24px var(--f-sans);color:var(--ink-d)}
.rate__o input:checked+span{background:var(--ink-d);border-color:var(--ink-d);color:#fff}
.rate__o input:focus-visible+span{outline:2px solid var(--ink-d);outline-offset:3px}

/* radio cards and tiles */
.choice{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--field);border-radius:12px;background:#fff;cursor:pointer;min-height:44px;box-sizing:border-box}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice__dot{flex:none;width:22px;height:22px;border:1px solid var(--field);border-radius:50%;background:#fff;margin-top:1px;box-sizing:border-box;position:relative}
.choice input:checked~.choice__dot{border-color:var(--ink-d);background:var(--ink-d);box-shadow:inset 0 0 0 5px #fff}
.choice:has(input:checked){border:2px solid var(--ink-d);padding:15px 17px}
.choice:has(input:focus-visible){outline:2px solid var(--ink-d);outline-offset:3px}
.choice:has(input:disabled){background:var(--band);color:var(--grey-a);cursor:not-allowed}
.choice__b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.choice__t{font:700 16px/24px var(--f-sans);color:var(--ink-d);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.choice__s{font:400 14px/20px var(--f-sans);color:var(--grey-a)}
.choice__s .ln{display:block}
.choice__s .fig{font-weight:700;color:var(--ink-d)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:639.98px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border:1px solid var(--field);border-radius:12px;background:#fff;cursor:pointer;min-height:44px;box-sizing:border-box}
.tile input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tile:has(input:checked){border:2px solid var(--ink-d);padding:15px}
.tile:has(input:focus-visible){outline:2px solid var(--ink-d);outline-offset:3px}
.tile__n{font:700 24px/32px var(--f-sans);color:var(--ink-d)}
.tile__s{font:400 14px/20px var(--f-sans);color:var(--grey-a)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--field);border-radius:999px;background:#fff;cursor:pointer;font:400 15px/20px var(--f-sans);box-sizing:border-box}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.chip:has(input:focus-visible){outline:2px solid var(--ink-d);outline-offset:3px}

/* ---- tables --------------------------------------------------------------------------------- */
.table-wrap{background:#fff;border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.table-wrap:focus-visible{outline:2px solid var(--ink-d);outline-offset:2px}
.table{width:100%;border-collapse:collapse;font:400 15px/22px var(--f-sans)}
.table th{padding:12px 16px;text-align:left;font:700 12px/16px var(--f-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--grey-a);border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table .num{text-align:right;white-space:nowrap}
.table a.rowlink{color:var(--ink-d);font-weight:700;text-decoration:none}
.table a.rowlink:hover{text-decoration:underline}
.table .excerpt{display:block;color:var(--grey-a);font-weight:400;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:719.98px){
  .table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table--stack,.table--stack tbody,.table--stack tr,.table--stack td{display:block;width:100%;box-sizing:border-box}
  .table--stack tr{padding:12px 16px;border-bottom:1px solid var(--line)}
  .table--stack tr:last-child{border-bottom:0}
  .table--stack td{display:flex;justify-content:space-between;gap:16px;padding:4px 0;border:0;text-align:right}
  .table--stack td::before{content:attr(data-label);font:700 12px/20px var(--f-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--grey-a);text-align:left;flex:none}
  .table--stack td.cell-main{display:block;text-align:left}
  .table--stack td.cell-main::before{display:none}
  .table .excerpt{max-width:none;white-space:normal}
  /* Compact cards (alerts, D-1005): message, then status and time on one row; the rest is in the drawer. */
  .table--compact tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center}
  .table--compact td,.table--compact td.num{display:block;padding:0;text-align:left}
  .table--compact td::before{display:none}
  .table--compact td.cell-main{grid-column:1/-1;order:-1}
  .table--compact td.cell-opt{display:none}
  .table--compact td.cell-time{order:1;text-align:right;white-space:nowrap;font-size:14px;line-height:20px;color:var(--grey-a)}
}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center}
.filters a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--field);background:#fff;color:var(--ink);text-decoration:none;font:400 15px/20px var(--f-sans)}
.filters a[aria-current=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.filters search{margin-left:auto}
.filters form{display:flex;gap:8px}
.filters .input{min-height:44px;width:220px}
@media (max-width:639.98px){.filters search{margin-left:0;width:100%}.filters form{width:100%}.filters .input{flex:1 1 auto;width:auto}}

/* ---- empty state ---------------------------------------------------------------------------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:48px 24px;background:#fff;border-radius:20px;box-shadow:var(--shadow)}
.empty__ic{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--band);color:var(--ink);margin-bottom:8px}
.empty h2{font-size:20px}
.empty .btn-row{justify-content:center;margin-top:12px}

/* ---- drawer and dialog (server-driven: open when the page is rendered with them) ------------ */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(22,22,22,.42);display:flex}
.overlay--right{justify-content:flex-end}
.overlay--center{align-items:center;justify-content:center}
.overlay__scrim{position:absolute;inset:0;display:block}
.drawer{position:relative;background:#fff;width:min(480px,100%);height:100%;overflow:auto;box-sizing:border-box;padding:24px;box-shadow:-10px 0 46px -10px rgba(0,0,0,.28);overscroll-behavior:contain}
.dialog{position:relative;background:#fff;border-radius:20px;box-shadow:var(--shadow);width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:32px}
.dialog h2,.drawer h2{font:700 24px/32px var(--f-sans)}
.overlay__x{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%;background:var(--band);display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none}
.overlay__x:hover{background:#EDEDED}
.drawer__h{padding-right:48px;margin-bottom:16px}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.timeline li{display:flex;gap:12px;padding:10px 0 10px 4px;border-left:2px solid var(--line);margin-left:8px;position:relative;font-size:15px;line-height:22px}
.timeline li::before{content:"";position:absolute;left:-7px;top:16px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.timeline li.is-wait::before{border-color:var(--lime)}
.timeline li>div{padding-left:12px}
.timeline .t{display:block;color:var(--grey-a);font-size:13px;line-height:18px}
/* F24 (5), D-1519: an attempt's reason code opens its explanation (a <details>, no script). The whole line is the
   summary, so the tap target is the row; the code itself reads as a link. A row with a code puts its note under the
   row, so an opened explanation keeps the drawer's width on a phone. */
.timeline li>.rcode{padding-left:12px;min-width:0}
.timeline li:has(>.rcode){flex-wrap:wrap}
.timeline li:has(>.rcode)>div.small{flex-basis:100%}
.rcode>summary{display:block;list-style:none;cursor:pointer;min-height:44px;border-radius:5px}
.rcode>summary::-webkit-details-marker{display:none}
.rcode>summary:focus-visible{outline:2px solid var(--ink-d);outline-offset:2px}
.rcode__id{font-weight:700;color:var(--ink-d);text-decoration:underline;text-underline-offset:3px}@media (max-width:639.98px){
  .overlay--right{align-items:stretch}
  .drawer{width:100%;box-shadow:none}
  .overlay--center{align-items:flex-end}
  .dialog{width:100%;max-height:calc(100dvh - 24px);border-radius:20px 20px 0 0;padding:28px 20px 24px}
}

/* ---- stepper -------------------------------------------------------------------------------- */
.stepper{list-style:none;margin:0 0 28px;padding:0;display:flex;gap:8px;align-items:flex-start}
.stepper li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;font:400 14px/20px var(--f-sans);color:var(--grey-a)}
.stepper li::before{content:"";display:block;height:4px;border-radius:2px;background:var(--line)}
.stepper li.is-done::before{background:var(--ink)}
.stepper li.is-current::before{background:var(--lime)}
.stepper li.is-current{color:var(--ink-d);font-weight:700}
.stepper li.is-done{color:var(--ink)}
.stepper .n{display:inline-flex;gap:6px;align-items:center}
.stepper-line{display:none}
/* Phone: bars and numbers only. The labels stay readable to screen readers (clipped, not display:none)
   and the line under the bars gives the current step and the next one (D-1010). */
@media (max-width:639.98px){
  .stepper{margin-bottom:10px}
  .stepper li{position:relative}
  .stepper li .lab{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .app-main .stepper-line{display:block;margin:0 0 24px;font:400 15px/22px var(--f-sans);color:var(--ink)}
  .stepper-line strong{color:var(--ink-d)}
}.status-line{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--band);font-size:16px;line-height:24px}
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--field);border-top-color:var(--lime);border-radius:50%;animation:bp-spin .9s linear infinite;flex:none}
@keyframes bp-spin{to{transform:rotate(360deg)}}
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.check-list li{display:flex;gap:10px;align-items:flex-start}
.check-list svg{flex:none;margin-top:3px}
.check-list li>:last-child{flex:1;min-width:0}
.msg-preview{margin:0;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;max-width:420px}
.msg-preview .btn--fake{display:block;margin-top:10px;text-align:center;padding:10px;border-top:1px solid var(--line);color:var(--grey-a);font-weight:700;font-size:14px}
.steps-mini{counter-reset:s;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps-mini li{counter-increment:s;display:flex;gap:12px;align-items:flex-start}
.steps-mini li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font:700 14px/28px var(--f-sans);text-align:center}
.ok-ic{color:#14602B}

/* ---- workflows ------------------------------------------------------------------------------ */
.wf-steps{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:22px;color:var(--ink)}/* ---- admin ---------------------------------------------------------------------------------- */
.admin-tag{display:inline-flex;margin-left:8px;padding:2px 8px;border-radius:5px;background:var(--ink-d);color:#fff;font:700 11px/16px var(--f-sans);letter-spacing:.08em;text-transform:uppercase}
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.switch-row:last-child{border-bottom:0}
.switch-row>:first-child{min-width:0}
.switch-row .btn{white-space:nowrap;flex:none}

/* ---- footer --------------------------------------------------------------------------------- */
.app-footer{margin-top:auto;padding-top:40px}
.app-footer__row{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:center}
.app-footer__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.app-footer__links a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:639.98px){.app-footer{padding:28px 20px 20px}.bp-footer__in{width:auto}}

/* ---- start stepper helpers ------------------------------------------------------------------ */
/* A fieldset (plan cards, Verify channel radios): no browser border, margin or padding (D-1268). */
.choice-list{display:flex;flex-direction:column;gap:12px;border:0;margin:0;padding:0;min-width:0}
.sheet{max-width:760px}
/* U-122: a text button and a link side by side look alike: 16/24 regular, 44px tall, centred on one baseline. */
.btn-row--aligned{align-items:center}
.btn-row--aligned>a.link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font:400 16px/24px var(--f-sans)}
/* U-119: Google's light-theme sign-in button (brand guidelines): white, 1px #747775, #1F1F1F text, 40px, 18px "G". */
.gsi-btn{display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;width:100%;min-height:44px;padding:0 12px;border:1px solid #747775;border-radius:4px;background:#fff;color:#1f1f1f;font:500 14px/20px Roboto,Arial,sans-serif;text-decoration:none;cursor:pointer}
.gsi-btn:hover{background:#f8f9fa}
.gsi-btn:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.gsi-btn__g{flex:none}
/* U-124: the one pricing component (plan step, Change plan, breakpass.ai/pricing/). The plan step may be wider. */
.sheet.plan-form{max-width:1040px}
.pricing{display:flex;flex-direction:column;gap:20px}
.pricing__bar{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
.pricing__prefix{min-width:240px;max-width:100%}
.pricing__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.pricing-card{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.pricing-card__name{margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pricing-card__price{margin:0}
.pricing-card__btn{width:100%}
.pricing__channels{margin:0;color:var(--grey-a)}
.field__labrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.qhelp[open]{flex-basis:100%}
.qhelp{position:relative}.qhelp summary{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--grey);border-radius:50%;font:700 14px/1 var(--f-sans);color:var(--ink);cursor:pointer;list-style:none}.qhelp summary::-webkit-details-marker{display:none}
.qhelp[open] summary{background:var(--band)}.qhelp__text{margin:8px 0 0;max-width:320px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.pricing-card__bullets{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
@media (max-width:639.98px){.pricing__prefix{min-width:0;width:100%}.pricing-card{padding:20px}}
/* F23 (D-1507): the sign-in steps on desktop, a centred card at most 440 px wide; phones keep the full width. */
@media (min-width:900px){.auth-card{max-width:440px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:32px;box-sizing:border-box}}.sr-submit{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.sum-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.sum-row:last-of-type{border-bottom:0}
.sum-row .k{color:var(--grey-a)}
.diff{font:400 13px/20px var(--f-mono);color:var(--ink);word-break:break-word}
/* .app-main h2 sets margin:0, so the section spacing needs the same specificity (D-1005). */
.section-h,.app-main .section-h{margin:32px 0 12px}/* A21: the signed-in account above the Allow screen, and a long email that wraps on a phone. */
.email-wrap{overflow-wrap:anywhere}
/* Q-O-058 A1: an unverified app's consent page names the redirect host right under the heading, large and in dark ink. */
.app-main .consent-host{font:400 20px/28px var(--f-sans);color:var(--ink-d);overflow-wrap:anywhere}
.consent-host strong{font-weight:700}
.signed-in-as{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;overflow-wrap:anywhere}
.signed-in-as p{margin:0}/* A21 (5): "Continue as {email}": the address keeps its case and the label wraps as one line of text on a phone. */
.btn--email{padding:12px 28px;white-space:normal;text-align:left}
.btn--email .email-wrap{text-transform:none}
.rate__ends{display:flex;justify-content:space-between;gap:12px;margin:6px 0 0}
.agent-new{background:var(--band);outline:2px solid var(--green);outline-offset:-2px;border-radius:12px}
.states-guide{border-top:1px solid var(--line);padding-top:8px}
.states-guide>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:700 16px/24px var(--f-sans);color:var(--ink-d)}
.states-guide>summary:focus-visible{outline:2px solid var(--ink-d);outline-offset:2px}
.states-guide__body{display:flex;flex-direction:column;gap:20px;padding:8px 0 4px}
.states h4{margin:0 0 6px;font:700 15px/22px var(--f-sans);color:var(--ink-d)}
.states .tbl th[scope=row]{font-weight:700;white-space:nowrap;vertical-align:top}
.states .tbl td{vertical-align:top}
.states tr:target,.states tr[data-hl]{background:var(--band);outline:2px solid var(--ink-d);outline-offset:-2px}