/* SirpiSoft ProjectAI — a SirpiSoft product, on the shared SirpiSoft design system (as in SirpiSoft CampusAI):
   soft canvas, white cards, navy primary, cyan accent, module-hue icon chips, the progress ring. */
:root {
  --background: #F6F7FB;
  --card: #FFFFFF;
  --surface-2: #F9FAFC;
  --muted: #F1F3F9;
  --popover: #FFFFFF;
  --foreground: #0F172A;
  --muted-foreground: #5A6478;
  --primary: #00336F;
  --primary-hover: #002A5C;
  --primary-foreground: #FFFFFF;
  --primary-tint: #E6EFF9;
  --hover: #EBF2FA;
  --brand: #0097A8;
  --brand-tint: #DFF6F9;
  --border: #E3E6EE;
  --input: #7F889D;
  --ring: #007C8B;
  --success: #047857; --success-tint: #ECFDF5;
  --warning: #B45309; --warning-tint: #FFFBEB;
  --info: #0369A1;    --info-tint: #F0F9FF;
  --destructive: #B91C1C; --destructive-tint: #FEF2F2;
  --chart-1: #1D5AA8;
  --chart-track: #E8EBF2;
  --chart-grid: #ECEEF4;

  --shell-bg: #FFFFFF;
  --shell-bg-2: #F6F7FB;
  --shell-text: #334155;
  --shell-text-soft: #5A6478;
  --shell-text-strong: #0F172A;
  --shell-hover: #F1F3F9;
  --shell-active-bg: #E6EFF9;
  --shell-active-text: #00336F;

  /* module hues: text on tint */
  --m-indigo: #4338CA; --m-indigo-t: #ECEDFD;
  --m-emerald: #047857; --m-emerald-t: #E2F7F0;
  --m-sky: #0369A1; --m-sky-t: #E2F4FC;
  --m-blue: #1D4ED8; --m-blue-t: #E7F0FE;
  --m-slate: #334155; --m-slate-t: #ECEEF1;
  --m-cyan: #0E7490; --m-cyan-t: #E1F6FA;
  --m-fuchsia: #A21CAF; --m-fuchsia-t: #FAE9FD;
  --m-amber: #B45309; --m-amber-t: #FEF3E2;
  --m-violet: #6D28D9; --m-violet-t: #F1EBFE;
  --m-teal: #0F766E; --m-teal-t: #E3F6F4;

  --card-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.05);
  --raised-shadow: 0 6px 16px -4px rgb(16 24 40 / 0.1), 0 2px 4px -2px rgb(16 24 40 / 0.06);
  --overlay-shadow: 0 16px 40px -12px rgb(15 23 42 / 0.22), 0 2px 6px -2px rgb(15 23 42 / 0.08);

  /* aliases used by the app's inline styles */
  --accent: var(--primary);
  --good: var(--success);
  --critical: var(--destructive);
  --p1: var(--destructive);
  --p2: var(--warning);
  --p3: var(--info);
  --p4: var(--input);
  --text-3: var(--muted-foreground);

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Plus Jakarta Sans", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --background: #0B1020;
  --card: #131A2B;
  --surface-2: #171F31;
  --muted: #1C2436;
  --popover: #1A2236;
  --foreground: #EEF1F7;
  --muted-foreground: #9AA5B9;
  --primary: #8AB8EF;
  --primary-hover: #B5D3F7;
  --primary-foreground: #001A3A;
  --primary-tint: #12284A;
  --hover: #232C45;
  --brand: #01B1C5;
  --brand-tint: #0F3340;
  --border: #273049;
  --input: #6A7690;
  --ring: #01B1C5;
  --success: #34D399; --success-tint: #133339;
  --warning: #FBBF24; --warning-tint: #372F26;
  --info: #7DD3FC;    --info-tint: #123049;
  --destructive: #F87171; --destructive-tint: #36212F;
  --chart-1: #5B8CF0;
  --chart-track: #273049;
  --chart-grid: #212A3E;

  --shell-bg: #111829;
  --shell-bg-2: #0B1020;
  --shell-text: #CBD5E1;
  --shell-text-soft: #A3ADC2;
  --shell-text-strong: #F8FAFC;
  --shell-hover: #1C2436;
  --shell-active-bg: #0F3D73;
  --shell-active-text: #FFFFFF;

  --m-indigo: #A5B4FC; --m-indigo-t: #232953;
  --m-emerald: #6EE7B7; --m-emerald-t: #123A3C;
  --m-sky: #7DD3FC; --m-sky-t: #123651;
  --m-blue: #93C5FD; --m-blue-t: #1B2F54;
  --m-slate: #CBD5E1; --m-slate-t: #232C3E;
  --m-cyan: #67E8F9; --m-cyan-t: #10394D;
  --m-fuchsia: #F0ABFC; --m-fuchsia-t: #3B2352;
  --m-amber: #FCD34D; --m-amber-t: #403425;
  --m-violet: #C4B5FD; --m-violet-t: #2B2754;
  --m-teal: #5EEAD4; --m-teal-t: #133A44;

  --card-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
  --raised-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.4);
  --overlay-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.65), 0 2px 6px -2px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-heading); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--primary); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Shell ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; width: 264px; flex: none;
  background: var(--shell-bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 16px 12px 0;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 16px; min-width: 0; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #00336F 0%, #00336F 45%, #01B1C5 100%);
}
.brand-name { font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 22px; color: var(--shell-text-strong); }
.brand-sub { font-size: 12.5px; color: var(--shell-text-soft); line-height: 16px; }
.add-btn {
  height: 36px; margin: 0 0 12px; padding: 0 12px; border-radius: 8px; border: 0;
  background: var(--primary); color: var(--primary-foreground); font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.add-btn:hover { background: var(--primary-hover); }
.add-btn kbd { margin-left: auto; background: rgb(255 255 255 / .16); color: inherit; border: 0; }
.nav { overflow-y: auto; flex: 1; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.nav-section {
  margin: 18px 10px 6px; font-size: 12px; font-weight: 600; color: var(--shell-text-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.nav-section button { border: 0; background: none; color: var(--shell-text-soft); width: 24px; height: 24px; border-radius: 6px; font-size: 16px; line-height: 1; display: grid; place-items: center; }
.nav-section button:hover { background: var(--shell-hover); color: var(--shell-text-strong); }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; margin-bottom: 2px;
  padding: 6px 10px 6px 7px; border-radius: 8px; border: 0; background: none; text-align: left;
  color: var(--shell-text); font-weight: 500;
}
.nav-item:hover { background: var(--shell-hover); color: var(--shell-text-strong); }
.nav-item.active { background: var(--shell-active-bg); color: var(--shell-active-text); font-weight: 600; }
.nav-item .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .count {
  margin-left: auto; font-size: 12px; font-weight: 600; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: grid; place-items: center; background: var(--muted); color: var(--muted-foreground); font-variant-numeric: tabular-nums;
}
.nav-item.active .count { background: var(--card); color: var(--shell-active-text); }
.nav-item .count.alert { background: var(--destructive-tint); color: var(--destructive); }
.nav-empty { padding: 6px 10px; color: var(--shell-text-soft); font-size: 13px; }

/* icon chips (module hues) */
.chip-ic {
  width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center;
  color: var(--h, var(--m-slate)); background: var(--ht, var(--m-slate-t));
}
.chip-ic.lg { width: 44px; height: 44px; border-radius: 12px; }
.chip-ic.lg svg { width: 22px; height: 22px; }
.chip-ic.md { width: 32px; height: 32px; border-radius: 9px; }
.h-indigo { --h: var(--m-indigo); --ht: var(--m-indigo-t); }
.h-emerald { --h: var(--m-emerald); --ht: var(--m-emerald-t); }
.h-sky { --h: var(--m-sky); --ht: var(--m-sky-t); }
.h-blue { --h: var(--m-blue); --ht: var(--m-blue-t); }
.h-slate { --h: var(--m-slate); --ht: var(--m-slate-t); }
.h-cyan { --h: var(--m-cyan); --ht: var(--m-cyan-t); }
.h-fuchsia { --h: var(--m-fuchsia); --ht: var(--m-fuchsia-t); }
.h-amber { --h: var(--m-amber); --ht: var(--m-amber-t); }
.h-proj { --h: var(--c); --ht: color-mix(in srgb, var(--c) 14%, var(--card)); }

.sidebar-footer { border-top: 1px solid var(--border); margin: 8px -12px 0; padding: 10px 12px; display: flex; gap: 4px; }
.icon-btn {
  border: 0; background: none; color: var(--muted-foreground); height: 34px; min-width: 34px; padding: 0 8px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 500;
}
.icon-btn:hover { background: var(--shell-hover); color: var(--foreground); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 40; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 32px;
  background: color-mix(in srgb, var(--shell-bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .spacer { flex: 1; }
.menu-btn { display: none; }
.search {
  display: flex; align-items: center; gap: 8px; height: 38px; width: min(440px, 100%); padding: 0 10px 0 12px;
  background: var(--shell-bg-2); border: 1px solid var(--border); border-radius: 10px; color: var(--shell-text-soft);
}
.search input { border: 0; outline: 0; background: none; width: 100%; color: var(--foreground); }
.search input::placeholder { color: var(--shell-text-soft); }
.search:focus-within { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
.content { flex: 1; padding: 28px 32px 64px; width: 100%; max-width: 1480px; }

kbd {
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; min-width: 20px; text-align: center;
  padding: 1px 5px; border-radius: 5px; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground);
}

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head .ph-text { flex: 1; min-width: 220px; }
.page-head h1 {
  margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.page-head .desc { color: var(--muted-foreground); margin-top: 2px; max-width: 72ch; }
.page-head .ph-meta { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.page-head .ph-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--card); font-size: 13px; color: var(--foreground); font-weight: 500;
}
.pill svg { color: var(--muted-foreground); }
.section-title { font-family: var(--font-heading); font-size: 18px; line-height: 26px; font-weight: 600; margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.seg { display: inline-flex; background: var(--muted); border-radius: 9px; padding: 3px; }
.seg button { border: 0; background: none; height: 30px; padding: 0 12px; border-radius: 7px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.seg button.on { background: var(--card); color: var(--foreground); font-weight: 600; box-shadow: var(--card-shadow); }

/* ---------- Buttons / inputs ---------- */
.btn {
  height: 36px; border: 1px solid var(--border); background: var(--card); padding: 0 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; color: var(--foreground);
  box-shadow: var(--card-shadow);
}
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.destructive { background: var(--destructive); border-color: var(--destructive); color: #fff; }
:root[data-theme="dark"] .btn.destructive { color: var(--card); }
.btn.danger { color: var(--destructive); }
.btn.ghost { border-color: transparent; background: none; box-shadow: none; }
.btn.ghost:hover { background: var(--hover); }
.btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--foreground); }
.input, .select, .textarea {
  border: 1px solid var(--input); background: var(--card); border-radius: 8px; padding: 0 11px; height: 36px; outline: 0; width: 100%;
}
.textarea { padding: 9px 11px; height: auto; resize: vertical; min-height: 90px; line-height: 1.5; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px;
  font-size: 12px; font-weight: 600; white-space: nowrap; font-family: var(--font); letter-spacing: 0;
  background: var(--muted); color: var(--muted-foreground);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.badge.success { background: var(--success-tint); color: var(--success); }
.badge.warning { background: var(--warning-tint); color: var(--warning); }
.badge.info { background: var(--info-tint); color: var(--info); }
.badge.danger { background: var(--destructive-tint); color: var(--destructive); }
.badge.brand { background: var(--primary-tint); color: var(--primary); }

/* ---------- Cards ---------- */
.card-box, .panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--card-shadow);
}
.panel { padding: 20px 22px; margin-bottom: 20px; }
.panel h2 { font-size: 15px; line-height: 22px; font-weight: 600; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.panel h2 .sub { font-family: var(--font); font-weight: 400; color: var(--muted-foreground); font-size: 13px; margin-left: auto; }
.panel h2 a, .panel h2 .link { margin-left: auto; font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--primary); background: none; border: 0; padding: 0; }

/* ---------- Task list ---------- */
.list-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--card-shadow); padding: 4px 6px; margin-bottom: 20px; }
.section { margin-bottom: 4px; }
.section + .section { border-top: 1px solid var(--border); }
.section-head {
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--foreground);
  padding: 12px 10px 8px; user-select: none;
}
.section-head .n {
  color: var(--muted-foreground); font-weight: 600; font-size: 12px; background: var(--muted); border-radius: 10px; padding: 0 7px; line-height: 20px;
}
.section-head.collapsible { cursor: pointer; border-radius: 8px; }
.section-head.collapsible:hover { background: var(--surface-2); }
.section-head .chev { transition: transform .15s; color: var(--muted-foreground); }
.section-head.collapsed .chev { transform: rotate(-90deg); }
.section-head.overdue { color: var(--destructive); }
.section-head.overdue .n { background: var(--destructive-tint); color: var(--destructive); }
.task {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 10px; border-radius: 8px; cursor: pointer;
}
.task + .task { box-shadow: 0 -1px 0 var(--border); }
.task:hover { background: var(--surface-2); }
.task.selected { background: var(--primary-tint); }
.task .body { flex: 1; min-width: 0; }
.task .title { word-break: break-word; font-weight: 500; }
.task.done .title { text-decoration: line-through; color: var(--muted-foreground); font-weight: 400; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--muted-foreground); align-items: center; }
.meta > span { display: inline-flex; align-items: center; gap: 5px; }
.meta .due.today { color: var(--success); font-weight: 600; }
.meta .due.overdue { color: var(--destructive); font-weight: 600; }
.meta .due.soon { color: var(--warning); font-weight: 500; }
.tag { background: var(--muted); color: var(--muted-foreground); padding: 0 8px; border-radius: 10px; font-size: 12px; font-weight: 500; line-height: 20px; }
.status-pill { font-size: 12px; padding: 0 8px; border-radius: 10px; background: var(--info-tint); color: var(--info); font-weight: 600; line-height: 20px; }
.status-pill::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }

.check {
  width: 20px; height: 20px; margin-top: 0; border-radius: 50%; flex: none; border: 2px solid var(--input);
  background: none; padding: 0; display: grid; place-items: center; color: transparent; transition: background .12s;
}
.check.p1 { border-color: var(--p1); background: var(--destructive-tint); }
.check.p2 { border-color: var(--p2); background: var(--warning-tint); }
.check.p3 { border-color: var(--p3); background: var(--info-tint); }
.check:hover { color: var(--muted-foreground); }
.check.on { background: var(--success); border-color: var(--success); color: #fff; }
:root[data-theme="dark"] .check.on { color: var(--card); }
.flag.p1 { color: var(--p1); } .flag.p2 { color: var(--p2); } .flag.p3 { color: var(--p3); }

.inline-add {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; color: var(--muted-foreground); border: 0; background: none;
  width: 100%; text-align: left; border-radius: 8px; font-weight: 500;
}
.inline-add:hover { color: var(--primary); background: var(--hover); }

.empty { text-align: center; color: var(--muted-foreground); padding: 48px 20px; }
.empty .big {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px; display: grid; place-items: center; font-size: 24px;
  background: var(--primary-tint); color: var(--primary);
}
.empty h3 { color: var(--foreground); margin: 0 0 4px; font-size: 15px; font-weight: 600; }

/* ---------- Board ---------- */
.board { display: grid; grid-template-columns: repeat(6, minmax(196px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.column { background: var(--muted); border-radius: 12px; padding: 10px; min-height: 220px; display: flex; flex-direction: column; }
.column-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font-weight: 600; font-family: var(--font-heading); font-size: 14px; }
.column-head .n { color: var(--muted-foreground); font-weight: 600; font-size: 12px; background: var(--card); border-radius: 10px; padding: 0 7px; line-height: 20px; font-family: var(--font); }
.column-head .sdot { width: 8px; height: 8px; border-radius: 50%; }
.column.drag-over { outline: 2px dashed var(--ring); outline-offset: -2px; }
.cards { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 40px; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: grab; box-shadow: var(--card-shadow);
  transition: box-shadow .15s, transform .15s;
}
.card:hover { box-shadow: var(--raised-shadow); }
.card.dragging { opacity: .4; }
.card .title { font-weight: 500; }
.card.done .title { text-decoration: line-through; color: var(--muted-foreground); }
.card .proj { font-size: 12px; color: var(--muted-foreground); display: flex; gap: 6px; align-items: center; margin-bottom: 6px; font-weight: 500; }
.drop-marker { height: 3px; background: var(--brand); border-radius: 2px; margin: -5px 0; }
.column .inline-add:hover { background: var(--card); }

/* ---------- Dashboard ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.tile {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; cursor: pointer;
  box-shadow: var(--card-shadow); transition: box-shadow .15s;
}
.tile:hover { box-shadow: var(--raised-shadow); }
.tile .k { font-size: 14px; color: var(--muted-foreground); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile .v { font-family: var(--font-heading); font-size: 26px; line-height: 32px; font-weight: 700; margin-top: 6px; }
.tile .v.danger { color: var(--destructive); }
.tile .s { font-size: 14px; color: var(--muted-foreground); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.alert-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; margin-bottom: 24px;
  background: var(--warning-tint); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); color: var(--foreground);
}
.alert-bar svg { color: var(--warning); flex: none; }
.alert-bar button { background: none; border: 0; padding: 0; color: var(--primary); text-decoration: underline; font-weight: 500; }
.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.proj-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.proj-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; cursor: pointer;
  box-shadow: var(--card-shadow); transition: box-shadow .15s; display: flex; flex-direction: column; gap: 12px;
}
.proj-card:hover { box-shadow: var(--raised-shadow); }
.proj-card .pc-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.proj-card h3 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-card .pc-mid { display: flex; align-items: center; gap: 14px; }
.proj-card p { margin: 0; color: var(--muted-foreground); font-size: 13px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.proj-card .foot { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted-foreground); border-top: 1px solid var(--border); padding-top: 10px; }
.ring { flex: none; display: grid; place-items: center; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring .track { stroke: var(--chart-track); }
.ring b { position: absolute; font-family: var(--font-heading); font-size: 13px; font-weight: 700; }
.ring.lg b { font-size: 16px; }
.meter { height: 6px; border-radius: 4px; background: var(--chart-track); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }

.bars { display: flex; align-items: flex-end; gap: 2px; height: 140px; border-bottom: 1px solid var(--chart-grid); position: relative;
  background: repeating-linear-gradient(to top, transparent 0 34px, var(--chart-grid) 34px 35px); }
.bars .b { flex: 1; height: 100%; display: flex; align-items: flex-end; position: relative; cursor: default; }
.bars .b i { display: block; width: 100%; max-width: 22px; margin: 0 auto; background: var(--chart-1); border-radius: 4px 4px 0 0; }
.bars .b:hover i, .bars .b:focus-visible i { filter: brightness(1.15); }
.bars .b.zero i { background: transparent; }
.bar-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-foreground); margin-top: 6px; }
.big-fig { font-family: var(--font-heading); font-size: 26px; line-height: 32px; font-weight: 700; margin: -4px 0 12px; }
.big-fig small { font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--muted-foreground); margin-left: 6px; }
.tooltip {
  position: fixed; pointer-events: none; z-index: 100; background: var(--popover); color: var(--foreground); font-size: 12px;
  padding: 6px 9px; border-radius: 8px; white-space: nowrap; box-shadow: var(--overlay-shadow); border: 1px solid var(--border);
}
.tooltip b { font-weight: 700; }

/* ---------- Calendar ---------- */
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-head h2 { margin: 0 8px 0 0; font-size: 18px; font-weight: 600; min-width: 170px; }
.cal {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--card); border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--card-shadow);
}
.cal .dow { padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--muted-foreground); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cal .day { min-height: 116px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal .day:nth-child(7n) { border-right: 0; }
.cal .day.other { background: var(--surface-2); }
.cal .day.other .num { color: var(--muted-foreground); font-weight: 500; }
.cal .day .num { font-size: 13px; font-weight: 600; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.cal .day .num:hover { background: var(--hover); }
.cal .day.today .num { background: var(--primary); color: var(--primary-foreground); }
.cal .day.drag-over { background: var(--primary-tint); }
.cal .ev {
  font-size: 12px; padding: 2px 7px; border-radius: 6px; background: var(--muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cal .ev:hover { background: var(--hover); }
.cal .ev::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--input)); margin-right: 6px; vertical-align: 1px; }
.cal .ev.done { text-decoration: line-through; color: var(--muted-foreground); }
.cal .more { font-size: 12px; color: var(--primary); padding-left: 4px; cursor: pointer; font-weight: 500; }

/* ---------- Drawer ---------- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 640px; max-width: 100vw; background: var(--popover);
  border-left: 1px solid var(--border); box-shadow: var(--overlay-shadow); z-index: 45; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .2s ease, visibility .2s; visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; gap: 6px; height: 64px; padding: 0 14px 0 20px; border-bottom: 1px solid var(--border); }
.drawer-head .crumb { font-size: 13px; color: var(--muted-foreground); display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-weight: 500; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.title-input { font-family: var(--font-heading); font-size: 19px; font-weight: 700; border: 0; outline: 0; width: 100%; background: none; padding: 0; resize: none; line-height: 28px; letter-spacing: -0.01em; }
.props { display: grid; grid-template-columns: 96px 1fr; gap: 10px 12px; align-items: center; margin: 18px 0 22px; padding: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.props > label { color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.props .input, .props .select { height: 34px; }
.subtasks { margin-bottom: 4px; }
.subtask { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.subtask .check { width: 18px; height: 18px; }
.subtask input[type=text] { flex: 1; border: 0; outline: 0; background: none; padding: 5px 6px; border-radius: 6px; }
.subtask input[type=text]:focus { background: var(--muted); }
.subtask.done input[type=text] { text-decoration: line-through; color: var(--muted-foreground); }
.subtask .x { visibility: hidden; border: 0; background: none; color: var(--muted-foreground); border-radius: 6px; height: 26px; width: 26px; display: grid; place-items: center; }
.subtask:hover .x, .subtask .x:focus-visible { visibility: visible; }
.progress-label { font-size: 13px; color: var(--muted-foreground); font-weight: 500; }
.drawer-foot { padding: 12px 22px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 13px; color: var(--muted-foreground); display: flex; justify-content: space-between; align-items: center; }

/* ---------- Modal ---------- */
.overlay { position: fixed; inset: 0; background: rgb(15 23 42 / .4); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.modal { background: var(--popover); border-radius: 12px; box-shadow: var(--overlay-shadow); width: 580px; max-width: 100%; border: 1px solid var(--border); overflow: hidden; }
.modal-body { padding: 22px 24px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface-2); align-items: center; }
.modal-foot .hint { margin-right: auto; font-size: 13px; color: var(--muted-foreground); }
.modal h2 { margin: 0 0 16px; font-size: 18px; line-height: 26px; font-weight: 700; }
.qa-input { font-size: 17px; border: 0; outline: 0; width: 100%; background: none; padding: 4px 0; font-weight: 500; }
.qa-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-height: 26px; }
.chip { font-size: 12.5px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--muted); color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.chip.accent { background: var(--primary-tint); color: var(--primary); }
.qa-help { font-size: 13px; color: var(--muted-foreground); margin-top: 14px; line-height: 1.9; }
.qa-help code { font-family: var(--font-mono); font-size: 12px; background: var(--muted); padding: 1px 6px; border-radius: 5px; color: var(--foreground); }
.colors { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; }
.swatch.on { box-shadow: 0 0 0 2px var(--popover), 0 0 0 4px var(--foreground); }

.toast {
  position: fixed; bottom: 24px; right: 24px; background: var(--popover); color: var(--foreground); border: 1px solid var(--border);
  padding: 12px 16px; border-radius: 12px; box-shadow: var(--overlay-shadow); z-index: 200; font-size: 14px; display: flex; gap: 14px; align-items: center;
}
.toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; }
.toast button { background: none; border: 0; color: var(--primary); font-weight: 600; padding: 0; }
.save-state { font-size: 13px; color: var(--muted-foreground); padding: 0 6px; display: inline-flex; align-items: center; gap: 6px; }
.save-state.err { color: var(--destructive); }

.filters { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filters .select { width: auto; height: 34px; font-size: 13px; border-color: var(--border); box-shadow: var(--card-shadow); padding: 0 8px; }

.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 14px; align-items: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 45; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; box-shadow: var(--overlay-shadow); }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 0 16px; }
  .content { padding: 24px 16px 56px; }
  .board { grid-template-columns: repeat(6, 78vw); }
}
@media (max-width: 600px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 14px; }
  .cal .day { min-height: 72px; padding: 3px; }
  .cal .ev { font-size: 10px; padding: 1px 3px; }
  .cal .ev::before { display: none; }
  .toast { left: 16px; right: 16px; }
  .search kbd { display: none; }
}

