/* emporman — GitHub Primer-derived palette and layout.
   Light is the default; dark applies on prefers-color-scheme and on
   [data-theme="dark"] so an explicit toggle wins in both directions. */

:root {
  --em-canvas: #ffffff;
  --em-canvas-subtle: #f6f8fa;
  --em-canvas-inset: #f6f8fa;
  --em-canvas-overlay: #ffffff;
  --em-border: #d1d9e0;
  --em-border-muted: #d8dee4;
  --em-fg: #1f2328;
  --em-fg-muted: #59636e;
  --em-fg-subtle: #818b98;
  --em-accent: #0969da;
  --em-accent-subtle: #ddf4ff;
  --em-success: #1a7f37;
  --em-success-subtle: #dafbe1;
  --em-danger: #cf222e;
  --em-danger-subtle: #ffebe9;
  --em-danger-border: rgba(207, 34, 46, 0.35);
  --em-done: #8250df;
  --em-brand: #f97316;
  --em-brand-hover: #ea680c;
  --em-brand-fg: #1f2328;
  --em-on-accent: #ffffff;
  --em-col-bg: #f6f8fa;
  --em-col-head: #f6f8fa;
  --em-card-bg: #ffffff;
  --em-shadow: 0 1px 3px rgba(31, 35, 40, 0.12);
  --em-shadow-lg: 0 8px 24px rgba(31, 35, 40, 0.12);
  --em-radius: 6px;
  --em-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --em-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --em-canvas: #0d1117;
    --em-canvas-subtle: #151b23;
    --em-canvas-inset: #010409;
    --em-canvas-overlay: #151b23;
    --em-border: #3d444d;
    --em-border-muted: #2f353d;
    --em-fg: #e6edf3;
    --em-fg-muted: #9198a1;
    --em-fg-subtle: #6e7681;
    --em-accent: #4493f8;
    --em-accent-subtle: #121d2f;
    --em-success: #3fb950;
    --em-success-subtle: #0f2f18;
    --em-danger: #f85149;
    --em-danger-subtle: #3c1618;
    --em-danger-border: rgba(248, 81, 73, 0.4);
    --em-done: #ab7df8;
    --em-brand: #f97316;
    --em-brand-hover: #ea680c;
    --em-brand-fg: #1f2328;
    --em-on-accent: #ffffff;
    --em-col-bg: #0d1117;
    --em-col-head: #0d1117;
    --em-card-bg: #151b23;
    --em-shadow: 0 1px 3px rgba(1, 4, 9, 0.6);
    --em-shadow-lg: 0 8px 24px rgba(1, 4, 9, 0.7);
  }
}

:root[data-theme="dark"] {
  --em-canvas: #0d1117;
  --em-canvas-subtle: #151b23;
  --em-canvas-inset: #010409;
  --em-canvas-overlay: #151b23;
  --em-border: #3d444d;
  --em-border-muted: #2f353d;
  --em-fg: #e6edf3;
  --em-fg-muted: #9198a1;
  --em-fg-subtle: #6e7681;
  --em-accent: #4493f8;
  --em-accent-subtle: #121d2f;
  --em-success: #3fb950;
  --em-success-subtle: #0f2f18;
  --em-danger: #f85149;
  --em-danger-subtle: #3c1618;
  --em-danger-border: rgba(248, 81, 73, 0.4);
  --em-done: #ab7df8;
  --em-brand: #f97316;
  --em-brand-hover: #ea680c;
  --em-brand-fg: #1f2328;
  --em-on-accent: #ffffff;
  --em-col-bg: #0d1117;
  --em-col-head: #0d1117;
  --em-card-bg: #151b23;
  --em-shadow: 0 1px 3px rgba(1, 4, 9, 0.6);
  --em-shadow-lg: 0 8px 24px rgba(1, 4, 9, 0.7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--em-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--em-fg);
  background: var(--em-canvas);
}

