/*
 * Guardian Client Portal — app shell styles.
 *
 * Tokens, type scale, controls, fields, notices and focus come from the
 * approved design system (UI UX Design/guardian.css, tokens.json,
 * guia-implementacion.md). Layout, navigation, views and states follow the
 * approved Portal mockup (guardian-portal-cliente-mockup.html), expressed with
 * those tokens. Every class is prefixed "gp-" so a theme or another plugin
 * cannot collide with the Portal.
 */

@font-face{font-family:'Cal Sans';src:url('../fonts/CalSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  /* guardian.css tokens */
  --ink:#18181B;--white:#FFFFFF;--muted:#60606B;--brand:#8766D5;--brand-strong:#6545AD;--tint:#F5F1FC;--line:#E4E4E7;--control-line:#85858F;--surface:#FAFAFA;
  --success:#166534;--success-bg:#F0FDF4;--warning:#92400E;--warning-bg:#FFFBEB;--error:#B42318;--error-bg:#FEF3F2;
  --font-title:'Cal Sans',system-ui,sans-serif;--font-body:Inter,system-ui,sans-serif;
  --radius-control:10px;--radius-card:16px;--radius-panel:20px;--shadow:0 8px 24px rgba(24,24,27,.08);--duration:160ms;
  /* Guardian form controls */
  --field-height:56px;--radius-field:14px;--field-bg:var(--surface);--field-line:var(--control-line);--field-line-hover:var(--muted);
  --focus-ring:0 0 0 4px rgba(101,69,173,.18);--error-ring:0 0 0 4px rgba(180,35,24,.14);
  /* Portal layout (mockup) */
  --gp-side-width:228px;--gp-tabbar-height:74px;
}

/* ---------- Base (scoped to Portal documents) ---------- */
.gp-body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.5rem;font-synthesis:none;letter-spacing:0;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
.gp-body *,.gp-body *::before,.gp-body *::after{box-sizing:border-box}
.gp-body :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0}
.gp-body :where(h1,h2,h3,h4){font-family:var(--font-title);font-weight:400;overflow-wrap:break-word;letter-spacing:0}
.gp-body :where(button,input,select,textarea){font-family:inherit}
.gp-body :where(a,button,input,select,textarea,summary){touch-action:manipulation;transition:background-color var(--duration) ease-out,color var(--duration) ease-out,border-color var(--duration) ease-out}
.gp-body :focus-visible{outline:2px solid var(--brand-strong);outline-offset:3px}
.gp-body svg{display:inline-block;flex-shrink:0;vertical-align:middle}
.gp-body img{display:block;max-width:100%;height:auto}
.gp-body [hidden]{display:none!important}
.gp-body a{color:var(--brand-strong);text-underline-offset:4px}
.gp-body a:hover{color:#4D318C}
.gp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.gp-skip{position:fixed;left:16px;top:-100px;background:var(--white);padding:12px;z-index:70;border-radius:var(--radius-control)}
.gp-skip:focus{top:8px}

/* ---------- Brand ---------- */
.gp-body .gp-brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;flex-shrink:0;font-family:var(--font-title);font-size:24px;line-height:28px}
.gp-body .gp-brand:hover{color:var(--ink)}
.gp-brand-mark{width:28px;height:28px;object-fit:contain}

/* ---------- Buttons and links (guardian.css .btn) ---------- */
.gp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 24px;border:1px solid transparent;border-radius:var(--radius-control);font-family:var(--font-body);font-size:1rem;line-height:1.5rem;font-weight:600;text-decoration:none;text-align:center;background:var(--ink);color:var(--white);white-space:normal;cursor:pointer}
.gp-body a.gp-btn{color:var(--white)}
.gp-btn:hover,.gp-body a.gp-btn:hover{background:#303036;color:var(--white)}
.gp-btn:active{background:#000}
.gp-btn-secondary,.gp-body a.gp-btn-secondary{background:var(--white);color:var(--ink);border-color:var(--control-line)}
.gp-btn-secondary:hover,.gp-body a.gp-btn-secondary:hover{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.gp-btn-compact{min-height:44px;padding:9px 20px}
.gp-btn:disabled,.gp-btn[aria-disabled=true]{background:var(--line);color:var(--muted);border-color:transparent;cursor:not-allowed}
.gp-btn-block{width:100%}
.gp-body .gp-text-action,.gp-body .gp-text-action:hover,.gp-body .gp-text-action:focus,.gp-body .gp-text-action:active{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:6px;margin:0;font:inherit;font-size:1rem;line-height:1.5rem;font-weight:500;color:var(--brand-strong);background:none;border:0;border-radius:0;padding:0;box-shadow:none;cursor:pointer;text-decoration:none;text-transform:none;letter-spacing:0}
.gp-body .gp-text-action:hover{color:var(--brand)}
.gp-body .gp-text-action[disabled],.gp-body .gp-text-action[disabled]:hover{color:var(--muted);cursor:default}
.gp-text-action svg{width:16px;height:16px}
.gp-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:16px}
.gp-loading-dot{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gp-spin 1s linear infinite}
@keyframes gp-spin{to{transform:rotate(360deg)}}

/* ---------- Fields and notices (guardian.css .field / .notice) ---------- */
.gp-form{max-width:480px;margin-inline:auto;display:flex;flex-direction:column;gap:24px}
.gp-form-actions{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:16px}
.gp-field{display:flex;flex-direction:column;gap:8px}
.gp-field label,.gp-field-label{font-size:14px;line-height:20px;font-weight:500}
.gp-body .gp-field select,.gp-body .gp-select{width:100%;min-width:0;min-height:48px;margin:0;padding:11px 44px 11px 14px;font-family:var(--font-body);font-size:16px;line-height:24px;border:1px solid var(--control-line);border-radius:var(--radius-control);color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2360606B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;box-shadow:none;outline:0;transition:border-color var(--duration) ease-out,box-shadow var(--duration) ease-out,background-color var(--duration) ease-out}
.gp-body .gp-field select:hover,.gp-body .gp-select:hover{border-color:var(--ink);background-color:var(--white);color:var(--ink)}
.gp-body .gp-field select:focus,.gp-body .gp-field select:focus-visible,.gp-body .gp-select:focus,.gp-body .gp-select:focus-visible{border-color:var(--brand-strong);box-shadow:var(--focus-ring);outline:0}
.gp-body .gp-field select:disabled,.gp-body .gp-select:disabled{color:var(--muted);border-color:var(--line);cursor:default}
.gp-field select option,.gp-select option{color:var(--ink);background:var(--white)}
.gp-field select[aria-invalid=true]{border-color:var(--error)}
.gp-helper{font-size:14px;line-height:20px;color:var(--muted)}
.gp-field-error{font-size:14px;line-height:20px;color:var(--error);font-weight:500}
.gp-profile-form{display:flex;flex-direction:column;gap:16px;max-width:480px}
.gp-profile-form .gp-field{gap:8px}
.gp-profile-form .gp-actions{margin-top:0}
.gp-profile-form + .gp-list{margin-top:20px}
.gp-profile-form .gp-note:empty{display:none}
.gp-security-home{display:none}
.gp-sub-title{font-family:var(--font-body);font-size:15px;line-height:22px;font-weight:600;margin:24px 0 8px}
.gp-security > .gp-notice{margin-bottom:16px}
.gp-security > .gp-notice:focus{outline:2px solid var(--ink);outline-offset:2px}
.gp-security-form{margin-top:16px}
.gp-security-options{display:flex;flex-direction:column;gap:20px;max-width:480px}
.gp-security-option{display:flex;flex-direction:column;align-items:stretch;gap:8px}
@media (min-width:768px){.gp-security-option{align-items:flex-start}}

/*
 * Guardian text input. Scoped under .gp-body (specificity 0,2,0) so it wins
 * over theme rules such as input[type=email] (0,1,1) and their :focus
 * variants (0,2,1 vs 0,3,0 here) without !important, wherever the theme's
 * stylesheet is printed. Only approved colours: the --control-line border
 * keeps the 3:1 non-text contrast on white; the focus ring (brand-strong)
 * adds to the border colour change.
 */
.gp-body .gp-input{display:block;width:100%;min-width:0;height:var(--field-height);margin:0;padding:0 18px;border:1px solid var(--field-line);border-radius:var(--radius-field);background:var(--field-bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:24px;box-shadow:none;outline:0;-webkit-appearance:none;appearance:none;transition:background-color var(--duration) ease-out,border-color var(--duration) ease-out,box-shadow var(--duration) ease-out}
.gp-body .gp-input::placeholder{color:var(--muted);opacity:1}
.gp-body .gp-input:hover{border-color:var(--field-line-hover)}
.gp-body .gp-input:focus,.gp-body .gp-input:focus-visible{border-color:var(--brand-strong);background:var(--white);box-shadow:var(--focus-ring);outline:0}
.gp-body .gp-input[aria-invalid=true]{border-color:var(--error)}
.gp-body .gp-input[aria-invalid=true]:focus{box-shadow:var(--error-ring)}
.gp-body .gp-input:disabled{background:var(--surface);border-color:var(--line);color:var(--muted);cursor:not-allowed}
.gp-body .gp-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--field-bg) inset;box-shadow:0 0 0 1000px var(--field-bg) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
.gp-body .gp-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--white) inset,var(--focus-ring);box-shadow:0 0 0 1000px var(--white) inset,var(--focus-ring)}
.gp-body .gp-input:autofill{box-shadow:0 0 0 1000px var(--field-bg) inset}
.gp-body .gp-input:autofill:focus{box-shadow:0 0 0 1000px var(--white) inset,var(--focus-ring)}
.gp-app-body{--field-bg:var(--white)}
.gp-check-label{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14px;line-height:20px}
.gp-check-label input{width:20px;height:20px;margin:0;accent-color:var(--brand-strong)}
.gp-notice{padding:16px;border-radius:var(--radius-control);font-size:14px;line-height:20px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.gp-notice-success{background:var(--success-bg);color:var(--success)}
.gp-notice-warning{background:var(--warning-bg);color:var(--warning)}
.gp-notice-error{background:var(--error-bg);color:var(--error)}
.gp-notice-info{background:var(--tint);color:var(--brand-strong)}
.gp-notice .gp-btn,.gp-notice .gp-text-action{margin-top:0}

/* ---------- Sign-in pages (Guardian auth shell) ---------- */
.gp-container{width:calc(100% - 40px);max-width:1200px;margin-inline:auto}
.gp-auth-body{background:var(--white)}
.gp-auth{display:flex;justify-content:center;min-height:100vh;min-height:100dvh;padding:clamp(24px,5vh,72px) 20px clamp(24px,5vh,56px)}
.gp-auth:focus{outline:0}
.gp-auth-column{width:100%;max-width:400px;margin-block:auto;display:flex;flex-direction:column;gap:20px}
.gp-auth-column-wide{max-width:480px}
.gp-body .gp-auth-brand{align-self:center;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.gp-body .gp-auth-brand:hover{color:var(--ink)}
.gp-auth-mark{width:48px;height:48px;object-fit:contain}
.gp-auth-wordmark{font-family:var(--font-title);font-size:26px;line-height:30px}
.gp-auth-head{display:flex;flex-direction:column;gap:8px;text-align:center}
.gp-auth-title{font-size:1.875rem;line-height:2.25rem}
.gp-lead{font-size:1rem;line-height:1.625rem;color:var(--muted)}
.gp-auth .gp-form{max-width:none;margin:0;gap:20px}
.gp-auth .gp-form-actions{margin-top:4px}
.gp-auth .gp-login-form{gap:12px}
.gp-auth .gp-login-form .gp-form-actions{margin-top:0;gap:8px}
.gp-auth .gp-btn{min-height:var(--field-height);border-radius:var(--radius-field)}
.gp-auth .gp-notice .gp-btn{min-height:44px;border-radius:var(--radius-control)}
.gp-form .gp-btn-block{max-width:none}
.gp-auth-alt{margin:0}
.gp-btn-google,.gp-body .gp-btn-google{gap:12px;background:var(--white);color:var(--ink);border-color:var(--line);font-weight:500}
.gp-btn-google:hover,.gp-body .gp-btn-google:hover{background:var(--field-bg);color:var(--ink);border-color:var(--field-line)}
.gp-btn-google:active{background:var(--line)}
.gp-google-mark{width:18px;height:18px}
.gp-auth-kicker{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-strong)}
.gp-auth-switch{text-align:center;font-size:14px;line-height:20px;color:var(--muted)}
.gp-body .gp-auth-switch a{color:var(--brand-strong);font-weight:500;text-decoration:none}
.gp-body .gp-auth-switch a:hover{text-decoration:underline}
.gp-plan-summary{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius-field);background:var(--tint)}
.gp-plan-summary-label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.gp-plan-summary-name{font-family:var(--font-title);font-size:20px;line-height:28px;overflow-wrap:anywhere}
.gp-plan-summary-meta{font-size:14px;line-height:20px;color:var(--muted)}
.gp-identity{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;font-size:14px;line-height:20px;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.gp-identity form{margin:0}
.gp-body .gp-link-button{min-height:32px;padding:0;border:0;background:none;color:var(--brand-strong);font:inherit;font-weight:500;cursor:pointer}
.gp-body .gp-link-button:hover{text-decoration:underline}
.gp-plan-change{border-top:1px solid var(--line);padding-top:12px}
.gp-plan-change summary{min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--brand-strong);font-weight:500}
.gp-plan-change[open] summary{margin-bottom:12px}
.gp-lang{display:inline-flex;align-items:center;gap:2px;margin:0;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--white)}
.gp-body .gp-lang-option{min-width:40px;min-height:32px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:13px;line-height:16px;font-weight:500;letter-spacing:.02em;cursor:pointer;transition:background-color var(--duration) ease-out,color var(--duration) ease-out}
.gp-body .gp-lang-option:hover{background:var(--surface)}
.gp-body .gp-lang-option[aria-pressed="true"]{background:var(--ink);color:var(--white);font-weight:600}
.gp-body .gp-lang-option:focus-visible{outline:2px solid var(--brand-strong);outline-offset:2px}
.gp-lang-account{align-self:flex-start}
.gp-auth{position:relative}
.gp-auth .gp-lang{position:absolute;top:12px;right:16px}
.gp-divider{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:14px;line-height:20px}
.gp-divider::before,.gp-divider::after{content:"";flex:1;height:1px;background:var(--line)}

