/* ==========================================================================
   Character Sheet Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Character Sheet
   -------------------------------------------------------------------------- */

xp-badge,
gift-dots-badge {
    display: inline;
    font-size: 0.75em;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-weight: normal;
    margin-left: var(--space-2);
}

/* Two-column layout for social+health/combat, magic+identity */
character-sheet-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 48em) {
    character-sheet-two-col {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5);
    }
}

/* Header fields grid */
character-sheet-header-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 40em) {
    character-sheet-header-fields {
        grid-template-columns: 1fr 1fr;
    }
}

character-sheet-appearance-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 40em) {
    character-sheet-appearance-fields {
        grid-template-columns: 1fr 1fr;
    }
}

/* Fame category block inside skills section */
fame-category {
    display: block;
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-md);
}

@media (min-width: 48em) {
    tool-page-row[variant="floating"] {
        grid-template-columns: auto 1fr;
    }
}

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Gifts --- */

gift-block {
    display: block;
    border: none;
    padding: 0;
    margin: 0;
}

gift-block legend {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

/* --- Dot-fill interactive --- */

dot-fill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    min-width: 0;
}

dot-fill-label {
    display: inline;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    min-width: 10ch;
    flex-shrink: 0;
}

dot-fill-dots {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

dot-fill-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-text-primary);
    background-color: transparent;
    vertical-align: middle;
    /* Enlarge touch target without changing visual size */
    padding: 0;
    cursor: pointer;
    position: relative;
}

dot-fill-dot[variant="filled"] {
    background-color: var(--color-text-primary);
}

dot-fill-dot[variant="empty"] {
    background-color: transparent;
}

/* --- XP management visual states (F-034) --- */

/* Unaffordable dots: player cannot buy this dot with current XP */
dot-fill-dot[unaffordable] {
    opacity: var(--opacity-muted);
    cursor: not-allowed;
}

/* Override hover and focus effects for unaffordable dots */
dot-fill-dot[unaffordable]:hover,
dot-fill-dot[unaffordable]:focus {
    opacity: var(--opacity-muted);
    outline: none;
    background-color: transparent;
}

/* Unaffordable filled dot: keep fill visible but dimmed */
dot-fill-dot[variant="filled"][unaffordable]:hover,
dot-fill-dot[variant="filled"][unaffordable]:focus {
    background-color: var(--color-text-primary);
}

/* Background-granted dots: came from background/caste selection, not bought with XP */
/* Uses --color-warm (bronze/warm accent) to distinguish from player-purchased dots */
dot-fill-dot[background] {
    background-color: var(--color-warm);
    border-color: var(--color-warm-hover);
    cursor: default;
}

dot-fill-dot[background]:hover {
    background-color: var(--color-warm);
    border-color: var(--color-warm-hover);
}

dot-fill-dot[background]:focus-visible {
    outline-color: var(--color-warm-hover);
}

/* Locked dot-fill container: section not yet available (before background+caste) */
dot-fill[locked] {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

/* Lock message: notice shown when skills/fame are locked */
lock-message {
    display: block;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: var(--text-sm);
    margin-top: var(--space-3);
}

/* --- Health tracker --- */

health-tracker {
    display: block;
}

health-tracker-input-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

health-tracker-input-row input {
    width: 100%;
}

health-tracker-unit {
    display: inline;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

health-tracker-bar-wrap {
    display: block;
    height: 12px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--space-2);
}

health-tracker-bar {
    display: block;
    height: 100%;
    background-color: var(--color-success);
    border-radius: var(--radius-lg);
    transition: width var(--transition-normal);
}

health-tracker-condition {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

health-tracker-bar-wrap[data-phase="dying"] {
    background-color: var(--color-error);
}

health-tracker-bar-wrap[data-phase="dying"] health-tracker-bar {
    background-color: var(--color-health-dying);
}

health-tracker-bar-wrap[data-phase="dead"] {
    background-color: var(--color-health-dying);
}

health-tracker-bar-wrap[data-phase="dead"] health-tracker-bar {
    background-color: var(--color-health-dying);
}

health-tracker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-1);
}

#cs-stabilize-btn {
    background-color: var(--color-error);
    color: var(--color-error-bg);
    border: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}

#cs-death-note {
    margin-top: var(--space-2);
    width: 100%;
}

/* --- Combat reference --- */

combat-ref {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-3);
    align-items: center;
}

