/* ============================================================
   SQUADRON — "Contest Night"
   Single-theme dark. Every color painted explicitly from tokens.
   ============================================================ */
:root{
  color-scheme: dark;

  /* grounds */
  --ink:#090A10;
  --ink-2:#0D0F17;
  --surface:#13161F;
  --raised:#1A1E2A;
  --raised-2:#232838;
  --line:#272C3C;
  --line-soft:#1C2130;

  /* text */
  --text:#E8EAF2;
  --text-2:#A7AEC2;
  --text-3:#737A8F;
  /* --text-3 measures 4.47:1 on the chat ground — fine for large or decorative
     text, under the 4.5 floor for the small metadata that carries meaning
     (timestamps, day dividers, read receipts). This clears it at 5.19:1. */
  --text-meta:#7E8599;

  /* accents */
  --gold:#E9B949;
  --gold-2:#F6D07E;
  --gold-dim:#7A5D18;
  --gold-wash:rgba(233,185,73,.11);
  --azure:#5E9BF7;
  --azure-dim:#2B4C84;
  --azure-wash:rgba(94,155,247,.12);

  /* semantics */
  --ok:#3FB980;
  --ok-wash:rgba(63,185,128,.12);
  --warn:#D97B2E;
  --warn-wash:rgba(217,123,46,.12);
  --danger:#E45C56;
  --danger-wash:rgba(228,92,86,.12);

  /* competitive-programming rating ladder */
  --rt-gray:#9AA0B0;
  --rt-green:#3FB980;
  --rt-cyan:#3FB3C7;
  --rt-blue:#5E9BF7;
  --rt-violet:#9A7BF0;
  --rt-orange:#E08C3B;
  --rt-red:#E45C56;

  /* type */
  --f-title:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-display:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --f-ui:'Instrument Sans','Segoe UI',Roboto,Arial,sans-serif;
  --f-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px;

  /* radii — spent by role, not stamped everywhere */
  --r-chip:999px; --r-sm:6px; --r-md:10px; --r-lg:14px;

  /* layers */
  --z-panel:20; --z-sticky:40; --z-pop:60; --z-modal:80; --z-toast:100;

  --side:272px; --ctx:286px; --ai:360px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-ui);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;letter-spacing:-.022em;text-wrap:balance;}
button,input,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;padding:0;cursor:pointer;}
[hidden]{display:none !important;}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

:focus-visible{outline:2px solid var(--azure);outline-offset:2px;border-radius:var(--r-sm);}
.skip{position:absolute;left:var(--s3);top:-60px;z-index:var(--z-toast);background:var(--azure);color:#06101F;
  padding:10px 16px;border-radius:var(--r-sm);font-weight:600;transition:top .16s ease;}
.skip:focus{top:var(--s3);}

.icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;}
.icon-sm{width:15px;height:15px;}
.icon-lg{width:22px;height:22px;}

/* ============================= SHELL ============================= */
.app{display:grid;height:100dvh;grid-template-columns:var(--side) minmax(0,1fr) var(--ctx);}
@media (max-width:1279px){ .app{grid-template-columns:var(--side) minmax(0,1fr);} .ctx{display:none;} }
@media (max-width:1023px){ .app{grid-template-columns:minmax(0,1fr);} }
@media (max-width:767px){ .app{grid-template-columns:minmax(0,1fr);} }

/* ---------- squad switcher ---------- */
.sw-wrap{position:relative;padding:10px 10px 6px;flex:none;}
.sw{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);
  text-align:left;transition:background .15s ease;min-height:52px;}
.sw:hover{background:var(--raised);}
.sw[aria-expanded="true"]{background:var(--raised-2);}
.sw-av{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  font-family:var(--f-display);font-weight:800;font-size:12px;letter-spacing:.01em;
  background:var(--gold);color:#1A1204;}
.sw-t{flex:1;min-width:0;display:block;}
.sw-n{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.015em;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sw-s{display:block;font-family:var(--f-mono);font-size:10px;color:var(--text-3);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;}
.sw-chev{color:var(--text-3);flex:none;transition:transform .22s cubic-bezier(.22,1,.36,1);}
.sw[aria-expanded="true"] .sw-chev{transform:rotate(180deg);}

.sw-menu{position:absolute;left:10px;right:10px;top:calc(100% - 2px);z-index:var(--z-pop);
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 22px 56px rgba(0,0,0,.66);padding:5px;max-height:70vh;overflow-y:auto;}
.sw-lab{padding:8px 9px 5px;font-family:var(--f-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);}
.sq-item{width:100%;display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:var(--r-sm);
  text-align:left;transition:background .14s ease;min-height:46px;}
.sq-item:hover{background:var(--raised-2);}
.sq-item[aria-checked="true"]{background:var(--gold-wash);}
.sq-av{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;
  font-family:var(--f-display);font-weight:700;font-size:10.5px;background:var(--raised-2);
  color:var(--text-2);border:1px solid var(--line);}
.sq-t{flex:1;min-width:0;}
.sq-t b{display:block;font-size:13px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sq-t span{display:block;font-family:var(--f-mono);font-size:10px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sq-tick{color:var(--gold);flex:none;}
.sq-item[aria-checked="false"] .sq-tick{display:none;}
.sq-badge{font-family:var(--f-mono);font-size:10px;font-weight:700;background:var(--danger);
  color:#140608;border-radius:var(--r-chip);padding:1px 6px;flex:none;}
.sw-sep{height:1px;background:var(--line);margin:5px 0;}
.sw-act{width:100%;display:flex;align-items:center;gap:9px;padding:9px;border-radius:var(--r-sm);
  font-size:12.5px;font-weight:600;color:var(--text-2);text-align:left;min-height:40px;
  transition:background .14s ease,color .14s ease;}
.sw-act:hover{background:var(--raised-2);color:var(--text);}
.sw-act .icon{color:var(--text-3);}

.side-search{display:flex;align-items:center;gap:9px;margin:0 10px 8px;padding:0 11px;height:36px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--ink);color:var(--text-3);
  font-size:12.5px;flex:none;transition:background .15s ease,border-color .15s ease,color .15s ease;}
.side-search:hover{background:var(--raised);color:var(--text-2);border-color:var(--raised-2);}
.side-search span{flex:1;text-align:left;}

/* ---------- channel sidebar ---------- */
.side{background:var(--ink-2);border-right:1px solid var(--line-soft);display:flex;flex-direction:column;
  min-width:0;min-height:0;}
.side-sub{font-size:11.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.side-scroll{flex:1;min-height:0;overflow-y:auto;padding:var(--s3) var(--s2) var(--s6);}
.grp{margin-top:var(--s4);}
.grp:first-child{margin-top:0;}
.grp-h{display:flex;align-items:center;gap:6px;padding:0 var(--s2) 6px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
.chan{width:100%;display:flex;align-items:center;gap:9px;padding:7px var(--s2);border-radius:var(--r-sm);
  color:var(--text-2);font-size:13.5px;text-align:left;transition:background .14s ease,color .14s ease;min-height:34px;}
.chan:hover{background:var(--raised);color:var(--text);}
.chan[aria-current="true"]{background:var(--raised-2);color:var(--text);font-weight:600;}
.chan .icon{color:var(--text-3);}
.chan[aria-current="true"] .icon{color:var(--azure);}
.chan-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chan-badge{font-family:var(--f-mono);font-size:10px;font-weight:700;background:var(--danger);color:#140608;
  border-radius:var(--r-chip);padding:1px 6px;line-height:1.5;}
.chan-live{font-family:var(--f-mono);font-size:10px;color:var(--ok);}

.me-card{border-top:1px solid var(--line-soft);padding:10px var(--s3);display:flex;align-items:center;gap:10px;background:var(--ink);}
.me-card .av{width:34px;height:34px;}
/* a span with no display is an inline box: the name and the level ran together
   as one string, and the ellipsis below never applied. Stack them the way the
   squad switcher at the top of this same rail does. */
.me-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;align-items:flex-start;}
.me-name{max-width:100%;font-size:13px;font-weight:600;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.me-lvl{max-width:100%;font-family:var(--f-mono);font-size:10.5px;line-height:1.2;color:var(--gold);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.icon-btn{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--text-3);
  transition:background .14s ease,color .14s ease;}
.icon-btn:hover{background:var(--raised-2);color:var(--text);}

/* ---------- main ---------- */
.main{container-type:inline-size;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface);}
.topbar{height:56px;flex:none;display:flex;align-items:center;gap:var(--s3);padding:0 var(--s5);
  border-bottom:1px solid var(--line-soft);background:var(--ink-2);}
.topbar h1{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:7px;min-width:0;flex:none;max-width:42%;}
.topbar h1 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar h1 .icon{color:var(--text-3);}
.top-div{width:1px;height:20px;background:var(--line);flex:none;}
.top-note{flex:1;min-width:0;font-size:12.5px;color:var(--text-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:1180px){ .top-note,.top-div{display:none;} }
.top-right{margin-left:auto;display:flex;align-items:center;gap:var(--s2);}

/* expandable tabs — icon-only at rest, the active one opens to show its label.
   The label rides a max-width transition because width:auto cannot be animated. */
.tabs{display:flex;align-items:center;gap:4px;background:var(--raised);border:1px solid var(--line);
  border-radius:15px;padding:4px;box-shadow:0 1px 2px rgba(0,0,0,.28);}
.tab{display:flex;align-items:center;gap:0;padding:7px 9px;border-radius:11px;font-size:12.5px;
  font-weight:600;color:var(--text-3);white-space:nowrap;min-height:34px;
  transition:background .3s ease,color .3s ease,padding .55s cubic-bezier(.22,1,.36,1) .08s;}
.tab:hover{background:var(--raised-2);color:var(--text);}
.tab .icon{transition:color .3s ease;}
.tab-label{display:block;max-width:0;opacity:0;overflow:hidden;margin-left:0;
  transition:max-width .55s cubic-bezier(.22,1,.36,1) .08s,
             opacity .34s ease .14s,
             margin-left .55s cubic-bezier(.22,1,.36,1) .08s;}
.tab[aria-selected="true"]{background:var(--raised-2);color:var(--text);padding:7px 15px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;}
.tab[aria-selected="true"] .icon{color:var(--gold);}
.tab[aria-selected="true"] .tab-label{max-width:120px;opacity:1;margin-left:8px;}
.tab-sep{width:1.2px;height:22px;background:var(--line);border-radius:1px;margin:0 3px;flex:none;}

.view{flex:1;min-height:0;display:flex;flex-direction:column;
  animation:viewIn .28s cubic-bezier(.22,1,.36,1);}
@keyframes viewIn{from{transform:translateY(10px);}to{transform:none;}}
.view[hidden]{display:none;}
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.scroll::-webkit-scrollbar{width:10px;}
.scroll::-webkit-scrollbar-thumb{background:var(--raised-2);border-radius:99px;border:3px solid var(--surface);}
.scroll::-webkit-scrollbar-track{background:transparent;}

/* ---------- shared bits ---------- */
.av{border-radius:var(--r-chip);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;
  font-size:12px;color:#0B0D14;flex:none;letter-spacing:.01em;}
.av-s{width:26px;height:26px;font-size:10px;}
.av-m{width:36px;height:36px;font-size:12.5px;}
.av-l{width:52px;height:52px;font-size:17px;}
.av-wrap{position:relative;flex:none;}
.presence{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2.5px solid var(--ink-2);}
.p-on{background:var(--ok);} .p-idle{background:var(--warn);} .p-off{background:var(--text-3);}

.chip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-chip);padding:3px 9px;
  font-size:11px;font-weight:600;line-height:1.6;border:1px solid transparent;white-space:nowrap;}
.chip .icon{width:12px;height:12px;stroke-width:2.2;}
.c-gold{background:var(--gold-wash);color:var(--gold-2);border-color:var(--gold-dim);}
.c-azure{background:var(--azure-wash);color:var(--azure);border-color:var(--azure-dim);}
.c-ok{background:var(--ok-wash);color:var(--ok);border-color:rgba(63,185,128,.3);}
.c-warn{background:var(--warn-wash);color:var(--warn);border-color:rgba(217,123,46,.32);}
.c-danger{background:var(--danger-wash);color:var(--danger);border-color:rgba(228,92,86,.3);}
.c-mute{background:var(--raised-2);color:var(--text-2);border-color:var(--line);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;border:1px solid var(--line);background:var(--raised);color:var(--text-2);
  transition:background .15s ease,color .15s ease,border-color .15s ease;min-height:36px;}
.btn:hover{background:var(--raised-2);color:var(--text);}
.btn-primary{background:var(--gold);color:#1A1204;border-color:var(--gold);}
.btn-primary:hover{background:var(--gold-2);color:#1A1204;border-color:var(--gold-2);}
.btn-ghost{background:transparent;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-sm{padding:5px 10px;min-height:30px;font-size:12px;}

.panel{background:var(--ink-2);border:1px solid var(--line-soft);border-radius:var(--r-lg);}
.panel-h{display:flex;align-items:center;gap:var(--s2);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-soft);}
.panel-h h3{font-size:13.5px;font-weight:700;}
.panel-h .icon{color:var(--gold);}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--gold);flex:none;}

/* ============================= CHAT ============================= */
.pinned{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s5);background:var(--gold-wash);
  border-bottom:1px solid var(--gold-dim);font-size:12.5px;color:var(--gold-2);}
.pinned .icon{color:var(--gold);}
.pinned b{color:var(--gold-2);font-weight:700;}
.pinned .mono{color:var(--gold-2);}

.msgs{padding:var(--s5) var(--s5) var(--s4);display:flex;flex-direction:column;gap:2px;}
.daysep{display:flex;align-items:center;gap:var(--s3);margin:var(--s5) 0 var(--s3);}
.daysep::before,.daysep::after{content:"";height:1px;background:var(--line-soft);flex:1;}
.daysep span{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}

.msg{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:6px var(--s3);border-radius:var(--r-md);
  transition:background .14s ease;}
.msg:hover{background:var(--ink-2);}
.msg.cont{padding-top:1px;padding-bottom:1px;}
.msg.cont .msg-head{display:none;}
.msg-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:1px;}
.msg-name{font-size:13.5px;font-weight:700;font-family:var(--f-display);letter-spacing:-.01em;}
.msg-handle{font-family:var(--f-mono);font-size:11px;}
.msg-time{font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);}
.msg-body{font-size:14.5px;color:var(--text);line-height:1.62;overflow-wrap:anywhere;}
.msg-body p{margin:0 0 4px;}
.msg-body p:last-child{margin-bottom:0;}
.mention{color:var(--azure);background:var(--azure-wash);border-radius:4px;padding:0 4px;font-weight:600;}
.ic{font-family:var(--f-mono);font-size:12.5px;background:var(--raised);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px;color:var(--gold-2);}

.code{margin:7px 0 5px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink);overflow:hidden;}
.code-h{display:flex;align-items:center;gap:7px;padding:6px 11px;border-bottom:1px solid var(--line-soft);
  background:var(--ink-2);font-family:var(--f-mono);font-size:11px;color:var(--text-3);}
.code-h .icon{width:13px;height:13px;color:var(--text-3);}
.code pre{margin:0;padding:11px 13px;overflow-x:auto;font-family:var(--f-mono);font-size:12.5px;line-height:1.72;
  color:var(--text-2);}
.k{color:var(--rt-violet);} .t{color:var(--rt-cyan);} .n{color:var(--gold-2);} .s{color:var(--ok);} .cm{color:var(--text-3);font-style:italic;}

.reacts{display:flex;flex-wrap:wrap;gap:4px;}
.react{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--raised);
  border-radius:var(--r-chip);padding:2px 9px;font-family:var(--f-mono);font-size:11px;color:var(--text-2);
  transition:border-color .15s ease,background .15s ease;min-height:24px;}
.react:hover{border-color:var(--azure-dim);background:var(--azure-wash);}
.react[data-mine="1"]{border-color:var(--azure-dim);background:var(--azure-wash);color:var(--azure);}
.react .icon{width:12px;height:12px;}

.embed{margin-top:8px;border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:var(--r-sm);
  background:var(--ink-2);padding:10px 13px;display:flex;flex-direction:column;gap:5px;max-width:440px;}
.embed-t{font-size:12.5px;font-weight:600;color:var(--text);}
.embed-r{display:flex;flex-wrap:wrap;gap:var(--s3);font-family:var(--f-mono);font-size:11px;color:var(--text-3);}
.embed-r b{color:var(--text-2);font-weight:500;}

/* 167px of composer around a single 41px line is a lot of furniture for one
   input; the box keeps its breathing room, the frame around it gives some back. */
.composer{flex:none;padding:var(--s2) var(--s5) var(--s3);background:var(--surface);
  padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom));}
.composer-box{border:1px solid var(--line);background:var(--ink-2);border-radius:var(--r-md);
  transition:border-color .16s ease;}
.composer-box:focus-within{border-color:var(--azure-dim);}
.composer-in{width:100%;background:transparent;border:0;resize:none;outline:none;padding:10px 14px 2px;
  font-size:16px;line-height:1.55;color:var(--text);max-height:150px;font-family:var(--f-ui);}
.composer-in::placeholder{color:var(--text-3);}
.composer-bar{display:flex;align-items:center;gap:var(--s1);padding:2px 8px 6px 10px;}
.composer-bar .spacer{flex:1;}
.send{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--gold);
  color:#1A1204;transition:background .15s ease,opacity .15s ease;}
.send:hover{background:var(--gold-2);}
.composer-hint{font-family:var(--f-mono);font-size:10px;color:var(--text-meta);padding:5px 4px 0;opacity:.75;}

/* ============================= BOARD ============================= */
.board-bar{flex:none;display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s5);
  border-bottom:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none;}
.board-bar::-webkit-scrollbar{display:none;}
.fchip{border:1px solid var(--line);background:var(--raised);color:var(--text-2);border-radius:var(--r-chip);
  padding:5px 12px;font-size:12px;font-weight:600;white-space:nowrap;transition:all .15s ease;min-height:30px;}
.fchip:hover{color:var(--text);border-color:var(--raised-2);}
.fchip[aria-pressed="true"]{background:var(--azure-wash);color:var(--azure);border-color:var(--azure-dim);}

.board{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(216px,1fr));gap:var(--s3);
  padding:var(--s4) var(--s5) var(--s6);overflow-x:auto;overflow-y:hidden;align-items:start;height:100%;}
.col{display:flex;flex-direction:column;min-height:0;max-height:100%;background:var(--ink-2);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);transition:border-color .16s ease,background .16s ease;}
.col.over{border-color:var(--azure);background:var(--azure-wash);}
.col-h{flex:none;display:flex;align-items:center;gap:8px;padding:12px var(--s3) 10px;}
.col-dot{width:8px;height:8px;border-radius:2px;flex:none;}
.col-h h3{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;}
.col-n{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--text-3);background:var(--raised);
  border-radius:var(--r-chip);padding:1px 8px;}
