/* Ellarum web hop surface — design grammar carried over from the POC; palette
   re-based to warm clay (owner decision 2026-08-08: green/gold belongs to Golf
   Playbook). Keep hexes in lockstep with ios/Ellarum/Theme.swift. */
:root {
  --bg1:#f7f2ea; --bg2:#f2ebe0; --card:#ffffff; --ink:#26201a; --muted:#7e7263;
  --line:#e8dfd0; --accent:#b0552f; --accent2:#96421f; --accent-ink:#fbf6ee;
  --soft:#f4e3d7; --warn:#a62a21; --shadow:0 6px 18px rgba(70,50,40,.08);
}
@media (prefers-color-scheme: dark) {
  :root { --bg1:#191512; --bg2:#151210; --card:#241f1a; --ink:#efe8dc; --muted:#a79a88;
    --line:#3b342a; --accent:#d98a66; --accent2:#e39c7b; --accent-ink:#251309;
    --soft:#33261d; --warn:#ff6b60; --shadow:0 6px 18px rgba(0,0,0,.4); }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  margin:0; color:var(--ink);
  background:linear-gradient(160deg,var(--bg1),var(--bg2)) fixed;
  font:18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display:flex; flex-direction:column; align-items:center;
}
header.brand {
  width:100%; max-width:520px; text-align:center; padding:14px 14px 6px;
  font-family:"Iowan Old Style","Palatino",Georgia,serif;
  font-size:21px; letter-spacing:.5px; color:var(--muted);
}
header.brand a { color:inherit; text-decoration:none; }
header.brand b { color:var(--ink); font-weight:650; }
header.brand .tagline {
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:14px; color:var(--muted); letter-spacing:.2px; margin-top:1px;
}
main {
  width:100%; max-width:520px; flex:1; padding:6px 14px 12px;
  display:flex; flex-direction:column; gap:14px;
}

/* ------- cards (the POC's incoming-bubble grammar, standing on their own) ------- */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  border-bottom-left-radius:6px; padding:16px 18px; box-shadow:var(--shadow);
  overflow-wrap:break-word;
}
.card.plain { border-bottom-left-radius:18px; }
.card .big { font-size:21px; line-height:1.4; font-weight:650; white-space:pre-wrap; }
.card .sub { color:var(--muted); font-size:14.5px; margin-top:6px; }
.card p { margin:8px 0 0; }
.card p:first-child { margin-top:0; }
.card h2 { margin:0 0 6px; font-size:18px; }
/* the visitor's own confirmed choices, echoed back in the accent (POC .out) */
.mine { align-self:flex-end; max-width:85%; background:var(--accent); color:var(--accent-ink);
  border-radius:18px; border-bottom-right-radius:6px; padding:12px 15px; font-weight:650;
  box-shadow:var(--shadow); }
.sechead { font-size:14px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted);
  margin:22px 2px 0; }
.muted { color:var(--muted); font-size:14.5px; }
/* forwarded-quote grammar: the gutter marks "this is someone else's words" */
.quote { border-left:3px solid var(--accent); padding-left:12px; }
/* Illustrations render WHOLE — never cropped by CSS. */
.card img.art { display:block; width:100%; height:auto; border-radius:12px; margin-top:10px;
  border:4px solid var(--bg2); }
.stateart { display:block; width:100%; height:auto; border-radius:14px;
  border:1px solid var(--line); box-shadow:var(--shadow); }
/* category thumb next to a need */
.needrow { display:flex; gap:12px; align-items:flex-start; }
.needrow .thumb { flex:0 0 auto; width:64px; height:64px; border-radius:12px; object-fit:cover;
  border:1px solid var(--line); }
.needrow .body { flex:1 1 auto; min-width:0; }
.catline { font-size:14px; color:var(--muted); margin-top:6px; }
/* registry row: the KIND leads, the custom label only tells two of a kind apart */
.kindline { font-size:15px; font-weight:650; }
.kindline .lbl { color:var(--muted); font-weight:400; }
.propval { margin-top:3px; overflow-wrap:break-word; }

