/* Cards in the chat thread (enquiry/visit forms, fee estimate, comparison,
   sources, quick replies, the home screen) and the standalone /enquire pages.
   Loaded into the Deep Chat shadow root as auxiliaryStyle, where custom
   properties inherit from the iframe document (tokens.css), and on /enquire
   after tokens.css + app.css. No values of its own: tokens only.
   Unlayered on purpose, so it wins over Deep Chat's inline defaults.
   --widget / --widget-ink are the nursery's colour, set by chat-embed.js;
   they fall back to the ink primary. */

.nf-form, .nf-form *, .nf-card, .nf-card *, .nf-done, .nf-done *, .nf-home, .nf-home *, .nf-sources, .nf-replies, .nf-replies * { box-sizing: border-box; }
.nf-form, .nf-card, .nf-done {
  width: 100%; max-width: 100%; padding: var(--sp-4);
  font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--foreground);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
}
.nf-page-card .nf-form, .nf-page-card .nf-done { padding: 0; border: 0; background: none; font-size: var(--text-base); line-height: var(--leading-base); }
.nf-page-card { margin-top: var(--sp-6); }
.nf-form p, .nf-card p, .nf-done p, .nf-home p { margin: 0; }
.nf-form-title, .nf-card-title, .nf-done-title { font-size: var(--text-base); line-height: var(--leading-base); font-weight: 600; }
.nf-form-intro { color: var(--muted-foreground); }

/* fields */
.nf-form > * + * { margin-top: var(--sp-4) !important; }
.nf-form > .nf-form-intro { margin-top: var(--sp-1) !important; }
.nf-form .nf-row { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .nf-form .nf-row-2 { grid-template-columns: 1fr 1fr; } }
.nf-field { display: grid; gap: var(--sp-1_5); min-width: 0; margin: 0; padding: 0; border: 0; }
.nf-field > span, .nf-field > legend { padding: 0; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 500; color: var(--foreground); }
.nf-opt { font-weight: 400; color: var(--muted-foreground); }
.nf-field input, .nf-field select, .nf-field textarea {
  width: 100%; min-height: var(--h-control); padding: 0 var(--sp-3); margin: 0;
  font: inherit; font-size: var(--text-base); line-height: var(--leading-base); color: var(--foreground);
  background: var(--background); border: 1px solid var(--input); border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
  appearance: none; -webkit-appearance: none;
}
.nf-field textarea { min-height: 5rem; padding: var(--sp-2) var(--sp-3); resize: vertical; }
.nf-field select {
  padding-right: var(--sp-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2378716c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-3) center;
}
.nf-field input::placeholder, .nf-field textarea::placeholder { color: var(--subtle-foreground); opacity: 1; }
.nf-field input:focus-visible, .nf-field select:focus-visible, .nf-field textarea:focus-visible {
  outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent);
}
.nf-field [aria-invalid="true"] { border-color: var(--bad-solid); }
.nf-hint { color: var(--muted-foreground); }

/* days: equal toggle buttons, checked = primary */
.nf-days-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1_5); }
.nf-days input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nf-days-grid span { display: flex; align-items: center; justify-content: center; min-height: var(--h-control);
  border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--background); font-weight: 500; }
.nf-days-grid input:checked + span { background: var(--widget, var(--primary)); border-color: var(--widget, var(--primary)); color: var(--widget-ink, var(--primary-foreground)); }
.nf-days-grid input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }

