/* 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;
}
/* The intro sits inside the flex header next to the action buttons; the
   shared 24px bottom margin would push the header apart. */
.cs-head .tool-intro { margin-bottom: 0; }
.cs .tool-intro kbd {
    font: inherit;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 0 0.3em;
}

.cs-actions { display: flex; flex-wrap: wrap; 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: var(--bg);
}
.cs-btn-ghost { background: transparent; color: var(--accent-strong); }
.cs-btn:hover { filter: brightness(1.05); }

/* Share button lives in the same action row - match the .cs-btn ghost look + size.
   The global .btn-outline is smaller (14px) and the .tool-share <p> wrapper adds a
   top margin that would drop it out of line with the other buttons. */
.cs-actions .tool-share { margin: 0; display: flex; }
.cs-actions .tool-share .btn-outline {
    font: inherit;
    padding: 0.45rem 0.9rem;
    border-color: var(--accent);
    color: var(--accent-strong);
}
.cs-actions .tool-share .btn-outline:hover {
    filter: brightness(1.05);
    border-color: var(--accent);
    color: var(--accent-strong);
}
.cs-actions .tool-share .icon { color: inherit; }

/* Auto-fill / Share confirmation: a brief green flash on the button and a matching
   ring on each field Auto-fill computed, so the click reads as an action even when
   the numbers were already correct. Colour fades only (no motion), so no
   prefers-reduced-motion gate is needed - the class is set from JS per click. */
.cs-btn.is-confirmed,
.cs-actions .tool-share .btn-outline.is-confirmed { animation: cs-confirm 0.7s ease-out; }
@keyframes cs-confirm {
    0% { box-shadow: 0 0 0 3px var(--good); color: var(--good); border-color: var(--good); }
    100% { box-shadow: 0 0 0 3px transparent; }
}
.cs input.is-filled { animation: cs-field-flash 0.9s ease-out; }
@keyframes cs-field-flash {
    0% { box-shadow: 0 0 0 2px var(--good); }
    100% { box-shadow: 0 0 0 2px transparent; }
}

/* 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; }

/* Scaling wrappers (view mode). display:contents makes them layout-transparent,
   so edit mode and print render exactly as before; the controller turns them into
   a scaled "paper" only in view (see the @media screen view block below). */
.cs-paper, .cs-sheet { display: contents; }

/* 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; }

/* Top grid: skills span the first two columns on a second row, combat/attacks runs
   down the third column beside them. min-content on row 1 keeps it sized by the
   abilities/saves fieldsets, so the taller spanning combat column cannot open a gap
   above the skills band. */
.cs-grid-main { grid-template-rows: min-content auto; }
.cs-grid-main .cs-skills { grid-column: 1 / 3; grid-row: 2; }
.cs-grid-main .cs-combat-col { grid-column: 3; grid-row: 1 / span 2; }

/* Abilities */
.cs-ability {
    display: grid;
    grid-template-columns: 1fr 3.5rem 3.5rem auto;
    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 auto;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
}
.cs-save label, .cs-skill label { flex-direction: row; color: var(--text); }
/* Two sub-columns, filled column-major so the alphabet runs down the left column
   and continues down the right one. 18 skills / 2 = 9 rows. */
.cs-skill-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(9, auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--cs-gap);
    row-gap: 0.35rem;
}
.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; }

/* Quick-roll button on each ability / save / skill row. */
.cs-roll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}
.cs-roll:hover { border-color: var(--accent); color: var(--accent-strong); }
.cs-roll:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cs-roll .icon { width: 1rem; height: 1rem; }
/* A field paired with an inline roll button (initiative, hit dice, attack atk/dmg). */
.cs-field-roll { display: flex; align-items: center; gap: 0.3rem; }
.cs-field-roll input { flex: 1 1 auto; min-width: 0; }
.cs-death-label .cs-roll { margin-left: 0.35rem; vertical-align: middle; }

