/* ===========================================================================
   SignFlow design system

   Resolved theme is written to <html data-theme> by an inline script in the
   page head, before first paint, so there is no flash of the wrong theme.

   Two families of colour live here and must not be confused:
     - themed tokens, which flip between light and dark
     - --paper-*, which never flip, because they describe the white page of a
       PDF and the ink that will be stamped into it. A signature drawn in a
       light-on-dark colour would vanish in the sealed document.
   =========================================================================== */

:root {
  color-scheme: light;

  /* surfaces */
  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #f3f5f8;
  --surface-3: #eceff4;
  --sidebar: #ffffff;

  /* lines */
  --border: #e3e7ed;
  --border-strong: #cfd6e0;

  /* text */
  --text: #0e1420;
  --text-2: #4a5567;
  --text-3: #626e81;

  /* brand */
  --brand: #1266e0;
  --brand-strong: #0d53bd;
  --brand-fg: #ffffff;
  --brand-soft: #eaf2fe;
  --brand-ring: rgba(18, 102, 224, .32);

  /* status */
  --ok: #10663f;        --ok-bg: #e6f5ec;  --ok-line: #bbe0cb;
  --warn: #85540a;      --warn-bg: #fdf3e0; --warn-line: #eedcb4;
  --bad: #a3201f;       --bad-bg: #fcecec;  --bad-line: #efcccb;
  --vio: #6a34c4;       --vio-bg: #f2ecfc;  --vio-line: #dccdf5;

  /* shape */
  --r-sm: 7px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* depth — layered rather than one blurry drop */
  --sh-sm: 0 1px 2px rgba(14, 20, 32, .05);
  --sh: 0 1px 2px rgba(14, 20, 32, .05), 0 2px 8px rgba(14, 20, 32, .05);
  --sh-lg: 0 2px 4px rgba(14, 20, 32, .05), 0 12px 32px rgba(14, 20, 32, .10);
  --sh-pop: 0 8px 24px rgba(14, 20, 32, .14), 0 2px 6px rgba(14, 20, 32, .08);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --sidebar-w: 256px;

  /* constant across themes — see the note above */
  --paper: #ffffff;
  --paper-ink: #12151b;
  --paper-muted: #6b7280;
  --paper-line: #c9ced6;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0d12;
  --surface: #141820;
  --surface-2: #1a1f29;
  --surface-3: #212733;
  --sidebar: #11151c;

  --border: #262d39;
  --border-strong: #353d4c;

  --text: #e8ebf1;
  --text-2: #a7b0bf;
  /* 5.0:1 on --surface. The light-mode greys fail badly here. */
  --text-3: #8b94a3;

  --brand: #5a9cff;
  --brand-strong: #82b5ff;
  --brand-fg: #06121f;
  --brand-soft: #142847;
  --brand-ring: rgba(90, 156, 255, .34);

  --ok: #5fd3a0;   --ok-bg: #0f2e1e;   --ok-line: #1f5540;
  --warn: #e3b263; --warn-bg: #2f2410; --warn-line: #57431f;
  --bad: #f4918a;  --bad-bg: #311a1a;  --bad-line: #5b2f2f;
  --vio: #c3a6ff;  --vio-bg: #221a38;  --vio-line: #41336a;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sh: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
  --sh-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
  --sh-pop: 0 8px 28px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
}

/* ---------------------------------------------------------------- reset --- */

* { box-sizing: border-box; }

/* The `hidden` attribute is only `display:none` from the user-agent stylesheet,
   so any author rule that sets `display` silently defeats it — which is how a
   dropzone ends up showing its empty prompt and its selected file at once. */
[hidden] { display: none !important; }

/* No image may force the page wider than the viewport. */
img { max-width: 100%; height: auto; }

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

body {
  margin: 0;
  font: 400 15px/1.55 var(--sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* The placer manages its own scrolling panes and needs a fixed height, not the
   global minimum: with min-height the column grows to fit its content, the
   inner pane is never constrained and never scrolls, while `overflow: hidden`
   stops the page scrolling either — leaving everything below the fold
   unreachable. dvh so a phone's collapsing chrome does not cut off a strip. */
body.no-scroll {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { letter-spacing: -.011em; }

::selection { background: var(--brand-soft); color: var(--text); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ====================================================== application shell === */

.app { display: flex; min-height: 100vh; align-items: stretch; }

.sidebar {
  width: var(--sidebar-w); flex: none;
  display: flex; flex-direction: column;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  position: sticky; top: 0; height: 100vh;
  z-index: 50;
}

/* The logo and the collapse toggle share the top row of the sidebar. */
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 22px 14px 18px 22px; flex: none; }
.side-brand { display: flex; align-items: center; flex: none; min-width: 0; }
.collapse-toggle {
  flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--text-3); cursor: pointer;
}
.collapse-toggle:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.collapse-toggle svg { transition: transform .18s ease; }
/* 34px tall is ~150px wide: it fills the sidebar's width without crowding the
   Create new button, and the 99px-tall source stays sharp on a 2x screen. */
.side-brand img { height: 34px; width: auto; max-width: 100%; display: block; }
.side-brand:hover { text-decoration: none; }

.side-cta { padding: 2px 16px 14px; flex: none; }
.btn-create {
  width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 700;
  border-radius: var(--r);
  box-shadow: 0 6px 16px var(--brand-ring), 0 1px 2px rgba(14, 20, 32, .08);
}

/* "Create new" opens a short menu of what to start, rather than going straight
   to an upload — a template is as common a starting point as a blank PDF. */
.create-menu { position: relative; }
.create-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.create-menu > summary::-webkit-details-marker { display: none; }
.create-menu > summary .chev { margin-left: auto; transition: transform .15s; }
.create-menu[open] > summary .chev { transform: rotate(180deg); }
.create-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
}
.create-pop a {
  display: block; padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 550; color: var(--text);
}
.create-pop a small { display: block; font-size: 12px; font-weight: 400; color: var(--text-3); margin-top: 1px; }
.create-pop a:hover { background: var(--surface-2); text-decoration: none; }

/* ---- collapsing to a rail of icons (wide screens only) ----
   Labels hide and become tooltips (every item has a title), the wordmark gives
   way to the square mark, and Documents shows as one icon because its
   sub-items have nowhere to go. Below the drawer breakpoint none of this
   applies: there the sidebar is a full-width drawer either way. */
.side-brand .brand-mark { display: none; }
.side-nav .side-docs-rail { display: none; }
.sidebar { transition: width .18s ease; }

@media (min-width: 901px) {
  :root[data-sidebar="collapsed"] { --sidebar-w: 76px; }
  :root[data-sidebar="collapsed"] .sidebar .nav-label,
  :root[data-sidebar="collapsed"] .sidebar .chev,
  :root[data-sidebar="collapsed"] .side-group,
  :root[data-sidebar="collapsed"] .side-foot,
  :root[data-sidebar="collapsed"] .side-brand .brand-full { display: none; }
  :root[data-sidebar="collapsed"] .side-nav .side-docs-rail { display: flex; }
  /* Collapsed, the toggle drops under the mark and points the other way. */
  :root[data-sidebar="collapsed"] .side-top { flex-direction: column; gap: 10px; padding: 22px 0 14px; }
  :root[data-sidebar="collapsed"] .collapse-toggle svg { transform: rotate(180deg); }
  :root[data-sidebar="collapsed"] .side-brand .brand-mark { display: block; width: 32px; height: 32px; }
  :root[data-sidebar="collapsed"] .side-cta { padding: 2px 14px 14px; }
  :root[data-sidebar="collapsed"] .btn-create { padding: 12px 0; gap: 0; }
  /* The menu cannot fit inside a 76px rail, so it opens out over the page. */
  :root[data-sidebar="collapsed"] .create-pop { right: auto; width: 250px; }
  :root[data-sidebar="collapsed"] .side-nav { padding-left: 12px; padding-right: 12px; }
  :root[data-sidebar="collapsed"] .side-nav a { justify-content: center; gap: 0; padding: 11px 0; }
  :root[data-sidebar="collapsed"] .side-sect { display: none; }
}
/* In the phone drawer there is nothing to collapse to. */
@media (max-width: 900px) {
  .collapse-toggle { display: none; }
}

.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px 12px; flex: 1; overflow-y: auto; }
.side-sect {
  font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); padding: 16px 12px 6px;
}
.side-nav a, .side-group > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r);
  font-size: 14.5px; font-weight: 550; color: var(--text-2);
  line-height: 1.2; cursor: pointer;
}
.side-nav a:hover, .side-group > summary:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.side-nav svg { flex: none; opacity: .8; }
.side-nav a.active, .side-group > summary.active {
  background: var(--brand-soft); color: var(--brand); font-weight: 650;
}
.side-nav a.active svg { opacity: 1; }