a { color: var(--em-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ─────────────────────────────────────────────────────── */
.em-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--em-canvas-inset);
  border-bottom: 1px solid var(--em-border);
}
.em-header__brand {
  font-weight: 600;
  color: var(--em-fg);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Icon only, not the wordmark — colouring both would read as a link. */
.em-header__brand svg { color: var(--em-brand); }
.em-header__spacer { flex: 1; }
.em-header__user { color: var(--em-fg-muted); font-size: 13px; }

/* ── Theme toggle ───────────────────────────────────────────────── */
.em-theme-toggle {
  display: inline-flex;
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius);
  overflow: hidden;
}
.em-theme-toggle__btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: var(--em-fg-muted);
  background: var(--em-canvas-subtle);
  border: none;
  border-right: 1px solid var(--em-border);
  cursor: pointer;
}
.em-theme-toggle__btn:last-child { border-right: none; }
.em-theme-toggle__btn:hover { background: var(--em-border-muted); }
.em-theme-toggle__btn[aria-pressed="true"] {
  color: var(--em-accent);
  background: var(--em-accent-subtle);
  font-weight: 600;
}

/* ── Layout ─────────────────────────────────────────────────────── */
.em-main {
  padding: 12px 16px 24px;
  max-width: none;
  margin: 0;
  width: 100%;
}
.em-main--wide { max-width: none; }

/* Board pages lock to the viewport: the page itself never scrolls, each
   column does. A page-level scrollbar on a kanban board means the column
   headers slide away from the cards they label. */
.em-body--fixed {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.em-body--fixed .em-header { flex: 0 0 auto; }
.em-main--board,
.em-main--table,
.em-main--outline {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  /* `margin: 0 auto` is inherited from .em-main, and an auto cross-axis margin
     on a flex item cancels `align-items: stretch` — the board shrinks to its
     content and centres, leaving dead space either side. Must be reset. */
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 0;
}
/* The table scrolls inside its own box for the same reason the board does. */
.em-main--table .em-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin-bottom: 16px;
}
.em-main--table .em-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.em-page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.em-title { font-size: 20px; font-weight: 600; margin: 0; }
.em-subtitle { color: var(--em-fg-muted); margin: 4px 0 0; }
.em-spacer { flex: 1; }

/* ── Buttons ────────────────────────────────────────────────────── */
.em-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--em-fg);
  background: var(--em-canvas-subtle);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.em-btn:hover { background: var(--em-border-muted); text-decoration: none; }
.em-btn--primary {
  color: var(--em-brand-fg);
  background: var(--em-brand);
  border-color: rgba(31, 35, 40, 0.15);
}
.em-btn--primary:hover { background: var(--em-brand-hover); }
.em-btn--danger { color: var(--em-danger); }
.em-btn--sm { padding: 3px 8px; font-size: 12px; }

/* ── Inputs ─────────────────────────────────────────────────────── */
.em-input, .em-select, .em-textarea {
  width: 100%;
  padding: 5px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--em-fg);
  background: var(--em-canvas);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius);
}
.em-input:focus, .em-select:focus, .em-textarea:focus {
  outline: none;
  border-color: var(--em-accent);
  box-shadow: 0 0 0 3px var(--em-accent-subtle);
}
.em-textarea { min-height: 100px; resize: vertical; font-family: inherit; }
.em-field { margin-bottom: 16px; }
.em-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.em-help { color: var(--em-fg-muted); font-size: 12px; margin-top: 4px; }
.em-errors { color: var(--em-danger); font-size: 12px; margin-top: 4px; }

/* ── Cards / lists ──────────────────────────────────────────────── */
.em-box {
  background: var(--em-canvas);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius);
}
.em-box__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--em-border-muted);
}
.em-box__row:last-child { border-bottom: none; }
.em-box__row:hover { background: var(--em-canvas-subtle); }

/* Reorder handle. Dimmed until the row is hovered so a static list stays
   quiet, but never hidden outright — an affordance you cannot see is one
   nobody finds. */
.em-grab {
  display: flex;
  align-items: center;
  color: var(--em-fg-muted);
  opacity: 0;
  cursor: grab;
  transition: opacity 80ms linear;
}
.em-box__row:hover .em-grab,
.em-grab:focus-visible { opacity: 1; }
.em-grab:active { cursor: grabbing; }
.em-project--ghost { opacity: .4; }
.em-project--drag { background: var(--em-canvas-subtle); }

/* ── Board ──────────────────────────────────────────────────────── */
.em-board {
  display: flex;
  gap: 16px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 16px;
}
.em-col {
  /* Grow to share the width evenly; 300px is the floor before the board
     starts scrolling horizontally instead of squeezing further. */
  flex: 1 1 0;
  min-width: 300px;
  background: var(--em-col-bg);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}
