/* ==========================================================================
   Hoxton Teams design system
   Ink sidebar · cool canvas · Hoxton Indigo · colour-spined groups
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Ink scale (text and the sidebar) */
  --ink: #1B1E3F;
  --ink-2: #2D3160;
  --text: #1B1E3F;
  --text-2: #3D4170;
  --muted: #646A90;
  --faint: #959BBB;

  /* Surfaces */
  --canvas: #F3F4F9;
  --surface: #FFFFFF;
  --surface-2: #F8F9FC;
  --surface-3: #EFF1F7;
  --line: #E1E4EF;
  --line-2: #ECEEF5;
  --hover: #F1F2FA;

  /* Brand + accents */
  --brand: #4045D6;
  --brand-600: #3036C4;
  --brand-700: #262BA4;
  --brand-50: #EEEFFD;
  --brand-100: #DCDEFB;
  --on-brand: #FFFFFF;
  --teal: #12A4A8;
  --purple: #8B5CF6;
  --coral: #E8603C;
  --green: #1FA971;
  --yellow: #F2A71B;
  --red: #E5484D;
  --red-50: #FDECEC;
  --green-50: #E7F7EF;
  --yellow-50: #FEF6E4;

  /* Sidebar */
  --side-bg: #1B1E3F;
  --side-bg-2: #252950;
  --side-text: #C9CCE8;
  --side-muted: #8B90BC;
  --side-active: #FFFFFF;

  /* Shape and depth */
  --r-xl: 18px;
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 7px;
  --r-xs: 5px;
  --sh-1: 0 1px 2px rgba(27, 30, 63, .06), 0 1px 1px rgba(27, 30, 63, .03);
  --sh-2: 0 8px 24px -10px rgba(27, 30, 63, .22), 0 2px 4px rgba(27, 30, 63, .04);
  --sh-pop: 0 16px 40px -12px rgba(27, 30, 63, .35), 0 2px 6px rgba(27, 30, 63, .08);
  --focus: 0 0 0 3px rgba(64, 69, 214, .35);

  --side-w: 248px;
  --top-h: 60px;
  --panel-w: 600px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --text: #E8E9F6;
  --text-2: #C3C6E6;
  --muted: #9CA1C6;
  --faint: #6F749C;
  --canvas: #0E1022;
  --surface: #171A33;
  --surface-2: #1C1F3C;
  --surface-3: #232746;
  --line: #2C3057;
  --line-2: #252949;
  --hover: #22264A;
  --brand: #7378F2;
  --brand-600: #8A8EF6;
  --brand-700: #A3A6F8;
  --brand-50: #23264F;
  --brand-100: #2F3366;
  --red-50: #3A1E2B;
  --green-50: #15322C;
  --yellow-50: #352C17;
  --side-bg: #0A0C1C;
  --side-bg-2: #171A33;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 8px 24px -10px rgba(0, 0, 0, .6);
  --sh-pop: 0 16px 40px -12px rgba(0, 0, 0, .7), 0 0 0 1px var(--line);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" on;
}
img { max-width: 100%; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: 26px; font-weight: 750; letter-spacing: -0.02em; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0 0 .75em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brand); color: #fff; padding: 8px 14px; border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spacer { flex: 1; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon.sm { width: 15px; height: 15px; }
.icon.xs { width: 13px; height: 13px; }
.icon.lg { width: 22px; height: 22px; }

/* ----------------------------------------------------------- app shell */

.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
html.side-collapsed .app { grid-template-columns: 68px minmax(0, 1fr); }

.sidebar {
  position: sticky; top: 0; height: 100vh;
  background: var(--side-bg);
  color: var(--side-text);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 40;
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; min-height: var(--top-h); }
.side-brand a { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.side-brand .wordmark { font-weight: 750; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }
.logo-mark { width: 30px; height: 30px; flex: none; }
.side-collapse { margin-left: auto; color: var(--side-muted); background: none; border: 0; padding: 6px; border-radius: var(--r-sm); cursor: pointer; }
.side-collapse:hover { color: #fff; background: var(--side-bg-2); }
.side-scroll { flex: 1; overflow-y: auto; padding: 4px 10px 16px; scrollbar-width: thin; scrollbar-color: var(--side-bg-2) transparent; }
.side-create { margin: 4px 10px 10px; }
.side-create .btn { width: 100%; justify-content: center; }
.side-nav { list-style: none; margin: 0; padding: 0; }
.side-nav a, .side-nav button.side-link {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; margin: 1px 0;
  color: var(--side-text); text-decoration: none;
  border-radius: var(--r-sm);
  font-weight: 550; font-size: 13.5px;
  white-space: nowrap;
  width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left;
}
.side-nav a:hover, .side-nav button.side-link:hover { background: var(--side-bg-2); color: #fff; }
.side-nav a[aria-current="page"] { background: var(--brand); color: var(--side-active); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.side-nav .badge { margin-left: auto; background: var(--coral); color: #fff; }
.side-section { margin: 18px 10px 6px; font-size: 12px; font-weight: 650; color: var(--side-muted); display: flex; align-items: center; gap: 6px; }
.side-section a { color: var(--side-muted); }
.side-boards a { font-weight: 500; font-size: 13px; padding: 6px 10px; }
.side-boards .dot { width: 8px; height: 8px; border-radius: 3px; flex: none; background: var(--side-muted); }
.side-foot { padding: 10px; border-top: 1px solid rgba(255,255,255,.06); }
html.side-collapsed .side-label, html.side-collapsed .side-section, html.side-collapsed .side-boards, html.side-collapsed .wordmark, html.side-collapsed .side-nav .badge-text { display: none; }
html.side-collapsed .side-nav a { justify-content: center; }
html.side-collapsed .side-create .btn .side-label { display: none; }
html.side-collapsed .side-collapse { margin: 0 auto; }
html.side-collapsed .side-brand { flex-direction: column; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--top-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line-2);
}
.topbar .menu-toggle { display: none; }
.ws-switch { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); font-weight: 650; cursor: pointer; color: var(--text); max-width: 240px; font-family: inherit; font-size: 13.5px; }
.ws-switch:hover { border-color: var(--brand-100); }
.ws-chip { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; flex: none; }
.search { position: relative; flex: 1; max-width: 520px; }
.search input { width: 100%; padding: 9px 12px 9px 38px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); font: inherit; color: var(--text); }
.search input:focus { border-color: var(--brand); box-shadow: var(--focus); outline: none; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; }
.top-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.bell { position: relative; }
.bell .count { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--coral); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--canvas); }
.bell .count[hidden] { display: none; }
kbd { font-family: inherit; font-size: 11px; font-weight: 650; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); color: var(--faint); background: var(--surface-2); }

.content { padding: 24px 28px 64px; max-width: 1480px; width: 100%; }
.content.wide { max-width: none; }

@media (max-width: 960px) {
  .app, html.side-collapsed .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 280px; transform: translateX(-100%); transition: transform .25s var(--ease); box-shadow: var(--sh-pop); }
  html.side-open .sidebar { transform: none; }
  html.side-open .scrim { display: block; }
  .side-collapse { display: none; }
  html.side-collapsed .side-label, html.side-collapsed .side-section, html.side-collapsed .side-boards, html.side-collapsed .wordmark { display: initial; }
  .topbar { padding: 0 12px; gap: 6px; }
  .topbar .menu-toggle { display: inline-flex; }
  .ws-switch .ws-name, .search kbd { display: none; }
  .content { padding: 18px 14px 80px; }
  .hide-mobile { display: none !important; }
}
.scrim { display: none; position: fixed; inset: 0; background: rgba(14, 16, 34, .45); z-index: 35; }

