/* The idea's tree (public/card-tree, COMMAND-811). No design yet: every block also carries .poc-ui (app.css), the red
   dashed outline with its POC badge. A phone: the block the full width, a small indent per step, a row's status and last
   change on a line of their own under its name. A wide screen: one line per row, the status and the last change in
   columns of their own, so the room is used. */

.card-tree { margin: 0 0 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.card-tree-top { display: flex; align-items: flex-start; gap: 4px; }
.card-tree-top > .card-tree-list { flex: 1; min-width: 0; }
.card-tree-list { list-style: none; margin: 0; padding: 0; }
.card-tree-below { margin-left: 32px; }
.card-tree-fold,
.card-tree-fold-space { flex: none; width: 28px; min-height: 40px; }
.card-tree-fold { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 8px; }
.card-tree-fold:hover { background: var(--bg); }
.card-tree-fold svg { width: 16px; height: 16px; }

/* A row: its number, kind, name (and another board's name), then its status and its last change. */
.card-tree-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "status age"; gap: 2px 8px; align-items: center; padding: 6px 8px; border-radius: 10px; color: inherit; text-decoration: none; }
.card-tree-row:hover { background: var(--bg); }
.card-tree-row.is-here { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.card-tree-main { grid-area: main; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-width: 0; }
.card-tree-name { min-width: 0; overflow-wrap: anywhere; }
.card-tree-board { white-space: nowrap; }
.card-tree-status { grid-area: status; }
.card-tree-age { grid-area: age; justify-self: end; white-space: nowrap; }
.card-tree-build-tag { margin-left: 0; }

/* One step of indent per level: small on a phone. */
.card-tree-item[data-depth="1"] { padding-left: 12px; }
.card-tree-item[data-depth="2"] { padding-left: 24px; }
.card-tree-item[data-depth="3"] { padding-left: 36px; }
.card-tree-below .card-tree-item[data-depth="1"] { padding-left: 0; }
.card-tree-below .card-tree-item[data-depth="2"] { padding-left: 12px; }
.card-tree-below .card-tree-item[data-depth="3"] { padding-left: 24px; }

.card-tree.is-done { opacity: 0.9; }

/* A wide screen: one line per row, the status and the last change in columns of their own; a bigger step of indent. */
@media (min-width: 900px) {
  .card-tree { padding: 8px 12px; }
  .card-tree-row { grid-template-columns: minmax(0, 1fr) 150px 110px; grid-template-areas: "main status age"; }
  .card-tree-below { margin-left: 32px; }
  .card-tree-below .card-tree-item[data-depth="2"] { padding-left: 28px; }
  .card-tree-below .card-tree-item[data-depth="3"] { padding-left: 56px; }
}