/* pm/mobile.css — the ≤760px phone surface of the four-panel workspace. * * Built to the PM's mobile companion prototype (planning/design/four-panel/prototype-mobile.html): * stack navigation rather than columns, a 52px / 1fr / 64px frame at most 430px wide, and a * five-item bottom nav. Every colour here is either a token from pm/tokens.css or one of the two * hard-coded bar inks the prototype uses for its chrome — the same two the desktop shell uses, so * the top bar is the same ink on both surfaces. * * ── Why the phone frame is built out of `body` ──────────────────────────────────────────────── * pm/app.js appends ONE root element to and gives it an inline `height:100vh` and its own * three rows. The phone needs a different frame around the same element, and the one thing it must * never do to get one is move anything: panel 4 holds a live xterm, and a re-parented terminal * comes back with a stale grid. So itself becomes the phone's grid — the static chrome in * row 1 and row 3, app.js's untouched root in row 2 — and the root's own rows collapse to the one * that matters. Nothing is moved, nothing is rebuilt; a media query changes which boxes are drawn. * * ── Why `!important` ────────────────────────────────────────────────────────────────────────── * app.js writes its geometry as an inline `style` attribute, which is a deliberate part of its * contract with the panel modules (the prototype's style strings are copied verbatim, so they can * be diffed). An author-origin rule cannot beat an inline declaration without `!important`, and * the alternative — a phone branch inside app.js's style strings — would put the breakpoint in two * places at once. The overrides are confined to the media query, so the desktop cascade is exactly * what it was. * * Sharp corners throughout: nothing here sets a border-radius. */ /* Above the breakpoint the phone chrome does not exist. `hidden` (set by pm/mobile.js) keeps it out * of the accessibility tree as well — both, not either. */ .mob, .mobmenu { display: none; } @media (max-width: 760px) { /* The prototype's frame: 52px top bar, the screen, a 64px bottom nav, at most 430px wide and * centred, with a hairline on each side so the phone shape is legible on a wide-ish tablet. */ body { display: grid; grid-template-rows: 52px minmax(0, 1fr) auto; height: 100vh; max-width: 430px; margin: 0 auto; overflow: hidden; border-left: 1px solid var(--border); border-right: 1px solid var(--border); } /* Explicit placement, never auto-placement: app.js appends its root LAST, so source order would * put the screen underneath the bottom nav. */ .mob { display: block; grid-row: 1; min-width: 0; } .mobmenu { display: block; grid-row: 3; min-width: 0; } /* app.js's root, in row 2. Its 44px top bar and 26px status bar are the desktop's chrome and are * replaced here by the phone's own — kept in the DOM (the shell suite indexes root.children) and * simply not drawn, so the root is left with the single row that holds the panels. */ body > [data-pm-theme] { grid-row: 2; height: auto !important; min-height: 0; grid-template-rows: minmax(0, 1fr) !important; } body > [data-pm-theme] > *:first-child, body > [data-pm-theme] > *:last-child { display: none; } /* ONE panel at a time. `data-mpanel` carries the index pm/mobile.js derived from the reducer, and * the rules below draw exactly that child of the body grid — which is the whole exclusivity * guarantee, expressed as CSS rather than as something the reducer has to remember to enforce. * The hidden panels keep their hosts mounted and their subtrees intact; a live terminal in panel * 4 goes on running while the PM is reading the board. Each panel is restored to the `display` its * own host was built with, because forcing them all to one value would relay their contents. */ body > [data-pm-theme] > *:nth-child(2) { grid-template-columns: minmax(0, 1fr) !important; min-height: 0; } [data-mpanel] > * { display: none !important; } [data-mpanel="0"] > *:nth-child(1) { display: flex !important; } [data-mpanel="1"] > *:nth-child(2) { display: block !important; } [data-mpanel="2"] > *:nth-child(3) { display: flex !important; } [data-mpanel="3"] > *:nth-child(4) { display: flex !important; } /* ── the top bar ─────────────────────────────────────────────────────────────────────────── */ .mob-bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; background: oklch(0.1 0.004 228.8); color: oklch(0.987 0.002 197.1); border-bottom: 1px solid oklch(1 0 0 / 10%); } /* 44px minimums on every control: the phone's targets are thumbs, not a pointer. */ .mob-back { flex: none; display: flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; margin-left: -6px; color: oklch(0.85 0.01 214); font-size: 14px; } .mob-brand { flex: none; display: grid; place-items: center; width: 26px; height: 26px; background: oklch(0.488 0.243 264.376); font-size: 14px; line-height: 1; } .mob-title { flex: 1; min-width: 0; text-align: center; font-family: var(--mono); font-size: 12px; color: oklch(0.85 0.01 214); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mob-pal, .mob-theme { flex: none; display: grid; place-items: center; min-width: 44px; min-height: 44px; color: oklch(0.85 0.01 214); } .mob-pal { font-family: var(--mono); font-size: 12px; } .mob-theme { font-size: 15px; } .mob-back:active, .mob-pal:active, .mob-theme:active { color: oklch(0.987 0.002 197.1); } /* ── the bottom block ────────────────────────────────────────────────────────────────────── */ .mobmenu { background: oklch(0.1 0.004 228.8); border-top: 1px solid oklch(1 0 0 / 10%); /* viewport-fit=cover is on, so the home indicator's strip is ours to pad past. */ padding-bottom: env(safe-area-inset-bottom, 0px); } /* The control keys a phone keyboard does not have. Present on the terminal screen and on nothing * else — the other screens have no PTY to write to, and a bar of inert keys is worse than none. */ .ctrlbar { display: none; min-width: 0; gap: 5px; padding: 6px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--muted); border-bottom: 1px solid oklch(1 0 0 / 10%); } .mobmenu[data-view="terminal"] .ctrlbar { display: flex; } .ctrlbar button { flex: 1 0 auto; display: grid; place-items: center; min-width: 44px; min-height: 44px; background: var(--secondary); border: 1px solid var(--border); color: var(--foreground); font-family: var(--mono); font-size: 14px; } .ctrlbar button:active { background: var(--accent); } .ctrlbar button[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); } .ctrlbar .lbl { font-size: 11px; letter-spacing: .04em; } /* Five destinations, one per column, 64px tall — the prototype's bottom nav. */ .mobnav { display: grid; grid-template-columns: repeat(5, 1fr); min-width: 0; } .mobnav-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 64px; padding: 0 2px; color: oklch(0.6 0.02 213); } .mobnav-b .g { font-size: 17px; line-height: 1; } .mobnav-b .l { font-size: 10px; line-height: 1; } .mobnav-b[aria-current="page"] { color: oklch(0.987 0.002 197.1); } } /* `hidden` wins over every display above, in both directions of the breakpoint. Back is ABSENT at a * destination root rather than present-and-inert: a control that looks available and does nothing is * the thing this workspace refuses to ship. */ .mob[hidden], .mobmenu[hidden], .mob-back[hidden], .mob-brand[hidden] { display: none !important; }