/* 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;
}
}