/*
  The customer's signing page: the stylesheet of crm/signing/style.py, kept to this page (everything sits under .sign-dialog) so it cannot touch the apps. The Fluent 2 look of
  the CRM, fjord teal accent, Segoe UI Variable, a 4 px grid, no webfont. Light only, as the real page: the pad is the paper the signature is drawn on.
  The content policy allows style files, not style attributes, so everything is here.
*/
.sign-dialog {
  color-scheme: only light;
  --ground: #f6f7f7; --surface: #ffffff; --surface-2: #f0f2f3; --surface-3: #e6e9eb;
  --ink: #1c2126; --ink-2: #5c6670; --line: #e1e4e6; --line-strong: #8a949c;
  --accent: #0f6b6b; --accent-hover: #0b5858; --accent-press: #084545; --on-accent: #ffffff;
  --success: #107c41; --warning: #8a5300; --danger: #b3261e; --danger-bg: #fde8e7;
  --disabled-ink: #5d666e; --disabled-bg: #e9ecee;
  --font-text: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-script: "Segoe Script", "Lucida Handwriting", "Brush Script MT", "Apple Chancery", "Snell Roundhand", cursive;
  --fs-dense: 14px; --lh-dense: 20px; --fs-body: 16px; --lh-body: 24px;
  --fs-sub: 20px; --lh-sub: 28px; --fs-title: 28px; --lh-title: 36px;
  --fw-regular: 400; --fw-semibold: 600;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  --r-control: 4px; --r-card: 8px;
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.12), 0 0 2px rgb(0 0 0 / 0.08);
  --shadow-16: 0 8px 16px rgb(0 0 0 / 0.14), 0 0 2px rgb(0 0 0 / 0.12);

  /* Over the whole window: it is the customer's view, not a panel of the demo. */
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.sign-dialog[open] { display: flex; flex-direction: column; }
.sign-dialog *, .sign-dialog *::before, .sign-dialog *::after { box-sizing: border-box; }

/* The demo's own strip: the same ground and tape as the bar, so Close reads as the demo's and not the customer's. */
.sign-strip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding-right: 8px;
  font-size: 14px;
  line-height: 18px;
  color: var(--demo-on-bar);
  background: var(--demo-ink);
}

.sign-strip .demo-tape { flex: none; }
.sign-strip__words { flex: none; margin: 0; max-width: 40%; font-weight: 600; }
.sign-strip__address { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--demo-on-bar-quiet); text-overflow: ellipsis; white-space: nowrap; }
.sign-strip__close { flex: none; margin-left: auto; }
/* The ? stands beside Close, on the guided link. */
.sign-strip__help { flex: none; margin-left: auto; }
.sign-strip__help + .sign-strip__close { margin-left: 0; }
.sign-dialog .sign-strip :focus-visible { outline: 2px solid var(--demo-tape); outline-offset: 2px; }

.sign-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }

.sign-dialog button, .sign-dialog input { font: inherit; color: inherit; }
.sign-dialog .sign-strip button { color: var(--demo-on-bar); }
.sign-dialog h1, .sign-dialog h2 { margin: 0; text-wrap: balance; font-weight: var(--fw-semibold); }
.sign-dialog main p { margin: 0; text-wrap: pretty; }
.sign-dialog main a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sign-dialog main a:hover { color: var(--accent-hover); }
.sign-dialog main :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.sign-dialog [hidden] { display: none !important; }
.sign-dialog .sign-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sign-dialog time { font-variant-numeric: tabular-nums; }
.sign-dialog .quiet { color: var(--ink-2); }
.sign-dialog .i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons (v8 PrimaryButton, DefaultButton) */
.sign-dialog .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 32px; padding: 5px var(--s3); border-radius: var(--r-control);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font-size: var(--fs-dense); line-height: var(--lh-dense); font-weight: var(--fw-semibold); white-space: nowrap;
  text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.sign-dialog .btn .i { width: 16px; height: 16px; }
.sign-dialog .btn-primary { background: var(--accent); color: var(--on-accent); }
.sign-dialog .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.sign-dialog .btn-primary:active { background: var(--accent-press); }
.sign-dialog main a.btn-secondary, .sign-dialog .btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.sign-dialog main a.btn-secondary:hover, .sign-dialog .btn-secondary:hover { background: var(--surface-2); color: var(--ink); }
.sign-dialog .btn-secondary:active { background: var(--surface-3); }
.sign-dialog .btn[aria-disabled="true"], .sign-dialog .btn:disabled { background: var(--disabled-bg); border-color: transparent; color: var(--disabled-ink); cursor: not-allowed; }
.sign-dialog .spin { animation: sign-spin 900ms linear infinite; }
@keyframes sign-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sign-dialog .spin { animation: none; } .sign-dialog .btn { transition: none; } }