/* ---------- Agentic workflow ---------- */
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.hint { font-size: 12.5px; color: var(--muted-foreground); font-weight: 400; }
.nav-item .count.warn { background: var(--warning-tint); color: var(--warning); }
.by { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 0 8px; height: 22px; border-radius: 11px; background: var(--muted); font-size: 12px; font-weight: 600; color: var(--muted-foreground); white-space: nowrap; }
.by.claude, .by-mini { background: var(--brand-tint); color: var(--primary); }
:root[data-theme="dark"] .by.claude, :root[data-theme="dark"] .by-mini { color: var(--brand); }
.by-mini { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 10px; font-size: 12px; font-weight: 600; line-height: 20px; }
.drawer-head .icon-btn[data-act="copyid"] { font-family: var(--font-mono); font-size: 11.5px; }

.steps { list-style: none; display: flex; gap: 0; margin: 16px 0 14px; padding: 0; counter-reset: s; }
.steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--muted-foreground); position: relative; text-align: center; }
.steps li::before { content: ''; position: absolute; top: 9px; left: -50%; right: 50%; height: 2px; background: var(--chart-track); z-index: 0; }
.steps li:first-child::before { display: none; }
.steps li.past::before, .steps li.current::before { background: var(--brand); }
.steps .sd { width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 2px solid var(--chart-track); display: grid; place-items: center; position: relative; z-index: 1; color: #fff; }
.steps .sd svg { width: 10px; height: 10px; }
.steps li.past .sd { background: var(--brand); border-color: var(--brand); }
.steps li.current .sd { border-color: var(--primary); box-shadow: inset 0 0 0 3px var(--card); background: var(--primary); }
.steps li.current { color: var(--foreground); font-weight: 700; }

.callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); font-size: 13.5px; line-height: 20px; margin-bottom: 4px; }
.callout > svg { flex: none; margin-top: 3px; color: var(--muted-foreground); }
.callout code, .plan-empty code, .empty code { font-family: var(--font-mono); font-size: 12px; background: var(--muted); padding: 1px 6px; border-radius: 5px; color: var(--foreground); }
.callout.warning { background: var(--warning-tint); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.callout.warning > svg { color: var(--warning); }
.callout.danger { background: var(--destructive-tint); border-color: color-mix(in srgb, var(--destructive) 30%, transparent); }
.callout.danger > svg { color: var(--destructive); }
.callout.brand { background: var(--primary-tint); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.callout.brand > svg { color: var(--primary); }
.callout .hint { display: block; margin-top: 4px; }
.callout-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.dsec { margin-top: 22px; }
.dsec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.dsec-head h3 { margin: 0; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.dsec-head .n { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--muted-foreground); background: var(--muted); border-radius: 10px; padding: 0 7px; line-height: 20px; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.plan-box { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--card); max-height: 520px; overflow: auto; }
.plan-empty { border: 1px dashed var(--border); border-radius: 10px; padding: 16px; color: var(--muted-foreground); font-size: 13.5px; text-align: center; }
.md { font-size: 13.5px; line-height: 21px; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h3, .md h4, .md h5, .md h6 { font-family: var(--font-heading); margin: 16px 0 6px; line-height: 22px; }
.md h3 { font-size: 15px; } .md h4 { font-size: 14px; } .md h5, .md h6 { font-size: 13.5px; }
.md p { margin: 0 0 10px; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 20px; }
.md li { margin: 2px 0; }
.md ul.checks { list-style: none; padding-left: 2px; }
.md ul.checks li { display: flex; gap: 8px; align-items: flex-start; }
.md ul.checks .cb { width: 15px; height: 15px; margin-top: 3px; border: 1.5px solid var(--input); border-radius: 4px; flex: none; display: grid; place-items: center; font-size: 10px; }
.md ul.checks li.done .cb { background: var(--success); border-color: var(--success); color: #fff; }
.md code { font-family: var(--font-mono); font-size: 12px; background: var(--muted); padding: 1px 5px; border-radius: 4px; }
.md pre { background: var(--muted); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 0 0 10px; }
.md pre code { background: none; padding: 0; font-size: 12px; line-height: 18px; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.md a { color: var(--primary); }

.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.att { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; min-height: 132px; }
.att-prev { display: grid; place-items: center; height: 88px; background: var(--muted); overflow: hidden; }
.att-prev img { width: 100%; height: 100%; object-fit: cover; }
.att-ext { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }
.att-meta { padding: 6px 8px; font-size: 11.5px; color: var(--muted-foreground); display: flex; flex-direction: column; line-height: 15px; min-width: 0; }
.att-name { color: var(--foreground); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 6px; border: 0; background: rgb(15 23 42 / .65); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .12s; }
.att:hover .att-del, .att-del:focus-visible { opacity: 1; }
.att-add { border-style: dashed; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--muted-foreground); font-size: 13px; font-weight: 500; background: var(--surface-2); }
.att-add:hover { color: var(--primary); border-color: var(--primary); }
.att-add:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.att-add .hint { font-size: 11.5px; }
.drawer.file-over::after { content: 'Drop files to attach'; position: absolute; inset: 8px; border: 2px dashed var(--ring); border-radius: 12px; background: color-mix(in srgb, var(--popover) 85%, transparent); display: grid; place-items: center; font-weight: 600; color: var(--primary); pointer-events: none; }

.activity { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.activity li { display: flex; gap: 10px; font-size: 13px; line-height: 19px; }
.activity .av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--muted); color: var(--muted-foreground); }
.activity li.claude .av { background: var(--brand-tint); color: var(--primary); }
:root[data-theme="dark"] .activity li.claude .av { color: var(--brand); }
.activity .when { font-size: 12px; color: var(--muted-foreground); }
.activity .empty-act { color: var(--muted-foreground); }

.review-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--card-shadow); padding: 18px 20px; margin-bottom: 16px; }
.rc-head { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.rc-titles { min-width: 0; flex: 1; }
.rc-title { font-family: var(--font-heading); font-size: 16px; font-weight: 700; background: none; border: 0; padding: 0; text-align: left; color: var(--foreground); }
.rc-title:hover { color: var(--primary); }
.rc-actions { display: flex; gap: 8px; }
.rc-plan.long { max-height: 340px; overflow: hidden; position: relative; }
.rc-plan.long::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, var(--card)); }
.rc-more { margin-top: 8px; background: none; border: 0; padding: 0; color: var(--primary); font-weight: 600; }
.section-title .badge { margin-right: auto; }

