/* ==========================================================================
   Esig — The Drafting Sheet
   A signed document is a controlled document. Tokens for the whole product:
   cool vellum ground, graphite rule work, one ultramarine signal, amber for
   anything still required of you.
   ========================================================================== */

:root {
  /* --- ground: drafting vellum, cool not cream ------------------------- */
  --sheet-0: #f2f4f2;   /* desk beneath the sheet */
  --sheet-1: #fafbfa;   /* the sheet itself */
  --sheet-2: #eef1ee;   /* recessed / secondary bands */
  --sheet-3: #e4e8e4;   /* pressed, selected rows */

  /* --- graphite: every rule, border and letterform --------------------- */
  --graphite-9: #14181a; /* headings, title-block ink */
  --graphite-7: #333b3e; /* body */
  /* Both carry real text, so both clear 4.5:1 on --sheet-1. Anything lighter
     than graphite-4 is for rules and placeholders only, never body copy. */
  --graphite-5: #4f5b5f; /* secondary  ~6.9:1 */
  --graphite-4: #63706f; /* tertiary   ~4.8:1 */
  --graphite-3: #b3bdbe; /* hairlines on white */
  --graphite-2: #ced6d5; /* borders */
  --graphite-1: #dfe5e2; /* faint rules */

  /* --- signal: the one saturated colour, reserved for live + actionable */
  --signal: #1f45d8;
  --signal-ink: #16309a;
  --signal-wash: #e8ecfb;
  --signal-edge: #b9c5f2;

  /* --- required: amber, only for what the product still needs from you - */
  --required: #b46b00;
  --required-wash: #fdf3e2;
  --required-edge: #f0d9ab;

  /* --- accent ramp: the one place colour blends, for CTA surfaces -------- */
  --accent-a: #0fb5a6;
  --accent-b: #2f6bf0;
  --accent-ramp: linear-gradient(115deg, var(--accent-a) 0%, #1f8ed4 45%, var(--accent-b) 100%);
  /* Deeper variant for large surfaces that carry body-size white text: the
     bright teal above is only ~2.2:1 against white, which fails as body copy. */
  --accent-ramp-deep: linear-gradient(140deg, #0f766e 0%, #1573c9 48%, #1e40af 100%);

  /* --- verdict colours ------------------------------------------------- */
  --executed: #10725a;
  --executed-wash: #e6f3ef;
  --void: #a32020;
  --void-wash: #fbeaea;

  /* --- per-recipient plot colours (drafting pen set) ------------------- */
  --pen-1: #1f45d8;
  --pen-2: #a32020;
  --pen-3: #10725a;
  --pen-4: #7a3fb5;
  --pen-5: #b46b00;
  --pen-6: #0f6c86;

  /* --- type ------------------------------------------------------------ */
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-block: "Barlow Condensed", "Inter", ui-sans-serif, sans-serif;

  /* --- rhythm: a drafting sheet is ruled, so spacing is a 4px grid ------ */
  --u1: 4px;  --u2: 8px;  --u3: 12px; --u4: 16px;
  --u5: 24px; --u6: 32px; --u7: 48px; --u8: 64px;

  /* --- edges: technical drawings do not have soft corners -------------- */
  --edge: 2px;
  --edge-lg: 3px;

  --rule: 1px solid var(--graphite-2);
  --rule-faint: 1px solid var(--graphite-1);
  --rule-heavy: 2px solid var(--graphite-9);

  /* --- depth: paper lifting off a desk, never a coloured halo ---------- */
  --lift-1: 0 1px 2px rgba(20, 24, 26, 0.07), 0 1px 1px rgba(20, 24, 26, 0.04);
  --lift-2: 0 4px 10px rgba(20, 24, 26, 0.08), 0 1px 3px rgba(20, 24, 26, 0.06);
  --lift-3: 0 14px 34px rgba(20, 24, 26, 0.13), 0 3px 8px rgba(20, 24, 26, 0.07);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark: the same sheet under a drafting lamp at night. Senders work late;
   signers mostly do not, so only the app shell and editor invert. */
@media (prefers-color-scheme: dark) {
  :root[data-sheet-theme="auto"] {
    --sheet-0: #0e1112;
    --sheet-1: #171b1d;
    --sheet-2: #1e2325;
    --sheet-3: #262c2e;
    --graphite-9: #eef2f1;
    --graphite-7: #d3dad9;
    --graphite-5: #9aa5a6;
    --graphite-4: #7c8789;
    --graphite-3: #4a5456;
    --graphite-2: #333b3d;
    --graphite-1: #262d2f;
    --signal: #7d97ff;
    --signal-ink: #a9baff;
    --signal-wash: #1b2440;
    --signal-edge: #33447e;
    --required: #e0a24a;
    --required-wash: #2c2314;
    --required-edge: #5c4a24;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute is only a UA `display:none`, so any author display rule
   (grid/flex on a panel, dialog pane or button) silently un-hides the element.
   Every JS toggle in this product relies on `hidden`, so it wins here. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sheet-0);
  color: var(--graphite-7);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}

/* Every number in this product is a measurement: align them. */
table, .tabular, time, .metric, .coord { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 {
  color: var(--graphite-9);
  font-weight: 650;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
h2 { font-size: 1.125rem; line-height: 1.25; }
h3 { font-size: 0.9375rem; line-height: 1.3; }

a { color: var(--signal); text-underline-offset: 2px; }
a:hover { color: var(--signal-ink); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 1px;
}

/* ==========================================================================
   The drafting apparatus — the world's signature marks
   ========================================================================== */

/* Micro-label: the uppercase condensed lettering of a title block. */
.block-label {
  font-family: var(--font-block);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--graphite-5);
  line-height: 1;
}

/* A sheet: paper on the desk, with a ruled border. */
.sheet {
  background: var(--sheet-1);
  border: var(--rule);
  border-radius: var(--edge);
  box-shadow: var(--lift-1);
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u4);
  padding: var(--u4) var(--u5);
  border-bottom: var(--rule);
}

.sheet__body { padding: var(--u5); }

/* Title block: the anchored identity panel of a controlled document. */
.title-block {
  border: var(--rule-heavy);
  border-radius: var(--edge);
  background: var(--sheet-1);
  overflow: hidden;
}

.title-block__row {
  display: grid;
  grid-template-columns: minmax(88px, 34%) 1fr;
  border-bottom: var(--rule-faint);
}

.title-block__row:last-child { border-bottom: 0; }

.title-block__key {
  font-family: var(--font-block);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-5);
  padding: var(--u2) var(--u3);
  border-right: var(--rule-faint);
  background: var(--sheet-2);
  display: flex;
  align-items: center;
}

.title-block__val {
  padding: var(--u2) var(--u3);
  color: var(--graphite-9);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: var(--u2);
  min-width: 0;
}

/* Revision table: the audit trail, in its native form. */
.revisions { width: 100%; border-collapse: collapse; font-size: 13px; }

.revisions th {
  font-family: var(--font-block);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-5);
  text-align: left;
  padding: var(--u2) var(--u3);
  border-bottom: var(--rule);
  white-space: nowrap;
}

.revisions td {
  padding: var(--u3);
  border-bottom: var(--rule-faint);
  vertical-align: top;
  color: var(--graphite-7);
}

.revisions tr:last-child td { border-bottom: 0; }
.revisions .rev-no { font-variant-numeric: tabular-nums; color: var(--graphite-4); width: 1%; white-space: nowrap; }
.revisions .rev-what { color: var(--graphite-9); font-weight: 550; }

/* ==========================================================================
   Controls
   ========================================================================== */

.btn {
  --btn-bg: var(--sheet-1);
  --btn-fg: var(--graphite-9);
  --btn-edge: var(--graphite-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--u2);
  padding: 9px var(--u4);
  min-height: 38px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-edge);
  border-radius: var(--edge);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms var(--ease), border-color 140ms var(--ease),
              box-shadow 140ms var(--ease), transform 90ms var(--ease);
}

