/* The sender's screen (index.html) and the signer's screen (sign.html).
 * Load after style.css and signature-pad.css. Like every Ink style sheet, it
 * declares no colour, font family, font size or radius of its own: every value
 * is a Mainframe token or a variable style.css built from one. */

/* ---- rhythm ---- */
.stack > * + *, .new > * + * { margin-top: var(--citadl-space-stack); }
.new > * + * { margin-top: var(--citadl-space-section); }
.field + .msg, .msg + .btn, .signers + .msg { margin-top: var(--citadl-space-cell); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- links that look like quiet text actions ---- */
.linkish { display: inline; padding: 0; border: 0; background: none; color: var(--accent-text); text-decoration: underline;
  text-underline-offset: calc(var(--citadl-hairline) * 3); font-size: inherit; }
.linkish:hover { color: var(--ink); }
.back { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--citadl-font-size-body); color: var(--ink-2); text-decoration: none; }
.back::before { content: '\2190'; margin-right: var(--citadl-space-cell); }
.back:hover { color: var(--ink); }
section > .back + h1 { margin-top: 0; }

/* ---- page head: a title with its main action ---- */
.head { display: flex; align-items: center; justify-content: space-between; gap: var(--citadl-space-stack); flex-wrap: wrap; }
.head > * + * { margin-top: 0; }
.note { padding: var(--citadl-space-stack) var(--citadl-space-panel); border-left: calc(var(--citadl-hairline) * 3) solid var(--accent);
  background: var(--accent-tint); font-size: var(--citadl-font-size-body); }
.empty { padding: var(--citadl-space-section) 0; border-top: var(--citadl-hairline) solid var(--line); }

/* ---- the document list: each row is one link ---- */
.docs > li { list-style: none; }
.row.doc { color: inherit; text-decoration: none; transition: background-color var(--t); }
.row.doc .main { display: flex; flex-direction: column; }
.row.doc:hover { background: var(--accent-tint); }
.row.doc:focus-visible { outline-offset: calc(var(--citadl-hairline) * -2); }
.row .main > .meta + .meta { margin-top: 0; }
.list .main { display: flex; flex-direction: column; }

/* ---- footer ---- */
.foot { width: 100%; max-width: calc(var(--column) + var(--gutter) * 2); margin: 0 auto;
  padding: var(--citadl-space-section) max(var(--gutter), env(safe-area-inset-right)) calc(var(--citadl-space-section) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  border-top: var(--citadl-hairline) solid var(--line); font-size: var(--citadl-font-size-body); color: var(--ink-2); }
.foot > * + * { margin-top: var(--citadl-space-stack); }
.foot p { margin: 0; }
.foot .label { margin-bottom: var(--citadl-space-tight); }
.fingerprint { display: block; font-size: var(--citadl-font-size-label); word-spacing: calc(var(--citadl-space-tight) / 2); }

/* ---- sign-in code ---- */
.code-input { font-family: var(--citadl-font-mono); font-variant-numeric: tabular-nums; text-align: center;
  letter-spacing: var(--citadl-space-cell); font-size: var(--citadl-font-size-title); }
input.code-input { font-size: var(--citadl-font-size-title); }

/* ---- choosing the PDF ---- */
.drop { display: flex; align-items: center; justify-content: center; min-height: calc(var(--tap) * 2.5); padding: var(--citadl-space-panel);
  border: calc(var(--citadl-hairline) * 2) dashed var(--line); border-radius: var(--r); text-align: center; cursor: pointer;
  text-transform: none; letter-spacing: inherit; font-size: var(--citadl-font-size-body-large); font-weight: 400; color: var(--ink);
  transition: border-color var(--t), background-color var(--t); }
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-tint); }
.drop.is-chosen { border-style: solid; }
.drop strong { font-weight: 600; }
.visually-hidden:focus-visible + .drop { outline: calc(var(--citadl-hairline) * 2) solid var(--accent); outline-offset: calc(var(--citadl-hairline) * 2); }

/* ---- signers and key terms: name and email side by side when there is room ---- */
.signers > * + *, .terms > * + * { margin-top: var(--citadl-space-stack); }
.signer, .term { display: grid; grid-template-columns: 1fr; gap: var(--citadl-space-cell); padding-bottom: var(--citadl-space-stack);
  border-bottom: var(--citadl-hairline) solid var(--line); }