.col-list{flex:1;min-height:60px;overflow-y:auto;padding:0 10px 12px;display:flex;flex-direction:column;gap:8px;}

.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px 12px 10px;display:flex;flex-direction:column;gap:8px;touch-action:manipulation;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;}
.card:hover{border-color:var(--raised-2);background:var(--raised);}
@media (pointer:fine){.card{cursor:grab;} .card:active{cursor:grabbing;}}
@media (hover:none){.card-more{opacity:1;}}
.card:focus-visible{outline:2px solid var(--azure);outline-offset:2px;}
.card[data-grabbed="true"]{border-color:var(--azure);box-shadow:0 0 0 3px var(--azure-wash);cursor:grabbing;}
.card.dragging{opacity:.32;}
.card-ghost{position:fixed;z-index:var(--z-modal);pointer-events:none;width:240px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);border-color:var(--azure);background:var(--raised);}
.card-top{display:flex;align-items:flex-start;gap:8px;}
.prio{width:3px;border-radius:2px;align-self:stretch;min-height:18px;flex:none;}
.p-hi{background:var(--danger);} .p-md{background:var(--warn);} .p-lo{background:var(--text-3);}
.card-t{font-size:13.5px;font-weight:600;line-height:1.42;flex:1;min-width:0;overflow-wrap:anywhere;}
.card-more{width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--text-3);
  opacity:0;transition:opacity .15s ease,background .15s ease,color .15s ease;flex:none;margin:-3px -4px 0 0;}
.card:hover .card-more,.card:focus-within .card-more{opacity:1;}
.card-more:hover{background:var(--raised-2);color:var(--text);}
.card-tags{display:flex;flex-wrap:wrap;gap:5px;}
.tag{font-family:var(--f-mono);font-size:10px;color:var(--text-3);background:var(--raised-2);
  border-radius:var(--r-sm);padding:2px 6px;}
.card-foot{display:flex;align-items:center;gap:10px;padding-top:2px;border-top:1px solid var(--line-soft);margin-top:1px;}
.card-xp{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--gold);}
.card-xp .icon{width:12px;height:12px;stroke-width:2.4;}
.card-due{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono);font-size:11px;color:var(--text-3);}
.card-due.late{color:var(--danger);}
.card-due .icon{width:12px;height:12px;}
.card-foot .av{margin-left:auto;}
.col-add{margin:0 10px 10px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;
  border:1px dashed var(--line);border-radius:var(--r-sm);color:var(--text-3);font-size:12px;font-weight:600;
  transition:color .15s ease,border-color .15s ease;min-height:36px;}
.col-add:hover{color:var(--text-2);border-color:var(--raised-2);}

/* card action popover */
.pop{position:fixed;z-index:var(--z-pop);min-width:212px;background:var(--raised);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:0 14px 36px rgba(0,0,0,.6);padding:5px;}
.pop-l{padding:7px 9px 5px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
.pop-i{width:100%;display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r-sm);
  font-size:13px;color:var(--text-2);text-align:left;transition:background .13s ease,color .13s ease;min-height:36px;}
.pop-i:hover{background:var(--raised-2);color:var(--text);}
.pop-i .icon{color:var(--text-3);}
.pop-i.gold{color:var(--gold);} .pop-i.gold .icon{color:var(--gold);}
.pop-i[disabled]{opacity:.35;cursor:not-allowed;}
.pop-sep{height:1px;background:var(--line);margin:5px 0;}

/* ============================= XP ============================= */
.xp-wrap{padding:var(--s5) var(--s5) var(--s7);display:grid;gap:var(--s4);grid-template-columns:repeat(12,1fr);align-content:start;}
.g6{grid-column:span 6;} .g4{grid-column:span 4;} .g8{grid-column:span 8;} .g12{grid-column:span 12;}
@container (max-width:880px){ .g6,.g4,.g8{grid-column:span 12;} }
@container (max-width:560px){ .lvl{gap:var(--s4);} }

.lvl{display:flex;align-items:center;gap:var(--s5);padding:var(--s5);flex-wrap:wrap;}
.ring{position:relative;width:120px;height:120px;flex:none;}
.ring svg{transform:rotate(-90deg);display:block;}
.ring-mid{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:0;}
.ring-n{font-family:var(--f-display);font-size:32px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--gold);}
.ring-l{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-top:4px;}
.lvl-meta{flex:1;min-width:190px;display:flex;flex-direction:column;gap:10px;}
.lvl-meta h2{font-size:21px;font-weight:700;}
.xp-line{font-family:var(--f-mono);font-size:12.5px;color:var(--text-2);}
.xp-line b{color:var(--gold);font-weight:700;}
.bar{height:7px;border-radius:99px;background:var(--raised-2);overflow:hidden;}
.bar-f{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold-dim),var(--gold));}
.streak{display:flex;gap:var(--s5);flex-wrap:wrap;}
.stat-k{font-family:var(--f-mono);font-size:19px;font-weight:700;color:var(--text);line-height:1.2;}
.stat-k .icon{width:15px;height:15px;color:var(--warn);vertical-align:-1px;}
.stat-l{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}

.ledger{display:flex;flex-direction:column;}
.led{display:flex;align-items:center;gap:var(--s3);padding:11px var(--s5);border-bottom:1px solid var(--line-soft);}
.ledger .led:last-child{border-bottom:0;}
.led-ic{width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
  background:var(--gold-wash);color:var(--gold);border:1px solid var(--gold-dim);}
.led-b{flex:1;min-width:0;}
.led-t{font-size:13px;font-weight:500;overflow-wrap:anywhere;}
.led-s{font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);}
.led-v{font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--gold);flex:none;}
.led-v.neg{color:var(--text-3);}

.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;padding:var(--s4) var(--s5) var(--s5);}
.badge{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 8px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface);text-align:center;}
.badge.locked{opacity:.42;border-style:dashed;background:transparent;}
.badge-ic{width:38px;height:38px;border-radius:var(--r-chip);display:grid;place-items:center;
  background:var(--gold-wash);color:var(--gold);border:1px solid var(--gold-dim);}
.badge.locked .badge-ic{background:var(--raised);color:var(--text-3);border-color:var(--line);}
.badge-n{font-size:11.5px;font-weight:600;line-height:1.32;}
.badge-d{font-family:var(--f-mono);font-size:9.5px;color:var(--text-3);}

table.lb{width:100%;border-collapse:collapse;font-size:13px;}
.lb th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
  padding:9px var(--s5);border-bottom:1px solid var(--line-soft);white-space:nowrap;}
.lb td{padding:9px var(--s5);border-bottom:1px solid var(--line-soft);vertical-align:middle;}
.lb tr:last-child td{border-bottom:0;}
.lb tbody tr{transition:background .14s ease;}
.lb tbody tr:hover{background:var(--ink);}
.lb tr.me{background:var(--gold-wash);}
.lb tr.me:hover{background:var(--gold-wash);}
.rank{font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--text-3);width:44px;}
.rank.top{color:var(--gold);}
.who{display:flex;align-items:center;gap:9px;min-width:0;}
.who-n{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.who-h{display:block;}
.who-h{font-family:var(--f-mono);font-size:11px;}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}
.delta{font-family:var(--f-mono);font-size:11.5px;font-weight:700;}
.delta.up{color:var(--ok);} .delta.dn{color:var(--danger);} .delta.flat{color:var(--text-3);}
.tbl-scroll{overflow-x:auto;}

/* ============================= TEAM FINDER ============================= */
.find-head{padding:var(--s6) var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s3);}
.find-head h2{font-size:25px;font-weight:800;letter-spacing:-.03em;}
.find-head p{margin:0;font-size:14px;color:var(--text-2);max-width:62ch;line-height:1.6;}
.search{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--ink-2);
  border-radius:var(--r-md);padding:0 13px;max-width:420px;transition:border-color .16s ease;}
.search:focus-within{border-color:var(--azure-dim);}
.search .icon{color:var(--text-3);}
.search input{flex:1;min-width:0;background:transparent;border:0;outline:none;padding:11px 0;font-size:16px;}
.search input::placeholder{color:var(--text-3);}
.find-filters{display:flex;flex-wrap:wrap;gap:7px;}

.squads{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--s3);padding:0 var(--s5) var(--s7);}
.squad{display:flex;flex-direction:column;gap:11px;padding:var(--s4);background:var(--ink-2);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);transition:border-color .17s ease,background .17s ease;}
.squad:hover{border-color:var(--line);background:var(--surface);}
.squad-top{display:flex;align-items:flex-start;gap:11px;}
.squad-av{width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;
  font-family:var(--f-display);font-weight:800;font-size:14px;letter-spacing:.01em;}
.squad-t{flex:1;min-width:0;}
.squad-t h3{font-size:14.5px;font-weight:700;line-height:1.34;overflow-wrap:anywhere;}
.squad-org{font-family:var(--f-mono);font-size:11px;color:var(--text-3);margin-top:2px;}
.squad-d{font-size:12.5px;color:var(--text-2);line-height:1.58;overflow-wrap:anywhere;}
.slots{display:flex;align-items:center;gap:8px;}
.slot-dots{display:flex;gap:4px;}
.slot{width:9px;height:9px;border-radius:2px;background:var(--raised-2);border:1px solid var(--line);}
.slot.filled{background:var(--azure);border-color:var(--azure);}
.slot-t{font-family:var(--f-mono);font-size:11px;color:var(--text-2);}
.slot-t b{color:var(--gold);font-weight:700;}
.squad-foot{display:flex;align-items:center;gap:var(--s2);padding-top:11px;border-top:1px solid var(--line-soft);margin-top:1px;}
.cap{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-3);min-width:0;}
.cap b{color:var(--text-2);font-weight:600;}
.squad-foot .btn{margin-left:auto;}
.squad[data-applied="1"]{border-color:var(--ok);}

/* ============================= DOCS ============================= */
.doc{max-width:760px;margin:0 auto;padding:var(--s7) var(--s5) var(--s8);}
.doc-eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap;}
.doc-jump{margin-left:auto;cursor:pointer;transition:background .16s ease,transform .16s ease;}
.doc-jump:hover{background:rgba(94,155,247,.2);}
.doc-jump:active{transform:scale(.96);}
.doc h2{font-size:32px;font-weight:800;letter-spacing:-.035em;line-height:1.12;margin-bottom:7px;}
.doc-meta{font-family:var(--f-mono);font-size:11.5px;color:var(--text-3);margin-bottom:var(--s6);
  padding-bottom:var(--s4);border-bottom:1px solid var(--line-soft);}
.doc h3{font-size:17px;font-weight:700;margin:var(--s6) 0 9px;letter-spacing:-.02em;}
.doc p{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--text-2);max-width:66ch;}
.doc p strong{color:var(--text);font-weight:600;}
.callout{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r-md);background:var(--azure-wash);
  border:1px solid var(--azure-dim);margin:var(--s4) 0;}
.callout .icon{color:var(--azure);margin-top:1px;}
.callout p{margin:0;font-size:13.5px;color:var(--text-2);}
.checks{list-style:none;padding:0;margin:0 0 var(--s4);display:flex;flex-direction:column;gap:1px;}
.check{display:flex;align-items:flex-start;gap:10px;padding:6px 8px;border-radius:var(--r-sm);
  transition:background .14s ease;cursor:pointer;}
.check:hover{background:var(--ink-2);}
.check input{appearance:none;width:17px;height:17px;border:1.5px solid var(--line);border-radius:4px;flex:none;
  margin:2px 0 0;background:var(--raised);cursor:pointer;display:grid;place-items:center;transition:all .16s ease;}
.check input:checked{background:var(--ok);border-color:var(--ok);}
.check input:checked::after{content:"";width:9px;height:5px;border-left:2px solid #04180F;border-bottom:2px solid #04180F;
  transform:rotate(-45deg) translate(1px,-1px);}
.check span{font-size:14.5px;line-height:1.55;color:var(--text-2);}
.check input:checked + span{color:var(--text-3);text-decoration:line-through;}
.doc-hint{font-family:var(--f-mono);font-size:11.5px;color:var(--text-3);padding:11px 0 0;border-top:1px dashed var(--line);
  margin-top:var(--s6);}
.doc-hint .ic{font-size:11px;}

/* ============================= CONTEXT PANEL ============================= */
body[data-ctx="off"] .ctx{display:none;}
@media (min-width:1280px){ body[data-ctx="off"] .app{grid-template-columns:var(--side) minmax(0,1fr);} }
#ctx-toggle[aria-pressed="false"]{color:var(--text-3);}
#ctx-toggle[aria-pressed="true"]{color:var(--gold);background:var(--gold-wash);}
@media (max-width:1279px){ #ctx-toggle{display:none;} }
.ctx{background:var(--ink-2);border-left:1px solid var(--line-soft);display:flex;flex-direction:column;
  min-width:0;min-height:0;}
@media (max-width:1279px){ .ctx{display:none;} }
.ctx-h{flex:none;height:56px;display:flex;align-items:center;gap:8px;padding:0 var(--s4);
  border-bottom:1px solid var(--line-soft);}
.ctx-h h3{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);}
.ctx-h .icon{color:var(--text-3);}
.ctx-body{flex:1;min-height:0;overflow-y:auto;padding:var(--s4) var(--s4) var(--s6);display:flex;flex-direction:column;gap:var(--s5);}
.ctx-sec{display:flex;flex-direction:column;gap:9px;}
.member{display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:var(--r-sm);
  transition:background .14s ease;width:100%;text-align:left;min-height:42px;}
.member:hover{background:var(--raised);}
.member-b{min-width:0;flex:1;display:block;}
.member-n{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.member-s{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ctx-card{border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--surface);padding:13px;
  display:flex;flex-direction:column;gap:9px;}
.ctd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);font-size:12.5px;}
.ctd .k{color:var(--text-3);font-family:var(--f-ui);}
.ctd .v{font-family:var(--f-mono);font-size:12px;color:var(--text-2);text-align:right;}
.count{display:flex;align-items:baseline;gap:6px;}
.count b{font-family:var(--f-mono);font-size:26px;font-weight:700;color:var(--gold);letter-spacing:-.02em;line-height:1;}
.count span{font-family:var(--f-mono);font-size:11px;color:var(--text-3);}
.spark{display:block;width:100%;height:38px;}

/* ============================= CALENDAR ============================= */
.cal-wrap{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:var(--s4);
  padding:var(--s5) var(--s5) var(--s7);align-items:start;}
@container (max-width:820px){ .cal-wrap{grid-template-columns:minmax(0,1fr);} }
.cal-legend{display:flex;flex-wrap:wrap;gap:7px 18px;padding:11px var(--s5);border-bottom:1px solid var(--line-soft);}
.lk{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);}
.lk i,.cdots i{width:7px;height:7px;border-radius:2px;display:block;flex:none;}
.d-task{background:var(--gold);} .d-contest{background:var(--azure);}
.d-deadline{background:var(--danger);} .d-event{background:var(--ok);}

.cgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:var(--s3) var(--s4) var(--s4);}
.cdows{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;}
.cdow{text-align:center;font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);padding-bottom:5px;}
.cday{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:64px;padding:9px 3px 7px;
  border-radius:var(--r-sm);border:1px solid transparent;background:var(--surface);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;}
.cday:hover{background:var(--raised);border-color:var(--line);}
.cday.out{opacity:.3;}
.cnum{font-size:12.5px;font-weight:600;color:var(--text-2);line-height:1;}
.cday.today{background:var(--gold-wash);border-color:var(--gold-dim);}
.cday.today .cnum{color:var(--gold);font-weight:700;}
.cday[aria-pressed="true"]{box-shadow:0 0 0 2px var(--azure);border-color:transparent;}
.cdots{display:flex;gap:3px;min-height:7px;}
@media (max-width:767px){ .cday{min-height:52px;padding:7px 2px 6px;} .cgrid{gap:3px;padding:var(--s2) var(--s3) var(--s3);} }

.agenda{display:flex;flex-direction:column;}
.ag{display:grid;grid-template-columns:42px 28px minmax(0,1fr);gap:10px;align-items:start;
  padding:12px var(--s5);border-bottom:1px solid var(--line-soft);border-left:2px solid transparent;}
.agenda .ag:last-child{border-bottom:0;}
.ag-t{font-size:11px;color:var(--text-3);padding-top:6px;}
.ag-ic{width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;
  border:1px solid var(--line);background:var(--raised);}
.ag-b{min-width:0;display:flex;flex-direction:column;gap:3px;}
.ag-title{font-size:13px;font-weight:600;line-height:1.42;overflow-wrap:anywhere;}
.ag-meta{font-size:10.5px;color:var(--text-3);overflow-wrap:anywhere;line-height:1.5;}
.ag-task{border-left-color:var(--gold);} .ag-task .ag-ic{color:var(--gold);}
.ag-contest{border-left-color:var(--azure);} .ag-contest .ag-ic{color:var(--azure);}
.ag-deadline{border-left-color:var(--danger);} .ag-deadline .ag-ic{color:var(--danger);}
.ag-event{border-left-color:var(--ok);} .ag-event .ag-ic{color:var(--ok);}
.agenda-empty{margin:0;padding:var(--s6) var(--s5);font-size:13px;color:var(--text-3);line-height:1.65;}
.cal-foot{padding:12px var(--s5) var(--s5);border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:9px;}

/* ============================= NOTEBOOK DISCUSSION ============================= */
.doc-talk{margin-top:var(--s7);padding:var(--s6) var(--s5) var(--s5);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);background:var(--ink-2);scroll-margin-top:var(--s5);}
.doc-talk-h{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);}
.doc-talk-h .chip{margin-left:auto;}
.talk{display:flex;flex-direction:column;gap:var(--s4);margin-bottom:var(--s5);}
.tk{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;}
.tk-b{min-width:0;}
.tk-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:3px;}
.tk-n{font-size:12.5px;font-weight:700;font-family:var(--f-display);letter-spacing:-.01em;}
.tk-t{font-size:10.5px;color:var(--text-3);}
.tk p{margin:0;font-size:14px;line-height:1.62;color:var(--text-2);overflow-wrap:anywhere;}
.talk-box{border:1px solid var(--line);background:var(--ink-2);border-radius:var(--r-md);
  transition:border-color .16s ease;}
.talk-box:focus-within{border-color:var(--azure-dim);}
.talk-in{width:100%;background:transparent;border:0;outline:none;resize:none;padding:12px 14px 6px;
  font-size:16px;line-height:1.55;color:var(--text);font-family:var(--f-ui);max-height:160px;}
.talk-in::placeholder{color:var(--text-3);}
.talk-bar{display:flex;align-items:center;gap:var(--s3);padding:4px 10px 10px 14px;}
.talk-hint{font-size:10.5px;color:var(--text-3);flex:1;min-width:0;}