/* Result tooltip - one shared element, anchored over the clicked button (JS sets left/top). */
.cs-rolltip {
    position: fixed;
    z-index: 50;
    max-width: 16rem;
    padding: 0.5rem 0.6rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    font-size: 0.8rem;
}
.cs-rolltip[hidden] { display: none; }
/* Head: the check name + an optional bonus chip. */
.cs-rolltip-head {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}
.cs-rolltip-name { font-weight: 600; color: var(--accent-strong); }
.cs-rolltip-bonus { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Three variant rows (Normal / Advantage / Disadvantage), aligned in a shared
   3-column grid; each row uses display:contents so its cells join the grid. */
.cs-rolltip-rows {
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 0.5rem;
    row-gap: 0.15rem;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
}
.cs-rolltip-row { display: contents; }
.cs-rolltip-rowlabel { color: var(--muted); }
/* Left-aligned so the first die lines up across all rows (Normal shows only it). */
.cs-rolltip-dice { justify-self: start; display: inline-flex; align-items: baseline; gap: 0.35rem; }
.cs-rolltip-die { color: var(--text); }
.cs-rolltip-die.is-crit { color: var(--good); font-weight: 700; }
.cs-rolltip-die.is-fumble { color: var(--bad); font-weight: 700; }
/* The non-relevant die in an adv/dis row: greyed out and struck through. */
.cs-rolltip-die.is-dropped { text-decoration: line-through; color: var(--faint); font-weight: 400; }
/* `=` in its own column (signs line up); total right-aligned (units under units). */
.cs-rolltip-eq { color: var(--faint); }
.cs-rolltip-rowtotal { justify-self: end; font-weight: 700; color: var(--text); }
/* Advantage is green, disadvantage red (label + total). */
.cs-rolltip-row.is-adv .cs-rolltip-rowlabel,
.cs-rolltip-row.is-adv .cs-rolltip-rowtotal { color: var(--good); }
.cs-rolltip-row.is-dis .cs-rolltip-rowlabel,
.cs-rolltip-row.is-dis .cs-rolltip-rowtotal { color: var(--bad); }
/* Notation mode (hit dice, attack damage): one line - notation, faces, total. */
.cs-rolltip-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.45rem;
    font-variant-numeric: tabular-nums;
}
.cs-rolltip-expr { color: var(--muted); }
.cs-rolltip-error { color: var(--bad); }

/* 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; }

/* Spells (Fáze 2) - full-width segment: spellcasting header + fixed spell table.
   The table reuses .cs-attack-table; .cs-spell-table only pins the narrow columns. */
.cs-spellhead {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cs-gap);
    margin-bottom: 0.5rem;
}
.cs-spell-table { table-layout: fixed; }
.cs-spell-table th:nth-child(2), .cs-spell-table td:nth-child(2),
.cs-spell-table th:nth-child(3), .cs-spell-table td:nth-child(3) { width: 3rem; }
.cs-spell-table th:nth-child(3) { text-align: center; }
.cs-spell-prep { text-align: center; }
.cs-spell-prep input[type="checkbox"] { display: inline-block; vertical-align: middle; }

/* 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).
   Excluded in view: the paper preview keeps its full multi-column layout at every
   width and is scaled to fit instead (see the view block below). */
@media screen and (max-width: 820px) {
    .cs:not(.cs--view) .cs-grid { grid-template-columns: 1fr; }
    .cs:not(.cs--view) .cs-grid-main { grid-template-rows: none; }
    .cs:not(.cs--view) .cs-skills,
    .cs:not(.cs--view) .cs-combat-col { grid-column: auto; grid-row: auto; }
    .cs:not(.cs--view) .cs-skill-list {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: 1fr;
    }
    .cs:not(.cs--view) .cs-identity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- View mode: read-only presentation (screen only - print has its own block) ---- */
@media screen {
    /* Text fields render as plain text: no chrome, no caret, not clickable. Padding
       is kept so text stays put; only border/background go transparent (no reflow). */
    .cs--view input[type="text"],
    .cs--view textarea {
        border-color: transparent;
        background: transparent;
        caret-color: transparent;
        pointer-events: none;
        resize: none;
    }
    .cs--view input[type="text"]:focus,
    .cs--view textarea:focus { outline: none; }
    /* Empty fields carry a '-' placeholder (set in JS); render it as a faint dash. */
    .cs--view input::placeholder,
    .cs--view textarea::placeholder { color: var(--faint); opacity: 1; }
    /* Checkboxes stay interactive in View - ticking is marking, not field editing. */
    .cs--view input[type="checkbox"] { pointer-events: auto; }
    /* The toggle reads as active when View is on. */
    .cs-toggle[aria-pressed="true"] { background: var(--accent); color: var(--bg); }

    /* Paper preview: the sheet body renders at a fixed natural width with its full
       multi-column layout; the controller scales it down (transform on .cs-sheet)
       to fit the available width and sets .cs-paper's height to the scaled height
       so no empty space is reserved below. Keeping the columns (not the narrow
       single-column stack) is what shows the whole sheet at a glance, like paper. */
    .cs--view .cs-paper {
        display: block;
        position: relative;
        overflow: hidden;
    }
    .cs--view .cs-sheet {
        display: block;
        width: 792px;
        transform-origin: top left;
        --cs-gap: 0.5rem;
    }
}

/* ---- 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) and the
       SEO content block (how it works / FAQ / related tools) at the bottom. */
    header, footer, .skip, .cs-head, .cs-roll, .cs-rolltip, .tool-content { 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; }
    /* Placeholders never print: View sets a '-' on empty fields on screen, and some
       fields carry a static placeholder ("mod"). Keep the printed sheet identical
       regardless of the active mode. */
    .cs input::placeholder,
    .cs textarea::placeholder { color: transparent !important; }

    /* 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;
    }
}