/* 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-done: #8250df;
  --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-done: #ab7df8;
    --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-done: #ab7df8;
  --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;
}
.em-header__spacer { flex: 1; }
.em-header__user { color: var(--em-fg-muted); font-size: 13px; }

/* ── 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 {
  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: #ffffff;
  background: var(--em-success);
  border-color: rgba(31, 35, 40, 0.15);
}
.em-btn--primary:hover { background: #1c8139; filter: brightness(1.05); }
.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; }
.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: #ffffff;
}
.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: #fff;
  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: #d1242f;
  background: rgba(209, 36, 47, .12);
  border: 1px solid rgba(209, 36, 47, .35);
}
.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: #d1242f; }
.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: #d1242f;
  background: rgba(209, 36, 47, .12);
  border: 1px solid rgba(209, 36, 47, .35);
}

/* 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: 0 8px 24px rgba(0, 0, 0, .4); }