/* ============================= MOBILE ============================= */
.mtop{display:none;}
.mnav{display:none;}
.scrim{position:fixed;inset:0;background:rgba(4,5,9,.72);z-index:var(--z-panel);opacity:0;}
@media (max-width:1023px){
  .side{position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:calc(var(--z-panel) + 1);
    transform:translateX(-108%);box-shadow:14px 0 44px rgba(0,0,0,.5);}
  .side[data-open="1"]{transform:none;}
}
@media (max-width:767px){
  body{font-size:14.5px;}
  .side{left:0;width:min(292px,86vw);}
  .main{padding-bottom:0;}
  .mtop{display:flex;align-items:center;gap:10px;height:54px;flex:none;padding:0 var(--s3);
    border-bottom:1px solid var(--line-soft);background:var(--ink-2);}
  .mtop-t{min-width:0;flex:1;}
  .mtop-t .a{font-size:14px;font-weight:700;font-family:var(--f-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .mtop-t .b{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .topbar{display:none;}
  .mnav{display:grid;grid-template-columns:repeat(5,1fr);flex:none;background:var(--ink-2);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);}
  .mnav-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 2px;min-height:56px;color:var(--text-3);transition:color .15s ease;}
  .mnav-b .icon{width:20px;height:20px;}
  .mnav-b span{font-size:10px;font-weight:600;letter-spacing:.01em;}
  .mnav-b[aria-current="true"]{color:var(--gold);}
  .board{grid-template-columns:repeat(4,minmax(252px,80vw));padding:var(--s3) var(--s4) var(--s4);gap:var(--s2);
    scroll-snap-type:x mandatory;}
  .col{scroll-snap-align:start;}
  .msgs{padding:var(--s4) var(--s3) var(--s2);}
  .msg{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:6px 8px;}
  .msg .av-m{width:32px;height:32px;font-size:11.5px;}
  .composer{padding:var(--s2) var(--s3) var(--s4);padding-bottom:var(--s4);}
  .board{padding-bottom:var(--s5);}
  .xp-wrap{padding-bottom:var(--s6);}
  .xp-wrap,.squads{padding-left:var(--s4);padding-right:var(--s4);}
  .find-head{padding:var(--s5) var(--s4) var(--s3);}
  .find-head h2{font-size:22px;}
  .doc{padding:var(--s5) var(--s4) var(--s7);}
  .doc h2{font-size:26px;}
  .pinned{padding:9px var(--s4);}
  .lb th,.lb td{padding:9px var(--s4);}
  .led{padding:11px var(--s4);}
  .badges{padding:var(--s3) var(--s4) var(--s4);}
  .lvl{padding:var(--s4);gap:var(--s4);}
  .ring{width:96px;height:96px;}
  .ring-n{font-size:26px;}
}

/* ============================= GUIDED TOUR ============================= */
.co-block{position:fixed;inset:0;z-index:calc(var(--z-modal) + 3);}
.co-hole{position:fixed;border-radius:var(--r-md);pointer-events:none;
  z-index:calc(var(--z-modal) + 4);border:2px solid var(--gold);
  box-shadow:0 0 0 9999px rgba(4,5,9,.76),0 0 0 5px var(--gold-wash);}
.co-hole[data-moved="1"]{animation:coPulse .36s cubic-bezier(.22,1,.36,1);}
@keyframes coPulse{from{transform:scale(1.035);}to{transform:none;}}
.co-card{position:fixed;z-index:calc(var(--z-modal) + 5);width:min(330px,calc(100vw - 28px));
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 64px rgba(0,0,0,.68);padding:var(--s5);}
.co-card[data-moved="1"]{animation:coIn .3s cubic-bezier(.22,1,.36,1);}
@keyframes coIn{from{transform:translateY(6px);}to{transform:none;}}
.co-card .eyebrow{margin-bottom:9px;}
.co-card h3{font-size:16.5px;font-weight:800;letter-spacing:-.025em;margin-bottom:7px;line-height:1.25;}
.co-card p{margin:0;font-size:13.5px;line-height:1.65;color:var(--text-2);}
.co-card p b{color:var(--text);font-weight:600;}
.co-row{display:flex;align-items:center;gap:8px;margin-top:var(--s5);}
.co-dots{display:flex;gap:5px;margin-right:auto;}
.co-dot{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .2s ease;}
.co-dot[data-on="true"]{background:var(--gold);}
.co-skip{font-size:12px;color:var(--text-3);padding:6px 4px;}
.co-skip:hover{color:var(--text-2);}
@media (max-width:640px){ .co-card{left:14px !important;right:14px;width:auto;} }

/* ============================= REACTIONS ============================= */
.msg{position:relative;}

.react{cursor:pointer;}
.react:focus-visible{outline:2px solid var(--azure);outline-offset:2px;}

/* ============================= NEW SQUAD WIZARD ============================= */
.wz-scrim{position:fixed;inset:0;background:rgba(4,5,9,.78);z-index:var(--z-modal);}
.wz{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94vw);
  max-height:min(90vh,720px);z-index:calc(var(--z-modal) + 1);display:flex;flex-direction:column;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 34px 90px rgba(0,0,0,.72);overflow:hidden;}
.wz-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line-soft);flex:none;}
.wz-steps{display:flex;gap:5px;flex:1;}
.wz-bar{height:3px;flex:1;border-radius:99px;background:var(--line);transition:background .3s ease;}
.wz-bar[data-on="true"]{background:var(--gold);}
.wz-body{overflow-y:auto;padding:var(--s6) var(--s5);flex:1;min-height:0;}
.wz-p h2{font-size:21px;font-weight:800;letter-spacing:-.03em;margin:11px 0 8px;}
.wz-sub{margin:0 0 var(--s5);font-size:13.5px;line-height:1.6;color:var(--text-2);}
.wz-opt{font-family:var(--f-mono);font-size:10px;color:var(--text-3);font-weight:400;margin-left:5px;}
.wz input[type="text"]{width:100%;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 13px;font-size:16px;color:var(--text);outline:none;
  font-family:var(--f-ui);min-height:46px;transition:border-color .16s ease;}
.wz input[type="text"]:focus{border-color:var(--azure-dim);}

.wz-kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:520px){ .wz-kinds{grid-template-columns:1fr;} }
.wz-kind{display:flex;flex-direction:column;gap:7px;padding:var(--s4);border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface);text-align:left;
  transition:border-color .16s ease,background .16s ease;min-height:96px;}
.wz-kind:hover{background:var(--raised-2);}
.wz-kind[aria-checked="true"]{border-color:var(--gold);background:var(--gold-wash);}
.wz-kind .kic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;}
.wz-kind b{font-size:14px;font-weight:700;letter-spacing:-.015em;}
.wz-kind span{font-size:11.5px;line-height:1.5;color:var(--text-3);}
.wz-kind em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);}

.wz-picked{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s4);min-height:30px;}
.wz-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 6px 4px 4px;border-radius:var(--r-chip);
  background:var(--azure-wash);border:1px solid var(--azure-dim);color:var(--text);font-size:12px;font-weight:600;}
.wz-chip .av{width:20px;height:20px;font-size:8.5px;}
.wz-chip button{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--azure);}
.wz-chip button:hover{background:rgba(94,155,247,.22);}
.wz-chip .icon{width:11px;height:11px;stroke-width:2.6;}
.wz-people{display:flex;flex-direction:column;gap:4px;}
.wz-person{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);
  text-align:left;color:var(--text-2);transition:background .14s ease;min-height:46px;}
.wz-person:hover{background:var(--raised-2);}
.wz-person[aria-pressed="true"]{background:var(--azure-wash);color:var(--text);}
.wz-person .nm{flex:1;min-width:0;font-size:13.5px;font-weight:600;}
.wz-person .mt{font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);}
.wz-person[disabled]{opacity:.36;cursor:not-allowed;}

.wz-coaches{display:flex;flex-direction:column;gap:8px;}
.wz-coach{display:flex;align-items:center;gap:11px;padding:12px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface);text-align:left;min-height:60px;
  transition:border-color .16s ease,background .16s ease;}
.wz-coach:hover{background:var(--raised-2);}
.wz-coach[aria-checked="true"]{border-color:var(--gold);background:var(--gold-wash);}
.wz-coach .nm{flex:1;min-width:0;}
.wz-coach .nm b{display:block;font-size:13.5px;font-weight:700;}
.wz-coach .nm span{font-size:11.5px;color:var(--text-3);}

.wz-review{margin:0;display:flex;flex-direction:column;gap:1px;}
.wz-review div{display:flex;align-items:flex-start;gap:var(--s4);padding:11px 0;
  border-bottom:1px solid var(--line-soft);}
.wz-review dt{width:112px;flex:none;font-size:12px;color:var(--text-3);}
.wz-review dd{margin:0;flex:1;min-width:0;font-size:13.5px;color:var(--text);overflow-wrap:anywhere;}
.wz-review dd .mono{font-size:11.5px;color:var(--text-3);display:block;margin-top:3px;}
.wz-foot{display:flex;align-items:center;gap:9px;padding:var(--s4) var(--s5);
  border-top:1px solid var(--line-soft);background:var(--ink-2);flex:none;}
.wz-count{margin-right:auto;font-size:11px;color:var(--text-3);}

/* ============================= SIGN IN ============================= */
.auth-scrim,.tour-ask-scrim{position:fixed;inset:0;background:rgba(4,5,9,.78);z-index:var(--z-modal);}
.auth,.tour-ask{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,92vw);
  z-index:calc(var(--z-modal) + 1);background:var(--raised);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 34px 90px rgba(0,0,0,.72);padding:var(--s6);
  max-height:90vh;overflow-y:auto;}
.auth-mark{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:800;
  font-size:14px;letter-spacing:-.02em;color:var(--text);margin-bottom:var(--s4);}
.auth-mark .glyph{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:var(--gold);color:#1A1204;}
.auth-mark .glyph .icon{width:14px;height:14px;}
.auth-head h2{font-size:20px;font-weight:800;letter-spacing:-.03em;margin-bottom:7px;}
.auth-head p{margin:0 0 var(--s5);font-size:13.5px;line-height:1.6;color:var(--text-2);}
.auth-body{display:flex;flex-direction:column;gap:9px;}
.auth-p{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;
  min-height:46px;transition:background .16s ease,border-color .16s ease;}
.auth-p:hover{background:var(--raised-2);border-color:var(--raised-2);}
.auth-p[aria-busy="true"]{opacity:.6;cursor:progress;}
.auth-g{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;
  font-family:var(--f-display);font-weight:800;font-size:13px;}
.auth-connected{display:flex;align-items:center;gap:8px;margin:0 0 var(--s4);font-size:12.5px;color:var(--ok);}
.auth-label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:7px;}
#auth-input{width:100%;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 13px;font-size:16px;color:var(--text);outline:none;font-family:var(--f-ui);min-height:46px;
  transition:border-color .16s ease;}
#auth-input:focus{border-color:var(--azure-dim);}
.auth-help{margin:8px 0 var(--s5);font-size:11.5px;color:var(--text-3);line-height:1.5;}
.auth-go{width:100%;justify-content:center;}
.auth-note{display:flex;align-items:flex-start;gap:8px;margin:var(--s5) 0 0;padding-top:var(--s4);
  border-top:1px solid var(--line-soft);font-size:11px;line-height:1.55;color:var(--text-3);}
.auth-note .icon{flex:none;margin-top:1px;width:13px;height:13px;}

.tour-ask{text-align:center;}
.tour-ask-ic{width:46px;height:46px;border-radius:14px;margin:0 auto var(--s4);border:1px solid var(--gold-dim);}
.tour-ask-ic .icon{width:23px;height:23px;}
.tour-ask h2{font-size:19px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px;}
.tour-ask p{margin:0 0 var(--s5);font-size:13.5px;line-height:1.65;color:var(--text-2);}
.tour-ask-row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;}

/* ============================= COMMAND PALETTE ============================= */
.pal-open{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 11px;border-radius:11px;
  border:1px solid var(--line);background:var(--raised);color:var(--text-3);font-size:12.5px;font-weight:500;
  transition:background .15s ease,color .15s ease,border-color .15s ease;}
.pal-open:hover{background:var(--raised-2);color:var(--text-2);border-color:var(--raised-2);}
.pal-open span{white-space:nowrap;}
@media (max-width:1100px){ .pal-open span,.pal-open kbd{display:none;} .pal-open{padding:0 9px;} }
kbd{font-family:var(--f-mono);font-size:10px;line-height:1.6;background:var(--raised-2);
  border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--text-3);}

.pal-scrim{position:fixed;inset:0;background:rgba(4,5,9,.7);z-index:var(--z-modal);}
.pal{position:fixed;left:50%;top:11vh;transform:translateX(-50%);width:min(620px,92vw);
  z-index:calc(var(--z-modal) + 1);display:flex;flex-direction:column;max-height:72vh;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 34px 90px rgba(0,0,0,.72);overflow:hidden;}
.pal-in{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line-soft);flex:none;}
.pal-in > .icon{color:var(--text-3);}
.pal-in input{flex:1;min-width:0;background:transparent;border:0;outline:none;font-size:16px;
  color:var(--text);font-family:var(--f-ui);}
.pal-in input::placeholder{color:var(--text-3);}
.pal-list{overflow-y:auto;padding:6px;flex:1;min-height:0;}
.pal-sec{padding:10px 10px 5px;font-family:var(--f-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);}
.pal-i{width:100%;display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);
  text-align:left;color:var(--text-2);min-height:40px;font-size:13.5px;}
.pal-i .icon{color:var(--text-3);flex:none;}
.pal-i .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pal-i .meta{font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);flex:none;}
.pal-i[data-active="true"]{background:var(--azure-wash);color:var(--text);}
.pal-i[data-active="true"] .icon{color:var(--azure);}
.pal-empty{padding:24px 20px 26px;text-align:center;color:var(--text-3);font-size:13px;line-height:1.7;}
.pal-empty b{color:var(--text-2);font-weight:600;}
.pal-empty .sugg{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px;}
.pal-foot{display:flex;gap:16px;padding:9px 15px;border-top:1px solid var(--line-soft);
  background:var(--ink-2);font-family:var(--f-mono);font-size:10px;color:var(--text-3);flex:none;}
.pal-foot span{display:inline-flex;align-items:center;gap:5px;}
@media (max-width:640px){ .pal{top:6vh;max-height:84vh;} .pal-foot{display:none;} }

.col-empty{padding:14px 10px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}

/* ============================= RUNNER ============================= */
.ai-fab{position:fixed;right:96px;bottom:var(--s5);z-index:var(--z-sticky);
  display:flex;align-items:center;gap:9px;height:42px;padding:0 16px 0 13px;border-radius:var(--r-chip);
  background:var(--gold);color:#1A1204;font-size:12.5px;font-weight:700;letter-spacing:-.005em;
  box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 1px rgba(233,185,73,.4);
  transition:transform .2s cubic-bezier(.2,.9,.3,1),background .18s ease;}
.ai-fab:hover{background:var(--gold-2);transform:translateY(-2px);}
.ai-fab:active{transform:scale(.97);}
.ai-fab .icon{width:18px;height:18px;stroke-width:1.9;}
.ai-fab[aria-expanded="true"]{display:none;}
@media (max-width:767px){ .ai-fab{bottom:calc(56px + var(--s3));right:60px;height:40px;padding:0 13px 0 11px;} .ai-fab span{display:none;} }

.ai{position:fixed;right:var(--s5);bottom:var(--s5);z-index:var(--z-toast);
  width:min(372px,calc(100vw - 32px));height:min(544px,calc(100vh - 108px));
  display:flex;flex-direction:column;background:var(--raised);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 30px 80px rgba(0,0,0,.7);overflow:hidden;}
@media (max-width:1099px){
  .ai{left:var(--s5);right:var(--s5);bottom:var(--s5);width:auto;
    height:min(560px,calc(100vh - 96px));}
}
@media (max-width:767px){
  .ai{left:var(--s3);right:var(--s3);bottom:calc(56px + var(--s2));
    height:min(500px,calc(100vh - 150px));}
}

.ai-head{display:flex;align-items:center;gap:10px;padding:11px 10px 11px var(--s4);
  border-bottom:1px solid var(--line-soft);flex:none;background:var(--ink-2);}
.ai-mark{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--gold);color:#1A1204;}
.ai-t{flex:1;min-width:0;}
.ai-t b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.012em;}
.ai-t span{display:block;font-family:var(--f-mono);font-size:9.5px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ai-head .icon-btn{width:28px;height:28px;}

.ai-log{flex:1;min-height:0;overflow-y:auto;padding:var(--s4);display:flex;flex-direction:column;gap:14px;}
.ai-m{font-size:13.5px;line-height:1.6;overflow-wrap:anywhere;}
.ai-m.you{align-self:flex-end;max-width:86%;background:var(--azure-wash);border:1px solid var(--azure-dim);
  color:var(--text);border-radius:12px 12px 4px 12px;padding:9px 12px;}
.ai-m.bot{align-self:stretch;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;}
.ai-av{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none;
  background:var(--gold-wash);color:var(--gold);border:1px solid var(--gold-dim);}
.ai-av .icon{width:13px;height:13px;}
.ai-bub{min-width:0;color:var(--text-2);padding-top:2px;}
.ai-bub b{color:var(--text);font-weight:600;}
.ai-bub .ln{display:block;}
.ai-bub .ln + .ln{margin-top:6px;}
.ai-bub .li{display:block;padding-left:15px;text-indent:-15px;margin-top:4px;}
.ai-bub code{font-family:var(--f-mono);font-size:11.5px;background:var(--surface);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--gold-2);}
.ai-typing{display:inline-flex;gap:4px;align-items:center;height:20px;}
.ai-typing i{width:5px;height:5px;border-radius:50%;background:var(--text-3);display:block;
  animation:aiDot 1.1s infinite;}
.ai-typing i:nth-child(2){animation-delay:.16s;} .ai-typing i:nth-child(3){animation-delay:.32s;}
@keyframes aiDot{0%,60%,100%{opacity:.25;}30%{opacity:1;}}

.ai-sugg{display:flex;gap:6px;padding:0 var(--s4) 10px;flex:none;overflow-x:auto;scrollbar-width:none;}
.ai-sugg::-webkit-scrollbar{display:none;}
.ai-chip{border:1px solid var(--line);background:var(--surface);color:var(--text-2);
  border-radius:var(--r-chip);padding:5px 11px;font-size:11.5px;font-weight:500;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease;min-height:28px;flex:none;}
.ai-chip:hover{background:var(--raised-2);color:var(--text);border-color:var(--raised-2);}

.ai-box{display:flex;align-items:flex-end;gap:8px;padding:10px var(--s4) var(--s4);flex:none;
  border-top:1px solid var(--line-soft);background:var(--ink-2);}
.ai-box textarea{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:10px 12px;font-size:16px;line-height:1.4;color:var(--text);
  outline:none;resize:none;font-family:var(--f-ui);height:40px;max-height:104px;
  transition:border-color .16s ease;}
