/* GiggleByte hybrid components: gb- prefix, every value from tokens.css */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
:root[data-persona="senior"]{scroll-behavior:auto}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-body);font-size:var(--text-body-size);line-height:var(--text-body-line)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.gb-skip{position:absolute;left:-999px;top:8px;background:var(--surface-raised);color:var(--ink);padding:var(--space-3);border:var(--sig-border) solid var(--sig-ink);z-index:9}
.gb-skip:focus{left:8px}
.gb-preview{margin:0;background:var(--brand-soft);color:var(--brand-text);font-size:var(--text-caption-size);line-height:var(--text-caption-line);font-weight:700;text-align:center;padding:var(--space-2) var(--space-4)}
/* Buttons: signature chunky ink + offset shadow on primary */
.gb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:var(--control-height);padding:0 var(--space-5);border-radius:var(--radius-pill);border:2px solid transparent;font-family:var(--font-body);font-size:var(--text-body-size);line-height:1.2;font-weight:700;text-decoration:none;cursor:pointer;transition:background-color var(--duration),transform var(--duration),box-shadow var(--duration)}
.gb-btn svg{width:22px;height:22px;flex:none}
.gb-btn--primary{background:var(--primary);color:var(--on-primary);border:var(--sig-border) solid var(--sig-ink);box-shadow:var(--sig-offset) var(--sig-offset) 0 var(--sig-ink)}
.gb-btn--primary:hover{background:var(--primary-hover);transform:translate(-1px,-1px);box-shadow:calc(var(--sig-offset) + 1px) calc(var(--sig-offset) + 1px) 0 var(--sig-ink)}
.gb-btn--primary:active{transform:translate(2px,2px);box-shadow:calc(var(--sig-offset) - 2px) calc(var(--sig-offset) - 2px) 0 var(--sig-ink)}
:root[data-persona="senior"] .gb-btn--primary:hover,:root[data-persona="senior"] .gb-btn--primary:active{transform:none}
.gb-btn--sm{min-height:var(--tap-target);padding:0 var(--space-4);font-size:var(--text-label-size)}
.gb-btn[aria-disabled="true"]{background:var(--surface-sunken);color:var(--ink-muted);border-color:var(--line-strong);box-shadow:none;cursor:not-allowed;transform:none}
/* Header + persona toggle */
.gb-header{border-bottom:var(--border-w) solid var(--line);background:var(--surface)}
.gb-nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3) var(--space-5);padding:var(--space-4) var(--space-6);max-width:var(--content-max);margin:0 auto}
.gb-nav__links{display:flex;gap:var(--space-5);align-items:center}
.gb-nav__links a:not(.gb-btn){color:var(--ink);text-decoration:none;font-weight:700}
.gb-nav__links a:not(.gb-btn):hover{text-decoration:underline;text-underline-offset:4px}
.gb-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.gb-logo svg{width:44px;height:44px;flex:none}
.gb-logo__word{font-family:var(--font-logo);font-weight:900;font-size:30px;line-height:1;letter-spacing:-.01em;color:var(--wordmark)}
.gb-persona{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.gb-persona__label{font-size:var(--text-label-size);font-weight:700;color:var(--ink-muted)}
.gb-seg{display:inline-flex;border:var(--sig-border) solid var(--sig-ink);border-radius:var(--radius-pill);background:var(--surface-raised);padding:3px;gap:2px}
.gb-seg button{min-height:calc(var(--tap-target) - 8px);min-width:44px;padding:0 var(--space-4);border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink);font:700 var(--text-label-size)/1 var(--font-body);cursor:pointer}
.gb-seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.gb-seg button:hover:not([aria-pressed="true"]){background:var(--surface-sunken)}
/* Hero */
.gb-hero{padding:var(--space-8) var(--space-6);max-width:var(--content-max);margin:0 auto}
.gb-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-7);align-items:center}
.gb-eyebrow{display:inline-flex;margin:0 0 var(--space-4);font-size:var(--text-label-size);line-height:var(--text-label-line);font-weight:700;color:var(--brand-text);background:var(--brand-soft);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill)}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--heading-weight);letter-spacing:-.01em}
.gb-hero h1{margin:0 0 var(--space-4);font-size:56px;line-height:60px}
.gb-hero h1 em{font-style:normal;color:var(--primary-text)}
.gb-hero__lead{margin:0 0 var(--space-6);font-size:var(--text-body-lg-size);line-height:var(--text-body-lg-line);color:var(--ink-muted);max-width:52ch}
.gb-art-frame{background:var(--surface-raised);border:var(--sig-border) solid var(--sig-ink);box-shadow:var(--sig-offset) var(--sig-offset) 0 var(--sig-ink);border-radius:var(--radius-lg);padding:var(--space-4)}
.gb-art{width:100%;height:auto;display:block}
/* Signup */
.gb-signup{display:flex;flex-direction:column;gap:var(--space-3);max-width:580px}
.gb-label{font-size:var(--text-label-size);line-height:var(--text-label-line);font-weight:700;color:var(--ink)}
.gb-fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.gb-fieldset legend{padding:0;margin-bottom:var(--space-2)}
label.gb-chip{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap-target);padding:0 var(--space-4);border-radius:var(--radius-pill);font-size:var(--text-label-size);font-weight:700;cursor:pointer;background:var(--surface-raised);color:var(--ink);border:2px solid var(--line-strong)}
label.gb-chip input{position:absolute;opacity:0;width:1px;height:1px}
label.gb-chip:has(input:checked){background:var(--primary-soft);color:var(--primary-text);border-color:var(--sig-ink)}
label.gb-chip:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:3px}
.gb-tick{display:none}label.gb-chip:has(input:checked) .gb-tick{display:inline}
.gb-age{border:2px solid var(--line-strong);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin:0;background:var(--surface-raised)}
.gb-age legend{font-weight:700;font-size:var(--text-label-size);padding:0 var(--space-1)}
.gb-radio{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap-target);cursor:pointer}
.gb-radio input{width:24px;height:24px;accent-color:var(--ink);margin:0}
.gb-signup__row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.gb-input{flex:1 1 240px;min-height:var(--control-height);padding:0 var(--space-4);border-radius:var(--radius-md);border:2px solid var(--line-strong);background:var(--surface-raised);color:var(--ink);font:var(--text-body-lg-size)/1.3 var(--font-body)}
.gb-input::placeholder{color:var(--ink-muted);opacity:1}
.gb-input:focus-visible{border-color:var(--ink)}
.gb-help{margin:0;font-size:var(--text-caption-size);line-height:var(--text-caption-line);color:var(--ink-muted)}
.gb-help a,.gb-footer a{color:var(--primary-text);font-weight:700;text-underline-offset:3px}
.gb-msg{display:flex;gap:var(--space-2);margin:0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-caption-size);line-height:var(--text-caption-line);font-weight:700}
.gb-msg[hidden]{display:none}
.gb-msg--error{background:var(--error-soft);color:var(--error)}
.gb-msg--info{background:var(--info-bg,#FDF0D2);color:var(--info-text,#6B4600)}
/* Tiles */
.gb-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-8)}
.gb-tile{--p:var(--primary);--p-soft:var(--primary-soft);--p-text:var(--primary-text);position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6) var(--space-5) var(--space-5);background:var(--surface-raised);color:var(--ink);border:var(--border-w) solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);text-decoration:none;overflow:hidden;transition:box-shadow var(--duration),transform var(--duration);text-align:left;font:inherit;cursor:pointer}
.gb-tile::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:var(--p)}
.gb-tile:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
:root[data-persona="senior"] .gb-tile:hover{transform:none}
.gb-tile[aria-pressed="true"]{outline:3px solid var(--sig-ink);outline-offset:2px}
.gb-tile--teen{--p:var(--teen);--p-soft:var(--teen-soft);--p-text:var(--teen-text)}
.gb-tile--parent{--p:var(--parent);--p-soft:var(--parent-soft);--p-text:var(--parent-text)}
.gb-tile--senior{--p:var(--senior);--p-soft:var(--senior-soft);--p-text:var(--senior-text)}
.gb-tile__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-md);background:var(--p-soft);color:var(--p-text)}
.gb-tile__icon svg{width:30px;height:30px}
.gb-tile__eyebrow{margin:0;font-size:var(--text-label-size);font-weight:700;color:var(--p-text)}
.gb-tile__title{margin:0;font-size:26px;line-height:32px}
.gb-tile__text{margin:0;color:var(--ink-muted)}
.gb-tile__cta{margin-top:auto;padding-top:var(--space-2);font-weight:700;color:var(--p-text)}
.gb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Footer */
.gb-footer{background:var(--surface-sunken);border-top:var(--border-w) solid var(--line);margin-top:var(--space-8)}
.gb-footer__in{max-width:var(--content-max);margin:0 auto;padding:var(--space-7) var(--space-6);display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-7);align-items:center;justify-content:space-between}
.gb-footer__tag{margin:0;color:var(--ink-muted)}.gb-footer__tag strong{color:var(--ink)}
.gb-footer__links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:0;padding:0;list-style:none}
.gb-footer__links a{display:inline-flex;min-height:var(--tap-target);align-items:center}
.gb-footer__small{margin:0;font-size:var(--text-caption-size);color:var(--ink-muted);width:100%}
.gb-doc{max-width:var(--measure);margin:0 auto;padding:var(--space-7) var(--space-5)}
.gb-doc h1{font-size:44px;line-height:50px;margin:0 0 var(--space-4)}.gb-doc h2{font-size:26px;line-height:32px;margin:var(--space-6) 0 var(--space-2)}
.gb-doc a{color:var(--primary-text);font-weight:700}
@media (max-width:860px){
 .gb-hero__grid,.gb-tiles{grid-template-columns:1fr}
 .gb-hero{padding:var(--space-6) var(--space-4)}
 .gb-hero h1{font-size:40px;line-height:44px}
 .gb-nav{padding:var(--space-3) var(--space-4)}
 .gb-nav__links a:not(.gb-btn){display:none}
 .gb-nav__links{order:2}.gb-persona{order:3;width:100%}.gb-nav__links .gb-btn{padding:0 var(--space-3)}.gb-persona__label{display:none}.gb-seg{width:100%}.gb-seg button{flex:1;padding:0 var(--space-2)}
 .gb-art-frame{max-width:340px}
 .gb-footer__in{padding:var(--space-6) var(--space-4)}
}
@media (max-width:420px){.gb-logo__word{font-size:24px}.gb-logo svg{width:36px;height:36px}}
@media (max-width:420px){.gb-hide-xs{display:none}:root[data-persona="senior"] .gb-nav__links .gb-btn{font-size:18px}}
.gb-age .gb-label{display:block;margin-bottom:var(--space-2)}.gb-select{width:100%;max-width:320px;cursor:pointer}.gb-age .gb-help{margin:var(--space-2) 0 0}
.gb-doc h3{font-size:22px;line-height:28px;margin:var(--space-5) 0 var(--space-2)}
.gb-age legend.gb-label{margin-bottom:var(--space-2)}.gb-dob{display:flex;flex-wrap:wrap;gap:var(--space-3)}.gb-dob>div{flex:1 1 140px}.gb-dob .gb-help{display:block;margin:0 0 var(--space-1);font-weight:700}
.gb-nav__soon{color:var(--ink-muted);font-weight:700;white-space:nowrap;cursor:default;display:inline-flex;align-items:center;gap:6px}
.gb-soon{font-size:12px;line-height:1;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 6px;border-radius:999px;border:1.5px solid currentColor}
@media (max-width:1100px){.gb-nav__links .gb-nav__soon{display:none}}
/* Newsletter archive: sidebar of past issues + article */
.gb-arch{max-width:1120px;margin:0 auto;padding:var(--space-7) var(--space-5);display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-7);align-items:start}
.gb-arch .gb-doc{padding:0;max-width:var(--measure);margin:0}
.gb-past{position:sticky;top:var(--space-4)}
.gb-past summary{font-weight:700;font-size:var(--text-label-size);line-height:var(--text-label-line);cursor:pointer;padding:var(--space-2) 0;list-style:none}
.gb-past summary::-webkit-details-marker{display:none}
.gb-past summary::after{content:" \25BE";color:var(--ink-muted)}.gb-past details[open] summary::after{content:" \25B4"}
.gb-past__ed{margin:0 0 var(--space-2);font-size:var(--text-caption-size);line-height:var(--text-caption-line);color:var(--ink-muted)}
.gb-past ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.gb-past li a{display:flex;align-items:center;min-height:var(--tap-target);padding:0 var(--space-3);color:var(--ink);text-decoration:none;font-weight:700;border-left:4px solid transparent;margin-left:-3px}
.gb-past li a:hover{text-decoration:underline;text-underline-offset:4px}
.gb-past li a[aria-current="page"]{border-left-color:var(--primary);background:var(--primary-soft);color:var(--primary-text)}
.gb-past li a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.gb-note{margin:0 0 var(--space-4)}
.gb-issue__meta{font-size:var(--text-caption-size);line-height:var(--text-caption-line);color:var(--ink-muted);font-weight:700;margin:0 0 var(--space-2)}
.gb-edtag{display:inline-block;padding:0 var(--space-2);border-radius:var(--radius-pill);font-weight:700;background:var(--p-soft);color:var(--p-text)}
.gb-edtag--teens{--p-soft:var(--teen-soft);--p-text:var(--teen-text)}.gb-edtag--parents{--p-soft:var(--parent-soft);--p-text:var(--parent-text)}.gb-edtag--grandparents{--p-soft:var(--senior-soft);--p-text:var(--senior-text)}
.gb-example{display:inline-block;margin:0 0 var(--space-3);padding:var(--space-1) var(--space-3);border:2px dashed var(--line-strong);border-radius:var(--radius-sm);font-weight:700;font-size:var(--text-caption-size)}
.gb-hero-img{width:100%;height:auto;border-radius:var(--radius-md);margin:0 0 var(--space-5)}
.gb-sources{margin-top:var(--space-6);padding-top:var(--space-4);border-top:2px solid var(--line);font-size:var(--text-caption-size);line-height:var(--text-caption-line);color:var(--ink-muted)}
.gb-doc .gb-sources h2{font-size:20px;line-height:26px;margin:0 0 var(--space-2)}
.gb-sources ul,.gb-sources ol{margin:0;padding-left:1.2em}.gb-sources li{margin:0 0 var(--space-1)}.gb-sources a{overflow-wrap:anywhere}
.gb-empty{padding:var(--space-6);border:2px dashed var(--line-strong);border-radius:var(--radius-md);text-align:center}
.gb-empty p{margin:0 0 var(--space-4)}
@media (max-width:900px){
 .gb-arch{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-5) var(--space-4)}
 .gb-arch .gb-doc{max-width:none}
 .gb-past{position:static;border:2px solid var(--line-strong);border-radius:var(--radius-md);padding:0 var(--space-4);background:var(--surface-raised)}
 .gb-past summary{min-height:var(--tap-target);display:flex;align-items:center}
 .gb-past details[open]{padding-bottom:var(--space-3)}
}
.gb-doc a.gb-btn--primary{color:var(--on-primary)}

