/*
 * The text editor Version 2 document's look on the redesigned signing page: step 3's custom form
 * (#custom_form_content.wk-content) and step 4's waiver (#wvprintpage.wk-content). Builds on
 * tokens.css; the rest of each step lives in components.css and pages/<step>.css.
 *
 * Scope: :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf). :is() takes the highest specificity
 * of its arguments, so every rule keeps the ID weight it had as #step4.wk-sign-v2 and beats
 * waiverprint_new.css and wk-editor.css exactly as before. .wk-pdf is the Version 2 signed PDF
 * (SignedDocumentPdf), which inlines this file after wk-editor.css, so the document prints as it
 * shows here; pdf.css after it only adds what is print-only.
 *
 * The document itself is styled by wk-editor.css (TiptapContentAsset), whose rules sit in the
 * cascade layer wk-content-defense and are all !important, so nothing unlayered can override
 * them. The document rules below are in the layer wk-sign-document, which layouts/print_new.php
 * declares before any stylesheet loads: for !important declarations an EARLIER layer wins, so
 * these beat wk-editor.css. They are !important for that reason only.
 * Like wk-editor.css, they leave a property alone on an element whose inline style sets it
 * (:not([style*=...])), so what the author set in the editor still shows.
 * What prepareContent() inserts (placeholder values and fields, signature pads: wk-content-skip,
 * SigningContentSkip) is styled here too: fields like the editor's fields. Placeholder values
 * are plain text in the document's own style, no chips (user decision 2026-10-21).
 */

/* wk-editor.css reads these (unlayered, so they beat its own zero-specificity defaults): links,
   checked boxes and fields follow the theme. */
:is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content {
    --wk-accent: var(--accent-strong);
    --wk-bg: var(--surface);
    --wk-text: var(--ink);
    --wk-border-strong: var(--border-strong);
}

/* The document column is as wide as the text column in the editor and in the PDF: the waiver's
   page margins (PageMargins::columnStyle(), an inline --wk-page-text-width on #wvprintpage), so
   the document breaks into lines as there. Centered in the step; narrower screens shrink it as
   before. Not the PDF: Chromium prints it inside the same margins. */
:is(#step3.wk-sign-v2, #step4.wk-sign-v2) #wvprintpage.wk-content {
    max-width: var(--wk-page-text-width, none);
    margin-left: auto;
    margin-right: auto;
}

/* The card holding the document is the page, where the window has room for one (8.5in plus the
   card's border and the column's 24px gutters): one page wide, with the waiver's top, left and
   right margins as its padding (PageMargins::cardStyle(), inline on .wk-sign-page), so the text
   sits as far from the card's edges as from the paper's in the editor and the PDF, and the text
   column above fills it exactly. Not the bottom margin, which is only room for the PDF's footer.
   Narrower windows keep the card's own padding (components.css). */
/* Square corners at any width, as the sheet in the editor and the PDF has, not the card's 14px. */
#step4.wk-sign-v2 .fn-adult-container .fn-adult-content.wk-sign-page {
    border-radius: 0;
}

@media (min-width: 866px) {
    #step4.wk-sign-v2 .fn-adult-container .fn-adult-content.wk-sign-page {
        box-sizing: border-box;
        max-width: calc(8.5in + 2px);
        margin-left: auto;
        margin-right: auto;
        padding-top: var(--wk-page-margin-top, 34px);
        padding-right: var(--wk-page-margin-right, 48px);
        padding-left: var(--wk-page-margin-left, 48px);
    }
}

