/* public/huddletable/app.css — HuddleTable shell. Light #F6F4F0 / dark #121110 via prefers-color-scheme. */
:root{
  --bg:#F6F4F0;--card:#FFFFFF;--raised:#EFECE6;--text:#1C1B19;--text-2:#5A5651;--line:#E7E3DC;
  --accent:#2563EB;--accent-ink:#FFFFFF;--ok:#2E9E5B;--warn:#D98A1C;--bad:#D2463C;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121110;--card:#1C1B19;--raised:#262421;--text:#F4F1EC;--text-2:#ABA59C;--line:#34312D;
    --accent:#5B8CFF;--accent-ink:#0B1020;color-scheme:dark}
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font:15px/1.45 var(--font);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}

/* mark + wordmark (one colour, Inter Bold, -0.035em) */
.ht-mark{display:inline-flex;width:28px;height:28px;flex:0 0 auto}
.ht-mark svg{width:100%;height:100%}
.ht-mark .ht-ink{fill:var(--text)}
.ht-mark .ht-lead{fill:var(--accent)}
.ht-mark-lg{width:64px;height:64px}

/* orbitMark (app.js): seats orbit the table. transform/opacity only, short, never blocks input
 * (pointer-events none on the mark), all off under prefers-reduced-motion. Scoped to HuddleTable (.ho-*). */
