/* Face Shape Finder (NS10). Source: sites/needle-tools/tools/face-shape-finder/tool.css */
.chqt-fs-privacy { margin: 0 0 6px; font-size: 14px; background: #eef7ef; border: 1px solid #cfe6d3; color: #1d4d2c; border-radius: 10px; padding: 8px 10px; }
.chqt-fs-file { font-size: 16px; padding: 10px 0; min-height: 48px; max-width: 100%; }
.chqt-fs-opt { font-weight: 400; color: var(--chqt-muted); font-size: 13px; }
.chqt-fs-stage { display: flex; flex-direction: column; gap: 8px; }
/* the frame shrinks to the photo (display: table), so the tap layer and the marks cover exactly the
   picture. ui.js fitPhoto() sets the photo's width: the column's width or 70% of the screen's height,
   whichever is smaller — scaling a small photo UP as well as a big one down. (CSS max-height alone
   left a full-width portrait selfie taller than the screen, and width:auto rendered a small image at
   its natural size — a 2×3 px tap target. Both found by the WebKit gate.) */
.chqt-fs-canvas { position: relative; display: table; margin: 0 auto; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--chqt-line); background: #f3eeea; }
.chqt-fs-canvas img { display: block; max-width: 100%; height: auto; }
.chqt-fs-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the whole picture is the tap target — far easier on a phone than six small buttons */
.chqt-fs-hit { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; padding: 0; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.chqt-fs-hit:focus-visible { outline: 3px solid rgba(184, 80, 66, .55); outline-offset: -3px; }
.chqt-fs-step { margin: 0; font-size: 16px; font-weight: 600; }
.chqt-fs-step b { color: var(--chqt-accent); }
.chqt-fs-quiz { display: flex; flex-direction: column; gap: 16px; }
.chqt-fs-q { margin: 0; border: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chqt-fs-q legend { font-weight: 600; font-size: 15px; padding: 0; }
.chqt-fs-advice { display: flex; flex-direction: column; gap: 10px; }
.chqt-fs-group { background: #fff; border: 1px solid var(--chqt-line); border-radius: 10px; padding: 10px 12px; }
.chqt-fs-group h3 { margin: 0 0 4px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--chqt-muted); }
.chqt-fs-group p { margin: 0 0 4px; font-size: 15px; line-height: 1.45; }
.chqt-fs-group cite { font-style: normal; font-size: 13px; color: var(--chqt-muted); }
.chqt-fs-group cite a { color: inherit; }
.chqt-fs-fig svg { max-height: 260px; }
.chqt-fs-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.chqt-fs-bars li { display: grid; grid-template-columns: 7.5em 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; }
.chqt-fs-bar { height: 8px; border-radius: 999px; background: #eadfe1; overflow: hidden; }
.chqt-fs-bar span { display: block; height: 100%; background: var(--chqt-accent); }
/* NS75: the answer on the first phone screen — phones skip the lede, which the labels already say */
@media (max-width: 460px) {
  .chqt[data-tool="face-shape-finder"] .chqt-lede { display: none; }
}
.chqt[data-tool="face-shape-finder"] .chqt-short { display: none; }
@media (max-width: 460px) {
  .chqt[data-tool="face-shape-finder"] .chqt-short { display: inline; }
  .chqt[data-tool="face-shape-finder"] .chqt-full { display: none; }
  .chqt[data-tool="face-shape-finder"] .chqt-seg[data-name="md"] { flex-wrap: nowrap; gap: 6px; }
  .chqt[data-tool="face-shape-finder"] .chqt-seg[data-name="md"] button { flex: 1 1 auto; padding: 8px 10px; }
}