/* This route-only stylesheet also works before JavaScript/global CSS loads. */
body { margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
.public-reading-directory, .public-reading-breadcrumb { position: relative; z-index: 1; width: min(100% - 32px, 1420px); margin: 24px auto; color: #071d58; font-family: Arial, sans-serif; overflow-wrap: anywhere; }
.public-reading-directory { padding: 20px; border: 1px solid #d8e5f6; border-radius: 14px; background: #fff; }
.public-reading-directory h2 { margin: 0 0 12px; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; }
.public-reading-directory-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.public-reading-directory summary { padding: 12px 0; cursor: pointer; font-weight: 700; }
.public-reading-directory a, .public-reading-breadcrumb a { color: #084fa8; text-decoration: underline; }
.public-reading-directory li a { display: inline-block; padding: 10px 0; }
.public-reading-directory ul { padding-left: 20px; }
.public-reading-neighbours { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.public-reading-neighbours a { padding: 10px 0; }
.public-reading-directory :focus-visible, .public-reading-breadcrumb :focus-visible { outline: 3px solid #0968ff; outline-offset: 3px; }