/* --------------------------------------------------------- page chrome */

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .titles { min-width: 0; flex: 1; }
.page-head .lede { color: var(--muted); margin: 6px 0 0; max-width: 70ch; }
.page-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand-600); }
.crumbs .sep { color: var(--faint); }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; min-height: 36px;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 650; font-size: 13.5px; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
.btn:hover { background: var(--hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 2px 6px -2px rgba(64,69,214,.55); }
.btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); }
:root[data-theme="dark"] .btn-primary { color: #fff; }
.btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
.btn-danger:hover { background: var(--red-50); }
.btn-danger-solid { background: var(--red); border-color: var(--red); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--hover); }
.btn-sm { padding: 5px 10px; min-height: 30px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-block { width: 100%; justify-content: center; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); border: 0; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.sm { width: 28px; height: 28px; border-radius: var(--r-sm); }
.link-btn { background: none; border: 0; padding: 0; color: var(--brand-600); font: inherit; font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label, .label { font-weight: 650; font-size: 13px; color: var(--text-2); }
.field .hint { font-size: 12.5px; color: var(--muted); margin: 0; }
.field-error { color: var(--red); font-size: 12.5px; font-weight: 600; margin: 0; }
.input, select.input, textarea.input {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: 14px;
  transition: border-color .12s, box-shadow .12s;
}
.input:hover { border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); }
.input:focus { border-color: var(--brand); box-shadow: var(--focus); outline: none; }
.input[aria-invalid="true"] { border-color: var(--red); }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.55; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23959BBB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
.input-sm { padding: 6px 10px; font-size: 13px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 4px 0; }
.check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }
.check .t { font-weight: 600; }
.check .d { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"], .swatch:has(input:checked) { border-color: var(--surface); box-shadow: 0 0 0 2px var(--text); }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- cards */

.card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px 12px; }
.card-head h2, .card-head h3 { flex: 1; min-width: 0; }
.card-body { padding: 4px 20px 20px; }
.card-foot { padding: 12px 20px; border-top: 1px solid var(--line-2); display: flex; gap: 8px; align-items: center; }