.ai-box textarea::placeholder{color:var(--text-3);}
.ai-box textarea:focus{border-color:var(--azure-dim);}
.ai-send{width:40px;height:40px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--gold);color:#1A1204;transition:background .15s ease;}
.ai-send:hover{background:var(--gold-2);}
.ai-send:disabled{opacity:.45;cursor:not-allowed;}

/* Docked, not floating: a fixed overlay would sit on top of the composer's
   send button. From tablet up Runner takes a column of its own. */
@media (min-width:1100px){
  body[data-ai="open"] .app{grid-template-columns:var(--side) minmax(0,1fr) var(--ai);}
  body[data-ai="open"] .ctx{display:none;}
  body[data-ai="open"] .ai{position:relative;right:auto;bottom:auto;left:auto;
    width:auto;height:auto;min-height:0;border:0;border-left:1px solid var(--line-soft);
    border-radius:0;box-shadow:none;background:var(--ink-2);}
  body[data-ai="open"] .ai-head{background:var(--ink-2);height:56px;padding:0 10px 0 var(--s4);}
}
/* wide enough for both: keep the squad panel and add Runner beside it */
@media (min-width:1560px){
  body[data-ai="open"][data-ctx="on"] .app{
    grid-template-columns:var(--side) minmax(0,1fr) var(--ctx) var(--ai);}
  body[data-ai="open"][data-ctx="on"] .ctx{display:flex;}
}

/* ============================= FEEDBACK ============================= */
.toasts{position:fixed;right:var(--s5);bottom:calc(var(--s5) + 60px);z-index:var(--z-toast);display:flex;flex-direction:column-reverse;
  gap:10px;pointer-events:none;max-width:min(340px,calc(100vw - 32px));}
@media (max-width:767px){ .toasts{right:var(--s3);left:var(--s3);bottom:78px;max-width:none;} }
.toast{display:flex;align-items:flex-start;gap:11px;background:var(--raised);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:var(--r-md);padding:12px 14px;box-shadow:0 12px 34px rgba(0,0,0,.55);
  pointer-events:auto;}
.toast.ok{border-left-color:var(--ok);}
.toast-ic{width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
  background:var(--gold-wash);color:var(--gold);}
.toast.ok .toast-ic{background:var(--ok-wash);color:var(--ok);}
.toast-b{min-width:0;flex:1;}
.toast-t{font-size:13px;font-weight:600;margin-bottom:1px;}
.toast-s{font-size:12px;color:var(--text-2);overflow-wrap:anywhere;}
.toast-x{color:var(--text-3);margin:-2px -4px 0 0;width:26px;height:26px;display:grid;place-items:center;
  border-radius:var(--r-sm);flex:none;}
.toast-x:hover{background:var(--raised-2);color:var(--text);}

.xp-fly{position:fixed;z-index:var(--z-toast);pointer-events:none;font-family:var(--f-mono);font-size:19px;
  font-weight:700;color:var(--gold);text-shadow:0 0 18px rgba(233,185,73,.5);}

.kbd-hint{position:fixed;left:50%;bottom:var(--s5);transform:translateX(-50%);z-index:var(--z-toast);
  background:var(--raised);border:1px solid var(--azure-dim);border-radius:var(--r-chip);padding:8px 16px;
  font-size:12.5px;color:var(--text-2);box-shadow:0 10px 30px rgba(0,0,0,.5);display:flex;align-items:center;gap:9px;}
.kbd-hint .ic{font-size:11px;}
@media (max-width:767px){ .kbd-hint{display:none;} }

/* landscape phones: the fixed chrome alone can exceed the viewport,
   so shed the optional rows before the composer gets pushed off */
@media (max-height:560px){
  .topbar{height:48px;}
  .pinned{display:none;}
  .composer-hint{display:none;}
  .composer{padding-top:var(--s2);padding-bottom:var(--s3);}
  .composer-in{max-height:72px;padding-top:9px;}
  .msgs{padding-top:var(--s3);}
  .mnav-b{min-height:48px;padding:6px 2px;}
}

/* ============================================================
   TYPOGRAPHY — a display serif for titles, a grotesque for the
   interface, mono for anything numeric. The serif is scoped to
   16px and up; below that the grotesque stays sharper.
   ============================================================ */
body{letter-spacing:-.003em;text-rendering:optimizeLegibility;}
h1,h2,h3,h4{font-optical-sizing:auto;}

.lp-h1,.lp-head h2,.lp-close h2,.feat-txt h3,.drift-i h3,
.find-head h2,.doc h2,.doc h3,.lvl-meta h2,
.auth-head h2,.wz-p h2,.tour-ask h2,.co-card h3,.wipe-type{
  font-family:var(--f-title);
  font-weight:600;
  letter-spacing:-.014em;
  font-optical-sizing:auto;
}
/* serifs carry their own width: the grotesque's tight tracking would crowd them */
.lp-h1{letter-spacing:-.02em;line-height:1.06;font-weight:600;}
.wipe-type{letter-spacing:-.02em;font-weight:600;}
.lp-head h2,.lp-close h2{letter-spacing:-.016em;line-height:1.16;}
.doc h2{letter-spacing:-.016em;line-height:1.18;}
.feat-txt h3,.find-head h2{letter-spacing:-.014em;}
.doc h3{font-weight:600;letter-spacing:-.008em;}
.lvl-meta h2,.auth-head h2,.wz-p h2,.tour-ask h2{font-weight:600;letter-spacing:-.012em;}
.co-card h3,.drift-i h3{font-weight:600;letter-spacing:-.008em;}

/* the interface voice: quieter, tighter, more even */
.msg-name,.tk-n,.who-n,.member-n,.sw-n,.sq-t b,.card-t,.ag-title,
.squad-t h3,.kind h3,.badge-n,.wz-kind b,
.col-h h3,.panel-h h3,.ctx-h h3,.tab,.btn,.chan-name{
  font-family:var(--f-display);
  letter-spacing:-.006em;
}
.msg-body{letter-spacing:-.002em;line-height:1.65;}
.doc p{letter-spacing:-.002em;}
.eyebrow,.side-sub,.grp-h,.col-h h3,.ctx-h h3,.stat-l,.badge-d,.lb th{
  font-feature-settings:'tnum' 0;
}
/* micro-labels earn their width */
.eyebrow{letter-spacing:.22em;}
.grp-h{letter-spacing:.13em;}
.lb th{letter-spacing:.12em;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
/* ============================================================
   LANDING — the scoreboard is the thesis
   ============================================================ */
.lp{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;background:var(--ink);z-index:var(--z-sticky);scroll-behavior:smooth;}
.lp-wrap{max-width:1180px;margin:0 auto;padding:0 var(--s6);}
@media (max-width:767px){ .lp-wrap{padding:0 var(--s4);} }

.lp-nav{position:sticky;top:0;z-index:6;background:rgba(9,10,16,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s ease,background .25s ease;}
.lp-nav[data-stuck="1"]{border-bottom-color:var(--line-soft);}
.lp-nav .lp-wrap{display:flex;align-items:center;gap:var(--s5);height:64px;}
.lp-mark{display:flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:800;
  font-size:15px;letter-spacing:-.02em;color:var(--text);}
.lp-mark .glyph{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:var(--gold);color:#1A1204;}
.lp-mark .glyph .icon{width:15px;height:15px;stroke-width:2.1;}
.lp-links{display:flex;gap:2px;margin-left:var(--s5);}
.lp-links a{padding:7px 12px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--text-3);
  text-decoration:none;transition:color .16s ease,background .16s ease;}
.lp-links a:hover{color:var(--text);background:var(--raised);}
.lp-nav .btn{margin-left:auto;}
@media (max-width:860px){ .lp-links{display:none;} }

/* ---- hero ---- */
.lp-hero{position:relative;padding:clamp(40px,7vw,86px) 0 clamp(48px,7vw,92px);overflow:hidden;}
.lp-hero::before{content:"";position:absolute;inset:-40% -10% auto;height:620px;pointer-events:none;
  background:radial-gradient(48% 60% at 28% 40%,rgba(233,185,73,.09),transparent 70%),
             radial-gradient(42% 55% at 78% 22%,rgba(94,155,247,.08),transparent 72%);}
.lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.055) 1px,transparent 0);
  background-size:26px 26px;transform:translate3d(0,var(--par,0px),0);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 72%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 72%);}
.lp-hero .lp-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:var(--s8);align-items:center;}
@media (max-width:1023px){ .lp-hero .lp-wrap{grid-template-columns:minmax(0,1fr);gap:var(--s7);} }

.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);background:var(--gold-wash);border:1px solid var(--gold-dim);
  border-radius:var(--r-chip);padding:5px 13px;}
.lp-eyebrow .icon{width:13px;height:13px;stroke-width:2.2;}
.lp-h1{font-size:clamp(34px,5.2vw,57px);font-weight:800;line-height:1.02;letter-spacing:-.042em;
  margin:var(--s5) 0 var(--s4);max-width:16ch;}
.lp-h1 em{font-style:normal;color:var(--gold);}
.lp-h1 .wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.09em;}
.lp-h1 .w{display:inline-block;}
.lp-lede{font-size:16.5px;line-height:1.65;color:var(--text-2);max-width:52ch;margin:0 0 var(--s6);}
.lp-lede b{color:var(--text);font-weight:600;}
.lp-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.btn-lg{padding:13px 22px;min-height:48px;font-size:14.5px;border-radius:var(--r-md);}
.btn-lg .icon{width:17px;height:17px;}
.lp-enter{position:relative;overflow:hidden;}
.lp-enter .icon{transition:transform .28s cubic-bezier(.2,.9,.3,1);}
.lp-enter:hover .icon{transform:translateX(4px);}

.lp-facts{display:flex;gap:var(--s7);margin-top:var(--s7);flex-wrap:wrap;}
.fact{display:flex;flex-direction:column;gap:3px;}
.fact b{font-family:var(--f-mono);font-size:27px;font-weight:700;color:var(--text);line-height:1;letter-spacing:-.02em;}
.fact span{font-size:11.5px;color:var(--text-3);max-width:19ch;line-height:1.45;}

/* ---- live scoreboard ---- */
.sb{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-2);overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);}
.sb-h{display:flex;align-items:center;gap:10px;padding:11px var(--s4);border-bottom:1px solid var(--line-soft);
  background:var(--surface);}
.sb-h .t{font-family:var(--f-display);font-size:12.5px;font-weight:700;letter-spacing:-.01em;}
.sb-h .sub{font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);}
.sb-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);
  font-size:10.5px;color:var(--ok);}
.sb-live .pulse{width:6px;height:6px;border-radius:50%;background:var(--ok);}
.sb-scroll{overflow-x:auto;}
.sb-body{min-width:600px;}
.sb-legend,.sb-row{display:flex;align-items:center;gap:10px;padding:0 var(--s4);}
.sb-legend{height:28px;border-bottom:1px solid var(--line-soft);font-size:9.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
.sb-row{height:44px;border-bottom:1px solid var(--line-soft);will-change:transform;}
.sb-body .sb-row:last-child{border-bottom:0;}
.sb-row.you{background:var(--gold-wash);}
.sb-rk{width:22px;font-family:var(--f-mono);font-size:12px;font-weight:700;color:var(--text-3);flex:none;}
.sb-row.you .sb-rk{color:var(--gold);}
.sb-tm{flex:1;min-width:0;display:flex;align-items:center;gap:8px;}
.sb-tm .nm{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-cells{display:flex;gap:3px;flex:none;}
.sb-c{width:27px;height:26px;border-radius:4px;display:grid;place-items:center;font-family:var(--f-mono);
  font-size:9.5px;font-weight:700;background:var(--raised);color:var(--text-3);border:1px solid var(--line-soft);
  line-height:1;}
.sb-c.ac{background:var(--ok-wash);color:var(--ok);border-color:rgba(63,185,128,.42);}
.sb-c.wa{background:var(--danger-wash);color:var(--danger);border-color:rgba(228,92,86,.34);}
.sb-c.pend{background:var(--azure-wash);color:var(--azure);border-color:var(--azure-dim);}
.sb-n{width:26px;text-align:right;font-family:var(--f-mono);font-size:13px;font-weight:700;flex:none;}
.sb-p{width:46px;text-align:right;font-family:var(--f-mono);font-size:11px;color:var(--text-3);flex:none;}
.sb-f{display:flex;align-items:center;gap:14px;padding:9px var(--s4);border-top:1px solid var(--line-soft);
  background:var(--surface);font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);flex-wrap:wrap;}
.sb-key{display:inline-flex;align-items:center;gap:5px;}
.sb-key i{width:9px;height:9px;border-radius:2px;display:block;}
.balloon{position:absolute;pointer-events:none;z-index:8;color:var(--ok);}
.balloon .icon{width:19px;height:19px;stroke-width:1.9;}

/* ---- hero HUD: corner instrument labels, as a contest console reads ---- */
.hud{position:absolute;inset:0;pointer-events:none;z-index:2;}
.hud > span{position:absolute;font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3);white-space:nowrap;}
.hud b{color:var(--gold);font-weight:700;letter-spacing:.16em;}
.hud .ok{color:var(--ok);font-weight:700;letter-spacing:.16em;}
.hud-tl{top:22px;left:var(--s6);}
.hud-tr{top:22px;right:var(--s6);}
.hud-bl{bottom:22px;left:var(--s6);}
.hud-br{bottom:22px;right:var(--s6);}
.hud::after{content:"";position:absolute;left:var(--s6);right:var(--s6);bottom:46px;height:5px;
  background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 28px);}
@media (max-width:1099px){ .hud{display:none;} }

/* ---- rating ladder: the cohort plotted on one scale ---- */
.ladder{margin:0;}
.ladder-scroll{overflow-x:auto;}
.ladder-plot{position:relative;height:124px;min-width:660px;}
.ladder-bar{position:absolute;left:0;right:0;bottom:0;height:12px;display:flex;
  border-radius:3px;overflow:hidden;}
.lseg{background:var(--c);transform-origin:left center;}
.lmark{position:absolute;bottom:12px;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:5px;}
.lmark::after{content:"";width:1px;height:var(--stem);background:var(--line);}
.lmark.hi{--stem:56px;} .lmark.lo{--stem:16px;}
.lmark .av{width:26px;height:26px;font-size:9.5px;}
.lmark .r{font-family:var(--f-mono);font-size:10.5px;font-weight:700;line-height:1;}
.lmark.you .av{box-shadow:0 0 0 3px var(--gold-wash),0 0 0 4px var(--gold-dim);}
.ladder-axis{position:relative;height:24px;margin-top:9px;min-width:660px;}
.ltick{position:absolute;top:0;transform:translateX(-50%);font-family:var(--f-mono);font-size:10px;color:var(--text-3);}
.ltick::before{content:"";position:absolute;left:50%;top:-9px;width:1px;height:6px;background:var(--line);}
.ltick:first-child{transform:translateX(0);}
.ltick:first-child::before{left:0;}
.ltick:last-child{transform:translateX(-100%);}
.ltick:last-child::before{left:auto;right:0;}
.ladder-legend{display:flex;flex-wrap:wrap;gap:7px 14px;margin:var(--s5) 0 0;padding:0;}
.lkey{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);}
.lkey i{width:9px;height:9px;border-radius:2px;display:block;flex:none;}

/* ---- generic landing section ---- */
.lp-sec{padding:clamp(48px,6vw,84px) 0;position:relative;}
.lp-sec + .lp-sec{border-top:1px solid var(--line-soft);}
.lp-head{max-width:62ch;margin-bottom:var(--s7);}
.lp-head h2{font-size:clamp(25px,3.4vw,36px);font-weight:800;letter-spacing:-.035em;line-height:1.12;
  margin:12px 0 var(--s3);}
.lp-head p{margin:0;font-size:15.5px;line-height:1.68;color:var(--text-2);}
.lp-head p b{color:var(--text);font-weight:600;}

/* drift strip */
.drift{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);}
@media (max-width:860px){ .drift{grid-template-columns:1fr;} }
.drift-i{padding:var(--s5);border-left:2px solid var(--line);display:flex;flex-direction:column;gap:9px;
  transition:border-color .2s ease;}
.drift-i:hover{border-left-color:var(--danger);}
.drift-i .n{font-family:var(--f-mono);font-size:11px;color:var(--text-3);}
.drift-i h3{font-size:16px;font-weight:700;letter-spacing:-.02em;}
.drift-i p{margin:0;font-size:13.5px;line-height:1.62;color:var(--text-3);}

/* feature rows */
.feat{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s8);align-items:center;
  padding:var(--s7) 0;}
.feat + .feat{border-top:1px solid var(--line-soft);}
.feat.flip > .feat-txt{order:2;}
@media (max-width:1023px){ .feat{grid-template-columns:minmax(0,1fr);gap:var(--s5);padding:var(--s6) 0;}
  .feat.flip > .feat-txt{order:0;} }
.feat-txt h3{font-size:clamp(21px,2.6vw,28px);font-weight:800;letter-spacing:-.032em;line-height:1.16;
  margin:11px 0 var(--s3);}
.feat-txt p{margin:0 0 var(--s4);font-size:14.5px;line-height:1.68;color:var(--text-2);max-width:44ch;}
.feat-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
.feat-list li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text-2);line-height:1.55;}
.feat-list .icon{width:15px;height:15px;color:var(--gold);margin-top:2px;flex:none;stroke-width:2.3;}
.shot{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-2);overflow:hidden;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.8);}
.shot-h{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid var(--line-soft);
  background:var(--surface);font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);}
.shot-h .icon{width:13px;height:13px;}
.shot-b{padding:var(--s4);}
.shot-b.tight{padding:10px;}

/* xp band */
.xpband{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s8);align-items:center;
  padding:var(--s7);border:1px solid var(--gold-dim);border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(233,185,73,.07),rgba(233,185,73,.02) 60%,transparent);}
@media (max-width:860px){ .xpband{grid-template-columns:1fr;gap:var(--s5);padding:var(--s5);justify-items:start;} }
.xp-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s5);}
@media (max-width:600px){ .xp-rules{grid-template-columns:1fr;} }
.xp-rule{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);}
.xp-rule b{font-family:var(--f-mono);font-size:13px;font-weight:700;color:var(--gold);flex:none;width:52px;}
.xp-rule span{font-size:13px;color:var(--text-2);line-height:1.5;}

/* squad kinds */
.kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);}
@media (max-width:1023px){ .kinds{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .kinds{grid-template-columns:1fr;} }
.kind{padding:var(--s5);border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--ink-2);
  display:flex;flex-direction:column;gap:10px;transition:border-color .2s ease,transform .25s cubic-bezier(.2,.9,.3,1);}
.kind:hover{border-color:var(--line);transform:translateY(-3px);}
.kind .kic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;}
.kind h3{font-size:14.5px;font-weight:700;letter-spacing:-.02em;}
.kind p{margin:0;font-size:12.5px;line-height:1.6;color:var(--text-3);}
.kind .mono{font-size:11px;color:var(--text-3);margin-top:auto;padding-top:8px;border-top:1px solid var(--line-soft);}

