/* ============================================================
   AGORA — shared mobile fixes
   Loaded after each page's inline <style>, so these win on mobile.
   Scope: nav drawer (<1040px) + content reflow (<760px / <640px).
   ============================================================ */

/* hamburger + drawer hidden on desktop; both injected by agora-nav.js */
.nav-toggle{display:none}
.nav-drawer{display:none}

@media(max-width:1040px){
  /* ----- hamburger button ----- */
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:40px;padding:0 9px;margin:0;cursor:pointer;
    background:transparent;border:1px solid var(--line);border-radius:4px;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-toggle span{display:block;height:2px;width:100%;background:var(--ink-soft);
    border-radius:2px;transition:transform .25s ease, opacity .2s ease}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ----- slide-down drawer (cloned links) ----- */
  .nav-drawer{
    position:sticky;top:64px;z-index:4;
    display:flex;flex-direction:column;
    max-height:0;overflow-y:auto;overflow-x:hidden;
    background:linear-gradient(180deg,rgba(244,232,207,.98),rgba(240,226,190,.98));
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border-bottom:1px solid transparent;
    transition:max-height .3s ease, border-color .3s ease;
  }
  body.nav-open .nav-drawer{
    max-height:78vh;border-bottom-color:var(--line);
    box-shadow:0 18px 30px -22px var(--shadow);
  }
  .nav-drawer a{
    font-family:"Cinzel",serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-soft);padding:15px 24px;border-bottom:1px solid var(--line-soft);
    margin:0;
  }
  .nav-drawer a:last-child{border-bottom:0}
  .nav-drawer a:hover,.nav-drawer a:active,.nav-drawer a.on{
    color:var(--sienna);text-decoration:none;background:rgba(124,83,32,.06)}
}

/* ----- button groups: inline <a class="btn"> overlap when wrapped
         (vertical padding ignored on inline boxes). inline-flex + margin fixes it. ----- */
@media(max-width:600px){
  .btn{display:inline-flex;align-items:center;justify-content:center;margin-block:5px}
}

/* ----- tables: scroll/wrap instead of being clipped by overflow-x:hidden ----- */
@media(max-width:760px){
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  code,.mono{overflow-wrap:anywhere;word-break:break-word}
}

/* ----- verdict block (example/proof): stop nowrap heading forcing overflow ----- */
@media(max-width:640px){
  .verdict{flex-direction:column;align-items:flex-start;gap:10px}
  .verdict .big{white-space:normal}
}