/* ============================================================
   character-sheet.css
   Live, editable D&D 5e-style sheet for the Oceania Archives.
   Reuses the theme variables defined in style.css (:root).
   Styled to echo the official 5e paper sheet: cream "parchment"
   panels, inked borders, Cinzel headers, classic stat boxes.
   ============================================================ */

/* ----------------------------- Controls ---------------------------- */

.cs-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.cs-controls select {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    min-width: 220px;
    color: var(--ink);
    background: var(--parchment);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}

.cs-btn {
    font-family: var(--font-header);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    padding: 0.5rem 1rem;
    color: var(--parchment);
    background: var(--bg-panel);
    border: 2px solid var(--accent-gold);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.cs-btn:hover { background: var(--border-color); }
.cs-btn:active { transform: translateY(1px); }

.cs-btn-danger {
    border-color: #8b3a2f;
    background: #5c2018;
}
.cs-btn-danger:hover { background: #7a2c20; }

#cs-status {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--accent-gold);
    margin-left: auto;
    min-height: 1.2em;
    transition: opacity 0.3s ease;
}

/* --------------------------- Sheet shell --------------------------- */

#char-sheet-container.sheet-hidden { display: none; }

#cs-sheet {
    background:
        linear-gradient(rgba(240, 230, 210, 0.92), rgba(240, 230, 210, 0.92)),
        var(--parchment);
    color: var(--ink);
    border: 3px double var(--border-color);
    border-radius: 6px;
    padding: 1.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    font-family: var(--font-body);
}

/* Every editable field shares this inked, underline-style look */
#cs-sheet input,
#cs-sheet textarea {
    font-family: var(--font-body);
    color: var(--ink);
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0.3rem 0.4rem;
    width: 100%;
    box-sizing: border-box;
}

#cs-sheet input:focus,
#cs-sheet textarea:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25);
}

#cs-sheet input[type="number"] { text-align: center; }

#cs-sheet h3 {
    font-family: var(--font-header);
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    color: var(--ink);
    margin: 0 0 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--border-color);
}

.cs-section {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 0.9rem 1rem;
    margin-bottom: 1.1rem;
}

/* ------------------------------ Header ----------------------------- */

.cs-header { margin-bottom: 1.5rem; }

.cs-name-input {
    font-family: var(--font-header) !important;
    font-size: 1.9rem !important;
    font-weight: 700;
    text-align: center;
    color: var(--ink);
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--accent-gold) !important;
    border-radius: 0 !important;
    padding: 0.2rem 0 !important;
}

.cs-subname {
    text-align: center;
    font-style: italic;
    font-size: 0.9rem;
    margin: 0.4rem 0 1rem;
    color: var(--border-color);
}

.cs-subname-input {
    display: inline-block;
    width: auto !important;
    min-width: 160px;
    border: none !important;
    border-bottom: 1px dotted var(--border-color) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-style: italic;
}

.cs-meta-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
}

.cs-meta-field { display: flex; flex-direction: column-reverse; }

.cs-meta-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    margin-top: 0.25rem;
    color: var(--border-color);
    font-weight: 700;
}

.cs-meta-input {
    text-align: center;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* --------------------------- Top layout ---------------------------- */

.cs-top {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.25rem;
    align-items: start;
}

.cs-col { min-width: 0; }

/* ----------------------------- Abilities --------------------------- */

.cs-abilities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.cs-ability {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--parchment-dark);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 0.5rem 0.3rem 0.7rem;
    position: relative;
}

.cs-ability-label {
    font-family: var(--font-header);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--border-color);
}

.cs-ability-mod {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
}

.cs-ability-score {
    width: 52px !important;
    margin-top: 0.25rem;
    font-size: 0.95rem !important;
    font-weight: 700;
    background: var(--parchment) !important;
    border-radius: 16px !important;
    border: 2px solid var(--border-color) !important;
}

/* ------------------------- Inspiration / prof ---------------------- */

.cs-insp-prof {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.cs-insp,
.cs-profbonus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--parchment-dark);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.6rem 0.4rem;
    text-align: center;
}