/* UNIT-03 — tracks the cursor, and knows when you are heading for the door */
.bot{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:var(--s5);
  opacity:1;transform:none;transition:opacity .6s ease,transform .75s cubic-bezier(.22,1,.36,1);}
.bot[data-reveal="pending"]{opacity:0;transform:translateY(26px) scale(.9);}
.bot-svg{width:clamp(104px,17vw,142px);height:auto;display:block;overflow:visible;}
.bot-body{transform-box:fill-box;transform-origin:50% 100%;}
.bot-head{transform-box:fill-box;transform-origin:50% 96%;
  transition:transform .5s cubic-bezier(.22,1,.36,1);}
.bot-eye{transition:transform .16s cubic-bezier(.22,1,.36,1),fill .3s ease;}
.bot-track,.bot-happy{transition:opacity .22s ease;}
.bot-happy{opacity:0;}
.bot[data-mood="happy"] .bot-track{opacity:0;}
.bot[data-mood="happy"] .bot-happy{opacity:1;}
.bot-bulb{transition:fill .3s ease;}
.bot[data-mood="happy"] .bot-bulb{fill:var(--gold);}
.bot-glow{transform-box:fill-box;transform-origin:center;animation:botpulse 2.3s ease-in-out infinite;}
@keyframes botpulse{0%,100%{opacity:.14;transform:scale(.82);}50%{opacity:.4;transform:scale(1.16);}}
.bot[data-mood="happy"] .bot-glow{fill:var(--gold);}
.bot-ring{transform-box:fill-box;transform-origin:center;}
.bot-read{font-family:var(--f-mono);font-size:8px;font-weight:700;letter-spacing:.1em;fill:var(--ok);
  transition:fill .3s ease;}
.bot[data-mood="happy"] .bot-read{fill:var(--gold);}
.led{transition:fill .28s ease;}
.bot[data-mood="happy"] .led{fill:var(--gold);}
.bot-cap{font-size:11px;color:var(--text-3);margin:0;letter-spacing:.04em;}
.lp-hero .bot{flex-direction:row;align-items:center;gap:15px;margin:var(--s6) 0 0;}
.lp-hero .bot-svg{width:clamp(78px,9vw,98px);}
.lp-hero .bot-cap{text-align:left;max-width:20ch;line-height:1.5;}
@media (max-width:520px){ .lp-hero .bot{gap:11px;} .lp-hero .bot-cap{font-size:10.5px;} }

/* the ground lifts under the cursor */
.spot{position:fixed;left:0;top:0;width:540px;height:540px;border-radius:50%;pointer-events:none;
  z-index:0;opacity:0;transform:translate3d(-50%,-50%,0);will-change:transform;
  transition:opacity .5s ease;
  background:radial-gradient(circle closest-side,
    rgba(233,185,73,.13) 0%,rgba(233,185,73,.07) 32%,rgba(94,155,247,.05) 55%,transparent 72%);}
body.has-cur .spot{opacity:1;}
body.curtain .spot{opacity:0;}
.lp-hero,.lp .lp-wrap{position:relative;z-index:1;}

/* an instrument cursor for the landing: exact dot, trailing reticle */
.cur{display:none;}
body.has-cur .cur{display:block;}
body.curtain .cur{display:none;}

/* The gold cursor replaces the pointer everywhere, not just the landing.
   `has-cur` is only set by script on a fine pointer, so if this file loads
   without the script — or on a touch device — the real cursor is untouched.
   The blanket `*` with !important is deliberate: dozens of rules set their
   own `cursor` (pointer on buttons, text on inputs, grab on board cards) and
   each one would otherwise punch a hole through this and show two cursors. */
body.has-cur, body.has-cur *{cursor:none !important;}
/* body does not always fill the viewport; the root element can show the
   native arrow in whatever strip is left over */
:root:has(body.has-cur){cursor:none !important;}

/* pointer outside the window: park the cursor rather than leave it stranded */
body.cur-away .cur{display:none;}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:120;
  transform:translate3d(-50%,-50%,0);will-change:transform;}
.cur-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);}
.cur-ring{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(233,185,73,.45);
  transition:width .24s cubic-bezier(.22,1,.36,1),height .24s cubic-bezier(.22,1,.36,1),
             border-color .24s ease,background-color .24s ease,border-radius .24s ease;}
body.cur-hot .cur-ring{width:48px;height:48px;border-color:var(--gold);background:rgba(233,185,73,.09);}
body.cur-text .cur-ring{width:20px;height:34px;border-radius:4px;border-color:var(--azure);}
body.cur-text .cur-dot{background:var(--azure);}

/* closing cta */
.lp-close{text-align:center;padding:clamp(52px,7vw,92px) 0 clamp(40px,5vw,64px);}
.lp-close h2{font-size:clamp(27px,4vw,42px);font-weight:800;letter-spacing:-.038em;line-height:1.1;
  max-width:20ch;margin:0 auto var(--s4);}
.lp-close p{margin:0 auto var(--s6);max-width:50ch;font-size:15.5px;line-height:1.65;color:var(--text-2);}
.lp-foot{border-top:1px solid var(--line-soft);padding:var(--s5) 0 var(--s7);display:flex;
  align-items:center;gap:var(--s4);flex-wrap:wrap;font-size:12px;color:var(--text-3);}
.lp-foot .mono{font-size:11px;}

/* landing -> app: a gold curtain that types you in */
/* The gold curtain. Flat gold read as a loading screen, so it now carries a
   warm gradient, a bloom that breathes behind the name, and a fine grain —
   depth without changing the colour the brand is built on. */
.wipe{position:fixed;inset:0;z-index:var(--z-modal);overflow:hidden;
  display:grid;place-items:center;padding:var(--s6);
  background:
    radial-gradient(120% 90% at 50% 118%, #FFDD93 0%, rgba(255,221,147,0) 58%),
    linear-gradient(168deg, #F3C65C 0%, var(--gold) 44%, #D9A32F 100%);}
.wipe-bloom{position:absolute;left:50%;top:46%;width:min(940px,132vw);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(circle closest-side, rgba(255,248,225,.62), rgba(255,236,183,.18) 46%, transparent 72%);
  animation:wipeBreathe 3.6s ease-in-out infinite;}
@keyframes wipeBreathe{0%,100%{transform:translate(-50%,-50%) scale(.94)}50%{transform:translate(-50%,-50%) scale(1.06)}}
.wipe-grain{position:absolute;inset:-40%;pointer-events:none;opacity:.13;
  background-image:repeating-linear-gradient(58deg, rgba(26,18,4,.5) 0 1px, transparent 1px 5px);
  animation:wipeDrift 7s linear infinite;}
@keyframes wipeDrift{to{transform:translate3d(0,34px,0)}}

.wipe-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.6vw,16px);text-align:center;}
.wipe-tag{font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(26,18,4,.5);margin-bottom:clamp(6px,1.4vw,14px);}
/* the greeting stays quiet so the name is the thing you read */
.wipe-hi{margin:0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(15px,2.2vw,23px);letter-spacing:.01em;color:rgba(26,18,4,.62);}
.wipe-type{position:relative;font-family:var(--f-display);font-weight:800;
  font-size:clamp(38px,9vw,104px);letter-spacing:-.045em;line-height:1;color:#1A1204;
  display:block;text-align:center;min-height:1em;}
/* each letter arrives on its own, so the name lands rather than types */
.wipe-ch{display:inline-block;will-change:transform;}
.wipe-ch[data-sp]{width:.3em;}
.wipe-caret{display:inline-block;width:.055em;min-width:3px;height:.74em;background:#1A1204;border-radius:2px;
  vertical-align:-.04em;margin-left:.08em;animation:caret .58s steps(1) infinite;}
@keyframes caret{50%{opacity:0;}}
/* a single pass of light across the name once it has settled */
.wipe-sheen{position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(102deg,transparent 36%,rgba(255,255,255,.72) 50%,transparent 64%);
  mix-blend-mode:overlay;}
.wipe-bar{width:min(260px,58vw);height:3px;border-radius:99px;background:rgba(26,18,4,.18);overflow:hidden;
  margin-top:clamp(12px,2.2vw,22px);}
.wipe-bar span{display:block;height:100%;width:0;background:#1A1204;border-radius:99px;}

@media (prefers-reduced-motion:reduce){
  .wipe-bloom,.wipe-grain{animation:none;}
}

/* ============================================================
   APP REFINEMENTS
   ============================================================ */
.main{background:
  radial-gradient(70% 44% at 12% -8%,rgba(233,185,73,.045),transparent 62%),
  radial-gradient(55% 40% at 92% -4%,rgba(94,155,247,.04),transparent 66%),
  var(--surface);}
.card:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(0,0,0,.6);}
.card{transition:border-color .15s ease,background .15s ease,box-shadow .2s ease,transform .2s cubic-bezier(.2,.9,.3,1);}
.card.dragging{transform:none;box-shadow:none;}
.panel{position:relative;}
.panel::before{content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);}
.app-balloon{position:fixed;z-index:var(--z-toast);pointer-events:none;color:var(--gold);}
.app-balloon .icon{width:22px;height:22px;stroke-width:1.8;}
.ring-glow{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);opacity:0;pointer-events:none;}

/* ============================================================
   SIGNED-OUT GATE
   ============================================================ */
.gate{position:fixed;inset:0;overflow-y:auto;background:var(--ink);display:grid;place-items:center;padding:var(--s5);
  background-image:radial-gradient(52% 44% at 24% 12%,rgba(233,185,73,.08),transparent 68%),
                   radial-gradient(44% 40% at 82% 8%,rgba(94,155,247,.07),transparent 70%);}
.gate-panel{width:min(420px,100%);background:var(--raised);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s6);box-shadow:0 30px 80px rgba(0,0,0,.6);}
.gate-h{font-family:var(--f-title);font-size:26px;font-weight:600;letter-spacing:-.016em;line-height:1.15;margin:var(--s4) 0 9px;}
.gate-sub{margin:0 0 var(--s5);font-size:13.5px;line-height:1.65;color:var(--text-2);}
.gate-tabs{display:flex;gap:2px;background:var(--raised-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:3px;margin-bottom:var(--s5);}
.gate-tab{flex:1;padding:8px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--text-3);
  transition:background .15s ease,color .15s ease;}
.gate-tab[aria-selected="true"]{background:var(--surface);color:var(--text);}
.gate-form{display:flex;flex-direction:column;gap:var(--s4);}
.fld{display:flex;flex-direction:column;gap:7px;}
.fld-row{display:flex;gap:10px;}
.fld-row .fld{flex:1;}
.fld label{font-size:12.5px;font-weight:600;color:var(--text-2);}
.fld input,.fld select,.pal-q-in{width:100%;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:11px 12px;font-size:16px;color:var(--text);outline:none;
  font-family:var(--f-ui);min-height:44px;transition:border-color .16s ease;}
.fld input:focus,.fld select:focus,.pal-q-in:focus{border-color:var(--azure-dim);}
.fld-help{margin:0;font-size:11.5px;color:var(--text-3);}
.fld-pw{position:relative;}
.fld-pw input{padding-right:62px;}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11.5px;
  font-weight:600;color:var(--text-3);padding:6px 8px;border-radius:5px;}
.pw-toggle:hover{color:var(--text);background:var(--raised-2);}
.gate-error{margin:0;font-size:12.5px;color:var(--danger);background:var(--danger-wash);
  border:1px solid rgba(228,92,86,.3);border-radius:var(--r-sm);padding:9px 11px;}
.gate-go{width:100%;justify-content:center;}

/* ============================================================
   MODALS / EMPTY STATES / PALETTE
   ============================================================ */
.modal-scrim{position:fixed;inset:0;background:rgba(4,5,9,.78);z-index:var(--z-modal);}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,94vw);
  max-height:88vh;overflow-y:auto;z-index:calc(var(--z-modal) + 1);background:var(--raised);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 34px 90px rgba(0,0,0,.72);}
.modal-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line-soft);}
.modal-head h2{flex:1;font-family:var(--f-title);font-size:18px;font-weight:600;letter-spacing:-.012em;}
.modal-body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);}
.modal-sub{margin:0;font-size:13px;line-height:1.6;color:var(--text-2);}

.hollow{padding:var(--s8) var(--s5);text-align:center;max-width:44ch;margin:0 auto;}
.hollow h3{font-family:var(--f-title);font-size:19px;font-weight:600;margin-bottom:9px;}
.hollow p{margin:0 0 var(--s5);font-size:14px;line-height:1.65;color:var(--text-2);}
.sw-empty{padding:10px;font-size:12px;color:var(--text-3);margin:0;}
.sq-invite{border:1px dashed var(--gold-dim);background:var(--gold-wash);}

.pal-list{display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow-y:auto;}
.pal-i{width:100%;display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);
  text-align:left;color:var(--text-2);font-size:13.5px;min-height:40px;transition:background .13s ease;}
.pal-i:hover,.pal-i[data-active="true"]{background:var(--raised-2);color:var(--text);}
.pal-i[data-active="true"]{box-shadow:inset 2px 0 0 var(--gold);}
.pal-i .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pal-i .meta{font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);}
.pal-empty{padding:20px;text-align:center;font-size:13px;color:var(--text-3);margin:0;}

/* ============================================================
   MEETING ROOM
   ============================================================ */
.meet{position:fixed;inset:0;z-index:calc(var(--z-modal) + 6);background:var(--ink);
  display:flex;flex-direction:column;}
.meet-top{position:relative;z-index:2;display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-soft);
  background:var(--ink-2);flex:none;}
.meet-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);
  font-size:13.5px;font-weight:700;}
.meet-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);
  box-shadow:0 0 0 3px rgba(228,92,86,.18);}
.meet-count{font-size:11.5px;color:var(--text-3);}
.meet-top .btn{margin-left:auto;}
.meet-grid{flex:1;min-height:0;overflow:auto;display:grid;gap:10px;padding:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  align-content:center;justify-content:center;}
/* A tile must never grow taller than the space between the two bars, or it
   overflows the grid and paints straight over the controls. */
.meet-tile{position:relative;width:100%;margin-inline:auto;
  aspect-ratio:16/10;max-height:100%;
  max-width:calc((100dvh - 230px) * 1.6);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;}
.meet-grid:has(.meet-tile:nth-child(2)) .meet-tile{max-width:calc((100dvh - 230px) * 0.9);}
.meet-tile video{width:100%;height:100%;object-fit:cover;background:#06070C;display:block;}
.meet-name{position:absolute;left:10px;bottom:10px;font-family:var(--f-mono);font-size:11px;
  background:rgba(9,10,16,.72);border:1px solid var(--line);border-radius:var(--r-chip);
  padding:3px 9px;color:var(--text);}
.meet-bar{position:relative;z-index:2;display:flex;justify-content:center;gap:10px;
  padding:var(--s4) var(--s5);border-top:1px solid var(--line-soft);background:var(--ink-2);
  flex:none;flex-wrap:wrap;}
.meet-btn{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:76px;
  padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--raised);
  color:var(--text-2);font-size:11px;font-weight:600;transition:background .15s ease,color .15s ease;}
.meet-btn:hover{background:var(--raised-2);color:var(--text);}
.meet-btn[aria-pressed="false"]{background:var(--danger-wash);border-color:rgba(228,92,86,.34);color:var(--danger);}
.meet-btn.danger{background:var(--danger);border-color:var(--danger);color:#190607;}
.meet-btn.danger:hover{background:#F0716B;color:#190607;}
@media (max-width:640px){ .meet-grid{grid-template-columns:1fr;} .meet-btn{min-width:64px;} }
.meet-tile.no-video video{opacity:0;}
.meet-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;background:var(--surface);}
.meet-initials{width:56px;height:56px;border-radius:var(--r-chip);display:grid;place-items:center;
  background:var(--raised-2);border:1px solid var(--line);font-family:var(--f-display);
  font-weight:700;font-size:18px;color:var(--text-2);}
.meet-off-t{font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);}
.inv-more{border-top:1px solid var(--line-soft);padding-top:var(--s4);}
.inv-more summary{font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer;padding:4px 0;}
.inv-more summary:hover{color:var(--text);}
.inv-more[open] summary{margin-bottom:var(--s2);}
.inv-more .fld{margin-top:var(--s3);}
#inv-link{font-family:var(--f-mono);font-size:12.5px;}
.note-warn{margin:0;font-size:12px;line-height:1.6;color:var(--gold-2);
  background:var(--gold-wash);border:1px solid var(--gold-dim);
  border-radius:var(--r-sm);padding:10px 12px;}
.note-warn code{font-family:var(--f-mono);font-size:11px;background:var(--surface);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--text);}
.note-ok{margin:0;font-size:12px;line-height:1.6;color:var(--ok);
  background:var(--ok-wash);border:1px solid rgba(63,185,128,.3);
  border-radius:var(--r-sm);padding:10px 12px;}
.note-ok code{font-family:var(--f-mono);font-size:11px;}

/* the sign-in panel sits over the landing rather than replacing it */
.gate{z-index:calc(var(--z-modal) + 2);background:rgba(4,5,9,.82);backdrop-filter:blur(6px);}
.gate-panel{position:relative;}
.gate-close{position:absolute;right:10px;top:10px;}
body.gate-open .lp{filter:saturate(.7);}

/* ============================================================
   CHANNEL SYMBOLS · UNREAD · CHAT SIDES
   ============================================================ */

/* The symbol is user text, not a sprite, so it needs its own metrics to
   sit on the same baseline as the SVG icons in the same list. */
.chan-sym{flex:none;width:16px;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;color:var(--text-3);font-family:var(--f-ui);
  transition:color .14s ease,transform .14s ease;}
.chan[aria-current="true"] .chan-sym{color:var(--gold);transform:scale(1.06);}
.chan:hover .chan-sym{color:var(--text-2);}

.grp-h{position:relative;}
.grp-add{margin-left:auto;width:18px;height:18px;border-radius:4px;display:grid;place-items:center;
  color:var(--text-3);opacity:0;transition:opacity .14s ease,background .14s ease,color .14s ease;}
.grp:hover .grp-add,.grp-add:focus-visible{opacity:1;}
/* touch has no hover — the button would never appear */
@media (hover:none){.grp-add{opacity:1;}}
.grp-add:hover{background:var(--raised-2);color:var(--gold);}

/* unread badge — gold, not alarm-red; this is a nudge, not an error */
.chan-badge{flex:none;background:var(--gold);color:#1A1204;box-shadow:0 0 0 3px rgba(233,185,73,.13);}
.chan:has(.chan-badge) .chan-name{color:var(--text);font-weight:600;}

/* ---- symbol picker ---- */
.sym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px;
  max-height:168px;overflow-y:auto;padding:3px;}
.sym{aspect-ratio:1;border:1px solid var(--line);background:var(--ink-2);border-radius:var(--r-sm);
  font-size:16px;line-height:1;display:grid;place-items:center;cursor:pointer;
  transition:border-color .13s ease,background .13s ease,transform .13s ease;}
