/* Samlify workspace, local pilot. Tokens from DESIGN.md. One calm
   conversation in the visual language of the landing Example: a white panel,
   Samlify's mark and name, soft bubbles, one proposal card with the 03
   gradient edge and one ink button. Keyboard focus is neutral; the four 03
   stops live in the mark, gradient edges and the glow behind the conversation; 03 yellow marks warnings. */
:root{
  --bg:#FFFFFF; --paper:#FDFCFA; --surface:#F3F1EC; --surface-hover:#EAE7DF;
  --ink:#1F1E1B; --ink-muted:#78746B; --ink-faint:#B6B1A6;
  --border:#E4E0D7; --border-hover:#CFC9BC; --divider:#F0EDE6;
  --accent:#6A3FD6; --accent-hover:#5631B8; --accent-soft:#F3EFFD; --signal:#6A3FD6;
  --ok:#28734F; --ok-soft:#EAF3EE; --warn:#6E5200; --warn-soft:#FEF6D6; --warn-dot:#E6B92A; --danger:#A82A63;
  --g1:#F8D95B; --g2:#EE8CC2; --g3:#8554E7; --g4:#4D97EF;
  --grad:linear-gradient(115deg,var(--g1),var(--g2) 38%,var(--g3) 72%,var(--g4));
  --r-sm:8px; --r:12px; --r-card:26px; --r-panel:32px;
  --sh-soft:0 2px 6px rgba(31,30,27,.03);
  --sh-med:0 .8rem 1.2rem rgba(31,30,27,.04), 0 1.6rem 3.2rem rgba(31,30,27,.04);
  --ring:0 0 0 1px rgba(31,30,27,.06);
  --ease:cubic-bezier(0,0,.2,1);
  --top-h:72px; --page:760px; --read:768px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:16px/1.5 var(--font);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-weight:500;margin:0}
p,ol,ul{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
a,button,summary,[tabindex]{-webkit-tap-highlight-color:transparent}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--ink-muted);outline-offset:3px}
.skip{position:absolute;left:12px;top:-80px;z-index:40;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}

/* ---------- mark ---------- */
.mark{width:32px;height:32px;flex:none;display:block}
.mark.work{width:18px;height:18px;color:currentColor}
.mark.work path{transform-box:view-box;transform-origin:56px 56px;animation:blade 1300ms var(--ease) infinite}
.mark.work>g>g:nth-child(1) path,.mark.work>g>g:nth-child(5) path{animation-delay:0ms}
.mark.work>g>g:nth-child(3) path,.mark.work>g>g:nth-child(7) path{animation-delay:150ms}
.mark.work>g>g:nth-child(2) path,.mark.work>g>g:nth-child(6) path{animation-delay:300ms}
.mark.work>g>g:nth-child(4) path,.mark.work>g>g:nth-child(8) path{animation-delay:450ms}
@keyframes blade{0%,100%{transform:scale(1);opacity:1}30%{transform:scale(.8);opacity:.36}55%{transform:scale(1);opacity:1}}
/* Samlify at work: the exact mark turns while one bright blade runs round it. */
.mark.live{animation:turn 2.8s linear infinite}
.mark.live .blade{animation:wave 1.2s linear infinite}
.mark.live g>g:nth-child(2) .blade{animation-delay:-1.05s}.mark.live g>g:nth-child(3) .blade{animation-delay:-.9s}
.mark.live g>g:nth-child(4) .blade{animation-delay:-.75s}.mark.live g>g:nth-child(5) .blade{animation-delay:-.6s}
.mark.live g>g:nth-child(6) .blade{animation-delay:-.45s}.mark.live g>g:nth-child(7) .blade{animation-delay:-.3s}
.mark.live g>g:nth-child(8) .blade{animation-delay:-.15s}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes wave{0%{opacity:1}100%{opacity:.18}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- shell: a quiet sidebar beside one main column ----------
   From 960px the sidebar is part of the page (the person can hide it); below
   that it is a drawer behind Menu. The main column has a slim top bar, then
   the page. */
.shell{min-height:100vh;min-height:100dvh;display:flex}
.shell.is-chat{height:100vh;height:100dvh}
.main-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.shell.is-chat .main-col{min-height:0}
#main:focus{outline:none}
.ico{width:20px;height:20px;flex:none}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:none;color:var(--ink-muted);cursor:pointer;transition:background-color .12s var(--ease),color .12s var(--ease)}
.icon-btn:hover{background:var(--surface);color:var(--ink)}
.icon-btn .ico{width:20px;height:20px}
.lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:44px;flex:none;border-radius:12px}
.lockup .mark{width:26px;height:26px}
.lockup .word{font-size:20px;font-weight:600;letter-spacing:-.028em;line-height:1}

