/* projects page: only what castomo-dashkit does not already draw; kit tokens only (no colour literals, no font-family, no pixel font sizes). */

/* ---------- Hero: the brief and the plan being written ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s0); }

/* A box inside a card marks itself with a rule and a tint, never with more room (GUIDELINES §0.32). */
.gen { display: grid; gap: var(--s0); }
.gen[hidden] { display: none; }
.gen-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); color: var(--ink-2); }
.gen-window { border: var(--rule-w) solid var(--rule); border-radius: var(--radius-sm); background: var(--field); min-width: 0; }
.gen-stream {
  margin: 0;
  padding: var(--s0);
  max-block-size: 9rem;
  overflow: auto;
  font-size: var(--t-1);
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.gen-issues { margin-top: var(--s0); }
.gen-issues summary { cursor: pointer; color: var(--ink-2); }
.gen-issues ul { margin: var(--s0) 0 0; padding-inline-start: var(--s3); }

/* ---------- The library and the starters: tiles that line up (GUIDELINES §5e) ---------- */
.library-bar { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: var(--s1); align-items: end; }
.library-bar[hidden] { display: none; }
/* The kit's 640 px step: three controls in a row stop fitting a phone. */
@media (max-width: 640px) {
  .library-bar { grid-template-columns: minmax(0, 1fr); }
}

.plan-tiles,
.starter-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--gap);
}

/* Every tile spans the same four rows and shares their heights with its neighbours, so a
   two-line name pushes that row down in every tile beside it and the buttons stay level. */
.plan-tile,
.starter-tile {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: var(--s1);
  align-content: start;
  min-width: 0;
}
.plan-tile[data-open="true"] { box-shadow: inset 0 0 0 2px var(--accent); }

.plan-name {
  font-size: var(--t1);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}
.plan-brief {
  color: var(--ink-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}
.plan-meta, .starter-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); align-self: start; }
.plan-meta small, .starter-facts small { color: var(--ink-3); font-size: var(--t-1); }
.plan-tile > .btn-row, .starter-foot > .btn-row { align-self: end; }

.starter-body { display: grid; gap: var(--s0); align-content: start; color: var(--ink-2); }
.starter-foot { display: grid; gap: var(--s0); align-content: end; }
.starter-note { color: var(--ink-2); font-size: var(--t-1); }
.starter-note-bad { color: var(--bad); }

/* A palette is data (a preset's own hex values), handed over as one custom property. */
.swatches { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.swatch {
  inline-size: 2rem;
  block-size: 1.25rem;
  border-radius: 6px;
  background: var(--swatch);
  border: var(--rule-w) solid var(--rule-strong);
}

/* ---------- Import ---------- */
.probe-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); color: var(--ink-2); }
.url-list { border: var(--rule-w) solid var(--rule); border-radius: var(--radius-sm); min-width: 0; }
.url-list summary { cursor: pointer; padding: var(--s0); color: var(--ink); }
.url-list ul { list-style: none; margin: 0; padding: 0; max-block-size: 16rem; overflow: auto; border-block-start: var(--rule-w) solid var(--rule); }
.url-list li { padding: 6px var(--s0); border-block-start: var(--rule-w) solid var(--rule); font-size: var(--t-1); overflow-wrap: anywhere; }
.url-list li:first-child { border-block-start: 0; }
.url-list code { color: var(--ink-2); }