/*
 * ---------- Page not found (templates/portal/not-found.php) ----------
 * The 404 of guardianrank.com in the Portal's tokens: the copy and its way
 * back, and a stage (decorative) where the mascot slipped between the two 4s
 * and the 0 rolled away. Every rule is under .gp-404*; the stage scales with
 * its own width (container units, with a fixed fallback).
 */
.gp-body.gp-404-body{background:var(--white);color:var(--ink);font-family:var(--font-body)}
.gp-404-top,.gp-404{width:calc(100% - 40px);max-width:1200px;margin-inline:auto}
.gp-404-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.gp-404{display:grid;align-content:center;align-items:center;gap:24px;min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px);padding:8px 0 48px}
.gp-404:focus{outline:0}
.gp-404-copy{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:560px;margin-inline:auto;text-align:center}
.gp-body .gp-404-code{font-size:14px;line-height:20px;font-weight:600;color:var(--brand-strong)}
.gp-body .gp-404-title{font-family:var(--font-title);font-weight:400;font-size:2.25rem;line-height:2.5rem;color:var(--ink);text-wrap:balance}
.gp-body .gp-404-lead{max-width:34em;font-size:1rem;line-height:1.625rem;color:var(--muted)}
.gp-404-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:320px;margin-top:12px}
.gp-404-actions .gp-btn{text-decoration:none}
.gp-404-stage{order:-1;position:relative;width:100%;max-width:min(340px,42vh);max-width:min(340px,42dvh);margin-inline:auto;aspect-ratio:25/22;container-type:inline-size;pointer-events:none;user-select:none}
.gp-404-digit{position:absolute;top:0;font-family:var(--font-title);font-size:9rem;font-size:46cqw;line-height:1;color:rgba(135,102,213,.15)}
.gp-404-digit-left{left:0}
.gp-404-digit-right{right:0}
.gp-404-floor{position:absolute;left:3%;right:3%;bottom:5%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.gp-404-floor::after{content:"";position:absolute;left:30%;right:36%;top:-5px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(101,69,173,.22),rgba(101,69,173,0))}
.gp-body .gp-404-mascot{position:absolute;left:13%;bottom:5.5%;width:74%;max-width:none;aspect-ratio:24/25;object-fit:cover;transform-origin:50% 100%}
.gp-404-zero{position:absolute;right:5%;bottom:4%;font-family:var(--font-title);font-size:6rem;font-size:28cqw;line-height:1;color:transparent;-webkit-text-stroke:4px var(--brand);-webkit-text-stroke:1.1cqw var(--brand);transform:rotate(32deg)}
@keyframes gp-404-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes gp-404-fade{from{opacity:0}to{opacity:1}}
@keyframes gp-404-slip{0%{opacity:0;transform:translate(-9%,-5%) rotate(-12deg)}60%{opacity:1;transform:translate(1.5%,0) rotate(2.5deg)}100%{opacity:1;transform:none}}
@keyframes gp-404-roll{from{opacity:0;transform:translateX(-150%) rotate(-300deg)}to{opacity:1;transform:rotate(32deg)}}
.gp-404-copy > *{animation:gp-404-rise 240ms ease-out both}
.gp-404-copy > :nth-child(2){animation-delay:60ms}
.gp-404-copy > :nth-child(3){animation-delay:120ms}
.gp-404-copy > :nth-child(4){animation-delay:180ms}
.gp-404-digit,.gp-404-floor{animation:gp-404-fade 480ms ease-out both}
.gp-404-mascot{animation:gp-404-slip 760ms cubic-bezier(.22,.7,.3,1) 120ms both}
.gp-404-zero{animation:gp-404-roll 900ms cubic-bezier(.22,.7,.3,1) 380ms both}
@media (max-width:359px){
  .gp-body .gp-404-title{font-size:2rem;line-height:2.375rem}
}
@media (min-width:768px){
  .gp-404-top,.gp-404{width:calc(100% - 48px)}
  .gp-404-top{min-height:80px}
  .gp-404{gap:32px;min-height:calc(100vh - 80px);min-height:calc(100dvh - 80px);padding:16px 0 64px}
  .gp-404-copy{gap:16px}
  .gp-body .gp-404-title{font-size:3rem;line-height:3.5rem}
  .gp-body .gp-404-lead{font-size:1.125rem;line-height:1.75rem}
  .gp-404-actions{flex-direction:row;flex-wrap:wrap;justify-content:center;width:auto;max-width:none}
  .gp-404-stage{max-width:min(440px,46vh);max-width:min(440px,46dvh)}
}
@media (min-width:1024px){
  .gp-404-top,.gp-404{width:calc(100% - 64px)}
  .gp-404{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:24px 0 80px}
  .gp-404-copy{align-items:flex-start;margin-inline:0;text-align:left}
  .gp-body .gp-404-title{font-size:3.5rem;line-height:4rem}
  .gp-body .gp-404-lead{font-size:1.25rem;line-height:1.875rem}
  .gp-404-actions{justify-content:flex-start}
  .gp-404-stage{order:0;max-width:600px;margin-inline:auto 0}
}