.side{flex:none;position:sticky;top:0;width:256px;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:8px 10px 10px;background:var(--paper);border-right:1px solid var(--divider)}
/* Only the middle scrolls; the head and Profile at the foot stay where they are. */
.side-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:0 -4px;padding:0 4px 8px}
/* New chat is a place like the others: a row, grey only for a new conversation. */
.side-new{flex:none;width:100%;margin:0 0 2px;border:0;background:none;text-align:left;cursor:pointer;font-family:inherit}
.side-new[aria-disabled="true"],.side-new[aria-disabled="true"]:hover{background:none;color:var(--ink-faint);cursor:default}
.side-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding-left:10px;margin-bottom:16px}
.side-nav{flex:none;display:flex;flex-direction:column;gap:2px}
.side-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;text-decoration:none;color:var(--ink);font-size:15px;font-weight:500;transition:background-color .12s var(--ease)}
.side-link .ico{width:19px;height:19px;color:var(--ink-muted);transition:color .12s var(--ease)}
.side-link:hover{background:var(--surface)}
.side-link.on{background:var(--surface)}
.side-recent{flex:none;margin-top:24px;display:flex;flex-direction:column;min-width:0}
.side-recent h2{font-size:13px;line-height:20px;font-weight:600;color:var(--ink-muted);padding:0 12px 4px}
.side-recent ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
/* A saved conversation: its button and, beside it, its three dots. */
.side-row{position:relative;display:flex;align-items:center;min-width:0;border-radius:12px;transition:background-color .12s var(--ease)}
.side-row.on,.side-row:hover,.side-row.open{background:var(--surface)}
.side-recent-link{flex:1 1 auto;display:flex;align-items:center;gap:6px;min-width:0;min-height:44px;padding:0 4px 0 12px;border:0;border-radius:12px;background:none;font:inherit;font-size:14px;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer}
.side-recent-t{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* The conversation on screen has a persistent grey row and stronger name. */
.side-recent-link.on{font-weight:600}
.side-recent-link:focus-visible{outline:none;background:var(--surface-hover)}
.side-recent-link[aria-disabled="true"]{color:var(--ink-muted);cursor:default}
.pin-mark{display:inline-flex;flex:none;color:var(--ink-muted)}
.pin-mark .ico{width:14px;height:14px}
.row-more{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:none;color:var(--ink-muted);cursor:pointer;opacity:0;transition:opacity .12s var(--ease),background-color .12s var(--ease)}
.row-more .ico{width:20px;height:20px}
.row-more .ico path{stroke-width:2.6}
.row-more:hover{background:var(--surface-hover);color:var(--ink)}
.row-more:focus-visible{outline-offset:-2px}
.side-row:hover .row-more,.side-row:focus-within .row-more,.side-row.open .row-more{opacity:1}
/* No hover on a touch screen: the dots are always there. */
@media (hover:none){.row-more{opacity:1}}
.row-menu{position:absolute;z-index:70;top:calc(100% + 4px);right:0;width:200px;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:16px;background:var(--bg);box-shadow:var(--ring),var(--sh-med)}
.menu-item.danger,.menu-item.danger .ico{color:var(--danger)}
.rename-box{width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:var(--surface);color:var(--ink);caret-color:var(--ink);font:inherit;font-size:14px}
.rename-box:focus{outline:none;box-shadow:none;background:var(--surface-hover)}
/* Profile: at the foot of the sidebar, or in the top bar where the sidebar is not shown. */
.side-foot{flex:none;padding-top:8px;border-top:1px solid var(--divider)}
.profile{position:relative;min-width:0}
.profile-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 8px;border:0;border-radius:12px;background:none;color:var(--ink);font-size:15px;font-weight:500;text-align:left;cursor:pointer;transition:background-color .12s var(--ease)}
.profile-row{display:flex;align-items:center;gap:4px;min-width:0}
.profile-row>.profile{flex:1 1 auto}
.profile-row.is-top>.profile{flex:none}
.profile-btn:hover,.profile-btn[aria-expanded="true"]{background:var(--surface)}
.profile-btn.is-top{width:44px;min-height:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--ink-muted)}
.avatar .ico{width:18px;height:18px}
.profile-btn:hover .avatar,.profile-btn[aria-expanded="true"] .avatar{background:var(--bg)}
.profile-menu{position:absolute;z-index:70;left:0;right:0;bottom:calc(100% + 6px);display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:16px;background:var(--bg);box-shadow:var(--ring),var(--sh-med);animation:pop .15s var(--ease) both}
.profile-menu.is-top{left:auto;right:0;bottom:auto;top:calc(100% + 6px);width:220px}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--ink);font-size:15px;font-weight:500;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .12s var(--ease)}
.menu-item .ico{width:19px;height:19px;color:var(--ink-muted)}
.menu-item:hover,.menu-item:focus-visible{background:var(--surface)}
.menu-item:focus-visible{outline-offset:-2px}
.menu-who{margin:0;padding:8px 12px 4px;max-width:280px;color:var(--ink-muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* The drawer: over the page from the left, the page behind it dimmed and inert. */
.side.drawer{position:fixed;z-index:60;left:0;top:0;bottom:0;width:min(300px,86vw);height:auto;border-right:0;box-shadow:var(--sh-med),0 0 0 1px rgba(31,30,27,.06)}
.side.drawer.enter{animation:slide .22s var(--ease) both}
.side-scrim{position:fixed;inset:0;z-index:55;background:rgba(31,30,27,.28)}
.side.enter~.side-scrim{animation:fade .22s var(--ease) both}
@keyframes slide{from{transform:translateX(-100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

.top{flex:none;position:relative;z-index:10}
.top-in{height:56px;padding:0 16px 0 12px;display:flex;align-items:center;gap:4px}
.top .lockup{padding:0 6px}
.top-end{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.top-end .profile-row{flex:none;gap:0}
.pill-status{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:500;color:var(--ink-muted);min-width:0;transition:color .12s var(--ease),background-color .12s var(--ease)}
.pill-status:hover{color:var(--ink);background:var(--surface)}
.pill-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage{flex:1;min-width:0;width:100%;padding:16px 24px 96px}
.shell.is-chat .stage{min-height:0;display:flex;flex-direction:column;gap:12px;padding:0 24px 24px;overflow:auto}
.shell.is-chat .stage>.banner{flex:none;width:100%;max-width:var(--page);margin:0 auto}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;background:var(--ink-faint)}
.dot-ok{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.dot-warn{background:var(--warn-dot);box-shadow:0 0 0 1px rgba(31,30,27,.18),0 0 0 4px var(--warn-soft)}
.dot-idle{background:var(--ink-faint)}

/* ---------- controls ---------- */
.btn,.btn-quiet{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid transparent;background:var(--bg);color:var(--ink);font-weight:500;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;text-align:center;transition:background-color .12s var(--ease),border-color .12s var(--ease),transform .12s var(--ease)}
.btn{border-color:var(--border)}
.btn:hover{background:var(--surface);border-color:var(--border-hover)}
.btn:active{transform:scale(.98)}
.btn-ghost{background:transparent}
.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#000;border-color:#000}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-danger{color:var(--danger)}
.btn-lg{min-height:56px;padding:0 28px;font-size:17px}
.btn-sm{min-height:44px;padding:0 16px;font-size:14px}
.btn-quiet{border-color:transparent;background:none;color:var(--ink-muted);padding:0 14px}
.btn-quiet:hover{color:var(--ink);background:var(--surface)}
button[disabled]{opacity:.42;cursor:default;transform:none}
button[aria-busy="true"]{opacity:1}
[inert] button{opacity:.55}
.link{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-faint);text-underline-offset:3px;cursor:pointer;font-size:inherit;min-height:44px}
.link:hover{text-decoration-color:var(--ink)}
.row-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tag{display:inline-flex;align-items:center;min-height:24px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.3;background:var(--surface);color:var(--ink);vertical-align:middle}
.tag-ok{background:var(--ok-soft);color:var(--ok)}
.tag-warn{background:var(--warn-soft);color:var(--warn)}
.tag-acc{background:var(--accent-soft);color:var(--accent-hover)}
.fine{font-size:14px;color:var(--ink-muted);line-height:1.55}
.eyebrow{font-size:14px;font-weight:600;color:var(--ink-muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the room: a soft 03 glow behind one fixed panel ---------- */
.room{position:relative;flex:1 1 auto;min-height:0;width:100%;max-width:var(--page);margin:0 auto;display:flex;flex-direction:column}
.room.feed::before,.room.intent::before,.ob-main::before{content:'';position:absolute;z-index:0;pointer-events:none;inset:-24px -18% 8% -18%;
  background:radial-gradient(38% 46% at 18% 42%,rgba(238,140,194,.30),transparent 70%),radial-gradient(36% 44% at 84% 38%,rgba(133,84,231,.26),transparent 70%),radial-gradient(40% 40% at 52% 96%,rgba(77,151,239,.20),transparent 70%),radial-gradient(30% 30% at 40% 4%,rgba(248,217,91,.22),transparent 70%);
  filter:blur(40px)}
.panel{position:relative;z-index:1;display:flex;flex-direction:column;min-height:0;background:var(--bg);border-radius:var(--r-panel);box-shadow:var(--sh-med),0 0 0 1px rgba(31,30,27,.05);overflow:hidden}
.chat-panel{flex:1 1 auto;min-height:320px}
.panel-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px 12px;min-height:60px;padding:8px 16px 8px 28px;border-bottom:1px solid var(--divider);background:var(--paper)}
.panel-title{font-size:14px;line-height:24px;font-weight:600;color:var(--ink-muted)}
.panel-head .back+.panel-title{margin-right:auto}
.demo-banner{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 12px 6px 28px;border-bottom:1px solid var(--divider);background:var(--bg);font-size:14px;color:var(--ink-muted)}
.demo-banner .btn-quiet{margin-left:auto}
.banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 8px 8px 18px;border-radius:18px;background:var(--bg);box-shadow:var(--ring),var(--sh-soft);font-size:15px}
.banner .btn{margin-left:auto}
.banner-mark .mark{width:22px;height:22px}
.down-banner{background:var(--warn-soft);box-shadow:none;padding:12px 18px}
.stage>.mac-banner{width:100%;max-width:var(--page);margin:0 auto}
.shell:not(.is-chat) .stage>.banner{margin-bottom:24px}

/* The transcript keeps one height: new messages push older ones up, and the
   person can scroll back. The panel never grows. */
.msgs{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:28px 28px 32px;display:flex;flex-direction:column;gap:20px;
  scrollbar-width:thin;scrollbar-color:var(--border-hover) transparent;-webkit-mask-image:linear-gradient(transparent,#000 18px);mask-image:linear-gradient(transparent,#000 18px)}
.msgs>*{flex:none}
.msgs:focus{outline:none}
.msgs:focus-visible{outline:2px solid var(--ink-muted);outline-offset:-4px}
.msg{display:flex;gap:12px;align-items:flex-start;min-width:0;max-width:100%}
.msg-avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(31,30,27,.08),0 1px 3px rgba(31,30,27,.06)}
.msg-avatar .mark{width:22px;height:22px}
.msg-avatar.live .mark{width:24px;height:24px}
.msg.cont>.msg-avatar{visibility:hidden}
.msgs>.msg.cont,.msgs>section>.msg.cont{margin-top:-8px}
.msg-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.msg-who{font-size:14px;font-weight:600;line-height:20px;margin-top:8px}
/* Said in words while the mark turns, so the wait reads as work. */
.msg-status{font-size:15px;line-height:22px;color:var(--ink-muted)}
.msg-text{display:inline-block;max-width:100%;min-width:0;padding:12px 16px;border-radius:4px 18px 18px 18px;background:var(--surface);font-size:17px;line-height:25px;text-wrap:pretty;overflow-wrap:anywhere}
.msg-text.hint,.msg-text.note{background:var(--warn-soft)}
.msg-text.lead-note{background:none;padding:0 2px;color:var(--ink-muted);font-size:15px;line-height:22px}
.msg-you{justify-content:flex-end}
.msg-you .msg-text{border-radius:18px 4px 18px 18px;background:var(--ink);color:var(--paper);font-weight:500;max-width:80%}
.in{animation:rise .32s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg-pending{animation:rise .2s var(--ease) both}

/* Cards inside the conversation: the proposal has the 03 edge, the rest a hairline. */
.msgs .card{width:100%;padding:20px 22px 22px;border-radius:18px;border:1px solid var(--border);background:var(--bg);display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.msgs .card-grad,.msgs .opp.featured.is-ready,.msgs .opp.featured.idea[data-can="1"]{border:1.5px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad) border-box}
.card-t{font-size:22px;line-height:28px;font-weight:500;letter-spacing:-.004em;text-wrap:balance}
.card-p{font-size:16px;line-height:23px;color:var(--ink-muted);text-wrap:pretty}
.msgs .card .row-btns{margin-top:12px}

/* ---------- the proposal ---------- */
.opps{width:100%}
.opp{display:flex;min-width:0;transition:border-color .12s var(--ease),background-color .12s var(--ease)}
.opp.featured{flex-direction:column;align-items:flex-start}
.opp-body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%}
.opp-src{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink-muted);margin-bottom:4px;overflow-wrap:anywhere}
.arrow{color:var(--ink-faint)}
.opp-title{font-size:22px;line-height:28px;font-weight:500;letter-spacing:-.004em;text-wrap:balance}
.opp-p{font-size:16px;line-height:23px;color:var(--ink-muted);text-wrap:pretty}
.opp-meta{font-size:14px;color:var(--ink-muted);display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.opp-needs{display:flex;gap:10px;align-items:baseline;font-size:16px;line-height:23px;color:var(--ink)}
.opp-needs{color:var(--ink-muted)}
.opp-act{flex:none}
.opp.featured .opp-act{margin-top:14px}
.idea-why{color:var(--ink);font-size:15px}
.src{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-muted);min-width:0;font-weight:500}
.src-mark{width:20px;height:20px;border-radius:6px;background:var(--surface);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--ink);flex:none}
.quiet-list{list-style:none;margin:0;padding:0;width:100%;border-radius:18px;border:1px solid var(--border);background:var(--bg);overflow:hidden}
.opp.quiet{align-items:center;gap:16px;padding:14px 14px 14px 20px;border-top:1px solid var(--divider)}
.opp.quiet:first-child{border-top:0}
.opp.quiet .opp-title{font-size:17px;line-height:24px}
.opp.quiet .opp-src{margin-bottom:0}
.opp.quiet .opp-needs{font-size:14px;line-height:20px;color:var(--ink-muted)}
.opp.quiet .evid summary{min-height:44px}
.row-act{flex:none}

/* ---------- empty: what Samlify is doing, and the next step ---------- */
.empty .card-t{font-size:20px;line-height:26px;margin-bottom:6px}
.empty .flow{margin:4px 0 2px}
.empty .fine{margin-top:6px}
.empty-small{color:var(--ink-muted);font-size:15px;padding:28px;border-radius:var(--r-card);background:var(--bg);box-shadow:var(--ring)}
/* Model review that cannot run here is said once, quietly, without a card. */
.watching .more{border:1px solid var(--border);border-radius:18px;padding:0 18px;background:var(--bg)}
.watching .more>summary{color:var(--ink);font-size:15px}
.learning h3,.learning h4,.seen h3{font-size:13px;font-weight:600;color:var(--ink-muted);margin-bottom:4px}
.learning ul,.kv{list-style:none;margin:0;padding:0}
.learn{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--divider);font-size:15px}
.learn-why{font-size:14px;color:var(--ink-muted);text-align:right;max-width:62%}
.seen{display:flex;flex-direction:column;gap:4px}
.hint,.note{padding:14px 18px;border-radius:16px;background:var(--warn-soft);color:var(--ink);font-size:15px;line-height:23px;max-width:680px}

/* ---------- the dock: the foot of the conversation ---------- */
.dock{flex:none;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;min-height:68px;padding:10px 16px 10px 28px;border-top:1px solid var(--divider);background:var(--paper)}
.dock-note{flex:1 1 280px;font-size:14px;line-height:21px;color:var(--ink-muted)}
.dock-demo{margin-left:auto;color:var(--ink-muted);font-size:14px;padding:0 6px}
.invite{flex:1 1 auto;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;min-width:0}
.invite-t{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:1px}
.invite h2{font-size:15px;line-height:22px;font-weight:600}
.invite p{color:var(--ink-muted);font-size:14px;line-height:20px;text-wrap:pretty}
.ob .invite{padding:20px 22px;border-radius:22px;border:1.5px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad) border-box}
.ob .invite h2{font-size:18px;line-height:25px;font-weight:500}
.ob .invite p{font-size:15px;line-height:22px}

/* ---------- build: the same conversation, with its plan and result ---------- */
.convo-head{justify-content:flex-start;padding:8px 20px 8px 12px;gap:2px 8px}
.convo-head .back{flex:none;padding:0 10px 0 8px;border-radius:999px}
.convo-title{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 0}
.convo-title h1{font-size:17px;line-height:24px;font-weight:600;letter-spacing:-.004em;text-wrap:balance;min-width:0}
.convo-tags{display:flex;gap:6px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:4px;max-width:100%;color:var(--ink-muted);text-decoration:none;font-size:14px;font-weight:500;min-height:44px}
.back:hover{color:var(--ink)}
.back .ico{width:16px;height:16px}
.back>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kept-results{margin-top:32px}
.kept-h{font-size:14px;font-weight:600;color:var(--ink-muted);margin:0 0 8px}
.why-rule{margin-left:48px}
.composer{gap:14px}
.msgs .composer.card{gap:12px}
.msgs .composer .row-btns{margin-top:2px}
.choices{display:flex;flex-direction:column;gap:10px;width:100%}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:14px 18px;min-height:44px;border:1px solid var(--border);border-radius:16px;background:var(--bg);cursor:pointer;transition:border-color .12s var(--ease),background-color .12s var(--ease)}
.choice:hover{border-color:var(--ink)}
.choice b{font-weight:500;font-size:16px}
.choice span{font-size:14px;color:var(--ink-muted)}
.fields-edit{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%}
.pill{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:var(--bg);font-size:14px;font-weight:500;color:var(--ink-muted);cursor:pointer;text-decoration:line-through;text-decoration-color:var(--ink-faint)}
.pill.on{background:var(--surface);border-color:var(--surface);color:var(--ink);text-decoration:none}
.approve-dest{font-size:15px;font-weight:500}
.approve-text{font-size:15px;line-height:23px;color:var(--ink);padding:14px 16px;border-radius:14px;background:var(--accent-soft)}
.approve-note{font-size:14px;color:var(--ink-muted)}
.supported{margin-top:-4px}
.handoff{padding:14px 18px;border-radius:16px;background:var(--surface);font-size:15px;line-height:23px;max-width:680px;text-wrap:pretty}
/* The previewed row: each value from the page and the column it goes into. */
.msgs .composer .card-t{font-size:17px;line-height:24px;font-weight:600}
.pv{width:100%;border-radius:14px;border:1px solid var(--border);overflow:hidden}
.pv-head{display:flex;flex-wrap:wrap;gap:2px 8px;padding:8px 14px;background:var(--paper);border-bottom:1px solid var(--border);font-size:13px;font-weight:600;color:var(--ink-muted)}
.pv ul{list-style:none;margin:0;padding:0}
.pv li{display:grid;grid-template-columns:minmax(4.5em,auto) minmax(0,1fr) auto;align-items:baseline;gap:2px 12px;padding:9px 14px;border-top:1px solid var(--divider);font-size:15px;line-height:21px}
.pv li:first-child{border-top:0}
.pv-k{font-size:13px;font-weight:500;color:var(--ink-muted)}
.pv-v{min-width:0;overflow-wrap:anywhere;font-weight:500}
.pv li[data-op="set"] .pv-v{color:var(--accent-hover)}
.pv-col{font-size:13px;color:var(--ink-muted);white-space:nowrap}
.pv-op{grid-column:2/-1;font-size:12px;font-weight:600;color:var(--ink-muted)}
.pv-missing{color:var(--warn)}

/* The plan, as the landing Example shows it. */
.plan-flow{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:10px;width:100%}
.plan-flow li{display:flex;gap:12px;align-items:baseline;font-size:16px;line-height:24px;min-width:0;overflow-wrap:anywhere}
.plan-n{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--surface)}
.plan-card .fields-edit{margin-top:4px}
.plan-card>.fine{margin-top:6px}
/* What was written: the newest rows, the whole table one link away. */
.result-card{gap:8px}
.result-top{display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap}
.result-top .count{margin-left:0}
.msgs .result-card .grid-wrap{width:100%;margin-top:6px}
.msgs .result-card .row-btns{margin-top:2px;gap:4px}
.result-links .btn-quiet{margin-left:-14px}
.result-links .btn-quiet+.btn-quiet{margin-left:0}
.result-card .grid td,.result-card .grid th{padding:0 10px}
.result-card .grid td{max-width:200px}
.btn-icon{width:44px;padding:0}
.btn-icon .ico{width:18px;height:18px}
.result-card .grid .rownum{width:32px}
.result-card .more{width:100%;margin-top:4px}
/* On a narrow screen the newest rows read as records, label over value, instead of a table
   that scrolls sideways under the person's thumb. The full table stays one link away. */
