/* SacaPlato v0.9.14 — focused layout/contrast fixes, loaded LAST. */
:root{
  --sp914-orange:#ff5a18;
  --sp914-acid:#d9ff63;
  --sp914-ink:#171713;
  --sp914-cream:#fff0dc;
  --sp914-paper:#fffaf2;
}

/* 1) Pantry dialog title: black panel stays, headline becomes readable. */
#pantryDialog .pantry-dialog-head h2{
  color:var(--sp914-cream)!important;
  text-shadow:4px 5px 0 var(--sp914-acid)!important;
  -webkit-text-stroke:0!important;
}
#pantryDialog .pantry-dialog-head h2 em{
  color:var(--sp914-orange)!important;
  text-shadow:4px 5px 0 var(--sp914-acid)!important;
  -webkit-text-stroke:0!important;
}
#pantryDialog .pantry-dialog-head .eyebrow{color:var(--sp914-acid)!important}

/* 2) Help dialog contrast: no inherited pale text on pale cards. */
#aboutDialog .help-lead,
#aboutDialog .help-steps article,
#aboutDialog .help-steps article b,
#aboutDialog .help-steps article p,
#aboutDialog .help-rule,
#aboutDialog .help-rule span{
  color:var(--sp914-ink)!important;
  opacity:1!important;
}
#aboutDialog .help-steps article{background:var(--sp914-paper)!important}

/* 3) Mis platos: headline and explanatory copy need breathing room. */
#libraryDialog .library-riot-head h2{
  margin-bottom:0!important;
}
#libraryDialog .library-lead{
  margin:30px 0 0!important;
  padding:17px 19px!important;
}

/* 4) Prevent the contextual +OLVIDÉ UNO pill from covering results actions. */
.screen[data-screen="results"] .bottom-actions{
  position:relative!important;
  z-index:1!important;
}

@media(max-width:860px){
  /* Intent screen: every block is truly centered and full-width. */
  .screen[data-screen="intent"]{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  .screen[data-screen="intent"] .intent-layout{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:22px!important;
    overflow:hidden!important;
  }
  .screen[data-screen="intent"] .intent-copy,
  .screen[data-screen="intent"] .intent-cards,
  .screen[data-screen="intent"] .pantry-panel,
  .screen[data-screen="intent"] .appliance-panel,
  .screen[data-screen="intent"] .pantry-visual-grid,
  .screen[data-screen="intent"] .appliance-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
  }
  .screen[data-screen="intent"] .pantry-panel,
  .screen[data-screen="intent"] .appliance-panel{
    box-sizing:border-box!important;
  }
  .screen[data-screen="intent"] .pantry-visual-grid,
  .screen[data-screen="intent"] .appliance-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .screen[data-screen="intent"] .pantry-tile,
  .screen[data-screen="intent"] .appliance-card,
  .screen[data-screen="intent"] .intent-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    transform:none!important;
  }
  .screen[data-screen="intent"] .appliance-card{
    grid-template-columns:78px minmax(0,1fr) 34px!important;
    grid-template-rows:1fr!important;
    align-items:center!important;
    min-height:96px!important;
    padding:10px 12px!important;
  }
  .screen[data-screen="intent"] .appliance-art{
    grid-column:auto!important;
    width:72px!important;
    height:68px!important;
    overflow:hidden!important;
  }
  .screen[data-screen="intent"] .appliance-art svg{
    width:68px!important;
    max-width:100%!important;
  }

  /* Results: leave a clean landing zone above the fixed app bar and floating action. */
  .screen[data-screen="results"]{
    padding-bottom:32px!important;
  }
  .screen[data-screen="results"] .bottom-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin:26px 0 176px!important;
    padding:0!important;
  }
  .screen[data-screen="results"] .bottom-actions button{
    width:100%!important;
    min-height:58px!important;
    margin:0!important;
    white-space:normal!important;
  }
  #floatingForgotButton{
    bottom:calc(94px + env(safe-area-inset-bottom))!important;
    right:12px!important;
    max-width:calc(100vw - 24px)!important;
  }

  /* Library spacing on mobile too. */
  #libraryDialog .library-lead{margin-top:22px!important}
}

@media(max-width:520px){
  .screen[data-screen="intent"] .intent-layout{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .screen[data-screen="intent"] .pantry-panel,
  .screen[data-screen="intent"] .appliance-panel{
    padding:15px!important;
    border-radius:19px!important;
  }
  .screen[data-screen="intent"] .pantry-tile{
    grid-template-columns:50px minmax(0,1fr) 30px!important;
    gap:11px!important;
  }
  .screen[data-screen="intent"] .pantry-emoji{
    width:50px!important;
    height:50px!important;
  }
  .screen[data-screen="intent"] .appliance-card{
    grid-template-columns:64px minmax(0,1fr) 32px!important;
    gap:9px!important;
  }
  .screen[data-screen="intent"] .appliance-art{
    width:60px!important;
    height:60px!important;
  }
  .screen[data-screen="intent"] .appliance-art svg{width:58px!important}
  .screen[data-screen="intent"] .appliance-copy b{font-size:14px!important}
  .screen[data-screen="intent"] .appliance-copy small{font-size:10px!important;line-height:1.3!important}
}

@media(max-width:520px){
  /* Mis platos: full-width stack, no narrow vertical-looking column. */
  #libraryDialog .library-riot-head{
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  #libraryDialog .library-mascot-sticker{justify-self:start!important}
  #libraryDialog .library-riot-head>div{width:100%!important;min-width:0!important}
  #libraryDialog .library-riot-head h2,
  #libraryDialog .library-riot-head h2 em,
  #libraryDialog .library-lead{width:100%!important;max-width:100%!important;min-width:0!important;writing-mode:horizontal-tb!important;word-break:normal!important;overflow-wrap:break-word!important}
  #libraryDialog .library-lead{margin-top:20px!important}
}