/* The renter door (docs/check.md). Builds on styles.css; everything here is
   the result card and the states around it. The card is the thing people
   screenshot, so it is self-contained: wordmark, address, facts, prompt,
   source -- nothing it needs sits outside its border. */

:root { --column: 38rem; }
.check-page { max-width: var(--column); }
.lede .scope { display: block; margin-top: 0.35rem; font-size: 0.9rem; }

.check-form .field { margin-top: 0; }
.check-form .field + .field { margin-top: 0.9rem; }
.check-form .field-hint { display: block; margin: -0.15rem 0 0.4rem; font-size: 0.85rem; color: var(--muted); }
.check-form .optional { font-weight: 400; color: var(--muted); }
.check-form button { margin-top: 1rem; }

/* --- The card ----------------------------------------------------------- */

.result { margin-top: 1.5rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.35rem 1.1rem;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

/* The wordmark: the screenshot is the marketing department (§3.1). */
.wordmark {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--accent);
  white-space: nowrap;
}
/* The mark is placed, never typed (design/brand-book.md, Wordmark). */
.wordmark img { display: block; height: 20px; width: auto; }
.wordmark small { display: block; margin-top: 0.25rem; font-weight: 500; font-size: 0.72rem; line-height: 16px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

.card-kicker { margin: 0; font-size: 0.8rem; color: var(--muted); text-align: right; }

.card h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.15rem, 4vw, 1.4rem);
  line-height: 1.25;
  word-break: break-word;
}