@media (max-width:760px){
  .result-card .grid-wrap{overflow:visible;box-shadow:none;background:none;border-radius:0}
  .result-card .grid,.result-card .grid tbody{display:block;width:100%}
  .result-card .grid thead{display:none}
  .result-card .grid tr{display:flex;flex-direction:column;padding:10px 14px 6px;margin-top:8px;border-radius:14px;background:var(--bg);box-shadow:var(--ring)}
  .result-card .grid td{display:flex;align-items:center;gap:12px;height:auto;max-width:none;padding:0;border:0;white-space:normal}
  .result-card .grid td[data-col]::before{content:attr(data-col);flex:none;width:5.5em;font-size:13px;color:var(--ink-muted);overflow-wrap:anywhere}
  .result-card .grid td .cellbtn{flex:1 1 auto;min-width:0;display:flex;align-items:center;line-height:22px;padding:0;white-space:normal;overflow-wrap:anywhere}
  .result-card .grid .rownum{width:auto;text-align:left;padding:0;font-size:13px}
  .result-card .grid .rowact{width:auto;justify-content:flex-end;padding:0}
  .result-card .grid .rowact:empty{display:none}
  .result-card .grid td .marker{position:static;flex:none;align-self:center}
}
/* ---------- a new document from earlier ones ---------- */
.doc-steps{gap:8px}
.doc-steps li{font-size:15px;line-height:22px}
.step-line .tag{min-height:20px;padding:1px 8px;font-size:11.5px;margin-left:2px}
.doc-list{list-style:none;margin:2px 0 0;padding:0;width:100%}
.doc-list li{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;min-height:44px;padding:2px 0;border-top:1px solid var(--divider);font-size:15px}
.doc-list li:first-child{border-top:0}
.doc-list .btn-quiet:last-child{margin-left:auto}
.doc-name{font-weight:500;min-width:0;overflow-wrap:anywhere}
.doc-base{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:100%}
select,.doc-field input,.doc-pair input,.doc-inline input,.doc-paste input,.doc-paste textarea,.doc-edit textarea{font:inherit;font-size:15px;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--ink);transition:border-color .12s var(--ease),box-shadow .12s var(--ease)}
select:focus-visible,.doc-field input:focus,.doc-pair input:focus,.doc-inline input:focus,.doc-paste input:focus,.doc-paste textarea:focus,.doc-edit textarea:focus{outline:none;border-color:var(--ink-muted);box-shadow:0 0 0 3px rgba(31,30,27,.06)}
select{max-width:100%}
.doc-paste,.doc-edit{display:flex;flex-direction:column;gap:10px;width:100%}
.doc-paste textarea,.doc-edit textarea{padding:10px 12px;line-height:23px;resize:vertical;min-height:120px}
.doc-brief{gap:12px}
.doc-field{display:flex;flex-direction:column;gap:6px;width:100%;font-size:14px;font-weight:600}
.doc-field input{font-weight:400;width:100%}
.doc-pairs{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;width:100%;min-width:0}
.doc-pairs legend{padding:0;font-size:14px;font-weight:600}
.doc-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.doc-pair input{width:100%;min-width:0}
.doc-pairs .link{align-self:flex-start;font-size:14px;color:var(--ink-muted)}
.doc-inline{display:flex;gap:8px;width:100%}
.doc-inline input{flex:1;min-width:0}
.choice-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.doc-vals{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:22px}
.doc-vals b{font-weight:600}
.doc-draft{gap:0}
.doc-draft>.eyebrow{font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.doc-title{margin:2px 0 6px}
.doc-part{width:100%;padding:14px 0;border-top:1px solid var(--divider);display:flex;flex-direction:column;gap:6px}
.doc-part.skipped{opacity:.6}
.doc-part-head{display:flex;align-items:baseline;justify-content:space-between;gap:2px 12px;flex-wrap:wrap}
.doc-part-head h4{margin:0;font-size:16px;font-weight:600}
.doc-text{font-size:15px;line-height:23px;white-space:pre-wrap;overflow-wrap:anywhere}
.doc-part-act{display:flex;flex-wrap:wrap;gap:0 18px}
.doc-part-act .link{font-size:14px;color:var(--ink-muted)}
.doc-part-act .link:hover{color:var(--ink)}
.doc-adapted{padding:12px 14px;border-radius:14px;background:var(--accent-soft);display:flex;flex-direction:column;gap:6px}
.doc-refused{color:var(--warn)}
.doc-draft .more{width:100%}
.doc-md{margin:0;padding:14px 16px;border-radius:14px;background:var(--paper);box-shadow:var(--ring);font:13px/20px ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto}
.msgs .card-soft{background:var(--paper)}
.doc-adapt .card-t{font-size:17px;line-height:24px;font-weight:600}
.run-line{display:flex;align-items:center;gap:10px}
.run-line .dot{flex:none}

/* Samlify's own check box */
.check{display:flex;gap:14px;align-items:flex-start;width:100%;min-height:44px;padding:12px 14px;margin:0;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);text-align:left;cursor:pointer;font-size:15px;line-height:22px;transition:border-color .12s var(--ease),background-color .12s var(--ease)}
.check:hover{border-color:var(--border-hover)}
.check[aria-checked="true"]{border-color:var(--ink);background:var(--paper)}
.check-box{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--ink-faint);display:inline-flex;align-items:center;justify-content:center;color:transparent;background:var(--bg);transition:background-color .12s var(--ease),border-color .12s var(--ease)}
.check[aria-checked="true"] .check-box{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.check-ico{width:14px;height:14px}

/* disclosure */
.more{border-top:1px solid var(--divider)}
.more>summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;list-style:none;color:var(--ink-muted);font-size:14px;font-weight:500}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:'';width:8px;height:8px;margin-left:auto;margin-right:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.more[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.more>summary:hover{color:var(--ink)}
.more-body{display:flex;flex-direction:column;gap:14px;padding:2px 0 18px}

/* ---------- pages ---------- */
.page{max-width:var(--page);margin:0 auto;display:flex;flex-direction:column;gap:28px}
/* numbered steps, as on the landing */
.flow{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px;margin:8px 0 4px;width:100%}
.flow li{display:flex;gap:16px;align-items:flex-start}
.flow-n{flex:none;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;background:var(--bg);box-shadow:0 0 0 1.5px var(--ink-faint) inset;color:var(--ink-muted)}
.flow li.now .flow-n{box-shadow:0 0 0 1.5px var(--ink) inset;color:var(--ink)}
.flow li.done .flow-n{background:var(--ok-soft);box-shadow:none;color:var(--ok)}
.flow-t{display:flex;flex-direction:column;gap:2px;padding-top:6px;min-width:0}
.flow-t b{font-weight:500;font-size:17px;line-height:24px}
.flow-t span{font-size:15px;line-height:22px;color:var(--ink-muted)}

/* model review: an assistant strip under the feed */
.consent-card{gap:16px}
.consent-card h2{font-size:24px;line-height:30px;font-weight:500}
.consent-h{font-size:19px!important;font-weight:500!important}
.consent-lead{font-size:17px;line-height:26px}
.mac-consent{display:flex;flex-direction:column;padding:20px 0 4px;border-top:1px solid var(--divider)}
.consent-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}
.consent-cols>div{min-width:0;display:flex;flex-direction:column;gap:10px}
.consent-cols h3,.consent-cols h4{font-size:14px;font-weight:600;margin:0}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:22px}
.facts li{position:relative;padding-left:22px;overflow-wrap:anywhere}
.facts li::before{content:'';position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.facts-no li::before{width:10px;height:1.75px;border-radius:2px;top:10.5px;left:1px;background:var(--ink-muted)}
.evid{font-size:14px;color:var(--ink)}
.evid summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--ink-muted);font-weight:500;list-style:none}
.evid summary::-webkit-details-marker{display:none}
.evid summary::before{content:'';width:6px;height:6px;margin-right:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s var(--ease)}
.evid[open] summary::before{transform:rotate(45deg)}
.evid summary:hover{color:var(--ink)}
.evid-body{display:flex;flex-direction:column;gap:10px;padding:4px 0 4px 16px;border-left:2px solid var(--divider)}
.evid-body .label{font-weight:600}
.evlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.evlist li{display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--divider);font-size:14px;line-height:20px;min-width:0}
.evlist li:first-child{border-top:0}
.evlist .when{color:var(--ink-muted);flex:none;min-width:48px}
.evlist .evpage{overflow-wrap:anywhere}
.cols,.rec{color:var(--ink-muted)}