/* ---------- Accounts & access ---------- */
.h-violet { --h: var(--m-violet); --ht: var(--m-violet-t); }
body.signed-out .app, body.signed-out .drawer { display: none; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(1200px 500px at 50% -10%, var(--primary-tint), transparent 70%), var(--background); }
.auth-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--raised-shadow); padding: 28px 28px 24px; }
.auth-card h1 { margin: 4px 0 4px; font-size: 22px; line-height: 30px; letter-spacing: -0.02em; }
.auth-sub { margin: 0 0 20px; color: var(--muted-foreground); }
.auth-submit { width: 100%; justify-content: center; height: 40px; margin-top: 4px; }
.auth-submit:disabled { opacity: .6; cursor: progress; }
.auth-error { background: var(--destructive-tint); color: var(--destructive); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 12px; font-weight: 500; }

.avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700;
  color: var(--h, var(--m-slate)); background: var(--ht, var(--m-slate-t)); letter-spacing: .02em; }
.avatar.sm { width: 22px; height: 22px; font-size: 9.5px; }
.avatar.md { width: 34px; height: 34px; font-size: 13px; }
.avatar.lg { width: 40px; height: 40px; font-size: 14px; }
.avatars { display: inline-flex; }
.avatars .avatar { box-shadow: 0 0 0 2px var(--card); }
.avatars .avatar + .avatar { margin-left: -6px; }

