/* F25 (PD-61, PD-66): the portal's sidebar shell and the components of rules N1 to N8
   (docs/design/portal-boards-spec.md Part 1 and §0). Loaded after app.css on every app page.
   The shell rules apply where the body has `app-body--side` (signed-in app pages; not /start, admin or signed-out pages).
   The component rules apply only inside `.p3` (a page's <main> opts in through the `p3` page option), so a page that
   has not moved yet keeps today's look. Each page keeps its own rules in its own section at the end. */

/* PD-66 (Delivery, 14 Oct evening): colours come only from the tokens in foundation.css; no literal hex here. Where N1 to N8
   name a colour without a token, the nearest token stands in: table header and chip grey --band, error --err, borders --line,
   fields --field, focus and the green marks --green. */

/* ---- shell (§0) ------------------------------------------------------------------------------ */
.app-body--side{background:var(--band)}
.app-frame{display:flex;align-items:stretch;min-height:100vh;min-height:100dvh}
/* The white panel runs the page's full height; its contents stay in view while the page scrolls. */
.app-side{flex:none;width:248px;box-sizing:border-box;background:var(--bg);border-right:1px solid var(--line)}
.app-side__in{position:sticky;top:0;display:flex;flex-direction:column;box-sizing:border-box;height:100vh;height:100dvh;overflow-y:auto;padding:24px 0}
.app-side__logo{display:block;align-self:flex-start;margin:0 24px;line-height:0}
.app-side__logo img{display:block;height:26px;width:auto}
.app-side__nav{display:flex;flex-direction:column;gap:2px;margin-top:32px}
.app-side__item{position:relative;display:flex;align-items:center;gap:12px;height:44px;margin-right:16px;padding:0 20px 0 24px;border-radius:0 10px 10px 0;color:var(--ink);text-decoration:none;font:400 15px/22px var(--f-sans)}
.app-side__item svg{flex:none;color:var(--grey-a)}
.app-side__item:hover{background:var(--band);color:var(--ink-d)}
.app-side__item[aria-current=page]{background:var(--band);color:var(--ink-d);font-weight:700}
.app-side__item[aria-current=page] svg{color:var(--ink)}
.app-side__item[aria-current=page]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--green)}
.app-side__item:focus-visible,.app-side__help:focus-visible,.app-side__acct>summary:focus-visible,.app-side__top:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.app-side__end{margin-top:auto;padding:24px 24px 0}
.app-side__bal{display:flex;flex-direction:column;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:12px}
.app-side__cap{font:700 12px/16px var(--f-sans);color:var(--grey-a);text-transform:uppercase;letter-spacing:.08em}
.app-side__amt{margin-top:4px;font:700 26px/32px var(--f-sans);color:var(--ink)}
.app-side__top{display:inline-flex;align-items:center;min-height:44px;margin:-4px 0 -12px;font:700 14px/20px var(--f-sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.app-side__help{display:flex;align-items:center;gap:12px;min-height:44px;margin:12px 0 0 -8px;padding:0 8px;border-radius:8px;color:var(--ink);text-decoration:none;font:400 15px/22px var(--f-sans)}
.app-side__help svg{color:var(--grey-a)}
.app-side__help:hover{background:var(--band);color:var(--ink-d)}
.app-side__acct{position:relative;margin:12px -8px 0}
.app-side__acct>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 8px;border-radius:8px;cursor:pointer}
.app-side__acct>summary::-webkit-details-marker{display:none}
.app-side__acct>summary:hover{background:var(--band)}
.app-side__av{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 13px/16px var(--f-sans)}
.app-side__who{display:flex;flex-direction:column;min-width:0}
.app-side__who b{font:700 14px/20px var(--f-sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-side__who span{font:400 13px/18px var(--f-sans);color:var(--grey-a);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-side__menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:60;padding:8px;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px -10px rgba(0,0,0,.28)}
.app-side__menu a,.app-side__menu button{display:flex;align-items:center;width:100%;min-height:44px;box-sizing:border-box;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--ink);text-align:left;text-decoration:none;font:400 15px/22px var(--f-sans);cursor:pointer}
.app-side__menu a:hover,.app-side__menu button:hover{background:var(--band);color:var(--ink-d)}
.app-side__menu form{margin:0}
.app-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.app-main.app-main--side{width:100%;max-width:1192px;margin:0;padding:40px 56px 24px;box-sizing:border-box}
.app-main--side.app-main--narrow{max-width:872px}
.app-main--side.app-main--wide{max-width:1352px}
/* §0.3: the page head row; every app page carries Feedback? at its right. */
.p3-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:28px}
.p3-head--bare{margin-bottom:12px}
.p3-head__t{min-width:0}
.app-main .p3-title{margin:0;font:700 30px/38px var(--f-sans);color:var(--ink-d)}
.p3-sub{margin:6px 0 0!important;font:400 16px/24px var(--f-sans);color:var(--grey-a)}
.p3-head__a{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-left:auto}
/* §0.4 plus the legal lines (62 §2.3, 71 10.1): a quiet footer in the main column. */
.app-foot{width:100%;max-width:1192px;box-sizing:border-box;margin-top:auto;padding:0 56px 32px;font:400 13px/18px var(--f-sans);color:var(--grey-a)}
.app-foot p{margin:0}
.app-foot p+p{margin-top:6px}
.app-foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.app-foot a:hover{color:var(--ink-d)}
.app-foot__links a{display:inline-block;padding:4px 0}
.app-hdr--m{display:none}
@media (max-width:899.98px){
  .app-frame{display:block}
  .app-side{display:none}
  .app-hdr--m{display:block}
  .app-hdr--m .app-menu{display:block}
  .app-main.app-main--side{padding:24px 16px 24px}
  .app-foot{padding:0 16px 24px}
  .p3-head{margin-bottom:20px}
  .app-main .p3-title{font-size:26px;line-height:34px}
  /* U-197: on a phone "Feedback?" sits on the title's line, top right; the page's own buttons go under the title. */
  .p3-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px 12px}
  .p3-head__a{display:contents}
  .p3-head .app-fb{grid-column:2;grid-row:1;margin-top:-5px}
  .p3-head__a>:not(.app-fb){grid-column:1/-1;grid-row:2}
  /* U-178: Balance, Plan and Numbers come last on the dashboard. */
  .p3 .home>.p3-grid--3{order:1}
}

