/* Flavors: map each brand's tokens onto shared roles. Components read only the roles. */
[data-flavor="re"] {
  --paper: var(--re-paper); --surface: var(--re-surface); --surface-2: var(--re-surface-2);
  --ink: var(--re-ink); --ink-soft: var(--re-ink-soft); --ink-faint: var(--re-ink-faint);
  --rule: var(--re-rule); --accent: var(--re-accent); --accent-ink: var(--re-accent-ink);
  --on-accent: var(--re-on-accent);
  --btn-fill: var(--re-accent); --btn-text: var(--re-on-accent);
  --face: var(--font-public, "Public Sans", "Helvetica Neue", Arial, sans-serif);
}
[data-flavor] { background: var(--paper); color: var(--ink); font-family: var(--face); }
[data-flavor] a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
[data-flavor] a:hover { color: var(--accent-ink); }
[data-flavor] :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.re-figure { font-variant-numeric: tabular-nums lining-nums; }

/* Button: shared by both flavors */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--space-3, 12px) var(--space-6, 24px);
  border-radius: var(--radius-sm, 3px); border: 1px solid transparent;
  font-family: var(--face); font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--btn-fill); color: var(--btn-text); }
.btn-primary:hover { background: var(--accent-ink); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink-faint); }
.btn-secondary:hover { border-color: var(--ink); }
[data-flavor] a.btn-primary, [data-flavor] a.btn-primary:hover { color: var(--btn-text); }
[data-flavor] a.btn-secondary { color: var(--ink); }

/* TitleBlock: the real estate compliance block, drawn like a survey title block */
.titleblock {
  border: 1.5px solid var(--ink); border-radius: var(--radius-0, 0);
  background: var(--surface); max-width: 640px;
}
.tb-head {
  display: flex; align-items: center; gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--surface-2); border-bottom: 1px solid var(--ink);
}
.tb-grid { display: grid; grid-template-columns: 1fr 1fr; }
.tb-grid > div { padding: var(--space-3, 12px) var(--space-4, 16px); border-top: 1px solid var(--ink); }
.tb-grid > div:nth-child(-n+2) { border-top: 0; }
.tb-grid > div:nth-child(odd) { border-right: 1px solid var(--ink); }
.titleblock .lab { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-faint); margin-bottom: var(--space-1, 4px); }
.titleblock .val { display: block; font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.titleblock .num { font-variant-numeric: tabular-nums lining-nums; }
.titleblock .mark { width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm, 3px); }
.titleblock .area { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 520px) {
  .tb-grid { grid-template-columns: 1fr; }
  .tb-grid > div:nth-child(odd) { border-right: 0; }
  .tb-grid > div:nth-child(2) { border-top: 1px solid var(--ink); }
}