/* ---------- App shell (mockup: side / main / tabbar) ---------- */
.gp-app-body{background:var(--surface)}
.gp-app{min-height:100vh;min-height:100dvh;color:var(--ink)}
.gp-side{display:none}
.gp-main{display:block;min-width:0;padding:24px 20px calc(var(--gp-tabbar-height) + 32px + env(safe-area-inset-bottom))}
.gp-main:focus{outline:0}
.gp-content{max-width:820px;margin:0 auto}

.gp-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px 4px calc(10px + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--line)}
.gp-body .gp-tab{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-height:52px;padding:4px 2px;border-radius:var(--radius-control);color:var(--muted);text-decoration:none;text-align:center}
.gp-tab svg{width:24px;height:24px}
.gp-tab span{font-size:12px;line-height:14px;font-weight:600;overflow-wrap:anywhere}
.gp-body .gp-tab:hover{color:var(--ink)}
.gp-body .gp-tab[aria-current=page]{color:var(--brand-strong)}

.gp-side-context{display:flex;flex-direction:column;gap:8px;padding:0 10px}
.gp-context-name{font-size:14px;line-height:20px;font-weight:600;overflow-wrap:anywhere}
.gp-context-site{font-size:14px;line-height:20px;color:var(--muted);overflow-wrap:anywhere}
.gp-side-nav{display:flex;flex-direction:column;gap:2px}
.gp-body .gp-side-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--radius-control);font-size:15px;line-height:20px;font-weight:600;color:var(--ink);text-decoration:none}
.gp-side-link svg{width:20px;height:20px;color:var(--muted)}
.gp-body .gp-side-link:hover{background:var(--surface);color:var(--ink)}
.gp-body .gp-side-link[aria-current=page]{background:var(--tint);color:var(--brand-strong)}
.gp-side-link[aria-current=page] svg{color:var(--brand-strong)}
.gp-select{min-height:44px;padding:9px 40px 9px 12px;font-size:14px;line-height:20px;background-position:right 10px center}
.gp-context-mobile{margin:-8px 0 24px}

/* ---------- Page head ---------- */
.gp-page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin-bottom:24px}
.gp-page-head-text{min-width:0}
.gp-page-kicker{margin-bottom:6px;font-size:14px;line-height:20px;color:var(--muted);overflow-wrap:anywhere}
.gp-page-title{font-size:1.875rem;line-height:2.25rem}
.gp-page-title:focus{outline:0}
.gp-page-head-aside:empty{display:none}

/* ---------- Blocks and surfaces ---------- */
.gp-block{margin-top:32px}
.gp-block-title{font-family:var(--font-title);font-weight:400;font-size:1.125rem;line-height:1.5rem;margin:0 0 12px}
.gp-block-sub{margin:-4px 0 16px;font-size:14px;line-height:20px;color:var(--muted)}
.gp-panel,.gp-list{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card)}
.gp-panel{padding:20px}
.gp-list{overflow:hidden}
.gp-panel-quiet{background:transparent;border:1px dashed var(--control-line)}
.gp-panel-quiet .gp-opp-text{color:var(--muted)}
.gp-note{font-size:14px;line-height:20px;color:var(--muted);margin-top:10px}
.gp-hero-actions{margin-top:24px}

.gp-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;font-size:12px;line-height:18px;font-weight:500;max-width:100%}
.gp-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.gp-chip-ok{background:var(--success-bg);color:var(--success)}
.gp-chip-warn{background:var(--warning-bg);color:var(--warning)}
.gp-chip-info{background:var(--tint);color:var(--brand-strong)}
.gp-chip-bad{background:var(--error-bg);color:var(--error)}

/* ---------- Home ---------- */
/* Cal Sans has no usable tabular figures (its tnum feature widens every glyph), so figures in Cal Sans use its default spacing. */
.gp-hero-line{font-family:var(--font-title);font-size:1.5rem;line-height:1.875rem;max-width:26ch}
.gp-hero-sub{margin-top:16px;font-size:1rem;line-height:1.625rem;color:var(--muted);max-width:60ch}
.gp-banner{border-radius:var(--radius-card);padding:20px;margin-bottom:24px;background:var(--warning-bg)}
.gp-banner-title{font-family:var(--font-title);font-size:1.125rem;line-height:1.5rem;color:var(--warning);margin-bottom:8px}
.gp-banner p{font-size:15px;line-height:22px;max-width:60ch}
.gp-banner .gp-btn{margin-top:16px}
.gp-assist{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:14px 16px;margin:0 0 20px;border:1px solid var(--warning);border-radius:var(--radius-card);background:var(--warning-bg)}
.gp-assist-text{min-width:0;flex:1 1 280px}
.gp-assist-title{margin:0;font-weight:600;font-size:15px;line-height:22px;color:var(--warning)}
.gp-assist-note{margin:2px 0 0;font-size:13px;line-height:18px;color:var(--ink)}
.gp-assist-exit{margin:0}
.gp-assist .gp-btn{margin:0}

.gp-stats{display:grid;grid-template-columns:minmax(0,1fr);background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.gp-stat{padding:16px 20px;border-top:1px solid var(--line)}
.gp-stat:first-child{border-top:0}
.gp-stat-label{font-size:14px;line-height:20px;color:var(--muted)}
.gp-stat-value{font-family:var(--font-title);font-size:28px;line-height:36px;margin-top:4px}
.gp-stat-value-muted{color:var(--muted)}
.gp-stat-delta{font-size:14px;line-height:20px;margin-top:4px;color:var(--muted)}
.gp-stat-delta strong{color:var(--success);font-weight:600}

.gp-counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.gp-counts>.gp-count:nth-child(5):last-child{grid-column:span 2}
.gp-count{background:var(--white);padding:16px 20px;min-height:92px}
.gp-count-n{font-family:var(--font-title);font-size:28px;line-height:36px}
.gp-count-l{font-size:14px;line-height:20px;color:var(--muted);margin-top:2px}
.gp-count-zero .gp-count-n,.gp-count-zero .gp-count-l{color:var(--control-line)}

.gp-opp-text{max-width:60ch}
.gp-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:16px}
.gp-bar span{display:block;height:100%;background:var(--brand-strong);border-radius:inherit}

.gp-tl{list-style:none;margin:0;padding:6px 0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card)}
.gp-tl-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;padding:10px 20px}
.gp-tl-date{font-size:12px;line-height:18px;color:var(--muted);font-weight:600;padding-top:1px;font-variant-numeric:tabular-nums}
.gp-tl-body{position:relative;padding-left:22px;padding-bottom:4px}
.gp-tl-body::before{content:"";position:absolute;left:3px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--brand-strong)}
.gp-tl-body::after{content:"";position:absolute;left:7px;top:19px;bottom:-16px;width:1px;background:var(--line)}
.gp-tl-item:last-child .gp-tl-body::after{display:none}
.gp-tl-pause .gp-tl-body::before{background:var(--warning)}
.gp-tl-type{font-size:12px;line-height:18px;color:var(--muted);font-weight:600}
.gp-tl-title{font-size:15px;line-height:20px;font-weight:600;margin-top:1px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Onboarding: what happens after connecting, told once under the wizard (no steps, numbers or states). */
.gp-after{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);min-width:0}
.gp-after-title{font-family:var(--font-body);font-size:15px;line-height:22px;font-weight:600;margin:0 0 6px}
.gp-after-text{font-size:15px;line-height:22px;color:var(--muted);max-width:62ch;overflow-wrap:break-word}
.gp-after-text+.gp-after-text{margin-top:8px}

/* ---------- Results ---------- */
.gp-seg{display:flex;gap:4px;padding:4px;border-radius:13px;background:var(--line)}
.gp-seg button{flex:1 1 0;min-width:0;min-height:44px;border:1px solid transparent;border-radius:var(--radius-control);background:transparent;font-size:14px;line-height:18px;font-weight:600;color:var(--muted);padding:6px 8px;cursor:pointer}
.gp-seg button[aria-pressed=true]{background:var(--white);color:var(--ink);border-color:var(--control-line)}
.gp-body .gp-seg button:hover{background:transparent;color:var(--ink);border-color:transparent}
.gp-body .gp-seg button[aria-pressed=true],.gp-body .gp-seg button[aria-pressed=true]:hover{background:var(--white);color:var(--ink);border-color:var(--control-line)}
.gp-seg-wrap{margin-bottom:18px}