/* read-back of what the assistant gathered; slot and call-time picks; folded details */
.nf-readback { padding: var(--sp-3); border-radius: var(--radius-md); background: var(--muted); }
.nf-readback-t { font-weight: 600; }
.nf-readback dl { display: grid; gap: var(--sp-1); margin: var(--sp-2) 0 0; }
.nf-readback dl div { display: flex; gap: var(--sp-2); }
.nf-readback dt { flex: none; min-width: 7.5rem; color: var(--muted-foreground); }
.nf-readback dd { margin: 0; font-weight: 500; }
.nf-pick-grid { display: flex; flex-wrap: wrap; gap: var(--sp-1_5); }
.nf-pick-grid label, .nf-days label { position: relative; }
.nf-pick-grid input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nf-pick-grid span { display: flex; align-items: center; min-height: var(--h-control-sm); padding: 0 var(--sp-3); border: 1px solid var(--input); border-radius: var(--radius-full); background: var(--background); font-weight: 500; }
.nf-pick-grid input:checked + span { background: var(--widget, var(--primary)); border-color: var(--widget, var(--primary)); color: var(--widget-ink, var(--primary-foreground)); }
.nf-pick-grid input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.nf-more summary { cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nf-more-body { display: grid; gap: var(--sp-4); }
.nf-more[open] .nf-more-body { margin-top: var(--sp-3); }
.nf-funded-grid { display: grid; gap: var(--sp-2); }

/* consent */
.nf-consent { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--foreground); cursor: pointer; }
.nf-form .nf-consent input { flex: none; min-height: 0; padding: 0; box-shadow: none; appearance: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--background); display: grid; place-content: center; cursor: pointer; }
.nf-form .nf-consent input::before { content: ""; width: 12px; height: 12px; transform: scale(0); background: var(--primary-foreground); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.nf-form .nf-consent input:checked { background: var(--primary); border-color: var(--primary); }
.nf-form .nf-consent input:checked::before { transform: scale(1); }
.nf-form .nf-consent input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nf-consent a { color: inherit; }

/* error summary and submit */
.nf-error { padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--bad-solid); border-radius: var(--radius-sm); background: var(--bad-soft); color: var(--bad-ink); }
.nf-submit {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--h-control); padding: 0 var(--sp-4);
  border: 0; border-radius: var(--radius-md); cursor: pointer; font: inherit; font-size: var(--text-base); font-weight: 500;
  background: var(--widget, var(--primary)); color: var(--widget-ink, var(--primary-foreground));
}
.nf-submit:hover { background: color-mix(in oklab, var(--widget, var(--primary)) 90%, var(--background)); }
.nf-submit:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nf-submit[disabled] { opacity: .5; cursor: progress; }
@media (min-width: 640px) { .nf-page-card .nf-submit { width: auto; } }
.nf-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* success replaces the form */
.nf-done { display: grid; gap: var(--sp-2); justify-items: start; }
.nf-done-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--ok-soft); color: var(--ok-ink); }
.nf-page-card .nf-done-title { font-size: var(--text-2xl); line-height: var(--leading-2xl); }

/* fee estimate and comparison cards */
.nf-card-title { margin-bottom: var(--sp-2) !important; }
.nf-kv { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.nf-kv th { padding: var(--sp-2) 0; text-align: left; font-weight: 400; color: var(--muted-foreground); }
.nf-kv td { padding: var(--sp-2) 0; text-align: right; font-weight: 600; }
.nf-kv tr + tr > * { border-top: 1px solid var(--border); }
.nf-kv .nf-kv-total > * { border-top: 2px solid var(--foreground); color: var(--foreground); font-weight: 700; }
.nf-card-note { margin-top: var(--sp-2) !important; color: var(--muted-foreground); }
.nf-card-notes { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); color: var(--muted-foreground); }
.nf-card-src { margin-top: var(--sp-2) !important; color: var(--subtle-foreground); }
.nf-card a { color: var(--foreground); text-underline-offset: 3px; }
.nf-table-wrap { overflow-x: auto; }
.nf-compare { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.nf-compare th, .nf-compare td { padding: var(--sp-2); text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.nf-compare th:first-child, .nf-compare td:first-child { padding-left: 0; }
.nf-compare thead th { border-top: 0; font-weight: 500; color: var(--muted-foreground); }
.nf-compare tbody th { font-weight: 600; }
.nf-compare tbody th span { display: block; font-weight: 400; color: var(--muted-foreground); }
.nf-compare .nf-this > * { background: var(--brand-soft); }
.nf-compare .nf-this > :first-child { box-shadow: inset 3px 0 0 var(--brand); padding-left: var(--sp-2); }
.nf-np { color: var(--subtle-foreground); font-weight: 400; }

/* site assistant: nursery cards */
.nf-card .nf-nlist { margin: 0; padding: 0; list-style: none; }
.nf-n { display: grid; gap: 2px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--border); }
.nf-n:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.nf-card .nf-n-name { font-weight: 600; text-decoration: none; }
.nf-n-place { font-size: var(--text-sm); color: var(--muted-foreground); }
.nf-n-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: var(--text-sm); }
.nf-n-badge { padding: 1px 8px; border-radius: var(--radius-full); background: var(--muted); font-size: var(--text-label); font-weight: 500; }
.nf-card .nf-n-ask { justify-self: start; display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; font-size: var(--text-sm); font-weight: 600; color: var(--primary); text-decoration: none; }
.nf-card .nf-n-name:hover, .nf-card .nf-n-ask:hover { text-decoration: underline; }
.nf-n-ask svg { width: 14px; }