.em-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--em-border);
  background: var(--em-col-head);
  border-radius: var(--em-radius) var(--em-radius) 0 0;
  flex: 0 0 auto;
}
.em-col__name { font-weight: 600; }
.em-col__count {
  color: var(--em-fg-muted);
  background: var(--em-card-bg);
  border: 1px solid var(--em-border);
  border-radius: 20px;
  padding: 0 7px;
  font-size: 12px;
}
.em-col__body {
  padding: 8px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.em-col__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  margin: 4px;
  border: 1px dashed var(--em-border);
  border-radius: var(--em-radius);
  color: var(--em-fg-subtle);
  font-size: 13px;
}
.em-col__foot {
  padding: 8px;
  border-top: 1px solid var(--em-border-muted);
  flex: 0 0 auto;
}
.em-col__add {
  display: block;
  width: 100%;
  padding: 6px 8px;
  text-align: left;
  color: var(--em-fg-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--em-radius);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.em-col__add:hover {
  background: var(--em-canvas);
  border-color: var(--em-border);
  color: var(--em-fg);
  text-decoration: none;
}
.em-col__body.em-drop-active { background: var(--em-accent-subtle); }

.em-card {
  /* Every card is the same height, whatever it contains. Rows that have no
     content still occupy their line, so cards align across columns instead of
     ragging. Titles clamp to two lines rather than pushing the card taller. */
  /* flex: 0 0 auto is load-bearing — the column body is a flex column, and a
     default flex-shrink of 1 collapses a fixed height to nothing. */
  flex: 0 0 auto;
  height: 128px;
  display: flex;
  flex-direction: column;
  background: var(--em-card-bg);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius);
  padding: 8px 12px;
  box-shadow: var(--em-shadow);
  cursor: grab;
  overflow: hidden;
}
.em-card:hover { border-color: var(--em-fg-subtle); }
.em-card:active { cursor: grabbing; }

