/* BSP CRM. Ported from the confirmed base v2 (prototypes/p5-base-v2/base.html):
   its tokens, rail, table, pills, menus, panel spacing and type scale. S2 adds
   the Night theme, System, dialogs, cell editors and the column type picker. */

/* ---------------------------------------------------------------- tokens */
:root{color-scheme:light;--bg:#f6f7fb;--surface:#fff;--surface-2:#f0f2f8;--line:#d0d4e4;--line-strong:#c3c6d4;--text:#323338;--text-2:#676879;--text-3:#9699a6;--accent:#0073ea;--accent-ink:#fff;--accent-soft:#e6f1fd;--accent-text:#0060b9;--link:#0073ea;--neg:#d83a52;--radius:8px;--fs:14px;--row-h:36px;--rail-bg:#f6f7fb;--rail-text:#323338;--rail-text-2:#44465a;--rail-text-3:#8a8da0;--rail-hover:#e6e9f4;--rail-sel:#cce5ff;--rail-sel-text:#323338;--ws-bg:#0073ea;--ws-ink:#fff;--menu-shadow:0 6px 20px rgba(0,0,0,.16);--rowhover:#f5f6f8;--rowsel:#e6f1fd;--pill-empty:#c4c4c4;--gt-mix:#000;--star:#fdab3d;--red:#e2445c;--backdrop:rgba(20,22,34,.36)}
:root[data-theme=dark]{color-scheme:dark;--bg:#181b34;--surface:#292f4c;--surface-2:#343b5e;--line:#434a6e;--line-strong:#555c82;--text:#e6e9ef;--text-2:#a8adc4;--text-3:#7e84a3;--accent-soft:#1e3a66;--accent-text:#8ec3ff;--link:#7fbaff;--neg:#ff7b8f;--rail-bg:#181b34;--rail-text:#e6e9ef;--rail-text-2:#b3b8d0;--rail-text-3:#7e84a3;--rail-hover:#262a4a;--rail-sel:#30365c;--rail-sel-text:#fff;--menu-shadow:0 6px 20px rgba(0,0,0,.45);--rowhover:#30365a;--rowsel:#1f3a63;--pill-empty:#4b5274;--gt-mix:#fff;--backdrop:rgba(5,6,14,.55)}
:root[data-theme=night]{color-scheme:dark;--bg:#0c0d12;--surface:#16171e;--surface-2:#1f2129;--line:#2b2e3a;--line-strong:#3a3e4d;--text:#e3e5ec;--text-2:#9ca1b3;--text-3:#6d7285;--accent-soft:#132a4a;--accent-text:#8ec3ff;--link:#7fbaff;--neg:#ff7b8f;--rail-bg:#0c0d12;--rail-text:#e3e5ec;--rail-text-2:#aeb2c3;--rail-text-3:#6d7285;--rail-hover:#1b1d25;--rail-sel:#1d2b45;--rail-sel-text:#fff;--menu-shadow:0 8px 24px rgba(0,0,0,.6);--rowhover:#1c1e26;--rowsel:#14263f;--pill-empty:#3a3e4d;--gt-mix:#fff;--backdrop:rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){:root[data-theme=system]{color-scheme:dark;--bg:#181b34;--surface:#292f4c;--surface-2:#343b5e;--line:#434a6e;--line-strong:#555c82;--text:#e6e9ef;--text-2:#a8adc4;--text-3:#7e84a3;--accent-soft:#1e3a66;--accent-text:#8ec3ff;--link:#7fbaff;--neg:#ff7b8f;--rail-bg:#181b34;--rail-text:#e6e9ef;--rail-text-2:#b3b8d0;--rail-text-3:#7e84a3;--rail-hover:#262a4a;--rail-sel:#30365c;--rail-sel-text:#fff;--menu-shadow:0 6px 20px rgba(0,0,0,.45);--rowhover:#30365a;--rowsel:#1f3a63;--pill-empty:#4b5274;--gt-mix:#fff;--backdrop:rgba(5,6,14,.55)}}
:root{--rail-w:224px;--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--ease:cubic-bezier(.23,1,.32,1);--hx:24px}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--rail-bg);color:var(--text);font:400 var(--fs)/1.4 var(--font);overflow:hidden;min-width:1280px;-webkit-font-smoothing:antialiased}
body.framed{min-width:0;background:var(--surface)}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:none;border:0;padding:0;text-align:left}
a{color:inherit}
a.navitem,a.ibtn,a.tb-brand,a.wscard,a.btn,a.lnk,.hname,.mname,.gname{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-2)}
.grow{flex:1}

/* -------------------------------------------------------------- the shell */
.app{display:grid;grid-template-columns:72px var(--rail-w) minmax(0,1fr);grid-template-rows:44px minmax(0,1fr);height:100vh}
/* The page asks to draw under a notch (viewport-fit=cover, for the phone
   view): the desktop layout keeps clear of any inset. All four are 0 on a
   computer, so nothing moves there. phone.css sets them part by part. */
.app{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.topbar{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:0 12px 0 16px;color:var(--rail-text);min-width:0}
.tb-brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;text-decoration:none}
.tb-mark{width:24px;height:24px;border-radius:6px;background:var(--ws-bg);color:var(--ws-ink);display:grid;place-items:center;font-weight:700;font-size:12px}
.tb-btn{position:relative;width:36px;height:36px;display:grid;place-items:center;border-radius:8px;color:var(--rail-text-2);transition:background-color 120ms ease,transform 120ms var(--ease)}
.tb-btn svg.i{width:20px;height:20px}
.tb-btn:hover,.tb-btn[aria-expanded=true]{background:var(--rail-hover);color:var(--rail-text)}
.tb-btn:active{transform:scale(.95)}
.badge{position:absolute;top:2px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:11px;font-weight:600;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--rail-bg)}

.irail{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0 12px;border-right:1px solid var(--line);min-height:0}
.ibtn{width:60px;min-height:54px;padding:6px 0;text-align:center;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--rail-text-2);font-size:11px;line-height:1.1;text-decoration:none;transition:background-color 120ms ease,transform 120ms var(--ease)}
.ibtn svg.i{width:20px;height:20px}
.ibtn:hover{background:var(--rail-hover);color:var(--rail-text)}
.ibtn:active{transform:scale(.97)}
.ibtn[aria-current=true]{background:var(--rail-sel);color:var(--rail-sel-text);font-weight:600}
.navgrow{flex:1}

.rail{background:var(--rail-bg);color:var(--rail-text);display:flex;flex-direction:column;padding:12px 8px;gap:2px;min-height:0;font-size:14px}
.rp{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0}
.blist{display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0}
.ws{display:flex;align-items:center;gap:10px;height:40px;padding:0 8px;border-radius:var(--radius);width:100%;margin-bottom:8px;transition:background-color 120ms ease}
.ws:hover,.ws[aria-expanded=true]{background:var(--rail-hover)}
.ws-none{cursor:default}
.ws-none:hover{background:none}
.ws-mark{width:24px;height:24px;border-radius:6px;background:var(--ws-bg);color:var(--ws-ink);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.ws-name{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsfirst{margin:8px}
.navitem{display:flex;align-items:center;gap:10px;height:34px;padding:0 8px;border-radius:6px;color:var(--rail-text-2);width:100%;text-decoration:none;transition:background-color 120ms ease,transform 120ms var(--ease)}
.navitem:hover{background:var(--rail-hover);color:var(--rail-text)}
.navitem:active{transform:scale(.98)}
.navitem[aria-current=page]{background:var(--rail-sel);color:var(--rail-sel-text);font-weight:600}
.navsec{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rail-text-3);padding:16px 8px 6px;display:flex;justify-content:space-between;align-items:center}
.secbtn{width:22px;height:22px;display:grid;place-items:center;border-radius:5px;color:var(--rail-text-3);transition:background-color 120ms ease,color 120ms ease}
.secbtn:hover{background:var(--rail-hover);color:var(--rail-text)}
.userchip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--radius);margin-top:4px}
.userchip .un{font-weight:600;line-height:1.2}
.userchip .ur{font-size:12px;color:var(--rail-text-3);line-height:1.2}
.brow{position:relative}
.brow .navitem{padding-right:34px}
.bname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lock{font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--rail-text-3);border:1px solid var(--line);border-radius:8px;padding:0 5px;line-height:15px}
.bmore,.starbtn{position:absolute;right:4px;top:50%;margin-top:-12px;width:24px;height:24px;display:grid;place-items:center;border-radius:5px;color:var(--rail-text-2);transition:opacity 120ms ease,background-color 120ms ease,transform 120ms var(--ease)}
.bmore{opacity:0}
.brow:hover .bmore,.bmore[aria-expanded=true],.bmore:focus-visible{opacity:1}
.bmore:hover,.starbtn:hover{background:var(--rail-sel)}
.starbtn{color:var(--star)}
.starbtn svg.i{fill:currentColor}
.starbtn:active{transform:scale(.92)}
.brow:has(.bmore[aria-expanded=true]) .navitem{background:var(--rail-hover);color:var(--rail-text)}
.fav-star{color:var(--star);flex:none;display:grid}
.fav-star svg.i{width:12px;height:12px;fill:currentColor}
.ptitle{font-weight:700;font-size:16px;letter-spacing:-.01em;padding:8px 8px 4px}
.emptyline{padding:6px 8px;color:var(--rail-text-3);font-size:13px}
.rename{flex:1;min-width:0;height:26px;border:1px solid var(--accent);border-radius:4px;background:var(--surface);padding:0 6px;outline:0;color:var(--text)}

