/* Gist components (from the approved round-3 mockups). Colors and type come from tokens.css. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font:400 15px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
b{font-weight:600}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-3)}

/* ---------- brand ---------- */
.logo{display:block;height:28px;width:auto}
.gist-av{border-radius:50%;display:block;flex:none}

/* ---------- avatars ---------- */
.av{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:600 11.5px var(--sans);flex:none}
.c2{background:var(--tone-2)!important}.c3{background:var(--tone-3)!important}.c4{background:var(--tone-4)!important;color:var(--ink)!important}
/* group avatar: round tile with up to three member circles */
.gav{--s:52px;width:var(--s);height:var(--s);border-radius:50%;background:var(--avatar-bg);position:relative;flex:none;display:inline-block}
.gav i{position:absolute;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  font:600 calc(var(--s)*.17)/1 var(--sans);font-style:normal;letter-spacing:-.02em;box-shadow:0 0 0 1.5px var(--avatar-bg)}
.gav.n1 i{inset:12%}
.gav.n2 i{width:50%;height:50%;font-size:calc(var(--s)*.16)}
.gav.n2 i:nth-child(1){left:9%;top:11%}.gav.n2 i:nth-child(2){right:9%;bottom:11%}
.gav.n3 i{width:44%;height:44%;font-size:calc(var(--s)*.14)}
.gav.n3 i:nth-child(1){left:7%;top:13%}.gav.n3 i:nth-child(2){right:7%;top:13%}.gav.n3 i:nth-child(3){left:28%;bottom:5%}
.gav.sm{--s:40px}.gav.md{--s:44px}.gav.xs{--s:30px}
.gav.sm i,.gav.xs i{font-size:0}

