/* ==========================================================================
   Nutricamp — theme tokens (measured against the reference, dark first)
   ========================================================================== */
:root {
  --font: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --radius: 8px;
  --nav-h: 56px;
  --footer-h: 48px;
  --sheet-x: 48px;
}
:root[data-theme="dark"] {
  --bg: #0b151b;
  --sheet: #17262e;
  --bar: #1b2930;
  --card: #1b2930;
  --card-border: #475257;
  --line: rgba(225,229,232,.12);
  --text: #e1e5e8;
  --text-muted: #a8afb3;
  --text-faint: #6f7f86;
  --tool: #fbbda8;
  --alert: #fa8b68;
  --accent: #6ab3fd;
  --accent-text: #0e1d24;
  --link: #6ab3fd;
  --danger: #e5484d;
  --brown: #5f4d2c;
  --brown-soft: #3f3424;
  --green: #4caf7a;
  --bubble: #23363f;
  --chip: rgba(225,229,232,.05);
  --chip-strong: rgba(225,229,232,.1);
  --hover: rgba(225,229,232,.06);
  --input-bg: rgba(225,229,232,.05);
  --shadow: 0 8px 30px rgba(0,0,0,.5);
  --pill-active: #1b2930;
}
:root[data-theme="light"] {
  --bg: #f3f2ee;
  --sheet: #ffffff;
  --bar: #f6f5f1;
  --card: #ffffff;
  --card-border: #d9d6cd;
  --line: rgba(0,0,0,.1);
  --text: #283136;
  --text-muted: #5f6b71;
  --text-faint: #9aa4a9;
  --tool: #c7452a;
  --alert: #c7452a;
  --accent: #1e6fd9;
  --accent-text: #ffffff;
  --link: #1e6fd9;
  --danger: #d8443c;
  --brown: #ffe9b5;
  --brown-soft: #fff4d6;
  --green: #2e9b5f;
  --bubble: #f0eee8;
  --chip: rgba(0,0,0,.05);
  --chip-strong: rgba(0,0,0,.1);
  --hover: rgba(0,0,0,.04);
  --input-bg: #ffffff;
  --shadow: 0 8px 30px rgba(0,0,0,.14);
  --pill-active: #ffffff;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p { margin: 0 0 .75em; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; }
svg.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.muted { color: var(--text-muted); } .faint { color: var(--text-faint); }
.small { font-size: 14px; } .xsmall { font-size: 12px; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 8px; } .row--between { justify-content: space-between; } .wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
kbd { font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--chip-strong); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; color: var(--text); }

/* ==========================================================================
   Top nav
   ========================================================================== */
.topnav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; padding: 0 8px 4px; z-index: 50; background: var(--bg); }
.topnav__left { display: flex; } .topnav__right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .topnav__center { display: flex; justify-content: center; }
.topnav__home { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 8px; border-radius: 8px; color: var(--text); font-size: 14px; background: rgba(225,229,232,.03); }
.topnav__home:hover { background: var(--hover); text-decoration: none; }
.topnav__home svg { font-size: 16px; }
.body-home .topnav__home { visibility: hidden; }
.jump-trigger { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; height: 32px; padding: 4px 4px 4px 8px; border-radius: 8px; font-weight: 800; font-size: 18px; color: var(--text); }
.jump-trigger:hover { background: var(--hover); }
.jump-trigger__chev { font-size: 16px; }
.jump-trigger__logo { display: inline-flex; align-items: center; }
.nexus-logo { display: block; }
:root[data-theme="dark"] { --logo-text: #c9793f; --logo-gold: #e0ac48; }
:root[data-theme="light"] { --logo-text: #8b4a1c; --logo-gold: #d9a441; }
.brandmark { width: 24px; height: 24px; border-radius: 50%; display: inline-block; position: relative; overflow: hidden; background: radial-gradient(circle at 72% 28%, #ffd166 0 17%, transparent 18%), linear-gradient(#8fd3f4, #8fd3f4 56%, #2b9a52 56%); }
.brandmark::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 7px; height: 11px; background: #f4f6f2; clip-path: polygon(0 100%, 35% 10%, 55% 55%, 68% 30%, 100% 100%); }

.tray-pill { display: inline-flex; align-items: stretch; height: 28px; border-radius: 8px; background: var(--brown); overflow: hidden; }
.tray-pill__part { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.tray-pill__part:hover { background: rgba(255,255,255,.07); }
.tray-pill__part + .tray-pill__part { border-left: 1px solid rgba(0,0,0,.25); }
.tray-pill__part svg { font-size: 13px; }
.tray-pill__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); display: none; }
.tray-pill__dot.is-on { display: inline-block; }
.tray-dot { display: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--bar); align-items: center; justify-content: center; }
.tray-dot__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--text-faint); }
.tray-dot__dot.is-on { background: var(--danger); }
@media (max-width: 1000px) { .tray-pill { display: none; } .tray-dot { display: inline-flex; } }

/* ==========================================================================
   Jump menu (popover anchored to the brand)
   ========================================================================== */
.jumpmenu { position: fixed; inset: 0; z-index: 90; }
.jumpmenu__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.jumpmenu__panel { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(600px, calc(100vw - 24px)); max-height: calc(100vh - 60px); overflow: auto; background: var(--bg); border-radius: 0 0 12px 12px; box-shadow: var(--shadow); padding: 20px 20px 14px; }
.jumpmenu__trigger { display: flex; margin: 0 auto 10px; }
.jumpmenu__notice { text-align: center; font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.jumpmenu__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.jumpmenu__tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 68px; border-radius: 4px; background: var(--chip); color: var(--text); font-size: 14px; padding: 8px 8px 6px; }
.jumpmenu__tile:hover { background: var(--chip-strong); text-decoration: none; }
.jumpmenu__tile svg { font-size: 20px; }
.jumpmenu__tile .k { position: absolute; top: 6px; right: 6px; font-size: 10px; line-height: 1; border: 1px solid var(--line); border-radius: 3px; padding: 2px 4px; color: var(--text-muted); }
.jumpmenu__search { width: 100%; height: 40px; border-radius: 4px; border: 1px solid var(--card-border); background: var(--input-bg); padding: 0 16px 0 12px; outline: none; font-size: 16px; }
.jumpmenu__search:focus { border-color: var(--accent); }
.jumpmenu__section { margin-top: 18px; }
.jumpmenu__section h4 { font-size: 14px; font-weight: 700; padding: 0 0 6px 24px; display: flex; align-items: center; gap: 8px; }
.jumpmenu__section h4 a { font-weight: 400; font-size: 14px; }
.jumpmenu__item { display: flex; align-items: center; gap: 10px; padding: 6px 36px 6px 24px; border-radius: 6px; color: var(--text); width: 100%; text-align: left; background: none; border: 0; font-size: 16px; font-weight: 600; position: relative; }
.jumpmenu__item:hover, .jumpmenu__item.is-active { background: var(--hover); text-decoration: none; }
.jumpmenu__item .sub { color: var(--text-muted); font-size: 14px; font-weight: 400; }
.jumpmenu__item .k { margin-left: auto; font-size: 11px; color: var(--text-faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-weight: 400; }
.jumpmenu__item .star { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--chip); color: var(--text-muted); display: grid; place-content: center; opacity: 0; }
.jumpmenu__item:hover .star, .jumpmenu__item .star.is-on { opacity: 1; }
.jumpmenu__item .star.is-on { color: #f5c542; }
.jumpmenu__foot { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 18px; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: 14px; }
.jumpmenu__foot a { color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.jumpmenu__foot a .k { font-size: 11px; color: var(--text-faint); }

/* ==========================================================================
   Main / sheet
   ========================================================================== */
.main { padding: 72px 0 calc(var(--footer-h) + 16px); min-height: 100vh; }
.sheet { position: relative; background: var(--sheet); margin: 0 var(--sheet-x); padding: 40px 40px 144px; border-radius: 8px 8px 0 0; box-shadow: 0 0 30px rgba(0,0,0,.08); min-height: calc(100vh - 72px - var(--footer-h) - 16px); }
.sheet__toolbar { display: flex; align-items: center; gap: 4px; height: 40px; margin: -40px -40px 40px; padding: 0 8px 0 12px; background: var(--bar); border-radius: 8px 8px 0 0; font-size: 14px; }
.sheet__toolbar .crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sheet__toolbar .crumbs a:first-child { color: var(--text); font-weight: 700; }
.sheet__toolbar .crumbs a { color: var(--text); }
.sheet__toolbar .crumbs .sep { color: var(--text-muted); }
.sheet__toolbar .crumbs .cur { color: var(--text); }
.sheet__toolbar .spacer { flex: 1; }
.tb-btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 7px; border-radius: 8px; border: 0; background: transparent; color: var(--text); font-size: 14px; }
.tb-btn:hover { background: var(--hover); text-decoration: none; }
.tb-btn.is-on { color: var(--link); }
.tb-btn svg { font-size: 15px; }
.sheet__badge { position: absolute; right: -24px; top: 0; width: 24px; height: 119px; writing-mode: vertical-rl; background: var(--brown); color: var(--text); font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; border-radius: 0 4px 4px 0; }
.sheet--flush { padding: 40px 0 0; }
.sheet--flush .sheet__toolbar { margin: -40px 0 0; }
.page-title { font-size: 36px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.tool-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 28px; }
@media (max-width: 900px) { .sheet { margin: 0 8px; padding: 40px 20px 100px; } .sheet__toolbar { margin: -40px -20px 32px; } .sheet__badge { display: none; } }

/* ==========================================================================
   Buttons, pills, inputs
   ========================================================================== */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10.5px; border-radius: 8px; border: 0; background: var(--bar); color: var(--text); font-size: 14px; font-weight: 400; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--card-border), 0 0 2px rgba(225,229,232,.1); }
.btn:hover { background: var(--bubble); text-decoration: none; }
.btn--primary { background: var(--accent); color: var(--accent-text); box-shadow: none; }
.btn--primary:hover { background: var(--accent); filter: brightness(1.06); }
.btn--primary svg { stroke-width: 2.4; }
.btn--ghost { background: transparent; box-shadow: none; }
.btn--ghost:hover { background: var(--hover); }
.btn--blue { background: transparent; box-shadow: none; color: var(--link); }
.btn--blue:hover { background: var(--hover); }
.btn--sm { height: 26px; padding: 0 9px; font-size: 13px; }
.btn--lg { height: 40px; padding: 0 12px; font-weight: 500; }
.btn--danger { background: var(--danger); color: #fff; box-shadow: none; }
.btn--round { border-radius: 999px; }
.btn--icon { width: 32px; padding: 0; justify-content: center; }
.btn--icon.btn--lg { width: 40px; }
.btn svg { font-size: 15px; }
.btn.is-on { background: var(--accent); color: var(--accent-text); box-shadow: none; }

.pillgroup { display: inline-flex; gap: 2px; height: 32px; border-radius: 8px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--card-border); padding: 0; }
.pillgroup button, .pillgroup a { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0 10.5px; height: 32px; border-radius: 8px; font-size: 14px; color: var(--text); }
.pillgroup button:hover, .pillgroup a:hover { background: var(--hover); text-decoration: none; }
.pillgroup .is-on { background: var(--pill-active); font-weight: 600; box-shadow: inset 0 0 0 1px var(--card-border); }
.pillgroup svg { font-size: 16px; }

