/* ============================================================================
   SIGNATURES — the signing ladder, the in-form signature section, and the
   small utilities the signing pages need.  Added 3 Sep 2026.
   ----------------------------------------------------------------------------
   WHY A SEPARATE SHEET.  db/079 made the signing hierarchy configuration-
   driven: a form can require one signature or five, in an order MDE sets in
   CONFIG.WandSFormSignatureRule.  The markup that renders that (the ladder
   partial, the inbox panel and the in-form signature section) needed eleven
   classes that existed nowhere in the stylesheet inventory, so the pages were
   rendering unstyled.  Keeping them here rather than appending to tokens.css
   keeps the component layer readable and makes it obvious what may be deleted
   if the signing model is ever replaced.

   ★ NO FONT-FAMILY ON ANYTHING THAT IS UI.  tokens.css is the one place the UI
   typeface is decided and this sheet does not touch it.  The ONE font-family
   below is --font-signature, and it is applied to exactly one thing: the
   signature VALUE a person types as their signature.  That is content, not
   chrome.  It must never be put on a label, a hint, a heading or any prose.

   ★ FOCUS IS EXPRESSED THROUGH var(--focus-ring) / var(--focus-line) ONLY, per
   the rule in brand.css.  A hardcoded outline here would lose the specificity
   tie against mdwds.min.css's `input:not([disabled]):focus` and the site would
   have two different focus treatments depending on which page you were on.

   ★ STATE IS NEVER COLOUR ALONE (WCAG 1.4.1).  Every state below carries an
   icon and a word as well as a colour, because "which of these five people
   still has to sign" is the single most important thing on the page and a
   red/green distinction is unreadable to a large minority of applicants.
   ============================================================================ */

:root {
  /* THE SIGNATURE TYPEFACE (specified 3 Sep 2026).
     A typed signature has to LOOK like a signature — that is the whole point of
     the instruction — so the value is rendered in a script face while the label
     beside it stays in the UI stack.

     LOCAL FONTS ONLY, deliberately.  tokens.css records that MDE runs behind a
     locked-down firewall with a strict CSP and that the earlier prototypes
     broke because they pulled Google Fonts; a webfont here would silently fall
     back to the browser default on exactly the machines that matter.  Segoe
     Script and Segoe Print ship with Windows, so MDE desktops and the public's
     Windows machines get a real script face; everything else walks the stack
     down to the generic `cursive`, which every platform maps to something.

     NOT used for the STORED value.  ElectronicSignature is varchar(110) of
     plain text in the database; this is presentation of that text and nothing
     about the evidence depends on it rendering. */
  --font-signature: "Segoe Script", "Segoe Print", "Bradley Hand", "Brush Script MT",
                    "Lucida Handwriting", "Apple Chancery", cursive;
}

/* ============================ UTILITIES ============================
   Deliberately tiny and named like the existing .u-mono / .u-muted pair in
   tokens.css so they read as part of the same set. */

/* Declined / refused text. --c-error-darker, not --c-error, because this lands
   on white and on --c-error-light and has to clear 4.5:1 on both. */
.u-danger { color: var(--c-error-darker); font-weight: var(--fw-semibold); }

/* A reading-width page.  Used by the signing page: somebody is being asked to
   read a paragraph and then commit their name to it, and a 1600px measure is
   the wrong shape for that.  --maxw-page stays the default for everything that
   is a working screen rather than a document. */
.page--narrow { max-width: 62rem; }

/* Flat definition list for read-only summaries.  tokens.css already has .dl,
   but that one needs each pair wrapped in a <div> for its auto-fit grid; .kv is
   the ungrouped two-column form, for short "label: value" runs where the pairs
   should line up vertically rather than flow into columns. */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-05) var(--sp-2);
  margin: 0; font-size: var(--fs-2xs); align-items: baseline; }
