/*
  portal.css - shared look for updates.adhduk.co.uk (outside users: providers, ambassadors, Directory practitioners)
  16 Oct 2026 (Henry): approved redesign, round 3 boards (Main, NewSignin, NewSigninSteps, NewProvHome, NewProvPhone).
  Every class starts with "pt-" so this file can sit beside the older page styles while pages move over one by one.
  Base typography only applies inside <body class="pt">.
  Contents:
    1. Tokens          2. Base             3. Top bar           4. Left menu and phone menu
    5. Header card     6. Cards            7. Buttons           8. Word tags
    9. Waiting box, cancel confirm, cancelled   10. Send bar, send block, receipt
   11. Notices and errors                   12. Form fields     13. "On this page" list
   14. Drafts          15. Sign-in pieces   16. Phone layout    17. Reduced motion
*/

/* 1. Tokens */
:root{
  --pt-purple:#651077;
  --pt-purple-dark:#4d0c5a;
  --pt-purple-deep:#3d0848;
  --pt-lilac:#f4eef6;
  --pt-lilac-2:#f1e6f4;
  --pt-page:#f7f3f8;
  --pt-white:#ffffff;
  --pt-line:#e5d7e8;
  --pt-line-soft:#efe7f1;
  --pt-line-strong:#b9a3c0;
  --pt-input-border:#8d7496;
  --pt-ink:#2b2530;
  --pt-ink-2:#4a4450;
  --pt-muted:#6e6577;
  --pt-group:#6b4a76;
  --pt-caption:#7d5a88;
  /* gold = waiting for ADHD UK, never "needs you" */
  --pt-gold:#C8860D;
  --pt-gold-bg:#fdf3e0;
  --pt-gold-line:#ecd3a3;
  --pt-gold-ink:#5c3d05;
  --pt-gold-tag:#7a5208;
  /* green = on the website now, and receipts */
  --pt-green-bg:#e8f2ec;
  --pt-green-line:#b9d9c5;
  --pt-green-ink:#1d5636;
  /* red = errors */
  --pt-red:#8c1d18;
  --pt-red-bg:#fbe9e7;
  --pt-red-line:#efc2bc;
  --pt-red-ink:#5e1410;
  /* grey = draft on this device, cancelled */
  --pt-grey-bg:#efedf0;
  --pt-grey-line:#d9d4dc;
  --pt-focus:#651077;
  --pt-radius:16px;
  --pt-radius-sm:10px;
  --pt-target:44px;
  --pt-shadow:0 2px 10px rgba(61,8,72,.06);
  --pt-font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* 2. Base */
body.pt{margin:0;font-family:var(--pt-font);background:var(--pt-page);color:var(--pt-ink);font-size:15px;line-height:1.55;-webkit-text-size-adjust:100%}
.pt *,.pt *::before,.pt *::after{box-sizing:border-box}
/* :where() keeps these base rules at zero specificity so every pt- component class wins over them */
:where(.pt) :where(a){color:var(--pt-purple)}
:where(.pt) :where(a:hover){color:var(--pt-purple-dark)}
:where(.pt) :where(h1,h2,h3){margin:0;line-height:1.25}
:where(.pt) :where(p){margin:0}
:where(.pt) :where(button,input,select,textarea){font:inherit}
:where(.pt) :where(.pt-stack,.pt-signin-card,.pt-card,.pt-alert,.pt-notice) > :where(div:empty){display:none}
.pt :focus-visible{outline:3px solid var(--pt-focus);outline-offset:2px}
.pt .pt-on-dark :focus-visible,.pt .pt-head :focus-visible{--pt-focus:#ffffff;outline-color:#ffffff}
.pt-hidden,.pt [hidden]{display:none !important}
.pt-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pt-stack{display:flex;flex-direction:column;gap:14px}
.pt-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pt-muted{color:var(--pt-muted);font-size:14px}
.pt-small{font-size:14px;color:var(--pt-ink-2)}
.pt-skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--pt-white);padding:10px 16px;border-radius:8px;font-weight:600}
.pt-skip:focus{top:8px}