.filter-input { height: 32px; border-radius: 8px; border: 1px solid var(--card-border); background: transparent; padding: 0 10px; width: 150px; outline: none; font-size: 14px; color: var(--text); }
.filter-input:focus { border-color: var(--accent); }
.filter-input::placeholder { color: var(--text-muted); }
.input, .textarea, .select { width: 100%; border-radius: 8px; border: 1px solid var(--card-border); background: var(--input-bg); padding: 8px 12px; outline: none; font-size: 16px; color: var(--text); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.input--bare { background: transparent; border: 0; border-radius: 0; padding: 0; }
.input--title { font-size: 36px; font-weight: 800; letter-spacing: -.01em; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; font-weight: 500; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--chip-strong); border: 0; flex: 0 0 auto; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: left .15s, background .15s; }
.switch.is-on { background: var(--accent); }
.switch.is-on::after { left: 19px; background: #fff; }

/* Labeled form rows (to-do / card / event detail) */
.frows { display: grid; grid-template-columns: 130px 1fr; gap: 14px 16px; align-items: start; font-size: 16px; }
.frows .lbl { text-align: right; font-weight: 700; padding-top: 2px; }
.frows .val { min-height: 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.frows .ph { color: var(--text-muted); }
.frows .ph:hover { color: var(--text); cursor: text; }
.frows input.input--bare, .frows textarea.input--bare { width: 100%; font-size: 16px; }
.frows input.input--bare::placeholder, .frows textarea.input--bare::placeholder { color: var(--text-muted); }
.frows--sm { grid-template-columns: 110px 1fr; }

/* ==========================================================================
   Avatars
   ========================================================================== */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; letter-spacing: .02em; flex: 0 0 auto; user-select: none; background: #7f3ff2; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.avatar--xs { width: 20px; height: 20px; font-size: 8px; } .avatar--s24 { width: 24px; height: 24px; font-size: 9px; } .avatar--sm { width: 24px; height: 24px; font-size: 9px; } .avatar--s30 { width: 30px; height: 30px; font-size: 10px; } .avatar--md { width: 32px; height: 32px; } .avatar--lg { width: 40px; height: 40px; font-size: 13px; } .avatar--s48 { width: 48px; height: 48px; font-size: 15px; } .avatar--s56 { width: 56px; height: 56px; font-size: 17px; } .avatar--xl { width: 64px; height: 64px; font-size: 20px; }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { margin-left: -6px; border: 2px solid var(--sheet); }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack--loose .avatar { margin-left: 4px; border: 0; }
.avatar-btn { background: none; border: 0; padding: 0; display: inline-flex; }

/* ==========================================================================
   Home
   ========================================================================== */
.home { display: grid; grid-template-columns: 157px 459px 325px; column-gap: 40px; justify-content: center; margin: 0 auto; padding: 0 16px; }
.home__side { padding-top: 86px; }
.home__greeting { text-align: right; font-size: 18px; font-weight: 800; margin-bottom: 12px; line-height: 1.1; }
.home__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.home__actions .btn { height: 40px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }
.home__panel { background: rgba(225,229,232,.03); border-radius: 12px; padding: 0 12px 24px; min-height: calc(100vh - 72px - var(--footer-h) - 16px); }
:root[data-theme="light"] .home__panel { background: rgba(0,0,0,.03); }
.home__notice { text-align: center; font-size: 14px; color: var(--text-muted); padding: 0 8px 50px; }
.home__notice a { font-weight: 700; }
.home__account { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 0 6px; }
.home__account h1 { font-size: 18px; font-weight: 700; }
.home__tagline { font-weight: 400; color: var(--text-muted); font-size: 14px; }
.home--grid .home__tagline { font-size: 18px; }
.home__account .expand { position: absolute; right: -4px; top: -8px; height: 40px; width: 37px; }
.home__hint { text-align: center; font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.home__section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 18px 0 8px; }
.project-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.project-cards--grid { grid-template-columns: repeat(2, 1fr); }
.project-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; padding: 24px; min-height: 172px; color: var(--text); }
.project-card:hover { text-decoration: none; border-color: var(--text-faint); }
.project-card h3 { font-size: 20px; font-weight: 700; padding-right: 32px; line-height: 1.15; }
.project-card p { font-size: 14px; color: var(--text); margin: 6px 0 0; line-height: 1.35; }
.project-card .star { position: absolute; right: 16px; top: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--chip); border: 0; color: var(--text-faint); display: grid; place-content: center; font-size: 15px; }
.project-card .star:hover { background: var(--chip-strong); color: var(--text); }
.project-card .star.is-on { color: #f5c542; }
.project-card__people { margin-top: auto; padding-top: 18px; }
.project-card__people .avatar-stack .avatar { border-color: var(--card); }
.project-card--folder h3 { display: flex; align-items: center; gap: 8px; }
.home__activity { padding-top: 86px; }
.home__activity h2 { font-size: 16px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.home__activity h2 a { font-size: 14px; font-weight: 400; }
.tl { display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; }
.tl__icon { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: grid; place-content: center; font-size: 9px; margin-top: 3px; }
.tl__icon--sys { background: var(--text-faint); color: var(--bg); }
.tl__time { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.tl__body { font-size: 14px; line-height: 1.4; padding: 2px 0 14px; display: flex; gap: 6px; align-items: flex-start; border-left: 1px solid var(--line); margin-left: -16px; padding-left: 16px; position: relative; }
.tl__body .avatar { margin-top: 1px; }
.tl__body a { color: var(--link); }
.tl__body b { font-weight: 700; }
.tl__body .proj { color: var(--text); }

/* Grid (wide) layout */
.home--grid { display: block; max-width: 960px; }
.home--grid .home__side, .home--grid .home__activity { display: none; }
.home--grid .home__panel { background: transparent; padding: 0; min-height: 0; }
.home--grid .home__notice { padding-bottom: 20px; }
.home--grid .home__account h1 { font-size: 28px; font-weight: 800; }
.home--grid .home__account .expand { right: 0; top: -2px; }
.home--grid .home__actionsrow { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 20px; }
.home--grid .home__actionsrow .btn { height: 32px; }
.home--grid .project-cards { grid-template-columns: repeat(2, 336px); justify-content: center; gap: 12px; }
.home--grid .project-card { min-height: 189px; }
.home__actionsrow { display: none; }
@media (max-width: 1060px) {
  .home { grid-template-columns: 1fr; max-width: 560px; }
  .home__side { padding-top: 24px; } .home__greeting { text-align: left; } .home__actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .home__activity { padding-top: 24px; }
  .home--grid .project-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Project page
   ========================================================================== */
.project__people { display: flex; align-items: center; gap: 6px; height: 40px; margin: -40px -40px 40px; padding: 0 8px 0 12px; background: var(--bar); border-radius: 8px 8px 0 0; }
.project__people .avatar-stack--loose .avatar { width: 24px; height: 24px; font-size: 9px; margin-left: 2px; }
.project__header { padding-right: 72px; }
.project__header h1 { font-size: 28px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.project__header h1 .star { background: none; border: 0; color: var(--text-faint); font-size: 18px; padding: 4px; border-radius: 6px; }
.project__header h1 .star.is-on { color: #f5c542; }
.project__header h1 .star:hover { background: var(--hover); }
.project__desc { font-size: 16px; margin-top: 8px; }
.project__status { font-size: 14px; margin-top: 10px; }
.dock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; margin-top: 32px; }
@media (max-width: 900px) { .dock { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dock { grid-template-columns: 1fr; } }
.dock-card { display: flex; flex-direction: column; min-width: 0; }
.dock-card__header { display: flex; align-items: center; justify-content: space-between; height: 24px; margin-bottom: 8px; }
.dock-card__header h2 { font-size: 18px; font-weight: 600; color: var(--tool); }
.dock-card__header h2 a { color: inherit; }
.dock-card__header .add { opacity: 0; transition: opacity .15s; }
.dock-card:hover .dock-card__header .add { opacity: 1; }
.dock-card__body { aspect-ratio: 1 / 1; background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; padding: 16px; overflow: hidden; position: relative; color: var(--text); display: block; font-size: 14px; }
.dock-card__body:hover { text-decoration: none; border-color: var(--text-faint); }
.dock-card__body::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 32px; background: linear-gradient(transparent, var(--card)); pointer-events: none; border-radius: 0 0 8px 8px; }
.dock-card__empty { color: var(--text-muted); font-size: 14px; text-align: center; padding: 70px 10px 0; }
.dock-card__empty b { display: block; color: var(--text); margin-bottom: 4px; font-size: 15px; }
.dock-msg { display: grid; grid-template-columns: 28px 1fr; gap: 10px; margin-bottom: 12px; font-size: 12px; }
.dock-msg b { display: block; font-size: 13px; }
.dock-msg .excerpt { color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.dock-msg__first { margin-bottom: 14px; }
.dock-msg__first .who { font-size: 12px; line-height: 1.25; }
.dock-msg__first b { font-size: 14px; display: block; margin: 6px 0 2px; }
.dock-list { margin-bottom: 12px; }
.dock-list__name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.dock-todo { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; }
.dock-todo .box { width: 12px; height: 12px; border: 1px solid var(--text-muted); border-radius: 3px; flex: 0 0 auto; }
.dock-cardtable { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.dock-cardtable__triage { background: var(--chip); border-radius: 4px; padding: 8px 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dock-cardtable__cols { display: flex; gap: 6px; flex: 1; }
.dock-cardtable__col { flex: 1; border-radius: 4px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 0; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 28%, var(--card)); }
.dock-cardtable__col small { font-weight: 500; opacity: .85; }
.dock-docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--card-border); border: 1px solid var(--card-border); }
.dock-doc { aspect-ratio: 1; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 11px; text-align: center; padding: 8px; overflow: hidden; }
.dock-doc--paper { align-items: flex-start; text-align: left; justify-content: flex-start; }
.dock-doc--paper b { font-size: 10px; }
.dock-doc--paper span { font-size: 8px; line-height: 1.3; color: var(--text-muted); }
.dock-doc__cover { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; font-size: 16px; letter-spacing: .04em; }
.dock-cal { font-size: 11px; }
.dock-cal__title { text-align: center; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.dock-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dock-cal__grid > div { background: var(--card); text-align: center; padding: 3px 0; font-weight: 700; position: relative; font-size: 10px; }
.dock-cal__grid > div.dow { font-size: 8px; color: var(--text-muted); font-weight: 600; }
.dock-cal__grid > div.other { color: var(--text-faint); font-weight: 400; }
.dock-cal__grid > div.today { background: var(--brown); }
.dock-cal__grid > div.has::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--link); }
.dock-cal__events { margin-top: 10px; }
.dock-cal__ev { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 12px; }
.datebox { width: 30px; border-radius: 4px; border: 1px solid var(--link); text-align: center; overflow: hidden; font-size: 9px; line-height: 1; background: var(--sheet); }
.datebox span { display: block; }
.datebox .m { background: var(--link); color: var(--accent-text); padding: 2px 0; font-weight: 700; }
.datebox .d { padding: 3px 0; font-size: 12px; font-weight: 700; }
.datebox .dow { font-size: 7px; color: var(--text-muted); padding-bottom: 2px; }
.dock-chat { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 8px; }
.dock-chat__line { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: flex-start; }
.dock-chat__bubble { background: var(--bubble); border-radius: 8px; padding: 6px 10px; font-size: 12px; }
.dock-chat__bubble .who { font-weight: 700; font-size: 11px; } .dock-chat__bubble .when { color: var(--text-faint); font-size: 10px; margin-left: 4px; }
/* Dock customization: empty sketches, remove button, add-a-tool card, drag ordering */
.dock-card { position: relative; }
.dock-card.is-dragging { opacity: .4; }
.dock-card.is-over .dock-card__body { outline: 2px dashed var(--accent); }
.dock-card__body--empty { display: flex; align-items: center; justify-content: center; }
.dock-card__body--empty::after { display: none; }
.dock-card__trash { position: absolute; right: 12px; bottom: 12px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--text-faint); display: grid; place-content: center; font-size: 15px; }
.dock-card__trash:hover { background: var(--chip-strong); color: var(--text); }
.dock-card--add .dock-card__header { visibility: hidden; }
.dock-add { width: 48px; height: 48px; border-radius: 8px; border: 1px dashed var(--card-border); background: transparent; color: var(--text-muted); display: grid; place-content: center; font-size: 22px; margin-top: 6px; }
.dock-add:hover { border-color: var(--text-muted); color: var(--text); background: var(--chip); }
.toolmenu__icon { width: 28px; height: 28px; border-radius: 50%; background: var(--chip-strong); display: inline-grid; place-content: center; font-size: 14px; }
.sketch { width: 100%; padding: 6px 10px; display: flex; flex-direction: column; gap: 10px; opacity: .5; }
.sk-line { display: block; height: 7px; border-radius: 4px; background: var(--text-faint); margin: 4px 0; opacity: .55; }
.sk-line.sk-bold { height: 9px; opacity: .8; }
.sk-row { display: flex; align-items: flex-start; gap: 10px; } .sk-row > div { flex: 1; }
.sk-row--right { flex-direction: row-reverse; }
.sk-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--text-faint); flex: 0 0 auto; opacity: .6; }
.sk-box { width: 14px; height: 14px; border: 2px solid var(--text-faint); border-radius: 3px; flex: 0 0 auto; margin-top: 3px; opacity: .7; }
.sk-page { width: 22px; height: 28px; border: 2px solid var(--text-faint); border-radius: 3px; flex: 0 0 auto; opacity: .7; }
.sk-folder { width: 28px; height: 22px; border: 2px solid var(--text-faint); border-radius: 3px 3px 3px 3px; flex: 0 0 auto; opacity: .7; margin-top: 2px; }
.sk-mail { width: 26px; height: 18px; border: 2px solid var(--text-faint); border-radius: 3px; flex: 0 0 auto; opacity: .7; margin-top: 3px; }
.sk-bubble { display: block; height: 26px; border-radius: 10px; background: var(--text-faint); opacity: .45; }
.sk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 100%; }
.sk-grid span { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--text-faint); opacity: .35; }
.sk-grid span.is-on { opacity: .9; background: var(--tool); }
.sketch--cards { flex-direction: row; gap: 8px; }
.sk-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sk-card { display: block; height: 26px; border-radius: 5px; border: 2px solid var(--text-faint); opacity: .6; }
.dock-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; text-align: center; padding: 20px; }
.dock-link svg { font-size: 34px; color: var(--link); }
.dock-link b { font-size: 15px; }

