/* scenario_results.mobile.css -- the phone layout for the scenario-results applet. Loaded after scenario_results.css and overrides it only inside the one media query below; the desktop sheet is never edited for phone reasons (the seam rule with proj/applet-improvements, PLAN-mobile-explore-mvp §5). Layout on a phone: the map owns the screen; a bottom bar (Controls · Results) raises one of two sheets -- the sidebar as a full-height sheet from the top, the measurements dock as a half / tall bottom sheet. The legend collapses to a title chip at top-left. Every dock panel reflows to one vertical stack and a table wider than the phone scrolls inside its own box (ruling D3). The mode-choice decomposition becomes one card per mode (treatment B), which needs sheets.js to copy the column headers into `td[data-label]`. The media query MUST stay byte-identical to LAYOUT_MQ in layout.js, so the CSS and the JS can never disagree about which layout is on screen. */ /* Phone-only chrome. These rules sit outside the media query on purpose: the markup is always present, and on a desktop it must not render. */ #mobile-bar { display: none; } #mobile-summary { display: none; } #panel-close { display: none; } .sheet-handle { display: none; } @media (max-width: 760px), (max-height: 500px) { /* 26px summary strip + 52px button row + the home-indicator inset. */ :root { --bar-h: calc(78px + env(safe-area-inset-bottom, 0px)); } /* ---- The frame ---- */ /* `dvh` tracks mobile Safari's URL bar; `vh` is the fallback for browsers without it. Both #app and body lose their flex column: the two sheets and the bar are all fixed, so nothing needs to share the height any more. */ body { display: block; } #app { display: block; height: 100vh; height: 100dvh; } #map-area { position: absolute; inset: 0 0 var(--bar-h) 0; } /* ---- The bar ---- */ #mobile-bar { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; height: var(--bar-h); z-index: 10; padding: 0 0 env(safe-area-inset-bottom, 0px); background: #f7f7f7; border-top: 1px solid #ddd; } /* The summary strip: indicator · zone · value on one line. The value never shrinks; the zone name(s) keep their full width until the indicator is down to its 30% floor, and only then ellipsize -- the legend chip already names the indicator on screen, the zone is named nowhere else. It sits inside the bar (not above it as a sibling) so the sheets, which stop at --bar-h, leave it visible: pick an indicator in Controls and the readout changes under the sheet's foot. */ #mobile-summary { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font-size: 12px; line-height: 26px; color: #555; border-bottom: 1px solid #e4e4e4; white-space: nowrap; } #mobile-summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* `#mobile-summary #ms-ind`: outranks the `> span { min-width: 0 }` above. */ #mobile-summary #ms-ind { flex: 1 1 0; min-width: 30%; } #ms-zone { flex: 0 1 auto; display: flex; align-items: center; gap: 4px; font-weight: 600; color: #222; } #ms-zone > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #ms-zone .ms-arrow { flex: none; color: #888; font-weight: 400; } #ms-zone.placeholder { font-weight: 400; color: #888; font-style: italic; } #ms-val { flex: 0 0 auto; margin-left: auto; font-weight: 600; color: #222; font-variant-numeric: tabular-nums; } #ms-zone:not(:empty)::before { content: "\00b7"; margin-right: 2px; color: #aaa; font-weight: 400; } #ms-ind:empty + #ms-zone::before { content: none; } #bar-buttons { display: flex; flex: 1; gap: 10px; padding: 6px 10px; } #mobile-bar button { flex: 1; font-size: 14px; font-weight: 600; border: 1px solid #ccc; border-radius: 8px; background: #fff; color: #222; cursor: pointer; } #mobile-bar button[aria-expanded="true"] { background: #4a90d9; border-color: #4a90d9; color: #fff; } /* ---- The sidebar sheet (#panel, "Controls") ---- */ /* Full-height: its content is ~880px tall and no partial height shows a useful amount of it. `min-width: 0` is load-bearing, not cosmetic -- below 380px the desktop `min-width: 380px` is what widened the layout viewport and left the map 0px wide (AUDIT-phone-viewports §2). Slides down from the top, so it and the dock never fight over the same edge. */ #panel { position: fixed; inset: 0 0 var(--bar-h) 0; width: auto; min-width: 0; max-width: none; border-right: none; z-index: 9; overflow-y: auto; transform: translateY(-105%); transition: transform .18s ease-out; } #panel.open { transform: none; } #panel-close { display: block; position: absolute; top: 4px; right: 8px; z-index: 1; border: none; background: none; font-size: 26px; line-height: 1; padding: 6px 8px; color: #777; cursor: pointer; } /* Compare mode is desktop-only for the MVP (ruling D6): hidden by CSS, never removed from the DOM, so app.js's wiring is untouched. */ #btn-compare, #compare-view-toggle { display: none; } /* ---- The dock sheet (#measurements, "Results") ---- */ /* Two heights, half and tall, toggled by the handle -- road-viz's #inspector/.tall idiom. At 52dvh on an 844px phone #mp-body gets ~390px, which fits the destination-choice panel whole and most of population / cumulative; mode choice needs the tall state (AUDIT §5). */ #measurements { position: fixed; left: 0; right: 0; bottom: var(--bar-h); top: auto; flex: none; height: 52vh; height: 52dvh; z-index: 8; border-top: 1px solid #ddd; border-radius: 14px 14px 0 0; box-shadow: 0 -4px 18px rgba(0, 0, 0, .16); transform: translateY(105%); transition: transform .18s ease-out; } #measurements.open { transform: none; } #measurements.tall { height: calc(100vh - var(--bar-h) - 24px); height: calc(100dvh - var(--bar-h) - 24px); } .sheet-handle { display: flex; justify-content: center; padding: 8px 0 4px; cursor: pointer; flex: 0 0 auto; border-radius: 14px 14px 0 0; background: #f7f7f7; } .sheet-handle span { width: 38px; height: 4px; border-radius: 2px; background: #ccc; } /* The header stays pinned while the body scrolls: it carries the O -> D slots, Swap and Clear, which are the controls for the state on show. It wraps rather than overflows -- at 390px the desktop's one-line header does not fit the slots and both buttons. */ #mp-header { flex-wrap: wrap; row-gap: 4px; } /* Rows: context · O -> D · Swap … Clear · stage prompt. Zone names are not truncated, so the O -> D pair owns a row; the two buttons share the next; the prompt is the line that can afford to wrap, so it goes last. */ #mp-header .mp-spacer { display: none; } #mp-header #mp-context { flex-basis: 100%; border-right: none; padding-right: 0; } #mp-header .mp-od { flex-basis: 100%; } #mp-header #mp-clear { margin-left: auto; } #mp-header .mp-stage { flex-basis: 100%; order: 9; white-space: normal; } #mp-body { max-height: none; overflow-y: auto; } /* ---- The legend chip ---- */ /* Top-left keeps it clear of the bottom sheets and of MapLibre's controls at top-right. Collapsed it shows only the title -- the name of the mapped quantity, which is the one thing a phone viewer needs at all times and the one thing the idle screen otherwise lacks. Tap toggles (sheets.js). */ #legend { top: 10px; left: 10px; right: auto; bottom: auto; max-width: min(62vw, 240px); padding: 8px 10px; cursor: pointer; /* Below the sheets (8, 9): the tall dock's handle sits at 24px from the top and the desktop's z-index 900 would put the chip on top of it. Still above MapLibre's controls (z 2). */ z-index: 5; } #legend.collapsed > *:not(#leg-title) { display: none !important; } #legend.collapsed #leg-title { margin-bottom: 0; } #legend.collapsed #leg-title::after { content: " \25B8"; color: #888; } /* ---- The dock panels: the reflow (ruling D3) ---- */ /* Every panel becomes one vertical stack. The three flex rows and the multicolumn body are what laid the desktop dock out sideways; the `max-width: none`s release the columns that were sized for a 1280px dock. A table wider than the phone scrolls inside its own box. */ #mp-body { columns: auto; column-gap: normal; column-rule: none; } .pn-mc-main, .dcp-cols, .stp-cols { flex-direction: column; align-items: stretch; gap: 10px; } .dcp-col-mid, .stp-col-lead, .pn-mc-side { max-width: none; flex-basis: auto; } /* .dcp-col-cats is the panel that actually loses data on a desktop dock at phone width -- it collapsed to 4px and was clipped with no scrollbar (AUDIT §5). Stacked and released it gets the full width back. */ .dcp-col-cats { flex: 0 0 auto; } .stp-col-tbl, .dcp-col-cats { overflow-x: auto; max-width: 100%; } .dcp-col-cats table { min-width: max-content; } /* Two-up category sub-tables stack when the pair does not fit. */ .dcp-cat-cols { flex-wrap: wrap; } /* ---- Mode choice: one card per mode (treatment B, ruled 2026-09-11) ---- */ /* The column headers become in-row labels via `td::before { content: attr(data-label) }`; sheets.js copies each `thead th` into the cells after every render. If the labeler has not run (JS off, or a render it did not see) the cells simply show without labels -- the numbers are still right, and the formula line under the table still names the columns in order. */ .pn-mc-tbl { flex: 0 0 auto; max-width: 100%; overflow-x: visible; } .pn-decomp, .pn-decomp tbody { display: block; width: 100%; } .pn-decomp thead { display: none; } .pn-decomp tbody tr { display: block; width: 100%; margin: 0 0 8px; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .12); } /* Label left, value(s) packed right: a cell may hold more than one node ("$0.597" + its "(1.7)" span), and `space-between` would spread them. */ #mp-body .pn-decomp td { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 2px 0; border: 0; text-align: right; min-width: 0; white-space: normal; } #mp-body .pn-decomp td::before { content: attr(data-label); text-align: left; color: #666; font-weight: 400; font-size: 11px; flex: 0 0 auto; margin-right: auto; } /* The mode-specific cell holds N chips; they wrap instead of widening the card (Walk's three chips overflowed 390px by 27px in the S2 mock). */ #mp-body .pn-decomp td.pn-decomp-chips { max-width: none; row-gap: 4px; } /* The mode name is the card's heading, not a labelled row. */ #mp-body .pn-decomp td:first-child { display: block; text-align: left; font-weight: 600; font-size: 14px; margin-bottom: 4px; } #mp-body .pn-decomp td:first-child::before { content: none; } /* The mapped-mode marks were drawn as cell-edge box-shadows on a row of cells; on a card they become the card's own border. */ #mp-body .pn-decomp tr.pn-mapped-mode { border-color: #444; border-width: 2px; } #mp-body .pn-decomp tr.pn-mapped-mode td, #mp-body .pn-decomp tr.pn-mapped-mode td:first-child { box-shadow: none; } /* The collapsed unavailable-modes row is a sentence with colspan; it keeps its own styling and gets no label. */ #mp-body .pn-decomp tr.pn-mode-unavail { border: none; padding: 0 2px; } #mp-body .pn-decomp tr.pn-mode-unavail td:first-child { font-size: 10px; font-weight: 400; margin: 0; } #mp-body .pn-decomp tr.pn-mode-unavail td::before { content: none; } /* ---- Type and touch targets ---- */ /* 16px on form controls stops iOS zoom-on-focus; 40px is the floor for a finger. 42 targets were under it and every