/* R3: shared Listening Atlas and a continuous route to the Apps family. */
.journey-nav{display:flex;align-items:center;gap:24px;min-height:62px;border-bottom:1px solid var(--rule);font-size:13px;color:var(--blue)}.journey-nav>a{display:flex;align-items:center;gap:8px;min-height:44px;text-decoration:none}.journey-nav>div{display:flex;align-items:center;gap:24px;margin:auto}.journey-nav button{min-height:44px}.journey-nav button[aria-current=page]{box-shadow:inset 0 -2px var(--blue)}.journey-nav .journey-ask{padding:0 17px;border:1px solid var(--blue);border-radius:4px}.atlas-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;padding:42px 0 30px}.atlas-intro h1{font:400 clamp(36px,3.8vw,56px)/1.08 var(--serif);letter-spacing:-.04em;margin:0;max-width:680px}.atlas-intro h1 em{font-weight:400;color:var(--blue)}.atlas-intro .eyebrow{margin-bottom:14px}.atlas-intro>p{font-size:14px;line-height:1.7;color:var(--muted);max-width:360px;margin:0}.atlas-beyond{display:flex;gap:30px;align-items:center;flex-wrap:wrap;padding:25px 0 32px;margin-top:14px;border-bottom:1px solid var(--rule)}.atlas-beyond>p{font:24px/1.3 var(--serif);margin-right:auto}.atlas-beyond .text-button{min-height:44px}.composer-recents{margin:15px 0 0}.app-bar [data-topics]{display:none}#atlas-title:focus:not(:focus-visible){outline:0}.journey-nav .journey-ask>span{margin-left:8px}
@media(max-width:1000px){.atlas-intro{align-items:flex-start}.atlas-intro h1{max-width:490px}.atlas-intro>p{max-width:250px}.journey-nav>div{gap:15px}.journey-nav{gap:14px}.journey-nav [data-mobile-action=recent]{display:none}}
@media(max-width:700px){.journey-nav{min-height:48px;gap:10px;font-size:12px}.journey-nav>div,.journey-nav>.journey-ask{display:none}.journey-nav:after{content:'Interactive preview';font-size:11px;color:var(--muted);margin-left:auto}.atlas-intro{display:block;padding:23px 0 24px}.atlas-intro .eyebrow{font-size:10px;margin-bottom:13px}.atlas-intro h1{font-size:38px;max-width:410px;line-height:1.09}.atlas-intro>p{font-size:14px;line-height:1.6;max-width:100%;margin-top:14px}.atlas-intro>p br{display:none}.atlas-beyond{display:block;padding:20px 0;margin-top:5px}.atlas-beyond>p{font-size:24px;margin:0 0 8px}.atlas-beyond .text-button{display:flex;justify-content:space-between;width:100%;font-size:14px;padding-block:10px}.la-shell{--la-sticky-top:64px}.page-footer{border-top:0}.composer-recents{font-size:13px;min-height:44px}.mobile-dock>button[aria-current=page]{color:var(--blue)}}
@media(max-width:360px){.atlas-intro h1{font-size:34px}}
@media(max-width:700px){.atlas-intro{padding:18px 0}.atlas-intro .eyebrow{display:none}.atlas-intro h1{font-size:31px;max-width:350px}.atlas-intro>p{font-size:13px;line-height:1.5;margin-top:10px}.la-atlas.la-compact .la-edition{max-width:90px}}

/* Privacy preferences remain reachable at every viewport. */
.page-footer [data-privacy-settings]{min-height:44px}

/* Live site integration (17 October 2026). The page also loads the site stylesheets for Header C and the privacy
   component. /site.css styles bare buttons, headings, paragraphs and links for the editorial pages; inside
   Audiopedia those values return to the browser defaults the app was designed on. :where() keeps each rule at
   element specificity, so every class rule of app.css, visuals.css and atlas.css still applies. */
:where(.app-shell,.query-box,.ap-dialog,.mobile-dock,.toast) button{min-height:revert;display:revert;align-items:revert;justify-content:revert;gap:revert;padding:revert;border-radius:revert}
:where(.app-shell,.query-box,.ap-dialog,.mobile-dock,.toast) button:hover{filter:revert}
:where(.app-shell,.ap-dialog) :is(h1,h2,h3){font-size:revert;font-weight:revert;letter-spacing:revert;line-height:revert;margin-top:revert;margin-bottom:revert}
:where(.app-shell,.ap-dialog) p{margin-top:revert}
:where(.app-shell,.ap-dialog) a{text-decoration:revert}
:where(.app-shell,.ap-dialog) .eyebrow{line-height:revert}

/* Feedback to the Studio inbox: the optional reply address matches the note field. */
.correction-form input{display:block;width:100%;min-height:44px;margin:0;border:1px solid #aebfc2;padding:10px 12px;border-radius:3px;background:white;color:var(--ink);font-size:13px;box-shadow:none}
.correction-form input:focus{outline:2px solid var(--blue);outline-offset:3px}
.correction-form label span{color:var(--muted)}
.correction-form .solid-button:disabled{opacity:.6;cursor:progress}
@media(max-width:700px){.correction-form input{font-size:16px;min-height:48px}}

/* Dark appearance. site.js applies a stored dark preference on every page (no page opts out). Audiopedia has no
   dark design: its paper surfaces, diagrams and Atlas artwork stay light, with light native controls, while
   Header C uses its own dark styles. The shared privacy banner and dialog keep the site's own text colours
   (app.css redefines --ink and --muted for the app). */
html[data-theme=dark] :is(.app-shell,.query-box,.ap-dialog,.mobile-dock,.toast){color-scheme:light}
:is(.tsl-privacy-banner,.tsl-privacy-dialog){--ink:#1d1d1f;--muted:#626268}
html[data-theme=dark] :is(.tsl-privacy-banner,.tsl-privacy-dialog){--ink:#f5f5f7;--muted:#b3b3bb}