/*
 * CHAINS — Dark leather guild hall meets arcane tome
 */

:root {
  /* Backgrounds */
  --color-void:      #0D0A0B;
  --color-obsidian:  #151215;
  --color-iron:      #1E1A1F;
  --color-graphite:  #2A2530;

  /* Brand */
  --color-chain:     #C4973A;
  --color-collar:    #8B1A2E;
  --color-leather:   #5C3A1E;
  --color-pale-gold: #E8D5A3;

  /* Semantic */
  --color-trust:     #2E7D5A;
  --color-caution:   #C47C1A;
  --color-safe:      #1A5C8B;
  --color-dom:       #8B1A2E;
  --color-sub:       #2E4A7D;

  /* Text */
  --color-text-primary:   #E8D5A3;
  --color-text-secondary: #9A8870;
  --color-text-muted:     #5C5248;

  /* Typography */
  --font-display: 'Cinzel', serif;
  --font-body:    'Crimson Pro', serif;
  --font-ui:      'Inter', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --radius: 4px;
  --radius-lg: 8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background-color: var(--color-void);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 100vh;
}

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-pale-gold);
  letter-spacing: 0.05em;
}

a { color: var(--color-chain); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- BUTTONS ---- */
.btn {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}

.btn--primary {
  background: var(--color-chain);
  color: var(--color-void);
  border-color: var(--color-chain);
}
.btn--primary:hover { background: var(--color-pale-gold); border-color: var(--color-pale-gold); }

.btn--secondary {
  background: transparent;
  color: var(--color-chain);
  border-color: var(--color-chain);
}
.btn--secondary:hover { background: var(--color-graphite); }

.btn--discord {
  background: #5865F2;
  color: #fff;
  border-color: #5865F2;
}
.btn--discord:hover { background: #4752c4; }

.btn--full { width: 100%; }

/* ---- FLASH ---- */
.flash {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  padding: 0.75rem 1rem;
  border-left: 3px solid;
}
.flash--notice { border-color: var(--color-trust); background: rgba(46,125,90,0.15); }
.flash--alert  { border-color: var(--color-collar); background: rgba(139,26,46,0.15); }

/* ---- HOME ---- */
.home { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.home__hero { text-align: center; max-width: 640px; padding: 2rem; }
.home__title { font-size: var(--text-4xl); letter-spacing: 0.2em; color: var(--color-chain); margin-bottom: 0.5rem; }
.home__tagline { font-size: var(--text-lg); color: var(--color-text-secondary); font-style: italic; margin-bottom: 2rem; }
.home__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.home__orgs { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.home__empty { color: var(--color-text-secondary); font-family: var(--font-ui); font-size: var(--text-sm); margin-bottom: 1rem; }
.home__admin-link { margin-top: 1rem; font-family: var(--font-ui); font-size: var(--text-sm); }

/* ---- FORM CARD (generic form pages) ---- */
.page-container { max-width: 1100px; margin: 3rem auto; padding: 0 1rem; }
.page-container--narrow { max-width: 680px; }
.page-container > .form-card { max-width: 680px; margin-inline: auto; }
.form-card { background: var(--color-obsidian); border: 1px solid var(--color-graphite); border-top: 3px solid var(--color-chain); border-radius: var(--radius-lg); padding: 2rem; }
.form-card__title { font-size: var(--text-2xl); margin-bottom: 0.25rem; }
.form-card__subtitle { color: var(--color-text-secondary); font-family: var(--font-ui); font-size: var(--text-sm); margin-bottom: 1.75rem; }
.form-textarea { resize: vertical; min-height: 80px; }
.form-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }

/* ---- GATE ---- */
.gate { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.gate__card {
  background: var(--color-obsidian);
  border: 1px solid var(--color-graphite);
  border-top: 3px solid var(--color-chain);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 540px;
  width: 100%;
}
.gate__title { font-size: var(--text-2xl); margin-bottom: 1.5rem; }
.gate__body { font-size: var(--text-base); color: var(--color-text-secondary); margin-bottom: 1.5rem; }
.gate__body ul { padding-left: 1.5rem; margin-top: 0.5rem; }
.gate__body li { margin-bottom: 0.25rem; }
.gate__checkbox { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.5rem; cursor: pointer; font-family: var(--font-ui); font-size: var(--text-sm); }
.gate__exit { text-align: center; margin-top: 1rem; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- ORGANISATION SHOW ---- */
.org-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-graphite); }
.org-header__name { font-size: var(--text-3xl); color: var(--color-chain); margin-bottom: 0.25rem; }
.org-header__description { color: var(--color-text-secondary); font-size: var(--text-base); }
.org-header__actions { flex-shrink: 0; }
.org-section { margin-bottom: 2rem; }
.org-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.org-section__title { font-size: var(--text-xl); color: var(--color-pale-gold); }
.org-empty { color: var(--color-text-muted); font-family: var(--font-ui); font-size: var(--text-sm); }
.campaign-list { display: flex; flex-direction: column; gap: 0.75rem; }
.campaign-card { background: var(--color-obsidian); border: 1px solid var(--color-graphite); border-left: 3px solid var(--color-chain); border-radius: var(--radius); padding: 1rem; }
.campaign-card__name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-chain); margin-bottom: 0.25rem; }
.campaign-card__desc { color: var(--color-text-secondary); font-size: var(--text-sm); }

/* ---- SCENE POSTS ---- */
.scene-post {
  background: var(--color-obsidian);
  border: 1px solid var(--color-graphite);
  border-left: 3px solid var(--color-graphite);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.scene-post--dom { border-left-color: var(--color-dom); }
.scene-post--sub { border-left-color: var(--color-sub); }
.scene-post--gm_narration {
  border-top: 2px solid var(--color-chain);
  border-left-color: var(--color-chain);
  background: var(--color-iron);
  font-style: italic;
}
.scene-post--ooc { opacity: 0.7; font-size: var(--text-sm); }
.scene-post--system { text-align: center; font-family: monospace; font-size: var(--text-sm); color: var(--color-text-muted); }
.scene-typing { padding: 0.25rem 0.75rem; font-size: var(--text-sm); font-style: italic; color: var(--color-text-muted); }

.scene-post__header { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; margin-bottom: 0.5rem; color: var(--color-chain); }
.scene-post__content { font-family: var(--font-body); font-size: var(--text-lg); }

/* ---- TRUST METER ---- */
.trust-meter { display: flex; gap: 4px; align-items: center; }
.trust-meter__link {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-graphite);
  transition: background 0.3s;
}
.trust-meter__link--filled { background: var(--color-chain); }
.trust-meter__link--broken { background: var(--color-collar); }

/* ---- HEADSPACE BADGE ---- */
.headspace-badge {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.headspace-badge--neutral  { background: var(--color-graphite); color: var(--color-text-secondary); }
.headspace-badge--domspace { background: var(--color-dom); color: #fff; }
.headspace-badge--subspace { background: var(--color-sub); color: #fff; }
.headspace-badge--flow     { background: linear-gradient(90deg, var(--color-chain), var(--color-pale-gold)); color: var(--color-void); animation: pulse 2s infinite; }
.headspace-badge--dropped  { background: var(--color-graphite); color: var(--color-text-muted); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* ---- STATUS BADGES ---- */
.status-badge {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-graphite);
  color: var(--color-text-secondary);
  display: inline-block;
}
.status-badge--active   { background: rgba(46,125,90,0.25); color: var(--color-trust); }
.status-badge--open     { background: rgba(46,125,90,0.15); color: #5aad84; }
.status-badge--paused   { background: rgba(196,124,26,0.2); color: var(--color-caution); }
.status-badge--closed   { background: var(--color-graphite); color: var(--color-text-muted); }
.status-badge--draft    { background: var(--color-graphite); color: var(--color-text-muted); }
.status-badge--completed { background: rgba(26,92,139,0.25); color: var(--color-safe); }
.status-badge--meta     { background: rgba(139,26,139,0.2); color: #b06ab3; }
.status-badge--ai       { background: rgba(26,92,139,0.2); color: #7eb8d4; }
.status-badge--pending  { background: rgba(196,124,26,0.15); color: var(--color-caution); }

/* ---- TAGS ---- */
.tag { font-family: var(--font-ui); font-size: var(--text-xs); padding: 0.1rem 0.4rem; background: var(--color-graphite); color: var(--color-text-muted); border-radius: var(--radius); }
.tag--ai { background: rgba(26,92,139,0.2); color: #7eb8d4; }

/* ---- RESOURCE HEADER ---- */
.resource-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-graphite); }
.resource-header__title { font-size: var(--text-3xl); color: var(--color-chain); margin: 0.25rem 0; }
.resource-header__breadcrumb { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 0.25rem; }
.resource-header__badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.resource-header__actions { flex-shrink: 0; display: flex; gap: 0.5rem; }
.resource-header__sub { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 0.25rem; }

/* ---- CAMPAIGN CARDS (extended) ---- */
.campaign-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; }
.campaign-card__meta { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); display: flex; gap: 1rem; margin-top: 0.5rem; }
.campaign-card--dim { opacity: 0.65; }

/* ---- CAMPAIGN SHOW ---- */
.campaign-description { color: var(--color-text-secondary); margin-bottom: 1.5rem; font-size: var(--text-base); }
.campaign-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; border-bottom: 1px solid var(--color-graphite); padding-bottom: 1rem; }
.campaign-nav__link { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); padding: 0.35rem 0.75rem; border-radius: var(--radius); transition: background 0.15s, color 0.15s; }
.campaign-nav__link:hover { background: var(--color-graphite); color: var(--color-chain); text-decoration: none; }
.campaign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
@media (max-width: 680px) { .campaign-grid { grid-template-columns: 1fr; } }
.campaign-grid__section {}
.campaign-primer { margin-top: 1.5rem; }
.campaign-primer__body { color: var(--color-text-secondary); font-size: var(--text-base); line-height: 1.75; }

/* ---- FORM ROW ---- */
.form-row { display: flex; gap: 1rem; }
.form-row > .form-group { flex: 1; }
@media (max-width: 540px) { .form-row { flex-direction: column; } }

/* ---- SECTION DIVIDER ---- */
.section-divider { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin: 1.5rem 0 0.75rem; }

/* ---- CHARACTER CARDS ---- */
.character-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.character-card { background: var(--color-obsidian); border: 1px solid var(--color-graphite); border-left: 3px solid var(--color-leather); border-radius: var(--radius); padding: 1rem; }
.character-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; }
.character-card__name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-chain); }
.character-card__archetype { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.character-card__meta { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
.character-card__player { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.5rem; border-top: 1px solid var(--color-graphite); padding-top: 0.4rem; }
.character-chip { font-family: var(--font-ui); font-size: var(--text-sm); display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--color-graphite); }
.character-chip__archetype { font-size: var(--text-xs); color: var(--color-text-muted); }
.character-list {}

/* ---- CHARACTER SHEET ---- */
.character-sheet {}
.character-sheet__stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.stat-block { background: var(--color-obsidian); border: 1px solid var(--color-graphite); border-radius: var(--radius); padding: 0.75rem 1rem; text-align: center; min-width: 80px; }
.stat-block__value { display: block; font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-chain); }
.stat-block__label { display: block; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.25rem; }
.character-section { margin: 1.5rem 0; }
.character-section__title { font-size: var(--text-lg); margin-bottom: 0.75rem; }
.character-prose { color: var(--color-text-secondary); line-height: 1.75; }
.character-portrait { margin-bottom: 1.5rem; }
.character-portrait__img { max-width: 200px; border-radius: var(--radius-lg); border: 2px solid var(--color-chain); }
.character-portrait-preview { max-width: 120px; border-radius: var(--radius); border: 1px solid var(--color-graphite); display: block; margin-top: 0.5rem; }

