@layer components {
/* Composite: sign_contract — signature pad over contract text. Figma frame
   1850:15954 ("Sign contract"). The header/footer are separate components;
   this is the signing body. The pad is a gray-100 rounded box hosting a
   <canvas> sized by psw-sign-contract.js; the clear control overlays its
   top-right and is revealed once the pad has a stroke. */

.psw-sign-contract {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
}

/* --- signature section --- */
.psw-sign-contract__signature {
    display: flex;
    flex-direction: column;
    /* 24px between the "Add signature below" label and the pad (Figma). */
    gap: var(--space-6);
}

.psw-sign-contract__label {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    color: var(--color-gray-600);
}

.psw-sign-contract__pad {
    position: relative;
    height: 140px;
    width: 100%;
    /* Inset the drawing surface from the border (Figma). Mobile uses a smaller
       inset than desktop; box-sizing:border-box keeps the box at its height. */
    padding: var(--space-4) var(--space-6);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
}

/* Invalid state — psw-sign-contract.js adds this when a required pad is
   submitted empty, giving sighted users a red border that matches the inline
   error message color. Removed once a stroke is drawn. */
.psw-sign-contract__pad--invalid {
    border-color: var(--color-danger-400);
}

.psw-sign-contract__canvas {
    display: block;
    width: 100%;
    height: 100%;
    /* Capture pointer strokes without the page panning/zooming on touch. */
    touch-action: none;
    cursor: crosshair;
}

/* Clear control — a secondary circular trash icon_button (chrome comes from
   psw-btn) pinned to the pad's top-right (Figma: 16px inset), hidden until
   psw-sign-contract.js detects a stroke. */
.psw-sign-contract__clear {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
}
/* Force-hide over .psw-btn's display:inline-flex (a bare [hidden] would lose). */
.psw-sign-contract__clear[hidden] {
    display: none;
}

.psw-sign-contract__message {
    margin: 0;
    font-size: var(--text-label-sm);
    line-height: var(--text-label-sm--line-height);
    color: var(--color-danger-400);
}
.psw-sign-contract__message[hidden] {
    display: none;
}

/* --- divider --- */
.psw-sign-contract__divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-gray-200);
}

/* --- contract text --- */
.psw-sign-contract__contract {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);          /* 16px between contract title and body (Figma) */
}

.psw-sign-contract__contract-name {
    margin: 0;
    font-family: var(--font-sans);
    /* Mobile: Label/Medium 16/20 (Figma 1850:15954); desktop steps up below. */
    font-size: var(--text-label-md);
    line-height: var(--text-label-md--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-700);
}

.psw-sign-contract__contract-body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-600);
}

/* Desktop (Figma 2165:238778): the pad grows taller, the contract heading steps
   up to Heading/X-Small, and the section gap widens to 32px. Width stays
   container-driven (the partial is width:100%, filling the 638px signing
   column from its parent) — only the size/spacing ramps change here. 769px
   matches the breakpoint used by the sibling composites. */
@media (min-width: 769px) {
    .psw-sign-contract {
        gap: var(--space-8);
    }
    /* Desktop widens the label -> pad gap to 32px (Figma 933:45698 -> 933:45699). */
    .psw-sign-contract__signature {
        gap: var(--space-8);
    }
    .psw-sign-contract__pad {
        height: 250px;
        /* Figma 2165:238882: 24px vertical / 42px horizontal inset. */
        padding: var(--space-6) 42px;
    }
    .psw-sign-contract__contract-name {
        font-size: var(--text-heading-xs);
        line-height: var(--text-heading-xs--line-height);
    }
}
}