/* ---------- desktop shell ---------- */
.app{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:100vh}
.rail{border-right:1px solid var(--rule);padding:22px 0 18px;display:flex;flex-direction:column;background:var(--paper)}
.rail-top{padding:0 20px;display:flex;flex-direction:column;gap:18px}
.rail-search{display:flex;align-items:center;gap:8px;background:var(--rule-2);border-radius:var(--r);padding:8px 10px;font-size:14px;color:var(--ink-3)}
.rail-search kbd{margin-left:auto;font:500 11px var(--mono);color:var(--ink-4)}
.nav{display:flex;flex-direction:column;gap:1px;padding:14px 12px;border-bottom:1px solid var(--rule)}
.nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r);font-weight:500;font-size:14.5px;color:var(--ink-2)}
.nav a.on{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.rail-list{padding:6px 8px;overflow:hidden}
.mini{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r)}
.mini.on{background:var(--rule-2)}
.mini-body{min-width:0;flex:1}
.mini-top{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.mini-top .time{font-size:12px}
.mini-top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-prev{display:block;font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .badge{align-self:flex-end;margin-bottom:2px}
.rail-foot{margin-top:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3);padding:16px 20px 0;border-top:1px solid var(--rule);line-height:1.3}
.rail-foot b{color:var(--ink)}
.col{min-width:0}
.main{min-width:0}
.time{font-size:13px;color:var(--ink-3);white-space:nowrap;font-weight:400}
.badge{min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font:600 12px/21px var(--sans);text-align:center;flex:none}
/* desktop page header bar */
.dhead{height:68px;display:flex;align-items:center;gap:14px;padding:0 32px;border-bottom:1px solid var(--rule);background:var(--paper)}
.dhead .ttl{font:600 18px/1.2 var(--sans)}
.dhead .ttl.big{font-size:20px}
.dhead .sub{font-size:13px;color:var(--ink-3)}
.dhead .acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.ibtn{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.dhead .ibtn{box-shadow:inset 0 0 0 1px var(--rule);background:var(--card)}
.wrap{padding:28px 32px 64px}
.phone-only,.tabbar{display:none}

/* ---------- chat list (iMessage / WhatsApp style) ---------- */
.clist{list-style:none}
.crow{display:flex;align-items:center;gap:13px;padding:0 0 0 16px}
.crow .body{flex:1;min-width:0;padding:11px 16px 12px 0;border-bottom:1px solid var(--rule)}
.crow:last-child .body{border-bottom:0}
.crow .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.crow .name{font:600 16px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .bot{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:2px}
.crow .prev{font-size:14.5px;line-height:1.38;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crow .badge{margin-top:3px}
.crow.unread .time{color:var(--ink);font-weight:500}
.owe{color:var(--red);font-weight:500}

/* ---------- side panel (desktop) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:calc(100vh - 68px)}
.split>aside{border-left:1px solid var(--rule);padding:24px 28px}
.lbl{font:600 13px/1.3 var(--sans);color:var(--ink-3);margin-bottom:6px}
.lbl.up{text-transform:uppercase;letter-spacing:.06em;font-size:11.5px}
.items{list-style:none}
.items li{padding:11px 0;border-bottom:1px solid var(--rule-2);font-size:14px;display:flex;gap:12px;align-items:flex-start}
.items li:last-child{border-bottom:0}
.items .when{font:500 12.5px var(--sans);color:var(--ink-3);min-width:58px;flex:none;padding-top:1px}
.items .when.red{color:var(--red)}
.items .s{color:var(--ink-3);font-size:12.5px;display:block;margin-top:1px}
.kv{display:grid;grid-template-columns:auto 1fr}
.kv div{padding:10px 0;border-bottom:1px solid var(--rule-2);font-size:14px}
.kv div:nth-child(odd){color:var(--ink-3);padding-right:18px}
.kv div:nth-child(even){text-align:right;font-weight:500}
.kv div:nth-last-child(-n+2){border-bottom:0}

/* ---------- accordion (chat page) ---------- */
.acc{list-style:none}
.acc>li{border-bottom:1px solid var(--rule)}
.acc .hd{display:flex;align-items:center;gap:12px;padding:15px 0;min-height:54px}
.acc .hd .t{flex:1;min-width:0}
.acc .hd .tt{font:500 15.5px/1.3 var(--sans);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc .hd .m{font-size:13px;color:var(--ink-3);display:block;margin-top:1px}
.acc .hd .r{font-size:13px;color:var(--ink-3);white-space:nowrap}
.acc .hd .r.red{color:var(--red);font-weight:500}
.chev{width:16px;height:16px;flex:none;transition:none}
.acc li.open .chev{transform:rotate(90deg)}
.acc li.open .tt{font-weight:600}
.acc .bd{padding:0 0 18px 0;font-size:14.5px;color:var(--ink-2)}
.acc .bd ul{list-style:none;margin-top:8px}
.acc .bd li{position:relative;padding:5px 0 5px 16px}
.acc .bd li:before{content:"";position:absolute;left:1px;top:14px;width:6px;height:1.5px;background:var(--ink-3)}
.acc .bd .go{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-weight:600;font-size:14px;color:var(--ink)}
.acc .bd .go:after{content:"›";font-size:18px;line-height:1;margin-top:-2px}
.cite{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.secgap{height:28px}
.grp-lbl{font:600 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);padding-bottom:4px;border-bottom:1px solid var(--rule)}
.sum-hd .dotred{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.serif-line{font:700 19px/1.3 var(--serif);color:var(--ink);letter-spacing:-.005em}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);vertical-align:middle;margin-right:6px}
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green)}

/* ---------- thread: bubbles ---------- */
.thread{max-width:640px}
.sysline{text-align:center;font-size:12px;color:var(--ink-3);margin:22px 0 10px}
.sysline b{color:var(--ink-2);font-weight:600}
.bub-row{display:flex;align-items:flex-end;gap:8px;margin-top:2px}
.bub-row .av{width:28px;height:28px;font-size:10px;visibility:hidden}
.bub-row.last .av{visibility:visible}
.bub-col{display:flex;flex-direction:column;align-items:flex-start;max-width:76%}
.from{font-size:11.5px;color:var(--ink-3);margin:8px 0 2px 12px}
.bub{background:var(--bubble);border-radius:18px;padding:8px 13px;font-size:15px;line-height:1.38}
.bub-row.last .bub{border-bottom-left-radius:5px}
.bub-row.me{justify-content:flex-end}
.bub-row.me .bub-col{align-items:flex-end}
.bub-row.me .bub{background:var(--ink);color:#fff}
.bub-row.me.last .bub{border-bottom-left-radius:18px;border-bottom-right-radius:5px}
.bub.hl{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink-3)}
.bub.file{background:var(--card);border:1px solid var(--rule);display:flex;align-items:center;gap:10px;font-size:14px;padding:9px 13px}
.ext{font:600 9.5px var(--mono);width:30px;height:36px;border:1px solid var(--rule);border-radius:3px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;background:var(--card);flex:none;color:var(--ink-2)}
.pics{display:flex;gap:4px;margin-top:2px}
.pics span{width:118px;height:118px;border-radius:14px;display:block}
.stamp{font-size:11px;color:var(--ink-4);margin:3px 0 0 12px}
.xref{margin:18px auto 4px;max-width:420px;text-align:center;font-size:12.5px;color:var(--ink-3)}
.xref u{color:var(--ink-2);text-decoration-color:var(--rule)}

/* ---------- search ---------- */
.seg{display:inline-flex;background:var(--rule-2);border-radius:9px;padding:2px}
.seg span{padding:6px 14px;font:500 13.5px var(--sans);color:var(--ink-2);border-radius:7px}
.seg span.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(21,23,27,.12)}
.sfield{display:flex;align-items:center;gap:9px;background:var(--rule-2);border-radius:10px;padding:9px 12px;font-size:15.5px;color:var(--ink)}
.sfield .x{margin-left:auto;width:17px;height:17px;border-radius:50%;background:var(--ink-4);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}
.answer{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px}
.answer p.big{font:600 20px/1.35 var(--serif)}
.answer p.big u{text-decoration:none;background:linear-gradient(transparent 62%,var(--hl) 62%)}
.sup{font:600 10.5px var(--sans);color:var(--ink-3);vertical-align:super;margin-left:1px}
.src{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule-2)}
.src:last-child{border-bottom:0}
.src .n{font:600 12px var(--sans);color:var(--ink-3);width:14px;flex:none;padding-top:1px}
.src .h{font-size:12.5px;color:var(--ink-3)}
.src .h b{color:var(--ink);margin-right:5px}
.src .b{font-size:14.5px;margin-top:2px}
mark{background:var(--hl);color:inherit;border-radius:2px}