/* ---- ASPECTS ---- */
.aspect-list { display: flex; flex-direction: column; gap: 0.5rem; }
.aspect-card { background: var(--color-iron); border: 1px solid var(--color-graphite); border-left: 3px solid var(--color-graphite); border-radius: var(--radius); padding: 0.75rem; }
.aspect-card--high_concept { border-left-color: var(--color-chain); }
.aspect-card--trouble      { border-left-color: var(--color-collar); }
.aspect-card--bond         { border-left-color: var(--color-trust); }
.aspect-card--dynamic      { border-left-color: var(--color-leather); }
.aspect-card__type { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.aspect-card__name { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-pale-gold); }
.aspect-card__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 0.25rem; }

/* ---- BONDS ---- */
.bond-list { display: flex; flex-direction: column; gap: 0.75rem; }
.bond-card { background: var(--color-obsidian); border: 1px solid var(--color-graphite); border-radius: var(--radius); padding: 0.75rem; }
.bond-card__names { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: var(--text-base); margin-bottom: 0.5rem; }
.bond-card__dom { color: var(--color-dom); }
.bond-card__sub { color: var(--color-sub); }
.bond-card__arrow { color: var(--color-text-muted); }
.bond-card__meta { display: flex; align-items: center; gap: 1rem; }

/* ---- SCENE PAGE ---- */
.scene-page { display: grid; grid-template-columns: 280px 1fr; height: calc(100vh - 48px); overflow: hidden; }
@media (max-width: 768px) { .scene-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } }
.scene-sidebar { background: var(--color-obsidian); border-right: 1px solid var(--color-graphite); overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.scene-sidebar__header {}
.scene-sidebar__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-chain); margin-bottom: 0.25rem; }
.scene-sidebar__meta { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.scene-sidebar__intensity { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); }
.scene-sidebar__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 0.5rem; }
.scene-sidebar__section-title { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.scene-controls { display: flex; flex-direction: column; gap: 0.4rem; }
.scene-participants { display: flex; flex-direction: column; gap: 0.4rem; }
.participant-chip { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--color-iron); border-radius: var(--radius); padding: 0.4rem 0.6rem; }
.participant-chip__name { font-family: var(--font-ui); font-size: var(--text-sm); }
.participant-chip--safeworded { border-left: 3px solid var(--color-collar); }
.scene-main { display: flex; flex-direction: column; overflow: hidden; }
.scene-feed { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.scene-post__time { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 400; margin-left: 0.5rem; }
.scene-composer { border-top: 1px solid var(--color-graphite); padding: 1rem; background: var(--color-obsidian); }
.scene-composer__character { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.scene-composer__controls { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.scene-composer__type { flex: 1; }
.scene-composer__input { resize: none; min-height: 72px; }
.scene-composer__actions { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; }
.scene-composer__connection[data-connection-status="connected"]::before { content: "●"; color: var(--color-trust); font-size: var(--text-xs); }
.scene-composer__connection[data-connection-status="disconnected"]::before { content: "●"; color: var(--color-collar); font-size: var(--text-xs); }
.scene-roll-panel { background: var(--color-iron); border: 1px solid var(--color-graphite); border-radius: var(--radius); padding: 0.75rem; margin-bottom: 0.75rem; }
.scene-closed-notice { padding: 1rem; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.hidden { display: none !important; }

/* ---- MEMBERS LIST ---- */
.member-list { display: flex; flex-direction: column; gap: 0; }
.member-row { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-graphite); }
.member-row__info { flex: 1; }
.member-row__name { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-primary); }
.member-row__email { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); }
.member-row__role { min-width: 120px; }
.member-row__actions {}
.form-input--sm { padding: 0.3rem 0.5rem; font-size: var(--text-xs); }

/* ---- CONFIG VIEW ---- */
.config-dl {}
.config-dl__row { display: flex; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-graphite); }
.config-dl__row dt { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); min-width: 200px; }
.config-dl__row dd { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-primary); }
.config-section { margin-top: 1.5rem; }
.config-section__title { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.config-pre { background: var(--color-iron); border: 1px solid var(--color-graphite); border-radius: var(--radius); padding: 0.75rem; font-size: var(--text-sm); color: var(--color-text-secondary); white-space: pre-wrap; word-break: break-word; }

/* ---- DANGER ZONE ---- */
.danger-zone { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-collar); }
.danger-zone__title { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-collar); margin-bottom: 0.75rem; }
.btn--danger { background: transparent; color: var(--color-collar); border-color: var(--color-collar); }
.btn--danger:hover { background: var(--color-collar); color: #fff; }

/* ---- TOP NAV ---- */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  height: 48px;
  background: var(--color-obsidian);
  border-bottom: 1px solid var(--color-graphite);
  position: sticky;
  top: 0;
  z-index: 100;
}
.topnav__left  { display: flex; align-items: center; gap: 0.5rem; min-width: 0; overflow: hidden; }
.topnav__right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.topnav__brand { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-chain); letter-spacing: 0.1em; white-space: nowrap; }
.topnav__brand:hover { text-decoration: none; color: var(--color-pale-gold); }
.topnav__sep   { color: var(--color-graphite); font-size: var(--text-sm); }
.topnav__crumb { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.topnav__crumb:hover { color: var(--color-chain); text-decoration: none; }
.topnav__link  { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); padding: 0.25rem 0.5rem; border-radius: var(--radius); }
.topnav__link:hover { color: var(--color-chain); background: var(--color-graphite); text-decoration: none; }
.topnav__divider { width: 1px; height: 20px; background: var(--color-graphite); }
.topnav__user  { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); }
.topnav__user--link { text-decoration: none; }
.topnav__user--link:hover { color: var(--color-chain); }
.btn--ghost { background: transparent; color: var(--color-text-secondary); border-color: var(--color-graphite); }
.btn--ghost:hover { border-color: var(--color-chain); color: var(--color-chain); text-decoration: none; }
.btn--sm { padding: 0.25rem 0.75rem; font-size: var(--text-xs); }

/* ---- CAMPAIGN SUBNAV ---- */
.subnav {
  display: flex;
  align-items: center;
  gap: 0;
  height: 38px;
  background: var(--color-iron);
  border-bottom: 1px solid var(--color-graphite);
  padding: 0 1.25rem;
  overflow-x: auto;
  position: sticky;
  top: 48px;
  z-index: 99;
}
.subnav__link {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 0 0.85rem;
  height: 38px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.subnav__link:hover { color: var(--color-text-secondary); text-decoration: none; }
.subnav__link--active { color: var(--color-chain); border-bottom-color: var(--color-chain); }

/* ---- AUTH PAGES (sign in / sign up / gate) ---- */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; background: var(--color-void); }
.auth-card {
  background: var(--color-obsidian);
  border: 1px solid var(--color-graphite);
  border-top: 3px solid var(--color-chain);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 420px;
}
.auth-card__title { font-size: var(--text-3xl); text-align: center; color: var(--color-chain); letter-spacing: 0.2em; margin-bottom: 0.25rem; }
.auth-card__subtitle { text-align: center; color: var(--color-text-secondary); font-family: var(--font-ui); font-size: var(--text-sm); margin-bottom: 1.75rem; }
.auth-card__divider { text-align: center; color: var(--color-text-muted); font-family: var(--font-ui); font-size: var(--text-xs); margin: 1rem 0; position: relative; }
.auth-card__divider::before, .auth-card__divider::after { content: ""; position: absolute; top: 50%; width: 42%; height: 1px; background: var(--color-graphite); }
.auth-card__divider::before { left: 0; }
.auth-card__divider::after { right: 0; }
.auth-card__links { margin-top: 1.25rem; text-align: center; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 2; }
.auth-card__links a { color: var(--color-chain); }

