/* Wire · the links between the final pages: the Expand map control (A results), the way back to the list (B results), and the final pages index. */

/* A results: Expand map sits top right on the map column */
.dx-expand{color:var(--ink)}
.dx-expand svg{color:var(--g-ink)}
@media(hover:hover) and (pointer:fine){.dx-expand:hover{color:var(--g-ink)}}
.dx-expand:focus-visible,.dx-tolist:focus-visible,.dx-listpill:focus-visible,.dx-frow:focus-visible{outline:2px solid var(--g);outline-offset:2px}

/* B results: List control in the panel head on wide screens, List pill above the sheet on the phone */
.dx-panel .dx-lh:has(.dx-tolist){display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.dx-tolist{flex:none;height:34px;margin-top:-2px}
.dx-tolist svg{width:15px;height:15px;color:var(--g-ink)}
.dx-listpill{display:none}
@media(max-width:860px){
  .dx-tolist{display:none}
  body.dx-b .dx-stage .dx-listpill{display:inline-flex;position:absolute;bottom:calc(54% + 14px);z-index:11;border:0}
  .dx-stage:has(.dx-panel.is-expanded) .dx-listpill{display:none}
}

/* the final pages index: one compact row per page, no cards */
.dx-final{display:grid;gap:2px}
.dx-frow{display:grid;grid-template-columns:28px 40px minmax(180px,280px) minmax(0,1fr) 18px;align-items:center;gap:16px;padding:14px 14px;border-radius:14px;transition:background .15s}
.dx-frow .dx-k{justify-self:start}
.dx-fic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--quiet);color:var(--g-ink)}
.dx-fic svg{width:20px;height:20px}
.dx-fnm{display:grid;gap:3px;min-width:0}
.dx-fnm b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.dx-fnm small{color:var(--faint);font-size:12.5px;font-family:var(--oj-mono),ui-monospace,monospace}
.dx-fs{color:var(--ink2);font-size:14px;line-height:1.55}
.dx-frow .dx-go{width:18px;height:18px;color:var(--faint);transition:transform .15s,color .15s}
@media(hover:hover) and (pointer:fine){.dx-frow:hover{background:var(--g-bg2)}.dx-frow:hover b{color:var(--g-ink)}.dx-frow:hover .dx-go{color:var(--g-ink);transform:translateX(2px)}}
@media(max-width:860px){
  .dx-frow{grid-template-columns:40px minmax(0,1fr) 18px;gap:4px 14px;padding:14px 10px;align-items:start}
  .dx-frow .dx-k{display:none}
  .dx-fic{grid-row:1/3}
  .dx-fs{grid-column:2;font-size:13.5px}
  .dx-frow .dx-go{grid-column:3;grid-row:1/3;align-self:center}
}
@media(prefers-reduced-motion:reduce){.dx-frow,.dx-frow .dx-go{transition:none}}