.characteristic-list { display: flex; flex-direction: column; gap: @spacing-sm; } .characteristic-row { display: grid; grid-template-columns: 2rem 1fr 4rem; gap: @spacing-sm; align-items: center; } .characteristic-label { font-weight: 700; } .profile-counters { display: grid; grid-template-columns: 1fr; gap: @spacing-md; } .profile-card-wide { width: 100%; } .profile-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: @spacing-lg; align-items: start; } .profile-column { display: flex; flex-direction: column; gap: @spacing-md; } .favor-card { margin: @spacing-md 0; padding: @spacing-md; border: 1px dashed fade(@color-border, 55%); border-radius: @radius-md; background: fade(@color-panel-strong, 35%); } .favor-header h2 { margin-bottom: @spacing-sm; } .favor-help { margin: 0 0 @spacing-md; color: @color-muted; font-size: 0.82rem; } .favor-list { display: grid; gap: @spacing-sm; } .favor-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem auto; gap: @spacing-sm; align-items: end; } .favor-meta { min-height: 2.3rem; display: flex; align-items: center; justify-content: center; border-radius: @radius-sm; background: rgba(255, 255, 255, 0.7); border: 1px solid fade(@color-border, 35%); font-weight: 700; } .magic-layout { align-items: start; margin-bottom: @spacing-md; } .magic-layout .sheet-column { display: flex; flex-direction: column; gap: @spacing-md; } .magic-resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: @spacing-md; align-items: end; } .chaos-table-wrapper { margin-top: @spacing-md; } .chaos-table-wrapper h3 { margin: 0 0 @spacing-sm; font-size: 0.95rem; } .chaos-table-caption { margin: 0 0 @spacing-sm; color: @color-muted; font-size: 0.78rem; font-style: italic; } .chaos-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .chaos-table th, .chaos-table td { padding: 0.4rem 0.45rem; border: 1px solid fade(@color-border, 35%); vertical-align: top; } .chaos-table th { text-align: left; background: fade(@color-panel-strong, 55%); } .sheet-tabs { display: flex; flex-wrap: wrap; gap: @spacing-sm; margin: @spacing-lg 0 @spacing-md; justify-content: center; } .sheet-tab { border: 1px solid fade(@color-border, 80%); border-radius: @radius-md; background: fade(@color-panel-strong, 55%); color: @color-ink; font-weight: 700; padding: @spacing-sm @spacing-md; } .sheet-tab.active { background: @color-accent; border-color: darken(@color-accent, 12%); color: #fff; } .sheet-tab-panel { display: none; } .sheet-tab-panel.active { display: block; } .item-list { display: flex; flex-direction: column; gap: @spacing-md; } .item-section.is-dragover { border-color: @color-accent; box-shadow: 0 0 0 2px fade(@color-accent, 20%); } .item-dropzone { border: 1px dashed fade(@color-border, 75%); border-radius: @radius-md; padding: @spacing-md; min-height: 3.25rem; background: fade(@color-panel-strong, 45%); color: @color-muted; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.9rem; font-weight: 600; } .item-dropzone.has-items { padding: @spacing-sm @spacing-md; font-size: 0.8rem; } .item-section.is-dragover .item-dropzone { border-color: @color-accent; background: fade(@color-accent, 12%); color: @color-ink; } .item { display: grid; grid-template-columns: 48px 1fr auto; gap: @spacing-md; align-items: start; border-top: 1px dashed fade(@color-border, 45%); padding-top: @spacing-md; } .item:first-child { border-top: 0; padding-top: 0; } .item img { width: 48px; height: 48px; object-fit: cover; border-radius: @radius-sm; border: 1px solid @color-border; background: #fff; } .item-main p { margin: @spacing-sm 0 0; color: @color-muted; } .item-title-row { display: flex; flex-wrap: wrap; gap: @spacing-sm; align-items: center; } .item-meta { border-radius: 999px; background: @color-panel-strong; color: @color-ink; font-size: 0.75rem; padding: 0.1rem 0.5rem; } .item-actions { display: flex; flex-wrap: wrap; gap: @spacing-sm; justify-content: flex-end; } .pnj-layout .sheet-column { display: flex; flex-direction: column; gap: @spacing-md; } .pnj-combat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: @spacing-md; align-items: end; } .pnj-combat-grid .span-two { grid-column: 1 / -1; }