/* Colours come from app/palette.js; the contrast test checks every pair. */
body {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #F4F3EF;
  color: #16181D;
  margin: 0;
  padding: 1rem;
  line-height: 1.45;
}
[data-page] { max-width: 32rem; margin: 2rem auto; }
[data-page="home"], [data-page="owner"] { max-width: 64rem; margin: 0 auto; }
h1, h2, h3, .big, .value, .brand { font-family: 'Space Grotesk', Inter, system-ui, sans-serif; }
h1 { font-size: 1.75rem; margin: 1rem 0 0.5rem; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
a { color: #2347A6; }
input, button { font: inherit; padding: 0.5rem 0.9rem; margin: 0.25rem 0; }
button {
  background: #FFFFFF;
  color: #16181D;
  border: 1px solid #767A84;
  border-radius: 8px;
  min-height: 2.75rem;
  cursor: pointer;
}
button.primary { background: #2347A6; color: #FFFFFF; border-color: #2347A6; }
button:focus-visible, a:focus-visible { outline: 3px solid #2347A6; outline-offset: 2px; }
[hidden] { display: none; }

.top { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; padding-bottom: 0.75rem; border-bottom: 1px solid #767A84; }
.brand { font-weight: 700; margin: 0; }
.biz { margin: 0; color: #565A64; flex: 1; }
.topnav { display: flex; gap: 0.5rem; }
.topnav button[aria-current="page"], .tabbar button[aria-current="page"] { background: #E4EAF8; color: #2347A6; border-color: #2347A6; font-weight: 700; }
.tabbar { display: none; }
.lede { color: #565A64; margin: 0 0 0.5rem; }
#result { min-height: 1.5rem; color: #A4500A; font-weight: 600; }

.card { background: #FFFFFF; border: 1px solid #767A84; border-radius: 12px; padding: 1rem; margin: 0.5rem 0; }
.big { font-size: 1.5rem; font-weight: 700; margin: 0.25rem 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.stat { background: #FFFFFF; border: 1px solid #767A84; border-radius: 12px; padding: 0.75rem; }
.stat p { margin: 0; }
.label { color: #565A64; font-size: 0.9rem; }
.value { font-size: 1.35rem; font-weight: 700; }
.note { color: #565A64; font-size: 0.8rem; display: block; }
.empty { color: #565A64; }
.badge { display: inline-block; background: #FBEBDD; color: #A4500A; border-radius: 999px; padding: 0.15rem 0.7rem; font-weight: 600; font-size: 0.9rem; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 0; }
ul.plain { list-style: none; padding: 0; margin: 0; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.75rem; margin: 0.5rem 0; }
dt { color: #565A64; }
dd { margin: 0; overflow-wrap: anywhere; }
progress { width: 100%; height: 0.9rem; accent-color: #2347A6; }

.switcher { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.switcher button.selected { background: #E4EAF8; color: #2347A6; border-color: #2347A6; font-weight: 700; }
form.edit, form.invite { display: grid; gap: 0.5rem; margin: 0.5rem 0; }
form.edit label, form.invite label { display: grid; gap: 0.2rem; }
input, textarea { font: inherit; padding: 0.5rem 0.9rem; max-width: 100%; box-sizing: border-box; }
textarea { width: 100%; }
.badge.ok { background: #E4EAF8; color: #2347A6; }
.person { margin: 0.25rem 0; overflow-wrap: anywhere; }
#owner-result { font-weight: 600; color: #A4500A; min-height: 1.5rem; }
h3 { overflow-wrap: anywhere; }

/* Phone layout (the Phone board): one column, two-up numbers, tab bar at the bottom. */
@media (max-width: 640px) {
  body { padding: 0.75rem 0.75rem 5rem; }
  .topnav { display: none; }
  .biz { flex-basis: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value { font-size: 1.15rem; overflow-wrap: anywhere; }
  dl { grid-template-columns: 1fr; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: #FFFFFF; border-top: 1px solid #767A84; padding: 0.5rem; gap: 0.5rem; }
  .tabbar button { flex: 1; margin: 0; }
  .actions button { flex: 1; }
  form.invite input, form.edit input { width: 100%; }
}