/* ════════════════════════════════════════════════════════════
   THE PILE + ROADMAP — work item tracker styling
   Mulch-themed, playful but functional. Uses shared.css tokens.
   ════════════════════════════════════════════════════════════ */

#view-pile {
  flex: 1;
  overflow: auto;
  background: var(--bg);
}

.pile-wrap {
  padding: 16px 20px 80px;
  max-width: 1800px;
  margin: 0 auto;
}

/* ── Page head ────────────────────────────────────────── */
.pile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.pile-head-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
  margin: 0;
}
.pile-head-sub {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font);
  margin-top: 3px;
}
.pile-head-right {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
#pile-archive-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
}
.pile-archive-count {
  font-family: var(--font);
  font-size: 10px;
  color: var(--text-faint);
  margin-left: 2px;
}
.pile-head-right .btn.is-active .pile-archive-count { color: inherit; }

/* ── Toolbar: type tabs + filters ─────────────────────── */
.pile-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pile-tabs {
  display: flex;
  gap: 2px;
}
.pile-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
  margin-bottom: -1px;
}
.pile-tab:hover { color: var(--text); }
.pile-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.pile-tab-count {
  font-family: var(--font);
  font-size: 10px;
  color: var(--text-faint);
  margin-left: 3px;
}
.pile-tab.active .pile-tab-count { color: var(--accent); }

.pile-filters {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-bottom: 6px;
}
.pile-filters input,
.pile-filters select {
  padding: 5px 9px;
  font-size: 11px;
  font-family: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  outline: none;
}
.pile-filters input { min-width: 200px; }
.pile-filters input:focus,
.pile-filters select:focus { border-color: var(--accent); }

/* ── List / Roadmap toggle (Features tab only) ────────── */
.pile-viewtoggle {
  display: inline-flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
  gap: 2px;
}
.pile-viewtoggle-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.pile-viewtoggle-btn:hover { color: var(--text); }
.pile-viewtoggle-btn.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* ── The list ─────────────────────────────────────────── */
.pile-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pile-empty {
  padding: 28px 8px;
  text-align: center;
  color: var(--text-faint);
  font-size: 11px;
  font-style: italic;
}

.pile-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
  transition: border-color .15s, background .15s;
}
.pile-row:hover {
  border-color: var(--accent);
  background: var(--surface);
}
.pile-card-type {
  font-size: 15px;
  line-height: 1.2;
  flex-shrink: 0;
}
.pile-card-title {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.pile-row .pile-meta-tag,
.pile-row .pile-meta-age,
.pile-row .pile-card-owner {
  flex-shrink: 0;
}

/* Roadmap bucket drives the row's visual weight: Now shouts, Later recedes. */
.pile-row.bucket-now {
  background: rgba(192, 57, 43, 0.07);
  border-color: rgba(192, 57, 43, 0.3);
}
.pile-row.bucket-now:hover {
  background: rgba(192, 57, 43, 0.12);
  border-color: rgba(192, 57, 43, 0.5);
}
.pile-row.bucket-next {
  background: rgba(184, 134, 11, 0.05);
  border-color: rgba(184, 134, 11, 0.25);
}
.pile-row.bucket-next:hover {
  background: rgba(184, 134, 11, 0.1);
  border-color: rgba(184, 134, 11, 0.4);
}
.pile-row.bucket-later { opacity: 0.6; }
.pile-row.bucket-later:hover { opacity: 0.95; }
.pile-row.bucket-none { opacity: 0.92; }

/* Archive rows read as done, not as work. */
.pile-row.is-closed { opacity: .72; }
.pile-row.is-closed .pile-card-title {
  text-decoration: line-through;
  color: var(--text-faint);
}
.pile-row.is-closed:hover { opacity: 1; }

.pile-card-owner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  color: #fff;
  letter-spacing: 0;
}
.pile-card-owner.unassigned {
  background: var(--border);
  color: var(--text-faint);
}
/* Colored owner names — used in comments. */
.pile-owner-name { font-weight: 700; /* color set inline */ }
.pile-owner-name-none {
  color: var(--text-faint);
  font-weight: 400;
  font-style: italic;
}

