/* Character sheet - on-screen layout. Print rules live in the @media print block (Task 4). */

.cs {
    --cs-gap: 0.75rem;
    color: var(--text);
}

.cs-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.cs-intro { color: var(--muted); margin: 0.25rem 0 0; }
.cs-intro kbd {
    font: inherit;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 0 0.3em;
}

.cs-actions { display: flex; gap: 0.5rem; }
.cs-btn {
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
}
.cs-btn-ghost { background: transparent; color: var(--accent-strong); }
.cs-btn:hover { filter: brightness(1.05); }

/* Fieldsets / sections */
.cs fieldset {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem;
    margin: var(--cs-gap) 0 0;
    min-width: 0;
}
.cs legend {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 0.4rem;
}

/* Inputs */
.cs label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); }
.cs input[type="text"],
.cs textarea {
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    width: 100%;
    min-width: 0;
}
.cs textarea { resize: vertical; }
.cs input[type="text"]:focus,
.cs textarea:focus { outline: 2px solid var(--accent-weak); border-color: var(--accent); }

/* Checkboxes - custom, monochrome (no native blue). An outlined square that
   fills edge-to-edge with the text colour when checked, so it reads dark on
   the light theme and light on the dark one, and prints solid black. We fill
   the whole box rather than centring a small inner square on purpose: the box
   often lands on a fractional pixel (grid gaps + sub-rem font sizes), and a
   small inner square would snap off-centre against the 1px border. A full fill
   is concentric by definition, so it stays crisp wherever the box falls. */
.cs input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.cs input[type="checkbox"]:checked { background: var(--text); border-color: var(--text); }
.cs input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Identity */
.cs-identity {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cs-gap);
    align-items: end;
}
.cs-identity .cs-name { grid-column: 1 / -1; }
.cs-identity .cs-name input { font-size: 1.25rem; font-weight: 600; }

/* Main 3-column grid */
.cs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cs-gap);
    align-items: start;
}
.cs-col { min-width: 0; }
.cs-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }

/* Abilities */
.cs-ability {
    display: grid;
    grid-template-columns: 1fr 3.5rem 3.5rem;
    align-items: center;
    gap: 0.4rem;
}
.cs-ability-name { font-size: 0.85rem; }
.cs-ability label { gap: 0; }

/* Saves + skills rows */
.cs-save, .cs-skill {
    display: grid;
    grid-template-columns: auto 3rem 1fr;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
}
.cs-save label, .cs-skill label { flex-direction: row; color: var(--text); }
.cs-val { text-align: center; }
.cs-skill-ab { color: var(--faint); }
.cs-sub { font-weight: 600; font-size: 0.8rem; color: var(--muted); margin: 0.85rem 0 0; }

/* Combat */
.cs-combat-top, .cs-hp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.cs-hp { margin-top: 0.5rem; }
.cs-hitdice { margin-top: 0.5rem; }
.cs-death { margin-top: 0.6rem; font-size: 0.8rem; color: var(--muted); }
.cs-death-row {
    display: grid;
    grid-template-columns: 5rem auto;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
}
.cs-death-marks { display: inline-flex; gap: 0.4rem; }

/* Attacks */
.cs-attack-table { width: 100%; border-collapse: collapse; }
.cs-attack-table th { text-align: left; font-size: 0.7rem; color: var(--muted); font-weight: 600; padding: 0 0.3rem 0.2rem; }
.cs-attack-table td { padding: 0.15rem 0.15rem; }
.cs-block { margin-top: 0.5rem; }
.cs-block textarea, .cs-personality textarea { color: var(--text); }

/* Bottom grid */
.cs-currency { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3rem; margin-bottom: 0.5rem; }
.cs-currency label { font-size: 0.7rem; }

/* Print-only footer (logo + URL) - hidden on screen, revealed in @media print. */
.cs-print-foot { display: none; }

