/* Gather Whirl usability layer: shared colour roles, readable sizing, and resilient navigation. */
:root{
  --ux-page:var(--page,#e9f6f4);--ux-surface:var(--surface,#fcfffd);--ux-text:var(--ink,#173d44);
  --ux-muted:var(--muted-ink,#48636a);--ux-accent:var(--accent,#0b7277);--ux-accent-text:var(--accent-text,#fff);
  --ux-border:var(--rule,#b8d5d2);--ux-edge:var(--edge,#126469);--ux-focus:#f0a51a;
  --ux-radius:12px;--ux-touch:46px;--ux-content:1240px;
}
body.editorial,body.tool-page{
  --ux-page:var(--page,#e9f6f4);--ux-surface:var(--surface,#fcfffd);--ux-text:var(--ink,#173d44);
  --ux-muted:var(--muted-ink,#48636a);--ux-accent:var(--accent,#0b7277);--ux-accent-text:var(--accent-text,#fff);
  --ux-border:var(--rule,#b8d5d2);--ux-edge:var(--edge,#126469);
}
*{overflow-wrap:anywhere}html{scroll-padding-top:104px;text-size-adjust:100%}body{font-size:16px;line-height:1.65}body.editorial{color:var(--ux-text)}
body.editorial main,body.tool-page main{width:min(100%,var(--ux-content));margin-inline:auto}
p,li,label,input,select,textarea,button{letter-spacing:normal}p,li{max-width:72ch}
h1,h2,h3{overflow-wrap:normal;text-wrap:balance}.eyebrow{line-height:1.5}
a,button,input,select,textarea,summary{outline-offset:4px}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--ux-focus)!important;box-shadow:0 0 0 2px var(--ux-surface)!important}
:where(button,.button,.primary,.soft,.saved-nav,.nav-toggle,input,select,textarea,summary){min-height:var(--ux-touch)}
:where(button,.button,.primary,.soft,.saved-nav,.nav-toggle){font-size:14px;line-height:1.35}
input,select,textarea{font-size:16px!important;line-height:1.45}textarea{min-height:120px}
button:disabled,[aria-disabled=true]{cursor:not-allowed;opacity:.58;transform:none!important}
.skip-link{position:fixed;z-index:1000;left:16px;top:12px;translate:0 -160%;padding:11px 16px;border:2px solid var(--ux-accent);border-radius:10px;background:var(--ux-surface);color:var(--ux-text);font-weight:800;text-decoration:none;box-shadow:0 4px 0 var(--ux-edge)}
.skip-link:focus{translate:0 0}

/* One clear header pattern on every primary page. */
body.editorial>header{position:sticky!important;top:0;z-index:50}
.editorial header .nav{width:100%;max-width:var(--ux-content);margin-inline:auto}
.editorial .brand-name{font-family:Arial,Helvetica,sans-serif!important;font-weight:900!important;letter-spacing:-.045em!important}
.editorial .nav #main-navigation a[aria-current=page]{background:var(--ux-accent)!important;color:var(--ux-accent-text)!important;border-color:var(--ux-accent)!important}
.editorial .nav-toggle{display:none;border:1px solid var(--ux-border);border-radius:10px;background:var(--ux-surface);color:var(--ux-text);padding:8px 14px;font-weight:800;box-shadow:0 3px 0 var(--ux-edge)}
.editorial .appearance-trigger,.editorial .saved-nav{min-height:var(--ux-touch)!important}
.editorial .appearance-panel{color:var(--ux-text)}

/* Keep action colours and surfaces tied to the visitor's selected theme. */
.editorial :where(.primary,a.primary,.button.primary,.next a.primary){background:linear-gradient(170deg,color-mix(in srgb,var(--ux-accent) 78%,white),var(--ux-accent))!important;color:var(--ux-accent-text)!important;border-color:color-mix(in srgb,var(--ux-accent) 70%,black)!important}
.editorial :where(.soft,.button,.chip,.live-game-card,.bible-card,.panel,.glass,.design){border-color:var(--ux-border);color:var(--ux-text)}
.editorial :where(.sub,.notice,.quiet,.hint,.privacy,.trust){color:var(--ux-muted)!important}
.editorial :where(.textbtn,.live-card-link,.path-action){color:var(--ux-accent)!important}
.editorial :where(.field input,.field select,.field textarea,input,select,textarea){background:var(--ux-surface);color:var(--ux-text);border-color:var(--ux-border)}
.editorial dialog{color:var(--ux-text);background:var(--ux-surface)}
.editorial details>summary{cursor:pointer}
.footer{line-height:1.55}.footer a{min-height:32px;display:inline-flex;align-items:center}

/* The seasonal page now participates in the same system. */
.thanksgiving-page{background:var(--page-wash),var(--ux-page)!important;color:var(--ux-text)!important}
.thanksgiving-page .game-card,.thanksgiving-page .panel,.thanksgiving-page .trivia-box,.thanksgiving-page .call-box{background:var(--ux-surface)!important;border-color:var(--ux-border)!important;color:var(--ux-text)!important}
.thanksgiving-page .game-card,.thanksgiving-page .panel{box-shadow:0 5px 0 var(--ux-edge),0 18px 30px #1236381c!important}
.thanksgiving-page :where(p,.quiet){color:var(--ux-muted)!important}.thanksgiving-page .eyebrow{color:var(--ux-accent)!important}
.thanksgiving-page .button{background:var(--ux-surface)!important;border-color:var(--ux-border)!important;color:var(--ux-text)!important;min-height:var(--ux-touch)}
.thanksgiving-page .button.primary{background:var(--ux-accent)!important;color:var(--ux-accent-text)!important}

@media(max-width:900px){
  body.editorial>header{position:relative!important}
  .editorial header .nav{min-height:70px!important;padding:10px 18px!important;gap:9px!important;flex-wrap:wrap!important}
  .editorial .nav .brand{margin-right:auto!important}
  .editorial .nav-toggle{display:inline-flex!important;align-items:center;justify-content:center;order:2;margin-left:auto}
  .editorial .appearance-menu{order:3!important}.editorial .saved-nav{order:4!important}
  .editorial .nav #main-navigation{display:none!important;order:5!important;width:100%!important;margin:2px 0 0!important;padding:10px 0 4px!important;gap:8px!important;border-top:1px solid var(--ux-border);grid-template-columns:repeat(3,minmax(0,1fr))}
  .editorial .nav #main-navigation.is-open{display:grid!important}
  .editorial .nav #main-navigation a{width:100%!important;min-height:var(--ux-touch)!important;padding:10px 8px!important;text-align:center}
  .editorial .appearance-panel{right:0!important}
}
@media(max-width:560px){
  :root{--ux-touch:48px}
  body{font-size:16px}.editorial header .nav{padding-inline:14px!important}
  .editorial .brand-name{font-size:22px!important}.editorial .saved-nav{font-size:0!important;min-width:48px}.editorial .saved-nav::before{content:'Saved';font-size:12px!important}
  .editorial .saved-nav .count{font-size:12px!important}
  .editorial .nav #main-navigation{grid-template-columns:1fr}
  .editorial .nav #main-navigation a{text-align:left!important;justify-content:flex-start!important;padding-inline:14px!important}
  .editorial .appearance-current{font-size:0}.editorial .appearance-current::before{content:'Colours';font-size:12px}
  .editorial main,.tool-page main{padding-inline:16px!important}
  .editorial .actions,:where(.printactions,.hero-actions){gap:12px}
  .editorial .actions>:where(button,a),.editorial .printactions>:where(button,a){min-height:48px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.skip-link,*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{.skip-link,.nav-toggle{display:none!important}}

/* Compact icon-only utility controls align as one quiet group beside the primary navigation. */
.editorial .nav :where(.appearance-trigger,.saved-nav,.night-toggle){position:relative;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 42px!important;width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;gap:0!important;border-radius:10px!important;font-size:0!important}
.editorial .nav .appearance-trigger::after,.editorial .nav .saved-nav::before{content:none!important}
.editorial .nav .appearance-current,.editorial .nav .night-toggle span:first-child,.editorial .nav .saved-nav-icon{display:block!important;font-size:18px!important;line-height:1!important}
.editorial .nav .saved-nav .count{position:absolute;right:2px;top:2px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 3px!important;border:1px solid var(--ux-surface)!important;border-radius:999px;background:var(--ux-accent);color:var(--ux-accent-text);font-size:9px!important;line-height:1}
@media(max-width:700px){.editorial .nav :where(.appearance-trigger,.saved-nav,.night-toggle){flex-basis:40px!important;width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important}}