/* ---------- forms ---------- */
.group{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:0 16px}
.group .row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule-2);font-size:15px;min-height:50px}
.group .row:last-child{border-bottom:0}
.group .row .v{color:var(--ink-3);display:flex;align-items:center;gap:4px;white-space:nowrap}
.group .row .s{display:block;font-size:12.5px;color:var(--ink-3)}
.fmt{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fmt span{border:1px solid var(--rule);border-radius:var(--r);padding:11px 0;background:var(--card);text-align:center;font:600 14px var(--sans)}
.fmt span small{display:block;font:500 11px var(--mono);color:var(--ink-3);margin-top:2px}
.fmt span.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sw{width:42px;height:25px;border-radius:999px;background:var(--switch-off);position:relative;flex:none}
.sw:after{content:"";position:absolute;width:21px;height:21px;border-radius:50%;background:#fff;top:2px;left:2px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.sw.on{background:var(--ink)}.sw.on:after{left:19px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;font:600 15px var(--sans);padding:13px 20px;border-radius:var(--r)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.btn.sm{padding:7px 13px;font-size:13.5px}
.btn.wide{width:100%}
.role{font:500 13px var(--sans);color:var(--ink-2);white-space:nowrap}
.people{list-style:none}
.people li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule-2);font-size:14.5px}
.people li:last-child{border-bottom:0}
.people .s{display:block;font-size:12.5px;color:var(--ink-3)}
.people .role{margin-left:auto}
.h2{font:700 21px/1.2 var(--serif);letter-spacing:-.005em}
.media{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.media span{aspect-ratio:1;border-radius:6px;display:block}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;max-width:1100px}

