/* ---- Signing (ARCHITECTURE.md §7.3) -------------------------------------------------------------
   SignaturePad's own appearance, in the library that ships SignaturePad.

   ⚠ THIS BLOCK LIVED IN TWO HOSTS AND HAD ALREADY DRIFTED (#64). The component's own remarks state
   the rule it was breaking: "ONE COMPONENT, TWO HOSTS ... A Razor class library compiles once and
   both reference it; the JavaScript travels with it as a static web asset." The C# travelled. The
   JavaScript travelled. The CSS was copied, and by the time anybody looked, TenantAdmin's copy had
   been moved onto design tokens and the Portal's still held #b9c1c9, #d6dbe0 and #b32121 - so an
   applicant and the staff member countersigning were looking at two different signature pads.

   The tokenized copy is the one kept. The one exception is noted on .signature-consent.

   ⚠ EVERY HOST THAT RENDERS SignaturePad MUST LINK THIS FILE. A shared sheet nobody linked styles
   nothing, and on screen that looks exactly like a missing rule while being fixed in a different
   file. StylesheetCoverageTests reads the <link> elements out of each App.razor rather than assuming
   them, so a host that forgets fails there. */

.signature-pad {
    max-width: 34rem;
    margin: 1rem 0;
}

.signature-method {
    border: none;
    padding: 0;
    margin: 0 0 0.5rem;
    display: flex;
    gap: 1.25rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.signature-method legend {
    padding: 0;
    font-weight: 600;
}

.signature-canvas-frame {
    position: relative;
    border: 1px solid var(--cv-border-strong);
    border-radius: 4px;
    background: #fff;
    height: 9rem;
}

/* touch-action: none, or a finger scrolls the page instead of drawing on a phone - which is the
   device most applicants will be holding. SignaturePad.razor depends on this rule to work at all,
   which is the sharpest argument for the file travelling with the component rather than being
   restated per host. */
.signature-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}

/* The line people expect to sign on. Purely a cue: nothing measures against it. */
.signature-baseline {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 2rem;
    border-bottom: 1px solid var(--cv-border);
    pointer-events: none;
}

.signature-typed {
    width: 100%;
}

/* Shown in a script face so a typed signature reads as one. The stored evidence is the text and
   the SignatureEvent around it - this styling is not the signature and nothing depends on it. */
.signature-preview {
    font-family: 'Segoe Script', 'Brush Script MT', cursive;
    font-size: 1.9rem;
    border-bottom: 1px solid var(--cv-border);
    padding: 0.25rem 0.5rem;
    margin: 0.5rem 0;
}

.signature-name,
.signature-typed-label {
    display: block;
    margin: 0.75rem 0;
}

/* ⚠ THE ONE PLACE THE TWO COPIES DISAGREED FOR A REASON, so neither simply won. The Portal sized
   this from --portal-text-small, which kiosk mode redefines - §6.5 makes a lobby tablet a constraint
   on that host, and taking the token away would shrink the consent sentence for somebody standing
   without their reading glasses. TenantAdmin has no such token and used 0.95rem.

   The fallback keeps both exactly as they are: the Portal resolves the token, TenantAdmin falls
   through to the size it already had. Do not replace this with a single number without deciding what
   happens to kiosk mode. */
.signature-consent {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0.5rem 0;
    font-size: var(--portal-text-small, 0.95rem);
    line-height: 1.4;
}

.signature-problem {
    color: var(--cv-danger-text);
    font-weight: 600;
}