/*
 * Page chrome and UI primitives shared by every redesigned step (title bar, card, page checkboxes,
 * buttons, select widget, text field clear), scoped to .wk-sign-v2 on the step container. Tokens
 * live in tokens.css; a rule only one step has goes in pages/<step>.css.
 *
 * Specificity: these selectors carry no ID. They win over waiverprint_new.css on specificity, or
 * on a tie by loading after it, so the bundle that loads this file (RedesignAsset) must depend on
 * WPNewAsset (and TiptapContentAsset). Known ties: .fn-main-container background on the step
 * itself, .fn-action-container .fn-title-arrow display, .fn-checkbox label min-height,
 * input.error[type=checkbox] outline. Where a rule had to be made more specific than a legacy
 * rule, it carries a comment naming that rule.
 *
 * Theme color: the --wk-sign-* custom properties come from layouts/print_new.php, built from the
 * waiver's theme color by SigningThemePalette (accent, a darker accent that reads on white, tints,
 * the text color on a filled accent, the check mark). Nothing here hard-codes the accent.
 *
 * This is plain CSS that wins over waiverprint_new.css on specificity (.wk-sign-v2 ...) or, on a
 * tie, by loading later, and over the layout's inline theme rules (which load after it) on
 * specificity alone; !important appears only where those use it or where an inline style must
 * yield.
 */

