/* 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-text.is-danger{color:var(--late)}
.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}
/* A hint inside its field, as under a password, sits below the box instead of tucking up into it. */
.field>.field-hint{margin:5px 0 0}
.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}
/* A picture from the person's card in Contacts: their photo, or the emoji they chose. */
.avatar.has-photo{overflow:hidden;background:var(--paper)}
.avatar.has-photo img{width:100%;height:100%;object-fit:cover}
.avatar.is-emoji{font:400 22px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.avatar.sm.is-emoji{font-size:17px}
.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 max(clamp(24px,5vw,64px),env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(clamp(24px,5vw,64px),env(safe-area-inset-left))}
.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-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 max(clamp(28px,6vw,72px),env(safe-area-inset-right)) 48px max(clamp(28px,6vw,72px),env(safe-area-inset-left))}
.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 ───────────────────────────────────────────────── */
/* The page may run under a phone's rounded corners, notch and home bar (viewport-fit=cover), so
   the rail, the bars and the page keep their content inside the safe area. */
.frame{display:grid;grid-template-columns:calc(232px + env(safe-area-inset-left)) 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 calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));background:var(--rail);color:var(--rail-ink);overflow-y:auto}
/* Hottub's mark, the rainbow H, and the app's name beside it: the same in every Hottub app. */
.brand{display:inline-flex;align-items:center;gap:10px;padding:2px 8px 10px;color:inherit;text-decoration:none}
.brand .mark{flex:none;border-radius:8px}
.wordmark{font-family:var(--font-name);font-size:21px;font-weight:600;letter-spacing:-.012em;line-height:1.2}
.rail .brand{color:var(--rail-brand)}
.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 workspace's picture: its emoji, or its image fitted into the square on paper. */
.ws-mark.is-emoji{font:400 17px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.ws-mark.has-photo{background:var(--paper);overflow:hidden}
.ws-mark.has-photo img{width:100%;height:100%;object-fit:contain}
.ws-mark.sm{width:22px;height:22px;border-radius:6px;font-size:10px;color:var(--rail-ink)}
.ws-mark.sm.is-emoji{font-size:14px}
.ws-mark.lg{width:72px;height:72px;border-radius:18px;font-size:24px;color:var(--rail-ink)}
.ws-mark.lg.is-emoji{font-size:42px}
.ws-mark.lg.has-photo{box-shadow:inset 0 0 0 1px var(--line)}
.ws-item{gap:10px}
/* The Name and picture sheet. */
.ws-picture{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
.ws-picture-side{flex:1;min-width:0}
.ws-picture-title{font-weight:600;margin-bottom:6px}
.ws-picture-actions{display:flex;flex-wrap:wrap;gap:6px 8px;margin-bottom:10px}
.ws-picture .field-hint{margin:0}
.file-pick{position:relative;overflow:hidden;cursor:pointer}
.file-pick input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.emoji-pop{margin:0 0 16px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--page)}
.emoji-picker-host{display:block;width:100%;height:330px;--ecp-bg:var(--paper);--ecp-ink:var(--ink);--ecp-soft:var(--ink-3);--ecp-line:var(--line);--ecp-tint:var(--well);--ecp-accent:var(--water);--ecp-on-accent:var(--on-water);--ecp-radius:12px;--ecp-font:inherit}
/* 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-avatar.has-photo,.me-avatar.is-emoji{background:color-mix(in srgb,var(--rail-ink) 14%,var(--rail-3))}
.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-group{padding:6px 9px 2px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
/* A key that chooses a menu item, or saves a form, shown at its end; touch screens hide these. */
.menu-item .key-hint{margin-left:auto;font-size:11.5px}
.btn .key-hint{margin-left:2px;padding:0 5px;border:0;border-radius:4px;background:color-mix(in srgb,currentColor 16%,transparent);color:inherit;font-size:11.5px;line-height:18px}
.btn .key-hint:empty{display:none}
.key-other{display:none}
:root[data-keys=other] .key-apple{display:none}
:root[data-keys=other] .key-other{display:inline}
.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)}

