/* Hottub CRM.
   Color carries one meaning here: temperature. The ramp runs from coral through sun and aqua to
   deep water, taken from Hottub's own palette. Everything else stays cool and quiet so that
   heat is the first thing you read. */

@font-face{font-family:"Reddit Sans";src:url(reddit-sans-949ee48989.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fraunces-soft-d8d6a5fce9.woff2) format("woff2");font-weight:400 650;font-style:normal;font-display:swap}

:root{
  --font-ui:"Reddit Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-name:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;

  /* Water */
  /* Hottub's wordmark, in the guide's inks */
  --brand-ink:#0c3b46;
  --rail-brand:#fdf8f3;

  --page:#eef6f7;
  --paper:#ffffff;
  --well:#f4f9fa;
  --ink:#14201f;
  --ink-2:#2f403e;
  --ink-3:#51676a;
  --line:#d4e3e6;
  --line-2:#e5eff1;

  /* The rail is the deep end */
  --rail:#0c3b46;
  --rail-2:#124a57;
  --rail-3:#1a5a68;
  --rail-ink:#eaf6f8;
  --rail-dim:#a9cdd4;

  /* Action */
  --water:#115e6e;
  --water-2:#0c4b58;
  --water-soft:#dcf0f3;
  --on-water:#ffffff;
  --link:#0f6577;
  --focus:#1b8a9e;

  /* Temperature */
  --hot:#f26d4a;
  --warm:#ffb84d;
  --tepid:#6fc4d2;
  --cold:#115e6e;
  --none:#9bb0b3;

  /* Words about urgency */
  --late:#b3361c;
  --late-soft:#fdeee8;
  --now:#a45a00;
  --ok:#17795a;

  --shadow-1:0 1px 2px rgba(12,59,70,.06);
  --shadow-2:0 12px 32px -12px rgba(12,59,70,.28);
  --shadow-3:0 28px 64px -24px rgba(8,40,50,.5);
  --r-s:8px;
  --r-m:12px;
  --r-l:18px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --page:#081c23;--paper:#0e2730;--well:#0b222a;--ink:#e8f3f4;--ink-2:#c6d9db;--ink-3:#94acb0;--line:#21424d;--line-2:#183540;
    --brand-ink:#aee0e8;--rail-brand:#aee0e8;
    --rail:#06161c;--rail-2:#0d2830;--rail-3:#14363f;--rail-ink:#e8f3f4;--rail-dim:#8fb0b6;
    --water:#6fc4d2;--water-2:#8dd3de;--water-soft:#123845;--on-water:#06202a;--link:#83d1dd;--focus:#6fc4d2;
    --hot:#ff8a6a;--warm:#ffc777;--tepid:#7fd0de;--cold:#3a8fa3;--none:#6b8287;
    --late:#ff9d80;--late-soft:#3a1d15;--now:#ffc777;--ok:#67d3ad;
    --shadow-1:0 1px 2px rgba(0,0,0,.3);--shadow-2:0 12px 32px -12px rgba(0,0,0,.7);--shadow-3:0 28px 64px -24px rgba(0,0,0,.85);
    color-scheme:dark;
  }
}
:root[data-theme=dark]{
  --page:#081c23;--paper:#0e2730;--well:#0b222a;--ink:#e8f3f4;--ink-2:#c6d9db;--ink-3:#94acb0;--line:#21424d;--line-2:#183540;
  --brand-ink:#aee0e8;--rail-brand:#aee0e8;
  --rail:#06161c;--rail-2:#0d2830;--rail-3:#14363f;--rail-ink:#e8f3f4;--rail-dim:#8fb0b6;
  --water:#6fc4d2;--water-2:#8dd3de;--water-soft:#123845;--on-water:#06202a;--link:#83d1dd;--focus:#6fc4d2;
  --hot:#ff8a6a;--warm:#ffc777;--tepid:#7fd0de;--cold:#3a8fa3;--none:#6b8287;
  --late:#ff9d80;--late-soft:#3a1d15;--now:#ffc777;--ok:#67d3ad;
  --shadow-1:0 1px 2px rgba(0,0,0,.3);--shadow-2:0 12px 32px -12px rgba(0,0,0,.7);--shadow-3:0 28px 64px -24px rgba(0,0,0,.85);
  color-scheme:dark;
}

/* The ramp, as steps a class can name. */
.heat-6{--h:var(--hot)}
.heat-5{--h:color-mix(in srgb,var(--hot) 60%,var(--warm))}
.heat-4{--h:var(--warm)}
.heat-3{--h:color-mix(in srgb,var(--warm) 45%,var(--tepid))}
.heat-2{--h:var(--tepid)}
.heat-1{--h:color-mix(in srgb,var(--tepid) 50%,var(--cold))}
.heat-0{--h:var(--cold)}
.heat-n{--h:var(--none)}