.signer .field + .field, .term .field + .field { margin-top: 0; }
.signer .remove { justify-self: start; padding: 0; min-height: var(--tap); }
@media (min-width: 40rem) {
  .signer { grid-template-columns: 1fr 1.3fr auto; align-items: end; }
  .signer:has(.remove[hidden]) { grid-template-columns: 1fr 1.3fr; }
  .term { grid-template-columns: 1fr 1.6fr; }
  .signer .remove { justify-self: end; padding: 0 var(--citadl-space-cell); }
}

/* ---- checkboxes and radios: a whole row is the target ---- */
label.check { display: flex; align-items: center; gap: var(--citadl-space-stack); min-height: var(--tap); margin: 0; cursor: pointer;
  text-transform: none; letter-spacing: inherit; font-size: var(--citadl-font-size-body-large); font-weight: 500; color: var(--ink); }
.check input { flex: none; width: var(--citadl-space-section); height: var(--citadl-space-section); margin: 0; accent-color: var(--accent); cursor: pointer; }
.choice { margin: 0; padding: var(--citadl-space-cell) var(--citadl-space-panel); border: var(--citadl-hairline) solid var(--line); border-radius: var(--r); }
.choice legend { padding: 0 var(--citadl-space-tight); }
.pad-box { min-width: 0; }

/* ---- a collapsed section ---- */
details.more { border-top: var(--citadl-hairline) solid var(--line); border-bottom: var(--citadl-hairline) solid var(--line); }
details.more > summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; font-weight: 600; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: '+'; display: inline-block; width: var(--citadl-space-section); font-family: var(--citadl-font-mono); color: var(--ink-2); }
details.more[open] > summary::before { content: '\2212'; }
details.more > :not(summary) { margin: 0 0 var(--citadl-space-panel); }

/* ---- one document ---- */
.doc-title { overflow-wrap: anywhere; }
.doc-state { display: flex; align-items: center; flex-wrap: wrap; gap: var(--citadl-space-cell) var(--citadl-space-stack); }
.actions { display: flex; flex-wrap: wrap; gap: var(--citadl-space-cell); }
.confirm { padding: var(--citadl-space-panel); border: var(--citadl-hairline) solid hsl(var(--citadl-destructive) / 0.4); border-radius: var(--r); }
.confirm > * + * { margin-top: var(--citadl-space-stack); }
section > .confirm, section > .msg { margin-top: var(--citadl-space-stack); }
.terms-list { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--citadl-space-cell) var(--citadl-space-panel); margin: 0; }
.terms-list dt { color: var(--ink-2); font-size: var(--citadl-font-size-body); }
.terms-list dd { margin: 0; }
.events { list-style: none; padding: 0; }
.events li { display: grid; grid-template-columns: 1fr; gap: 0; padding: var(--citadl-space-cell) 0; border-bottom: var(--citadl-hairline) solid var(--line);
  font-size: var(--citadl-font-size-body); }
.events time { color: var(--ink-2); font-size: var(--citadl-font-size-label); }
@media (min-width: 40rem) {
  .events li { grid-template-columns: 12rem 1fr; gap: var(--citadl-space-stack); align-items: baseline; }
}

/* ---- the signer's page ---- */
.lede { font-size: var(--citadl-font-size-body-large); color: var(--ink-2); }
.lede strong { color: var(--ink); font-weight: 600; }
.ask > .lede + h1 { margin-top: var(--citadl-space-tight); }
.calm { padding-top: var(--citadl-space-section); }
.calm p { max-width: 32rem; }
.pdf { display: flex; flex-direction: column; gap: var(--citadl-space-stack); padding: var(--citadl-space-stack); background: var(--panel);
  border: var(--citadl-hairline) solid var(--line); border-radius: var(--r); min-height: calc(var(--tap) * 3); }
/* The page itself is paper, light in both modes like the signature pad. */
.pdf__page { display: block; width: 100%; height: auto; background: var(--sig-paper);
  box-shadow: 0 0 0 var(--citadl-hairline) var(--line); }
.pdf__loading { margin: auto; }
.sign-area h2 { margin-bottom: var(--citadl-space-stack); }
.consent { text-align: center; }
.decline-row { text-align: center; }
.quiet-link { color: var(--ink-2); font-size: var(--citadl-font-size-body); min-height: var(--tap); }
.quiet-link:hover { color: var(--danger); }

/* The page is focused when a view changes, so a screen reader and the Tab key start at its top. It needs no ring of its own. */
main.page:focus { outline: none; }

/* "Ink by CITADL": the product name, then a quiet endorsement beside it. */
.brand .by { color: var(--ink-2); font-size: var(--citadl-font-size-label); white-space: nowrap; }