/* ══ VSSGEO · parity-front.css — front door, phone ↔ desktop parity (design team, designer 2, 2026-09-28) ═════════
   Loads on the front-door page (index.html), after the door's own CSS. Each rule fixes one measured finding
   (scratchpad/ux/team/front/REPORT.md, F-ids). Scope: .fd only — the rail + signed-in history, the top bar, the
   question box, and the Plans / How-it-works modal. NOT here: #send and .legal (rhythm.css owns them).
   8-pt grid: 4 / 8 / 16 / 24 / 32. Phone hit targets: 44 px. Brand ring = the conic gold→red→blue outline.        */

/* F1 · thumb targets. The door's own --fdx-hit was 40 px on a touch screen, so every history row, the project
   search, ticker chips, the plan chip and the top-bar buttons measured 40 (history heads 34). Brief floor: 44.   */
@media (pointer:coarse){
  :root{--fdx-hit:44px}
  :root .fd .rail:not(.collapsed) .rail-item{min-height:44px}
  :root .fd .hist :is(.hs-head,.hp-head){min-height:44px}
  :root .fd .topbar .theme{width:44px;height:44px}
  :root .fd .topbar :is(.btn-ghost,.btn-solid){min-height:44px}
  :root .fd .topbar .right,:root .fd .topbar .signed-out{gap:8px}                      /* was 4 + a text space = 9 */
  :root .fd[data-user="out"] .topbar .signed-out{display:inline-flex;align-items:center}
  :root .fd .modal :is(.t-cta,.fdx-btn){min-height:44px}
  :root .fd .tick{min-height:44px}                                                        /* frontdoor-r2 pins 40 at phone width */
}

/* F2 · history: the section and project heads wore a flat 2-px accent box on focus and no ring on hover, while the
   rows under them wear the brand ring. Same control family → same ring, on both devices.                          */
:root .fd .hist :is(.hs-head,.hp-head){position:relative;isolation:isolate}
:root .fd .hist :is(.hs-head,.hp-head)::after{content:"";position:absolute;inset:0;border-radius:var(--vg-r-sm,8px);padding:1.4px;
  background:conic-gradient(from var(--ang),var(--amber) 0deg,var(--red) 110deg,#B5D9EE 210deg,var(--amber) 330deg,var(--amber) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .22s ease;pointer-events:none;z-index:-1}
:root .fd .hist :is(.hs-head,.hp-head):is(:hover,:focus-visible)::after{opacity:1;animation:vistaspin 4.5s linear infinite}
:root .fd .hist :is(.hs-head,.hp-head):focus-visible{outline:none}
:root .fd .hist .hs-head:hover{background:var(--vg-raise2,var(--vg-raise))}             /* the project heads already do this */
@media (prefers-reduced-motion:reduce){:root .fd .hist :is(.hs-head,.hp-head)::after{animation:none!important}}

/* F3 · history alignment: Recent rows started at x=16 while their own "RECENT" label and every project name start
   at x=36 — the rows stuck out left of their heading. They now share the heading's text edge.                     */
:root .fd .hist .hs[data-k="recent"]>.hs-body>.hist-item{padding-left:28px}
:root .fd .hist .hs[data-k="recent"]>.hs-body>.hist-item:hover{padding-left:32px}          /* the same 4-px slide */
@media (prefers-reduced-motion:reduce){:root .fd .hist .hs[data-k="recent"]>.hs-body>.hist-item:hover{padding-left:28px}}

/* F4 · history labels in light mode measured 4.18:1 (faint on the rail) at 10.5 px; phone type was under 12 px.    */
:root[data-theme="light"] .fd .hist{--vg-faint:var(--vg-muted)}
@media (max-width:760px){
  :root .fd .hist .hs-head{font-size:12px}
  :root .fd .hist :is(.hs-head,.hp-head) i{font-size:12px}
}

/* F5 · the question box on a phone: the octopus, the mic and send sat in one row, so the text column was 180 px
   and a two-sentence question became an 8-line scroll clipped mid-line. Once there is text (like ChatGPT's
   phone box) the text takes the full row and mic + send drop to a row of their own, bottom-right. Empty, it is
   the same one-row box as before.                                                                              */
@media (max-width:560px){
  :root .fd .composer:has(textarea:not(:placeholder-shown)){flex-wrap:wrap;row-gap:0}
  :root .fd .composer:has(textarea:not(:placeholder-shown)) textarea{flex:1 1 calc(100% - 56px);min-width:0}   /* octopus 40 + its 4 margin + 8 gap */
  :root .fd .composer:has(textarea:not(:placeholder-shown)) .vg-mic{margin-left:auto}
}

/* F6 · "Open the map →": a pill button on the phone, a bare underlined link on desktop. One control, one look:
   the pill on both, with the brand ring on hover / focus like the other quiet buttons.                         */
:root .fd .fdx-way a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--fdx-hit,36px);padding:0 16px;
  border:1px solid var(--vg-rule);border-radius:var(--vg-pill);background:var(--vg-raise);color:var(--vg-ink);
  font:600 14px/1 var(--vg-font-display);text-decoration:none;position:relative;isolation:isolate}
