/* Chat Detective layout unification — approved homepage is the reference.
   Shared content measure = #app / header width. No new nested wrappers. */
body.cdh-dark[data-view]{
  --cd-page-max:1400px;
  --cd-page-gap:clamp(16px,2.2vw,32px);
  --cd-panel-radius:18px;
  --cd-control-height:44px;
  --cd-headline-size:clamp(34px,3.6vw,48px);
}
/* Full-width page roots align with the shared header and footer rails. */
html:root body.cdh-dark[data-view="submit"] .cd-sm-root,
html:root body.cdh-dark[data-view="testing"] .cds-testing,
html:root body.cdh-dark[data-view="about"] .cd-about-page{
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}
/* Mode selection page: previously 1210px, with a 47px offset on each side. */
html:root body.cdh-dark[data-view="submit"][data-route="submit"] .cd-sm-root{
  padding:0;
  margin-top:6px;
  margin-bottom:48px;
}
body.cdh-dark[data-view="submit"] .cd-sm-heading{
  margin:18px 0 28px;
}
body.cdh-dark[data-view="submit"] .cd-sm-heading h1{
  font-size:var(--cd-headline-size);
  line-height:1.12;
  letter-spacing:-.035em;
}
body.cdh-dark[data-view="submit"] .cd-sm-card{
  border-radius:var(--cd-panel-radius);
}
body.cdh-dark[data-view="submit"] .cd-sm-card :is(h2,h3){
  letter-spacing:-.025em;
}
/* Statistics: remove its separate 1260px / 24px inset grid.
   The heading and status must have real panel padding. */
html:root body.cdh-dark[data-view="testing"] .cds-testing{
  padding:0;
  margin-top:24px;
  margin-bottom:72px;
}
html:root body.cdh-dark[data-view="testing"] .cds-intro{
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0 0 22px;
  padding:28px 32px 30px;
  border-radius:var(--cd-panel-radius);
}
body.cdh-dark[data-view="testing"] .cds-intro h1{
  font-size:var(--cd-headline-size);
  line-height:1.12;
  letter-spacing:-.035em;
  margin:12px 0 10px;
}
body.cdh-dark[data-view="testing"] .cds-intro p{
  max-width:760px;
  line-height:1.6;
}
body.cdh-dark[data-view="testing"] .cds-testing>[data-testing-status]{
  margin:0 0 16px;
  padding:16px 20px;
  border:1px solid rgba(193,206,255,.2);
  border-radius:12px;
  background:linear-gradient(120deg,rgba(24,43,91,.31),rgba(76,32,81,.24));
  color:#cbd4ec;
}
/* About used a narrow 1020px measure while the site rail is ~1305px. */
html:root body.cdh-dark[data-view="about"] .cd-about-page{
  padding:24px 0 64px;
}
body.cdh-dark[data-view="about"] .cd-about-hero{
  border-radius:var(--cd-panel-radius);
  padding:clamp(24px,3vw,40px);
  gap:clamp(20px,2.4vw,34px);
}
body.cdh-dark[data-view="about"] .cd-about-hero h1{
  font-size:var(--cd-headline-size);
  max-width:800px;
  line-height:1.12;
  letter-spacing:-.035em;
}
body.cdh-dark[data-view="about"] .cd-about-steps{
  width:100%;
}
/* Game has the right width but its 30px heading uses another typography scale. */
body.cdh-dark[data-view="what-next"] .game-heading-area h1,
body.cdh-dark[data-view="detective"] .game-heading-area h1{
  font-size:clamp(30px,3vw,40px);
  line-height:1.12;
  letter-spacing:-.03em;
}
body.cdh-dark[data-view="what-next"] .game-head,
body.cdh-dark[data-view="detective"] .game-head{
  border-radius:var(--cd-panel-radius);
}
/* Shared action rhythm for ordinary form buttons, excluding player controls,
   icon-only buttons, navigation tabs and all custom listbox options. */
body.cdh-dark[data-view] :is(.form-action,.secondary-action,.cd-about-feature a,.cds-testing button:not([aria-label])){
  box-sizing:border-box;
  min-height:var(--cd-control-height);
  border-radius:10px;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}
