/* Friendly and neutral: warm paper background, teal accent, a touch of amber. */
:root { --bg:#f6f5f1; --card:#fff; --ink:#1f2933; --muted:#66707a; --accent:#0f766e; --accent-ink:#fff; --line:#e3e1da; --warm:#f59e0b; }
@media (prefers-color-scheme: dark) { :root { --bg:#14181b; --card:#1c2125; --ink:#e8ecef; --muted:#9aa5ae; --accent:#2dd4bf; --accent-ink:#06201d; --line:#2c3338; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--ink); min-height:100vh; display:flex; flex-direction:column; }
body > main { flex:1; width:100%; }
a { color:var(--accent); }
.top { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid var(--line); background:var(--card); }
.brand { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; letter-spacing:-.01em; text-decoration:none; color:var(--ink); }
/* Signed-out landing: just the mark, the name and one button. */
body.bare > main { display:flex; align-items:center; justify-content:center; }
.landing { text-align:center; padding:2rem 1rem; }
.landing-mark { display:block; margin:0 auto 1rem; }
.landing h1 { font-size:2rem; letter-spacing:-.02em; margin:0 0 1.5rem; }
.button.wide { min-width:12rem; padding:.8rem 1.5rem; font-weight:600; }
nav { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
nav a { text-decoration:none; }
main { max-width:44rem; margin:0 auto; padding:1rem; }
footer { text-align:center; padding:2rem 1rem; color:var(--muted); font-size:.875rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.25rem; margin-bottom:1rem; }
h1 { font-size:1.4rem; margin:0 0 .5rem; } h2 { font-size:1.1rem; margin:0 0 .5rem; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.flash { background:#e8f6ee; color:#1f5e3a; padding:.6rem .9rem; border-radius:10px; }
@media (prefers-color-scheme: dark) { .flash { background:#1e3a2a; color:#bfe8cf; } }
.error { color:#b3261e; }
button, .button { font:inherit; border:0; border-radius:10px; padding:.6rem 1rem; background:var(--accent); color:var(--accent-ink); cursor:pointer; text-decoration:none; display:inline-block; }
button.secondary, .button.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
button.small, .button.small { padding:.35rem .7rem; font-size:.875rem; }
button.link { background:none; color:var(--accent); padding:0; text-decoration:underline; }
form.inline { display:inline; }
input:not([type=checkbox]) { font:inherit; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); width:100%; }
label { display:block; margin:.5rem 0; }
.consent { display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; background:var(--bg); padding:.75rem; border-radius:10px; }
.consent input { margin-top:.25rem; width:1.2rem; height:1.2rem; flex:none; }
.row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.row.grow { flex:1; } .row.grow input { flex:1; min-width:8rem; width:auto; }
.stack > * { margin-bottom:.5rem; }
table { width:100%; border-collapse:collapse; margin-bottom:1rem; }
th, td { padding:.5rem .25rem; border-bottom:1px solid var(--line); text-align:center; }
th:first-child, td:first-child { text-align:left; }
.avail input[type=checkbox] { width:1.5rem; height:1.5rem; accent-color:var(--accent); }
tr.locked { opacity:.6; }
.couple { border-top:1px solid var(--line); padding:.75rem 0; } .couple.inactive { opacity:.5; }
.person { display:flex; flex-wrap:wrap; gap:.4rem .75rem; align-items:center; justify-content:space-between; padding:.5rem 0 .25rem .75rem; }
.person .who { flex:1; min-width:12rem; } .badges { display:flex; gap:.3rem; margin-top:.2rem; }
.row.between { justify-content:space-between; } h3 { font-size:1rem; margin:0; }
details.edit summary { cursor:pointer; color:var(--accent); font-size:.85rem; }
details.edit[open] { flex-basis:100%; } details.edit form { margin-top:.4rem; } details.edit input { flex:1; min-width:8rem; width:auto; }
details.edit.full { flex-basis:100%; }
.badge { font-size:.75rem; padding:.15rem .5rem; border-radius:999px; background:var(--bg); border:1px solid var(--line); white-space:nowrap; }
.badge.verified, .badge.consented { border-color:#2e7d4f; color:#2e7d4f; } .badge.opted_out { border-color:#b3261e; color:#b3261e; }
.message { border-top:1px solid var(--line); padding:.75rem 0; } .message .body { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--bg); padding:.6rem; border-radius:8px; }
ul.matches { padding-left:1.1rem; } ul.matches li { margin-bottom:.5rem; } ul.plain { list-style:none; padding:0; }
.prose p, .prose li { max-width:38rem; }