/* ============================================================
   TeamBoard - design system (dawl. brand reskin)
   Direction: the dawl brand. A deep black canvas (#0D0D12) with a
   vibrant orange accent (#EB522A), Card Surface (#1A1A21) panels,
   Nunito ExtraBold for display/headings and DM Mono for all body
   copy, labels and UI data. The header carries the lowercase dawl
   wordmark with its orange dot terminus.
   Status colors still come from the backend (status_options) and the
   JS picks contrast-aware text, so chips stay legible on dark.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Canvas + elevation (dark) */
  --paper: #0d0d12;          /* primary background (brand Deep Black) */
  --paper-2: #23232d;        /* hover / subtle fill */
  --surface: #15151b;        /* topbar, inputs */
  --surface-raised: #1a1a21; /* cards, menus, raised panels (brand Card Surface) */

  /* Text (brand) */
  --ink: #ffffff;            /* primary text (brand Primary Text) */
  --ink-soft: #a8a8b6;       /* secondary copy (AA on dark) */
  --ink-faint: #82828f;      /* meta / muted labels (AA on dark) */
  --line: #2a2a35;           /* borders & rules (brand) */
  --line-strong: #3a3a45;    /* stronger borders (brand Muted tone) */

  /* Sidebar rail */
  --rail: #0a0a0f;
  --rail-2: #1a1a21;
  --rail-line: #2a2a35;
  --rail-ink: #ffffff;
  --rail-ink-soft: #888899;  /* brand Secondary Text */

  /* Accent: brand orange */
  --accent: #eb522a;          /* Brand Orange - dots, highlights, CTA */
  --accent-strong: #ff6334;   /* brighter orange for hover on solid CTA */
  --accent-text: #ff7d57;     /* orange used as text / icons on dark (AA) */
  --accent-soft: rgba(235, 82, 42, 0.15); /* translucent fills / focus glow */
  --accent-ink: #0d0d12;      /* dark text on solid orange (AA) */

  /* Feedback */
  --danger: #ff6a5e;
  --danger-soft: rgba(242, 85, 77, 0.16);
  --warn: #ffb228;            /* brand PAI Gold reads well as amber on dark */
  --overdue: #ff6a5e;
  --success: #2fd07a;

  /* Typography: Nunito ExtraBold for display, Inter for UI/body, DM Mono reserved for technical metadata only */
  --font-display: "Nunito", system-ui, -apple-system, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Geometry */
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
  --rail-w: 248px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  color-scheme: dark;
}

body {
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
h3, h4 { font-weight: 700; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a { color: var(--accent-text); }

/* Visible focus ring for keyboard users everywhere. */
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Screen-reader-only utility. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

::selection { background: rgba(235, 82, 42, 0.32); color: #fff; }

::placeholder { color: var(--ink-faint); opacity: 1; }

/* Scrollbars (subtle, dark) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 6px;
  border: 2px solid var(--paper);
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
  font-size: 13.5px;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease),
    transform 0.06s var(--ease), box-shadow 0.14s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: #2a2a35; border-color: var(--ink-faint); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.btn-ghost {
  border-color: transparent;
  background: transparent;
}
.btn-ghost:hover { background: var(--paper-2); border-color: transparent; }

.btn-danger {
  color: var(--danger);
  border-color: var(--danger-soft);
}
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }

.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-icon {
  padding: 7px;
  width: 34px; height: 34px;
  justify-content: center;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   Form fields
   ============================================================ */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.input, .select, .textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { resize: vertical; min-height: 72px; line-height: 1.5; }

/* ============================================================
   App layout
   ============================================================ */

#app { height: 100%; }

.layout {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  height: 100vh;
  height: 100dvh;
}

/* ---- Sidebar rail ---- */
.rail {
  background: var(--rail);
  color: var(--rail-ink);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rail-line);
  min-height: 0;
}

.rail-brand {
  display: flex;
  align-items: center;
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--rail-line);
}

/* dawl wordmark lockup (brand: lowercase "dawl" + orange dot terminus) */
.brand-lockup { display: flex; flex-direction: column; gap: 5px; }
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.brand-wordmark .dot { color: var(--accent); }
.brand-product {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rail-ink-soft);
}

.rail-section {
  padding: 16px 12px 4px;
}
.rail-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--rail-ink-soft);
  font-weight: 500;
  padding: 0 10px 8px;
}