/* site-review 2026-10-21: footer contact + social (item: footer contact email) */
.gb-footer__connect{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-6)}
.gb-footer__contact{margin:0;color:var(--ink-muted)}
.gb-footer__contact a,.gb-footer__social a{display:inline-flex;min-height:48px;align-items:center}
.gb-footer__social{display:flex;flex-wrap:wrap;gap:0 var(--space-5);margin:0;padding:0;list-style:none}
/* site-review 2026-10-21: glossary advice follows the selected view */
.gl-aud__mine{border-left:4px solid var(--primary);padding-left:var(--space-3)}
.gl-aud__more{margin:0 0 var(--space-4)}
.gl-aud__more summary{display:block;min-height:48px;box-sizing:border-box;padding:12px 0;line-height:24px;cursor:pointer;color:var(--primary-text);font-weight:700;text-underline-offset:4px;width:fit-content}
.gl-aud__more summary:hover{text-decoration:underline}
.gl-aud__more summary::before{content:"";display:inline-block;vertical-align:.15em;width:.5em;height:.5em;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:rotate(-45deg);margin-right:.6em;transition:transform .15s}
.gl-aud__more summary::-webkit-details-marker{display:none}.gl-aud__more summary{list-style:none}
.gl-aud__more[open] summary::before{transform:rotate(45deg)}
.gl-aud__more ul{margin-top:0}
:root[data-persona="teen"] .gl-aud__more [data-aud="teen"],:root[data-persona="parent"] .gl-aud__more [data-aud="parent"],:root[data-persona="senior"] .gl-aud__more [data-aud="senior"]{display:none}
@media (prefers-reduced-motion:reduce){.gl-aud__more summary::before{transition:none}}
.gb-footer__social a{min-width:48px;justify-content:center}
/* footer-icons 2026-10-21: social links as icons. Glyphs: Bootstrap Icons v1.13.2 (MIT, (c) The Bootstrap Authors), inlined, no CDN/icon font.
   Each link: aria-label "GiggleByte on <Network>", SVG aria-hidden. 48px targets (56px Seniors). Seniors also see a text label under each icon. */
