/* lead-form.css — what every contact form shares (markup: lib/lead-form.mjs, behaviour: lead-form.js):
   the inline errors, the consent line, the verify panel and the policy dialog. The fields themselves
   keep their section's look. TOKENS ONLY, so it follows every skin, light and dark.

   ERRORS ARE RED IN EVERY SKIN, the listing enquiry form's rule (owner, 2026-10-05): a fixed hue whose
   lightness follows the ground it sits on — deep on a light page, bright on a dark one. @supports-
   gated rather than declared twice: a custom property takes ANY value at parse time, so a second
   declaration the browser cannot compute does not fall back to the first — it goes invalid. */
form[data-lead-form], .lf-pol { --lf-err: #c8251d; --lf-edge: color-mix(in oklab, var(--page-ink) 58%, var(--page-bg)); }
@supports (color: oklch(from red l c h)) {
  form[data-lead-form], .lf-pol { --lf-err: oklch(from var(--page-bg) calc(0.74 - 0.19 * l) 0.2 27); }
}

/* once sent, the form's own children step aside for the thank-you (its last child, so a form laid
   out as a grid keeps one column for it). !important because each section lays its form's children
   out with its own display rules, and those would otherwise beat a [hidden]. */
form[data-lead-form][data-lf-state] > :not([data-lf-done]) { display: none !important; }
.lf-done { grid-column: 1 / -1; }

/* SEND WAITS FOR THE BOX — inert, not disabled: it keeps its focus stop, and a press says what is
   missing. Faded rather than greyed so each template's own button shape and colour still read. */
form[data-lead-form] button[type="submit"][aria-disabled="true"] { opacity: .45 !important; filter: none !important; cursor: not-allowed; }

/* a box takes its direction from what is IN it — an English placeholder or an email address on an
   Arabic page read "?How can I help" and right-aligned "you@example.com" (the page's rtl applied to
   Latin text); typed Arabic still runs right to left */
form[data-lead-form] :is(input:not([type=checkbox], [type=radio]), textarea),
form[data-lead-form] :is(input, textarea)::placeholder { unicode-bidi: plaintext; }

.lf-err { display: block; margin: 6px 0 0; font-size: var(--fs-meta); line-height: 1.4; color: var(--lf-err); }
.lf-err[hidden] { display: none; }
form[data-lead-form] :is(input, textarea)[aria-invalid="true"] { border-color: var(--lf-err); }

/* ── the consent line ──────────────────────────────────────────────────────────────────────────
   The policies are links on the page's ink — --page-link fails AA as text on several skins — told
   apart by an underline; hover changes colour only. */
.lf-consent { grid-column: 1 / -1; }
.lf-consent label {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
  font-size: var(--fs-ui); font-weight: 400; line-height: 1.5; color: var(--page-ink); cursor: pointer;
}
.lf-consent input[type="checkbox"] {
  color-scheme: var(--form-scheme, normal);   /* a dark skin's box is dark too, not a white square */
  width: 18px; height: 18px; min-height: 0; margin: .2em 0 0; padding: 0; flex: none;
  accent-color: var(--primary-bg); cursor: pointer;
}
.lf-consent .lf-policy { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lf-consent .lf-policy:hover { color: var(--page-muted); }
.lf-consent .lf-policy:focus-visible { outline: 2px solid var(--primary-bg); outline-offset: 2px; border-radius: 2px; }
.lf-req { color: var(--card-accent, var(--page-ink)); }

/* ── email or phone ─────────────────────────────────────────────────────────────────────────────
   One of two (owner, 2026-10-23). EVERY BOX HERE WEARS THE FIELDS' OWN LOOK (owner, the same day:
   "跟其他field样式统一"): the switch's track, Verify and the six digits carry the section's input
   class (.ff-box / .cf-input / .cp-input), so a filled underline, a pill or a square edge comes from
   the variant, not from here. This file only lays them out — at form[data-lead-form] weight, because
   the section's CSS lands after this file and its input rule would otherwise win the tie.
   SELECTED IS NOT ONLY A COLOUR: the chosen half is a thumb INSIDE the field, in the template's
   button colour. Not the whole half filled — on a dark page with light fields (luxury, before dark
   skins had their own form ground) a filled half read as a hole and the other half looked chosen. The
   radios stay real (arrow keys, a screen reader's "1 of 2") and are drawn by their labels. */
.lf-reach { grid-column: 1 / -1; display: grid; gap: clamp(12px, 1.6vw, 16px); margin: 0 0 clamp(14px, 1.8vw, 18px); }
form[data-lead-form] .lf-reach > .lf-chan { margin: 0; }
/* the box not chosen — !important because it wears its section's field class (.ff, .cf-field,
   .cp-field), whose display rule would otherwise beat [hidden] */
.lf-chan[hidden] { display: none !important; }
.lf-choose { margin: 0; padding: 0; border: 0; min-width: 0; }
.lf-legend { display: block; padding: 0; margin: 0 0 8px; }

/* the track is a field box; its 3px inset comes off each half's padding, so the switch stands
   exactly as tall as the fields (the field's own 12px 14px, less 3px) */
.lf-seg {
  border: 1px solid var(--lf-edge); border-radius: var(--radius, 8px);
  background: var(--form-bg, var(--field-bg, var(--card-bg))); color: var(--form-ink, var(--field-ink, var(--page-ink))); font-size: var(--fs-ui);
}
form[data-lead-form] .lf-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; width: 100%; padding: 3px; }
.lf-seg-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.lf-seg-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lf-seg-box {
  display: grid; place-items: center; height: 100%; padding: 9px 11px; text-align: center;
  border-radius: max(0px, calc(var(--radius, 8px) - 3px)); font-weight: 600;
  transition: background-color .15s ease, color .15s ease;
}
/* the chosen half wears the template's own button pair — the Send button's colour (owner, 2026-10-23:
   "email和phone选择按钮颜色,要对上模版颜色"); --primary-bg/--primary-ink is contrast-checked per skin */
.lf-seg-opt:hover input:not(:checked) + .lf-seg-box { background: color-mix(in oklab, var(--primary-bg) 14%, transparent); }
.lf-seg-opt input:checked + .lf-seg-box { background: var(--primary-bg); color: var(--primary-ink); }
.lf-seg-opt input:focus-visible + .lf-seg-box { outline: 2px solid var(--primary-bg); outline-offset: 2px; }

/* line-height at a class's weight: the .ff kit leaves it to the browser (an input's "normal"), the
   .cf/.cp inputs set it in their font shorthand and must keep it — both then match their fields */
.lf-seg, .lf-vbtn { line-height: normal; }

/* the chosen box with Verify — and, once verified, the badge — beside it. Verify is a field box
   with a word in it; it stretches to the box's height, and hover darkens its edge (colour only). */
.lf-inrow { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.lf-inrow > input { flex: 1 1 auto; min-width: 0; width: auto; }
.lf-vbtn {
  min-height: 44px; border: 1px solid var(--lf-edge); border-radius: var(--radius, 8px);
  background: var(--form-bg, var(--field-bg, var(--card-bg))); color: var(--form-ink, var(--field-ink, var(--page-ink))); font-family: inherit; font-size: var(--fs-ui);
}
form[data-lead-form] .lf-vbtn {
  flex: none; width: auto; padding-inline: 20px; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
form[data-lead-form] .lf-vbtn:hover:not(:disabled) { border-color: var(--form-ink, var(--field-ink, var(--page-ink))); }
form[data-lead-form] .lf-vbtn:focus-visible { outline: 2px solid var(--primary-bg); outline-offset: 2px; }
.lf-vbtn[aria-busy="true"] { cursor: progress !important; }
.lf-vbtn[hidden] { display: none; }
/* ── "Why verify?" ────────────────────────────────────────────────────────────────────────────────
   On the box's label row, at its far end — over the Verify button it explains. The note opens ABOVE
   the link (over the switch), so a pointer on its way down to Verify never has to cross it; under
   it only where the top of the screen would cut it (lead-form.js sets data-lf-below). Inverted —
   the page's ink as its ground — so it reads as a note on every skin, light or dark. The link is
   the page's muted ink with a dotted underline; hover and open change its colour only. */
.lf-labrow { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; min-width: 0; }
.lf-whywrap { margin-inline-start: auto; }
.lf-whywrap[hidden] { display: none; }
.lf-why {
  display: inline-flex; align-items: baseline; gap: 6px; min-height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body, inherit); font-size: var(--fs-meta); font-weight: 500; line-height: 24px;
  letter-spacing: 0; text-transform: none; color: var(--page-muted); transition: color .15s ease;
}
.lf-why-t { text-decoration: underline dotted 1px; text-underline-offset: 3px; }
/* the mark on the letters' middle, not the line box's (16px mark: half is 8px) */
.lf-why-i svg { display: inline-block; vertical-align: calc(0.35em - 8px); vertical-align: calc(0.5cap - 8px); }
.lf-why:hover, .lf-why[aria-expanded="true"] { color: var(--page-ink); }
.lf-why:focus-visible { outline: 2px solid var(--primary-bg); outline-offset: 2px; border-radius: 2px; }
.lf-whytip {
  position: absolute; z-index: 30; inset-inline-end: 0; bottom: calc(100% + 10px);
  width: max-content; max-width: min(23rem, 100%); padding: 12px 14px;
  border-radius: min(var(--radius, 8px), 10px); background: var(--page-ink); color: var(--page-bg);
  font-family: var(--font-body, inherit); font-size: var(--fs-meta); font-weight: 400; line-height: 1.55;
  letter-spacing: 0; text-transform: none; text-align: start; box-shadow: 0 10px 28px rgb(0 0 0 / .2);
}
.lf-whytip[hidden] { display: none; }
.lf-whytip::after {
  content: ""; position: absolute; inset-inline-end: 30px; top: 100%;
  border: 7px solid transparent; border-top-color: var(--page-ink); border-bottom-width: 0;
}
[data-lf-below] > .lf-whytip { bottom: auto; top: calc(100% + 10px); }
[data-lf-below] > .lf-whytip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--page-ink); border-bottom-width: 7px; border-top-width: 0; }