/* ── Meta tags ────────────────────────────────────────── */
.pile-meta-tag {
  font-family: var(--font);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 100px;
  background: var(--surface);
  color: var(--text-dim);
  border: 1px solid var(--border);
  white-space: nowrap;
  font-weight: 600;
}
.pile-meta-size { background: var(--surface2); color: var(--text); font-weight: 800; padding: 1px 8px; }
.pile-meta-shot { background: var(--surface2); padding: 1px 5px; }
.pile-meta-comments { background: var(--surface2); font-family: var(--font); }
.pile-meta-age {
  font-family: var(--font);
  font-size: 10px;
  color: var(--text-faint);
  margin-left: 2px;
}
.pile-meta-bucket {
  font-weight: 700;
  font-family: inherit;
}
.pile-meta-bucket-now   { background: rgba(192,57,43,.12); color: var(--red); border-color: rgba(192,57,43,.3); }
.pile-meta-bucket-next  { background: rgba(184,134,11,.14); color: var(--yellow); border-color: rgba(184,134,11,.35); }
.pile-meta-bucket-later { background: rgba(59,130,246,.12); color: #3b82f6; border-color: rgba(59,130,246,.3); }

/* ── Category (area of the business) ──────────────────────
   The roadmap buckets already own red / amber / blue, so categories are
   deliberately pitched away from that trio. The leading dot also gives them a
   different silhouette to the bucket chips they sit next to, so you can scan
   for an area without reading a single word. Backgrounds are translucent
   tints of the same hue, which keeps them legible on both themes. */
.pile-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .01em;
}
.pile-cat::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pile-cat-seo       { background: rgba(33,110,58,.13);  color: #216e3a; border-color: rgba(33,110,58,.32); }
.pile-cat-marketing { background: rgba(178,56,115,.12); color: #b23873; border-color: rgba(178,56,115,.30); }
.pile-cat-ops       { background: rgba(159,81,50,.13);  color: #9f5132; border-color: rgba(159,81,50,.32); }
.pile-cat-support   { background: rgba(19,105,105,.13); color: #136969; border-color: rgba(19,105,105,.32); }
.pile-cat-product   { background: rgba(107,77,196,.13); color: #6b4dc4; border-color: rgba(107,77,196,.30); }
.pile-cat-finance   { background: rgba(105,105,36,.15); color: #696924; border-color: rgba(105,105,36,.34); }
.pile-cat-data      { background: rgba(92,111,138,.15); color: #5c6f8a; border-color: rgba(92,111,138,.34); }

/* Dark mode: the muted earth tones go muddy on a dark ground, so lift them. */
.mm.dark .pile-cat-seo       { color: #6fbf8b; }
.mm.dark .pile-cat-marketing { color: #e089b0; }
.mm.dark .pile-cat-ops       { color: #d9906c; }
.mm.dark .pile-cat-support   { color: #5cc4c4; }
.mm.dark .pile-cat-product   { color: #a892e8; }
.mm.dark .pile-cat-finance   { color: #c0c05e; }
.mm.dark .pile-cat-data      { color: #9aabc7; }

/* ── Inline quick-add ─────────────────────────────────── */
.pile-quick-add { margin-top: 2px; }
.pile-quick-add-input {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--border-light);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, background .15s;
}
.pile-quick-add-input:hover { border-color: var(--accent); }
.pile-quick-add-input:focus {
  border-style: solid;
  border-color: var(--accent);
  background: var(--surface);
}
.pile-quick-add-input::placeholder {
  color: var(--text-faint);
  font-style: italic;
}
.pile-quick-add-input:disabled { opacity: .5; cursor: wait; }
.pile-quick-add-hint {
  padding: 8px 10px;
  font-size: 10px;
  color: var(--text-faint);
  font-style: italic;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  margin-top: 2px;
}

/* ── Row hover quick-actions ──────────────────────────── */
.pile-row-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
  box-shadow: var(--shadow-sm);
  z-index: 5;
}
.pile-row:hover .pile-row-actions,
.rm-card:hover .pile-row-actions {
  display: flex;
}
.pile-row-action-btn {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: var(--text-dim);
  transition: background .12s, color .12s, transform .08s;
  padding: 0;
}
.pile-row-action-btn:hover { background: var(--surface2); transform: scale(1.1); }
.pile-row-action-btn:active { transform: scale(0.92); }
.pile-action-ship:hover   { background: var(--green-dim); color: var(--green); }
.pile-action-reopen:hover { background: var(--green-dim); color: var(--green); }
.pile-action-delete:hover { background: var(--red-dim); color: var(--red); }
.pile-action-reassign:hover { background: rgba(59,130,246,.12); color: #3b82f6; }
.pile-action-bucket:hover { background: var(--yellow-dim); color: var(--yellow); }

/* Reassign popover */
.pile-reassign-popover {
  position: absolute;
  top: 30px;
  right: 4px;
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px;
  box-shadow: var(--shadow-md);
  z-index: 6;
}
.pile-reassign-popover .pile-card-owner {
  width: 22px;
  height: 22px;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .1s;
}
.pile-reassign-popover .pile-card-owner:hover { transform: scale(1.12); }
.pile-reassign-popover .pile-card-owner.is-current { border-color: var(--text); }

/* Bucket popover (vertical menu, same anchor as reassign) */
.pile-bucket-popover {
  position: absolute;
  top: 30px;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  box-shadow: var(--shadow-md);
  z-index: 6;
  min-width: 110px;
}
.pile-bucket-btn {
  padding: 5px 10px;
  font-size: 11px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
  white-space: nowrap;
  font-family: inherit;
  color: var(--text);
  font-weight: 600;
  transition: background .1s;
}
.pile-bucket-btn:hover { background: var(--surface2); }
.pile-bucket-btn.is-current { background: var(--surface2); }
.pile-bucket-btn-now { color: var(--red); }
.pile-bucket-btn-next { color: var(--yellow); }
.pile-bucket-btn-later { color: #3b82f6; }
.pile-bucket-btn-clear { color: var(--text-faint); font-weight: 500; border-top: 1px solid var(--border); margin-top: 2px; padding-top: 6px; }

/* ════════════════════════════════════════════════════════
   ROADMAP — Now / Next / Later columns, shown inside the
   Pile view when the Features tab is in Roadmap mode.
   ════════════════════════════════════════════════════════ */
.rm-hint {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font);
  margin-bottom: 10px;
}
.rm-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: start;
}
.rm-col {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, background .15s;
}
.rm-col.drop-target {
  border-color: var(--accent);
  background: var(--surface);
}
.rm-col-unbucketed { border-top: 3px solid var(--text-faint); }
.rm-col-now        { border-top: 3px solid var(--red); }
.rm-col-next       { border-top: 3px solid var(--yellow); }
.rm-col-later      { border-top: 3px solid #3b82f6; }
.rm-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.rm-col-name {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text);
}
.rm-col-count {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0 7px;
}
.rm-col-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  flex: 1;
  min-height: 120px;
}
.rm-empty {
  padding: 20px 8px;
  text-align: center;
  color: var(--text-faint);
  font-size: 11px;
  font-style: italic;
}

/* Roadmap cards — richer than pile rows: they carry the bet and the pitch. */
.rm-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  cursor: grab;
  transition: border-color .15s, box-shadow .15s;
}
.rm-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.rm-card:active { cursor: grabbing; }
.rm-card.dragging { opacity: .4; }
.rm-card-head {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.rm-card-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.rm-card-trailing {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.rm-card-bet {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  line-height: 1.4;
  word-break: break-word;
}
.rm-card-desc {
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
  word-break: break-word;
}
.rm-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
}

@media (max-width: 1100px) {
  .rm-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rm-cols { grid-template-columns: 1fr; }
  .pile-filters input { min-width: 0; flex: 1; }
}

/* ════════════════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════════════════ */

/* ── Item modal ───────────────────────────────────────── */
#modal-pile-item .modal { max-width: 720px; width: 720px; }
.pile-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pile-modal-icon {
  font-size: 28px;
  line-height: 1;
  margin-top: 2px;
}
.pile-modal-title-input {
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0;
  outline: none;
  font-family: inherit;
}
.pile-modal-title-input::placeholder { color: var(--text-faint); font-weight: 500; }
.pile-modal-meta {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font);
  margin-top: 4px;
}
.pile-url-context {
  font-family: var(--font);
  font-size: 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: var(--radius);
  color: var(--text-dim);
  word-break: break-all;
}

/* ── Comments ─────────────────────────────────────────── */
.pile-comments {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.pile-comments-head h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.pile-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  max-height: 280px;
  overflow-y: auto;
}
.pile-comment {
  background: var(--surface2);
  border-radius: var(--radius);
  padding: 8px 12px;
}
.pile-comment-head {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font);
  margin-bottom: 2px;
}
.pile-comment-head .pile-owner-name { font-size: 11px; }
.pile-comment-body {
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.pile-comments-empty {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
  padding: 8px 0;
}
.pile-comments-add {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 6px;
  align-items: start;
}

/* ── Screenshot display ───────────────────────────────── */
.pile-screenshot-display {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  padding: 6px;
  max-width: 100%;
  overflow: hidden;
}
.pile-screenshot-display img {
  max-width: 100%;
  display: block;
  border-radius: 4px;
}

/* ── CSV import modal ─────────────────────────────────── */
.pi-import-help {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
  line-height: 1.5;
}
.pi-import-help code {
  background: var(--surface2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-family: var(--font);
}
.pi-import-help ul {
  margin: 6px 0 0 18px;
  font-size: 11px;
}
.pi-import-help li { margin: 2px 0; }
.pi-import-preview {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-dim);
}
.pi-import-preview.ok { color: var(--green); }
.pi-import-preview.warn { color: var(--orange); }
.pi-import-preview ul {
  margin: 6px 0 0 18px;
  font-size: 11px;
  max-height: 120px;
  overflow-y: auto;
}

/* ── Floating create pill (FAB) ───────────────────────── */
#pile-fab {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
}
.pile-fab-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: var(--shadow-md);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.pile-fab-btn:hover {
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 6px 18px rgba(44,36,22,.2);
  background: var(--surface2);
}
.pile-fab-btn:active { transform: scale(.95); }
.pile-fab-bug:hover     { background: rgba(192,57,43,.1); }
.pile-fab-task:hover    { background: rgba(92,168,92,.1); }
.pile-fab-feature:hover { background: rgba(184,134,11,.12); }

/* ── Tab badge ────────────────────────────────────────── */
#pile-badge:not(:empty) {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 100px;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font);
  vertical-align: middle;
}
.nav-tab.active #pile-badge:not(:empty) {
  background: #fff;
  color: var(--accent);
}


/* ════════════════════════════════════════════════════════════
   THE PILE — v3 skin (2026-08-11)

   Restyled from a design pass on the v2 screenshots. Everything here is
   scoped to #view-pile so no other tab shifts: the palette, the type and
   the geometry are all local variables, and the rest of suMMa keeps its
   own tokens.

   The governing idea is unchanged — ink weight tracks commitment — but
   the execution is quieter. Warm paper ground, white cards floating on
   it, IBM Plex Sans for words and Plex Mono for every number so figures
   line up in a column and read as data rather than prose.
   ════════════════════════════════════════════════════════════ */

#view-pile {
  --p-ground: #f6f3ea;   /* page */
  --p-panel:  #fbf9f1;   /* columns, stacks */
  --p-card:   #ffffff;
  --p-rail:   #efebdd;   /* segmented controls, meters */

  --p-line:   #e3ddcb;
  --p-line-2: #e6e0ce;
  --p-line-3: #eae5d4;
  --p-line-4: #f0ece0;

  --p-ink:    #1c1b18;
  --p-ink-2:  #5c584e;
  --p-ink-3:  #7a756a;
  --p-ink-4:  #8a8474;
  --p-ink-5:  #a19a86;
  --p-ink-6:  #b0a893;

  --p-green:   #4a7a35;
  --p-green-2: #3d7d4e;
  --p-fire:    #a5382a;
  --p-fire-2:  #8f2f22;
  --p-fire-bg: #fdf0ed;
  --p-fire-ln: #eab3a8;
  --p-stale:   #b5824a;
  --p-stale-bg:#fbf2e2;

  --p-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --p-mono: 'IBM Plex Mono', ui-monospace, monospace;

  background: var(--p-ground);
  color: var(--p-ink);
  font-family: var(--p-sans);
  -webkit-font-smoothing: antialiased;
}

@keyframes pilePulseFire { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
@keyframes pileCardIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* ── Header ─────────────────────────────────────────────── */
#view-pile .pile-head-title { font: 700 26px/1.1 var(--p-sans); letter-spacing: -.02em; color: var(--p-ink); }
#view-pile .pile-head-sub   { font: 400 12px/1.4 var(--p-mono); color: var(--p-ink-4); margin-top: 5px; }

/* ── Lane chips ─────────────────────────────────────────── */
#view-pile .pile-lane-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 20px;
  background: transparent; border: 1px solid transparent;
  font-family: var(--p-sans); font-size: 13px; font-weight: 500;
  color: var(--p-ink-3); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
#view-pile .pile-lane-chip:hover { border-color: #c3bca6; color: var(--p-ink); }
#view-pile .pile-lane-chip.active { background: var(--p-card); border-color: var(--p-line); color: var(--p-ink); font-weight: 600; }
#view-pile .pile-lane-chip.chip-fire.active { background: var(--p-fire-bg); border-color: var(--p-fire-ln); color: var(--p-fire); }
#view-pile .pile-lane-chip.chip-feature.active { border-color: #b7cbaa; color: var(--p-green); }
#view-pile .pile-tab-count { font: 500 11px var(--p-mono); color: var(--p-ink-6); }
#view-pile .pile-lane-chip.active .pile-tab-count { color: inherit; opacity: .8; }

/* ── Segmented view toggle ──────────────────────────────── */
#view-pile .pile-viewtoggle { display: flex; background: var(--p-rail); border-radius: 7px; padding: 2px; border: 0; }
#view-pile .pile-viewtoggle-btn {
  padding: 5px 11px; border: 0; background: none; border-radius: 5px;
  font-family: var(--p-sans); font-size: 12.5px; color: var(--p-ink-3); cursor: pointer;
}
#view-pile .pile-viewtoggle-btn.active {
  background: var(--p-card); color: var(--p-ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(40,36,25,.10);
}

#view-pile .pile-toolbar input[type=text],
#view-pile .pile-toolbar select {
  border: 1px solid #ddd7c5; background: #fdfcf7; border-radius: 7px;
  padding: 6px 10px; font-family: var(--p-sans); font-size: 12.5px; color: var(--p-ink-2);
}

/* ── Load bar — who is carrying what. Two people, so this is a
      one-line answer to "am I the bottleneck". ── */
#view-pile .pile-load { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
#view-pile .pile-load-label {
  font: 500 10.5px/1 var(--p-mono); letter-spacing: .09em;
  color: var(--p-ink-5); text-transform: uppercase;
}
#view-pile .pile-load-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--p-card); border: 1px solid var(--p-line); border-radius: 8px;
  padding: 5px 10px 5px 6px;
}
#view-pile .pile-load-name { font-size: 12.5px; font-weight: 500; }
#view-pile .pile-load-track { width: 56px; height: 5px; border-radius: 3px; background: var(--p-line); overflow: hidden; }
#view-pile .pile-load-fill { display: block; height: 5px; border-radius: 3px; }
#view-pile .pile-load-n { font: 500 11px var(--p-mono); color: var(--p-ink-3); }
#view-pile .pile-load-note { font: 400 11.5px var(--p-mono); color: #b3aa94; margin-left: 4px; }

/* ── FIRES — a bordered panel, not loose rows. It reads as one
      object you can look at and then look away from. ── */
#view-pile .pile-fires {
  border: 1px solid var(--p-fire-ln); background: var(--p-fire-bg);
  border-radius: 10px; overflow: hidden; margin-bottom: 18px;
}
#view-pile .pile-fires-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid #f3d8d1;
  font: 600 10.5px/1 var(--p-mono); letter-spacing: .11em;
  color: var(--p-fire); text-transform: uppercase;
}
#view-pile .pile-fires-flame { font-size: 13px; animation: pilePulseFire 2.4s ease-in-out infinite; }
#view-pile .pile-fires-oldest { margin-left: auto; font: 400 11.5px var(--p-mono); color: #b5695c; text-transform: none; letter-spacing: 0; }
#view-pile .pile-fire {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid #f6e2dd;
  background: #fffaf9; cursor: pointer;
}
#view-pile .pile-fire:last-child { border-bottom: 0; }
#view-pile .pile-fire:hover { background: #fff; }
#view-pile .pile-fire-heat { width: 3px; align-self: stretch; border-radius: 2px; background: var(--p-fire); }
#view-pile .pile-fire-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--p-fire-2); }
#view-pile .pile-fire-age { font: 400 11px var(--p-mono); color: #b5695c; text-align: right; }

