/* ============================================================
   CSS Cog: wizard.css
   Author:   Steven J. Cook
   Date:     2026-05-03
   Time:     02:50 UTC
   Model:    Claude Opus 4.7
   Chat:     Abyssal Engine Web App Development (local dev variant)
   Revision: 1.1.0 (DEV)
     v1.1.0 - Added charactermancer summary delta-rail styles
              (.wsum-rail, .wsum-head, .wsum-body, .wsum-level,
              .wsum-line and friends). Multi-column flow lets the
              rail expand horizontally instead of growing into a
              long vertical scroll for high-target-level builds.
     v1.0.0 - Original cog (top-level layout, dots, picks summary).
   ============================================================ */
.wizard-layout{display:flex;gap:1.5em;}
.wizard-main{flex:1;min-width:0;}
.wizard{background:var(--bg-dark);border:1px solid var(--border-thin);border-radius:var(--radius-lg);padding:2em;box-shadow:var(--shadow-med);}
.wizard-progress{display:flex;gap:0.5em;margin-bottom:2em;}
.wizard-progress .dot{width:12px;height:12px;border-radius:50%;background:var(--bg-lighter);transition:all 0.3s;}
.wizard-progress .dot.done{background:var(--accent-green);}.wizard-progress .dot.current{background:var(--accent-blue);box-shadow:0 0 8px rgba(88,101,242,0.5);}
.wizard-nav{display:flex;justify-content:space-between;margin-top:2em;padding-top:1em;border-top:1px solid var(--border-thin);}
.wizard-summary{width:280px;flex-shrink:0;position:sticky;top:1em;align-self:flex-start;}
.summary-box{background:var(--bg-darkest);border:1px solid var(--border-thin);border-radius:var(--radius-md);padding:1em;font-size:0.85em;}
.summary-box h4{font-size:0.85em;margin-bottom:0.5em;border-bottom:1px solid var(--border-thin);padding-bottom:0.3em;}
.summary-row{display:flex;justify-content:space-between;padding:0.15em 0;color:var(--text-muted);}.summary-row .sv{color:var(--text-primary);font-weight:700;}
@media(max-width:900px){.wizard-layout{flex-direction:column;}.wizard-summary{width:100%;position:static;}}

.profile-cards{display:flex;gap:1em;margin:1em 0;flex-wrap:wrap;}
.profile-card{flex:1;min-width:180px;background:var(--bg-darkest);border:2px solid var(--border-thin);border-radius:var(--radius-md);padding:1em;cursor:pointer;text-align:center;transition:all 0.2s;}
.profile-card:hover{border-color:var(--accent-blue);}.profile-card.selected{border-color:var(--accent-cyan);background:rgba(0,180,216,0.06);}
.profile-card h4{font-size:0.95em;margin-bottom:0.3em;}.profile-card .dice{font-family:var(--font-code);color:var(--accent-cyan);font-size:0.95em;}
.pick-list{max-height:350px;overflow-y:auto;border:1px solid var(--border-thin);border-radius:var(--radius-md);background:var(--bg-darkest);}
.pick-item{padding:0.75em 1em;border-bottom:1px solid var(--border-thin);cursor:pointer;transition:background 0.15s;}
.pick-item:last-child{border-bottom:none;}.pick-item:hover{background:var(--bg-hover);}
.pick-item.selected{background:rgba(88,101,242,0.12);border-left:3px solid var(--accent-blue);}
.pick-item .pick-name{font-weight:700;color:var(--text-primary);font-size:1.5em;}
.pick-item .pick-desc{font-size:1.0em;color:var(--text-muted);margin-top:0.15em;}
.pick-item .pick-classinfo{font-size:0.8em;color:var(--accent-cyan);margin-top:0.1em;font-style:italic;}
.pick-item .pick-classref{font-size:0.95em;color:var(--accent-crimson);margin-top:0.1em;font-style:italic;}
.tag-list{display:flex;flex-wrap:wrap;gap:0.4em;margin-top:0.5em;}
.tag{display:inline-flex;align-items:center;gap:0.3em;background:rgba(88,101,242,0.15);border:1px solid rgba(88,101,242,0.3);border-radius:20px;padding:0.25em 0.7em;font-size:0.8em;color:var(--accent-blue);}
.tag .remove{cursor:pointer;color:var(--text-faint);font-size:0.9em;}.tag .remove:hover{color:var(--accent-red);}

/* ============================================================
   CLICKABLE WIZARD DOTS
   ============================================================ */
.wizard-progress .dot.clickable-dot{cursor:pointer;transition:all 0.2s;}
.wizard-progress .dot.clickable-dot:hover{transform:scale(1.4);box-shadow:0 0 6px rgba(88,101,242,0.5);}
.wizard-progress .dot.dot-locked{opacity:0.25;cursor:not-allowed;}

/* Spell class section in wizard */
.spell-class-section{margin-bottom:1.25em;}
.spell-class-section h4{margin-bottom:0.4em;}

/* ============================================================
   BUILDER: Level Grid (start level picker)
   ============================================================ */
.level-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:0.3em;max-width:500px;}
.level-grid-btn{padding:0.4em;border-radius:var(--radius-sm);background:var(--bg-lighter);border:1px solid var(--border-thin);color:var(--text-primary);font-family:var(--font-code);font-size:0.85em;font-weight:700;cursor:pointer;transition:all 0.15s;text-align:center;}
.level-grid-btn:hover{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff;}

/* ============================================================
   WIZARD: Equipment Budget
   ============================================================ */