/* Project settings, image, wallpaper, gauge */
.project__image { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: block; margin-bottom: 10px; }
.project__dates { font-size: 14px; color: var(--text-muted); margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.project--wallpaper { background-color: var(--wall, var(--sheet)); }
.project--wallpaper .project__people { background: rgba(0,0,0,.35); }
.project--wallpaper .project__header, .project--wallpaper .project__activity { background: color-mix(in srgb, var(--sheet) 82%, transparent); border-radius: 10px; padding: 16px 20px; }
.project--wallpaper .project__header { margin-top: 0; }
.project--wallpaper .dock-card__header h2 { text-shadow: 0 1px 2px rgba(0,0,0,.5); }
/* pastel wallpapers: dark chrome text, soft white panels */
.project--wall-light { --wall-text: #2a2f33; --wall-muted: #5a6166; }
.project--wall-light .project__people { background: rgba(255,255,255,.55); color: var(--wall-text); }
.project--wall-light .project__people .tb-btn, .project--wall-light .project__people .btn { color: var(--wall-text); }
.project--wall-light .project__header, .project--wall-light .project__activity { background: rgba(255,255,255,.72); color: var(--wall-text); }
:root[data-theme="dark"] .project--wall-light .project__header, :root[data-theme="dark"] .project--wall-light .project__activity { background: color-mix(in srgb, var(--sheet) 88%, transparent); color: var(--text); }
.project--wall-light .dock-card__header h2, .project--wall-light .dock-card__header h2 a { color: #8a3a1f; text-shadow: none; }
.project--wall-light .dock-card__header .add { background: rgba(255,255,255,.8); color: #2a2f33; }
.project--wall-light .wavy { opacity: .5; }
.project--wall-light .day-badge { background: rgba(0,0,0,.08); }
.palette button[title] { position: relative; }
.gauge { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.gauge svg text { fill: var(--text); }
.gauge b { font-size: 14px; }
.status-pill { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; height: 24px; padding: 0 10px; border-radius: 999px; border: 0; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--c) 25%, var(--sheet)); color: var(--text); }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.psettings { max-width: 760px; }
.psettings__top { display: flex; gap: 14px; align-items: flex-start; }
.psettings__icon { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--card-border); background: var(--chip); display: grid; place-content: center; font-size: 18px; color: var(--text-muted); cursor: pointer; overflow: hidden; flex: 0 0 auto; margin-top: 4px; }
.psettings__icon img { width: 100%; height: 100%; object-fit: cover; }
.psettings__name { width: 100%; font-size: 36px; font-weight: 800; letter-spacing: -.01em; background: var(--chip-strong); border: 0; border-radius: 4px; padding: 0 6px; outline: none; color: var(--text); }
.psettings__name:focus { background: var(--chip); box-shadow: 0 0 0 2px var(--accent); }
.psettings__desc { width: 100%; font-size: 18px; background: transparent; border: 0; outline: none; resize: none; color: var(--text); padding: 4px 6px; }
.psettings__desc::placeholder { color: var(--text-muted); }
.onoff--sm { height: 28px; min-width: 56px; font-size: 13px; padding: 0 26px 0 8px; }
.onoff--sm .onoff__knob { top: 4px; right: 4px; width: 12px; height: 20px; }
.help-chip { display: inline-grid; place-content: center; width: 22px; height: 20px; border-radius: 4px; background: var(--chip-strong); font-size: 12px; font-weight: 700; color: var(--text-muted); cursor: help; }
.wallpaper-box { width: 150px; height: 84px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--chip); display: grid; place-content: center; font-size: 20px; color: var(--text-muted); cursor: pointer; flex: 0 0 auto; margin-right: 18px; }
.palette { display: flex; flex-wrap: wrap; gap: 6px; max-width: 300px; }
.palette button { width: 26px; height: 26px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; }
.palette button.is-on { border-color: var(--accent); }
.palette__none { background: var(--chip); color: var(--text-muted); display: grid; place-content: center; font-size: 12px; }
.project-card__image { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; margin-bottom: 8px; display: block; }
.project-card--wall { border-top: 6px solid var(--wall, var(--card-border)); }
.project-card--wall[data-wall-img] { background-image: linear-gradient(color-mix(in srgb, var(--card) 86%, transparent), color-mix(in srgb, var(--card) 86%, transparent)), var(--wall-img); background-size: cover; background-position: center; border-top-color: transparent; }

/* ==========================================================================
   Maklon module
   ========================================================================== */
.mk-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -8px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mk-nav__tab { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.mk-nav__tab svg { width: 14px; height: 14px; opacity: .7; }
.mk-nav__tab:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.mk-nav__tab.is-on { background: var(--chip-strong); color: var(--text); }
.mk-nav__cur { font-weight: 500; color: var(--text); }
.mk-nav__cur::before { content: '·'; margin-right: 6px; color: var(--text-faint); }
.menu a.is-on { font-weight: 600; }
.mk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.mk-h3 { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.mk-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--c) 22%, var(--sheet)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); white-space: nowrap; }
.mk-no { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-muted); background: var(--chip); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.mk-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 24px; }
.mk-stat { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 14px 16px; color: var(--text); display: flex; flex-direction: column; gap: 2px; }
.mk-stat:hover { text-decoration: none; border-color: var(--text-faint); }
.mk-stat b { font-size: 22px; } .mk-stat span { font-size: 13px; color: var(--text-muted); }
.mk-list { display: flex; flex-direction: column; gap: 8px; }
.mk-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 12px 14px; color: var(--text); }
.mk-row:hover { text-decoration: none; border-color: var(--text-faint); }
.mk-row b { font-size: 15px; }
.mk-icon { width: 36px; height: 36px; border-radius: 8px; display: grid; place-content: center; font-size: 18px; background: color-mix(in srgb, var(--c) 22%, var(--sheet)); color: var(--c); flex: 0 0 auto; }
.mk-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; margin: 0 -40px; padding-left: 40px; padding-right: 40px; }
.mk-col { flex: 0 0 240px; }
.mk-col__head { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px; font-size: 14px; }
.mk-col__head b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 1px; }
.mk-col__body { background: var(--chip); border-radius: 10px; padding: 8px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; }
.mk-card { display: block; background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; padding: 10px 12px; color: var(--text); }
.mk-card:hover { text-decoration: none; border-color: var(--text-faint); }
.mk-card b { display: block; font-size: 14px; margin-top: 4px; line-height: 1.3; }
.mk-stepper { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 4px 0 12px; margin-bottom: 16px; }
.mk-step { white-space: nowrap; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; background: var(--chip); color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.mk-step.is-done { background: color-mix(in srgb, #2fa36b 22%, var(--sheet)); color: var(--text); }
.mk-step.is-active { background: var(--accent); color: var(--accent-text); }
.mk-step__arrow { color: var(--text-faint); }
.mk-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; }
@media (max-width: 900px) { .mk-grid { grid-template-columns: 1fr; } .mk-board { margin: 0 -16px; padding: 0 16px 12px; } }
.mk-main, .mk-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mk-panel { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 14px 16px; }
.mk-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-size: 15px; }
.mk-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.mk-kv:last-child { border-bottom: 0; }
.mk-kv > span:last-child { text-align: right; font-weight: 500; }
.mk-short { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.mk-short li { display: flex; justify-content: space-between; gap: 10px; background: color-mix(in srgb, #e5484d 14%, var(--sheet)); border-radius: 6px; padding: 5px 10px; font-size: 13px; }
.mk-short b { color: #e5484d; }
.mk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mk-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mk-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mk-table tr:last-child td { border-bottom: 0; }
.mk-table .center { text-align: center; }
.mk-table--matrix td, .mk-table--matrix th { padding: 8px 10px; vertical-align: middle; }
.mk-table--matrix td:last-child, .mk-table--matrix th:last-child { min-width: 320px; }
.mk-comment { background: var(--chip); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.mk-log { display: flex; gap: 8px; font-size: 13px; padding: 4px 0; }
.mk-log__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: 0 0 auto; }
.mk-warn { display: flex; gap: 8px; align-items: flex-start; background: color-mix(in srgb, #e5484d 14%, var(--sheet)); border: 1px solid color-mix(in srgb, #e5484d 40%, transparent); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.mk-details { background: var(--chip); border-radius: 8px; padding: 10px 12px; }
.mk-details summary { cursor: pointer; font-size: 13px; font-weight: 500; }
.mk-sub { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mk-sub:last-child { border-bottom: 0; }
.mk-form { max-width: 720px; }
.mk-regbtn { background: none; border: 0; padding: 0; text-align: left; color: var(--text); cursor: pointer; }
.mk-regbtn:hover .mk-badge { box-shadow: inset 0 0 0 1px var(--accent); }
.viewas-banner { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 12px; background: #5f4d2c; color: #f3d9a4; font-size: 13px; padding: 6px 12px; margin: -16px var(--sheet-x) 10px; border-radius: 8px; }
.viewas-banner .btn { height: 26px; font-size: 12px; background: rgba(255,255,255,.12); color: inherit; box-shadow: none; }
.jumpmenu__tiles--5 { grid-template-columns: repeat(5, 1fr); }
.dock-maklon { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.dock-maklon__row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.dock-maklon__bar { flex: 1; height: 8px; border-radius: 4px; background: var(--chip-strong); overflow: hidden; }
.dock-maklon__bar span { display: block; height: 100%; background: var(--c); }

/* Customize this project */
.toolrows { display: flex; flex-direction: column; }
.toolrow { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 0; }
.toolrow__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-border); display: grid; place-content: center; font-size: 18px; }
.toolrow__name { background: none; border: 0; padding: 0; font-size: 17px; font-weight: 700; color: var(--text); text-align: left; display: inline-flex; align-items: center; gap: 6px; }
.toolrow__name svg { font-size: 13px; color: var(--text-faint); opacity: 0; }
.toolrow__name:hover svg { opacity: 1; }
.toolrow__actions { display: inline-flex; gap: 2px; opacity: 0; }
.toolrow:hover .toolrow__actions { opacity: 1; }
.toolrow__actions .tb-btn { width: 30px; padding: 0; justify-content: center; }
.toolrow__actions .tb-btn[disabled] { opacity: .3; pointer-events: none; }
.onoff { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 30px 0 10px; border-radius: 8px; border: 0; background: var(--chip-strong); color: var(--text); font-weight: 700; font-size: 14px; min-width: 64px; justify-content: flex-start; }
.onoff__knob { position: absolute; right: 5px; top: 5px; width: 14px; height: 22px; border-radius: 4px; background: var(--text-muted); }
.onoff.is-on { background: #9fd8a9; color: #113b1c; }
.onoff.is-on .onoff__knob { background: #1c3f27; }

/* Check-ins & email forwards */
.checkin-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--chip-strong); display: grid; place-content: center; font-size: 22px; color: var(--text); }
.answer-box { display: grid; grid-template-columns: 48px 1fr; gap: 16px; background: var(--chip); border-radius: 10px; padding: 16px; }
.answer { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.answer__comments { margin-top: 8px; }
.answer__comments summary { cursor: pointer; color: var(--link); font-size: 14px; }
.answer__comments .comments { margin-top: 8px; border-top: 0; padding-top: 0; }
.forward-address { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--chip); border-radius: 10px; padding: 14px 16px; margin-bottom: 24px; }
.forward-address > div { flex: 1 1 320px; }
.forward-address code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bar); border: 1px solid var(--card-border); border-radius: 8px; padding: 8px 12px; }
.forward-body { background: var(--chip); border-radius: 10px; padding: 18px 20px; font-size: 16px; }

.wavy { height: 10px; margin: 32px 0 0; background: radial-gradient(circle at 5px -2px, transparent 5px, var(--line) 5.5px, var(--line) 6.5px, transparent 7px) 0 0/10px 10px repeat-x; }
.project__activity { padding-top: 28px; }
.project__activity h2 { font-size: 28px; font-weight: 800; display: inline-flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.day-badge { display: inline-block; background: var(--chip-strong); color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 6px; }
.day-row { display: flex; align-items: center; gap: 14px; margin: 18px 0 10px; }
.day-row .muted { font-size: 14px; }

/* ==========================================================================
   Message board / documents
   ========================================================================== */
.section-label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); margin: 0 0 8px; }
.pinned-divider { height: 1px; background: var(--line); margin: 20px auto 24px; width: 72px; }
.msg-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; padding: 14px 0; align-items: flex-start; }
.msg-row h3 { font-size: 18px; font-weight: 700; }
.msg-row h3 a { color: var(--text); }
.msg-row .meta { color: var(--text-muted); font-size: 15px; line-height: 1.45; margin-top: 2px; }
.msg-row .meta .cat { color: var(--link); }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 11px; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 700; padding: 0 6px; }
.count-badge--soft { background: var(--chip-strong); color: var(--text-muted); }
.doc-view { max-width: 760px; margin: 0 auto; }
.doc-view__head h1 { font-size: 36px; font-weight: 800; letter-spacing: -.01em; }
.doc-view__meta { color: var(--text); font-size: 15px; margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.doc-view__meta b { font-weight: 700; }
.doc-view__body { display: grid; grid-template-columns: 48px 1fr; gap: 16px; margin-top: 28px; font-size: 18px; line-height: 1.5; }
.doc-view__body .prose p:last-child { margin-bottom: 0; }
.prose { white-space: pre-wrap; word-wrap: break-word; }
.prose .mention { display: inline-flex; align-items: center; gap: 4px; background: var(--chip-strong); border-radius: 999px; padding: 0 8px 0 2px; font-size: .95em; vertical-align: -3px; }
.boosts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; align-items: center; }
.boost { display: inline-flex; align-items: center; gap: 6px; background: var(--chip-strong); border: 0; border-radius: 999px; padding: 3px 10px 3px 3px; font-size: 14px; color: var(--text); }
.boost .avatar { width: 24px; height: 24px; font-size: 9px; }
.boost--add { background: var(--chip); color: var(--text-muted); padding: 0; width: 36px; height: 36px; justify-content: center; border-radius: 50%; font-size: 18px; }
.boost--add:hover { background: var(--chip-strong); color: var(--text); }
.comments { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 12px; }
.comment { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; padding: 14px 0; }
.comment__meta { font-size: 15px; color: var(--text-muted); margin-bottom: 2px; }
.comment__meta b { color: var(--text); font-weight: 700; }
.comment__body { font-size: 16px; line-height: 1.5; }
.comment__more { opacity: 0; }
.comment:hover .comment__more { opacity: 1; }
.comment-box { display: grid; grid-template-columns: 56px 1fr; gap: 16px; margin-top: 14px; align-items: start; }
.comment-box .textarea { min-height: 90px; font-size: 18px; background: transparent; border: 0; padding: 12px 0; }
.comment-box .textarea:focus { background: var(--input-bg); padding: 12px; border: 1px solid var(--accent); }
.comment-box .actions { display: none; gap: 8px; margin-top: 8px; }
.comment-box.is-active .actions { display: flex; }
.subscribers { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text); }
.subscribers__row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.history { font-size: 14px; color: var(--text-muted); display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.history .avatar { width: 20px; height: 20px; font-size: 8px; }
.history time { margin-left: auto; font-size: 13px; }

/* Rich text editor */
.rte { position: relative; }
.rte__toolbar { display: flex; align-items: center; gap: 0; padding: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rte__btn { width: 42px; height: 42px; border: 0; background: transparent; border-radius: 5.5px; color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 1px; font-size: 18px; padding: 0; }
.rte__btn svg { font-size: 18px; stroke-width: 1.9; }
.rte__btn--menu { width: 55px; }
.rte__btn--menu svg + svg { font-size: 13px; margin-left: -2px; }
.rte__btn[data-tool=more], .rte__btn[data-tool=link] { width: 42px; }
.rte__btn:hover { background: var(--hover); }
.rte__btn.is-on { background: var(--chip-strong); }
.rte.is-recording [data-tool=more] { color: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.rte__right { margin-left: auto; display: inline-flex; }
.rte__right .rte__btn { color: var(--text-faint); }
.rte__right .rte__btn:hover { color: var(--text); }
.rte__tablebar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rte__sep { width: 1px; background: var(--line); margin: 0 4px; }
.rte__content { outline: none; padding: 18px 0; font-size: 17px; line-height: 1.55; color: var(--text); }
.rte__content:empty::before, .rte__content:has(> p:only-child:empty)::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; position: absolute; }
.rte--compact .rte__toolbar { display: none; }
.rte--compact.is-focused .rte__toolbar, .rte--compact.has-content .rte__toolbar { display: flex; }
.rte--compact .rte__btn { width: 36px; height: 36px; } .rte--compact .rte__btn--menu { width: 48px; }
.rte--compact .rte__content { padding: 12px 0; font-size: 16px; }
.rte-colors { padding: 6px; width: 300px; }
.rte-colors__row { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-bottom: 6px; }
.rte-colors__row button { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); background: var(--chip); font-weight: 800; font-size: 15px; padding: 0; display: grid; place-content: center; }
.rte-colors__row button:hover { outline: 2px solid var(--accent); }
.menu .is-cur { background: var(--hover); }

.mention-pop { position: fixed; z-index: 130; background: var(--bar); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); min-width: 260px; padding: 6px; }
.mention-pop button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 7px; font-size: 14px; color: var(--text); }
.mention-pop button.is-active, .mention-pop button:hover { background: var(--hover); }
.mention-pop b { display: block; font-weight: 600; } .mention-pop small { display: block; color: var(--text-muted); font-size: 12px; }
.rte__content .mention { cursor: default; user-select: all; }

/* Rendered rich content (editor + read views) */
.prose-html { word-wrap: break-word; }
.prose-html p { margin: 0 0 .75em; } .prose-html p:last-child { margin-bottom: 0; }
.prose-html h1 { font-size: 28px; font-weight: 800; margin: .6em 0 .3em; } .prose-html h2 { font-size: 22px; font-weight: 700; margin: .6em 0 .3em; } .prose-html h3 { font-size: 18px; font-weight: 700; margin: .6em 0 .3em; }
.prose-html blockquote { margin: .6em 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--card-border); color: var(--text-muted); }
.prose-html pre { background: var(--chip-strong); border-radius: 8px; padding: 12px 14px; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; margin: .6em 0; }
.prose-html code { background: var(--chip-strong); border-radius: 4px; padding: 1px 5px; font: .9em ui-monospace, SFMono-Regular, Menlo, monospace; }
.prose-html pre code { background: none; padding: 0; }
.prose-html ul, .prose-html ol { margin: .4em 0 .8em; padding-left: 1.6em; }
.prose-html li { margin: .15em 0; }
.prose-html hr { border: 0; border-top: 2px solid var(--line); margin: 1.2em 0; }
.prose-html a { color: var(--link); text-decoration: underline; }
.prose-html img, .prose-html video { max-width: 100%; border-radius: 8px; display: block; }
.prose-html audio { display: block; max-width: 100%; }
.prose-html figure.rte-media { margin: .8em 0; }
.prose-html figcaption { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.prose-html table.rte-table, .prose-html table { border-collapse: collapse; width: 100%; margin: .8em 0; }
.prose-html td, .prose-html th { border: 1px solid var(--card-border); padding: 6px 10px; min-width: 60px; text-align: left; vertical-align: top; }
.prose-html th { background: var(--chip-strong); font-weight: 700; }
.prose-html mark { background: #fff3b0; color: #222; border-radius: 3px; padding: 0 2px; }
.prose-html .attachment { display: inline-flex; align-items: center; gap: 6px; background: var(--chip-strong); border-radius: 8px; padding: 6px 10px; text-decoration: none; color: var(--text); font-size: 14px; margin: 2px 0; }
.prose-html .attachment small { color: var(--text-muted); }
.prose-html .mention { display: inline-flex; align-items: center; gap: 4px; background: var(--chip-strong); border-radius: 999px; padding: 0 8px 0 2px; font-size: .95em; vertical-align: -3px; }

/* Message editor */
.editor { max-width: 860px; margin: 0 auto; }
.editor__cat { margin-bottom: 10px; }
.editor__title { width: 100%; font-size: 36px; font-weight: 800; background: transparent; border: 0; outline: none; padding: 6px 0; color: var(--text); letter-spacing: -.01em; }
.editor__title::placeholder { color: var(--text-faint); }
.rtb { display: flex; align-items: center; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 10px 0 0; flex-wrap: wrap; }
.rtb button { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 6px; color: var(--text); display: grid; place-content: center; font-size: 16px; }
.rtb button:hover { background: var(--hover); }
.rtb .gap { width: 10px; }
.rtb .right { margin-left: auto; display: flex; gap: 2px; }
.rtb .right button { color: var(--text-faint); }
.editor__body { width: 100%; min-height: 300px; background: transparent; border: 0; outline: none; resize: vertical; font-size: 17px; line-height: 1.55; padding: 18px 0; color: var(--text); }
.editor__body::placeholder { color: var(--text-muted); }
.notify-box { background: var(--chip); border-radius: 8px; padding: 16px 18px; margin-top: 20px; }
.notify-box h4 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.notify-box label { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 15px; cursor: pointer; }
.notify-box input[type=radio] { margin-top: 5px; }
.notify-box .avatar-stack { display: block; margin: 6px 0 0 26px; }
.editor__footer { display: flex; align-items: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; }

/* ==========================================================================
   To-dos
   ========================================================================== */
.todolist { margin-bottom: 36px; }
.todolist__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.todolist__head h2 { font-size: 20px; font-weight: 700; }
.todolist__head h2 a { color: var(--text); }
.todolist__desc { color: var(--text-muted); font-size: 17px; margin: 0 0 8px 24px; line-height: 1.45; }
.pie { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; background: conic-gradient(var(--green) var(--pct, 0%), var(--chip-strong) 0); }
.todo { display: flex; align-items: center; gap: 10px; padding: 5px 0 5px 2px; font-size: 17px; border-radius: 6px; }
.todo:hover { background: var(--hover); }
.todo__check { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--text-muted); border-radius: 4px; margin: 0; background: transparent; cursor: pointer; display: inline-grid; place-content: center; flex: 0 0 auto; }
.todo__check:checked { background: var(--green); border-color: var(--green); }
.todo__check:checked::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.todo__check--round { border-radius: 50%; width: 20px; height: 20px; }
.todo__title { color: var(--text); }
.todo__title:hover { text-decoration: underline; }
.todo--done .todo__title { color: var(--text-muted); text-decoration: line-through; }
.todo__extras { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 5px; background: var(--chip-strong); color: var(--text-muted); border-radius: 6px; padding: 1px 8px 1px 4px; font-size: 13px; white-space: nowrap; }
.chip .avatar { width: 18px; height: 18px; font-size: 7px; }
.chip--plain { padding: 1px 8px; }
.chip--overdue { color: var(--alert); }
.chip--col { color: var(--text); font-size: 18px; font-weight: 600; padding: 2px 10px; border-radius: 6px; border-top: 3px solid var(--c); background: color-mix(in srgb, var(--c) 30%, var(--sheet)); }
.todo-add { display: inline-flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 17px; color: var(--link); background: none; border: 0; }
.todo-add .box { width: 18px; height: 18px; border: 1.5px dashed var(--text-faint); border-radius: 4px; }
.todo-add span:last-child { text-decoration: underline; }
.completed-toggle { background: none; border: 0; color: var(--text-muted); font-size: 17px; padding: 5px 2px; display: inline-flex; align-items: center; gap: 10px; }
.completed-toggle .box { width: 18px; height: 18px; border: 1.5px solid var(--text-faint); border-radius: 4px; display: inline-grid; place-content: center; font-size: 11px; }
.todo-form { padding: 6px 0 14px; }
.todo-form__title { display: flex; align-items: center; gap: 10px; padding: 5px 2px; border-bottom: 1px dashed var(--card-border); margin-bottom: 14px; }
.todo-form__title input { flex: 1; font-size: 17px; }
.todo-form .btns { display: flex; gap: 6px; margin: 16px 0 0 146px; }
.todo-form__picker { display: flex; flex-wrap: wrap; gap: 6px; }
.todo-detail__top { display: flex; align-items: center; gap: 12px; margin: 14px 0 26px; flex-wrap: wrap; font-size: 17px; }
.todo-detail__top .complete { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 12px; border-radius: 8px; background: transparent; border: 1px solid var(--card-border); font-size: 17px; color: var(--text); }
.todo-detail__top .complete:hover { background: var(--hover); }
.todo-detail__top .complete .todo__check { pointer-events: none; }

/* ==========================================================================
   Card table
   ========================================================================== */
.cardtable { display: grid; grid-template-columns: 1fr 48px; gap: 0 16px; margin: 0 -40px 0 0; }
.cardtable__side { display: flex; flex-direction: column; gap: 0; }
.triage { background: var(--chip); border-radius: 8px 0 0 8px; padding: 14px 16px; }
.triage__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 15px; font-weight: 700; }
.triage__head .muted { font-weight: 400; }
.triage__head .watch { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; color: var(--text); }
.triage__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; min-height: 60px; }
.columns { display: flex; gap: 12px; overflow-x: auto; padding: 14px 0 14px; align-items: flex-start; }
.column { flex: 0 0 230px; border-radius: 8px; background: color-mix(in srgb, var(--col) 22%, var(--sheet)); border-top: 5px solid var(--col); padding: 10px 10px 12px; min-height: 110px; position: relative; }
.column.is-over { outline: 2px dashed var(--accent); }
.column__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.column__head h3 { font-size: 15px; font-weight: 700; }
.column__head h3 small { color: var(--text-muted); font-weight: 400; margin-left: 4px; font-size: 14px; }
.column__head .tb-btn { width: 28px; height: 28px; padding: 0; justify-content: center; background: var(--chip-strong); border-radius: 50%; }
.column__cards { display: flex; flex-direction: column; gap: 8px; min-height: 48px; }
.column__empty { min-height: 60px; border: 1px dashed rgba(255,255,255,.12); border-radius: 8px; }
.column__onhold { font-size: 12px; letter-spacing: .06em; font-weight: 700; color: var(--text); text-align: center; margin: 10px 0 4px; }
.column-add { flex: 0 0 auto; display: flex; align-items: center; height: 60px; }
.column-add .btn { width: 28px; height: 28px; }
.kcard { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; position: relative; cursor: grab; color: var(--text); display: block; }
.kcard:hover { text-decoration: none; border-color: var(--card-border); }
.kcard.is-dragging { opacity: .4; }
.kcard__title { font-size: 15px; font-weight: 600; padding-right: 28px; line-height: 1.3; }
.kcard__meta { color: var(--text-muted); font-size: 13px; margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kcard__meta .steps { display: inline-flex; align-items: center; gap: 3px; }
.kcard .avatar-stack { position: absolute; right: 10px; top: 10px; }
.kcard .avatar-stack .avatar { border-color: var(--card); width: 24px; height: 24px; font-size: 9px; }
.kcard .assign { position: absolute; right: 10px; top: 10px; color: var(--text-muted); font-size: 18px; }
.sidecol { writing-mode: vertical-rl; background: color-mix(in srgb, var(--col) 22%, var(--sheet)); border-right: 5px solid var(--col); padding: 14px 10px; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text); min-height: 150px; cursor: pointer; justify-content: flex-start; flex: 1; }
.sidecol small { font-weight: 400; letter-spacing: 0; }
.sidecol .tb-btn { writing-mode: horizontal-tb; width: 28px; height: 28px; padding: 0; justify-content: center; background: var(--chip-strong); border-radius: 50%; }
.sidecol.is-over { outline: 2px dashed var(--accent); }
.sidecol--notnow { border-radius: 8px 0 0 0; } .sidecol--done { border-radius: 0 0 0 8px; }
.steps-list { display: flex; flex-direction: column; gap: 6px; }
.step { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.step--done span { text-decoration: line-through; color: var(--text-muted); }
.step-add { display: flex; gap: 8px; align-items: center; }
.step-add input { font-size: 17px; }

/* ==========================================================================
   Docs & Files
   ========================================================================== */
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, 158px); gap: 1px; background: var(--card-border); border: 1px solid var(--card-border); width: fit-content; max-width: 100%; }
.file-tile { width: 158px; height: 158px; background: var(--sheet); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px; color: var(--text); position: relative; overflow: hidden; }
.file-tile:hover { text-decoration: none; background: var(--card); }
.file-tile__icon { width: 44px; height: 44px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; margin-bottom: 12px; }
.file-tile b { font-size: 13px; line-height: 1.25; }
.file-tile small { color: var(--link); font-size: 12px; margin-top: 2px; }
.file-tile--doc { align-items: flex-start; text-align: left; justify-content: flex-start; }
.file-tile--doc .by { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text); line-height: 1.2; margin-bottom: 8px; }
.file-tile--doc b { font-size: 13px; display: block; margin-bottom: 4px; }
.file-tile--doc .excerpt { font-size: 11px; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.file-tile--cover { padding: 0; }
.file-tile--cover .cover { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 26px; color: #fff; letter-spacing: .04em; }
.file-tile--folder .file-tile__icon { background: transparent; color: var(--link); font-size: 44px; margin-bottom: 4px; }
.file-tile .count-badge { position: absolute; right: 10px; bottom: 10px; }
.files-list .file-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.files-list .file-row:hover { text-decoration: none; background: var(--hover); }
.files-list .file-row .file-tile__icon { width: 28px; height: 34px; margin: 0; font-size: 8px; }
.menu__sub { padding: 10px 10px 4px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--line); margin-top: 6px; }

/* ==========================================================================
   Calendar
   ========================================================================== */
.cal-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 6px 0 14px; font-weight: 700; font-size: 16px; }
.cal-nav button { background: none; border: 0; color: var(--text); font-size: 16px; padding: 4px 8px; border-radius: 6px; }
.cal-nav button:hover { background: var(--hover); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 -40px; }
.cal-grid .dow { background: var(--sheet); text-align: center; font-size: 12px; color: var(--text-muted); padding: 8px 0 6px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.cal-cell { background: var(--sheet); min-height: 88px; padding: 6px; position: relative; font-size: 12px; }
.cal-cell .n { text-align: right; font-weight: 700; display: block; margin-bottom: 4px; font-size: 13px; }
.cal-cell.other { color: var(--text-faint); }
.cal-cell.today { background: var(--brown); }
.cal-cell.today .n { text-align: left; }
.cal-cell.month-start .n { text-align: left; background: var(--brown); margin: -6px -6px 4px; padding: 6px; }
.cal-ev { display: flex; align-items: flex-start; gap: 5px; font-size: 12px; line-height: 1.25; padding: 2px 0; color: var(--text); cursor: pointer; }
.cal-ev:hover { text-decoration: none; }
.cal-ev:hover b { text-decoration: underline; }
.cal-ev .box { width: 12px; height: 12px; border: 1px solid var(--text-muted); border-radius: 2px; flex: 0 0 auto; margin-top: 2px; }
.cal-ev b { display: block; font-weight: 700; }
.cal-ev small { color: var(--text-muted); font-size: 11px; display: block; }
.agenda-day { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.agenda-day__date { font-weight: 700; }
.agenda-day__date small { display: block; font-weight: 400; color: var(--text-muted); }
.agenda-ev { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.agenda-ev b { font-size: 16px; }
.event-form { max-width: 860px; }
.event-form__title { width: 100%; font-size: 20px; background: transparent; border: 0; outline: none; padding: 6px 0; color: var(--text); }
.event-form__title::placeholder { color: var(--text-muted); }
.daterange { border: 1px solid var(--card-border); border-radius: 8px; padding: 10px 14px 12px; margin-top: 10px; display: grid; grid-template-columns: 1fr 24px 1fr; gap: 10px; align-items: center; }
.daterange .arrow { color: var(--text-muted); text-align: center; }
.daterange__side { display: flex; flex-direction: column; gap: 6px; }
.daterange__side .input--bare { font-size: 16px; }
.daterange__side .d { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.daterange__side .t { border-bottom: 1px dotted var(--card-border); width: 90px; }
.daterange__allday { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; }
.with-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.with-row svg { color: var(--link); font-size: 18px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; background: var(--chip-strong); border-radius: 999px; padding: 3px 8px 3px 3px; font-size: 14px; }
.pchip .avatar { width: 20px; height: 20px; font-size: 8px; }
.pchip button { background: none; border: 0; color: var(--text-muted); font-size: 14px; padding: 0 2px; }
.pchip--add { background: transparent; border: 1px dashed var(--card-border); color: var(--text-muted); padding: 3px 10px; cursor: pointer; }
.event-form__extras { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.event-form__extras .btn.is-on { background: var(--bar); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }

/* ==========================================================================
   Chat
   ========================================================================== */
.chat { display: flex; flex-direction: column; height: calc(100vh - 72px - var(--footer-h) - 56px); }
.chat__scroll { flex: 1; overflow-y: auto; padding: 14px 24px 8px; }
.chat__day { text-align: center; margin: 14px 0 10px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.chat-line { display: grid; grid-template-columns: 40px 1fr; gap: 10px; margin-bottom: 10px; align-items: flex-start; }
.chat-line--cont { margin-top: -6px; }
.chat-line--cont .avatar { visibility: hidden; }
.chat-bubble { background: var(--bubble); border-radius: 12px; padding: 8px 14px 10px; display: inline-block; max-width: 640px; font-size: 16px; position: relative; }
.chat-bubble .who { font-weight: 700; font-size: 13px; } .chat-bubble .when { color: var(--text-muted); font-size: 13px; margin-left: 6px; }
.chat-bubble blockquote { margin: 10px 0 4px; padding-left: 14px; border-left: 3px solid var(--text-muted); color: var(--text); }
.chat-bubble .boosts { margin-top: 10px; gap: 6px; }
.chat-bubble .boost { background: rgba(225,229,232,.08); }
.chat-line .react { opacity: 0; background: none; border: 0; color: var(--text-faint); font-size: 16px; align-self: center; }
.chat-line:hover .react { opacity: 1; }
.chat__compose { display: flex; align-items: center; gap: 4px; margin: 6px 24px 16px; background: transparent; border: 1px solid var(--card-border); border-radius: 10px; padding: 6px 8px 6px 12px; min-height: 44px; }
.chat__compose:focus-within { border-color: var(--accent); }
.chat__compose textarea { flex: 1; border: 0; background: transparent; outline: none; resize: none; min-height: 24px; max-height: 120px; padding: 4px 0; line-height: 1.4; font-size: 16px; }
.chat__compose .tool { background: none; border: 0; color: var(--text); font-size: 18px; padding: 4px 6px; border-radius: 6px; }
.chat__compose .tool:hover { background: var(--hover); }

/* ==========================================================================
   Right tray (Pings + New for you)
   ========================================================================== */
.tray { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--bg); border-left: 1px solid var(--line); z-index: 70; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.tray-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.15); }
.tray__head { display: flex; align-items: center; gap: 8px; height: var(--nav-h); padding: 16px 10px 4px 12px; }
.tray__tabs { display: inline-flex; background: var(--brown); border-radius: 8px; overflow: hidden; height: 28px; }
.tray__tabs button { background: none; border: 0; padding: 0 10px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.tray__tabs button + button { border-left: 1px solid rgba(0,0,0,.25); }
.tray__tabs button.is-on { background: rgba(255,255,255,.1); }
.tray__tabs .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); display: inline-block; }
.tray__title { font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.tray__close { margin-left: auto; background: none; border: 0; font-size: 20px; color: var(--text); padding: 4px 6px; border-radius: 6px; }
.tray__close:hover { background: var(--hover); }
.tray__body { flex: 1; overflow-y: auto; padding: 12px 14px 20px; }
.tray__foot { height: var(--footer-h); display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--bar); border-top: 1px solid var(--line); }
.tray__foot .filter-input { flex: 1; width: auto; }
.tray__section-title { font-size: 14px; font-weight: 700; color: var(--tool); margin: 8px 0 10px; display: flex; align-items: center; justify-content: space-between; }
.tray__section-title .lnk { font-weight: 400; color: var(--text-muted); font-size: 12px; background: none; border: 0; }
.tray__section-title .lnk:hover { color: var(--text); text-decoration: underline; }
.ping-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ping-add { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--link); background: none; border: 0; padding: 0; }
.ping-add .circle { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--link); display: grid; place-content: center; font-size: 18px; background: transparent; color: var(--link); }
.ping-people { display: flex; gap: 10px; flex-wrap: wrap; }
.ping-person { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; width: 48px; text-align: center; background: none; border: 0; color: var(--text-muted); padding: 0; }
.ping-person .avatar { width: 40px; height: 40px; font-size: 13px; }
.ping-callout { font-size: 12px; color: var(--text-muted); border: 1px dashed var(--card-border); border-radius: 8px; padding: 10px 12px; position: relative; }
.notif { display: grid; grid-template-columns: 40px 1fr 14px; gap: 10px; align-items: flex-start; padding: 10px 6px; border-radius: 8px; cursor: pointer; color: var(--text); }
.notif:hover { background: var(--hover); text-decoration: none; }
.notif b { display: block; font-size: 14px; }
.notif .excerpt { font-size: 13px; color: var(--text-muted); }
.notif .meta { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.notif .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); margin-top: 12px; }
.notif--read .dot { visibility: hidden; }
.notif__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; background: var(--green); color: #fff; font-size: 18px; position: relative; }
.notif__icon .mini { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: grid; place-content: center; font-size: 10px; border: 2px solid var(--bg); }
.tray-empty { color: var(--text-muted); font-size: 14px; text-align: center; padding: 40px 20px; }
.tray-empty b { display: block; color: var(--text); margin-bottom: 4px; font-size: 16px; }