.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11.5px; font-weight: 750; background: var(--surface-3); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.pill .dot, .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; display: inline-block; }
.pill-brand { background: var(--brand-50); color: var(--brand-700); }
.pill-green { background: var(--green-50); color: #127A51; }
.pill-red { background: var(--red-50); color: #B4232A; }
.pill-yellow { background: var(--yellow-50); color: #94600A; }
:root[data-theme="dark"] .pill-green { color: #5FD7A1; }
:root[data-theme="dark"] .pill-red { color: #FF8C8F; }
:root[data-theme="dark"] .pill-yellow { color: #F5C462; }
.tag { white-space: nowrap; display: inline-flex; padding: 2px 8px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 600; }

/* Status as a solid block: the signature "colour you can read from across the room" */
.status { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; border-radius: 6px; font-weight: 700; font-size: 12.5px; color: #fff; background: var(--c, #9AA0BC); white-space: nowrap; }
.status.sm { padding: 2px 8px; font-size: 11.5px; }

.avatar { display: inline-grid; place-items: center; border-radius: 50%; background: var(--av, var(--brand)); color: #fff; font-weight: 750; flex: none; object-fit: cover; letter-spacing: 0; border: 2px solid var(--surface); }
.avatar-xs { width: 22px; height: 22px; font-size: 9.5px; border-width: 1.5px; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 34px; height: 34px; font-size: 13px; }
.avatar-lg { width: 46px; height: 46px; font-size: 16px; }
.avatar-xl { width: 80px; height: 80px; font-size: 26px; }
.avatar-empty { background: var(--surface-3); color: var(--faint); border-style: dashed; border-color: var(--line); }
.avatar-empty .icon { width: 60%; height: 60%; }
.avatars { display: inline-flex; align-items: center; }
.avatars > * + * { margin-left: -7px; }
.avatars .more { background: var(--surface-3); color: var(--text-2); }

.progress { height: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; min-width: 60px; flex: 1; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--green); width: var(--v, 0%); transition: width .4s var(--ease); }
.progress.brand > span { background: var(--brand); }
.stackbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.stackbar > span { display: block; height: 100%; background: var(--c); flex: var(--n) 1 0; min-width: 4px; }

/* ----------------------------------------------------------- data tables */

.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table th { text-align: left; font-weight: 650; color: var(--muted); font-size: 12.5px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.table th:first-child { border-top-left-radius: var(--r-lg); }
.table th:last-child { border-top-right-radius: var(--r-lg); }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table .actions { text-align: right; white-space: nowrap; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person .meta { min-width: 0; }
.person .name { font-weight: 650; display: block; }
.person .sub { color: var(--muted); font-size: 12.5px; display: block; }

.pager { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 16px; }

/* ----------------------------------------------------------------- tabs */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; color: var(--muted); font-weight: 650; border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; font: inherit; font-weight: 650; text-decoration: none; }
.tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { color: var(--brand-600); border-bottom-color: var(--brand); }
.segmented { display: inline-flex; padding: 3px; border-radius: var(--r-md); background: var(--surface-3); gap: 2px; }
.segmented a, .segmented button { padding: 6px 12px; border-radius: var(--r-sm); font-weight: 650; font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; text-decoration: none; border: 0; background: none; cursor: pointer; font-family: inherit; }
.segmented [aria-current="page"], .segmented [aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }

/* -------------------------------------------------------- menus, popovers */

.menu-root { position: relative; display: inline-flex; }
.menu, .popover {
  position: absolute; z-index: 60;
  min-width: 220px; max-width: 340px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-pop);
  padding: 6px;
  top: calc(100% + 6px); left: 0;
}
.menu[hidden], .popover[hidden] { display: none; }
.menu.right { left: auto; right: 0; }
.menu a, .menu button.item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--text); background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 550; text-align: left; text-decoration: none;
}
.menu a:hover, .menu button.item:hover, .menu .item.active { background: var(--hover); text-decoration: none; }
.menu .item.danger { color: var(--red); }
.menu .sep { height: 1px; background: var(--line-2); margin: 6px 4px; }
.menu .head { padding: 8px 10px 4px; font-size: 12px; color: var(--muted); font-weight: 650; }
.menu .icon { color: var(--muted); }
.floating { position: fixed; z-index: 80; }

/* --------------------------------------------------------------- dialog */

dialog.dialog {
  border: 0; padding: 0; border-radius: var(--r-xl);
  width: min(560px, calc(100vw - 24px));
  background: var(--surface); color: var(--text);
  box-shadow: var(--sh-pop);
}
dialog.dialog::backdrop { background: rgba(14, 16, 34, .5); backdrop-filter: blur(2px); }
dialog.dialog[open] { animation: pop .18s var(--ease); }
.dialog-head { display: flex; align-items: center; gap: 10px; padding: 20px 22px 6px; }
.dialog-head h2 { flex: 1; }
.dialog-body { padding: 10px 22px 6px; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 20px; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- toasts */

.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--r-md); background: var(--ink); color: #fff; box-shadow: var(--sh-pop); font-weight: 600; max-width: min(560px, calc(100vw - 32px)); animation: toast-in .25s var(--ease); }
.toast.error { background: #8E1D25; }
.toast .icon { color: #8FE3BC; }
.toast.error .icon { color: #FFC2C4; }
.toast.warn { background: #6B4A05; }
.toast.warn .icon { color: #FFD98A; }
.toast button { background: none; border: 0; color: rgba(255,255,255,.7); cursor: pointer; padding: 2px; margin-left: 4px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.alert { display: flex; gap: 12px; padding: 12px 16px; border-radius: var(--r-md); background: var(--brand-50); color: var(--text); border: 1px solid var(--brand-100); margin-bottom: 16px; align-items: flex-start; }
.alert .icon { color: var(--brand); margin-top: 1px; }
.alert.warn { background: var(--yellow-50); border-color: color-mix(in srgb, var(--yellow) 35%, transparent); }
.alert.warn .icon { color: #C48104; }
.alert.error { background: var(--red-50); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.alert.error .icon { color: var(--red); }
.alert.ok { background: var(--green-50); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.alert.ok .icon { color: var(--green); }
.alert p:last-child { margin: 0; }

/* -------------------------------------------------------- empty states */

.empty { text-align: center; padding: 44px 24px; color: var(--muted); }
.empty .art { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 22px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); position: relative; }
.empty .art::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 6px; background: var(--coral); right: -6px; bottom: 8px; opacity: .9; }
.empty .art::before { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); left: -4px; top: 6px; }
.empty .art .icon { width: 30px; height: 30px; }
.empty h3 { color: var(--text); margin-bottom: 6px; font-size: 16px; }
.empty p { max-width: 46ch; margin: 0 auto 16px; }

/* ===================================================== auth (signed out) */

.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--surface); }
.auth-art { background: var(--side-bg); color: #fff; padding: 48px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.auth-art .brand { display: flex; align-items: center; gap: 12px; font-weight: 750; font-size: 18px; color: #fff; position: relative; z-index: 1; }
.auth-art .pitch { margin-top: auto; position: relative; z-index: 1; max-width: 30ch; }
.auth-art .pitch h2 { color: #fff; font-size: 34px; line-height: 1.12; letter-spacing: -0.025em; font-weight: 750; }
.auth-art .pitch p { color: var(--side-text); margin-top: 14px; font-size: 15px; }
.auth-board { position: absolute; right: -40px; top: 120px; width: 440px; transform: rotate(-4deg); opacity: .96; }
.auth-board .grp { border-radius: 12px; background: rgba(255,255,255,.06); padding: 10px; margin-bottom: 14px; border-left: 5px solid var(--g); }
.auth-board .grp b { display: block; color: var(--g); font-size: 13px; margin: 0 0 8px 4px; }
.auth-board .ln { display: grid; grid-template-columns: 1fr 96px; gap: 6px; margin-bottom: 6px; }
.auth-board .ln i { height: 26px; border-radius: 6px; background: rgba(255,255,255,.08); }
.auth-board .ln em { height: 26px; border-radius: 6px; background: var(--s); }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: 28px; margin-bottom: 6px; }
.auth-card .sub { color: var(--muted); margin-bottom: 26px; }
.auth-card .foot { margin-top: 22px; color: var(--muted); text-align: center; }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { padding: 22px 24px; min-height: 0; }
  .auth-art .pitch, .auth-board { display: none; }
}

/* ============================================================ dashboard */

.greet { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.greet h1 { font-size: 30px; }
.greet .date { color: var(--muted); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.tile { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--sh-1); position: relative; overflow: hidden; text-decoration: none; color: inherit; }
.tile::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c, var(--brand)); }
.tile:hover { border-color: var(--line); text-decoration: none; }
.tile .n { font-size: 26px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile .l { color: var(--muted); font-weight: 600; font-size: 13px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .dash { grid-template-columns: 1fr; } }

.onboard { background: linear-gradient(120deg, var(--brand) 0%, #5B3FD6 100%); color: #fff; border-radius: var(--r-xl); padding: 22px 24px; margin-bottom: 20px; display: grid; grid-template-columns: 1fr auto; gap: 18px; position: relative; overflow: hidden; }
.onboard h2 { color: #fff; font-size: 20px; }
.onboard p { color: rgba(255,255,255,.82); margin: 6px 0 0; }
.onboard ol { list-style: none; margin: 16px 0 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; counter-reset: s; }
.onboard li a { display: flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-weight: 650; text-decoration: none; }
.onboard li a:hover { background: rgba(255,255,255,.24); }
.onboard li .n { counter-increment: s; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--brand-700); font-size: 12px; font-weight: 800; }
.onboard li .n::before { content: counter(s); }
.onboard li.done a { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); text-decoration: line-through; }
.onboard li.done .n { background: #8FE3BC; color: #0E5A39; }
.onboard li.done .n::before { content: "✓"; }
.onboard .close { color: #fff; opacity: .8; }

.task-list { list-style: none; margin: 0; padding: 0; }
.task-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--line-2); }
.task-item:first-child { border-top: 0; }
.task-item:hover { background: var(--surface-2); }
.task-item .t { flex: 1; min-width: 0; }
.task-item .t a { color: var(--text); font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-item .t .sub { color: var(--muted); font-size: 12.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.done-btn { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; color: transparent; cursor: pointer; flex: none; padding: 0; transition: all .15s; }
.done-btn:hover { border-color: var(--green); color: var(--green); }
.done-btn.is-done { background: var(--green); border-color: var(--green); color: #fff; }
.due { font-size: 12.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.due.is-late { color: var(--red); }
.due.is-today { color: #C26A00; }
:root[data-theme="dark"] .due.is-today { color: var(--yellow); }
.due.is-soon { color: var(--brand-600); }

.bucket { margin-bottom: 18px; }
.bucket-head { display: flex; align-items: center; gap: 10px; padding: 0 4px 8px; }
.bucket-head h2 { font-size: 15px; }
.bucket-head .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }

/* ================================================================ boards */

.board-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.board-title { flex: 1; min-width: 0; }
.board-head h1 { font-size: 24px; display: flex; align-items: center; gap: 10px; }
.board-head .privacy { color: var(--muted); }
.board-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 14px; border-bottom: 1px solid var(--line-2); margin-bottom: 18px; }
.board-toolbar .search-sm { position: relative; }
.board-toolbar .search-sm input { padding: 7px 10px 7px 32px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); width: 210px; font: inherit; font-size: 13px; color: var(--text); }
.board-toolbar .search-sm .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); width: 15px; height: 15px; }
.board-toolbar .active-filter { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.filter-pop { width: 340px; max-height: 70vh; overflow-y: auto; padding: 12px; }
.filter-pop fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.filter-pop legend { font-weight: 700; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.filter-pop .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-pop .opt { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-size: 12.5px; font-weight: 600; }
.filter-pop .opt:has(input:checked) { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); }
.filter-pop .opt input { accent-color: var(--brand); margin: 0; }

/* Table view */
.groups { display: flex; flex-direction: column; gap: 26px; }
.group { --g: var(--brand); }
.group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; position: sticky; left: 0; }
.group-head .caret { color: var(--g); transition: transform .15s; }
.group.collapsed .group-head .caret { transform: rotate(-90deg); }
.group-name { font-weight: 750; font-size: 16px; color: var(--g); border: 1px solid transparent; background: none; padding: 3px 6px; border-radius: var(--r-sm); font-family: inherit; min-width: 40px; max-width: 420px; }
.group-name:hover:not([readonly]) { border-color: var(--line); }
.group-name:focus { border-color: var(--brand); outline: none; box-shadow: var(--focus); color: var(--text); }
.group-count { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.group-drag { cursor: grab; color: var(--faint); }

.grid-scroll { overflow-x: auto; border-radius: var(--r-md); }
.grid { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-size: 13.5px; }
.grid th, .grid td { border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); height: 40px; padding: 0; background: var(--surface); }
.grid thead th { height: 36px; background: var(--surface); font-weight: 650; font-size: 12.5px; color: var(--muted); text-align: center; position: relative; user-select: none; border-top: 1px solid var(--line-2); }
.grid thead th .th { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; height: 100%; cursor: pointer; }
.grid thead th .th:hover { color: var(--text); background: var(--surface-2); }
.grid thead th .th .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid thead th.col-title .th { justify-content: flex-start; padding-left: 14px; cursor: default; }
.grid .resize { position: absolute; right: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; }
.grid .resize:hover, .grid .resize.on { background: var(--brand); opacity: .5; }
.grid tr > :first-child { position: sticky; left: 0; z-index: 3; border-left: 6px solid var(--g); }
.grid thead tr > :first-child { border-top-left-radius: var(--r-md); z-index: 4; }
.grid thead tr > :last-child { border-top-right-radius: var(--r-md); }
.grid tbody tr:hover td { background: var(--surface-2); }
.grid tbody tr.selected td, .grid tbody tr.is-open td { background: var(--brand-50); }
.grid td.cell-title { padding: 0 6px 0 4px; }
.title-wrap { display: flex; align-items: center; gap: 4px; height: 40px; min-width: 0; }
.drag-handle { cursor: grab; color: var(--faint); opacity: 0; width: 18px; display: grid; place-items: center; flex: none; }
tr:hover .drag-handle { opacity: 1; }
.title-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; padding: 4px 6px; border-radius: 5px; color: var(--text); font-weight: 550; }
.title-text:hover { background: var(--surface-3); }
.title-input { flex: 1; min-width: 0; font: inherit; font-weight: 550; padding: 4px 6px; border: 1px solid var(--brand); border-radius: 5px; box-shadow: var(--focus); background: var(--surface); color: var(--text); }
.open-task { opacity: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; flex: none; font-family: inherit; }
tr:hover .open-task, .open-task:focus { opacity: 1; }
.open-task:hover { color: var(--brand-600); border-color: var(--brand-100); }
.meta-chips { display: inline-flex; gap: 4px; flex: none; }
.meta-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 2px 6px; border-radius: 6px; background: var(--surface-3); }
.meta-chip.blocked { background: var(--red-50); color: var(--red); }
.meta-chip.subs-done { background: var(--green-50); color: #127A51; }

.cell { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 8px; cursor: pointer; position: relative; min-width: 0; overflow: hidden; }
.cell.ro { cursor: default; }
.cell:not(.ro):hover { box-shadow: inset 0 0 0 1px var(--brand-100); }
.cell.is-editing { box-shadow: inset 0 0 0 2px var(--brand); }
.cell .empty-val { color: var(--faint); opacity: 0; }
.cell:hover .empty-val { opacity: 1; }
.cell-status { padding: 4px; }
.cell-status .block { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 6px; background: var(--c, var(--surface-3)); color: var(--fg, var(--muted)); font-weight: 700; font-size: 12.5px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter .12s; }
.cell-status:hover .block { filter: brightness(1.06) saturate(1.05); }
.cell-priority { justify-content: flex-start; gap: 7px; font-weight: 600; font-size: 13px; }
.cell-priority .flag { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.cell-date { font-size: 13px; font-weight: 600; color: var(--text-2); }
.cell-number { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.cell-text { justify-content: flex-start; }
.cell-text .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-progress { gap: 8px; }
.cell-progress .pv { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.cell-drop .opt { padding: 3px 10px; border-radius: 999px; font-weight: 650; font-size: 12px; color: #fff; background: var(--c); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-tags { justify-content: flex-start; gap: 4px; }
.cell-check input { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; }
.timeline-bar { position: relative; width: 100%; height: 22px; border-radius: 11px; background: var(--surface-3); overflow: hidden; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.timeline-bar.has { background: linear-gradient(90deg, var(--g) var(--p, 0%), color-mix(in srgb, var(--g) 35%, var(--surface-3)) var(--p, 0%)); color: #fff; }

.add-row td { height: 38px; }
.add-row input { width: 100%; height: 38px; border: 0; background: transparent; font: inherit; color: var(--text); padding: 0 10px 0 26px; }
.add-row input:focus { outline: none; background: var(--surface-2); }
.add-row td:first-child { border-bottom-left-radius: var(--r-md); }
.group-foot td { height: 34px; background: transparent !important; border-right: 0; }
.add-col { width: 44px; }
.add-col .th { color: var(--faint); }
.more-rows td { text-align: left; padding: 0 12px; height: 36px; }

.board-empty { border: 2px dashed var(--line); border-radius: var(--r-lg); }

/* Kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 14px; align-items: start; }
.k-col { background: var(--surface-3); border-radius: var(--r-lg); display: flex; flex-direction: column; max-height: calc(100vh - 240px); min-height: 200px; }
:root[data-theme="dark"] .k-col { background: var(--surface-2); }
.k-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.k-head .status { flex: none; }
.k-head .count { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.k-list { flex: 1; overflow-y: auto; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.k-card { background: var(--surface); border-radius: var(--r-md); padding: 12px; box-shadow: var(--sh-1); border: 1px solid var(--line-2); cursor: pointer; border-top: 3px solid var(--g, var(--line)); }
.k-card:hover { border-color: var(--brand-100); box-shadow: var(--sh-2); }
.k-card .k-title { font-weight: 650; line-height: 1.35; margin-bottom: 8px; color: var(--text); }
.k-card .k-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.k-card .k-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.k-add { margin: 0 10px 10px; }
.sortable-ghost { opacity: .35; }
.sortable-drag { box-shadow: var(--sh-pop) !important; transform: rotate(1.5deg); }

/* Inline editors */
.picker { width: 260px; padding: 8px; }
.picker .opt-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.picker .opt-block { display: block; width: 100%; padding: 8px 10px; border-radius: 6px; border: 0; font: inherit; font-weight: 700; font-size: 13px; color: #fff; text-align: center; cursor: pointer; background: var(--c); }
.picker .opt-block:hover { filter: brightness(1.08); }
.picker .opt-block.current { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.picker .opt-block.clear { background: var(--surface-3); color: var(--muted); }
.picker input.input { margin-bottom: 6px; }
.picker .person-opt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.picker .person-opt:hover { background: var(--hover); }
.picker .person-opt input { accent-color: var(--brand); }
.picker .actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line-2); margin-top: 6px; }

/* ============================================================ task panel */

.panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(var(--panel-w), 100vw);
  background: var(--surface);
  box-shadow: var(--sh-pop);
  z-index: 50;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s var(--ease);
  border-left: 1px solid var(--line);
}
.panel.open { transform: none; }
.panel-loading { display: grid; place-items: center; flex: 1; color: var(--muted); }
.panel-head { padding: 14px 20px 0; border-bottom: 1px solid var(--line-2); }
.panel-head .top { display: flex; align-items: center; gap: 4px; }
.panel-head .ref { font-weight: 700; font-size: 12.5px; color: var(--muted); background: var(--surface-3); padding: 2px 8px; border-radius: 6px; }
.panel-title { width: 100%; font: inherit; font-size: 21px; font-weight: 750; letter-spacing: -0.015em; border: 1px solid transparent; border-radius: var(--r-sm); padding: 6px 8px; margin: 8px -8px 4px; background: transparent; color: var(--text); resize: none; overflow: hidden; line-height: 1.3; }
.panel-title:hover:not([readonly]) { border-color: var(--line); }
.panel-title:focus { border-color: var(--brand); outline: none; box-shadow: var(--focus); }
.panel .tabs { margin: 0 -4px; border-bottom: 0; }
.panel-body { flex: 1; overflow-y: auto; padding: 20px; }
.tab-pane[hidden] { display: none; }
.fields { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 2px 12px; align-items: center; margin-bottom: 22px; }
.fields > .k { color: var(--muted); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; min-height: 38px; }
.fields > .k .icon { width: 15px; height: 15px; }
.fields > .v { min-height: 38px; display: flex; align-items: center; min-width: 0; }
.fields .cell { justify-content: flex-start; border-radius: 6px; width: 100%; padding: 0 8px; height: 36px; }
.fields .cell:hover { background: var(--surface-2); box-shadow: none; }
.fields .cell-status { width: 180px; padding: 3px 0; }
.section-title { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; }
.section-title h3 { flex: 1; }
.desc { width: 100%; min-height: 120px; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 6px; }
.checklist li:hover { background: var(--surface-2); }
.checklist li.done .t { text-decoration: line-through; color: var(--muted); }
.checklist li .t { flex: 1; }
.checklist li form { display: inline; }
.checklist input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--green); }
.inline-add { display: flex; gap: 8px; margin-top: 8px; }
.inline-add .input { flex: 1; }
.sub-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.sub-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line-2); }
.sub-list li:first-child { border-top: 0; }
.sub-list .t { flex: 1; min-width: 0; font-weight: 600; }
.sub-list .cell-status { width: 128px; height: 30px; padding: 0; }
.dep { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); margin-bottom: 6px; }
.dep .t { flex: 1; min-width: 0; }

.comment { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.comment:first-of-type { border-top: 0; }
.comment .body { flex: 1; min-width: 0; }
.comment .who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.comment .who b { font-weight: 700; }
.comment .who time { color: var(--muted); font-size: 12px; }
.comment .text { margin-top: 4px; line-height: 1.6; word-wrap: break-word; overflow-wrap: anywhere; }
.comment .tools { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.comment .replies { margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--line-2); }
.comment .replies .comment { padding: 10px 0; }
.comment.deleted .text { color: var(--faint); font-style: italic; }
.reaction { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; cursor: pointer; font-family: inherit; color: var(--text-2); }
.reaction.mine { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); }
.mention { color: var(--brand-700); background: var(--brand-50); padding: 0 4px; border-radius: 4px; font-weight: 650; }
.composer { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 10px; position: relative; }
.composer:focus-within { border-color: var(--brand); box-shadow: var(--focus); }
.composer textarea { width: 100%; border: 0; resize: vertical; min-height: 70px; font: inherit; background: transparent; color: var(--text); outline: none; }
.composer .bar { display: flex; align-items: center; gap: 8px; }
.composer .file-name { font-size: 12.5px; color: var(--muted); }
.mention-menu { position: absolute; z-index: 70; }

.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.file { border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.file .thumb { height: 96px; background: var(--surface-3); display: grid; place-items: center; color: var(--muted); overflow: hidden; }
.file .thumb img { width: 100%; height: 100%; object-fit: cover; }
.file .thumb .ext { font-weight: 800; font-size: 13px; letter-spacing: .02em; color: var(--brand-600); background: var(--brand-50); padding: 6px 10px; border-radius: 8px; }
.file .info { padding: 8px 10px; font-size: 12.5px; }
.file .info a { color: var(--text); font-weight: 650; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file .info .m { color: var(--muted); }
.dropzone { border: 2px dashed var(--line); border-radius: var(--r-md); padding: 18px; text-align: center; color: var(--muted); margin-bottom: 14px; transition: all .15s; }
.dropzone.over { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); }

.activity { list-style: none; margin: 0; padding: 0; position: relative; }
.activity li { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; font-size: 13px; }
.activity li .what { flex: 1; min-width: 0; line-height: 1.5; }
.activity li time { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Project & workspace pages */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.proj-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 12px; position: relative; color: inherit; text-decoration: none; overflow: hidden; }
.proj-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--c); }
.proj-card:hover { border-color: var(--line); box-shadow: var(--sh-2); text-decoration: none; }
.proj-card h3 { font-size: 16px; }
.proj-card .desc-sm { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; min-height: 2.9em; }
.proj-card .foot { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.health { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; }
.health::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.health.on_track { --c: var(--green); color: #127A51; }
.health.at_risk { --c: var(--yellow); color: #94600A; }
.health.off_track { --c: var(--red); color: #B4232A; }
:root[data-theme="dark"] .health.on_track { color: #5FD7A1; }
:root[data-theme="dark"] .health.at_risk { color: #F5C462; }
:root[data-theme="dark"] .health.off_track { color: #FF8C8F; }
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line-2); }
.board-list li:first-child { border-top: 0; }
.board-list .bi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); flex: none; }
.board-list .t { flex: 1; min-width: 0; }
.board-list .t a { font-weight: 650; color: var(--text); }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; font-size: 13.5px; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; font-weight: 600; }

/* Admin */
.admin { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.admin-nav { position: sticky; top: calc(var(--top-h) + 20px); }
.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm); color: var(--text-2); font-weight: 600; text-decoration: none; }
.admin-nav a:hover { background: var(--hover); }
.admin-nav a[aria-current="page"] { background: var(--surface); color: var(--brand-600); box-shadow: var(--sh-1); }
@media (max-width: 960px) { .admin { grid-template-columns: 1fr; } .admin-nav { position: static; display: flex; overflow-x: auto; gap: 4px; } .admin-nav a { white-space: nowrap; } }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); align-items: flex-start; }
.check-list li:first-child { border-top: 0; }
.check-list .ok { color: var(--green); }
.check-list .bad { color: var(--red); }
.check-list .warn { color: #C48104; }
.log { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--ink); color: #D6D8F0; border-radius: var(--r-md); padding: 14px; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.matrix th, .matrix td { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix .yes { color: var(--green); }
.matrix .no { color: var(--line); }

/* Notifications */
.notif { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-2); align-items: flex-start; text-decoration: none; color: inherit; }
.notif:first-child { border-top: 0; }
.notif:hover { background: var(--surface-2); text-decoration: none; }
.notif.unread { background: color-mix(in srgb, var(--brand-50) 60%, var(--surface)); }
.notif.unread .t::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-right: 7px; vertical-align: middle; }
.notif .t { font-weight: 600; line-height: 1.4; }
.notif .b { color: var(--muted); font-size: 13px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif time { color: var(--muted); font-size: 12px; }
.notif-pop { width: 380px; padding: 0; max-height: 70vh; overflow-y: auto; right: 0; left: auto; }
.notif-pop .head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }

.search-group h2 { font-size: 13px; color: var(--muted); margin: 18px 0 8px; }
.result { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line-2); text-decoration: none; color: inherit; }
.result:first-child { border-top: 0; }
.result:hover { background: var(--surface-2); text-decoration: none; }
.result .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); flex: none; }
.result .t { font-weight: 650; }
.result .s { color: var(--muted); font-size: 12.5px; }
mark { background: color-mix(in srgb, var(--yellow) 40%, transparent); color: inherit; padding: 0 2px; border-radius: 3px; }

/* Error page */
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.error-page .code { font-size: 96px; font-weight: 800; letter-spacing: -0.04em; color: var(--brand); line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .sidebar, .topbar, .board-toolbar, .panel, .toasts { display: none !important; }
  .app { display: block; }
  .content { padding: 0; }
}
.fields .cell .empty-val { opacity: .55; }

/* Small screens and touch devices */
@media (max-width: 960px) {
  .board-title, .page-head .titles { flex: 1 1 100%; }
  .board-head h1 { font-size: 21px; }
  .grid tr > :first-child { position: static; }
  .board-toolbar .search-sm input { width: 160px; }
  .kanban { grid-auto-columns: minmax(78vw, 1fr); }
  .panel { --panel-w: 100vw; }
  .fields { grid-template-columns: 110px minmax(0, 1fr); }
}
@media (hover: none) {
  .open-task { opacity: 1; }
  .drag-handle { opacity: .6; }
}

/* Timer pill in the top bar */
.timer-pill { display: inline-flex; align-items: center; gap: 8px; padding: 2px 4px 2px 12px; border-radius: 999px; background: var(--green-50); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); margin-right: 4px; }
.timer-pill a { display: inline-flex; gap: 6px; align-items: center; color: var(--text); text-decoration: none; font-size: 13px; }
.timer-pill .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ------------------------------------------------------------ calendar */
.cal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-head h2 { font-size: 18px; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--line); gap: 1px; }
.cal-dow { background: var(--surface-2); padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-day { background: var(--surface); min-height: 118px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-day.weekend { background: var(--surface-2); }
.cal-day.other { background: var(--surface-2); }
.cal-day.other .cal-date a { color: var(--faint); }
.cal-date { display: flex; align-items: center; justify-content: space-between; }
.cal-date a { font-size: 12.5px; font-weight: 700; color: var(--text); width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; }
.cal-day.today .cal-date a { background: var(--brand); color: #fff; }
.cal-add { opacity: 0; }
.cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
.cal-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cal-chip { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-left: 3px solid var(--c); min-width: 0; text-decoration: none; }
.cal-chip:hover { background: color-mix(in srgb, var(--c) 24%, var(--surface)); }
.cal-chip .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip .t { color: var(--muted); font-size: 11px; }
.cal-chip svg { flex: none; color: var(--c); }
.cal-chip.cal-task { border-left-width: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.cal-chip.cal-milestone { background: transparent; border-left: 0; font-weight: 700; }
.cal-chip.cal-timeoff { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, var(--surface)) 0 6px, var(--surface) 6px 12px); }
.cal-chip.is-done .n { text-decoration: line-through; color: var(--muted); }
.cal-chip[draggable="true"] { cursor: grab; }
.cal-chip.dragging { opacity: .5; }
.cal-drop-over { box-shadow: inset 0 0 0 2px var(--brand); }
.cal-more { font-size: 12px; font-weight: 650; color: var(--muted); padding: 0 6px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; align-items: center; }
.cal-legend > span { display: inline-flex; gap: 6px; align-items: center; }
.cal-key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); display: inline-block; }
.cal-key.round { border-radius: 50%; }
.cal-time { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.cal-time-head, .cal-allday, .cal-grid { display: grid; grid-template-columns: 60px repeat(var(--cols), minmax(0, 1fr)); }
.cal-time-head > div { padding: 8px; font-size: 12.5px; color: var(--muted); border-left: 1px solid var(--line-2); background: var(--surface-2); }
.cal-time-head > div b { color: var(--text); font-size: 15px; }
.cal-time-head > .today b { color: var(--brand-600); }
.cal-allday { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-allday > div { padding: 4px; border-left: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 3px; min-height: 34px; min-width: 0; }
.cal-allday > div:first-child { border-left: 0; justify-content: center; }
.cal-scroll { max-height: 620px; overflow-y: auto; }
.cal-grid { position: relative; }
.cal-hours > div { height: var(--hour); font-size: 11px; color: var(--faint); text-align: right; padding: 0 8px; transform: translateY(-7px); }
.cal-hours > div:first-child { transform: none; }
.cal-col { position: relative; border-left: 1px solid var(--line-2); background-image: linear-gradient(var(--line-2) 1px, transparent 1px); background-size: 100% var(--hour); height: calc(var(--hour) * 24); cursor: cell; }
.cal-col.today { background-color: color-mix(in srgb, var(--brand) 4%, transparent); }
.cal-block { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 3px 6px; font-size: 12px; overflow: hidden; color: var(--text); background: color-mix(in srgb, var(--c) 18%, var(--surface)); border-left: 3px solid var(--c); display: flex; flex-direction: column; text-decoration: none; cursor: pointer; }
.cal-block span { color: var(--muted); font-size: 11px; }
@media (max-width: 760px) {
  .cal-day { min-height: 74px; padding: 3px; }
  .cal-chip { font-size: 10.5px; padding: 2px 4px; }
  .cal-chip svg, .cal-chip .t { display: none; }
  .cal-dow { padding: 6px 4px; font-size: 11px; }
}

/* ------------------------------------------------------------ workload */
.wl-wrap { overflow-x: auto; }
.wl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.wl th, .wl td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; }
.wl thead th { font-size: 12px; color: var(--muted); font-weight: 700; background: var(--surface-2); white-space: nowrap; }
.wl thead th.now { color: var(--brand-600); }
.wl .wl-person { min-width: 210px; position: sticky; left: 0; background: var(--surface); z-index: 1; font-weight: 500; }
.wl thead .wl-person { background: var(--surface-2); }
.wl-cell { min-width: 130px; }
.wl-detail { position: relative; }
.wl-detail > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; border-radius: var(--r-sm); padding: 4px 6px; margin: -4px -6px; }
.wl-detail > summary::-webkit-details-marker { display: none; }
.wl-detail > summary:hover { background: var(--surface-2); }
.wl-num { color: var(--muted); font-size: 12px; }
.wl-num b { color: var(--text); font-size: 13.5px; }
.wl-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; display: block; }
.wl-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--wl, var(--green)); }
.wl-off { font-size: 11px; color: #0E8487; display: inline-flex; gap: 4px; align-items: center; }
.wl-free { --wl: var(--line); }
.wl-ok { --wl: var(--green); }
.wl-full { --wl: var(--yellow); }
.wl-over { --wl: var(--red); background: color-mix(in srgb, var(--red) 7%, transparent); }
.wl-over .wl-num b { color: var(--red); }
.wl-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--wl); }
.wl-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: -6px; width: 300px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-pop); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.wl-pop.right { left: auto; right: -6px; }
.wl-task { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
.wl-task:hover { background: var(--surface-2); }
.wl-task .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-task b { grid-row: span 2; align-self: center; }

/* ------------------------------------------------------ timeline/gantt */
.tl-card { overflow: hidden; }
.tl { margin-top: 14px; border-top: 1px solid var(--line); }
.tl-scroll { overflow: auto; max-height: calc(100vh - 290px); min-height: 260px; position: relative; }
.tl-head, .tl-row { display: grid; grid-template-columns: var(--label) var(--track); width: calc(var(--label) + var(--track)); }
.tl-head { position: sticky; top: 0; z-index: 4; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.tl-label { position: sticky; left: 0; z-index: 3; background: var(--surface); border-right: 1px solid var(--line); padding: 0 12px; display: flex; align-items: center; gap: 8px; min-width: 0; height: 38px; }
.tl-head .tl-label { background: var(--surface-2); height: 52px; font-size: 12px; font-weight: 700; color: var(--muted); z-index: 5; }
.tl-track { position: relative; height: 38px; overflow: hidden;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--dw) * 5), color-mix(in srgb, var(--surface-3) 60%, transparent) calc(var(--dw) * 5) calc(var(--dw) * 7)); }
.tl-head .tl-track { height: 52px; background: none; }
.tl-months span, .tl-ticks span { position: absolute; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; padding: 0 6px; border-left: 1px solid var(--line-2); }
.tl-months span { top: 0; height: 26px; line-height: 26px; font-weight: 700; color: var(--text); }
.tl-ticks span { top: 26px; height: 26px; line-height: 26px; }
.tl-ticks span.we { color: var(--faint); }
.tl-row { border-bottom: 1px solid var(--line-2); }
.tl-row:hover .tl-label { background: var(--surface-2); }
.tl-lane .tl-label { background: var(--surface-2); font-size: 13px; }
.tl-lane .tl-track { background: var(--surface-2); }
.gt-title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; min-width: 0; flex: 1; }
.gt-cols { display: grid; grid-template-columns: minmax(0, 1fr) 64px 52px 52px 40px; gap: 8px; align-items: center; width: 100%; }
.gt-cols .is-late { color: var(--red); font-weight: 700; }
.tl-bar { position: absolute; top: 7px; height: 24px; border-radius: 6px; background: color-mix(in srgb, var(--c) 30%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
  display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 12px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.tl-bar:focus-visible { outline: none; box-shadow: var(--focus); }
.tl-bar.dragging { cursor: grabbing; box-shadow: var(--sh-pop); z-index: 2; }
.tl-bar.late { border-color: var(--red); }
.tl-bar.done { opacity: .65; }
.tl-prog { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--c) 45%, transparent); pointer-events: none; }
.tl-t, .tl-d { position: relative; overflow: hidden; text-overflow: ellipsis; }
.tl-d { color: var(--muted); font-weight: 500; font-size: 11px; }
.tl-h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 1; }
.tl-h.start { left: 0; } .tl-h.end { right: 0; }
.tl-body { position: relative; }
.tl-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--red); z-index: 2; pointer-events: none; }
.tl-today span { position: sticky; top: 0; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 0 4px 4px 0; }
.tl-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; color: var(--muted); overflow: visible; }
.tl-arrows path { stroke: currentColor; stroke-width: 1.5; }
.tl-arrows path.late { stroke: var(--red); color: var(--red); }
.tl-ms-row .tl-track { overflow: visible; }
.tl-ms { position: absolute; top: 9px; display: flex; align-items: center; gap: 6px; transform: translateX(-9px); color: var(--text); font-size: 12px; font-weight: 650; white-space: nowrap; }
.tl-ms .dia { width: 14px; height: 14px; background: #E8603C; transform: rotate(45deg); border-radius: 2px; }
.tl-ms.done .dia { background: var(--green); }
.tl-undated { padding: 10px 16px; border-top: 1px solid var(--line); }
.tl-undated summary { cursor: pointer; font-weight: 650; font-size: 13px; }
@media (max-width: 760px) { .tl { --label: 150px !important; } .gt-cols { grid-template-columns: minmax(0, 1fr); } .gt-cols > :not(.gt-title) { display: none; } }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.chart-box { height: 280px; padding: 0 16px 16px; }
@media (max-width: 760px) { .chart-grid { grid-template-columns: minmax(0, 1fr); } }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.file-card { overflow: hidden; display: flex; flex-direction: column; }
.file-thumb { height: 130px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); position: relative; border-bottom: 1px solid var(--line-2); }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-thumb .icon { width: 34px; height: 34px; }
.file-thumb .ext { position: absolute; bottom: 8px; right: 10px; font-size: 11px; font-weight: 800; color: var(--muted); }
.file-meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file-meta .n { font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta a.small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-view { display: flex; flex-direction: column; gap: 14px; }
.lv-list { list-style: none; margin: 0; padding: 0 0 6px; }
.lv-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.lv-item:hover { background: var(--surface-2); }
.lv-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); display: inline-grid; place-items: center; color: transparent; cursor: pointer; padding: 0; flex: none; }
.lv-check:hover { border-color: var(--green); color: var(--green); }
.lv-item.is-done .lv-check { background: var(--green); border-color: var(--green); color: #fff; }
.lv-item.is-done .lv-title { text-decoration: line-through; color: var(--muted); }
.lv-title { font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------- public pages */
.public-body { background: var(--bg, var(--surface-2)); }
.public-wrap { max-width: 680px; margin: 0 auto; padding: 48px 16px; }
.public-card { background: var(--surface); border-radius: 16px; box-shadow: var(--sh-1), 0 0 0 1px var(--line); padding: 32px; }
.public-card h1 { font-size: 26px; margin: 0 0 8px; }
.public-foot { text-align: center; margin-top: 18px; }
.public-card .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .public-card { padding: 20px; } .public-wrap { padding: 20px 12px; } }
.bf-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bf-field { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); flex-wrap: wrap; }
.bf-field .grip { cursor: grab; color: var(--faint); }
.bf-main { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 220px; }
@media (max-width: 760px) { .bf-main { grid-template-columns: 1fr; } }
.req { color: var(--red); }
.btn-lg { padding: 12px 20px; font-size: 15px; }
.tl-out { position: absolute; top: 11px; font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; pointer-events: none; }