/* ── Board ──────────────────────────────────────────────── */
#view-pile .rm-hint { font: 400 12px/1.4 var(--p-mono); color: var(--p-ink-4); margin-bottom: 12px; }
#view-pile .rm-cols { display: grid; gap: 16px; align-items: start; }
#view-pile .rm-cols.cols-1 { grid-template-columns: minmax(0, 560px); }
#view-pile .rm-cols.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#view-pile .rm-cols.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#view-pile .rm-cols.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

#view-pile .rm-col {
  background: var(--p-panel); border: 1px solid var(--p-line);
  border-top: 3px solid var(--p-line); border-radius: 9px; overflow: hidden;
  min-height: 0; display: block;
}
#view-pile .rm-col-now   { border-top-color: #c0533f; }
#view-pile .rm-col-next  { border-top-color: #c99a3e; }
#view-pile .rm-col-later { border-top-color: #5b7fae; }
#view-pile .rm-col-tasks{ border-top-color: #cdc6b0; }

#view-pile .rm-col-head { padding: 11px 13px 9px; display: block; }
#view-pile .rm-col-top { display: flex; align-items: center; gap: 8px; }
#view-pile .rm-col-name {
  font: 700 12px/1 var(--p-sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--p-ink);
}
#view-pile .rm-cap-pill {
  margin-left: auto; font: 600 11px var(--p-mono);
  border-radius: 11px; padding: 3px 8px;
  color: var(--p-ink-3); background: var(--p-rail);
}
#view-pile .rm-cap-pill.is-over { color: #a5382a; background: #fbe9e5; }