.wk-sign-v2 {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.wk-sign-v2 .wk-sign-mono {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

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

/* 960px: the themed page's own column (waiverprint_new.css .fn-wrapper), wider than the
   mockup's 820px, which read as cramped on desktop screens. */
.wk-sign-v2 .fn-wrapper {
    width: auto;
    max-width: 960px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* Title bar: caption on the left, the Back button on the right. */
.wk-sign-v2 .fn-action-container {
    display: block;
    margin: 0;
    padding: 0;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.wk-sign-v2 .fn-action-container .fn-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-top: 22px;
    padding-bottom: 20px;
}

.wk-sign-v2 .fn-action-container .fn-wrapper:after {
    display: none;
}

.wk-sign-v2 .fn-action-container .fn-action-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
    text-align: left;
}

.wk-sign-v2 .fn-action-container .fn-action-title h2 {
    margin: 0;
    font-family: var(--font);
    font-size: 20.8px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

.wk-sign-v2 .fn-action-container .fn-btn-back {
    float: none !important;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 9px 18px 9px 14px;
    font-family: var(--font);
    font-size: 13.8px !important; /* waiverprint_new.css: buttons 10pt !important at 640-960px */
    font-weight: 600;
    line-height: 1.6;
    color: var(--accent-strong);
    background: none;
    border: 1.5px solid var(--accent);
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
}

.wk-sign-v2 .fn-action-container .fn-btn-back:hover {
    background: var(--accent-soft);
    opacity: 1;
}

/* The arrow-shaped button's triangle, drawn as a chevron instead. */
.wk-sign-v2 .fn-btn-back > .fn-btn-triangle {
    position: static;
    display: inline-block;
    width: 7px;
    height: 7px;
    min-height: 0;
    margin: 0 2px 0 3px;
    padding: 0;
    overflow: visible;
    border: solid currentColor;
    border-width: 0 0 1.8px 1.8px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.wk-sign-v2 .fn-btn-back > .fn-btn-triangle:before {
    display: none;
}

.wk-sign-v2 .fn-title-arrow {
    display: none;
}

/* The card. */
.wk-sign-v2 .fn-adult-container {
    min-height: 0;
    margin: 0;
    background: transparent;
}

.wk-sign-v2 .fn-adult-container > .fn-wrapper {
    padding-top: 30px;
    padding-bottom: 0;
}

.wk-sign-v2 .fn-adult-container .fn-adult-content {
    padding: 34px clamp(20px, 5vw, 48px) 40px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

/* The page ID (PageRef:WK...) is for support, and its codes appear in the audit trail; it is not
   for the signer. It stays where the old page puts it (waiverprint_new.css .page_ref: fixed to the
   window's bottom right corner, rotated along the right edge under 1000px), so support finds it
   in the same spot on both versions, only fainter. */
.wk-sign-v2 .page_ref {
    opacity: .55;
}

/* Room under the last card before the page background: the same as above it (the 30px between
   the title bar and the card; 18px on phones). Step 2's form sets its own (user-form.css), the
   step 1 landing adds to it (search.css). */
.wk-sign-v2:not(#step2) {
    padding-bottom: 30px;
}

.wk-sign-v2 a:focus-visible,
.wk-sign-v2 button:focus-visible,
.wk-sign-v2 input:focus-visible,
.wk-sign-v2 select:focus-visible,
.wk-sign-v2 textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- page checkboxes */

.wk-sign-v2 label {
    width: auto;
    height: auto;
    min-height: 0;
    margin-bottom: 0;
}

.wk-sign-v2 #draw_or_type,
.wk-sign-v2 .fn-checkbox input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    width: 19px;
    height: 19px;
    margin: 0 !important; /* #draw_or_type has an inline margin */
    padding: 0;
    vertical-align: middle;
    background: var(--surface) no-repeat center / 12px 12px;
    border: 1.6px solid var(--border-strong);
    border-radius: 5px;
    cursor: pointer;
}

.wk-sign-v2 #draw_or_type:checked,
.wk-sign-v2 .fn-checkbox input[type=checkbox]:checked {
    background-color: var(--accent);
    background-image: var(--wk-sign-check-icon);
    border-color: var(--accent);
}

.wk-sign-v2 .wk-sign-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
}

/* ---------------------------------------------------------------- consents, buttons */

.wk-sign-v2 .fn-checkbox {
    margin: 0 0 18px;
}

.wk-sign-v2 .fn-checkbox table {
    border-collapse: collapse;
    border-spacing: 0;
}

.wk-sign-v2 .fn-checkbox td {
    padding: 0;
    vertical-align: top;
}

.wk-sign-v2 .fn-checkbox td:first-child {
    width: 19px;
    padding: 1px 11px 0 0;
}

/* Box and label as blocks, so both start at the top of their cells rather than on the cells' text
   baseline; the 1px above the 19px box then centers it on the label's first line (22.8px). */
.wk-sign-v2 .fn-checkbox td:first-child input[type=checkbox],
.wk-sign-v2 .fn-checkbox td label {
    display: block;
}

.wk-sign-v2 .fn-checkbox label {
    font-family: var(--font);
    font-size: 14.7px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--ink);
}

.wk-sign-v2 .wk-sign-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    text-align: right !important; /* .fn-align-center */
}

.wk-sign-v2 .wk-sign-actions .fn-btn {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0 !important; /* #cancelwaiver has an inline margin */
    padding: 11px 22px;
    font-family: var(--font);
    font-size: 14.7px !important; /* waiverprint_new.css: buttons 10pt !important at 640-960px */
    font-weight: 600;
    line-height: 1.6;
    color: var(--on-accent) !important; /* .fn-btn-default */
    background-color: var(--accent);
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.wk-sign-v2 .wk-sign-actions .fn-btn:not(:disabled):hover {
    background-color: var(--accent-strong);
    opacity: 1;
}

.wk-sign-v2 .wk-sign-actions .fn-btn:disabled {
    color: var(--disabled-ink) !important;
    background-color: var(--disabled-bg);
    cursor: not-allowed;
}

/* ---------------------------------------------------------------- select fields */

/* js/wk-sign-multiselect.js builds it around a multi-select, or an author's single select, of the
   document (single: .wk-sign-ms--single, the chosen option as text instead of chips). It carries
   wk-content-skip, so wk-editor.css leaves it alone. A single select is exactly as big as the
   select in the editor; a multi-select is as wide, but one field line high, growing as its chips
   wrap (see below). How it sits in the document's lines (its display, alignment, and the invisible
   native select inside that sizes it) is document layout, in document.css. Here only its look: the
   field is laid over that select, inside its side margins, with the editor's field border and
   radius (the --wk-field-* properties wk-editor.css publishes on .wk-content), in the document's
   font. */
.wk-sign-v2 .wk-sign-ms {
    position: relative;
    font: inherit;
    text-align: left;
}

.wk-sign-v2 .wk-sign-ms__field {
    position: absolute;
    top: 0;
    right: var(--wk-field-margin-x);
    bottom: 0;
    left: var(--wk-field-margin-x);
    display: flex;
    align-items: center;
    gap: 4px;
    /* The text starts where the editor's select shows it: its padding plus the 4px Chromium
       insets a select's text by, less the value's own 1px. */
    padding: 0 20px 0 calc(var(--wk-field-padding-x) + 3px);
    overflow: hidden;
    box-sizing: border-box;
    background: var(--surface-2);
    border: var(--wk-field-border-width) solid var(--border-strong);
    border-radius: var(--wk-radius-sm);
    cursor: pointer;
}

/* A multi-select: the editor shows a list box several rows high, but here it is one field line
   high and grows as its chips wrap (user decision 2026-10-12). So the field is in the flow, sharing
   the widget's one grid cell with the native select (document.css), which stretches it to its own
   size (one line, size="1") and sets its width: contain: inline-size keeps the chips from widening
   the cell. Padded as the editor's fields are, for the rows of chips. */
.wk-sign-v2 .wk-sign-ms:not(.wk-sign-ms--single) .wk-sign-ms__field {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0 var(--wk-field-margin-x);
    padding: var(--wk-field-padding-y) 20px var(--wk-field-padding-y) 4px;
    contain: inline-size;
}

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

.wk-sign-v2 .wk-sign-ms.is-open .wk-sign-ms__field {
    border-color: var(--accent);
    background: var(--surface);
}

.wk-sign-v2 .wk-sign-ms.is-invalid .wk-sign-ms__field {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(214, 69, 69, .14);
}

.wk-sign-v2 .wk-sign-ms__field[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .6;
}

.wk-sign-v2 .wk-sign-ms__chips {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    min-width: 0;
}

/* A single select's chosen option and its clear share that row, and must stay on one line: the
   field is one line high and clips, so a value too long to sit beside the clear wrapped the clear
   onto a second line, the row centred itself in the field and showed the text cut off at the top
   and the clear cut off below it. One line: the value gives way, shortened with an ellipsis. */
.wk-sign-v2 .wk-sign-ms--single .wk-sign-ms__chips {
    flex-wrap: nowrap;
}

.wk-sign-v2 .wk-sign-ms__value {
    min-width: 0;
    padding: 0 1px;
    overflow: hidden;
    font-size: inherit;
    line-height: normal;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-sign-v2 .wk-sign-ms__placeholder {
    padding: 0 1px;
    font-size: inherit;
    line-height: normal;
    color: var(--ink-faint);
}

.wk-sign-v2 .wk-sign-ms__chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 0 2px 0 7px;
    font-size: .8em;
    line-height: 1.35;
    color: var(--ink);
    background: var(--neutral-fill);
    border: 1px solid transparent;
    border-radius: 999px;
}

.wk-sign-v2 .wk-sign-ms__chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-sign-v2 .wk-sign-ms__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 16px;
    height: 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: var(--font);
    font-size: 15px !important; /* waiverprint_new.css: buttons 10pt !important at 640-960px */
    line-height: 1;
    color: var(--ink-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

/* The × of the chips, the single select's clear and the text fields' clear: an icon, not the "×"
   character, whose glyph sits above the middle of its line and so never centers. Drawn in the
   button's text color. */
.wk-sign-v2 :is(.wk-sign-ms__remove, .wk-sign-clear__button)::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wk-sign-v2 :is(.wk-sign-ms__clear, .wk-sign-clear__button)::before {
    width: 9px;
    height: 9px;
}

/* The single select's clear: at the end of the field, before the arrow, with room between them
   (its icon 11px from the chevron, its hover circle 7px). */
.wk-sign-v2 .wk-sign-ms__clear {
    width: 18px;
    height: 18px;
    margin-left: auto;
    margin-right: 4px;
    font-size: 17px !important;
}

.wk-sign-v2 .wk-sign-ms__remove:hover {
    color: var(--ink);
    background: var(--neutral-fill-hover);
}

.wk-sign-v2 .wk-sign-ms__arrow {
    /* The editor's select arrow, Chromium's own chevron: 9.25 x 6px whatever the font, 2.9px past
       the field's padding from its right edge, its middle a little below the field's. Chromium
       rounds a mask image up to whole pixels, so the box is 10 x 7px with the chevron drawn at its
       exact place inside. Matched to the editor's rendering. */
    position: absolute;
    top: 50%;
    right: calc(var(--wk-field-padding-x) + 2.516px);
    width: 10px;
    height: 7px;
    margin-top: -3.28px;
    background-color: var(--ink-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7' fill='none' stroke='black' stroke-width='1.875'%3E%3Cpath d='M1.038 1.163l3.962 3.962 3.962-3.962'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7' fill='none' stroke='black' stroke-width='1.875'%3E%3Cpath d='M1.038 1.163l3.962 3.962 3.962-3.962'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    transition: transform .15s ease;
}

.wk-sign-v2 .wk-sign-ms.is-open .wk-sign-ms__arrow {
    transform: rotate(180deg);
}

/* At least as wide as the widget, and as wide as its longest option: a row needs more room than the
   select gives the same text (its check mark gutter, paddings, the picked row's bold), so a list as
   wide as the widget wrapped an option that fits the closed select, and broke a word mid-word
   (.wk-content's overflow-wrap: break-word). No cap of its own: kept inside the document's column,
   moved left near its right edge (js/wk-sign-multiselect.js, place(), inline left and max-width),
   so an option wraps only when it is longer than the column. The window is the fallback cap. */
.wk-sign-v2 .wk-sign-ms__list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: calc(100vw - 32px);
    z-index: 30;
    max-height: 264px;
    padding: 6px;
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 28px -10px rgba(32, 48, 44, .28), 0 2px 6px rgba(32, 48, 44, .08);
}

.wk-sign-v2 .wk-sign-ms__list[hidden] {
    display: none;
}

.wk-sign-v2 .wk-sign-ms.is-up .wk-sign-ms__list {
    top: auto;
    bottom: calc(100% + 6px);
}

/* Every row keeps the picked row's room for the check mark, so picking a long option does not
   widen the list under the pointer. Wraps between words; a single word only when it alone is
   wider than the list. The document's font size, as the field it opens from shows the options. */
.wk-sign-v2 .wk-sign-ms__option {
    padding: 9px 36px 9px 12px;
    font-size: inherit;
    line-height: 1.4;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    color: var(--ink);
    border-radius: 6px;
    cursor: pointer;
}

/* Neutral greys, not the theme color: a light tint of some theme colors (yellow, pink) looks
   muddy next to the grey fields. */
.wk-sign-v2 .wk-sign-ms__option:hover,
.wk-sign-v2 .wk-sign-ms__option.is-active {
    background: var(--surface-2);
}

/* A picked row: a very light fill and a check mark on the right, so the pick reads without a
   heavy block of grey. */
.wk-sign-v2 .wk-sign-ms__option[aria-selected="true"] {
    position: relative;
    font-weight: 600;
    background: var(--neutral-pick);
}

.wk-sign-v2 .wk-sign-ms__option[aria-selected="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background-color: var(--ink-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wk-sign-v2 .wk-sign-ms__option[aria-selected="true"]:hover,
.wk-sign-v2 .wk-sign-ms__option[aria-selected="true"].is-active {
    background: var(--neutral-fill);
}

.wk-sign-v2 .wk-sign-ms__option[aria-disabled="true"] {
    color: var(--ink-faint);
    cursor: not-allowed;
}

/* ---------------------------------------------------------------- text field clear × */

/* js/wk-sign-field-clear.js puts span.wk-sign-clear right after a text field of the document: a
   zero-width box at the field's right edge, which places the × inside the field. It is exactly
   as high as the field's first line box, give or take the rounding of its line to whole pixels:
   the field's own line height (1lh), padding and border (transparent), aligned as the field is (an input: middle, so the
   box is the input's height and level with it; a textarea: top, so the box is its first line). */
.wk-sign-v2 .wk-sign-clear {
    position: relative;
    display: inline-block;
    box-sizing: content-box; /* the page's global border-box would take the padding and border out of the 1lh: a box 10px lower than the field, so its fade band left the bottom of the text showing */
    width: 0;
    height: 1lh;
    padding: var(--wk-field-padding-y) 0;
    border-style: solid;
    border-color: transparent;
    border-width: var(--wk-field-border-width) 0;
    line-height: normal;
    vertical-align: middle;
}

.wk-sign-v2 .wk-sign-clear--area {
    vertical-align: top;
}

/* The end of the text fades out under the × (user decision 2026-10-12): the field keeps the
   editor's size, so a long value runs under it. A band in the field's background color, from
   inside its right border to 16px past the ×, fading in over the first 10px: the 6px between the
   fade and the × (its hover circle) keep the text clear of it (user, 2026-10-16). Not on a field
   with its own background (an author's inline one), which the band could not match. */
/* Top and bottom: 1px inside the border, not just the text line. Glyph ink reaches past the line
   box (descenders, underscores, ClearType fringes), and at fractional zoom (125%, 150%) the line
   box and the band round apart: a band as high as the line left the bottom of the hidden text
   showing as dots below and beside the ×. The 1px clears the border whatever the rounding; the
   right corners follow the field's inner radius, so the band never paints over its curve. */
.wk-sign-v2 .wk-sign-clear::before {
    content: "";
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: calc(var(--wk-field-margin-x) + var(--wk-field-border-width));
    width: calc(var(--wk-field-padding-x) + 32.5px);
    border-radius: 0 calc(var(--wk-radius-sm) - var(--wk-field-border-width)) calc(var(--wk-radius-sm) - var(--wk-field-border-width)) 0;
    background: linear-gradient(to right, transparent, var(--surface-2) 10px);
    pointer-events: none;
}

/* A textarea's box is its first line only: past that line's bottom the band would fade the top of
   the second line, so it ends with the line. */
.wk-sign-v2 .wk-sign-clear--area::before {
    bottom: var(--wk-field-padding-y);
}

.wk-sign-v2 .wk-sign-has-clear:focus + .wk-sign-clear::before {
    background: linear-gradient(to right, transparent, var(--surface) 10px);
}

.wk-sign-v2 .wk-sign-has-clear[style*="background"] + .wk-sign-clear::before {
    content: none;
}

/* Centered where the selects' chevron is (its middle var(--wk-field-padding-x) + 7.5px inside the
   field's right border), so the ×s and chevrons of a form line up, with room to the border. */
.wk-sign-v2 .wk-sign-clear__button {
    position: absolute;
    top: 50%;
    right: calc(var(--wk-field-margin-x) + var(--wk-field-border-width) + var(--wk-field-padding-x) - 1.484px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 0;
    margin: -9px 0 0;
    padding: 0;
    font-family: var(--font);
    font-size: 17px !important; /* waiverprint_new.css: buttons 10pt !important at 640-960px */
    line-height: 1;
    color: var(--ink-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

/* A textarea's: at its top right, 3px down from its border. */
.wk-sign-v2 .wk-sign-clear--area .wk-sign-clear__button {
    top: 3px;
    margin-top: 0;
}

.wk-sign-v2 .wk-sign-clear__button:hover {
    color: var(--ink);
    background: var(--neutral-fill-hover);
}

/* Only on a filled field that can be edited and is shown (:placeholder-shown is an empty one:
   every field has a placeholder, " " when the author gave none). */
.wk-sign-v2 .wk-sign-has-clear:placeholder-shown + .wk-sign-clear,
.wk-sign-v2 .wk-sign-has-clear:disabled + .wk-sign-clear,
.wk-sign-v2 .wk-sign-has-clear[readonly] + .wk-sign-clear,
.wk-sign-v2 .wk-sign-has-clear[style*="display: none"] + .wk-sign-clear,
.wk-sign-v2 .wk-sign-has-clear[style*="display:none"] + .wk-sign-clear {
    display: none;
}

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

@media (max-width: 600px) {
    .wk-sign-v2 .fn-wrapper {
        padding-left: 14px;
        padding-right: 14px;
    }

    .wk-sign-v2 .fn-action-container .fn-wrapper {
        gap: 14px;
        padding-top: 16px;
        padding-bottom: 14px;
    }

    .wk-sign-v2 .fn-action-container .fn-action-title h2 {
        font-size: 18px;
    }

    .wk-sign-v2 .fn-adult-container > .fn-wrapper {
        padding-top: 18px;
    }

    .wk-sign-v2 .fn-adult-container .fn-adult-content {
        padding: 24px 18px 28px;
    }

    .wk-sign-v2 .wk-sign-actions .fn-btn {
        flex: 1 1 auto;
    }

    .wk-sign-v2:not(#step2) {
        padding-bottom: 18px;
    }
}

/* 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 .wk-sign-v2 .fn-action-container .fn-action-title h2 {
        font-size: 26px;
    }

    body.wk-zoom-tablet .wk-sign-v2 .fn-action-container .fn-btn-back,
    body.wk-zoom-tablet .wk-sign-v2 .wk-sign-actions .fn-btn {
        font-size: 19px !important;
        padding: 14px 28px;
    }

    body.wk-zoom-tablet .wk-sign-v2 .fn-checkbox label,
    body.wk-zoom-tablet .wk-sign-v2 .wk-sign-toggle {
        font-size: 19px !important;
    }

    body.wk-zoom-tablet .wk-sign-v2 #draw_or_type,
    body.wk-zoom-tablet .wk-sign-v2 .fn-checkbox input[type=checkbox] {
        width: 25px;
        height: 25px;
        background-size: 16px 16px;
        transform: none;
    }

    body.wk-zoom-tablet .wk-sign-v2 .fn-checkbox td:first-child {
        width: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wk-sign-v2 * {
        transition: none !important;
    }
}

/* ================================================================ steps 1-3
   What follows carries the signing step's look (the title bar's Back pill, #legalsign, the
   .wk-sign-actions buttons, the page checkboxes) over to the steps before it: the search
   (print_new/step1*.php, smartSearch.php), the user forms (step2*.php, _parts/user_form*.php,
   _parts/_bday.php) and the custom options (step3.php). Layout that only one step has (grids,
   gaps, the members blocks) belongs in pages/<step>.css. */

/* ---------------------------------------------------------------- form fields */

/* The forms' text fields and selects, drawn like the signing step's #legalsign. waiverprint_new.css
   gives .fn-input a 3px border, a 51px height and padding with !important. */
.wk-sign-v2 .fn-input {
    height: auto;
    padding: 13px 14px !important; /* waiverprint_new.css: .fn-input padding !important */
    box-sizing: border-box;
    font-family: var(--font);
    font-size: 16px !important; /* waiverprint_new.css: inputs 10pt !important at 640-960px */
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
    background-color: var(--surface-2);
    border: 1.5px solid var(--border-strong);
    border-radius: 10px;
    transition: border-color .15s ease, background-color .15s ease;
}

.wk-sign-v2 .fn-input::placeholder {
    color: var(--ink-faint);
    opacity: 1;
}

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

.wk-sign-v2 .fn-input:is(:disabled, [readonly], .disabled) {
    color: var(--ink-muted);
    background-color: var(--neutral-pick);
    border-color: var(--border);
}

.wk-sign-v2 .fn-input:disabled {
    cursor: not-allowed;
}

/* Closed selects (the _bday.php day/month/year ones too): no native arrow, the chevron of the
   document's selects (document.css) instead of waiverprint_new.css's fn-select-arrow.png. */
.wk-sign-v2 select:is(.fn-input, .fn-select):not([multiple]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 38px !important; /* waiverprint_new.css: .fn-input padding !important */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235B6D67' stroke-width='1.6'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* print.waiver.new.js marks a field it rejects with .fn-has-error-input (.error from jQuery
   Validate); the border width stays the field's own. */
.wk-sign-v2 .fn-input:is(.fn-has-error-input, .error) {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(214, 69, 69, .14);
}

/* select2 (the country / state pickers with internationalization on): the closed box like the
   fields. waiverprint_new.css styles it with !important throughout. Its dropdown is appended to
   body, outside .wk-sign-v2, so it keeps select2's own look. */
.wk-sign-v2 .select2-container .select2-selection--single {
    height: auto !important; /* waiverprint_new.css: .select2-selection--single, every property !important */
    min-height: 0 !important;
    padding: 13px 38px 13px 14px !important;
    box-sizing: border-box;
    color: var(--ink) !important;
    background-color: var(--surface-2) !important;
    border: 1.5px solid var(--border-strong) !important;
    border-radius: 10px !important;
    outline: none;
}

.wk-sign-v2 .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 !important; /* select2.min.css padding; waiverprint_new.css line-height !important */
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.4 !important;
    color: var(--ink);
}

.wk-sign-v2 .select2-container .select2-selection--single .select2-selection__placeholder {
    color: var(--ink-faint);
}

.wk-sign-v2 .select2-container .select2-selection--single .select2-selection__arrow {
    top: 0 !important; /* waiverprint_new.css: .select2-selection__arrow, all !important */
    right: 14px !important;
    width: 14px;
    height: 100% !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235B6D67' stroke-width='1.6'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / 14px !important;
}

.wk-sign-v2 .select2-container:is(.select2-container--focus, .select2-container--open) .select2-selection--single {
    background-color: var(--surface) !important; /* waiverprint_new.css: .select2-selection--single !important */
    border-color: var(--accent) !important;
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------- form labels, errors */

/* A field's caption ("Date of Birth", "Gender"), and _parts/user_form.php's (and user_form_minor.php's)
   <lable> typo element. */
.wk-sign-v2 .fn-form-group :is(label, lable) {
    display: block;
    margin: 0 0 6px;
    font-family: var(--font);
    font-size: 14.7px;
    font-weight: 600;
    color: var(--ink);
    text-transform: none;
}

/* Under a field: print.waiver.new.js and the views show and hide them with inline display, and
   find them next to their field, so only their type is set here. */
.wk-sign-v2 :is(.reqfield, .reqfield_18, .fn-error-msg) {
    margin-top: 6px;
    padding: 0;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--danger);
}

/* ---------------------------------------------------------------- bare checkboxes */

/* A checkbox inside its label, not in .fn-checkbox's table (step 3's approve box, billing's "same
   as above", "pays for this adult"), and the search results' row boxes: the page checkbox look.
   Not the document's own (.wk-content, document.css) nor step 4's toggle. */
.wk-sign-v2 label:not(.wk-sign-toggle, .wk-content label, .fn-checkbox label):has(> input[type=checkbox]) {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font);
    font-size: 14.7px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.wk-sign-v2 label:not(.wk-sign-toggle, .wk-content label, .fn-checkbox label) > input[type=checkbox],
.wk-sign-v2 .fn-table input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    width: 19px;
    height: 19px;
    margin: 2px 0 0;
    padding: 0;
    vertical-align: middle;
    background: var(--surface) no-repeat center / 12px 12px;
    border: 1.6px solid var(--border-strong);
    border-radius: 5px;
    cursor: pointer;
}

.wk-sign-v2 label:not(.wk-sign-toggle, .wk-content label, .fn-checkbox label) > input[type=checkbox]:checked,
.wk-sign-v2 .fn-table input[type=checkbox]:checked {
    background-color: var(--accent);
    background-image: var(--wk-sign-check-icon);
    border-color: var(--accent);
}

/* waiverprint_new.css: input.error[type=checkbox] gets a red outline. */
.wk-sign-v2 label:not(.wk-sign-toggle, .wk-content label, .fn-checkbox label) > input[type=checkbox].error {
    outline: none;
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(214, 69, 69, .14);
}

/* ---------------------------------------------------------------- buttons */

/* Filled buttons outside the title bar (step 1's choices, #selectbutton, the footer Next, step 3's
   Next): step 4's .wk-sign-actions buttons. Margins and widths stay with the page.
   These rules (and their tablet zoom one) also match step 4's #acceptwaiver / #cancelwaiver, tie
   with the .wk-sign-actions .fn-btn rules above and win by order: keep their shared values
   identical to those. Not scoped with .wk-sign-v2:not(#step4): the id would raise them over the
   title bar's .fn-action-container .fn-btn rules below. */
.wk-sign-v2 .fn-btn:is(.fn-btn-default, .fn-btn--bottom) {
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 11px 22px;
    font-family: var(--font);
    font-size: 14.7px !important; /* waiverprint_new.css: buttons 10pt !important at 640-960px */
    font-weight: 600;
    line-height: 1.6;
    color: var(--on-accent) !important; /* .fn-btn-default */
    background-color: var(--accent);
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.wk-sign-v2 .fn-btn:is(.fn-btn-default, .fn-btn--bottom):not(:disabled):hover {
    background-color: var(--accent-strong);
    opacity: 1;
}

.wk-sign-v2 .fn-btn:is(.fn-btn-default, .fn-btn--bottom):disabled {
    color: var(--disabled-ink) !important; /* .fn-btn-default:disabled */
    background-color: var(--disabled-bg);
    cursor: not-allowed;
}

/* The outlined one (step 3's bottom Cancel). Step 4's Cancel is .fn-btn--cancel.fn-btn-default,
   a filled one. */
.wk-sign-v2 .fn-btn:is(.fn-btn-cancel, .fn-btn--cancel:not(.fn-btn-default)) {
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 10.5px 21.5px;
    font-family: var(--font);
    font-size: 14.7px !important; /* waiverprint_new.css: buttons 10pt !important at 640-960px */
    font-weight: 600;
    line-height: 1.6;
    color: var(--accent-strong);
    background-color: transparent;
    border: 1.5px solid var(--accent);
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.wk-sign-v2 .fn-btn:is(.fn-btn-cancel, .fn-btn--cancel:not(.fn-btn-default)):not(:disabled):hover {
    background-color: var(--accent-soft);
    opacity: 1;
}

/* ---------------------------------------------------------------- title bar buttons */

/* Steps 1-3 put Cancel / Back (.fn-btn-cancel), the minor form's arrows and the Next / add
   buttons in the title bar: the size of step 4's Back pill, outlined or filled. */
.wk-sign-v2 .fn-action-container .fn-btn:is(.fn-btn-cancel, .fn-btn-arrow, .fn-btn-default, .fn-btn--bottom, .fn-btn--next) {
    flex: none;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0 !important; /* #edit_children has an inline margin */
    padding: 9px 18px;
    font-family: var(--font);
    font-size: 13.8px !important; /* waiverprint_new.css: buttons 10pt !important at 640-960px */
    font-weight: 600;
    line-height: 1.6;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
}

/* Outlined: Cancel and Back, and both arrows of the minor form (a pair, so they match). */
.wk-sign-v2 .fn-action-container .fn-btn:is(.fn-btn-cancel, .fn-btn-arrow-prev, .fn-btn-arrow-next) {
    color: var(--accent-strong);
    background-color: transparent;
    border: 1.5px solid var(--accent);
}

.wk-sign-v2 .fn-action-container .fn-btn:is(.fn-btn-cancel, .fn-btn-arrow-prev, .fn-btn-arrow-next):not(:disabled):hover {
    background-color: var(--accent-soft);
    opacity: 1;
}

.wk-sign-v2 .fn-action-container .fn-btn:is(.fn-btn-default, .fn-btn--bottom, .fn-btn--next) {
    color: var(--on-accent) !important; /* .fn-btn-default */
    background-color: var(--accent);
    border: 1.5px solid var(--accent);
}

.wk-sign-v2 .fn-action-container .fn-btn:is(.fn-btn-default, .fn-btn--bottom, .fn-btn--next):not(:disabled):hover {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
    opacity: 1;
}

.wk-sign-v2 .fn-action-container .fn-btn:is(.fn-btn-cancel, .fn-btn-arrow, .fn-btn-default, .fn-btn--bottom, .fn-btn--next):disabled {
    color: var(--disabled-ink) !important; /* .fn-btn-default:disabled */
    background-color: var(--disabled-bg);
    border-color: var(--disabled-bg);
    cursor: not-allowed;
}

/* The < and > of the minor form: square-ish, the arrow drawn as a chevron. waiverprint_new.css
   hides them (.fn-btn-arrow display: none) until print.waiver.new.js shows them. */
.wk-sign-v2 .fn-action-container .fn-btn.fn-btn-arrow {
    padding-left: 14px;
    padding-right: 14px;
}

/* Steps 1-3: a one-line caption sits level with the pills (a 28px h2 beside 43px pills), a
   longer one keeps them centred on it. Step 4 keeps its own (top-aligned, one Back pill). */
.wk-sign-v2:not(#step4) .fn-action-container .fn-wrapper {
    align-items: center;
}

/* #searchstatus (the spinner) and the Next / add buttons of the step 2 forms. They all float
   right in waiverprint_new.css, so the page shows them in reverse source order (Next, the primary
   one, rightmost); row-reverse keeps that order. */
.wk-sign-v2 .fn-action-container .right {
    display: inline-flex;
    flex: none;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.wk-sign-v2 .fn-action-container .spinner {
    margin: 6px auto;
}

/* ---------------------------------------------------------------- add / remove links */

/* step2's "Add a Child", "Add Another Adult" (.fn-btn-link.fn-btn-circle, a .fn-btn-icon "+" and a
   theme colored :before circle positioned by many waiverprint_new.css rules) and the members'
   Remove links: a small round icon before the text, drawn here. position: static makes the legacy
   top / left (some !important) moot. Not step 4's Clear (.fn-btn-none-bg). */
.wk-sign-v2 .fn-btn-link.fn-btn-circle {
    position: relative;
    margin: 0;
    font-family: var(--font);
    font-size: 14.7px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--accent-strong);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 0;
    cursor: pointer;
}

.wk-sign-v2 .fn-btn-link.fn-btn-circle:hover {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wk-sign-v2 .fn-btn-link.fn-btn-circle:before {
    display: none;
}

.wk-sign-v2 .fn-btn-link.fn-btn-circle > .fn-btn-icon {
    position: static;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 7px 0 0;
    padding: 0;
    font-size: 0 !important; /* waiverprint_new.css: .fn-btn-link > .fn-btn-icon 15pt !important; hides the +/- character */
    line-height: 0;
    overflow: hidden; /* its baseline is then its bottom edge, which vertical-align places */
    vertical-align: -5px;
    color: var(--accent-strong);
    background-color: var(--accent-soft);
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 9px 1.8px, 1.8px 9px;
    border: 1px solid var(--chip-border);
    border-radius: 50%;
    box-sizing: border-box;
}

.wk-sign-v2 .fn-btn-link.fn-btn-circle > .fn-btn-icon.fn-icon-minus {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 9px 1.8px;
}

.wk-sign-v2 .fn-btn-link.fn-btn-circle:is(.removettr, .orangelink) {
    padding: 6px 2px;
    font-weight: 500;
    color: var(--ink-muted);
}

.wk-sign-v2 .fn-btn-link.fn-btn-circle:is(.removettr, .orangelink) > .fn-btn-icon {
    color: currentColor;
    background-color: var(--neutral-fill);
    border-color: transparent;
}

.wk-sign-v2 .fn-btn-link.fn-btn-circle:is(.removettr, .orangelink):hover {
    color: var(--danger);
}

.wk-sign-v2 .fn-btn-link.fn-btn-circle:is(.removettr, .orangelink):hover > .fn-btn-icon {
    background-color: rgba(214, 69, 69, .1);
}

/* ---------------------------------------------------------------- minor form card */

/* step2_minor.php's card: the .fn-adult-container one. */
.wk-sign-v2 .fn-minor-container {
    min-height: 0;
    margin: 0;
    background: transparent;
}

.wk-sign-v2 .fn-minor-container > .fn-wrapper {
    padding-top: 30px;
    padding-bottom: 0;
}

.wk-sign-v2 .fn-minor-container .fn-minor-content {
    padding: 34px clamp(20px, 5vw, 48px) 40px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------- tables */

/* The search's matches (#finded_clients, rows built by display_users()): step 4's signer grid,
   light borders on --surface-2. The rows are its only content (no header). */
.wk-sign-v2 .fn-table {
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.wk-sign-v2 .fn-table tr {
    background: transparent;
}

.wk-sign-v2 .fn-table td {
    padding: 12px 14px;
    vertical-align: middle;
    text-align: left;
    overflow-wrap: anywhere;
}

.wk-sign-v2 .fn-table tr + tr td {
    border-top: 1px solid var(--border);
}

.wk-sign-v2 .fn-table td:first-child {
    width: 19px;
    padding-right: 4px;
}

.wk-sign-v2 .fn-table td > input[type=checkbox] {
    display: block;
    margin: 0;
}

.wk-sign-v2 .fn-table tr:has(input[type=checkbox]:checked) {
    background: var(--accent-soft);
}

/* ---------------------------------------------------------------- steps 1-3, small screens */

@media (max-width: 600px) {
    /* The title bar's buttons go under the caption when they do not fit beside it. Step 4 keeps
       its own (one Back pill). */
    .wk-sign-v2:not(#step4) .fn-action-container .fn-wrapper {
        flex-wrap: wrap;
        align-items: flex-start; /* Cancel level with the first row of a wrapping button group */
        row-gap: 12px;
    }

    .wk-sign-v2:not(#step4) .fn-action-container .fn-action-title {
        flex-basis: 100%;
    }

    /* Beside Cancel, its buttons wrapping inside it. */
    .wk-sign-v2 .fn-action-container .right {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Narrow day / year selects keep their value readable. */
    .wk-sign-v2 select:is(.fn-input, .fn-select):not([multiple]) {
        padding-left: 12px !important; /* waiverprint_new.css: .fn-input padding !important */
        padding-right: 28px !important;
        background-position: right 10px center;
    }

    .wk-sign-v2 .fn-minor-container > .fn-wrapper {
        padding-top: 18px;
    }

    .wk-sign-v2 .fn-minor-container .fn-minor-content {
        padding: 24px 18px 28px;
    }
}

/* Tablet zoom (body.wk-zoom-tablet): ~1.3x, as the step 4 rules above. */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body.wk-zoom-tablet .wk-sign-v2 .fn-input,
    body.wk-zoom-tablet .wk-sign-v2 .select2-container .select2-selection--single .select2-selection__rendered {
        font-size: 19px !important;
    }

    body.wk-zoom-tablet .wk-sign-v2 .fn-input {
        padding: 16px 18px !important;
    }

    body.wk-zoom-tablet .wk-sign-v2 select:is(.fn-input, .fn-select):not([multiple]) {
        padding-left: 14px !important; /* waiverprint_new.css: .fn-input padding !important */
        padding-right: 34px !important;
        background-position: right 12px center;
        background-size: 16px;
    }

    body.wk-zoom-tablet .wk-sign-v2 .fn-form-group :is(label, lable),
    body.wk-zoom-tablet .wk-sign-v2 .fn-btn-link.fn-btn-circle {
        font-size: 19px;
    }

    /* On its own: a browser without :has() drops a whole selector list that holds it. */
    body.wk-zoom-tablet .wk-sign-v2 label:not(.wk-sign-toggle, .wk-content label, .fn-checkbox label):has(> input[type=checkbox]) {
        font-size: 19px;
    }

    body.wk-zoom-tablet .wk-sign-v2 :is(.reqfield, .reqfield_18, .fn-error-msg) {
        font-size: 16px;
    }

    body.wk-zoom-tablet .wk-sign-v2 .fn-table {
        font-size: 18px;
    }

    body.wk-zoom-tablet .wk-sign-v2 label:not(.wk-sign-toggle, .wk-content label, .fn-checkbox label) > input[type=checkbox],
    body.wk-zoom-tablet .wk-sign-v2 .fn-table input[type=checkbox] {
        width: 25px;
        height: 25px;
        background-size: 16px 16px;
    }

    body.wk-zoom-tablet .wk-sign-v2 .fn-btn-link.fn-btn-circle > .fn-btn-icon {
        width: 26px;
        height: 26px;
        vertical-align: -6px;
        background-size: 12px 2px, 2px 12px;
    }

    body.wk-zoom-tablet .wk-sign-v2 .fn-btn-link.fn-btn-circle > .fn-btn-icon.fn-icon-minus {
        background-size: 12px 2px;
    }

    body.wk-zoom-tablet .wk-sign-v2 .fn-btn:is(.fn-btn-default, .fn-btn--bottom) {
        font-size: 19px !important;
        padding: 14px 28px;
    }

    body.wk-zoom-tablet .wk-sign-v2 .fn-btn:is(.fn-btn-cancel, .fn-btn--cancel:not(.fn-btn-default)) {
        font-size: 19px !important;
        padding: 13.5px 27.5px;
    }

    /* Narrower than step 4's Back pill: up to three of them share the bar with the caption (the
       minor form's "Fill in Child Info" would wrap beside 28px-padded ones). */
    body.wk-zoom-tablet .wk-sign-v2 .fn-action-container .fn-btn:is(.fn-btn-cancel, .fn-btn-arrow, .fn-btn-default, .fn-btn--bottom, .fn-btn--next) {
        font-size: 19px !important;
        padding: 14px 22px;
    }
}