.em-card__meta {
  flex: 0 0 auto;
  height: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--em-fg-muted);
  font-size: 12px;
  min-width: 0;
}
.em-card__project { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-card__num { flex: 0 0 auto; color: var(--em-fg-subtle); }

.em-card__title {
  flex: 0 0 auto;
  height: 40px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--em-fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.em-card__title:hover { color: var(--em-accent); text-decoration: none; }

.em-card__labels {
  flex: 0 0 auto;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.em-card__people {
  flex: 0 0 auto;
  height: 26px;
  /* Breathing room between the label row and this one — flush pills read as
     a single crowded block. Budgeted for in the card height; see the geometry
     test in tests/test_views.py. */
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: var(--em-fg-muted);
  font-size: 12px;
}
.em-card--ghost { opacity: 0.4; }

/* Human only: a job reserved for a person. The border pulses red so it cannot
   be mistaken for an ordinary card at a glance. The thickening is an inset
   shadow, not a wider border or an outer glow: a wider border would change the
   fixed card geometry, and an outer glow is clipped by the scrolling column. */
.em-card--human,
.em-card--human:hover {
  border-color: var(--em-danger);
  animation: em-human-pulse 1.6s ease-in-out infinite;
}
@keyframes em-human-pulse {
  0%, 100% {
    border-color: var(--em-danger);
    box-shadow: var(--em-shadow), inset 0 0 0 2px var(--em-danger);
  }
  50% {
    border-color: var(--em-danger-border);
    box-shadow: var(--em-shadow), inset 0 0 0 0 var(--em-danger-border);
  }
}
.em-outline__row--human { animation: em-human-stripe 1.6s ease-in-out infinite; }
.em-table__row--human td:first-child {
  animation: em-human-stripe 1.6s ease-in-out infinite;
}
@keyframes em-human-stripe {
  0%, 100% { box-shadow: inset 3px 0 0 var(--em-danger); }
  50% { box-shadow: inset 3px 0 0 var(--em-danger-border); }
}
/* Motion is optional; the signal is not. Without animation it holds steady. */
@media (prefers-reduced-motion: reduce) {
  .em-card--human,
  .em-card--human:hover {
    animation: none;
    box-shadow: var(--em-shadow), inset 0 0 0 1px var(--em-danger);
  }
  .em-outline__row--human,
  .em-table__row--human td:first-child {
    animation: none;
    box-shadow: inset 3px 0 0 var(--em-danger);
  }
}
/* Colour alone is not the signal: a text badge says it too. */
.em-human {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--em-danger);
  background: var(--em-danger-subtle);
  border: 1px solid var(--em-danger-border);
}
.em-card--drag { box-shadow: var(--em-shadow-lg); }

/* ── Labels & badges ────────────────────────────────────────────── */
.em-label {
  display: inline-block;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.em-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--em-on-accent);
}
.em-state--open { background: var(--em-success); }
.em-state--closed { background: var(--em-done); }
.em-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--em-accent);
  color: var(--em-on-accent);
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/* ── Table view ─────────────────────────────────────────────────── */
.em-table-wrap { overflow-x: auto; }
.em-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.em-table th, .em-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--em-border-muted);
  white-space: nowrap;
}
.em-table th {
  background: var(--em-canvas-subtle);
  font-weight: 600;
  color: var(--em-fg-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.em-table tr:hover td { background: var(--em-canvas-subtle); }
.em-table td.em-table__title { white-space: normal; min-width: 320px; }

/* ── Item detail ────────────────────────────────────────────────── */
.em-item-layout { display: grid; grid-template-columns: 1fr 296px; gap: 24px; }
@media (max-width: 900px) { .em-item-layout { grid-template-columns: 1fr; } }
.em-sidebar__section { padding: 12px 0; border-bottom: 1px solid var(--em-border-muted); }
.em-sidebar__section:last-child { border-bottom: none; }
.em-sidebar__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--em-fg-muted);
  margin-bottom: 8px;
}
.em-comment { margin-bottom: 16px; }
.em-comment__head {
  padding: 8px 16px;
  background: var(--em-canvas-subtle);
  border: 1px solid var(--em-border);
  border-bottom: none;
  border-radius: var(--em-radius) var(--em-radius) 0 0;
  font-size: 13px;
  color: var(--em-fg-muted);
}
.em-comment__body {
  padding: 16px;
  border: 1px solid var(--em-border);
  border-radius: 0 0 var(--em-radius) var(--em-radius);
}
.em-markdown > *:first-child { margin-top: 0; }
.em-markdown > *:last-child { margin-bottom: 0; }
.em-markdown pre {
  background: var(--em-canvas-subtle);
  padding: 12px;
  border-radius: var(--em-radius);
  overflow-x: auto;
}
.em-markdown code { font-family: var(--em-mono); font-size: 85%; }
.em-markdown pre code { font-size: 100%; }
.em-markdown table { border-collapse: collapse; }
.em-markdown th, .em-markdown td { border: 1px solid var(--em-border); padding: 6px 12px; }

/* ── Timeline ───────────────────────────────────────────────────── */
.em-timeline { list-style: none; padding: 0; margin: 16px 0 0; }
.em-timeline li {
  padding: 6px 0 6px 16px;
  border-left: 2px solid var(--em-border);
  color: var(--em-fg-muted);
  font-size: 13px;
}

/* ── Tabs ───────────────────────────────────────────────────────── */
.em-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--em-border); margin-bottom: 16px; }
.em-tab {
  padding: 8px 14px;
  color: var(--em-fg-muted);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--em-radius) var(--em-radius) 0 0;
  margin-bottom: -1px;
}
.em-tab:hover { color: var(--em-fg); text-decoration: none; }
.em-tab--active {
  color: var(--em-fg);
  font-weight: 600;
  background: var(--em-canvas);
  border-color: var(--em-border);
  border-bottom: 1px solid var(--em-canvas);
}

/* ── Misc ───────────────────────────────────────────────────────── */
.em-empty { text-align: center; padding: 48px 24px; color: var(--em-fg-muted); }
.em-flash {
  padding: 12px 16px;
  border-radius: var(--em-radius);
  border: 1px solid var(--em-accent);
  background: var(--em-accent-subtle);
  margin-bottom: 16px;
}
.em-search { flex: 1; min-width: 260px; max-width: 620px; }
.em-muted { color: var(--em-fg-muted); }
.em-mono { font-family: var(--em-mono); }
.htmx-request { opacity: 0.6; transition: opacity 0.2s; }

/* ── Picker dropdown ────────────────────────────────────────────────
   A <details> element, so the open/close behaviour is native and needs no
   JavaScript. htmx re-renders the fragment on change; the view re-emits the
   `open` attribute so the menu does not slam shut mid-selection. */
