/* ============================================================
   App additions — interactive states, overlays and companion
   pages. Composed ONLY from tokens.css values and the mockup's
   existing component vocabulary (no new colors / fonts).
   ============================================================ */

/* ---------- Utilities ---------- */
[hidden]{display:none !important}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;left:var(--s4);top:-60px;z-index:100;padding:var(--s2) var(--s4);border-radius:var(--r-pill);background:var(--text);color:var(--on-accent);font-weight:700;font-size:var(--t-sm);transition:top .2s}
.skip-link:focus{top:var(--s4);color:var(--on-accent)}
.noscript{padding:var(--s6);font-weight:700}
.muted{color:var(--muted)}
.ico-12{width:12px;height:12px}
.main:focus{outline:none}
input,select,textarea{font-family:inherit;color:var(--text)}
button:disabled{cursor:not-allowed;opacity:.55}
.btn:disabled:hover,.chip:disabled:hover{transform:none;box-shadow:none}

/* ---------- Sidebar additions ---------- */
.brand{justify-content:space-between}
.brand-link{display:flex;align-items:center;gap:var(--s3);color:var(--text);border-radius:var(--r-sm)}
.brand-link:hover{color:var(--text)}
.nav-close{display:none}
a.profile-card{color:var(--text)}
a.profile-card:hover{color:var(--text)}
.avatar-ph img,.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.msg-empty{font-size:var(--t-sm);color:var(--muted);text-align:center;margin:auto 0}
.msg-list:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:var(--s1)}
.emoji-btn{width:34px;height:34px;border-radius:var(--r-sm);font-size:var(--t-lg);display:grid;place-items:center}
.emoji-btn:hover{background:var(--well)}
.convo{white-space:nowrap}

/* ---------- Header additions ---------- */
.sync-pill.warn{color:var(--warn-fg)}
.sync-pill.warn svg{stroke:var(--warn-fg)}
a.round-btn{color:inherit}
.round-btn[aria-expanded="true"]{border-color:var(--accent)}
.search input::-webkit-search-cancel-button{cursor:pointer}
.guest-pill{display:inline-flex;align-items:center;gap:4px;margin-left:var(--s2);padding:2px 8px;border-radius:var(--r-pill);background:var(--t-todo);color:var(--warn-fg);font-size:var(--t-xs);font-weight:700}
.guest-pill svg{width:12px;height:12px;stroke:var(--warn-fg)}
body.guest .edit-only{display:none !important}
.btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-deep)}
.btn[aria-pressed="true"] svg{stroke:var(--accent-deep)}

/* ---------- Buttons ---------- */
a.btn{color:inherit}
a.btn.btn-primary,a.btn.btn-primary:hover{color:var(--on-accent)}
.btn-sm{padding:var(--s2) var(--s4)}
.btn-danger{background:var(--pink);color:var(--on-accent);box-shadow:var(--sh-glow-pink)}
.btn-danger svg{stroke:var(--on-accent)}
.btn-danger-ghost{border:1px solid var(--border);background:var(--surface);color:var(--prio-high)}
.btn-danger-ghost svg{stroke:var(--prio-high)}
.btn-danger-ghost:hover{border-color:var(--pink);box-shadow:var(--sh-glow-pink)}
.link-btn{font-size:var(--t-xs);font-weight:700;color:var(--accent-deep);padding:4px 8px;border-radius:var(--r-pill)}
.link-btn:hover{background:var(--tint-accent);color:var(--accent-deep)}
.chip.active svg{stroke:var(--on-accent)}
.chip[aria-pressed="true"] .me-av{box-shadow:0 0 0 2px var(--surface)}
.more-count{font-weight:800}