*,*::before,*::after{box-sizing:border-box}
/* Anything scrolled into view (a focused field, a search result) stops below the sticky top bar. */
html{-webkit-text-size-adjust:100%;font-synthesis:none;background:var(--page);scroll-padding-top:76px}
body{margin:0;font:400 15px/1.5 var(--font-ui);color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,fieldset,figure{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
legend{padding:0}
h1,h2,h3{font-weight:600;line-height:1.25;color:var(--ink);text-wrap:balance}
small{font-size:13px;color:var(--ink-3)}
a{color:var(--link)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
hr{border:0;border-top:1px solid var(--line);margin:6px 0}
kbd{font:inherit;font-size:11.5px;padding:1px 6px;border-radius:5px;border:1px solid var(--line);color:var(--ink-3);background:var(--well)}
code{font-size:13px;background:var(--well);padding:1px 5px;border-radius:5px;border:1px solid var(--line-2);overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
main:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* A sign-up field only scripts fill in: off the page, out of the tab order and hidden from assistive technology. */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.icon{flex:none;display:block}
.preserve{white-space:pre-wrap;overflow-wrap:anywhere}
.quiet{color:var(--ink-3)}
.skip{position:fixed;top:10px;left:10px;z-index:100;background:var(--water);color:var(--on-water);padding:10px 16px;border-radius:var(--r-s);transform:translateY(-200%)}
.skip:focus{transform:none}
.name,.name-link{font-family:var(--font-name)}
.name-link{color:inherit;text-decoration:none;font-weight:500}
.name-link:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.text-link{display:inline-flex;align-items:center;gap:3px;color:var(--link);font-size:14px;text-decoration:none;font-weight:500}
.text-link:hover{text-decoration:underline;text-underline-offset:2px}
.text-link .icon{width:15px;height:15px}

/* Figures that line up in columns */
.pr-value,.column-sum,.stage-line,.deal-line,.due{font-variant-numeric:tabular-nums}

/* Words about time */
.tone-late{color:var(--late)}
.tone-now{color:var(--now)}
.tone-soon{color:var(--ink-2)}
.tone-later{color:var(--ink-3)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:7px 14px;border-radius:var(--r-s);font-weight:600;font-size:14px;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color .12s,border-color .12s,transform .08s;border:1px solid transparent}
.btn .icon{width:17px;height:17px}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--water);color:var(--on-water)}
.btn-primary:hover{background:var(--water-2)}
.btn-quiet{background:var(--paper);border-color:var(--line);color:var(--ink)}
.btn-quiet:hover{border-color:var(--water);background:var(--well)}
.btn-text{min-height:32px;padding:4px 6px;color:var(--link);font-weight:500}
.btn-text:hover{text-decoration:underline;text-underline-offset:2px}
.btn-danger{background:var(--late);color:#fff}
.btn-sm{min-height:32px;padding:5px 10px;font-size:13px}
.btn-block{display:flex;width:100%;min-height:46px;font-size:15px}
.btn-inline{display:inline;min-height:0;padding:0;font-size:inherit;white-space:normal;text-decoration:underline;text-underline-offset:2px}
.btn-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-s);color:var(--ink-2);text-decoration:none}
.btn-icon:hover{background:var(--water-soft)}
form[aria-busy=true] [type=submit],.btn[aria-busy=true]{color:transparent;position:relative;pointer-events:none}
form[aria-busy=true] [type=submit]::after,.btn[aria-busy=true]::after{content:"";position:absolute;inset:0;margin:auto;width:17px;height:17px;border:2px solid var(--on-water);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn-quiet[aria-busy=true]::after{border-color:var(--water);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}

/* Fields */
.field{display:block;margin-bottom:14px;min-width:0}
.field-label{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.field-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.field-link{font-size:13px;color:var(--link);text-decoration:none}
.field-link:hover{text-decoration:underline}
.field-hint{display:block;font-size:13px;color:var(--ink-3);margin:-6px 0 14px}
.field-error{display:block;color:var(--late);font-size:13px;margin-top:4px}
.field-error:empty{display:none}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{display:block;width:100%;min-height:42px;padding:9px 12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);font-size:15px;transition:border-color .12s,box-shadow .12s}
textarea{resize:vertical;line-height:1.45}
select{appearance:none;padding-right:32px}
.select-wrap{display:block;position:relative}
.select-wrap::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:rotate(45deg);pointer-events:none}
input:not([type=checkbox]):not([type=radio]):not([type=file]):hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--water) 45%,var(--line))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent)}
[aria-invalid=true]{border-color:var(--late)!important}
::placeholder{color:var(--ink-3);opacity:.8}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid-full{grid-column:1/-1}
.check,.radio{display:flex;gap:9px;align-items:flex-start;padding:5px 0;font-size:14px;cursor:pointer}
.check input,.radio input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--water);flex:none}
.check small,.radio small{display:block}
.picker{margin:0 0 14px}
.picker legend,.consent-share legend{font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.picker-list{max-height:210px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-s);padding:6px 10px;background:var(--well)}
.form-error{padding:10px 12px;border-radius:var(--r-s);background:var(--late-soft);color:var(--late);font-size:14px;margin-bottom:14px}
.form-error[hidden]{display:none}
.form-notice{padding:10px 12px;border-radius:var(--r-s);background:var(--water-soft);color:var(--ink-2);font-size:14px;margin-bottom:14px}
.pw{position:relative}
.pw input{padding-right:64px}
.pw-toggle{position:absolute;right:4px;top:5px;font-size:13px}
.code-input{text-align:center;font-size:26px!important;letter-spacing:.32em;font-weight:600;padding-left:.32em!important}
.file{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px dashed var(--line);border-radius:var(--r-s);background:var(--well);font-weight:600;font-size:14px;cursor:pointer;margin-bottom:12px}
.file:hover{border-color:var(--water)}
.file input{position:absolute;opacity:0;width:1px;height:1px}
.file:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.inline-form{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;margin:8px 0}
.inline-form .field{margin:0;flex:1;min-width:180px}

/* Chips and segments */
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{padding:5px 11px;min-height:32px;border-radius:99px;font-size:13.5px;color:var(--ink-3);font-weight:500;border:1px solid transparent}
.chip:hover{background:var(--water-soft);color:var(--ink)}
.chip.is-on{background:var(--water-soft);color:var(--ink);border-color:color-mix(in srgb,var(--water) 30%,transparent);font-weight:600}
.segmented{display:inline-flex;padding:3px;gap:2px;border-radius:10px;background:var(--line-2)}
.segment{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:7px;color:var(--ink-3);text-decoration:none;font-size:13.5px;font-weight:600}
.segment .icon{width:16px;height:16px}
.segment.is-on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-1)}
.segmented-tabs{margin-bottom:18px}
.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;font-weight:600;background:var(--water-soft);color:var(--ink-2)}
.pill-soft{background:var(--line-2);color:var(--ink-3)}

/* Avatars take their ring from the relationship's temperature. */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;font:600 14px/1 var(--font-ui);color:var(--ink);background:color-mix(in srgb,var(--h,var(--none)) 26%,var(--paper));box-shadow:inset 0 0 0 2px var(--h,var(--none))}
.avatar.sm{width:30px;height:30px;font-size:12px}
.avatar.lg{width:68px;height:68px;font-size:22px}
.heat-dot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--h)}

