/* Knead /faq only: the question finder (2026-11-11). Linked after styles.css on faq.html (build: pages/info.mjs page.css),
   because styles.css and the look files are byte-pinned (tests/wide-screen.test.mjs). Every rule that hides anything
   hangs off .faq-list-on, which script.js adds; without JS nothing here applies and all questions show.
   Test: site-docs/tests/faq-search-2026-11-11.test.mjs */

/* the box: a plain underlined line, like the hairlines of the list below it, not a boxed widget */
.faq-find { max-width: 52rem; margin: 0 0 28px; }
.faq-find[hidden] { display: none; }
.faq-find-l { display: block; margin-bottom: 8px; font-size: .9rem; letter-spacing: .02em; color: var(--ivory-2); }
.faq-find input {
  width: 100%; min-height: 48px; padding: 10px 0;
  font: inherit; font-size: 1.0625rem; color: var(--ivory);
  background: transparent; border: 0; border-bottom: 1px solid var(--blush-2); border-radius: 0;
  color-scheme: dark; -webkit-appearance: none; appearance: none;
  transition: border-color .28s var(--ease);
}
.faq-find input::placeholder { color: var(--ivory-3); opacity: 1; }
.faq-find input:hover { border-bottom-color: var(--blush); }
.faq-find input:focus-visible { outline: 2px solid var(--blush); outline-offset: 4px; border-bottom-color: var(--blush); }
/* the native clear (x) in WebKit, kept but drawn in the site's hairline colour */
.faq-find input::-webkit-search-cancel-button {
  -webkit-appearance: none; width: 14px; height: 14px; cursor: pointer;
  background: linear-gradient(45deg, transparent 47%, var(--blush) 47%, var(--blush) 53%, transparent 53%),
              linear-gradient(-45deg, transparent 47%, var(--blush) 47%, var(--blush) 53%, transparent 53%);
}

/* the count is for screen readers and shows only while searching. It is the live region, so it is never display:none
   (that drops it from the accessibility tree and the first count can go unannounced, review #K31); empty, it is
   zero-height and takes no margin. */
.faq-count { max-width: 52rem; margin: 0 0 12px; font-size: .9rem; color: var(--ivory-3); }
.faq-count:empty { margin: 0; }

/* with JS on, the list's top hairline belongs to the list, so it stays when the first question is filtered out */
.faq-list-on .list { border-top: 1px solid var(--rule); }
.faq-list-on .list details:first-child { border-top: 0; }
.faq-list-on .list details[hidden] { display: none; }

.faq-none { max-width: 52rem; padding: 22px 0; border-bottom: 1px solid var(--rule); color: var(--ivory-2); }
.faq-none[hidden] { display: none; }
.faq-none .link { margin-left: 6px; }
/* one studio + its number per group, never split; groups are spaced here, with no separator character in the markup,
   so when they stack on a phone nothing dangles at a line end (review R13) */
.faq-tel { display: inline-block; margin-right: 18px; white-space: nowrap; color: var(--ivory); }

.faq-more { margin-top: 28px; padding: 0 0 2px; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
.faq-more[hidden] { display: none; }

/* FAQ finder 2026-11-12 (spec 2026-11-12-knead-faq-finder-design.md): related questions under each answer, the
   treatment shortcuts line, and "Show N more matches". Small and quiet, in the same hairline language. */
.faq-rel { margin-top: 14px; font-size: .9rem; line-height: 1.6; color: var(--ivory-3); }
.faq-rel a { color: var(--ivory-2); text-decoration: underline; text-decoration-color: var(--blush-2); text-underline-offset: 3px; }
.faq-rel a:hover { color: var(--ivory); text-decoration-color: var(--blush); }
.faq-short { max-width: 52rem; margin: 0 0 16px; font-size: .95rem; color: var(--ivory-2); }
.faq-short[hidden], .faq-short a[hidden] { display: none; }
.faq-short a { margin-left: 6px; color: var(--ivory); text-decoration: underline; text-decoration-color: var(--blush); text-underline-offset: 3px; }
.faq-matches { margin-top: 20px; padding: 0 0 2px; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
.faq-matches[hidden] { display: none; }

/* a question opened from a related link or a #q- deep link lands below the fixed nav (same as the studio accordions) */
.faq details { scroll-margin-top: calc(var(--nav-h) + 16px); }
/* while the search box has focus (script.js adds html.faq-typing) the phone's sticky Book/Call bar and its call sheet
   step aside, so with the keyboard up they never sit over the results. styles.css is byte-pinned, so the rule is here. */
.faq-typing .stick, .faq-typing #call-sheet { display: none; }