/* ---------- automations and tables lists ---------- */
.rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:14px;padding:18px 22px;border-radius:18px;background:var(--bg);box-shadow:var(--ring);text-decoration:none;transition:box-shadow .12s var(--ease)}
.row:hover{box-shadow:0 0 0 1px var(--border-hover)}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row-title{font-size:16px;font-weight:500}
.row-sub{font-size:14px;color:var(--ink-muted)}
/* plan */
.plan{display:flex;flex-direction:column;gap:22px}
.plan-status{font-size:15px;font-weight:600}
.plan-on{color:var(--ok)}
.plan-changed{color:var(--warn)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;counter-reset:st}
.step{counter-increment:st;display:grid;grid-template-columns:28px 96px minmax(0,1fr);gap:14px;align-items:baseline;padding:16px 0;border-top:1px solid var(--divider)}
.step::before{content:counter(st);width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--surface);font-variant-numeric:tabular-nums;align-self:start}
.step:first-child{border-top:0;padding-top:2px}
.step-k{font-size:14px;font-weight:600;color:var(--ink)}
.step-v{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:16px;line-height:24px}
.step.blocked .step-v{color:var(--warn)}
.step.blocked::before{background:var(--g1);color:var(--ink)}
.step.pending .step-v{color:var(--ink-muted)}
.map{border-collapse:collapse;width:100%;font-size:14px}
.map th{text-align:left;font-size:13px;font-weight:600;color:var(--ink-muted);padding:8px 10px;border-bottom:1px solid var(--border)}
.map td{padding:10px;border-bottom:1px solid var(--divider)}
.map td:first-child::after{content:'→';float:right;color:var(--ink-faint)}