/* horizontal story strip: swipeable, cards align at one fixed height */
.story { width:100%; display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.story::-webkit-scrollbar { display:none; }
.scard { flex:0 0 auto; scroll-snap-align:center; background:var(--card);
  border:1px solid var(--line); border-radius:16px; padding:10px; box-shadow:var(--shadow); }
.scard img { display:block; height:236px; width:auto; border-radius:10px; }
.scard .cap { font-size:14.5px; color:var(--muted); margin-top:7px; max-width:236px;
  text-align:center; }

/* chain of people */
.chain { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; overflow-x:auto;
  margin-top:10px; padding-bottom:2px; }
.chain .p { flex:0 0 auto; text-align:center; font-size:12px; color:var(--muted); max-width:76px; }
.chain .p .face { display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:var(--soft); color:var(--accent);
  font-weight:800; font-size:18px; margin:0 auto 2px; border:2px solid var(--accent); }
.chain .p.you .face { background:var(--accent); color:var(--accent-ink); }
.chain .p .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chain .arrow { flex:0 0 auto; color:var(--muted); font-size:17px; }

/* ------- chips ------- */
.row { display:flex; gap:8px; margin-top:12px; }
.row.stack { flex-direction:column; }
.chip {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 14px; border-radius:16px; font:inherit; font-size:17.5px;
  font-weight:700; cursor:pointer; text-decoration:none; text-align:center;
  border:1.5px solid var(--line); background:var(--card); color:var(--ink);
}
.chip.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.chip.primary:active { background:var(--accent2); }
.chip:active { transform:translateY(1px); }
.chip[disabled] { opacity:.45; pointer-events:none; }
.quietrow { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:10px; }
.quiet { background:none; border:0; color:var(--muted); font:inherit; font-size:14.5px;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:2px; }
.quiet:active { color:var(--ink); }
.quiet[disabled] { opacity:.6; cursor:default; }

/* selectable pills (categories, facet choices) */
.cats { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cat { border:1.5px solid var(--line); background:transparent; color:var(--ink);
  border-radius:999px; padding:8px 13px; font:inherit; font-size:16px; cursor:pointer; }
.cat.sel { background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
  font-weight:700; }

/* ------- forms ------- */
label { display:block; font-size:14px; color:var(--muted); margin:10px 0 3px; }
input[type=text], input[type=email], input[type=password], input[type=tel] {
  width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:12px;
  background:transparent; color:var(--ink); font:inherit;
}
input:focus { outline:none; border-color:var(--accent); }
.err { color:var(--warn); font-size:14.5px; margin-top:8px; }
.ok { color:var(--accent); font-size:14.5px; margin-top:8px; }
.skel { height:74px; border-radius:18px; background:var(--card); border:1px solid var(--line);
  opacity:.55; }

/* Per-card face label. There is no page-level identity (D11): each card says
   which of your profiles it belongs to, quietly, above its own headline. */
.facetag { display:inline-block; margin-bottom:6px; padding:2px 9px; border-radius:999px;
  background:var(--soft); color:var(--accent2); font-size:13px; font-weight:650;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (prefers-color-scheme: dark) { .facetag { color:var(--accent); } }

/* compact two-column lists: audience rows, your passes, offers */
.minihead { font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:var(--muted);
  margin-top:12px; }
.minilist { margin-top:4px; }
.minirow { display:flex; align-items:baseline; gap:10px; padding:5px 0;
  border-bottom:1px solid var(--line); }
.minirow:last-child { border-bottom:0; }
.minirow .nm { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:16px; }
.minirow .st { flex:0 0 auto; font-size:13.5px; color:var(--muted); text-align:right; }

/* one blocked person, per profile list */
.blockrow { padding:8px 0; border-bottom:1px solid var(--line); }
.blockrow:last-child { border-bottom:0; }
.blockrow .quietrow { justify-content:flex-start; margin-top:6px; }

/* the ask someone arrived on, from an invite that carried one */
.card.spot { border-color:var(--accent); box-shadow:0 0 0 3px var(--soft), var(--shadow); }

.linkbox { border:1.5px dashed var(--line); border-radius:12px; padding:10px 12px; margin-top:10px;
  font-size:13.5px; word-break:break-all; color:var(--muted); }

/* install gate: the ONLY thing web ever shows for a thread */
.gate { border:1.5px dashed var(--line); border-radius:14px; padding:12px 14px;
  font-size:15.5px; color:var(--muted); }
.gate b { color:var(--ink); }

footer.foot { width:100%; max-width:520px; padding:6px 14px calc(18px + env(safe-area-inset-bottom));
  text-align:center; }
.copyline { font-size:12px; color:var(--muted); margin-top:10px; }
noscript .ns { display:block; margin:40px auto; max-width:340px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; }