/* Webway Sign — a dark top bar, a page rail, one page, and a tool panel. */

@font-face {
  font-family: 'Sign Doc';
  src: url('/fonts/DejaVuSans.ttf') format('truetype');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'Sign Doc';
  src: url('/fonts/DejaVuSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: block;
}

:root {
  --ink: #0E2338;
  --ink-soft: #5C6E82;
  --ink-faint: #8C9AAA;
  --line: #DDE3EB;
  --line-soft: #EDF1F6;
  --bg: #EDF1F6;
  --panel: #ffffff;
  --field: #F8FAFC;
  --accent: #2E6BE6;
  --accent-dark: #1B4FBF;
  --accent-tint: #EEF4FF;
  --ok: #1F8A6B;
  --ok-tint: #E7F4EF;
  --warn: #8A6212;
  --warn-tint: #FDF3DF;
  --warn-line: #F2DFAE;
  --danger: #D75B45;
  --danger-dark: #C04B37;
  --danger-tint: #FDF0EC;
  --danger-line: #F2D3CB;
  --danger-edge: #EB755B;
  --avatar: #E9A92B;
  --script: 'Segoe Script', 'Brush Script MT', 'Lucida Handwriting', cursive;
  --radius: 10px;
  --topbar-h: 56px;
  --docbar-h: 68px;
}

* { box-sizing: border-box; }

/* Several elements below are display:flex/grid, which would otherwise beat the
   `hidden` attribute the JS toggles them with. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ── top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: var(--ink);
  color: #fff;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 10px;
  font-size: 15px;
  letter-spacing: -.01em;
  color: inherit;
  text-decoration: none;
}
.brand b { font-weight: 700; }
/* The wordmark is white artwork, so it only ever sits on the dark top bar. */
.brand-logo {
  display: block;
  height: 32px;
  width: auto;
  flex: none;
}

.topbar nav { display: flex; gap: 4px; }

.nav-link {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-link.active { background: rgba(255, 255, 255, .12); color: #fff; }

.who { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.who-tenant { font-size: 12px; color: rgba(255, 255, 255, .55); }
.who-name { font-size: 13px; }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--avatar);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

/* ── account chip + menu (top bar) ───────────────────────────────────────── */
.acct { position: relative; flex: none; }
.acct-chip {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 5px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .55);
}
.acct-chip:hover,
.acct-chip[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.acct-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct-chip .avatar { width: 28px; height: 28px; flex: none; font-size: 11px; letter-spacing: .02em; }
.acct-who { display: flex; flex-direction: column; line-height: 1.25; text-align: left; min-width: 0; }
.acct-name { font-size: 12.5px; font-weight: 600; color: #fff; }
.acct-tenant { font-size: 11px; color: rgba(255, 255, 255, .55); }

.acct-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 80;
  width: 238px; box-sizing: border-box; padding: 6px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 20px 44px -14px rgba(14, 35, 56, .55);
}
.acct-menu-head { padding: 10px 11px 11px; border-bottom: 1px solid var(--line-soft); margin-bottom: 5px; }
.acct-menu-name { font-size: 13px; font-weight: 600; }
.acct-menu-email { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; overflow-wrap: anywhere; }
.acct-menu form { margin: 0; }
.acct-menu-item {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
  font-size: 13px; color: var(--ink); text-decoration: none;
}
.acct-menu-item svg { color: var(--ink-soft); flex: none; }
.acct-menu-item:hover,
.acct-menu-item:focus-visible { background: #F4F6F9; }
.acct-menu-item.danger { font-weight: 600; color: var(--danger); }
.acct-menu-item.danger svg { color: currentColor; }
.acct-menu-item.danger:hover,
.acct-menu-item.danger:focus-visible { background: var(--danger-tint); }
.acct-menu-rule { height: 1px; background: var(--line-soft); margin: 5px 0; }

@media (max-width: 480px) {
  .topbar { gap: 8px; padding: 0 14px; }
  /* The wordmark is 32px everywhere now — a phone's bar has no room for more beside
     the nav and the account chip, and the bar reads the same on a desktop. */
  .acct-who,
  .acct-chip svg { display: none; }
  .acct-chip { padding: 3px; }
}

.btn.on-dark {
  border-color: rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .9);
  background: transparent;
}
.btn.on-dark:hover:not(:disabled) { border-color: #fff; color: #fff; }

.spacer { flex: 1; }

/* ── layout ──────────────────────────────────────────────────────────────── */

/* The editor fills the window below the top bar and scrolls internally, so the
   page rail and the document scroll independently. Every other page just flows. */
.editor {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h));
}

.layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── document bar ────────────────────────────────────────────────────────── */

.docbar {
  height: var(--docbar-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.back-tile {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 15px;
  text-decoration: none;
}
.back-tile:hover { border-color: var(--ink-faint); color: var(--ink); }

.doc-id { min-width: 0; }
.doc-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-meta { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
/* The folder path can run long (nested, long names); it is the one part of
   .doc-meta that gets its own ellipsis rather than pushing the docbar wide. */
.doc-folder { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; vertical-align: bottom; }
.doc-folder a, .doc-folder span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-folder a { color: var(--ink-soft); text-decoration: none; }
.doc-folder a:hover { color: var(--accent-dark); text-decoration: underline; }
@media (max-width: 520px) { .doc-folder { max-width: 110px; } }

.placed-count { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.save-state { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

/* ── pills ───────────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.pill.ok { background: var(--ok-tint); color: var(--ok); }
.pill.warn { background: var(--warn-tint); color: var(--warn); border: 1px solid var(--warn-line); }
.pill.off { background: #fdecea; color: #8a231c; }
/* Sign-in trail (app/sign-ins.html): an unusual sign-in's row, and a failed one's action. */
.grid tr.row-flag td { background: var(--warn-tint); }
.text-bad { color: #8a231c; font-weight: 600; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.status { padding: 5px 10px; font-size: 12px; }

/* ── page rail ───────────────────────────────────────────────────────────── */

.page-rail {
  width: 104px;
  flex: 0 0 104px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 14px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 0;
}

.rail-label {
  font-size: 10px;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--ink-faint);
}

.rail-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
  width: 100%;
}

.rail-foot { font-size: 10px; color: var(--ink-faint); }

.thumb {
  position: relative;
  flex: none;
  width: 66px; height: 86px;
  border: 0;
  padding: 0 0 5px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
}
.thumb:hover { box-shadow: 0 0 0 1px var(--ink-faint); }
.thumb.current { box-shadow: 0 0 0 2px var(--accent); }

/* A skeleton, not a render: a rail of real page images would ask the server to
   rasterise every page of the document just to open it. */
.thumb-lines {
  position: absolute;
  inset: 7px 8px auto 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.thumb-lines i { height: 2px; background: #E4E9F0; }
.thumb-lines i:nth-child(3) { width: 76%; }
.thumb-lines i:nth-child(5) { width: 58%; }

.thumb-count {
  position: absolute;
  top: 6px; right: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  font-size: 9.5px;
  display: grid;
  place-items: center;
}

.thumb-n { position: relative; font-size: 10px; color: var(--ink-soft); }

/* ── viewer ──────────────────────────────────────────────────────────────── */

.viewer {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  min-height: 0;
}

.page-scroll {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  /* The whole document, stacked — scrolling it shows the foot of one page above
     the head of the next, which is what reading a contract looks like. */
  flex-direction: column;
  /* `safe` keeps a page zoomed wider than the column from being centred with its
     left edge scrolled out of reach; browsers without it fall back to the line
     above, which is the same thing until you zoom in. */
  align-items: center;
  align-items: safe center;
  gap: 22px;
  padding: 26px 26px 78px;
  scroll-padding-top: 26px;
}

.page-wrap {
  position: relative;
  flex: none;
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(14, 35, 56, .35), 0 0 0 1px rgba(14, 35, 56, .08);
  scroll-margin-top: 26px;
}
/* Every page is mounted, but its render is only fetched as it nears the viewport —
   until then the reserved box is what the reader sees, so give it the tone of paper
   waiting rather than of paper missing. */
.page-wrap img { display: block; width: 100%; height: auto; }
.page-wrap img:not([src]) { visibility: hidden; }

.page-number {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -19px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  pointer-events: none;
}

/* The click target and the stamp container are the same box, so a fraction of
   this element's rect is exactly the fraction the server maps back. */
.page-layer { position: absolute; inset: 0; }
.viewer.placing .page-layer { cursor: crosshair; }

/* Pen and highlighter marks, one <svg> per page, sitting between the raster
   image and the click layer — under the fields, exactly as PdfService draws
   them. viewBox is the page in points, not pixels, so a mark is one number at
   any zoom; preserveAspectRatio="none" is a redundant guard for the same
   reason the page-wrap's own aspect-ratio is set from the page itself. */
.ink-layer { position: absolute; inset: 0; pointer-events: none; }

/* While an ink tool is current the page stops being something you click fields
   onto and becomes something you draw on: stamps step out of the way so a
   pointer drawing near one is never mistaken for a drag, and the page-layer
   itself trades its usual cursor and touch scrolling for the pen. */
.viewer.inking .stamp { pointer-events: none; }
.viewer.inking .page-layer { cursor: crosshair; touch-action: none; }
/* The eraser draws its own ring cursor (.erase-ring) — hide the native one so
   the two are not both visible at once. */
.viewer.inking.erasing .page-layer { cursor: none; }

/* The eraser's own cursor: a ring the size of its reach, following the pointer
   rather than sitting fixed under it — see updateEraseRing() in sign.js. */
.erase-ring {
  position: fixed;
  z-index: 50;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: rgba(14, 35, 56, .06);
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
}

.drop-hint {
  position: absolute;
  inset: 10px;
  border-radius: 8px;
  border: 2px dashed var(--accent);
  background: rgba(46, 107, 230, .05);
  pointer-events: none;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.editor.dragging .drop-hint { display: flex; }
.drop-hint span {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
  background: #fff;
  border: 1px solid #D7E4FE;
  border-radius: 999px;
  padding: 9px 16px;
  box-shadow: 0 10px 24px -14px rgba(14, 35, 56, .5);
}
/* A tile drag must not be intercepted by a stamp already on the page. */
.editor.dragging .stamp { pointer-events: none; }

.zoombar {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px -12px rgba(14, 35, 56, .4);
  z-index: 6;
}
.zoom-step {
  width: 26px; height: 26px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.zoom-step:hover { background: var(--bg); color: var(--ink); }
.zoom-value { font-size: 12px; font-weight: 600; padding: 0 6px; min-width: 44px; text-align: center; }
.zoom-sep { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
.zoom-page { font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 0 6px; }

/* ── tool panel ──────────────────────────────────────────────────────────── */

.tools {
  width: 332px;
  flex: 0 0 332px;
  background: var(--panel);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* One scroll for the whole panel — see the comment in editor.html. Deliberately a
   block and not a flex column: a flex column that scrolls squashes its fixed-height
   children (the rule, the tiles) instead of letting them overflow. */
.tools-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.tools-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel);
}

.tools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}
.tools-head-hint { font-size: 10px; color: var(--ink-faint); }

/* Eight tiles, four across: Select is the tool that places nothing and is how
   you stop placing and start arranging; Text/Date/Initials/Sign place fields;
   Highlight/Draw/Eraser lay ink straight onto the page instead — see
   `.viewer.inking` below for how the page tells the two apart. */
.tool-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0 18px 16px;
}

.tile {
  position: relative;
  height: 62px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: grab;
  font: inherit;
  color: var(--ink);
}
.tile:hover { border-color: #B9C6D6; }
.tile.current { border-color: var(--accent); background: rgba(46, 107, 230, .07); box-shadow: inset 0 0 0 1px var(--accent); }
.tile-glyph { font-size: 15px; line-height: 1; position: relative; }
.tile-glyph.serif { font-family: Georgia, serif; font-weight: 700; font-size: 14px; }
.tile-glyph.script { font-family: var(--script); font-size: 18px; }
.tile-label { font-size: 10.5px; color: var(--ink-soft); position: relative; }

/* A tile is selected in the colour of the person the next field is for, so the
   tool and the person read as one answer rather than two settings. */
.tile.current.for-other {
  border-color: var(--field-colour);
  background: color-mix(in srgb, var(--field-colour) 8%, #fff);
  box-shadow: inset 0 0 0 1px var(--field-colour);
}

.tools-rule { height: 1px; background: var(--line-soft); }

.tools-body {
  padding: 0 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pane { display: flex; flex-direction: column; gap: 12px; }
.pane h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tools-hint {
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--field);
  border: 1px solid var(--line-soft);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ── form controls ───────────────────────────────────────────────────────── */

.row { display: flex; gap: 8px; align-items: flex-end; }
.grow { flex: 1; }

label { display: block; font-size: 12px; color: var(--ink-soft); }
label.checkbox, label.radio {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
label.colour { flex: 0 0 auto; }

input[type=text], input[type=date], input[type=file], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--field);
}
select { background: #fff; }
input[type=text]:focus, select:focus, input[type=date]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
input[type=color] {
  width: 38px; height: 38px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
input[type=range] { width: 100%; }

/* Bold is a checkbox that looks like the B in a formatting bar. */
.toggle { flex: 0 0 auto; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-face {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.toggle input:checked + .toggle-face { background: var(--ink); border-color: var(--ink); color: #fff; }
.toggle input:focus-visible + .toggle-face { outline: 2px solid var(--accent); }

/* Preset colours for the ink panes — a click sets the custom <input type=color>
   beside them, so the two are one choice rather than two competing ones. */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 28px; height: 28px;
  flex: none;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
  background: var(--swatch-colour);
  cursor: pointer;
}
.swatch.current { box-shadow: 0 0 0 2px var(--accent); }

.segmented { display: flex; gap: 8px; }
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: block;
  text-align: center;
  font-size: 13px;
  padding: 9px;
  border-radius: var(--radius);
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
}
.segmented input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }

.hint { margin: 0; font-size: 12px; color: var(--ink-soft); }
/* Stacked hints read as separate points; .hint's own margin:0 would butt them together. */
.hint + .hint { margin-top: 6px; }
.fine { font-size: 12px; color: var(--ink-soft); max-width: 42ch; margin: 14px auto 0; }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover:not(:disabled) { background: #F4F6F9; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.block { display: block; width: 100%; margin-top: 8px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.ghost { background: transparent; font-weight: 400; }
.btn.tiny { padding: 4px 8px; font-size: 12px; font-weight: 400; }

a.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

.linklike {
  border: 0; background: none; padding: 0;
  color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline;
}

/* ── split place button ──────────────────────────────────────────────────── */

.split { position: relative; }
.split-row { display: flex; }
.split-face { flex: 1; border-radius: var(--radius) 0 0 var(--radius); padding: 12px; }
.split-caret {
  width: 44px;
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: 1px solid rgba(255, 255, 255, .28);
  font-size: 12px;
}

.split-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0; right: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 40px -18px rgba(14, 35, 56, .45);
  z-index: 5;
}
.menu-label {
  font-size: 10px;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--ink-faint);
  padding: 6px 8px 8px;
}
.corner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 10px; }
.menu-rule { height: 1px; background: var(--line-soft); margin: 0 8px 8px; }

.corner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.corner.current { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-dark); }
.corner-box {
  width: 20px; height: 24px;
  flex: none;
  border: 1px solid #C9D2DC;
  border-radius: 2px;
  background: #fff;
  display: flex;
  padding: 2px;
}
.corner-box i { width: 6px; height: 4px; border-radius: 1px; background: var(--ink-faint); }
.corner.current .corner-box i { background: var(--accent); }

.menu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-item:hover { background: #F4F6F9; }
.menu-glyph { font-size: 14px; line-height: 1.2; }
.menu-item b { display: block; font-size: 13px; font-weight: 600; }
.menu-item em { display: block; font-size: 11px; font-style: normal; color: var(--ink-faint); }

/* ── saved signature / initials preview ──────────────────────────────────── */

.stamp-preview {
  height: 76px;
  display: grid;
  place-items: center;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  cursor: grab;
}
.stamp-preview.tall { height: 96px; }
/* Definite pixels, not percentages. The image is a grid item in an auto-sized
   implicit row, so a percentage max-height resolves against an indefinite size
   and is dropped — only max-width applied, and a wide signature scaled to the
   full width came out taller than the box and crossed the rounded border. The
   numbers are the content box: height less the 1px border and 8px padding.
   overflow is a guard, not the fix: the image must scale down, never crop. */
.stamp-preview img { max-width: 100%; max-height: 58px; }
.stamp-preview.tall img { max-height: 78px; }
.stamp-preview .empty { font-size: 12px; color: var(--ink-soft); cursor: default; }

/* ── drop zone (document list) ───────────────────────────────────────────── */

.dropzone {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}
.dropzone-inner {
  border: 2px dashed var(--line);
  border-radius: 14px;
  padding: 48px 40px;
  background: var(--panel);
  max-width: 560px;
}
.dropzone h1 { margin: 0 0 6px; font-size: 20px; }
.dropzone p { margin: 4px 0; color: var(--ink-soft); }
.viewer.dragover .dropzone-inner { border-color: var(--accent); background: var(--accent-tint); }

/* ── placed stamps ───────────────────────────────────────────────────────── */

.stamp {
  position: absolute;
  cursor: move;
  touch-action: none;
  outline: 1px dashed transparent;
  outline-offset: 2px;
}
.stamp:hover { outline-color: var(--ink-soft); }
.stamp.selected { outline: 1px solid var(--accent); }
/* The selected field, with its x and resize corner, sits above its neighbours: those
   controls hang outside the box (wholly so on checkboxes and dropdowns) and must win
   over a field, or a tap margin, placed right beside it. */
.stamp.selected { z-index: 3; }
.viewer.placing .stamp { pointer-events: none; }
/* The stamp just placed is the one exception: sticky arming keeps every other
   stamp click-through so the next click always lands on the page, but the one
   that was just created should be draggable on the very next mousedown without
   forcing the user to disarm first. See placeOne()/startDrag() in sign.js. */
.viewer.placing .stamp.just-placed { pointer-events: auto; }
/* The remove (x) straddles the box, sitting several pixels outside its corner.
   While still armed the next click is usually another placement nearby, not a
   deliberate hit on a tiny control — leave it click-through so a near-miss
   places a field instead of deleting the one just placed. The resize handle is
   deliberately NOT in this rule: a field dropped on the page should be sizeable
   on the spot, the same way it is already draggable on the spot, without first
   disarming the tool. Deleting on a near-miss loses work; a near-miss on the
   resize corner is a no-op drag. */
.viewer.placing .stamp.just-placed .remove { pointer-events: none; }

.stamp-image img {
  display: block;
  width: 100%;
  height: 100%;
  /* Fitted, never stretched: exactly what PdfService.drawImage does in the PDF. A
     signer's box keeps the owner's shape, and a signature of another shape sits
     inside it. */
  object-fit: contain;
  pointer-events: none;
}

.stamp-text {
  white-space: pre;
  /* 'Sign Doc' is the very font the exporter embeds, and LINE_RATIO is measured
     off it server-side — swapping it here would make the preview lie. */
  font-family: 'Sign Doc', serif;
  /* font-size and line-height are set from the box height in JS. */
}

/* Checkboxes and radio buttons: a square of side h (set in JS), outline plus mark,
   the same shapes PdfService.drawChoice draws. The mark is a glyph here only. */
.stamp-choice { padding: 0; }
.stamp-choice .choice-box {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: max(1px, 0.07em) solid currentColor;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-weight: 700;
  pointer-events: none;
}
.stamp-choice.choice-radio .choice-box { border-radius: 50%; font-size: 0.6em; }
.stamp-choice.placeholder .choice-box { background: rgba(255, 255, 255, .6); }
.stamp-choice:not(.locked) { cursor: pointer; }
.stamp-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A checkbox can be 8px across; the remove (x) and resize corner that straddle an
   ordinary field's corners would then cover all of it, so the click meant to tick a
   selected box deleted or resized it. On a choice field both sit wholly outside it. */
.stamp-choice .remove, .stamp-dropdown .remove { top: auto; right: auto; bottom: 100%; left: 100%; }
.stamp-choice .handle.resize, .stamp-dropdown .handle.resize { right: auto; bottom: auto; top: 100%; left: 100%; }
/* The invisible, larger tap target: see refreshHitPads() in sign.js. */
.stamp-choice:not(.locked)::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--hit-t, 0px)) calc(-1 * var(--hit-r, 0px)) calc(-1 * var(--hit-b, 0px)) calc(-1 * var(--hit-l, 0px));
}

/* Dropdowns: drawn as a standard select box everywhere \u2014 border, rounded corners,
   white, a chevron on the right \u2014 so one never reads as a text field. Sized in em
   of the field's own font (set from its height in sign.js layoutStamp), so it scales
   with the zoom exactly like a text field. The chevron is a rotated border on a
   pseudo-element: no image, nothing for the CSP to allow. The PDF prints only the
   chosen text (PdfService.drawText); the box is the screen's. The text keeps its
   place: the box sits one border + left padding to the left of `x`, so the words land
   where the PDF prints them. */
.stamp-dropdown {
  --dd-border: #B7C2CF;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin-left: calc(-0.3em - 1px);
  padding: 0 var(--dd-pad-r, 1.5em) 0 0.3em;
  border: 1px solid var(--dd-border);
  border-radius: 0.3em;
  background: #fff;
  font-family: 'Sign Doc', serif;
  white-space: pre;
  cursor: pointer;
}
.stamp-dropdown::after {
  content: '';
  position: absolute;
  right: 0.6em;
  top: 50%;
  width: 0.36em;
  height: 0.36em;
  margin-top: -0.28em;
  border-right: max(1px, 0.1em) solid var(--ink-soft);
  border-bottom: max(1px, 0.1em) solid var(--ink-soft);
  transform: rotate(45deg);
  pointer-events: none;
}
.stamp-dropdown > .dd-value {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stamp-dropdown:hover { border-color: var(--ink-soft); }
/* Squeezed against the page edge: no room left for the chevron clear of the text. */
.stamp-dropdown.dd-tight::after { display: none; }
/* Nothing chosen: the prompt in muted grey, upright \u2014 a select's placeholder, not
   the italic of an empty text field. The owner's dashed "to be filled" outline stays. */
.stamp.placeholder.stamp-dropdown { background: #fff; opacity: 1; }
.stamp.placeholder.stamp-dropdown > .dd-value { opacity: 1; font-style: normal; color: var(--ink-soft); }
/* Somebody else's, or anything read-only: the same box, visibly disabled. */
.stamp-dropdown.locked { background: #F4F6F9; cursor: default; }
.stamp-dropdown.locked::after { border-color: #A9B4C1; }

/* The Dropdown tool tile: a small select box with its chevron, in the same CSS. */
.glyph-select {
  position: relative;
  display: inline-block;
  width: 1.5em;
  height: 0.85em;
  border: 1.5px solid currentColor;
  border-radius: 0.2em;
  vertical-align: middle;
  box-sizing: border-box;
}
.glyph-select::after {
  content: '';
  position: absolute;
  right: 0.18em;
  top: 50%;
  width: 0.26em;
  height: 0.26em;
  margin-top: -0.2em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* The signer's own: the native <select> fills the box (so a phone opens its own
   picker), with the platform arrow replaced by the chevron above. */
.stamp-dropdown-live { padding: 0; }
.stamp-dropdown-live .dropdown-pick {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 var(--dd-pad-r, 1.5em) 0 0.3em;
  border: 0;
  border-radius: inherit;
  background: transparent;
  font: inherit;
  line-height: normal;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.stamp-dropdown-live .dropdown-pick:focus { outline: none; }
.stamp.stamp-dropdown-live:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.stamp-dropdown-live.dd-empty .dropdown-pick { color: var(--ink-soft); }
.stamp-dropdown-live .dropdown-pick option { color: var(--ink); }

/* The little green caption above a stamp, naming what it is. */
.stamp-tag {
  position: absolute;
  top: -15px;
  left: 0;
  white-space: nowrap;
  font-family: system-ui, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ok);
  pointer-events: none;
  opacity: 0;
}
.stamp:hover .stamp-tag, .stamp.selected .stamp-tag { opacity: 1; }

.stamp .handle {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--accent);
  background: #fff;
  border-radius: 2px;
  display: none;
}
.stamp.selected .handle { display: block; }
.stamp .handle.resize { right: -7px; bottom: -7px; cursor: nwse-resize; }

.stamp .remove {
  position: absolute;
  top: -9px; right: -9px;
  width: 18px; height: 18px;
  display: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.stamp .remove:hover { border-color: #EB755B; color: #EB755B; }
.stamp.selected .remove { display: grid; }

/* ── arming bar + toast ──────────────────────────────────────────────────── */

.arming-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 18px 40px -18px rgba(14, 35, 56, .6);
  z-index: 40;
}

.toast {
  position: fixed;
  left: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 18px 40px -18px rgba(14, 35, 56, .6);
  z-index: 60;
  max-width: min(420px, 70vw);
}
.toast .toast-mark {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
  font-size: 11px;
}
.toast.bad .toast-mark { background: var(--danger); }

/* ── capture modal ───────────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(14, 35, 56, .45);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 20px;
}
.modal-card {
  width: min(680px, 100%);
  background: var(--panel);
  border-radius: 14px;
  padding: 18px;
}
/* Three settings side by side on a wide screen, stacking as the card narrows. Top-
   aligned so the labels line up, and one field style whatever the input type — the
   number box otherwise fell back to the browser's own. */
.modal-card .row { flex-wrap: wrap; align-items: flex-start; }
.modal-card .row > .stack { flex: 1 1 150px; }
.modal-card .row input, .modal-card .row select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--ink);
  background: var(--field);
}
.activity-note { margin-top: 12px; }
.modal-card header, .modal-card footer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-card header h2 { margin: 0; font-size: 16px; flex: 1; }
.modal-card footer { justify-content: flex-end; margin-top: 14px; }
/* `margin: 0` is the half of this that matters: a bare <form> carries the browser's
   own `margin-block-end: 1em`, and in a centre-aligned footer that extra 14px below
   it pushes the button half of it — 7px — above the button beside it. */
.modal-card footer form.inline { display: flex; margin: 0; }
.modal-card footer .btn { display: inline-flex; align-items: center; justify-content: center; }

.tabs { display: flex; gap: 6px; margin: 12px 0; }

.capture-saved {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.capture-saved-img {
  flex: 1 1 160px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.capture-saved-img img { max-width: 100%; max-height: 56px; }
.tab {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.tabpane { display: flex; flex-direction: column; gap: 10px; }

#draw-canvas {
  width: 100%;
  height: 210px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: repeating-conic-gradient(#f4f6f9 0% 25%, #fff 0% 50%) 50% / 14px 14px;
  touch-action: none;
  cursor: crosshair;
}

.typed-preview {
  height: 150px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: repeating-conic-gradient(#f4f6f9 0% 25%, #fff 0% 50%) 50% / 14px 14px;
  font-family: var(--script);
  font-size: 46px;
  color: #122e4d;
  overflow: hidden;
  padding: 0 16px;
  white-space: nowrap;
}

.upload-preview {
  min-height: 90px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: repeating-conic-gradient(#f4f6f9 0% 25%, #fff 0% 50%) 50% / 14px 14px;
}
.upload-preview img { max-height: 130px; max-width: 100%; }

/* ── narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  body { overflow: auto; }
  .editor { height: auto; }
  .layout { flex-direction: column; }
  .page-rail {
    width: 100%; flex: none;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px 14px;
    gap: 12px;
  }
  .rail-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .tools { width: 100%; flex: none; border-left: 0; border-top: 1px solid var(--line); }
  .page-scroll { overflow: visible; padding: 18px 14px 60px; }
  .docbar { height: auto; flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
}

/* ── flashes ─────────────────────────────────────────────────────────────── */

form.inline { display: inline; }

.flash {
  margin: 12px auto 0;
  max-width: 1100px;
  padding: 9px 14px;
  border-radius: 8px;
}
.flash-error { background: #fdecea; color: #8a231c; border: 1px solid #f3c2bd; }
.flash-notice { background: var(--ok-tint); color: var(--ok); border: 1px solid #bfe0ca; }
/* The free-trial countdown (fragments/layout.html): the same amber as .pill.warn —
   a heads-up about money, not an error and not a success. */
.flash-trial { display: flex; align-items: baseline; gap: 12px; background: var(--warn-tint); color: var(--warn); border: 1px solid var(--warn-line); }
.flash-trial a { color: inherit; margin-left: auto; font-weight: 600; white-space: nowrap; }

/* ── login ───────────────────────────────────────────────────────────────── */

/* The sign-in and 2FA pages are the only ones a stranger sees, so they get a
   palette and control sizing of their own. Everything below is scoped to
   .auth-card / .auth-scene — the global --ink/--bg tokens, .btn and the shared
   input[type=email] rule are used by every other page and must not shift. */
.auth-scene {
  --auth-ink: #0A2A42;
  --auth-ink-soft: #4A657A;
  --auth-band: #041E33;
  --auth-line: #D8E0EA;
  --auth-line-soft: #E4EAF1;
  --auth-field: #F6F8FB;
  --auth-focus: #4FB8FF;
}

body.centred {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 100vh;
  padding: 44px 24px;
  box-sizing: border-box;
}

/* ── sign-in backdrop ────────────────────────────────────────────────────── */

/* Squared paper, two soft washes of colour, and a signature that draws itself
   once. Purely decorative: fixed, behind everything, no pointer events. */
.auth-scene {
  position: relative;
  background-color: #E9EEF4;
  background-image:
    linear-gradient(rgba(10, 42, 66, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 42, 66, .055) 1px, transparent 1px);
  background-size: 34px 34px;
}
.auth-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.auth-bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(255, 255, 255, .92), transparent 72%),
    radial-gradient(48% 40% at 8% 18%, rgba(46, 107, 230, .14), transparent 70%),
    radial-gradient(52% 44% at 96% 76%, rgba(240, 180, 41, .18), transparent 72%);
}
.auth-bg-blob { position: absolute; }
.auth-bg-blob-a {
  top: -90px; right: -110px; width: 420px; height: 420px;
  border-radius: 46% 54% 60% 40%;
  background: rgba(4, 30, 51, .05);
}
.auth-bg-blob-b {
  left: -70px; bottom: -120px; width: 330px; height: 330px;
  border-radius: 52% 48% 40% 60%;
  background: rgba(194, 74, 50, .09);
}
/* Two sheets fanned out behind the card, as if it were the top of a stack. */
.auth-bg-sheets {
  position: absolute;
  left: 50%; top: 50%;
  width: 470px; height: 560px;
  transform: translate(-50%, -50%);
}
.auth-bg-sheets span {
  position: absolute;
  inset: 0;
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
}
.auth-bg-sheets span:first-child { transform: rotate(-3.5deg); opacity: .55; }
.auth-bg-sheets span:last-child { transform: rotate(2.6deg); opacity: .45; }
.auth-bg-ink {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  width: min(560px, 80%);
  color: #0A2A42;
  opacity: .16;
}
/* Drawn by default so reduced-motion users still get the signature, complete
   rather than absent; only the drawing itself is the motion. */
.auth-bg-ink path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .auth-bg-ink path { stroke-dashoffset: 360; animation: auth-ink 3.4s ease-out .3s forwards; }
}
@keyframes auth-ink { to { stroke-dashoffset: 0; } }

/* ── sign-in card ────────────────────────────────────────────────────────── */

.auth-card {
  position: relative;
  z-index: 1;
  width: min(430px, 92vw);
  background: var(--panel);
  border: 1px solid var(--auth-line);
  border-radius: 16px;
  box-shadow: 0 22px 44px -30px rgba(10, 42, 66, .45);
  overflow: hidden;
  color: var(--auth-ink);
}
.auth-card h1 { margin: 0; font-size: 18px; font-weight: 400; }
/* The wordmark is white, so it sits on a dark band the full width of the card. */
.auth-card .auth-brand {
  padding: 26px 32px;
  display: grid;
  place-items: center;
  background: var(--auth-band);
}
.auth-card .auth-brand .brand-logo { height: 38px; display: block; }
.auth-card .auth-body { padding: 26px 32px 28px; }

.auth-card label {
  display: block;
  margin: 0 0 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--auth-ink-soft);
}
.auth-card input[type=email],
.auth-card input[type=password],
.auth-card input[type=text] {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 13px 14px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--auth-ink);
  background: var(--auth-field);
  border: 1px solid var(--auth-line);
  border-radius: 10px;
  outline: none;
}
.auth-card input::placeholder { color: #9FB0C1; }
.auth-card input[type=email]:focus,
.auth-card input[type=password]:focus,
.auth-card input[type=text]:focus {
  border-color: var(--auth-focus);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(79, 184, 255, .22);
}

/* Show/hide sits inside the field; the input keeps clear of it on the right. */
.auth-pw { position: relative; display: block; margin-bottom: 16px; }
.auth-card .auth-pw input { padding-right: 62px; margin-bottom: 0; }
.auth-pw-toggle {
  position: absolute;
  top: 50%; right: 9px;
  transform: translateY(-50%);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--auth-ink-soft);
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
}
.auth-pw-toggle:hover { color: var(--auth-ink); }
.auth-pw-toggle:focus-visible { outline: 2px solid var(--auth-focus); outline-offset: 1px; }

/* Shared with account/security.html, so the base stays as it was; only the
   sign-in card gets the softer, bordered treatment. */
.auth-error { padding: 8px 10px; border-radius: 8px; background: #fdecea; color: #8a231c; }
.auth-note { padding: 8px 10px; border-radius: 8px; background: var(--ok-tint); color: var(--ok); }
.auth-card .auth-error,
.auth-card .auth-note {
  padding: 10px 12px;
  margin: 0 0 16px;
  border-radius: 10px;
  font-size: 13px;
}
.auth-card .auth-error { background: #FDF0EC; border: 1px solid #F2D3CB; }
.auth-card .auth-note { border: 1px solid #bfe0ca; }
.auth-alt {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(430px, 92vw);
  font-size: 12px;
  color: var(--auth-ink-soft);
  text-align: center;
}

.auth-card .auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 0;
  padding: 13px 18px;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 10px;
}
.auth-card .auth-submit:active { transform: translateY(1px); }
.auth-card .auth-submit span { font-size: 16px; }

.auth-card .auth-sso {
  margin-top: 10px;
  justify-content: center;
  text-align: center;
}
.auth-card .auth-sso[hidden] { display: none; }

/* The email step's one line under Continue ("portal customers ..." / "use a
   password instead"). */
.auth-hint { margin: 14px 0 0; font-size: 12.5px; color: var(--auth-ink-soft); text-align: center; }
.auth-hint a { color: var(--auth-ink); font-weight: 600; }

/* Step two shows the address from step one, read-only, with a way back. */
.auth-field-head { display: flex; align-items: baseline; justify-content: space-between; }
.auth-field-head a { margin-bottom: 7px; font-size: 12.5px; font-weight: 600; color: var(--auth-ink-soft); }
.auth-card input[readonly] { color: var(--auth-ink-soft); }

.auth-foot {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: #46617A;
}
.auth-foot a { color: #46617A; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }
.auth-foot-dot { width: 4px; height: 4px; border-radius: 999px; background: #B6C4D2; }

@media (max-width: 420px) {
  .auth-card .auth-brand { padding: 22px 20px; }
  .auth-card .auth-brand .brand-logo { height: 30px; }
  .auth-card .auth-body { padding: 22px 20px 24px; }
}

/* ── two-factor sign-in ──────────────────────────────────────────────────── */

.totp-qr { display: block; width: 200px; height: 200px; margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; }
.totp-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  letter-spacing: .06em;
  padding: 8px 12px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: inline-block;
}
.recovery-codes {
  columns: 2;
  gap: 12px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
}
.recovery-codes li { padding: 2px 0; }

input[type=email], input[type=password] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--field);
}

/* ── ordinary pages (list, users, tenants) ───────────────────────────────── */

.sheet {
  max-width: 1100px;
  margin: 22px auto 60px;
  padding: 0 20px;
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.sheet-head h1 { margin: 0; font-size: 20px; flex: 1; letter-spacing: -.01em; }

h2.sub { margin: 32px 0 6px; font-size: 14px; }

.empty-note { color: var(--ink-soft); }
.muted { color: var(--ink-soft); }

.table-wrap {
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.grid th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-faint);
  font-weight: 700;
}
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: #F8FAFC; }

.doc-link { display: block; color: var(--ink); font-weight: 600; text-decoration: none; }
a.doc-link:hover { text-decoration: underline; }
.by { display: block; font-size: 12px; color: var(--ink-soft); }
.nowrap { white-space: nowrap; }

.actions-col { white-space: nowrap; }
.actions-col .btn { text-decoration: none; margin-right: 4px; }
.perm-cell { display: table-cell; }
.perm-cell label { display: inline-flex; margin-right: 10px; }

input.narrow { width: 130px; display: inline-block; margin-right: 6px; }

.stack-form {
  margin-top: 10px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.stack-form .row { align-items: flex-end; margin: 8px 0; }

/* ── cards (used by the users and tenants pages) ─────────────────────────── */

.card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--panel);
}
.card h2 {
  margin: 0 0 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-faint);
}
.card.disabled { opacity: .5; pointer-events: none; }

.arming-hint { font-size: 12px; opacity: .75; }

/* A stamp on a document you may view but not edit is scenery, not a control. */
.stamp.locked { cursor: default; outline: none; }
.stamp.locked:hover { outline: none; }
/* A signer's own field fills on one click (sign.js): say so with the cursor. */
.stamp.fillable.fill-type { cursor: text; }
.stamp.fillable.fill-sign { cursor: pointer; }
.stamp.locked .stamp-tag { opacity: 0; }

/* ══ the document library ══════════════════════════════════════════════════
   A list whose rows carry a real render of page one, a docked preview beside it,
   and a delete that says out loud what it is about to take away. */

/* The page is two columns now: the folder rail, flush against the left edge and
   full height, and the library itself. The rail is the only reason .library is a
   row — every inner rule still addresses .lib-main's column, which is where the
   padding and the 16px rhythm the page always had now live. */
.library {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: calc(100vh - var(--topbar-h));
}
.lib-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 22px 26px 26px;
  gap: 16px;
}

/* ── the folder rail ─────────────────────────────────────────────────────── */

.lib-rail {
  width: 266px; flex: none;
  display: flex; flex-direction: column; min-height: 0;
  background: #FBFCFD; border-right: 1px solid #E7ECF2;
}
.rail-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 16px 14px 12px; }
.rail-head-title { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rail-add {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none;
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; color: var(--ink-faint);
}
.rail-add:hover { background: #EEF1F5; color: var(--ink); }
.rail-add:focus-visible { outline: 2px solid var(--accent); }

/* The same field as the documents search, sized for a 266px rail and with no
   scope toggle beside it — there is nothing to scope a folder search to. */
.rail-search {
  flex: none; display: flex; align-items: center; gap: 7px; margin: 0 14px 10px;
  background: var(--field); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px 10px;
}
.rail-search:focus-within { border-color: var(--accent); }
.rail-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--ink);
}
.rail-empty { margin: 8px 4px; font-size: 12.5px; color: var(--ink-soft); }
.rail-empty[hidden] { display: none; }

.rail-tree {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: 2px 10px 14px;
}
/* One level of nesting is one caret's worth of indent, so a child's folder icon
   lands under its parent's name rather than somewhere between the two. */
.rail-item { display: flex; align-items: center; padding-left: calc(var(--depth, 0) * 16px); }
.rail-item[hidden] { display: none; }

.rail-caret {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none;
  width: 26px; height: 28px; display: grid; place-items: center;
  font-size: 17px; line-height: 1; color: #B9C6D6;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), color .15s;
}
.rail-item.open > .rail-caret { transform: rotate(90deg); color: var(--ink-soft); }
.rail-caret:hover { color: var(--ink); }
.rail-caret:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }
/* Keeps a leaf's name in the same column as a branch's. */
.rail-caret-slot { flex: none; width: 26px; height: 28px; }

.rail-link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 4px; border-radius: 10px;
  font-size: 13.5px; font-weight: 450; color: #4A5D70; text-decoration: none;
}
.rail-link > svg { flex: none; opacity: .8; }
.rail-link:hover { background: #F1F4F8; color: var(--ink); }
.rail-link.current { background: #F1F4F8; color: var(--ink); font-weight: 600; }
.rail-link.drop-target { background: var(--accent); color: #fff; }
.rail-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-count {
  flex: none; font-size: 11px; font-weight: 600; min-width: 18px; text-align: center;
  padding: 2px 6px; border-radius: 999px; color: var(--ink-faint);
}
.rail-link.current .rail-count { color: var(--ink); background: #fff; }
.rail-foot { flex: none; padding: 12px 16px; font-size: 11.5px; color: #AEB9C6; }

.lib-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
/* The upload button is wrapped in a form, and a bare <form> carries the browser's own
   `margin-block-end: 1em` — 14px of empty space under it that lifted the button clear
   of the search box and the view switch beside it. `margin: 0` is the whole of that
   fix; `display: flex` only keeps the form the exact size of the button inside it.
   The heights are the other half: left to their own padding the three controls come
   out a pixel or two apart, which reads as a wobble rather than a row. The padding is
   overridden here rather than on `.search` and `.view-btn` themselves so those stay
   usable at their natural size elsewhere. */
.lib-head form.inline { display: flex; margin: 0; }
.lib-head .search,
.lib-head .viewswitch,
.lib-head form.inline > .btn { height: 40px; box-sizing: border-box; }
.lib-head .search { padding: 0 12px; }
.lib-head .view-btn { padding: 0 14px; }
.lib-title h1 {
  margin: 0;
  font: 600 24px/1.15 Georgia, 'Times New Roman', serif;
  letter-spacing: -.01em;
}
.lib-count { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }

.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--field); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 12px; width: 240px;
}
.search-glyph { color: var(--ink-faint); font-size: 14px; }
.search.has-scope { width: 360px; padding-right: 4px; }
.search-scope {
  display: inline-flex; gap: 2px; padding: 2px; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
.search-scope-btn {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft);
}
.search-scope-btn.current { background: var(--accent-tint); color: var(--accent); }
.search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--ink);
}

.viewswitch {
  display: flex; align-items: stretch; gap: 2px; padding: 3px;
  background: var(--field); border: 1px solid var(--line); border-radius: var(--radius);
}
.view-btn {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-soft);
}
.view-btn.current { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

.lib-tabs {
  display: flex; gap: 22px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.lib-tabs::-webkit-scrollbar { display: none; }
.lib-tab {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font: inherit; font-size: 13.5px; cursor: pointer;
  padding: 0 2px 12px; border: 0; background: none;
  color: var(--ink-soft); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.lib-tab.current { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tab-pill {
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 7px;
  background: var(--bg); color: var(--ink-faint);
}
.lib-tab.current .tab-pill { background: var(--accent-tint); color: var(--accent-dark); }

.lib-body { display: flex; gap: 18px; flex: 1; min-height: 0; align-items: flex-start; }
.lib-scroll { flex: 1; min-width: 0; }

.lib-colhead {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 150px 108px 250px;
  align-items: center; gap: 16px;
  padding: 0 14px 6px;
  font-size: 10px; letter-spacing: .1em; font-weight: 700; color: var(--ink-faint);
}
.lib-colhead .right { text-align: right; }

.doc-rows { display: flex; flex-direction: column; gap: 10px; }

.doc-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 150px 108px 250px;
  align-items: center; gap: 16px;
  padding: 13px 14px; border-radius: 13px;
  background: #fff; border: 1px solid var(--line);
  cursor: pointer; outline: 0;
}
.doc-row:hover { border-color: #B9C6D6; }
.doc-row.current {
  border-color: var(--accent);
  background: var(--field);
  box-shadow: 0 14px 28px -22px rgba(14, 35, 56, .6);
}
.doc-row:focus-visible { box-shadow: 0 0 0 3px var(--accent-tint); }

/* The page render sits on a white card the size of a page, so a document that has
   not loaded its image yet still reads as a document. */
.page-chip {
  position: relative; width: 72px; height: 94px; overflow: hidden;
  background: #fff; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line), 0 6px 14px -10px rgba(14, 35, 56, .5);
}
.page-chip img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; opacity: 0; transition: opacity .18s ease;
}
.page-chip img.ready { opacity: 1; }
.page-chip-fade {
  position: absolute; inset: auto 0 0 0; height: 14px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

.doc-cell { min-width: 0; }
.doc-name-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.doc-name {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-name:hover { color: var(--accent-dark); }
.badge-turn {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: #fff; background: #E0A32E; border-radius: 5px; padding: 3px 6px;
}
.doc-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.doc-progress { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.doc-progress .bar {
  width: 104px; height: 5px; border-radius: 999px;
  background: #E4E9F0; overflow: hidden; flex: none;
}
.doc-progress .bar i { display: block; height: 100%; background: var(--accent); }
.doc-progress .bar i.done { background: var(--ok); }
.doc-progress-note { font-size: 11.5px; color: var(--ink-faint); }

.doc-status .doc-activity { font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip-you   { color: var(--warn); background: var(--warn-tint); border-color: var(--warn-line); }
.chip-them  { color: var(--accent-dark); background: var(--accent-tint); border-color: #D7E4FE; }
.chip-done  { color: #16624C; background: var(--ok-tint); border-color: #C9E5DA; }
.chip-expired { color: #8A4B0F; background: #FDF1E3; border-color: #F2D7B6; margin-left: 4px; }
.chip-draft { color: var(--ink-soft); background: var(--bg); border-color: var(--line); }

.signer-stack { display: flex; align-items: center; }
.signer {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff;
  font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--ink);
}
.signer + .signer, .signer.more { margin-left: -8px; }
.signer.sc1 { background: var(--accent); }
.signer.sc2 { background: var(--avatar); color: var(--ink); }
.signer.more { background: var(--bg); color: var(--ink-soft); }
.tiny { font-size: 11.5px; }
.muted { color: var(--ink-faint); }

.doc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }

/* The word, with the glyph in front of it. The label is its own span so Thymeleaf's
   th:text cannot wipe the icon out. */
.doc-primary { display: inline-flex; align-items: center; gap: 6px; }
.doc-primary-icon { flex: none; display: block; opacity: .8; }
.btn.primary .doc-primary-icon { opacity: 1; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 14px; text-decoration: none;
  color: var(--ink); background: #fff; border: 1px solid var(--line);
}
.icon-btn:hover { background: var(--bg); border-color: #B9C6D6; }

.icon-btn.danger { color: var(--danger); }
.icon-btn.danger:hover {
  background: var(--danger-tint); border-color: var(--danger-edge); color: var(--danger);
}
.icon-btn svg { display: block; }

/* ── paging ──────────────────────────────────────────────────────────────── */

.lib-pager {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 14px 2px 2px;
}
.pager-pages { display: flex; align-items: center; gap: 6px; }
.pager-btn {
  min-width: 32px; height: 32px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink);
  cursor: pointer;
}
.pager-btn:hover:not(:disabled):not(.current) { background: var(--bg); border-color: #B9C6D6; }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-btn.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager-gap { color: var(--ink-faint); font-size: 12.5px; padding: 0 2px; }
.pager-note { margin-left: auto; font-size: 11.5px; color: var(--ink-faint); }

/* ── grid view ───────────────────────────────────────────────────────────── */

.library[data-view="grid"] .doc-rows {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px;
}
.library[data-view="grid"] .doc-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  padding: 0; overflow: hidden;
}
.library[data-view="grid"] .page-chip {
  width: 100%; height: 210px; border-radius: 0;
  box-shadow: none; border-bottom: 1px solid var(--line-soft); background: var(--bg);
}
.library[data-view="grid"] .page-chip img { object-position: top center; }
.library[data-view="grid"] .doc-cell,
.library[data-view="grid"] .doc-status,
.library[data-view="grid"] .signer-stack,
.library[data-view="grid"] .doc-actions { padding: 0 14px; }
.library[data-view="grid"] .doc-actions { justify-content: flex-start; padding-bottom: 14px; }
.library[data-view="grid"] .doc-progress { display: none; }

/* ── the docked preview ──────────────────────────────────────────────────── */

.preview-dock {
  width: 412px; flex: none; align-self: stretch;
  display: flex; flex-direction: column; min-height: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  position: sticky; top: 16px; max-height: calc(100vh - var(--topbar-h) - 48px);
}
.dock-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line-soft); }
.dock-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-top: 6px; }
.dock-meta { display: flex; align-items: center; gap: 9px; margin-top: 9px; flex-wrap: wrap; }

.dock-body {
  flex: 1; min-height: 0; overflow-y: auto; background: var(--bg);
  padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.dock-page {
  width: 300px; max-width: 88%; background: #fff; display: block;
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(14, 35, 56, .45);
}
.dock-thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dock-thumb {
  width: 30px; height: 40px; object-fit: cover; object-position: top center;
  background: #fff; cursor: pointer; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line);
}
.dock-thumb.current { box-shadow: 0 0 0 2px var(--accent); }

.btn.danger-ghost {
  color: var(--danger); background: #fff; border-color: var(--danger-line);
  justify-content: center;
}
.btn.danger-ghost:hover { background: var(--danger-tint); border-color: var(--danger-edge); }
.btn.destructive { color: #fff; background: var(--danger); border-color: var(--danger); }
.btn.destructive:hover { background: var(--danger-dark); border-color: var(--danger-dark); }

/* ── the delete confirmation ─────────────────────────────────────────────── */

.modal-card.narrow { width: 452px; max-width: 94vw; }
.consent-check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; }
.consent-check input { margin-top: 3px; flex: none; }
/* Checkbox and radio labels inside a dialog wrap. `label.checkbox` keeps its words on
   one line for the narrow tool panes (white-space: nowrap), and in a dialog that
   carried a whole sentence \u2014 the finish dialog's consent \u2014 straight out past the
   card's edge. Here the text wraps within the card, the box sits on the first line
   (same 0.5lh-ish nudge as .consent-check) and a long unbroken word breaks rather
   than overflow. */
.modal label.checkbox, .modal label.radio { white-space: normal; align-items: flex-start; }
.modal label.checkbox > input, .modal label.radio > input { flex: none; margin-top: 3px; }
.modal label.checkbox > span, .modal label.radio > span { min-width: 0; overflow-wrap: anywhere; }
.confirm-head { display: flex; align-items: flex-start; gap: 14px; }
.confirm-glyph {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: var(--danger-tint); color: var(--danger);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.confirm-head h2 { margin: 0; font: 600 20px/1.2 Georgia, serif; letter-spacing: -.01em; }
.confirm-head p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.confirm-doc {
  margin-top: 18px; display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 11px;
  background: var(--field); border: 1px solid var(--line-soft);
}
.confirm-mini {
  width: 34px; height: 44px; flex: none; background: #fff; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line); padding: 5px;
  display: flex; flex-direction: column; gap: 2px;
}
.confirm-mini i { height: 1.5px; background: #E4E9F0; }
.confirm-mini i:first-child { height: 2px; width: 60%; background: var(--ink); opacity: .5; }
.confirm-mini i:last-child { width: 70%; }
.confirm-mini-name { font-size: 13px; font-weight: 600; }
.confirm-warn {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 12px;
  padding: 11px 13px; border-radius: 11px; font-size: 12px; line-height: 1.5;
  background: var(--warn-tint); border: 1px solid var(--warn-line); color: var(--warn);
}

@media (max-width: 1100px) {
  .preview-dock { display: none; }
}
/* The rail costs the list 266px, and the list already spends 412 of them on the
   docked preview — so the rail only appears where there is room for it to cost
   nothing. 1366 is that width: at exactly 1366 a row is as wide as it was at the
   1100 the dock has always needed, so no layout below this point changes at all,
   and above it the rail is pure addition. Under it the breadcrumb trail carries
   the same navigation in a fraction of the width. */
@media (max-width: 1365px) {
  .lib-rail { display: none; }
}
@media (max-width: 900px) {
  .doc-row, .lib-colhead { grid-template-columns: 56px minmax(0, 1fr); }
  .lib-colhead { display: none; }
  .doc-status, .signer-stack { display: none; }
  .doc-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .page-chip { width: 56px; height: 74px; }
}

/* ══ LIBRARY V2 ═════════════════════════════════════════════════════════════
   Row-action icon group (Download · Share · Activity · Delete), the docked
   preview's Open/Download/Delete footer, the delete-with-undo toast, and the
   phone (~400px) layout. Added for the "Webway Documents" redesign — see
   FOLDER_SHARING_SPEC.md's ADDENDUM, Unit E. */

/* The three permission lines are built into one wrapper (documents.js swaps
   folder/document copy in and out of it) rather than as .fsv2-explainer's own
   direct children, so the parent's flex `gap` no longer reaches them. */
#fs-explainer-lines { display: flex; flex-direction: column; gap: 7px; }

.doc-icon-group {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid var(--line); border-radius: 11px; background: #fff; flex: none;
}
.doc-icon-group .icon-btn {
  width: 34px; height: 34px; border: none; background: transparent; color: var(--ink-soft);
}
.doc-icon-group .icon-btn:hover { background: var(--bg); border-color: transparent; color: var(--ink); }
.doc-icon-group .icon-btn.share:hover { background: var(--accent-tint); color: var(--accent); }
/* Neutral until hovered, per the design — overrides the always-red .icon-btn.danger
   used elsewhere (e.g. the editor toolbar), scoped to this row-action group only so
   that other uses of .icon-btn.danger are untouched. */
.doc-icon-group .icon-btn.danger { color: var(--ink-soft); }
.doc-icon-group .icon-btn.danger:hover { background: var(--danger-tint); border-color: transparent; color: var(--danger); }
/* The editor's docbar carries the same group; its buttons match the docbar's 32px controls. */
.docbar-icons .icon-btn { width: 32px; height: 32px; }

/* ── docked preview footer ──────────────────────────────────────────────── */
.dock-foot {
  flex: none; padding: 14px 18px 16px; border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 9px;
}
.dock-foot-row { display: flex; gap: 8px; }
.dock-foot-row .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.dock-foot #dock-delete { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }

/* ── delete-with-undo toast (bottom-left) ───────────────────────────────── */
.lib-toast {
  position: fixed; left: 22px; bottom: 22px; z-index: 500;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 44px);
  background: var(--ink); color: #fff; border-radius: 11px;
  padding: 12px 16px; box-shadow: 0 18px 40px -18px rgba(14, 35, 56, .6);
  font-size: 13px;
}
.lib-toast-check {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--ok); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.lib-toast.bad .lib-toast-check { background: var(--danger); }
.lib-toast-text { flex: 1; min-width: 0; }
.lib-toast-undo {
  font: inherit; font-size: 13px; font-weight: 600; color: #8FB6FF;
  background: none; border: none; padding: 0; cursor: pointer; flex: none;
}
.lib-toast-undo:hover { color: #B7D0FF; }

/* ── phone (~400px) ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .lib-main { padding: 16px 14px 20px; }
  .lib-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .lib-head .spacer { display: none; }
  .lib-head .search,
  .lib-head .viewswitch,
  .lib-head form.inline { width: 100%; }
  .lib-head form.inline .btn { width: 100%; justify-content: center; }
  .library[data-view="grid"] .doc-rows { grid-template-columns: 1fr; }
  .doc-icon-group .icon-btn { width: 32px; height: 32px; }
}
/* ══ end LIBRARY V2 ═════════════════════════════════════════════════════════ */

/* ══ editor additions ══════════════════════════════════════════════════════ */

/* ── the save state ──────────────────────────────────────────────────────── */

.savebox {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12px; color: var(--ink-soft);
  padding: 5px 10px; border-radius: 999px;
  background: var(--field); border: 1px solid var(--line);
}
.save-icon {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; background: var(--ink-faint);
}
.savebox[data-state="saved"] { color: #16624C; background: var(--ok-tint); border-color: #C9E5DA; }
.savebox[data-state="saved"] .save-icon { background: var(--ok); }
.savebox[data-state="saved"] .save-icon::after { content: '✓'; }
.savebox[data-state="unsaved"] { color: var(--warn); background: var(--warn-tint); border-color: var(--warn-line); }
.savebox[data-state="unsaved"] .save-icon { background: #E0A32E; }
.savebox[data-state="unsaved"] .save-icon::after { content: '•'; }
.savebox[data-state="error"] { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-line); }
.savebox[data-state="error"] .save-icon { background: var(--danger); }
.savebox[data-state="error"] .save-icon::after { content: '!'; }
.savebox[data-state="idle"] .save-icon::after { content: '·'; }
/* Spinning rather than a static word, because "Saving…" that never changes and
   "Saving…" that is genuinely in flight should not look identical. */
.savebox[data-state="saving"] .save-icon {
  background: transparent;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: save-spin .7s linear infinite;
}
@keyframes save-spin { to { transform: rotate(360deg); } }

.brand-tile {
  background: var(--accent); color: #fff; font-family: Georgia, serif; font-weight: 700;
}

/* ── page rail thumbnails ────────────────────────────────────────────────── */

/* The drawn skeleton stays underneath as what a page looks like before its render
   arrives, so the rail never shows an empty hole. */
.thumb { position: relative; overflow: hidden; }
.thumb-shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .18s ease; background: #fff;
}
.thumb-shot.ready { opacity: 1; }
.thumb-count, .thumb-n { position: relative; z-index: 2; }
.thumb.current .thumb-shot { box-shadow: inset 0 0 0 1px var(--accent); }

/* ── placeholder and assigned fields ─────────────────────────────────────── */

.stamp { --field-colour: var(--accent); }

/* An empty field has to look like an invitation rather than like text somebody
   forgot to delete — dashed, tinted, and in its owner's colour. */
.stamp.placeholder {
  outline: 1.5px dashed var(--field-colour);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--field-colour) 8%, transparent);
  opacity: .82;
}
.stamp.placeholder > span:not(.stamp-tag) { opacity: .6; font-style: italic; }
.stamp.required::before {
  content: '';
  position: absolute; top: -5px; right: -5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--danger); border: 1.5px solid #fff;
}
.stamp-empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--field-colour); white-space: nowrap; overflow: hidden;
}
.stamp.theirs { opacity: .5; }
/* A "date signed" field fills itself at Finish (J7): no dashed invitation, no
   italic prompt — a quiet hatched slot with a clock, so nobody tries to type in it. */
.stamp.placeholder.auto-date {
  outline: 1px solid color-mix(in srgb, var(--field-colour) 30%, transparent);
  outline-offset: 2px;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--field-colour) 9%, transparent) 0 5px, transparent 5px 10px);
  opacity: 1;
}
.stamp.placeholder.auto-date.theirs { opacity: .5; }
.stamp.placeholder.auto-date.selected { outline: 1px solid var(--accent); }
.stamp.placeholder.auto-date > span:not(.stamp-tag) {
  opacity: .7; font-style: normal; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: .3em;
}
.stamp.placeholder.auto-date > span:not(.stamp-tag)::before {
  content: ''; flex: none; width: .9em; height: .9em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.6V8l2.3 1.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.6V8l2.3 1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.stamp.editing {
  outline: 2px solid var(--accent); outline-offset: 2px;
  background: #fff; opacity: 1;
}
.stamp.editing > span:not(.stamp-tag) { opacity: 1; font-style: normal; }
.stamp.editing .remove, .stamp.editing .handle { display: none; }

/* ── panels in the tool column ───────────────────────────────────────────── */

.panel {
  border: 1px solid var(--line); border-radius: 12px; background: var(--field);
  padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-kind {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent-dark); background: var(--accent-tint);
  border-radius: 5px; padding: 3px 6px;
}
.stack { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-soft); }
.stack > input, .stack > select, .stack > textarea { font: inherit; font-size: 13px; }
.assign {
  display: flex; flex-direction: column; gap: 9px;
  padding-top: 10px; border-top: 1px dashed var(--line);
}
.assign-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Same colour as .send-signer and .person — a field, its chip and
   its row in the people list all read as the one person at a glance. */
.assign-chip {
  --field-colour: var(--ink-soft);
  font: inherit; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
  background: #fff; color: var(--ink);
}
.assign-chip:hover { border-color: color-mix(in srgb, var(--field-colour) 50%, var(--line)); }
.assign-chip.selected {
  border-color: var(--field-colour); color: var(--field-colour);
  background: color-mix(in srgb, var(--field-colour) 12%, #fff);
  font-weight: 600;
}

/* ── who the next field is for ───────────────────────────────────────────── */

.people-block { display: flex; flex-direction: column; }
.people { display: flex; flex-direction: column; gap: 6px; padding: 0 18px; }

/* The whole row is the control. The bar down its left edge is the same colour the
   person's fields are drawn in on the page, so a row and a field agree at a glance —
   the convention `.assign-chip`, `.send-signer` and `.stamp` already share. */
.person {
  --field-colour: var(--accent);
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 11px; background: #fff;
  overflow: hidden;
}
.person.current {
  border-color: var(--field-colour);
  background: color-mix(in srgb, var(--field-colour) 8%, #fff);
  box-shadow: inset 3px 0 0 var(--field-colour);
}
.person-row {
  display: flex; align-items: center; gap: 9px;
  font: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 8px 10px; color: var(--ink);
}
.person-avatar {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--field-colour); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.person-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.person-id b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-id em {
  font-style: normal; font-size: 10.5px; color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.person.current .person-id em { color: var(--field-colour); }
.person-count {
  flex: none; font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 999px;
  background: var(--bg); color: var(--ink-faint); border: 1px solid transparent;
}
.person-count.some { color: var(--field-colour); border-color: color-mix(in srgb, var(--field-colour) 25%, #fff); }
.person.current .person-count.some { background: #fff; }
.person-drop {
  flex: none; font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  border: 0; background: none; color: var(--ink-faint); padding: 0 2px;
}
.person-drop:hover { color: var(--danger); }
/* The signing link only exists once the document has been sent, so the second line
   appears with it rather than being an empty strip on every row in a draft. */
.person-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px 8px; margin-top: -2px;
}
.person-status {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  border-radius: 999px; padding: 3px 7px;
  background: var(--bg); color: var(--ink-soft);
}
.person-status.completed { background: var(--ok-tint); color: #16624C; }
.person-status.opened { background: var(--accent-tint); color: var(--accent-dark); }
.person-link {
  font: inherit; font-size: 11px; cursor: pointer; border: 0; background: none;
  color: var(--accent); padding: 0;
}

.person-add {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 18px 0; padding: 9px 10px;
  font: inherit; font-size: 12px; color: var(--ink-soft); text-align: left;
  background: none; border: 1px dashed #C9D2DC; border-radius: 10px; cursor: pointer;
}
.person-add:hover { border-color: var(--accent); color: var(--accent-dark); }
.person-add-glyph { font-size: 14px; line-height: 1; }

.person-form {
  margin: 8px 18px 0; padding: 10px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--field);
  display: flex; flex-direction: column; gap: 8px;
}
.person-tabs { display: flex; gap: 6px; }
.person-tab {
  flex: 1; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 7px 8px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
}
.person-tab.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.person-tabpane { display: flex; flex-direction: column; gap: 7px; }
.person-form input { font: inherit; font-size: 12.5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.person-search { background: #fff; height: 34px; padding: 0 10px; }
.person-search input { border: 0; padding: 0; font-size: 12.5px; }
/* The global input[type=text]:focus outline outranks `.search input`, drawing a
   second ring inside the wrapper; the wrapper's border carries focus instead. */
.person-search input:focus { outline: none; }
.person-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 107, 230, .14); }

.directory {
  max-height: 168px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
}
.dir-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--line-soft); padding: 8px 10px;
}
.dir-row:first-child { border-top: 0; }
.dir-row:hover:not(.added) { background: var(--bg); }
/* Already on the document: shown, greyed, and unclickable — reading a name as
   "there already" is the answer, and a list that silently drops them is not. */
.dir-row.added { opacity: .55; cursor: default; }
.dir-avatar {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--bg); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}
.dir-row.added .dir-avatar { background: var(--ink-faint); color: #fff; }
.dir-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dir-id b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-id em { font-style: normal; font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-state { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.dir-row.added .dir-state { color: var(--ok); }
.dir-empty { padding: 14px 12px; font-size: 11.5px; color: var(--ink-faint); text-align: center; }

/* ── whose field the next one is ─────────────────────────────────────────── */

.for-banner {
  --field-colour: var(--accent);
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 18px 10px; padding: 9px 11px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--field-colour) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--field-colour) 28%, #fff);
  color: var(--field-colour);
  font-size: 11.5px; line-height: 1.4;
}
.for-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--field-colour); margin-top: 4px; }

.proxy-panel { --field-colour: var(--accent); }
.proxy-head { display: flex; align-items: center; gap: 9px; }
.proxy-who { min-width: 0; }
.proxy-title { font-size: 14px; font-weight: 600; }
.proxy-role { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proxy-note {
  margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 12px;
}
.proxy-req { display: flex; align-items: center; gap: 8px; }
.req-pill {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--field-colour) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--field-colour) 40%, #fff);
  color: var(--field-colour);
}
.req-pill.off { background: var(--bg); border-color: var(--line); color: var(--ink-soft); }
.proxy-req-note { font-size: 11px; color: var(--ink-faint); }

/* Sending: a spinner on the button itself, since that is where the eye already is. */
#btn-send-confirm { display: inline-flex; align-items: center; gap: 8px; }
#btn-send-confirm .send-spin { display: none; }
#btn-send-confirm.busy .send-spin {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: save-spin .7s linear infinite;
}
#btn-send-confirm.busy { cursor: progress; }

.send-done { text-align: center; padding: 10px 0 0; }
.send-done-mark {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin: 4px auto 12px;
  border-radius: 50%;
  background: var(--ok-tint); color: var(--ok);
  font-size: 24px; font-weight: 700;
}
.send-done-head { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.send-done-list {
  list-style: none; margin: 0 auto; padding: 0;
  font-size: 13px; color: var(--ink-soft); line-height: 1.7;
  overflow-wrap: anywhere;
}
.send-done footer { justify-content: center; }

/* ── send for signature (editor) ─────────────────────────────────────────────
   Header, a scrolling body and a pinned footer, like the move dialog. The body
   holds the signers, the message, the three link-access settings in one card and
   the hand-over switch. */
.modal-card.send-card {
  width: min(640px, 100%);
  max-height: calc(100vh - 40px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 30px 80px -30px rgba(14, 35, 56, .6);
}
.send-head {
  flex: none;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid #E7ECF2;
}
.send-head-text { flex: 1; min-width: 0; }
.send-card .send-head h2 { margin: 0; font: 400 22px/1.25 Georgia, serif; letter-spacing: -.01em; }
.send-sub { margin-top: 4px; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.send-x {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; background: none; padding: 0;
  color: var(--ink-soft); cursor: pointer;
}
.send-x:hover:not(:disabled) { background: #F1F4F8; }
.send-x:disabled { opacity: .45; cursor: default; }
.send-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.send-form[hidden] { display: none; }
.send-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 22px 26px;
  display: flex; flex-direction: column; gap: 24px;
}
.send-section { display: flex; flex-direction: column; gap: 10px; color: var(--ink); font-size: 14px; }
.send-label-row { display: flex; align-items: baseline; gap: 8px; }
.send-eyebrow {
  flex: 1;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.send-aside { font-size: 12px; color: var(--ink-faint); }

.send-people { border: 1px solid #E1E6ED; border-radius: 12px; overflow: hidden; }
/* The avatar is drawn in the colour the person's fields are drawn in on the page —
   the convention `.assign-chip`, `.person` and `.stamp` share. */
.send-signer {
  --field-colour: var(--accent);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
}
.send-signer + .send-signer { border-top: 1px solid #EEF1F5; }
.send-avatar {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--field-colour); color: #fff;
  font-size: 12px; font-weight: 700;
}
.send-signer-who, .send-signer-count { display: flex; flex-direction: column; gap: 2px; }
.send-signer-who { flex: 1; min-width: 0; }
.send-signer-count { flex: none; align-items: flex-end; }
.send-signer-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.send-signer-email { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send-signer-fields { font-size: 12.5px; font-weight: 600; }
.send-signer-req { font-size: 12px; color: var(--ink-faint); }
.send-signer-done { font-size: 11px; font-weight: 600; color: var(--ok); }

#send-message {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px;
  font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink);
  background: #FBFCFD; outline: none;
}
#send-message::placeholder, .send-card input::placeholder { color: var(--ink-faint); }
#send-message:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 107, 230, .15); background: #fff; }

.send-access { border: 1px solid #E1E6ED; border-radius: 12px; display: flex; flex-direction: column; }
.send-opt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  padding: 14px 16px;
}
.send-opt + .send-opt { border-top: 1px solid #EEF1F5; margin: 0 16px; padding-left: 0; padding-right: 0; }
.send-opt-text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.send-opt-text[hidden], .send-opt-desc[hidden] { display: none; }
.send-opt-title, .send-opt-title label { font-size: 14px; font-weight: 600; color: var(--ink); white-space: normal; }
.send-opt-desc { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; white-space: normal; }
.send-card label.send-opt-extra { flex-basis: 100%; font-size: 13px; }

.send-pw {
  flex: 0 1 220px; min-width: 0;
  display: flex; align-items: center;
  height: 40px; padding: 0 4px 0 12px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 9px; background: #FBFCFD;
}
.send-pw:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 107, 230, .15); background: #fff; }
/* Both states named: the global input[type=text|password](:focus) rules would
   otherwise draw a second box inside the wrapper. */
.send-pw input, .send-pw input:focus,
.send-stepper input, .send-stepper input:focus {
  flex: 1; width: 0; min-width: 0; height: 100%;
  padding: 0; border: 0; border-radius: 0; outline: none; box-shadow: none;
  background: transparent;
  font: inherit; font-size: 14px; color: var(--ink);
}
.send-pw-show {
  border: 0; background: none; font: inherit;
  font-size: 12px; font-weight: 600; color: var(--accent);
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.send-pw-show:hover { background: #E8EFFC; }

.send-stepper {
  flex: 0 1 220px;
  display: flex; align-items: stretch;
  height: 40px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
}
.send-stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 107, 230, .15); }
.send-stepper button {
  width: 40px; flex: none;
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 18px; color: var(--ink-soft); cursor: pointer;
}
.send-stepper button:first-child { border-right: 1px solid var(--line); }
.send-stepper button:last-child { border-left: 1px solid var(--line); }
.send-stepper button:hover { background: #F1F4F8; }
.send-stepper input, .send-stepper input:focus { text-align: center; font-weight: 600; -moz-appearance: textfield; appearance: textfield; }
.send-stepper input::placeholder { color: var(--ink); font-weight: 600; }
.send-stepper input::-webkit-inner-spin-button,
.send-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Six choices in a pill track; real radios underneath, so arrows move between them. */
.send-seg {
  flex: 0 1 300px;
  display: flex; gap: 2px;
  height: 40px; padding: 3px; box-sizing: border-box;
  border-radius: 9px; background: #EEF1F5;
}
.send-card .send-seg label { flex: 1; display: flex; position: relative; cursor: pointer; }
.send-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.send-seg span {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; font-size: 13px; color: var(--ink-soft);
}
.send-seg label:hover span { color: var(--ink); }
.send-seg input:checked + span {
  background: #fff; color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(14, 35, 56, .15);
}
.send-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

.send-card label.send-dl {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 12px;
  background: #F4F6F9; cursor: pointer;
  white-space: normal;
}

.modal-card footer.send-foot {
  flex: none; margin: 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 26px;
  border-top: 1px solid #E7ECF2; background: #FBFCFD;
}
.send-summary { flex: 1 1 200px; font-size: 12.5px; color: var(--ink-soft); }
.send-foot .btn { height: 40px; padding: 0 16px; border-radius: 9px; font-size: 14px; white-space: nowrap; }
.send-foot .btn.primary { padding: 0 20px; font-weight: 600; }
.send-card .send-done { padding: 26px 26px 22px; overflow-y: auto; }
@media (max-width: 480px) {
  .send-head, .send-body { padding-left: 16px; padding-right: 16px; }
  .modal-card footer.send-foot { padding: 12px 16px; }
  .send-pw, .send-stepper, .send-seg { flex-basis: 100%; }
}

/* ── the password gate ───────────────────────────────────────────────────── */

.signing-body { background: var(--bg); }
.gate {
  min-height: calc(100vh - var(--topbar-h));
  display: flex; align-items: center; justify-content: center; padding: 32px 20px;
}
.gate-card {
  width: 420px; max-width: 100%; background: #fff; border-radius: 16px;
  border: 1px solid var(--line); padding: 30px 28px 26px; text-align: center;
  box-shadow: 0 30px 60px -34px rgba(14, 35, 56, .5);
}
.gate-glyph { font-size: 30px; }
.gate-card h1 { margin: 12px 0 0; font: 600 20px/1.3 Georgia, serif; }
.gate-why { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.gate-form { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.gate-form input {
  font: inherit; font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
}
.gate-error { margin: 0; font-size: 12.5px; color: var(--danger); }

.editor.finished .tools, .editor.finished .docbar #btn-finish { opacity: .5; pointer-events: none; }

/* ── a recipient's own checklist ─────────────────────────────────────────── */

/* With no placing tiles rendered the container would otherwise hold an empty
   bordered strip on the signing page. */
.tool-tiles:empty { display: none; }

.myfields { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.myfield {
  display: flex; align-items: center; gap: 9px; text-align: left; width: 100%;
  font: inherit; cursor: pointer; padding: 8px 10px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line);
}
.myfield:hover { border-color: var(--accent); }
.myfield-mark {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 1.5px dashed var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff;
}
.myfield.done .myfield-mark { background: var(--ok); border: 0; }
.myfield-label { display: flex; flex-direction: column; min-width: 0; }
.myfield-label b { font-size: 12.5px; }
.myfield-label em { font-style: normal; font-size: 11px; color: var(--ink-faint); }

/* ═══════════════════════════════════════════════════════════════════════════
   FOLDERS (HANDOFF's "Unit 3") — appended block, own section, do not interleave.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── breadcrumbs ─────────────────────────────────────────────────────────── */

/* An interlocking arrow trail. Every segment is clipped to a chevron: the point
   on its right (13px, --notch) and, after the first, a matching notch cut from its
   left — then pulled back under the segment before it, so each point sits in the
   next one's notch. It stops 3px short of a full 13px, leaving a thin chevron of
   page between neighbours: two same-coloured segments would otherwise run together. The sibling menu hangs off the unclipped .crumb
   wrapper (a clip-path would cut it off too). */
.lib-crumbs {
  --notch: 13px;
  display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px;
  margin-bottom: -6px;
}
/* The pull-back margin also applies to whichever crumb starts a wrapped row, so the
   trail carries that much left padding and the root gives it back. */
.lib-crumbs { padding-left: calc(var(--notch) - 3px); }
.crumb-root { margin-left: calc(-1 * var(--notch) + 3px); }
.crumb { position: relative; display: flex; }
.crumb + .crumb { margin-left: calc(-1 * var(--notch) + 3px); }
.crumb.open { z-index: 45; }

.crumb-seg {
  display: flex; align-items: center; gap: 2px; height: 34px; box-sizing: border-box;
  padding: 0 calc(var(--notch) + 3px) 0 calc(var(--notch) + 14px);
  background: #fff; color: var(--ink-soft);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
  transition: background-color .12s;
}
.crumb-root .crumb-seg {
  padding-left: 14px; background: var(--line);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);
}
.crumb-seg:hover { background: var(--accent-tint); color: var(--ink); }
.crumb-seg.crumb-current,
.crumb-seg.crumb-current:hover { background: var(--ink); color: #fff; font-weight: 600; }
.crumb-seg.crumb-elided,
.crumb-seg.crumb-elided:hover { background: #fff; color: var(--ink-faint); cursor: default; }
.crumb-seg.drop-target,
.crumb-seg.crumb-current.drop-target { background: var(--accent); color: #fff; }

.crumb-link {
  color: inherit; text-decoration: none; align-self: stretch;
  display: flex; align-items: center; padding-right: 3px;
}
.crumb-link:focus-visible { outline: none; text-decoration: underline; }

/* The "▾" sibling jump and the current folder's "⋮" settings. */
.crumb-icon {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: grid; place-items: center; width: 20px; height: 22px; border-radius: 6px;
  font-size: 13px; line-height: 1; color: inherit; opacity: .7;
}
.crumb-caret { font-size: 9px; }
.crumb-icon:hover,
.crumb-icon[aria-expanded="true"] { opacity: 1; background: rgba(14, 35, 56, .08); }
.crumb-current .crumb-icon:hover,
.crumb-current .crumb-icon[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.crumb-icon:focus-visible { outline: 2px solid var(--accent); opacity: 1; }

.crumb-menu {
  position: absolute; top: calc(100% + 6px); left: 14px; z-index: 40;
  width: 220px; max-height: 320px; overflow-y: auto; box-sizing: border-box;
  display: flex; flex-direction: column; padding: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 18px 40px -14px rgba(14, 35, 56, .5);
}
.crumb-menu[hidden] { display: none; }
.crumb-menu a {
  padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--ink-soft);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crumb-menu a:hover { background: #F4F6F9; color: var(--ink); }
.crumb-menu a.current { background: var(--accent-tint); color: var(--ink); font-weight: 600; }

/* "New folder" closes the trail: the same chevron, in the accent tint, standing a
   hair off the last segment rather than interlocked with it. */
.crumb-seg.crumb-add {
  font: inherit; font-size: 12.5px; font-weight: 600; border: none; cursor: pointer;
  margin-left: 2px; gap: 6px; padding: 0 14px 0 calc(var(--notch) + 12px);
  background: var(--accent-tint); color: var(--accent);
}
.crumb-seg.crumb-add:hover { background: #DCE8FE; color: var(--accent-dark); }
.crumb-seg.crumb-add:focus-visible { outline: none; background: #DCE8FE; text-decoration: underline; }

/* ── row folder label (every tab but "All documents") ───────────────────── */

.doc-folder-label { display: none; }
.showing-folder-labels .doc-folder-label {
  display: inline-block; font-size: 11px; color: var(--ink-soft);
  background: var(--line-soft); border-radius: 5px; padding: 1px 6px; margin-left: 6px;
}
.doc-row.drop-target { border-color: var(--accent); background: var(--accent-tint); }

/* ── small icon buttons (folder menus) ───────────────────────────────────── */

.icon-btn.tiny { width: 24px; height: 24px; font-size: 12px; }

/* ── floating folder menu (rename/share/delete) ──────────────────────────── */

.folder-menu {
  position: absolute; z-index: 40; min-width: 130px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 4px;
  box-shadow: 0 14px 34px -18px rgba(14, 35, 56, .45);
  display: flex; flex-direction: column;
}
.folder-menu button {
  all: unset; cursor: pointer; padding: 7px 10px; border-radius: 7px;
  font-size: 13px; color: var(--ink);
}
.folder-menu button:hover { background: var(--bg); }
.folder-menu button[data-action="delete"] { color: var(--danger); }
.folder-menu button[data-action="delete"]:hover { background: var(--danger-tint); }

/* ── modal form fields (new folder / rename) ─────────────────────────────── */

.field-label { display: block; font-size: 12px; color: var(--ink-soft); margin: 10px 0 5px; }
.text-input {
  width: 100%; font: inherit; font-size: 13.5px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 9px; box-sizing: border-box;
}
.text-input:focus { outline: none; border-color: var(--accent); }
.field-error { margin: 8px 0 0; font-size: 12.5px; color: var(--danger); }

/* ── OS file drop ─────────────────────────────────────────────────────────── */

.drop-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(14, 35, 56, .55);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.drop-overlay-card {
  background: #fff; border-radius: 16px; padding: 34px 40px; text-align: center;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); color: var(--ink); font-weight: 600;
  border: 2px dashed var(--accent);
}
.drop-overlay-glyph { font-size: 30px; color: var(--accent); margin-bottom: 6px; }

.upload-progress {
  position: fixed; right: 18px; bottom: 18px; z-index: 61; width: 260px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 20px 40px -22px rgba(14, 35, 56, .5);
}
.upload-progress-name { font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; }
.upload-progress-bar { height: 6px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.upload-progress-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s ease; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOLDER SHARING V2 — appended block, own section, do not interleave.
   Reference: scratchpad/design/Webway Folder Sharing.dc.html (visual + behaviour).
   ═══════════════════════════════════════════════════════════════════════════ */

.fsv2-card {
  width: min(760px, 100vw - 24px);
  max-height: min(88vh, 760px);
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 30px 70px -20px rgba(14, 35, 56, .55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── header ───────────────────────────────────────────────────────────── */
.fsv2-head {
  flex: none;
  padding: 20px 26px 18px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.fsv2-head-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px; background: var(--accent-tint); border: 1px solid #D8E4FB;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.fsv2-head-text { flex: 1; min-width: 0; }
.fsv2-eyebrow { font-size: 10px; letter-spacing: .12em; font-weight: 700; color: var(--ink-faint); }
.fsv2-title { margin: 4px 0 0; font-family: Georgia, serif; font-weight: 400; font-size: 23px; letter-spacing: -.01em; }
.fsv2-subline { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.fsv2-pill {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 99px;
  color: var(--accent); background: var(--accent-tint); border: 1px solid #D8E4FB;
}
.fsv2-pill.restricted { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-line); }

/* ── body / rule ──────────────────────────────────────────────────────── */
.fsv2-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 26px 22px; }
.fsv2-rule { height: 1px; background: var(--line-soft); margin: 20px 0 16px; }

/* ── scope radio cards ───────────────────────────────────────────────── */
.fsv2-scope { display: flex; flex-direction: column; gap: 10px; }
.fsv2-scope-card {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; cursor: pointer;
  border-radius: 12px; border: 1.5px solid var(--line); background: #fff;
}
.fsv2-scope-card.on { border-color: var(--accent); background: var(--accent-tint); }
.fsv2-radio {
  width: 16px; height: 16px; flex: none; margin-top: 2px; border-radius: 50%;
  border: 2px solid var(--ink-faint); box-sizing: border-box;
}
.fsv2-scope-card.on .fsv2-radio { border-color: var(--accent); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 9px var(--accent); }
.fsv2-scope-title { font-size: 13.5px; font-weight: 600; }
.fsv2-scope-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 2px; }

/* ── add people: header row + segmented tabs ─────────────────────────── */
.fsv2-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.fsv2-tabs { display: flex; gap: 6px; flex: none; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.fsv2-tab { display: inline-flex; white-space: nowrap; font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 8px; cursor: pointer; color: var(--ink-soft); }
.fsv2-tab.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(14, 35, 56, .14); }
.fsv2-tab.off-disabled { opacity: .45; cursor: not-allowed; }

/* ── team search ──────────────────────────────────────────────────────── */
.fsv2-search { display: flex; align-items: center; gap: 8px; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.fsv2-search-glyph { font-size: 13px; color: var(--ink-faint); }
.fsv2-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 13px; }
.fsv2-search input:focus { outline: none; }
.fsv2-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 107, 230, .14); }
.fsv2-results { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; max-height: 200px; overflow-y: auto; }
.fsv2-result-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.fsv2-result-row:first-child { border-top: none; }
.fsv2-result-row.added { cursor: default; opacity: .5; }
.fsv2-result-avatar {
  width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--line-soft);
  color: var(--ink-soft); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.fsv2-result-info { flex: 1; min-width: 0; }
.fsv2-result-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsv2-result-sub { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsv2-result-state { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); flex: none; }
.fsv2-result-row.added .fsv2-result-state { color: var(--ok); }
.fsv2-empty { padding: 16px; text-align: center; font-size: 12.5px; color: var(--ink-faint); }

/* ── external party card ─────────────────────────────────────────────── */
.fsv2-ext-card { border: 1px solid var(--danger-line); background: var(--danger-tint); border-radius: 12px; padding: 14px 15px; }
.fsv2-ext-note { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; }
.fsv2-ext-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--danger); margin-top: 5px; }
.fsv2-ext-note div { font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.fsv2-ext-note strong { color: var(--ink); }
.fsv2-ext-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fsv2-field { display: flex; flex-direction: column; gap: 5px; }
.fsv2-field span { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.fsv2-field input, .fsv2-field select {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
}
.fsv2-ext-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.fsv2-ext-btn { font: inherit; font-size: 13px; font-weight: 600; color: #fff; border: none; border-radius: 10px; padding: 10px 16px; background: var(--line); cursor: not-allowed; }
.fsv2-ext-btn.valid { background: var(--danger); cursor: pointer; }
.fsv2-ext-btn.valid:hover { background: var(--danger-dark); }
.fsv2-hint { font-size: 11.5px; color: var(--ink-faint); }

/* ── access rows ──────────────────────────────────────────────────────── */
.fsv2-rows { display: flex; flex-direction: column; gap: 8px; }
.fsv2-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.fsv2-row.ext { border-color: var(--danger-line); background: var(--danger-tint); }
.fsv2-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; color: #fff; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.fsv2-avatar.owner { background: var(--ink); }
.fsv2-avatar.team { background: var(--accent); }
.fsv2-avatar.ext { background: var(--danger); }
.fsv2-row-info { flex: 1; min-width: 0; }
.fsv2-row-name-line { display: flex; align-items: center; gap: 7px; }
.fsv2-row-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsv2-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; flex: none; }
.fsv2-badge.owner { color: var(--ink); background: rgba(14, 35, 56, .08); border: 1px solid rgba(14, 35, 56, .24); }
.fsv2-badge.team { color: var(--accent); background: var(--accent-tint); border: 1px solid #D8E4FB; }
.fsv2-badge.ext { color: var(--danger); background: var(--danger-tint); border: 1px solid var(--danger-line); }
.fsv2-row-sub { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.fsv2-row-sub .fsv2-expired { color: var(--danger); font-weight: 600; }
.fsv2-picker-wrap { position: relative; flex: none; }
.fsv2-picker {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; cursor: pointer;
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.fsv2-picker .car { font-size: 9px; opacity: .6; }
.fsv2-picker.locked { color: var(--ink-faint); background: var(--field); cursor: not-allowed; }
.fsv2-menu {
  position: absolute; top: calc(100% + 6px); right: 0; width: 272px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(14, 35, 56, .4);
  padding: 6px; z-index: 30;
}
.fsv2-menu-option { padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.fsv2-menu-option:hover, .fsv2-menu-option.selected { background: var(--field); }
.fsv2-menu-option-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fsv2-menu-option-top span:first-child { font-size: 13px; font-weight: 600; }
.fsv2-menu-check { font-size: 12px; font-weight: 700; color: var(--accent); opacity: 0; }
.fsv2-menu-option.selected .fsv2-menu-check { opacity: 1; }
.fsv2-menu-option-desc { font-size: 11.5px; line-height: 1.45; color: var(--ink-faint); margin-top: 2px; }
.fsv2-menu-extra { padding: 9px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; border-radius: 9px; }
.fsv2-menu-extra:hover { background: var(--field); }
.fsv2-menu-remove { margin-top: 4px; border-top: 1px solid var(--line-soft); padding: 9px 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--danger); cursor: pointer; }
.fsv2-menu-remove:hover { background: var(--danger-tint); }
.fsv2-restricted-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 8px; }

/* ── link sharing ─────────────────────────────────────────────────────── */
.fsv2-link-card { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 14px 15px; }
.fsv2-link-card.on { border-color: var(--warn-line); background: var(--warn-tint); }
.fsv2-link-top { display: flex; align-items: flex-start; gap: 12px; }
.fsv2-switch { width: 40px; height: 23px; flex: none; border-radius: 99px; cursor: pointer; position: relative; background: var(--line); transition: background .15s; }
.fsv2-switch.on { background: var(--avatar); }
.fsv2-switch.disabled { cursor: not-allowed; opacity: .6; }
.fsv2-knob { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(14, 35, 56, .3); }
.fsv2-switch.on .fsv2-knob { left: 20px; }
.fsv2-link-text { flex: 1; min-width: 0; }
.fsv2-link-title { font-size: 13.5px; font-weight: 600; }
.fsv2-link-blurb { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 2px; }
.fsv2-link-details { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.fsv2-link-url-row { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; flex-wrap: wrap; }
.fsv2-link-url { flex: 1; min-width: 120px; font-size: 12.5px; font-family: ui-monospace, monospace; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsv2-link-url.pending { font-family: inherit; font-style: italic; color: var(--ink-faint); }
.fsv2-link-copy { font: inherit; font-size: 12px; font-weight: 600; color: #fff; background: var(--ink); border: none; border-radius: 8px; padding: 7px 13px; cursor: pointer; flex: none; }
.fsv2-link-copy:hover { background: #16324f; }
.fsv2-link-reset { font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 7px 4px; flex: none; text-decoration: underline; }
.fsv2-link-reset:hover { color: var(--ink); }
.fsv2-link-confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; }
.fsv2-link-confirm button { font: inherit; font-size: 12px; font-weight: 600; border-radius: 7px; padding: 5px 10px; cursor: pointer; border: none; }
.fsv2-link-confirm #fs-link-reset-yes { color: #fff; background: var(--danger); }
.fsv2-link-confirm #fs-link-reset-no { color: var(--ink-soft); background: #fff; border: 1px solid var(--line); }
.fsv2-link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fsv2-pw-row { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12.5px; color: var(--ink-soft); }
.fsv2-pw-row.disabled { cursor: not-allowed; opacity: .6; }
.fsv2-checkbox { width: 18px; height: 18px; flex: none; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: #fff; border: 1.5px solid var(--line); }
.fsv2-checkbox.on { background: var(--accent); border-color: var(--accent); }

/* ── permissions explainer ───────────────────────────────────────────── */
.fsv2-explainer { margin-top: 16px; border: 1px solid var(--line-soft); background: var(--field); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.fsv2-explainer .fsv2-eyebrow { margin: 0; }
.fsv2-explainer div:not(.fsv2-eyebrow) { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.fsv2-explainer strong { color: var(--ink); }

/* ── footer ───────────────────────────────────────────────────────────── */
.fsv2-foot { flex: none; padding: 14px 26px; border-top: 1px solid var(--line-soft); background: var(--field); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fsv2-footnote { font-size: 12px; color: var(--ink-faint); line-height: 1.45; max-width: 420px; }
.fsv2-foot .field-error { margin: 4px 0 0; max-width: 420px; }
.fsv2-foot-actions { display: flex; align-items: center; gap: 9px; flex: none; }

/* ── activity modal ──────────────────────────────────────────────────── */
.fsv2-activity-card { width: min(520px, 100%); }
.fsv2-activity-list { max-height: 360px; overflow-y: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.fsv2-activity-row { padding: 9px 2px; border-bottom: 1px solid var(--line-soft); }
.fsv2-activity-row:last-child { border-bottom: none; }
.fsv2-activity-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fsv2-activity-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.fsv2-activity-time { font-size: 11px; color: var(--ink-faint); white-space: nowrap; flex: none; }
.fsv2-activity-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }

/* ── toast (own pill — lives outside the modal, survives it closing) ────── */
.fsv2-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; padding: 11px 18px;
  border-radius: 99px; box-shadow: 0 12px 30px -8px rgba(14, 35, 56, .6); z-index: 70;
  max-width: min(460px, 90vw); text-align: center;
}
.fsv2-toast.bad { background: var(--danger); }

/* ── phone width (~400px) ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .fsv2-card { max-height: min(94vh, 760px); }
  .fsv2-head { padding: 16px 16px 14px; flex-wrap: wrap; }
  .fsv2-body { padding: 16px 16px 18px; }
  .fsv2-foot { padding: 12px 16px; }
  .fsv2-ext-grid, .fsv2-link-grid { grid-template-columns: 1fr; }
  .fsv2-row-head { flex-direction: column; align-items: flex-start; }
  .fsv2-pill { align-self: flex-start; }
}

/* ── team page (app/users.html) ──────────────────────────────────────────── */

/* After the "Webway Users" Claude design: people on the left, account-wide
   settings on the right. Wider than an ordinary .sheet so both columns fit. */
.sheet.team { max-width: 1240px; }
.team .card { margin: 0; padding: 0; }
.team .faint { font-size: 12px; color: var(--ink-faint); }
.team .muted { font-size: 12.5px; }
/* With users.js loaded every control saves itself; see the comment in the template. */
.team.js .save-fallback { display: none; }

.team-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 18px; }
.team-head h1 { margin: 0; font: 600 24px/1.15 Georgia, 'Times New Roman', serif; letter-spacing: -.01em; }
.team-meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.team-head .btn { padding: 10px 14px; border-radius: var(--radius); text-decoration: none; }
.team-head .btn.primary { display: inline-flex; align-items: center; gap: 8px; }
.add-glyph { font-size: 14px; line-height: 1; }

.seat-note {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.seat-note strong { font-weight: 600; color: var(--ink); }
.seat-note .seat-sep { opacity: .5; }
.seat-note a, .flag-desc a { font-weight: 600; color: var(--accent); text-decoration: none; }
.seat-note a { margin-left: 2px; }
.seat-note a:hover, .flag-desc a:hover { color: var(--accent-dark); }
/* At or over the plan's seats — the only time the note asks for attention. */
.seat-note.full { background: var(--warn-tint); border-color: var(--warn-line); color: var(--warn); }
.seat-note.full strong { color: var(--warn); }

/* Add someone: a link to #add-someone without JS (:target), a toggle with it (.open). */
.add-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 18px !important;
  padding: 20px 22px !important;
  box-shadow: 0 12px 30px -22px rgba(14, 35, 56, .45);
}
.add-panel.open, .team:not(.js) .add-panel:target { display: flex; }
.add-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.add-title strong { font-size: 14px; }
.add-title span { font-size: 12.5px; color: var(--ink-soft); }
.add-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px;
}
.add-fields label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft);
}
.add-fields input, .add-fields select { font-size: 13.5px; font-weight: 400; letter-spacing: 0; }
.add-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}
.add-foot .btn { text-decoration: none; }

.team-cols { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.team-main { flex: 1 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.team-side { flex: 1 1 290px; max-width: 340px; min-width: 270px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 980px) { .team-side { max-width: none; } }

/* One person per row. */
.member {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 20px;
  padding: 16px 18px;
}
.member + .member { border-top: 1px solid var(--line-soft); }
.member.suspended { background: var(--field); }
.member.suspended .member-who, .member.suspended .member-col { opacity: .72; }
.member-who { flex: 1 1 260px; display: flex; align-items: center; gap: 13px; min-width: 0; }
.member-avatar {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #E4EAF2; color: #3C5470;
  font-size: 12px; font-weight: 700;
}
.member-avatar.admin { background: var(--ink); color: #fff; }
.member-id { flex: 1; min-width: 0; line-height: 1.4; }
.member-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.member-name strong { font-size: 15px; }
.member-email { display: block; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.member-seen { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-faint); text-decoration: none; }
a.member-seen:hover { color: var(--accent); }
.member-state {
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.member-state.on { background: var(--ok-tint); color: var(--ok); }
.member-state.off { background: var(--danger-tint); color: var(--danger-dark); }
.member-state.you { background: var(--line-soft); color: var(--ink-soft); }

/* Label over a 38px value slot, so every column's label sits on one line whatever
   its control's height (a select, the chips, a pill). */
.member-col { display: grid; grid-template-rows: auto 38px; align-items: center; row-gap: 5px; }
.member-col.role { flex: 0 0 150px; }
.member-col.access { flex: 0 0 165px; }
.member-col.tfa { flex: 0 0 96px; }
.col-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--ink-faint);
}
.member-col select {
  padding: 8px 10px;
  border-color: var(--line);
  border-radius: 9px;
  background: var(--field);
  font-weight: 600;
  cursor: pointer;
}
.member-col select:disabled { cursor: default; color: var(--ink-soft); }
.everything { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.access-chips { display: flex; gap: 6px; }

/* A checkbox drawn as the design's chip: tinted when ticked. */
.access-chip { position: relative; display: inline-flex; cursor: pointer; user-select: none; }
.access-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.access-chip span {
  padding: 6px 11px;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}
.access-chip input:checked + span { border-color: #BFD3F7; background: var(--accent-tint); color: var(--accent-dark); }
.access-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

.tfa-state {
  justify-self: start;
  padding: 5px 9px;
  border-radius: 7px;
  background: #F2F4F8; color: var(--ink-faint);
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.tfa-state.on { background: var(--ok-tint); color: var(--ok); }
.tfa-state.due { background: var(--accent-tint); color: var(--accent-dark); }

.member-more { position: relative; flex: 0 0 36px; margin-left: auto; display: flex; justify-content: flex-end; }
.kebab {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 0; border-radius: 8px;
  background: transparent;
  font-size: 16px; line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
}
.kebab:hover, .kebab[aria-expanded=true] { background: var(--line-soft); color: var(--ink); }
.kebab-menu {
  position: absolute; top: 34px; right: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 1px;
  width: 208px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 18px 40px -14px rgba(14, 35, 56, .5);
}
.kebab-menu[hidden] { display: none; }
.member-action {
  padding: 9px 11px;
  border: 0; border-radius: 8px;
  background: transparent;
  font: inherit; font-size: 12.5px; text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.member-action:hover { background: var(--line-soft); }
.member-action.danger { color: var(--danger-dark); }

.member-password {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-left: 49px;
}
.member-password[hidden] { display: none; }
.member-password input { flex: 0 1 300px; }
.member .save-fallback { margin-left: 49px; }

/* What View and Edit allow: the first paragraph always, the rest behind More. */
.notes { padding: 16px 18px !important; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.notes summary { display: flex; flex-direction: column; gap: 10px; cursor: pointer; list-style: none; }
.notes summary::-webkit-details-marker { display: none; }
.notes-head { display: flex; align-items: center; gap: 10px; }
.notes-head strong { font-size: 13.5px; }
.notes .notes-toggle { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.notes .notes-toggle::after { content: 'More'; }
.notes[open] .notes-toggle::after { content: 'Less'; }
.notes p, .notes-lead { margin: 0; text-wrap: pretty; }
.notes strong { color: var(--ink); }
.notes-more { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }

.security { overflow: hidden; }
.card-head { padding: 14px 18px 12px; border-bottom: 1px solid var(--line-soft); }
.card-head strong { font-size: 13.5px; }
.card-head .faint { margin-top: 2px; }
.flag { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 15px 18px; }
.flag + .flag { border-top: 1px solid var(--line-soft); }
.flag-text { flex: 1; min-width: 0; }
.flag-title { font-size: 13px; font-weight: 600; line-height: 1.35; }
.flag-desc { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }

/* A checkbox drawn as an on/off switch. */
.toggle-switch { position: relative; flex: none; display: inline-flex; cursor: pointer; }
.toggle-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-switch span {
  display: flex;
  width: 40px; height: 23px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #D5DCE5;
  transition: background .16s;
}
.toggle-switch span::after {
  content: '';
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(14, 35, 56, .3);
  transition: transform .16s;
}
.toggle-switch input:checked + span { background: var(--accent); }
.toggle-switch input:checked + span::after { transform: translateX(17px); }
.toggle-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.storage { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px !important; }
.storage-head { display: flex; align-items: baseline; gap: 8px; }
.storage-head strong { font-size: 13.5px; }
.storage-head .muted { font-size: 12px; }
.usage-bar { height: 7px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.usage-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.usage-bar.full span { background: var(--danger); }
.storage-foot { display: flex; align-items: center; gap: 10px; }
.storage-foot .btn { padding: 8px 12px; font-size: 12.5px; text-decoration: none; }

/* ── plan & billing page (account/plan.html) ─────────────────────────────── */

/* After the "Webway Plan and Billing" Claude design: a dark band with the
   current package, the three packages as cards, then extra storage and
   billing side by side. Classes are plan- prefixed; .card, .bar and .chip
   already mean other things. */
.sheet.plan-page { max-width: 1120px; display: flex; flex-direction: column; gap: 20px; }
.plan-page h1, .plan-page h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.01em; }
.plan-page h1 { font-size: 27px; margin-top: 4px; }
.plan-page h2 { font-size: 23px; }
.plan-page .faint { color: var(--ink-faint); }
.plan-page .muted { font-size: 13px; }
.plan-page a:not(.btn) { color: var(--accent); text-decoration: none; }
.plan-page a:not(.btn):hover { color: var(--accent-dark); text-decoration: underline; }

.plan-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.plan-head .btn { padding: 10px 14px; border-radius: var(--radius); text-decoration: none; }
.plan-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--ink-faint); }

.plan-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 22px;
  align-items: center;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
}
.plan-hero .plan-eyebrow { color: rgba(255,255,255,.5); }
.plan-hero-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; }
.plan-hero-name > span:first-child { font: 30px/1.15 Georgia, 'Times New Roman', serif; letter-spacing: -.01em; }
.plan-hero-price { font-size: 15px; font-weight: 600; color: #8FB6FA; }
.plan-hero-price small { font-size: 12px; font-weight: 400; color: rgba(255,255,255,.55); }
.plan-hero-note { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 4px; }

.plan-meter { display: flex; flex-direction: column; gap: 7px; }
.plan-meter-line { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.72); }
.plan-meter-line strong { font-weight: 600; color: #fff; }
.plan-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.plan-bar > div { height: 100%; min-width: 3%; border-radius: 999px; background: #4E8BF5; }
.plan-bar > div.over { background: var(--avatar); }
.plan-meter-note { font-size: 11.5px; color: rgba(255,255,255,.5); }
.plan-meter-note.over { color: #F2C46A; }

.plan-alert {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 13px 16px;
  border: 1px solid var(--warn-line);
  border-radius: 12px;
  background: var(--warn-tint);
}
.plan-alert-mark {
  width: 22px; height: 22px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--avatar); color: var(--ink);
  font-size: 13px; font-weight: 700;
}
.plan-alert-text { font-size: 13px; color: var(--warn); text-wrap: pretty; }
.plan-alert form { margin: 0; }
.plan-alert .btn { border-color: #E0CB98; padding: 8px 13px; font-size: 12.5px; }

.plan-packages { display: flex; flex-direction: column; gap: 12px; }
.plan-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.plan-section-head span { font-size: 13.5px; color: var(--ink-soft); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.plan-foot { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

.plan-card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -28px rgba(14,35,56,.55); border-color: var(--accent); }
.plan-card.current { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46,107,230,.12); }
.plan-card-top { display: flex; align-items: center; gap: 10px; }
.plan-card-name { font: 400 24px/1.15 Georgia, 'Times New Roman', serif; letter-spacing: -.01em; }
.plan-tag {
  padding: 5px 10px; border-radius: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #F2F4F8; color: var(--ink-faint);
}
.plan-tag.current { background: #EAF1FE; color: var(--accent-dark); }
.plan-card-price { display: flex; align-items: baseline; gap: 7px; }
.plan-card-price > span { font: 38px/1 Georgia, 'Times New Roman', serif; letter-spacing: -.02em; }
.plan-card-price small { font-size: 14px; color: var(--ink-faint); }
.plan-card-blurb { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.plan-card-features {
  display: flex; flex-direction: column; gap: 12px;
  margin: 0; padding: 18px 0 0; list-style: none;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
}
.plan-card-features li { display: flex; align-items: center; gap: 11px; }
.plan-card-features strong { font-weight: 600; }
.plan-tick {
  width: 26px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: #EAF1FE; color: var(--accent-dark);
  font-size: 13px; font-weight: 700;
}
.plan-card .spacer { min-height: 8px; }
.plan-card form { margin: 0; }
.plan-card-btn {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
}
.plan-card-btn:hover:not(:disabled) { border-color: #B9C4D2; }
.plan-card-btn.up { border-color: var(--accent); background: var(--accent); color: #fff; }
.plan-card-btn.up:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.plan-card-btn:disabled { border-color: var(--line-soft); background: #F6F8FB; color: var(--ink-faint); cursor: default; }

.plan-lower { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; align-items: start; }
.plan-panel {
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.plan-panel-title { font: 400 19px/1.2 Georgia, 'Times New Roman', serif; letter-spacing: -.01em; }
.plan-panel-text { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.plan-panel > .plan-panel-text { margin: 0; }
.plan-panel-text.faint { font-size: 12.5px; margin-top: -8px; }

.plan-storage { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }
.plan-stepper {
  display: flex; align-items: center; gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #FBFCFD;
}
.plan-step {
  width: 36px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #E3E8EF; border-radius: 9px;
  background: #fff; color: var(--ink);
  font: inherit; font-size: 17px;
  cursor: pointer; user-select: none;
}
.plan-step:hover { border-color: #B9C4D2; }
.plan-step-value { min-width: 86px; text-align: center; font-size: 15px; font-weight: 600; }
.plan-step-value input { width: 64px; padding: 6px; border: 0; background: transparent; font: inherit; text-align: center; }
/* Without plan.js the number input is the control; with it, the GB label is. */
.plan-step-label, .plan-storage .plan-step { display: none; }
.plan-storage.js .plan-step-label { display: inline; }
.plan-storage.js .plan-step { display: flex; }
.plan-storage.js .plan-step-value input { display: none; }
.plan-storage-note { font-size: 14px; color: var(--ink-soft); }
.plan-storage .btn { padding: 12px 20px; border-radius: var(--radius); font-size: 14px; }

.plan-panel-head { display: flex; align-items: baseline; gap: 10px; }
.plan-facts { display: flex; flex-direction: column; gap: 13px; margin: 0; font-size: 14.5px; }
.plan-facts > div { display: flex; gap: 14px; }
.plan-facts dt { width: 132px; flex: none; color: var(--ink-soft); }
.plan-facts dd { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; min-width: 0; overflow-wrap: anywhere; }
.plan-panel-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.plan-panel-actions form { margin: 0; }
.plan-panel-actions .btn { padding: 11px 16px; border-radius: var(--radius); font-size: 14px; }

@media (max-width: 480px) {
  .plan-facts > div { flex-direction: column; gap: 2px; }
  .plan-facts dt { width: auto; }
}

/* ── move document dialog (editor) ──────────────────────────────────────────
   A searchable folder tree rather than a <select>: the tree when the box is
   empty, a flat filtered list with the match marked and its parent path under
   it while typing. sign.js builds the rows. */
.modal-card.mv-card {
  width: min(480px, 100%);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(14, 35, 56, .7);
}
.mv-head { padding: 22px 24px 4px; display: flex; flex-direction: column; gap: 4px; }
.mv-head h2 { margin: 0; font: 400 21px/1.25 Georgia, serif; }
.mv-sub { font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.mv-sub strong { color: var(--ink); }
.mv-search-wrap { padding: 14px 24px 10px; }
.mv-search {
  display: flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 12px;
  border: 1.5px solid var(--line); border-radius: 9px;
  color: var(--ink-faint);
  cursor: text;
}
.mv-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 107, 230, .14); }
.mv-search svg { flex: none; }
/* Both states named: the global input[type=text](:focus) rules would otherwise
   give the bare input its own padding, border and focus outline — a second box
   drawn inside the wrapper's ring. */
.mv-search input, .mv-search input:focus {
  flex: 1; min-width: 0; width: auto; height: 100%;
  padding: 0; border: 0; border-radius: 0; outline: none; box-shadow: none;
  background: transparent;
  font: inherit; font-size: 13.5px; color: var(--ink);
}
.mv-clear {
  border: 0; background: none; font: inherit; font-size: 12px;
  color: var(--ink-faint); cursor: pointer; padding: 2px 6px; border-radius: 5px;
}
.mv-clear:hover { color: var(--ink); }
.mv-list {
  height: min(300px, calc(100vh - 260px));
  overflow-y: auto;
  padding: 0 12px 8px;
  display: flex; flex-direction: column; gap: 1px;
}
.mv-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; flex: none;
  padding: 4px 10px 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  outline: none;
}
.mv-row:hover, .mv-row:focus-visible { background: #F1F5FD; }
.mv-row.current { color: var(--ink-faint); cursor: default; }
.mv-row.current:hover { background: transparent; }
.mv-row.on { background: #E8EFFC; font-weight: 600; box-shadow: inset 0 0 0 1px #BCD0F5; }
.mv-chev {
  width: 20px; height: 20px; flex: none; margin-right: -4px;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; background: none; border-radius: 5px;
  color: var(--ink-soft); cursor: pointer;
}
.mv-chev:hover { background: #E3E9F2; }
.mv-chev.none { visibility: hidden; }
.mv-chev svg { transition: transform .15s ease; }
.mv-chev.open svg { transform: rotate(90deg); }
.mv-folder { flex: none; color: #5C7FB8; }
.mv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mv-name { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-name mark { background: #FCEFD4; color: inherit; border-radius: 3px; }
.mv-parent { font-size: 11.5px; color: var(--ink-faint); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-pill {
  flex: none; font-size: 11px; font-weight: 600; color: var(--ink-soft);
  background: #EEF1F5; padding: 2px 8px; border-radius: 999px;
}
.mv-tick {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mv-empty {
  padding: 28px 12px; text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere;
}
.mv-link {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--accent); cursor: pointer; white-space: nowrap; text-align: left;
}
.mv-link:hover { color: var(--accent-dark); }
.mv-empty .mv-link { font-size: 13px; font-weight: 600; }
.mv-new {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 24px; border-top: 1px solid #E7ECF2;
}
.mv-new .text-input { flex: 1 1 180px; min-width: 0; height: 36px; padding: 0 10px; }
.mv-new-where { flex-basis: 100%; font-size: 11.5px; color: var(--ink-faint); overflow-wrap: anywhere; }
.mv-error { margin: 0; padding: 0 24px 10px; }
.modal-card footer.mv-foot {
  margin: 0; padding: 14px 24px;
  border-top: 1px solid #E7ECF2;
  justify-content: flex-start;
}
.mv-foot .mv-link { flex: 1; }
.mv-foot .btn { flex: none; white-space: nowrap; height: 38px; padding: 0 16px; }
.btn.mv-go { background: var(--ink); border-color: var(--ink); color: #fff; padding: 0 18px; max-width: 220px; }
.mv-go-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.mv-go:hover:not(:disabled) { background: #1B3553; }
.btn.mv-go:disabled { opacity: 1; background: #E7ECF2; border-color: #E7ECF2; color: var(--ink-faint); }
@media (max-width: 420px) {
  .mv-head, .mv-search-wrap { padding-left: 16px; padding-right: 16px; }
  .mv-list { padding: 0 6px 8px; }
  .modal-card footer.mv-foot { padding: 12px 16px; flex-wrap: wrap; }
  .mv-foot .mv-link { flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SIGNING PAGE ON A PHONE — appended block, own section, do not interleave.
   A navy header with a progress line, the document edge to edge, and a bar at the
   foot that walks the recipient's fields one at a time (fragments/editor.html
   #m-bar, driven by sign.js "the phone field bar"). Every rule is scoped to
   .signing-body: the editor fragment is also the owner's editor, and nothing here
   may reach it. The breakpoint is sign.js's PHONE query — change both together.
   ═══════════════════════════════════════════════════════════════════════════ */

.m-from, .m-count, .m-progress, .m-bar, .m-done, .consent-review { display: none; }

@media (max-width: 640px) {
  body.signing-body { overflow: hidden; background: var(--bg); }
  .signing-body > .topbar { display: none; }
  .signing-body .editor { height: 100vh; height: 100dvh; }
  .signing-body .layout { flex: 1; min-height: 0; flex-direction: column; }
  .signing-body .page-rail,
  .signing-body .tools,
  .signing-body .zoombar { display: none; }
  .signing-body .page-scroll {
    overflow: auto;
    padding: 14px 12px 24px;
    gap: 26px;
    -webkit-overflow-scrolling: touch;
  }

  /* ── header ── */
  .signing-body .docbar {
    height: auto; flex-wrap: nowrap; gap: 12px;
    padding: 12px 14px 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
    background: var(--ink); color: #fff; border: 0;
  }
  .signing-body .docbar .brand-tile {
    width: 32px; height: 32px; border: 0; border-radius: 9px;
    background: var(--accent); color: #fff;
    font: 700 17px/1 Georgia, serif;
  }
  .signing-body .doc-id { flex: 1; }
  .signing-body .doc-name { color: #fff; }
  .signing-body .doc-meta {
    margin-top: 1px; color: rgba(255, 255, 255, .62);
    overflow: hidden; text-overflow: ellipsis;
  }
  .signing-body .doc-meta > span { display: none; }
  .signing-body .doc-meta > .m-from { display: inline; }
  .signing-body .docbar .spacer,
  .signing-body .docbar .pill.status,
  .signing-body .docbar .placed-count,
  .signing-body .docbar #btn-finish { display: none; }
  .signing-body .m-count {
    display: inline-block; flex: none;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    padding: 6px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .12);
  }
  .signing-body .m-count:empty { display: none; }
  .signing-body .docbar #btn-signer-download {
    flex: none; height: 32px; padding: 0 12px; font-size: 13px; border-radius: 9px;
  }
  .signing-body .m-progress { display: block; flex: none; height: 3px; background: #1D3A56; }
  .signing-body .m-progress span {
    display: block; height: 100%; width: 0;
    background: #7FA8F0; transition: width .3s;
  }
  .signing-body .m-progress span.ready { background: #34C07F; }

  /* ── the document ── */
  .signing-body .page-wrap { border-radius: 4px; box-shadow: 0 8px 24px -14px rgba(14, 35, 56, .4), 0 0 0 1px #DCE2EA; }
  .signing-body .page-wrap img { border-radius: 4px; }
  .signing-body .stamp.m-active {
    outline: 2px solid var(--accent); outline-offset: 1px;
    box-shadow: 0 0 0 5px rgba(46, 107, 230, .2);
    z-index: 4;
    transition: box-shadow .2s;
  }
  /* The owner-editor caption ("NAME · TYPE · EXTERNAL PARTY · REQUIRED") that
     .selected/:hover shows on a stamp desktop-side: the field bar's blue ring is
     this page's only "which field" cue, and the caption only has room to sit on
     top of the document — and, once a field's sheet is up, on top of the sheet
     itself. select() is still called on tap (it drives the field panel on desktop),
     so every fill on this page leaves some stamp .selected; the caption must stay
     off whichever one that is. */
  .signing-body .stamp-tag { display: none; }

  /* ── the bar at the foot ── */
  .signing-body .m-bar {
    display: flex; flex: none; flex-direction: column; gap: 12px;
    padding: 12px 14px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #E1E6ED;
    box-shadow: 0 -10px 24px -18px rgba(14, 35, 56, .35);
    position: relative; z-index: 5;
  }
  .signing-body .m-bar-nav { display: flex; align-items: center; gap: 10px; }
  .signing-body .m-step {
    width: 44px; height: 44px; flex: none; border-radius: 12px;
    border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
    display: grid; place-items: center; cursor: pointer; padding: 0;
  }
  .signing-body .m-step:disabled { opacity: .4; cursor: default; }
  .signing-body .m-bar-what { flex: 1; min-width: 0; text-align: center; }
  .signing-body .m-kicker { font-size: 12px; color: var(--ink-faint); }
  .signing-body .m-title {
    font-size: 15px; font-weight: 600; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .signing-body .m-primary, .signing-body .m-secondary {
    height: 52px; flex: none; width: 100%; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    padding: 0 16px; border: 0; border-radius: 14px;
    background: var(--accent); color: #fff;
    font: inherit; font-size: 16px; font-weight: 600; white-space: nowrap;
    text-decoration: none; cursor: pointer;
  }
  .signing-body .m-primary.go { background: #1F7A52; }
  .signing-body .m-primary.dark { background: var(--ink); }
  .signing-body .m-primary:disabled { background: #C9D2DD; cursor: default; }
  .signing-body .m-secondary {
    height: 50px; background: #fff; color: var(--ink);
    border: 1px solid var(--line); font-size: 15px; font-weight: 400;
  }

  .signing-body .toast {
    left: 12px; right: 12px; max-width: none;
    bottom: calc(150px + env(safe-area-inset-bottom));
  }
  .signing-body .editor.finished .toast { bottom: 20px; }

  /* ── sheets: every dialog on this page rises from the foot ── */
  .signing-body .modal { place-items: end stretch; padding: 0; }
  .signing-body .modal .modal-card,
  .signing-body .modal .modal-card.narrow {
    width: 100%; max-width: none; box-sizing: border-box;
    max-height: 88vh; max-height: 88dvh; overflow-y: auto;
    border-radius: 22px 22px 0 0;
    padding: 8px 18px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    box-shadow: 0 -20px 50px -20px rgba(14, 35, 56, .5);
    animation: m-sheet-up .22s ease-out;
  }
  .signing-body .modal .modal-card::before {
    content: ""; display: block; width: 36px; height: 4px;
    margin: 0 auto 10px; border-radius: 2px; background: #D5DCE5;
  }
  .signing-body .modal-card header { align-items: center; }
  .signing-body .modal-card header h2 { font: 400 21px/1.25 Georgia, serif; }
  .signing-body .modal-card footer .btn { flex: 1; height: 52px; border-radius: 14px; font-size: 16px; }

  /* the text sheet */
  .signing-body .sheet-head { display: flex; gap: 12px; padding: 2px 0 4px; }
  .signing-body .sheet-head > div { flex: 1; min-width: 0; }
  .signing-body .sheet-kicker { font-size: 12px; color: var(--ink-faint); }
  .signing-body .sheet-kicker:empty { display: none; }
  .signing-body .sheet-close,
  .signing-body #btn-capture-cancel {
    width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%;
    background: #F1F4F8; color: var(--ink-soft);
    display: grid; place-items: center; cursor: pointer; padding: 0;
  }
  .signing-body #btn-capture-cancel { width: auto; padding: 0 14px; border-radius: 999px; font-size: 13px; }
  .signing-body .sheet-body { display: flex; flex-direction: column; gap: 14px; padding: 14px 0 0; }
  .signing-body #text-sheet-input {
    height: 52px; box-sizing: border-box;
    border: 1.5px solid var(--accent); border-radius: 12px;
    padding: 0 16px; font: inherit; font-size: 17px; color: var(--ink); outline: none;
    box-shadow: 0 0 0 4px rgba(46, 107, 230, .12);
  }
  .signing-body .sheet-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }

  /* the signature sheet */
  .signing-body #capture-modal .tabs {
    display: flex; gap: 2px; height: 40px; margin: 12px 0 14px; padding: 3px;
    box-sizing: border-box; border-radius: 11px; background: #EEF1F5;
  }
  .signing-body #capture-modal .tab {
    flex: 1; border: 0; border-radius: 8px; padding: 0;
    background: transparent; color: var(--ink-soft); font-size: 14px;
  }
  .signing-body #capture-modal .tab.active {
    background: #fff; color: var(--ink); font-weight: 600;
    box-shadow: 0 1px 3px rgba(14, 35, 56, .15);
  }
  .signing-body #draw-canvas {
    height: 180px; border: 1px solid #E1E6ED; border-radius: 14px; background: #F7F9FB;
  }
  .signing-body #capture-modal [data-pane="draw"] .row { justify-content: space-between; align-items: center; }
  .signing-body #capture-modal [data-pane="draw"] .row label,
  .signing-body #capture-modal [data-pane="type"] label.colour { display: none; }
  .signing-body #capture-modal [data-pane="draw"] .row::before {
    content: "Turn your phone sideways for more room."; font-size: 12.5px; color: var(--ink-faint);
  }
  .signing-body #btn-draw-clear { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 14px; }
  .signing-body #capture-modal .typed-preview { height: 120px; border: 1px solid #E1E6ED; border-radius: 14px; background: #F7F9FB; }
  .signing-body #capture-modal .hint { font-size: 12.5px; color: var(--ink-faint); }
  .signing-body #capture-modal footer::before {
    content: "By tapping Adopt, you agree this mark is your legal signature on this document.";
    display: block; font-size: 12px; line-height: 1.45; color: var(--ink-faint); margin-bottom: 12px;
  }
  .signing-body #capture-modal footer { flex-direction: column; align-items: stretch; }
  .signing-body #capture-modal footer .btn { width: 100%; }

  /* the finish sheet: what is about to be signed, then the agreement */
  .signing-body #consent-modal .confirm-glyph { display: none; }
  .signing-body #consent-modal .confirm-head h2 { font: 400 21px/1.25 Georgia, serif; margin: 0; }
  .signing-body #consent-modal .confirm-head p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
  .signing-body .consent-review {
    display: block; margin: 14px 0; overflow: hidden;
    border: 1px solid #E1E6ED; border-radius: 14px;
  }
  .signing-body .consent-review:empty { display: none; }
  .signing-body .review-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
    box-sizing: border-box; padding: 12px 14px; text-align: left;
    border: 0; border-top: 1px solid #EEF1F5; background: #fff; font: inherit; cursor: pointer;
  }
  .signing-body .review-row:first-child { border-top: 0; }
  .signing-body .review-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .signing-body .review-label { font-size: 12px; color: var(--ink-faint); }
  .signing-body .review-value {
    font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .signing-body .review-value.blank { font-weight: 400; font-style: italic; color: var(--ink-faint); }
  .signing-body .review-edit { font-size: 13.5px; font-weight: 600; color: var(--accent); }
  .signing-body #consent-go { background: #1F7A52; border-color: #1F7A52; }

  /* ── signed ── */
  .signing-body .m-done {
    display: flex; position: fixed; inset: 0; z-index: 40;
    flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 32px 28px; background: #fff; text-align: center;
  }
  .signing-body .m-done[hidden] { display: none; }
  .signing-body .m-done-mark {
    width: 72px; height: 72px; border-radius: 50%;
    background: #E3F4EC; color: #1F7A52; display: grid; place-items: center;
  }
  .signing-body .m-done h1 { margin: 6px 0 0; font: 400 26px/1.2 Georgia, serif; color: var(--ink); }
  .signing-body .m-done p { margin: 0; max-width: 290px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
  .signing-body .m-done p b { color: var(--ink); overflow-wrap: anywhere; }
  .signing-body .m-done-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 14px; }
}

@keyframes m-sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .signing-body .modal .modal-card { animation: none; } }