/* ====================================================================== F33 -- THE ROOM ON A PHONE (owner decision 26 b, 2026-09-03) A layout of its own, not a shrunken desktop. Loaded by ONE include line in make_room_live.py, which also carries the viewport meta the page never had (without it a phone lays the room out at 980px and shrinks it -- the measured "before"). Above the breakpoint nothing in this file applies and the desktop page is the page it was. THE INCLUDE SITS IN , ahead of the page's own two style blocks, so the viewport is declared before anything is laid out. That puts this file FIRST in the cascade, and every declaration in the phone block below therefore carries !important -- a later rule of equal specificity would otherwise win the tie. On a desktop the block never applies. THE BREAKPOINT: a viewport 768px wide or narrower, OR 500px tall or shorter (a phone held sideways is 844 wide and 390 tall -- a width test alone would hand it the desktop room). room-mobile.js arms on the same query. SCREEN SHARING PART 2 20261010 (ruling 255): the short clause asks for a coarse pointer too -- (max-width:768px), (max-height:500px) and (pointer:coarse). A phone held sideways is short with a coarse pointer; a desktop window made short by the browser's sharing bar (510 -> 463) has a fine pointer and stays the desktop page. The room page holds the same rule (window.__qPhoneMQ). THE ORDER OF THE SCREEN, top to bottom: the banner, one row -- the seats, a strip that scrolls sideways -- the board, first and full width, given every pixel the others leave -- the control bar, in flow at the bottom, thumb height. The transcript column becomes a sheet that rises over the board from the bar; the admin, outline and private-channel panels become sheets in the same place; a chair's card fills the screen; a tap on the board fills the screen with what is on it and a tap, a swipe down or the back control returns. The other reason for !important: the page's own script writes INLINE styles it never expects a stylesheet to contest -- --sw/--sh/--stg on the stage, left/top/width/height on the board and on every seat, --mcolw on the column, left/top/max-height on a card -- and only !important outranks an inline declaration. --stg is pinned to 1 because the stage is no longer scaled: every "N / var(--stg)" size the type-floor block computes then renders at exactly N. Type: nothing here is written below 13px rendered (Amendment k); the nameplate keeps the live layer's 15px; every colour is a page token so both themes hold. ====================================================================== */ #qm-tr, #qm-back { display:none } /* the phone fold's own elements exist only while a phone is in the room; outside the query (a window widened mid-meeting) they draw nothing */ #qv-tabs, #qv-more, #qv-sheet { display:none } #qm-state, #qm-notes { display:none } /* PHA 20261022 */ #qm-chat { display:none } /* PHB 20261022 */ @media (max-width:768px), (max-height:500px) and (pointer:coarse) { /* ---- the page ------------------------------------------------------- */ html { -webkit-text-size-adjust:100% !important} body.in-meeting { overflow:hidden !important } body.in-meeting .wrap.meet { padding:4px 6px 6px !important } .meet.active { flex-direction:column !important; height:var(--meeth, calc(100vh - 60px)) !important; overflow:hidden !important; gap:0 !important} body.in-meeting footer { display:none !important } /* F35: the desktop focus levels are not built on a phone; this is the backstop */ /* F65: #qp-concierge and #qp-materials are no longer built at all; the desktop's two docked doors (#qmatbtn, #qtrbtn2) and its Materials pop-up (#qmat) are desktop-only and join the backstop. */ #qviews, #qmore, #qview, #qtrace, #qmode, #qp-people, #qp-class, #qmat, #qmatbtn, #qtrbtn2, #qtr-x, #qcap, #qfocus, #qpip, #qbctl { display:none !important } /* ---- the banner: one short row ------------------------------------- */ body.in-meeting .banner-in { padding:4px 8px !important; gap:8px !important } body.in-meeting .brand-box { padding:3px 9px 4px !important } body.in-meeting .live-pill, body.in-meeting .member-chip { display:none !important } body.in-meeting .group-name { min-width:0 !important; flex:1 1 auto !important; overflow:hidden !important} body.in-meeting .gn-t { display:block !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important} body.in-meeting .banner-right { gap:6px !important; flex:none !important} #qadminbtn, #qoutbtn { padding:6px 10px !important; min-height:32px !important} /* ---- the room ------------------------------------------------------- */ .room-wrap { flex:1 1 auto !important; min-height:0 !important; height:auto !important; gap:6px !important } body.in-meeting .room { flex:1 1 auto !important; min-height:0 !important; border-radius:10px !important} .stage { position:static !important; transform:none !important; width:auto !important; height:100% !important; display:flex !important; flex-direction:column !important; gap:6px !important; padding:6px !important; box-sizing:border-box !important; --stg:1 !important } .stage > .console, .stage > .spill, .stage > .ustrip, .stage > .wall, .stage > .board-mount { display:none !important } /* ---- the seats: a strip that scrolls sideways ---------------------- */ /* F44 (task 62): 4px on the left is the dealer chip's overhang -- the strip clips whatever crosses its edge, and YOU is now the first card */ #seats { order:-1 !important; position:static !important; display:flex !important; flex-direction:row !important; align-items:flex-start !important; gap:6px !important; flex:none !important; overflow-x:auto !important; overflow-y:hidden !important; padding:4px 0 4px 4px !important; -webkit-overflow-scrolling:touch !important; scroll-snap-type:none !important; scrollbar-width:none !important; overflow-anchor:none !important} #seats::-webkit-scrollbar { display:none !important} /* F44 (task 62): NO SCROLL SNAP, and overflow-anchor none. With F33's snap the strip re-snapped on every join past the fourth card -- measured 84px then 174px, one chair each time -- because a chair joining earlier in the DOM than yours (CSS order puts you first) moved the browser's snap target off your card; anchoring alone did not stop it. The strip still scrolls freely by thumb. And a standing-room host with nobody on it takes no room: F33 forced both hosts visible, and each empty one cost the strip a gap. */ #seats .q-rail-host:not(:has(.q-rail)) { display:none !important} /* F44 (task 62): RELATIVE, not static -- the seat is the containing block of its own dealer chip and of the light sheen it wears (both are ::after, absolute); static handed them to the room. The inline left/top the desktop's layout() writes are annulled here instead. THE WIDTH IS A SHARE: four cards -- you, two others, McDougall -- fit a 390 phone side by side at 85px (owner, decision 32: the member and the concierge were off the right edge); three grow to the 104px F33 drew; five or more keep 84 and the strip scrolls. */ #seats .seat { position:relative !important; left:auto !important; top:auto !important; flex:1 1 84px !important; min-width:84px !important; max-width:104px !important; width:auto !important; scroll-snap-align:start !important; --lit:0deg !important} #seats .seat.speaking { transform:none !important} /* F44 (task 62): THE PEOPLE PRESENT, YOU FIRST. The member's own chair leads the strip, the others keep the order they hold, McDougall closes it, the standing-room rails follow. CSS order only -- the desktop's slots and layout() are untouched. */ #seats .seat.you-seat { order:-2 !important} #seats .seat.ai-seat { order:1 !important} #seats .q-rail-host { order:2 !important} /* F44 (task 62): an open Guest place is not shown on a phone; a chair reserved in somebody's name is. (F33 keyed this on .q-res, which the open place's nameplate wears too, so nothing was ever hidden -- the owner's "placeholders". The avatar's kind is the honest key: q-av-guest is an open place, q-av-reserved a name.) */ #seats .seat.q-empty:has(.q-av-guest) { display:none !important} /* q23 (task 23, decisions-log 2026-09-07d rule 61; owner: "We don't need the title u. It's just not necessary to have YOU."): the dealer chip is gone on the phone. The generated page still writes content:'YOU' on this same pseudo-element for the desktop (M10 only reached `.qg-tile .qg-you` and kin, a different, older badge) -- this rule is the one place the phone's copy is switched off, inside this file's own max-width:768px / max-height:500px scope, so the desktop is untouched. The member's own tile keeps its place first in the strip (order:-2, above) and in the call layout (~line 425/467); the "(you)" in the name text is untouched. */ #seats .seat.you-seat:not(.q-empty)::after { content:none !important; width:40px !important; height:40px !important; left:-4px !important; top:-3px !important; font-size:13px !important} /* F29 (task 47): a concierge this viewer may not see has no chair on a phone either */ body.q-ai-hidden #seats .seat.ai-seat, body.q-ai-off #seats .seat.ai-seat { display:none !important} /* Q7 (task 7, owner 2026-09-06; decisions log 2026-09-06f rules 19-20): HIS STATES ON A PHONE CARD. The card is 84-104px wide, so its .vid is 74-94 and the chip can have 64-84 of that -- enough for the word THINKING and not for ANSWERING or STILL WORKING, which would arrive clipped to three letters. A clipped word is worse than no word, so on a phone the chip drops the word and keeps the glyph, at a size that reads: a solid 9px disc while he is listening, a 9px ring while he is thinking, and NOTHING while he answers -- his card already lights with the room's speaking treatment there, and a third glyph on a 84px card is noise. The desktop keeps all three states and all four words. */ #seats .seat.ai-seat .q-mc { left:4px !important; bottom:4px !important; height:15px !important; padding:0 3px !important; gap:0 !important } #seats .seat.ai-seat .q-mc .q-mc-t { display:none !important} #seats .seat.ai-seat.q-mc-answer .q-mc { display:none !important} #seats .seat.ai-seat .q-mc .q-mc-d { width:9px !important; height:9px !important} #seats .seat.ai-seat.q-mc-think .q-mc .q-mc-d { border-width:2px !important} /* the standing-room rails (past the six seats) join the strip */ #seats .q-rail-host { position:static !important; display:flex !important; flex-direction:row !important; gap:6px !important; flex:none !important; width:auto !important; height:auto !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important } #seats .q-rail { width:auto !important; min-width:104px !important} /* ---- the board: first, and full width ------------------------------ */ /* relative, not static: the board stays in flow, its inline left/top are annulled below, and it remains the containing block for its own ::after accent hairline (static would let that hairline climb to the room's top edge, over the seat strip -- seen in the staged shots) */ #board { position:relative !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important; flex:1 1 auto !important; min-height:0 !important; border-width:2px !important; overflow:hidden !important; cursor:pointer !important; -webkit-tap-highlight-color:transparent !important} #board .b-title { font-size:24px !important} #board .qb-lines li { font-size:18px !important} /* on a tall board the points follow the title instead of floating mid-board; on a short one (sideways) they scroll inside the body rather than climbing over the title -- and the full-screen tap is the way to read them whole */ #board .b-body { overflow-y:auto !important; -webkit-overflow-scrolling:touch !important } #board .qb-lines { justify-content:flex-start !important; gap:12px !important; padding-top:2px !important } /* the kicker keeps to one line beside the name pill */ #board .b-kick { white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; min-width:0 !important } /* the idle board's art is an SVG drawn to slice-fill a wide board; on a tall one it keeps its own shape and sits in the middle instead. PHONE FOLD PHASE 0 (2026-09-10): drawn to the board's HEIGHT, centered and cropped at the sides -- see the Phase 0 block at the end of this query for why; this line is where the rule lives. */ #board > svg { width:max(100%, 1010px) !important; height:100% !important; max-height:none !important; max-width:none !important; margin:0 !important; position:relative !important; left:50% !important; transform:translateX(-50%) !important; flex:none !important } /* 1010 is the art's own viewBox width: seat9 draws the art `meet`, so a box at least that wide and the board's full height renders the art at its own scale on any board 470px or taller, cropped at the sides, the ground still filling the board. A shorter board (sideways) scales it down. */ /* a deck's title card is a wide image: shown whole, never cropped to fit */ #board .qs-card { object-fit:contain !important; background:#080D18 !important } :root[data-theme="light"] #board .qs-card { background:#EEF2F6 !important } /* F40: the light board's letterbox */ /* i7d (owner 2026-09-05): a shared screen keeps its own shape -- the board is exactly as tall as the share's head plus the picture, no bars above or below it; --qs-ar is written by the page from the picture's own width:height */ #board.q-media-share .b-body { overflow:hidden !important; justify-content:flex-start !important } #board.q-media-share .qs-share { flex:none !important; width:100% !important; height:auto !important; max-height:none !important; margin:0 !important; aspect-ratio:var(--qs-ar, 16/9) !important; object-fit:contain !important } /* F58 (task 76): the idle board's orientation line at the floor, two lines on a narrow board */ #board .q-idle-hint { font-size:13px !important; bottom:5% !important; padding:0 7% !important; line-height:1.5 !important } /* ---- the control bar: in flow at the bottom, thumb height ----------- */ /* F51 (task 69): THUMB TARGETS. Marc, in the test meeting: the button "was ridiculously small. I could never get it." Every bar control is 48 px (the platforms' minimum), the bar is 60 px tall, and its spacing is tightened so the six controls and the clock fit a 390 glass (measured: 50 + 204 + 48 + 48 + 12 = 362 of 369; one more px on the right for Leave's 1 px halo, which is what a flush edge would scroll); the narrow glass below. Relative, so the speakers note can sit on the bar. */ body.in-meeting .controls { position:relative !important; flex:none !important; margin:0 !important; padding:6px 5px 6px 4px !important; min-height:60px !important; border-radius:14px !important; gap:4px !important; justify-content:space-between !important; align-items:center !important} body.in-meeting .controls .ctl-btns { position:static !important; transform:none !important; margin:0 !important; gap:4px !important } body.in-meeting .controls .ctl-live .l, body.in-meeting .controls .ctl-note { display:none !important } body.in-meeting .controls .ctl-live { gap:5px !important; flex:none !important} body.in-meeting .controls .ctl-live .t { font-size:17px !important} body.in-meeting .cbtn { width:48px !important; height:48px !important } body.in-meeting .cbtn.leave { width:48px !important; height:48px !important; padding:0 !important } /* F51: the speakers switch's confirmation went only to the transcript -- a closed sheet on a phone -- so the bar itself says it, over its top edge. room-mobile.js makes the element and keeps it in step with the switch. */ #qm-spk { display:none } body.in-meeting .controls #qm-spk { display:block !important; position:absolute !important; left:50% !important; top:-11px !important; transform:translateX(-50%) !important; z-index:3 !important; pointer-events:none !important; white-space:nowrap !important; font-family:"Space Grotesk",sans-serif !important; font-weight:700 !important; font-size:13px !important; line-height:1 !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:#fff !important; background:var(--alert, #FF5A4E) !important; padding:4px 9px !important; border-radius:10px !important; box-shadow:0 2px 8px rgba(0,0,0,.35) !important } body.in-meeting .controls #qm-spk[hidden] { display:none !important } /* F54 (task 72): the connection notice on the phone's bar -- a capsule over the bar's top edge, above the speakers note's place so the two never meet */ body.in-meeting .controls #qconn { display:block !important; position:absolute !important; left:50% !important; top:-34px !important; transform:translateX(-50%) !important; z-index:3 !important; pointer-events:none !important; white-space:nowrap !important; max-width:calc(100% - 16px) !important; overflow:hidden !important; text-overflow:ellipsis !important; font-family:"Space Grotesk",sans-serif !important; font-weight:700 !important; font-size:13px !important; line-height:1 !important; letter-spacing:.04em !important; color:#fff !important; background:var(--alert, #FF5A4E) !important; padding:4px 9px !important; border-radius:10px !important; box-shadow:0 2px 8px rgba(0,0,0,.35) !important; box-sizing:border-box !important } body.in-meeting .controls #qconn.q-ok { background:var(--good, #2EE58A) !important; color:#12151B !important } body.in-meeting .controls #qconn[hidden] { display:none !important } /* F71 (task 9): the audio-playback capsule on the phone's bar. `.ctl-note` is display:none on the phone (line 166), so this element needs its own door exactly as F54's #qconn did. It sits ABOVE #qconn's line (-34) and the speakers note's (-11) so the three can stand at once and never meet, and unlike those two it TAKES THE TAP -- pointer-events:auto, because the tap on it is what starts the sound. Its ground is --well and its ink --ink-strong (the page's own pairing); the red is the border's, which is F70's resolution for the live pill and is why it is not a red fill. */ body.in-meeting .controls #qaudio { display:block !important; position:absolute !important; left:50% !important; top:-68px !important; transform:translateX(-50%) !important; z-index:4 !important; pointer-events:auto !important; white-space:nowrap !important; max-width:calc(100% - 16px) !important; overflow:hidden !important; text-overflow:ellipsis !important; font-family:"Space Grotesk",sans-serif !important; font-weight:700 !important; font-size:13px !important; line-height:1 !important; letter-spacing:.04em !important; color:var(--ink-strong) !important; background:var(--well) !important; border:1px solid var(--alert, #FF5A4E) !important; padding:7px 11px !important; border-radius:10px !important; box-shadow:0 2px 8px rgba(0,0,0,.35) !important; box-sizing:border-box !important; cursor:pointer !important; -webkit-tap-highlight-color:transparent !important } body.in-meeting .controls #qaudio[hidden] { display:none !important } /* F51: a narrow glass (360-379 px, Galaxy-class and the small iPhone): the live dot goes, the clock at 15 px, the gaps at 3 -- 32 + 201 + 48 + 48 + 9 = 338 of 343 on a 360 phone; nothing under the floor */ @media (max-width:379px) { body.in-meeting .wrap.meet { padding:4px 4px 6px !important } body.in-meeting .controls { gap:3px !important } body.in-meeting .controls .ctl-btns { gap:3px !important } body.in-meeting .controls .live-dot { display:none !important } body.in-meeting .controls .ctl-live .t { font-size:15px !important } } #q-mark { display:none !important } /* the corner mark: no room for it here */ #qm-tr { display:inline-flex !important} /* F34 (task 52): a room that keeps no record has no transcript, so no transcript button */ body.q-norecord #qm-tr { display:none !important} /* ---- the transcript column becomes a sheet ------------------------- */ /* F65 (redesign task 3, decision 6): THE TRANSCRIPT FILLS THE SCREEN. The bottom sheet (html.qm-tr, bottom:72px, min(62vh,520px)) is retired -- on a phone it took too much of the room and showed too little of the transcript. The column takes the full-screen idiom the board already had, with the same back control, the same swipe and the same Escape. */ .mcol.rcol { position:fixed !important; inset:0 !important; width:auto !important; height:auto !important; max-height:none !important; padding:0 !important; margin:0 !important; z-index:66 !important; box-sizing:border-box !important; background:var(--deep) !important; border:none !important; border-radius:0 !important; box-shadow:none !important; transform:translateY(100%) !important; transition:transform .25s ease !important; opacity:1 !important; pointer-events:auto !important; overflow:hidden !important} html.qm-trfull .mcol.rcol { transform:none !important} html.qm-trfull #acc-tr { flex:1 1 auto !important; min-height:0 !important } .mcol.rcol .mside { padding:8px 8px 8px !important; gap:8px !important} #rgrip, #rhide, #rshow, #vgrip, #cgrip { display:none !important } html.qm-trfull #qm-tr { background:var(--info) !important; border-color:var(--info) !important; color:#fff !important} /* F65: Materials keeps its phone path -- the door that sat on the transcript's header -- and opens the same full-screen idiom. */ #qm-mat-open { position:absolute !important; right:11px !important; top:11px !important; z-index:4 !important; font-family:"Space Grotesk",sans-serif !important; font-weight:700 !important; font-size:13px !important; color:var(--info) !important; background:rgba(77,166,255,.14) !important; border:1px solid var(--info) !important; border-radius:999px !important; padding:3px 13px !important; cursor:pointer !important } #qm-mat { position:fixed !important; inset:0 !important; z-index:67 !important; display:none !important; flex-direction:column !important; background:var(--deep) !important; overflow-y:auto !important; padding:14px 12px 18px !important; box-sizing:border-box !important } html.qm-matfull #qm-mat { display:flex !important } #qm-mat .qm-mat-h { font-family:"Space Grotesk",sans-serif !important; font-weight:700 !important; font-size:15px !important; color:var(--ink) !important; margin:0 0 12px !important; padding-right:56px !important } /* ---- the fixed panels become sheets in the same place ---------------- */ /* F65: #qup (F31's Upload panel) is retired -- Materials is #qm-mat here. */ #qadmin, #qoutline, #qnames, #qset, #qmem, #qai { left:8px !important; right:8px !important; width:auto !important; top:auto !important; bottom:72px !important; max-height:min(62vh, 520px) !important; overflow-y:auto !important; box-sizing:border-box !important} /* F51 */ /* ---- q5: THE MEMBERS GRID IS A CARD PER MEMBER HERE -------------------- Owner ruling 2026-09-06e rule 13 ("Definitely fix the overflow problem"). F28 drew the members as a table of full-word columns. It never fitted a phone -- five columns measured 384px of table in a 350px sheet -- and F61's sixth column (q3, administrator access as a grant) took it to 486, so the Administrator switch sat off the screen entirely: measured on the deployed page, elementFromPoint at that control returned nothing at 390x844 and the page behind the sheet at 360x780. Six switch columns cannot fit 350px at the 13px type floor (Amendment k), and a sideways swipe inside a sheet is the failure the owner named, so on a phone the table is not a table: each member is a card, the name its full-width title, the six grants two to a line as labelled switches. The sheet then scrolls one way only, down. The labels are the grid's own column headings, carried on each cell as `data-l` by make_room_live.py -- no string is invented here, and the head row simply is not drawn. The desktop keeps the table untouched. */ #qmem .qm-grid, #qmem .qm-grid tbody, #qmem .qm-grid tr, #qmem .qm-grid td { display:block !important } #qmem .qm-grid thead { display:none !important } #qmem .qm-grid { width:100% !important; border-collapse:separate !important } /* the gaps are measured, not chosen: at 360 the widest heading (ADMINISTRATOR, 13 characters of Space Mono at the 13px floor) needs 101px, and a 10px column gap with an 8px gap to the switch left it 104 -- close enough that the bold face clipped it to ADMINISTRA... 6 and 6 give it 108. */ #qmem .qm-grid tr { display:grid !important; grid-template-columns:1fr 1fr !important; column-gap:6px !important; row-gap:2px !important; align-items:center !important; margin-top:8px !important; padding:8px 8px 10px !important; border:1px solid var(--hair) !important; border-radius:10px !important; background:var(--well) !important; box-sizing:border-box !important } #qmem .qm-grid td { border-top:none !important; padding:0 !important; text-align:left !important; min-width:0 !important } /* the card's title */ #qmem .qm-grid td.qm-n { grid-column:1 / -1 !important; max-width:none !important; font-family:"Space Grotesk",sans-serif !important; font-weight:700 !important; font-size:15px !important; color:var(--ink-strong) !important; padding-bottom:7px !important; margin-bottom:5px !important; border-bottom:1px solid var(--hair) !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important } /* One grant: its column heading, then the switch the desktop draws, PACKED TOGETHER. The slack goes at the end of the cell, never between the label and its own switch: with the switch pushed to the cell's right edge instead, it lands against the NEXT column's label and the pair a thumb is reading stops being obvious (measured on the staged page at 390 and 360). */ #qmem .qm-grid td:not(.qm-n) { display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:6px !important; min-height:34px !important } #qmem .qm-grid td:not(.qm-n)::before { content:attr(data-l) !important; flex:0 1 auto !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-family:"Space Mono",monospace !important; font-size:13px !important; font-weight:700 !important; text-transform:uppercase !important; color:var(--mut) !important } /* the viewer's own Administrator cell is a statement, not a switch, and `you` takes the room the switch would have: it gets the line to itself, so the heading is never the one thing on the card that has to be clipped (measured at 360: the label needs 104px and had 98 beside `you` in half a card). */ #qmem .qm-grid td.qm-me { grid-column:1 / -1 !important; color:var(--mut) !important; font-size:13px !important } /* the switch itself is the desktop's, unchanged -- the card gives it the room */ #qmem .qm-grid input { flex:0 0 auto !important } /* the Spotlight row below the cards keeps its own width, whatever a name is */ #qmem .qm-spotrow .qm-spot { max-width:100% !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important } /* ---- OL17: the McDougall panel is a sheet in the Admin menu's place ---- The owner's ruling 5: the sheet by default, so the webcam strip stays in view above it, with a pull-up to full screen for a long answer. It is the same element the desktop draws as a pop-over; on the phone the page parents it to the body, because #rside is a transformed off-screen column here and a fixed child of a transformed ancestor resolves against the ancestor. `#qpriv` is retired -- its functions are inside this panel. */ #qmc { left:8px !important; right:8px !important; width:auto !important; top:auto !important; bottom:72px !important; max-height:min(62vh, 520px) !important; overflow:hidden !important; box-sizing:border-box !important; z-index:64 !important } #qmc.qp-over { position:fixed !important; inset:auto !important } /* the pull-up: the board's own full-screen idiom, the same back control */ html.qm-mcfull #qmc { left:0 !important; right:0 !important; top:0 !important; bottom:0 !important; max-height:none !important; border-radius:0 !important; border-width:0 !important; z-index:68 !important; padding:14px 12px 18px !important } html.qm-mcfull #qmc .qn-t { padding-right:56px !important } html.qm-mcfull #qm-back { display:flex !important } /* the grip that says the sheet pulls up; it is the control, not decoration */ #qmc .mc-grip { display:block !important } /* ---- a chair's card fills the screen ---------------------------------- */ /* OL17: the member's card is untouched here. The administrator no longer reaches a full-screen card for McDougall at all -- touching him opens the panel -- so this rule stopped applying to him by the door, not by a selector. */ .q-card { left:0 !important; top:0 !important; right:0 !important; bottom:0 !important; width:auto !important; max-width:none !important; height:100% !important; max-height:none !important; border-radius:0 !important; border:none !important; z-index:70 !important; animation:none !important} .q-card .qc-x { width:40px !important; height:40px !important; font-size:20px !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:10px !important} .q-card .qc-body { padding:14px 16px 20px !important} /* ---- the board, full screen on a tap ----------------------------------- */ html.qm-full #board { position:fixed !important; inset:0 !important; width:auto !important; height:auto !important; z-index:66 !important; border-radius:0 !important; border-width:0 !important; outline:none !important} #qm-back { position:fixed !important; right:10px !important; top:10px !important; z-index:67 !important; width:40px !important; height:40px !important; align-items:center !important; justify-content:center !important; border-radius:10px !important; border:1px solid rgba(255,255,255,.28) !important; background:rgba(8,12,18,.72) !important; color:#F2F6FA !important; font-family:"Space Grotesk",sans-serif !important; font-weight:700 !important; font-size:18px !important; line-height:1 !important; cursor:pointer !important; -webkit-tap-highlight-color:transparent !important} html.qm-full #qm-back, html.qm-trfull #qm-back, html.qm-matfull #qm-back { display:flex !important} html.qm-full #board .b-head { padding-right:62px !important } /* the back control's room */ html.qm-full .mcol.rcol { transform:translateY(calc(100% + 80px)) !important} /* ---- the gate and the landing fit the phone --------------------------- */ .qgate-card { width:min(320px, calc(100vw - 32px)) !important; box-sizing:border-box !important} #qgate input, #ql-num { font-size:16px !important} /* 16: iOS does not zoom the page into a field at 16 */ /* F43 (task 61): the pre-join screen is a sheet from the bottom, scrolling inside itself */ #qgate { align-items:flex-end !important } .qgate-card { width:100% !important; max-height:calc(100vh - 20px) !important; overflow-y:auto !important; border-radius:16px 16px 0 0 !important; padding:18px 18px 22px !important } .qg-prev { max-height:36vh !important } /* ---- sideways: the seats go down the left of the board ---------------- */ @media (orientation:landscape) and (max-height:500px) { .stage { flex-direction:row !important} #seats { order:-1 !important; flex-direction:column !important; align-items:stretch !important; overflow-x:hidden !important; overflow-y:auto !important; width:108px !important; padding:3px 0 0 4px !important; scroll-snap-type:none !important} /* F44: down the left the share is the column's width, not a flex basis */ #seats .seat { flex:0 0 auto !important; width:auto !important; min-width:0 !important; max-width:none !important} #seats .q-rail-host { flex-direction:column !important} body.in-meeting .banner-in { padding:2px 8px !important } body.in-meeting .brand-box { padding:2px 9px 3px !important } body.in-meeting .controls { min-height:52px !important; padding:3px 8px !important } body.in-meeting .cbtn, body.in-meeting .cbtn.leave { width:44px !important; height:44px !important} /* F51: 44 sideways */ body.in-meeting .controls .ctl-live .t { font-size:20px !important } .mcol.rcol { bottom:62px !important; height:min(70vh, 300px) !important} #qadmin, #qoutline, #qnames, #qup, #qset, #qmem, #qmc, #qai { bottom:62px !important; max-height:min(70vh, 300px) !important} } /* ---- F45 (task 63): A ROOM OF TWO PEOPLE IS A CALL ------------------------ */ /* html.qm-call is set by the page's own phone block while the room holds exactly two people (the concierge not counted). The stage becomes a grid: a top row of three tiles -- you, the other person, McDougall when the room shows him (F29's body classes are the administrator's one switch) -- and the board large below. html.qm-swap: the other person large in the board's place (#qm-big, the page's second element on their camera track, or a medallion in their hue) and the board a small tile in the other person's place, showing the card's title and a count of cards that arrived while it was small (#qm-bsmall). Both elements exist only on a phone; on a desktop the page never creates them. */ html.qm-call .stage { display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; grid-template-rows:auto minmax(0, 1fr) !important; gap:6px !important; align-items:stretch !important } html.qm-call body.q-ai-hidden .stage, html.qm-call body.q-ai-off .stage { grid-template-columns:repeat(2, minmax(0, 1fr)) !important } html.qm-call #seats { display:contents !important } html.qm-call #seats .seat.q-empty, html.qm-call #seats .q-rail-host { display:none !important } html.qm-call #seats .seat { max-width:none !important; min-width:0 !important; width:auto !important; flex:none !important } html.qm-call #seats .seat.you-seat { grid-column:1 !important; grid-row:1 !important } html.qm-call #seats .seat.qm-other { grid-column:2 !important; grid-row:1 !important } html.qm-call #seats .seat.ai-seat { grid-column:3 !important; grid-row:1 !important } html.qm-call #board { grid-column:1 / -1 !important; grid-row:2 !important; min-height:0 !important; flex:none !important } #qm-big, #qm-bsmall { display:none } /* the swap: the other person large below, the board a small tile in their place */ html.qm-call.qm-swap #seats .seat.qm-other { display:none !important } html.qm-call.qm-swap #board { grid-column:2 !important; grid-row:1 !important; min-height:0 !important; cursor:pointer !important } html.qm-call.qm-swap #board > * { display:none !important } html.qm-call.qm-swap #board > #qm-bsmall { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; width:100% !important; height:100% !important; padding:4px 6px !important; box-sizing:border-box !important; text-align:center !important; color:var(--ink-strong, #E6EEF5) !important; pointer-events:none !important } #qm-bsmall .qm-bs-l { font-family:"Space Grotesk",sans-serif !important; font-weight:700 !important; font-size:13px !important; line-height:1 !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:var(--ma, #9FB0C3) !important } #qm-bsmall .qm-bs-t { font-family:"Inter",sans-serif !important; font-size:13px !important; line-height:1.2 !important; max-height:2.4em !important; overflow:hidden !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; word-break:break-word !important } #qm-bsmall .qm-bs-n { font-family:"Space Grotesk",sans-serif !important; font-weight:700 !important; font-size:13px !important; line-height:1 !important; padding:2px 6px !important; border-radius:9px !important; color:#fff !important; background:var(--info, #4DA6FF) !important } html.qm-call.qm-swap #qm-big { display:block !important; position:relative !important; grid-column:1 / -1 !important; grid-row:2 !important; min-height:0 !important; border-radius:10px !important; overflow:hidden !important; background:#080B10 !important; border:2px solid var(--hair, rgba(255,255,255,.14)) !important; box-sizing:border-box !important } html.qm-call.qm-swap #qm-big.speaking { border-color:rgba(255,198,26,.75) !important; box-shadow:0 0 18px rgba(255,198,26,.25) !important } #qm-big video { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important } #qm-big .qm-big-med { position:absolute !important; inset:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; background:linear-gradient(180deg,#141A21,#0B0F14) !important } #qm-big.qm-live .qm-big-med { display:none !important } #qm-big .qm-big-med span { width:112px !important; height:112px !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; border:3px solid var(--qm-hue, var(--info, #4DA6FF)) !important; color:var(--qm-hue, var(--info, #4DA6FF)) !important; font-family:"Space Grotesk",sans-serif !important; font-weight:700 !important; font-size:40px !important; background:rgba(0,0,0,.35) !important } #qm-big .qm-big-chin { position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; display:flex !important; align-items:center !important; gap:8px !important; padding:8px 12px !important; background:linear-gradient(transparent, rgba(0,0,0,.78)) !important; font-family:"Space Grotesk",sans-serif !important; font-weight:600 !important; font-size:15px !important; color:#F2F6FA !important } #qm-big .qm-big-nm { flex:1 1 auto !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important } #qm-big .qm-big-marks { display:flex !important; gap:6px !important; flex:none !important } #qm-big .qm-big-marks .q-mst, #qm-big .qm-big-marks .q-cst { display:flex !important; padding:3px !important; border-radius:6px !important; color:var(--alert, #FF5A4E) !important; background:rgba(255,90,78,.16) !important; box-shadow:0 0 0 1px rgba(255,90,78,.55) !important } #qm-big .qm-big-marks svg { display:block !important; width:18px !important; height:18px !important } /* sideways: the tiles down the left, the large picture or the board to the right */ @media (orientation:landscape) and (max-height:500px) { html.qm-call .stage { grid-template-columns:108px minmax(0, 1fr) !important; grid-template-rows:repeat(3, auto) minmax(0, 1fr) !important } html.qm-call body.q-ai-hidden .stage, html.qm-call body.q-ai-off .stage { grid-template-columns:108px minmax(0, 1fr) !important; grid-template-rows:repeat(2, auto) minmax(0, 1fr) !important } html.qm-call #seats .seat.you-seat { grid-column:1 !important; grid-row:1 !important } html.qm-call #seats .seat.qm-other { grid-column:1 !important; grid-row:2 !important } html.qm-call #seats .seat.ai-seat { grid-column:1 !important; grid-row:3 !important } html.qm-call #board { grid-column:2 !important; grid-row:1 / -1 !important } html.qm-call.qm-swap #board { grid-column:1 !important; grid-row:2 !important; aspect-ratio:16/10 !important } html.qm-call.qm-swap #qm-big { grid-column:2 !important; grid-row:1 / -1 !important } } /* ---- q20 (task 20, interface Sec5 P9): THE PRIVATE MICROPHONE ON THE PHONE Task 19's model is already here whole -- the switch, the glow, the tint and the muted bar are in the generated page and the phone runs the same JavaScript. Two things are the phone's own, and only two. 1. THE SWITCH TAKES THE PHONE'S TOUCH SIZE. Every control in the bar below is 48px (S6: "touch targets stay full size on the phone"), and the sheet's header has the width for it -- measured 374px wide with the clock at the far end. The spec's DEFAULT allowed 40px if there were no room; there is, so the switch matches its neighbours instead. 2. THE GLOW IS DRAWN INSIDE HIS TILE. #seats is `overflow-x:auto` on the phone, so a shadow thrown 50px outward is cut at the strip's edge and his tile -- the LAST one in the strip -- loses most of it. The spec's DEFAULT names this case: the glow goes inside the tile's own bounds on the phone only. Same colour, same token, same meaning. */ #qmc .mc-micbtn { width:48px !important; height:48px !important } #qmc .mc-micbtn svg { width:24px !important; height:24px !important } body.q-privmic #seats .seat.ai-seat::before { box-shadow:inset 0 0 0 3px var(--action-2), inset 0 0 22px 6px var(--action-2) !important; z-index:8 !important } body.q-privmic #seats .seat.ai-seat { z-index:auto !important } /* ==================================================================== THE PHONE FOLD, PHASE 0 (2026-09-10; owner-approved project record: W:/brainstorms/quorum/phone-fold-project-20260910.md). The defects a phone member saw on the day of the TALC overview meeting, each fixed at its cause, and the theme's chrome brought to the phone. Phase 1 replaces the header pills and the bar; nothing here anticipates it. Every rule below sits later in this same query than the rule it corrects, at equal or higher specificity, with the file's !important. ==================================================================== */ /* 1. THE TALC MARK DRAWN TWICE. The mark is an of the whole logo PNG inside an svg whose viewBox crops it to the figures. The desktop clips the svg (q26's top-bar block, min-width:769px); the phone never did, so the whole PNG rendered over the wordmark. */ body.in-meeting .q-talc .q-talc-fig { overflow:hidden !important } /* 2. THE CHROME. q26 paints the top bar and seat9 the command bar with --chrome on the desktop only (min-width:769px and min-height:501px); the phone fell back to --banner (near-black in dark, white in light) and --panel. The same tokens here, both schemes; the brand box loses its card dress as it did on the desktop. */ body.in-meeting header.banner { background:var(--chrome) !important; border-bottom-color:transparent !important; color:var(--chrome-ink) !important } body.in-meeting .controls { background:var(--chrome) !important; border-color:transparent !important } body.in-meeting .brand-box { background:transparent !important; border-color:transparent !important; box-shadow:none !important } /* the Outline and Admin pills on the chrome's own ink and hairline, until Phase 1 moves them into More */ #qoutbtn, #qadminbtn { background:transparent !important; border:1px solid var(--hair) !important; color:var(--chrome-ink) !important } /* 3. THE BAR: seven controls fit the glass. The room name and the timer (q5-where, the desktop's taskbar line) wrapped under the captions button and made the bar 100px tall, with Leave off the right edge. The left block goes in flow; the name and the timer wait for Phase 1's top bar. Measured at 375: 48 + 201 + 48 + 48 + 12 = 357 of 358. */ body.in-meeting .controls .q5-left { position:static !important; height:auto !important; gap:0 !important; flex:none !important } body.in-meeting .controls .q5-where { display:none !important } @media (max-width:369px) { /* a 360 glass: 44px controls, the other platform minimum -- 326 of 343 */ body.in-meeting .cbtn, body.in-meeting .cbtn.leave { width:44px !important; height:44px !important } } /* 4. THE IDLE LOCKUP. The idle art is one svg (1010x470) that the phone drew to the board's WIDTH -- 353px, a third of its size -- so its 13px wordmark and "Powered by" line would have rendered at 4.5px, which is why q15 hid them under this query. The rule above (the board section) now draws the art to the board's height, centered and cropped at the sides, so the type keeps its size and the ground still fills the board; the lockup returns. */ #board > svg text.q5-wm, #board > svg #q5-pb { display:inline !important } /* 5. THE PRE-JOIN SCREEN fills the glass. F43 drew a sheet on the lower half and left the upper half empty; the preview takes that room. */ #qgate { align-items:stretch !important } .qgate-card { height:100vh !important; height:100dvh !important; max-height:none !important; border-radius:0 !important; display:flex !important; flex-direction:column !important; padding:max(18px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom)) !important } .qg-prev { flex:1 1 auto !important; max-height:none !important; min-height:140px !important } /* ==================================================================== THE PHONE FOLD, PHASE 1 (2026-09-10): THE FRAME. One thing at a time between a top bar and a bottom bar (owner: "view only the board ... only the participants or only the transcript or only McDougall since real estate is expensive"). `html.qv` is set by the fold's script once a phone is in the room; nothing below applies before that, and nothing applies on a desktop. The views are html classes: qv-board · qv-people · qv-tr · qv-mc; qv-more is the menu sheet. --qv-top and --qv-bot are written by the script: the header's bottom edge (top bar + tabs) and the bottom bar's height, so the full-screen surfaces the phone already had (the transcript, McDougall's panel) sit BETWEEN the tabs and the bar instead of over them. ==================================================================== */ /* ---- the top bar: the marks left, Leave right (ruling 2); the Outline and Admin pills and the theme switch retire into More (ruling 1) ---------- */ html.qv body.in-meeting #qoutbtn, html.qv body.in-meeting #qadminbtn, html.qv body.in-meeting .banner-right #q-theme { display:none !important } html.qv body.in-meeting .banner-right #leavebtn { display:inline-flex !important; width:40px !important; height:40px !important; padding:0 !important; margin:0 !important; border-radius:999px !important; align-items:center !important; justify-content:center !important; background:transparent !important; color:var(--chrome-off) !important; border:1px solid var(--chrome-off) !important; opacity:1 !important } html.qv body.in-meeting .banner-right #leavebtn svg { width:18px !important; height:18px !important } html.qv body.in-meeting .banner-right #leavebtn::before { display:none !important } /* ---- the view tabs: one row under the top bar, on the chrome ---------- */ #qv-tabs { display:none } html.qv body.in-meeting #qv-more { display:inline-flex !important } html.qv body.in-meeting #qv-tabs { display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; padding:0 4px 2px !important; margin:0 !important; background:var(--chrome) !important; box-sizing:border-box !important } html.qv body.in-meeting #qv-tabs .qv-t { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:2px !important; min-height:46px !important; padding:4px 2px 5px !important; border:0 !important; border-bottom:2px solid transparent !important; border-radius:0 !important; background:transparent !important; color:var(--chrome-ink) !important; opacity:.66 !important; font-family:var(--font-body) !important; font-size:11px !important; font-weight:600 !important; line-height:1 !important; letter-spacing:.01em !important; cursor:pointer !important; -webkit-tap-highlight-color:transparent !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important } html.qv body.in-meeting #qv-tabs .qv-t svg { width:20px !important; height:20px !important; display:block !important } html.qv body.in-meeting #qv-tabs .qv-t[aria-selected="true"] { opacity:1 !important; border-bottom-color:var(--chrome-sel) !important } /* ---- the views ------------------------------------------------------- */ html.qv.qv-board body.in-meeting #seats { display:none !important } html.qv.qv-people body.in-meeting #board { display:none !important } html.qv.qv-people body.in-meeting #seats { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; grid-auto-rows:max-content !important; align-content:start !important; gap:8px !important; flex:1 1 auto !important; min-height:0 !important; overflow-x:hidden !important; overflow-y:auto !important; padding:6px !important } html.qv.qv-people body.in-meeting #seats .seat { max-width:none !important; min-width:0 !important; width:auto !important; flex:none !important } html.qv.qv-people body.in-meeting #seats .q-rail-host { display:contents !important } html.qv.qv-people body.in-meeting #seats .q-rail { min-width:0 !important; width:auto !important } /* the transcript (F65's full-screen column) and McDougall's panel (OL17's pull-up) keep their idioms and take the room between the tabs and the bar */ html.qv .mcol.rcol { top:var(--qv-top, 96px) !important; bottom:var(--qv-bot, 72px) !important; height:auto !important; max-height:none !important; z-index:60 !important; border-radius:0 !important } html.qv.qm-full .mcol.rcol { transform:translateY(calc(100% + 80px)) !important } /* PHONE ROUND 20260926 (item 1): THE BOTTOM BAR IS THE PERSON'S OWN. Closed, the column goes WHOLLY below the screen's bottom edge -- its own height, the bar's height and 8 px more -- instead of its own height alone, which left its head standing on the bar (at z 60, over every button of it). It opens as before, from the Transcript tab (html.qm-trfull: transform none), between the tabs and the bar. */ html.qv:not(.qm-trfull) .mcol.rcol { transform:translateY(calc(100% + var(--qv-bot, 72px) + 8px)) !important } html.qv #qmc, html.qv.qm-mcfull #qmc { position:fixed !important; left:0 !important; right:0 !important; top:var(--qv-top, 96px) !important; bottom:var(--qv-bot, 72px) !important; width:auto !important; max-height:none !important; border-radius:0 !important; border-width:0 !important; z-index:60 !important; padding:14px 12px 18px !important; overflow:hidden !important } html.qv:not(.qv-mc) #qmc { display:none !important } /* the tabs are the way out of a view: the back control keeps only the two surfaces that still cover the tabs (the full-screen board, Materials) */ html.qv.qm-trfull:not(.qm-full):not(.qm-matfull) #qm-back, html.qv.qm-mcfull:not(.qm-full):not(.qm-matfull) #qm-back { display:none !important } html.qv #qmc .mc-grip { display:none !important } /* ---- the bottom bar: Microphone · Camera · Raise hand · Captions · More; the speakers switch and the transcript button go into More and the tabs; Leave went to the top bar --------------------------------------------- */ html.qv body.in-meeting .controls { justify-content:space-evenly !important; gap:0 !important; padding:6px 2px !important } html.qv body.in-meeting .controls .ctl-btns { display:contents !important } html.qv body.in-meeting .controls .cbtn.q-spk, html.qv body.in-meeting .controls #qm-tr, html.qv body.in-meeting .controls #leavebtn, html.qv body.in-meeting .controls #q28ovf { display:none !important } html.qv body.in-meeting .controls .cbtn.q-mic { order:1 !important } html.qv body.in-meeting .controls .cbtn.q-cam { order:2 !important } html.qv body.in-meeting .controls .cbtn[aria-label="Raise hand"] { order:3 !important } html.qv body.in-meeting .controls #q5-left { order:4 !important } html.qv body.in-meeting .controls #qv-more { order:5 !important } /* ---- More: the menu sheet over the bar -------------------------------- */ #qv-sheet { display:none } html.qv body.in-meeting #qv-sheet { display:none; position:fixed !important; left:8px !important; right:8px !important; bottom:var(--qv-bot, 72px) !important; z-index:65 !important; box-sizing:border-box !important; background:var(--panel) !important; color:var(--ink) !important; border:1px solid var(--hair) !important; border-radius:14px !important; padding:6px !important; box-shadow:0 8px 28px rgba(0,0,0,.35) !important } html.qv.qv-more body.in-meeting #qv-sheet { display:block !important } #qv-sheet .qv-i { display:flex !important; align-items:center !important; gap:12px !important; width:100% !important; min-height:48px !important; padding:0 10px !important; border:0 !important; background:transparent !important; color:var(--ink) !important; font-family:var(--font-body) !important; font-size:15px !important; font-weight:600 !important; text-align:left !important; border-radius:10px !important; cursor:pointer !important; -webkit-tap-highlight-color:transparent !important } #qv-sheet .qv-i:active { background:var(--well) !important } #qv-sheet .qv-i svg { width:20px !important; height:20px !important; flex:none !important; color:var(--action) !important } #qv-sheet .qv-line { display:block !important; margin:4px 0 0 !important; padding:10px 10px 6px !important; border-top:1px solid var(--hair) !important; font-family:"Space Grotesk",sans-serif !important; font-weight:700 !important; font-size:13px !important; color:var(--ink) !important; text-decoration:none !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important } #qv-sheet .qv-line .qv-by { font-family:var(--font-body) !important; font-weight:500 !important; color:var(--ink-2) !important } #qv-sheet .qv-stop { color:#F25C05 !important } html.qv body.in-meeting #qv-more[aria-expanded="true"] { background:var(--chrome-sel) !important; color:var(--chrome-sel-ink, var(--chrome)) !important } /* ---- the two-person call layout of 09-03 is retired by the views (ruling 3): the page's block no longer sets html.qm-call while the fold is armed. */ /* ==================================================================== THE PHONE FOLD, PHASE 2 (2026-09-10): THE McDOUGALL VIEW. His panel is the view. The fold's script puts his face and his state at the top; the step 8 layer mounts the stream line inside the panel, above the tabs (the desktop hides the stream while the panel is open, because there the panel replaces it -- here it is part of it). ==================================================================== */ html.qv.qv-mc #qmc { display:flex !important; flex-direction:column !important } html.qv #qmc #q8-stream { display:block !important; margin:0 0 8px !important; flex:none !important } html.qv #qmc #q8-stream[hidden] { display:none !important } /* 2026-09-23 (PHONE-LINE): the page's own step 8 rules for the line are desktop-only (@media (min-width:769px) and (min-height:501px)), so on a phone the