/*
 * One palette, used everywhere. The signer page and the console share it
 * deliberately: a recipient who follows a link from an invitation should land
 * somewhere that looks like the same product, because "does this look like the
 * thing that emailed me" is the only phishing check most people run.
 *
 * Tints are named rather than written as literal rgba() at each use, so the
 * accent can change in one place without hunting for hard-coded channels.
 */
:root {
  --bg: #f7f5fc;
  --surface: #ffffff;
  --surface-2: #f3f0fa;
  --border: #e5e0f0;
  --text: #1a1230;
  --muted: #6b6480;

  --accent: #5b2166;
  --accent-strong: #3f0f47;
  --accent-ink: #ffffff;
  --accent-soft: #f1e8f6;
  --accent-line: #d9c6e2;

  /* The navigation rail. Dark by design: it is chrome, not content, and the
     contrast is what keeps the eye in the working area to its right. */
  --nav: #141a2e;
  --nav-2: #1f2740;
  --nav-active: #2a3252;
  --nav-text: #eceef5;
  --nav-muted: #8990a8;

  --ok: #17794c;
  --ok-soft: #e2f4ea;
  --warn: #8a5a00;
  --warn-soft: #fdf0d9;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;

  --shadow-sm: 0 1px 2px rgba(26, 18, 48, .06);
  --shadow-md: 0 4px 16px rgba(26, 18, 48, .08);
  --shadow-lg: 0 10px 34px rgba(26, 18, 48, .14);
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 700; letter-spacing: .2px; }
.brand::before {
  content: "BS"; display: inline-grid; place-items: center; width: 26px; height: 26px;
  margin-right: 9px; border-radius: 7px; background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .3px; vertical-align: -7px;
}
.tag { color: var(--muted); font-size: 13px; }

