:root {
  /* Light, whatever the machine prefers. Not `light dark`: that hands the choice to the
     operating system, and a product whose surface changes colour depending on who opened it
     is one nobody can describe, screenshot or support. The dark palette this replaced is in
     the history if it is ever wanted back — behind a preference somebody sets, which needs a
     server-rendered class rather than a media query. */
  color-scheme: light;
  --bg: #fcfcfb; --card: #fff; --ink: #14140f; --muted: #56554c; --faint: #66645c;
  --line: #e5e3db; --line-strong: #d4d1c7;
  --accent: #145244; --accent-hi: #1d7a63; --accent-ink: #fff; --soft: #e9f2ee;
  --bad: #8c2f1e; --bad-soft: #fbeae6;
  --shadow-1: 0 1px 2px rgba(20,20,15,.05), 0 1px 3px rgba(20,20,15,.04);
  --shadow-2: 0 2px 4px rgba(20,20,15,.04), 0 10px 24px -8px rgba(20,20,15,.12);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-text-size-adjust: 100%;
}
.bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--card);
}
.brand { font-weight: 600; letter-spacing: -0.02em; }
.from { color: var(--muted); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { max-width: 640px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: clamp(24px, 5vw, 30px); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; }
h2 { font-size: 18px; margin: 32px 0 8px; }
p { margin: 0 0 14px; }
.lede { color: var(--muted); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; margin: 20px 0; box-shadow: var(--shadow-1);
}
.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: flex; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.rows li:last-child { border-bottom: 0; }
.rows .k { color: var(--muted); }
/* A flex item will not shrink below its min-content width without this, which is how a long
   value — a fingerprint, a long address — pushes the page wider than a phone. */
.rows .v { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
fieldset { border: 0; margin: 0 0 20px; padding: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
label { display: block; font-weight: 500; margin-bottom: 6px; }
.hint { color: var(--muted); font-size: 14px; margin: -2px 0 8px; }
input[type=text], input[type=date], input[type=email], input[type=number],
input[type=password], select, textarea {
  width: 100%; font: inherit; color: inherit; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; margin-bottom: 16px;
}
/* The one-time code, and only that. This was `input[inputmode=numeric]`, which is also what a
   page number, four coordinates and a payment amount are — so every number in the console was
   rendered as a six-digit passcode box: spaced out, centred and enormous. Scoped to the
   attribute that means "this is a one-time code", which is also the one the browser reads. */
input[autocomplete=one-time-code] { letter-spacing: 0.4em; font-size: 22px; text-align: center; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.check input { margin-top: 6px; width: 20px; height: 20px; flex: none; }
.check label { font-weight: 400; margin: 0; }
/* One of several: a radio or a checkbox with its own words, big enough to hit with a thumb.
   The whole row is the label, so the text is part of the target and not just next to it. */
.choice {
  display: flex; gap: 10px; align-items: flex-start; font-weight: 400;
  padding: 11px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
}
.choice input { margin: 3px 0 0; width: 20px; height: 20px; flex: none; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--soft); }
.choice:has(input:disabled) { color: var(--faint); background: var(--bg); }
.choice .hint { display: inline; margin: 0; }
/* A word marking the thing you are already on, next to its heading. */
.tag {
  display: inline-block; margin-left: 8px; padding: 2px 8px; vertical-align: 2px;
  border-radius: 999px; background: var(--soft); color: var(--accent);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Clerk owns every pixel inside its mount. Excluding those descendants keeps the host page's
   broad button rule from painting a Pactlyra gradient under Clerk's own dark text. */
button:not(:where(#clerk-sign-in *)) {
  font: inherit; font-weight: 560; cursor: pointer; letter-spacing: -.01em;
  background: linear-gradient(135deg, var(--accent-hi), var(--accent)); color: var(--accent-ink);
  border: 1px solid transparent; border-radius: 10px; padding: 13px 22px; width: 100%;
  box-shadow: var(--shadow-1); transition: transform .16s ease, box-shadow .16s ease;
}
button:not(:where(#clerk-sign-in *)):hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
button:not(:where(#clerk-sign-in *)):active { transform: none; }
button.secondary {
  background: var(--card); color: var(--ink); border-color: var(--line-strong);
}
button.secondary:hover { border-color: var(--accent-hi); color: var(--accent-hi); }
@media (prefers-reduced-motion: reduce) {
  button:not(:where(#clerk-sign-in *)), button:not(:where(#clerk-sign-in *)):hover {
    transform: none; transition: none;
  }
}
/* A small action that sits inside a row rather than under it — taking a placed field off
   again. Full-width buttons are right beneath a form and wrong next to one line of a list. */
button.link {
  width: auto; padding: 0; background: none; border: 0; color: var(--bad);
  font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
.actions { display: grid; gap: 10px; margin-top: 8px; }
@media (min-width: 520px) {
  .actions { grid-template-columns: 1fr auto; }
  button:not(:where(#clerk-sign-in *)) { width: auto; }
}
.note { background: var(--soft); border-radius: 10px; padding: 14px 16px; margin: 20px 0; font-size: 15px; }
.note strong { display: block; }
.error {
  background: var(--bad-soft); color: var(--bad); border: 1px solid currentColor;
  border-radius: 10px; padding: 14px 16px; margin: 0 0 20px; font-size: 15px;
}
.error strong { display: block; }
.ok {
  background: var(--soft); color: var(--accent); border: 1px solid currentColor;
  border-radius: 10px; padding: 14px 16px; margin: 0 0 20px; font-size: 15px;
}
.ok strong { display: block; }
.done { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.foot { max-width: 640px; margin: 0 auto; padding: 0 16px 40px; color: var(--faint); font-size: 13px; }
.foot p { margin: 0; }
/* Spacing that depends on where a thing sits rather than what it is. This was written as seven
   inline `style` attributes once, and never applied to anything: `style-src 'self'` refuses a
   style attribute, so every one of them was dead the day it was written. */
.card > h2:first-child { margin-top: 0; }      /* a heading that opens a card */
.card > .hint:last-child { margin: 14px 0 0; } /* a note that closes one, under the rows */
.actions + .hint { margin-top: 12px; }         /* what is left to do, under the buttons */
.actions + .lede { margin-top: 24px; }         /* and an empty console, under the one button */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--card); padding: 8px 12px; border-radius: 8px; }

/* ---------------------------------------------------------------- the console
   Everything above dresses a signer: one short page, one action, 640px. A sender is looking
   at a list of agreements, a usage ledger and a table of placed fields, and the same column
   rendered all of it as a phone screen in the middle of a desktop monitor. `body.app` is the
   whole difference — same stylesheet, same no-JavaScript and no-inline-styles rules, a
   different shape. Nothing here can reach a signer page, because nothing there carries the
   class. */

.app main { max-width: 1080px; padding: 28px 20px 72px; }
.app .foot { max-width: 1080px; padding: 0 20px 40px; }

.app .bar {
  position: sticky; top: 0; z-index: 5;
  gap: 8px 20px; padding: 0 20px; min-height: 60px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.app .brand {
  font-size: 18px; font-weight: 650; text-decoration: none; color: inherit;
  padding: 12px 0; flex: none;
}

/* The navigation, which was seven links joined by a middle dot inside the element the signer
   pages use to name a sender. Scrolls sideways rather than wrapping on a narrow screen: a
   tab row that reflows to three lines pushes the page itself off the first screen. */
.app .tabs {
  display: flex; align-items: center; gap: 2px;
  margin-right: auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.app .tabs::-webkit-scrollbar { display: none; }
.app .tabs a {
  padding: 8px 13px; border-radius: 9px; white-space: nowrap;
  color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500;
  transition: background .16s ease, color .16s ease;
}
.app .tabs a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
/* Where you are, said in more than colour — it is the only bold one, and it carries
   `aria-current` for anything not reading the paint. */
.app .tabs a[aria-current=page] {
  color: var(--accent-hi); background: var(--soft); font-weight: 650;
}

.app .who {
  flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--faint);
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.app h1 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 680; letter-spacing: -.03em; margin-bottom: 8px; }
.app h2 { font-size: 20px; font-weight: 640; letter-spacing: -.02em; margin: 36px 0 10px; }
.app .lede { font-size: 17px; max-width: 70ch; }

/* A list of agreements is the page this console exists for, so its rows are the thing most
   worth making scannable: one card each, lifting under the pointer. */
.app .card { border-radius: 14px; transition: border-color .16s ease, box-shadow .16s ease; }
.app .card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.app .card > h2 { margin-top: 0; }

/* Two columns where there is room, one where there is not. The rows inside a card are label
   and value, and at this width they can sit side by side instead of stacking. */
.app .rows li { padding: 10px 0; gap: 4px 24px; }
.app .rows .k { font-size: 14px; }

/* Forms in a console are filled with a keyboard on a real screen, so the inputs do not need
   to be thumb-sized, and a form that is 1080px wide is one nobody can read across. */
.app form { max-width: 640px; }
.app input[type=text], .app input[type=date], .app input[type=email],
.app input[type=number], .app input[type=password], .app select, .app textarea {
  border-radius: 9px; padding: 10px 12px;
}
.app input[type=text]:focus, .app input[type=email]:focus, .app input[type=number]:focus,
.app input[type=date]:focus, .app input[type=password]:focus,
.app select:focus, .app textarea:focus { border-color: var(--accent-hi); }

/* A table of placed fields or a usage ledger — the one shape a 640px column could not hold
   at all, and the reason half of these pages read as a wall of text. */
.app table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.app thead th {
  text-align: left; padding: 10px 12px; font-size: 13px; font-weight: 640;
  letter-spacing: .02em; color: var(--muted);
  background: var(--soft); border-bottom: 1px solid var(--line-strong);
}
.app thead th:first-child { border-top-left-radius: 10px; }
.app thead th:last-child { border-top-right-radius: 10px; }
.app tbody td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.app tbody tr:last-child td { border-bottom: 0; }

.app .tag { vertical-align: 1px; }
.app .actions { margin-top: 12px; }
@media (min-width: 520px) { .app .actions { justify-content: start; } }

/* The four numbers a sender opens the console to see. They were four rows of a list, which
   is the right shape for label-and-value pairs and the wrong one for a summary: a count is
   read at a glance and a row is read left to right. Auto-fit rather than four fixed columns,
   so it folds to two and then one without a breakpoint per step. */
.app .stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin: 22px 0;
}
.app .stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 20px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-1);
}
.app .stat .n {
  font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.app .stat .k { font-size: 13.5px; color: var(--muted); }

/* Customer identity is intentionally a distinct surface from the working console. Clerk owns
   the identity controls inside the mount; Pactlyra owns the explanation and recovery path. */
.app .auth-shell {
  max-width: 760px; margin: 18px auto 0; padding: clamp(22px, 5vw, 42px);
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-2);
}
.app .auth-heading { max-width: 620px; margin: 0 auto 18px; text-align: center; }
.app .auth-heading .eyebrow {
  display: inline-block; margin-bottom: 10px; color: var(--accent-hi);
  font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
}
.app .clerk-status { max-width: 520px; margin: 0 auto 18px; text-align: center; }
.app #clerk-sign-in { min-height: 120px; }
.app #clerk-sign-in > div { margin-inline: auto; }
.app .workspace-choices { display: grid; gap: 10px; max-width: 440px; margin: 18px auto; }
.app .workspace-choices button, .app #clerk-sign-in > button {
  width: 100%; padding: 12px 16px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700;
}
.app .signout { margin: 0; }
.app .signout button {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-weight: 650;
}
.app .signout button:hover { color: var(--ink); border-color: var(--ink); }
.app .first-key {
  display: block; margin: 18px 0; padding: 16px; overflow-wrap: anywhere;
  border: 1px solid var(--line); border-radius: 10px; background: var(--soft);
}
.app .legacy-signin { max-width: 760px; margin: 18px auto; }
.app .legacy-signin details { padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; }
.app .legacy-signin summary { cursor: pointer; color: var(--muted); font-weight: 650; }

@media (max-width: 560px) {
  .app .who { display: none; }
  .app main { padding: 20px 16px 56px; }
  .app .bar { padding: 0 16px; }
  .app .auth-shell { margin-top: 4px; padding: 22px 12px; border-radius: 16px; }
  .app .auth-heading { margin-bottom: 14px; }
}