.cs-insp {
    cursor: pointer;
    font-family: var(--font-header);
    font-size: 0.8rem;
    color: var(--ink);
}

.cs-insp-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: transparent;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.cs-insp.cs-on .cs-insp-dot {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.6);
}

.cs-profbonus { flex-direction: column; gap: 0.2rem; }

.cs-profbonus-input {
    width: 56px !important;
    font-size: 1.2rem !important;
    font-weight: 700;
    border-radius: 16px !important;
    border: 2px solid var(--border-color) !important;
    background: var(--parchment) !important;
}

.cs-profbonus-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--border-color);
    font-weight: 700;
}

/* --------------------------- Saves & skills ------------------------ */

.cs-save-list,
.cs-skill-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cs-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
}

.cs-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s ease;
}

.cs-dot.cs-dot-on {
    background: var(--ink);
    border-color: var(--ink);
}

.cs-line-val {
    width: 46px !important;
    flex-shrink: 0;
    font-weight: 700;
}

.cs-line-label {
    font-size: 0.9rem;
    color: var(--ink);
}

.cs-line-label em {
    font-size: 0.72rem;
    color: var(--border-color);
    font-style: italic;
}

/* ------------------------------ Passive ---------------------------- */

.cs-passive-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--parchment-dark);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
}

.cs-passive-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    min-width: 2ch;
    text-align: center;
}

.cs-passive-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--border-color);
    font-weight: 700;
}

/* ---------------------------- Combat top --------------------------- */

.cs-combat-top {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.cs-combat-box {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    background: var(--parchment-dark);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 0.3rem;
}

.cs-combat-box label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    margin-top: 0.3rem;
    color: var(--border-color);
    font-weight: 700;
}

.cs-combat-input {
    text-align: center;
    font-size: 1.15rem !important;
    font-weight: 700;
    border: none !important;
    background: transparent !important;
}

/* ------------------------------- HP -------------------------------- */

.cs-hp {
    background: var(--parchment-dark);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.cs-hp-maxtemp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.cs-hp-field { display: flex; flex-direction: column-reverse; }

.cs-hp-field label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    margin-top: 0.25rem;
    color: var(--border-color);
    font-weight: 700;
}

.cs-hp-current { text-align: center; }

.cs-hp-current > label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--border-color);
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.cs-hp-adjust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.cs-hp-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    min-width: 2ch;
    text-align: right;
}

.cs-hp-sep {
    font-size: 1.1rem;
    color: var(--border-color);
}

.cs-hp-btn,
.cs-mini-btn {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    width: 32px;
    height: 32px;
    color: var(--parchment);
    background: var(--bg-panel);
    border: 2px solid var(--accent-gold);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}

.cs-hp-btn:hover,
.cs-mini-btn:hover { background: var(--border-color); }
.cs-hp-btn:active,
.cs-mini-btn:active { transform: translateY(1px); }

.cs-mini-btn { width: 26px; height: 26px; font-size: 0.95rem; }

/* --------------------------- Death saves --------------------------- */

.cs-death {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--border-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.cs-death-label {
    font-family: var(--font-header);
    font-size: 0.8rem;
    color: var(--ink);
    width: 100%;
}

.cs-death-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cs-death-cap {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--border-color);
    font-weight: 700;
}

.cs-pip {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease;
}

