/* Carry the Home panels' silver frame, typography and compact link treatment into site menus. */
body:not([data-route="home"]):not([data-route="account"]) #main-content :is(.page-heading,.page-design-heading,.downloads-page-title) {
  border:1px solid #c1e8fa;
  border-image-source:url('../assets/silver-ice-window-frame-v1.svg');
  border-image-slice:180 200;
  border-image-width:24px 27px;
  border-image-outset:12px;
  border-image-repeat:stretch;
  background:rgba(239,249,255,.75);
  text-align:center;
}
body:not([data-route="home"]):not([data-route="account"]) #main-content :is(.page-heading,.page-design-heading,.downloads-page-title) h2 {
  color:#526d80;
  font:400 clamp(22px,2.5vw,28px)/1.25 Georgia,'Times New Roman',serif;
  letter-spacing:.065em;
  text-transform:uppercase;
  text-shadow:0 1px #fff;
}

/* Page links and setup steps use the same small icon-over-label pattern as Home. */
body:not([data-route="home"]) #main-content :is(.page-design-links,.page-flow) {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(105px,1fr));
  gap:3px;
  padding:6px 8px;
  border:1px solid #bed7e7;
  border-radius:5px;
  background:rgba(242,250,255,.62);
}
body:not([data-route="home"]) #main-content :is(.page-design-links,.page-flow) a {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  min-height:49px;
  padding:6px 8px;
  border:1px solid transparent;
  border-radius:4px;
  background:transparent;
  box-shadow:none;
  color:#356b91;
  font:400 12px/1.2 Georgia,'Times New Roman',serif;
  text-align:center;
  text-transform:uppercase;
}
body:not([data-route="home"]) #main-content :is(.page-design-links,.page-flow) a :is(.fa,svg) { color:#3f84af; }
body:not([data-route="home"]) #main-content :is(.page-design-links,.page-flow) a:hover,
body:not([data-route="home"]) #main-content :is(.page-design-links,.page-flow) a[aria-current] {
  border-color:#b6d6e8;
  background:rgba(225,242,252,.8);
  color:#173f63;
}
body:not([data-route="home"]) #main-content :is(.page-design-links,.page-flow) a span:last-child {
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Ranking category buttons retain their pressed state and data-loading behavior. */
body[data-route="rankings"] #main-content .ranking-experience .ranking-switch {
  gap:2px;
  padding:5px;
  border-color:#bed7e7;
  border-radius:5px;
  background:rgba(242,250,255,.72);
}
body[data-route="rankings"] #main-content .ranking-experience .ranking-switch button {
  flex-direction:column;
  gap:3px;
  min-height:52px;
  border-radius:4px;
  background:transparent;
  color:#356b91;
  font:400 12px/1.15 Georgia,'Times New Roman',serif;
  text-transform:uppercase;
}
body[data-route="rankings"] #main-content .ranking-experience .ranking-switch button span {
  text-decoration:underline;
  text-underline-offset:3px;
}
body[data-route="rankings"] #main-content .ranking-experience .ranking-switch button[aria-pressed="true"],
body[data-route="rankings"] #main-content .ranking-experience .ranking-switch button:hover {
  border-color:#b6d6e8;
  background:rgba(225,242,252,.9);
  box-shadow:none;
  color:#173f63;
}

/* Guidebook keeps its sticky, scrollable navigation and all expandable groups. */
body[data-route="guides"] #main-content .harbor-guides .gb-browser-panel {
  border-color:#9fc7dc;
  background:rgba(241,249,254,.96);
  box-shadow:0 4px 15px rgba(36,91,126,.12);
}
body[data-route="guides"] #main-content .harbor-guides .gb-browser-head {
  background:linear-gradient(180deg,rgba(253,255,255,.96),rgba(215,236,248,.9));
  border-bottom-color:#bdd9e8;
}
body[data-route="guides"] #main-content .harbor-guides .gb-browser-head h3 {
  color:#526d80;
  font:400 21px/1.25 Georgia,'Times New Roman',serif;
  letter-spacing:.025em;
}
body[data-route="guides"] #main-content .harbor-guides .harbor-guide-toggle,
body[data-route="guides"] #main-content .harbor-guides .harbor-guide-links a {
  color:#315d79;
  background:rgba(245,251,255,.75);
}
body[data-route="guides"] #main-content .harbor-guides .harbor-guide-toggle:hover,
body[data-route="guides"] #main-content .harbor-guides .harbor-guide-toggle[aria-expanded="true"],
body[data-route="guides"] #main-content .harbor-guides .harbor-guide-links a:hover,
body[data-route="guides"] #main-content .harbor-guides .harbor-guide-links a[aria-current="page"] {
  color:#173f63;
  background:#dceffb;
}

/* The two download menus share Home's framing while retaining unavailable states. */
body[data-route="downloads"] .wrap #main-content [data-page-design="downloads"] .download-options-grid {
  gap:32px;
}
body[data-route="downloads"]:not([data-route="home"]) .wrap #main-content [data-page-design="downloads"] .download-options-grid > .download-option-window.home-card {
  border:1px solid #c1e8fa;
  border-image-source:url('../assets/silver-ice-window-frame-v1.svg');
  border-image-slice:180 200;
  border-image-width:24px 27px;
  border-image-outset:12px;
  border-image-repeat:stretch;
  background:rgba(245,251,255,.94)!important;
  box-shadow:none;
  overflow:visible;
}
body[data-route="downloads"] #main-content .download-option-window :is(h2,h3) {
  color:#526d80;
  font-family:Georgia,'Times New Roman',serif;
}

body:not([data-route="home"]) #main-content :is(a,button,summary):focus-visible {
  outline:2px solid #166693;
  outline-offset:3px;
}
@media(max-width:720px) {
  body:not([data-route="home"]) #main-content :is(.page-design-links,.page-flow) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-route="rankings"] #main-content .ranking-experience .ranking-switch button { flex:1 0 105px; }
  body[data-route="guides"] #main-content .harbor-guides .gb-browser-head h3 { font-size:19px; }
  body[data-route="downloads"] .wrap #main-content [data-page-design="downloads"] .download-options-grid { gap:28px; }
}