/* Hover repaints `background` directly, so every variant must restate it —
   setting only --btn-bg loses to this rule and strands white text on a light
   ground. */
.btn:hover { background: var(--sheet-2); border-color: var(--graphite-3); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  --btn-bg: var(--signal);
  --btn-fg: #fff;
  --btn-edge: var(--signal-ink);
  box-shadow: var(--lift-1);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--signal-ink);
  border-color: var(--signal-ink);
  color: #fff;
  filter: brightness(0.94);
}

.btn--danger { --btn-fg: var(--void); --btn-edge: var(--graphite-2); }
.btn--danger:hover { background: var(--void-wash); border-color: var(--void); color: var(--void); }

.btn--sm { min-height: 30px; padding: 5px var(--u3); font-size: 12.5px; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.field { display: flex; flex-direction: column; gap: 6px; }

.field > label, .field-label {
  font-family: var(--font-block);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-5);
}

/* Two things this list is carrying:
   1. `input:not([type])` — a bare <input> is type=text to HTML but matches no
      [type=...] selector, so without it the control falls through to legacy
      app.css and comes back with 8px rounded corners in a world whose edges
      are square. 76 inputs across the app are written bare.
   2. The `.form-group` selectors — app.css styles `.form-group select` (0,1,1),
      which outranks a bare `select` (0,0,1) no matter that sheet.css loads
      later. Matching its specificity lets load order decide, as intended.
   Both go away with app.css itself. */
