/* goyo theme (P26), look 2: one blue masthead on every page, white sheets on a grey room, one type system.
   Everything is scoped under html[data-vtheme]. Spec: docs/design/SITEWIDE-LOOK-SPEC.md, built in docs/design/LOOK2-BUILD-NOTES.md.
   Type: Atkinson Hyperlegible Next for the interface and body (self-hosted, see fonts/). Literata only for the masthead
   headline on the three moving-dots pages and for letter papers. Nothing is smaller than 18px.
   Contrast (computed): ink #13202f on white 16.5:1; secondary ink #424f5d on white 8.4:1 and on the room 7.7:1; teal text
   #08574a on white 8.5:1, on the room 7.8:1 and on the mint tint 7.5:1; white on the blue #15335E 12.6:1, mist 8.5:1,
   gold 7.5:1. White on the teal button #0d7a66 is 5.3:1 (large bold text). */

/* ---------- 0a. fonts: self-hosted woff2 (SIL Open Font License, licence texts in fonts/) ---------- */
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/atkinson-next-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/atkinson-next-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/literata-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/literata-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 0. tokens ---------- */
html[data-vtheme],html[data-vtheme][data-theme]{
  --f-ui:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-doc:Literata,Georgia,"Times New Roman",serif;
  --gv-room:#f3f5f8; --gv-card:#ffffff; --gv-ink:#13202f; --gv-ink-2:#424f5d; --gv-ink-3:#424f5d; --gv-label:#424f5d;
  --gv-teal:#0d7a66; --gv-teal-ink:#08574a; --gv-teal-h:#0a6655; --gv-tint:#e6f4f0; --gv-mint:#eefaf5; --gv-mint-2:#f2fbf7; --gv-mint-line:#8fd3c0;
  --gv-field:#cfd6dd; --gv-doc:#cfd6dd; --gv-hair:#cfd6dd; --gv-div:#e3e7ec; --gv-skel:#e4e8ec; --gv-tick:#8a97a3;
  --gv-flag-line:#f0c36d; --gv-flag:#fff9ea; --gv-flag-dot:#e8a317; --gv-warn:#fff6e5; --gv-bad:#ffecec; --gv-bad-ink:#8a1f15;
  --gv-navy:#13202f; --gv-navy-2:#0f1a2b;
  --gv-shadow:0 1px 2px rgba(20,40,60,.08); --gv-lift:0 14px 34px rgba(20,40,60,.18); --gv-toast:0 18px 50px rgba(20,40,60,.35);
  --gv-sans:var(--f-ui);
  --r-sheet:12px; --r-ctl:10px; --r-chip:6px; --sheet-lift:28px; --tap:48px; --tap-lg:56px;
  /* masthead */
  --vb-sea:#15335E; --vb-sea-2:#1E4276; --vb-white:#FFFFFF; --vb-mist:#C9D6E4; --vb-gold:#E8C46A; --vb-gold-hi:#F2D78F; --vb-teal-lit:#4FC3A6;
  --mk-disc:#35506B; --mk-halo:#E8C46A; --mk-paper:#FBFBFA;
  /* the shared shell and page tokens, set to the light GUI */
  --g-bg:#ffffff; --g-bg-2:#f3f5f8; --g-ink:#13202f; --g-ink-2:#424f5d; --g-line:#cfd6dd; --g-line-2:#e3e7ec; --g-card:#ffffff;
  --g-navy:#08574a; --g-navy-h:#0a6655; --g-navy-deep:#13202f; --g-navy-bg:#e6f4f0; --g-gold:#08574a; --g-gold-halo:#0d7a66;
  --g-ok:#08574a; --g-ok-bg:#e6f4f0; --g-warn:#6b4c00; --g-warn-bg:#fff6e5; --g-stop:#8a1f15; --g-stop-bg:#ffecec;
  --g-serif:var(--f-ui); --g-sans:var(--f-ui);
  --bg:#ffffff; --bg2:#f3f5f8; --line:#cfd6dd; --line2:#e3e7ec; --ink:#13202f; --ink2:#424f5d;
  --acc:#08574a; --acc-h:#0a6655; --acc-bg:#e6f4f0; --card:#ffffff; --ring:rgba(13,122,102,.30); --ok:#08574a; --ok-bg:#e6f4f0; --gold:#08574a;
  --sans:var(--f-ui); --serif:var(--f-ui); --mono:var(--f-ui); --gsug-sans:var(--f-ui); --gsug-serif:var(--f-ui); --gsug-mono:var(--f-ui); --r:12px;
  color-scheme:light; background:var(--gv-room); color:var(--gv-ink);
}
html[data-vtheme] body{background:var(--gv-room);color:var(--gv-ink);font:400 19px/1.6 var(--f-ui);font-variant-numeric:tabular-nums;min-height:100vh;-webkit-font-smoothing:antialiased}
html[data-vtheme] body::before,html[data-vtheme] body::after{content:none!important;display:none!important;animation:none!important}
html[data-vtheme] :focus-visible{outline:3px solid var(--gv-teal);outline-offset:3px}
html[data-vtheme] :is(button,input,select,textarea){font-family:inherit}
/* one family: any old rule that names serif or mono resolves to the interface font; only the two jobs below use Literata */
html[data-vtheme] :is(code,pre,kbd,samp,.gcite,.gquote-t){font-family:var(--f-ui)}
html[data-vtheme] em,html[data-vtheme] i:not(.ico){font-style:normal}
html[data-vtheme] :is(.paper,.vg-letter,.sheet-letter,.lb,.dlg-paper){font-family:var(--f-doc)}
html[data-vtheme] .vt-m2 :is(h1,.vt-display),html[data-vtheme] .vt-display{font-family:var(--f-doc);font-weight:600}

