/* Linequill's ink language: flat paper, precise borders, and a little movement. */
:root {
  --ink: #26262c;
  --muted: #707078;
  --soft: #f7f7f9;
  --surface: #ffffff;
  --nav: #f0f0f3;
  --line: #e3e3e9;
  --subtle: #f2f2f5;
  --subtle-strong: #e8e8ed;
  --control: #ffffff;
  --control-border: #c9c9d2;
  --label: #414149;
  --accent: #01b280;
  --accent-hover: #009b6f;
  --accent-text: #4d4d59;
  --accent-text-hover: #202028;
  --accent-soft: rgb(100 100 120 / 7%);
  --accent-ring: rgb(1 178 128 / 20%);
  --nav-soft: var(--subtle-strong);
  --success-text: #007a57;
  --button-primary: #292930;
  --button-primary-hover: #42424c;
  --button-primary-text: #ffffff;
  --radius: 12px;
  --ink-ease: cubic-bezier(.22, 1, .36, 1);
  --ink-dot: #c0c0ce;
  --signature-particle: #717182;
  --signature-line: #4c4c5b;
  --signature-glow-start: #32877d;
  --signature-glow-middle: #6885ac;
  --signature-glow-end: #9783ac;
  --signature-halo: rgb(116 116 148 / 7%);
}
html[data-theme="dark"] {
  --ink: #eeeef3;
  --muted: #a1a1af;
  --soft: #17171e;
  --surface: #1e1e26;
  --nav: #111117;
  --line: #33333f;
  --subtle: #25252f;
  --subtle-strong: #2e2e39;
  --control: #1a1a22;
  --control-border: #4b4b59;
  --label: #d5d5df;
  --accent-text: #c5c5d2;
  --accent-text-hover: #f4f4f8;
  --accent-soft: rgb(181 181 206 / 7%);
  --nav-soft: var(--subtle-strong);
  --success-text: #53cba6;
  --button-primary: #e5e5ed;
  --button-primary-hover: #ffffff;
  --button-primary-text: #25252e;
  --ink-dot: #5d5d70;
  --signature-particle: #9c9caf;
  --signature-line: #bdbdcc;
  --signature-glow-start: #70ceb7;
  --signature-glow-middle: #8cafd9;
  --signature-glow-end: #b1a3d1;
  --signature-halo: rgb(133 133 175 / 9%);
}
.app-body .panel, .workspace-page .panel, .signing-body .panel,
.app-body .template-card, .signing-body .assurance-card {
  border-radius: 12px;
  box-shadow: none;
}
.button { border-radius: 8px; }
.button.primary, html[data-theme="dark"] .button.primary { box-shadow: none; }
.app-body .side-nav a { border-radius: 7px; transition: background-color 160ms, color 160ms; }
.app-body .side-nav a.active { background: var(--subtle-strong); color: var(--ink); }
.app-body .side-nav a.active::after { background: var(--accent); }
.app-body .sidebar-create { padding-inline: 12px; }
.app-body .sidebar-create .ink-mark { width: 29px; }
.app-body .nav-caption { font-weight: 550; letter-spacing: .11em; }
.app-body .page-header h1 { font-weight: 560; letter-spacing: -.045em; }
.app-body .status { border-radius: 5px; font-weight: 550; }
.home-page .home-welcome { font-size: .84rem; margin: 12px 0 0; }
.home-page .page-header { margin-bottom: 36px; }
.home-page .home-overview {
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  margin-bottom: 26px;
}
.home-page .home-overview > .overview-card {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 10px;
  min-width: 0;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 180ms, background-color 180ms;
}
.home-page .home-overview > .overview-card:hover { border-color: var(--accent-text); background: var(--surface); }
.home-page .home-overview .overview-label { grid-row: 1; font-size: .81rem; color: var(--ink); }
.home-page .home-overview .overview-symbol { grid-row: 1; grid-column: 2; display: grid; place-items: center; color: var(--accent-text); }
.home-page .home-overview .overview-symbol .ui-icon { width: 19px; height: 19px; color: inherit; }
.home-page .home-overview strong { grid-row: 2; grid-column: 1 / -1; font-size: 2.7rem; font-weight: 450; letter-spacing: -.055em; color: var(--ink); font-variant-numeric: tabular-nums; }
.home-page .home-overview .overview-foot { grid-row: 3; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .72rem; }
.home-page .home-overview .overview-foot .ui-icon { width: 16px; height: 16px; color: var(--muted); transition: transform 220ms var(--ink-ease); }
.home-page .overview-card:hover .overview-foot .ui-icon { transform: translateX(3px); }
.home-page .home-overview .overview-dots {
  position: absolute;
  grid-area: auto;
  z-index: -1;
  right: 22px;
  top: 68px;
  width: 86px;
  height: 49px;
  pointer-events: none;
  background: radial-gradient(circle, var(--ink-dot) 1.4px, transparent 1.7px) 0 0 / 9px 9px;
  mask-image: linear-gradient(110deg, transparent, #000);
  transition: transform 450ms var(--ink-ease);
}
.home-page .overview-card:hover .overview-dots { transform: translateX(-5px); }
.home-page .overview-draft .overview-symbol { color: var(--muted); }
.home-page .overview-completed .overview-symbol { border-radius: 50%; background: var(--accent-soft); width: 27px; height: 27px; margin: -4px; }
.home-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.home-content-full { grid-template-columns: 1fr; }
.home-content-grid > * { min-width: 0; }
.home-page .home-recent { padding: 24px; margin: 0; }
.home-page .home-recent .panel-heading { margin-bottom: 18px; }
.home-page .home-recent h2 { font-size: .92rem; font-weight: 620; }
.home-page .home-request { border-radius: 0; gap: 12px; padding: 18px 0; transition: background-color 160ms; }
.home-page .home-request:hover, .home-page .home-request:focus-within { background: var(--subtle); }
.home-page .home-request-title a { font-size: .8rem; font-weight: 550; }
.home-page .home-request-title small { font-size: .68rem; margin-top: 5px; }
.home-page .home-document-icon { width: 33px; height: 39px; border-radius: 5px; background: var(--surface); }
.home-page .home-document-icon .ui-icon { width: 17px; }
.home-page .home-row-arrow { display: none; }
.home-page .home-next { padding: 23px; margin: 0; overflow: hidden; }
.home-next .eyebrow { font-size: .58rem; color: var(--muted); }
.home-page .home-next h2 { font-size: 1.5rem; font-weight: 550; letter-spacing: -.04em; margin-bottom: 10px; }
.home-next > p { font-size: .8rem; line-height: 1.65; margin-bottom: 23px; }
.home-quick-link { display: flex; align-items: center; gap: 10px; color: var(--ink); padding: 17px 0; border-top: 1px solid var(--line); }
.home-quick-link > span:nth-child(2) { min-width: 0; flex: 1; }
.home-quick-link strong { font-size: .74rem; font-weight: 550; }
.home-quick-link small { font-size: .66rem; margin-top: 4px; }
.home-quick-icon { color: var(--muted); }
.home-quick-link > .ui-icon { width: 15px; transition: transform 180ms; }
.home-quick-link:hover > .ui-icon { transform: translateX(3px); }
.home-quick-link:last-child { padding-bottom: 0; }

/* A recognizable pen writes a short flourish on intent. Actions never wait for it. */
.quill-action { position: relative; }
.ink-mark { flex-shrink: 0; width: 36px; height: 24px; overflow: visible; transition: transform 160ms var(--ink-ease); }
.ink-mark-pen { transform:translate(15px,24px); }
.ink-mark-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 750ms 100ms linear, opacity 150ms; }
.quill-action:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .ink-mark-stroke { stroke-dashoffset: 0; opacity: 1; }
.quill-action:active:not(:disabled):not([aria-disabled="true"]) .ink-mark { transform: translateY(1px) scale(.92); }
.quill-action:is(:disabled,[aria-disabled="true"]) .ink-mark-stroke { opacity:0; }
.ink-success { width: 160px; height: 130px; margin: 0 auto 12px; color: var(--success-text); }
.ink-success-check { stroke-dasharray: 1; }
.ink-success-ring { transform-origin: 80px 65px; }
.ink-success-dots { transform-origin: 80px 65px; }