input:not([type]),
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="search"], select, textarea,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select, .form-group textarea {
  width: 100%;
  padding: 9px var(--u3);
  min-height: 38px;
  background: var(--sheet-1);
  color: var(--graphite-9);
  border: 1px solid var(--graphite-2);
  border-radius: var(--edge);
  font: inherit;
  font-size: 14px;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}

input::placeholder, textarea::placeholder { color: var(--graphite-4); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-wash);
}

input[aria-invalid="true"] { border-color: var(--void); }

.help { color: var(--graphite-5); font-size: 12.5px; margin: 0; }

/* ==========================================================================
   Status marks — stamped, not pill-shaped
   ========================================================================== */

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--graphite-2);
  border-radius: var(--edge);
  background: var(--sheet-2);
  color: var(--graphite-5);
  font-family: var(--font-block);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

.stamp::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.stamp--draft { }
.stamp--sent { background: var(--signal-wash); border-color: var(--signal-edge); color: var(--signal-ink); }
.stamp--viewed { background: var(--signal-wash); border-color: var(--signal-edge); color: var(--signal-ink); }
.stamp--completed, .stamp--signed, .stamp--executed { background: var(--executed-wash); border-color: #b6d9cd; color: var(--executed); }
.stamp--voided, .stamp--declined { background: var(--void-wash); border-color: #e8bcbc; color: var(--void); }
.stamp--required { background: var(--required-wash); border-color: var(--required-edge); color: var(--required); }

/* ==========================================================================
   Notices
   ========================================================================== */

.notice {
  display: flex;
  gap: var(--u3);
  padding: var(--u3) var(--u4);
  border: 1px solid var(--graphite-2);
  border-radius: var(--edge);
  background: var(--sheet-1);
  font-size: 13.5px;
  color: var(--graphite-7);
}

.notice__mark { flex: none; color: var(--graphite-5); margin-top: 1px; }
.notice--ok { background: var(--executed-wash); border-color: #b6d9cd; color: #0c5b48; }
.notice--ok .notice__mark { color: var(--executed); }
.notice--warn { background: var(--required-wash); border-color: var(--required-edge); color: #7d4a00; }
.notice--warn .notice__mark { color: var(--required); }
.notice--error { background: var(--void-wash); border-color: #e8bcbc; color: #8a1c1c; }
.notice--error .notice__mark { color: var(--void); }

/* ==========================================================================
   Icons — one stroke weight across the product
   ========================================================================== */

.ico {
  width: 16px; height: 16px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.ico--lg { width: 20px; height: 20px; }

/* ==========================================================================
   Motion — one authored moment: paper settling onto the desk
   ========================================================================== */

@keyframes sheet-settle {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.settle { animation: sheet-settle 380ms var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Utilities kept deliberately few. */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-2 { gap: var(--u2); } .gap-3 { gap: var(--u3); } .gap-4 { gap: var(--u4); }
.mt-auto { margin-top: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}