/* ══════════════════════════════════════════════════════════
   زاگرس — فرم همکاری با ما (/join)
   Tokens, type and buttons all come from /styles.css; this file
   only adds the form itself. Nothing here redefines a colour —
   every value is one of the site's variables, so the page follows
   the same day/night switch as the rest of the site.
   ══════════════════════════════════════════════════════════ */

.joinpage { background: var(--ground); }

.join { padding-block: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5rem); }

/* The form column and the aside stack on phones and sit side by side once
   there is room for a comfortable measure next to them. */
.join__shell {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 60rem) {
  .join__shell { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .join__intro { grid-column: 1 / -1; }
}

.join__intro { max-width: 46ch; }
.join__title {
  margin: .5rem 0 0;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.join__lede { margin: .85rem 0 0; color: var(--muted); line-height: 1.9; }

/* ── Card ───────────────────────────────────────────────── */
.jcard {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: clamp(1.1rem, .9rem + 1vw, 1.75rem);
}

.jcard__head {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.4rem;
}
.jprog { display: flex; gap: .3rem; flex: 1; }
.jprog i {
  height: 4px;
  flex: 1;
  border-radius: 99px;
  background: var(--line);
  transition: background .3s ease;
}
.jprog i.is-on { background: var(--accent); }
.jcard__count { font-size: .78rem; font-weight: 700; color: var(--muted); }

/* ── Steps ──────────────────────────────────────────────── */
.jstep { display: none; }
.jstep.is-active { display: block; }
.jstep__t { margin: 0; font-size: 1.2rem; font-weight: 750; }
.jstep__h { margin: .2rem 0 1.35rem; font-size: .86rem; color: var(--muted); line-height: 1.7; }

/* ── Fields ─────────────────────────────────────────────── */
.jf { margin-bottom: 1.05rem; }
.jf > label {
  display: block;
  margin-bottom: .38rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
}
.req { color: #C0453A; }
:root[data-theme='dark'] .req { color: #E0796D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .req { color: #E0796D; }
}

.jrow { display: grid; gap: 0 .7rem; grid-template-columns: 1fr; }
@media (min-width: 26rem) { .jrow { grid-template-columns: 1fr 1fr; } }

/* A line under a box saying why it is being asked for. Quiet on purpose: it
   answers a question rather than adding one. */
.jhint {
  margin: .3rem 0 0;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--muted);
}

/* Where the form stops asking about the person and starts asking about the
   سند. A labelled rule rather than a heading — the step already has one. */
.jsep {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1.35rem 0 .9rem;
  font-size: .82rem;
  color: var(--muted);
}
.jsep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* The one tick on the form. Sized like the controls around it so the whole
   row stays a comfortable target on a phone. */
.jcheck {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .55rem;
  min-height: 2.85rem;
  font-size: .9rem;
  cursor: pointer;
}
.jcheck input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

/* One ruleset for every control, so a select never sits a pixel off an input
   next to it. */
.jf input[type='text'],
.jf input[type='tel'],
.jf textarea,
.jf select,
.jdate select {
  width: 100%;
  min-height: 2.85rem;
  padding: .5rem .75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.6;
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.jf textarea { min-height: 4.6rem; resize: vertical; }
.jf select, .jdate select {
  /* The caret is drawn here rather than left to the OS, which puts it on the
     wrong side in an RTL document on some Android builds. Its grey is fixed
     rather than tokenised — an SVG data URI cannot read a CSS variable — and
     chosen to sit between the two themes' muted shades so it reads on both. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23808f8c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 2 4.5 4 4.5-4'/%3E%3C/svg%3E");
  background-size: .7rem .5rem;
  background-position: left .75rem center;
  background-repeat: no-repeat;
  padding-inline-start: 1.9rem;
  cursor: pointer;
}
.jf input:focus,
.jf textarea:focus,
.jf select:focus,
.jdate select:focus,
.jplate:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.jf input::placeholder, .jf textarea::placeholder { color: var(--muted); opacity: .65; }
.jf input[dir='ltr'] { text-align: left; }

.jf.is-bad input,
.jf.is-bad textarea,
.jf.is-bad select,
.jf.is-bad .jdate select,
.jf.is-bad .jplate { border-color: #C0453A; }

.jerr {
  margin: .3rem 0 0;
  font-size: .78rem;
  line-height: 1.6;
  color: #C0453A;
  min-height: 0;
}
.jerr:empty { display: none; }
:root[data-theme='dark'] .jerr { color: #E0796D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .jerr { color: #E0796D; }
}
.jerr--form {
  margin-top: 1rem;
  padding: .7rem .85rem;
  border-radius: 10px;
  background: color-mix(in srgb, #C0453A 10%, transparent);
  font-weight: 600;
}
.jnote { margin: .35rem 0 0; font-size: .76rem; color: var(--muted); line-height: 1.6; }
/* The same red the field errors use, because a code that has run out is the
   one thing on this note the applicant has to act on. */
.jnote.is-expired { color: #C0453A; }
:root[data-theme='dark'] .jnote.is-expired { color: #E0796D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .jnote.is-expired { color: #E0796D; }
}
/* `display:flex` beats the browser's own `[hidden] { display: none }`, so
   without this rule the green «شماره‌ی شما تایید شد.» sat on the form from the
   moment it loaded — telling every applicant their number was already verified
   before they had typed one. */
.jok[hidden] { display: none; }
.jok {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .4rem 0 0;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
}
.jok::before {
  content: '';
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--accent);
  /* The tick is drawn in the mask so it takes the accent from the theme
     instead of being a second colour to keep in step. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7 10 17l-5-5'/%3E%3C/svg%3E") center / .8rem no-repeat,
          linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7 10 17l-5-5'/%3E%3C/svg%3E") center / .8rem no-repeat,
        linear-gradient(#000, #000);
  mask-composite: exclude;
}

/* A proven phone number and its code are both done being edited. */
.jf.is-locked input { opacity: .7; pointer-events: none; }
.jf.is-locked .jbtn { display: none; }

/* ── Jalali date, as three selects ──────────────────────── */
.jdate { display: grid; gap: .35rem; grid-template-columns: 1.05fr 1.35fr .85fr; }
.jdate--ym { grid-template-columns: 1fr 1.4fr; }
.jdate select { padding-inline: 1.55rem .45rem; font-size: .88rem; text-align: center; }

/* ── OTP ────────────────────────────────────────────────── */
.jotp__row { display: flex; gap: .5rem; align-items: stretch; }
.jotp__row input { flex: 1; }
.jotp__row .jbtn { flex: 0 0 auto; margin: 0; min-height: 2.85rem; white-space: nowrap; }
input.jotp {
  text-align: center;
  letter-spacing: .5em;
  font-size: 1.15rem;
  font-weight: 700;
  padding-inline-start: .75rem;
}

/* ── Radio picker ───────────────────────────────────────── */
.jpick { display: grid; gap: .5rem; }
.jpick__opt {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .8rem .85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.jpick__opt input { position: absolute; opacity: 0; pointer-events: none; }
.jpick__opt.is-on { border-color: var(--accent); background: var(--accent-soft); }
.jpick__opt:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.jpick__dot {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .28rem;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--raised);
  transition: border-width .15s ease, border-color .15s ease;
}
.jpick__opt.is-on .jpick__dot { border: 5px solid var(--accent); }
.jpick__body b { display: block; font-size: .92rem; font-weight: 700; line-height: 1.6; }
.jpick__body > span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.6; }

/* ── Plate ──────────────────────────────────────────────── */
/* Drawn as the plate itself, the same graphic the admin panel uses, so what
   someone types looks like what they are holding. */
.jplate {
  display: flex;
  align-items: stretch;
  height: 3.1rem;
  max-width: 19rem;
  border: 2px solid #0f172a;
  border-radius: 9px;
  background: #ffffff;
  overflow: hidden;
}
.jplate__ir {
  flex: 0 0 auto;
  width: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  background: linear-gradient(180deg, #124aae, #0b3179);
  color: #fff;
  font-size: .38rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.jplate__flag {
  display: flex;
  flex-direction: column;
  width: .85rem;
  height: .58rem;
  border-radius: 1px;
  overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .5);
}
.jplate__flag i { flex: 1; }
.jplate__flag i:nth-child(1) { background: #239f40; }
.jplate__flag i:nth-child(2) { background: #fff; }
.jplate__flag i:nth-child(3) { background: #da0000; }
.jplate__main {
  flex: 1;
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
}
.jplate__region {
  flex: 0 0 auto;
  width: 3.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-inline-start: 2px solid #0f172a;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
}
.jplate__region > span { font-size: .5rem; color: #475569; line-height: 1; }
/* The plate is a white object in both themes — a night-mode license plate is
   not a thing — so its fields keep dark ink on it whatever the page is doing. */
.jplate input,
.jplate select {
  min-height: 0;
  height: 100%;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0f172a;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
  cursor: text;
}
.jplate select { cursor: pointer; font-size: 1.05rem; }
.jplate input:focus, .jplate select:focus {
  outline: none;
  background: #fff;
  box-shadow: inset 0 -2px 0 0 rgba(15, 23, 42, .35);
}
.jplate input::placeholder { color: #cbd5e1; font-weight: 400; }
.jplate__main input:first-child { flex: 0 0 4rem; }
.jplate__main select { flex: 0 0 3rem; }
.jplate__main input:last-child { flex: 0 0 4.6rem; }
.jplate__region input { height: auto; font-size: .95rem; }

/* ── Uploads ────────────────────────────────────────────── */
.jup { display: grid; gap: .55rem; }
.jupitem {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .8rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.jupitem input[type='file'] { position: absolute; opacity: 0; width: 0; height: 0; }
.jupitem:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.jupitem.is-done {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}
.jupitem.is-bad { border-color: #C0453A; border-style: solid; }
.jupitem__ic {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--raised);
  border: 1px solid var(--line-soft);
  color: var(--muted);
  overflow: hidden;
}
.jupitem.is-done .jupitem__ic { color: var(--accent); border-color: transparent; }
.jupitem__ic svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Once a photo is picked, the tile becomes a thumbnail of it — the only
   confirmation that matters is seeing the card you just photographed. */
.jupitem__ic img { width: 100%; height: 100%; object-fit: cover; }
.jupitem__body { min-width: 0; flex: 1; }
.jupitem__body b { display: block; font-size: .87rem; font-weight: 700; line-height: 1.5; }
.jupitem__body span {
  display: block;
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jupitem__x { flex: 0 0 auto; font-size: .75rem; font-weight: 700; color: var(--muted); }
.jupitem.is-done .jupitem__x { color: var(--accent); }

/* ── Buttons ────────────────────────────────────────────── */
.jbtn {
  display: block;
  width: 100%;
  margin-top: 1.2rem;
  padding: .85rem 1rem;
  border: 1px solid transparent;
  border-radius: 11px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .18s ease, background .18s ease;
}
.jbtn:hover { transform: translateY(-1px); }
.jbtn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.jbtn--solid { background: var(--accent); color: #fff; }
:root[data-theme='dark'] .jbtn--solid { color: #05201E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .jbtn--solid { color: #05201E; }
}
.jbtn--ghost { background: transparent; border-color: var(--accent); color: var(--accent); }
.jbtn--quiet { margin-top: .55rem; background: transparent; color: var(--muted); font-weight: 600; }
.jbtn--quiet:hover { color: var(--ink); }
/* The «ارسال کد» button sits inside a field row, not under one. */
.jotp__row .jbtn { width: auto; padding-inline: 1rem; font-size: .85rem; }

.jlegal { margin: .9rem 0 0; font-size: .74rem; color: var(--muted); line-height: 1.7; text-align: center; }

/* ── Done ───────────────────────────────────────────────── */
.jdone { text-align: center; }
.jtick {
  width: 3.6rem;
  height: 3.6rem;
  margin: .25rem auto 1rem;
  border-radius: 50%;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  color: var(--accent);
}
.jtick svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jdone__t { margin: 0; font-size: 1.25rem; font-weight: 780; }
.jdone__h { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); }
.jcode {
  margin: 1rem auto .4rem;
  max-width: 14rem;
  padding: .75rem;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .2em;
  direction: ltr;
}
.jdone__link { margin: 0; font-size: .76rem; color: var(--muted); line-height: 1.9; }
/* An anchor since 2026-09-23, so the address can be tapped and long-pressed on
   a phone. Underlined for the same reason — bold ink alone read as plain text. */
.jdone__url {
  display: inline-block;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: .3em;
}

.jtl { margin: 1.4rem 0 .5rem; padding: 0; list-style: none; text-align: start; }
.jtl li {
  position: relative;
  padding-inline-start: 1.5rem;
  padding-block: .35rem;
  color: var(--muted);
}
.jtl li b { display: block; font-size: .87rem; font-weight: 650; line-height: 1.6; }
.jtl li span { display: block; font-size: .76rem; line-height: 1.6; }
.jtl li::before {
  content: '';
  position: absolute;
  inset-inline-start: .28rem;
  top: .82rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--line);
}
.jtl li::after {
  content: '';
  position: absolute;
  inset-inline-start: .53rem;
  top: 1.5rem;
  bottom: -.35rem;
  width: 1px;
  background: var(--line);
}
.jtl li:last-child::after { display: none; }
.jtl li.is-on { color: var(--ink); }
.jtl li.is-on::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── Aside ──────────────────────────────────────────────── */
.jaside {
  padding: clamp(1.1rem, .9rem + 1vw, 1.6rem);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--surface);
}
.jaside__t { margin: 0 0 .9rem; font-size: 1rem; font-weight: 750; }
.jaside__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.jaside__list li { padding-inline-start: .85rem; border-inline-start: 2px solid var(--figure); }
.jaside__list b { display: block; font-size: .87rem; font-weight: 700; line-height: 1.6; }
.jaside__list span { display: block; font-size: .8rem; color: var(--muted); line-height: 1.7; }
.jaside__note {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.85;
}

@media (prefers-reduced-motion: reduce) {
  .jbtn:hover { transform: none; }
  * { transition-duration: .01ms !important; }
}


/* ── the «bring these in» checklist on /join/<code> ──────────────────────
   Only drawn for an applicant whose desk review has passed. Styled as a
   panel rather than a paragraph because it is a list somebody reads standing
   up, on a phone, about to leave the house. */
.jdocs {
  margin: 1.2rem 0 .3rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raised);
  text-align: start;
}
.jdocs__t {
  margin: 0 0 .5rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
}
.jdocs__list {
  margin: 0;
  padding: 0;
  padding-inline-start: 1.1rem;
  list-style: disc;
}
.jdocs__list li {
  margin: .25rem 0;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--ink);
}
.jdocs__addr {
  margin: .65rem 0 0;
  font-size: .8rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ══════════════════════════════════════════════════════════
   قرارداد — the draft an applicant reads before sending
   Same rule as the rest of this file: every colour is one of
   the site's variables, so the sheet follows the day/night
   switch without knowing anything about it.
   ══════════════════════════════════════════════════════════ */

/* ── the strip on step 3 ────────────────────────────────── */
.cstrip {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .85rem;
  margin-bottom: 1.05rem;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 14px;
}
.cstrip__ic {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9px;
  background: var(--raised);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--accent);
  flex: 0 0 auto;
}
.cstrip__ic svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cstrip__b { min-width: 0; flex: 1; }
.cstrip__b b { display: block; font-size: .85rem; font-weight: 750; line-height: 1.5; }
.cstrip__b span { display: block; font-size: .74rem; color: var(--muted); line-height: 1.5; }
.cstrip__go {
  flex: 0 0 auto;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 10px;
  padding: .42rem .7rem;
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
  cursor: pointer;
}
.cstrip__go:hover { background: var(--raised); }

/* ── the sheet ──────────────────────────────────────────── */
.csheet { position: fixed; inset: 0; z-index: 90; display: flex; }
.csheet[hidden] { display: none; }
.csheet__box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--raised);
}
/* Full screen on a phone, a window on anything with room for one. */
@media (min-width: 46rem) {
  .csheet { background: rgba(6, 14, 13, .5); padding: 3vh 16px; }
  /* `flex: 1` above is what makes it full-bleed on a phone; a window has to
     opt out of it or it grows to the width of the backdrop. */
  .csheet__box { flex: 0 0 auto; margin: auto; width: min(680px, 100%); max-height: 94vh; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55); }
}

.csheet__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--line);
}
.csheet__t { flex: 1; min-width: 0; margin: 0; font-size: .92rem; font-weight: 750; line-height: 1.5; }
.csheet__ver {
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.csheet__ver:empty { display: none; }
.csheet__x {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}

.csheet__flag {
  flex: 0 0 auto;
  margin: 0;
  padding: .7rem .9rem;
  font-size: .75rem;
  line-height: 1.75;
  color: var(--figure);
  background: rgba(184, 115, 26, .10);
  background: color-mix(in srgb, var(--figure) 12%, transparent);
  border-bottom: 1px solid var(--line);
}
.csheet__flag b { font-weight: 800; }

.csheet__key {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: .5rem .9rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.csheet__key span { display: flex; align-items: center; gap: 5px; font-size: .7rem; color: var(--muted); }
.csheet__key i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.csheet__share { width: 100%; line-height: 1.7; }
.k-you { background: var(--accent-soft); border: 1px solid var(--accent); }
.k-later { background: rgba(184, 115, 26, .12); background: color-mix(in srgb, var(--figure) 14%, transparent); border: 1px dashed var(--figure); }

.csheet__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .9rem 1rem 1.3rem; }

.csheet__foot { flex: 0 0 auto; padding: .65rem .9rem; border-top: 1px solid var(--line); }
.csheet__done {
  display: block;
  width: 100%;
  padding: .8rem 1rem;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 750;
  cursor: pointer;
}
:root[data-theme='dark'] .csheet__done { color: #05201E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .csheet__done { color: #05201E; }
}

/* ── the document ───────────────────────────────────────── */
/* The same shapes the signing page renders, so the text an applicant reads
   today looks like the one they will sign next week. */
.cdoc { font-size: 13.5px; line-height: 2.05; }
.cdoc h4 { margin: 20px 0 7px; font-size: 13.5px; font-weight: 800; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cdoc h4:first-child { margin-top: 0; }
.cdoc p { margin: 5px 0; text-align: justify; }
.cdoc p.cdoc__lead { text-align: center; font-weight: 800; font-size: 15px; line-height: 1.7; }
.cdoc b { font-weight: 750; }
.cdoc table { width: 100%; border-collapse: collapse; margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 12.5px; }
.cdoc td { padding: 6px 9px; border-bottom: 1px solid var(--line-soft); }
.cdoc tr:last-child td { border-bottom: 0; }
.cdoc tr:first-child td { background: var(--surface); font-weight: 750; font-size: 11.5px; }
.cdoc__state { color: var(--muted); font-size: .85rem; text-align: center; padding: 1.5rem 0; }

/* Filled from the form, versus waiting for the day the contract is issued. */
.cdoc .tk-you {
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 0 3px;
}
.cdoc .tk-later {
  display: inline-block;
  color: var(--figure);
  background: rgba(184, 115, 26, .12);
  background: color-mix(in srgb, var(--figure) 14%, transparent);
  border: 1px dashed var(--figure);
  border-radius: 6px;
  padding: 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.85;
  white-space: nowrap;
}

/* The sheet scrolls, the page behind it does not. */
body.is-locked { overflow: hidden; }