.sym:hover{border-color:var(--gold-dim);background:var(--raised);transform:translateY(-1px);}
.sym[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-wash);}
.sym-own{display:flex;align-items:center;gap:10px;margin-top:9px;}
.sym-own .fld-help{margin:0;white-space:nowrap;}
.sym-input{width:64px;text-align:center;font-size:16px;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:6px;color:var(--text);}
.sym-input:focus{border-color:var(--gold-dim);outline:none;}
.cw-prev{border:1px dashed var(--line);border-radius:var(--r-md);padding:var(--s3);
  display:flex;flex-direction:column;gap:9px;background:var(--ink-2);}

/* ---- chat sides: you on the right, the squad on the left ---- */
.msg.mine{grid-template-columns:minmax(0,1fr);justify-items:end;}
.msg.mine .msg-head{flex-direction:row-reverse;}
.msg.mine .msg-name{color:var(--gold);}
/* bubbles hug their text instead of stretching the whole column */
.msg > div{display:flex;flex-direction:column;width:fit-content;max-width:min(620px,86%);}
.msg.mine > div{align-items:flex-end;max-width:min(560px,82%);}

/* bubbles make the split read at a glance without shouting */
.msg .msg-body{background:var(--raised);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:9px 13px;}
.msg:not(.mine) .msg-body{border-top-left-radius:5px;}
.msg.mine .msg-body{background:var(--gold-wash);border-color:var(--gold-dim);
  border-top-right-radius:5px;text-align:left;}
.msg.cont:not(.mine) .msg-body{border-top-left-radius:var(--r-lg);}
.msg.cont.mine .msg-body{border-top-right-radius:var(--r-lg);}
.msg.mine .reacts{justify-content:flex-end;}
.msg:hover{background:transparent;}
.msgs{gap:6px;}

.top-sym{font-size:15px;line-height:1;color:var(--gold);font-family:var(--f-ui);}

/* ============================================================
   COMPILER
   ============================================================ */

/* Opening the compiler gives it 40% of the workspace and folds the squad
   panel away, so the channel beside it stays wide enough to read. */
.code{display:flex;flex-direction:column;min-width:0;min-height:0;
  background:var(--ink-2);border-left:1px solid var(--line);}
/* The compiler takes the whole content area — code needs the width far more
   than the channel does, and the channel is one click away. `main` and `ctx`
   leave the grid entirely, so `code` falls into the column they vacated. */
.app[data-code="1"]{grid-template-columns:var(--side) minmax(0,1fr);}
.app[data-code="1"] .main,
.app[data-code="1"] .ctx{display:none;}
.app[data-code="1"] > .side{grid-column:1;grid-row:1;}
.app[data-code="1"] > .code{grid-column:2;grid-row:1;}
@media (max-width:1023px){ .app[data-code="1"]{grid-template-columns:minmax(0,1fr);} }

.code-top{flex:none;display:flex;align-items:center;gap:var(--s2);
  padding:10px var(--s3);border-bottom:1px solid var(--line-soft);}
.code-scopes{display:flex;gap:3px;background:var(--ink);padding:3px;border-radius:var(--r-sm);}
.code-scope{padding:5px 13px;border-radius:4px;font-size:12.5px;font-weight:600;color:var(--text-3);
  transition:background .14s ease,color .14s ease;}
.code-scope[aria-selected="true"]{background:var(--raised-2);color:var(--text);}
.code-top .icon-btn{margin-left:auto;}

.code-files{flex:none;display:flex;gap:5px;overflow-x:auto;padding:9px var(--s3);
  border-bottom:1px solid var(--line-soft);scrollbar-width:thin;}
.code-file{flex:none;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;
  border:1px solid var(--line);border-radius:var(--r-chip);background:var(--ink);
  font-size:12.5px;color:var(--text-2);white-space:nowrap;transition:all .14s ease;}
.code-file:hover{border-color:var(--gold-dim);color:var(--text);}
.code-file.on{border-color:var(--gold);background:var(--gold-wash);color:var(--text);}
.code-file-l{font-size:10px;color:var(--text-3);}
.code-file-a{font-size:10px;color:var(--azure);}
.code-file-new{border-style:dashed;color:var(--text-3);}

.code-body{flex:1;display:flex;flex-direction:column;min-height:0;padding:var(--s3);gap:9px;}
.code-bar{flex:none;display:flex;align-items:center;gap:8px;}
.code-title{flex:1;min-width:0;background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  padding:5px 8px;color:var(--text);font-size:14px;font-weight:600;font-family:var(--f-display);}
.code-title:hover{border-color:var(--line);}
.code-title:focus{border-color:var(--azure-dim);outline:none;background:var(--ink);}
.code-lang{flex:none;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:5px 8px;color:var(--text-2);font-size:12px;font-family:var(--f-mono);}
.code-saved{flex:none;font-size:10px;color:var(--text-3);min-width:52px;text-align:right;}

