/* GOSOMEWHERE — the page design Asa approved on 18 Sep 2026 (the lead page, the client page and the
   Leads Board mockups: "Lead Page, Whole", "Client Page, Whole", "Leads Board, Whole"). One stylesheet
   so every page redesigned from here on uses the same parts rather than a copy of them.

   The rules this file encodes (the skill ~/.claude/skills/gosomewhere/SKILL.md has the whole method):
     · a light header with a slow living wash — never a dark band;
     · one card everywhere: heading, icon tile, and a line in the card's colour UNDER the heading that
       draws in and now and then catches the light. NEVER a bar down or across one edge of a card;
     · bold for headings only — values, labels, chips and buttons are regular or medium;
     · two columns at most;
     · purple is Aby and nothing else; red is commit (Save) and alarm, nothing else;
     · motion is quiet and one-shot (draw, rise, count-up), except the glint and the "now" ping;
       everything stops under prefers-reduced-motion.

   Tokens come from tkb.css (--line, --stone, --ink, --t-*, --r-*); the fallbacks are the same values,
   so a page outside the app still renders. A card chooses its colour with a tone class
   (gw-who, gw-money, gw-paper, gw-words, gw-work, gw-clock, gw-ai, gw-safe) or by setting --gw-tone
   and --gw-tint itself. */