@media (prefers-reduced-motion: no-preference) {
  .quill-action:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .ink-mark-pen { animation:ink-pen-write 1s var(--ink-ease) both; }
  @view-transition { navigation: auto; }
  .home-page .overview-card { animation: ink-arrive 450ms var(--ink-ease) both; }
  .home-page .overview-card:nth-child(2) { animation-delay: 60ms; }
  .home-page .overview-card:nth-child(3) { animation-delay: 120ms; }
  .home-content-grid { animation: ink-arrive 550ms 130ms var(--ink-ease) both; }
  .review-dialog[open], .signer-dialog:not([hidden]) [role="dialog"] { animation: ink-arrive 250ms var(--ink-ease) both; }
  .ink-success-check { animation: ink-write 550ms 160ms var(--ink-ease) both; }
  .ink-success-dots { animation: ink-bloom 800ms var(--ink-ease) both; }
  .ink-success-ring { animation: ink-settle 900ms var(--ink-ease) both; }
  .messages .success { animation: ink-arrive 350ms var(--ink-ease) both; }
  .signing-body [data-finish-signing][aria-disabled="true"] { background-image: linear-gradient(100deg, transparent 25%, rgb(255 255 255 / 18%) 50%, transparent 75%); background-size: 250% 100%; animation: ink-working 1400ms linear 3; }
  ::view-transition-old(root) { animation: ink-theme-out 180ms ease-out both; }
  ::view-transition-new(root) { animation: ink-theme-in 260ms ease-out both; }
}
@keyframes ink-pen-write {
  0% { transform:translate(15px,24px); }
  10% { transform:translate(5px,24px) rotate(-6deg); }
  30% { transform:translate(14px,11px) rotate(-8deg); }
  48% { transform:translate(13px,25px) rotate(3deg); }
  65% { transform:translate(23px,19px) rotate(-5deg); }
  78% { transform:translate(27px,23px); }
  88% { transform:translate(33px,19px) rotate(-6deg); }
  100% { transform:translate(33px,15px) rotate(-10deg); }
}
@keyframes ink-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ink-write { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ink-orbit { from { transform: rotate(-10deg); } to { transform: rotate(0); } }
@keyframes ink-bloom { from { opacity: 0; transform: scale(.6); } 65% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
@keyframes ink-settle { from { opacity: 0; transform: rotate(-35deg) scale(.9); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes ink-working { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes ink-theme-out { to { opacity: 0; } }
@keyframes ink-theme-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1180px) {
  .home-content-grid { grid-template-columns: minmax(0, 1fr); }
  .home-page .home-next { display: block; }
}
@media (max-width: 760px) {
  .home-page .page-header { gap: 20px; margin-bottom: 24px; }
  .home-page .home-welcome { max-width: 290px; line-height: 1.6; }
  .home-page .home-overview { gap: 9px; margin-bottom: 20px; }
  .home-page .home-overview > .overview-card { padding: 16px 12px; gap: 15px 4px; border-radius: 9px; }
  .home-page .home-overview .overview-label { grid-column: 1 / -1; font-size: .72rem; min-height: 2.8em; }
  .home-page .home-overview strong { font-size: 2rem; }
  .home-page .home-overview .overview-symbol, .home-page .home-overview .overview-foot, .home-page .home-overview .overview-dots { display: none; }
  .home-page .home-recent { padding: 20px 16px; }
  .home-page .home-request { grid-template-columns: 33px minmax(0, 1fr); gap: 8px 12px; }
  .home-page .home-request .home-document-icon { grid-row: 1 / 3; align-self: start; }
  .home-page .home-next { padding: 20px; grid-template-columns: 110px minmax(0, 1fr); gap: 0 16px; }
  .home-next > .home-quick-link { grid-column: 1 / -1; }
  .home-page .home-next h2 { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .quill-action *, .home-page *, .ink-success * { animation: none !important; transition: none !important; }
  .home-page .overview-card:hover .overview-dots { transform: none; }
}
@media print {
  html[data-theme="dark"] { --ink: #26262c; --muted: #707078; --line: #e3e3e9; --soft: #fff; --surface: #fff; --subtle: #f2f2f5; --accent-text: #4d4d59; --ink-dot: #c0c0ce; color-scheme: light; }
  .home-next, .overview-dots, .ink-mark { display: none; }
  .home-content-grid { display: block; }
}

/* A signature made of moving points, with generous space around the work. */
.home-page .signature-welcome {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  min-height: 270px;
  padding: 32px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.home-page .signature-welcome > div:first-child { position: relative; z-index: 1; max-width: 48%; }
.home-page .signature-welcome h1 { font-size: clamp(1.55rem, 2.3vw, 2.15rem); font-weight: 500; }
.home-page .signature-welcome .eyebrow { color: var(--muted); font-weight: 550; font-size: .6rem; letter-spacing: .16em; }
.home-page .signature-welcome > .button { position: relative; z-index: 1; font-weight: 550; min-height: 42px; }
.home-page .signature-welcome .home-welcome { font-size: .8rem; }
/* The drawing layer sits behind content and never intercepts links or text. */
.signature-field { position: absolute; inset: 0; z-index: 0; width: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 18%) 0%, rgb(0 0 0 / 50%) 12%, #000 25%); mask-image: linear-gradient(to right, rgb(0 0 0 / 18%) 0%, rgb(0 0 0 / 50%) 12%, #000 25%); }
.signature-field canvas { display: block; width: 100%; height: 100%; }
.home-page .home-overview > .overview-card:hover { border-color: var(--control-border); }
.home-page .home-next h2 { font-size: 1.15rem; font-weight: 550; letter-spacing: -.025em; }
.home-page .home-next .eyebrow { color: var(--muted); }
.home-page .overview-completed .overview-symbol { color: var(--success-text); }
.home-page .overview-symbol { color: var(--muted); }
.app-body .privacy-footer a, .signing-body .signing-footer a { color: var(--muted); }
@media (max-width: 1180px) and (min-width: 761px) {
  .home-page .signature-welcome { padding: 26px; min-height: 250px; }
  .home-page .signature-welcome > div:first-child { max-width: 53%; }
}
@media (max-width: 760px) {
  .home-page .signature-welcome { min-height: 0; padding: 23px 22px; gap: 18px; }
  .home-page .signature-welcome > div:first-child { max-width: 100%; }
  .home-page .signature-welcome > .button { width: auto; }
}
@media print {
  .signature-field { display: none; }
  .home-page .signature-welcome { min-height: 0; border: 0; }
}