/* Mud — mobile-first, dark, matches the intel localhost UI palette. */
:root {
  --bg:#0f1115; --card:#181b22; --line:#262b34; --fg:#e6e9ef; --dim:#9aa4b2;
  --accent:#2b7bba; --warm:#2ca02c; --strained:#d1495b; --amber:#c9a227;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

header { position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--line);
  padding:12px 14px; display:flex; align-items:center; gap:12px; z-index:10; }
header h1 { font-size:17px; margin:0; letter-spacing:.02em; }
header .sp { flex:1; }
header .who { font-size:12px; color:var(--dim); }

/* Bottom nav — thumb-reachable on phones. */
nav.tabs { position:fixed; bottom:0; left:0; right:0; display:flex;
  background:var(--card); border-top:1px solid var(--line); z-index:10; }
nav.tabs a { flex:1; text-align:center; padding:11px 4px 14px; color:var(--dim);
  font-size:12px; }
nav.tabs a.active { color:var(--fg); }

.wrap { max-width:720px; margin:0 auto; padding:14px 14px 84px; }

.card { background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; margin:12px 0; }
.card .why { color:var(--amber); font-size:13px; font-weight:600; }
.card .who { font-weight:600; font-size:19px; }
.card .action { margin:6px 0; }
.card .touch { color:var(--dim); font-size:13px; }
.card .btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

h2 { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim);
  margin:22px 0 8px; }
h3 { margin:0 0 6px; font-size:16px; }
.meta { color:var(--dim); font-size:13px; }
.pill { background:#20242c; border:1px solid var(--line); border-radius:999px;
  padding:3px 10px; font-size:12px; color:var(--dim); display:inline-block; margin:2px; }
.pill.confirmed { border-color:var(--warm); color:#8fe08f; }
.narrative { font-size:15px; }
details { margin:10px 0; }
details summary { cursor:pointer; color:var(--dim); font-size:13px;
  text-transform:uppercase; letter-spacing:.05em; }

input, textarea, select, button { font:inherit; }
input[type=search], input[type=text], input[type=date], textarea, select {
  width:100%; background:#20242c; color:var(--fg); border:1px solid var(--line);
  border-radius:9px; padding:10px 12px; font-size:16px; }
textarea { min-height:64px; resize:vertical; }
label { display:block; font-size:13px; color:var(--dim); margin:8px 0 3px; }
form.stack { margin:8px 0; }
form.row { display:flex; gap:8px; align-items:end; }
button { background:#20242c; color:var(--fg); border:1px solid var(--line); border-radius:9px;
  padding:9px 14px; font-size:14px; cursor:pointer; }
button:hover { border-color:var(--accent); }
button.primary { border-color:var(--accent); color:#bcd8ef; }
button.done { border-color:var(--warm); }
button.dismiss { border-color:var(--strained); color:#e79aa6; }
.inline { display:inline; margin:0; }

.result { border-bottom:1px solid var(--line); padding:12px 2px; }
.result .who { font-weight:600; font-size:17px; }
.empty { text-align:center; color:var(--dim); padding:48px 0; }
.codes { background:#20242c; border:1px solid var(--amber); border-radius:9px;
  padding:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; }
.err { color:var(--strained); font-size:14px; margin:8px 0; min-height:1em; }
.ident { font-size:13px; color:var(--dim); }

/* People home */
.hero-search input { width:100%; font-size:1.15em; padding:12px 14px; border-radius:10px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin-top:14px; }
a.card.person, a.card.log-entry { display:block; text-decoration:none; color:inherit; }
a.card.person:hover, a.card.log-entry:hover { border-color:#888; }
.person .who { font-weight:600; margin-bottom:4px; }
.person .touch { margin-top:6px; font-size:.85em; opacity:.7; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.actions .btn { padding:6px 10px; border:1px solid #ccc; border-radius:8px; text-decoration:none; color:inherit; font-size:.9em; }
.crumbs { font-size:.9em; margin:0 0 6px; }
.crumbs a { color:inherit; opacity:.75; text-decoration:none; }
.crumbs a:hover { opacity:1; text-decoration:underline; }