/* The page column is at most 1240px and centred in whatever room the rail leaves, and the top bar
   keeps its finder and buttons over that same column, so a wide monitor doesn't strand the New
   button a screen away from the work. */
.stage{--gutter:clamp(16px,3vw,36px);--column:1240px;min-width:0;display:flex;flex-direction:column;padding-right:env(safe-area-inset-right)}
/* 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 max(var(--gutter),calc((100% - var(--column)) / 2 + var(--gutter)));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;min-width:0;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:var(--column);margin-inline:auto;padding:clamp(8px,1.4vw,14px) var(--gutter) 64px;animation:settle .18s ease-out}
@keyframes settle{from{opacity:.6}}
.phone-tabs{display:none}

/* View headers */
/* The way back to Today, above the title of a page reached from the foot of the sidebar. */
.back-link{display:inline-flex;align-items:center;gap:3px;margin:0 0 10px -8px;padding:6px 12px 6px 6px;border-radius:999px;color:var(--ink-2);font-weight:600;font-size:14.5px;text-decoration:none;transition:background .15s ease,color .15s ease}
.back-link .icon{width:18px;height:18px}
.back-link:hover{background:var(--well);color:var(--ink)}
.back-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.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. */
/* Three drawings of the same line, and the waterline shows the one that suits the room it has
   (not the window's width), so its labels stay a readable size from a phone to a monitor. */
.waterline{margin:0 0 22px;container-type:inline-size}
.wl{display:block;width:100%;height:auto;overflow:visible}
.wl-narrow,.wl-medium{display:none}
@container (max-width:539.98px){.waterline .wl-wide{display:none}.waterline .wl-narrow{display:block}}
@container (min-width:540px) and (max-width:879.98px){.waterline .wl-wide{display:none}.waterline .wl-medium{display:block}}
.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:12px}
.wl-story .wl-tick{font-size:17px}
/* 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-medium .wl-name{font-size:13.5px}
.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}
/* A text button beside a heading lines up with the plain links and figures below it. */
.side-head>.btn-text{padding-inline:6px;margin-right:-6px}
.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 140px;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)}
.person-main{display:grid;gap:24px;min-width:0}
.person-plans .side-head,.person-story .side-head{margin-bottom:6px}
.person-plans>.quiet{font-size:14px}
.story-empty{padding:18px 16px;border:1px dashed var(--line);border-radius:var(--r-l);color:var(--ink-3);text-align:center;font-size:14.5px}
.story-empty strong{color:var(--ink-2);font-weight:600}
.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}