/* ---------- Carousel additions ---------- */
.carousel-arrow:disabled{opacity:.4}
.carousel-arrow:disabled:hover{transform:none;box-shadow:none;border-color:var(--border)}
.carousel-track.grabbing,.chip-rail.grabbing{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.carousel-track.grabbing *{pointer-events:none}
.carousel-track:focus-visible{box-shadow:var(--focus);border-radius:var(--r-md)}
a.qa-card{color:inherit}
.ring-arc{transition:stroke-dashoffset .6s var(--ease)}
.tracker-info{min-width:0}
.tracker-task{font-size:var(--t-xs);color:var(--on-accent-dim);max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tracker-task:empty{display:none}
.tracker-card.paused .tracker-time{opacity:.75}

/* ---------- Board ---------- */
.view-host{min-width:0}
.col-cards{display:flex;flex-direction:column;gap:var(--s4);min-height:96px;border-radius:var(--r-md)}
.col-empty{padding:var(--s5) var(--s3);border:1.5px dashed var(--border);border-radius:var(--r-md);text-align:center;font-size:var(--t-xs);font-weight:600;color:var(--muted)}
.col-empty.hidden-by-drag{display:none}
.task-card{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.task-card .task-desc,.task-card .task-title{-webkit-user-select:text;user-select:text}
.task-card:focus-visible{box-shadow:var(--focus)}
.task-card.dragging{opacity:.35;transform:none;box-shadow:none}
.drag-ghost{position:fixed;left:0;top:0;z-index:90;pointer-events:none;margin:0;box-shadow:var(--sh-lift);transition:none;cursor:grabbing}
.drop-placeholder{border:2px dashed var(--accent);border-radius:var(--r-md);background:var(--tint-accent);flex:none}
body.is-dragging,body.is-dragging *{cursor:grabbing !important}
body.guest .task-card{cursor:pointer}
.col-head h2{white-space:nowrap}

/* ---------- Views ---------- */
a.lv-row{color:var(--text)}
a.lv-row:hover{color:var(--text)}
.lv-due{font-size:var(--t-xs);color:var(--muted)}
.lv-board{font-size:var(--t-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-row .tag{justify-self:start}
.view-list.flat{overflow-x:auto}
a.tl-bar{display:block}
a.tl-bar:hover{filter:brightness(1.08);box-shadow:var(--sh-card)}
.tl-lane{overflow:visible}
.tl-today{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:var(--r-pill);background:var(--accent);opacity:.5;pointer-events:none}
.cal-row{display:contents}
.cal-cell{min-width:0}
.cal-cell.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cal-cell.today b{color:var(--accent-deep)}
a.cal-ev:hover{filter:brightness(.96);color:inherit}
.cal-ev.d:hover{color:var(--tag-design-fg)}
.cal-ev.r:hover{color:var(--tag-research-fg)}
.cal-ev.c:hover{color:var(--tag-code-fg)}
.cal-nav{align-items:center}
.cal-arrow{width:36px;height:36px}
.cal-arrow svg{width:16px;height:16px}
.md-item{cursor:pointer}
.md-title{display:block;color:var(--text)}
.md-title:hover{color:var(--accent-deep)}
.md-item.done .md-title{text-decoration:line-through;color:var(--muted)}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding:var(--s6) var(--s4);border:1.5px dashed var(--border);border-radius:var(--r-md);text-align:center}
.empty-title{font-weight:700;font-size:var(--t-sm)}
.empty-text{font-size:var(--t-xs);color:var(--muted)}

/* ---------- Right panel ---------- */
a.up-item{color:var(--text)}
a.up-item:hover{color:var(--text)}
button.meeting-card{width:100%;text-align:left;color:var(--text);font:inherit}
.list-more summary:focus-visible{box-shadow:var(--focus)}

/* ---------- Toast ---------- */
.toast .toast-msg{overflow:hidden;text-overflow:ellipsis;max-width:min(60vw,520px)}
.toast-close{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;margin-left:calc(var(--s2) * -1)}
.toast-close svg{width:14px;height:14px;stroke:var(--on-accent-dim)}
.toast-close:hover{background:var(--wash)}

/* ---------- Modal ---------- */
.modal{
  margin:auto;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);color:var(--text);box-shadow:var(--sh-pop);
  padding:var(--s6);width:min(520px,calc(100vw - var(--s7)));max-height:calc(100vh - var(--s8));
  display:flex;flex-direction:column;gap:var(--s4);overflow:auto;overscroll-behavior:contain;
}
.modal:not([open]){display:none}
.modal-sm{width:min(420px,calc(100vw - var(--s7)))}
.modal-lg{width:min(760px,calc(100vw - var(--s7)))}
.modal::backdrop{background:var(--scrim);backdrop-filter:blur(2px)}
.modal[open]{animation:viewIn .3s var(--ease) both}
.modal-head{display:flex;align-items:center;gap:var(--s3)}
.modal-title{font-size:var(--t-xl);font-weight:800}
.modal-desc,.modal-text{font-size:var(--t-sm);color:var(--soft);line-height:1.6}
.modal-desc{margin-top:calc(var(--s2) * -1)}
.modal-actions{display:flex;justify-content:flex-end;gap:var(--s3);flex-wrap:wrap}
.modal-actions.left{justify-content:flex-start}

/* ---------- Forms ---------- */
.form{display:flex;flex-direction:column;gap:var(--s4)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-label{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field-hint{font-size:var(--t-xs);color:var(--muted)}
.field-error{font-size:var(--t-xs);font-weight:700;color:var(--prio-high)}
.input{
  width:100%;padding:var(--s3) var(--s4);border-radius:var(--r-md);
  background:var(--well);border:1px solid var(--border);
  font-size:var(--t-sm);line-height:1.4;transition:border-color .2s,box-shadow .2s,background .2s;
}
textarea.input{resize:vertical;min-height:72px}
.input:hover{border-color:var(--border-hi)}
.input:focus,.input:focus-visible{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:var(--sh-glow)}
.input[aria-invalid="true"]{border-color:var(--prio-high)}
select.input{cursor:pointer}
.toggle-row{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-sm);font-weight:600;color:var(--soft);cursor:pointer}
.toggle-row input,.check-chip input{accent-color:var(--accent);width:16px;height:16px;flex:none}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s2)}
.check-chip{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:700;color:var(--soft);cursor:pointer;transition:border-color .2s,background .2s}
.check-chip:hover{border-color:var(--border-hi)}
.check-chip:has(input:checked){border-color:var(--text);background:var(--well);color:var(--text)}
.shortcut-list{display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s4);align-items:center;font-size:var(--t-sm)}
.shortcut-list dt{white-space:nowrap}
.shortcut-list dd{color:var(--soft)}
.shortcut-list .kbd{display:inline-block}
.faq{display:flex;flex-direction:column;gap:var(--s2)}
.faq-item{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s3) var(--s4)}
.faq-item summary{cursor:pointer;font-weight:700;font-size:var(--t-sm)}
.faq-item p{margin-top:var(--s2);font-size:var(--t-sm);color:var(--soft)}
.day-list,.people-list{display:flex;flex-direction:column;gap:var(--s2)}
.day-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:var(--t-sm)}
a.day-item:hover{border-color:var(--border-hi);color:var(--text)}
.day-item svg{width:18px;height:18px;stroke:var(--muted);flex:none}
.day-item .cal-ev{margin-top:0;flex:none}
.day-title{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.people-list li{font-size:var(--t-sm)}
.sub-title{font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- Popover / menu ---------- */
.popover{
  position:fixed;z-index:95;min-width:200px;max-width:min(360px,calc(100vw - var(--s4)));
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--sh-pop);padding:var(--s1);animation:viewIn .2s var(--ease) both;
}
.popover.pop-wide{width:min(360px,calc(100vw - var(--s4)))}
.menu{display:flex;flex-direction:column;gap:2px;max-height:min(60vh,420px);overflow-y:auto}
.menu-title{padding:var(--s2) var(--s3) var(--s1);font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.menu-item{display:flex;align-items:center;gap:var(--s2);width:100%;padding:var(--s2) var(--s3);border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:600;color:var(--soft);text-align:left}
.menu-item svg{width:16px;height:16px;stroke:var(--muted);flex:none}
.menu-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-item:hover,.menu-item:focus-visible{background:var(--well);color:var(--text)}
.menu-item.danger{color:var(--prio-high)}
.menu-check{stroke:var(--accent) !important}
.menu-sub{font-size:var(--t-xs);color:var(--muted);flex:none !important}
.menu-sep{height:1px;background:var(--border);margin:var(--s1) var(--s2)}
.pop-panel{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2)}
.pop-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:0 var(--s1)}
.pop-title{font-size:var(--t-md);font-weight:800}
.pop-list{display:flex;flex-direction:column;gap:2px;max-height:min(60vh,440px);overflow-y:auto;overscroll-behavior:contain}
.pop-item{display:flex;align-items:flex-start;gap:var(--s3);width:100%;padding:var(--s2) var(--s2);border-radius:var(--r-sm);text-align:left;color:var(--text)}
.pop-item:hover{background:var(--well);color:var(--text)}
.pop-item.unread{background:var(--surface-2)}
.pop-ico{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--well)}
.pop-ico svg{width:16px;height:16px;stroke:var(--soft)}
.pop-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.pop-line{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-sm)}
.pop-line .nav-badge{margin-left:0}
.pop-text{font-size:var(--t-xs);color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pop-text.strong{font-size:var(--t-sm);color:var(--text);font-weight:600}
.pop-time{font-size:var(--t-xs);color:var(--muted)}
.pop-empty{padding:var(--s4);text-align:center;font-size:var(--t-sm);color:var(--muted)}
.unread-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px}