combat-ref-row {
    display: contents;
}

combat-ref-term {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

combat-ref-def {
    display: block;
    margin: 0;
}

/* --- Skills grid --- */

skills-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    overflow: visible;
}

@media (min-width: 40em) {
    skills-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--space-6);
    }
}

skill-category {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    overflow: visible;
}

skill-category h3 {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-2);
}

/* Override dot-fill label width inside skill categories for alignment */
skill-category dot-fill-label {
    min-width: 13ch;
}

/* --- Inventory section --- */

inventory-containers {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 48em) {
    inventory-containers {
        display: grid;
        grid-template-columns: repeat(
            auto-fill,
            minmax(var(--profile-image-size), 1fr)
        );
        gap: var(--space-4);
    }
}

inventory-container {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background-color: var(--color-bg-primary);
    border-left: 4px solid var(--color-accent);
}

inventory-container-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

inventory-container-name {
    display: inline;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

inventory-container-note {
    display: inline;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

inventory-container-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-2);
}

inventory-slot {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
    min-height: 2rem;
    font-size: var(--text-sm);
    align-items: center;
}

inventory-slot[variant="empty"] {
    min-height: 2rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-dnd-bg);
    cursor: pointer;
}

inventory-slot[variant="occupied"] {
    border-style: solid;
    border-color: transparent;
}

inventory-bullet {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    cursor: grab;
    word-break: break-word;
    max-width: 100%;
}

inventory-bullet-text {
    display: inline;
    flex: 1;
    min-width: 0;
}

inventory-bullet button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: 0 var(--space-1);
    line-height: 1;
    flex-shrink: 0;
}

inventory-bullet button:hover {
    color: var(--color-error);
}

inventory-container[variant="permanent"] {
    border-style: solid;
    border-color: var(--color-border);
    border-left: 4px solid var(--color-accent);
}

inventory-bullet[dragging] {
    opacity: var(--opacity-disabled);
}

inventory-bullet[drag-clone] {
    box-shadow: var(--shadow-md);
    opacity: 0.9;
}

inventory-slot[drag-over] {
    border-color: var(--color-accent);
    background-color: var(--color-bg-secondary);
}

/* --- Magic section --- */

magic-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

known-spells-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

known-spells-list li {
    padding: var(--space-1) 0;
}

known-spells-list a {
    color: var(--color-link);
    text-decoration: none;
}

known-spells-list a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

known-spells-list custom-spell-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

custom-spell-item {
    display: block;
}

custom-spell-item button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: 0 var(--space-1);
    line-height: 1;
    opacity: 0.6;
    border-radius: var(--radius-sm);
}

custom-spell-item button:hover {
    opacity: 1;
}

custom-spell-item button:focus-visible {
    outline-offset: 1px;
}

#cs-add-custom-spell-btn {
    background: none;
    border: 1px dashed var(--color-border);
    color: var(--color-text-secondary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    display: inline-block;
}

#cs-add-custom-spell-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Item dialog */
#cs-item-dialog {
    max-width: 36rem;
}

cs-item-dialog-char-count {
    display: inline;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: right;
}

cs-item-dialog-char-count[warning] {
    color: var(--color-error);
}

cs-item-dialog-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2);
}

cs-item-dialog-input-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

cs-item-dialog-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

cs-item-dialog-input-wrap input {
    flex: 1;
}

/* Custom spell dialog */
#cs-custom-spell-dialog {
    max-width: 36rem;
}

/* --- Identity section --- */

identity-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* --- Mindset gauge --- */

mindset-gauge {
    display: flex;
    flex-direction: column;
}

mindset-gauge-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

mindset-gauge-row:not(:last-child) {
    border-bottom: 1px solid var(--color-text-muted);
}

mindset-gauge-label {
    display: inline;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    min-width: 10ch;
    flex-shrink: 0;
}

mindset-gauge-label[variant="left"] {
    text-align: right;
}

mindset-gauge-label[variant="right"] {
    text-align: left;
}

mindset-gauge-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-grow: 1;
}

mindset-gauge-track button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    padding: 6px;
    box-sizing: border-box;
}

mindset-gauge-track button::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--color-text-muted);
    background-color: transparent;
    box-sizing: border-box;
}

mindset-gauge-track button:hover::before {
    border-color: var(--color-accent);
}

