/* Sememe app — black & white, information architecture first (Danny, 8 Oct). */
:root { --ink:#111; --muted:#5f5f5f; --line:#dedede; --soft:#f5f5f5; --good:#1d6b3a; --warn:#7a5a00; --bad:#9b1c1c; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:#fff; font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color: var(--ink); }
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
.narrow { max-width: 640px; }
.devbar { background:#111; color:#fff; font-size:.85rem; text-align:center; padding:6px 12px; }
.devbar a { color:#fff; }
header.top { border-bottom:1px solid var(--line); }
.topbar { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; padding-block:14px; }
.brand { font-weight:700; text-decoration:none; margin-right:auto; }
.brand span { color:var(--muted); font-weight:400; }
.topbar nav { display:flex; flex-wrap:wrap; gap:4px 16px; }
.topbar nav a { color:var(--muted); text-decoration:none; font-size:.95rem; padding:2px 0; border-bottom:2px solid transparent; }
.topbar nav a:hover, .topbar nav a.on { color:var(--ink); border-bottom-color:var(--ink); }
main { padding-block: 28px 56px; min-height: 60vh; }
.foot { color:var(--muted); font-size:.85rem; padding-block:28px; border-top:1px solid var(--line); }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height:1.15; margin:.2em 0 .5em; }
h2 { font-size:1.15rem; margin:1.8em 0 .7em; }
h3 { font-size:1rem; margin:1.2em 0 .4em; }
p { margin:0 0 12px; }
.muted { color:var(--muted); }
.small { font-size:.88rem; }
.flash { padding:12px 14px; border:1px solid var(--line); margin-bottom:20px; }
.flash.ok { border-color: var(--good); }
.flash.error { border-color: var(--bad); color: var(--bad); }
.grid2 { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.grid3 { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card { border:1px solid var(--line); padding:18px; }
.card h3:first-child, .card h2:first-child { margin-top:0; }
.stat { border:1px solid var(--line); padding:14px 16px; }
.stat b { display:block; font-size:1.6rem; }
.stat span { color:var(--muted); font-size:.88rem; }
.btn, button.btn { display:inline-block; font:inherit; font-weight:600; background:var(--ink); color:#fff; border:1px solid var(--ink); padding:9px 16px; cursor:pointer; text-decoration:none; }
.btn.secondary, button.btn.secondary { background:#fff; color:var(--ink); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
button.link { background:none; border:0; padding:0; font:inherit; color:var(--muted); cursor:pointer; text-decoration:underline; }
form.inline { display:inline; }
.actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0; }
label { display:block; font-weight:600; margin:14px 0 6px; }
label .hint { font-weight:400; color:var(--muted); font-size:.88rem; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], select, textarea { width:100%; font:inherit; padding:9px 10px; border:1px solid #bdbdbd; background:#fff; }
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--ink); outline-offset:1px; }
.check { display:flex; gap:10px; align-items:flex-start; font-weight:400; }
.check input { margin-top:5px; }
.badge { display:inline-block; font-size:.78rem; font-weight:600; padding:2px 8px; border:1px solid currentColor; white-space:nowrap; }
.badge.good { color:var(--good); } .badge.warn { color:var(--warn); } .badge.bad { color:var(--bad); } .badge.neutral { color:var(--muted); }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.95rem; }
th, td { text-align:left; vertical-align:top; padding:10px 8px; border-top:1px solid var(--line); }
th { font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); border-top:0; }
dl.kv { display:grid; grid-template-columns: max-content 1fr; gap:6px 18px; margin:0; }
dl.kv dt { color:var(--muted); } dl.kv dd { margin:0; }
pre, .pre { white-space:pre-wrap; background:var(--soft); border:1px solid var(--line); padding:14px; font-size:.9rem; margin:0 0 12px; overflow-x:auto; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.88rem; background:var(--soft); padding:1px 5px; word-break: break-all; }
.next { margin-bottom: 8px; }
.next h2 { margin-top: 0; }
.next-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
.next-card { display:flex; flex-direction:column; gap:6px; border:1px solid var(--ink); padding:14px 16px; text-decoration:none; }
.next-card span { color:var(--muted); font-size:.92rem; }
.next-card em { font-style:normal; font-weight:600; margin-top:auto; }
.next-card:hover { background: var(--ink); color:#fff; } .next-card:hover span { color:#ddd; }
ul.feed { list-style:none; padding:0; margin:0; }
ul.feed li { padding:9px 0; border-top:1px solid var(--line); font-size:.95rem; }
ul.feed .when { color:var(--muted); font-size:.82rem; margin-right:6px; }
.match { border:1px solid var(--line); padding:18px; display:flex; flex-direction:column; gap:8px; }
.match h3 { margin:0; }
.match ul { margin:0; padding-left:1.1em; font-size:.92rem; }
.match .meta { color:var(--muted); font-size:.9rem; }
.chat { border:1px solid var(--line); max-height: 520px; overflow-y:auto; padding:14px; background:#fff; }
.msg { max-width: 82%; margin: 0 0 12px; padding:10px 12px; border:1px solid var(--line); white-space:pre-wrap; }
.msg.client { background:var(--soft); }
.msg.provider { margin-left:auto; border-color:var(--ink); }
.msg .who { display:block; font-size:.78rem; color:var(--muted); margin-bottom:4px; }
.steps { padding-left: 1.2em; } .steps li { margin-bottom: 6px; }
.timeline { list-style:none; padding:0; margin:0; font-size:.92rem; }
.timeline li { padding:7px 0; border-top:1px solid var(--line); display:flex; gap:12px; }
.timeline .t { color:var(--muted); white-space:nowrap; min-width: 128px; }
.split { display:grid; grid-template-columns: 2fr 1fr; gap: 28px; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.ok-text { color: var(--good); } .bad-text { color: var(--bad); }
img.content { max-width: 100%; border:1px solid var(--line); }

/* Sign in with Google / GitHub */
.social { display: grid; gap: 10px; margin: 18px 0 6px; }
.social .btn { display: block; text-align: center; width: 100%; box-sizing: border-box; }
.or { text-align: center; margin: 10px 0 4px; }