/* ─── Sign-in ─────────────────────────────────────────────── */
.signin{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);min-height:100vh;min-height:100dvh;background:var(--paper)}
.signin-main{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:40px clamp(24px,5vw,64px) 24px}
.signin-column{width:100%;max-width:380px;margin:auto}
.signin-focused{grid-template-columns:minmax(0,1fr)}
.signin-focused .signin-column{max-width:460px}
.signin-column>.brand{margin-bottom:34px;color:var(--brand-ink);padding:0}
.signin-column>.brand .brand-crm{color:var(--ink-3)}
.signin-card h1{font:500 32px/1.15 var(--font-name);letter-spacing:-.01em;margin-bottom:6px}
.signin-card .lede{color:var(--ink-3);margin-bottom:22px}
.signin-card .lede strong{color:var(--ink);overflow-wrap:anywhere}
.signin-card form{margin-bottom:4px}
/* Waiting for the app to start: unavailable for a moment, but not worth a visible flicker. */
.signin-card .btn-primary[disabled]{opacity:1;cursor:progress}
.signin-continue{margin-bottom:6px}
.signin-or{text-align:center;color:var(--ink-3);font-size:13px;margin:12px 0}
.signin-choice h2{font:500 19px/1.25 var(--font-name);margin:0 0 8px}
.signin-choice .field-hint{margin-top:-4px}
.signin-alt{margin-top:18px;font-size:14px;color:var(--ink-2)}
.signin-alt a{font-weight:600;text-underline-offset:2px}
.signin-small{margin-top:10px;font-size:13px;color:var(--ink-3)}
.signin-small .btn-inline{color:var(--ink-3);font-weight:400;font-size:13px}
.signin-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:14px}
.signin-links .btn-text{padding:4px 0;font-size:14px}
.signin-foot{font-size:12.5px;color:var(--ink-3);text-align:center}
.invite{margin:14px 0 0;font-size:14px}
.invite summary{cursor:pointer;color:var(--ink-2);padding:4px 0;font-weight:500}
.invite .field{margin:8px 0 12px}
.invite .field-hint{margin-top:-4px}
.story{--paper:#0c3b46;--ink:#eaf6f8;--ink-3:#a9cdd4;--line:#2a6470;--none:#6f98a1;--tepid:#6fc4d2;--cold:#2a8297;position:relative;color:#d7ebef;background:#0c3b46;display:flex;align-items:center;overflow:hidden}
.story::before{content:"";position:absolute;inset:auto -10% -38% -10%;height:70%;background:radial-gradient(60% 60% at 26% 100%,rgba(242,109,74,.20),transparent 70%),radial-gradient(70% 60% at 80% 100%,rgba(111,196,210,.16),transparent 70%)}
.story-inner{position:relative;width:100%;max-width:680px;margin:auto;padding:48px clamp(28px,6vw,72px)}
.story h2{font:450 clamp(30px,3.4vw,46px)/1.12 var(--font-name);letter-spacing:-.012em;color:#f3fafb;margin-bottom:26px;max-width:15em}
.story .wl-story{display:block;width:100%;height:auto;margin:0 0 26px}
.story-points{display:grid;gap:13px;max-width:34em}
.story-points li{font-size:15px;line-height:1.5}
.story-points strong{display:block;color:#f3fafb;font-weight:600}
.story-foot{margin-top:24px;font-size:13.5px;color:#a9cdd4;max-width:34em}

/* Asking to connect */
.consent-about{margin-bottom:12px;color:var(--ink-2)}
.verified{display:inline-flex;align-items:center;gap:3px;margin-left:6px;color:var(--ok);font-size:13px;font-weight:600;vertical-align:middle}
.verified .icon{width:16px;height:16px}
.unverified{display:block;margin-top:8px;font-size:13px;color:var(--late)}
.consent-can{margin:0 0 8px;display:grid;gap:7px;font-size:14px}
.consent-can li{padding-left:22px;position:relative}
.consent-can li::before{content:"";position:absolute;left:3px;top:.45em;width:11px;height:6px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.consent-cannot{font-size:13.5px;color:var(--ink-3);margin-bottom:16px}
.consent-share{margin-bottom:12px}
.consent-picks{display:none;max-height:180px;overflow:auto;margin:4px 0 0 25px;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--well)}
.consent-share:has(input[value=selected]:checked) .consent-picks{display:block}
.consent-actions{display:grid;gap:8px;margin:14px 0 10px}

/* ─── Frame ───────────────────────────────────────────────── */
.frame{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.rail{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:6px;padding:16px 12px 12px;background:var(--rail);color:var(--rail-ink);overflow-y:auto}
.brand{display:inline-flex;align-items:baseline;gap:7px;padding:2px 8px 10px;color:inherit;text-decoration:none}
.brand-flame{color:var(--hot);margin-bottom:-1px}
.brand-word{display:block;width:auto;height:19px}
.rail .brand{color:var(--rail-brand)}
.brand-crm{font-size:12px;font-weight:600;color:var(--rail-dim)}
.ws{position:relative;margin-bottom:8px}
.ws-button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:var(--r-s);background:var(--rail-2);color:inherit;text-align:left}
button.ws-button:hover{background:var(--rail-3)}
.ws-button .icon{width:15px;height:15px;color:var(--rail-dim);margin-left:auto}
.ws-mark{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:7px;background:var(--rail-3);font-size:11.5px;font-weight:700}
/* A name gets two lines before anything is cut, then ends in an ellipsis; the button's title has
   all of it. One line cut short hid the end of most names in a rail this narrow. */
.ws-name{font-weight:600;font-size:13.5px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
.rail-nav{display:grid;gap:1px}
.nav-item{display:flex;align-items:center;gap:10px;min-height:38px;padding:7px 10px;border-radius:var(--r-s);color:var(--rail-dim);text-decoration:none;font-weight:500;font-size:14.5px;transition:background-color .12s,color .12s}
.nav-item .icon{width:19px;height:19px}
.nav-item:hover{background:var(--rail-2);color:var(--rail-ink)}
.nav-item.is-on{background:var(--rail-3);color:var(--rail-ink);font-weight:600}
.nav-item.is-on .icon{color:var(--warm)}
.nav-count{margin-left:auto;min-width:20px;padding:0 6px;border-radius:99px;background:var(--hot);color:#2a0d05;font-size:12px;font-weight:700;line-height:20px;text-align:center}
.rail-foot{margin-top:auto;display:grid;gap:6px}
.me{position:relative}
.me-button{display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;border-radius:var(--r-s);color:inherit}
.me-button:hover{background:var(--rail-2)}
.me-button .icon{width:15px;height:15px;color:var(--rail-dim);margin-left:auto}
.me-avatar{--h:var(--rail-3);background:var(--rail-3);color:var(--rail-ink);box-shadow:none}
.me-name{font-size:13.5px;font-weight:500;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
.popover{position:absolute;z-index:40;min-width:230px;padding:6px;border-radius:var(--r-m);background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-2);animation:pop .14s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.985)}}
.rail .popover{min-width:0}
.popover-ws{top:calc(100% + 6px);left:0;right:0}
.popover-me{bottom:calc(100% + 6px);left:0;right:0}
.popover-new{top:calc(100% + 6px);right:0}
.popover-more{bottom:calc(100% + 10px);right:6px}
.menu-item{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:6px 9px;border-radius:7px;color:var(--ink);text-decoration:none;font-weight:500;font-size:14px;background:none;border:0;justify-content:flex-start}
.menu-item .icon{width:17px;height:17px;color:var(--ink-3)}
.menu-item:hover{background:var(--water-soft)}
.menu-item.is-on .icon{margin-left:auto;color:var(--ok)}
.menu-item span{overflow:hidden;text-overflow:ellipsis}
.menu-who{padding:6px 9px 8px}
.menu-who strong,.menu-who small{display:block;overflow:hidden;text-overflow:ellipsis}
.theme{display:flex;gap:2px;padding:4px 9px}
.theme-option{display:flex;align-items:center;justify-content:center;flex:1;height:32px;border-radius:7px;color:var(--ink-3)}
.theme-option .icon{width:17px;height:17px}
.theme-option:hover{background:var(--water-soft)}
.theme-option.is-on{background:var(--water-soft);color:var(--ink)}

.stage{min-width:0;display:flex;flex-direction:column}
/* Opaque, so nothing scrolled beneath it shows through. Once the page moves, a hairline and a
   soft shadow say the bar is above the content; browsers without scroll timelines keep it flat. */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;min-height:60px;padding:11px clamp(16px,3vw,36px);background:var(--page);box-shadow:0 1px 0 transparent}
@supports (animation-timeline:scroll()){
  .bar{animation:bar-lift linear both;animation-timeline:scroll(root block);animation-range:0 24px}
}
@keyframes bar-lift{to{box-shadow:0 1px 0 var(--line-2),0 10px 22px -18px rgba(8,40,50,.45)}}
.finder{display:flex;align-items:center;gap:9px;flex:1;max-width:440px;min-height:38px;padding:6px 10px;border-radius:var(--r-s);background:var(--paper);border:1px solid var(--line);color:var(--ink-3);font-size:14px}
button.finder:hover{border-color:var(--water)}
.finder .icon{width:17px;height:17px}
.finder-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.new{position:relative}
.btn-new{padding-left:10px}
.bell-count{position:absolute;top:3px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--hot);color:#2a0d05;font-size:11px;font-weight:700;line-height:17px;text-align:center}
.stage main{flex:1;width:100%;max-width:1240px;padding:clamp(8px,1.4vw,14px) clamp(16px,3vw,36px) 64px;animation:settle .18s ease-out}
@keyframes settle{from{opacity:.6}}
.phone-tabs{display:none}

/* View headers */
.view-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.view-head h1{font:500 30px/1.15 var(--font-name);letter-spacing:-.01em}
.view-head p{color:var(--ink-3);margin-top:3px;max-width:62ch}
.view-actions{display:flex;gap:8px;flex-wrap:wrap}
.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:16px}
.filter{display:flex;align-items:center;gap:7px;margin-left:auto;min-width:220px;flex:0 1 300px;padding:0 10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink-3)}
.filter .icon{width:16px;height:16px}
.filter input{border:0!important;background:transparent!important;box-shadow:none!important;min-height:36px!important;padding:0!important;font-size:14px!important}
.filter:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent)}
.btn-sort{color:var(--ink-3);font-size:13.5px;font-weight:500}
.crumb{margin-bottom:10px}
.crumb .icon{width:15px;height:15px;margin-left:-3px}