.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  color: var(--rail-ink-soft);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.13s var(--ease), color 0.13s var(--ease);
}
.rail-link:hover { background: var(--rail-2); color: var(--rail-ink); }
.rail-link.active { background: rgba(235, 82, 42, 0.15); color: var(--accent-text); }
.rail-link .ico { width: 18px; height: 18px; flex-shrink: 0; }
.rail-link .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: rgba(255,255,255,0.08);
  padding: 1px 7px;
  border-radius: 20px;
}
.rail-link.active .count { background: rgba(235, 82, 42, 0.22); color: var(--accent-text); }

.rail-boards {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 10px;
}

.rail-foot {
  border-top: 1px solid var(--rail-line);
  padding: 12px;
}
.rail-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  color: var(--rail-ink);
  transition: background 0.13s var(--ease);
}
.rail-user:hover { background: var(--rail-2); }
.rail-user .meta { min-width: 0; }
.rail-user .meta .nm {
  font-weight: 500;
  font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-user .meta .em {
  font-size: 11.5px;
  color: var(--rail-ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Main column ---- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--paper);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}
.topbar .crumb {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.topbar h1 { font-size: 25px; line-height: 1.1; }
.topbar .title-wrap { min-width: 0; flex: 1; }
.topbar .title-wrap h1 {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .desc {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .spacer { flex: 1; }
.topbar .actions { display: flex; align-items: center; gap: 9px; }

/* View toggle (Table / Kanban) */
.viewtoggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.viewtoggle button {
  border: none;
  background: transparent;
  padding: 5px 13px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.13s var(--ease), color 0.13s var(--ease);
}
.viewtoggle button.active {
  background: #2f2f3a;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.content {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 24px 28px 80px;
}

/* Live poll indicator */
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}
.live-dot .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-soft);
}
.live-dot.on .pulse { animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(235,82,42,0.45); }
  70% { box-shadow: 0 0 0 7px rgba(235,82,42,0); }
  100% { box-shadow: 0 0 0 0 rgba(235,82,42,0); }
}

