/* ============================================================================
   FLLOWLY  v2 — spatial, decision-first.
   No sidebar. No cards. No feed. No profile header.
   ============================================================================ */

/* ── TOP MARK — the only persistent chrome. 40px tall, no nav list. ───────── */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.topbar.is-floating { backdrop-filter: blur(14px); background: var(--bar); }

.mark { display: inline-flex; align-items: center; gap: 9px; }
.mark-word { font-size: 17px; font-weight: 800; letter-spacing: -.04em; }

/* ── TRAIL — navigation is a path you have walked, not a menu ─────────────── */
.trail { display: flex; align-items: center; gap: 10px; font-size: var(--t-xs); }
.trail-step { color: var(--ink-3); transition: color var(--dur) var(--ease); white-space: nowrap; }
.trail-step:hover { color: var(--ink); }
.trail-step.is-here { color: var(--ink); font-weight: 600; }
.trail-sep { width: 14px; height: 1px; background: var(--line-2); flex: none; }

.utilities { display: flex; align-items: center; gap: var(--s5); }
.util { font-size: var(--t-xs); color: var(--ink-3); transition: color var(--dur) var(--ease); }
.util:hover { color: var(--ink); }

/* ── ASK — the home. One question, nothing else on screen. ───────────────── */
.ask { width: min(1100px, 100%); padding: 0 var(--gutter); }
.ask-q { margin-bottom: var(--s7); }
.ask-field {
  position: relative;
  border-bottom: 1px solid var(--line-2);
  transition: border-color var(--dur) var(--ease);
}
.ask-field:focus-within { border-color: var(--blue); }
.ask-field textarea {
  display: block; width: 100%; resize: none; overflow: hidden;
  background: none; border: 0; outline: none;
  padding: var(--s4) 0 var(--s5);
  font-size: clamp(24px, 3.1vw, 42px); font-weight: 500;
  letter-spacing: -.03em; line-height: 1.24;
}
.ask-field textarea::placeholder { color: var(--ink-4); }

.ask-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); margin-top: var(--s5); flex-wrap: wrap; }

/* seeds are inspiration, never a closed list of options */
.seeds { display: flex; gap: var(--s2); flex-wrap: wrap; }
.seed {
  font-size: var(--t-xs); color: var(--ink-3);
  padding: 7px 0; position: relative;
  transition: color var(--dur) var(--ease);
}
.seed + .seed { margin-left: var(--s4); }
.seed::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--line-2); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.seed:hover { color: var(--ink); }
.seed:hover::after { transform: scaleX(1); }

/* ── ACTION — Fllowly's own verbs. No Connect. No Follow. ────────────────── */
.act {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px; border-radius: 2px;
  font-size: var(--t-sm); font-weight: 700; letter-spacing: -.01em;
  transition: all var(--dur) var(--ease); white-space: nowrap;
}
.act-go { background: var(--blue); color: #fff; }
.act-go:hover { background: var(--blue-lit); }
.act-go:disabled { background: var(--lift-2); color: var(--ink-4); pointer-events: none; }
.act-line { border: 1px solid var(--line-2); color: var(--ink); }
.act-line:hover { border-color: var(--line-3); background: rgba(255,255,255,.03); }
.act-bare { padding-inline: 0; color: var(--ink-2); }
.act-bare:hover { color: var(--ink); }
.act .tip { transition: transform var(--dur) var(--ease); }
.act:hover .tip { transform: translateX(4px); }

/* ── CROSSROADS — the signature. People are points on diverging roads. ──── */
.fork { position: relative; margin: var(--s7) 0 0; }
.fork svg { display: block; width: 100%; height: auto; overflow: visible; }
.fork-key { display: flex; gap: var(--s6); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); flex-wrap: wrap; }
.fork-key span { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-xs); color: var(--ink-3); }
.key-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.p-line { fill: none; stroke-linecap: round; transition: opacity 260ms var(--ease), stroke-width 260ms var(--ease); }
.p-draw { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 1500ms var(--ease-out) forwards; }
.p-line.is-dim { opacity: .12 !important; }
.p-line.is-hot { opacity: 1 !important; stroke-width: 2.6; }

