/* Classic sheet structure. Colours come only from the active theme. */
.character-sheet { max-width: 76rem; margin-inline: auto; padding: clamp(1rem, 3vw, 2.75rem); background: var(--site-surface); border: 1px solid var(--site-border); box-shadow: var(--site-shadow); }
.character-sheet h2, .character-sheet h3 { font-family: var(--site-font-heading); color: var(--site-heading); }
.character-sheet h3 { text-align: center; font-size: 1.2rem; margin: 0 0 0.75rem; }
.sheet-identity { margin-bottom: 2rem; }
.sheet-portrait-column { text-align: center; min-width: 0; }
.sheet-portrait-zoom { border: 0; padding: 0; background: none; cursor: zoom-in; }
.sheet-portrait-zoom:focus-visible { outline: 2px solid var(--site-brass); outline-offset: 6px; }
.portrait-modal-image { max-width: 100%; max-height: 80vh; object-fit: contain; }
.sheet-portrait { width: min(100%,11.25rem); height: 14.0625rem; object-fit: contain; outline: 1px solid var(--site-brass); outline-offset: 3px; }
.sheet-identity-columns, .sheet-three-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.75rem; }
.sheet-identity-columns { flex: 1; min-width: 0; }
.sheet-identity-columns.has-portrait { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sheet-facts { margin: 0; }
.sheet-facts > div { display: flex; align-items: baseline; gap: 0.5rem; padding-block: 0.4rem; border-bottom: 1px solid var(--site-surface-muted); }
.sheet-facts dt { color: var(--site-text-muted); font-size: 0.75rem; font-weight: 500; flex-shrink: 0; }
.sheet-facts dd { margin: 0; font-family: var(--site-font-heading); overflow-wrap: anywhere; min-width: 0; }
.sheet-band { margin-top: 1.75rem; }
.sheet-band-title { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1rem; font-size: 1.55rem; text-align: center; }
.sheet-band-title::before, .sheet-band-title::after { content: ''; flex: 1; border-top: 1px solid var(--site-brass); border-bottom: 1px solid var(--site-brass); height: 4px; }
.sheet-three-columns > section { min-width: 0; }
.sheet-span-two { grid-column: span 2; }
.sheet-traits { margin: 0; }
.sheet-traits > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.32rem 0; border-bottom: 1px solid var(--site-surface-muted); }
.sheet-traits dt { font-size: 0.86rem; font-weight: 400; overflow-wrap: anywhere; min-width: 0; }
.sheet-traits dd { margin: 0; text-align: right; font-size: 0.8rem; }
.sheet-traits small, .sheet-detail-list small { display: block; color: var(--site-text-muted); font-size: 0.75rem; }
.sheet-rating { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.45rem; max-width: 100%; }
.sheet-marks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.2rem; max-width: 9rem; }
.sheet-mark { width: 0.56rem; height: 0.56rem; border: 1px solid var(--site-heading); border-radius: 50%; flex: 0 0 auto; }
.sheet-mark.is-filled { background: var(--site-heading); }
.sheet-marks-square .sheet-mark { border-radius: 0; width: 0.62rem; height: 0.62rem; }
.sheet-score { min-width: 1ch; font-size: 0.7rem; font-variant-numeric: tabular-nums; color: var(--site-text-muted); }
.sheet-rating.is-unset .sheet-marks { opacity: 0.45; }
.sheet-empty { color: var(--site-text-muted); font-size: 0.8rem; margin: 0.65rem 0; }
.sheet-writing-lines { height: 4rem; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.3rem - 1px), var(--site-surface-muted) calc(1.3rem - 1px), var(--site-surface-muted) 1.3rem); }
.sheet-lower { margin-top: 2rem; }
.sheet-lower .sheet-band-title { font-size: 1.3rem; }
.sheet-track { margin-bottom: 1.4rem; }
.sheet-track h3 { margin-bottom: 0.5rem; }
.sheet-track-line { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block: 0.4rem; }
.sheet-track-label { font-size: 0.67rem; color: var(--site-text-muted); }
.sheet-track-line .sheet-marks { max-width: 9rem; }
.sheet-inscription { border-bottom: 1px solid var(--site-border); padding: 0.3rem 0; overflow-wrap: anywhere; }
.sheet-health { margin-bottom: 1.5rem; }
.sheet-health > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; border-bottom: 1px solid var(--site-surface-muted); padding: 0.3rem 0; }
.sheet-health dt { font-weight: 400; font-size: 0.85rem; }
.sheet-health dd { margin: 0; text-align: right; font-size: 0.75rem; color: var(--site-text-muted); }
.character-sheet .sheet-subheading { margin-top: 1.5rem; }
.sheet-experience > div { justify-content: space-between; }
.sheet-experience dd { font-variant-numeric: tabular-nums; }
.sheet-details { border-top: 1px solid var(--site-border); padding-top: 1.5rem; }
.sheet-detail-list { list-style: none; padding: 0; font-size: 0.85rem; }
.sheet-detail-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--site-surface-muted); overflow-wrap: anywhere; }
.sheet-history { margin-top: 1.5rem; }
.character-sheet .sheet-history h3 { text-align: left; }
.sheet-history p { line-height: 1.8; overflow-wrap: anywhere; }
@media (max-width: 1199.98px) {
    .sheet-identity { flex-wrap: wrap; }
    .sheet-identity-columns { flex-basis: 100%; }
    .sheet-three-columns, .sheet-identity-columns { gap: 1rem; }
    .sheet-mark { width: 0.5rem; height: 0.5rem; }
}
@media (max-width: 767.98px) {
    .sheet-three-columns, .sheet-identity-columns, .sheet-identity-columns.has-portrait { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
    .sheet-span-two { grid-column: auto; }
    .sheet-traits dt { font-size: 0.9rem; }
    .sheet-band { margin-top: 2rem; }
    .sheet-marks { max-width: 10rem; }
}

.sheet-health-square { display: inline-block; width: 0.65rem; height: 0.65rem; border: 1px solid var(--site-heading); margin-left: 0.6rem; }
/* Specialties sit on their own line below lg and inline from lg; they never wrap, only truncate. Dots never wrap. */
.sheet-traits .sheet-trait-with-specialty { display: flex; flex-direction: column; min-width: 0; }
.sheet-traits .sheet-specialty { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
.sheet-traits dd { flex-shrink: 0; white-space: nowrap; }
.sheet-traits .sheet-marks { flex-wrap: nowrap; max-width: none; }
@media (min-width: 992px) {
    .sheet-traits .sheet-trait-with-specialty { flex-direction: row; align-items: baseline; }
    .sheet-traits .sheet-trait-with-specialty > span:first-child { flex-shrink: 0; }
    .sheet-traits .sheet-specialty { padding-left: 0.5rem; }
}
/* Small screens keep Character in two columns; extra-small stacks it. */
@media (min-width: 576px) and (max-width: 767.98px) {
    .sheet-identity-columns, .sheet-identity-columns.has-portrait { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