/* ============================================================
   Chips: status + priority + avatars
   ============================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip.status { min-width: 84px; justify-content: center; }
.chip.empty {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--ink-faint);
  font-weight: 500;
}

.chip.priority { gap: 6px; background: var(--paper-2); }
.chip.priority .dot {
  width: 8px; height: 8px; border-radius: 50%;
}

.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.avatar.lg { width: 38px; height: 38px; font-size: 14px; }
.avatar.none {
  background: var(--paper-2) !important;
  color: var(--ink-faint);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.owner-cell { display: inline-flex; align-items: center; gap: 8px; }
.owner-cell .avatar.sm {
  width: 26px; height: 26px;
  margin-right: -4px;
  border: 2px solid var(--surface-raised);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 1px 2px rgba(0,0,0,0.22);
}
.owner-cell .nm { font-size: 12px; }

/* Progress bar */
.progress {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 120px;
}
.progress .track {
  flex: 1;
  height: 8px;
  background: var(--paper-2);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.progress .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #ff7d3f 100%);
  border-radius: 20px;
  transition: width 0.4s var(--ease);
}
.progress .fill.done { background: linear-gradient(90deg, #1fa863, var(--success)); }
.progress .pct {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  min-width: 38px;
  text-align: right;
}
.progress.rolled .pct::after {
  content: "auto";
  display: block;
  font-size: 9px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  text-align: right;
  margin-top: -2px;
}

/* ============================================================
   Table view
   ============================================================ */

.board-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.section-group { margin-bottom: 18px; }
.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 7px 8px 7px 0;
  border-left: 5px solid var(--group-color, var(--accent));
  background: linear-gradient(90deg, color-mix(in srgb, var(--group-color, var(--accent)) 14%, transparent), transparent 55%);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.section-head .caret {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: transform 0.18s var(--ease), background 0.13s var(--ease);
}
.section-head .caret:hover { background: var(--paper-2); }
.section-group.collapsed .section-head .caret { transform: rotate(-90deg); }
.section-head .accent-bar {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--group-color, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--group-color, var(--accent)) 18%, transparent);
}
.section-head .section-title { display: flex; flex-direction: column; gap: 1px; }
.section-head h3 { font-size: 17px; color: var(--group-color, var(--accent-text)); }
.section-head .item-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}
.section-head .sec-actions { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.section-group:hover .section-head .sec-actions,
.section-head:focus-within .sec-actions { opacity: 1; }

.section-group.collapsed .grid-wrap { display: none; }

.grid-wrap {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.grid th {
  text-align: left;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1;
}
table.grid td {
  padding: 3px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  vertical-align: middle;
  height: 38px;
}
table.grid td:last-child, table.grid th:last-child { border-right: none; }
table.grid td.col-status { padding: 0; }
table.grid td.col-status .cell-trigger { min-height: 38px; border-radius: 0; justify-content: center; padding: 0; }
table.grid td.col-status .chip.status { width: 100%; min-height: 38px; border-radius: 0; border: 0; }
table.grid tr:last-child td { border-bottom: none; }
table.grid tbody tr.item-row { transition: background 0.1s; }
table.grid tbody tr.item-row:hover { background: var(--paper-2); }
table.grid tbody tr.item-row.has-subs { cursor: default; }

.col-expand { width: 34px; padding-right: 0 !important; }
.col-title { min-width: 240px; }
.col-status { width: 150px; }
.col-owner { width: 150px; }
.col-due { width: 116px; }
.col-priority { width: 120px; }
.col-progress { width: 170px; }
.col-actions { width: 80px; }

.item-title-cell {
  display: flex;
  align-items: center;
  gap: 9px;
}
.item-title-cell .expand-btn {
  border: none; background: transparent; cursor: pointer;
  padding: 3px; border-radius: 4px; color: var(--ink-soft);
  display: grid; place-items: center;
  transition: transform 0.18s var(--ease), background 0.12s;
  flex-shrink: 0;
}
.item-title-cell .expand-btn:hover { background: var(--paper-2); }
.item-title-cell .expand-btn.open { transform: rotate(90deg); }
.item-title-cell .expand-spacer { width: 23px; flex-shrink: 0; }
.item-title-cell .sub-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  background: var(--paper-2);
  padding: 0 6px;
  border-radius: 10px;
  flex-shrink: 0;
}
.item-comment-flag {
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink-faint);
  padding: 2px 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 34px;
  justify-content: center;
}
.item-comment-flag .comment-count { font-family: var(--font-mono); font-size: 10.5px; }
.item-comment-flag.has-comments { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--accent-soft); }
.item-comment-flag:hover { color: var(--accent-text); background: var(--paper-2); }

/* Inline editable cells */
.cell-edit {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  width: 100%;
  cursor: text;
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s;
}
.cell-edit:hover { border-color: var(--line); background: var(--surface); }
.cell-edit:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cell-title { font-weight: 500; }
.cell-saving { opacity: 0.55; }

/* a button that opens a dropdown (status/owner/priority pickers) */
.cell-trigger {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  transition: border-color 0.12s, background 0.12s;
  min-height: 36px;
}
.cell-trigger:hover { border-color: var(--line); background: var(--surface); }

.add-row td { padding: 0 !important; height: auto; }
.add-item-btn {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 9px 12px 9px 45px;
  color: var(--ink-faint);
  cursor: pointer;
  font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  transition: background 0.12s, color 0.12s;
}
.add-item-btn:hover { background: var(--paper-2); color: var(--accent-text); }

/* Sub-item rows */
tr.sub-row td {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  height: 42px;
}
tr.sub-row.hidden { display: none; }
.sub-title-cell {
  display: flex; align-items: center; gap: 9px;
  padding-left: 34px;
}
.sub-title-cell .branch {
  color: var(--line-strong);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
tr.sub-add td { background: var(--paper); }
.add-sub-btn {
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-faint); padding: 6px 12px 6px 60px;
  font-size: 13px; font-weight: 500; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 7px;
}
.add-sub-btn:hover { color: var(--accent-text); }

/* ============================================================
   Dropdown menus (status / owner / priority / generic)
   ============================================================ */