/* ---------- Drawers ---------- */
.drawer:focus{outline:none}
.drawer > *{flex-shrink:0}
.drawer-h-sm{font-size:var(--t-lg) !important}
.drawer-head .tag,.drawer-head .prio{cursor:pointer;border:1px solid transparent;transition:border-color .2s}
.drawer-head button.prio{padding:3px 8px;border-radius:var(--r-pill)}
.drawer-head .tag:hover,.drawer-head button.prio:hover{border-color:var(--border-hi)}
.tag.none{background:var(--well);color:var(--muted)}
.drawer-title{
  font-family:'Sora',sans-serif;font-size:var(--t-xl);font-weight:800;line-height:1.3;
  width:100%;resize:none;overflow:hidden;border:1px solid transparent;border-radius:var(--r-sm);
  background:none;padding:2px var(--s1);margin:0 calc(var(--s1) * -1);
}
.drawer-desc{
  width:100%;resize:none;overflow:hidden;min-height:60px;
  font-size:var(--t-sm);color:var(--soft);line-height:1.6;
  border:1px solid transparent;border-radius:var(--r-sm);background:none;padding:var(--s1);margin:0 calc(var(--s1) * -1);
}
.drawer-title:hover:not([readonly]),.drawer-desc:hover:not([readonly]){border-color:var(--border)}
.drawer-title:focus,.drawer-desc:focus{outline:none;border-color:var(--accent);background:var(--surface-2)}
.drawer-meta{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.meta-field{display:inline-flex;align-items:center;gap:var(--s1);color:var(--muted)}
.meta-field svg{width:13px;height:13px;stroke:var(--muted)}
.chip-input{
  padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--well);
  font-size:var(--t-xs);font-weight:700;color:var(--soft);
}
.chip-input:focus-visible{outline:none;box-shadow:var(--focus)}
.check-row{justify-content:space-between}
.check-label{display:flex;align-items:center;gap:var(--s2);flex:1;min-width:0;cursor:pointer}
.row-remove{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;flex:none;opacity:0;transition:opacity .2s,background .2s}
.row-remove svg{width:13px;height:13px;stroke:var(--muted)}
.check-row:hover .row-remove,.file-row:hover .row-remove,.row-remove:focus-visible{opacity:1}
.row-remove:hover{background:var(--t-high)}
.row-remove:hover svg{stroke:var(--prio-high)}
@media (hover:none){.row-remove{opacity:1}}
.file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-row b{margin-left:0}
.inline-form{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3);border:1.5px dashed var(--border-hi);border-radius:var(--r-md);background:var(--surface-2)}
.inline-form:focus-within{border-color:var(--accent);background:var(--surface)}
.inline-form svg{width:14px;height:14px;stroke:var(--muted);flex:none}
.inline-input{flex:1;min-width:0;border:none;outline:none;background:none;padding:var(--s1) 0;font-size:var(--t-sm)}
label.chip{cursor:pointer}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.plan-grid .chip{justify-content:center;grid-column:1 / -1}
.mini-field{display:flex;flex-direction:column;gap:4px;font-size:var(--t-xs);font-weight:700;color:var(--muted)}
.mini-field.wide{grid-column:1 / -1}
.mini-field .input{padding:var(--s2) var(--s3)}
.comment-form{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-end}
.drawer-danger{padding-top:var(--s4);border-top:1px solid var(--border)}
.drawer-foot{font-size:var(--t-xs);color:var(--muted)}
.chat-drawer{padding:var(--s4)}
.chat-drawer .msg-section{display:flex;flex:1;min-height:0;box-shadow:none}
.chat-drawer .write-msg{display:flex}

