/* Folio landing toy: Together. Everything is prefixed tt-. Tokens come from site.css (:root) with fallbacks. */

[data-demo="together"]{
  --tt-paper:var(--paper,#FBF7EE); --tt-surface:var(--surface,#F3EDE0); --tt-sheet:var(--sheet,#FFFDF8);
  --tt-line:var(--line,#E4DCCB); --tt-ink:var(--ink,#1D1B2E); --tt-ink2:var(--ink-2,#5E5B70); --tt-ink3:var(--ink-3,#8C889C);
  --tt-margin:var(--margin,#C2352B); --tt-rule:var(--rule,#B9C4F0); --tt-accent:var(--accent,#4A55C9);
  --tt-pink:var(--m-pink,#FEB4C2); --tt-mint:var(--m-mint,#9BFBE1); --tt-lime:var(--m-lime,#BFFA37);
  --tt-mocha:var(--m-mocha,#C3938B); --tt-coral:var(--m-coral,#E79388);
  --tt-display:var(--f-display,"Instrument Serif",Georgia,serif);
  --tt-sans:var(--f-sans,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif);
  --tt-hand:var(--f-hand,"Kalam","Segoe Print","Bradley Hand",cursive);
  --tt-spring:var(--ease-spring,cubic-bezier(.34,1.56,.64,1)); --tt-out:var(--ease-out,cubic-bezier(.22,1,.36,1));
  --tt-on-c:#2FBF71; --tt-away-c:#F0A93B;
  display:block; position:relative; width:100%; min-width:0; container-type:inline-size; min-height:520px;
  font-family:var(--tt-sans); color:var(--tt-ink); text-align:left;
}
[data-demo="together"] [hidden]{display:none!important}
[data-demo="together"] *{box-sizing:border-box}
[data-demo="together"] :where(button){font:inherit;color:inherit;cursor:pointer}
[data-demo="together"] .tt-c-pink{--c:var(--tt-pink)}
[data-demo="together"] .tt-c-mint{--c:var(--tt-mint)}
[data-demo="together"] .tt-c-lime{--c:var(--tt-lime)}
[data-demo="together"] .tt-c-mocha{--c:var(--tt-mocha)}
[data-demo="together"] .tt-c-coral{--c:var(--tt-coral)}
.tt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.tt-win{position:relative;background:var(--tt-sheet);border:1px solid var(--tt-line);border-radius:var(--r-card,24px);box-shadow:var(--shadow-card,0 18px 40px -24px rgba(29,27,46,.25));overflow:hidden}

/* toolbar */
.tt-bar{position:relative;z-index:5;display:flex;align-items:center;gap:16px;min-height:60px;padding:10px 18px;background:var(--tt-surface);border-bottom:1px solid var(--tt-line)}
.tt-dots{display:flex;gap:6px}
.tt-dots i{width:11px;height:11px;border-radius:50%;background:var(--tt-line)}
.tt-title{display:flex;align-items:baseline;gap:10px;min-width:0;margin-right:auto}
.tt-nb{font:400 26px/1 var(--tt-display);letter-spacing:-.01em;color:var(--tt-ink);white-space:nowrap}
.tt-nbsub{font:600 11px/1 var(--tt-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tt-ink3)}
.tt-stack{display:flex;align-items:center;padding-left:6px}
.tt-stack>*+*,.tt-stack>.tt-wrap+*{margin-left:-6px}
.tt-wrap{position:relative;display:inline-flex}

.tt-av{position:relative;display:inline-grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border-radius:50%;background:var(--c,var(--tt-line));border:2px solid var(--tt-sheet);font:600 13px/1 var(--tt-sans);color:var(--tt-ink)}
.tt-av.sm{width:24px;height:24px;font-size:11px;border-width:1.5px}
.tt-avbtn{transition:transform .25s var(--tt-spring)}
.tt-avbtn:hover{transform:translateY(-2px);z-index:2}
.tt-avbtn:focus-visible{z-index:3;outline:2px solid var(--tt-accent);outline-offset:2px}
.tt-fr[aria-pressed="true"]{box-shadow:0 0 0 2px var(--tt-accent)}
.tt-dot{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;border:2px solid var(--tt-sheet);background:var(--tt-on-c)}
.tt-st-away .tt-dot{background:var(--tt-away-c)}
.tt-st-invisible{opacity:.55;border-style:dashed;border-color:var(--tt-ink3)}
.tt-st-invisible .tt-dot{display:none}

.tt-btn,.tt-share{border:1px solid var(--tt-line);background:var(--tt-sheet);border-radius:999px;padding:7px 14px;font:600 13px/1.2 var(--tt-sans);color:var(--tt-ink);transition:transform .2s var(--tt-out),background .2s}
.tt-btn:hover{transform:translateY(-1px)}
.tt-btn:focus-visible,.tt-share:focus-visible,.tt-role:focus-visible,.tt-mi:focus-visible,.tt-fstop:focus-visible{outline:2px solid var(--tt-accent);outline-offset:2px}
.tt-primary,.tt-share{background:var(--tt-accent);border-color:var(--tt-accent);color:#fff}
.tt-btn.tt-sm{padding:5px 10px;font-size:12px}
.tt-share:hover{transform:translateY(-1px)}

/* popovers */
.tt-pop{position:absolute;top:calc(100% + 10px);z-index:20;background:var(--tt-sheet);border:1px solid var(--tt-line);border-radius:16px;box-shadow:0 18px 40px -16px rgba(29,27,46,.35);padding:12px;animation:tt-pop .28s var(--tt-spring)}
.tt-menu{left:0;width:180px;padding:6px;transform-origin:top left}
.tt-sharepop{right:0;width:300px;max-width:calc(100vw - 48px);transform-origin:top right}
.tt-pophead{font:600 14px/1.2 var(--tt-sans);color:var(--tt-ink);margin-bottom:10px}
.tt-mi{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;border-radius:10px;padding:8px 10px;font:500 14px/1.2 var(--tt-sans);text-align:left}
.tt-mi:hover,.tt-mi[aria-checked="true"]{background:var(--tt-surface)}
.tt-mi[aria-checked="true"]::after{content:"\2713";margin-left:auto;color:var(--tt-accent);font-weight:700}
.tt-sd{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;background:var(--tt-on-c)}
.tt-sd-away{background:var(--tt-away-c)}
.tt-sd-invisible{background:transparent;border:2px dashed var(--tt-ink3)}
.tt-invite{display:flex;gap:8px}
.tt-email{flex:1;min-width:0;border:1px solid var(--tt-line);background:var(--tt-paper);border-radius:10px;padding:8px 10px;font:400 14px/1.2 var(--tt-sans);color:var(--tt-ink)}
.tt-email:focus{outline:2px solid var(--tt-accent);outline-offset:1px}
.tt-people{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.tt-prow{display:flex;align-items:center;gap:10px}
.tt-pn{display:grid;min-width:0;margin-right:auto}
.tt-pn b{font:600 13px/1.2 var(--tt-sans);color:var(--tt-ink)}
.tt-pn small{font:400 12px/1.3 var(--tt-sans);color:var(--tt-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-pend{font:600 11px/1 var(--tt-sans);font-style:normal;color:var(--tt-away-c);letter-spacing:.04em}
.tt-role{border:1px solid var(--tt-line);background:var(--tt-paper);border-radius:8px;padding:5px 9px;font:500 12px/1 var(--tt-sans);white-space:nowrap}
.tt-role:hover{background:var(--tt-surface)}

/* body layout */
.tt-body{display:grid;grid-template-columns:minmax(0,1fr) 236px 256px;height:408px}
.tt-pagecol{position:relative;min-width:0;min-height:0}
.tt-thread,.tt-social{padding:16px;border-left:1px solid var(--tt-line);min-height:0;overflow:auto}
.tt-social{background:color-mix(in srgb,var(--tt-surface) 55%,var(--tt-sheet))}
.tt-colhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;font:600 11px/1 var(--tt-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tt-accent)}
.tt-chip{display:inline-flex;align-items:center;gap:6px;letter-spacing:0;text-transform:none;font:500 12px/1 var(--tt-sans);color:var(--tt-ink2);background:var(--tt-sheet);border:1px solid var(--tt-line);border-radius:999px;padding:4px 9px}
.tt-sec{margin:14px 0 8px;font:600 11px/1 var(--tt-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tt-ink3)}
.tt-colhead+.tt-sec{margin-top:0}

/* page */
.tt-scroll{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--tt-line) transparent}
.tt-sheet{position:relative;min-height:100%;padding:32px 28px 96px 64px;background:var(--tt-sheet) linear-gradient(to bottom,transparent 31px,color-mix(in srgb,var(--tt-rule) 70%,transparent) 31px) 0 0/100% 32px;font:400 16.5px/32px var(--tt-sans);color:var(--tt-ink)}
.tt-sheet::before{content:"";position:absolute;left:46px;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--tt-margin) 55%,transparent)}
.tt-h{margin:0;font:400 40px/64px var(--tt-display);letter-spacing:-.015em;color:var(--tt-ink)}
.tt-hand{margin:0;font:400 19px/32px var(--tt-hand);color:var(--tt-margin)}
.tt-p{margin:0;overflow-wrap:anywhere}
.tt-sel{border-radius:.15em .35em .15em .4em;padding:0 .06em;margin:0 -.06em;background:linear-gradient(var(--c),var(--c)) no-repeat 0 55%/0% 80%;transition:background-size .7s var(--tt-out),opacity .3s}
.tt-sel.tt-on{background-size:100% 80%}
.tt-resolved .tt-sel{opacity:.35}
.tt-cur{position:relative;display:inline-block;width:2px;height:1.3em;margin:0 1px;vertical-align:text-bottom;transition:opacity .3s}
.tt-cur::before{content:"";position:absolute;inset:0;border-radius:1px;background:color-mix(in srgb,var(--c) 55%,var(--tt-ink))}
.tt-cur>b{position:absolute;left:-1px;bottom:100%;margin-bottom:2px;padding:3px 7px;border-radius:6px 6px 6px 0;background:var(--c);color:var(--tt-ink);font:600 11px/1 var(--tt-sans);white-space:nowrap;pointer-events:none}
.tt-followed>b{box-shadow:0 0 0 2px var(--tt-accent)}
.tt-on .tt-cur::before{animation:tt-blink 1.1s steps(1) infinite}
.tt-you{display:flex;align-items:flex-start;gap:8px}
.tt-youtag{flex:none;margin-top:6px;padding:3px 7px;border-radius:6px;background:var(--c);font:600 11px/1 var(--tt-sans);color:var(--tt-ink)}
.tt-edit{flex:1;min-width:0;min-height:32px;outline:none;caret-color:var(--tt-accent);overflow-wrap:anywhere;border-radius:6px}
.tt-edit:empty::before{content:attr(data-ph);color:var(--tt-ink3);pointer-events:none}
.tt-edit:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--tt-accent) 35%,transparent)}

.tt-follow{position:absolute;z-index:4;top:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:5px 6px 5px 12px;border-radius:999px;background:var(--tt-ink);color:var(--tt-paper);font:600 13px/1 var(--tt-sans);box-shadow:0 10px 24px -10px rgba(29,27,46,.5);animation:tt-pop .3s var(--tt-spring);white-space:nowrap}
.tt-fdot{width:9px;height:9px;border-radius:50%;background:var(--c)}
.tt-fstop{border:0;border-radius:999px;background:rgba(255,255,255,.16);color:inherit;padding:5px 10px;font:600 12px/1 var(--tt-sans)}
.tt-fstop:hover{background:rgba(255,255,255,.28)}

/* comments */
.tt-empty{margin:0;font:400 13px/1.5 var(--tt-sans);color:var(--tt-ink3)}
.tt-card{background:var(--tt-sheet);border:1px solid var(--tt-line);border-radius:14px;padding:12px;box-shadow:0 8px 20px -14px rgba(29,27,46,.25);animation:tt-pop .35s var(--tt-spring);transition:opacity .3s}
.tt-card.tt-resolved{opacity:.7}
.tt-msg+.tt-msg{margin-top:12px;padding-top:12px;border-top:1px solid var(--tt-line);animation:tt-pop .35s var(--tt-spring)}
.tt-mh{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:600 13px/1 var(--tt-sans);color:var(--tt-ink)}
.tt-rtag{margin-left:auto;font:600 11px/1 var(--tt-sans);font-style:normal;color:#1F8F55}
.tt-quote{margin:0 0 8px;padding:2px 0 2px 9px;border-left:3px solid var(--tt-mint);font:400 12.5px/1.4 var(--tt-sans);color:var(--tt-ink2)}
.tt-mt{margin:0;font:400 14px/1.45 var(--tt-sans);color:var(--tt-ink)}
.tt-mention{border-radius:4px;padding:0 3px;background:color-mix(in srgb,var(--tt-accent) 14%,transparent);color:var(--tt-accent);font-weight:600}
.tt-acts{margin-top:12px;animation:tt-pop .35s var(--tt-spring)}

/* social */
.tt-now,.tt-feed{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tt-ni{display:flex;align-items:center;gap:9px;font:400 13px/1.2 var(--tt-sans);color:var(--tt-ink2)}
.tt-ni b{color:var(--tt-ink);font-weight:600}
.tt-fi{display:flex;align-items:center;gap:9px;font:400 13px/1.3 var(--tt-sans);color:var(--tt-ink)}
.tt-fx{flex:1;min-width:0}
.tt-fw{flex:none;font-size:11px;color:var(--tt-ink3)}
.tt-new{animation:tt-slide .4s var(--tt-out)}
.tt-invrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 9px;padding:10px;border:1px solid var(--tt-line);border-radius:12px;background:var(--tt-sheet);font:400 13px/1.35 var(--tt-sans);color:var(--tt-ink2)}
.tt-invrow b{color:var(--tt-ink);font-weight:600}
.tt-invtx{flex:1;min-width:0}
.tt-invbtns{display:flex;gap:6px;width:100%}
.tt-invdone{color:var(--tt-ink3)}

/* hint */
.tt-hint{margin:14px 0 0;text-align:center;font:400 20px/1.3 var(--tt-hand);color:var(--tt-ink3)}

/* medium: social drops under page + comments */
@container (max-width:899px){
  [data-demo="together"]{min-height:880px}
  .tt-body{grid-template-columns:minmax(0,1fr) 236px;height:auto}
  .tt-pagecol{height:408px}
  .tt-thread{height:408px}
  .tt-social{grid-column:1/-1;border-left:0;border-top:1px solid var(--tt-line);display:grid;grid-template-columns:1fr 1fr;column-gap:24px;overflow:visible}
  .tt-social>.tt-colhead{grid-column:1/-1}
}
/* narrow: everything stacks */
@container (max-width:719px){
  [data-demo="together"]{min-height:1300px}
  .tt-body{grid-template-columns:minmax(0,1fr)}
  .tt-pagecol{height:auto;min-height:360px}
  .tt-thread{height:auto;border-left:0;border-top:1px solid var(--tt-line)}
  .tt-social{grid-template-columns:1fr}
  .tt-bar{gap:10px;padding:10px 12px}
  .tt-dots,.tt-nbsub{display:none}
  .tt-nb{font-size:22px}
  .tt-sheet{padding:32px 16px 28px 48px;font-size:16px}
  .tt-sheet::before{left:34px}
  .tt-h{font-size:32px}
  .tt-hint{font-size:18px}
}

@keyframes tt-blink{50%{opacity:0}}
@keyframes tt-pop{from{opacity:0;transform:translateY(-4px) scale(.96)}}
.tt-follow{animation-name:tt-popc}
@keyframes tt-popc{from{opacity:0}}
@keyframes tt-slide{from{opacity:0;transform:translateY(-6px)}}

@media (prefers-reduced-motion:reduce){
  .tt-pop,.tt-card,.tt-msg,.tt-acts,.tt-follow,.tt-new{animation:none!important}
  .tt-sel,.tt-avbtn,.tt-btn,.tt-share{transition:none!important}
}