/* ---- FORMS ---- */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); margin-bottom: 0.4rem; letter-spacing: 0.03em; }
.form-hint { display: block; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 0.4rem; }
.form-input {
  width: 100%;
  background: var(--color-iron);
  border: 1px solid var(--color-graphite);
  border-radius: var(--radius);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  padding: 0.55rem 0.75rem;
  transition: border-color 0.15s;
  outline: none;
}
.form-input:focus { border-color: var(--color-chain); }
.form-input::placeholder { color: var(--color-text-muted); }
.form-check { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.form-check__input { accent-color: var(--color-chain); width: 1rem; height: 1rem; }
.form-check__label { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ---- AUTH ERRORS ---- */
.auth-errors { background: rgba(139,26,46,0.15); border: 1px solid var(--color-collar); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1.25rem; }
.auth-errors__heading { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--color-collar); margin-bottom: 0.4rem; }
.auth-errors__list { padding-left: 1.25rem; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ---- AI CONFIG ---- */
.ai-context-preview { background: var(--color-iron); border: 1px solid var(--color-graphite); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.ai-context-preview__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; }
.ai-context-preview__label a { color: var(--color-chain); }
.ai-context-preview__row { display: grid; grid-template-columns: 9rem 1fr; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px solid var(--color-graphite); }
.ai-context-preview__key { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-secondary); padding-top: 0.1rem; }
.ai-context-preview__val { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; }
.config-layer-label { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.5rem; }
.config-layer-source { font-weight: 400; color: var(--color-text-muted); margin-left: 0.25rem; }

/* ==================== ASPECT FORGE ==================== */

/* Page shell */
.forge-page { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }

/* Threshold */
.forge-threshold { text-align: center; }
.forge-threshold__emblem { font-size: 3rem; margin-bottom: 1.5rem; color: var(--color-chain); }
.forge-threshold__welcome { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-text-secondary); line-height: 1.75; margin-bottom: 2rem; text-align: left; max-width: 600px; margin-left: auto; margin-right: auto; }
.forge-threshold__welcome p { margin-bottom: 1rem; }
.forge-archetype-card { background: var(--color-iron); border: 1px solid var(--color-chain); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin: 1.5rem auto; max-width: 480px; text-align: center; }
.forge-archetype-card__label { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-chain); margin-bottom: 0.35rem; }
.forge-archetype-card__name { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-pale-gold); margin-bottom: 0.5rem; }
.forge-archetype-card__flavour { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-secondary); font-style: italic; }
.forge-field-group { margin: 1.5rem auto; max-width: 520px; text-align: left; }
.forge-question { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.75rem; }
.forge-radio-row { display: flex; gap: 1.5rem; margin-bottom: 0.5rem; }
.forge-radio { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); cursor: pointer; }
.forge-radio input { accent-color: var(--color-chain); }
.forge-mode-hint { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.5rem; }
.forge-mode-hint__guided, .forge-mode-hint__balanced { display: none; }
.forge-select { margin-top: 0.35rem; }
.forge-note { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-muted); font-style: italic; }
.forge-actions { margin-top: 2rem; text-align: center; }
.forge-btn--begin { font-size: var(--text-lg); padding: 0.75rem 2.5rem; letter-spacing: 0.05em; }

/* Progress bar */
.forge-progress { display: flex; align-items: flex-start; gap: 0; margin-bottom: 2.5rem; }
.forge-progress__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.5rem 0.25rem; border-bottom: 2px solid var(--color-graphite); transition: border-color 0.3s; }
.forge-progress__step--done { border-color: var(--color-trust); }
.forge-progress__step--current { border-color: var(--color-chain); }
.forge-progress__step--bond { border-color: var(--color-collar); }
.forge-progress__num { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); }
.forge-progress__step--done .forge-progress__num { color: var(--color-trust); }
.forge-progress__step--current .forge-progress__num { color: var(--color-chain); }
.forge-progress__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
.forge-progress__step--current .forge-progress__label { color: var(--color-chain); }

/* Slot */
.forge-slot__header { margin-bottom: 2rem; }
.forge-slot__name { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-pale-gold); margin-bottom: 0.75rem; }
.forge-slot__frame { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-text-secondary); line-height: 1.7; }
.forge-slot__guidance { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 0.5rem; font-style: italic; }
.forge-transition { background: rgba(196,151,58,0.08); border-left: 3px solid var(--color-chain); padding: 1rem 1.25rem; margin-bottom: 2rem; border-radius: 0 var(--radius) var(--radius) 0; }
.forge-transition__text { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-pale-gold); font-style: italic; }

/* Completion prompts (Dynamic) */
.forge-completion-prompts { margin-bottom: 1.5rem; }
.forge-completion-prompts__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.forge-completion-prompt { display: inline-block; background: var(--color-iron); border: 1px solid var(--color-graphite); color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--text-sm); padding: 0.4rem 0.75rem; border-radius: var(--radius); margin: 0.25rem; cursor: pointer; transition: border-color 0.15s; }
.forge-completion-prompt:hover { border-color: var(--color-chain); color: var(--color-pale-gold); }

/* Prompt callout */
.forge-prompt { background: rgba(196,151,58,0.06); border: 1px solid rgba(196,151,58,0.2); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.forge-prompt__text { font-family: var(--font-body); font-size: var(--text-xl); color: var(--color-pale-gold); font-style: italic; line-height: 1.6; }

/* Verb bank */
.forge-verb-bank { margin-bottom: 1.25rem; }
.forge-verb-bank__toggle { background: none; border: none; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-chain); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.forge-verb-bank__words { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.forge-verb { background: var(--color-iron); border: 1px solid var(--color-graphite); color: var(--color-text-secondary); font-family: var(--font-ui); font-size: var(--text-xs); padding: 0.25rem 0.6rem; border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s; }
.forge-verb:hover { border-color: var(--color-chain); color: var(--color-pale-gold); }

/* Writing input */
.forge-writing-space { margin-bottom: 1.25rem; }
.forge-writing-input { width: 100%; background: var(--color-obsidian); border: 2px solid var(--color-graphite); border-radius: var(--radius); color: var(--color-pale-gold); font-family: var(--font-body); font-size: var(--text-2xl); padding: 1rem 1.25rem; outline: none; transition: border-color 0.2s; }
.forge-writing-input:focus { border-color: var(--color-chain); }
.forge-writing-input::placeholder { color: var(--color-text-muted); }
.forge-char-hint { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-caution); margin-top: 0.4rem; }

/* AI spark */
.forge-ai-spark { margin-bottom: 1.5rem; }
.forge-ai-spark__btn { background: none; border: none; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-collar); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.forge-ai-spark__btn:disabled { opacity: 0.5; }
.forge-ai-spark__response { background: rgba(139,26,46,0.08); border: 1px solid rgba(139,26,46,0.25); border-radius: var(--radius); padding: 0.75rem 1rem; margin-top: 0.5rem; font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-text-secondary); font-style: italic; }

/* Examples */
.forge-examples { margin-top: 2rem; border-top: 1px solid var(--color-graphite); padding-top: 1rem; }
.forge-examples__toggle { background: none; border: none; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; padding: 0; }
.forge-examples__list { margin-top: 0.75rem; }
.forge-example { border-left: 2px solid var(--color-graphite); padding: 0.5rem 1rem; margin-bottom: 0.75rem; }
.forge-example__text { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-secondary); }
.forge-example__note { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.2rem; }

/* Summary sidebar (aspects written so far) */
.forge-summary { background: var(--color-iron); border-radius: var(--radius); padding: 1rem 1.25rem; margin-top: 2rem; }
.forge-summary__label { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: 0.75rem; display: block; }
.forge-summary__aspect { display: grid; grid-template-columns: 9rem 1fr; gap: 0.5rem; padding: 0.35rem 0; border-top: 1px solid var(--color-graphite); }
.forge-summary__type { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.forge-summary__text { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Aspect tests */
.forge-tests__header { margin-bottom: 2rem; }
.forge-test-card { background: var(--color-iron); border-radius: var(--radius); border: 1px solid var(--color-graphite); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.forge-test-card--question { border-color: var(--color-caution); }
.forge-test-card--pass { border-color: var(--color-trust); background: rgba(46,125,90,0.06); }
.forge-test-card__aspect { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-pale-gold); margin-bottom: 0.5rem; font-style: italic; }
.forge-test-card__prompt { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); }
.forge-aspects-review { margin: 2rem 0; }
.forge-aspect-reveal { padding: 0.75rem 0; border-top: 1px solid var(--color-graphite); display: grid; grid-template-columns: 9rem 1fr auto; gap: 0.75rem; align-items: baseline; }
.forge-aspect-reveal__type { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.forge-aspect-reveal__text { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-pale-gold); font-style: italic; }
.forge-aspect-reveal__edit { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-chain); }
.forge-aspect-reveal--complete .forge-aspect-reveal__edit { display: none; }
.forge-bond-callout { background: rgba(139,26,46,0.08); border: 1px solid rgba(139,26,46,0.25); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-top: 2rem; }
.forge-bond-callout__text { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-text-secondary); margin-bottom: 1rem; }
.forge-bond-ready { text-align: center; }
.forge-bond-waiting { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Waiting screen */
.forge-waiting { text-align: center; }
.forge-waiting__emblem { font-size: 3rem; margin-bottom: 1.5rem; color: var(--color-chain); }

/* Bond Forge */
.forge-bond { max-width: 640px; margin: 0 auto; }
.forge-bond-questions__intro { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 1.5rem; font-style: italic; }
.forge-answer-textarea { min-height: 80px; resize: vertical; font-family: var(--font-body); font-size: var(--text-base); }
.forge-bond-answered { background: rgba(46,125,90,0.08); border: 1px solid var(--color-trust); border-radius: var(--radius); padding: 1rem 1.25rem; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 2rem; }
.forge-bond-writing__partners { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.forge-bond-partner { text-align: center; }
.forge-bond-partner__name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-pale-gold); }
.forge-bond-partner__role { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); }
.forge-bond-partner__thread { font-size: 2rem; color: var(--color-chain); }
.forge-bond-writing__space { margin-bottom: 1.5rem; }
.forge-bond-writing__input { min-height: 80px; resize: none; }
.forge-bond-writing__partner-indicator { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; margin-top: 0.4rem; }
.forge-bond-confirmations { display: flex; gap: 1rem; margin-bottom: 1rem; }
.forge-bond-confirm-status { flex: 1; font-family: var(--font-ui); font-size: var(--text-sm); padding: 0.5rem 0.75rem; border-radius: var(--radius); }
.forge-bond-confirm-status--confirmed { background: rgba(46,125,90,0.1); color: var(--color-trust); border: 1px solid var(--color-trust); }
.forge-bond-confirm-status--waiting { background: var(--color-iron); color: var(--color-text-muted); border: 1px solid var(--color-graphite); }