/* ---------- Scrim (mobile nav) ---------- */
.scrim{position:fixed;inset:0;z-index:79;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.show{opacity:1;pointer-events:auto}

/* ---------- Pages ---------- */
.page,.page-host{display:flex;flex-direction:column;gap:var(--s6);min-width:0}
.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:var(--s5);align-items:start}
.page-card{
  display:flex;flex-direction:column;gap:var(--s4);min-width:0;
  padding:var(--s5);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-card);
}
.page-card.span-2{grid-column:1 / -1}
.page-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.page-card-head .rp-title{margin-bottom:0}
.page-actions{grid-column:1 / -1;display:flex;justify-content:flex-end}
.page-note{font-size:var(--t-sm);color:var(--muted)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:var(--s4)}
.modal .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-tile{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-card);flex-direction:row}
.modal .stat-tile{flex-direction:column;align-items:flex-start;box-shadow:none}
.stat-body{display:flex;flex-direction:column;min-width:0}
.stat-label{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stat-value{font-family:'Sora',sans-serif;font-size:var(--t-2xl);font-weight:800;color:var(--text);line-height:1.2}
.stat-value.huge{font-size:56px;color:var(--accent)}
.stat-sub{font-size:var(--t-xs);color:var(--muted)}
.board-progress.flat{margin-top:0}
.board-sum{display:flex;flex-direction:column;gap:var(--s3)}
.board-sum li{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:var(--s4);align-items:center}
.board-sum-name{font-weight:700;font-size:var(--t-sm);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-sum-name:hover{color:var(--accent-deep)}
.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s5)}
.board-card{
  display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-card);color:var(--text);text-align:left;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.board-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);color:var(--text)}
