/* ══════════════════════════════════════════════════════════════════════════
   AW CLIENT PORTAL, THEME V3 ("soft glass"), 23 Sep 2026.
   The same skin as the CRM's theme-v3.css, so the two read as one product
   when Alex shows them on socials. Loaded after style.css and scoped entirely
   under html.t3: with the theme off, nothing changes.

   The portal was DARK. This flips it light: pale blue-to-sage wash, frosted
   cards with soft corners, the dark rail kept but floating, a white pill for
   the active page, black pill buttons, AW pink as the one accent.

   Pink as TEXT goes to #B8134E: #F92672 is 3.9:1 on white and fails at the
   sizes the portal uses it. Pink as a FILL stays #F92672.
   ══════════════════════════════════════════════════════════════════════════ */

html.t3{
  --bg:#E8ECF0;
  --bg-soft:rgba(255,255,255,.66);
  --bg-card:rgba(255,255,255,.60);
  --bg-elev:rgba(255,255,255,.82);
  --fg:#14151A;
  --muted:#5B5F69;
  --muted-strong:#3C4049;
  --hairline:rgba(20,21,26,.08);
  --hairline-strong:rgba(20,21,26,.14);
  --pink-veil:rgba(249,38,114,.07);
  --pink-soft:rgba(249,38,114,.14);
  --pink-glow:rgba(249,38,114,.28);
  --pink-ink:#B8134E;
  --success:#137D45; --warning:#A4631C; --danger:#B42318;
  --r:26px; --r-s:18px; --r-xs:12px;
  --rail-bg:#121318; --rail-bg-2:#17181F;
  --glass-brd:rgba(255,255,255,.85);
  --sh:0 1px 2px rgba(30,40,60,.03), 0 18px 40px -28px rgba(30,40,60,.30);
  --sh-l:0 2px 4px rgba(30,40,60,.04), 0 30px 60px -30px rgba(30,40,60,.38);
  color-scheme:light;
}

/* ── ground ──────────────────────────────────────────────────────────────── */
/* The colour sits on html only. On body it paints OVER body::before (z-index
   -2, no stacking context on body) and the wash never shows. */