/* Documents is a collapsible group; its children are the status filters. */
.side-group > summary { list-style: none; user-select: none; }
.side-group > summary::-webkit-details-marker { display: none; }
.side-group > summary .chev { margin-left: auto; opacity: .6; transition: transform .15s; }
.side-group:not([open]) > summary .chev { transform: rotate(-90deg); }
.side-sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px 42px; }
.side-nav .side-sub a {
  padding: 7px 10px; font-size: 13.5px; font-weight: 500; color: var(--text-3); border-radius: var(--r-sm);
}
.side-nav .side-sub a.active { background: none; color: var(--brand); font-weight: 650; }

.side-foot { flex: none; padding: 14px 22px 16px; border-top: 1px solid var(--border); }
.side-org {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 13px; font-weight: 650; color: var(--text);
}
.side-org svg { color: var(--brand); flex: none; }
.side-org span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-ver { font-size: 11.5px; color: var(--text-3); margin-top: 8px; font-family: var(--mono); }

.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--text); color: var(--surface);
  font-size: 12.5px; font-weight: 750; letter-spacing: .03em;
}

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---- top bar: search and the account menu ---- */
.app-topbar {
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 0 28px; flex: none;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
/* The drawer toggle and the logo only appear once the sidebar is a drawer. */
.app-topbar .nav-toggle, .app-topbar .brand { display: none; }

.top-search { position: relative; flex: 0 1 480px; margin: 0; }
.top-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.top-search input[type=search] {
  width: 100%; padding: 10px 14px 10px 38px; border-radius: var(--r);
  background: var(--surface); font-size: 14px;
}

.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.user-menu { position: relative; }
.user-menu > summary {
  display: flex; align-items: center; gap: 11px;
  list-style: none; cursor: pointer; border-radius: 999px; padding: 2px 2px 2px 8px;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover .avatar { box-shadow: 0 0 0 3px var(--brand-ring); }
.user-menu .who-name {
  font-size: 14px; font-weight: 650; color: var(--text);
  max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 250px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
}
.menu-head { padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.menu-head .who-name { max-width: none; }
.menu-head .who-mail { font-size: 12.5px; color: var(--text-3); margin: 1px 0 7px; overflow-wrap: anywhere; }
.menu-pop form { margin: 0; }
.menu-pop a, .menu-pop button {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--r-sm); border: 0; background: none;
  font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer;
}
.menu-pop a:hover, .menu-pop button:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

.sidebar-scrim {
  position: fixed; inset: 0; background: rgba(8, 11, 18, .5);
  z-index: 45; backdrop-filter: blur(1px);
}

/* ------------------------------------------------------------ public shell -- */

.pub { min-height: 100vh; display: flex; flex-direction: column; }
.pub-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px; flex: none;
}
.pub-bar .brand { display: flex; align-items: center; flex: none; margin-right: auto; }
.pub-bar .brand img { height: 22px; width: auto; display: block; }
.pub-bar .brand:hover { text-decoration: none; }
.pub-bar nav { display: flex; gap: 16px; align-items: center; }
.pub-bar nav a { font-size: 14px; color: var(--text-2); font-weight: 500; }
.pub-bar nav a:hover { color: var(--text); text-decoration: none; }

/* ---- the signing page's own bar, which has no sidebar ---- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px; min-height: 56px; flex: none;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.topbar .brand { display: flex; align-items: center; flex: none; }
.topbar .brand img { height: 22px; width: auto; display: block; }
.topbar nav { display: flex; gap: 16px; margin-right: auto; min-width: 0; }
.topbar .who {
  color: var(--text-3); font-size: 13px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 720px) {
  .topbar { gap: 12px; padding: 8px 12px; flex-wrap: wrap; min-height: 0; }
  .topbar .brand img { height: 19px; }
  .topbar .who { display: none; }
}

.inline { display: flex; align-items: center; margin: 0; }

/* ---- centred card for sign-in, invitations and password resets ---- */
.auth {
  max-width: 420px; margin: 56px auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 30px 28px; box-shadow: var(--sh);
}
.auth h1 { font-size: 22px; margin: 0 0 6px; font-weight: 680; }
.auth .sub { color: var(--text-3); margin: 0 0 22px; font-size: 14px; }
@media (max-width: 620px) { .auth { margin: 24px auto; padding: 24px 18px; } }

/* --------------------------------------------------------------- layout ---- */

main { flex: 1 0 auto; padding: 32px 0 56px; }
.app-main main { padding: 30px 0 56px; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 540px; margin: 0 auto; padding: 0 22px; }

.page-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 26px; }
.page-head h1 { margin: 0; font-size: 25px; font-weight: 680; }
.page-head .sub { margin: 5px 0 0; color: var(--text-3); font-size: 14px; }
.page-head .spacer { margin-left: auto; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: var(--sh-sm);
}
.card + .card { margin-top: 16px; }
.card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 640; }
.card h2 + .hint { margin-top: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- forms ---- */

label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=url], input[type=date], input[type=search], select, textarea {
  width: 100%; padding: 10px 12px;
  font: inherit; font-size: 14px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: .75; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
textarea { min-height: 84px; resize: vertical; }

.field { margin-bottom: 15px; }
.hint { color: var(--text-3); font-size: 13px; margin: 6px 0 0; line-height: 1.5; }

.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; color: var(--text-2); }
.check input { margin-top: 2px; flex: none; accent-color: var(--brand); width: 16px; height: 16px; }