/* table */
.tbl{display:flex;flex-direction:column;gap:14px}
.tbl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tbl-head h2{font-size:19px;line-height:25px;font-weight:600}
.count{font-size:14px;font-weight:400;color:var(--ink-muted);margin-left:6px}
.rename{display:flex;gap:8px;flex-wrap:wrap}
.rename input,td.editing input{font:inherit;font-size:15px;min-height:44px;padding:0 12px;border:1px solid var(--border-hover);border-radius:var(--r-sm);background:var(--bg);color:var(--ink)}
.grid-wrap{overflow:auto;border-radius:16px;background:var(--bg);box-shadow:var(--ring);max-width:100%}
.grid{border-collapse:collapse;width:100%;font-size:14px}
.grid th{position:sticky;top:0;background:var(--paper);text-align:left;font-size:13px;font-weight:600;color:var(--ink-muted);padding:0 12px;height:40px;border-bottom:1px solid var(--border);white-space:nowrap}
.grid td{height:44px;padding:0 12px;border-bottom:1px solid var(--divider);position:relative;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.grid tr:last-child td{border-bottom:0}
.grid .rownum{width:40px;color:var(--ink-muted);text-align:right;padding-right:6px}
.grid .rowact{width:1%;text-align:right;padding:0 4px}
.cellbtn{all:unset;display:block;width:100%;min-height:44px;line-height:44px;cursor:text;overflow:hidden;text-overflow:ellipsis}
.cellbtn:focus-visible{outline:2px solid var(--ink-muted);outline-offset:-2px}
.marker{position:absolute;top:8px;right:5px;width:5px;height:5px;border-radius:50%}
.marker-samlify{background:var(--signal)}
.marker-you{border:1px solid var(--ink-muted);width:6px;height:6px;background:none}
td.editing{padding:0 4px}
td.editing input{min-height:36px;width:100%}
.preview-row td{background:var(--accent-soft);color:var(--ink)}

/* activity */
.activity{display:flex;flex-direction:column;gap:12px}
.needs-you{padding:16px 18px;border-radius:16px;background:var(--warn-soft);display:flex;flex-direction:column;gap:10px;font-size:15px}
.audit{border-collapse:collapse;width:100%;font-size:14px}
.audit td{padding:10px 8px;border-bottom:1px solid var(--divider);vertical-align:middle}
.audit .when{color:var(--ink-muted);white-space:nowrap;width:1%}
.audit .lock{text-align:right;width:1%}
.audit .tag{margin-left:6px}

/* ---------- connections ---------- */
.card{padding:26px 28px;border-radius:var(--r-card);background:var(--bg);box-shadow:var(--ring);display:flex;flex-direction:column;gap:16px}
.page .card h2{font-size:19px;line-height:25px;font-weight:600}
.page .card h3{font-size:14px;font-weight:600;color:var(--ink)}
.card .more{margin-top:2px}
.card-quiet{background:transparent;box-shadow:none;padding:0 4px;gap:8px}
.card-quiet .more{border-top:1px solid var(--border)}
.card-quiet .more>summary{font-size:15px;color:var(--ink)}
.sites ul,.apps,.reqs{list-style:none;margin:0;padding:0}
.sites{display:flex;flex-direction:column;gap:6px}
.sites li{padding:4px 0;font-size:15px}
.apps li,.reqs li{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--divider);font-size:15px;flex-wrap:wrap}
.apps li .fine{margin-left:auto}
.reqs li{justify-content:space-between}
.install{margin:0;padding:0;list-style:none;counter-reset:in;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:24px}
.install li{counter-increment:in;display:flex;gap:14px;align-items:baseline}
.install li::before{content:counter(in);flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--surface);font-variant-numeric:tabular-nums}
.pilot-note{text-align:center;padding:8px 0 0}

/* ---------- settings: short sections of rows ----------
   Each row: what it is and its state on the left, its control on the right,
   anything longer under Details. On a phone the control goes under the text. */
.settings{gap:32px}
.set{display:flex;flex-direction:column;gap:10px;min-width:0;scroll-margin-top:16px}
.set-h{padding:0 4px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink-muted)}
.set-group{border-radius:20px;background:var(--bg);box-shadow:var(--ring),var(--sh-soft)}
.set-row{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px 20px;border-top:1px solid var(--divider)}
.set-row:first-child{border-top:0}
.set-main{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;min-width:0}
.set-text{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:2px}
.set-t{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:16px;line-height:24px;font-weight:500}
.set-now{font-size:15px;line-height:22px;color:var(--ink-muted);text-wrap:pretty;overflow-wrap:anywhere}
.set-now [role="status"]{display:inline-flex;align-items:center;gap:8px}
.set-now .mark.work{color:var(--accent)}
.set-act{flex:0 1 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;max-width:100%}
.set-fine{font-size:14px;line-height:21px;color:var(--ink-muted);text-wrap:pretty}
.set-row h4{margin:0;font-size:14px;line-height:20px;font-weight:600}
.set-row .more{border-top:0;margin:-8px 0 -12px}
.set-row .more-body{padding-bottom:14px}
.set-row .install{font-size:15px;line-height:22px}
.set-row .note{max-width:none}
.set-row .consent-card{display:flex;flex-direction:column;padding:4px 0 2px}
.set-row .consent-lead{font-size:16px;line-height:24px}

/* Samlify for Mac */
.mac-seen{font-size:15px}
.mac-facts,.mac-list ul{list-style:none;margin:0;padding:0}
.mac-facts li{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:4px 16px;padding:10px 0;border-top:1px solid var(--divider);font-size:15px;line-height:22px}
.mac-k{font-weight:500}
.mac-v.warn,.fine.warn{color:var(--warn)}
.mac-list{display:flex;flex-direction:column;gap:6px}
.mac-list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--divider);font-size:15px;line-height:22px}
.mac-name{min-width:0;overflow-wrap:anywhere;font-weight:500}
.mac-list li .fine{flex:none;text-align:right}
.pair{align-items:center;text-align:center;padding:40px 32px;gap:16px;box-shadow:var(--ring),var(--sh-med);border-radius:var(--r-panel)}
.pair h1{font-size:32px;line-height:38px;letter-spacing:-.01em}
.pair-mark .mark{width:52px;height:52px}
.pair-lead{font-size:18px;line-height:27px;max-width:520px}
.pair-code{font-size:48px;line-height:56px;font-weight:600;letter-spacing:.08em;padding:12px 28px;border-radius:20px;background:var(--paper);box-shadow:var(--ring)}
.pair .row-btns{justify-content:center}
.pair .more{width:100%;text-align:left}


/* ---------- pages that are not the conversation ---------- */
.page.wide{max-width:1100px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:8px 0 4px}
.page-head-main{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 360px}
.page-head h1{font-size:28px;line-height:34px;letter-spacing:-.01em;text-wrap:balance}
.page-lead{font-size:17px;line-height:26px;color:var(--ink-muted);max-width:600px;text-wrap:pretty}
.page-head-right{flex:none}

