/* ═══════════════════════════════════════════════════════════════════════════════
   CHARACTER CREATOR
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Creator shell ──────────────────────────────────────────────────────────── */
.creator {
  display:        flex;
  flex-direction: column;
  min-height:     calc(100vh - 64px); /* account for sticky nav */
}

/* ── Creator header ─────────────────────────────────────────────────────────── */
.creator-header {
  border-bottom: 1px solid var(--color-border);
  background:    var(--color-foreground);
  padding-block: var(--space-4);
}

.creator-header__inner {
  max-width:       1200px;
  margin-inline:   auto;
  padding-inline:  var(--page-gutter);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
}

.creator-header__title {
  font-size:   var(--font-h3);
  margin-top:  var(--space-1);
}

.creator-header__actions {
  display: flex;
  gap:     var(--space-3);
  flex-shrink: 0;
}

/* ── Step nav (horizontal tab strip) ───────────────────────────────────────── */
.step-nav {
  background:    var(--color-foreground);
  border-bottom: 1px solid var(--color-border);
  overflow-x:    auto;
  scrollbar-width: none;
}
.step-nav::-webkit-scrollbar { display: none; }

.step-nav__list {
  max-width:      1200px;
  margin-inline:  auto;
  padding-inline: var(--page-gutter);
  display:        flex;
  list-style:     none;
  gap:            0;
}

.step-nav__item { flex-shrink: 0; }

.step-nav__btn {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-3) var(--space-4);
  background:      none;
  border:          none;
  border-bottom:   2px solid transparent;
  color:           var(--color-text-disabled);
  font-family:     var(--font-family-mono);
  font-size:       var(--font-tiny);
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  cursor:          pointer;
  transition:      color var(--transition-fast), border-color var(--transition-fast);
  white-space:     nowrap;
}

.step-nav__btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.step-nav__num {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           20px;
  height:          20px;
  border:          1px solid currentColor;
  font-size:       0.65rem;
  flex-shrink:     0;
  transition:      background var(--transition-fast), color var(--transition-fast);
}

.step-nav__item--active .step-nav__btn {
  color:        var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.step-nav__item--active .step-nav__num {
  background: var(--color-accent);
  color:      var(--color-text-on-accent);
  border-color: var(--color-accent);
}

.step-nav__item--completed .step-nav__btn {
  color: var(--color-text-secondary);
}

.step-nav__item--completed .step-nav__num::after { content: "✓"; }
.step-nav__item--completed .step-nav__num { font-size: 0; }
.step-nav__item--completed .step-nav__num::after { font-size: 0.7rem; }

/* ── Creator body: sidebar + panels ────────────────────────────────────────── */
.creator-body {
  flex:    1;
  display: grid;
  grid-template-columns: 200px 1fr;
  max-width:      1200px;
  width:          100%;
  margin-inline:  auto;
  gap:            0;
}

@media (max-width: 768px) {
  .creator-body { grid-template-columns: 1fr; }
  .char-sidebar { display: none; }
}

/* ── Character sidebar ──────────────────────────────────────────────────────── */
.char-sidebar {
  border-right:   1px solid var(--color-border);
  padding:        var(--space-5) var(--space-4);
  position:       sticky;
  top:            64px;
  height:         calc(100vh - 64px - 56px); /* nav + step footer */
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.char-sidebar__name {
  font-family:    var(--font-family-display);
  font-size:      var(--font-base);
  color:          var(--color-text-primary);
  word-break:     break-word;
}

.char-sidebar__stats {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.sidebar-stat {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
}

.sidebar-stat__label { opacity: 0.6; }

.char-sidebar__tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
}

.sidebar-chip {
  font-family:    var(--font-family-mono);
  font-size:      0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        2px var(--space-2);
  border:         1px solid var(--color-border);
  color:          var(--color-text-secondary);
  white-space:    nowrap;
}

.sidebar-chip--accent {
  border-color: var(--color-accent);
  color:        var(--color-accent);
}

/* ── Step panels ────────────────────────────────────────────────────────────── */
.step-panels {
  padding:    var(--space-8) var(--space-6);
  overflow-y: auto;
}

.step-panel       { display: none; }
.step-panel--active { display: block; }

.step-panel__inner {
  max-width: 720px;
}

.step-panel h2 {
  margin-bottom: var(--space-3);
}

.step-panel__intro {
  font-size:     var(--font-large);
  margin-bottom: var(--space-6);
  max-width:     58ch;
}

/* ── Step footer ────────────────────────────────────────────────────────────── */
.step-footer {
  border-top:    1px solid var(--color-border);
  background:    var(--color-foreground);
  padding-block: var(--space-3);
  position:      sticky;
  bottom:        0;
  z-index:       10;
}

.step-footer__inner {
  max-width:       1200px;
  margin-inline:   auto;
  padding-inline:  var(--page-gutter);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.step-footer__indicators {
  display: flex;
  gap:     var(--space-2);
}

.step-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--color-border);
  transition:    background var(--transition-fast), transform var(--transition-fast);
}

.step-dot--active    { background: var(--color-accent); transform: scale(1.3); }
.step-dot--completed { background: var(--color-text-secondary); }

/* ── Fields ─────────────────────────────────────────────────────────────────── */
.field-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  margin-bottom:  var(--space-5);
}

