/* Shared identity: the original animated oak, without a wordmark. */
.masthead .brand,#reader .reader-brand{gap:12px;letter-spacing:0;text-decoration:none;color:var(--ink);flex-shrink:0}
.intro .eyebrow{font:400 13px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.04em}
.masthead .private-label{font:400 13px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.02em}

/* Reader navigation. The guide's typography and the dimensional book stay intact. */
#reader .reader-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:'brand actions back';align-items:center;gap:20px;height:80px;min-height:80px;padding:0 0 16px;margin-bottom:24px;letter-spacing:0}
#reader .reader-brand{grid-area:brand;display:flex;align-items:center}
#reader .reader-brand .tree-logo{width:66px;height:60px}
#reader .reader-brand:focus-visible{outline:1px solid currentColor;outline-offset:4px;border-radius:4px}
#reader .reader-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;width:auto;height:auto;gap:12px;margin:0}
#reader .reader-toolbar #reader-random{order:0;margin:0;min-height:44px;padding:9px 16px}
#reader .reader-toolbar #save-book{order:1;min-height:44px;min-width:154px;padding:9px 16px;gap:8px}
#reader .reader-toolbar .save-button span{font:inherit;letter-spacing:0;margin:0}
#reader .reader-toolbar .save-label-short{display:none}
#reader .reader-toolbar .save-button svg{width:18px;height:18px}
#reader .reader-toolbar .save-button[aria-pressed=true] svg{fill:currentColor}
#reader .reader-toolbar .theme-compact{order:2;flex:none;width:44px;height:44px;min-width:44px;padding:0;justify-content:center}
#reader .reader-toolbar #close-reader{grid-area:back;margin:0;padding:0;min-height:44px;white-space:nowrap}
#reader .reader-toolbar #close-reader .return-label{font:inherit}
/* Icon geometry and text line boxes share one centered, 44px control row. */
#reader .reader-toolbar button{display:inline-flex;align-items:center;justify-content:center;height:44px;line-height:20px}
#reader .reader-toolbar button svg{display:block;flex:none;width:18px;height:18px}
#reader .reader-toolbar #close-reader .return-arrow{width:20px;height:20px}
#reader .reader-toolbar .save-button:focus-visible{outline:2px solid currentColor;outline-offset:3px;text-decoration:none}

@media(max-width:900px) and (min-width:681px){
 #reader .reader-toolbar{grid-template-columns:1fr auto;grid-template-areas:'brand back' 'actions actions';grid-template-rows:60px 44px;height:136px;min-height:136px;gap:12px;padding-bottom:20px}
 #reader .reader-actions{justify-content:flex-end}
}
@media(max-width:680px){
 .masthead .brand{gap:8px}
 #reader .reader-toolbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'brand back' 'actions actions';grid-template-rows:56px 48px;gap:8px 12px;height:calc(124px + env(safe-area-inset-top,0px));min-height:calc(124px + env(safe-area-inset-top,0px));margin:0;padding:calc(env(safe-area-inset-top,0px) + 4px) max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
 #reader .reader-brand{gap:8px}
 #reader .reader-brand .tree-logo{width:49px;height:44px}
 #reader .reader-actions{width:100%;height:48px;gap:10px;justify-content:flex-end}
 #reader .reader-toolbar #reader-random{flex:1;justify-content:center;padding:9px 12px}
 #reader .reader-toolbar #save-book{flex:1;min-width:94px;padding:9px 12px}
 #reader .reader-toolbar .save-label{display:none}
 #reader .reader-toolbar .save-label-short{display:inline}
 #reader .reader-toolbar #close-reader{justify-content:flex-end;padding-left:8px}
 #reader .right-page{min-height:calc(100dvh - 124px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
}