/* Complete */
.forge-complete { text-align: center; }
.forge-complete__emblem { font-size: 3rem; margin-bottom: 1.5rem; color: var(--color-chain); }
.forge-complete__aspects { margin: 2rem auto; max-width: 560px; text-align: left; }
.forge-complete__actions { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.forge-complete__ready-msg { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-trust); margin-bottom: 1rem; }

/* Reveal Ritual */
.forge-reveal { max-width: 900px; margin: 0 auto; }
.forge-reveal__waiting { text-align: center; }
.forge-reveal__status { font-family: var(--font-ui); font-size: var(--text-base); color: var(--color-text-secondary); margin-bottom: 1.5rem; }
.forge-reveal__readiness { display: grid; gap: 0.5rem; margin-bottom: 2rem; max-width: 400px; margin-left: auto; margin-right: auto; }
.forge-reveal__char-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--color-graphite); }
.forge-reveal__char-name { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); }
.forge-reveal__ready-badge { font-family: var(--font-ui); font-size: var(--text-xs); padding: 0.2rem 0.5rem; border-radius: var(--radius); }
.forge-reveal__ready-badge--yes { background: rgba(46,125,90,0.15); color: var(--color-trust); }
.forge-reveal__ready-badge--no { background: var(--color-iron); color: var(--color-text-muted); }
.forge-reveal__gm-controls { margin-top: 2rem; text-align: center; }
.forge-reveal__ceremony { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.forge-reveal__complete { text-align: center; }

/* Silhouettes */
.forge-silhouette { background: var(--color-iron); border: 2px solid var(--color-graphite); border-radius: var(--radius-lg); padding: 1.25rem; text-align: center; transition: all 0.4s ease; }
.forge-silhouette--hidden { opacity: 0.6; filter: blur(0.5px); }
.forge-silhouette--current { border-color: var(--color-chain); box-shadow: 0 0 24px rgba(196,151,58,0.15); }
.forge-silhouette--revealed { border-color: var(--color-trust); opacity: 1; }
.forge-silhouette__shadow { font-size: 2rem; margin-bottom: 0.5rem; }
.forge-silhouette__name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-pale-gold); margin-bottom: 0.75rem; }
.forge-silhouette__aspects { text-align: left; }
.forge-aspect-reveal--ceremony { display: block; padding: 0.4rem 0; }
.forge-aspect-reveal--ceremony .forge-aspect-reveal__type { display: block; font-size: var(--text-xs); }
.forge-aspect-reveal--ceremony .forge-aspect-reveal__text { display: block; font-size: var(--text-sm); }

/* Aspect archive */
.aspect-archive { max-width: 680px; }
.aspect-archive__current { background: var(--color-iron); border: 1px solid var(--color-chain); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.aspect-archive__label { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-chain); margin-bottom: 0.5rem; }
.aspect-archive__text { font-family: var(--font-body); font-size: var(--text-2xl); color: var(--color-pale-gold); font-style: italic; margin-bottom: 0.5rem; }
.aspect-archive__desc { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); }
.aspect-archive__history-title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text-secondary); margin-bottom: 1rem; }
.aspect-archive__timeline { position: relative; padding-left: 1.5rem; border-left: 2px solid var(--color-graphite); }
.aspect-archive__entry { position: relative; margin-bottom: 1.5rem; }
.aspect-archive__entry::before { content: ""; position: absolute; left: -1.625rem; top: 0.4rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-graphite); border: 2px solid var(--color-iron); }
.aspect-archive__entry-meta { display: flex; gap: 0.75rem; align-items: baseline; margin-bottom: 0.3rem; }
.aspect-archive__version { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.aspect-archive__trigger { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-caution); }
.aspect-archive__date { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); }
.aspect-archive__entry-text { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-text-secondary); font-style: italic; }
.aspect-archive__note { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.25rem; }

/* Entry point link on character sheet */
.forge-entry-link { display: inline-block; background: linear-gradient(135deg, rgba(139,26,46,0.2), rgba(196,151,58,0.1)); border: 1px solid var(--color-chain); border-radius: var(--radius); padding: 0.6rem 1.25rem; font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-chain); text-decoration: none; letter-spacing: 0.04em; transition: background 0.2s; }
.forge-entry-link:hover { background: linear-gradient(135deg, rgba(139,26,46,0.35), rgba(196,151,58,0.2)); }

/* ── Character Sheet (Phase 2 interactive layout) ── */
.character-sheet-page { max-width: 1200px; margin: 0 auto; }
.character-sheet-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.character-sheet-header__info { display: flex; gap: 1rem; align-items: center; }
.character-sheet-header__name { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-pale-gold); margin: 0 0 0.5rem; }
.character-sheet-header__badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.character-sheet-header__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-start; }
.character-portrait--sheet { width: 80px; height: 80px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; border: 2px solid var(--color-graphite); }
.character-portrait--sheet .character-portrait__img { width: 100%; height: 100%; object-fit: cover; }

.character-sheet-grid { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .character-sheet-grid { grid-template-columns: 1fr; } }
.character-sheet-col--left { grid-column: 1; }
.character-sheet-col--centre { grid-column: 2; }
.character-sheet-col--right { grid-column: 3; }

.cs-section { background: var(--color-iron); border: 1px solid var(--color-graphite); border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.cs-section__title { font-family: var(--font-display); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.cs-section__title-btn { font-family: var(--font-ui); font-size: var(--text-xs); }
.cs-stats { display: flex; gap: 0.75rem; justify-content: space-between; }
.stat-block { text-align: center; }
.stat-block__value { display: block; font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-pale-gold); }
.stat-block__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* Fate Points */
.fate-points { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.fate-coin { font-size: 1.4rem; line-height: 1; color: var(--color-pale-gold); }
.fate-coin--filled { opacity: 1; }
.fate-coin:not(.fate-coin--filled) { opacity: 0.3; }
.fate-controls { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fate-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); }
.btn--xs { padding: 0.2rem 0.5rem; font-size: var(--text-xs); }

/* Stress Tracks */
.stress-track { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.stress-track__label { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); width: 56px; flex-shrink: 0; }
.stress-track__boxes { display: flex; gap: 0.3rem; }
.stress-box { background: none; border: none; cursor: pointer; font-size: 1.2rem; color: var(--color-text-muted); padding: 0; line-height: 1; transition: color 0.15s; }
.stress-box:hover { color: var(--color-blood); }
.stress-box--filled { color: var(--color-blood); }
/* Remove default button_to form styling */
.stress-track__boxes form { display: inline; margin: 0; }
.stress-track__boxes form button { background: none; border: none; cursor: pointer; font-size: 1.2rem; color: var(--color-text-muted); padding: 0 0.1rem; line-height: 1; transition: color 0.15s; }
.stress-track__boxes form button:hover { color: var(--color-blood); }
.stress-track__boxes .stress-box--filled button,
.stress-track__boxes form.stress-box--filled button { color: var(--color-blood); }

/* Consequences */
.consequence-slot { margin-bottom: 0.6rem; }
.consequence-slot__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 0.2rem; }
.consequence-slot__form { display: flex; }
.consequence-slot__input { width: 100%; font-size: var(--text-sm); padding: 0.35rem 0.6rem; }
.consequence-slot__value { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); font-style: italic; }

/* Skills Grid */
.skill-tier { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-graphite); }
.skill-tier:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.skill-tier__label { font-family: var(--font-display); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-chain); width: 120px; flex-shrink: 0; }
.skill-tier--great .skill-tier__label { color: var(--color-pale-gold); }
.skill-tier--good .skill-tier__label { color: var(--color-text-secondary); }
.skill-tier--fair .skill-tier__label { color: var(--color-text-muted); }
.skill-tier--average .skill-tier__label { color: var(--color-text-muted); opacity: 0.75; }
.skill-tier__skills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.skill-pill { font-family: var(--font-ui); font-size: var(--text-xs); background: var(--color-graphite); border-radius: var(--radius); padding: 0.2rem 0.5rem; color: var(--color-text-secondary); }

/* Skills Edit Page */
.skills-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; margin-bottom: 1.5rem; }
.skills-edit-row { display: flex; align-items: center; gap: 0.5rem; }
.skills-edit-row__name { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); width: 110px; flex-shrink: 0; }
.skills-edit-row__select { flex: 1; padding: 0.3rem 0.5rem; font-size: var(--text-sm); }

/* ── Aspect Invoke Panel (scene roll) ── */
.scene-fate-counter { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.75rem; font-size: var(--text-sm); }
.fate-pip { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1; }
.fate-pip--full { color: var(--color-pale-gold); }
.fate-label-sm { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-left: 0.25rem; }

.scene-invoke-panel { border-top: 1px solid var(--color-graphite); margin-top: 0.75rem; padding-top: 0.75rem; }
.scene-invoke-panel__label { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.scene-invoke-panel__aspects { display: flex; flex-direction: column; gap: 0.35rem; }

.invoke-aspect { display: flex; align-items: baseline; gap: 0.6rem; cursor: pointer; padding: 0.35rem 0.5rem; border-radius: var(--radius); transition: background 0.15s; }
.invoke-aspect:hover { background: rgba(196,151,58,0.06); }
.invoke-aspect__check { accent-color: var(--color-chain); cursor: pointer; flex-shrink: 0; }
.invoke-aspect__name { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-pale-gold); font-style: italic; flex: 1; }
.invoke-aspect__meta { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); display: flex; gap: 0.5rem; align-items: baseline; }
.invoke-aspect__cost { color: var(--color-chain); }