.kv dt { color: var(--c-ink-muted); font-weight: var(--fw-bold); font-size: var(--fs-3xs);
  text-transform: uppercase; letter-spacing: .04em; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  /* Below ~480px a max-content label column starts wrapping mid-word, which is
     worse than stacking. */
  .kv { grid-template-columns: 1fr; gap: 0 0; }
  .kv dd { margin-bottom: var(--sp-1); }
}

/* "You are signing as / Asked by / Form filled in by" inside the signature
   inbox table cell.  A .kv modifier rather than a new list: the pairs, the
   alignment and the small-screen stacking are all already right — this only
   makes it sit quietly under the message text instead of competing with it.

   ★ DELIBERATELY DOES NOT SHRINK THE TEXT.  The line this replaced was set in
   --fs-4xs, which tokens.css marks "12px - status chips / code boxes, NOT
   prose" — and this is prose: a sentence explaining to a home owner why they
   are being asked to put their name to something.  .kv's own --fs-2xs stands.
   Only the spacing and the colour hierarchy are touched.

   Names stay at full ink while the labels recede, because the NAME and the ROLE
   are the answer to "who is asking me" and everything else is scaffolding. */
.sig-who { margin: var(--sp-1) 0 0; gap: var(--sp-05) var(--sp-1); }
.sig-who dd { color: var(--c-ink-muted); }
.sig-who dd strong { color: var(--c-ink); font-weight: var(--fw-semibold); }
.sig-who .chip { padding: 0 var(--sp-05); vertical-align: baseline; }

/* ============================ ATTENTION CARD ============================
   The dashboard panel that says "your signature is needed".  A plain .card
   loses that message among the other panels; this is the one card on the
   dashboard that is an INSTRUCTION rather than information, so it gets the
   heavy left rule the .alert family uses.  Not an .alert, because it contains a
   table and .alert deliberately constrains its own children. */
.card--attention {
  border-left: 8px solid var(--c-warning-darker);
  background: var(--c-paper);
}
.card--attention > .card__head {
  background: var(--c-warning-light);
  border-bottom-color: var(--c-warning-darker);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card--attention > .card__head h2 { color: #3d2c00; }
.card--attention > .card__head h2 .fa-pen-nib { color: var(--c-warning-darker); margin-right: var(--sp-05); }

/* ============================ THE SIGNING LADDER ============================
   Who has signed, whose turn it is, who refused.  Rendered on the package hub,
   on each form and on the signing page, always from the same partial so the
   three can never drift.

   Layout is a two-column grid per step (icon | body) with a connector drawn
   between the icons, rather than a bordered list, because the sequence is the
   information: a person has to be able to see at a glance that step 3 is the
   blockage and steps 4 and 5 have not been asked yet. */
.sig-ladder { font-size: var(--fs-2xs); }

.sig-ladder__list { list-style: none; margin: 0; padding: 0; }

.sig-ladder__step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--sp-1);
  padding: var(--sp-1) 0 var(--sp-15);
  position: relative;
}
/* The connector.  Drawn from the icon downwards on every step except the last,
   so the run reads as one sequence.  aria-hidden by construction — it is a
   pseudo-element and carries no text. */
.sig-ladder__step::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: -2px;
  width: 2px;
  background: #dfe1e2;
}
.sig-ladder__step:last-child::before { display: none; }

.sig-ladder__icon {
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--c-paper-alt);
  color: var(--c-ink-subtle);
  font-size: var(--fs-2xs);
  /* Above the connector, so the line appears to start at the icon's edge. */
  position: relative; z-index: 1;
  border: 1px solid #dfe1e2;
}

.sig-ladder__body { min-width: 0; }

.sig-ladder__hd {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  align-items: center;
  font-size: var(--fs-2xs);
}

.sig-ladder__meta {
  margin-top: 2px;
  font-size: var(--fs-3xs);
  color: var(--c-ink);
  line-height: var(--lh-snug);
}

