/* KeyboxHub 1.5.7.7 flat public-canvas correction. */

/*
 * The thin rounded line visible at the top and left edges is not a content
 * card. It is a legacy viewport/page-canvas decoration that survives through
 * body/html pseudo-elements and top-level wrapper effects. Public page
 * backgrounds should be flat; real Liquid cards, navigation, modals and the
 * shared version card remain untouched.
 */
html[data-kb-release],
:is(body.kb-surface-hub,body.kb-surface-checker,body.kb-surface-status,body.kb-surface-vip,body.kb-surface-quiz){
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background-image:none!important;
  background-clip:border-box!important;
}

html[data-kb-release]::before,
html[data-kb-release]::after,
body.kb-surface-hub::before,
body.kb-surface-hub::after,
body.kb-surface-checker::before,
body.kb-surface-checker::after,
body.kb-surface-status::before,
body.kb-surface-status::after,
body.kb-surface-vip::before,
body.kb-surface-vip::after,
body.kb-surface-quiz::before,
body.kb-surface-quiz::after{
  content:none!important;
  display:none!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}

/*
 * The production Hub wraps the whole visible page in a direct Alpine shell.
 * On mobile that shell starts after the body's top safe spacing, so any legacy
 * Liquid material applied to it appears as one viewport-sized rounded frame.
 * Flatten the real structural shell directly instead of waiting for JavaScript
 * to add kb157-page-canvas.
 */
body.kb-surface-hub > div[x-show="!isPageLoading"],
body.kb-surface-hub > div[x-show="!isPageLoading"] > #main-content{
  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;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  clip-path:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}
body.kb-surface-hub > div[x-show="!isPageLoading"]::before,
body.kb-surface-hub > div[x-show="!isPageLoading"]::after{
  content:none!important;
  display:none!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}

/* Flatten only structural canvases. Do not flatten actual Liquid content. */
:is(body.kb-surface-hub,body.kb-surface-checker,body.kb-surface-status,body.kb-surface-vip,body.kb-surface-quiz)
:is(.kb157-page-canvas,.kb157-main-canvas,[data-page-canvas]),
body.kb-surface-hub #main-content,
body.kb-surface-status>main,
body.kb-surface-checker>main,
body.kb-surface-vip>main,
body.kb-surface-quiz>main{
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  clip-path:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}