.user-wrap { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 5px; border-radius: 19px; border: 1px solid var(--border); background: var(--card); font-weight: 500; }
.user-btn:hover { background: var(--hover); }
.user-btn:empty { display: none; }
.user-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 240px; background: var(--popover); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--overlay-shadow); padding: 6px; }
.user-menu .um-head { display: flex; gap: 10px; align-items: center; padding: 8px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.user-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 8px; text-align: left; color: var(--foreground); }
.user-menu button:hover, .user-menu button:focus-visible { background: var(--hover); }
.user-menu button svg { color: var(--muted-foreground); }

.team { padding: 0; overflow: hidden; }
.team-row { display: grid; grid-template-columns: minmax(200px, 1.2fr) 110px 2fr 80px; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border); }
.team-headrow { border-top: 0; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--muted-foreground); padding: 9px 18px; }
.team-person { display: flex; gap: 10px; align-items: center; min-width: 0; }
.team-access { display: flex; flex-wrap: wrap; gap: 6px; }
.proj-access { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--muted); font-size: 12.5px; font-weight: 500; }
.proj-access em { font-style: normal; color: var(--muted-foreground); font-size: 11.5px; }
.access-list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.access-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; }
.access-row + .access-row { border-top: 1px solid var(--border); }
.access-row > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; }
.access-row .select { width: 200px; height: 32px; flex: none; }
[hidden] { display: none !important; }
.readonly .att-add, .readonly #newComment, .readonly .subtask:has(#newSub) { display: none; }
.check:disabled { cursor: default; opacity: .7; }
@media (max-width: 760px) {
  .team-row { grid-template-columns: 1fr auto; }
  .team-row > :nth-child(3) { grid-column: 1 / -1; }
  .team-headrow { display: none; }
  .user-name { display: none; }
  .access-row .select { width: 150px; }
}
.drawer.readonly .input:disabled, .drawer.readonly .select:disabled, .drawer.readonly .textarea:disabled { background: var(--surface-2); border-color: var(--border); color: var(--foreground); opacity: 1; }
.drawer.readonly .title-input:disabled { color: var(--foreground); }

