/* Liquid glass. One material for every surface that floats above content: bars, menus, dialogs,
   panels and buttons. It reads as glass because there is light behind it (the ambient field) and
   an edge that catches light (the inset highlight and sheen). Loaded last, on every page.
   Anyone who asks for less transparency, or whose browser can't blur, gets solid surfaces. */
:root {
  --glass: rgba(255, 255, 255, .56);
  --glass-strong: rgba(255, 255, 255, .74);
  --glass-tint: rgba(255, 246, 224, .55);
  --glass-edge: rgba(255, 255, 255, .78);
  --glass-line: rgba(12, 14, 18, .07);
  --glass-blur: blur(24px) saturate(190%);
  --glass-lift: 0 1px 1px rgba(12, 14, 18, .04), 0 12px 32px rgba(12, 14, 18, .10);
  --glass-light: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -10px 20px -14px rgba(255, 255, 255, .6);
  --capsule: 999px;
}

/* Light behind the glass: slow amber and cobalt fields on a warm white ground. */
html { background: #FBFAF7; }
body, body.site, body.paper { background: transparent; }
body::before {
  content: ""; position: fixed; inset: -25% -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 12% 8%, rgba(255, 178, 36, .30), transparent 70%),
    radial-gradient(34% 30% at 92% 18%, rgba(43, 68, 232, .16), transparent 70%),
    radial-gradient(44% 38% at 70% 96%, rgba(255, 178, 36, .20), transparent 72%),
    radial-gradient(30% 28% at 20% 80%, rgba(43, 68, 232, .10), transparent 70%);
  filter: blur(8px);
}
body.paper::before { opacity: .55; }

/* The material. */
.site-top, .top, .paper-top, .sign-bar, .tour, dialog, .props, .notice, .panel,
.split .media:has(img), .site-utility, .qr, .install, .drop, .empty, .settings form.inline,
.approval .facts, .tabset [role=tabpanel], .tabset .tabs, .band form, .fix[open] form {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift), var(--glass-light);
  border: 1px solid var(--glass-edge);
}

/* Bars float as capsules, the way modern system bars do. */
.site-top, .top {
  position: sticky; top: 12px; z-index: 40;
  margin: 12px auto 0; width: min(calc(100% - 24px), 1240px);
  border-radius: var(--capsule); padding: 10px 14px 10px 22px;
}
.top { border-bottom: 1px solid var(--glass-edge); }
.site-utility { border-radius: 0; border-width: 0 0 1px; box-shadow: none; background: var(--glass-tint); }
.paper-top { position: sticky; top: 0; z-index: 30; border-width: 0 0 3px; border-bottom-color: var(--brand, var(--amber)); border-radius: 0; }
.sign-bar { top: 66px; margin: 10px 12px 0; border-radius: 20px; }
.panel { border-radius: 0 22px 22px 0; border-left: 0; margin: 12px 0; max-height: calc(100vh - 100px); top: 84px; }
.pages { background: transparent; }

