/* Trial agreement pages (/trial, /trial-signed). Tokens come from styles.css. */

.trial { max-inline-size: 760px; padding-block: var(--s-7) var(--s-8); }

/* head */
.trial-lede { margin-block-start: var(--s-4); }
.trial-key {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-block-start: var(--s-6);
  border-block-start: 2px solid var(--ink);
}
.trial-key div {
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--line-2);
}
.trial-key div:nth-child(odd) { padding-inline-end: var(--s-4); }
.trial-key div:nth-child(even) { padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--line-2); }
.trial-key dt { font-size: var(--fs-sm); color: var(--muted); }
.trial-key dd {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--track-snug);
}

/* agreement text */
.agreement { margin-block-start: var(--s-8); }
.agreement .h3 { margin-block: var(--s-7) var(--s-3); }
.agreement .h3:first-child { margin-block-start: 0; }
.agreement p,
.agreement ul,
.agreement ol,
.agreement .table-wrap { margin-block-start: var(--s-3); color: var(--ink-2); }
.agreement ul { padding-inline-start: 1.25em; list-style: disc; }
.agreement ol { padding-inline-start: 1.5em; list-style: decimal; }
.agreement li + li { margin-block-start: var(--s-2); }
.agreement li::marker { color: var(--muted); }

.table-wrap { overflow-x: auto; }
.agreement table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.agreement th,
.agreement td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-block-end: 1px solid var(--line-2);
  text-align: start;
  vertical-align: top;
}
.agreement thead th { border-block-end: 2px solid var(--ink); font-weight: 600; }
.agreement tbody th { font-weight: 600; white-space: nowrap; }
/* phone: each duty row stacks, cells labelled from data-label */
@media (max-width: 599px) {
  .duties thead { display: none; }
  .duties tr { display: grid; gap: var(--s-2); padding-block: var(--s-4); border-block-end: 1px solid var(--line-2); }
  .duties th,
  .duties td { padding: 0; border: 0; }
  .duties td::before { content: attr(data-label); display: block; font-weight: 600; color: var(--muted); }
}

/* signing */
.sign-panel { margin-block-start: var(--s-8); scroll-margin-block-start: 96px; }
.sign-intro { color: var(--muted); }
.field .signature-input { font-size: var(--fs-h3); font-style: italic; }
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.check input {
  inline-size: 22px;
  block-size: 22px;
  margin: 1px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.trial-foot { max-inline-size: 760px; }

.text-link { text-decoration: underline; text-underline-offset: 2px; }
.text-link:hover { color: var(--ink); }

/* confirmation page */
.trial-done { text-align: center; }
.trial-done .lead { margin-block-start: var(--s-4); margin-inline: auto; max-inline-size: 30em; }
.next-steps {
  margin-block-start: var(--s-7);
  text-align: start;
  border-block-start: 2px solid var(--ink);
  counter-reset: step;
}
.next-steps li {
  display: grid;
  grid-template-columns: var(--s-6) 1fr;
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--line-2);
  counter-increment: step;
}
.next-steps li::before { content: counter(step); font-weight: 600; color: var(--muted); }

@media (min-width: 768px) {
  .trial { padding-block: var(--s-8) var(--s-9); }
  .trial-key { grid-template-columns: repeat(4, 1fr); }
  .trial-key div { padding-inline: var(--s-4); }
  .trial-key div:first-child { padding-inline-start: 0; }
  .trial-key div + div { border-inline-start: 1px solid var(--line-2); }
  .trial-key div:nth-child(odd) { padding-inline-end: var(--s-4); }
}