html.t3{background:#E7EBEF}
html.t3 body{background:transparent;color:var(--fg)}
html.t3 body::after{content:none}
html.t3 body::before{
  background-image:
    radial-gradient(900px 620px at 0% 0%, rgba(176,196,230,.55), transparent 62%),
    radial-gradient(900px 700px at 100% 100%, rgba(214,226,196,.60), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(249,38,114,.07), transparent 60%),
    linear-gradient(135deg,#E4E9F1 0%,#EAEDEA 55%,#E9EEE3 100%);
  background-size:auto;
}
html.t3 ::-webkit-scrollbar-track{background:transparent}
html.t3 ::-webkit-scrollbar-thumb{background:rgba(20,21,26,.18)}

/* ── type ────────────────────────────────────────────────────────────────── */
html.t3 h1,html.t3 h2,html.t3 h3,html.t3 .deadline-date,html.t3 .guide strong{color:var(--fg)}
html.t3 .card-pink-glow strong{color:#fff}
html.t3 h1{font-weight:600;letter-spacing:-.045em}
html.t3 .tool-header h1{font-size:38px}
/* Plain links only. A bare `a` rule would out-rank .btn and turn button text pink. */
html.t3 a:not([class]){color:var(--pink-ink)}
html.t3 a:not([class]):hover{color:#8E0E3C}
html.t3 .stamp b,html.t3 .stamp strong,html.t3 .deadline-days{color:var(--pink-ink)}

/* ── the rail floats ─────────────────────────────────────────────────────── */
html.t3 .rail{
  position:sticky;top:14px;height:calc(100vh - 28px);
  margin:14px 0 14px 14px;border-radius:30px;border-right:0;
  box-shadow:0 30px 60px -30px rgba(10,12,20,.55);
}
html.t3 .rail .nav a{border-radius:99px}
/* the rail's links carry no class, so the plain-link pink above caught them */
html.t3 .rail .nav a:not(.on){color:var(--rail-mid)}
html.t3 .rail .nav a:not(.on):hover{color:var(--rail-ink)}
html.t3 .rail .nav a.on{background:#fff;color:#14151A;box-shadow:none}
html.t3 .rail .nav a.on svg{opacity:1}
html.t3 .me{border-radius:99px}
/* the floating rail's rounded top clips a mark set flush to it */
html.t3 .rail{padding-top:26px}
html.t3 .rail .brand{padding-left:10px}

/* ── the strip: frosted, fades out at the bottom ─────────────────────────── */
html.t3 .strip{
  height:74px;border-bottom:0;
  background:linear-gradient(180deg,rgba(232,236,240,.86) 70%,rgba(232,236,240,0));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}

/* ── surfaces: frosted glass, soft corners, no pink bar across the top ───── */
html.t3 .card,html.t3 .resource-tile,html.t3 .prompt-card,html.t3 .score-tile,html.t3 .result-box,html.t3 .history-row{
  background:var(--bg-card);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--sh);
}
html.t3 .card,html.t3 .resource-tile{border-radius:var(--r)}
html.t3 .card::before,html.t3 .resource-tile::after{display:none}
html.t3 a.card:hover,html.t3 .history-row:hover,html.t3 .resource-tile:hover{
  border-color:#fff;background:rgba(255,255,255,.8);box-shadow:var(--sh-l);
}
/* The hero cards (deadline, upsell tiers, audit score): AW black, the
   reference's feature card. Their contents are forced light to match. */
html.t3 .card-pink-glow,html.t3 .card-pink-glow.deadline-card{
  background:#14151A;border-color:#14151A;color:#fff;
  box-shadow:0 30px 60px -30px rgba(10,12,20,.7);
}
html.t3 .card-pink-glow h1,html.t3 .card-pink-glow h2,html.t3 .card-pink-glow h3,
html.t3 .card-pink-glow .deadline-date{color:#fff}
html.t3 .card-pink-glow .muted,html.t3 .card-pink-glow .deadline-label,
html.t3 .card-pink-glow .lede,html.t3 .card-pink-glow p{color:rgba(255,255,255,.66)}
html.t3 .card-pink-glow .deadline-days{color:#FF6FA2}
html.t3 .card-pink-glow .btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
html.t3 .card-pink-glow .btn{background:var(--pink);color:#fff}
html.t3 .card-pink-glow a:not([class]){color:#FF8AB5}
html.t3 .deadline-card:not(.card-pink-glow){background:var(--bg-card)}

/* ── buttons: black pills, frosted ghost pills ───────────────────────────── */
html.t3 .btn{
  background:#14151A;color:#fff;border-radius:99px;
  box-shadow:0 12px 24px -14px rgba(10,12,20,.8);
}
html.t3 .btn:hover{background:#000;color:#fff;box-shadow:0 14px 28px -14px rgba(10,12,20,.9)}
html.t3 .btn-ghost{
  background:rgba(255,255,255,.7);color:var(--fg);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 1px 2px rgba(30,40,60,.05);
}
html.t3 .btn-ghost:hover{background:#fff;color:var(--fg);border-color:#fff}
html.t3 .btn-danger{background:#B42318;color:#fff}
html.t3 .btn-danger:hover{background:#8F1B12}
html.t3 .copy-btn{border-radius:99px}

/* ── fields ──────────────────────────────────────────────────────────────── */
html.t3 input[type=text],html.t3 input[type=email],html.t3 input[type=password],
html.t3 input[type=url],html.t3 input[type=date],html.t3 select,html.t3 textarea{
  background:rgba(255,255,255,.82);border:1px solid rgba(20,21,26,.07);border-radius:14px;color:var(--fg);
}
html.t3 input:focus,html.t3 select:focus,html.t3 textarea:focus{
  background:#fff;border-color:rgba(249,38,114,.5);box-shadow:0 0 0 4px rgba(249,38,114,.10);
}
html.t3 ::placeholder{color:#9A9AA6}

/* ── badges, pills, alerts: the dark-mode tints were light text ──────────── */
html.t3 .badge{background:rgba(249,38,114,.08);border-color:rgba(249,38,114,.25);color:var(--pink-ink)}
html.t3 .badge-success{background:rgba(26,163,90,.10);border-color:rgba(26,163,90,.3);color:#137D45}
html.t3 .badge-warning{background:rgba(240,146,43,.12);border-color:rgba(240,146,43,.35);color:#A4631C}
html.t3 .badge-muted{background:rgba(20,21,26,.05);border-color:var(--hairline);color:var(--muted)}
html.t3 .status-pill.green{background:rgba(26,163,90,.10);border-color:rgba(26,163,90,.35);color:#137D45}
html.t3 .status-pill.amber{background:rgba(240,146,43,.12);border-color:rgba(240,146,43,.4);color:#A4631C}
html.t3 .status-pill.red{background:rgba(224,36,94,.10);border-color:rgba(224,36,94,.35);color:#B42318}
html.t3 .status-pill.muted{background:rgba(20,21,26,.05);border-color:var(--hairline);color:var(--muted)}
html.t3 .alert{border-radius:18px}
html.t3 .alert-error{background:rgba(224,36,94,.08);border-color:rgba(224,36,94,.3);color:#8F1B12}
html.t3 .alert-success{background:rgba(26,163,90,.10);border-color:rgba(26,163,90,.3);color:#0F6537}
html.t3 .alert-info{background:rgba(255,255,255,.75);border-color:rgba(249,38,114,.25);color:var(--fg)}
html.t3 .guide pre,html.t3 .guide code,html.t3 .prompt-box{background:rgba(255,255,255,.7);color:var(--fg);border-color:var(--hairline)}

/* ── colours written straight into the pages ─────────────────────────────
   The dark portal has ~250 inline text colours (color:#fff on 118 of them).
   An inline style beats any stylesheet rule unless it is !important, so they
   are remapped here by value. Left alone: anything carrying its OWN background
   (buttons, pills), and anything inside a surface that stays dark (the black
   hero cards, the trending bar, the rail), where white is still right. */
html.t3 :is([style*="color:#fff" i],[style*="color: #fff" i],[style*="color:#ededed" i],[style*="color:#eaeaea" i],
  [style*="color:#e8e8e8" i],[style*="color:#e6e6e6" i],[style*="color:white" i]):not([style*="background"]):not(.card-pink-glow *):not(.trend-wrap *):not(.rail *):not(.btn){color:var(--fg) !important}
html.t3 :is([style*="color:#cfcfcf" i],[style*="color:#bdbdbd" i],[style*="color:#b8b8b8" i]):not([style*="background"]):not(.card-pink-glow *):not(.trend-wrap *){color:var(--muted-strong) !important}
html.t3 :is([style*="color:#888" i],[style*="color:#9a9a9a" i],[style*="color:#8a8a8a" i]):not([style*="background"]):not(.card-pink-glow *):not(.trend-wrap *){color:var(--muted) !important}
html.t3 :is([style*="color:#f92672" i],[style*="color:var(--pink)" i],[style*="color:#fbcfe8" i]):not([style*="background"]):not(.card-pink-glow *):not(.trend-wrap *){color:var(--pink-ink) !important}
html.t3 :is([style*="color:#fca5a5" i],[style*="color:#ff6b6b" i],[style*="color:#ff5c7a" i],[style*="color:#f87171" i],[style*="color:#ef4444" i]):not([style*="background"]):not(.card-pink-glow *){color:var(--danger) !important}
html.t3 :is([style*="color:#fde68a" i],[style*="color:#fbbf24" i],[style*="color:#f5a623" i],[style*="color:#febc2e" i],[style*="color:#f59e0b" i]):not([style*="background"]):not(.card-pink-glow *){color:var(--warning) !important}
html.t3 :is([style*="color:#86efac" i],[style*="color:#10b981" i],[style*="color:#22c55e" i],[style*="color:#2ecc71" i],[style*="color:#3fd0b5" i]):not([style*="background"]):not(.card-pink-glow *){color:var(--success) !important}
html.t3 .trend-tag{color:#FF6FA2}
/* near-black inline grounds (table header rows, progress tracks) go light */
html.t3 :is([style*="background:#0a0a0a" i],[style*="background: #0a0a0a" i],[style*="background:#111" i],[style*="background:#121212" i],[style*="background:#141414" i]):not(.card-pink-glow *){
  background:rgba(20,21,26,.06) !important;
}

/* inside the black cards, the quiet parts have to be light, not dark */
html.t3 .card-pink-glow :is(.status-pill.muted,.badge-muted){color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
/* labels only change colour: in the :is() above they took a grey bar (the login form) */
html.t3 .card-pink-glow label{color:rgba(255,255,255,.7)}
/* fields inside a black card go dark too, not pale grey boxes */
html.t3 .card-pink-glow :is(input[type=text],input[type=email],input[type=password],input[type=url],select,textarea){
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff}
html.t3 .card-pink-glow :is(input,select,textarea):focus{background:rgba(255,255,255,.11);border-color:rgba(249,38,114,.6)}
html.t3 .card-pink-glow ::placeholder{color:rgba(255,255,255,.4)}
/* the AW.MEDIA wordmark over the login, sign-up and password cards was white */
html.t3 .brand-mark{color:var(--fg);filter:none}
html.t3 .brand-mark .dot{color:var(--pink)}
html.t3 .card-pink-glow .badge{color:#FF8AB5;background:rgba(249,38,114,.18);border-color:rgba(249,38,114,.4)}

/* Tools & guides: the "New" feature tile stays a black hero, the reference's
   feature card; the "Start here" strip was a near-black bar and goes glass. */
html.t3 .feature-tile{background:#14151A;border-color:#14151A;box-shadow:0 30px 60px -30px rgba(10,12,20,.7);border-radius:var(--r)}
html.t3 .feature-tile h3{color:#fff}
html.t3 .feature-tile p{color:rgba(255,255,255,.66)}
html.t3 .feature-tile .feature-cta{color:#FF8AB5}
html.t3 .start-strip{background:var(--bg-card);border:1px solid var(--glass-brd);border-left:3px solid var(--pink);border-radius:18px;box-shadow:var(--sh)}
html.t3 .start-strip:hover{background:rgba(255,255,255,.85);border-color:#fff;border-left-color:var(--pink)}
html.t3 .ss-text b{color:var(--fg)}
html.t3 .ss-text > span{color:var(--muted)}
html.t3 .ss-cta,html.t3 .ss-pill{color:var(--pink-ink)}
html.t3 .ss-pill{color:var(--pink-ink)}

/* ── tables ──────────────────────────────────────────────────────────────── */
html.t3 table.admin tr:hover td{background:rgba(255,255,255,.5)}

/* ═══ GENERATED: page-level overrides (scratchpad gen_overrides.py, 23 Sep 2026). Each page's own <style> block
   was written for the dark site; these are its light twins. Regenerate, do not hand-edit. ═══ */
html.t3 .flow-step{background:var(--bg-card);border:1px solid rgba(20,21,26,.09)}
html.t3 .flow-step-end{background:var(--bg-card)}
html.t3 .fs-title{color:var(--fg)}
html.t3 .fs-sub{color:var(--muted)}
html.t3 .fs-sub a{color:var(--pink-ink)}
html.t3 .flow-arrow{color:var(--pink-ink)}
html.t3 .flow-loop .flow-step{background:var(--bg-card)}
html.t3 .loop-note{color:var(--pink-ink)}
html.t3 .goal-head{color:var(--fg)}
html.t3 .goal-pill{color:var(--pink-ink)}
html.t3 .out-chip{background:var(--bg-card);border:1px solid rgba(20,21,26,.09);color:var(--fg)}
html.t3 .out-chip em{color:var(--muted)}
html.t3 .fanout-note{color:var(--muted)}
html.t3 .fanout-note a{color:var(--pink-ink)}
html.t3 .ask-callout{background:var(--bg-card);border:1px solid rgba(20,21,26,.09)}
html.t3 .ask-callout strong{color:var(--fg)}
html.t3 .ask-callout p{color:var(--muted)}
html.t3 .askalex-fab img{background:var(--bg-card)}
html.t3 .start-strip{background:var(--bg-card);border:1px solid rgba(20,21,26,.09)}
html.t3 .start-strip:hover{background:var(--bg-card);border-color:rgba(20,21,26,.09)}
html.t3 .ss-pill{color:var(--pink-ink)}
html.t3 .ss-text b{color:var(--fg)}
html.t3 .ss-text > span{color:var(--muted)}
html.t3 .ss-cta{color:var(--pink-ink)}
html.t3 .ail-toggle{color:var(--pink-ink)}
html.t3 .msg-user .msg-bubble{color:var(--fg)}
html.t3 .msg-bot .msg-bubble{color:var(--fg)}
html.t3 .tab-btn:hover{color:var(--fg)}
html.t3 .row-tools button:hover{color:var(--fg)}
html.t3 .icon-del{color:var(--danger)}
html.t3 .st-draft{color:var(--warning)}
html.t3 .st-scheduled{color:var(--muted)}
html.t3 .st-posted{color:var(--success)}
html.t3 .tier-captions{color:var(--success)}
html.t3 .tier-ai{color:var(--pink-ink)}
html.t3 .transcript-box{color:var(--fg);background:var(--bg-card)}
html.t3 .out-box{color:var(--fg);background:var(--bg-card)}
html.t3 .guide-hero .crumb a:hover{color:var(--pink-ink)}
html.t3 .guide p{color:var(--fg)}
html.t3 .guide ul,html.t3 .guide ol{color:var(--fg)}
html.t3 .guide strong{color:var(--fg)}
html.t3 .guide .pull{color:var(--pink-ink)}
html.t3 .guide code{color:var(--pink-ink)}
html.t3 .guide pre{color:var(--fg)}
/* ═══ END GENERATED ═══ */

/* carousel reviewer tabs: the dark site forced white on hover with !important,
   so the light version needs it too. Prompt numbers were bright pink text. */
html.t3 .tab-btn:hover{color:var(--fg) !important}
html.t3 .prompt-card .num{color:var(--pink-ink)}

/* ── PROJECT TOOLS (23 Sep 2026): Page Writer, the checklist, Logins Helper,
   Giving feedback. For website and systems clients; they talk to Projects. ── */
html.t3 .pt-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:10px 16px;border-radius:99px;background:rgba(255,255,255,.7);border:1px solid #fff;box-shadow:var(--sh);font-size:14px}
html.t3 .pt-bar-l{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
html.t3 .pt-pick{margin-left:auto}
html.t3 .pt-pick select{width:auto;padding:6px 12px;border-radius:99px;font-size:13px}
html.t3 .pt-seg{display:flex;flex-wrap:wrap;gap:6px}
html.t3 .pt-seg button,html.t3 .pt-radio label{font:inherit;font-size:14px;font-weight:600;padding:9px 16px;border-radius:99px;border:1px solid rgba(20,21,26,.08);background:rgba(255,255,255,.75);color:var(--fg);cursor:pointer;letter-spacing:0;text-transform:none;margin:0;display:inline-flex;align-items:center;gap:8px}
html.t3 .pt-seg button.on{background:#14151A;color:#fff;border-color:#14151A}
html.t3 .pt-radio input{width:auto;accent-color:#14151A}
html.t3 .pt-spin{display:inline-block;width:44px;height:44px;border:3px solid rgba(20,21,26,.1);border-top-color:var(--pink);border-radius:50%;animation:ptspin .8s linear infinite}
@keyframes ptspin{to{transform:rotate(360deg)}}
html.t3 .pt-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
html.t3 .pt-sec{position:relative;padding:18px 0;border-top:1px solid var(--hairline)}
html.t3 .pt-sec:first-of-type{margin-top:14px}
html.t3 .pt-sec-l{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-ink);margin-bottom:6px}
html.t3 .pt-sec h4{font-size:20px;letter-spacing:-.02em;margin:0 0 6px;color:var(--fg)}
html.t3 .pt-sec-b{white-space:pre-wrap;font-size:15.5px;line-height:1.6;color:var(--muted-strong);padding-right:70px}
html.t3 .pt-sec .copy-btn{position:absolute;top:16px;right:0}
html.t3 .pt-google{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--hairline)}
html.t3 .pt-google b{color:#1a0dab;font-weight:500;font-size:17px}
html.t3 .pt-google span{color:#4d5156;font-size:13.5px}
html.t3 .pt-list{margin:0;padding-left:18px;color:var(--muted-strong)}
html.t3 .pt-sendrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
html.t3 .pt-sendrow select{width:auto;flex:1;min-width:180px}
html.t3 .pt-sent{margin:12px 0 0;font-weight:600;color:#7BE0A6}
html.t3 .pt-progress-n{font-size:15px;color:var(--muted-strong);margin-bottom:10px}
html.t3 .pt-progress-n b{font-size:34px;font-weight:600;letter-spacing:-.04em;color:var(--fg);margin-right:4px}
html.t3 .pt-track{height:8px;border-radius:99px;background:rgba(20,21,26,.07);overflow:hidden}
html.t3 .pt-track i{display:block;height:100%;border-radius:99px;background:#1AA35A}
html.t3 .pt-needs{display:flex;flex-direction:column;gap:12px;margin-top:16px}
html.t3 .pt-needs .card + .card{margin-top:0}
html.t3 .pt-need{padding:20px 22px;scroll-margin-top:90px}
html.t3 .pt-need.is-just{box-shadow:0 0 0 3px rgba(26,163,90,.25),var(--sh)}
html.t3 .pt-need-top{display:flex;gap:14px;align-items:flex-start}
html.t3 .pt-tick{flex:0 0 26px;height:26px;border-radius:50%;border:2px solid rgba(20,21,26,.2);display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;margin-top:2px}
html.t3 .pt-need.is-sent .pt-tick{background:#1AA35A;border-color:#1AA35A}
html.t3 .pt-need-main h3{margin:0 0 4px;font-size:17px}
html.t3 .pt-need-main p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
html.t3 .pt-need.is-sent h3{color:var(--muted-strong)}
html.t3 .pt-sentline{margin-top:6px !important;color:#137D45 !important;font-weight:600}
html.t3 .pt-need-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;margin:14px 0 0 40px}
html.t3 .pt-fold > summary{list-style:none;cursor:pointer;display:inline-block}
html.t3 .pt-fold > summary::-webkit-details-marker{display:none}
html.t3 .pt-fold[open] > summary{display:none}
html.t3 .pt-sentform{display:flex;flex-direction:column;gap:10px;min-width:min(420px,78vw)}
html.t3 .pt-sentform label{font-size:13px;font-weight:600;color:var(--muted-strong);display:flex;flex-direction:column;gap:6px}
html.t3 .card-pink-glow .pt-sentform label{color:rgba(255,255,255,.75)}
html.t3 .pt-undo{font:inherit;font-size:13px;font-weight:600;background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;padding:6px 2px}
html.t3 .pt-lbl{display:block;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin:8px 0 10px}
html.t3 .pt-row{display:grid;grid-template-columns:1fr 1.8fr auto;gap:8px;margin-bottom:8px}
html.t3 .pt-row select{width:auto}
html.t3 .pt-fbacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
@media (max-width:720px){
  html.t3 .pt-row{grid-template-columns:1fr;padding:10px;border-radius:16px;background:rgba(20,21,26,.035)}
  html.t3 .pt-need-acts{margin-left:0}
  html.t3 .pt-sec-b{padding-right:0}
  html.t3 .pt-sec .copy-btn{position:static;margin-top:10px}
  html.t3 .pt-pick{margin-left:0;width:100%}
}

/* ── phones: the bottom bar floats too ───────────────────────────────────── */
@media (max-width:820px){
  html.t3 .rail{
    position:fixed;top:auto;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    height:auto;margin:0;border-radius:26px;padding:7px;border-top:0;
    box-shadow:0 20px 40px -18px rgba(10,12,20,.6);
    scrollbar-width:none;
  }
  html.t3 .rail::-webkit-scrollbar{display:none}
  html.t3 .rail .nav a{border-radius:18px}
  html.t3 .main{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
  html.t3 .strip{height:60px}
  html.t3 .railfoot{background:linear-gradient(90deg, transparent, var(--rail-bg) 18%)}
  html.t3 #pwa-install{bottom:calc(98px + env(safe-area-inset-bottom,0px)) !important}
  html.t3 .tool-header h1{font-size:30px}
}