/* Responsive: collapse columns (screen only - print keeps its multi-column grid). */
@media screen and (max-width: 820px) {
    .cs-grid { grid-template-columns: 1fr; }
    .cs-identity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Print: a clean black-on-white sheet, no site chrome ---- */
@media print {
    /* Hide everything that isn't the sheet itself - the whole header block
       (back link, "Dungeons & Dragons" eyebrow, title, intro, actions). */
    header, footer, .skip, .cs-head { display: none !important; }

    /* Force white background regardless of the active theme (dark-theme rules
       out-specify a bare `body`, so !important is needed here). */
    html, body { background: #fff !important; color: #000 !important; }
    /* Side margins live on the content (padding), not only @page, so they
       survive the browser's "Margins: None" setting - which otherwise zeroes
       @page and prints the sheet flush to the paper edge. Horizontal padding
       applies on every page; @page handles top/bottom across page breaks. */
    .wrap { margin: 0; padding: 0 12mm; max-width: none; }
    .cs, .cs fieldset, .cs-grid { background: transparent !important; }

    @page { margin: 12mm 0; }

    .cs, .cs * { color: #000 !important; }
    .cs fieldset { border-color: #000; border-radius: 0; break-inside: avoid; padding: 0.4rem 0.5rem; }
    .cs legend { color: #000; }
    .cs input[type="text"], .cs textarea {
        background: #fff !important;
        border: none;
        border-bottom: 1px solid #000;
        border-radius: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .cs textarea { border: 1px solid #000; }
    /* Custom checkboxes: black outline on white, solid-black fill when checked,
       exact-print so the marks survive any active theme. */
    .cs input[type="checkbox"] {
        background: #fff !important;
        border: 1px solid #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .cs input[type="checkbox"]:checked { background: #000 !important; }

    /* Keep the grids tight so it fits in as few pages as possible. */
    .cs { --cs-gap: 0.35rem; font-size: 0.72rem; }
    .cs-grid { gap: 0.4rem; }
    .cs fieldset { margin-top: 0.35rem; }
    .cs-list { gap: 0.12rem; margin-top: 0.2rem; }
    .cs-save, .cs-skill { gap: 0.3rem; }
    .cs input[type="text"] { padding: 0.05rem 0.3rem; }
    .cs textarea { padding: 0.1rem 0.3rem; }
    .cs-sub { margin-top: 0.4rem; }

    /* Identity section: drop the outer fieldset border (the whole-section box) -
       it's redundant with the per-field cells. Each field stays a bordered cell
       with its caption notched into the top-left corner of the border, so the
       label is unambiguously tied to the value below it (the white caption
       background masks the border line behind it, producing the notch). */
    .cs fieldset.cs-identity { border: none; padding: 0; }
    .cs-identity { gap: 1.1rem 0.45rem; align-items: stretch; }
    .cs-identity label {
        position: relative;
        border: 1px solid #000;
        border-radius: 0;
        gap: 0;
        padding: 0.5rem 0.35rem 0.15rem;
        justify-content: flex-end;
    }
    .cs-identity .cs-cap {
        position: absolute;
        top: -0.42rem;
        left: 0.3rem;
        padding: 0 0.2rem;
        background: #fff !important;
        font-size: 0.52rem;
        font-weight: 600;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* The cell border replaces the per-input underline; the input is a plain,
       borderless writing area filling the cell. */
    .cs-identity label input[type="text"] {
        border: none !important;
        padding: 0;
        min-height: 1rem;
        font-size: 0.85rem;
    }

    /* Character name: a more prominent cell so it stands out - thicker border
       and a larger, bolder value. */
    .cs-identity .cs-name { border-width: 2px; padding: 0.6rem 0.5rem 0.3rem; }
    .cs-identity .cs-name .cs-cap { top: -0.45rem; left: 0.4rem; padding: 0 0.25rem; }
    .cs-identity .cs-name input { min-height: 1.4rem; font-size: 1.4rem; font-weight: 700; }

    /* Small footer with the logo + URL, pinned to the bottom of every page.
       position: fixed repeats it on each printed page; the light grey keeps it
       unobtrusive (overrides the .cs * black reset above, hence !important). */
    .cs-print-foot {
        position: fixed;
        left: 0;
        right: 0;
        /* Chrome repeats fixed elements on every printed page but clips them to
           the page content box, so the footer is positioned relative to the
           bottom of the content area (inside the @page bottom margin). A small
           positive offset lifts it further off the paper edge. The sheet content
           ends well above this line, so they never overlap. */
        bottom: 4mm;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        margin: 0;
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: #c2c7d0 !important;
    }
    /* Override the `.cs *` black reset on the footer text (inheritance alone
       loses to that direct !important rule, so target the descendant here). */
    .cs-print-foot * { color: #c2c7d0 !important; }
    /* Logo as a grey background image (see template note on the inline-SVG bug). */
    .cs-foot-logo {
        display: inline-block;
        width: 11px;
        height: 11px;
        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201638.95%201632.2185%27%20fill%3D%27%23c2c7d0%27%3E%3Cg%20transform%3D%27matrix%280.1%2C0%2C0%2C-0.1%2C-420.525%2C3018.5185%29%27%3E%3Cpath%20d%3D%27m%2012237%2C30184%20c%20-1%2C-1%20-87%2C-4%20-192%2C-8%20-104%2C-3%20-210%2C-8%20-235%2C-11%20-25%2C-2%20-101%2C-9%20-169%2C-15%20-131%2C-12%20-188%2C-18%20-236%2C-25%20-16%2C-2%20-52%2C-7%20-80%2C-10%20-27%2C-4%20-61%2C-8%20-74%2C-10%20-13%2C-2%20-45%2C-7%20-70%2C-11%20-347%2C-47%20-865%2C-166%20-1211%2C-276%20-488%2C-156%20-781%2C-273%20-1205%2C-483%20-313%2C-155%20-435%2C-224%20-725%2C-405%20-470%2C-295%20-859%2C-597%20-1287%2C-1000%20l%20-92%2C-86%202867%2C-2867%202867%2C-2867%202870%2C2870%202870%2C2871%20-55%2C51%20c%20-193%2C181%20-284%2C261%20-455%2C404%20-238%2C197%20-463%2C364%20-710%2C526%20-138%2C91%20-324%2C208%20-330%2C208%20-1%2C0%20-32%2C17%20-66%2C38%20-387%2C235%20-1002%2C513%20-1506%2C681%20-309%2C103%20-440%2C140%20-828%2C231%20-85%2C20%20-241%2C50%20-412%2C79%20-199%2C34%20-212%2C36%20-338%2C51%20-49%2C6%20-106%2C12%20-125%2C15%20-122%2C15%20-330%2C32%20-510%2C41%20-113%2C5%20-558%2C12%20-563%2C8%20z%27/%3E%3Cpath%20d%3D%27m%2018392%2C24797%20-1173%2C-1173%2041%2C-129%20c%20221%2C-707%20284%2C-1492%20179%2C-2230%20-75%2C-531%20-224%2C-1018%20-458%2C-1500%20-261%2C-538%20-558%2C-954%20-985%2C-1381%20-408%2C-408%20-819%2C-705%20-1323%2C-957%20-327%2C-164%20-720%2C-310%20-1028%2C-383%20l%20-75%2C-18%20v%20-1581%20-1582%20l%20116%2C18%20c%20435%2C67%20939%2C192%201369%2C339%202396%2C820%204294%2C2721%205109%2C5118%20227%2C668%20356%2C1311%20418%2C2077%2017%2C211%2017%2C919%200%2C1130%20-83%2C1037%20-309%2C1932%20-712%2C2822%20-76%2C166%20-242%2C497%20-287%2C570%20l%20-19%2C32%20z%27/%3E%3Cpath%20d%3D%27m%205216%2C25935%20c%20-36%2C-56%20-208%2C-397%20-286%2C-568%20-403%2C-890%20-629%2C-1786%20-712%2C-2822%20-17%2C-212%20-17%2C-920%200%2C-1130%2062%2C-769%20191%2C-1409%20418%2C-2077%20728%2C-2141%202323%2C-3897%204390%2C-4833%20650%2C-295%201392%2C-516%202088%2C-624%20l%20116%2C-18%20v%201584%20c%200%2C1310%20-2%2C1583%20-13%2C1583%20-24%2C0%20-267%2C69%20-412%2C116%20-212%2C70%20-399%2C146%20-620%2C253%20-538%2C261%20-954%2C558%20-1381%2C985%20-278%2C278%20-461%2C503%20-666%2C816%20-482%2C736%20-761%2C1579%20-818%2C2465%20-38%2C604%2042%2C1273%20219%2C1825%20l%2041%2C125%20-1174%2C1173%20-1173%2C1174%20z%27/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}