/* Terminal-state pages */
.state-card {
  max-width: 460px; margin: 12vh auto; padding: 32px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.state-icon { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 18px; }
.state-icon.ok { background: var(--ok-soft); border: 2px solid var(--ok); }
.state-icon.warn { background: var(--warn-soft); border: 2px solid var(--warn); }
.state-card h1 { font-size: 20px; margin: 0 0 10px; }
.state-card p { color: var(--muted); margin: 0; }

/* Signer app layout */
.signer-app { display: grid; grid-template-columns: 1fr 320px; gap: 0; min-height: calc(100vh - 53px); }
.loading { padding: 40px; color: var(--muted); }
.doc-pane { padding: 24px; overflow: auto; background: var(--surface-2); }
.doc-pane canvas { display: block; margin: 0 auto 16px; box-shadow: var(--shadow-md); border-radius: 4px; }
.page-wrap { position: relative; margin: 0 auto 16px; width: max-content; }
.page-wrap canvas { margin: 0; }

/* Field overlays on the PDF */
.field {
  position: absolute; border: 2px dashed var(--accent); border-radius: 4px;
  background: var(--accent-soft); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--accent); text-align: center; overflow: hidden;
}
.field.filled { border-style: solid; background: var(--ok-soft); border-color: var(--ok); color: var(--text); }
.field.required::after { content: "*"; color: var(--danger); position: absolute; top: 1px; right: 4px; font-weight: 700; }
.field .val { padding: 2px 4px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.field .val img { max-width: 100%; max-height: 100%; }

/* Sidebar */
.side { border-left: 1px solid var(--border); background: var(--surface); padding: 20px; position: sticky; top: 53px; align-self: start; height: calc(100vh - 53px); overflow: auto; }
.side h2 { font-size: 16px; margin: 0 0 4px; }
.side .subject { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.side .msg { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.field-list { list-style: none; margin: 0 0 16px; padding: 0; }
.field-list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.field-list li .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.field-list li.done .dot { background: var(--ok); }
.consent { font-size: 13px; color: var(--muted); margin: 14px 0; display: flex; gap: 8px; align-items: flex-start; }
.consent input { margin-top: 3px; }
.btn { display: block; width: 100%; padding: 12px; border: 0; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { background: var(--accent-strong); }
.btn:focus-visible, .btn-link:focus-visible, .tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.field-input { width: 100%; margin-top: 8px; padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }

/* Signature modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(26,18,48,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; width: min(520px, 92vw); }
.modal h3 { margin: 0 0 12px; }
.sig-pad { width: 100%; height: 180px; background: #fff; border-radius: 8px; touch-action: none; cursor: crosshair; }
.modal-actions { display: flex; gap: 10px; margin-top: 14px; }
.modal-actions .btn { flex: 1; }
.btn-ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.err { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 18px; }

@media (max-width: 820px) {
  .signer-app { grid-template-columns: 1fr; }
  .side { border-left: 0; border-top: 1px solid var(--border); position: static; height: auto; }
}

/* Auth pages */
.auth-card {
  max-width: 400px; margin: 12vh auto; padding: 36px 34px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-md);
}
.auth-brand { margin-bottom: 24px; }
.auth-card h1 { letter-spacing: -.2px; }
.auth-card h1 { font-size: 20px; margin: 0 0 6px; }
.auth-note { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.auth-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.auth-card input { padding: 11px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 15px; }
.auth-card input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* Admin dashboard */
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--muted); font-size: 13px; }
.logout-form { margin: 0; }
.btn-link { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 13px; padding: 0; text-decoration: none; }
.admin-app { max-width: 1000px; margin: 0 auto; padding: 28px 20px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.admin-head h1 { font-size: 22px; margin: 0; }
.admin-head .btn { width: auto; padding: 10px 16px; }
.empty { color: var(--muted); padding: 40px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; }
.env-table { width: 100%; border-collapse: collapse; }
.env-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.env-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.badge { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.draft { background: var(--surface-2); color: var(--muted); }
.badge.sent { background: var(--accent-soft); color: var(--accent); }
.badge.completed { background: var(--ok-soft); color: var(--ok); }
.badge.declined, .badge.voided { background: var(--danger-soft); color: var(--danger); }
/* Several actions can share a row (certificate + one link per signed document). */
.row-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Declining is destructive for the whole envelope: available, never prominent. */
.btn-decline { margin-top: 10px; width: 100%; color: var(--muted); }
.btn-decline:hover { color: var(--danger); border-color: var(--danger); }

/* ---------------------------------------------------------------- forms */
.form-card { max-width: 720px; margin: 24px auto; padding: 24px; }
.form-card h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 24px 0 8px; }
.form-card label { display: block; margin: 12px 0; font-size: 13px; color: var(--muted); }
.form-card input, .form-card textarea, .form-card select {
  display: block; width: 100%; margin-top: 6px; padding: 9px 11px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
}
.form-card input:focus-visible, .form-card textarea:focus-visible, .form-card select:focus-visible,
.inline-form input:focus-visible, .inline-form select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.form-card textarea { resize: vertical; }
.hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
/* The "who signs this?" choice. Two cards rather than a select: it is the one
   decision on this form that changes what the rest of the form asks for, and a
   collapsed control makes that look like a detail. */
.mode-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 4px; }
.form-card .mode-option {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 13px 14px;
  border: 1px solid var(--border); border-radius: 11px; cursor: pointer; background: var(--surface);
}
.form-card .mode-option:hover { border-color: var(--accent); }
.form-card .mode-option input { width: auto; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.mode-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.mode-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-body { display: block; }
.mode-title { display: block; font-weight: 600; font-size: 14px; color: var(--text); }
.mode-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 620px) { .mode-choice { grid-template-columns: 1fr; } }

/* `[hidden]` is a UA rule at the lowest possible specificity, so `.form-card
   label` (0,1,1) beats it and a hidden label stays on screen. Restated here at
   a weight that wins — the same collision as the `.check` note below. */
.form-card [hidden], .form-card label[hidden] { display: none; }

/* `.form-card label` (0,1,1) out-specifies a bare `.check` (0,1,0), so the
   checkbox row needs the same weight or it falls back to display:block and the
   box stacks above its own label. */
.check, .form-card .check { display: flex; align-items: flex-start; gap: 8px; }
.check input, .form-card .check input { display: inline-block; width: auto; margin-top: 2px; flex: none; }
.check span { font-size: 13px; }
/* Secondary actions inside a form are inline-sized; only the submit is a block. */
.form-card .btn-ghost { width: auto; padding: 8px 14px; font-size: 13px; }
.recipient-row { display: grid; grid-template-columns: 1.4fr 1.6fr 80px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.recipient-row input { margin-top: 0; }
.file-label input { padding: 8px 0; border: 0; background: none; }

/* ---------------------------------------------------------------- editor */
/* `.btn` is a full-width block by default (it lives in cards and side panels).
   In the topbar's flex row that stretches each button across the header and
   squeezes the labels into vertical slivers, so size them for a toolbar here. */
.topbar .btn { width: auto; flex: none; padding: 8px 14px; font-size: 13px; border-radius: 8px; }
.topbar > span, .topbar .who, .topbar .tag, .topbar .doc-title, .topbar .save-state { flex: none; white-space: nowrap; }
.topbar .spacer { flex: 1 1 auto; }
.topbar .doc-title { overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }

.editor-body .topbar { position: sticky; top: 0; z-index: 20; }
.doc-title { font-size: 13px; color: var(--muted); margin-left: 12px; }
.save-state { font-size: 12px; color: var(--muted); margin-right: 8px; }
.save-state.dirty { color: var(--warn); }
.save-state.ok { color: var(--ok); }
.save-state.error { color: var(--danger); }

.editor { display: grid; grid-template-columns: 280px 1fr; height: calc(100vh - 56px); overflow: hidden; }
.editor-side { border-right: 1px solid var(--border); padding: 16px; overflow-y: auto; background: var(--surface); }
.editor-side section { margin-bottom: 22px; }
.editor-side h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 6px; }
.notice { padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 13px; margin-bottom: 18px; }

.recipient-list, .placed-list { list-style: none; margin: 8px 0 0; padding: 0; }
.recipient-list li, .placed-list li { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.recipient-list li:hover, .placed-list li:hover { background: var(--surface-2); }
.recipient-list li.active, .placed-list li.active { background: var(--surface-2); outline: 1px solid var(--accent); }
.recipient-list .r-info { display: flex; flex-direction: column; min-width: 0; }
.recipient-list small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipient-list .count { margin-left: auto; font-size: 11px; color: var(--muted); }
.placed-list small { color: var(--muted); margin-left: auto; }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tool { padding: 8px; font: inherit; font-size: 12px; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.tool:hover:not(:disabled) { border-color: var(--accent); }
.tool.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tool:disabled { opacity: .5; cursor: not-allowed; }

.prop-row { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; color: var(--muted); }
.prop-row strong { color: var(--text); font-weight: 600; }
.prop-select { display: block; font-size: 12px; color: var(--muted); margin: 10px 0; }
.prop-select select { display: block; width: 100%; margin-top: 4px; padding: 7px 9px; font: inherit; font-size: 13px;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.btn-danger { margin-top: 12px; width: 100%; color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); }

.editor-pane { display: flex; flex-direction: column; overflow: hidden; background: var(--surface-2); }
.pane-toolbar { display: flex; align-items: center; gap: 16px; padding: 8px 16px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.pane-toolbar select { padding: 4px 6px; font: inherit; font-size: 12px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.pages { flex: 1; overflow: auto; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.pages.placing .page-wrap { cursor: crosshair; }
.pages .page-wrap { position: relative; background: #fff; box-shadow: var(--shadow-md); flex: none; }
.page-number { position: absolute; top: -18px; left: 0; font-size: 11px; color: var(--muted); }

.efield { position: absolute; border: 1.5px dashed; border-radius: 4px; cursor: move;
  display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.efield-label { font-size: 10px; font-weight: 600; color: #1b2030; pointer-events: none;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 0 3px; }
.efield.selected { border-style: solid; box-shadow: 0 0 0 2px var(--accent-line); }
.efield-handle { position: absolute; right: -5px; bottom: -5px; width: 11px; height: 11px;
  background: var(--accent); border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; }
.upload-drop { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; }
.file-btn { cursor: pointer; }

/* Access-code unlock, shown before any document content is fetched. */
.unlock {
  max-width: 26rem;
  margin: 4rem auto;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.unlock h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.unlock-help { margin: 0 0 1.25rem; color: var(--muted); line-height: 1.55; }
.unlock-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem;
}
.unlock input {
  width: 100%;
  padding: .7rem .8rem;
  font-size: 1.1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: inherit;
}
.unlock input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.unlock-error { margin: .7rem 0 0; color: var(--danger); font-size: .9rem; }
.unlock button { margin-top: 1.1rem; width: 100%; }

/* Shown when served document bytes do not match the recorded hash. */
.doc-error {
  margin: 3rem auto;
  max-width: 30rem;
  padding: 1.5rem;
  border: 1px solid var(--accent-line);
  border-left: 4px solid var(--danger);
  border-radius: 6px;
  background: var(--danger-soft);
  color: var(--danger);
}
.doc-error strong { display: block; margin-bottom: .5rem; font-size: 1.05rem; }
.doc-error p { margin: 0; line-height: 1.55; }

/* ---- API reference (/docs) ---------------------------------------------- */
body.docs {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
  line-height: 1.6;
}
.doc-head { border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.doc-head h1 { margin: 0 0 .4rem; font-size: 1.9rem; }
.doc-lede { margin: 0 0 .6rem; color: var(--muted); }
.doc-base { margin: 0; font-size: .9rem; color: var(--muted); }
.doc-base code { background: var(--surface-2); padding: .12em .4em; border-radius: 4px; }

.doc-start { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.doc-start h2 { margin: 0 0 .6rem; font-size: 1.1rem; }
.doc-start pre { background: var(--surface-2); padding: .9rem 1rem; border-radius: 8px; overflow-x: auto; font-size: .84rem; }
.doc-note { font-size: .9rem; color: var(--muted); margin: .6rem 0 0; }

.doc-toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.doc-toc a {
  font-size: .82rem; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--border); text-decoration: none; color: inherit;
}
.doc-toc a:hover { background: var(--surface-2); }

.doc-group { margin-bottom: 2.5rem; }
.doc-group h2 { font-size: 1.15rem; border-bottom: 1px solid var(--border); padding-bottom: .4rem; }
.doc-op { border: 1px solid var(--border); border-radius: 8px; padding: .9rem 1.1rem; margin-bottom: .75rem; background: var(--surface); }
.doc-op header { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.doc-method { font: 600 .74rem/1 ui-monospace, monospace; letter-spacing: .06em; padding: .3rem .5rem; border-radius: 4px; color: #fff; }
.doc-get { background: #2f6fd0; } .doc-post { background: #1d7a4f; }
.doc-patch { background: #8a6a1f; } .doc-put { background: #8a6a1f; } .doc-delete { background: #b3261e; }
.doc-path { font-family: ui-monospace, monospace; font-size: .9rem; overflow-wrap: anywhere; }
.doc-tag { font-size: .72rem; padding: .18rem .45rem; border-radius: 4px; background: var(--surface-2); color: var(--muted); }
.doc-tag.doc-open { background: #fdf3e7; color: #8a6a1f; }
.doc-summary { margin: .55rem 0 0; font-weight: 600; font-size: .95rem; }
.doc-desc { margin: .35rem 0 0; font-size: .9rem; color: var(--muted); }
.doc-responses { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.doc-responses li { font-size: .84rem; color: var(--muted); display: flex; gap: .5rem; }
.doc-status { font-family: ui-monospace, monospace; font-weight: 600; min-width: 2.4rem; }
.doc-ok { color: #1d7a4f; } .doc-fail { color: #b3261e; }

/* ------------------------------------------------- console shell (sidebar) */
/*
 * The signed-in surface: a fixed navigation rail on the left, one scrolling
 * work area on the right. The rail is the only place navigation lives, so a
 * page never has to spend its header explaining where you are.
 */
.console { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.console-nav {
  background: var(--nav); color: var(--nav-text); padding: 20px 14px;
  display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.console-brand { display: flex; align-items: center; gap: 11px; padding: 4px 10px 22px; }
.console-brand .mark {
  width: 38px; height: 38px; border-radius: 10px; background: var(--accent);
  display: grid; place-items: center; color: var(--accent-ink); font-weight: 700; font-size: 13px; flex: none;
}
.console-brand .name { font-weight: 700; font-size: 15px; line-height: 1.2; }
.console-brand .sub { color: var(--nav-muted); font-size: 12px; }
.nav-label {
  color: var(--nav-muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; padding: 16px 12px 6px;
}
.console-nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px;
  color: var(--nav-text); text-decoration: none; font-size: 14px;
}
.console-nav a:hover { background: var(--nav-2); }
.console-nav a[aria-current="page"] { background: var(--nav-active); font-weight: 600; }
/* A nested item. The rail is what says "under", so the indent alone never has
   to carry it — at the mobile breakpoint below, where the rail cannot survive a
   horizontal rail, the nesting is dropped rather than half-shown. */
.console-nav a.nav-sub {
  margin-left: 15px; padding-left: 13px; border-left: 1px solid var(--nav-2);
  border-radius: 0 9px 9px 0; font-size: 13.5px;
}
.console-nav .ico { width: 17px; text-align: center; opacity: .85; flex: none; }
.nav-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--nav-2); }
.nav-foot .who { display: block; padding: 0 12px 4px; font-size: 13px; }
.nav-foot .who small { display: block; color: var(--nav-muted); font-size: 11px; }
.nav-foot form { margin: 6px 0 0; }
.nav-foot button {
  width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px; border: 0;
  background: none; color: var(--nav-muted); font: inherit; font-size: 13px; cursor: pointer;
}
.nav-foot button:hover { background: var(--nav-2); color: var(--nav-text); }

.console-main { min-width: 0; display: flex; flex-direction: column; }
.console-head {
  display: flex; align-items: center; gap: 14px; padding: 16px 32px;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.console-head h1 { font-size: 17px; margin: 0; font-weight: 600; }
.console-head .spacer { flex: 1; }
.console-head .btn { width: auto; padding: 9px 15px; font-size: 14px; }
.console-body { padding: 28px 32px 60px; max-width: 1080px; }
.page-lede { color: var(--muted); margin: -6px 0 22px; max-width: 62ch; }

@media (max-width: 860px) {
  .console { grid-template-columns: 1fr; }
  .console-nav { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .console-brand { padding: 0 10px 0 0; }
  .nav-label, .nav-foot .who { display: none; }
  .console-nav a.nav-sub { margin-left: 0; padding-left: 12px; border-left: 0; border-radius: 9px; font-size: 14px; }
  .nav-foot { margin: 0 0 0 auto; padding: 0; border: 0; }
  .console-head, .console-body { padding-left: 18px; padding-right: 18px; }
}

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.panel { padding: 22px 24px; margin-bottom: 20px; }
.panel > h2 { font-size: 15px; margin: 0 0 4px; font-weight: 600; }
.panel > .hint { margin: 0 0 16px; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); font-weight: 600; padding: 0 16px 10px;
}
.data-table td { padding: 13px 16px; border-top: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.data-table tr.revoked td { color: var(--muted); }
.data-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.data-table td:last-child { text-align: right; }

/* ---------------------------------------------------------------- api keys */
/*
 * A key is shown exactly once. The reveal panel is deliberately the loudest
 * thing on the page while it is open, because "I'll copy it later" is the one
 * mistake that cannot be undone — only a new key fixes it.
 */
.reveal {
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 22px;
}
.reveal h2 { margin: 0 0 6px; font-size: 15px; color: var(--accent-strong); }
.reveal p { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.reveal-key { display: flex; gap: 10px; align-items: stretch; }
.reveal-key code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 11px 13px;
  background: var(--surface); border: 1px solid var(--accent-line); border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
}
.reveal-key .btn { width: auto; flex: none; padding: 0 18px; font-size: 14px; }

.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inline-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.inline-form input, .inline-form select, .inline-form textarea {
  padding: 9px 11px; font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px; min-width: 190px;
}
.inline-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A list of origins is a column of URLs, so it wants the width the row has
   spare and a monospace face — a typo in a hostname should be visible. */
.inline-form textarea {
  resize: vertical; min-width: 320px; line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
}
.inline-form label:has(textarea) { flex: 1 1 320px; }
.inline-form .btn { width: auto; padding: 10px 16px; font-size: 14px; }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--muted);
}
.pill.owner, .pill.admin { background: var(--accent-soft); color: var(--accent); }
.pill.member { background: var(--ok-soft); color: var(--ok); }
.btn-quiet {
  background: none; border: 1px solid var(--border); color: var(--muted);
  width: auto; padding: 7px 13px; font-size: 13px; border-radius: 9px;
}
.btn-quiet:hover { border-color: var(--accent); color: var(--accent); }
/* The destructive variant keeps the warning colour; a neutral action must not
   borrow it, or every menu looks like it is about to delete something. */
.btn-quiet.destructive:hover { border-color: var(--danger); color: var(--danger); }

/* Inside the console the shell already provides the page gutter, so the form
   aligns with everything else instead of re-centring itself in the work area. */
.console-body .form-card { margin: 0; }

/* A stamped field is already correct and needs no attention — show it as a
   fact on the page rather than as one more thing waiting to be clicked. */
.field.auto { border-style: solid; border-color: var(--border); background: var(--surface-2); cursor: default; }
.field.auto .val { color: var(--text); }

/* Envelope detail */
.env-head { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.env-head h2 { font-size: 20px; margin: 0; font-weight: 600; }
.ok { color: var(--ok); font-size: 13px; margin-top: 10px; }
.panel .err:empty, .panel .ok:empty { display: none; }
.data-table .row-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.pill.sent { background: var(--accent-soft); color: var(--accent); }
.pill.completed { background: var(--ok-soft); color: var(--ok); }
.pill.declined { background: var(--danger-soft); color: var(--danger); }

/* Row action menu */
.menu { position: relative; display: flex; justify-content: flex-end; }
.menu-items {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column;
}
.menu-items[hidden] { display: none; }
.menu-items a {
  text-align: left;
  padding: 8px 11px; border-radius: 7px; color: var(--text); text-decoration: none; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-items a:hover { background: var(--surface-2); }
.row-title { color: var(--text); text-decoration: none; font-weight: 500; }
.row-title:hover { color: var(--accent); text-decoration: underline; }
.env-table td:last-child { text-align: right; }

/* Drop target for the source document */
.dropzone {
  position: relative; border: 2px dashed var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 28px 20px; text-align: center; transition: border-color .12s, background .12s;
}
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
/* The input covers the zone so a click anywhere opens the picker, and so the
   browser's own "required" validation message points at something visible. */
.dropzone input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; padding: 0; border: 0; background: none;
}
.drop-headline { margin: 0 0 4px; font-weight: 600; font-size: 15px; }
.drop-sub { margin: 0; font-size: 13px; color: var(--muted); }
.dropzone .btn-link { position: relative; z-index: 1; font-size: 13px; }
.drop-file {
  margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--accent);
  position: relative; z-index: 1;
}
.drop-file[hidden] { display: none; }

/* ---------------------------------------------- API docs: guide + reference */
body.docs { max-width: 1180px; margin: 0 auto; padding: 2.5rem 1.5rem 6rem; }
.doc-layout { display: grid; grid-template-columns: 220px 1fr; gap: 3rem; align-items: start; }
.doc-nav {
  position: sticky; top: 2rem; display: flex; flex-direction: column; gap: 1px;
  max-height: calc(100vh - 4rem); overflow-y: auto;
}
.doc-nav-group {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted);
  font-weight: 600; padding: 14px 10px 6px;
}
.doc-nav-group:first-child { padding-top: 0; }
.doc-nav a {
  padding: 6px 10px; border-radius: 7px; color: var(--muted);
  text-decoration: none; font-size: 13.5px;
}
.doc-nav a:hover { background: var(--surface-2); color: var(--text); }
.doc-main { min-width: 0; }

.doc-guide { margin: 0 0 3rem; scroll-margin-top: 1.5rem; }
.doc-guide h2 { font-size: 1.45rem; margin: 0 0 .8rem; letter-spacing: -.2px; }
.doc-guide h3 {
  font-size: 1rem; margin: 2rem 0 .6rem; padding-top: 1.2rem;
  border-top: 1px solid var(--border); font-weight: 600;
}
.doc-guide p { margin: 0 0 .9rem; max-width: 68ch; }
.doc-guide pre {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem 1.1rem; overflow-x: auto; font-size: .84rem; line-height: 1.6; margin: 0 0 1rem;
}
.doc-guide code { font-size: .88em; }
.doc-guide p code, .doc-guide li code, .doc-table code {
  background: var(--surface-2); padding: .12em .4em; border-radius: 4px;
}
.doc-guide pre code { background: none; padding: 0; }
.doc-list { margin: 0 0 1rem; padding-left: 1.2rem; max-width: 68ch; }
.doc-list li { margin-bottom: .35rem; }
.doc-table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; max-width: 68ch; }
.doc-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); padding: 0 12px 8px; font-weight: 600;
}
.doc-table td { padding: 9px 12px; border-top: 1px solid var(--border); font-size: 14px; }
.doc-reference-head {
  font-size: 1.45rem; margin: 4rem 0 .4rem; padding-top: 2rem; border-top: 2px solid var(--border);
}
.doc-reference-lede { color: var(--muted); margin: 0 0 2rem; max-width: 68ch; }

@media (max-width: 880px) {
  .doc-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .doc-nav { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
  .doc-nav-group { width: 100%; padding: 10px 0 2px; }
}

/* Link out to the docs from the keys page */
.doc-cta {
  display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit;
  padding: 18px 22px; margin-bottom: 20px;
}
.doc-cta:hover { border-color: var(--accent); }
.doc-cta-body { display: flex; flex-direction: column; gap: 3px; }
.doc-cta-body strong { font-size: 15px; }
.doc-cta-body span { font-size: 13px; color: var(--muted); max-width: 62ch; }
.doc-cta-go { margin-left: auto; color: var(--accent); font-size: 20px; }

/* API request log */
.log-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.log-controls label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.log-controls input, .log-controls select {
  padding: 8px 10px; font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px; min-width: 190px;
}
.log-retention { margin-left: auto; font-size: 12px; color: var(--muted); }
.log-table td { font-size: 13px; vertical-align: top; }
.log-table td:last-child { text-align: left; }
.log-table small { color: var(--muted); }
.log-method { font-weight: 700; color: var(--muted); margin-right: 4px; }
.log-failed .log-method, .log-failed .mono { color: var(--danger); }

/* The way back to the application that handed the signer over */
.return-to { margin-top: 22px; }
.return-to .btn { display: inline-block; width: auto; padding: 12px 22px; text-decoration: none; }

/* Billing: the wallet figure, then the detail behind it */
.wallet-figure { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.wallet-figure strong { font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.wallet-figure span { color: var(--muted); font-size: 14px; }
.wallet-figure.empty-wallet strong { color: var(--danger); }
.wallet-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 6px; }
.wallet-detail div { display: flex; flex-direction: column; gap: 3px; }
.wallet-detail dt { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.wallet-detail dd { margin: 0; font-size: 14px; }
.plan-current td { background: var(--accent-soft); }
.data-table .spend { color: var(--danger); }
.data-table .grant { color: var(--ok); }