/* Panels and sheets. */
dialog { border-radius: 26px; background: var(--glass-strong); }
dialog::backdrop { background: rgba(12, 14, 18, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.props, .notice, .qr, .install, .approval .facts, .settings form.inline { border-radius: 18px; }
.approval .facts { padding: 14px 18px; }
.notice { border-left-width: 1px; }
.empty { border-radius: 26px; padding: 44px; margin-top: 28px; border-top: 1px solid var(--glass-edge); }
.drop { border-radius: 22px; border-style: solid; }
.split .media:has(img) { border-radius: 28px; }
.tour { border-radius: 22px; background: rgba(12, 14, 18, .78); color: #fff; border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 18px 44px rgba(12, 14, 18, .28), inset 0 1px 0 rgba(255, 255, 255, .18); }
.install { color: var(--ink); background: rgba(12, 14, 18, .82); border-color: rgba(255, 255, 255, .14); color: #E4E7EC; }

/* Buttons are capsules. Primary is dark glass with a lit top edge; secondary is clear glass. */
button, .button { border-radius: var(--capsule); padding: 11px 20px; transition: transform .18s cubic-bezier(.3, .7, .4, 1.3), box-shadow .2s, background-color .2s; }
button:active, .button:active { transform: scale(.97); }
.primary, body.site .primary, body.paper .primary {
  background: linear-gradient(180deg, rgba(48, 52, 62, .94), rgba(12, 14, 18, .96));
  color: #fff; border: 1px solid rgba(12, 14, 18, .9);
  box-shadow: 0 6px 18px rgba(12, 14, 18, .22), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 6px rgba(0, 0, 0, .25);
}
.primary:hover, body.site .primary:hover, body.paper .primary:hover { background: linear-gradient(180deg, rgba(62, 66, 78, .96), rgba(12, 14, 18, .98)); }
.primary:disabled { background: rgba(12, 14, 18, .12); color: rgba(12, 14, 18, .45); box-shadow: none; border-color: transparent; }
.secondary, body.paper .secondary {
  background: var(--glass); color: var(--ink); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 4px 14px rgba(12, 14, 18, .08), var(--glass-light);
}
.secondary:hover { background: var(--glass-strong); border-color: var(--glass-edge); }
.approve { background: linear-gradient(180deg, #FFC85A, #FFB224); border: 1px solid rgba(138, 90, 0, .25);
  box-shadow: 0 6px 18px rgba(255, 178, 36, .35), inset 0 1px 0 rgba(255, 255, 255, .7); }
.palette button { border-radius: 14px; background: var(--glass); border-color: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-light); }
.palette button[aria-pressed=true] { background: rgba(255, 178, 36, .3); border-color: rgba(138, 90, 0, .35); }

/* Inputs are recessed glass. */
input:not([type=checkbox]):not([type=color]), textarea, select {
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(12, 14, 18, .10); border-radius: 14px;
  box-shadow: inset 0 1px 2px rgba(12, 14, 18, .06);
}
input:focus, textarea:focus, select:focus { border-color: rgba(12, 14, 18, .45); background: rgba(255, 255, 255, .85); }

/* Paper stays paper: documents never sit behind glass. */
.page { border-radius: 4px; }

/* The amber band gets a lit edge and its form becomes a glass capsule. */
.band { background: linear-gradient(180deg, #FFC34D 0%, #FFB224 60%, #F7A70E 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(138, 90, 0, .25); }
.band form { border-radius: var(--capsule); padding: 6px; background: rgba(255, 255, 255, .42); display: inline-flex; gap: 6px; align-items: center; }
.band form input { border: 0; background: rgba(255, 255, 255, .8); border-radius: var(--capsule); margin: 0; }

@media (max-width: 900px) {
  .site-top, .top { border-radius: 24px; top: 8px; margin-top: 8px; padding: 10px 14px; }
  /* Phones: the document comes first and the setup panel is a sheet along the bottom. */
  .panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 35; margin: 0; max-height: 44vh;
    border-radius: 22px 22px 0 0; border: 1px solid var(--glass-edge); border-bottom: 0; background: var(--glass-strong);
    padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .editor .pages { padding-bottom: 46vh; }
  /* The agreement and Continue stay in reach at the bottom of a long disclosure. */
  .consent-actions { position: sticky; bottom: 0; z-index: 5; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-line); }
  .consent-actions .check { margin: 0 0 10px; }
  .consent-actions button { width: 100%; }
  .sign-bar { top: 60px; }
  .band form { display: flex; flex-direction: column; border-radius: 22px; }
  /* Phones zoom into anything under 16px when tapped. */
  input:not([type=checkbox]):not([type=color]), textarea, select { font-size: 16px; }
}

/* Solid surfaces for anyone who asks, and for browsers that can't blur. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #FFFFFF; --glass-strong: #FFFFFF; --glass-tint: #FFF6E0; }
  body::before { display: none; }
  .site-top, .top, .paper-top, .sign-bar, .tour, dialog, .props, .notice, .panel, .secondary, .palette button,
  .split .media:has(img), .site-utility, .qr, .install, .drop, .empty, .approval .facts, .band form {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, .94); --glass-strong: #FFFFFF; }
}
@media (prefers-reduced-motion: reduce) {
  button, .button { transition: none; }
  button:active, .button:active { transform: none; }
}

/* ---- Phone: an app, not a web page. ---- */
.tabbar { display: none; }
@media (max-width: 700px) {
  body.app main { padding: 24px 18px calc(120px + env(safe-area-inset-bottom)); }
  h1 { font-size: 1.9rem; letter-spacing: -.03em; }

  /* A slim glass bar with just the mark; navigation lives in the tab bar. */
  .top { flex-wrap: nowrap; padding: 10px 18px; top: 8px; }
  .top nav, .top .who { display: none; }

  /* Floating glass tab bar, thumb height. */
  .tabbar {
    display: flex; position: fixed; z-index: 45; left: 50%; transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom)); width: min(calc(100% - 32px), 360px);
    padding: 6px; gap: 4px; border-radius: var(--capsule);
    background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge); box-shadow: 0 14px 34px rgba(12, 14, 18, .16), var(--glass-light);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px;
    border-radius: var(--capsule); text-decoration: none; color: var(--dim); font-size: 11px; font-weight: 600;
    -webkit-tap-highlight-color: transparent; transition: background-color .2s, color .2s;
  }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar a[aria-current] { color: var(--ink); background: rgba(255, 255, 255, .78);
    box-shadow: 0 2px 8px rgba(12, 14, 18, .08), inset 0 1px 0 #fff; }
  .tabbar a:active { transform: scale(.96); }
  body.app:has(.editor) .tabbar { display: none; }

  /* The confirm-email note is one quiet line. */
  .verify-bar { flex-wrap: nowrap; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 9px 16px;
    border-radius: var(--capsule); font-size: 13px; }
  .verify-bar p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .verify-bar button { white-space: nowrap; }

  /* Documents read as rows: title, then status and date. The whole row is the target. */
  table.list.docs thead { display: none; }
  table.list.docs, table.list.docs tbody { display: block; }
  table.list.docs tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; position: relative;
    padding: 14px 16px; margin-bottom: 10px; border-radius: 20px;
    background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge); box-shadow: 0 4px 14px rgba(12, 14, 18, .06), var(--glass-light); }
  table.list.docs td { padding: 0; border: 0; }
  table.list.docs td:first-child { grid-column: 1 / -1; font-size: 1.02rem; }
  table.list.docs td:nth-child(2) { color: var(--dim); font-size: .9rem; }
  table.list.docs td:nth-child(3) { text-align: right; font-size: .85rem; }
  table.list.docs a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
  table.list.docs tr:active { transform: scale(.985); }

  /* The editor's sheet has a handle, like every sheet on the phone. */
  .panel::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px;
    background: rgba(12, 14, 18, .18); margin: -10px auto 4px; flex: none; }

  .head-row { align-items: center; }
  .settings form.inline { flex-direction: column; align-items: stretch; }
  .settings form.inline button { width: 100%; }
}