.scene-roll-panel__actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-graphite); }

/* Roll result display */
.roll-outcome { font-weight: 700; }
.roll-outcome--fail { color: var(--color-blood); }
.roll-outcome--tie { color: var(--color-caution); }
.roll-outcome--succeed { color: var(--color-pale-gold); }
.roll-outcome--succeed_with_style { color: #5cde88; }
.invoke-note { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-chain); margin-left: 0.4rem; }

/* ── Bond trust controls ── */
.trust-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.trust-count { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); min-width: 2.5rem; }
.trust-controls { display: flex; gap: 0.25rem; }
.trust-btn { padding: 0.15rem 0.5rem; font-size: var(--text-sm); line-height: 1.2; }
.bond-strained-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-blood); font-weight: 600; }

/* Discord join code display */
.discord-join-code { font-family: monospace; font-size: var(--text-base); background: var(--color-graphite); padding: 0.2rem 0.5rem; border-radius: var(--radius); letter-spacing: 0.1em; color: var(--color-pale-gold); display: inline-block; margin-right: 0.75rem; }

/* ── Meta Wallet (character sheet) ── */
.meta-wallet { transition: box-shadow 0.4s, border-color 0.4s; }
.meta-wallet--flash { box-shadow: 0 0 0 2px var(--color-pale-gold); border-color: var(--color-pale-gold); }

.meta-wallet__prompts { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.75rem; }

.meta-prompt-card { display: flex; align-items: flex-start; gap: 0.6rem; background: rgba(139,26,139,0.08); border: 1px solid rgba(139,26,139,0.3); border-radius: var(--radius); padding: 0.6rem 0.75rem; }
.meta-prompt-card__icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.2; }
.meta-prompt-card__body { flex: 1; min-width: 0; }
.meta-prompt-card__msg { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-primary); margin: 0 0 0.2rem; line-height: 1.4; }
.meta-prompt-card__expiry { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
.meta-prompt-card__actions { display: flex; gap: 0.3rem; flex-shrink: 0; align-self: center; }

.meta-wallet__tokens { display: flex; flex-direction: column; gap: 0.4rem; }

.meta-token-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; background: var(--color-graphite); border-radius: var(--radius); transition: opacity 0.3s; }
.meta-token-badge--empty { opacity: 0.4; }
.meta-token-badge__icon { font-size: 1.1rem; line-height: 1; }
.meta-token-badge__count { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-pale-gold); min-width: 1.8rem; }
.meta-token-badge__name { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: 600; }
.meta-token-badge__effect { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-left: auto; font-style: italic; }

/* ── Meta toast notification ── */
.meta-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9000; display: flex; align-items: flex-start; gap: 0.6rem; background: var(--color-iron); border: 1px solid rgba(139,26,139,0.5); border-radius: var(--radius-lg); padding: 0.75rem 1rem; max-width: 380px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); transform: translateY(2rem); opacity: 0; transition: transform 0.3s, opacity 0.3s; pointer-events: none; }
.meta-toast--visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.meta-toast__icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1.2; }
.meta-toast__body { flex: 1; min-width: 0; }
.meta-toast__msg { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-primary); margin: 0; line-height: 1.4; }
.meta-toast__close { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.1rem 0.2rem; flex-shrink: 0; }
.meta-toast__close:hover { color: var(--color-text-primary); }

/* ── Scene meta spend panel ── */
.scene-meta-spend-panel { margin-top: 0.6rem; }
.scene-meta-spend-panel__select { width: 100%; font-size: var(--text-sm); }

/* ── Scene meta token spend post ── */
.scene-post--meta { font-family: var(--font-ui); font-size: var(--text-sm); color: #b06ab3; background: rgba(139,26,139,0.06); border-left: 3px solid rgba(139,26,139,0.4); padding: 0.4rem 0.75rem; border-radius: var(--radius); margin: 0.25rem 0; }

/* ── Phase 7: Campaign cover image ── */
.campaign-cover { width: 100%; max-height: 280px; overflow: hidden; border-radius: var(--radius-lg); margin-bottom: 1.25rem; border: 1px solid var(--color-graphite); }
.campaign-cover__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Phase 7: Scene art ── */
.scene-art { width: 100%; max-height: 220px; overflow: hidden; border-bottom: 1px solid var(--color-graphite); }
.scene-art__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Phase 7: Form image preview ── */
.form-image-preview { margin-bottom: 0.5rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-graphite); display: inline-block; }
.form-image-preview__img { display: block; max-height: 180px; max-width: 100%; object-fit: cover; }

/* ── Phase 7: Character card portrait ── */
.character-card__portrait { width: 100%; height: 120px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; margin: -1rem -1rem 0.75rem; width: calc(100% + 2rem); }
.character-card__portrait-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.character-chip__portrait { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 0.25rem; border: 1px solid var(--color-graphite); }

/* ── Phase 7: Campaign card scene art thumbnail ── */
.campaign-card__art { height: 80px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; margin: -1rem -1rem 0.75rem; width: calc(100% + 2rem); }
.campaign-card__art-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Phase 7: NPC list ── */
.npc-section { margin-top: 1.5rem; }
.npc-list { display: flex; flex-direction: column; gap: 0.25rem; }
.npc-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0.5rem; background: var(--color-iron); border: 1px solid var(--color-graphite); border-radius: var(--radius); font-size: var(--text-sm); }
.npc-row__name { flex: 1; font-family: var(--font-ui); color: var(--color-text-secondary); }
.npc-row__archetype { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── Phase 7: World location grid ── */
.location-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.location-card { background: var(--color-iron); border: 1px solid var(--color-graphite); border-radius: var(--radius-lg); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; transition: border-color 0.15s; }
.location-card:hover { border-color: var(--color-chain); }
.location-card__header { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.location-card__icon { font-size: 1.1rem; flex-shrink: 0; }
.location-card__name { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-text-primary); flex: 1; }
.location-card__name a { color: inherit; text-decoration: none; }
.location-card__name a:hover { color: var(--color-chain); }
.location-card__desc { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; line-height: 1.5; flex: 1; }
.location-card__meta { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); display: flex; gap: 0.75rem; align-items: center; }
.location-card__actions { display: flex; gap: 0.4rem; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--color-graphite); }

/* ── Character Development System ── */

/* Dev Panel Header */
.dev-panel-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem; }
.dev-panel-header__name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text-primary); margin: 0; }
.dev-panel-header__sub { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); margin: 0.25rem 0 0; }
.dev-panel-header__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Safeword banner */
.dev-safeword-banner { background: rgba(255,200,0,0.07); border: 1px solid rgba(255,200,0,0.3); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Dev panel grid */
.dev-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 768px) { .dev-panel-grid { grid-template-columns: 1fr; } }

/* Dev sections */
.dev-section { background: var(--color-iron); border: 1px solid var(--color-graphite); border-radius: var(--radius-lg); padding: 1.25rem; }
.dev-section--track { grid-column: 1 / -1; }
.dev-section--journal { grid-column: 1 / -1; }
.dev-section__title { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-text-secondary); margin: 0 0 1rem; }
.dev-section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }

/* Ascension Track visualization */
.ascension-track { display: flex; align-items: center; gap: 0; margin-bottom: 1.25rem; flex-wrap: wrap; }
.ascension-node { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.ascension-node__pip { font-size: 1.2rem; color: var(--color-text-muted); }
.ascension-node--active .ascension-node__pip { color: var(--color-chain); }
.ascension-node--past .ascension-node__pip { color: var(--color-text-secondary); }
.ascension-node__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; max-width: 80px; }
.ascension-node--active .ascension-node__label { color: var(--color-text-primary); }
.ascension-connector { flex: 1; height: 2px; background: var(--color-graphite); min-width: 20px; }
.ascension-connector--filled { background: var(--color-chain); opacity: 0.5; }
.ascension-crossroads { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-accent); padding: 0 0.25rem; }

/* Stage label */
.dev-stage-label { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-chain); }

/* DP Progress bar */
.dev-progress { margin-bottom: 1rem; }
.dev-progress__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 0.4rem; }
.dev-progress__bar { height: 4px; background: var(--color-graphite); border-radius: 2px; overflow: hidden; }
.dev-progress__fill { height: 100%; background: var(--color-chain); transition: width 0.4s ease; }
.dev-progress__hint { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; margin-top: 0.4rem; }

/* Crossroads Panel */
.dev-crossroads-panel { background: rgba(180,140,60,0.07); border: 1px solid rgba(180,140,60,0.25); border-radius: var(--radius); padding: 0.9rem 1rem; margin-bottom: 1rem; }
.dev-crossroads-panel__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.dev-crossroads-panel__hint { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; }
.dev-branch-note { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.5rem; }

/* Aspect cards */
.dev-aspect-card { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); border-left: 2px solid var(--color-chain); padding-left: 0.75rem; margin: 0.5rem 0; font-style: italic; }
.dev-aspect-card--crossroads { border-color: var(--color-accent); }
.dev-aspect-card--conditioning { border-color: rgba(200,80,80,0.5); }
.dev-aspect-card--legacy { border-color: rgba(180,180,180,0.3); color: var(--color-text-muted); }

/* Dev aspect pair */
.dev-aspect-pair { margin-bottom: 0.75rem; }
.dev-aspect-pair__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 0.25rem; }
.dev-aspect-pair__note { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.25rem; }