/* sources as numbered footnote links, then quick replies */
.nf-sources { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: baseline; font-size: var(--text-label); line-height: var(--leading-label); color: var(--muted-foreground); }
.nf-sources a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); text-underline-offset: 3px; }
.nf-sources a:hover { color: var(--foreground); }
.nf-sources a:focus-visible, .nf-replies .nf-reply:focus-visible, .nf-rate button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nf-replies { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.nf-replies .nf-reply {
  min-height: var(--h-control-sm); padding: 0 var(--sp-3); text-align: left; cursor: pointer;
  border: 1px solid var(--border) !important; border-radius: var(--radius-full) !important; background: var(--card) !important; color: var(--foreground);
  font: inherit; font-size: var(--text-sm); font-weight: 600; box-shadow: var(--shadow-xs);
}
/* !important: Deep Chat styles its suggestion buttons inline (white), which broke them in dark mode */
.nf-replies .nf-reply:hover { background: var(--muted) !important; }
.nf-replies select { flex: 1; min-width: 0; min-height: var(--h-control-sm); padding: 0 var(--sp-3); font: inherit; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--background); color: var(--foreground); }
.nf-retry { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; color: var(--muted-foreground); font-size: var(--text-sm); }

/* home screen: Deep Chat moves it into its shadow root as the intro panel */
.intro-panel { position: static !important; height: auto !important; top: auto !important; margin: 0 !important; }
.nf-home { max-width: 40rem; margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-2); font-family: var(--font-sans); font-size: .9375rem; line-height: var(--leading-base); color: var(--foreground); }
.nf-greet { margin-bottom: var(--sp-4) !important; font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 600; letter-spacing: -.01em; }
.nf-home-label { margin-bottom: var(--sp-2) !important; font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); }
.nf-sugg { display: grid; gap: var(--sp-1_5); margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.nf-chip {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; min-height: var(--h-control);
  padding: var(--sp-2) var(--sp-3); text-align: left; cursor: pointer; font: inherit; font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--card); color: var(--foreground);
}
.nf-chip svg { flex: none; width: 16px; height: 16px; color: var(--muted-foreground); }
.nf-chip:hover { border-color: var(--primary); color: var(--primary); }
.nf-chip:focus-visible, .nf-short-btn:focus-visible, .nf-disclose a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nf-short { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.nf-short-btn {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--h-control); padding: 0 var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs);
  font: inherit; font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer;
}
.nf-short-btn svg { width: 16px; height: 16px; }
.nf-short-btn:hover { background: var(--muted); }
.nf-disclose { display: flex; gap: var(--sp-2); font-size: var(--text-label); line-height: var(--leading-label); color: var(--muted-foreground); }
.nf-disclose svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.nf-disclose a { color: inherit; }
.nf-reader { margin: calc(-1 * var(--sp-2)) 0 var(--sp-4) !important; }
.nf-notice{padding:var(--sp-2);background:var(--muted)}
[data-held] .nf-done-icon{background:var(--warn-soft)}
.nf-rate{display:flex;gap:2px}
.nf-rate button{display:grid;padding:6px;border:0;border-radius:var(--radius-md);background:none;color:var(--muted-foreground);cursor:pointer}
.nf-rate button:hover{background:var(--muted)}
.nf-rate button:hover,.nf-rate [aria-pressed=true]{color:var(--foreground)}
.nf-rate [aria-pressed=true] path{fill:currentColor}