/* -------------------------------------------------------
   MRO Command Center — unified internal app styles
   (extends the OpsHub visual language)
------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #f4f5f7;
  --surface:   #ffffff;
  --border:    #e1e4e8;
  --accent:    #0057b7;
  --accent-dk: #003f8a;
  --text:      #1a1d23;
  --muted:     #6b7280;
  --danger:    #c0392b;
  --success:   #27ae60;
  --warn:      #b7791f;
  --radius:    8px;
  --shadow:    0 1px 4px rgba(0,0,0,0.08);
  --mono:      'SF Mono', 'Fira Mono', 'Cascadia Code', monospace;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Header ---------------------------------------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4px 24px;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.logo {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.logo-mark { font-size: 1.25rem; }
.logo-img { height: 34px; width: auto; display: block; }
.logo-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.logo-app { font-size: 0.82rem; font-weight: 600; color: var(--muted);
  letter-spacing: 0.01em; white-space: nowrap; }
/* overflow must stay visible — the dropdown panels hang below the bar */
nav { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: nowrap; min-width: 0; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--bg); color: var(--text); }
.nav-link.active { color: var(--accent); background: #e8f0ff; }
/* hover groups — the group word is a real link (Workflow->Tasks, Tools->Ask
   Claude, Library->KB); the panel reveals on hover or keyboard focus. */
.nav-group { position: relative; display: flex; align-items: center; }
/* a real chevron, drawn — the unicode caret was too faint to read as a menu */
.nav-caret { width: 7px; height: 7px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-1px);
  transition: transform 0.15s; opacity: 0.7; flex: none; margin-top: -3px; }
.nav-group:hover .nav-caret { transform: rotate(225deg) translateY(-2px); }
/* text↔chevron gap + matching right padding so the chevron isn't kissing the pill edge */
.nav-parent { gap: 8px; padding-right: 14px; }
.nav-group:hover > .nav-link { background: var(--bg); color: var(--text); }
/* panel floats 8px clear of the bar; the ::before strip bridges the gap so
   the pointer never crosses dead space and closes it */
.nav-drop { display: none; position: absolute; top: 100%; left: 0; z-index: 300;
  margin-top: 8px; min-width: 190px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(15,30,50,0.16); padding: 7px; }
.nav-drop::before { content: ''; position: absolute; top: -9px; left: 0; right: 0; height: 9px; }
.nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop { display: block; }
.nav-drop a { display: block; padding: 9px 12px; border-radius: 7px;
  color: var(--text); text-decoration: none; font-size: 0.86rem; white-space: nowrap; }
.nav-drop a:hover { background: var(--bg); }
.nav-drop a.active { color: var(--accent); background: #e8f0ff; font-weight: 600; }
.header-user { display: flex; align-items: center; gap: 12px; font-size: 0.9rem;
  position: relative; }
/* chip menu — click-open (not hover): these are account actions, not nav */
.user-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  min-width: 176px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(15,30,50,0.14); padding: 6px; }
.user-menu[hidden] { display: none; }
.user-menu a { display: block; padding: 8px 11px; border-radius: 7px;
  color: var(--text); text-decoration: none; font-size: 0.85rem; }
.user-menu a:hover { background: var(--bg); }
.user-menu-signout { border-top: 1px solid var(--border); border-radius: 0 0 7px 7px;
  margin-top: 4px; padding-top: 9px; color: var(--muted); }
/* tasks board view — cards per status column; clicking opens the drawer */
/* sized to sit flush with the selects beside it: same border, radius and
   vertical padding, and align-self stretch so the heights can never drift */
.view-toggle { border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius); padding: 7px 10px; display: inline-flex;
  align-items: center; align-self: stretch; cursor: pointer; color: var(--muted); }