input[type=file]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2); cursor: pointer;
}
input[type=file]::file-selector-button:hover { border-color: var(--brand); color: var(--brand); }
input[type=file] { font-size: 13px; color: var(--text-3); }

/* -------------------------------------------------------------- buttons ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--brand); color: var(--brand-fg);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--brand-strong); color: var(--brand-fg); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-ghost { background: var(--surface); color: var(--text-2); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }

.btn-danger { background: var(--surface); color: var(--bad); border-color: var(--bad-line); }
.btn-danger:hover { background: var(--bad-bg); color: var(--bad); }

.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.link-btn {
  background: none; border: 0; color: var(--brand); cursor: pointer;
  font: inherit; font-size: 14px; padding: 6px 2px;
}

.icon-btn {
  flex: none; display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2); cursor: pointer;
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand); }

.theme-toggle { composes: icon-btn; }
.theme-toggle {
  flex: none; display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2); cursor: pointer;
}
.theme-toggle:hover { color: var(--brand); border-color: var(--brand); }
.theme-toggle svg { display: block; grid-area: 1 / 1; }
/* Each theme shows the icon for the theme you would switch *to*. */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* ------------------------------------------------------------- messages ---- */

.flash, .notice {
  padding: 12px 15px; border-radius: var(--r); font-size: 14px;
  margin: 18px 0 0; border: 1px solid; line-height: 1.5;
}
.flash-ok, .notice-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.flash-error, .notice-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.notice-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.notice-info { background: var(--brand-soft); border-color: var(--border); color: var(--text-2); }
.flash a, .notice a { color: inherit; text-decoration: underline; font-weight: 600; }

/* --------------------------------------------------------------- tables ---- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); padding: 0 12px 10px; font-weight: 650;
}
td { padding: 13px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background .1s; }
tbody tr:hover td { background: var(--surface-2); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  background: var(--surface-3); color: var(--text-2);
}
.pill::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .8;
}
.pill-completed, .pill-signed { background: var(--ok-bg); color: var(--ok); }
.pill-sent { background: var(--brand-soft); color: var(--brand); }
.pill-draft, .pill-pending { background: var(--surface-3); color: var(--text-2); }
.pill-declined, .pill-expired { background: var(--bad-bg); color: var(--bad); }
.pill-viewed { background: var(--warn-bg); color: var(--warn); }

.mono { font-family: var(--mono); font-size: 12px; word-break: break-all; color: var(--text-2); }
.empty { text-align: center; padding: 52px 20px; color: var(--text-3); }

.role-tag {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

/* ---------------------------------------------------------- audit trail ---- */

.audit { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.audit li {
  display: grid; grid-template-columns: 182px 1fr; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--border);
}
.audit li:first-child { border-top: 0; }
.audit li > div { min-width: 0; }
.audit time { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.audit .who { font-weight: 640; }
/* Audit details carry bare SHA-256 digests, which offer no break opportunity
   and will push the page sideways unless told they may break anywhere. */
.audit .det {
  color: var(--text-3); display: block; font-size: 12.5px;
  overflow-wrap: anywhere; word-break: break-word;
}
@media (max-width: 760px) { .audit li { grid-template-columns: 1fr; gap: 3px; } }

/* -------------------------------------------------------------- hashes ----- */

.hash-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 13px 15px;
}
.hash-box .k {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); margin-bottom: 4px; font-weight: 650;
}

.verdict {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 17px 19px; border-radius: var(--r-lg); border: 1px solid; margin-bottom: 18px;
}
.verdict .icon { font-size: 26px; line-height: 1; }
.verdict h2 { margin: 0 0 4px; font-size: 17px; }
.verdict p { margin: 0; font-size: 14px; }
.verdict-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.verdict-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.verdict-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }

/* ------------------------------------------------------------- dropzone ---- */

.dropzone {
  position: relative; display: block;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface-2); padding: 32px 20px;
  text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--brand); background: var(--brand-soft); }
/* Clipped rather than hidden, so it stays focusable and the browser's own
   "required" validation can still point at it. */
.dropzone input[type=file] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.dropzone:has(input:focus-visible) {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring);
}
.dropzone.is-over {
  border-color: var(--brand); border-style: solid; background: var(--brand-soft);
  box-shadow: inset 0 0 0 3px var(--brand-ring);
}
.dropzone.has-file {
  border-style: solid; border-color: var(--border); background: var(--surface);
  padding: 16px; text-align: left;
}
.dropzone.is-invalid { border-color: var(--bad); background: var(--bad-bg); }

.dz-icon { color: var(--text-3); margin-bottom: 10px; }
.dropzone:hover .dz-icon, .dropzone.is-over .dz-icon { color: var(--brand); }
.dz-title { margin: 0 0 4px; font-size: 15px; font-weight: 640; color: var(--text); }
.dz-sub { margin: 0; font-size: 13px; color: var(--text-3); }
.dz-browse { color: var(--brand); font-weight: 600; text-decoration: underline; }

.dz-file { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; text-align: left; }
.dz-file-icon { color: var(--brand); flex: none; }
.dz-name { font-size: 14px; font-weight: 640; color: var(--text); word-break: break-all; }
.dz-meta { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.dz-clear {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  border-radius: var(--r-sm); padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.dz-clear:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.dz-error { margin: 9px 0 0; font-size: 13px; color: var(--bad); font-weight: 600; }

/* ====================================================== the field placer === */

.placer { display: grid; grid-template-columns: 252px 1fr 252px; grid-template-rows: auto auto 1fr; flex: 1; min-height: 0; }
.placer > .steps { grid-column: 1 / -1; }
body.no-scroll { display: flex; flex-direction: column; }

.placer-bar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
  padding: 11px 18px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.placer-bar h1 { font-size: 15px; margin: 0; font-weight: 640; }
.placer-bar .spacer { margin-left: auto; }
.placer-bar .brand img { height: 22px; width: auto; display: block; }
.placer-bar .brand-compact img { height: 24px; width: 24px; }

.palette { background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; padding: 16px; }
.palette h3 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); margin: 20px 0 9px; font-weight: 650;
}
.palette h3:first-child { margin-top: 0; }
/* Who the next field belongs to: a picker with their colour under it. */
.recip-pick { margin-bottom: 16px; }
.recip-pick select { font-weight: 600; font-size: 13.5px; padding: 9px 10px; }
.recip-bar {
  display: block; height: 4px; margin-top: 8px; border-radius: 99px;
  background: var(--active-recip, var(--brand)); transition: background .15s;
}

.palette-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Field tiles: an icon over a name. The hover takes the active recipient's
   colour — the colour the field will have once it lands. */
.chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 70px; padding: 10px 6px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  font-size: 12.5px; font-weight: 650; text-align: center; line-height: 1.2;
  color: var(--text); cursor: grab; user-select: none;
  transition: border-color .12s, color .12s, background .12s, box-shadow .12s;
}
.chip svg { color: var(--text-2); transition: color .12s; }
.chip:hover {
  border-color: var(--active-recip, var(--brand)); color: var(--active-recip, var(--brand));
  background: color-mix(in srgb, var(--active-recip, var(--brand)) 7%, var(--surface));
}
.chip:hover svg { color: inherit; }
/* Fields fixed by the author belong to no one, so they keep the neutral colour. */
.chip.chip-static:hover { border-color: var(--text-3); color: var(--text); background: var(--surface-2); }
.chip:active { cursor: grabbing; }
.chip.armed {
  border-color: var(--active-recip, var(--brand)); background: var(--active-recip, var(--brand)); color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--active-recip, var(--brand)) 25%, transparent);
}
.chip.armed svg { color: #fff; }
.palette-hint { margin: 16px 2px 0; font-size: 12.5px; line-height: 1.5; }

/* The right column: pages until a field is selected, then that field. */
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-head h3 { margin: 0; }
.pages-panel { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.pages-panel h3 { display: flex; align-items: center; gap: 8px; }

/* Page thumbnails, shared with the signing page. */
.thumbs { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 2px 4px 12px; flex: 1; min-height: 0; }
.thumb {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--text-3);
}
.thumb-paper {
  position: relative; display: block; width: 100%; max-width: 160px;
  background: #fff; border-radius: 4px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--border), var(--sh-sm);
  transition: box-shadow .12s;
}
.thumb-paper canvas { display: block; width: 100%; height: auto; min-height: 60px; }
.thumb:hover .thumb-paper { box-shadow: 0 0 0 1px var(--border-strong), var(--sh-lg); }
.thumb.current .thumb-paper { box-shadow: 0 0 0 2px var(--brand), var(--sh-sm); }
.thumb-num {
  font-size: 11.5px; font-weight: 650; min-width: 22px; padding: 1px 7px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface); font-variant-numeric: tabular-nums;
}
.thumb.current .thumb-num { background: var(--brand); border-color: var(--brand); color: var(--brand-fg); }
.thumb-marks { position: absolute; inset: 0; pointer-events: none; }
.thumb-mark {
  position: absolute; min-width: 3px; min-height: 3px; border-radius: 1px;
  background: color-mix(in srgb, var(--mark, var(--brand)) 55%, transparent);
  border: 1.5px solid var(--mark, var(--brand));
}
/* On the signing page: what is still to do stands out, what is done is quiet. */
.thumb-mark.todo { --mark: #e8a317; }
.thumb-mark.done { --mark: #1f9d61; }
.thumb-mark.theirs { --mark: #9aa3b2; opacity: .6; }

/* Alignment guides while dragging: magenta, the convention in design tools,
   and a colour no recipient is given. */
.align-guide { position: absolute; z-index: 4; pointer-events: none; background: #e0249a; }
.align-guide.align-v { top: 0; bottom: 0; width: 1px; margin-left: -.5px; }
.align-guide.align-h { left: 0; right: 0; height: 1px; margin-top: -.5px; }

.canvas-area {
  overflow: auto; padding: 24px; background: var(--surface-3);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior: contain;
}

.pdf-page {
  position: relative; margin: 0 auto 20px; background: var(--paper);
  box-shadow: var(--sh-lg); overflow: hidden; border-radius: 2px;
}
.pdf-page canvas { display: block; }
/* A PDF page is white paper in both themes, so everything overlaid on it keeps
   dark ink. Inheriting the theme's text colour would put pale grey labels on a
   white page in dark mode — invisible, and only for some users. */
.pdf-page { color: var(--paper-ink); }

.page-num {
  position: absolute; top: 7px; left: 7px; z-index: 3;
  background: rgba(14, 20, 32, .62); color: #fff; font-size: 10px;
  padding: 2px 7px; border-radius: 5px; pointer-events: none; font-weight: 600;
}
.grid-on .pdf-page::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(to right, rgba(18, 102, 224, .10) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(18, 102, 224, .10) 1px, transparent 1px);
  background-size: 20px 20px;
}

.fld {
  position: absolute; z-index: 2; box-sizing: border-box;
  /* The field owns any touch that starts on it, so dragging one moves it
     instead of scrolling the page out from under your finger. */
  touch-action: none;
  border: 1.5px solid var(--recip-color, var(--brand));
  background: color-mix(in srgb, var(--recip-color, var(--brand)) 13%, transparent);
  border-radius: 4px; cursor: move; font-size: 10.5px; color: var(--paper-ink);
  display: flex; align-items: center; padding: 0 5px;
  overflow: hidden; white-space: nowrap;
}
.fld.selected { outline: 2px solid var(--paper-ink); outline-offset: 1px; z-index: 5; }
.fld .lbl { pointer-events: none; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.fld .handle {
  position: absolute; right: -4px; bottom: -4px; width: 11px; height: 11px;
  background: #fff; border: 1.5px solid var(--recip-color, var(--brand));
  border-radius: 2px; cursor: nwse-resize;
}
.fld .del {
  position: absolute; top: -9px; right: -9px; width: 18px; height: 18px;
  border-radius: 50%; border: 0; background: var(--bad); color: #fff;
  font-size: 12px; line-height: 1; cursor: pointer; display: none; padding: 0;
}
.fld.selected .del { display: block; }

.inspector { background: var(--surface); border-left: 1px solid var(--border); overflow-y: auto; padding: 16px; }
.inspector h3 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); margin: 0 0 12px; font-weight: 650;
}
.inspector .field { margin-bottom: 12px; }
.inspector label { font-size: 12px; }
.inspector input, .inspector select, .inspector textarea { font-size: 13px; padding: 8px 10px; }

/* Zoom: one pill — out, the size, in, and Fit. */
.zoombar {
  display: inline-flex; align-items: stretch; height: 34px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden;
}
.zoombar button, .zoombar span {
  display: grid; place-items: center; min-width: 38px; padding: 0 10px;
  border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 650;
}
.zoombar button { cursor: pointer; }
.zoombar button:hover { background: var(--surface-2); color: var(--brand); }
.zoombar span { min-width: 62px; font-size: 13px; border-inline: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.zoombar .zoom-fit { font-size: 13px; border-left: 1px solid var(--border); }
.zoombar .zoom-fit.on { color: var(--brand); background: var(--brand-soft); }

.placer-toggle { display: none; }

/* guidance over the document, because a hint in the toolbar goes unread */
.placer-banner {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  margin: -6px 0 16px; padding: 13px 15px;
  background: var(--brand); color: var(--brand-fg);
  border-radius: var(--r); font-size: 14px; font-weight: 640;
  box-shadow: var(--sh-pop);
}
.placer-banner #banner-text { flex: 1; }
.banner-cancel {
  flex: none; border: 1px solid rgba(255, 255, 255, .45); background: transparent;
  color: var(--brand-fg); border-radius: var(--r-sm); padding: 7px 13px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.banner-cancel:hover { background: rgba(255, 255, 255, .16); }

.placer-empty {
  max-width: 460px; margin: 0 auto 18px; padding: 18px 20px;
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  text-align: center; color: var(--text-2); font-size: 13.5px; line-height: 1.55;
  box-shadow: var(--sh-sm);
}
.placer-empty strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 5px; }
.placer-empty b { color: var(--brand); }
.only-narrow { display: none; }

/* ======================================================== the signing page == */

/* The document takes the full width; the signer's controls are one slim bar
   that stays in reach, and everything else is a popup when it is needed. */
.sign-doc { padding: 24px 24px 48px; background: var(--surface-3); flex: 1 0 auto; }
.sign-doc #pages { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* The pages pane: beside the document on a wide screen, gone where it would
   squeeze the page. It follows the scroll, just under the signing bar. */
.sign-pages { display: none; }
@media (min-width: 1180px) {
  .sign-doc { display: grid; grid-template-columns: 1fr 190px; gap: 24px; align-items: start; }
  .sign-pages {
    display: flex; flex-direction: column; position: sticky; top: 124px;
    max-height: calc(100vh - 148px); padding: 14px 10px 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  }
  .sign-pages h3 {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-3); margin: 0 4px 12px; font-weight: 650;
  }
}
.sign-pages-key { display: flex; align-items: center; gap: 6px; margin: 10px 4px 0; font-size: 11.5px; color: var(--text-3); }
.sign-pages-key .key { width: 10px; height: 10px; border-radius: 2px; border: 1.5px solid #e8a317; background: color-mix(in srgb, #e8a317 55%, transparent); }
.sign-pages-key .key.done { border-color: #1f9d61; background: color-mix(in srgb, #1f9d61 55%, transparent); margin-left: 8px; }
/* A short document must not leave a pale band between it and the bar. */
body:has(.sign-doc) { background: var(--surface-3); }

.sign-bar {
  position: sticky; top: 56px; z-index: 30;
  background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--sh-sm);
}
.sign-bar-inner {
  max-width: 908px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 10px;
}
.sign-progress { margin-right: auto; font-size: 13.5px; color: var(--text-2); }
.sign-progress strong { color: var(--text); font-variant-numeric: tabular-nums; }
.sign-decline { color: var(--text-3); font-size: 13.5px; }
.sign-decline:hover { color: var(--bad); }
.sign-error { max-width: 860px; margin: 0 auto 10px; }

/* Finish takes the emphasis once nothing required is left. */
.btn.pulse-btn { animation: pulse-btn 1.6s ease-out 2; }
@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 0 0 0 var(--brand-ring); }
  40% { box-shadow: 0 0 0 8px var(--brand-ring); }
}

/* The welcome popup: who is asking, the message, what signing records, consent. */
.modal.welcome { width: min(600px, 100%); }
.welcome-message {
  margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--brand);
  background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14px; color: var(--text-2); white-space: pre-line;
}
.welcome-terms {
  padding: 13px 15px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
}
.welcome-terms strong { display: block; margin-bottom: 5px; color: var(--text); font-size: 13px; }
.welcome-consent { margin: 16px 0 6px; }
.welcome-actions { justify-content: space-between; margin-top: 14px; }
.welcome-fine { font-size: 11.5px; margin-top: 12px; }