.board-card.current{border-color:var(--accent)}
.board-card-top{display:flex;align-items:center;justify-content:space-between}
.board-card-title{font-size:var(--t-lg);font-weight:800;font-family:'Sora',sans-serif}
.board-card .bp-bar{max-width:none}
.add-card{align-items:center;justify-content:center;text-align:center;border:1.5px dashed var(--border-hi);box-shadow:none;background:var(--surface-2);min-height:200px}
.add-card .qa-ico{background:var(--tint-accent)}
.add-card .qa-ico svg{stroke:var(--accent)}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s4)}
.team-card{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-card);transition:border-color .3s}
.team-card.highlight{border-color:var(--accent);box-shadow:var(--sh-glow)}
.team-body{flex:1;min-width:0}
.team-name{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:var(--t-md);font-weight:800}
.team-mail{font-size:var(--t-xs);font-weight:600;color:var(--accent-deep);word-break:break-all}
.team-stat{display:flex;flex-direction:column;align-items:center;padding:var(--s2) var(--s3);border-radius:var(--r-md);background:var(--well);flex:none}
.team-stat b{font-family:'Sora',sans-serif;font-size:var(--t-lg)}
.team-stat span{font-size:var(--t-xs);color:var(--muted)}
.avatar-lg{display:grid;place-items:center;border-radius:50%;flex:none;background:var(--grad-avatar);font-family:'Sora',sans-serif;font-weight:700;color:var(--soft);overflow:hidden}
.avatar-lg img{width:100%;height:100%;object-fit:cover}
.avatar-size-md{width:56px;height:56px;font-size:var(--t-md)}
.avatar-size-lg{width:96px;height:96px;font-size:var(--t-2xl)}
.profile-hero{align-items:flex-start}
.center-page{min-height:100vh;display:grid;place-items:center;padding:var(--s5)}
.center-card{align-items:center;text-align:center;max-width:440px;padding:var(--s8) var(--s7)}
.brand-mark.big{width:56px;height:56px;border-radius:16px}
.brand-mark.big svg{width:26px;height:26px}