/* 3. Top bar: logo, area pills, provider or listing selector, name, Sign out */
.pt-top{background:var(--pt-white);border-bottom:1px solid var(--pt-line);padding:10px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.pt-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.pt-logo{width:38px;height:38px;flex:none;border-radius:9px;background:var(--pt-purple);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;line-height:1.1;text-align:center}
.pt-brand-text{display:flex;flex-direction:column;line-height:1.2}
.pt-brand-text b{font-weight:700;font-size:16px;color:var(--pt-purple)}
.pt-brand-text span{font-size:12px;color:var(--pt-muted)}
.pt-areas{display:flex;flex-wrap:wrap;gap:6px}
.pt-pill{min-height:var(--pt-target);display:inline-flex;align-items:center;padding:4px 16px;border-radius:999px;background:var(--pt-lilac);color:var(--pt-purple-deep);font-weight:600;font-size:14px;text-decoration:none}
.pt-pill:hover{background:#ebe0ef;color:var(--pt-purple-deep)}
.pt-pill[aria-current="page"]{background:var(--pt-purple);color:#fff}
.pt-areas{align-items:center}
.pt-areas-choose{font-size:13px;font-weight:600;min-height:var(--pt-target);display:inline-flex;align-items:center;padding:0 6px;text-underline-offset:3px}
.pt-nav-areas{display:flex;flex-direction:column}
.pt-org{display:flex;align-items:center;gap:8px}
.pt-org label{font-size:14px;font-weight:600}
.pt-org select{font-size:14px;font-weight:600;min-height:var(--pt-target);padding:6px 12px;border:1px solid var(--pt-input-border);border-radius:8px;background:#fff;color:var(--pt-purple-deep);max-width:100%}
.pt-me{margin-left:auto;display:flex;align-items:center;gap:12px}
.pt-me-name{display:flex;flex-direction:column;line-height:1.2;text-align:right}
.pt-me-name b{font-weight:600;font-size:14px}
.pt-me-name span{font-size:13px;color:var(--pt-muted)}
.pt-top-link{margin-left:auto;font-size:14px;font-weight:600;min-height:var(--pt-target);display:inline-flex;align-items:center}
.pt-menu-btn{display:none}

/* 4. Left menu with groups and word tags */
.pt-shell{display:flex;align-items:stretch;min-height:calc(100vh - 66px)}
.pt-nav{flex:0 0 256px;background:var(--pt-white);border-right:1px solid var(--pt-line);padding:18px 12px;display:flex;flex-direction:column;gap:3px}
.pt-nav a{min-height:var(--pt-target);display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;color:var(--pt-ink);text-decoration:none;font-weight:500}
.pt-nav a:hover{background:var(--pt-lilac);color:var(--pt-ink)}
.pt-nav a[aria-current="page"]{background:var(--pt-purple);color:#fff;font-weight:600}
.pt-nav a .pt-tag{margin-left:auto}
.pt-nav-group{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pt-group);padding:14px 12px 2px}
.pt-nav-sub{display:flex;flex-direction:column;gap:2px;margin-left:20px;border-left:2px solid var(--pt-line)}
.pt-nav-sub-h{font-size:13px;font-weight:600;color:var(--pt-group);padding:8px 12px 0 26px}
.pt-nav .pt-nav-sub a{min-height:40px;padding:4px 12px;color:var(--pt-ink-2);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.pt-nav-here{display:none;font-size:13px;font-weight:500;margin-left:auto}
.pt-nav-foot{margin-top:auto;padding:18px 12px 4px;font-size:14px;color:#5f5868}
.pt-nav .pt-nav-foot a{display:inline;min-height:0;padding:0;border-radius:0;color:var(--pt-purple);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pt-nav .pt-nav-foot a:hover{background:transparent}
.pt-nav-phone{display:none}
.pt-main{flex:999 1 560px;min-width:0;max-width:1180px;padding:22px 26px 40px;display:flex;flex-direction:column;gap:16px}

/* 5. Compact purple header card, with an optional small status panel */
.pt-head{background:var(--pt-purple);color:#fff;border-radius:var(--pt-radius);padding:16px 22px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between}
.pt-head-text{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:2px}
.pt-head-kicker{font-size:13px;font-weight:600;color:var(--pt-lilac-2)}
.pt-head h1{font-size:28px;line-height:1.2;font-weight:700;color:#fff}
.pt-head p{max-width:620px}
.pt-head a{color:#fff;font-weight:600}
.pt-head-panel{flex:0 1 auto;background:var(--pt-lilac);color:var(--pt-ink);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.pt-head-panel a{color:var(--pt-purple);min-height:32px;display:inline-flex;align-items:center}
.pt-head-panel :focus-visible{outline-color:var(--pt-purple)}

/* 6. White cards */
.pt-card{background:var(--pt-white);border:1px solid var(--pt-line);border-radius:var(--pt-radius);padding:16px 22px;display:flex;flex-direction:column;gap:12px}
.pt-card > h2{font-size:21px;color:var(--pt-purple)}
.pt-card h3{font-size:17px;color:var(--pt-purple-deep)}
.pt-card-row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:12px 0;border-top:1px solid var(--pt-line-soft)}
.pt-kicker{font-size:14px;font-weight:600;color:var(--pt-purple)}

/* 7. Buttons: primary, secondary, link-style. All at least 44px tall. */
.pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--pt-target);padding:8px 20px;border-radius:8px;border:1px solid var(--pt-purple);background:#fff;color:var(--pt-purple);font-size:15px;font-weight:600;line-height:1.3;text-decoration:none;cursor:pointer;text-align:center}
.pt-btn:hover{background:var(--pt-lilac);color:var(--pt-purple-dark)}
.pt-btn--primary{background:var(--pt-purple);color:#fff;border-color:var(--pt-purple)}
.pt-btn--primary:hover{background:var(--pt-purple-dark);border-color:var(--pt-purple-dark);color:#fff}
.pt-btn--quiet{border-color:var(--pt-input-border);color:var(--pt-ink)}
.pt-btn--danger{border-color:var(--pt-red);color:var(--pt-red)}
.pt-btn--danger:hover{background:var(--pt-red-bg);color:var(--pt-red)}
.pt-btn--link{border:0;background:transparent;padding:8px 12px;color:var(--pt-purple);text-decoration:underline;text-underline-offset:3px}
.pt-btn--link:hover{background:transparent;color:var(--pt-purple-dark)}
.pt-btn--big{min-height:48px;font-size:16px}
.pt-btn--block{display:flex;width:100%}
.pt-btn:disabled,.pt-btn[aria-disabled="true"]{opacity:.55;cursor:default}
.pt-link{font-size:15px;font-weight:600;min-height:var(--pt-target);display:inline-flex;align-items:center;text-underline-offset:3px}
.pt-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* 8. Word tags: the five states plus action and waiting counts. Words, never colour alone. Not clickable. */
.pt-tag{display:inline-block;align-self:flex-start;font-size:13px;font-weight:600;line-height:1.4;border-radius:999px;padding:2px 10px;white-space:nowrap;border:1px solid transparent}
.pt-tag--live{background:var(--pt-green-bg);color:var(--pt-green-ink)}
.pt-tag--changed{background:var(--pt-lilac);color:var(--pt-purple-deep)}
.pt-tag--draft{background:var(--pt-grey-bg);color:var(--pt-ink-2)}
.pt-tag--waiting{background:var(--pt-gold-bg);color:var(--pt-gold-tag);border-color:var(--pt-gold-line)}
.pt-tag--reviewed{background:#fff;color:var(--pt-ink);border-color:var(--pt-input-border)}
.pt-tag--act{background:var(--pt-purple);color:#fff}
.pt-tag--act-soft{background:var(--pt-lilac);color:var(--pt-purple-deep);border-color:#b598bd}
.pt-tag--bad{background:var(--pt-red-bg);color:var(--pt-red)}
.pt-tag--on-gold{background:#fff;color:#6b4706}

/* 9. Gold waiting box, cancel confirm, cancelled */
.pt-wait{background:var(--pt-gold-bg);border:1px solid var(--pt-gold-line);border-radius:14px;padding:14px 18px;display:flex;flex-direction:column;gap:10px;color:var(--pt-gold-ink)}
.pt-wait a{color:var(--pt-gold-ink)}
.pt-wait-text{display:flex;flex-direction:column;gap:2px}
.pt-wait-title{font-weight:600;font-size:16px}
.pt-wait-text span,.pt-wait-text li{font-size:14px}
.pt-wait ul{margin:2px 0;padding-left:20px}
.pt-wait-actions{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center}
.pt-wait-view{min-height:var(--pt-target);display:inline-flex;align-items:center;padding:6px 16px;border-radius:8px;background:#fff;color:var(--pt-gold-ink);font-weight:600;text-decoration:none;border:1px solid var(--pt-gold-line)}
.pt-wait-cancel{font-weight:600;min-height:var(--pt-target);padding:6px 4px;border:0;background:transparent;color:var(--pt-gold-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pt-wait-scope{font-size:14px}
.pt-wait :focus-visible{outline-color:var(--pt-gold-ink)}
.pt-confirm{background:#fff;border:2px solid var(--pt-purple);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;color:var(--pt-ink)}
.pt-confirm h3{font-size:18px;color:var(--pt-purple-deep)}
.pt-confirm p,.pt-confirm li{font-size:14px}
.pt-confirm ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:2px}
.pt-cancelled{background:var(--pt-grey-bg);border:1px solid var(--pt-grey-line);border-radius:14px;padding:14px 18px;display:flex;flex-direction:column;gap:2px;color:var(--pt-ink)}
.pt-cancelled b{font-weight:600}
.pt-cancelled span{font-size:14px}

/* 10. Send bar (stays on screen, two-line pattern), send block (normal page flow), receipt */
/* 17 Oct 2026 (F4, DIR-01, RTC-05): fixed to the bottom of the screen (it used to be sticky inside a wrapper of its own
   height, so it never stuck). portal.js lines it up with the main column and turns the wrapper into a spacer as tall as
   the bar, so the last field can always scroll clear of it. Safe areas (phones with a home bar) are respected. */
.pt-sendbar{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom, 0px));z-index:30;max-width:1180px;max-height:calc(100vh - 80px);overflow:auto;background:var(--pt-purple-deep);color:#fff;border-radius:14px;padding:12px 18px;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;box-shadow:0 6px 18px rgba(61,8,72,.25)}
.pt-sendbar--fixed{position:fixed;left:16px;right:16px;bottom:14px;max-width:1180px;margin:0 auto}
.pt-sendbar-host{flex:none}
.pt-sendbar :focus-visible{outline-color:#fff}
.pt-sendbar-text{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:2px}
.pt-sendbar-title{font-weight:600}
.pt-sendbar-detail{font-size:14px;color:#f1e8f3}
.pt-sendbar-draft{font-size:13.5px;color:#d9c8de}
.pt-sendbar-actions{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.pt-sendbar a,.pt-sendbar .pt-btn--link{color:#fff;font-size:15px;font-weight:600}
.pt-sendbar-view{min-height:var(--pt-target);display:inline-flex;align-items:center;padding:6px 8px}
.pt-sendbar .pt-btn--send{background:#fff;color:var(--pt-purple);border-color:#fff;padding:8px 22px}
.pt-sendbar .pt-btn--send:hover{background:var(--pt-lilac)}
.pt-sendbar-list{flex-basis:100%;margin:0;padding:8px 0 0 20px;border-top:1px solid rgba(255,255,255,.25);font-size:14px;color:#f1e8f3}
.pt-sendbar-confirm{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding-top:8px;border-top:1px solid rgba(255,255,255,.25)}
.pt-sendbar-confirm .pt-btn{border-color:#fff}
.pt-sendbar-confirm .pt-actions{gap:6px 12px}
.pt-sendbar .pt-btn:disabled{opacity:.6}
/* 17 Oct 2026: "Discard unsent changes?" opens next to the button that was pressed (send block or the page's own button) */
.pt-discard-confirm{flex-basis:100%;background:#fff;border:2px solid var(--pt-purple);border-radius:12px;padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;color:var(--pt-ink);font-size:15px;margin-top:4px}
.pt-discard-confirm b{font-weight:600;color:var(--pt-purple-deep)}
.pt-sendblock{border-top:2px solid var(--pt-line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.pt-receipt{background:var(--pt-green-bg);border:1px solid var(--pt-green-line);border-radius:14px;padding:14px 18px;display:flex;flex-direction:column;gap:6px;color:var(--pt-green-ink)}
.pt-receipt b{font-weight:600}
.pt-receipt-title{font-size:16px}
.pt-receipt span,.pt-receipt li{font-size:14.5px}
.pt-receipt a.pt-btn{align-self:flex-start;color:var(--pt-green-ink);border-color:var(--pt-green-line);background:#fff}
.pt-receipt :focus-visible{outline-color:var(--pt-green-ink)}
.pt-saved{display:block;background:var(--pt-green-bg);border:1px solid var(--pt-green-line);border-radius:10px;padding:8px 14px;color:var(--pt-green-ink);font-size:14px}

/* 11. Error and notice boxes */
.pt-alert{background:var(--pt-red-bg);border:1px solid var(--pt-red-line);border-left:5px solid var(--pt-red);border-radius:10px;padding:10px 14px;color:var(--pt-red-ink);font-size:15px}
.pt-alert > * + *,.pt-notice > * + *{margin-top:8px}
.pt-alert > span,.pt-notice > span{display:block}
.pt-alert a{color:var(--pt-red-ink)}
.pt-alert b{font-weight:600}
.pt-alert :focus-visible{outline-color:var(--pt-red)}
.pt-notice{background:var(--pt-lilac);border:1px solid var(--pt-line);border-radius:10px;padding:10px 14px;color:var(--pt-purple-deep);font-size:14px}
.pt-notice--strong{background:#fff;border:2px solid var(--pt-purple);color:var(--pt-ink);font-size:15px}
.pt-okbox{background:var(--pt-green-bg);border:1px solid var(--pt-green-line);border-radius:10px;padding:10px 14px;color:var(--pt-green-ink);font-size:15px}
.pt-okbox b{font-weight:600}

/* 12. Form fields: label, help under the label (never a hover "?"), field, three-value line */
.pt-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pt-label,.pt-field > label{font-weight:600;font-size:15px}
.pt-help{font-size:14px;color:var(--pt-ink-2);line-height:1.45}
.pt-input,.pt-field input[type=text],.pt-field input[type=email],.pt-field input[type=password],.pt-field input[type=number],.pt-field input[type=tel],.pt-field input[type=url],.pt-field select,.pt-field textarea{font-size:16px;min-height:48px;width:100%;padding:10px 14px;border:1px solid var(--pt-input-border);border-radius:10px;background:#fff;color:var(--pt-ink)}
.pt-field textarea{min-height:110px;line-height:1.5}
.pt-field--changed input,.pt-field--changed select,.pt-field--changed textarea{border:2px solid var(--pt-purple)}
.pt-field-line{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.pt-field-err{font-size:15px;font-weight:600;color:var(--pt-red);border-left:4px solid var(--pt-red);padding-left:10px}
/* 18 Oct 2026 (Henry, decision 1): the 10,000 character counter under a text box (Portal.limitText) */
.pt-count{font-size:14px;color:var(--pt-ink-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pt-count--over{color:var(--pt-red);font-weight:600;border-left:4px solid var(--pt-red);padding-left:10px}
.pt [aria-invalid="true"]{border:2px solid var(--pt-red) !important}
.pt [aria-invalid="true"]:focus-visible{outline-color:var(--pt-red)}
.pt-values{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px}
.pt-values b{font-weight:600}
.pt-check{display:flex;align-items:center;gap:10px;min-height:var(--pt-target);font-size:15px;cursor:pointer}
.pt-check input{width:20px;height:20px;flex:none;accent-color:var(--pt-purple);margin:0}

/* 13. "On this page" list of sections */
.pt-toc{display:flex;flex-direction:column;gap:6px}
.pt-toc-h{font-size:14px;font-weight:600;color:var(--pt-ink-2)}
.pt-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pt-toc a{min-height:var(--pt-target);display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 10px;border-left:3px solid var(--pt-line);color:var(--pt-purple-deep);font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:3px;line-height:1.35}
.pt-toc a[aria-current="true"],.pt-toc a[aria-current="location"]{border-left-color:var(--pt-purple);font-weight:600}
.pt-toc--sticky{position:sticky;top:16px}

/* 14. Drafts on this device */
.pt-drafthint{background:var(--pt-lilac);border-radius:10px;padding:10px 14px;display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--pt-purple-deep)}
.pt-drafthint svg{flex:none;margin-top:2px}
.pt-draftfound{background:#fff;border:2px solid var(--pt-purple);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:8px}

/* 15. Sign-in pieces */
.pt-signin{width:100%;max-width:960px;margin:0 auto;padding:48px 24px 56px;display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;justify-content:center}
.pt-signin-card{flex:0 1 470px;min-width:0;background:#fff;border:1px solid var(--pt-line);border-radius:var(--pt-radius);padding:30px 30px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--pt-shadow)}
.pt-signin-card--wide{flex-basis:640px}
.pt-signin-card h1{font-size:28px;color:var(--pt-purple);text-wrap:balance}
.pt-signin-card .pt-lead{color:var(--pt-ink-2);font-size:16px}
.pt-signin-aside{flex:0 1 330px;min-width:0;padding-top:8px;display:flex;flex-direction:column;gap:10px;color:var(--pt-ink-2)}
.pt-signin-aside h2{font-size:18px;color:var(--pt-purple-deep)}
.pt-signin-aside ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.pt-signin-aside li b{font-weight:600;color:var(--pt-ink)}
.pt-or{display:flex;align-items:center;gap:10px;color:var(--pt-muted);font-size:14px}
.pt-or::before,.pt-or::after{content:"";flex:1;height:1px;background:var(--pt-line)}
.pt-signin-help{border-top:1px solid var(--pt-line-soft);padding-top:12px;font-size:14px;color:var(--pt-ink-2)}
.pt-icon-circle{width:48px;height:48px;border-radius:999px;background:var(--pt-lilac);display:flex;align-items:center;justify-content:center}
.pt-code{font-size:26px !important;letter-spacing:.4em;font-weight:600;min-height:60px !important;padding:8px 16px !important;border-width:2px !important;width:260px !important;max-width:100%}
.pt-choice{text-decoration:none;color:var(--pt-ink);min-height:72px;border:2px solid var(--pt-line-strong);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;align-content:center;background:#fff;cursor:pointer}
.pt-choice:hover{border-color:var(--pt-purple);background:#fcfafd;color:var(--pt-ink)}
.pt-choice b{font-weight:600;font-size:16px;color:var(--pt-purple)}
.pt-choice span{font-size:14px;color:var(--pt-ink-2)}
.pt-choice .pt-choice-arrow{grid-row:span 2;color:var(--pt-purple);font-size:26px;line-height:1}

/* 16. Phone layout (760px and under): the left menu becomes a "Menu" button; the provider or listing selector stays outside the menu */
@media (max-width:760px){
  .pt-top{padding:8px 16px;gap:8px 10px}
  .pt-logo{width:36px;height:36px;font-size:8.5px}
  .pt-brand-text span{display:none}
  .pt-top .pt-areas,.pt-top .pt-me{display:none}
  .pt-menu-btn{display:inline-flex;margin-left:auto;font-size:14px;font-weight:600;min-height:var(--pt-target);padding:6px 12px;border-radius:8px;border:1px solid #8f7898;background:#fff;color:var(--pt-purple);align-items:center;gap:8px;cursor:pointer}
  .pt-menu-btn[aria-expanded="true"]{border:2px solid var(--pt-purple);background:var(--pt-lilac)}
  .pt-top .pt-org{order:10;flex:1 1 100%;margin:0 -16px -8px;padding:6px 16px 8px;border-top:1px solid var(--pt-line);gap:10px}
  .pt-top .pt-org select{flex:1 1 160px;min-width:0;font-size:15px}
  /* 17 Oct 2026 (wave 4 S3, zoom 400%): at 320px the listing picker wraps under its label instead of pushing the page sideways */
  .pt-top .pt-org{flex-wrap:wrap;min-width:0}
  .pt-top-link{font-size:14px}
  .pt-shell{display:block;position:relative;min-height:0}
  .pt-nav{display:none;position:absolute;left:0;right:0;top:0;z-index:50;border-right:0;padding:6px 14px 10px;gap:0;box-shadow:0 6px 12px rgba(61,8,72,.12)}
  .pt-shell.pt-menu-open .pt-nav{display:flex}
  .pt-shell.pt-menu-open::after{content:"";position:absolute;inset:0;background:rgba(43,37,48,.35);z-index:40}
  .pt-nav a{padding:0 10px}
  .pt-nav a[aria-current="page"]{justify-content:space-between}
  .pt-nav a[aria-current="page"] .pt-nav-here{display:inline}
  .pt-nav-group{font-size:13px;letter-spacing:0;text-transform:none;padding:10px 10px 2px}
  .pt-nav-foot{display:none}
  .pt-nav-phone{display:flex;flex-direction:column;border-top:1px solid var(--pt-line-soft);margin-top:6px;padding:8px 10px 0}
  .pt-nav-phone a{padding:0}
  .pt-main{padding:12px 16px 24px;gap:12px}
  .pt-head{border-radius:14px;padding:12px 16px}
  .pt-head h1{font-size:24px}
  .pt-head-panel{flex:1 1 100%}
  .pt-card{padding:14px 16px;border-radius:14px}
  .pt-card > h2{font-size:19px}
  /* 17 Oct 2026: on phones the bar keeps to the count, "View changes" and "Send for review" */
  .pt-sendbar{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom, 0px));padding:8px 12px;gap:6px 10px}
  .pt-sendbar--fixed{left:8px;right:8px}
  .pt-sendbar-text{flex:1 1 100%}
  .pt-sendbar-detail,.pt-sendbar-draft,.pt-sendbar-org,.pt-sendbar .pt-sendbar-discard{display:none}
  .pt-sendbar-actions{width:100%;flex-wrap:nowrap;gap:8px}
  .pt-sendbar-view{flex:0 0 auto;padding:6px 4px}
  .pt-sendbar .pt-btn--send{flex:1 1 auto;padding:8px 14px}
  .pt-areas-choose{display:none}
  .pt-nav-areas a{min-height:var(--pt-target);display:flex;align-items:center}
  .pt-signin{padding:20px 16px 40px;gap:28px}
  .pt-signin-card{padding:22px 18px 18px;flex-basis:100%}
  .pt-signin-card h1{font-size:24px}
  .pt-signin-aside{flex-basis:100%;padding-top:0}
  .pt-toc--sticky{position:static}
}

/* 17 Oct 2026: phones with the on-screen keyboard open: the bar steps aside so it never covers the field being typed in */
@media (max-width:760px){
  .pt-kb-open .pt-sendbar:not(:has(.pt-sendbar-confirm)){display:none}
}

/* 17. Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .pt *,.pt *::before,.pt *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}
@media (prefers-reduced-motion:no-preference){
  .pt .pt-btn,.pt .pt-pill,.pt .pt-choice,.pt .pt-nav a{transition:background-color .15s,border-color .15s,color .15s}
  html:has(body.pt){scroll-behavior:smooth}
}

/* 16 Oct 2026: one place to send from. While a form's own "Send your changes" block is on screen, the fixed bar
   steps aside (portal.js oneSendArea). It stays if its "Discard unsent changes?" question is open. */
.pt-inline-send-in-view .pt-sendbar:not(:has(.pt-sendbar-confirm)){visibility:hidden;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){ .pt-sendbar{transition:opacity .15s,visibility .15s} }