85-mobile.css RawHistoryFolder

1@layer components {
2  .mr-touch-range { display: none; }
3
4  /* MR only: retain the shell's desktop layout and other pages' spacing. */
5  @media (max-width: 720px) {
6    body:has(#diffs[data-mr]) {
7      --pad: 0px;
8      --hdr-h: 97px;
9      overflow-x: clip;
10    }
11    body:has(#diffs[data-mr]) .work { padding-inline: 0; margin-inline: 0; gap: var(--s3); }
12    body:has(#diffs[data-mr]) main { min-width: 0; padding-inline: 0; }
13    body:has(#diffs[data-mr]) :is(.card, .mr-card, .mr-desc, .dfile, .dscroll, .code, .rail section) {
14      margin-inline: 0; border-inline: 0; border-radius: 0; min-width: 0; max-width: 100%;
15    }
16    body:has(#diffs[data-mr]) :is(.mr-h, .mr-desc.prose, .card-h, .mr-footer) { padding-inline: 4px; }
17    body:has(#diffs[data-mr]) .mr-footer :is(th, td) { padding-inline: var(--s1); }
18    body:has(#diffs[data-mr]) .mr-desc.prose > pre { margin-inline: -4px; padding-inline: 0; max-width: calc(100% + 8px); }
19    #diffs[data-mr] .dfile > summary { padding-inline: 0; border-inline: 0; border-radius: 0; }
20    #diffs[data-mr] :is(.dscroll, .code) { overflow-x: auto; overscroll-behavior-x: contain; padding-inline: 0; }
21    #diffs[data-mr] .dt .ln { width: calc(var(--lnw) + .5ch); min-width: calc(var(--lnw) + .5ch); padding-inline: .25ch; }
22    #diffs[data-mr] .dt .m { width: 1ch; }
23    #diffs[data-mr][data-diff] .uni { display: table; }
24    #diffs[data-mr][data-diff] .spl { display: none; }
25    #diffs[data-mr] .fnote td { padding-inline: 0; }
26    #diffs[data-mr] :is(.cform, .cmt) { width: min(65ch, calc(100vw - 5rem)); max-width: calc(100vw - 5rem); overflow-wrap: anywhere; }
27    body:has(#diffs[data-mr]) :is(input, textarea, select) { font-size: 16px; }
28    body:has(#diffs[data-mr]) .f-btns { flex-wrap: wrap; }
29    body:has(#diffs[data-mr]) .menu .menu-pop {
30      position: fixed; inset: auto 0 0; width: auto; max-width: 100%;
31      max-height: 75dvh; overflow-y: auto; border-radius: var(--r) var(--r) 0 0;
32      padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
33    }
34    body:has(#diffs[data-mr]) .mr-bar { position: static; }
35    /* A wrapping toolbar has no reliable fixed sticky height. */
36    body:has(#diffs[data-mr]) { --bar-h: 0px; }
37  }
38
39  @media (pointer: coarse), (hover: none) {
40    .mr-touch-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
41    /* Real, disjoint cells: never expand invisible targets into other lines
42       or into the neighbouring old/new gutter. */
43    #diffs[data-mr] .dt { line-height: max(var(--lh-code), 40px); }
44    #diffs[data-mr] .dt .ln { width: max(calc(var(--lnw) + .5ch), 40px); min-width: 40px; padding: 0; }
45    #diffs[data-mr] .spl .c-ln { width: max(calc(var(--lnw) + .5ch), 40px); }
46    #diffs[data-mr] .ln a { display: block; width: 100%; min-height: 40px; text-align: center; text-decoration: underline; }
47    .mr-touch-range[hidden] { display: none; }
48    #diffs[data-mr] .ln a[data-range-start] { outline: 2px solid var(--focus); background: var(--sel); }
49    body:has(#diffs[data-mr]) :is(.cform .btn, .menu .btn, .mr-touch-range .btn, .c-act button) { min-height: 40px; height: auto; padding-block: var(--s2); }
50    #diffs[data-mr] .cform { scroll-margin-block: calc(var(--hdr-h) + 12px); }
51    .mr-footer [data-mr-tabs] a { display: inline-flex; align-items: center; min-height: 40px; }
52  }
53}