.sfld {
  position: absolute; z-index: 2; box-sizing: border-box; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; overflow: hidden; padding: 0 4px;
}
.sfld.mine { border: 1.5px dashed var(--brand); background: rgba(18, 102, 224, .10); cursor: pointer; }
.sfld.mine:hover { background: rgba(18, 102, 224, .18); }
.sfld.mine.done { border-style: solid; border-color: #10663f; background: rgba(16, 102, 63, .09); cursor: pointer; }
.sfld.theirs { border: 1px dashed var(--paper-line); background: rgba(0, 0, 0, .02); color: var(--paper-muted); pointer-events: none; }
.sfld img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sfld .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: center; }
.sfld.pulse { animation: pulse 1.1s ease-out 2; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(18, 102, 224, 0); }
  40% { box-shadow: 0 0 0 7px rgba(18, 102, 224, .3); }
}

/* ---------------------------------------------------------------- modal ---- */

.modal-back {
  position: fixed; inset: 0; background: rgba(8, 11, 18, .58); z-index: 100;
  display: grid; place-items: center; padding: 20px;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--surface); border-radius: var(--r-xl); padding: 26px;
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  box-shadow: var(--sh-pop); border: 1px solid var(--border);
}
.modal h2 { margin: 0 0 4px; font-size: 18px; font-weight: 650; }
.modal .sub { color: var(--text-3); font-size: 13.5px; margin: 0 0 18px; }

.tabs { display: flex; gap: 4px; margin-bottom: 15px; border-bottom: 1px solid var(--border); }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 15px;
  font: inherit; font-size: 13.5px; color: var(--text-3); cursor: pointer;
}
.tabs button.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 640; }

/* The signature pad stays white in both themes: whatever is drawn here is
   stamped into a white PDF, so the ink must be dark. The pad also owns every
   touch that starts on it — otherwise the browser treats a drag as a scroll of
   the sheet, cancels the pointer stream mid-stroke, and nothing is drawn. */
.pad-wrap { border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--paper); position: relative; }
.pad-wrap canvas {
  display: block; width: 100%; height: 170px;
  touch-action: none; -ms-touch-action: none;
  overscroll-behavior: contain; cursor: crosshair;
}
.pad-wrap .baseline { position: absolute; left: 22px; right: 22px; bottom: 38px; border-bottom: 1px dashed var(--paper-line); pointer-events: none; }
.typed-preview {
  border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--paper); height: 112px;
  display: grid; place-items: center; font-size: 34px; color: #10233f;
  font-family: "Segoe Script", "Brush Script MT", cursive;
}

/* ------------------------------------------------------------ dashboard ---- */

.wrap-wide { max-width: 1320px; }


.banner {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; margin-bottom: 26px;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.banner-icon {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
}
.banner-body { flex: 1; min-width: 0; }
.banner-body strong { font-size: 15px; font-weight: 700; }
.banner-body p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); }

.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 4px 0 26px; }
.hello {
  margin: 0; font-size: 30px; line-height: 1.15; font-weight: 820;
  text-transform: uppercase; letter-spacing: -.01em;
}
.dash-head .sub { margin: 6px 0 0; font-size: 16px; color: var(--text-2); }

.eyebrow {
  margin: 0 0 6px; font-size: 11.5px !important; font-weight: 750 !important;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-2);
}

.needs { border-left: 4px solid var(--brand); padding: 20px 24px 14px; }
.all-clear { text-align: center; padding: 18px 12px 16px; }
.all-clear svg { color: var(--ok); display: block; margin: 0 auto; }
.all-clear strong { display: block; font-size: 16px; margin: 10px 0 4px; }
.all-clear p { margin: 0; font-size: 14px; color: var(--text-2); }

