/* * Hermes Kanban — dashboard plugin styles. * * All colors reference theme CSS vars so the board reskins with the * active dashboard theme. No hardcoded palette. */ .hermes-kanban { width: 100%; } /* ---- Code/pre reset (theme-immune default) --------------------------- * * * Themes (shipped AND user-installable) routinely paint every and * 
 on the page with an opaque accent-color fill. That's fine for a
 * Markdown doc page; it's wrong for the kanban plugin, which uses 
 * for event payloads, run metadata, log panes, and similar raw-data
 * surfaces that must read as plain text on the board's own background.
 *
 * Rather than play whack-a-mole with theme rules (the pre-#21086 approach
 * was a single ``.hermes-kanban code { background: transparent }`` rule
 * that lost specificity fights in the drawer context), reset EVERY
 * /
 inside the kanban plugin container to transparent with
 * ``!important``, then opt back in ONLY on the class that carries
 * intentional styling (``.hermes-kanban-md code``, the inline code pill
 * inside rendered task-body Markdown).
 *
 * Net effect: any new theme, shipped or third-party, can introduce
 * whatever global code-fill rule it wants — kanban surfaces stay clean
 * unless the theme deliberately targets our internal class names.
 * Regression coverage: #21086 (task-drawer event payloads unreadable
 * across every shipped theme).
 */
.hermes-kanban code,
.hermes-kanban pre,
.hermes-kanban-drawer code,
.hermes-kanban-drawer pre {
  background: transparent !important;
  color: inherit;
}
/* The Markdown renderer intentionally paints a subtle code pill behind
 * inline ```` inside task-body prose — but NOT inside a fenced
 * block (those are a ``
`` with a
 * bare ```` inside, and the pill would double up with the pre
 * background). ``:not()`` scopes this opt-back-in to inline code only.
 *
 * Uses ``color-mix(currentColor ...)`` rather than ``--color-foreground``
 * so the pill renders consistently even when a theme forgets to set
 * ``--color-foreground`` (pre-existing safeguard from #18576).
 */
.hermes-kanban .hermes-kanban-md code:not(.hermes-kanban-md-code *) {
  background: color-mix(in srgb, currentColor 8%, transparent) !important;
}
/* Tighten contrast on the drawer-specific payload class — it lives on
 * its own line in the events list, so matching the muted-foreground
 * color keeps it visually distinct from the event title without
 * screaming for attention. */
.hermes-kanban-event-payload,
.hermes-kanban-drawer .hermes-kanban-event-payload {
  color: var(--color-muted-foreground) !important;
}

/* ---- Columns layout -------------------------------------------------- */

.hermes-kanban-columns {
  display: flex;
  gap: 0.75rem;
  align-items: start;
  overflow-x: auto;
}

.hermes-kanban-column {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--color-card) 85%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem;
  min-height: 200px;
  max-height: calc(100vh - 220px);
  transition: border-color 120ms ease, background-color 120ms ease;
}

.hermes-kanban-column--drop {
  border-color: var(--color-ring);
  background: color-mix(in srgb, var(--color-ring) 8%, var(--color-card));
}

.hermes-kanban-column-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.35rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-foreground);
}

.hermes-kanban-column-label {
  flex: 1;
  letter-spacing: 0.01em;
}

.hermes-kanban-column-count {
  font-variant-numeric: tabular-nums;
  color: var(--color-muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
}

.hermes-kanban-column-add {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-foreground);
  border-radius: var(--radius-sm, 0.25rem);
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 1rem;
  cursor: pointer;
}
.hermes-kanban-column-add:hover {
  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
}

.hermes-kanban-column-sub {
  padding: 0 0.25rem 0.5rem;
  font-size: 0.7rem;
  color: var(--color-muted-foreground);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  margin-bottom: 0.5rem;
}

.hermes-kanban-column-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  overflow-y: auto;
  padding-right: 0.1rem;
  flex: 1;
  min-height: 0;
}

.hermes-kanban-empty {
  padding: 1.5rem 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  border: 1px dashed color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: var(--radius-sm, 0.25rem);
}

/* ---- Status dots ----------------------------------------------------- */