.menu {
  position: fixed;
  z-index: 1000;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 190px;
  max-height: 320px;
  overflow-y: auto;
  animation: menuin 0.13s var(--ease);
}
@keyframes menuin {
  from { opacity: 0; transform: translateY(-5px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-size: 13.5px;
  color: var(--ink);
  transition: background 0.1s;
}
.menu-item:hover, .menu-item.focused { background: var(--paper-2); }
.menu-item.selected { font-weight: 700; }
.menu-item .check { margin-left: auto; color: var(--accent-text); }
.menu-divider { height: 1px; background: var(--line); margin: 5px 4px; }
.menu-head {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); font-weight: 500; padding: 6px 10px 4px;
}

/* ============================================================
   Kanban view
   ============================================================ */
.kanban {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 16px;
  min-height: 300px;
}
.kcol {
  flex: 0 0 296px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 230px);
}
.kcol.drop-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.kcol-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 15px 11px;
  position: sticky; top: 0;
}
.kcol-head .swatch { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.kcol-head .lbl { font-weight: 700; font-size: 13.5px; }
.kcol-head .cnt {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  background: var(--surface-raised);
  padding: 1px 8px; border-radius: 20px;
}
.kcol-body {
  padding: 4px 11px 12px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 60px;
}
.kcard {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 13px;
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: box-shadow 0.14s var(--ease), transform 0.08s var(--ease), border-color 0.14s;
}
.kcard:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: 0.4; }
.kcard.kbd-picked {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.kcard .ktitle { font-weight: 500; font-size: 14px; margin-bottom: 9px; line-height: 1.35; }
.kcard .kmeta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.kcard .kmeta .due {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 4px;
}
.kcard .kmeta .due.overdue { color: var(--overdue); font-weight: 700; }
.kcard .kfoot {
  display: flex; align-items: center; gap: 9px;
  border-top: 1px solid var(--line); padding-top: 9px;
}
.kcard .kbd-move {
  margin-left: auto;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 6px;
  font-size: 11.5px;
  padding: 3px 8px;
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 500;
}
.kcard .kbd-move:hover { border-color: var(--accent); color: var(--accent-text); }
.kcard .sub-mini {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 4px;
}

/* ============================================================
   My items + search results (cross-board lists)
   ============================================================ */
.list-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 22px;
}
.list-card .lc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.list-card .lc-head h3 { font-size: 16px; }
.list-card .lc-head .board-tag {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em;
}
.list-card .lc-head .cnt {
  margin-left: auto; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--ink-faint);
}
.lrow {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.1s;
}
.lrow:last-child { border-bottom: none; }
.lrow:hover { background: var(--paper-2); }
.lrow .lr-main { flex: 1; min-width: 0; }
.lrow .lr-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .lr-sub {
  font-size: 12px; color: var(--ink-faint);
  display: flex; gap: 8px; margin-top: 2px;
}
.lrow .lr-sub .pip {
  font-family: var(--font-mono);
}
.lrow .lr-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.lrow .due-tag {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft);
}
.lrow .due-tag.overdue { color: var(--overdue); font-weight: 700; }
.subitem-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--accent-text);
  background: var(--accent-soft); padding: 1px 6px; border-radius: 4px;
}

/* Filter bar */
.filterbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.filterbar .search-wrap {
  flex: 1; min-width: 200px; position: relative;
  display: flex; align-items: center;
}
.filterbar .search-wrap svg {
  position: absolute; left: 11px; color: var(--ink-faint); pointer-events: none;
}
.filterbar .search-wrap input {
  width: 100%; padding: 8px 11px 8px 36px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.filterbar .search-wrap input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.filterbar select {
  padding: 8px 10px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface);
  font-weight: 500; cursor: pointer; color: var(--ink);
}
.filterbar .clear-filters {
  border: none; background: transparent; color: var(--accent-text);
  cursor: pointer; font-weight: 700; font-size: 13px;
}

/* ============================================================
   Detail panel (drawer): comments + activity
   ============================================================ */
.scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 900;
  animation: fade 0.18s var(--ease);
  backdrop-filter: blur(1.5px);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--surface);
  z-index: 901;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slidein 0.26s var(--ease);
}
@keyframes slidein { from { transform: translateX(100%); } to { transform: none; } }

.drawer-head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}
.drawer-head .top {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;
}
.drawer-head .crumb {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px;
}
.drawer-head h2 { font-size: 22px; line-height: 1.2; }
.drawer-head .close {
  margin-left: auto; flex-shrink: 0;
}
.drawer-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 18px;
}
.drawer-meta .m { display: flex; flex-direction: column; gap: 4px; }
.drawer-meta .m .k {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-faint); font-weight: 500;
}

.drawer-tabs {
  display: flex; gap: 4px; padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}