/* ------------------------------------------------------------------ main */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface);margin:8px 8px 8px 0;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.framed .main{margin:0;border:0;border-radius:0;height:100vh}
/* Board switch (public/app.js): the side list moves at once; the board being
   left dims (after 80 ms, so a quick answer never flashes) and a thin bar
   runs along the top while the next one loads. A switch happens many times a
   day: nothing slides, nothing bounces. The bar's 1.6 s is progress, not a
   transition: it spans the measured 1.3 to 1.7 s wait and stops short. */
.main.switching{position:relative}
.main.switching>*{opacity:.5;pointer-events:none;transition:opacity 160ms ease-out 80ms}
.main.switching::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;z-index:6;background:var(--accent);transform-origin:left center;animation:switchbar 1.6s var(--ease) both}
@keyframes switchbar{from{transform:scaleX(0)}to{transform:scaleX(.9)}}
#boardname:focus:not(:focus-visible){outline:0}
@media (prefers-reduced-motion:reduce){.main.switching>*{transition:none}.main.switching::before{animation:none;opacity:.6}}
.page{flex:1;overflow:auto}
.boardhead{display:flex;align-items:center;gap:12px;padding:18px var(--hx) 0;min-height:52px}
.boardhead h1{margin:0;font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.boardsub{color:var(--text-2)}
.ptag{font-size:12px;font-weight:600;color:var(--text-2);border:1px solid var(--line);border-radius:10px;padding:0 8px;line-height:20px}
.tabsrow{display:flex;gap:4px;padding:0 var(--hx);border-bottom:1px solid var(--line);margin-top:6px}
.vtab{height:36px;padding:0 10px;display:flex;align-items:center;gap:6px;color:var(--text);border-bottom:2px solid var(--accent);margin-bottom:-1px;font-weight:600}
.toolbar{display:flex;align-items:center;gap:2px;padding:10px var(--hx)}
.toolbar .btn.primary{margin-right:8px}
.tbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:6px;color:var(--text);transition:background-color 120ms ease,transform 120ms var(--ease)}
.tbtn:hover{background:var(--surface-2)}
.tbtn:active{transform:scale(.97)}
.btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color 120ms ease,transform 120ms var(--ease),filter 120ms ease}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger:hover{filter:brightness(1.07)}
.favbtn svg.i{color:var(--text-2)}
.favbtn.on svg.i{color:var(--star);fill:currentColor}
.iconbtn{width:28px;height:28px;display:grid;place-items:center;border-radius:6px;color:var(--text-2);transition:background-color 120ms ease,transform 120ms var(--ease)}
.iconbtn:hover{background:var(--surface-2);color:var(--text)}
.iconbtn:active{transform:scale(.95)}
.foot{height:36px;flex:none;display:flex;align-items:center;gap:16px;padding:0 var(--hx);border-top:1px solid var(--line);color:var(--text-2);font-size:12px;background:var(--surface)}

/* ----------------------------------------------------------------- table */
.content{flex:1;display:flex;min-height:0;min-width:0}
.tablewrap{flex:1;min-width:0;overflow:auto;position:relative}
.grid{width:100%;padding-bottom:24px}
.r{display:grid;grid-template-columns:var(--cols);align-items:stretch;min-height:var(--row-h);background:var(--rowbg,var(--surface))}
.c{display:flex;align-items:center;min-width:0;padding:0 8px;position:relative;background:inherit;white-space:nowrap;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.c:last-child{border-right:0}
.c .t{overflow:hidden;text-overflow:ellipsis}
.c1,.c2{position:sticky;z-index:2}
.c1{left:0;justify-content:center;padding:0 0 0 6px;border-right:0}
.c2{left:36px;gap:6px}
.hdr{position:sticky;top:0;z-index:5;min-height:34px}
.hdr .c{background:var(--surface);border-bottom:1px solid var(--line-strong);border-top:1px solid var(--line)}
.hdr .c1,.hdr .c2{z-index:6}
.hc{color:var(--text-2);font-weight:600;font-size:13px;justify-content:flex-start}
.hname{overflow:hidden;text-overflow:ellipsis;cursor:text;padding:2px 4px;margin-left:-5px;border-radius:4px;border:1px solid transparent;transition:border-color 120ms ease}
.hname:hover{border-color:var(--line-strong)}
.hc .rename{font-weight:600}
.hc.addcol{justify-content:flex-start;padding:0 6px}
.addcolbtn{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;color:var(--text-2);transition:background-color 120ms ease,transform 120ms var(--ease)}
.addcolbtn:hover,.addcolbtn[aria-expanded=true]{background:var(--surface-2);color:var(--text)}
.addcolbtn:active{transform:scale(.94)}

.group{position:relative;margin-bottom:20px;--gt:color-mix(in oklab,var(--gc) 82%,var(--gt-mix))}
.gh{display:flex;align-items:center;height:40px;padding-left:2px;position:sticky;left:0;width:max-content;gap:2px}
.gtoggle{width:28px;height:28px;display:grid;place-items:center;border-radius:6px;color:var(--gt);transition:background-color 120ms ease}
.gtoggle:hover{background:var(--surface-2)}
.gtoggle svg.i{transition:transform 150ms var(--ease)}
.group.collapsed .gtoggle svg.i{transform:rotate(-90deg)}
.gname{color:var(--gt);font-size:16px;font-weight:600;padding:2px 6px;border-radius:4px;border:1px solid transparent;cursor:text;transition:border-color 120ms ease}
.gname:hover{border-color:var(--line-strong)}
.gh .rename{font-size:16px;font-weight:600;color:var(--gt);height:30px;min-width:240px}
.gcount{color:var(--text-3);font-size:13px;margin-left:8px;opacity:0;transition:opacity 120ms ease}
.group.collapsed .rows,.group.collapsed .addrow{display:none}
.r.m .c1::before,.subr .c1::before,.sh .c1::before,.sadd .c1::before,.addrow .c1::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--gc);border-radius:4px 0 0 4px}
.subr .c1::before,.sh .c1::before,.sadd .c1::before{opacity:.45}
.r.m:hover{--rowbg:var(--rowhover)}
.subtog{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;flex:none;color:var(--text-2);transition:background-color 120ms ease,opacity 120ms ease}
.subtog:hover{background:var(--surface-2)}
.subtog svg.i{width:14px;height:14px;transition:transform 150ms var(--ease)}
.mrow.open .subtog svg.i{transform:rotate(90deg)}
.subtog.empty{opacity:0}
.r.m:hover .subtog.empty,.subtog.empty:focus-visible,.mrow.open .subtog.empty{opacity:1}
.mname{font-weight:400;cursor:text;padding:2px 4px;margin-left:-4px;border-radius:4px;border:1px solid transparent;transition:border-color 120ms ease}
.mname:hover{border-color:var(--line-strong)}
.c2 .rename{max-width:100%}
.subcount{font-size:11px;font-weight:600;color:var(--text-2);background:var(--surface-2);border-radius:10px;padding:0 6px;line-height:18px;flex:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background-color 120ms ease,color 120ms ease,transform 120ms var(--ease)}
.subcount:hover{background:var(--accent-soft);color:var(--accent-text)}
.subcount:active{transform:scale(.94)}
.mrow:not(.open) .subs{display:none}
.subs .r{--rowbg:var(--surface)}
.subs .sh{--rowbg:var(--surface-2);min-height:32px;font-size:12px;color:var(--text-2);font-weight:600}
.subr .c2,.sh .c2,.sadd .c2{padding-left:34px}
.subr .c2 svg.i{color:var(--text-3)}
.sh .c2{gap:10px}
.sh .hc{font-size:12px}
.shname{color:var(--text-3);flex:none}
/* The subitem columns chip (decision 26 Q8; Carlos's markup of the S4
   header row): after the gray word "Subitem", a solid, rounded fill in the
   parent's GROUP color (--sc on .subs), no stroke. A light tint while the
   subitems use the board's columns, the full group color once they have
   their own, its text white or dark by contrast (data-ink, worked out on the
   server). Until 2026-10-19 own mode outlined the subitem header row in the
   group color, 2px, and filled the chip with the full group color.
   Carlos, 2026-10-19, which replaces the outline and the full-color chip:
   "when activated instead of and outline, it gets the group color as a fill
   across that row. Have it end right where the little tabs meet. The button
   should change to that light gray when its activated." So in own mode the
   whole header row is the group color (--rowbg, which every cell inherits),
   except the tab strip at its left edge: the first cell keeps the header
   gray under the strip, so the strip keeps its color and the fill starts at
   the strip's right edge (6px, the strip's width). The words and icons on
   the fill take the ink inkFor picks (--shink), the focus ring too, and the
   column lines inside it are a shade of the group color (the row lines above
   and below stay the grid's, as on every other row, so the strip's seams
   match the rows around it). The chip turns the header
   row's own gray (--surface-2) with the body ink, so it reads as a button
   on the fill in every theme.
   Carlos, 2026-10-18: "a long board name shouldn't cause it to overflow past
   its cell. Nor should it overflow into the 'sub item' label". The server
   cuts the board name in the label (CHIP_NAME_MAX in src/views/board.js);
   this is the backstop for wide glyphs: the chip shrinks inside the cell and
   ends in an ellipsis, and the word "Subitem" never shrinks. */
