/* Slow, traceable navigation and a visible path back to the previous reading view. */
@media screen{body{padding-bottom:82px;}}
html.reader-is-moving{scroll-behavior:auto!important;overflow-anchor:none;}
.reader-navigation{position:fixed;z-index:85;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 130px);padding:8px 10px;background:#fffef9f5;border:1px solid #b4c9aa;border-radius:12px;box-shadow:0 5px 24px #173e3225;}
.reader-navigation button{flex:none;border:1px solid #a6bf96;border-radius:8px;padding:9px 12px;background:#edf4e4;color:#234d39;font:650 13px/1.5 Inter,system-ui,sans-serif;cursor:pointer;min-height:40px;}
.reader-navigation button:disabled{opacity:.45;cursor:default;}
.reader-motion-label{max-width:330px;min-width:100px;font:500 12px/1.5 Inter,system-ui,sans-serif;color:#345340;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.reader-navigation button:focus-visible{outline:3px solid #a8752b;outline-offset:3px;}
.reader-arrival{outline:2px solid #8bab66;outline-offset:5px;animation:reader-arrive 2.4s ease-out;}
@keyframes reader-arrive{from{outline-color:#b07b25;box-shadow:0 0 0 7px #e9ce922e;}to{outline-color:#8bab6600;box-shadow:0 0 0 0 transparent;}}
@media screen and (min-width:801px){.workspace{transition:grid-template-columns .65s ease-in-out;}}
@media screen and (max-width:800px){.sidebar{transition:transform .65s ease-in-out!important;}}
@media(max-width:640px){.reader-navigation{bottom:12px;left:12px;transform:none;max-width:calc(100vw - 80px);gap:6px;padding:6px;}.reader-motion-label{min-width:0;max-width:130px;font-size:11px;}.reader-navigation button{font-size:12px;padding:7px 8px;}}
@media(prefers-reduced-motion:reduce){.reader-arrival{animation:none;} .workspace,.sidebar{transition:none!important;}}
@media print{.reader-navigation{display:none!important;}.reader-arrival{outline:none;box-shadow:none;}}

/* Keep history controls in the sticky navigation's measured layout,
   rather than floating over paragraphs at the bottom of the viewport. */
@media screen {
 .reader-navigation.reader-navigation-docked { position: static; transform: none; width: fit-content; max-width: 100%; margin: 0 0 6px auto; padding: 4px 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
 .reader-navigation-docked button { min-height: 32px; padding: 5px 10px; }
 .reader-navigation-docked .reader-motion-label { max-width: 260px; }
 html.has-quick-navigation body { padding-bottom: 0; }
}
@media screen and (max-width: 640px) {
 .reader-navigation.reader-navigation-docked { margin: 0 0 4px; gap: 6px; }
 .reader-navigation-docked .reader-motion-label { max-width: 120px; }
}

/* Make navigation immediately recognizable to a first-time reader. */
@media screen {
 #quick-navigation { background: #edf3e6; border-top: 3px solid #89a65c; border-bottom: 1px solid #b4c9a3; box-shadow: 0 4px 12px #173e3214; padding-block: 4px; display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 3px 8px; }
 .navigation-heading { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; margin: 0; grid-column: 1; grid-row: 1; color: #36563e; font-size: 12px; line-height: 1.5; }
 .navigation-heading strong { padding: 2px 7px; border-radius: 5px; background: #214f3b; color: #fff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
 #quick-navigation .quick-navigation-links { grid-column: 2; grid-row: 1; min-width: 0; gap: 6px; padding: 2px 0; }
 .navigation-heading > span { font-size: 10px; line-height: 1.2; white-space: nowrap; }
 #quick-navigation .quick-navigation-links a { padding: 6px 10px; border: 1px solid #b5c7ab; background: #fffef9; color: #264d39; box-shadow: 0 1px 2px #173e3210; font-weight: 700; }
 #quick-navigation .quick-navigation-links a:hover { background: #dfeccf; border-color: #5a8144; }
 #quick-navigation .quick-navigation-links a[aria-current="location"] { background: #204e3b; border-color: #204e3b; color: #fff; box-shadow: inset 0 -4px #ccdc85; }
 #quick-navigation .quick-navigation-links a:focus-visible,
 #quick-navigation button:focus-visible { outline: 3px solid #a46b16; outline-offset: 2px; }
 #quick-navigation .mobile-contents-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 5px 10px; border: 2px solid #577a43; border-radius: 8px; background: #e3eebd; color: #244632; font: 700 13px/1.5 Inter,system-ui,sans-serif; cursor: pointer; }
 #quick-navigation .quick-navigation-hint { display: none; margin: 2px 0 4px; font-size: 11px; font-weight: 600; color: #47613c; }
 #quick-navigation.has-more-topics .quick-navigation-hint { display: none; }
 #quick-navigation .reader-navigation-docked { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; grid-column: 1 / -1; grid-row: 2; align-items: center; gap: 8px; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; padding: 4px 8px; background: #214f3b; border: 1px solid #214f3b; border-radius: 9px; }
 .reader-navigation-caption { color: #d9e9ba; font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
 #quick-navigation .reader-navigation-docked button { min-height: 30px; padding: 4px 10px; background: #e2ecaf; border: 1px solid #e2ecaf; color: #1b402e; font-size: 13px; font-weight: 750; }
 #quick-navigation .reader-navigation-docked button:hover:not(:disabled) { background: #f1f7cf; box-shadow: 0 0 0 2px #f1f7cf40; }
 #quick-navigation .reader-navigation-docked button:disabled { opacity: 1; background: #365e4c; border-color: #64816d; color: #b9ccbc; }
 #quick-navigation .reader-navigation-docked .reader-motion-label { color: #f0f6e7; max-width: none; min-width: 0; font-size: 12px; }
}
@media screen and (max-width: 640px) {
 #quick-navigation { padding-block: 4px; grid-template-columns: 76px minmax(0,1fr); gap: 3px 6px; }
 .navigation-heading { gap: 2px; font-size: 11px; margin: 0; }
 .navigation-heading strong { font-size: 10px; }
 #quick-navigation .quick-navigation-links a { padding: 6px 10px; }
 #quick-navigation .reader-navigation-docked { grid-template-columns: auto minmax(0,1fr) auto; gap: 6px; padding: 4px 6px; }
 .reader-navigation-caption { display: none; }
 #quick-navigation .reader-navigation-docked button { font-size: 12px; padding: 4px 9px; }
 #quick-navigation .reader-navigation-docked .reader-motion-label { font-size: 11px; }
}

/* Reduce chrome without shrinking reading text. */
@media screen {
 .topbar .topbar-inner { min-height: 52px; padding-block: 5px; }
 .document-toolbar { padding-block: 6px; gap: 8px; }
}
@media screen and (max-width: 640px) {
 .topbar .topbar-inner { min-height: 48px; padding-block: 4px; }
 .document-toolbar { padding-block: 5px; }
}

/* Chapter tabs belong at the start of the page, outside the sticky reading area. */
@media screen {
 #quick-navigation { position: static; top: auto; z-index: auto; }
 .header-contents-toggle { display: none; }
}
@media screen and (max-width: 800px) {
 .header-contents-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 9px; border: 1px solid #93ad75; border-radius: 7px; background: #e3eebd; color: #244632; font: 650 12px/1.5 Inter,system-ui,sans-serif; white-space: nowrap; cursor: pointer; }
 .header-contents-toggle:focus-visible { outline: 3px solid #a46b16; outline-offset: 2px; }
}
@media print { .header-contents-toggle { display: none; } }
@media screen and (max-width: 380px) {
 .topbar .brand { width: 80px; }
 .topbar .header-tools { gap: 4px; }
 .header-contents-toggle { padding-inline: 7px; font-size: 11px; }
}

/* Slim chapter tabs stay above the text; history controls share the logo header. */
@media screen {
 #quick-navigation { position: sticky; top: var(--quick-header-height, 52px); z-index: 25; display: block; padding-block: 2px; background: #fbfcf8d9; backdrop-filter: blur(8px); border-top: 0; border-bottom: 1px solid #c6d3bd; box-shadow: none; }
 #quick-navigation .navigation-heading,
 #quick-navigation .quick-navigation-hint { display: none; }
 #quick-navigation .quick-navigation-links { padding: 1px 0; gap: 4px; scrollbar-width: none; }
 #quick-navigation .quick-navigation-links::-webkit-scrollbar { display: none; }
 #quick-navigation .quick-navigation-links a { padding: 4px 9px; border: 1px solid transparent; border-radius: 5px; background: transparent; box-shadow: none; font-size: 12px; line-height: 1.5; }
 #quick-navigation .quick-navigation-links a[aria-current="location"] { background: #dfeacb99; color: #204e3b; border-color: #b4c7a3; box-shadow: inset 0 -2px #6d8f50; }
 #quick-navigation .quick-navigation-links a:hover { background: #e3edda99; }
 .reader-navigation.reader-navigation-header { position: static; transform: none; display: flex; flex: 0 0 auto; align-items: center; gap: 4px; width: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
 .reader-navigation-header .reader-navigation-caption { display: none; }
 .reader-navigation-header .reader-motion-label { position: absolute; width: 1px; height: 1px; min-width: 0; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .reader-navigation.reader-navigation-header button { min-height: 26px; padding: 3px 7px; border: 1px solid #b6c7ac; border-radius: 5px; background: transparent; color: #315540; font-size: 11px; line-height: 1.5; }
 .reader-navigation.reader-navigation-header button:hover:not(:disabled) { background: #e5eedb88; }
 .reader-navigation.reader-navigation-header button:disabled { opacity: .35; }
}
@media screen and (max-width: 800px) {
 .header-contents-toggle { min-height: 28px; width: 28px; padding: 0; background: transparent; font-size: 16px; }
 .reader-navigation.reader-navigation-header button { width: 26px; height: 26px; min-height: 26px; padding: 0; font-size: 0; }
 .reader-navigation-header .reader-previous::after { content: '←'; font-size: 16px; }
 .reader-navigation-header .reader-next::after { content: '→'; font-size: 16px; }
 .topbar .header-tools { gap: 5px; }
}
@media screen and (max-width: 380px) {
 .topbar .brand { width: 72px; }
 .topbar .header-tools { gap: 3px; }
 .topbar .view-switch button { font-size: 10px; padding: 4px; }
}