/* Espaturk: web + mobile browser only. Native Android WebView excluded. */
html:not(.espaturk-native-home) #lessonList > .lesson{display:flex;flex-direction:column;min-width:0}
html:not(.espaturk-native-home) #lessonList > .lesson > .actions{margin-top:auto}
html:not(.espaturk-native-home) .xp-overview > div > strong{font-weight:800;font-variant-numeric:tabular-nums}
@media (min-width:621px){
  /* Large symbols and values with descriptions directly underneath, as approved. */
  html:not(.espaturk-native-home) .xp-overview{align-items:stretch;gap:0!important;padding:10px 14px!important}
  html:not(.espaturk-native-home) .xp-overview > div{
    display:grid!important;grid-template-columns:44px max-content!important;
    grid-template-rows:auto auto!important;column-gap:12px!important;row-gap:1px!important;
    justify-content:center!important;justify-items:start!important;align-content:center!important;
    align-items:center!important;min-height:50px!important;
  }
  html:not(.espaturk-native-home) .xp-overview > div + div{border-left:1px solid rgba(180,196,213,.35)}
  html:not(.espaturk-native-home) .xp-overview > div > span{
    grid-column:1!important;grid-row:1 / 3!important;font-size:2.25rem!important;
    line-height:1!important;align-self:center!important;text-align:center!important
  }
  html:not(.espaturk-native-home) .xp-overview > div > strong{
    grid-column:2!important;grid-row:1!important;font-size:1.55rem!important;
    line-height:1.05!important;white-space:nowrap
  }
  html:not(.espaturk-native-home) .xp-overview > div > small{
    grid-column:2!important;grid-row:2!important;font-size:.87rem!important;
    line-height:1.2!important;text-align:left!important;white-space:nowrap
  }
  /* Compact continuation panel; no forced minimum height. */
  html:not(.espaturk-native-home) .welcome{
    min-height:0!important;height:auto!important;padding:12px 24px!important;
    margin-bottom:18px!important;align-items:center!important
  }
  html:not(.espaturk-native-home) .welcome h2{margin:3px 0!important;line-height:1.2!important}
  html:not(.espaturk-native-home) .welcome p{margin:3px 0!important;line-height:1.3!important}
  html:not(.espaturk-native-home) .welcome #continue{align-self:center!important}
  html:not(.espaturk-native-home) #lessonList > .lesson > .meta{margin-top:auto}
  html:not(.espaturk-native-home) #lessonList > .lesson > .actions{margin-top:8px}
}
@media (max-width:620px){
  html:not(.espaturk-native-home) .welcome{min-height:190px;padding:19px 20px}
  html:not(.espaturk-native-home) .welcome h2{margin:8px 0;line-height:1.25}
  html:not(.espaturk-native-home) .welcome #continue{margin-top:12px}
}

/* Mobile browser XP readability only. Native Android and desktop remain unchanged. */
@media (max-width:620px){
  html:not(.espaturk-native-home) .xp-overview{
    gap:4px!important;
  }
  html:not(.espaturk-native-home) .xp-overview > div{
    min-width:0!important;
    column-gap:4px!important;
    row-gap:4px!important;
  }
  html:not(.espaturk-native-home) .xp-overview > div > span{
    font-size:1.45rem!important;
    line-height:1.1!important;
  }
  html:not(.espaturk-native-home) .xp-overview > div > strong{
    font-size:clamp(12px,3.3vw,14px)!important;
    line-height:1.15!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
  html:not(.espaturk-native-home) .xp-overview > div > small{
    font-size:.75rem!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
}

/* 2026-10-31: Web and mobile browser header spacing only.
   Preserve XP sizing, lesson cards, logo dimensions and native Android layout. */
html:not(.espaturk-native-home) .archive-header{
  row-gap:0!important;
  margin-bottom:12px!important;
}
html:not(.espaturk-native-home) .archive-header .archive-brand{
  align-self:start!important;
}
html:not(.espaturk-native-home) .archive-header #siteBrand{
  margin-top:0!important;
  margin-bottom:0!important;
}
html:not(.espaturk-native-home) .archive-header #siteSubtitle{
  margin-top:0!important;
  margin-bottom:0!important;
  line-height:1.4!important;
}
@media (min-width:621px){
  html:not(.espaturk-native-home) .archive-header #siteBrand{
    min-height:90px!important;
  }
}
@media (max-width:620px){
  html:not(.espaturk-native-home) .archive-header{
    margin-bottom:12px!important;
  }
  html:not(.espaturk-native-home) .archive-header #siteBrand{
    min-height:90px!important;
  }
}

/* Mobile browsers: set the subtitle's final size before mobile-ui JS initializes.
   Native Android WebView and desktop are intentionally unaffected. */
@media (max-width:620px){
  html:not(.espaturk-native-home) .archive-header #siteSubtitle,
  html:not(.espaturk-native-home) .mobile-ui .archive-header #siteSubtitle{
    font-size:clamp(13px,3.9vw,16px)!important;
    line-height:1.4!important;
  }
}

/* Browser-only welcome copy. Keep native app's existing text and layout. */
.esp-browser-welcome-label{display:none}
html:not(.espaturk-native-home) .welcome .esp-native-welcome-label{display:none}
html:not(.espaturk-native-home) .welcome .esp-browser-welcome-label{display:inline}
html:not(.espaturk-native-home) .welcome #welcomeText{display:none!important}

/* Mobile browser: apply the final tagline size from the first paint, before mobile-ui initializes. */
@media (max-width:620px){
  html:not(.espaturk-native-home) .archive-header #siteTagline,
  html:not(.espaturk-native-home).mobile-ui .archive-header .tagline-online-row #siteTagline{
    font-size:clamp(15px,4.2vw,19px)!important;
  }
}

/* 2026-10-31: Browser-only compact status images in lesson cards.
   Keep the native Android dimensions and all icon click behavior unchanged. */
html:not(.espaturk-native-home) #lessonList > .lesson > .lesson-share-icon{
  width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
  max-width:34px!important;max-height:34px!important;
  right:58px!important;top:15px!important;
}
html:not(.espaturk-native-home) #lessonList > .lesson > .lesson-completed-icon{
  width:34px!important;height:34px!important;right:15px!important;top:15px!important;
}

/* Browser only: equal width for Basla and Tekrar et lesson actions. */
html:not(.espaturk-native-home) #lessonList > .lesson > .actions > a.action{
  min-width:94px;
  box-sizing:border-box;
}

/* Browser-only lesson card hover: border color only, no geometry changes. */
@media (hover: hover) and (pointer: fine){
  html:not(.espaturk-native-home) #lessonList > .lesson:hover{
    border-color:#7d6530!important;
  }
}

/* Browser-only: softer champagne border on SEO lesson directory tiles. */
@media (hover: hover) and (pointer: fine) {
  html:not(.espaturk-native-home) .seo-directory-grid a:hover {
    border-color: #7d6530 !important;
  }
}

/* Web and mobile browsers only: muted footer links, softly brighter on hover. */
html:not(.espaturk-native-home) .site-footer > a,
html:not(.espaturk-native-home) .site-footer > a:visited {
  color: #9ca6b5 !important;
  transition: color .16s ease;
}
@media (hover: hover) and (pointer: fine) {
  html:not(.espaturk-native-home) .site-footer > a:hover {
    color: #e5e9ef !important;
  }
}
html:not(.espaturk-native-home) .site-footer > a:focus-visible {
  color: #e5e9ef !important;
}