/* Groups */
/* A few members' faces, overlapping, each ringed with their own warmth. */
.faces{display:flex;align-items:center;min-width:0}
.faces .avatar{margin-left:-4px;box-shadow:inset 0 0 0 2px var(--h,var(--none)),0 0 0 2px var(--paper)}
.faces .avatar:first-child{margin-left:0}
.faces small{margin-left:7px;font-weight:600}
.members{display:grid}
.member-line{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:4px 11px;align-items:center;padding:8px 0;border-top:1px solid var(--line-2);color:inherit;text-decoration:none}
.members li:first-child .member-line{border-top:0;padding-top:2px}
.member-line:hover .member-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.member-name{font-size:15.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-warm{display:flex;align-items:baseline;gap:6px;font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.member-warm .heat-dot{transform:translateY(-1px)}
.member-warm small{font-weight:400}
.group-chips{display:flex;flex-wrap:wrap;gap:6px}
.group-chip{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:4px 11px;border-radius:99px;background:var(--well);border:1px solid var(--line-2);color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.group-chip:hover{border-color:color-mix(in srgb,var(--water) 45%,var(--line))}
.composer-note{margin:6px 4px 0;font-size:13px;color:var(--ink-3)}
.story-group{color:inherit;text-underline-offset:2px}
.sheet-aside{margin-top:6px;padding-top:10px;border-top:1px solid var(--line-2)}
.sheet-aside .btn-text{color:var(--late)}

/* 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:13px 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;transition:opacity .12s}
/* With a pointer the move menu waits until the card is pointed at; a touch screen always shows it. */
@media (hover:hover){
  .deal-move{opacity:0}
  .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}
/* The list of keyboard shortcuts: what each does, with its keys at the end of the line. */
.keys-groups{display:grid;gap:18px}
.keys-group .mini{margin:0 0 4px}
.keys>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:6px 0;border-top:1px solid var(--line-2);font-size:14px}
.keys dt{order:1;flex:none;color:var(--ink-3);font-size:13px}
.keys dd{margin:0;color:var(--ink)}

/* 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 max(clamp(16px,4vw,32px),env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(clamp(16px,4vw,32px),env(safe-area-inset-left))}
.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-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:calc(70px + env(safe-area-inset-left)) minmax(0,1fr)}
  .rail{padding:14px 9px calc(10px + env(safe-area-inset-bottom)) calc(9px + env(safe-area-inset-left));align-items:stretch;z-index:30;overflow-x:hidden;scrollbar-width:none}
  .brand{justify-content:center;padding:2px 0 10px}
  .rail .wordmark,.ws-name,.ws-button .icon,.me-name,.me-button .icon{display:none}
  /* Each label stays for screen readers, and the pointer gets it as a tooltip. */
  .rail .nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .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}
  /* A short window, such as a phone on its side, scrolls this rail, so its menus open beside it,
     fixed to the window, where the rail's edge can't cut them off. */
  .rail .popover{position:fixed;left:calc(76px + env(safe-area-inset-left));right:auto;min-width:230px;max-height:calc(100dvh - 20px);overflow-y:auto}
  .rail .popover-ws{top:54px}
  .rail .popover-me{top:auto;bottom:calc(10px + env(safe-area-inset-bottom))}
}
@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 max(22px,env(safe-area-inset-right)) 24px max(22px,env(safe-area-inset-left))}
  .signin-column>.brand{margin-bottom:24px}
  .story-inner{padding:34px max(22px,env(safe-area-inset-right)) calc(44px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));max-width:none}
}
@media (max-width:720px){
  .frame{display:block;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .rail{display:none}
  .stage{--gutter:14px;padding-right:0}
  .bar{padding:9px max(var(--gutter),env(safe-area-inset-right)) 9px max(var(--gutter),env(safe-area-inset-left));min-height:54px}
  html{scroll-padding-top:66px}
  .finder kbd{display:none}
  .btn-new span{display:none}
  .btn-new{padding:7px 9px}
  /* New is a small icon here, so its menu lines up with the bar's right edge instead, which
     keeps it inside the narrowest phone. */
  .bar-actions{position:relative}
  .new{position:static}
  .stage main{padding:6px max(var(--gutter),env(safe-area-inset-right)) 40px max(var(--gutter),env(safe-area-inset-left))}
  .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}
  /* A phone can't show the whole map legibly, so it opens closer in (see the map's zoom), on a
     taller canvas, with the zoom buttons and the legend in a row beneath it rather than over it. */
  #relationship-network{height:min(64dvh,480px);flex:1 1 100%}
  .map-canvas{min-height:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:0 0 10px}
  .map-zoom,.map-legend{position:static;margin:0 10px}
  .map-legend{background:none;padding:0}
  .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}
  .sheet-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .scrim{align-items:flex-end}
  .scrim-top{align-items:flex-start;padding:10px}
  @keyframes rise-sheet{from{transform:translateY(40px);opacity:.3}}
  .toasts{bottom:calc(78px + env(safe-area-inset-bottom))}
  .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 calc(4px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(4px + env(safe-area-inset-left));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}
  /* Opens upward from More, and scrolls rather than running off the top of a short screen. */
  .popover-more{position:absolute;min-width:240px;max-height:calc(100dvh - 84px - env(safe-area-inset-bottom));overflow-y:auto}
}
@media (max-width:480px){
  /* A narrow phone gives a name the whole row, and says how warm underneath it. */
  .member-line{grid-template-columns:30px minmax(0,1fr)}
  .member-warm{grid-column:2}
  .person-row{grid-template-columns:40px minmax(0,1fr)}
  .pr-warm{grid-column:2;justify-content:flex-start;text-align:left}
  .pr-warm>span{display:flex;flex-wrap:wrap;column-gap:6px}
  .pr-warm small{display:inline}
}
/* The sign-in page's picture, wherever its panel is narrow (a phone, or the two-column page on a
   small tablet): initials would be specks, so the bubbles carry it, with labels big enough to read. */