/* The meter is the cap made visual — you read "how full" before you read
   the number, which is the whole point of having a cap at all. */
#view-pile .rm-meter { margin-top: 8px; height: 4px; border-radius: 3px; background: #e9e3d2; overflow: hidden; }
#view-pile .rm-meter-fill { height: 4px; border-radius: 3px; background: var(--p-green); transition: width .2s; }
#view-pile .rm-meter-fill.is-over { background: #c0533f; }
#view-pile .rm-col-note { margin-top: 7px; font: 400 11.5px/1.4 var(--p-mono); color: var(--p-ink-5); }
#view-pile .rm-col-note.is-over { color: #a5382a; }

#view-pile .rm-col-body { padding: 0 9px 9px; display: flex; flex-direction: column; gap: 7px; }
#view-pile .rm-empty { font: 400 11.5px var(--p-mono); color: var(--p-ink-6); padding: 4px 4px 8px; }

/* ── Card — white, floating, three elements. The category is the left
      edge; you learn seven colours in a day and it buys back a line. ── */
#view-pile .rm-card {
  background: var(--p-card); border: 1px solid var(--p-line-2);
  border-left: 3px solid #cdc6b0; border-radius: 7px;
  padding: 10px 11px; cursor: pointer; margin: 0;
  box-shadow: 0 1px 1px rgba(40,36,25,.04);
  transition: box-shadow .13s, transform .13s;
}
#view-pile .rm-card:hover { box-shadow: 0 3px 10px rgba(40,36,25,.11); transform: translateY(-1px); }
#view-pile .rm-card-title { font-size: 13px; font-weight: 600; line-height: 1.35; text-wrap: pretty; color: var(--p-ink); }
#view-pile .rm-card-meta { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
#view-pile .rm-card-spacer { flex: 1; }
#view-pile .rm-card-age { font: 400 10.5px var(--p-mono); color: var(--p-ink-6); }
#view-pile .rm-card-stale {
  font: 500 10px var(--p-mono); color: var(--p-stale);
  background: var(--p-stale-bg); border-radius: 4px; padding: 2px 5px;
}

