/*
 * R101A2 — MOBILE PAGE FRAME CONTRACT
 * Final mobile framing layer for internal public surfaces.
 * Goal: one 16px outer gutter, no accidental page-wide overflow, and
 * route-specific containment where historical CSS loads after the global system.
 * Home is intentionally excluded while its redesign remains open.
 */
@media (max-width:760px){
  :root{
    --cdn-mobile-gutter:16px;
    --cdn-mobile-frame:calc(100% - 32px);
  }

  /* ------------------------------------------------------------
   * Shared safety contract
   * ------------------------------------------------------------ */
  html body:not(.home) #cdn-main-content,
  html body:not(.home) #cdn-main-content *{
    box-sizing:border-box;
  }

  html body:not(.home) #cdn-main-content{
    max-width:100%;
    min-width:0;
  }

  html body:not(.home) #cdn-main-content :where(
    h1,h2,h3,h4,p,li,dt,dd,label,strong,small,span,a
  ){
    overflow-wrap:break-word;
  }

  html body:not(.home) #cdn-main-content :where(
    img,svg,video,canvas,iframe,input,select,textarea
  ){
    max-width:100%;
  }

  /* ------------------------------------------------------------
   * Nomes, fichas, arquivos, editoriais, Tendências e blog
   * ------------------------------------------------------------ */
  html body.cdn-name-standalone:not(.cdn-account-standalone):not(.cdn-tools-standalone):not(.cdn-legal-standalone)
    main.cdn-v2-page{
    padding-left:0!important;
    padding-right:0!important;
  }

  html body.cdn-name-standalone:not(.cdn-account-standalone):not(.cdn-tools-standalone):not(.cdn-legal-standalone)
    main.cdn-v2-page > .cdn-v2-shell{
    width:var(--cdn-mobile-frame)!important;
    max-width:1120px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  html body.cdn-blog-standalone main.cdn-v2-page > .cdn-blog-article-shell{
    width:var(--cdn-mobile-frame)!important;
    max-width:900px!important;
  }

  html body.cdn-archive-standalone main.cdn-v2-page
    :where(.cdn-v2-archive-hero,.cdn-v52-explore-controls,.cdn-v52-results-head,.cdn-v2-name-grid,
    .cdn-trend-grid,.cdn-trends-movement,.cdn-editorial-section,.cdn-culture-reference-discovery-section){
    min-width:0!important;
    max-width:100%!important;
  }

  /* ------------------------------------------------------------
   * Ferramentas PHP — inclui Minha Lista e Popularidade
   * ------------------------------------------------------------ */
  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool]{
    padding-left:0!important;
    padding-right:0!important;
    max-width:100%!important;
    overflow-x:clip;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool] > .cdn-tools-shell{
    width:var(--cdn-mobile-frame)!important;
    max-width:1120px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool]
    :where(.cdn-tool-panel,.cdn-tools-note,.cdn-tools-more,.cdn-tool-results,.cdn-result-grid,
    .cdn-list-sync-prompt,.cdn-r74-toolbar,.cdn-r74-list,.cdn-r74-card,.cdn-lab-context,
    .cdn-lab-picker,.cdn-writing-support,.cdn-writing-next,.cdn-num-reading,.cdn-num-summary,
    .cdn-pop-rich,.cdn-pop-rich-head,.cdn-pop-rich-highlights,.cdn-state-ranking){
    min-width:0!important;
    max-width:100%!important;
  }

  /* Minha Lista — corrige a regra histórica que visualmente chegava à borda. */
  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="favorites"]
    :where(.cdn-r74-toolbar,.cdn-r74-card,.cdn-r74-summary,.cdn-r74-detail,.cdn-r74-searchrow,
    .cdn-r74-filterbar,.cdn-r74-statusline,.cdn-r74-top3,.cdn-r74-nicknames){
    width:100%;
    max-width:100%;
    min-width:0;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="favorites"] .cdn-r74-summary-main,
  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="favorites"] .cdn-r74-detail > *{
    min-width:0;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="favorites"]
    :where(input,select,textarea,button,a){
    max-width:100%;
  }

  /* ------------------------------------------------------------
   * Popularidade — outer frame + internal scrolling only where useful
   * ------------------------------------------------------------ */
  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] > .cdn-tools-shell{
    width:var(--cdn-mobile-frame)!important;
    max-width:1080px!important;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-tool-panel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:20px 16px!important;
    border-radius:16px!important;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-pop-jumpnav{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] [data-cdn-pop-gender]{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] [data-cdn-pop-gender] .cdn-v2-pill{
    width:100%;
    min-width:0;
    min-height:44px;
    justify-content:center;
    white-space:normal;
    text-align:center;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"]
    :where(.cdn-fullname-form,.cdn-state-form){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"]
    :where(.cdn-fullname-form,.cdn-state-form) .cdn-btn{
    width:100%;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-pop-rich{
    padding:16px!important;
    overflow:hidden;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-pop-rich-shell{
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:34px minmax(0,1fr) 34px!important;
    gap:4px!important;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-pop-rich-scroll{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-pop-rich-inner{
    max-width:none;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-pop-rich-y{
    min-width:0;
    font-size:9px!important;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-state-row{
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:5px 10px!important;
    align-items:center;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-state-row > a{
    min-width:0;
    overflow-wrap:anywhere;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-state-row > span{
    grid-column:2;
    min-width:0;
    text-align:left;
    white-space:normal;
    color:#65737c;
  }

  /* ------------------------------------------------------------
   * Ferramentas funcionais HTML / colaboração / quizzes
   * ------------------------------------------------------------ */
  html body.cdn-functional-r1-page main.cdn-functional-r1{
    padding-left:0!important;
    padding-right:0!important;
    max-width:100%!important;
    overflow-x:clip;
  }

  html body.cdn-functional-r1-page main.cdn-functional-r1 > :is(
    .cdn-v2-shell,.cdn-functional-tool-shell,.shell,.wrap,.page,.cdn-passport,.cdn-quiz-suite
  ){
    width:var(--cdn-mobile-frame)!important;
    max-width:1120px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  html body.cdn-functional-r1-page main.cdn-functional-r1 :where(
    .cdn-functional-tool-shell,.cdn-quiz-suite,.shell,.wrap,.page,.cdn-passport,
    .cdn-blind,.cdn-council,.cdn-couple,.cdn-heard,.cdn-time-wrap
  ){
    min-width:0!important;
  }

  /* ------------------------------------------------------------
   * Conta / Minha Área
   * ------------------------------------------------------------ */
  html body.cdn-account-standalone main.cdn-account-page{
    padding-left:0!important;
    padding-right:0!important;
    max-width:100%!important;
  }

  html body.cdn-account-standalone .cdn-account-shell{
    width:var(--cdn-mobile-frame)!important;
    max-width:1180px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  html body.cdn-account-standalone :where(
    .cdn-account-dashboard,.cdn-account-auth-card,.cdn-account-panel,.cdn-account-recent-item,
    .cdn-account-settings,.cdn-account-settings-grid,.cdn-account-preferences-form
  ){
    min-width:0!important;
    max-width:100%!important;
  }

  html body.cdn-account-standalone .cdn-account-settings-backdrop{
    padding-left:var(--cdn-mobile-gutter)!important;
    padding-right:var(--cdn-mobile-gutter)!important;
  }

  /* ------------------------------------------------------------
   * Jogos
   * ------------------------------------------------------------ */
  html body.cdn-games-page main.cdn-games{
    padding-left:var(--cdn-mobile-gutter)!important;
    padding-right:var(--cdn-mobile-gutter)!important;
    max-width:100%!important;
    overflow-x:clip;
  }

  html body.cdn-games-page .cdn-games-shell,
  html body.cdn-games-page :where(.cdn-games-hero,.cdn-games-stage,.cdn-games-hub-grid,.cdn-games-duel,.cdn-games-options){
    width:100%;
    max-width:100%;
    min-width:0;
  }

  /* ------------------------------------------------------------
   * Legal — already aligned in R101A1; keep the final contract explicit.
   * ------------------------------------------------------------ */
  html body.cdn-legal-standalone main.cdn-legal-page{
    padding-left:var(--cdn-mobile-gutter)!important;
    padding-right:var(--cdn-mobile-gutter)!important;
  }

  html body.cdn-legal-standalone .cdn-legal-shell{
    width:100%!important;
    max-width:860px!important;
    min-width:0!important;
  }
}

@media (max-width:430px){
  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-pop-tool-stats,
  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-pop-rich-highlights{
    grid-template-columns:minmax(0,1fr)!important;
  }

  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-pop-tool-stats > div,
  html body.cdn-tools-standalone main.cdn-tools-page[data-cdn-tool="popularity"] .cdn-pop-rich-highlights > div{
    grid-column:auto!important;
  }
}

/* R101A2 hardening — route-specific late legacy rules found by synthetic QA. */
@media (max-width:760px){
  html body.cdn-tools-standalone #cdn-main-content.cdn-tools-page[data-cdn-tool="favorites"] > .cdn-tools-shell{
    width:var(--cdn-mobile-frame)!important;
    max-width:1120px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  html body.cdn-account-standalone .cdn-account-recent-item > strong{
    flex:1 1 auto;
    min-width:0!important;
    max-width:100%;
    overflow-wrap:anywhere!important;
  }

  html body.cdn-account-standalone .cdn-account-recent-item > span{
    flex:0 0 auto;
    min-width:0;
  }
}

/* R101A2 contingency surfaces — align maintenance/unavailable states to the same mobile frame. */
@media (max-width:760px){
  html body.cdn-maintenance-standalone #cdn-main-content,
  html body.cdn-unavailable-standalone #cdn-main-content{
    padding-left:var(--cdn-mobile-gutter)!important;
    padding-right:var(--cdn-mobile-gutter)!important;
  }

  html body.cdn-maintenance-standalone #cdn-main-content > section,
  html body.cdn-unavailable-standalone #cdn-main-content > section{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:680px!important;
    min-width:0!important;
  }
}