/* The signed-in app shell. A real stylesheet, linked in the head of every app page, because it used to be a string injected by auth-guard.js — and auth-guard is a module, so it is deferred. The browser painted the raw unstyled markup first and the layout snapped in afterwards. That flash is what "broken html view" looks like. The body starts hidden and is revealed by auth-guard once the shell is built, so nobody sees the page mid-assembly. Every app page carries a short inline fallback that reveals it anyway if the script never runs — content you cannot see is a worse failure than content that is briefly ugly. */ :root{color-scheme:light;--ink:#141719;--muted:#5f6b76;--line:#e2e6ea;--bg:#f4f6fa;--card:#fff;--brand:#2563eb;--radius:12px; --shadow:0 1px 2px rgba(16,29,54,.05),0 1px 3px rgba(16,29,54,.04); --shadow-lg:0 12px 32px rgba(16,29,54,.10); /* The sidebar: deep navy with a sky-blue accent — PhonePick's blue, lifted so it reads on dark. The one fixed piece of chrome, apart from the work. */ --side-bg:#11203d;--side-bg2:#0a1428;--side-txt:#b9c6dd;--side-dim:#6f84a6;--side-hi:#fff; --side-hover:rgba(255,255,255,.07);--side-on:rgba(96,165,250,.14);--side-ic:#8ea3c4;--side-ic-on:#60a5fa; --side-line:rgba(255,255,255,.10)} *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink); font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased} .pp-shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh;transition:grid-template-columns .16s ease} /* The nav stays put while the page scrolls — sticky against the viewport, with its own scrollbar only if the link list ever outgrows the screen. */ .pp-side{background:linear-gradient(180deg,var(--side-bg),var(--side-bg2));padding:16px 12px 12px; display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto; color:var(--side-txt);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent} .pp-brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:16.5px;letter-spacing:-.01em; padding:2px 8px 14px;color:#fff!important;text-decoration:none} .pp-bell{width:28px;height:28px;display:block;flex:none;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.14)} .pp-side a{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:9px;min-height:36px; color:var(--side-txt);text-decoration:none;font-size:14.5px;font-weight:520;white-space:nowrap; transition:background .12s,color .12s} .pp-side a:hover{background:var(--side-hover);color:#fff} .pp-side a[aria-current="page"]{background:var(--side-on);color:#fff;font-weight:650;box-shadow:inset 3px 0 0 var(--side-ic-on)} .pp-ic{width:18px;height:18px;flex:none;fill:none;stroke:var(--side-ic);stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;transition:stroke .12s} .pp-side a:hover .pp-ic{stroke:#fff} .pp-side a[aria-current="page"] .pp-ic{stroke:var(--side-ic-on)} .pp-side a:focus-visible,.pp-side button:focus-visible{outline:2px solid var(--side-ic-on);outline-offset:1px} /* Is it answering? Under the logo, on every page. */ .pp-side a.pp-status{min-height:0;margin:0 0 10px;padding:8px 11px;font-size:12.5px;font-weight:600;gap:9px; background:rgba(255,255,255,.05);border:1px solid var(--side-line)} .pp-status i{width:8px;height:8px;border-radius:50%;flex:none;background:#94a3b8} .pp-status.on i{background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.55);animation:pp-pulse 2.4s ease-out infinite} .pp-status.warn i{background:#fbbf24} .pp-status.on{color:#dcfce7} .pp-status.warn{color:#fde68a} .pp-status[hidden]{display:none!important} @keyframes pp-pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}} @media (prefers-reduced-motion:reduce){.pp-status.on i{animation:none}} .pp-nav{display:flex;flex-direction:column;gap:1px} .pp-grp,.pp-gitems{display:flex;flex-direction:column;gap:1px} .pp-glbl{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0; cursor:pointer;font:inherit;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em; color:var(--side-dim);padding:13px 10px 5px;border-radius:6px;text-align:left} .pp-glbl:hover{color:var(--side-txt)} .pp-glbl .chev{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;transform:rotate(90deg);transition:transform .15s;opacity:.7} .pp-grp.folded .chev{transform:rotate(0)} .pp-grp.folded .pp-gitems{display:none} .pp-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--side-line);font-size:12.5px;color:#93a5c2; display:flex;flex-direction:column;gap:8px} .pp-who{display:flex;align-items:center;gap:4px;padding:2px 0 0;min-width:0} .pp-side a.pp-acct{flex:1;min-width:0;gap:10px;padding:5px 6px;min-height:0} .pp-who .lb{display:flex;flex-direction:column;min-width:0;line-height:1.3} .pp-who b{color:#fff;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pp-who small{color:var(--side-txt);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pp-foot button#ppOut{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:8px} .pp-foot button#ppOut:hover{background:var(--side-hover)} .pp-foot button#ppOut:hover .pp-ic{stroke:#fff} .pp-av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:750; color:#fff;background:linear-gradient(135deg,#3b82f6,#1d4ed8);letter-spacing:.02em} .pp-foot button{background:none;border:0;color:var(--side-txt);cursor:pointer;padding:0;font:inherit;font-size:12px;text-align:left} .pp-foot button.pp-fold{display:flex;align-items:center;gap:11px;width:100%;padding:7px 10px;border-radius:9px; color:var(--side-dim);font-size:13px;font-weight:600} .pp-fold:hover{background:var(--side-hover);color:#fff!important} .pp-fold:hover .pp-ic{stroke:#fff} /* Collapsed to an icon rail. Desktop only — phones get the strip below. */ @media (min-width:761px){ .pp-shell.mini{grid-template-columns:72px 1fr} .mini .pp-side{padding:16px 10px 12px} .mini .pp-side .lb,.mini .pp-meter,.mini .pp-up{display:none!important} .mini .pp-brand{justify-content:center;padding:2px 0 14px} .mini .pp-side a{justify-content:center;padding:7px 0} .mini .pp-side a.pp-status{padding:10px 0;background:none;border-color:transparent} .mini .pp-glbl{height:1px;padding:0;margin:9px 8px;background:var(--side-line);pointer-events:none} .mini .pp-glbl>*{display:none} .mini .pp-grp.folded .pp-gitems{display:flex} .mini .pp-who{justify-content:center;padding:4px 0 0} .mini .pp-side a.pp-acct{flex:none;padding:5px 0} .mini .pp-foot button#ppOut{display:none} .mini .pp-foot button.pp-fold{justify-content:center;padding:8px 0} .mini .pp-fold .pp-ic{transform:scaleX(-1)} } /* The settings menu (24 Sep 2026): a light, grouped list beside the folded rail on Settings, Connections, Plan and Account — after the Dribbble shot he picked. Quiet by design: grey icons and text, a soft grey pill for the page you are on, small group labels, hairlines between groups. */ @media (min-width:761px){ .pp-shell.pp-has-sub{grid-template-columns:232px 264px 1fr} .pp-shell.pp-has-sub.mini{grid-template-columns:72px 264px 1fr} } .pp-sub{background:#fff;border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto; display:flex;flex-direction:column;scrollbar-width:thin} .pp-sub-search{display:flex;align-items:center;gap:8px;margin:14px 14px 12px;padding:0 8px 0 11px;height:40px; border-radius:10px;background:#f5f6f8;border:1px solid transparent;cursor:text} .pp-sub-search:focus-within{background:#fff;border-color:var(--line);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)} .pp-sub-search .pp-ic{stroke:#8a939d;width:17px;height:17px} .pp-sub-search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;color:var(--ink);outline:none;padding:0} .pp-sub-search input::placeholder{color:#8a939d} .pp-sub-search kbd{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#6b7580;background:#e9ecef; border-radius:5px;padding:4px 6px} .pp-sub-nav{border-top:1px solid var(--line);padding-bottom:16px} .pp-sub-grp{padding:14px 12px 12px;border-bottom:1px solid var(--line)} .pp-sub-grp:last-of-type{border-bottom:0} .pp-sub-lbl{font-size:12.5px;color:#8a939d;padding:2px 10px 8px} .pp-sub a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;margin:1px 0; color:#4b545d;text-decoration:none;font-size:14.5px;font-weight:500;transition:background .12s,color .12s} .pp-sub a .pp-ic{stroke:#6b7580;width:17px;height:17px} .pp-sub a:hover{background:#f5f6f8;color:var(--ink)} .pp-sub a[aria-current="page"]{background:#f0f1f3;color:var(--ink);font-weight:600} .pp-sub a[aria-current="page"] .pp-ic{stroke:var(--ink)} .pp-sub a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px} .pp-sub a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* On a plan that doesn't include it: a small lock, not a hidden entry — the section still opens and says which plan does. */ .pp-sub a.locked::after{content:"";flex:none;width:13px;height:13px;background:#a3abb4; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center/contain no-repeat} /* Changed here and not saved yet: a blue dot, so a change made three sections ago isn't forgotten before Save. */ .pp-sub a.dirty::before{content:"";order:3;flex:none;width:7px;height:7px;border-radius:50%;background:var(--brand)} .pp-sub a[hidden],.pp-sub a.pp-miss,.pp-sub-grp.pp-miss{display:none!important} /* A block of a page whose section isn't the one open (sub-sections.js). */ .offsec{display:none!important} [data-sec]{scroll-margin-top:18px} .pp-sub-none{margin:14px 22px;font-size:13.5px;color:var(--muted)} .pp-sub-none[hidden]{display:none} @media (max-width:760px){ /* A phone: the list becomes a strip of pills under the app's own strip. */ .pp-sub{position:sticky;top:0;z-index:9;height:auto;flex-direction:row;overflow-x:auto;overflow-y:hidden; border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none} .pp-sub::-webkit-scrollbar{display:none} .pp-sub-search,.pp-sub-lbl,.pp-sub-none{display:none!important} .pp-sub-nav,.pp-sub-grp{display:contents} .pp-sub a{white-space:nowrap;margin:8px 0 8px 8px;padding:7px 12px;font-size:13.5px;flex:none} .pp-sub a .pp-ic{display:none} .pp-sub a[aria-current="page"]{background:var(--ink);color:#fff} } /* The consumption meter: how much of the month's answering is left, always in the corner of the eye — running dry is the one account state that costs jobs. */ .pp-meter{margin:2px 4px 2px;padding:10px 11px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--side-line)} .pp-meter .lbl{display:flex;justify-content:space-between;font-size:12px;color:#c3cee2;margin-bottom:5px} .pp-meter .lbl b{font-weight:650;color:#fff;font-variant-numeric:tabular-nums} .pp-meter .bar{height:6px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden} .pp-meter .bar i{display:block;height:100%;background:#4ade80;border-radius:3px} .pp-meter .bar i.warn{background:#fb923c} .pp-meter .reset{font-size:11.5px;color:#8093b1;margin-top:5px} a.pp-meter{display:block;text-decoration:none;margin-top:6px} a.pp-meter:hover{border-color:rgba(255,255,255,.28)} a.pp-meter[hidden]{display:none} .pp-side a.pp-up{display:block;min-height:0;margin:0 4px;text-align:center;background:#fff;color:#101d36!important; border-radius:9px;padding:8px 10px;font-weight:650;text-decoration:none;font-size:13.5px} .pp-side a.pp-up:hover{background:#e8edf6} /* display:block above would beat the hidden attribute's UA rule and pin an Upgrade button on accounts nowhere near their cap. */ .pp-side a.pp-up[hidden],.pp-up[hidden]{display:none} .pp-main{padding:26px 30px;min-width:0} .pp-banner{margin:0 0 18px;padding:11px 14px;border-radius:10px;font-size:13.5px; background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--brand)} .pp-banner a{color:inherit;font-weight:650} @media (max-width:760px){ .pp-shell{grid-template-columns:1fr} .pp-side{flex-direction:row;overflow-x:auto;overflow-y:hidden;align-items:center; height:auto;z-index:10;padding:8px 10px;gap:4px} .pp-brand{padding:0 8px 0 4px} .pp-brand .lb{display:none} .pp-nav,.pp-grp,.pp-gitems,.pp-grp.folded .pp-gitems{display:contents} .pp-glbl,.pp-meter,.pp-up,.pp-fold,.pp-who .lb{display:none!important} .pp-side a.pp-acct{padding:3px} .pp-who .pp-av{width:28px;height:28px;font-size:11px} .pp-side a.pp-status{margin:0;padding:7px 9px} .pp-side a.pp-status .lb{display:none} .pp-side a{padding:7px 10px;min-height:0} .pp-side a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--side-ic-on)} .pp-foot{margin:0 0 0 auto;border:0;padding:0 4px} .pp-main{padding:20px 16px} } /* Hidden until the shell is assembled. See the fallback in each page's head. */ body{opacity:0} body.pp-ready{opacity:1;transition:opacity .12s ease-out} /* ===================================================================== THE DARK THEME (25 Sep 2026, his ask: "Let's build this dark theme", after the app prototype in prototypes/app-dark). The same black, big-type look as the home page and the marketing pages (landing.css, site.css). Most of the app reads its colours from the tokens above, so re-declaring them here does most of the work. The pages' own hard-coded light colours were moved to dark ones in each page's