#view-pile .rm-card.cat-seo       { border-left-color: #4a7a35; }
#view-pile .rm-card.cat-marketing { border-left-color: #b23873; }
#view-pile .rm-card.cat-ops       { border-left-color: #c0693f; }
#view-pile .rm-card.cat-support   { border-left-color: #2a8a8a; }
#view-pile .rm-card.cat-product   { border-left-color: #6b4dc4; }
#view-pile .rm-card.cat-finance   { border-left-color: #8a8a2e; }
#view-pile .rm-card.cat-data      { border-left-color: #5c6f8a; }

#view-pile .pile-payoff {
  font: 500 10.5px var(--p-mono); border-radius: 5px; padding: 2px 6px;
  border: 1px solid var(--p-line); background: var(--p-panel); color: var(--p-ink-3);
  white-space: nowrap;
}
#view-pile .pile-payoff.p-over50 { border-color: #a9c5b1; color: #2f6b3f; background: #eef5ef; }
#view-pile .pile-payoff.p-10to50 { border-color: #cdd9c4; color: #4a7a35; background: #f3f7ef; }
#view-pile .pile-payoff.p-none   { color: var(--p-ink-6); }

/* Owner as a filled circle rather than a bordered badge — it is the one
   element repeated on every single card, so it has to be quiet. */