.gp-chart-fig{margin:18px 0 0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card);padding:20px 20px 14px}
.gp-chart-cap{font-size:14px;line-height:20px;color:var(--muted);margin-bottom:8px}
.gp-chart{height:200px;padding:10px 0 10px 44px}
.gp-plot{position:relative;height:100%}
.gp-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gp-plot .gp-grid{stroke:var(--line);stroke-width:1}
.gp-plot .gp-area{fill:var(--tint);stroke:none}
.gp-plot .gp-line{fill:none;stroke:var(--brand-strong);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.gp-plot .gp-marker{stroke:var(--muted);stroke-width:1.25;stroke-dasharray:4 4}
.gp-ylab{position:absolute;left:-44px;width:36px;text-align:right;transform:translateY(-50%);font-size:12px;line-height:18px;color:var(--muted);font-variant-numeric:tabular-nums}
.gp-mk-label{position:absolute;top:2px;margin-left:8px;font-size:12px;line-height:18px;font-weight:600;color:var(--muted);background:var(--white);padding:2px 6px;border-radius:6px;white-space:nowrap}
.gp-mk-label-left{margin-left:0;transform:translateX(calc(-100% - 8px))}
.gp-xlab{display:flex;justify-content:space-between;gap:6px;margin:2px 0 0 44px;font-size:12px;line-height:18px;color:var(--muted)}
.gp-chart-note{font-size:14px;line-height:20px;color:var(--muted);margin-top:10px}

.gp-cmp{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.gp-cmp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label label" "vals chip";gap:6px 12px;align-items:center;padding:14px 20px;border-top:1px solid var(--line)}
.gp-cmp-row:first-child{border-top:0}
.gp-cmp-label{grid-area:label;font-size:15px;line-height:22px;color:var(--muted)}
.gp-cmp-vals{grid-area:vals;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-title);font-size:20px;line-height:28px;min-width:0}
.gp-cmp-before{color:var(--control-line)}
.gp-cmp-vals svg{width:16px;height:16px;color:var(--control-line)}
.gp-cmp-wait{color:var(--control-line)}
.gp-cmp-row .gp-chip{grid-area:chip;justify-self:end}

.gp-pg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 16px;align-items:center;padding:14px 20px;border-top:1px solid var(--line)}
.gp-pg:first-child{border-top:0}
.gp-pg-name{font-weight:600;overflow-wrap:anywhere}
.gp-pairing-form{display:flex;flex-direction:column;gap:16px;max-width:560px}
.gp-pairing-form .gp-input[aria-invalid=true]{border-color:var(--error)}
.gp-pairing-code{font-family:var(--font-title);font-size:clamp(22px,7.4vw,32px);line-height:40px;letter-spacing:.04em;margin-top:8px;white-space:nowrap;user-select:all}
.gp-pg-sub{font-size:14px;line-height:20px;color:var(--muted);grid-column:1}
.gp-pg-delta{grid-row:1 / span 2;grid-column:2;font-weight:600;font-size:17px;color:var(--success);font-variant-numeric:tabular-nums}
.gp-pg .gp-chip{grid-column:1 / -1;justify-self:start;margin-top:6px}
.gp-attention{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;box-shadow:inset 4px 0 0 var(--warning)}
.gp-attention .gp-pg-sub{color:var(--warning);font-weight:600}

.gp-q{padding:14px 20px;border-top:1px solid var(--line)}
.gp-q:first-child{border-top:0}
.gp-q-text{font-weight:600;overflow-wrap:anywhere}
.gp-q-pos{font-size:14px;line-height:20px;color:var(--muted);margin-top:3px}
.gp-q-pos-top{color:var(--success);font-weight:600}

/* ---------- Connection wizard (Add sites, first connection on Home) ---------- */
/* State never relies on colour alone: every mark has its own shape or symbol (✓, number, dashed ring, !) and a text. */
.gp-wz{display:flex;flex-direction:column;gap:14px}
.gp-wz-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.gp-wz-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-align:center}
.gp-wz-step+.gp-wz-step::before{content:"";position:absolute;top:15px;left:calc(-50% + 22px);right:calc(50% + 22px);height:2px;border-radius:1px;background:var(--line)}
.gp-wz-done+.gp-wz-step::before{background:var(--success)}
.gp-wz-mark{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;border:2px solid var(--control-line);background:var(--white);color:var(--muted);font-size:14px;line-height:1;font-weight:600}
.gp-wz-mark svg{width:18px;height:18px}
.gp-wz-later .gp-wz-mark{border-style:dashed}
.gp-wz-done .gp-wz-mark{border-color:var(--success);background:var(--success-bg);color:var(--success)}
.gp-wz-now .gp-wz-mark{border-color:var(--brand-strong);background:var(--brand-strong);color:var(--white)}
.gp-wz-attention .gp-wz-mark{border-color:var(--warning);background:var(--warning-bg);color:var(--warning);font-size:16px}
.gp-wz-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.gp-wz-name{display:block;font-size:14px;line-height:20px;font-weight:600;overflow-wrap:anywhere}
.gp-wz-later .gp-wz-name{color:var(--muted)}
.gp-wz-state{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--muted)}
.gp-wz-done .gp-wz-state{color:var(--success)}
.gp-wz-now .gp-wz-state{color:var(--brand-strong)}
.gp-wz-attention .gp-wz-state{color:var(--warning)}
.gp-wz-count{text-align:center;font-size:14px;line-height:20px;font-weight:600;overflow-wrap:anywhere}
.gp-wz-panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.gp-wz .gp-actions,.gp-wz .gp-note{margin-top:0}
.gp-wz-title{font-family:var(--font-title);font-weight:400;font-size:1.25rem;line-height:1.75rem;overflow-wrap:anywhere}
.gp-wz-title:focus{outline:0}
.gp-wz-subtitle{font-family:var(--font-body);font-size:15px;line-height:22px;font-weight:600}
.gp-wz-ready{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:20px;font-weight:500;color:var(--success);overflow-wrap:anywhere}
.gp-wz-ready-mark{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--success-bg)}
.gp-wz-ready-mark svg{width:14px;height:14px}
.gp-wz-alert{font-weight:500}
.gp-wz-alert:focus{outline:2px solid var(--brand-strong);outline-offset:3px}
.gp-wz-agent{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);min-width:0}
.gp-wz-agent-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--tint);color:var(--brand-strong)}
.gp-wz-agent-icon svg{width:24px;height:24px}
.gp-wz-agent-body{flex:1 1 0;min-width:0}
.gp-wz-agent-action{flex:1 1 100%;display:flex;flex-direction:column}
.gp-wz-agent-name{font-weight:600}
.gp-wz-agent-text{font-size:14px;line-height:20px;color:var(--muted);margin-top:2px}
.gp-wz-agent-version{font-size:13px;line-height:18px;font-weight:600;color:var(--brand-strong);margin-top:6px}
.gp-wz-howto{margin:-8px 0 0;padding-left:22px;display:grid;gap:4px;font-size:15px;line-height:22px}
.gp-wz-howto li::marker{color:var(--brand-strong);font-weight:600}
.gp-wz-media{display:grid;gap:12px}
.gp-wz-shot{margin:0;border:1px solid var(--line);border-radius:var(--radius-control);overflow:hidden;background:var(--surface)}
.gp-wz-nav{display:flex;flex-direction:column}
.gp-wz-help{font-size:15px;line-height:22px;max-width:62ch}
.gp-wz-item{display:flex;flex-direction:column;gap:10px;min-width:0;padding-top:16px;border-top:1px solid var(--line)}
.gp-wz-label{font-size:14px;line-height:20px;font-weight:600;overflow-wrap:anywhere}
.gp-wz-copy{display:flex;align-items:center;gap:10px;min-width:0}
.gp-wz-copy .gp-wz-value{flex:1 1 auto}
.gp-wz-copy .gp-btn{flex:none}
.gp-wz-copy-code{flex-direction:column;align-items:stretch}
.gp-wz-address{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label copy" "value value";align-items:center;gap:10px 12px}
.gp-wz-address .gp-wz-label{grid-area:label}
.gp-wz-address .gp-wz-value{grid-area:value}
.gp-wz-address .gp-btn{grid-area:copy}
.gp-wz-value{display:block;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;line-height:22px;color:var(--ink);overflow-wrap:anywhere;user-select:all}
.gp-wz-copy-code .gp-pairing-code{margin-top:0;min-width:0}
.gp-wz-settings > .gp-wz-item:first-child{border-top:0;padding-top:0}
.gp-btn-copied,.gp-btn-copied:hover,.gp-btn-secondary.gp-btn-copied:hover{background:var(--success-bg);color:var(--success);border-color:var(--success)}
.gp-btn-copied svg{width:18px;height:18px}
.gp-wz-wait{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--radius-control);background:var(--tint);color:var(--brand-strong)}
.gp-wz-wait-title{font-weight:600}
.gp-wz-wait-text{font-size:14px;line-height:20px;color:var(--ink)}
.gp-wz-wait .gp-loading-dot{margin-top:2px;flex:none}
.gp-wz-pulse{width:12px;height:12px;margin-top:6px;border-radius:50%;flex:none;background:var(--brand-strong);animation:gp-pulse 1.6s ease-in-out infinite}
@keyframes gp-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.gp-wz-back{margin:-8px 0 0}
.gp-wz-note-bad{color:var(--error)}
.gp-wz-complete{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0;text-align:center}
/* Add sites with the plan full: a calm card in the wizard's place (no steps, no alert colour). */
.gp-full{display:flex;align-items:flex-start;gap:16px;min-width:0}
.gp-full-mark{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--success-bg);color:var(--success)}
.gp-full-mark svg{width:22px;height:22px}
.gp-full-body{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:62ch}
.gp-full-title{font-size:1.25rem;line-height:1.75rem;overflow-wrap:anywhere}
.gp-full-body .gp-actions{margin-top:4px}
.gp-full-body .gp-help{margin-top:8px}
.gp-wz-complete-mark{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--success-bg);color:var(--success)}
.gp-wz-complete-mark svg{width:30px;height:30px}
.gp-wz-complete-site{font-size:15px;line-height:22px;color:var(--muted);overflow-wrap:anywhere}
.gp-wz-status{width:100%;max-width:340px;margin:8px 0 0;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;text-align:left}
.gp-wz-status div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.gp-wz-status div:first-child{border-top:0}
.gp-wz-status dt{font-weight:600}
.gp-wz-status dd{margin:0}
.gp-wz-ok{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--success)}
.gp-wz-ok svg{width:16px;height:16px}
.gp-wz-complete .gp-actions{width:100%;max-width:340px;margin-top:8px}
.gp-wz-complete .gp-actions .gp-btn{flex:1 1 auto}

