/* Admin Leak Check. Loaded only on /leak-check and its results pages; uses the tokens in site.css. */

/* ---------- intro ---------- */
.lc-hero__for { color: var(--ink-soft); font-size: var(--text-sm); margin: 0; }
.lc-section { padding-top: var(--space-5); }

/* ---------- the form ---------- */
.lc { max-width: 46rem; }
.lc-step { border: 0; margin: 0 0 var(--space-5); padding: 0; min-width: 0; }
.lc--js .lc-step { margin-bottom: var(--space-3); }
.lc-q {
  display: block; padding: 0; margin: 0 0 var(--space-3);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl);
  line-height: 1.2; color: var(--teal); letter-spacing: -0.01em; text-wrap: balance;
}
.lc-q:focus { outline: none; }
.lc-q [data-group] { display: block; }
.lc-q [data-group][hidden] { display: none; }
.lc-q__only { display: block; margin-top: 0.35rem; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); }
.lc--js .lc-q__only { display: none; }
.lc-hint { margin: -0.75rem 0 var(--space-3); color: var(--ink-soft); }

.lc-opts { display: grid; gap: 0.6rem; }
.lc-opts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lc-opt {
  position: relative; display: flex; align-items: center; gap: 0.85rem;
  padding: 0.95rem 1.1rem; min-height: 3.5rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; line-height: 1.35;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.lc-opt:hover { border-color: var(--teal); }
.lc-opt input {
  flex: none; appearance: none; -webkit-appearance: none; margin: 0;
  width: 1.25rem; height: 1.25rem; border: 2px solid var(--line); border-radius: 50%;
  background: var(--white); display: grid; place-items: center; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.lc-opt input[type="checkbox"] { border-radius: 3px; }
.lc-opt input:checked { border-color: var(--teal); background: var(--teal); }
.lc-opt input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--white); }
.lc-opt input[type="checkbox"]:checked::after { content: ""; width: 0.35rem; height: 0.65rem; border: solid var(--paper); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.lc-opt input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lc-opt:has(input:checked) { border-color: var(--teal); background: var(--teal-tint); box-shadow: 0 0 0 1px var(--teal); }
.lc-step--error .lc-opts { outline: 2px solid #b3261e; outline-offset: 6px; border-radius: var(--radius); }
.lc-field textarea { min-height: 7rem; }
.lc-optional { font-weight: 400; color: var(--ink-soft); }

.lc-details .field-row { margin-bottom: 0; }
.lc-consent { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0 0 var(--space-2); cursor: pointer; }
.lc-consent input { width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0; accent-color: var(--teal); flex: none; }
.lc-small { font-size: var(--text-sm); color: var(--ink-soft); margin: 0 0 var(--space-3); }
.lc-submit { min-width: 14rem; }

.lc-errors { max-width: 46rem; }

/* progress + nav (only when the script is running) */
.lc-progress { margin-bottom: var(--space-4); }
.lc-progress__meta { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: 0.5rem; }
.lc-progress__meta span:last-child { font-family: var(--font-hand); font-size: 1.25rem; line-height: 1; color: var(--terracotta-deep); }
.lc-progress__bar { height: 6px; background: var(--sand); border-radius: 999px; overflow: hidden; }
.lc-progress__bar span { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 999px; transition: width .3s ease; }
.lc-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lc-nav .button[hidden] { display: inline-block !important; visibility: hidden; }
.lc-nav--details [data-lc-next] { display: none !important; }
.lc-nav .button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- results ---------- */
.lc-res-hero { padding-block: var(--space-5); }
.lc-res-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); gap: var(--space-5); align-items: center; }
.lc-res-hero__heading { font-size: var(--text-2xl); max-width: 11em; margin: 0; }
.lc-score {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.75rem; box-shadow: 0 24px 40px -32px rgba(13,76,89,.35); transform: rotate(-1deg);
  border-top: 5px solid var(--teal);
}
.lc-score--ok { border-top-color: #c9a44c; }
.lc-score--leak { border-top-color: var(--terracotta); }
.lc-score--bad { border-top-color: var(--terracotta-deep); }
.lc-score__n { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1; color: var(--teal); letter-spacing: -0.03em; margin: 0 0 0.3rem; }
.lc-score__n span { font-size: 0.5em; margin-left: 0.05em; }
.lc-score__band { font-weight: 700; color: var(--ink); margin: 0 0 0.35rem; font-size: var(--text-lg); }
.lc-score__text { color: var(--ink-soft); margin: 0; font-size: var(--text-sm); }

.lc-res { padding-top: var(--space-5); }
.lc-res__wrap { display: flex; flex-direction: column; gap: var(--space-5); }
.lc-res__wrap > * { width: 100%; }
.lc-leak p, .lc-muted { max-width: 46em; }
.lc-cost { padding: var(--space-4); background: var(--teal); color: var(--paper); border-radius: var(--radius); }
.lc-cost__label { font-family: var(--font-hand); font-size: 1.4rem; color: var(--terracotta); margin: 0 0 0.25rem; }
.lc-cost__n { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.75rem; color: var(--paper); }
.lc-cost__n span { font-size: 0.5em; font-weight: 500; color: rgba(248,245,240,.8); }
.lc-cost__detail { font-size: var(--text-lg); margin: 0 0 0.75rem; max-width: 36em; }
.lc-cost__detail strong { color: var(--terracotta); }
.lc-cost__note { font-size: var(--text-sm); color: rgba(248,245,240,.75); margin: 0; max-width: 40em; }

.lc-h { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.lc-muted { color: var(--ink-soft); max-width: 40em; }
.lc-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.lc-area { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 0.9rem; min-height: 7rem; padding: 1.1rem 1.15rem; background: var(--white); border: 1px solid var(--line); border-top: 4px solid #9fcbb0; border-radius: var(--radius); box-shadow: 0 20px 40px -34px rgba(13,76,89,.35); }
.lc-area--better { border-top-color: #e9c27f; }
.lc-area--leaking { border-top-color: var(--terracotta); }
.lc-area__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.2; color: var(--teal); }
.lc-working { margin-top: var(--space-4); }
.lc-working__label { margin: 0 0 0.75rem; }
.lc-strengths { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.lc-strengths li { position: relative; padding: 0.9rem 1rem 0.9rem 2.9rem; background: #eef5f0; border-radius: var(--radius); line-height: 1.45; }
.lc-strengths li::before { content: "\2713"; position: absolute; left: 1rem; top: 0.95rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #dcebe3; color: #1f5a3c; font-size: 0.75rem; font-weight: 700; display: grid; place-items: center; }
.lc-pill { font-size: var(--text-xs); font-weight: 700; padding: 0.35rem 0.65rem; border-radius: 999px; white-space: nowrap; }
.lc-pill--sorted { background: #dcebe3; color: #1f5a3c; }
.lc-pill--better { background: #f7e4c8; color: #7a4a0c; }
.lc-pill--leaking { background: var(--terracotta-tint); color: var(--terracotta-deep); }

.lc-leaks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.lc-leak { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem 1.75rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 40px -32px rgba(13,76,89,.35); }
.lc-leak__n { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--terracotta-tint); color: var(--terracotta-deep); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.lc-leak h3 { font-size: var(--text-lg); color: var(--teal); margin: 0.3rem 0 0.5rem; }
.lc-leak p { margin: 0 0 0.75rem; color: var(--ink); }
.lc-who { display: inline-block; font-size: var(--text-xs) !important; font-weight: 700; padding: 0.35rem 0.65rem; border-radius: 999px; margin: 0 !important; }
.lc-who--diy { background: var(--sand); color: var(--ink-soft) !important; }
.lc-who--me { background: var(--teal-tint); color: var(--teal) !important; }

.lc-dcards { margin-top: var(--space-3); }
.lc-next__body p { color: rgba(248,245,240,.88); max-width: 40em; margin: 0 0 0.75em; }
.lc-next__body p:last-child { margin-bottom: 0; }
.lc-tech { margin-top: calc(-1 * var(--space-3)); }

.lc-note { position: relative; padding: 1.5rem 1.75rem; background: var(--terracotta-tint); border-radius: var(--radius); max-width: 40em; transform: rotate(-0.5deg); }
.lc-note p { margin: 0 0 0.6rem; }
.lc-note q { font-style: italic; }
.lc-note__sign { font-size: 1.6rem; margin: 0; }
.lc-foot { font-size: var(--text-sm); color: var(--ink-soft); margin: 0; }

@media (max-width: 799px) {
  .lc-hero .page-intro__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .lc-hero .page-intro__aside { display: block; } /* the site hides intro asides on phones; this one explains the check */
  .lc-hero .page-intro__heading { font-size: var(--text-2xl); }
  .lc-res-hero__grid { grid-template-columns: 1fr; }
  .lc-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-area { min-height: 0; }
  .lc-strengths { grid-template-columns: 1fr; }
  .lc-score { transform: none; }
  .lc-opts--grid { grid-template-columns: 1fr; }
  .lc .field-row { grid-template-columns: 1fr; gap: 0; }
  .lc-next { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 599px) {
  .lc-leak { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.25rem; }
  .lc-dcards { grid-template-columns: 1fr; }
  .lc-submit { width: 100%; }
}

/* ---------- Kitchen Table Review booking (/review-booked) ---------- */
.rb-form { display: flex; flex-direction: column; gap: var(--space-5); }
.rb-days { border: 0; margin: 0; padding: 0; min-width: 0; }
.rb-days legend { padding: 0; }
.rb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; margin-top: var(--space-3); }
.rb-day { padding: 1rem 1.1rem 1.1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 40px -34px rgba(13,76,89,.35); }
.rb-day__label { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--teal); margin: 0 0 0.75rem; }
.rb-day__slots { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rb-slot { position: relative; cursor: pointer; }
.rb-slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rb-slot span { display: inline-block; padding: 0.5rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; font-variant-numeric: tabular-nums; background: var(--paper); transition: border-color .15s, background-color .15s, color .15s; }
.rb-slot:hover span { border-color: var(--teal); }
.rb-slot input:checked + span { background: var(--teal); border-color: var(--teal); color: var(--paper); }
.rb-slot input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.rb-details { max-width: 44rem; }
@media (max-width: 599px) {
  .rb-grid { grid-template-columns: 1fr 1fr; }
  .rb-details .field-row { grid-template-columns: 1fr; gap: 0; }
}
.rb-days legend.lc-h { font-family: var(--font-display); font-weight: 600; color: var(--teal); letter-spacing: -0.015em; }

/* ---------- Kitchen Table Review questionnaire ---------- */
.rq .rq-q { margin-bottom: var(--space-5); }
.rq .rq-label { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.rq .lc-hint { margin: -0.25rem 0 var(--space-2); }
.rq .lc-opt { min-height: 3rem; padding: 0.7rem 1rem; }
.rq .lc-field input { min-height: 3rem; }

/* Wording from the editor arrives as paragraphs */
.lc-cost__detail p { margin: 0 0 0.35rem; }
.lc-hint p, .lc-muted p { margin: 0; }
.lc-hint p + p, .lc-muted p + p { margin-top: 0.5rem; }

/* "What's working": one calm strip under the tiles, however many lines it has */
.lc-working { margin-top: var(--space-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.75rem; padding: 1rem 1.4rem; background: #eef5f0; border-left: 4px solid #9fcbb0; border-radius: var(--radius); }
.lc-working__label { margin: 0; font-size: 1.35rem; color: #1f5a3c; flex: none; }
.lc-strengths { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.lc-strengths li { background: none; padding: 0 0 0 1.7rem; border-radius: 0; line-height: 1.45; }
.lc-strengths li::before { left: 0; top: 0.1rem; background: #dcebe3; }
@media (max-width: 599px) {
  .lc-working { flex-direction: column; gap: 0.5rem; }
  .lc-strengths { flex-direction: column; }
}