1/* Fluid base sizing on small screens */
2@media (max-width: 768px){
3  html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
4  body{ font-size: clamp(15px, 3.9vw, 17px); line-height: 1.4; }
5}
6
7/* Page wrap: breathing room + full width */
8@media (max-width: 768px){
9  #wrap{
10    max-width: 100%;
11    padding: clamp(12px, 4vw, 20px);
12  }
13  #wrap h1{
14    font-size: clamp(1.2rem, 5.5vw, 1.6rem);
15    margin: 1rem 0 .6rem;
16    line-height: 1.25;
17  }
18  #wrap p, #wrap small{ opacity: .9; }
19}
20
21/* Action links at top (refresh/connect) chunkier tap area */
22@media (max-width: 768px){
23  .af{
24    display: inline-block;
25    padding: .55em .9em;
26    border-radius: .5em;
27    line-height: 1.2;
28    margin: .25em .35em .25em 0;
29  }
30}
31
32/* List of upload targets block buttons */
33@media (max-width: 768px){
34  #wrap ul{ list-style: none; padding: 0; margin: .5rem 0 1.2rem; }
35  #wrap li + li{ margin-top: .5rem; }
36  #wrap li a{
37    display: block;
38    padding: .9em 1.1em;
39    border-radius: .6em;
40    border: 1px solid var(--bg-u5);
41    background: rgba(255,255,255,.03);
42  }
43  html.y #wrap li a{ background: rgba(0,0,0,.04); border-color: #ddd; }
44}
45
46/* Login form tidy responsive grid */
47@media (max-width: 768px){
48  #lf{
49    display: grid;
50    grid-template-columns: 1fr auto;
51    gap: .6rem;
52    align-items: center;
53    margin: .6rem 0 1.4rem;
54  }
55  #lf input[type="password"],
56  #lf input[type="text"]{
57    width: 100%;
58    min-height: 44px;                 /* comfy tap target */
59    padding: .6em .8em;
60    border-radius: .5em;
61  }
62  #lf input[type="submit"]{
63    min-height: 44px;
64    padding: .6em 1.1em;
65    border-radius: .5em;
66  }
67}
68/* Narrow phones: stack button under input */
69@media (max-width: 420px){
70  #lf{ grid-template-columns: 1fr; }
71  #lf input[type="submit"]{ width: 100%; }
72}
73
74/* Toast: safe-area aware, full-width-ish, smoother scroll */
75@media (max-width: 768px){
76  #toast{
77    inset: auto calc(1em + var(--sa-right)) calc(1em + var(--sa-bottom)) calc(1em + var(--sa-left));
78    width: min(92vw, 34em);
79    margin: 0;
80    right: auto;                      /* avoid fighting inset */
81    transform: none;                  /* no slide-offscreen on mobile */
82    border-width: .3em 0;
83    line-height: 1.4;
84  }
85  #toast.vis{ transform: none; }
86  #toastb{
87    -webkit-overflow-scrolling: touch;
88    max-height: min(70svh, 70vh);
89  }
90  #toast.scroll #toastb{ margin-right: 0; padding-right: .25em; }
91  #toast a#toastc{ left: -.6em; width: .6em; padding: .3em .8em; }
92}
93
94/* Tooltip: smaller & less jumpy */
95@media (max-width: 768px){
96  #tth{ font-size: .8rem; padding: .15em .4em; }
97}
98
99/* Compact tip box (#tt) on phones */
100@media (max-width: 768px){
101  #tt{ max-width: calc(100% - 2.2em); margin: .6em 0; }
102  #tt.show{ padding: .8em 1em; }
103  #tt.show.b{ padding: 1.1em 1.4em; }
104}
105
106/* Modal overlay: edge-to-edge with safe-areas; scrollable body */
107@media (max-width: 768px){
108  #modal{ padding: var(--sa-top) var(--sa-right) var(--sa-bottom) var(--sa-left); }
109  #modal>table{ width: 100%; height: auto; }
110  #modal td{ vertical-align: top; }
111  #modalc{
112    margin: clamp(.5em, 2.5vw, 1em) auto;
113    width: min(92vw, 48em);
114    max-height: 80svh;
115    overflow: auto;
116    -webkit-overflow-scrolling: touch;
117    padding: .9em 1em;
118    border-radius: .6em;
119  }
120  #modalb{ padding-top: .6em; }
121  #modali{ width: 100%; margin: .8em 0 0; }
122}
123
124/* Centered fixed frame (#cf_frame) fluid on mobile */
125@media (max-width: 768px){
126  #cf_frame{
127    top: 5svh;
128    left: 50%;
129    transform: translateX(-50%);
130    width: min(92vw, 40em);
131    height: 70svh;
132    margin-left: 0;
133    border-width: .3em;
134    border-radius: .5em;
135  }
136}
137
138/* Markdown-ish (.mdo) smaller borders/margins on phones */
139@media (max-width: 768px){
140  .mdo h1{
141    margin: 1.2rem 0 .6rem;
142    padding: .4rem .2rem;
143    border-width: .25rem 0;
144    font-size: clamp(1.2rem, 6vw, 1.5rem);
145  }
146  .mdo h2{
147    margin-top: 1rem;
148    padding-left: .4rem;
149    font-size: clamp(1.05rem, 4.8vw, 1.3rem);
150  }
151  .mdo pre code{ padding: .5em .6em; }
152  .mdo ul, .mdo ol{ padding-left: .9em; }
153  .mdo ul ul, .mdo ul ol, .mdo ol ul, .mdo ol ol{
154    padding-left: 1.2em; border-left-width: .2em;
155  }
156  .mdo th, .mdo td{ padding: .25em .4em; }
157}
158
159/* repl button */
160@media (max-width: 768px){
161  #repl{
162    position: fixed;
163    right: calc(1rem + var(--sa-right));
164    bottom: calc(1rem + var(--sa-bottom));
165    display: inline-flex;
166    align-items: center;
167    justify-content: center;
168    width: 48px; height: 48px;
169    border-radius: 999px;
170    text-decoration: none;
171  }
172}