.ho{display:block;overflow:visible;pointer-events:none}
.ho .ho-ink{fill:var(--text)}
.ho .ho-lead{fill:#2563EB}
.ho .ho-open{fill:none;stroke:var(--text);stroke-width:2.5;opacity:.35}
.ho .ho-lead.ho-open{stroke:#2563EB}
.ho-seats,.ho-seat{transform-box:view-box;transform-origin:50px 53.6px}
.ho-sm .ho-seats,.ho-sm .ho-seat{transform-origin:50px 53.2px}
@keyframes ho-rot{to{transform:rotate(360deg)}}
.ho-spin .ho-seats{animation:ho-rot 1.6s linear infinite}
.ho-working .ho-spin .ho-seats{animation-duration:3.2s}
.ho-once .ho-seats{animation:ho-rot .9s cubic-bezier(.4,0,.2,1) 1}
@keyframes ho-in0{from{transform:translate(0,-8px);opacity:0}}
@keyframes ho-in1{from{transform:translate(7.6px,-2.5px);opacity:0}}
@keyframes ho-in2{from{transform:translate(4.7px,6.5px);opacity:0}}
@keyframes ho-in3{from{transform:translate(-4.7px,6.5px);opacity:0}}
@keyframes ho-in4{from{transform:translate(-7.6px,-2.5px);opacity:0}}
.ho-settle .ho-seat{animation:.3s cubic-bezier(.2,.8,.2,1) both}
.ho-settle .ho-s0{animation-name:ho-in0}
.ho-settle .ho-s1{animation-name:ho-in1;animation-delay:50ms}
.ho-settle .ho-s2{animation-name:ho-in2;animation-delay:100ms}
.ho-settle .ho-s3{animation-name:ho-in3;animation-delay:150ms}
.ho-settle .ho-s4{animation-name:ho-in4;animation-delay:200ms}
@keyframes ho-pop{from{transform:scale(.4);opacity:0}}
.ho .ho-pop{animation:ho-pop .25s cubic-bezier(.2,.8,.2,1)}
.ho-host{display:inline-flex;flex:0 0 auto;color:var(--text)}
.ho-loading{display:flex;align-items:center;justify-content:center;gap:8px;min-height:28px}
.ho-empty-mark{display:flex;justify-content:center;margin:0 auto 8px;opacity:.85}
.ho-pick{margin-right:8px;vertical-align:middle}
.tr-members-head .ho-pick + .tr-members-h{margin-right:auto}
.im-agent-open .im-vendor{display:block;margin-left:auto}
.ho-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.ho *,.ho{animation:none!important;transition:none!important}}
.ht-word{font-family:var(--font);font-weight:700;letter-spacing:-0.035em;color:var(--text);margin:0}
.ht-lockup{display:flex;align-items:center;gap:10px}
.ht-lockup .ht-word{font-size:19px}

/* sign-in */
.ht-signin{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.ht-signin-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:32px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.ht-signin-card .ht-word{font-size:28px}
.ht-signin-sub{margin:0 0 8px;color:var(--text-2);font-size:14px}
.ht-label{align-self:stretch;text-align:left;font-size:13px;font-weight:600;color:var(--text-2)}
.ht-field{align-self:stretch;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg);color:var(--text);font:16px var(--font)}
.ht-field:focus{outline:2px solid var(--accent);outline-offset:1px}
.ht-cta{align-self:stretch;min-height:48px;border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-weight:600}
.ht-cta:disabled,.ht-field:disabled{opacity:.55;cursor:not-allowed}
.ht-err{margin:0;color:var(--bad);font-size:13.5px}

/* shell */
/* ht-finalcheck: one full-height row on desktop. The sidebar used to span rows 1/3, which made two implicit rows
   and left the main column ~700 of 900 px tall (thread composer below the fold, a dead band under it). */
.ht-app{display:grid;grid-template-columns:240px 1fr;grid-template-rows:minmax(0,1fr);height:100%;height:100dvh}
.ht-side{grid-row:1;display:flex;flex-direction:column;gap:18px;padding:18px 12px;border-right:1px solid var(--line);
  background:var(--card);overflow-y:auto;min-height:0}
.ht-side .ht-lockup{padding:2px 8px}
.ht-nav{display:flex;flex-direction:column;gap:2px}
.ht-tab{appearance:none;display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:10px;
  background:transparent;color:var(--text-2);font-weight:500;text-align:left}
.ht-tab:hover{background:var(--raised);color:var(--text)}
.ht-tab.on{background:var(--raised);color:var(--text);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.ht-tab-l{flex:1}
.ht-count{min-width:20px;padding:1px 7px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:11.5px;font-weight:700;text-align:center}
.ht-table{display:flex;flex-direction:column;gap:6px;min-height:0}
.ht-table-h{margin:0;padding:0 10px;font-size:13px;font-weight:600;color:var(--text-2)}
.ht-seats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ht-seat{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:10px}
.ht-photo{position:relative;flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--raised);color:var(--text-2);
  display:grid;place-items:center;font-size:11px;font-weight:700}
.ht-photo img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ht-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--card)}
.ht-dot.ok{background:var(--ok)}.ht-dot.warn{background:var(--warn)}.ht-dot.bad{background:var(--bad)}
.ht-seat-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500}
.ht-seat-st{font-size:12px;color:var(--text-2)}
.ht-seat-empty{padding:4px 10px;font-size:13px;color:var(--text-2)}
.ht-workspace{margin-top:auto;display:flex;align-items:center;gap:8px;padding:10px;border-top:1px solid var(--line)}
.ht-ws-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.ht-ws-name{flex:1;font-size:13.5px;font-weight:600}
.ht-ws-out{border:1px solid var(--line);background:transparent;color:var(--text-2);border-radius:8px;padding:4px 10px;font-size:12.5px}
.ht-topbar,.ht-tabbar{display:none}
.ht-main{overflow-y:auto;min-width:0;min-height:0;padding:24px 24px 24px}

