/* P-120 WEB DESIGN RECONCILIATION PASS 5C — Canonical Public Mobile Shell v1.0
   Scoped by html[data-p120-public-mobile-shell="1.0"].
   Public presentation/navigation only. System routes never receive this marker. */

html[data-p120-public-mobile-shell="1.0"]{
  --p120-public-shell-breakpoint:1080px;
  --p120-public-header-h:71px;
  --p120-public-drawer-bg:#173e3d;
  --p120-public-drawer-ink:#f5f1e9;
  --p120-public-drawer-muted:#afc6c0;
  --p120-public-drawer-line:rgba(255,255,255,.13);
  --p120-public-drawer-focus:#d7e7df;
  --p120-public-drawer-ease:cubic-bezier(.2,.7,.2,1);
}

html[data-p120-public-mobile-shell="1.0"][data-p120-shell-context="editorial-dark"]{
  --p120-public-drawer-bg:#151412;
  --p120-public-drawer-ink:#f1eadf;
  --p120-public-drawer-muted:#afa79d;
  --p120-public-drawer-line:rgba(241,234,223,.14);
  --p120-public-drawer-focus:#d7c5ae;
}

.p120-public-menu-button,
.p120-public-drawer{display:none}

@media(max-width:1080px){
  html[data-p120-public-mobile-shell="1.0"] :is(.topbar,.explore-topbar,.creator-topbar,.wp-header,.p120-brand53-header){
    min-height:var(--p120-public-header-h)!important;
  }
  html[data-p120-public-mobile-shell="1.0"] :is(.topbar-inner,.explore-topbar__inner,.creator-topbar__inner,.wp-header-inner,.p120-brand53-header__inner){
    min-height:var(--p120-public-header-h)!important;
    gap:10px!important;
  }

  /* Canonical compact order is Brand | RU/EN | Theme | Menu. */
  html[data-p120-public-mobile-shell="1.0"] [data-p120-brand53-tools],
  html[data-p120-public-mobile-shell="1.0"] .topbar-tools:has(> [data-p120-public-menu-trigger]){
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    margin-left:auto!important;
    min-width:0;
  }

  /* Science's mature locale control historically hid below 900px. PASS 5B
     requires RU/EN to remain Header-owned throughout the <=1080 shell range. */
  html[data-p120-public-mobile-shell="1.0"][data-p120-route="science"] .topbar-tools>.p120-language-switch-desktop{
    display:inline-flex!important;
    visibility:visible!important;
    margin-right:0!important;
    flex:0 0 auto;
  }

  .p120-public-menu-button{
    appearance:none;
    min-width:44px;
    min-height:44px;
    padding:0 12px;
    border:1px solid color-mix(in srgb,var(--p120-brand-line,#9dbcb2) 68%,transparent);
    border-radius:999px;
    background:color-mix(in srgb,var(--p120-brand-bubble,rgba(255,255,255,.18)) 92%,transparent);
    color:var(--p120-brand-ink,#263533);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font:650 11px/1 var(--p120-brand-sans,"IBM Plex Sans",sans-serif);
    letter-spacing:.02em;
    cursor:pointer;
    flex:0 0 auto;
    touch-action:manipulation;
  }
  .p120-public-menu-button:is(:hover,:focus-visible){
    background:var(--p120-brand-hover,rgba(255,255,255,.52));
    outline:2px solid transparent;
    box-shadow:0 0 0 2px var(--p120-brand-focus,#2f7d78);
  }
  .p120-public-menu-button__icon{width:15px;height:12px;display:grid;align-content:space-between;flex:0 0 auto}
  .p120-public-menu-button__icon i{display:block;width:15px;height:1px;background:currentColor;transition:transform .18s ease,opacity .18s ease}
  html[data-p120-public-drawer-state="OPEN"] .p120-public-menu-button__icon i:first-child,
  html[data-p120-public-drawer-state="OPENING"] .p120-public-menu-button__icon i:first-child{transform:translateY(5.5px) rotate(45deg)}
  html[data-p120-public-drawer-state="OPEN"] .p120-public-menu-button__icon i:last-child,
  html[data-p120-public-drawer-state="OPENING"] .p120-public-menu-button__icon i:last-child{transform:translateY(-5.5px) rotate(-45deg)}

  /* Legacy global mobile owners remain in DOM for compatibility but are no longer interactive/visible. */
  html[data-p120-public-mobile-shell="1.0"] :is(
    .mobile-menu,
    .mobile-drawer,
    .about-drawer,
    [data-explore-drawer],
    [data-about-drawer]
  ){display:none!important;visibility:hidden!important;pointer-events:none!important}
  html[data-p120-public-mobile-shell="1.0"] :is(
    [data-mobile-menu],
    .explore-menu-btn,
    .about-menu-btn,
    .wp-mobile-menu
  ){display:none!important;visibility:hidden!important;pointer-events:none!important}

  .p120-public-drawer{
    position:fixed;
    z-index:170;
    top:var(--p120-public-header-h);
    right:0;
    bottom:0;
    left:0;
    display:block;
    background:var(--p120-public-drawer-bg);
    color:var(--p120-public-drawer-ink);
    transform:translate3d(0,-104%,0);
    visibility:hidden;
    pointer-events:none;
    transition:transform 240ms var(--p120-public-drawer-ease),visibility 0s linear 240ms;
    overscroll-behavior:contain;
  }
  .p120-public-drawer[data-state="OPENING"],
  .p120-public-drawer[data-state="OPEN"]{
    transform:translate3d(0,0,0);
    visibility:visible;
    pointer-events:auto;
    transition:transform 240ms var(--p120-public-drawer-ease),visibility 0s linear 0s;
  }
  .p120-public-drawer[data-state="CLOSING"]{
    visibility:visible;
    pointer-events:none;
  }
  .p120-public-drawer__scroll{
    height:100%;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    padding:clamp(22px,4vw,38px) max(20px,env(safe-area-inset-left)) calc(34px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-right));
  }
  .p120-public-drawer__inner{width:min(760px,100%);margin:0 auto}
  .p120-public-drawer__section{padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid var(--p120-public-drawer-line)}
  .p120-public-drawer__section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
  .p120-public-drawer__label{
    margin:0 0 8px;
    color:var(--p120-public-drawer-muted);
    font:650 9px/1.2 "IBM Plex Sans",sans-serif;
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .p120-public-drawer__section nav{display:grid}
  .p120-public-drawer__link{
    display:block;
    padding:14px 4px 13px;
    border-bottom:1px solid var(--p120-public-drawer-line);
    color:inherit;
    text-decoration:none;
    font-family:"IBM Plex Sans",sans-serif;
  }
  .p120-public-drawer__link:last-child{border-bottom:0}
  .p120-public-drawer__link strong{display:block;font-size:15px;line-height:1.28;font-weight:600;letter-spacing:.005em}
  .p120-public-drawer__link small{display:block;margin-top:4px;color:var(--p120-public-drawer-muted);font-size:10.5px;line-height:1.4;font-weight:450}
  .p120-public-drawer__link[aria-current="page"] strong:after{content:" ·";color:var(--p120-public-drawer-muted)}
  .p120-public-drawer__link:is(:hover,:focus-visible){outline:0;color:var(--p120-public-drawer-focus)}
  .p120-public-drawer__link:focus-visible{box-shadow:inset 2px 0 0 currentColor;padding-left:12px}

  body.p120-public-drawer-open{overflow:hidden!important;touch-action:none}

  /* Global drawer yields no visual competition to local/action navigation. */
  html.p120-public-local-nav-suppressed :is(
    #p120-mobile-quick-chapters,
    .mobile-bottom-nav,
    [data-p120-chapter-mobile],
    .science-subnav
  ){visibility:hidden!important;pointer-events:none!important}
}

@media(max-width:620px){
  html[data-p120-public-mobile-shell="1.0"] :is(.topbar-inner,.explore-topbar__inner,.creator-topbar__inner,.wp-header-inner,.p120-brand53-header__inner){padding-inline:12px!important}
  .p120-public-drawer__scroll{padding-top:22px}
}

@media(max-width:430px){
  .p120-public-menu-button{padding-inline:10px}
  .p120-public-menu-button__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  html[data-p120-public-mobile-shell="1.0"] .brand-sub{display:none!important}
  /* PASS 5B supersedes the old <=430 rule that moved Theme authority into the legacy drawer. */
  html[data-p120-public-mobile-shell="1.0"][data-p120-route="home"] .topbar .p120-brand53-tools--main-quick .p120-brand53-theme{display:block!important}
}

/* 360px-class stress regime. Keep semantic controls and 44px Menu hit target;
   compact only decorative mass, internal gaps and locale pill padding. */
@media(max-width:370px){
  html[data-p120-public-mobile-shell="1.0"] :is(.topbar-inner,.explore-topbar__inner,.creator-topbar__inner,.wp-header-inner,.p120-brand53-header__inner){
    padding-inline:8px!important;
    gap:6px!important;
  }
  html[data-p120-public-mobile-shell="1.0"] :is(.brand-button,.explore-brand,.creator-brand,.wp-brand,.p120-brand53-brand){gap:6px!important;min-width:0}
  html[data-p120-public-mobile-shell="1.0"] .brand-mark{width:31px!important;height:31px!important;flex-basis:31px!important}
  html[data-p120-public-mobile-shell="1.0"] .brand{font-size:20px!important}
  html[data-p120-public-mobile-shell="1.0"] [data-p120-brand53-tools],
  html[data-p120-public-mobile-shell="1.0"] .topbar-tools:has(> [data-p120-public-menu-trigger]){gap:4px!important}
  html[data-p120-public-mobile-shell="1.0"] :is(.p120-brand53-language,.p120-language-switch-desktop){gap:0!important;padding:1px!important;margin-right:0!important}
  html[data-p120-public-mobile-shell="1.0"] :is(.p120-brand53-language,.p120-language-switch-desktop) a{
    min-width:25px!important;
    height:27px!important;
    padding-inline:2px!important;
  }
  html[data-p120-public-mobile-shell="1.0"] .p120-brand53-theme>summary{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0!important;
    justify-content:center!important;
    gap:0!important;
  }
  html[data-p120-public-mobile-shell="1.0"] .p120-public-menu-button{
    width:44px!important;
    min-width:44px!important;
    padding:0!important;
    gap:0!important;
  }

  /* About human-computation is a one-column grid at this width. The original
     `1fr` mobile track keeps an intrinsic auto minimum, so font-metric changes
     can re-expand the track after first layout. Freeze the track itself to
     minmax(0,1fr), then constrain each direct item to that track. */
  html[data-p120-public-mobile-shell="1.0"][data-p120-route="about"] .about-shell.computation{
    grid-template-columns:minmax(0,1fr)!important;
    max-width:calc(100vw - 36px)!important;
  }
  html[data-p120-public-mobile-shell="1.0"][data-p120-route="about"] .about-shell.computation > *{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  /* RU display word "вычислительной" can exceed the 324px content box at the
     inherited 40px H2 size. Keep the exact copy and fit only this narrow-phone
     heading instead of clipping or weakening the overflow acceptance gate. */
  html[lang="ru"][data-p120-public-mobile-shell="1.0"][data-p120-route="about"] .about-shell.computation h2{
    font-size:36px!important;
  }
  html[data-p120-public-mobile-shell="1.0"][data-p120-route="about"] .compute-orbit{
    width:100%!important;
    max-width:324px!important;
    min-width:0!important;
  }
  html[data-p120-public-mobile-shell="1.0"][data-p120-route="about"] .compute-orbit .ct2{right:0!important}
}

@media(min-width:1081px){
  .p120-public-menu-button,.p120-public-drawer{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .p120-public-drawer,.p120-public-menu-button__icon i{transition:none!important}
}