/* PurpleSign UI — one design system for every page the app serves.
   Brand tokens are locked in products/PurpleSign/docs/BRAND.md. Strict CSP:
   no inline styles in templates; JS writes positions through el.style only.
   Accessibility: AA contrast tokens, 44px touch targets on phones, visible
   :focus-visible rings in focus blue, reduced-motion respected. */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/inter-700.woff2") format("woff2"); }

/* Signature script faces (self-hosted, OFL; font-src 'self'). */
@font-face { font-family: "Sig Dancing"; font-weight: 700; font-display: swap; src: url("fonts/dancing-script.woff2") format("woff2"); }
@font-face { font-family: "Sig Great Vibes"; font-weight: 400; font-display: swap; src: url("fonts/great-vibes.woff2") format("woff2"); }
@font-face { font-family: "Sig Sacramento"; font-weight: 400; font-display: swap; src: url("fonts/sacramento.woff2") format("woff2"); }
@font-face { font-family: "Sig Allura"; font-weight: 400; font-display: swap; src: url("fonts/allura.woff2") format("woff2"); }
.sig-font-dancing { font-family: "Sig Dancing", cursive; font-weight: 700; }
.sig-font-great-vibes { font-family: "Sig Great Vibes", cursive; }
.sig-font-sacramento { font-family: "Sig Sacramento", cursive; }
.sig-font-allura { font-family: "Sig Allura", cursive; }

:root {
  --p700: #5b21b6;
  --p800: #4c1d95;
  --lav: #c4b5fd;
  --wash: #f5f3ff;
  --wash2: #ede9fe;
  --ink: #1a1a1a;
  --muted: #595959;
  --focus: #2563eb;
  --ok: #047857;
  --ok-wash: #ecfdf5;
  --err: #b91c1c;
  --err-wash: #fef2f2;
  --warn: #92400e;
  --warn-wash: #fffbeb;
  --line: rgba(26, 26, 26, .14);
  --line2: rgba(26, 26, 26, .07);
  --field: #8a8a8a;           /* input borders: 3.5:1 on white (non-text contrast) */
  --bg: #f7f7f8;
  --hover: #f4f4f5;
  --canvas: #ececef;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 6px;                   /* controls: buttons, inputs, tags, menus items */
  --r-lg: 8px;                /* surfaces: panels, cards, tables, dialogs — never more */
  --ink2: #2e1065;            /* deepest purple: text on lavender (9.9:1) */
  --side: #4c1d95;            /* app sidebar (purple-800) */
  --side-ink: #ede9fe;        /* sidebar items: 9.23:1 on --side */
  --side-mute: #ddd6fe;       /* sidebar secondary text: 7.89:1 on --side */
  --shadow: none;             /* cards and panels are flat: hairline only */
  --shadow-pop: 0 16px 40px -16px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .08); /* overlays only: menus, dialogs, sheets */
  /* per-signer colours (send + signer pages) */
  --s1: #5b21b6; --s1bg: #f5f3ff;
  --s2: #0e7490; --s2bg: #ecfeff;
  --s3: #be185d; --s3bg: #fdf2f8;
  --s4: #15803d; --s4bg: #f0fdf4;
  --s5: #b45309; --s5bg: #fffbeb;
  --s6: #3a3a3a; --s6bg: #f3f3f4;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { max-width: 100%; }
a { color: var(--p700); }
a:hover { color: var(--p800); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.02em; line-height: 1.2; font-weight: 700; }
p { margin: 0 0 .75rem; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-sm { width: 15px; height: 15px; }
.ico-lg { width: 22px; height: 22px; }

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 400; background: var(--p700); color: #fff; padding: 10px 14px; border-radius: var(--r); text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 8px; color: #fff; }

/* ── Brand ──────────────────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand svg { width: 30px; height: 30px; display: block; }
.wordmark { font-weight: 600; font-size: 18px; letter-spacing: -.03em; color: var(--ink); }
.wordmark b { font-weight: 600; color: var(--p700); }

/* ── Tooltips (labels in the UI, the why on hover/focus) ─────────────────── */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px); background: var(--ink); color: #fff;
  font-size: 12.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none;
  padding: 7px 10px; border-radius: 4px; width: max-content; max-width: 240px; white-space: normal;
  text-align: left; pointer-events: none; z-index: 90;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { transform: translateX(-50%); }
