.page-trail { padding-block: 11px; }
.page-trail ol { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin: 0; padding: 0; list-style: none; }
.page-trail li { display: inline-flex; align-items: baseline; gap: 10px; color: #35465a; font-size: 14px; line-height: 1.6; min-width: 0; overflow-wrap: anywhere; }
.page-trail li + li::before { content: '›'; color: #75859a; }
.page-trail a { display: inline-flex; align-items: center; min-height: 38px; color: #475b70; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #b6c7d8; }
.page-trail a:hover, .page-trail a:focus-visible { color: var(--blue); text-decoration-color: currentColor; }
.desktop-nav a[aria-current], .mobile-menu a[aria-current], .fallback-nav a[aria-current] { color: var(--blue); text-decoration: underline; text-underline-offset: 6px; }
.footer-sections { display: flex; flex-wrap: wrap; gap: 0 30px; padding: 14px 0; border-bottom: 1px solid #dbe4ef; }
.footer-sections a, .home-directory-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-weight: 650; color: var(--blue); }
.footer-sections a:hover, .home-directory-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-directory-link svg { width: 17px; height: 17px; }
.collection-v6-heading .home-directory-link, .home-notes header .home-directory-link { margin-top: 6px; font-size: 15px; }
.case-v6-bottom .case-page-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--blue); font-weight: 700; }
.case-v6-bottom .case-page-link svg { width: 16px; height: 16px; }
.case-v6-bottom { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }
.case-v6-bottom .case-preview-toggle { font: inherit; font-size: 14px; color: #405469; background: transparent; border: 0; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; cursor: pointer; }
.journey-next-reading { padding-block: clamp(32px,5vw,65px); }
.journey-next-reading h2 { font-size: clamp(24px,3vw,32px); letter-spacing: -.025em; line-height: 1.3; margin-bottom: 12px; }
.journey-next-reading ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 36px; }
.journey-next-reading a { display: grid; grid-template-columns: 1fr 20px; align-items: center; column-gap: 14px; padding: 14px 0; border-bottom: 1px solid #cfdbe8; color: #173452; }
.journey-next-reading small { display: block; margin-bottom: 3px; font-size: 13px; color: #526882; }
.journey-next-reading strong { font-size: 18px; }
.journey-next-reading svg { width: 18px; height: 18px; color: var(--blue); }
.journey-next-reading a:hover strong { text-decoration: underline; text-underline-offset: 4px; color: var(--blue); }
@media (max-width: 760px) {
  .page-trail { padding-block: 2px; }
  .page-trail li { font-size: 13px; }
  .page-trail a { min-height: 44px; }
  .footer-sections { gap: 0 19px; }
  .footer-sections a { font-size: 14px; }
  .journey-next-reading ul { grid-template-columns: 1fr; }
}

.v6-journal .v6-journal-lead { margin-top: 0; }
.v6-planner > .page-trail { margin-top: -12px; }

.reading-context:not([hidden]) { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 18px; padding: 9px 16px; background: #ecf4ff; border-radius: 5px; }
.reading-context div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 15px; }
.reading-context span { color: #485f7a; font-size: 13px; }
.reading-context strong { color: #162e4d; font-size: 16px; }
.reading-context a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--blue); font-weight: 650; font-size: 14px; }
.reading-context svg { width: 16px; height: 16px; }
.collection-v6 .case-v6 .case-preview-toggle { width:auto; display:inline-flex; justify-content:center; font-size:14px; padding:4px 0; color: #415671; }
.information.shell > .page-trail.shell { width:100%; }

/* System palettes can give both choices the same face. Keep selection inside
   the control and keyboard focus outside it. */
@media (forced-colors: active) {
  button:is([aria-pressed="true"],[role="tab"][aria-selected="true"]) {
    outline: 3px double ButtonText;
    outline-offset: -5px;
    text-decoration: underline;
    text-underline-offset: .2em;
  }
  button:is([aria-pressed="true"],[role="tab"][aria-selected="true"]):focus-visible {
    outline: 3px dashed Highlight;
    outline-offset: 2px;
    text-decoration-style: double;
  }
}