/* =================================================================================== PHASE 1D "plansetup" PACKAGE: S04 Search results, S05 Destination, S06 Loop setup, S07 Customize (mock-009/010/011/012). New rules only; nothing here restyles Home, Preview or Edit stops, which belong to other packages editing these same files in parallel (BUILDER-RULES: keep new CSS scoped and in its own file for clean merges). Every selector below is scoped to html[data-psheet="setup"|"place"|"customize"] or to an id/class that only exists on these four screens. =================================================================================== */ @media (max-width: 900px) { /* -------------------------------------------------------------------------------- S06 LOOP SETUP (mock-011): four independent compact choices. The setup state has its own sheet geometry and card rhythm; Home's two-up cards remain untouched. */ html[data-app][data-psheet="setup"] .ppreview-more{display:none !important} html[data-app][data-psheet="setup"] .pln-side{ position:fixed !important;left:0 !important;right:0 !important;top:61dvh !important; bottom:env(safe-area-inset-bottom,0px) !important;height:auto !important;min-height:0 !important; max-height:none !important;padding:0 !important;overflow:hidden !important; display:flex !important;flex-direction:column !important} html[data-app][data-psheet="setup"] .pln-side > .pln-grab{ flex:0 0 14px !important;height:14px !important;min-height:14px !important} html[data-app][data-psheet="setup"] .preview-heading{ flex:0 0 auto !important;min-height:50px !important;height:auto !important; padding-top:0 !important;padding-bottom:4px !important;box-sizing:border-box} html[data-app][data-psheet="setup"] #pa-note:empty{display:none !important} html[data-app][data-psheet="setup"] .preview-heading .pln-head{font-size:20px !important;line-height:1.2 !important} html[data-app][data-psheet="setup"] .preview-heading #pa-head-t{font-size:22px !important;line-height:1.2 !important} html[data-app][data-psheet="setup"] .preview-heading #pa-head-s{font-size:13px !important;line-height:1.4 !important;margin-top:3px !important} html[data-app][data-psheet="setup"] .home-action-footer #pa-go.primary{min-height:44px !important;padding:8px 10px !important} html[data-app][data-psheet="setup"] .pln-side > .home-scroll-body{ flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important; overscroll-behavior:contain} /* redesign-audit-3 (S06): the round-2 version of this group border lost ALL FOUR of .pauto-grid's own sides to css/plan.css's `.pauto-grid:has(#pa-from){border:0; background:none;...}` (Home's own "no outer card, the label+field pair carries the border instead" rule, confirmed live via getComputedStyle: border 0/0/0/0, background transparent). `:has(#pa-from)` carries the specificity of an ID selector (#pa-from), which outranks this block's plain attribute+class selector regardless of load order - the exact trap WBH-4480's own surface control hit before it started using !important. From rendered with no box and no background at all, floating loose above a second, separately-closed Ride-time/Ride-style/ Customize card underneath it - which is what actually photographed as "three separate bordered boxes with gaps", not a literal margin between elements (their computed rects touch at 0px; the FLOATING FROM ROW is why it still reads as a break). !important on every property below is not decoration - it is what makes this group survive a selector carrying id-level specificity. */ html[data-app][data-psheet="setup"] .pauto-grid, html[data-app][data-psheet="setup"] .pln-cards, html[data-app][data-psheet="setup"] #pa-more{ margin:0 !important;background:none !important;border:0 !important; border-radius:0 !important;box-sizing:border-box !important} html[data-app][data-psheet="setup"] .pln-cards{ display:flex !important;flex-direction:column;gap:5px !important;margin-top:5px !important} html[data-app][data-psheet="setup"] .pln-cards > *{width:100%;box-sizing:border-box} /* Reset Home's own flex/height rules for this element (mock-003's two EQUAL-HEIGHT cards: `.pln-cards #pa-budget-head{height:100%}` and friends, scoped only to ":not(.has-route):not(.show-dials)" - true on Setup too, since Setup is also pre-route with no dials shown, so Home's fixed-height column box was leaking here and clipping the now-taller stepper row to its closed-picker height, overlapping Ride style underneath it). Block, auto height, no Home padding. */ html[data-app][data-psheet="setup"] #pa-budget-head{ display:block !important;height:46px !important;min-height:46px !important;padding:0 !important;background:none !important; border:0 !important;border-radius:0 !important;margin:0 !important} /* All three rows (From, Ride time, Ride style) share one ROW shape now - no border, radius or background of their own (the group above carries that); a plain 56px summary row, divider lines between rows handled above/below. */ html[data-app][data-psheet="setup"] :is(#pa-from-more, #pa-duration-more, #pa-style-more){ display:block !important;width:100%;height:auto !important;border:1px solid var(--rule) !important; border-radius:13px !important;background:var(--panel) !important;margin:0 !important; overflow:hidden;box-sizing:border-box} /* THIS overflow:hidden (for the rounded-card corners above) ALSO CLIPS ITS OWN DROPDOWN, same defect css/plan.css already names on .pauto-grid two containers out ("AND IT MUST NOT CLIP ITS OWN DROPDOWN") - measured here independently: with From expanded and a query typed, #pa-from-sug sat at y614-827 while #pa-from-more itself ended at y624, so everything past the first ~10px of the suggestion list was clipped and elementFromPoint returned #pa-go and the row below instead of any result. Lift the clip only while the dropdown actually has something in it, so the collapsed card's rounded corners are untouched the rest of the time. */ html[data-app][data-psheet="setup"] #pa-from-more:has(#pa-from-sug:not([hidden])){ overflow:visible} html[data-app][data-psheet="setup"] .pauto > #pa-more{ margin:5px 0 0 !important;border:1px solid var(--rule) !important; border-radius:13px !important;background:var(--panel) !important;overflow:hidden} /* redesign-r4 (S06): the row's own is a SECOND place the "single rounded grey card" leaked back in. css/plan.css's `.pauto-budget, .pauto-more > summary` rule (built for a DIFFERENT, pre-grouped-list state of this same sheet) gives every inside a .pauto-more its own 1px border, 14px radius, var(--surface) background and a 9px bottom margin - confirmed live via the matched-rule list, not guessed: it is lower specificity than this selector for the properties THIS selector sets (display/padding/etc.), but this selector never touched border/ radius/background/margin, so the cascade fell through to that rule for exactly those four properties on #pa-from-more's summary (and #pa-more's, below) - the "From"/"Customize preferences" boxes-inside-the-box the audit crop shows, and the 9px margin is the empty white band between From and Ride time (#pa-duration-more and #pa-style-more's summaries already lose this fight to a MORE specific Home rule elsewhere, which is why only two of the four rows showed it). */ html[data-app][data-psheet="setup"] :is(#pa-from-more, #pa-duration-more, #pa-style-more) > summary{ display:flex;align-items:center;gap:10px;min-height:44px !important;height:44px !important;padding:0 14px; list-style:none;cursor:pointer;box-sizing:border-box; border:0 !important;border-radius:0 !important;background:none !important;margin:0 !important} html[data-app][data-psheet="setup"] :is(#pa-from-more, #pa-duration-more, #pa-style-more) > summary::-webkit-details-marker{ display:none} html[data-app][data-psheet="setup"] :is(#pa-from-more, #pa-duration-more, #pa-style-more) .pmt-ico{ flex:0 0 auto;display:inline-flex;color:var(--steel)} html[data-app][data-psheet="setup"] :is(#pa-from-more, #pa-duration-more, #pa-style-more) .pmt-label{ display:block !important;position:static !important;width:auto !important;height:auto !important; padding:0 !important;margin:0 !important;overflow:visible !important;clip:auto !important; font-size:calc(13px * var(--home-scale,1));color:var(--steel)} html[data-app][data-psheet="setup"] :is(#pa-from-more, #pa-style-more) .pauto-more-v{ display:block;font-size:calc(16px * var(--home-scale,1));font-weight:650;color:var(--ink)} /* From and Ride style are the mockup's two STACKED rows - small label, bold value directly underneath, both left-aligned after the icon (mock-011: "From" / "Your location", "Ride style" / "Curvy"). js/app-first.js now wraps From's label+value in the same .pauto-more-t span #pa-style-more's own markup (docs/_plan_page.html) already uses, so one rule stacks both - no more one-line-From-vs-two-line- Ride-style mismatch. */ html[data-app][data-psheet="setup"] :is(#pa-from-more, #pa-style-more) .pauto-more-t{ flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px} /* Ride style's trailing glyph must read the same right chevron "›" as From's and Customize's, not Home's down-chevron (mock-003 pairs it with Ride time's clock- dropdown next to it on the two-up card; mock-011 draws a plain right chevron like every other row). css/plan.css's `.pln-cards #pa-style-more > summary .pauto-more-ch` rule sets font-size:0 and injects "⌄" via ::after to make that pairing; both are scoped to html[data-app="1"] + #pa-style-more only (no data-psheet gate), so they still applied here. !important because that Home rule's own selector out-specifies this one by one extra element (`> summary`) despite carrying no id itself. */ html[data-app][data-psheet="setup"] :is(#pa-from-more, #pa-style-more) .pauto-more-ch{ flex:0 0 auto;font-size:21px !important;color:var(--steel);transform:none} html[data-app][data-psheet="setup"] #pa-style-more > summary .pauto-more-ch::after{ content:none !important} html[data-app][data-psheet="setup"] #pa-style-more:not([open]){height:46px !important} html[data-app][data-psheet="setup"] #pa-style-more[open]{height:auto !important;overflow:visible} html[data-app][data-psheet="setup"] :is(#pa-from-more, #pa-style-more)[open] > summary .pauto-more-ch{ transform:rotate(90deg)} /* Ride time (mock-011): ONE ROW - icon, "Ride time", the value and the -/+ stepper all on the same line, not a value row followed by a second, buttons-only line underneath it (redesign-review-cortana-1 S06: "Ride time renders as a tall box with the stepper on its own line"). The
itself becomes the flex row (summary and the stepper strip are both its direct children, and a
lays out non-summary children exactly like any other block once it is flex/grid) - no DOM change, css/app-first.js still only builds the value into summary and leaves the +/- buttons in their own .pauto-budget-row, this just makes the two sit side by side instead of stacked. css/plan.css's own #pa-budget-head #pa-duration-more > summary rule (built for Home's compact two-up card, mock-003) is two ids deep and wins specificity over a single-id override, so these name the exact same id chain (plus data-psheet="setup" to stay off Home) rather than fight it from outside. */ html[data-app][data-psheet="setup"] #pa-budget-head #pa-duration-more{ display:block !important;position:relative;height:46px !important;padding:0 7px} html[data-app][data-psheet="setup"] #pa-budget-head #pa-duration-more > summary{ display:flex !important;align-items:center !important;gap:10px;height:44px !important; min-height:44px !important;padding:0 167px 0 7px !important} html[data-app][data-psheet="setup"] #pa-budget-head #pa-duration-more > summary::after{ content:"" !important} html[data-app][data-psheet="setup"] #pa-budget-head #pa-duration-more > summary .pmt-label{ flex:1 1 auto;min-width:0;min-height:44px;display:flex !important;align-items:center; justify-content:flex-start;text-align:left} html[data-app][data-psheet="setup"] #pa-budget-head #pa-duration-more > summary .pauto-budget-big{ position:absolute;right:57px;top:1px;width:64px;min-width:64px;text-align:center;margin:0 !important; min-height:44px;padding:0;font-size:calc(17px * var(--home-scale,1));font-weight:650; display:flex;align-items:center;justify-content:center;white-space:nowrap} html[data-app][data-psheet="setup"] #pa-budget-head #pa-duration-more > summary .pmt-ico{ min-height:44px;align-items:center} html[data-app][data-psheet="setup"] #pa-duration-more{flex:1 1 auto;min-width:0} html[data-app][data-psheet="setup"] #pa-duration-more > .pauto-budget-row{ display:block !important;position:static !important;margin:0 !important;padding:0 !important} html[data-app][data-psheet="setup"] #pa-duration-more > .pauto-budget-row .pauto-step:first-child{ position:absolute;right:123px;top:1px} html[data-app][data-psheet="setup"] #pa-duration-more > .pauto-budget-row .pauto-step:last-child{ position:absolute;right:7px;top:1px} html[data-app][data-psheet="setup"] #pa-duration-more .pauto-step{ display:inline-flex !important;align-items:center;justify-content:center; width:44px !important;height:44px;border-radius:12px;border:1px solid var(--rule); background:var(--chrome2);color:var(--ink)} html[data-app][data-psheet="setup"] #pa-duration-more > .pauto-budget-sub{display:none !important} /* From (mock-011): closed by default, same gesture as Ride style. The real input, "Use my location" button and suggestion list move inside the
unchanged (js/app-first.js) - this just gives the open state the same bordered-field look the old direct-child selector in css/plan.css gave #pa-from when it was still a direct child of .pauto-grid. */ html[data-app][data-psheet="setup"] #pa-from-more[open] > summary{ border-bottom:1px solid var(--rule)} html[data-app][data-psheet="setup"] #pa-from-more label[for="pa-from"]{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} html[data-app][data-psheet="setup"] #pa-from-more .pauto-field{ display:flex !important;align-items:center;gap:6px;flex-wrap:wrap; margin:8px 10px 10px;padding:4px 4px 4px 10px;border:1px solid var(--rule); border-radius:12px;background:var(--surface)} html[data-app][data-psheet="setup"] #pa-from-more .pauto-field > input{ flex:1 1 140px;min-width:0;min-height:44px;border:0;background:none;color:var(--ink); font-size:calc(16px * var(--home-scale,1));padding:0} html[data-app][data-psheet="setup"] #pa-from-more .pauto-here{ min-height:44px;border:0;border-radius:10px;background:var(--chrome2);color:var(--ink); padding:0 12px;font-size:calc(13px * var(--home-scale,1))} html[data-app][data-psheet="setup"] #pa-from-more .pauto-sug:not([hidden]){flex-basis:100%} /* "Where you are sleeping" (Destination's own extra field, kept - see brief): a plain row inside the same group as From, a divider line above it rather than its own floating card, so it does not look orphaned once From stops being a bare label+input itself. */ html[data-app][data-psheet="setup"] #pa-to-field:not([hidden]){ margin:10px 0 0 !important;padding:10px 14px;border-top:1px solid var(--rule); border-radius:0;background:none !important;box-sizing:border-box} html[data-app][data-psheet="setup"] #pa-to-label:not([hidden]){margin:0 0 4px;padding:0 14px} /* "Customize preferences" (mock-011's fourth row): a round icon tile to match the rows above it rather than a bare glyph flush left (border/background/radius now come from the shared group rule above, not from here). */ /* Same leaked box as From (see the long comment above #pa-from-more's summary rule): css/plan.css's generic `.pauto-more > summary` rule gives THIS row's summary its own 1px border, 14px radius, var(--surface) background and 9px bottom margin too - nothing in this package had reset those four properties for #pa-more specifically before now, which is what the audit crop shows as "Customize preferences" sitting in its own card under a gap, the fourth of the four still-separate boxes. */ html[data-app][data-psheet="setup"] #pa-more > summary{ min-height:44px;height:44px;padding:0 14px; border:0 !important;border-radius:0 !important;background:none !important;margin:0 !important} /* redesign-audit-3 (S06): "Customize preferences" rendered in muted grey while the other three rows read bold black. Root cause (confirmed via getComputedStyle): this row has no separate value span under its label the way "Ride time"/"Ride style" do (a small grey caption above a bold dark VALUE), so its one text node inherited css/plan.css's generic .pauto-more-t rule instead - the CAPTION styling (11px/600/steel), written for a row that also shows a value, with nothing here to show instead. Overridden to the same weight/size/colour the group's own summary rule already carries for every other row. */ html[data-app][data-psheet="setup"] #pa-more > summary .pauto-more-t{ font-size:calc(16px * var(--home-scale,1));font-weight:600;letter-spacing:0; color:var(--ink)} html[data-app][data-psheet="setup"] #pa-more > summary::before{ content:"";flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--chrome2); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center/16px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center/16px no-repeat; background:var(--steel)} /* The sheet must reach the bottom edge (redesign-review-cortana-1 S06: "'Find routes' spans edge to edge with map showing BELOW it - sheet does not reach the bottom"). css/plan.css's own fix for this (".pln-side{bottom:env(safe-area-inset-bottom,0px)}", dropping the base rule's "bottom:calc(56px + safe-area)" left over from the hidden V1 tab bar) is scoped ":not([data-psheet])" - Home only. Place, Setup and Customize all carry a data-psheet attribute and never match it, so they kept the 56px gap meant to clear a tab bar none of them show, and the fixed, full-bleed map behind the sheet (css/plan.css's own `.pln-map{position:fixed;inset:0}`) showed through in exactly that strip below the primary button. */ html[data-app][data-psheet="place"] .pln-side, html[data-app][data-psheet="setup"] .pln-side, html[data-app][data-psheet="customize"] .pln-side{ bottom:env(safe-area-inset-bottom,0px)} /* "Find routes" sat edge to edge in Setup (redesign-audit-3 S06: "Find routes with the same side margins as Home's"). Root cause (confirmed via getComputedStyle): css/plan.css's mobile rule that gives #pa-go's wrapper (.home-action-footer, built by js/planner-sheet.js homeOrder() - the same element Home's own button sits in) its 16px side padding is scoped ":not([data-psheet])"; its only OTHER match, at min-width:901px, is desktop. Setup keeps that wrapper (unlike Place/ Customize, which hide it entirely in favour of their own #pdest-go/#pa-stage) but inherited neither rule, so the div fell back to the UA default of none - 0px padding, #pa-go flush to both screen edges. Same values as Home's own mobile rule, scoped to Setup instead of excluding it. */ html[data-app][data-psheet="setup"] .pln-side > .home-action-footer{ display:block !important;position:static !important;flex:0 0 auto;padding:6px 16px;box-sizing:border-box; background:var(--surface)} html[data-app][data-psheet="setup"] .home-action-footer #pa-go{ display:block;width:100%;box-sizing:border-box;margin:0;height:auto; white-space:normal;overflow-wrap:anywhere} /* -------------------------------------------------------------------------------- S05 DESTINATION CARD (mock-010): one "From your location" row, then a single collapsed "Route style" chip (label left, value chip right) - not Start plus a second Riding-time row plus four always-visible style buttons. -------------------------------------------------------------------------------- */ html[data-app] #pdest-time{display:none} html[data-app] .pdest-style-line{display:flex;align-items:center;justify-content:space-between; gap:10px;margin-top:14px} html[data-app] .pdest-style-line .pfocus-line-t{margin:0} html[data-app] .pdest-style-more{position:relative;flex:0 0 min(46vw,170px);width:min(46vw,170px)} html[data-app] .pdest-style-more > summary{display:flex;align-items:center;gap:6px; list-style:none;cursor:pointer;min-height:44px;padding:6px 12px;border:1px solid var(--rule); border-radius:12px;background:var(--panel);width:100%;box-sizing:border-box} html[data-app] .pdest-style-more > summary::-webkit-details-marker{display:none} html[data-app] .pdest-style-more .pauto-more-ico{display:inline-flex;color:var(--steel)} html[data-app] .pdest-style-more #pdest-style-now{font-size:calc(15px * var(--home-scale,1)); font-weight:650;color:var(--ink)} html[data-app] .pdest-style-more .pauto-more-ch{font-size:19px;color:var(--steel);transform:rotate(90deg)} html[data-app] .pdest-style-more[open] .pauto-more-ch{transform:rotate(-90deg)} html[data-app] .pdest-style-more[open]{position:absolute;right:16px;z-index:2;width:220px;max-width:calc(100% - 32px); margin-top:6px;border-radius:14px;background:var(--panel);box-shadow:0 10px 26px rgba(0,0,0,.22)} html[data-app] .pdest-style-more[open] .pauto-mode.pdest-styles{ display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px; width:100%;padding:8px;margin-top:0;box-sizing:border-box} /* Secondary actions now sit under the primary button (mock-010 draws neither; see docs/_plan_page.html for why the DOM itself was reordered, not just floated here with position tricks that would fight the sheet's natural scroll flow). */ html[data-app] #pdest .pdest-acts{margin-top:10px} } /* =================================================================================== S07 CUSTOMIZE (mock-012 "Make it your ride"): a current-value readout beside Curviness/Scenery, and a discrete-step slider look for both rather than the plain button row used everywhere else those same named levels appear (Home, Setup). Real levels only (Sweepers/Mixed/Twisty; Direct/Balanced/More scenic) - the brief allows named levels in place of a true continuous slider when a continuous scale would not have a meaningful, explainable effect (it would not: there is no value between "Mixed" and "Twisty" the router can act on), so this is the slider's look with the real discrete stops it actually has, not an invented continuum. =================================================================================== */ @media (max-width: 900px) { /* mock-012: the subtitle is ONE line ("90-minute loop · Your location"). js/plan.js already shortened the destination-mode text itself (dropping the repeated place name - see paint()'s pcz-sub comment); this is a width/overflow backstop for whatever "From" still reads as a long typed address rather than "Your location". */ html[data-app][data-psheet="customize"] #pcz-sub{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} html[data-app][data-psheet="customize"] .pauto-ask-row{ display:flex;align-items:baseline;justify-content:space-between;gap:10px} html[data-app][data-psheet="customize"] .pauto-ask-t{font:inherit} html[data-app][data-psheet="customize"] .pauto-ask-now{color:var(--orange); font-size:calc(15px * var(--home-scale,1));font-weight:700} /* dr-fix-1 item 3 (mock-012 S07): "Suggested stops" reused .pauto-more-v - the SAME 800-weight, 14.5px(*--ts) "big stat" style Ride style's own collapsed-summary value uses on Home (a different sheet, different context) - so inside Customize the value ("None"/"Coffee & viewpoints") read heavier and larger than the mockup, which draws it as a plain, normal-weight answer under a small grey label, not a headline number. Scoped to this one id so Home's own #pa-style-now (a real "big stat", unrelated to this row) keeps its existing weight. */ html[data-app][data-psheet="customize"] #pa-suggested-now{ font-size:calc(14px * var(--ts,1)) !important;font-weight:600 !important} /* The slider track + thumb. :has() positions the fill/thumb per selected option - 3 fixed stops for Curviness and Scenery; both counts are real, not arbitrary. css/plan.css's own ".pauto .pauto-mode{display:grid!important}" (built for Customize's plain button rows, same data-psheet) out-specifies a bare ":is(.pauto-mode--shape,.pauto-mode--scenery)" (one class vs its two), so every selector below repeats the real compound class (.pauto-mode.pauto-mode--shape) an element here actually carries, to stay ahead of it rather than relying on load order for a tie that a future edit to either file could flip. */ html[data-app][data-psheet="customize"] .pauto :is(.pauto-mode.pauto-mode--shape, .pauto-mode.pauto-mode--scenery){ /* Keep the caption clearance below; reclaim space above so Suggested stops remains fully visible above the pinned Update footer at both phone sizes. */ position:relative;display:flex !important;gap:0;margin:4px 2px 4px !important;padding:0 !important; height:44px;background:none !important;border:0 !important;grid-template-columns:none !important; --pslider-pct:0%} html[data-app][data-psheet="customize"] .pauto :is(.pauto-mode.pauto-mode--shape, .pauto-mode.pauto-mode--scenery)::before{ content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px; border-radius:2px;background:var(--chrome2);pointer-events:none} html[data-app][data-psheet="customize"] .pauto :is(.pauto-mode.pauto-mode--shape, .pauto-mode.pauto-mode--scenery)::after{ content:"";position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:2px; background:var(--orange);width:var(--pslider-pct,50%);transition:width .15s;pointer-events:none} html[data-app][data-psheet="customize"] .pauto :is(.pauto-mode.pauto-mode--shape, .pauto-mode.pauto-mode--scenery) .tbtn{ position:relative;flex:1 1 0;min-width:0;min-height:44px;padding:0 !important;border:0 !important; background:none !important;color:transparent !important;box-shadow:none !important; /* The real .tbtn carries a base rule elsewhere (truncating ordinary button LABEL text) that sets overflow:hidden - harmless there, but every end caption below is deliberately positioned OUTSIDE this 28px button box (top:26px, see below), so that inherited overflow:hidden clips it. Confirmed live (Playwright, computed style + pixel sampling): Curviness's "sweepers" button happened to measure 34.5px tall (its real, invisible label text pushes a slightly taller box than its min-height), so just enough of its caption survived the clip to look intact; Scenery's "direct"/"scenic" buttons measured exactly 28px with nothing left over, and their captions rendered as a 2px sliver with the actual word (verified with a forced, highly-visible override: a red background box painted at the right position and width, no letters) - not a text-content or cascade bug, a clipping one that happened to go unnoticed on one row by a few spare pixels. overflow: visible here is the real fix, not relying on an accidental height margin. */ overflow:visible !important} html[data-app][data-psheet="customize"] .pauto :is(.pauto-mode.pauto-mode--shape, .pauto-mode.pauto-mode--scenery) .tbtn::after{ content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px; border-radius:50%;background:var(--panel);border:2px solid var(--chrome2)} html[data-app][data-psheet="customize"] .pauto :is(.pauto-mode.pauto-mode--shape, .pauto-mode.pauto-mode--scenery) .tbtn[aria-pressed="true"]::after{ background:var(--orange);border-color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3)} /* End captions only (mock-012: "Relaxed"..."Technical" / "Direct"..."More scenic") - the two end options' own real labels, not every stop named along the track. Each rule names one real button by its real data value, not a positional :first-child guess, so a future fifth shape level fails loudly (wrong caption) rather than silently mislabelling whichever button happens to render first. redesign-review-cortana-1 S07: captions rendered clipped ("Swee..s", "Ope..oads"). The REAL cause, confirmed live (Playwright: computed style always reported the right content/position/size; a forced, maximally-visible override painted a background box at the right place and size with no letters in it at all): the caption is deliberately positioned OUTSIDE its own button's 28px box, and that button inherits `overflow:hidden` from a base rule built for truncating ordinary button LABEL text elsewhere in the app (fixed above, on `.tbtn` itself, with `overflow:visible`). top:18 -> top:26 below is a smaller, secondary fix layered on top of that: the dot (18px, vertically centred in the 28px track) occupies track-local y 5-23, so a caption starting at y18 still visually read as sitting half-behind the dot even once overflow stopped clipping it outright; 26 clears it. */ /* Coordinator web review, 2026-11-06 (c1106 R4): "Direct/More scenic" (Scenery's own end captions) touched "Surface" below it. The real cause is two-part, confirmed live (Playwright, 390x844): (1) the caption's own line-height (measured via a same-font probe span: 13.8px) starting at top:36px in a 44px track box already overflows the box by ~6px before any margin is even considered, and (2) #pa-more must fit entirely above the pinned Update footer with no scroll (P0-CUZ-DENSITY), so there was never a spare 6-8px to give every group margin-bottom without that row (Suggested stops) losing its own fit. Fixed the overflow at its source instead of only compensating for it with more margin: top:36 -> 32 still clears the 18px dot (centred in the 44px box, so its own bottom edge sits at 31px) with a hair of clearance, cutting the caption's overflow from ~6px to under 2px, so Scenery's margin only needs a small bump (8 -> 12px, not 8 -> 14+) to leave a real, non-touching gap under "More scenic" while #pa-more still fits above the footer at both 390x844 and 375x667. Curviness keeps its own unrelated, never-flagged gap (also benefits from the same repositioning, for free, without its margin changing at all). 375x667 measured only 2px of spare room between Suggested stops and the pinned footer at baseline (594 vs 596) - far too little to also grow this margin by very much, so the repositioning above (6px of overflow cut to under 2px) carries most of the real fix here; this margin only needs a small, affordable top-up (8 -> 10px) on top of that, not the 14px a margin-only fix would have needed. */ html[data-app][data-psheet="customize"] .pauto .pauto-mode.pauto-mode--scenery{margin-bottom:10px !important} /* dr-fix-1 item 3 (mock-012 S07): Curviness's own end caption ("Technical", top:32px in this 44px track box, same positioning Scenery's caption uses) read as running straight into the "Scenery" heading right below it - the base .pauto-mode rule above gives it only 4px margin-bottom, no real clearance once the caption's own height is counted, same shape of gap Scenery's own caption had here (see the comment above this rule). Matched to Scenery's own fix rather than inventing a different number. #pa-more scrolls its own overflow (confirmed independently taller than its box at both phone sizes), so this does not compete with any fixed, must-fit-above-the-footer budget. */ html[data-app][data-psheet="customize"] .pauto .pauto-mode.pauto-mode--shape{margin-bottom:6px !important} html[data-app][data-psheet="customize"] .pauto .tbtn[data-shape="sweepers"]::before, html[data-app][data-psheet="customize"] .pauto .tbtn[data-scenery="direct"]::before{ content:"Sweepers";position:absolute;left:0;top:32px;font-size:12px;color:var(--steel);white-space:nowrap} html[data-app][data-psheet="customize"] .pauto .tbtn[data-shape="twisty"]::before, html[data-app][data-psheet="customize"] .pauto .tbtn[data-scenery="scenic"]::before{ content:"Technical";position:absolute;right:0;top:32px;font-size:12px;color:var(--steel); white-space:nowrap;text-align:right} html[data-app][data-psheet="customize"] .pauto .tbtn[data-scenery="direct"]::before{content:"Direct"} html[data-app][data-psheet="customize"] .pauto .tbtn[data-scenery="scenic"]::before{content:"More scenic"} /* 3 fixed corner-density stops. Open roads is deliberately outside this axis. */ html[data-app][data-psheet="customize"] .pauto-mode--shape:has(.tbtn[data-shape="sweepers"][aria-pressed="true"]){--pslider-pct:16.6%} html[data-app][data-psheet="customize"] .pauto-mode--shape:has(.tbtn[data-shape="mixed"][aria-pressed="true"]){--pslider-pct:50%} html[data-app][data-psheet="customize"] .pauto-mode--shape:has(.tbtn[data-shape="twisty"][aria-pressed="true"]){--pslider-pct:83.3%} /* 3 fixed stops (Direct, Balanced, More scenic). */ html[data-app][data-psheet="customize"] .pauto-mode--scenery:has(.tbtn[data-scenery="direct"][aria-pressed="true"]){--pslider-pct:16.6%} html[data-app][data-psheet="customize"] .pauto-mode--scenery:has(.tbtn[data-scenery="balanced"][aria-pressed="true"]){--pslider-pct:50%} html[data-app][data-psheet="customize"] .pauto-mode--scenery:has(.tbtn[data-scenery="scenic"][aria-pressed="true"]){--pslider-pct:83.3%} /* "Suggested stops" (mock-012 "Coffee & viewpoints"): docs/_plan_page.html gives this the SAME row markup as "Ride style" (#pa-style-more) - label above, bold value below, chevron trailing - so it inherits that proven row look from css/plan.css's own .pauto-more/.pauto-more-t/.pauto-more-v rules for free, rather than a second, bespoke "inline label and value fight for one line" layout (tried first here: with two real categories checked at once, the combined value measurably overflowed the row - scrollWidth 360 vs clientWidth 354 - because an inline run-on has nowhere to wrap the label away from a long value). Only the checkbox list below needs its own rules; the collapsed row needs none. DEAN ROUND 2026-11-08: this used to be a plain