/* GM Actions */
.dev-gm-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-graphite); }
.dev-gm-actions__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.dev-gm-actions__buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.dev-milestone-form { display: flex; gap: 0.5rem; align-items: center; }
.dev-milestone-select { font-size: var(--text-sm) !important; padding: 0.3rem 0.5rem !important; }
.dev-crossroads-edit-form { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.dev-crossroads-input { font-size: var(--text-sm) !important; }
.dev-branch-input { font-size: var(--text-sm) !important; width: 150px !important; }

/* Path cards */
.dev-path-card { background: var(--color-obsidian); border: 1px solid var(--color-graphite); border-radius: var(--radius); padding: 0.9rem 1rem; margin-bottom: 0.75rem; }
.dev-path-card--mentor { border-left: 3px solid var(--color-chain); }
.dev-path-card--conditioning { border-left: 3px solid rgba(200,80,80,0.5); }
.dev-path-card__type { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.dev-path-card__partner { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-primary); }
.dev-path-card__status { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); }
.dev-path-empty { padding: 0.75rem; color: var(--color-text-muted); font-family: var(--font-ui); font-size: var(--text-sm); font-style: italic; }

/* Dev link */
.dev-link { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-chain); text-decoration: none; }
.dev-link:hover { text-decoration: underline; }

/* Shaping Intent */
.dev-shaping-intent { margin-bottom: 0.75rem; }
.dev-shaping-intent--card { background: rgba(80,60,20,0.08); border: 1px solid rgba(180,140,60,0.15); border-radius: var(--radius); padding: 0.9rem 1rem; margin-bottom: 1rem; }
.dev-shaping-intent__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.dev-shaping-intent__text { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; }
.dev-inline-edit { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }

/* Tension panel */
.dev-tension-panel { background: rgba(180,40,40,0.05); border: 1px solid rgba(180,40,40,0.15); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.dev-tension-panel__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.dev-tension-bar { height: 4px; background: var(--color-graphite); border-radius: 2px; overflow: hidden; margin-bottom: 0.4rem; }
.dev-tension-fill { height: 100%; background: rgba(200,60,60,0.7); transition: width 0.4s ease; }
.dev-tension-panel__count { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); }
.dev-tension-panel__warning { font-family: var(--font-ui); font-size: var(--text-sm); color: rgba(220,80,80,0.9); margin-top: 0.4rem; }
.dev-tension-warning { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(220,80,80,0.8); }
.dev-tension-change { font-family: var(--font-ui); font-size: var(--text-xs); }
.dev-tension-change--up { color: rgba(220,80,80,0.8); }
.dev-tension-change--down { color: rgba(80,180,80,0.8); }

/* Revoke section */
.dev-revoke-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-graphite); display: flex; align-items: baseline; gap: 0.75rem; }
.dev-revoke-btn { margin-top: 0.5rem; }
.dev-revoke-note { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; }
.dev-status-form { display: flex; gap: 0.5rem; align-items: center; }

/* Journal */
.dev-journal-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.dev-journal-entry { background: var(--color-obsidian); border-radius: var(--radius); padding: 0.75rem; }
.dev-journal-entry--full { padding: 1rem; }
.dev-journal-entry__meta { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.4rem; }
.dev-journal-entry__type { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); }
.dev-journal-entry__date { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); }
.dev-journal-entry__shared { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-chain); }
.dev-journal-entry__text { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; }
.dev-journal-form { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.dev-journal-form__footer { display: flex; gap: 0.75rem; align-items: center; }
.dev-journal-textarea { resize: vertical; min-height: 80px; }

/* Lesson / scene cards */
.dev-lesson-list { display: flex; flex-direction: column; gap: 0.75rem; }
.dev-lesson-card { background: var(--color-obsidian); border-radius: var(--radius); padding: 0.75rem 0.9rem; }
.dev-lesson-card__header { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.4rem; }
.dev-lesson-type { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-chain); text-transform: uppercase; letter-spacing: 0.05em; }
.dev-lesson-date { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); }
.dev-lesson-dp { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-secondary); }
.dev-lesson-card__desc { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); }
.dev-lesson-card__outcome { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; margin-top: 0.3rem; }
.dev-lesson-card__aspects { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.3rem; }
.dev-mentor-eye { background: rgba(80,60,20,0.1); border-left: 2px solid var(--color-accent); padding: 0.4rem 0.6rem; margin-top: 0.5rem; border-radius: 0 var(--radius) var(--radius) 0; }
.dev-mentor-eye__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-accent); margin-bottom: 0.2rem; }
.dev-mentor-eye__text { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); font-style: italic; }

/* Resonance badges */
.dev-resonance-badge--none { color: var(--color-text-muted); }
.dev-resonance-badge--possible { color: var(--color-chain); }
.dev-resonance-badge--likely { color: var(--color-accent); }
.dev-resonance-badge--confirmed { color: rgba(80,200,120,0.9); }
.dev-resonance-summary { background: var(--color-iron); border: 1px solid var(--color-graphite); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1.25rem; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); }
.dev-crossroads-flag { color: var(--color-accent); }
.dev-shadow-flag { color: var(--color-text-muted); }

/* Empty states */
.dev-empty { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; }

/* Legacy section */
.dev-legacy-item { margin-bottom: 0.75rem; }
.dev-legacy-item__source { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 0.25rem; }

/* Bond show page */
.dev-bond-header { margin-bottom: 1.5rem; }
.dev-bond-header__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text-primary); margin: 0 0 0.4rem; }
.dev-bond-header__pair { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 0.5rem; }
.dev-bond-aspects { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 640px) { .dev-bond-aspects { grid-template-columns: 1fr; } }
.dev-bond-track-summary { background: var(--color-iron); border: 1px solid var(--color-graphite); border-radius: var(--radius); padding: 0.6rem 0.9rem; margin-bottom: 1.25rem; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); }
.dev-bond-track-summary__label { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 0.2rem; }
.dev-section--close { background: rgba(100,30,30,0.06); border-color: rgba(200,60,60,0.2); }

/* Arc show page */
.dev-arc-header { margin-bottom: 1.5rem; }
.dev-arc-header__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text-primary); margin: 0 0 0.4rem; }
.dev-arc-header__pair { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 0.5rem; }

/* Dashboard */
.dev-dashboard-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem; }
.dev-dashboard-header__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text-primary); margin: 0; }
.dev-dashboard-header__campaign { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); margin: 0.25rem 0 0; }
.dev-dashboard-section { background: var(--color-iron); border: 1px solid var(--color-graphite); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.25rem; }
.dev-dashboard-section__title { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-text-secondary); margin: 0 0 0.75rem; }
.dev-alert { display: flex; align-items: center; gap: 0.75rem; background: rgba(180,140,60,0.07); border: 1px solid rgba(180,140,60,0.2); border-radius: var(--radius); padding: 0.6rem 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.dev-alert--safeword { background: rgba(255,200,0,0.05); border-color: rgba(255,200,0,0.2); }
.dev-alert__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.dev-alert__char { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); }
.dev-alert__char a { color: var(--color-chain); text-decoration: none; }
.dev-stage-columns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
@media (max-width: 900px) { .dev-stage-columns { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .dev-stage-columns { grid-template-columns: 1fr 1fr; } }
.dev-stage-col { display: flex; flex-direction: column; gap: 0.4rem; }
.dev-stage-col__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 0.3rem; border-bottom: 1px solid var(--color-graphite); margin-bottom: 0.25rem; }
.dev-stage-char { background: var(--color-obsidian); border-radius: var(--radius); padding: 0.4rem 0.5rem; display: flex; flex-direction: column; gap: 0.1rem; }
.dev-stage-char__name a { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-primary); text-decoration: none; }
.dev-stage-char__name a:hover { color: var(--color-chain); }
.dev-stage-char__arch { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); }
.dev-stage-char__dp { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); }
.dev-crossroads-pip { font-size: var(--text-xs); color: var(--color-accent); }
.dev-safeword-pip { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,200,0,0.7); }
.dev-bond-list { display: flex; flex-direction: column; gap: 0.5rem; }
.dev-bond-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; background: var(--color-obsidian); border-radius: var(--radius); font-family: var(--font-ui); font-size: var(--text-sm); flex-wrap: wrap; }
.dev-bond-row--crisis { border-left: 3px solid rgba(200,60,60,0.5); }
.dev-bond-row__mentor, .dev-bond-row__student, .dev-bond-row__dom, .dev-bond-row__slave { color: var(--color-text-primary); }
.dev-bond-row__arrow { color: var(--color-text-muted); }
.dev-bond-row__lessons, .dev-bond-row__scenes { color: var(--color-text-muted); font-size: var(--text-xs); }
.dev-char-table { display: flex; flex-direction: column; gap: 0.3rem; }
.dev-char-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.6rem; background: var(--color-obsidian); border-radius: var(--radius); font-family: var(--font-ui); font-size: var(--text-sm); flex-wrap: wrap; }
.dev-char-row__name a { color: var(--color-text-primary); text-decoration: none; }
.dev-char-row__name a:hover { color: var(--color-chain); }
.dev-char-row__arch, .dev-char-row__stage, .dev-char-row__dp { color: var(--color-text-muted); font-size: var(--text-xs); }

/* Character sheet — development mini panel */
.cs-section--development { border-left: 2px solid var(--color-chain); }
.cs-dev-stage { margin-bottom: 0.5rem; }
.cs-dev-stage__name { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-chain); }
.cs-dev-crossroads { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); border-left: 2px solid var(--color-accent); padding-left: 0.5rem; margin: 0.4rem 0; font-style: italic; }
.cs-dev-paused { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,200,0,0.7); }

/* Status badge variants for dev system */
.status-badge--proposed, .status-badge--consent_pending { background: rgba(120,120,180,0.12); color: rgba(150,150,220,0.9); }
.status-badge--active { background: rgba(80,180,80,0.1); color: rgba(100,200,100,0.9); }
.status-badge--inverting, .status-badge--aspect_proposed { background: rgba(180,140,60,0.1); color: rgba(200,160,80,0.9); }
.status-badge--inverted, .status-badge--affirmation { background: rgba(80,140,80,0.1); color: rgba(100,180,100,0.9); }
.status-badge--ruptured, .status-badge--reckoning { background: rgba(140,60,60,0.1); color: rgba(200,80,80,0.8); }
.status-badge--revoked { background: rgba(100,100,100,0.1); color: var(--color-text-muted); }
.status-badge--crisis { background: rgba(180,40,40,0.15); color: rgba(220,80,80,0.9); }

