/* custom-content-datapack — layout only; colours come from tokens.css via tool-theme.css. */

.cc { display: grid; gap: 12px; }

.cc-controls { padding: 14px 16px; }
.cc-controls h2 { margin: 0; }

.cc-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.cc-field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.cc-field[hidden] { display: none; }
.cc-grow { flex: 1 1 220px; }

.cc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cc-head b { color: var(--fg-muted); font-weight: 700; }
.cc-actions { display: flex; gap: 8px; }
/* a file input styled as a button — the input itself is hidden inside the label */
.cc-add { cursor: pointer; }

.cc-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.cc-list li {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 9px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cc-thumb {
  width: 44px; height: 44px; flex: none;
  object-fit: cover;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface-3);
}
.cc-thumb-glyph { display: grid; place-items: center; font-size: 20px; color: var(--grass); }

.cc-inline { display: flex; flex-direction: column; gap: 4px; flex: 1 1 130px; min-width: 110px; }
.cc-inline-sm { flex: 0 0 96px; min-width: 96px; }

.cc-x { padding: 6px 10px; font-size: 11.5px; align-self: flex-end; }
.cc-empty { margin: 12px 0 0; font-size: 13px; color: var(--fg-dim); }

.cc-status { margin: 10px 0 0; font-size: 13px; color: var(--fg-muted); min-height: 1.2em; }
.cc-bad { color: #fca5a5; }
.cc-note { margin: 0; font-size: 12.5px; color: var(--fg-dim); }

.cc-cmds {
  margin: 12px 0 0;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
}

.cc-steps { margin: 10px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--fg-muted); }
.cc-steps li { margin-bottom: 7px; }

@media (max-width: 620px) {
  .cc-field, .cc-inline { min-width: 100%; flex-basis: 100%; }
  .cc-inline-sm { flex-basis: 46%; min-width: 46%; }
}