/* Fluid base sizing on small screens */
@media (max-width: 768px){
  html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body{ font-size: clamp(15px, 3.9vw, 17px); line-height: 1.4; }
}

/* Page wrap: breathing room + full width */
@media (max-width: 768px){
  #wrap{
    max-width: 100%;
    padding: clamp(12px, 4vw, 20px);
  }
  #wrap h1{
    font-size: clamp(1.2rem, 5.5vw, 1.6rem);
    margin: 1rem 0 .6rem;
    line-height: 1.25;
  }
  #wrap p, #wrap small{ opacity: .9; }
}

/* Action links at top (refresh/connect) chunkier tap area */
@media (max-width: 768px){
  .af{
    display: inline-block;
    padding: .55em .9em;
    border-radius: .5em;
    line-height: 1.2;
    margin: .25em .35em .25em 0;
  }
}

/* List of upload targets block buttons */
@media (max-width: 768px){
  #wrap ul{ list-style: none; padding: 0; margin: .5rem 0 1.2rem; }
  #wrap li + li{ margin-top: .5rem; }
  #wrap li a{
    display: block;
    padding: .9em 1.1em;
    border-radius: .6em;
    border: 1px solid var(--bg-u5);
    background: rgba(255,255,255,.03);
  }
  html.y #wrap li a{ background: rgba(0,0,0,.04); border-color: #ddd; }
}

/* Login form tidy responsive grid */
@media (max-width: 768px){
  #lf{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem;
    align-items: center;
    margin: .6rem 0 1.4rem;
  }
  #lf input[type="password"],
  #lf input[type="text"]{
    width: 100%;
    min-height: 44px;                 /* comfy tap target */
    padding: .6em .8em;
    border-radius: .5em;
  }
  #lf input[type="submit"]{
    min-height: 44px;
    padding: .6em 1.1em;
    border-radius: .5em;
  }
}
/* Narrow phones: stack button under input */
@media (max-width: 420px){
  #lf{ grid-template-columns: 1fr; }
  #lf input[type="submit"]{ width: 100%; }
}

/* Toast: safe-area aware, full-width-ish, smoother scroll */
@media (max-width: 768px){
  #toast{
    inset: auto calc(1em + var(--sa-right)) calc(1em + var(--sa-bottom)) calc(1em + var(--sa-left));
    width: min(92vw, 34em);
    margin: 0;
    right: auto;                      /* avoid fighting inset */
    transform: none;                  /* no slide-offscreen on mobile */
    border-width: .3em 0;
    line-height: 1.4;
  }
  #toast.vis{ transform: none; }
  #toastb{
    -webkit-overflow-scrolling: touch;
    max-height: min(70svh, 70vh);
  }
  #toast.scroll #toastb{ margin-right: 0; padding-right: .25em; }
  #toast a#toastc{ left: -.6em; width: .6em; padding: .3em .8em; }
}

/* Tooltip: smaller & less jumpy */
@media (max-width: 768px){
  #tth{ font-size: .8rem; padding: .15em .4em; }
}

/* Compact tip box (#tt) on phones */
@media (max-width: 768px){
  #tt{ max-width: calc(100% - 2.2em); margin: .6em 0; }
  #tt.show{ padding: .8em 1em; }
  #tt.show.b{ padding: 1.1em 1.4em; }
}

/* Modal overlay: edge-to-edge with safe-areas; scrollable body */
@media (max-width: 768px){
  #modal{ padding: var(--sa-top) var(--sa-right) var(--sa-bottom) var(--sa-left); }
  #modal>table{ width: 100%; height: auto; }
  #modal td{ vertical-align: top; }
  #modalc{
    margin: clamp(.5em, 2.5vw, 1em) auto;
    width: min(92vw, 48em);
    max-height: 80svh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: .9em 1em;
    border-radius: .6em;
  }
  #modalb{ padding-top: .6em; }
  #modali{ width: 100%; margin: .8em 0 0; }
}

/* Centered fixed frame (#cf_frame) fluid on mobile */
@media (max-width: 768px){
  #cf_frame{
    top: 5svh;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 40em);
    height: 70svh;
    margin-left: 0;
    border-width: .3em;
    border-radius: .5em;
  }
}

/* Markdown-ish (.mdo) smaller borders/margins on phones */
@media (max-width: 768px){
  .mdo h1{
    margin: 1.2rem 0 .6rem;
    padding: .4rem .2rem;
    border-width: .25rem 0;
    font-size: clamp(1.2rem, 6vw, 1.5rem);
  }
  .mdo h2{
    margin-top: 1rem;
    padding-left: .4rem;
    font-size: clamp(1.05rem, 4.8vw, 1.3rem);
  }
  .mdo pre code{ padding: .5em .6em; }
  .mdo ul, .mdo ol{ padding-left: .9em; }
  .mdo ul ul, .mdo ul ol, .mdo ol ul, .mdo ol ol{
    padding-left: 1.2em; border-left-width: .2em;
  }
  .mdo th, .mdo td{ padding: .25em .4em; }
}

/* repl button */
@media (max-width: 768px){
  #repl{
    position: fixed;
    right: calc(1rem + var(--sa-right));
    bottom: calc(1rem + var(--sa-bottom));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 999px;
    text-decoration: none;
  }
}