/* KeyboxHub 1.5.7.6 exact final surface fixes. */

/*
 * Join the Hub rows
 *
 * These rows are static markup, so target their real DOM path rather than a
 * JavaScript-added class. The light material is intentionally distinct from
 * the parent sheet while retaining restrained contrast and shadow.
 */
body.kb-surface-hub #contribute > .section-bg .flex.flex-col.space-y-5 > a{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:21px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.025) 58%),rgba(34,34,40,.9)!important;
  color:var(--kb157-text)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 9px 20px rgba(0,0,0,.12)!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%)!important;
  backdrop-filter:blur(18px) saturate(140%)!important;
  filter:none!important;
}
body.kb-surface-hub #contribute > .section-bg .flex.flex-col.space-y-5 > a::before,
body.kb-surface-hub #contribute > .section-bg .flex.flex-col.space-y-5 > a::after{
  content:none!important;
  display:none!important;
}
html[data-kb-theme="light"] body.kb-surface-hub #contribute > .section-bg .flex.flex-col.space-y-5 > a{
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(231,236,246,.94))!important;
  color:#17171b!important;
  box-shadow:inset 0 0 0 1px rgba(35,42,58,.15),0 9px 21px rgba(45,55,78,.11)!important;
}
html[data-kb-theme="light"] body.kb-surface-hub #contribute > .section-bg .flex.flex-col.space-y-5 > a > div:first-child{
  background:rgba(222,228,240,.9)!important;
  box-shadow:inset 0 0 0 1px rgba(35,42,58,.11)!important;
}

/*
 * Checker comparison feature
 *
 * The feature card uses rounded-xl, so the old rounded-2xl/3xl heuristic never
 * reached the correct card. Remove the accidental material only from the real
 * title row and preserve the small icon tile and outer Liquid card.
 */
body.kb-surface-checker #checker-features .grid > div:last-child > .flex.items-center.mb-3{
  position:static!important;
  width:auto!important;
  min-width:0!important;
  margin:0 0 12px!important;
  padding:0!important;
  overflow:visible!important;
  isolation:auto!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  filter:none!important;
}
body.kb-surface-checker #checker-features .grid > div:last-child > .flex.items-center.mb-3::before,
body.kb-surface-checker #checker-features .grid > div:last-child > .flex.items-center.mb-3::after{
  content:none!important;
  display:none!important;
}

/*
 * Checker trust feature grid
 *
 * Five equal cards in a three-column desktop grid leave the final row pinned
 * to the left and create an accidental empty lower-right slot. Use a six-track
 * desktop grid so the first row remains three equal cards while the final two
 * occupy centered two-track spans. Tablet/mobile keep their existing Tailwind
 * one/two-column flow untouched.
 */
@media (min-width:1024px){
  body.kb-surface-checker #checker-features > .grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
  body.kb-surface-checker #checker-features > .grid > div{
    grid-column:span 2 / span 2!important;
  }
  body.kb-surface-checker #checker-features > .grid > div:nth-child(4){
    grid-column:2 / span 2!important;
  }
  body.kb-surface-checker #checker-features > .grid > div:nth-child(5){
    grid-column:4 / span 2!important;
  }
}

/*
 * Search Keyboxes
 *
 * The visible rectangle is the #keybox-list section itself. The legacy 1.5.6
 * runtime adds kb-liquid-v156 to that section, so flatten that exact canvas and
 * its layout-only pagination wrappers. Keep Liquid material only on real cards
 * and the Load More action.
 */
body.kb-surface-hub #keybox-list,
body.kb-surface-hub #keybox-list.section-bg,
body.kb-surface-hub #keybox-list.kb-liquid-v156,
body.kb-surface-hub #keybox-list.kb157-liquid{
  isolation:auto!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  filter:none!important;
}
body.kb-surface-hub #keybox-list::before,
body.kb-surface-hub #keybox-list::after{
  content:none!important;
  display:none!important;
}
body.kb-surface-hub #keybox-list > .max-w-6xl,
body.kb-surface-hub #keybox-list > .max-w-6xl > [x-data],
body.kb-surface-hub #keybox-list [x-ref="contentWrapper"],
body.kb-surface-hub #keybox-list .kb-keybox-pagination,
body.kb-surface-hub #keybox-list .kb-keybox-pagination-slot{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  filter:none!important;
  text-shadow:none!important;
}
body.kb-surface-hub #keybox-list > .max-w-6xl::before,
body.kb-surface-hub #keybox-list > .max-w-6xl::after,
body.kb-surface-hub #keybox-list > .max-w-6xl > [x-data]::before,
body.kb-surface-hub #keybox-list > .max-w-6xl > [x-data]::after,
body.kb-surface-hub #keybox-list .kb-keybox-pagination::before,
body.kb-surface-hub #keybox-list .kb-keybox-pagination::after,
body.kb-surface-hub #keybox-list .kb-keybox-pagination-slot::before,
body.kb-surface-hub #keybox-list .kb-keybox-pagination-slot::after{
  content:none!important;
  display:none!important;
}
body.kb-surface-hub #keybox-list .kb-keybox-card{
  overflow:hidden!important;
  border:0!important;
  border-radius:23px!important;
  clip-path:inset(0 round 23px)!important;
  filter:none!important;
  box-shadow:inset 0 0 0 1px var(--kb157-rim),0 10px 23px rgba(0,0,0,.105)!important;
}
body.kb-surface-hub #keybox-list .kb-keybox-card::before,
body.kb-surface-hub #keybox-list .kb-keybox-card::after{
  border-radius:inherit!important;
  clip-path:inset(0 round 23px)!important;
}
html[data-kb-theme="light"] body.kb-surface-hub #keybox-list .kb-keybox-card{
  box-shadow:inset 0 0 0 1px rgba(35,42,58,.105),0 10px 22px rgba(45,55,78,.075)!important;
}
body.kb-surface-hub #keybox-list .kb-load-more{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02)),rgba(31,31,36,.9)!important;
  color:var(--kb157-text)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 7px 16px rgba(0,0,0,.105)!important;
  filter:none!important;
}
body.kb-surface-hub #keybox-list .kb-load-more::before,
body.kb-surface-hub #keybox-list .kb-load-more::after{
  content:none!important;
  display:none!important;
}
html[data-kb-theme="light"] body.kb-surface-hub #keybox-list .kb-load-more{
  background:linear-gradient(145deg,#fff,rgba(234,239,248,.94))!important;
  color:#17171b!important;
  box-shadow:inset 0 0 0 1px rgba(35,42,58,.12),0 7px 16px rgba(45,55,78,.075)!important;
}