/* ---------- Filters ---------- */
.filters { gap: 8px; align-items: center; }
.filters-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted-foreground); margin-right: 2px; }
.filters .select { max-width: 210px; }
.filters .select.on { border-color: color-mix(in srgb, var(--primary) 45%, transparent); background-color: var(--primary-tint); color: var(--primary); font-weight: 600; }
.filters-end { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 760px) {
  .filters-label { display: none; }
  .filters .select { flex: 1 1 140px; max-width: none; }
  .filters-end { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ---------- Clients ---------- */
.h-teal { --h: var(--m-teal); --ht: var(--m-teal-t); }
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.client-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; cursor: pointer;
  box-shadow: var(--card-shadow); transition: box-shadow .15s; display: flex; flex-direction: column; gap: 14px; }
.client-card:hover { box-shadow: var(--raised-shadow); }
.client-card .pc-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cc-name { flex: 1; min-width: 0; }
.cc-name h3 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-contact { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; min-height: 44px; }
.cc-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; font-size: 13px; }
.cc-links a { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); text-decoration: none; overflow-wrap: anywhere; }
.cc-links a:hover { text-decoration: underline; }
.client-card .foot { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted-foreground); border-top: 1px solid var(--border); padding-top: 10px; }
.pc-clients { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted-foreground); margin-top: -4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pc-clients svg { flex: none; width: 13px; height: 13px; }
a.pill { text-decoration: none; }
a.pill:hover { background: var(--hover); }
.inline-search { width: min(360px, 100%); height: 34px; background: var(--card); box-shadow: var(--card-shadow); }
.contacts { display: flex; flex-direction: column; }
.contact { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.contact + .contact { border-top: 1px solid var(--border); }
.ct-main { flex: 1; min-width: 0; }
.ct-notes { margin-top: 6px; font-size: 13px; color: var(--muted-foreground); white-space: pre-wrap; }
.kvs { margin: 0; display: flex; flex-direction: column; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 9px 0; font-size: 13.5px; }
.kv + .kv { border-top: 1px solid var(--border); }
.kv dt { color: var(--muted-foreground); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv a { color: var(--primary); }
.fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px 0; margin: 0 0 16px; }
.fieldset legend { font-size: 13px; font-weight: 600; padding: 0 6px; }
.check-list { border: 1px solid var(--border); border-radius: 10px; max-height: 200px; overflow: auto; margin-bottom: 14px; }
.check-row { display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer; font-weight: 500; }
.check-list .check-row + .check-row { border-top: 1px solid var(--border); }
.check-row:hover { background: var(--surface-2); }
.check-row input { width: 16px; height: 16px; accent-color: var(--primary); }
.check-row svg { color: var(--muted-foreground); }
.modal-scroll { max-height: calc(100vh - 24vh - 72px); overflow-y: auto; }
@media (max-width: 600px) { .kv { grid-template-columns: 1fr; gap: 2px; } .client-grid { grid-template-columns: 1fr; } }

/* ---------- Task keys ---------- */
.tkey { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--muted-foreground); background: var(--muted);
  padding: 1px 6px; border-radius: 5px; margin-right: 8px; white-space: nowrap; vertical-align: 1px; letter-spacing: .01em; }