.em-picker { position: relative; }
.em-picker > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding: 4px 8px;
  border-radius: var(--em-radius);
  color: var(--em-fg-muted);
  font-size: 12px;
  font-weight: 600;
}
.em-picker > summary::-webkit-details-marker { display: none; }
.em-picker > summary:hover { color: var(--em-accent); background: var(--em-canvas-subtle); }
.em-picker__menu {
  position: absolute;
  z-index: 20;
  right: 0;
  width: 260px;
  margin-top: 4px;
  background: var(--em-canvas-overlay);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius);
  box-shadow: var(--em-shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.em-picker__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--em-radius);
  cursor: pointer;
  font-size: 13px;
}
.em-picker__row:hover { background: var(--em-canvas-subtle); }
.em-picker__row input { margin: 0; cursor: pointer; }
.em-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.em-person { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; }

/* ── Project switcher ───────────────────────────────────────────────── */
.em-projects {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
  overflow-x: auto;
  /* Explicitly hidden: setting only overflow-x makes overflow-y compute to
     auto, and the 1px line-height overflow then renders a stray vertical
     scrollbar in the top-right corner. */
  overflow-y: hidden;
  scrollbar-width: none;
  flex: 0 0 auto;
}
.em-projects::-webkit-scrollbar { display: none; }
.em-ptab {
  padding: 5px 12px;
  border-radius: var(--em-radius);
  color: var(--em-fg-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.em-ptab:hover { background: var(--em-canvas-subtle); color: var(--em-fg); text-decoration: none; }
.em-ptab--active {
  color: var(--em-fg);
  background: var(--em-canvas-subtle);
  border: 1px solid var(--em-border);
  font-weight: 600;
}
.em-ptab--new { font-size: 16px; line-height: 1; padding: 5px 10px; }

/* ── Search bar ─────────────────────────────────────────────────────── */
.em-searchbar {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  background: var(--em-canvas);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius);
}
.em-searchbar:focus-within {
  border-color: var(--em-accent);
  box-shadow: 0 0 0 3px var(--em-accent-subtle);
}
.em-searchbar__icon { flex: 0 0 auto; margin: 0 8px 0 10px; color: var(--em-fg-muted); }
.em-searchbar__input {
  flex: 1;
  padding: 7px 8px 7px 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--em-fg);
  font: inherit;
  font-size: 14px;
}
.em-searchbar__clear {
  flex: 0 0 auto;
  padding: 0 12px;
  color: var(--em-fg-muted);
  font-size: 18px;
  line-height: 1;
}
.em-searchbar__clear:hover { color: var(--em-fg); text-decoration: none; }
.em-searchbar__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--em-canvas-overlay);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius);
  box-shadow: var(--em-shadow-lg);
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}
.em-searchbar__menu[hidden] { display: none; }
.em-sugg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--em-radius);
  cursor: pointer;
  font-size: 13px;
}
.em-sugg--active, .em-sugg:hover { background: var(--em-accent-subtle); }
.em-sugg__value { font-family: var(--em-mono); color: var(--em-fg); }
.em-sugg__hint { color: var(--em-fg-muted); margin-left: auto; font-size: 12px; }

/* ── Infinite-scroll sentinel ───────────────────────────────────────── */
.em-more {
  padding: 10px;
  text-align: center;
  color: var(--em-fg-subtle);
  font-size: 12px;
}

/* Column scrollbars.
   Styling ::-webkit-scrollbar at all makes Chrome fall back to the classic
   widget — including stepper arrows at each end — unless every part is
   handled. Hence the explicit -button rule. The thumb stays invisible until
   the column is hovered, so a busy board is not striped with grey bars. */
.em-col__body {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
}
.em-col:hover .em-col__body { scrollbar-color: var(--em-border) transparent; }
.em-col__body::-webkit-scrollbar { width: 8px; height: 8px; }
.em-col__body::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.em-col__body::-webkit-scrollbar-corner { background: transparent; }
.em-col__body::-webkit-scrollbar-track { background: transparent; }
.em-col__body::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.em-col:hover .em-col__body::-webkit-scrollbar-thumb { background-color: var(--em-border); }
.em-col__body:hover::-webkit-scrollbar-thumb { background-color: var(--em-fg-subtle); }

