/* ══════════════════════════════════════════════════════════════════════
   /muestra (DECISIONS 148): the form, three drafts, and the hold that signs one.

   Tokens, the bar, the foot and .btn are public.css's; the document is legal.css's. This file is
   only what the sample adds. The open / full / closed states are painted from the server's
   `data-state`, so the honest notice is there with no script at all.
   ══════════════════════════════════════════════════════════════════════ */

.sample { display: grid; gap: var(--s5); }
.sample > h2 { margin: 0; }
.doc .sample .fine { margin: 0; max-width: 62ch; font-size: 14px; color: var(--text-3); }

/* What the server says before anything is typed. */
.sample__notice { display: none; padding: var(--s5); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-3); }
.sample__notice p { margin: 0 0 var(--s4); }
.sample__notice p:last-child { margin-bottom: 0; }
.sample[data-state="closed"] .sample__notice[data-notice="closed"],
.sample[data-state="full"] .sample__notice[data-notice="full"] { display: block; }
.sample:not([data-state="open"]) .sample__form,
.sample:not([data-state="open"]) .sample__drafts,
.sample:not([data-state="open"]) .sample__sign,
.sample:not([data-state="open"]) .sample__said { display: none; }

.sample [hidden] { display: none !important; }

.sample__form { display: grid; gap: var(--s4); max-width: 38rem; }
.field { display: grid; gap: var(--s2); }
.field > span { font: 500 14px/1.2 var(--ui); color: var(--text-2); }
.field > span i { font-style: normal; color: var(--text-3); }
.field input {
  width: 100%; min-height: 48px; padding: var(--s3) var(--s4);
  font: 400 16px/1.4 var(--ui); color: var(--text);
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-2);
}
.field input::placeholder { color: var(--text-3); opacity: 1; }
.field input:hover { border-color: var(--text-3); }

.sample__go { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin: 0; }
.sample__said { margin: 0; font-size: 15px; color: var(--text); padding: var(--s3) var(--s4); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-2); max-width: 62ch; }
.sample__go .sample__said { padding: 0; background: none; border: 0; color: var(--text-2); }
.sample__said:empty { display: none; }

/* The three drafts. */
.sample h3 { margin: 0; }
.drafts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.doc .drafts li { max-width: none; margin: 0; display: grid; gap: var(--s3); justify-items: start; }
.draft, .chosen {
  margin: 0; padding: var(--s4) var(--s5); width: 100%;
  background: var(--bg-2); border: 1px solid var(--line-2); border-left: 3px solid var(--info); border-radius: var(--r-2);
}
.draft p, .chosen { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.55; }
.draft p { margin: 0; max-width: none; }
.draft__angle { display: block; margin: 0 0 var(--s2); font: 500 13px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.drafts .btn { min-height: 48px; }

/* Signing. */
.sample__sign { display: grid; gap: var(--s4); max-width: 38rem; }
.sample__sign [data-wait] { display: grid; gap: var(--s4); }
.who { margin: 0; font: 500 14px/1.4 var(--mono); color: var(--text-2); }
.who b { color: var(--text); font-weight: 600; }
.stamp { margin: 0; }
.stamp b { font: 600 1.15rem/1.2 var(--display); color: var(--text); }
.signed { display: grid; gap: var(--s4); outline: none; }
.signed .chosen { border-left-color: var(--signed); }
.then { display: grid; gap: var(--s3); margin-top: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line-2); }
.then p { margin: 0; }
.linklike { min-height: 44px; padding: 0; background: none; border: 0; color: var(--info); font: inherit; text-decoration: underline; cursor: pointer; }

/* The hold, as on the landing's table (hold.js drives --p). */
.hold {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  width: 100%; min-height: 60px; padding: var(--s2) var(--s5) var(--s2) var(--s3);
  background: var(--bg-2); color: var(--text); border: 0; border-radius: var(--r-2);
  box-shadow: inset 0 0 0 1px var(--info); font: 600 1.0625rem/1.25 var(--ui); white-space: nowrap; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.hold:disabled { opacity: .55; cursor: default; box-shadow: inset 0 0 0 1px var(--line-2); }
.hold__fill { position: absolute; inset: 0; z-index: -1; background: var(--info); pointer-events: none; transform: scaleX(var(--p, 0)); transform-origin: left; }
.hold__ring {
  position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: conic-gradient(var(--text) calc(var(--p, 0) * 360deg), var(--line-2) 0);
}
.hold__ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bg-2); }
.hold__ring svg { position: relative; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hold__label { position: relative; text-align: left; }
.hold__label::after {
  content: attr(data-on); position: absolute; inset: 0; color: var(--bg-2);
  clip-path: inset(0 calc(100% - var(--edge, 0px)) 0 0); visibility: hidden;
}
.hold[data-holding] .hold__label::after { visibility: visible; }
.hold[data-holding] { box-shadow: inset 0 0 0 2px var(--info); }
.hold__hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0; font-size: 14px; color: var(--text-2); max-width: none; }
.hold__hint span { flex: 1 1 14rem; min-width: 0; }
.hold__mode {
  min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line-2); border-radius: var(--r-1);
  background: none; color: var(--text-2); font: 500 14px/1 var(--ui); cursor: pointer;
}
.hold__mode[aria-pressed="true"] { background: var(--bg-4); color: var(--text); border-color: var(--text-3); }
.hold__mode[hidden] { display: none; }

@media (max-width: 480px) {
  .draft, .chosen { padding: var(--s4); }
  .sample__go .btn, .drafts .btn, .sample__form .btn { width: 100%; }
  .hold { white-space: normal; }
}