/* v117 — adapt (impeccable audit, Oct 10 2026, section A): phones, touch and accessible names. Linked last.
   _research/2026-10-10-impeccable-fixes.md §A. Desktop is unchanged: every layout rule here sits under a phone or touch query;
   the focus-ring fixes live in v103-a11y.css (the one focus layer). */

/* A5 · a decorative letter tile draws its letter from data-l, so a control's visible words start with its name (WCAG 2.5.3) */
.logo[data-l]::before,.sb-pl[data-l]::before,.hs-logo[data-l]::before,.flag[data-l]::before{content:attr(data-l)}

/* A1 · the page's head tools: one compact button that only a phone shows */
.pt-mtools{display:none}

/* A3 · nothing only on hover: a touch screen of any width shows the row tools, and a row's tools show while focus is in it */
@media (pointer:coarse){.db-why,.kb-ck,.apq-ck,.al-more,.cs-x,.ol-mv,.rm-acts,.kb-colx{opacity:1}}
.cs-w:focus-within .cs-x{opacity:1}
/* the board's and the approval list's tick box: the native box is drawn by .tk-box, so the input is see-through (no appearance) instead of
   opacity 0 — it is "shown" whenever its tick box is; its own ring stays off (the ring is drawn on .tk-box) */
.kb-ck input,.apq-ck input{opacity:1;-webkit-appearance:none;appearance:none;background:transparent;border:0;outline:none;box-shadow:none}

@media (max-width:640px){
  /* A1 · one row of head tools: the period (or Ask when a page has none) and "More page tools"; the rest opens in place, in desktop order */
  .pt-tools{flex-wrap:wrap;row-gap:8px}
  .pt-tools > .pt-mtools{display:grid;width:32px;height:32px}
  .pt-tools:not(.is-more) > :not(.pt-pri):not(.pt-mtools){display:none}
  .pt-tools:not(:has(> :not(.pt-pri):not(.pt-mtools):not(.ky-btn))) > .pt-mtools{display:none}
  .pt-mtools[aria-expanded="true"]{background:var(--bg-3);color:var(--fg)}
  .pt-tools:not(.is-more) > .gr-per > :not(.hx-range){display:none}   /* Growth's period: "Last 28 days" stays, its comparison opens with the rest */

  /* A2 · targets of at least 24×24 px (WCAG 2.5.8). Links inside a sentence are exempt.
     flex / grid boxes: a 24px minimum (icon squares 24 wide too) */
  :is(a.fl,.gr-pv,a.gr-ptr,button.ce-i,button.cl-newk,a.lk,a.ag-src,a.stg-uc,a.db-rnext,button.ai-mlink,a.lc-flag,a.fx-mi,a.hx-w,.ag-partial,.annot-n,.stg-sw,button.sv-i){min-height:24px}
  :is(a.fl,.annot-n,.stg-sw,button.sv-i){min-width:24px}
  .gr-pv{height:auto}
  .stg-sw{width:24px;height:24px}
  /* text links and text buttons: padding grows the box around the words (an inline link's line keeps its height) */
  :is(a.hs-seg,.hs-lane > a,button.cl-sumk,button.lk,button.ex-lnk,a.pl-sl,th > a,a.db-cz,a.db-bl){padding-block:3px}
  :is(a.ag-in,a.pl-sl,th > a,a.db-cz,a.db-bl,.grow > a:not([class])){padding-block:4px}
  :is(a.hs-n,a.db-tl,a.db-tt,a.stg-a,.k2 > a.k,.k > a.hs-rl,.hs-pc-t > a.hs-rl){padding-block:2px}
  .stg-used > a.stg-uc{min-height:24px}   /* v103-a11y's phone chip rule (0,2,0) asks 22px; a chip that is a link takes 24 */

  /* A4 · a settings field with a prefix ("dottpace.com/") shrinks its input to the panel, so the input and its focus ring stay inside */
  .stg-field > .stg-in{min-width:0}

  /* A6 · Home's footer line: its first "·" strip sat 2px past the left edge — on a phone each part takes its own line, like In progress */
  .hs-foot-w .hs-foot.hs-sl{flex-direction:column;align-items:flex-start;margin-left:0;clip-path:none}
  .hs-foot-w .hs-foot.hs-sl > *{padding-left:0}
  .hs-foot-w .hs-foot.hs-sl > ::before{content:none}
}

/* polish (Oct 10): the (i) detail button sits on the text line instead of raising it */
.pl-s-i { vertical-align: -6px; }

/* Growth "Since you last looked" buttons: full width on phones without the 20px push that clipped them */
@media (max-width: 640px) { .gr-slim-b { margin-left: 0; max-width: 100%; min-width: 0; } }

/* Oct 10 (founder): one frame colour — the header takes the sidebar and canvas colour in light and dark; a hairline below still separates it */
.app.v89 .topbar, .topbar { background: var(--canvas); }