/* ---------- onboarding ---------- */
.ob{min-height:100vh;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column}
.ob-head{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:var(--top-h);max-width:1320px;width:100%;margin:0 auto}
.ob-head .lockup .mark{width:30px;height:30px}
.ob-head .lockup .word{font-size:23px}
.ob-main{position:relative;width:100%;max-width:680px;margin:0 auto;padding:24px 24px 96px;display:flex;flex-direction:column;gap:20px}
.ob-main>*{position:relative;z-index:1}
/* The glow stays inside the column's own box: a negative inset here made the page wider than a phone. */
.ob-main::before{inset:120px 0 30% 0;opacity:.8}
.ob-main h1{font-size:34px;line-height:40px;letter-spacing:-.014em;text-wrap:balance;font-weight:500}
.lead{font-size:18px;line-height:27px;color:var(--ink-muted);max-width:600px;text-wrap:pretty}
.ob-card{display:flex;flex-direction:column;gap:20px;padding:28px;border-radius:var(--r-panel);background:var(--bg);box-shadow:var(--sh-med),0 0 0 1px rgba(31,30,27,.05)}
.ob-found{display:flex;align-items:center;gap:8px}
.ob-sum{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:24px}
.ob-sum li{position:relative;padding-left:24px;text-wrap:pretty}
.ob-sum li::before{content:'';position:absolute;left:3px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.ob-sum li[data-sum=no]::before{width:10px;height:1.75px;border-radius:2px;top:11.5px;left:2px;background:var(--ink-muted)}
.ob-sum li[data-sum=local]::before{background:var(--accent)}
.ob-sum strong{font-weight:600}
.ob-alt{font-size:15px;color:var(--ink-muted)}
.ob-alt .link{font-size:15px}
.ob-fixtures .more{padding:0}
.ob-skip{margin-top:4px}
.ob-skip .link{color:var(--ink-muted);font-size:15px}
.ob-main .device{max-width:none}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,8px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);padding:13px 20px;border-radius:999px;font-size:15px;max-width:min(560px,calc(100vw - 32px));transition:opacity .15s var(--ease),transform .15s var(--ease);z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Describe what to automate: the same panel, with a composer ---------- */
.intent-chat .msgs{flex:1 1 auto;min-height:0;overflow:auto}
.msg-stack{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.msg-stack p:not(.handoff):not(.fine){font-size:17px;line-height:25px}
.msg-stack .handoff{max-width:100%;background:var(--bg)}
.intent-compose{flex:none;display:flex;flex-direction:column;gap:10px;margin:0 16px 12px;padding:14px 16px 12px 20px;border-radius:22px;border:1px solid var(--border);background:var(--bg);transition:border-color .12s var(--ease),box-shadow .12s var(--ease)}
.intent-compose:focus-within{border-color:var(--ink-muted);box-shadow:0 0 0 3px rgba(31,30,27,.06)}
.intent-input{width:100%;min-height:48px;max-height:140px;resize:none;border:0;padding:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;line-height:24px}
.intent-input:focus{outline:none}
.intent-input:disabled{color:var(--ink-muted)}
.intent-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.intent-row .fine{margin:0}
.intent-controls{flex:none;margin-left:auto}
.intent-controls .btn-quiet{font-size:14px}
.intent-note{font-size:16px;line-height:24px}

/* ---------- the chat on the main screen: suggestions above, the conversation, the composer ---------- */
.quiet-head{font-size:14px;line-height:20px;font-weight:600;color:var(--ink-muted);margin-top:4px}
.hints{font-size:14px;line-height:21px;margin:8px 0 12px}
/* The composer: one rounded field at the foot of the window, Send inside it,
   and under it only Clear chat once there is something to clear. */
.chat-compose{flex:none;width:100%;max-width:calc(var(--read) + 32px);margin:0 auto;padding:4px 16px 4px}
.chat-box{position:relative;display:flex;align-items:flex-end;gap:8px;padding:5px 5px 5px 20px;border-radius:26px;border:1px solid var(--border);background:var(--bg);transition:border-color .12s var(--ease),box-shadow .12s var(--ease)}
/* Focused, the box's edge is the landing's 03 gradient (--grad), 2 px, over the
   grey border: a ring cut out of a gradient fill, so the corners stay round. */
.chat-box::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;pointer-events:none;transition:opacity .12s var(--ease)}
.chat-box:focus-within{border-color:transparent}
.chat-box:focus-within::before{opacity:1}
@media (forced-colors:active){.chat-box:focus-within{outline:2px solid Highlight;outline-offset:1px}}
.chat-input{flex:1 1 auto;min-width:0;min-height:44px;max-height:180px;resize:none;border:0;padding:10px 0;background:transparent;color:var(--ink);font:inherit;font-size:16px;line-height:24px;field-sizing:content}
.chat-input:focus{outline:none}
.chat-input[readonly]{color:var(--ink-muted)}
.send-btn{flex:none;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%}
.send-btn .ico{width:20px;height:20px}
.send-btn.is-send .send-art{width:28px;height:28px}
/* Send ready and Stop while an answer is out are black (--ink) circles, asked
   for on 21 October 2026 in place of the earlier grey. Send's arrow is the 03
   blades in the 03 gradient (app.js, sendArt), which become the mark while a
   mouse rests on it; Stop keeps its white hand-drawn square. Nothing to send:
   pale grey with a grey arrow, a disabled button with no ring, never a faded
   gradient. No filter or shadow on the mark. */
.send-btn.is-send,.send-btn.is-send:hover,.send-btn.is-stop,.send-btn.is-stop:hover{border-color:var(--ink);background:var(--ink);color:#fff;transition:background-color .12s var(--ease),border-color .12s var(--ease)}
.send-btn.is-stop .ico{width:20px;height:20px}
.send-btn.is-send:disabled,.send-btn.is-send:disabled:hover{background:var(--surface);border-color:var(--surface);color:var(--ink-faint);opacity:1;filter:none;transform:none;cursor:default;outline:none;box-shadow:none}
.send-btn.is-send:disabled .send-art rect{fill:currentColor}
.chat-full-note{margin:6px 6px 0}
.chat-blocked{flex:none;width:calc(100% - 32px);max-width:var(--read);margin:0 auto 12px;padding:12px 18px;border-radius:18px;background:var(--surface);font-size:14px;line-height:21px;color:var(--ink-muted)}
.chat-blocked .btn,.chat-blocked a{margin-left:6px}
.plan-card .plan-what{font-size:16px;line-height:23px;color:var(--ink);text-wrap:pretty;overflow-wrap:anywhere}
.plan-blockers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.plan-card .opp-needs{font-size:15px;line-height:22px}
.plan-card .facts{font-size:14px;line-height:21px}
.plan-card>.more{width:100%}
.plan-card .opp-act{margin-top:8px;align-items:center;gap:8px 16px}
.plan-route{font-size:14px;line-height:20px;color:var(--ink-muted);overflow-wrap:anywhere}
.plan-next{flex:1 1 220px;margin:0;font-size:14px;line-height:20px}
.plan-open{margin:6px 0 0;padding-left:20px;color:var(--ink)}
.chat-archive{width:100%}
.chat-archive .more{border:1px solid var(--border);border-radius:18px;padding:0 18px;background:var(--bg)}
.msg-text.chat-reply,.feed .msg-you .msg-text,.chat-room .msg-you .msg-text{white-space:pre-wrap}

/* ---------- the conversation uses the whole window ----------
   Asked for on 19 October 2026: no panel, no glow, no title bar. The
   transcript scrolls edge to edge with its text in a readable column; the
   composer sits at the foot. Samlify speaks in plain text beside its mark;
   what the person wrote is a soft bubble. Cards stay only where there is a
   decision (a proposal, a plan to build). */
.shell.is-chat .stage{padding:0;gap:0;overflow:hidden}
.shell.is-chat .stage>.banner{flex:none;width:calc(100% - 32px);max-width:var(--read);margin:8px auto 0}
.room.feed,.room.intent{max-width:none}
.room.feed::before,.room.intent::before{content:none}
.room>.panel{border-radius:0;box-shadow:none;background:var(--bg)}
.room .panel-head{background:var(--bg);border-bottom:0;padding:4px max(16px,calc((100% - var(--read))/2 + 4px))}
.room .demo-banner{padding-inline:max(16px,calc((100% - var(--read))/2))}
.room .msgs{padding:16px max(16px,calc((100% - var(--read))/2)) 24px;gap:24px}
.room .msg-who{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.room .msg-avatar{width:28px;height:28px;box-shadow:none;background:none}
.room .msg-avatar .mark,.room .msg-avatar.live .mark{width:24px;height:24px}
.room .msg:not(.msg-you)>.msg-body>.msg-text:not(.hint):not(.note){padding:1px 0 0;background:none;border-radius:0}
.room .msg-status{line-height:26px}
.room .msg-you .msg-text{background:var(--surface);color:var(--ink);font-weight:400;border-radius:20px;max-width:min(85%,620px)}
.room .dock{border-top:0;background:var(--bg);padding-inline:max(16px,calc((100% - var(--read))/2))}

/* ---------- the welcome: an empty conversation ----------
   The mark, one question and a large composer, centred in the page, with what
   is true now underneath. When it is taller than the window it scrolls as one
   column. The first Send moves the composer to the foot (app.js glides it). */
.welcome-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:0 16px}
.welcome{margin:auto;width:100%;max-width:calc(var(--read) + 32px);padding:24px 0 9vh;display:flex;flex-direction:column;gap:24px}
.welcome-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:0 8px}
.mark.welcome-mark{width:44px;height:44px}
.welcome-t{font-size:30px;line-height:36px;font-weight:500;letter-spacing:-.018em;text-wrap:balance;max-width:18em}
.welcome .chat-compose{max-width:none;padding:0}
.chat-compose.is-big .chat-box{flex-wrap:wrap;align-items:flex-end;padding:12px 10px 10px 20px;border-radius:28px;box-shadow:var(--sh-soft)}
.chat-compose.is-big .chat-input{flex:1 1 100%;min-height:72px;max-height:240px;padding:6px 0;font-size:17px;line-height:24px}
.chat-compose.is-big .send-btn{margin-left:auto}
.welcome-below{display:flex;flex-direction:column;gap:20px}
.welcome-below .msg-avatar{display:none}
.welcome-below>.msg.cont{margin-top:0}
.welcome-found{text-align:center;font-size:15px;line-height:22px;color:var(--ink-muted);text-wrap:pretty}
.welcome-found a{display:inline;padding:13px 4px;color:var(--ink);font-weight:500;text-underline-offset:3px;text-decoration-color:var(--ink-faint)}
.welcome-found a:hover{text-decoration-color:var(--ink)}
.welcome-note{text-align:center;font-size:16px;line-height:24px;color:var(--ink-muted)}
/* The Chat welcome: what Samlify found, then the composer, then one line of status. */
.welcome .assistant,.found .assistant{display:flex;flex-direction:column;gap:12px;min-width:0}
.discover-say{padding:0 4px;font-size:16px;line-height:24px;color:var(--ink-muted);text-wrap:pretty}
.welcome .card{width:100%;padding:20px 22px 22px;border-radius:18px;border:1px solid var(--border);background:var(--bg);box-shadow:var(--sh-soft);display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.welcome .others,.found .others{display:flex;flex-direction:column;gap:8px;min-width:0}
.welcome .quiet-head,.found .quiet-head{margin:0;padding:0 4px}
.discover-build{display:flex;flex-direction:column;gap:16px}
/* What Samlify found, at the top of the conversation once one has begun. */
.found{display:flex;flex-direction:column;gap:12px;min-width:0}
.found-t{margin:0;padding:0 4px;font-size:17px;line-height:24px;font-weight:600}
.found .welcome-found{text-align:left;padding:0 4px}
.review-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 4px}