/* ---- N1 to N8 components (scoped to .p3) ------------------------------------------------------ */
/* N2: page rhythm. 28 to the first card is the head's margin; 24 between cards and card rows. */
.p3 .p3-stack{display:flex;flex-direction:column;gap:24px}
.p3 .p3-grid{display:grid;gap:24px;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}
.p3 .p3-grid--3{--cols:3}
@media (max-width:899.98px){.p3 .p3-grid,.p3 .p3-grid--3{grid-template-columns:minmax(0,1fr)}}

/* N1: cards. */
.p3 .card{background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:none;padding:24px;box-sizing:border-box}
.p3 .card__t{margin:0 0 12px;font:700 18px/26px var(--f-sans);color:var(--ink-d)}
.p3 .card__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.p3 .card__h .card__t{margin:0}
.p3 .eyebrow{display:block;margin:0;font:700 12px/16px var(--f-sans);color:var(--grey-a);text-transform:uppercase;letter-spacing:.12em}
.p3 .stat{display:block;margin-top:6px;font:700 44px/50px var(--f-sans);color:var(--ink-d)}
.p3 .stat--md{font-size:28px;line-height:34px}
.p3 .hint{font:400 14px/20px var(--f-sans);color:var(--grey-a)}
.p3 .body{font:400 15px/22px var(--f-sans);color:var(--ink)}

/* N4: label/value rows. */
.p3 .lv{display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.p3 .lv__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0}
.p3 .lv__k{margin:0;font:400 15px/22px var(--f-sans);color:var(--ink)}
.p3 .lv__v{margin:0;font:700 15px/22px var(--f-sans);color:var(--ink-d);text-align:right;min-width:0}