.drawer-tabs button {
  border: none; background: transparent; cursor: pointer;
  padding: 12px 14px; font-weight: 700; font-size: 13.5px;
  color: var(--ink-soft); border-bottom: 2.5px solid transparent;
  margin-bottom: -1px; transition: color 0.13s, border-color 0.13s;
  display: inline-flex; align-items: center; gap: 7px;
}
.drawer-tabs button.active { color: var(--accent-text); border-bottom-color: var(--accent); }
.drawer-tabs button .tcount {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--paper-2); padding: 0 6px; border-radius: 10px; color: var(--ink-soft);
}

.drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px; min-height: 0; }

/* Comments */
.comment {
  display: flex; gap: 11px; margin-bottom: 18px;
}
.comment .c-main { flex: 1; min-width: 0; }
.comment .c-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 3px; }
.comment .c-author { font-weight: 700; font-size: 13.5px; }
.comment .c-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.comment .c-body { font-size: 13.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; word-break: break-word; }

.comment-compose {
  border-top: 1px solid var(--line);
  padding: 14px 22px;
  background: var(--surface-raised);
  display: flex; flex-direction: column; gap: 10px;
}
.comment-compose textarea {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 10px 12px; resize: vertical; min-height: 60px; background: var(--surface); color: var(--ink);
}
.comment-compose textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.comment-compose .row { display: flex; align-items: center; gap: 10px; }
.comment-compose .hint { font-size: 11.5px; color: var(--ink-faint); }

/* Activity trail */
.act {
  display: flex; gap: 11px; padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.act:last-child { border-bottom: none; }
.act .a-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  margin-top: 6px; flex-shrink: 0;
}
.act .a-main { flex: 1; }
.act .a-text { font-size: 13px; line-height: 1.5; }
.act .a-text b { font-weight: 700; }
.act .a-text .val {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--paper-2); padding: 1px 5px; border-radius: 4px;
}
.act .a-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

/* ============================================================
   Empty states + cards
   ============================================================ */
.empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--ink-soft);
  max-width: 460px;
  margin: 24px auto;
}
.empty .art {
  width: 72px; height: 72px; margin: 0 auto 18px;
  border-radius: 18px;
  background: var(--accent-soft);
  display: grid; place-items: center;
  color: var(--accent-text);
}
.empty h2 { font-size: 23px; margin-bottom: 8px; }
.empty p { font-size: 14px; line-height: 1.6; margin: 0 auto 18px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-raised) 25%, var(--paper-2) 37%, var(--surface-raised) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ============================================================
   Modal (create board, generic dialogs)
   ============================================================ */