/* ================= PHONE ================= */
@media (max-width:700px){
  .app{display:block;min-height:0}
  .rail,.desk{display:none!important}
  .phone-only{display:block}
  .topbar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 16px;border-bottom:1px solid var(--rule);background:var(--paper)}
  .topbar .logo{height:26px}
  .top-actions{display:flex;align-items:center;gap:16px}
  .top-actions .av{width:30px;height:30px}
  /* iOS-style nav bar: back | centered title | actions */
  .navbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 14px 9px;border-bottom:1px solid var(--rule);background:var(--paper);min-height:56px}
  .navbar .back{display:flex;align-items:center;gap:2px;font-size:16px;color:var(--ink-2)}
  .navbar .mid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;max-width:220px}
  .navbar .mid .nm{font:600 16px/1.2 var(--sans);display:flex;align-items:center;gap:5px}
  .navbar .mid .ttl{font:600 16px/1.2 var(--sans)}
  .navbar .mid .st{font-size:11.5px;color:var(--ink-3)}
  .navbar .acts{justify-self:end;display:flex;gap:14px;align-items:center}
  .wrap{padding:6px 18px 110px}
  .wrap.flush{padding:0 0 110px}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;background:rgba(251,248,243,.97);border-top:1px solid var(--rule);padding:8px 0 26px}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font:500 10.5px var(--sans);color:var(--ink-4)}
  .tabbar a.on{color:var(--ink)}
  .split{display:block;min-height:0}
  .cols{display:block}
  .thread{max-width:none}
  .fmt{grid-template-columns:repeat(4,1fr);gap:6px}
  .pics span{width:104px;height:104px}
}
@media (min-width:701px){ .phone{display:none!important} }

