/* Ping (working name): the office app. Soft off-white by default, easy on the eyes all day. */
:root {
  --ink:#0F0F12; --body:#3C3C43; --muted:#8A8A8E; --faint:#AEAEB2; --hair:rgba(60,60,67,.12);
  --page:#FFFFFF; --card:#FFFFFF; --fill:#E8E8EA; --soft:#F3F3F5;
  --red:#E5484D; --blue:#2C2C31; --amber:#8E8E93; --green:#17171A; --text:16px;
  /* Colour means something or it isn't used: red = urgent or late, sage = done, greys for everything in between. */
}
:root.bright { --page:#FFFFFF; --card:#FFFFFF; --fill:#F2F2F5; --soft:#F4F4F6; }
:root.large { --text:18px; }
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body { background:var(--page); color:var(--ink); font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; font-size:var(--text); overscroll-behavior:none; }
::-webkit-scrollbar { display:none; } * { scrollbar-width:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, textarea { font:inherit; color:inherit; border:0; outline:0; background:none; resize:none; }
svg { display:block; flex:none; }

/* Layout: one column on a phone; menu, list and chat side by side on a computer. */
#app { height:100dvh; display:flex; }
.side { display:none; }
.main { flex:1; min-width:0; display:flex; height:100dvh; }
.pane { flex:1; min-width:0; height:100dvh; overflow-y:auto; position:relative; padding-top:env(safe-area-inset-top); }
.pane.plist { display:block; }
@media (min-width: 900px) {
  .side { display:flex; flex-direction:column; width:240px; padding:18px 12px; border-right:.5px solid var(--hair); background:var(--soft); height:100dvh; overflow-y:auto; }
  .main.split .pane.plist { flex:none; width:370px; border-right:.5px solid var(--hair); }
  .menu-btn { visibility:hidden; }
  .only-phone { display:none !important; }
}
@media (max-width: 899px) { .main.split .pane.plist.hide-phone { display:none; } .main.split .pane.detail.hide-phone { display:none; } .only-desk { display:none !important; } }

/* Top bars. */
.bar { display:flex; align-items:center; gap:10px; padding:10px 16px 4px; position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter:saturate(180%) blur(20px); }
.round { width:38px; height:38px; border-radius:50%; background:var(--card); display:grid; place-items:center; box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.05); }
.lines { width:15px; height:9px; position:relative; }
.lines::before, .lines::after { content:""; position:absolute; left:0; height:1.7px; border-radius:2px; background:var(--ink); }
.lines::before { top:0; width:15px; } .lines::after { bottom:0; width:9px; }
.icon-btn { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; }
.icon-btn:active { background:var(--fill); }
.grow { flex:1; }
.head { padding:6px 20px 0; }
h1 { font-size:34px; line-height:41px; font-weight:700; letter-spacing:.2px; }
.sec { display:flex; align-items:baseline; gap:8px; padding:22px 20px 8px; }
.sec h2 { font-size:20px; font-weight:700; letter-spacing:-.2px; }
.sec span { font-size:13px; color:var(--muted); }
.search { margin:10px 16px 0; height:38px; border-radius:11px; background:var(--fill); display:flex; align-items:center; gap:7px; padding:0 10px; color:var(--muted); }
.search input { flex:1; font-size:17px; color:var(--ink); }
.chips { display:flex; gap:8px; padding:14px 16px 8px; overflow-x:auto; }
.chip { height:32px; padding:0 14px; border-radius:999px; font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); }
.chip.on { background:var(--ink); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.12); }
.dot { width:7px; height:7px; border-radius:50%; background:var(--red); flex:none; }
.seg { margin:12px 16px 0; height:34px; border-radius:10px; background:var(--fill); padding:2px; display:flex; }
.seg button { flex:1; font-size:14px; font-weight:500; color:var(--body); border-radius:8px; }
.seg .on { background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 1px 1px rgba(0,0,0,.04), 0 3px 8px rgba(0,0,0,.10); }

