/* Website and installed app share their content, with distinct navigation and scrolling. */
html[data-view="web"] .app-only,
html[data-view="app"] .web-only,
html[data-installed="true"] .install-button { display: none !important; }

.site-header-inner { display: flex; align-items: center; gap: 28px; width: 100%; }
.presentation-actions, .footer-links, .auth-version { display: flex; align-items: center; gap: 20px; }
.presentation-actions { margin-left: auto; }
.version-link { color: #c2c4ce; font-size: 12px; text-decoration: none; white-space: nowrap; }
.version-link:hover { color: var(--acc); }
.website-menu, .install-button { border: 1px solid #ffffff24; border-radius: 10px; background: transparent; color: inherit; padding: 10px 14px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.website-menu span { margin-left: 12px; color: var(--acc); }
.install-button { background: var(--acc); color: #0a0a0f; border-color: transparent; }
.auth-version { position: absolute; top: 24px; right: 28px; }
.auth-shell { padding-top: 88px; }
.workspace-status { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #9296a3; font-size: 11px; }
.skip-link { position: fixed; top: 12px; left: 12px; transform: translateY(-150%); z-index: 900; padding: 12px 20px; border-radius: 8px; background: var(--acc); color: #0a0a0f; }
.skip-link:focus { transform: none; }

html[data-view="web"], html[data-view="web"] body { height: auto; min-height: 100%; overflow: visible; overscroll-behavior: auto; }
html[data-view="web"] body { scrollbar-gutter: stable; }
html[data-view="web"] #app { position: relative; inset: auto; width: 100%; max-width: none; min-height: 100dvh; box-shadow: none; margin: 0; }
html[data-view="web"] .account-bar { position: sticky; top: 0; z-index: 30; padding: 0 40px; background: var(--bg); }
html[data-view="web"] .site-header-inner { max-width: 1440px; margin: auto; min-height: 88px; }
html[data-view="web"] .app-wordmark { font-size: 27px; letter-spacing: -1.3px; }
.site-nav { display: flex; align-self: stretch; align-items: stretch; gap: 28px; margin-left: 30px; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { display: flex; align-items: center; position: relative; color: #a7abb7; text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; transition: color .16s; }
.site-nav a::after { content: ""; position: absolute; height: 2px; bottom: 0; left: 0; right: 0; background: var(--acc); transform: scaleX(0); transition: transform .16s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #f0f0f5; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
html[data-view="web"] .workspace-status { width: min(100% - 80px, 1440px); margin: 24px auto 0; }
html[data-view="web"] #screens { flex: 1; width: min(100% - 80px, 1440px); margin: 0 auto; overflow: visible; outline: none; }
html[data-view="web"] .screen { display: none; position: relative; inset: auto; overflow: visible; padding-bottom: 56px; transform: none; }
html[data-view="web"] .screen.active { display: block; animation: website-enter .2s ease-out; }
html[data-view="web"] #nav { display: none; }
html[data-view="web"] .head { position: static; padding: 30px 0 0; }
html[data-view="web"] .head-in { padding-bottom: 24px; border: 0; }
html[data-view="web"] .title { font-size: clamp(30px, 3vw, 42px); letter-spacing: -1.5px; }
html[data-view="web"] .subtitle { margin-top: 8px; color: #9da2ae; font-size: 14px; }
html[data-view="web"] .head .burger[aria-label="Menü"] { display: none; }
html[data-view="web"] .head .burger[aria-label="Filter"] { width: auto; min-height: 44px; gap: 10px; padding: 12px 18px; font-size: 13px; }
.head .burger svg { width: 20px; height: 20px; }
html[data-view="web"] #sortpills { border-bottom: 1px solid #ffffff15; padding: 0 0 18px; gap: 8px; }
html[data-view="web"] #sortpills .pill { border: 0; border-radius: 6px; background: transparent; padding: 9px 13px; }
html[data-view="web"] #sortpills .pill.active { color: var(--acc); background: rgba(var(--acc-rgb), .08); }
html[data-view="web"] .workspace-toolbar { margin: 28px 0 18px; gap: 16px; }
html[data-view="web"] .source-tabs { padding: 0; }
html[data-view="web"] .workspace-notice { margin: 24px 0 0; }
html[data-view="web"] .results-heading { padding: 28px 0 20px; }
html[data-view="web"] .listing-grid { padding: 0; gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-view="web"] .listing { border-radius: 14px; transition: border-color .18s; }
html[data-view="web"] .listing:hover { border-color: #ffffff30; }
html[data-view="web"] .listing-img { height: auto; aspect-ratio: 16 / 10; }
html[data-view="web"] .listing-body { padding: 20px; }
html[data-view="web"] .listing-title { font-size: 19px; }
html[data-view="web"] .listing-loc { color: #969caa; line-height: 1.6; }
html[data-view="web"] .sbox { border-radius: 0; background: transparent; padding: 10px 0; }
html[data-view="web"] .sbox + .sbox { border-left: 1px solid #ffffff12; padding-left: 16px; }
html[data-view="web"] .sbox-l, html[data-view="web"] .why-t { color: #9298a6; }
html[data-view="web"] .workspace-footnote { padding: 24px 0; }
/* Constrain each whole page so its heading, tabs, content and actions align. */
html[data-view="web"] #s-profil,
html[data-view="web"] #s-score { max-width: 880px; margin-inline: auto; }
html[data-view="web"] #s-bew { max-width: 1040px; margin-inline: auto; }
html[data-view="web"] :is(#s-profil, #s-score, #s-bew) > .head { padding-inline: 20px; }
html[data-view="web"] :is(#profil-body, #profil-hero, #score-body, #bew-body) { max-width: none; margin-inline: 0; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 32px; width: min(100% - 80px, 1440px); margin: auto auto 0; padding: 32px 0; border-top: 1px solid #ffffff15; }
.site-footer p { font-size: 12px; color: #9096a3; margin-top: 10px; }
.footer-links button { background: none; border: 0; color: #a7abb7; font: inherit; font-size: 12px; cursor: pointer; }
html[data-view="web"] body:has(.mbg.open, .menu.open) { overflow: hidden; }

html[data-view="app"] #app { width: 100%; max-width: 540px; }
html[data-view="app"] .site-header-inner { gap: 16px; }
html[data-view="app"] .account-bar { padding: max(12px, env(safe-area-inset-top)) 20px 12px; }
html[data-view="app"] .presentation-actions { gap: 12px; }
html[data-view="app"] .workspace-status { padding: 8px 20px; justify-content: flex-end; border-bottom: 1px solid #ffffff0c; }
html[data-view="app"] .screen { padding-bottom: 24px; scrollbar-width: thin; scrollbar-color: #454552 transparent; }
html[data-view="app"] .listing-grid { grid-template-columns: minmax(0, 1fr); }
html[data-view="app"] #nav { height: calc(74px + env(safe-area-inset-bottom, 0px)); }
html[data-view="app"] .nav-btn { color: #9a9ca9; }
html[data-view="app"] .nav-btn.active { color: var(--acc); }
html[data-view="app"] .auth-version { top: max(16px, env(safe-area-inset-top)); }
.install-help { display: grid; gap: 20px; padding-left: 20px; color: #c4c8d2; font-size: 14px; line-height: 1.7; }
.install-help strong { display: block; color: #f0f0f5; }
@keyframes website-enter { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 960px) {
  html[data-view="web"] #s-home.active { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; }
  html[data-view="web"] #home-body { display: contents; }
  html[data-view="web"] #s-home > *, html[data-view="web"] #home-body > * { grid-column: 1 / -1; }
  html[data-view="web"] #s-home .head { grid-row: 1; }
  html[data-view="web"] #s-home .workspace-toolbar { grid-row: 2; margin-top: 0; }
  html[data-view="web"] #s-home .source-tabs { grid-column: 1; grid-row: 3; align-items: center; }
  html[data-view="web"] #sortpills { grid-column: 2; grid-row: 3; border: 0; padding: 0; align-items: center; }
}
@media (max-width: 1199px) {
  html[data-view="web"] .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-nav { gap: 18px; margin-left: 0; }
  html[data-view="web"] .site-header-inner { gap: 24px; }
}
@media (max-width: 959px) {
  html[data-view="web"] .site-header-inner { flex-wrap: wrap; gap: 0; padding-top: 18px; }
  .site-nav { order: 3; width: 100%; height: 54px; overflow-x: auto; gap: 26px; }
  .site-nav a { flex-shrink: 0; }
  .presentation-actions { gap: 14px; }
}
@media (max-width: 599px) {
  html[data-view="web"] .account-bar { padding: 0 20px; }
  html[data-view="web"] .workspace-status, html[data-view="web"] #screens, .site-footer { width: calc(100% - 40px); }
  html[data-view="web"] .app-wordmark { font-size: 24px; }
  html[data-view="web"] .listing-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  html[data-view="web"] .head { padding-top: 24px; }
  html[data-view="web"] .head-in { gap: 12px; }
  html[data-view="web"] .title { font-size: 30px; }
  html[data-view="web"] .subtitle { font-size: 12px; }
  html[data-view="web"] .workspace-notice { align-items: flex-start; line-height: 1.6; }
  html[data-view="web"] .workspace-toolbar > .btn { width: 100%; }
  html[data-view="web"] .listing-body { padding: 16px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 24px; }
  .auth-version { right: 24px; }
}