.needs-list { list-style: none; margin: 0; padding: 0; }
.need {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.need:first-child { border-top: 0; }
.need-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.need-sign .need-icon { background: var(--vio-bg); color: var(--vio); }
.need-declined .need-icon { background: var(--bad-bg); color: var(--bad); }
.need-stale .need-icon { background: var(--warn-bg); color: var(--warn); }
.need-text { min-width: 0; color: var(--text); }
.need-text:hover { text-decoration: none; }
.need-text:hover strong { color: var(--brand); }
.need-text strong { display: block; font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.need-text span { display: block; font-size: 13px; color: var(--text-3); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.stats .card + .card { margin-top: 0; }
.stat { padding: 18px 20px; }
.stat-label { font-size: 13px; color: var(--text-2); }
.stat-value {
  margin: 6px 0 4px; font-size: 30px; line-height: 1.1; font-weight: 820;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.stat-note { font-size: 12.5px; color: var(--text-3); }

.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.col {
  --c: var(--brand); --c-bg: var(--brand-soft); --c-line: var(--border);
  display: flex; flex-direction: column; min-height: 270px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.col-me { --c: var(--vio); --c-bg: var(--vio-bg); --c-line: var(--vio-line); }
.col-declined { --c: var(--bad); --c-bg: var(--bad-bg); --c-line: var(--bad-line); }
.col-completed { --c: var(--ok); --c-bg: var(--ok-bg); --c-line: var(--ok-line); }
.col-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; background: var(--c-bg); color: var(--c);
  border-bottom: 1px solid var(--c-line); font-size: 14.5px; font-weight: 650;
}
.col-count {
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; border: 2px solid currentColor;
  font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.col-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 18px; text-align: center; color: var(--text-3);
}
.col-empty svg { opacity: .5; stroke-width: 1.4; }
.col-empty p { margin: 14px 0 0; font-size: 13.5px; color: var(--text-2); }
.col-list { list-style: none; margin: 0; padding: 6px 0; flex: 1; }
.col-list a { display: block; padding: 10px 16px; color: var(--text); }
.col-list a:hover { background: var(--surface-2); text-decoration: none; }
.col-list strong { display: block; font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-list span { display: block; font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-foot { display: block; padding: 11px; text-align: center; border-top: 1px solid var(--border); font-size: 13px; font-weight: 650; }

.totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.total {
  display: block; padding: 16px 20px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.total:hover { border-color: var(--brand); text-decoration: none; }
.total b { display: block; font-size: 24px; font-weight: 820; line-height: 1.15; font-variant-numeric: tabular-nums; }
.total span { font-size: 13px; color: var(--text-2); }

@media (max-width: 1180px) {
  .stats, .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .dash-head { flex-direction: column; }
  .hello { font-size: 24px; }
  .banner { flex-wrap: wrap; padding: 15px 16px; }
  .banner .btn { width: 100%; }
  .needs { padding: 16px 16px 10px; }
  .need { grid-template-columns: auto 1fr; }
  .need > form, .need > .btn { grid-column: 1 / -1; }
  .need > form .btn, .need > .btn { width: 100%; }
  .stats { gap: 10px; }
  .stat { padding: 14px 15px; }
  .stat-value { font-size: 24px; }
  .board { grid-template-columns: 1fr; }
  .col { min-height: 0; }
  .col-empty { padding: 20px 16px; flex-direction: row; gap: 12px; }
  .col-empty svg { width: 28px; height: 28px; }
  .col-empty p { margin: 0; }
  .totals { gap: 10px; }
  .total { padding: 13px 14px; }
  .total b { font-size: 20px; }
  .total span { font-size: 12px; }
}

/* ----------------------------------------------------- documents filters ---- */

.doc-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs-line { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
.tabs-line a {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--text-2);
}
.tabs-line a:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.tabs-line a.active { background: var(--brand-soft); color: var(--brand); }
.tab-count { font-size: 12px; font-weight: 700; opacity: .75; font-variant-numeric: tabular-nums; }
/* Desktop has the top bar's search; this one only shows once that is hidden. */
.doc-search { display: none; margin: 0 0 14px; width: 100%; }

/* ------------------------------------------------------------ settings ---- */

/* Each setting is a row: what it is and why on the left, the controls in a
   card on the right with its own Save in a footer. Rows are divided by a rule
   so the page reads as a list of separate decisions. */
.settings-page { max-width: 1040px; }
.set-notice { margin: 0 0 18px; }
.set-section {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px 40px;
  padding: 28px 0; border-top: 1px solid var(--border);
}
.set-section:first-of-type { border-top: 0; padding-top: 4px; }
.set-intro h2 { margin: 0 0 6px; font-size: 15.5px; font-weight: 680; }
.set-intro p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--text-3); }
.set-card { margin: 0; padding: 22px 24px; }
.set-card > :first-child { margin-top: 0; }
.set-card + .set-card { margin-top: 0; }

/* The footer bar: Save always bottom-right, anything else to its left. */
.set-foot {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px;
  margin: 22px -24px -22px; padding: 14px 24px;
  background: var(--surface-2); border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.set-foot-note { margin-right: auto; font-size: 12.5px; color: var(--text-3); }

.set-status {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650;
}
.set-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.set-status-ok { background: var(--ok-bg); color: var(--ok); }
.set-status-warn { background: var(--warn-bg); color: var(--warn); }

.set-meta { margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); }

@media (max-width: 900px) {
  .set-section { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
}
@media (max-width: 760px) {
  .set-card { padding: 17px 15px; }
  .set-foot { margin: 18px -15px -17px; padding: 12px 15px; }
  .set-foot-note { flex-basis: 100%; }
}

/* ------------------------------------------------------ locked sections ---- */

/* A section that waits on an earlier one — recipients wait for the PDF. A
   disabled fieldset switches off every control inside it at once. */
fieldset.card { margin: 0; min-width: 0; }
fieldset.card + .card, .card + fieldset.card { margin-top: 16px; }
.lockable .lock-note { display: none; margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--brand); }
.lockable:disabled > :not(h2):not(.lock-note) { opacity: .45; }
.lockable:disabled .lock-note { display: block; }

/* ---------------------------------------------------------- flow steps ---- */

/* Where the person is in a multi-page flow: send a document, use a template,
   make one. Done steps tick over in the brand colour, the current one is
   filled, the rest wait in outline; short rules join them. */
.steps {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0;
}
.step { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-3); white-space: nowrap; }
.step + .step::before {
  content: ''; width: 28px; height: 1.5px; margin: 0 12px 0 4px;
  background: var(--border-strong); border-radius: 1px;
}
.step-done + .step::before { background: var(--brand); }
.step-dot {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  font-size: 11.5px; font-weight: 750; color: var(--text-3);
}
.step-dot > * { grid-area: 1 / 1; }
.step-tick { display: none; }
.step-done .step-dot { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.step-done .step-tick { display: block; }
.step-done .step-num { display: none; }
.step-done { color: var(--text-2); }
.step-current .step-dot { background: var(--brand); border-color: var(--brand); color: var(--brand-fg); }
.step-current { color: var(--text); font-weight: 650; }

/* In the field editor it rides in a slim strip above the toolbar. */
.steps-compact { margin: 0; padding: 8px 18px; background: var(--surface); border-bottom: 1px solid var(--border); }
.steps-compact .step { font-size: 12.5px; }
.steps-compact .step-dot { width: 20px; height: 20px; font-size: 11px; }

@media (max-width: 620px) {
  /* A phone has room for the shape of the flow, not every label. */
  .step:not(.step-current) .step-label { display: none; }
  .step + .step::before { width: 16px; margin: 0 8px 0 2px; }
}

/* ------------------------------------------------------------ templates ---- */


.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.tpl-grid .card + .card { margin-top: 0; }
.tpl { display: flex; flex-direction: column; padding: 20px; }
.tpl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tpl-icon {
  width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.tpl .tpl-title { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; overflow-wrap: anywhere; }
.tpl-roles { margin: 0 0 4px; font-size: 13.5px; color: var(--text-2); }
.tpl-roles b { font-weight: 650; color: var(--text); }
.tpl-meta { margin: 0; font-size: 12.5px; color: var(--text-3); }
.tpl-warn { margin: 10px 0 0; font-size: 12.5px; color: var(--warn); }
.tpl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }

.vis {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px;
}
.vis-team { background: var(--ok-bg); color: var(--ok); }
.vis-private { background: var(--surface-3); color: var(--text-2); }

.choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  display: flex; gap: 11px; align-items: flex-start; margin: 0; cursor: pointer;
  padding: 14px 15px; border: 1.5px solid var(--border-strong); border-radius: var(--r);
  font-weight: 400; color: var(--text-2);
}
.choice input { margin-top: 3px; accent-color: var(--brand); width: 16px; height: 16px; flex: none; }
.choice strong { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 2px; }
.choice small { display: block; font-size: 13px; line-height: 1.45; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }

.role-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 10px; align-items: center; }

.use-role { padding: 14px 0; border-top: 1px solid var(--border); }
.use-role:first-child { border-top: 0; padding-top: 0; }
.use-role-label { display: flex; align-items: center; gap: 9px; font-weight: 700; margin-bottom: 10px; }
.use-role-label .step {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 750;
}

@media (max-width: 620px) {
  .choice-cards { grid-template-columns: 1fr; }
  .tpl-actions .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------- platform ---- */

/* The platform owner's link sits apart from the company's own navigation. */
.side-nav.side-platform { flex: none; padding-top: 10px; border-top: 1px solid var(--border); }

/* A company's own logo, beside its name and on its settings pages. */
/* Logos come in every shape; a wide wordmark squeezed into an icon-sized
   square shrinks to a sliver. So the logo gets its own row, up to the width of
   the sidebar, with the name beneath it. */
.side-org-has-logo { flex-direction: column; align-items: flex-start; gap: 7px; }
.side-org-logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 44px; object-fit: contain; }
.side-org-has-logo span { max-width: 100%; }
/* Most logos are drawn for white paper; on the dark sidebar a dark wordmark
   would disappear, so it sits on a paper-coloured backing there. */
:root[data-theme="dark"] .side-org-logo { background: var(--paper); padding: 4px 6px; border-radius: 6px; }
.logo-preview {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px;
  /* Paper, not the themed surface: the logo is shown as it will print. */
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r);
}
.logo-preview img { max-height: 56px; max-width: 220px; width: auto; height: auto; display: block; }
.logo-preview .hint { margin: 0; color: var(--paper-muted); }
/* A file picker has a wide intrinsic size, so the row wraps rather than overflowing a phone. */
.logo-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.logo-form input[type=file] { flex: 1 1 220px; min-width: 0; max-width: 100%; }

/* Platform support: impossible to miss, on every page, in both themes. */
.support-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: none;
  padding: 9px 20px; background: var(--vio); color: var(--surface);
  font-size: 13.5px;
}
.support-bar strong { font-weight: 700; }
.support-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--vio);
}
.support-text { flex: 1; min-width: 0; }
.support-bar form { margin: 0; }
.support-bar .support-exit { background: var(--surface); color: var(--vio); border-color: var(--surface); }
.support-bar .support-exit:hover { background: var(--vio-bg); color: var(--vio); }
@media (max-width: 620px) {
  /* The top bar carries its own Exit button, so the banner can give its whole
     width to saying who you are signed in as. */
  .support-bar { padding: 9px 14px; gap: 6px; }
  .support-bar form { display: none; }
  .support-text { flex-basis: 100%; }
}