.fact { padding: 0.75rem 0; border-top: 1px solid var(--line); }
.fact-label { display: block; margin: 0 0 0.3rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Owner of record, verbatim (K2). Monospace-ish sizing keeps a county string
   like `LANGE NICOLAS C` reading as a record, not as our sentence. */
.owner { margin: 0; font-size: 1.15rem; font-weight: 700; word-break: break-word; }
.owner + .owner { margin-top: 0.4rem; }
.owner .kind {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: middle;
  background: var(--bg);
  color: var(--muted);
}

/* One level of Sunbiz, under the owner it belongs to. */
.entity { margin: 0.5rem 0 0 0; padding: 0.7rem 0.85rem; background: var(--bg); border-radius: 8px; font-size: 0.92rem; }
.entity p { margin: 0; }
.entity p + p { margin-top: 0.3rem; }
.entity .status {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.entity .status.is-active { background: #ecfdf3; color: var(--ok); }
.entity .status.is-inactive { background: #fdecec; color: var(--danger); }
.entity .note { color: var(--danger); font-weight: 600; }
.entity .registry { color: var(--muted); }
.entity .officers { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.entity .officers li { margin: 0.1rem 0; }

/* The binary (B1). */
/* Verified is the badge's own mark: the line on a mint plate, charcoal on
   mint. Not verified is the plain sentence, an absence stated as an absence.
   No dot before either (design/brand-book.md, "No dot beside a word"). */
.verification { margin: 0; font-weight: 600; }
.verification.is-verified > :is(a, span) {
  display: inline-block; padding: 0.3rem 0.7rem; border-radius: var(--radius-sm, 6px);
  background: var(--mint); color: var(--charcoal); text-decoration: none;
}
.verification.is-verified > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.verification .quiet { font-weight: 400; color: var(--muted); font-size: 0.88rem; }

/* The compare prompt: "this sentence is the product" (§3.1). */
.compare {
  margin: 1rem 0 0;
  padding: 0.95rem 1rem;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  font-size: 1.02rem;
  font-weight: 600;
}
.compare p { margin: 0; }

.source { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--muted); }
.source a { color: inherit; }

/* K16: the address came from a listing's link. */
.listing-note { margin: -0.4rem 0 0.6rem; font-size: 0.85rem; color: var(--muted); }

/* K17: the name the renter was given, against the record. About two names,
   never a person: a match is quietly confirmed, anything else is a prompt
   to ask, in the compare prompt's own colors rather than an alarm. */
.name-check p { margin: 0; font-weight: 600; }
.name-check p.quiet { margin-top: 0.35rem; font-weight: 400; font-size: 0.88rem; color: var(--muted); }
.name-check.is-match p:first-of-type,
.name-check.is-officer p:first-of-type { color: var(--ok); }
.name-check:not(.is-match):not(.is-officer) { padding: 0.75rem 0.9rem; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 6px; }

/* K15: the result, sent on. */
.share-result { padding: 0.75rem 1.1rem; }

/* The relay (§5). Outside the card so the screenshot does not carry a button. */
.relay { margin-top: 1rem; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.relay p { margin: 0 0 0.6rem; font-weight: 600; }
.relay .relay-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.relay button, .relay a.button {
  width: auto;
  flex: 1 1 10rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
}
.relay a.button { display: inline-block; background: var(--bg); color: var(--ink); border: 1px solid var(--line); font-weight: 600; }
.relay .relay-status { margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--ok); min-height: 1.1rem; font-weight: 400; }
/* docs/confirm.md §9.6: the linked version, second and quieter. */
.relay p.relay-linked { margin: 0.4rem 0 0; font-weight: 400; font-size: 0.9rem; }
/* docs/confirm.md §10.3: under the owner of record. */
.who-owns { margin-top: 0.35rem; }

/* --- The other states --------------------------------------------------- */

.notice { margin: 0; padding: 1.1rem 1.25rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.notice h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.notice p { margin: 0 0 0.6rem; }
.notice p:last-child { margin-bottom: 0; }
.notice.is-error { border-color: var(--danger); }

.interest { margin-top: 1rem; }
.interest form { padding: 1rem 1.1rem; }
.interest .field { margin-top: 0; }
.interest .consent-line { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--muted); }
.interest button { margin-top: 0.75rem; }

.how { margin-top: 2rem; color: var(--muted); font-size: 0.92rem; }
.how h2 { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--ink); }
.how p { margin: 0; }

@media (max-width: 30rem) {
  .card-head { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .card-kicker { text-align: left; }
}

/* "Which one?" — one button per county address, in the county's spelling. */
.choices { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.choice {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}
.choice:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.choice-note { font-weight: 400; color: var(--muted); }
.unit-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; padding: 0; border: 0; background: none; }
.unit-form input { flex: 1 1 8rem; padding: 0.7rem 0.75rem; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; text-transform: uppercase; }
.unit-form button { width: auto; flex: 0 0 auto; padding: 0.7rem 1rem; }

/* --- The public property page (docs/check.md §3.2) ---------------------- */

.card h1 { margin: 0 0 1rem; font-size: clamp(1.15rem, 4vw, 1.4rem); line-height: 1.25; word-break: break-word; }
.profile-stub { margin: 0.4rem 0 0; }
.means { margin: 0.6rem 0 0; padding: 0.75rem 0.9rem; background: var(--bg); border-radius: 8px; font-size: 0.9rem; color: var(--muted); }
.claim .claim-button {
  display: block;
  margin: 0.75rem 0 0.4rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.quiet { color: var(--muted); font-size: 0.9rem; margin: 0; }
.removal { margin-top: 1.5rem; font-size: 0.82rem; }
.how a { color: var(--accent); }

/* --- The listing page (docs/listings.md §4.3) --------------------------- */
.listing { padding: 0.75rem 0; border-top: 1px solid var(--line); }
.listing .rent { margin: 0.2rem 0; font-size: 1.15rem; }
.listing-meta { margin: 0; color: var(--muted); }
.listing-text { margin: 0.5rem 0 0; white-space: pre-wrap; }
.money { margin: 1rem 0 0; padding: 0.8rem 0.9rem; background: var(--bg); border-radius: 8px; font-size: 0.92rem; }
/* Apply, under each listing, with the fee stated before the tap (§4.3 step 5, L2). */
.apply-row { margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.apply-row .button { width: 100%; }
.apply-fee { margin: 0; font-size: 0.88rem; color: var(--muted); }

/* Who renters hear from (the property page; docs/property-page.md §1.3): the people
   the verified owner named, under the owner's own line. Name, role and "by
   phone" / "by email" only -- never a digit (§1.3a). */
.hear-from { margin: 0.6rem 0 0; padding: 0.6rem 0.9rem; border-left: 3px solid var(--mint); background: var(--surface); }
.hear-from-label { margin: 0; font-weight: 600; font-size: 0.9rem; }
.hear-from .plain-list { margin: 0.2rem 0 0; padding: 0; list-style: none; }
.hear-from .plain-list li { margin: 0.15rem 0 0; }

/* The number check (docs/property-page.md §1.3a): a form with no script, so
   the answer comes back with the page, in place. Inside the card, because
   the answer is about this property and nothing else. */
.number-check { margin: 1rem 0 0; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.number-check-head { margin: 0; }
.number-check .field { margin-top: 0.7rem; }
/* Stacked: the field gets the whole width a phone number needs, and the
   button is the full-width primary every page uses. */
.number-check-row { display: block; }
.number-check-row button { margin-top: 0.6rem; }
.number-check-note { margin: 0.45rem 0 0; font-size: 0.85rem; color: var(--muted); }
.check-result { margin: 0.8rem 0 0; padding: 0.7rem 0.85rem; border-left: 4px solid var(--line-strong); background: var(--surface); border-radius: 6px; }
.check-result strong { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.check-result.is-contact, .check-result.is-owner { border-left-color: var(--ok); }
.check-result.is-not_listed { border-left-color: var(--danger); font-weight: 600; }
.check-result.is-invalid { border-left-color: var(--warn); }

/* The dispute door (docs/check.md §18): a letter's code, then one question
   with two answers. The "not me" answer sits in its own box with its fields,
   because it is the one that takes a page offline. */
.dispute-answer { margin-top: 1rem; }
.dispute-not-me { margin-top: 1.25rem; }
.dispute-not-me h2 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.dispute-not-me p { margin: 0 0 0.4rem; }
.dispute-page textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font: 400 16px/24px var(--font-sans);
  background: var(--surface);
  color: var(--ink);
}
.dispute-page .field-hint { display: block; margin-bottom: 0.35rem; font-size: 0.88rem; }
.dispute-page .button-danger { margin-top: 1rem; background: var(--card); border-color: var(--danger); color: var(--danger); }

/* Report a problem (docs/check.md §19): a link under the card, and a form
   with one question. */
.report-link { margin: 0.4rem 0 0; font-size: 0.92rem; }
.report-form { margin-top: 1rem; }
.report-form fieldset { border: 0; padding: 0; margin: 0; }
.report-form .choice { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.55rem 0 0; line-height: 1.4; }
.report-form .choice input { width: auto; min-width: 0; height: auto; margin: 0.2rem 0 0; padding: 0; border: 0; flex: 0 0 auto; background: none; }
.report-form .choice span { flex: 1 1 auto; }
.report-page textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font: 400 16px/24px var(--font-sans);
  background: var(--surface);
  color: var(--ink);
}
.report-page .field-hint { display: block; margin-bottom: 0.35rem; font-size: 0.88rem; }
.report-form button { margin-top: 1rem; }

/* References the owner chose to show (docs/references.md §5.2; frame
   renter-view-references): the counts, then each shown reference with its
   tier mark, its tenancy mark and its one line. Never a name. The heavier
   mark (mint) is the document tier; the owner's tier is an outline. */
.references { padding: 0.75rem 0; border-top: 1px solid var(--line); }
.reference-counts { margin: 0.2rem 0 0; font-size: 0.92rem; }
.reference-list { margin: 0.4rem 0 0; padding: 0; list-style: none; }
.reference { padding: 0.65rem 0 0; margin: 0.65rem 0 0; border-top: 1px solid var(--line); }
.reference-marks { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.reference-marks .mark { font-size: 0.78rem; line-height: 1.3; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-strong); }
.reference-marks .mark.is-document { background: var(--mint); border-color: var(--mint); }
.reference-marks .mark.is-landlord_org { background: var(--mint-soft); border-color: var(--mint-soft); }
.reference-marks .mark.is-current { background: var(--purple-soft); border-color: var(--purple-soft); }
.reference-line { margin: 0.4rem 0 0; font-size: 1rem; overflow-wrap: anywhere; }
.reference-note { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--muted); }