.empty{padding:48px 24px;text-align:center;border:1px dashed var(--line);border-radius:var(--r-l);background:color-mix(in srgb,var(--paper) 55%,transparent)}
.empty h2{font:500 21px/1.2 var(--font-name);margin-bottom:5px}
.empty p{color:var(--ink-3);max-width:46ch;margin:0 auto}
.empty-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.banner{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 16px;margin-bottom:16px;background:var(--water-soft);border-radius:var(--r-m);color:var(--ink);text-decoration:none}
.banner p{color:var(--ink-3);font-size:14px}
.banner-review{justify-content:flex-start}
.banner-review:hover{background:color-mix(in srgb,var(--water-soft) 80%,var(--water))}
.banner-review>.icon:first-child{color:var(--water)}
.banner-review>.icon:last-child{margin-left:auto;width:17px;height:17px;color:var(--ink-3)}
.banner-key{align-items:flex-start;flex-wrap:wrap}
.key-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.key-row input{width:min(440px,70vw)!important;font-size:13px!important}
.fold{margin-top:14px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper)}
.fold summary{cursor:pointer;font-weight:600;font-size:14px}
.fold[open] summary{margin-bottom:8px}
.fold>p{margin-bottom:8px}

/* ─── Today ───────────────────────────────────────────────── */
.today{margin:0 0 16px}
.today-date{color:var(--ink-3);font-size:14px;margin-bottom:6px}
.brief{font:440 clamp(28px,3.1vw,40px)/1.16 var(--font-name);letter-spacing:-.012em;max-width:26em;color:var(--ink);text-wrap:pretty}
.brief-second{color:var(--ink-3)}
.brief-name{white-space:nowrap;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:color-mix(in srgb,var(--hot) 55%,var(--tepid));text-underline-offset:.13em}
.brief-name:hover{text-decoration-color:var(--ink)}
.steps{display:grid;gap:16px;margin-top:26px;max-width:640px}
.steps li{display:flex;gap:14px}
.step-n{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--water-soft);font-weight:700;font-size:14px;color:var(--ink)}
.steps h3{font:500 19px/1.25 var(--font-name)}
.steps p{color:var(--ink-3);margin:2px 0 8px;max-width:52ch}
.step-actions{display:flex;gap:8px;flex-wrap:wrap}

/* The waterline. Position says how warm; color says it again. */
.waterline{margin:0 0 22px}
.wl{display:block;width:100%;height:auto;overflow:visible}
.wl-narrow{display:none}
.wl-water{opacity:.13}
.wl-axis{stroke-width:3;stroke-linecap:round;opacity:.75}
.stop-hot{stop-color:var(--hot)}
.stop-warm{stop-color:var(--warm)}
.stop-tepid{stop-color:var(--tepid)}
.stop-cold{stop-color:var(--cold)}
.wl-b{cursor:pointer;outline:none}
.wl-face{fill:color-mix(in srgb,var(--h) 30%,var(--paper));stroke:var(--h);stroke-width:2.25;transition:stroke-width .12s}
.wl-i{fill:var(--ink);font:600 13px var(--font-ui);pointer-events:none}
.wl-due{fill:var(--hot);stroke:var(--paper);stroke-width:2}
.wl-tick{fill:var(--ink-3);font:500 13px var(--font-ui)}
.wl-narrow .wl-tick{font-size:11px}
/* A name appears in the row above the water, which no bubble enters. Sizes match the layout's
   own estimate in waterline.rs, so a name always stays on the drawing. */
.wl-name{fill:var(--ink);font:500 15px var(--font-name);opacity:0;pointer-events:none;paint-order:stroke;stroke:var(--page);stroke-width:4;stroke-linejoin:round;transition:opacity .1s}
.wl-narrow .wl-name{font-size:12px}
.wl-chip .wl-i{fill:var(--ink-2)}
a.wl-b:hover .wl-name,a.wl-b:focus-visible .wl-name{opacity:1}
a.wl-b:hover .wl-face,a.wl-b:focus-visible .wl-face{stroke-width:4}
.wl-more{font-size:13px;color:var(--ink-3);text-align:right}
.wl-invite{fill:var(--ink-2);font:500 15px var(--font-ui)}
.wl-invite-link .wl-invite{fill:var(--link);text-decoration:underline;text-underline-offset:3px}
.wl-invite-link:hover .wl-invite{text-decoration-thickness:2px}
/* One entrance: everyone rises to where they are. */
.is-entering .wl-rise{animation:rise .9s var(--ease) both}
.wl-story .wl-rise{animation:rise 1s var(--ease) both}
.d1 .wl-rise{animation-delay:50ms}.d2 .wl-rise{animation-delay:100ms}.d3 .wl-rise{animation-delay:150ms}.d4 .wl-rise{animation-delay:200ms}.d5 .wl-rise{animation-delay:250ms}.d6 .wl-rise{animation-delay:300ms}.d7 .wl-rise{animation-delay:350ms}
@keyframes rise{from{transform:translateY(46px);opacity:0}}

