/* Five destinations in the existing header. The browser owns the bottom edge. */
body[data-app-page] {
  --app-nav-height: env(safe-area-inset-bottom, 0px);
  --app-nav-space: env(safe-area-inset-bottom, 0px);
  --nav: env(safe-area-inset-bottom, 0px);
}
body[data-app-page="tv"] #app {
  --nav: env(safe-area-inset-bottom, 0px);
  --nav-h: var(--nav);
}
body[data-app-page="home"] .post-copy,
body[data-app-page="home"] .home-reactions { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
body[data-app-page="home"] .masthead { justify-content: flex-start; gap: 6px; }
body[data-app-page="home"] #home-language { margin-inline-start: auto; }
body[data-app-page="profile"] .profile-v3 { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
body[data-app-page="discover"] #discovery { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* The original headers reserve their columns for two actions. Give the menu a real column. */
body[data-app-page] .has-section-menu {
  display: flex !important; align-items: center; flex-wrap: nowrap; gap: 6px;
}
body[data-app-page] .has-section-menu > .app-page-name {
  display: block; min-width: 0; flex: 1 1 auto; margin-inline-end: auto;
}
body[data-app-page="discover"] .brandline.has-section-menu > .app-page-name { display: block; }
body[data-app-page] .has-section-menu > .app-language { order: 1; }
body[data-app-page] .has-section-menu > :is(.discover-search-trigger, .features-search-toggle) { order: 2; }
body[data-app-page] .has-section-menu > .section-controls { flex: 0 0 auto; width: auto; }
body[data-app-page] .has-section-menu > .rd-identity { flex: 1; min-width: 0; }
body .section-controls {
  position: static; display: inline-flex; flex: 0 0 auto; align-items: center;
  gap: 4px; order: 8; pointer-events: auto;
}
body[data-app-page] :is(.section-toggle, .section-tv) {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; margin: 0;
  border: 1px solid var(--color-hairline, #ffffff2b); border-radius: 50%;
  background: var(--app-surface, #19191b); color: var(--app-text, #fff);
  font: 600 13px/1 var(--app-font, sans-serif); text-decoration: none; cursor: pointer; touch-action: manipulation;
}
body[data-app-page="home"] :is(.section-toggle, .section-tv) { background: #121315e8; color: #fff; }
body[data-app-page="reader"] .section-toggle { color: var(--rd-ink, #191919); background: var(--rd-paper, #fafafa); border-color: #8885; }
body .section-toggle svg, body .section-close svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7;
}
body #section-menu {
  box-sizing: border-box; position: fixed; inset: auto; top: var(--section-top, 62px);
  right: var(--section-right, 12px); margin: 0; width: min(242px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--section-top, 62px) - 12px); overflow: auto; overscroll-behavior: contain;
  padding: 7px; border: 1px solid #ffffff2e; border-radius: 18px; background: #19191b;
  color: #fafafa; font-family: var(--app-font, sans-serif); box-shadow: 0 12px 42px #0006;
}
body #section-menu:not([open]) { display: none; }
#section-menu::backdrop { background: rgb(0 0 0 / .25); }
.section-menu-head { display: flex; align-items: center; justify-content: space-between; padding-left: 12px; }
.section-menu-head strong { color: #eee; font-size: 16px; }
body #section-menu .section-close {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
}
body #section-routes { position: static; display: grid; gap: 2px; width: 100%; padding: 0; margin: 0; }
body #section-routes a {
  display: flex; align-items: center; gap: 13px; box-sizing: border-box; min-height: 44px;
  padding: 8px 12px; border-radius: 10px; color: #f5f5f5; text-decoration: none; font-size: 15px;
}
body #section-routes a[aria-current="page"], body #section-routes a:hover { background: #ffffff12; }
body #section-routes svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:is(.section-controls, #section-menu) :focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
@media (max-width: 390px) {
  body[data-app-page="profile"] .profile-top-actions :is(.app-language, .app-labeled-control) {
    min-width: 44px; width: 44px; height: 44px; padding: 0; justify-content: center;
  }
  body[data-app-page="profile"] .profile-top-actions :is(.app-language, .app-labeled-control) span { display: none; }
}
@media (max-width: 359px) {
  body[data-app-page="home"] .masthead { gap: 4px; }
  body[data-app-page="home"] #home-language, body[data-app-page="discover"] #discover-switchlang,
  body[data-app-page="features"] .features-header .app-language {
    display: inline-flex; justify-content: center; width: 44px; min-width: 44px; padding: 0;
  }
  body[data-app-page="home"] #home-language span, body[data-app-page="discover"] #discover-switchlang span,
  body[data-app-page="features"] .features-header .app-language span { display: none; }
  body[data-app-page="reader"] .rd-identity { flex: 1; min-width: 0; overflow: hidden; }
}

/* Stable two-row navigation, flush with the viewport. */
body.has-top-navigation { --section-row:56px; --section-tabs:54px; --section-height:calc(var(--section-row) + var(--section-tabs) + env(safe-area-inset-top,0px)); }
body .primary-shell { position:fixed; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--app-width,480px); z-index:70; padding-top:env(safe-area-inset-top,0px); background:var(--glass-surface,rgba(20,20,20,.92)); -webkit-backdrop-filter:blur(var(--glass-blur,12px)) saturate(120%); backdrop-filter:blur(var(--glass-blur,12px)) saturate(120%); color:var(--color-text-primary); border-bottom:1px solid var(--color-hairline); transition:transform var(--duration-panel,220ms) var(--ease-out); }
body[data-app-page] .primary-shell .section-brand-row { position:relative!important; inset:auto!important; width:100%!important; height:56px!important; min-height:56px!important; padding:6px var(--app-gutter)!important; margin:0!important; display:flex!important; align-items:center; gap:8px; background:transparent!important; border:0; border-radius:0; pointer-events:auto; opacity:1!important; visibility:visible!important; backdrop-filter:none!important; }
body .primary-shell .section-page-title { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
body .primary-shell .section-controls { display:none; }
body .primary-shell .app-brand { flex:1 1 auto!important; min-width:70px; width:auto!important; margin:0 auto 0 0!important; }
body .primary-shell .app-brand img { width:130px!important; height:auto!important; max-height:40px!important; }
body[data-app-page] .primary-shell :is(.app-language,.app-icon) { color:var(--color-text-primary); }
body .section-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); height:54px; padding:0 7px; margin:0; gap:0; }
body .section-tabs a { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:48px; border:0; border-radius:0; padding:4px 0 6px; color:var(--color-text-secondary); font:500 10.5px/1.2 var(--app-font); text-decoration:none; touch-action:manipulation; }
body .section-tabs svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
body .section-tabs a[aria-current] { color:var(--color-text-primary); font-weight:650; }
body .section-tabs a[aria-current]:after { content:''; position:absolute; bottom:0; width:22px; height:2px; background:var(--color-accent); border-radius:2px; }
body .section-tabs a:active { background:var(--color-surface); }
body .primary-shell :focus-visible { outline:2px solid var(--color-accent); outline-offset:-3px; }
body[data-app-page='discover'].has-top-navigation #discovery { padding-top:calc(var(--section-height) + 6px); }
body[data-app-page='discover'].has-top-navigation .topbar { position:static; background:transparent; border:0; padding-top:0; backdrop-filter:none; }
body[data-app-page='discover'] .searchbox { display:flex!important; height:44px; min-height:44px; margin-bottom:0; border:1px solid var(--color-hairline); background:var(--color-surface); }
body[data-app-page='discover'] #discover-search-toggle { display:none; }
body[data-app-page='discover'] .filters { height:44px; padding-top:0; padding-bottom:0; }
body[data-app-page='discover'] .curation-heading { display:none; }
body[data-app-page='discover'] .discover-curation { padding-top:8px; }
body[data-app-page='features'].has-top-navigation .features-shell, body[data-app-page='profile'].has-top-navigation .profile-v3 { padding-top:calc(var(--section-height) + 12px); }
body[data-app-page='home'] .primary-shell, body[data-app-page='tv'] .primary-shell { position:absolute; }
body[data-app-page='home'].has-top-navigation .chrome-head { display:none; }
body[data-app-page='home'].has-top-navigation .post-media { top:var(--section-height); }
/* Media starts immediately below the fixed navigation. */
body[data-app-page='home'] .gallery-hint { display:none; }
body[data-app-page='home'].has-top-navigation .home-video-toggle { z-index:8; }
/* Profile remains editable in Settings; Saved is the obvious primary purpose. */
body[data-app-page='profile'] .profile-heading { padding:20px 0; }
body[data-app-page='profile'] .profile-avatar { width:42px; height:42px; }
body[data-app-page='profile'] .profile-kicker { display:none; }
body[data-app-page='profile'] .profile-library-title { font:650 25px/1.2 var(--app-font); margin:0 0 7px; letter-spacing:-.6px; }
body[data-app-page='profile'] .profile-subtitle { font-size:13px; }
body[data-app-page='profile'] .profile-empty { padding:28px 12px 30px; }
body[data-app-page='profile'] .profile-empty p { font-size:14px; }
/* Articles use an editorial cover and readable type, distinct from music cards. */
body[data-app-page='features'] .features-hero { background:transparent; border-radius:0; margin-top:15px; overflow:visible; }
body[data-app-page='features'] .features-hero-link { min-height:0; aspect-ratio:auto; display:flex; flex-direction:column; }
body[data-app-page='features'] .features-hero-image { position:static; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:center 30%; border-radius:12px; z-index:auto; }
body[data-app-page='features'] .features-hero-link:after { display:none; }
body[data-app-page='features'] .features-hero-copy { position:static; padding:18px 0 0; }
body[data-app-page='features'] .features-hero .features-eyebrow { color:var(--color-text-secondary); text-shadow:none; }
body[data-app-page='features'] .features-hero h2 { font-size:27px; line-height:1.16; margin:9px 0 12px; text-wrap:pretty; }
body[data-app-page='features'] .features-heading { margin-bottom:12px; }
body[data-app-page='features'] .features-section { margin-top:28px; }

@media(max-width:359px) { body .primary-shell .section-brand-row { gap:4px; padding-inline:12px!important; } body .primary-shell .app-brand img { width:112px!important; } body .section-tabs a { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { body .primary-shell { transition:none; } }
body .primary-shell svg { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
body[data-app-page] .primary-shell .section-brand-row > :is(.section-search,.features-search-toggle) { order:1; }
body[data-app-page] .primary-shell .section-brand-row > .app-language { order:2; }

body[data-app-page='features'] .features-card .features-card-link { display:grid; grid-template-columns:84px minmax(0,1fr); gap:15px; }
body[data-app-page='features'] .features-card .features-card-photo { aspect-ratio:4/5; max-height:112px; border-radius:8px; }
body[data-app-page='features'] .features-card .features-card-copy { padding:0 0 28px; min-height:105px; }
body[data-app-page='features'] .features-card h3 { font-size:16px; line-height:1.3; margin:7px 0; }
body[data-app-page='features'] .features-card .features-eyebrow { font-size:10px; }
body[data-app-page='features'] .features-card > .features-save { bottom:12px; top:auto; }
body[data-app-page='profile'] .primary-shell #profile-settings-button { width:auto; padding:0 10px; gap:7px; flex:none; }
body[data-app-page='profile'] .primary-shell #profile-settings-button span { display:inline; font-size:12px; }
body[data-app-page='profile'] .primary-shell .profile-top-actions { order:2; }
body .section-tabs, body .section-tabs a { box-sizing:border-box; }

body .primary-shell .features-search-toggle svg { width:20px; height:20px; }

/* Keep local filters secondary and close to the visible search. */
body[data-app-page='discover'] .filters button { min-height:44px; padding-block:0; }
body[data-app-page='discover'] .listening-track { margin-top:6px; }
/* Saved writing should be easy to recognise, with its full title. */
body[data-app-page='profile'] .profile-card:is([data-content-type='article'],[data-content-type='news']) { grid-column:1 / -1; padding-bottom:12px; border-bottom:1px solid var(--color-hairline); }
body[data-app-page='profile'] .profile-card:is([data-content-type='article'],[data-content-type='news']) .profile-card-main { display:grid; grid-template-columns:76px minmax(0,1fr); column-gap:14px; align-content:start; padding-right:25px; min-height:100px; }
body[data-app-page='profile'] .profile-card:is([data-content-type='article'],[data-content-type='news']) .profile-card-image { grid-column:1; grid-row:1 / 5; width:76px; height:100px; aspect-ratio:auto; margin:0; }
body[data-app-page='profile'] .profile-card:is([data-content-type='article'],[data-content-type='news']) :is(.profile-card-category,.profile-card-title,.profile-card-artist) { grid-column:2; }
body[data-app-page='profile'] .profile-card:is([data-content-type='article'],[data-content-type='news']) .profile-card-title { display:block; -webkit-line-clamp:unset; overflow:visible; font-size:15px; line-height:1.35; }
body[data-app-page='profile'] .profile-card:is([data-content-type='article'],[data-content-type='news']) .profile-card-action { bottom:6px; }

/* One optical layer, with the same contrast when blur is unavailable or reduced. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 body .primary-shell { background:var(--color-surface,#151515); }
}
@media(prefers-reduced-transparency:reduce) {
 body .primary-shell { background:var(--color-surface,#151515); backdrop-filter:none; -webkit-backdrop-filter:none; }
}