/* Mosaic account pages. Same ground, stage and card layering as the rest of the site:
   gradient ground, eggshell card, Geist for text, Geist Mono for labels and status. */
:root {
  --eggshell:#FDFDFC; --stone:#E9E9E6; --ink:#000; --graphite:#454542; --smoke:#6F6F6C; --ash:#A2A29D;
  --sans:"Geist",ui-sans-serif,system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --pale:rgba(253,253,252,.82); --ember:#C05A2E; --rust:#8A3D1A;
}
* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }
body {
  min-height:100vh; min-height:100dvh; color:var(--eggshell); font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden;
  background:linear-gradient(160deg,#2E3947 0%,#41546B 24%,#5B7286 46%,#8A6650 68%,#C05A2E 86%,#D97B4A 100%);
}
body::before {
  content:""; position:fixed; inset:-30%; z-index:0; pointer-events:none;
  background:radial-gradient(40% 50% at 80% 22%,rgba(224,160,106,.7),transparent 70%),
             radial-gradient(46% 58% at 14% 78%,rgba(110,134,160,.65),transparent 72%),
             radial-gradient(30% 42% at 55% 95%,rgba(217,123,74,.5),transparent 70%);
}
body::after {
  content:""; position:fixed; inset:0; z-index:0; opacity:.32; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.page { position:relative; z-index:1; max-width:720px; margin:0 auto; padding:58px 20px calc(28px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; }
.brand { position:absolute; z-index:2; top:20px; left:max(24px, env(safe-area-inset-left)); display:inline-flex; align-items:center; gap:10px; }
.wordmark { color:var(--eggshell); font-weight:500; font-size:1.1rem; text-decoration:none; letter-spacing:-0.01em; display:inline-flex; align-items:center; gap:9px; }
.mark { display:grid; grid-template-columns:8px 8px; gap:2px; }
.mark span { width:8px; height:8px; background:var(--eggshell); border-radius:2.5px; }
.mark span.open { background:transparent; border:1.5px solid var(--eggshell); }
.beta { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--pale); border:1px solid rgba(253,253,252,.4); border-radius:9999px; padding:3px 10px; }
.top-right { position:absolute; z-index:2; top:20px; right:max(24px, env(safe-area-inset-right)); display:inline-flex; align-items:center; gap:14px; }
.top-right a, .top-right button { color:var(--pale); font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-decoration:none; background:none; border:none; cursor:pointer; padding:0; }
.top-right a:hover, .top-right button:hover { color:var(--eggshell); }

.hero { text-align:center; margin:18px 0 14px; }
h1 { font-weight:600; letter-spacing:-0.03em; font-size:clamp(1.7rem,4.4vw,2.2rem); line-height:1.12; text-wrap:balance; }
.sub { color:var(--pale); max-width:52ch; margin:10px auto 0; font-family:var(--mono); font-size:13px; letter-spacing:.02em; }

.door { width:100%; max-width:560px; background:var(--eggshell); color:var(--ink); border-radius:20px; padding:22px 22px 18px; margin-top:14px; }
.door h2 { font-weight:600; letter-spacing:-0.02em; font-size:1.15rem; }
.line { color:var(--smoke); font-size:13.5px; margin:4px 0 10px; }
.lbl { display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--smoke); margin:18px 0 8px; }
.lbl small { text-transform:none; letter-spacing:0; font-family:var(--sans); color:var(--ash); margin-left:6px; }
input[type=text], input[type=email], input[type=url], input[type=password], textarea {
  width:100%; font:400 15px var(--sans); color:var(--ink); background:#fff; border:1px solid var(--stone); border-radius:4px; padding:10px 12px;
}
textarea { min-height:74px; resize:vertical; }
input:focus, textarea:focus { outline:2px solid var(--ink); outline-offset:1px; }

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font:500 13.5px var(--sans); color:var(--graphite); background:#fff; border:1px solid var(--stone); border-radius:9999px; padding:7px 13px; cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
.chip[aria-pressed="true"] { background:var(--ink); color:var(--eggshell); border-color:var(--ink); }
.chip:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

.row { display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:22px; flex-wrap:wrap; }
.btn { font:500 15px var(--sans); color:var(--eggshell); background:var(--ink); border:none; border-radius:9999px; padding:12px 24px; cursor:pointer; }
.btn[disabled] { opacity:.5; cursor:default; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--stone); }
.link { font:400 13.5px var(--sans); color:var(--graphite); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.link:hover { color:var(--ink); }
.alt { color:var(--smoke); font-size:13.5px; margin-top:14px; }

.status { font-family:var(--mono); font-size:12.5px; color:var(--smoke); }
.status.ok { color:var(--ember); }
.status.bad { color:var(--rust); }
/* Solid fill so the badge reads on the dark header too (Bas, 2026-09-14: "in
   review" was grey on grey). */
.badge { display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--stone); border-radius:9999px; padding:4px 11px; color:var(--ink); background:#fff; margin-left:8px; vertical-align:middle; }
.badge.member { border-color:var(--ember); color:var(--ember); background:#fff; }

/* tabs: profile / saved */
.tabs { display:flex; gap:6px; width:100%; max-width:560px; margin-top:18px; }
.tab { flex:1; font:500 13.5px var(--sans); color:var(--pale); background:rgba(253,253,252,.1); border:1px solid rgba(253,253,252,.28); border-radius:9999px; padding:9px 14px; cursor:pointer; }
.tab[aria-selected="true"] { background:var(--eggshell); color:var(--ink); border-color:var(--eggshell); }

/* saved roles */
.saved-item { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:14px 0; border-top:1px solid var(--stone); }
.saved-item:first-child { border-top:none; }
.saved-item h3 { font-weight:600; font-size:15px; letter-spacing:-0.01em; }
.saved-item h3 a { color:var(--ink); text-decoration:none; }
.saved-item h3 a:hover { text-decoration:underline; }
.saved-meta { color:var(--smoke); font-size:13px; margin-top:2px; }
.saved-when { font-family:var(--mono); font-size:11px; color:var(--ash); margin-top:4px; letter-spacing:.03em; }
.unsave { font:400 12.5px var(--sans); color:var(--smoke); background:none; border:1px solid var(--stone); border-radius:9999px; padding:5px 12px; cursor:pointer; white-space:nowrap; }
.unsave:hover { color:var(--ink); border-color:var(--ink); }
.empty { color:var(--smoke); font-size:14px; padding:18px 0 6px; }

/* intros: every company the member asked to meet, and where it stands (2026-09-12).
   Same row shape as saved roles on purpose, so the two tabs read as one thing. */
.intro-item { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:14px 0; border-top:1px solid var(--stone); }
.intro-item:first-child { border-top:none; }
.intro-item h3 { font-weight:600; font-size:15px; letter-spacing:-0.01em; }
.intro-item h3 a { color:var(--ink); text-decoration:none; }
.intro-item h3 a:hover { text-decoration:underline; }
.intro-note { color:var(--graphite); font-size:13px; margin-top:8px; background:#fff; border:1px solid var(--stone); border-radius:10px; padding:8px 10px; }
/* the state pill stays quiet; only "with the company" and "in their process"
   earn the ember, because those are the two that mean something moved */
.state { flex:none; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--stone); border-radius:9999px; padding:4px 10px; color:var(--smoke); white-space:nowrap; }
.state.live { border-color:var(--ember); color:var(--ember); }
.state.done { color:var(--ash); }

.foot { margin-top:22px; color:var(--pale); font-family:var(--mono); font-size:12px; text-align:center; }
.foot a { color:var(--eggshell); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (max-width:640px) {
  .page { padding-top:76px; }
  .top-right { top:56px; right:20px; }
}