/* N3: tables (always inside a card). */
.p3 .tbl-wrap{border:1px solid var(--line);border-radius:16px;overflow:hidden;overflow-x:auto}
.p3 .tbl{width:100%;border-collapse:collapse;font:400 15px/22px var(--f-sans);color:var(--ink)}
.p3 .tbl th{padding:12px 20px;background:var(--band);text-align:left;font:700 12px/16px var(--f-sans);color:var(--grey-a);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.p3 .tbl td{height:52px;padding:6px 20px;box-sizing:border-box;border-top:1px solid var(--line);vertical-align:middle}
.p3 .tbl .num{text-align:right;white-space:nowrap}
.p3 .tbl a{color:var(--ink-d);font-weight:700;text-decoration:none}
.p3 .tbl a:hover{text-decoration:underline;text-underline-offset:4px}

/* N5: buttons. 44 high; 36 only inside table and list rows; one lime primary per card. */
.p3 .btn{min-height:44px;padding:0 24px;border-radius:6px;font:700 15px/20px var(--f-sans);text-transform:none;letter-spacing:0;box-shadow:none;white-space:nowrap}
.p3 .btn:hover{background:var(--lime-h)}
.p3 .btn:active{background:var(--lime-p)}
.p3 .btn--secondary{background:var(--bg);color:var(--ink);border:1px solid var(--field);padding:0 23px}
.p3 .btn--secondary:hover{background:var(--band);border-color:var(--field)}
.p3 .btn--secondary:active{background:var(--band);border-color:var(--ink)}
.p3 .btn--small{min-height:44px;padding:0 18px;font-size:15px}
.p3 .btn--text{min-height:44px;padding:0;font:700 15px/22px var(--f-sans);color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.p3 .tbl .btn,.p3 .btn--row{min-height:36px;padding:0 14px;font-size:14px}
.p3 .btn--danger{background:var(--err);color:var(--bg)}
.btn--ghost{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:6px;background:transparent;color:var(--ink);font:700 15px/20px var(--f-sans);text-decoration:none;white-space:nowrap}
.btn--ghost:hover{background:var(--bg);color:var(--ink-d)}
.btn--ghost:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* N6: fields. */
.p3 .field{gap:6px}
.p3 .field__lab{font:700 14px/20px var(--f-sans);color:var(--ink)}
.p3 .input,.p3 .select{min-height:44px;padding:0 14px;border:1px solid var(--field);border-radius:6px;font:400 15px/22px var(--f-sans);color:var(--ink)}
.p3 .textarea{border:1px solid var(--field);border-radius:6px;font:400 15px/22px var(--f-sans)}
.p3 .input:focus,.p3 .select:focus,.p3 .textarea:focus{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}

/* N7: links. */
.p3 .lnk,.p3 a.link{font:700 15px/22px var(--f-sans);color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.p3 .lnk:hover,.p3 a.link:hover{color:var(--ink-d)}
.p3 .lnk--sm{font-size:14px}

/* N8: one grey chip, one error red, iOS-style switches. */
.p3 .chip{display:inline-flex;align-items:center;gap:5px;min-height:0;padding:3px 10px;border:0;border-radius:999px;cursor:default;background:var(--band);color:var(--grey-a);font:700 12px/18px var(--f-sans);white-space:nowrap}
.p3 .err,.p3 .field__err{color:var(--err)}
.switch{position:relative;display:inline-block;flex:none;width:51px;height:31px}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.switch__track{position:absolute;inset:0;border-radius:999px;background:var(--field);transition:background-color .2s}
.switch__track::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--bg);box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .2s}
.switch input:checked+.switch__track{background:var(--green)}
.switch input:checked+.switch__track::after{transform:translateX(20px)}
.switch input:focus-visible+.switch__track{outline:2px solid var(--green);outline-offset:2px}
.switch input:disabled{cursor:not-allowed}
.switch input:disabled+.switch__track{opacity:.45}

/* U-58: help behind "?" (a <details>, no script needed). */
.help-q{position:relative;display:inline-block;vertical-align:middle}
.help-q>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-12px -10px;border-radius:50%;color:var(--grey-a);cursor:pointer}
.help-q>summary::-webkit-details-marker{display:none}
.help-q>summary:hover{color:var(--ink-d)}
.help-q>summary:focus-visible{outline:2px solid var(--green);outline-offset:-8px}
.help-q__body{position:absolute;left:-12px;top:calc(100% + 14px);z-index:40;width:min(320px,calc(100vw - 32px));box-sizing:border-box;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 40px -10px rgba(0,0,0,.28);font:400 14px/20px var(--f-sans);color:var(--ink);text-align:left;white-space:normal}
.help-q__body p+p{margin-top:8px}
.help-more>summary{display:inline-flex;align-items:center;min-height:44px;font:700 15px/22px var(--f-sans);color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer;list-style:none}
.help-more>summary::-webkit-details-marker{display:none}
.help-more__body{margin-top:4px;font:400 14px/20px var(--f-sans);color:var(--ink)}
.help-more__body p+p{margin-top:8px}