.task.done .tkey, .card.done .tkey { text-decoration: none; display: inline-block; }
.rc-title .tkey { font-size: 12px; vertical-align: 2px; }
.key-btn { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--primary); background: var(--primary-tint);
  border: 0; border-radius: 6px; height: 28px; padding: 0 10px; }
.key-btn:hover { filter: brightness(.97); }

/* ---------- Rich task rows & panel ---------- */
.snippet { margin-top: 3px; font-size: 13px; line-height: 19px; color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 110ch; }
.accept-line { margin-top: 4px; font-size: 12.5px; line-height: 18px; color: var(--success); display: flex; gap: 6px; align-items: flex-start; max-width: 110ch; }
.accept-line svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.accept-line span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.accept-line b { font-weight: 600; }
.card .snippet { font-size: 12.5px; line-height: 18px; margin: 6px 0 0; }
.card .accept-line { display: none; }
.task.done .snippet, .task.done .accept-line { opacity: .7; }
.prio { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11.5px; font-weight: 600; background: var(--muted); color: var(--muted-foreground); white-space: nowrap; }
.prio svg { width: 11px; height: 11px; }
.prio.p1 { background: var(--destructive-tint); color: var(--destructive); }
.prio.p2 { background: var(--warning-tint); color: var(--warning); }
.prio.p3 { background: var(--info-tint); color: var(--info); }
.client-mini { color: var(--muted-foreground); }
.client-mini svg { width: 12px; height: 12px; }
.seg-sm button { height: 26px; padding: 0 9px; font-size: 12px; }

.sum-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px 30px; align-items: center; }
.chip-soft, .chip-due { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--muted); color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.chip-due.overdue { background: var(--destructive-tint); }
.chip-due.today { background: var(--success-tint); }
.chip-soft svg, .chip-due svg { width: 12px; height: 12px; }

.overview { margin: 16px 0 0; border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 4px 16px; }
.ov-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 0; font-size: 13.5px; align-items: start; }
.ov-row + .ov-row { border-top: 1px solid var(--border); }
.ov-row dt { color: var(--muted-foreground); font-weight: 500; }
.ov-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 6px; }
.ov-row dd > a, .ov-client > a { display: inline-flex; align-items: center; gap: 7px; color: var(--primary); font-weight: 600; text-decoration: none; }
.ov-row dd > a:hover, .ov-client > a:hover { text-decoration: underline; }
.ov-client > a svg { width: 13px; height: 13px; }
.ov-contact { font-size: 12.5px; color: var(--muted-foreground); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 2px; }
.ov-contact .cc-links { margin: 0; }
.ov-contact a { display: inline-flex; gap: 4px; align-items: center; color: var(--primary); text-decoration: none; }
.ov-row dd:has(.ov-repo) { flex-direction: row; align-items: center; gap: 4px; }
.ov-repo { font-size: 12px; color: var(--foreground); }
.sm-btn { height: 24px; min-width: 24px; padding: 0 4px; }

.desc-view { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--card); }
.accept { margin-top: 10px; border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); background: var(--success-tint); border-radius: 10px; padding: 10px 14px; }
.accept-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--success); margin-bottom: 4px; }
.accept-h svg { width: 15px; height: 15px; }
.accept .md { font-size: 13.5px; }
.src-chip { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-foreground); background: var(--surface-2); border: 1px dashed var(--border); border-radius: 8px; padding: 6px 6px 6px 10px; }
.src-chip > span { font-weight: 600; }
.src-chip code { font-family: var(--font-mono); font-size: 12px; color: var(--foreground); flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .sum-chips { margin-left: 0; }
  .ov-row { grid-template-columns: 1fr; gap: 2px; }
  .snippet { -webkit-line-clamp: 3; }
}
.ov-row dd { align-items: flex-start; }
.card .client-mini { display: none; }

/* ---------- Grouped sidebar ---------- */
.nav-group { margin-top: 6px; border-radius: 10px; }
.nav-group.open { background: color-mix(in srgb, var(--shell-hover) 45%, transparent); padding-bottom: 4px; }
.nav-group-row { display: flex; align-items: center; gap: 2px; }
.nav-group-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px 6px 7px; border: 0; background: none;
  border-radius: 8px; text-align: left; color: var(--shell-text-strong); font-weight: 600; }
.nav-group-head:hover { background: var(--shell-hover); }
.nav-group-head .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-head .chev, .nav-sub-head .chev { flex: none; color: var(--shell-text-soft); transition: transform .15s; transform: rotate(-90deg); }
.nav-group-head[aria-expanded="true"] .chev, .nav-sub-head[aria-expanded="true"] .chev { transform: none; }
.nav-group-head .count { margin-left: 0; }
.nav-add { width: 28px; height: 28px; flex: none; border: 0; background: none; border-radius: 7px; color: var(--shell-text-soft); font-size: 17px; line-height: 1; margin-right: 4px; }
.nav-add:hover { background: var(--shell-hover); color: var(--shell-text-strong); }
.nav-group-body { margin: 0 0 0 19px; padding-left: 8px; border-left: 1px solid var(--border); }
.nav-group-body .nav-item { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
.nav-group-body .nav-item .chip-ic { width: 24px; height: 24px; }
.nav-group-body .nav-item.active { position: relative; }
.nav-group-body .nav-item.active::before { content: ''; position: absolute; left: -9px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--shell-active-text); }
.nav-sub { margin-top: 2px; }
.nav-sub-head { display: flex; align-items: center; gap: 7px; width: 100%; border: 0; background: none; padding: 7px 8px 5px 6px; border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--shell-text-soft); text-align: left; }
.nav-sub-head:hover { background: var(--shell-hover); color: var(--shell-text-strong); }
.nav-sub-head svg:first-child { width: 13px; height: 13px; flex: none; }
.nav-sub-head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-sub-head em { font-style: normal; font-weight: 600; font-size: 11px; color: var(--shell-text-soft); }
.nav-archived { margin-top: 4px; }
.nav > .nav-item { margin-bottom: 0; }
/* Give project names more room inside groups */
.sidebar { width: 280px; }
.nav-group-body { margin-left: 14px; padding-left: 6px; }
.nav-group-body .nav-item { padding-left: 5px; padding-right: 8px; gap: 8px; }
.nav-group-body .nav-item.active::before { left: -7px; }
.nav-sub-head { padding-left: 5px; }