:is(body.kb-surface-hub,body.kb-surface-checker,body.kb-surface-status,body.kb-surface-vip,body.kb-surface-quiz)
:is(.kb157-page-canvas,.kb157-main-canvas,[data-page-canvas])::before,
:is(body.kb-surface-hub,body.kb-surface-checker,body.kb-surface-status,body.kb-surface-vip,body.kb-surface-quiz)
:is(.kb157-page-canvas,.kb157-main-canvas,[data-page-canvas])::after,
body.kb-surface-hub #main-content::before,
body.kb-surface-hub #main-content::after,
body.kb-surface-status>main::before,
body.kb-surface-status>main::after,
body.kb-surface-checker>main::before,
body.kb-surface-checker>main::after,
body.kb-surface-vip>main::before,
body.kb-surface-vip>main::after,
body.kb-surface-quiz>main::before,
body.kb-surface-quiz>main::after{
  content:none!important;
  display:none!important;
  border:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Mobile viewport edges must stay square and uninterrupted. */
@media(max-width:760px){
  :is(body.kb-surface-hub,body.kb-surface-checker,body.kb-surface-status,body.kb-surface-vip,body.kb-surface-quiz)
  :is(.kb157-page-canvas,.kb157-main-canvas,[data-page-canvas]),
  body.kb-surface-hub > div[x-show="!isPageLoading"],
  body.kb-surface-hub #main-content,
  body.kb-surface-status>main,
  body.kb-surface-checker>main,
  body.kb-surface-vip>main,
  body.kb-surface-quiz>main{
    border-radius:0!important;
    box-shadow:none!important;
  }
}

/*
 * Light Hub first-paint guard.
 *
 * The production Hub keeps its content inside an Alpine visibility wrapper
 * before platform_surfaces.js marks it as a page canvas. Target that real
 * wrapper as well as the hydrated classes so a later light-theme layer cannot
 * turn the viewport into one giant rounded card. The page remains a single,
 * flat color while actual content cards keep their own materials.
 */
html[data-kb-release][data-kb-theme="light"],
html[data-kb-release][data-kb-theme="light"] body.kb-surface-hub{
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:var(--bg-root,#f5f5f7)!important;
  background-image:none!important;
  box-shadow:none!important;
}

html[data-kb-release][data-kb-theme="light"] body.kb-surface-hub>div[x-show="!isPageLoading"],
html[data-kb-release][data-kb-theme="light"] body.kb-surface-hub>.kb157-page-canvas,
html[data-kb-release][data-kb-theme="light"] body.kb-surface-hub>div[x-show="!isPageLoading"]>#main-content,
html[data-kb-release][data-kb-theme="light"] body.kb-surface-hub #main-content.kb157-main-canvas{
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  clip-path:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}

html[data-kb-release][data-kb-theme="light"] body.kb-surface-hub>div[x-show="!isPageLoading"]::before,
html[data-kb-release][data-kb-theme="light"] body.kb-surface-hub>div[x-show="!isPageLoading"]::after,
html[data-kb-release][data-kb-theme="light"] body.kb-surface-hub>.kb157-page-canvas::before,
html[data-kb-release][data-kb-theme="light"] body.kb-surface-hub>.kb157-page-canvas::after,
html[data-kb-release][data-kb-theme="light"] body.kb-surface-hub>div[x-show="!isPageLoading"]>#main-content::before,
html[data-kb-release][data-kb-theme="light"] body.kb-surface-hub>div[x-show="!isPageLoading"]>#main-content::after{
  content:none!important;
  display:none!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/*
 * Theme-transition lock.
 *
 * CSS transitions outrank even !important declarations while they are active.
 * A legacy material transition can therefore briefly resurrect the page-sized
 * rounded surface when the root theme changes. Keep only html/body color
 * interpolation; structural Hub canvases are permanently transparent and do
 * not animate, in either direction.
 */
html[data-kb-release][data-kb-theme="dark"],
html[data-kb-release][data-kb-theme="dark"] body.kb-surface-hub{
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:var(--kb-root,var(--bg-root,#000))!important;
  background-image:none!important;
  box-shadow:none!important;
}

html[data-kb-release][data-kb-theme] body.kb-surface-hub>div[x-show="!isPageLoading"],
html[data-kb-release][data-kb-theme] body.kb-surface-hub>.kb157-page-canvas,
html[data-kb-release][data-kb-theme] body.kb-surface-hub>div[x-show="!isPageLoading"]>#main-content,
html[data-kb-release][data-kb-theme] body.kb-surface-hub #main-content.kb157-main-canvas{
  isolation:auto!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  will-change:auto!important;
  clip-path:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}

html[data-kb-release][data-kb-theme] body.kb-surface-hub>div[x-show="!isPageLoading"]::before,
html[data-kb-release][data-kb-theme] body.kb-surface-hub>div[x-show="!isPageLoading"]::after,
html[data-kb-release][data-kb-theme] body.kb-surface-hub>.kb157-page-canvas::before,
html[data-kb-release][data-kb-theme] body.kb-surface-hub>.kb157-page-canvas::after,
html[data-kb-release][data-kb-theme] body.kb-surface-hub>div[x-show="!isPageLoading"]>#main-content::before,
html[data-kb-release][data-kb-theme] body.kb-surface-hub>div[x-show="!isPageLoading"]>#main-content::after{
  content:none!important;
  display:none!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  transition:none!important;
  animation:none!important;
}

/*
 * Shared non-VIP root canvas owner.
 *
 * Hub, Checker, Status and Quiz previously painted both the html root and body
 * during a theme change. Mobile body top spacing exposed the two independently
 * interpolated layers as a horizontal seam; structural wrappers could also
 * replay a legacy material transition. The root now owns the only page color,
 * while non-VIP bodies and their page canvases remain permanently transparent.
 * VIP is intentionally excluded because its existing canvas is already stable.
 */
html[data-kb-release][data-kb-theme]{
  background-color:var(--kb-root,var(--bg-root,#000))!important;
  background-image:none!important;
}

html[data-kb-release][data-kb-theme] > body.kb-surface-hub,
html[data-kb-release][data-kb-theme] > body.kb-surface-checker,
html[data-kb-release][data-kb-theme] > body.kb-surface-status,
html[data-kb-release][data-kb-theme] > body.kb-surface-quiz{
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  transition:color .25s ease!important;
}

html[data-kb-release][data-kb-theme] body.kb-surface-hub > div[x-show="!isPageLoading"],
html[data-kb-release][data-kb-theme] body.kb-surface-hub > div:has(> #main-content),
html[data-kb-release][data-kb-theme] body.kb-surface-hub #main-content,
html[data-kb-release][data-kb-theme] body.kb-surface-checker > main,
html[data-kb-release][data-kb-theme] body.kb-surface-checker > div:has(> main),
html[data-kb-release][data-kb-theme] body.kb-surface-status > main,
html[data-kb-release][data-kb-theme] body.kb-surface-status > div:has(> main),
html[data-kb-release][data-kb-theme] body.kb-surface-quiz > main,
html[data-kb-release][data-kb-theme] body.kb-surface-quiz > div:has(> main),
html[data-kb-release][data-kb-theme] :is(body.kb-surface-hub,body.kb-surface-checker,body.kb-surface-status,body.kb-surface-quiz)
:is(.kb157-page-canvas,.kb157-main-canvas,[data-page-canvas]){
  isolation:auto!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  will-change:auto!important;
  clip-path:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}

html[data-kb-release][data-kb-theme] body.kb-surface-hub > div[x-show="!isPageLoading"]::before,
html[data-kb-release][data-kb-theme] body.kb-surface-hub > div[x-show="!isPageLoading"]::after,
html[data-kb-release][data-kb-theme] body.kb-surface-hub > div:has(> #main-content)::before,
html[data-kb-release][data-kb-theme] body.kb-surface-hub > div:has(> #main-content)::after,
html[data-kb-release][data-kb-theme] body.kb-surface-checker > main::before,
html[data-kb-release][data-kb-theme] body.kb-surface-checker > main::after,
html[data-kb-release][data-kb-theme] body.kb-surface-checker > div:has(> main)::before,
html[data-kb-release][data-kb-theme] body.kb-surface-checker > div:has(> main)::after,
html[data-kb-release][data-kb-theme] body.kb-surface-status > main::before,
html[data-kb-release][data-kb-theme] body.kb-surface-status > main::after,
html[data-kb-release][data-kb-theme] body.kb-surface-status > div:has(> main)::before,
html[data-kb-release][data-kb-theme] body.kb-surface-status > div:has(> main)::after,
html[data-kb-release][data-kb-theme] body.kb-surface-quiz > main::before,
html[data-kb-release][data-kb-theme] body.kb-surface-quiz > main::after,
html[data-kb-release][data-kb-theme] body.kb-surface-quiz > div:has(> main)::before,
html[data-kb-release][data-kb-theme] body.kb-surface-quiz > div:has(> main)::after{
  content:none!important;
  display:none!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  transition:none!important;
  animation:none!important;
}