.view-toggle:hover { border-color: #9db3cc; color: var(--text); }
/* stretch (not start): sizeBoard() pins the board to the viewport bottom and
   every column fills it, so cards scroll INSIDE columns and the status
   headers never leave view */
/* every status column always renders; the board scrolls left-to-right when
   they don't fit, so no column ever hides (each stays a drop target) */
.task-board { display: flex; gap: 12px; align-items: stretch;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
/* scroll without the chrome — wheel/trackpad/drag still work, no bars */
.task-board::-webkit-scrollbar { display: none; }
.board-col-cards::-webkit-scrollbar { display: none; }
/* the hidden attribute's UA rule loses to display:flex above — without this,
   a built board stays visible under the list after toggling back */
.task-board[hidden] { display: none; }
/* shown for the ~ms between board-first paint and buildBoard() replacing it */
.board-skeleton { flex: 1 1 auto; display: flex; align-items: center;
  justify-content: center; padding: 40px; font-size: 0.9rem; }
/* 22.5% each: four columns fill the view with ~10% of the fifth peeking,
   so the horizontal scroll is discoverable without a scrollbar hunt */
.board-col { background: #eef1f5; border-radius: 10px; padding: 8px; min-height: 120px;
  display: flex; flex-direction: column; flex: 0 0 22.5%; min-width: 250px; }
.board-col-cards { overflow-y: auto; min-height: 0; flex: 1 1 auto;
  scrollbar-width: none; padding-right: 2px; }
.board-col-head { display: flex; align-items: center; gap: 7px; font-size: 0.8rem;
  font-weight: 600; color: #44546a; padding: 4px 6px 8px; }
.board-count { margin-left: auto; background: #fff; border-radius: 10px; padding: 1px 8px;
  font-size: 0.72rem; color: var(--muted); font-weight: 500; }
.board-card { display: flex; gap: 10px; align-items: flex-start; width: 100%;
  text-align: left; background: #fff;
  border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px;
  margin-bottom: 8px; cursor: pointer; font-family: inherit;
  transition: box-shadow 0.12s, border-color 0.12s; }
.card-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; }
.card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.card-meta-line { display: flex; align-items: center; gap: 6px;
  font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.card-meta-line.due-soon span { color: #c07f10; font-weight: 600; }
.card-meta-line.due-overdue span { color: #d1201f; font-weight: 600; }
.overdue-pill { position: absolute; top: 9px; right: 10px; background: #d1201f;
  color: #fff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 999px; padding: 3px 10px; }
.board-card { position: relative; }
/* the chips row is the card's first line now, so IT dodges the pill */
.board-card:has(.overdue-pill) .card-chips { padding-right: 62px; }

/* Create New Task — blue button sized to the toolbar row */
.btn-create-task { align-self: stretch; }

/* lightbox modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 25, 40, 0.45);
  z-index: 500; }
.modal-backdrop[hidden] { display: none; }
.modal { position: fixed; top: 14vh; left: 50%; transform: translateX(-50%);
  width: min(520px, calc(100vw - 32px)); background: #fff; border-radius: 12px;
  box-shadow: 0 18px 50px rgba(10, 20, 35, 0.3); z-index: 510; padding: 18px 20px; }
.modal[hidden] { display: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; }
.modal-head h2 { font-size: 1.05rem; margin: 0; }
.modal-x { border: none; background: none; cursor: pointer; color: #8895a7;
  font-size: 0.95rem; padding: 2px 6px; }
.modal-x:hover { color: var(--text); }
.modal-form { display: flex; flex-direction: column; gap: 10px; }
.modal-row { display: flex; gap: 10px; }
.modal-row > * { flex: 1 1 0; min-width: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.board-card:hover { border-color: #9db3cc; box-shadow: 0 3px 10px rgba(15,30,50,0.08); }
.board-card { cursor: grab; }
.board-card.dragging { opacity: 0.45; cursor: grabbing; }
.board-col.drag-over { outline: 2px dashed #9db3cc; outline-offset: -2px; background: #e8f0fb; }
.board-card-title { font-size: 0.86rem; font-weight: 600; color: var(--text); line-height: 1.35; }
/* HARD RULE: nothing escapes a card. Long unbroken tokens (URLs, slashed
   paths, snake_case event names) wrap mid-token instead of overflowing,
   and the card clips anything that still tries. */
.board-card { overflow: hidden; }
.board-card-title, .card-desc, .card-chips { overflow-wrap: anywhere; min-width: 0; }
.tag-pill { max-width: 100%; overflow-wrap: anywhere; }
.tag-pill a { overflow-wrap: anywhere; }
.board-col-done .board-card { opacity: 0.75; }
/* suggested column keeps the review-queue blue so it reads as "not yet real" */
.board-col-suggested { background: #e7effc; }
.board-col-suggested .board-card { border-color: #c9daf3; cursor: default; }
.card-desc { font-size: 0.76rem; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.sugg-card-actions { display: flex; gap: 6px; margin-top: 2px; }
.sugg-card-actions button { font-size: 0.74rem; padding: 4px 12px; }
.board-more { font-size: 0.75rem; padding: 4px 6px; }

/* ---- task features: search, priority, ticket#, milestones -------------- */
.task-search { min-width:180px; }
.ticket-num { font-size:0.7rem; font-weight:600; color:#8895a7; font-variant-numeric:tabular-nums;
  margin-right:2px; }
.prio-chip { display:inline-block; font-size:0.64rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.03em; padding:2px 7px; border-radius:999px; margin-right:4px; vertical-align:middle; }
.prio-urgent { background:#fde8e8; color:#c0392b; }
.prio-high   { background:#fdeede; color:#c0730f; }
.prio-medium { background:#e9eefb; color:#3a5bbf; }
.prio-low    { background:#eef1f5; color:#68727f; }
.ms-badge { display:inline-block; font-size:0.66rem; font-weight:600; color:#68727f;
  background:#eef1f5; border-radius:6px; padding:1px 7px; margin-left:4px; vertical-align:middle;
  font-variant-numeric:tabular-nums; }
.ms-badge.ms-done { background:#e5f3ea; color:#1f7a44; }
.card-chips { display:flex; align-items:center; flex-wrap:wrap; gap:2px; margin-bottom:5px; }
.card-chips .ticket-num { margin-right:4px; }

/* drawer: ticket #, milestones section */
.pane-ticket { display:block; font-size:0.72rem; font-weight:600; color:#8895a7;
  font-variant-numeric:tabular-nums; margin-bottom:2px; }
.ms-count { font-size:0.72rem; font-weight:600; color:#8895a7; margin-left:4px; }
.pane-milestones { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.ms-item { display:flex; align-items:center; gap:6px; }
.ms-item label { display:flex; align-items:center; gap:8px; flex:1 1 auto; cursor:pointer;
  font-size:0.86rem; color:#33475b; margin:0; }
.ms-item input { flex:none; }
.ms-item-done span { text-decoration:line-through; color:#9aa4b2; }
.ms-del { border:none; background:none; cursor:pointer; color:#c4ccd6; font-size:0.8rem;
  padding:2px 5px; border-radius:5px; flex:none; }
.ms-del:hover { color:var(--danger); background:#fdecec; }
.ms-add-form { display:flex; gap:8px; margin-bottom:6px; }
.ms-add-form input { flex:1 1 auto; }

/* comment markdown + @mention */
.comment-body code { background:#eef1f5; border-radius:4px; padding:1px 5px; font-size:0.85em; }
.comment-body .mention { color:#2f5fd0; font-weight:600; }
.mention-pop { position:absolute; z-index:30; background:#fff; border:1px solid var(--border);
  border-radius:8px; box-shadow:0 6px 20px rgba(15,30,50,0.14); padding:5px; min-width:170px; }
.mention-pop[hidden] { display:none; }
.mention-opt { display:block; width:100%; text-align:left; border:none; background:none;
  cursor:pointer; font-size:0.84rem; padding:7px 10px; border-radius:6px; color:var(--text); }
.mention-opt:hover { background:var(--bg); }

/* header notification bell */
.notif-wrap { position:relative; }
.notif-bell { border:none; background:none; cursor:pointer; color:#5b6675; padding:4px;
  border-radius:7px; display:inline-flex; position:relative; }
.notif-bell:hover { background:var(--bg); color:var(--text); }
.notif-count { position:absolute; top:-1px; right:-2px; background:var(--danger); color:#fff;
  font-size:0.6rem; font-weight:700; min-width:15px; height:15px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 3px; }
.notif-count[hidden] { display:none; }
.notif-pop { position:absolute; top:calc(100% + 8px); right:0; z-index:300; width:300px;
  max-height:60vh; overflow-y:auto; background:#fff; border:1px solid var(--border);
  border-radius:10px; box-shadow:0 10px 30px rgba(15,30,50,0.16); padding:6px; }
.notif-pop[hidden] { display:none; }
.notif-item { display:block; padding:9px 11px; border-radius:8px; text-decoration:none;
  color:var(--text); }
.notif-item:hover { background:var(--bg); }
.notif-unseen { background:#f3f7fd; }
.notif-text { font-size:0.83rem; line-height:1.4; }
.notif-when { font-size:0.72rem; color:#9aa4b2; margin-top:2px; }
.notif-empty { padding:16px; text-align:center; font-size:0.85rem; }

/* dashboard site map — the Django-admin-style "everything, listed" strip */
.sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; }
.sitemap-group h3 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 0 0 6px; }
.sitemap-group a { display: block; font-size: 0.86rem; color: var(--text);
  text-decoration: none; padding: 3px 0; }
.sitemap-group a:hover { color: var(--accent); }
.username { color: var(--muted); text-decoration: none; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip { width: 30px; height: 30px; border-radius: 50%; background: #e8f0ff;
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; text-decoration: none; flex: none;
  border: none; cursor: pointer; padding: 0; font-family: inherit; }
.user-chip:hover { background: #d7e5ff; }
a.username:hover { color: var(--accent); text-decoration: underline; }
.btn-logout {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--radius);
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-logout:hover { border-color: var(--danger); color: var(--danger); }

/* ---- Layout ----------------------------------------- */
.main-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px;
  width: 100%;
  flex: 1;
}
.page-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; }
.page-title .subtitle { font-size: 0.95rem; font-weight: 400; }
.section-title { font-size: 1.15rem; font-weight: 700; margin: 32px 0 14px; }
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head .page-title { margin-bottom: 0; }
.page-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.muted { color: var(--muted); font-size: 0.88rem; }
.empty-note { padding: 24px 0; }

/* ---- Buttons / inputs -------------------------------- */
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--accent-dk); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
  display: inline-block;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.btn-secondary:hover { background: var(--bg); border-color: #aaa; }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
input[type="text"], input[type="password"], input[type="date"],
input[type="search"], select, textarea {
  font: inherit;
  font-size: 0.88rem;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
/* custom select: kill the OS chrome, use our own chevron so dropdowns match
   the rest of the UI instead of looking like raw native controls */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 7px;
  cursor: pointer;
}
select:hover { border-color: #b9c2ce; }
select::-ms-expand { display: none; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,87,183,0.12);
}
.search-input { min-width: 240px; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; }

/* ---- Alerts ------------------------------------------ */
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: 0.9rem; }
.alert-error { background: #fde8e8; border: 1px solid #f5c6c6; color: var(--danger); }
.alert-info  { background: #e8f0ff; border: 1px solid #c4d9f5; color: var(--accent-dk); }

/* ---- Login ------------------------------------------- */
.login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 48px 40px; width: 100%; max-width: 400px;
}
.login-logo { text-align: center; margin-bottom: 32px; }
.logo-mark-lg { font-size: 2.5rem; display: block; color: var(--accent); }
.login-logo h1 { font-size: 1.5rem; font-weight: 700; color: var(--accent); margin-top: 8px; }
.login-sub { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.85rem; font-weight: 600; }

/* ---- Dashboard --------------------------------------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 28px;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; text-decoration: none; color: var(--text);
  transition: border-color 0.15s;
}
a.stat-card:hover { border-color: var(--accent); }
.stat-num { font-size: 1.9rem; font-weight: 700; color: var(--accent); line-height: 1.2; }
.stat-label { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
.stat-sub { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }

.dash-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 22px; margin-bottom: 16px;
}
.panel h2 { font-size: 1rem; font-weight: 700; margin-bottom: 12px; }
.plain-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.plain-list a { color: var(--accent); text-decoration: none; }
.plain-list a:hover { text-decoration: underline; }
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table td { padding: 5px 0; border-bottom: 1px solid var(--bg); font-size: 0.9rem; }
.mini-table td.num { text-align: right; font-weight: 600; }
.mini-table a { color: var(--text); text-decoration: none; }
.mini-table a:hover { color: var(--accent); }

.tool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.tool-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; text-decoration: none; color: var(--text);
  transition: border-color 0.15s;
}
.tool-card:hover { border-color: var(--accent); }
.tool-name { font-weight: 600; color: var(--accent); margin-bottom: 4px; }
.tool-desc { font-size: 0.85rem; color: var(--muted); }

/* ---- Chips ------------------------------------------- */
.date-chip {
  display: inline-block; background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; font-size: 0.75rem; padding: 1px 9px;
  color: var(--muted); text-decoration: none; font-family: var(--mono);
}
a.date-chip:hover { border-color: var(--accent); color: var(--accent); }
.status-chip {
  display: inline-block; border-radius: 999px; font-size: 0.72rem;
  font-weight: 600; padding: 1px 9px; text-transform: uppercase; letter-spacing: 0.03em;
}
.status-in-progress { background: #e8f0ff; color: var(--accent-dk); }
.status-not-started { background: var(--bg); color: var(--muted); }
.status-blocked     { background: #fdf1e0; color: var(--warn); }
.status-done        { background: #e6f7ee; color: var(--success); }

/* ---- Tasks ------------------------------------------- */
.filter-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.inline-form { display: inline-flex; gap: 8px; align-items: center; }
.add-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px;
}
.add-box summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--accent); }
.add-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.add-form-wrap { flex-direction: column; align-items: stretch; }
.add-form .grow { flex: 1; min-width: 200px; }

.task-table { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); }
.task-table th {
  text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.task-table td { padding: 9px 12px; border-bottom: 1px solid var(--bg); vertical-align: top; }
.task-table tr:last-child td { border-bottom: none; }
.task-cell { width: 45%; min-width: 260px; }
.task-title { font-weight: 500; font-size: 0.92rem; overflow-wrap: anywhere; }
.task-desc { font-size: 0.82rem; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.row-done .task-title { text-decoration: line-through; color: var(--muted); }
.row-inprog .check-btn { color: var(--warn); border-color: var(--warn); }
.row-inprog .task-title::after {
  content: 'in progress'; margin-left: 8px; font-size: 0.68rem; font-weight: 600;
  color: var(--warn); background: #fdf3e3; padding: 1px 7px; border-radius: 9px;
  vertical-align: 1px;
}
.check-btn {
  background: none; border: 1px solid var(--border); border-radius: 50%;
  width: 26px; height: 26px; cursor: pointer; font-size: 0.9rem; color: var(--success);
  line-height: 1;
}
.check-btn:hover { border-color: var(--success); background: #e6f7ee; }
.del-btn {
  background: none; border: none; color: var(--muted); font-size: 1.1rem;
  cursor: pointer; padding: 2px 8px; border-radius: var(--radius);
}
.del-btn:hover { color: var(--danger); background: #fde8e8; }
.owner-select { max-width: 190px; }
.owner-select.suggested { border-style: dashed; color: var(--accent-dk); }
.date-input { max-width: 150px; }
.source-cell { white-space: nowrap; }

/* ---- Goals (canvas-style roll-up layout) -------------- */
.rollup-hint { margin: -10px 0 18px; }
.goals-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px; align-items: start;
}
@media (max-width: 980px) { .goals-layout { grid-template-columns: 1fr; } }
.add-box-inline { margin-bottom: 0; }

.goal-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 18px; margin-bottom: 14px;
}
.goal-section-week { margin-left: 26px; border-left: 3px solid #c4d9f5; }
.goal-section-pinned { border-left: 3px solid var(--accent); }
.goal-section-head { display: flex; align-items: center; gap: 10px; }
.goal-section-head h2 { font-size: 1rem; font-weight: 700; }
.push-right { margin-left: auto; }
.stype-badge {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 8px; border-radius: 999px; background: var(--bg); color: var(--muted);
}
.stype-week { background: #e8f0ff; color: var(--accent-dk); }
.stype-pinned { background: var(--accent); color: #fff; }

.goal-items { list-style: none; margin: 10px 0 6px; display: flex; flex-direction: column; gap: 4px; }
.goal-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 4px; border-radius: 6px; font-size: 0.9rem;
}
.goal-item:hover { background: var(--bg); }
.goal-item .check-btn { width: 20px; height: 20px; font-size: 0.7rem; flex: none; align-self: center; }
.goal-item .item-del { opacity: 0; }
.goal-item:hover .item-del { opacity: 1; }
.item-text { flex: 1; min-width: 0; }
.item-done .item-text, .item-done.yearly-name, .yearly-name.item-done { text-decoration: line-through; color: var(--muted); }
.item-indent { margin-left: 34px; }
.goal-item.dimmed { opacity: 0.25; }
.no-items { padding: 4px; }

.item-add-form { display: flex; gap: 8px; margin-top: 6px; }
.item-add-form .grow { flex: 1; }
.item-add-form input, .item-add-form button { padding: 4px 9px; font-size: 0.84rem; }
.code-input { width: 58px; text-transform: uppercase; }

/* CBDO */
.first-section { margin-top: 8px; }
.cbdo-panel { border-left: 3px solid var(--success); }
.cbdo-toolbar { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.cbdo-log {
  max-height: 56vh; overflow-y: auto; display: flex; flex-direction: column;
  gap: 12px; padding: 4px;
}
.cbdo-suggestion { max-width: 92%; border-left: 3px solid var(--accent); }
.cbdo-suggestion.kind-cleanup { border-left-color: var(--warn); }
.cbdo-suggestion.kind-execute { border-left-color: var(--success); }
.cbdo-choices {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 2px 4px 6px 14px;
}
.cbdo-choices button { font-size: 0.84rem; padding: 6px 14px; }
.cbdo-other-row { width: 100%; }
.cbdo-other-row textarea { flex: 1; min-width: 240px; resize: vertical; }
.cbdo-option-list { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-bottom: 6px; }
.cbdo-option {
  text-align: left; background: var(--surface); border: 1px solid var(--accent);
  color: var(--accent-dk); border-radius: var(--radius); padding: 8px 14px;
  font-size: 0.88rem; cursor: pointer; transition: background 0.15s;
}
.cbdo-option:hover { background: #e8f0ff; }
.history-divider { text-align: center; font-size: 0.78rem; padding: 4px 0; }
.history-action { background: #e6f7ee; }
.cbdo-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.cbdo-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; background: var(--bg);
}
.cbdo-card.kind-cleanup { border-left: 3px solid var(--warn); }
.cbdo-card.kind-new { border-left: 3px solid var(--accent); }
.cbdo-card.kind-execute { border-left: 3px solid var(--success); }
.cbdo-kind {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; color: var(--muted);
}
.kind-new .cbdo-kind { color: var(--accent); }
.kind-cleanup .cbdo-kind { color: var(--warn); }
.kind-execute .cbdo-kind { color: var(--success); }
.cbdo-title { font-weight: 700; font-size: 1rem; margin: 2px 0 4px; }
.cbdo-why { font-size: 0.88rem; color: var(--muted); margin-bottom: 10px; }
.cbdo-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cbdo-skipped { opacity: 0.45; }
.cbdo-other { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.cbdo-other-label { margin-bottom: 6px; }

/* goals AI assistant */
.assistant-panel { border-left: 3px solid var(--accent); }
.assistant-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.assistant-form { display: flex; gap: 10px; margin-top: 10px; align-items: flex-end; }
.assistant-form textarea { flex: 1; resize: vertical; }
.ai-changes { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ai-changes li {
  font-size: 0.85rem; background: #e6f7ee; border: 1px solid #b9e6cd;
  border-radius: 6px; padding: 4px 10px; color: #14713f;
}

/* code chips — hue per yearly goal number */
.code-chip {
  flex: none; display: inline-block; min-width: 30px; text-align: center;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  padding: 1px 6px; border-radius: 6px; background: var(--bg); color: var(--muted);
  border: 1px solid var(--border);
}
.code-1  { background: #e8f0ff; color: #003f8a; border-color: #c4d9f5; }
.code-2  { background: #e6f7ee; color: #14713f; border-color: #b9e6cd; }
.code-3  { background: #fdf1e0; color: #8a5a10; border-color: #f3ddb3; }
.code-4  { background: #fde8e8; color: #a03028; border-color: #f5c6c6; }
.code-5  { background: #f0e8fd; color: #5b2ea6; border-color: #dcc8f5; }
.code-6  { background: #e0f5f7; color: #0f6b75; border-color: #b8e4e9; }
.code-7  { background: #fce8f3; color: #a02866; border-color: #f3c4dd; }
.code-8  { background: #eef2d8; color: #5a6b12; border-color: #dbe3ae; }
.code-9  { background: #e8e8e8; color: #444;    border-color: #d2d2d2; }
.code-10 { background: #ffe9dc; color: #94430f; border-color: #f5cdb3; }
.code-11 { background: #e3ecf7; color: #2c4a6e; border-color: #c3d5ea; }
.code-12 { background: #f2e8e0; color: #6e4a2c; border-color: #e0cbb8; }

/* yearly panel */
.yearly-sticky { position: sticky; top: 72px; }
.yearly-panel .yearly-title { font-size: 1.05rem; font-weight: 700; }
.yearly-sub { margin: 2px 0 10px; }
.yearly-list {
  list-style: none; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.yearly-goal {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 8px;
  align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--bg);
  cursor: pointer; font-size: 0.88rem;
}
.yearly-goal:last-child { border-bottom: none; }
.yearly-goal:hover { background: var(--bg); }
.yearly-goal.yearly-active { background: #e8f0ff; }
.yearly-name { font-weight: 600; }
.yearly-goal .status-chip { grid-column: 3; }
.rollup-counts { grid-column: 2; font-size: 0.76rem; }
.yearly-goal .mini-select {
  grid-column: 3; font-size: 0.72rem; padding: 1px 4px; max-width: 110px;
}

/* legacy goal cards (kept for other_goals if any) */
.goal-list { display: flex; flex-direction: column; gap: 12px; }
.goal-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px;
}
.goal-done { opacity: 0.65; }
.goal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.goal-title { font-size: 1rem; }
.goal-desc { font-size: 0.88rem; color: var(--muted); margin: 8px 0 4px; }
.goal-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* ---- KB ---------------------------------------------- */
.kb-folders { display: flex; flex-direction: column; gap: 10px; }
.kb-folder {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px;
}
.kb-folder summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.kb-files { margin-top: 10px; padding-left: 16px; gap: 5px; }
.file-title { font-family: var(--mono); font-size: 1.05rem; word-break: break-all; }
.file-panel { padding: 0; }
.file-content {
  font-family: var(--mono); font-size: 0.84rem; line-height: 1.55;
  padding: 20px 24px; white-space: pre-wrap; word-break: break-word;
  overflow-x: auto;
}

/* ---- Chat / Brain ------------------------------------ */
.chat-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; height: 62vh; min-height: 380px;
}
.chat-log { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg {
  padding: 10px 14px; border-radius: var(--radius); font-size: 0.92rem;
  white-space: pre-wrap; word-break: break-word; max-width: 85%;
}
.chat-user { background: #e8f0ff; align-self: flex-end; }
.chat-assistant { background: var(--bg); align-self: flex-start; }
.chat-pending { color: var(--muted); font-style: italic; }
/* assistant answers are rendered markdown — block tags own the spacing, so
   drop the pre-wrap and give headings/lists/code sensible in-bubble styling */
.chat-assistant { white-space: normal; }
.chat-assistant > :first-child { margin-top: 0; }
.chat-assistant > :last-child { margin-bottom: 0; }
.chat-assistant p { margin: 0 0 8px; }
.chat-assistant .chat-h { font-size: 0.98rem; font-weight: 700; margin: 12px 0 6px; line-height: 1.3; }
.chat-assistant ul, .chat-assistant ol { margin: 6px 0 8px; padding-left: 20px; }
.chat-assistant li { margin: 2px 0; }
.chat-assistant code { background: rgba(15,30,50,0.07); padding: 1px 5px; border-radius: 4px;
  font-size: 0.86em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.chat-assistant pre.chat-code { background: #0f1e2e; color: #e6edf3; padding: 10px 12px;
  border-radius: 8px; overflow-x: auto; margin: 8px 0; }
.chat-assistant pre.chat-code code { background: none; padding: 0; color: inherit; font-size: 0.82rem; }
.chat-assistant a { color: #2456c8; }
.chat-form { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--border); align-items: flex-end; flex-wrap: wrap; }
.chat-form textarea { flex: 1; min-width: 220px; resize: vertical; }
.brain-controls { display: flex; align-items: center; gap: 8px; width: 100%; }
.brain-suggestions { margin-top: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip-btn {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 0.82rem; cursor: pointer; color: var(--text);
}
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 720px) {
  .header-inner { height: auto; padding: 10px 16px; flex-wrap: wrap; }
  .main-content { padding: 20px 14px; }
}


/* Slack List sourced tasks */
.slack-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 600;
  padding: 1px 7px; border-radius: 10px; margin-left: 6px;
  vertical-align: middle; color: #fff; letter-spacing: 0.02em;
}
.slack-badge.board-dima   { background: #4a6fd4; }
.slack-badge.board-silver { background: #6b8f3d; }
.slack-badge.board-julia  { background: #b5602f; }
.slack-select {
  display: inline-block; font-size: 0.68rem; margin-left: 5px;
  padding: 1px 7px; border-radius: 10px; vertical-align: middle;
  color: var(--muted); border: 1px solid var(--border);
}
.task-desc.slack-comment { color: var(--muted); font-style: normal; }

/* --- metrics registry (Phase 5) ---------------------------------------- */
.reg-flash { border:1px solid #d8e3f5; background:#f6f9ff; border-radius:8px;
  padding:8px 12px; font-size:0.9em; }
.metric-add-form { display:flex; flex-direction:column; gap:8px; padding:10px 0 4px; }
.maf-row { display:flex; gap:8px; flex-wrap:wrap; }
.maf-row input { padding:6px 9px; }
.maf-row select { padding:6px 26px 6px 9px; }
.maf-note { font-size:0.78em; margin:0; }
.reg-viewtoggle { display:flex; gap:10px; align-items:baseline; margin:0 0 10px; font-size:0.9rem; }
.reg-viewtoggle a { color:#5b6675; text-decoration:none; padding:3px 10px; border-radius:999px; }
.reg-viewtoggle a.vt-active { background:#e8f0ff; color:#2456c8; font-weight:700; }
.reg-viewtoggle .muted { font-size:0.8rem; }
.reg-list { border:1px solid var(--border); border-radius:10px; background:#fff; }
.reg-row { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:16px; align-items:center;
  padding:12px 16px; border-top:1px solid #eef1f5; }
.reg-row:first-child { border-top:none; }
.reg-label { font-weight:600; font-size:0.95em; }
.reg-name { font-family:ui-monospace, monospace; font-size:0.78em; }
.reg-chips { font-size:0.75em; margin-top:2px; }
.reg-data { display:flex; align-items:center; gap:12px; }
.reg-fresh { display:flex; flex-direction:column; font-size:0.8em; }
.reg-value { font-weight:600; font-size:1.05em; font-variant-numeric:tabular-nums; }
.reg-when { font-weight:400; font-size:0.72em; color:#8895a7; margin-left:2px; }
.reg-nodata { color:#b58a2a; font-size:0.85em; }
.wow { font-weight:600; font-variant-numeric:tabular-nums; }
.wow-up { color:#1f7a44; }     /* more is better for the metrics we track today */
.wow-down { color:#c0392b; }
.wow-flat { color:#7b8794; }
.reg-goal-chip { display:inline-block; font-size:0.75em; border:1px solid #d8e3f5;
  background:#f6f9ff; border-radius:10px; padding:1px 8px; margin:1px 3px 1px 0; }
.reg-unbound { font-size:0.8em; }
.reg-target { font-size:0.75em; margin-top:2px; }

/* --- suggested tasks (Phase 4 review strip) ---------------------------- */
.sugg-box { border:1px solid #d8e3f5; background:#f6f9ff; border-radius:10px;
  padding:10px 16px; margin-bottom:16px; }
.sugg-head { font-size:0.85rem; margin:2px 0 4px; }
.sugg-row { display:flex; justify-content:space-between; align-items:center;
  gap:14px; padding:9px 0; border-top:1px solid #e6edf8; }
.sugg-row:first-of-type { border-top:none; }
.sugg-row { align-items:flex-start; }
.sugg-main { flex:1 1 auto; min-width:0; }
.sugg-row .bulk-check { margin-top:3px; }
.sugg-meta { font-size:0.78em; margin-top:2px; }
.sugg-actions { display:flex; gap:6px; flex:none; align-items:center; }
/* goal proposed by the extractor — tinted so a pre-filled one is obvious */
.sugg-goal { font-size:0.8em; padding:4px 8px; border:1px solid #d5dbe3; border-radius:6px;
  max-width:190px; background:#fff; color:#33475b; }
.sugg-goal.has-sugg { border-color:#9dc3f0; background:#f2f8ff; }
.sugg-head-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.sugg-head-left { display:flex; align-items:center; gap:14px; }
.sugg-check-all { cursor:pointer; flex:none; }
.sugg-bulk { display:flex; align-items:center; gap:8px; font-size:0.82em; }
.sugg-bulk .btn-primary, .sugg-bulk .btn-secondary { padding:3px 10px; font-size:0.85em; }

/* --- goals remodel: project -> goal tiles ----------------------------- */
.proj-view { margin-bottom: 24px; }
.proj-view-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.proj-view-head label { display: flex; align-items: center; gap: 6px; }
.proj-view-head select { font-size: 0.85em; padding: 3px 26px 3px 9px; }
.proj-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 14px; }
.proj-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.proj-card-head h2 { font-size: 1.05rem; font-weight: 700; }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.goal-tile { border: 1px solid #e6ebf2; border-radius: 8px; padding: 12px 14px; background: #fafbfd;
  cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.goal-tile:hover { border-color: var(--accent); box-shadow: 0 1px 6px rgba(0,0,0,0.07); }
.goal-tile-title { font-weight: 600; font-size: 0.92em; line-height: 1.35; margin-bottom: 8px; }
.goal-tile-metric { display: flex; flex-direction: column; gap: 3px; }
.goal-tile-stat { font-variant-numeric: tabular-nums; }
.goal-tile-stat .metric-now { font-size: 1.05em; font-weight: 600; }
.goal-tile-nometric { font-size: 0.78em; padding: 6px 0; }
.goal-tile-foot { font-size: 0.74em; margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa4b2; display: inline-block; }
.status-dot.status-in-progress { background: #2f5fd0; }
.status-dot.status-done { background: #27ae60; }
.status-dot.status-blocked { background: #c0392b; }
.status-dot.status-not-started { background: #c4ccd6; }
.legacy-board { margin-bottom: 8px; }
.legacy-board > summary { cursor: pointer; padding: 6px 0; font-size: 0.85rem; }

.pane-convert { margin-top:16px; padding-top:12px; border-top:1px solid #eef1f5;
  display:flex; align-items:center; gap:10px; }
.btn-convert-danger { background:#fff; border:1px solid var(--danger); border-radius:6px;
  padding:5px 12px; font-size:0.82em; cursor:pointer; color:var(--danger); font-weight:600; }
.btn-convert-danger:hover { background:var(--danger); color:#fff; }
/* "Recently done" peek at the foot of the task list */
.done-box { margin-top:14px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px 16px; }
.done-box > summary { cursor:pointer; font-size:0.9rem; font-weight:600; }
.done-list { margin-top:8px; }
.done-row { display:flex; align-items:baseline; gap:8px; padding:5px 0;
  border-top:1px solid #f0f3f7; font-size:0.88em; }
.done-title { flex:1 1 auto; min-width:0; color:var(--muted); text-decoration:line-through; }
.done-meta { flex:none; font-size:0.85em; }
.done-all { display:inline-block; margin-top:10px; font-size:0.85rem;
  color:var(--accent); text-decoration:none; }
.done-all:hover { text-decoration:underline; }

/* task status column + drawer status control */
.col-status { white-space:nowrap; width:1%; }
.status-sel { font-size:0.82em; padding:3px 24px 3px 6px; border:1px solid var(--border);
  border-radius:6px; max-width:120px; }
/* status dot sits INSIDE the select, on the left, larger. Selector carries
   the wrap so it beats .tstatus on specificity for size/position. */
.pane-status-wrap { position:relative; }
.pane-status-wrap select { width:100%; padding-left:34px; }
.pane-status-wrap .pane-status-dot { position:absolute; left:13px; top:50%;
  transform:translateY(-50%); width:12px; height:12px; margin:0; z-index:1;
  pointer-events:none; border-width:2px; }
.tstatus-open { background:#fff; border-color:#c4ccd6; }

/* linked-task status dots in the goal drawer */
.tstatus { display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:8px; vertical-align:middle; border:1.5px solid #c4ccd6; background:#fff; }
.tstatus-done { background:#27ae60; border-color:#27ae60; }
.tstatus-in-progress { background:#e8b93b; border-color:#e8b93b; }
.tstatus-blocked { background:var(--danger); border-color:var(--danger); }
.tstatus-in-review { background:#8b5cf6; border-color:#8b5cf6; }
.tstatus-suggested { background:#2f5fd0; border-color:#2f5fd0; }
.sort-entry-note { margin-left:10px; font-size:0.82rem; }
.sort-entry p { margin-bottom:12px; }
.add-goal-box { margin-top:10px; }
.add-goal-box > summary { font-size:0.82rem; }

/* --- sort mode -------------------------------------------------------- */
.sort-sec { border:1px solid #e3e8ef; border-radius:10px; margin-bottom:14px; background:#fff; }
.sort-sec > summary { cursor:pointer; padding:12px 16px; font-size:0.95rem; list-style:none; }
.sort-sec > summary::-webkit-details-marker { display:none; }
.sort-step { display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center;
  background:#2f5fd0; color:#fff; border-radius:50%; font-size:0.8em; font-weight:600; margin-right:6px; }
.sort-group { padding:4px 16px 12px; }
.sort-group-head { display:flex; align-items:center; gap:12px; padding:8px 16px; flex-wrap:wrap; }
.sort-group-head label { display:flex; align-items:center; gap:6px; font-size:0.88em; }
/* left border is transparent until the row is live, so nothing shifts by 3px */
.sort-row { display:flex; align-items:flex-start; gap:10px; padding:6px 16px 6px 13px;
  border-top:1px solid #f0f3f7; border-left:3px solid transparent; transition:background 0.12s; }
.sort-row:hover { background:#f5f9ff; }
/* ticked for a bulk action */
.sort-row:has(input[type=checkbox]:checked) { background:#eef5fe; border-left-color:#9dc3f0; }
/* the row you're acting on — persists while you're over in the picker */
.sort-row.active { background:#e0edfc; border-left-color:#3b82f6; }
.sort-row.busy { opacity:0.45; }
.row-actions { display:flex; align-items:center; gap:6px; flex:none; margin-left:auto; }
.row-actions button { border:1px solid #d5dbe3; background:#fff; border-radius:6px; padding:3px 9px;
  font-size:0.78em; cursor:pointer; white-space:nowrap; }
/* goal picker — trigger looks like the select it replaced */
.goalpick { border:1px solid #d5dbe3; background:#fff; border-radius:6px; padding:3px 10px;
  font-size:0.78em; cursor:pointer; white-space:nowrap; color:#33475b; }
.goalpick:hover { border-color:#9db3cc; background:#f6f9fe; }
.picker { position:fixed; z-index:200; width:420px; max-height:min(460px, 70vh);
  display:flex; flex-direction:column; background:#fff; border:1px solid #cbd5e1;
  border-radius:10px; box-shadow:0 8px 28px rgba(15,30,50,0.18); overflow:hidden; }
.picker[hidden] { display:none; }
.picker-head { display:flex; gap:6px; padding:8px; border-bottom:1px solid #eef2f7; }
.picker-head input { flex:1 1 auto; min-width:0; border:1px solid #d5dbe3; border-radius:6px;
  padding:5px 9px; font-size:0.85em; }
.picker-x { border:none; background:none; cursor:pointer; color:#8895a7; padding:0 4px; }
.picker-body { overflow-y:auto; padding:4px; }
.picker-proj { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em;
  color:#8895a7; padding:8px 8px 4px; }
.picker-proj[hidden] { display:none; }
.pg { display:block; width:100%; text-align:left; border:1px solid transparent;
  background:none; border-radius:8px; padding:7px 9px; cursor:pointer; }
.pg[hidden] { display:none; }
.pg:hover { background:#f2f7fd; border-color:#c7dcf5; }
/* title gets the full width — squeezing it against the meta wrapped "no metric" */
.pg-title { font-size:0.86rem; font-weight:600; color:#22364d; line-height:1.35; }
.pg-meta { display:flex; align-items:center; gap:8px; margin-top:3px; }
.pg-metric { font-size:0.68rem; background:#e6f0fb; color:#2c5d94; border-radius:4px; padding:1px 6px; }
.pg-nometric { font-size:0.68rem; color:#a6b2c0; }
.pg-n { font-size:0.7rem; color:#7b8794; white-space:nowrap; }
.pg-tasks { margin:4px 0 0; padding-left:14px; font-size:0.75rem; color:#6b7a8d; line-height:1.5; }
.pg-tasks li { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pg-more, .pg-empty { color:#9aa7b6; font-style:italic; list-style:none; margin-left:-14px; }
.pg-unfile { color:#7b8794; font-size:0.8rem; border-top:1px solid #eef2f7;
  border-radius:0; margin-top:4px; }
.row-keep:hover { background:#e5f3ea; border-color:#1f7a44; color:#1f7a44; }
.row-close:hover { background:#fdeaea; border-color:#b4322a; color:#b4322a; }
.sort-main { flex:1 1 auto; min-width:0; }
/* where the task came from — fixed width so the titles stay aligned */
.sort-date { flex:0 0 auto; width:76px; font-size:0.72rem; color:#7b8794;
  font-variant-numeric:tabular-nums; padding-top:2px; white-space:nowrap; }
.sort-date-old { color:#c0392b; }
.sort-age { opacity:0.65; margin-left:5px; }
.sort-help { border:1px solid #dbe6f5; background:#f6f9fe; border-radius:10px;
  margin-bottom:14px; padding:2px 16px; }
.sort-help > summary { cursor:pointer; padding:10px 0; font-weight:600;
  font-size:0.9rem; color:#1f3f66; }
.sort-help ol { margin:4px 0 8px; padding-left:20px; }
.sort-help li { font-size:0.86rem; line-height:1.55; margin-bottom:6px; color:#33475b; }
.sort-help p { font-size:0.8rem; margin:0 0 10px; }
.sort-title { font-size:0.9em; }
.sort-reason { font-size:0.78em; margin-top:1px; }
.conf { font-size:0.66em; text-transform:uppercase; letter-spacing:.04em; padding:1px 6px;
  border-radius:10px; font-weight:600; margin-left:6px; vertical-align:middle; }
.conf-high { background:#e5f3ea; color:#1f7a44; }
.conf-medium { background:#fdf3e0; color:#9a6a12; }
.conf-low { background:#fdeaea; color:#b4322a; }
.proj-block { padding:6px 16px 12px; border-top:1px solid #f0f3f7; }
.proj-title { font-size:0.9rem; font-weight:600; margin:8px 0 6px; }
.proj-empty { font-size:0.82em; padding:2px 0 6px; }
.goal-card { border:1px solid #e6ebf2; border-radius:8px; padding:8px 12px; margin:6px 0; background:#fafbfd; }
.goal-card.rejected { opacity:.45; }
.goal-card-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.goal-card-head .keep { display:flex; align-items:center; gap:4px; font-size:0.74em; color:#5b6675; }
.goal-name { font-weight:600; font-size:0.92em; }
.goal-metric, .move-sel { font-size:0.8em; padding:3px 24px 3px 8px; border:1px solid #d5dbe3; border-radius:6px; }
.goal-metric { margin-left:auto; max-width:200px; }
.goal-rationale { font-size:0.78em; margin:3px 0 0; }
.goal-tasks { margin-top:6px; }
.goal-tasks > summary { cursor:pointer; font-size:0.78em; }

/* --- multi-select bulk actions ---------------------------------------- */
.col-check { width:26px; text-align:center; }
.col-check input, .bulk-check { cursor:pointer; }
.bulk-bar { position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(140%);
  display:flex; align-items:center; gap:10px; background:#1f2733; color:#fff;
  padding:10px 16px; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.28);
  z-index:220; opacity:0; transition:transform .18s ease, opacity .18s ease; pointer-events:none; }
.bulk-bar.open { transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
.bulk-count { font-weight:600; font-size:0.86em; white-space:nowrap; }
.bulk-bar select { background:#2b3542; color:#fff; border:1px solid #3d4855;
  border-radius:7px; padding:5px 8px; font-size:0.84em; cursor:pointer; }
.bulk-bar .btn-danger { background:#c0392b; color:#fff; border:none; border-radius:7px;
  padding:6px 12px; font-size:0.84em; cursor:pointer; }
.bulk-bar .bulk-clear { background:none; border:none; color:#9aa6b4; cursor:pointer; font-size:0.84em; }

/* --- slide-out side pane (tasks + goals) ------------------------------- */
.open-task-btn { border:1px solid #d5dbe3; background:#fff; border-radius:6px; padding:2px 9px;
  font-size:0.78em; color:#5b6675; cursor:pointer; margin-left:8px; white-space:nowrap; }
.open-task-btn:hover { border-color:#7c9ff5; color:#2f5fd0; }
.task-backdrop { position:fixed; inset:0; background:rgba(20,25,35,0.35); opacity:0;
  pointer-events:none; transition:opacity .2s; z-index:200; }
.task-backdrop.open { opacity:1; pointer-events:auto; }
.task-pane { position:fixed; top:0; left:0; bottom:0; width:460px; max-width:92vw;
  background:#fff; transform:translateX(-100%);
  transition:transform .22s ease; z-index:210; padding:18px 20px;
  display:flex; flex-direction:column; overflow-y:auto; }
/* shadow only while open — otherwise every off-screen drawer bleeds a ~20px
   band at the left edge, and pages with many drawers (Goals) stack them dark */
.task-pane.open { transform:translateX(0); box-shadow:2px 0 18px rgba(0,0,0,0.18); }
/* title→sources sit on a very light blue panel, full-bleed to the drawer edges
   (negative margins cancel the pane's 18/20 padding, then restore it inside) */
.pane-top { background:#f3f7fd; border-bottom:1px solid #e3ebf6;
  margin:-18px -20px 0; padding:18px 20px 14px; }
.pane-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
  margin-bottom:6px; }
.pane-title { font-size:1.2rem; font-weight:700; color:#1f2a37; margin:0; line-height:1.3; }
.pane-desc { font-size:0.9rem; color:#4b5563; line-height:1.55; margin:0 0 20px; }
.pane-close { background:none; border:none; font-size:1.5em; cursor:pointer; color:#8a94a6; line-height:1; }
.pane-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px 16px; margin-bottom:6px; }
/* labels: darker + bolder to match the mock */
.pane-field label { display:block; font-size:0.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:#5b6675; margin-bottom:6px; }
.pane-field select, .pane-field input { height:40px; width:100%; box-sizing:border-box; }
.pane-field-wide { grid-column:1 / -1; }
/* grid items default to min-width:auto, so a select sized by its longest
   option (long goal titles) overflows the drawer — clamp them to the cell */
.pane-field { min-width:0; }
.pane-field select, .pane-field input { max-width:100%; }
#pane-goal { width:100%; }
.pane-goals { display:flex; flex-direction:column; gap:2px; max-height:150px;
  overflow-y:auto; border:1px solid #e3e8ef; border-radius:8px; padding:8px 10px; }
.pane-goal-proj { font-size:0.68em; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; margin-top:4px; }
.pane-goal-proj:first-child { margin-top:0; }
.pane-goals label.pane-goal-check { display:flex; gap:7px; align-items:baseline;
  font-size:0.85em; text-transform:none; letter-spacing:0; color:#3b4656;
  cursor:pointer; padding:1px 0; margin:0; }
.pane-goal-check input { flex:none; }
/* tags — pills on rows and in the drawer */
.tag-pill { display:inline-flex; align-items:center; gap:4px; background:#eef4ff; color:#2456c8;
  border-radius:999px; padding:1px 8px; font-size:0.72rem; font-weight:700;
  text-decoration:none; vertical-align:middle; }
.tag-pill a { color:inherit; text-decoration:none; }
.tag-pill:hover { background:#dfeaff; }
.tag-x { background:none; border:none; color:#7d95c9; cursor:pointer; font-size:0.7rem;
  padding:0 0 0 2px; line-height:1; }
.tag-x:hover { color:#a11; }
.pane-tags-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pane-tags-row #pane-tags { display:flex; flex-wrap:wrap; gap:6px; }
.pane-tag-add input { height:28px; width:8.5rem; font-size:0.8rem; border:1px dashed #c7d2e2;
  border-radius:999px; padding:0 10px; background:transparent; }
.pane-tag-add input:focus { border-style:solid; background:#fff; }
/* danger zone — quiet until you mean it */
.pane-danger { margin-top:22px; padding-top:12px; border-top:1px solid #f0e4e4; text-align:right; }
.pane-delete { background:none; border:1px solid #e6c9c9; color:#b04a4a; border-radius:8px;
  padding:5px 12px; font-size:0.8rem; cursor:pointer; }
.pane-delete:hover { background:#fdf1f1; border-color:#d9a3a3; }
.pane-sub { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:#5b6675; margin:20px 0 12px; padding-top:18px; border-top:1px solid #e6e9ee; }
/* first sub after the blue panel — the panel already separates, so no rule */
.pane-sub-first { margin-top:18px; padding-top:0; border-top:none; }
/* no inner scroll — the whole drawer (.task-pane) scrolls as one */
.pane-comments { min-height:60px; padding-right:4px; }
/* one rem scale so nothing compounds: name 13px / meta 12px / body 13.5px */
.comment-box { border:1px solid #e9ecf1; border-radius:10px; background:#f6f8fb;
  padding:13px 14px; margin:0 0 10px; }
.comment-box.comment-agent { background:#f5f3fc; border-color:#e7e2f6; }
.comment-head { display:flex; gap:10px; align-items:flex-start; margin-bottom:9px; }
.comment-avatar { width:28px; height:28px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.64rem; font-weight:600; margin-top:1px; }
.comment-byline { min-width:0; flex:1 1 auto; }
.comment-who { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.comment-who strong { font-size:0.8125rem; font-weight:600; color:#1f2a37; }
.comment-email { font-size:0.75rem; font-weight:400; color:#9aa4b2; }
.comment-when { font-size:0.75rem; color:#9aa4b2; margin-top:2px; }
.comment-body { font-size:0.84rem; font-weight:400; color:#39424e;
  white-space:pre-wrap; line-height:1.55; overflow-wrap:anywhere; }
/* per-comment ⋯ menu */
.comment-menu { position:relative; margin-left:auto; flex:none; }
.comment-menu-btn { border:none; background:none; cursor:pointer; color:#9aa4b2;
  font-size:1.05rem; line-height:1; padding:0 4px; border-radius:5px; }
.comment-menu-btn:hover { background:var(--bg); color:var(--text); }
.comment-menu-pop { position:absolute; top:22px; right:0; z-index:20; background:#fff;
  border:1px solid var(--border); border-radius:8px; box-shadow:0 6px 20px rgba(15,30,50,0.14);
  padding:5px; min-width:140px; }
.comment-menu-pop[hidden] { display:none; }
.comment-del { display:block; width:100%; text-align:left; border:none; background:none;
  cursor:pointer; font-size:0.82rem; color:var(--danger); padding:7px 10px; border-radius:6px; }
.comment-del:hover { background:#fdecec; }
.file-clear { border:none; background:none; cursor:pointer; color:#9aa4b2;
  font-size:0.85rem; line-height:1; padding:2px 4px; border-radius:5px; flex:none; }
.file-clear:hover { color:var(--danger); background:#fdecec; }
.comment-attachment { display:inline-flex; align-items:center; gap:5px; font-size:0.8rem;
  margin-top:8px; color:var(--accent); }
/* full-width in the drawer (Steve, 2026-08-09): a screenshot cropped to a
   150px thumb communicates nothing — show it whole, lightbox for detail */
.attach-thumb { display:block; width:100%; max-width:100%; max-height:none;
  border-radius:8px; border:1px solid #e9ecf1; margin-top:8px; cursor:zoom-in;
  object-fit:contain; }
/* images pasted into markdown bodies get the same treatment */
.comment-body img { display:block; width:100%; max-width:100%; border-radius:8px;
  border:1px solid #e9ecf1; margin-top:8px; }
.lightbox { position:fixed; inset:0; background:rgba(15,18,25,0.82); display:none;
  align-items:center; justify-content:center; z-index:300; cursor:zoom-out; }
.lightbox.open { display:flex; }
.lightbox img { max-width:92vw; max-height:92vh; border-radius:8px;
  box-shadow:0 8px 40px rgba(0,0,0,0.5); }
/* breathing room + divider between the composer and the thread below it */
.pane-comment-form { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid #e6e9ee; }
.pane-comment-form textarea { width:100%; box-sizing:border-box; padding:9px 11px;
  border:1px solid #d5dbe3; border-radius:8px; resize:vertical; font:inherit; }
.pane-form-row { display:flex; align-items:center; gap:10px; margin-top:8px; }
/* native file input is ugly — hide it, drive it from a styled label */
.file-btn { display:inline-flex; align-items:center; gap:6px; font-size:0.78rem;
  color:#3b4656; border:1px solid #d5dbe3; border-radius:7px; padding:5px 11px;
  cursor:pointer; white-space:nowrap; }
.file-btn:hover { border-color:#9db3cc; background:var(--bg); }
.file-btn input[type=file] { display:none; }
.pane-form-row #pane-cfiles-name { font-size:0.76rem; flex:1 1 auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pane-form-row .btn-primary { flex:none; }

/* Claude-down banner — deliberately loud; hides itself when auth recovers */
.claude-down { background:#b3261e; color:#fff; padding:10px 20px; text-align:center;
  font-size:0.92rem; position:sticky; top:0; z-index:400; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.claude-down code { background:rgba(255,255,255,.15); padding:1px 6px; border-radius:5px;
  color:#fff; font-size:0.85em; }
.claude-down b { font-weight:800; }

/* metrics date-range picker (sits with the Weekly|Monthly pills) */
.vt-range { display:flex; gap:6px; align-items:center; }
.vt-range input[type=date] { height:30px; font-size:0.82rem; padding:0 6px;
  border:1px solid var(--border, #d5d9e0); border-radius:8px; }
.vt-range-active input[type=date] { border-color:#2456c8; }
.vt-apply { font-size:0.8rem; padding:3px 12px; }
.vt-clear { text-decoration:none; padding:0 4px; }
.vt-clear:hover { color:#a11; }

/* GrowthBook experiment card in the drawer */
.pane-exp-card { margin-top:8px; border:1px solid #e3e8ef; border-radius:10px; background:#fff;
  padding:10px 12px; }
.exp-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.exp-head a { font-size:0.8rem; color:#2456c8; text-decoration:none; }
.exp-head .chip { display:inline-block; padding:1px 8px; border-radius:999px; font-size:0.72rem; font-weight:700; }
.chip-open { background:#eef1f5; color:#556; } .chip-in-progress { background:#fff3cd; color:#7a5c00; }
.chip-done { background:#e6f2e6; color:#2e6b2e; }
.exp-hypothesis { font-size:0.82rem; color:#4b5563; margin:6px 0; line-height:1.45; }
.exp-results { font-size:0.82rem; margin-bottom:8px; }
.exp-res-row { display:flex; justify-content:space-between; gap:8px; padding:2px 0; }
.exp-slots { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.exp-slot-label { font-size:0.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:#5b6675; margin-bottom:4px; }
.exp-img { width:100%; border:1px solid #e3e8ef; border-radius:8px; cursor:zoom-in;
  margin-bottom:6px; max-height:120px; object-fit:cover; }
.exp-upload { font-size:0.78rem; }

/* --- Task drawer v2 — right-hand, tabbed (Brief | Experiment | Activity) ---
   Scoped under .task-pane-v2 so the Goals drawer (which shares the base
   .task-pane classes) is untouched. */
.task-pane-v2 { left:auto; right:0; width:580px; transform:translateX(100%);
  padding:0; overflow:hidden; }
.task-pane-v2.open { transform:translateX(0); box-shadow:-12px 0 40px rgba(15,26,45,0.14); }
.task-pane-v2 .pane-hd { flex:none; padding:16px 24px 0; border-bottom:1px solid #e6eaf1; }
.pane-hd-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.task-pane-v2 .pane-ticket { font-family:ui-monospace, Menlo, monospace; font-size:0.7rem;
  font-weight:600; letter-spacing:.06em; color:#8a94a6; margin:0; }
.task-pane-v2 .pane-close { width:30px; height:30px; border-radius:6px; font-size:0.95rem; }
.task-pane-v2 .pane-close:hover { background:#f1f4f9; }
.pane-hd-actions { display:flex; align-items:center; gap:8px; }
/* TL;DR — click-time AI summary chip + strip */
.tldr-btn { border:1px solid #d7dee9; background:#fff; color:#5c6779; border-radius:11px;
  font-size:0.64rem; font-weight:700; letter-spacing:.06em; padding:5px 9px; cursor:pointer; }
.tldr-btn:hover { border-color:#2456c8; color:#2456c8; }
.pane-tldr { margin:0 0 12px; padding:9px 14px; background:#f4f7fd;
  border-left:2px solid #2456c8; border-radius:6px;
  font-size:0.84rem; color:#2c3646; line-height:1.55; overflow-wrap:anywhere; }
.pane-tldr[hidden] { display:none; }
.tldr-cap { font-size:0.6rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#8a94a6; margin-bottom:4px; }
.tldr-line b { color:#111826; }
.tldr-line + .tldr-line { margin-top:3px; }
.tldr-loading { color:#8a94a6; animation:tldr-pulse 1.2s ease-in-out infinite; }
@keyframes tldr-pulse { 0%, 100% { opacity:.55; } 50% { opacity:1; } }
.tldr-err { color:#a3372c; }
.task-pane-v2 .pane-title { margin:6px 0 12px; font-size:1.22rem; font-weight:650;
  color:#111826; letter-spacing:-.01em; line-height:1.35; text-wrap:pretty;
  overflow-wrap:anywhere; }
/* header chips — each pill is live: a transparent select sits on top */
.pane-chips { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:14px; }
.pchip { position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:13px; background:#f1f4f9;
  font-size:0.78rem; font-weight:600; color:#4a5567; white-space:nowrap; }
.pchip:hover { filter:brightness(0.965); }
.pchip-sel { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.pchip .pane-status-dot { width:7px; height:7px; }
.pchip-status-open { background:#f1f4f9; color:#4a5567; }
.pchip-status-in-progress { background:#fdf3d6; color:#7a5a05; }
.pchip-status-in-review { background:#f0eafd; color:#6b46c1; }
.pchip-status-blocked { background:#fdeceb; color:#a3372c; }
.pchip-status-done { background:#e2f3e6; color:#2e6b2e; }
.pchip-prio { color:#8a94a6; font-weight:500; }
.pchip-prio-urgent { background:#fde8e8; color:#c0392b; font-weight:600; }
.pchip-prio-high { background:#fdeceb; color:#a3372c; font-weight:600; }
.pchip-prio-medium { background:#e9eefb; color:#3a5bbf; font-weight:600; }
.pchip-prio-low { background:#eef1f5; color:#68727f; font-weight:600; }
.pchip-due { font-weight:400; }
.pchip-due input[type=date] { border:0; background:transparent; font:inherit;
  color:#4a5567; padding:0; width:8.4rem; cursor:pointer; height:auto; }
.pchip-owner { padding:4px 10px 4px 4px; font-weight:400; }
.pchip-avatar { width:19px; height:19px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.56rem; font-weight:700; }
/* milestone progress strip */
.pane-progress { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.pane-progress[hidden] { display:none; }
.pane-progress-track { flex:1; height:4px; border-radius:2px; background:#eef1f6; overflow:hidden; }
.pane-progress-fill { height:100%; background:#2456c8; width:0; transition:width .25s; }
.task-pane-v2 .ms-count { font-size:0.73rem; font-weight:600; color:#5c6779;
  margin:0; white-space:nowrap; }
/* tabs */
.pane-tabs { display:flex; gap:22px; }
.pane-tab { border:0; background:transparent; padding:0 0 12px; margin-bottom:-1px;
  cursor:pointer; font-size:0.85rem; font-weight:600; color:#8a94a6;
  border-bottom:2px solid transparent; }
.pane-tab:hover { color:#4a5567; }
.pane-tab.active { color:#111826; border-bottom-color:#2456c8; }
.pane-tab[hidden] { display:none; }
.tab-badge { margin-left:6px; padding:1px 6px; border-radius:9px; background:#eef1f6;
  font-size:0.67rem; font-weight:600; color:#5c6779; }
.pane-tab.active .tab-badge { background:#e3ecfb; color:#2456c8; }
/* "+" — add an optional tab (Experiment today; the list grows over time) */
.ptab-add-wrap { position:relative; display:flex; align-items:center; }
.ptab-add-wrap[hidden] { display:none; }
.pane-tab-add { border:0; background:transparent; color:#8a94a6; cursor:pointer;
  font-size:1.05rem; line-height:1; padding:0 4px 12px; margin-bottom:-1px; }
.pane-tab-add:hover { color:#2456c8; }
.ptab-menu { position:absolute; top:26px; left:0; z-index:30; background:#fff;
  border:1px solid var(--border); border-radius:8px;
  box-shadow:0 6px 20px rgba(15,30,50,0.14); padding:5px; min-width:150px; }
.ptab-menu[hidden] { display:none; }
.ptab-menu button { display:block; width:100%; text-align:left; border:0; background:none;
  cursor:pointer; font-size:0.84rem; color:#1f2a37; padding:7px 10px; border-radius:6px; }
.ptab-menu button:hover { background:#f1f4f9; }
/* scrolling body + fixed footer */
.task-pane-v2 .pane-body { flex:1 1 auto; overflow-y:auto; padding:22px 24px 32px; }
/* Composer: pinned to the drawer bottom on every tab. Translucent blue panel
   with a blur so the body visibly scrolls BEHIND it rather than stopping at
   a hard edge — it reads as a layer, not another card. */
.pane-footer { position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:12px 24px 14px;
  background:rgba(233, 240, 252, 0.82);
  -webkit-backdrop-filter:saturate(1.7) blur(12px);
  backdrop-filter:saturate(1.7) blur(12px);
  border-top:1px solid rgba(36, 86, 200, 0.14);
  box-shadow:0 -6px 18px rgba(15, 26, 45, 0.06); }
.pane-footer[hidden] { display:none; }
/* the scroller runs the full height UNDER the panel; this padding is what
   lets the last comment/milestone still be scrolled clear of it */
.task-pane-v2 .pane-body { padding-bottom:158px; }
.task-pane-v2 .pane-comment-form textarea { background:#fff; border-color:#cdd9ee; }
.task-pane-v2 .pane-form-row .file-btn { background:#fff; }
.task-pane-v2 .pane-comment-form { margin:0; padding:0; border:0; position:relative; }
.task-pane-v2 .pane-comment-form textarea { resize:none; height:64px; }
.task-pane-v2 .mention-pop { bottom:100%; top:auto; left:0; margin-bottom:6px; }
/* brief: meta grid */
.pane-meta { display:grid; grid-template-columns:104px 1fr; gap:0 16px;
  font-size:0.85rem; margin-bottom:26px; }
.pm-label { padding:10px 0; color:#8a94a6; border-bottom:1px solid #f0f2f6; }
.pm-value { padding:8px 0; color:#111826; border-bottom:1px solid #f0f2f6; min-width:0;
  display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.pm-last { border-bottom:0; }
.pm-select { width:100%; max-width:100%; border:0; background:transparent; font:inherit;
  color:#111826; padding:0; cursor:pointer; height:auto; }
/* bound goal's live sparkline, under the Goal select */
.pane-goal-metric { flex-basis:100%; display:flex; gap:12px; align-items:center;
  padding:6px 0 2px; }
.pane-goal-metric[hidden] { display:none; }
.pane-goal-spark { flex:none; }
.pane-goal-metric-txt { min-width:0; font-size:0.8rem; }
.pgm-now { font-weight:650; color:#111826; }
.pane-goal-metric-name { font-size:0.72rem; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-pane-v2 .pane-source { color:#111826; }
.task-pane-v2 .pane-source a { color:#2456c8; }
/* brief: section labels + context */
.pane-sub2 { font-size:0.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:#8a94a6; margin:0 0 10px; }
.pane-context { border-left:2px solid #e6eaf1; padding-left:16px; margin-bottom:28px; }
.task-pane-v2 .pane-desc { font-size:0.9rem; color:#2c3646; line-height:1.65; margin:0;
  white-space:pre-wrap; max-height:160px; overflow:hidden; text-wrap:pretty;
  overflow-wrap:anywhere; }
.task-pane-v2 .pane-desc.desc-open { max-height:none; }
.task-pane-v2 .pane-desc.desc-empty { color:#98a1b0; }
.pane-more { border:0; background:transparent; padding:6px 0 0; font-size:0.82rem;
  font-weight:600; color:#2456c8; cursor:pointer; }
/* brief: milestones card */
.ms-card { border:1px solid #e6eaf1; border-radius:8px; overflow:hidden; margin-bottom:28px; }
.task-pane-v2 .pane-milestones { margin:0; gap:0; }
.task-pane-v2 .ms-item { gap:12px; padding:11px 14px; border-bottom:1px solid #f0f2f6; }
.task-pane-v2 .ms-item label { gap:12px; font-size:0.87rem; }
.task-pane-v2 .ms-item input { width:16px; height:16px; accent-color:#2456c8; }
.task-pane-v2 .ms-add-form { margin:0; padding:8px 8px 8px 14px; background:#fafbfd;
  gap:10px; align-items:center; }
.task-pane-v2 .ms-add-form input { border:0; background:transparent; font-size:0.85rem;
  padding:6px 10px; }
.task-pane-v2 .ms-add-form input:focus { outline:none; }
.ms-add-btn { border:0; border-radius:6px; background:#eef1f6; color:#3f4a5c;
  font-size:0.8rem; font-weight:600; padding:8px 13px; cursor:pointer; flex:none; }
.ms-add-btn:hover { background:#e3e8f0; }
.task-pane-v2 .pane-danger { border-top:1px solid #f0f2f6; text-align:left;
  padding-top:18px; margin-top:0; }
/* experiment tab */
.exp-select { width:100%; margin-bottom:16px; }
.exp-head2 { display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:14px; }
.exp-head-main { min-width:0; }
.exp-name { font-size:0.95rem; font-weight:600; color:#111826; }
.exp-head-sub { margin-top:4px; }
.exp-head2 a { flex:none; font-size:0.82rem; font-weight:600; color:#2456c8;
  text-decoration:none; }
.exp-block { border:1px solid #e6eaf1; border-radius:8px; padding:14px 16px;
  margin-bottom:16px; }
.exp-block-label { font-size:0.66rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#8a94a6; margin-bottom:8px; }
.task-pane-v2 .exp-hypothesis { margin:0; font-size:0.88rem; line-height:1.6; color:#2c3646; }
.task-pane-v2 .exp-slots { gap:14px; margin-bottom:16px; }
.exp-slot { border:1px solid #e6eaf1; border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; }
.exp-slot:not(.has-img) { border-style:dashed; border-color:#ccd4e0; }
.exp-slot-head { display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; border-bottom:1px solid #f0f2f6; }
.exp-slot-head span { font-size:0.66rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#5c6779; }
.exp-replace { font-size:0.76rem; font-weight:600; color:#2456c8; cursor:pointer; }
.exp-replace input[type=file], .exp-empty input[type=file] { display:none; }
.exp-slot:not(.has-img) .exp-replace { display:none; }
.exp-slot:not(.has-img) .exp-img { display:none; }
.exp-slot.has-img .exp-empty { display:none; }
.task-pane-v2 .exp-img { display:block; width:100%; height:150px; object-fit:cover;
  object-position:top left; background:#fafbfd; border:0; border-radius:0;
  margin:0; max-height:none; }
.exp-empty { flex:1; min-height:150px; background:#fafbfd; color:#5c6779;
  font-size:0.82rem; font-weight:600; cursor:pointer; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.exp-empty:hover { background:#f1f4f9; }
.exp-plus { font-size:1.1rem; }
.exp-hint { font-size:0.74rem; font-weight:400; color:#98a1b0; }
.exp-block-results { background:#fafbfd; margin-bottom:0; }
.exp-disconnect-row { margin-top:16px; padding-top:14px; border-top:1px solid #f0f2f6; }
.exp-disconnect { background:none; border:1px solid #d7dee9; color:#5c6779; border-radius:6px;
  padding:7px 13px; font-size:0.8rem; cursor:pointer; }
.exp-disconnect:hover { border-color:#e6c9c9; color:#b04a4a; background:#fdf5f4; }
/* activity tab — white cards on the drawer body */
.task-pane-v2 .comment-box { background:#fff; border-color:#e6eaf1; border-radius:8px;
  padding:15px 17px; margin-bottom:12px; }
.task-pane-v2 .comment-box.comment-agent { background:#fbfaff; border-color:#e7e2f6; }

/* ---------------------------------------------------------------- Paperclip Team
   Tiles, not rows: each agent is a thing with a personality (model, remit,
   skills), and a table would flatten exactly the part worth reading. */
.key-countdown {
  margin: 0 0 18px; padding: 10px 14px; border-radius: 8px; font-size: .86rem;
  background: #f2f5fa; border: 1px solid #dde4ef; color: #46536b;
}
.key-countdown.warn   { background: #fff8e8; border-color: #f0deb4; color: #7a5b12; }
.key-countdown.urgent { background: #fdeeee; border-color: #f2cccc; color: #8f2f2f; }

/* Tiles differ wildly in height — one agent's brief is a sentence, another's is
   a paragraph — and a grid row is as tall as its tallest tile, which stranded a
   column of white space under the short connect tile. Multi-column packs them
   by height instead, so the next tile starts where the last one ended. (Grid
   masonry would keep reading order, but isn't shipping everywhere yet.) */
.agent-grid {
  columns: 310px;
  column-gap: 16px;
}

.agent-tile {
  /* a tile split across a column break would read as two half-agents */
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border: 1px solid #e2e7f0; border-radius: 12px;
  background: #fff; box-shadow: 0 1px 3px rgba(15, 26, 45, .05);
  /* same hard rule as the board cards: nothing escapes its container */
  min-width: 0; overflow-wrap: anywhere;
}

.at-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.at-id h2 { margin: 0; font-size: 1.02rem; line-height: 1.25; }
.at-role { font-size: .78rem; color: #7b869c; }
.at-status {
  flex: none; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; background: #eef1f6; color: #64708a;
}
.at-status.s-running { background: #e7f6ec; color: #1f7a3d; }
.at-status.s-idle    { background: #eef1f6; color: #64708a; }
.at-status.s-paused  { background: #fff3e0; color: #8a5a12; }
.at-status.s-error, .at-status.s-missing { background: #fdecec; color: #a03434; }

.at-cap { margin: 0; font-size: .84rem; line-height: 1.5; color: #4c586e; }

.at-meta {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  margin: 0; font-size: .8rem;
}
.at-meta dt { color: #8b95a8; }
.at-meta dd { margin: 0; color: #34415a; min-width: 0; overflow-wrap: anywhere; }
.at-meta dd code { font-size: .76rem; background: #f4f6fa; padding: 1px 5px; border-radius: 4px; }

.at-skills { display: flex; flex-wrap: wrap; gap: 5px; }
.at-skill {
  font-size: .7rem; padding: 2px 7px; border-radius: 999px;
  background: #f1f4fa; color: #5a6a86;
}

.at-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid #eef1f6;
}
.at-test { font-size: .75rem; color: #8b95a8; }
.at-test.t-ok { color: #1f7a3d; }
.at-test.t-failed, .at-test.t-error { color: #a03434; }
.at-test.t-pending { color: #9a6b1f; }
/* the state text can run long (pending + detail) — the buttons must never be
   the thing that gives: they keep their width and the text wraps instead */
.at-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.at-actions form { margin: 0; }
.at-actions .btn-sm { white-space: nowrap; }
.at-foot .at-test { min-width: 0; }
.btn-sm {
  font-size: .76rem; padding: 4px 10px; border-radius: 6px;
  border: 1px solid #d8dfea; background: #fff; color: #46536b; cursor: pointer;
}
.btn-sm:hover { background: #f5f7fb; }
.btn-sm.btn-danger { color: #a03434; border-color: #eccfcf; }
.btn-sm.btn-danger:hover { background: #fdf3f3; }

/* the connect tile — visually the odd one out on purpose, it's an action */
.tile-connect {
  background: linear-gradient(180deg, #f7f9fd 0%, #fff 60%);
  border-style: dashed; border-color: #c9d5e8;
}
.tile-plus {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: #e8effb; color: #2456c8; font-size: 1.3rem; line-height: 1; margin-bottom: 8px;
}
.tile-connect-head h2 { margin: 0 0 3px; font-size: 1.02rem; }
.tile-connect-head p { margin: 0; font-size: .8rem; }
.tile-connect select { width: 100%; }
.tile-connect .btn-primary { width: 100%; }
.tile-connect .btn-primary:disabled { opacity: .45; cursor: not-allowed; }

.connect-preview {
  font-size: .78rem; color: #4c586e;
  background: #f4f7fc; border: 1px solid #e0e8f5; border-radius: 8px; padding: 10px 12px;
}
/* the moment a task came from, flashed on arrival then left readable */
mark.ts-flash {
  background: #ffe9a8; border-radius: 4px; padding: 1px 4px;
  animation: tsflash 2.4s ease-out 1;
}
@keyframes tsflash {
  0% { background: #ffc53d; box-shadow: 0 0 0 6px #ffc53d55; }
  100% { background: #ffe9a8; box-shadow: 0 0 0 0 transparent; }
}

.cp-held {
  margin: 10px 0 0; font-size: .75rem; line-height: 1.45; color: #6b7689;
  border-top: 1px dashed #d9e2f0; padding-top: 9px;
}
.cp-held code { font-size: .72rem; background: #eef2f9; padding: 1px 4px; border-radius: 4px; }
.cp-cap { margin: 0 0 8px; line-height: 1.45; }
.cp-plan { margin: 0; padding-left: 16px; display: grid; gap: 3px; line-height: 1.4; }
.cp-plan code { font-size: .72rem; background: #e7edf8; padding: 1px 4px; border-radius: 4px; }
.cp-warn { margin: 8px 0 0; color: #8a5a12; }

.empty-note { margin-top: 18px; }

/* Metric caveat chip — the newest point carries a flag from the compute agent,
   so the number (or its absence) must not read as plain fact. Amber, not red:
   this is "read this with context", not "broken". */
.reg-flag {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  font-size: .7rem; border-radius: 999px; cursor: help;
  background: #fff4e2; color: #8a5a12; border: 1px solid #f0dcb8;
}
.reg-flag:hover, .reg-flag:focus { background: #ffeccd; outline: none; }

/* Suggestion -> existing ticket merge. Full-width row under the actions so the
   picker has room for a real ticket title without squeezing Accept/Dismiss. */
.sugg-merge {
  grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; margin-top: 8px; padding: 10px 12px;
  background: #f4f7fc; border: 1px solid #e0e8f5; border-radius: 8px;
}
.sugg-merge label { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.sugg-merge input[type=text] { min-width: 320px; }
.sugg-merge .merge-hint { font-size: .76rem; }
.sugg-mergebtn { white-space: nowrap; }

/* Unassigned sweep — full-width above the dashboard columns because it belongs
   to nobody, so burying it in a column would hide it from everyone. */
.unassigned-panel { margin-bottom: 18px; border-left: 3px solid #f0b429; }
.unassigned-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.unassigned-head h2 { margin: 0; }
.assign-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.assign-row {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 7px 10px; border-radius: 7px; background: #f7f9fd;
}
.assign-tick { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; flex: none; }
.assign-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.assign-pick { flex: none; max-width: 190px; }
.assign-row.assign-done { background: #eef7f0; }
.assign-ok { flex: none; font-size: .78rem; color: #1f7a3d; }

/* "adopted" = a routine Command Center did not create (the CRO + Metric loops
   predate this page). Neutral grey, not a warning — it's a fact about
   provenance, and it changes what Forget/Disconnect does. */
.at-adopted {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; cursor: help;
  background: #eef1f6; color: #64708a; border: 1px solid #dfe4ee;
}