/* ---------- SirpiSoft brand ---------- */
/* The S mark: colour on light surfaces, inverse (navy turned white) on dark and navy ones. Never recolour or crop it. */
.brand { text-decoration: none; color: inherit; border-radius: 10px; }
.brand:focus-visible { outline-offset: 4px; }
.brand-logo { width: 36px; height: 36px; flex: none; display: inline-block; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-logo .mark-dark { display: none; }
:root[data-theme="dark"] .brand-logo .mark-light { display: none; }
:root[data-theme="dark"] .brand-logo .mark-dark { display: block; }
.brand-name { font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sign-in: lockup on the card, and from 960px a deep navy brand panel */
.auth-page { display: grid; grid-template-columns: 1fr; padding: 0; place-items: stretch; }
.auth-main { display: grid; place-items: center; padding: 24px 16px; min-height: 100vh; }
.auth-lockup { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 22px; }
.auth-lockup .brand-logo { width: 34px; height: 34px; }
.auth-panel { display: none; }
@media (min-width: 960px) {
  .auth-page { grid-template-columns: minmax(380px, 44%) 1fr; background: var(--background); }
  .auth-panel { display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
    background: radial-gradient(900px 500px at 0% 0%, #0a4a8f 0%, transparent 60%), #00285A; color: #E8F1FB; padding: 40px 48px; min-height: 100vh; }
  :root[data-theme="dark"] .auth-panel { background: radial-gradient(900px 500px at 0% 0%, #0b3a70 0%, transparent 60%), #001A3D; }
  .auth-panel-bg { position: absolute; right: -90px; bottom: -70px; width: 420px; height: 420px; opacity: .07; pointer-events: none; }
  .auth-lockup.inverse { color: #fff; margin: 0; position: relative; }
  .auth-pitch { position: relative; max-width: 30rem; }
  .auth-pitch h2 { font-size: 30px; line-height: 38px; letter-spacing: -0.02em; margin: 0 0 18px; color: #fff; }
  .auth-pitch ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; color: #B7CDE8; font-size: 15px; }
  .auth-pitch li { display: flex; gap: 10px; }
  .auth-pitch li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #01B1C5; flex: none; margin-top: 7px; }
  .auth-foot { position: relative; font-size: 13px; color: #B7CDE8; }
  .auth-card .auth-lockup { display: none; }
}

/* ==========================================================================
   Mobile & touch
   ========================================================================== */
/* Nothing may push the page wider than the screen */
html, body { overflow-x: hidden; }
.main, .content, .page-head .ph-text, .list-card, .panel, .client-card, .proj-card, .task .body, .cc-contact > div, .ct-main { min-width: 0; }
.pill { max-width: 100%; }
.pill.mono { height: auto; min-height: 28px; padding-top: 4px; padding-bottom: 4px; white-space: normal; overflow-wrap: anywhere; line-height: 18px; }
a.pill, .pill { overflow-wrap: anywhere; }

/* Filters: desktop shows the controls inline; the toggle exists only on small screens */
.filters-toggle { display: none; }
.filters-controls { display: contents; }
.filters-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: var(--primary-foreground); font-size: 11px; font-weight: 700; }

.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  .sidebar { width: min(300px, 86vw); padding-bottom: env(safe-area-inset-bottom); }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgb(15 23 42 / .45); z-index: 44; opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .board { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .board .column { scroll-snap-align: start; }
}

@media (max-width: 760px) {
  /* Top bar: the search gets the room; the shortcuts button is for keyboards */
  .topbar { gap: 6px; padding: 0 10px; height: 58px; }
  .topbar .spacer { display: none; }
  .search { flex: 1; min-width: 0; width: auto; }
  #helpBtn, .save-state { display: none; }
  .user-btn { padding: 0 4px; }

  /* Page header: smaller chip, text uses the full width, actions in their own row */
  .content { padding: 18px 14px 80px; }
  .page-head { gap: 12px; margin-bottom: 18px; }
  .page-head .chip-ic.lg { width: 40px; height: 40px; border-radius: 11px; }
  .page-head .ph-text { flex: 1 1 calc(100% - 56px); }
  .page-head h1 { font-size: 21px; line-height: 28px; }
  .page-head .ph-actions { width: 100%; }
  .page-head .ph-actions .btn.primary { margin-left: auto; }
  .page-head .ring.lg { width: 48px !important; height: 48px !important; }
  .page-head .ring.lg svg { width: 48px; height: 48px; }
  .page-head .ring.lg b { font-size: 12px; }

  /* Filters fold away behind one button */
  .filters { gap: 8px; }
  .filters-label { display: none; }
  .filters-toggle { display: inline-flex; }
  .filters-toggle.active { border-color: var(--primary); color: var(--primary); }
  .filters-controls { display: none; width: 100%; order: 3; }
  .filters-controls.open { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters-controls .select { max-width: none; width: 100%; }
  .filters-controls [data-clear-filters] { grid-column: 1 / -1; justify-content: center; }
  .filters-end { margin-left: auto; width: auto; gap: 8px; }
  .filters-end .hint { display: none; }
  .filters-end .select { max-width: 150px; }

  /* Touch: comfortable targets (44px where it matters), no iOS zoom-on-focus */
  .input, .select, .textarea, .search input, .qa-input, .title-input { font-size: 16px; }
  .btn { min-height: 42px; }
  .btn.sm { min-height: 38px; }
  .select, .input { height: 42px; }
  .seg button { height: 36px; }
  .icon-btn { min-width: 42px; height: 42px; }
  .nav-item, .nav-group-head { min-height: 44px; }
  .nav-sub-head { min-height: 36px; }
  .check { position: relative; width: 24px; height: 24px; }
  .check::after { content: ''; position: absolute; inset: -10px; } /* 44px hit area */
  .subtask .check { width: 22px; height: 22px; }
  .inline-add { min-height: 44px; }
  .cal-head .btn.sm { min-width: 42px; }
  .section-head { min-height: 44px; }
  .task { padding: 12px 6px; }
  .meta { gap: 6px 10px; }

  /* Lists & cards */
  .list-card { padding: 2px 4px; border-radius: 12px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 14px; }
  .tile .k { font-size: 13px; }
  .grid-2 { gap: 14px; }
  .panel { padding: 16px; }
  .proj-cards, .client-grid { grid-template-columns: 1fr; }
  .review-card { padding: 14px; }
  .rc-actions { width: 100%; }
  .rc-actions .btn { flex: 1; justify-content: center; }
  .board { grid-template-columns: repeat(6, 84vw); margin: 0 -14px; padding: 0 14px 8px; }

  /* Forms & dialogs */
  .row { flex-direction: column; gap: 0; }
  .overlay { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); align-items: flex-end; }
  .modal { max-height: calc(100dvh - 20px); display: flex; flex-direction: column; border-radius: 16px; }
  .modal-body { overflow-y: auto; padding: 18px 16px; }
  .modal-scroll { max-height: none; }
  .modal-foot { padding: 12px 16px; flex-wrap: wrap; }
  .modal-foot .hint { width: 100%; margin: 0 0 4px; }
  .access-row { flex-wrap: wrap; }
  .access-row .select { width: 100%; }
  .user-menu { position: fixed; top: 64px; left: 10px; right: 10px; min-width: 0; }

  /* Task panel: full screen, compact header */
  .drawer { width: 100vw; border-left: 0; }
  .drawer-head { height: 56px; padding: 0 6px 0 14px; gap: 2px; }
  .drawer-head .crumb { overflow: hidden; white-space: nowrap; }
  .drawer-head .crumb .by { display: none; }
  .drawer-body { padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); }
  .title-input { font-size: 18px; }
  .sum-chips { margin-left: 0; }
  .steps li { font-size: 10.5px; }
  .props { grid-template-columns: 1fr; gap: 4px; padding: 12px; }
  .props > label { margin-top: 6px; }
  .overview { padding: 2px 12px; }
  .att-grid { grid-template-columns: repeat(2, 1fr); }
  .drawer-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }

  /* Calendar: compact cells, dots instead of titles */
  .cal-head h2 { min-width: 0; flex: 1; font-size: 17px; }
  .cal .dow { padding: 6px 2px; text-align: center; font-size: 11px; }
  .cal .day { min-height: 64px; padding: 3px 2px; align-items: center; }
  .cal .day .num { width: 28px; height: 28px; }
  .cal .ev { width: 100%; padding: 1px 2px; font-size: 0; height: 8px; background: none; text-align: center; }
  .cal .ev::before { display: inline-block; width: 7px; height: 7px; margin: 0; }
  .cal .more { font-size: 10px; padding: 0; }
  .toast { left: 10px; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .tiles { grid-template-columns: 1fr; }
  .filters-controls.open { grid-template-columns: 1fr; }
}

/* Calendar: selected day + agenda */
.cal .day { cursor: pointer; }
.cal .day.sel { box-shadow: inset 0 0 0 2px var(--ring); }
.cal-agenda { margin-top: 22px; }
.cal-agenda .section-title { justify-content: flex-start; }
@media (max-width: 760px) {
  a.pill { min-height: 38px; }
  .cc-links a, .kv dd a, .ov-contact a, .panel h2 .link { display: inline-flex; align-items: center; min-height: 36px; }
  .proj-access { height: 30px; }
}
@media (max-width: 760px) {
  .page-head .ring { display: none; } /* the "n of m done" pill carries progress on phones */
}

/* ==========================================================================
   Claude's questions, Claude review, plan versions
   ========================================================================== */
.badge.violet { background: var(--m-violet-t); color: var(--m-violet); }
.badge.violet svg { width: 13px; height: 13px; }
.callout.violet { background: var(--m-violet-t); border-color: color-mix(in srgb, var(--m-violet) 28%, transparent); }
.callout.violet > svg { color: var(--m-violet); }
.btn.primary-soft { border-color: color-mix(in srgb, var(--m-violet) 40%, var(--border)); color: var(--m-violet); }

.qa-block { margin-top: 14px; border: 1px solid color-mix(in srgb, var(--m-violet) 30%, var(--border)); border-radius: 12px; background: var(--card); overflow: hidden; }
.qa-block.compact { margin: 12px 0 4px; }
.qa-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--m-violet-t); color: var(--foreground); font-size: 13.5px; }
.qa-head > svg { color: var(--m-violet); width: 16px; height: 16px; flex: none; }
.qa-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--warning); white-space: nowrap; }
.qa-count.all { color: var(--success); }
.qa-list { list-style: none; margin: 0; padding: 4px 14px 12px; }
.qa-list li { padding: 10px 0; border-top: 1px solid var(--border); }
.qa-list li:first-child { border-top: 0; }
.qa-q { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 20px; }
.qa-q .md > :first-child { margin-top: 0; } .qa-q .md > :last-child { margin-bottom: 0; }
.qa-n { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 0; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); font-size: 11px; font-weight: 700; }
li.answered .qa-n { background: var(--success-tint); color: var(--success); }
.qa-a { margin: 8px 0 0 30px; width: calc(100% - 30px); min-height: 44px; resize: vertical; font-size: 13.5px; }
.qa-ans { margin: 6px 0 0 30px; font-size: 13.5px; line-height: 20px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.qa-ans.none { color: var(--muted-foreground); font-style: italic; }
.qa-ans .md > :last-child { margin-bottom: 0; }
.qa-ans .hint { display: block; margin-top: 2px; font-style: normal; }

.sc-sum { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--success-tint); color: var(--foreground); font-size: 13.5px; margin-bottom: 14px; }
.sc-sum > svg { color: var(--success); flex: none; margin-top: 2px; }
.sc-sum.warn { background: var(--warning-tint); }
.sc-sum.warn > svg { color: var(--warning); }

.plan-history { margin-top: 14px; }
.ph-title { font-size: 12.5px; font-weight: 700; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ph-title .n { font-size: 11px; background: var(--muted); border-radius: 10px; padding: 0 7px; line-height: 18px; text-transform: none; letter-spacing: 0; }
.pv { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: var(--surface-2); }
.pv > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; cursor: pointer; font-size: 13.5px; min-height: 44px; list-style: none; }
.pv > summary::-webkit-details-marker { display: none; }
.pv > summary::before { content: '▸'; color: var(--muted-foreground); transition: transform .15s; }
.pv[open] > summary::before { transform: rotate(90deg); }
.pv > summary > span { color: var(--muted-foreground); }
.pv-qa, .pv-fb { margin: 0 12px 10px; font-size: 13px; line-height: 19px; }
.pv-q { padding: 6px 0; border-top: 1px dashed var(--border); }
.pv-q:first-child { border-top: 0; }
.pv-a { margin-top: 2px; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--m-violet) 45%, transparent); color: var(--muted-foreground); white-space: pre-wrap; }
.pv-plan { margin: 0 12px 12px; max-height: 360px; }
@media (max-width: 760px) {
  .qa-a { margin-left: 0; width: 100%; }
  .qa-ans { margin-left: 0; }
  .qa-head { flex-wrap: wrap; }
}