#view-pile .pile-card-owner {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  color: #fff; font: 600 10px/19px var(--p-mono); text-align: center;
  border: 0; padding: 0;
}
#view-pile .pile-card-owner.unassigned { background: #cdc6b0; color: #fff; }

/* ── Tasks — stacks by area, two columns. Sweeping a stack is the
      unit of work here, not picking a row off a ranked list. ── */
#view-pile .rm-task-note { font: 400 12px/1.4 var(--p-mono); color: var(--p-ink-4); padding: 0 0 12px; }
#view-pile .rm-task-stacks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
#view-pile .rm-task-group {
  background: var(--p-panel); border: 1px solid var(--p-line);
  border-radius: 9px; overflow: hidden; margin: 0;
}
#view-pile .rm-task-group summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; list-style: none;
  font: 700 12px/1 var(--p-sans); letter-spacing: .07em; text-transform: uppercase;
  color: var(--p-ink);
}
#view-pile .rm-task-group summary::-webkit-details-marker { display: none; }
#view-pile .rm-task-group summary:hover { background: #f4f1e5; }
#view-pile .rm-task-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
#view-pile .rm-task-count {
  font: 500 11px var(--p-mono); color: var(--p-ink-4);
  background: var(--p-rail); border-radius: 10px; padding: 2px 8px;
  text-transform: none; letter-spacing: 0;
}
#view-pile .rm-task-rot {
  margin-left: auto; font: 500 10.5px var(--p-mono); color: var(--p-fire);
  background: #fbe9e5; border-radius: 5px; padding: 2px 7px;
  text-transform: none; letter-spacing: 0;
}
#view-pile .rm-task-body { border-top: 1px solid var(--p-line-3); }
#view-pile .rm-task {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--p-line-4);
  font-size: 12.5px; color: var(--p-ink-2); cursor: pointer; min-width: 0;
}
#view-pile .rm-task:last-child { border-bottom: 0; }
#view-pile .rm-task:hover { background: #fff; }
#view-pile .rm-task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-pile .rm-task-owner, #view-pile .rm-task-age {
  font: 400 10.5px var(--p-mono); color: var(--p-ink-6); flex: none; text-align: right;
}
#view-pile .rm-task-owner { color: #9a9382; }