@media (pointer:fine){:root .fd .fdx-way a{min-height:36px}}
:root .fd .fdx-way a::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:conic-gradient(from var(--vg-ang),var(--vg-gold) 0deg,var(--vg-red) 110deg,var(--vg-blue) 210deg,var(--vg-gold) 330deg,var(--vg-gold) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .22s ease}
:root .fd .fdx-way a:is(:hover,:focus-visible){border-color:transparent}
:root .fd .fdx-way a:is(:hover,:focus-visible)::before{opacity:1;animation:vg-spin 4.5s linear infinite}
:root .fd .fdx-way a:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){:root .fd .fdx-way a::before{animation:none!important}}

/* F7 · Plans / How it works: the × scrolled away with the page, so at the end of the 2,800-px phone sheet there
   was no way out but a 16-px sliver of backdrop. The × now stays pinned top-right while the sheet scrolls, on a
   panel-coloured disc so it never reads through the content under it. (The head's text keeps its old padding.)  */
:root .fd .back .modal{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start}
:root .fd .back .modal-head{display:contents}
:root .fd .back .modal-head>:not(.x){grid-column:1;grid-row:1;padding:32px 0 0 32px;min-width:0}
:root .fd .back .modal-head>.x{grid-column:2;grid-row:1/span 2;align-self:start;position:sticky;top:16px;z-index:3;margin:32px 32px 0 16px;
  background:var(--vg-panel);box-shadow:0 0 0 4px color-mix(in srgb,var(--vg-panel) 70%,transparent)}
:root .fd .back .modal-body{grid-column:1/-1;grid-row:2;min-width:0}
@media (max-width:760px){
  :root .fd .back .modal-head>:not(.x){padding:24px 0 0 16px}
  :root .fd .back .modal-head>.x{margin:24px 16px 0 8px}
}

/* F8 · "What things use" on a phone: four table columns left the description 80 px wide (6-line rows). On a phone
   each row becomes the description on its own line with the three prices under the same three column heads.   */
@media (max-width:560px){
  :root .fd .fd-menu :is(table,thead,tbody){display:block;width:100%}
  :root .fd .fd-menu tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px;border-bottom:1px solid var(--vg-rule)}
  :root .fd .fd-menu tr.proj{border-bottom:0}
  :root .fd .fd-menu td{border-bottom:0!important;padding:0!important}
  :root .fd .fd-menu thead td:first-child{display:none}
  :root .fd .fd-menu thead td{padding:0 0 8px!important;text-align:right;font-size:12px!important}
  :root .fd .fd-menu tbody td:first-child{grid-column:1/-1;padding:12px 0 4px!important}
  :root .fd .fd-menu tbody td+td{width:auto;padding:0 0 12px!important;font-size:13px;white-space:nowrap}
  :root .fd .fd-menu tbody tr:hover td{background:none}
}

/* F9 · signed in, phone: the plan chip "Kraken · 21,400 credits" ran off the right edge (cut mid-digit at x=390).
   It now shrinks into the space left and ends in an ellipsis; the full line is in the rail's account row.       */
@media (max-width:560px){
  :root .fd:not([data-user="out"]) .topbar .right{min-width:0;flex:1 1 auto;justify-content:flex-end}
  :root .fd:not([data-user="out"]) .topbar .signed-in{display:flex;min-width:0}
  :root .fd:not([data-user="out"]) .topbar .plan-chip{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    padding:0 12px;line-height:calc(var(--fdx-hit,44px) - 2px);font-size:12px}
  :root .fd:not([data-user="out"]) .topbar .theme{flex:none}
}