mindset-gauge-track button[active]::before {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

@media (max-width: 39.999em) {
    mindset-gauge-label {
        min-width: 8ch;
    }

    mindset-gauge-track {
        gap: 6px;
        justify-content: flex-start;
        flex-grow: inherit;
    }

    mindset-gauge-track button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: unset;
        height: unset;
        padding: 0px;
    }
}

/* --- Appearance section --- */

appearance-section {
    display: block;
    clear: both;
}

/* --------------------------------------------------------------------------
   Character Rolls Dialog
   -------------------------------------------------------------------------- */

#cs-rolls-content {
    margin-top: var(--space-4);
}

rolls-xp-total {
    display: block;
    font-size: var(--text-h4);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-4);
}

rolls-set-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

rolls-set-label {
    display: inline;
    font-weight: var(--font-weight-bold);
    min-width: 4rem;
    flex-shrink: 0;
}

rolls-set-values {
    display: inline;
    font-family: monospace;
    font-size: var(--text-base);
    flex-grow: 1;
    color: var(--color-text-secondary);
}

rolls-set-row button {
    font-size: var(--text-sm);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Gift Reference Panel
   -------------------------------------------------------------------------- */

character-sheet-gifts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 39.999em) {
    character-sheet-gifts-row {
        grid-template-columns: 1fr;
    }
}

gift-reference {
    display: block;
    position: relative;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
    min-width: 10rem;
    flex-shrink: 0;
}

gift-reference > button {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0 var(--space-1);
}

gift-reference > button:hover {
    color: var(--color-text-primary);
}

gift-reference p {
    font-weight: var(--font-weight-bold);
    font-size: var(--text-h4);
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}

gift-reference ol {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Inventory Catalog
   -------------------------------------------------------------------------- */

inventory-catalog {
    display: block;
    margin-bottom: var(--space-4);
}

inventory-catalog h4 {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}

inventory-catalog table {
    width: 100%;
    font-size: var(--text-sm);
}

inventory-catalog table td,
inventory-catalog table th {
    padding: var(--space-1) var(--space-2);
}

/* --- Dynamic container controls --- */

inventory-container-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

inventory-container-footer button:last-child {
    margin-left: auto;
}

inventory-container-header button[inventory-action="remove"] {
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    color: var(--color-text-secondary);
    padding: 0 var(--space-1);
    opacity: 0.6;
    border-radius: var(--radius-sm);
}

inventory-container-header button[inventory-action="remove"]:hover {
    opacity: 1;
    color: var(--color-text-primary);
}

inventory-container-header button[inventory-action="remove"]:focus-visible {
    outline-offset: 1px;
}

inventory-container[variant="unequipped"] {
    border-left: 4px solid var(--color-border);
}

/* Container list shares the same grid layout as inventory-containers */
#cs-container-list {
    display: contents;
}

#cs-xp-enable-btn {
    margin-bottom: var(--space-3);
}

/* Portrait picker (shared between character sheet and NPC creator) */
[portrait-section] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    padding: 0;
}

[portrait-picker] {
    max-width: var(--profile-image-size);
    aspect-ratio: 1;
    width: var(--profile-image-size);
    background: none;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
}

[portrait-picker]:hover {
    border-color: var(--color-accent);
}

[portrait-picker]::after {
    content: "Click to choose a portrait";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-4);
}

[portrait-picker]:hover::after {
    color: var(--color-accent);
}

[portrait-picker][has-image] {
    border: 1px solid var(--color-border);
}

[portrait-picker][has-image]::after {
    display: none;
}

/* Location picker uses a location-specific prompt instead of the default
   "Click to choose a portrait" text shared with character and NPC pickers. */
#location-image-picker-btn::after {
    content: "Click to choose an image";
}

[portrait-picker] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

[portrait-picker] img[hidden] {
    display: none;
}

/* Image picker dialog (shared between character sheet and NPC creator) */
[portrait-dialog] {
    max-width: 72rem;
}

/* Image grid */
cs-image-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(var(--profile-image-size), 1fr)
    );
    gap: var(--space-3);
}

cs-image-grid button {
    background: none;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1;
    transform: rotateY(90deg);
    transition: transform var(--transition-fast-out);
}

cs-image-grid button.cs-image-flipped {
    transform: rotateY(0);
}

cs-image-grid button:hover {
    border-color: var(--color-accent);
}

cs-image-grid button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

cs-image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}