/* ---------- 1. the blue bar: flat sea, no dots, white words ---------- */
html[data-vtheme] .gshell-host{background:var(--vb-sea);border-bottom:1px solid var(--vb-sea-2);box-shadow:none}
html[data-vtheme] #shell .gshell-w{border:0;background:var(--vb-sea)}
html[data-vtheme] #shell .top{background:var(--vb-sea);border:0}
html[data-vtheme] #shell .top .in{max-width:1280px;min-height:72px;padding:8px 32px;align-items:center;column-gap:20px}
html[data-vtheme] .gshell .gshell-theme{display:none!important}
html[data-vtheme] #shell :is(.glockup,.logo){min-height:48px;gap:10px;text-decoration:none;align-self:center;color:#fff}
html[data-vtheme] #shell :is(.glockup,.logo) svg{display:block;width:40px;height:40px;flex:none;border-radius:50%;box-shadow:0 0 0 2px var(--mk-paper)}
html[data-vtheme] .glockup b{font:700 28px/1 var(--f-ui);color:#fff;letter-spacing:-.01em}
html[data-vtheme] .glockup b i{font-style:normal;font-weight:400;color:var(--vb-mist)}
/* the footer lockup sits on the grey room, not on blue */
html[data-vtheme] :is(footer#foot,.gfoot) .glockup b{color:var(--gv-ink)}
html[data-vtheme] :is(footer#foot,.gfoot) .glockup b i{color:var(--gv-ink-2)}
/* tabs: flat words on the bar. The page you are on is bold, has a white bar under it and the gold halo of the logo above the bar */
html[data-vtheme] #shell .gnav{gap:2px;align-items:stretch;align-self:center}
html[data-vtheme] #shell .gnav>a,html[data-vtheme] #shell .gshell-keep>a{position:relative;display:inline-flex;align-items:center;min-height:56px;padding:0 14px;border-radius:0;background:transparent;box-shadow:none;color:#fff;font:600 18px/1.2 var(--f-ui);text-decoration:none;border:0;white-space:nowrap}
html[data-vtheme] #shell .gnav>a:hover,html[data-vtheme] #shell .gshell-keep>a:hover{background:transparent;color:#fff;text-decoration:underline;text-decoration-color:var(--vb-mist);text-decoration-thickness:2px;text-underline-offset:6px}
html[data-vtheme] #shell .gnav>a:active{background:rgba(255,255,255,.08)}
html[data-vtheme] #shell .gnav>a:is(.on,[aria-current]),html[data-vtheme] #shell .gnav>a:is(.on,[aria-current]):hover{background:transparent;color:#fff;font-weight:700;box-shadow:none;text-decoration:none}
html[data-vtheme] #shell .gnav>a:is(.on,[aria-current])::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:4px;background:#fff}
html[data-vtheme] #shell .gnav>a:is(.on,[aria-current])::before{content:"";position:absolute;left:50%;bottom:9px;width:14px;height:5px;margin-left:-9px;border:2px solid var(--vb-gold);border-radius:50%;background:transparent}
html[data-vtheme] #shell :is(a,button):focus-visible{outline:3px solid var(--vb-gold);outline-offset:2px}
/* the account side */
html[data-vtheme] #shell .goyo-acc{align-self:center;display:flex;align-items:center;gap:6px;min-height:48px}
html[data-vtheme] #shell .goyo-acc .who{display:inline-flex;align-items:center;gap:10px;padding:0 8px 0 0}
html[data-vtheme] #shell .goyo-acc .av{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border-radius:50%;background:var(--mk-disc);box-shadow:0 0 0 2px var(--mk-paper);color:#fff;font:700 18px/1 var(--f-ui)}
html[data-vtheme] #shell .goyo-acc .nm{font:400 18px/1.2 var(--f-ui);color:#fff;max-width:16ch}
html[data-vtheme] #shell .goyo-acc :is(a,button.out){display:inline-flex;align-items:center;min-height:48px;padding:0 12px;border:0;border-radius:0;background:transparent;color:#fff;font:600 18px/1.2 var(--f-ui);text-decoration:none;cursor:pointer}
html[data-vtheme] #shell .goyo-acc :is(a,button.out):hover{background:transparent;color:#fff;text-decoration:underline;text-decoration-color:var(--vb-mist);text-decoration-thickness:2px;text-underline-offset:6px}
html[data-vtheme] #shell .goyo-acc a[href$="SIGN_IN.html"]{border:2px solid var(--vb-mist);color:#fff;padding:0 18px;border-radius:var(--r-ctl)}
html[data-vtheme] #shell .goyo-acc a[href$="SIGN_IN.html"]:hover{background:rgba(255,255,255,.1);text-decoration:none}
html[data-vtheme] #shell .goyo-acc .say,html[data-vtheme] #shell .goyo-acc .tag{font-size:18px;color:var(--vb-mist)}
/* the phone menu: a Menu button on the bar, the same tabs stacked in a white panel */
html[data-vtheme] #shell .gshell-menu{min-width:48px;min-height:48px;border:2px solid var(--vb-mist);border-radius:var(--r-ctl);background:transparent;color:#fff;font:600 18px/1 var(--f-ui)}
html[data-vtheme] #shell[data-layout=menu] .gshell-panel{background:#fff;border-top:1px solid var(--gv-hair);box-shadow:0 12px 24px rgba(20,40,60,.14);padding:8px 16px 16px}
html[data-vtheme] #shell[data-layout=menu] .gnav{gap:0}
html[data-vtheme] #shell[data-layout=menu] .gnav>a,html[data-vtheme] #shell[data-layout=menu] .gshell-keep>a{min-height:56px;width:100%;color:var(--gv-ink);font:600 19px/1.2 var(--f-ui);padding:0 16px;border-bottom:1px solid var(--gv-div)}
html[data-vtheme] #shell[data-layout=menu] .gnav>a:hover{color:var(--gv-ink);text-decoration:underline}
html[data-vtheme] #shell[data-layout=menu] .gnav>a:is(.on,[aria-current]){font-weight:700;box-shadow:inset 4px 0 0 var(--vb-sea)}
html[data-vtheme] #shell[data-layout=menu] .gnav>a:is(.on,[aria-current])::after{content:none}
html[data-vtheme] #shell[data-layout=menu] .gnav>a:is(.on,[aria-current])::before{left:auto;right:16px;bottom:auto;top:50%;margin:-3px 0 0;border-color:#b8902a}
html[data-vtheme] #shell[data-layout=menu] .goyo-acc{flex-wrap:wrap}
html[data-vtheme] #shell[data-layout=menu] .gshell-panel .goyo-acc :is(a,button.out,.nm,.say,.tag){color:var(--gv-ink)}
html[data-vtheme] #shell[data-layout=menu] .gshell-panel .goyo-acc a[href$="SIGN_IN.html"]{border-color:var(--vb-sea)}
@media (max-width:700px){html[data-vtheme] #shell .top .in{padding:8px 16px;min-height:64px}html[data-vtheme] .glockup b{font-size:24px}html[data-vtheme] #shell :is(.glockup,.logo) svg{width:36px;height:36px}}
html[data-vtheme] .gskip{font-size:18px}
/* the email banner: calm amber, readable */
html[data-vtheme] .gverify{background:var(--gv-warn);color:var(--gv-ink);border-bottom:1px solid var(--gv-flag-line)}
html[data-vtheme] .gverify :is(p,b,span){color:var(--gv-ink);font-size:18px}
html[data-vtheme] .gverify-btn{background:#fff;color:var(--gv-teal-ink);border:2px solid var(--gv-teal);min-height:48px;font:700 18px/1 var(--f-ui);border-radius:var(--r-ctl);padding:0 18px;cursor:pointer}
/* no breadcrumbs: the tab says where you are */
html[data-vtheme] nav.crumbs{display:none}
#vt-motion{display:none!important}

/* ---------- 2. the room and the card ---------- */
/* a plain page is one white card on the room */
html[data-vtheme] main#main{
  display:block;max-width:960px;margin:32px auto 64px;padding:40px 44px 44px;background:#fff;color:var(--gv-ink);
  border-radius:12px;box-shadow:var(--gv-shadow);border:1px solid var(--gv-hair);font:400 19px/1.6 var(--gv-sans);
}
@media (max-width:700px){html[data-vtheme] main#main{margin:16px 12px 40px;padding:26px 20px 30px;border-radius:12px}}
html[data-vtheme] main#main .page,html[data-vtheme] main#main .wrap{max-width:none!important;padding:0;margin:0}
/* a working page is the room itself, holding several cards (Start, Home, Examples, Guides, Your case, Who has to answer) */
html[data-vtheme] main#main:is(:has(> #p1),:has(> #gate),:has(.vg-room)){max-width:1280px;margin:28px auto 64px;padding:0 32px;background:transparent;box-shadow:none;border:0;border-radius:0}
@media (max-width:700px){html[data-vtheme] main#main:is(:has(> #p1),:has(> #gate),:has(.vg-room)){margin:14px 0 40px;padding:0 12px}}
html[data-vtheme] .vg-card{background:#fff;border:1px solid var(--gv-hair);border-radius:12px;box-shadow:var(--gv-shadow);padding:32px 36px;margin:0 0 24px}
@media (max-width:700px){html[data-vtheme] .vg-card{padding:24px 20px;border-radius:12px;margin-bottom:16px}}
html[data-vtheme] .vg-dark{background:var(--gv-navy-2);color:#fff}

/* ---------- 3. type: one sans, sentence case, few sizes ---------- */
html[data-vtheme] main#main :is(h1,h2,h3,h4){font-family:var(--gv-sans);color:var(--gv-ink);letter-spacing:-.01em;text-transform:none}
html[data-vtheme] main#main h1{font:700 clamp(28px,3.2vw,36px)/1.18 var(--gv-sans);margin:0 0 8px}
html[data-vtheme] main#main h2{font:700 clamp(23px,2.4vw,27px)/1.25 var(--gv-sans);margin:36px 0 12px}
html[data-vtheme] main#main h3{font:700 21px/1.3 var(--gv-sans);margin:24px 0 8px}
html[data-vtheme] main#main :is(.card,.vg-card)>h2:first-child,html[data-vtheme] main#main .head h1{margin-top:0}
html[data-vtheme] main#main :is(p,li,dd,dt,label,legend,td,th,summary,small,figcaption){font-size:max(18px,1em)}
html[data-vtheme] main#main :is(.plain,.lede,.fine,.explain,.sub,.vg-sub,.say,.intro,.cap,.wa-explain,.wa-what,.wa-fine,.wa-not,.photo-hint,.cqnote,.count,.sources){color:var(--gv-ink-2)}
html[data-vtheme] main#main :is(.head .plain,.head .lede,.lede,.vg-sub,.intro){font-size:20px;line-height:1.5;margin:0 0 8px;max-width:40em}
html[data-vtheme] main#main .head{margin:0 0 28px;padding:0;border:0}
html[data-vtheme] main#main :is(.plain,.fine,.wa-explain)[style*="font-size"]{font-size:18px!important}
html[data-vtheme] main#main b,html[data-vtheme] main#main strong{color:inherit;font-weight:700}

/* links: underlined only inside a sentence; everywhere else they are bold teal words, rows, tabs or buttons */
html[data-vtheme] main#main a{color:var(--gv-teal-ink);text-decoration:none;font-weight:700}
html[data-vtheme] main#main :is(p,dd,td,blockquote,.wa-row,.notice,.gnotice) a:not(.btn,.pick,.vg-row,.wa-chip){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:600}
html[data-vtheme] main#main a:not(.btn):hover{color:var(--gv-teal-h);text-decoration:underline;text-decoration-thickness:2px}
html[data-vtheme] main#main :is(.links,.guides,.wa-links,.wa-qio,.vhead,.next) a:not(.btn),html[data-vtheme] main#main :is(a.all,a.next,a.addr,.wa-dl a,.wa-src){display:inline-flex;align-items:center;min-height:48px;text-decoration:none}

/* ---------- 4. buttons: one teal action, quiet second paths ---------- */
html[data-vtheme] main#main .btn,html[data-vtheme] .vg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;height:auto;padding:12px 28px;border-radius:10px;border:2px solid var(--gv-teal);background:var(--gv-teal);color:#fff;font:700 20px/1.2 var(--gv-sans);text-decoration:none;box-shadow:none;cursor:pointer;transition:transform .12s,filter .12s}
html[data-vtheme] main#main .btn:hover,html[data-vtheme] .vg-btn:hover{background:var(--gv-teal-h);border-color:var(--gv-teal-h);color:#fff;text-decoration:none}
html[data-vtheme] main#main .btn:active,html[data-vtheme] .vg-btn:active{transform:scale(.96);filter:brightness(.9)}
html[data-vtheme] main#main .btn:disabled{background:#c4ccd3;border-color:#c4ccd3;color:#13202f;cursor:not-allowed;opacity:1}
html[data-vtheme] main#main :is(.btn.sec,.btn.wa-btn,.vg-btn.sec){background:#fff;color:var(--gv-teal-ink);border:2px solid var(--gv-field)}
html[data-vtheme] main#main :is(.btn.sec,.btn.wa-btn,.vg-btn.sec):hover{background:var(--gv-mint-2);border-color:var(--gv-teal);color:var(--gv-teal-ink)}
html[data-vtheme] main#main .btn.quiet{background:transparent;border-color:transparent;color:var(--gv-teal-ink)}
html[data-vtheme] main#main .btn.small{min-height:48px;padding:8px 18px;font-size:18px;border-radius:12px}
html[data-vtheme] main#main :is(#gate .actions,.hm .cta,.acts,.actions){display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
@media (max-width:560px){html[data-vtheme] main#main :is(#gate .actions,.hm .cta) .btn{flex:1 1 100%}}

/* ---------- 5. fields ---------- */
html[data-vtheme] main#main :is(input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=hidden]),select,textarea){
  color:var(--gv-ink);background:#fff;border:2px solid var(--gv-field);border-radius:10px;font:400 19px/1.4 var(--gv-sans);min-height:56px;padding:12px 16px;color-scheme:light;max-width:100%}
html[data-vtheme] main#main :is(input,select,textarea):focus{border-color:var(--gv-teal);outline:3px solid rgba(13,122,102,.25);outline-offset:0}
html[data-vtheme] main#main :is(input,select,textarea)::placeholder{color:var(--gv-ink-2);opacity:1}
html[data-vtheme] main#main :is(label.field,.lbl,.wa-pick label,.gfield>label){display:block;color:var(--gv-ink);font:700 19px/1.3 var(--gv-sans);margin:16px 0 8px}

/* ---------- 6. the shared components from the video ---------- */
/* format chip (Email, Online form, Letter, Fax, Phone) */
html[data-vtheme] .vg-chip{display:inline-flex;align-items:center;min-height:34px;padding:4px 12px;border-radius:6px;background:var(--gv-tint);color:var(--gv-teal-ink);font:700 18px/1.2 var(--gv-sans);white-space:nowrap}
/* office label: sentence case, no tracking */
html[data-vtheme] .vg-o{display:block;font:700 18px/1.3 var(--gv-sans);letter-spacing:0;text-transform:none;color:var(--gv-ink-2)}
/* document card with skeleton lines */
html[data-vtheme] .vg-doc{position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;border:2px solid var(--gv-doc);border-radius:12px;padding:22px;min-height:100%;color:var(--gv-ink);text-decoration:none}
html[data-vtheme] main#main .vg-doc .vg-t,html[data-vtheme] .vg-doc .vg-t{font:700 22px/1.2 var(--gv-sans);color:var(--gv-ink);margin:0}
html[data-vtheme] .vg-doc.ok{border-color:var(--gv-teal);background:var(--gv-mint-2)}
html[data-vtheme] .vg-sk{display:grid;gap:12px;margin-top:6px}
html[data-vtheme] .vg-sk i{display:block;height:9px;border-radius:5px;background:var(--gv-skel)}
html[data-vtheme] .vg-sk i.s{width:60%}
html[data-vtheme] .vg-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;margin:20px 0 0}
/* office row: initial tile, name, one line of why */
html[data-vtheme] .vg-off{display:flex;gap:18px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--gv-div)}
html[data-vtheme] .vg-off:last-child{border-bottom:0}
html[data-vtheme] .vg-ini{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:12px;background:var(--gv-tint);color:var(--gv-teal-ink);font:700 19px/1 var(--gv-sans)}
html[data-vtheme] .vg-off b{display:block;font:700 21px/1.3 var(--gv-sans)}
html[data-vtheme] .vg-off span{display:block;font-size:18px;color:var(--gv-ink-2);margin-top:2px}
/* a row you can tap (guides, situations, offices): white, divided, a teal arrow */
html[data-vtheme] .vg-rows{display:block;margin:8px 0 0;border-top:1px solid var(--gv-div)}
html[data-vtheme] a.vg-row,html[data-vtheme] .vg-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;min-height:72px;padding:16px 4px;border-bottom:1px solid var(--gv-div);color:var(--gv-ink);text-decoration:none;font-weight:400}
html[data-vtheme] a.vg-row::after{content:"";width:12px;height:12px;border-right:3px solid var(--gv-teal);border-bottom:3px solid var(--gv-teal);transform:rotate(-45deg);margin-right:8px}
html[data-vtheme] a.vg-row:hover{background:var(--gv-mint-2);text-decoration:none}
html[data-vtheme] main#main .vg-row b,html[data-vtheme] .vg-row b{display:block;font:700 21px/1.3 var(--gv-sans);color:var(--gv-ink)}
html[data-vtheme] main#main .vg-row span,html[data-vtheme] .vg-row span{display:block;font-size:18px;line-height:1.45;color:var(--gv-ink-2);margin-top:2px}
/* amber finding card */
html[data-vtheme] .vg-flag{display:flex;gap:16px;align-items:center;background:var(--gv-flag);border:2px solid var(--gv-flag-line);border-radius:12px;padding:18px 22px;margin:0 0 16px;color:var(--gv-ink)}
html[data-vtheme] .vg-flag::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:var(--gv-flag-dot)}
html[data-vtheme] .vg-flag b{display:block;font:700 21px/1.3 var(--gv-sans)}
html[data-vtheme] .vg-flag small{display:block;font-size:18px;color:var(--gv-ink-2);margin-top:2px}
/* the big fact (a date, a deadline) */
html[data-vtheme] .vg-fact{background:var(--gv-mint-2);border:2px solid var(--gv-teal);border-radius:12px;padding:20px 22px;margin:20px 0}
html[data-vtheme] .vg-fact b{display:block;font:700 24px/1.3 var(--gv-sans);color:var(--gv-ink)}
html[data-vtheme] .vg-fact span{display:block;font-size:18px;color:var(--gv-ink-2);margin-top:4px}
/* the dark script bubble (phone call) and the reminder toast: the only navy inside the product */
html[data-vtheme] .vg-script,html[data-vtheme] main#main .row .script{background:var(--gv-navy);color:#fff;border-radius:10px;padding:20px 24px;font:600 19px/1.5 var(--gv-sans);white-space:pre-wrap}
html[data-vtheme] .vg-toast{background:var(--gv-navy);color:#fff;border-radius:12px;padding:22px 26px;box-shadow:var(--gv-toast)}
html[data-vtheme] .vg-done{color:var(--gv-teal-ink);font-weight:700}
/* tracker row: what, who, sent, and on the right the reply date with "goyo found this date" */
html[data-vtheme] .vg-trow{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--gv-div)}
html[data-vtheme] .vg-trow b{display:block;font:700 22px/1.3 var(--gv-sans)}
html[data-vtheme] .vg-trow span{font-size:18px;color:var(--gv-ink-2)}
html[data-vtheme] .vg-trow .dl{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font:700 22px/1.3 var(--gv-sans);color:var(--gv-ink-3)}

/* ---------- 7. existing page parts, flattened into the GUI ---------- */
/* notices and boxes: a quiet grey panel, no accent bars */
html[data-vtheme] main#main :is(.notice,.gnotice,.need,.quiet:not(.btn),.hm .box,.callout){background:var(--gv-room);border:0;border-radius:12px;padding:18px 22px;color:var(--gv-ink);font-size:19px;margin:16px 0}
html[data-vtheme] main#main :is(.notice,.gnotice) b{font-size:inherit}
html[data-vtheme] main#main .need h2{font-size:22px;margin:0 0 8px}
/* cards inside a page card are bordered, not floating */
html[data-vtheme] main#main .card{background:#fff;border:2px solid var(--gv-doc);border-radius:12px;box-shadow:none;padding:22px 24px;margin:16px 0}
/* sections and lists: plain, divided by hairlines */
html[data-vtheme] main#main .section{margin:28px 0 0;padding:0;border:0;background:none}
html[data-vtheme] main#main .list{background:transparent;border:0;border-top:1px solid var(--gv-div);border-radius:0}
html[data-vtheme] main#main .list>div{padding:20px 0;border-bottom:1px solid var(--gv-div)}
html[data-vtheme] main#main .list h2{margin:0 0 6px;font-size:22px}
html[data-vtheme] main#main .list p{color:var(--gv-ink-2)}
/* disclosure: a white row with a chevron, never a "+" box */
html[data-vtheme] main#main details{border:0;border-bottom:1px solid var(--gv-div);border-radius:0;background:transparent;margin:0}
html[data-vtheme] main#main details>summary{list-style:none;display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:60px;padding:12px 4px;font:700 20px/1.3 var(--gv-sans);color:var(--gv-ink);cursor:pointer}
html[data-vtheme] main#main details>summary::-webkit-details-marker{display:none}
html[data-vtheme] main#main details>summary::after{content:"";flex:none;margin-left:auto!important;width:11px;height:11px;border-right:3px solid var(--gv-teal);border-bottom:3px solid var(--gv-teal);transform:rotate(45deg);margin:0 10px 6px 0;transition:transform .15s}
html[data-vtheme] main#main details[open]>summary::after{transform:rotate(-135deg);margin-bottom:-4px}
html[data-vtheme] main#main details>summary:hover{color:var(--gv-teal-ink)}
html[data-vtheme] main#main details>:not(summary){margin-left:4px;margin-right:4px}
/* counts are words, not pills */
html[data-vtheme] main#main :is(.wa-count,.ex .mc,.count-pill){background:none;border:0;padding:0;font:400 18px/1.3 var(--gv-sans);color:var(--gv-ink-2)}
/* the old folder looks are gone */
html[data-vtheme] main#main :is(.stepbar,.glow){display:none}
html[data-vtheme] main#main .vgroup h2{display:block;padding:0;background:none;border:0;font:700 23px/1.3 var(--gv-sans);color:var(--gv-ink);margin:32px 0 4px}
html[data-vtheme] main#main .vlist{border:0;border-top:1px solid var(--gv-div);border-radius:0;background:transparent;overflow:visible}
html[data-vtheme] main#main .vlist a{display:flex;align-items:center;gap:16px;min-height:72px;padding:16px 4px;border:0;border-bottom:1px solid var(--gv-div);color:var(--gv-ink);text-decoration:none;font-weight:400;background:transparent}
html[data-vtheme] main#main .vlist a:hover{background:var(--gv-mint-2)}
html[data-vtheme] main#main .vlist .t{flex:1 1 auto;min-width:0}
html[data-vtheme] main#main .vlist .t b{display:block;font:700 21px/1.3 var(--gv-sans);color:var(--gv-ink)}
html[data-vtheme] main#main .vlist .t span{display:block;font-size:18px;line-height:1.45;color:var(--gv-ink-2)}
html[data-vtheme] main#main .vlist .go{font-size:0;width:12px;height:12px;flex:none;border-right:3px solid var(--gv-teal);border-bottom:3px solid var(--gv-teal);transform:rotate(-45deg);margin-right:8px}
html[data-vtheme] main#main .vlist .n{background:none;border:0;padding:0;font:700 18px/1.2 var(--gv-sans);color:var(--gv-teal-ink);white-space:nowrap}
@media (max-width:560px){html[data-vtheme] main#main .vlist a{flex-wrap:wrap}html[data-vtheme] main#main .vlist .t{flex:1 1 calc(100% - 40px)}html[data-vtheme] main#main .vlist .n{order:3;flex-basis:100%}}
/* guide steps: plain numbers in teal circles */
html[data-vtheme] main#main .gsteps li{border-bottom:1px solid var(--gv-div)}
html[data-vtheme] main#main .gsteps li>div>b{font:700 20px/1.35 var(--gv-sans);color:var(--gv-ink)}
html[data-vtheme] main#main .checks li svg{color:var(--gv-teal);stroke:currentColor}
/* the deadline slip becomes the video's big fact */
html[data-vtheme] main#main .deadline>div{background:var(--gv-mint-2);border:2px solid var(--gv-teal);border-radius:12px;padding:20px 22px;box-shadow:none;color:var(--gv-ink)}
html[data-vtheme] main#main .deadline .w{display:block;margin:0 0 6px;padding:0;border:0;font:700 18px/1.3 var(--gv-sans);color:var(--gv-teal-ink);text-transform:none;letter-spacing:0}
html[data-vtheme] main#main .deadline>div>b{display:block;font:700 23px/1.35 var(--gv-sans);color:var(--gv-ink);background:none;padding:0}
html[data-vtheme] main#main .deadline span{display:block;color:var(--gv-ink-2);margin-top:8px}
/* closing call to action: a mint panel with the one teal button */
html[data-vtheme] main#main .join{background:var(--gv-mint-2);color:var(--gv-ink);border:0;border-radius:12px;padding:28px;margin-top:36px}
html[data-vtheme] main#main .join h2{margin-top:0}
html[data-vtheme] main#main .join p{color:var(--gv-ink-2)}
/* selection is never colour alone: a tick box, then mint */
html[data-vtheme] main#main .choices label{display:flex;gap:14px;align-items:center;text-align:left;border:2px solid var(--gv-field);border-radius:12px;background:#fff;color:var(--gv-ink);font:700 19px/1.3 var(--gv-sans);min-height:64px;padding:14px 18px;cursor:pointer}
html[data-vtheme] main#main .choices label::before{content:"";flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid var(--gv-tick);border-radius:6px;background:#fff}
html[data-vtheme] main#main :is(.choices input:checked+label,.choices label:has(input:checked)){border-color:var(--gv-teal);background:var(--gv-mint)}
html[data-vtheme] main#main :is(.choices input:checked+label,.choices label:has(input:checked))::before{content:"\2713";background:var(--gv-teal);border-color:var(--gv-teal);color:#fff;font:700 18px/1 var(--gv-sans)}
/* papers and sheets: white documents with a hairline and the lifted shadow */
html[data-vtheme] main#main :is(.paper,.bled,.ex .fbt){color:var(--gv-ink);background:#fff;border:2px solid var(--gv-doc);border-radius:12px;box-shadow:none}
html[data-vtheme] main#main .pane{background:#fff;color:var(--gv-ink)}
/* journey rail on the older intake pages: light chips */
html[data-vtheme] .vt-rail{max-width:1280px;margin:20px auto 0;padding:0 32px}
html[data-vtheme] .vt-rail ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
html[data-vtheme] .vt-rail li{flex:1 1 0;min-width:110px}
html[data-vtheme] .vt-rail :is(a,span.st){display:flex;align-items:center;min-height:48px;padding:8px 12px;border-radius:12px;background:#fff;border:2px solid var(--gv-doc);color:var(--gv-ink-3);font:600 18px/1.25 var(--gv-sans);text-decoration:none}
html[data-vtheme] .vt-rail :is(a,span.st) b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--gv-room);color:var(--gv-ink-3);margin-right:8px;font-size:18px}
html[data-vtheme] .vt-rail .done b{background:var(--gv-teal);color:#fff}
html[data-vtheme] .vt-rail [aria-current=step]{background:var(--gv-tint);border-color:var(--gv-teal);color:var(--gv-teal-ink)}
@media (max-width:700px){html[data-vtheme] .vt-rail{padding:0 12px}html[data-vtheme] .vt-rail li{flex:1 1 44%}}

/* ---------- 8. footer: one quiet strip ---------- */
html[data-vtheme] :is(footer#foot,.gfoot){background:transparent;color:var(--gv-ink-2);border-top:1px solid var(--gv-hair);margin-top:24px}
html[data-vtheme] :is(footer#foot,.gfoot) .in{max-width:1280px;margin:0 auto;padding:28px 32px 36px}
html[data-vtheme] :is(footer#foot,.gfoot) :is(p,span,a,li){font-size:18px}
html[data-vtheme] :is(footer#foot,.gfoot) .glockup svg{display:none}
html[data-vtheme] :is(footer#foot,.gfoot) .glockup b{font-size:22px}
html[data-vtheme] :is(footer#foot,.gfoot) :is(.responsibility,.brandwho){color:var(--gv-ink-2);max-width:48em}
html[data-vtheme] :is(footer#foot,.gfoot) nav{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:8px}
html[data-vtheme] :is(footer#foot,.gfoot) nav a{display:inline-flex;align-items:center;min-height:48px;color:var(--gv-ink-3);font-weight:700;text-decoration:none}
html[data-vtheme] :is(footer#foot,.gfoot) nav a:hover{color:var(--gv-teal-ink);text-decoration:underline}
@media (max-width:700px){html[data-vtheme] :is(footer#foot,.gfoot) .in{padding:24px 16px 32px}}

@media print{
  html[data-vtheme],html[data-vtheme] body{background:#fff!important}
  html[data-vtheme] main#main{box-shadow:none!important;margin:0!important;padding:0!important;max-width:none!important}
  html[data-vtheme] :is(.vg-card,.card,.vg-doc){box-shadow:none!important}
  .vt-rail,#vt-motion{display:none!important}
}
/* base text helpers, left aligned and readable */
html[data-vtheme] main#main .fine{text-align:left;font-size:18px;color:var(--gv-ink-2);margin-top:12px}
html[data-vtheme] main#main .src{display:inline;margin:0 6px 0 0;font-size:18px;font-weight:700;color:var(--gv-teal-ink)}
html[data-vtheme] main#main .choices label{justify-content:flex-start}
html[data-vtheme] main#main .gcta{margin:24px 0 24px}
html[data-vtheme] main#main details.rules{border-top:1px solid var(--gv-div)}
html[data-vtheme] main#main details.rules>:not(summary):last-child{margin-bottom:20px}
html[data-vtheme] main#main .vg-trow .dl{border:0;border-radius:0;padding:0;margin:0;background:none;box-shadow:none}
html[data-vtheme] #shell[data-layout=menu] .gshell-menu{margin-left:auto}


/* ---------- 9. the masthead band (docs/design/SITEWIDE-LOOK-SPEC.md section 3) ----------
   Three strengths, one look. M2: slow dots with a small Pause (Home, Examples, Guides index). M1: the same dots standing still
   (Upload, Who has to answer, single guides, Help, example cases). M0: plain solid blue (account, legal, send, deadlines, sign in).
   Only the h1 and one intro line sit on the blue. Everything you read or fill in is a white sheet pulled up 28px over the band edge.
   Dot alphas (also written into the SVG tiles, CSS variables do not work in a data URI): far white .14, near white .16, near gold .26. */
html[data-vtheme] :is(.vt-dots,.vt-solid){position:relative;isolation:isolate;overflow:clip;background-color:var(--vb-sea);color:var(--vb-white);padding:24px 0 calc(var(--sheet-lift) + 20px)}
html[data-vtheme] .vt-dots>*:not(.vt-dots-field){position:relative;z-index:1}
html[data-vtheme] .vt-dots-field{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;pointer-events:none;z-index:0;opacity:0;animation:vbIn .8s ease-out .1s forwards}
@supports not (overflow:clip){html[data-vtheme] :is(.vt-dots,.vt-solid){overflow:hidden}html[data-vtheme] .vt-dots-field{position:absolute;inset:0;height:auto;margin:0}}
html[data-vtheme] .vt-dots-field i{position:absolute;left:0;top:-480px;right:-480px;bottom:0;will-change:transform;animation:vbFar 120s linear infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='%23fff' fill-opacity='.14'%3E%3Ccircle cx='23' cy='41' r='1.5'/%3E%3Ccircle cx='97' cy='12' r='1.5'/%3E%3Ccircle cx='171' cy='66' r='1.5'/%3E%3Ccircle cx='268' cy='29' r='1.5'/%3E%3Ccircle cx='46' cy='134' r='1.5'/%3E%3Ccircle cx='139' cy='171' r='1.5'/%3E%3Ccircle cx='237' cy='148' r='1.5'/%3E%3Ccircle cx='301' cy='229' r='1.5'/%3E%3Ccircle cx='84' cy='262' r='1.5'/%3E%3C/g%3E%3C/svg%3E") 0 0/320px 320px}
html[data-vtheme] .vt-dots-field i+i{animation-name:vbNear;animation-duration:80s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cg fill='%23fff' fill-opacity='.16'%3E%3Ccircle cx='61' cy='87' r='2.5'/%3E%3Ccircle cx='322' cy='40' r='2.5'/%3E%3Ccircle cx='199' cy='233' r='2.5'/%3E%3Ccircle cx='410' cy='347' r='2.5'/%3E%3C/g%3E%3Cg fill='%23E8C46A' fill-opacity='.26'%3E%3Ccircle cx='140' cy='401' r='2.5'/%3E%3Ccircle cx='441' cy='168' r='2.5'/%3E%3C/g%3E%3C/svg%3E") 0 0/480px 480px}
@keyframes vbIn{to{opacity:1}}
@keyframes vbFar{to{transform:translate3d(-320px,320px,0)}}
@keyframes vbNear{to{transform:translate3d(-480px,480px,0)}}
html.vb-paused .vt-dots-field i{animation-play-state:paused}
/* M1: the same dots, standing still, no script needed */
html[data-vtheme] .vt-dots-still{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cg fill='%23fff' fill-opacity='.16'%3E%3Ccircle cx='61' cy='87' r='2.5'/%3E%3Ccircle cx='322' cy='40' r='2.5'/%3E%3Ccircle cx='199' cy='233' r='2.5'/%3E%3Ccircle cx='410' cy='347' r='2.5'/%3E%3C/g%3E%3Cg fill='%23E8C46A' fill-opacity='.26'%3E%3Ccircle cx='140' cy='401' r='2.5'/%3E%3Ccircle cx='441' cy='168' r='2.5'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='%23fff' fill-opacity='.14'%3E%3Ccircle cx='23' cy='41' r='1.5'/%3E%3Ccircle cx='97' cy='12' r='1.5'/%3E%3Ccircle cx='171' cy='66' r='1.5'/%3E%3Ccircle cx='268' cy='29' r='1.5'/%3E%3Ccircle cx='46' cy='134' r='1.5'/%3E%3Ccircle cx='139' cy='171' r='1.5'/%3E%3Ccircle cx='237' cy='148' r='1.5'/%3E%3Ccircle cx='301' cy='229' r='1.5'/%3E%3Ccircle cx='84' cy='262' r='1.5'/%3E%3C/g%3E%3C/svg%3E");background-size:480px 480px,320px 320px;background-position:90px 40px,0 0}
/* the reserved Pause strip: first in the M2 band, 48px high, button on the right, in flow. Nothing is ever positioned over it. */
html[data-vtheme] .vt-dots-bar{display:flex;justify-content:flex-end;align-items:center;max-width:1280px;height:48px;margin:-24px auto 0;padding:0 32px;box-sizing:border-box}
html[data-vtheme] .vt-dots-ctl{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;min-width:36px;padding:0 10px;border:1.5px solid rgba(201,214,228,.55);border-radius:8px;background:transparent;color:var(--vb-mist);font:600 18px/1 var(--f-ui);cursor:pointer;white-space:nowrap;box-shadow:none}
html[data-vtheme] .vt-dots-ctl::before{content:"";position:absolute;inset:-6px}
html[data-vtheme] .vt-dots-ctl:hover{border-color:var(--vb-gold);color:#fff}
html[data-vtheme] .vt-dots-ctl:active{transform:scale(.96)}
html[data-vtheme] .vt-dots-ctl svg{width:14px;height:14px;flex:none;fill:currentColor}
html[data-vtheme] .vt-dots :focus-visible,html[data-vtheme] .vt-solid :focus-visible{outline:3px solid var(--vb-gold);outline-offset:3px}
html[data-vtheme] .vt-dots :is(.vg-card,.case,.forms,.paper,.fcase,.vt-rest,.vt-room,.hm .vg-row) :focus-visible{outline-color:var(--gv-teal)}
html[data-vtheme] .vt-dots .btn:focus-visible{outline-offset:6px}
html[data-vtheme] .vt-dots .vg-card .btn:focus-visible{outline-offset:3px}
/* what sits directly on the blue: the headline and one intro line */
html[data-vtheme] :is(.vt-dots,.vt-solid) .vt-in{max-width:1280px;margin:0 auto;padding:0 32px;box-sizing:border-box}
html[data-vtheme] :is(.vt-dots,.vt-solid) .vt-in .head{margin:0;padding:0;border:0}
html[data-vtheme] :is(.vt-dots,.vt-solid) h1,html[data-vtheme] .vt-dots main#main .ex>h1{color:var(--vb-white);font:700 clamp(28px,3.4vw,38px)/1.15 var(--f-ui);letter-spacing:-.01em;margin:0 0 8px}
html[data-vtheme] .vt-m2 h1{font:600 clamp(32px,4vw,46px)/1.15 var(--f-doc)}
html[data-vtheme] main#main :is(.vt-dots,.vt-solid) h1{color:var(--vb-white);font:700 clamp(28px,3.4vw,38px)/1.15 var(--f-ui);letter-spacing:-.01em;margin:0 0 8px}
html[data-vtheme] main#main .vt-m2 h1{font:600 clamp(32px,4vw,46px)/1.15 var(--f-doc)}
html[data-vtheme] .vt-m2 main#main .ex>h1{font:600 clamp(32px,4vw,46px)/1.15 var(--f-doc)}
html[data-vtheme] main#main :is(.vt-dots,.vt-solid) :is(.plain,.lede,.intro,.vg-sub,.vt-intro){color:var(--vb-mist);font:400 21px/1.5 var(--f-ui);margin:0;max-width:40em}
html[data-vtheme] :is(.vt-dots,.vt-solid) :is(.plain,.lede,.intro,.vg-sub,.vt-intro){color:var(--vb-mist);font:400 21px/1.5 var(--f-ui);margin:0;max-width:40em}
html[data-vtheme] .vt-dots main#main .ex>.intro{color:var(--vb-mist);font:400 21px/1.5 var(--f-ui);margin:0 0 28px;max-width:40em}
html[data-vtheme] :is(.vt-dots,.vt-solid) .stepline{color:var(--vb-mist);font:600 18px/1.2 var(--f-ui);margin:0}
/* action on blue: the teal button gets a 3px white ring (teal alone on blue is 2.4:1) */
html[data-vtheme] :is(.vt-dots,.vt-solid) .btn{box-shadow:0 0 0 3px #fff}
html[data-vtheme] .vt-dots .vt-in .btn.quiet,html[data-vtheme] .vt-dots .vt-in .btn.small{background:transparent;border-color:var(--vb-mist);color:#fff;box-shadow:none}
html[data-vtheme] main#main :is(.vt-dots,.vt-solid) .btn:not(.quiet):not(.small):not(.sec):not(:disabled){box-shadow:0 0 0 3px #fff}
/* the generated band sits before main; main (the white sheet) is pulled up over its edge */
html[data-vtheme] .vt-band+main#main:not(#_){margin-top:calc(-1 * var(--sheet-lift));position:relative;z-index:2}
html[data-vtheme] .vt-band+nav.crumbs+main#main:not(#_){margin-top:calc(-1 * var(--sheet-lift));position:relative;z-index:2}
/* a band inside main (Home, Guides index, Who has to answer): main is full width and the sheets after it are pulled up */
html[data-vtheme] main#main:has(> .vt-dots):not(#_){max-width:none;margin:0 0 64px;padding:0;background:transparent;box-shadow:none;border:0;border-radius:0}
html[data-vtheme] main#main>.vt-dots{margin:0}
html[data-vtheme] main#main>.vt-room{max-width:1280px!important;width:100%;margin:28px auto 0!important;padding:0 32px!important;box-sizing:border-box}
html[data-vtheme] main#main>.vt-rest{width:min(960px,calc(100% - 64px));max-width:none!important;margin:32px auto 0!important;padding:40px 44px 44px!important;background:#fff;border:1px solid var(--gv-hair);border-radius:12px;box-shadow:var(--gv-shadow);box-sizing:border-box}
html[data-vtheme] main#main>.vt-room,html[data-vtheme] main#main>.vt-rest{position:relative;z-index:2}
html[data-vtheme] main#main>.vt-dots+:is(.vt-room,.vt-rest){margin-top:calc(-1 * var(--sheet-lift))!important}
/* the Examples band wraps the page: the room behind the cards is the blue field */
html[data-vtheme] .vt-dots>main#main{margin-bottom:0}
html[data-vtheme] .vt-dots .ex .exnext{padding:28px 32px}
html[data-vtheme] .vt-dots .ex .exnext p{margin:0 0 12px}html[data-vtheme] .vt-dots .ex .exnext p.more{margin:8px 0 0;text-align:left}
@media (max-width:700px){
  html[data-vtheme] .vt-dots-bar{padding:0 12px}
  html[data-vtheme] :is(.vt-dots,.vt-solid) .vt-in{padding:0 12px}
  html[data-vtheme] main#main>.vt-room{padding:0 12px!important}
  html[data-vtheme] main#main>.vt-rest{width:calc(100% - 24px);padding:26px 20px 30px!important;margin-top:16px!important}
  html[data-vtheme] .vt-dots .ex .exnext{padding:24px 18px}
  html[data-vtheme] .vt-band+main#main:not(#_){margin-left:12px;margin-right:12px}
}
@media (prefers-reduced-motion:reduce){html[data-vtheme] .vt-dots-field,html[data-vtheme] .vt-dots-field i{animation:none!important;opacity:1}html[data-vtheme] .vt-dots-ctl{display:none!important}}
html.vb-still .vt-dots-field,html.vb-still .vt-dots-field i{animation:none!important;opacity:1}
@media (forced-colors:active),(prefers-contrast:more){html[data-vtheme] .vt-dots-field,html[data-vtheme] .vt-dots-ctl{display:none!important}html[data-vtheme] .vt-dots-still{background-image:none}}
@media print{html[data-vtheme] .vt-dots-field,html[data-vtheme] .vt-dots-ctl,html[data-vtheme] .vt-dots-bar{display:none!important}html[data-vtheme] :is(.vt-dots,.vt-dots-still,.vt-solid){background:#fff;background-image:none;color:#13202f}html[data-vtheme] :is(.vt-dots,.vt-solid) :is(h1,.intro,.plain,.lede,.vt-intro){color:#13202f}}

/* ---------- 10. dialogs and the side sheet ---------- */
html[data-vtheme] dialog.gdlg{border:0;padding:0;border-radius:12px;width:min(720px,calc(100% - 32px));max-height:86vh;background:#fff;color:var(--gv-ink);box-shadow:0 18px 50px rgba(20,40,60,.35);overflow:hidden}
html[data-vtheme] dialog.gdlg[open]{display:flex;flex-direction:column}
html[data-vtheme] dialog.gdlg::backdrop{background:rgba(19,32,47,.55)}
html[data-vtheme] .gdlg-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 24px 8px}
html[data-vtheme] .gdlg-hd h2{margin:0;font:700 clamp(22px,2.4vw,26px)/1.25 var(--f-ui);color:var(--gv-ink);letter-spacing:-.01em}
html[data-vtheme] .gdlg-x{flex:none;width:48px;height:48px;border:2px solid var(--gv-field);border-radius:var(--r-ctl);background:#fff;color:var(--gv-ink);font:700 24px/1 var(--f-ui);cursor:pointer}
html[data-vtheme] .gdlg-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;padding:0 24px 12px;color:var(--gv-ink-2);font-size:18px}
html[data-vtheme] .gtag{display:inline-flex;align-items:center;min-height:34px;padding:2px 12px;border-radius:var(--r-chip);background:var(--gv-tint);color:var(--gv-teal-ink);font:700 18px/1.2 var(--f-ui)}
html[data-vtheme] .gdlg-body{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 24px 12px;border-top:1px solid var(--gv-div)}
html[data-vtheme] .gdlg-body:focus-visible{outline:3px solid var(--gv-teal);outline-offset:-3px}
html[data-vtheme] .gdlg-paper{background:#fff;border:1px solid var(--gv-hair);border-left:4px solid var(--vb-sea);border-radius:var(--r-chip);padding:20px 24px;margin:14px 0;font:400 19px/1.6 var(--f-doc);color:var(--gv-ink)}
html[data-vtheme] .gdlg-paper p{margin:0 0 12px}
html[data-vtheme] .gdlg-paper .re{font-weight:700}
html[data-vtheme] .gdlg-paper .lbl,html[data-vtheme] .gdlg-paper .dh{font:700 18px/1.3 var(--f-ui);color:var(--gv-ink-2);margin:12px 0 4px}
html[data-vtheme] .gdlg-paper ul,html[data-vtheme] .gdlg-paper ol{margin:0 0 12px;padding-left:22px}
html[data-vtheme] .gdlg-list{list-style:none;margin:8px 0 12px;padding:0;border-top:1px solid var(--gv-div)}
html[data-vtheme] .gdlg-list li{padding:12px 4px;border-bottom:1px solid var(--gv-div);font:700 19px/1.3 var(--f-ui)}
html[data-vtheme] .gdlg-credit{margin:0;padding:8px 24px 0;font-size:18px;color:var(--gv-ink-2)}
html[data-vtheme] .gdlg-credit:empty{display:none}
html[data-vtheme] .gdlg-credit[hidden]{display:none}
html[data-vtheme] .gdlg-ft{display:flex;flex-wrap:wrap;gap:12px;padding:16px 24px 20px;border-top:1px solid var(--gv-hair);background:#fff}
html[data-vtheme] .gdlg-ft .btn{flex:0 0 auto}
html[data-vtheme] .gdlg-note{padding:0 24px 8px;margin:0;font-size:18px;color:var(--gv-ink-2)}
@media (max-width:700px){
  html[data-vtheme] dialog.gdlg{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;margin:0;inset:0}
  html[data-vtheme] .gdlg-ft{flex-direction:column;position:sticky;bottom:0}
  html[data-vtheme] .gdlg-ft .btn{width:100%}
  html[data-vtheme] .gdlg-hd{padding:12px 16px 4px}html[data-vtheme] .gdlg-sub{padding:0 16px 8px}html[data-vtheme] .gdlg-body{padding:4px 16px 12px}html[data-vtheme] .gdlg-credit{padding:8px 16px 0}html[data-vtheme] .gdlg-ft{padding:12px 16px 16px}html[data-vtheme] .gdlg-note{padding:0 16px 8px}
}
/* the page side sheet: right edge, 520px, the stay stays visible on the left under a light scrim; full screen on a phone */
html[data-vtheme] dialog.gside{border:0;padding:0;margin:0 0 0 auto;width:520px;max-width:100%;height:100vh;height:100dvh;max-height:none;background:#fff;color:var(--gv-ink);box-shadow:-12px 0 40px rgba(20,40,60,.3);overflow:hidden;inset:0 0 0 auto}
html[data-vtheme] dialog.gside[open]{display:flex;flex-direction:column}
html[data-vtheme] dialog.gside::backdrop{background:rgba(19,32,47,.35)}
html[data-vtheme] .gside-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px 8px;border-bottom:1px solid var(--gv-hair)}
html[data-vtheme] .gside-hd h2{margin:0;font:700 22px/1.25 var(--f-ui);overflow-wrap:anywhere}
html[data-vtheme] .gside-hd p{margin:4px 0 0;color:var(--gv-ink-2);font-size:18px}
html[data-vtheme] .gside-body{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 20px}
html[data-vtheme] .gside-cap{margin:0 0 8px;font:700 18px/1.3 var(--f-ui);color:#5f3a00}
html[data-vtheme] .gside-page{position:relative;border:1px solid var(--gv-hair);border-radius:var(--r-chip);background:var(--gv-room);overflow:hidden}
html[data-vtheme] .gside-page canvas,html[data-vtheme] .gside-page img{display:block;width:100%;height:auto}
html[data-vtheme] .gside-hl{position:absolute;background:rgba(255,243,196,.6);border-left:3px solid #a85d00;pointer-events:none}
html[data-vtheme] .gside-kept{margin:0 0 12px;padding:14px 16px;border:1px solid var(--gv-hair);border-left:4px solid #a85d00;border-radius:var(--r-chip);background:#fff9ea;font:400 19px/1.6 var(--f-doc)}
html[data-vtheme] .gside-ft{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--gv-hair);background:#fff}
html[data-vtheme] .gside-ft .btn,html[data-vtheme] .gside-ft a.btn{min-height:48px;padding:8px 14px;font-size:18px}
html[data-vtheme] .gside-text{border-top:1px solid var(--gv-div);margin-top:12px}
html[data-vtheme] .gside-text pre{white-space:pre-wrap;font:400 18px/1.5 var(--f-ui);margin:8px 0 0}
html[data-vtheme] .gside-text mark{background:#fff3c4;color:var(--gv-ink)}
@media (max-width:700px){html[data-vtheme] dialog.gside{width:100%;border-radius:0}html[data-vtheme] .gside-ft .btn{flex:1 1 calc(50% - 8px)}}
html[data-vtheme] .pg{display:inline-flex;align-items:center;position:relative;min-height:34px;padding:2px 10px;margin:0 2px;border:1px solid var(--gv-field);border-radius:var(--r-chip);background:#fff;color:var(--gv-teal-ink);font:700 18px/1.2 var(--f-ui);cursor:pointer;text-decoration:none;white-space:nowrap}
html[data-vtheme] .pg::before{content:"";position:absolute;inset:-7px -2px}
html[data-vtheme] .pg:hover{background:var(--gv-mint-2);border-color:var(--gv-teal)}
html[data-vtheme] .vt-sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
@media (prefers-reduced-motion:no-preference){html[data-vtheme] dialog.gdlg[open],html[data-vtheme] dialog.gside[open]{animation:gdlgIn .12s ease-out}@keyframes gdlgIn{from{opacity:0}to{opacity:1}}}

/* ---------- 11. small parts that used to be inline styles ---------- */
html[data-vtheme] #frame[data-phi]{border:1px solid var(--gv-hair);border-radius:12px;overflow:hidden;margin-top:14px;background:var(--gv-room);min-height:60vh}
html[data-vtheme] main#main .pick .btn#pgo{min-height:56px}

/* ---------- 12. Your account (the rules that used to be inline on ACCOUNT.html) ---------- */
html[data-vtheme] .setrow{padding:16px 0;border-top:1px solid var(--gv-div)}
html[data-vtheme] .setrow:first-of-type{border-top:0;padding-top:4px}
html[data-vtheme] main#main .setrow .field{display:block;font:700 18px/1.3 var(--f-ui);letter-spacing:0;text-transform:none;color:var(--gv-ink-2);margin:0 0 6px}
html[data-vtheme] .setrow input[type=text],html[data-vtheme] .setrow input[type=email],html[data-vtheme] .setrow input[type=password]{width:100%;max-width:380px;min-height:56px}
html[data-vtheme] .setrow .inrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
html[data-vtheme] .setrow .cur{margin:0 0 8px;overflow-wrap:anywhere;word-break:break-word}
html[data-vtheme] .setrow details{margin-top:6px}
html[data-vtheme] .setrow .inset{padding:12px 0 4px;display:flex;flex-direction:column;gap:8px;max-width:520px}
html[data-vtheme] .setrow .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
html[data-vtheme] .setrow .msg{margin:6px 0 0;min-height:1.2em}
html[data-vtheme] .setrow .msg.good{color:var(--gv-teal-ink)}
html[data-vtheme] .setrow .msg.bad{color:var(--gv-bad-ink)}
html[data-vtheme] .setrow .pend{border:1px solid var(--gv-hair);border-radius:var(--r-ctl);padding:12px;margin:8px 0;background:var(--gv-room)}
html[data-vtheme] .setrow .pend p{margin:0 0 8px}
html[data-vtheme] main#main .btn.small{min-height:48px;padding:0 16px;font-size:18px}
html[data-vtheme] .vgroup .plain{margin:-4px 0 12px}
html[data-vtheme] .vgroup .mut,html[data-vtheme] .vgroup #pkprev{margin-top:8px}
html[data-vtheme] .vgroup #gmount{margin-top:12px;min-height:44px}
html[data-vtheme] .vgroup label.chk{display:flex;align-items:center;gap:10px}
html[data-vtheme] .vgroup label.chk input{width:22px;height:22px;min-height:0}
html[data-vtheme] .vgroup label.reqnote{display:block;margin:6px 0}
html[data-vtheme] .vgroup label.reqnote input{width:100%}
html[data-vtheme] .vgroup .dl .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
html[data-vtheme] .vgroup .dl .st.full{margin-top:6px}
html[data-vtheme] .vgroup details.dladd{margin-top:12px}
@media(max-width:640px){html[data-vtheme] .setrow input[type=text],html[data-vtheme] .setrow input[type=email],html[data-vtheme] .setrow input[type=password]{max-width:100%}}

/* ---------- 13. the 18px floor for parts the base stylesheet sets smaller ---------- */
html[data-vtheme] main#main :is(.explain,.explain a,.explain b,.confirm .k,.confirm .v span,.confirm .v b,.pn a,.pn small,.pn .prev,.pn .next,.deadline span,.deadline p,.gcite,.gcite a,.sources,.sources a,.tag,.chip,.mut,.note,.fine,.step small,.stepbar span,.stepbar b,.grp,.skip,.opt,.r .s,.r .n,.st,.dl .dw,.dl .chip,.lnk,.files .s,.files .n,.status span,.status b,.tk span,.tk b,.row .k,.row .v span){font-size:max(18px,1em)}
html[data-vtheme] footer#foot :is(p,a,span,small){font-size:18px}
:where(html[data-vtheme]) :where(button,input,select,textarea){font-size:18px}
html[data-vtheme] :is([class^="gf-"],[class*=" gf-"],.gf-pick button,.limits span,span[style*="font-size:13px"]){font-size:18px!important;opacity:1!important}
html[data-vtheme] main#main :is(.picker,.picker *,#plist *,.pd,.pl,.w,.pc){font-size:max(18px,1em)}
html[data-vtheme] .dl .dt b{font-size:19px}