/* The landlord.org design layer: what every product page shares.
 *
 * Values come from /brand/tokens.css (design/property-page/tokens.css, served
 * as-is) and the rules from design/brand-book.md. Load order on a page:
 * tokens.css, this file, then the page's own stylesheet.
 *
 * Sora is served from this origin (public/fonts, SIL Open Font License 1.1,
 * public/fonts/SORA-OFL.txt) rather than from Google Fonts, so no page sends
 * its visitors to a third party and every page's CSP keeps `font-src 'self'`.
 * Two subsets per weight; the browser fetches latin-ext only for a name or an
 * address that needs it.
 */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/sora-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/sora-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/sora-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/sora-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/sora-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/sora-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Base ---------------------------------------------------------------- */

:root { color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-100);
  color: var(--ink);
  font: 400 16px/24px var(--font-sans);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--ink); }
a:hover { color: #1f1f1f; }
:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 2px; }

/* --- Top bar: the wordmark on every page (brand book, Wordmark) ---------- */

/* Full width and white. On a laptop the wordmark lines up with the page's
   content edge: each page stylesheet sets --column to its .page max-width. */
:root { --column: 40rem; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 52px;
  padding: 14px max(var(--space-4), calc((100% - var(--column)) / 2 + var(--space-4)));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar-actions { display: flex; align-items: center; gap: var(--space-4); }
.topbar a { font: 400 14px/20px var(--font-sans); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { text-decoration: underline; }
/* The mark is placed, never typed (Oct 30 ruling). 20px tall, as drawn. */
.wordmark { display: block; line-height: 0; }
.wordmark img { display: block; height: 20px; width: auto; }
.count {
  background: var(--charcoal);
  color: var(--on-charcoal);
  border-radius: var(--radius-pill);
  font: 600 12px/16px var(--font-sans);
  padding: 1px 7px;
}

/* --- Buttons: primary mint, secondary outline, quiet text ---------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 10px 16px;
  font: 600 16px/24px var(--font-sans);
  color: var(--charcoal);
  background: var(--mint);
  border: 1px solid var(--mint);
  border-radius: var(--radius-md);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.button.secondary { background: var(--surface); border-color: var(--line-strong); }
.button.quiet { background: transparent; border-color: transparent; padding-inline: var(--space-2); }
/* The insurance track (Nick, Oct 30, 2026): the purple pair, charcoal text. */
.button.insurance { background: var(--purple-soft); border-color: var(--purple); }
.button.small { font-size: 14px; line-height: 20px; }
.button:hover { color: var(--charcoal); filter: brightness(0.97); }
.button[disabled] { opacity: 0.5; cursor: default; }

/* --- Cards and chips ------------------------------------------------------ */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
/* A state mark. Mint is what is verified and what is landlord.org's. */
.chip {
  display: inline-block;
  font: 400 12px/16px var(--font-sans);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-100);
  border: 1px solid var(--line);
  color: var(--ink);
  white-space: nowrap;
}
.chip.ok { background: var(--mint); border-color: var(--mint); }
.chip.warn { color: var(--warn); }

/* Codes, links and numbers that are read aloud or copied. */
.mono { font: 500 16px/24px var(--font-mono); letter-spacing: 0.04em; }
.code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  min-width: 0;
}
.code-box .mono { overflow-wrap: anywhere; }

/* --- Sheets (brand book, Layout): slide over the page ------------------- */

dialog.sheet {
  width: 100%;
  max-width: 40rem;
  max-height: 92vh;
  margin: auto auto 0;
  padding: 12px var(--space-4) var(--space-8);
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sheet);
}
dialog.sheet::backdrop { background: rgb(59 59 59 / 0.45); }
.sheet-body { display: flex; flex-direction: column; gap: 20px; }
.sheet-grip { width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--line); align-self: center; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.sheet-head h2 { margin: 0; font: 600 20px/26px var(--font-sans); }
.sheet-head p { margin: var(--space-1) 0 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
@media (min-width: 48rem) {
  dialog.sheet { margin: auto; border-radius: var(--radius-lg); }
}

/* An area a button opens in place -- the badge's QR code, for one. */
.reveal {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Text for screen readers only. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}