/* ==== Home (F25 item 2) ==== */
/* Boards §1: three stat cards of equal height, each link pinned to the card's foot. */
.p3 .home-stat{display:flex;flex-direction:column;height:100%}
.p3 .home-stat .stat--md{margin-top:10px}
.p3 .home-lv{margin-top:12px}
.p3 .home-stat__end{margin:auto 0 0;padding-top:14px}
.p3 .home-hint{margin:8px 0 0;font-size:13px;line-height:18px}
.p3 .home-body{margin:8px 0 0}
.p3 .home-lab{display:inline-flex;align-items:center;gap:6px}
.p3 .home-lab .help-q__body{font-weight:400}
.p3 .home-lab .promo-line{margin:0}
.p3 .home-lab{white-space:nowrap}
.p3 .home-when{font-weight:400;font-size:13px;line-height:18px;white-space:nowrap}
/* Recent alerts: the time muted, the source on one line, the next-step hint beside the pill. */
.p3 .home-tbl .home-time{width:1%;white-space:nowrap;font-size:14px;line-height:20px;color:var(--grey-a)}
.p3 .home-tbl .home-src{max-width:0;width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p3 .home-tbl .home-agent{color:var(--ink)}
.p3 .home-tbl td[data-live-cell]{white-space:nowrap}
.p3 .home-note{font-size:13px;line-height:18px}
/* On a phone each alert is a small block: the message on top, then the status and the time. */
@media (max-width:639.98px){
  .p3 .home-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .p3 .home-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 16px;border-top:1px solid var(--line)}
  .p3 .home-tbl tbody tr:first-child{border-top:0}
  .p3 .home-tbl td{display:block;height:auto;padding:0;border-top:0}
  .p3 .home-tbl .home-opt{display:none}
  .p3 .home-tbl .home-src{order:-1;grid-column:1/-1;max-width:none;width:auto;white-space:normal}
  .p3 .home-tbl .home-agent{display:none}
  .p3 .home-tbl td[data-live-cell]{white-space:normal}
  .p3 .home-tbl .home-time{order:1;width:auto;text-align:right}
  .p3 .home-note{display:block;margin-top:2px}
}
/* Connected agents: one row per agent, a rule between rows (boards §4, §7). */
.p3 .home-agents{margin:0;padding:0;list-style:none}
.p3 .home-agents>li{padding:14px 0}
.p3 .home-agents>li:first-child{padding-top:2px}
.p3 .home-agents>li:last-child{padding-bottom:0}
.p3 .home-agents>li+li{border-top:1px solid var(--line)}
.p3 .home-agents .hint{margin:2px 0 0;font-size:13px;line-height:18px}
.p3 .home-empty__a{margin:12px 0 0}
/* The Next step box keeps its look; the stack sets the 24 px gap (N2). */
.p3 .home>.next-step{margin-bottom:0}
/* ==== end Home ==== */

