/* charcreate.css: Character Creation tool layout only. Colours, frames and type come from base.css variables. */
.ccr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 1000px) {
  .ccr { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}
.ccr fieldset.chips { align-items: center; }
.ccr fieldset.chips legend, .ccr-lab {
  float: left; margin-right: var(--sp-2); min-width: 6.5em;
  font-family: var(--font-pixel-small); font-size: var(--px-2); text-transform: uppercase;
  text-shadow: var(--outline); -webkit-font-smoothing: none; color: var(--c-ink);
}
.ccr-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ccr-code {
  width: 8.5em; font-family: var(--font-pixel); font-size: var(--px-2); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--c-value); text-shadow: var(--outline); -webkit-font-smoothing: none;
}
.ccr-code[aria-invalid="true"] { color: var(--c-hp); }
.ccr-row .table-wrap { flex: 1 1 100%; }
.ccr-clicks { font-variant-numeric: tabular-nums; }
table.ccr-clicks th, table.ccr-clicks td { padding: var(--sp-1) var(--sp-2); }
table.ccr-clicks th { white-space: nowrap; font-size: var(--fs-s); }
table.ccr-clicks td { text-align: center; min-width: 1.5em; color: var(--c-ink-soft); }
table.ccr-clicks td.ccr-best { color: var(--c-value); font-weight: 700; }
.ccr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: 0; }
.ccr-status { font-size: var(--fs-s); color: var(--c-ink-soft); overflow-wrap: anywhere; white-space: pre-line; }
.ccr-preview { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); min-height: 18rem; }
.ccr-race { margin: 0; align-self: flex-start; }
.ccr-head, .ccr-parts, .ccr-spr { display: block; background-repeat: no-repeat; image-rendering: pixelated; }
.ccr-none { margin: auto 0; color: var(--c-ink-soft); }
.ccr-gal h2 { margin-bottom: var(--sp-2); }
.ccr-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ccr-filter label { font-size: var(--fs-s); color: var(--c-ink-soft); }
.ccr-col { width: var(--tap); height: var(--tap); padding: 0; border: var(--u) solid var(--c-line); background: var(--c-panel-deep); }
.ccr-list {
  display: flex; flex-wrap: wrap; gap: var(--sp-1); max-height: 34rem; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-1); background: var(--c-panel-deep);
}
.ccr-cell { padding: var(--sp-1); }
.ccr-cellcode { font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) {
  .ccr-preview { position: sticky; top: var(--sp-3); }
}
@media (max-width: 599px) {
  .ccr fieldset.chips legend, .ccr-lab { float: none; display: block; width: 100%; }
  table.ccr-clicks th, table.ccr-clicks td { padding: var(--sp-1); }
}