.field-label {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-text-secondary);
}

.field-input {
  padding:      var(--space-3) var(--space-4);
  font-size:    var(--font-base);
  width:        100%;
  max-width:    400px;
  border-radius: var(--radius-sm);
}

/* ── Select cards ───────────────────────────────────────────────────────────── */
.card-select {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   var(--space-4);
  margin-bottom:         var(--space-5);
}

.card-select--list {
  grid-template-columns: 1fr;
  max-width:             640px;
}

.select-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  padding:        var(--space-4) var(--space-5);
  background:     var(--color-surface-raised);
  border:         1px solid var(--color-border);
  text-align:     left;
  cursor:         pointer;
  transition:     border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  position:       relative;
  overflow:       hidden;
}

.select-card::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: var(--color-accent);
  transform:  scaleX(0);
  transition: transform var(--transition-fast);
}

.select-card:hover:not(:disabled) {
  border-color: var(--color-accent);
  transform:    translateY(-1px);
  box-shadow:   0 4px 20px color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.select-card--selected {
  border-color: var(--color-accent);
  background:   color-mix(in srgb, var(--color-accent) 6%, var(--color-surface-raised));
}

.select-card--selected::before { transform: scaleX(1); }

.select-card--locked {
  opacity: 0.35;
  cursor:  not-allowed;
  filter:  grayscale(0.5);
}

.select-card--compact {
  padding: var(--space-3) var(--space-4);
}

/* List-style select card (for events) */
.select-card--list-item {
  flex-direction: row;
  align-items:    center;
  justify-content: space-between;
  gap:            var(--space-6);
  padding:        var(--space-3) var(--space-5);
}

.select-card__list-main {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  flex: 1;
}

.select-card__list-meta {
  flex-shrink: 0;
  text-align:  right;
  min-width:   120px;
}

.select-card__glyph {
  font-size:   1.8rem;
  color:       var(--color-accent);
  line-height: 1;
}

.select-card__title {
  font-size:      var(--font-base);
  color:          var(--color-text-primary);
  letter-spacing: 0.04em;
}

.select-card__sub  { line-height: 1.5; }
.select-card__meta { display: block; margin-top: var(--space-1); }

/* ── Attribute allocator ────────────────────────────────────────────────────── */
.attr-allocator {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  max-width:      560px;
  margin-bottom:  var(--space-4);
}

.attr-row {
  display:     grid;
  grid-template-columns: 140px 1fr 1fr;
  align-items: center;
  gap:         var(--space-4);
  padding:     var(--space-3) var(--space-4);
  background:  var(--color-surface-raised);
  border:      1px solid var(--color-border);
  transition:  border-color var(--transition-fast);
}

.attr-row--locked { opacity: 0.4; }
.attr-row:not(.attr-row--locked):hover { border-color: var(--color-accent); }

.attr-row__label {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-3);
}

.attr-row__abbr { min-width: 3ch; }

.attr-row__controls {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

.attr-btn {
  width:      28px;
  height:     28px;
  background: var(--color-foreground);
  border:     1px solid var(--color-border);
  color:      var(--color-text-primary);
  font-size:  var(--font-base);
  cursor:     pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  line-height: 1;
  clip-path:  polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}

.attr-btn:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.attr-btn:disabled              { opacity: 0.3; cursor: not-allowed; }

.attr-row__val {
  font-size:  var(--font-large);
  min-width:  1.5ch;
  text-align: center;
}

.attr-row__desc { font-size: var(--font-tiny); line-height: 1.4; }

.attr-remaining {
  font-family: var(--font-family-mono);
  font-size:   var(--font-small);
  color:       var(--color-text-secondary);
  margin-top:  var(--space-2);
}

/* ── Skill allocator ────────────────────────────────────────────────────────── */
.skill-allocator {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-6);
  max-width:      660px;
  margin-bottom:  var(--space-4);
}

.skill-category--locked { opacity: 0.35; pointer-events: none; }

.skill-category__name {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom:  1px solid var(--color-divider);
}

.skill-row {
  display:     grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap:         var(--space-4);
  padding:     var(--space-2) 0;
}

.skill-row--locked { opacity: 0.35; pointer-events: none; }

.skill-row__label {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-3);
}

.skill-row__name { font-size: var(--font-small); }
.skill-row__attr { flex-shrink: 0; }