/* Reasons to reach out: who's gone quiet, and something new to say to them. */
.why-row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 10px;padding:11px 0;border-top:1px solid var(--line-2)}
.side-head+.why-row{border-top:0;padding-top:2px}
.why-text{min-width:0}
.why-who .name-link{display:block;font-size:15.5px;line-height:1.3;overflow-wrap:anywhere}
.why-who small{display:block;font-size:13px;line-height:1.35;color:var(--ink-3)}
.why-title{margin-top:5px;font-size:14.5px;line-height:1.35}
.why-headline{color:var(--link);font-weight:500;overflow-wrap:anywhere;text-decoration:none}
a.why-headline:hover{text-decoration:underline;text-underline-offset:2px}
.why-end{white-space:nowrap}
.why-headline .icon{display:inline-block;width:14px;height:14px;margin-left:3px;vertical-align:-2px}
.why-byline,.why-note small{font-size:13px;color:var(--ink-3)}
.why-byline{overflow-wrap:anywhere}
.why-actions{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:7px}
.why-now .side-note .text-link{font-size:13.5px}
.why-now .side-note .text-link .icon{width:14px;height:14px}
.why-note{margin-top:6px;max-width:70ch;font-size:14px;color:var(--ink-2)}
.why-settings>p{max-width:70ch}
.why-state{margin:10px 0 8px}
.today-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:28px;align-items:start}
.today-list,.list-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px}
.today-side{display:grid;gap:22px}
.side-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.side-head h2,.reviews h2,.settings-block h2{font:500 19px/1.2 var(--font-name)}
.side-block{min-width:0}
.side-figure{font:500 26px/1.2 var(--font-name);margin-bottom:8px}
.side-figure small{display:block;font:400 13px/1.4 var(--font-ui)}
.side-note{margin-top:8px;font-size:13.5px;color:var(--ink-3)}
.stage-line{display:grid;grid-template-columns:1fr auto;gap:0 8px;font-size:13.5px;margin-bottom:7px}
.meter{grid-column:1/-1;display:block;width:100%;height:5px;margin-top:3px}
.bar-track{fill:var(--line-2)}
.bar-fill{fill:var(--water)}
.step-card{padding:10px 0;border-top:1px solid var(--line-2)}
.step-card:first-of-type{border-top:0;padding-top:2px}
.step-card h3{font-size:14.5px}
.step-card p{font-size:13.5px;color:var(--ink-3);margin:2px 0 7px}
.recent{display:flex;gap:9px;padding:7px 0}
.recent>.icon{width:16px;height:16px;margin-top:3px;color:var(--ink-3)}
.recent p{font-size:14px;overflow-wrap:anywhere}

/* Follow-ups */
.group{display:flex;align-items:center;gap:7px;font:600 13.5px/1.2 var(--font-ui);color:var(--ink-2);margin:14px 0 4px}
.group:first-of-type,.side-head+.group{margin-top:4px}
.group-n{font:600 12px var(--font-ui);padding:1px 7px;border-radius:99px;background:var(--line-2);color:var(--ink-3)}
.task{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:start;padding:9px 0;border-top:1px solid var(--line-2)}
.group+.task{border-top:0}
.tick{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--water) 42%,var(--line));color:transparent;transition:background-color .15s,box-shadow .15s,color .15s}
.tick .icon{width:14px;height:14px;stroke-width:2.6}
.tick:hover{box-shadow:inset 0 0 0 2px var(--water);background:var(--water-soft);color:var(--water)}
.is-done .tick{background:var(--water);box-shadow:none;color:var(--on-water)}
.task-title{display:block;font-weight:600;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.task-title:hover{color:var(--link)}
.is-done .task-title{color:var(--ink-3);font-weight:500}
.task-meta{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:1px;font-size:13.5px;color:var(--ink-3)}
.repeat{display:inline-flex;align-items:center;gap:3px}
.repeat .icon{width:13px;height:13px}
.task-outcome{margin-top:4px;font-size:14px;color:var(--ink-2)}
.due{font-size:13.5px;font-weight:600;white-space:nowrap;line-height:1.6}
/* Finishing something answers with a ripple. */
.is-flash .tick{animation:fill .45s var(--ease)}
.is-flash .tick::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--water);animation:ripple .75s ease-out both}
.is-flash .tick::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--tepid);animation:ripple .9s .12s ease-out both}
@keyframes ripple{from{transform:scale(1);opacity:.75}to{transform:scale(3.1);opacity:0}}
@keyframes fill{from{transform:scale(.72)}}
.finish-title{font-weight:600;margin-bottom:12px}
.quick-fills{display:flex;flex-wrap:wrap;gap:5px;margin:-6px 0 12px}
.quick-fills .chip{background:var(--water-soft);color:var(--ink-2)}

/* ─── Relationships ───────────────────────────────────────── */
.people{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.people-head,.person-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.3fr) 90px;gap:14px;align-items:center;padding:10px 16px}
.people-head{padding-left:70px;font-size:12.5px;font-weight:600;color:var(--ink-3);background:var(--well);border-bottom:1px solid var(--line)}
.person-row{position:relative;grid-template-columns:40px minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.3fr) 90px;color:inherit;text-decoration:none;border-top:1px solid var(--line-2);transition:background-color .1s}
.people-head+.person-row{border-top:0}
.people-head{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.3fr) 90px}
.person-row:hover{background:var(--well)}
.pr-who,.pr-next{display:block;min-width:0}
.pr-who .name{display:block;font-size:16.5px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-who small,.pr-next small,.pr-warm small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-warm{display:flex;align-items:baseline;gap:7px;font-size:14px;font-weight:500;min-width:0}
.pr-warm .heat-dot{transform:translateY(-1px)}
.pr-warm small{font-weight:400}
.pr-next-title{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-none{color:var(--ink-3);font-size:13.5px}
.pr-next small[class^=tone-]{font-weight:500}
.pr-next .tone-late{color:var(--late)}
.pr-next .tone-now{color:var(--now)}
.pr-value{text-align:right;font-size:14px;font-weight:500}
.person-head{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:20px}
.person-title{flex:1;min-width:230px}
.person-title h1{font:500 34px/1.12 var(--font-name);letter-spacing:-.012em;overflow-wrap:anywhere}
.person-line{display:flex;flex-wrap:wrap;gap:2px 12px;color:var(--ink-3);margin-top:3px;font-size:14.5px}
.person-line a{color:inherit;text-underline-offset:2px}
.warm-note{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;margin-top:8px;font-size:14px;color:var(--ink-2)}
.warm-note .heat-dot{transform:translateY(-1px)}
.warm-note strong{font-weight:600}
.person-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr);gap:28px;align-items:start}
.person-side{display:grid;gap:22px;min-width:0}
.composer{padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);margin-bottom:16px;transition:border-color .12s,box-shadow .12s}
.composer:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 18%,transparent)}
.composer textarea{border:0!important;box-shadow:none!important;padding:4px!important;background:transparent!important;min-height:52px;resize:none}
.composer-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.composer-foot .field{margin:0;flex:0 1 160px;min-width:0}
.composer-foot select{width:100%;min-height:32px;padding-top:4px;padding-bottom:4px;font-size:13px;text-overflow:ellipsis}
.composer-foot .field-label{display:none}
.composer-foot .btn{margin-left:auto}
.kinds{display:flex;gap:2px;flex-wrap:wrap}
.kind{cursor:pointer}
.kind input{position:absolute;opacity:0;width:1px;height:1px}
.kind span{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:99px;color:var(--ink-3);font-size:13.5px;font-weight:500}
.kind span .icon{width:15px;height:15px}
.kind span:hover{background:var(--well)}
.kind input:checked+span{background:var(--water-soft);color:var(--ink);font-weight:600}
.kind input:focus-visible+span{outline:2px solid var(--focus);outline-offset:1px}
/* A note to self sits apart from the conversations: it isn't contact. */
.kind-aside{margin-left:4px;padding-left:6px;border-left:1px solid var(--line-2)}
.story-empty{padding:14px 2px}
.story-list,.timeline{position:relative}
.story-item{position:relative;display:flex;gap:11px;padding:9px 0}
.story-icon{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--paper);border:1px solid var(--line);color:var(--ink-3)}
.story-icon .icon{width:15px;height:15px}
.kind-outcome .story-icon{color:var(--ok)}
.story-item p{overflow-wrap:anywhere}
.story-item a{overflow-wrap:anywhere}
.story-item small{display:block;margin-top:1px}
.day{font:600 13.5px var(--font-ui);color:var(--ink-2);margin:14px 0 2px}
.day:first-child{margin-top:0}
.facts{display:grid;gap:5px;margin-bottom:8px}
.facts div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;font-size:14px}
.facts dt{color:var(--ink-3)}
.mini{font:600 13.5px var(--font-ui);color:var(--ink-2);margin:10px 0 2px}
.link-line{padding:6px 0;font-size:14.5px}
.link-line small{display:block}
.deal-line{display:flex;justify-content:space-between;gap:10px;width:100%;padding:8px 0;border-top:1px solid var(--line-2);font-weight:600;font-size:14.5px}
.deal-line small{display:block;font-weight:400}
.deal-line:hover{color:var(--link)}
.person-side .task{grid-template-columns:auto minmax(0,1fr) auto}