.p-node { cursor: pointer; opacity: 0; animation: fade 520ms var(--ease-out) forwards;
          transition: opacity 260ms var(--ease); }
.p-node.is-dim { opacity: .22 !important; }
.p-node .hit { transition: r 220ms var(--ease); }
.p-node .hit-ring { transition: stroke-opacity 220ms var(--ease), r 220ms var(--ease); }
.p-node:hover .hit, .p-node:focus-visible .hit { r: 9.5; }
.p-node:hover .hit-ring, .p-node:focus-visible .hit-ring { stroke-opacity: .38; r: 18; }
.p-node:hover .p-name, .p-node:focus-visible .p-name { fill: #fff; }

.p-name    { font-size: 17px; font-weight: 800; fill: var(--ink); letter-spacing: -.028em; }
.p-sub     { font-size: 12px; fill: var(--ink-3); }
.p-verdict { font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.p-axis    { font-size: 10.5px; font-weight: 800; letter-spacing: .22em; }

/* the node you are standing on breathes, slowly */
.p-pulse { animation: breathe 3.6s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }
@keyframes breathe {
  0%, 100% { opacity: .34; r: 15; }
  50%      { opacity: .08; r: 23; }
}

/* ── EXPERIENCE TRAIL — time flows downward. Replaces the profile page. ──── */
.etrail { position: relative; padding-left: var(--s7); }
.etrail::before {
  content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(180deg, var(--blue), var(--violet) 70%, transparent);
  opacity: .55;
}
.enode { position: relative; padding-bottom: var(--s6); }
.enode::before {
  content: ""; position: absolute; left: calc(var(--s7) * -1 + 2px); top: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--void); border: 1.5px solid var(--line-3);
}
.enode.is-key::before  { background: var(--blue);   border-color: var(--blue);   box-shadow: 0 0 0 5px rgba(37,99,255,.13); }
.enode.is-turn::before { background: var(--violet); border-color: var(--violet); box-shadow: 0 0 0 5px rgba(124,58,237,.13); }
.enode-when { font-size: var(--t-tag); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 5px; }
.enode-what { font-size: var(--t-md); font-weight: 700; letter-spacing: -.02em; }
.enode-note { font-size: var(--t-sm); color: var(--ink-3); margin-top: 4px; }

/* ── CHAPTER — the four blocks of an experience ──────────────────────────── */
.chapter { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s3); padding: var(--s7) 0; border-top: 1px solid var(--line); }
.chapter-head { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.chapter-q { font-size: var(--t-sm); color: var(--ink-3); font-style: italic; }

/* the pull quote — the loudest thing on any experience */
.pull {
  font-size: clamp(26px, 3.4vw, 46px); font-weight: 600;
  letter-spacing: -.035em; line-height: 1.18; max-width: 19ch;
}

/* ── FIELD — discovery as a scan, never a feed ───────────────────────────── */
.field { display: grid; gap: 0; }
.fitem {
  display: grid; grid-template-columns: 92px minmax(0,1fr) auto;
  gap: clamp(16px, 3vw, 48px); align-items: start;
  padding: var(--s6) 0; border-top: 1px solid var(--line);
  width: 100%; transition: background var(--dur) var(--ease);
}
.fitem:last-child { border-bottom: 1px solid var(--line); }
.fitem:hover { background: rgba(255,255,255,.018); }
.fitem:hover .fitem-say { color: var(--ink); }
.fitem-when { font-size: var(--t-xs); color: var(--ink-4); padding-top: 4px; white-space: nowrap; }
.fitem-say { font-size: var(--t-read); font-weight: 500; letter-spacing: -.02em; line-height: 1.35; color: var(--ink); transition: color var(--dur) var(--ease); }
.fitem-ctx { display: flex; gap: var(--s4); margin-top: 12px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-3); }
.fitem-out { text-align: right; font-size: var(--t-xs); color: var(--ink-3); padding-top: 4px; white-space: nowrap; }
.fitem-out b { display: block; color: var(--ink-2); font-weight: 600; }