/* Same treatment for the board's own horizontal scroll. */
.em-board { scrollbar-width: thin; scrollbar-color: var(--em-border) transparent; }
.em-board::-webkit-scrollbar { height: 10px; }
.em-board::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.em-board::-webkit-scrollbar-track { background: transparent; }
.em-board::-webkit-scrollbar-thumb {
  background-color: var(--em-border);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.em-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.em-card__closed { color: var(--em-done); font-weight: 700; }
.em-card__unassigned { color: var(--em-fg-subtle); font-size: 12px; }

/* ── Project drawer ─────────────────────────────────────────────────── */
.em-drawer { position: relative; }
.em-drawer > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 6px;
  border-radius: var(--em-radius);
  color: var(--em-fg-muted);
}
.em-drawer > summary::-webkit-details-marker { display: none; }
.em-drawer > summary:hover { background: var(--em-canvas-subtle); color: var(--em-fg); }
.em-drawer__scrim {
  position: fixed;
  inset: 0;
  background: rgba(1, 4, 9, 0.5);
  z-index: 40;
}
.em-drawer__panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  z-index: 41;
  background: var(--em-canvas-overlay);
  border-right: 1px solid var(--em-border);
  box-shadow: var(--em-shadow-lg);
  padding: 12px;
  overflow-y: auto;
}
.em-drawer__head {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--em-fg-muted);
  padding: 8px;
}
.em-drawer__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--em-radius);
  color: var(--em-fg);
  font-size: 14px;
}
.em-drawer__item:hover { background: var(--em-canvas-subtle); text-decoration: none; }
.em-drawer__item--active { background: var(--em-accent-subtle); font-weight: 600; }
.em-drawer__item--new { color: var(--em-accent); margin-top: 8px; }

/* ── Column management ──────────────────────────────────────────────── */
.em-col__menu { margin-left: auto; position: relative; }
.em-col__menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--em-radius);
  color: var(--em-fg-muted);
  font-weight: 700;
  letter-spacing: 1px;
}
.em-col__menu > summary::-webkit-details-marker { display: none; }
.em-col__menu > summary:hover { background: var(--em-border-muted); color: var(--em-fg); }
.em-menu-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}
.em-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.em-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.em-swatch--on { border-color: var(--em-fg); }
.em-addcol {
  flex: 0 0 52px;
  align-self: flex-start;
  margin-top: 0;
}
.em-addcol > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 42px;
  border: 1px dashed var(--em-border);
  border-radius: var(--em-radius);
  color: var(--em-fg-muted);
  font-size: 18px;
}
.em-addcol > summary::-webkit-details-marker { display: none; }
.em-addcol > summary:hover { color: var(--em-fg); border-color: var(--em-fg-subtle); }

/* ── Markdown editor ────────────────────────────────────────────────── */
.em-editor {
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius);
  background: var(--em-canvas);
}
.em-editor__tabs {
  display: flex;
  gap: 4px;
  padding: 6px 6px 0;
  border-bottom: 1px solid var(--em-border);
  background: var(--em-canvas-subtle);
  border-radius: var(--em-radius) var(--em-radius) 0 0;
}
.em-editor__tab {
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--em-radius) var(--em-radius) 0 0;
  background: transparent;
  color: var(--em-fg-muted);
  cursor: pointer;
  font-family: inherit;
}
.em-editor__tab--active {
  background: var(--em-canvas);
  border-color: var(--em-border);
  color: var(--em-fg);
  font-weight: 600;
  margin-bottom: -1px;
}
.em-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--em-border-muted);
}
.em-tool {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--em-radius);
  background: transparent;
  color: var(--em-fg-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
.em-tool:hover { background: var(--em-canvas-subtle); color: var(--em-fg); border-color: var(--em-border); }
.em-editor__area { padding: 8px; }
.em-editor__area textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border: none;
  outline: none;
  background: transparent;
  color: var(--em-fg);
  font-family: var(--em-mono);
  font-size: 13px;
  line-height: 1.6;
}
.em-editor__preview { padding: 12px; min-height: 140px; }
.em-editor__foot {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-top: 1px solid var(--em-border-muted);
}

/* ── AI assignment ──────────────────────────────────────────────────── */
.em-ai { display: flex; align-items: center; gap: 6px; }
.em-ai__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  /* Full-contrast text on a plain bordered pill. Tinted text at 11px was the
     unreadable part; the colour now lives in the spark, not the letters. */
  color: var(--em-fg);
  background: transparent;
  border: 1px solid var(--em-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}