/* editor: gutter and textarea must share one line-height or the numbers drift */
.code-editor{position:relative;flex:1 1 auto;min-height:120px;display:flex;background:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.code-gutter{flex:none;width:42px;overflow:hidden;padding:10px 8px 10px 0;text-align:right;
  background:rgba(0,0,0,.22);border-right:1px solid var(--line-soft);
  font-family:var(--f-mono);font-size:12.5px;line-height:1.65;color:var(--text-3);user-select:none;}
.code-gutter span{display:block;}
/* the mirror and the textarea must agree on every metric or the painted
   tokens drift away from the caret — these two rules are deliberately twins */
.code-stack{position:relative;flex:1;min-width:0;}
.code-hl,.code-area{position:absolute;inset:0;margin:0;border:0;
  padding:10px 12px;font-family:var(--f-mono);font-size:12.5px;line-height:1.65;
  white-space:pre;tab-size:4;letter-spacing:normal;word-spacing:normal;overflow:auto;}
.code-hl{pointer-events:none;color:var(--text-2);background:transparent;
  overflow:hidden;z-index:0;}
.code-area{resize:none;outline:none;background:transparent;z-index:1;
  color:transparent;caret-color:var(--gold);-webkit-text-fill-color:transparent;}
.code-area::selection{background:rgba(94,155,247,.34);-webkit-text-fill-color:transparent;}

/* tokens — <i> defaults to italic, which would slant the whole file, so the
   style is reset here and given back only to comments */
.code-hl i{font-style:normal;}
.t-c{color:#5E6577;}
.code-hl .t-c{font-style:italic;}   /* matches the reset's specificity, wins on order */
.t-p{color:#7FB5A6;}
.t-s{color:#9ED39A;}
.t-n{color:#E9B949;}
.t-k{color:#C792EA;font-weight:600;}
.t-t{color:#5E9BF7;}
.t-f{color:#F2C879;}

.code-run{flex:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.btn-sm{padding:6px 12px;font-size:12.5px;}
#code-go[data-busy="1"]{opacity:.6;}
#code-del{margin-left:auto;color:var(--danger);}

.code-stdin{flex:none;}
.code-stdin summary{font-size:11.5px;color:var(--text-3);padding:3px 0;}
.code-stdin textarea{width:100%;margin-top:5px;background:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:7px 9px;color:var(--text);resize:vertical;
  font-family:var(--f-mono);font-size:12px;line-height:1.55;}
.code-stdin textarea:focus{border-color:var(--azure-dim);outline:none;}

/* Grab bar between the editor and the output. Kept thin, with a much taller
   invisible hit area, because a 4px target is a fight on a trackpad. */
.code-split{flex:none;position:relative;height:5px;margin:1px 0;cursor:ns-resize;
  border-radius:var(--r-chip);touch-action:none;}
.code-split::before{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px;}
.code-split span{position:absolute;inset:0;margin:auto;display:block;width:46px;height:3px;
  border-radius:var(--r-chip);background:var(--line);transition:background .14s ease,width .14s ease;}
.code-split:hover span,.code-split:focus-visible span,.code-split[data-drag] span{background:var(--gold);width:72px;}
.code-split:focus-visible{outline:2px solid var(--azure);outline-offset:3px;}
.code-split[data-drag]{cursor:ns-resize;}

.code-out-h{flex:none;display:flex;align-items:center;gap:9px;}
.code-meta{margin-left:auto;font-size:10px;color:var(--text-3);}
.code-mini{font-size:10.5px;color:var(--text-3);padding:2px 7px;border:1px solid var(--line);
  border-radius:var(--r-chip);transition:all .14s ease;}
.code-mini:hover{border-color:var(--azure-dim);color:var(--text-2);}
/* output holds a third of the panel: enough for a stack trace without
   pushing the editor into a slot */
/* the height the splitter drives; 38% is only where it starts */
.code-out{flex:0 0 var(--out-h,38%);min-height:70px;overflow:auto;margin:0;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 11px;
  font-family:var(--f-mono);font-size:12px;line-height:1.6;white-space:pre-wrap;
  overflow-wrap:anywhere;color:var(--text-2);}
.code-out[data-state="ok"]{border-color:rgba(93,190,138,.4);}
.code-out[data-state="bad"]{border-color:rgba(232,109,116,.42);color:#F3B9BC;}
.code-out[data-state="wait"]{color:var(--text-3);}

.code-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:11px;padding:var(--s5);text-align:center;}
.code-empty h3{margin:0;font-size:16px;font-weight:700;}
.code-empty p{margin:0;max-width:34ch;font-size:13px;line-height:1.6;color:var(--text-3);}

.copy-fallback{position:fixed;left:-9999px;top:0;opacity:0;}

/* code blocks inside shared messages */
.msg-code{margin:6px 0 0;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 10px;overflow-x:auto;font-family:var(--f-mono);font-size:12px;line-height:1.6;
  color:var(--text-2);white-space:pre;}
.msg.mine .msg-code{background:rgba(0,0,0,.3);}
.msg-code-h{display:flex;align-items:center;gap:8px;margin-top:6px;}
.msg-code-l{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);}
.msg-code-c{margin-left:auto;font-size:10px;color:var(--text-3);padding:2px 7px;
  border:1px solid var(--line);border-radius:var(--r-chip);}
.msg-code-c:hover{border-color:var(--azure-dim);color:var(--text-2);}

/* ---- meeting presence ---- */
.meet-stage{flex:1;min-height:0;display:flex;gap:0;}
.meet-stage .meet-grid{flex:1;min-width:0;}
.meet-count{font-size:11px;color:var(--text-3);padding:4px 10px;border-radius:var(--r-chip);
  border:1px solid var(--line);transition:all .14s ease;}
.meet-count:hover{border-color:var(--gold-dim);color:var(--text-2);}
.meet-count[aria-expanded="true"]{border-color:var(--gold);color:var(--gold);background:var(--gold-wash);}
.meet-who{flex:none;width:min(290px,78vw);background:var(--ink-2);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;z-index:2;}
.meet-who-h{flex:none;display:flex;align-items:center;padding:12px var(--s3) 8px;}
.meet-who-h .icon-btn{margin-left:auto;}
.meet-who-list{flex:1;overflow-y:auto;padding:0 var(--s3) var(--s3);display:flex;flex-direction:column;gap:2px;}
.who-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-sm);}
.who-row:hover{background:var(--raised);}
.who-b{flex:1;min-width:0;display:flex;flex-direction:column;}
.who-n{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.who-n i{font-style:normal;color:var(--text-3);font-weight:400;}
.who-s{font-size:10.5px;color:var(--text-3);}
.who-ic{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:5px;
  color:var(--text-3);background:var(--raised);}
.who-ic[data-on="1"]{color:var(--ok);background:rgba(93,190,138,.13);}
.who-ic[data-on="0"]{color:var(--danger);background:rgba(232,109,116,.12);}
@media (max-width:700px){
  .meet-who{position:absolute;right:0;top:0;bottom:0;box-shadow:-20px 0 50px rgba(2,3,8,.6);}
  .meet-stage{position:relative;}
}

/* ---- voice recording ---- */
.rec{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:8px;
  background:var(--ink);border:1px solid var(--danger);border-radius:var(--r-md);}
.rec-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--danger);
  animation:recPulse 1.1s ease-in-out infinite;}
@keyframes recPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.rec-time{flex:none;font-size:11.5px;color:var(--text-2);min-width:34px;}
.rec-wave{flex:1;min-width:0;height:30px;display:flex;align-items:center;gap:2px;overflow:hidden;}
.rec-wave i{flex:1;min-width:2px;height:100%;border-radius:2px;background:var(--gold);
  transform:scaleY(.06);transform-origin:center;transition:transform .09s linear;opacity:.85;}
.rec-x{flex:none;font-size:11.5px;color:var(--text-3);padding:5px 9px;border-radius:var(--r-chip);}
.rec-x:hover{color:var(--danger);background:var(--danger-wash);}
.rec-send{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 13px;
  border-radius:var(--r-chip);background:var(--gold);color:#1A1204;font-size:12.5px;font-weight:700;}
.rec-send:hover{background:var(--gold-2);}
#voice-btn[aria-pressed="true"]{color:var(--danger);background:var(--danger-wash);}

/* ---- voice playback ---- */
.vn{display:flex;align-items:center;gap:10px;min-width:210px;}
.vn-play{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold);color:#1A1204;transition:background .14s ease,transform .14s ease;}
.vn-play:hover{background:var(--gold-2);transform:scale(1.05);}
.vn-wave{position:relative;flex:1;min-width:70px;height:26px;display:flex;align-items:center;gap:2px;
  overflow:hidden;border-radius:3px;}
.vn-wave i{flex:1;min-width:2px;height:100%;border-radius:2px;background:var(--text-3);
  transform-origin:center;transition:background .2s ease;}
.vn[data-playing="1"] .vn-wave i{background:var(--gold);}
.vn-prog{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(233,185,73,.18);
  border-right:1.5px solid var(--gold);pointer-events:none;transition:width .12s linear;}
.vn-t{flex:none;font-size:10.5px;color:var(--text-3);}
.msg.mine .vn-wave i{background:rgba(233,185,73,.45);}
.msg.mine .vn[data-playing="1"] .vn-wave i{background:var(--gold);}

/* ---- landing: the capability grid ---- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:14px;margin-top:var(--s6);}
.cap{position:relative;padding:var(--s5) var(--s4) var(--s4);border:1px solid var(--line);
  border-radius:var(--r-lg);background:linear-gradient(168deg,var(--ink-2),rgba(13,15,23,.35));
  display:flex;flex-direction:column;gap:8px;overflow:hidden;
  transition:border-color .22s ease,transform .22s cubic-bezier(.22,1,.36,1);}
.cap::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);opacity:0;transition:opacity .22s ease;}
.cap:hover{border-color:var(--gold-dim);transform:translateY(-3px);}
.cap:hover::before{opacity:1;}
.cap-i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--gold-wash);color:var(--gold);border:1px solid var(--gold-dim);}
.cap-i .icon{width:17px;height:17px;}
.cap h3{margin:2px 0 0;font-size:15px;font-weight:700;letter-spacing:-.02em;}
.cap p{margin:0;font-size:13px;line-height:1.62;color:var(--text-2);}
.cap p b{color:var(--text);font-weight:600;}
.cap-tag{margin-top:auto;padding-top:6px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);}
@media (max-width:520px){ .caps{grid-template-columns:1fr;} }

/* ============================================================
   READ RECEIPTS · REACTIONS ON THE BUBBLE
   ============================================================ */

/* the bubble and its reactions share a wrapper so the chips can hang off the
   bottom edge without being clipped by, or stretching, the bubble itself */
.msg-wrap{position:relative;display:flex;flex-direction:column;align-items:flex-start;}
.msg.mine .msg-wrap{align-items:flex-end;}
.msg.has-rx{margin-bottom:2px;}
.msg.has-rx .reacts{margin-top:-11px;padding-left:10px;position:relative;z-index:1;}
.msg.mine.has-rx .reacts{padding-left:0;padding-right:10px;}

.react{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:var(--r-chip);
  background:var(--raised-2);border:1px solid var(--ink);line-height:1;
  box-shadow:0 2px 8px rgba(2,3,8,.45);
  transition:transform .16s cubic-bezier(.22,1,.36,1),background .16s ease,border-color .16s ease;}
.react:hover{transform:translateY(-2px) scale(1.06);background:var(--raised);}
.react[data-mine="1"]{border-color:var(--gold-dim);background:var(--gold-wash);}
.react-e{font-size:12.5px;line-height:1;}
.react-n{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--text-2);}
.react[data-mine="1"] .react-n{color:var(--gold);}
/* a newly added chip pops rather than appearing */
@keyframes rxPop{0%{transform:scale(.2);opacity:0}62%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
.react{animation:rxPop .26s cubic-bezier(.22,1,.36,1);}

/* ---- the smile, and the emoji it opens ----
   The button sits in the message's own flow, so it reads as belonging to that
   message. The emoji panel it opens is absolutely positioned, so neither
   opening it nor expanding the tray reflows the conversation. */
/* deliberately not a positioning context: the panel anchors to .msg-wrap so
   that flipping up clears the whole bubble, not just this button */
.rx-add{display:flex;margin-top:3px;}
.msg.mine .rx-add{justify-content:flex-end;}
.rx-smile{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-3);opacity:.32;
  transition:opacity .16s ease,color .16s ease,transform .18s cubic-bezier(.22,1,.36,1),background .16s ease;}
.rx-smile .icon{width:15px;height:15px;}
.msg:hover .rx-smile,.msg:focus-within .rx-smile{opacity:.8;}
.rx-smile:hover{opacity:1;color:var(--gold);background:var(--gold-wash);transform:scale(1.15);}
.rx-smile[aria-expanded="true"]{opacity:1;color:var(--gold);background:var(--gold-wash);transform:scale(1.1);}

.rx-bar{position:absolute;top:100%;left:0;margin-top:4px;z-index:4;
  display:flex;flex-direction:column;gap:4px;padding:4px;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 14px 34px rgba(2,3,8,.55);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(.86) translateY(-6px);transform-origin:top left;
  transition:opacity .16s ease,transform .22s cubic-bezier(.22,1,.36,1),visibility .16s;}
.msg.mine .rx-bar{left:auto;right:0;transform-origin:top right;}
/* flipped above when the composer leaves no room below */
.rx-bar[data-flip="1"]{top:auto;bottom:100%;margin-top:0;margin-bottom:4px;
  transform-origin:bottom left;transform:scale(.86) translateY(6px);}
.msg.mine .rx-bar[data-flip="1"]{transform-origin:bottom right;}
/* opened only by the smile */
.msg[data-pick] .rx-bar{opacity:1;visibility:visible;pointer-events:auto;transform:none;}

.rx-row{display:flex;gap:1px;align-items:center;}
.rx-opt{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  line-height:1;transition:transform .15s cubic-bezier(.22,1,.36,1),background .15s ease;}
.rx-opt:hover{transform:scale(1.3) translateY(-2px);background:var(--raised-2);}
.rx-opt[data-mine="1"]{background:var(--gold-wash);box-shadow:inset 0 0 0 1px var(--gold-dim);}
.rx-more{width:26px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--text-3);margin-left:2px;transition:color .15s ease,transform .2s ease;}
.rx-more:hover{color:var(--gold);background:var(--raised-2);}
.rx-bar[data-open="1"] .rx-more{transform:rotate(180deg);color:var(--gold);}

/* the rest of the set expands right here rather than anywhere else */
.rx-tray{display:grid;grid-template-columns:repeat(6,32px);gap:1px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .24s cubic-bezier(.22,1,.36,1),opacity .18s ease,padding-top .24s ease;}
.rx-bar[data-open="1"] .rx-tray{max-height:160px;opacity:1;padding-top:4px;
  border-top:1px solid var(--line-soft);}

@media (max-width:520px){ .rx-tray{grid-template-columns:repeat(5,32px);} }
/* Touch has no hover, so the smile stays legible on its own. 22px is well
   under a usable finger target, so the button grows while the icon does not —
   an invisible overlay was tried first and lost the hit test to the receipt
   line stacked above it. */
@media (hover:none){
  .rx-smile{opacity:.6;width:38px;height:38px;}
  .rx-add{margin-top:0;}
}

/* double-click flourish */
.rx-burst{position:fixed;z-index:var(--z-toast);pointer-events:none;font-size:30px;
  transform:translate(-50%,-50%);animation:rxBurst .76s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes rxBurst{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  28%{transform:translate(-50%,-50%) scale(1.35);opacity:1}
  100%{transform:translate(-50%,-140%) scale(.85);opacity:0}}

/* ---- seen by ---- */
.seen{display:flex;align-items:center;gap:6px;margin-top:5px;padding-right:2px;
  animation:seenIn .3s ease both;}
.msg.mine .seen{justify-content:flex-end;}
@keyframes seenIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.seen-avs{display:flex;}
.seen-av{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  font-size:7px;font-weight:700;color:#0B0C12;border:1.5px solid var(--surface);margin-left:-5px;}
.seen-av:first-child{margin-left:0;}
.seen-t{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;color:var(--text-3);}

/* ============================================================
   FOCUS TIMER
   ============================================================ */
.pom{flex:none;margin:0 10px 8px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--ink);overflow:hidden;transition:border-color .2s ease;}
.pom[data-state="run"]{border-color:var(--gold-dim);}
.pom[data-phase="break"][data-state="run"]{border-color:rgba(93,190,138,.45);}
.pom[data-ring="1"]{animation:pomRing 2.4s ease-out;}
@keyframes pomRing{
  0%,100%{box-shadow:0 0 0 0 rgba(233,185,73,0)}
  12%{box-shadow:0 0 0 4px rgba(233,185,73,.3)}
  30%{box-shadow:0 0 0 0 rgba(233,185,73,0)}
  46%{box-shadow:0 0 0 4px rgba(233,185,73,.28)}}

.pom-head{width:100%;display:flex;align-items:center;gap:9px;padding:8px 9px;text-align:left;}
.pom-head:hover{background:var(--raised);}
.pom-ring{position:relative;flex:none;width:30px;height:30px;}
.pom-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.pom-trk{fill:none;stroke:var(--line);stroke-width:2.6;}
.pom-arc{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;
  transition:stroke-dashoffset .3s linear,stroke .3s ease;}
.pom[data-phase="break"] .pom-arc{stroke:var(--ok);}
.pom-ico{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;}
.pom-b{flex:1;min-width:0;display:flex;flex-direction:column;}
.pom-t{font-size:13px;font-weight:700;color:var(--text);line-height:1.25;
  font-variant-numeric:tabular-nums;}
.pom[data-state="run"] .pom-t{color:var(--gold);}
.pom[data-phase="break"][data-state="run"] .pom-t{color:var(--ok);}
.pom-l{font-size:10px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pom-chev{flex:none;color:var(--text-3);transition:transform .2s ease;}
.pom-head[aria-expanded="true"] .pom-chev{transform:rotate(180deg);}

.pom-body{padding:2px 9px 10px;display:flex;flex-direction:column;gap:8px;
  border-top:1px solid var(--line-soft);}
.pom-btns{display:flex;gap:5px;padding-top:8px;}
.pom-btns .btn{flex:1;padding:5px 6px;font-size:11.5px;min-height:0;}
.pom-lens{display:flex;gap:4px;}
.pom-len{flex:1;padding:4px 5px;border-radius:var(--r-sm);border:1px solid var(--line);
  font-family:var(--f-mono);font-size:10px;color:var(--text-3);transition:all .14s ease;}
.pom-len:hover{border-color:var(--gold-dim);color:var(--text-2);}
.pom-len[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-wash);color:var(--gold);}
.pom-done{margin:0;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}

/* ---- completions ---- */
.code-ac{position:absolute;z-index:6;min-width:212px;max-width:320px;max-height:222px;overflow-y:auto;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 18px 44px rgba(2,3,8,.6);padding:4px;
  animation:acIn .14s cubic-bezier(.22,1,.36,1);}
@keyframes acIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.ac-i{width:100%;display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:var(--r-sm);
  text-align:left;font-size:12px;color:var(--text-2);}
.ac-i[aria-selected="true"]{background:var(--gold-wash);color:var(--text);}
.ac-i:hover{background:var(--raised-2);}
.ac-k{flex:none;width:17px;height:17px;border-radius:4px;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;background:var(--ink);}
.ac-snippet{color:var(--gold);}
.ac-keyword{color:#C792EA;}
.ac-type{color:var(--azure);}
.ac-fn{color:#F2C879;}
.ac-local{color:var(--text-3);}
.ac-l{flex:1;min-width:0;font-family:var(--f-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ac-d{flex:none;font-size:9.5px;color:var(--text-3);}

/* run state */
#code-go[data-busy="1"]{position:relative;}
#code-go[data-busy="1"]::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:goSweep 1s linear infinite;}
@keyframes goSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ============================================================
   SETTINGS
   ============================================================ */
.set-scrim{position:fixed;inset:0;background:rgba(4,5,9,.66);z-index:calc(var(--z-modal) - 1);
  animation:fadeIn .18s ease;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.set{position:fixed;right:0;top:0;bottom:0;width:min(460px,100vw);z-index:var(--z-modal);
  background:var(--ink-2);border-left:1px solid var(--line);display:flex;flex-direction:column;
  box-shadow:-30px 0 70px rgba(2,3,8,.62);animation:setIn .28s cubic-bezier(.22,1,.36,1);}
@keyframes setIn{from{transform:translateX(26px);opacity:.4}to{transform:none;opacity:1}}

.set-top{flex:none;display:flex;align-items:center;padding:16px var(--s5) 12px;}
.set-top h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.025em;}
.set-top .icon-btn{margin-left:auto;}
.set-tabs{flex:none;display:flex;gap:3px;padding:0 var(--s5) 10px;border-bottom:1px solid var(--line-soft);}
.set-tab{padding:6px 13px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:var(--text-3);
  transition:background .14s ease,color .14s ease;}
.set-tab:hover{background:var(--raised);color:var(--text-2);}
.set-tab[aria-selected="true"]{background:var(--raised-2);color:var(--text);}
.set-body{flex:1;overflow-y:auto;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s5);}
.set-load{margin:0;font-size:13px;color:var(--text-3);}

.set-id{display:flex;align-items:center;gap:13px;}
.av-xl{width:54px;height:54px;border-radius:16px;font-size:17px;font-weight:700;
  display:grid;place-items:center;color:#0B0C12;flex:none;}
.set-id-n{font-size:17px;font-weight:700;font-family:var(--f-display);letter-spacing:-.02em;}
.set-id-h{font-size:12px;color:var(--text-3);}

.set-sec{display:flex;flex-direction:column;gap:11px;padding:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink);}
.set-sec form{display:flex;flex-direction:column;gap:11px;}
.set-row{display:flex;align-items:center;gap:11px;}
.set-note{font-size:10px;color:var(--ok);}

/* why there is no password to show */
.set-why{display:flex;gap:10px;padding:10px 11px;border-radius:var(--r-sm);
  background:var(--gold-wash);border:1px solid var(--gold-dim);}
.set-why .icon{flex:none;margin-top:2px;color:var(--gold);}
.set-why p{margin:0;font-size:12.5px;line-height:1.6;color:var(--text-2);}
.set-why b{color:var(--text);}

.set-facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.set-facts div{display:flex;flex-direction:column;gap:3px;min-width:0;}
.set-facts dt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);}
.set-facts dd{margin:0;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;}

.set-stats{display:flex;gap:var(--s4);}
.set-stat{display:flex;flex-direction:column;gap:2px;}
.set-stat b{font-size:21px;font-weight:700;color:var(--gold);}
.set-stat span{font-size:10.5px;color:var(--text-3);}

.set-squads{display:flex;flex-direction:column;gap:6px;}
.set-squad{display:flex;align-items:center;gap:9px;}
.set-squad-b{display:flex;flex-direction:column;min-width:0;}
.set-squad-n{font-size:13px;font-weight:600;}
.set-squad-r{font-size:10px;color:var(--text-3);}

.set-danger{border-color:rgba(232,109,116,.3);}
.btn-quiet-danger{border-color:rgba(232,109,116,.4);color:var(--danger);}
.btn-quiet-danger:hover{background:var(--danger-wash);border-color:var(--danger);}

/* the sidebar card: the whole identity opens settings, the gear is a shortcut */
.me-open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:4px;margin:-4px;
  border-radius:var(--r-sm);text-align:left;transition:background .14s ease;}
.me-open:hover{background:var(--raised);}
.me-gear{flex:none;color:var(--text-3);transition:color .16s ease,transform .3s ease;}
.me-gear:hover{color:var(--gold);transform:rotate(60deg);}

@media (max-width:520px){
  .set{width:100vw;}
  .set-facts{grid-template-columns:1fr;}
}

/* no squad means nowhere to send: hide the composer rather than leave it dead */
body[data-nosquad="1"] .composer{display:none;}

/* ============================================================
   THREADS · EDITING · PINS · SEARCH · TYPING
   ============================================================ */
.top-actions{margin-left:auto;display:flex;gap:2px;align-items:center;}
.dot-badge{position:absolute;top:2px;right:2px;min-width:14px;height:14px;padding:0 3px;
  border-radius:99px;background:var(--gold);color:#1A1204;font-family:var(--f-mono);
  font-size:9px;font-weight:700;line-height:14px;text-align:center;}
.top-actions .icon-btn{position:relative;}

/* message menu */
.mm{position:absolute;top:-10px;right:8px;z-index:3;}
.msg.mine .mm{right:auto;left:8px;}
.mm-btn{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;color:var(--text-3);
  background:var(--raised);border:1px solid var(--line);opacity:0;transition:opacity .14s ease,color .14s ease;}
.msg:hover .mm-btn,.mm-btn[aria-expanded="true"]{opacity:1;}
.mm-btn:hover{color:var(--text);}
.mm-pop{position:absolute;top:100%;right:0;margin-top:4px;min-width:158px;padding:4px;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 16px 38px rgba(2,3,8,.6);display:none;flex-direction:column;}
.msg.mine .mm-pop{right:auto;left:0;}
.mm-btn[aria-expanded="true"] + .mm-pop{display:flex;}
.mm-i{padding:6px 9px;border-radius:var(--r-sm);font-size:12.5px;color:var(--text-2);text-align:left;}
.mm-i:hover{background:var(--raised-2);color:var(--text);}
.mm-danger{color:var(--danger);}
.mm-danger:hover{background:var(--danger-wash);}

.edited{margin-left:6px;font-size:9.5px;color:var(--text-3);}
.gone{margin:0;font-style:italic;color:var(--text-3);font-size:13px;}
.gone-msg .msg-body{background:transparent;border-style:dashed;}
.msg.pinned .msg-body{box-shadow:inset 3px 0 0 var(--gold);}
.msg[data-flash="1"] .msg-body{animation:flash 1.6s ease;}
@keyframes flash{0%,100%{box-shadow:none}22%{box-shadow:0 0 0 3px var(--gold-wash)}}

.edit-box{margin-top:6px;display:flex;flex-direction:column;gap:6px;width:min(520px,80vw);}
.edit-in{background:var(--ink);border:1px solid var(--azure-dim);border-radius:var(--r-sm);
  padding:8px 10px;color:var(--text);font:inherit;resize:vertical;}
.edit-row{display:flex;align-items:center;gap:8px;}
.edit-row .fld-help{margin:0;margin-right:auto;}

.thread-link{margin-top:5px;font-size:11.5px;color:var(--azure);padding:2px 0;}
.thread-link:hover{text-decoration:underline;}

/* thread panel */
.thread{display:flex;flex-direction:column;min-height:0;background:var(--ink-2);
  border-left:1px solid var(--line);}
@media (min-width:1100px){
  .app[data-thread="1"]{grid-template-columns:var(--side) minmax(0,1fr) 360px;}
  .app[data-thread="1"] .ctx{display:none;}
  /* Named cells, not auto-placement: with two optional panels in the grid the
     browser was wrapping one onto a second row under the sidebar. */
  .app[data-thread="1"] > .side{grid-column:1;grid-row:1;}
  .app[data-thread="1"] > .main{grid-column:2;grid-row:1;}
  .app[data-thread="1"] > .thread{grid-column:3;grid-row:1;}
}
@media (max-width:1099px){
  .thread{position:fixed;right:0;top:0;bottom:0;width:min(400px,100vw);z-index:calc(var(--z-modal) - 2);
    box-shadow:-24px 0 60px rgba(2,3,8,.6);}
}
.thread-top{flex:none;display:flex;align-items:center;padding:13px var(--s4) 10px;
  border-bottom:1px solid var(--line-soft);}
.thread-top .icon-btn{margin-left:auto;}
.thread-body{flex:1;overflow-y:auto;padding:var(--s4);display:flex;flex-direction:column;gap:12px;}
.tmsg{display:grid;grid-template-columns:26px minmax(0,1fr);gap:9px;}
.tmsg.root{padding-bottom:12px;border-bottom:1px solid var(--line-soft);}
.tmsg-h{display:flex;gap:7px;align-items:baseline;font-size:12px;margin-bottom:2px;}
.tmsg-h .mono{font-size:10px;color:var(--text-3);}
.tmsg-b{font-size:13.5px;line-height:1.6;color:var(--text-2);overflow-wrap:anywhere;}
.tmsg-b p{margin:0 0 4px;}
.thread-count{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
.thread-foot{flex:none;display:flex;gap:8px;align-items:flex-end;padding:var(--s3);
  border-top:1px solid var(--line-soft);}
.thread-foot textarea{flex:1;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 10px;color:var(--text);resize:none;font:inherit;max-height:120px;}

/* pagination + typing */
.older{flex:none;display:grid;place-items:center;padding:10px 0 2px;}
.typing{margin:0 0 6px;font-size:11px;color:var(--text-3);min-height:14px;}

/* pin + search + mention lists */
.pin-list{display:flex;flex-direction:column;gap:5px;max-height:52vh;overflow-y:auto;}
.pin-i{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--ink);text-align:left;transition:border-color .14s ease;}
.pin-i:hover{border-color:var(--gold-dim);}
.pin-a{font-family:var(--f-mono);font-size:10px;color:var(--text-3);}
.pin-b{font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.set-squad{gap:9px;}
.set-leave{margin-left:auto;font-size:11px;color:var(--text-3);padding:3px 9px;
  border:1px solid var(--line);border-radius:var(--r-chip);transition:all .14s ease;}
.set-leave:hover{border-color:var(--danger);color:var(--danger);}
.set-rule{border:0;border-top:1px solid var(--line);margin:4px 0;}

/* ---- test cases ---- */
.code-cases{flex:none;}
.code-cases summary{font-size:11.5px;color:var(--text-3);padding:3px 0;}
.code-cases summary .mono{color:var(--gold);}
.cases-list{display:flex;flex-direction:column;gap:7px;margin:7px 0;max-height:230px;overflow-y:auto;}
.case{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 8px;background:var(--ink);}
.case[data-state="pass"]{border-color:rgba(93,190,138,.45);}
.case[data-state="fail"]{border-color:rgba(232,109,116,.45);}
.case-h{display:flex;align-items:center;gap:7px;}
.case-dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none;}
.case[data-state="pass"] .case-dot{background:var(--ok);}
.case[data-state="fail"] .case-dot{background:var(--danger);}
.case-n{flex:1;min-width:0;background:transparent;border:0;color:var(--text);font-size:12px;font-weight:600;padding:2px;}
.case-n:focus{outline:none;background:var(--raised);border-radius:3px;}
.case-r{font-size:9.5px;color:var(--text-3);}
.case[data-state="pass"] .case-r{color:var(--ok);}
.case[data-state="fail"] .case-r{color:var(--danger);}
.case-x{width:18px;height:18px;border-radius:4px;color:var(--text-3);font-size:15px;line-height:1;flex:none;}
.case-x:hover{color:var(--danger);background:var(--danger-wash);}
.case-io{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px;}
.case-io label{display:flex;flex-direction:column;gap:3px;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
.case-io textarea{background:var(--ink-2);border:1px solid var(--line);border-radius:4px;
  padding:5px 7px;color:var(--text);font-family:var(--f-mono);font-size:11px;resize:vertical;line-height:1.5;}
.case-io textarea:focus{border-color:var(--azure-dim);outline:none;}
.case-got{margin:6px 0 0;padding:5px 7px;background:var(--ink-2);border-radius:4px;
  font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);white-space:pre-wrap;
  max-height:70px;overflow:auto;}
#code-test[data-busy="1"]{opacity:.6;}
@media (max-width:560px){ .case-io{grid-template-columns:1fr;} }

/* ---- whiteboard ---- */
#v-draw{display:flex;flex-direction:column;min-height:0;}
.draw-bar{flex:none;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:11px var(--s5);border-bottom:1px solid var(--line-soft);}
.draw-colours{display:flex;gap:5px;}
.pen{width:20px;height:20px;border-radius:50%;border:2px solid transparent;
  transition:transform .15s ease,border-color .15s ease;}
.pen:hover{transform:scale(1.16);}
.pen[aria-pressed="true"]{border-color:var(--text);transform:scale(1.14);}
.draw-w{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);}
.draw-w input{width:90px;accent-color:var(--gold);}
.draw-note{margin-left:auto;font-size:10px;color:var(--text-3);}
.draw-wrap{flex:1;min-height:0;display:grid;place-items:center;padding:var(--s4);
  background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.022) 31px 32px),
             repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.022) 31px 32px),var(--ink);}
#draw-canvas{border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-2);
  touch-action:none;cursor:crosshair;max-width:100%;}
body.has-cur #draw-canvas{cursor:none;}

/* ---- whiteboard: pages + tools ---- */
.draw-pages{flex:none;display:flex;gap:4px;align-items:center;overflow-x:auto;
  padding:9px var(--s5) 0;scrollbar-width:thin;}