.scmode{display:inline-block;height:22px;line-height:22px;padding:0 10px;border:0;border-radius:6px;background:color-mix(in oklab,var(--sc) 22%,var(--surface));color:color-mix(in oklab,var(--sc) 62%,var(--gt-mix));font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;flex:0 1 auto;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background-color 150ms ease,color 150ms ease,transform 120ms var(--ease),filter 120ms ease}
.scmode:hover{filter:brightness(.97)}
.scmode:active{transform:scale(.97)}
.scmode.own{background:var(--surface-2);color:var(--text)}
.scmode.own:hover{filter:none;background:var(--surface)}
.subs.own>.sh{--rowbg:var(--sc);--shink:#fff;color:var(--shink)}
.subs.own[data-ink=dark]>.sh{--shink:#1f2023}
.subs.own>.sh>.c{border-right-color:color-mix(in oklab,var(--sc) 80%,#000)}
.subs.own>.sh>.c1{background:linear-gradient(90deg,var(--surface-2) 6px,var(--sc) 6px)}
.subs.own>.sh :is(.shname,.hc,.hname,.hsort,.hsort.on,.hmore,.addcolbtn,.hflt,.hmark,.hexpand){color:var(--shink)}
.subs.own>.sh :is(.hsort,.hmore,.addcolbtn,.hexpand):hover,.subs.own>.sh .addcolbtn[aria-expanded=true]{background:color-mix(in srgb,var(--shink) 18%,transparent);color:var(--shink)}
.subs.own>.sh .hname:hover{border-color:color-mix(in srgb,var(--shink) 55%,transparent)}
.subs.own>.sh .colresize::after{background:var(--shink)}
.subs.own>.sh :focus-visible{outline-color:var(--shink)}
.cend{padding:0 6px}
.subdel{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--text-3);opacity:0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:opacity 120ms ease,background-color 120ms ease,color 120ms ease,transform 120ms var(--ease)}
.subdel svg.i{width:15px;height:15px}
.subr:hover .subdel,.subdel:focus-visible{opacity:1}
.subdel:hover{background:var(--surface-2);color:var(--neg)}
.subdel:active{transform:scale(.92)}
.sadd .c2{color:var(--text-3)}
.addrow .c2{color:var(--text-3)}
.additem{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px;border-radius:6px;color:var(--text-3);transition:background-color 120ms ease,color 120ms ease}
.additem:hover{background:var(--surface-2);color:var(--text-2)}
.addgroup{display:inline-flex;align-items:center;gap:8px;height:34px;margin:0 0 0 8px;padding:0 12px;border-radius:8px;border:1px solid var(--line-strong);color:var(--text);position:sticky;left:8px;transition:background-color 120ms ease,transform 120ms var(--ease)}
.addgroup:hover{background:var(--surface-2)}
.addgroup:active{transform:scale(.97)}
.boardempty{display:flex;flex-direction:column;gap:4px;padding:32px 24px;color:var(--text-2);position:sticky;left:0;width:max-content}
.boardempty b{color:var(--text);font-size:15px}

/* cells */
.cc{justify-content:flex-start;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cc:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
.cc.ro{cursor:default}
.cc.ro:hover{box-shadow:none}
.cc.editing{box-shadow:inset 0 0 0 1px var(--accent);z-index:3}
.c-pill{padding:4px}
.c-center{justify-content:center}
.pill{display:inline-flex;align-items:center;justify-content:center;flex:1;height:28px;border-radius:4px;color:#fff;background:var(--c);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px;transition:filter 120ms ease}
.c-pill:hover .pill{filter:brightness(1.06)}
.pill-empty{--c:var(--pill-empty)}
.tags{display:flex;gap:4px;overflow:hidden;min-width:0}
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;border:1px solid var(--line);color:var(--text);font-size:.93em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;flex:none}
.tag[style]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tc);flex:none}
.tag svg.i{width:13px;height:13px;color:var(--text-2)}
.tag-item{background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.mail{color:var(--text-2)}
.lnk{color:var(--link);text-decoration:none}
.lnk:hover{text-decoration:underline}
.cerr{color:var(--neg);font-weight:600;font-size:13px}
.tl{font-size:13px;background:var(--surface-2);border-radius:10px;padding:2px 10px}
.av{width:var(--av,24px);height:var(--av,24px);border-radius:50%;display:grid;place-items:center;font-size:calc(var(--av,24px)*.42);font-weight:600;flex:none;line-height:1;background:hsl(var(--h) 62% 48%);color:#fff}
.av-unknown{background:var(--pill-empty)}
.avs{display:flex}
.avs .av+.av{margin-left:-6px;box-shadow:0 0 0 2px var(--surface)}
.av-empty{color:var(--text-3);display:grid}
.clog{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2)}
.chk{width:16px;height:16px;border-radius:3px;border:1.5px solid var(--line-strong);background:var(--surface);display:inline-block;position:relative}
.chk.on{background:var(--accent);border-color:var(--accent)}
.chk.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cell-in{width:100%;height:28px;border:1px solid var(--accent);border-radius:4px;background:var(--surface);padding:0 6px;outline:0;color:var(--text)}

/* --------------------------------------------------------------- menus */
.menu{position:fixed;z-index:50;min-width:200px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--menu-shadow);padding:6px;transform-origin:var(--origin,top left);animation:pop 120ms var(--ease);color:var(--text);font-size:14px}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.menu .mi{display:flex;align-items:center;gap:10px;min-height:32px;padding:0 10px;border-radius:6px;width:100%;text-decoration:none;transition:background-color 100ms ease}
.menu .mi:hover,.menu .mi:focus-visible,.menu .mi.act{background:var(--surface-2)}
.menu .mi svg.i{color:var(--text-2)}
.menu .mi.danger{color:var(--neg)}
.menu .mi.danger svg.i{color:var(--neg)}
.menu .mi .chev{margin-left:auto;width:14px;height:14px;color:var(--text-3)}
.menu .mi .ck{margin-left:auto;width:14px;height:14px;color:var(--accent-text)}
.menu .mi.on svg.i.star{color:var(--star);fill:currentColor}
.menu .msep{height:1px;background:var(--line);margin:4px 2px}
.menu .mh{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:6px 10px 4px}
.menu.inbox{width:368px;padding:0}
.inbox-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;border-bottom:1px solid var(--line)}
.inbox-h b{font-size:15px;letter-spacing:-.01em}
.inbox-h span{font-size:12px;color:var(--text-2)}
.inbox-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 24px 30px;text-align:center;color:var(--text-2)}
.inbox-empty svg.i{width:28px;height:28px;color:var(--text-3);margin-bottom:4px}
.inbox-empty b{color:var(--text);font-size:14px}
.inbox-empty span{font-size:13px;max-width:240px}
.irow{display:flex;gap:10px;align-items:flex-start;width:100%;padding:10px 14px;border-bottom:1px solid var(--line)}
.irow:last-child{border-bottom:0}
.udot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px}
.irow:not(.unread) .udot{visibility:hidden}
.irow .it3{color:var(--text-3);font-size:12px;margin-top:2px}
/* S9: the inbox's lines are links (base v2's base-inbox.png). */
.inbox-list{max-height:min(480px,calc(100vh - 120px));overflow:auto}
a.irow{text-decoration:none;color:var(--text);-webkit-touch-callout:none;transition:background-color 100ms ease}
a.irow:hover,a.irow:focus-visible{background:var(--surface-2);outline:0}
.irow .itx{flex:1;min-width:0;display:flex;flex-direction:column}
.irow .it1{line-height:1.3}
.irow.unread .it1{font-weight:600}
.irow .it2{color:var(--text-2);font-size:13px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.irow .av{margin-top:1px}
.ibell{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text)}
.ibell svg.i{width:15px;height:15px}

/* status / priority picker */
.menu.picker{width:224px;padding:12px;display:grid;gap:8px}
.menu.picker .opt{display:block;width:100%;border-radius:4px;transition:transform 120ms var(--ease)}
.menu.picker .opt:active{transform:scale(.98)}
.menu.picker .opt .pill{width:100%;height:34px;font-size:14px}
.menu.picker .opt.cur .pill{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--c)}
.menu .foot2{display:flex;align-items:center;gap:8px;color:var(--text-2);min-height:30px;padding:6px 4px 0;border-top:1px solid var(--line);margin-top:2px;font-size:13px}
.menu .foot2 button{color:var(--text-2);border-radius:4px;padding:2px 4px}
.menu .foot2 button:hover{color:var(--text);background:var(--surface-2)}

/* popover editors */
.menu.pop{width:288px;padding:12px;display:grid;gap:10px}
.menu.pop.wide{width:360px}
.pop .note.left{margin-right:auto;align-self:center}
.pop .ph{font-size:12px;font-weight:600;color:var(--text-2)}
.pop input[type=text],.pop input[type=url],.pop input[type=date],.pop textarea,.pop select,.fld input,.fld select{width:100%;height:32px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);padding:0 8px;color:var(--text)}
.pop textarea{height:120px;padding:8px;resize:vertical;line-height:1.45}
.pop input:focus,.pop textarea:focus,.pop select:focus,.fld input:focus,.fld select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pop .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pop .acts{display:flex;justify-content:flex-end;gap:6px}
.pop .acts .btn{height:28px;padding:0 10px}
.pop .acts .btn.left{margin-right:auto}
.pop .list{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow:auto}
.pop .li{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 6px;border-radius:6px;width:100%;transition:background-color 100ms ease}
.pop .li:hover{background:var(--surface-2)}
.pop .li .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop .li small{color:var(--text-3);font-size:12px}
.pop .li .x{width:22px;height:22px;display:grid;place-items:center;border-radius:4px;color:var(--text-2)}
.pop .li .x:hover{background:var(--surface)}
.pop .note{font-size:12px;color:var(--text-3);line-height:1.4}
.pop .val{font-weight:600;font-size:15px}
.pop .val.err{color:var(--neg)}
.pop .inline{display:flex;gap:6px}
.pop .inline input{flex:1}
.pop .inline .btn{height:32px}

/* column type picker */
.menu.typepick{width:380px;padding:10px}
.tp-h{font-size:12px;font-weight:600;color:var(--text-2);padding:2px 6px 8px}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.menu .mi.tp{min-height:36px}
.menu .mi.tp svg.i{width:18px;height:18px;padding:2px;border-radius:5px;background:var(--surface-2);box-sizing:content-box}