@media (max-width:900px){
  .consent-cols{grid-template-columns:1fr}
}
/* ---------- 760px: phones and small tablets ---------- */
@media (max-width:760px){
  :root{--top-h:60px}
  .ob-head{padding:0 12px 0 16px;gap:8px}
  .top-in{padding:0 12px 0 6px}
  .ob-head .lockup .word{font-size:21px}
  .ob-head .lockup .mark{width:26px;height:26px}
  .lockup{gap:8px}
  .pill-status{padding:0 10px;font-size:13px;max-width:44vw}
  .shell.is-chat .stage{padding:0;gap:0}
  .stage{padding:12px 16px 64px}
  .panel{border-radius:26px}
  .panel-head{min-height:56px;padding:6px 10px 6px 20px}
  .convo-head{padding:4px 12px 4px 4px;flex-wrap:nowrap;align-items:center;min-height:56px}
  .convo-head .back{width:44px;justify-content:center;padding:0}
  .convo-head .back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .convo-title{flex:1 1 auto;gap:2px 8px;padding:4px 0}
  .convo-title h1{font-size:16px;line-height:22px}
  .demo-banner{font-size:13px;line-height:18px;gap:4px 8px;padding:4px 6px 4px 20px}
  .demo-banner .tag{min-height:20px;padding:2px 8px}
  .demo-banner .demo-text{flex:1 1 170px}
  .demo-banner .btn-quiet{font-size:13px;padding:0 10px;margin-left:auto}
  .pv li{grid-template-columns:minmax(0,1fr) auto}
  .doc-pair{grid-template-columns:minmax(0,1fr)}
  .doc-pair .arrow{display:none}
  .doc-pair+.doc-pair{padding-top:8px;border-top:1px solid var(--divider)}
  .pv-k{grid-column:1/-1}
  .demo-banner{padding:4px 8px 4px 20px}
  .msgs{padding:20px 16px 24px;gap:16px}
  .msg{gap:10px}
  .msg-avatar{width:30px;height:30px}
  .msg-avatar .mark{width:19px;height:19px}
  .msg-avatar.live .mark{width:21px;height:21px}
  .msg-who{margin-top:5px}
  .msg-text{font-size:16px;line-height:23px;padding:11px 14px}
  .msgs .card{padding:18px}
  .card-t,.opp-title{font-size:20px;line-height:26px}
  .opp.featured .opp-act,.opp.featured .opp-act .btn{align-self:stretch;width:100%}
  .opp.quiet{flex-wrap:wrap;padding:12px 12px 12px 16px;gap:10px}
  .opp.quiet .opp-body{flex:1 1 200px}
  .why-rule{margin-left:40px}
  .dock{padding:8px 12px 8px 20px;min-height:60px}
  .invite p{display:none}
  .page-head h1{font-size:26px;line-height:32px}
  .card{padding:22px 20px}
  .ob-main{padding:12px 16px 72px;gap:16px}
  .ob-main h1{font-size:28px;line-height:34px}
  .lead{font-size:17px;line-height:25px}
  .ob-card{padding:20px;border-radius:24px}
  .ob-card .row-btns .btn{flex:1 1 100%}
  /* Send beside the text box, the notice it stands for full width under both. */
  .intent-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 12px;margin:0 8px 8px;padding:10px 12px 10px 16px}
  .intent-row{display:contents}
  .intent-compose .btn-primary{grid-area:1/2}
  .intent-notice{grid-area:2/1/3/3;line-height:20px}
  .intent-input{min-height:44px}
  .chat-compose{padding:4px 8px 2px}
  .chat-box{padding-left:16px}
  .welcome-scroll{padding:0 12px}
  .welcome{gap:20px;padding:16px 0 6vh}
  .welcome-t{font-size:25px;line-height:31px}
  .mark.welcome-mark{width:38px;height:38px}
  .chat-compose.is-big .chat-box{padding-left:16px;border-radius:24px}
  .chat-compose.is-big .chat-input{font-size:16px}
  .intent .panel-head .back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .intent .panel-head{padding-left:4px}
  .intent .panel-head .back{width:44px;justify-content:center}
}
@media (max-width:640px){
  .set-row{padding:14px 16px}
  .set-act{justify-content:flex-start}
  .top-btn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .top-btn{width:44px;padding:0}
  .step{grid-template-columns:28px minmax(0,1fr);gap:4px 12px}
  .step-v{grid-column:2}
  .mac-facts li{grid-template-columns:minmax(0,1fr)}
  .mac-list li{flex-wrap:wrap}
  .pair{padding:28px 20px}
  .pair-code{font-size:38px;line-height:46px;padding:10px 20px}
  .pair .row-btns .btn{flex:1 1 100%}
  .learn{flex-direction:column;gap:2px}
  .learn-why{text-align:left;max-width:none}
  .consent-card h2{font-size:21px;line-height:27px}
  .msgs .composer .row-btns .btn{flex:1 1 auto}
}
@media (max-width:374px){
  .lockup .word{font-size:19px}
  .lockup .mark{width:24px;height:24px}
  .top .lockup{padding:0 2px}
  .pill-status{max-width:40vw}
  .msgs{padding:18px 12px 20px}
  .msg{gap:8px}
  .msg-avatar{width:28px;height:28px}
  .page-head h1{font-size:24px;line-height:30px}
}
/* A phone keyboard leaves little height: the header gets out of the way. */
/* Short windows (a phone with its keyboard up, a landscape phone): the welcome
   tightens so the question, the composer and Send fit together. */
@media (max-height:620px){
  .welcome{gap:14px;padding:8px 0 16px}
  .welcome-head{gap:10px}
  .mark.welcome-mark{width:30px;height:30px}
  .welcome-t{font-size:22px;line-height:28px}
  .chat-compose.is-big .chat-input{min-height:48px;max-height:120px}
  .chat-input{max-height:120px}
}
@media (max-height:620px) and (max-width:760px){
  .intent-input{min-height:26px;height:26px}
  .intent-notice{font-size:13px;line-height:19px}
  .intent .msgs{padding-top:16px;padding-bottom:16px}
}
@media (max-height:520px) and (max-width:760px){
  :root{--top-h:52px}
  .chat-panel{min-height:240px}
  .panel-head{min-height:48px}
  .dock{min-height:52px}
}

/* Reduced motion: no movement anywhere. The one exception is Samlify's own
   working mark, which still says it is working: its blades fade together, in
   place, without turning (DESIGN.md, Motion). */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .mark.live .blade,.mark.work path{animation:breathe 1.6s ease-in-out infinite!important;transform:none!important}
}

