/* tools.css — shared styling for the api.gocheckmy.com data tools
   (Water Check, Environmental Neighbors, and the Home Context panel).
   Reuses the family visual system: Fraunces heads, 16-18px radii, 1.5px
   hairlines, the emerald gradient band from sell-rent, plus amber/clay
   tiers so a verdict's severity reads at a glance. */

.twrap { max-width: 1040px; margin: 0 auto; padding: 14px 22px 70px; }

/* ---------- input hero ---------- */
.t-hero { background: linear-gradient(120deg, #0B5C44, #0E7A57 60%, #16A578); color: #fff; border-radius: 18px; padding: 28px; }
.t-hero .eyebrow { font-size: 12px; color: var(--emerald-light); margin-bottom: 8px; letter-spacing: .04em; }
.t-hero h1 { font-family: var(--font-head); font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: 600; line-height: 1.16; letter-spacing: -0.02em; margin: 0; }
.t-hero h1 em { font-style: italic; color: var(--emerald-light); }
.t-hero p { color: var(--emerald-sub); font-size: 15px; margin-top: 10px; max-width: 60ch; line-height: 1.5; }
.t-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.t-input { flex: 1 1 260px; min-width: 0; font: inherit; font-size: 16px; padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.96); color: var(--ink); }
.t-input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.t-go { font: inherit; font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 12px; border: none; background: #fff; color: var(--emerald-deep); cursor: pointer; }
.t-go:hover { background: var(--emerald-tint); }
.t-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.t-go[disabled] { opacity: .6; cursor: default; }
.t-privacy { color: var(--emerald-sub); font-size: 12px; margin-top: 12px; }
.t-status { color: #F3E2CB; font-size: 14px; margin-top: 12px; min-height: 1.2em; }

/* ---------- result region ---------- */
.t-result { margin-top: 20px; }
.t-result[hidden] { display: none; }

/* verdict band, colored by tier */
.t-verdict { border-radius: 18px; padding: 26px; color: #fff; background: linear-gradient(120deg, #0B5C44, #0E7A57 60%, #16A578); }
.t-verdict.tier-warn { background: linear-gradient(120deg, #6B4309, #94631A 60%, #B5710E); }
.t-verdict.tier-alert { background: linear-gradient(120deg, #7A2A1B, #9A3A26 60%, #A9432C); }
.t-vhead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.t-score { font-family: var(--font-head); font-size: 3rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.t-score .of { font-size: 1rem; opacity: .7; font-weight: 400; }
.t-tier { display: inline-block; border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); }
.t-verdict h2 { font-family: var(--font-head); font-size: clamp(1.15rem, 3vw, 1.45rem); font-weight: 600; line-height: 1.22; margin: 14px 0 0; }
.t-summary { color: rgba(255,255,255,.92); font-size: 14.5px; margin-top: 8px; line-height: 1.5; }
.t-drivers { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.t-drivers li { font-size: 13.5px; color: rgba(255,255,255,.92); padding-left: 18px; position: relative; }
.t-drivers li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.7); }
.t-drivers li.up::before { background: #F0BCAC; }
.t-drivers li.down::before { background: var(--emerald-light); }

/* kpi row */
.kpis { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }
.kpi { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 12px 16px; min-width: 130px; }
.kpi .n { font-weight: 600; font-size: 1.2rem; color: #fff; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 11px; color: rgba(255,255,255,.8); margin-top: 2px; }
/* KPIs inside a light surface card need ink, not the band's white-on-translucent. */
.t-card .kpi { background: var(--paper); border-color: var(--line); }
.t-card .kpi .n { color: var(--ink); }
.t-card .kpi .l { color: var(--ink-faint); }

/* surface cards */
.t-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 20px; margin-top: 14px; }
.t-card > h3 { font-family: var(--font-head); font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.t-card .sub { font-size: 13px; color: var(--ink-faint); margin: 0 0 14px; }
.t-card p { line-height: 1.55; }

/* data table (violations / facilities) */
.vtable-wrap { overflow-x: auto; margin: 0 -4px; }
.vtable { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.vtable th { text-align: left; font-weight: 600; color: var(--ink-faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1.5px solid var(--line); }
.vtable td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.vtable tr:last-child td { border-bottom: none; }
.vtable td .contam { font-weight: 600; }
.st { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.st.ok { background: var(--emerald-tint); color: var(--emerald-tint-ink); }
.st.open { background: var(--amber-tint); color: var(--amber-tint-ink); }
.st.health { background: var(--clay-tint); color: var(--clay-tint-ink); }

/* plain-english health note per contaminant */
.healthnote { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.healthnote .hn { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.healthnote .hn b { color: var(--ink); }

/* private-well panel */
.well-panel { background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 26px; margin-top: 20px; border-left: 5px solid var(--emerald); }
.well-panel h2 { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.well-panel p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 10px; max-width: 62ch; }

/* offramp */
.offramp { margin-top: 14px; }
.off-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 20px; }
.off-card h3 { font-family: var(--font-head); font-size: 15px; font-weight: 600; margin: 0; color: var(--ink); }
.off-card p { font-size: 14px; color: var(--ink-soft); margin-top: 5px; line-height: 1.55; }
.off-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cta { display: inline-block; font: inherit; font-weight: 600; font-size: 14px; padding: 11px 18px; border-radius: 10px; text-decoration: none; background: var(--emerald); color: #fff; border: none; cursor: pointer; }
.cta:hover { background: var(--emerald-deep); }
.cta:focus-visible { outline: 2px solid var(--emerald-deep); outline-offset: 2px; }
.cta.ghost { background: transparent; color: var(--emerald-deep); border: 1.5px solid var(--line); }
.cta.ghost:hover { background: var(--paper); }
.off-note { font-size: 12px; color: var(--ink-faint); margin-top: 10px; }

/* cross-link to the sibling tool */
.xlink { margin-top: 14px; background: var(--emerald-tint); border: 1px solid #CDE7DA; border-radius: 14px; padding: 15px 18px; font-size: 14px; color: var(--emerald-tint-ink); line-height: 1.5; }
.xlink a { color: var(--emerald-deep); font-weight: 600; text-decoration: none; }
.xlink a:hover { text-decoration: underline; }

/* source + vintage + notes: caveats are trust signals, always shown */
.t-meta { margin-top: 16px; font-size: 12px; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.t-meta .src { font-weight: 600; color: var(--ink-soft); }
.t-notes { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.t-notes li { font-size: 12px; color: var(--ink-faint); line-height: 1.55; padding-left: 16px; position: relative; }
.t-notes li::before { content: "·"; position: absolute; left: 4px; top: -1px; font-weight: 700; }

/* degraded / error state — never a hung spinner */
.t-degraded { background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 22px; margin-top: 20px; }
.t-degraded h3 { font-family: var(--font-head); font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.t-degraded p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* enriching placeholder (ACS fields not ready) */
.enriching { color: var(--ink-faint); font-style: italic; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.enriching::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); opacity: .5; animation: enrich-pulse 1.4s ease-in-out infinite; }
@keyframes enrich-pulse { 0%,100% { opacity: .25; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .enriching::before { animation: none; } }

/* loading */
.t-loading { margin-top: 20px; color: var(--ink-soft); font-size: 14px; display: flex; align-items: center; gap: 10px; }
.t-spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--emerald); border-radius: 50%; animation: t-rot .8s linear infinite; }
@keyframes t-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .t-spin { animation: none; } }

/* ---------- Home Context panel (mounted on the report dashboard) ---------- */
.hc-section { margin-top: 22px; }
.hc-head h2 { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 0; }
.hc-head p { font-size: 13px; color: var(--ink-faint); margin: 3px 0 0; }
.hc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 12px; align-items: start; }
.hc-grid .t-card { margin-top: 0; }
.hc-rents { display: flex; gap: 10px; }
.hc-rents .hc-r { flex: 1; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; }
.hc-rents .hc-r .l { display: block; font-size: 11px; color: var(--ink-faint); }
.hc-rents .hc-r .v { display: block; font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.hc-acs-wrap { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.hc-acs { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; }
.hc-acs .l { color: var(--ink-soft); }
.hc-acs .v { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .twrap { padding: 10px 15px 60px; }
  .t-hero { padding: 22px; }
  .t-score { font-size: 2.4rem; }
}