/* the branch tick that colours every person reference */
.tick { display: inline-block; width: 3px; height: 15px; border-radius: 2px; background: var(--path-go); vertical-align: -2px; margin-right: 9px; }
.tick.is-stay   { background: var(--path-stay); }
.tick.is-return { background: var(--path-return); }

/* ── ROUTES — places as flowing lines, not a grid of cards ───────────────── */
.routes { display: grid; gap: 0; }
.route {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center;
  gap: var(--s5); padding: var(--s6) 0; border-top: 1px solid var(--line);
  width: 100%; transition: padding-left var(--dur) var(--ease);
}
.route:last-child { border-bottom: 1px solid var(--line); }
.route:hover { padding-left: var(--s4); }
.route:hover .route-name { color: var(--sky); }
.route-name { font-size: clamp(24px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.035em; transition: color var(--dur) var(--ease); }
.route-legs { display: flex; gap: var(--s4); margin-top: 10px; font-size: var(--t-xs); color: var(--ink-4); flex-wrap: wrap; }
.route-n { font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; }

/* ── EXPERIENCE MAP — the profile replacement ────────────────────────────── */
.emap-head { padding-bottom: var(--s6); border-bottom: 1px solid var(--line); }
.emap-name { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.04em; }
.emap-facts { display: flex; gap: var(--s6); margin-top: var(--s5); flex-wrap: wrap; }
.emap-fact b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.emap-fact span { font-size: var(--t-xs); color: var(--ink-3); }

.lived { display: grid; gap: 0; }
.lived-row {
  display: grid; grid-template-columns: minmax(0,1fr) 130px auto; gap: var(--s5);
  align-items: baseline; padding: var(--s5) 0; border-top: 1px solid var(--line);
  width: 100%; transition: padding-left var(--dur) var(--ease);
}
.lived-row:hover { padding-left: var(--s3); }
.lived-what { font-size: var(--t-md); font-weight: 600; letter-spacing: -.02em; }
.lived-when { font-size: var(--t-xs); color: var(--ink-4); }
.lived-out  { font-size: var(--t-xs); color: var(--ink-3); text-align: right; }

.helps { display: flex; gap: var(--s3); flex-wrap: wrap; }
.help {
  font-size: var(--t-xs); color: var(--ink-2);
  padding: 8px 15px; border: 1px solid var(--line-2); border-radius: 999px;
}
.help.is-not { color: var(--ink-4); border-style: dashed; }

/* ── VERIFICATION — claims, never a score, never a blue tick ─────────────── */
.claims { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center; }
.claim { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-xs); color: var(--ink-2); }
.claim i { font-style: normal; color: var(--blue); }
.claim.is-off { color: var(--ink-4); }
.claim.is-off i { color: var(--ink-4); }

/* ── IMPACT — earned by helping. Never a rank, never a medal. ────────────── */
.impact { border-left: 1px solid rgba(124,58,237,.4); padding: 2px 0 2px var(--s5); }
.impact-level { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s5); }
.impact-level b { font-size: var(--t-md); font-weight: 700; color: var(--violet-lit); letter-spacing: -.02em; }
.impact-mark { color: var(--violet); font-size: 15px; line-height: 1; }
.impact-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.impact-n { font-size: 30px; font-weight: 800; letter-spacing: -.04em; min-width: 52px; }
.impact-n.is-2 { font-size: 24px; color: var(--ink-2); }
.impact-say { font-size: var(--t-body); color: var(--ink-2); }
.impact-of { font-size: var(--t-xs); color: var(--ink-4); margin-top: var(--s4); max-width: 44ch; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-tag); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet-lit);
}