/* ---------- Bare layout (signed out / 404) ---------- */
.app.bare{grid-template-columns:1fr}
.app.bare .sidebar,.app.bare .right-panel{display:none}
.app.bare .main{grid-column:1;padding:0}

/* ============================ TABLET (768–1279) ============================ */
@media (max-width:1279px){
  .brand{justify-content:center}
  .app:not(.bare) .main{min-width:0}
}

/* ============================ MOBILE (<768) ============================ */
@media (max-width:767px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .board-sum li{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr}
  .toast{max-width:calc(100vw - var(--s6));white-space:normal}
  .chip-rail{flex-basis:100%;order:1}
  .views{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .views::-webkit-scrollbar{display:none}
  .view-tab{flex:none}
  .tools-label{order:0}
  .prio-quick{order:2;margin-left:0}
  .sort-chip{order:3}
  .modal{padding:var(--s5)}
  .cal-cell{min-height:64px;padding:3px}
  .cal-ev{font-size:var(--t-xs);padding:1px 4px}
  .view-calendar{padding:var(--s3);overflow-x:auto}
  .cal-grid{min-width:520px}

  /* Off-canvas navigation drawer opened by the header menu button */
  .app.nav-open .sidebar{
    display:flex;position:fixed;inset:0 auto 0 0;z-index:80;width:min(320px,88vw);height:100%;
    padding:var(--s5);background:var(--surface);box-shadow:var(--sh-pop);animation:slideIn .3s var(--ease) both;
  }
  .app.nav-open .brand{justify-content:space-between}
  .app.nav-open .brand-name,.app.nav-open .p-info,.app.nav-open .nav-label,.app.nav-open .logout-label{display:initial}
  .app.nav-open .profile-card{justify-content:flex-start;padding:var(--s2) var(--s3)}
  .app.nav-open .nav-item{justify-content:flex-start;padding:10px var(--s3)}
  .app.nav-open .nav-item.active::before{left:calc(var(--s5) * -1)}
  .app.nav-open .nav-close{display:grid}
  .app.nav-open .msg-section{display:flex;min-height:260px}
  .app.nav-open .write-msg{display:flex}
}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:none}}

/* ---------- Motion preference (system or in-app setting) ---------- */
html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
}
.chat-drawer .msg-top{justify-content:flex-end}
.chat-drawer .msg-top .sec-title{display:none}