.page{flex:none;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
  border:1px solid var(--line);border-radius:var(--r-chip);background:var(--ink);
  font-size:12.5px;color:var(--text-2);white-space:nowrap;transition:all .14s ease;}
.page:hover{border-color:var(--gold-dim);color:var(--text);}
.page.on{border-color:var(--gold);background:var(--gold-wash);color:var(--text);}
.page-n{font-size:9.5px;color:var(--text-3);}
.page-new{border-style:dashed;color:var(--text-3);padding:5px 12px;font-size:14px;line-height:1;}

.draw-tools{display:flex;gap:2px;background:var(--ink);padding:3px;border-radius:var(--r-sm);
  border:1px solid var(--line);}
.tool{width:28px;height:26px;border-radius:4px;display:grid;place-items:center;
  font-size:13px;color:var(--text-3);transition:all .14s ease;}
.tool:hover{background:var(--raised);color:var(--text);}
.tool[aria-pressed="true"]{background:var(--gold-wash);color:var(--gold);}
.draw-fill{display:flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);cursor:pointer;}
.draw-fill input{accent-color:var(--gold);}

/* ---- direct messages ---- */
#v-dm{display:flex;flex-direction:column;min-height:0;}
.dm-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;}
.dm-scroll .msgs{margin-top:auto;}
.av-xs{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  font-size:7.5px;font-weight:700;color:#0B0C12;flex:none;}
.grp-empty{margin:2px var(--s2) 4px;font-size:11.5px;color:var(--text-3);line-height:1.5;}
/* A picture used to sit right-aligned inside a bubble stretched to the column
   width, leaving a wide empty gutter beside it. The bubble now shrinks to the
   picture. */
/* A percentage max-width leaves the intrinsic size (1600px here) as the
   max-content contribution, so the bubble sized itself to its own max-width
   and left a gutter beside the picture. A fixed cap makes the contribution
   the cap itself, and the bubble ends up exactly as wide as the image. */
/* A whiteboard export is 1600x1000 of mostly empty page. Capping height as
   well as width keeps one sketch from filling the whole conversation; click
   opens it full size. */
/* A whiteboard export is 1600x1000 of mostly empty page. Capping both sides
   keeps one sketch from filling the conversation; the image scales to fit
   rather than being cropped, because a cropped sketch hides marks. Click
   opens it full size. */
.msg-img{display:block;margin-top:6px;max-width:340px;max-height:230px;
  width:auto;height:auto;border-radius:var(--r-sm);
  border:1px solid var(--line);cursor:zoom-in;}
@media (max-width:560px){ .msg-img{max-width:min(340px,62vw);max-height:200px;} }
.msg-body:has(.msg-img){width:fit-content;max-width:100%;}
.msg-wrap:has(.msg-img){width:fit-content;}
.msg.mine .msg-wrap:has(.msg-img){margin-left:auto;}
/* ---------- attachments ---------- */
/* Video and audio get the same width ceiling as a picture, so a bubble with a
   clip in it does not become a different shape from one with a sketch. */
.msg-vid{display:block;margin-top:6px;max-width:340px;max-height:260px;width:100%;
  border-radius:var(--r-sm);border:1px solid var(--line);background:#000;}
.msg-aud{display:block;margin-top:6px;width:min(300px,100%);height:36px;}
@media (max-width:560px){ .msg-vid{max-width:min(340px,62vw);} }
.msg-body:has(.msg-vid),.msg-body:has(.msg-file){width:fit-content;max-width:100%;}
.msg-wrap:has(.msg-vid),.msg-wrap:has(.msg-file){width:fit-content;}
.msg.mine .msg-wrap:has(.msg-vid),.msg.mine .msg-wrap:has(.msg-file){margin-left:auto;}

/* everything that is not playable in place: a row you click to download */
.msg-file{display:flex;align-items:center;gap:10px;margin-top:6px;padding:9px 12px 9px 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-2);
  text-decoration:none;color:var(--text);max-width:320px;transition:border-color .16s ease,background .16s ease;}
.msg-file:hover{border-color:var(--azure-dim);background:var(--raised);}
.mf-ico{flex:none;width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--gold-wash);color:var(--gold);}
.mf-meta{min-width:0;display:flex;flex-direction:column;gap:1px;}
.mf-name{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mf-size{font-size:10px;color:var(--text-meta);}

/* the chip above the box showing what is about to be sent */
.attach-tray{padding:8px 10px 0;}
.att-chip{position:relative;display:flex;align-items:center;gap:9px;padding:7px 8px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);}
.att-thumb{flex:none;width:34px;height:34px;border-radius:4px;object-fit:cover;
  border:1px solid var(--line-soft);background:var(--ink);}
.att-ico{display:grid;place-items:center;color:var(--gold);font-size:14px;}
.att-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.att-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att-size{font-size:10px;color:var(--text-meta);}
.att-x{flex:none;width:26px;height:26px;border:0;background:transparent;border-radius:var(--r-sm);
  color:var(--text-3);cursor:pointer;display:grid;place-items:center;}
.att-x:hover{background:var(--raised-2);color:var(--danger);}
.att-chip[data-busy] .att-x{visibility:hidden;}
/* the progress bar is the chip's own bottom edge, so nothing shifts as it fills */
.att-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold);
  transform-origin:left;transition:transform .12s linear;}

/* Where a dragged file may be dropped.

   Named data-filedrop, not data-drop: the task board has used data-drop on its
   columns since long before attachments existed, so a generic [data-drop] rule
   painted "Drop to attach" across every column of the board permanently. */
[data-filedrop]{position:relative;}
[data-filedrop]::after{content:"Drop to attach";position:absolute;inset:0;z-index:var(--z-sticky);
  display:grid;place-items:center;pointer-events:none;
  background:rgba(9,10,16,.78);border:2px dashed var(--gold);border-radius:var(--r-md);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--gold);}

/* ---------- meeting reminder ---------- */
/* Sits above everything, because a reminder that a modal can cover is not a
   reminder. Below toasts so a confirmation still lands on top of it. */
.soon{position:fixed;left:50%;transform:translateX(-50%);top:14px;z-index:calc(var(--z-toast) - 1);
  display:flex;align-items:center;gap:11px;max-width:min(560px,calc(100vw - 24px));
  padding:10px 10px 10px 14px;border-radius:var(--r-md);
  background:var(--raised);border:1px solid var(--gold-dim);
  box-shadow:0 14px 40px rgba(4,5,9,.55);animation:soonIn .22s ease;}
@keyframes soonIn{from{opacity:0;transform:translate(-50%,-10px);}to{opacity:1;transform:translate(-50%,0);}}
.soon-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px var(--gold-wash);animation:soonPulse 1.8s ease-in-out infinite;}
@keyframes soonPulse{50%{box-shadow:0 0 0 8px transparent;}}
.soon-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.soon-t{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.soon-s{font-size:10.5px;color:var(--text-meta);}
.soon .btn{flex:none;}
@media (prefers-reduced-motion:reduce){
  .soon{animation:none;} .soon-dot{animation:none;}
}
@media (max-width:560px){
  .soon{left:12px;right:12px;transform:none;max-width:none;flex-wrap:wrap;}
  @keyframes soonIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
}

/* ---------- pinned speaker ----------
   One tile takes the room and the rest drop into a strip underneath. Heights
   are fixed rather than derived, because the tiles are flat siblings with no
   wrapper to flex against. */
.meet-grid[data-pinned]{display:flex;flex-wrap:wrap;align-content:flex-start;}
.meet-grid[data-pinned] .meet-tile{order:2;flex:0 0 auto;
  width:clamp(104px,13vw,164px);height:auto;aspect-ratio:16/10;max-width:none;max-height:none;}
.meet-grid[data-pinned] .meet-tile.pinned{order:1;flex:0 0 100%;width:100%;
  max-width:none;aspect-ratio:auto;height:calc(100% - 128px);min-height:180px;
  border-color:var(--gold-dim);}
/* contain, not cover: a pinned tile is usually a screen share, and cropping it
   loses the very thing that was pinned */
.meet-grid[data-pinned] .meet-tile.pinned video{object-fit:contain;background:#06070C;}

.meet-pin{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:var(--r-chip);border:1px solid var(--line);
  background:rgba(9,10,16,.76);color:var(--text-2);font-size:10.5px;font-weight:600;
  cursor:pointer;opacity:0;transition:opacity .14s ease,color .14s ease,border-color .14s ease;}
.meet-tile:hover .meet-pin,.meet-pin:focus-visible,.meet-pin[aria-pressed="true"]{opacity:1;}
.meet-pin:hover{color:var(--gold);border-color:var(--gold-dim);}
.meet-pin[aria-pressed="true"]{color:var(--gold);border-color:var(--gold);background:var(--gold-wash);}
/* a pointer that cannot hover has no way to reveal it */
@media (hover:none){ .meet-pin{opacity:1;} }

.who-pin{flex:none;width:26px;height:26px;display:grid;place-items:center;border:0;
  background:transparent;border-radius:var(--r-sm);color:var(--text-3);cursor:pointer;}
.who-pin:hover{background:var(--raised-2);color:var(--gold);}
.who-pin[aria-pressed="true"]{color:var(--gold);background:var(--gold-wash);}

/* someone in the call on a link rather than squad membership */
.who-guest{margin-left:6px;padding:1px 5px;border-radius:var(--r-chip);
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
  background:var(--azure-wash);color:var(--azure);vertical-align:middle;}

/* ---------- private tasks ---------- */
/* A dashed edge says "not on the shared board" at a glance, without the card
   having to shout about it. */
.card-priv{border-style:dashed;border-color:var(--gold-dim);}
.card-lock{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono);
  font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);}
.card-lock .icon{width:12px;height:12px;}
.t-priv{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;margin-bottom:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-2);cursor:pointer;}
.t-priv:hover{border-color:var(--gold-dim);}
.t-priv input{margin-top:2px;flex:none;accent-color:var(--gold);width:15px;height:15px;}
.t-priv > span{display:flex;flex-direction:column;gap:3px;font-size:12.5px;}
.t-priv-h{color:var(--text-meta);font-size:11.5px;line-height:1.5;}

.zoom{position:fixed;inset:0;z-index:var(--z-toast);background:rgba(4,5,9,.9);
  display:grid;place-items:center;padding:var(--s5);cursor:zoom-out;animation:fadeIn .16s ease;}
.zoom img{max-width:100%;max-height:100%;border-radius:var(--r-md);border:1px solid var(--line);}

/* the sidebar list is taller than it was; make the overflow visible */
#side-scroll{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
#side-scroll::-webkit-scrollbar{width:8px;}
#side-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;
  border:2px solid transparent;background-clip:padding-box;}
#side-scroll::-webkit-scrollbar-thumb:hover{background:var(--raised-2);background-clip:padding-box;}
/* a fade at the foot says "there is more below" without costing a row */
.side-wrap{position:relative;flex:1;min-height:0;display:flex;}
.side-wrap::after{content:"";position:absolute;left:0;right:8px;bottom:0;height:26px;
  background:linear-gradient(to top,var(--ink-2),transparent);pointer-events:none;
  opacity:0;transition:opacity .2s ease;}
.side-wrap[data-more="1"]::after{opacity:1;}

/* ---- whiteboard: text tool + page controls ---- */
.draw-text-opts{display:flex;gap:5px;}
.draw-text-opts select{background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:4px 7px;color:var(--text-2);font-size:11.5px;}
.draw-text-opts select:focus{border-color:var(--gold-dim);outline:none;}

.draw-wrap{position:relative;}
/* the typing box sits exactly where the label will land, at its real size */
.draw-typing{position:absolute;z-index:3;margin:0;padding:0;border:0;outline:none;
  background:transparent;resize:none;overflow:hidden;white-space:pre;line-height:1.25;
  caret-color:currentColor;min-width:20px;
  text-shadow:0 0 10px rgba(0,0,0,.85);}
.draw-typing::selection{background:rgba(94,155,247,.4);}

/* The slot needs room for the × to sit beside the tab rather than on top of
   its rounded corner, where it covered the page name. */
.page-slot{position:relative;display:inline-flex;flex:none;padding-right:9px;}

/* This was a 16px dot at opacity 0 — invisible until you happened to hover the
   tab, and under the 24px minimum pointer target even once you found it. So
   "I can't delete my page" was literally true: there was nothing to aim at.
   The dot stays small, but it is always faintly visible, and ::before gives it
   a 28px hit area that does not change the layout. */
.page-x{position:absolute;top:50%;right:-3px;transform:translateY(-50%);
  width:17px;height:17px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;line-height:1;
  background:var(--raised-2);border:1px solid var(--line);color:var(--text-3);
  opacity:.55;transition:opacity .14s ease,color .14s ease,background .14s ease,transform .14s ease;}
.page-x::before{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;
  transform:translate(-50%,-50%);border-radius:50%;}
.page-slot:hover .page-x,.page-x:focus-visible{opacity:1;}
.page-x:hover{background:var(--danger-wash);border-color:var(--danger);color:var(--danger);
  transform:translateY(-50%) scale(1.12);}
.page-x:focus-visible{outline:2px solid var(--azure);outline-offset:2px;}
/* a finger needs far more than 17px, and there is no hover to reveal anything */
@media (hover:none){
  .page-x{opacity:1;width:22px;height:22px;right:-6px;}
  .page-x::before{width:44px;height:44px;}
  .page-slot{padding-right:13px;}
}
@media (prefers-reduced-motion:reduce){ .page-x{transition:none;} .page-x:hover{transform:translateY(-50%);} }

/* ---- whiteboard: shared vs private page lanes ---- */
.page-lane{display:inline-flex;align-items:center;gap:4px;flex:none;}
.page-lane-l{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);margin-right:2px;}
.page-sep{width:1px;height:20px;background:var(--line);margin:0 10px;flex:none;}
.page.priv{border-style:dashed;}
.page.priv .icon{color:var(--azure);}
.page.priv.on{border-style:solid;border-color:var(--azure);background:var(--azure-wash);}
.draw-scope{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--r-chip);}
.draw-scope[data-scope="team"]{background:var(--gold-wash);color:var(--gold);}
.draw-scope[data-scope="personal"]{background:var(--azure-wash);color:var(--azure);}

/* ============================================================
   CHAT: RHYTHM, DAY BOUNDARIES, QUIET AFFORDANCES
   ============================================================ */

/* An empty channel was pinning its message to the top of a 700px scroller and
   leaving a 476px void above the composer. Centre it instead. */
#msgs,#dm-msgs{justify-content:flex-end;}
#msgs:has(.hollow),#dm-msgs:has(.hollow){justify-content:center;min-height:100%;}
.hollow{display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;padding:var(--s6) var(--s5);margin:auto;max-width:44ch;}
.hollow h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em;}
.hollow p{margin:0;font-size:13.5px;line-height:1.65;color:var(--text-3);}
.hollow-mark{font-size:34px;line-height:1;opacity:.9;}

/* day boundaries — a hairline with the date sitting on it */
/* a hairline running the full width of a wide pane reads as a section break,
   not a date; keep it to a readable span in the middle */
.day-sep{display:flex;align-items:center;gap:12px;margin:18px auto 12px;
  max-width:min(46ch,100%);width:100%;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-meta);}
.day-sep::before,.day-sep::after{content:"";flex:1;height:1px;background:var(--line-soft);}
.day-sep span{flex:none;}

/* Measure: 620px at 14.5px ran to roughly 85 characters a line, well past the
   65-75 that stays comfortable to read. */
.msg > div{max-width:min(62ch,86%);}
.msg.mine > div{max-width:min(58ch,82%);}

/* A row needs to look touchable before you reach it, and the reaction button
   should not sit at a third of its opacity on every line in the channel. */
.msg{border-radius:var(--r-md);transition:background .13s ease;}
.msg:hover,.msg:focus-within{background:rgba(255,255,255,.022);}
.rx-smile{opacity:0;}
.msg:hover .rx-smile,.msg:focus-within .rx-smile{opacity:.72;}
.rx-smile:focus-visible{opacity:1;outline:2px solid var(--azure);outline-offset:2px;}
@media (hover:none){ .rx-smile{opacity:.5;} }

/* receipts are metadata, not a headline */
.seen-t{font-family:var(--f-ui);font-size:10.5px;letter-spacing:0;
  text-transform:none;color:var(--text-meta);}
.seen{margin-top:3px;opacity:.85;}

/* ---- direct message header ---- */
.dm-head{flex:none;display:flex;align-items:center;gap:11px;
  padding:12px var(--s5);border-bottom:1px solid var(--line-soft);background:var(--ink-2);}
.dm-head-b{display:flex;flex-direction:column;min-width:0;}
.dm-head-n{font-size:14px;font-weight:700;font-family:var(--f-display);letter-spacing:-.015em;}
.dm-head-s{font-size:10.5px;color:var(--text-3);}

/* small text that carries meaning clears 4.5:1 */
.msg-time,.dm-head-s,.tmsg-h .mono{color:var(--text-meta);}

/* a room that cannot reach the camera should say so, and keep saying so */
.meet-warn{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px var(--s5);background:var(--danger-wash);
  border-bottom:1px solid rgba(232,109,116,.35);
  font-size:12.5px;line-height:1.55;color:#F3B9BC;}
.meet-warn .btn{flex:none;border-color:rgba(232,109,116,.5);color:#F3B9BC;}
.meet-warn .btn:hover{background:rgba(232,109,116,.18);}

/* ---- inviting people who already have accounts ---- */
.inv-split{display:flex;align-items:center;gap:12px;margin:2px 0;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-meta);}
.inv-split::before,.inv-split::after{content:"";flex:1;height:1px;background:var(--line-soft);}
.inv-people{display:flex;flex-direction:column;gap:4px;max-height:214px;overflow-y:auto;}
.inv-people:empty{display:none;}
.inv-p{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--ink);}
.inv-p-b{flex:1;min-width:0;display:flex;flex-direction:column;}
.inv-p-n{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.inv-p-h{font-size:10.5px;color:var(--text-meta);}
.inv-p-s{flex:none;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ok);}

/* ---- invitations waiting for you ---- */
.iv-row{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--ink);}
.iv-b{flex:1;min-width:0;display:flex;flex-direction:column;}
.iv-n{font-size:13.5px;font-weight:600;}
.iv-s{font-size:10px;color:var(--text-meta);}
.iv-acts{flex:none;display:flex;gap:6px;}

/* ---- deleting a channel ---- */
.chan-slot{position:relative;display:block;}
.chan-x{position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:18px;height:18px;border-radius:4px;display:grid;place-items:center;
  font-size:13px;line-height:1;color:var(--text-3);opacity:0;
  transition:opacity .14s ease,color .14s ease,background .14s ease;}
.chan-slot:hover .chan-x,.chan-x:focus-visible{opacity:1;}
.chan-x:hover{background:var(--danger-wash);color:var(--danger);}
@media (hover:none){ .chan-x{opacity:.55;} }