@media (hover: none) { [data-tip]:hover::after { display: none; } }
[data-tip].tip-r:hover::after, [data-tip].tip-r:focus-visible::after { left: auto; right: 0; transform: none; }
[data-tip].tip-l:hover::after, [data-tip].tip-l:focus-visible::after { left: 0; transform: none; }
[data-tip].tip-b:hover::after, [data-tip].tip-b:focus-visible::after { bottom: auto; top: calc(100% + 8px); }
.tipword { border-bottom: 1px dotted currentColor; cursor: help; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 14px; border-radius: var(--r); border: 1px solid rgba(26, 26, 26, .22);
  background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .1s, border-color .1s, color .1s;
}
.btn:hover { background: var(--hover); border-color: rgba(26, 26, 26, .4); color: var(--ink); }
.btn:active { background: #e9e9ec; transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--p700); border-color: var(--p700); color: #fff; }
.btn-primary:hover { background: var(--p800); border-color: var(--p800); color: #fff; }
.btn-primary:active { background: var(--ink2); border-color: var(--ink2); }
.btn-primary:disabled { background: #d9d0f3; border-color: #d9d0f3; color: #4b4b4b; opacity: 1; }
.btn-secondary { color: var(--p700); border-color: var(--p700); background: #fff; }
.btn-secondary:hover { background: var(--wash); color: var(--p800); border-color: var(--p800); }
.btn-tertiary, .btn-ghost { border-color: transparent; background: transparent; }
.btn-tertiary:hover, .btn-ghost:hover { background: var(--hover); border-color: transparent; }
.btn-danger { color: var(--err); border-color: rgba(185, 28, 28, .45); }
.btn-danger:hover { background: var(--err-wash); color: var(--err); border-color: var(--err); }
.btn-danger-solid { background: var(--err); border-color: var(--err); color: #fff; }
.btn-danger-solid:hover { background: #991b1b; border-color: #991b1b; color: #fff; }
.btn-white { background: #fff; color: var(--p800); border-color: #fff; }
.btn-sm { min-height: 32px; padding: 0 10px; font-size: 13px; }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-icon { width: 38px; min-height: 38px; padding: 0; }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid rgba(26, 26, 26, .22); border-bottom-width: 2px; border-radius: 4px; font: 600 11.5px/1 var(--mono); color: var(--muted); background: #fff; }
.btn-icon.btn-sm { width: 32px; min-height: 32px; }
.linklike { border: 0; background: none; padding: 0; color: var(--p700); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linklike:hover { color: var(--p800); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
label, .label { display: block; font-weight: 600; font-size: 13.5px; margin: 0 0 6px; }
.field { margin: 0 0 16px; }
.field-row { margin: 0 0 16px; }
.input, input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], select, textarea {
  width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid var(--field); border-radius: var(--r);
  background: #fff; color: var(--ink); font-size: 15px; transition: border-color .12s, box-shadow .12s;
}
textarea { min-height: 88px; line-height: 1.45; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--p700); box-shadow: 0 0 0 3px rgba(91, 33, 182, .18); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--p700); margin: 0; flex: none; }
.help-text { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; font-weight: 400; }
input[readonly] { background: var(--bg); color: var(--ink); }
label .opt { font-weight: 400; color: var(--muted); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 14px; }
.check input { margin-top: 2px; }
.check label { margin: 0; font-weight: 500; font-size: 14px; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
legend { font-weight: 600; font-size: 13.5px; padding: 0; margin: 0 0 8px; }

.form-error, .alert-error {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 11px 13px;
  border: 1px solid rgba(185, 28, 28, .4); background: var(--err-wash); color: var(--err);
  border-radius: var(--r); font-size: 14px; font-weight: 500;
}
.form-ok, .alert-ok {
  margin: 0 0 16px; padding: 11px 13px; border: 1px solid rgba(4, 120, 87, .35); background: var(--ok-wash);
  color: var(--ok); border-radius: var(--r); font-size: 14px; font-weight: 500;
}
.notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 11px 14px;
  background: var(--wash); border: 1px solid rgba(91, 33, 182, .2); border-radius: var(--r); font-size: 14px; color: var(--ink);
}
.notice-warn { background: var(--warn-wash); border-color: rgba(146, 64, 14, .3); }
.notice .grow { flex: 1 1 240px; }
.notice-bar { border-radius: 0; margin: 0; border-width: 0 0 1px; padding: 10px 24px; }

/* ── Surfaces ───────────────────────────────────────────────────────────── */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.panel + .panel { margin-top: 16px; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.panel-h h2 { font-size: 16px; }
.panel-sub { color: var(--muted); font-size: 14px; margin: -8px 0 16px; }
.divider { height: 1px; background: var(--line2); border: 0; margin: 20px 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* ── Pills ──────────────────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 4px; padding: 2px 7px; white-space: nowrap; background: #fff; color: var(--ink); border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent); line-height: 18px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok { background: var(--ok-wash); color: var(--ok); }
.pill-wait { background: var(--wash); color: var(--p800); }
.pill-bad { background: var(--err-wash); color: var(--err); }
.pill-warn { background: var(--warn-wash); color: var(--warn); }
.pill-draft, .pill-muted { background: #f1f1f2; color: #3f3f3f; }
.tag { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; border-radius: 4px; padding: 0 6px; line-height: 18px; background: var(--wash); color: var(--p800); border: 1px solid rgba(91, 33, 182, .25); }

/* ── Avatars ────────────────────────────────────────────────────────────── */
.av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; color: #fff; background: #3a3a3a; flex: none; letter-spacing: 0; }
.av-lg { width: 42px; height: 42px; font-size: 14px; }
.av-xs { width: 20px; height: 20px; font-size: 8.5px; }
.av.c1 { background: var(--s1); } .av.c2 { background: var(--s2); } .av.c3 { background: var(--s3); }
.av.c4 { background: var(--s4); } .av.c5 { background: var(--s5); } .av.c6 { background: var(--s6); }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
@media (max-width: 560px) {
  .tabs { padding-right: 32px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
}
.tab { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; font-weight: 600; font-size: 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--p800); border-bottom-color: var(--p700); }
.count { font-size: 12px; font-weight: 600; background: #f1f1f2; color: var(--ink); border-radius: 4px; padding: 0 6px; line-height: 18px; min-width: 20px; text-align: center; }
.tab[aria-current="page"] .count { background: var(--wash); color: var(--p800); }
.count-hot { background: var(--p700); color: #fff; }

/* ── Dialog ─────────────────────────────────────────────────────────────── */
dialog.dlg { border: 0; padding: 0; border-radius: var(--r-lg); width: min(460px, calc(100vw - 32px)); box-shadow: var(--shadow-pop); color: var(--ink); }
dialog.dlg::backdrop { background: rgba(26, 26, 26, .4); }
.dlg-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; }
.dlg-h h2 { font-size: 18px; }
.dlg-b { padding: 12px 20px 4px; }
.dlg-f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 20px; flex-wrap: wrap; }

/* ── Menus (account) ────────────────────────────────────────────────────── */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 4px; z-index: 70; }
.menu-pop a, .menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 4px; border: 0; background: none; text-align: left; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px; cursor: pointer; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--hover); }
.menu-pop .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line2); margin-bottom: 4px; font-size: 13px; }
.menu-pop .who b { display: block; font-size: 14px; }
/* A long address stays on one line (cut with …, full text on hover) instead of breaking mid-word. */
.menu-pop .who .who-mail { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ PUBLIC PAGES (auth, legal, signer status) ══════════════════════════ */
.pub { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.pub-top { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--line2); }
.pub-top .sp { flex: 1; }
.pub-main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 48px 20px 64px; }
.pub-main.wide { max-width: 820px; }
/* Fine print: small and quiet — it is there when looked for, never competing.
   #6b6b76 is as light as it can go at this size: 4.77:1 on the app's page
   colour, 5.26:1 on white (4.5:1 is the floor for small text; #8b8b94 was 3.05). */
.pub-foot { padding: 18px 24px 22px; font-size: 11.5px; line-height: 1.5; color: #6b6b76; text-align: center; }
.pub-foot a { color: inherit; font-weight: 400; text-decoration: underline; text-decoration-color: rgba(107, 107, 118, .45); text-underline-offset: 2px; }
.pub-foot a:hover { color: var(--ink); text-decoration-color: currentColor; }
.pub-foot p { margin: 0; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; }
.card h1 { font-size: 26px; margin: 0 0 8px; letter-spacing: -.025em; }
.card .lede { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.state-mark { width: 44px; height: 44px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; margin: 0 0 18px; background: var(--wash); color: var(--p700); }
.state-mark .ico { width: 26px; height: 26px; stroke-width: 2; }
.state-mark.ok { background: var(--ok-wash); color: var(--ok); }
.state-mark.bad { background: var(--err-wash); color: var(--err); }
.state-mark.wait { background: #f1f1f2; color: var(--ink); }
.facts { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--line2); }
.facts li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line2); font-size: 14px; }
.facts li .ico { color: var(--p700); margin-top: 1px; }
.done-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 20px 0 0; }
.done-offer p { margin: 0; font-size: 14px; flex: 1 1 240px; }
.done-offer + p { margin-top: 20px; }
.done-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }

/* Auth: a solid purple side with the promise, the form on white. */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: #fff; }
.auth-side { background: var(--p800); color: #fff; padding: 40px 48px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; align-self: start; overflow: hidden; }
.auth-side .brand .wordmark { color: #fff; }
.auth-side .brand svg { box-shadow: 0 0 0 1px rgba(196, 181, 253, .55); border-radius: 7px; }
.auth-side .brand .wordmark b { color: var(--lav); }
.auth-side .pitch { margin: auto 0; max-width: 440px; }
.auth-side h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.02; letter-spacing: -.045em; font-weight: 700; margin: 0 0 18px; }
.auth-side h2 span { color: var(--lav); }
.auth-side .baseline { display: block; width: 180px; height: 16px; color: var(--lav); margin: 0 0 26px; }
.auth-side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 15px; color: #ede9fe; }
.auth-side li { display: flex; gap: 10px; align-items: flex-start; }
.auth-side li .ico { color: var(--lav); margin-top: 2px; }
.auth-side .fine { font-size: 13px; color: #ddd6fe; margin: 32px 0 0; }
.auth-main { display: flex; flex-direction: column; padding: 32px 24px; }
.auth-form { width: 100%; max-width: 400px; margin: auto; padding: 32px 0; }
.auth-form h1 { font-size: 28px; margin: 0 0 6px; }
.auth-form h1:not(:has(+ .lede)) { margin-bottom: 24px; }
.auth-form .lede { color: var(--muted); margin: 0 0 26px; }
.auth-form .alt { margin: 20px 0 0; font-size: 14px; color: var(--muted); }
.auth-form .row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.auth-form .row-between a { font-size: 13px; font-weight: 500; }
.auth-foot { font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.auth-foot nav { display: flex; gap: 16px; }
.auth-foot a { color: var(--muted); }

/* Auth panel: a signature drawn onto a document, its certificate, and faint
   ink strokes across the purple. */
.auth-side > * { position: relative; z-index: 1; }
.auth-side .auth-ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.auth-side .auth-ink-bar { display: none; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ink-b1, .ink-b2 { vector-effect: non-scaling-stroke; }
.ink-b1 { stroke-width: 12; stroke-opacity: .6; animation-duration: 2.2s; }
.ink-b2 { stroke-width: 1.5; stroke-opacity: .4; animation-duration: 2.6s; animation-delay: .4s; }
.ink-draw { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3600; stroke-dashoffset: 3600; animation: ink-draw 3s .2s ease-out forwards; }
.ink-1 { stroke-width: 58; stroke-opacity: .55; }
.ink-2 { stroke: var(--lav); stroke-width: 4; stroke-opacity: .35; animation-duration: 3.4s; animation-delay: .5s; }
.ink-3 { stroke: #ddd6fe; stroke-width: 2; stroke-opacity: .22; animation-duration: 3.8s; animation-delay: .9s; }
.ink-sig { stroke: #2e1065; stroke-width: 2.6; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation-duration: 2.2s; animation-delay: .4s; }
@keyframes ink-draw { to { stroke-dashoffset: 0; } }
.auth-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.auth-doc { position: relative; width: 100%; max-width: 400px; background: #fff; color: var(--ink); border-radius: 4px; padding: 26px 28px 30px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .5); }
.auth-doc-t { margin: 0 0 14px; font-weight: 600; font-size: 15px; }
.auth-doc > i { display: block; height: 7px; border-radius: 4px; background: #e9e7ef; margin: 0 0 9px; }
.auth-doc > i.w92 { width: 92%; } .auth-doc > i.w84 { width: 84%; } .auth-doc > i.w76 { width: 76%; } .auth-doc > i.w60 { width: 60%; } .auth-doc > i.gap { margin-top: 18px; }
.auth-sigline { position: relative; margin: 26px 0 0; border-top: 1px solid var(--ink); padding-top: 6px; font-size: 12px; color: var(--muted); }
.auth-sigline svg { position: absolute; left: 4px; bottom: 10px; width: 70%; height: 52px; }
.auth-cert { position: absolute; right: -26px; bottom: -30px; width: 250px; background: #fff; border-radius: 6px; padding: 14px 16px; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .55); font-size: 12.5px; opacity: 0; transform: translateY(10px); animation: cert-in .5s 2.6s ease-out forwards; }
.auth-cert b { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 0 0 8px; }
.auth-cert b span { width: 16px; height: 16px; border-radius: 4px; background: var(--p700); }
.auth-cert dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.auth-cert dt { color: var(--muted); } .auth-cert dd { margin: 0; }
.auth-cert .mono { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }
@keyframes cert-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ink-draw { animation: none; stroke-dashoffset: 0; } .auth-cert { animation: none; opacity: 1; transform: none; } }

/* Sign in | Create account */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--wash2); border-radius: 8px; padding: 4px; margin: 0 0 28px; }
.auth-tabs a { display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 6px; font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; }
.auth-tabs a[aria-current="page"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(46, 16, 101, .18); }
.auth-tabs a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* New password: strength bar + one line for what's missing */
.pw-meter { height: 6px; border-radius: 3px; background: var(--wash2); margin: 10px 0 0; overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .2s, background .2s; }
.pw-meter i[data-l="1"] { width: 25%; background: #b91c1c; } .pw-meter i[data-l="2"] { width: 50%; background: #b45309; }
.pw-meter i[data-l="3"] { width: 75%; background: #4d7c0f; } .pw-meter i[data-l="4"] { width: 100%; background: #047857; }
.pw-help.is-bad { color: var(--err); } .pw-help.is-ok { color: var(--ok); }
.sso { display: grid; gap: 10px; margin: 0 0 18px; }
.btn-sso { min-height: 44px; font-weight: 600; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 4px 0 18px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.terms-box { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: #fafafa; margin: 4px 0 20px; }
.terms-box .check { font-size: 14px; }

/* Quick sign + consent text */
.qs-preview { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow: auto; padding: 12px; background: var(--canvas); border-radius: var(--r-lg); margin: 0 0 10px; }
.qs-preview img { width: 100%; height: auto; background: #fff; border: 1px solid var(--line); }
.check + .check { margin-top: 8px; }
.attestation-body { font-size: 13px; color: var(--muted); background: #fff; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); max-height: 9rem; overflow-y: auto; margin: 10px 0 6px; white-space: pre-line; }
.attestation-body:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.disclosure-body { white-space: normal; max-height: 16rem; }
.disclosure-body p { margin: 0 0 8px; }
.disclosure-body h3 { font-size: 13px; font-weight: 600; color: var(--ink, inherit); margin: 12px 0 4px; }

/* Legal pages */
.legal { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px 44px; }
.legal h1 { font-size: 30px; margin: 0 0 6px; }
.sup { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 40px; }
.sup h1 { font-size: 28px; margin: 0 0 6px; }
.sup .lede { margin: 0 0 22px; color: var(--muted); }
.sup textarea { min-height: 150px; }
.sup .cf-turnstile { margin: 0 0 16px; }
.sup-alt { margin: 18px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.sup-after { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 18px 0 0; font-size: 14.5px; }
.legal .meta { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.legal h2 { font-size: 18px; margin: 30px 0 10px; letter-spacing: -.01em; }
.legal h3 { font-size: 15px; margin: 22px 0 8px; }
.legal p, .legal li { font-size: 15px; line-height: 1.65; color: #262626; }
.legal ul, .legal ol { padding-left: 22px; margin: 0 0 12px; }
.legal li { margin: 0 0 6px; }
.legal .caps { font-size: 13.5px; letter-spacing: .01em; }
.legal-toc { background: var(--bg); border: 1px solid var(--line2); border-radius: var(--r); padding: 16px 20px; margin: 0 0 8px; font-size: 14px; }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.legal-toc li { margin: 0 0 4px; font-size: 14px; }

/* ══ APP SHELL (signed in) ═══════════════════════════════════════════════ */
/* One dark header across the top; the page below. Spec: docs/design/
   APP-HOME-AND-SHELL-SPEC.md §2. Contrast on --ink2 (#2e1065): #fff 15.6:1 ·
   tab text rgba(237,233,254,.78) 11.2:1 · lavender badge/Send ink2-on-lav 9.9:1. */
body.app { background: #f4f3f8; }
.hdr { position: sticky; top: 0; z-index: 40; background: var(--ink2); color: #fff; }
.hdr-in { max-width: 1280px; margin: 0 auto; height: 60px; padding: 0 28px; display: flex; align-items: center; gap: 22px; }
.hdr .brand { color: #fff; flex: none; }
.hdr .brand svg { width: 28px; height: 28px; box-shadow: 0 0 0 1px rgba(196, 181, 253, .55); border-radius: 7px; }
.hdr .brand .wordmark { color: #fff; }
.hdr .brand .wordmark b { color: var(--lav); }
.hdr-tabs { display: flex; align-self: stretch; gap: 2px; margin-left: 6px; }
.hdr-tabs a { display: flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 14px; font-weight: 500; color: rgba(237, 233, 254, .78); text-decoration: none; border-bottom: 2px solid transparent; border-top: 2px solid transparent; }
.hdr-tabs a:hover { color: #fff; }
.hdr-tabs a[aria-current="page"] { color: #fff; font-weight: 600; border-bottom-color: var(--lav); }
.hdr-n { min-width: 18px; padding: 0 5px; border-radius: 4px; background: var(--lav); color: var(--ink2); font-size: 11.5px; font-weight: 700; line-height: 18px; text-align: center; }
.hdr-find { flex: 1; min-width: 120px; max-width: 400px; margin-left: auto; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 11px; border-radius: var(--r); background: rgba(255, 255, 255, .08); border: 1px solid rgba(221, 214, 254, .16); color: rgba(237, 233, 254, .7); }
.hdr-find:focus-within { background: #fff; border-color: #fff; color: var(--muted); box-shadow: 0 0 0 3px rgba(196, 181, 253, .45); }
.hdr-find input { border: 0; outline: 0; min-height: 0; padding: 0; flex: 1; min-width: 0; background: transparent; box-shadow: none; font-size: 14px; color: #fff; }
.hdr-find input::placeholder { color: rgba(237, 233, 254, .6); }
.hdr-find:focus-within input { color: var(--ink); }
.hdr-find:focus-within input::placeholder { color: var(--muted); }
.hdr-find input:focus { box-shadow: none; }
.hdr-find .kbd { background: transparent; border-color: rgba(221, 214, 254, .3); color: rgba(237, 233, 254, .7); }
.hdr-find:focus-within .kbd { border-color: var(--line); color: var(--muted); }
.hdr-send { flex: none; height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px 0 13px; border-radius: var(--r); background: transparent; border: 1.5px solid rgba(255, 255, 255, .8); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.hdr-send:hover, .hdr-send:focus-visible { background: #fff; border-color: #fff; color: var(--ink2); }
.hdr-send .ico { width: 17px; height: 17px; stroke-width: 2.4; }
.hdr-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.hdr-icon:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.hdr-icon[aria-current="page"] { background: rgba(255, 255, 255, .16); }
.hdr-me { flex: none; }
.hdr-me > summary { display: flex; align-items: center; padding: 1px; border-radius: 50%; }
.hdr-me > summary:hover, .hdr-me[open] > summary { background: rgba(255, 255, 255, .09); }
.hdr-av { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.hdr :focus-visible { outline-color: var(--lav); }
.hdr-me .menu-pop { color: var(--ink); top: calc(100% + 10px); min-width: 250px; }
.menu-pop .who .who-org { display: block; margin-top: 3px; font-size: 12px; }
.menu-pop .who-org:empty { display: none; }
.menu-pop a[aria-current="page"] { background: var(--wash); color: var(--p800); }
.menu-pop .menu-meta { margin-left: auto; font-size: 12px; color: var(--muted); }
.menu-sep { height: 1px; background: var(--line2); margin: 4px 0; }
.menu-pop .menu-legal { display: flex; gap: 14px; padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--line2); }
.menu-pop .menu-legal a { display: inline-flex; width: auto; padding: 2px 0; font-size: 11.5px; color: #6b6b76; background: none; }
.menu-pop .menu-legal a:hover { color: var(--ink); background: none; }
.menu-phone-only { display: none !important; }
.menu-pop a.menu-plan { display: flex; align-items: center; gap: 12px; margin: 2px 0; padding: 10px; border-radius: 8px; background: var(--wash); }
.menu-pop a.menu-plan:hover { background: var(--wash2); }
.menu-plan-t { flex: 1; min-width: 0; line-height: 1.3; }
.menu-plan-t b { display: block; font-size: 13.5px; }
.menu-plan-t span { display: block; font-size: 12px; color: var(--muted); }
.menu-plan-a { font-size: 12.5px; font-weight: 600; color: var(--p700); }
.hdr-find input { white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 1000px) {
  .hdr-in { gap: 14px; }
  .hdr-find .kbd { display: none; }
}
.main { min-width: 0; display: flex; flex-direction: column; min-height: calc(100vh - 60px); }
.main > .content { flex: 1; margin: 0 auto; }
.content { width: 100%; max-width: 1280px; padding: 24px 28px 56px; }
.content.narrow { max-width: 880px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.page-head .sub { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.page-head > div { min-width: 0; }
.h-page { font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14px; margin: 0 0 12px; }
.back:hover { color: var(--ink); }
.tabbar { display: none; }

/* Documents table */
.toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 0; flex-wrap: wrap; min-height: 44px; }
.toolbar .meta { margin-left: auto; color: var(--muted); font-size: 13px; }
.toolbar-note { margin: 0; color: var(--muted); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.toolbar .keys { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.toolbar .keys .kbd + span { margin-right: 8px; }
.tbl { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.tbl table { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl thead th { position: sticky; top: 60px; z-index: 2; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 0 14px; height: 36px; border-bottom: 1px solid var(--line); background: #fafafa; white-space: nowrap; }
.tbl thead th:first-child { border-top-left-radius: var(--r-lg); }
.tbl thead th:last-child { border-top-right-radius: var(--r-lg); }
.tbl tbody td { padding: 9px 14px; height: 56px; border-bottom: 1px solid var(--line2); vertical-align: middle; font-size: 14px; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr[data-href] { cursor: pointer; }
.tbl tbody tr:hover { background: #faf9fe; }
.tbl tbody tr:focus-within { background: #faf9fe; }
.doc { display: flex; align-items: center; gap: 12px; min-width: 0; }
.thumb { width: 30px; height: 38px; border-radius: 3px; border: 1px solid var(--line); background: #fff; flex: none; padding: 7px 5px; display: flex; flex-direction: column; gap: 3px; }
.thumb i { display: block; height: 2px; background: #e3e3e6; border-radius: 1px; }
.thumb i:first-child { width: 70%; background: #cfcfd4; }
.doc-n { font-weight: 600; color: var(--ink); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.doc-n:hover { color: var(--p700); text-decoration: underline; }
.doc-s { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.next { display: flex; align-items: center; gap: 12px; }
.steps { display: flex; align-items: center; }
.st { width: 26px; height: 26px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; margin-left: -4px; border: 2px solid #fff; position: relative; }
.st:first-child { margin-left: 0; }
.st.done { background: var(--p700); color: #fff; }
.st.cur { background: #fff; color: var(--p800); box-shadow: inset 0 0 0 2px var(--lav); }
.st.wait { background: #f1f1f2; color: #3f3f3f; }
.st.bad { background: var(--err-wash); color: var(--err); }
.next .t b { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.next .t span { font-size: 12.5px; color: var(--muted); }
.act { color: var(--muted); font-size: 13px; white-space: nowrap; }
.act b { color: var(--ink); font-weight: 500; display: block; }
.act b.warn-text { color: var(--err); display: flex; align-items: center; gap: 4px; }
.acts { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
span.doc-n:hover { color: var(--ink); text-decoration: none; }
.from b { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.from span { font-size: 12.5px; color: var(--muted); }
.cert-later { max-width: 150px; line-height: 1.35; text-align: right; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.pager .pg { display: flex; gap: 6px; }
.empty { padding: 40px 28px; }
.empty .state-mark { margin: 0 0 14px; }
.empty h2 { font-size: 18px; margin: 0 0 6px; overflow-wrap: anywhere; }
/* A long search with no spaces must wrap, not push the page wider than the screen. */
.page-head .sub { overflow-wrap: anywhere; }
.empty p { color: var(--muted); max-width: 440px; margin: 0 0 18px; }

/* Envelope detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.people { list-style: none; margin: 0; padding: 0; }
.person { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line2); }
.person:first-child { border-top: 0; padding-top: 4px; }
.person > div { min-width: 0; }
.person .n { font-weight: 600; overflow-wrap: anywhere; }
.person .e { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.trail { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; font-size: 13px; }
.trail li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.trail li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #d4d4d8; flex: none; }
.trail li.done { color: var(--ink); }
.trail li.done::before { background: var(--p700); }
.trail li.bad { color: var(--err); }
.trail li.bad::before { background: var(--err); }
.trail .lbl { font-weight: 600; }
.trail time { white-space: nowrap; }
.top details.menu { margin-left: auto; }
.mail-state { font-size: 11.5px; font-weight: 600; border-radius: 4px; padding: 1px 6px; background: #f1f1f2; color: #3f3f3f; }
.mail-state.timeline__mail-state--failed, .mail-state.timeline__mail-state--bounced, .mail-state.timeline__mail-state--complaint { background: var(--err-wash); color: var(--err); }
.mail-state.timeline__mail-state--sent, .mail-state.timeline__mail-state--delivered { background: var(--ok-wash); color: var(--ok); }
.message-quote { background: var(--bg); border: 1px solid var(--line2); border-radius: var(--r); padding: 12px 14px; font-size: 14px; white-space: pre-line; margin: 0; }
.side-actions { display: grid; gap: 8px; }
.small { font-size: 13px; }
.void-panel { margin-top: 8px; }
.void-panel > summary { list-style: none; }
.void-panel > summary::-webkit-details-marker { display: none; }
.void-panel[open] > summary { margin-bottom: 12px; }
.void-form { border-top: 1px solid var(--line2); padding-top: 12px; }
.page-head .sub.meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.detail aside .panel + .panel, .detail > div .panel + .panel { margin-top: 16px; }

/* Settings pages */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sig-now { display: flex; align-items: center; justify-content: center; min-height: 110px; border: 1px solid var(--line); border-bottom: 2px solid var(--lav); border-radius: var(--r); background: #fff; padding: 12px; margin: 0 0 18px; }
.sig-now img { max-height: 90px; }
.sig-now .none { color: var(--muted); font-size: 14px; }
.seg { display: inline-grid; grid-auto-flow: column; gap: 0; padding: 0; background: #fff; border: 1px solid rgba(26, 26, 26, .22); border-radius: var(--r); overflow: hidden; margin: 0 0 16px; }
.seg-opt { position: relative; display: block; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.seg label { display: block; margin: 0; padding: 8px 14px; border-radius: 0; font-weight: 600; font-size: 13.5px; cursor: pointer; color: var(--muted); }
.seg-opt + .seg-opt label { border-left: 1px solid rgba(26, 26, 26, .16); }
.seg input:checked + label { background: var(--p700); color: #fff; }
.seg input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 1px; }
.sig-preview { min-height: 72px; display: flex; align-items: center; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 34px; color: var(--ink); overflow: hidden; white-space: nowrap; margin: 10px 0 0; }
.sig-pad { display: block; width: 100%; height: 180px; background: #fff; border: 1px solid var(--field); border-radius: var(--r); touch-action: none; cursor: crosshair; }
.sig-pad.ini { max-width: 280px; }
.pad-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 13px; color: var(--muted); }
.sig-status { font-size: 14px; font-weight: 500; margin: 12px 0 0; min-height: 1.5em; }
.sig-status--success { color: var(--ok); }
.sig-status--error { color: var(--err); }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0 0; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.plan { padding: 22px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.plan:first-child { border-left: 0; }
.plan.on { background: var(--wash); }
.plan h3 { font-size: 18px; }
.plan .for { color: var(--muted); font-size: 14px; margin: 0; }
.plan ul { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 8px; font-size: 14px; }
.plan li { display: flex; gap: 8px; }
.plan li .ico { color: var(--p700); width: 16px; height: 16px; margin-top: 2px; }
.plan .foot { margin-top: auto; }
.plan form { margin: 0; }
.plans + p { margin-top: 14px; }
.sig-status:empty { min-height: 0; margin: 0; }

/* First run (empty Documents) */
.first-run { padding: 28px; }
.first-run h2 { font-size: 22px; letter-spacing: -.025em; margin: 0 0 4px; }
.fr-steps { list-style: none; margin: 20px 0 6px; padding: 0; border-top: 1px solid var(--line2); max-width: 640px; }
.fr-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line2); }
.fr-steps .n { width: 28px; height: 28px; border-radius: var(--r); background: var(--p700); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.fr-steps b { display: block; font-size: 15px; }
.fr-steps span:not(.n) { color: var(--muted); font-size: 14px; }
.search .search-kbd { flex: none; }
.search:focus-within .search-kbd { visibility: hidden; }
.lbl-s { display: none; }

@media (max-width: 1100px) {
  .col-act { display: none; }
  .detail { grid-template-columns: minmax(0, 1fr); }
}
/* The documents table becomes stacked cards before its action buttons run out of room. */
@media (max-width: 1024px) {
  .tbl { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .tbl table, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl thead th { position: static; }
  .tbl tbody tr { background: #fff; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 14px 2px; margin: 0; display: grid; gap: 10px; }
  .tbl tbody tr:first-child { border-top: 0; }
  .tbl tbody td { height: auto; }
  .act { white-space: normal; }
  .act b { display: inline; margin-right: 4px; }
  .act b.warn-text { display: inline-flex; }
  .tbl tbody tr:hover { background: #fff; }
  .tbl tbody td { padding: 0; border: 0; }
  .doc-n { max-width: 100%; white-space: normal; }
  .acts { justify-content: flex-start; flex-wrap: wrap; }
  .cert-later { max-width: none; text-align: left; }
  .from b { max-width: 100%; }
  .pager { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
  .tbl { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 12px; }
}
@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .auth-side { padding: 18px 20px; min-height: 64px; position: relative; height: auto; }
  .auth-stage, .auth-side .auth-ink { display: none; }
  .auth-side .auth-ink-bar { display: block; }
  .auth-main { padding: 8px 20px 28px; }
  .auth-foot { justify-content: center; text-align: center; }
  /* Top of the screen on a phone, not floating in the middle: sign in and
     create account then start in the same place, so switching doesn't jump. */
  .auth-form { padding: 20px 0 28px; margin: 0 auto; }

  .hdr-in { padding: 0 16px; gap: 10px; height: 56px; }
  .hdr .brand .wordmark { display: none; }
  .hdr-tabs, .hdr-icon { display: none; }
  .hdr-find { max-width: none; margin-left: 4px; }
  .hdr-find .kbd { display: none; }
  .hdr-send { padding: 0; width: 38px; justify-content: center; }
  .hdr-send span { display: none; }
  /* Each thing once on a phone: Send is a tab in the bar at the bottom, so the
     header's "+" goes; the account menu stays up here, so the bar has no
     Account tab (owner, 2026-10-06). The Send editor's own button in its
     header is a <button>, not this link, and is untouched. */
  a.hdr-send { display: none; }
  .hdr-me > summary { padding: 3px; }
  .menu-phone-only { display: flex !important; }
  .main { min-height: 0; }
  .tbl thead th { top: 56px; }
  .page-head .btn-primary { display: none; }
  .content { padding: 18px 16px 104px; }
  .page-head h1 { font-size: 22px; }
  .notice-bar { padding: 10px 16px; }
  .tabbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ink2); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 50px; justify-content: center; font-size: 11.5px; font-weight: 600; color: var(--side-ink); text-decoration: none; border-radius: var(--r); }
  .tabbar a[aria-current="page"] { background: #fff; color: var(--p800); }
  .tabbar .ico { width: 21px; height: 21px; }
  .tabbar .fab { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); color: #fff; }
  .tabbar .fab[aria-current="page"] { background: #fff; box-shadow: none; color: var(--p800); }
  .tabbar :focus-visible { outline-color: #fff; }
  .tabbar .tab-n { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; padding: 0 4px; border-radius: 4px; background: var(--lav); color: var(--ink2); font-size: 10.5px; line-height: 16px; text-align: center; }

  .toolbar .keys { display: none; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan { border-left: 0; border-top: 1px solid var(--line); }
  .plan:first-child { border-top: 0; }
  .legal { padding: 24px 20px; }
  .sup { padding: 24px 20px; }
  .legal-toc ol { columns: 1; }
  .card { padding: 24px 20px; }
  .pub-main { padding: 28px 16px 48px; }
  .pub-top { padding: 0 16px; }
  .panel { padding: 18px; }
  .btn, .btn-sm { min-height: 44px; }
  .btn-icon.btn-sm { width: 44px; min-height: 44px; }
  /* Show/hide toggles are tapped like buttons: the same finger-sized height. */
  .attest-disclosure > summary, .acct-more > summary { display: flex; align-items: center; min-height: 44px; }
  .lbl-s { display: inline; }
  .btn-icon:has(.lbl-s) { width: auto; padding: 0 12px; }
  .search .search-kbd { display: none; }
  .first-run { padding: 20px 18px; }
  .first-run .card-actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Team page (app_team.html) */
.team-invite { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: end; }
.team-invite .field { margin: 0; }
.team-invite.org-name-form { grid-template-columns: minmax(0, 1fr) auto; }
.team-invite .team-org-first { grid-column: 1 / -1; }
.team-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.team-role { display: flex; gap: 6px; align-items: center; }
.team-role select, .team-invite select { min-height: 32px; }
.team-remove > summary { list-style: none; cursor: pointer; }
.team-remove > summary::-webkit-details-marker { display: none; }
.team-remove[open] form { margin-top: 8px; max-width: 260px; }
.team-note { margin-top: 12px; }
@media (max-width: 560px) {
  .team-invite { grid-template-columns: 1fr; }
  .person .team-actions { grid-column: 2 / -1; justify-content: flex-start; }
  /* A status tag goes under the name and address, so a long address keeps the
     whole width instead of breaking mid-word beside it. */
  .people .person > .pill { grid-column: 2 / -1; justify-self: start; margin-top: -4px; }
}

/* A link that belongs to one field, under it on the right (Forgot password?). */
.field-aside { margin: 6px 0 0; text-align: right; font-size: 14px; }
.who-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin: 0 0 16px; font-size: 15px; overflow-wrap: anywhere; }
.who-row .linklike { background: none; border: 0; padding: 0; color: var(--p700); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ══ HOME (app_home.html) + Activity ═════════════════════════════════════ */
/* Spec: docs/design/APP-HOME-AND-SHELL-SPEC.md §3. */
.content.home { max-width: 1280px; }
.hm-hi { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 4px 0 20px; }
.hm-hi h1 { font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.hm-hi span { color: var(--muted); font-size: 14.5px; }
.hm { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.hm-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.hm-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
.hm-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.hm-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.hm-h h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.hm-h a, .hm-box a, .hm-also a { color: var(--p700); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.hm-h a:hover, .hm-box a:hover, .hm-also a:hover { text-decoration: underline; }
.hm-k { margin: 0; font-size: 13px; font-weight: 600; color: var(--p700); }
.hm-warn { color: var(--warn); font-weight: 600; }

/* Page glyph: a sheet with text lines and one line per signer at the foot. */
.hm-pg { position: relative; display: block; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(26, 26, 26, .08), 0 6px 16px rgba(46, 16, 101, .10); aspect-ratio: 8.5 / 11; padding: 14% 12% 0; }
.hm-pg.has-thumb { padding: 0; overflow: hidden; }
.hm-thumb { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hm-pg.has-thumb .hm-sl { padding: 6px 8% 0; left: 0; right: 0; bottom: 0; padding-bottom: 8%; background: linear-gradient(rgba(255, 255, 255, 0), #fff 40%); }
.hm-pg > i { display: block; height: 5px; border-radius: 2px; background: #ebebef; margin: 0 0 8%; }
.hm-pg > i:nth-child(2n) { width: 82%; }
.hm-pg > i:nth-child(3n) { width: 64%; }
.hm-sl { position: absolute; left: 12%; right: 12%; bottom: 10%; display: flex; gap: 6px; align-items: flex-end; }
.hm-sl span { flex: 1; height: 12px; border-bottom: 1.5px solid #cfcfd6; }
.hm-sl span.s { border-bottom-color: var(--p700); background: linear-gradient(transparent 55%, var(--wash2) 55%); }
.hm-sl span.n { border-bottom: 1.5px dashed var(--p600, #6d28d9); }
.hm-sl em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--muted); line-height: 1; }
.hm-rib { position: absolute; top: 0; right: 10%; width: 12%; min-width: 10px; aspect-ratio: 14 / 22; background: var(--p700); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); }
.hm-pg-big { width: 64px; flex: none; padding: 12px 8px 0; }
.hm-pg-big > i { height: 4px; margin-bottom: 6px; }
.hm-pg-big .hm-sl { left: 8px; right: 8px; bottom: 9px; }
.hm-pg-big .hm-sl span { height: 9px; }

/* Your turn band */
.hm-turn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 20px; background: linear-gradient(90deg, var(--wash2), #fff 72%); border-color: rgba(91, 33, 182, .24); }
.hm-turn-t { min-width: 0; }
.hm-turn-title { display: block; margin-top: 2px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-turn-title:hover { color: var(--p700); }
.hm-turn-from { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.hm-turn-a { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hm-also { font-size: 12.5px; color: var(--muted); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-clear { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border: 1px solid var(--line2); background: #fff; border-radius: 8px; color: var(--muted); font-size: 14px; }
.hm-clear .ico { color: var(--ok); }

/* Recent documents shelf */
.hm-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 168px)); justify-content: space-between; gap: 18px; padding: 18px; }
.hm-doc { display: block; min-width: 0; color: var(--ink); text-decoration: none; }
.hm-doc .hm-pg { transition: transform .15s ease, box-shadow .15s ease; }
.hm-doc:hover .hm-pg { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(26, 26, 26, .06), 0 14px 26px rgba(46, 16, 101, .16); }
.hm-doc:focus-visible { outline: 2px solid var(--p700); outline-offset: 4px; border-radius: 4px; }
.hm-doc-n { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-doc-s { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-doc-s::before { content: ""; display: inline-block; vertical-align: 1px; margin-right: 6px; width: 7px; height: 7px; border-radius: 2px; background: #d4d4d8; }
.hm-doc-s.hm-ok { color: var(--ok); } .hm-doc-s.hm-ok::before { background: var(--ok); }
.hm-doc-s.hm-wait::before { background: var(--p700); }
.hm-doc-s.hm-bad { color: var(--err); } .hm-doc-s.hm-bad::before { background: var(--err); }
.hm-new .hm-doc-s::before { display: none; }
.hm-new .hm-pg { display: grid; place-items: center; align-content: center; gap: 8px; padding: 0; background: var(--wash); border: 1.5px dashed rgba(91, 33, 182, .4); box-shadow: none; color: var(--p700); text-align: center; }
.hm-new:hover .hm-pg { background: #fff; border-color: var(--p700); }
.hm-plus { width: 34px; height: 34px; border-radius: 8px; background: var(--p700); color: #fff; display: grid; place-items: center; }
.hm-plus .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.hm-new-t { font-size: 12px; font-weight: 600; line-height: 1.35; }
.hm-first { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 22px; }
.hm-first h3 { font-size: 16px; margin: 0 0 4px; }
.hm-first p { margin: 0; color: var(--muted); font-size: 14px; max-width: 520px; }
.hm-first-a { display: flex; gap: 10px; flex-wrap: wrap; }
/* On a phone the two buttons stack at the card's full width, as on Documents,
   instead of two different widths one above the other. */
@media (max-width: 560px) {
  .hm-first-a { flex-direction: column; width: 100%; }
  .hm-first-a .btn { width: 100%; justify-content: center; }
}

/* Today / Activity feed */
.hm-feed { padding: 4px 18px; }
.hm-ev { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line2); color: var(--ink); text-decoration: none; font-size: 14px; }
.hm-ev:first-child { border-top: 0; }
.hm-ev:hover .hm-ev-t { color: var(--p800); }
.hm-ev-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-ev-t b { font-weight: 600; }
.hm-ev-tm { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.hm-ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: #f1f1f4; color: var(--muted); }
.hm-ic-signed, .hm-ic-completed { background: var(--ok-wash); color: var(--ok); }
.hm-ic-opened { background: var(--wash); color: var(--p700); }
.hm-ic-declined { background: var(--err-wash); color: var(--err); }
.hm-ic-expiring { background: var(--warn-wash); color: var(--warn); }
.hm-ev-more { display: block; color: var(--p700); font-weight: 600; font-size: 13.5px; }
.hm-quiet { margin: 0; padding: 14px 0; color: var(--muted); font-size: 14px; }

/* Right rail */
.hm-box { padding: 16px 18px; }
.hm-box-h { display: flex; align-items: baseline; justify-content: space-between; font-size: 13.5px; font-weight: 700; margin: 0 0 12px; }
.hm-box-h span { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.hm-big { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.hm-big small { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.hm-bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; margin: 14px 0 12px; }
.hm-bar i { display: block; min-width: 4px; }
.b-s { background: var(--p700); } .b-o { background: var(--lav); } .b-d { background: #d4d4d8; } .b-x { background: #f0b4b4; }
.hm-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.hm-legend a { display: flex; align-items: center; gap: 9px; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; color: var(--ink) !important; font-weight: 500 !important; font-size: 13.5px !important; }
.hm-legend a:hover { background: var(--hover); text-decoration: none !important; }
.hm-legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.hm-legend b { margin-left: auto; font-weight: 700; }
.hm-meter { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line2); }
.hm-meter-t { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); }
.hm-meter-b { height: 6px; border-radius: 3px; background: #ececf0; margin-top: 8px; overflow: hidden; }
.hm-meter-b i { display: block; height: 100%; background: var(--p700); border-radius: 3px; }
.hm-meter-n { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.hm-slow { display: flex; align-items: center; gap: 12px; }
.hm-slow-t { flex: 1; min-width: 0; color: var(--ink) !important; font-weight: 400 !important; }
.hm-slow-t b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-slow-t span { font-size: 12.5px; color: var(--warn); font-weight: 600; }
.hm-slow form { margin: 0; }
.hm-done { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.hm-team { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hm-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; background: var(--p700); }
.hm-av-1 { background: #0f766e; } .hm-av-2 { background: #be185d; } .hm-av-3 { background: #1d4ed8; } .hm-av-4 { background: #b45309; } .hm-av-5 { background: #4d7c0f; }
.hm-av-more { background: #f1f1f4; color: var(--muted); }
.hm-team-a { margin-left: auto; }
.hm-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hm-plan b { display: block; font-size: 14px; }
.hm-plan span { display: block; font-size: 12.5px; color: var(--muted); }

.act-day { margin: 0 0 20px; }
.act-day h2 { font-size: 13.5px; font-weight: 700; margin: 0 0 8px; color: var(--muted); }
.seg-links { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.seg-links a { padding: 7px 12px; font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; }
.seg-links a[aria-current="page"] { background: var(--wash); color: var(--p800); font-weight: 600; }

@media (max-width: 1180px) {
  .hm { grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
  .hm-shelf { grid-template-columns: repeat(4, minmax(0, 168px)); }
  .hm-shelf > :nth-child(5) { display: none; }
}
@media (max-width: 980px) {
  .hm { grid-template-columns: minmax(0, 1fr); }
  .hm-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-shelf { grid-template-columns: repeat(4, minmax(0, 168px)); }
  .hm-shelf > :nth-child(5) { display: none; }
}
@media (max-width: 860px) {
  .hm-hi h1 { font-size: 21px; }
  .hm-turn { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
  .hm-turn-a { grid-column: 1 / -1; align-items: stretch; }
  .hm-also { max-width: none; }
  .hm-shelf { grid-template-columns: repeat(3, minmax(0, 168px)); gap: 14px; padding: 14px; }
  .hm-shelf > :nth-child(4) { display: none; }
  .hm-rail { grid-template-columns: minmax(0, 1fr); }
  .hm-feed { padding: 2px 14px; }
  .hm-ev { grid-template-columns: 28px minmax(0, 1fr); }
  .hm-ev-tm { grid-column: 2; margin-top: -6px; }
  .hm-ev-t { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  .hdr-in { padding: 0 12px; gap: 8px; }
  .hdr .brand svg { width: 26px; height: 26px; }
  .hdr-find { padding: 0 8px; gap: 6px; }
  .hdr-send { width: 36px; height: 36px; }
  .content { padding-left: 12px; padding-right: 12px; }
  .hm-turn { gap: 12px; }
  .hm-pg-big { width: 48px; }
  .tabbar a { font-size: 10.5px; }
}
@media (max-width: 480px) {
  .hm-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .hm-shelf > :nth-child(3) { display: none; }
}

/* ══ DOCUMENTS LIST (app_inbox.html, app_signed.html) ════════════════════ */
/* Every row has the same shape: page · document · where it stands · last
   activity · ONE action (same width everywhere) · More. The action is the
   only thing that changes, and only Sign is purple. */
.dl-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-top: 14px; }
.dl-head, .dl-row { display: grid; grid-template-columns: 34px minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(0, 1.2fr) 164px; column-gap: 16px; align-items: center; }
.dl-head { padding: 0 18px; height: 38px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dl-head > span:first-child { grid-column: 1 / 3; }
.dl { list-style: none; margin: 0; padding: 0; }
.dl-row { padding: 12px 18px; border-top: 1px solid var(--line2); min-height: 68px; }
.dl-row:first-child { border-top: 0; }
.dl-row[data-href] { cursor: pointer; }
.dl-row:hover { background: #fbfaff; }
.dl-row.dl-mine { background: linear-gradient(90deg, var(--wash), #fff 45%); }
.hm-pg.dl-pg { width: 34px; padding: 6px 5px 0; box-shadow: 0 1px 2px rgba(26, 26, 26, .1), 0 3px 8px rgba(46, 16, 101, .08); }
.hm-pg.dl-pg > i { height: 2px; margin-bottom: 3px; }
.hm-pg.dl-pg .hm-sl { left: 5px; right: 5px; bottom: 5px; gap: 2px; }
.hm-pg.dl-pg .hm-sl span { height: 4px; border-bottom-width: 1.5px; }
.hm-pg.dl-pg .hm-sl em { display: none; }
.hm-pg.dl-pg .hm-rib { right: 4px; width: 6px; min-width: 6px; }
.dl-doc, .dl-state, .dl-act { min-width: 0; line-height: 1.35; }
.dl-title { display: block; font-weight: 600; font-size: 14.5px; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-title:hover { color: var(--p700); text-decoration: underline; text-underline-offset: 3px; }
.dl-meta, .dl-state > span, .dl-act > span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-tag { color: var(--p800); font-weight: 600; }
.dl-st { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-st::before { content: ""; display: inline-block; vertical-align: 1px; width: 7px; height: 7px; margin-right: 7px; border-radius: 2px; background: #d4d4d8; }
.dl-st-you { color: var(--p800); } .dl-st-you::before { background: var(--p700); }
.dl-st-wait::before { background: var(--lav); }
.dl-st-ok { color: var(--ok); } .dl-st-ok::before { background: var(--ok); }
.dl-st-bad { color: var(--err); } .dl-st-bad::before { background: var(--err); }
.dl-warn { color: var(--warn); font-weight: 600; }
.dl-st.dl-st-inline { display: inline; font-size: 12.5px; }
.dl-from { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-pop .menu-note { display: block; padding: 8px 10px; font-size: 12.5px; color: var(--muted); }
.dl-act b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-do { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.dl-do .inline-form { margin: 0; }
.dl-btn { width: 118px; justify-content: center; }
.dl-more > summary { width: 34px; }
.dl-more-pad { width: 34px; flex: none; }
.dl-more .menu-pop { min-width: 220px; z-index: 30; }
.menu-pop form { margin: 0; }
.menu-pop form button { width: 100%; }
.menu-pop .menu-danger { color: var(--err); }
.menu-pop .menu-danger:hover { background: var(--err-wash); }
.dl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); min-height: 48px; }
.dl-foot .pg { display: flex; gap: 8px; }

@media (max-width: 1180px) {
  .dl-head, .dl-row { grid-template-columns: 34px minmax(0, 2fr) minmax(0, 1.5fr) 164px; }
  .dl-c-act { display: none; }
}
@media (max-width: 760px) {
  .dl-head { display: none; }
  .dl-row { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "pg doc" "pg state" ". do"; row-gap: 8px; padding: 14px; }
  .dl-row > .hm-pg { grid-area: pg; align-self: start; }
  .dl-doc { grid-area: doc; } .dl-state { grid-area: state; } .dl-do { grid-area: do; justify-content: flex-start; }
  .dl-btn { width: auto; min-width: 118px; }
  .dl-foot { padding: 10px 14px; }
}

/* Document page: one sentence per signer instead of Mailed / Viewed / Signed steps. */
.sgn-st { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.sgn-st b { color: var(--ink); font-weight: 600; }
.sgn-st::before { content: ""; display: inline-block; vertical-align: 1px; width: 7px; height: 7px; margin-right: 8px; border-radius: 2px; background: #d4d4d8; }
.sgn-st.sgn-now::before { background: var(--p700); }
.sgn-st.sgn-ok b { color: var(--ok); } .sgn-st.sgn-ok::before { background: var(--ok); }
.sgn-st.sgn-bad b { color: var(--err); } .sgn-st.sgn-bad::before { background: var(--err); }
.sgn-mail { margin: 4px 0 0 15px; font-size: 12.5px; color: var(--muted); }
.sgn-mail.timeline__mail-state--failed, .sgn-mail.timeline__mail-state--bounced, .sgn-mail.timeline__mail-state--complaint { color: var(--err); font-weight: 600; }
.sgn-fix { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 15px; align-items: center; }
.sgn-fix input { flex: 1 1 200px; min-width: 0; }
.dl-filter { display: flex; align-items: center; gap: 8px; margin: 14px 0 12px; font-size: 13.5px; color: var(--muted); }
.dl-filter select { width: auto; min-height: 32px; padding: 4px 28px 4px 8px; font-size: 13.5px; }
/* What the sender can do for one signer: a row of small buttons, and under it
   the one line of state a copied link adds. What a button produces (a code, a
   link) is shown once, in a .once-dlg. */
.sgn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0 15px; }
.sgn-link-on { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 6px 0 0 15px; font-size: 12.5px; color: var(--muted); }
.sgn-link-on[hidden] { display: none; }
.sgn-link-on .linklike { font-size: 12.5px; }
.once-dlg .once-who { margin: 0 0 12px; font-size: 13.5px; overflow-wrap: anywhere; }
.once-dlg .once-lead { margin: 0 0 8px; font-weight: 600; }
.once-dlg .once-facts { margin: 0 0 4px; font-size: 13.5px; }
.once-field { display: flex; align-items: stretch; gap: 8px; }
.once-field input { flex: 1 1 auto; min-width: 0; font-size: 13.5px; text-overflow: ellipsis; }
/* The code reads the way the Send screen shows it (send.css .code-read), larger. */
.once-code { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 12px; border-radius: var(--r); background: var(--wash); color: var(--p800); user-select: all; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 22px; font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
/* Passing a code along: Copy message and the Message link, under the code. */
.once-pass { display: flex; gap: 8px; margin: 10px 0 0; }
.once-pass [data-once-copy-message] { flex: 1 1 auto; }
.once-pass [data-once-message] { flex: none; width: 44px; justify-content: center; }
.once-pass a.btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.once-dlg .once-msg { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.once-dlg .once-msg.is-ok { color: var(--ok); font-weight: 600; }
.once-dlg .once-msg.is-bad { color: var(--err); font-weight: 600; }
.sgn-n { align-self: start; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--wash); color: var(--p800); font-size: 12px; font-weight: 700; display: grid; place-items: center; }

/* ══ DOCUMENT PAGE (app_envelope_detail.html) ════════════════════════════ */
/* The document (or its certificate) as pages on the left; status, signers and
   details on the right. One main action + More, as in the list. */
.content.doc-page { max-width: 1320px; }
.dp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.dp-title { min-width: 0; }
.dp-title h1 { font-size: 24px; font-weight: 700; letter-spacing: -.025em; overflow-wrap: anywhere; }
.dp-sub { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.dp-sub .dl-st { display: inline; }
.dp-dot { color: var(--muted); }
.dp-do { display: flex; align-items: center; gap: 8px; flex: none; }
.dp-do .inline-form { margin: 0; }
.dp-do .dl-more > summary { width: 40px; }
/* Remind with its options (urgent, a note): the options open from a small button beside it. */
.dp-do .remind-form { display: flex; align-items: center; gap: 8px; }
.dp-do .remind-opts > summary { width: 40px; }
.remind-fields { display: grid; gap: 10px; }
.menu-pop.remind-fields { min-width: 260px; padding: 12px; z-index: 30; }
.menu-pop > .remind-fields, .menu-pop form > .remind-fields { padding: 4px 10px 8px; gap: 8px; }
.dp { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.dp-view { background: #e9e7f0; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.dp-bar { position: sticky; top: 60px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; background: #fff; border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; }
.dp-tabs { display: flex; gap: 4px; min-width: 0; overflow-x: auto; }
.dp-tabs a { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; }
.dp-tabs a:hover { background: var(--hover); color: var(--ink); }
.dp-tabs a[aria-current="page"] { background: var(--wash); color: var(--p800); font-weight: 600; }
.dp-pages { display: grid; gap: 18px; padding: 18px; justify-items: center; }
.dp-page { margin: 0; width: 100%; max-width: 820px; }
.dp-page img { display: block; position: relative; width: 100%; height: auto; box-shadow: 0 1px 2px rgba(26, 26, 26, .12), 0 8px 24px rgba(46, 16, 101, .12); }
.dp-page figcaption { margin-top: 6px; text-align: center; font-size: 12px; color: var(--muted); }
.dp-empty { margin: 40px 0; color: var(--muted); }
.dp-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; position: sticky; top: 76px; }
.dp-side .panel + .panel { margin-top: 0; }

@media (max-width: 1100px) {
  /* One column: who is signing, then the document, then the rest. */
  .dp { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dp-side { display: contents; }
  .dp-side > [aria-labelledby="signers-h"] { order: -1; }
}
@media (max-width: 860px) {
  .dp-head { flex-direction: column; }
  .dp-do { width: 100%; }
  .dp-do > .btn, .dp-do .inline-form { flex: 1; }
  .dp-do .inline-form .btn { width: 100%; }
  .dp-do .remind-form > .btn { flex: 1; }
  .dp-do .remind-form .remind-opts > summary { width: 40px; }
  .dp-bar { top: 56px; padding: 6px; }
  .dp-tabs a { padding: 0 10px; }
  .dp-tabs .ico { display: none; }
  .dp-pages { padding: 12px; gap: 12px; }
}

/* Where each signer's fields sit, drawn over the page. */
.dp-sheet { position: relative; background: #fff; }
.dp-sheet::before { content: "Loading page…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.dp-mark { position: absolute; border: 2px solid; border-radius: 3px; pointer-events: none; }
.dp-mark-now { border-color: var(--p700); border-style: dashed; background: rgba(91, 33, 182, .07); }
.dp-mark-later { border-color: #a1a1aa; border-style: dashed; background: rgba(161, 161, 170, .06); }
.dp-mark-signed { border-color: var(--ok); background: rgba(21, 128, 61, .05); }
.dp-mark-declined { border-color: var(--err); border-style: dashed; }
.dp-chip { position: absolute; left: -2px; bottom: calc(100% + 3px); display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% + 4px); padding: 2px 7px; border-radius: 4px; font-size: 11.5px; font-weight: 600; line-height: 18px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-mark-now .dp-chip { background: var(--p700); }
.dp-mark-later .dp-chip { background: #71717a; }
.dp-mark-signed .dp-chip { background: var(--ok); }
.dp-mark-declined .dp-chip { background: var(--err); }
.dp-chip .ico { width: 12px; height: 12px; stroke-width: 3; flex: none; }
/* A tag that would cover a close neighbour's tag moves (see _place_tags): below
   its mark, or one tag height further out: the tag (22 px) plus its gap (3), +1. */
.dp-chip-below { bottom: auto; top: calc(100% + 3px); }
.dp-chip-up2 { bottom: calc(100% + 26px); }
.dp-chip-down2 { bottom: auto; top: calc(100% + 26px); }
.dp-chip { text-overflow: ellipsis; }
.dp-key { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 18px 0; font-size: 12.5px; color: var(--muted); }
.dp-key span::before { content: ""; display: inline-block; vertical-align: -2px; width: 12px; height: 12px; margin-right: 6px; border: 2px solid; border-radius: 3px; }
.dp-key .k-signed::before { border-color: var(--ok); }
.dp-key .k-now::before { border-color: var(--p700); border-style: dashed; }
.dp-key .k-later::before { border-color: #a1a1aa; border-style: dashed; }
@media (max-width: 480px) {
  .dp-chip { font-size: 10px; padding: 0 4px; line-height: 16px; }
  .dp-chip-up2 { bottom: calc(100% + 22px); }
  .dp-chip-down2 { top: calc(100% + 22px); }
  .dp-chip-x { display: none; }
  .dp-bar { flex-wrap: wrap; }
  .dp-tabs { flex: 1 1 100%; }
  .dp-bar > .btn { flex: 1 1 100%; justify-content: center; }
  .dp-key { gap: 10px; }
  .dp-jump { margin-left: 0; flex-basis: 100%; }
  .dp-page { scroll-margin-top: 190px; }
}
.dp-key { align-items: center; }
.dp-jump { margin-left: auto; font-weight: 600; color: var(--p700); text-decoration: none; }
.dp-jump:hover { text-decoration: underline; }
.dp-page { scroll-margin-top: 120px; }
.dp-chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ ACCOUNT PAGES: Team · Plan & billing · Your signature ════════════════ */
/* Spec: docs/design/APP-HOME-AND-SHELL-SPEC.md §5. Same cards and headings as
   Home (.hm-card, .hm-h, .hm-k). */
.content.acct { max-width: 1040px; }
.acct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 20px; }
.acct-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.acct-head p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; overflow-wrap: anywhere; }
.acct-head + .form-ok, .acct-head + .form-error, .acct-head + .notice { margin: 0 0 16px; }
.content.acct > * + .hm-card, .content.narrow > * + .hm-card, .content.acct > * + .acct-more { margin-top: 16px; }
.acct-sec, .acct-offer, .tm-invite { padding: 18px 20px; }
.acct-ticks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.acct-ticks li { display: flex; align-items: flex-start; gap: 8px; }
.acct-ticks .ico { color: var(--p700); flex: none; margin-top: 2px; }
.acct-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.acct-row .field { margin: 0; }
/* A second setting in the same card, set apart from the first. */
.acct-row + .acct-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line2); }
.email-from { border: 0; margin: 0; padding: 0; min-width: 0; }
.email-from legend { padding: 0; margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.email-from .check + .check { margin-top: 6px; }
.acct-row > .btn { margin-bottom: 0; }
.acct-row .help-text { position: absolute; }
.acct-sec .acct-row .field { position: relative; padding-bottom: 20px; }
.acct-sec .acct-row > .btn { margin-bottom: 20px; }
.acct-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; background: linear-gradient(90deg, var(--wash2), #fff 70%); border-color: rgba(91, 33, 182, .24); }
.acct-offer h2 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.acct-offer p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; max-width: 560px; }
.acct-more { margin-top: 12px; font-size: 14px; }
.acct-more > summary { cursor: pointer; color: var(--p700); font-weight: 600; width: max-content; }
.acct-more[open] > summary { margin-bottom: 10px; }

/* Team */
.tm-invite-f { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 12px; align-items: end; }
.tm-invite-f .field { margin: 0; }
.tm-invite-f .tm-org-first { grid-column: 1 / -1; }
.tm-invite-a { display: flex; gap: 8px; }
.tm-invite > .help-text { margin-top: 10px; }
.tm-list { overflow: visible; }
.tm-table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.tm-table tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; }
.tm-tools { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line2); }
.tm-find { display: flex; align-items: center; gap: 8px; flex: 0 1 320px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); color: var(--muted); margin: 0; }
.tm-find:focus-within { border-color: var(--p700); box-shadow: 0 0 0 3px rgba(91, 33, 182, .15); }
.tm-find input { border: 0; outline: 0; box-shadow: none; min-height: 0; padding: 0; flex: 1; min-width: 0; font-size: 14px; background: transparent; }
.tm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tm-table th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.tm-table td { padding: 12px 16px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.tm-table tbody tr:last-child td { border-bottom: 0; }
.tm-table tbody tr:hover { background: #fcfbfe; }
.tm-table .num { text-align: right; font-variant-numeric: tabular-nums; width: 70px; }
/* max-width 0 on the cell is what lets a long name or address end in an ellipsis
   instead of widening the table. */
.tm-pc { width: 46%; max-width: 0; }
.tm-p { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tm-p > div { min-width: 0; }
.tm-p .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-p .n { display: flex; gap: 4px; }
.tm-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tm-you { flex: none; }
.tm-p .e { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-av-mail { background: var(--bg) !important; color: var(--muted) !important; border: 1px dashed var(--line); }
.tm-r { width: 130px; }
.tm-r select { width: auto; min-width: 112px; min-height: 32px; padding: 3px 28px 3px 8px; font-size: 13.5px; }
.tm-s { width: 190px; }
.tm-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.tm-dot.ok { background: var(--ok); }
.tm-dot.wait { background: var(--warn); }
.tm-sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.tm-a { width: 48px; text-align: right; }
.tm-menu .menu-pop { min-width: 240px; }
.tm-menu form { margin: 0; }
.tm-menu .danger { color: var(--err); }
.tm-confirm { padding: 6px; }
.tm-confirm p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink); }
.tm-confirm .btn { width: 100%; justify-content: center; }
.tm-none { padding: 16px; margin: 0; }
.tm-roles { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.tm-roles dt { font-weight: 600; }
.tm-roles dd { margin: 0; color: var(--muted); }

/* Plan & billing */
.pb-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 20px 22px; }
.pb-now h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0 6px; }
.pb-d { margin: 0; color: var(--muted); font-size: 14px; }
.pb-d a { color: var(--p700); font-weight: 600; }
.pb-meter { display: flex; gap: 6px; margin: 6px 0 8px; max-width: 280px; }
.pb-meter span { flex: 1; height: 8px; border-radius: 3px; background: #ebe8f5; }
.pb-meter span.on { background: var(--p700); }
.pb-now-a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pb-now-a form { margin: 0; }
.pb-h2 { font-size: 16px; font-weight: 700; margin: 28px 0 12px; }
.pb-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pb-plan { display: flex; flex-direction: column; padding: 18px 20px; }
.pb-plan.is-current { border-color: var(--p700); box-shadow: 0 0 0 1px var(--p700); }
.pb-plan.is-wanted { border-color: rgba(91, 33, 182, .45); background: linear-gradient(180deg, var(--wash2), #fff 45%); }
.pb-plan-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pb-plan h3 { font-size: 17px; font-weight: 700; }
.pb-tag { font-size: 12px; font-weight: 600; color: var(--p800); background: var(--wash); border-radius: 4px; padding: 2px 8px; }
.pb-tag-w { color: #fff; background: var(--p700); }
.pb-price { margin: 8px 0 2px; color: var(--muted); font-size: 14px; }
.pb-price b { color: var(--ink); font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-right: 2px; }
.pb-for { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.pb-plan .acct-ticks { flex: 1; align-content: start; }
.pb-plan-f { margin-top: 18px; min-height: 40px; display: flex; align-items: center; }
.pb-plan-f form { width: 100%; margin: 0; }
.pb-note { margin: 14px 0 0; }

/* Your signature */
.ys-now { padding: 0; overflow: hidden; }
.ys-sheet { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 28px; padding: 28px 32px 22px; background: linear-gradient(180deg, #fbfaff, #fff); }
.ys-cell { min-width: 0; }
.ys-mark { height: 92px; display: flex; align-items: flex-end; border-bottom: 1.5px solid #cfcfd6; padding: 0 4px 6px; }
.ys-mark img { max-height: 84px; max-width: 100%; object-fit: contain; object-position: left bottom; }
.ys-cell-ini .ys-mark img { max-height: 62px; }
.ys-empty { color: #a1a1aa; font-size: 14px; padding-bottom: 4px; }
.ys-k { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ys-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line2); }
.ys-sp { flex: 1; }
.ys-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ys-edit { padding: 0; overflow: hidden; }
.ys-edit-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--line2); }
.ys-edit-h h2 { font-size: 16px; font-weight: 700; }
.ys-tabs { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); }
.ys-tabs [role=tab] { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 5px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ys-tabs [role=tab][aria-selected=true] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(26, 26, 26, .12); }
.ys-tabs [role=tab]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ys-p { padding: 18px 20px; }
.ys-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; }
.ys-row .field { margin: 0 0 14px; }
.ys-fonts { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ys-font { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; cursor: pointer; margin: 0; overflow: hidden; color: var(--ink); }
.ys-font input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ys-font:hover { border-color: rgba(91, 33, 182, .45); }
.ys-font:has(input:checked) { border-color: var(--p700); box-shadow: 0 0 0 1px var(--p700); background: #fcfbff; }
.ys-font:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.ys-f-sig { font-size: 30px; line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ys-f-ini { font-size: 26px; color: var(--muted); flex: none; }
.ys-pads { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; }
.ys-pad-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.ys-pad { display: block; width: 100%; height: 160px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff linear-gradient(transparent calc(100% - 38px), #e4e4ea calc(100% - 38px), #e4e4ea calc(100% - 37px), transparent calc(100% - 37px)); touch-action: none; cursor: crosshair; }
.ys-pad:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ys-ups { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; }
.ys-up { display: block; margin: 0; cursor: pointer; }
.ys-up-in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 140px; padding: 14px; border: 1.5px dashed var(--line); border-radius: var(--r-lg); text-align: center; font-size: 14px; background: #fff; }
.ys-up:hover .ys-up-in, .ys-up:focus-within .ys-up-in { border-color: var(--p700); background: var(--wash); }
.ys-up-in .ico { color: var(--p700); }
.ys-up-in img { max-height: 90px; max-width: 100%; object-fit: contain; }
.ys-check { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; font-weight: 500; }
.ys-edit-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line2); background: #fcfcfd; }
.ys-edit-f .ys-status { flex: 1; margin: 0; }
.ys-status { font-size: 13.5px; color: var(--muted); margin: 0; }
.ys-status.is-ok { color: var(--ok); font-weight: 600; }
.ys-status.is-error { color: var(--err); font-weight: 600; }
.ys-det { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.ys-det-help { margin-top: 10px; }
.acct-sec .ys-det .field { padding-bottom: 0; }
.acct-sec .ys-det > .btn { margin-bottom: 0; }

@media (max-width: 860px) {
  .pb-plans { grid-template-columns: minmax(0, 1fr); }
  .tm-invite-f { grid-template-columns: minmax(0, 1fr); }
  .tm-invite-a { justify-content: flex-end; }
}
@media (max-width: 760px) {
  .acct-offer, .pb-now { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pb-now-a { justify-content: flex-start; }
  /* Team table → one card per person */
  .tm-table thead { display: none; }
  .tm-table, .tm-table tbody, .tm-table tr, .tm-table td { display: block; width: auto; }
  .tm-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line2); }
  .tm-table tr[hidden] { display: none; }
  .tm-table tbody tr:last-child { border-bottom: 0; }
  .tm-table td { padding: 0; border: 0; }
  .tm-table td.tm-pc { grid-column: 1; max-width: none; width: auto; }
  .tm-table td.num { width: auto; }
  .tm-table td.tm-a { grid-column: 2; grid-row: 1; align-self: start; width: auto; }
  .tm-table td.tm-r, .tm-table td.tm-s, .tm-table td.num { grid-column: 1 / -1; padding-left: 42px; text-align: left; font-size: 13.5px; }
  .tm-table td.num::before, .tm-table td.tm-r::before { content: attr(data-l) ": "; color: var(--muted); }
  .tm-table td.tm-r { display: flex; align-items: center; gap: 6px; }
  .tm-table .tm-sub { display: inline; margin: 0 0 0 6px; }
  .tm-roles { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tm-roles dd { margin-bottom: 8px; }
  .ys-sheet { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 20px 18px; }
  .ys-cell-ini { max-width: 180px; }
  .ys-fonts, .ys-pads, .ys-ups, .ys-det, .ys-row { grid-template-columns: minmax(0, 1fr); }
  .ys-pad-w-ini, .ys-up-ini { max-width: 240px; }
  .acct-row { grid-template-columns: minmax(0, 1fr); }
  .acct-sec .acct-row > .btn { margin-bottom: 0; justify-self: start; }
  .acct-row .help-text { position: static; }
  .acct-sec .acct-row .field { padding-bottom: 0; }
}

/* Account settings (§5.4): settings rows — label · value · one action;
   edits open in place. */
.st-card { padding: 6px 20px 8px; }
.st-h { font-size: 15px; font-weight: 700; margin: 14px 0 4px; }
.st-h-row { display: flex; align-items: center; justify-content: space-between; gap: 0 12px; flex-wrap: wrap; }
.st-h-row .st-h { white-space: nowrap; }
.st-h-row form { margin: 10px 0 0; }
.st-lede { margin: 0 0 4px; color: var(--muted); font-size: 13.5px; }
.st-row { border-top: 1px solid var(--line2); }
.st-h + .st-row, .st-lede + .st-row, .st-card > .st-row:first-child { border-top: 0; }
.st-row > summary, .st-static { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 14px 0; font-size: 14px; }
.st-row > summary { list-style: none; cursor: pointer; }
.st-row > summary::-webkit-details-marker { display: none; }
.st-row > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.st-k { font-weight: 600; color: var(--ink); }
.st-v { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.st-sub { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.st-dots { letter-spacing: 2px; }
.st-a { justify-self: end; color: var(--p700); font-weight: 600; font-size: 14px; white-space: nowrap; }
.st-a a, .st-a .linklike { color: var(--p700); font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.st-a a:hover, .st-a .linklike:hover { text-decoration: underline; }
.st-a form { margin: 0; }
.st-a[data-open]::before { content: attr(data-open); }
.st-row[open] > summary .st-a[data-close]::before { content: attr(data-close); color: var(--muted); }
.st-row > summary:hover .st-a { text-decoration: underline; }
.st-a-danger { color: var(--err); }
.st-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; vertical-align: 1px; }
.st-chip .ico { width: 12px; height: 12px; }
.st-chip.ok { background: var(--ok-wash); color: var(--ok); }
.st-chip.warn { background: var(--warn-wash); color: var(--warn); }
.st-v .linklike { font-size: 13px; font-weight: 600; }
.st-form { padding: 2px 0 18px; }
.st-form .field { margin: 0 0 12px; }
.st-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.st-narrow { max-width: calc(50% - 6px); }
.st-form-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.st-form-f .help-text { margin: 0; flex: 1 1 260px; }
.st-devs { list-style: none; margin: 0 0 6px; padding: 0; }
.st-devs li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line2); }
/* The icon lines up with the name; buttons sit in the middle of the row. */
.st-devs li > form, .st-devs .st-acts { align-self: center; }
/* A line of facts breaks between them, never inside one ("Made Oct 8, 2026"). */
.st-meta > span { white-space: nowrap; }
/* Row actions (Revoke, Sign out, Send test event, Turn off, Delete) read like
   the page's other actions (Edit, Change, Download): purple words with no box,
   the last one flush with the card's right edge. Tap height stays from .btn. */
.st-devs .btn-ghost, .st-h-row .btn {
  padding: 0; border: 0; background: none; color: var(--p700); font-weight: 600; font-size: 14px;
}
.st-devs .btn-ghost:hover, .st-h-row .btn:hover { background: none; text-decoration: underline; }
/* Desktop: a list row sits on the same columns as a label/value row, so every
   card has one left edge for labels (here the icon) and one for values (here
   the name and its details). */
@media (min-width: 761px) {
  .st-devs li { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 16px; }
}
.st-devs li:first-child { border-top: 0; }
.st-devs form { margin: 0 0 0 auto; }
.st-keys .st-dev-t { flex: 1 1 0; }
.st-devs .st-sub code { overflow-wrap: anywhere; }
.st-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 20px; margin-left: auto; }
.st-devs .st-acts form { margin: 0; }
.st-events { border: 0; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.st-events legend { padding: 0; margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.st-events .check + .check { margin-top: 0; }
.st-dev-i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--bg); color: var(--muted); }
.st-dev-t { min-width: 0; }
.st-dev-n { font-weight: 600; font-size: 14px; }
.st-dev-n .st-chip { margin-left: 6px; }
.st-list { margin: 0 0 14px; padding-left: 18px; color: var(--muted); font-size: 14px; display: grid; gap: 4px; }
/* A long organization name wraps inside the account menu instead of
   stretching it across the page. */
.hdr-me .menu-pop { max-width: min(340px, calc(100vw - 24px)); }
.hdr-me .menu-pop .who > * { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.hdr-me .menu-pop .menu-plan-t span { overflow-wrap: anywhere; white-space: normal; }
.st-msg { margin: 6px 0 10px; scroll-margin-top: 84px; }
.st-key { margin: 6px 0 14px; padding: 14px 16px; border: 1px solid rgba(4, 120, 87, .35); background: var(--ok-wash); border-radius: var(--r); }
.st-key-h { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ok); }
.st-key-v { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-key-v code { flex: 1 1 260px; min-width: 0; padding: 9px 11px; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.st-key .st-sub { margin-top: 10px; }
.st-keys code, .st-key .st-sub code { font-size: 12.5px; }
.st-card[id] { scroll-margin-top: 76px; }
.st-close-f { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.st-close-f .field { margin: 0; flex: 1 1 260px; max-width: 360px; }
.st-k[data-tip] { cursor: help; text-decoration: underline dotted rgba(26, 26, 26, .28); text-underline-offset: 4px; }
.st-k[data-tip]:hover::after, .st-k[data-tip]:focus-visible::after,
.st-row > summary:focus-visible .st-k[data-tip]::after,
.st-h [data-tip]:hover::after, .st-h [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); transform: none;
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.4;
  padding: 7px 10px; border-radius: 4px; width: max-content; max-width: 280px; white-space: normal;
  text-align: left; pointer-events: none; z-index: 90;
}
.st-h [data-tip] { position: relative; cursor: help; text-decoration: underline dotted rgba(26, 26, 26, .28); text-underline-offset: 4px; }
.st-note { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.st-note .linklike { font-size: 14px; font-weight: 600; margin-left: 4px; }
.st-close > summary { align-items: center; }
.st-close-btn[data-open]::before { content: attr(data-open); }
.st-row[open] .st-close-btn { color: var(--ink); border-color: var(--line); background: #fff; }
.st-row[open] .st-close-btn::before { content: attr(data-close); }
.st-row > summary:hover .st-close-btn { text-decoration: none; }
.st-close-f .field label { font-weight: 500; }
@media (max-width: 760px) {
  .st-row > summary, .st-static { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .st-row > summary .st-v, .st-static .st-v { grid-column: 1 / -1; grid-row: 2; }
  .st-2 { grid-template-columns: minmax(0, 1fr); }
  .st-narrow { max-width: none; }
  .st-devs li:has(.st-acts) { flex-wrap: wrap; row-gap: 2px; }
  /* Under the text, not under the icon (36px icon + 12px gap). */
  .st-devs .st-acts { flex-basis: 100%; justify-content: flex-start; margin-left: 0; padding-left: 48px; }
}

/* Help (§5.5) */
.hp-sec { padding: 18px 20px; }
.hp-sec h2, .hp-contact h2 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.hp-q { border-top: 1px solid var(--line2); }
.hp-sec h2 + .hp-q { border-top: 0; }
.hp-q > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-weight: 600; font-size: 14.5px; }
.hp-q > summary::-webkit-details-marker { display: none; }
.hp-q > summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; }
.hp-q[open] > summary::after { content: "\2212"; }
.hp-q > summary:hover { color: var(--p700); }
.hp-q > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.hp-q p { margin: 0 0 14px; color: var(--muted); font-size: 14px; max-width: 680px; }
.hp-q a, .hp-lede a { color: var(--p700); font-weight: 600; }
.hp-lede { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.hp-keys { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 8px; }
.hp-keys th, .hp-keys td { text-align: left; padding: 8px 0; border-top: 1px solid var(--line2); font-weight: 400; }
.hp-keys th { color: var(--muted); width: 45%; padding-right: 12px; }
kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: #fff; font: 600 12px/1.5 Inter, system-ui, sans-serif; text-align: center; color: var(--ink); }
.hp-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; }
.hp-contact p { margin: 0; color: var(--muted); font-size: 14px; }
.hp-contact a:not(.btn) { color: var(--p700); font-weight: 600; }
@media (max-width: 760px) {
  .hp-contact { grid-template-columns: minmax(0, 1fr); }
  .hp-keys th { width: 50%; }
}

/* Long text (2.4.4). One behaviour everywhere, so a long title never widens a
   page and never hides what a thing is:
   - .t-clip / .t-clip2: a title in a list row, one line (two on a phone), cut with
     an ellipsis. The element also carries title="..." so hover shows all of it.
   - .t-head: a title as a page heading, up to three lines, then an ellipsis.
   - .t-wrap: a name, address or file name in a panel; breaks inside its box.
   Block-level text everywhere also breaks an unbroken string instead of
   running past the edge. */
p, h1, h2, h3, h4, li, dd, dt, label, td, th, summary { overflow-wrap: break-word; }
.t-wrap { min-width: 0; overflow-wrap: anywhere; }
/* Messages are flex boxes, where "break-word" does not stop a long address from
   widening the box; "anywhere" does. */
.form-error, .alert-error, .form-ok, .alert-ok, .notice { overflow-wrap: anywhere; }
.t-clip { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-clip2, .t-head { min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.t-head { -webkit-line-clamp: 3; line-clamp: 3; }
@media (min-width: 761px) { .t-clip2 { display: block; -webkit-line-clamp: unset; white-space: nowrap; text-overflow: ellipsis; } }