/* ═══ THE NEW DESIGN, "v3" (Mario, 1 Nov 2026) ════════════════════════════════════════════════════════════════
   The approved prototype (hub-prototype, hub-mockup-v3.html) applied to the real Hub. The rules for using it are
   in DESIGN.md at the top of the repo; read that before changing this file.
   - EVERY RULE STARTS WITH html.v3. app.js sets that class from /api/me (design.use), which follows the switch in
     Admin > Settings and imports > Design. Without the class this file changes nothing, so the classic design
     is exactly what it was, and switching back is instant.
   - Look only. Nothing here may hide a control for good, change what a control does, or reorder it for the
     keyboard. A classic control that the new layout puts somewhere else is moved by CSS, or reached through a
     new control that clicks the classic one (app.js, THE NEW DESIGN).
   - Colours go through the tokens in section 1. New colours are added there, never written into a rule. */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────────────────────────────────────────── */
html.v3{
  /* The Hub's own names, set to the prototype's values. --navy, --royal, --ink, --ok and --err are unchanged, and so is
     --muted: the prototype's lighter text grey reads below 4.5:1 on its own grey surfaces (WCAG AA), the Hub's does not. */
  --line:#e7eaf1; --bg:#f5f6fa; --ok-bg:#e8f6ef; --err-bg:#fdeeec;
  --radius:12px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(15,27,51,.04),0 6px 20px rgba(15,27,51,.05);
  --shadow-lg:0 24px 60px rgba(11,28,62,.16);
  --ring:0 0 0 3px rgba(63,130,230,.35);
  /* --st-amber is a shade darker than the prototype's #a26f00, which reads 4.0:1 on its tint: amber text needs 4.5:1 (WCAG AA). */
  --st-amber:#946600; --st-amber-bg:#fff4df; --st-gray-bg:#f1f3f7;
  --fn-orange:#e23b3b;
  --side-w:240px;
  /* The prototype's other colours, under v3 names (its --muted and --ring mean other things: never copy those). */
  --v3-body:#3a4660; --v3-faint:#98a2b6; --v3-line-2:#f1f3f8; --v3-warm:#fbfaf8;
  --v3-blue-bg:#eef4fd; --v3-gray:#f1f3f7; --v3-hover-line:#d5dbe6; --v3-red:#e23b3b;
  --v3-side-text:#c3cce0; --v3-side-dim:#b4bfd4; --v3-side-label:#8b98b8; --v3-side-small:#7f8db0;
  --v3-side-hover:rgba(255,255,255,.06); --v3-side-line:rgba(255,255,255,.08);
  --v3-side-on:linear-gradient(90deg,rgba(63,130,230,.28),rgba(63,130,230,.08));
  --v3-tile:linear-gradient(135deg,#fff,#dfe8f8);
  --v3-glass:rgba(255,255,255,.7); --v3-bar:rgba(255,255,255,.95);
  --v3-btn-shadow:0 4px 12px rgba(47,111,208,.28);
  --v3-seg-shadow:0 1px 2px rgba(0,0,0,.06);
  --v3-panel-shadow:-24px 0 50px rgba(11,28,62,.12);
  --v3-sheet-shadow:0 -14px 40px rgba(11,28,62,.25);
  --v3-scrim:rgba(11,28,62,.45); --v3-scrim-none:rgba(11,28,62,0);
  --v3-toast-shadow:0 1px 2px rgba(15,27,51,.04),0 6px 20px rgba(15,27,51,.08);
  --v3-top-h:62px;
  /* The phone tab bar's height, its 1px top line included: a bar that sticks above it (My page's Save) is set from this. */
  --v3-tab-bar-h:51px;
  /* A face, on PPA Meetings and My PPA: the prototype's seven colours, darkened to keep white initials at 4.5:1 (WCAG AA). One set, so one name is one colour. */
  --v3-face-1:#3e71d5; --v3-face-2:#c3522a; --v3-face-3:#32826c; --v3-face-4:#865dd0; --v3-face-5:#c54963; --v3-face-6:#946f1c; --v3-face-7:#5a6780;
  --v3-hero:radial-gradient(1200px 300px at 85% -40%,rgba(127,176,255,.55),transparent 60%),linear-gradient(120deg,#0b1c3e 0%,#173a78 55%,#2f6fd0 100%);
  --v3-hero-hi:#b9cdf2; --v3-hero-ring:rgba(255,255,255,.05); --v3-glass-btn:rgba(255,255,255,.14); --v3-glass-line:rgba(255,255,255,.22);
  --v3-ok-tint:#e8f6ef; --v3-red-tint:#fdeeec; --v3-amb-tint:#fff4df;
  /* Icons: the prototype's (lucide 1.8.0, and its own flag, repost and more), drawn as masks so CSS can swap
     them in without touching the page. To add one, copy a line and change the path (DESIGN.md, Icons). */
  --ic-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --ic-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E");
  --ic-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  --ic-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
  --ic-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E");
  --ic-repost:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h13l-3-3M20 15H7l3 3'/%3E%3C/svg%3E");
  --ic-send:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E");
  --ic-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --ic-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  --ic-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
  --ic-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E");
  --ic-more:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Ccircle cx='19' cy='12' r='1.5'/%3E%3C/svg%3E");
  --ic-chevdown:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ic-chevright:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --ic-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --ic-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
  --ic-chart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E");
  --ic-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
  --ic-help:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.93 4.93 4.24 4.24'/%3E%3Cpath d='m14.83 9.17 4.24-4.24'/%3E%3Cpath d='m14.83 14.83 4.24 4.24'/%3E%3Cpath d='m9.17 14.83-4.24 4.24'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
  --ic-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z'/%3E%3Cpath d='M20 2v4'/%3E%3Cpath d='M22 4h-4'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3C/svg%3E");
  --ic-out:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E");
  --ic-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
  --ic-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --ic-err:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
  --ic-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --ic-scale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='m19 8 3 8a5 5 0 0 1-6 0zV7'/%3E%3Cpath d='M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1'/%3E%3Cpath d='m5 8 3 8a5 5 0 0 1-6 0zV7'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E");
  --ic-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
  --ic-trend:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7h6v6'/%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3C/svg%3E");
  --ic-unlink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71'/%3E%3Cpath d='m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71'/%3E%3Cline x1='8' x2='8' y1='2' y2='5'/%3E%3Cline x1='2' x2='5' y1='8' y2='8'/%3E%3Cline x1='16' x2='16' y1='19' y2='22'/%3E%3Cline x1='19' x2='22' y1='16' y2='16'/%3E%3C/svg%3E");
  --ic-import:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m8 11 4 4 4-4'/%3E%3Cpath d='M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4'/%3E%3C/svg%3E");
  --ic-drive:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 16h.01'/%3E%3Cpath d='M2.212 11.577a2 2 0 0 0-.212.896V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5.527a2 2 0 0 0-.212-.896L18.55 5.11A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3Cpath d='M21.946 12.013H2.054'/%3E%3Cpath d='M6 16h.01'/%3E%3C/svg%3E");
  --ic-seat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3Cpath d='M18 3l3 3M21 3l-3 3'/%3E%3C/svg%3E");
  --ic-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* ── 2. BASE ───────────────────────────────────────────────────────────────────────────────────────────────── */
html.v3 body{background:var(--bg)}
/* One way to draw an icon: an element (or ::before) with .v3-ic's mask, coloured by currentColor. */
html.v3 .v3-ic{display:inline-block;flex:none;width:17px;height:17px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
/* A face: app.js marks a name with its initials and a colour number (v3Face), here the number becomes its colour, and
   each screen draws the circle in its own section (PPA Meetings, My PPA). */
html.v3 [data-v3-hue="1"]{--v3-face:var(--v3-face-1)}
html.v3 [data-v3-hue="2"]{--v3-face:var(--v3-face-2)}
html.v3 [data-v3-hue="3"]{--v3-face:var(--v3-face-3)}
html.v3 [data-v3-hue="4"]{--v3-face:var(--v3-face-4)}
html.v3 [data-v3-hue="5"]{--v3-face:var(--v3-face-5)}
html.v3 [data-v3-hue="6"]{--v3-face:var(--v3-face-6)}
html.v3 [data-v3-hue="7"]{--v3-face:var(--v3-face-7)}

/* ── 3. BUTTONS ────────────────────────────────────────────────────────────────────────────────────────────── */
/* The big button (consultant screens, sheets): flat blue, 48px, as the prototype's phone buttons. */
html.v3 .btn{height:48px;border-radius:14px;background:var(--royal);font-size:15px;font-weight:800;letter-spacing:0;box-shadow:var(--v3-btn-shadow);transition:background .15s,box-shadow .15s,opacity .15s}
html.v3 .btn:hover{transform:none;background:var(--royal-lo);box-shadow:var(--v3-btn-shadow)}
html.v3 .btn:disabled,html.v3 .btn:disabled:hover{background:var(--royal);box-shadow:none}
html.v3 .btn.btn-compact{height:40px;padding:0 18px;font-size:14px;font-weight:700;border-radius:11px}
/* The quiet button: the prototype's outline button. */
html.v3 .btn-ghost{border-radius:11px;font-weight:600;color:var(--v3-body)}
html.v3 .btn-ghost:hover{background:var(--v3-gray);color:var(--ink)}
/* Admin buttons: 38px, rounded 11, blue with a soft shadow; ghost is white with a line; danger keeps its red. */
html.v3 .adm-btn{min-height:38px;padding:0 15px;border-radius:11px;font-weight:600;font-size:13.5px;box-shadow:var(--v3-btn-shadow)}
html.v3 .adm-btn.ghost,html.v3 .adm-btn.danger{box-shadow:none}
html.v3 .adm-btn.ghost{color:var(--ink);border-color:var(--line)}
html.v3 .adm-btn.ghost:hover{background:var(--v3-gray);border-color:var(--v3-hover-line)}
html.v3 table.grid .adm-btn,html.v3 .adm-sp .adm-btn{min-height:30px;padding:0 11px;border-radius:9px;font-size:12.5px;box-shadow:none}
/* Buttons inside admin cards (the facelift rules, same chain so these win). */
html.v3 #studio.adm-shell #view-admin .card-surface .btn{min-height:38px;border-radius:11px;font-weight:600;box-shadow:var(--v3-btn-shadow)}
html.v3 #studio.adm-shell #view-admin .card-surface .btn:hover{box-shadow:var(--v3-btn-shadow)}
html.v3 #studio.adm-shell #view-admin .card-surface .btn-ghost{border-radius:9px;color:var(--ink);font-weight:600}
html.v3 #studio.adm-shell #view-admin .card-surface .btn-ghost:hover{background:var(--v3-gray);border-color:var(--v3-hover-line);color:var(--ink)}

/* Keyboard focus: one clear ring on every button and control the new design styles (the soft shadow above would
   otherwise replace the classic focus ring). */
html.v3 :is(.btn,.btn-ghost,.adm-btn,.v3-wn,.adm-search,.adm-cv-btn,.adm-avatar,.adm-icon-btn,.seg-btn,.adm-tab,.acct-btn,.more-item,.inst-x,.adm-menu-item,.btab):focus-visible{outline:2px solid var(--royal-2);outline-offset:2px}
html.v3 #studio:not(.adm-shell) .acct-btn:focus-visible{outline-color:#fff}

/* ── 4. INPUTS ─────────────────────────────────────────────────────────────────────────────────────────────── */
html.v3 .ff input,html.v3 .ff textarea,html.v3 .ff select{border-width:1px;border-color:var(--line);border-radius:11px}
html.v3 .ff input:focus,html.v3 .ff textarea:focus,html.v3 .ff select:focus{border-color:var(--royal-2);box-shadow:var(--ring)}
/* :where() keeps these two rules as light as a plain element rule, so a field's own state (a word count over its
   limit, a component's own look) still wins over them, exactly as it does in the classic design. */
html.v3 :where(#studio) :where(input[type=text],input[type=email],input[type=url],input[type=number],input[type=search],input[type=date],input[type=time],input[type=datetime-local],input:not([type]),select,textarea){border-color:var(--line);border-radius:11px}
html.v3 :where(#studio) :where(input[type=text],input[type=email],input[type=url],input[type=number],input[type=search],input[type=date],input[type=time],input[type=datetime-local],input:not([type]),select,textarea):not(.field-invalid):focus{border-color:var(--royal-2);box-shadow:var(--ring);outline:none}
html.v3 .adm-dlg-input{border-radius:11px}
html.v3 .adm-dlg-input:focus{border-color:var(--royal-2)}

/* ── 5. CARDS, PILLS, SEGMENTED TABS ──────────────────────────────────────────────────────────────────────── */
html.v3 .card-surface{border-radius:var(--radius-lg);border-color:var(--line);box-shadow:var(--shadow)}
html.v3 .pill,html.v3 .st{padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.45}
html.v3 .pill.invited{background:var(--v3-blue-bg)}
html.v3 .pill.deactivated{background:var(--v3-gray)}
html.v3 .pill.near{background:var(--st-amber-bg);color:var(--st-amber)}
/* A choice of views (.seg): a gray track, the chosen one white. */
html.v3 .seg{background:var(--v3-gray);border-radius:11px;padding:3px;gap:2px}
html.v3 .seg-btn{border-radius:9px;padding:6px 11px;font-size:12.5px;font-weight:700;color:var(--muted)}
html.v3 .seg-btn:hover{color:var(--ink)}
html.v3 .seg-btn.active,html.v3 .seg-btn[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:var(--v3-seg-shadow)}
/* Red counts on tabs, buttons and the sidebar: the prototype's red pill. */
html.v3 .adm-count,html.v3 .tab-badge,html.v3 .adm-nav-badge{background:var(--v3-red);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:0 7px;min-width:18px;height:18px;line-height:18px}

/* ── 6. ADMIN SHELL: SIDEBAR ──────────────────────────────────────────────────────────────────────────────── */
html.v3 .adm-side{width:var(--side-w);padding:16px 12px;color:var(--v3-side-dim)}
html.v3 .adm-side{padding-top:calc(16px + env(safe-area-inset-top,0px))}
html.v3 .adm-brand{display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center;padding:4px 8px 18px}
html.v3 .adm-brand::before{content:"FN";grid-row:1 / span 2;width:34px;height:34px;border-radius:10px;background:var(--v3-tile);color:var(--navy);font-size:12px;font-weight:800;display:grid;place-items:center}
html.v3 .adm-brand img{display:none}
html.v3 .adm-brand span{color:#fff;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.15}
html.v3 .adm-brand small{color:var(--v3-side-small);font-size:11.5px;font-weight:500;line-height:1.45}
html.v3 .adm-brand small::before{content:"FranNet · "}
html.v3 .adm-nav{gap:2px}
html.v3 .adm-nav-item,html.v3 .adm-nav-item.quiet{gap:11px;padding:9px 10px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--v3-side-text)}
html.v3 .adm-nav-item:hover{background:var(--v3-side-hover);color:#fff}
html.v3 .adm-nav-item[aria-current="page"]{background:var(--v3-side-on);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--royal-2)}
html.v3 .adm-nav-item:focus-visible{outline:2px solid var(--royal-2);outline-offset:-2px}
html.v3 .adm-nav-item > svg{display:none}
html.v3 .adm-nav-item::before{content:"";width:17px;height:17px;flex:none;opacity:.85;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
html.v3 .adm-nav-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--v3-side-label);padding:14px 10px 6px}
html.v3 .adm-nav-badge{margin-left:auto}
html.v3 [data-section="today"]{--i:var(--ic-home)}
html.v3 [data-section="consultants"]{--i:var(--ic-users)}
html.v3 [data-section="ppa"]{--i:var(--ic-calendar)}
html.v3 [data-section="content"]{--i:var(--ic-doc)}
html.v3 [data-section="challenges"]{--i:var(--ic-flag)}
html.v3 [data-section="repost"]{--i:var(--ic-repost)}
html.v3 [data-section="outreach"]{--i:var(--ic-send)}
html.v3 [data-section="settings"]{--i:var(--ic-gear)}
html.v3 [data-section="audit"]{--i:var(--ic-clock)}

/* ── 7. ADMIN SHELL: TOP BAR, PAGE HEADER, TABS ───────────────────────────────────────────────────────────── */
html.v3 #studio.adm-shell{--topbar-h:var(--v3-top-h)}
html.v3 .adm-top{height:var(--v3-top-h);gap:12px;padding:0 28px;background:var(--v3-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
html.v3 .v3-crumb{flex:0 1 auto;min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v3 .v3-crumb b{color:var(--ink);font-weight:700}
html.v3 .v3-crumb .v3-name:empty{display:none}
html.v3 .adm-search{flex:0 1 340px;margin-left:auto;width:auto;max-width:28vw;min-width:44px;height:38px;padding:0 12px;gap:8px;border-radius:12px;background:#fff;border-color:var(--line);color:var(--muted);font-size:13px}
html.v3 .adm-search:hover{border-color:var(--v3-hover-line)}
html.v3 .adm-search > svg{display:none}
html.v3 .adm-search::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:var(--ic-search) center/contain no-repeat;mask:var(--ic-search) center/contain no-repeat}
html.v3 .adm-search kbd{color:var(--muted);background:#fff}
@media (min-width:1024px){ html.v3 .adm-search{max-width:40vw} }
@media (max-width:1023px){ html.v3 .adm-search kbd{display:none} }
html.v3 .adm-top-right{margin-left:0;gap:10px}
html.v3 .adm-cv-btn{height:38px;border-radius:12px;border-color:var(--line);font-size:13px;font-weight:600}
html.v3 .adm-cv-btn:hover{border-color:var(--v3-hover-line)}
html.v3 .adm-avatar{width:38px;height:38px}
html.v3 .adm-icon-btn{width:38px;height:38px;border-radius:12px;color:var(--v3-body)}
html.v3 .adm-icon-btn:hover{background:var(--v3-gray)}
html.v3 .adm-menu-btn > svg{display:none}
html.v3 .adm-menu-btn::before{content:"";width:19px;height:19px;background:currentColor;-webkit-mask:var(--ic-menu) center/contain no-repeat;mask:var(--ic-menu) center/contain no-repeat}
html.v3 #studio.adm-shell #view-admin{max-width:1320px;margin:0 auto;padding:26px 28px 30px}
html.v3 .adm-head{margin:0 0 16px;align-items:flex-end}
html.v3 .adm-head h1{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.45;margin:0}
html.v3 .adm-head p{font-size:13.5px;color:var(--muted)}
html.v3 .adm-crumb{color:var(--royal)}
html.v3 .adm-person{background:var(--v3-blue-bg);color:var(--royal-lo)}
/* Section tabs: plain words with a blue line under the open one; the view switch under them is a .seg. */
html.v3 .adm-tabs{border-bottom-color:var(--line);margin:0 0 18px}
html.v3 .adm-tab{padding:9px 12px;font-size:13.5px;font-weight:600;color:var(--muted)}
html.v3 .adm-tab:hover{color:var(--ink)}
html.v3 .adm-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--royal)}
html.v3 .adm-views{margin:0 0 16px}
html.v3 #studio.adm-shell #view-admin .card-surface h1{font-size:15.5px;font-weight:700;letter-spacing:0}
html.v3 #studio.adm-shell .adm-page{gap:18px}

/* ── 8. MENUS (Consultant view, account) ──────────────────────────────────────────────────────────────────── */
html.v3 .adm-menu{border-radius:12px;border-color:var(--line);padding:4px;box-shadow:var(--shadow-lg)}
html.v3 .adm-menu-item{font-size:13.5px;padding:7px 10px;border-radius:8px}
html.v3 .adm-menu-item:hover,html.v3 .adm-menu-item:focus{background:var(--v3-blue-bg);color:var(--royal-lo)}
html.v3 .adm-menu-label{font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none}
html.v3 .adm-menu-who b{font-size:13.5px}

/* ── 9. SIDE PANEL, DIALOGS, SEARCH ───────────────────────────────────────────────────────────────────────── */
/* The panel slides in under the top bar and leaves the page in view, as in the prototype. A click beside it still
   closes it, exactly as before: the layer that catches that click is only made clear. */
@media (min-width:600px){
  html.v3 .adm-sp-ov{background:var(--v3-scrim-none)}
  html.v3 .adm-sp{top:calc(var(--v3-top-h) + env(safe-area-inset-top,0px));width:min(400px,100%);padding-top:0;border-left:1px solid var(--line);box-shadow:var(--v3-panel-shadow)}
  html.v3 body.impersonating .adm-sp{top:calc(46px + env(safe-area-inset-top,0px))}
  html.v3 .adm-sp.wide{width:min(560px,100%)}
}
html.v3 .adm-sp-head{padding:20px 22px 16px;border-bottom-color:var(--v3-line-2)}
html.v3 .adm-sp-head h2{font-size:17px;font-weight:700}
html.v3 .adm-sp-head p{font-size:12.5px}
html.v3 .adm-sp-body{padding:18px 22px}
html.v3 .adm-sp-actions{padding:14px 22px;justify-content:flex-end;border-top-color:var(--line)}
html.v3 .adm-dlg-ov{background:var(--v3-scrim)}
html.v3 .adm-dlg{border-radius:16px;box-shadow:var(--shadow-lg)}
html.v3 .adm-pal-ov{background:var(--v3-scrim)}
html.v3 .adm-pal{border-radius:14px;border:1px solid var(--line)}
html.v3 .adm-pal-in{padding:12px 14px;color:var(--v3-faint)}
html.v3 .adm-pal-in input{font-size:14px}
html.v3 .adm-pal-list{padding:4px}
html.v3 .adm-pal-group{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;padding:8px 8px 4px}
html.v3 .adm-pal-opt{border-radius:8px;padding:8px}
html.v3 .adm-pal-opt[aria-selected="true"]{background:var(--v3-blue-bg)}
html.v3 .adm-pal-text b{font-size:13.5px}

/* ── 10. SHEETS (More, Get the app, What's new) ───────────────────────────────────────────────────────────── */
html.v3 .inst-ov{background:var(--v3-scrim)}
html.v3 .inst-sheet{border-radius:24px 24px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:var(--v3-sheet-shadow)}
html.v3 .inst-grab{width:40px;height:5px;border-radius:5px;background:var(--v3-hover-line);margin:0 auto 10px}
html.v3 .inst-head h2{font-size:17px;font-weight:700;letter-spacing:-.01em}
@media (min-width:761px){ html.v3 .inst-sheet{border-radius:20px;padding:18px 20px 22px} }
/* The More list: one bordered list, a chevron on each row, a gap between pages and account. */
html.v3 .more-list{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:4px 0 12px}
html.v3 .more-list > li + li{border-top:1px solid var(--v3-line-2)}
html.v3 .more-sep{border-top:0;margin:0;height:8px;background:var(--bg)}
html.v3 .more-list > li.more-sep + li{border-top:0}
html.v3 .more-item{min-height:48px;gap:12px;padding:0 14px;border-radius:0;font-size:14px;font-weight:600}
html.v3 .more-item:hover,html.v3 .more-item:focus-visible{background:var(--v3-gray)}
html.v3 .more-item[aria-current="page"]{background:var(--v3-blue-bg);color:var(--royal-lo)}
html.v3 .more-item > .more-ic{display:none}
html.v3 .more-item::before{content:"";width:19px;height:19px;flex:none;background:var(--v3-body);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
html.v3 .more-item[aria-current="page"]::before{background:var(--royal-lo)}
html.v3 .more-item::after{content:"";width:16px;height:16px;margin-left:auto;flex:none;background:var(--v3-faint);-webkit-mask:var(--ic-chevright) center/contain no-repeat;mask:var(--ic-chevright) center/contain no-repeat}
html.v3 .more-item > .wn-dot,html.v3 .more-item > .pb-new{margin-left:auto}
html.v3 .more-item:has(> .wn-dot,> .pb-new)::after{margin-left:8px}
html.v3 .more-who{border:1px solid var(--line);border-radius:14px;padding:10px 14px}
html.v3 [data-more-act="analytics"]{--i:var(--ic-chart)}
html.v3 [data-more-act="playbook"]{--i:var(--ic-book)}
html.v3 [data-more-act="support"]{--i:var(--ic-help)}
html.v3 [data-more-act="whatsnew"]{--i:var(--ic-spark)}
html.v3 [data-more-act="repost"]{--i:var(--ic-repost)}
html.v3 [data-more-act="content"]{--i:var(--ic-pen)}
html.v3 [data-more-act="install"]{--i:var(--ic-phone)}
html.v3 [data-more-act="terms"]{--i:var(--ic-doc)}
html.v3 [data-more-act="logout"]{--i:var(--ic-out)}
html.v3 [data-adm-section="content"]{--i:var(--ic-doc)}
html.v3 [data-adm-section="repost"]{--i:var(--ic-repost)}
html.v3 [data-adm-section="outreach"]{--i:var(--ic-send)}
html.v3 [data-adm-section="settings"]{--i:var(--ic-gear)}
html.v3 [data-adm-section="audit"]{--i:var(--ic-clock)}
html.v3 [data-adm-section="today"]{--i:var(--ic-home)}
html.v3 [data-adm-section="consultants"]{--i:var(--ic-users)}
html.v3 [data-adm-section="ppa"]{--i:var(--ic-calendar)}
html.v3 [data-adm-section="challenges"]{--i:var(--ic-flag)}

/* ── 11. PHONE TAB BARS (consultant under 761px, admin under 600px) ───────────────────────────────────────── */
/* Labels in the prototype's lighter grey would read at 2.6:1 on white; the Hub's text grey keeps them at 4.8:1 (WCAG AA). */
html.v3 .btab{height:auto;min-height:calc(var(--v3-tab-bar-h) - 1px);gap:3px;padding:8px 2px 4px;font-size:10.5px;font-weight:700;color:var(--muted)}
html.v3 .btab[aria-current="page"]{color:var(--royal)}
html.v3 .btab > svg{display:none}
html.v3 .btab::before,html.v3 .btab[aria-current="page"]::before{content:"";position:static;width:21px;height:21px;border-radius:0;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
html.v3 .btab:focus-visible{background:var(--v3-gray)}
html.v3 .btab-badge{top:3px;left:calc(50% + 4px);height:15px;min-width:15px;padding:0 5px;border-radius:999px;background:var(--v3-red);font-size:9.5px;font-weight:700;line-height:15px}
html.v3 .btab-dot{top:6px;left:calc(50% + 7px);width:8px;height:8px;background:var(--v3-red)}
html.v3 .btab[data-view="challenges"]{--i:var(--ic-flag)}
html.v3 .btab[data-view="page"]{--i:var(--ic-doc)}
html.v3 .btab[data-view="content"]{--i:var(--ic-pen)}
html.v3 .btab[data-view="repost"]{--i:var(--ic-repost)}
html.v3 .btab[data-view="ppa"]{--i:var(--ic-calendar)}
html.v3 .btab:is([data-more],[data-adm-more]){--i:var(--ic-more)}
@media (max-width:760px){
  html.v3 #studio:not(.adm-shell) .btabs{background:var(--v3-bar);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top-color:var(--line);box-shadow:none}
}
@media (max-width:599px){
  html.v3 #studio.adm-shell .adm-btabs{background:var(--v3-bar);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top-color:var(--line)}
}

/* ── 12. CONSULTANT SHELL, DESKTOP AND TABLET (761px and wider): the navy top bar becomes the navy sidebar ─── */
@media (min-width:761px){
  html.v3 #studio:not(.adm-shell){--topbar-h:var(--v3-top-h);padding-left:var(--side-w);min-height:100vh}
  html.v3 #studio:not(.adm-shell) > header.topbar{position:fixed;top:env(safe-area-inset-top,0px);left:0;bottom:0;width:calc(var(--side-w) + env(safe-area-inset-left,0px));z-index:40;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:16px 12px 16px calc(12px + env(safe-area-inset-left,0px));min-height:0;overflow-y:auto;box-shadow:none;color:var(--v3-side-dim)}
  html.v3 body.impersonating #studio:not(.adm-shell) > header.topbar{top:calc(46px + env(safe-area-inset-top,0px))}
  /* Under the "Viewing as" banner the top bar sticks 46px lower, and so must everything that sticks under it. */
  html.v3 body.impersonating #studio:not(.adm-shell){--topbar-h:calc(var(--v3-top-h) + 46px)}
  html.v3 #studio:not(.adm-shell) .logo-lockup{display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center;padding:4px 8px 18px}
  html.v3 #studio:not(.adm-shell) .logo-lockup::before{content:"FN";grid-row:1 / span 2;width:34px;height:34px;border-radius:10px;background:var(--v3-tile);color:var(--navy);font-size:12px;font-weight:800;display:grid;place-items:center}
  html.v3 #studio:not(.adm-shell) .logo-lockup::after{content:"FranNet";color:var(--v3-side-small);font-size:11.5px;line-height:1.45}
  html.v3 #studio:not(.adm-shell) .logo-lockup img,html.v3 #studio:not(.adm-shell) .lockup-sep{display:none}
  html.v3 #studio:not(.adm-shell) .lockup-name{color:#fff;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.15}
  html.v3 #studio:not(.adm-shell) #tabs{display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;margin:0;order:0;flex-basis:auto;justify-content:flex-start}
  html.v3 #studio:not(.adm-shell) #tabs .tab{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--v3-side-text);text-align:left}
  html.v3 #studio:not(.adm-shell) #tabs .tab[hidden]{display:none}
  html.v3 #studio:not(.adm-shell) #tabs .tab::before{content:"";width:17px;height:17px;flex:none;opacity:.85;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
  html.v3 #studio:not(.adm-shell) #tabs .tab:hover{background:var(--v3-side-hover);color:#fff}
  html.v3 #studio:not(.adm-shell) #tabs .tab.active{background:var(--v3-side-on);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--royal-2)}
  html.v3 #studio:not(.adm-shell) #tabs .tab:focus-visible{outline:2px solid var(--royal-2);outline-offset:-2px}
  html.v3 #studio:not(.adm-shell) #tabs .tab-badge{margin-left:auto}
  html.v3 #studio:not(.adm-shell) #tabs .pb-new{margin-left:auto}
  /* The account: the button and the name at the foot of the sidebar. What's new, Content Terms and Log out are
     in its menu (as on a phone) and What's new is also in the top bar. The three links stay in the page. */
  html.v3 #studio:not(.adm-shell) .topbar-right{margin-top:auto;margin-left:0;padding:12px 8px 2px;gap:10px;flex-wrap:nowrap;border-top:1px solid var(--v3-side-line)}
  html.v3 #studio:not(.adm-shell) .topbar-right > :is(#wn-link,#terms-link,#logout){display:none}
  html.v3 #studio:not(.adm-shell) .topbar-right > #who{display:block;order:1;min-width:0;color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.v3 #studio:not(.adm-shell) .acct-wrap{display:block;order:0}
  html.v3 #studio:not(.adm-shell) .acct-btn{position:relative;width:30px;height:30px;font-size:11px;font-weight:700}
  html.v3 #studio:not(.adm-shell) .acct-btn::before{content:"";position:absolute;inset:-7px;border-radius:50%}
  html.v3 #studio:not(.adm-shell) .acct-btn.has-dot::after{width:8px;height:8px;top:-1px;right:-1px;background:var(--v3-red)}
  html.v3 #studio:not(.adm-shell) #acct-menu{top:auto;bottom:calc(100% + 8px);left:0;right:auto;min-width:0;width:calc(var(--side-w) - 24px);color:var(--ink)}
  /* The top bar of the new design: where you are, and What's new. */
  html.v3 #studio:not(.adm-shell) > .v3-top{display:flex}
  /* My page's editor and preview stack a little sooner, as they do inside the admin shell. */
  html.v3 #studio:not(.adm-shell) #view-page .side-col{top:calc(var(--v3-top-h) + 16px)}
}
@media (min-width:761px) and (max-width:1240px){
  /* minmax(0,1fr), not 1fr: a plain 1fr track grows to the live preview's own width and the page scrolls sideways. */
  html.v3 #studio:not(.adm-shell) #view-page .page-layout{grid-template-columns:minmax(0,1fr)}
  html.v3 #studio:not(.adm-shell) #view-page .side-col{position:static}
}
html.v3 .v3-top{display:none;position:sticky;top:env(safe-area-inset-top,0px);z-index:25;height:var(--v3-top-h);align-items:center;gap:12px;padding:0 28px;
  background:var(--v3-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
html.v3 body.impersonating .v3-top{top:calc(46px + env(safe-area-inset-top,0px))}
html.v3 .v3-wn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
html.v3 .v3-wn:hover{border-color:var(--v3-hover-line)}
html.v3 .v3-wn:focus-visible{outline:none;box-shadow:var(--ring)}
html.v3 .v3-wn[aria-current="page"]{border-color:var(--royal-2);color:var(--royal-lo)}
html.v3 .v3-wn::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--ic-spark) center/contain no-repeat;mask:var(--ic-spark) center/contain no-repeat}
html.v3 .v3-wn .wn-dot{margin-left:0;background:var(--v3-red)}
html.v3 [data-view="challenges"]{--i:var(--ic-flag)}
html.v3 [data-view="page"]{--i:var(--ic-doc)}
html.v3 [data-view="content"]{--i:var(--ic-pen)}
html.v3 [data-view="analytics"]{--i:var(--ic-chart)}
html.v3 [data-view="playbook"]{--i:var(--ic-book)}
html.v3 [data-view="ppa"]{--i:var(--ic-calendar)}
html.v3 [data-view="repost"]{--i:var(--ic-repost)}
html.v3 [data-view="support"]{--i:var(--ic-help)}
html.v3 [data-view="admin"]{--i:var(--ic-gear)}

/* ── 13. CONSULTANT SHELL, PHONE (760px and narrower): a light title row instead of the navy bar ──────────── */
@media (max-width:760px){
  html.v3 #studio:not(.adm-shell){--topbar-h:0px}
  /* Open as: the title row scrolls away with the page but the "Viewing as" banner stays over the top 46px, so whatever
     lands or sticks under the top bar (an article or a meeting opened from a link) stays below the banner, on every page. */
  html.v3 body.impersonating #studio:not(.adm-shell){--topbar-h:46px}
  html.v3 #studio:not(.adm-shell) > header.topbar{position:relative;top:auto;background:transparent;box-shadow:none;min-height:56px;padding:8px 12px 6px 16px;gap:10px}
  html.v3 #studio:not(.adm-shell) .logo-lockup{display:none}
  html.v3 #studio:not(.adm-shell) .v3-title{display:block;flex:1;min-width:0;font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.v3 #studio:not(.adm-shell) .acct-btn{width:44px;height:44px;font-size:13px;font-weight:700}
  html.v3 #studio:not(.adm-shell) .acct-btn.has-dot::after{background:var(--v3-red);box-shadow:0 0 0 2px var(--bg)}
  html.v3 #studio:not(.adm-shell) .acct-btn:focus-visible{outline:2px solid var(--royal-2)}
  /* My page's Save bar sits on the tab bar. The classic rule keeps it 64px up, the classic bar's height, and this bar is shorter. */
  html.v3 #studio:not(.adm-shell) .editor-col .editor-actions{bottom:calc(var(--v3-tab-bar-h) + env(safe-area-inset-bottom,0px))}
}
html.v3 .v3-title{display:none}

/* ── 14. ADMIN SHELL, PHONE (599px and narrower) ──────────────────────────────────────────────────────────── */
@media (max-width:599px){
  html.v3 .adm-top{height:56px;padding:0 12px 0 16px;gap:8px}
  /* The crumb becomes the page's title, as in the prototype; what is around the name waits for a wider screen. */
  html.v3 .adm-top .v3-crumb{flex:1;font-size:21px;letter-spacing:-.02em}
  html.v3 .adm-top .v3-crumb :is(.v3-lead,.v3-tail){display:none}
  /* A white button in Needs you carries no blue shadow. */
  html.v3 #today-needs .needs-row.tone-red ~ .needs-row.tone-red .adm-btn:not(.ghost){box-shadow:none}
  html.v3 .adm-sp .adm-btn{min-height:44px}
  html.v3 #studio.adm-shell .adm-search{margin-left:0;width:40px;max-width:none;height:40px;padding:0;justify-content:center;border-radius:12px}
  html.v3 #studio.adm-shell .adm-search::before{width:18px;height:18px}
  html.v3 #studio.adm-shell #view-admin{padding:14px 14px 40px}
  html.v3 #studio.adm-shell .adm-head h1{font-size:21px}
  /* My page in Consultant view: the same Save bar on the same tab bar (section 13). */
  html.v3 #studio.adm-shell .editor-col .editor-actions{bottom:calc(var(--v3-tab-bar-h) + env(safe-area-inset-bottom,0px))}
}
@media (max-width:1023px){
  html.v3 .adm-top{padding:0 16px}
  html.v3 #studio.adm-shell #view-admin{padding:20px 16px 48px}
}

/* ── 15. TOAST: a white card with a coloured mark; top centre on a computer, above the tab bar on a phone ─── */
html.v3 .toast{top:calc(16px + env(safe-area-inset-top,0px));bottom:auto;transform:translateX(-50%) translateY(-10px);display:flex;align-items:center;gap:10px;
  max-width:min(440px,calc(100% - 32px));background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:13.5px;font-weight:700;box-shadow:var(--v3-toast-shadow)}
html.v3 .toast{pointer-events:none}
html.v3 body.impersonating .toast{top:calc(62px + env(safe-area-inset-top,0px))}
html.v3 .toast.show{transform:translateX(-50%) translateY(0)}
html.v3 .toast::before{content:"";width:18px;height:18px;flex:none;background:var(--royal);-webkit-mask:var(--ic-ok) center/contain no-repeat;mask:var(--ic-ok) center/contain no-repeat}
html.v3 .toast.ok,html.v3 .toast.err,html.v3 .toast.warn{background:#fff}
html.v3 .toast.ok::before{background:var(--ok)}
html.v3 .toast.err::before{background:var(--err);-webkit-mask-image:var(--ic-err);mask-image:var(--ic-err)}
html.v3 .toast.warn::before{background:var(--st-amber);-webkit-mask-image:var(--ic-warn);mask-image:var(--ic-warn)}
@media (max-width:760px){
  html.v3 body:has(#studio:not(.adm-shell):not([hidden])) .toast{top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(10px);text-align:left}
  html.v3 body:has(#studio:not(.adm-shell):not([hidden])) .toast.show{transform:translateX(-50%) translateY(0)}
}
@media (max-width:599px){
  html.v3 body:has(#studio.adm-shell:not([hidden])) .toast{top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(10px);text-align:left}
  html.v3 body:has(#studio.adm-shell:not([hidden])) .toast.show{transform:translateX(-50%) translateY(0)}
}

/* ── 16. SETTINGS > DESIGN: the switch itself. THE ONE EXCEPTION to html.v3: the switch shows in both designs (an
   admin who turned the new one off must be able to turn it back on), and only its own card is styled here. ── */
#design-card .design-modes{border:0;display:flex;flex-direction:column;gap:10px;margin:4px 0 12px;padding:0}
#design-card .design-modes label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--card)}
#design-card .design-modes label:has(input:checked){border-color:var(--royal);background:var(--v3-blue-bg,#eef4fd)}
#design-card .design-modes input{margin-top:3px;flex:none;accent-color:var(--royal)}
#design-card .design-modes b{display:block;font-size:14px;color:var(--ink)}
#design-card .design-modes span{font-size:13px;color:var(--muted)}

/* ── 17. TODAY (admin) ──────────────────────────────────────────────────────────────────────────────────────
   The page header becomes the prototype's banner (the greeting small, the count big), with two buttons that press
   what is already on the page: the first Needs you row's own button, and a jump to the Needs you list. The four
   numbers get the prototype's icon tiles; each Needs you row gets an icon for its kind (app.js tags the row) and a
   pill for its tone; Coming up reads like the prototype's Systems list. Nothing on the page is loaded differently. */
html.v3 #studio.adm-shell #view-admin:has(> #admin-page-today:not([hidden])) > #adm-head{position:relative;overflow:hidden;margin:0 0 18px;padding:26px 28px;border-radius:20px;background:var(--v3-hero);color:#fff;align-items:flex-start}
html.v3 #studio.adm-shell #view-admin:has(> #admin-page-today:not([hidden])) > #adm-head::after{content:"";position:absolute;right:-60px;bottom:-90px;width:320px;height:320px;border-radius:50%;border:40px solid var(--v3-hero-ring);pointer-events:none}
html.v3 #studio.adm-shell #view-admin:has(> #admin-page-today:not([hidden])) > #adm-head #adm-title{font-size:13px;font-weight:600;line-height:1.45;letter-spacing:0;color:var(--v3-hero-hi)}
html.v3 #studio.adm-shell #view-admin:has(> #admin-page-today:not([hidden])) > #adm-head #adm-blurb{margin:4px 0 0;max-width:640px;font-size:26px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:#fff}
html.v3 .v3-hero-acts{display:none}
html.v3 #studio.adm-shell #view-admin:has(> #admin-page-today:not([hidden])) > #adm-head .v3-hero-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;position:relative;z-index:1}
html.v3 .v3-hero-acts[hidden]{display:none}
html.v3 .v3-hero-acts button{display:inline-flex;align-items:center;gap:7px;min-height:38px;max-width:100%;padding:0 15px;border-radius:11px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v3 .v3-hero-go{background:#fff;color:var(--navy);border:1px solid transparent}
html.v3 .v3-hero-go::after{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:var(--ic-arrow) center/contain no-repeat;mask:var(--ic-arrow) center/contain no-repeat}
html.v3 .v3-hero-all{background:var(--v3-glass-btn);color:#fff;border:1px solid var(--v3-glass-line)}
html.v3 .v3-hero-acts button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (min-width:1280px){ html.v3 #admin-page-today{grid-template-columns:minmax(0,1fr) 340px} }
/* The four numbers: an icon tile, the label, the number, the line under it. */
html.v3 #today-tiles .today-tile{position:relative;gap:2px;min-height:0;padding:16px 16px 14px;border-radius:var(--radius-lg)}
html.v3 #today-tiles .today-tile::before{content:"";order:-2;width:34px;height:34px;margin-bottom:10px;border-radius:10px;background:var(--v3-blue-bg)}
html.v3 #today-tiles .today-tile::after{content:"";position:absolute;left:25px;top:25px;width:17px;height:17px;background:var(--royal);-webkit-mask:var(--i,var(--ic-chart)) center/contain no-repeat;mask:var(--i,var(--ic-chart)) center/contain no-repeat}
html.v3 #today-tiles .today-tile-l{order:-1;font-size:12.5px;font-weight:600;color:var(--muted)}
html.v3 #today-tiles .today-tile-n{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
html.v3 #today-tiles .today-tile-d{margin-top:2px;font-size:12px;font-weight:500}
html.v3 #today-tiles .today-tile[aria-label^="Room for more appointments"]{--i:var(--ic-calendar)}
html.v3 #today-tiles .today-tile[aria-label^="Consultants in the outreach rotation"]{--i:var(--ic-users)}
html.v3 #today-tiles .today-tile[aria-label^="Consultants in the outreach rotation"]::before{background:var(--v3-ok-tint)}
html.v3 #today-tiles .today-tile[aria-label^="Consultants in the outreach rotation"]::after{background:var(--ok)}
html.v3 #today-tiles .today-tile[aria-label^="Network EPs"]{--i:var(--ic-trend)}
html.v3 #today-tiles .today-tile[aria-label^="Network EPs"]::before{background:var(--v3-red-tint)}
html.v3 #today-tiles .today-tile[aria-label^="Network EPs"]::after{background:var(--err)}
html.v3 #today-tiles .today-tile[aria-label^="Blog posts approved"]{--i:var(--ic-pen)}
html.v3 #today-tiles .today-tile[aria-label^="Blog posts approved"]::before{background:var(--v3-amb-tint)}
html.v3 #today-tiles .today-tile[aria-label^="Blog posts approved"]::after{background:var(--st-amber)}
html.v3 #today-tiles .today-tile:has(.skel)::before,html.v3 #today-tiles .today-tile:has(.skel)::after{display:none}
/* Needs you: an icon tile for each row, the title with its pill, the row's own button on the right. */
html.v3 #studio.adm-shell #view-admin #today-needs-card,html.v3 #studio.adm-shell #view-admin #today-coming-card{padding:16px 18px 8px}
html.v3 #studio.adm-shell #view-admin #today-needs-card > h2,html.v3 #studio.adm-shell #view-admin #today-coming-card > h2{font-size:15.5px;font-weight:700;letter-spacing:0;margin:0}
html.v3 #studio.adm-shell #view-admin #today-needs-card > p.muted,html.v3 #studio.adm-shell #view-admin #today-coming-card > p.muted{font-size:12.5px;margin:2px 0 6px}
html.v3 #today-needs .needs-row{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;column-gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--v3-line-2)}
html.v3 #today-needs .needs-row:first-child{border-top:0}
html.v3 #today-needs .needs-dot{width:38px;height:38px;border-radius:11px;background:var(--v3-red-tint);margin:0}
html.v3 #today-needs .needs-dot.is-amber{background:var(--v3-amb-tint)}
html.v3 #today-needs .needs-row::before{content:"";position:absolute;left:10px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--err);-webkit-mask:var(--i,var(--ic-err)) center/contain no-repeat;mask:var(--i,var(--ic-err)) center/contain no-repeat}
html.v3 #today-needs .needs-row.tone-amber::before{background:var(--st-amber);-webkit-mask-image:var(--i,var(--ic-clock));mask-image:var(--i,var(--ic-clock))}
html.v3 #today-needs .needs-t{font-size:13.5px;font-weight:700}
html.v3 #today-needs .needs-t::after{content:"Urgent";display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;background:var(--err-bg);color:var(--err);font-size:11.5px;font-weight:700;line-height:1.45;vertical-align:1px;white-space:nowrap}
html.v3 #today-needs .needs-row.tone-amber .needs-t::after{content:"To watch";background:var(--st-amber-bg);color:var(--st-amber)}
html.v3 #today-needs .needs-m{font-size:12.5px;margin-top:1px}
html.v3 #today-needs .needs-row .adm-btn{margin-left:0}
html.v3 #today-needs .needs-clear{font-size:12.5px;border-top-color:var(--v3-line-2)}
html.v3 [data-v3-kind="dispute"]{--i:var(--ic-scale)}
html.v3 [data-v3-kind="correction"]{--i:var(--ic-doc)}
html.v3 [data-v3-kind="outreach"]{--i:var(--ic-send)}
html.v3 [data-v3-kind="package"]{--i:var(--ic-box)}
html.v3 [data-v3-kind="reconcile"]{--i:var(--ic-unlink)}
html.v3 [data-v3-kind="unmarked"]{--i:var(--ic-clock)}
html.v3 [data-v3-kind="booking"]{--i:var(--ic-calendar)}
html.v3 [data-v3-kind="seat"]{--i:var(--ic-seat)}
html.v3 [data-v3-kind="disk"]{--i:var(--ic-drive)}
html.v3 [data-v3-kind="import"]{--i:var(--ic-import)}
html.v3 [data-v3-kind="repost"]{--i:var(--ic-repost)}
/* Coming up: a dot and one short line each, as the prototype's Systems list. */
html.v3 #today-coming .coming-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:0}
html.v3 #today-coming .needs-dot{width:8px;height:8px;margin-top:6px}
html.v3 #today-coming .needs-t{font-size:13px;font-weight:600}
html.v3 #today-coming .needs-m{font-size:12px;margin-top:1px}
@media (max-width:599px){
  html.v3 #studio.adm-shell #view-admin:has(> #admin-page-today:not([hidden])) > #adm-head{padding:16px;border-radius:18px;margin-bottom:12px}
  html.v3 #studio.adm-shell #view-admin:has(> #admin-page-today:not([hidden])) > #adm-head::after{display:none}
  html.v3 #studio.adm-shell #view-admin:has(> #admin-page-today:not([hidden])) > #adm-head #adm-title{font-size:12.5px}
  html.v3 #studio.adm-shell #view-admin:has(> #admin-page-today:not([hidden])) > #adm-head #adm-blurb{font-size:17px}
  html.v3 #studio.adm-shell #view-admin:has(> #admin-page-today:not([hidden])) > #adm-head .v3-hero-acts{margin-top:12px}
  html.v3 .v3-hero-acts button{min-height:44px}
  html.v3 .v3-hero-acts .v3-hero-all{display:none}
  html.v3 #today-needs .needs-row{grid-template-columns:34px minmax(0,1fr);row-gap:8px;align-items:start}
  html.v3 #today-needs .needs-dot{width:34px;height:34px;border-radius:10px}
  html.v3 #today-needs .needs-row::before{left:8px;top:21px;margin-top:0;width:18px;height:18px}
  html.v3 #today-needs .needs-row .adm-btn{grid-column:2;justify-self:start;margin-left:0}
}
@media (forced-colors:active){ html.v3 #adm-head::after,html.v3 #today-needs .needs-row::before,html.v3 #today-tiles .today-tile::after,html.v3 #today-tiles .today-tile::before,html.v3 .v3-hero-go::after,html.v3 #today-needs .needs-t::after{display:none} }

/* ── 18. PPA > MEETINGS (admin): All meetings, Reconciliation, the meeting's panel ──────────────────────────
   The prototype's Meetings screen. All meetings is one card: its title and help, the filters as the card's
   toolbar, the meetings as the prototype's list rows, the pager along its foot. The table is still the table:
   every column, the row's own button and a click anywhere on the row; its header row is kept for screen
   readers. A row reads: a face and the prospect, the qualification under the name; the consultant with a
   face; the date, with whether they showed under it; the status; a chevron. The rules below place the cells
   by their position (When, Consultant, Prospect, Showed, Qualification, Status, as loadPpaMeetingsAdmin
   draws them; test-design-switch pins that order). The meeting's panel, and what opens from it (Record a
   dispute, Restore canceled meeting), read like the prototype's: a face by the name, the facts in one
   bordered list, the form, the buttons along the foot. From 1360px the page makes room for the panel, so the open row stays in view (marked, as in the
   prototype); narrower, the panel lies over the lightly dimmed list. A click beside the panel still closes
   it. On a phone the meetings are one list in the card, the two filters are chips, and the panel is a sheet
   from the bottom. Faces come from the names on screen (app.js, PPA MEETINGS); nothing is loaded
   differently. The prototype's four stat cards over the list need reads the Hub does not make: left out. */
html.v3{
  --v3-mtg-hover:#f8f9fc; --v3-mtg-chev:#b2bacb; --v3-mtg-dim:rgba(11,28,62,.18);
  --v3-mtg-amb-line:#f1dca6; --v3-mtg-ok-line:#cbe9da; --v3-mtg-err-line:#f4cdc9;
  --v3-mtg-ok:#13704a; --v3-mtg-err:#b92a24;
  --v3-mtg-sheet-top:96px;
}
/* The card: no padding of its own, so the toolbar, the rows and the pager run edge to edge. */
html.v3 #studio.adm-shell #view-admin #ppa-meetings-card{padding:0;overflow:hidden}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .admin-head{padding:16px 18px 0}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .admin-head + p.muted{margin:2px 18px 14px;font-size:12.5px}
/* The filters, as the card's toolbar. */
html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .ppa-filters{margin:0;padding:12px 14px;gap:6px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .ppa-filters .ppa-select{height:36px;padding:0 10px;border-width:1px;border-radius:10px;font-size:13px}
/* The two choices of rows on the first line, the consultant and the dates together on the next (the order a
   keyboard and a screen reader meet them is unchanged). */
html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .ppa-filters > .seg{order:1}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .ppa-filters::after{content:"";order:2;flex:1 1 100%;height:0}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .ppa-filters > .ppa-select{order:3}
/* The rows. The table keeps its header row for screen readers; the eye gets the prototype's list. */
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid{display:block;width:100%;border:0}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody{display:block}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(128px,.6fr) minmax(112px,.55fr) 14px;
  grid-template-areas:"pro who when st chev" "sub who sh st chev";column-gap:14px;align-items:center;min-height:58px;padding:10px 16px 10px 58px;border-top:1px solid var(--v3-line-2)}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr:first-child{border-top:0}
/* A row with nothing under its names: one line, in the middle. */
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr:has(> td:nth-child(4):empty):has(> td:nth-child(5):empty){grid-template-areas:"pro who when st chev"}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td{display:block;min-width:0;padding:0;border:0;background:transparent;font-size:13px;line-height:1.45;color:var(--ink);overflow-wrap:break-word}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(1){grid-area:when;align-self:end;white-space:normal}
/* A name longer than its column breaks inside a word rather than running into the date (anywhere, not
   break-word: the consultant's name sits in a flex box, whose width only "anywhere" lets shrink). */
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(2){grid-area:who;display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;white-space:normal;overflow-wrap:anywhere}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(3){grid-area:pro;align-self:end;font-size:13.5px;font-weight:700;overflow-wrap:anywhere}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(4){grid-area:sh;align-self:start;font-size:12px;color:var(--muted)}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(4):not(:empty)::before{content:"Showed ";content:"Showed " / ""}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(5){grid-area:sub;align-self:start;font-size:12px;color:var(--muted)}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(6){grid-area:st;justify-self:start}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr:has(> td:nth-child(4):empty):has(> td:nth-child(5):empty) > td{align-self:center}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr:has(> td:nth-child(4):empty):has(> td:nth-child(5):empty) > td:is(:nth-child(4),:nth-child(5)){display:none}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr::after{content:"";grid-area:chev;width:14px;height:14px;background:var(--v3-mtg-chev);-webkit-mask:var(--ic-chevright) center/contain no-repeat;mask:var(--ic-chevright) center/contain no-repeat}
/* The faces: the prospect's in the row's margin, the consultant's before the name. The name is right beside each, so
   screen readers are given nothing for it (the content after the slash). */
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(3)[data-v3-face]::before{content:attr(data-v3-face);content:attr(data-v3-face) / "";position:absolute;left:16px;top:50%;width:32px;height:32px;margin-top:-16px;
  border-radius:50%;display:grid;place-items:center;background:var(--v3-face,var(--v3-face-7));color:#fff;font-size:11px;font-weight:700;line-height:1;letter-spacing:0}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(2)[data-v3-face]::before{content:attr(data-v3-face);content:attr(data-v3-face) / "";flex:none;width:26px;height:26px;
  border-radius:50%;display:grid;place-items:center;background:var(--v3-face,var(--v3-face-7));color:#fff;font-size:10px;font-weight:700;line-height:1;letter-spacing:0}
/* From 600 to 699px the consultant's column is too narrow for a face and a name: the name keeps the room. */
@media (min-width:600px) and (max-width:699px){
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(2)[data-v3-face]::before{content:none}
}
/* A row under the pointer, the row whose panel is open (app.js marks it), and the row's button in focus. */
@media (hover:hover){ html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr:hover{background:var(--v3-mtg-hover)} }
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr[data-v3-open]{background:var(--v3-blue-bg);box-shadow:inset 3px 0 0 var(--royal)}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr:has(.row-link:focus-visible){box-shadow:inset 0 0 0 2px var(--royal-2)}
/* Nothing to list, loading, or a load that failed. */
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > p{margin:0;padding:40px 24px;text-align:center;font-size:13.5px}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > .skel{padding:16px 18px}
/* The pager along the foot: where you are on the left, Previous and Next on the right. */
html.v3 #studio.adm-shell #view-admin #ppa-meetings-pager{margin:0;padding:10px 16px;gap:8px;border-top:1px solid var(--line)}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-range{order:-1;margin-right:auto;font-size:12.5px;font-variant-numeric:tabular-nums}

/* Reconciliation, above: the same card, its findings in the prototype's tinted boxes, the tracker fold with a
   chevron. The quiet line (nothing adrift) is the classic rule's, only spaced like the cards. */
html.v3 #studio.adm-shell #view-admin #ppa-recon-card{padding:16px 18px 18px}
html.v3 #studio.adm-shell #view-admin #ppa-recon-card.recon-quiet{padding-top:12px;padding-bottom:12px}
html.v3 #studio.adm-shell #view-admin #ppa-recon-card > .admin-head + p.muted{margin:2px 0 14px;font-size:12.5px}
html.v3 #ppa-recon-card .recon-quiet-line > .muted{font-size:13px}
html.v3 :is(#ppa-recon-card,.adm-sp:has(.ppa-edit-panel)) :is(.ppa-recon-ok,.ppa-recon-warn,.ppa-recon-bad){padding:11px 14px;border-radius:12px;border:1px solid var(--v3-mtg-amb-line);background:var(--st-amber-bg);color:var(--ink);font-size:13px;font-weight:700;line-height:1.45}
html.v3 :is(#ppa-recon-card,.adm-sp:has(.ppa-edit-panel)) .ppa-recon-ok{border-color:var(--v3-mtg-ok-line);background:var(--ok-bg)}
html.v3 :is(#ppa-recon-card,.adm-sp:has(.ppa-edit-panel)) .ppa-recon-bad{border-color:var(--v3-mtg-err-line);background:var(--err-bg)}
html.v3 :is(#ppa-recon-card,.adm-sp:has(.ppa-edit-panel)) :is(.ppa-recon-ok,.ppa-recon-warn,.ppa-recon-bad) .muted{margin-top:3px;font-size:12.5px;font-weight:500;color:var(--muted)}
html.v3 #ppa-recon-card .ppa-recon-go{margin-top:12px}
html.v3 #ppa-recon-card .ppa-recon-fold{margin-top:12px}
html.v3 #ppa-recon-card .ppa-recon-fold > summary{list-style:none;padding:6px 0;border-radius:8px;font-size:13.5px}
html.v3 #ppa-recon-card .ppa-recon-fold > summary::-webkit-details-marker{display:none}
html.v3 #ppa-recon-card .ppa-recon-fold > summary::before{content:"";display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-3px;background:currentColor;transition:transform .15s;
  -webkit-mask:var(--ic-chevright) center/contain no-repeat;mask:var(--ic-chevright) center/contain no-repeat}
html.v3 #ppa-recon-card .ppa-recon-fold[open] > summary::before{transform:rotate(90deg)}
html.v3 #ppa-recon-card .ppa-recon-fold > summary:focus-visible{outline:2px solid var(--royal-2);outline-offset:2px}
@media (min-width:600px){
  html.v3 #studio.adm-shell #view-admin #ppa-recon-card .ppa-recon-table{margin-top:8px;border:1px solid var(--line);border-radius:12px}
  /* The header still sticks under the top bar as the rows scroll by (styles.css: the header sticks at every
     width), on the card's white; the box clips it to its rounded corners without becoming a scroll box (clip,
     not hidden, so the header can still stick). A table too wide for the box scrolls inside it, as before. */
  html.v3 #studio.adm-shell #view-admin #ppa-recon-card .ppa-recon-table:not(.tw-box){overflow:clip}
  html.v3 #studio.adm-shell #view-admin #ppa-recon-card .ppa-recon-table table.grid th{padding:9px 12px;border-bottom:1px solid var(--line);font-size:11px;background:var(--card)}
  html.v3 #studio.adm-shell #view-admin #ppa-recon-card .ppa-recon-table table.grid td{padding:10px 12px;border-bottom:1px solid var(--v3-line-2)}
  html.v3 #studio.adm-shell #view-admin #ppa-recon-card .ppa-recon-table table.grid tr:last-child td{border-bottom:0}
}
@media (min-width:600px) and (hover:hover){ html.v3 #studio.adm-shell #view-admin #ppa-recon-card .ppa-recon-table table.grid tr:hover td{background:var(--v3-mtg-hover)} }

/* The meeting's panel, Record a dispute and Restore canceled meeting (all carry the .ppa-edit-panel form). */
html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-head > div[data-v3-face]{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:11px;align-items:center;min-width:0}
html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-head > div[data-v3-face]::before{content:attr(data-v3-face);content:attr(data-v3-face) / "";grid-row:1 / span 2;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--v3-face,var(--v3-face-7));color:#fff;font-size:14px;font-weight:700;line-height:1;letter-spacing:0}
html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-head > div[data-v3-face] > *{grid-column:2;min-width:0}
/* The facts, as one bordered list: the label on the left, the value on the right. */
html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-body > dl{gap:0;border:1px solid var(--line);border-radius:12px}
html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-body > dl > :is(dt,dd){padding:9px 12px;border-top:1px solid var(--v3-line-2)}
html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-body > dl > :is(dt,dd):nth-child(-n+2){border-top:0}
html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-body > dl > dt{padding-right:0;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-body > dl > dd{font-size:13px;font-weight:600;color:var(--ink);text-align:right}
/* "unassigned" by the source: the classic amber reads 2.71:1 on its tint, this one 4.63:1, as "No package" on the row. */
html.v3 .adm-sp:has(.ppa-edit-panel) .ppa-ur{background:var(--st-amber-bg);color:var(--st-amber)}
/* "calendly" by the source, and "Disputed" on a row: the Hub's green reads 3.1:1 on its tint and its red 4.23:1. */
html.v3 .adm-sp:has(.ppa-edit-panel) .pill.active{color:var(--v3-mtg-ok)}
html.v3 #studio.adm-shell #view-admin #ppa-meetings-list .st-red{color:var(--v3-mtg-err)}
/* Correct the feedback: the prototype's questions and fields. Save keeps its place at the end of the form. */
html.v3 .adm-sp .ppa-edit.ppa-edit-panel{margin-top:20px;gap:14px}
html.v3 .adm-sp .ppa-edit-panel > .adm-sp-h{margin:0;font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
html.v3 .adm-sp .ppa-edit-panel label{gap:8px;font-size:13px;font-weight:700;color:var(--ink)}
html.v3 .adm-sp .ppa-edit-panel label.checkbox{gap:9px;font-weight:600}
html.v3 .adm-sp .ppa-edit-panel .ppa-input{border-width:1px;border-radius:11px;padding:9px 12px;font-size:13.5px;font-weight:400}
html.v3 .adm-sp .ppa-edit-panel :is(select.ppa-input,input.ppa-input){height:40px;padding-top:0;padding-bottom:0}
html.v3 .adm-sp .ppa-edit-panel textarea.ppa-input{min-height:62px;line-height:1.45}
html.v3 .adm-sp .ppa-edit-panel .ppa-edit-save{align-self:flex-end;min-height:38px;padding:0 16px;border-radius:11px;font-size:13.5px;box-shadow:var(--v3-btn-shadow)}
/* Record a dispute: its two fields, the billed box, and Approve and Reject, still exactly alike. */
html.v3 .adm-sp .ppa-rec-disp > p.muted{font-size:12.5px;line-height:1.5}
html.v3 .adm-sp .ppa-rec-disp label > span{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
html.v3 .adm-sp .ppa-rec-disp .ppa-req{font-size:11px;letter-spacing:0;text-transform:none}
html.v3 .adm-sp .ppa-rec-disp .ppa-rec-billed .checkbox{margin-top:10px}
html.v3 .adm-sp .ppa-rec-disp .decide-pair{gap:10px;margin-top:0}
html.v3 .adm-sp .ppa-rec-disp .btn-decide{min-width:120px;height:40px;border-width:1px;border-radius:11px;font-size:13.5px}
/* The buttons along the foot: the prototype's size. */
html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-actions .adm-btn{min-height:38px;padding:0 15px;border-radius:11px;font-size:13.5px}
/* From 1360px the page makes room for the panel (the list beside it, as in the prototype), and from 1600px for
   the wider Record a dispute; narrower, the panel lies over the list, lightly dimmed. The layer that catches a
   click beside the panel is there either way. Only the right side makes room: the left edge stays where the
   centred page had it (0 below 1560px), so the list does not jump sideways when a panel opens. */
@media (min-width:600px) and (max-width:1359px){
  html.v3 body:has(> .adm-sp .ppa-edit-panel) > .adm-sp-ov{background:var(--v3-mtg-dim)}
}
@media (min-width:1360px) and (max-width:1599px){
  html.v3 body:has(> .adm-sp.wide .ppa-edit-panel) > .adm-sp-ov{background:var(--v3-mtg-dim)}
}
@media (min-width:1360px){
  html.v3 body:has(> .adm-sp:not(.wide) .ppa-edit-panel) #studio.adm-shell #view-admin:has(> #admin-page-ppa-meetings:not([hidden])){margin-left:max(0px,calc((100% - 1320px) / 2));margin-right:404px}
}
@media (min-width:1600px){
  html.v3 body:has(> .adm-sp.wide .ppa-edit-panel) #studio.adm-shell #view-admin:has(> #admin-page-ppa-meetings:not([hidden])){margin-left:max(0px,calc((100% - 1320px) / 2));margin-right:564px}
}

/* On a phone (599px and narrower). */
@media (max-width:599px){
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .admin-head{padding:14px 14px 0}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .admin-head + p.muted{margin:4px 14px 0}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .m-how-link{margin:0 14px}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .ppa-filters{margin-top:8px;padding:12px 14px 14px;gap:8px}
  /* The two filters as the prototype's chips: white, the chosen one navy, each with a 44px touch area. */
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .ppa-filters > .seg{width:100%;padding:0;gap:8px 6px;background:transparent}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .ppa-filters > .seg > .seg-btn{position:relative;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--v3-body);font-size:13px;box-shadow:none}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .ppa-filters > .seg > .seg-btn::before{content:"";position:absolute;inset:-4px 0}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .ppa-filters > .seg > .seg-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
  /* From and To side by side when both fit a whole date (about 145px each at 16px), one per line when not. */
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .ppa-filters > .ppa-select{flex:1 1 150px;min-width:0;font-size:16px}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-card > .ppa-filters > select.ppa-select{flex-basis:100%}
  /* The rows: one list in the card. The name and the status, then the consultant and the date, then the answer. */
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:0;width:100%;min-height:0;margin:0;padding:11px 14px 11px 56px;border:0;border-top:1px solid var(--v3-line-2);border-radius:0;background:transparent}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr:first-child{border-top:0}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:empty{display:none}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(3){order:1;flex:1 1 0%;min-width:50%;font-size:14px}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(6){order:2;flex:none;margin-left:8px;align-self:center}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(6)::before{content:none}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr::before{content:"";order:3;flex:1 1 100%;height:0}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(2){order:4;display:block;flex:none;font-size:12.5px;font-weight:500;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(2)::before,
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(2)[data-v3-face]::before{content:none}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(1){order:5;flex:none;font-size:12.5px;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(1)::before{content:"\b7";content:"\b7" / "";display:inline;margin:0 6px;font-size:12.5px;font-weight:500;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(1) .row-link{font-weight:500;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr::after{order:6;flex:1 1 100%;width:auto;height:0;background:none;-webkit-mask:none;mask:none}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(4){order:7;flex:none}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(4)::before{display:inline;font-size:12px;font-weight:500;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(5){order:8;flex:none}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(5)::before{content:"\b7";content:"\b7" / "";display:inline;margin:0 6px;font-size:12px;font-weight:500;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(4):empty + td:nth-child(5)::before{content:none}
  /* A meeting with no consultant (its Calendly host is nobody's seat): the date starts the line, with no dot. */
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr:has(> td:nth-child(2):empty) > td:nth-child(1)::before{content:none}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(3)[data-v3-face]::before{left:14px;width:30px;height:30px;margin-top:-15px}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-pager{padding:10px 14px}
  /* Reconciliation's tracker fold: a 44px touch target, as every other control here. */
  html.v3 #ppa-recon-card .ppa-recon-fold > summary{min-height:44px;padding:12px 0}
  /* The panel is a sheet from the bottom, under the page's title, across the whole width (the classic panel is
     460px, 560px for Record a dispute, so from 461px it would leave the list live beside it). The layer that
     closes it on a tap beside it covers what shows above the sheet (and a little under its corners), so a tap
     anywhere off the sheet still closes it, at every phone width. */
  html.v3 .adm-sp:has(.ppa-edit-panel){top:calc(var(--v3-mtg-sheet-top) + env(safe-area-inset-top,0px));left:0;width:auto;padding-top:0;border-radius:24px 24px 0 0;box-shadow:var(--v3-sheet-shadow)}
  html.v3 body:has(> .adm-sp .ppa-edit-panel) > .adm-sp-ov{bottom:auto;height:calc(var(--v3-mtg-sheet-top) + 24px + env(safe-area-inset-top,0px));background:var(--v3-scrim)}
  html.v3 .adm-sp:has(.ppa-edit-panel) > .adm-sp-head{position:relative;padding:24px 12px 14px 16px}
  html.v3 .adm-sp:has(.ppa-edit-panel) > .adm-sp-head::before{content:"";position:absolute;top:9px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:5px;background:var(--v3-hover-line)}
  html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-close{min-width:44px;min-height:44px}
  html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-head > div[data-v3-face]{grid-template-columns:42px minmax(0,1fr);column-gap:10px}
  html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-head > div[data-v3-face]::before{width:42px;height:42px;font-size:13px}
  html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-body{padding:14px 16px 18px}
  html.v3 .adm-sp:has(.ppa-edit-panel):not(:has(> .adm-sp-actions)) .adm-sp-body{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-actions{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  html.v3 .adm-sp:has(.ppa-edit-panel) .adm-btn{min-height:44px}
  /* The foot's buttons too (the computer's rule above is more specific than the line before this one). */
  html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-actions .adm-btn{min-height:44px}
  html.v3 .adm-sp .ppa-edit-panel :is(select.ppa-input,input.ppa-input){height:44px}
  html.v3 .adm-sp .ppa-edit-panel .ppa-input{font-size:16px}
  html.v3 .adm-sp .ppa-edit-panel .ppa-edit-save{align-self:stretch;min-height:48px;border-radius:14px;font-size:15px;font-weight:800}
  html.v3 .adm-sp .ppa-edit-panel label.checkbox{min-height:44px;align-items:center}
  /* The two answers, in Record a dispute and in Restore canceled meeting: side by side, each a 44px tap. */
  html.v3 .adm-sp :is(.ppa-rec-disp,.ppa-restore) .btn-decide{flex:1 1 0;min-width:0;height:44px}
}
@media (prefers-reduced-motion:reduce){ html.v3 #ppa-recon-card .ppa-recon-fold > summary::before{transition:none} }
/* Forced colours paint no backgrounds: the faces go (the names stay), the chevrons are drawn in the text colour. */
@media (forced-colors:active){
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr > td:nth-child(n)[data-v3-face]::before,html.v3 .adm-sp:has(.ppa-edit-panel) .adm-sp-head > div[data-v3-face]::before{display:none}
  html.v3 #studio.adm-shell #view-admin #ppa-meetings-list > table.grid > tbody > tr::after,html.v3 #ppa-recon-card .ppa-recon-fold > summary::before{forced-color-adjust:none;background:CanvasText}
}

/* ── 19. REPOST (consultant; an admin's own from Consultant view, and Open as) ─────────────────────────────────
   The prototype's Repost screen over the page the Hub already draws: loadRepost's five fixed places in #rp-root,
   always in this order (LinkedIn, How you repost, Phone notifications, To repost, History). The page header loses
   its card; each post waiting is a card of its own, the admin's note its title; on a computer, while there is a
   queue, LinkedIn, How you repost and Phone notifications stand in a column on the right (floated, so neither
   column waits on the other's height). The order in the page, heard and tabbed through, stays the classic one.
   Points, streaks and the leaderboard are the prototype's only (Mario, 31 Oct 2026).
   NEVER RESTYLED HERE, because they are how the post works: the post's box (.rp-post) and LinkedIn's frame keep
   their sizes and states (504px wide at most off a phone, the screen less RP_PHONE_CHROME's 84px on one, as the
   heights app.js measured for them assume, a waiting frame never display:none); Repost and Skip stay inside
   .rp-actions (the double tap guard disables what is in there). */
html.v3{
  --v3-rp-note-line:#d6e3f8; --v3-rp-ok-text:#177a50; --v3-rp-amb-text:#835a00; --v3-rp-err-text:#b42a24;
  --ic-rp-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17H7A5 5 0 0 1 7 7h2'/%3E%3Cpath d='M15 7h2a5 5 0 1 1 0 10h-2'/%3E%3Cline x1='8' x2='16' y1='12' y2='12'/%3E%3C/svg%3E");
  --ic-rp-out:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  --ic-rp-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 7 17l-5-5'/%3E%3Cpath d='m22 10-7.5 7.5L13 16'/%3E%3C/svg%3E");
}
/* The page: one column as wide as a post card; on a computer with a queue, the posts and a column on the right.
   At 1180px and wider the page is always the two columns' width, so its title stands in the same place before and
   after the posts arrive (and after a Disconnect); with no queue (loading, not connected, an error) the one column
   keeps a post card's width under it. */
html.v3 #view-repost.wrap{max-width:588px;gap:18px}
html.v3 #view-repost > .rp-head{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
html.v3 #view-repost > .rp-head h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.45}
html.v3 #view-repost > .rp-head p{margin:0;font-size:13.5px;line-height:1.5}
html.v3 #view-repost #rp-root{gap:14px}
@media (min-width:1180px){
  html.v3 #view-repost.wrap{max-width:928px}
  html.v3 #view-repost #rp-root:not(:has(> [data-rp-sec="queue"] > section)){max-width:540px}
  html.v3 #view-repost #rp-root:has(> [data-rp-sec="queue"] > section){display:flow-root}
  html.v3 #view-repost #rp-root:has(> [data-rp-sec="queue"] > section) > :is([data-rp-sec="connect"],[data-rp-sec="mode"],[data-rp-sec="push"]) > *{float:right;clear:right;width:320px;margin:0 0 14px}
  html.v3 #view-repost #rp-root:has(> [data-rp-sec="queue"] > section) > :is([data-rp-sec="queue"],[data-rp-sec="history"]) > *{margin:0 340px 14px 0}
}
/* The cards beside (or above) the posts: the prototype's settings cards. */
html.v3 #view-repost .rp-card.pad{padding:18px}
html.v3 #view-repost .rp-card h2{margin:0 0 4px;font-size:15px;font-weight:700;letter-spacing:0;line-height:1.4}
html.v3 #view-repost .rp-card:not([data-rp-queue]) > p{margin:0 0 10px;font-size:13px;line-height:1.5}
html.v3 #view-repost .rp-card:not([data-rp-queue]) > p.rp-small{font-size:12px}
html.v3 #view-repost .rp-actions{gap:8px;margin-top:0}
html.v3 #view-repost .rp-actions .btn.btn-compact{height:38px;padding:0 15px;border-radius:11px;font-size:13.5px;font-weight:700}
html.v3 #view-repost :is(.rp-actions,.rp-banner) .btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-size:12.5px;font-weight:600;text-decoration:none}
html.v3 #view-repost :is(.rp-actions,.rp-banner) .btn-ghost:hover{background:var(--v3-gray);border-color:var(--v3-hover-line);color:var(--ink)}
html.v3 #view-repost :is(.rp-actions,.rp-banner) .btn-ghost:disabled{opacity:.55;cursor:default;background:var(--card)}
html.v3 #view-repost .rp-actions .btn-ghost[data-rp-disconnect]{color:var(--err)}
html.v3 #view-repost .rp-card a.btn.rp-connect{margin:2px 0 10px}
/* LinkedIn: an icon tile for the connection's state, "Connected" beside the heading while it is, the two buttons. */
html.v3 #view-repost [data-rp-sec="connect"] > .rp-card.pad{position:relative;min-height:74px;padding-left:68px}
html.v3 #view-repost [data-rp-sec="connect"] > .rp-card::before{content:"";position:absolute;left:18px;top:18px;width:38px;height:38px;border-radius:11px;background:var(--v3-gray)}
html.v3 #view-repost [data-rp-sec="connect"] > .rp-card::after{content:"";position:absolute;left:28px;top:28px;width:18px;height:18px;background:var(--v3-body);-webkit-mask:var(--ic-rp-link) center/contain no-repeat;mask:var(--ic-rp-link) center/contain no-repeat}
html.v3 #view-repost [data-rp-sec="connect"] > .rp-card:has([data-rp-disconnect])::before{background:var(--v3-ok-tint)}
html.v3 #view-repost [data-rp-sec="connect"] > .rp-card:has([data-rp-disconnect])::after{background:var(--ok)}
html.v3 #view-repost [data-rp-sec="connect"] > .rp-card:has(.rp-banner.bad)::before{background:var(--v3-red-tint)}
html.v3 #view-repost [data-rp-sec="connect"] > .rp-card:has(.rp-banner.bad)::after{background:var(--err)}
html.v3 #view-repost [data-rp-sec="connect"] > .rp-card:is(:has(.rp-banner.bad),:has(.rp-connect))::after{-webkit-mask-image:var(--ic-unlink);mask-image:var(--ic-unlink)}
html.v3 #view-repost [data-rp-sec="connect"] h2{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
html.v3 #view-repost [data-rp-sec="connect"] > .rp-card:has([data-rp-disconnect]):not(:has(.rp-banner.bad)) > h2::after{content:"Connected";padding:2px 9px;border-radius:999px;background:var(--v3-ok-tint);color:var(--v3-rp-ok-text);font-size:11.5px;font-weight:700;line-height:1.45}
html.v3 #view-repost [data-rp-sec="connect"] p{color:var(--v3-body)}
html.v3 #view-repost [data-rp-sec="connect"] p.muted{color:var(--muted)}
/* The notices: LinkedIn's (ends soon, ended, reconnect, auto-repost paused) and a post's last failed try. */
html.v3 #view-repost .rp-banner{position:relative;margin:4px 0 10px;padding:10px 12px 10px 36px;border-radius:12px;font-size:12.5px;line-height:1.5}
html.v3 #view-repost .rp-banner::before{content:"";position:absolute;left:12px;top:12px;width:16px;height:16px;background:currentColor;-webkit-mask:var(--ic-warn) center/contain no-repeat;mask:var(--ic-warn) center/contain no-repeat}
html.v3 #view-repost .rp-banner.warn{color:var(--v3-rp-amb-text)}
html.v3 #view-repost .rp-banner.bad{color:var(--v3-rp-err-text)}
html.v3 #view-repost .rp-banner.bad::before{-webkit-mask-image:var(--ic-err);mask-image:var(--ic-err)}
html.v3 #view-repost .rp-banner .btn-ghost{display:flex;width:max-content;max-width:100%;margin-top:8px}
/* How you repost: each way as a choice card, the chosen one blue; the auto-repost note in a blue box. */
html.v3 #view-repost .rp-modes{gap:8px;margin:6px 0 10px}
html.v3 #view-repost .rp-mode{gap:10px;padding:12px;border:1.5px solid var(--line);border-radius:12px;font-size:12.5px;line-height:1.5;color:var(--muted)}
html.v3 #view-repost .rp-mode b{font-size:13.5px;color:var(--ink)}
html.v3 #view-repost .rp-mode:has(input:checked){border-color:var(--royal);background:var(--v3-blue-bg)}
html.v3 #view-repost .rp-mode:has(input:checked) b{color:var(--royal-lo)}
html.v3 #view-repost .rp-mode:has(input:focus-visible){outline:2px solid var(--royal-2);outline-offset:2px}
html.v3 #view-repost .rp-mode input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--royal)}
html.v3 #view-repost .rp-auto-note{margin:4px 0 12px;padding:12px 14px;border:1px solid var(--v3-rp-note-line);border-radius:12px;background:var(--v3-blue-bg)}
html.v3 #view-repost .rp-auto-note p{margin:0;font-size:12.5px;color:var(--v3-body)}
html.v3 #view-repost .rp-auto-note .checkbox{font-size:13px;font-weight:600}
html.v3 #view-repost .rp-tz{max-width:none;font-size:13px;font-weight:700}
html.v3 #view-repost .rp-tz select{min-height:38px;border-radius:11px;font-size:13.5px}
/* To repost: the heading on the page, then every post as a card: FranNet's round face, the admin's note as the title
   with the day FranNet posted it under it, the post, the comment, then Repost and Skip side by side. The note and the
   date are placed by grid-row on purpose: only plain text moves, so the keyboard's stops and their order are the classic
   ones, and a screen reader still hears the note after the post, where the page has it. */
html.v3 #view-repost .rp-card.pad[data-rp-queue]{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
html.v3 #view-repost .rp-card[data-rp-queue] > h2{margin:0 0 10px;font-size:15.5px}
html.v3 #view-repost .rp-card[data-rp-queue] > p.rp-small{margin:-6px 0 10px}
html.v3 #view-repost [data-rp-planned] > p{position:relative;padding:10px 14px 10px 38px;border:1px solid var(--v3-rp-note-line);border-radius:12px;background:var(--v3-blue-bg);color:var(--royal-lo)}
html.v3 #view-repost [data-rp-planned] > p::before{content:"";position:absolute;left:14px;top:11px;width:16px;height:16px;background:currentColor;-webkit-mask:var(--ic-clock) center/contain no-repeat;mask:var(--ic-clock) center/contain no-repeat}
html.v3 #view-repost .rp-item{grid-template-columns:24px minmax(0,1fr);gap:12px 10px;margin:0 0 14px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow)}
html.v3 #view-repost .rp-item > *{grid-column:1 / -1}
html.v3 #view-repost .rp-item::before{content:"FN";content:"FN" / "";grid-column:1;grid-row:1 / span 2;align-self:center;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--royal);color:#fff;font-size:9px;font-weight:700}
html.v3 #view-repost .rp-item > .rp-note{grid-column:2;grid-row:1;margin:0;font-size:14px;font-weight:700;line-height:1.35;color:var(--ink)}
html.v3 #view-repost .rp-item > .rp-item-head{grid-column:2;grid-row:2;margin-top:-10px;font-size:12px}
html.v3 #view-repost .rp-item .rp-from{font-weight:500}
html.v3 #view-repost .rp-item:not(:has(> .rp-note))::before{grid-row:1}
html.v3 #view-repost .rp-item:not(:has(> .rp-note)) > .rp-item-head{grid-row:1;align-self:center;margin-top:0;font-size:13.5px}
html.v3 #view-repost .rp-item:not(:has(> .rp-note)) .rp-from{font-weight:700;color:var(--ink)}
html.v3 #view-repost .rp-item > [data-rp-banner]:empty{display:none}
html.v3 #view-repost .rp-item .rp-banner{margin:0}
html.v3 #view-repost .rp-post{border-radius:12px}
html.v3 #view-repost .rp-backup{border-color:var(--line);border-radius:12px}
html.v3 #view-repost .rp-backup-head{font-size:13px}
html.v3 #view-repost .rp-backup-logo{border-radius:6px}
html.v3 #view-repost .rp-post .rp-backup-text{font-size:13px;color:var(--v3-body)}
html.v3 #view-repost .rp-preview .rp-post-links{gap:4px 16px;font-size:12.5px}
html.v3 #view-repost .rp-post-links a{display:inline-flex;align-items:center;gap:5px;font-weight:600;text-decoration:none}
html.v3 #view-repost .rp-post-links a:hover{text-decoration:underline}
html.v3 #view-repost .rp-post-links a::after{content:"";width:13px;height:13px;flex:none;background:currentColor;-webkit-mask:var(--ic-rp-out) center/contain no-repeat;mask:var(--ic-rp-out) center/contain no-repeat}
html.v3 #view-repost .rp-linkbtn{font-size:12.5px;color:var(--muted)}
html.v3 #view-repost :is(.rp-post-links a,.rp-linkbtn,.rp-small a,.rp-line a,[data-rp-sec="history"] td:last-child a,.rp-card h2[tabindex]):focus-visible{outline:2px solid var(--royal-2);outline-offset:2px;border-radius:4px}
html.v3 #view-repost .rp-label{margin-bottom:-6px;font-size:12.5px;font-weight:700;color:var(--ink)}
html.v3 #view-repost textarea.rp-comment{min-height:76px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:13.5px;line-height:1.45;color:var(--ink)}
html.v3 #view-repost textarea.rp-comment:focus{border-color:var(--royal-2);box-shadow:var(--ring);outline:none}
html.v3 #view-repost .rp-item > .rp-small{margin:-6px 0 0;font-size:12px;line-height:1.5}
html.v3 #view-repost .rp-item .rp-actions{flex-wrap:nowrap;margin-top:2px}
html.v3 #view-repost .rp-item .rp-actions > button{flex:1 1 0;min-width:0}
html.v3 #view-repost .rp-item .rp-actions .btn.btn-compact{height:40px}
html.v3 #view-repost .rp-item .rp-actions .btn-ghost{min-height:40px;border-radius:11px;font-size:13.5px}
html.v3 #view-repost [data-rp-empty]{position:relative;margin:0;padding:72px 24px 30px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow);text-align:center;font-size:13px}
html.v3 #view-repost [data-rp-empty]::before{content:"";position:absolute;left:calc(50% - 19px);top:22px;width:38px;height:38px;border-radius:11px;background:var(--v3-ok-tint)}
html.v3 #view-repost [data-rp-empty]::after{content:"";position:absolute;left:calc(50% - 9px);top:32px;width:18px;height:18px;background:var(--ok);-webkit-mask:var(--ic-rp-check) center/contain no-repeat;mask:var(--ic-rp-check) center/contain no-repeat}
html.v3 #view-repost .rp-card .rp-li-note{margin:0 2px;font-size:12px}
/* History: the prototype's Shared table: a quiet header, light lines, the post in bold. Both links open LinkedIn (the
   post's name FranNet's post, Posted their own repost), so each is a link's colour with the "opens elsewhere" mark that
   See it on LinkedIn has; Posted is green. Every status stays plain words: the page draws them as bare text, so a
   pill could only ever reach a linked Posted. On a phone the rows are cards (styles.css), and nothing here reaches them. */
@media (min-width:761px){
  html.v3 #view-repost [data-rp-sec="history"] > .rp-card.pad{padding:16px 0 4px}
  html.v3 #view-repost [data-rp-sec="history"] h2{margin:0;padding:0 18px 8px;font-size:15.5px}
  html.v3 #view-repost [data-rp-sec="history"] .table-wrap{margin:0}
  html.v3 #view-repost [data-rp-sec="history"] table.grid th{padding:8px 12px;border-bottom:1px solid var(--v3-line-2);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
  html.v3 #view-repost [data-rp-sec="history"] table.grid td{padding:12px;border-bottom:1px solid var(--v3-line-2);font-size:13px}
  html.v3 #view-repost [data-rp-sec="history"] table.grid :is(th,td):first-child{padding-left:18px}
  html.v3 #view-repost [data-rp-sec="history"] table.grid :is(th,td):last-child{padding-right:18px}
  html.v3 #view-repost [data-rp-sec="history"] table.grid tr:last-child td{border-bottom:0}
  html.v3 #view-repost [data-rp-sec="history"] td:first-child{font-weight:600}
  html.v3 #view-repost [data-rp-sec="history"] td:nth-child(3){color:var(--muted);font-size:12.5px}
  html.v3 #view-repost [data-rp-sec="history"] :is(.rp-line a,td:last-child a){font-weight:700;text-decoration:none}
  html.v3 #view-repost [data-rp-sec="history"] .rp-line a{color:var(--royal)}
  html.v3 #view-repost [data-rp-sec="history"] td:last-child a{color:var(--v3-rp-ok-text)}
  html.v3 #view-repost [data-rp-sec="history"] :is(.rp-line a,td:last-child a):hover{text-decoration:underline}
  /* The mark is drawn on a no-break space, not a box of its own: it stays with the last word however narrow the column. */
  html.v3 #view-repost [data-rp-sec="history"] :is(.rp-line a,td:last-child a)::after{content:"\00a0";padding-left:11px;background:currentColor;-webkit-mask:var(--ic-rp-out) right center/11px 11px no-repeat;mask:var(--ic-rp-out) right center/11px 11px no-repeat}
  html.v3 #view-repost [data-rp-sec="history"] .rp-line-first{font-size:12px}
}
/* Below 1100px the table's box scrolls sideways (styles.css), so its sticky header sticks inside that box, a top
   bar's height down, over the first rows: here it stays at the top of the table. */
@media (min-width:761px) and (max-width:1099px){ html.v3 #view-repost [data-rp-sec="history"] .table-wrap table.grid th{top:0} }
/* A phone: the title is the screen's own (the bar above it), the cards tighter, Repost the big button with Skip
   under it, and every button and link at least 44px tall. */
@media (max-width:760px){
  html.v3 #studio:not(.adm-shell) #view-repost.wrap{margin-top:6px}
  html.v3 #studio:not(.adm-shell) #view-repost > .rp-head h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
  /* 16px, so an iPhone does not zoom into the box when it is tapped. */
  html.v3 #view-repost textarea.rp-comment{font-size:16px}
  /* Every control on a consultant's phone screen is at least 44px tall (styles.css), the outline links and See it on
     LinkedIn too, and the time zone list (its 38px above would win over styles.css), in 16px so an iPhone does not
     zoom in either. */
  html.v3 #studio:not(.adm-shell) #view-repost :is(.rp-actions,.rp-banner) a.btn-ghost,html.v3 #studio:not(.adm-shell) #view-repost .rp-preview .rp-post-links > *{min-height:44px}
  html.v3 #studio:not(.adm-shell) #view-repost .rp-tz select{min-height:44px;font-size:16px}
}
@media (max-width:599px){
  html.v3 #studio.adm-shell #view-repost > .rp-head h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
  html.v3 #studio.adm-shell #view-repost .rp-tz select{min-height:44px;font-size:16px}
  html.v3 #view-repost.wrap{gap:12px}
  html.v3 #view-repost > .rp-head p{font-size:13px}
  html.v3 #view-repost #rp-root{gap:12px}
  html.v3 #view-repost .rp-card.pad{padding:16px}
  html.v3 #view-repost [data-rp-sec="connect"] > .rp-card.pad{padding-left:66px}
  html.v3 #view-repost [data-rp-sec="connect"] > .rp-card::before{left:16px;top:16px}
  html.v3 #view-repost [data-rp-sec="connect"] > .rp-card::after{left:26px;top:26px}
  html.v3 #view-repost [data-rp-sec="connect"] .rp-actions{margin-left:-50px}
  html.v3 #view-repost .rp-card:not([data-rp-queue]) .rp-actions > :is(a,button){flex:1 1 0;min-height:44px}
  html.v3 #view-repost .rp-card a.btn.rp-connect{width:calc(100% + 50px);height:46px;margin-left:-50px}
  /* LinkedIn's frame keeps the classic width on a phone, the screen less 84px (RP_PHONE_CHROME in app.js): its phone
     heights were measured on real posts from 250 to 343px of frame only, and a post taller than its box is cut off.
     14px page margin, no card around the posts, a 1px border and 27px inside make the 84px, so everything
     in the card lines up with the post; the cap only guards it. Wider needs RP_FRAME_H measured again first. */
  html.v3 #view-repost .rp-item{gap:10px 9px;margin-bottom:12px;padding:12px 27px}
  html.v3 #view-repost .rp-item .rp-post{max-width:calc(100vw - 84px)}
  html.v3 #view-repost .rp-item > .rp-item-head{margin-top:-8px}
  html.v3 #view-repost .rp-item .rp-actions{flex-direction:column;gap:0}
  html.v3 #view-repost .rp-item .rp-actions > button{flex:none;width:100%}
  html.v3 #view-repost .rp-item .rp-actions .btn.btn-compact{height:46px;border-radius:13px;font-size:15px;font-weight:800}
  html.v3 #view-repost .rp-item .rp-actions .btn-ghost{min-height:44px;border:0;background:none;color:var(--muted);font-weight:700}
  html.v3 #view-repost .rp-preview .rp-post-links > *{min-height:44px}
  html.v3 #view-repost .rp-banner .btn-ghost{min-height:44px}
}
@media (forced-colors:active){ html.v3 #view-repost :is([data-rp-sec="connect"] > .rp-card,.rp-banner,[data-rp-planned] > p,[data-rp-empty],.rp-post-links a,[data-rp-sec="history"] .rp-line a,[data-rp-sec="history"] td:last-child a)::after,html.v3 #view-repost :is([data-rp-sec="connect"] > .rp-card,.rp-banner,[data-rp-planned] > p,[data-rp-empty])::before{display:none} }

/* ── 20. CHALLENGES (consultant: #view-challenges, #chp-root) ──────────────────────────────────────────────
   The prototype's Challenges screen over the same page: the set's header becomes the prototype's blue hero (the
   points as its big number on the right, the place and Started as two tags under the words); the Tasks /
   Scoreboard / Photos switch is the prototype's segmented control; each day's tasks are one card of rows (on a
   phone, one card for every day, as the prototype's phone); the scoreboard, the photos and the task sheet are
   cards and sheets in the same style. CSS only: the page, its words, its requests and its 20 second refresh are
   the classic ones. Left out, as the Hub has no data for them: the "entries to qualify" title and bar, the next
   task hero, the streak, the short scoreboard beside the tasks (a new read), the prize card. */
html.v3{
  --v3-ch-hero-text:#d6e2f8; --v3-ch-hero-small:#cfdcf5;
  --v3-ch-phone-hero:linear-gradient(130deg,#0b1c3e,#2f6fd0);
  --v3-ch-chev:#b2bacb; --v3-ch-ok-text:#136c48; --v3-ch-live-ring:rgba(31,157,103,.2);
  --v3-ch-row-hover:#f8f9fc; --v3-ch-lb-btn:rgba(255,255,255,.12);
  --v3-ch-tile:rgba(11,28,62,.28); --v3-ch-tile-line:rgba(255,255,255,.14); --v3-ch-pulse-glow:0 0 8px rgba(185,205,242,.95);
}
/* As wide as the page column on every view (with auto margins, a column flex item would shrink to its content). */
html.v3 #chp-root{max-width:none;margin:0}
/* The hero: the prototype's banner. Its old grid of lines gives way to the soft ring. */
html.v3 .chp-hero.ppa-hero{background:var(--v3-hero);box-shadow:none;color:#fff}
html.v3 .chp-hero.ppa-hero::after{inset:auto;right:-60px;bottom:-120px;width:280px;height:280px;border-radius:50%;border:36px solid var(--v3-hero-ring);background:none;-webkit-mask-image:none;mask-image:none}
html.v3 .chp-hero .chp-eyebrow{margin:0;gap:8px;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--v3-hero-hi)}
html.v3 .chp-hero h1{margin:4px 0 0;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:#fff}
html.v3 .chp-hero .ppa-hero-sub{margin:6px 0 0;max-width:560px;font-size:13.5px;font-weight:500;line-height:1.5;color:var(--v3-ch-hero-text)}
html.v3 .chp-hero .chp-banner{margin-top:14px;max-width:560px;border-radius:12px;font-size:13px;color:var(--v3-ch-hero-text)}
html.v3 .chp-hero .chp-stat{position:relative;z-index:1}
html.v3 .chp-hero .chp-stat span{letter-spacing:0;text-transform:none}
/* Points just landed: the number glows white (the classic's light blue would read too faintly on the lighter blue).
   A drop shadow, not a text shadow: a text shadow this soft is cut off in a visible box around the number. */
html.v3 .chp-hero .chp-stat.pulse b{color:#fff;filter:drop-shadow(var(--v3-ch-pulse-glow))}
@media (min-width:761px){
  /* The words on the left; the first number big on the right (as the prototype's "+10 entries"); the others as
     two tags under the words. The numbers stay where the points celebration looks for them (#chp-stat-pts). */
  html.v3 .chp-hero.ppa-hero{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:start;padding:22px 26px 24px;margin-bottom:12px;border-radius:20px}
  html.v3 .chp-hero > :is(.chp-eyebrow,h1,.ppa-hero-sub,.chp-banner){grid-column:1 / 4}
  html.v3 .chp-hero > .chp-eyebrow{grid-row:1}
  html.v3 .chp-hero > h1{grid-row:2}
  html.v3 .chp-hero > .ppa-hero-sub{grid-row:3}
  html.v3 .chp-hero > .chp-banner{grid-row:4}
  html.v3 .chp-hero .chp-stats{display:contents}
  html.v3 .chp-hero .chp-stat:first-child{grid-column:4;grid-row:1 / span 5;align-self:center;min-width:64px;margin-left:24px;padding:0 6px 0 0;border:0;background:none;text-align:center}
  html.v3 .chp-hero .chp-stat:first-child b{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.02em}
  /* White, not the prototype's light blue: this side of the banner is its lightest, and small text must read at 4.5:1. */
  html.v3 .chp-hero .chp-stat:first-child span{display:block;margin-top:8px;font-size:11.5px;font-weight:600;text-transform:lowercase;color:#fff}
  html.v3 .chp-hero .chp-stat:not(:first-child){grid-row:5;display:inline-flex;align-items:baseline;gap:5px;align-self:start;justify-self:start;min-width:0;margin-top:16px;padding:6px 12px;border-radius:999px;border:1px solid var(--v3-glass-line);background:var(--v3-glass-btn)}
  html.v3 .chp-hero .chp-stat:nth-child(2){grid-column:1}
  html.v3 .chp-hero .chp-stat:nth-child(3){grid-column:2;margin-left:8px}
  html.v3 .chp-hero .chp-stat:not(:first-child) b{display:inline;font-size:13.5px;font-weight:700;letter-spacing:0}
  html.v3 .chp-hero .chp-stat:not(:first-child) span{font-size:12.5px;font-weight:600;color:var(--v3-ch-hero-text)}
}
@media (max-width:760px){
  /* The prototype's phone hero: a plain blue card, the three numbers in a row under the words. */
  html.v3 .chp-hero.ppa-hero{padding:16px;margin-bottom:10px;border-radius:18px;background:var(--v3-ch-phone-hero)}
  html.v3 .chp-hero.ppa-hero::after{display:none}
  html.v3 .chp-hero .chp-eyebrow{font-size:12px;color:var(--v3-ch-hero-small)}
  html.v3 .chp-hero h1{margin-top:2px;font-size:17px;line-height:1.3}
  /* White, as the intro can be 300 characters and run to the blue's light corner: white reads 4.88:1 on the lightest
     point of this blue, so no intro can fall under 4.5:1. The banner gets the tiles' dark glass, for the same reason. */
  html.v3 .chp-hero .ppa-hero-sub{font-size:12.5px;color:#fff}
  html.v3 .chp-hero .chp-banner{font-size:12.5px;background:var(--v3-ch-tile);border-color:var(--v3-ch-tile-line)}
  html.v3 .chp-hero .chp-stats{gap:8px;margin-top:12px}
  /* The tiles darken the blue under them (its light corner is behind the third), so the small labels read at 4.5:1. */
  html.v3 .chp-hero .chp-stat{padding:8px 10px;border-radius:12px;border-color:var(--v3-ch-tile-line);background:var(--v3-ch-tile)}
  html.v3 .chp-hero .chp-stat b{font-size:17px;font-weight:800}
  html.v3 .chp-hero .chp-stat span{font-size:11.5px;font-weight:600;color:var(--v3-ch-hero-small)}
}
/* The switch: the prototype's segmented control, as wide as its words on a computer; on a phone it fills the row. */
@media (min-width:761px){
  html.v3 .chp-seg{margin:0 0 12px;padding:6px 0}
  html.v3 .chp-seg .seg{display:inline-flex;width:auto}
  html.v3 .chp-seg .seg-btn{flex:none;min-height:0}
}
@media (max-width:760px){
  html.v3 .chp-seg{margin:0 0 10px;padding:0}
  html.v3 .chp-seg .seg-btn{font-size:13.5px}
}
/* A task: the prototype's row (its tile, the title, the worth in blue, how it is proved and how often). */
html.v3 .chp-task{border:0;border-top:1px solid var(--v3-line-2);border-radius:0;box-shadow:none;background:var(--card);transition:background .15s}
/* A row lights up under a mouse only: on a touch screen a tapped row would otherwise stay lit. */
html.v3 .chp-task:hover{border-color:var(--v3-line-2)}
@media (hover:hover){ html.v3 .chp-task:hover{background:var(--v3-ch-row-hover)} }
html.v3 .chp-task:focus-visible{outline:2px solid var(--royal-2);outline-offset:-2px;box-shadow:none;border-color:var(--v3-line-2);background:var(--v3-blue-bg)}
html.v3 .chp-task .chp-tile{background:var(--v3-blue-bg);color:var(--royal)}
html.v3 .chp-task.done .chp-tile{background:var(--ok-bg);color:var(--ok)}
html.v3 .chp-task.locked .chp-tile{background:var(--v3-gray);color:var(--muted)}
html.v3 .chp-task-title,html.v3 .chp-task.done .chp-task-title{color:var(--ink);font-weight:700}
html.v3 .chp-task.closed .chp-task-title{color:var(--muted)}
html.v3 .chp-task-meta{gap:0 5px;font-weight:500;color:var(--muted)}
html.v3 .chp-task .chp-pts{padding:0;border-radius:0;background:none;color:var(--royal-lo);font-size:inherit;font-weight:700}
html.v3 .chp-task.locked .chp-pts{background:none;color:var(--muted)}
/* "+10" with its unit, as the prototype's "+2 entries": the words screen readers already hear, shown. */
html.v3 .chp-task .chp-pts .sr-only{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:nowrap}
html.v3 .chp-task .chp-pts::after{content:"\00b7" / "";margin-left:5px;font-weight:500;color:var(--muted)}
html.v3 .chp-task .chp-progress{color:var(--v3-ch-ok-text)}
html.v3 .chp-task .chp-progress.locked{color:var(--muted)}
html.v3 .chp-task .chp-removed{border-radius:10px}
html.v3 .chp-task .chp-go{color:var(--v3-ch-chev)}
@media (min-width:761px){
  /* One card per day: the heading is the card's head, the tasks its rows. */
  html.v3 .chp-pane > .chp-group-h{position:relative;z-index:1;margin:14px 0 0;padding:16px 18px 10px;border:1px solid var(--line);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    background:var(--card);font-size:15.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
  html.v3 .chp-pane > .chp-group-h:first-child{margin-top:0}
  html.v3 .chp-pane > .chp-tasks{gap:0;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
  /* The row: tile, words, how far you are as a pill on the right, the chevron when it can be done. */
  html.v3 .chp-task{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;align-items:center;gap:0;padding:13px 18px}
  html.v3 .chp-task-main{display:contents}
  html.v3 .chp-task .chp-tile{grid-column:1;grid-row:1 / span 2;width:38px;height:38px;border-radius:11px}
  html.v3 .chp-task .chp-tile .chp-ic{width:18px;height:18px}
  html.v3 .chp-task-title{grid-column:2;grid-row:1;align-self:end;margin-left:14px;font-size:13.5px;line-height:1.35}
  html.v3 .chp-task-meta{grid-column:2;grid-row:2;align-self:start;margin:2px 0 0 14px;font-size:12.5px}
  html.v3 .chp-task .chp-progress{grid-column:3;grid-row:1 / span 2;justify-self:end;margin:0 0 0 12px;padding:3px 10px;border-radius:999px;background:var(--ok-bg);font-size:12px;font-weight:700;white-space:nowrap}
  html.v3 .chp-task .chp-progress.locked{background:var(--v3-gray)}
  html.v3 .chp-task .chp-progress .chp-ic{width:13px;height:13px;stroke-width:3}
  html.v3 .chp-task .chp-removed{grid-column:2 / -1;grid-row:3;margin:8px 0 0 14px}
  html.v3 .chp-task .chp-go{grid-column:4;grid-row:1 / span 2;margin-left:10px}
  html.v3 .chp-task .chp-go .chp-ic{width:18px;height:18px}
}
/* Narrow windows and upright tablets: beside the words, a long pill ("Opens Sat, Nov 21 at 12:00 AM MT") would leave
   the title a column of a few words, so it goes under them, as the classic line does. */
@media (min-width:761px) and (max-width:900px){
  html.v3 .chp-task .chp-progress{grid-column:2;grid-row:3;justify-self:start;margin:6px 0 0 14px}
  html.v3 .chp-task .chp-removed{grid-row:4}
  html.v3 .chp-task .chp-tile,html.v3 .chp-task .chp-go{grid-row:1 / span 3}
}
@media (max-width:760px){
  /* The prototype's phone: one card, a small heading over each day, the days split by a line. */
  html.v3 .chp-pane:has(> .chp-tasks){border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
  html.v3 .chp-pane > .chp-group-h{margin:0;padding:12px 12px 6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
  html.v3 .chp-pane > .chp-tasks + .chp-group-h{border-top:1px solid var(--line)}
  html.v3 .chp-pane > .chp-tasks{gap:0}
  html.v3 .chp-task{align-items:center;gap:11px;padding:11px 12px}
  html.v3 .chp-task .chp-tile{width:34px;height:34px;border-radius:10px}
  html.v3 .chp-task .chp-tile .chp-ic{width:17px;height:17px}
  html.v3 .chp-task-title{font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  html.v3 .chp-task-meta{margin-top:2px;font-size:12px}
  html.v3 .chp-task .chp-pts{color:var(--muted);font-weight:500}
  html.v3 .chp-task .chp-progress{margin-top:3px;font-size:12px;font-weight:600}
  html.v3 .chp-task .chp-progress .chp-ic{width:13px;height:13px;stroke-width:3}
  html.v3 .chp-task .chp-removed{font-size:12px}
  html.v3 .chp-task .chp-go .chp-ic{width:18px;height:18px}
}
/* Sets whose tasks open and close on their own: the closed ones fold away in their own card. */
html.v3 #chp-root .chp-closed{margin-top:14px;padding:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
html.v3 #chp-root .chp-closed > summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:14px 18px;list-style:none;font-size:15.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
html.v3 #chp-root .chp-closed > summary::-webkit-details-marker{display:none}
html.v3 #chp-root .chp-closed > summary::after{content:"";width:16px;height:16px;margin-left:auto;flex:none;background:var(--muted);-webkit-mask:var(--ic-chevdown) center/contain no-repeat;mask:var(--ic-chevdown) center/contain no-repeat;transition:transform .15s}
html.v3 #chp-root .chp-closed[open] > summary::after{transform:rotate(180deg)}
html.v3 #chp-root .chp-closed > summary:focus-visible{outline:2px solid var(--royal-2);outline-offset:-2px;box-shadow:none;border-radius:var(--radius-lg)}
html.v3 #chp-root .chp-closed .chp-group-h{margin:0;padding:8px 18px;border-top:1px solid var(--v3-line-2);background:var(--v3-warm);font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
html.v3 #chp-root .chp-closed .chp-tasks{gap:0}
@media (max-width:760px){
  html.v3 #chp-root .chp-pane:has(> .chp-tasks) > .chp-closed{margin:0;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
  html.v3 #chp-root .chp-closed > summary{min-height:48px;padding:12px;font-size:13.5px}
  html.v3 #chp-root .chp-closed .chp-group-h{padding:8px 12px;font-size:12.5px}
}
/* Nothing to show: the card says so. Only inside #chp-root: What's new draws its own empty card with this class. */
html.v3 #chp-root .chp-empty{padding:32px 22px}
html.v3 #chp-root .chp-empty .chp-tile{background:var(--v3-blue-bg);color:var(--royal);border-radius:14px}
html.v3 #chp-root .chp-empty h2{font-size:17px;font-weight:700;letter-spacing:-.01em}
/* The scoreboard: one card (the prototype's "This event"), its rows split by lines, yours tinted blue. */
html.v3 #chp-board{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
html.v3 #chp-board .chp-board-head{margin:0;padding:12px 18px 8px}
html.v3 #chp-board .chp-live{font-size:12.5px;font-weight:700;color:var(--muted)}
html.v3 #chp-board .chp-live:has(.coach-dot){color:var(--v3-ch-ok-text)}
html.v3 #chp-board .chp-live .coach-dot{background:var(--ok);box-shadow:0 0 0 4px var(--v3-ch-live-ring);animation:pulse 2.4s ease-in-out infinite}
html.v3 #chp-board .chp-board{gap:0;padding:0 18px 8px}
html.v3 #chp-board .chp-row{min-height:0;gap:10px;padding:8px 0;border:0;border-top:1px solid var(--v3-line-2);border-radius:0;background:none;box-shadow:none}
html.v3 #chp-board .chp-row:first-child,html.v3 #chp-board .chp-row.you,html.v3 #chp-board .chp-row.you + .chp-row{border-top-color:transparent}
html.v3 #chp-board .chp-row.you{margin:2px -8px;padding:8px;border-radius:10px;background:var(--v3-blue-bg)}
html.v3 #chp-board .chp-rank{width:22px;height:auto;border-radius:0;background:none;place-items:center start;font-size:13px;font-weight:800;color:var(--muted)}
html.v3 #chp-board .chp-row.you .chp-rank{color:var(--royal-lo)}
html.v3 #chp-board .chp-person{width:28px;height:28px;font-size:10.5px;font-weight:700;background:var(--v3-blue-bg);color:var(--royal-lo)}
html.v3 #chp-board .chp-row.you .chp-person{background:var(--royal);color:#fff}
html.v3 #chp-board .chp-name{font-size:13.5px;font-weight:500}
html.v3 #chp-board .chp-row.you .chp-name{font-weight:700}
html.v3 #chp-board .chp-row-pts{font-size:13.5px;font-weight:700}
html.v3 #chp-board .chp-row-pts small{font-size:11px;font-weight:600;color:var(--muted)}
html.v3 #chp-board .chp-gap{padding:3px 0 5px;border-top:1px solid var(--v3-line-2);font-size:12px;line-height:1;letter-spacing:.25em;color:var(--v3-faint)}
html.v3 #chp-board .chp-board-note{margin:0;padding:12px 18px;border-top:1px solid var(--v3-line-2);background:var(--v3-warm);font-size:13px;font-weight:600;line-height:1.5;color:var(--ink)}
html.v3 .chp-board-pre{font-size:13px;color:var(--muted)}
@media (min-width:761px){
  html.v3 #chp-board .chp-board-head .seg-btn{min-height:0;padding:6px 11px}
}
@media (max-width:760px){
  html.v3 #chp-board .chp-board-head{padding:10px 14px 6px}
  html.v3 #chp-board .chp-board{padding:0 14px 6px}
  html.v3 #chp-board .chp-board-note{padding:12px 14px;font-size:12.5px}
}
/* The photos: cards in the same style; Show older photos is the prototype's outline button. */
html.v3 .chp-feed-note{font-size:12.5px;color:var(--muted)}
html.v3 .chp-post{border-color:var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
html.v3 .chp-post:focus-visible{outline:2px solid var(--royal-2);outline-offset:2px;box-shadow:var(--shadow);border-color:var(--line)}
html.v3 .chp-post-meta{gap:10px;padding:10px 14px 12px}
html.v3 .chp-post-meta .chp-person{width:28px;height:28px;font-size:10.5px;font-weight:700;background:var(--v3-blue-bg);color:var(--royal-lo)}
html.v3 .chp-post-txt b{font-size:13.5px;font-weight:700}
html.v3 .chp-post time{font-size:12px;font-weight:500}
html.v3 .chp-more.btn-ghost{min-height:40px;padding:0 15px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink);font-size:13.5px;font-weight:600}
html.v3 .chp-more.btn-ghost:hover{border-color:var(--v3-hover-line);background:var(--v3-gray)}
@media (max-width:760px){ html.v3 .chp-more.btn-ghost{min-height:44px} }
/* A finger, on any screen wider than the phone layout: the classic 44px, whatever the tablet's size (as the prototype,
   which keys this on a coarse pointer). The compact switches are for a mouse. Below the rules it overrides. */
@media (min-width:761px) and (pointer:coarse){
  html.v3 .chp-seg .seg-btn,html.v3 #chp-board .chp-board-head .seg-btn,html.v3 .chp-more.btn-ghost{min-height:44px}
}
/* The task sheet: the new design's sheet (a dialog on a computer); its notes, fields and buttons as the prototype's. */
html.v3 .chp-ov{background:var(--v3-scrim)}
html.v3 .chp-sheet{border-radius:24px 24px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:var(--v3-sheet-shadow)}
html.v3 .chp-grab{width:40px;height:5px;margin:0 auto 10px;border-radius:5px;background:var(--v3-hover-line)}
html.v3 .chp-sheet-head{margin-bottom:8px}
html.v3 .chp-sheet-head h2{padding-top:9px;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
html.v3 .chp-x{color:var(--v3-body)}
html.v3 .chp-x:hover{background:var(--v3-gray);color:var(--ink)}
html.v3 .chp-x:focus-visible{outline:2px solid var(--royal-2);outline-offset:-2px;background:var(--v3-gray)}
html.v3 .chp-desc{margin-bottom:12px;font-size:13.5px;line-height:1.55;color:var(--v3-body)}
html.v3 .chp-sheet-meta{gap:6px 8px;margin-bottom:12px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--v3-warm);font-size:12.5px;font-weight:500;color:var(--muted)}
html.v3 .chp-sheet-meta .chp-pts{padding:0;border-radius:0;background:none;color:var(--royal-lo);font-size:inherit;font-weight:700}
html.v3 .chp-sheet-meta .chp-pts::after{content:"\00b7" / "";margin-left:8px;font-weight:500;color:var(--muted)}
html.v3 .chp-consent{border-radius:12px;background:var(--v3-blue-bg);color:var(--royal-lo);font-size:13px;font-weight:600}
html.v3 .chp-note{border-radius:12px;background:var(--v3-gray);font-size:13.5px}
html.v3 .chp-actions{gap:8px}
html.v3 .chp-btn2{min-height:48px;border:1px solid transparent;border-radius:14px;background:var(--v3-gray);color:var(--ink);font-size:15px;font-weight:800}
html.v3 .chp-btn2:hover{border-color:transparent;background:var(--line)}
html.v3 .chp-btn2:focus-visible{outline:2px solid var(--royal-2);outline-offset:2px;box-shadow:none;border-color:transparent}
html.v3 .chp-textbtn{color:var(--royal);font-size:14px}
html.v3 .chp-textbtn:focus-visible{outline:2px solid var(--royal-2);outline-offset:2px;border-radius:10px}
html.v3 .chp-field label{font-size:12.5px;font-weight:700;color:var(--ink)}
html.v3 .chp-field input,html.v3 .chp-field textarea{border-width:1px;border-radius:12px}
html.v3 .chp-field input:focus,html.v3 .chp-field textarea:focus{border-color:var(--royal-2);box-shadow:var(--ring)}
html.v3 .chp-help{font-size:12px}
html.v3 .chp-shot{border-radius:14px}
html.v3 .chp-up-row{font-size:13px}
/* Upload progress: the prototype's thin bar, blue on grey. */
html.v3 .chp-up .meter-bar{height:6px;background:var(--v3-gray)}
html.v3 .chp-up .meter-fill{background:var(--royal)}
html.v3 .chp-history{margin-top:14px;padding-top:12px;border-top-color:var(--v3-line-2)}
html.v3 .chp-history h3{margin-bottom:6px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
html.v3 .chp-history li{padding:7px 0;font-size:13px}
html.v3 .chp-history li + li{border-top:1px solid var(--v3-line-2)}
@media (min-width:761px){ html.v3 .chp-sheet{border-radius:20px;padding:18px 20px 22px;box-shadow:var(--shadow-lg)} }
/* The photo, opened: the same dark room, a round close button. */
html.v3 .chp-lb .chp-x{border-radius:50%;background:var(--v3-ch-lb-btn);color:#fff}
html.v3 .chp-lb .chp-x:hover,html.v3 .chp-lb .chp-x:focus-visible{background:var(--v3-glass-line)}
html.v3 .chp-lb .chp-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
html.v3 .chp-lb figcaption{font-size:13.5px;color:var(--v3-ch-hero-text)}
@media (prefers-reduced-motion:reduce){ html.v3 .chp-task,html.v3 #chp-root .chp-closed > summary::after{transition:none} }
/* Forced colours (Windows High Contrast): the banner's faint ring would be painted solid, right across the words, so it
   goes, and so does the glow on the points (it would keep its blue there). The fold's chevron is a mask, and backgrounds
   are not painted there: it keeps its own, in the text colour, as it replaced the native triangle. The grey camera button
   keeps its edge through its transparent border. */
@media (forced-colors:active){
  html.v3 .chp-hero.ppa-hero::after{display:none}
  html.v3 .chp-hero .chp-stat.pulse b{filter:none}
  html.v3 #chp-root .chp-closed > summary::after{forced-color-adjust:none;background:CanvasText}
}

/* ── 21. MY PPA (consultant): #view-ppa ─────────────────────────────────────────────────────────────────────
   The consultant's PPA page as the prototype's My PPA. Each list is the prototype's list card (the title with its
   count on the right, rows divided by a hairline) and each meeting is a row: a face, the name, the date, a pill for
   the answer, a chevron. An opened meeting reads like the prototype's meeting panel: the prospect's details in a
   quiet box, each question as choice cards, the reason and the note, the outcome box, and Save at the end. It opens
   in place, as it always has: an open card, or one with unsaved answers, survives every reload of the page, and a
   link to a meeting opens its card. app.js only marks each row with its initials and a colour, and each pill with a
   tone (v3MyPpa); it reads and sends nothing. The rules are written generically (any card, row and pill in the
   dashboard), so a list added later looks the same. The same classes are used on admin pages, so every rule here
   is scoped to #view-ppa, or to the dispute conversation, which opens on <body>. */
html.v3{
  /* Text on the green and amber tints: the prototype's own green and amber read below 4.5:1 there (WCAG AA). */
  --v3-myppa-ok-ink:#136c48; --v3-myppa-amb-ink:#7a5a12;
  --v3-myppa-hold:repeating-linear-gradient(45deg,#f0c44c 0 4px,#f7da8c 4px 8px); --v3-myppa-left:#dde3ee;
  --v3-myppa-row-hover:#f8f9fc; --v3-myppa-radio:#c6cedc;
}
/* The page: the prototype's column, 768px from the left of the page, with its gaps. */
html.v3 #view-ppa,html.v3 #ppa-dashboard{gap:18px}
html.v3 #ppa-dashboard{display:flex;flex-direction:column}
@media (min-width:761px){
  html.v3 #studio #view-ppa{max-width:1320px;margin:0 auto;padding:26px 28px 30px}
  html.v3 #studio #view-ppa > *{width:100%;max-width:768px}
}
/* Cards: the prototype's list card. A list's rows run to the card's edges, so the card has no padding below them. */
html.v3 #view-ppa .card-surface.pad{padding:16px 18px 18px}
html.v3 #ppa-dashboard > .card-surface.pad:not(#ppa-week-card){padding-bottom:0;overflow:hidden}
html.v3 #ppa-dashboard > .card-surface.pad:not(#ppa-week-card) > p:last-child{margin-bottom:16px}
html.v3 #view-ppa .card-surface.pad > h1{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:15.5px;font-weight:700;letter-spacing:0;line-height:1.45}
html.v3 #view-ppa .card-surface.pad > h1 + p.muted{margin:2px 0 10px;font-size:12.5px;line-height:1.5}
/* A count beside a title: the prototype's quiet number on the right, not a red badge. */
html.v3 #view-ppa .count-badge{min-width:0;height:auto;padding:0;border-radius:0;background:none;color:var(--muted);font-size:12.5px;font-weight:600}
html.v3 #view-ppa .ppa-needs-profile-h{margin:16px 0 2px;font-size:13.5px;font-weight:700;letter-spacing:0}
html.v3 #view-ppa #ppa-needs-profile-hint{margin:0 0 8px;font-size:12.5px;line-height:1.5}
html.v3 #view-ppa .ppa-change-past,html.v3 #view-ppa .ppa-recorded-note{margin:0 0 8px;font-size:12.5px;line-height:1.5}
/* A list with nothing in it, or still loading: one quiet line across the card. */
html.v3 #ppa-dashboard > .card-surface:not(#ppa-week-card) > div > p.muted:not(.ppa-recorded-note){margin:0 -18px;padding:12px 18px;border-top:1px solid var(--v3-line-2);font-size:13px}
/* Buttons: the prototype's blue button and its outline button. */
html.v3 #view-ppa .btn,html.v3 #view-ppa .ppa-fb-save{background:var(--royal);box-shadow:var(--v3-btn-shadow);font-weight:700;letter-spacing:0}
html.v3 #view-ppa .btn:hover{background:var(--royal-lo);box-shadow:var(--v3-btn-shadow)}
html.v3 #view-ppa .btn:disabled,html.v3 #view-ppa .btn:disabled:hover{background:var(--royal);box-shadow:none;opacity:.5}
html.v3 #view-ppa .btn.btn-sm{width:auto;height:40px;padding:0 18px;border-radius:11px;font-size:13.5px;font-weight:600}
html.v3 #view-ppa .btn-ghost{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:6px 12px;font-size:13px;font-weight:600}
html.v3 #view-ppa .btn-ghost:hover{background:var(--v3-gray);border-color:var(--v3-hover-line);color:var(--ink)}
html.v3 #view-ppa .ppa-dash-refresh-row{margin:-8px 0}
/* Pills: the prototype's, one tone each (app.js gives each pill its tone from its own words). */
html.v3 #view-ppa .ppa-resched-tag,html.v3 #view-ppa .ppa-resched-tag.sm{padding:3px 9px;border-radius:999px;background:var(--v3-blue-bg);color:var(--royal-lo);font-size:11.5px;font-weight:700;line-height:1.45}
html.v3 #view-ppa .ppa-resched-tag[data-v3-tone="ok"]{background:var(--v3-ok-tint);color:var(--v3-myppa-ok-ink)}
html.v3 #view-ppa .ppa-resched-tag[data-v3-tone="gray"]{background:var(--v3-gray);color:var(--muted)}
html.v3 #view-ppa .ppa-ur{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--v3-blue-bg);color:var(--royal-lo);font-size:11.5px;font-weight:700;line-height:1.45;white-space:nowrap}
html.v3 #view-ppa .pill.active{color:var(--v3-myppa-ok-ink)}
html.v3 #view-ppa .pill.near{color:var(--v3-myppa-amb-ink)}
html.v3 #view-ppa .ppa-hpill{padding:3px 9px;border:0;border-radius:999px;background:var(--v3-gray);color:var(--v3-body);font-size:11.5px;font-weight:700;letter-spacing:0;line-height:1.45}
html.v3 #view-ppa .ppa-hpill.ok{background:var(--v3-ok-tint);color:var(--v3-myppa-ok-ink)}
/* The face on a row: initials on one of seven colours, as in the prototype (decoration: screen readers skip it). */
html.v3 #ppa-dashboard .ppa-fb-head::before,html.v3 #ppa-dashboard .ppa-appt::before,html.v3 #ppa-dashboard .ppa-disp::before{content:attr(data-v3-face);content:attr(data-v3-face) / "";
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--v3-face,var(--v3-face-7));color:#fff;font-size:11px;font-weight:700;line-height:1;letter-spacing:0}

/* A meeting in a list: the prototype's row. */
html.v3 #ppa-dashboard .ppa-fb{position:relative;margin:0 -18px;border:0;border-top:1px solid var(--v3-line-2);border-radius:0;background:var(--card);box-shadow:none}
html.v3 #ppa-dashboard .ppa-fb-head{display:grid;grid-template-columns:32px minmax(0,1fr) auto 16px;align-items:center;column-gap:12px;row-gap:1px;
  padding:11px 18px;background:none;font-size:13.5px;line-height:1.45;color:var(--ink)}
html.v3 #ppa-dashboard .ppa-fb-head > span:first-child{display:contents}
html.v3 #ppa-dashboard .ppa-fb-head::before{grid-column:1;grid-row:1 / span 2}
html.v3 #ppa-dashboard .ppa-fb-head strong{grid-column:2;grid-row:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
html.v3 #ppa-dashboard .ppa-fb-head > span:first-child > .muted{grid-column:2;grid-row:2;font-size:12px}
html.v3 #ppa-dashboard .ppa-fb-head .ppa-fb-note-hint{grid-column:2;grid-row:3;margin-top:2px;font-size:12.5px;line-height:1.45}
html.v3 #ppa-dashboard .ppa-fb-head .ppa-resched-tag{grid-column:3;justify-self:end}
html.v3 #ppa-dashboard .ppa-fb-head:not(:has(.ppa-resched-tag ~ .ppa-resched-tag)) .ppa-resched-tag{grid-row:1 / span 2}
html.v3 #ppa-dashboard .ppa-fb-caret{grid-column:4;grid-row:1 / span 2;width:16px;height:16px;font-size:0;color:var(--v3-faint);transition:transform .15s}
html.v3 #ppa-dashboard .ppa-fb-caret::before{content:"";display:block;width:16px;height:16px;background:currentColor;-webkit-mask:var(--ic-chevright) center/contain no-repeat;mask:var(--ic-chevright) center/contain no-repeat}
html.v3 #ppa-dashboard .ppa-fb.open .ppa-fb-caret{transform:rotate(90deg)}
html.v3 #ppa-dashboard .ppa-fb-head:hover{background:var(--v3-myppa-row-hover)}
html.v3 #ppa-dashboard .ppa-fb-head:focus-visible{outline:2px solid var(--royal-2);outline-offset:-2px}
/* Open: the prototype's chosen row (blue, a bar on its left), with the meeting under it. */
html.v3 #ppa-dashboard .ppa-fb.open > .ppa-fb-head{background:var(--v3-blue-bg)}
html.v3 #ppa-dashboard .ppa-fb.open > .ppa-fb-head .ppa-resched-tag[data-v3-tone="blue"]{background:var(--card)}
html.v3 #ppa-dashboard .ppa-fb.open::after,html.v3 #ppa-dashboard .ppa-fb.ppa-fb-orphan::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--royal);pointer-events:none}
html.v3 #ppa-dashboard .ppa-fb.ppa-fb-orphan::after{background:var(--st-amber)}
html.v3 #ppa-dashboard .ppa-fb-body{gap:14px;padding:16px 18px 18px 62px;border-top:1px solid var(--v3-line-2);background:var(--card)}
html.v3 #ppa-dashboard .ppa-fb-form{gap:14px}

/* The opened meeting, as the prototype's meeting panel. The prospect's details: a quiet box. */
html.v3 #view-ppa .ppa-contact{margin:0;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:var(--v3-warm)}
html.v3 #view-ppa .ppa-contact p{font-size:13px;line-height:1.65;color:var(--v3-body)}
html.v3 #view-ppa .ppa-contact a:not(.btn-ghost){color:var(--ink);font-weight:600;border-bottom-color:var(--v3-hover-line)}
html.v3 #view-ppa .ppa-contact-sep{color:var(--v3-faint)}
html.v3 #view-ppa :is(.ppa-contact,.ppa-appt-facts,.ppa-appt-words,.ppa-imported) .muted{font-size:inherit}
html.v3 #view-ppa .ppa-contact .ppa-contact-join{margin-top:10px}
/* The line of contact links breaks between its items, never inside a phone number or a time zone (next to the
   sidebar the box is narrow). The page writes the items with no space between them, so a zero-width space after
   each separator is what lets the line break there; the line stays plain text, so the links' underlines do not
   move. From 621px, where the classic separators stand in the line (narrower, each item has a line of its own).
   An address too long for a whole line still wraps inside the box. */
@media (min-width:621px){
  html.v3 #view-ppa .ppa-contact-line{overflow-wrap:anywhere}
  html.v3 #view-ppa .ppa-contact-line > :is(a[href^="tel:"],.muted){white-space:nowrap}
  html.v3 #view-ppa .ppa-contact-line > .ppa-contact-sep::after{content:"\200B"}
}
html.v3 #view-ppa .ppa-resched{gap:8px;margin:0}
html.v3 #view-ppa .ppa-resched-when{font-size:12.5px;color:var(--muted)}
html.v3 #view-ppa .ppa-help{font-size:12.5px}
html.v3 #view-ppa .ppa-lock-note{padding:10px 12px;border-radius:12px;background:var(--v3-amb-tint);color:var(--v3-myppa-amb-ink);font-size:12.5px}
/* Each question: a short bold line over its choice cards (the prototype's Question and ChoiceCards). */
html.v3 #view-ppa .ppa-q{margin:2px 0 -6px;font-size:13.5px;font-weight:700;letter-spacing:0}
html.v3 #view-ppa .ppa-profile-block{margin-top:4px}
html.v3 #view-ppa .ppa-profile-block .ppa-q{margin:0 0 2px}
html.v3 #view-ppa .ppa-qh{margin:0 0 8px;font-size:12.5px}
html.v3 #view-ppa .ppa-opts{gap:10px}
html.v3 #view-ppa .ppa-opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
html.v3 #view-ppa .ppa-opt{position:relative;padding:12px 14px 12px 42px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);box-shadow:none}
html.v3 #view-ppa .ppa-opt:hover{border-color:var(--v3-hover-line)}
html.v3 #view-ppa .ppa-opt.sel{border-color:var(--royal);background:var(--v3-blue-bg);box-shadow:none}
html.v3 #view-ppa .ppa-opt::before{content:"";position:absolute;left:14px;top:13px;width:18px;height:18px;box-sizing:border-box;border:2px solid var(--v3-myppa-radio);border-radius:50%;background:var(--card)}
html.v3 #view-ppa .ppa-opt.sel::before{border:5px solid var(--royal)}
html.v3 #view-ppa .ppa-opt .ppa-ic{display:none}
html.v3 #view-ppa .ppa-opt .t{gap:8px;font-size:13.5px;font-weight:700;letter-spacing:0;line-height:1.45}
html.v3 #view-ppa .ppa-opt.sel .t{color:var(--royal-lo)}
html.v3 #view-ppa .ppa-opt .d{margin-top:2px;font-size:12px;font-weight:600;line-height:1.45}
html.v3 #view-ppa .ppa-fixed-answer{gap:8px;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--v3-warm);font-size:13.5px}
html.v3 #view-ppa .ppa-fixed-answer .ppa-ic{color:var(--ok)}
html.v3 #view-ppa .ppa-imported{padding:9px 12px;border-radius:11px;background:var(--v3-gray);font-size:13px}
html.v3 #view-ppa .ppa-reason-block{margin-top:0}
html.v3 #view-ppa .ppa-reason-label,html.v3 #view-ppa .ppa-field > label{margin-bottom:8px;font-size:13px;font-weight:700}
html.v3 #view-ppa .ppa-field{gap:0}
html.v3 #view-ppa .ppa-field > .ppa-help{margin:-4px 0 8px}
html.v3 #view-ppa .ppa-req{font-size:10.5px;letter-spacing:.05em}
/* The note boxes: the prototype's quiet field. */
html.v3 #view-ppa textarea.ppa-input{padding:10px 12px;border-width:1px;border-color:var(--line);border-radius:11px;font-size:13.5px;line-height:1.5}
html.v3 #view-ppa textarea.ppa-input:focus{border-color:var(--royal-2)}
html.v3 #view-ppa .ppa-bw{font-size:13px;color:var(--v3-body)}
html.v3 #view-ppa .ppa-bw-note{margin:-8px 0 0 29px}
/* What the answer will do: the outcome box, in its tone. */
html.v3 #view-ppa .ppa-outcome{margin-top:0;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.55}
html.v3 #view-ppa .ppa-outcome.counts{background:var(--v3-ok-tint);color:var(--v3-myppa-ok-ink)}
html.v3 #view-ppa .ppa-outcome.free{background:var(--v3-gray);color:var(--v3-body)}
html.v3 #view-ppa .ppa-outcome.held{background:var(--v3-amb-tint);color:var(--v3-myppa-amb-ink)}
/* A recorded answer, read only: the prototype's list of facts. */
html.v3 #view-ppa .ppa-summary{gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
html.v3 #view-ppa .ppa-summary > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid var(--v3-line-2)}
html.v3 #view-ppa .ppa-summary > div:first-child{border-top:0}
html.v3 #view-ppa .ppa-summary dt{min-width:0;font-size:13px;font-weight:500;color:var(--muted)}
html.v3 #view-ppa .ppa-summary dd{min-width:0;margin:0;text-align:right;font-size:13px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
html.v3 #view-ppa .ppa-summary > div:has(> .ppa-summary-notes){display:block}
html.v3 #view-ppa .ppa-summary dd.ppa-summary-notes{margin-top:2px;text-align:left;font-weight:500;color:var(--v3-body)}
html.v3 #view-ppa .ppa-noshow-review{margin:0}
html.v3 #view-ppa .ppa-noshow-review .ppa-noshow-open{padding-left:12px}
html.v3 #view-ppa .ppa-noshow-box{margin-top:10px}
/* Save, at the end of the meeting (the prototype's footer): the line beside it on the left, the button on the right. */
html.v3 #view-ppa .ppa-fb-actions{gap:8px 12px}
html.v3 #view-ppa .ppa-fb-form > .ppa-fb-actions{padding-top:14px;border-top:1px solid var(--v3-line-2)}
html.v3 #view-ppa .ppa-save-once,html.v3 #view-ppa .ppa-save-why{font-size:12.5px}
@media (min-width:761px){
  html.v3 #view-ppa .ppa-fb-form > .ppa-fb-actions{flex-wrap:nowrap}
  html.v3 #view-ppa .ppa-fb-form > .ppa-fb-actions > :not(.btn){order:1}
  html.v3 #view-ppa .ppa-fb-form > .ppa-fb-actions > .btn{order:2;flex:none;margin-left:auto}
}

/* Upcoming appointments: rows like the meetings, everything the booking told us under the name. */
html.v3 #ppa-dashboard .ppa-appt-list{gap:0}
html.v3 #ppa-dashboard .ppa-appt{margin:0 -18px;padding:11px 18px 14px 62px;border:0;border-top:1px solid var(--v3-line-2);border-radius:0;background:var(--card);box-shadow:none;transition:none}
html.v3 #ppa-dashboard .ppa-appt:hover{box-shadow:none;transform:none}
html.v3 #ppa-dashboard .ppa-appt::before{left:18px;top:11px;bottom:auto}
html.v3 #ppa-dashboard .ppa-appt-head{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-height:32px;margin-bottom:8px}
html.v3 #ppa-dashboard .ppa-appt-name{gap:8px;font-size:13.5px;font-weight:700;letter-spacing:0}
html.v3 #ppa-dashboard .ppa-appt-when{gap:5px;padding:0;border:0;border-radius:0;background:none;color:var(--muted);font-size:12px;font-weight:500}
html.v3 #ppa-dashboard .ppa-appt-when .ppa-appt-ic{stroke:currentColor}
html.v3 #ppa-dashboard .ppa-appt-links{gap:6px;margin-bottom:8px}
html.v3 #ppa-dashboard .ppa-appt-link{padding:5px 10px;border-color:var(--line);border-radius:10px;background:var(--card);font-size:12.5px}
html.v3 #ppa-dashboard .ppa-appt-link:not(.li){color:var(--ink)}
html.v3 #ppa-dashboard .ppa-appt-link:hover{background:var(--v3-gray);border-color:var(--v3-hover-line)}
html.v3 #ppa-dashboard .ppa-appt-tz{font-size:12px}
html.v3 #ppa-dashboard .ppa-appt-facts{gap:3px 16px;font-size:12.5px;color:var(--v3-body)}
html.v3 #ppa-dashboard .ppa-appt-words{margin-top:8px;padding:8px 12px;border-left:2px solid var(--v3-hover-line);border-radius:0 10px 10px 0;background:var(--v3-warm);color:var(--v3-body);font-size:12.5px}
html.v3 #ppa-dashboard .ppa-appt-join{margin-top:10px;min-height:38px;padding:0 15px;border-radius:11px;background:var(--royal);box-shadow:var(--v3-btn-shadow);font-size:13.5px;font-weight:600;transition:background .15s}
html.v3 #ppa-dashboard .ppa-appt-join:hover{transform:none;background:var(--royal-lo);box-shadow:var(--v3-btn-shadow)}
html.v3 #view-ppa :is(.ppa-appt-link,.ppa-appt-join,.ppa-contact a,.ppa-week-needs a):focus-visible{outline:2px solid var(--royal-2);outline-offset:2px}

/* Your disputes: rows too, the decision as a pill. */
html.v3 #ppa-dashboard .ppa-disp{position:relative;margin:0 -18px;padding:11px 18px 14px 62px;border:0;border-top:1px solid var(--v3-line-2);border-radius:0}
html.v3 #ppa-dashboard .ppa-disp::before{position:absolute;left:18px;top:11px}
html.v3 #ppa-dashboard .ppa-disp-top{flex-wrap:wrap;gap:6px 12px;min-height:32px;margin-bottom:6px}
html.v3 #ppa-dashboard .ppa-disp-top > span:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:1px 8px;min-width:0;font-size:13.5px}
html.v3 #ppa-dashboard .ppa-disp-top > span:first-child > strong{flex-basis:100%;overflow-wrap:anywhere}
html.v3 #ppa-dashboard .ppa-disp-top > span:first-child > .muted{font-size:12px}
html.v3 #ppa-dashboard .ppa-disp .pill{background:var(--v3-gray);color:var(--muted)}
html.v3 #ppa-dashboard .ppa-disp-reason{font-size:13px;line-height:1.55;color:var(--v3-body)}
html.v3 #ppa-dashboard .ppa-disp-note{margin-top:8px;padding:8px 12px;border-radius:10px;background:var(--v3-gray);font-size:12.5px}
html.v3 #ppa-dashboard .ppa-disp > .btn-ghost{margin-top:10px}

/* The package: the prototype's package box (its id, how much is counted, the bar, the key). */
html.v3 #view-ppa .ppa-hero{margin:0;padding:13px 16px 12px;border:1px solid var(--line);border-radius:14px;background:var(--v3-warm);color:var(--ink);box-shadow:none}
html.v3 #view-ppa .ppa-hero::after{display:none}
html.v3 #view-ppa .ppa-hero-pills{gap:6px;top:12px;right:14px}
html.v3 #view-ppa .ppa-hero:has(.ppa-hero-pills > *) :is(.ppa-eyebrow,h1){margin-right:150px}
html.v3 #view-ppa .ppa-eyebrow{margin:0 0 1px;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
html.v3 #view-ppa .ppa-hero h1{font-size:15.5px;font-weight:700;letter-spacing:0;line-height:1.4;color:var(--ink)}
html.v3 #view-ppa .ppa-hero h1 br{display:none}
html.v3 #view-ppa .ppa-hero h1 br + .ppa-hl-2::before{content:" "}
html.v3 #view-ppa .ppa-hero h1 .ppa-hl-2{color:var(--v3-body)}
html.v3 #view-ppa .ppa-hero-sub{margin:1px 0 0;font-size:12.5px;font-weight:500;color:var(--muted)}
html.v3 #view-ppa .ppa-meter{gap:6px;height:8px;margin:10px 0 8px;border-radius:0;background:none;overflow:visible}
html.v3 #view-ppa .ppa-meter .ppa-seg{border:0;border-radius:9px}
html.v3 #view-ppa .ppa-meter .ppa-seg.done,html.v3 #view-ppa .ppa-hero .ppa-dot.done{background:var(--ok)}
html.v3 #view-ppa .ppa-meter .ppa-seg.hold,html.v3 #view-ppa .ppa-hero .ppa-dot.hold{background:var(--v3-myppa-hold)}
html.v3 #view-ppa .ppa-meter .ppa-seg.left,html.v3 #view-ppa .ppa-hero .ppa-dot.left{background:var(--v3-myppa-left)}
html.v3 #view-ppa .ppa-hero-nums{gap:6px 14px;font-size:12.5px;font-weight:500;color:var(--muted)}
html.v3 #view-ppa .ppa-hero-nums span{gap:6px}
html.v3 #view-ppa .ppa-hero-nums strong{font-size:12.5px;font-weight:700;color:var(--ink)}
html.v3 #view-ppa .ppa-hero .ppa-dot{width:8px;height:8px;border-radius:9px}
html.v3 #view-ppa .ppa-history-strip{gap:6px 8px;margin-top:10px;padding-top:0;border-top:0}
html.v3 #view-ppa .ppa-history-label{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
html.v3 #view-ppa .ppa-history-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:12.5px;font-weight:600}
html.v3 #view-ppa #ppa-dash-packages > p.muted{font-size:13px}

/* PPA this week: the same card; the show rate in a quiet box, the tables in the prototype's lines. */
html.v3 #view-ppa #ppa-week-card h2{justify-content:space-between;margin:20px 0 6px;font-size:14px;font-weight:700;letter-spacing:0}
html.v3 #view-ppa .ppa-week-hero{margin:2px 0 12px;padding:14px 16px;border-color:var(--line);border-radius:14px;background:var(--v3-warm)}
html.v3 #view-ppa .ppa-week-hero .stat-num{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
html.v3 #view-ppa .ppa-week-hero .stat-num.is-words{font-size:22px;letter-spacing:-.01em}
html.v3 #view-ppa .ppa-week-hero .stat-label{margin-top:4px;font-size:12.5px;color:var(--muted)}
html.v3 #view-ppa .ppa-week-line{margin-top:6px;font-size:13px}
html.v3 #view-ppa .ppa-week-table table.grid th{padding:8px 10px;border-bottom:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.04em}
html.v3 #view-ppa .ppa-week-table table.grid td{padding:8px 10px;border-bottom-color:var(--v3-line-2);font-size:13px}
html.v3 #view-ppa .ppa-week-sub{font-size:12.5px}
html.v3 #view-ppa .ppa-week-needs li{padding:9px 0;border-top-color:var(--v3-line-2);font-size:13.5px}
html.v3 #view-ppa .ppa-week-needs li > .muted{font-size:12.5px}
html.v3 #view-ppa .ppa-week-note{margin-top:14px;font-size:12px}
html.v3 #view-ppa .pa-fold{margin-top:14px;padding-top:10px;border-top-color:var(--v3-line-2)}
html.v3 #view-ppa .pa-fold > summary{font-size:13px}
html.v3 #view-ppa .pa-defs dt,html.v3 #view-ppa .pa-defs dd{font-size:13px}

/* The enrolment wizard and the simple packages card: the same cards, buttons and choice cards as the rest. */
html.v3 #view-ppa .ppa-enroll{margin:0;font-family:inherit}
html.v3 #view-ppa .ppa-enroll-head{padding:22px 24px 18px;background:var(--v3-hero)}
html.v3 #view-ppa .ppa-enroll-kicker{font-size:12px;letter-spacing:.06em;opacity:.9}
html.v3 #view-ppa :is(.ppa-enroll-title,.ppa-step h2,.ppa-enroll .btn,.ppa-card-badge,.ppa-card-size,.ppa-card-price,.ppa-guide-title){font-family:inherit}
html.v3 #view-ppa .ppa-enroll-title{font-size:22px;font-weight:700;letter-spacing:-.02em}
html.v3 #view-ppa .ppa-enroll-sub{font-size:13.5px}
/* The steps stay full white: the classic dimming (60% for a step still to come) reads below 4.5:1 on the lighter
   end of this gradient. The circle says where each step is instead: white for this step, filled for a step done,
   an outline for a step still to come. */
html.v3 #view-ppa .ppa-steps li{opacity:1}
html.v3 #view-ppa .ppa-steps li span{background:transparent;box-shadow:inset 0 0 0 1.5px var(--v3-glass-line)}
html.v3 #view-ppa .ppa-steps li.is-current span{background:#fff;color:var(--navy);box-shadow:none}
html.v3 #view-ppa .ppa-steps li.is-done span{background:var(--v3-glass-line);color:#fff;box-shadow:none}
html.v3 #view-ppa .ppa-enroll-body{padding:20px 24px 24px}
html.v3 #view-ppa .ppa-step h2{margin-bottom:4px;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
html.v3 #view-ppa .ppa-step > .muted{margin-bottom:14px;font-size:13px}
html.v3 #view-ppa .ppa-identity{margin:6px 0 16px;padding:14px 16px;border-radius:12px;background:var(--v3-gray);font-size:14px}
html.v3 #view-ppa .ppa-step-actions{margin-top:18px}
html.v3 #view-ppa .ppa-step-actions .btn{width:auto;padding:0 24px}
html.v3 #view-ppa .ppa-step-actions .btn-ghost{min-height:48px;padding:0 20px;border-radius:14px;font-size:14px}
html.v3 #view-ppa .ppa-cards{gap:12px}
html.v3 #view-ppa .ppa-card{padding:16px 18px;border-width:1.5px;border-radius:14px}
html.v3 #view-ppa .ppa-card:hover{border-color:var(--v3-hover-line)}
html.v3 #view-ppa .ppa-card.selected{border-color:var(--royal);background:var(--v3-blue-bg);box-shadow:none}
html.v3 #view-ppa .ppa-card:has(input:focus-visible){outline:2px solid var(--royal-2);outline-offset:2px}
html.v3 #view-ppa .ppa-card-badge{background:var(--v3-other-count);letter-spacing:.02em}
html.v3 #view-ppa .ppa-card-size{font-size:16px;color:var(--ink)}
html.v3 #view-ppa .ppa-card-price{font-size:24px;color:var(--royal-lo)}
html.v3 #view-ppa .ppa-card-points li::before{color:var(--ok)}
html.v3 #view-ppa .ppa-promo-banner{border-color:transparent;border-radius:12px;background:var(--v3-amb-tint);color:var(--v3-myppa-amb-ink);font-size:13.5px}
html.v3 #view-ppa :is(.ppa-type-fs,.ppa-fs) legend{color:var(--ink);font-size:13.5px}
html.v3 #view-ppa .ppa-fs{border-color:var(--line);border-radius:12px}
html.v3 #view-ppa .ppa-ack{font-size:13px}
html.v3 #view-ppa .ppa-guide{gap:12px}
html.v3 #view-ppa .ppa-guide-card{padding:14px 16px;border-radius:14px;background:var(--card)}
html.v3 #view-ppa .ppa-guide-num{border-radius:10px;background:var(--v3-blue-bg);color:var(--royal-lo);font-size:13px}
html.v3 #view-ppa .ppa-guide-title{font-size:14px;color:var(--ink)}
html.v3 #view-ppa .ppa-guide-desc{font-size:12.5px;color:var(--v3-body)}
html.v3 #view-ppa .ppa-review{border-radius:12px}
html.v3 #view-ppa .ppa-review-row{padding:10px 14px;font-size:13.5px}
html.v3 #view-ppa .ppa-review-row + .ppa-review-row{border-top-color:var(--v3-line-2)}
html.v3 #view-ppa .ppa-review-total{background:var(--v3-gray);font-size:14.5px}
html.v3 #view-ppa .ppa-review-total strong{color:var(--royal-lo)}

/* The dispute conversation (it opens on <body>): the new design's dialog. */
html.v3 .ppa-convo-backdrop{background:var(--v3-scrim)}
html.v3 .ppa-convo-backdrop > .ppa-convo{padding:20px 22px;border-radius:20px;box-shadow:var(--shadow-lg)}
html.v3 .ppa-convo-backdrop .ppa-convo-head strong{font-size:17px;font-weight:700}
html.v3 .ppa-convo-backdrop .ppa-convo-head .muted{font-size:13px}
html.v3 .ppa-convo-backdrop .ppa-convo-bot-note{font-size:12.5px}
html.v3 .ppa-convo-backdrop .ppa-convo-log{gap:12px;align-content:start;padding:12px 14px;border-color:var(--line);border-radius:14px;background:var(--v3-warm)}
html.v3 .ppa-convo-backdrop .ppa-convo-line{grid-template-columns:78px minmax(0,1fr);font-size:13.5px;overflow-wrap:anywhere}
html.v3 .ppa-convo-backdrop .ppa-convo-who{font-size:11.5px;font-weight:700}
html.v3 .ppa-convo-backdrop .ppa-convo-line.you{color:var(--ink)}
html.v3 .ppa-convo-backdrop textarea.ppa-input{padding:10px 12px;border-width:1px;border-color:var(--line);border-radius:11px;font-size:13.5px}
html.v3 .ppa-convo-backdrop .btn{width:auto;height:40px;padding:0 18px;border-radius:11px;background:var(--royal);box-shadow:var(--v3-btn-shadow);font-size:13.5px;font-weight:600}
html.v3 .ppa-convo-backdrop .btn:hover{background:var(--royal-lo)}
html.v3 .ppa-convo-backdrop .btn:disabled{box-shadow:none;opacity:.5}

/* Phones (760px and narrower): the prototype's phone page, its rows and its big Save. */
@media (max-width:760px){
  html.v3 #studio:not(.adm-shell) #view-ppa{margin-top:4px;padding:0 12px}
  html.v3 #studio:not(.adm-shell) #view-ppa,html.v3 #studio:not(.adm-shell) #ppa-dashboard{gap:14px}
  html.v3 #view-ppa .card-surface.pad{padding:14px 16px 16px}
  html.v3 #ppa-dashboard > .card-surface:not(#ppa-week-card) > div > p.muted:not(.ppa-recorded-note){margin:0 -16px;padding:12px 16px}
  html.v3 #ppa-dashboard :is(.ppa-fb,.ppa-appt,.ppa-disp){margin:0 -16px}
  html.v3 #ppa-dashboard .ppa-fb-head{grid-template-columns:32px minmax(0,1fr) 16px;padding:11px 16px}
  html.v3 #ppa-dashboard .ppa-fb-head > span:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;grid-column:2;grid-row:1 / span 2;min-width:0}
  html.v3 #ppa-dashboard .ppa-fb-head strong{flex-basis:100%}
  html.v3 #ppa-dashboard .ppa-fb-head .ppa-fb-note-hint{flex-basis:100%}
  html.v3 #ppa-dashboard .ppa-fb-caret{grid-column:3}
  html.v3 #ppa-dashboard .ppa-fb-body{padding:14px 16px 16px}
  html.v3 #ppa-dashboard .ppa-appt,html.v3 #ppa-dashboard .ppa-disp{padding:11px 16px 14px}
  html.v3 #ppa-dashboard .ppa-appt::before,html.v3 #ppa-dashboard .ppa-disp::before{left:16px}
  html.v3 #ppa-dashboard .ppa-appt-head,html.v3 #ppa-dashboard .ppa-disp-top{padding-left:44px}
  html.v3 #ppa-dashboard .ppa-disp-top{margin-bottom:8px}
  /* The pills stand on their own row above the package (the classic phone rule), so nothing makes room for them. */
  html.v3 #studio:not(.adm-shell) #view-ppa .ppa-hero-pills{top:auto;right:auto;margin-bottom:6px}
  html.v3 #studio:not(.adm-shell) #view-ppa .ppa-hero:has(.ppa-hero-pills > *) :is(.ppa-eyebrow,h1){margin-right:0}
  html.v3 #view-ppa textarea.ppa-input,html.v3 .ppa-convo-backdrop textarea.ppa-input{font-size:16px}
  html.v3 #view-ppa .ppa-fb-form > .ppa-fb-actions > .btn{width:100%;height:48px;border-radius:14px;font-size:15px;font-weight:800}
  html.v3 #view-ppa .ppa-opt{padding:12px 12px 12px 38px}
  html.v3 #view-ppa .ppa-opt::before{left:12px}
  html.v3 #view-ppa .ppa-history-label{flex-basis:100%}
  html.v3 #view-ppa .ppa-history-chip{flex-wrap:wrap;row-gap:4px}
  html.v3 #view-ppa .ppa-enroll-head{padding:18px 18px 16px}
  html.v3 #view-ppa .ppa-enroll-body{padding:18px}
  html.v3 .ppa-convo-backdrop .btn{width:100%;height:48px;border-radius:14px;font-size:15px;font-weight:800}
  html.v3 .ppa-convo-backdrop > .ppa-convo{border-radius:0;padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(18px + env(safe-area-inset-bottom,0px))}
  /* 44px taps. "How these are counted": the classic padding is on consultant screens only, and with the smaller
     text it comes to 42px. The BrandWide label (the checkbox's tap area): a shorter label grows to 44px with its
     line in the middle; a longer one is unchanged, its box still beside the first line. */
  html.v3 #studio:not(.adm-shell) #view-ppa .pa-fold > summary{min-height:44px}
  html.v3 #view-ppa label.checkbox.ppa-bw{min-height:44px;flex-wrap:wrap;align-content:center}
  html.v3 #view-ppa label.checkbox.ppa-bw > span{flex:1 1 0;min-width:0}
}
/* The same fold on an admin's phone (Consultant view > PPA), where the classic padding does not reach. */
@media (max-width:599px){ html.v3 #view-ppa .pa-fold > summary{min-height:44px;padding-top:13px;padding-bottom:13px} }
@media (max-width:560px){ html.v3 .ppa-convo-backdrop .ppa-convo-line{grid-template-columns:minmax(0,1fr);gap:2px} }
@media (prefers-reduced-motion:reduce){ html.v3 #ppa-dashboard .ppa-fb-caret{transition:none} }
/* Forced colours paint no backgrounds, so the chevron mask would vanish: the row shows its own caret again. */
@media (forced-colors:active){
  html.v3 #ppa-dashboard .ppa-fb-caret{font-size:12px}
  html.v3 #ppa-dashboard .ppa-fb-caret::before{display:none}
  html.v3 #ppa-dashboard .ppa-fb.open .ppa-fb-caret{transform:rotate(180deg)}
  /* And no fills or shadows on the wizard's circles: this step keeps a ring, so it still shows where you are. */
  html.v3 #view-ppa .ppa-steps li.is-current span{outline:2px solid}
}

/* ── 22. MY PAGE (consultant; an admin's own from Consultant view): #view-page ───────────────────────────────
   The page editor in the prototype's language. The tips are the banner. "Your page", its meter and "Still to fill in"
   are one card. Each numbered group is a card of its own, a field's label above its box, its help and word count under
   the box. The Save bar floats at the foot of the window; on a phone it sits on the tab bar, one row: Undo, Redo, Save.
   From 1241px the preview stays beside the editor while the page scrolls, and scrolls in its own card.
   CSS ONLY, ON PURPOSE: this page saves to the live WordPress page, so there is no screen code here at all. Every field,
   id and label is where the editor's code looks for it, the order on the page is the classic order (Save stays between
   Redo and the status line), and nothing here can change what is read or saved, or when. The preview's width is read
   by applyPreviewScale, so the frame may be any width but is never hidden. .pf, .ai-suggest and .editor-actions are
   used on Blog & reviews too: every rule is scoped to #view-page. */
html.v3{
  /* The banner's lines run its full width, so it stops short of the lightest blue: white and the tip text hold 4.5:1 to its far end. */
  --v3-page-hero:linear-gradient(120deg,#0b1c3e 0%,#173a78 62%,#20509f 100%);
  --v3-page-hero-text:#d6e2f8; --v3-page-hero-line:rgba(255,255,255,.14);
  --v3-page-ok:#136c48; --v3-page-chip-hover:#e0eafa; --v3-page-ai-line:#d7e2fb;
  --v3-page-bar-shadow:0 1px 2px rgba(15,27,51,.06),0 8px 24px rgba(15,27,51,.14);
  --v3-page-phone-bar-shadow:0 -6px 18px rgba(15,27,51,.07);
}
/* The page: as wide as the other screens, with their gaps. */
html.v3 #studio #view-page{max-width:1320px;margin:0 auto;padding:26px 28px 30px}

/* The tips: the prototype's banner, one line of tip, the nudge under a hairline. */
html.v3 #view-page .coach-strip{position:relative;overflow:hidden;margin:0 0 16px;padding:18px 24px;border-radius:20px;background:var(--v3-page-hero);box-shadow:none;color:#fff}
html.v3 #view-page .coach-strip::after{content:"";position:absolute;right:-60px;bottom:-120px;width:280px;height:280px;border-radius:50%;border:36px solid var(--v3-hero-ring);pointer-events:none}
html.v3 #view-page .coach-strip > *{position:relative;z-index:1}
html.v3 #view-page .coach-strip .coach-eyebrow{gap:8px;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--v3-hero-hi)}
html.v3 #view-page .coach-strip .coach-card h4{margin-bottom:2px;font-size:15px;font-weight:700;line-height:1.35;color:#fff}
html.v3 #view-page .coach-strip .coach-card p{font-size:13.5px;line-height:1.5;color:var(--v3-page-hero-text)}
html.v3 #view-page .coach-strip .coach-nudge{margin:12px 0 0;padding-top:12px;border-top-color:var(--v3-page-hero-line);font-size:13px;line-height:1.45;color:var(--v3-page-hero-text)}
html.v3 #view-page .coach-strip .coach-nudge::before{color:var(--v3-hero-hi)}
/* The tips change every 9 seconds while someone types: room for the longest one at each width, so the page under it never jumps. */
html.v3 #view-page .coach-strip .coach-stage{display:flex;align-items:center;min-height:63px}
html.v3 #view-page .coach-strip .coach-card{width:100%}
@media (max-width:1099px){ html.v3 #view-page .coach-strip .coach-stage{min-height:83px} }
@media (max-width:859px){ html.v3 #view-page .coach-strip .coach-stage{min-height:103px} }
@media (max-width:760px){ html.v3 #view-page .coach-strip .coach-stage{align-items:flex-start;width:100%;min-height:63px} }
@media (max-width:560px){ html.v3 #view-page .coach-strip .coach-stage{min-height:83px} }
@media (max-width:440px){ html.v3 #view-page .coach-strip .coach-stage{min-height:100px} }
@media (max-width:380px){ html.v3 #view-page .coach-strip .coach-stage{min-height:119px} }

/* The two columns: the form has the room, the preview is its smaller picture. */
@media (min-width:1241px){ html.v3 #view-page .page-layout{grid-template-columns:minmax(0,1.2fr) minmax(400px,1fr);gap:18px} }
/* One column, in both shells. minmax(0,1fr), not 1fr: a plain 1fr track grows to the live preview's own width. */
@media (max-width:1240px){ html.v3 #studio #view-page .page-layout{grid-template-columns:minmax(0,1fr);gap:16px} }

/* The editor is no longer a card holding cards: each of its pieces is a card. */
html.v3 #view-page .editor-col{min-width:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
/* "Your page": the title and the percent on a line, the greeting, the bar across the card. */
html.v3 #view-page .editor-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 16px;align-items:end;margin:0;padding:16px 20px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
html.v3 #view-page .editor-head h1{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
html.v3 #view-page #greeting{margin-top:1px;font-size:13px;line-height:1.5}
html.v3 #view-page .meter{display:contents}
html.v3 #view-page .meter-bar{grid-column:1 / -1;grid-row:2;height:8px;margin-top:12px;background:var(--v3-gray)}
html.v3 #view-page .meter-label{grid-column:2;grid-row:1;margin:0;font-size:13px;font-weight:700;line-height:1.5;color:var(--ink);white-space:nowrap}
/* "Still to fill in" closes the same card. Each half clips its shadow where they meet, so no line of shadow shows inside the card. */
html.v3 #view-page .editor-head:has(+ .meter-missing:not([hidden])){padding-bottom:14px;border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;clip-path:inset(-30px -30px 0 -30px)}
html.v3 #view-page .meter-missing{gap:6px;margin:0;padding:12px 20px 16px;background:var(--card);border-color:var(--line);border-top-color:var(--v3-line-2);border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow);clip-path:inset(0 -30px -30px -30px);font-size:12.5px}
html.v3 #view-page .meter-missing .mm-lead{flex:1 0 100%;margin:0 0 2px;font-size:13px;font-weight:700;color:var(--ink)}
html.v3 #view-page .meter-missing .mm-link{min-height:30px;padding:4px 11px;border-color:transparent;background:var(--v3-blue-bg);color:var(--royal-lo);font-size:12.5px;line-height:1.3}
html.v3 #view-page .meter-missing .mm-link:hover{background:var(--v3-page-chip-hover)}

/* The groups: the prototype's card, its title row over a hairline. */
html.v3 #view-page .fieldset{gap:14px;margin-top:14px}
html.v3 #view-page .group-card{padding:0;background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
html.v3 #view-page .group-title{gap:10px;margin:0;padding:13px 18px;border-bottom:1px solid var(--v3-line-2);font-size:15.5px;font-weight:700;letter-spacing:0;line-height:1.45;text-transform:none;color:var(--ink)}
html.v3 #view-page .group-title .gt-num{flex:none;width:26px;height:26px;border-radius:8px;background:var(--v3-blue-bg);color:var(--royal-lo);font-size:12.5px;font-weight:700}
html.v3 #view-page .group-body{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:16px 18px 18px}
/* Two short fields side by side wherever a field keeps 250px or more. Every other field takes the whole row. */
@media (min-width:761px) and (max-width:1240px),(min-width:1400px){
  html.v3 #view-page .group-body{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.v3 #view-page .group-body > .pf{grid-column:1 / -1}
  html.v3 #view-page .group-body > .pf:is([data-field="years_of_experience"],[data-field="happy_clients"],[data-field="base_location"],[data-field="target_market"]){grid-column:auto}
}

/* A field: the label above the box, Improve at the end of its line, help on the left under the box, the count on the right. */
html.v3 #view-page .pf{min-width:0;margin:0}
/* align-content:start: of two short fields side by side, a note under one must not stretch the other's rows. */
html.v3 #view-page .pf:has(> :is(input,textarea,select)){display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;column-gap:12px}
html.v3 #view-page .pf:has(> :is(input,textarea,select)) > *{grid-column:1 / -1}
html.v3 #view-page .pf .pf-label{position:static;margin:0 0 6px;padding:0;background:none;font-size:13px;font-weight:600;letter-spacing:0;line-height:1.4;color:var(--ink)}
html.v3 #view-page .pf:has(> .wc) > .help:not(.num-note){grid-column:1;grid-row:3}
html.v3 #view-page .pf:has(> .wc) > .wc{grid-column:2;grid-row:3}
html.v3 #view-page .pf :is(input:not([type=file]),textarea,select){border-width:1px;border-radius:11px;padding:10px 13px;font-size:14px;line-height:1.5}
html.v3 #view-page .pf :is(input:not([type=file]),select){min-height:44px}
html.v3 #view-page .pf > select:not([multiple]){-webkit-appearance:none;appearance:none;padding-right:36px;background:var(--card) var(--ic-chevdown) no-repeat right 12px center/16px;text-overflow:ellipsis;cursor:pointer}
html.v3 #view-page .pf :is(input,textarea)::placeholder{color:var(--muted)}
/* The transparent outline shows only under forced colours, where the ring (a shadow) is not drawn. Over a word limit stays red. */
html.v3 #view-page .pf :is(input:not([type=file]),textarea,select):focus{outline:2px solid transparent;outline-offset:1px}
html.v3 #view-page .pf :is(input:not([type=file]),textarea,select):not(.field-invalid):focus{border-color:var(--royal-2)}
html.v3 #view-page .pf .help{margin-top:5px;font-size:12.5px;line-height:1.45}
html.v3 #view-page .pf .wc{margin-top:5px;font-size:12px;letter-spacing:0;line-height:1.5;white-space:nowrap}
html.v3 #view-page .pf .pf-err{margin-top:5px}
/* The narrowest phones: the count on its own line, or the help beside it would run to five lines. */
@media (max-width:380px){
  html.v3 #view-page .pf:has(> .wc) > .help:not(.num-note){grid-column:1 / -1;grid-row:4}
  html.v3 #view-page .pf:has(> .wc) > .wc{grid-column:1 / -1}
}
/* A reason's headline and detail read as a pair. */
html.v3 #view-page .pf[data-field^="why_work_with_me_text_"]{margin-top:-6px}
html.v3 #view-page .pf[data-field^="why_work_with_me_text_"]:not(:last-child){padding-bottom:16px;border-bottom:1px solid var(--v3-line-2)}

/* Improve: the prototype's small tinted button, at the end of the label's line (it no longer sits inside the box). */
html.v3 #view-page .pf.has-ai .pf-ai{top:-3px;right:0;padding:2px 8px;border-color:transparent;border-radius:8px;background:var(--v3-blue-bg);color:var(--royal-lo);font-size:12px;line-height:1.45}
html.v3 #view-page .pf.has-ai .pf-ai:hover{transform:none;background:var(--v3-page-chip-hover)}
html.v3 #view-page .ai-suggest{margin-top:10px;padding:12px 14px;border-color:var(--v3-page-ai-line);background:var(--v3-blue-bg)}
html.v3 #view-page .ai-suggest .ai-head{margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--royal-lo)}
html.v3 #view-page .ai-suggest .ai-text{font-size:13.5px;line-height:1.5}
html.v3 #view-page .ai-suggest .ai-actions{flex-wrap:wrap;gap:8px;margin-top:10px}
html.v3 #view-page :is(.ai-accept,.ai-regen,.ai-discard){min-height:36px;padding:0 13px;border-radius:10px;font-size:13px;font-weight:600}
html.v3 #view-page :is(.ai-regen,.ai-discard){border-color:var(--line);background:var(--card);color:var(--ink)}
html.v3 #view-page :is(.ai-regen,.ai-discard):hover{border-color:var(--v3-hover-line);background:var(--v3-gray);color:var(--ink)}

/* The headshot: the picture on the left, Upload photo and its help beside it. .image-row is a plain wrapper; its label
   keeps the place the code's padding leaves for it (written on the element), so the file box is never moved. */
html.v3 #view-page .pf:has(> .image-row){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start}
html.v3 #view-page .image-row{display:contents}
html.v3 #view-page .pf:is(:has(> .image-row),:has(> .repeater)) .pf-label{position:absolute;left:0;top:0;margin:0}
html.v3 #view-page :is(.headshot-avatar,.headshot-thumb){grid-row:1 / span 2;width:72px;height:72px;border:0;border-radius:16px}
html.v3 #view-page .headshot-avatar{background:var(--royal);font-size:24px;font-weight:700}
html.v3 #view-page .pf:has(> .image-row) > .help{grid-column:2;margin-top:7px}
html.v3 #view-page .pf:has(> .image-row) .btn-upload{justify-self:start;display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-width:1px;border-radius:10px;font-weight:600}
html.v3 #view-page .pf:has(> .image-row) .btn-upload:hover{border-color:var(--v3-hover-line);background:var(--v3-gray);color:var(--ink)}

/* Who you help: the chips as pills, the menu as the prototype's. Never a clipped parent here: the menu runs over the next card. */
html.v3 #view-page .ms-chips{gap:6px}
html.v3 #view-page .ms-chip{gap:6px;padding:3px 4px 3px 10px;border-color:transparent;background:var(--v3-blue-bg);font-size:12.5px;line-height:1.4}
html.v3 #view-page .ms-x{background:var(--v3-page-chip-hover)}
html.v3 #view-page .ms-x:hover{background:var(--err);color:#fff}
html.v3 #view-page .ms-empty-hint{font-size:12.5px}
html.v3 #view-page .ms-menu{padding:6px;border-color:var(--line);border-radius:12px}
html.v3 #view-page .ms-group{padding:9px 10px 4px;font-weight:700;letter-spacing:.04em}
html.v3 #view-page .ms-opt{font-size:13.5px}
html.v3 #view-page .ms-opt:hover{background:var(--v3-gray)}

/* The Save bar: a floating card at the foot of the window. The order is the page's: Undo, Redo, Save, the status, the live link. */
html.v3 #view-page .editor-col .editor-actions{gap:8px 12px;margin:14px 0 0;padding:10px 12px 10px 14px;background:var(--v3-bar);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--v3-page-bar-shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html.v3 #view-page .undo-group{gap:6px}
html.v3 #view-page :is(.undo-group,.preview-controls) .btn-ghost{min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:13px;font-weight:600}
html.v3 #view-page :is(.undo-group,.preview-controls) .btn-ghost:hover{border-color:var(--v3-hover-line);background:var(--v3-gray);color:var(--ink)}
html.v3 #view-page .undo-group .btn-ghost:disabled,html.v3 #view-page .undo-group .btn-ghost:disabled:hover{border-color:var(--line);background:var(--card);color:var(--muted);cursor:default;opacity:.6}
html.v3 #view-page .editor-actions .btn{height:42px;padding:0 20px;border-radius:12px;font-size:14px;font-weight:700}
html.v3 #view-page .save-status{font-size:13px}
html.v3 #view-page .save-status:empty{display:none}
html.v3 #view-page .save-status.ok{color:var(--v3-page-ok)}
html.v3 #view-page .view-live{color:var(--royal-lo);font-size:13px;font-weight:600}
html.v3 #view-page .view-live.is-pending{color:var(--muted);opacity:1}
@media (min-width:761px){ html.v3 #view-page .editor-col .editor-actions{bottom:12px} }
@media (min-width:600px) and (max-width:760px){ html.v3 #studio.adm-shell #view-page .editor-col .editor-actions{bottom:12px} }

/* The preview: a card with the Hub's own controls. On one column it is as tall as the page it shows, as it always was. */
html.v3 #view-page .preview-head{flex-wrap:wrap;gap:8px 12px;padding:10px 12px 10px 18px;border-bottom-color:var(--v3-line-2);font-size:15.5px}
html.v3 #view-page .preview-frame{background:var(--v3-gray)}
/* Beside the editor it stays in view: the card fits the window and scrolls the page it shows, its heading staying on top.
   The card scrolls, not the frame: the frame's height is the page at its scaled size, while what is inside it keeps its
   full size, so a frame that scrolled would run on past the end of the page. The scrollbar keeps its room whether it
   shows or not, so the width applyPreviewScale reads never changes under it. */
@media (min-width:1241px){
  html.v3 #studio #view-page .side-col{position:sticky;top:calc(var(--v3-top-h) + 16px)}
  html.v3 #view-page .preview{max-height:calc(100vh - var(--v3-top-h) - 32px);overflow:hidden auto;scrollbar-width:thin;scrollbar-gutter:stable}
  html.v3 #view-page .preview-head{position:sticky;top:0;z-index:1;background:var(--card)}
  html.v3 body.impersonating #studio #view-page .side-col{top:calc(var(--v3-top-h) + 62px)}
  html.v3 body.impersonating #view-page .preview{max-height:calc(100vh - var(--v3-top-h) - 78px)}
}

/* Tabbing down the form: the field in focus stops clear of the top bar and the Save bar. */
html.v3:has(#view-page:not([hidden])){scroll-padding-block:calc(var(--v3-top-h) + 12px) 88px}

/* Keyboard focus on what section 3 does not reach. A ring in a shadow is lost on these: an outline. */
html.v3 #view-page :is(.pf-ai,.ms-x,.ai-accept,.ai-regen,.ai-discard,.view-live):focus-visible,html.v3 #view-page .btn-upload:has(input:focus-visible){outline:2px solid var(--royal-2);outline-offset:2px}

/* A finger, on any screen: the classic 44px. On a consultant's phone styles.css asks this already; the admin shell's rule stops at #view-admin. */
@media (max-width:760px),(pointer:coarse){
  html.v3 #view-page :is(.undo-group,.preview-controls) .btn-ghost,html.v3 #view-page .preview-controls .seg-btn,html.v3 #view-page .pf:has(> .image-row) .btn-upload,html.v3 #view-page .meter-missing .mm-link,html.v3 #view-page :is(.ai-accept,.ai-regen,.ai-discard),html.v3 #view-page .ms-opt{min-height:44px}
  html.v3 #view-page .editor-actions .btn{height:44px}
  html.v3 #view-page a.view-live{display:inline-flex;align-items:center;min-height:44px}
  html.v3 #view-page .ms-x{position:relative}
  html.v3 #view-page .ms-x::after{content:"";position:absolute;inset:-13px -6px}
  /* Improve stays small to the eye; its line is 34px and the tap reaches 44px, stopping short of the words in the box. */
  html.v3 #view-page .pf.has-ai .pf-label{min-height:34px;display:flex;align-items:center;margin-bottom:2px}
  html.v3 #view-page .pf.has-ai .pf-ai{top:3px}
  html.v3 #view-page .pf.has-ai .pf-ai::after{content:"";position:absolute;inset:-9px -6px}
}

/* A phone: 16px type in the boxes (under that, iPhones zoom the page on every tap), tighter cards. */
@media (max-width:760px){
  html.v3 #studio #view-page{padding:4px 16px 20px}
  html.v3 #view-page .coach-strip{margin-bottom:14px;padding:14px 16px;border-radius:16px}
  html.v3 #view-page .coach-strip::after{display:none}
  html.v3 #view-page .coach-strip .coach-card h4{font-size:14.5px}
  html.v3 #view-page .coach-strip .coach-card p{font-size:13px}
  html.v3 #view-page .coach-strip .coach-nudge{margin-top:10px;padding-top:10px}
  html.v3 #view-page .editor-head{padding:14px 14px 16px}
  /* The greeting keeps the whole line; the percent goes beside the bar. */
  html.v3 #view-page .editor-head > div:first-child{grid-column:1 / -1}
  html.v3 #view-page .meter-bar{grid-column:1;align-self:center;margin-top:10px}
  html.v3 #view-page .meter-label{grid-column:2;grid-row:2;margin-top:10px;font-size:12.5px}
  html.v3 #view-page .editor-head:has(+ .meter-missing:not([hidden])){padding-bottom:12px}
  html.v3 #view-page .meter-missing{padding:10px 14px 14px}
  html.v3 #view-page .group-title{padding:12px 14px}
  html.v3 #view-page .group-body{padding:14px}
  html.v3 #view-page .pf :is(input:not([type=file]),textarea,select){font-size:16px}
  html.v3:has(#view-page:not([hidden])){scroll-padding-block:72px 132px}
  html.v3 #view-page .preview-head{padding:8px 10px 10px 14px}
  html.v3 #view-page .preview-controls{flex:1 1 100%;justify-content:space-between}
  /* The bar: edge to edge on the tab bar, one row. Undo and Redo, then Save in the room left; the status and the live link under them when they have words. */
  html.v3 #view-page .editor-col .editor-actions{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 8px;align-items:center;margin:14px -16px 0;padding:7px 16px;border-width:1px 0 0;border-radius:0;box-shadow:var(--v3-page-phone-bar-shadow)}
  html.v3 #view-page .undo-group{grid-column:1;margin-right:0}
  html.v3 #view-page .editor-actions .btn{grid-column:2 / -1;width:100%;min-width:0;padding:0 10px;font-size:15px}
  html.v3 #view-page .editor-actions .save-status{grid-column:1 / 3;grid-row:2;min-width:0;line-height:1.35}
  html.v3 #view-page .editor-actions .view-live{grid-column:3;grid-row:2;margin-block:-6px}
}
/* The toast stands above the bar, not on Save. */
@media (max-width:760px){ html.v3 body:has(#studio:not(.adm-shell):not([hidden]) #view-page:not([hidden])) .toast{bottom:calc(var(--v3-tab-bar-h) + 104px + env(safe-area-inset-bottom,0px))} }
@media (max-width:599px){ html.v3 body:has(#studio.adm-shell:not([hidden]) #view-page:not([hidden])) .toast{bottom:calc(var(--v3-tab-bar-h) + 104px + env(safe-area-inset-bottom,0px))} }
/* The admin shell's phone keeps the admin's gutters (14px), and its own top. */
@media (max-width:599px){
  html.v3 #studio.adm-shell #view-page{padding:14px 14px 40px}
  html.v3 #studio.adm-shell #view-page .editor-col .editor-actions{margin:14px -14px 0;padding:7px 14px}
}
@media (min-width:600px) and (max-width:1023px){ html.v3 #studio.adm-shell #view-page{padding:20px 16px 48px} }
/* Between 600 and 760px an admin has no tab bar: the bar stays a floating card. */
@media (min-width:600px) and (max-width:760px){
  html.v3 #studio.adm-shell #view-page .editor-col .editor-actions{margin:14px 0 0;padding:7px 10px;border-width:1px;border-radius:var(--radius-lg);box-shadow:var(--v3-page-bar-shadow)}
}

/* Forced colours: the banner's faint ring would be painted solid, across the words; the chevron goes back to the browser's own.
   The tinted chips and Improve keep an edge there through their transparent borders. */
@media (forced-colors:active){
  html.v3 #view-page .coach-strip::after{display:none}
  html.v3 #view-page .pf > select:not([multiple]){-webkit-appearance:auto;appearance:auto;background-image:none}
}

/* ── 23. PPA > PACKAGES (admin): Packages, Billing and notices, a package's panel ───────────────────────────
   The look of PPA Meetings, on the Hub's own pieces (the prototype has no screen for this). Each card has its
   title and help, then its rows edge to edge; Packages has its filters as the card's toolbar. The tables are still
   the tables: every column, the row's own button, a click anywhere on the row, Resend, Billed and the October offer
   on the row. Their header rows stay for screen readers. From 600px a row reads: a face and the name, the package
   under the name; the bar (Packages) or the notices (Billing), when they enrolled under that; how many are left or
   the Billed box; the status or the offer; a chevron. The words a hidden header used to give are drawn beside each
   value ("Enrolled", "4 left", "Notices", "Billed", "October offer"), never inside the label round the Billed box,
   which would make the word part of the box. The rules place the cells by position, and both tables draw theirs in the
   same six places (test-design-switch pins both orders). Under 600px the classic phone cards stay as styles.css
   draws them (DESIGN.md rule 8): same cells, same order, same labels. Here they lose their boxes, so the cards read
   as one list, and take a face and the new colours; the one named exception is Billed's own line. A package's panel, opened from a row or from
   search, reads like a meeting's: a face by the name, the facts in one bordered list, the buttons along the foot;
   from 1360px the page makes room for it, narrower it lies over the dimmed list, and on a phone it is a sheet.
   The October offer's dialog is the same dialog, with the same frame round the same email; on a phone a sheet.
   Faces and the marks on the panel and the open row come from what is on screen (app.js, PACKAGES). Nothing is
   loaded differently: the program list keeps its place at the top of the page, and neither card's height
   while loading is set here, so each card comes near the screen when it always did (DESIGN.md rule 4). */
html.v3{
  --v3-pkg-hover:#f8f9fc; --v3-pkg-chev:#b2bacb; --v3-pkg-dim:rgba(11,28,62,.18); --v3-pkg-sheet-top:96px;
  --v3-pkg-near:#d39a1f; --v3-pkg-full:#2b9f6e;
  --v3-pkg-ok:#13704a; --v3-pkg-err:#b92a24;
  --v3-pkg-ok-line:#cbe9da; --v3-pkg-amb-line:#f1dca6; --v3-pkg-blue-line:#d5e3f8;
}
/* The cards: no padding of their own, so the toolbar and the rows run edge to edge. */
html.v3 #studio.adm-shell #view-admin :is(#ppa-program-card,#ppa-admin-card){padding:0;overflow:hidden}
html.v3 #studio.adm-shell #view-admin :is(#ppa-program-card,#ppa-admin-card) > .admin-head{padding:16px 18px 0}
html.v3 #studio.adm-shell #view-admin :is(#ppa-program-card,#ppa-admin-card) > .admin-head + p.muted{margin:2px 18px 14px;font-size:12.5px}
/* Packages' filters, as the card's toolbar: the status on the left, the consultant on the right. */
html.v3 #studio.adm-shell #view-admin #ppa-program-card > .ppa-filters{margin:0;padding:12px 14px;gap:8px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html.v3 #studio.adm-shell #view-admin #ppa-program-card > .ppa-filters > .ppa-select{height:36px;max-width:min(260px,100%);margin-left:auto;padding:0 10px;border-width:1px;border-radius:10px;font-size:13px}
/* The lists, and what stands in for the rows: nothing to list, loading, a load that failed. */
html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list,#ppa-program-list > .table-wrap,#ppa-admin-list){margin:0}
html.v3 #studio.adm-shell #view-admin #ppa-admin-list{border-top:1px solid var(--line)}
html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list,#ppa-admin-list) > p:not(.adm-sort-note){margin:0;padding:40px 24px;text-align:center;font-size:13.5px}
html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list,#ppa-admin-list) > .skel{padding:16px 18px}
/* "Sorted fullest first", from Today: a tinted line over the rows, its button at the end. */
html.v3 #studio.adm-shell #view-admin #ppa-program-list > .adm-sort-note{margin:0;padding:9px 16px;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--v3-pkg-blue-line);background:var(--v3-blue-bg);color:var(--v3-body);font-size:12.5px}
/* What the October offer says on the page: its preview, its result, a refusal. */
html.v3 #ppa-promo-out{margin:0 18px 14px}
html.v3 #ppa-promo-out .gl-summary{padding:11px 14px;border:1px solid var(--v3-pkg-blue-line);border-radius:12px;background:var(--v3-blue-bg);color:var(--ink);font-size:13px}
html.v3 #ppa-promo-out .gl-summary.ok{border-color:var(--v3-pkg-ok-line);background:var(--ok-bg);color:var(--v3-pkg-ok)}
html.v3 #ppa-promo-out .gl-summary.warn{border-color:var(--v3-pkg-amb-line);background:var(--st-amber-bg);color:var(--st-amber)}
/* The pills, the same everywhere on this screen, and each at 4.5:1 on its tint (the Hub's --ok reads 3.1:1 on its own). */
html.v3 :is(#studio.adm-shell #view-admin #ppa-program-list,#studio.adm-shell #view-admin #ppa-admin-list,.adm-sp[data-v3-pkg]) .pill.invited{background:var(--v3-blue-bg);color:var(--royal-lo)}
html.v3 :is(#studio.adm-shell #view-admin #ppa-program-list,.adm-sp[data-v3-pkg]) .pill.active{background:var(--ok-bg);color:var(--v3-pkg-ok)}
html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list,#ppa-admin-list) .st-red{color:var(--v3-pkg-err)}
/* The bar: blue, amber when nearly used, green when full, from the status beside it. Its width stays the server's. */
html.v3 #studio.adm-shell #view-admin #ppa-program-list .use-bar{background:var(--v3-gray)}
html.v3 #studio.adm-shell #view-admin #ppa-program-list tr:has(.pill.near) .use-bar i{background:var(--v3-pkg-near)}
html.v3 #studio.adm-shell #view-admin #ppa-program-list tr:has(.pill.active) .use-bar i{background:var(--v3-pkg-full)}

/* The rows, from 600px. The phone's cards are below, and are left to styles.css. */
@media (min-width:600px){
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid{display:block;width:100%;border:0}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody{display:block}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 64px minmax(136px,.55fr) 14px;
    column-gap:14px;align-items:center;min-height:58px;padding:10px 16px 10px 58px;border-top:1px solid var(--v3-line-2)}
  html.v3 #studio.adm-shell #view-admin #ppa-program-list > .table-wrap > table.grid > tbody > tr,html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr{grid-template-areas:"who mid nar wid chev" "sub enr nar wid chev"}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr:first-child{border-top:0}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr > td{display:block;min-width:0;padding:0;border:0;background:transparent;font-size:13px;line-height:1.45;color:var(--ink);white-space:normal;overflow-wrap:break-word}
  /* The name, and the package under it: a long name breaks inside its own column. */
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr > td:nth-child(1){grid-area:who;align-self:end;font-size:13.5px;overflow-wrap:anywhere}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr > td:nth-child(1) .row-link{max-width:100%;font-weight:700}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr > td:nth-child(2){grid-area:sub;align-self:start;font-size:12px;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #ppa-program-list > .table-wrap > table.grid > tbody > tr > td:nth-child(2) .st{padding:1px 8px}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr > td:nth-child(3){grid-area:enr;align-self:start;font-size:12px;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr > td:nth-child(3)::before{content:"Enrolled ";content:"Enrolled " / ""}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr > td:nth-child(4){grid-area:mid;align-self:end}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr > td:nth-child(5){grid-area:nar}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr > td:nth-child(6){grid-area:wid;justify-self:start}
  /* Packages: the bar fills its column; the count of what is left is the classic number, with its word. */
  html.v3 #studio.adm-shell #view-admin #ppa-program-list > .table-wrap > table.grid > tbody > tr > td:nth-child(4){display:grid;grid-template-columns:minmax(0,1fr) 54px;column-gap:10px;align-items:center;font-weight:600;white-space:nowrap}
  html.v3 #studio.adm-shell #view-admin #ppa-program-list > .table-wrap > table.grid > tbody > tr > td:nth-child(4) .use-bar{width:auto;height:8px;margin:0}
  html.v3 #studio.adm-shell #view-admin #ppa-program-list > .table-wrap > table.grid > tbody > tr > td:nth-child(5){font-size:12.5px;color:var(--muted);text-align:left;white-space:nowrap}
  html.v3 #studio.adm-shell #view-admin #ppa-program-list > .table-wrap > table.grid > tbody > tr > td:nth-child(5)::after{content:" left";content:" left" / ""}
  /* Billing: each control keeps its column's word beside it, outside the control. */
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr > td:nth-child(4){display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;font-size:12.5px}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr > td:nth-child(4)::before{content:"Notices";content:"Notices" / "";color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr > td:nth-child(4) > .muted{font-size:12.5px;font-weight:600;color:var(--ink)}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr > td:nth-child(5){display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font-size:12.5px;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr > td:nth-child(5)::before{content:"Billed";content:"Billed" / ""}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr > td:nth-child(5) .muted{font-size:12px}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr > td:nth-child(6){display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr > td:nth-child(6) > .muted{font-size:12px;line-height:1.4}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr > td:nth-child(6):has(> button)::before{content:"October offer";content:"October offer" / ""}
  /* The row's two small buttons. */
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr .btn-ghost{min-height:26px;padding:0 10px;border-radius:9px;font-size:12.5px;white-space:nowrap}
  /* The chevron, and the faces: the name is right beside each, so screen readers are given nothing for it. */
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr::after{content:"";grid-area:chev;width:14px;height:14px;background:var(--v3-pkg-chev);-webkit-mask:var(--ic-chevright) center/contain no-repeat;mask:var(--ic-chevright) center/contain no-repeat}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr > td:nth-child(1)[data-v3-face]::before{content:attr(data-v3-face);content:attr(data-v3-face) / "";position:absolute;left:16px;top:50%;width:32px;height:32px;margin-top:-16px;
    border-radius:50%;display:grid;place-items:center;background:var(--v3-face,var(--v3-face-7));color:#fff;font-size:11px;font-weight:700;line-height:1;letter-spacing:0}
  /* The row whose panel is open (app.js marks it), and the row's button in focus. */
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr[data-v3-open]{background:var(--v3-blue-bg);box-shadow:inset 3px 0 0 var(--royal)}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr:has(.row-link:focus-visible){box-shadow:inset 0 0 0 2px var(--royal-2)}
}
@media (min-width:600px) and (hover:hover){ html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr:hover{background:var(--v3-pkg-hover)} }
/* From 600 to 759px there is no room for five columns: what is left goes under the status, the offer under Billed. */
@media (min-width:600px) and (max-width:759px){
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 136px 14px;column-gap:12px}
  html.v3 #studio.adm-shell #view-admin #ppa-program-list > .table-wrap > table.grid > tbody > tr{grid-template-areas:"who mid wid chev" "sub enr nar chev"}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr{grid-template-areas:"who mid nar chev" "sub enr wid chev"}
  html.v3 #studio.adm-shell #view-admin #ppa-program-list > .table-wrap > table.grid > tbody > tr > td:nth-child(6){align-self:end}
  html.v3 #studio.adm-shell #view-admin #ppa-program-list > .table-wrap > table.grid > tbody > tr > td:nth-child(5){align-self:start}
}

/* A package's panel, and an enrolment's: a face by the name, the facts as one bordered list. */
html.v3 .adm-sp[data-v3-pkg] .adm-sp-head > div[data-v3-face]{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:11px;align-items:center;min-width:0}
html.v3 .adm-sp[data-v3-pkg] .adm-sp-head > div[data-v3-face]::before{content:attr(data-v3-face);content:attr(data-v3-face) / "";grid-row:1 / span 2;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--v3-face,var(--v3-face-7));color:#fff;font-size:14px;font-weight:700;line-height:1;letter-spacing:0}
html.v3 .adm-sp[data-v3-pkg] .adm-sp-head > div[data-v3-face] > *{grid-column:2;min-width:0}
html.v3 .adm-sp[data-v3-pkg] .adm-sp-body > dl{grid-template-columns:max-content minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:12px}
html.v3 .adm-sp[data-v3-pkg] .adm-sp-body > dl > :is(dt,dd){padding:9px 12px;border-top:1px solid var(--v3-line-2)}
html.v3 .adm-sp[data-v3-pkg] .adm-sp-body > dl > :is(dt,dd):nth-child(-n+2){border-top:0}
html.v3 .adm-sp[data-v3-pkg] .adm-sp-body > dl > dt{padding-right:0;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
html.v3 .adm-sp[data-v3-pkg] .adm-sp-body > dl > dd{font-size:13px;font-weight:600;color:var(--ink);text-align:right}
html.v3 .adm-sp[data-v3-pkg] .adm-sp-note{font-size:12.5px;line-height:1.5}
html.v3 .adm-sp[data-v3-pkg] .adm-sp-actions .adm-btn{min-height:38px;padding:0 15px;border-radius:11px;font-size:13.5px}
/* From 1360px the page makes room for the panel, so the open row stays in view; narrower, the panel lies over the
   dimmed list. The layer that catches a click beside the panel is there either way. Only the right side makes room,
   so the list does not jump sideways when a panel opens. */
@media (min-width:600px) and (max-width:1359px){
  html.v3 body:has(> .adm-sp[data-v3-pkg]) > .adm-sp-ov{background:var(--v3-pkg-dim)}
}
@media (min-width:1360px){
  html.v3 body:has(> .adm-sp[data-v3-pkg]) #studio.adm-shell #view-admin:has(> #admin-page-ppa-packages:not([hidden])){margin-left:max(0px,calc((100% - 1320px) / 2));margin-right:404px}
}

/* The October offer's dialog: the classic dialog in the new type. The email stays in its frame, as it will be sent. */
html.v3 .terms-modal.promo-modal{padding:22px 24px;border-radius:var(--radius-lg)}
html.v3 .promo-modal h2{margin:0;font-size:17px;font-weight:700;letter-spacing:0;color:var(--ink)}
html.v3 .promo-modal ul{margin:10px 0 12px 18px;font-size:13.5px;color:var(--v3-body)}
html.v3 .promo-modal p{font-size:13.5px}
html.v3 .promo-modal .promo-email{flex:none;margin-top:6px;border-color:var(--line);border-radius:12px}
html.v3 .promo-modal .promo-actions{margin-top:14px}
html.v3 .promo-modal .promo-actions .btn-ghost{min-height:40px;padding:0 18px;border:1px solid var(--line);border-radius:11px;font-size:14px;font-weight:600;color:var(--ink)}

/* On a phone (599px and narrower). The cells, their order and their labels are the classic phone card's; the box round
   each card goes, so they read as one list, and each takes a face in its margin. */
@media (max-width:599px){
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-card,#ppa-admin-card) > .admin-head{padding:14px 14px 0}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-card,#ppa-admin-card) > .admin-head + p.muted{margin:4px 14px 12px}
  html.v3 #studio.adm-shell #view-admin #ppa-program-card > .ppa-filters{padding:12px 14px 14px}
  /* The filter as the prototype's chips: white, the chosen one navy, each with a 44px touch area. */
  html.v3 #studio.adm-shell #view-admin #ppa-program-card > .ppa-filters > .seg{width:100%;padding:0;gap:8px 6px;background:transparent}
  html.v3 #studio.adm-shell #view-admin #ppa-program-card > .ppa-filters > .seg > .seg-btn{position:relative;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--v3-body);font-size:13px;box-shadow:none}
  html.v3 #studio.adm-shell #view-admin #ppa-program-card > .ppa-filters > .seg > .seg-btn::before{content:"";position:absolute;inset:-4px 0}
  html.v3 #studio.adm-shell #view-admin #ppa-program-card > .ppa-filters > .seg > .seg-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
  html.v3 #studio.adm-shell #view-admin #ppa-program-card > .ppa-filters > .ppa-select{flex:1 1 100%;min-width:0;max-width:none;height:44px;margin-left:0;font-size:16px}
  html.v3 #ppa-promo-out{margin:0 14px 12px}
  html.v3 #studio.adm-shell #view-admin #ppa-program-list > .adm-sort-note{padding:9px 14px}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody{gap:0}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr{position:relative;margin:0;padding:12px 14px 12px 56px;border:0;border-top:1px solid var(--v3-line-2);border-radius:0;background:transparent}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr:first-child{border-top:0}
  /* Billed stands on its own line (Mario, 4 Nov 2026). On one line with the date, or just under it, a finger aimed at the
     date snapped to the box, at 320 and 360px in Chrome. The line is a full touch height with the box centred in it, so
     the box's touch area below stays on the line. And the line keeps its distance, because Chrome's tap snaps to the box from
     up to 16px off, even from on top of a word: 18px to the word "Billed", and 13px above the line and, where the offer's
     cell has anything in it, 13px below, which with the row's 3px gap leaves the area 17.5px from the words either side. A
     row with nothing in that cell needs no margin below. */
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr > td:nth-child(5){flex:0 0 100%;display:flex;align-items:center;gap:18px;min-height:44px;margin-top:13px}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list > table.grid > tbody > tr:has(> td:nth-child(6):not(:empty)) > td:nth-child(5){margin-bottom:13px}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr > td:nth-child(1)[data-v3-face]::before{content:attr(data-v3-face);content:attr(data-v3-face) / "";position:absolute;left:14px;top:12px;width:30px;height:30px;
    border-radius:50%;display:grid;place-items:center;background:var(--v3-face,var(--v3-face-7));color:#fff;font-size:11px;font-weight:700;line-height:1;letter-spacing:0}
  /* The panel is a sheet from the bottom, under the page's title, across the whole width (the classic panel is 460px, so
     from 461px it would leave the list live beside it). The layer that closes it covers what shows above the sheet. */
  html.v3 .adm-sp[data-v3-pkg]{top:calc(var(--v3-pkg-sheet-top) + env(safe-area-inset-top,0px));left:0;width:auto;padding-top:0;border-radius:24px 24px 0 0;box-shadow:var(--v3-sheet-shadow)}
  html.v3 body:has(> .adm-sp[data-v3-pkg]) > .adm-sp-ov{bottom:auto;height:calc(var(--v3-pkg-sheet-top) + 24px + env(safe-area-inset-top,0px));background:var(--v3-scrim)}
  html.v3 .adm-sp[data-v3-pkg] > .adm-sp-head{position:relative;padding:24px 12px 14px 16px}
  html.v3 .adm-sp[data-v3-pkg] > .adm-sp-head::before{content:"";position:absolute;top:9px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:5px;background:var(--v3-hover-line)}
  html.v3 .adm-sp[data-v3-pkg] .adm-sp-close{min-width:44px;min-height:44px}
  html.v3 .adm-sp[data-v3-pkg] .adm-sp-head > div[data-v3-face]{grid-template-columns:42px minmax(0,1fr);column-gap:10px}
  html.v3 .adm-sp[data-v3-pkg] .adm-sp-head > div[data-v3-face]::before{width:42px;height:42px;font-size:13px}
  html.v3 .adm-sp[data-v3-pkg] .adm-sp-body{padding:14px 16px 18px}
  html.v3 .adm-sp[data-v3-pkg]:not(:has(> .adm-sp-actions)) .adm-sp-body{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  html.v3 .adm-sp[data-v3-pkg] .adm-sp-actions{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  html.v3 .adm-sp[data-v3-pkg] .adm-sp-actions .adm-btn{min-height:44px}
  /* The October offer's dialog, a sheet too. Cancel and Upgrade stay in view while the email scrolls. */
  html.v3 .terms-ov:has(> .promo-modal){align-items:flex-end;padding:0}
  html.v3 .terms-modal.promo-modal{width:100%;max-height:calc(100dvh - 40px - env(safe-area-inset-top,0px));padding:24px 16px 0;border:0;border-radius:24px 24px 0 0;box-shadow:var(--v3-sheet-shadow)}
  html.v3 .promo-modal .promo-email{height:300px}
  html.v3 .promo-modal .promo-actions{position:sticky;bottom:0;margin:12px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--card)}
  html.v3 .promo-modal .promo-actions > button{flex:1 1 0;min-height:44px}
}
/* A finger: a touch area round the Billed box, and round the row's small buttons from 600px (on a phone they are 44px
   already). Both are drawn over nothing, so the row keeps its height. A tap on the box acts at once: unticking sends with no
   question, and ticking asks first (since 4 Nov 2026), but a confirm nobody meant is still a fault. So its area only ever
   covers free space: it grows up, down and right, never left over the word "Billed", and the box, Resend, Apply and the
   row's other cells all stand over it, so a tap on a word (the date, "October offer") opens the row, as it always
   did. A finger's tap snaps to anything clickable a few pixels off, so in a row with an offer the area stops well short of
   that word (a cell standing over it is not enough at the word's first letter). That makes it 41px square where the row has
   room and smaller where a word stands close, which is the better way round. The name's cell stays below: its face is
   placed against the row, and only the blank end of its line is ever in reach. */
@media (max-width:599px),(pointer:coarse){
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list .ppa-billed{position:relative}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list .ppa-billed::after{content:"";position:absolute;inset:-14px -28px -14px 0}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list tr:has(> td:nth-child(6):not(:empty)) .ppa-billed::after{right:-4px}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list .ppa-billed > input,html.v3 #studio.adm-shell #view-admin #ppa-admin-list tbody .btn-ghost{position:relative;z-index:1}
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list tbody td:is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(6)){position:relative;z-index:1}
}
@media (min-width:600px) and (pointer:coarse){
  html.v3 #studio.adm-shell #view-admin #ppa-admin-list tbody .btn-ghost::after{content:"";position:absolute;inset:-9px 0}
}
/* Forced colours paint no backgrounds: the faces go (the names stay), the chevrons and the bars are drawn in the text colour. */
@media (forced-colors:active){
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr > td:nth-child(1)[data-v3-face]::before,html.v3 .adm-sp[data-v3-pkg] .adm-sp-head > div[data-v3-face]::before{display:none}
  html.v3 #studio.adm-shell #view-admin :is(#ppa-program-list > .table-wrap,#ppa-admin-list) > table.grid > tbody > tr::after,html.v3 #studio.adm-shell #view-admin #ppa-program-list .use-bar i{forced-color-adjust:none;background:CanvasText}
}

/* ── 24. CONSULTANTS (admin): the list, one consultant's page and its five tabs, Account ─────────────────────
   The prototype has no screen for these, so they are drawn in its language from the Hub's own pieces. The list is one
   card: its title and line, the search as the card's toolbar, the people as list rows with faces. A consultant's page
   opens with a banner, as Today does: the face, the name, the classic line and both buttons. Overview is a strip of
   four numbers (Today's tiles) and the funnel; from 1360px Ask stands beside it. PPA, Meetings and Posts are list rows
   in cards, like Packages and PPA Meetings; the tables are still the tables, with every column and the row's own button,
   and their header rows stay for screen readers. The words a hidden header used to give are drawn beside each value,
   with no text for a screen reader. Outreach history keeps its reasons table; its conversations read as rows, and from
   1360px the form stands beside them. Rules place the cells by position, and test-design-switch pins each table's order.
   Under 600px the classic phone cards stay as styles.css draws them (DESIGN.md rule 8): here they only lose their boxes
   and take a face. Account and a meeting's read-only panel carry the mark of a package's panel (section 23), so one look
   has one set of rules, the phone's sheet included; from 1360px the Meetings tab makes room for a panel, as PPA Meetings
   does. Marks only in app.js (CONSULTANTS). Nothing here gives a card a height while it loads or moves one down the
   page, and each page's first card stays at its top, so every read fires when it always did (DESIGN.md rule 4). */
html.v3{
  --v3-cons-hero:linear-gradient(120deg,#0b1c3e 0%,#173a78 62%,#21509e 100%);
  --v3-cons-hover:#f8f9fc; --v3-cons-chev:#b2bacb; --v3-cons-dim:rgba(11,28,62,.18);
  --v3-cons-ok:#13704a; --v3-cons-err:#b92a24; --v3-cons-amb-line:#f1dca6;
}
/* The pills on these screens, each at 4.5:1 on its tint (the Hub's green reads 3.1:1 on its own). */
html.v3 #studio.adm-shell #view-admin :is(#consultants-card,#adm-blurb,#cp-ppa-card,#cp-meetings-card,#cp-posts-card) .st-green{color:var(--v3-cons-ok)}
html.v3 #studio.adm-shell #view-admin :is(#cp-ppa-card,#cp-meetings-card) .st-red{color:var(--v3-cons-err)}
/* A package's status on the PPA tab: the same pill, so the same colours as on Packages. */
html.v3 #studio.adm-shell #view-admin #cp-ppa .pill.active{background:var(--ok-bg);color:var(--v3-cons-ok)}
html.v3 #studio.adm-shell #view-admin #cp-ppa .pill.invited{background:var(--v3-blue-bg);color:var(--royal-lo)}

/* THE LIST. The card has no padding of its own, so the toolbar and the rows run edge to edge. The band and the magnifier
   are drawn on the card, in the search box's own grid cell: the box has no wrapper to carry them. */
html.v3 #studio.adm-shell #view-admin #consultants-card{display:grid;grid-template-columns:minmax(0,1fr);padding:0;overflow:hidden}
html.v3 #studio.adm-shell #view-admin #consultants-card > h1{grid-row:1;padding:16px 18px 0}
html.v3 #studio.adm-shell #view-admin #consultants-card > h1 + p.muted{grid-row:2;margin:2px 18px 14px;font-size:12.5px}
html.v3 #studio.adm-shell #view-admin #consultants-card::before{content:"";grid-row:3;grid-column:1;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html.v3 #studio.adm-shell #view-admin #consultants-card::after{content:"";grid-row:3;grid-column:1;justify-self:start;align-self:center;width:15px;height:15px;margin-left:26px;background:var(--muted);pointer-events:none;
  -webkit-mask:var(--ic-search) center/contain no-repeat;mask:var(--ic-search) center/contain no-repeat}
html.v3 #studio.adm-shell #view-admin #consultants-card > #consultant-search{grid-row:3;grid-column:1;width:100%;max-width:min(340px,calc(100% - 28px));height:36px;margin:12px 14px;padding:0 12px 0 34px;border-width:1px;border-radius:10px;font-size:13px}
html.v3 #studio.adm-shell #view-admin #consultants-card > #consultant-table{grid-row:4;margin:0}
html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap{margin:0}
/* What stands in for the rows: nothing to list, loading, a load that failed. */
html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-ppa,#cp-meetings,#cp-posts) > p.tbl-state{margin:0;padding:40px 24px;text-align:center;font-size:13.5px}
html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-ppa,#cp-meetings,#cp-posts,#cp-overview) > .skel{padding:16px 18px}

/* THE BANNER, on all five tabs (and "Consultant not found"): the crumb shows on those pages and no other. */
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])){position:relative;overflow:hidden;align-items:center;margin:0 0 12px;padding:22px 26px;border-radius:20px;background:var(--v3-cons-hero);color:#fff}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden]))::after{content:"";position:absolute;right:-60px;bottom:-90px;width:320px;height:320px;border-radius:50%;border:40px solid var(--v3-hero-ring);pointer-events:none}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-head-main{position:relative;z-index:1;align-items:center;min-width:0}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-person{width:60px;height:60px;box-shadow:0 0 0 3px var(--v3-glass-line);font-size:20px}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-person[data-v3-face]{background:var(--v3-face);color:#fff}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-crumb{color:var(--v3-hero-hi);font-size:12.5px}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-crumb{position:relative}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-crumb:focus-visible{outline:2px solid #fff;outline-offset:2px}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) h1{color:#fff;line-height:1.3;overflow-wrap:anywhere}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) p{margin-top:3px;max-width:none;color:var(--v3-hero-hi);font-size:13px;overflow-wrap:anywhere}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) p .st{margin-right:4px}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-head-action{position:relative;z-index:1}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-btn{border-color:transparent;background:#fff;color:var(--navy);box-shadow:none}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-btn:hover{background:var(--v3-blue-bg)}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-btn.ghost{border-color:var(--v3-glass-line);background:var(--v3-glass-btn);color:#fff}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-btn.ghost:hover{background:var(--v3-glass-line)}
html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* OVERVIEW. The four numbers are one strip in the card, Today's tiles without their boxes; what follows has the card's
   gutter. */
html.v3 #studio.adm-shell #view-admin #cp-overview-card{padding:0;overflow:hidden}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;border-bottom:1px solid var(--line)}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile{position:relative;gap:2px;min-width:0;padding:16px 14px 14px;border:0;border-left:1px solid var(--v3-line-2);border-radius:0;background:transparent;box-shadow:none}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile:first-child{border-left:0}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile::before{content:"";order:-2;width:34px;height:34px;margin-bottom:10px;border-radius:10px;background:var(--v3-blue-bg)}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile::after{content:"";position:absolute;left:22px;top:24px;width:18px;height:18px;background:var(--royal);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile .today-tile-l{order:-1;font-size:12px;font-weight:600;color:var(--muted)}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile .today-tile-n{margin-top:2px;font-size:22px;font-weight:800;letter-spacing:-.02em}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile .today-tile-d{margin-top:2px;font-size:12px;font-weight:500}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile:nth-child(1){--i:var(--ic-box)}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile:nth-child(2){--i:var(--ic-pen)}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile:nth-child(2)::before{background:var(--v3-amb-tint)}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile:nth-child(2)::after{background:var(--st-amber)}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile:nth-child(3){--i:var(--ic-send)}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile:nth-child(3)::before{background:var(--v3-ok-tint)}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile:nth-child(3)::after{background:var(--v3-cons-ok)}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile:nth-child(4){--i:var(--ic-clock)}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile:nth-child(4)::before{background:var(--v3-gray)}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile:nth-child(4)::after{background:var(--muted)}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-note{margin:14px 18px 0;font-size:13px}
html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-h{margin:18px 18px 2px;font-size:15.5px;font-weight:700}
html.v3 #studio.adm-shell #view-admin #cp-overview > :is(.outreach-nocrm,.outreach-window,.cp-callout,.tbl-state,.cp-missing){margin:8px 18px 0;font-size:13px;line-height:1.5}
html.v3 #studio.adm-shell #view-admin #cp-overview > .table-wrap{margin:10px 18px 0}
html.v3 #studio.adm-shell #view-admin #cp-overview > :last-child:not(.cp-tiles):not(.skel){margin-bottom:18px}
html.v3 #studio.adm-shell #view-admin #cp-overview > p.tbl-state:only-child{margin:0;padding:40px 24px;text-align:center;font-size:13.5px}
/* The amber lines, on both pages that show them, as Reconciliation's. */
html.v3 #studio.adm-shell #view-admin :is(#cp-overview,#outreach-consultant-body) > :is(.outreach-window.ppa-recon-warn,.cp-callout){padding:10px 14px;border:1px solid var(--v3-cons-amb-line);border-radius:12px;background:var(--st-amber-bg);color:var(--ink);font-weight:500}

/* ASK. The form, the suggestions and the answers keep their order, in the prototype's card. */
html.v3 #studio.adm-shell #view-admin #cp-ask-card{padding:16px 18px 18px}
html.v3 #studio.adm-shell #view-admin #cp-ask-card > .adm-card-h{position:relative;min-height:32px;margin:0;padding-left:42px;font-size:15.5px;font-weight:700;line-height:32px}
html.v3 #studio.adm-shell #view-admin #cp-ask-card > .adm-card-h::before{content:"";position:absolute;left:0;top:0;width:32px;height:32px;border-radius:10px;background:var(--v3-blue-bg)}
html.v3 #studio.adm-shell #view-admin #cp-ask-card > .adm-card-h::after{content:"";position:absolute;left:7px;top:7px;width:18px;height:18px;background:var(--royal);-webkit-mask:var(--ic-spark) center/contain no-repeat;mask:var(--ic-spark) center/contain no-repeat}
html.v3 #studio.adm-shell #view-admin #cp-ask-card > .cp-ask-hint{margin:8px 0 0;font-size:12.5px;line-height:1.5}
html.v3 #studio.adm-shell #view-admin #cp-ask-card > .cp-ask-form{gap:8px;margin:12px 0 10px}
html.v3 #studio.adm-shell #view-admin #cp-ask-card > .cp-ask-form input{height:38px;padding:0 12px;border-radius:11px;font-size:13.5px}
html.v3 #studio.adm-shell #view-admin #cp-ask-card .cp-ask-chips{gap:6px}
html.v3 #studio.adm-shell #view-admin #cp-ask-card .cp-ask-chip{max-width:100%;padding:6px 12px;border-color:var(--line);background:#fff;font-size:12.5px;line-height:1.35;text-align:left}
html.v3 #studio.adm-shell #view-admin #cp-ask-card .cp-ask-chip:not(:disabled):hover{border-color:var(--v3-hover-line);background:var(--v3-blue-bg)}
html.v3 #studio.adm-shell #view-admin #cp-ask-card .cp-ask-chip:focus-visible{outline:2px solid var(--royal-2);outline-offset:2px;box-shadow:none}
html.v3 #studio.adm-shell #view-admin #cp-ask-card .cp-ask-answers{gap:10px;margin-top:14px}
html.v3 #studio.adm-shell #view-admin #cp-ask-card .cp-ask-item{padding:12px 14px;border:1px solid var(--line);border-radius:12px}
html.v3 #studio.adm-shell #view-admin #cp-ask-card .cp-ask-q{font-size:13px}
html.v3 #studio.adm-shell #view-admin #cp-ask-card .cp-ask-a :is(p,ul){font-size:13px}
html.v3 #studio.adm-shell #view-admin #cp-ask-card .cp-ask-a .cp-ask-from{margin-bottom:0;font-size:12px}
html.v3 #studio.adm-shell #view-admin #cp-ask-card .cp-ask-a .cp-ask-err{margin:0;color:var(--v3-cons-err)}
/* From 1360px Ask stands beside the Overview card; narrower it follows it, as in the classic design. */
@media (min-width:1360px){
  html.v3 #studio.adm-shell #admin-page-consultant{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:start}
}

/* PPA, MEETINGS, POSTS: cards with no padding of their own, their title, then the rows edge to edge. */
html.v3 #studio.adm-shell #view-admin :is(#cp-ppa-card,#cp-meetings-card,#cp-posts-card){padding:0;overflow:hidden}
html.v3 #studio.adm-shell #view-admin :is(#cp-ppa-card,#cp-meetings-card,#cp-posts-card) > .adm-card-h{margin:0;padding:16px 18px 12px;font-size:15.5px;font-weight:700}
html.v3 #studio.adm-shell #view-admin :is(#cp-ppa,#cp-meetings,#cp-posts) > .table-wrap{margin:0;border-top:1px solid var(--line)}
html.v3 #studio.adm-shell #view-admin #cp-ppa > .cp-note{margin:0;padding:12px 18px 0;border-top:1px solid var(--line);font-size:13px}
html.v3 #studio.adm-shell #view-admin #cp-ppa > .cp-actions{gap:8px;margin:0;padding:10px 18px 16px}
html.v3 #studio.adm-shell #view-admin #cp-posts > .cp-note{margin:-8px 0 0;padding:0 18px 12px;font-size:12.5px}
html.v3 #studio.adm-shell #view-admin #cp-meetings > .cp-record-hint{margin:0;padding:9px 16px;border-top:1px solid var(--line);background:var(--v3-blue-bg);color:var(--v3-body);font-size:12.5px}
html.v3 #studio.adm-shell #view-admin #cp-meetings > .ppa-pager{gap:8px;margin:0;padding:10px 16px;border-top:1px solid var(--line)}
html.v3 #studio.adm-shell #view-admin #cp-meetings > .ppa-pager > .muted{order:-1;margin-right:auto;font-size:12.5px;font-variant-numeric:tabular-nums}

/* OUTREACH HISTORY. The rank and its top reason, the reasons table, the conversations, the form. */
html.v3 #studio.adm-shell #view-admin #outreach-consultant-card{padding:16px 18px 18px}
html.v3 #studio.adm-shell #view-admin #outreach-consultant-card > .admin-head{margin:0 0 6px}
html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > p{margin:0 0 6px;font-size:13px;line-height:1.5}
html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > .outreach-top{font-size:14px}
html.v3 #studio.adm-shell #view-admin #outreach-consultant-body h3{font-size:15px;font-weight:700}
html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > p.tbl-state{margin:0;padding:18px 16px;border:1px dashed var(--v3-hover-line);border-radius:12px;font-size:13px;text-align:center}
html.v3 #studio.adm-shell #view-admin #outreach-touch-form .outreach-row{gap:6px 12px}
html.v3 #studio.adm-shell #view-admin #outreach-touch-form .outreach-lab{font-size:13px;font-weight:700}
html.v3 #studio.adm-shell #view-admin #outreach-touch-form .outreach-choice{gap:6px}
html.v3 #studio.adm-shell #view-admin #outreach-touch-form .outreach-choice label{padding:6px 12px;font-size:13px}
html.v3 #studio.adm-shell #view-admin #outreach-touch-form .outreach-choice label:has(input:checked){background:var(--v3-blue-bg);font-weight:600}
html.v3 #studio.adm-shell #view-admin #outreach-touch-form .outreach-choice label:has(input:focus-visible){outline:2px solid var(--royal-2);outline-offset:2px}
html.v3 #studio.adm-shell #view-admin #outreach-touch-form textarea{font-size:13.5px}
html.v3 #studio.adm-shell #view-admin #outreach-touch-form #outreach-touch-msg{font-size:12.5px}
/* From 1360px the form stands beside the reasons and the conversations. The last row takes what the form needs beyond
   them, so the rows on the left keep their own heights. The form stays last in the page, so the keyboard reaches it last. */
@media (min-width:1360px){
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body:has(> #outreach-touch-form){display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:repeat(8,auto) 1fr;column-gap:22px}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > *{grid-column:1}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > #outreach-touch-form{grid-column:2;grid-row:1 / -1;align-self:start;margin:0;padding:14px 16px 16px;border:1px solid var(--line);border-radius:14px;background:var(--v3-warm)}
  html.v3 #studio.adm-shell #view-admin #outreach-touch-form > h3{margin:0 0 2px}
  html.v3 #studio.adm-shell #view-admin #outreach-touch-form .outreach-row{grid-template-columns:minmax(0,1fr)}
  html.v3 #studio.adm-shell #view-admin #outreach-touch-form .outreach-lab{padding-top:0}
  html.v3 #studio.adm-shell #view-admin #outreach-touch-form .btn{width:100%;align-self:stretch}
}
/* The funnel and the reasons: the classic table in a line of its own, as Reconciliation's. */
@media (min-width:600px){
  html.v3 #studio.adm-shell #view-admin :is(#cp-overview,#outreach-consultant-body) > .table-wrap{border:1px solid var(--line);border-radius:12px}
  html.v3 #studio.adm-shell #view-admin :is(#cp-overview,#outreach-consultant-body) > .table-wrap:not(.tw-box){overflow:clip}
  html.v3 #studio.adm-shell #view-admin :is(#cp-overview,#outreach-consultant-body) > .table-wrap > table.grid th{padding:9px 12px;border-bottom:1px solid var(--line);font-size:11px;background:var(--card)}
  html.v3 #studio.adm-shell #view-admin :is(#cp-overview,#outreach-consultant-body) > .table-wrap > table.grid td{padding:10px 12px;border-bottom:1px solid var(--v3-line-2);font-size:13px}
  html.v3 #studio.adm-shell #view-admin :is(#cp-overview,#outreach-consultant-body) > .table-wrap > table.grid tr:last-child td{border-bottom:0}
}

/* THE ROWS, from 600px. The phone's cards are further down, and are left to styles.css. */
@media (min-width:600px){
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-ppa,#cp-meetings,#cp-posts) > .table-wrap > table.grid{display:block;width:100%;border:0}
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-ppa,#cp-meetings,#cp-posts) > .table-wrap > table.grid > thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-ppa,#cp-meetings,#cp-posts) > .table-wrap > table.grid > tbody{display:block}
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-ppa,#cp-meetings,#cp-posts) > .table-wrap > table.grid > tbody > tr{position:relative;display:grid;column-gap:14px;align-items:center;min-height:58px;padding:10px 16px 10px 58px;border-top:1px solid var(--v3-line-2)}
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-ppa,#cp-meetings,#cp-posts) > .table-wrap > table.grid > tbody > tr:first-child{border-top:0}
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-ppa,#cp-meetings,#cp-posts) > .table-wrap > table.grid > tbody > tr > td{display:block;min-width:0;padding:0;border:0;background:transparent;font-size:13px;line-height:1.45;color:var(--ink);text-align:left;white-space:normal;overflow-wrap:break-word}
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-ppa,#cp-meetings,#cp-posts) > .table-wrap > table.grid .row-link{max-width:100%;font-weight:700}
  /* The list: the name and the email under it, the two facts, the status, a chevron. */
  html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap > table.grid > tbody > tr{grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr) minmax(0,.8fr) 100px 14px;grid-template-areas:"who page seen st chev" "mail page seen st chev"}
  html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap > table.grid > tbody > tr > td:nth-child(1){grid-area:who;align-self:end;font-size:13.5px;overflow-wrap:anywhere}
  html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap > table.grid > tbody > tr > td:nth-child(2){grid-area:mail;align-self:start;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
  html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap > table.grid > tbody > tr > td:nth-child(3){grid-area:st;justify-self:start}
  html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap > table.grid > tbody > tr > td:nth-child(4){grid-area:page;font-weight:600}
  html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap > table.grid > tbody > tr > td:nth-child(5){grid-area:seen;font-weight:600}
  html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap > table.grid > tbody > tr > td:nth-child(4):not(:empty)::before{content:"Page complete";content:"Page complete" / "";display:block;font-size:12px;font-weight:500;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap > table.grid > tbody > tr > td:nth-child(5):not(:empty)::before{content:"Last sign-in";content:"Last sign-in" / "";display:block;font-size:12px;font-weight:500;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap > table.grid > tbody > tr > td:nth-child(1)[data-v3-face]::before{content:attr(data-v3-face);content:attr(data-v3-face) / "";position:absolute;left:16px;top:50%;width:32px;height:32px;margin-top:-16px;
    border-radius:50%;display:grid;place-items:center;background:var(--v3-face,var(--v3-face-7));color:#fff;font-weight:700;line-height:1;letter-spacing:0;font-size:11px}
  /* PPA: an icon tile, the package and when they enrolled, what is used and left, the status, a dispute. */
  html.v3 #studio.adm-shell #view-admin #cp-ppa > .table-wrap > table.grid > tbody > tr{grid-template-columns:minmax(0,1.2fr) minmax(0,.6fr) minmax(0,.4fr) 104px 64px;grid-template-areas:"pk used left st dis" "enr used left st dis"}
  html.v3 #studio.adm-shell #view-admin #cp-ppa > .table-wrap > table.grid > tbody > tr > td:nth-child(1){grid-area:pk;align-self:end;font-size:13.5px;font-weight:700}
  html.v3 #studio.adm-shell #view-admin #cp-ppa > .table-wrap > table.grid > tbody > tr > td:nth-child(2){grid-area:enr;align-self:start;font-size:12px;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #cp-ppa > .table-wrap > table.grid > tbody > tr > td:nth-child(2)::before{content:"Enrolled ";content:"Enrolled " / ""}
  html.v3 #studio.adm-shell #view-admin #cp-ppa > .table-wrap > table.grid > tbody > tr > td:nth-child(3){grid-area:used;font-weight:600}
  html.v3 #studio.adm-shell #view-admin #cp-ppa > .table-wrap > table.grid > tbody > tr > td:nth-child(3)::after{content:" used";content:" used" / "";font-weight:500;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #cp-ppa > .table-wrap > table.grid > tbody > tr > td:nth-child(4){grid-area:left;font-weight:600}
  html.v3 #studio.adm-shell #view-admin #cp-ppa > .table-wrap > table.grid > tbody > tr > td:nth-child(4)::after{content:" left";content:" left" / "";font-weight:500;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #cp-ppa > .table-wrap > table.grid > tbody > tr > td:nth-child(5){grid-area:st;justify-self:start}
  html.v3 #studio.adm-shell #view-admin #cp-ppa > .table-wrap > table.grid > tbody > tr > td:nth-child(6){grid-area:dis;justify-self:start}
  /* Meetings: a face and the prospect, the qualification under the name; the date, with whether they showed under it; the
     dispute; the package; a chevron. The date is the row's own button, and a click anywhere on the row opens the same panel. */
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr{grid-template-columns:minmax(0,1.2fr) minmax(128px,.7fr) minmax(64px,.35fr) minmax(112px,.6fr) 14px;grid-template-areas:"pro when dis pkg chev" "sub sh dis pkg chev"}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr:has(> td:nth-child(3):empty):has(> td:nth-child(4):empty){grid-template-areas:"pro when dis pkg chev"}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr > td:nth-child(1){grid-area:when;align-self:end}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr > td:nth-child(1) .row-link{font-weight:600}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr > td:nth-child(2){grid-area:pro;align-self:end;font-size:13.5px;font-weight:700;overflow-wrap:anywhere}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr > td:nth-child(3){grid-area:sh;align-self:start;font-size:12px;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr > td:nth-child(3):not(:empty)::before{content:"Showed ";content:"Showed " / ""}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr > td:nth-child(4){grid-area:sub;align-self:start;font-size:12px;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr > td:nth-child(5){grid-area:dis;justify-self:start}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr > td:nth-child(6){grid-area:pkg;justify-self:start}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr:has(> td:nth-child(3):empty):has(> td:nth-child(4):empty) > td{align-self:center}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr:has(> td:nth-child(4):empty):not(:has(> td:nth-child(3):empty)) > td:nth-child(2){grid-row:1 / span 2;align-self:center}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr:has(> td:nth-child(3):empty):not(:has(> td:nth-child(4):empty)) > td:nth-child(1){grid-row:1 / span 2;align-self:center}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr:has(> td:nth-child(3):empty):has(> td:nth-child(4):empty) > td:is(:nth-child(3),:nth-child(4)){display:none}
  /* Posts: an icon tile, the title (the link), the status, when it last changed. */
  html.v3 #studio.adm-shell #view-admin #cp-posts > .table-wrap > table.grid > tbody > tr{grid-template-columns:minmax(0,1fr) 130px 170px;grid-template-areas:"title st when"}
  html.v3 #studio.adm-shell #view-admin #cp-posts > .table-wrap > table.grid > tbody > tr > td:nth-child(1){grid-area:title;font-size:13.5px;font-weight:700;overflow-wrap:anywhere}
  html.v3 #studio.adm-shell #view-admin #cp-posts > .table-wrap > table.grid > tbody > tr > td:nth-child(1) a{text-decoration:none}
  html.v3 #studio.adm-shell #view-admin #cp-posts > .table-wrap > table.grid > tbody > tr > td:nth-child(1) a:hover{text-decoration:underline}
  html.v3 #studio.adm-shell #view-admin #cp-posts > .table-wrap > table.grid > tbody > tr > td:nth-child(2){grid-area:st;justify-self:start}
  html.v3 #studio.adm-shell #view-admin #cp-posts > .table-wrap > table.grid > tbody > tr > td:nth-child(3){grid-area:when;font-size:12.5px;color:var(--muted)}
  html.v3 #studio.adm-shell #view-admin #cp-posts > .table-wrap > table.grid > tbody > tr > td:nth-child(3):not(:empty)::before{content:"Last changed ";content:"Last changed " / ""}
  /* The icon tile on a package and a post: nothing to press, so a tile and not a face. */
  html.v3 #studio.adm-shell #view-admin :is(#cp-ppa,#cp-posts) > .table-wrap > table.grid > tbody > tr{--i:var(--ic-box)}
  html.v3 #studio.adm-shell #view-admin #cp-posts > .table-wrap > table.grid > tbody > tr{--i:var(--ic-doc)}
  html.v3 #studio.adm-shell #view-admin :is(#cp-ppa,#cp-posts) > .table-wrap > table.grid > tbody > tr > td:nth-child(1)::before{content:"";position:absolute;left:16px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:10px;background:var(--v3-blue-bg)}
  html.v3 #studio.adm-shell #view-admin :is(#cp-ppa,#cp-posts) > .table-wrap > table.grid > tbody > tr::after{content:"";position:absolute;left:23px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--royal);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
  /* The chevron on the rows that open something, and the prospect's face (::after, as a phone card's label is its ::before). */
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-meetings) > .table-wrap > table.grid > tbody > tr::after{content:"";grid-area:chev;width:14px;height:14px;background:var(--v3-cons-chev);-webkit-mask:var(--ic-chevright) center/contain no-repeat;mask:var(--ic-chevright) center/contain no-repeat}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr > td:nth-child(2)[data-v3-face]::after{content:attr(data-v3-face);content:attr(data-v3-face) / "";position:absolute;left:16px;top:50%;width:32px;height:32px;margin-top:-16px;
    border-radius:50%;display:grid;place-items:center;background:var(--v3-face,var(--v3-face-7));color:#fff;font-weight:700;line-height:1;letter-spacing:0;font-size:11px}
  /* A row's button or link in focus. */
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-ppa,#cp-meetings,#cp-posts) > .table-wrap > table.grid > tbody > tr:has(:is(.row-link,a):focus-visible){box-shadow:inset 0 0 0 2px var(--royal-2)}
  /* A conversation: when, how, the standing and who logged it, what came up under them, the follow-up under that. */
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap{border:1px solid var(--line);border-radius:12px}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid{display:block;width:100%;border:0}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody{display:block}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);column-gap:8px;row-gap:3px;align-items:baseline;padding:11px 14px;border-top:1px solid var(--v3-line-2)}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr:first-child{border-top:0}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr > td{display:block;min-width:0;padding:0;border:0;background:transparent;font-size:12.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr > td:nth-child(1){grid-column:1;grid-row:1;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr > td:nth-child(2){grid-column:2;grid-row:1}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr > td:nth-child(3){grid-column:3;grid-row:1}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr > td:nth-child(2)::before,html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr > td:nth-child(3)::before{content:"\b7";content:"\b7" / "";margin-right:8px}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr > td:nth-child(6){grid-column:4;grid-row:1;text-align:right}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr > td:nth-child(6):not(:empty)::before{content:"Logged by ";content:"Logged by " / ""}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr > td:nth-child(4){grid-column:1 / -1;grid-row:2;font-size:13px;color:var(--ink)}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr > td:nth-child(5){grid-column:1 / -1;grid-row:3}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr > td:nth-child(5):not(:empty)::before{content:"Follow up ";content:"Follow up " / ""}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-body > h3:nth-of-type(2) + .table-wrap > table.grid > tbody > tr > td:is(:nth-child(4),:nth-child(5)):empty{display:none}
}
@media (min-width:600px) and (hover:hover){
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-meetings) > .table-wrap > table.grid > tbody > tr:hover{background:var(--v3-cons-hover)}
}
/* From 600 to 759px there is no room for the columns: what is second goes under what is first. */
@media (min-width:600px) and (max-width:759px){
  html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap > table.grid > tbody > tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 14px;row-gap:4px;grid-template-areas:"who st chev" "mail st chev" "page seen chev"}
  html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap > table.grid > tbody > tr > td:nth-child(3){justify-self:end}
  html.v3 #studio.adm-shell #view-admin #cp-ppa > .table-wrap > table.grid > tbody > tr{grid-template-columns:minmax(0,1fr) 104px 64px;row-gap:2px;grid-template-areas:"pk used left" "enr st dis"}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 14px;row-gap:4px;grid-template-areas:"pro when chev" "sub sh chev" "pkg dis chev"}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr:has(> td:nth-child(3):empty):has(> td:nth-child(4):empty){grid-template-areas:"pro when chev" "pkg dis chev"}
  html.v3 #studio.adm-shell #view-admin #cp-posts > .table-wrap > table.grid > tbody > tr{grid-template-columns:minmax(0,1fr) 130px;row-gap:2px;grid-template-areas:"title st" "title when"}
}

/* Under 776px the four numbers are two by two. */
@media (max-width:775px){
  html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile:nth-child(odd){border-left:0}
  html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile:nth-child(n+3){border-top:1px solid var(--v3-line-2)}
}
/* The classic head stands in a column from 640px: the buttons go under the name. */
@media (max-width:640px){
  html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])){align-items:stretch;gap:14px}
  html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-head-action{justify-content:flex-start}
}

/* A side panel on a consultant's page lies over the lightly dimmed page, as on PPA Meetings; from 1360px the Meetings tab
   makes room for it, so the rows stay in view (from 1600px for the wider Record a dispute too). Only the right side makes
   room, so the list does not jump sideways. */
@media (min-width:600px) and (max-width:1359px){
  html.v3 body:has(#adm-crumb:not([hidden])) > .adm-sp-ov{background:var(--v3-cons-dim)}
}
/* "unassigned" by the source, in a meeting's read-only panel: the classic amber reads 2.71:1 on its tint. */
html.v3 body:has(#adm-crumb:not([hidden])) > .adm-sp .ppa-ur{background:var(--st-amber-bg);color:var(--st-amber)}
@media (min-width:1360px){
  html.v3 body:has(#adm-crumb:not([hidden])):not(:has(#admin-page-consultant-meetings:not([hidden]))) > .adm-sp-ov{background:var(--v3-cons-dim)}
  html.v3 body:has(> .adm-sp:not(.wide)) #studio.adm-shell #view-admin:has(> #admin-page-consultant-meetings:not([hidden])){margin-left:max(0px,calc((100% - 1320px) / 2));margin-right:404px}
}
@media (min-width:1360px) and (max-width:1599px){
  html.v3 body:has(> .adm-sp.wide):has(#admin-page-consultant-meetings:not([hidden])) > .adm-sp-ov{background:var(--v3-cons-dim)}
}
@media (min-width:1600px){
  html.v3 body:has(> .adm-sp.wide) #studio.adm-shell #view-admin:has(> #admin-page-consultant-meetings:not([hidden])){margin-left:max(0px,calc((100% - 1320px) / 2));margin-right:564px}
}

/* On a phone (599px and narrower). The cells, their order and their labels are the classic phone card's. The box round each
   card goes, so the list, a consultant's packages, meetings and posts read as one list, and people take a face in the margin. */
@media (max-width:599px){
  html.v3 #studio.adm-shell #view-admin #consultants-card > h1{padding:14px 14px 0}
  html.v3 #studio.adm-shell #view-admin #consultants-card > h1 + p.muted{margin:4px 14px 12px}
  html.v3 #studio.adm-shell #view-admin #consultants-card > #consultant-search{max-width:none;width:calc(100% - 28px);height:44px;font-size:16px}
  html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])){margin:0 0 10px;padding:16px;border-radius:18px}
  html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden]))::after{display:none}
  html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-head-main{gap:12px}
  html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-crumb::after{content:"";position:absolute;inset:-13px -6px}
  html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-person{width:48px;height:48px;font-size:16px}
  html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) p{font-size:12.5px;line-height:1.55}
  html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-head-action{width:100%}
  html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden])) .adm-btn{flex:1 1 auto;min-height:44px;padding:0 12px}
  html.v3 #studio.adm-shell #view-admin:has(> #adm-head #adm-crumb:not([hidden])) > #adm-tabs{column-gap:0}
  html.v3 #studio.adm-shell #view-admin:has(> #adm-head #adm-crumb:not([hidden])) > #adm-tabs .adm-tab{padding-left:6px;padding-right:6px;font-size:13px}
  html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-note{margin:12px 14px 0}
  html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-h{margin:16px 14px 2px}
  html.v3 #studio.adm-shell #view-admin #cp-overview > :is(.outreach-nocrm,.outreach-window,.cp-callout,.tbl-state,.cp-missing,.table-wrap){margin-left:14px;margin-right:14px}
  html.v3 #studio.adm-shell #view-admin #cp-overview > :last-child:not(.cp-tiles):not(.skel){margin-bottom:14px}
  html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile{padding:12px 14px}
  html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile::before{width:30px;height:30px;margin-bottom:8px;border-radius:9px}
  html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile::after{left:21px;top:19px;width:16px;height:16px}
  html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile .today-tile-n{font-size:20px}
  html.v3 #studio.adm-shell #view-admin #cp-ask-card{padding:14px}
  html.v3 #studio.adm-shell #view-admin #cp-ask-card > .cp-ask-form input{height:44px;font-size:16px}
  html.v3 #studio.adm-shell #view-admin #cp-ask-card .cp-ask-chip{min-height:44px}
  html.v3 #studio.adm-shell #view-admin :is(#cp-ppa-card,#cp-meetings-card,#cp-posts-card) > .adm-card-h{padding:14px 14px 10px}
  html.v3 #studio.adm-shell #view-admin #cp-ppa > .cp-note{padding:12px 14px 0}
  html.v3 #studio.adm-shell #view-admin #cp-ppa > .cp-actions{padding:10px 14px 14px}
  html.v3 #studio.adm-shell #view-admin #cp-posts > .cp-note{padding:0 14px 10px}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .cp-record-hint{padding:9px 14px}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .ppa-pager{padding:10px 14px}
  html.v3 #studio.adm-shell #view-admin #outreach-consultant-card{padding:14px}
  html.v3 #studio.adm-shell #view-admin #outreach-touch-form .outreach-choice label{min-height:44px}
  html.v3 #studio.adm-shell #view-admin #outreach-touch-form .btn{min-height:44px}
  html.v3 #studio.adm-shell #view-admin #outreach-touch-form textarea{font-size:16px}
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-ppa,#cp-meetings,#cp-posts) > .table-wrap > table.grid > tbody{gap:0}
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-ppa,#cp-meetings,#cp-posts) > .table-wrap > table.grid > tbody > tr{position:relative;margin:0;padding:12px 14px;border:0;border-top:1px solid var(--v3-line-2);border-radius:0;background:transparent}
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-ppa,#cp-meetings,#cp-posts) > .table-wrap > table.grid > tbody > tr:first-child{border-top:0}
  html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-meetings) > .table-wrap > table.grid > tbody > tr{padding-left:56px}
  html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap > table.grid > tbody > tr > td:nth-child(1)[data-v3-face]::before{content:attr(data-v3-face);content:attr(data-v3-face) / "";position:absolute;left:14px;top:12px;width:30px;height:30px;
    border-radius:50%;display:grid;place-items:center;background:var(--v3-face,var(--v3-face-7));color:#fff;font-weight:700;line-height:1;letter-spacing:0;font-size:11px}
  html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr > td:nth-child(2)[data-v3-face]::after{content:attr(data-v3-face);content:attr(data-v3-face) / "";position:absolute;left:14px;top:12px;width:30px;height:30px;
    border-radius:50%;display:grid;place-items:center;background:var(--v3-face,var(--v3-face-7));color:#fff;font-weight:700;line-height:1;letter-spacing:0;font-size:11px}
}
/* Forced colours paint no backgrounds: the faces go (the names stay), the marks are drawn in the text colour. */
@media (forced-colors:active){
  html.v3 #studio.adm-shell #view-admin #consultant-table > .table-wrap > table.grid > tbody > tr > td:nth-child(1)[data-v3-face]::before,html.v3 #studio.adm-shell #view-admin #cp-meetings > .table-wrap > table.grid > tbody > tr > td:nth-child(2)[data-v3-face]::after{display:none}
  html.v3 #studio.adm-shell #view-admin > #adm-head:has(#adm-crumb:not([hidden]))::after,html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile::before,html.v3 #studio.adm-shell #view-admin #cp-ask-card > .adm-card-h::before,html.v3 #studio.adm-shell #view-admin :is(#cp-ppa,#cp-posts) > .table-wrap > table.grid > tbody > tr > td:nth-child(1)::before{display:none}
  html.v3 #studio.adm-shell #view-admin #cp-overview > .cp-tiles > .today-tile::after,html.v3 #studio.adm-shell #view-admin #consultants-card::after,html.v3 #studio.adm-shell #view-admin #cp-ask-card > .adm-card-h::after,html.v3 #studio.adm-shell #view-admin :is(#consultant-table,#cp-meetings,#cp-ppa,#cp-posts) > .table-wrap > table.grid > tbody > tr::after{forced-color-adjust:none;background:CanvasText}
}

/* ── 25. PPA > ANALYTICS (admin): the range and consultant controls, the numbers, the charts, tables and notes ──────
   The prototype has no screen for this, so it is drawn in its language from the Hub's own pieces, and it is CSS only:
   the page is exactly what app.js has always drawn, in the same order, with every number, its definition and its
   tooltip. The card keeps its box at the top of the page, so the near-screen load fires when it always did
   (DESIGN.md rule 4); only its paint moves. Its head (title, help, the controls as a toolbar band, the range line and
   the coverage warning) is one card, drawn behind those five rows; each section of the body is a card of its own, and
   "How these are counted" is a card at the end. The numbers are Today's tiles. From 760px the pieces of a section
   stand side by side, placed by their headings, because the body is one flat run of headings, notes, charts and tables
   with nothing to wrap them; test-design-switch pins that run. Nothing there takes focus but the folds, which keep
   their place in the run, so the keyboard meets every control in the classic order. Show rate leads as a banner.
   The arrows stay neutral, as the classic comment asks: nothing here colours a number or a change by what it might
   mean, so every icon is the same blue and every change the same grey (on the banner, the banner's own). The heat
   map's cells take a lighter blue so the ink numbers read on the deepest one: white on the classic mid-blue was 2.4:1.
   Each consultant keeps its thirteen columns; where it does not fit, the classic box (.tw-box, app.js) scrolls sideways
   with the names pinned. Under 600px the classic phone cards stay as styles.css draws them (DESIGN.md rule 8): here
   they only lose their boxes, so the rows read as one list inside the section's card. */
html.v3{
  --v3-an-lead:linear-gradient(120deg,#0b1c3e 0%,#173a78 100%);
  --v3-an-hover:#f8f9fc; --v3-an-heat:#5b9bf0; --v3-an-amb-line:#f1dca6;
}
/* THE HEAD. The card's own box stays, painted by nothing; ::before draws the head's card behind the first five rows. */
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card{display:grid;grid-template-columns:minmax(0,1fr);padding:0;border:0;background:transparent;box-shadow:none}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card::before{content:"";grid-area:1 / 1 / 6 / 2;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .admin-head{grid-area:1 / 1;padding:16px 18px 0}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .admin-head + p.muted{grid-area:2 / 1;margin:2px 18px 14px;font-size:12.5px}
/* The controls, as the card's toolbar: the range on the left, the consultant on the right. */
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .pa-toolbar{grid-area:3 / 1;margin:0;padding:12px 14px;gap:8px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .pa-toolbar:has(+ #pa-range-line:empty){border-bottom:0}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .pa-toolbar .ppa-select{height:36px;padding:0 10px;border-width:1px;border-radius:10px;font-size:13px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .pa-toolbar > select.ppa-select{max-width:min(260px,100%);margin-left:auto}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > #pa-range-line{grid-area:4 / 1;padding:10px 18px;font-size:12.5px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > #pa-range-line:empty{display:none}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > #pa-coverage{grid-area:5 / 1;position:relative;margin:0 14px 14px;padding:9px 12px 9px 36px;border:1px solid var(--v3-an-amb-line);border-radius:12px;font-size:13px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > #pa-coverage::before{content:"";position:absolute;left:12px;top:11px;width:16px;height:16px;background:var(--st-amber);-webkit-mask:var(--ic-warn) center/contain no-repeat;mask:var(--ic-warn) center/contain no-repeat}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > #pa-body{grid-area:6 / 1;min-width:0}

/* THE BODY: a card for each section, and for what stands in for them (loading, "Pick a From and a To date", a load that failed). */
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card #pa-body > :is(.pa-sec,.pa-fold,.skel,.tbl-state){margin:14px 0 0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card #pa-body > :is(.pa-sec,.skel,.tbl-state){padding:16px 18px 18px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card #pa-body > .tbl-state{padding:40px 24px;text-align:center;font-size:13.5px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec > .admin-sub{margin:0;font-size:15.5px;font-weight:700}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec > .admin-sub + .pa-note{margin:2px 0 12px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-note{margin:0 0 8px;font-size:12.5px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-h3{margin:20px 0 8px;font-size:13.5px;font-weight:700}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec .tbl-state{margin:6px 0 0;font-size:13px}
/* "Waiting on consultants now", under the numbers: it is about today, not the range, so it stands apart from them. */
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec > .pa-tiles + .pa-note{margin:12px 0 0;padding:9px 12px;border-radius:10px;background:var(--v3-blue-bg);color:var(--v3-body);max-width:none}

/* THE NUMBERS: an icon tile, the label, the number, the lines under it, as Today's. The same blue on all eight: a colour
   here would tell the reader what a number means. Tiles take no focus, so the label can stand above its number. */
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile{position:relative;gap:2px;padding:14px 14px 12px;border-color:var(--line);border-radius:14px;box-shadow:none}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile::before{content:"";order:-2;width:34px;height:34px;margin-bottom:10px;border-radius:10px;background:var(--v3-blue-bg)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile::after{content:"";position:absolute;left:22px;top:22px;width:18px;height:18px;background:var(--royal);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile .today-tile-l{order:-1;font-size:12.5px;font-weight:600}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile .today-tile-n{margin-top:2px;font-size:26px;font-weight:800;letter-spacing:-.02em}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile .today-tile-d{margin-top:2px;font-size:12px;font-weight:500;line-height:1.45}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile .pa-delta{margin-top:4px;font-weight:600}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-cal) .pa-tile:nth-child(1){--i:var(--ic-calendar)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-cal) .pa-tile:nth-child(2){--i:var(--ic-ok)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-cal) .pa-tile:nth-child(3){--i:var(--ic-clock)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-cal) .pa-tile:nth-child(4){--i:var(--ic-x)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) .pa-tile:nth-child(1){--i:var(--ic-chart)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) .pa-tile:nth-child(2){--i:var(--ic-calendar)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) .pa-tile:nth-child(3){--i:var(--ic-users)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) .pa-tile:nth-child(4){--i:var(--ic-scale)}
/* Show rate, the banner: the same words on Today's navy, every line 4.5:1 at the gradient's lightest end. */
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile.is-lead{border-color:transparent;background:var(--v3-an-lead);color:#fff}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile.is-lead::before{background:var(--v3-glass-btn)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile.is-lead::after{background:#fff}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile.is-lead .today-tile-n{font-size:34px;letter-spacing:-.02em}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile.is-lead :is(.today-tile-l,.today-tile-d){color:var(--v3-hero-hi)}

/* THE CHARTS. Each mark's height, width and shade stays what app.js set on it. */
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-cols{gap:3px;margin:0}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-col-bar{border-radius:4px 4px 0 0;background:var(--v3-line-2)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-col:hover .pa-col-bar i{background:var(--royal-lo)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-col-l{font-size:11px}
/* One set of columns for all a list's rows, so every bar is the same length at 100% and two rates can be compared by eye. */
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-bars{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:8px 10px;align-content:start;max-width:none;margin:0}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-bars + .pa-note{margin:8px 0 0}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-bar{grid-column:1 / -1;grid-template-columns:subgrid;font-size:12.5px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-bar-track{height:8px;background:var(--v3-gray)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-bar-n{text-align:right}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-heat{border-spacing:3px;max-width:none;font-size:12px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-heat th{font-size:11.5px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-heat td{height:26px;border-radius:6px;background:var(--v3-line-2)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-heat td i{border-radius:6px;background:var(--v3-an-heat)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-heat td.is-deep b{color:var(--ink)}

/* MOST AND FEWEST: list rows, the place in a circle where a face would be (the Hub's lists draw theirs from screen code, and
   this screen has none). The number, the count and the change each keep a column, so the counts line up. */
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-two{gap:0 32px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-rank{padding:0;list-style:none;font-size:13px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-rank li{position:relative;padding:8px 0 8px 38px;border-bottom:1px solid var(--v3-line-2)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-rank li:last-child{border-bottom:0}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-rank li::before{content:counter(list-item);content:counter(list-item) / "";position:absolute;left:0;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;display:grid;place-items:center;background:var(--v3-blue-bg);color:var(--royal-lo);font-size:12px;font-weight:700;line-height:1}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-rank-row{display:grid;grid-template-columns:minmax(0,1fr) auto 60px;gap:10px;align-items:baseline}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-rank .pa-d{text-align:right}

/* THE FOLDS: a chevron in place of the browser's triangle. Cancellation reasons stays in its section; How these are counted is its own card. */
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-fold{margin-top:16px;padding-top:0;border-top-color:var(--v3-line-2)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-fold > summary{position:relative;padding:12px 0 12px 24px;font-size:13.5px;list-style:none}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-fold > summary::-webkit-details-marker{display:none}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-fold > summary::before{content:"";position:absolute;left:0;top:14px;width:16px;height:16px;background:var(--muted);-webkit-mask:var(--ic-chevright) center/contain no-repeat;mask:var(--ic-chevright) center/contain no-repeat;transition:transform .15s}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-fold[open] > summary{margin-bottom:0}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-fold[open] > summary::before{transform:rotate(90deg)}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-fold > summary:focus-visible{outline:2px solid var(--royal-2);outline-offset:2px;border-radius:8px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card #pa-body > .pa-fold{padding:0 18px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card #pa-body > .pa-fold[open]{padding-bottom:16px}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-defs{max-width:none}
html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-defs :is(dt,dd){font-size:13px}

/* THE TABLES, from 600px: quiet headers, soft lines. Each consultant keeps every column and fits from about 1280px; narrower,
   the classic box scrolls sideways and the names stay pinned beside the numbers. Its first cells carry a solid colour
   because they slide over the others. */
@media (min-width:600px){
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card table.grid th{padding:8px 10px;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none;vertical-align:bottom}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card table.grid td{padding:9px 10px;border-bottom:1px solid var(--v3-line-2);font-size:13px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card table.grid > tbody > tr:last-child > td{border-bottom:0}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card table.grid > tbody > tr:hover > td{background:var(--v3-an-hover)}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-two{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-each{margin-top:8px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-each > table.grid :is(th,td){padding-left:7px;padding-right:7px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-each > table.grid th:first-child{left:0;z-index:3}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-each > table.grid td:first-child{position:sticky;left:0;z-index:1;background:var(--card);font-weight:600}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-each > table.grid > tbody > tr:hover > td:first-child{background:var(--v3-an-hover)}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-each.tw-box > table.grid :is(th,td):first-child{box-shadow:1px 0 0 var(--line)}
}

/* FROM 760px: four tiles across, and a section's pieces side by side, each placed by the heading it follows. The first
   section: the columns beside the weekdays, Most and Fewest under them. The second: who canceled beside when bookings
   were made, each with its note over it; then the three show rates. */
@media (min-width:760px){
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec > .pa-tiles{grid-area:3 / 1 / 4 / -1}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec > .admin-sub{grid-area:1 / 1 / 2 / -1}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec > .admin-sub + .pa-note{grid-area:2 / 1 / 3 / -1}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-cal){display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:32px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-cal) > .pa-h3:nth-of-type(1){grid-area:4 / 1}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-cal) > .pa-h3:nth-of-type(1) + *{grid-area:5 / 1 / 7 / 2}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-cal) > .pa-h3:nth-of-type(2){grid-area:4 / 2}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-cal) > .pa-h3:nth-of-type(2) + .pa-note{grid-area:5 / 2}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-cal) > .pa-h3:nth-of-type(2) + .pa-note + *{grid-area:6 / 2}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-cal) > .pa-two{grid-area:7 / 1 / 8 / -1}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-cal) .pa-cols{height:190px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out){display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:32px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-tiles{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) .pa-tile.is-lead{grid-column:auto}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-tiles + .pa-note{grid-area:4 / 1 / 5 / -1}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(1){grid-area:5 / 1 / 6 / 4}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(1) + *{grid-area:7 / 1 / 8 / 4;margin-top:0}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(1) + * + .pa-note{grid-area:6 / 1 / 7 / 4}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(2){grid-area:5 / 4 / 6 / 7}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(2) + .pa-note{grid-area:6 / 4 / 7 / 7}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(2) + .pa-note + *{grid-area:7 / 4 / 8 / 7}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(3){grid-area:8 / 1 / 9 / 4}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(3) + *{grid-area:9 / 1 / 10 / 4}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(4){grid-area:8 / 4 / 9 / 7}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(4) + *{grid-area:9 / 4 / 10 / 7}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(4) + * + .pa-note{grid-area:10 / 4 / 11 / 7;margin:8px 0 0}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(5){grid-area:11 / 1 / 12 / 4}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(5) + *{grid-area:12 / 1 / 13 / 4}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(5) + * + .pa-note{grid-area:12 / 4 / 13 / 7;align-self:center;margin:0}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-fold{grid-area:13 / 1 / 14 / -1}
  /* The definitions, as two columns of rows. */
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-defs{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);column-gap:20px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-defs :is(dt,dd){margin:0;padding:8px 0;border-top:1px solid var(--v3-line-2)}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-defs :is(dt:first-child,dt:first-child + dd){border-top:0}
}
/* FROM 1280px: the three show rates in one row. The two tall lists span the two rows lead time and its note take, and the
   last row takes what is left over, so the note follows its short list instead of the tall ones. */
@media (min-width:1280px){
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out){grid-template-rows:repeat(9,auto) 1fr}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(3){grid-area:8 / 1 / 9 / 3}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(3) + *{grid-area:9 / 1 / 11 / 3}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(4){grid-area:8 / 3 / 9 / 5}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(4) + *{grid-area:9 / 3 / 11 / 5}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(4) + * + .pa-note{grid-area:11 / 3 / 12 / 5}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(5){grid-area:8 / 5 / 9 / 7}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(5) + *{grid-area:9 / 5 / 10 / 7}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) > .pa-h3:nth-of-type(5) + * + .pa-note{grid-area:10 / 5 / 11 / 7;align-self:start;margin:8px 0 0}
}
/* 600 to 759px: one column, and Show rate across the top of its section's tiles, as in the classic design; Disputes filed, with the most lines, takes a row of its own. */
@media (max-width:759px){
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-sec:has(> #pa-h-out) .pa-tile:nth-child(4){grid-column:1 / -1}
}

/* THE PHONE (599px and narrower). The classic phone cards stay; they lose their boxes, so a table reads as rows in its section. */
@media (max-width:599px){
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .admin-head{padding:14px 14px 0}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .admin-head + p.muted{margin:4px 14px 12px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .pa-toolbar{padding:12px 14px 14px}
  /* The range as the prototype's chips, as on Packages: white, the chosen one navy, each with a 44px touch area. */
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .pa-toolbar > .seg{width:100%;padding:0;gap:8px 6px;background:transparent}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .pa-toolbar > .seg > .seg-btn{position:relative;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--v3-body);font-size:13px;box-shadow:none}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .pa-toolbar > .seg > .seg-btn::before{content:"";position:absolute;inset:-4px 0}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .pa-toolbar > .seg > .seg-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
  /* The two dates side by side, the consultant under them; 44px, and 16px type so an iPhone does not zoom. */
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .pa-toolbar > .pa-custom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .pa-toolbar .ppa-select{width:100%;min-width:0;height:44px;font-size:16px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > .pa-toolbar > select.ppa-select{flex:1 1 100%;max-width:none;margin-left:0}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > #pa-range-line{padding:10px 14px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > #pa-coverage{margin:0 14px 14px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card #pa-body > :is(.pa-sec,.skel){padding:14px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card #pa-body > .pa-fold{padding:0 14px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tiles{gap:10px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile{padding:12px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile::before{width:30px;height:30px;margin-bottom:8px;border-radius:9px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile::after{left:19px;top:19px;width:16px;height:16px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile.is-lead .today-tile-n{font-size:32px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-col-bar,html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-col-bar i{border-radius:2px 2px 0 0}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-fold > summary{min-height:44px;padding-top:13px;padding-bottom:13px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-fold > summary::before{top:15px}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card table.grid > tbody{gap:0}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card table.grid > tbody > tr{margin:0;padding:10px 0;border:0;border-top:1px solid var(--v3-line-2);border-radius:0;background:transparent}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card table.grid > tbody > tr:first-child{border-top:0;padding-top:4px}
}
@media (prefers-reduced-motion:reduce){ html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-fold > summary::before{transition:none} }
/* Forced colours paint no backgrounds: the icon tiles go (the labels stay), the chevrons and the bars are drawn in the text colour. */
@media (forced-colors:active){
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile::before,html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-tile::after,html.v3 #studio.adm-shell #view-admin #ppa-analytics-card > #pa-coverage::before{display:none}
  html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-fold > summary::before,html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-col-bar i,html.v3 #studio.adm-shell #view-admin #ppa-analytics-card .pa-bar-track i{forced-color-adjust:none;background:CanvasText}
}

/* ── 26. OTHER SCREENS: WHAT THE STYLE CHECK FOUND ──────────────────────────────────────────────────────────────
   These screens are not redesigned. They keep their classic layout and pick up the shared style of sections 1 to 16.
   Each was walked in the new design at 1440, 900 and on an iPhone, with its rows, panels, dialogs and warnings. This
   section holds only what that walk found broken or unreadable, each rule scoped to its own screen. Nothing here moves a card out of its place, hides a control or sends a request, and
   every rule leaves a card's box alone, so a card still comes near the screen when it did (DESIGN.md rule 4). The
   phone's card tables stay in styles.css (rule 8). */
html.v3{
  --v3-other-ok:#13704a; --v3-other-err:#b92a24; --v3-other-count:#d5362f;
  --v3-other-review:#8f4f12; --v3-other-star:#946600;
}

/* A red count: white on the prototype's red read 4.27:1 at 11px. Set as the piece's own red, not a background rule, so
   no count's own state is outranked (the Hub's red still colours every mark that carries no words). */
html.v3 :where(.adm-count,.tab-badge,.adm-nav-badge,.btab-badge,.count-badge){--red:var(--v3-other-count);--v3-red:var(--v3-other-count)}

/* The page head stands in a column at 640px and narrower, and the shared rule's flex-end then pushed a short title and
   blurb to the right (Content, every tab). Stretched, the words start at the left edge and an action keeps its place. */
@media (max-width:640px){
  html.v3 #adm-head{align-items:stretch}
}

/* Green and red words. --ok, --err and --red are marks: as small words they read 3.1 to 4.3:1 on their tints and 3.5:1
   on white. Each screen takes the darker shades its redesigned neighbours use, set on the card, so every word and
   state inside follows, the pills and notes app.js writes with those names inline too. A dot behind a white tick only
   gets easier to read. */
html.v3 :is(#ppa-disputes-admin-card,#ppa-corrections-admin-card,#ppa-availability-card,#ppa-placement-card,#pending-card,#idea-bank-admin-card,#blog-images-admin-card,#playbook-admin,#ch-admin-card,#ch-completions-card,#repost-share-card,#repost-dash-card,#repost-settings-card,#outreach-queue-card,#outreach-coverage-card,#brandwide-import-card,#ppa-golive-card,#ppa-seats-admin-card,#provision-card,#ppa-roster-card,#env-readiness-card,#updates-admin-card,#activity-feed-card,#nudges-card,#view-content,#view-playbook,.adm-pal,.adm-sp:has(.ppa-disp-panel)){--ok:var(--v3-other-ok);--err:var(--v3-other-err);--red:var(--v3-other-err)}
/* Amber words: the classic hex shades read 2.7 to 4.4:1 on their tints. */
html.v3 :is(#ppa-availability-card,#ppa-placement-card,#ppa-seats-admin-card) :is(.ppa-recon-warn,.ppa-ur),html.v3 :is(#brandwide-import-card,#ppa-golive-card) .gl-summary.warn,html.v3 :is(#provision-card,#nudges-card) .banner:not(.ok){background:var(--st-amber-bg);color:var(--st-amber)}
/* Review queue: "Client review" read 3.9:1 and the stars 2.0:1. */
html.v3 #pending-card .pq-type.is-review{color:var(--v3-other-review)}
html.v3 #pending-card .pq-stars{color:var(--v3-other-star)}
/* Answer corrections: a meeting's date line read 4.45:1. A dispute's conversation: the names read 2.8:1. */
html.v3 #ppa-corrections-admin-card .ppa-resched-when,html.v3 .adm-sp .ppa-convo-log .ppa-turn-who{color:var(--muted)}
/* What's new, the page, the popup and the admin's preview of both: the eyebrow and links read 3.8:1 in the lighter blue. */
html.v3 :is(#view-whatsnew,.wn-sheet,.upd-preview) :is(.wn-eyebrow,.wn-body a){color:var(--royal)}
/* Playbook: a vendor's category read 4.4:1 on its tint. */
html.v3 #view-playbook .pb-vendor-cat{color:var(--royal-lo)}

/* Playbook's editor (admin): classic flex with no width, so each box was as wide as its words. The Section chevron sat on
   "Approved vendor" and the Category label ran out of its box. They share the row; on a phone each has its own. */
html.v3 #pb-editor .pb-editor-grid > .ff{flex:1 1 240px;min-width:0}
/* Roster: between the phone's cards and the classic 1181px rule the seat box cut the address after 20 characters. */
@media (min-width:600px) and (max-width:1180px){
  html.v3 #ppa-roster-list input[type="text"].ppa-input{min-width:210px}
}
/* Add a consultant: in a column, the classic flex-basis (190px, 260px) became each field's height, so the form stood
   more than a screen tall with a gap of 200px between its boxes. */
@media (max-width:560px){
  html.v3 #provision-form .ff{flex:none}
}

/* Tap targets on a phone, 44px. Section 3's admin .btn at 38px outranked the classic phone rule, on these cards. */
@media (max-width:599px){
  html.v3 #studio.adm-shell #view-admin :is(#pending-card,#idea-bank-admin-card,#playbook-admin,#ppa-placement-card,#repost-share-card,#repost-settings-card,#provision-card,#ppa-golive-card,#brandwide-import-card) .btn{min-height:44px}
  /* A choice of views: 36px with 4px of touch area each side, as Analytics' chips. */
  html.v3 #studio.adm-shell :is(#adm-views,#ppa-dispq-filter,#activity-filter) .seg-btn{position:relative;min-width:44px;min-height:36px}
  html.v3 #studio.adm-shell :is(#adm-views,#ppa-dispq-filter,#activity-filter) .seg-btn::before{content:"";position:absolute;inset:-4px 0}
  /* Pieces that keep their size and gain only a touch area. */
  html.v3 #ch-admin-card .ch-switch,html.v3 #ch-sets .row-link,html.v3 #ppa-roster-list .ppa-billed{position:relative}
  html.v3 #ch-admin-card .ch-switch::after{content:"";position:absolute;inset:-9px 0}
  html.v3 #ch-sets .row-link::after{content:"";position:absolute;inset:-11px 0}
  html.v3 #ppa-roster-list .ppa-billed::after{content:"";position:absolute;inset:-16px -28px -16px 0}
  html.v3 #ppa-roster-list :is(.ppa-input,.btn-ghost,.ppa-billed > input){position:relative;z-index:1}
  /* Dialogs, and the side panels the redesigned screens did not already size. */
  html.v3 .adm-dlg-actions .adm-btn,html.v3 .adm-sp .ppa-decide-note,html.v3 .adm-sp .ch-form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select),html.v3 #idea-admin-body .idea-edit textarea{min-height:44px}
  html.v3 .adm-sp .adm-sp-close{min-width:44px;min-height:44px}
  html.v3 :is(.adm-sp .ppa-disp-panel,#ppa-corrections-admin-card) .btn-decide{height:44px}
  html.v3 .adm-sp details.ppa-convo > summary{padding-top:11px;padding-bottom:11px}
  html.v3 .adm-sp .ch-check label{padding:14px 0}
  html.v3 #pb-editor .pb-pin-check{min-height:44px;align-items:center}
  /* Roster's unmatched hosts: a row that cannot wrap pushed Map, and the choice of who to map to, past the screen. */
  html.v3 #ppa-unmatched .ppa-unmatched-row{flex-wrap:wrap}
  html.v3 #ppa-unmatched .ppa-unmatched-host{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
  /* Repost's share form and the file pickers. */
  html.v3 :is(#repost-share-card .rp-backup-look,#ppa-availability-card .raw-detail) > summary{padding:14px 0}
  html.v3 #repost-share-card .rp-share label.checkbox{align-items:center}
  html.v3 #repost-share-card .rp-share label:is(.rp-radio,.checkbox),html.v3 #repost-share-card .rp-preview .rp-post-links > *{min-height:44px}
  html.v3 :is(#repost-share-card,#brandwide-import-card,#ppa-golive-card) input[type=file]::file-selector-button{min-height:44px;padding:0 14px}
  /* The search box on the phone's full-screen palette: the row's height, not 18px of it. */
  html.v3 .adm-pal-in input{min-height:44px}
}
/* Content Terms on a consultant's phone (760px and narrower): the same 44px. */
@media (max-width:760px){
  html.v3 #terms-ov .btn{min-height:44px}
  html.v3 #terms-ov .terms-full > summary{padding-top:11px;padding-bottom:11px}
}

@media (prefers-reduced-motion:reduce){ html.v3 .toast,html.v3 .btn{transition:none} }
/* Forced colours (Windows High Contrast) paint no backgrounds, so a mask icon would vanish: show the page's own icons. */
@media (forced-colors:active){
  html.v3 :is(.adm-nav-item,.btab,.adm-menu-btn,.adm-search,.more-item)::before,html.v3 #studio:not(.adm-shell) #tabs .tab::before,html.v3 .more-item::after,html.v3 .v3-wn::before,html.v3 .toast::before{display:none}
  html.v3 :is(.adm-nav-item,.btab,.adm-menu-btn,.adm-search) > svg,html.v3 .more-item > .more-ic{display:inline-block}
}