/* ==========================================================================
   Footer trays (My Tasks / Events / Bookmarks / Activity / Notes)
   ========================================================================== */
.foottray-backdrop { position: fixed; inset: 0 0 var(--footer-h) 0; background: rgba(11,21,27,.85); z-index: 58; }
:root[data-theme="light"] .foottray-backdrop { background: rgba(243,242,238,.85); }
.foottray { position: fixed; left: 64px; top: 52px; bottom: var(--footer-h); width: min(764px, calc(100vw - 128px)); background: var(--sheet); border-radius: 8px 8px 0 0; z-index: 59; padding: 22px 24px 24px; overflow-y: auto; box-shadow: var(--shadow); }
@media (max-width: 760px) { .foottray { left: 8px; width: calc(100vw - 16px); } }
.foottray__close { position: absolute; right: 14px; top: 12px; background: none; border: 0; font-size: 20px; color: var(--text); padding: 4px 6px; border-radius: 6px; }
.foottray__close:hover { background: var(--hover); }
.foottray__topright { position: absolute; right: 48px; top: 16px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.foottray__topright svg { color: var(--green); }
.foottray h1 { font-size: 36px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.foottray .tool-actions { margin: 0 0 24px; }
.foottray h2 { font-size: 20px; font-weight: 700; margin: 10px 0 12px; }
.dashed-empty { border: 1px dashed var(--card-border); border-radius: 8px; padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; max-width: 420px; margin: 20px auto 0; font-size: 14px; color: var(--text-muted); }
.dashed-empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 2px; }
.dashed-empty svg { font-size: 26px; color: var(--text); margin-top: 2px; }
.boxed-empty { background: var(--chip); border-radius: 8px; min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); font-size: 14px; }
.boxed-empty svg { font-size: 22px; }
.ev-day { display: grid; grid-template-columns: 50px 1fr; gap: 16px; align-items: center; padding: 12px 14px; border-radius: 8px; margin-bottom: 8px; background: var(--chip); }
.ev-day--today { background: var(--brown-soft); }
.ev-day .datebox { width: 44px; font-size: 11px; }
.ev-day .datebox .d { font-size: 16px; }
.ev-day__list { display: flex; flex-direction: column; gap: 6px; }
.ev-item { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 15px; }
.ev-item:hover { text-decoration: none; } .ev-item:hover b { text-decoration: underline; }
.ev-item small { color: var(--text-muted); font-size: 13px; }
.tray-group { margin-bottom: 20px; }
.tray-group h4 { font-size: 13px; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
.tray-item { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; color: var(--text); font-size: 15px; }
.tray-item:hover { background: var(--hover); text-decoration: none; }
.tray-item small { color: var(--text-muted); font-size: 13px; display: block; }
.notes-area { width: 100%; min-height: 60vh; border: 0; background: transparent; padding: 4px 0; outline: none; resize: none; font-size: 16px; line-height: 1.55; color: var(--text); }
.act-row { display: grid; grid-template-columns: 16px 56px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; }
.act-row:first-child { border-color: var(--accent); }
.act-row .t { font-size: 12px; color: var(--text-muted); }
.act-row .avatar { width: 32px; height: 32px; }
.act-row b { font-weight: 700; }

/* ==========================================================================
   Footer bar
   ========================================================================== */
.footerbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--footer-h); background: var(--bar); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 10px; z-index: 65; }
.footerbar__left { display: flex; } .footerbar__right { display: flex; justify-content: flex-end; } .footerbar__center { display: flex; gap: 2px; }
.footerbar__center button { background: none; border: 0; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.footerbar__center button:hover { background: var(--hover); }
.footerbar__center button.is-on { background: var(--text); color: var(--bg); }
.footerbar__center button svg { display: none; font-size: 17px; }
.footerbar__support { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10.5px; border-radius: 8px; font-size: 14px; color: var(--text); }
.footerbar__support:hover { background: var(--hover); text-decoration: none; }
@media (max-width: 760px) { .footerbar__center button span:last-child { display: none; } .footerbar__center button svg { display: inline-block; } }
body.has-tray .footerbar__center button span:last-child { display: none; }
body.has-tray .footerbar__center button svg { display: inline-block; }
body.has-tray .footerbar__right { visibility: hidden; }
@media (min-width: 1100px) {
  body.has-tray .main { padding-right: 440px; }
  body.has-tray .topnav { right: 440px; }
  body.has-tray .footerbar { right: 440px; }
  body.has-tray .tray-backdrop { display: none !important; }
}

/* ==========================================================================
   Modal, menu, toast, pickers
   ========================================================================== */
.modal-root:empty, .menu-root:empty { display: none; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; overflow: auto; }
.modal { background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; width: min(640px, 100%); box-shadow: var(--shadow); padding: 22px 24px 20px; }
.modal--sm { width: min(440px, 100%); } .modal--lg { width: min(820px, 100%); }
.modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal__head h2 { font-size: 22px; font-weight: 800; }
.modal__close { background: none; border: 0; font-size: 20px; color: var(--text-muted); padding: 2px 6px; border-radius: 6px; }
.modal__close:hover { background: var(--hover); color: var(--text); }
.modal__foot { display: flex; gap: 8px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
/* Attachment lightbox */
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(5,10,13,.94); display: flex; flex-direction: column; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; color: #e1e5e8; min-height: 52px; }
.lightbox__name { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.lightbox__name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; }
.lightbox__name small { color: #a8afb3; }
.lightbox__actions { display: inline-flex; align-items: center; gap: 8px; }
.lightbox__actions .btn { background: rgba(255,255,255,.1); color: #e1e5e8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.lightbox__actions .btn:hover { background: rgba(255,255,255,.18); }
.lightbox__close { background: none; border: 0; color: #e1e5e8; font-size: 22px; padding: 4px 8px; border-radius: 6px; }
.lightbox__close:hover { background: rgba(255,255,255,.12); }
.lightbox__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 64px 24px; min-height: 0; position: relative; }
.lightbox__body img, .lightbox__body video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.lightbox__body iframe { width: min(1000px, 100%); height: 100%; border: 0; border-radius: 6px; background: #fff; }
.lightbox__none { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #e1e5e8; text-align: center; max-width: 420px; }
.lightbox__none svg { font-size: 48px; color: #a8afb3; }
.lightbox__none span { color: #a8afb3; font-size: 14px; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; display: grid; place-content: center; }
.lightbox__nav:hover { background: rgba(255,255,255,.24); }
.lightbox__nav--prev { left: 12px; } .lightbox__nav--next { right: 12px; }
.prose-html img, .prose-html video, .prose-html a.attachment { cursor: zoom-in; }
.rte__content img, .rte__content video, .rte__content a.attachment { cursor: default; }
.file-preview { background: var(--chip); border-radius: 10px; padding: 16px; }
.file-preview__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.file-preview__head .spacer { flex: 1; }
.file-preview__frame { margin-top: 14px; border-radius: 8px; overflow: hidden; background: #fff; }
.file-preview__frame iframe { width: 100%; height: 70vh; border: 0; }
.file-preview__frame img { max-width: 100%; display: block; margin: 0 auto; cursor: zoom-in; }
.file-preview__frame video, .file-preview__frame audio { width: 100%; display: block; background: #000; }

.menu { position: fixed; z-index: 110; background: var(--bar); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); min-width: 200px; padding: 6px; max-height: calc(100vh - 80px); overflow: auto; }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 7px; font-size: 14px; color: var(--text); }
.menu button:hover, .menu a:hover { background: var(--hover); text-decoration: none; }
.menu .danger { color: var(--alert); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.menu .menu__label { padding: 6px 10px 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.menu .menu__title { padding: 8px 10px 6px; font-size: 16px; font-weight: 700; }
.menu .k { margin-left: auto; font-size: 11px; color: var(--text-faint); }
.menu .btn { display: inline-flex; width: auto; text-align: center; padding: 0 10.5px; border-radius: 8px; }
.menu .btn--primary { background: var(--accent); color: var(--accent-text); }
.menu .btn--primary:hover { background: var(--accent); filter: brightness(1.06); }
.menu .btn--blue { color: var(--link); }
.menu p a, .menu .small a { display: inline; padding: 0; color: var(--link); text-decoration: underline; width: auto; }
.menu-backdrop { position: fixed; inset: 0; z-index: 105; }
.toast-root { position: fixed; left: 50%; bottom: calc(var(--footer-h) + 14px); transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--bubble); color: var(--text); border: 1px solid var(--line); padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow); animation: toast-in .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.people-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.people-pick label { display: inline-flex; align-items: center; gap: 6px; background: var(--chip); border-radius: 999px; padding: 4px 10px 4px 4px; cursor: pointer; font-size: 13px; border: 1px solid transparent; }
.people-pick label.is-on { border-color: var(--accent); background: rgba(106,179,253,.15); }
.people-pick input { display: none; }
.emoji-pick { display: flex; flex-wrap: wrap; gap: 4px; max-width: 280px; }
.emoji-pick button { background: var(--chip); border: 0; font-size: 20px; width: 40px; height: 40px; border-radius: 8px; display: grid; place-content: center; }
.emoji-pick button:hover { background: var(--chip-strong); }

/* Activity / people / settings / misc pages */
.activity-page { max-width: 820px; }
.activity-filters { display: flex; align-items: center; gap: 8px; margin: 12px 0 22px; flex-wrap: wrap; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.person-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; color: var(--text); }
.person-card:hover { text-decoration: none; border-color: var(--text-faint); }
.person-card b { font-size: 15px; } .person-card small { color: var(--text-muted); font-size: 12px; }
.settings-list { max-width: 640px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.settings-row b { display: block; font-size: 15px; } .settings-row small { color: var(--text-muted); font-size: 13px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 20px; }
.admin-tile { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 16px; color: var(--text); display: block; }
.admin-tile:hover { text-decoration: none; border-color: var(--text-faint); }
.admin-tile b { display: block; font-size: 15px; margin-bottom: 4px; } .admin-tile small { color: var(--text-muted); font-size: 13px; }
.everything-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 20px; }
.everything-grid a { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 18px 14px; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.everything-grid a:hover { text-decoration: none; border-color: var(--text-faint); }
.everything-grid a svg { font-size: 26px; color: var(--tool); } .everything-grid a small { color: var(--text-muted); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); max-width: 460px; margin: 0 auto; }
.empty-state h3 { color: var(--text); font-size: 20px; margin-bottom: 8px; }
.empty-state svg { font-size: 44px; color: var(--tool); margin-bottom: 10px; }
::selection { background: rgba(106,179,253,.35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 10px; border: 2px solid var(--bg); }

/* Maklon: per-user access editor */
.field-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.mk-perm { border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 12px; background: var(--card); }
.mk-perm__note { display: flex; gap: 8px; align-items: center; background: var(--chip); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.mk-perm__group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--text-muted); margin: 10px 0 4px; }
.mk-perm__row { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mk-perm__row:last-child { border-bottom: 0; }
.mk-perm__label b { display: block; font-size: 13px; } .mk-perm__label small { color: var(--text-muted); font-size: 12px; }
.mk-perm__def { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.mk-perm__def.is-yes { color: #2fa36b; } .mk-perm__def.is-no { color: var(--text-faint); }
.mk-perm__def svg { width: 12px; height: 12px; }
.mk-seg { display: inline-flex; background: var(--chip); border-radius: 8px; padding: 2px; box-shadow: inset 0 0 0 1px var(--card-border); }
.mk-seg label { position: relative; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.mk-seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mk-seg label:has(input:checked) { background: var(--sheet); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.mk-seg label.is-allow:has(input:checked) { background: #2fa36b; color: #fff; }
.mk-seg label.is-deny:has(input:checked) { background: #e5484d; color: #fff; }
@media (max-width: 720px) { .mk-perm__row { grid-template-columns: 1fr; gap: 4px; } .field-row--3 { grid-template-columns: 1fr; } }

/* Maklon: grouped nav, extra tools */
.mk-bar { height: 8px; border-radius: 4px; background: var(--chip-strong); overflow: hidden; min-width: 60px; }
.mk-bar span { display: block; height: 100%; background: var(--c, var(--accent)); }
.mk-score { display: inline-grid; place-content: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; font-size: 14px; background: color-mix(in srgb, var(--c) 22%, var(--sheet)); color: var(--c); box-shadow: inset 0 0 0 2px var(--c); }
.mk-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 20px; }
@media (max-width: 900px) { .mk-calc { grid-template-columns: 1fr; } }
.mk-result { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mk-result:last-child { border-bottom: 0; } .mk-result b { font-variant-numeric: tabular-nums; }
.mk-result.is-total { font-size: 16px; } .mk-result.is-good b { color: #2fa36b; } .mk-result.is-bad b { color: #e5484d; }
.mk-announce { border-left: 4px solid var(--c, var(--accent)); }
.mk-quote { background: #fff; color: #111; padding: 40px 48px; border-radius: 10px; max-width: 800px; margin: 0 auto; font-size: 14px; line-height: 1.5; }
.mk-quote table { width: 100%; border-collapse: collapse; margin: 16px 0; } .mk-quote th, .mk-quote td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; } .mk-quote th { background: #f1f1f1; }
@media print { .topnav, .footerbar, .mk-nav, .mk-head, .sheet-toolbar, .toolbar, .viewas-banner, [data-no-print] { display: none !important; } .sheet, .main { margin: 0 !important; padding: 0 !important; background: #fff !important; } .mk-quote { padding: 0; } }

/* New project: optional feature card */
.opt-card { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 12px 14px; }
.opt-card .onoff { flex: 0 0 auto; margin-top: 2px; }
.opt-card b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }

/* org editor */
.mk-swatch { width: 22px; height: 22px; border-radius: 50%; background: var(--c); cursor: pointer; position: relative; box-shadow: 0 0 0 2px var(--sheet); }
.mk-swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mk-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--c); }
.mk-perm .people-pick { margin-bottom: 6px; }

/* order discussion */
.mk-participants { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.mk-participant { display: inline-flex; align-items: center; gap: 6px; background: var(--chip); border-radius: 999px; padding: 3px 8px 3px 3px; }
.mk-participant__x { border: 0; background: none; color: var(--text-faint); cursor: pointer; padding: 0; display: inline-grid; place-content: center; width: 16px; height: 16px; }
.mk-participant__x svg { width: 12px; height: 12px; } .mk-participant__x:hover { color: var(--alert); }
.mk-thread .mk-comment { margin-bottom: 10px; }
.mk-comment--reply { margin: 8px 0 0 28px; border-left: 2px solid var(--line); background: transparent; padding-left: 12px; }
.mk-reply-form { margin-top: 8px; }
.tb-btn.xsmall { height: 24px; font-size: 12px; padding: 0 6px; }

/* profile pictures */
.avatar--img { background: var(--chip) !important; overflow: hidden; }
.avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.avatar-edit { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
.avatar-edit__pick { position: relative; cursor: pointer; display: inline-block; border-radius: 50%; }
.avatar-edit__hint { position: absolute; inset: 0; border-radius: 50%; display: grid; place-content: center; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .15s; text-align: center; }
.avatar-edit__pick:hover .avatar-edit__hint { opacity: 1; }
.avatar-edit__hint svg { display: block; margin: 0 auto 2px; width: 16px; height: 16px; }

/* quotation letter, calculator tiers, summaries, timeline, KB ask, signatures */
.mk-tiers td, .mk-tiers th { text-align: right; } .mk-tiers td:first-child, .mk-tiers th:first-child { text-align: left; }
.mk-quote { font-family: Georgia, 'Times New Roman', serif; color: #111; }
.mk-quote__head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 3px double #333; padding-bottom: 14px; margin-bottom: 18px; }
.mk-quote__co { font: 800 20px/1.1 Arial, Helvetica, sans-serif; letter-spacing: .04em; } .mk-quote__tag { font: 13px Arial, sans-serif; color: #444; } .mk-quote__addr { font: 11px/1.4 Arial, sans-serif; color: #555; margin-top: 4px; }
.mk-quote__title { font: 800 16px Arial, sans-serif; letter-spacing: .08em; }
.mk-quote__meta { width: 100%; font-size: 13px; margin: 0 0 14px; } .mk-quote__meta td { border: 0; padding: 3px 6px 3px 0; vertical-align: top; } .mk-quote__meta td:nth-child(odd) { color: #555; width: 15%; white-space: nowrap; }
.mk-quote__tiers th { background: #f1f1f1; text-align: center; } .mk-quote__tiers td { text-align: center; } .mk-quote__tiers td:first-child { text-align: left; color: #555; }
.mk-quote__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: 13px; } .mk-quote__cols ul { list-style: none; padding: 0; margin: 6px 0 0; } .mk-quote__cols li { padding: 2px 0; }
.mk-quote__sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; font-size: 13px; text-align: center; }
.mk-quote__sigbox { height: 80px; display: grid; place-content: center; margin: 6px 0; border-bottom: 1px solid #333; } .mk-quote__sigbox img { max-height: 76px; max-width: 220px; }
.sig-preview { display: inline-grid; place-content: center; min-width: 140px; height: 56px; padding: 4px 8px; background: #fff; border: 1px dashed var(--card-border); border-radius: 8px; } .sig-preview img { max-height: 48px; max-width: 200px; }
.mk-timeline { display: flex; flex-direction: column; } .mk-tl { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--text); } .mk-tl:hover { text-decoration: none; background: var(--hover); margin: 0 -8px; padding: 8px; border-radius: 6px; } .mk-tl:last-child { border-bottom: 0; }
.mk-ask { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; } .mk-ask .input { flex: 1; }
.select--sm, .input--sm { height: 30px; font-size: 13px; padding: 0 8px; }
tr.is-done td { opacity: .7; }
@media print { .mk-quote__head { border-color: #000; } }

/* AI assistant */
.jumpmenu__tiles--6 { grid-template-columns: repeat(6, 1fr); }
.footerbar__ai { color: #d9a441; font-weight: 600; }
.ai-wrap { display: flex; flex-direction: column; min-height: calc(100vh - 260px); }
.ai-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.ai-status { margin-left: auto; font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; } .ai-status .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .ai-status .link { background: none; border: 0; color: var(--link); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.ai-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-content: center; background: linear-gradient(135deg, #d9a441, #b8742f); color: #0e1d24; flex: 0 0 auto; } .ai-avatar svg { width: 16px; height: 16px; } .ai-avatar--lg { width: 44px; height: 44px; } .ai-avatar--lg svg { width: 22px; height: 22px; }
.ai-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 12px; max-height: calc(100vh - 380px); min-height: 240px; }
.ai-empty { padding: 20px 0; }
.ai-suggest { cursor: pointer; border: 1px solid var(--card-border); background: var(--card); color: var(--text); font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; } .ai-suggest:hover { border-color: var(--accent); }
.ai-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 100%; } .ai-msg--user { justify-content: flex-end; } .ai-msg--user .ai-bubble { background: var(--accent); color: var(--accent-text); border-bottom-right-radius: 4px; } .ai-msg--ai .ai-bubble { background: var(--card); border: 1px solid var(--card-border); border-bottom-left-radius: 4px; }
.ai-bubble { max-width: min(760px, 85%); padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; } .ai-bubble p { margin: 0 0 8px; } .ai-bubble p:last-child { margin-bottom: 0; } .ai-bubble ul, .ai-bubble ol { margin: 4px 0 8px; padding-left: 20px; } .ai-bubble li { margin: 2px 0; } .ai-bubble pre { background: var(--chip); border-radius: 8px; padding: 8px 10px; font-size: 12px; overflow: auto; margin: 6px 0; } .ai-bubble code { background: var(--chip); border-radius: 4px; padding: 0 4px; font-size: 12.5px; } .ai-msg--user .ai-bubble code { background: rgba(0,0,0,.15); } .ai-bubble .ai-h { display: block; margin: 8px 0 4px; font-size: 15px; } .ai-bubble.is-error { border-color: #e5484d; color: var(--alert); }
.ai-meta { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.ai-cursor { display: inline-block; width: 8px; height: 14px; background: var(--text-muted); margin-left: 2px; vertical-align: -2px; animation: ai-blink 1s steps(2) infinite; } @keyframes ai-blink { to { opacity: 0; } }
.ai-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); padding: 2px 0 2px 42px; } .ai-tool svg { width: 14px; height: 14px; } .ai-sources a { font-size: 11px; background: var(--chip); border-radius: 999px; padding: 2px 8px; margin-right: 4px; color: var(--text); }
.ai-composer { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; } .ai-composer .textarea { min-height: 54px; resize: vertical; } .ai-composer__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }

/* sign-in screen & sync indicator */
body.is-login .main { padding: 0; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.login__card { width: min(440px, 100%); background: var(--sheet); border: 1px solid var(--card-border); border-radius: 16px; padding: 32px 32px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login__logo { display: flex; justify-content: center; margin-bottom: 18px; }
.login__card h1 { font-size: 24px; font-weight: 800; text-align: center; margin: 0 0 6px; }
.login__card > p.muted { text-align: center; margin: 0 0 18px; font-size: 14px; }
.login__google { width: 100%; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; }
.login__google:hover { background: #f7f8f8; }
.login__or { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--text-muted); font-size: 12px; } .login__or::before, .login__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login__error { background: color-mix(in srgb, #e5484d 14%, var(--sheet)); border: 1px solid color-mix(in srgb, #e5484d 40%, transparent); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 12px; }
.login .link { background: none; border: 0; color: var(--link); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; background: #2fa36b; align-self: center; } .sync-dot[data-state="offline"] { background: #e5484d; animation: ai-blink 1.2s steps(2) infinite; }

/* ==========================================================================
   Mobile (phones) — app-like layout: full-width sheet, bottom tab bar, full-screen panels
   ========================================================================== */
@media (max-width: 760px) {
  :root { --footer-h: 60px; }
  html { -webkit-text-size-adjust: 100%; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .topnav { height: 52px; padding: 0 6px 4px; padding-top: env(safe-area-inset-top); grid-template-columns: auto 1fr auto; }
  .topnav__home-label { display: none; }
  .topnav__right { justify-content: flex-end; padding-right: 2px; }
  .main { padding: 60px 0 calc(var(--footer-h) + env(safe-area-inset-bottom) + 12px); }
  .sheet { margin: 0; padding: 18px 14px 120px; border-radius: 0; min-height: calc(100vh - 60px); }
  .sheet__toolbar { margin: -18px -14px 20px; padding: 8px 10px; flex-wrap: wrap; row-gap: 6px; }
  .page-title { font-size: 26px; }
  .home { padding: 0 12px; }
  .project-cards--grid { grid-template-columns: 1fr; }
  .dock { gap: 20px 12px; margin-top: 20px; }
  /* bottom tab bar: icons with tiny labels, equal cells */
  .footerbar { height: var(--footer-h); padding: 0 4px calc(env(safe-area-inset-bottom)); grid-template-columns: auto 1fr auto; gap: 4px; border-top: 1px solid var(--line); }
  .footerbar__center { display: flex; justify-content: space-around; gap: 0; }
  .footerbar__center button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; height: 52px; padding: 4px 2px; font-size: 10px; }
  .footerbar__center button span:last-child { display: block !important; font-size: 10px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .footerbar__center button svg { width: 20px; height: 20px; }
  .footerbar__right { display: flex; align-items: center; gap: 0; }
  .footerbar__support, .footerbar__ai { flex-direction: column; gap: 2px; height: 52px; padding: 4px 6px; font-size: 10px; }
  .footerbar__support span:last-child { font-size: 10px; line-height: 1; }
  .footerbar__ai span:last-child { display: none; }
  .sync-dot { position: absolute; right: 8px; top: 6px; margin: 0; }
  /* panels become full-screen sheets */
  .tray { width: 100vw; border-left: 0; }
  .foottray { left: 0; width: 100vw; top: 0; bottom: var(--footer-h); border-radius: 0; padding: 16px 14px; }
  .jumpmenu__panel { width: 100vw; max-height: 100vh; border-radius: 0; padding-top: env(safe-area-inset-top); }
  .jumpmenu__tiles, .jumpmenu__tiles--5, .jumpmenu__tiles--6 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .jumpmenu__tile .k { display: none; }
  .modal { width: 100vw !important; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .menu { max-width: calc(100vw - 16px); }
  /* touch-friendly controls, no iOS zoom on focus */
  .input, .select, .textarea, .filter-input, .jumpmenu__search { font-size: 16px; }
  .btn { min-height: 40px; }
  .tb-btn { min-height: 34px; }
  /* Maklon */
  .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mk-stat { padding: 10px 12px; } .mk-stat b { font-size: 18px; word-break: break-word; }
  .mk-head { flex-direction: column; align-items: stretch; }
  .mk-head .page-title { font-size: 24px !important; }
  .mk-nav { margin: -4px 0 14px; }
  .mk-panel { overflow-x: auto; }
  .mk-row { flex-wrap: wrap; }
  .mk-col { flex: 0 0 82vw; }
  .mk-board { margin: 0 -14px; padding: 0 14px 12px; scroll-snap-type: x mandatory; } .mk-col { scroll-snap-align: start; }
  .mk-participants { gap: 6px; }
  .viewas-banner { margin: -10px 0 10px; border-radius: 0; font-size: 12px; flex-wrap: wrap; }
  /* AI chat */
  .ai-log { max-height: none; min-height: 40vh; }
  .ai-bubble { max-width: 92%; }
  .ai-head .ai-avatar--lg { display: none; }
  .ai-status { margin-left: 0; width: 100%; }
  /* login */
  .login { padding: 16px 12px; align-items: start; }
  .login__card { padding: 24px 18px; border-radius: 12px; }
}
@media (display-mode: standalone) { .topnav { padding-top: max(4px, env(safe-area-inset-top)); } }