.em-card:hover .em-ai__chip { border-color: var(--em-fg-subtle); }
.em-ai__spark { flex: 0 0 auto; color: var(--em-done); font-size: 13px; }
.em-ai__error {
  color: var(--em-danger);
  font-size: 12px;
  margin-top: 6px;
}
.em-ai__grid { display: grid; gap: 8px; }
.em-ai__row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.em-markdown li.em-task { list-style: none; margin-left: -1.2em; }
.em-markdown li.em-task input { margin-right: 6px; }

/* ── Modal ──────────────────────────────────────────────────────────────
   A <details> whose panel is position: fixed. Fixed positioning is the point:
   an absolutely-positioned dropdown inside .em-board gets clipped by that
   container's overflow, which is how the add-column panel ended up rendered
   off the right edge of the screen. */
.em-modal { display: inline-block; }
.em-modal > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.em-modal > summary::-webkit-details-marker { display: none; }
.em-modal__scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(1, 4, 9, 0.6);
}
.em-modal__panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 61;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 20px;
  background: var(--em-canvas-overlay);
  border: 1px solid var(--em-border);
  border-radius: 12px;
  box-shadow: var(--em-shadow-lg);
  text-align: left;
}
.em-modal__panel--narrow { width: min(420px, calc(100vw - 32px)); }
.em-modal__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}
.em-modal__foot {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--em-border-muted);
}
.em-modal__close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--em-fg-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.em-modal__close:hover { color: var(--em-fg); }

/* ── Dependencies ───────────────────────────────────────────────── */
.em-blocked {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--em-danger);
  background: var(--em-danger-subtle);
  border: 1px solid var(--em-danger-border);
}
.em-dep__list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.em-dep__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  min-width: 0;
}
.em-dep__row a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A finished blocker is struck through rather than hidden: "no blockers" and
   "all blockers done" are different facts and the panel should show which. */
.em-dep__row--done a { text-decoration: line-through; color: var(--em-fg-muted); }
.em-dep__x {
  border: 0;
  background: none;
  color: var(--em-fg-muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
}
.em-dep__x:hover { color: var(--em-danger); }
.em-dep__add { display: flex; gap: 6px; margin-top: 8px; }
.em-dep__add input {
  flex: 1;
  min-width: 0;
  padding: 3px 6px;
  border-radius: var(--em-radius);
  border: 1px solid var(--em-border);
  background: var(--em-canvas-subtle);
  color: var(--em-fg);
  font: inherit;
  font-size: 13px;
}
.em-dep__error {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: var(--em-radius);
  font-size: 12px;
  color: var(--em-danger);
  background: var(--em-danger-subtle);
  border: 1px solid var(--em-danger-border);
}

/* Column headers are the drag handle for reordering columns. Discoverability
   matters more than subtlety here: the move buttons in the column menu were
   invisible enough that they read as a missing feature. */
.em-col__head--drag { cursor: grab; }
.em-col__head--drag:active { cursor: grabbing; }
.em-col--ghost { opacity: .35; }
.em-col--drag { box-shadow: var(--em-shadow-lg); }

/* ── Outline ─────────────────────────────────────────────────────────
   A programme is a tree and a flat list of a thousand rows cannot say where
   you are in it. The five columns hold their positions at every depth:
   indentation is applied to the title cell only, so the numbers on the right
   read down a straight line instead of stepping sideways with the nesting. */
.em-outline-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 8px 2px 12px;
  font-size: 13px;
  color: var(--em-fg-muted);
}
.em-outline-totals strong {
  color: var(--em-fg);
  font-variant-numeric: tabular-nums;
}
.em-outline-totals__mode { font-style: italic; }

/* The status visibility menu sits in the totals row, which is the one place
   on the page that already talks about how much of the board is on screen. */
.em-outline-statuses { position: relative; }
.em-outline-statuses > .em-picker > summary { gap: 6px; font-size: 12px; }
.em-outline-statuses .em-picker__menu { width: 280px; }
.em-outline-statuses .em-picker__row { gap: 8px; }
.em-outline-statuses .em-help { padding: 2px 8px 6px; }
.em-outline-statuses .em-btn { margin: 0 8px 4px; }
.em-outline-statuses__note { font-style: italic; }

.em-main--outline .em-outline-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin-bottom: 16px;
  padding: 0;
}