/* Map */
.map{display:grid;grid-template-columns:minmax(0,1fr) 280px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.map-canvas{position:relative;min-height:520px;background:var(--well)}
#relationship-network{display:block;width:100%;height:560px;cursor:grab;touch-action:none}
#relationship-network:active{cursor:grabbing}
.map-dot{fill:var(--line)}
.map-edge{stroke:var(--water);stroke-width:2;opacity:.55}
.map-edge.potential{stroke:var(--hot);stroke-dasharray:7 7;opacity:.8}
.map-node{cursor:pointer;outline:none}
.node-halo{fill:transparent;stroke:transparent;stroke-width:3;transition:fill .12s}
.node-face{fill:color-mix(in srgb,var(--h) 30%,var(--paper));stroke:var(--h);stroke-width:2.5}
.node-initials{fill:var(--ink);font:600 15px var(--font-ui);pointer-events:none}
.node-name{fill:var(--ink);font:500 14.5px var(--font-name);paint-order:stroke;stroke:var(--well);stroke-width:4;stroke-linejoin:round}
.node-company{fill:var(--ink-3);font:12.5px var(--font-ui);paint-order:stroke;stroke:var(--well);stroke-width:4;stroke-linejoin:round}
.map-node:hover .node-halo,.map-node:focus-visible .node-halo{fill:color-mix(in srgb,var(--h) 18%,transparent)}
.map-node.is-focus .node-halo{fill:color-mix(in srgb,var(--h) 26%,transparent);stroke:var(--h)}
.map-none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-3);pointer-events:none}
.map-zoom{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:4px;font-size:13px;color:var(--ink-3)}
.map-legend{position:absolute;right:12px;bottom:12px;display:flex;gap:12px;font-size:13px;color:var(--ink-3);background:color-mix(in srgb,var(--paper) 80%,transparent);padding:4px 10px;border-radius:99px}
.map-legend span{display:flex;align-items:center;gap:5px}
.map-legend i{display:block;width:20px;border-top:2.5px solid var(--water)}
.map-legend i.potential{border-top:2.5px dashed var(--hot)}
.map-side{padding:16px;border-left:1px solid var(--line);overflow:auto;max-height:560px}
.map-side h2{font:500 22px/1.2 var(--font-name);margin-bottom:6px}
.map-side p{font-size:14px;margin-bottom:8px}
.map-link{padding:10px 0;border-top:1px solid var(--line-2);margin-top:8px}
.map-link h3{font:500 15.5px var(--font-name);margin-top:3px}
.map-link p{margin:2px 0 4px;color:var(--ink-3)}
.map-summary{font-size:13px;color:var(--ink-3);margin-top:8px}
.row-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* ─── Pipeline ────────────────────────────────────────────── */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding-bottom:10px}
.board-closed{grid-template-columns:repeat(3,minmax(0,1fr))}
.board-closed .column{min-height:64px}
.board-label{font:600 13.5px var(--font-ui);color:var(--ink-3);margin:12px 0 6px}
.column{display:flex;flex-direction:column;min-width:0;min-height:260px;padding:8px;border-radius:var(--r-m);background:var(--line-2);transition:background-color .1s,box-shadow .1s}
.column-closed{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.column.is-drop{background:var(--water-soft);box-shadow:inset 0 0 0 2px var(--water)}
.column-head{display:flex;align-items:baseline;gap:6px;padding:3px 5px 8px}
.column-head h2{font:600 14px var(--font-ui)}
.column-n{font-size:12.5px;color:var(--ink-3)}
.column-sum{margin-left:auto;font-size:13px;color:var(--ink-3);font-weight:500}
.column-cards{display:grid;gap:7px;align-content:start;flex:1}
.deal{padding:10px 11px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-1);transition:box-shadow .12s,transform .12s,border-color .12s}
.deal[draggable=true]{cursor:grab}
.deal:hover{border-color:color-mix(in srgb,var(--water) 40%,var(--line));box-shadow:var(--shadow-2)}
.deal.is-dragging{opacity:.5;transform:rotate(1.2deg)}
.deal-title{display:block;font-weight:600;font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
.deal-title:hover{color:var(--link)}
.deal-sub{display:flex;justify-content:space-between;gap:8px;margin-top:2px;font-size:14px;color:var(--ink-2)}
.deal-value{font:500 15px var(--font-name);white-space:nowrap}
.deal-next{margin-top:5px;font-size:13.5px;color:var(--ink-3);overflow-wrap:anywhere}
.deal-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:7px}
.deal-foot .due{font-size:13px}
.deal-move{position:relative;opacity:0;transition:opacity .12s}
.deal:hover .deal-move,.deal:focus-within .deal-move{opacity:1}
.deal-move select{min-height:26px;width:auto;max-width:118px;padding:2px 6px;font-size:12px;border-radius:6px}
.deal .btn-block{margin-top:7px;min-height:32px;font-size:13px}

/* ─── Delivery ────────────────────────────────────────────── */
.ready{margin-bottom:18px}
.ready-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line-2)}
.ready-row strong{display:block}
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px;align-items:start}
.plan{padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l)}
.plan-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.plan-head h2{font:500 20px/1.2 var(--font-name)}
.plan-progress{margin:10px 0 2px}
.plan>.quiet,.plan>.inline-form{margin-top:8px}
.plan-progress .meter{height:6px;margin:0 0 3px}

