/* Tuesday — Monday.com-faithful UI (tenant-agnostic core) */
:root {
  --blue: #0073ea; --blue-hover: #0060b9; --blue-tint: #e5f4ff;
  --ink: #323338; --ink-2: #676879; --line: #e6e9ef; --line-2: #d0d4e4;
  --bg: #ffffff; --side: #f7f8fc; --hover: #f5f6f8; --card: #ffffff;
  --status-empty: #c4c4c4;
  --green: #00c875; --coral: #ff5e62;
  --radius: 4px;
  --shadow-pop: 0 6px 20px rgba(0,0,0,.2);
  font-size: 14px;
}
/* dark palette matched to Monday's night theme */
:root[data-theme="dark"] {
  --bg: #181b34; --side: #262843; --hover: #2f3358; --card: #232748;
  --line: #33375c; --line-2: #4b4e69; --blue-tint: #2b3a67;
  --ink: #d5d8df; --ink-2: #9699a8; --status-empty: #3e415f;
  --shadow-pop: 0 6px 24px rgba(0,0,0,.55);
  --thead: #1f2347; --sub: #1a1f3a; --selbar: #10132a; --side-hover: #262c50; --active: #2d5bef;
  --login-grad: linear-gradient(160deg, #161929 55%, #2a2038);
}
/* more themes. Light ones only override the light base; dark ones also set the
   dark-only variables above. Pick in Settings; stored per device (tuesday.theme). */
:root[data-theme="blush"] {
  /* dark plum with the blush palette on top: #c58fa2 dusty rose accent, #945a70 mauve, pale pink text */
  --bg: #2e2328; --side: #352a30; --hover: #43343b; --card: #382c32;
  --line: #4a3a42; --line-2: #6a5360; --blue: #c58fa2; --blue-hover: #b17790; --blue-tint: #5a3d4a;
  --ink: #f3e7eb; --ink-2: #c2a9b3; --status-empty: #5b4650;
  --shadow-pop: 0 6px 24px rgba(0,0,0,.55);
  --thead: #352930; --sub: #33272d; --selbar: #221a1e; --side-hover: #43343b; --active: #945a70;
  --login-grad: linear-gradient(160deg, #2a2025 55%, #3d2a33);
}
:root[data-theme="sand"] {
  --bg: #ebe1cf; --side: #dfd1b8; --hover: #d6c5a9; --card: #f5eee1;
  --line: #d3c3a6; --line-2: #b9a382; --blue: #b04f27; --blue-hover: #94401d; --blue-tint: #ecd3bf;
  --ink: #3a2f25; --ink-2: #75654f; --status-empty: #c6b398;
  --shadow-pop: 0 6px 20px rgba(60,40,20,.2);
}
:root[data-theme="forest"] {
  --bg: #121a14; --side: #1a2620; --hover: #24352c; --card: #182420;
  --line: #26382f; --line-2: #3a5244; --blue: #7cc08f; --blue-hover: #5fa877; --blue-tint: #24402f;
  --ink: #e6eadf; --ink-2: #9fb0a4; --status-empty: #33473b;
  --shadow-pop: 0 6px 24px rgba(0,0,0,.55);
  --thead: #16231c; --sub: #15201a; --selbar: #0d1510; --side-hover: #223229; --active: #3f8a57;
  --login-grad: linear-gradient(160deg, #101813 55%, #1d2a1f);
}
:root[data-theme="ocean"] {
  --bg: #0e1b26; --side: #13283a; --hover: #1b3448; --card: #122434;
  --line: #1f3a4e; --line-2: #2f5167; --blue: #36b3c9; --blue-hover: #2797aa; --blue-tint: #1a3f4e;
  --ink: #d9e6ee; --ink-2: #8fa7b6; --status-empty: #2a4255;
  --shadow-pop: 0 6px 24px rgba(0,0,0,.55);
  --thead: #10212f; --sub: #0f1f2c; --selbar: #09141d; --side-hover: #1a3346; --active: #1f7f93;
  --login-grad: linear-gradient(160deg, #0c1822 55%, #102a3a);
}

/* themed scrollbars (default ones look terrible in dark mode) */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-2); }
::-webkit-scrollbar-corner { background: transparent; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: 'Figtree', 'Roboto', system-ui, sans-serif; color: var(--ink); background: var(--bg); overflow: hidden; }
/* buttons don't inherit color by default (UA gives them black) — fixes dark-mode contrast everywhere */
button { font-family: inherit; font-size: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: var(--ink); }
.boot { display: grid; place-items: center; height: 100vh; color: var(--ink-2); }
.boot-fun { align-content: center; gap: 4px; }
.boot-heart { color: var(--coral); font-size: 64px; line-height: 1; animation: heartbeat 1.1s ease-in-out infinite; }
.boot-mark { height: 64px; width: auto; margin: 0 auto; animation: markpulse 1.6s ease-in-out infinite; }
/* brand marks breathe gently and stay upright; the tilted double-thump is for the ♥ glyph only */
@keyframes markpulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: .8; }
}
@keyframes heartbeat {
  0%, 50%, 100% { transform: rotate(18deg) scale(1); }
  12% { transform: rotate(18deg) scale(1.22); }
  24% { transform: rotate(18deg) scale(1); }
  36% { transform: rotate(18deg) scale(1.12); }
}
.boot-brand { font-weight: 800; font-size: 22px; letter-spacing: -.5px; color: var(--ink); }
.boot-msg { font-size: 13.5px; min-height: 18px; }
.boot-msg.flip { animation: fadeIn .35s ease; }
@media (prefers-reduced-motion: reduce) { .boot-heart { animation: none; transform: rotate(18deg); } .boot-mark { animation: none; } }