.equip-budget{background:var(--bg-darkest);border:1px solid var(--border-thin);border-radius:var(--radius-sm);padding:0.75em 1em;margin-bottom:1em;}
.equip-budget-row{display:flex;justify-content:space-between;padding:0.2em 0;}
.equip-budget-val{font-family:var(--font-code);font-weight:700;}
.equip-budget-note{font-size:0.8em;color:var(--text-faint);margin-top:0.5em;font-style:italic;}
.equip-martial-note{font-size:0.8em;color:var(--text-muted);margin-top:1em;padding:0.5em 0.7em;background:rgba(219,112,147,0.08);border:1px solid rgba(219,112,147,0.2);border-radius:var(--radius-sm);line-height:1.5;}
.martial-diamond{color:#db7093;}

/* ============================================================
   BUILDER: Progress Bar
   ============================================================ */
.build-progress{background:var(--bg-darkest);border:1px solid var(--border-thin);border-radius:10px;height:12px;overflow:hidden;margin-bottom:0.3em;}
.build-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent-blue),var(--accent-green));border-radius:10px;transition:width 0.3s ease;}
.build-progress-label{font-family:var(--font-code);font-size:0.8em;color:var(--text-muted);text-align:center;margin-bottom:1em;}


/* ============================================================
   BUILDER: Atlas Warning
   ============================================================ */
.atlas-warning{background:rgba(240,178,50,0.1);border:1px solid rgba(240,178,50,0.3);border-radius:var(--radius-sm);color:var(--accent-amber);font-size:0.75em;padding:0.4em 0.6em;margin-top:0.3em;line-height:1.4;}

/* ============================================================
   BUILDER: Confirm Button
   ============================================================ */
.build-confirm{margin:0.75em 0;padding:0.75em;background:rgba(87,242,135,0.06);border:1px solid rgba(87,242,135,0.2);border-radius:var(--radius-sm);text-align:center;}

/* ============================================================
   SHEET: Level Up Button
   ============================================================ */
.btn-levelup{background:rgba(87,242,135,0.15)!important;border-color:rgba(87,242,135,0.4)!important;color:var(--accent-green)!important;animation:levelup-pulse 2s ease-in-out infinite;}
@keyframes levelup-pulse{0%,100%{box-shadow:0 0 0 0 rgba(87,242,135,0);}50%{box-shadow:0 0 8px 2px rgba(87,242,135,0.3);}}

.pick-disabled{opacity:0.35;cursor:not-allowed!important;}.pick-disabled:hover{background:var(--bg-darkest)!important;}



/* ============================================================
   v4.1.0 - Wizard summary sidebar sections. Used by the rich
   summary that lists classes, skills (with picks), spells, and
   heroic skills as the wizard progresses.
   ============================================================ */
.wsum-section {
  margin-top: 0.75em;
  padding-top: 0.5em;
  border-top: 1px solid var(--border-thin);
}
.wsum-section-label {
  font-family: var(--font-display);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-amber);
  margin-bottom: 0.35em;
}
.wsum-list {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.wsum-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82em;
  padding: 0.15em 0;
  color: var(--text-secondary);
}
.wsum-num {
  font-family: var(--font-code);
  font-size: 0.78em;
  color: var(--text-muted);
}
.wsum-subline {
  font-size: 0.72em;
  color: var(--accent-cyan);
  padding-left: 0.5em;
  margin-bottom: 0.2em;
  font-style: italic;
  line-height: 1.4;
  word-break: break-word;
}

/* ============================================================
   Charactermancer summary delta-rail (builder.js v5.0.0)

   Layout: top section (wsum-head) is non-flowing and shows
   cumulative end-state. Body (wsum-body) uses CSS columns so
   per-level entries flow rightward when vertical space runs
   out. Each .wsum-level is break-inside: avoid so a single
   level never gets split across columns.
   ============================================================ */
.wsum-rail {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  font-size: 0.85em;
}

.wsum-head {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--border-thin);
}

.wsum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.1em 0;
  color: var(--text-secondary);
}

.wsum-row.wsum-cls {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15em;
}

.wsum-label {
  font-family: var(--font-display, inherit);
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wsum-val {
  font-family: var(--font-code, monospace);
  color: var(--text-primary);
  text-align: right;
  word-break: break-word;
}

.wsum-cls .wsum-val {
  text-align: left;
  font-family: inherit;
  font-size: 0.85em;
  color: var(--text-primary);
  line-height: 1.35;
}

.wsum-body {
  /* Multi-column flow: 2-4 columns based on available width.
     Columns are sized by a min-width hint so narrow rails still
     show one column, wide rails fan out. break-inside: avoid on
     the per-level block keeps a level's lines together. */
  column-width: 11em;
  column-gap: 0.9em;
  column-fill: auto;
  /* Hard cap at 4 columns; beyond that the rail accepts vertical
     scroll. Browsers without the experimental 'column-count' max
     fall back to natural fill. */
  max-height: 78vh;
  overflow-y: auto;
}

.wsum-level {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  margin-bottom: 0.5em;
  padding: 0.3em 0.4em;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid var(--accent-amber);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}

.wsum-level-pending {
  border-left-color: var(--accent-cyan, var(--accent-blue));
  background: rgba(80, 160, 220, 0.05);
}

.wsum-level-head {
  font-family: var(--font-display, inherit);
  font-size: 0.78em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-amber);
  margin-bottom: 0.2em;
}

.wsum-level-pending .wsum-level-head {
  color: var(--accent-cyan, var(--accent-blue));
}

.wsum-pending {
  font-size: 0.72em;
  font-weight: normal;
  color: var(--text-faint);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.3em;
}

.wsum-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.05em 0;
  font-size: 0.82em;
  line-height: 1.3;
}

.wsum-line-label {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.wsum-line-value {
  color: var(--text-primary);
  text-align: right;
  word-break: break-word;
}

.wsum-line-dim .wsum-line-value {
  color: var(--text-faint);
  font-style: italic;
}