.story-inner{container-type:inline-size}
@container (max-width:439.98px){
  .wl-story .wl-i{display:none}
  .wl-story .wl-tick{font-size:26px}
}
/* ─── Touch ───────────────────────────────────────────────── */
/* A fingertip gets 44px to aim at, as Apple and Google ask, without changing what a mouse sees.
   Fields are 16px: below that an iPhone zooms the whole page in when one is touched. */
@media (pointer:coarse){
  :is(input,select,textarea):not(.code-input):not(#palette-input){font-size:16px!important}
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,.deal-move select,.composer-foot select{min-height:44px}
  .filter input{min-height:44px!important}
  .btn:not(.btn-inline),.finder,.nav-item,.ws-button,.me-button,.menu-item,.palette-item,.file,.group-chip,.member-line{min-height:44px}
  .btn:not(.btn-inline),.chip{min-width:44px}
  .btn-sm:not(.btn-inline),.chip,.segment,.kind span{min-height:40px}
  .btn-icon,.theme-option{min-width:44px;height:44px}
  .check,.radio,.invite summary,.fold summary,.revisions-more>summary{padding-block:12px}
  .guide-nav a{padding:12px 8px;margin:0 -8px;min-width:44px;text-align:center}
  /* Small controls reach a little past their edges: 40px to the eye, 44px to a finger. */
  .btn-sm,.chip,.segment,.kind{position:relative}
  .kind{display:inline-flex}
  .btn-sm::before,.chip::before,.segment::before,.kind::before{content:"";position:absolute;inset:-3px 0}
  /* A whole follow-up row opens it, and a whole deal card opens the deal, the way a person's
     row already does; the ring, the person and the card's own controls sit above that. */
  .task-title,.deal-title{position:static}
  .deal{position:relative}
  .task-title::before,.deal-title::before{content:"";position:absolute;inset:0}
  .task .tick,.task .name-link,.task-outcome a,.deal .name-link,.deal-move,.deal .btn{position:relative;z-index:1}
  /* Links set in text take a taller tap than their line, reaching further where nothing else
     is close: down from a person's name, up from a field's link, which has its box below. */
  .name-link,.text-link,.field-link,.brand,.btn-inline,.person-line a{position:relative}
  .text-link::before,.brand::before,.person-line a::before{content:"";position:absolute;inset:-12px -4px}
  .name-link::before{content:"";position:absolute;inset:-2px -4px -12px}
  .field-link::before{content:"";position:absolute;inset:-18px -4px -4px}
  .btn-inline::before{content:"";position:absolute;inset:-13px -2px}
  /* The ring that finishes a follow-up looks the same, inside a clear border a finger can hit. */
  .tick{width:44px;height:44px;margin:-9px -10px -10px;border:10px solid transparent;background-clip:padding-box}
}
@media (hover:none){
  /* Nothing here has keys to press, so the hints about them go. */
  .finder kbd,.palette-foot,.key-hint,.for-keys{display:none}
}

@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}
}