/* Shared design tokens and components. Page-specific layouts stay in style.css. */
:root{--brand:#146b60;--brand-deep:#0c4f46;--brand-soft:#e8f0ed;--brand-line:#91b8ad;--brand-hit:#a4d1c2;--ui-ink:#202522;--ui-muted:#68746e;--ui-border:#cbd6cf;--ui-radius:8px;--ui-control-size:14px;--ui-focus:2px solid var(--brand)}
body{color:var(--ui-ink)}
body .site-header{height:76px;min-height:76px;padding-block:12px;gap:16px}
.site-header .brand{gap:9px}
.site-header nav{display:flex;align-items:center;gap:6px}
body .site-header :is(.nav-link,.home-nav,.nav-preferences>summary){display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:10px 12px;border-radius:var(--ui-radius);font:inherit;font-size:var(--ui-control-size);line-height:1.4;color:var(--ui-muted);text-decoration:none;white-space:nowrap}
body .site-header :is(.nav-link,.home-nav,.nav-preferences>summary):hover{background:var(--brand-soft);color:var(--brand-deep)}
body .site-header [aria-pressed=true]{background:var(--brand-soft);color:var(--brand-deep)}
.ui-icon{width:18px;height:18px;flex-shrink:0}
body :is(.home-start,.primary-button,.secondary-button){display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:44px;border-radius:var(--ui-radius);padding:12px 18px;font:inherit;font-size:15px;line-height:1.4;text-decoration:none}
body :is(.home-start,.primary-button){background:var(--brand);color:#fff}
body :is(.home-start,.primary-button):hover{background:var(--brand-deep);color:#fff}
body :is(button,a,summary,input,select):focus-visible{outline:var(--ui-focus);outline-offset:4px}
body .footer{font-size:12px;line-height:1.7;color:var(--ui-muted);padding:20px 0;margin-top:28px;border-top:0}
@media(min-width:761px) and (max-height:760px){body .site-header{height:64px;min-height:64px;padding-block:8px}}
@media(max-width:600px){body .site-header{height:auto;min-height:68px;flex-wrap:wrap;gap:8px}body .site-header :is(.nav-link,.home-nav,.nav-preferences>summary){font-size:12px;padding:8px;min-height:38px}body .footer{font-size:11px}}
@media(max-width:480px){body:not(.home-page) .site-header nav{width:100%;justify-content:flex-end}}
/* Full-width persistent brand header; the inner content keeps the page grid. */
.site-header-bar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-top:3px solid var(--brand);border-bottom:1px solid #d5dfd9;box-shadow:0 3px 14px #153c2d08;backdrop-filter:blur(12px)}
body .site-header{border-bottom:0;background:transparent}
.site-header .brand{padding-right:18px}
body .site-header .home-nav[href="practice.html"]{background:var(--brand);color:#fff;padding-inline:16px}
body .site-header .home-nav[href="practice.html"]:hover{background:var(--brand-deep);color:#fff}
html{scroll-padding-top:100px}
body:not(.home-page) .practice{padding-top:20px}
@media(max-width:480px){html{scroll-padding-top:140px}}

/* Shared custom story selector for home and practice. */

/* Reusable button component. Variants only supply surface tokens and sizing.
   The scope overrides legacy page button rules while retaining their layout. */
:root body .ui-button.ui-button{
  --button-face:#fff;--button-hover:#f5faf7;--button-ink:var(--brand-deep);--button-border:#bdcec5;--button-edge:#c1d0c7;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:11px 17px;border:1px solid var(--button-border);border-radius:10px;
  background:var(--button-face);color:var(--button-ink);font:inherit;font-size:14px;font-weight:550;line-height:1.4;
  text-decoration:none;cursor:pointer;opacity:1;list-style:none;
  box-shadow:0 3px 0 var(--button-edge),0 5px 10px #173c2d08,inset 0 1px 0 #ffffff50;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease;
}
:root body .ui-button.ui-button--primary{--button-face:var(--brand);--button-hover:#187d6f;--button-ink:#fff;--button-border:#0c5d52;--button-edge:#083f38}
:root body .site-header .ui-button{min-height:38px;padding:8px 12px;font-size:13px;border-radius:8px}
:root body .ui-button .ui-icon{width:17px;height:17px}
@media(hover:hover){:root body .ui-button.ui-button:hover{background:var(--button-hover);color:var(--button-ink);transform:translateY(-1px);box-shadow:0 4px 0 var(--button-edge),0 7px 14px #173c2d12,inset 0 1px 0 #ffffff50}}
:root body .ui-button.ui-button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--button-edge),inset 0 1px 3px #15382d12;opacity:1}
:root body .ui-button.ui-button:focus-visible{outline:var(--ui-focus);outline-offset:5px}
:root body .ui-button.ui-button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
:root body .ui-button[aria-pressed=true],:root body details[open]>.ui-button{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-deep);box-shadow:0 1px 0 var(--button-edge),inset 0 1px 2px #15382d08}
@media(max-width:600px){:root body .site-header .ui-button{font-size:12px;padding:8px;gap:5px}.site-header nav{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){:root body .ui-button.ui-button{transition:none}:root body .ui-button.ui-button:hover,:root body .ui-button.ui-button:active{transform:none}}

/* Shared checkbox: keep native semantics and keyboard behavior. */