@layer wk-sign-document {
    /* Text: the font, size and line height are wk-editor.css's (.wk-content, whose specificity
       beats waiverprint_new.css's .printpage), so they follow the editor (user decision
       2026-10-08); the fonts are served from web/css/document-fonts.css. Only the color is the
       page's. */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content {
        color: var(--ink) !important;
    }

    /* Spacing between and inside blocks (paragraphs, headings, lists, quotes, rules, the margin
       around tables) is the editor's (user decision 2026-10-08): wk-editor.css's .wk-content rules,
       not overridden here, so the document breaks into lines and pages as in the editor. What
       follows only colors and frames, and the frames take no room (inset shadows, not borders). */

    /* Quotes as the mockup's callout, at the editor's size (wk-editor.css sets the margin, padding
       and bar; nothing here takes room). Each property yields only to what the author set inline
       (the editor saves a quote's left border and left padding inline). A quote with its own bar
       color gets its background and frame tinted from it (js/wk-sign-quote-tint.js sets the two
       custom properties); otherwise from the theme color. */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content blockquote:not(.wk-content-skip, .wk-content-skip *) {
        border-radius: 8px !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content blockquote:not(.wk-content-skip, .wk-content-skip *):not([style*="background"]) {
        background: var(--wk-sign-quote-tint, var(--accent-soft)) !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content blockquote:not(.wk-content-skip, .wk-content-skip *):not([style^="border:"], [style*=" border:"], [style*=";border:"], [style*="border-top"], [style*="border-right"], [style*="border-bottom"]) {
        box-shadow: inset 0 0 0 1px var(--wk-sign-quote-frame, var(--chip-border)) !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content blockquote:not(.wk-content-skip, .wk-content-skip *):not([style^="border:"], [style*=" border:"], [style*=";border:"], [style*="border-left"]) {
        border-left-color: var(--accent) !important;
    }

    /* The editor's rule keeps its size (wk-editor.css); only its color is the page's. */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content hr:not(.wk-content-skip, .wk-content-skip *) {
        background-color: var(--border) !important;
    }

    /* Tables: the editor's size (wk-editor.css: widths, borders, cell padding, text size); only
       the colors are the page's. */

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content caption:not(.wk-content-skip, .wk-content-skip *) {
        caption-side: top !important;
        margin-bottom: 10px !important;
        font-weight: 600 !important;
        text-align: center !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content :is(td, th):not(.wk-content-skip, .wk-content-skip *):not([style*="border"]) {
        border-color: var(--border) !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content th:not(.wk-content-skip, .wk-content-skip *):not([style*="background"]) {
        background: var(--surface-2) !important;
    }

    /* Fields: the author's (from the editor) and the page's own (placeholder fields in
       span.WC<PLACEHOLDER>), at the editor's size (wk-editor.css: margins, padding, border width,
       font, widths); only the colors are the page's. An error (.error, mirrored as
       .wk-content-invalid) keeps its color. */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content :is(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], textarea, select) {
        color: var(--ink) !important;
        background-color: var(--surface-2) !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content :is(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], textarea, select):not(.error, .wk-content-invalid) {
        border-color: var(--border-strong) !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content :is(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], textarea, select):focus {
        outline: 2px solid var(--accent) !important;
        outline-offset: 1px !important;
        background-color: var(--surface) !important;
        border-color: var(--accent) !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content :is(input, textarea)::placeholder {
        color: var(--ink-faint) !important;
    }

    /* What prepareContent() inserts (wk-content-skip) is HTML with its own source line breaks and
       indentation (Functions.php: `<span class="WCCUSTOM" ...>\n<24 spaces><input ...`). It
       inherited wk-editor.css's `p { white-space: break-spaces }` (kept for the author's own
       spaces), which printed those as a line break and ~96px of spaces before the field. Normal
       whitespace inside it, as on the Version 1 page (user decision 2026-10-21). Layered and not
       !important: it only replaces the inherited value, the widgets' own rules still win. */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content .wk-content-skip {
        white-space: normal;
    }

    /* <CHILDRENINFOCONTENT(...)> / <ADULTSINFOCONTENT(...)> become a div (the wrapper of the
       copies, Functions::prepareChildrenContent() / prepareAdultsContent()) inside the author's
       <p>. The HTML parser closes the <p> at the div, leaving an empty <p> before it, and makes
       the stray </p> after it a second empty <p>. wk-editor.css gives every paragraph, empty ones
       too, a line (p::after "\200b"), so each block added two blank lines the author never wrote
       (the token's own line was one). Those two are hidden; the author's own blank lines (further
       away) stay (user decision 2026-10-21). */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content p:empty:has(+ :is(.child_info_content_wrapper, .adult_info_content_wrapper)),
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content :is(.child_info_content_wrapper, .adult_info_content_wrapper) + p:empty {
        display: none !important;
    }

    /* <CUSTOM(...)> and <INDEX(...)> fields (Functions::prepareContent(): span.WCCUSTOM > input,
       or the textarea print.waiver.new.js swaps in for a sized String field; span.WCINDEX > select)
       sit in a wk-content-skip span, so wk-editor.css gives them no box and they kept the
       browser's inset border. The editor's field box here (wk-editor.css's --wk-field-* sizes;
       colors, focus and errors from the rules above), so they look like the author's fields
       (user decision 2026-10-21). Sizes set inline (data-width/-height) still win. A 3px margin
       above and below: the field is taller than the document's line (14px x 1.15), and the
       author wrote the token on a line of text, so fields on lines next to each other touched. */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content :is(.WCCUSTOM, .WCINDEX) > :is(input, textarea, select) {
        margin: 3px var(--wk-field-margin-x) !important;
        padding: var(--wk-field-padding-y) var(--wk-field-padding-x) !important;
        vertical-align: middle !important;
        font: inherit !important;
        border-width: var(--wk-field-border-width) !important;
        border-style: solid !important;
        border-radius: var(--wk-radius-sm) !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content .WCINDEX > select {
        min-width: var(--wk-select-min-width) !important;
    }

    /* The clear × (js/wk-sign-field-clear.js) sits over the end of the field: room for it would
       make the field wider than in the editor. */

    /* waiverprint_new.css: input.error[type=checkbox|radio] adds a red outline, a second ring
       around this one (unlayered, so it beats this layer without !important). */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content :is(input, textarea, select):is(.error, .wk-content-invalid) {
        border-color: var(--danger) !important;
        box-shadow: 0 0 0 3px rgba(214, 69, 69, .14) !important;
        outline: none !important;
    }

    /* A multi-select, and an author's single select, becomes a field with a styled dropdown
       (js/wk-sign-multiselect.js, styled in components.css, outside this layer). Its native select
       stays in the layout, invisible, with the editor's select box: wk-editor.css skips it inside
       the widget's wk-content-skip, so the sizes are read from the field properties it publishes
       on .wk-content (--wk-field-*, --wk-select-min-width). The widget then takes exactly the
       room the select takes in the editor, and its field is laid over it. */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content select.wk-sign-ms__native.wk-sign-ms__native {
        position: static !important;
        display: inline-block !important;
        box-sizing: border-box !important;
        min-width: var(--wk-select-min-width) !important;
        margin: 0 var(--wk-field-margin-x) !important;
        padding: var(--wk-field-padding-y) var(--wk-field-padding-x) !important;
        font: inherit !important;
        vertical-align: top !important;
        border: var(--wk-field-border-width) solid transparent !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* The browser's own size, as in the editor, unless the author set one inline. */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content select.wk-sign-ms__native.wk-sign-ms__native:not([style*="width"]) {
        width: auto !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content select.wk-sign-ms__native.wk-sign-ms__native:not([style*="height"]) {
        height: auto !important;
    }

    /* The widget itself sits in the line as the editor's field wrapper does: inline-flex, centred
       on the line, so it is exactly the native select's box. An inline-block would also hold a
       line box as tall as the paragraph's line-height, so with a large line-height it grew past
       the select's box while the editor keeps the box and centres it in the line. */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content .wk-sign-ms {
        display: inline-flex !important;
        max-width: 100% !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }

    /* A multi-select is one field line high, not the editor's list box (user decision 2026-10-12):
       js/wk-sign-multiselect.js gives its native select size="1", which makes it exactly as high
       as a single select. The widget is a one-cell grid holding that select and the field, so the
       field is at least that high and grows past it as its chips wrap (components.css). An
       author's inline height still holds. */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content .wk-sign-ms:not(.wk-sign-ms--single) {
        display: inline-grid !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content .wk-sign-ms:not(.wk-sign-ms--single) > :is(.wk-sign-ms__field, .wk-sign-ms__native) {
        grid-area: 1 / 1 !important;
    }

    /* Without that script (or for a single-choice list box): checkbox rows, each option with a
       box, a checked one the theme color's filled box (--wk-sign-check-box-icon,
       SigningThemePalette). Phones draw their own picker and ignore the option styles. */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content select:is([multiple], [size]):not(.wk-sign-ms__native) {
        padding: 6px !important;
        overflow-y: auto !important;
        background-image: none !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content select:is([multiple], [size]):not(.wk-sign-ms__native) option {
        margin: 1px 0 !important;
        padding: 7px 10px 7px 36px !important;
        font: inherit !important;
        font-size: .955em !important; /* 15px at 15.7px */
        line-height: 1.4 !important;
        color: var(--ink) !important;
        border-radius: 6px !important;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1.1' y='1.1' width='17.8' height='17.8' rx='4.5' fill='white' stroke='%23CBD6D2' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat 10px center / 18px 18px !important;
        cursor: pointer !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content select:is([multiple], [size]):not(.wk-sign-ms__native) option:hover {
        background-color: var(--surface) !important;
    }

    /* A gradient layer under the icon: browsers paint their own grey or blue behind a checked
       option unless the background is an image. */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content select:is([multiple], [size]):not(.wk-sign-ms__native) option:checked {
        background: var(--wk-sign-check-box-icon) no-repeat 10px center / 18px 18px,
                    linear-gradient(var(--accent-soft), var(--accent-soft)) !important;
        color: var(--ink) !important;
        font-weight: 500 !important;
    }

    /* Checkboxes and radios: wk-editor.css draws and sizes them, with the
       theme color (see the custom properties above). The page's placeholder radios stay inline
       on phones (waiverprint_new.css makes .printpage radios blocks there). */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content :is(input[type=checkbox], input[type=radio]) {
        display: inline-block !important;
        cursor: pointer !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content :is(input[type=checkbox], input[type=radio]):not(.error, .wk-content-invalid, :checked) {
        border-color: var(--border-strong) !important;
    }


    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content input[type=checkbox]:checked {
        background-color: var(--accent) !important;
        background-image: var(--wk-sign-document-check-icon) !important; /* the editor's check mark */
        background-size: 14px 14px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content input[type=checkbox]:checked:not(.error, .wk-content-invalid) {
        border-color: var(--accent) !important;
    }

    /* Radio: a 9px dot in the accent inside the ring. */
    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content input[type=radio]:checked {
        background-color: var(--accent) !important;
        box-shadow: inset 0 0 0 3px var(--surface) !important;
    }

    :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content input[type=radio]:checked:not(.error, .wk-content-invalid) {
        border-color: var(--border-strong) !important;
    }
}

@layer wk-sign-document {
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        body.wk-zoom-tablet :is(#step3.wk-sign-v2, #step4.wk-sign-v2, .wk-pdf) .wk-content {
            font-size: 17.8px !important; /* the zoom's 20px : 15.7px, at 14px */
        }
    }
}