/* The banner scrolls away with the page; this stays in the sticky top bar. */
.top-support { margin: 0; }
.top-support .btn { background: var(--vio); border-color: var(--vio); color: var(--surface); }
.top-support .btn:hover { background: var(--vio); filter: brightness(1.1); }

/* An irreversible action is set apart from the reversible ones above it. */
.danger-card { border-color: var(--bad-line); }
.danger-card h2 { color: var(--bad); }

/* A company's own SMTP fields only matter once it chooses its own server. */
.own-mail { display: none; }
.card:has(input[name=mail_source][value=own]:checked) .own-mail { display: block; }

/* --------------------------------------------------------------- footer ---- */

.app-main .siteftr .wrap { max-width: 1320px; }
/* One quiet row — who, and the three things worth knowing — then the legal
   caveat as fine print, rather than a paragraph of small text. */
.siteftr { border-top: 1px solid var(--border); padding: 18px 0 22px; margin-top: auto; flex-shrink: 0; }
.ftr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; }
.ftr-brand { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--text-3); }
.siteftr .ftr-logo { height: 18px; width: auto; max-width: 140px; display: block; opacity: .8; }
.ftr-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ftr-trust li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.ftr-trust svg { color: var(--text-3); flex: none; }
.siteftr .fine {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-3); line-height: 1.55;
}

.recipient-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; margin-bottom: 10px; align-items: start; }

/* ===========================================================================
   Small screens
   =========================================================================== */