/* ── Table ──────────────────────────────────────────────── */
#view-pile .pile-table-wrap { border: 1px solid var(--p-line); border-radius: 9px; background: var(--p-card); }
#view-pile .pile-table th {
  background: var(--p-panel); font: 600 10px var(--p-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--p-ink-4);
  border-bottom: 1px solid var(--p-line); padding: 9px 10px;
}
#view-pile .pile-table td { border-bottom: 1px solid var(--p-line-4); padding: 7px 10px; font-size: 12.5px; }
#view-pile .pile-table tbody tr:hover td { background: #fdfcf7; }
#view-pile .pile-td-title { font-weight: 500; color: var(--p-ink); }
#view-pile .pile-trow.lane-task .pile-td-title { color: var(--p-ink-3); font-weight: 400; }
#view-pile .pile-trow.lane-fire td { background: var(--p-fire-bg); }
#view-pile .pile-td-age { font: 400 10.5px var(--p-mono); color: var(--p-ink-6); }
#view-pile .pile-sort-arrow { color: var(--p-green); }

#view-pile .pile-lane-pill {
  font: 600 9px var(--p-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; border: 1px solid;
}
#view-pile .pile-lane-pill.lane-fire { color: var(--p-fire); background: var(--p-fire-bg); border-color: var(--p-fire-ln); }
#view-pile .pile-lane-pill.lane-feature { color: var(--p-green); background: #eef5ef; border-color: #b7cbaa; }
#view-pile .pile-lane-pill.lane-task { color: var(--p-ink-5); background: var(--p-rail); border-color: var(--p-line); }

