/*
 * What only the signing step (print_new/step4.php) of a text editor Version 2 waiver has: the
 * card's column layout, signer details, signature, signing time, the consent checkbox. It keeps
 * the #step4.wk-sign-v2 scope and builds on ../tokens.css and ../components.css. The document
 * itself (#wvprintpage.wk-content) is styled in ../document.css, which loads before this file.
 *
 * Everything here applies only to text editor Version 2 waivers (Waiver::usesTiptapEditor()):
 * step4.php adds wk-sign-v2 to the step only for those. Version 1 waivers keep
 * waiverprint_new.css alone.
 */

/* ---------------------------------------------------------------- card layout */

/* The page's 66% columns and gutters: full width inside the card. Step 4 only: other steps lay
   out their own .fn-row/.fn-col-* grids. */
#step4.wk-sign-v2 .fn-adult-content .fn-row {
    margin-left: 0;
    margin-right: 0;
}

#step4.wk-sign-v2 .fn-adult-content [class^=fn-col-] {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* ---------------------------------------------------------------- signer details */

#step4.wk-sign-v2 .wk-sign-details {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
}

#step4.wk-sign-v2 .wk-sign-divider {
    height: 1px;
    margin: 8px 0 28px;
    background: var(--border);
    border: none;
}

#step4.wk-sign-v2 .wk-sign-details__head {
    margin: 0 0 16px;
    font-size: 16.3px;
    font-weight: 600;
    line-height: 1.5;
}

#step4.wk-sign-v2 .wk-sign-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 22px;
    margin: 0 0 30px;
    padding: 18px 20px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* The adults' contact row (#uf-adultcontact<n>) flows into its person's grid. */
#step4.wk-sign-v2 .wk-sign-grid__row {
    display: contents;
}

#step4.wk-sign-v2 .wk-sign-grid__item {
    min-width: 0;
}

/* A detail the signer left empty is not listed (browsers without :has() list it, empty). */
#step4.wk-sign-v2 .wk-sign-grid__item:has(> dd:empty) {
    display: none;
}

#step4.wk-sign-v2 .wk-sign-grid dt {
    margin: 0 0 3px;
    font-size: 10.9px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

#step4.wk-sign-v2 .wk-sign-grid dd {
    margin: 0;
    font-size: 14.7px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#step4.wk-sign-v2 .wk-sign-person {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

#step4.wk-sign-v2 .wk-sign-person .wk-sign-grid {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 12px;
}

#step4.wk-sign-v2 .wk-sign-person__num {
    flex: none;
    min-width: 2.2em;
    padding-top: 19px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-muted);
}

#step4.wk-sign-v2 #ut-adults,
#step4.wk-sign-v2 #ut-children {
    margin-bottom: 18px;
}

/* ---------------------------------------------------------------- signature */

#step4.wk-sign-v2 .signbox {
    min-height: 0;
    margin: 0;
}

#step4.wk-sign-v2 #legalsign {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 0 16px;
    padding: 13px 14px !important; /* .fn-input */
    box-sizing: border-box;
    font-family: var(--font);
    font-size: 16px !important; /* waiverprint_new.css: inputs 10pt !important at 640-960px */
    line-height: 1.4;
    color: var(--ink);
    background: var(--surface-2);
    border: 1.5px solid var(--border-strong);
    border-radius: 10px;
}

#step4.wk-sign-v2 #legalsign:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    background: var(--surface);
    border-color: var(--accent);
}

#step4.wk-sign-v2 #legalsign::placeholder {
    color: var(--ink-faint);
}

#step4.wk-sign-v2 #legalsign.error,
#step4.wk-sign-v2 #legalsign.fn-has-error-input { /* print.waiver.new.js marks an empty name with this */
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(214, 69, 69, .14);
}

/* The drawn signature: the label row over the canvas, "Clear" on the right. The canvas keeps
   the size step4.php gives its attributes (CSS scaling would misplace the strokes); its wrapper
   stays inline-block, so the label row is as wide as the canvas. */
#step4.wk-sign-v2 .mainSigPad,
#step4.wk-sign-v2 .mainSigPad .fn-row {
    text-align: left !important;
}

#step4.wk-sign-v2 .mainSigPad .fn-form-group {
    min-height: 0;
    margin: 0 0 16px;
}

#step4.wk-sign-v2 .mainSigPad label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-align: left !important;
}

#step4.wk-sign-v2 .sigNav {
    float: none !important;
    min-height: 0;
}

#step4.wk-sign-v2 .clearButton a {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    font-size: 13.6px;
    font-weight: 600;
    color: var(--accent-strong);
    text-decoration: underline;
    background: none;
    border: 0;
}

#step4.wk-sign-v2 canvas.pad {
    display: block;
    background: var(--surface-2);
    border: 1.5px dashed var(--border-strong) !important; /* #canvas_signature has an inline border */
    border-radius: 10px;
    touch-action: none;
    cursor: crosshair;
}

/* ---------------------------------------------------------------- time, consents */

#step4.wk-sign-v2 .wk-sign-meta {
    min-height: 0;
    margin: 0 0 22px;
}

#step4.wk-sign-v2 .signtimeblock {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-faint);
    text-align: left;
}

#step4.wk-sign-v2 .appr-checkbox {
    margin-top: 0;
}

#step4.wk-sign-v2 .appr-checkbox .fn-checkbox {
    margin-bottom: 26px;
}

#step4.wk-sign-v2 .sign-bottom .fn-checkbox label {
    font-weight: 500;
}

/* ---------------------------------------------------------------- signature pads in the document */

/* A signature pad that prepareContent() puts in the document (wk-content-skip). */
#step4.wk-sign-v2 .sigPad .clearButton a {
    font-size: 13px;
}

/* ---------------------------------------------------------------- small screens */

@media (max-width: 600px) {
    #step4.wk-sign-v2 .wk-sign-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 14px 16px;
    }
}

/* Tablet zoom (Waiver::$zoom_mode, body.wk-zoom-tablet, waiverprint_new.css): the same ~1.3x on
   the redesign's type and touch targets, which the rules above would otherwise pin. */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body.wk-zoom-tablet #step4.wk-sign-v2 #legalsign {
        font-size: 19px !important;
    }
}