/* verified: a fixed green whose lightness follows the ground, the errors' recipe */
.lf-reach { --lf-ok: #1f7a3d; }
@supports (color: oklch(from red l c h)) { .lf-reach { --lf-ok: oklch(from var(--page-bg) calc(0.72 - 0.2 * l) 0.14 150); } }
.lf-okbadge { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font-size: var(--fs-ui); font-weight: 600; color: var(--page-ink); }
.lf-okbadge[hidden] { display: none; }
.lf-okbadge svg { color: var(--lf-ok); }

/* the code, under the box it was sent to */
.lf-code { padding: clamp(14px, 1.8vw, 18px); border: 1px solid color-mix(in oklab, var(--page-ink) 24%, transparent); border-radius: var(--radius-lg, 12px); }
.lf-code[hidden] { display: none; }
.lf-code .lf-text { margin: 0 0 12px; }
.lf-code .lf-actions { margin-top: 8px; }
.lf-code .lf-demo { margin-top: 10px; }
.lf-code [data-lf-sent][aria-busy="true"] { opacity: .6; }
.lf-verr { margin: 0; }
.lf-verr[hidden] { display: none; }

/* ── the thank-you ─────────────────────────────────────────────────────────────────────────────── */
.lf-done {
  padding: clamp(20px, 2.6vw, 28px); border: 1px solid color-mix(in oklab, var(--page-ink) 24%, transparent);
  border-radius: var(--radius-lg, 12px); color: var(--page-ink);
}
.lf-title { margin: 0 0 8px; font: 600 1.375rem/1.3 var(--font-display, inherit); color: inherit; }
.lf-title:focus { outline: none; }
.lf-text { margin: 0 0 20px; font-size: var(--fs-ui); line-height: 1.55; color: var(--page-muted); }
.lf-text b { color: var(--page-ink); font-weight: 600; overflow-wrap: anywhere; }

/* six boxes, always left to right — a code is read in the order it was sent, in any script.
   A GRID OF minmax(0, 52px), not six 52px flex items: a fixed width is the row's min-content, and
   on a 390px phone that pushed the whole page column 14px past the screen. */
.lf-digits { display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); gap: clamp(6px, 1.4vw, 10px); direction: ltr; }
.lf-digit {
  border: 1px solid var(--lf-edge); border-radius: var(--radius, 8px);
  color: var(--form-ink, var(--field-ink, var(--page-ink))); background: var(--form-bg, var(--field-bg, var(--card-bg)));
}
/* the box is the field's (its input class); the size is the code's */
form[data-lead-form] .lf-digit {
  width: 100%; min-width: 0; height: 60px; min-height: 0; padding: 0; text-align: center;
  font-size: 1.5rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
form[data-lead-form] .lf-digit:focus-visible { outline: 2px solid var(--primary-bg); outline-offset: 1px; border-color: var(--primary-bg); }
.lf-digits + .lf-err { margin-top: 10px; }

.lf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 22px; }
.lf-link {
  padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-ui); color: var(--page-ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.lf-link:hover:not(:disabled) { color: var(--page-muted); }
.lf-link:disabled { color: var(--page-muted); text-decoration: none; cursor: default; }
.lf-link:focus-visible { outline: 2px solid var(--primary-bg); outline-offset: 2px; border-radius: 2px; }

/* the dashed "this is a preview" note the listing route's demo notices wear */
.lf-demo {
  margin: 16px 0 0; padding: 9px 12px;
  border: 1px dashed color-mix(in srgb, var(--page-ink) 30%, transparent); border-radius: 8px;
  font-size: var(--fs-meta); line-height: 1.45; color: var(--page-muted);
}


/* ── the policy dialog — MyGoodReal's page in a frame ─────────────────────────────────────────── */
.lf-pol {
  width: min(880px, calc(100vw - 32px)); height: min(88vh, 960px); height: min(88dvh, 960px);
  max-width: none; max-height: none; padding: 0; border: 0; overflow: hidden;
  border-radius: var(--radius-lg, 12px); background: var(--card-bg, #fff); color: var(--page-ink);
  box-shadow: 0 24px 64px rgb(0 0 0 / .28);
}
.lf-pol[open] { display: flex; flex-direction: column; }
.lf-pol::backdrop { background: rgb(10 12 16 / .55); }
.lf-pol-top {
  display: flex; align-items: center; gap: 12px 18px; flex: none;
  padding: 10px 10px 10px 22px; border-bottom: 1px solid var(--page-border);
}
.lf-pol-h { flex: 1 1 auto; min-width: 0; margin: 0; font: 600 1.25rem/1.3 var(--font-display, inherit); color: var(--page-ink); }
.lf-pol-new { flex: none; font-size: var(--fs-meta); color: var(--page-ink); text-decoration: underline; text-underline-offset: 3px; }
.lf-pol-new:hover { color: var(--page-muted); }
.lf-pol-x {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--page-ink); cursor: pointer;
}
.lf-pol-x:hover { background: color-mix(in oklab, var(--page-ink) 8%, transparent); }
.lf-pol :is(.lf-pol-x, .lf-pol-new):focus-visible { outline: 2px solid var(--primary-bg); outline-offset: 2px; }
/* MyGoodReal's pages are white whatever the skin, so the frame is too — no dark flash while it loads */
.lf-pol-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: #fff; }
@media (max-width: 560px) {
  .lf-pol { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .lf-pol-new { display: none; }
}