/* ---------- Work ---------- */
.gp-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
.gp-filter{min-width:0;min-height:44px;padding:6px 12px;line-height:1.2;border-radius:999px;border:1px solid var(--control-line);background:var(--white);font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.gp-body .gp-filter:hover{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.gp-body .gp-filter[aria-pressed=true],.gp-body .gp-filter[aria-pressed=true]:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.gp-month{margin-top:28px}
.gp-month-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:10px}
.gp-month-head .gp-block-title{margin:0}
.gp-month-count{font-size:14px;line-height:20px;color:var(--muted)}
.gp-month .gp-btn{margin-top:12px}
.gp-work{padding:16px 20px;border-top:1px solid var(--line)}
.gp-work:first-child{border-top:0}
.gp-work-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-size:12px;line-height:18px;color:var(--muted);margin-bottom:4px}
.gp-work-type{font-weight:600}
.gp-work-title{font-size:16px;line-height:22px;font-weight:600;overflow-wrap:anywhere}
.gp-work-meta{margin-top:4px;font-size:14px;line-height:20px;color:var(--muted);overflow-wrap:anywhere}
.gp-work-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-top:8px}
.gp-work-foot:empty{display:none}
.gp-ba{margin:10px 0 0;display:grid;gap:8px;background:var(--surface);border-radius:12px;padding:12px 14px}
.gp-ba div{min-width:0}
.gp-ba dt{font-size:12px;line-height:18px;color:var(--muted);font-weight:600}
.gp-ba dd{margin:2px 0 0;font-size:15px;line-height:22px;overflow-wrap:anywhere}
.gp-ba-old dd{color:var(--muted)}

/* ---------- Account / Add sites ---------- */
.gp-kv{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:4px 14px;padding:13px 20px;border-top:1px solid var(--line);align-items:center;min-height:52px}
.gp-kv:first-child{border-top:0}
.gp-kv-k{font-size:15px;line-height:22px;color:var(--muted)}
.gp-kv-v{font-size:15px;line-height:22px;overflow-wrap:break-word;min-width:0}
.gp-plans{list-style:none;margin:0;padding:0}
.gp-plan{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:16px 20px;border-top:1px solid var(--line)}
.gp-plan:first-child{border-top:0}
.gp-plan-current{background:var(--tint)}
.gp-plan-name{font-weight:600;overflow-wrap:anywhere}
.gp-plan-sub{font-size:14px;line-height:20px;color:var(--muted);grid-column:1}
.gp-plan-price{grid-row:1 / span 2;grid-column:2;font-family:var(--font-title);font-size:20px;line-height:28px;text-align:right;overflow-wrap:anywhere}
.gp-plan-action{grid-column:1 / -1;margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.gp-plan-action .gp-btn{width:100%}
.gp-plan-note{grid-column:1 / -1;font-size:14px;line-height:20px;color:var(--muted)}
.gp-plan-message{margin-bottom:16px}
.gp-plan-message:focus{outline:2px solid var(--brand-strong);outline-offset:3px}

/* New-customer plan choice (/start): one radio row per Stripe plan. */
.gp-choices{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.gp-choices legend{padding:0;margin-bottom:8px}
.gp-choice{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:12px 16px;min-height:56px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--white);cursor:pointer}
.gp-choice:hover{border-color:var(--control-line)}
.gp-choice:has(input:checked){border-color:var(--brand-strong);background:var(--tint)}
.gp-choice input{width:20px;height:20px;margin:0;accent-color:var(--brand-strong)}
.gp-choice-text{display:flex;flex-direction:column;min-width:0}
.gp-choice .gp-plan-price{grid-row:auto;grid-column:3;font-size:18px;line-height:24px;text-align:right}
.gp-start .gp-helper,.gp-auth .gp-form-actions .gp-helper{text-align:center}

/* Cancel membership: the destructive colour appears only in its confirmation (design system rule). */
.gp-danger{margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.gp-danger-title{font-family:var(--font-title);font-weight:400;font-size:1.125rem;line-height:1.5rem;color:var(--error);margin-bottom:8px}
.gp-danger p{font-size:15px;line-height:22px;color:var(--muted);max-width:60ch}
.gp-danger .gp-btn{margin-top:16px}
.gp-btn-danger,.gp-btn-danger:hover{background:var(--error);color:var(--white)}
.gp-dialog{border:0;border-radius:var(--radius-panel);padding:24px;width:calc(100% - 40px);max-width:480px;box-shadow:var(--shadow);color:var(--ink);background:var(--white)}
.gp-dialog::backdrop{background:rgba(24,24,27,.4)}
.gp-dialog-title{font-family:var(--font-title);font-weight:400;font-size:1.5rem;line-height:1.875rem;margin:0 0 16px}
.gp-dialog-list{margin:0 0 24px;padding-left:20px;display:grid;gap:8px;color:var(--muted);font-size:15px;line-height:22px}
.gp-dialog-actions{display:grid;gap:12px}
.gp-dialog{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.gp-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 16px;min-width:0}
.gp-dialog-head .gp-dialog-title{margin:0;min-width:0;overflow-wrap:break-word}
.gp-dialog-close{flex:none;width:44px;height:44px;margin:-6px -8px 0 0;border:0;border-radius:var(--radius-control);background:transparent;color:var(--ink);font-size:26px;line-height:1;cursor:pointer}
.gp-body .gp-dialog-close:hover{background:var(--surface);color:var(--ink)}
.gp-dialog-text{margin:0 0 16px;font-size:15px;line-height:22px;color:var(--muted);max-width:62ch;overflow-wrap:break-word}

/* ---------- Help on the current step: tutorial video and support ---------- */
.gp-help{display:flex;flex-direction:column;gap:2px;padding-top:16px;border-top:1px solid var(--line);min-width:0}
.gp-help-title{font-size:15px;line-height:22px;font-weight:600}
.gp-help-actions{display:flex;flex-direction:column;align-items:flex-start;gap:0 24px;min-width:0}
.gp-help-action{text-align:left}
.gp-help-action svg{width:20px;height:20px}
.gp-gbp .gp-help{margin-top:4px}
/* The video: the provider's player, 16:9, as wide as the screen allows (about 960 px), its height always visible. */
.gp-dialog.gp-dialog-media{width:min(960px,calc(100% - 32px),calc((100dvh - 136px) * 16 / 9));max-width:none;padding:16px}
.gp-dialog-media .gp-dialog-head{margin-bottom:12px}
.gp-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-control);overflow:hidden;background:var(--ink)}
.gp-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.gp-support-form{display:flex;flex-direction:column;gap:20px;min-width:0}
.gp-support-form .gp-choice{grid-template-columns:20px minmax(0,1fr);min-height:48px}
.gp-support-form .gp-dialog-actions{margin-top:4px}
.gp-support-form [data-support-status]:empty{display:none}
.gp-body .gp-textarea{display:block;width:100%;min-width:0;min-height:120px;resize:vertical;margin:0;padding:14px 18px;border:1px solid var(--field-line);border-radius:var(--radius-field);background:var(--field-bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:24px;box-shadow:none;outline:0;-webkit-appearance:none;appearance:none;transition:background-color var(--duration) ease-out,border-color var(--duration) ease-out,box-shadow var(--duration) ease-out}
.gp-body .gp-textarea:hover{border-color:var(--field-line-hover)}
.gp-body .gp-textarea:focus,.gp-body .gp-textarea:focus-visible{border-color:var(--brand-strong);background:var(--white);box-shadow:var(--focus-ring);outline:0}
.gp-body .gp-textarea[aria-invalid=true]{border-color:var(--error)}
.gp-body .gp-textarea[aria-invalid=true]:focus{box-shadow:var(--error-ring)}
.gp-body .gp-textarea[readonly]{color:var(--muted)}

/* ---------- States ---------- */
.gp-empty{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card);padding:32px 24px}
.gp-empty-title{font-family:var(--font-title);font-size:1.25rem;line-height:1.75rem;margin-bottom:8px}
.gp-empty p{color:var(--muted);max-width:52ch}
.gp-empty .gp-hero-actions{margin-top:20px}
.gp-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:48px 16px;color:var(--muted)}
.gp-fixture{margin-bottom:24px}