/* The decline reason.  Shown in full, indented, and visibly quoted — it is
   text one person wrote to another and reads wrongly as a system message.
   overflow-wrap because a signer may paste a long unbroken string. */
.sig-ladder__reason {
  margin-top: var(--sp-05);
  padding: var(--sp-1) var(--sp-15);
  border-left: 4px solid var(--c-error-dark);
  background: var(--c-error-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-3xs);
  overflow-wrap: anywhere;
}

/* ---- per-state treatment ------------------------------------------------ */
.sig-ladder__step--signed > .sig-ladder__icon {
  background: var(--c-success-light); color: var(--c-success-darker);
  border-color: var(--c-success-darker);
}
.sig-ladder__step--signed::before { background: var(--c-success-darker); }

.sig-ladder__step--declined > .sig-ladder__icon {
  background: var(--c-error-light); color: var(--c-error-darker);
  border-color: var(--c-error-dark);
}

/* The blockage.  The one step everybody is waiting on, so it is the only step
   with a filled background — a reader scanning a five-rung ladder should not
   have to compare five icons to find it. */
.sig-ladder__step--current {
  background: var(--c-primary-lighter);
  border-radius: var(--radius-md);
  padding-left: var(--sp-1); padding-right: var(--sp-1);
  margin-left: calc(var(--sp-1) * -1); margin-right: calc(var(--sp-1) * -1);
}
.sig-ladder__step--current::before { left: 21px; }
.sig-ladder__step--current > .sig-ladder__icon {
  background: var(--c-primary-darker); color: #fff; border-color: var(--c-primary-darker);
}
.sig-ladder__step--current .sig-ladder__hd { font-weight: var(--fw-semibold); }

/* Not asked yet.  Muted, but NOT hidden and not below the 13px prose floor —
   an applicant needs to know how many more people are in the queue after the
   current one before they can plan around it. */
.sig-ladder__step--waiting > .sig-ladder__body { color: var(--c-ink-muted); }

/* ============================ THE IN-FORM SIGNATURE SECTION ================
   Instruction of 3 Sep 2026: when a form needs more than one signature, the
   section shows ALL of them; every block is READ-ONLY except the one the
   signed-in user is actually eligible to sign; and the form is BLOCKED until
   the outstanding ones are in.

   ★ READ-ONLY HERE IS PRESENTATION OF A DECISION MADE ELSEWHERE.  Eligibility
   is resolved by WANDS.FormSignatureInboxGet against the signed-in user id and
   enforced again by WANDS.FormSignatureSign.  These classes make the answer
   visible; they are not the answer.  Styling a block as editable would not
   make it signable, and that is the correct way round. */
.sig-section { display: grid; gap: var(--sp-2); }

/* The refusal notice at the head of the section.  Its wording comes from
   CONFIG.WandSWorkflowMessage via the gate, so nothing about the sentence is
   set here — only its prominence. */
.sig-section__blocker { margin-bottom: 0; }

.sig-block {
  border: 1px solid #dfe1e2;
  border-left: 6px solid #a9aeb1;
  border-radius: var(--radius-md);
  background: var(--c-paper-sunken);
  padding: var(--sp-15) var(--sp-2);
}