/* the mounted room: the shell owns the brand + tabs, so hide the room's own copies */
.ht-main .tr-top,.ht-main .tr-tabs{display:none}
.ht-main .tr{max-width:1160px;margin:0;--ht-font:var(--font)}
@media (prefers-color-scheme:light){
  .ht-main .tr{--ht-bg:#F6F4F0;--ht-card:#FFFFFF;--ht-raised:#F6F4F0;--ht-text:#1C1B19;--ht-text-2:#5A5651;--ht-line:#E7E3DC;
    --ht-accent:#2563EB;--ht-accent-ink:#FFFFFF}
}
/* ht-p0polish: thread row preview, approval policy + data cards */
.ht-main .tr-last{display:flex;gap:4px;min-width:0;margin:4px 0 2px;font-size:13px;line-height:1.35;color:var(--text-2);text-align:left}
.ht-main .tr-last-who{flex:0 0 auto;font-weight:600;color:var(--text)}
.ht-main .tr-last-body{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ht-main .hp-body{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.ht-main .hp-body>.btn{align-self:flex-start}
.ht-main .hp-opt{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.ht-main .hp-opt input{margin-top:4px;accent-color:var(--accent)}
.ht-main .hp-opt b{display:block}
.ht-main .hp-mn{display:block;margin:0;font-size:13px;color:var(--text-2)}
.ht-main .hp-msg{margin:0;font-size:13px;color:var(--text)}
.ht-main .tr-danger,.ht-main .btn.tr-danger{color:#B42318}
.ht-main .btn.tr-danger-solid{background:#B42318;color:#FFFFFF;border-color:#B42318}
.ht-main .btn.tr-danger-solid:disabled{opacity:.45;cursor:not-allowed}
@media (prefers-color-scheme:dark){.ht-main .tr-danger,.ht-main .btn.tr-danger{color:#FF8A80}}
/* ht-p0polish light-mode AA fixes (measured on a throwaway instance; all >= 4.5:1 on white/paper) */
@media (prefers-color-scheme:light){
  .ht-main .tr-status.s-open{color:#1E7A45}
  .ht-main .tr-pend{color:#B42318}
  .ht-main .tr-unread{background:#B42318;color:#FFFFFF}
  .ht-main .hs-learning{color:#475467}
  /* initials on a coloured circle: darken the colour (not the text) so white initials pass */
  .ht-main .tr-av-i[style*="background"]{background-image:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3))!important}
}
.ht-main .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--text);font:500 14px var(--font)}
.ht-main .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ht-main .btn.ghost{background:transparent}
.ht-main .btn.sm{padding:5px 10px;font-size:12px}

/* phone: top bar + bottom tab bar */
@media (max-width:767px){
  .ht-app{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .ht-side{display:none}
  .ht-topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));
    border-bottom:1px solid var(--line);background:var(--card)}
  .ht-top-btn{border:1px solid var(--line);background:transparent;color:var(--text-2);border-radius:10px;min-height:36px;padding:4px 12px;font-size:13px}
  .ht-top-btn.on{color:var(--text);border-color:var(--accent)}
  .ht-main{padding:12px 16px}
  .ht-tabbar{display:flex;border-top:1px solid var(--line);background:var(--card);padding-bottom:env(safe-area-inset-bottom)}
  .ht-tabbar .ht-tab{flex:1;flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:6px 2px;border-radius:0;
    font-size:11.5px;text-align:center;box-shadow:none;background:transparent}
  .ht-tabbar .ht-tab.on{color:var(--accent);box-shadow:inset 0 2px 0 var(--accent)}
  .ht-tabbar .ht-tab-l{flex:0 0 auto}
  .ht-tabbar .ht-count{font-size:10px;min-width:16px;padding:0 5px}
}

/* ---------- polish (2026-10-08) ---------- */
.ht-main{padding:28px 40px 40px}
/* app-icon tile around the sidebar mark */
.ht-tile{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--line)}
.ht-tile .ht-mark{width:24px;height:24px}
/* page header */
.ht-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;max-width:1160px;margin:0 0 20px}
.ht-head-txt{min-width:0}
.ht-h1{margin:0;font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-0.025em;color:var(--text)}
.ht-head-sub{margin:4px 0 0;color:var(--text-2);font-size:14px}
.ht-primary{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 16px;border:0;border-radius:10px;
  background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:14px;flex:0 0 auto}
.ht-primary:focus-visible,.ht-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ht-plus{font-size:18px;line-height:1;font-weight:500}
/* avatars: 2px ring in the surface colour + 1px outer hairline + neutral tile behind images */
.ht-photo{width:32px;height:32px;background:#EFECE6;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line)}
.ht-photo img{background:#EFECE6}
.ht-photo.lead{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}
.ht-ini{color:var(--text);font-size:11.5px;font-weight:700}
.ht-photo:not(:has(img)){background:var(--raised)}
.ht-dot{right:-3px;bottom:-3px}
.ht-seat{padding:7px 10px}
.ht-ws-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ht-main .tr-av{background:#EFECE6;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line)}
.ht-main .tr-av-i{color:#fff}
.ht-main .tr-av-owner{background:var(--raised)!important;color:var(--text)}
.ht-main .tr-av-lead{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)!important}
.ht-main .tr-av-stack .tr-av{border:0}
.ht-main .tr-av-stack .tr-av+.tr-av{margin-left:-6px}
.ht-main .tr-member-face .tr-av{box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line)}
.ht-main .tr-member.lead .tr-member-face .tr-av{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}
.ht-main .tr-member.on .tr-member-face .tr-av{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}
/* picker: wider tiles, names may wrap to 2 lines on desktop */
.ht-main .tr-member{width:104px}
.ht-main .tr-member-name{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (prefers-color-scheme:dark){
  .ht-photo,.ht-photo img,.ht-main .tr-av{background:#E9E5DE}
}
@media (max-width:767px){
  .ht-main{padding:14px 16px 20px}
  .ht-head{align-items:center;margin-bottom:14px}
  .ht-h1{font-size:22px}
  .ht-head-sub{font-size:13px}
  .ht-primary{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
  .ht-primary-l{display:none}
  .ht-plus{font-size:22px}
  .ht-main .tr-member{width:76px}
  .ht-main .tr-member-name{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  html,body{overflow-x:hidden}
}
.ht-head{padding:0 16px}

/* ht-accounts: sign-in methods, sidebar "me", People dialog */
.ht-signin-form{display:flex;flex-direction:column;gap:10px;align-self:stretch}
.ht-google{display:flex;align-items:center;justify-content:center;text-decoration:none}
.ht-cta-2{background:var(--card);color:var(--text);border:1px solid var(--line)}
.ht-linkbtn{border:0;background:transparent;color:var(--text-2);text-decoration:underline;padding:6px;font:inherit;cursor:pointer}
.ht-small{font-size:12.5px}
.ht-danger{color:#B42318}
.ht-invite-note{margin:0;padding:10px 12px;border-radius:10px;background:var(--raised, rgba(37,99,235,.08));color:var(--text);font-size:14px}
.ht-me{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--line)}
.ht-me-photo{width:28px;height:28px;border-radius:50%;overflow:hidden;flex:0 0 28px;display:grid;place-items:center;background:var(--line);font-size:11px;font-weight:600}
.ht-me-photo img{width:100%;height:100%;object-fit:cover}
.ht-me-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.ht-me-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-me-role{font-size:11.5px;color:var(--text-2)}
.ht-me{flex-wrap:wrap;row-gap:8px}.ht-me-txt{flex:1 1 calc(100% - 44px)}.ht-me .ht-ws-out{flex:1 1 0;white-space:nowrap;text-align:center}/* ht-finalqa: Passkeys + Sign out on their own row, never over the name/role */
.ht-people{width:min(560px,calc(100vw - 32px));max-height:85vh;border:1px solid var(--line);border-radius:16px;background:var(--card, #fff);color:var(--text);padding:18px}
.ht-people::backdrop{background:rgba(0,0,0,.35)}
.ht-people-head{display:flex;justify-content:space-between;align-items:center}
.ht-people-head h2{margin:0;font-size:18px}
.ht-invite{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.ht-invite .ht-field{flex:1 1 180px;min-height:40px}
.ht-invite .ht-cta{flex:0 0 auto;align-self:auto;min-height:40px;padding:0 16px}
.ht-people-msg{font-size:13.5px;overflow-wrap:anywhere}
.ht-people-list{list-style:none;margin:0;padding:0}
.ht-person{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
.ht-person-name{font-weight:600;flex:1 1 140px}
.ht-person-email,.ht-person-seen{font-size:12.5px;color:var(--text-2)}
.ht-person-role{min-height:34px;padding:4px 8px;width:auto;align-self:auto}
.ht-person-badge{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.ht-people-sub{font-size:14px;margin:16px 0 4px}
.ht-people-foot{display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:14px}
/* ht-frontend phone polish (HuddleTable shell only). */
/* New-thread toggle: the page header already has "New thread", so the in-list toggle is a small link, never a full-width bar. */
.ht-app .tr-newthread>.btn:first-child{align-self:flex-end;min-height:36px;background:none;border:0;color:var(--text-2);padding:6px 4px;width:auto}
/* Owner face default: neutral initials, never a colour. */
.ht-app .tr-av-owner{background:var(--raised)!important;color:var(--text-2)!important}
/* Long names ellipsize instead of pushing layouts sideways. */
.ht-app .tr-title{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.ht-app .tr-goal{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ht-app .tr-member-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ht-seat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (max-width:767px){
  /* Thread header member strip wraps (no sideways scroll). */
  .ht-app .tr-strip{flex-wrap:wrap;overflow-x:visible;gap:8px 10px}
  .ht-app .tr-strip-item{width:56px}
  .ht-app .tr-strip-pick{gap:8px}
  .ht-app .tr-strip-pick .tr-member{width:72px}
}

/* ht-passkeys: sign-in button, Your passkeys dialog, one-time prompt (public/huddletable/passkeys.js) */

.ht-pk-intro { display: block; }
.ht-pk-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 12px; padding: 10px 14px;
  border: 1px solid rgba(37, 99, 235, .35); border-radius: 12px; background: rgba(37, 99, 235, .08); }
.ht-pk-prompt-txt { flex: 1 1 200px; }
.ht-pk-prompt .ht-cta { width: auto; padding: 8px 14px; }
/* ht-finalqa: card buttons size to their label instead of stretching across the whole pane */
.ht-app .tr-pane .tr-card > .btn,.ht-app .tr-pane .im-repo > .btn{align-self:flex-start;width:auto;min-width:120px}
/* ht-finalqa: sign-in providers. Google + Microsoft follow their published sign-in button branding
   (white or dark button, official logo unaltered, Roboto/Segoe-style label); passkey neutral + secondary. */
.ht-providers{display:flex;flex-direction:column;gap:10px;align-self:stretch}
.ht-sso{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:0 14px;border-radius:10px;
  font:500 14.5px/1 Roboto,"Segoe UI",system-ui,-apple-system,sans-serif;letter-spacing:.1px;text-decoration:none;cursor:pointer;
  transition:background-color .15s,box-shadow .15s}
.ht-sso[hidden]{display:none}
.ht-sso-logo{width:18px;height:18px;flex:0 0 18px}
.ht-sso-google{background:#FFFFFF;color:#1F1F1F;border:1px solid #747775}
.ht-sso-google:hover{background:#F8FAFF;box-shadow:0 1px 3px rgba(60,64,67,.25)}
.ht-sso-ms{background:#FFFFFF;color:#5E5E5E;border:1px solid #8C8C8C;font-family:"Segoe UI",Roboto,system-ui,sans-serif;font-weight:600}
.ht-sso-ms:hover{background:#F6F6F6}
.ht-sso-pk{background:transparent;color:var(--text-2);border:1px dashed var(--line);font-family:inherit}
.ht-sso-pk:hover{color:var(--text);border-style:solid}
.ht-sso-pk.ht-sso-primary{background:var(--accent);color:var(--accent-ink);border:0;font-weight:600}
.ht-sso:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ht-help{margin:0;font-size:12.5px;line-height:1.45;color:var(--text-2)}
.ht-help[hidden]{display:none}
.ht-or{display:flex;align-items:center;gap:10px;align-self:stretch;color:var(--text-2);font-size:12.5px;margin:4px 0}
.ht-or::before,.ht-or::after{content:"";flex:1;height:1px;background:var(--line)}
.ht-or[hidden]{display:none}
.ht-cta-ico{display:flex;align-items:center;justify-content:center;gap:10px}
.ht-ico{width:18px;height:18px;flex:0 0 18px}
.ht-pk-other{align-self:flex-start;margin:-4px 0 6px}
.ht-newver{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;
  padding:10px 12px 10px 16px;border-radius:12px;background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:14px}
.ht-newver .ht-cta{min-height:36px;padding:0 14px}
@media (prefers-color-scheme: dark){
  .ht-sso-google{background:#131314;color:#E3E3E3;border-color:#8E918F}
  .ht-sso-google:hover{background:#1C1C1E;box-shadow:none}
  .ht-sso-ms{background:#2F2F2F;color:#FFFFFF;border-color:#2F2F2F}
  .ht-sso-ms:hover{background:#3A3A3A}
}

/* ---------- ht-stitch (2026-10-08): final Stitch polish, HuddleTable UI Design System project ----------
 * CSS only on existing markup; ids, test hooks and behaviour unchanged. Tokens: paper/ink, one blue accent,
 * 10px controls, 14px cards, 20px sheets, sentence case. AA in light + dark. */
:root{--ht-danger:#B42318;--ht-danger-ink:#FFFFFF}
@media (prefers-color-scheme:dark){:root{--ht-danger:#FF8A80;--ht-danger-ink:#1C1B19}}

/* sign-in card: 20px sheet, lifted on paper, quieter secondary actions */
.ht-signin-card{max-width:420px;gap:14px;padding:32px 28px 26px;border-radius:14px;box-shadow:0 4px 24px rgba(28,27,25,.06)}
.ht-signin-card .ht-word{font-size:24px;letter-spacing:-0.03em}
.ht-providers .ht-help{text-align:center;padding:0 4px}
.ht-signin-sub{font-size:15px}
.ht-signin .ht-linkbtn{text-decoration:none;color:var(--text-2);font-weight:500;min-height:44px;padding:8px 12px;border-radius:10px}
.ht-signin .ht-linkbtn:hover{color:var(--text);background:var(--raised)}
.ht-linkbtn:focus-visible,.ht-cta:focus-visible,.ht-ws-out:focus-visible,.ht-top-btn:focus-visible,.ht-person-role:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ht-sso-pk{background:var(--bg);border:1px solid var(--line);color:var(--text)}
.ht-sso-pk:hover{background:var(--raised);border-style:solid}
.ht-cta{transition:filter .15s}
.ht-cta:hover:not(:disabled){filter:brightness(1.06)}
@media (prefers-color-scheme:dark){.ht-signin-card{box-shadow:none}}

/* passkey prompt: one slim card under the page header, accent edge, actions on the right */
.ht-pk-prompt{margin:0 16px 16px;max-width:1128px;padding:14px 16px 14px 20px;border:1px solid var(--line);
  border-radius:14px;background:var(--card);color:var(--text);font-size:15px;font-weight:600;box-shadow:0 4px 20px rgba(28,27,25,.04)}
.ht-pk-prompt .ht-cta{min-height:40px;padding:0 16px;align-self:auto}
.ht-pk-prompt .ht-linkbtn{text-decoration:none;min-height:40px;padding:0 12px;border-radius:10px;font-weight:500}
.ht-pk-prompt .ht-linkbtn:hover{background:var(--raised);color:var(--text)}

/* People + Your passkeys dialogs: a 20px sheet, quiet Close, clear rows, red only for the destructive link */
.ht-people{border-radius:20px;padding:22px 22px 18px;box-shadow:0 24px 64px -16px rgba(0,0,0,.35)}
.ht-people::backdrop{background:rgba(18,17,16,.45)}
.ht-people-head{margin-bottom:4px}
.ht-people-head h2{font-size:20px;font-weight:700;letter-spacing:-0.01em}
.ht-people-head .ht-linkbtn{text-decoration:none;border:1px solid var(--line);border-radius:10px;min-height:36px;padding:4px 12px;color:var(--text-2);font-weight:500}
.ht-people-head .ht-linkbtn:hover{color:var(--text);background:var(--raised)}
.ht-invite .ht-field{flex:1 1 150px;min-width:0;min-height:44px;background:var(--bg)}
.ht-invite select.ht-field{flex:0 1 140px}
.ht-invite .ht-cta{min-height:44px;padding:0 18px}
.ht-person{padding:12px 0;gap:6px 12px}
.ht-person-name{font-size:15px}
.ht-person-badge{background:var(--raised);border-color:transparent;color:var(--text);font-weight:600}
.ht-people-sub{font-size:13px;color:var(--text-2);font-weight:600}
.ht-people-foot{gap:4px 8px;padding-top:4px}
.ht-people-foot .ht-linkbtn{text-decoration:none;font-weight:500;font-size:13.5px;min-height:40px;padding:6px 10px;border-radius:10px}
.ht-people-foot .ht-linkbtn:hover{background:var(--raised);color:var(--text)}
.ht-people-foot .ht-danger,.ht-people-foot .ht-danger:hover{color:var(--ht-danger)}
.ht-danger{color:var(--ht-danger)}

/* sidebar */
.ht-table-h{margin-top:4px}
.ht-seat-addbtn{min-height:44px}

/* thread header: the lead star is the blue lead seat, not amber */
.ht-main .tr-star.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--card))}
.ht-main .tr-seatord{padding:16px;border-radius:14px}
.ht-main .tr-seatord-row{background:var(--bg);border-radius:10px}
.ht-main .tr-seatord-row.is-lead{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--card))}

/* settings + agents cards: titled cards, stacked labelled fields, buttons sized to their label */
.ht-main .tr-pane>.tr-card,.ht-main .tr-pane>form.tr-card{padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--card);gap:10px}
.ht-main .tr-card>b:first-child,.ht-main .tr-card>.tr-tiprow:first-child b{font-size:16px;font-weight:700;letter-spacing:-0.01em}
.ht-main form.tr-card>label.tr-budget-txt:has(>.tr-input){display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:320px;font-size:13px;font-weight:600;color:var(--text-2)}
.ht-main form.tr-card>label.tr-budget-txt>.tr-input{width:100%}
.ht-main .tr-card>label.tr-budget-txt:has(>input[type=checkbox]){display:flex;align-items:center;gap:10px;min-height:32px}
.ht-main .tr-card input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.ht-main .tr-pane .btn{justify-content:center}
.ht-main .tr-pane .btn.sm{font-size:13.5px;padding:8px 16px}
.ht-main .btn.tr-stop{background:var(--ht-danger);border-color:var(--ht-danger);color:var(--ht-danger-ink)}
.ht-main .btn.tr-stop:hover{background:var(--ht-danger);filter:brightness(1.06)}
/* Agents tab: the "+ Add agent" / "Costs" row is a toolbar, not two full-width bars */
.ht-main .tr-pane>.tr-ap-btns:first-child{justify-content:flex-start}
.ht-main .tr-pane>.tr-ap-btns:first-child .btn{flex:0 0 auto;min-width:0}

/* Add an assistant wizard + onboarding: 20px sheets, calmer cards */
.hc-card{border-radius:20px}
.hc-pcard,.hc-ocard{transition:border-color .15s,background-color .15s}
.hc-pcard:focus-visible,.hc-ocard:focus-visible,.hc-tap:focus-visible,.hc-btn:focus-visible,.hc-cta:focus-visible,.hc-link:focus-visible,.htp-pill:focus-visible,.htp-chip:focus-visible,.htp-add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hc-pcard.on,.hc-ocard.on{background:color-mix(in srgb,var(--accent) 5%,var(--card))}
.hc-dot{transition:width .2s}
@media (prefers-reduced-motion:reduce){.hc-dot,.hc-pcard,.hc-ocard{transition:none}}

/* help panel */
.hh-panel{border-radius:20px 0 0 20px}
.hh-head{padding:18px 20px}
@media (max-width:640px){.hh-panel{border-radius:0}}

/* ht-finalcheck: People / Passkeys / Sign out in the Settings header on phones (the sidebar is hidden there). */
.ht-acct{display:none}
@media (max-width:767px){
  .ht-head:has(.ht-acct){flex-wrap:wrap}
  .ht-acct{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .ht-acct-btn{flex:1 1 0;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font:inherit;font-size:14px;font-weight:600;white-space:nowrap}
  .ht-acct-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}