#view-pile .pile-quick-add-input {
  border: 1px dashed #d8d1bd; background: transparent; border-radius: 7px;
  padding: 9px 11px; font-family: var(--p-sans); font-size: 12.5px; color: var(--p-ink);
}
#view-pile .pile-quick-add-input::placeholder { color: var(--p-ink-5); }

/* ── Modal ──────────────────────────────────────────────── */
#view-pile ~ .modal-overlay .pile-lane-strip,
.modal-overlay .pile-lane-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 9px 11px;
  background: #f6f3ea; border: 1px solid #e3ddcb; border-radius: 8px;
}
.modal-overlay .pile-lane-help { font-size: 11.5px; color: #8a8474; flex: 1; min-width: 140px; }
.modal-overlay .pile-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; color: #5c584e; cursor: pointer; white-space: nowrap;
}

@media (max-width: 1150px) {
  #view-pile .rm-cols.cols-3, #view-pile .rm-cols.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #view-pile .rm-cols, #view-pile .rm-cols.cols-2,
  #view-pile .rm-cols.cols-3, #view-pile .rm-cols.cols-4 { grid-template-columns: 1fr; }
  #view-pile .rm-task-stacks { grid-template-columns: 1fr; }
}

/* ── Bulk actions ─────────────────────────────────────────
   Only rendered with a selection, so it never costs space at rest. It sits
   above the table rather than floating, because the thing it acts on is the
   list directly underneath and the two should read as one object. */
#view-pile .pile-bulk {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 8px 11px;
  background: #eef5ef; border: 1px solid #b7cbaa; border-radius: 8px;
}
#view-pile .pile-bulk-n {
  font: 600 11.5px var(--p-mono); color: #2f6b3f;
  padding-right: 3px;
}
#view-pile .pile-bulk-spacer { flex: 1; }
#view-pile .pile-bulk-btn {
  border: 1px solid #b7cbaa; background: var(--p-card); color: var(--p-ink);
  border-radius: 6px; padding: 4px 11px;
  font-family: var(--p-sans); font-size: 12px; font-weight: 600; cursor: pointer;
}
#view-pile .pile-bulk-btn:hover { background: #f3f7ef; }
#view-pile .pile-bulk-btn.danger { border-color: var(--p-fire-ln); color: var(--p-fire); }
#view-pile .pile-bulk-btn.danger:hover { background: var(--p-fire-bg); }
#view-pile .pile-bulk-btn.ghost { border-color: transparent; font-weight: 500; color: var(--p-ink-3); }
#view-pile .pile-bulk-sel {
  border: 1px solid #b7cbaa; background: var(--p-card); color: var(--p-ink-2);
  border-radius: 6px; padding: 4px 8px;
  font-family: var(--p-sans); font-size: 12px; cursor: pointer;
}
#view-pile .pile-th-tick { width: 30px; padding-left: 11px; padding-right: 0; }
#view-pile .pile-th-tick input { cursor: pointer; margin: 0; accent-color: var(--p-green-2); }
#view-pile .pile-trow.is-ticked td { background: #f3f7ef; }
#view-pile .pile-trow.is-ticked:hover td { background: #eef5ef; }

/* ── Digits use Sans, not Mono ─────────────────────────────
   IBM Plex Mono's zero is slashed, and in "$10–50K" the two slashed zeros
   sit either side of the en-dash and read as one strike-through across the
   whole chip. The Google Fonts build exposes no feature to unslash it.

   So: Mono keeps the things it is actually good at — uppercase tracked labels
   with no digits (NOW, LOAD, area names) — and anything containing a number
   moves to IBM Plex Sans with tabular-nums, which gives the column alignment
   that was the only reason to reach for a monospace here. */
#view-pile .pile-tab-count,
#view-pile .rm-cap-pill,
#view-pile .rm-col-note,
#view-pile .pile-load-n,
#view-pile .rm-card-age,
#view-pile .rm-card-stale,
#view-pile .pile-payoff,
#view-pile .rm-task-count,
#view-pile .rm-task-rot,
#view-pile .rm-task-age,
#view-pile .rm-task-owner,
#view-pile .pile-fire-age,
#view-pile .pile-fires-oldest,
#view-pile .pile-td-age,
#view-pile .pile-bulk-n,
#view-pile .pile-lane-pill {
  font-family: var(--p-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "zero" 0;
}