/* All Painting light roll-out layer: the tools: Painting Cost Calculator page and widget, Colour Visualizer page and the ap-visualiser tool UI.
   Loaded after ap-light.css on every page; every rule is scoped to body.ap-light. The Colour Visualizer tool's own light
   rules live in the ap-visualiser plugin (vis.css, loaded after this file on its page only).

   Painting Cost Calculator ([ap_estimator part="form|result"], ap-bold): white cards; each question numbered in a pale-blue
   square; answers are selectable chips with a radio or checkbox mark (selected: #eaf2ff, blue ring, blue mark); the
   stepper is white with blue +/-; the result card is white with an icon square, the range in ink and the breakdown on
   hairlines (its buttons are the page's light pills). On phones the answers stack full width and the mini-total bar is white.
   Contrast: ink on white 17.8, ink on #eaf2ff 15.8, #344054 on white 10.5, #5b6577 on white 5.9, #0050c8 on #eaf2ff 6.3,
   blue #0a66f2 text on white 5.0 (white on blue 5.0, on #0050c8 7.0); radio and checkbox marks #7b8798 on white 3.6 (3:1 for
   non-text). Hover only under (hover: hover); focus is a 3 px blue outline, offset 2 to 3 px. */

/* ---------- the two cards ---------- */
body.ap-light #et-boc .et-l .ap-est-row > .et_pb_column:first-child {
  background: #fff; border: 1px solid var(--apl-line); border-radius: var(--apl-radius); box-shadow: var(--apl-shadow-sm);
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
}
body.ap-light #et-boc .et-l .ap-est-card {
  background: #fff; color: var(--apl-text); border: 1px solid var(--apl-line); border-radius: var(--apl-radius);
  box-shadow: var(--apl-shadow-md); padding: clamp(1.25rem, 2.6vw, 2.25rem); gap: 1.25rem;
}
body.ap-light #et-boc .et-l .ap-est-card::after { display: none; }
@media (min-width: 900px) { body.ap-light #et-boc .et-l .ap-est-card { top: calc(var(--ap-header-h) + 24px); } }

/* ---------- form: numbered questions ---------- */
body.ap-light .ap-est-form { gap: 1.75rem; counter-reset: apl-est; font-family: var(--apl-font); }
body.ap-light .ap-est-form .field { gap: 0.75rem; }
body.ap-light .ap-est-form .field > span, body.ap-light .ap-est-form .field legend {
  display: flex; align-items: center; gap: 0.75rem; padding: 0; margin: 0 0 0.1rem;
  font-family: var(--apl-font); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--apl-ink);
}
body.ap-light .ap-est-form .field > span::before, body.ap-light .ap-est-form .field legend::before {
  counter-increment: apl-est; content: counter(apl-est); content: counter(apl-est) / "";
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--apl-blue-50); color: var(--apl-blue-strong); font-size: 0.9375rem; font-weight: 700; line-height: 1;
}