/* chat page additions */
.acc .no{font:500 12.5px var(--mono);color:var(--ink-4);width:22px;flex:none}
.acc .bd.ind{padding-left:34px}
.sumcard{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:0 16px;position:relative;margin-top:14px}
.sumcard:before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--ink);border-radius:var(--r) 0 0 var(--r)}
.sumcard>li{border-bottom:0!important}
.sumcard .hd{padding:13px 0}
.sumcard .lab{font-size:12.5px;color:var(--ink-3);display:block}
.sumcard .lab b{color:var(--red);font-weight:600}
.sumcard .serif-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;font-size:17.5px}
.sumcard li.open .serif-line{white-space:normal}
.sumcard .bd li.you:before{background:var(--red);width:6px;height:6px;border-radius:50%;top:12px}
.colw{max-width:760px;padding:8px 40px 64px}
.sechd{display:flex;justify-content:space-between;align-items:baseline;margin-top:28px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.sechd .h{font:600 13px var(--sans);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.sechd .a{font-size:13px;color:var(--ink-3)}
@media (max-width:700px){ .colw{padding:4px 18px 110px} }

.from span{color:var(--ink-4);margin-left:4px}
.dhead .back{display:flex;align-items:center;margin-right:-4px}
.aside-slim{padding:24px 28px}

.glbl{font:600 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin:26px 2px 9px;display:flex;justify-content:space-between;align-items:center}
.glbl:first-child{margin-top:16px}
.foot{font-size:12.5px;color:var(--ink-3);margin:8px 2px 0}
.chev-s{color:var(--ink-4);font-size:20px;line-height:1;margin-left:2px}
.searchhead{padding:10px 16px 12px;border-bottom:1px solid var(--rule);background:var(--paper)}
.searchhead .row1{display:flex;align-items:center;gap:12px}
.searchhead .row1 .sfield{flex:1}
.searchhead .cancel{font-size:15.5px;color:var(--ink-2)}
.seg.full{display:flex;margin-top:10px}.seg.full span{flex:1;text-align:center}
.preview{background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:34px 32px;box-shadow:0 12px 30px -18px rgba(21,23,27,.25)}
.preview ol{list-style:none;margin-top:6px}
.preview li{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule-2);font-size:13px}
.preview li span:first-child{font:500 12px var(--mono);color:var(--ink-4);width:20px}
.preview li span:last-child{margin-left:auto;color:var(--ink-3)}

.serif-line,.answer p.big,.h2{font-variant-numeric:lining-nums}

/* ---------- book contents (chat page, rev 3.1): no title block; number + title only, tap for more ---------- */
.book{max-width:680px}
.bk-lbl{font:600 13px/1 var(--sans);margin:30px 0 4px}
.toc{list-style:none}
.toc>li{border-bottom:1px solid var(--rule)}
.toc .hd{display:flex;align-items:center;gap:14px;min-height:52px;padding:13px 0}
.toc .no{font:500 12.5px var(--mono);color:var(--ink-4);width:20px;flex:none}
.toc .tt{flex:1;min-width:0;font:400 16px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc .ud{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
.toc li.open .tt{font-weight:600}
.toc li.open .hd{padding-bottom:6px}
.toc .bd{padding:0 0 18px 34px;font-size:14.5px;color:var(--ink-2)}
.toc .meta{font-size:12.5px;color:var(--ink-3)}
.toc .sum{font:700 17px/1.32 var(--serif);color:var(--ink);margin-top:8px}
.toc .bd ul{list-style:none;margin-top:6px}
.toc .bd li{position:relative;padding:4px 0 4px 16px;line-height:1.42}
.toc .bd li:before{content:"";position:absolute;left:1px;top:13px;width:6px;height:1.5px;background:var(--ink-3)}
.toc .bd .go{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-weight:600;font-size:14px;color:var(--ink)}
.toc .bd .go:after{content:"›";font-size:18px;line-height:1;margin-top:-2px}
.toc.catch{margin-top:14px}
.toc.catch .tt{font-weight:500}
@media (max-width:700px){ .toc.catch{margin-top:8px} .bk-lbl{margin-top:26px} }

/* iMessage tapbacks (Oct 7 2026): a badge on the bubble's top corner, and who did it always written underneath. */
.bub-row.tapped{margin-top:18px}
.tb-anchor{position:relative;display:flex;flex-direction:column;align-items:inherit;max-width:100%}
.tb-badge{position:absolute;top:-15px;right:-10px;display:inline-flex;align-items:center;gap:1px;min-width:30px;height:26px;padding:0 7px;justify-content:center;border-radius:13px;background:var(--card);border:1px solid var(--rule);box-shadow:0 0 0 2px var(--paper);font-size:14px;line-height:1;white-space:nowrap}
.bub-row.me .tb-badge{right:auto;left:-10px}
.tb-badge.mine{background:var(--red-tint);border-color:var(--red)}
.tb-badge small{font-size:11px;font-weight:600;color:var(--ink-3);margin-left:3px}
.tb-who{list-style:none;margin:4px 0 2px;padding:0 4px;display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.35;color:var(--ink-3)}
.tb-who-row{padding-left:36px}
.tb-who-row.me{display:flex;justify-content:flex-end;padding-left:0}
.tb-who-row.me .tb-who{align-items:flex-end}
.tb-who li{display:flex;gap:5px;align-items:baseline}
.tb-e{font-size:12.5px}
.src .tb-who{padding:0;margin-top:6px}
.tb-line{text-align:center;font-size:12px;color:var(--ink-3);margin:10px auto;max-width:520px;overflow-wrap:anywhere}
.tb-line b{color:var(--ink-2);font-weight:600}
.tb-line span{margin-left:6px;color:var(--ink-4)}