/* ------------------------------------------------------------ requests */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.type-card { padding: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; border: 1px solid transparent; }
.type-card:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.type-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); margin-bottom: 6px; }
.decision-card { border: 1px solid color-mix(in srgb, var(--yellow) 50%, transparent); }
.steps { list-style: none; margin: 0; padding: 4px 16px 14px; }
.step { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; width: 2px; background: var(--line); }
.step-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface-3); color: var(--muted); flex: none; }
.step.done .step-dot { background: var(--green); color: #fff; }
.step.now .step-dot { background: var(--yellow); color: #fff; }
.step.stop .step-dot { background: var(--red); color: #fff; }
.step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.step-people { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.step-people li { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.step-people li > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-quote, blockquote.quote { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--line); background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 13px; color: var(--text-2); }
.feed { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.feed-item { font-size: 13.5px; }
.rt-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rt-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.rt-row .grip { cursor: grab; color: var(--faint); padding-top: 6px; }
.rt-grid { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; min-width: 0; }
.rt-step .rt-grid { grid-template-columns: 1fr 1fr; }
.rt-row .check { padding-top: 6px; }
@media (max-width: 760px) { .rt-grid, .rt-step .rt-grid { grid-template-columns: 1fr; } .rt-row { flex-wrap: wrap; } }
.icon-swatch { width: 32px; height: 32px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }

/* ------------------------------------------------------- project report */
.status-report { padding: 14px 16px; border-top: 1px solid var(--line-2); }
.status-report.latest { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.status-report h4 { margin: 10px 0 2px; font-size: 12.5px; color: var(--muted); }
.sr-body { margin-top: 8px; line-height: 1.6; }
.ms-list { list-style: none; margin: 0; padding: 0 0 6px; }
.ms { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; border-top: 1px solid var(--line-2); }
.ms .t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ms .dia { width: 12px; height: 12px; background: #E8603C; transform: rotate(45deg); border-radius: 2px; margin: 5px 4px 0; flex: none; }
.ms.done .t b { text-decoration: line-through; color: var(--muted); }
.ms.done .lv-check { background: var(--green); border-color: var(--green); color: #fff; }
.budget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.budget-grid > div { display: flex; flex-direction: column; gap: 2px; }
.budget-grid .big { font-size: 22px; }
.seg-radio { position: relative; }
.seg-radio input { position: absolute; opacity: 0; }
.seg-radio span { padding: 6px 12px; border-radius: var(--r-sm); font-weight: 650; font-size: 13px; color: var(--muted); display: inline-block; cursor: pointer; }
.seg-radio input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.seg-radio input:focus-visible + span { box-shadow: var(--focus); }
.ann.pinned { box-shadow: var(--sh-1), inset 3px 0 0 var(--brand); }
.ann-item { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line-2); color: var(--text); text-decoration: none; }
.ann-item:hover { background: var(--surface-2); }
.ann-item > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ann-item > .icon { color: var(--brand); margin-top: 3px; flex: none; }
h1 .pill, h2 .pill { letter-spacing: 0; font-size: 12px; vertical-align: middle; }
.dash > * { min-width: 0; }
.ann-item .small { overflow-wrap: anywhere; }

/* ---------------------------------------------------------- automations */
.switch { width: 38px; height: 22px; border-radius: 999px; border: 0; background: var(--line); position: relative; cursor: pointer; padding: 0; transition: background .15s; }
.switch span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"] span { transform: translateX(16px); }
.switch:focus-visible { outline: none; box-shadow: var(--focus); }
.auto-step { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-2); }
.auto-tag { font-weight: 800; font-size: 13px; padding: 6px 10px; border-radius: var(--r-sm); text-align: center; align-self: start; color: #fff; }
.auto-tag.when { background: #4045D6; }
.auto-tag.if { background: #F2A71B; color: #3A2600; }
.auto-tag.then { background: #1FA971; }
.auto-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.auto-body > .input, .auto-body > select { max-width: 420px; }
@media (max-width: 760px) { .auto-step { grid-template-columns: 1fr; gap: 8px; } .auto-tag { justify-self: start; } }
.side-heading { margin: 14px 10px 4px; font-size: 11.5px; letter-spacing: .02em; }

/* ---------------------------------------------------------------- goals */
.ring { --p: 0; --c: var(--brand); width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0); }
.ring > span { width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ring.sm { width: 38px; height: 38px; }
.ring.sm > span { font-size: 11px; }
.ring.lg { width: 108px; height: 108px; }
.ring.lg > span { width: calc(100% - 18px); height: calc(100% - 18px); font-size: 24px; }
.goal-tree { list-style: none; margin: 0; padding: 0; }
.goal-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px calc(16px + var(--depth, 0) * 28px); border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.goal-row:first-child { border-top: 0; }
.goal-row .t { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.goal-row .t a { color: var(--text); }
.goal-hero { display: flex; gap: 20px; align-items: center; }
.kr-list { list-style: none; margin: 0; padding: 0 0 6px; }
.kr { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line-2); }
.kr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kr-new { display: grid; grid-template-columns: 2fr 1fr .7fr .7fr; gap: 6px; margin-bottom: 6px; }
@media (max-width: 600px) { .kr-new { grid-template-columns: 1fr 1fr; } .goal-hero { flex-direction: column; align-items: flex-start; } }

/* ------------------------------------------------------------------ CRM */
.funnel { display: flex; flex-direction: column; gap: 6px; }
.funnel-row { display: grid; grid-template-columns: 130px 1fr 170px; gap: 12px; align-items: center; color: var(--text); text-decoration: none; font-size: 13px; }
.funnel-row .bar { height: 14px; background: var(--surface-3); border-radius: 7px; overflow: hidden; }
.funnel-row .bar span { display: block; height: 100%; border-radius: 7px; }
.deal-card { display: flex; flex-direction: column; gap: 4px; color: var(--text); text-decoration: none; }
.deal-card .row { gap: 6px; }
.k-ghost { opacity: .4; }
.stage-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: -6px 0 18px; }
.stage-bar button { border: 0; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; background: var(--surface-3); color: var(--muted);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); padding-left: 18px; }
.stage-bar form:first-child button { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); padding-left: 14px; }
.stage-bar button.past { background: color-mix(in srgb, var(--c) 25%, var(--surface)); color: var(--text); }
.stage-bar button.on { background: var(--c); color: #fff; }
.stage-bar button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.crm-act { display: flex; gap: 10px; }
.crm-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); flex: none; }
.crm-act.call .crm-ic { background: var(--green-50); color: var(--green); }
.crm-act.email .crm-ic { background: var(--brand-50); color: var(--brand); }
.crm-act.meeting .crm-ic { background: var(--yellow-50); color: #C48104; }
@media (max-width: 760px) { .funnel-row { grid-template-columns: 90px 1fr; } .funnel-row .num { grid-column: 2; } }

/* ----------------------------------------------------------- documents */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line-2); }
.doc-row:first-child { border-top: 0; }
.doc-row:hover { background: var(--surface-2); }
.doc-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--text); text-decoration: none; }
.doc-row .t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row .sub { font-size: 12px; color: var(--muted); }
.doc-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); flex: none; }
.doc-ic.folder { background: var(--yellow-50); color: #C48104; }
.doc-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 40%; }
.doc-preview { overflow: hidden; display: grid; place-items: center; background: var(--surface-2); }
.doc-preview img { max-width: 100%; max-height: 520px; display: block; }
@media (max-width: 760px) { .doc-tags { display: none; } }

/* ---------------------------------------------------------- dashboards */
.dash-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dash-w { grid-column: span 3; min-width: 0; }
.dash-w.size-third { grid-column: span 2; }
.dash-w.size-full { grid-column: 1 / -1; }
.dash-w .card-head { gap: 6px; }
.dash-w .grip { cursor: grab; color: var(--muted); display: inline-flex; margin-left: -6px; }
.dash-w.sortable-ghost { opacity: .4; }
.dash-note { margin: -4px 16px 8px; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 0 16px 16px; }
.dash-tiles .tile { box-shadow: none; }
.dash-bars { list-style: none; margin: 0; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.dash-bars li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(80px, 1fr) 44px; gap: 4px 12px; align-items: center; }
.dash-bars li > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 550; }
.dash-bars .num { text-align: right; font-weight: 650; font-size: 13px; }
.dash-bar-note { grid-column: 1 / -1; margin-top: -6px; }
.dash-save { display: flex; align-items: center; gap: 10px; margin: -6px 0 14px; }
.dash-save p { margin: 0; }
.widget-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.widget-opt { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px; font-weight: 550; }
.widget-opt input { accent-color: var(--brand); margin: 0; }
.widget-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.widget-opt .icon { color: var(--muted); }
.print-only { display: none; }
@media (max-width: 1100px) { .dash-w.size-third { grid-column: span 3; } }
@media (max-width: 760px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } .dash-w, .dash-w.size-third { grid-column: 1 / -1; } .dash-save { flex-wrap: wrap; } }
@media print {
  .print-only { display: block; }
  .no-print, .dash-save, .page-head .actions, .dash-w .grip { display: none !important; }
  .dash-grid { display: block; }
  .dash-w { break-inside: avoid; margin-bottom: 14px; box-shadow: none; }
}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; flex: none; }
.rp-here { color: var(--brand-600) !important; font-size: 12px !important; }
[data-variant][hidden] { display: none !important; }
.dash-w.size-wide { grid-column: span 4; }
@media (max-width: 1100px) { .dash-w.size-wide { grid-column: span 3; } }
@media (max-width: 760px) { .dash-w.size-wide { grid-column: 1 / -1; } }
.dash-w .card-head h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
pre.code { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; white-space: pre; margin: 8px 0; }
.conn-list { list-style: none; margin: 0; padding: 0; }
.conn-list li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-2); }
.conn-list li:first-child { border-top: 0; }
.conn-list .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conn-list .sub { font-size: 12.5px; color: var(--muted); }
.conn-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); flex: none; }
.event-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 12px; }
@media (max-width: 760px) { .conn-list li { flex-wrap: wrap; } .conn-list .t { flex-basis: calc(100% - 44px); } }
fieldset.field { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
fieldset.field > legend { font-weight: 650; font-size: 13px; color: var(--text-2); padding: 0; margin-bottom: 8px; }
.code-input { font-size: 22px; letter-spacing: .18em; text-align: center; font-variant-numeric: tabular-nums; }
.qr-box { display: inline-block; padding: 6px; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); margin: 6px 0 10px; }
.qr-box svg { display: block; max-width: 100%; height: auto; }
.secret-key { font-size: 15px; letter-spacing: .06em; word-break: break-all; margin: 4px 0 8px; }
.steps { padding-left: 18px; line-height: 1.7; list-style: decimal; }
.recovery-codes { columns: 2; padding-left: 22px; font-size: 15px; line-height: 1.9; margin: 10px 0 14px; }
@media print { .recovery-codes { columns: 2; } }

/* Touch screens: bigger hit areas for small controls without changing the layout. */
@media (pointer: coarse) {
  .crumbs a { display: inline-block; padding: 6px 0; margin: -6px 0; }
  .done-btn, .lv-check, .switch, .icon-btn.sm { position: relative; }
  .cal-date a { display: inline-grid; place-items: center; min-width: 26px; min-height: 26px; }
  .done-btn::after, .lv-check::after, .switch::after, .icon-btn.sm::after { content: ""; position: absolute; inset: -8px; }
  .gt-title, .lv-title, .tl-ms, .cal-chip, .task-item .t { min-height: 24px; align-items: center; }
  .check input, .table input[type=checkbox] { width: 20px; height: 20px; }
  .search-group .small, .result + .small { display: inline-block; padding: 6px 0; }
}