/* Custom automations: generated payload and code wrap inside their card; labelled fields stack. */
pre.code{white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;font-size:13px;background:var(--surface);border-radius:var(--r-sm);padding:12px;margin:8px 0}
.field{display:flex;flex-direction:column;gap:4px;margin:8px 0;min-width:0;overflow-wrap:anywhere}
.field input,.field textarea{min-height:44px;max-width:100%;box-sizing:border-box}
/* A label beside its list, as the one step's Rows go to and Tab (phase 1k); under it on a narrow screen. */
.field-inline{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}
.one-step-match{display:flex;flex-direction:column;gap:4px}
/* The one step's question and Samlify's own text box and list box (William, 4 November 2026: not the browser's controls). */
.plan-card .opp-act:has(> .one-step){align-self:stretch}
.one-step{width:100%;min-width:0}
.one-step-from{gap:10px;margin:0 0 12px}
.one-step-q{font-size:20px;line-height:28px;font-weight:500;color:var(--ink)}
.text-in{font:inherit;font-size:16px;width:100%;min-height:48px;padding:0 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--ink);box-shadow:var(--sh-soft);transition:border-color .12s var(--ease),box-shadow .12s var(--ease)}
.text-in::placeholder{color:var(--ink-faint)}
.text-in:hover{border-color:var(--border-hover)}
.text-in:focus{outline:none;border-color:var(--ink-muted);box-shadow:0 0 0 3px rgba(31,30,27,.06)}
.pick{position:relative;display:inline-block;min-width:0;max-width:100%}
.pick-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;max-width:100%;padding:0 12px 0 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--ink);font:inherit;font-size:15px;cursor:pointer;box-shadow:var(--sh-soft);transition:border-color .12s var(--ease),background .12s var(--ease)}
.pick-btn:hover{border-color:var(--border-hover);background:var(--paper)}
.pick-btn:focus-visible{outline:none;border-color:var(--ink-muted);box-shadow:0 0 0 3px rgba(31,30,27,.06)}
.pick-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-ico{width:16px;height:16px;flex:none;color:var(--ink-muted);transition:transform .15s var(--ease)}
.pick.is-open .pick-ico{transform:rotate(180deg)}
.pick-list{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:100%;max-width:min(420px,80vw);max-height:280px;overflow:auto;margin:0;padding:6px;list-style:none;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-med)}
.pick-opt{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font:inherit;font-size:15px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-opt:hover,.pick-opt:focus-visible{outline:none;background:var(--surface)}
.pick-opt[aria-selected="true"]{font-weight:500}
.pick-opt[aria-selected="true"]::after{content:'';display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--ink);vertical-align:middle}
/* A custom automation page names the person's own labels and columns: an unbroken one wraps instead of pushing the page sideways (integrated review 1, IR1-3). */
[data-custom] p,[data-custom] li{overflow-wrap:anywhere}
/* Build or Review and its required disclosure wrap on narrow screens. */
.opp-act{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;max-width:100%}
.card-build-sends{flex:1 1 100%;max-width:34em;margin:0;overflow-wrap:anywhere}

/* A single question, choices from this conversation, and an editable Other. */
.chat-question{display:flex;flex-direction:column;gap:14px;margin-top:4px;max-width:100%}
.chat-question .question-text{margin:0}
.question-options{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%}
.question-chip{min-height:44px;max-width:100%;padding:9px 18px;border:1px solid var(--border);border-radius:24px;background:var(--bg);color:var(--ink);font:inherit;font-size:15px;line-height:22px;text-align:left;overflow-wrap:anywhere;cursor:pointer;transition:background-color .12s var(--ease)}
.question-chip:hover{background:var(--surface)}
.question-chip:focus-visible{outline:2px solid var(--ink-muted);outline-offset:2px}
.question-chip:disabled{cursor:default;color:var(--ink-muted)}
.question-other{display:flex;align-items:center;gap:4px;min-height:44px;max-width:100%;width:260px;padding:3px 4px 3px 16px;border:1px solid var(--border);border-radius:26px;background:var(--surface)}
.question-other input{min-width:0;width:100%;padding:4px 0;border:0;border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;outline:none;box-shadow:none}
.question-other input:focus{outline:none;box-shadow:none;border:0}
.question-other:focus-within{border-color:var(--ink-muted)}
.question-submit{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;color:#fff;background:var(--ink-muted);cursor:pointer}
.question-submit .ico{width:20px;height:20px}
.question-submit:disabled{background:transparent;color:var(--ink-faint);cursor:default}
.question-submit:focus-visible{outline:2px solid var(--ink-muted);outline-offset:2px}

/* Hover preview is an overlay. Its pin control stays under the pointer where
   the collapsed opener was, so a click there always pins rather than navigates. */
.side.peek{position:fixed;z-index:60;inset:0 auto 0 0;box-shadow:var(--sh-med);border-radius:0 16px 16px 0}
@media(min-width:960px){.side .side-head{flex-direction:row-reverse;justify-content:flex-end;padding-left:2px;gap:10px}}


/* Keep the original opener above the peek, so hover never replaces the click
   target. Only real controls intercept the floating sidebar's header. */
.shell:has(.side.peek) .top{z-index:61;pointer-events:none}
.shell:has(.side.peek) .top button,.shell:has(.side.peek) .top a{pointer-events:auto}

/* A little more air under the brand; its toggle shares the same centre. */
.side-head .lockup .mark{width:32px;height:32px}
.side-head .lockup .word{font-size:22px}
@media(min-width:960px){.top .menu-btn{transform:translateY(6px)}}

/* Small visible highlight, generous interaction area. The 44px control and
   12px proximity halo stay unchanged; only its hover paint is 28px. */
.top .menu-btn,.side-head button.icon-btn{position:relative}
.top .menu-btn:hover,.side-head button.icon-btn:hover{background:transparent}
.top .menu-btn::before,.side-head button.icon-btn::before{content:"";position:absolute;width:28px;height:28px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:7px;background:transparent;pointer-events:none;transition:background-color .12s var(--ease)}
.top .menu-btn:hover::before,.side-head button.icon-btn:hover::before{background:var(--surface)}
.top .menu-btn>.ico,.side-head button.icon-btn>.ico{position:relative}

/* The custom build: preview, connection and approval, with details folded away. */
.automation-page{max-width:900px}
.connection-heading,.connection-action{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.connection-heading h3{margin:0}.connection-action p{flex:1}
.sample-input{padding:16px;background:var(--paper);border-radius:var(--r);overflow-wrap:anywhere}
.sample-effects{list-style:none;padding:0;margin:16px 0;display:grid;gap:12px}
.sample-effects li{border:1px solid var(--border);border-radius:var(--r);padding:16px;overflow-wrap:anywhere}
.sample-effects dl{display:grid;grid-template-columns:minmax(80px,1fr) minmax(0,2fr);gap:8px;margin:12px 0 0}
.sample-effects dt{color:var(--ink-muted)}.sample-effects dd{margin:0}
@media(max-width:480px){.sample-effects dl{grid-template-columns:1fr}.sample-effects dd{margin-bottom:8px}}

.automation-page .field input,.automation-page .field textarea{box-sizing:border-box;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--ink);font:inherit}
.automation-page .field input:focus,.automation-page .field textarea:focus{outline:2px solid var(--ink-muted);outline-offset:2px}

.automation-page .field textarea{display:block;min-width:0;max-width:100%;resize:vertical}
.automation-result{padding:24px}
.automation-result-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:4px}
.automation-inputs{display:flex;flex-direction:column;gap:16px}
.automation-history{margin-top:0}
@media(max-width:480px){.automation-result{padding:20px}.automation-result-actions{gap:8px}}
.automation-effects{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.automation-effects>li{padding:16px;border:1px solid var(--border);border-radius:var(--r);overflow-wrap:anywhere}
.automation-effects>li::before{display:none}
.automation-effects b{font-size:14px;font-weight:500}
.automation-effects dl{display:grid;grid-template-columns:minmax(80px,1fr) minmax(0,2fr);gap:8px 16px;margin:16px 0 0}
.automation-effects dt{color:var(--ink-muted);font-size:14px}
.automation-effects dd{margin:0;min-width:0;overflow-wrap:anywhere}
@media(max-width:480px){.automation-effects dl{grid-template-columns:1fr;gap:4px}.automation-effects dd+dt{margin-top:8px}}
.automation-page>[data-artifact],.automation-history:not(:has([data-open-runs])){padding:0 4px;background:transparent;box-shadow:none}
.automation-page>[data-artifact] .more,.automation-history:not(:has([data-open-runs])) .more{margin-top:0}

/* Automation detail answers what happens and when, with one next action. */
.automation-scope p:first-child{font-size:17px;line-height:1.5;color:var(--ink);margin:0 0 12px}
.automation-scope .fine{margin:4px 0;overflow-wrap:anywhere}
.automation-scope{margin-bottom:24px}
.automation-last-result{color:var(--ink-muted);margin:0 0 12px}
.sample-preview{padding:0 4px;border:0;box-shadow:none;background:transparent}
.sample-preview>.more{margin-top:0}

.proposal-count{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:999px;background:var(--surface-hover);color:var(--ink-muted);font-size:12px;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
/* CSS follows viewport immediately, including before JS receives resize. A
   desktop sidebar left in the DOM must never consume a phone's width. */
@media(max-width:959px){.side:not(.drawer){display:none}}
/* The workspace's own address for forwarded email: one line that may wrap anywhere, selectable whole. */
.forward-address{font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;word-break:break-all;user-select:all}