/* Generated from src/layout.css and ck-layout-tokens.css. */
/* CETKing shared layout tokens. Framework/theme independent; Arena is the first consumer.
 * Matches cetking-network-core .ckn-wrap. Do not fork brand-specific widths.
 * CSS media queries cannot consume var(); build-arena.mjs resolves token() in src/layout.css.
 * Mobile legacy gutters remain intentional until their separately approved baseline change.
 */
:root {
  --ck-layout-max: 1180px;
  --ck-layout-gutter-desktop: 18px;
  --ck-layout-gutter-mobile: 10px;
  --ck-layout-header-desktop: 80px;
  --ck-layout-nav-desktop: 72px;
  --ck-layout-header-mobile: 50px;
  --ck-layout-nav-mobile: 64px;
  --ck-layout-breakpoint-mobile-max: 760px;
  --ck-layout-breakpoint-desktop: 761px;
  --ck-layout-breakpoint-admin: 783px;
  --ck-layout-admin-mobile: 46px;
  --ck-layout-admin-desktop: 32px;
}

/* One desktop geometry for every Arena route. Existing mobile rules stay untouched. */
@media (min-width: 761px) {
  body.arena-full-width-page {
    --arena-max: var(--ck-layout-max, 1180px);
    --arena-gutter: var(--ck-layout-gutter-desktop, 18px);
    --arena-width: min(var(--arena-max, 1180px), calc(100% - 2 * var(--arena-gutter, 18px)));
    --arena-inset: max(var(--arena-gutter, 18px), calc((100% - var(--arena-max, 1180px)) / 2));
    --arena-admin: 0px;
    --arena-header: var(--ck-layout-header-desktop, 80px);
    --arena-footer: var(--ck-layout-nav-desktop, 72px);
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #02050c;
  }
  body.arena-full-width-page.admin-bar { --arena-admin: var(--ck-layout-admin-mobile, 46px); }
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] {
    position: fixed !important;
    inset: var(--arena-admin, 0px) 0 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-lms-wrap,
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-lobby-hero {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
  }
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-lobby-hud {
    position: fixed !important;
    inset: calc(var(--arena-admin, 0px) + var(--arena-header, 80px)) 0 var(--arena-footer, 72px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }
  /* CSS applies before scripts and to content inserted after initial rendering. */
  html body.arena-full-width-page .ck-layout-container,
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-home-popover {
    box-sizing: border-box !important;
    width: var(--arena-width, min(1180px, calc(100% - 36px))) !important;
    max-width: var(--ck-layout-max, 1180px) !important;
    margin-inline: auto !important;
    min-width: 0 !important;
  }
  html body.arena-full-width-page :is(.ck-home-hud, .ck-view.active, #cet-quiz-app, .ck-home-popover) > * {
    max-width: 100% !important;
  }
  html body.arena-full-width-page .ck-home-popover { left: 0 !important; right: 0 !important; transform: none !important; }
  /* Full viewport backgrounds, centred contents. */
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-console-header,
  html body.arena-full-width-page #cet-quiz-app .ck-quiz-titlebar {
    box-sizing: border-box !important;
    position: fixed !important;
    top: var(--arena-admin, 0px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: var(--arena-header, 80px) !important;
    min-height: var(--arena-header, 80px) !important;
    margin: 0 !important;
    padding: 12px var(--arena-inset, max(18px, calc((100% - 1180px) / 2))) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    border: 0 !important;
    border-bottom: 1px solid #253347 !important;
    border-radius: 0 !important;
    background: #06101d !important;
    z-index: 100 !important;
    transform: none !important;
  }
  html body.arena-full-width-page .ck-console-header > div:first-child { min-width: 0; }
  html body.arena-full-width-page .ck-console-header .ck-title-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    width: auto !important;
    margin-left: auto !important;
  }
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-lobby-hud .ck-app-tabs,
  html body.arena-full-width-page #cet-quiz-app .ck-quiz-nav {
    box-sizing: border-box !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    height: var(--arena-footer, 72px) !important;
    min-height: var(--arena-footer, 72px) !important;
    margin: 0 !important;
    padding: 7px var(--arena-inset, max(18px, calc((100% - 1180px) / 2))) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border: 0 !important;
    border-top: 1px solid #253347 !important;
    border-radius: 0 !important;
    background: #06101d !important;
    z-index: 100 !important;
    transform: none !important;
  }
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-lobby-hud > .ck-view.active {
    box-sizing: border-box !important;
    position: absolute !important;
    inset: 0 !important;
    width: var(--arena-width, min(1180px, calc(100% - 36px))) !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 20px 0 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: auto !important;
    transform: none !important;
  }
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-home-hud {
    box-sizing: border-box !important;
    width: var(--arena-width, min(1180px, calc(100% - 36px))) !important;
    margin-inline: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
  html body.arena-full-width-page .ck-lms-shell .ckm-app {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
  html body.arena-full-width-page #cet-quiz-app {
    box-sizing: border-box !important;
    position: fixed !important;
    inset: calc(var(--arena-admin, 0px) + var(--arena-header, 80px)) 0 var(--arena-footer, 72px) !important;
    width: var(--arena-width, min(1180px, calc(100% - 36px))) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 20px 0 24px !important;
    overflow: auto !important;
    transform: none !important;
  }
  html body.arena-full-width-page #cet-quiz-app .ck-quiz-top { display: contents !important; }
  html body.arena-full-width-page .ck-build-footer { display: none !important; }
  html body.arena-full-width-page .ck-desktop-wallet {
    display: flex !important;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    color: #e8edf6;
    font: 700 15px/1.25 Arial, sans-serif;
  }
  html body.arena-full-width-page .ck-desktop-wallet > span { text-align: center; }
  html body.arena-full-width-page .ck-desktop-wallet small { display: block; font-size: 9px; color: #a7b5c7; }
}
@media (min-width: 783px) {
  body.arena-full-width-page.admin-bar { --arena-admin: var(--ck-layout-admin-desktop, 32px); }
}
/* Remove theme/100vw overflow while retaining mobile component styling. */
@media (max-width: 760px) {
  body.arena-full-width-page {
    --arena-admin: 0px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  body.arena-full-width-page.admin-bar { --arena-admin: 46px; }
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] {
    position: fixed !important;
    inset: var(--arena-admin, 0px) 0 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-lms-wrap,
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-lobby-hero,
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-lobby-hud {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-home-hud {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-lobby-hud > .ck-view.active {
    position: absolute !important;
    inset: 50px 0 64px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding-bottom: 16px !important;
    overflow: auto !important;
  }
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-lobby-hud .ck-app-tabs,
  html body.arena-full-width-page #cet-quiz-app .ck-quiz-nav {
    box-sizing: border-box !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    height: 64px !important;
    margin: 0 !important;
    z-index: 100 !important;
  }
  html body.arena-full-width-page #cet-quiz-app {
    position: fixed !important;
    inset: calc(var(--arena-admin, 0px) + 50px) 0 64px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: auto !important;
  }
  html body.arena-full-width-page #cet-quiz-app .ck-quiz-top { display: contents !important; }
  html body.arena-full-width-page #cet-quiz-app .ck-quiz-titlebar {
    box-sizing: border-box !important;
    position: fixed !important;
    top: var(--arena-admin, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    height: 50px !important;
    background: #06101d !important;
    z-index: 100 !important;
  }
  html body.arena-full-width-page .ck-build-footer { display: none !important; }
}

@media (max-width: 760px) {
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-lobby-hud {
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-console-header {
    box-sizing: border-box !important;
    width: 100% !important;
  }
}

/* Quiz's legacy minimum height must not extend behind the fixed navigation. */
html body.arena-full-width-page #cet-quiz-app {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
@media (max-width: 760px) {
  /* Active panels must use the viewport, not a legacy grid-row containing block. */
  html body.arena-full-width-page .ck-lms-shell[data-study-arena-zone-app] .ck-lobby-hud > .ck-view[data-ck-view].active {
    position: fixed !important;
    inset: calc(var(--arena-admin, 0px) + 50px) 0 64px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding-bottom: 16px !important;
    transform: none !important;
    overflow: auto !important;
  }
}