/* HousingAI brand for the recert app. Mirrors gethousingai.com: Inter, Tailwind blue-600 primary,
   gray-900 text, gray-50 to blue-50 backgrounds, white rounded cards with soft shadows. Light only. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
  --bg: #f9fafb; --bg-grad: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%);
  --panel: #ffffff; --ink: #111827; --muted: #6b7280; --muted-2: #9ca3af; --line: #e5e7eb; --line-2: #f3f4f6;
  --accent: #2563eb; --accent-hover: #1d4ed8; --accent-ink: #ffffff; --accent-soft: #eff6ff; --brand-blue: #2D69EC;
  --ok: #16a34a; --ok-bg: #ecfdf5; --warn: #b45309; --warn-bg: #fffbeb; --bad: #dc2626; --bad-bg: #fef2f2;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 16px; --radius-sm: 10px; --shadow: 0 10px 30px rgba(17, 24, 39, .06), 0 1px 2px rgba(17, 24, 39, .06);
}
html { color-scheme: light; }
body { margin: 0; background: var(--bg-grad); background-attachment: fixed; color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
.brand { display: inline-flex; align-items: baseline; gap: .175em; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand img { height: 1.4em; width: 1.4em; margin-top: -.35em; transform: translateY(25%); }
.brand .tag { font-weight: 500; color: var(--muted); margin-left: .5em; font-size: .8em; }
.card, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
button, .btn { font: inherit; color: var(--ink); border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer; font-weight: 500; transition: background .15s, border-color .15s; }
button:hover, .btn:hover { background: var(--line-2); }
button.primary, .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.primary:hover, .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.ok { background: var(--ok); color: #fff; border-color: var(--ok); font-weight: 600; }
button.danger { color: var(--bad); }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { font: inherit; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
a { color: var(--accent); }
.muted { color: var(--muted); } .small { font-size: 12px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.b-confident { background: var(--ok-bg); color: var(--ok); } .b-ambiguous { background: var(--warn-bg); color: var(--warn); } .b-insufficient { background: var(--bad-bg); color: var(--bad); } .b-neutral { background: var(--line-2); color: var(--muted); }
.msg { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-top: 12px; display: none; } .msg.bad { background: var(--bad-bg); color: var(--bad); display: block; } .msg.ok { background: var(--ok-bg); color: var(--ok); display: block; }
footer.legal { text-align: center; color: var(--muted); font-size: 12px; padding: 18px; } footer.legal a { color: var(--muted); margin: 0 6px; text-decoration: none; } footer.legal a:hover { color: var(--accent); }