/* MOBILE POLISH (Claude Design handoff 7), what is still rendered: the rank tag, the suggested-objectives row and the scrub number.
   The old mobile shell's screens went with it (D569). */

/* the one-line row: checkbox · name · attr tag · mastery badge · +EXP */

.q-rank { flex: none; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--dim); min-width: 22px; text-align: center; padding: 1px 5px; border: 1px solid var(--line-soft); }

/* ---- suggested objectives — light, add / two-step remove ---- */
.sugg { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-soft); }

/* scrub number — tap to type, drag ↕ to scrub */
.scrub { display: inline-flex; align-items: stretch; border: 1px solid var(--line); background: var(--panel-2); user-select: none; transition: border-color .14s; }
.scrub.scrubbing { border-color: var(--accent); box-shadow: 0 0 16px -4px var(--glow); }
.scrub-b { flex: none; width: 34px; display: grid; place-items: center; font-size: 18px; color: var(--accent); transition: color .12s,background-color .12s,border-color .12s,opacity .12s,transform .12s; }
.scrub-b:hover { background: var(--accent); color: var(--accent-ink); }
.scrub-val { position: relative; box-sizing: border-box; width: 80px; padding: 9px 18px 9px 12px; display: flex; align-items: baseline; justify-content: center; gap: 4px; cursor: ns-resize; touch-action: none; }
.scrub.big .scrub-val { width: 98px; padding: 12px 20px 12px 14px; }
.scrub-n { font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--text); }
.scrub.big .scrub-n { font-size: 22px; }
.scrub.scrubbing .scrub-n { color: var(--accent); text-shadow: 0 0 12px var(--glow); }
.scrub-u { font-family: var(--font-mono); font-size: 10px; color: var(--dim); }
.scrub-input { width: 100%; box-sizing: border-box; background: transparent; border: none; outline: none; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--accent); padding: 0; }
.scrub.big .scrub-input { font-size: 22px; }
.scrub-grip { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 3px; opacity: .45; pointer-events: none; }
.scrub.scrubbing .scrub-grip { opacity: .9; }
.scrub-grip i { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; }
.scrub-grip i:first-child { border-bottom: 4px solid var(--accent); }
.scrub-grip i:last-child { border-top: 4px solid var(--accent); }


/* typing on the phone: the tab bar steps aside for the keyboard (shell.jsx marks data-typing; 2026-10-23) */
html[data-typing] [data-mob-bar] { display: none !important; }
/* the maker's sheet holds its place (dropping to the foot at the tap was a 60 px jump before the keyboard, 52); its ground fills the bar's room */
html[data-typing] [data-cmsheet] { box-shadow: 0 -26px 50px -18px #000, 0 80px 0 0 var(--bg-2) !important; }
/* REDUCED MOTION (html[data-motion="lite"]: always on the phone, a setting elsewhere — his 2026-10-25 later 14) carries every rule below that is about
   motion or the device's work; the tap sizes stay the phone's own (data-mode). */
/* the phone's screen froze on an old picture while taps went on underneath (his Pixel 8, 2026-10-23: "tile memory limits exceeded, some
   content may not draw", Scheduling's event sheet over a long page). Fewer, smaller GPU layers on the phone: no background blur (the panels
   are near-opaque already) and no standing will-change (the browser still lifts what is animating, while it animates). */
html[data-motion="lite"] *, html[data-motion="lite"] *::before, html[data-motion="lite"] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: auto !important; }
/* THE FAR SKY HOLDS STILL ON THE PHONE (his 2026-10-25 later 3: "every single motion I see stutters"). Anything animating or on its own layer
   under the page put the new page's content on fresh layers at every swap, and the phone shows a page before fresh layers are drawn: one or
   two blank frames (52's trace: checkerboard after activation). With the sky still, the page draws where the phone waits for it: 12 of 12
   swaps clean (52, test M). The sky jumps with the page, its brightness changes at once, its ring and its goals' pulse hold still. */
html[data-motion="lite"] [data-sky], html[data-motion="lite"] [data-sky] * { animation: none !important; transition: none !important; will-change: auto !important; }
html[data-motion="lite"] [data-wait-glow] { animation: none !important; }   /* the empty card's waiting glow: a loop that restarted at every mount */
/* and Workshop's orbits: each trail and each orbiting mark is turned by script every frame, and off a layer each turn was a redraw (headless
   at rest: 250 tiles, 90 ms of raster every 2 s; on their layers, none) */
html[data-motion="lite"] [data-trk], html[data-motion="lite"] [data-orb] { will-change: transform !important; }

/* EVERY BUTTON TAKES A 44 PX TAP ON THE PHONE (his ruling 2026-10-24 later 8; 52's audit: 72 of 238 targets under 44, Back 36, the range
   buttons 32 × 23, the steppers 26). The look keeps its size; an invisible box around the centre takes the tap. The old feel.css buttons keep
   their own ::after, and so does any button drawing on it (the new-here mark, glows 1 and 3): taken over, the mark stretched to the button and
   was cut to a wedge (his 2026-10-25 later 2). Each of those is 44 px itself. */
html[data-mode="mobile"] button { position: relative; }
html[data-mode="mobile"] button:not(.btn):not(.bigbtn):not(.train-btn):not(.prog-accept):not(.link-go):not(.dwin-done):not(.start-use):not(.cforge-go):not(.attr-accept):not(.lib-add):not([data-new-tab]):not([data-glow="1"]):not([data-glow="3"])::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); opacity: 0; }
/* the tap area is drawn at opacity 0 (it still takes taps): a button turning on takes data-glow="1", whose ::after is a black press shade that
   fades from the opacity it had, so at 1 it showed one black, square frame (52's frame-by-frame pass, the first run's Next / Add it / Set tier) */
/* a page's own entrance holds still on the phone, as the page itself does (Status's bands and Class's art and titles rose in on each visit:
   blank for two frames, then up over ~120 ms, 52 on 519b810) */
html[data-motion="lite"] [data-tab] [style*="st-rise"], html[data-motion="lite"] [data-tab] [style*="u-rise"],
html[data-motion="lite"] [data-tab] [style*="rc-fade"], html[data-motion="lite"] [data-tab] [style*="ghost-in"] { animation: none !important; }   /* Records' panels and its Day analysis / Long-term switch, Day's empty card */
/* a segmented control's marker keeps its layers: lifted only as it slid, the labels over it had to be lifted too and showed blank for two
   frames, a flat lit box (his 2026-10-25 later 3: Day's The week "flashes with some kind of horizontal long rectangle"; 52 on film) */
html[data-motion="lite"] [data-seg-marker] > * { will-change: transform !important; }
/* a button carrying the new-here mark keeps its 44 px tap on ::before (the mark is its ::after): Day's views are 32 tall (52 on 8107561) */
html[data-mode="mobile"] button[data-new-tab]:not([data-glow])::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); opacity: 0; }
/* Goals' Sky sits in the depth gauge, drawn at .78: its tap box is 44 px once scaled (52: it took 34 x 30) */
html[data-mode="mobile"] [data-gp-sky]::after { width: max(100%, 57px) !important; height: max(100%, 57px) !important; }   /* over the rule above, whose :not() list outranks it */