/* Shared shell for the current material pages. Load after page-specific styles.
   Keep page composition separate from navigation, type and action controls. */
:root {
  --header:75px;
  --site-gutter:4.25vw;
  --site-logo:clamp(153px,10.2vw,221px);
  --site-nav-size:clamp(15.3px,1.105vw,22.1px);
  --site-nav-gap:clamp(20.4px,1.87vw,40.8px);
  --site-action-size:clamp(18px,1.2vw,22px);
  --site-font:'neue-haas-grotesk-display',Arial,sans-serif;
  --site-ink:#191919;
  --site-paper:#f2f2f2;
  --site-coral:#ff6f61;
  --site-accent:#b8453b;
  --mobile-dock-height:calc(58px + env(safe-area-inset-bottom,0px));
}
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header) + 18px); }
.site-menu-backdrop[hidden] { display:none; }
.site-menu-backdrop { position:fixed; inset:0; z-index:48; background:#0008; touch-action:none; }
html.site-menu-open { overflow:hidden; }
.material-page[data-site-page] :is(a,button,summary) { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.material-page[data-site-page] :is(.site-header,.site-footer) .brand { min-height:44px; display:flex; align-items:center; }
.material-page[data-site-page] { font-family:var(--site-font); font-size:var(--type-body,20px); line-height:var(--type-leading,1.5); }
.material-page[data-site-page] .method-page-link { margin-top:40px; background:var(--site-ink); color:white; border-color:var(--site-ink); }
.material-page[data-site-page] :is(.button,.raised-button) {
  display:inline-flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:56px; padding:17px 24px; max-width:100%;
  border-width:1px; border-style:solid; border-radius:0;
  font:600 var(--site-action-size)/1.2 var(--site-font);
  letter-spacing:0; word-spacing:0; text-align:left;
  box-shadow:4px 4px 0 var(--site-coral); transform:none;
  transition:transform .18s,box-shadow .18s; cursor:pointer;
}
.material-page[data-site-page] :is(.button,.raised-button)>span[aria-hidden] { font-size:24px; font-weight:400; flex-shrink:0; }
.material-page[data-site-page] :is(.button,.raised-button):hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--site-coral); }
.material-page[data-site-page] :is(.button,.raised-button):active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--site-coral); }
.material-page[data-site-page] :is(.button,.raised-button):focus-visible { outline:3px solid var(--site-accent); outline-offset:5px; }
.material-page[data-site-page] :is(.tone-dark,.dark-surface) :is(.button,.raised-button):focus-visible { outline-color:var(--site-coral); }
.material-page[data-site-page] .site-header {
  position:sticky; inset:0 0 auto; z-index:50; display:flex; align-items:center;
  width:100%; height:var(--header); min-height:var(--header);
  padding:0 var(--site-gutter); gap:25.5px; margin:0; border:0;
  background:rgba(242,242,242,.97); color:var(--site-ink);
  font:600 var(--site-nav-size)/1.25 var(--site-font);
  letter-spacing:0; word-spacing:0;
}
/* The homepage opening owns its reveal. Never override its opacity or input lock. */
.material-page[data-site-page="home"] .site-header { position:fixed; }
.material-page[data-site-page] .site-header .brand { display:flex; align-items:center; flex:0 0 auto; margin:0; padding:0; }
.material-page[data-site-page] .site-header .brand img { display:block; width:var(--site-logo); height:auto; max-width:none; filter:none; }
.material-page[data-site-page] .site-header .site-links {
  display:flex; flex:0 1 auto; align-items:center; gap:var(--site-nav-gap);
  margin:0 0 0 auto; padding:0; border:0;
  font:600 var(--site-nav-size)/1.25 var(--site-font); letter-spacing:0; word-spacing:0;
}
.material-page[data-site-page] .site-header .site-links a {
  position:relative; display:block; padding:15px 0; margin:0; border:0;
  color:inherit; font:inherit; text-decoration:none; white-space:nowrap;
}
.material-page[data-site-page] .site-header .site-links a::after {
  content:''; position:absolute; height:2px; bottom:7px; left:0; right:0;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .18s;
}
.material-page[data-site-page] .site-header .site-links a:hover::after { transform:scaleX(1); }
.material-page[data-site-page] .site-header .site-links a[aria-current="page"]::after { background:var(--site-coral); transform:scaleX(1); }
.material-page[data-site-page] .site-header .header-cta {
  display:inline-flex; flex:0 0 auto; min-height:46px; height:46px;
  padding:11px 20px; margin:0 0 0 10px; gap:0;
  font:600 15.3px/1.2 var(--site-font); letter-spacing:0; word-spacing:0;
  background:var(--site-ink); color:#fff; border:1px solid var(--site-ink);
}
.material-page[data-site-page] .site-header[data-surface="dark"] { background:rgba(25,25,25,.97); color:#fff; }
.material-page[data-site-page] .site-header[data-surface="dark"] .brand img { filter:grayscale(1) brightness(0) invert(1); }
.material-page[data-site-page] .site-header[data-surface="dark"] .header-cta { background:#fff; color:var(--site-ink); border-color:#fff; }
.material-page[data-site-page] .site-header :is(a,button):focus-visible { outline:3px solid var(--site-accent); outline-offset:5px; }
.material-page[data-site-page] .site-header[data-surface="dark"] :is(a,button):focus-visible { outline-color:var(--site-coral); }
.material-page[data-site-page] .site-header .menu-toggle,
.material-page[data-site-page] #mobile-menu { display:none; }
.material-page[data-site-page] #mobile-menu[hidden] { display:none!important; }
@media(max-width:1100px) {
  :root { --header:calc(68px + env(safe-area-inset-top,0px)); --site-gutter:27px; --site-logo:161.5px; }
  .material-page[data-site-page] .site-header { gap:20px; padding-top:env(safe-area-inset-top,0px); padding-left:max(var(--site-gutter),env(safe-area-inset-left,0px)); padding-right:max(var(--site-gutter),env(safe-area-inset-right,0px)); }
  .material-page[data-site-page] .site-header :is(.site-links,.header-cta) { display:none; }
  .material-page[data-site-page] .site-header .menu-toggle {
    display:flex; align-items:center; justify-content:center; gap:17px; margin:0 0 0 auto;
    min-width:84px; min-height:44px; padding:8px 0 8px 10px;
    color:inherit; background:none; border:0; border-radius:0; box-shadow:none;
    font:600 17px/1.25 var(--site-font); letter-spacing:0; word-spacing:0; cursor:pointer;
  }
  .material-page[data-site-page] .site-header .menu-toggle span { font:400 24px/1 var(--site-font); transition:transform .18s; }
  .material-page[data-site-page] .site-header .menu-toggle[aria-expanded="true"] span { transform:rotate(45deg); }
  .material-page[data-site-page] #mobile-menu {
    position:fixed; z-index:49; top:var(--header); bottom:auto; left:0; right:0;
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    padding:15px var(--site-gutter) 26px; margin:0; border:0; border-bottom:1px solid #aaa;
    max-height:calc(100dvh - var(--header) - env(safe-area-inset-bottom,0px) - 20px); overflow-y:auto; overscroll-behavior:contain;
    color:var(--site-ink); background:var(--site-paper); box-shadow:0 8px 15px #0002;
    font:500 20px/1.4 var(--site-font); letter-spacing:0; word-spacing:0;
  }
  .material-page[data-site-page] #mobile-menu a { display:block; padding:14px 0; margin:0; border:0; border-bottom:1px solid #999; color:inherit; font:inherit; text-decoration:none; }
  .material-page[data-site-page] #mobile-menu > a:not(.button) { min-height:64px; display:flex; align-items:center; font-size:clamp(26px,6vw,38px); font-weight:600; letter-spacing:-.025em; }
  .material-page[data-site-page] #mobile-menu a[aria-current="page"] { text-decoration:underline; text-decoration-color:var(--site-coral); text-underline-offset:6px; }
  .material-page[data-site-page] #mobile-menu .button { display:inline-flex; align-self:start; min-width:180px; min-height:54px; padding:16px 20px; margin-top:22px; color:#fff; background:var(--site-ink); border:1px solid var(--site-ink); font-size:18px; }
  .material-page[data-site-page] #mobile-menu[data-surface="dark"] { color:#fff; background:var(--site-ink); }
  .material-page[data-site-page] #mobile-menu[data-surface="dark"] .button { color:var(--site-ink); background:#fff; border-color:#fff; }
  .material-page[data-site-page] #mobile-menu :is(a,button):focus-visible { outline:3px solid var(--site-accent); outline-offset:4px; }
  .material-page[data-site-page] #mobile-menu[data-surface="dark"] :is(a,button):focus-visible { outline-color:var(--site-coral); }
}
@media(max-width:700px) {
  :root { --site-gutter:20px; --site-logo:144.5px; --site-action-size:17px; }
  .material-page[data-site-page] :is(.button,.raised-button) { min-height:54px; padding:16px 20px; gap:20px; }
  .material-page[data-site-page] .site-header .brand { display:flex; }
  .material-page[data-site-page] :is(input,textarea,select) { font-size:var(--type-label,18px); }
  .material-page[data-site-page] .site-footer { padding-bottom:calc(var(--mobile-dock-height) + 36px); }
}
@media(max-width:900px) {
  .material-page[data-site-page] .mobile-chapters {
    height:var(--mobile-dock-height); padding:0 max(20px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(20px,env(safe-area-inset-left,0px));
  }
  .material-page[data-site-page] .mobile-chapters select { min-height:48px; font-size:16px; }
}
@media(hover:none) {
  .material-page[data-site-page] :is(.button,.raised-button):hover { transform:none; box-shadow:4px 4px 0 var(--site-coral); }
  .material-page[data-site-page] :is(.button,.raised-button):active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--site-coral); }
}
@media(prefers-reduced-motion:reduce) {
  .material-page[data-site-page] :is(.button,.raised-button),
  .material-page[data-site-page] .site-header .site-links a::after,
  .material-page[data-site-page] .site-header .menu-toggle span { transition:none; }
  .material-page[data-site-page] :is(.button,.raised-button):hover,
  .material-page[data-site-page] :is(.button,.raised-button):active { transform:none; }
}