/* ============ login ============ */
.login-wrap { display: grid; place-items: center; height: 100vh; background: linear-gradient(160deg, #f7f8fc 55%, #ffe9e2); }
.login-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 40px 44px; width: 380px; box-shadow: 0 18px 50px rgba(15,28,46,.10); text-align: center; }
.login-wordmark { height: 56px; display: block; margin: 0 auto 14px; }
.login-logo { font-size: 34px; font-weight: 800; letter-spacing: -1px; margin: 0 0 22px; }
.login-logo .heart { color: var(--coral); display: inline-block; transform: rotate(18deg); }
.login-sub { color: var(--ink-2); margin: 0 0 26px; }
.login-card label { display: block; text-align: left; font-weight: 600; font-size: 13px; margin: 14px 0 6px; }
.login-card input { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 15px; }
.login-card input:focus { outline: 2px solid var(--blue); border-color: transparent; }
.btn { background: var(--blue); border: 0; color: #fff; border-radius: var(--radius); padding: 10px 18px; font-weight: 600; transition: background .15s; }
.btn:hover { background: var(--blue-hover); }
.btn.block { width: 100%; margin-top: 20px; font-size: 15px; }
.btn.ghost { background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); }
.login-msg { margin-top: 14px; font-size: 13px; color: var(--ink-2); min-height: 18px; }
.login-msg.ok { color: var(--green); font-weight: 600; }
.login-alt { margin-top: 10px; text-align: center; }
.login-alt a { color: var(--blue); font-size: 13px; cursor: pointer; text-decoration: none; }

/* ============ shell ============ */
.shell { display: grid; grid-template-columns: 260px 1fr; height: 100vh; }

/* sidebar */
.side { background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.side-logo { padding: 18px 18px 10px; font-size: 22px; font-weight: 800; letter-spacing: -.5px; display: flex; align-items: center; gap: 10px; }
.side-logo .heart { color: var(--coral); display: inline-block; transform: rotate(18deg); }
.side-wordmark { height: 30px; width: auto; max-width: 60%; object-fit: contain; object-position: right; margin-left: auto; flex: 0 1 auto; min-width: 0; }
/* showAppName:false -> the wordmark alone owns the header, left-aligned */
.side-logo.no-label .side-wordmark { margin-left: 0; max-width: 100%; height: 32px; object-position: left; }
/* brand mark as an image (tenants without the ♥): sized by height only, never stretched */
.side-logo img.mark { height: 20px; width: auto; margin-left: 5px; vertical-align: -3px; }
.login-logo img.mark { height: 30px; width: auto; margin-left: 6px; vertical-align: -4px; }
.side-search { margin: 4px 12px 10px; }
.side-search input { width: 100%; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); }
.side-scroll { overflow-y: auto; flex: 1; padding-bottom: 20px; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 4px; color: var(--ink-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.side-add { border: 0; background: transparent; color: var(--ink-2); border-radius: 6px; width: 22px; height: 22px; font-size: 15px; line-height: 1; }
.side-add:hover { background: #e6e9ef; color: var(--blue); }
.side-item { display: flex; align-items: center; gap: 9px; width: calc(100% - 16px); margin: 1px 8px; padding: 7px 10px; border: 0; background: transparent; border-radius: var(--radius); color: var(--ink); text-align: left; font-size: 14px; }
.side-item:hover { background: #eceff5; }
.side-item.active { background: var(--blue-tint); color: var(--blue); font-weight: 600; }
.side-item .bicon { width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.side-item .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item .lock-ic { margin-left: auto; flex: none; color: var(--ink-2); opacity: .8; display: flex; align-items: center; }
.side-item.drop-above { box-shadow: 0 -2px 0 var(--blue); }
.side-item.drop-below { box-shadow: 0 2px 0 var(--blue); }
.side-item .doc-ic { background: transparent; font-size: 13px; color: var(--ink-2); }
.side-item.active .doc-ic { color: inherit; }
.side-folder { display: flex; align-items: center; gap: 6px; padding: 7px 10px 4px; margin-top: 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 700; cursor: pointer; user-select: none; border-radius: var(--radius); position: relative; }
.fmenu { opacity: 0; border: 0; background: none; color: var(--ink-2); border-radius: 4px; padding: 0 5px; position: absolute; right: 8px; font-size: 13px; }
.side-folder:hover .fmenu { opacity: 1; }
.fmenu:hover { background: var(--hover); color: var(--ink); }
.side-folder:hover { color: var(--ink); }
.side-folder.fdragover { background: var(--blue-tint); color: var(--blue); }
.side-folder .fcaret { font-size: 10px; transition: transform .15s; }
.side-folder .fcaret.closed { transform: rotate(-90deg); }
.side-user { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; align-items: center; gap: 4px; font-size: 13px; }
.side-user .avatar { width: 28px; height: 28px; }
.me-btn { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 8px; border-radius: var(--radius); flex: 1; text-align: left; }
.me-btn:hover { background: var(--hover); }
.side-user .out { margin-left: auto; color: var(--ink-2); background: none; border: 0; font-size: 12px; }
.side-user .out:hover { color: var(--coral); }

/* main column */
.main { display: flex; flex-direction: column; overflow: hidden; }
.topbar { padding: 18px 28px 0; }
.topbar-row { display: flex; align-items: center; gap: 14px; }
.board-title { font-size: 24px; font-weight: 700; border: 1px solid transparent; border-radius: 6px; padding: 2px 8px; margin-left: -8px; max-width: 60%; }
.board-title:hover { border-color: var(--line-2); }
.board-title:focus { outline: 2px solid var(--blue); }
.top-search { margin-left: auto; }
.top-search input { padding: 7px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); width: 210px; }
.menu-btn { background: none; border: 0; color: var(--ink-2); font-size: 18px; border-radius: 6px; width: 30px; height: 30px; }
.menu-btn:hover { background: var(--hover); }
.board-scroll { overflow: auto; flex: 1; padding: 2px 28px 80px; }
.board-scroll .group:first-child { margin-top: 6px; }

/* toolbar (New item / Person / Filter / Sort) */
.btoolbar { display: flex; gap: 6px; align-items: center; padding: 8px 0 4px; }
.btn.tb-new { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13.5px; }
.tbtn { display: flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--ink-2); padding: 7px 11px; border-radius: var(--radius); font-size: 13.5px; }
.tbtn:hover { background: var(--hover); color: var(--ink); }
.tbtn.on { background: var(--blue-tint); color: var(--blue); font-weight: 600; }
/* appears only while your local sort differs from the board's saved order */
.tbtn.savesort { border: 1px dashed var(--blue); color: var(--blue); font-weight: 600; animation: fadeIn .18s ease; }
.tbtn.savesort:hover { background: var(--blue-tint); }
.ic { display: inline-grid; place-items: center; flex: none; }
.ic svg { width: 100%; height: 100%; fill: currentColor; }
.thsort { cursor: pointer; user-select: none; }
.thsort:hover { color: var(--blue); }
/* absolutely positioned so it never shifts the centered header title */
.colmenu { opacity: 0; border: 0; background: none; color: var(--ink-2); border-radius: 4px; padding: 0 4px; font-size: 13px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.thsort:hover .colmenu { opacity: 1; }
.colmenu:hover { background: var(--hover); color: var(--ink); }
.mcheck .ic svg { fill: #fff; }
.fsec { padding: 4px 6px 8px; }
.fsec-t { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.fchip { border: 0; border-radius: 4px; padding: 5px 10px; margin: 0 4px 4px 0; font-size: 12.5px; background: var(--c); color: #fff; opacity: .45; }
.fchip.on { opacity: 1; outline: 2px solid var(--ink); }
.pop.filter-pop { width: 250px; max-height: 65vh; overflow-y: auto; }
.prow.onrow, .mrow.onrow { background: var(--blue-tint); color: var(--blue); font-weight: 600; }

/* ============ table view ============ */
.group { margin-top: 26px; animation: fadeIn .25s ease; }
.group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.group-caret { border: 0; background: none; font-size: 12px; width: 22px; height: 22px; border-radius: 5px; color: inherit; transition: transform .18s; }
.group-caret.closed { transform: rotate(-90deg); }
.group-caret:hover { background: var(--hover); }
.group-title { font-size: 16px; font-weight: 600; border: 1px solid transparent; border-radius: 5px; padding: 1px 6px; }
.group-title:hover { border-color: var(--line-2); }
.group-title:focus { outline: 2px solid var(--blue); }
.group-count { color: var(--ink-2); font-size: 12px; }

/* width:max-content keeps backgrounds/borders spanning full scrolled width on wide boards */
.tbl { border-left: 6px solid; border-radius: 4px; width: max-content; min-width: min(560px, 100%); }
.trow { display: flex; background: var(--card); border-bottom: 1px solid var(--line); align-items: stretch; min-height: 36px; }
.trow.drop-above { box-shadow: inset 0 3px 0 var(--blue); }
.trow.drop-below { box-shadow: inset 0 -3px 0 var(--blue); }
.trow.gdrop { background: var(--blue-tint); }
/* group headers only: item rows drag via the empty space right of the name */
.drag-h { opacity: .45; cursor: grab; color: var(--ink-2); width: 13px; flex: none; font-size: 10px; user-select: none; text-align: center; }
.group-head:hover .drag-h { opacity: 1; }
.group.gdrop-above { box-shadow: 0 -3px 0 var(--blue); }
.group.gdrop-below { box-shadow: 0 3px 0 var(--blue); }
.col-resize { position: absolute; right: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 2; }
.col-resize:hover { background: var(--blue); opacity: .5; }
.trow.thead .cell { position: relative; }
.trow:hover:not(.thead) { background: var(--hover); }
.trow.thead { color: var(--ink-2); font-size: 13px; border-top: 1px solid var(--line); }
.trow.thead .cell { justify-content: center; }
.trow.thead .cell.name-cell { justify-content: flex-start; }
.trow.sub { background: #f9fafd; }
.trow.newrow .cell { color: var(--ink-2); }
.trow.sumrow { font-weight: 700; font-size: 13px; border-top: 1px solid var(--line-2); }
.trow.sumrow .cell { justify-content: center; }
.trow.sumrow:hover:not(.thead) { background: var(--card); }
.cell { display: flex; align-items: center; padding: 0 10px; border-right: 1px solid var(--line); font-size: 14px; overflow: hidden; position: relative; flex: none; }
.cell.name-cell { flex: 1 1 340px; min-width: 240px; gap: 6px; }
.cell.status-cell, .cell.people-cell, .cell.date-cell, .cell.numbers-cell, .cell.checkbox-cell { justify-content: center; }
.cell input.inline { border: 0; background: transparent; width: 100%; padding: 6px 2px; }
.cell input.inline:focus { outline: 2px solid var(--blue); border-radius: 4px; background: var(--card); }
/* the name takes only the width it needs; the empty space to its right is the drag area */
.name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; flex: 0 1 auto; padding: 6px 2px; border-radius: 4px; }
.name-text:hover { text-decoration: underline; text-decoration-color: var(--line-2); }
.drag-space { flex: 1 1 24px; min-width: 24px; align-self: stretch; cursor: grab; }
.sorted .drag-space { cursor: not-allowed; }
.chat-ind { border: 0; background: none; color: var(--ink-2); font-size: 12px; flex: none; display: flex; align-items: center; justify-content: center; gap: 3px; width: 38px; }
.chat-ind.has { color: var(--blue); font-weight: 600; }
.sub-caret { border: 0; background: none; color: var(--ink-2); width: 20px; font-size: 11px; flex: none; transition: transform .18s; }
.sub-caret.open { transform: rotate(90deg); }

/* multi-select: row checkboxes + bulk action bar */
.rowsel { width: 16px; height: 16px; flex: none; padding: 0; border: 1.5px solid var(--line-2); border-radius: 4px; background: var(--card); opacity: .55; display: grid; place-items: center; transition: opacity .12s, background .12s, border-color .12s; }
.rowsel::after { content: ''; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(0, -1px); opacity: 0; }
.rowsel.on { background: var(--blue); border-color: var(--blue); opacity: 1; }
.rowsel.on::after { opacity: 1; }
.rowsel:hover, .trow:hover .rowsel, .board-scroll.selecting .rowsel { opacity: 1; }
.trow.sel, .trow.sel:hover { background: var(--blue-tint); }

.selbar { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 85; display: flex; align-items: center; gap: 14px; background: var(--ink); color: #fff; border-radius: 8px; padding: 9px 12px 9px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: fadeIn .18s ease; }
[data-mode="dark"] .selbar { background: var(--selbar); border: 1px solid var(--line); }
.selcount { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.selbar-actions { display: flex; gap: 4px; }
.selact { display: flex; align-items: center; gap: 6px; border: 0; background: rgba(255,255,255,.09); color: #fff; border-radius: 6px; padding: 7px 12px; font-size: 13px; }
.selact:hover { background: rgba(255,255,255,.2); }
.selact.danger:hover { background: #d83a52; }
.selact .ic svg { fill: #fff; }
.selbar-x { border: 0; background: none; color: rgba(255,255,255,.7); font-size: 16px; width: 28px; height: 28px; border-radius: 6px; }
.selbar-x:hover { background: rgba(255,255,255,.14); color: #fff; }
.gdot { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
@media (max-width: 780px) { .selbar { left: 8px; right: 8px; transform: none; justify-content: space-between; } .selact { padding: 7px 10px; } }

/* status cell — full-bleed square like real Monday */
.cell.status-cell { padding: 0; }
.status-cell .status-chip { width: 100%; height: 100%; min-height: 35px; align-self: stretch; border-radius: 0; color: #fff; border: 0; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; position: relative; transition: filter .12s; }
.status-chip { color: #fff; border: 0; font-weight: 500; font-size: 13px; border-radius: 4px; }
.status-chip:hover { filter: brightness(1.08); }
.status-chip.bump { animation: pop .3s ease; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* people cell */
.avatars { display: flex; }
.avatar { width: 26px; height: 26px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 2px solid var(--card); flex: none; }
.avatars .avatar + .avatar { margin-left: -8px; }
.people-btn, .date-btn { border: 0; background: none; width: 100%; height: 100%; min-height: 34px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.people-btn:hover .add-dot, .date-btn:hover { color: var(--blue); }

/* checkbox */
.mcheck { width: 18px; height: 18px; padding: 0; border: 1px solid var(--line-2); border-radius: 4px; background: var(--card); display: flex; align-items: center; justify-content: center; color: #fff; transition: all .12s; }
.mcheck .ic { display: block; }
.mcheck.on { background: var(--blue); border-color: var(--blue); }

/* add item row */
.additem input { border: 0; background: transparent; width: 100%; padding: 8px 4px; font-size: 13px; }
.additem input:focus { outline: none; }
.add-group { margin-top: 18px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 7px 14px; font-weight: 500; }
.add-group:hover { background: var(--hover); }
.addcol-btn { border: 0; background: none; color: var(--ink-2); font-size: 16px; padding: 0 12px; }
.addcol-btn:hover { color: var(--blue); }

/* ============ wiki ============ */
.wiki { max-width: 860px; margin: 0 auto; padding: 10px 0 80px; }
.wiki-tools { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 6px; }
.doc-body { line-height: 1.7; font-size: 15.5px; max-width: 780px; }
.doc-body img { max-width: 100%; border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,.08); margin: 6px 0; }
.doc-body pre, .doc-body code { background: var(--hover); border-radius: 5px; padding: 2px 6px; font-size: 13px; }
.doc-body pre { padding: 12px; overflow-x: auto; }
.doc-body h1, .doc-body h2 { letter-spacing: -.3px; }
.doc-body h1 { font-size: 28px; border-bottom: 2px solid var(--line); padding-bottom: 8px; }
.doc-body h2 { font-size: 21px; margin-top: 1.6em; }
.doc-body h3 { font-size: 17px; margin-top: 1.3em; }
.doc-body a { color: var(--blue); }
.doc-body li { margin: .3em 0; }
.doc-body input[type=checkbox] { accent-color: var(--blue); width: 15px; height: 15px; }
.doc-body blockquote { border-left: 4px solid var(--coral); margin: 1em 0; padding: 8px 16px; background: var(--hover); border-radius: 0 6px 6px 0; color: var(--ink-2); }
.doc-body blockquote p { margin: 0; }
.doc-body table { border-collapse: collapse; margin: 1em 0; }
.doc-body th, .doc-body td { border: 1px solid var(--line-2); padding: 7px 12px; }
.doc-body th { background: var(--hover); }
.doc-body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.doc-toolbar { display: flex; gap: 4px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.dtb { display: flex; align-items: center; gap: 5px; border: 1px solid var(--line-2); background: var(--card); border-radius: 4px; padding: 5px 10px; font-size: 12.5px; }
.dtb:hover { border-color: var(--blue); color: var(--blue); }
.doc-hint { margin-left: auto; color: var(--ink-2); font-size: 12px; }
.doc-edit { width: 100%; min-height: 65vh; border: 1px solid var(--line-2); border-radius: 6px; padding: 18px; font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; line-height: 1.6; resize: vertical; }
.doc-edit:focus { outline: 2px solid var(--blue); }

/* ============ item panel ============ */
.panel-scrim { position: fixed; inset: 0; background: rgba(41,47,76,.28); z-index: 40; animation: scrimIn .2s ease; }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 92vw; background: var(--card); z-index: 41; box-shadow: -10px 0 30px rgba(0,0,0,.12); display: flex; flex-direction: column; animation: slideIn .22s cubic-bezier(.2,.7,.3,1); }
@keyframes slideIn { from { transform: translateX(60px); opacity: .4; } to { transform: none; opacity: 1; } }
.panel-head { padding: 18px 22px 0; }
.panel-title { font-size: 20px; font-weight: 700; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; margin-left: -6px; }
.panel-title:hover { border-color: var(--line-2); }
.feed-tabs { display: flex; gap: 6px; margin: 12px 0 2px; }
.feed-tabs button { border: 1px solid var(--line-2); background: var(--card); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.feed-tabs button.sel { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); }
.panel-close { position: absolute; top: 14px; right: 16px; border: 0; background: none; font-size: 20px; color: var(--ink-2); border-radius: 6px; width: 32px; height: 32px; }
.panel-close:hover { background: var(--hover); }
.panel-cols { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 22px 14px; border-bottom: 1px solid var(--line); }
.pcol { font-size: 13px; display: flex; align-items: center; gap: 7px; }
.pcol .pcol-label { color: var(--ink-2); }
.panel-body { flex: 1; overflow-y: auto; padding: 16px 22px; background: #fafbfd; }
.composer { background: var(--card); border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; margin-bottom: 18px; }
.composer textarea { width: 100%; border: 0; padding: 12px 14px; min-height: 72px; resize: vertical; }
.composer textarea:focus { outline: none; }
.composer .bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-top: 1px solid var(--line); }
.composer .bar .btn.ghost { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 6px 10px; }
.update { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; margin-bottom: 12px; animation: fadeIn .25s ease; }
.update .uhead { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.update .uname { font-weight: 600; }
.update .utime { color: var(--ink-2); font-size: 12px; margin-left: auto; }
.update .ubody { line-height: 1.55; }
.update .ubody p { margin: .35em 0; }
.update .ubody img { max-width: 100%; border-radius: 8px; border: 1px solid var(--line); margin: 4px 0; }
.update .ubody a { color: var(--blue); }
.update .ufoot { display: flex; gap: 14px; margin-top: 10px; }
.ulike, .ureply { border: 0; background: none; color: var(--ink-2); font-size: 12.5px; padding: 3px 6px; border-radius: 5px; }
.ulike:hover, .ureply:hover { background: var(--hover); color: var(--blue); }
.udel { border: 0; background: none; color: var(--ink-2); font-size: 12.5px; padding: 3px 6px; border-radius: 5px; }
.udel:hover { background: var(--hover); color: #d83a52; }
.replies { margin-left: 26px; margin-top: 10px; border-left: 2px solid var(--line); padding-left: 14px; }
.replies .update { padding: 10px 12px; margin-bottom: 8px; }
.replybox textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 6px; padding: 8px 10px; min-height: 44px; }

/* ============ popovers & modals ============ */
/* z-index 80: pops must layer ABOVE modals (label-colour swatches open from the Edit Labels dialog) */
.pop { position: fixed; z-index: 80; background: var(--card); border-radius: 6px; box-shadow: var(--shadow-pop); border: 1px solid var(--line); animation: popIn .14s ease; padding: 8px; max-height: 72vh; overflow-y: auto; }
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(-4px); } to { opacity: 1; transform: none; } }
.pop.status-pop { width: 200px; }
.pop .plabel { display: block; width: 100%; border: 0; border-radius: 5px; color: #fff; font-weight: 500; padding: 8px; margin-bottom: 6px; font-size: 13px; }
.pop .plabel:hover { filter: brightness(1.1); }
.pop .pedit { width: 100%; border: 0; background: none; color: var(--ink-2); font-size: 12.5px; padding: 6px; border-top: 1px solid var(--line); }
.pop .pedit:hover { color: var(--blue); }
.pop.people-pop { width: 290px; padding: 0; display: flex; flex-direction: column; max-height: min(72vh, 440px); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 8px 6px; }
.pp-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--blue-tint); color: var(--blue); border-radius: 999px; padding: 2px 4px 2px 2px; font-size: 12.5px; font-weight: 600; }
.pp-chip .avatar { width: 20px; height: 20px; font-size: 9px; }
.pp-x { border: 0; background: none; color: inherit; font-size: 15px; line-height: 1; padding: 0 4px; cursor: pointer; opacity: .7; }
.pp-x:hover { opacity: 1; }
.pp-none { color: var(--ink-2); font-size: 12.5px; padding: 3px 4px; }
.pp-search { padding: 0 8px 6px; }
.pp-search input { width: 100%; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--card); font-size: 13.5px; }
.pp-list { overflow-y: auto; padding: 4px 6px 6px; border-top: 1px solid var(--line); flex: 1 1 auto; min-height: 0; }
.pp-list .psec:first-child { padding-top: 4px; }
.pp-name { display: flex; flex-direction: column; line-height: 1.15; }
.pp-name small { color: var(--ink-2); font-size: 11px; font-weight: 400; }
.prow.assigned { color: var(--blue); }
.pp-empty { color: var(--ink-2); font-size: 13px; padding: 12px 8px; text-align: center; }
.pp-hint { color: var(--ink-2); font-size: 12px; padding: 8px 8px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.prow { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; padding: 7px 8px; border-radius: 6px; text-align: left; }
.prow:hover { background: var(--hover); }
.prow .pcheck { margin-left: auto; color: var(--blue); font-weight: 700; }
.pop.menu-pop { min-width: 180px; }
.mrow { display: flex; gap: 9px; align-items: center; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 6px; text-align: left; font-size: 13.5px; }
.mrow:hover { background: var(--hover); }
.mrow.danger { color: #d83a52; }
.pop.date-pop input { border: 1px solid var(--line-2); border-radius: 6px; padding: 7px; }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 6px; }
.swatch { width: 24px; height: 24px; border-radius: 5px; border: 2px solid transparent; }
.swatch.sel { border-color: var(--ink); }

.modal-scrim { position: fixed; inset: 0; background: rgba(41,47,76,.4); z-index: 70; display: grid; place-items: center; animation: scrimIn .15s ease; }
.modal { background: var(--card); border-radius: 8px; padding: 26px 28px; width: 440px; max-height: 84vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.25); animation: popIn .18s ease; }
.modal h2 { margin: 0 0 16px; font-size: 19px; }
.modal label { display: block; font-weight: 600; font-size: 13px; margin: 12px 0 5px; }
.modal input[type=text] { width: 100%; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: var(--radius); }
.modal .mfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.ubody img, .doc-body img { cursor: zoom-in; }
.preview-scrim { position: fixed; inset: 0; background: rgba(12,15,32,.82); z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; animation: scrimIn .15s ease; }
.preview-head { display: flex; align-items: center; gap: 10px; color: #e8eaf2; max-width: 94vw; }
.preview-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.preview-head .btn.ghost { color: #c9ccdb; }
.preview-head .btn.ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.preview-media { max-width: 92vw; max-height: 80vh; border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
img.preview-media { background: #fff; }
.preview-frame { width: min(1000px, 94vw); height: 82vh; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.stbar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.stbar-fill { height: 100%; width: 0; border-radius: 4px; background: var(--blue); transition: width .4s ease; }
.stbar-fill.warn { background: #e2445c; }
.stbar-text { font-size: 12px; color: var(--ink-2); margin-top: 5px; }
.kindpick { display: flex; gap: 10px; }
.kindpick button { flex: 1; border: 1.5px solid var(--line-2); background: var(--card); border-radius: 6px; padding: 14px 10px; font-weight: 600; }
.kindpick button.sel { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); }
.lbl-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.lbl-row.dragging { opacity: .4; }
.lbl-grip { color: var(--ink-2); cursor: grab; font-size: 13px; letter-spacing: -3px; user-select: none; padding: 0 2px; }
.lbl-grip:active { cursor: grabbing; }
.lbl-row input { flex: 1; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 6px; }
.lbl-color { width: 30px; height: 30px; border-radius: 6px; border: 0; flex: none; }
.lbl-del { border: 0; background: none; color: var(--ink-2); font-size: 15px; }
.lbl-del:hover { color: #d83a52; }
.typegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.typegrid button { border: 1.5px solid var(--line-2); background: var(--card); border-radius: 6px; padding: 10px; text-align: left; font-weight: 500; }
.typegrid button:hover { border-color: var(--blue); background: var(--blue-tint); }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); border-radius: 4px; padding: 10px 18px; z-index: 90; animation: fadeIn .2s ease; font-size: 13.5px; transition: bottom .15s ease; }
.toast.raised { bottom: 86px; }   /* clear of the selection bar */

/* item panel tabs + activity */
.ptabs { display: flex; gap: 2px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.ptab { border: 0; background: none; padding: 8px 14px; color: var(--ink-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ptab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.act-row { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; font-size: 13.5px; line-height: 1.45; }
.act-row .act-text { flex: 1; }
.act-old { color: var(--ink-2); text-decoration: line-through; }
.name-text:focus { outline: 2px solid var(--blue); border-radius: 4px; background: var(--card); }

/* update feed */
.feed-btn { margin-bottom: 4px; }
.fbadge { margin-left: auto; background: var(--coral); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.feed-entry { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 6px; padding: 12px 14px; margin-bottom: 8px; }
.feed-entry:hover { border-color: var(--blue); }
.feed-entry .fe-text { flex: 1; font-size: 13.5px; line-height: 1.45; }
.feed-entry .fe-board { color: var(--ink-2); font-size: 12px; margin-left: 6px; }
.feed-entry .fe-body { display: block; color: var(--ink-2); margin-top: 3px; }

/* ============ mobile ============ */
.hamb { display: none; border: 0; background: none; color: var(--ink); font-size: 20px; border-radius: 6px; width: 36px; height: 36px; flex: none; }
.hamb:hover { background: var(--hover); }
@media (max-width: 780px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 82vw); z-index: 50; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 8px 0 30px rgba(0,0,0,.35); }
  .side.open { transform: none; }
  .hamb { display: inline-grid; place-items: center; }
  .topbar { padding: 10px 12px 0; }
  .topbar-row { gap: 8px; }
  .board-title { font-size: 19px; max-width: 44%; }
  .top-search input { width: 110px; }
  .btoolbar { flex-wrap: wrap; }
  .board-scroll { padding: 2px 8px 90px; }
  .cell.name-cell { flex-basis: 200px; min-width: 170px; }
  .panel { width: 100vw; max-width: 100vw; }
  .modal { width: 94vw; padding: 20px; }
  .pop { max-width: 92vw; }
  .login-card { width: 92vw; padding: 28px; }
}
.empty-hint { color: var(--ink-2); text-align: center; margin-top: 60px; }
.undo-btn { margin-left: 14px; background: none; border: 0; color: #6aa7f8; font-weight: 700; font-size: 13.5px; }
.undo-btn:hover { text-decoration: underline; }

/* @mentions + file attachments */
.mention { color: var(--blue); background: var(--blue-tint); border-radius: 3px; padding: 0 3px; font-weight: 600; }
.files-btn { display: flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--ink-2); padding: 4px 8px; border-radius: var(--radius); font-size: 12.5px; }
.files-btn.has { color: var(--blue); font-weight: 600; }
.files-btn:hover { background: var(--hover); }
.pop.files-pop { width: 250px; }
.file-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius); }
.file-row:hover { background: var(--hover); }
.file-row a { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 6px; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-row a:hover { color: var(--blue); }

/* settings modal */
.st-swatches { grid-template-columns: repeat(12, 1fr); padding: 4px 0; }
.st-preview { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 600; }
.st-preview .avatar { width: 36px; height: 36px; font-size: 14px; }

.avatar-img { background-size: cover; background-position: center; color: transparent; }
.st-photo { display: flex; gap: 8px; }

/* dark theme adjustments for hardcoded tints */
[data-mode="dark"] .side-item.active { background: var(--active); color: #fff; }
[data-mode="dark"] .trow.thead { background: var(--thead); }
[data-mode="dark"] body, [data-mode="dark"] input, [data-mode="dark"] textarea { color: var(--ink); }
[data-mode="dark"] input, [data-mode="dark"] textarea { background: var(--card); }
[data-mode="dark"] .login-wrap { background: var(--login-grad); }
[data-mode="dark"] .panel-body { background: var(--side); }
[data-mode="dark"] .trow.sub { background: var(--sub); }
[data-mode="dark"] .doc-body pre, [data-mode="dark"] .doc-body code { background: var(--hover); }
[data-mode="dark"] .side-item:hover { background: var(--side-hover); }
[data-mode="dark"] .side-add:hover { background: var(--side-hover); }

/* ---- teams: square badge next to round person avatars; Settings dropdown; picker sections ---- */
.avatar-team { border-radius: 6px; font-size: 10px; letter-spacing: .03em; }
.pop .psec { font-size: 11px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px 2px; }
.pop .prow + .psec { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.pop .psec-hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
.st-teams { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 6px 11px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); text-align: left; }
.st-teams:hover { border-color: var(--blue); }
.st-teams .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.st-teams .caret { margin-left: auto; color: var(--ink-2); }
.tchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 2px 8px 2px 3px; border-radius: 12px; background: var(--hover); }
.tchip .avatar { width: 18px; height: 18px; font-size: 8px; border: 0; border-radius: 4px; }

/* ---- workspaces: switcher at the top of the sidebar, picker popover, icons ---- */
.side-space { padding: 2px 10px 6px; }
.space-row { display: flex; gap: 6px; }
.space-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--card); font-weight: 700; font-size: 15px; text-align: left; }
.space-btn:hover { background: var(--hover); }
.space-btn .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-btn .caret { color: var(--ink-2); font-size: 12px; }
.space-add { width: 36px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--card); font-size: 18px; line-height: 1; }
.space-add:hover { background: var(--hover); }
.sicon { position: relative; width: 26px; height: 26px; border-radius: 7px; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; }
.sicon.small { width: 20px; height: 20px; font-size: 11px; border-radius: 5px; margin-right: 6px; }
.sicon .shome { position: absolute; right: -5px; bottom: -5px; width: 14px; height: 14px; border-radius: 4px; background: var(--card); color: var(--ink); font-size: 10px; line-height: 1; display: grid; place-items: center; border: 1px solid var(--line-2); }
.pop.space-pop { width: 280px; padding: 8px 0 0; max-height: min(70vh, 480px); display: flex; flex-direction: column; }
.pop.space-pop #sp-list { overflow-y: auto; padding: 0 6px 6px; flex: 1 1 auto; min-height: 0; }
.pop.space-pop .srow { font-size: 14px; }
.pop.space-pop .sp-foot { border-top: 1px solid var(--line); padding: 4px 6px; }
/* sharing modal (private boards) */
.sh-hint { color: var(--ink-2); font-size: 13px; margin: 10px 0 12px; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.doc-newer { background: #fff3df; color: #8a5a00; border-radius: 6px; padding: 8px 12px; margin: 0 0 8px; font-size: 13px; }
[data-mode="dark"] .doc-newer { background: #4a3a14; color: #ffd58a; }
.pop .pp-bulk { padding: 10px 10px 4px; color: var(--blue); }
/* People picker section headers: same look as a collapsed sidebar folder (caret + label) */
.pop .pp-sec { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.pop .pp-sec:hover { color: var(--ink); }
.pop .pp-sec .fcaret { font-size: 10px; transition: transform .15s; }
.pop .pp-sec .fcaret.closed { transform: rotate(-90deg); }
/* ---- colour picker (labels, groups, avatar, workspace): presets + HSL sliders + hex ---- */
.cpick { width: 236px; }
.cpick .swatches { padding: 4px 0 8px; }
.cp-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); margin: 4px 0; }
.cp-row span { width: 64px; flex: none; }
.cp-row input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 10px; border-radius: 5px; border: 1px solid var(--line-2); outline: 0; margin: 0; min-width: 0; }
.cp-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-2); box-shadow: 0 1px 3px rgba(0,0,0,.4); cursor: pointer; }
.cp-row input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-2); cursor: pointer; }
.cp-out { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cp-preview { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line-2); flex: none; }
.cpick .cp-hex, .modal .cpick input[type=text].cp-hex { width: 90px; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: var(--radius); font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; background: var(--card); color: var(--ink); }
.pop.color-pop { padding: 10px; }
.pop.menu-pop .cpick { padding: 2px 4px 6px; }
.swatch.rnd { background: conic-gradient(#e2445c, #fdab3d, #9cd326, #00c875, #66ccff, #579bfc, #a25ddc, #ff158a, #e2445c); font-size: 13px; line-height: 1; display: grid; place-items: center; }
.swatch.rnd:hover { filter: brightness(1.1); }


/* ---- launch tracker dashboard ---- */
.board-scroll.launch { padding: 10px 28px 80px; }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.lgrid.released-grid { opacity: .72; margin-top: 10px; }
.lcard { --cc: var(--line-2); background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 18%, var(--card)) 0, var(--card) 110px); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); border-top: 5px solid var(--cc); }
.lcard.late { box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 0 0 1px rgba(226,68,92,.45); }
.lc-color { width: 14px; height: 14px; flex: none; margin-top: 4px; border: 2px solid var(--card); border-radius: 50%; background: var(--cc); box-shadow: 0 0 0 1px rgba(0,0,0,.2); cursor: pointer; padding: 0; }
.lc-color:hover { transform: scale(1.2); }
.pop.color-pop { width: 260px; }
.lc-head { display: flex; align-items: flex-start; gap: 10px; }
.lc-title { flex: 1; text-align: left; border: 0; background: none; color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -.2px; line-height: 1.2; padding: 0; cursor: pointer; }
.lc-title:hover { color: var(--blue); }
.lc-owner { border: 0; background: none; padding: 0; cursor: pointer; }
.lc-owner .add-dot { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px dashed var(--line-2); border-radius: 50%; color: var(--ink-2); }
.lc-release { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 8px; border: 1px solid var(--line-2); background: var(--hover); color: var(--ink); border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 600; cursor: pointer; }
.lc-release.unset { color: var(--ink-2); font-weight: 500; border-style: dashed; }
.lc-release.late { border-color: #e2445c; color: #e2445c; }
.lc-count { color: var(--ink-2); font-weight: 500; }
.lc-release.late .lc-count { color: inherit; }
.lc-progress { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); margin-bottom: 10px; }
.lc-bar { flex: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.lc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #44c81c, #00c875); border-radius: 3px; transition: width .25s; }
.lphase { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 6px; }
.lphase-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); display: flex; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; }
.lphase-due { text-transform: none; letter-spacing: 0; font-weight: 600; }
.lphase.soon .lphase-head { color: #c77800; }
.lphase.late .lphase-head { color: #e2445c; }
.lphase.done .lphase-head { color: #00a65a; }
.lphase-empty { color: var(--ink-2); font-size: 12.5px; padding: 4px 6px 8px; }
.lstep { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: var(--ink); text-align: left; padding: 5px 4px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.lstep:hover { background: var(--hover); }
.lstep.done .lstep-label { color: var(--ink-2); opacity: .75; }
.lstep-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lstep-link { color: var(--ink-2); display: inline-flex; padding: 2px; border-radius: 4px; }
.lstep-link:hover { color: var(--blue); background: var(--blue-tint); }
.lchk { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.lchk.off { color: var(--ink-2); filter: none; }
.lreleased-toggle { margin-top: 22px; border: 0; background: none; color: var(--ink-2); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 4px; cursor: pointer; }
.mhint { color: var(--ink-2); font-size: 13px; margin: -4px 0 12px; line-height: 1.45; }
@media (max-width: 640px) { .board-scroll.launch { padding: 8px 12px 80px; } .lgrid { grid-template-columns: 1fr; } }
.pop.release-pop { width: 300px; }
.rp-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); padding: 6px 4px 4px; }
.release-pop input[type=date], .release-pop input[type=text] { width: 100%; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--card); font-size: 13.5px; margin-bottom: 4px; }
.rp-picks { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0 8px; }
.rp-pick { border: 1px solid var(--line-2); background: var(--card); color: var(--ink); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
.rp-pick:hover { border-color: var(--blue); color: var(--blue); }
.rp-pick.sel { background: var(--blue-tint); border-color: var(--blue); color: var(--blue); font-weight: 600; }
.ls-phase { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.ls-phase .ls-title { padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--card); font-size: 13.5px; }
.ls-due { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.ls-due input { width: 56px; padding: 5px 6px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--card); font-size: 13px; margin: 0 3px; }
.ls-up, .ls-del { border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; }
.ls-up:disabled, .ls-del:disabled { opacity: .35; cursor: default; }
.ls-del:not(:disabled):hover { color: #e2445c; border-color: #e2445c; }
.ls-cols { display: grid; gap: 6px; margin-bottom: 14px; }
.ls-col { display: flex; align-items: center; gap: 10px; }
.ls-colname { flex: 1; font-size: 13.5px; }
.ls-col select { padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--card); color: var(--ink); font-size: 13px; }
.lstage { display: flex; gap: 3px; margin: 2px 0 10px; }
.lseg { flex: 1; min-width: 0; height: 22px; border: 0; border-radius: 4px; background: var(--line); color: var(--ink-2); font-size: 10.5px; font-weight: 600; padding: 0 4px; cursor: pointer; overflow: hidden; transition: filter .15s; }
.lseg span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lseg:first-child { border-radius: 11px 4px 4px 11px; } .lseg:last-child { border-radius: 4px 11px 11px 4px; }
.lseg.on { color: #fff; }
.lseg.on:not(.cur) { opacity: .55; }
.lseg.cur { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px currentColor; }
.lseg:hover { filter: brightness(1.12); }

/* ---- kanban view: Table | Kanban toggle in the toolbar, one lane per status label ---- */
.viewpick { display: flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; margin-left: 4px; }
.viewpick button { border: 0; background: none; color: var(--ink-2); padding: 6px 10px; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.viewpick button:hover { background: var(--hover); color: var(--ink); }
.viewpick button.on { background: var(--blue-tint); color: var(--blue); font-weight: 600; }
.kb-col { border: 1px solid var(--line-2); background: var(--card); color: var(--ink); padding: 6px 8px; }
.board-scroll.kanban-view { padding: 10px 28px 80px; }
.kanban { display: flex; gap: 14px; align-items: flex-start; min-height: 60vh; }
.klane { flex: 0 0 272px; background: var(--side); border-radius: 10px; border-top: 4px solid var(--c); display: flex; flex-direction: column; max-height: calc(100vh - 175px); }
.klane.kdragover { outline: 2px dashed var(--blue); outline-offset: -2px; }
.klane-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; font-weight: 700; font-size: 13.5px; }
.klane-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.klane-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klane-count { margin-left: auto; color: var(--ink-2); font-weight: 500; font-size: 12.5px; }
.klane-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 8px; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.kcard { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.kcard:hover { border-color: var(--line-2); box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.kcard.dragging { opacity: .4; }
.kcard-title { font-weight: 600; font-size: 13.5px; line-height: 1.3; word-break: break-word; }
.kcard-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ktag { color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 4px; }
.kcard-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--ink-2); min-height: 22px; }
.kgroup { display: inline-flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.kgroup i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.kups { display: inline-flex; align-items: center; gap: 3px; }
.kcard-foot .avatars { margin-left: auto; }
.kcard-foot .avatar { width: 22px; height: 22px; font-size: 9px; }
.klane-add { padding: 6px 8px 8px; }
.klane-add input { width: 100%; border: 1px dashed var(--line-2); background: transparent; border-radius: 6px; padding: 7px 9px; font-size: 13px; }
.klane-add input:focus { border-style: solid; border-color: var(--blue); outline: 0; }
@media (max-width: 640px) { .board-scroll.kanban-view { padding: 8px 12px 90px; } .klane { flex-basis: 240px; } }
.klane-head { cursor: pointer; }
.klane-head:hover .klane-title { text-decoration: underline dotted; }
.klane-new { flex: 0 0 200px; min-height: 48px; border: 2px dashed var(--line-2); border-radius: 10px; background: none; color: var(--ink-2); font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.klane-new:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-tint); }
.klane-head[draggable] { cursor: grab; }
.klane.dragging { opacity: .45; }
.klane.ldrop-left { box-shadow: -4px 0 0 0 var(--blue); }
.klane.ldrop-right { box-shadow: 4px 0 0 0 var(--blue); }
.lc-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.lc-linkwrap { display: inline-flex; align-items: center; gap: 2px; }
.lc-link { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: var(--blue-tint); color: var(--blue); border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.lc-link:hover { background: var(--blue); color: #fff; }
.lc-link.unset { background: none; color: var(--ink-2); font-weight: 500; border: 1px dashed var(--line-2); }
.lc-link.unset:hover { color: var(--blue); border-color: var(--blue); background: none; }
.lc-link-edit { border: 0; background: none; color: var(--ink-2); font-size: 12px; padding: 4px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.lc-linkwrap:hover .lc-link-edit, .lcard:hover .lc-link-edit { opacity: .7; }
.lc-link-edit:hover { opacity: 1 !important; color: var(--blue); }
.kb-col.on { border-color: var(--blue); color: var(--blue); font-weight: 600; }

/* theme tiles in Settings: a tiny preview (sidebar strip, accent dot, text lines) + name */
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-tile { border: 2px solid var(--line-2); border-radius: 8px; background: var(--card); padding: 6px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.theme-tile.sel { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-tint); }
.tt-prev { position: relative; height: 46px; border-radius: 5px; background: var(--tb); overflow: hidden; border: 1px solid rgba(0,0,0,.08); }
.tt-side { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--ts); }
.tt-dot { position: absolute; left: 38%; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--ta); }
.tt-line { position: absolute; left: 38%; right: 10px; top: 25px; height: 4px; border-radius: 2px; background: var(--ti); opacity: .55; }
.tt-line.short { top: 34px; right: 40%; opacity: .3; }
.tt-name { font-size: 12.5px; font-weight: 600; text-align: center; }
.color-chip { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1px rgba(0,0,0,.25); cursor: pointer; margin: 0 auto; display: block; padding: 0; }
.color-chip.auto { opacity: .55; border: 2px dashed var(--card); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.color-chip.auto:hover { opacity: .9; }
.color-chip:hover { transform: scale(1.12); }
.color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }

.avatar-img { border-width: 1px; }   /* the colour ring: thinner than the initials bubble border */
/* collapsible section header in Settings (same look as a sidebar folder header) */
.st-sec { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; padding: 0; margin: 12px 0 5px; font-weight: 600; font-size: 13px; text-align: left; cursor: pointer; }
.st-sec .fcaret { font-size: 10px; transition: transform .15s; }
.st-sec .fcaret.closed { transform: rotate(-90deg); }
.st-sec-cur { color: var(--blue); }
.themes[hidden] { display: none; }
/* team requests (restricted teams): rows at the top of the update feed; lock hint in the Settings dropdown */
.req-sec { padding: 4px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.req-sec .fsec-t { padding: 6px 4px 4px; }
.req-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; }
.req-row:hover { background: var(--hover); }
.req-row .fe-text { flex: 1; min-width: 0; font-size: 13.5px; }
.req-row .btn { padding: 6px 10px; font-size: 12.5px; }
.tgate { display: block; color: var(--ink-2); font-size: 11px; font-weight: 400; }
/* tiny lock on a restricted team's icon (Settings team list only) */
.av-lock { position: relative; display: inline-flex; flex: none; }
.av-lock .lockbadge { position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%; background: var(--card); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-2); font-style: normal; }
.av-lock .lockbadge .ic { width: 8px; height: 8px; }