/* castomFLOW — pages (views/home, workflows, templates, steps, import). Only what
   castomo-dashkit does not already draw. */

/* ---------- Tiles: workflows and templates ----------
   Every tile in a row lines its parts up with its neighbours (GUIDELINES §0.13,
   no grid gaps): each tile spans as many rows of the grid as it has parts
   (data-rows, written by the view) and takes them as a subgrid, so the titles,
   summaries and buttons of a row sit on the same lines however long a summary is. */
.pg-tiles { grid-auto-rows: auto; row-gap: var(--gap); }
.pg-tile { display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 5); row-gap: var(--s1); align-content: start; }
.pg-tile[data-rows="4"] { --rows: 4; }
.pg-tile[data-rows="5"] { --rows: 5; }
.pg-tile[data-rows="6"] { --rows: 6; }
/* A workflow tile opens the workflow from anywhere on it (views/workflows.js). */
.pg-tile[data-status] { cursor: pointer; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pg-tile[data-status]:hover { transform: translateY(-2px); }

.pg-tile-head, .pg-kind-head { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.pg-tile-head { justify-content: space-between; }
.pg-tile-icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.pg-tile-icon .ci { --ci-size: 20px; }
.pg-tile-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s0); min-width: 0; }

.pg-tile-title {
  font-size: var(--t1); font-weight: 700; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.pg-tile-meta { color: var(--ink-3); font-size: var(--t-1); overflow-wrap: anywhere; }
.pg-tile-summary {
  color: var(--ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.pg-tile-foot { display: flex; flex-wrap: wrap; gap: var(--s0); align-self: end; padding-top: var(--s0); }

/* The kinds a template uses, as a row of icons; each keeps its name for a screen reader. */
.pg-kind-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pg-kind-icons > li {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--field); color: var(--ink-2);
}
.pg-kind-icons .ci { --ci-size: 18px; }

/* A workflow's week in four short facts. Tone is said by the colour AND by the
   number being there at all (a zero stays plain). */
.pg-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1); margin: 0; align-self: end; }
/* A label that wraps ("Waiting for you") must not lift its number off the line the others sit on. */
.pg-numbers > div { display: grid; grid-template-rows: 1fr auto; gap: 2px; min-width: 0; }
.pg-numbers dt { color: var(--ink-3); font-size: var(--t-2); }
.pg-numbers dd { margin: 0; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pg-numbers [data-tone="bad"] dd { color: var(--bad); }
.pg-numbers [data-tone="warn"] dd { color: var(--warn); }
@media (max-width: 560px) { .pg-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Workflows: list and "new" ---------- */
.pg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.pg-toolbar > .input-wrap { flex: 1 1 240px; min-width: 0; }
.pg-toolbar > .input-wrap > .input { width: 100%; }

.pg-chips { display: flex; flex-wrap: wrap; gap: var(--s0); }
.pg-chips .chip { max-width: 100%; }
.pg-chips .chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pg-describe textarea { resize: vertical; min-height: 7.5em; }
.pg-progress { display: grid; gap: var(--s1); margin-top: var(--s2); }
.pg-progress[hidden], .pg-describe-failure:empty { display: none; }
.pg-describe-failure { margin-top: var(--s2); }

/* The two lesser ways to begin sit side by side at the same height. */
.pg-way { height: 100%; }

.pg-alert-actions { margin-top: var(--s1); }

/* ---------- Home ---------- */
.pg-home-rest { align-items: start; }
.pg-link-list .list-row { display: flex; align-items: center; gap: var(--s1); flex: 1; min-width: 0; color: inherit; text-decoration: none; }
/* The server's own words for what went wrong, set apart from the facts around them. */
.pg-said { color: var(--ink-2); font-style: italic; overflow-wrap: anywhere; }

/* ---------- Steps (the catalogue of kinds) ---------- */
/* A lone last card takes the whole row, so the grid never ends on a hole (§0.13). */
.pg-kinds > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 560px) { .pg-kinds > :last-child:nth-child(odd) { grid-column: auto; } }

.pg-kind { gap: var(--s2); }
.pg-kind-head h3 { flex: 1 1 auto; min-width: 0; font-size: var(--t1); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.pg-kind-head .pg-tile-badges { flex: 0 1 auto; }
.pg-kind-what { color: var(--ink-2); }
.pg-kind-settings { display: grid; gap: 4px; color: var(--ink-2); font-size: var(--t-1); }
.pg-kind-settings b { color: var(--ink); font-weight: 650; }

/* Each mark is an icon and a sentence: never colour alone. */
.pg-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pg-marks > li { display: flex; align-items: flex-start; gap: var(--s1); color: var(--ink-2); font-size: var(--t-1); }
.pg-marks .ci { --ci-size: 16px; flex: none; margin-top: 2px; color: var(--ink-3); }
.pg-marks [data-tone="accent"] .ci { color: var(--accent-ink); }
.pg-marks [data-tone="ok"] .ci { color: var(--ok); }
.pg-marks [data-tone="warn"] .ci { color: var(--warn); }

.pg-kind-ready {
  --tone: var(--ok);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1);
  margin-top: auto; padding: 10px 12px; border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--tone) 12%, transparent);
  color: var(--ink); font-size: var(--t-1);
}
.pg-kind-ready[data-tone="warn"] { --tone: var(--warn); }
.pg-kind-ready > .ci { --ci-size: 18px; flex: none; color: var(--tone); }
.pg-kind-ready > span { flex: 1 1 20ch; min-width: 0; }
:root[data-theme^="contrast"] .pg-kind-ready { background: none; box-shadow: inset 0 0 0 var(--rule-w) currentColor; }
:root[data-theme^="contrast"] .pg-kind-ready > .ci { color: currentColor; }

/* What this workspace has in place, one fact a line. */
.pg-estate { list-style: none; margin: 0; padding: 0; display: grid; }
.pg-estate > li { display: flex; align-items: flex-start; gap: var(--s1); padding: 10px 0; border-top: var(--rule-w) solid var(--rule); min-width: 0; }
.pg-estate > li:first-child { border-top: 0; }

/* ---------- Import (a workflow arriving from castomflow.com) ---------- */
.pg-import { max-inline-size: 720px; }
.pg-import-card .empty { text-align: center; }
.pg-working { display: block; width: min(240px, 100%); height: 8px; margin: var(--s2) auto 0; border-radius: var(--radius-pill); }

/* ---------- Shared bits the kit has no piece for ---------- */
/* JSON a step produced, a curl line, the lines a CSV step could not read. */
.code-block {
  margin: 0; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--field); color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--t-1); line-height: 1.5;
  white-space: pre; overflow: auto; max-height: 320px; max-width: 100%;
}
/* How many things sit behind a tab, beside its name. */
.tab-count {
  display: inline-block; min-width: 1.6em; margin-inline-start: 6px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--field); color: var(--ink-2);
  font-size: var(--t-2); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center;
}