/* ---------- Demo account: badge and restart (sidebar context, phone context), tutorial note, previews, the simulated Google sign-in ---------- */
.gp-page-head-aside{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gp-context-demo{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.gp-context-demo-reset{min-height:32px;font-size:14px;line-height:20px}
.gp-help-action[disabled]{cursor:default;opacity:.55}
.gp-help-note{font-size:13px;line-height:18px;color:var(--muted)}

/* ---------- Preparing the site (from the link to the first summary with content) ---------- */
/* The stages reuse the wizard's marks and states (.gp-wz-mark, .gp-wz-done/now/later); motion stops with reduced motion (end of file). */
.gp-prep{display:grid;gap:20px;justify-items:center}
.gp-prep-body{display:flex;flex-direction:column;gap:16px;width:100%;min-width:0}
.gp-prep-title{font-family:var(--font-title);font-weight:400;font-size:1.5rem;line-height:1.875rem;text-align:center;overflow-wrap:break-word}
.gp-prep-lead{font-size:15px;line-height:22px;color:var(--muted);max-width:62ch;text-align:center}
.gp-prep-lead strong{color:var(--ink);font-weight:600}
.gp-prep-ring{--p:0;position:relative;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;flex:none;background:conic-gradient(var(--brand-strong) calc(var(--p) * 1%),var(--line) 0)}
.gp-prep-ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--white)}
.gp-prep-ring-text{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 20px;text-align:center}
.gp-prep-ring-value{font-family:var(--font-title);font-size:2rem;line-height:2.25rem}
.gp-prep-ring-note{font-size:12px;line-height:16px;color:var(--muted)}
.gp-prep-ring-small{width:64px;height:64px}
.gp-prep-ring-small::before{inset:7px}
.gp-prep-ring-small .gp-prep-ring-text{padding:0}
.gp-prep-ring-small .gp-prep-ring-value{font-family:var(--font-body);font-size:13px;line-height:18px;font-weight:600}
.gp-prep-live{animation:gp-prep-breathe 3s ease-in-out infinite}
@keyframes gp-prep-breathe{0%,100%{filter:none}50%{filter:brightness(1.08)}}
.gp-prep-stages{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gp-prep-stage{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:2px 12px;min-height:44px}
.gp-prep-stage .gp-wz-state{grid-column:2}
.gp-prep-stage-text{min-width:0}
.gp-prep-now .gp-wz-name{color:var(--brand-strong)}
.gp-prep-now .gp-wz-mark{animation:gp-prep-beat 1.6s ease-in-out infinite}
@keyframes gp-prep-beat{0%,100%{box-shadow:0 0 0 0 rgba(101,69,173,.35)}50%{box-shadow:0 0 0 7px rgba(101,69,173,0)}}
.gp-prep-dots span{animation:gp-prep-dot 1.4s ease-in-out infinite}
.gp-prep-dots span:nth-child(2){animation-delay:.2s}
.gp-prep-dots span:nth-child(3){animation-delay:.4s}
@keyframes gp-prep-dot{0%,100%{opacity:.2}50%{opacity:1}}
.gp-prep-ais{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:4px;vertical-align:middle}
.gp-prep-tip strong{font-weight:600}
.gp-prep-body > .gp-note{margin-top:0}
.gp-prep-calm{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.gp-prep-calm-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;flex:none;background:var(--warning-bg);color:var(--warning)}
.gp-prep-calm-icon svg{width:28px;height:28px}
.gp-prep-calm-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.gp-prep-short{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px}
.gp-prep-short-body{min-width:0}
@media (min-width:768px){
  .gp-prep{grid-template-columns:180px minmax(0,1fr);align-items:start;justify-items:stretch;gap:28px}
  .gp-prep-ring:not(.gp-prep-ring-small){width:180px;height:180px}
  .gp-prep-title,.gp-prep-lead{text-align:left}
  .gp-prep-stage{grid-template-columns:32px minmax(0,1fr) auto}
  .gp-prep-stage .gp-wz-state{grid-column:auto;white-space:nowrap}
  .gp-prep-calm{flex-direction:row;align-items:flex-start;text-align:left}
  .gp-prep-calm .gp-prep-title{text-align:left}
}
/* Demo "View page": a page of the fictitious site inside a browser frame. Scoped under .gp-ds. Landings are full captures; articles are Guardian's editorial identity (the Portal's own tokens). */
.gp-dialog.gp-dialog-site{max-width:1180px;width:calc(100% - 32px);padding:0;overflow:hidden;display:flex;flex-direction:column;background:#1F1F24;color:#fff}
.gp-ds-chrome{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;background:#1F1F24}
.gp-ds-dots{display:flex;gap:6px}
.gp-ds-dots i{width:10px;height:10px;border-radius:50%;background:#55555F}
.gp-ds-url{flex:1 1 auto;min-width:0;padding:6px 14px;border-radius:8px;background:#2C2C33;color:#D4D4D8;font-size:13px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gp-dialog-site .gp-dialog-close{color:#fff;margin:0}
.gp-dialog-site .gp-dialog-close:hover{background:#2C2C33}
.gp-ds-viewport{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;background:var(--white)}
.gp-ds-note{margin:0;padding:8px 16px;color:#A1A1AA;font-size:13px;line-height:18px}
.gp-ds{font-family:var(--font-body);color:var(--ink);background:var(--white);font-size:16px;line-height:26px;letter-spacing:0}
/* A landing is its capture at its own pixel size, never enlarged by the browser: a page sheet on the viewport's backdrop, scrolled like a page. */
.gp-ds-landing{min-height:100%;padding:20px 16px 28px;background:#ECECF0}
.gp-body .gp-ds-shot{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;background:var(--white);box-shadow:0 12px 40px rgba(24,24,27,.16);border-radius:6px}
.gp-ds-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 40px;border-bottom:1px solid var(--line);background:var(--white);position:sticky;top:0;z-index:1}
.gp-ds-logo{font-family:var(--font-title);font-size:18px;color:var(--ink);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gp-ds-menu{display:flex;gap:28px;font-size:14px;color:var(--muted)}
.gp-ds-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:999px;background:var(--ink);color:var(--white);font-weight:600;font-size:14px;line-height:20px;white-space:nowrap}
.gp-ds-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center;padding:56px 40px 48px;background:linear-gradient(135deg,var(--tint) 0%,var(--white) 70%)}
.gp-ds-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gp-ds-kicker-chip{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border-radius:999px;background:var(--brand-strong);color:var(--white);letter-spacing:.04em}
.gp-ds-h1{margin:0 0 14px;font-family:var(--font-title);font-weight:400;font-size:2.75rem;line-height:1.08;color:var(--ink);overflow-wrap:anywhere}
.gp-ds-meta{display:flex;flex-wrap:wrap;gap:6px 0;margin:0 0 18px;font-size:14px;line-height:20px;color:var(--muted)}
.gp-ds-meta span+span::before{content:'·';margin:0 10px}
.gp-ds-lead{margin:0;font-size:19px;line-height:30px;color:var(--muted);max-width:60ch}
.gp-ds-hero-art{display:flex;align-items:center;justify-content:center;padding:24px;border-radius:var(--radius-panel);background:var(--white);box-shadow:var(--shadow)}
.gp-body .gp-ds-mascot{display:block;width:100%;max-width:360px;height:auto}
.gp-ds-body{max-width:760px;margin:0 auto;padding:40px 24px 8px}
.gp-ds-h2{margin:36px 0 12px;font-family:var(--font-title);font-weight:400;font-size:1.75rem;line-height:1.2;color:var(--ink)}
.gp-ds-body > .gp-ds-h2:first-child{margin-top:0}
.gp-ds-p{margin:0 0 18px;color:var(--ink);font-size:17px;line-height:28px}
.gp-ds-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;font-size:17px;line-height:26px}
.gp-ds-list li,.gp-ds-takeaways li{display:flex;align-items:flex-start;gap:12px}
.gp-ds-list svg,.gp-ds-takeaways svg{width:22px;height:22px;flex:none;margin-top:2px;color:var(--brand-strong)}
.gp-ds-box-title{margin:0 0 12px;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-strong)}
.gp-ds-takeaways{margin:8px 0 32px;padding:24px 28px;border-radius:var(--radius-panel);background:var(--tint);border:1px solid #E1D8F5}
.gp-ds-takeaways ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:16px;line-height:24px;color:var(--ink)}
.gp-ds-steps{margin:28px 0 32px;padding:28px;border-radius:var(--radius-panel);border:1px solid var(--line);background:var(--surface)}
.gp-ds-steps ol{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.gp-ds-steps li{display:flex;gap:16px;align-items:flex-start}
.gp-ds-steps li p{margin:0;font-size:15px;line-height:23px;color:var(--muted)}
.gp-ds-step-n{flex:none;width:36px;height:36px;border-radius:50%;background:var(--brand-strong);color:var(--white);font-weight:600;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.gp-ds-step-title{font-weight:600;color:var(--ink) !important;font-size:16px !important;margin-bottom:2px !important}
.gp-ds-quote{margin:32px 0;padding:8px 0 8px 28px;border-left:4px solid var(--brand)}
.gp-ds-quote p{margin:0 0 10px;font-family:var(--font-title);font-size:1.5rem;line-height:1.35;color:var(--ink)}
.gp-ds-quote footer{font-size:14px;line-height:20px;color:var(--muted)}
.gp-ds-callout{margin:28px 0;padding:22px 26px;border-radius:var(--radius-card);border:1px solid var(--line);border-left:4px solid var(--brand-strong);background:var(--white);box-shadow:var(--shadow)}
.gp-ds-callout p{margin:0;font-size:16px;line-height:25px;color:var(--ink)}
.gp-ds-compare{margin:28px 0 32px}
.gp-ds-compare table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;font-size:15px;line-height:22px}
.gp-ds-compare th,.gp-ds-compare td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.gp-ds-compare thead th{background:var(--surface);font-weight:600;color:var(--ink)}
.gp-ds-compare tbody th{font-weight:600;color:var(--ink);background:var(--white)}
.gp-ds-compare td{color:var(--muted)}
.gp-ds-compare td:last-child{color:var(--brand-strong);font-weight:600}
.gp-ds-compare tr:last-child th,.gp-ds-compare tr:last-child td{border-bottom:0}
.gp-ds-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;max-width:960px;margin:40px auto 0;padding:32px 36px;border-radius:var(--radius-panel);background:var(--ink);color:var(--white)}
.gp-ds-band-title{margin:0 0 6px;font-family:var(--font-title);font-size:1.5rem;line-height:1.25}
.gp-ds-band-text{margin:0;color:#D4D4D8;max-width:52ch}
.gp-ds-band .gp-ds-btn{background:var(--brand);color:var(--white)}
.gp-ds-related{max-width:960px;margin:40px auto 0;padding:0 24px}
.gp-ds-related-title{margin:0 0 14px;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gp-ds-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.gp-ds-card{padding:0 0 18px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--white);overflow:hidden}
.gp-ds-card-cover{display:flex;align-items:flex-end;min-height:96px;padding:12px 18px;background:linear-gradient(135deg,var(--tint),#E1D8F5);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-strong)}
.gp-ds-card-title{margin:14px 18px 0;font-family:var(--font-title);font-size:1.0625rem;line-height:1.4;color:var(--ink)}
.gp-ds-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:48px;padding:28px 40px 36px;border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:14px;line-height:22px}
.gp-ds-footer p{margin:0 0 4px}
.gp-ds-footer-name{font-family:var(--font-title);font-size:17px;color:var(--ink)}
.gp-body .gp-ds-footer-logo{display:block;width:150px;height:auto;margin-bottom:8px}
@media (max-width:767px){
  .gp-dialog.gp-dialog-site{width:calc(100% - 16px)}
  .gp-ds-nav{padding:12px 20px}
  .gp-ds-menu,.gp-ds-nav .gp-ds-btn{display:none}
  .gp-ds-hero{grid-template-columns:minmax(0,1fr);gap:24px;padding:32px 20px 28px}
  .gp-ds-hero-art{padding:16px}
  .gp-body .gp-ds-mascot{max-width:200px}
  .gp-ds-h1{font-size:1.875rem}
  .gp-ds-band{margin:32px 20px 0;padding:24px}
  .gp-ds-footer{grid-template-columns:minmax(0,1fr);padding:24px 20px 28px}
  .gp-ds-compare th,.gp-ds-compare td{padding:10px 12px;font-size:14px}
}
/* end demo site */
.gp-demo-account{padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-control);margin:0 0 20px}
.gp-demo-account-label{margin:0 0 4px;font-size:13px;line-height:18px;color:var(--muted)}
.gp-demo-account-name{margin:0;font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}

.gp-toast{position:fixed;left:50%;bottom:calc(var(--gp-tabbar-height) + 16px + env(safe-area-inset-bottom));z-index:60;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:max-content;max-width:min(360px,calc(100% - 40px));padding:8px 8px 8px 16px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--white);box-shadow:var(--shadow);font-size:14px;line-height:20px}
.gp-toast-close{border:0;background:transparent;width:44px;height:44px;font-size:22px;flex:none;cursor:pointer;color:var(--ink)}
.gp-body .gp-toast-close:hover{background:var(--surface);color:var(--ink)}

@media (max-width:359px){
  .gp-kv{grid-template-columns:minmax(0,1fr)}
  .gp-tl-item{grid-template-columns:minmax(0,1fr)}
  .gp-tab span{font-size:11px}
}

/* ---------- Google Business Profile posts (Home, selected site) ---------- */
/* States never rely on colour alone: every chip says its state in words; the switch shows On/Off. */
.gp-gbp-panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.gp-gbp-panel>.gp-list{margin:0}
.gp-gbp-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gp-gbp-lead{font-family:var(--font-title);font-size:1.125rem;line-height:1.5rem;overflow-wrap:anywhere}
.gp-gbp-text{font-size:15px;line-height:22px;max-width:62ch;overflow-wrap:anywhere}
.gp-gbp-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.gp-gbp-connect{margin:0;display:flex;flex-direction:column}
.gp-gbp-address{color:var(--muted)}
.gp-gbp .gp-notice{margin-bottom:12px}
.gp-gbp-panel .gp-notice{margin-bottom:0}
.gp-gbp-stale{margin:0 0 12px}
.gp-gbp-choose{display:flex;flex-direction:column;gap:14px;margin:0;min-width:0}
.gp-gbp-choices{margin:0;padding:0;border:0;min-width:0;display:grid;gap:8px}
.gp-gbp-choice{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:12px;min-height:44px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--white);cursor:pointer}
.gp-gbp-choice:hover{border-color:var(--control-line)}
.gp-gbp-choice:has(input:checked){border-color:var(--brand-strong);background:var(--tint)}
.gp-gbp-choice input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--brand-strong)}
.gp-gbp-choice-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.gp-gbp-choice-title{font-weight:600;overflow-wrap:anywhere}
.gp-gbp-choice-meta{font-size:14px;line-height:20px;color:var(--muted);overflow-wrap:anywhere}
.gp-gbp-loading{display:flex;align-items:center;gap:10px;color:var(--muted)}
.gp-gbp-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid var(--line);min-width:0}
.gp-gbp-switch-text{min-width:0}
.gp-gbp-switch-label{font-weight:600}
.gp-body .gp-switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 4px;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;line-height:20px;font-weight:600;cursor:pointer;flex:none}
.gp-switch-track{position:relative;width:44px;height:26px;border-radius:999px;background:var(--control-line);transition:background-color var(--duration) ease-out}
.gp-switch-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--white);box-shadow:0 1px 2px rgba(24,24,27,.3);transition:transform var(--duration) ease-out}
.gp-switch[aria-checked=true] .gp-switch-track{background:var(--brand-strong)}
.gp-switch[aria-checked=true] .gp-switch-thumb{transform:translateX(18px)}
.gp-body .gp-switch:disabled{cursor:progress;opacity:.6}
.gp-switch-state{min-width:3ch;text-align:left}
.gp-gbp-work{font-size:15px;line-height:22px;color:var(--success);font-weight:500}
.gp-gbp-paused{padding:14px 16px;border-radius:var(--radius-control);background:var(--warning-bg);color:var(--warning);font-size:14px;line-height:20px}
.gp-gbp-paused-title{font-weight:600;margin-bottom:2px}
/* Guardian's side: neutral, like a note (no alert colour); nothing for the customer to do. */
.gp-gbp-soon{padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);color:var(--muted);font-size:14px;line-height:20px}
.gp-gbp-soon-title{font-weight:600;margin-bottom:2px;color:var(--ink)}
.gp-gbp-subtitle{font-family:var(--font-body);font-size:15px;line-height:22px;font-weight:600;margin-top:4px}
.gp-gbp-empty{margin-top:0}
.gp-gbp-posts{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.gp-gbp-post{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-top:1px solid var(--line);min-width:0}
.gp-gbp-post:first-child{border-top:0}
.gp-gbp-post-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gp-gbp-post-date{font-size:13px;line-height:18px;color:var(--muted);font-variant-numeric:tabular-nums}
.gp-gbp-post-topic{font-weight:600;overflow-wrap:anywhere}
.gp-gbp-post-summary{font-size:14px;line-height:20px;color:var(--muted);overflow-wrap:anywhere}
.gp-gbp-post-link{align-self:flex-start;font-size:14px}
.gp-gbp-danger{padding-top:12px;border-top:1px solid var(--line)}
.gp-body .gp-gbp-disconnect{color:var(--error)}
.gp-body .gp-gbp-disconnect:hover{text-decoration:underline}
/* ---------- Sales: the seller's area, and My Guardian | Sales ---------- */
.gp-areas{display:flex;gap:4px;padding:4px;border-radius:13px;background:var(--line)}
.gp-body .gp-area{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 8px;border:1px solid transparent;border-radius:var(--radius-control);font-size:14px;line-height:18px;font-weight:600;color:var(--muted);text-decoration:none;text-align:center}
.gp-body .gp-area:hover{color:var(--ink)}
.gp-body .gp-area[aria-current=page]{background:var(--white);color:var(--ink);border-color:var(--control-line)}
.gp-side .gp-areas{margin:0 10px}
.gp-body .gp-side .gp-area{font-size:13px;padding:6px 4px;white-space:nowrap}
.gp-side .gp-areas-3{flex-direction:column}
.gp-areas-mobile{margin:0 0 20px}
.gp-side-area{padding:0 12px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
/* ---------- Every shell: sidebar foot (wide), phone header and its menu (narrow) ---------- */
/* Sign out is the Portal's POST /logout; English | Español the same /language form as the sign-in pages. */
.gp-side-foot{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.gp-side-foot .gp-lang{align-self:flex-start;margin:4px 12px}
.gp-side-signout .gp-side-link,.gp-menu-signout .gp-side-link{width:100%;border:0;background:none;cursor:pointer;text-align:left;font-family:inherit}
.gp-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:calc(6px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left));background:var(--white);border-bottom:1px solid var(--line)}
.gp-body .gp-topbar .gp-brand{font-size:22px;line-height:26px;min-width:0}
.gp-topbar .gp-brand-mark{width:28px;height:28px}
.gp-topbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.gp-body .gp-lang-compact .gp-lang-option{min-width:44px;min-height:38px}
.gp-menu{position:relative}
.gp-menu-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--white);color:var(--ink);cursor:pointer;list-style:none}
.gp-menu-button::-webkit-details-marker{display:none}
.gp-menu-button::marker{content:""}
.gp-menu-button svg{width:22px;height:22px}
.gp-body .gp-menu-button:hover{background:var(--surface);color:var(--ink);border-color:var(--control-line)}
.gp-menu[open] .gp-menu-button{background:var(--surface);border-color:var(--control-line)}
.gp-menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:50;display:flex;flex-direction:column;gap:12px;width:min(300px,calc(100vw - 32px));max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px - env(safe-area-inset-top));overflow-y:auto;padding:10px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow)}
.gp-menu-nav{display:flex;flex-direction:column;gap:2px}
.gp-body .gp-menu-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--radius-control);font-size:15px;line-height:20px;font-weight:600;color:var(--ink);text-decoration:none}
.gp-menu-link svg{width:20px;height:20px;color:var(--muted)}
.gp-body .gp-menu-link:hover{background:var(--surface);color:var(--ink)}
.gp-body .gp-menu-link[aria-current=page]{background:var(--tint);color:var(--brand-strong)}
.gp-menu-link[aria-current=page] svg{color:var(--brand-strong)}
.gp-areas-menu{flex-wrap:wrap}
.gp-menu-signout{padding-top:8px;border-top:1px solid var(--line)}
.gp-tabbar-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gp-switch-actions{display:flex;flex-direction:column;gap:12px}
.gp-sales-rates{margin-top:12px}
.gp-sales-month{max-width:320px;margin-bottom:12px}
.gp-sales .gp-pg-delta{color:var(--ink)}
.gp-sales .gp-pg-delta.gp-sales-minus{color:var(--error)}
.gp-sales-delta-note{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--muted);text-align:right}
.gp-sales-client-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:6px;font-size:14px;line-height:20px;color:var(--muted)}
.gp-sales .gp-sales-client-foot .gp-chip{margin-top:0}
.gp-sales-payments{grid-column:1 / -1;margin:6px 0 0;padding-left:18px;font-size:14px;line-height:20px;color:var(--muted)}
.gp-ref{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 20px}
.gp-ref-link{flex:1 1 240px;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:20px;overflow-wrap:anywhere;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface)}
.gp-ref .gp-btn{flex:none}
.gp-ref .gp-btn svg{width:18px;height:18px}
.gp-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;height:180px;padding-top:8px}
.gp-months-col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-width:0}
.gp-months-bar{display:block;width:100%;max-width:36px;min-height:2px;border-radius:6px 6px 2px 2px;background:var(--tint);border:1px solid var(--brand)}
.gp-months-now .gp-months-bar{background:var(--brand-strong);border-color:var(--brand-strong)}
.gp-months-neg .gp-months-bar{background:var(--error-bg);border-color:var(--error)}
.gp-months-label{font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap}
/* Sales admin (the owner): eight sections scroll sideways in the tab bar on narrow screens. */
.gp-tabbar-scroll{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.gp-tabbar-scroll::-webkit-scrollbar{display:none}
.gp-body .gp-tabbar-scroll .gp-tab{flex:0 0 auto;min-width:76px;padding:4px 10px;scroll-snap-align:start}
.gp-tabbar-scroll .gp-tab span{white-space:nowrap;overflow-wrap:normal}
.gp-admin-month{max-width:320px;margin-bottom:16px}
.gp-admin-filters{margin-bottom:16px}
.gp-admin-form{max-width:none;margin:0;gap:16px}
.gp-admin-form .gp-form-actions{align-items:stretch;margin-top:0}
.gp-admin-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.gp-admin-meta{grid-column:1 / -1;font-size:14px;line-height:20px;color:var(--muted)}
.gp-admin-link{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:6px}
.gp-admin-link code{flex:1 1 220px;min-width:0;font-size:13px;line-height:18px;overflow-wrap:anywhere;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface)}
.gp-admin-actions{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;margin-top:10px}
.gp-admin-panel{grid-column:1 / -1;margin-top:12px;padding:16px;border-radius:var(--radius-control);background:var(--surface)}
.gp-admin-panel .gp-state{padding:16px}
.gp-admin-panel .gp-input{background:var(--white)}
.gp-admin-sub{font-size:15px;line-height:22px;font-weight:600;margin:0 0 8px}
.gp-admin-preview{font-size:15px;line-height:22px;margin-bottom:12px}
.gp-admin-history{margin:0 0 12px;padding-left:18px;font-size:14px;line-height:20px;color:var(--muted)}
.gp-admin-history li{overflow-wrap:anywhere}
.gp-admin-history li+li{margin-top:6px}
.gp-admin-void{opacity:.75}
.gp-admin-history .gp-admin-form{margin-top:8px}
.gp-admin-rows{margin-top:12px;font-size:14px;line-height:20px}
.gp-admin-rows summary{padding:12px 0;cursor:pointer;font-weight:600;color:var(--brand-strong)}
.gp-admin-goal{margin-top:12px}
.gp-kv-note{display:block;font-size:12px;line-height:16px;color:var(--muted)}
.gp-kv-strong .gp-kv-k,.gp-kv-strong .gp-kv-v{font-weight:600;color:var(--ink)}
.gp-admin-panel .gp-list{margin-bottom:12px}
.gp-admin-pays{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.gp-admin-pays li{padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--white);font-size:14px;line-height:20px;overflow-wrap:anywhere}
.gp-admin-pays .gp-check-label{align-items:flex-start}
.gp-admin-pays .gp-check-label .gp-admin-pay-title{padding-top:12px}
.gp-admin-pay-title{margin:0;font-weight:600;color:var(--ink)}
.gp-admin-pay-note{margin:4px 0 0;font-size:13px;line-height:18px;color:var(--muted)}
.gp-admin-pays .gp-check-label ~ .gp-admin-pay-note{padding-left:32px}
.gp-admin-total{font-size:15px;line-height:22px;font-weight:600;margin:0}
.gp-admin-form .gp-check-label input{flex:0 0 auto;height:44px}
@media (max-width:420px){
  .gp-months{gap:3px}
  .gp-months-label{font-size:10px}
}
@media (min-width:768px){
  .gp-areas-mobile{display:none}
  .gp-topbar{display:none}
  .gp-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gp-admin-form .gp-form-actions{flex-direction:row;justify-content:flex-start}
}
@media (min-width:768px){
  .gp-pairing-code{font-size:40px;line-height:48px;letter-spacing:.06em}
  .gp-wz-text{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal}
  .gp-wz-count{display:none}
  .gp-wz-copy-code{flex-direction:row;align-items:center;justify-content:space-between}
  .gp-wz-address{grid-template-areas:"label label" "value copy"}
  .gp-wz-agent{align-items:center}
  .gp-wz-agent-action{flex:none}
  .gp-wz-nav{flex-direction:row;justify-content:flex-end}
  .gp-help-actions{flex-direction:row;flex-wrap:wrap;align-items:center}
}
@media (min-width:768px){
  .gp-body .gp-brand{font-size:28px;line-height:32px}
  .gp-brand-mark{width:32px;height:32px}
  .gp-auth-title{font-size:2rem;line-height:2.5rem}

  .gp-app{display:flex;align-items:flex-start}
  .gp-side{position:sticky;top:0;display:flex;flex-direction:column;gap:22px;flex:0 0 var(--gp-side-width);width:var(--gp-side-width);height:100vh;height:100dvh;padding:22px 12px;border-right:1px solid var(--line);background:var(--white);overflow-y:auto}
  .gp-side .gp-brand{padding:0 10px;font-size:24px;line-height:28px}
  .gp-side .gp-brand-mark{width:28px;height:28px}
  .gp-tabbar{display:none}
  .gp-main{flex:1;padding:36px 44px 56px}
  .gp-context-mobile{display:none}
  .gp-page-kicker{display:none}
  .gp-block-title{font-size:1.25rem;line-height:1.75rem}
  .gp-hero-line{font-size:1.625rem;line-height:2rem}
  .gp-stats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gp-stats-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gp-stat{border-top:0;border-left:1px solid var(--line)}
  .gp-stat:first-child{border-left:0}
  .gp-counts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gp-counts-two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gp-seg-wrap{max-width:480px}
  .gp-cmp-row{grid-template-columns:minmax(0,1fr) 190px 180px;grid-template-areas:"label vals chip"}
  .gp-cmp-row .gp-chip{justify-self:start}
  .gp-filters{display:flex;flex-wrap:wrap}
  .gp-filter{padding:0 18px}
  .gp-chart{height:240px}
  .gp-panel{padding:24px}
  .gp-actions{flex-direction:row;flex-wrap:wrap;align-items:center}
  .gp-toast{bottom:28px}
  .gp-plan{grid-template-columns:minmax(0,1fr) auto auto}
  .gp-plan-action{grid-row:1 / span 2;grid-column:3;margin-top:0;justify-content:flex-end;min-width:160px}
  .gp-plan-action .gp-btn{width:auto}
  .gp-month .gp-btn-block,.gp-block > .gp-btn-block{width:auto}
  .gp-gbp-actions{flex-direction:row;flex-wrap:wrap;align-items:center}
}
@media (min-width:1024px){
  .gp-hero-line{font-size:1.75rem;line-height:2.25rem}
}
@media (prefers-reduced-motion:reduce){
  .gp-body *,.gp-body *::before,.gp-body *::after{animation:none!important;transition:none!important}
}