/* Same scrollbar treatment as a board column, and for the same reason: the
   classic widget is a wide grey rail with stepper arrows, and on a page whose
   whole job is a long list it runs the full height of the screen. Every part
   has to be named — styling ::-webkit-scrollbar at all makes Chrome fall back
   to the classic widget for anything left unstyled. The gutter is reserved
   whether or not a thumb is drawn, so the columns on the right do not shift
   sideways when the bar fades in. */
.em-main--outline .em-outline-wrap {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
}
.em-main--outline .em-outline-wrap:hover { scrollbar-color: var(--em-border) transparent; }
.em-outline-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.em-outline-wrap::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.em-outline-wrap::-webkit-scrollbar-corner { background: transparent; }
.em-outline-wrap::-webkit-scrollbar-track { background: transparent; }
.em-outline-wrap::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.em-outline-wrap:hover::-webkit-scrollbar-thumb { background-color: var(--em-border); }
.em-outline-wrap::-webkit-scrollbar-thumb:hover { background-color: var(--em-fg-subtle); }

.em-outline__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 128px 56px 132px;
  gap: 12px;
  align-items: center;
}
.em-outline__head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 12px;
  background: var(--em-canvas-subtle);
  border-bottom: 1px solid var(--em-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--em-fg-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.em-outline,
.em-outline__children { list-style: none; margin: 0; padding: 0; }
.em-outline__row {
  padding: 6px 12px;
  border-bottom: 1px solid var(--em-border-muted);
  font-size: 13px;
}
.em-outline__row:hover { background: var(--em-canvas-subtle); }
.em-outline__row--closed .em-outline__title { color: var(--em-fg-muted); }

/* Type is carried by weight, not by a badge on every row. 846 pills reading
   "Task" would be 846 pieces of noise saying what the indentation says. */
.em-outline__row--initiative { font-size: 14px; }
.em-outline__row--initiative .em-outline__title { font-weight: 600; }
.em-outline__row--epic .em-outline__title { font-weight: 500; }

.em-outline__main { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.em-outline__main--d1 { padding-left: 22px; }
.em-outline__main--d2 { padding-left: 44px; }
.em-outline__text { min-width: 0; }
.em-outline__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.em-outline__title { color: var(--em-fg); text-decoration: none; }
.em-outline__title:hover { color: var(--em-accent); text-decoration: underline; }
.em-outline__num { font-variant-numeric: tabular-nums; }
.em-outline__done { color: var(--em-done); font-size: 12px; }

.em-outline__type {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--em-border);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--em-fg-muted);
}

.em-outline__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  color: var(--em-fg-subtle);
  margin-bottom: 2px;
}
.em-outline__crumbs a { color: inherit; text-decoration: none; }
.em-outline__crumbs a:hover { color: var(--em-accent); text-decoration: underline; }
.em-outline__crumb-sep { color: var(--em-border); }

.em-outline__toggle {
  flex: 0 0 auto;
  width: 16px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--em-fg-muted);
  cursor: pointer;
}
.em-outline__toggle--leaf { cursor: default; }
.em-outline__toggle:hover { color: var(--em-fg); }
.em-outline__chevron { transition: transform .12s ease-in-out; }
.em-outline__toggle[aria-expanded="true"] .em-outline__chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .em-outline__chevron { transition: none; }
}

.em-outline__status { display: flex; align-items: center; gap: 6px; min-width: 0; }
.em-outline__status span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.em-outline__progress { display: flex; align-items: center; gap: 8px; }
.em-outline__bar {
  flex: 1 1 auto;
  height: 6px;
  min-width: 0;
  border-radius: 999px;
  background: var(--em-border-muted);
  overflow: hidden;
}
.em-outline__bar-fill { display: block; height: 100%; background: var(--em-success); }
.em-outline__progress-text {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--em-fg-muted);
  font-variant-numeric: tabular-nums;
}
.em-outline__days { text-align: right; color: var(--em-fg-muted); }

.em-outline__people {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

/* Below this width the five columns stop being readable, so they stack rather
   than compress into unreadable slivers. */
@media (max-width: 900px) {
  .em-outline__grid { grid-template-columns: minmax(0, 1fr) 110px; }
  .em-outline__head span:nth-child(n + 3),
  .em-outline__progress,
  .em-outline__days,
  .em-outline__people { display: none; }
}