.cs-pip.cs-pip-on { background: #2e5a2e; border-color: #2e5a2e; }
.cs-pip.cs-pip-fail.cs-pip-on { background: #8b3a2f; border-color: #8b3a2f; }

/* ------------------------------ Attacks ---------------------------- */

.cs-attacks-head,
.cs-attack-row {
    display: grid;
    grid-template-columns: 1fr 70px 1.2fr 32px;
    gap: 0.5rem;
    align-items: center;
}

.cs-attacks-head {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--border-color);
    font-weight: 700;
    padding: 0 0.2rem 0.3rem;
}

.cs-attack-row { margin-bottom: 0.4rem; }

/* ---------------------- Delete / add buttons ----------------------- */

.cs-del,
.cs-del-sm {
    font-size: 0.85rem;
    line-height: 1;
    color: #8b3a2f;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 0.35rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.cs-del:hover,
.cs-del-sm:hover { background: rgba(139, 58, 47, 0.15); color: #6e2a20; }
.cs-del-sm { font-size: 0.7rem; padding: 0.25rem; }

.cs-add,
.cs-add-sm {
    font-family: var(--font-header);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--ink);
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    padding: 0.4rem 0.8rem;
    margin-top: 0.5rem;
    transition: background 0.15s ease;
}

.cs-add:hover,
.cs-add-sm:hover { background: rgba(93, 64, 55, 0.12); }
.cs-add-sm { font-size: 0.72rem; padding: 0.3rem 0.6rem; }

/* ----------------------------- Resources --------------------------- */
/* Homebrew trackers — themed in the deep jungle green to set them
   apart from the canonical parchment stat blocks. */

.cs-res-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.8rem;
}

.cs-res-box {
    background: var(--bg-panel);
    color: var(--text-light);
    border: 2px solid var(--accent-gold);
    border-radius: 8px;
    padding: 0.7rem 0.8rem;
}

.cs-res-box input,
.cs-res-box textarea {
    color: var(--text-light);
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
}

.cs-res-box input:focus { background: rgba(0, 0, 0, 0.4) !important; }

.cs-res-top {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.cs-res-name {
    font-family: var(--font-header) !important;
    font-size: 0.9rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.5) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.cs-res-box .cs-del { color: #e69a8f; }
.cs-res-box .cs-del:hover { background: rgba(230, 154, 143, 0.2); }

.cs-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.cs-counter-lg { margin-bottom: 0.6rem; }

.cs-counter-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-gold);
    min-width: 1.6ch;
    text-align: center;
}

.cs-counter-sep { color: rgba(255, 255, 255, 0.5); }

.cs-res-max {
    width: 54px !important;
    font-weight: 700;
}

.cs-res-reset {
    margin-top: 0.6rem;
    font-size: 0.8rem !important;
    font-style: italic;
}

.cs-res-items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cs-res-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.4rem;
}

.cs-res-item-label {
    font-size: 0.85rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.cs-res-box .cs-del-sm { color: #e69a8f; }

/* --------------------------- Features ------------------------------ */

.cs-feature-row,
.cs-inv-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.cs-feature-text {
    resize: vertical;
    line-height: 1.4;
}

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

.cs-inv-group {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.7rem;
}

.cs-inv-grouptop {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.cs-inv-container {
    font-family: var(--font-header) !important;
    font-size: 0.88rem !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.cs-inv-items {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cs-inv-item { margin-bottom: 0; align-items: center; }

/* ------------------------------ Notes ------------------------------ */

.cs-notes-text {
    resize: vertical;
    line-height: 1.5;
    min-height: 90px;
}

/* ------------------------------ Bottom ----------------------------- */

.cs-bottom { margin-top: 1.25rem; }

/* --------------------------- Responsive ---------------------------- */

@media (max-width: 1100px) {
    .cs-top { grid-template-columns: 1fr; }
    .cs-combat-top { grid-template-columns: repeat(3, 1fr); }
    .cs-meta-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
    #cs-sheet { padding: 1rem; }
    .cs-abilities { grid-template-columns: repeat(2, 1fr); }
    .cs-combat-top { grid-template-columns: repeat(2, 1fr); }
    .cs-meta-grid { grid-template-columns: repeat(2, 1fr); }
    .cs-insp-prof { grid-template-columns: 1fr; }
    .cs-name-input { font-size: 1.5rem !important; }
    .cs-attacks-head { display: none; }
    .cs-attack-row {
        grid-template-columns: 1fr 60px;
        grid-template-areas:
            "name name"
            "bonus damage"
            "del del";
        gap: 0.4rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px dashed var(--border-color);
    }
    #cs-status { margin-left: 0; width: 100%; }
}