@media (max-width: 1040px) {
  /* The editor's three panes stop fitting; palette and inspector become
     off-canvas drawers and the page gets the full width. */
  .placer { grid-template-columns: 1fr; }
  .placer-toggle { display: inline-flex; }

  .palette, .inspector {
    position: fixed; top: 0; bottom: 0; z-index: 70;
    width: min(290px, 86vw); overflow-y: auto;
    background: var(--surface); box-shadow: var(--sh-pop);
    transition: transform .2s ease;
  }
  .palette { left: 0; border-right: 1px solid var(--border); transform: translateX(-102%); }
  .inspector { right: 0; border-left: 1px solid var(--border); transform: translateX(102%); }
  .palette.open, .inspector.open { transform: none; }

  .drawer-scrim { position: fixed; inset: 0; background: rgba(8, 11, 18, .5); z-index: 65; }
  .canvas-area { padding: 12px; }

  /* Touch-sized: the palette is now tapped, not dragged. */
  .palette-grid { gap: 9px; }
  .chip { min-height: 64px; }
  .zoombar { height: 44px; }
  .recip-pick select { font-size: 16px; }
  .zoombar button { min-width: 42px; font-size: 18px; }

  /* The toolbar gains two drawer toggles here and the controls grow to touch
     size, so it must be allowed to wrap from the same breakpoint. */
  .placer-bar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
  .placer-bar h1 { font-size: 14px; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .placer-bar #save-state { order: 9; width: 100%; font-size: 11.5px; }
  .placer-bar > label.check { display: none; }

  .only-wide { display: none; }
  .only-narrow { display: inline; }
}

/* ---- the sidebar becomes a drawer ---- */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
    transform: translateX(-102%); transition: transform .2s ease;
    box-shadow: var(--sh-pop);
  }
  .sidebar.open { transform: none; }

  .app-topbar { gap: 12px; min-height: 0; padding: 10px 14px; }
  .app-topbar .nav-toggle { display: inline-grid; }
  .app-topbar .brand { display: flex; align-items: center; }
  .app-topbar .brand img { height: 26px; width: auto; display: block; }
  /* No room for search up here; the Documents page carries its own box. */
  .top-search, .user-menu > summary .who-name { display: none; }
  .top-right { gap: 8px; }
  .doc-search { display: block; }

  .wrap { padding: 0 16px; }
  .app-main main { padding: 20px 0 44px; }
}

/* ---- on a phone the signing bar moves to the bottom, within thumb reach ---- */
@media (max-width: 720px) {
  .sign-bar {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    border-bottom: 0; border-top: 1px solid var(--border); box-shadow: var(--sh-pop);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sign-bar-inner { padding: 10px 14px; gap: 8px; }
  .sign-progress { font-size: 12.5px; }
  .sign-doc { padding: 12px 10px calc(84px + env(safe-area-inset-bottom)); }
  .sign-error { margin: 0 14px 10px; }
}

@media (max-width: 820px) {
  /* iOS Safari zooms the whole page when a control smaller than 16px takes
     focus, and never zooms back out. This is the whole fix. */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=url], input[type=date], input[type=search], select, textarea { font-size: 16px; padding: 11px 13px; }

  /* 44px is the Apple/WCAG guideline; 40 is the floor. */
  .btn { padding: 12px 20px; min-height: 44px; }
  .btn-sm { padding: 10px 15px; min-height: 40px; font-size: 14px; }
  .link-btn { padding: 10px 4px; min-height: 40px; }
  .icon-btn, .theme-toggle { width: 40px; height: 40px; }
  .user-menu .avatar { width: 40px; height: 40px; }
  .tabs-line a { min-height: 40px; }
  .menu-pop a, .menu-pop button { min-height: 44px; }
  .side-nav a, .side-group > summary { min-height: 44px; }
  .side-nav .side-sub a { min-height: 40px; display: flex; align-items: center; }
  .check { padding: 4px 0; }
  .check input { width: 20px; height: 20px; }
  .btn-row .btn { flex: 1 1 auto; }
}

@media (max-width: 760px) {
  .wrap, .wrap-narrow { padding: 0 14px; }
  main { padding: 20px 0 40px; }
  .card { padding: 17px 15px; border-radius: var(--r); }
  .page-head { flex-direction: column; gap: 12px; margin-bottom: 18px; }
  .page-head .spacer { display: none; }
  .page-head h1 { font-size: 21px; }

  /* Tables become stacked cards. A five-column table cannot be squeezed into
     390px, and side-scrolling a table of record is a poor way to read one. */
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr {
    border: 1px solid var(--border); border-radius: var(--r);
    padding: 13px 15px; margin-bottom: 10px; background: var(--surface);
  }
  tbody tr:hover td { background: transparent; }
  td {
    border-top: 0; padding: 4px 0;
    display: grid; grid-template-columns: 94px 1fr; gap: 10px; align-items: start;
  }
  td::before {
    content: attr(data-label); font-size: 12px; font-weight: 650;
    color: var(--text-3); padding-top: 1px;
  }
  td[data-label=""]::before, td:not([data-label])::before { content: none; }
  td[data-label=""], td:not([data-label]) { grid-template-columns: 1fr; }
  /* Grid items stretch by default, which would inflate a pill to the full
     column width and make a one-word status look like a progress bar. */
  td > .pill { justify-self: start; }
  td.td-primary { grid-template-columns: 1fr; padding-bottom: 9px; }
  td.td-primary::before { content: none; }
  td.td-action { grid-template-columns: 1fr; text-align: left !important; padding-top: 11px; }
  td.td-action::before { content: none; }
  td.td-action .btn { width: 100%; }

  .hash-box .mono { font-size: 11px; }
  .verdict { flex-direction: column; gap: 9px; padding: 15px; }
  .siteftr { padding: 20px 0 28px; }
  .recipient-row { grid-template-columns: 1fr; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
  .recipient-row > div:last-child { padding-top: 0 !important; }
}

@media (max-width: 620px) {
  .modal-back { padding: 0; align-items: flex-end; }
  .modal {
    width: 100%; max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 22px 16px calc(20px + env(safe-area-inset-bottom));
  }
  .modal .btn-row { flex-direction: column-reverse; }
  .modal .btn-row .btn { width: 100%; margin-left: 0 !important; }
  /* A signature drawn on a phone needs as much room as the sheet can spare. */
  .pad-wrap canvas { height: 200px; }
  .tabs button { flex: 1; padding: 11px 6px; }
}

@media (max-width: 560px) {
  .placer-bar h1 { max-width: 30vw; }
  .placer-bar .btn-sm { padding: 9px 11px; }
  /* Autosave runs on every change and Send flushes before it posts, so the
     explicit button is reassurance the status line already provides. */
  .placer-bar #save-btn { display: none; }
  .placer-bar #save-state { order: 9; width: 100%; font-size: 11px; margin-top: -2px; }
  .zoombar { gap: 4px; }
  .pub-bar { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------ bulk send ---- */

.bulk-num {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 12.5px; font-weight: 700;
  vertical-align: 2px;
}
.bulk-cols { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.bulk-cols code {
  font-size: 12.5px; padding: 4px 8px; border-radius: 6px;
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text-2);
}
.bulk-table { overflow-x: auto; margin-top: 14px; }
.bulk-table td { vertical-align: top; }
tr.bulk-bad td { background: var(--bad-bg); }
.bulk-bad-text { color: var(--bad); font-weight: 600; }
.bulk-warn-text { color: var(--warn); font-weight: 600; }
.bulk-ok-text { color: var(--ok); font-weight: 600; }
.bulk-progress { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bulk-progress span { display: block; height: 100%; background: var(--brand); transition: width .3s; }
.bulk-summary { margin: 14px 0 6px; font-size: 15px; }