/* Fields (v8 TextField, Checkbox) */
.sign-dialog .field { display: grid; gap: var(--s1); }
.sign-dialog .field > label, .sign-dialog .field-label { font-size: var(--fs-dense); line-height: var(--lh-dense); font-weight: var(--fw-semibold); }
.sign-dialog .input {
  width: 100%; min-height: 44px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--surface); font-size: var(--fs-body); line-height: 22px;
}
.sign-dialog .input:focus { outline: none; border-color: var(--line-strong); border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.sign-dialog .input:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.sign-dialog .input:disabled { background: var(--disabled-bg); color: var(--disabled-ink); }
.sign-dialog .field.has-error .input { border-color: var(--warning); }
.sign-dialog main .field-error { display: flex; gap: var(--s1); align-items: flex-start; color: var(--warning); font-size: var(--fs-body); line-height: 22px; }
.sign-dialog .field-error .i { width: 16px; height: 16px; margin-top: 3px; }
.sign-dialog .field-hint { font-size: var(--fs-dense); line-height: var(--lh-dense); color: var(--ink-2); }
.sign-dialog .check { display: flex; align-items: flex-start; gap: var(--s3); min-height: 32px; cursor: pointer; font-size: var(--fs-body); line-height: var(--lh-body); }
.sign-dialog .check input {
  appearance: none; -webkit-appearance: none; display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); cursor: pointer;
}
.sign-dialog .check input::after { content: ""; width: 6px; height: 11px; border: solid var(--on-accent); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -1px; opacity: 0; }
.sign-dialog .check input:checked { background: var(--accent); border-color: var(--accent); }
.sign-dialog .check input:checked::after { opacity: 1; }
.sign-dialog .check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sign-dialog .check input:disabled { background: var(--disabled-bg); cursor: not-allowed; }
.sign-dialog .check input:disabled:checked { background: var(--disabled-ink); border-color: var(--disabled-ink); }
.sign-dialog .field.has-error .check input { border-color: var(--warning); }
.sign-dialog .field > label.check { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); }

/* The page: one column, max 720 px, phone first */
.sign-dialog .sign { max-width: 720px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s10); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.sign-dialog .sign:focus { outline: none; }
.sign-dialog .sign-head { display: grid; gap: var(--s1); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.sign-dialog main .firm { font-family: var(--font-display); font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--accent-press); }
.sign-dialog .sign-head h1 { font-family: var(--font-display); font-size: 24px; line-height: 32px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sign-dialog .sign-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); overflow-wrap: anywhere; }
.sign-dialog .sign-section > h2, .sign-dialog .section-head h2 { font-size: var(--fs-sub); line-height: var(--lh-sub); }
.sign-dialog .section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); }
.sign-dialog .section-head .btn { min-height: 44px; }

/* The contract: the drawing in a frame from 640 px, a tile that opens it on a phone */
.sign-dialog .doc-frame { display: none; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface-3); overflow: hidden; }
.sign-dialog .doc-frame iframe { display: block; width: 100%; height: 520px; border: 0; background: var(--surface-3); }
.sign-dialog .doc-tile { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); background: var(--surface); border: 1px solid transparent; border-radius: var(--r-card); box-shadow: var(--shadow-2); }
.sign-dialog .doc-tile > .i { width: 32px; height: 32px; color: var(--accent-press); }
.sign-dialog .doc-tile-text { display: grid; min-width: 0; }
.sign-dialog .doc-tile-text strong { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }

/* Signature */
.sign-dialog .sig-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.sign-dialog .sig-field.has-error .sig-box { border-color: var(--warning); }
.sign-dialog .pivot { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line); }
.sign-dialog .pivot button {
  position: relative; min-height: 44px; padding: 0 var(--s4); border: 0; background: transparent; cursor: pointer;
  font-size: var(--fs-body); color: var(--ink); border-radius: var(--r-control) var(--r-control) 0 0;
}
.sign-dialog .pivot button:hover { background: var(--surface-2); }
.sign-dialog .pivot button[aria-selected="true"] { font-weight: var(--fw-semibold); }
.sign-dialog .pivot button[aria-selected="true"]::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.sign-dialog .pivot button:disabled { color: var(--disabled-ink); cursor: not-allowed; }
.sign-dialog main .pivot button:focus-visible { outline-offset: -2px; }
.sign-dialog .sig-box { position: relative; height: 168px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); }
.sign-dialog .sig-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; border-radius: var(--r-control); }
.sign-dialog fieldset:disabled .sig-box canvas { cursor: not-allowed; }
.sign-dialog .sig-line { position: absolute; left: var(--s5); right: var(--s5); bottom: 40px; border-top: 1px solid var(--line-strong); pointer-events: none; }
.sign-dialog .sig-x { position: absolute; left: var(--s5); bottom: 44px; color: var(--ink-2); font-size: var(--fs-sub); pointer-events: none; }
.sign-dialog .sig-hint { position: absolute; left: 0; right: 0; bottom: var(--s2); text-align: center; color: var(--ink-2); font-size: var(--fs-dense); line-height: var(--lh-dense); pointer-events: none; }
.sign-dialog .sig-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.sign-dialog .sig-tools .btn { min-height: 44px; }
.sign-dialog .sign-file-name { min-width: 0; overflow-wrap: anywhere; }
.sign-dialog .typed {
  display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 var(--s4) 24px; text-align: center;
  font-family: var(--font-script); font-size: 36px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; overflow: hidden;
}
.sign-dialog .typed.is-empty { font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.sign-dialog .upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.sign-dialog .file-btn { position: relative; }
.sign-dialog .file-btn input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.sign-dialog .file-btn .btn { min-height: 44px; }
.sign-dialog .file-btn:focus-within .btn { outline: 2px solid var(--ink); outline-offset: 2px; }
.sign-dialog fieldset:disabled .file-btn .btn { background: var(--disabled-bg); border-color: transparent; color: var(--disabled-ink); }
.sign-dialog fieldset:disabled .file-btn input { cursor: not-allowed; }
.sign-dialog .upload-preview { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--s3); }
.sign-dialog .upload-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

.sign-dialog fieldset.sign-fields { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.sign-dialog .sign-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.sign-dialog .sign-go { display: grid; gap: var(--s3); }
.sign-dialog .sign-go .btn-primary, .sign-dialog .sign-go .btn[aria-disabled="true"] { min-height: 44px; font-size: var(--fs-body); padding-inline: var(--s6); }
.sign-dialog main .fail { display: flex; gap: var(--s2); padding: var(--s3); border-left: 3px solid var(--danger); background: var(--danger-bg); border-radius: 0 var(--r-control) var(--r-control) 0; }
.sign-dialog .fail > .i { color: var(--danger); margin-top: 2px; }

/* Outcomes: done, already signed, expired */
.sign-dialog .outcome { display: grid; justify-items: start; gap: var(--s3); padding: var(--s6) var(--s5); background: var(--surface); border: 1px solid transparent; border-radius: var(--r-card); box-shadow: var(--shadow-2); overflow-wrap: anywhere; }
.sign-dialog .outcome .i { width: 32px; height: 32px; stroke-width: 1.5; }
.sign-dialog .outcome.is-ok .i { color: var(--success); }
.sign-dialog .outcome.is-off .i { color: var(--ink-2); }
.sign-dialog .outcome h1, .sign-dialog .outcome h2 { font-family: var(--font-display); font-size: var(--fs-sub); line-height: var(--lh-sub); overflow-wrap: anywhere; }
.sign-dialog main .outcome h1:focus, .sign-dialog main .outcome h2:focus { outline: none; }

.sign-dialog .sign-foot { padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--ink-2); overflow-wrap: anywhere; }
.sign-dialog .mail-addr { -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .sign-dialog .sign { padding: var(--s10) var(--s6) var(--s12); }
  .sign-dialog .sign-head h1 { font-size: var(--fs-title); line-height: var(--lh-title); }
  .sign-dialog .sign-go { justify-items: start; }
  .sign-dialog .doc-frame { display: block; }
  .sign-dialog .doc-tile { display: none; }
}

@media (max-width: 759px) {
  /* The address is for a wide window. The email holds it too. */
  .sign-strip__address { display: none; }
  .sign-strip__words { flex: 1 1 auto; min-width: 0; max-width: none; }
}

/* A phone with the ? in the strip: the words have no room on one or two lines, so they are for screen readers only, as the story strip's name is on a phone. Card O5 says the same. */
@media (max-width: 420px) {
  .sign-strip--guided .sign-strip__words { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 639px) {
  .sign-strip { gap: 8px; }
  .sign-dialog .sign-strip__close { min-height: 44px; }
  .sign-dialog .sign-go .btn-primary, .sign-dialog .sign-go .btn[aria-disabled="true"] { width: 100%; }
  .sign-dialog .file-btn, .sign-dialog .file-btn .btn { width: 100%; }
  .sign-dialog .section-head .btn { width: 100%; }
  .sign-dialog .check { min-height: 44px; padding-block: var(--s2); }
}