body.cdh-dark[data-view] :is(.form-action,.secondary-action):not(.player-icon-button){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
body.cdh-dark[data-view="moderation"] .mod-catalog-view,
body.cdh-dark[data-view="submit"] .community-view{
  box-sizing:border-box;
  max-width:none;
}
/* Mobile keeps same rails with reduced padding and card stacking. */
@media(max-width:760px){
  html:root body.cdh-dark[data-view="testing"] .cds-intro{
    padding:22px 20px 24px;
    margin-bottom:14px;
  }
  body.cdh-dark[data-view="about"] .cd-about-hero{padding:22px 20px}
  body.cdh-dark[data-view="about"] .cd-about-page{padding:18px 0 44px}
  body.cdh-dark[data-view="submit"] .cd-sm-heading{margin:14px 0 22px}
  body.cdh-dark[data-view="testing"] .cds-testing{margin-top:18px}
}

/* One content rail for every route, including wide desktop viewports.
   Previously home capped at 1400px while other pages/header used 1440px
   and the submit picker had its own 1210px maximum. */
html:root body.cdh-dark[data-view] :is(.site-header,.site-footer,#app){
  box-sizing:border-box!important;
  width:100%!important;
  max-width:1400px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
html:root body.cdh-dark[data-view="what-next"] .game-main,
html:root body.cdh-dark[data-view="detective"] .detective-view,
html:root body.cdh-dark[data-view="moderation"] .mod-catalog-view,
html:root body.cdh-dark[data-view="submit"] .community-view{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:1400px!important;
  margin-inline:auto!important;
}
html:root body.cdh-dark[data-view="submit"] :is(.cd-sm-root,.cd-sm-intro,.cd-sm-picker,.cd-sm-existing){
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
/* Root layout and its children have the same horizontal anchor; the page
   content itself owns internal padding only where the component needs it. */
html:root body.cdh-dark[data-view="testing"] .cds-testing,
html:root body.cdh-dark[data-view="about"] .cd-about-page{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
}
body.cdh-dark[data-view="submit"] .cd-sm-heading h1,
body.cdh-dark[data-view="testing"] .cds-intro h1,
body.cdh-dark[data-view="about"] .cd-about-hero h1{
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
}
/* Shared visual scale for regular information actions, but preserve the
   dense moderation list buttons and native media controls. */
body.cdh-dark[data-view] :is(.cd-sm-card,.cd-about-hero,.cds-intro){
  border-radius:18px!important;
}
@media(max-width:760px){
  html:root body.cdh-dark[data-view] :is(.site-header,.site-footer,#app){
    max-width:100%!important;
  }
}

/* Homepage vertical rhythm is the desktop reference for the mode picker.
   Keep the introductory title compact; cards get the same visual height
   as the prominent home preview without forcing mobile heights. */
@media (min-width: 900px) {
  html:root body.cdh-dark[data-view="submit"][data-route="submit"] .cd-sm-root {
    margin-top: 0;
  }
  html:root body.cdh-dark[data-view="submit"] .cd-sm-heading {
    margin: 8px 0 18px;
  }
  html:root body.cdh-dark[data-view="submit"] .cd-sm-heading h1 {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 1.06;
  }
  html:root body.cdh-dark[data-view="submit"] .cd-sm-picker {
    align-items: stretch;
  }
  html:root body.cdh-dark[data-view="submit"] .cd-sm-card {
    min-height: 460px;
  }
}

/* One viewport-sized procedural background — remove the old narrow blue raster
   texture and light overlay, including their responsive remnants. */
html:root body.cdh-dark > .cde-global-mist {
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  overflow:hidden!important;
  background:#070916;
}
html:root body.cdh-dark > .cde-global-mist :is(.cde-mist-base,.cde-mist-layer,.cde-mist-light) {
  display:none!important;
}
html:root body.cdh-dark > .cde-global-mist .cde-mist-canvas {
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
/* Shared footer position: pin to the bottom on shorter routes and follow
   content naturally on tall moderation/editor screens. */
html:root { scrollbar-gutter:stable; }
html:root body.cdh-dark > .page-shell {
  box-sizing:border-box;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
html:root body.cdh-dark > .page-shell > #app {
  flex:1 0 auto;
}
html:root body.cdh-dark > .page-shell > .site-footer {
  flex:0 0 auto;
  margin-top:auto!important;
}

/* Final desktop visual fix verified against the deployed routes.
   The blue rectangle was not the legacy raster: it was a narrow
   home-only ::before gradient constrained by the hero's bounds. */
html:root body.cdh-dark[data-route="home"] .cde-home::before {
  content:none!important;
  display:none!important;
  background:none!important;
}
/* A legacy submit-only 12px bottom margin raised the footer when switching
   between home and submit despite equal viewport/shell dimensions. */
html:root body.cdh-dark[data-view] .page-shell > .site-footer {
  margin-bottom:0!important;
}

/* Mobile procedural mist: fill every pixel, preserve wide canvas proportions. */
@media(max-width:760px){
  html:root{scrollbar-gutter:auto!important;background:#070916;overflow-x:clip}
  html:root body.cdh-dark{background:#070916;overflow-x:clip}
  html:root body.cdh-dark > .cde-global-mist{
    left:0!important;right:0!important;width:100vw!important;min-width:100vw!important;
    max-width:none!important;transform:none!important;
  }
}
@media(max-width:640px) and (orientation:portrait){
  html:root body.cdh-dark > .cde-global-mist .cde-mist-canvas{
    inset:auto!important;top:0!important;left:50%!important;right:auto!important;
    width:max(100%,165dvh)!important;height:100%!important;
    transform:translateX(-50%)!important;
  }
}

/* Owner-facing build label in the shared footer. */
html:root body.cdh-dark[data-view] .site-footer .cd-footer-version{
  font:650 10px/1.3 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.02em;color:rgba(211,198,230,.72);
  white-space:nowrap;user-select:text;font-variant-numeric:tabular-nums;
}
@media(max-width:480px){
  html:root body.cdh-dark[data-view] .site-footer .cd-footer-right{gap:8px}
  html:root body.cdh-dark[data-view] .site-footer .cd-footer-version{font-size:10px}
}