/* ── SIGNAL — the feedback that creates impact ───────────────────────────── */
.signal { border: 1px solid var(--line); padding: var(--s6); }
.signal-q + .signal-q { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.signal-ask { font-size: var(--t-body); font-weight: 600; margin-bottom: var(--s4); }
.signal-opts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.opt {
  padding: 10px 20px; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: var(--t-xs); color: var(--ink-2); transition: all var(--dur) var(--ease);
}
.opt:hover { border-color: var(--line-3); color: var(--ink); }
.opt.is-on { border-color: var(--violet); color: var(--violet-lit); background: rgba(124,58,237,.1); }

/* ── PRIVACY ─────────────────────────────────────────────────────────────── */
.pgroup { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.pgroup:last-child { border-bottom: 1px solid var(--line); }
.pgroup-t { font-size: var(--t-md); font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.pgroup-d { font-size: var(--t-sm); color: var(--ink-3); max-width: 56ch; margin-bottom: var(--s5); }
.choices { display: flex; gap: var(--s2); flex-wrap: wrap; }
.choice {
  padding: 11px 20px; border: 1px solid var(--line-2); border-radius: 2px;
  font-size: var(--t-xs); color: var(--ink-2); transition: all var(--dur) var(--ease);
}
.choice:hover { border-color: var(--line-3); color: var(--ink); }
.choice.is-on { border-color: var(--blue); color: #fff; background: rgba(37,99,255,.14); }
.choice.is-on::before { content: "\2713\00a0\00a0"; color: var(--blue); }
.safest { font-size: var(--t-tag); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-left: 10px; }

/* ── STATES ──────────────────────────────────────────────────────────────── */
.state { padding: var(--s9) 0; max-width: 56ch; }
.state-t { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.03em; margin-bottom: var(--s4); }
.state-d { font-size: var(--t-read); color: var(--ink-2); line-height: 1.7; }
.state-list { margin-top: var(--s6); }
.state-item { display: grid; grid-template-columns: 150px 1fr; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.state-item dt { color: var(--ink-4); }
.state-item dd { margin: 0; color: var(--ink-2); }

.searching { display: flex; flex-direction: column; gap: var(--s3); }
.searching-line { display: flex; align-items: center; gap: var(--s4); font-size: var(--t-sm); color: var(--ink-3); opacity: 0; animation: rise 500ms var(--ease-out) forwards; }
.searching-line b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.searching-bar { flex: 1; height: 1px; background: var(--line); max-width: 180px; position: relative; overflow: hidden; }
.searching-bar::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; animation: widen 700ms var(--ease-out) forwards; }

/* ── COUNTER-CASE callout ────────────────────────────────────────────────── */
.counter { border-left: 2px solid var(--violet); padding-left: var(--s5); margin: var(--s6) 0; }
.counter-t { font-size: var(--t-tag); letter-spacing: .18em; text-transform: uppercase; color: var(--violet-lit); margin-bottom: 10px; }

/* ── misc ────────────────────────────────────────────────────────────────── */
.back { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-xs); color: var(--ink-4); transition: color var(--dur) var(--ease); }
.back:hover { color: var(--ink); }
.actions { display: flex; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s7); margin-top: var(--s7); border-top: 1px solid var(--line); }
.demo-note { font-size: var(--t-tag); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }

.form-row { display: block; margin-bottom: var(--s5); max-width: 560px; }
.form-row > span { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-bottom: 9px; }
.form-row input, .form-row textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-2);
  padding: 10px 0; outline: none; font-size: var(--t-body); resize: vertical;
  transition: border-color var(--dur) var(--ease);
}
.form-row input:focus, .form-row textarea:focus { border-color: var(--blue); }
.form-row .bad { border-color: #E4574D; }
.form-err { font-size: var(--t-xs); color: #F08A82; margin-top: 7px; min-height: 1.1em; }

@media (max-width: 900px) {
  .fitem  { grid-template-columns: 1fr; gap: var(--s3); }
  .fitem-out { text-align: left; }
  .lived-row { grid-template-columns: 1fr; gap: 6px; }
  .lived-out { text-align: left; }
  .route { grid-template-columns: 1fr; }
  .etrail { padding-left: var(--s6); }
  .enode::before { left: calc(var(--s6) * -1 + 2px); }
}

/* the road after the node — the part that reads without words */
.p-tail { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 900ms var(--ease-out) forwards; }
.p-cap  { opacity: 0; animation: fade 420ms var(--ease-out) forwards; }
.road-glyph { flex: none; }
.fork-key span { gap: 11px; }