/* ==== Billing (F25 item 3) ==== */
/* P3-App-Billing §2: Plan, Top up, Your balance, Balance history, Receipts, stacked; then the statement line. */
/* Plan card: the left block and the actions side by side (§2.4); stacked below 900 px. */
.p3 .bill-plan{display:flex;align-items:center;justify-content:space-between;gap:32px}
.p3 .bill-plan__l{min-width:0}
.p3 .bill-plan .stat{margin:6px 0 0}
.p3 .bill-plan__l>.body{margin:4px 0 0}
.p3 .bill-plan__l>.hint{margin:6px 0 0}
.p3 .bill-plan__a{display:flex;flex:none;align-items:center;gap:20px}
.p3 .bill-plan__a form{margin:0}
.p3 .bill-plan__a .lnk{display:inline-flex;align-items:center;gap:6px;min-height:44px}
@media (max-width:899.98px){
  .p3 .bill-plan{flex-direction:column;align-items:stretch;gap:16px}
  .p3 .bill-plan__a{flex-wrap:wrap;gap:8px 20px}
}
.p3 .bill-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.p3 .bill .card>.body{margin:0}

/* Top up: title, the line under it, "Prices for", the tiles, then the tax line and the button. */
.p3 .bill-top .card__t{margin-bottom:4px}
.p3 .bill-top>.hint{margin:0}
.p3 .bill-for{margin:16px 0 0}
.p3 .bill-for .field{display:flex;flex-direction:column;gap:6px;margin:0}
.p3 .bill-for__lab{display:inline-flex;align-items:center;gap:10px}
.p3 .bill-for__row{display:flex;flex-wrap:wrap;gap:12px}
.p3 .bill-for__sel{flex:0 1 440px;min-width:0;width:440px;max-width:100%;background-color:var(--bg)}
.p3 .bill-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;min-width:0;margin:16px 0 0;padding:0;border:0}
.p3 .bill-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:44px;padding:16px;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:var(--bg);cursor:pointer}
.p3 .bill-tile input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.p3 .bill-tile:has(input:checked){border:2px solid var(--ink);padding:15px}
.p3 .bill-tile:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.p3 .bill-tile__n{font:700 28px/34px var(--f-sans);color:var(--ink-d)}
.p3 .bill-tile__l{margin-top:2px;font:700 15px/22px var(--f-sans);color:var(--ink)}
.p3 .bill-tile__h{font:400 13px/18px var(--f-sans);color:var(--grey-a)}
.p3 .bill-tile__c{display:flex;min-height:24px;margin-top:8px}
.p3 .bill-pay{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:12px}
.p3 .bill-pay>.hint{margin:0}
/* The button names the chosen tile's amount (the packs are TOPUP_PACKS_CENTS in src/portal/plans.ts). */
.p3 .bill-top__form:has(input[value="1000"]:checked) .bill-pay__t::after{content:"\00a0$10"}
.p3 .bill-top__form:has(input[value="2500"]:checked) .bill-pay__t::after{content:"\00a0$25"}
.p3 .bill-top__form:has(input[value="5000"]:checked) .bill-pay__t::after{content:"\00a0$50"}
.p3 .bill-top__form:has(input[value="10000"]:checked) .bill-pay__t::after{content:"\00a0$100"}
@media (max-width:639.98px){
  .p3 .bill-for__sel{flex:1 1 100%;width:100%}
  .p3 .bill-for__row .btn{flex:1 1 100%}
  .p3 .bill-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .p3 .bill-tile{padding:12px}
  .p3 .bill-tile:has(input:checked){padding:11px}
  .p3 .bill-pay{flex-direction:column-reverse;align-items:stretch}
}

/* Your balance: N4 rows; the allowance with its bar and date; the total under a line. */
.p3 .bill-suf{font-weight:400;color:var(--grey-a)}
.p3 .bill-bar{display:block;width:100%;height:8px;margin:10px 0 0;border:0;border-radius:8px;background:var(--line);overflow:hidden;-webkit-appearance:none;appearance:none}
.p3 .bill-bar::-webkit-progress-bar{background:var(--line);border-radius:8px}
.p3 .bill-bar::-webkit-progress-value{background:var(--ink);border-radius:8px}
.p3 .bill-bar::-moz-progress-bar{background:var(--ink);border-radius:8px}
.p3 .bill-allow__d{margin:4px 0 0}
.p3 .bill-rows{margin-top:12px}
.p3 .bill-rows .lv__row:last-child{align-items:center;padding-top:8px;border-top:1px solid var(--line)}
.p3 .bill-avail{font-size:18px;line-height:26px}
.p3 .bill-bal .promo-line{margin:12px 0 0;font:400 14px/20px var(--f-sans);color:var(--ink)}