/* Draw or Type: a glass segmented control everywhere. */
dialog .tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--capsule);
  background: rgba(12, 14, 18, .06); margin-bottom: 14px; }
dialog .tabs button { padding: 7px 18px; border: 0; border-radius: var(--capsule); color: var(--dim); background: none; box-shadow: none; }
dialog .tabs button[aria-selected=true] { color: var(--ink); background: #fff;
  box-shadow: 0 2px 8px rgba(12, 14, 18, .10), inset 0 1px 0 #fff; }
dialog .tabs button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

/* The signer's finish: a lit glass disc with a check, the one moment worth a flourish. */
.narrow:has(> .done-mark) { display: flex; flex-direction: column; align-items: flex-start; }
.done-mark { order: -1; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 22px;
  color: #0C0E12; background: linear-gradient(180deg, #FFC85A, #FFB224);
  box-shadow: 0 10px 28px rgba(255, 178, 36, .45), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 8px rgba(138, 90, 0, .25);
  animation: done-pop .5s cubic-bezier(.3, .7, .4, 1.4) both; }
.done-mark svg { width: 30px; height: 30px; }
@keyframes done-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .done-mark { animation: none; } }

@media (max-width: 700px) {
  /* Stacked form fields keep their natural height. */
  .settings form.inline > * { flex: none; }
  /* Other lists (signers, keys, team) stack each row's cells. */
  table.list:not(.docs) tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  table.list:not(.docs) td { padding: 0; border: 0; }
  table.list:not(.docs) td:nth-child(3) { grid-column: 1 / -1; }
  table.list:not(.docs) thead { display: none; }
}

/* Public site header: a slim capsule on phones, with a glass menu sheet. */
.menu-toggle, .site-top .site-menu { display: none; }
@media (max-width: 860px) {
  .site-utility { display: none; }
  .site-top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0; padding: 8px 8px 8px 18px; border-radius: 28px; }
  .site-top > nav[aria-label="Main"] { display: none; }
  .site-account { display: flex; gap: 6px; align-items: center; }
  .site-account > a:not(.button) { display: none; }
  .site-account .button { padding: 9px 16px; font-size: 14px; }
  .menu-toggle { display: grid; place-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); box-shadow: var(--glass-light); }
  .menu-toggle span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s; }
  .site-top[data-open] .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .site-top[data-open] .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-top[data-open] { background: var(--glass-strong); }
  .site-top[data-open] .site-menu { display: flex; flex-direction: column; grid-column: 1 / -1; padding: 10px 6px 8px; gap: 2px;
    animation: menu-in .22s ease-out both; }
  .site-menu a { padding: 12px 10px; border-radius: 14px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 17px; }
  .site-menu a:active { background: rgba(12, 14, 18, .05); }
  .site-menu a[aria-current] { background: rgba(255, 178, 36, .22); }
  .site-menu a.small { font-size: 15px; font-weight: 500; color: var(--dim); padding: 9px 10px; }
  .site-menu .sep { height: 1px; background: var(--glass-line); margin: 6px 10px; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .site-top[data-open] .site-menu { animation: none; } }

/* Edge to edge in the iPhone app and home-screen mode: content draws under the status bar and home indicator,
   and these insets keep it clear of them. In a normal browser tab the insets are 0. */
body { padding-top: env(safe-area-inset-top); }
@media (max-width: 700px) {
  .top { top: calc(8px + env(safe-area-inset-top)); }
}
/* Signer pages: the branded bar itself reaches the top edge and pads its content below the status bar. */
body.paper { padding-top: 0; }
body.paper .paper-top { padding-top: calc(16px + env(safe-area-inset-top)); }

/* Back, on phones only: inside a document or the editor the tab bar steps aside, so the top bar offers the way out. */
.top .back { display: none; }
@media (max-width: 700px) {
  .top .back { display: inline-flex; align-items: center; gap: 2px; margin-left: -6px; padding: 6px 10px 6px 4px; border-radius: var(--capsule);
    text-decoration: none; color: var(--ink); font-weight: 600; font-size: 16px; }
  .top .back svg { width: 22px; height: 22px; }
  .top .back:active { background: rgba(12, 14, 18, .06); }
  .top:has(.back) .logo { display: none; }
}