/* ---------- Column colors (custom statuses) ---------- */
.swatches{display:flex;flex-wrap:wrap;gap:var(--s2)}
.swatch{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .2s}
.swatch-dot{width:22px;height:22px;border-radius:50%;background:var(--col)}
.swatch:has(input:checked){border-color:var(--col)}
.swatch:has(input:focus-visible){box-shadow:var(--focus)}
.col-row{display:grid;grid-template-columns:minmax(120px,1.4fr) 1fr 1fr 80px auto;gap:var(--s2);align-items:end}
.col-row .field{margin:0}
.col-row-actions{display:flex;gap:var(--s1);padding-bottom:4px}
.icon-btn{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--border);background:var(--surface)}
.icon-btn svg{width:14px;height:14px;stroke:var(--muted)}
.icon-btn:hover:not(:disabled){border-color:var(--border-hi)}
.icon-btn:disabled{opacity:.4;cursor:not-allowed}
.icon-btn.danger svg{stroke:var(--prio-high)}
@media (max-width:767px){.col-row{grid-template-columns:1fr 1fr}.col-row-actions{grid-column:1 / -1}}

/* ---------- Auth screens (login, sign up, two-factor, reset) ---------- */
.app.auth .main{display:block}
.auth-card{align-items:stretch;text-align:left;max-width:460px;width:100%;gap:var(--s4)}
.auth-card > .brand-mark,.auth-card > .page-title,.auth-card > .page-sub{align-self:center;text-align:center}
.auth-card .form{gap:var(--s4)}
.auth-submit{width:100%;justify-content:center}
.auth-row{display:flex;justify-content:flex-end}
.auth-foot{text-align:center;font-size:var(--t-sm);color:var(--muted)}
.auth-alert{padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--t-high);color:var(--prio-high);font-size:var(--t-sm);font-weight:600}
.auth-alert.ok{background:var(--pal-green-t);color:var(--pal-green-fg)}
.auth-steplist{display:flex;flex-direction:column;gap:var(--s5);padding-left:var(--s5);font-size:var(--t-sm);color:var(--soft);line-height:1.5}
.auth-steplist > li{display:flex;flex-direction:column;gap:var(--s3)}
.auth-steplist > li::marker{font-weight:800;color:var(--accent)}
.qr{width:184px;height:184px;padding:var(--s2);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);align-self:center}
.qr svg{width:100%;height:100%;display:block}
.qr path{fill:var(--text)}
.auth-details summary{cursor:pointer;font-weight:700;color:var(--accent-deep)}
.secret-key{display:block;margin-top:var(--s2);padding:var(--s3);border-radius:var(--r-sm);background:var(--well);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-sm);letter-spacing:.06em;word-break:break-all;user-select:all}
.backup-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);padding:var(--s3);border-radius:var(--r-sm);background:var(--well);list-style:none}
.backup-codes code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-sm);font-weight:700;color:var(--text)}

/* ---------- Shared workspace (stage 2): presence, offline, access ---------- */
.team-av{position:relative;display:inline-grid;flex:none}
.online-dot{position:absolute;right:2px;bottom:2px;width:12px;height:12px;border-radius:50%;background:var(--st-approved);border:2px solid var(--surface)}
.offline-banner{position:fixed;left:50%;bottom:var(--s5);transform:translateX(-50%);z-index:90;padding:var(--s2) var(--s5);border-radius:var(--r-pill);background:var(--text);color:var(--on-accent);font-size:var(--t-sm);font-weight:700;box-shadow:var(--sh-pop)}
.sync-pill.warn{color:var(--warn-fg)}
.sync-pill.warn svg{stroke:var(--warn-fg)}
body.no-chat .msg-section,body.no-chat [data-testid="mail-btn"]{display:none !important}
.access-row{grid-template-columns:minmax(140px,1fr) minmax(160px,1fr);align-items:center}
.access-name{display:flex;align-items:center;gap:var(--s2);font-weight:700;font-size:var(--t-sm)}
.invite-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.danger-chip{color:var(--prio-high)}
.danger-chip svg{stroke:var(--prio-high)}
.invite-banner{display:flex;flex-direction:column;gap:4px;padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--tint-accent);font-size:var(--t-sm);color:var(--soft)}
.invite-banner b{color:var(--text)}