/* ==========================================================================
   Auto-build
   ========================================================================== */
.ab-setting { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; background: var(--surface-2); }
.ab-setting .hint { margin: 6px 0 0; line-height: 19px; }
.ab-setting code { font-family: var(--font-mono); font-size: 12px; background: var(--muted); padding: 1px 5px; border-radius: 5px; }
.ab-toggle { padding: 0; min-height: 32px; }
.ab-toggle span { display: inline-flex; align-items: center; gap: 6px; }
.ab-toggle svg { color: var(--m-violet); }
.ab-pill svg { color: var(--m-violet); }
.badge .spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; margin-right: 2px; }
.badge.ab-live svg { animation: pulse 1.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .badge .spin, .badge.ab-live svg { animation: none; } }

.build-card { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--card); }
.build-card.violet { border-color: color-mix(in srgb, var(--m-violet) 35%, var(--border)); }
.build-card.success { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.build-card.danger { border-color: color-mix(in srgb, var(--destructive) 35%, var(--border)); }
.build-card.warning { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }
.bc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.bc-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.bc-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: var(--muted-foreground); }
.bc-facts span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.bc-err { margin-top: 8px; font-size: 13px; line-height: 19px; padding: 8px 10px; border-radius: 8px; background: var(--destructive-tint); color: var(--foreground); overflow-wrap: anywhere; }
@media (max-width: 760px) { .bc-actions { margin-left: 0; width: 100%; } .bc-actions .btn { flex: 1; justify-content: center; } }

.qa-tag { margin-right: 6px; vertical-align: 1px; }

/* Suggested answers under Claude's questions */
.qa-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0 30px; }
.qa-sugg-l { font-size: 11.5px; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.qa-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font: inherit; font-size: 13px; line-height: 18px; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.qa-opt:hover { border-color: var(--m-violet); background: var(--m-violet-t); }
.qa-opt:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.qa-opt.rec { border-color: color-mix(in srgb, var(--m-violet) 45%, var(--border)); }
.qa-opt.on { border-color: var(--m-violet); background: var(--m-violet-t); font-weight: 600; }
.qa-opt svg { width: 13px; height: 13px; color: var(--m-violet); flex: none; }
.qa-rec { font-size: 10.5px; font-weight: 700; color: var(--m-violet); text-transform: uppercase; letter-spacing: .04em; }
.qa-recall { margin-left: 4px; }
@media (max-width: 760px) {
  .qa-sugg { margin-left: 0; }
  .qa-opt { min-height: 38px; }
}

/* Project owner */
.owner-pill { gap: 7px; height: auto; min-height: 30px; padding: 3px 12px 3px 4px; flex-wrap: wrap; border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.owner-pill.none { padding-left: 10px; color: var(--muted-foreground); border-style: dashed; cursor: pointer; background: none; font: inherit; font-size: 12.5px; }
.owner-pill .op-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); }
.owner-pill .op-t { color: var(--muted-foreground); }
.owner-pill .op-links { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.owner-pill .op-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); text-decoration: none; }
.owner-pill .op-links a:hover { text-decoration: underline; }
.pc-owner { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12.5px; color: var(--muted-foreground); }
.pc-owner b { color: var(--foreground); font-weight: 600; }
.owner-ro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 38px; }
.owner-ro .hint { width: 100%; }
.proj-access em.own { color: var(--primary); font-weight: 700; }
.team-contact { margin-top: 3px; font-size: 12.5px; }
.owner-list { margin-bottom: 14px; }
.owner-chip { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }