/* D&D Suite — character-sheet + roster CSS, ported from Charakterbogen.dc.html (SPEC §8 / §8d).
 *
 * The prototype was 99% inline styles + runtime style-hover attrs; per D1/§8d those become real
 * classes + :hover rules here so the strict CSP (style-src 'self') holds. Palette/variables come
 * from app.css; this file adds the sheet-specific colours, layout, and section styling. Every
 * value is matched to the design source (cards, pills, HP bar, ability blocks, story boxes). */

:root {
  --hp-amber: #d39a5e;
  --species-green: #9bbf9b;
  --species-warm: #cf9d7c;
  --feat-blue: #9bb0cf;
  --name-bright: #f4ead2;
}

/* ============================ Roster dashboard ============================ */
.roster-head { margin: 0 auto 1.5rem; max-width: 1100px; padding: 0 1.25rem; }
.roster-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.pc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: var(--shadow);
  color: var(--cream);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pc-card:hover { border-color: var(--gold); text-decoration: none; transform: translateY(-2px); }
.pc-card__portrait {
  flex: none;
  width: 64px; height: 64px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(150deg, var(--ring, var(--gold)), rgba(201, 166, 98, 0.12));
}
.pc-card__portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #241c11; }
.pc-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-card__name { font-family: var(--font-head); font-size: 1.4rem; color: var(--name-bright); }
.pc-card__tagline { font-size: 0.8rem; color: var(--gold-dim); font-variant: small-caps; letter-spacing: 0.04em; }
.pc-card__subtitle { font-size: 0.85rem; font-style: italic; color: var(--muted); }

/* ============================ Sheet shell ============================ */
.sheet { max-width: 1240px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
  margin-top: 22px;
}
.sheet-grid--story { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 30px; }
.sheet-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
@media (max-width: 900px) {
  .sheet-grid, .sheet-grid--story { grid-template-columns: 1fr; }
}

.sec { display: block; }
.sec-foot { margin-top: 10px; }
.back-link { display: inline-block; margin-top: 10px; font-size: 0.85rem; color: var(--muted); }

/* ---- Section header (small-caps + fading rule) ---- */
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.sec-head__title {
  font-family: var(--font-head-sc);
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.sec-head__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.sec-head__edit {
  background: none; border: 1px solid var(--line); color: var(--gold-dim);
  font-family: var(--font-body); font-size: 0.75rem; padding: 3px 10px;
  border-radius: 6px; cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.sec-head__edit:hover { border-color: var(--gold); color: var(--cream); }

/* ============================ Identity header band ============================ */
.identity {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px;
  background: linear-gradient(180deg, var(--bg-raise), var(--bg-panel));
  border: 1px solid var(--line);
  border-radius: 16px;
}
.identity__avatar {
  flex: none; width: 78px; height: 78px; border-radius: 50%; padding: 3px;
  background: linear-gradient(150deg, var(--ring, var(--gold)), rgba(201, 166, 98, 0.12));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.identity__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #241c11; }
.identity__main { flex: 1; min-width: 0; }
.identity__name { font-family: var(--font-head); font-size: 2.1rem; line-height: 1.05; color: var(--name-bright); margin: 0; }
.identity__subtitle { font-style: italic; font-size: 0.95rem; color: #b6a98c; margin: 4px 0 0; }
.identity__meta { display: grid; grid-template-columns: auto auto; gap: 2px 10px; text-align: right; font-size: 0.85rem; }
.identity__label { font-family: var(--font-head-sc); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
.identity__value { color: var(--muted); }
.identity__insp {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 70px; height: 64px; border-radius: 12px; gap: 4px;
  background: var(--bg); border: 1px solid var(--line-soft); color: #5c5142;
}
.identity__insp.is-active { background: rgba(201, 166, 98, 0.14); border-color: var(--gold); color: #e6c987; }
.identity__insp-mark { font-size: 1.1rem; }
.identity__insp-text { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ============================ Combat band ============================ */
.combat-band { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 14px; }
.stat-card {
  background: var(--bg-panel); border: 1px solid rgba(201, 166, 98, 0.28); border-radius: 13px;
  padding: 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 88px;
}
.stat-card__label { font-family: var(--font-head-sc); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); }
.stat-card__value { font-family: var(--font-head); font-size: 2.2rem; line-height: 1; color: var(--name-bright); }
.stat-card__value--sm { font-size: 1.5rem; }
.stat-card__foot { font-size: 0.62rem; color: var(--muted-2); }

.hp-box {
  flex: 1 1 280px; min-width: 240px;
  background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: 13px;
  padding: 13px 16px; display: flex; flex-direction: column; gap: 9px; justify-content: center;
}
.hp-box__top { display: flex; align-items: baseline; gap: 6px; }
.hp-box__cur { font-family: var(--font-head); font-size: 2.2rem; line-height: 1; color: var(--name-bright); }
.hp-box__sep, .hp-box__max { font-family: var(--font-head); font-size: 1.3rem; color: var(--muted); }
.hp-box__temp { margin-left: auto; font-size: 0.8rem; color: var(--species-green); }
.hp-box__label { font-family: var(--font-head-sc); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); }
.hp-bar { position: relative; height: 10px; border-radius: 5px; background: #0f0c08; border: 1px solid var(--line-faint); overflow: hidden; }
.hp-bar__fill { display: block; height: 100%; border-radius: 5px; transition: width 0.3s, background 0.3s; }

.hd-box, .death-box {
  background: var(--bg-panel); border: 1px solid rgba(201, 166, 98, 0.16); border-radius: 13px;
  padding: 13px 16px; display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.death-box { border-color: rgba(207, 131, 124, 0.22); align-items: flex-start; }
.pips { display: flex; gap: 4px; flex-wrap: wrap; max-width: 120px; justify-content: center; }
.pip { width: 14px; height: 18px; border-radius: 3px; background: var(--gold); border: 1px solid var(--gold); }
.pip.is-used { background: #2a2118; border-color: var(--line); }

.death-box__label { font-family: var(--font-head-sc); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--danger); }
.death-row { display: flex; align-items: center; gap: 6px; }
.death-row__cap { font-size: 0.62rem; color: var(--muted-2); width: 38px; }
.death-pip { width: 15px; height: 15px; border-radius: 50%; background: transparent; }
.death-pip--s { border: 1px solid rgba(201, 166, 98, 0.4); }
.death-pip--s.is-on { background: var(--gold); border-color: var(--gold); }
.death-pip--f { border: 1px solid rgba(207, 131, 124, 0.4); }
.death-pip--f.is-on { background: var(--danger); border-color: var(--danger); }

.passive-box {
  background: var(--bg); border: 1px solid var(--line-faint); border-radius: 13px;
  padding: 13px 16px; display: flex; gap: 18px; align-items: center;
}
.passive-box__row { display: flex; flex-direction: column; align-items: center; }
.passive-box__val { font-family: var(--font-head); font-size: 1.4rem; color: var(--cream); }
.passive-box__lbl { font-size: 0.7rem; color: var(--muted); }

/* ============================ Abilities ============================ */
.ability-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.ability-card {
  background: var(--bg-panel); border: 1px solid rgba(201, 166, 98, 0.18); border-radius: 12px;
  padding: 11px 6px 9px; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.ability-card__abbr { font-family: var(--font-head-sc); font-size: 0.6rem; letter-spacing: 0.12em; color: var(--gold-dim); }
.ability-card__mod { font-family: var(--font-head); font-size: 1.75rem; line-height: 1; color: var(--name-bright); }
.ability-card__score {
  font-size: 0.75rem; color: var(--muted); background: var(--bg);
  border: 1px solid var(--line-faint); border-radius: 20px; padding: 1px 8px; min-width: 30px; text-align: center;
}

/* ============================ Saves ============================ */
.save-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.save-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; }
.save-row__mark { font-size: 0.7rem; color: #473823; width: 11px; text-align: center; }
.save-row.is-prof .save-row__mark { color: var(--gold); }
.save-row__name { font-size: 0.85rem; color: #bcae90; flex: 1; }
.save-row.is-prof .save-row__name { color: var(--cream); }
.save-row__val { font-family: var(--font-head); font-size: 0.95rem; color: var(--muted); }
.save-row.is-prof .save-row__val { color: #e6c987; }

/* ============================ Skills ============================ */
.skill-list { display: flex; flex-direction: column; }
.skill-row { display: flex; align-items: center; gap: 9px; padding: 5px 9px; border-radius: 6px; }
.skill-row.is-prof { background: rgba(201, 166, 98, 0.07); }
.skill-row__mark { font-size: 0.7rem; color: #473823; width: 11px; text-align: center; }
.skill-row.is-prof .skill-row__mark { color: var(--gold); }
.skill-row__name { font-size: 0.88rem; color: #bcae90; flex: 1; min-width: 0; }
.skill-row.is-prof .skill-row__name { color: var(--cream); }
.skill-row__abil { font-family: var(--font-head-sc); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--muted-2); width: 26px; }
.skill-row__val { font-family: var(--font-head); font-size: 0.95rem; color: var(--muted); width: 30px; text-align: right; }
.skill-row.is-prof .skill-row__val { color: #e6c987; }

/* ============================ Weapons ============================ */
.weapon-list { display: flex; flex-direction: column; gap: 8px; }
.weapon-card {
  background: var(--bg-panel); border: 1px solid var(--line-faint); border-radius: 9px;
  padding: 11px 14px; display: flex; align-items: center; gap: 14px;
}
.weapon-card__left { flex: 1; min-width: 0; }
.weapon-card__name { font-family: var(--font-head); font-size: 1rem; color: var(--cream); }
.weapon-card__tag { font-family: var(--font-head-sc); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim); margin-left: 9px; }
.weapon-card__notes { margin-top: 3px; font-size: 0.72rem; color: #8a7d68; }
.weapon-card__mid, .weapon-card__right { display: flex; flex-direction: column; align-items: center; flex: none; }
.weapon-card__right { min-width: 90px; text-align: right; align-items: flex-end; }
.weapon-card__lbl { font-family: var(--font-head-sc); font-size: 0.55rem; letter-spacing: 0.08em; color: var(--muted-2); }
.weapon-card__atk { font-family: var(--font-head); font-size: 1.1rem; color: var(--gold); }
.weapon-card__dmg { font-family: var(--font-head); font-size: 0.95rem; color: var(--cream-soft); }

/* ============================ Actions ============================ */
.action-block { margin-bottom: 14px; }
.action-block__head { display: block; font-family: var(--font-head-sc); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 8px; }
.action-block__head--danger { color: var(--danger); }
.action-card {
  background: var(--bg-panel); border: 1px solid var(--line-faint);
  border-left: 2px solid rgba(201, 166, 98, 0.5); border-radius: 7px; padding: 9px 13px; margin-bottom: 6px;
}
.action-card--danger { background: rgba(207, 131, 124, 0.05); border-color: rgba(207, 131, 124, 0.18); border-left-color: rgba(207, 131, 124, 0.55); }
.action-card__name { font-family: var(--font-head); font-size: 0.92rem; color: var(--cream); }
.action-card__desc { font-size: 0.78rem; line-height: 1.5; color: #b6a98c; margin: 2px 0 0; }

/* ============================ Pills ============================ */
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  font-size: 0.72rem; color: #c4b694; background: var(--bg); border: 1px solid var(--line-faint);
  border-radius: 20px; padding: 3px 11px; transition: border-color 0.15s, color 0.15s;
}
.pill:hover { border-color: rgba(201, 166, 98, 0.4); color: var(--cream-soft); }
.pill--lang { color: #d8c9a6; background: rgba(201, 166, 98, 0.07); border-color: var(--line-soft); }

/* ============================ Psionics ============================ */
.psi-box { background: var(--bg-panel); border: 1px solid rgba(201, 166, 98, 0.16); border-radius: 11px; padding: 15px 17px; display: flex; flex-direction: column; gap: 12px; }
.psi-dice { display: flex; gap: 11px; flex-wrap: wrap; }
.psi-die { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: rgba(201, 166, 98, 0.12); border: 1px solid var(--gold); color: #e6c987; }
.psi-die.is-used { background: var(--bg); border-color: var(--line-faint); color: #473823; }
.psi-box__status { font-size: 0.78rem; color: var(--muted); }

/* ============================ Features ============================ */
.feature-list { display: flex; flex-direction: column; gap: 8px; }
.feature-card { background: var(--bg-panel); border: 1px solid var(--line-faint); border-radius: 9px; padding: 11px 13px; }
.feature-card__head { display: flex; align-items: baseline; gap: 9px; }
.feature-card__name { font-family: var(--font-head); font-size: 0.92rem; color: var(--cream); flex: 1; }
.feature-card__src { font-family: var(--font-head-sc); font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201, 166, 98, 0.35); border-radius: 20px; padding: 2px 8px; flex: none; }
.feature-card__desc { font-size: 0.78rem; line-height: 1.55; color: #b6a98c; margin: 5px 0 0; }

/* ============================ Proficiencies ============================ */
.prof-block { display: flex; flex-direction: column; gap: 12px; }
.prof-row { display: flex; flex-direction: column; gap: 6px; }
.prof-row__label { font-family: var(--font-head-sc); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); }
.prof-row__text { font-size: 0.82rem; color: #d8c9a6; }

/* ============================ Equipment ============================ */
.coin-row { display: flex; gap: 9px; margin-bottom: 14px; flex-wrap: wrap; }
.coin-card { display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid rgba(201, 166, 98, 0.1); border-radius: 9px; padding: 7px 12px; }
.coin-card.is-active { background: rgba(201, 166, 98, 0.07); border-color: rgba(201, 166, 98, 0.28); }
.coin-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; display: inline-block; }
.coin-card__amt { font-family: var(--font-head); font-size: 1.05rem; color: #7a6f5c; }
.coin-card.is-active .coin-card__amt { color: var(--cream); }
.coin-card__lbl { font-family: var(--font-head-sc); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--gold-dim); }
.equip-list { display: flex; flex-direction: column; }
.equip-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid rgba(201, 166, 98, 0.07); }
.equip-item__name { flex: 1; min-width: 0; color: #d8c9a6; font-size: 0.85rem; }
.equip-item__qty { font-family: var(--font-head); font-size: 0.75rem; color: var(--gold-dim); }
.equip-item__wt { font-size: 0.7rem; color: var(--muted-2); }

/* ============================ Steckbrief ============================ */
.steckbrief { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.steckbrief__key { font-family: var(--font-head-sc); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim); align-self: center; }
.steckbrief__val { color: #d8c9a6; font-size: 0.88rem; }

/* ============================ Story ============================ */
.story-boxes { display: flex; flex-direction: column; gap: 18px; }
.story-box { background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: 9px; padding: 14px 16px; }
.story-box--note { border-style: dashed; border-color: rgba(201, 166, 98, 0.28); }
.story-box--danger { border-color: rgba(207, 131, 124, 0.22); }
.story-box__label { display: block; font-family: var(--font-head-sc); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 6px; }
.story-box--danger .story-box__label { color: var(--danger); }
.story-box__text { margin: 0; color: #dcccab; font-size: 0.92rem; line-height: 1.65; white-space: pre-wrap; }

/* ============================ Hooks (DM-only) ============================ */
.hooks-box { background: rgba(207, 131, 124, 0.05); border: 1px solid rgba(207, 131, 124, 0.2); border-radius: 9px; padding: 14px 16px; }
.hooks-box__badge { display: inline-block; font-family: var(--font-head-sc); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--danger); border: 1px solid rgba(207, 131, 124, 0.4); border-radius: 20px; padding: 2px 9px; margin-bottom: 8px; }
.hooks-list { margin: 0; padding-left: 1.1rem; color: #dcccab; font-size: 0.9rem; line-height: 1.6; }
.hooks-list li { margin-bottom: 4px; }

/* ============================ Inline edit forms ============================ */
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.combat-edit .field, .equip-edit .field { margin-bottom: 0; }
.field--check { flex-direction: row; align-items: center; gap: 8px; }
.field--check input { width: auto; }
.edit-actions { margin-top: 14px; display: flex; gap: 10px; align-items: center; }

.combat-edit input, .equip-edit input, .story-edit textarea, .hooks-edit textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 7px;
  color: var(--cream); font-family: var(--font-body); font-size: 0.95rem; padding: 8px 10px;
}
.combat-edit input:focus, .equip-edit input:focus, .story-edit textarea:focus, .hooks-edit textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px var(--line-faint);
}

.coin-edit { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.coin-field { display: flex; align-items: center; gap: 6px; }
.coin-field input { width: 70px; text-align: right; }
.coin-field__lbl { font-family: var(--font-head-sc); font-size: 0.6rem; color: var(--gold-dim); }

.item-edit { display: flex; flex-direction: column; gap: 8px; }
.item-edit__row { display: flex; gap: 8px; }
.item-edit__row input { flex: 1; }
.item-edit__qty { flex: 0 0 60px !important; }
.item-edit__wt { flex: 0 0 80px !important; }
.item-edit__hint { font-size: 0.72rem; color: var(--muted-2); margin: 2px 0 0; }

.story-edit { display: flex; flex-direction: column; gap: 14px; }
.story-field { display: flex; flex-direction: column; gap: 6px; }
.story-field__label { font-family: var(--font-head-sc); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); }
.story-field--danger .story-field__label { color: var(--danger); }
.story-field textarea { resize: vertical; line-height: 1.55; }