/* ---------- answers: chips with a radio or checkbox mark ---------- */
body.ap-light .ap-est-form .ap-chips, body.ap-light .ap-est-form .ap-toggles { gap: 0.5rem; }
body.ap-light .ap-est-form .ap-chips input + span, body.ap-light .ap-est-form .ap-toggles input + span {
  gap: 0.6rem; min-height: 48px; padding: 0.6rem 1rem 0.6rem 0.8rem; border-radius: var(--apl-radius-sm);
  border: 1px solid var(--apl-line-strong); background: #fff; color: var(--apl-ink);
  font-family: var(--apl-font); font-weight: 600; font-size: 0.9375rem; line-height: 1.3;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
body.ap-light .ap-est-form .ap-chips input + span::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #7b8798; background: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
body.ap-light .ap-est-form .ap-toggles input + span::before { width: 18px; height: 18px; border-radius: 5px; border: 2px solid #7b8798; background-color: #fff; }
/* selected: pale-blue fill, a 2 px blue ring (1 px border + 1 px inset, so nothing moves) and a blue mark */
body.ap-light .ap-est-form .ap-chips input:checked + span, body.ap-light .ap-est-form .ap-toggles input:checked + span {
  background: var(--apl-blue-50); border-color: var(--apl-blue); box-shadow: inset 0 0 0 1px var(--apl-blue); color: var(--apl-ink);
}
body.ap-light .ap-est-form .ap-chips input:checked + span::before { border-color: var(--apl-blue); background: #fff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 9px var(--apl-blue); }
body.ap-light .ap-est-form .ap-toggles input:checked + span::before { background-color: var(--apl-blue); border-color: var(--apl-blue); background-size: 13px; }
@media (hover: hover) {
  body.ap-light .ap-est-form .ap-chips input:not(:checked):hover + span, body.ap-light .ap-est-form .ap-toggles input:not(:checked):hover + span { background: var(--apl-tint); border-color: var(--apl-blue); }
  body.ap-light .ap-est-form .ap-chips input:not(:checked):hover + span::before, body.ap-light .ap-est-form .ap-toggles input:not(:checked):hover + span::before { border-color: var(--apl-blue); }
  body.ap-light .ap-est-form .ap-chips input:checked:hover + span, body.ap-light .ap-est-form .ap-toggles input:checked:hover + span { border-color: var(--apl-blue-strong); box-shadow: inset 0 0 0 1px var(--apl-blue-strong); }
}
body.ap-light .ap-est-form .ap-chips input:focus-visible + span, body.ap-light .ap-est-form .ap-toggles input:focus-visible + span { outline: 3px solid var(--apl-blue); outline-offset: 2px; }
/* phones: one answer per row, full width, so the marks and labels line up; the four ceiling heights sit 3 + 1 from 375 px
   (the #et-boc twin outranks ap-bold's flex rule for the area pages' .ap-chips lists) */
@media (max-width: 599px) {
  body.ap-light #et-boc .et-l .ap-est-form .ap-chips, body.ap-light .ap-est-form .ap-chips, body.ap-light .ap-est-form .ap-toggles { display: grid; grid-template-columns: minmax(0, 1fr); }
  body.ap-light .ap-est-form .ap-chips label, body.ap-light .ap-est-form .ap-toggles label { display: flex; min-width: 0; }
  body.ap-light .ap-est-form .ap-chips input + span, body.ap-light .ap-est-form .ap-toggles input + span { flex: 1 1 auto; min-width: 0; }
}
@media (min-width: 375px) and (max-width: 599px) {
  body.ap-light #et-boc .et-l .ap-est-form .ap-chips:has(input[name="height"]), body.ap-light .ap-est-form .ap-chips:has(input[name="height"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.ap-light .ap-est-form .ap-chips:has(input[name="height"]) label:last-child { grid-column: 1 / -1; }
}

/* ---------- stepper: white, blue minus and plus ---------- */
body.ap-light .ap-est-form .ap-stepper { border: 1px solid var(--apl-line-strong); border-radius: var(--apl-radius-sm); background: #fff; overflow: visible; }
body.ap-light .ap-est-form .ap-stepper button {
  width: 48px; height: 48px; border-radius: 11px; color: var(--apl-blue); font-family: var(--apl-font); font-size: 1.5rem; font-weight: 600; line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}
body.ap-light .ap-est-form .ap-stepper button:hover { background: transparent; }
@media (hover: hover) { body.ap-light .ap-est-form .ap-stepper button:hover { background: var(--apl-blue-50); color: var(--apl-blue-strong); } }
body.ap-light .ap-est-form .ap-stepper button:active { background: var(--apl-blue-100); color: var(--apl-blue-strong); }
body.ap-light .ap-est-form .ap-stepper button:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 2px; }
body.ap-light .ap-est-form .ap-stepper output { min-width: 3.25rem; font-family: var(--apl-font); font-weight: 800; font-size: 1.25rem; color: var(--apl-ink); }

/* ---------- result card ---------- */
body.ap-light .ap-est-result { gap: 1.1rem; font-family: var(--apl-font); }
body.ap-light .ap-est-result .label {
  display: flex; align-items: center; gap: 0.75rem; margin: 0; padding: 0;
  font-family: var(--apl-font); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--apl-blue);
}
body.ap-light .ap-est-result .label::before {
  content: ""; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--apl-blue-50) center / 24px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2.5' width='14' height='19' rx='2.5'/><rect x='8' y='5.5' width='8' height='4' rx='1'/><path d='M8.5 13h.01M12 13h.01M15.5 13h.01M8.5 16.5h.01M12 16.5h.01M15.5 16.5h.01'/></svg>");
}
body.ap-light .ap-est-range { font-family: var(--apl-font); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; color: var(--apl-ink); margin: 0; padding: 0; }
body.ap-light .ap-est-range small { font-family: var(--apl-font); font-size: 0.9375rem; font-weight: 600; line-height: 1.45; color: var(--apl-muted); margin-top: 0.6rem; letter-spacing: 0; }
body.ap-light .ap-est-lines, body.ap-light #et-boc .et-l .ap-est-lines { gap: 0; margin: 0; padding: 0; font-size: 0.9375rem; color: var(--apl-text); border-top: 1px solid var(--apl-line); }
body.ap-light .ap-est-lines li { border-bottom: 1px solid var(--apl-line); padding: 0.55rem 0; line-height: 1.4; }
body.ap-light .ap-est-lines li span { text-wrap: balance; }
body.ap-light .ap-est-lines li b { color: var(--apl-ink); font-weight: 700; }
body.ap-light .ap-est-note { font-size: 0.875rem; line-height: 1.55; color: var(--apl-muted); margin: 0; padding: 0; }

/* ---------- phones: the mini-total bar that follows the form ---------- */
@media (max-width: 899px) {
  body.ap-light .ap-est-sticky {
    left: 12px; right: 12px; bottom: 12px; padding: 0.3rem 0.5rem 0.3rem 1rem; border-radius: var(--apl-radius); background: #fff; color: var(--apl-text);
    border: 1px solid var(--apl-line); box-shadow: var(--apl-shadow-lg); font-family: var(--apl-font); font-size: 0.9375rem;
  }
  body.ap-light .ap-est-sticky b { font-family: var(--apl-font); font-weight: 800; font-size: 1.125rem; color: var(--apl-ink); }
  body.ap-light .ap-est-sticky a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; color: var(--apl-blue); font-weight: 700;
    text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px;
  }
}
/* the smallest phones: the link wraps onto two lines when the widest range needs the room ($49,550 to $77,950 at 320) */
@media (max-width: 374px) {
  body.ap-light .ap-est-sticky { gap: 0.5rem; padding-left: 0.85rem; }
  body.ap-light .ap-est-sticky b { font-size: 1rem; }
  body.ap-light .ap-est-sticky a { white-space: normal; text-align: right; line-height: 1.2; padding: 0 0.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.ap-light .ap-est-sticky { transition: none; }
  body.ap-light .ap-est-form .ap-chips input + span, body.ap-light .ap-est-form .ap-toggles input + span, body.ap-light .ap-est-form .ap-chips input + span::before { transition: none; }
}
body.ap-light #et-boc .et-l .ap-est-nojs, body.ap-light .ap-est-nojs { margin: 0.75rem 0 0; color: var(--apl-text); font-family: var(--apl-font); font-size: 0.95rem; line-height: 1.5; }
body.ap-light .ap-est-nojs a { color: var(--apl-blue-strong); text-decoration: underline; }
/* before the script runs the range line is a prompt in body size, not a big number */
body.ap-light .ap-est-range .ap-est-val:only-child, body.ap-light .ap-est-result:not(.is-live) .ap-est-val { font-size: 1.15rem; letter-spacing: 0; }