/* Лист персонажа: компоновка и плотность основного экрана Long Story Short. */
.character-body { color: inherit; text-decoration: none; }
.character-body:hover .character-name { color: var(--accent); }
a.menu-item { display: flex; align-items: center; text-decoration: none; }
.sheet-open { --bg: #20232d; --panel: #282d3e; --border: #41485d; --text: #e8e9ef; --muted: #a2a9bc; }
.sheet-open main { max-width: 1320px; padding-top: 14px; }
.sheet-topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.sheet-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.sheet-back { color: var(--muted); text-decoration: none; font-size: 13px; }
.sheet-back:hover { color: var(--text); }
.sheet-save-state { font-size: 12px; color: var(--teal); }
.sheet-save-state[data-state="error"] { color: var(--danger); }
.sheet-save-state[data-state="dirty"], .sheet-save-state[data-state="saving"] { color: var(--muted); }
.sheet-button, .sheet-tab, .sheet-stat, .combat-stat, .sheet-identity, .sheet-remove {
  font: inherit; color: var(--text); border: 1px solid var(--border); background: transparent;
}
button.sheet-stat, .sheet-button, .sheet-tab, .combat-stat, .sheet-identity, .sheet-remove { cursor: pointer; }
.sheet-button { padding: 5px 9px; border-radius: 5px; min-height: 32px; font-size: 12px; }
.sheet-button:hover, button.sheet-stat:hover, .combat-stat:hover { background: #343b50; }
.sheet-button:disabled { cursor: default; opacity: .4; }
.sheet-wild-shape { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 18px; padding: 14px 0; margin: -12px 0 24px; border-bottom: 1px solid var(--border); }
.sheet-wild-shape[hidden] { display: none; }
.sheet-wild-shape .section-label, .sheet-wild-shape p { margin: 0; }
.sheet-wild-shape .section-label, .sheet-wild-shape .sheet-warning { grid-column: 1 / -1; }
.sheet-wild-shape > strong { font-size: 15px; }
.sheet-wild-shape .sheet-hint { grid-column: 1; }
.wild-shape-actions { grid-column: 2; grid-row: 2 / 4; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; }
.wild-shape-actions .sheet-button { min-height: 38px; }
.sheet-wild-shape[data-active="true"] > strong { color: var(--teal); }
.sheet-wild-shape button:focus-visible, .wild-shape-dialog :is(button, input, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wild-shape-dialog .sheet-check { display: flex; align-items: flex-start; margin: 14px 0; line-height: 1.5; }
.wild-shape-dialog .sheet-check input { flex: none; margin-top: 3px; }
.wild-shape-dialog .dialog-actions { flex-wrap: wrap; }
@media (max-width: 699px) {
  .sheet-wild-shape { grid-template-columns: minmax(0,1fr); margin-top: -8px; }
  .wild-shape-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 6px; }
}
.sheet-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center; padding: 14px 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.sheet-identity { display: flex; gap: 14px; padding: 0; border: 0; text-align: left; min-width: 0; }
.sheet-portrait { position: relative; display: grid; place-items: center; width: 70px; height: 78px; flex: none; background: #45526e; border: 1px solid #606982; border-radius: 5px; font-size: 32px; font-weight: 700; overflow: hidden; }
.sheet-portrait img { position: absolute; width: 100%; height: 100%; object-fit: cover; inset: 0; }
.sheet-identity-text { display: grid; align-content: center; gap: 3px; min-width: 0; }
.sheet-name { font-size: 24px; line-height: 1.1; }
.sheet-name .metric-value { font-size: inherit; }
.sheet-subtitle { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.sheet-subtitle .metric-value, .sheet-level .metric-value { font-size: inherit; font-weight: inherit; }
.sheet-level { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sheet-header-stats { display: flex; align-items: center; gap: 12px; }
.sheet-stat { display: grid; place-items: center; min-width: 70px; padding: 8px; border-radius: 5px; border-color: transparent; line-height: 1.2; }
.sheet-stat .metric-value { font-size: 28px; }
.stat-label { text-transform: uppercase; color: var(--muted); font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.shield-stat { border-color: #77839f; border-radius: 8px 8px 22px 22px; min-width: 64px; }
.hp-stat { border: 1px solid #61a6a4; min-width: 112px; color: #83c9c1; }
.hp-stat .metric-value { font-size: 23px; white-space: nowrap; }
.sheet-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); gap: 28px; align-items: start; }
.sheet-left, .sheet-right { min-width: 0; }
.ability-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 24px; }
.ability-block { min-width: 0; }
.sheet-field { display: grid; gap: 5px; min-width: 0; margin: 0 0 14px; }
.field-label, .section-label, .sheet-choices legend { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .025em; font-weight: 600; }
.sheet-input, .sheet-textarea, .skill-rank { color: var(--text); background: #252a38; border: 1px solid var(--border); border-radius: 4px; font: inherit; min-width: 0; width: 100%; }
.sheet-input { padding: 7px 9px; min-height: 38px; }
.sheet-input:invalid { border-color: var(--danger); }
.sheet-textarea { padding: 10px; font-size: 13px; line-height: 1.65; resize: vertical; }
.sheet-textarea::placeholder, .sheet-input::placeholder { color: #8991a7; }
.ability-score { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.ability-score .field-label { font-size: 19px; font-weight: 800; color: #c6cbd8; overflow-wrap: anywhere; }
.ability-score .sheet-input { width: 54px; border-color: transparent; background: transparent; font-size: 24px; font-weight: 800; text-align: right; padding: 0; min-height: 36px; }
.ability-roll { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 0; font-size: 10px; color: var(--muted); text-transform: uppercase; }
.roll-value { flex: none; min-width: 42px; padding: 0; border: 1px solid #525c77; border-radius: 4px; background: #32394e; color: #e5e8f3; cursor: pointer; touch-action: manipulation; }
.roll-value .metric-value { display: block; min-width: 42px; text-align: center; background: transparent; border: 0; font-size: 18px; line-height: 28px; color: inherit; font-weight: 700; }
.skill-row > .roll-value .metric-value { font-size: 16px; }
.sheet-check { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px; }
.sheet-check input { accent-color: #8b9ad5; margin: 0; width: 15px; height: 15px; }
.ability-roll .sheet-check { font-size: 10px; }
.skill-row { display: grid; grid-template-columns: 23px minmax(0,1fr) 42px; align-items: center; gap: 4px; min-height: 33px; margin: 3px 0; border-radius: 20px 4px 4px 20px; }
.skill-row.is-proficient { background: #333f68; }
.skill-rank { appearance: none; padding: 0; text-align: center; font-size: 0; height: 25px; cursor: pointer; background: transparent; border-color: transparent; }
.skill-rank option { font-size: 13px; }
.skill-row { position: relative; }
.skill-row:has(.skill-rank option[value="0"]:checked)::before { content: '○'; }
.skill-row:has(.skill-rank option[value="1"]:checked)::before { content: '●'; }
.skill-row:has(.skill-rank option[value="2"]:checked)::before { content: '◆'; }
.skill-row::before { position: absolute; pointer-events: none; left: 5px; top: 5px; font-size: 15px; color: #9aa9dc; }
.skill-name { font-size: 11px; font-weight: 650; text-transform: uppercase; line-height: 1.15; overflow-wrap: anywhere; }
.attack-roll { min-width: 36px; min-height: 34px; padding: 0; }
.sheet-passive { margin: 24px 0 18px; }
.section-label { margin: 0 0 10px; }
.passive-row { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin: 0 12px 7px 0; }
.passive-row .metric-value { color: var(--text); font-weight: 700; }
.sheet-choices { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px 14px; margin: 0 0 18px; min-width: 0; }
.sheet-choices legend { margin-bottom: 7px; }
.sheet-combat { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: 7px; align-items: stretch; margin-bottom: 17px; }
.combat-stat { border-radius: 4px; min-width: 0; display: grid; align-content: center; justify-items: center; gap: 3px; padding: 6px; }
.combat-stat .metric-value { font-size: 20px; font-weight: 700; }
.condition-stat .metric-value { font-size: 12px; overflow-wrap: anywhere; }
.inspiration-icon { font-size: 24px; line-height: 1; color: var(--muted); }
.inspiration[aria-pressed="true"] { border-color: #d9b270; background: #4a4234; }
.inspiration[aria-pressed="true"] .inspiration-icon { color: #f4d28d; }
.sheet-combat > .sheet-field { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; margin: 0; border: 1px solid var(--border); border-radius: 4px; padding: 5px; }
.sheet-combat .sheet-field .sheet-input { text-align: center; width: 52px; padding: 0; min-height: 24px; border: 0; font-size: 20px; background: transparent; }
.sheet-combat .field-label { font-size: 10px; font-weight: 400; }
.sheet-tabs { display: flex; flex-wrap: wrap; gap: 2px 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 14px; }
.sheet-tab { border: 0; border-bottom: 2px solid transparent; padding: 7px 0; font-size: 10px; text-transform: uppercase; font-weight: 750; color: var(--muted); min-height: 34px; }
.sheet-tab[aria-selected="true"] { color: #b7c7fb; border-bottom-color: #9caff0; }
.sheet-tab:hover { color: var(--text); }
.sheet-tab-content { min-height: 480px; }
.sheet-section { margin-bottom: 20px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.section-head .section-label { margin: 0; }
.collection-row { display: grid; gap: 6px; position: relative; background: #282d3d; border: 1px solid var(--border); padding: 10px; border-radius: 4px; margin: 0 0 10px; }
.attacks-row { grid-template-columns: minmax(0,1.5fr) 58px minmax(0,1fr) 36px 24px; align-items: end; }
.collection-field { display: grid; gap: 4px; min-width: 0; }
.collection-field .field-label { font-size: 9px; }
.collection-field .sheet-input { min-height: 34px; font-size: 12px; padding: 5px; }
.sheet-remove { padding: 0; border: 0; font-size: 24px; min-height: 34px; color: var(--muted); }
.sheet-remove:hover { color: var(--danger); }
.equipment-row { grid-template-columns: minmax(0,1fr) 82px 82px 24px; }
.equipment-row .collection-field:nth-child(4) { grid-column: 1 / 4; grid-row: 2; }
.equipment-row .collection-field:nth-child(4) textarea { min-height: 48px; resize: vertical; }
.equipment-row .sheet-remove { grid-column: 4; grid-row: 1; }
.sheet-coins { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.sheet-coins input { padding: 5px; font-size: 13px; }
.sheet-hint, .sheet-empty { font-size: 12px; color: var(--muted); line-height: 1.55; }
.sheet-warning { color: #e7bf82; font-size: 12px; }
.sheet-error { padding: 12px; border: 1px solid var(--danger); border-radius: 6px; margin-bottom: 12px; }
.sheet-dialog { width: min(560px,calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow: auto; }
.dialog-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 15px; }
.dialog-fields .sheet-hint, .dialog-fields .wide-field, .dialog-fields .sheet-choices { grid-column: 1 / -1; }
.sheet-dialog .sheet-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.spell-heading, .spell-stats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.spell-stats { margin: 0; }
.spell-stat { font-size: 12px; color: var(--muted); }
.spell-stat .metric-value { color: var(--text); font-size: 20px; margin-left: 4px; }
.spell-slot-list { margin-bottom: 20px; }
.slot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); padding: 9px 0; font-size: 12px; }
.slot-row > strong { min-width: 42px; }
.slot-circles { display: flex; gap: 5px; }
.slot-circle { width: 20px; height: 20px; border: 1px solid #9dadd8; border-radius: 50%; background: transparent; cursor: pointer; }
.slot-circle[aria-pressed="true"] { background: #94a7d9; }
.slot-count { color: var(--muted); font-size: 11px; margin-left: auto; }
.slot-row .sheet-warning { flex-basis: 100%; }
@media (min-width: 1000px) {
  .sheet-right { position: sticky; top: 16px; }
  .sheet-tab-content { max-height: calc(100dvh - 175px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
}
@media (max-width: 999px) {
  .sheet-columns { grid-template-columns: 1fr; gap: 24px; }
  .sheet-left { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
  .ability-grid { grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .sheet-left > .wide-field { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .sheet-hero { grid-template-columns: 1fr; gap: 16px; }
  .sheet-header-stats { justify-content: space-between; gap: 5px; }
  .sheet-stat { min-width: 58px; padding: 6px; }
  .hp-stat { min-width: 90px; }
  .sheet-tools { gap: 7px; }
  .sheet-tools .sheet-button { font-size: 10px; }
  .ability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 16px; }
  .ability-score .field-label { font-size: 14px; }
  .ability-score .sheet-input { font-size: 21px; width: 45px; }
  .skill-name { font-size: 9px; }
  .ability-roll { font-size: 9px; }
  .ability-roll .sheet-check { font-size: 9px; gap: 3px; }
  .sheet-left { grid-template-columns: 1fr; }
  .sheet-left > * { grid-column: 1; }
  .sheet-combat { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .condition-stat { grid-column: 1 / -1; min-height: 48px; }
  .sheet-tabs { gap: 2px 12px; }
  .sheet-tab { font-size: 10px; }
  .attacks-row { grid-template-columns: minmax(0,1fr) 58px 44px 24px; }
  .attacks-row .collection-field:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .attacks-row .attack-roll { grid-column: 3; grid-row: 1; min-width: 44px; min-height: 44px; }
  .attacks-row .sheet-remove { grid-column: 4; grid-row: 1; }
  .equipment-row { grid-template-columns: minmax(0,1fr) 60px 24px; }
  .equipment-row .collection-field:nth-child(3) { grid-column: 2; grid-row: 2; }
  .equipment-row .collection-field:nth-child(4) { grid-column: 1; grid-row: 2; }
  .equipment-row .sheet-remove { grid-column: 3; }
  .dialog-fields { grid-template-columns: 1fr; }
  .sheet-dialog .sheet-choices { grid-template-columns: 1fr; }
}