.modal-card {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1001;
  width: min(440px, calc(100vw - 40px));
  padding: 26px;
  animation: modalin 0.2s var(--ease);
}
@keyframes modalin {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.modal-card h2 { font-size: 22px; margin-bottom: 6px; }
.modal-card .sub { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 20px; line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.form-error {
  background: var(--danger-soft); color: var(--danger);
  padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px;
  margin-bottom: 14px; font-weight: 500;
}
.form-note {
  background: var(--accent-soft); color: var(--accent-text);
  padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px;
  margin-bottom: 14px; font-weight: 500;
}

/* ============================================================
   Toasts
   ============================================================ */
.toast-wrap {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 1100; display: flex; flex-direction: column; gap: 9px; align-items: center;
}
.toast {
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 11px 18px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 500;
  display: flex; align-items: center; gap: 9px;
  animation: toastin 0.22s var(--ease);
  max-width: 90vw;
}
.toast.error { background: #c43d31; border-color: #c43d31; color: #fff; }
.toast.success .ico { color: var(--success); }
@keyframes toastin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Identity picker / intro stage (shown when opened directly)
   ============================================================ */
.login-stage {
  min-height: 100vh; min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.login-art {
  background: var(--rail);
  color: var(--rail-ink);
  padding: 56px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.login-art::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 18%, rgba(235,82,42,0.30), transparent 46%),
    radial-gradient(circle at 12% 88%, rgba(235,82,42,0.12), transparent 42%);
}
.login-art .brand {
  display: flex; align-items: center; gap: 13px;
  position: relative; z-index: 1;
}
.login-art .pitch { margin-top: auto; position: relative; z-index: 1; }
.login-art .pitch h1 {
  font-size: clamp(32px, 4vw, 46px); color: var(--rail-ink);
  line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 16px;
}
.login-art .pitch h1 em { font-style: normal; color: var(--accent); }
.login-art .pitch p { font-size: 15px; color: var(--rail-ink-soft); max-width: 400px; line-height: 1.6; }
.login-art .feats { display: flex; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.login-art .feats .f { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--rail-ink-soft); }
.login-art .feats .f svg { color: var(--accent); }

.login-panel {
  display: grid; place-items: center;
  padding: 40px; background: var(--paper);
}
.login-box { width: min(380px, 100%); }
.login-box h2 { font-size: 28px; margin-bottom: 6px; }
.login-box .sub { color: var(--ink-soft); margin-bottom: 28px; font-size: 14px; }

@media (max-width: 860px) {
  .login-stage { grid-template-columns: 1fr; }
  .login-art { display: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
.rail-toggle {
  display: none;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: 7px; cursor: pointer;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  color: var(--ink);
}
.rail-backdrop { display: none; }

@media (max-width: 920px) {
  .layout { grid-template-columns: 1fr; }
  .rail {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--rail-w); z-index: 950;
    transform: translateX(-100%);
    transition: transform 0.26s var(--ease);
  }
  .rail.open { transform: none; box-shadow: var(--shadow-lg); }
  .rail-backdrop.show {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,0.6); z-index: 940;
  }
  .rail-toggle { display: inline-flex; }
  .topbar { padding: 13px 16px; gap: 11px; }
  .topbar h1 { font-size: 21px; }
  .content { padding: 18px 16px 80px; }
  .col-priority, .col-progress { display: none; }
}

@media (max-width: 600px) {
  .topbar .desc { display: none; }
  .viewtoggle button span { display: none; }
  .drawer { width: 100vw; }

  /* Header: wrap the action cluster instead of overflowing the viewport. */
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .topbar .actions { flex-wrap: wrap; gap: 6px; margin-left: auto; }

  /* ----------------------------------------------------------------
     Mobile card layout. The Monday-style grid does not fit a phone,
     so each item row becomes a self-contained card: title on top,
     then every field (status, owner, due, priority, progress) as a
     labeled line. Nothing is hidden or clipped; the full row is
     reachable without horizontal scrolling.
     ---------------------------------------------------------------- */
  .grid-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  table.grid { display: block; width: 100%; }
  table.grid thead { display: none; }
  table.grid tbody { display: block; }

  table.grid tbody tr.item-row,
  table.grid tbody tr.sub-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin: 0 0 10px;
    padding: 12px 14px;
    height: auto;
  }
  table.grid tbody tr.item-row:hover { background: var(--surface-raised); }
  table.grid tbody tr.sub-row { margin-left: 14px; }

  /* Reset every cell from table sizing into a flex line. */
  table.grid tbody td {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Line 1: expand toggle (only when there are sub-items) + title + actions. */
  td.col-expand { flex: 0 0 auto; order: 1; }
  td.col-expand:empty { display: none; }
  td.col-title { flex: 1 1 60%; order: 2; min-width: 0; font-size: 15px; font-weight: 600; }
  td.col-actions { flex: 0 0 auto; order: 3; margin-left: auto; justify-content: flex-end; }

  /* Following lines: each field full width with a small label. */
  td.col-status, td.col-owner, td.col-due, td.col-priority, td.col-progress {
    display: flex !important;
    flex: 1 1 100%;
    order: 4;
    gap: 10px;
  }
  td.col-status::before, td.col-owner::before, td.col-due::before,
  td.col-priority::before, td.col-progress::before {
    flex: 0 0 72px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
    align-self: center;
  }
  td.col-status::before { content: "Status"; }
  td.col-owner::before { content: "Owner"; }
  td.col-due::before { content: "Due"; }
  td.col-priority::before { content: "Priority"; }
  td.col-progress::before { content: "Progress"; }

  /* Editors stretch to fill the line after their label. */
  table.grid tbody td .cell-trigger,
  table.grid tbody td .cell-edit { width: auto; flex: 1 1 auto; min-height: 32px; }
  table.grid tbody td .progress { flex: 1 1 auto; min-width: 0; }

  /* Add-item / add-sub stay as plain full-width buttons, not cards. */
  table.grid tbody tr.add-row,
  table.grid tbody tr.sub-add {
    display: block;
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
  }
  table.grid tbody tr.add-row td,
  table.grid tbody tr.sub-add td { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}