/* Contest eligibility: signing a certification on a phone, and the page that
   leads to it. The shell around it is site.css. Phone first: one column, big
   targets, nothing wider than the screen. Yellow is only ever a fill. */
:root {
  --ink: var(--tc-navy);
  --body: #1b1b20;
  --muted: #5a5a66;
  --rule: #e4e4ea;
  --panel: #f4f4f7;
  --ti: #004165;          /* TI's own heading blue, as on the forms */
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--body); font: 16px/1.55 var(--tc-text); }

main.sign, main.door { max-width: 680px; margin: 0 auto; padding: 20px 16px 72px; }
main.door { max-width: 880px; }

h2 { font-family: var(--tc-display); line-height: 1.25; }
.hint { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.hint small, label small { font-weight: 500; color: var(--muted); font-size: 12.5px; }

/* ---- controls ---- */
.btn { display: inline-block; font: 700 15px/1.2 var(--tc-display); background: var(--ink); color: #fff;
  border: 0; border-radius: 10px; padding: 13px 18px; text-decoration: none; cursor: pointer; text-align: center; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.big { display: block; width: 100%; padding: 16px; font-size: 17px; }
.btn:focus-visible, .link:focus-visible, .choice:focus-visible, .slot:focus-visible { outline: 3px solid var(--tc-yellow); outline-offset: 2px; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; }

.field { margin: 0 0 16px; }
.field label, .check { display: block; font: var(--tc-label-font); color: var(--tc-label-ink); margin-bottom: 5px; }
.input { width: 100%; min-height: 48px; font: 17px var(--tc-text); padding: 11px 12px; border: 1.5px solid var(--tc-field-line);
  border-radius: 8px; background: #fff; color: var(--body); }
.input:focus { outline: 3px solid var(--tc-yellow); border-color: var(--ink); }
.check { display: flex; align-items: center; gap: 10px; font: 400 16px var(--tc-text); color: var(--body); margin: 0 0 16px; }
.check input { width: 22px; height: 22px; accent-color: var(--ink); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.row .field { min-width: 0; }
/* iPhone Safari gives a date field a native minimum width and look, which
   push it out of a half-width column; without them it fills its column. */
.input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; }
.input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.row .field:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---- steps ---- */
.step-title { font-size: 24px; color: var(--ti); margin: 8px 0 14px; }
.choices { display: grid; gap: 12px; }
.choice { display: block; text-align: left; width: 100%; padding: 18px; border: 2px solid var(--ink); border-radius: 12px;
  background: #fff; font: 16px/1.4 var(--tc-text); color: var(--body); cursor: pointer; }
.choice b { display: block; font: 700 19px var(--tc-display); color: var(--ink); margin-bottom: 4px; }
.choice span { color: var(--muted); font-size: 14.5px; }

.form-head { padding: 4px 0 8px; }
.item { font: 600 12.5px var(--tc-display); color: var(--muted); margin: 0; letter-spacing: .04em; }
.form-title { color: var(--ti); font-size: 23px; margin: 4px 0 8px; }
.form-head p { margin: 0 0 8px; }

.card { background: var(--panel); border-radius: 12px; padding: 16px 16px 4px; margin: 0 0 14px; }
.card h2 { color: var(--ti); font-size: 19px; margin: 0 0 12px; }
.card h2 small { font: 400 14px var(--tc-display); color: var(--muted); }
.card.text { font-size: 15.5px; }
.card.text p, .card.text ol { margin: 0 0 12px; }
.card.text ol { padding-left: 1.4em; }
.card.text ol ol { margin: 4px 0; }
.certify { font-weight: 700; background: #fff8d9; border-left: 4px solid var(--tc-yellow); padding: 10px 12px; margin: 12px 0; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.facts div { background: #fff; border-radius: 8px; padding: 8px 10px; }
.facts .wide { grid-column: 1 / -1; }
.facts dt { font: 600 11.5px var(--tc-display); color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
.card > .hint { margin: 8px 0 12px; }
.remembered { font-size: 14px; color: var(--muted); margin: -4px 0 12px; }

.go { padding: 8px 0 0; display: grid; gap: 10px; }
.still { font-size: 14px; color: var(--muted); margin: 0; min-height: 1.2em; }
.making { padding: 48px 0; text-align: center; font: 600 17px var(--tc-display); color: var(--ink); }

/* ---- club search ---- */
.club-list { list-style: none; margin: 4px 0 0; padding: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.club-list:empty { display: none; }
.club-list button { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--rule); background: #fff;
  padding: 10px 12px; font: 15px var(--tc-text); color: var(--body); cursor: pointer; }
.club-list small { display: block; color: var(--muted); font-size: 13px; }
.club-list .none { background: #fff; padding: 10px 12px; color: var(--muted); font-size: 14px; }
.club-picked { margin: 8px 0 0; font: 600 14px var(--tc-display); color: var(--ink); }
.club-picked:empty { display: none; }

/* ---- the paper ---- */
.paper { display: grid; gap: 10px; margin: 6px 0 12px; }
.paper-page { position: relative; container-type: inline-size; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.18); }
.paper-page > img { display: block; width: 100%; height: auto; aspect-ratio: 612 / 792; }
/* Typed values sit centred in their field, as pdf-lib draws them in the PDF
   (10pt, 2pt in from the left), so the preview matches the exported form
   instead of sitting on TI's printed line. Signatures rise from the line. */
.slot, .mark { position: absolute; display: flex; align-items: center; padding: 0 .33cqw; font: 1.63cqw/1 Helvetica, Arial, sans-serif;
  color: #000; border: 0; background: none; overflow: visible; white-space: nowrap; }
.slot.sig { align-items: flex-end; }
.slot:not(:disabled) { cursor: pointer; }
.slot.todo { background: rgba(252, 194, 0, .45); outline: 2px solid var(--tc-yellow); border-radius: 2px; color: #4d3b00; font-weight: 700;
  justify-content: center; align-items: center; }
.slot.todo span { font-size: 1.5cqw; }
.slot.sig img { height: 100%; width: auto; max-width: 100%; }
.mark { justify-content: center; align-items: center; font-size: 1.8cqw; color: #1c208b; padding: 0; }
.slot.flash { animation: flash 1.1s ease-out; }
@keyframes flash { from { background: rgba(252, 194, 0, .85); } to { background: transparent; } }

/* ---- sheets and the signature pad ---- */
.sheet-back { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; }
.sheet { width: 100%; max-width: 680px; margin: 0 auto; background: #fff; border-radius: 16px 16px 0 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  max-height: 92vh; overflow: auto; }
.sheet-label { font: 700 18px var(--tc-display); margin: 0 0 8px; }
.sheet-label small { font-weight: 500; color: var(--muted); font-size: 14px; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.sheet .reuse { display: block; width: 100%; margin-bottom: 10px; }
.pad { position: relative; background: #fff; border: 1.5px solid var(--tc-field-line); border-radius: 10px; height: 180px; touch-action: none; }
.pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.pad-line { position: absolute; left: 16px; right: 16px; bottom: 40px; border-top: 1.5px dashed #9a9aa6; padding-top: 4px; font-size: 12px;
  color: #6a6a74; pointer-events: none; }
.pad.inked .pad-line { color: transparent; }
.pad-clear { position: absolute; top: 8px; right: 8px; font: 600 13px var(--tc-display); background: #f0f0f4; border: 0; border-radius: 6px;
  padding: 7px 11px; color: var(--ink); cursor: pointer; }

/* ---- done ---- */
.done { text-align: center; padding-top: 16px; }
.done .tick { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: #1f7a45; color: #fff; font-size: 40px; line-height: 72px; }
.done .who { font-size: 17px; }
.done .never { background: #fff8d9; border-left: 4px solid var(--tc-yellow); padding: 10px 12px; text-align: left; font-size: 15px; }
.send { display: grid; gap: 10px; margin: 16px 0; }
.share-note { font-size: 14px; color: var(--muted); margin: 0; min-height: 1.2em; }
.privacy { font-size: 14px; color: var(--muted); }
.done .check { justify-content: center; font-size: 15px; }

/* ---- the first page ---- */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 28px; }
@media (max-width: 700px) { .doors { grid-template-columns: 1fr; } }
.door-card { border: 2px solid var(--ink); border-radius: 12px; padding: 18px; background: #fff; }
.door-card h2 { margin: 0 0 6px; font-size: 20px; color: var(--ink); }
.door-card p { margin: 0 0 12px; }
.door-card.soon { border-style: dashed; border-color: var(--tc-field-line); }
.door-card.soon h2 { color: var(--muted); }
.soon-tag { display: inline-block; font: 800 11.5px var(--tc-display); letter-spacing: .12em; text-transform: uppercase; background: var(--panel);
  padding: 3px 8px; border-radius: 4px; color: var(--muted); }
.maker { background: var(--panel); border-radius: 12px; padding: 18px 16px 8px; }
.maker h2 { margin: 0 0 4px; font-size: 20px; color: var(--ink); }
.made { display: grid; gap: 10px; margin: 10px 0 16px; }
.made output { display: block; word-break: break-all; font: 13.5px var(--tc-mono); background: #fff; border: 1.5px solid var(--tc-field-line);
  border-radius: 8px; padding: 10px 12px; }

/* ---- the privacy page ---- */
.notice h2 { font-size: 19px; color: var(--ink); margin: 24px 0 6px; }
.notice p, .notice li { max-width: 62ch; }

/* ---- the collect page ---- */
.link-box { display: block; word-break: break-all; font: 13px var(--tc-mono); background: #fff; border: 1.5px solid var(--tc-field-line);
  border-radius: 8px; padding: 10px 12px; margin: 8px 0; max-height: 7.5em; overflow: auto; }
.link-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.picks { border: 0; padding: 0; margin: 0 0 16px; }
.picks legend { font: var(--tc-label-font); color: var(--tc-label-ink); margin-bottom: 6px; }
.pick-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.pick-list .check { margin: 0 0 10px; }
.done-setup { text-align: center; }
.done-setup .card { text-align: left; }
.done-setup .tick { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: #1f7a45; color: #fff; font-size: 40px; line-height: 72px; }
.card.danger { border: 2px solid #b3261e; background: #fff; }
.card.danger h2 { color: #b3261e; }
.btn.really { background: #b3261e; }