/* ---------------------------------------------------------------- dialogs */
.dlg{border:1px solid var(--line-strong);border-radius:12px;padding:0;background:var(--surface);color:var(--text);box-shadow:var(--menu-shadow);width:520px;max-width:calc(100vw - 32px)}
.dlg-sm{width:400px}
.dlg::backdrop,.overlay::backdrop{background:var(--backdrop)}
.dlg[open]{animation:pop 150ms var(--ease)}
.dlg-body{display:grid;gap:16px;padding:22px 24px 20px;margin:0}
.dlg h2{margin:0;font-size:20px;letter-spacing:-.015em;font-weight:700}
.fld{display:grid;gap:6px;border:0;padding:0;margin:0;min-width:0}
.fld>span,.fld legend{font-size:12px;font-weight:600;color:var(--text-2);padding:0;margin-bottom:6px}
.fld input,.fld select{height:36px;font-size:14px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg3{grid-template-columns:1fr 1fr 1fr}
.segopt{position:relative;display:block;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.segopt input{position:absolute;opacity:0;pointer-events:none}
.segopt>span{display:flex;flex-direction:column;gap:2px;height:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;transition:border-color 120ms ease,background-color 120ms ease}
.segopt:hover>span{background:var(--surface-2)}
.segopt b{font-weight:600;font-size:14px}
.segopt small{color:var(--text-2);font-size:12px;line-height:1.35}
.segopt input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.segopt input:checked+span b{color:var(--accent-text)}
.segopt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
.segopt.dis{cursor:not-allowed;opacity:.55}
/* The primary button comes first in the markup (Enter submits the first
   submit button), and shows on the right. */
.dlg-foot{display:flex;flex-direction:row-reverse;justify-content:flex-start;gap:8px;margin-top:4px}
.dlg-err{margin:0;color:var(--neg);font-size:13px}
.overlay{border:0;padding:0;width:min(1240px,calc(100vw - 64px));height:calc(100vh - 64px);max-width:none;max-height:none;border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--menu-shadow);display:none;flex-direction:column}
.overlay[open]{display:flex;animation:pop 150ms var(--ease)}
.ov-bar{display:flex;align-items:center;gap:10px;height:48px;padding:0 10px 0 20px;border-bottom:1px solid var(--line);flex:none}
.ov-title{flex:1;font-weight:600}
.ov-open{height:30px}
.ov-frame{flex:1;border:0;width:100%}

/* ------------------------------------------------------- other pages */
.notyet{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:32px var(--hx);padding:24px;border:1px dashed var(--line-strong);border-radius:10px;color:var(--text-2);max-width:560px}
.notyet b{color:var(--text);font-size:15px}
.notyet .btn{margin-top:10px}
.wsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:20px var(--hx)}
.wscard{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;border:1px solid var(--line);border-radius:10px;text-decoration:none;font-weight:600;transition:background-color 120ms ease,border-color 120ms ease,transform 120ms var(--ease)}
.wscard:hover{background:var(--surface-2);border-color:var(--line-strong)}
.wscard:active{transform:scale(.98)}
.wscard small{margin-left:auto;color:var(--text-3);font-weight:500}
.setsec{padding:20px var(--hx)}
.setsec h2{margin:0 0 4px;font-size:16px;letter-spacing:-.01em}
.setsec p{margin:0 0 16px}
.themes{display:grid;grid-template-columns:repeat(4,180px);gap:12px}
.themecard{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line-strong);border-radius:10px;transition:border-color 120ms ease,background-color 120ms ease,transform 120ms var(--ease)}
.themecard:hover{background:var(--surface-2)}
.themecard:active{transform:scale(.98)}
.themecard.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.themecard small{color:var(--text-2);font-size:12px}
.tc-row{display:flex;align-items:center;gap:8px}
.tc-swatch{height:72px;border-radius:6px;border:1px solid var(--line)}
.tc-light{background:linear-gradient(90deg,#f6f7fb 0 28%,#fff 28%)}
.tc-dark{background:linear-gradient(90deg,#181b34 0 28%,#292f4c 28%)}
.tc-night{background:linear-gradient(90deg,#0c0d12 0 28%,#16171e 28%)}
.tc-system{background:linear-gradient(135deg,#f6f7fb 0 50%,#292f4c 50%)}
.errpage{max-width:480px;margin:120px auto;display:grid;gap:12px;justify-items:start;padding:0 24px}
.errpage h1{margin:0;letter-spacing:-.02em}
body:has(.errpage){overflow:auto;min-width:0;background:var(--bg)}

.toast{position:fixed;left:50%;bottom:56px;transform:translateX(-50%);z-index:70;background:var(--text);color:var(--surface);padding:8px 14px;border-radius:8px;font-size:13px;box-shadow:var(--menu-shadow);animation:pop 120ms var(--ease)}
.toast.err{background:var(--red);color:#fff}
.toast-act{margin-left:14px;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:2px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ------------------------------------------------- sign-in (S7) */
body.authpage{overflow:auto;min-width:0;background:var(--bg)}
.authwrap{min-height:100vh;display:grid;place-items:center;padding:48px 16px}
.authcard{width:380px;max-width:100%;display:grid;gap:18px;padding:28px 28px 24px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.authbrand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.authcard h1{margin:4px 0 0;font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.authnote{margin:-8px 0 0;color:var(--text-2)}
.authform{display:grid;gap:14px}
.authrules{margin:-4px 0 0;color:var(--text-2);font-size:12px}
.authbtn{justify-content:center;height:36px;margin-top:4px}
.authbtn:disabled{opacity:.6;cursor:default}
.authfoot{display:flex;justify-content:center}
.lnk{color:var(--link);font-weight:500;text-decoration:none;border-radius:4px;padding:2px 4px}
.lnk:hover{text-decoration:underline}
button.userchip{width:100%;text-align:left;color:inherit;transition:background-color 120ms ease,transform 120ms var(--ease)}
button.userchip:hover,button.userchip[aria-expanded=true]{background:var(--rail-hover)}
button.userchip:active{transform:scale(.98)}
.userchip .uc-t{flex:1;min-width:0}
.userchip>svg.i{color:var(--rail-text-3)}

/* --------------------------------------- Settings: tabs, Users (S7) */
.settabs a.vtab{text-decoration:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.settabs .vtab.off{border-bottom-color:transparent;color:var(--text-2);font-weight:500}
.settabs .vtab.off:hover{color:var(--text)}
.sethead{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;max-width:1040px}
.sethead>div{flex:1}
.sethead p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.utable{width:100%;max-width:1040px;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.utable th{font-size:12px;font-weight:600;color:var(--text-2);text-align:left;padding:0 12px;height:36px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.utable td{padding:0 12px;height:52px;border-bottom:1px solid var(--line);white-space:nowrap}
.utable tbody tr:last-child td{border-bottom:0}
.utable tbody tr:hover td{background:var(--rowhover)}
.utable tr.isoff .uname b{color:var(--text-2)}
.utable .uact{width:52px;text-align:right}
.uname{display:flex;align-items:center;gap:10px}
.uname b{font-weight:600}
.uname small{font-size:11px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);border-radius:8px;padding:0 6px;line-height:16px}
.lvl{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.lvl-owner{font-weight:600}
.ulock{display:grid;color:var(--text-2)}
.ulock svg.i{width:14px;height:14px}
.ustat{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.ustat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ustat.on{color:#00854d}
.ustat.wait{color:#b25e00}
.ustat.off{color:var(--text-3)}
:root[data-theme=dark] .ustat.on,:root[data-theme=night] .ustat.on{color:#4fd18b}
:root[data-theme=dark] .ustat.wait,:root[data-theme=night] .ustat.wait{color:#ffb357}
.dlg-note{margin:-6px 0 0;font-size:12px}
.tempbox{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-2)}
.tempbox code{flex:1;font:600 17px/1.2 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.04em;-webkit-user-select:all;user-select:all}

/* ------------------------------------------- Settings, Activity (S7) */
.actfilter{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.actfilter .fld{width:180px}
.actfilter .fld>span{margin-bottom:0}
.actfilter .fld input,.actfilter .fld select{height:32px}
.actfilter .btn,.actfilter .lnk{margin-bottom:0}
.actfilter .lnk{line-height:32px}
.actlog{list-style:none;margin:0;padding:0;max-width:1040px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.actlog li{display:grid;grid-template-columns:136px 140px minmax(0,1fr);align-items:baseline;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);line-height:1.4}
.actlog li:last-child{border-bottom:0}
.actlog li:hover{background:var(--rowhover)}
.actlog time{color:var(--text-2);font-size:13px;white-space:nowrap}
.actlog b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actlog span{min-width:0;overflow-wrap:anywhere}
.actpage{display:flex;gap:8px;margin-top:14px}
.actpage .btn svg.i{margin-right:-4px}

/* ------------------------------- Private board members (S7) */
#membersbtn .mcount{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--surface-2);color:var(--text-2);font-size:11px;font-weight:600;line-height:18px;text-align:center}
.mlist{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:280px;overflow:auto}
.mrow2{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 2px;border-radius:8px}
.mrow2:hover{background:var(--rowhover)}
.mrow2 .mn{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.mrow2 .mn b{font-weight:600}
.mrow2 .mn small{font-size:12px;color:var(--text-2)}
.mrow2 .mrm{height:28px;padding:0 10px;font-size:13px}
.madd{display:flex;gap:8px}
.madd select{flex:1;height:32px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);padding:0 8px}

/* ---------------- group color chip, footer summary, labels, colors (S3) */
.gchip{width:16px;height:16px;border-radius:4px;background:var(--gc);margin-left:10px;flex:none;opacity:0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:opacity 120ms ease,transform 120ms var(--ease)}
.gh:hover .gchip,.gchip:focus-visible,.gchip[aria-expanded=true]{opacity:1}
.gchip:hover{transform:scale(1.12)}
.gchip:active{transform:scale(.92)}

.sumrow{--rowbg:transparent;min-height:36px}
.sumrow .c{border-right-color:transparent;border-bottom-color:transparent}
.sumrow .c1,.sumrow .c2{background:var(--surface)}
.sumrow .sc{border-bottom-color:var(--line);border-right-color:var(--line);box-shadow:-1px 0 0 var(--line);justify-content:center;gap:4px;padding:0 6px;background:var(--surface)}
.group.collapsed .sumrow{display:none}
.sumbar{display:flex;width:100%;height:22px;border-radius:4px;overflow:hidden}
.sumbar i{background:var(--c);min-width:3px}
.sumbar i.empty{background:var(--pill-empty)}
.sumv{font-weight:600;font-size:13px}
.sc small{font-size:12px;color:var(--text-3)}

.menu.picker .foot2 .le-open,.menu.picker .foot2 .le-done{display:inline-flex;align-items:center;gap:6px}
.menu.picker .foot2 .le-open svg.i{width:14px;height:14px}
.menu.picker .foot2 .le-done{color:var(--accent-text);font-weight:600}
.menu.picker.ledit{width:300px;gap:6px}
.ledit .ph{padding:0 2px 2px}
.le-list{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow:auto;margin:0 -4px;padding:0 4px}
.le-row{display:flex;align-items:center;gap:6px;height:36px;border-radius:6px;background:var(--surface)}
.le-row.dragging{box-shadow:var(--menu-shadow);position:relative;z-index:1;transform:scale(1.02)}
.le-list.sorting,.le-list.sorting *{cursor:grabbing}
.le-grip{width:18px;height:28px;display:grid;place-items:center;color:var(--text-3);cursor:grab;flex:none;border-radius:4px;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.le-grip svg.i{fill:currentColor;stroke:none;width:14px;height:14px}
.le-grip:hover{color:var(--text-2);background:var(--surface-2)}
.le-chip{width:22px;height:22px;border-radius:4px;background:var(--c);flex:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform 120ms var(--ease)}
.le-chip:active{transform:scale(.92)}
.le-chip[aria-expanded=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--c)}
.le-chip.off{background:var(--pill-empty);opacity:.5}
.ledit .le-name{flex:1;min-width:0;height:30px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);padding:0 8px;color:var(--text)}
.ledit .le-name:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.le-x{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;color:var(--text-3);flex:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background-color 100ms ease,color 100ms ease}
.le-x:hover{background:var(--surface-2);color:var(--neg)}
.le-x svg.i{width:14px;height:14px}
.le-colors{padding:8px 0 6px 24px}
.le-add{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 6px;border-radius:6px;color:var(--text-2);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background-color 100ms ease,color 100ms ease}
.le-add:hover{background:var(--surface-2);color:var(--text)}
.le-err{font-size:13px;line-height:1.4;color:var(--neg);background:color-mix(in oklab,var(--neg) 9%,var(--surface));border-radius:6px;padding:8px 10px}

.menu.colormenu{width:auto;gap:10px}
.cpal{display:grid;grid-template-columns:repeat(5,28px);gap:6px}
.cpal-custom{border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.colorhost,.le-colors{display:grid;gap:4px}
.csw{width:28px;height:28px;border-radius:6px;background:var(--c);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform 120ms var(--ease),box-shadow 120ms ease}
.csw:hover{transform:scale(1.08)}
.csw:active{transform:scale(.94)}
.csw.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--c)}
.csw.cplus{background:var(--surface);border:1px dashed var(--line-strong);color:var(--text-2);display:grid;place-items:center}
.csw.cplus:hover{border-style:solid;color:var(--text);background:var(--surface-2)}
.cpick{display:grid;gap:12px;width:232px}
.cp-sv{position:relative;height:148px;border-radius:6px;cursor:crosshair;touch-action:none;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cp-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.3);pointer-events:none}
.cp-row{display:flex;align-items:center;gap:10px}
.cp-drop{flex:none}
.cp-sw{width:24px;height:24px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.cp-hue{position:relative;flex:1;height:12px;border-radius:6px;cursor:pointer;touch-action:none;background:linear-gradient(to right,#f00 0%,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,#f00 100%);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cp-thumb{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.3);pointer-events:none}
.cp-fields{display:grid;grid-template-columns:1fr 76px;gap:8px}
.pop .cp-hex{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.02em;text-transform:uppercase}
.pop .cp-hex.bad{border-color:var(--neg);box-shadow:0 0 0 3px color-mix(in oklab,var(--neg) 18%,transparent)}
.pop .cp-mode{font-weight:600;color:var(--text-2)}
.cp-sv:focus-visible,.cp-hue:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:default}

/* ------------------- S5a: column menu, row menu, hover-only controls */
/* Hover-only controls (decision 26 Q14): they fade in on the row's, header's
   or group header's hover, and stay while focused or while their menu is
   open. Opacity only, 120ms ease: seen tens of times a minute, so nothing
   moves. Keyboard moves between cells are never animated. */
.rmore,.rexp,.hsort,.hmore,.dclear,.gmore,.hexpand,.vx,.trrestore,.sw,.cs-person{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.rmore{width:22px;height:22px;display:grid;place-items:center;border-radius:5px;color:var(--text-2);opacity:0;transition:opacity 120ms ease,background-color 120ms ease,transform 120ms var(--ease)}
.r.m:hover .rmore,.rmore:focus-visible,.rmore[aria-expanded=true]{opacity:1}
.rmore:hover,.rmore[aria-expanded=true]{background:var(--surface-2);color:var(--text)}
.rmore:active{transform:scale(.92)}
.c2 .mname{min-width:0}
/* S18 (b): a name shares its cell with the subitem count, the flag chip and
   the bubble, so it wraps to a second line before it is cut; past two lines
   it ends in an ellipsis, with the full name as its tooltip. The row grows
   for that one item only. */
.r.m .c2 .mname,.subr .c2 .mname{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-height:1.25;text-overflow:clip}
.r.m .c2,.subr .c2{padding-top:4px;padding-bottom:4px;gap:4px}
.r.m .c2 .tkchip{margin-left:0}
.rexp{margin-left:auto;width:24px;height:24px;display:grid;place-items:center;border-radius:5px;color:var(--text-2);flex:none;opacity:0;transition:opacity 120ms ease,background-color 120ms ease,transform 120ms var(--ease)}
.rexp svg.i{width:14px;height:14px}
.r.m:hover .rexp,.rexp:focus-visible{opacity:1}
.rexp:hover{background:var(--surface-2);color:var(--text)}
.rexp:active{transform:scale(.92)}
.reqmark{width:6px;height:6px;border-radius:50%;background:var(--star);flex:none;margin-left:2px}
.cc.reqe{box-shadow:inset 2px 0 0 var(--star)}
.cc.reqe:hover{box-shadow:inset 2px 0 0 var(--star),inset 0 0 0 1px var(--line-strong)}

/* column headers: the name, then the sort glyph and "..." (study R51) */
.hc .hname{min-width:0;flex:0 1 auto}
.hctl{margin-left:auto;display:flex;gap:1px;padding-left:4px;flex:none}
.hsort{width:22px;height:22px;display:grid;place-items:center;border-radius:5px;color:var(--text-3);opacity:0;transition:opacity 120ms ease,background-color 120ms ease,color 120ms ease,transform 120ms var(--ease)}
.hmore{width:22px;height:22px;display:grid;place-items:center;border-radius:5px;color:var(--text-3);opacity:0;transition:opacity 120ms ease,background-color 120ms ease,color 120ms ease,transform 120ms var(--ease)}
.hsort svg.i,.hmore svg.i{width:14px;height:14px}
.hc:hover .hsort,.hc:hover .hmore,.hsort:focus-visible,.hmore:focus-visible,.hmore[aria-expanded=true],.hsort.on{opacity:1}
.hsort:hover,.hmore:hover{background:var(--surface-2);color:var(--text)}
.hsort.on{color:var(--accent-text)}
.hmore[aria-expanded=true]{background:var(--accent-soft);color:var(--accent-text)}
.hsort:active,.hmore:active{transform:scale(.92)}
.hflt{display:grid;color:var(--accent-text);margin-left:4px;flex:none}
.hflt svg.i{width:13px;height:13px}
/* a collapsed column: a thin strip; hovering it says "Expand" (R39) */
.hc.hcx,.c.cx{padding:0;justify-content:center}
.c.cx{background:var(--surface-2)}
.hexpand{position:relative;width:100%;height:100%;display:grid;place-items:center;color:var(--text-3);transition:background-color 120ms ease,color 120ms ease}
.hexpand:hover{background:var(--surface-2);color:var(--text)}
.hexpand svg.i{width:14px;height:14px}
.hexpand[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:0;background:var(--text);color:var(--surface);font-size:12px;font-weight:500;padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 125ms ease;z-index:20}
.hexpand[data-tip]:hover::after{opacity:1;transition-delay:300ms}
/* the "Add column" tooltip on the "+" (R31) */
.tipwrap{position:relative;display:inline-grid}
.tip{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--text);color:var(--surface);font-size:12px;font-weight:500;padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 125ms ease;z-index:20}
.tipwrap:hover .tip{opacity:1;transition-delay:300ms}
/* the Date "x" and the blue underline on hover (R44); an overdue date */
.dclear{margin-left:auto;width:20px;height:20px;display:grid;place-items:center;border-radius:4px;color:var(--text-3);flex:none;opacity:0;transition:opacity 120ms ease,background-color 120ms ease,color 120ms ease}
.cc .dclear svg.i{width:12px;height:12px}
.cc:hover .dclear{opacity:1}
.cc .dclear:hover{background:var(--surface-2);color:var(--text)}
.cc:hover .dval{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.dval.od,.cc:hover .dval.od,.tl.od{color:var(--neg);font-weight:600}
/* the faint "+" in an empty cell on hover (R35's "+T" ghost; decision 26 Q14) */
.cc[data-type=text]:empty:hover::before,.cc[data-type=long_text]:empty:hover::before,.cc[data-type=numbers]:empty:hover::before,.cc[data-type=money]:empty:hover::before,.cc[data-type=date]:empty:hover::before,.cc[data-type=timeline]:empty:hover::before,.cc[data-type=email]:empty:hover::before,.cc[data-type=phone]:empty:hover::before,.cc[data-type=link]:empty:hover::before{content:"+";color:var(--text-3);font-size:16px;line-height:1}
/* a focused cell (arrow keys move it, Enter or Tab opens it) */
.cc:focus{outline:0}
.cc:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.cellmsg{position:absolute;left:0;top:calc(100% + 2px);z-index:9;background:var(--surface);border:1px solid var(--neg);color:var(--neg);font-size:12px;line-height:1.35;padding:4px 8px;border-radius:6px;white-space:nowrap;box-shadow:var(--menu-shadow)}
.cell-in.bad{border-color:var(--neg);box-shadow:0 0 0 3px color-mix(in oklab,var(--neg) 16%,transparent)}

/* group header: "..." at the far left and the count, on hover (R15, R16) */
.gmore{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--text-2);opacity:0;transition:opacity 120ms ease,background-color 120ms ease,transform 120ms var(--ease)}
.gh:hover .gmore,.gmore:focus-visible,.gmore[aria-expanded=true]{opacity:1}
.gmore:hover,.gmore[aria-expanded=true]{background:var(--surface-2);color:var(--text)}
.gmore:active{transform:scale(.92)}
.gh:hover .gcount{opacity:1}
.vgroup .gname{cursor:default;border-color:transparent}
.vgroup .gh{padding-left:28px}

/* the view the column menu set, said in the toolbar */
.toolbar{flex-wrap:wrap;row-gap:6px}
.vchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 3px 0 10px;margin-left:8px;border-radius:14px;background:var(--accent-soft);color:var(--accent-text);font-size:13px;font-weight:500;max-width:420px}
.vchip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vchip svg.i{width:14px;height:14px;flex:none}
.vx{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:inherit;flex:none;transition:background-color 120ms ease,transform 120ms var(--ease)}
.vx:hover{background:color-mix(in oklab,var(--accent) 18%,transparent)}
.vx:active{transform:scale(.9)}
.vx svg.i{width:12px;height:12px}
.vchip.mini{height:20px;padding:0 6px;margin:0;font-size:11px;font-weight:600;gap:4px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.vchip.mini svg.i{width:10px;height:10px}
#hiddencols{margin-left:8px;color:var(--text-2)}

/* the column menu */
.menu.colmenu{min-width:232px}
.menu .mi .kbd{margin-left:auto;font-size:12px;color:var(--text-3)}
.menu.fltpop{width:260px}
.fltpop .list{max-height:260px}

/* Column settings (a dialog from the column menu's Settings) */
.dlg.colset{width:520px}
.colset .dlg-body{gap:0;padding-bottom:16px}
.colset h2{margin-bottom:4px}
.cs-sub{margin:0 0 12px;color:var(--text-2);font-size:13px}
.cs-sec{display:grid;gap:10px;padding:14px 0;border-top:1px solid var(--line)}
.cs-head{display:flex;align-items:center;gap:12px}
.cs-head>div{flex:1;min-width:0}
.cs-head b{display:block;font-weight:600;font-size:14px}
.cs-head small{display:block;color:var(--text-2);font-size:12px;line-height:1.4;margin-top:2px}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-grid .fld input,.cs-grid .fld select,.cs-sec .fld select{width:100%;height:32px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);padding:0 8px;color:var(--text)}
.cs-grid .fld input:focus,.cs-sec .fld select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cs-people{display:flex;flex-wrap:wrap;gap:6px}
.cs-person{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 4px;border-radius:14px;border:1px solid var(--line-strong);font-size:13px;transition:background-color 120ms ease,border-color 120ms ease,transform 120ms var(--ease)}
.cs-person .av{--av:20px}
.cs-person:hover{background:var(--surface-2)}
.cs-person:active{transform:scale(.97)}
.cs-person[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.cs-note{font-size:12px;color:var(--text-3);margin:0}
.cs-rem{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cs-rem .tag button{display:grid;place-items:center;color:var(--text-3)}
.cs-rem input{width:84px;height:28px;border:1px solid var(--line-strong);border-radius:6px;padding:0 8px;background:var(--surface);color:var(--text)}
.sw{width:34px;height:20px;border-radius:10px;background:var(--line-strong);position:relative;flex:none;transition:background-color 150ms ease}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform 150ms var(--ease)}
.sw[aria-checked=true]{background:var(--accent)}
.sw[aria-checked=true]::after{transform:translateX(14px)}
.sw:disabled{opacity:.5;cursor:default}
.cs-sec.off{opacity:.55}

/* a board's Trash */
.trnote{margin:6px var(--hx) 4px}
.trsec{padding:12px var(--hx) 8px;max-width:860px}
.trsec h2{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15px;letter-spacing:-.01em}
.trn{font-size:11px;font-weight:600;color:var(--text-2);background:var(--surface-2);border-radius:9px;padding:0 6px;line-height:18px}
.trnone{margin:0;font-size:13px}
.trempty{display:flex;align-items:center;gap:12px;margin:4px var(--hx) 16px;max-width:860px;font-size:13px}
.trlist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.trrow{display:grid;grid-template-columns:minmax(0,1fr) 140px auto;align-items:center;gap:12px;min-height:52px;padding:6px 8px 6px 14px;border-bottom:1px solid var(--line)}
.trrow:last-child{border-bottom:0}
.trrow:hover{background:var(--rowhover)}
.trname{display:flex;flex-direction:column;min-width:0}
.trname b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trname small{color:var(--text-2);font-size:12px}
.trrow time{font-size:13px}
.trrestore{height:30px}

/* ------------------------------------------------- S5b: every drag
   Column width from the header's right edge (a blue bar on hover, as at
   02:38 in the recording), column reorder (a tilted ghost card and a blue
   bar through every group, 07:58), row and group drag (a grip on hover, a
   drop line). Press and drag targets never raise the iOS callout or select
   text. */
.hc[data-drag-col],.gh[data-drag-group],.rgrip,.colresize{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.hc[data-drag-col]{cursor:grab}
.hc[data-drag-col] .hname{cursor:text}
.colresize{position:absolute;top:0;bottom:0;right:-4px;width:8px;z-index:3;cursor:col-resize;touch-action:none}
.colresize::after{content:"";position:absolute;top:4px;bottom:4px;left:3px;width:2px;border-radius:1px;background:var(--accent);opacity:0;transition:opacity 120ms ease}
.colresize:hover::after,.colresize.on::after{opacity:1}
.hc.resizing{box-shadow:inset 0 -2px 0 var(--accent)}
.hdr .c2,.r.m .c2,.addrow .c2,.sumrow .c2{padding-left:18px}
.rgrip{position:absolute;left:2px;top:0;bottom:0;width:14px;display:grid;place-items:center;color:var(--text-3);cursor:grab;opacity:0;touch-action:none;transition:opacity 120ms ease,color 120ms ease}
.rgrip svg.i{width:12px;height:12px;fill:currentColor;stroke:none}
.subr .rgrip{left:16px}
.r.m:hover .rgrip,.r.subr:hover .rgrip{opacity:1}
.rgrip:hover{color:var(--text)}
.mrow.dragsrc>.r.m,.r.subr.dragsrc,.group.dragsrc>.gh{opacity:.4}
.gh[data-drag-group]{cursor:grab}
.gh[data-drag-group] .gname{cursor:text}
.grid.gdrag .rows,.grid.gdrag .addrow,.grid.gdrag .sumrow{display:none}
.grid.gdrag .group{margin-bottom:8px}
html.dragging-now,html.dragging-now *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}
html.resizing-now,html.resizing-now *{cursor:col-resize!important;-webkit-user-select:none;user-select:none}
/* The drop markers, drawn in the table's own coordinates. A column's drop
   bar is short: one per header row at the gap (S5b, monday's look). */
.dropbar{position:absolute;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--accent);z-index:7;pointer-events:none}
.dropline{position:absolute;height:2px;margin-top:-1px;border-radius:1px;background:var(--accent);z-index:7;pointer-events:none}
.dropline::before{content:"";position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
/* The ghost: a lifted card, a little translucent, tilted the way the
   recording's is; it lifts in 120ms (scale only, no travel). */
.dragghost{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08);opacity:.92;rotate:3deg;transform-origin:50% 0;animation:ghostlift 120ms var(--ease,ease-out) both;will-change:transform}
@keyframes ghostlift{from{scale:.96;opacity:0}}
/* S5b, monday's look (frames m0758_5, m0759_5): a narrow card, the column's
   name over blank gray rows; the column it left reads as gray. */
.colghost{overflow:hidden;width:100px}
.colghost .cg-h{height:34px;display:block;line-height:34px;text-align:center;padding:0 10px;font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--line)}
.colghost .cg-b{height:30px;border-bottom:1px solid var(--surface);background:color-mix(in oklab,var(--pill-empty) 38%,var(--surface))}
.colghost .cg-b:last-child{border-bottom:0}
.cc.colsrc{background:color-mix(in oklab,var(--pill-empty) 38%,var(--surface))}
.cc.colsrc>*{visibility:hidden}
.hc.dragsrc .hname{color:var(--text-3)}
.rowghost{height:var(--row-h);display:flex;align-items:center;padding:0 12px;font-size:14px;rotate:2deg}
.rowghost .rg-n,.groupghost .gg-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.groupghost{height:40px;display:flex;align-items:center;padding:0 14px;border-left:6px solid var(--gc,var(--accent));font-size:16px;font-weight:600;color:color-mix(in oklab,var(--gc,var(--accent)) 82%,var(--gt-mix));rotate:2deg}
/* The fit-to-content probe (double-click the resize edge): measured, never seen. */
.fitprobe{position:absolute!important;left:0;top:0;width:auto!important;max-width:none!important;visibility:hidden;pointer-events:none}

/* ------------------------------------------------- S5b: the item panel
   Base v2's merchant panel (prototypes/p5-base-v2/base.html, "panel"): 340px
   on the right, the name at 24px with display tracking, a two-column field
   grid, the tabs pinned while the panel scrolls. Its values are the table's
   own cells (.cc), so they press like them and never raise the callout. */
.content.haspanel .tablewrap{border-right:0}
.ipanel{width:340px;flex:none;display:flex;flex-direction:column;min-height:0;overflow-y:auto;overflow-x:hidden;background:var(--surface);border-left:1px solid var(--line);box-shadow:-4px 0 12px rgba(0,0,0,.04);overscroll-behavior:contain}
.ipanel>*{flex:none}
.ip-head{padding:16px 20px 0}
.ip-top{display:flex;align-items:center;gap:6px}
.ip-close{width:28px;height:28px;display:grid;place-items:center;border-radius:6px;color:var(--text-2);margin-left:-6px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background-color 120ms ease,transform 120ms var(--ease)}
.ip-close:hover{background:var(--surface-2);color:var(--text)}
.ip-close:active{transform:scale(.94)}
.ip-btn{height:28px;padding:0 10px;gap:6px;font-size:13px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.ip-btn[aria-disabled=true]{color:var(--text-2)}
.ip-name{margin:12px 0 0;font-size:24px;line-height:1.25;letter-spacing:-.02em;font-weight:700;overflow-wrap:anywhere}
.ip-title{display:inline-block;max-width:100%;padding:0 4px;margin-left:-5px;border-radius:5px;border:1px solid transparent;cursor:text;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:border-color 120ms ease}
.ip-title:hover{border-color:var(--line-strong)}
.ip-name .rename{width:100%;height:36px;font-size:20px;font-weight:700;letter-spacing:-.015em}
.ip-where{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--text-2);font-size:13px;min-width:0}
.ip-where b{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-gdot{width:10px;height:10px;border-radius:3px;background:var(--gc);flex:none}
.ip-req{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:12px;white-space:nowrap}
.ip-req::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--star)}
.ip-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding:16px 20px}
.ip-more{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.ip-field{min-width:0}
.ip-label{display:block;font-size:12px;color:var(--text-2);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc.ip-val{height:30px;display:flex;align-items:center;padding:0 8px;margin:0 -8px;border-radius:6px;border:1px solid transparent;white-space:nowrap;overflow:hidden;position:relative;transition:border-color 120ms ease}
.cc.ip-val:hover{box-shadow:none;border-color:var(--line-strong)}
.cc.ip-val.editing{box-shadow:none;border-color:var(--accent);overflow:visible}
.cc.ip-val.c-pill{padding:0;margin:0;border-radius:5px}
.cc.ip-val.c-pill .pill{height:28px;border-radius:4px}
.cc.ip-val.c-center{justify-content:flex-start}
.cc.ip-val.ro:hover{border-color:transparent}
.cc.ip-val.reqe{box-shadow:inset 2px 0 0 var(--star)}
.cc.ip-val .cellmsg{top:100%}
.ip-all{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;color:var(--link);font-weight:600;border-radius:4px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.ip-all svg.i{width:14px;height:14px;transition:transform 150ms var(--ease)}
.ip-all[aria-expanded=true] svg.i{transform:rotate(-90deg)}
.ip-all:hover{text-decoration:underline}
.ip-none{margin:0;color:var(--text-3);font-size:13px}
.ip-subs{padding:0 20px 16px}
.ip-sh{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px}
.ip-sh b{font-weight:600}
.ip-count{font-size:11px;font-weight:600;color:var(--text-2);background:var(--surface-2);border-radius:10px;padding:0 6px;line-height:18px}
.ip-stbox{position:relative}
.ip-stw{overflow-x:auto;border:1px solid var(--line);border-radius:8px;scrollbar-width:thin;overscroll-behavior-x:contain}
/* More columns to the right: the edge fades, so the cut reads as "scroll". */
.ip-stw.more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
/* S18 (c): the Subitem column stays put while the others scroll, and a round
   button at each edge with more beyond it moves the table a panel's width
   (a trackpad's hidden scrollbar no longer hides the columns). */
.ip-sr>:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:inset -1px 0 0 var(--line)}
.ip-shr>:first-child{background:var(--surface-2)}
.ip-scr{position:absolute;top:calc(50% - 13px);width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--text-2);box-shadow:0 1px 4px rgba(0,0,0,.12);z-index:3;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background-color 120ms ease,color 120ms ease,transform 120ms var(--ease)}
.ip-scr[hidden]{display:none}
.ip-scr.right{right:-10px}
.ip-scr.left{left:-10px}
.ip-scr svg.i{width:14px;height:14px}
.ip-scr:hover{background:var(--surface-2);color:var(--text)}
.ip-scr:active{transform:scale(.94)}
.ip-st{display:grid;grid-template-columns:var(--scols);min-width:max-content}
.ip-sr{display:contents}
.ip-sr>*{height:34px;display:flex;align-items:center;min-width:0;padding:0 8px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden}
.ip-st>.ip-sr:last-child>*{border-bottom:0}
.ip-shr>*{height:30px;background:var(--surface-2);font-size:12px;font-weight:600;color:var(--text-2)}
.ip-sc,.ip-sn{text-overflow:ellipsis}
.ip-sn{font-size:13px}
.cc.ip-sv.c-pill{padding:3px}
.cc.ip-sv.c-pill .pill{height:26px}
.ip-tabs{position:sticky;top:0;z-index:4;display:flex;gap:20px;padding:0 20px;margin-top:4px;background:var(--surface);border-bottom:1px solid var(--line)}
.ip-tab{padding:8px 0 10px;color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 120ms ease}
.ip-tab:hover{color:var(--text)}
.ip-tab[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
.ip-body{padding:16px 20px 24px}
.ip-pane{display:flex;flex-direction:column;gap:12px}
.ip-empty{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px dashed var(--line-strong);border-radius:8px;color:var(--text-2);font-size:13px;line-height:1.45}
.ip-empty b{color:var(--text);font-size:14px;font-weight:600}
.ip-note{margin:0;color:var(--text-3);font-size:12px;line-height:1.45}
.ip-fbar{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}
.ip-fbar b{color:var(--text);font-weight:600;font-size:14px}
.ip-fcol{height:28px;max-width:120px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);padding:0 6px;font-size:13px}
.ip-up{position:relative;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.ip-up:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.ip-file{position:absolute;inset:0;width:1px;height:1px;opacity:0;pointer-events:none}
.ip-files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fcard{display:flex;align-items:center;gap:4px}
.fchip{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:8px;color:var(--text);text-decoration:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background-color 120ms ease,border-color 120ms ease}
.fchip:hover{background:var(--surface-2);border-color:var(--line-strong)}
.fchip .ft{width:40px;height:32px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;color:var(--text-2);flex:none}
.fchip .ft img{width:100%;height:100%;object-fit:cover;display:block}
.fchip .fn{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.fchip .fnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip .fn small{color:var(--text-2);font-size:12px}
.fdel{width:28px;height:28px;display:grid;place-items:center;border-radius:6px;color:var(--text-3);flex:none;opacity:0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:opacity 120ms ease,background-color 120ms ease,color 120ms ease,transform 120ms var(--ease)}
.fcard:hover .fdel,.fdel:focus-visible{opacity:1}
.fdel:hover{background:var(--surface-2);color:var(--neg)}
.fdel:active{transform:scale(.92)}
.ip-log{list-style:none;margin:0;padding:0}
.ip-log li{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.4}
.ip-log li:first-child{padding-top:0}
.ip-log li:last-child{border-bottom:0}
.ip-lw{overflow-wrap:anywhere}
.ip-lw b{font-weight:600}
.ip-log time{color:var(--text-3);font-size:12px}
.r.m.sel{--rowbg:var(--rowsel)}
.r.m .mname{cursor:pointer}
/* A Files cell's chips open the file; hovering one previews it. */
a.tag-file{text-decoration:none;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background-color 120ms ease,border-color 120ms ease}
a.tag-file:hover{background:var(--surface-2);border-color:var(--line-strong)}
.tag-file .tn{overflow:hidden;text-overflow:ellipsis}
.filespop .fli .fopen{color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.filespop .fli .fopen:hover{text-decoration:underline}
.filespop .fli>svg.i{color:var(--text-2)}
/* The hover preview (base v2's .fprev): an image or the PDF, else its kind. */
.fprev{position:fixed;z-index:60;width:288px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--menu-shadow);padding:10px;animation:pop 120ms var(--ease);transform-origin:right center}
.fprev .fimg{height:176px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.fprev .fimg img{width:100%;height:100%;object-fit:contain;display:block}
.fprev .fimg iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.fprev .ficon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-2);font-size:13px}
.fprev .ficon svg.big{width:40px;height:40px;stroke-width:1.25}
.fprev .frow{display:flex;align-items:center;gap:10px;margin-top:10px}
.fprev .fnm{flex:1;min-width:0}
.fprev .fnm div{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fprev .fnm small{color:var(--text-2);font-size:12px}
.fprev .btn{height:28px;padding:0 12px}

/* ---------------------------------------------------- S10: views and tabs */
.vtabw{display:flex;align-items:center;gap:2px}
.vtab{text-decoration:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;max-width:240px}
.vtab .vtn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vtab.off{border-bottom-color:transparent;color:var(--text-2);font-weight:500;transition:color 120ms ease}
.vtab.off:hover{color:var(--text)}
.vshared{display:grid;color:var(--text-3)}
.vshared svg.i{width:13px;height:13px}
.vtmore,.vadd{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;color:var(--text-2);align-self:center;transition:background-color 120ms ease,transform 120ms var(--ease)}
.vtmore:hover,.vadd:hover,.vtmore[aria-expanded=true],.vadd[aria-expanded=true]{background:var(--surface-2);color:var(--text)}
.vtmore:active,.vadd:active{transform:scale(.95)}
.vadd{margin-left:2px}
.tsep{width:1px;height:20px;background:var(--line);margin:0 6px 0 4px}
.tsearch{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:6px;border:1px solid transparent;color:var(--text);cursor:text;transition:background-color 120ms ease,border-color 120ms ease}
.tsearch:hover{background:var(--surface-2)}
.tsearch:focus-within,.tsearch.on{border-color:var(--line-strong);background:var(--surface)}
.tsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tsearch input{width:64px;border:0;outline:0;background:none;padding:0;height:30px}
.tsearch input::placeholder{color:var(--text)}
.tsearch:focus-within input,.tsearch.on input{width:180px}
.tsearch input::-webkit-search-cancel-button{display:none}
.tbtn.tool.on{color:var(--accent-text);background:var(--accent-soft)}
.tbtn:disabled{opacity:.45;cursor:default;background:none}
.vs-out{display:none!important}
.vnote{display:flex;align-items:center;gap:8px;margin:0 var(--hx) 8px;padding:6px 10px;border-radius:6px;background:var(--surface-2);color:var(--text-2);font-size:13px}
.vnote svg.i{width:14px;height:14px}
.menu.pop.vpop{width:300px}
.menu.pop.vpop.wide{width:520px}
.vrules{display:flex;flex-direction:column;gap:6px}
.vrule{display:grid;grid-template-columns:58px minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) 24px;gap:6px;align-items:center}
.sortpop .vrule{grid-template-columns:58px minmax(0,1.4fr) minmax(0,1fr) 24px}
.vrule .vrw{font-size:12px;color:var(--text-3);font-weight:600}
.vrule .vany{grid-column:span 2;font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrule .x{width:24px;height:24px;display:grid;place-items:center;border-radius:4px;color:var(--text-2)}
.vrule .x:hover{background:var(--surface-2);color:var(--text)}
.vrule .x svg.i{width:12px;height:12px}
.vadd-rule{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:6px;color:var(--accent-text);font-weight:500;justify-self:start;transition:background-color 120ms ease}
.vadd-rule:hover{background:var(--accent-soft)}
.vadd-rule:disabled{color:var(--text-3);background:none;cursor:default}
.vpop .li .av{margin-right:2px}

/* the calendar */
.content.k-calendar,.content.k-kanban{border-top:1px solid var(--line)}
.calview{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.calview.calempty,.kanban.kempty{display:block}
.calbar{display:flex;align-items:center;gap:12px;padding:10px var(--hx)}
.calnav{display:flex;gap:4px}
.btn.icon{width:32px;padding:0;justify-content:center}
.caltitle{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.calcount{color:var(--text-3);font-size:13px}
.seg2{display:flex;padding:2px;border-radius:8px;background:var(--surface-2)}
.seg2 button{height:28px;padding:0 12px;border-radius:6px;color:var(--text-2);font-weight:500;transition:background-color 120ms ease,color 120ms ease}
.seg2 button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.calbody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 248px;overflow:hidden}
.calgrid{display:flex;flex-direction:column;min-height:0;overflow:auto;border-top:1px solid var(--line)}
.calhead{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:sticky;top:0;z-index:2;background:var(--surface);border-bottom:1px solid var(--line)}
.calhead span{padding:6px 8px;font-size:12px;font-weight:600;color:var(--text-3)}
.calweek{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:1 0 112px}
.calgrid.wk .calweek{flex:1 0 420px}
.calday{min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 4px 6px;display:flex;flex-direction:column;gap:4px;transition:background-color 120ms ease}
.calday:last-child{border-right:0}
.calday.out{background:var(--surface-2)}
.calday.out .calnum{color:var(--text-3)}
.calnum{font-size:12px;font-weight:600;color:var(--text-2);padding:2px 6px;align-self:flex-start;border-radius:10px;min-width:22px;text-align:center}
.calday.today .calnum{background:var(--accent);color:var(--accent-ink)}
.calchips{display:flex;flex-direction:column;gap:3px;min-height:0;overflow:auto}
.calchip{display:flex;align-items:center;gap:6px;height:24px;padding:0 8px 0 6px;border-radius:5px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;width:100%;min-width:0;flex:none;cursor:grab;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:border-color 120ms ease,box-shadow 120ms ease}
.calchip:hover{border-color:var(--line-strong);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.calchip.locked{cursor:pointer}
.calchip .cdot{width:8px;height:8px;border-radius:50%;background:var(--dc);flex:none}
.calchip .ctn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calday.vdrop{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.calaside{border-left:1px solid var(--line);border-top:1px solid var(--line);padding:12px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.calaside h3{margin:0;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.calaside h3 .num{font-size:12px;color:var(--text-3);font-weight:500}
.calaside p{margin:0 0 4px;font-size:12px}
.vdragging{opacity:.4}
.vghost{position:fixed;left:0;top:0;z-index:60;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.18);margin:0}

/* the kanban */
.kanban{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.kbar{display:flex;align-items:center;gap:6px;padding:8px var(--hx);font-size:13px}
.klanes{flex:1;min-height:0;display:flex;gap:12px;padding:4px var(--hx) 16px;overflow:auto;align-items:flex-start}
.klane{flex:1 0 232px;max-width:300px;display:flex;flex-direction:column;max-height:100%;border-radius:8px;background:var(--surface-2);transition:box-shadow 120ms ease,background-color 120ms ease}
.klane.vdrop{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.klh{display:flex;align-items:center;gap:8px;padding:10px 12px 8px;border-top:4px solid var(--lc);border-radius:8px 8px 0 0}
.kdot{width:10px;height:10px;border-radius:50%;background:var(--lc);flex:none}
.kln{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcount{margin-left:auto;font-size:12px;color:var(--text-3);font-weight:500}
.kcards{display:flex;flex-direction:column;gap:8px;padding:0 8px 10px;overflow:auto;min-height:48px}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;cursor:grab;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:border-color 120ms ease,box-shadow 120ms ease}
.kcard:hover{border-color:var(--line-strong);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.kcard.locked{cursor:default}
.kname{font-weight:600;line-height:1.3}
.kname:hover{color:var(--accent-text)}
.kfields{display:flex;flex-direction:column;gap:6px}
.kfield{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:8px;min-height:24px;font-size:13px}
.kfl{color:var(--text-3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kfv{min-width:0;display:flex;overflow:hidden}
.kfv .pill{flex:0 1 auto;height:22px;font-size:12px;padding:0 10px}
.kfv .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kemptylane{margin:4px 4px 0;font-size:12px}

/* ------------------------------------------------------------ S8: My Work */
.mywork .boardhead{align-items:baseline}
.mwbar{display:flex;align-items:center;gap:8px;padding:12px var(--hx) 8px}
.chips{display:flex;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:15px;border:1px solid var(--line-strong);text-decoration:none;font-weight:500;color:var(--accent-text);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background-color 120ms ease,border-color 120ms ease,transform 120ms var(--ease)}
.chip:hover{background:var(--surface-2)}
.chip:active{transform:scale(.97)}
.chip.on{border-color:var(--accent);background:var(--accent-soft)}
.chip .cn{font-size:12px;color:var(--text-2)}
.mwdate{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-size:13px}
.mwdate select{height:30px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);padding:0 8px;color:var(--text)}
.mwlist{padding:4px var(--hx) 16px;max-width:880px}
.mwr{display:grid;grid-template-columns:minmax(0,1fr) 150px 96px;gap:16px;align-items:center;min-height:52px;padding:6px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background-color 120ms ease}
a.mwr{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
a.mwr:hover{background:var(--rowhover)}
.mwr.mwhead{min-height:36px;font-size:13px;font-weight:600;color:var(--text-2);border-bottom-color:var(--line-strong)}
.mwn{display:flex;flex-direction:column;min-width:0}
.mwt{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mwn small{color:var(--text-3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mws{display:flex}
.mws .pill{height:28px;flex:1}
.mwd{color:var(--text-2)}
.mwb{margin-top:16px}
.mwbh{margin:0;padding:6px 8px;font-size:15px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.mwbh .num{font-size:12px;font-weight:500;color:var(--text-3)}
.mwbh.od{color:var(--neg)}
.mwb.none .mwbh{color:var(--text-3);font-weight:600;border-bottom-color:transparent}
.mwfoot{padding:0 var(--hx) 16px;font-size:12px;margin:0}
.mywork .mwbar{max-width:calc(880px + 2 * var(--hx))}

@media (prefers-reduced-motion:reduce){.menu,.dlg[open],.overlay[open],.toast{animation:none}.dragghost{animation:none}.colresize::after,.rgrip{transition:none}.fprev{animation:none}}