/* Faces. */
.av { border-radius:50%; flex:none; display:grid; place-items:center; font-weight:600; color:#3A3A40; position:relative;
  background:linear-gradient(180deg,#F4F4F6,#E3E3E7); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 .5px rgba(0,0,0,.05); }
.av .st { position:absolute; right:-1px; bottom:-1px; width:30%; height:30%; min-width:9px; min-height:9px; border-radius:50%; border:2px solid var(--page); }
.faces { display:flex; } .faces .av { margin-left:-4px; box-shadow:0 0 0 2px var(--page); } .faces .av:first-child { margin-left:0; }

/* Pings list. */
.row { display:flex; align-items:stretch; padding-left:6px; cursor:pointer; }
.row:active, .row.sel { background:color-mix(in srgb, var(--card) 70%, transparent); }
.row .dcol { width:22px; margin-right:2px; display:flex; justify-content:center; padding-top:32px; }
.row .dcol i { width:10px; height:10px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px rgba(229,72,77,.14); }
.row .av { margin:13px 14px 0 0; }
.row .body { flex:1; min-width:0; padding:13px 20px 13px 0; border-bottom:.5px solid var(--hair); }
.row .top { display:flex; align-items:center; gap:6px; height:22px; }
.row .name { flex:1; font-size:17px; font-weight:500; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .time { font-size:15px; color:var(--muted); }
.row .prev { margin-top:2px; font-size:15px; line-height:20px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.row.new .name { font-weight:700; } .row.new .time { color:var(--ink); font-weight:500; } .row.new .prev { color:var(--body); }
.kind { font-weight:500; color:var(--ink); } .kind svg { display:inline-block; vertical-align:-2px; margin-right:2px; } .urg { color:var(--red); font-weight:600; }
.empty { text-align:center; color:var(--muted); padding:60px 30px; font-size:15px; }

/* Chat. */
.chat-top { display:flex; align-items:center; gap:10px; padding:10px 14px 10px 8px; }
.chat-head { position:sticky; top:0; z-index:6; background:color-mix(in srgb, var(--page) 90%, transparent); backdrop-filter:saturate(180%) blur(20px); border-bottom:.5px solid var(--hair); }
.who { flex:1; min-width:0; } .who b { display:block; font-size:16.5px; font-weight:600; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who small { display:block; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pins { margin:0 12px 10px; border-radius:16px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06); }
.pin { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 8px 0 12px; font-size:14.5px; }
.pin + .pin { border-top:.5px solid var(--hair); }
.pin .tx { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pin small { color:var(--muted); font-size:14px; }
.ring { width:19px; height:19px; border-radius:50%; border:1.7px solid #C7C7CC; flex:none; }
.pill { height:30px; padding:0 13px; border-radius:999px; font-size:13.5px; font-weight:600; display:inline-grid; place-items:center; white-space:nowrap; }
.pill.dark { background:linear-gradient(180deg,#2C2C31,#0B0B0D); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 8px rgba(0,0,0,.18); }
.pill.soft { background:var(--fill); }
.spacebar { display:flex; align-items:center; gap:10px; margin:0 12px 10px; height:48px; padding:0 6px 0 12px; border-radius:16px; background:#0F0F12; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.spacebar .sw { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.12); display:grid; place-items:center; }
.spacebar .sw path { animation:pulse 1.2s ease-in-out infinite; }
.spacebar .stx { flex:1; font-size:14px; color:rgba(255,255,255,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .spacebar b { color:#fff; }
.spacebar .pill { background:#fff; color:#0F0F12; height:34px; }
@keyframes pulse { 50% { opacity:.45; } }

.feed { padding:14px 14px 130px; display:flex; flex-direction:column; gap:4px; }
.day { align-self:center; font-size:12px; font-weight:500; color:var(--muted); margin:6px 0 10px; }
.m { display:flex; flex-direction:column; }
.m.mine { align-items:flex-end; } .m.them { align-items:flex-start; }
.m .line { display:flex; align-items:flex-end; gap:8px; max-width:100%; }
.m.them.grp .line { padding-left:0; }
.nm { font-size:12px; color:var(--muted); margin:8px 0 2px 38px; }
.b { max-width:min(76vw, 520px); padding:9px 14px 10px; border-radius:20px; font-size:var(--text); line-height:1.33; letter-spacing:-.2px; white-space:pre-wrap; word-wrap:break-word; user-select:none; -webkit-user-select:none; }
.them .b { background:var(--fill); }
.mine .b { background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06); }
.b.urgent { box-shadow:0 0 0 1.5px rgba(229,72,77,.5) !important; }
.b .ulab { display:block; font-size:12px; font-weight:700; color:var(--red); margin-bottom:2px; }
.quote { border-left:2px solid #D1D1D6; padding:1px 0 1px 9px; margin:1px 0 6px; font-size:13.5px; line-height:18px; color:var(--muted); }
.quote b { display:block; font-size:12.5px; color:var(--ink); font-weight:600; }
.stamp { font-size:12px; color:var(--faint); margin:3px 8px 6px; }
.at { font-weight:600; background:rgba(0,0,0,.06); border-radius:6px; padding:0 3px; }
.tag { font-weight:600; }
.reacts { display:flex; gap:6px; margin:4px 0 0 36px; flex-wrap:wrap; }
.mine .reacts { margin-left:0; }
.reacts span { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:999px; background:var(--card); font-size:12.5px; color:var(--muted); box-shadow:0 0 0 .5px rgba(0,0,0,.08); }
.reacts span b { color:var(--ink); font-weight:600; }
.card { width:min(290px, 76vw); background:var(--card); border-radius:20px; padding:13px 14px 14px; box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.07); user-select:none; }
.card .k { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.4px; display:flex; align-items:center; gap:6px; }
.card .w { font-size:16px; font-weight:600; margin-top:6px; letter-spacing:-.2px; }
.card .d { font-size:13.5px; color:var(--muted); margin-top:2px; }
.card .acts { display:flex; gap:8px; margin-top:12px; }
.card.done .w { color:var(--faint); text-decoration:line-through; }
.voice { display:flex; align-items:center; gap:10px; background:var(--card); border-radius:20px; padding:7px 14px 7px 7px; cursor:pointer; user-select:none;
  box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06); transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.voice.playing { transform:translateY(-3px) scale(1.02); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 14px 30px rgba(0,0,0,.14); }
.voice .play { width:32px; height:32px; border-radius:50%; background:var(--ink); display:grid; place-items:center; }
.voice .wave { display:flex; align-items:center; gap:2.5px; height:22px; }
.voice .wave i { width:2.5px; border-radius:2px; background:#C2C2C7; transition:background .15s; }
.voice .wave i.on { background:var(--ink); }
.voice span { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.photo { width:220px; height:165px; border-radius:20px; overflow:hidden; position:relative; background:linear-gradient(160deg,#EDEDF0,#D5D5DA); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06); }
.photo img { width:100%; height:100%; object-fit:cover; display:block; }
.photo .parcel { position:absolute; left:34%; right:34%; top:30%; bottom:26%; border-radius:6px; background:linear-gradient(#DCC7A4,#C4A57A); box-shadow:0 6px 16px rgba(0,0,0,.14); }
.photo .parcel::before { content:""; position:absolute; left:45%; width:10%; top:0; bottom:0; background:rgba(255,255,255,.35); }
.photo .doc { position:absolute; left:22%; right:22%; top:16%; bottom:16%; border-radius:6px; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12); padding:10px; }
.photo .doc i { display:block; height:5px; border-radius:3px; background:#E4E4E8; margin-bottom:6px; }
.file { display:flex; align-items:center; gap:12px; width:min(270px, 76vw); padding:12px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.07), 0 6px 18px rgba(0,0,0,.07); }
.file .fi { width:42px; height:50px; border-radius:9px; background:var(--fill); display:grid; place-items:center; position:relative; }
.file .fi b { position:absolute; bottom:5px; font-size:8.5px; font-weight:700; letter-spacing:.4px; color:#6E6E73; }
.file .ft { flex:1; min-width:0; } .file .ft b { display:block; font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .file .ft small { font-size:12.5px; color:var(--muted); }
.file .dl { width:32px; height:32px; border-radius:50%; background:var(--fill); display:grid; place-items:center; }
.meet .live { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; }
.meet .live i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(0,0,0,.16); }
.meet .mrow { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:.5px solid var(--hair); }
/* Threads: a thin grey line from the ping down and round into each reply. */
.thread { position:relative; margin:6px 0 0 13px; padding-left:22px; display:flex; flex-direction:column; gap:10px; }
.reply { display:flex; align-items:flex-end; gap:8px; position:relative; }
.reply::before { content:""; position:absolute; left:-22px; top:-14px; bottom:12px; width:18px; border-left:1.5px solid #CFCFD4; border-bottom:1.5px solid #CFCFD4; border-bottom-left-radius:12px; }
.reply:not(.last)::after { content:""; position:absolute; left:-22px; top:0; bottom:-14px; border-left:1.5px solid #CFCFD4; }
.reply .b { max-width:min(64vw, 440px); }
.nm2 { display:block; font-size:12px; color:var(--muted); margin:0 0 2px 4px; }
.fold { display:inline-flex; align-items:center; gap:8px; margin:6px 0 0 36px; height:34px; padding:0 12px 0 6px; border-radius:999px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05); font-size:13.5px; font-weight:600; }
.fold small { font-weight:400; color:var(--muted); }
.typing { display:inline-flex; gap:4px; padding:12px 14px; border-radius:20px; background:var(--fill); }
.typing i { width:7px; height:7px; border-radius:50%; background:#9A9AA0; animation:bob 1s infinite; } .typing i:nth-child(2) { animation-delay:.15s; } .typing i:nth-child(3) { animation-delay:.3s; }
@keyframes bob { 30% { transform:translateY(-3px); opacity:.6; } }

/* Message box. */
.dock { position:sticky; bottom:0; padding:10px 12px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(color-mix(in srgb, var(--page) 0%, transparent), var(--page) 40%); z-index:7; }
.replying { display:flex; align-items:center; gap:8px; margin:0 6px 8px; padding:8px 10px; border-radius:14px; background:var(--card); font-size:13px; color:var(--muted); box-shadow:0 0 0 .5px rgba(0,0,0,.06); }
.replying b { color:var(--ink); }
.compose { display:flex; align-items:flex-end; gap:6px; min-height:50px; padding:6px; border-radius:26px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 8px 26px rgba(0,0,0,.10); position:relative; }
.compose textarea { flex:1; font-size:16px; line-height:22px; padding:8px 4px; max-height:120px; }
.compose .ib { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; flex:none; color:var(--ink); }
.compose .ib.urg-on { color:var(--red); background:#FFECEC; }
.compose .send { width:38px; height:38px; border-radius:50%; background:linear-gradient(180deg,#2C2C31,#0B0B0D); color:#fff; display:grid; place-items:center; flex:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 3px 8px rgba(0,0,0,.22); }
.compose .send.rec { background:var(--red); }
.recbar { flex:1; display:flex; align-items:center; gap:8px; padding:0 8px; font-size:15px; color:var(--red); font-variant-numeric:tabular-nums; }
.recbar i { width:9px; height:9px; border-radius:50%; background:var(--red); animation:pulse 1s infinite; }
.attach { position:absolute; left:0; bottom:60px; width:250px; padding:6px; border-radius:18px; background:var(--card); z-index:20; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 18px 44px rgba(0,0,0,.16); }
.item { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border-radius:12px; font-size:15.5px; width:100%; text-align:left; }
.item:hover, .item:active { background:var(--fill); }
.item small { margin-left:auto; font-size:12px; color:var(--muted); }

/* Hold menu. */
.veil { position:fixed; inset:0; background:color-mix(in srgb, var(--page) 70%, transparent); backdrop-filter:blur(7px); z-index:40; animation:fade .15s; }
@keyframes fade { from { opacity:0; } }
.hold { position:fixed; z-index:41; width:264px; border-radius:18px; background:var(--card); padding:6px; box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.18); animation:pop .16s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { transform:scale(.96); opacity:0; } }
.emo { display:flex; justify-content:space-between; padding:4px 6px 8px; border-bottom:.5px solid var(--hair); margin-bottom:4px; }
.emo button { width:38px; height:38px; border-radius:50%; font-size:22px; } .emo button:active { background:var(--fill); }
.when { display:flex; gap:6px; padding:2px 10px 10px 44px; }
.when button { white-space:nowrap; height:28px; padding:0 10px; border-radius:999px; background:var(--fill); font-size:13px; font-weight:500; }

/* Cards and lists on other pages. */
.list { margin:0 16px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 22px rgba(0,0,0,.06); }
.li { display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; }
.li + .li { border-top:.5px solid var(--hair); }
.li .lb { flex:1; min-width:0; } .li .lt { font-size:16px; font-weight:500; letter-spacing:-.2px; display:flex; align-items:center; gap:7px; }
.li .ls { font-size:13px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.check { width:24px; height:24px; border-radius:50%; flex:none; border:1.6px solid #C7C7CC; display:grid; place-items:center; transition:all .18s; }
.check svg { opacity:0; }
.isdone .check { background:var(--ink); border-color:var(--ink); } .isdone .check svg { opacity:1; }
.isdone .lt { color:var(--faint); text-decoration:line-through; } .isdone .ls { color:#C7C7CC; }
.late { color:var(--red); font-weight:500; }
.state { flex:none; height:24px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.state::before { content:""; width:7px; height:7px; border-radius:50%; }
.state.reported { background:#FFF0F0; color:#C6363B; } .state.reported::before { background:var(--red); }
.state.onit { background:#FFF6E6; color:#A76A05; } .state.onit::before { background:var(--amber); }
.state.fixed { background:#F3F3F5; color:#17171A; } .state.fixed::before { background:var(--green); }
.thumb { width:48px; height:48px; border-radius:12px; flex:none; background:linear-gradient(160deg,#EDEDF0,#D5D5DA); overflow:hidden; display:grid; place-items:center; color:#6E6E73; position:relative; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.report { margin:12px 16px 0; border-radius:20px; background:var(--card); padding:16px 14px 14px; box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 22px rgba(0,0,0,.06); }
.report .q { font-size:16px; font-weight:600; padding:0 2px; } .report .sub { font-size:13px; color:var(--muted); margin:2px 2px 12px; }
.kinds { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.kinds button { height:72px; border-radius:14px; background:var(--fill); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-size:13px; font-weight:500; }
.kinds button:active { transform:scale(.97); }
.group { margin:0 16px 14px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04); }
.gl { font-size:13px; color:var(--muted); margin:22px 32px 7px; } .gf { font-size:12.5px; color:var(--muted); margin:-6px 32px 14px; line-height:17px; }
.grow-row { display:flex; align-items:center; gap:12px; min-height:52px; padding:0 14px; font-size:16px; cursor:pointer; }
.grow-row + .grow-row { border-top:.5px solid var(--hair); }
.grow-row .v { margin-left:auto; color:var(--muted); display:flex; align-items:center; gap:4px; font-size:15px; }
.switch { width:51px; height:31px; border-radius:999px; background:var(--green); position:relative; flex:none; margin-left:auto; transition:background .2s; }
.switch::after { content:""; position:absolute; top:2px; left:22px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.08); transition:left .2s; }
.switch.off { background:#E3E3E6; } .switch.off::after { left:2px; }
.switch.red { background:var(--red); }
.bigbtn { height:52px; border-radius:999px; background:linear-gradient(180deg,#2C2C31,#0B0B0D); color:#fff; display:flex; align-items:center; justify-content:center; gap:8px; font-size:16.5px; font-weight:600; width:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px rgba(0,0,0,.2); }
.steps { display:flex; align-items:center; margin:22px 24px 0; }
.stp { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); width:64px; }
.stp .c { width:22px; height:22px; border-radius:50%; border:1.6px solid #C7C7CC; display:grid; place-items:center; background:var(--card); color:#fff; }
.stp.red .c { background:var(--red); border-color:var(--red); }
.stp.amber .c { border-color:var(--amber); box-shadow:0 0 0 4px rgba(245,165,36,.16); } .stp.amber .c::after { content:""; width:8px; height:8px; border-radius:50%; background:var(--amber); }
.stp.green .c { background:var(--green); border-color:var(--green); }
.stp.hit { color:var(--ink); font-weight:500; }
.ln { flex:1; height:1.6px; background:#D1D1D6; margin-bottom:22px; } .ln.hit { background:linear-gradient(90deg,var(--red),var(--amber)); } .ln.full { background:linear-gradient(90deg,var(--amber),var(--green)); }
.post { margin:12px 16px 0; padding:14px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 22px rgba(0,0,0,.06); }

/* Menu. */
.drawer-veil { position:fixed; inset:0; background:rgba(15,15,18,.28); z-index:30; animation:fade .2s; }
.drawer { position:fixed; top:0; bottom:0; left:0; width:300px; max-width:84vw; background:var(--page); z-index:31; display:flex; flex-direction:column; padding:calc(18px + env(safe-area-inset-top)) 12px 24px;
  border-radius:0 28px 28px 0; box-shadow:20px 0 60px rgba(0,0,0,.18); animation:slide .25s cubic-bezier(.2,.8,.2,1); overflow-y:auto; }
@keyframes slide { from { transform:translateX(-100%); } }
.me { display:flex; align-items:center; gap:12px; padding:6px 8px 0; }
.me b { display:block; font-size:17px; font-weight:600; letter-spacing:-.3px; } .me small { font-size:13px; color:var(--muted); }
.status-pill { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin:14px 8px 10px; height:34px; padding:0 12px; border-radius:999px; background:var(--fill); font-size:14.5px; font-weight:500; }
.status-pill i { width:9px; height:9px; border-radius:50%; }
.nav { display:flex; align-items:center; gap:14px; height:46px; padding:0 12px; border-radius:14px; font-size:16px; font-weight:500; width:100%; text-align:left; }
.nav.on { background:var(--card); font-weight:600; box-shadow:0 0 0 .5px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.04); }
.nav .dot { margin-left:auto; }
.tags-h { font-size:12.5px; color:var(--muted); margin:16px 12px 4px; }
.ver { text-align:center; font-size:12px; color:var(--faint); margin-top:10px; }

/* Sheets and toasts. */
.sheet-veil { position:fixed; inset:0; background:rgba(15,15,18,.32); z-index:50; animation:fade .2s; }
.sheet { position:fixed; left:0; right:0; bottom:0; top:max(44px, env(safe-area-inset-top)); background:var(--page); z-index:51; border-radius:14px 14px 0 0; display:flex; flex-direction:column; animation:up .28s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
@media (min-width: 900px) { .sheet { left:50%; right:auto; width:520px; transform:translateX(-50%); top:6vh; bottom:6vh; border-radius:18px; animation:fade .2s; } }
@keyframes up { from { transform:translateY(100%); } }
.sheet .grab { width:36px; height:5px; border-radius:3px; background:#D6D6DA; margin:6px auto 0; }
.sheet .snav { display:flex; align-items:center; height:48px; padding:0 16px; flex:none; }
.sheet .snav .t { flex:1; text-align:center; font-size:17px; font-weight:600; }
.sheet .snav button { width:70px; font-size:17px; text-align:left; }
.sheet .scroll { flex:1; overflow-y:auto; }
.to { display:flex; align-items:flex-start; gap:8px; padding:9px 16px; border-top:.5px solid var(--hair); border-bottom:.5px solid var(--hair); }
.to .lbl { font-size:16px; color:var(--muted); line-height:30px; }
.to .chipsw { flex:1; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.to input { flex:1; min-width:80px; height:30px; font-size:16px; }
.pchip { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:999px; background:var(--fill); font-size:15px; font-weight:500; }
.pchip small { color:var(--muted); font-weight:400; font-size:13px; }
.pchip .hd { width:7px; height:7px; border-radius:50%; background:var(--green); }
.field { margin:0 16px; padding:14px 16px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04); }
.field textarea, .field input { width:100%; font-size:17px; line-height:24px; }
.toast { position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60; background:#1C1C20; color:#fff; font-size:14px; padding:11px 16px; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); animation:toast .25s cubic-bezier(.2,.8,.2,1); max-width:88vw; text-align:center; }
@keyframes toast { from { transform:translate(-50%, 10px); opacity:0; } }
.demo { position:fixed; right:12px; top:calc(12px + env(safe-area-inset-top)); z-index:4; font-size:12px; font-weight:600; letter-spacing:.3px; color:var(--muted); background:var(--card); padding:4px 8px; border-radius:999px; box-shadow:0 0 0 .5px var(--hair); display:none; }
@media (min-width: 900px) { .demo { display:block; } }
/* A chat fills the screen, so the message box always sits at the bottom. */
.pane.detail { display:flex; flex-direction:column; }
.pane.detail .feed { flex:1 0 auto; }
@media (max-width: 899px) { .pane.detail.hide-phone { display:none; } }

/* Space: a small pill, just who's in. */
.spacebar { display:inline-flex; align-self:flex-start; width:auto; height:40px; gap:8px; padding:0 4px 0 6px; margin:0 12px 10px; border-radius:999px; }
.spacebar .faces .av { box-shadow:0 0 0 2px #0F0F12; }
.spacebar .pill { height:32px; }
.chat-head { display:flex; flex-direction:column; }
.file .fi { background:none; width:38px; height:46px; }

/* No borders: panes flow into each other. */
.side { border-right:0 !important; }
.main.split .pane.plist { border-right:0 !important; }
.chat-head { border-bottom:0; }
@media (min-width: 900px) { .main.split .pane.detail { background:color-mix(in srgb, var(--card) 45%, var(--page)); } }
/* Task colours: red new, amber on it, green done. */
.pill.amber { background:var(--amber); color:#3D2600; box-shadow:0 3px 8px rgba(245,165,36,.3); }
.pill.green { background:var(--green); color:#fff; box-shadow:0 3px 8px rgba(0,0,0,.3); }
.li.t-new .check { border-color:var(--red); }
.li.t-doing .check { border-color:var(--amber); background:radial-gradient(circle, var(--amber) 38%, transparent 42%); }
.li.t-done .check, .isdone .check { background:var(--green) !important; border-color:var(--green) !important; }
.li .state { margin-left:4px; }
.flow { display:flex; gap:14px; padding:10px 20px 0; font-size:12.5px; color:var(--muted); }
.flow span { display:inline-flex; align-items:center; gap:6px; } .flow i { width:8px; height:8px; border-radius:50%; }
.whofor { display:flex; gap:14px; padding:2px 20px 4px; overflow-x:auto; }
.who-c { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12.5px; color:var(--body); padding:4px; border-radius:14px; }
.who-c.on .av { box-shadow:0 0 0 2.5px var(--page), 0 0 0 4.5px var(--ink); }
.who-c.on span { color:var(--ink); font-weight:600; }

/* New ping: a floating box that drops down from the top. */
.sheet.float { top:calc(10px + env(safe-area-inset-top)); left:10px; right:10px; bottom:auto; max-height:78dvh; border-radius:24px; background:var(--page);
  box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.22); animation:drop .32s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 900px) { .sheet.float { left:50%; right:auto; width:480px; transform:translateX(-50%); top:40px; bottom:auto; animation:fade .2s; } }
.sheet.float .grab { display:none; }
.sheet.float .scroll { max-height:42dvh; flex:none; }
.sheet.float .to { border-top:0; }
@keyframes drop { from { transform:translateY(-110%); opacity:.4; } }

.sheet.float { max-height:66dvh; }
.sheet.float .snav { height:44px; }
.sheet.float .scroll { max-height:34dvh; }
.sheet.float .list { margin-top:8px !important; }
.sheet.float .li { padding:9px 14px; }
.sheet.float .attach { bottom:58px; }
.switch.red.off { background:#E3E3E6; }
/* All one colour, edge to edge: no grey edge around the column. */
html, body { background:var(--page) !important; }
/* Quieter page titles. */
h1 { font-size:28px; line-height:34px; letter-spacing:.1px; }

/* The new ping box: To line with a +, then the text, then + / urgent / send. */
.sheet.float .to { align-items:center; border-bottom:.5px solid var(--hair); }
.to-hint { font-size:15px; color:var(--faint); line-height:30px; }
.addp { width:30px; height:30px; border-radius:50%; background:var(--fill); display:grid; place-items:center; flex:none; }
.picklist { max-height:30dvh; overflow-y:auto; padding:6px 6px 8px; border-bottom:.5px solid var(--hair); }
.pick { display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px; border-radius:12px; text-align:left; }
.pick:active, .pick:hover { background:var(--fill); }
.pick b { display:block; font-size:15px; font-weight:500; } .pick small { font-size:12.5px; color:var(--muted); }
.newtext { display:block; width:100%; padding:14px 18px 6px; font-size:17px; line-height:24px; min-height:110px; }
.newbar { display:flex; align-items:center; gap:6px; padding:6px 10px 12px; position:relative; }
.newbar .send { width:40px; height:40px; border-radius:50%; background:linear-gradient(180deg,#2C2C31,#0B0B0D); color:#fff; display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 3px 8px rgba(0,0,0,.22); }
.newbar .ib { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; }
.newbar .ib.urg-on { color:var(--red); background:#FFECEC; }
.newbar .attach { bottom:56px; left:6px; }

/* New ping: who at the top, a pill to type in at the bottom. */
.newwho { display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 20px 18px; text-align:center; }
.newwho b { font-size:16px; font-weight:600; margin-top:4px; } .newwho small { font-size:13px; color:var(--muted); }
.newbar { padding:4px 10px 12px; }
.newbar .compose { box-shadow:0 0 0 .5px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.08); }
.newbar .compose .send { width:38px; height:38px; }
.newbar .attach { bottom:58px; left:0; }
/* Space: blue with a white wave, so it stands out. */
.space-btn { width:36px; height:36px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; flex:none; box-shadow:0 4px 12px rgba(59,130,246,.3); }
.space-btn:active { transform:scale(.95); }
.spacebar .sw { background:var(--blue) !important; color:#fff; }

/* New ping: a bigger box that pops out from the notepad button, with a bigger pill to type in. */
.sheet.float.newping { min-height:44dvh; } .sheet.float { transform-origin:calc(100% - 30px) 20px; animation:popout .34s cubic-bezier(.2,.9,.25,1.05); }
@keyframes popout { from { transform:scale(.2); opacity:0; border-radius:40px; } }
@media (min-width: 900px) { .sheet.float { transform-origin:top center; animation:popdesk .28s cubic-bezier(.2,.9,.25,1.05); } @keyframes popdesk { from { transform:translateX(-50%) scale(.9); opacity:0; } } }
.sheet.float .newwho { flex:1; justify-content:center; min-height:120px; }
.newbar .compose { min-height:58px; padding:8px; border-radius:30px; }
.newbar .compose textarea { font-size:17px; line-height:24px; padding:9px 4px; }
.sheet.float .to { min-height:52px; }

/* Space: a white button with dark blue waves; the waves move while you're in the Space. */
.space-btn { background:var(--card) !important; color:#1E3A8A !important; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.05) !important; }
.space-btn.live path, .spacebar .sw path { animation:wavebar 1s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.space-btn.live path:nth-child(2), .spacebar .sw path:nth-child(2) { animation-delay:.1s; }
@keyframes wavebar { 50% { transform:scaleY(.45); } }
.spacebar .sw { background:#fff !important; color:#1E3A8A !important; }

/* The waves ripple bar by bar when you tap, and keep going while you're in the Space. */
.space-btn path, .spacebar .sw path { transform-origin:center; transform-box:fill-box; }
.space-btn.tap path { animation:wavebar .5s ease-in-out 2; }
.space-btn.live path, .spacebar .sw path { animation:wavebar 1s ease-in-out infinite; }
.space-btn path:nth-child(2), .spacebar .sw path:nth-child(2) { animation-delay:.08s; }
.space-btn path:nth-child(3), .spacebar .sw path:nth-child(3) { animation-delay:.16s; }
.space-btn path:nth-child(4), .spacebar .sw path:nth-child(4) { animation-delay:.24s; }
.space-btn path:nth-child(5), .spacebar .sw path:nth-child(5) { animation-delay:.32s; }
@keyframes wavebar { 50% { transform:scaleY(.35); } }
/* While it waves, the button turns blue with white waves. */
.space-btn { transition:background .25s, color .25s, box-shadow .25s; }
.space-btn.tap, .space-btn.live { background:var(--blue) !important; color:#fff !important; box-shadow:0 4px 14px rgba(59,130,246,.35) !important; }
.spacebar .sw { background:var(--blue) !important; color:#fff !important; }
/* The button stays white; the waves turn bright blue while they move. */
.space-btn.tap, .space-btn.live { background:var(--card) !important; color:var(--blue) !important; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.05) !important; }
.spacebar .sw { background:#fff !important; color:var(--blue) !important; }

/* Clips. */
.clip { position:relative; width:min(250px, 70vw); aspect-ratio:3/4; border-radius:20px; overflow:hidden; background:#1C1C20; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.12); }
.clip video { width:100%; height:100%; object-fit:cover; display:block; }
.clipart { position:absolute; inset:0; background:linear-gradient(160deg,#3A3A42,#15151A); }
.clipplay { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.22); backdrop-filter:blur(10px); display:grid; place-items:center; box-shadow:0 0 0 1px rgba(255,255,255,.3); }
.clipplay svg:first-child { display:none; }
.clip.playing .clipplay, .clip.playing .cliptag { display:none; }
.cliptag { position:absolute; left:10px; bottom:10px; height:24px; padding:0 9px; border-radius:999px; background:rgba(0,0,0,.45); color:#fff; font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:5px; backdrop-filter:blur(8px); }
.clipcap { position:absolute; left:10px; right:10px; top:10px; color:#fff; font-size:13.5px; font-weight:500; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.clipopt { display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 6px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06); }
.clipopt b { font-size:15px; } .clipopt small { font-size:12px; color:var(--muted); }
.clipopt.off { opacity:.45; }
.clipover { position:fixed; inset:0; z-index:70; background:#000; display:flex; flex-direction:column; }
.clipover video { flex:1; width:100%; object-fit:cover; min-height:0; }
.cliptop { position:absolute; top:calc(16px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:999px; background:rgba(0,0,0,.5); color:#fff; font-size:15px; font-variant-numeric:tabular-nums; }
.rdot { width:9px; height:9px; border-radius:50%; background:var(--red); animation:pulse 1s infinite; }
.clipcapin { position:absolute; left:16px; right:16px; bottom:calc(120px + env(safe-area-inset-bottom)); height:44px; padding:0 16px; border-radius:999px; background:rgba(0,0,0,.45); color:#fff; font-size:15px; backdrop-filter:blur(10px); }
.clipcapin::placeholder { color:rgba(255,255,255,.7); }
.clipbtns { position:absolute; left:0; right:0; bottom:calc(30px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.clipstop { width:72px; height:72px; border-radius:50%; border:4px solid #fff; display:grid; place-items:center; }
.clipstop span { width:28px; height:28px; border-radius:7px; background:var(--red); }
.clip.wide { aspect-ratio:16/10; width:min(290px, 76vw); }

/* The + menu: frosted glass, just the coloured icons. */
.glassmenu { position:absolute; left:0; right:0; bottom:calc(100% + 10px); display:grid; grid-template-columns:repeat(4,1fr); row-gap:14px; padding:18px 8px 14px; border-radius:26px; z-index:20;
  background:color-mix(in srgb, var(--card) 62%, transparent); backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 0 0 .5px rgba(0,0,0,.08), 0 18px 44px rgba(0,0,0,.14); animation:glassin .22s cubic-bezier(.2,.9,.25,1.05); transform-origin:bottom left; }
.glassmenu[hidden] { display:none; }
@keyframes glassin { from { transform:scale(.9) translateY(8px); opacity:0; } }
.gm { display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 0; border-radius:16px; font-size:12.5px; font-weight:500; color:var(--body); }
.gm:active { background:rgba(0,0,0,.05); transform:scale(.96); }
.plusbtn svg { transition:transform .2s cubic-bezier(.2,.9,.25,1.05); }
.plusbtn.open svg { transform:rotate(45deg); }

/* Staff board. */
.kindnote { display:flex; align-items:center; gap:8px; margin:10px 20px 4px; font-size:13.5px; color:var(--muted); }
.bpost { padding:14px 20px 12px; border-bottom:.5px solid var(--hair); }
.bh { display:flex; align-items:center; gap:10px; }
.bw { flex:1; min-width:0; } .bw b { display:block; font-size:15.5px; font-weight:600; letter-spacing:-.2px; } .bw small { font-size:12.5px; color:var(--muted); }
.bt { margin-top:8px; font-size:var(--text); line-height:1.4; letter-spacing:-.2px; white-space:pre-wrap; }
.bimg { margin-top:10px; border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:linear-gradient(160deg,#F1E6DA,#E2CDB7); position:relative; }
.bimg img { width:100%; height:100%; object-fit:cover; display:block; }
.bimg.cake span { position:absolute; left:32%; right:32%; bottom:22%; height:34%; border-radius:10px 10px 6px 6px; background:linear-gradient(#FFFFFF 0 28%, #F6C9D6 28% 40%, #FDF3E7 40%); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.bimg.cake span::before { content:""; position:absolute; left:47%; top:-22px; width:6%; height:22px; border-radius:3px; background:#8FB7F2; }
.bimg.cake span::after { content:""; position:absolute; left:45%; top:-34px; width:10%; height:12px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:#F5A524; }
.bf { display:flex; align-items:center; gap:8px; margin-top:8px; }
.heart { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--ink); }
.heart:active { transform:scale(.9); }
.hnames { font-size:13px; color:var(--muted); }

.bcompose { margin:8px 16px 6px; padding:12px 12px 10px; border-radius:20px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.06); }
.bcrow { display:flex; align-items:flex-start; gap:10px; }
.bcrow textarea { flex:1; font-size:16px; line-height:22px; padding:8px 2px; min-height:38px; }
.bcbar { display:flex; align-items:center; gap:8px; margin-top:8px; padding-top:8px; border-top:.5px solid var(--hair); }
.bctool { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-radius:999px; font-size:14px; font-weight:500; color:#2F7BEA; }
.bctool:active { background:var(--fill); }
.bpreview { position:relative; width:72px; height:72px; margin:0 0 8px 8px; border-radius:14px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.bpreview img { width:100%; height:100%; object-fit:cover; }
.bpreview button { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(15,15,18,.7); color:#fff; display:grid; place-items:center; }

/* Projects. */
.proj { margin:12px 16px 0; padding:14px; border-radius:20px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 22px rgba(0,0,0,.06); cursor:pointer; }
.ph { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.pic { width:40px; height:40px; border-radius:12px; background:var(--fill); display:grid; place-items:center; }
.pw { flex:1; min-width:0; } .pw b { display:block; font-size:16.5px; font-weight:600; letter-spacing:-.2px; } .pw small { font-size:13px; color:var(--muted); }
.pbar { display:flex; height:8px; border-radius:999px; overflow:hidden; background:var(--fill); gap:2px; }
.pbar i { display:block; height:100%; }
.pcount { font-size:12.5px; color:var(--muted); margin-top:7px; }

/* Urgent follow-ups under a ping. */
.esc { display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin:6px 4px 2px; }
.esc span { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:#C6363B; background:#FFF0F0; padding:4px 10px; border-radius:999px; animation:fade .3s; }

/* Auto-replies. */
.them .b.auto { background:transparent; box-shadow:inset 0 0 0 1px var(--hair); color:var(--body); }
.alab { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:3px; }
.status-pill { max-width:100%; }

/* Who's in today. */
.checkin { margin:12px 16px 2px; padding:14px; border-radius:20px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 22px rgba(0,0,0,.06); }
.ci-h b { display:block; font-size:16px; font-weight:600; } .ci-h small { font-size:13.5px; color:var(--muted); }
.ci-b { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.ci-b button { height:68px; border-radius:14px; background:var(--fill); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font-size:13.5px; font-weight:500; }
.ci-b button:active { transform:scale(.97); background:var(--ink); color:#fff; }
.todaycard { margin:0 16px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 22px rgba(0,0,0,.06); }
.td-r { display:flex; align-items:center; gap:12px; padding:11px 14px; }
.td-r + .td-r { border-top:.5px solid var(--hair); }
.td-ic { width:34px; height:34px; border-radius:10px; background:var(--fill); display:grid; place-items:center; flex:none; }
.td-t { flex:1; min-width:0; } .td-t b { display:block; font-size:15px; font-weight:600; } .td-t small { display:block; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* The slim status bar at the top of Pings. */
.sbar { display:flex; align-items:center; gap:10px; width:calc(100% - 32px); margin:10px 16px 0; height:40px; padding:0 14px; border-radius:12px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06); text-align:left; color:var(--muted); }
.sbar i { width:8px; height:8px; border-radius:50%; flex:none; }
.sbar span { flex:1; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sbar span.ph { color:var(--faint); }

/* Visitor cards. */
.card.visit .k { color:#B7791F; }
.vname { font-size:17px; font-weight:600; letter-spacing:-.3px; margin-top:6px; }
.vans { display:flex; align-items:center; gap:6px; margin-top:10px; font-size:13.5px; font-weight:500; color:#17171A; }
.card.visit { position:relative; } .vpass { position:absolute; top:12px; right:14px; filter:drop-shadow(0 2px 4px rgba(224,163,58,.25)); } .card.visit .vname { padding-right:40px; }

/* Polls. */
.pollcard .k { color:#5B5BD6; }
.poll { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.popt { position:relative; display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border-radius:12px; background:var(--fill); overflow:hidden; text-align:left; width:100%; }
.popt i { position:absolute; left:0; top:0; bottom:0; background:rgba(91,91,214,.16); border-radius:12px 0 0 12px; transition:width .5s cubic-bezier(.2,.8,.2,1); }
.popt.mine { box-shadow:inset 0 0 0 1.5px #5B5BD6; }
.popt.mine i { background:rgba(91,91,214,.26); }
.popt .pt { position:relative; flex:1; display:flex; align-items:center; gap:6px; font-size:14.5px; font-weight:500; color:var(--ink); }
.popt.mine .pt { color:#4343B8; }
.popt .pp { position:relative; font-size:13px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.pfoot { font-size:12.5px; color:var(--muted); margin-top:2px; }
.bpost .poll { margin-top:10px; }

/* Scheduled pings wait, faded. */
.b.waiting { opacity:.6; border:1.5px dashed #C7C7CC; box-shadow:none !important; }
.sched { display:flex; align-items:center; gap:6px; margin:5px 4px 2px; font-size:12px; font-weight:500; color:var(--muted); }
.sched button { font-size:12px; font-weight:600; color:var(--blue); padding:2px 4px; }

/* Manager tools. */
.stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 16px 0; }
.stat { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:14px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05); text-align:left; }
.stat b { font-size:28px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
.stat span { font-size:14px; font-weight:600; color:var(--ink); }
.stat small { font-size:12px; color:var(--muted); }
.stat:active { transform:scale(.98); }
.sec .grow { flex:1; }

/* Pinned posts and the one-week note. */
.bpost.pinned { background:color-mix(in srgb, var(--blue) 5%, var(--page)); }
.pinlab { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--blue); margin-bottom:8px; }
.clears { text-align:center; font-size:12.5px; color:var(--faint); padding:18px 20px 0; }

/* Sign in and join. */
.pane.onb { display:flex; }
.onb-wrap { flex:1; display:flex; flex-direction:column; padding:14px 22px calc(28px + env(safe-area-inset-bottom)); max-width:460px; margin:0 auto; width:100%; min-height:100%; }
.onb-wrap.center { justify-content:center; align-items:center; text-align:center; }
.onb-logo { filter:drop-shadow(0 12px 24px rgba(0,0,0,.18)); margin-bottom:18px; }
.onb-title { font-size:36px; line-height:42px; }
.onb-sub { font-size:16px; line-height:23px; color:var(--muted); margin-top:8px; max-width:300px; }
.onb-sub.left { max-width:none; margin:4px 0 0; }
.onb-form { width:100%; margin-top:34px; display:flex; flex-direction:column; gap:12px; }
.onb-field { display:flex; align-items:center; gap:10px; height:54px; padding:0 16px; border-radius:16px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.05); color:var(--muted); }
.onb-field input { flex:1; font-size:17px; color:var(--ink); }
.onb-small { font-size:13px; color:var(--muted); line-height:18px; }
.onb-foot { position:absolute; bottom:calc(28px + env(safe-area-inset-bottom)); font-size:14px; color:var(--muted); }
.onb-foot button { color:var(--blue); font-weight:600; font-size:14px; }
.onb-h2 { font-size:28px; line-height:34px; font-weight:700; margin-top:14px; }
.onb-steps { display:flex; gap:6px; margin-top:6px; } .onb-steps i { flex:1; height:4px; border-radius:2px; background:var(--fill); } .onb-steps i.on { background:var(--ink); }
.invite { margin-top:30px; padding:28px 20px 24px; border-radius:26px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 14px 40px rgba(0,0,0,.08); display:flex; flex-direction:column; align-items:center; text-align:center; }
.co-logo { width:72px; height:72px; border-radius:22px; background:linear-gradient(160deg,#2C2C31,#0B0B0D); color:#fff; font-size:32px; font-weight:700; display:grid; place-items:center; box-shadow:0 10px 24px rgba(0,0,0,.2); }
.inv-by { display:flex; align-items:center; gap:8px; margin-top:20px; font-size:14.5px; color:var(--muted); } .inv-by b { color:var(--ink); font-weight:600; }
.invite h2 { font-size:26px; font-weight:700; letter-spacing:-.4px; margin-top:6px; }
.inv-faces { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:20px; } .inv-faces small { font-size:13px; color:var(--muted); }
.photo-pick { display:flex; align-items:center; gap:16px; margin-top:22px; }
.pp-circle { width:78px; height:78px; border-radius:50%; background:linear-gradient(180deg,#F4F4F6,#E3E3E7); display:grid; place-items:center; font-size:26px; font-weight:600; color:#3A3A40; position:relative; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(0,0,0,.06); }
.pp-add { position:absolute; right:-2px; bottom:-2px; width:28px; height:28px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; border:3px solid var(--page); }
.ready-card { margin-top:16px; padding:16px; border-radius:20px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05); }
.rc-h { display:flex; align-items:center; gap:10px; font-size:16px; } .rc-h b { font-weight:600; }
.rc-n { width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff; font-size:13px; font-weight:700; display:grid; place-items:center; }
.rc-steps { display:flex; flex-direction:column; gap:10px; margin-top:12px; } .rc-steps div { display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--body); } .rc-steps b { color:var(--ink); }
.rc-ic { width:32px; height:32px; border-radius:9px; background:var(--fill); display:grid; place-items:center; color:#2F7BEA; flex:none; } .rc-app { background:none; }

/* Company setup. */
.co-mini { width:34px; height:34px; border-radius:10px; background:linear-gradient(160deg,#2C2C31,#0B0B0D); color:#fff; font-weight:700; font-size:16px; display:grid; place-items:center; flex:none; }
.co-hero { display:flex; align-items:center; gap:14px; padding:10px 16px 0; }
.co-hero .co-logo { width:64px; height:64px; border-radius:19px; font-size:28px; position:relative; flex:none; }
.rc-ic.plain { background:none; color:var(--blue); }
.li.add .lt { color:var(--blue); font-weight:500; }
.chip.soft.on { background:var(--card); color:var(--ink); box-shadow:0 0 0 .5px rgba(0,0,0,.08); }
.invlink { display:flex; align-items:center; gap:12px; margin:0 16px; padding:12px 14px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05); }
.invlink .lb { flex:1; min-width:0; } .invlink .lt { font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .invlink .ls { font-size:12.5px; color:var(--muted); }
.inv-email { display:flex; gap:10px; align-items:center; margin:12px 16px 0; } .inv-email .pill { height:48px; padding:0 20px; }
.av-ghost { width:34px; height:34px; border-radius:50%; background:var(--fill); color:var(--muted); display:grid; place-items:center; flex:none; }
.linkbtn { color:var(--blue); font-weight:600; font-size:14px; padding:4px; }

/* Profiles. */
.prof { display:flex; flex-direction:column; align-items:center; text-align:center; padding:4px 20px 0; }
.prof-av { position:relative; } .prof-av .av { box-shadow:0 12px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9); }
.prof-st { position:absolute; right:6px; bottom:6px; width:22px; height:22px; border-radius:50%; border:4px solid var(--page); }
.prof h1 { font-size:26px; line-height:32px; font-weight:700; letter-spacing:-.4px; margin-top:14px; }
.prof-role { font-size:15px; color:var(--muted); margin-top:2px; }
.prof-status { display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:7px 14px; border-radius:999px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06); font-size:13.5px; font-weight:500; color:var(--body); }
.prof-status i { width:8px; height:8px; border-radius:50%; }
.prof-acts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:100%; margin-top:20px; }
.pa { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 0 10px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05); color:#2F7BEA; }
.pa span { font-size:12.5px; font-weight:600; color:var(--ink); }
.pa.dark { background:linear-gradient(180deg,#2A2A2F,#0E0E10); color:#fff; } .pa.dark span { color:#fff; }
.pa .bars, .pa svg { color:#1E3A8A; } .pa.dark svg { color:#fff; }
.pa:active { transform:scale(.97); }
.prof-about { margin:16px 16px 0; padding:14px 16px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06); font-size:15px; line-height:21px; color:var(--body); text-align:left; }
.shgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:0 16px; }
.shgrid .photo { width:auto; height:auto; aspect-ratio:1; border-radius:14px; }
.field textarea { width:100%; font:inherit; font-size:17px; resize:none; background:none; border:0; outline:0; color:var(--ink); padding:14px 0; }

/* Chat info. */
.ci-faces { display:flex; } .ci-faces .av { box-shadow:0 0 0 3px var(--page), 0 8px 20px rgba(0,0,0,.1); } .ci-faces .av + .av { margin-left:-18px; }
.admin { font-size:12px; font-weight:600; color:var(--muted); background:var(--fill); padding:3px 9px; border-radius:999px; }
.ci-clip { background:linear-gradient(160deg,#3A3A42,#15151A) !important; display:grid; place-items:center; }
.ci-clip .cc-play { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; display:grid; place-items:center; backdrop-filter:blur(8px); }
.ci-clip small { position:absolute; left:8px; bottom:6px; color:#fff; font-size:12px; font-weight:600; }
.mutedic { display:inline-flex; vertical-align:-2px; margin-left:5px; color:var(--faint); }

/* Task detail. */
.td-urg { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--red); margin-bottom:4px; }
.td-title { font-size:26px; line-height:32px; font-weight:700; letter-spacing:-.4px; } .td-title.isdone { color:var(--muted); text-decoration:line-through; text-decoration-thickness:2px; }
.tsteps { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:16px 16px 0; padding:4px; border-radius:16px; background:var(--fill); }
.tstep { display:flex; align-items:center; justify-content:center; gap:7px; height:40px; border-radius:12px; font-size:14.5px; font-weight:600; color:var(--muted); }
.tstep i { width:9px; height:9px; border-radius:50%; background:var(--c); opacity:.45; }
.tstep.on { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.05); } .tstep.on i { opacity:1; box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.late { color:var(--red); }
.tnotes { margin:0 16px; padding:6px 14px 12px; border-radius:20px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.04); }
.tnote { display:flex; gap:10px; padding:10px 0; } .tnote + .tnote { border-top:.5px solid rgba(0,0,0,.07); }
.tn-b { flex:1; min-width:0; } .tn-h { display:flex; align-items:baseline; gap:8px; } .tn-h b { font-size:14.5px; font-weight:600; } .tn-h small { font-size:12px; color:var(--muted); }
.tn-t { font-size:15px; line-height:21px; color:var(--body); margin-top:2px; }
.tn-file { display:flex; align-items:center; gap:10px; margin-top:6px; font-size:14.5px; font-weight:500; } .tn-file .fi svg { width:28px; height:34px; }
.tn-empty { padding:12px 0; font-size:14px; color:var(--muted); }
.tn-add { display:flex; align-items:center; gap:8px; margin-top:8px; padding:4px 4px 4px 14px; border-radius:999px; background:var(--fill); }
.tn-add input { flex:1; height:36px; font-size:15px; background:none; border:0; outline:0; color:var(--ink); }
.tn-add .send { width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; }
.thist { margin:0 20px; position:relative; }
.th { display:flex; align-items:baseline; gap:10px; padding:7px 0; font-size:14px; color:var(--muted); position:relative; }
.th i { width:7px; height:7px; border-radius:50%; background:#C7C7CC; flex:none; transform:translateY(-1px); }
.th:not(:last-child)::after { content:''; position:absolute; left:3px; top:22px; bottom:-8px; width:1px; background:#DDDDE1; }
.th span { flex:1; } .th b { color:var(--ink); font-weight:500; } .th small { font-size:12px; }

/* Facilities queue. */
.seg { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:12px 16px 0; padding:4px; border-radius:14px; background:var(--fill); }
.seg button { height:36px; border-radius:10px; font-size:14.5px; font-weight:600; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:7px; }
.seg button.on { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.05); }
.seg b { min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--red); color:#fff; font-size:12px; display:grid; place-items:center; }
.qhint { padding:10px 20px 0; font-size:14px; color:var(--muted); line-height:20px; }
.sec h2 .qdot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:2px; }
.qcard { margin:0 16px 10px; padding:12px; border-radius:20px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05); position:relative; overflow:hidden; }
.qcard::before { content:''; position:absolute; left:0; top:14px; bottom:14px; width:3.5px; border-radius:0 3px 3px 0; background:var(--red); }
.qcard.q-onit::before { background:var(--amber); } .qcard.q-fixed::before { background:var(--green); } .qcard.q-fixed { opacity:.75; }
.qtop { display:flex; align-items:center; gap:12px; } .qtop .lb { flex:1; min-width:0; } .qtop .lt { font-size:16px; font-weight:600; display:flex; align-items:center; gap:6px; } .qtop .ls { font-size:13px; color:var(--muted); }
.qacts { display:flex; justify-content:space-between; gap:8px; margin-top:12px; }
.qacts .pill { height:38px; padding:0 16px; display:inline-flex; align-items:center; gap:6px; font-size:14.5px; }
.seg { box-sizing:border-box; height:46px; align-items:stretch; } .seg button { height:auto; min-height:0; padding:0; } .seg + .report { margin-top:14px; }

/* Search. */
.stop { display:flex; align-items:center; gap:12px; padding:calc(14px + env(safe-area-inset-top)) 16px 4px; }
.sclear { width:20px; height:20px; border-radius:50%; background:#AEAEB2; color:#fff; display:grid; place-items:center; flex:none; }
mark { background:rgba(59,130,246,.16); color:inherit; border-radius:4px; padding:0 2px; }
.chip small { font-size:12px; opacity:.6; margin-left:2px; }
.stime { font-size:12.5px; color:var(--muted); font-weight:400; flex:none; }
.sres { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; }
.sres svg { vertical-align:-2px; }
.sfaces { display:flex; gap:14px; padding:0 20px; overflow-x:auto; scrollbar-width:none; } .sfaces::-webkit-scrollbar { display:none; }
.sfaces button { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--ink); }
.sempty { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:70px 40px; color:var(--faint); } .sempty b { color:var(--ink); font-size:17px; margin-top:8px; } .sempty span { font-size:14.5px; color:var(--muted); }
.ls.sres { display:-webkit-box; } .sres svg { display:inline-block; vertical-align:-2px; } mark { padding:0 1px; }

/* In-app notification banner. */
.nbanner { position:fixed; z-index:200; left:10px; right:10px; top:calc(10px + env(safe-area-inset-top)); max-width:440px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:24px;
  background:rgba(250,250,248,.72); backdrop-filter:blur(24px) saturate(1.8); -webkit-backdrop-filter:blur(24px) saturate(1.8); box-shadow:0 12px 40px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.06);
  transform:translateY(-140%); transition:transform .45s cubic-bezier(.2,.9,.25,1.15), opacity .25s; cursor:pointer; touch-action:none; }
.nbanner.in { transform:none; } .nbanner.out { transform:translateY(-140%); opacity:0; transition:transform .3s ease-in, opacity .3s; }
.nbanner.urgent { box-shadow:0 12px 40px rgba(0,0,0,.18), 0 0 0 1.5px rgba(229,72,77,.5); }
.nb-b { flex:1; min-width:0; } .nb-h { display:flex; justify-content:space-between; gap:8px; } .nb-h b { font-size:15px; font-weight:600; } .nb-h small { font-size:12.5px; color:var(--muted); }
.nb-t { font-size:14.5px; line-height:19px; color:var(--body); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.urg { color:var(--red); font-weight:600; }

/* Lock screen demo. */
.pane.onb:has(.lock) { background:radial-gradient(120% 80% at 20% 0%, #7FA7D9 0%, #3D5E96 40%, #1B2440 100%); }
.lock { flex:1; display:flex; flex-direction:column; align-items:center; padding:calc(20px + env(safe-area-inset-top)) 10px calc(20px + env(safe-area-inset-bottom)); color:#fff; min-height:100%; }
.lk-date { font-size:19px; font-weight:600; opacity:.9; margin-top:14px; }
.lk-time { font-size:92px; line-height:96px; font-weight:700; letter-spacing:-2px; opacity:.95; }
.lk-list { width:100%; max-width:440px; display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:24px; }
.ln-card { position:relative; z-index:1; padding:11px 14px 12px; border-radius:22px; background:rgba(245,245,247,.62); backdrop-filter:blur(30px) saturate(1.6); -webkit-backdrop-filter:blur(30px) saturate(1.6); color:#111; box-shadow:0 4px 20px rgba(0,0,0,.08); }
.ln-card.sens { background:rgba(250,250,250,.82); }
.ln-top { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:rgba(0,0,0,.5); letter-spacing:.2px; }
.ln-app svg { display:block; border-radius:6px; } .ln-sens { color:#D8383E; } .ln-top small { margin-left:auto; font-size:12.5px; font-weight:500; letter-spacing:0; }
.ln-row { display:flex; align-items:center; gap:10px; margin-top:8px; }
.ln-body { flex:1; min-width:0; } .ln-body b { font-size:15px; font-weight:600; } .ln-body div { font-size:14.5px; line-height:19px; color:#2C2C30; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ln-thumb { width:40px; height:40px; border-radius:9px; background:linear-gradient(160deg,#E8E8EC,#CFCFD5); display:grid; place-items:center; flex:none; }
.ln-thumb .leak { width:13px; height:18px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:linear-gradient(#C9D6E3,#9FB2C6); }
.ln-acts { display:flex; gap:8px; margin-top:10px; } .ln-acts span { flex:1; text-align:center; padding:8px 0; border-radius:12px; background:rgba(0,0,0,.06); font-size:14px; font-weight:600; color:#111; }
.ln-stack { position:relative; margin-bottom:14px; }
.ln-stack i { position:absolute; left:10px; right:10px; bottom:-7px; height:20px; border-radius:0 0 18px 18px; background:rgba(245,245,247,.45); backdrop-filter:blur(20px); }
.ln-stack i + i { left:20px; right:20px; bottom:-13px; background:rgba(245,245,247,.3); z-index:-1; }
.lk-foot { margin-top:18px; } .lk-foot .pill { background:rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(20px); }
.side-status { padding:14px 0 10px; } .side-status .sbar { width:100%; margin:0; }
.nbanner.urgent { background:rgba(255,236,236,.82); box-shadow:0 12px 40px rgba(0,0,0,.18), 0 0 0 .5px rgba(229,72,77,.12); }

/* Meeting booking. */
.mt-who { display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px 0; }
.mt-p { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 12px 0 4px; border-radius:999px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.07); font-size:14.5px; font-weight:500; }
.mt-add { width:38px; height:38px; border-radius:50%; background:var(--fill); color:var(--blue); display:grid; place-items:center; }
.mt-days { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; padding:0 16px; }
.mt-days button { display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 0; border-radius:14px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06); }
.mt-days small { font-size:12px; font-weight:600; color:var(--muted); } .mt-days b { font-size:19px; font-weight:600; }
.mt-days button.on { background:var(--ink); } .mt-days button.on small { color:rgba(255,255,255,.7); } .mt-days button.on b { color:#fff; }
.mt-slots { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:0 16px; }
.mt-slots button { position:relative; height:40px; border-radius:12px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06); font-size:14px; font-weight:500; color:var(--ink); }
.mt-slots button.busy { color:var(--muted); background:transparent; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); }
.mt-slots button i, .mt-key i { position:absolute; top:6px; right:7px; width:6px; height:6px; border-radius:50%; background:var(--amber); }
.mt-slots button.on { background:var(--ink); color:#fff; box-shadow:none; }
.mt-key { position:relative; padding:8px 16px 0 30px; font-size:12.5px; color:var(--muted); } .mt-key i { left:18px; top:14px; right:auto; }
.li.off { opacity:.45; }
.mt-sum { position:sticky; bottom:0; display:flex; align-items:center; gap:12px; margin:18px 12px 0; padding:12px 12px 12px 16px; border-radius:22px; background:rgba(250,250,248,.86); backdrop-filter:blur(20px); box-shadow:0 10px 30px rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.06); }
.mt-sum > div { flex:1; min-width:0; } .mt-sum b { display:block; font-size:15px; font-weight:600; } .mt-sum small { font-size:13px; color:var(--muted); }
.mt-sum .pill { height:42px; padding:0 20px; }
/* Offline. */
.offbar { display:flex; align-items:center; gap:10px; margin:10px 16px 0; padding:10px 14px; border-radius:14px; background:var(--fill); font-size:13.5px; line-height:18px; color:var(--body); }
.offbar svg { flex:none; color:var(--muted); }
.chat-head .offbar { margin:8px 0 0; }

.chat-head .offbar { margin:8px 12px 0; }
.incal { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--muted); }

/* Home mode. */
.homecard { display:flex; align-items:center; gap:12px; margin:14px 16px 0; padding:14px; border-radius:20px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05); cursor:pointer; }
.homecard .lb { flex:1; min-width:0; } .homecard .lt { font-size:16px; font-weight:600; } .homecard .ls { font-size:13px; color:var(--muted); }
.hc-ic { width:40px; height:40px; border-radius:12px; background:var(--fill); color:var(--muted); display:grid; place-items:center; flex:none; }
.homecard.on { background:color-mix(in srgb, var(--green) 7%, var(--card)); } .homecard.on .hc-ic { background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green); }
.homebar { display:flex; align-items:flex-start; gap:10px; margin:10px 16px 0; padding:11px 14px; border-radius:14px; background:color-mix(in srgb, var(--green) 8%, var(--card)); font-size:13.5px; line-height:19px; color:var(--body); }
.homebar svg { flex:none; margin-top:1px; color:var(--green); } .homebar b { font-weight:600; color:var(--ink); }
.rooms { display:flex; gap:8px; padding:10px 16px 2px; overflow-x:auto; scrollbar-width:none; } .rooms::-webkit-scrollbar { display:none; }
.room { flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:128px; padding:10px 12px; border-radius:16px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); text-align:left; }
.room b { font-size:14px; font-weight:600; } .room small { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
.room .sw { color:#3B82F6; } .room .sw.idle { color:#C7C7CC; } .room .faces .av { width:20px; height:20px; }
/* Pricing. */
.hc-calc { margin:16px 16px 0; padding:18px 16px; border-radius:22px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06); }
.hc-q { font-size:14px; color:var(--muted); font-weight:500; } .hc-n { font-size:15px; color:var(--muted); margin-top:2px; } .hc-n b { font-size:30px; font-weight:700; color:var(--ink); letter-spacing:-.5px; margin-right:4px; }
#headcount { width:100%; margin:12px 0 14px; accent-color:#111; }
.hc-res { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .hc-res > div { display:flex; flex-direction:column; padding:12px; border-radius:16px; background:color-mix(in srgb, var(--green) 9%, var(--page)); }
.hc-res small { font-size:12px; color:var(--muted); font-weight:500; } .hc-res b { font-size:28px; font-weight:700; letter-spacing:-.5px; color:var(--ink); } .hc-res span { font-size:12.5px; color:var(--muted); }
.hc-res .vs { background:var(--fill); } .hc-res .vs b { color:var(--muted); text-decoration:line-through; text-decoration-thickness:2px; }
.plans { display:flex; flex-direction:column; gap:10px; margin:16px 16px 0; }
.plan { padding:14px 16px; border-radius:20px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06); transition:box-shadow .2s; }
.plan.on { box-shadow:0 0 0 2px var(--ink), 0 8px 24px rgba(0,0,0,.08); }
.pl-h { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; } .pl-h b { display:block; font-size:17px; font-weight:600; } .pl-h small { font-size:13px; color:var(--muted); }
.pl-p { text-align:right; } .pl-p b { font-size:24px; font-weight:700; letter-spacing:-.4px; }
.plan ul { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; } .plan li { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--body); } .plan li svg { color:var(--green); flex:none; }
.pl-cur { margin-top:10px; font-size:12.5px; font-weight:600; color:var(--green); }
.faq .lt { font-size:15px; font-weight:600; } .faq .ls { font-size:14px; }
/* Pings: status and search on one line. */
.pingtop { display:flex; align-items:center; gap:10px; margin:10px 16px 0; }
.pingtop .sbar { flex:1; width:auto; margin:0; height:42px; border-radius:21px; }
.sbtn { width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--card); color:var(--ink); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04); }
.sbtn:active { transform:scale(.95); }
.sbar span { line-height:20px; }

/* Settings: just a cog. */
.cog { width:46px; height:46px; margin:0 0 4px 8px; border-radius:50%; display:grid; place-items:center; color:var(--ink); background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05); }
.cog.on { background:var(--ink); color:#fff; } .cog:active { transform:scale(.95); }
.cog { background:none; box-shadow:none; } .cog.on { background:none; color:var(--ink); }

/* Staff board: pin and report. */
.bpin { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#C7C7CC; flex:none; }
.bpin.on { color:#fff; background:var(--blue); box-shadow:0 3px 10px rgba(59,130,246,.35); }
.bpin:active { transform:scale(.92); }
.brep { font-size:13px; font-weight:500; color:var(--faint); padding:4px 2px; }
.bpin.on { background:none; box-shadow:none; color:var(--blue); }
/* Staff board on a computer: a centred feed column, not stretched edge to edge. */
@media (min-width: 900px) {
  .pane:has(.kindnote) > * { max-width:680px; margin-left:auto; margin-right:auto; }
  .pane:has(.kindnote) .bpost { border-radius:22px; margin-top:12px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.04); }
  .pane:has(.kindnote) .bpost.pinned { background:color-mix(in srgb, var(--blue) 5%, var(--card)); }
  .pane:has(.kindnote) .bimg { max-height:360px; }
  .pane:has(.kindnote) .dock { width:100%; }
}
/* On a computer: single pages sit in a centred column, not stretched edge to edge. */
@media (min-width: 900px) {
  .main:not(.split) > .pane:not(.onb) > * { max-width:720px; margin-left:auto; margin-right:auto; }
  .main:not(.split) > .pane:not(.onb) > .bar { max-width:none; }
}
@media (min-width: 900px) {
  .main:not(.split) > .pane:not(.onb) > .bar { max-width:720px; }
  .main:not(.split) > .pane:not(.onb) > div[style*="height:200px"] { margin-left:auto !important; margin-right:auto !important; width:calc(100% - 32px); max-width:688px; }
}
@media (min-width: 900px) {
  .main:not(.split) > .pane:not(.onb) > * { max-width:min(720px, calc(100% - 32px)); margin-left:auto !important; margin-right:auto !important; }
}
/* Computer layout, final: every page fills the space beside the menu, content in one comfortable column. */
@media (min-width: 900px) {
  .main:not(.split) { display:flex; } .main:not(.split) > .pane { flex:1; width:100%; min-width:0; }
  .main:not(.split) > .pane:not(.onb) > * { max-width:min(960px, calc(100% - 48px)); }
  .pane:has(.kindnote) > * { max-width:min(960px, calc(100% - 48px)); }
}
@media (min-width: 900px) { .main:not(.split) > .pane:not(.onb) > .bar { max-width:min(960px, calc(100% - 48px)); } }

/* Right-hand panels: only on wide screens. */
.rail { display:none; }
@media (min-width: 1200px) {
  .main:not(.split) { display:flex; }
  .rail { display:flex; flex-direction:column; gap:14px; width:320px; flex:none; height:100vh; overflow-y:auto; padding:24px 20px 24px 0; scrollbar-width:none; }
  .rail::-webkit-scrollbar { display:none; }
  .main:not(.split) > .pane:not(.onb) > * { max-width:min(820px, calc(100% - 48px)); }
  .main:not(.split) > .pane:not(.onb) > .bar { max-width:min(820px, calc(100% - 48px)); }
}
.rp { padding:14px; border-radius:20px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.04); }
.rp-h { display:flex; align-items:center; gap:8px; width:100%; margin-bottom:8px; color:var(--ink); text-align:left; }
.rp-h b { flex:1; font-size:15px; font-weight:600; } .rp-h span { font-size:12.5px; font-weight:500; color:var(--blue); } .rp-h svg { color:var(--muted); }
.rp-sub { font-size:12.5px; color:var(--muted); margin:-2px 0 6px; }
.rp-row { display:flex; align-items:center; gap:10px; width:100%; padding:7px 4px; border-radius:12px; text-align:left; }
.rp-row:hover, .rp-post:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.rp-t { flex:1; min-width:0; display:flex; flex-direction:column; } .rp-t b { font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-t small { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rp-t small.late { color:var(--red); }
.rp-row .ring { width:16px; height:16px; margin:0 7px; flex:none; }
.rp-dot { min-width:30px; height:30px; border-radius:50%; background:color-mix(in srgb, var(--red) 12%, transparent); color:var(--red); font-size:13px; font-weight:700; display:grid; place-items:center; }
.rp-post { display:flex; flex-direction:column; gap:4px; width:100%; padding:9px 6px; border-radius:12px; text-align:left; }
.rp-post + .rp-post { border-top:.5px solid rgba(0,0,0,.06); border-radius:0 0 12px 12px; }
.rp-pin { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--blue); }
.rp-who { display:flex; align-items:center; gap:7px; } .rp-who b { font-size:13px; font-weight:600; color:var(--ink); } .rp-who small { font-size:12px; color:var(--muted); }
.rp-txt { font-size:13.5px; line-height:19px; color:var(--body); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rp-txt svg { vertical-align:-2px; }
.rp-txt svg { display:inline-block; }
.rp-blank { min-height:170px; background:color-mix(in srgb, var(--card) 55%, transparent); box-shadow:0 0 0 .5px rgba(0,0,0,.04); }
/* Computer: one even gutter everywhere. 20px between menu, page, panels and the screen edge; 16px between stacked cards. */
@media (min-width: 900px) {
  .main:not(.split) > .pane:not(.onb) { padding:0 20px; }
  .main:not(.split) > .pane:not(.onb) > *, .main:not(.split) > .pane:not(.onb) > .bar, .pane:has(.kindnote) > * { max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
  .main:not(.split) > .pane:not(.onb) > .bar { padding-left:0; padding-right:0; }
  .pane:has(.kindnote) .bpost { margin-top:16px; }
}
@media (min-width: 1200px) {
  .rail { width:clamp(320px, 24vw, 420px); padding:20px 20px 20px 0; gap:16px; }
}
@media (min-width: 900px) {
  .main:not(.split) > .pane:not(.onb) > .stats { padding:16px 0 0; gap:16px; }
  .main:not(.split) > .pane:not(.onb) > .homecard, .main:not(.split) > .pane:not(.onb) > .homecard + .list { margin-top:16px; }
  .main:not(.split) > .pane:not(.onb) .prof-acts { gap:16px; }
}
@media (min-width: 900px) { .main:not(.split) > .pane:not(.onb) > .homecard + .list { margin-top:16px !important; } }

/* Pings on a computer: three columns, even gaps. */
@media (min-width: 1200px) {
  .main.split .rail { padding-left:20px; }
  .main.split .pane.plist { width:340px; }
}
.rp-ic { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--muted); background:var(--fill); }
/* Tiles lift a little under the mouse (computers only). */
@media (hover: hover) and (pointer: fine) {
  .rp, .bpost, .stat, .homecard, .qcard, .proj, .list, .pa, .room, .todaycard, .card, .report, .invlink, .ready-card {
    transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
  }
  .rp:hover, .bpost:hover, .stat:hover, .homecard:hover, .qcard:hover, .proj:hover, .list:hover, .pa:hover, .room:hover, .todaycard:hover, .report:hover, .invlink:hover, .ready-card:hover {
    transform:translateY(-3px);
    box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.09);
  }
  .pa.dark:hover { box-shadow:0 14px 32px rgba(0,0,0,.22); }
}

/* Staff board: two columns of posts on wide screens. */
@media (min-width: 1200px) {
  .bcols { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; margin-top:16px; }
  .bcol { display:flex; flex-direction:column; gap:16px; min-width:0; }
  .pane:has(.kindnote) .bcol .bpost { margin-top:0; }
  .bcol .bimg { max-height:260px; }
}

.rp-st { flex:none; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--c); }
.rp-st::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--c); }
.rp-new { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:38px; margin-top:8px; border-radius:12px; background:var(--fill); font-size:14px; font-weight:600; color:var(--ink); }
.rp-new:hover { background:color-mix(in srgb, var(--ink) 9%, var(--fill)); }

/* Projects on a computer: two columns of cards, same 16px gaps. */
@media (min-width: 900px) {
  .projgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
  .projgrid .proj { margin:0; }
}

/* Parcels. */
.parcelcard { min-width:260px; }
.parcelcard .k { color:#A0703C; display:flex; align-items:center; gap:5px; }
.pc-top { display:flex; align-items:center; gap:12px; }
.pc-art { width:58px; height:58px; border-radius:16px; background:linear-gradient(160deg,#FBF4EA,#F1E4CF); display:grid; place-items:center; flex:none; overflow:hidden; }
.pc-art img { width:100%; height:100%; object-fit:cover; }
.pc-art.cam { background:var(--fill); color:var(--muted); }
.pc-b .w { font-size:16px; font-weight:600; } .pc-b .d { font-size:13px; color:var(--muted); }
.pc-st { display:flex; align-items:center; gap:7px; margin-top:12px; padding-top:10px; border-top:.5px solid rgba(0,0,0,.07); font-size:13.5px; font-weight:500; color:var(--body); }
.pc-st .pill { margin-left:auto; height:34px; padding:0 14px; display:inline-flex; align-items:center; gap:6px; }
.pc-dot { width:8px; height:8px; border-radius:50%; background:var(--c); }
.parcelcard.got { opacity:.85; }
.pc-pick { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:6px 12px 4px; }
.pc-opt { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 8px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.07); }
.pc-opt b { font-size:14px; font-weight:600; } .pc-opt small { font-size:12px; color:var(--muted); }
.pc-opt.on { box-shadow:0 0 0 2px var(--ink); }

/* Planner. */
.wk { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:14px 16px 0; }
.wk button { display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 0 8px; border-radius:14px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06); }
.wk small { font-size:12px; font-weight:600; color:var(--muted); } .wk b { font-size:18px; font-weight:600; }
.wk i { width:5px; height:5px; border-radius:50%; background:var(--blue); } .wk i.no { background:transparent; }
.wk button.on { background:var(--ink); } .wk button.on small { color:rgba(255,255,255,.7); } .wk button.on b { color:#fff; } .wk button.on i { background:#fff; }
.ev { display:flex; align-items:center; gap:12px; margin:0 16px 10px; padding:12px 14px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.04); cursor:pointer; position:relative; overflow:hidden; }
.ev::before { content:''; position:absolute; left:0; top:12px; bottom:12px; width:3.5px; border-radius:0 3px 3px 0; background:var(--c); }
.ev-t { width:52px; flex:none; } .ev-t b { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.ev-b { flex:1; min-width:0; } .ev-k { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--c); text-transform:uppercase; letter-spacing:.3px; }
.ev-me { text-transform:none; letter-spacing:0; color:var(--ink); background:var(--fill); padding:1px 8px; border-radius:999px; font-weight:500; }
.ev-n { font-size:16px; font-weight:600; margin-top:1px; } .ev-w { display:flex; align-items:center; gap:4px; font-size:13px; color:var(--muted); margin-top:1px; }
.ev-who { flex:none; } .ev-all { font-size:12px; font-weight:600; color:var(--blue); background:color-mix(in srgb, var(--blue) 10%, transparent); padding:4px 10px; border-radius:999px; }
.ev-ic { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); }
.nbanner .ev-ic { width:40px; height:40px; }
@media (hover: hover) and (pointer: fine) { .ev { transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; } .ev:hover { transform:translateY(-3px); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.09); } }
@media (min-width: 900px) { .main:not(.split) > .pane:not(.onb) > .ev { margin-bottom:16px; } .main:not(.split) > .pane:not(.onb) > .wk { padding:16px 0 0; } }
.sheet > *, .sheet .chips { flex-shrink:0; }

/* Planner: month of squares. */
.cal { margin:12px 16px 0; padding:14px; border-radius:22px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05); }
.cal-top { display:flex; align-items:center; gap:6px; margin-bottom:10px; } .cal-top b { font-size:18px; font-weight:700; }
.cal-arrow { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:var(--ink); }
.cal-arrow:hover, .cal-today:hover { background:var(--fill); }
.cal-today { height:32px; padding:0 12px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ink); }
.cal-wd, .cal-g { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-wd span { text-align:center; font-size:12px; font-weight:600; color:var(--muted); padding-bottom:6px; }
.cal-d { position:relative; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:6px; border-radius:12px; background:var(--page); min-width:0; overflow:hidden; text-align:left; }
.cal-d.out { opacity:.4; }
.cal-n { font-size:14px; font-weight:600; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; flex:none; }
.cal-d.today .cal-n { background:var(--red); color:#fff; }
.cal-d.sel { box-shadow:inset 0 0 0 2px var(--ink); }
.cal-ev { display:none; }
.cal-dots { display:flex; gap:3px; margin-top:4px; } .cal-dots u { width:6px; height:6px; border-radius:50%; }
.cal-key { display:flex; flex-wrap:wrap; gap:14px; padding:12px 20px 0; font-size:12.5px; color:var(--muted); }
.cal-key span { display:inline-flex; align-items:center; gap:6px; } .cal-key u { width:8px; height:8px; border-radius:50%; }
.cal-empty { margin:0 16px; padding:18px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06); font-size:14.5px; color:var(--muted); }
@media (min-width: 900px) {
  .main:not(.split) > .pane:not(.onb) > .cal { margin-top:16px; padding:18px; }
  .cal-wd, .cal-g { gap:6px; }
  .cal-d { aspect-ratio:auto; min-height:104px; align-items:stretch; padding:6px; }
  .cal-n { width:24px; height:24px; font-size:13px; margin-bottom:4px; }
  .cal-dots { display:none; }
  .cal-ev { display:flex; flex-direction:column; gap:3px; min-width:0; }
  .cal-ev i { font-style:normal; display:block; font-size:12px; line-height:15px; padding:2px 6px; border-radius:6px; color:var(--ink); background:color-mix(in srgb, var(--c) 14%, transparent); border-left:3px solid var(--c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cal-ev i b { font-weight:600; color:var(--c); }
  .cal-ev em { font-style:normal; font-size:12px; color:var(--muted); padding-left:4px; }
}
@media (hover: hover) and (pointer: fine) { .cal-d { transition:transform .2s ease, box-shadow .2s ease; } .cal-d:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.08); } .cal-d.sel:hover { box-shadow:inset 0 0 0 2px var(--ink), 0 8px 18px rgba(0,0,0,.08); } }
@media (min-width: 900px) {
  .cal-ev i { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; padding:3px 6px; }
  .cal-ev i b { display:block; font-size:12px; }
  .cal-d { min-height:118px; }
}
/* Planner squares: a little lift, always, and more under the mouse. */
.cal-d { background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.05); }
.cal-d.out { box-shadow:none; background:var(--page); }
.cal-d.sel { box-shadow:inset 0 0 0 2px var(--ink), 0 2px 6px rgba(0,0,0,.05); }
.cal { background:color-mix(in srgb, var(--card) 40%, var(--page)); }
@media (hover: hover) and (pointer: fine) {
  .cal-d:not(.out):hover { transform:translateY(-3px); box-shadow:0 0 0 .5px rgba(0,0,0,.05), 0 12px 24px rgba(0,0,0,.1); }
  .cal-d.sel:hover { box-shadow:inset 0 0 0 2px var(--ink), 0 12px 24px rgba(0,0,0,.1); }
}
/* Planner day list: two tiles per row on a computer. */
@media (min-width: 900px) {
  .evgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .evgrid .ev, .evgrid .cal-empty { margin:0 !important; }
  .evgrid .cal-empty { grid-column:1 / -1; }
}
/* Planner: calm events. White with a coloured line on one side, no colour blocks. */
@media (min-width: 900px) {
  .cal-ev i { background:var(--card); color:var(--ink); border-left:3px solid var(--c); box-shadow:0 0 0 .5px rgba(0,0,0,.07); }
  .cal-ev i b { color:var(--muted); font-weight:500; }
}
.ev-k { color:var(--muted); }
.ev-all { color:var(--muted); background:var(--fill); }
/* Status bar: text sits in the exact middle. */
.sbar { padding-top:0; padding-bottom:0; line-height:1; }
.sbar span { display:flex; align-items:center; height:100%; line-height:1.2; padding:0; margin:0; }
.sbar svg { flex:none; display:block; }

/* Report drawer. */
.sheet.float .rbody { overflow-y:auto; scrollbar-width:none; } .sheet.float .rbody::-webkit-scrollbar { display:none; }
.rkinds { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:4px 12px 10px; }
.rkinds button { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; border-radius:14px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.07); color:var(--ink); }
.rkinds button span { font-size:12.5px; font-weight:500; }
.rkinds button.on { background:var(--ink); color:#fff; box-shadow:none; }
.sheet.float .rbody { flex:1 1 auto; min-height:0; } .sheet.float #issue { min-height:56px; }
.sheet.float #issue { height:60px !important; min-height:0 !important; padding:4px 0 !important; }
/* Menu like ChatGPT: black text, clean bold icons, even rhythm. */
.nav { color:var(--ink); font-weight:500; letter-spacing:-.1px; }
.nav svg { width:21px; height:21px; flex:none; }

/* Picture icons */
.artgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:6px 14px 18px; }
.artpick { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:16px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.07); }
.artpick:active { transform:scale(.96); }
.artpick .art svg { width:62px; height:62px; display:block; }
.artpick small { font-size:12px; color:var(--muted); text-align:center; line-height:14px; }
.artmsg { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 18px 12px; border-radius:22px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 4px 14px -6px rgba(0,0,0,.12); }
.artmsg .art svg { width:110px; height:110px; display:block; }
.artmsg b { font-size:14px; font-weight:600; }

/* + menu: quiet black icons in two labelled rows. */
.glassmenu.gm2 { display:block; padding:12px 8px 10px; }
.gm2 .gml { font-size:12px; font-weight:600; letter-spacing:.3px; color:var(--muted); padding:0 10px 4px; }
.gm2 .gmr { display:grid; grid-template-columns:repeat(6,1fr); gap:2px; }
.gm2 .gms { height:.5px; background:rgba(0,0,0,.08); margin:8px 10px 10px; }
.gm2 .gm { gap:6px; padding:8px 0 6px; border-radius:12px; font-size:12px; color:var(--ink); }
.gm2 .gm svg { color:var(--ink); }
.gm2 .gm:hover { background:rgba(0,0,0,.045); }

.gm2 .gpic .art svg { width:30px; height:30px; display:block; }
.gm2 .gpic span:last-child { font-size:12px; line-height:12px; text-align:center; color:var(--body); max-width:56px; }
.gm2 { max-height:min(70vh, 520px); overflow-y:auto; scrollbar-width:none; } .gm2::-webkit-scrollbar { display:none; }

/* Pictures row: one line that scrolls sideways if it needs to */
.gm2 .gmr.pics { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; } .gm2 .gmr.pics::-webkit-scrollbar { display:none; }
.gm2 .gmr.pics .gm { flex:0 0 calc((100% - 10px) / 6); }
.gm2 .gmr.ask { grid-template-columns:repeat(6,1fr); }

/* 1. Reaction pills */
.reacts { gap:6px; }
.rx { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px 0 8px; border-radius:999px; background:var(--card); box-shadow:0 0 0 1px rgba(0,0,0,.08); font-size:13px; font-weight:600; color:var(--body); font-variant-numeric:tabular-nums; }
.rx i { font-style:normal; font-size:15px; line-height:1; }
.rx.mine { background:color-mix(in srgb, var(--blue) 8%, var(--card)); box-shadow:0 0 0 1.5px color-mix(in srgb, var(--blue) 55%, transparent); color:#1F57C8; }
.rx.add { padding:0 8px; color:var(--muted); }
.rx:hover { box-shadow:0 0 0 1px rgba(0,0,0,.18); }
.rxpick { display:flex; justify-content:space-around; padding:16px 12px 20px; } .rxpick button { font-size:28px; width:44px; height:44px; border-radius:50%; } .rxpick button:hover { background:rgba(0,0,0,.05); }
/* 2. Space call screen */
.sheet.float:has(.call) { background:#1F1F22; color:#fff; }
.sheet.float:has(.call) .grab { display:none; }
.call { padding:22px 20px 22px; }
.call-h { display:flex; flex-direction:column; gap:3px; }
.call-live { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.6); }
.call-live i { width:7px; height:7px; border-radius:50%; background:#3B82F6; box-shadow:0 0 0 3px rgba(59,130,246,.3); }
.call-h b { font-size:20px; font-weight:600; letter-spacing:-.3px; } .call-h small { font-size:13.5px; color:rgba(255,255,255,.6); }
.call-faces { display:flex; justify-content:center; flex-wrap:wrap; gap:18px; margin:26px 0 28px; }
.cf { display:flex; flex-direction:column; align-items:center; gap:8px; } .cf small { font-size:12.5px; color:rgba(255,255,255,.75); }
.cf .av { box-shadow:0 0 0 3px #1F1F22; font-size:22px !important; }
.cf.talk .av { box-shadow:0 0 0 3px #1F1F22, 0 0 0 6px #3B82F6; animation:talk 1.6s ease-in-out infinite; }
@keyframes talk { 50% { box-shadow:0 0 0 3px #1F1F22, 0 0 0 9px rgba(59,130,246,.45); } }
.call-bar { display:flex; justify-content:center; gap:12px; }
.cb { width:60px; height:60px; border-radius:22px; display:grid; place-items:center; background:#3A3A3E; color:#fff; }
.cb:hover { background:#46464B; } .cb.off { background:#F8D7D8; color:#C9383D; } .cb.on { background:#fff; color:#1F1F22; }
.cb.end { width:84px; border-radius:30px; background:#E5484D; } .cb.end:hover { background:#D73C41; }
/* 3. Chat tool row */
.tools { display:flex; gap:2px; padding:3px; margin-left:auto; border-radius:12px; background:var(--fill); }
.tools button { width:32px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--body); }
.tools button:hover { background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.chat-top .tools + .space-btn { margin-left:8px; }

/* Phone tab bar: a black floating pill, the current page shows its name. */
.tabbar { display:none; }
@media (max-width: 899px) {
  .tabbar { position:fixed; z-index:40; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:center; gap:2px; padding:6px; border-radius:999px; background:#141416; box-shadow:0 12px 30px -8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
  .tabbar a { position:relative; display:flex; align-items:center; gap:7px; height:44px; padding:0 14px; border-radius:999px; color:rgba(255,255,255,.62); text-decoration:none; font-size:14px; font-weight:600; -webkit-tap-highlight-color:transparent; }
  .tabbar a span { display:none; }
  .tabbar a.on { background:#2E2E32; color:#fff; padding:0 16px 0 14px; } .tabbar a.on span { display:inline; }
  .tabbar a i { position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:#E5484D; box-shadow:0 0 0 2px #141416; }
  .tabbar a.on i { right:auto; left:28px; }
}
@media (max-width: 899px) {
  .main:has(+ .tabbar) .pane { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  .tabbar a i { right:9px; }
}
/* Later and Rules */
.pg-sub { margin:6px 20px 4px; font-size:15px; line-height:21px; color:var(--muted); max-width:62ch; }
.lt-group { padding:2px 0; }
.lt-row { display:flex; align-items:flex-start; gap:12px; padding:13px 14px; } .lt-row + .lt-row { border-top:.5px solid var(--hair); }
.lt-row .lb { flex:1; min-width:0; } .lt-row .lt { font-size:15.5px; font-weight:600; } .lt-row .ls { font-size:13px; color:var(--muted); margin-top:1px; }
.lt-why { display:inline-flex; align-items:center; gap:5px; margin-top:7px; font-size:12px; color:var(--body); padding:3px 8px 3px 6px; border-radius:7px; background:var(--soft); }
.lt-cal { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none; box-shadow:inset 0 0 0 1px var(--hair); }
.lt-r { text-align:right; flex:none; } .lt-r b { display:block; font-size:13.5px; font-weight:600; white-space:nowrap; }
.lt-acts { display:flex; gap:6px; margin-top:8px; justify-content:flex-end; }
.lt-acts button { height:28px; padding:0 10px; border-radius:8px; font-size:12.5px; font-weight:600; box-shadow:inset 0 0 0 1px var(--hair); }
.lt-acts button:first-child { background:var(--ink); color:#fff; box-shadow:none; }
.rl-ic { width:24px; display:grid; place-items:center; flex:none; }
.rl-t { flex:1; min-width:0; font-size:15px; line-height:20px; padding:13px 0; } .rl-t b { font-weight:600; }
.rl-t small { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); margin-top:3px; flex-wrap:wrap; }
.rl-t small .stk { display:flex; } .rl-t small .av { margin-left:-4px; box-shadow:0 0 0 1.5px var(--card); } .rl-t small .av:first-child { margin-left:0; }
.rl-words span { padding:2px 8px; border-radius:6px; box-shadow:inset 0 0 0 1px var(--hair); color:var(--body); }
.rl-v { margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:13.5px; color:var(--muted); flex:none; }
.rl-own .rl-del { width:30px; height:30px; display:grid; place-items:center; color:var(--muted); margin-left:auto; } .rl-own .rl-del:hover { color:var(--red); }
.rl-own .switch { margin-left:8px; cursor:pointer; }
.rl-build { padding:6px 14px 12px; }
.rl-line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0; font-size:15px; } .rl-line + .rl-line { border-top:.5px solid var(--hair); }
.rl-line select, .rl-line input:not([type]) { height:36px; padding:0 10px; border-radius:10px; box-shadow:inset 0 0 0 1px var(--hair); background:var(--page); font:inherit; font-size:14.5px; color:var(--ink); }
.rl-line input:not([type]) { flex:1; min-width:180px; }
.rl-check input { width:18px; height:18px; accent-color:var(--ink); }
.seg { display:inline-flex; padding:3px; border-radius:11px; background:var(--fill); } .seg button { height:30px; padding:0 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--muted); } .seg button.on { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.1); }

/* Premium pass: Later and Rules share one page shell, lifted cards and soft shading. */
.pg { max-width:760px; padding:8px 28px 56px; }
.pg-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:18px 4px 6px; }
.pg-head h1 { font-size:32px; line-height:38px; letter-spacing:-.5px; }
.pg .pg-sub { margin:8px 0 0; font-size:15px; line-height:22px; color:var(--muted); max-width:52ch; }
.pg-stat { flex:none; display:flex; align-items:center; gap:12px; padding:12px 16px 12px 14px; border-radius:16px; background:linear-gradient(160deg,#2C2C30,#161618); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px -10px rgba(0,0,0,.45); }
.pg-stat b { font-size:30px; line-height:30px; font-weight:600; letter-spacing:-.5px; }
.pg-stat span { font-size:13.5px; font-weight:600; line-height:17px; } .pg-stat small { display:block; font-weight:400; color:rgba(255,255,255,.6); font-size:12px; }
.pg .gl { display:flex; align-items:center; gap:8px; margin:28px 6px 10px; font-size:13px; font-weight:600; color:var(--muted); }
.pg .gl span { min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--fill); color:var(--body); font-size:12px; display:grid; place-items:center; }
.pg .group { margin:0; border-radius:20px; background:linear-gradient(180deg,#FFFFFF,#FBFBF9); box-shadow:inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04), 0 10px 26px -12px rgba(0,0,0,.14); overflow:hidden; }
.pg .group + .group { margin-top:14px; }
.pg .grow-row { min-height:58px; padding:0 18px; gap:14px; }
.pg .grow-row:hover { background:rgba(0,0,0,.018); }
.pg .lt-row { padding:16px 18px; gap:14px; transition:background .15s; } .pg .lt-row:hover { background:rgba(0,0,0,.018); }
.pg .lt-why { background:#F3F3F5; box-shadow:inset 0 1px 1px rgba(0,0,0,.04); }
.pg .lt-r b { font-size:14px; }
.pg .lt-acts button { height:30px; padding:0 12px; border-radius:9px; }
.pg .lt-acts button:first-child { background:linear-gradient(180deg,#2C2C30,#151517); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px -2px rgba(0,0,0,.35); }
.pg .lt-acts button:last-child { background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.04); }
.pg .lt-cal { background:#fff; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08); }
.pg .rl-build { padding:8px 18px 14px; }
.pg .rl-line select, .pg .rl-line input:not([type]) { background:#F6F6F4; box-shadow:inset 0 1px 2px rgba(0,0,0,.06), inset 0 0 0 .5px rgba(0,0,0,.08); }
.pg .rl-line .pill.dark { box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px -4px rgba(0,0,0,.4); }
.pg-foot { margin:18px 6px 0; font-size:12.5px; color:var(--muted); } .pg-foot a { color:var(--ink); font-weight:600; }
.rp-help { padding:16px 18px; }
.rp-hh b { font-size:15px; font-weight:650; }
.rp-step { display:flex; gap:12px; padding:12px 0 2px; } .rp-step > span { width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--ink); color:#fff; }
.rp-step b { display:block; font-size:14px; font-weight:600; } .rp-step small { font-size:12.5px; color:var(--muted); line-height:17px; }
.rp-now > div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; font-size:13.5px; } .rp-now > div + div { border-top:.5px solid var(--hair); }
.rp-now span { color:var(--muted); } .rp-now b { font-weight:600; } .rp-faces { display:flex; } .rp-faces .av { margin-left:-5px; box-shadow:0 0 0 2px var(--card); } .rp-faces .av:first-child { margin-left:0; }
@media (max-width: 899px) { .pg { padding:4px 16px 40px; } .pg-head { flex-direction:column; align-items:flex-start; gap:14px; } }
.pg .switch:not(.off) { background:var(--ink); }

/* Calm pings: quiet line, group by, open items, casual chats. */
.grpby { display:flex; align-items:center; gap:4px; padding:2px 16px 8px 20px; font-size:13px; color:var(--muted); }
.grpby span { margin-right:6px; }
.grpby button { height:28px; padding:0 11px; border-radius:9px; font-size:13px; font-weight:500; color:var(--body); }
.grpby button:hover { background:rgba(0,0,0,.04); }
.grpby button.on { background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06); }
.quietline { display:flex; align-items:flex-start; gap:9px; margin:2px 16px 8px; padding:10px 14px; border-radius:14px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04); font-size:13px; line-height:18px; color:var(--muted); }
.quietline svg { flex:none; margin-top:2px; color:var(--body); } .quietline b { color:var(--ink); font-weight:600; }
.row .dcol .qdot { width:8px; height:8px; border-radius:50%; background:#B9B9BE; }
.ghead { display:flex; align-items:baseline; gap:8px; padding:18px 20px 4px 30px; font-size:13px; font-weight:600; color:var(--muted); }
.ghead small { font-weight:500; color:var(--faint, #B5B5B9); }
.openchip { display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:3px 9px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--body); background:var(--fill); }
.casualbar { display:flex; align-items:center; gap:12px; width:calc(100% - 32px); margin:18px 16px 6px; padding:12px 14px; border-radius:16px; text-align:left; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04); }
.cb-ic { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--body); background:var(--fill); flex:none; }
.cb-t { flex:1; min-width:0; } .cb-t b { display:block; font-size:15px; font-weight:600; } .cb-t small { display:block; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-n { font-size:12.5px; font-weight:600; color:var(--muted); }
.cb-chev { color:var(--muted); transition:transform .2s; } .casualbar.open .cb-chev { transform:rotate(90deg); }
.row.casual .name { font-weight:500 !important; } .row.casual .prev { color:var(--muted) !important; }
.openbox { margin:0 12px 10px; padding:10px 12px 6px; border-radius:16px; background:var(--card); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06); }
.ob-h { display:flex; align-items:baseline; justify-content:space-between; padding:0 2px 6px; } .ob-h b { font-size:14px; font-weight:600; } .ob-h span { font-size:12.5px; color:var(--muted); }
.ob-i { display:flex; align-items:center; gap:10px; padding:8px 2px; border-top:.5px solid var(--hair); }
.ob-k { flex:none; font-size:12px; font-weight:600; padding:2px 8px; border-radius:7px; color:var(--body); background:var(--fill); }
.ob-k.decision { color:#fff; background:#3A3A3F; }
.ob-tx { flex:1; min-width:0; } .ob-tx b { display:block; font-size:14px; font-weight:500; line-height:19px; } .ob-tx small { font-size:12.5px; color:var(--muted); }
.ob-i .pill { height:30px; padding:0 12px; font-size:13px; flex:none; }
[data-hold].flash { animation:obflash 1.4s ease; }
@keyframes obflash { 0%, 40% { box-shadow:0 0 0 3px rgba(58,58,63,.35); } 100% { box-shadow:none; } }
@media (prefers-reduced-motion: reduce) { [data-hold].flash { animation:none; } .cb-chev { transition:none; } }

/* Broadcasts, Handover, Activity */
.pg-btn { height:40px; padding:0 18px; font-size:14px; border-radius:12px; }
.pg-right { flex:none; display:flex; align-items:center; gap:12px; }
.pg-right .pg-btn { background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.05); }
@media (max-width: 899px) { .pg-right { flex-direction:row-reverse; } }
.bc-list { display:flex; flex-direction:column; gap:14px; }
.bc-row, .ho-card { padding:18px 20px 16px; border-radius:20px; background:linear-gradient(180deg,#FFFFFF,#FBFBF9); box-shadow:inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04), 0 10px 26px -14px rgba(0,0,0,.14); }
.bc-row.need, .ho-card.need { box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px #2C2C30, 0 10px 26px -14px rgba(0,0,0,.2); }
.bc-top { display:flex; align-items:center; gap:12px; }
.bc-who { flex:1; min-width:0; } .bc-who b { display:block; font-size:14.5px; font-weight:600; } .bc-who small { font-size:12.5px; color:var(--muted); }
.bc-flag { flex:none; font-size:12px; font-weight:600; color:var(--ink); padding:3px 9px; border-radius:8px; background:#EDEDEA; }
.bc-title { margin:14px 0 4px; font-size:18px; line-height:24px; font-weight:650; letter-spacing:-.2px; }
.bc-text { margin:0; font-size:15px; line-height:22px; color:var(--body); }
.bc-foot { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-top:14px; padding-top:12px; border-top:.5px solid var(--hair); }
.bc-prog { width:90px; height:6px; border-radius:3px; background:#ECECE9; overflow:hidden; } .bc-prog i { display:block; height:100%; border-radius:3px; background:#2C2C30; }
.bc-count { font-size:13px; font-weight:600; color:var(--body); }
.bc-link { font-size:13px; font-weight:600; color:var(--muted); background:none; padding:4px 2px; } .bc-link:hover { color:var(--ink); }
.bc-all { font-size:13px; color:var(--muted); }
.bc-got { margin-left:auto; height:36px; padding:0 18px; font-size:14px; }
.bc-left { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.bc-p { display:inline-flex; align-items:center; gap:7px; padding:3px 10px 3px 3px; border-radius:999px; background:#F3F3F5; font-size:13px; font-weight:500; }
.bc-new { padding:18px 20px; margin-top:18px !important; }
.bc-new-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .bc-new-h b { font-size:16px; font-weight:650; }
.bc-to { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; } .bc-to > span { font-size:13px; font-weight:600; color:var(--muted); width:100%; }
.bc-field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; } .bc-field > span { font-size:13px; font-weight:600; color:var(--muted); }
.bc-field input, .bc-field textarea, .bc-field select { width:100%; font:inherit; font-size:15.5px; line-height:22px; color:var(--ink); padding:10px 12px; border-radius:12px; background:#fff; border:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); resize:vertical; }
.bc-field input:focus, .bc-field textarea:focus, .bc-field select:focus { outline:none; box-shadow:inset 0 0 0 1.5px var(--ink); }
.bc-send { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .bc-send .pill { height:40px; padding:0 18px; font-size:14px; }
.bc-ack { display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:var(--body); background:none; }
.bc-ack i { width:38px; height:22px; border-radius:11px; background:#D8D8DC; position:relative; transition:background .2s; }
.bc-ack i::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.bc-ack.on i { background:#2C2C30; } .bc-ack.on i::after { transform:translateX(16px); }
.ho-read { flex:none; display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--body); } .ho-read.wait { color:var(--muted); font-weight:500; }
.ho-sec { margin-top:14px; } .ho-sec b { font-size:13px; font-weight:600; color:var(--muted); }
.ho-sec ul { margin:6px 0 0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:4px; font-size:15px; line-height:21px; color:var(--ink); }
.ho-note { margin:14px 0 0; padding:10px 12px; border-radius:12px; background:#FFFFFF; font-size:14.5px; line-height:21px; color:var(--body); }
.ho-acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; } .ho-acts .pill { height:38px; padding:0 16px; font-size:14px; }
.ho-picks { display:flex; flex-direction:column; gap:6px; }
.ho-pick { display:flex; align-items:center; gap:10px; text-align:left; font-size:14.5px; line-height:20px; padding:8px 10px; border-radius:10px; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); color:var(--ink); }
.ho-pick i { width:20px; height:20px; border-radius:6px; flex:none; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25); color:transparent; }
.ho-pick.on i { background:#2C2C30; box-shadow:none; color:#fff; }
.ho-none { font-size:13.5px; color:var(--muted); }
.act-chips { display:flex; flex-wrap:wrap; gap:8px; margin:18px 4px 0; }
.act-group { overflow:hidden; }
.act-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 18px; background:none; color:inherit; } .act-row + .act-row { border-top:.5px solid var(--hair); } .act-row:hover { background:rgba(0,0,0,.018); }
.act-t { width:46px; flex:none; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.act-b { flex:1; min-width:0; } .act-b > span { display:block; font-size:14.5px; line-height:20px; } .act-b b { font-weight:600; } .act-b small { display:block; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-k { flex:none; font-size:12px; font-weight:600; color:var(--body); padding:2px 8px; border-radius:7px; background:#F3F3F5; }
@media (max-width: 899px) { .act-k { display:none; } .bc-row, .ho-card { padding:16px; } .bc-got { margin-left:0; width:100%; } }

/* Later item, opened as a floating box */
.lt-row[data-act="laterOpen"] { cursor:pointer; }
.lt-row[data-act="laterOpen"]:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; border-radius:14px; }
@media (min-width: 900px) { .sheet.ltd { width:560px; bottom:auto; max-height:88vh; } }
.sheet.ltd { background:#F6F6F8; }
.ltd-body { padding:6px 22px 18px; scrollbar-width:none; } .ltd-body::-webkit-scrollbar { display:none; }
.ltd-hero { display:flex; align-items:center; gap:14px; padding:8px 0 16px; }
.ltd-hero h2 { margin:0; font-size:22px; line-height:28px; font-weight:650; letter-spacing:-.3px; } .ltd-hero span { font-size:14px; color:var(--muted); }
.ltd-cal { width:52px; height:52px; border-radius:50%; flex:none; display:grid; place-items:center; background:#fff; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.08); }
.ltd-do { padding:16px 18px; border-radius:18px; background:linear-gradient(160deg,#2C2C30,#161618); color:#fff; box-shadow:0 10px 24px -12px rgba(0,0,0,.45); }
.ltd-do b { font-size:12.5px; font-weight:600; color:rgba(255,255,255,.6); } .ltd-do p { margin:6px 0 6px; font-size:17px; line-height:24px; font-weight:550; } .ltd-do small { font-size:13px; color:rgba(255,255,255,.7); }
.ltd-sec { margin-top:20px; }
.ltd-h { display:flex; align-items:baseline; justify-content:space-between; margin:0 2px 8px; font-size:13px; font-weight:600; color:var(--muted); } .ltd-h span { font-weight:500; }
.ltd-steps { border-radius:16px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.07), 0 4px 14px -6px rgba(0,0,0,.1); overflow:hidden; }
.ltd-step { display:flex; align-items:center; gap:12px; width:100%; min-height:50px; padding:10px 14px; text-align:left; font-size:15px; line-height:21px; background:none; color:var(--ink); }
.ltd-step + .ltd-step { border-top:.5px solid var(--hair); }
.ltd-step i { width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25); color:transparent; }
.ltd-step.on i { background:#2C2C30; box-shadow:none; color:#fff; } .ltd-step.on span { color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(0,0,0,.25); }
.ltd-why { display:flex; gap:9px; align-items:flex-start; padding:12px 14px; border-radius:14px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.07); font-size:14.5px; line-height:21px; color:var(--body); } .ltd-why svg { flex:none; margin-top:3px; }
.ltd-link { display:inline-block; margin:8px 2px 0; font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; } .ltd-link:hover { color:var(--ink); }
.ltd-came { margin:0 2px 10px; font-size:14.5px; color:var(--body); }
.ltd-msgs { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.ltd-m { max-width:85%; padding:9px 12px; border-radius:14px; background:#E9E9EC; font-size:14.5px; line-height:20px; } .ltd-m.me { align-self:flex-end; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.08); }
.ltd-m small { display:block; font-size:12px; color:var(--muted); margin-bottom:2px; }
.ltd-links { display:flex; flex-direction:column; gap:8px; }
.ltd-go { display:flex; align-items:center; gap:10px; width:100%; min-height:46px; padding:0 14px; border-radius:14px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 2px 8px -4px rgba(0,0,0,.1); font-size:14.5px; font-weight:500; text-align:left; color:var(--ink); }
.ltd-go svg:last-child { margin-left:auto; color:var(--muted); }
.ltd-acts { flex:none; display:flex; flex-wrap:wrap; gap:8px; padding:12px 22px calc(16px + env(safe-area-inset-bottom)); border-top:.5px solid var(--hair); background:#F6F6F8; }
.ltd-acts .pill { height:40px; padding:0 16px; font-size:14px; } .ltd-acts .pill.soft { background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
@media (max-width: 899px) { .pg .lt-acts button:last-child { display:none; } .pg .lt-row .lt { line-height:20px; } }

/* Short menu: everything beyond the core sits under More */
.more summary { list-style:none; display:flex; align-items:center; gap:14px; height:44px; padding:0 12px; border-radius:14px; font-size:15px; font-weight:500; color:var(--muted); cursor:pointer; }
.more summary::-webkit-details-marker { display:none; }
.more summary:hover { color:var(--ink); background:rgba(0,0,0,.03); }
.more summary svg { margin-left:auto; transition:transform .2s; } .more[open] summary svg { transform:rotate(90deg); }

/* ---- Projects (work): parts, file blocks, a separate chat, the final pack ---- */
.pjw, .pjsheet { --pj-lift:inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 .5px rgba(30,30,35,.07), 0 1px 2px rgba(30,30,35,.04), 0 8px 24px -12px rgba(30,30,35,.14); --pj-late:#C9524B; }
/* Ping Projects: Ping's calm look (tokens, faces, pills, sheets come from ../app.css). Phone first. */
.card-lift { border-radius:22px; background:linear-gradient(180deg,#FFFFFF,#FFFFFF); box-shadow:var(--pj-lift); }
.pj-lab { font-size:13px; font-weight:600; color:var(--muted); margin:14px 4px 8px; }
.pj-empty, .pj-none { font-size:14px; color:var(--muted); padding:8px 2px; }

/* Sign in */

/* Top */

/* The obligations: always first */
.pj-ledger { padding:16px 16px 12px; display:grid; grid-template-columns:1fr; gap:0; }
.pj-split { height:1px; background:var(--hair); margin:10px 0 12px; }
.pj-col-h { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.pj-col-h small { display:block; font-size:12.5px; color:var(--muted); margin-top:1px; }
.pj-big { font-size:34px; line-height:36px; font-weight:600; letter-spacing:-1px; min-width:24px; font-variant-numeric:tabular-nums; }
.pj-ob { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:4px 12px; align-items:start; padding:12px 0; border-top:.5px solid var(--hair); }
.pj-ob-b { min-width:0; }
.pj-ob-who { display:flex; align-items:baseline; gap:8px; font-size:13px; color:var(--body); } .pj-ob-who > span:first-child { min-width:0; } .pj-ob-who b { font-weight:650; color:var(--ink); }
.pj-age { margin-left:auto; flex:none; font-size:12px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.pj-ob.late .pj-age { color:var(--pj-late); }
.pj-ob-t { display:block; margin-top:2px; font-size:15px; line-height:20px; font-weight:600; color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.pj-ob-m { display:flex; flex-wrap:wrap; align-items:center; gap:5px 6px; margin-top:5px; }
.pj-proj { font-size:12px; font-weight:600; color:var(--body); padding:2px 8px; border-radius:7px; box-shadow:inset 0 0 0 1px var(--hair); }
.pj-tag { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--body); padding:2px 8px 2px 6px; border-radius:7px; background:#F3F3F5; }
.pj-tag.late { color:var(--pj-late); background:rgba(217,98,91,.1); } .pj-tag.late svg { color:#C93A3F; }
.pj-tag.wait { background:#F3F3F5; }
.pj-ob-a { grid-column:3; grid-row:1; align-self:center; display:flex; flex-direction:column; align-items:flex-end; gap:6px; } .pj-ob-a .pill { height:32px; padding:0 13px; font-size:13px; }
.pj-ob-a .pj-wait { max-width:90px; text-align:right; line-height:15px; }
.pj-wait { font-size:12.5px; color:var(--muted); }
.pj-rule { display:flex; gap:8px; align-items:flex-start; margin-top:12px; padding:10px 12px; border-radius:14px; background:#F6F6F3; font-size:12.5px; line-height:18px; color:var(--body); } .pj-rule svg { margin-top:3px; }
@media (min-width: 760px) {
  .pjw .pj-ledger { grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr); gap:0 22px; padding:20px 22px 16px; }
  .pj-split { margin:0; width:1px; height:auto; }
  .pj-rule { grid-column:1 / -1; }
}

/* Projects list */
.pj-projects { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 760px) { .pj-projects { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.pj-card { display:flex; flex-direction:column; gap:8px; padding:16px 18px; text-decoration:none; color:inherit; transition:box-shadow .2s, transform .2s; }
.pj-card:hover { transform:translateY(-1px); }
.pj-card-h { display:flex; gap:6px; } .pj-card h3 { font-size:17px; line-height:22px; font-weight:650; letter-spacing:-.2px; }
.pj-code { font-size:12px; font-weight:650; color:var(--muted); letter-spacing:.2px; }
.pj-lead { font-size:12px; font-weight:600; color:var(--body); padding:0 7px; border-radius:6px; background:#F3F3F5; }
.pj-card-m { display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--body); } .pj-card-m b { font-weight:600; color:var(--ink); }
.pj-card-f { display:flex; align-items:center; gap:10px; padding-top:10px; border-top:.5px solid var(--hair); font-size:12.5px; color:var(--muted); }
.pj-open { font-weight:650; color:#fff; background:linear-gradient(180deg,#3A3A3F,#28282C); padding:2px 9px; border-radius:999px; } .pj-open.zero { background:#E8E8EA; color:var(--body); }
.pj-longest { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Project header */
.pj-ph { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:start; }
.pj-back { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:var(--ink); margin-left:-8px; }
.pj-back:hover { background:rgba(0,0,0,.04); }
.pj-ph-t p { font-size:14px; color:var(--muted); margin-top:3px; }
.pj-more { margin-left:4px; align-self:center; font-size:12px; color:var(--muted); }
.pj-team { padding:16px 16px 10px; } @media (min-width: 760px) { .pj-team { padding:18px 22px 12px; } }

/* Feed */
.pj-tabs { display:flex; gap:8px; overflow-x:auto; margin:4px -16px 0; padding:0 16px; }
.pj-feed { display:flex; flex-direction:column; gap:12px; }
.pj-post { padding:14px 16px; border-radius:20px; background:#fff; box-shadow:var(--pj-lift); }
.pj-post-h { display:flex; align-items:center; gap:10px; }
.pj-type { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--body); padding:3px 8px; border-radius:7px; background:#F3F3F5; }
.t-deadline .pj-type { background:linear-gradient(180deg,#3A3A3F,#28282C); color:#fff; }
.pj-post h4 { font-size:15.5px; font-weight:650; margin-top:10px; }
.pj-body { margin-top:8px; font-size:15px; line-height:22px; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; }
.pj-to { margin-top:10px; font-size:12.5px; font-weight:600; color:var(--muted); }
.pj-file { display:flex; align-items:center; gap:12px; margin-top:10px; padding:12px; border-radius:14px; background:#F6F6F3; text-decoration:none; color:var(--ink); } .pj-file b { display:block; font-size:14.5px; } .pj-file small { font-size:12px; color:var(--muted); }
.pj-dl { display:flex; align-items:center; gap:12px; margin-top:10px; } .pj-dl h4 { margin:0; } .pj-dl small { font-size:13px; color:var(--muted); }
.pj-dl-d { width:44px; flex:none; text-align:center; border-radius:11px; overflow:hidden; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.1), 0 2px 6px -1px rgba(0,0,0,.1); }
.pj-dl-d small { display:block; font-size:9px; font-weight:700; letter-spacing:.6px; line-height:15px; color:#fff; background:#2C2C30; } .pj-dl-d b { display:block; font-size:17px; line-height:25px; font-weight:600; }
.pj-dl.late .pj-dl-d small { background:#C93A3F; } .pj-dl.late small { color:var(--pj-late); }
.pj-post-open { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.pj-replies { margin-top:12px; padding-top:4px; border-top:.5px solid var(--hair); display:flex; flex-direction:column; gap:10px; }
.pj-reply { display:flex; gap:10px; padding-top:8px; } .pj-reply .pj-body { margin-top:2px; font-size:14.5px; }
.pj-reply-btn { display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:13px; font-weight:600; color:var(--muted); padding:4px 0; min-height:32px; } .pj-reply-btn:hover { color:var(--ink); }
.pj-reply-box { display:flex; gap:8px; margin-top:10px; } .pj-reply-box input { flex:1; min-width:0; height:40px; padding:0 12px; border-radius:12px; background:#F6F6F3; font-size:15px; } .pj-reply-box .pill { height:40px; padding:0 16px; }

/* Composer: fixed at the bottom, like Ping's */
.pj-pick { display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .pj-pick > span { font-size:12.5px; color:var(--muted); width:100%; }
.pj-person { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px 0 4px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair); font-size:13.5px; font-weight:500; }
.pj-person.on { background:#2C2C30; color:#fff; box-shadow:none; } .pj-person.on .av { box-shadow:0 0 0 1.5px #fff; }
.pj-row2 { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:8px; }
.pj-row2 input, .pj-line { height:42px; padding:0 12px; border-radius:12px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair); font-size:15px; min-width:0; }
.pj-cbar { display:flex; align-items:flex-end; gap:8px; padding:6px 6px 6px 14px; border-radius:22px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 8px 24px -10px rgba(0,0,0,.2); }
.pj-cbar textarea { flex:1; min-width:0; min-height:40px; max-height:120px; padding:9px 0; font-size:15.5px; line-height:22px; }
.pj-cgrow { flex:1; }
.pj-send { width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(180deg,#3A3A3F,#1E1E21); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

/* Sheets */
.pj-sheet-b { padding:4px 16px 24px; }
.pj-mrow { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:.5px solid var(--hair); } .pj-mrow div { flex:1; min-width:0; } .pj-mrow b { display:block; font-size:15px; font-weight:600; } .pj-mrow small { font-size:12.5px; color:var(--muted); }
.pj-mrow .pill { height:34px; padding:0 14px; }
.pj-status { display:flex; gap:8px; flex-wrap:wrap; } .pj-status .pill { height:38px; padding:0 16px; }
.pj-field { display:flex; flex-direction:column; gap:6px; margin-top:12px; } .pj-field span { font-size:13px; font-weight:600; color:var(--muted); }
.pj-field input, .pj-field select { height:44px; padding:0 12px; border-radius:12px; background:#fff; border:0; box-shadow:inset 0 0 0 1px var(--hair); font:inherit; font-size:15.5px; color:var(--ink); }
@media (prefers-reduced-motion: reduce) { .pj-card { transition:none; } }

/* Who owes what in the group: one line per person, most behind first */
.pj-tm { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 0; border-top:.5px solid var(--hair); }
.pj-tm-b { min-width:0; } .pj-tm-h { display:flex; align-items:center; gap:6px; } .pj-tm-h b { font-size:14.5px; font-weight:600; }
.pj-tm-b small { display:block; margin-top:2px; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pj-tm-n { text-align:right; } .pj-tm-n b { display:block; font-size:22px; line-height:24px; font-weight:600; font-variant-numeric:tabular-nums; } .pj-tm-n small { font-size:12px; color:var(--muted); }
.pj-tm.late .pj-tm-n b { color:var(--pj-late); }
.pj-tm.clear { opacity:.7; } .pj-ok { font-size:12px; font-weight:600; color:var(--body); padding:3px 9px; border-radius:999px; background:#EDEDEA; }
.pj-ob.late .pill { color:var(--ink); }

.pjw .pj-ledger, .pjw .pj-team, .pjw .pj-progress, .pjw .pj-alarm { margin-top:14px; }
.pjw .pj-projects { margin-top:2px; }
.pjw .pj-card { text-align:left; width:100%; gap:10px; }
.pjw .pj-card-h { align-items:center; } .pjw .pj-card .faces { margin-left:auto; } .pjw .pj-card .faces .av { margin-left:-6px; box-shadow:0 0 0 2px #fff; }
.pjw .pj-ob-t { background:none; padding:0; text-align:left; cursor:pointer; font:inherit; font-size:15px; font-weight:600; }
.pjw .pj-ph { margin-top:18px; } .pjw .pj-ph h1 { font-size:28px; line-height:34px; letter-spacing:-.5px; }
.pj-desc { margin:10px 4px 0; font-size:15px; line-height:22px; color:var(--body); max-width:62ch; }
/* One segment per part: dark when in, sage when final, red when late, grey when not due yet */
.pj-bar { display:flex; gap:4px; height:8px; } .pj-bar.big { height:12px; gap:5px; }
.pj-bar i { flex:1; border-radius:4px; background:#E4E4E1; } .pj-bar i.s-in { background:#3A3A3F; } .pj-bar i.s-final { background:#17171A; } .pj-bar i.s-missing { background:#C93A3F; }
.pj-bar-l { font-size:12.5px; color:var(--muted); margin-top:6px; } .pj-bar-l b { color:var(--ink); font-weight:650; }
.pj-progress { padding:16px 18px; }
.pj-mine { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:.5px solid var(--hair); font-size:14px; color:var(--body); } .pj-mine b { color:var(--ink); } .pj-mine .pill { margin-left:auto; height:34px; padding:0 14px; }
.pj-miss-line { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--pj-late); } .pj-miss-line svg { color:#C93A3F; } .pj-miss-line b { font-weight:650; }
.pj-ok-line { font-size:13px; color:var(--muted); }
/* Who hasn't put their part in: impossible to miss */
.pj-alarm { border-radius:20px; background:linear-gradient(180deg,#FFF6F5,#FFF1EF); box-shadow:0 0 0 1px rgba(217,98,91,.28), 0 10px 24px -14px rgba(217,98,91,.45); padding:4px 16px; }
.pj-alarm-r { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 0; } .pj-alarm-r + .pj-alarm-r { border-top:.5px solid rgba(217,98,91,.2); }
.pj-alarm-r b { display:block; font-size:15px; font-weight:650; color:#8E2F29; } .pj-alarm-r small { font-size:12.5px; color:#A4524B; }
.pj-alarm-r .pill { height:34px; padding:0 14px; background:#fff; color:#8E2F29; box-shadow:inset 0 0 0 1px rgba(217,98,91,.4); } .pj-alarm-r .pill.dark { background:#2C2C30; color:#fff; box-shadow:none; }
/* Tabs: Parts, Files, Chat */
.pj-tabs3 { display:flex; gap:4px; margin-top:22px; padding:4px; border-radius:16px; background:#E9E9E6; }
.pj-tabs3 button { flex:1; height:40px; border-radius:12px; font-size:14.5px; font-weight:500; color:var(--body); display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.pj-tabs3 button small { font-size:12px; color:var(--muted); font-weight:600; }
.pj-tabs3 button.on { background:#fff; color:var(--ink); font-weight:650; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.08); }
/* Parts */
.pj-parts { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; margin-top:14px; }
.pj-part { display:flex; flex-direction:column; gap:10px; text-align:left; padding:14px 16px; border-radius:20px; background:linear-gradient(180deg,#fff,#FFFFFF); box-shadow:var(--pj-lift); transition:transform .2s, box-shadow .2s; }
.pj-part:hover { transform:translateY(-1px); }
.pj-part.s-missing { box-shadow:0 0 0 1.5px rgba(217,98,91,.55), 0 8px 22px -12px rgba(217,98,91,.4); }
.pj-part-h { display:flex; align-items:center; gap:8px; } .pj-part-who { font-size:13px; font-weight:600; color:var(--body); }
.pj-st { margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:650; padding:3px 8px; border-radius:999px; background:#F3F3F5; color:var(--body); white-space:nowrap; }
.pj-st.s-in { background:#2C2C30; color:#fff; } .pj-st.s-final { background:rgba(123,166,147,.18); color:#17171A; } .pj-st.s-missing { background:rgba(217,98,91,.12); color:#A8323A; }
.pj-part h4 { font-size:16px; line-height:21px; font-weight:650; letter-spacing:-.2px; }
.pj-part-f { display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px; background:#F6F6F3; } .pj-part-f span { min-width:0; } .pj-part-f b { display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pj-part-f small { font-size:12px; color:var(--muted); }
.pj-part-empty { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border-radius:14px; border:1.5px dashed rgba(0,0,0,.14); font-size:13px; color:var(--muted); }
.pj-part.s-missing .pj-part-empty { border-color:rgba(217,98,91,.45); color:#A8323A; }
.pj-addpart { display:flex; align-items:center; gap:8px; margin-top:12px; height:44px; padding:0 16px; border-radius:14px; font-size:14px; font-weight:600; color:var(--body); box-shadow:inset 0 0 0 1px var(--hair); }
/* Files */
.pj-files-h { display:flex; align-items:center; gap:14px; margin:14px 4px 10px; font-size:13px; color:var(--muted); } .pj-files-h .pill { margin-left:auto; height:36px; padding:0 16px; flex:none; }
.pj-files { padding:4px 8px; }
.pj-frow { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 10px; border-radius:14px; } .pj-frow + .pj-frow { border-top:.5px solid var(--hair); border-radius:0; } .pj-frow:hover { background:rgba(0,0,0,.02); }
.pj-frow-b { flex:1; min-width:0; } .pj-frow-b b { display:block; font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pj-frow-b small { font-size:12.5px; color:var(--muted); }
.pj-frow-m { display:flex; align-items:center; gap:8px; flex:none; } .pj-count { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--muted); }
/* Chat: just for talking */
.pj-chat-note { margin:14px 4px 10px; font-size:13px; color:var(--muted); }
.pj-chat { padding:12px 14px; display:flex; flex-direction:column; gap:12px; }
.pj-msg { display:flex; gap:10px; max-width:88%; } .pj-msg.me { align-self:flex-end; flex-direction:row-reverse; text-align:right; }
.pj-bub { margin-top:3px; padding:9px 12px; border-radius:16px; background:#EDEDEA; font-size:14.5px; line-height:20px; text-align:left; } .pj-msg.me .pj-bub { background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.1); }
.pj-bub .pj-to { display:block; margin:0 0 3px; font-size:12px; font-weight:650; color:var(--muted); }
.pj-msg .pj-tag { margin-top:5px; }
.pjw .pj-compose { position:sticky; bottom:0; display:flex; flex-direction:column; gap:8px; margin:12px -12px 0; padding:10px 12px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, var(--page) 22%); z-index:5; }
/* A file's block */
.pjsheet { background:#F6F6F8; } @media (min-width: 900px) { .pjsheet.sheet { width:580px; } }
.pj-fs { padding:4px 20px 26px; scrollbar-width:none; }
.pj-fs-hero { display:flex; align-items:center; gap:14px; padding:6px 0 14px; } .pj-fs-hero h2 { font-size:19px; line-height:24px; font-weight:650; overflow-wrap:anywhere; } .pj-fs-hero span { font-size:13px; color:var(--muted); }
.pj-fs-acts { display:flex; flex-wrap:wrap; gap:8px; } .pj-fs-acts .pill { height:38px; padding:0 15px; font-size:13.5px; display:inline-flex; align-items:center; gap:6px; text-decoration:none; } .pj-fs-acts .pill.soft { background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
.pj-fs-final { display:flex; gap:8px; align-items:center; margin-top:12px; padding:10px 12px; border-radius:12px; background:rgba(123,166,147,.14); color:#17171A; font-size:13.5px; }
.pj-fs-sec { margin-top:20px; padding:14px; border-radius:18px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.07), 0 4px 14px -8px rgba(0,0,0,.12); }
.pj-fs-h { display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:650; margin-bottom:6px; } .pj-fs-h span { margin-left:auto; font-size:12px; color:var(--muted); }
.pj-pin { display:flex; gap:10px; padding:10px 12px; margin-top:8px; border-radius:12px; background:#FBF8EE; box-shadow:inset 0 0 0 .5px rgba(150,120,40,.18); } .pj-pin p { font-size:14.5px; line-height:20px; margin-top:2px; }
.pj-talk { display:flex; gap:8px; margin-top:10px; } .pj-talk.me { flex-direction:row-reverse; } .pj-talk.me .pj-meta { text-align:right; } .pj-talk .pj-bub { display:inline-block; }
.pj-fs-in { display:flex; gap:8px; margin-top:12px; } .pj-fs-in input { flex:1; min-width:0; height:42px; padding:0 12px; border-radius:12px; background:#F6F6F3; font-size:15px; } .pj-fs-in .pill { height:42px; padding:0 16px; }
.pj-ver { display:flex; align-items:center; gap:12px; padding:10px 4px; border-top:.5px solid var(--hair); text-decoration:none; color:inherit; } .pj-ver:first-of-type { border-top:0; }
.pj-ver b { width:30px; font-size:13px; } .pj-ver span { flex:1; font-size:13.5px; color:var(--body); } .pj-ver small { display:block; font-size:12px; color:var(--muted); } .pj-ver em { font-style:normal; font-size:12px; font-weight:650; padding:2px 8px; border-radius:999px; background:#2C2C30; color:#fff; }
.pj-fs-brief { padding:12px 14px; border-radius:14px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.07); } .pj-fs-brief b { display:block; font-size:16px; } .pj-fs-brief span { display:block; font-size:14px; color:var(--body); margin-top:4px; } .pj-fs-brief small { display:block; margin-top:6px; font-size:12.5px; color:var(--muted); }
.pj-fs-tip { margin-top:12px; font-size:12.5px; color:var(--muted); }
.pj-pack-h { padding:12px 14px; border-radius:14px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.07); font-size:14.5px; } .pj-pack-h b { font-weight:650; }
.pj-pack-r { display:flex; align-items:center; gap:12px; padding:12px 2px; border-bottom:.5px solid var(--hair); } .pj-pack-r div { flex:1; min-width:0; } .pj-pack-r b { display:block; font-size:14.5px; } .pj-pack-r small { font-size:12.5px; color:var(--muted); }
.pj-pack-r.s-missing small { color:#A8323A; }
.pjsheet .pj-fs-acts { margin-top:16px; } .pjsheet [aria-disabled="true"] { opacity:.5; }
@media (max-width: 899px) { .pj-parts { grid-template-columns:1fr; } .pj-files-h { flex-wrap:wrap; } .pj-alarm-r { grid-template-columns:36px minmax(0,1fr); } .pj-alarm-r .pill { grid-column:2; justify-self:start; } }
@media (prefers-reduced-motion: reduce) { .pj-part { transition:none; } }

.pjw .pj-members { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; align-self:start; }
.pj-talk .pj-meta { white-space:nowrap; } .pj-talk > div { min-width:0; max-width:85%; }
.pjw .pj-col-h h2, .pjw .pj-team h2 { font-size:16px; line-height:21px; font-weight:650; letter-spacing:-.15px; }
@media (max-width: 899px) { .pjw .pj-ph h1 { font-size:24px; line-height:29px; } }

/* Plain statuses: Not started (grey), In progress (mid grey), Handed in (dark), Confirmed (sage), Late (red) */
.pj-bar i.s-none { background:#E4E4E1; } .pj-bar i.s-progress { background:#A9A9AE; } .pj-bar i.s-handed { background:#3A3A3F; } .pj-bar i.s-confirmed { background:#17171A; } .pj-bar i.s-late { background:#C93A3F; }
.pj-key { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:12px; color:var(--muted); } .pj-key span { display:inline-flex; align-items:center; gap:5px; } .pj-key i { width:14px; height:6px; border-radius:3px; }
.pj-key i.s-none { background:#E4E4E1; } .pj-key i.s-progress { background:#A9A9AE; } .pj-key i.s-handed { background:#3A3A3F; } .pj-key i.s-confirmed { background:#17171A; } .pj-key i.s-late { background:#C93A3F; }
.pj-st.s-none { background:#F3F3F5; color:var(--muted); } .pj-st.s-progress { background:#ECECEF; color:var(--body); } .pj-st.s-handed { background:#2C2C30; color:#fff; } .pj-st.s-confirmed { background:rgba(123,166,147,.18); color:#17171A; }
/* The part card stays calm even when late: the red box above already says so. */
.pj-part.s-missing, .pj-part.is-late { box-shadow:var(--pj-lift); }
.pj-part.is-late .pj-part-empty { border-color:rgba(0,0,0,.14); color:var(--muted); }
.pj-part-due { font-size:12px; color:var(--muted); } .pj-part-due.late { color:#A8323A; font-weight:600; }
.pj-fs-state { margin-top:2px; margin-bottom:12px; padding:10px 12px; border-radius:12px; font-size:13.5px; line-height:19px; background:#EFEFEC; color:var(--body); }
.pj-fs-state.s-handed { background:#2C2C30; color:#fff; } .pj-fs-state.s-confirmed { background:rgba(123,166,147,.16); color:#17171A; }
.pj-fs-hero .pj-st { margin-left:auto; align-self:flex-start; }
.pj-check { display:flex; align-items:center; gap:12px; width:100%; margin-top:14px; padding:12px; border-radius:14px; background:#fff; box-shadow:inset 0 0 0 1px var(--hair); text-align:left; }
.pj-check i { width:22px; height:22px; border-radius:7px; flex:none; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25); color:transparent; }
.pj-check.on i { background:#2C2C30; box-shadow:none; color:#fff; } .pj-check b { display:block; font-size:14.5px; } .pj-check small { font-size:12.5px; color:var(--muted); }
.pj-src { display:inline-flex; align-items:center; gap:4px; margin-right:6px; padding:1px 7px; border-radius:6px; background:#ECECEF; font-size:12px; font-weight:650; color:var(--body); vertical-align:2px; }
.pj-msg.hi .pj-bub { box-shadow:0 0 0 2px #2C2C30; transition:box-shadow .3s; }
/* Project side panel: this project only */
.pj-rail .rp-hh { display:flex; align-items:center; } .pj-rail .rp-hh span { margin-left:auto; font-size:12px; color:var(--muted); }
.pj-rail-due { display:flex; align-items:center; gap:12px; padding:8px 0 4px; } .pj-rail-due b { display:block; font-size:15px; } .pj-rail-due small { font-size:12.5px; color:var(--muted); }
.pj-rail-next { margin-top:10px; padding-top:10px; border-top:.5px solid var(--hair); font-size:13px; color:var(--body); }
.pj-rail-m { display:flex; align-items:center; gap:10px; padding:8px 0; } .pj-rail-m + .pj-rail-m { border-top:.5px solid var(--hair); }
.pj-rail-m b { display:block; font-size:14px; font-weight:600; } .pj-rail-m small { font-size:12.5px; color:var(--muted); } .pj-rail-m .late { color:#A8323A; font-weight:600; }
.pj-pack-r.late small { color:#A8323A; }
.pj-st.s-late { background:rgba(217,98,91,.12); color:#A8323A; }

/* ---- Email: the emails that matter, shown as they were sent. Nothing like a mail app. ---- */
@media (min-width: 900px) { .em-split .pane.plist { width:400px; background:linear-gradient(180deg, #F6F6F8, #F2F2EF); } .em-split .pane.detail { background:var(--page) !important; } }
.em-lhead { position:sticky; top:0; z-index:4; padding:calc(16px + env(safe-area-inset-top)) 18px 10px; background:linear-gradient(#F6F6F8 85%, rgba(247,247,244,0)); }
.em-lt { display:flex; align-items:center; } .em-lt h1 { flex:1; font-size:30px; line-height:36px; letter-spacing:-.6px; }
.em-cog { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:var(--ink); } .em-cog:hover { background:rgba(0,0,0,.05); }
.em-acct-chip { display:inline-flex; align-items:center; gap:8px; margin-top:6px; height:28px; padding:0 12px 0 8px; border-radius:999px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 2px 6px -2px rgba(0,0,0,.08); font-size:12.5px; font-weight:600; color:var(--body); }
.em-acct-chip svg { width:18px; height:14px; } .em-acct-chip i { width:7px; height:7px; border-radius:50%; background:#17171A; } .em-acct-chip.is-demo { padding:0 12px; color:var(--muted); }
.em-fs { display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:14px; }
.em-f { flex:none; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:10px; font-size:13.5px; font-weight:500; color:var(--body); }
.em-f small { font-size:12px; font-weight:650; color:var(--muted); } .em-f:hover { background:rgba(0,0,0,.04); }
.em-f.on { background:#fff; color:var(--ink); font-weight:650; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 3px 8px -2px rgba(0,0,0,.1); } .em-f.on small { color:var(--ink); }
.em-f-dot { width:7px; height:7px; border-radius:50%; background:#C93A3F; }
/* Not connected yet */
.em-hero { margin:8px 14px 12px; padding:18px; border-radius:20px; background:linear-gradient(160deg,#2C2C30,#161618); color:#fff; box-shadow:0 14px 30px -16px rgba(0,0,0,.5); }
.em-hero > b { display:block; font-size:17px; font-weight:650; letter-spacing:-.2px; } .em-hero > small { display:block; margin:4px 0 14px; font-size:13px; color:rgba(255,255,255,.65); }
.em-pbtn { display:flex; align-items:center; gap:12px; width:100%; height:50px; padding:0 14px; margin-top:8px; border-radius:14px; background:#fff; color:#1F1F23; font-size:15px; font-weight:600; text-align:left; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform .15s; }
.em-pbtn span { flex:1; } .em-pbtn:hover { transform:translateY(-1px); } .em-pbtn svg:first-child { flex:none; }
.em-pbtn.off { background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); cursor:default; transform:none; }
.em-pbtn em { font-style:normal; font-size:12px; font-weight:650; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.12); }
.em-lock { display:flex; align-items:center; gap:7px; margin-top:12px; font-size:12px; color:rgba(255,255,255,.6); }
/* The list */
.em-rows { padding:2px 10px 24px; }
.em-row { display:flex; gap:12px; width:100%; text-align:left; padding:12px 12px; border-radius:16px; position:relative; transition:background .15s; }
.em-row + .em-row { margin-top:2px; } .em-row:hover { background:rgba(255,255,255,.6); }
.em-row.sel { background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 8px 22px -12px rgba(0,0,0,.2); }
.em-av { width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:650; color:#3A3A40; background:linear-gradient(180deg,#F4F4F6,#E3E3E7); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 .5px rgba(0,0,0,.05); }
.em-row.is-urg .em-av { box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #C93A3F; }
.em-av.big { width:42px; height:42px; font-size:14px; }
.em-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.em-top { display:flex; align-items:baseline; gap:8px; } .em-top b { flex:1; font-size:14.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .em-top time { font-size:12px; color:var(--muted); flex:none; }
.em-subj { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.em-unread { width:7px; height:7px; border-radius:50%; background:#2C2C30; flex:none; }
.em-snip { font-size:12.5px; line-height:17px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.em-row.new .em-top b { font-weight:700; } .em-row.new .em-subj { color:var(--ink); font-weight:600; }
.em-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.em-dept { font-size:12px; font-weight:650; color:var(--body); padding:2px 8px; border-radius:7px; background:rgba(0,0,0,.045); }
.em-urg { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:650; color:#A8323A; padding:2px 8px 2px 6px; border-radius:7px; background:rgba(217,98,91,.1); } .em-urg svg { color:#C93A3F; }
.em-att, .em-done { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:650; color:var(--body); padding:2px 7px; border-radius:7px; background:rgba(0,0,0,.045); }
.em-done { color:#17171A; background:rgba(123,166,147,.16); }
.em-none { padding:40px 20px; text-align:center; color:var(--muted); font-size:14px; }
/* Reading */
.em-pane { overflow-y:auto; }
.em-empty { margin:auto; display:flex; flex-direction:column; align-items:center; gap:6px; padding:30vh 20px 0; color:var(--muted); text-align:center; } .em-empty b { color:var(--body); font-size:16px; margin-top:6px; }
.em-empty-ic { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; background:#fff; color:var(--body); box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 8px 20px -10px rgba(0,0,0,.2); }
.em-read { max-width:780px; width:100%; margin:0 auto; padding:16px 32px 60px; }
.em-rbar { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:8px; padding:6px 0 14px; background:linear-gradient(var(--page) 78%, rgba(244,244,241,0)); }
.em-acts { display:flex; padding:4px; gap:2px; border-radius:14px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 6px 18px -10px rgba(0,0,0,.25); }
.em-acts button { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 13px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--body); }
.em-acts button:hover, .em-acts button.on { background:#F3F3F5; color:var(--ink); }
.em-acts button.main { background:linear-gradient(180deg,#3A3A3F,#1E1E21); color:#fff; } .em-acts button.done { color:#17171A; }
.em-snooze { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; margin:-4px 0 14px; } .em-snooze > span { font-size:12.5px; font-weight:600; color:var(--muted); margin-right:4px; }
.em-snooze button { height:34px; padding:0 13px; border-radius:10px; font-size:13px; font-weight:600; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.1), 0 2px 6px -2px rgba(0,0,0,.1); }
.em-hd { padding:4px 4px 18px; }
.em-h { font-size:26px; line-height:32px; font-weight:700; letter-spacing:-.5px; }
.em-why { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.em-reason { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:650; color:var(--body); padding:2px 9px 2px 7px; border-radius:7px; background:rgba(0,0,0,.045); } .em-reason.u { color:#A8323A; background:rgba(217,98,91,.1); } .em-reason.u svg { color:#C93A3F; }
.em-from { display:flex; align-items:center; gap:12px; margin-top:18px; } .em-from div { flex:1; min-width:0; } .em-from b { display:block; font-size:15px; } .em-from small { font-size:12.5px; color:var(--muted); } .em-from time { font-size:12.5px; color:var(--muted); flex:none; }
.em-pics { display:flex; align-items:center; gap:10px; margin-bottom:10px; padding:10px 14px; border-radius:14px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.08); font-size:13px; color:var(--body); } .em-pics span { flex:1; } .em-pics button { font-size:13px; font-weight:650; color:var(--ink); text-decoration:underline; }
.em-paper { border-radius:20px; background:#fff; overflow:hidden; box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04), 0 18px 40px -22px rgba(0,0,0,.25); }
.em-frame { display:block; width:100%; height:240px; border:0; background:#fff; }
.em-files { margin-top:16px; } .em-files-h { display:flex; align-items:center; gap:6px; margin:0 4px 8px; font-size:12.5px; font-weight:650; color:var(--muted); }
.em-files-g { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.em-file { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; background:#fff; text-align:left; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 4px 12px -8px rgba(0,0,0,.2); transition:transform .15s; } .em-file:hover { transform:translateY(-1px); }
.em-file span:last-child { min-width:0; } .em-file b { display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .em-file small { font-size:12px; color:var(--muted); }
.em-ext { width:38px; height:44px; flex:none; border-radius:8px; display:grid; place-items:end center; padding-bottom:6px; font-size:9.5px; font-weight:800; letter-spacing:.3px; color:#fff; background:#6B6B72; }
.em-ext.e-pdf { background:#C93A3F; } .em-ext.e-xlsx, .em-ext.e-csv { background:#2E8B57; } .em-ext.e-docx, .em-ext.e-doc { background:#2F6FDB; } .em-ext.e-pptx { background:#D9822B; }
.em-foot { margin:16px 4px 0; font-size:12.5px; color:var(--muted); }
/* Connect sheet */
.em-csheet.sheet.float { padding:0; max-height:none; }
@media (min-width: 900px) { .em-csheet.sheet.float { width:440px; top:12vh; } }
.em-cs { position:relative; padding:30px 26px 24px; text-align:center; }
.em-cs-x { position:absolute; top:14px; right:14px; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--muted); } .em-cs-x:hover { background:rgba(0,0,0,.05); color:var(--ink); }
.em-cs-logos { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:18px; }
.em-cs-l { width:60px; height:60px; border-radius:18px; display:grid; place-items:center; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 8px 20px -10px rgba(0,0,0,.25); } .em-cs-l svg { width:34px; height:26px; } .em-cs-l.ping svg { width:32px; height:32px; }
.em-cs-dots { display:flex; gap:5px; } .em-cs-dots i { width:5px; height:5px; border-radius:50%; background:#C9C9CE; }
.em-cs h2 { font-size:21px; font-weight:700; letter-spacing:-.3px; } .em-cs > p { margin:6px 0 18px; font-size:14.5px; color:var(--muted); line-height:20px; }
.em-cs-pts { display:flex; flex-direction:column; gap:12px; text-align:left; padding:16px; border-radius:16px; background:#F6F6F3; }
.em-cs-pts > div { display:flex; gap:12px; align-items:flex-start; } .em-cs-pts svg { margin-top:2px; color:var(--ink); flex:none; } .em-cs-pts b { display:block; font-size:14px; } .em-cs-pts small { font-size:12.5px; color:var(--muted); }
.em-cs-go { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:52px; margin-top:18px; border-radius:14px; background:#fff; font-size:15.5px; font-weight:650; color:#1F1F23; box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 4px 12px -4px rgba(0,0,0,.18); transition:transform .15s; } .em-cs-go:hover { transform:translateY(-1px); }
/* Settings sheet */
.em-sheet { padding:4px 18px 26px; }
.em-acct { display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.08); } .em-acct > span:nth-child(2) { flex:1; min-width:0; } .em-acct b { display:block; font-size:14.5px; } .em-acct small { font-size:12.5px; color:var(--muted); } .em-acct .pill { height:34px; padding:0 14px; }
.em-pi { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.1); } .em-pi svg { width:24px; height:18px; }
.em-sh { font-size:13px; font-weight:650; color:var(--muted); margin:20px 4px 8px; }
.em-sheet .group { margin:0; }
.em-sw { display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; text-align:left; } .em-sw + .em-sw { border-top:.5px solid var(--hair); }
.em-sw span { flex:1; } .em-sw b { display:block; font-size:14.5px; font-weight:500; } .em-sw small { font-size:12.5px; color:var(--muted); }
.em-sw i { width:40px; height:24px; border-radius:12px; background:#D8D8DC; position:relative; flex:none; transition:background .2s; } .em-sw i::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.em-sw.on i { background:#2C2C30; } .em-sw.on i::after { transform:translateX(16px); }
.em-route { display:flex; align-items:center; gap:8px; padding:11px 14px; font-size:14px; color:var(--body); } .em-route + .em-route { border-top:.5px solid var(--hair); } .em-route > span { flex:1; } .em-route b { color:var(--ink); font-weight:600; }
.em-route.def { color:var(--muted); }
.em-route.add input, .em-route.add select { height:38px; padding:0 10px; border-radius:10px; background:#F6F6F3; font:inherit; font-size:14px; border:0; min-width:0; } .em-route.add input { flex:1; } .em-route.add .pill { height:38px; padding:0 14px; }
.em-x { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:var(--muted); } .em-x:hover { background:rgba(0,0,0,.04); color:var(--ink); }
.em-words { display:flex; flex-wrap:wrap; gap:6px; padding:12px 14px 2px; }
.em-word { display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 4px 0 11px; border-radius:999px; background:#F3F3F5; font-size:13.5px; font-weight:500; } .em-word.from { background:rgba(217,98,91,.1); color:#A8323A; }
.em-word button { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:var(--muted); }
.em-tip { margin:12px 4px 0; font-size:12.5px; color:var(--muted); }
@media (max-width: 899px) { .em-read { padding:6px 14px 40px; } .em-h { font-size:22px; line-height:28px; } .em-acts button span { display:none; } .em-acts button.main span { display:inline; } .em-from time { display:none; } }
@media (prefers-reduced-motion: reduce) { .em-pbtn, .em-file, .em-cs-go { transition:none; } }

/* Official sign-in buttons. Google: white, #747775 outline, G logo, "Continue with Google".
   Microsoft: white, #8C8C8C outline, four-square logo, "Sign in with Microsoft". */
.gsi, .msi { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; margin-top:10px; background:#fff; text-align:center; user-select:none; }
.gsi { height:44px; padding:0 14px; border-radius:22px; border:1px solid #747775; color:#1F1F1F; font:500 14.5px/20px Roboto, 'Google Sans', Arial, sans-serif; letter-spacing:.25px; transition:background .15s, box-shadow .15s; }
.gsi:hover { background:#F8F9FA; box-shadow:0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.gsi:focus-visible { outline:2px solid #4285F4; outline-offset:2px; }
.gsi svg { width:20px; height:20px; flex:none; }
.gsi.wide { height:48px; margin-top:18px; border-radius:24px; font-size:15px; }
.msi { height:44px; padding:0 12px; border:1px solid #8C8C8C; border-radius:0; color:#5E5E5E; font:600 15px/20px 'Segoe UI', -apple-system, sans-serif; opacity:.6; cursor:default; }
.msi svg { flex:none; }
.msi-soon { display:block; margin-top:6px; font-size:12px; color:rgba(255,255,255,.55); text-align:center; }

/* ---- Email, inbox style ---- */
.em-av { background:hsl(var(--h, 220) 30% 92%); color:hsl(var(--h, 220) 25% 32%); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.05); }
.em-row { padding:11px 12px; border-radius:12px; }
.em-top { align-items:center; } .em-clip { color:var(--muted); display:grid; }
.em-line { display:block; font-size:13.5px; line-height:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.em-line .em-subj { display:inline; color:var(--body); } .em-row.new .em-line .em-subj { color:var(--ink); font-weight:650; }
.em-line .em-snip { display:inline; -webkit-line-clamp:unset; }
.em-tags { margin-top:5px; }
@media (min-width: 900px) { .em-split .pane.detail { background:#fff !important; } }
/* The opened email */
.gm { min-height:100%; display:flex; flex-direction:column; background:#fff; }
.gm-bar { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:4px; padding:10px 24px; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid #EFEFEC; }
.gm-ib { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:#444746; } .gm-ib:hover, .gm-ib.on { background:#F3F3F5; color:var(--ink); }
.gm-sep { flex:1; }
.gm-task { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:19px; font-size:14px; font-weight:600; color:#fff; background:linear-gradient(180deg,#3A3A3F,#1E1E21); box-shadow:0 2px 6px -2px rgba(0,0,0,.4); }
.gm-task.done { color:#17171A; background:rgba(123,166,147,.16); box-shadow:none; }
.gm .em-snooze { padding:10px 24px 0; justify-content:flex-start; margin:0; }
.gm-sheet { width:100%; max-width:880px; padding:22px 32px 48px; }
.gm-subj { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .gm-subj h2 { font-size:22px; line-height:28px; font-weight:500; letter-spacing:0; color:#1F1F1F; margin-right:4px; }
.gm-lab { display:inline-flex; align-items:center; gap:3px; height:20px; padding:0 7px; border-radius:4px; font-size:12px; font-weight:500; color:#444746; background:#EDEDEA; } .gm-lab.u { color:#A8323A; background:rgba(217,98,91,.12); } .gm-lab.u svg { color:#C93A3F; }
.gm-head { display:flex; align-items:flex-start; gap:12px; margin-top:22px; }
.gm-who { flex:1; min-width:0; font-size:14px; } .gm-who b { font-weight:650; color:#1F1F1F; } .gm-addr { font-size:12.5px; color:#5E5E5E; } .gm-who small { font-size:12.5px; color:#5E5E5E; }
.gm-time { flex:none; font-size:12.5px; color:#5E5E5E; padding-top:2px; }
.gm-why { display:flex; align-items:center; gap:6px; margin:14px 0 0 54px; font-size:12px; color:var(--muted); } .gm-why svg { color:var(--faint); }
.gm-body { margin:16px 0 0 54px; }
.gm-body .em-paper { border-radius:0; box-shadow:none; background:transparent; }
.gm-body .em-pics { margin-bottom:12px; }
.gm-att { margin:24px 0 0 54px; padding-top:18px; border-top:1px solid #EFEFEC; } .gm-att-h { font-size:13px; font-weight:600; color:#444746; margin-bottom:10px; }
.gm-att-g { display:flex; flex-wrap:wrap; gap:12px; }
.gm-file { width:178px; display:flex; flex-direction:column; border-radius:10px; overflow:hidden; text-align:left; background:#fff; box-shadow:inset 0 0 0 1px #E0E0DD; transition:box-shadow .15s; } .gm-file:hover { box-shadow:inset 0 0 0 1px #C7C7C4, 0 4px 12px -6px rgba(0,0,0,.2); }
.gm-file-top { height:88px; display:grid; place-items:center; background:#F6F6F3; }
.gm-file-b { padding:9px 11px; } .gm-file-b b { display:block; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gm-file-b small { font-size:12px; color:var(--muted); }
.gm-foot { display:flex; align-items:center; gap:8px; margin:28px 0 0 54px; font-size:12.5px; color:var(--muted); }
.mt-src { display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:14px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.08); } .mt-src > span:last-child { min-width:0; } .mt-src b { display:block; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mt-src small { display:block; font-size:12px; color:var(--muted); }
.em-sheet .pj-field textarea { padding:10px 12px; border-radius:12px; background:#fff; border:0; box-shadow:inset 0 0 0 1px var(--hair); font:inherit; font-size:14.5px; line-height:21px; color:var(--ink); resize:vertical; }
.mt-dues { display:flex; flex-wrap:wrap; gap:6px; } .mt-hint { font-style:normal; font-weight:500; color:#17171A; margin-left:6px; }
@media (max-width: 899px) { .gm-sheet { padding:16px 16px 40px; } .gm-why, .gm-body, .gm-att, .gm-foot { margin-left:0; } .gm-time { display:none; } .gm-bar { padding:8px 12px; } }
.gm-bar { align-self:stretch; width:100%; }
.gm-sheet { align-self:stretch; }
.msi { opacity:1; background:rgba(255,255,255,.9); color:#8A8A8E; }

/* ---------- Live mode (live.js): queue card, ticks, sign-in, account ---------- */
.lq { display:block; width:calc(100% - 32px); margin:4px 16px 12px; padding:14px 16px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(30,28,25,.08), 0 6px 18px -10px rgba(30,28,25,.18); text-align:left; }
.lq.is-ex b, .lq.calm b { display:block; font-size:15px; font-weight:600; }
.lq.is-ex span, .lq.calm span { display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.lq.calm { position:relative; padding-right:150px; }
.lq.calm button { position:absolute; right:14px; top:50%; transform:translateY(-50%); }
.lq button[data-act="livePriority"] { height:32px; padding:0 12px; border-radius:10px; background:var(--fill); font-size:13px; font-weight:600; white-space:nowrap; }
.lq-top { display:flex; align-items:center; gap:12px; }
.lq-top > div { flex:1; min-width:0; } .lq-top div b { display:block; font-size:15px; font-weight:600; } .lq-top div span { font-size:13px; color:var(--muted); }
.lq .lq-n { min-width:40px; height:40px; padding:0 8px; border-radius:12px; display:grid; place-items:center; background:var(--ink); color:#fff; font-size:20px; font-weight:650; font-variant-numeric:tabular-nums; }
.lq-row { display:flex; align-items:center; gap:8px; width:100%; margin-top:10px; padding:10px 12px; border-radius:12px; background:var(--fill); text-align:left; font-size:13.5px; }
.lq-row i { width:8px; height:8px; border-radius:50%; flex:none; background:var(--amber); } .lq-row.urg i { background:var(--red); }
.lq-row b { font-weight:600; white-space:nowrap; } .lq-row span { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lstat { display:flex; align-items:center; justify-content:flex-end; gap:5px; padding:2px 18px 4px; font-size:12px; color:var(--muted); }
.lstat b { color:var(--body); font-weight:600; } .lstat .tk { flex:none; } .lstat .esc2 { color:var(--red); font-weight:600; }
.lconn { width:100%; max-width:420px; margin:0 auto; padding:56px 24px 40px; overflow-y:auto; scrollbar-width:none; } .lconn::-webkit-scrollbar { display:none; }
.lc-brand { display:flex; align-items:center; gap:10px; font-size:17px; margin-bottom:36px; } .lc-brand b { font-weight:650; }
.lconn h1 { font-size:30px; line-height:36px; font-weight:650; letter-spacing:-.4px; } .lconn > p { color:var(--muted); margin:8px 0 24px; font-size:15px; line-height:21px; }
.lconn label { display:block; font-size:13px; font-weight:600; color:var(--body); margin-bottom:14px; }
.lconn input { display:block; width:100%; margin-top:6px; height:46px; padding:0 14px; border-radius:12px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); font-size:16px; font-weight:400; color:var(--ink); }
.lconn input:focus { outline:none; box-shadow:inset 0 0 0 2px var(--ink); }
.lconn input[name="code"][inputmode="numeric"] { font-size:24px; letter-spacing:8px; text-align:center; font-variant-numeric:tabular-nums; }
.lgo { width:100%; height:50px; border-radius:14px; background:var(--ink); color:#fff; font-size:16px; font-weight:600; margin-top:6px; }
.lerr { color:var(--red); font-size:13.5px; min-height:20px; }
.lmodes { margin-top:20px; padding-top:8px; border-top:.5px solid var(--hair); }
.llink { display:block; margin:14px auto 0; font-size:14px; color:var(--body); text-decoration:underline; text-underline-offset:3px; }
.llink.muted { color:var(--muted); margin-top:22px; }
.lsub { padding:4px 20px 12px; font-size:14px; line-height:20px; color:var(--muted); }
.lpick { display:flex; align-items:center; gap:12px; padding:10px 16px; cursor:pointer; } .lpick span { flex:1; min-width:0; } .lpick b { display:block; font-weight:600; } .lpick small { color:var(--muted); font-size:13px; }
.lpick input { width:22px; height:22px; accent-color:var(--ink); }
.lphone { padding:8px 24px 28px; text-align:center; } .lphone p { font-size:15px; line-height:21px; color:var(--body); }
.lcode { display:flex; justify-content:center; align-items:center; gap:10px; margin:22px 0 14px; font-size:40px; font-weight:650; letter-spacing:6px; font-variant-numeric:tabular-nums; color:var(--ink); }
.lcode span { width:10px; height:2px; background:var(--hair); }
.lphone small { font-size:13px; color:var(--muted); }
.lspin { width:26px; height:26px; margin:30px auto; border-radius:50%; border:2.5px solid var(--hair); border-top-color:var(--ink); animation:lspin .8s linear infinite; }
@keyframes lspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lspin { animation-duration:2.4s; } }
.lacct { margin:14px 16px 4px; padding:16px; border-radius:18px; background:var(--card); box-shadow:0 0 0 .5px rgba(30,28,25,.08), 0 6px 18px -10px rgba(30,28,25,.18); }
.lacct-h { display:flex; align-items:center; gap:12px; } .lacct-h b { display:block; font-size:16px; font-weight:650; } .lacct-h small { font-size:13px; color:var(--muted); }
.lacct-code { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding:10px 12px; border-radius:12px; background:var(--fill); font-size:13px; color:var(--body); } .lacct-code b { font-size:16px; letter-spacing:2px; font-variant-numeric:tabular-nums; }
.lacct-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.lex { margin:2px 16px 10px; padding:8px 12px; border-radius:10px; background:var(--fill); font-size:12.5px; color:var(--muted); }

/* Ask and Promise, above the message box */
.oblrow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:0 4px 8px; }
.obl { height:28px; padding:0 11px 0 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--body); background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); }
.obl.on { color:#fff; background:var(--ink); box-shadow:none; }
.obl-note { flex:1 1 200px; font-size:12px; line-height:16px; color:var(--muted); }
.olab { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:650; color:var(--muted); margin-bottom:3px; }

/* ---------- One palette, the front page's: red only for urgent or late, sage for done,
   graphite and greys for everything else. No tinted links, pins, switches or tiles. ---------- */
.switch { background:#2C2C31; } .switch.off { background:#E3E3E6; }
.state.onit { background:#ECECEF; color:var(--body); } .state.onit::before { background:#8E8E93; }
.state.fixed { background:rgba(123,166,147,.14); color:#17171A; } .state.fixed::before { background:#17171A; }
.stp.amber .c { border-color:#3A3A3F; box-shadow:0 0 0 4px rgba(58,58,63,.10); } .stp.amber .c::after { background:#3A3A3F; }
.ln.hit { background:linear-gradient(90deg,var(--red),#A9A9AE); }
.pill.amber { background:#ECECEF; color:var(--ink); box-shadow:none; }
.pill.green { background:#2C2C31; color:#fff; box-shadow:0 3px 8px rgba(0,0,0,.16); }
.li.t-doing .check { border-color:#3A3A3F; background:radial-gradient(circle, #3A3A3F 38%, transparent 42%); }
.space-btn, .space-btn.tap, .space-btn.live { color:var(--ink) !important; box-shadow:0 0 0 .5px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06) !important; }
.spacebar .sw { color:var(--ink) !important; }
.bpost.pinned, .pane:has(.kindnote) .bpost.pinned { background:var(--card); box-shadow:inset 3px 0 0 #2C2C31, 0 0 0 .5px rgba(0,0,0,.06); }
.pinlab, .rp-pin, .rp-h span, .sched button, .onb-foot button, .linkbtn, .li.add .lt, .rc-ic.plain, .mt-add { color:var(--ink); }
.linkbtn, .sched button, .onb-foot button { text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(0,0,0,.25); }
.bpin.on { color:var(--ink); }
.rc-ic { color:var(--ink); }
.ev-all { color:var(--ink); background:#ECECEF; }
.wk i { background:#3A3A3F; }
.rx.mine { background:var(--card); box-shadow:0 0 0 1.5px #2C2C31; }
.call-live i { background:#2C2C31; box-shadow:0 0 0 3px rgba(44,44,49,.18); }
.room .sw { color:var(--ink); }
.card.visit .k, .pollcard .k, .parcelcard .k { color:var(--muted); }
.popt.mine .pt { color:var(--ink); }
.vans { color:var(--body); }
.meet .live i { box-shadow:0 0 0 3px rgba(123,166,147,.2); }
.homecard.on { background:var(--card); box-shadow:inset 0 0 0 1.5px #2C2C31; } .homecard.on .hc-ic { background:#ECECEF; color:var(--ink); }
.homebar svg { color:var(--ink); }
.pl-cur { color:var(--body); }
.mt-slots button i, .mt-key i { background:#3A3A3F; }
.qcard.q-onit::before { background:#8E8E93; }

/* Page side panels (railHtml): one style for all of them */
.rp-hh { display:flex; align-items:center; gap:8px; } .rp-hh > span { margin-left:auto; font-size:12.5px; font-weight:600; color:var(--muted); }
.rp-link { margin-left:auto; font-size:12.5px; font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(0,0,0,.25); }
.rp-help .rp-row { margin-top:4px; }
.rp-empty { margin-top:8px; font-size:12.5px; line-height:18px; color:var(--muted); }
.rp-pri { margin-top:12px; } .rp-pri .av { margin-left:-6px; } .rp-pri .av:first-child { margin-left:0; }
.rp-date { width:34px; flex:none; display:flex; flex-direction:column; align-items:center; line-height:1; } .rp-date small { font-size:10px; font-weight:650; color:var(--muted); text-transform:uppercase; } .rp-date b { font-size:17px; font-weight:650; margin-top:2px; }
.rp-help .rp-dot { width:8px; height:8px; min-width:8px; padding:0; border-radius:50%; background:#A9A9AE; margin:0 11px; font-size:0; } .rp-help .rp-dot.urg { background:var(--red); }
.rp-quote { margin-top:10px; padding:10px 12px; border-radius:12px; background:var(--page); box-shadow:inset 3px 0 0 #2C2C31; } .rp-quote p { font-size:13.5px; line-height:19px; } .rp-quote small { display:block; margin-top:4px; font-size:12px; color:var(--muted); }
.rp-btn { margin-top:12px; height:34px; padding:0 14px; display:inline-grid; text-decoration:none; }


/* One page header everywhere: the same title and a short summary under it. */
.head { padding:14px 20px 4px; }
.head h1, .pg-head h1 { font-size:32px; line-height:38px; font-weight:700; letter-spacing:-.5px; }
.head-sub, .pg-sub { margin:6px 0 4px; font-size:15px; line-height:21px; color:var(--muted); max-width:62ch; }
.pg-head .pg-sub { margin-left:0; margin-right:0; }
@media (max-width: 899px) { .head { padding:6px 20px 2px; } .head h1, .pg-head h1 { font-size:28px; line-height:34px; } .head-sub, .pg-sub { font-size:14px; line-height:19px; } }

/* Maintenance: the report tiles sit up off the card, like keys, instead of flat grey boxes. */
.report { padding:18px 16px 16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 .5px rgba(30,30,35,.06), 0 1px 2px rgba(30,30,35,.03), 0 8px 24px -10px rgba(30,30,35,.10); }
.kinds { gap:10px; }
.kinds button { height:84px; gap:8px; border-radius:16px; background:linear-gradient(180deg,#FFFFFF,#F7F7F5); color:var(--ink); font-weight:550;
  box-shadow:inset 0 1px 0 #fff, 0 0 0 .5px rgba(30,30,35,.08), 0 1px 2px rgba(30,30,35,.05), 0 6px 14px -8px rgba(30,30,35,.18); transition:transform .15s, box-shadow .15s; }
.kinds button svg { color:var(--ink); }
@media (hover: hover) { .kinds button:hover { transform:translateY(-1px); box-shadow:inset 0 1px 0 #fff, 0 0 0 .5px rgba(30,30,35,.1), 0 2px 4px rgba(30,30,35,.06), 0 12px 22px -10px rgba(30,30,35,.22); } }
.kinds button:active { transform:translateY(0) scale(.98); box-shadow:inset 0 1px 2px rgba(30,30,35,.08), 0 0 0 .5px rgba(30,30,35,.08); }
@media (min-width: 900px) { .kinds { grid-template-columns:repeat(6,1fr); } }

/* Menu and search: stand-alone icons, no white circle behind them. */
.round, .sbtn { background:none !important; box-shadow:none !important; border-radius:12px; }
.round:active, .sbtn:active { background:var(--fill) !important; }
.lines::before, .lines::after { height:2px; } .lines { width:18px; height:11px; } .lines::before { width:18px; } .lines::after { width:11px; }
.chips .grp-phone { margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 4px 0 8px; font-size:13.5px; font-weight:600; color:var(--body); background:none; box-shadow:none; }
/* New isn't urgent: graphite, not red. Red stays for urgent and late. */
.li.t-new .check { border-color:#2C2C31; }
.state.reported { background:#ECECEF; color:var(--ink); } .state.reported::before { background:#2C2C31; }
.state.onit { background:#F3F3F5; color:var(--muted); } .state.onit::before { background:#A9A9AE; }
.cal-d.today .cal-n { background:#2C2C31; }
.lq { width:auto; }
.seg b { background:#2C2C31; }
.qcard::before { background:#2C2C31; } .qcard.urgent::before, .qcard.is-urgent::before { background:var(--red); }
.stp.red .c { background:#2C2C31; border-color:#2C2C31; }
.popt i { background:#E2E2E0 !important; } .popt.mine i { background:#D3D3D0 !important; } .popt { background:#F3F3F5; }
.popt.mine { box-shadow:inset 0 0 0 1.5px #2C2C31; }

/* Attaching files and photos: projects and the project chat */
.pj-attach { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.pj-att { display:flex; align-items:center; gap:10px; padding:12px; border-radius:14px; text-align:left; background:linear-gradient(180deg,#FFFFFF,#F7F7F5); box-shadow:inset 0 1px 0 #fff, 0 0 0 .5px rgba(30,30,35,.08), 0 6px 14px -8px rgba(30,30,35,.18); }
.pj-att b { display:block; font-size:14px; font-weight:600; } .pj-att small { display:block; font-size:12px; color:var(--muted); line-height:16px; }
.pj-att-state { display:flex; align-items:center; gap:10px; margin-bottom:10px; padding:8px 10px; border-radius:12px; background:var(--page); font-size:13px; color:var(--muted); } .pj-att-state:empty { display:none; }
.pj-att-state img { width:44px; height:44px; object-fit:cover; border-radius:8px; }
.pj-att-state b { display:block; font-size:13.5px; font-weight:600; color:var(--ink); } .pj-att-state .lspin { width:16px; height:16px; margin:0; border-width:2px; }
.pj-or { margin:4px 0 10px; font-size:12px; color:var(--muted); text-align:center; }
.pj-cbar { padding-left:6px; } .pj-cb { width:36px; height:40px; flex:none; display:grid; place-items:center; color:var(--ink); border-radius:12px; } .pj-cb:active { background:var(--fill); }
.pj-chat-file { display:flex; align-items:center; gap:10px; margin-bottom:8px; padding:8px 10px; border-radius:14px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.08); }
.pj-chat-file img { width:44px; height:44px; object-fit:cover; border-radius:8px; } .pj-chat-file span { flex:1; min-width:0; } .pj-chat-file b { display:block; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pj-chat-file small { font-size:12px; color:var(--muted); }
.pj-cimg { display:block; margin-top:8px; } .pj-cimg img { display:block; max-width:min(260px, 100%); max-height:260px; border-radius:12px; object-fit:cover; }
.pj-cfile { display:flex; align-items:center; gap:10px; margin-top:8px; padding:8px 10px; border-radius:12px; background:var(--page); color:var(--ink); text-decoration:none; text-align:left; }
.pj-cfile span { flex:1; min-width:0; } .pj-cfile b { display:block; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pj-cfile small { font-size:12px; color:var(--muted); }
a.dl { display:grid; place-items:center; color:inherit; }
@media (max-width: 899px) { .pj-attach { grid-template-columns:1fr; } }
.gm2 .gmr:not(.pics):not(.ask) { grid-template-columns:repeat(7,1fr); } .gm2 .gmr:not(.pics) .gm span { font-size:12px; letter-spacing:-.1px; }
@media (max-width: 420px) { .gm2 .gmr:not(.pics):not(.ask) { grid-template-columns:repeat(4,1fr); row-gap:4px; } .gm2 .gmr:not(.pics) .gm span { font-size:12px; } }

/* ---------- Work items: closing with a reason ---------- */
.rs { padding:6px 22px 22px; } .rs-q { font-size:17px; font-weight:650; margin:4px 0 12px; }
.rs-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.rs-chip { height:32px; padding:0 13px; border-radius:999px; font-size:13.5px; font-weight:600; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); }
.rs-chip:active { background:var(--fill); }
.rs textarea { width:100%; padding:12px 14px; border-radius:14px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); font-size:15px; line-height:21px; }
.rs-tip { display:flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; color:var(--muted); }
.td-says, .td-closed { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 16px 0; padding:14px 16px; border-radius:16px; background:var(--card); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(30,30,35,.07), 0 6px 18px -10px rgba(30,30,35,.16); }
.td-says > div:first-child { flex:1; min-width:180px; } .td-says b, .td-closed b { display:block; font-size:15px; font-weight:650; } .td-says span, .td-closed small { display:block; margin-top:2px; font-size:13px; color:var(--muted); }
.td-says.calm { box-shadow:inset 0 0 0 1px var(--hair); background:transparent; }
.td-acts { display:flex; gap:8px; }
.td-closed > svg { color:#17171A; } .td-closed { box-shadow:inset 3px 0 0 #17171A, 0 0 0 .5px rgba(30,30,35,.07); }
.td-drop { display:block; margin:22px auto 0; font-size:13.5px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(0,0,0,.2); }

/* ---------- Decisions ---------- */
.dc-search { display:flex; align-items:center; gap:10px; height:44px; padding:0 14px; margin:14px 0 2px; border-radius:14px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); color:var(--muted); }
.dc-search input { flex:1; min-width:0; font-size:15px; color:var(--ink); }
.dc-list { padding:4px 0; }
.dc-row { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; text-align:left; } .dc-row + .dc-row { border-top:.5px solid var(--hair); }
.dc-row:hover { background:color-mix(in srgb, var(--ink) 3%, transparent); }
.dc-st { flex:none; font-size:12px; font-weight:650; padding:3px 9px; border-radius:999px; background:#ECECEF; color:var(--body); }
.dc-st.s-decided { background:rgba(123,166,147,.16); color:#17171A; } .dc-st.s-proposed { background:#2C2C31; color:#fff; } .dc-st.s-withdrawn { background:transparent; color:var(--muted); box-shadow:inset 0 0 0 1px var(--hair); }
.dc-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .dc-b b { font-size:15px; font-weight:600; } .dc-b small { font-size:13px; color:var(--muted); }
.dc-what { display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:600; color:#17171A; }
.dc-m { flex:none; display:flex; align-items:center; gap:10px; } .dc-m small { font-size:12px; color:var(--muted); }
.dc-none { padding:22px 16px; font-size:14px; color:var(--muted); }
.dcw .pj-back { margin-top:14px; }
.dc-head { margin:10px 4px 0; } .dc-head h1 { font-size:30px; line-height:36px; letter-spacing:-.5px; margin-top:10px; } .dc-head p { margin-top:8px; font-size:15px; line-height:22px; color:var(--body); max-width:62ch; }
.dc-record { margin:18px 0 0; padding:18px 20px; border-radius:20px; background:linear-gradient(180deg,#FFFFFF,#F9F9F7); box-shadow:inset 4px 0 0 #17171A, inset 0 1px 0 #fff, 0 0 0 .5px rgba(30,30,35,.07), 0 10px 26px -14px rgba(30,30,35,.2); }
.dc-record > span { font-size:12px; font-weight:650; color:#17171A; } .dc-record > b { display:block; margin-top:4px; font-size:22px; line-height:28px; font-weight:650; letter-spacing:-.3px; }
.dc-record p { margin-top:6px; font-size:14.5px; line-height:21px; color:var(--body); } .dc-record small { display:flex; align-items:center; gap:5px; margin-top:12px; font-size:12px; color:var(--muted); }
.dc-back { display:flex; gap:10px; margin-top:16px; padding:12px 14px; border-radius:14px; background:#F3F3F5; } .dc-back b { display:block; font-size:14px; } .dc-back span { font-size:13.5px; color:var(--body); }
.dc-card { margin-top:16px; padding:18px 20px; border-radius:20px; background:var(--card); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(30,30,35,.07), 0 6px 18px -10px rgba(30,30,35,.16); }
.dc-card h2 { font-size:16px; font-weight:650; margin-bottom:12px; }
.dc-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dc-step { display:flex; gap:10px; align-items:flex-start; } .dc-step i { width:20px; height:20px; flex:none; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px #C9C9CD; color:#fff; }
.dc-step.on i { background:#2C2C31; box-shadow:none; } .dc-step b { display:block; font-size:14px; font-weight:600; } .dc-step small { font-size:12px; color:var(--muted); line-height:16px; }
.dc-opts { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; padding-top:14px; border-top:.5px solid var(--hair); } .dc-opts > span { font-size:12.5px; color:var(--muted); margin-right:4px; }
.dc-opts b { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:999px; font-size:13.5px; font-weight:600; background:#F3F3F5; } .dc-opts b.won { background:#2C2C31; color:#fff; }
.dc-opts em { font-style:normal; font-size:12px; font-weight:600; color:var(--muted); }
.dc-link { display:flex; align-items:center; gap:8px; width:100%; margin-top:14px; padding-top:14px; border-top:.5px solid var(--hair); font-size:14px; font-weight:600; text-align:left; } .dc-link svg:last-child { margin-left:auto; color:var(--muted); }
.dc-pick { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; } .dc-pick button { height:36px; padding:0 14px; border-radius:12px; font-size:14px; font-weight:600; background:var(--page); box-shadow:inset 0 0 0 1px var(--hair); } .dc-pick button.on { background:#2C2C31; color:#fff; box-shadow:none; }
.dc-btns { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; } .dc-btns .pill { height:38px; padding:0 16px; font-size:14px; }
.dc-who { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.dc-open { display:flex; flex-direction:column; gap:6px; margin:6px 16px 4px; }
.dc-open button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:14px; text-align:left; background:var(--card); box-shadow:inset 3px 0 0 #2C2C31, 0 0 0 .5px rgba(30,30,35,.07); }
.dc-open span { flex:1; min-width:0; } .dc-open b { display:block; font-size:13.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dc-open small { font-size:12px; color:var(--muted); } .dc-open svg:last-child { color:var(--muted); }
@media (max-width: 899px) { .dc-steps { grid-template-columns:1fr; } .dc-head h1 { font-size:25px; line-height:31px; } }

/* ---------- Urgent rules for the office ---------- */
.urg-pol .grow-row { align-items:flex-start; flex-wrap:wrap; }
.urg-pol .seg { margin-left:auto; display:inline-flex; padding:3px; border-radius:12px; background:var(--fill); gap:2px; }
.urg-pol .seg button { height:30px; padding:0 12px; border-radius:9px; font-size:13px; font-weight:600; color:var(--body); } .urg-pol .seg button.on { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.1); }
.urg-pol.ro .seg button:not(.on) { opacity:.45; } .urg-pol.ro .grow-row { cursor:default; }
.up-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.up-chip { display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 8px 0 11px; border-radius:999px; font-size:13px; font-weight:600; background:#F3F3F5; color:var(--ink); }
.up-chip button { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:var(--muted); } .up-chip button:hover { background:#E4E4E1; color:var(--ink); }
.up-add { display:inline-flex; gap:6px; } .up-add input { width:170px; height:28px; padding:0 10px; border-radius:999px; font-size:13px; background:var(--page); box-shadow:inset 0 0 0 1px var(--hair); } .up-add button { height:28px; padding:0 12px; border-radius:999px; font-size:13px; font-weight:600; background:#2C2C31; color:#fff; }
@media (max-width: 899px) { .urg-pol .seg { margin:10px 0 0 34px; } }
.urg-pol .grow-row { align-items:center; } .urg-pol .up-types { align-items:flex-start; } .urg-pol .up-types .rl-ic { margin-top:1px; }
.urg-pol .seg button { white-space:nowrap; } .urg-pol .up-who .rl-t { flex:1 1 220px; }

/* ---------- Got it: only on urgent and priority pings ---------- */
.ackbar { display:flex; align-items:center; gap:10px; margin:6px 0 2px 38px; }
.m.them .ackbar { margin-left:38px; }
.ack-btn { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:12px; font-size:14px; font-weight:650; color:#fff; background:linear-gradient(180deg,#3A3A3F,#232327); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 3px 8px -2px rgba(0,0,0,.25); }
.ack-btn:active { transform:scale(.97); }
.ackbar span { font-size:12px; color:var(--muted); }

/* ---------- End of day ---------- */
.eod-g { padding:2px 0; }
.eod-row { display:flex; align-items:center; gap:12px; padding:12px 16px; } .eod-row + .eod-row { border-top:.5px solid var(--hair); }
.eod-dot { width:8px; height:8px; flex:none; border-radius:50%; background:#2C2C31; } .eod-dot.late { background:var(--red); } .eod-dot.calm { background:#C9C9CD; }
.eod-b { flex:1; min-width:0; cursor:pointer; } .eod-row.calm .eod-b { cursor:default; }
.eod-b b { display:block; font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .eod-b small { display:block; margin-top:2px; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eod-b em { font-style:normal; font-weight:650; color:var(--red); }
.eod-row .pill { flex:none; height:32px; padding:0 13px; font-size:13px; }
.eod-none { padding:14px 16px; font-size:14px; color:var(--muted); }
.eod-set { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:22px; padding:14px 16px; border-radius:16px; background:var(--card); box-shadow:0 0 0 .5px rgba(30,30,35,.07); font-size:14px; }
.eod-set select { height:34px; padding:0 10px; border-radius:10px; border:0; background:var(--page); box-shadow:inset 0 0 0 1px var(--hair); font:inherit; font-weight:600; color:var(--ink); }
.rl-part { margin:30px 4px 2px; padding-top:18px; border-top:.5px solid var(--hair); font-size:18px; font-weight:650; letter-spacing:-.2px; }
.tr-build { margin-top:10px; } .tr-build select { max-width:220px; }

/* ---------- Complaints ---------- */
.cp-row { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; text-align:left; } .cp-row + .cp-row { border-top:.5px solid var(--hair); } .cp-row:hover { background:color-mix(in srgb, var(--ink) 3%, transparent); }
.cp-urg { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--red); vertical-align:middle; }
.dc-st.s-onit { background:#ECECEF; color:var(--body); } .dc-st.cp-u { margin-left:6px; background:rgba(229,72,77,.1); color:#C9524B; }
.cp-facts { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; } .cp-facts span { display:block; font-size:12px; color:var(--muted); } .cp-facts b { display:block; margin-top:2px; font-size:14px; font-weight:600; }
.cp-log { margin-top:16px; padding-top:12px; border-top:.5px solid var(--hair); }
@media (max-width: 899px) { .cp-facts { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.wk-chip { height:28px; padding:0 11px; border-radius:999px; font-size:13px; font-weight:600; color:var(--body); background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); }
.wk-chip.on { color:#fff; background:#2C2C31; box-shadow:none; } .wk-chip:disabled { cursor:default; }

/* ---------- Planner: the calm day, and type a plan ---------- */
.plw { padding-bottom:0; display:flex; flex-direction:column; min-height:calc(100dvh - 60px); }
.pl-week { display:flex; align-items:center; gap:2px; margin:14px 0 4px; }
.pl-arrow { width:30px; height:44px; flex:none; display:grid; place-items:center; color:var(--muted); border-radius:10px; } .pl-arrow:hover { color:var(--ink); }
.pl-d { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:6px 0 8px; border-radius:16px; }
.pl-d small { font-size:12px; font-weight:600; color:var(--muted); } .pl-d b { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; font-size:17px; font-weight:600; }
.pl-d i { width:4px; height:4px; border-radius:50%; background:#C9C9CD; } .pl-d i.no { background:transparent; }
.pl-d.on b { background:var(--ink); color:#fff; } .pl-d.on small { color:var(--ink); } .pl-d.we b { color:#AEAEB2; } .pl-d.we.on b { color:#fff; }
.pl-d:hover:not(.on) b { background:rgba(0,0,0,.04); }
.pl-sum { display:flex; align-items:center; gap:10px; margin-top:8px; padding:12px 14px; border-radius:16px; background:var(--card); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(0,0,0,.06), 0 6px 18px -10px rgba(0,0,0,.14); font-size:14px; line-height:19px; color:var(--body); }
.pl-sum b { color:var(--ink); font-weight:600; } .pl-sum svg { flex:none; }
.pl-day { flex:1; padding:14px 0 10px; }
.pl-row { display:grid; grid-template-columns:58px 1fr; gap:10px; align-items:start; }
.pl-t { font-size:13px; font-weight:600; color:var(--muted); padding-top:12px; font-variant-numeric:tabular-nums; }
.pl-ev { display:block; width:100%; text-align:left; margin-bottom:8px; padding:10px 14px 11px; border-radius:16px; background:var(--card); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(0,0,0,.06), 0 6px 16px -10px rgba(0,0,0,.16); transition:box-shadow .15s; }
.pl-ev:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(0,0,0,.08), 0 10px 22px -10px rgba(0,0,0,.2); }
.pl-ev b { display:block; font-size:15.5px; font-weight:600; letter-spacing:-.1px; } .pl-ev span { display:block; margin-top:2px; font-size:13px; color:var(--muted); }
.pl-ev.past { opacity:.45; background:transparent; box-shadow:none; padding-left:2px; }
.pl-who { margin-top:8px !important; } .pl-faces { display:flex; } .pl-faces .av { margin-right:-6px; box-shadow:0 0 0 2px var(--card); }
.pl-free { margin:0 0 10px; padding:9px 14px; border-radius:14px; border:1px dashed #D3D3D6; font-size:13px; color:var(--muted); }
.pl-now { position:relative; height:0; margin:2px 0 12px 68px; border-top:1.5px solid var(--red); }
.pl-now::before { content:""; position:absolute; left:-5px; top:-5px; width:8px; height:8px; border-radius:50%; background:var(--red); }
.pl-now em { position:absolute; left:-68px; top:-9px; font-style:normal; font-size:12px; font-weight:700; color:var(--red); font-variant-numeric:tabular-nums; }
.pl-empty { padding:24px 4px; font-size:14px; color:var(--muted); }
.pl-ask { position:sticky; bottom:0; z-index:4; margin:0 -6px; padding:14px 6px calc(16px + env(safe-area-inset-bottom)); background:linear-gradient(180deg, color-mix(in srgb, var(--page) 0%, transparent) 0%, var(--page) 26%); }
.pl-pv { margin:0 2px 10px; padding:12px 14px; border-radius:18px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.07), 0 14px 30px -14px rgba(0,0,0,.25); }
.pl-pv-top { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--muted); } .pl-pv-top svg { color:var(--ink); }
.pl-pv h3 { margin-top:6px; font-size:16px; font-weight:650; letter-spacing:-.2px; }
.pl-facts { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .pl-facts span { height:26px; padding:0 10px; display:inline-flex; align-items:center; border-radius:999px; background:#F3F3F5; font-size:12.5px; font-weight:600; color:var(--body); }
.pl-pv-acts { display:flex; gap:8px; margin-top:12px; } .pl-pv-acts .pill { height:36px; padding:0 16px; font-size:14px; }
.pl-bar { display:flex; align-items:center; gap:8px; padding:6px 6px 6px 16px; border-radius:26px; background:#fff; box-shadow:0 0 0 .5px rgba(0,0,0,.09), 0 10px 26px -12px rgba(0,0,0,.28); }
.pl-bar input { flex:1; min-width:0; height:38px; font-size:15.5px; }
.pl-send { width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; }
.pl-hint { text-align:center; margin-top:8px; font-size:12px; color:var(--faint); }
@keyframes plIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .pl-pv { animation:none; } }
@media (max-width: 899px) { .pl-arrow { display:none; } .pl-row { grid-template-columns:50px 1fr; } .pl-now { margin-left:60px; } .pl-now em { left:-60px; } .pl-ask { padding-bottom:calc(92px + env(safe-area-inset-bottom)); } }
.pl-ev .pl-faces { display:flex; margin-top:0; } .pl-ev .pl-faces .av { margin-top:0; }
.pl-ev .pl-who { font-size:12px; }
.pl-ev .av { display:grid; margin-top:0; }
.pl-now { border-top:0; height:2px; background:var(--red); }

/* Polls: closing on their own, or ended early by whoever asked */
.poll.closed .popt { cursor:default; } .poll.closed .popt:not(.won) .pt { color:var(--muted); }
.popt.won .pt { font-weight:650; } .popt.won { box-shadow:inset 0 0 0 1.5px #2C2C31; }
.pend { display:inline; padding:0; font-size:inherit; font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:2px; background:none; }

/* Decision record: who decided, approved and proposed it */
.dc-people { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:14px; padding-top:14px; border-top:.5px solid var(--hair); }
.dc-people > div { display:grid; grid-template-columns:26px 1fr; column-gap:8px; align-items:center; }
.dc-people span { grid-column:1 / -1; font-size:12px; color:var(--muted); margin-bottom:6px; }
.dc-people b { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dc-people small { grid-column:2; margin-top:0 !important; font-size:12px !important; }
.dc-b small + small { display:none; }
@media (max-width: 899px) { .dc-people { grid-template-columns:1fr; } }

/* Signing in with a PIN */
.lconn input[name="pin"], .lconn input[name="pin2"] { font-size:24px; letter-spacing:10px; text-align:center; font-variant-numeric:tabular-nums; }
.lacct-code.warn { width:100%; background:#FFF6E8; color:#7A5410; cursor:pointer; text-align:left; } .lacct-code.warn b { letter-spacing:0; font-size:13px; }
.lacct-note { margin-top:12px; font-size:12.5px; color:var(--muted); line-height:18px; }
/* People and access (the person in charge) */
.acc { padding-bottom:16px; }
.acc-add { padding:0 16px 8px; }
.acc-list { padding:4px 0; }
.acc-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:12px 16px; border-top:.5px solid var(--hair); }
.acc-row .av { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600; background:linear-gradient(180deg, hsl(var(--h) 40% 96%), hsl(var(--h) 28% 90%)); color:hsl(var(--h) 22% 34%); }
.acc-t { min-width:0; } .acc-t b { display:block; font-weight:600; font-size:14.5px; } .acc-t small { display:block; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acc-st { font-size:12px; font-weight:600; padding:3px 8px; border-radius:7px; background:#F3F3F5; color:#17171A; white-space:nowrap; }
.acc-st.dk { background:var(--ink); color:#fff; } .acc-st.soft { background:var(--fill); color:var(--body); } .acc-st.warn { background:#FFF2DD; color:#8A5A12; } .acc-st.red { background:#FDECEC; color:#C93A3F; }
.acc-acts { grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.acc-acts .pill { height:30px; font-size:12.5px; padding:0 12px; }
.acc-foot { padding:8px 16px 0; }
.acc-form { padding:4px 20px 8px; }
.acc-form label { display:block; font-size:13px; font-weight:600; color:var(--body); margin-bottom:14px; }
.acc-form input, .acc-form select { display:block; width:100%; margin-top:6px; height:46px; padding:0 14px; border-radius:12px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); font-size:16px; color:var(--ink); border:0; }
.acc-form input:focus, .acc-form select:focus { outline:none; box-shadow:inset 0 0 0 2px var(--ink); }
.acc-pin { display:flex; gap:8px; align-items:center; } .acc-pin input { flex:1; font-size:22px; letter-spacing:8px; font-variant-numeric:tabular-nums; } .acc-pin .pill { margin-top:6px; flex:none; }
.acc-check { display:flex !important; gap:10px; align-items:flex-start; font-weight:500 !important; line-height:19px; } .acc-check input { width:20px; height:20px; margin:0; flex:none; accent-color:var(--ink); box-shadow:none; }
.acc-note { font-size:13px; color:var(--muted); line-height:19px; margin:-4px 0 14px; } .acc-note.top { margin:0 0 16px; color:var(--body); }
.acc-done { padding:8px 20px 4px; text-align:center; }
.acc-tick { width:52px; height:52px; margin:6px auto 10px; border-radius:50%; display:grid; place-items:center; background:#F3F3F5; color:#17171A; font-size:24px; font-weight:700; }
.acc-done h3 { font-size:19px; font-weight:650; } .acc-done p { font-size:14px; color:var(--body); line-height:20px; margin:8px 0 14px; }
.acc-btns { display:flex; gap:8px; justify-content:center; margin-bottom:16px; } .acc-btns .pill { text-decoration:none; }
.acc-pinshow { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-radius:14px; background:var(--fill); margin-top:4px; } .acc-pinshow span { font-size:13px; color:var(--body); } .acc-pinshow b { font-size:26px; letter-spacing:4px; font-variant-numeric:tabular-nums; }

/* Places on the office's plan */
.acc-meter { margin:0 16px 12px; padding:12px 14px; border-radius:14px; background:var(--fill); }
.acc-mt { display:flex; align-items:baseline; gap:6px; font-size:13px; color:var(--body); } .acc-mt b { font-size:15px; font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums; } .acc-mt span { margin-left:auto; font-size:12px; color:var(--muted); }
.acc-bar { height:6px; border-radius:3px; background:rgba(0,0,0,.07); margin-top:9px; overflow:hidden; } .acc-bar i { display:block; height:100%; border-radius:3px; background:var(--ink); transition:width .4s; } .acc-bar.full i { background:#B9861F; }
.acc-add { display:flex; align-items:center; gap:12px; padding:0 16px 10px; } .acc-add small { font-size:12.5px; color:var(--muted); }
.acc-nudge { margin:0 16px 12px; padding:14px 16px; border-radius:16px; background:#FFF8EC; box-shadow:inset 0 0 0 1px rgba(185,134,31,.18); }
.acc-nudge b { display:block; font-size:14.5px; font-weight:650; color:#5E4410; } .acc-nudge p { font-size:13.5px; line-height:19px; color:#6E5520; margin:4px 0 12px; }
.acc-nbtn { display:flex; flex-wrap:wrap; gap:8px; }
.acc-planbox { display:flex; align-items:center; gap:12px; text-align:left; padding:14px 16px; border-radius:14px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); margin:4px 0 14px; }
.acc-planbox b { display:block; font-size:15px; font-weight:650; } .acc-planbox small { font-size:12.5px; color:var(--muted); } .acc-planbox span { margin-left:auto; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------- One look with the front page: white, black, purple the only accent ---------- */
:root, :root.bright { --page:#FFFFFF; --card:#FFFFFF; --fill:#F3F3F5; --soft:#FFFFFF; --hair:rgba(20,20,30,.08);
  --ink:#17171A; --body:#3D3D45; --muted:#62626B; --faint:#8E8E97; --green:#17171A; --accent:#6E56CF; }
body { font-family:Geist, Inter, -apple-system, "Segoe UI", system-ui, sans-serif; letter-spacing:-.012em; }
@media (min-width: 900px) { .side { background:#FFFFFF; border-right:1px solid var(--hair); } }
.bar { background:rgba(255,255,255,.88); }

/* ---------- The menu: the same as the front page's ---------- */
@media (min-width: 900px) { .side { width:248px; padding:16px 12px 14px; } }
.side .nws, .drawer .nws { display:flex; align-items:center; gap:10px; padding:6px 8px 6px 6px; margin-bottom:18px; }
.nws-logo { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(180deg,#34343B,#141417); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px -2px rgba(0,0,0,.4); }
.nws b { display:block; font-weight:600; font-size:14.5px; line-height:17px; } .nws small { display:block; color:var(--muted); font-size:12px; line-height:15px; }
.side .nav, .drawer .nav { display:flex; align-items:center; gap:12px; width:100%; height:40px; padding:0 10px; border-radius:11px; color:var(--body); font-weight:500; font-size:14.5px; text-align:left; transition:background .15s; }
.side .nav:hover, .drawer .nav:hover { background:#F6F6F7; }
.side .nav .ic, .drawer .nav .ic { color:#6E6E77; }
.side .nav.on, .drawer .nav.on { background:#fff; color:var(--ink); font-weight:600; box-shadow:0 0 0 1px rgba(20,20,30,.07), 0 1px 2px rgba(20,20,30,.06), 0 4px 12px -4px rgba(20,20,30,.10); }
.side .nav.on .ic, .drawer .nav.on .ic { color:var(--ink); }
.side .nav.sm, .drawer .nav.sm { height:34px; font-size:13.5px; padding-left:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.npdot { width:7px; height:7px; border-radius:50%; background:#A3A3AB; flex:none; }
.nbadge { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px; font-size:12px; font-weight:600; display:grid; place-items:center; }
.nbadge.dk { background:var(--ink); color:#fff; } .nbadge.dk:empty { min-width:8px; width:8px; height:8px; padding:0; background:var(--red); }
.nlab { margin:22px 10px 8px; font-size:12px; font-weight:500; color:var(--muted); }
.nme { display:flex; align-items:center; gap:10px; padding:12px 8px 2px; border-top:1px solid var(--hair); }
.nme b { display:block; font-size:13.5px; font-weight:600; } .nme small { display:block; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.ncog { margin-left:auto; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#6E6E77; } .ncog:hover, .ncog.on { background:#F4F4F5; color:var(--ink); }

/* Black, white and purple: illustrations and people's colours go grey too */
.art svg, .thumb svg, .pk svg, .pj-thumb svg { filter:grayscale(1) contrast(1.05); }
.av:not(.pri) { filter:grayscale(1); }
.em-av { background:#F1F1F3 !important; color:#3D3D45 !important; }
:root { --amber:#8E8E97; }

/* No search: the pages bring what you need to you */
[data-go="search"], .dc-search, label.search:has(#pq) { display:none !important; }
.pc-art, .parcel svg, .vis-ic, .visitor svg, [class*="visitor"] svg { filter:grayscale(1) contrast(1.05); }
.card.visit .art svg, .card.visit > svg, .card.visit .k + svg { filter:grayscale(1); }
.card.visit svg, .card svg[viewBox="0 0 120 120"] { filter:grayscale(1); }

/* One clear focus ring for keyboards, everywhere */
:focus-visible { outline:2px solid #6E56CF !important; outline-offset:2px; border-radius:inherit; }
/* Finger-sized taps on touch screens: at least 44px */
@media (pointer: coarse) {
  .pill, .icon-btn, .round, .chip, .seg button, .nav, .acts button, .acts a, .bk, .gh, .lgo, .dopt { min-height:44px; }
  .icon-btn, .round { min-width:44px; }
}
/* Readable greys on white */
:root, :root.bright { --faint:#6E6E77; }
/* Not started, on it, done: each its own mark */
.flow .fm { width:10px; height:10px; border-radius:50%; display:inline-block; }
.flow .fm.new { background:#fff; box-shadow:inset 0 0 0 1.6px var(--ink); }
.flow .fm.doing { background:conic-gradient(var(--ink) 0 50%, #fff 0); box-shadow:inset 0 0 0 1.6px var(--ink); }
.flow .fm.done { background:var(--ink); }
/* "I've asked" stays on one line */
.seg button { white-space:nowrap; padding:0 10px; }
/* The phone bar, every icon with its word */
.tabbar.lab a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:58px; min-height:48px; }
.tabbar.lab a span { display:block !important; font-size:11.5px; font-weight:500; line-height:14px; }
.tabbar.lab a.on span { font-weight:650; }
@media (max-width: 899px) { .tabbar.lab a, .tabbar.lab a.on { height:auto; padding:5px 9px; border-radius:16px; } .tabbar.lab a.on i { left:auto; right:12px; top:4px; } .tabbar.lab a i { top:4px; right:12px; } }

/* 10, 11. One red (readable), black and white for everything else */
:root, :root.bright { --red:#C93A3F; }
.tabbar a i { background:#fff !important; box-shadow:0 0 0 2px #141416 !important; }
.tabbar a.hot i { background:var(--red) !important; }
.state.fixed, .pill.green, .q-fixed .state, .dc-st.decided, .st-done { background:#F1F1F3 !important; color:var(--ink) !important; }
.pl-now, .pl-nowline, .pln-now { background:#6E56CF !important; border-color:#6E56CF !important; }

.tlater { display:flex; align-items:center; gap:8px; margin:4px 16px 10px; padding:10px 12px; border-radius:12px; background:var(--fill); color:var(--body); font-size:13.5px; font-weight:500; text-decoration:none; }
.tlater b { margin-left:auto; font-weight:650; color:var(--ink); }
.pl-now::before { background:#6E56CF !important; } .pl-now em { color:#6E56CF !important; }

/* 18. Every back page starts at the same left and top edge; its side panel lines up with the title */
@media (min-width: 900px) {
  .pane > .head, .pane .pg-head, .pane > .bar + .head, .pane .pg > .pg-head { padding-left:20px !important; padding-right:20px !important; }
  .pane .bar { padding-left:24px; padding-right:24px; }
  .rail { padding-top:84px !important; }
}
/* The lone + and add icons in a top bar say what they do */
@media (min-width: 900px) {
  .bar .icon-btn[aria-label] { width:auto; min-width:0; height:38px; padding:0 14px 0 10px; gap:6px; display:inline-flex; align-items:center; border-radius:11px; background:#17171A; color:#fff; font-size:13.5px; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px #111; }
  .bar .icon-btn[aria-label] svg { width:18px; height:18px; color:#fff; }
  .bar .icon-btn[aria-label]::after { content:attr(aria-label); }
}
/* The Email page: white, like every other page */
.pane.plist, .em-list, .em-pane { background:#fff !important; }
/* 19. Nothing under 12px: planner day names; initials only in avatars big enough to read them */
.pl-day small, .pl-dn, .pl-week b + small, .pl-wd { font-size:12px !important; }

/* ---------- Spaces ---------- */
.sic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; font-weight:650; font-size:16px; color:#fff; background:linear-gradient(180deg,#34343B,#17171A); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
.sic.lt { background:#F1F1F3; color:var(--ink); box-shadow:inset 0 0 0 1px rgba(20,20,30,.06); }
.spfind { margin:8px 16px 0; border-radius:20px; background:#fff; box-shadow:0 0 0 1px rgba(20,20,30,.1), 0 1px 2px rgba(20,20,30,.04), 0 18px 40px -22px rgba(20,20,30,.25); overflow:hidden; }
.spbar { display:flex; align-items:center; gap:12px; height:60px; padding:0 18px; color:#55555E; cursor:text; }
.spbar input { flex:1; min-width:0; height:100%; border:0; outline:0; background:none; font:inherit; font-size:17px; font-weight:500; color:var(--ink); }
.spbar input::placeholder { color:var(--faint); font-weight:400; }
.spbar:focus-within { box-shadow:inset 0 -1px 0 rgba(20,20,30,.08); }
.sphint { font-size:12.5px; color:var(--muted); white-space:nowrap; }
#spres:empty { display:none; }
.spfl { padding:6px; border-top:1px solid var(--hair); }
.spfh { padding:10px 12px 6px; font-size:12px; font-weight:600; color:var(--muted); }
.spr { display:flex; align-items:center; gap:14px; padding:12px; border-radius:13px; }
.spr.hl { background:#F6F6F7; }
.spr .t, .sprow .t { flex:1; min-width:0; } .spr .t b, .sprow .t b { display:block; font-size:15px; font-weight:600; }
.spr .t small, .sprow .t small { display:block; color:var(--muted); font-size:13px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spr mark { background:none; color:inherit; text-decoration:underline; text-decoration-color:#6E56CF; text-decoration-thickness:2px; text-underline-offset:3px; }
.spnone { padding:12px; color:var(--muted); font-size:13.5px; }
.spnear { margin:4px 12px 8px; padding:12px 14px; border-radius:13px; background:#FAFAFB; box-shadow:inset 0 0 0 1px rgba(20,20,30,.06); display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--body); }
.spnear b { color:var(--ink); }
.spstart { display:flex; align-items:center; gap:14px; margin:0 6px 6px; padding:14px 12px; border-top:1px solid var(--hair); }
.spstart .t b { display:block; font-size:15px; font-weight:600; } .spstart .t small { color:var(--muted); font-size:13px; }
.spplus { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px var(--ink); color:var(--ink); flex:none; }
.spsh { display:flex; align-items:center; gap:8px; margin:30px 18px 12px; } .spsh h2 { font-size:15px; font-weight:600; }
.spct { height:20px; padding:0 7px; border-radius:10px; background:#F4F4F5; display:grid; place-items:center; font-size:12px; font-weight:600; }
.spcells { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:0 16px; border-radius:18px; background:#fff; overflow:hidden; box-shadow:0 0 0 1px rgba(20,20,30,.08), 0 1px 2px rgba(20,20,30,.04), 0 18px 40px -24px rgba(20,20,30,.22); }
.spcell { padding:20px 20px 16px; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); display:flex; flex-direction:column; gap:12px; min-height:206px; min-width:0; cursor:pointer; transition:background .15s; }
.spcell:hover { background:#FAFAFB; }
.spcell:nth-child(3n) { border-right:0; }
.spch { display:flex; align-items:center; gap:12px; } .spch > div { flex:1; min-width:0; } .spch b { display:block; font-size:15.5px; font-weight:600; }
.spch small { display:block; color:var(--muted); font-size:12.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spnew { height:22px; padding:0 8px; border-radius:11px; background:var(--ink); color:#fff; font-size:12px; font-weight:600; display:grid; place-items:center; white-space:nowrap; }
.spdesc { font-size:13.5px; line-height:20px; color:var(--body); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.splast { font-size:13px; line-height:19px; color:var(--muted); padding-left:10px; border-left:2px solid #E4E4E8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.splast b { color:var(--ink); font-weight:600; margin-right:6px; }
.spcf { display:flex; align-items:center; gap:8px; margin-top:auto; font-size:12.5px; color:var(--muted); } .spcf .grow { flex:1; }
.spfaces { display:flex; gap:4px; } .spmore { font-size:12px; font-weight:500; }
.splock { display:inline-flex; color:var(--muted); }
.spnewcell { align-items:center; justify-content:center; text-align:center; gap:6px; color:var(--muted); } .spnewcell b { color:var(--ink); font-size:14.5px; font-weight:600; } .spnewcell small { font-size:12.5px; }
.spnewcell .spplus { box-shadow:inset 0 0 0 1px rgba(20,20,30,.14); margin-bottom:6px; }
.splist { margin:0 16px 40px; border-radius:18px; background:#fff; box-shadow:0 0 0 1px rgba(20,20,30,.08), 0 1px 2px rgba(20,20,30,.04); overflow:hidden; }
.sprow { display:flex; align-items:center; gap:14px; padding:14px 16px; } .sprow + .sprow { border-top:1px solid var(--hair); }
.spreadonly { margin:8px 16px 16px; padding:14px 16px; border-radius:14px; background:#F6F6F8; color:var(--body); font-size:13.5px; text-align:center; }
@media (max-width: 1200px) { .spcells { grid-template-columns:repeat(2, minmax(0,1fr)); } .spcell:nth-child(3n) { border-right:1px solid var(--hair); } .spcell:nth-child(2n) { border-right:0; } }
@media (max-width: 699px) { .spcells { grid-template-columns:minmax(0,1fr); } .spcell { border-right:0 !important; } .sphint { display:none; } }
/* The Ping mark as the menu logo */
.nws-logo { overflow:hidden; background:#000 !important; } .nws-logo img { display:block; width:100%; height:100%; }

/* Black side menu on every page, matching the front page. */
.side, .drawer:has(.nws) { background:#000 !important; border-right:0 !important; color:#fff; }
.side .nws b, .drawer .nws b, .side .nme b, .drawer .nme b { color:#fff; }
.side .nws small, .drawer .nws small, .side .nlab, .drawer .nlab, .side .nme small, .drawer .nme small { color:#fff; opacity:.72; }
.side .nav, .drawer .nav { color:#B4B4BA !important; font-weight:450; font-size:15.5px; height:42px; letter-spacing:-.005em; background:none !important; box-shadow:none !important; }
.side .nav svg, .drawer .nav svg { color:#B4B4BA !important; }
.side .nav:hover, .side .nav:hover svg, .drawer .nav:hover, .drawer .nav:hover svg { color:#fff !important; }
.side .nav.on, .side .nav.on svg, .drawer .nav.on, .drawer .nav.on svg { color:#fff !important; font-weight:500; }
.side .nav.sm, .drawer .nav.sm { font-size:14.5px; height:36px; }
.side .npdot, .drawer .npdot { background:#fff; opacity:.6; }
.side .nbadge, .drawer .nbadge { color:#B4B4BA; }
.side .nbadge.dk, .drawer .nbadge.dk { background:#fff; color:#000; }
.side .nbadge.dk:empty, .drawer .nbadge.dk:empty { background:var(--red); }
.side .nme, .drawer .nme { border-top:1px solid rgba(255,255,255,.12); }
.side .ncog, .drawer .ncog { color:#fff; } .side .ncog:hover, .side .ncog.on, .drawer .ncog:hover, .drawer .ncog.on { background:rgba(255,255,255,.1); color:#fff; }
.side .nme .av, .drawer .nme .av { background:#26262B !important; color:#fff !important; }
.side .nws-logo, .drawer .nws-logo { box-shadow:0 0 0 1px rgba(255,255,255,.14); }

/* Messages on a computer: framed boxes like the front page. */
@media (min-width: 900px) {
  .main.split { background:#fff; padding:20px 0 20px 20px; gap:20px; }
  .main.split > .pane { height:calc(100dvh - 40px); border-radius:20px; background:#fff; overflow:hidden auto; scrollbar-width:none;
    box-shadow:0 0 0 1px rgba(20,20,30,.11), 0 1px 2px rgba(20,20,30,.05), 0 6px 16px -6px rgba(20,20,30,.10), 0 22px 44px -26px rgba(20,20,30,.20); }
  .main.split > .pane::-webkit-scrollbar { display:none; }
  .main.split > .pane.detail { overflow:hidden; }
  .main.split .rail { padding:0 20px 0 0 !important; height:calc(100dvh - 40px); }
  .main.split .rp { padding:0 0 8px; overflow:hidden; border-radius:20px; background:#fff;
    box-shadow:0 0 0 1px rgba(20,20,30,.11), 0 1px 2px rgba(20,20,30,.05), 0 6px 16px -6px rgba(20,20,30,.10), 0 22px 44px -26px rgba(20,20,30,.20) !important; transform:none !important; }
  .main.split .rp-h { margin:0 0 6px; padding:14px 16px 12px 18px; background:#FAFAFB; border-bottom:1px solid rgba(20,20,30,.08); }
  .main.split .rp-h b { font-size:14.5px; } .main.split .rp-h span { color:var(--muted); }
  .main.split .rp-sub { padding:0 18px; }
  .main.split .rp-row, .main.split .rp-post { padding-left:18px; padding-right:16px; border-radius:0; }
  .main.split .rp-new { width:auto; margin:8px 14px 6px; }
  .main.split .plist .lq.is-ex, .main.split .plist .quietline { display:none !important; }
  .main.split .rail { overflow-y:auto; gap:20px; }
  /* On Messages you can just write: no New message button, no empty bar above the title. */
  .main.split .plist > .bar { display:none; }
  .main.split .plist .head { padding-top:22px; }
  .main.split .rp { flex:none; }
  .main.split .plist .head h1 { font-size:26px; }
  .main.split .plist .row .name { font-size:14.5px; font-weight:600; }
  .main.split .plist .row .time { font-size:12px; color:var(--faint, #8E8E97); font-weight:500; }
  .main.split .plist .row .prev { font-size:13px; line-height:18px; }
  .main.split .plist .row .av { width:34px !important; height:34px !important; font-size:11.5px !important; margin-top:13px; }
  .main.split .plist .row .dcol { padding-top:26px; }
}

/* Spaces, tidied: one left edge, framed boxes like the front page, no repeated hint. */
.sphint { display:none; }
.spfind, .spcells, .splist { margin-left:20px !important; margin-right:20px !important; box-shadow:0 0 0 1px rgba(20,20,30,.11), 0 1px 2px rgba(20,20,30,.05), 0 6px 16px -6px rgba(20,20,30,.10), 0 22px 44px -26px rgba(20,20,30,.20) !important; border-radius:20px !important; }
.spsh { margin:32px 20px 12px; } .spsh h2 { font-size:14.5px; }
.spct { background:#fff; box-shadow:0 0 0 1px rgba(20,20,30,.10); color:var(--body); font-size:11.5px; }
.spcell { min-height:196px; }
.pane > .bar + .head:has(+ .spfind), .pane > .head:has(+ .spfind) { padding-left:2px !important; padding-right:2px !important; }
.spnewcell { background:#FCFCFD; }
/* Side panels framed with a header strip, the same as Messages. */
@media (min-width: 900px) {
  .rail .rp:has(> .rp-h) { padding:0 0 8px; overflow:hidden; border-radius:20px; background:#fff; flex:none; box-shadow:0 0 0 1px rgba(20,20,30,.11), 0 1px 2px rgba(20,20,30,.05), 0 6px 16px -6px rgba(20,20,30,.10), 0 22px 44px -26px rgba(20,20,30,.20) !important; transform:none !important; }
  .rail .rp > .rp-h { margin:0 0 6px; padding:14px 16px 12px 18px; background:#FAFAFB; border-bottom:1px solid rgba(20,20,30,.08); }
  .rail .rp-h b { font-size:14.5px; } .rail .rp-h span { color:var(--muted); }
  .rail .rp:has(> .rp-h) .rp-sub { padding:0 18px; }
  .rail .rp:has(> .rp-h) .rp-row, .rail .rp:has(> .rp-h) .rp-post { padding-left:18px; padding-right:16px; border-radius:0; }
  .rail .rp:has(> .rp-h) .rp-new { width:auto; margin:8px 14px 6px; }
  .rail { gap:20px; }
}


/* Projects, tidied: one left edge, You owe and Owed to you as two framed boxes, black actions. */
@media (min-width: 900px) {
  .pane .pjw > .pg-head, .pjw .pg-head { padding-left:0 !important; padding-right:0 !important; }
  .pjw .pj-projects { gap:20px !important; }
  .pjw .gl { margin-left:0; margin-right:0; font-size:14.5px; font-weight:600; color:var(--ink); margin-top:28px; margin-bottom:12px; }
  .pjw .gl span { margin-left:8px; height:20px; padding:0 7px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px rgba(20,20,30,.10); font-size:11.5px; font-weight:600; color:var(--body); display:inline-grid; place-items:center; vertical-align:1px; }
  .pjw .pj-ledger { padding:0 !important; background:none !important; box-shadow:none !important; gap:20px !important; border-radius:0 !important; align-items:start; }
  .pjw .pj-col { padding:0 0 4px !important; border:0 !important; border-radius:20px; background:#fff; overflow:hidden; box-shadow:0 0 0 1px rgba(20,20,30,.11), 0 1px 2px rgba(20,20,30,.05), 0 6px 16px -6px rgba(20,20,30,.10), 0 22px 44px -26px rgba(20,20,30,.20); }
  .pjw .pj-col-h { margin:0; padding:14px 18px 12px; background:#FAFAFB; border-bottom:1px solid rgba(20,20,30,.08); gap:10px; }
  .pjw .pj-big { font-size:22px; line-height:24px; letter-spacing:-.5px; }
  .pjw .pj-col-h h2 { font-size:14.5px !important; line-height:18px !important; }
  .pjw .pj-col-h small { font-size:12px; }
  .pjw .pj-ob { padding:14px 18px; border-top:0; border-bottom:1px solid rgba(20,20,30,.06); }
  .pjw .pj-ob:last-child { border-bottom:0; }
  .pjw .pj-ob-t { font-size:14.5px !important; }
  .pjw .pj-ob-a .pill { color:#fff !important; background:linear-gradient(180deg,#34343B,#17171A) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px #111, 0 3px 8px -3px rgba(0,0,0,.4) !important; }
  .pjw .pj-ledger > p, .pjw .pj-ledger > .pj-rule, .pjw .pj-ledger > :last-child:not(.pj-col) { grid-column:1 / -1; margin:0 !important; background:none !important; box-shadow:none !important; padding:0 4px !important; color:var(--muted); font-size:12.5px; }
  .pjw .pj-card { box-shadow:0 0 0 1px rgba(20,20,30,.11), 0 1px 2px rgba(20,20,30,.05), 0 6px 16px -6px rgba(20,20,30,.10), 0 22px 44px -26px rgba(20,20,30,.20) !important; border-radius:20px !important; }
  .rail .rp { box-shadow:0 0 0 1px rgba(20,20,30,.11), 0 1px 2px rgba(20,20,30,.05), 0 6px 16px -6px rgba(20,20,30,.10), 0 22px 44px -26px rgba(20,20,30,.20) !important; }
}
/* The same small lift as the front page, on boxes across the other pages (computers only). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .rail .rp, .list, .pj-card, .pj-col, .splist, .tk-group, .tgroup {
    transition:transform .18s ease, box-shadow .18s ease !important;
  }
  .rail .rp:hover, .list:hover, .pj-card:hover, .pj-col:hover, .splist:hover {
    transform:translateY(-2px) !important;
    box-shadow:0 0 0 1px rgba(20,20,30,.14), 0 2px 4px rgba(20,20,30,.06), 0 10px 22px -8px rgba(20,20,30,.14), 0 28px 52px -26px rgba(20,20,30,.26) !important;
  }
}

/* A clear gap between the main boxes and the side panel on every back page. */
@media (min-width: 900px) {
  .main:not(.split) > .rail { padding-left:28px !important; width:calc(clamp(320px, 24vw, 420px) + 28px) !important; }
  .main:not(.split) > .pane { padding-right:4px; }
}

/* The menu logo sits straight on the black menu, with no frame. */
.nws-logo, .side .nws-logo, .drawer .nws-logo { box-shadow:none !important; border-radius:0 !important; background:none !important; }

/* The top bar on a computer: the same as the front page. */
@media (min-width: 900px) {
  .pane > .bar { height:64px; padding:0 24px !important; gap:12px; background:rgba(255,255,255,.92) !important; border-bottom:1px solid rgba(20,20,30,.055); }
  .pane > .bar .menu-btn { display:none; }
  .tb-info { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--muted); white-space:nowrap; }
  .tb-info i { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.7; }
  .tb-tools { display:flex; align-items:center; gap:4px; margin-left:4px; }
  .tb-ib { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--ink); }
  .tb-ib:hover { background:#F4F4F5; }
  .tb-tools [data-go="search"] { display:grid !important; }
  .tb-msg { height:40px; margin-left:8px; padding:0 18px; border-radius:12px; color:#fff; font-size:14.5px; font-weight:600;
    background:linear-gradient(180deg,#34343B,#17171A); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px #111, 0 3px 8px -3px rgba(0,0,0,.4); }
  .tb-msg:hover { filter:brightness(1.15); }
}

/* Messages: the same clear gaps between the list, the chat and the side panel. */
@media (min-width: 900px) {
  .main.split { gap:34px !important; padding:24px 0 24px 32px !important; }
  .main.split > .pane, .main.split .rail { height:calc(100dvh - 48px) !important; }
  .main.split .rail { padding:0 32px 0 0 !important; }
}
@media (min-width: 900px) and (max-width: 1500px) {
  .main.split { gap:30px !important; }
  .main.split .pane.plist { width:320px !important; }
  .main.split .rail { width:300px !important; }
}

/* The visitor pass: a blue outline pass, so visitors stand out. */
.vpass, .vpass svg { filter:none !important; }
.vpass svg rect:first-of-type { fill:#EEF4FF; stroke:#2F6FEB; }
.vpass svg rect:nth-of-type(2), .vpass svg circle, .vpass svg path { fill:#2F6FEB; }

/* Side panels keep their whole frame: room for the edges and shadow inside the scrolling column. */
@media (min-width: 900px) {
  .rail { padding-left:14px !important; margin-left:-14px; padding-bottom:28px !important; }
  .main:not(.split) > .rail { padding-left:32px !important; width:calc(clamp(320px, 24vw, 420px) + 32px) !important; }
  .main.split .rail { padding:6px 32px 28px 14px !important; margin:-6px 0 0 -14px; }
}