/* ─── Archetype Reference Panel ─── */
.dev-archetype-tabs { margin-top: 0.75rem; }
.dev-archetype-tab-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.dev-archetype-tab { background: var(--color-iron); border: 1px solid var(--color-graphite); color: var(--color-text-secondary); padding: 0.3rem 0.75rem; border-radius: 3px; cursor: pointer; font-size: var(--text-sm); font-family: var(--font-ui); transition: border-color 0.15s, color 0.15s; }
.dev-archetype-tab:hover { border-color: var(--color-chain); color: var(--color-chain); }
.dev-archetype-panel { display: none; }
.arch-panel { background: var(--color-iron); border: 1px solid var(--color-graphite); border-radius: 4px; padding: 1.25rem; }
.arch-panel__header { margin-bottom: 1rem; }
.arch-panel__name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-chain); margin: 0 0 0.5rem; }
.arch-panel__core-q { color: var(--color-text-secondary); font-style: italic; margin: 0; font-size: var(--text-sm); }
.arch-panel__shadow { background: rgba(139,26,46,0.07); border-left: 3px solid var(--color-collar); padding: 0.75rem 1rem; border-radius: 0 3px 3px 0; margin-bottom: 1.25rem; }
.arch-panel__shadow-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.35rem; }
.arch-panel__shadow-q { margin: 0; color: var(--color-pale-gold); font-size: var(--text-sm); font-style: italic; }
.arch-panel__sub-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin: 0 0 0.6rem; }
.arch-panel__stages, .arch-panel__branches { margin-bottom: 1.25rem; }
.arch-stage-row { border-bottom: 1px solid var(--color-graphite); padding: 0.6rem 0; }
.arch-stage-row:last-child { border-bottom: none; }
.arch-stage-row__header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.25rem; }
.arch-stage-row__num { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-ui); }
.arch-stage-row__name { font-size: var(--text-sm); color: var(--color-chain); font-family: var(--font-display); }
.arch-stage-row__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 0.25rem; }
.arch-stage-row__example-label { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0.25rem 0 0.1rem; }
.arch-stage-row__example { font-size: var(--text-sm); color: var(--color-pale-gold); font-style: italic; border-left: 2px solid var(--color-chain); padding-left: 0.6rem; margin: 0; }
.arch-branch-row { border: 1px solid var(--color-graphite); border-radius: 3px; padding: 0.75rem; margin-bottom: 0.5rem; }
.arch-branch-row--dramatic { border-color: rgba(139,26,46,0.4); }
.arch-branch-row__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.arch-branch-row__target { font-size: var(--text-sm); color: var(--color-chain); font-family: var(--font-display); }
.arch-branch-row__trigger, .arch-branch-row__transition { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0.25rem 0; }
.arch-branch-row__note { margin: 0.25rem 0; }
.arch-branch-row__questions { margin: 0.4rem 0; }
.arch-branch-q { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0.2rem 0; }
.arch-branch-q__milestone { color: var(--color-chain); font-size: var(--text-xs); text-transform: uppercase; margin-right: 0.4rem; }

/* ── Milestone Reflections ── */
.dev-reflection-card { background: rgba(184,134,11,0.06); border: 1px solid rgba(184,134,11,0.25); border-radius: 4px; padding: 1rem; margin-bottom: 1rem; }
.dev-reflection-card__prompt { font-size: var(--text-base); color: var(--color-pale-gold); font-style: italic; border-left: 3px solid var(--color-pale-gold); padding-left: 0.75rem; margin: 0 0 0.6rem; }
.dev-reflection-card__meta { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 0.75rem; }
.dev-reflection-form { margin-top: 0.5rem; }

/* ── Branch Conversation (GM panel) ── */
.dev-branch-convo-card { border: 1px solid var(--color-graphite); border-radius: 4px; padding: 0.75rem; margin-bottom: 0.75rem; }
.dev-branch-convo-card--dramatic { border-color: rgba(139,26,46,0.45); }
.dev-branch-convo-card__header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.dev-branch-convo-card__target { font-size: var(--text-sm); color: var(--color-chain); font-family: var(--font-display); }
.dev-branch-weight-badge { font-size: var(--text-xs); padding: 0.1rem 0.4rem; border-radius: 3px; font-family: var(--font-ui); text-transform: uppercase; }
.dev-branch-weight-badge--adjacent { background: rgba(66,184,131,0.15); color: #42b883; }
.dev-branch-weight-badge--dramatic { background: rgba(139,26,46,0.2); color: var(--color-chain); }
.dev-branch-convo-card__trigger { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 0.4rem; }
.dev-branch-convo-card__transition { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0.4rem 0 0; font-style: italic; }
.dev-branch-convo-card__questions { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0.4rem 0 0; padding-left: 1rem; }
.dev-branch-convo-card__questions li { margin-bottom: 0.3rem; }
.dev-branch-convo-card__milestone { color: var(--color-chain); font-size: var(--text-xs); text-transform: uppercase; margin-right: 0.4rem; }

/* ── GM Aspect Overview ── */
.gm-approval-queue { background: rgba(184,134,11,0.08); border: 1px solid rgba(184,134,11,0.3); border-radius: 6px; padding: 1.25rem; margin-bottom: 2rem; }
.gm-ao-section__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-pale-gold); margin: 0 0 0.5rem; }
.gm-approval-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.gm-approval-card { background: var(--color-surface); border: 1px solid var(--color-graphite); border-radius: 4px; padding: 1rem; }
.gm-approval-card__name { font-size: var(--text-base); color: var(--color-text-primary); margin-bottom: 0.5rem; }
.gm-approval-card__note { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; margin: 0 0 0.5rem; }
.gm-approval-form__note { width: 100%; margin-bottom: 0.5rem; }
.gm-approval-form__actions { display: flex; gap: 0.5rem; }