/* ── tones ─────────────────────────────────────────────────────────────────────────────────────── */
.gw-who{--gw-tone:#1D9E75;--gw-tint:#E1F5EE}
.gw-money{--gw-tone:#8A5A12;--gw-tint:#F7EEDD}
.gw-paper{--gw-tone:#6B5B3E;--gw-tint:#F3EEE8}
.gw-words{--gw-tone:#2E6BA8;--gw-tint:#E7EEF7}
.gw-work{--gw-tone:#3F3A35;--gw-tint:#F3EEE8}
.gw-clock{--gw-tone:#BD2424;--gw-tint:#F6E0E0}
.gw-ai{--gw-tone:#3E36A8;--gw-tint:#EEEDFE}
.gw-safe{--gw-tone:#B4432F;--gw-tint:#FBE9E4}

/* ── the living header ─────────────────────────────────────────────────────────────────────────── */
.gw-head{position:relative;overflow:hidden;isolation:isolate;background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7);
  border-radius:var(--r-panel,16px);padding:16px 18px;display:grid;gap:12px;margin-bottom:12px}
.gw-head::before,.gw-head::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.gw-head::before{right:-12%;top:-130%;width:60%;height:360%;background:radial-gradient(closest-side,rgba(189,36,36,.07),transparent 70%);animation:gwDrift 20s ease-in-out infinite alternate}
.gw-head::after{left:-12%;bottom:-170%;width:55%;height:340%;background:radial-gradient(closest-side,rgba(127,119,221,.09),transparent 70%);animation:gwDrift 24s ease-in-out infinite alternate-reverse}
.gw-hrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.gw-hrow h1{margin:0;font-family:var(--disp,inherit);font-size:var(--t-2xl,26px);font-weight:800;letter-spacing:-.01em;line-height:1.1}
.gw-sub{font-size:var(--t-sm,12.5px);color:var(--stone,#675E54)}
.gw-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.gw-facts{display:flex;gap:10px 24px;align-items:center;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--cream-2,#F3EEE8)}
.gw-fact{display:grid;line-height:1.25}
.gw-fact small,.gw-k{font-size:var(--t-micro,10px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--stone,#675E54)}
.gw-fact span{font-weight:500}
.gw-fact b{font-family:var(--disp,inherit);font-size:var(--t-xl,19px);font-weight:700}
.gw-fact b.gw-red{color:var(--bad,#BD2424)}

/* ── the health ring (an SVG sized in its own attributes, 40×40, circle r=15.5) ──────────────── */
.gw-ring{position:relative;width:40px;height:40px;flex:none}
.gw-ring svg{width:40px;height:40px;transform:rotate(-90deg)}
.gw-ring svg .gw-arc{transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}
.gw-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp,inherit);font-size:var(--t-sm,12.5px);font-weight:600}

/* ── the journey as a route: stops joined by segments, filled to where it is ────────────────── */
.gw-route{display:flex;align-items:center;flex-wrap:wrap}
.gw-stop{display:inline-flex;align-items:center;gap:6px;padding:0 6px;font-size:var(--t-xs,11px);font-weight:500;color:#A59C92}
.gw-stop::before{content:"";width:8px;height:8px;border-radius:50%;border:2px solid #D5CDC4;background:#fff}
.gw-stop.done{color:var(--ink-soft,#3F3A35)}
.gw-stop.done::before,.gw-stop.on::before{background:var(--bad,#BD2424);border-color:var(--bad,#BD2424)}
.gw-stop.on{color:var(--bad,#BD2424);font-weight:600}
.gw-stop.on::before{animation:gwPing 2.4s ease-out infinite}
.gw-seg{width:26px;height:2px;border-radius:999px;background:#E1DCD7;position:relative;overflow:hidden}
.gw-seg.done::after{content:"";position:absolute;inset:0;background:var(--bad,#BD2424);transform-origin:left;animation:gwDraw .5s .2s cubic-bezier(.2,.8,.2,1) both}

/* ── a quiet toolbar ───────────────────────────────────────────────────────────────────────────── */
.gw-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7);
  border-radius:var(--r-card,14px);padding:8px 10px;margin-bottom:12px}
.gw-tool{border:0;background:none;border-radius:var(--r-sm,8px);padding:6px 11px;font-size:var(--t-sm,12.5px);font-weight:500;color:var(--ink-soft,#3F3A35);cursor:pointer}
.gw-tool:hover{background:var(--cream-2,#F3EEE8)}
.gw-tool.gw-main{background:var(--ink-soft,#3F3A35);color:#fff}

/* ── tabs, as a segmented control ──────────────────────────────────────────────────────────────── */
.gw-tabs{display:flex;gap:4px;flex-wrap:wrap;background:var(--cream-2,#F3EEE8);border-radius:var(--r-md,12px);padding:3px}
.gw-tab{border:0;background:none;border-radius:var(--r-sm,8px);padding:5px 12px;font-size:var(--t-sm,12.5px);font-weight:500;color:var(--stone,#675E54);cursor:pointer}
.gw-tab.on{background:var(--paper,#fff);color:var(--ink,#080706);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ── Aby's strip (questions, or a one-line prompt) — purple, slowly moving ─────────────────────── */
.gw-aby{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border:1px solid #CFCBF2;border-radius:var(--r-card,14px);padding:8px 12px;margin-bottom:12px;
  background:linear-gradient(120deg,#EEEDFE,#F7F4FF 40%,#EAE6FD);background-size:300% 300%;animation:gwAby 22s ease-in-out infinite}
.gw-aby > b{font-family:var(--disp,inherit);font-size:var(--t-sm,12.5px);font-weight:800;color:#3E36A8}
.gw-ask{border:1px solid #CFCBF2;background:#fff;color:#3E36A8;border-radius:999px;padding:3px 11px;font-size:var(--t-sm,12.5px);font-weight:500;cursor:pointer}
.gw-ask:hover{background:#EEEDFE}

/* ── the one card ──────────────────────────────────────────────────────────────────────────────── */
.gw-card{background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7);border-radius:var(--r-panel,16px);padding:14px 16px;min-width:0}
.gw-enter .gw-card{animation:gwRise .5s cubic-bezier(.2,.8,.2,1) both}
.gw-ch{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gw-ch h3{margin:0;font-family:var(--disp,inherit);font-size:var(--t-lg,15px);font-weight:700;line-height:1.2;color:var(--ink,#080706)}
.gw-ch .gw-s{display:block;font-size:var(--t-xs,11px);color:var(--stone,#675E54)}
.gw-ch .gw-r{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gw-ic{width:26px;height:26px;border-radius:var(--r-sm,8px);display:grid;place-items:center;flex:none;font-size:var(--t-sm,12.5px);
  background:var(--gw-tint,#F3EEE8);color:var(--gw-tone,#3F3A35)}
.gw-ic svg{width:15px;height:15px}
/* THE LINE UNDER THE HEADING — the one accent a card carries. Full width, under the heading; the card
   has no other rule there, so there is never a grey line and a coloured one together. */
.gw-line{display:block;position:relative;height:2px;border-radius:999px;margin:9px 0 12px;overflow:hidden;
  background:linear-gradient(90deg,var(--gw-tone,#8A8274) 0%,var(--gw-tone,#8A8274) 22%,var(--gw-tint,#F3EEE8) 62%,var(--cream-2,#F3EEE8) 100%);
  transform-origin:left;animation:gwDraw 1s .15s cubic-bezier(.2,.8,.2,1) both;transition:height .2s}
.gw-line::after{content:"";position:absolute;top:0;bottom:0;left:-70px;width:70px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);animation:gwGlint 7s 1.6s ease-in-out infinite}
.gw-card:hover .gw-line{height:3px}

/* inside a card: a record (label / value rows), an unknown, a list row */
.gw-kv{display:grid;grid-template-columns:132px minmax(0,1fr);gap:4px 14px;padding:6px 0;border-top:1px solid var(--cream-2,#F3EEE8);align-items:baseline}
.gw-kv:first-of-type{border-top:0}
.gw-v{font-weight:500}
.gw-gap{justify-self:start;background:#FBF1D6;color:#875410;border-radius:6px;padding:0 7px;font-size:var(--t-xs,11px)}
.gw-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--cream-2,#F3EEE8)}
.gw-row:first-of-type{border-top:0}
.gw-chip{font-size:var(--t-xs,11px);font-weight:500;border:1px solid var(--line,#E1DCD7);background:var(--cream,#F9F2EB);border-radius:999px;padding:1px 9px}

/* ── layout: two columns at most ───────────────────────────────────────────────────────────────── */
.gw-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.gw-two > .gw-full{grid-column:1/-1}
@media (max-width:900px){.gw-two{grid-template-columns:1fr}}

/* ── a board column (for pages not drawn by kboard, which has its own .kcol-line) ─────────────── */
.gw-col{background:rgba(255,255,255,.55);border:1px solid var(--line,#E1DCD7);border-radius:var(--r-panel,16px);padding:10px}
.gw-col h4{margin:0;font-family:var(--disp,inherit);font-size:var(--t-md,13.5px);font-weight:700}

/* ── a card you can open, in a row you can swipe ──────────────────────────────────────────────── */
.gw-deck{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gw-deck::-webkit-scrollbar{display:none}
.gw-post{flex:0 0 100%;scroll-snap-align:start;position:relative;overflow:hidden;border:0;text-align:left;cursor:pointer;font:inherit;color:#fff;
  border-radius:var(--r-card,14px);padding:14px 16px;display:grid;gap:8px;min-height:128px;background:linear-gradient(160deg,#2E3B55,#51466C 55%,#B0626B);transition:transform .2s}
.gw-post:hover{transform:translateY(-2px)}

@keyframes gwDrift{to{transform:translate(-6%,4%)}}
@keyframes gwDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gwGlint{0%{left:-70px}35%,100%{left:100%}}
@keyframes gwRise{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes gwPing{0%{box-shadow:0 0 0 0 rgba(189,36,36,.45)}70%{box-shadow:0 0 0 7px rgba(189,36,36,0)}100%{box-shadow:0 0 0 0 rgba(189,36,36,0)}}
@keyframes gwAby{50%{background-position:100% 60%}}
@media (prefers-reduced-motion:reduce){
  .gw-head::before,.gw-head::after,.gw-line,.gw-line::after,.gw-stop.on::before,.gw-seg.done::after,.gw-aby,.gw-enter .gw-card{animation:none!important}
}

/* ── a board drawn by kboard(), in this design: add class gw-board to its host ───────────────── */
.gw-board .kcol{background:rgba(255,255,255,.55);border-radius:var(--r-panel,16px);padding:10px}
.gw-board .kcol-h{text-transform:none;letter-spacing:0;font-family:var(--disp,inherit);font-size:var(--t-md,13.5px);font-weight:700;padding:11px 4px 4px;color:var(--ink,#080706)!important}
.gw-board .kcol-h .kn{font-weight:500;border:1px solid var(--line,#E1DCD7);background:var(--cream-2,#F3EEE8);color:var(--ink-soft,#3F3A35)}
.gw-board .kcol-s{margin:0 4px 8px}
.gw-board .kcard{border-radius:var(--r-md,12px)}
.gw-board .kcard .kt{font-family:var(--disp,inherit);font-weight:600}
.gw-board .kcard .kpill{display:inline-block;font-size:10px;font-weight:500;line-height:1.7;border-radius:999px;padding:0 7px;white-space:nowrap}
/* A chip bar handed into a gw-bar (teamChipBar draws its own .tablebar) sits flat inside it. */
.gw-bar .tablebar{border:0;padding:0;margin:0;background:none;box-shadow:none}