/* Codex review: preserve opaque accessibility fallbacks after final overrides. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.kb-surface-hub #contribute > .section-bg .flex.flex-col.space-y-5 > a,
  body.kb-surface-hub #keybox-list .kb-load-more{
    background:#242429!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  html[data-kb-theme="light"] body.kb-surface-hub #contribute > .section-bg .flex.flex-col.space-y-5 > a,
  html[data-kb-theme="light"] body.kb-surface-hub #keybox-list .kb-load-more{
    background:#eef0f5!important;
  }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  body.kb-surface-hub #contribute > .section-bg .flex.flex-col.space-y-5 > a,
  body.kb-surface-hub #keybox-list .kb-load-more{
    background:#242429!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)!important;
  }
  html[data-kb-theme="light"] body.kb-surface-hub #contribute > .section-bg .flex.flex-col.space-y-5 > a,
  html[data-kb-theme="light"] body.kb-surface-hub #keybox-list .kb-load-more{
    background:#eef0f5!important;
    box-shadow:inset 0 0 0 1px rgba(25,25,31,.28)!important;
  }
}

/*
 * Hub protected-download sheet — live static owner.
 *
 * Keep this contract in an already-loaded static asset. Production PHP-FPM is
 * configured with opcache.validate_timestamps=0, so PHP presentation hotfixes
 * can remain stale until FPM/Opcache is explicitly restarted. These selectors
 * bind to the original Hub markup and therefore do not need a new PHP transform,
 * JS-added class, :has(), or Alpine lifecycle callback.
 */
@media (max-width:639.98px){
  body [x-show="modalOpen"][class*="fixed"][class*="inset-0"] > [x-data*="swipeToClose"],
  body [x-show="modalOpen"] > [x-data*="swipeToClose"]{
    position:relative!important;
    inset:auto 0 0!important;
    top:auto!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - max(8px,env(safe-area-inset-top)))!important;
    margin:0!important;
    overflow:hidden!important;
    flex:0 0 auto!important;
  }

  body [x-ref="downloadModalContent"]{
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - max(8px,env(safe-area-inset-top)))!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    scrollbar-gutter:auto!important;
  }

  body [x-ref="downloadModalContent"] > div[class~="p-6"]{
    height:auto!important;
    min-height:0!important;
    padding:10px 18px max(18px,calc(14px + env(safe-area-inset-bottom)))!important;
  }

  body [x-ref="downloadModalContent"] > div[class~="p-6"] > .flex.justify-between.items-start{
    min-height:0!important;
    margin-bottom:0!important;
    padding-bottom:12px!important;
  }

  body [x-ref="downloadModalContent"] > div[class~="p-6"] > div[class*="min-h-[150px]"]{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:12px 0 0!important;
    flex:0 0 auto!important;
    align-self:auto!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    transition:none!important;
  }

  body [x-ref="downloadModalContent"] > div[class~="p-6"] > div[class*="min-h-[150px]"] > div[x-show*="currentStep"]{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    flex:0 0 auto!important;
  }

  body [x-ref="downloadModalContent"] #turnstile-widget,
  body [x-ref="downloadModalContent"] #telegram-login-widget-container{
    min-height:65px!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
  }

  body [x-ref="downloadModalContent"] div[x-show*="currentStep === 'captcha'"],
  body [x-ref="downloadModalContent"] div[x-show*='currentStep === "captcha"'],
  body [x-ref="downloadModalContent"] div[x-show*="currentStep === 'telegram'"],
  body [x-ref="downloadModalContent"] div[x-show*='currentStep === "telegram"']{
    min-height:65px!important;
  }

  body [x-ref="downloadModalContent"] div[x-show*="currentStep === 'loading'"],
  body [x-ref="downloadModalContent"] div[x-show*='currentStep === "loading"'],
  body [x-ref="downloadModalContent"] div[x-show*="currentStep === 'success'"],
  body [x-ref="downloadModalContent"] div[x-show*='currentStep === "success"']{
    min-height:0!important;
    height:auto!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
}