.gm-ao-character { border: 1px solid var(--color-graphite); border-radius: 6px; padding: 1.25rem; margin-bottom: 1.5rem; }
.gm-ao-character__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.gm-ao-character__name { font-size: var(--text-lg); color: var(--color-text-primary); display: flex; align-items: center; gap: 0.5rem; }
.gm-ao-character__name a { color: var(--color-chain); text-decoration: none; }
.gm-ao-character__forge { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.gm-ao-aspect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.gm-ao-aspect-card { border: 1px solid var(--color-graphite); border-radius: 4px; padding: 0.75rem; background: var(--color-surface-raised); }
.gm-ao-aspect-card--trouble { border-color: rgba(139,26,46,0.4); }
.gm-ao-aspect-card--bond { border-color: rgba(66,184,131,0.3); }
.gm-ao-aspect-card__type { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; }
.gm-ao-aspect-card__name { font-size: var(--text-sm); color: var(--color-text-primary); font-style: italic; margin-bottom: 0.5rem; }
.gm-ao-aspect-card__compel-note { font-size: var(--text-xs); color: var(--color-pale-gold); background: rgba(184,134,11,0.08); border-radius: 3px; padding: 0.3rem 0.5rem; margin-bottom: 0.4rem; }
.gm-ao-aspect-card__compel-icon { margin-right: 0.3rem; }
.gm-ao-compel-form summary { font-size: var(--text-xs); color: var(--color-text-muted); cursor: pointer; padding: 0.25rem 0; list-style: none; }
.gm-ao-compel-form summary:hover { color: var(--color-pale-gold); }
.gm-ao-compel-form__body { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.gm-ao-compel-form__textarea { font-size: var(--text-sm); }
.gm-ao-empty { color: var(--color-text-muted); font-size: var(--text-sm); padding: 0.5rem 0; }

/* ── Forge Approval Status ── */
.forge-approval-status { margin: 1.5rem 0; }
.forge-approval-status__badge { padding: 0.75rem 1rem; border-radius: 4px; font-size: var(--text-sm); }
.forge-approval-status__badge--approved { background: rgba(66,184,131,0.12); border: 1px solid rgba(66,184,131,0.35); color: #42b883; }
.forge-approval-status__badge--pending { background: rgba(184,134,11,0.1); border: 1px solid rgba(184,134,11,0.3); color: var(--color-pale-gold); }
.forge-approval-status__note { border-left: 3px solid rgba(184,134,11,0.5); padding-left: 0.75rem; margin: 0.75rem 0 0; font-style: italic; color: var(--color-text-secondary); }

/* ── Conditioning Arc Proposal / Closure Workflow ── */
.dev-crisis-banner { background: rgba(139,26,46,0.12); border: 1px solid rgba(139,26,46,0.5); border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.dev-crisis-banner__title { color: var(--color-chain); font-family: var(--font-display); margin: 0 0 0.4rem; }
.dev-crisis-form { margin-top: 0.75rem; }
.dev-section--proposal, .dev-section--gm-review, .dev-section--slave-review { border: 1px solid rgba(184,134,11,0.3); border-radius: 4px; padding: 1rem; margin-bottom: 1.25rem; }
.dev-proposal-form { display: flex; flex-direction: column; gap: 0.75rem; }
.dev-reckoning-answer { background: rgba(0,0,0,0.2); border-radius: 4px; padding: 0.75rem; margin: 0.75rem 0; }
.dev-reckoning-answer__label { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 0.25rem; }
.dev-reckoning-answer__text { font-size: var(--text-sm); color: var(--color-text-secondary); font-style: italic; margin: 0; }
.dev-gm-review-actions, .dev-slave-review-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.dev-close-arc-details summary, .dev-status-details summary { font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; padding: 0.5rem 0; list-style: none; }
.dev-close-arc-body, .dev-status-details { padding-top: 0.75rem; }
.dev-close-arc-form { display: flex; flex-direction: column; gap: 0.75rem; }

/* ── Archetype Change Form ── */
.dev-archetype-change-form { background: rgba(139,26,46,0.08); border: 1px solid rgba(139,26,46,0.3); border-radius: 4px; padding: 0.75rem; margin-top: 0.75rem; }
.dev-archetype-change-inner { margin-top: 0.4rem; }

/* ── Mentor's Eye in Dashboard ── */
.dev-mentor-eye-list { display: flex; flex-direction: column; gap: 0.75rem; }
.dev-mentor-eye-card { background: var(--color-surface-raised); border: 1px solid var(--color-graphite); border-radius: 4px; padding: 0.75rem; }
.dev-mentor-eye-card__header { font-size: var(--text-sm); color: var(--color-text-primary); margin: 0 0 0.35rem; display: flex; justify-content: space-between; }
.dev-mentor-eye-card__date { color: var(--color-text-muted); font-size: var(--text-xs); }
.dev-mentor-eye-card__text { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; font-style: italic; }

/* ── Stunts ── */
.stunt-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.stunt-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-graphite); }
.stunt-row:last-child { border-bottom: none; }
.stunt-row--sheet { padding: 0.4rem 0; }
.stunt-row__body { flex: 1; }
.stunt-row__name { font-size: var(--text-sm); color: var(--color-text-primary); font-weight: 600; }
.stunt-row__skill { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: 0.3rem; }
.stunt-row__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0.2rem 0 0; }
.stunt-row__remove { flex-shrink: 0; }
.stunt-add-form { border-top: 1px solid var(--color-graphite); padding-top: 1rem; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }

/* ── Safety tools ───────────────────────────────────────────── */
.safety-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0; }
.btn--safeword { background: var(--color-safe, #1A5C8B); color: #fff; border-color: transparent; }
.btn--yellowcard { background: var(--color-caution, #C47C1A); color: #fff; border-color: transparent; }
.safety-toast { border-color: var(--color-safe, #1A5C8B); }
.checkin-btn--green { background: #2f7a3b; color: #fff; }
.checkin-btn--yellow { background: var(--color-caution, #C47C1A); color: #fff; }
.checkin-btn--red { background: #9b1c1c; color: #fff; }
.participant-chip__flag { margin-left: 0.25rem; }


/* ==== VISUAL PASS (Phase 8) =============================================
   Shared classes several pages relied on without styles, plus the world
   builder, dashboard and search. */

.page-title { font-size: var(--text-3xl); margin-bottom: 0.25rem; }
.page-subtitle { color: var(--color-text-secondary); font-family: var(--font-ui); font-size: var(--text-sm); margin-bottom: 1.5rem; }
.section-title { font-size: var(--text-xl); margin: 1.5rem 0 0.75rem; }
.resource-page { padding-bottom: 2rem; }
.resource-header__subtitle { color: var(--color-text-secondary); font-family: var(--font-ui); font-size: var(--text-sm); }

.btn--accent { background: var(--color-collar); color: var(--color-pale-gold); border-color: var(--color-collar); }
.btn--accent:hover { background: #a3233a; border-color: #a3233a; text-decoration: none; }

.form-input--narrow { max-width: 10rem; }
.form-input--inline { width: auto; max-width: 10rem; padding: 0.25rem 0.5rem; font-size: var(--text-xs); margin-left: auto; }
.form-checkbox, .form-check { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); }
.form-errors, .form__error-banner { background: rgba(139, 26, 46, 0.15); border: 1px solid var(--color-collar); border-radius: var(--radius); color: var(--color-pale-gold); font-family: var(--font-ui); font-size: var(--text-sm); padding: 0.75rem 1rem; margin-bottom: 1rem; }

/* campaign_spawns uses BEM-style form__* names */
.form__field { margin-bottom: 1.25rem; }
.form__field--checkbox { display: flex; align-items: center; gap: 0.5rem; }
.form__input, .form__select, .form__textarea { width: 100%; background: var(--color-iron); border: 1px solid var(--color-graphite); border-radius: var(--radius); color: var(--color-text-primary); font-family: var(--font-ui); font-size: var(--text-sm); padding: 0.55rem 0.75rem; }
.form__textarea { resize: vertical; min-height: 80px; }
.form__input:focus, .form__select:focus, .form__textarea:focus { border-color: var(--color-chain); outline: none; }

.data-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-sm); margin-bottom: 1.5rem; }
.data-table th { text-align: left; color: var(--color-text-muted); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--text-xs); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-graphite); }
.data-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-graphite); color: var(--color-text-secondary); vertical-align: top; }
.data-table tr:hover td { background: var(--color-obsidian); }
@media (max-width: 680px) { .data-table { display: block; overflow-x: auto; } }

/* Dashboard */
.campaign-nav--gm { margin-top: -1.25rem; border-bottom-style: dashed; }
.campaign-nav__label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; align-self: center; margin-right: 0.25rem; }
.campaign-notice { background: rgba(196, 124, 26, 0.12); border-left: 3px solid var(--color-caution); padding: 0.75rem 1rem; font-family: var(--font-ui); font-size: var(--text-sm); margin-bottom: 1.5rem; border-radius: var(--radius); }

.bond-map { margin: 0; }
.bond-map svg { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.bond-map__edge { stroke-width: 2; stroke-linecap: round; }
.bond-map__edge--play_partner { stroke: var(--color-text-muted); }
.bond-map__edge--collared { stroke: var(--color-chain); stroke-width: 3; }
.bond-map__edge--contracted { stroke: var(--color-pale-gold); stroke-width: 4; }
.bond-map__edge--house_bound { stroke: var(--color-collar); stroke-width: 5; }
.bond-map__edge--strained { stroke-dasharray: 4 5; opacity: 0.6; }
.bond-map__node { stroke: var(--color-void); stroke-width: 2; }
.bond-map__node--dom { fill: var(--color-dom); }
.bond-map__node--sub { fill: var(--color-sub); }
.bond-map__node--switch { fill: var(--color-chain); }
.bond-map a:hover .bond-map__node { stroke: var(--color-pale-gold); }
.bond-map__label { fill: var(--color-text-secondary); font-family: var(--font-ui); font-size: 11px; }
.bond-map__legend { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.5rem; }
.bond-map__key::before { content: ""; display: inline-block; width: 1.25rem; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: 0.35rem; }
.bond-map__key--play_partner::before { border-color: var(--color-text-muted); }
.bond-map__key--collared::before { border-color: var(--color-chain); }
.bond-map__key--contracted::before { border-color: var(--color-pale-gold); }
.bond-map__key--house_bound::before { border-color: var(--color-collar); }
.bond-map__key--strained::before { border-top-style: dashed; border-color: var(--color-text-secondary); }

.activity-feed { list-style: none; display: flex; flex-direction: column; gap: 0.1rem; }
.activity-feed__item { display: grid; grid-template-columns: 1.75rem 1fr auto; gap: 0.5rem; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--color-graphite); }
.activity-feed__icon { text-align: center; }
.activity-feed__text { color: var(--color-text-secondary); }
.activity-feed__time { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }

/* Search */
.search-form { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
.search-form--inline { max-width: 420px; margin-bottom: 1.5rem; }
.search-results { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.search-results__excerpt { color: var(--color-text-secondary); font-size: var(--text-sm); margin-top: 0.15rem; }

/* World builder */
.character-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.4rem; }
.character-picker__item { display: flex; align-items: center; gap: 0.5rem; background: var(--color-iron); border: 1px solid var(--color-graphite); border-radius: var(--radius); padding: 0.4rem 0.6rem; font-family: var(--font-ui); font-size: var(--text-sm); cursor: pointer; }
.character-picker__item:has(input:checked) { border-color: var(--color-chain); }

.plot-thread { border-left: 3px solid var(--color-graphite); }
.plot-thread--open { border-left-color: var(--color-chain); }
.plot-thread--advancing { border-left-color: var(--color-collar); }
.plot-thread--resolved { border-left-color: var(--color-trust); opacity: 0.8; }
.plot-thread--dormant, .plot-thread--abandoned { opacity: 0.6; }

.house-card { border-top: 3px solid var(--house-colour, var(--color-chain)); }
.house-card__motto { font-style: italic; color: var(--color-text-secondary); margin: 0.25rem 0 0.5rem; }
.house-crest { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.5rem; background: var(--house-colour, var(--color-chain)); color: var(--color-void); font-family: var(--font-display); font-weight: 700; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); overflow: hidden; }
.house-crest--lg { width: 4rem; height: 4.5rem; font-size: var(--text-2xl); }
.house-crest__img { width: 100%; height: 100%; object-fit: cover; }
.house-header { border-bottom: 2px solid var(--house-colour, var(--color-chain)); padding-bottom: 1rem; }
.house-header__identity { display: flex; gap: 1rem; align-items: center; }
.house-blazon { color: var(--color-text-secondary); margin: 1rem 0; }
.house-roster { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.house-roster li { display: flex; gap: 0.6rem; align-items: baseline; }
.house-roster__rank { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.timeline { list-style: none; position: relative; padding-left: 1.5rem; border-left: 2px solid var(--color-graphite); }
.timeline__event { position: relative; display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0 0 1.5rem; }
.timeline__event::before { content: ""; position: absolute; left: -1.95rem; top: 0.45rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-chain); border: 2px solid var(--color-void); }
.timeline__event--gm::before { background: var(--color-collar); }
.timeline__date { font-family: var(--font-display); color: var(--color-chain); font-size: var(--text-sm); padding-top: 0.15rem; }
.timeline__title { font-size: var(--text-lg); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.timeline__desc { color: var(--color-text-secondary); margin: 0.25rem 0; }
@media (max-width: 600px) { .timeline__event { grid-template-columns: 1fr; gap: 0.15rem; } }

.gm-notes { min-height: 50vh; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; }