.hermes-kanban-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-muted-foreground);
}
.hermes-kanban-dot-triage   { background: #b47dd6; }  /* lilac — fresh/unspecified */
.hermes-kanban-dot-todo     { background: var(--color-muted-foreground); }
.hermes-kanban-dot-ready    { background: #d4b348; }  /* amber */
.hermes-kanban-dot-running  { background: #3fb97d; }  /* green */
.hermes-kanban-dot-blocked  { background: var(--color-destructive, #d14a4a); }
.hermes-kanban-dot-done     { background: #4a8cd1; }  /* blue */
.hermes-kanban-dot-archived { background: var(--color-border); }

/* ---- Progress pill (N/M child tasks done) --------------------------- */

.hermes-kanban-progress {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.62rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  color: var(--color-muted-foreground);
  letter-spacing: 0.02em;
}
.hermes-kanban-progress--full {
  background: color-mix(in srgb, #3fb97d 22%, transparent);
  border-color: color-mix(in srgb, #3fb97d 45%, transparent);
  color: var(--color-foreground);
}

/* ---- Lanes (per-profile sub-grouping inside Running) ---------------- */

.hermes-kanban-lane {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.25rem 0 0.35rem;
  border-top: 1px dashed color-mix(in srgb, var(--color-border) 70%, transparent);
}
.hermes-kanban-lane:first-child {
  border-top: 0;
  padding-top: 0;
}
.hermes-kanban-lane-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  /* Assignee/profile names are case-sensitive. Do not visually uppercase
   * lane headers, otherwise a valid `analyst` profile appears as `ANALYST`
   * in the WebUI and users may copy the wrong casing back into edits. */
  letter-spacing: 0.02em;
  color: var(--color-muted-foreground);
  padding: 0 0.1rem;
}
.hermes-kanban-lane-name {
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.hermes-kanban-lane-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* ---- Card ------------------------------------------------------------ */

.hermes-kanban-card {
  cursor: grab;
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.hermes-kanban-card:hover {
  box-shadow: 0 1px 0 0 var(--color-ring) inset, 0 0 0 1px var(--color-ring) inset;
}
.hermes-kanban-card:active {
  cursor: grabbing;
  transform: scale(0.995);
}

.hermes-kanban-card-content {
  padding: 0.5rem 0.6rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.hermes-kanban-card-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.hermes-kanban-card-id {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.65rem;
  color: var(--color-muted-foreground);
  letter-spacing: 0.03em;
}

.hermes-kanban-card-title {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-foreground);
  word-break: break-word;
}

.hermes-kanban-card-meta {
  font-size: 0.7rem;
  color: var(--color-muted-foreground);
  gap: 0.55rem;
}

.hermes-kanban-priority {
  font-size: 0.6rem !important;
  padding: 0.05rem 0.3rem !important;
  background: color-mix(in srgb, var(--color-ring) 18%, transparent);
  color: var(--color-foreground);
  border: 1px solid color-mix(in srgb, var(--color-ring) 40%, transparent);
}

.hermes-kanban-tag {
  font-size: 0.6rem !important;
  padding: 0.05rem 0.3rem !important;
}

.hermes-kanban-needs-assignee {
  font-size: 0.6rem !important;
  padding: 0.05rem 0.3rem !important;
  background: color-mix(in srgb, var(--color-warning, #d4b348) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-warning, #d4b348) 45%, var(--color-border));
  color: var(--color-foreground);
}

.hermes-kanban-assignee {
  font-weight: 500;
  color: color-mix(in srgb, var(--color-foreground) 80%, var(--color-muted-foreground));
}
.hermes-kanban-unassigned {
  font-style: italic;
}
.hermes-kanban-ago {
  margin-left: auto;
}

/* ---- Inline create --------------------------------------------------- */

.hermes-kanban-inline-create {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background: color-mix(in srgb, var(--color-card) 70%, transparent);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm, 0.25rem);
}

.hermes-kanban-inline-create > .flex.gap-2:last-child > button:first-of-type {
  flex: 1;
  min-width: 0;
}

/* ---- Drawer (task detail side panel) --------------------------------- */

.hermes-kanban-drawer-shade {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 60;
  display: flex;
  justify-content: flex-end;
}

.hermes-kanban-drawer {
  width: min(var(--hermes-kanban-drawer-width, 640px), 92vw);
  height: 100vh;
  /* Dynamic viewport unit excludes the mobile browser's collapsing chrome
     (URL/nav bars) so the drawer's bottom row stays reachable. Falls back to
     100vh on browsers without dvh support. */
  height: 100dvh;
  max-height: 100dvh;
  background: var(--color-card);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 18px rgba(0, 0, 0, 0.35);
  animation: hermes-kanban-drawer-in 180ms ease-out;
}

@keyframes hermes-kanban-drawer-in {
  from { transform: translateX(100%); opacity: 0.3; }
  to   { transform: translateX(0);    opacity: 1; }
}

.hermes-kanban-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  /* Honor the top safe-area inset (notch) so the task id / close button are
     not clipped on mobile. */
  padding-top: max(0.6rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* On mobile the dashboard shell renders a fixed top bar (min-h-14, hidden at
   the lg breakpoint). The drawer is a body-level z-60 overlay starting at the
   viewport top, so its header would sit behind that bar. Push the header down
   by the bar height (3.5rem) plus the top safe-area inset. */
@media (max-width: 1023px) {
  .hermes-kanban-drawer-head {
    padding-top: calc(3.5rem + env(safe-area-inset-top));
  }
}

.hermes-kanban-drawer-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-muted-foreground);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}
.hermes-kanban-drawer-close:hover { color: var(--color-foreground); }

/* Attachment download trigger — styled as a link, rendered as a