/* PianoPi global responsive application shell.
   One place controls viewport layout, header, content and footer for all primary pages. */
:root {
  --pp-shell-width: 1168px;
  --pp-shell-gap: 8px;
  --pp-shell-edge: 8px;
  --pp-shell-footer-height: 44px;
  --pp-shell-header-min: 64px;
  --pp-control-radius: 12px;
  --pp-card-radius: 16px;
  --pp-surface-radius: 22px;
}
html.pp-shell-active,
html.pp-shell-active body {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  overflow: hidden !important;
}
.pp-app-shell.pp-global-shell {
  position: fixed !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  width: min(calc(100% - (2 * var(--pp-shell-edge))), var(--pp-shell-width)) !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: var(--pp-shell-edge) 0 calc(var(--pp-shell-edge) + env(safe-area-inset-bottom, 0px)) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: var(--pp-shell-gap) !important;
  overflow: hidden !important;
}
.pp-app-shell.pp-global-shell > .pp-page-header {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: var(--pp-shell-header-min) !important;
  height: auto !important;
  max-height: 112px !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.pp-app-shell.pp-global-shell > .pp-app-content {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.pp-app-shell.pp-global-shell > .pp-page-footer {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: var(--pp-shell-footer-height) !important;
  height: var(--pp-shell-footer-height) !important;
  margin: 0 !important;
  align-self: end;
}
.pp-global-footer {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 14px !important;
  background: #17212b !important;
  color: #f7f9fb !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.14) !important;
}
.pp-global-footer :is(a,button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px !important;
  padding: 4px 9px !important;
  border-radius: var(--pp-control-radius) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: #f4efe7 !important;
  color: #17212b !important;
  text-decoration: none !important;
  font: inherit;
  font-size: .68rem !important;
  font-weight: 800 !important;
  cursor: pointer;
}
.pp-global-footer .pp-footer-status {
  min-width: 0;
  text-align: center;
  color: #f0f4f7 !important;
  font-size: .66rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-global-footer .pp-footer-brand {
  color: #ffffff;
  font-family: var(--pp-title-font, Georgia, serif);
  font-size: .78rem;
  font-weight: 800;
}
/* Low-GFX has a generic blue link rule with higher specificity.
   Keep footer actions high-contrast even on the TrekStor profile. */
html.lowgfx .pp-global-footer a,
html.lowgfx .pp-global-footer button {
  background: #f4efe7 !important;
  color: #17212b !important;
}
body[data-pp-footer-mode="karaoke"] .pp-app-content { overflow: hidden !important; }
html.pp-legacy-android-webview .pp-app-shell.pp-global-shell { bottom: 48px !important; }
@media (max-width: 760px) {
  :root { --pp-shell-edge: 6px; --pp-shell-gap: 6px; --pp-shell-footer-height: 42px; }
  .pp-app-shell.pp-global-shell > .pp-page-header {
    min-height: 70px !important;
    max-height: 96px !important;
    padding: 9px 10px !important;
  }
  .pp-app-shell.pp-global-shell > .pp-page-header h1 { font-size: clamp(1.7rem, 6vw, 2.15rem) !important; }
  .pp-global-footer { grid-template-columns: auto minmax(0,1fr) auto !important; }
  .pp-global-footer :is(a,button) { padding-inline: 7px !important; font-size: .64rem !important; }
}
@media (orientation: landscape) and (max-height: 700px) {
  :root { --pp-shell-edge: 5px; --pp-shell-gap: 5px; --pp-shell-footer-height: 38px; --pp-shell-header-min: 54px; }
  .pp-app-shell.pp-global-shell > .pp-page-header {
    min-height: 54px !important;
    max-height: 64px !important;
    padding: 6px 10px !important;
  }
  .pp-app-shell.pp-global-shell > .pp-page-header h1 { font-size: 1.5rem !important; line-height: 1 !important; }
  .pp-app-shell.pp-global-shell > .pp-page-header :is(.muted,.intro,.lead,.play-page-subtitle) { font-size: .68rem !important; line-height: 1.1 !important; }
  .pp-global-footer { padding-block: 3px !important; }
  .pp-global-footer :is(a,button) { min-height: 27px !important; }
}
@media (max-width: 520px) {
  .pp-global-footer .pp-footer-status { display: none; }
  .pp-global-footer { grid-template-columns: 1fr 1fr !important; }
  .pp-global-footer .pp-footer-brand { display: none; }
}


/* Mask the old WebView document during same-origin navigation on legacy tablets. */
html.pp-navigating::after{content:"";position:fixed;inset:0;z-index:2147483647;background:#f4f1ea;pointer-events:all}

/* PIANOPI_UI_CONSOLIDATION_20260930
   The outer chrome is identical on every primary page. Home lives in the footer;
   header navigation is reserved for contextual Back/Module actions. */
.pp-app-shell.pp-global-shell > .pp-page-header{
  min-height:82px!important;
  max-height:96px!important;
  padding:12px 16px!important;
  border-radius:20px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.pp-app-shell.pp-global-shell > .pp-page-header > :first-child{min-width:0}
.pp-app-shell.pp-global-shell > .pp-page-header h1{
  margin:0!important;
  font-size:clamp(1.75rem,3.3vw,2.35rem)!important;
  line-height:1!important;
}
.pp-page-header .pp-global-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin:0 0 0 auto!important;
  width:auto!important;
  max-width:52%!important;
}
.pp-page-header .pp-global-nav :is(a,button){
  min-height:34px!important;
  padding:6px 10px!important;
  border-radius:var(--pp-control-radius)!important;
  font-size:.76rem!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
.pp-page-header :is(.pp-nav-home,[data-pp-nav-home]),
.pp-page-header .pp-header-home-duplicate{display:none!important}
.pp-global-footer :is(.pp-footer-home,.pp-footer-settings,.pp-footer-module){white-space:nowrap!important}
body[data-pp-footer-mode="karaoke"] .pp-global-footer{
  grid-template-columns:auto auto minmax(0,1fr) auto!important;
}
@media(max-width:760px){
  .pp-app-shell.pp-global-shell > .pp-page-header{
    min-height:74px!important;
    max-height:none!important;
    padding:9px 11px!important;
    border-radius:16px!important;
    align-items:center!important;
  }
  .pp-app-shell.pp-global-shell > .pp-page-header h1{font-size:clamp(1.45rem,6vw,1.95rem)!important}
  .pp-page-header .pp-global-nav{max-width:48%!important;gap:4px!important}
  .pp-page-header .pp-global-nav :is(a,button){min-height:30px!important;padding:5px 8px!important;font-size:.68rem!important}
  .pp-global-footer :is(a,button){min-height:30px!important}
}
@media(max-width:620px){
  body[data-pp-footer-mode="karaoke"] .pp-global-footer{grid-template-columns:1fr 1fr 1fr!important}
  body[data-pp-footer-mode="karaoke"] .pp-global-footer .pp-footer-status{display:none!important}
  body[data-pp-footer-mode="karaoke"] .pp-global-footer :is(a,button){min-width:0!important;padding-inline:5px!important;font-size:.58rem!important}
}
@media(orientation:landscape) and (max-height:700px){
  .pp-app-shell.pp-global-shell > .pp-page-header{
    min-height:56px!important;
    max-height:62px!important;
    padding:6px 10px!important;
    border-radius:14px!important;
  }
  .pp-app-shell.pp-global-shell > .pp-page-header h1{font-size:1.45rem!important}
  .pp-page-header .pp-global-nav :is(a,button){min-height:28px!important;padding:4px 7px!important;font-size:.66rem!important}
}


/* PIANOPI_UI_CONSISTENCY_20260930
   One radius/naming rhythm for ordinary controls; special pills/circles stay intentional. */
.pp-page-header .pp-global-nav :is(a,button),
.pp-global-footer :is(a,button),
.pp-page-shell :is(.compact-action,.mini-button,.ghost-button,.advanced-link,.track-action-link),
.song-learning-page :is(.song-library-card button,.song-learning-path button,.song-section-head button,.song-practice-head button,.song-bar-chooser button,.song-plan-actions button,.song-plan-actions a,.song-prepare-link),
.karaoke-v2-shell :is(.assistant-choice-card,.karaoke-v2-start,.karaoke-v2-transport button){
  border-radius:var(--pp-control-radius)!important;
}
.pp-global-footer.pp-footer-no-settings{grid-template-columns:auto minmax(0,1fr)!important}
.pp-global-footer.pp-footer-no-settings .pp-footer-status{text-align:right!important;padding-right:4px}