.gb-footer__social{gap:var(--space-2) var(--space-3)}
.gb-footer__social a{width:48px;height:48px;min-width:48px;justify-content:center;border-radius:var(--radius-md);color:var(--primary-text);text-decoration:none;transition:background-color var(--duration),color var(--duration)}
.gb-footer__social svg{width:24px;height:24px;display:block;flex:none}
.gb-footer__social a:hover{background:var(--surface-raised);color:var(--ink);box-shadow:inset 0 0 0 2px currentColor}
.gb-footer__social a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;background:var(--surface-raised);color:var(--ink)}
.gb-footer__social-label{display:none}
:root[data-persona="senior"] .gb-footer__social{gap:var(--space-3) var(--space-2)}
:root[data-persona="senior"] .gb-footer__social a{flex-direction:column;gap:4px;width:auto;min-width:72px;height:auto;min-height:56px;padding:6px 4px}
:root[data-persona="senior"] .gb-footer__social svg{width:28px;height:28px}
:root[data-persona="senior"] .gb-footer__social-label{display:block;font-size:16px;line-height:20px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.gb-footer__social a{transition:none}}
/* phones: Parent/Teen keep all 6 icons on one row (48px targets, gaps shrink to fit: 8px at 360, ~10px at 390); Seniors get two even rows of 3. Desktop unchanged. */
@media (max-width:600px){
:root:not([data-persona="senior"]) .gb-footer__social{flex-wrap:nowrap;justify-content:space-between;gap:0;width:100%;max-width:340px}
:root[data-persona="senior"] .gb-footer__social{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3) var(--space-2);width:100%;max-width:340px}
:root[data-persona="senior"] .gb-footer__social a{min-width:0;width:100%}
}