/* Balance history and Receipts: N3 tables in their cards; on phones each row is a small block. */
.p3 .bill-tbl .bill-tbl__d{font-size:14px;color:var(--grey-a);white-space:nowrap}
.p3 .bill-tbl td.num{color:var(--ink-d)}
.p3 .bill-tbl .bill-tbl__r{text-align:right;white-space:nowrap}
.p3 .bill-tbl a.lnk{display:inline-flex;align-items:center;gap:4px;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.p3 .bill-pager{display:flex;gap:24px;margin-top:12px}
.p3 .bill-pager .lnk{display:inline-flex;align-items:center;min-height:44px}
.p3 .bill-foot{margin:0}
@media (max-width:639.98px){
  .p3 .bill-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .p3 .bill-tbl,.p3 .bill-tbl tbody{display:block}
  .p3 .bill-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 16px;border-top:1px solid var(--line)}
  .p3 .bill-tbl tbody tr:first-child{border-top:0}
  .p3 .bill-tbl td{display:block;height:auto;padding:0;border:0}
  .p3 .bill-tbl .bill-tbl__d,.p3 .bill-tbl .bill-tbl__r{grid-column:1 / -1;text-align:left}
}
/* The plan dialog's two-line choice buttons keep their own size (app.css), not the 44 px N5 button. */
.p3 .bill .btn--opt{min-height:60px;padding:10px 18px;white-space:normal}
/* ==== end Billing ==== */

/* ==== Settings and Numbers (F25 item 4) ==== */

/* Settings (board §4, PD-62): Account and Account holder number side by side, Numbers, Notifications, a quiet Close
   account link at the very bottom. Numbers (board §9, PD-61): one card per person, 24 apart (N2). */
