/* surface59 — mobile shell/readability + dark account consistency. */

/* Guest/profile control must inherit the dark shell instead of commerce.css's light pill. */
html[data-theme="dark"] .site-header[data-header] .user-menu__button,
html[data-theme="dark"] .site-header[data-header] .user-menu__button:hover,
html[data-theme="dark"] .site-header[data-header] .user-menu.open .user-menu__button{
  background:rgba(8,13,21,.78)!important;
  color:#eef4ff!important;
  border-color:rgba(218,229,255,.11)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 18px 52px rgba(0,0,0,.22)!important;
}
html[data-theme="dark"] .user-menu__avatar-empty{
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(111,145,226,.08))!important;
  border-color:rgba(218,229,255,.12)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05)!important;
}
html[data-theme="dark"] .user-menu__dropdown{
  background:rgba(7,12,19,.94)!important;
  color:#eef4ff!important;
  border-color:rgba(218,229,255,.10)!important;
  box-shadow:0 28px 88px rgba(0,0,0,.42)!important;
}
html[data-theme="dark"] .user-menu__dropdown a,
html[data-theme="dark"] .user-menu__dropdown button,
html[data-theme="dark"] .user-menu__profile strong{color:#eef4ff!important}
html[data-theme="dark"] .user-menu__profile small{color:rgba(226,235,249,.56)!important}
html[data-theme="dark"] .user-menu__dropdown a:hover,
html[data-theme="dark"] .user-menu__dropdown button:hover{background:rgba(255,255,255,.075)!important}
html[data-theme="dark"] .user-menu__profile{border-bottom-color:rgba(218,229,255,.09)!important}

/* Account center: commerce-polish is intentionally light-first; make dark mode complete. */
html[data-theme="dark"] .login-modal,
html[data-theme="dark"] .account-center-modal{background:rgba(0,0,0,.62)!important}
html[data-theme="dark"] .login-modal__panel,
html[data-theme="dark"] .account-center-panel{
  background:rgba(7,12,19,.96)!important;
  color:#eef4ff!important;
  border-color:rgba(218,229,255,.10)!important;
  box-shadow:0 42px 130px rgba(0,0,0,.55)!important;
}
html[data-theme="dark"] .login-modal__panel h2,
html[data-theme="dark"] .login-modal__panel h3,
html[data-theme="dark"] .login-modal__panel strong,
html[data-theme="dark"] .login-modal__panel .commerce-form label{color:#eef4ff!important}
html[data-theme="dark"] .login-modal__panel p{color:rgba(226,235,249,.62)!important}
html[data-theme="dark"] .account-center-sidebar{
  background:linear-gradient(180deg,rgba(11,18,29,.98),rgba(6,11,18,.96))!important;
  border-color:rgba(218,229,255,.09)!important;
}
html[data-theme="dark"] .account-center-user{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(218,229,255,.08)!important;
}
html[data-theme="dark"] .account-center-user strong,
html[data-theme="dark"] .account-pane,
html[data-theme="dark"] .account-pane h2,
html[data-theme="dark"] .account-pane h3,
html[data-theme="dark"] .account-pane strong,
html[data-theme="dark"] .commerce-form label,
html[data-theme="dark"] .avatar-picker b{color:#eef4ff!important}
html[data-theme="dark"] .account-center-user small,
html[data-theme="dark"] .account-pane>p,
html[data-theme="dark"] .account-pane p,
html[data-theme="dark"] .avatar-picker small,
html[data-theme="dark"] .library-info p,
html[data-theme="dark"] .modal-pass-card ul{color:rgba(226,235,249,.62)!important}
html[data-theme="dark"] .account-center-tabs button{color:rgba(226,235,249,.72)!important}
html[data-theme="dark"] .account-center-tabs button:hover{background:rgba(255,255,255,.055)!important}
html[data-theme="dark"] .account-center-tabs button.active{
  background:rgba(255,255,255,.095)!important;
  color:#a9bfff!important;
  box-shadow:0 12px 34px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] .account-center-main{background:rgba(4,8,14,.35)!important}
html[data-theme="dark"] .account-center-close,
html[data-theme="dark"] .login-modal__close{background:rgba(255,255,255,.07)!important;color:#eef4ff!important}
html[data-theme="dark"] .account-pane .eyebrow,
html[data-theme="dark"] .login-modal__panel .eyebrow{color:#9fb8ff!important}
html[data-theme="dark"] .account-pane .commerce-form input,
html[data-theme="dark"] .account-pane .commerce-form select,
html[data-theme="dark"] .account-pane .commerce-form textarea,
html[data-theme="dark"] .login-modal__panel .commerce-form input,
html[data-theme="dark"] .login-modal__panel .commerce-form select{
  background:rgba(255,255,255,.055)!important;
  color:#eef4ff!important;
  border-color:rgba(218,229,255,.11)!important;
  caret-color:#eef4ff!important;
}
html[data-theme="dark"] .account-pane .commerce-form input::placeholder,
html[data-theme="dark"] .login-modal__panel .commerce-form input::placeholder{color:rgba(226,235,249,.35)!important}
html[data-theme="dark"] .avatar-picker,
html[data-theme="dark"] .library-item,
html[data-theme="dark"] .modal-pass-card,
html[data-theme="dark"] .modal-login-required{
  background:rgba(255,255,255,.045)!important;
  color:#eef4ff!important;
  border-color:rgba(218,229,255,.09)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .avatar-preview-shell{
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(111,145,226,.08))!important;
  border-color:rgba(218,229,255,.11)!important;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.025)!important;
}
html[data-theme="dark"] .avatar-preview-shell span,
html[data-theme="dark"] .library-thumb span{color:rgba(226,235,249,.46)!important}
html[data-theme="dark"] .library-thumb{background:rgba(255,255,255,.055)!important}
html[data-theme="dark"] .library-info code{background:rgba(255,255,255,.055)!important;border-color:rgba(218,229,255,.08)!important;color:rgba(226,235,249,.70)!important}
html[data-theme="dark"] .pass-plan-switch{background:rgba(255,255,255,.05)!important;border-color:rgba(218,229,255,.08)!important;box-shadow:none!important}
html[data-theme="dark"] .pass-plan-switch button{color:rgba(226,235,249,.72)!important}
html[data-theme="dark"] .pass-plan-switch button.active{background:rgba(255,255,255,.10)!important;color:#a9bfff!important;box-shadow:none!important}
html[data-theme="dark"] .commerce-button{background:#edf3ff!important;color:#08101a!important}
html[data-theme="dark"] .commerce-button.secondary{background:rgba(255,255,255,.075)!important;color:#eef4ff!important}
html[data-theme="dark"] .commerce-status{background:rgba(126,158,239,.10)!important;color:#c9d7ff!important}

/* Shell notification/cart controls still contained a few hard-coded light labels. */
html[data-theme="dark"] .chrome-panel-head h3,
html[data-theme="dark"] .chrome-panel-head button,
html[data-theme="dark"] .notify-tabs button,
html[data-theme="dark"] .cart-item button{color:#eef4ff!important}
html[data-theme="dark"] .chrome-panel-head{border-bottom-color:rgba(218,229,255,.08)!important}
html[data-theme="dark"] .chrome-panel-head button,
html[data-theme="dark"] .notify-tabs button{background:rgba(255,255,255,.055)!important}
html[data-theme="dark"] .notify-tabs button.active{background:#eef4ff!important;color:#08101a!important}

/* Compact footer: never split into opposite corners on a phone. Keep clear of floating chrome. */
@media(max-width:820px){
  .footer.compact-footer,
  body.home-public-v3 .footer.compact-footer{
    width:calc(100% - 32px)!important;
    margin:0 auto calc(116px + env(safe-area-inset-bottom,0px))!important;
    padding:24px 0 28px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:start!important;
    justify-items:start!important;
    justify-content:start!important;
    gap:14px!important;
    text-align:left!important;
  }
  .footer.compact-footer>div:first-child,
  .footer.compact-footer .footer-links{
    width:100%!important;
    margin:0!important;
    justify-self:start!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
    text-align:left!important;
  }
  .footer.compact-footer .footer-links{display:flex!important;gap:12px!important}
  .footer.compact-footer .footer-links a{margin:0!important;padding:7px 0!important}

  html[data-theme="dark"] .site-header[data-header] .user-menu__button{
    background:rgba(8,13,21,.86)!important;
    border-color:rgba(218,229,255,.11)!important;
  }
  html[data-theme="dark"] .site-header[data-header] .user-menu__button img,
  html[data-theme="dark"] .site-header[data-header] .user-menu__button .user-menu__avatar-empty{
    box-shadow:none!important;
    border-color:rgba(218,229,255,.11)!important;
  }
}