.sig-block__hd {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  align-items: baseline;
  margin-bottom: var(--sp-1);
}
.sig-block__role { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.sig-block__ord {
  font-family: var(--font-mono); font-size: var(--fs-4xs);
  color: var(--c-ink-muted); font-weight: var(--fw-bold);
}
.sig-block__state { margin-left: auto; }

/* The ruled line a signature sits on.  Deliberately the shape of the paper
   form: MDE's signers have been signing this box on paper for decades and the
   familiar shape is what makes an electronic signature read as a signature
   rather than as another text field. */
.sig-block__line {
  border-bottom: 1px solid var(--c-ink);
  min-height: 2.6rem;
  display: flex; align-items: flex-end;
  padding: 0 var(--sp-05) var(--sp-05);
  background: var(--c-paper);
}

/* THE ONE PLACE --font-signature IS USED for a recorded value. */
.sig-block__value {
  font-family: var(--font-signature);
  font-size: var(--fs-lg);
  line-height: 1.2;
  color: var(--c-primary-darker);
  overflow-wrap: anywhere;
}
.sig-block__value:empty::before { content: "—"; color: var(--c-ink-subtle);
  font-family: var(--font-sans); font-size: var(--fs-2xs); }

.sig-block__caption {
  display: block;
  margin-top: var(--sp-05);
  font-size: var(--fs-3xs);
  color: var(--c-ink-muted);
}

.sig-block__meta { margin-top: var(--sp-1); font-size: var(--fs-3xs); }

/* Why this block is not yours to sign.  A locked block with no explanation
   reads as a broken form, so the reason is always stated. */
.sig-block__lock {
  display: flex; gap: var(--sp-1); align-items: flex-start;
  margin-top: var(--sp-1);
  font-size: var(--fs-3xs); color: var(--c-ink-muted);
}
.sig-block__lock .fa-lock { margin-top: 2px; }

/* ---- per-state treatment ------------------------------------------------ */
.sig-block--signed   { border-left-color: var(--c-success-darker); background: var(--c-success-light); }
.sig-block--declined { border-left-color: var(--c-error-dark);     background: var(--c-error-light); }
.sig-block--waiting  { border-left-color: #a9aeb1; }

/* MINE.  The only block with an input in it, and the only one raised out of the
   sunken background, because "which of these is my job" has to be answerable
   without reading a word. */
.sig-block--mine {
  border-left-color: var(--c-primary-darker);
  border-color: var(--c-primary);
  background: var(--c-paper);
  box-shadow: var(--shadow-1);
}
.sig-block--mine .sig-block__role { color: var(--c-primary-darker); }

/* NOT MINE and not yet signed.  Faded, but the ROLE stays full contrast: an
   applicant reading this needs to know who they are waiting for, even though
   there is nothing here for them to do. */
.sig-block--locked { opacity: .92; }
.sig-block--locked .sig-block__line { background: var(--c-paper-alt); border-bottom-style: dashed; }

/* The signature input.  Script face while typing, so what is being committed
   looks the way it will look on the record.  --fs-lg not --fs-md: script faces
   have a small x-height and 18px cursive is genuinely hard to proof-read, and a
   name typed wrongly here is a support call. */
.inp--sig {
  font-family: var(--font-signature);
  font-size: var(--fs-lg);
  line-height: 1.3;
  color: var(--c-primary-darker);
  padding: var(--sp-1);
}
/* Focus through the tokens, never a literal outline — see the header note. */
.inp--sig:focus,
.inp--sig:not([disabled]):focus {
  border-color: var(--focus-line);
  box-shadow: var(--focus-ring);
  outline: 0;
}
/* The placeholder is UI, not content, so it drops back to the UI stack at a
   readable size — a hint set in cursive at 22px reads as a filled-in value. */
.inp--sig::placeholder {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  color: var(--c-ink-subtle);
}

/* ============================ PRINT ============================
   A signed form gets printed and filed.  The ladder and the signature blocks
   are the part of the page that has to survive that, so backgrounds are dropped
   (they do not print reliably) and the state is carried by the border and the
   text that is already there. */
@media print {
  .sig-block, .sig-block--mine, .sig-block--signed, .sig-block--declined {
    background: #fff; box-shadow: none; border-left-width: 4px;
    break-inside: avoid;
  }
  .sig-ladder__step--current { background: #fff; }
  .sig-ladder__step { break-inside: avoid; }
  /* Nothing outstanding can be signed on paper through this portal, so the
     empty box and its input are noise on a printout. */
  .sig-block--mine form, .inp--sig { display: none; }
  .sig-block__line { border-bottom: 1px solid #000; }
}