.skill-row__pips {
  display: flex;
  gap:     var(--space-1);
}

.skill-pip {
  width:      18px;
  height:     18px;
  background: var(--color-foreground);
  border:     1px solid var(--color-border);
  cursor:     pointer;
  clip-path:  polygon(3px 0%, 100% 0%, calc(100% - 3px) 100%, 0% 100%);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.skill-pip--filled { background: var(--color-accent); border-color: var(--color-accent); }
.skill-pip--bonus  { background: color-mix(in srgb, var(--color-accent) 50%, var(--color-surface-raised)); }
.skill-pip:hover:not(:disabled) { border-color: var(--color-accent); }
.skill-pip:disabled { cursor: not-allowed; }

.skill-row__pool { min-width: 4ch; text-align: right; }

/* ── Origin detail ───────────────────────────────────────────────────────────── */
.origin-detail {
  max-width:    600px;
  margin-top:   var(--space-2);
  font-size:    var(--font-small);
  line-height:  1.6;
}

/* ── Error flash ────────────────────────────────────────────────────────────── */
.step-error {
  margin-bottom: var(--space-4);
  animation:     error-in 0.2s ease;
}

@keyframes error-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Export button pulse ────────────────────────────────────────────────────── */
@keyframes btn-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 40%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.btn-pulse { animation: btn-pulse 0.6s ease 2; }

/* ═══════════════════════════════════════════════════════════════════════════════
   PRINT SHEET
   Hidden on screen. Shown only during window.print().
   ═══════════════════════════════════════════════════════════════════════════════ */
.print-sheet { display: none; }

@media print {

  /* Hide everything except the print sheet */
  .site-nav,
  .creator,
  .site-footer {
    display: none !important;
  }

  .print-sheet {
    display:     block;
    font-family: 'Share Tech Mono', monospace;
    font-size:   9pt;
    color:       #000;
    background:  #fff;
    padding:     12mm;
    max-width:   100%;
  }

  /* Sheet header */
  .print-sheet__header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    border-bottom:   2pt solid #000;
    padding-bottom:  4mm;
    margin-bottom:   4mm;
  }

  .print-sheet__game {
    font-size:      7pt;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity:        0.5;
    margin-bottom:  2mm;
  }

  .print-sheet__name {
    font-size:      18pt;
    font-family:    'Orbitron', sans-serif;
    font-weight:    700;
    letter-spacing: 0.05em;
  }

  .print-sheet__handle {
    font-size:   9pt;
    opacity:     0.7;
    margin-top:  1mm;
  }

  .print-sheet__origin-block {
    text-align: right;
    display:    flex;
    flex-direction: column;
    gap:        1mm;
  }

  .print-label {
    font-size:      6pt;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity:        0.5;
  }

  /* Body — 3 columns */
  .print-sheet__body {
    display:               grid;
    grid-template-columns: 55mm 1fr 1fr;
    gap:                   6mm;
    align-items:           start;
  }

  .print-section { break-inside: avoid; }

  .print-section__title {
    font-family:    'Orbitron', sans-serif;
    font-size:      7pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-bottom:  1pt solid #000;
    padding-bottom: 1mm;
    margin-bottom:  2mm;
    font-weight:    700;
  }

  /* Attr table */
  .print-attr-table,
  .print-skill-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       8pt;
  }

  .print-attr-table th,
  .print-skill-table th {
    text-align:      left;
    font-size:       6pt;
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    opacity:         0.5;
    border-bottom:   0.5pt solid #aaa;
    padding-bottom:  1mm;
    font-weight:     400;
  }

  .print-attr-table td,
  .print-skill-table td {
    padding:     1mm 0;
    border-bottom: 0.25pt solid #ddd;
  }

  .print-center { text-align: center; }

  /* Derived stats */
  .print-derived {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   2mm;
    margin-top:            4mm;
    border-top:            1pt solid #000;
    padding-top:           2mm;
  }

  .print-derived__item {
    display:        flex;
    flex-direction: column;
    gap:            0.5mm;
  }

  .print-derived__val {
    font-size:      11pt;
    font-family:    'Orbitron', sans-serif;
    font-weight:    700;
  }

  .print-event { font-size: 8pt; line-height: 1.5; }

  /* Note lines */
  .print-notes-lines {
    display:        flex;
    flex-direction: column;
    gap:            5mm;
    margin-top:     2mm;
  }

  .print-line {
    border-bottom: 0.5pt solid #bbb;
    height:        5mm;
  }

  /* Footer */
  .print-sheet__footer {
    display:         flex;
    justify-content: space-between;
    margin-top:      6mm;
    padding-top:     2mm;
    border-top:      0.5pt solid #aaa;
    font-size:       6pt;
    opacity:         0.4;
  }

  /* Force white background */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}