.p3 .set .card>*+*{margin-top:16px}
.p3 .set .card>.card__t+*{margin-top:0}
.p3 .set-top{align-items:start}
.p3 .set-name{display:flex;align-items:flex-start;gap:12px}
.p3 .set-name .field{flex:1 1 auto;min-width:0}
.p3 .set-name .field__err{margin-top:2px}
/* The Save button lines up with the input (under the 20 px label and its 6 px gap), whatever shows below the input. */
.p3 .set-name>.btn{margin-top:26px}
.p3 .set-holder{display:flex;flex-direction:column;gap:16px}
.p3 .set-holder .field__lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.p3 .set-sw__row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.p3 .set-sw__t{margin:0;min-width:0;font:700 15px/22px var(--f-sans);color:var(--ink-d)}
.p3 .set-sw noscript div{margin-top:12px}
.p3 .set-sw__always{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.p3 .set-close{margin:0}
.p3 .set-close__a{display:inline-flex;align-items:center;min-height:44px;font:400 14px/22px var(--f-sans);color:var(--grey-a);text-decoration:underline;text-underline-offset:4px}
.p3 .set-close__a:hover{color:var(--ink-d)}
.p3 .num-sec{display:flex;flex-direction:column;gap:16px;scroll-margin-top:24px}
.p3 .num-sec__h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.p3 .num-sec__ht{min-width:0}
.p3 .num-sec__t{display:flex;align-items:center;gap:6px;margin:0;font:700 22px/30px var(--f-sans);color:var(--ink-d)}
.p3 .num-sec__ht .hint{margin:4px 0 0}
.p3 .num-sec__foot{margin:0}
.p3 .num-sec>.p3-stack{margin-top:8px}
.p3 .num-card__top{display:flex;align-items:flex-start;gap:20px}
.p3 .num-av{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--band);color:var(--grey-a);font:700 18px/24px var(--f-sans)}
.p3 .num-av--own{background:var(--ink);color:var(--bg)}
.p3 .num-card__txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.p3 .num-card__txt>p{margin:0}
.p3 .num-card__name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.p3 .num-card__t{margin:0;font:700 18px/26px var(--f-sans);color:var(--ink-d)}
.p3 .num-card__num{font:400 15px/22px var(--f-sans);color:var(--ink-d)}
.p3 .num-card__num .mono{font-size:15px;line-height:22px}
.p3 .num-card>.body,.p3 .num-card>.hint{margin-top:16px}
.p3 .num-alias{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.p3 .num-alias__lab{font:400 14px/20px var(--f-sans);color:var(--grey-a)}
.p3 .num-alias .input{flex:0 1 260px;min-width:0;width:260px}
.p3 .num-card>.btn-row{margin-top:16px}
@media (max-width:899.98px){
  .p3 .set-name{flex-wrap:wrap}
  .p3 .num-card__top{gap:14px}
  .p3 .num-av{width:40px;height:40px;font-size:16px}
  .p3 .num-alias .input{flex:1 1 140px;width:auto}
}

/* ==== end Settings and Numbers ==== */

/* ==== Alerts (F25 items 5 and 6) ==== */

/* §8 and U-69: a toolbar (filter menu, Reload, search), then the N3 table in a card with Newer / Older under it. */
.p3 .alerts-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-bottom:20px}
.p3 .alerts-bar__l{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.p3 .alerts-tool{display:inline-flex;align-items:center;gap:8px;padding:0 16px;cursor:pointer}
.p3 .alerts-tool svg{flex:none;color:var(--ink)}
.p3 .alerts-filter{position:relative}
.p3 .alerts-filter>summary{list-style:none}
.p3 .alerts-filter>summary::-webkit-details-marker{display:none}
.p3 .alerts-filter[open]>summary{border-color:var(--ink);background:var(--band)}
.p3 .alerts-filter>summary:focus-visible,.p3 .alerts-tool:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.p3 .alerts-filter__n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--ink);color:var(--bg);font:700 12px/16px var(--f-sans)}
.p3 .alerts-filter__menu{position:absolute;left:0;top:calc(100% + 8px);z-index:40;width:260px;box-sizing:border-box;padding:16px 16px 12px;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px -10px rgba(0,0,0,.28)}
.p3 .alerts-filter__menu fieldset{margin:0;padding:0;border:0;min-width:0}
.p3 .alerts-filter__lg{margin:0 0 4px;padding:0;font:700 12px/16px var(--f-sans);color:var(--grey-a);text-transform:uppercase;letter-spacing:.08em}
.p3 .alerts-filter__opt{display:flex;align-items:center;gap:12px;min-height:44px;font:400 15px/22px var(--f-sans);color:var(--ink);cursor:pointer}
.p3 .alerts-filter__opt input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--green);cursor:pointer}
.p3 .alerts-filter__opt input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.p3 .alerts-filter__act{display:flex;align-items:center;gap:16px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.p3 .alerts-on{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 0 4px;padding:0;list-style:none}
.p3 .alerts-search form{display:flex;gap:8px}
.p3 .alerts-search .input{width:240px}
.p3 .alerts-card{padding:0;overflow:hidden}
.p3 .alerts-card .tbl-wrap{border:0;border-radius:0}
.p3 .alerts-tbl th:first-child,.p3 .alerts-tbl td:first-child{padding-left:20px}
.p3 .alerts-tbl td{padding-top:12px;padding-bottom:12px}
.p3 .alerts-tbl tbody tr:first-child td{border-top:1px solid var(--line)}
.p3 .alerts-tbl a.alerts-id{font:400 14px/22px var(--f-mono);color:var(--ink-d);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.p3 .alerts-tbl a.alerts-id:hover,.p3 .alerts-tbl a.alerts-id:focus-visible{text-decoration-color:currentColor}
.p3 .alerts-tbl .alerts-msg{display:block;max-width:300px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 14px/20px var(--f-sans);color:var(--ink)}
.p3 .alerts-tbl .cell-time{white-space:nowrap;font-size:14px;line-height:20px;color:var(--grey-a)}
/* The status cell: the pill and Cancel on one line, the next step and any reason codes under it. */
.p3 .alerts-st__in{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.p3 .alerts-st__in>.live-pill{display:inline-flex;order:0}
.p3 .alerts-st__in>.alerts-cancel{order:1}
.p3 .alerts-st__in>.alerts-note{order:2;flex-basis:100%;font:400 13px/18px var(--f-sans);color:var(--grey-a)}
.p3 .alerts-st__in>.attempt-codes{order:3;flex-basis:100%;font-size:13px;line-height:18px}
.p3 .alerts-cancel form{margin:0}
.p3 .alerts-tbl .btn--text{min-height:36px;padding:0;background:none;font:700 14px/22px var(--f-sans);color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.p3 .alerts-tbl .btn--text:hover,.p3 .alerts-tbl .btn--text:active{background:none;color:var(--ink-d)}
.p3 .alerts-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 20px;border-top:1px solid var(--line)}
.p3 .alerts-pager .hint{margin:0}
.p3 .alerts-pager__nav{display:flex;align-items:center;gap:12px}
.p3 .alerts-pager__at{font:700 14px/20px var(--f-sans);color:var(--ink);white-space:nowrap}
.p3 .alerts-pager .btn--secondary:hover{background:var(--band)}
.p3 .alerts-pager .is-off{opacity:.45;pointer-events:none}
.p3 .alerts .empty{box-shadow:none;border:1px solid var(--line);border-radius:16px}
.p3 .alerts-tbl td.cell-opt{white-space:nowrap}
/* The detail drawer (§8, N4): label/value rows, the message, the attempts, the charge in a grey band. */
.p3 .alerts .drawer{padding:28px 32px 32px}
.p3 .alerts .drawer__h{font:700 22px/30px var(--f-sans);color:var(--ink-d);margin-bottom:8px}
.p3 .alerts .drawer h3{margin:0 0 8px;font:700 16px/24px var(--f-sans);color:var(--ink-d)}
.p3 .alerts .drawer .kv{gap:8px;font:400 15px/22px var(--f-sans)}
.p3 .alerts .drawer .kv .k{color:var(--ink)}
.p3 .alerts .drawer .kv dd{font-weight:700;color:var(--ink-d)}
.p3 .alerts .drawer .msg-preview{max-width:none;font:400 15px/22px var(--f-sans);color:var(--ink)}
.p3 .alerts .drawer .status-why{font:400 15px/22px var(--f-sans);color:var(--ink)}
.p3 .alerts .drawer .timeline li{font-size:15px;line-height:22px;color:var(--ink)}
.p3 .alerts .alerts-total{margin:0;padding:14px 16px;border-radius:12px;background:var(--band);font:700 15px/22px var(--f-sans);color:var(--ink-d)}@media (max-width:639.98px){.p3 .alerts .drawer{padding:24px 16px}}
@media (max-width:719.98px){
  .p3 .alerts-tbl tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .p3 .alerts-tbl tbody tr:last-child{border-bottom:0}
  .p3 .alerts-tbl td,.p3 .alerts-tbl td:first-child,.p3 .alerts-tbl tbody tr:first-child td{height:auto;padding:0;border-top:0}
  .p3 .alerts-tbl .alerts-msg{max-width:none;white-space:normal}
  .p3 .alerts-pager{padding:12px 16px}
}
@media (max-width:639.98px){
  .p3 .alerts-search,.p3 .alerts-search form{width:100%}
  .p3 .alerts-search .input{flex:1 1 auto;width:auto;min-width:0}
}

/* ==== end Alerts ==== */
/* U-160: a Save that waits for a change is grey (the disabled button); once the field changes it is the app's primary button, brand lime with ink text (Orchestrator ruling, Q-F-004). */
@media (min-width:900px){.p3 .set-top{align-items:stretch}}
/* U-154: the statement page. The filter sits in a row; printing leaves only the table. */
.p3 .stmt-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
@media print{
  .app-hdr,.app-side,.app-foot,.p3-head__a,.stmt-noprint{display:none!important}
  .app-main,.app-main--side{margin:0!important;padding:0!important;max-width:none!important}
  .p3 .card{border:0;box-shadow:none;padding:0}
  .p3 .tbl tr{break-inside:avoid}
}
/* F25-Chips (N1 to N8): a chip directly on the page grey would show no box, so this variant gets one. */
.p3 .chip--box{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
/* PD-91 (U-181): the Time zone card's forms. */
.p3 .set-tz{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.p3 .set-tz .btn{align-self:flex-start}