/* ─── Next steps, reminders ───────────────────────────────── */
.step-row,.reminder{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line-2)}
.step-row:first-child,.reminder:first-child{border-top:0;padding-top:2px}
.step-row h2{font:600 15.5px/1.3 var(--font-ui)}
.step-row p{font-size:14px;color:var(--ink-3);margin:1px 0 2px;max-width:70ch}
.reminder{justify-content:flex-start;align-items:center}
.reminder>.icon{color:var(--hot)}
.reminder strong,.reminder small{display:block}
.reminder>div{flex:1}
.reminder.is-read>.icon{color:var(--ink-3)}

/* ─── Connections ─────────────────────────────────────────── */
.reviews{margin-bottom:22px}
.reviews h2{display:flex;align-items:center;gap:7px}
.reviews-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:12px;margin-top:10px}
.proposal{padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-1)}
.proposal header{margin-bottom:8px}
.proposal h3{font:500 18px var(--font-name);margin-top:4px}
.proposal-reason{font-size:14px;color:var(--ink-2);margin-bottom:10px}
.conn-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:28px;align-items:start}
.conn,.add-app{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line-2)}
.side-head+.conn,.side-head+.add-app{border-top:0}
.services{margin-top:30px}
.services h2{font:500 19px/1.2 var(--font-name);margin-bottom:12px}
.services-group{font:600 13.5px var(--font-ui);color:var(--ink-3);margin:18px 0 2px}
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));column-gap:28px}
.conn.is-off{opacity:.62}
.conn-mark{display:flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:10px;background:var(--water-soft);color:var(--water);font-size:13px;font-weight:700}
.conn-mark .icon{width:19px;height:19px}
.conn-main{flex:1;min-width:0}
.conn-main h3{display:flex;align-items:center;gap:3px;font:600 14.5px var(--font-ui);overflow-wrap:anywhere}
.conn-main p{font-size:13.5px;color:var(--ink-3)}
.reviewed{font-size:14px;padding:5px 0;overflow-wrap:anywhere}

/* ─── Import ──────────────────────────────────────────────── */
.import-steps{display:grid;gap:4px;max-width:760px}
.import-step{display:flex;gap:13px;padding:12px 0}
.import-step>div{flex:1;min-width:0}
.import-step h2{font:500 19px/1.5 var(--font-name);color:var(--ink-3)}
.import-step.is-on h2,.import-step.is-done h2{color:var(--ink)}
.import-step.is-on .step-n{background:var(--water);color:var(--on-water)}
.import-step.is-done .step-n{background:var(--water-soft);color:var(--water)}
.import-step>div>:not(h2){margin-top:8px}
.import-step:not(.is-on):not(.is-done) .step-n{background:var(--line-2);color:var(--ink-3)}
.table-wrap{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:14px}
th{position:sticky;top:0;text-align:left;font-weight:600;color:var(--ink-3);font-size:13px;background:var(--well);padding:7px 10px;border-bottom:1px solid var(--line)}
td{padding:7px 10px;border-bottom:1px solid var(--line-2);overflow-wrap:anywhere}
.import-confirm{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.import-confirm .field{margin:0;flex:0 1 320px}
.import-more{max-width:760px;margin-top:10px}
.restore{margin-top:12px;padding:12px;border-radius:var(--r-m);background:var(--water-soft)}
.restore h3{margin-bottom:3px}
.restore .btn{margin-top:8px}

/* ─── Settings ────────────────────────────────────────────── */
/* The cards flow into two columns the browser balances, each card kept whole, so neither column
   runs on past the other; below two 380px columns there's one, in reading order. */
.settings-grid{columns:2 380px;column-gap:18px;max-width:1120px}
.settings-grid>.settings-block{break-inside:avoid;margin:0 0 18px}
.settings-block{padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l)}
.settings-block>h2{margin-bottom:8px}
.settings-block>p{max-width:62ch}
.join-codes{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.join-codes .side-head{margin-bottom:2px}
.join-codes .mini{margin:0}
.join-codes>.quiet{font-size:13.5px;margin:0 0 6px}
.code-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line-2)}
.code-row small{color:var(--ink-3)}
.code-none{font-size:13.5px}
.copy-row{display:flex;gap:8px;align-items:flex-start}
.copy-row input,.copy-row textarea{flex:1;min-width:0}
.copy-row .btn{flex:none;margin-top:4px}
.code-value{font-variant-numeric:tabular-nums;letter-spacing:.08em;font-weight:600}
.member{display:grid;grid-template-columns:minmax(0,1fr) 130px auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line-2)}
.member-fixed{grid-template-columns:minmax(0,1fr) auto}
.lookups,.link-notes{font-size:13.5px;color:var(--ink-3);overflow-wrap:anywhere}
.lookups{margin-top:10px}
.lookups .text-link{font-size:13.5px;margin-right:6px}
.link-notes{margin:0 0 12px}
.link-notes strong{color:var(--ink-2);font-weight:600}
.member .field{margin:0}
.member .field-label{display:none}
.member-who strong,.member-who small{display:block;overflow:hidden;text-overflow:ellipsis}
.revisions{margin-top:8px}
.revision{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line-2)}
.revision strong{display:block;font-weight:500;font-size:14px;overflow-wrap:anywhere}
.revisions-more{border-top:1px solid var(--line-2)}
.revisions-more>summary{padding:9px 0 3px;font-size:14px;font-weight:500;color:var(--link);cursor:pointer}
.revisions-more>.revisions{margin-top:2px}

/* ─── Sheets and the finder ───────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end;background:rgba(6,30,38,.36);animation:fade .14s ease-out}
.scrim-top{justify-content:center;align-items:flex-start;padding:min(14vh,110px) 16px 16px;background:rgba(6,30,38,.45);backdrop-filter:blur(2px)}
@keyframes fade{from{opacity:0}}
.sheet{display:flex;flex-direction:column;width:min(480px,100%);height:100%;background:var(--paper);box-shadow:var(--shadow-3);animation:slide .22s var(--ease)}
@keyframes slide{from{transform:translateX(26px);opacity:.4}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px 10px 20px;border-bottom:1px solid var(--line-2)}
.sheet-head h2{font:500 22px/1.2 var(--font-name)}
.sheet-form{display:flex;flex-direction:column;flex:1;min-height:0}
.sheet-body{flex:1;overflow-y:auto;padding:16px 20px}
.sheet-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line-2);background:var(--well)}
.sheet .revision{gap:6px}
.palette{display:flex;flex-direction:column;width:min(620px,100%);max-height:min(560px,76vh);background:var(--paper);border-radius:var(--r-l);box-shadow:var(--shadow-3);overflow:hidden;animation:pop .14s var(--ease)}
.palette-input{display:flex;align-items:center;gap:10px;padding:5px 16px;border-bottom:1px solid var(--line);color:var(--ink-3)}
.palette-input input{border:0!important;box-shadow:none!important;background:transparent!important;min-height:48px!important;padding:0!important;font-size:17px!important;color:var(--ink)}
.palette-results{overflow-y:auto;padding:6px;flex:1}
.palette-group{padding:8px 10px 3px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.palette-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 10px;border-radius:8px;font-size:15px}
.palette-item .icon{width:18px;height:18px;color:var(--ink-3)}
.palette-item small{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.palette-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-item.is-on{background:var(--water-soft)}
.palette-item.is-on .icon{color:var(--water)}
.palette-none{padding:26px;text-align:center;color:var(--ink-3)}
.palette-foot{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-3);background:var(--well)}
.palette-foot kbd{margin-right:2px}

/* Messages */
.toasts{position:fixed;left:50%;bottom:22px;z-index:80;display:grid;gap:8px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
.toast{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;background:var(--rail);color:var(--rail-ink);border-radius:var(--r-m);box-shadow:var(--shadow-3);font-size:14px;pointer-events:auto;animation:lift .22s var(--ease)}
.toast-error{background:var(--late);color:#fff}
:root[data-theme=dark] .toast-error{color:#2a0d05}
@keyframes lift{from{transform:translateY(10px);opacity:0}}
.toast-action{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;padding:2px 4px}

/* The first paint for someone already signed in */
.is-loading main{animation:none}
.ghost{background:var(--line-2);border-radius:var(--r-s);animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55}}
.rail .ghost{background:var(--rail-3)}
.ghost-line{display:block;flex:1;height:12px}
.ghost-date{width:150px;height:14px;margin-bottom:10px}
.ghost-title{width:min(620px,90%);height:40px;margin-bottom:8px}
.ghost-title.short{width:min(380px,60%);margin-bottom:22px}
.ghost-strip{height:168px;border-radius:14px;margin-bottom:22px}
.ghost-row{height:50px;margin-bottom:8px;max-width:760px}

/* The developer guide */
.guide{max-width:820px;margin:0 auto;padding:24px clamp(16px,4vw,32px) 40px}
.guide-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px}
.guide-top .brand{color:var(--brand-ink);padding:0}
.guide-top .brand-crm{color:var(--ink-3)}
.guide-intro h1{font:500 38px/1.12 var(--font-name);letter-spacing:-.012em;margin-bottom:8px}
.guide-intro p{font-size:17px;color:var(--ink-2);max-width:60ch}
.guide-nav{display:flex;flex-wrap:wrap;gap:4px 14px;margin:18px 0 8px;font-size:14px}
.guide section{margin-top:30px}
.guide h2{font:500 24px/1.2 var(--font-name);margin-bottom:8px}
.guide p{margin-bottom:10px;max-width:72ch}
.guide ol,.guide ul{display:grid;gap:7px;margin:0 0 12px;padding-left:20px;max-width:72ch}
.guide ol{list-style:decimal}
.guide ul{list-style:disc}
.guide table{margin:8px 0 12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);border-collapse:separate;border-spacing:0;overflow:hidden}
.guide td{vertical-align:top}
.guide tr:last-child td{border-bottom:0}
.guide td:first-child{white-space:nowrap}
@media (max-width:720px){.guide td:first-child{white-space:normal}}

/* ─── Sizes ───────────────────────────────────────────────── */
@media (max-width:1180px){
  .frame{grid-template-columns:70px minmax(0,1fr)}
  .rail{padding:14px 9px 10px;align-items:stretch}
  .brand{justify-content:center;padding:2px 0 10px}
  .rail .brand-word,.rail .brand-crm,.ws-name,.ws-button .icon,.nav-label,.me-name,.me-button .icon{display:none}
  .ws-button,.me-button{justify-content:center;padding:6px}
  .nav-item{justify-content:center;position:relative;padding:8px}
  .nav-count{position:absolute;top:2px;right:2px;min-width:17px;padding:0 4px;line-height:17px;font-size:11px}
  /* The narrow rail is too small for its menus, so they open over the page. */
  .rail{overflow:visible;z-index:30}
  .rail .popover{min-width:230px}
  .popover-ws,.popover-me{left:0;right:auto}
}
@media (max-width:1000px){
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board-closed{grid-template-columns:repeat(3,minmax(0,1fr))}
  .today-grid,.person-grid,.conn-grid{grid-template-columns:minmax(0,1fr)}
  .map{grid-template-columns:minmax(0,1fr)}
  .map-side{border-left:0;border-top:1px solid var(--line);max-height:none}
  #relationship-network{height:440px}
  .map-canvas{min-height:440px}
  .people-head,.person-row{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.2fr)}
  .person-row{grid-template-columns:40px minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.2fr)}
  .pr-value,.people-head span:last-child{display:none}
}
@media (max-width:900px){
  .signin{grid-template-columns:minmax(0,1fr);min-height:0}
  .signin-main{padding:30px 22px 24px}
  .signin-column>.brand{margin-bottom:24px}
  .story-inner{padding:34px 22px 44px;max-width:none}
}
@media (max-width:720px){
  .frame{display:block;padding-bottom:64px}
  .rail{display:none}
  .bar{padding:9px 14px;min-height:54px}
  html{scroll-padding-top:66px}
  .finder kbd{display:none}
  .btn-new span{display:none}
  .btn-new{padding:7px 9px}
  .stage main{padding:6px 14px 40px}
  .wl-wide{display:none}
  .wl-narrow{display:block}
  .brief{font-size:clamp(25px,7.4vw,32px)}
  .view-head h1{font-size:26px}
  .person-title h1{font-size:28px}
  .people-head{display:none}
  .person-row{grid-template-columns:40px minmax(0,1fr) auto;padding:10px 12px;gap:6px 11px}
  .pr-next{grid-column:2/-1}
  .pr-warm{justify-content:flex-end;text-align:right}
  .pr-warm small{display:block}
  .pr-none{display:none}
  .filter{flex:1 1 100%;margin-left:0}
  .board,.board-closed{grid-template-columns:minmax(0,1fr)}
  .column{min-height:0}
  .column:not(:has(.deal)){display:none}
  .deal-move{opacity:1}
  .member{grid-template-columns:minmax(0,1fr) auto}
  .member .field{grid-column:1;grid-row:2}
  .member .btn{grid-row:2}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .task{grid-template-columns:auto minmax(0,1fr)}
  .task .due{grid-column:2;margin-top:-4px}
  .sheet{width:100%;height:auto;max-height:92dvh;margin-top:auto;border-radius:var(--r-l) var(--r-l) 0 0;animation-name:rise-sheet}
  .scrim{align-items:flex-end}
  .scrim-top{align-items:flex-start;padding:10px}
  @keyframes rise-sheet{from{transform:translateY(40px);opacity:.3}}
  .toasts{bottom:78px}
  .phone-tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:4px 4px calc(4px + env(safe-area-inset-bottom));background:var(--rail);color:var(--rail-dim)}
  .phone-tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;padding:6px 2px;border-radius:9px;color:inherit;text-decoration:none;font-size:11px;font-weight:500;text-align:center}
  .phone-tab.is-on{color:var(--rail-ink);background:var(--rail-3)}
  .phone-tab.is-on .icon{color:var(--warm)}
  .phone-dot{position:absolute;top:5px;right:calc(50% - 15px);width:8px;height:8px;border-radius:50%;background:var(--hot)}
  .phone-more{position:relative}
  .popover-more{position:absolute}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  .rail,.bar,.phone-tabs,.toasts{display:none}
  .frame{display:block}
}