/* Hole-in-One frame ordering — public order page.
   Visual language borrowed from the GGMS course pages and the /ggms-ig/ admin:
   deep green, gold, cream, Georgia headings. Copperplate is reserved for the
   masthead and the artwork itself, so the customer sees the engraving face
   before they ever reach the proof.

   The page ground and masthead are the club's deep green; the cards the
   customer TYPES into are cream. Filling in a form on a dark ground is the
   worst case for a phone in sunlight at a golf club, and the proof — a
   photograph — sits better on paper than on green. Two palettes, so anything
   inside .step must take its colour from the cream set (--ink/--muted/--label),
   never from --cream/--dim, which are for text on the green. */

:root {
  --gd: #14301f;          /* deep green, page ground */
  --gm: #1f4a30;          /* mid green, cards */
  --gl: #2d5a3d;          /* line/border green */
  --gold: #c9a84c;
  --goldl: #e8c870;
  --cream: #f5f1e6;
  --dim: #b9c7bd;
  --err: #ff9a8a;

  /* the cream card set */
  --paper: #f6f1e2;       /* card ground */
  --paper2: #fffdf6;      /* inputs, tiles — a shade above the card */
  --ink: #16311f;         /* body text on cream */
  --muted: #5c6b60;       /* hints, secondary text on cream */
  --line: #ddd2b6;        /* borders on cream */
  --label: #2c5539;       /* field labels + headings on cream */
  --errd: #a8291d;        /* errors on cream */

  --radius: 10px;
  --wrap: 900px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--gd);
  color: var(--cream);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ── masthead ─────────────────────────────────────────────────────────────── */
.masthead {
  text-align: center;
  padding: 44px 20px 30px;
  border-bottom: 1px solid var(--gl);
  background: linear-gradient(180deg, #102718, var(--gd));
}
.masthead .eyebrow {
  font-family: 'Copperplate CC', Georgia, serif;
  letter-spacing: .22em;
  font-size: 13px;
  color: var(--goldl);
  text-transform: uppercase;
}
.masthead h1 {
  font-family: 'Copperplate CC', Georgia, serif;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: clamp(28px, 7vw, 46px);
  margin: 10px 0 12px;
  text-transform: uppercase;
}
.masthead .sub {
  max-width: 520px;
  margin: 0 auto;
  color: var(--dim);
  font-size: 15px;
}

.draft-banner {
  max-width: var(--wrap);
  margin: 18px auto -6px;
  padding: 12px 16px;
  border: 1px solid #8a6d1f;
  background: #3a2f10;
  color: #f0dfa8;
  border-radius: var(--radius);
  font-size: 14px;
}

/* ── layout ───────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 26px 20px 60px; }

.step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 22px;
  color: var(--ink);
  box-shadow: 0 6px 22px rgba(0,0,0,.22);
}
.step[hidden] { display: none; }   /* [hidden] loses to display:flex/block otherwise */

.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.step-head h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: normal;
  margin: 0;
  color: var(--label);
}
.step-head .num {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: #14301f;
  font-weight: 700;
  display: grid; place-items: center;
  font-size: 15px;
}
.sub-head { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.sub-head h2 { font-size: 18px; }

.lede { color: var(--muted); margin: -6px 0 18px; }

/* ── fields ───────────────────────────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field > label,
.field > span.lbl {
  display: block;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--label);
  font-weight: 600;
  margin-bottom: 7px;
}
.field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }

input[type=text], input[type=email], input[type=tel], input[type=date] {
  width: 100%;
  padding: 11px 12px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--paper2);
  color: var(--ink);
  font-size: 16px;                 /* 16px or iOS zooms on focus */
  font-family: inherit;
}
input::placeholder { color: #9aa79d; }
input:focus { outline: 2px solid var(--label); outline-offset: 1px; }
input.bad { border-color: var(--errd); }

/* The date field's own calendar button. Small and easy to miss at the browser
   default, and it is the one control on this form that a member on a phone
   actually needs to hit — so scale it up and give it room. Chrome/Edge/Safari
   expose it as this pseudo-element; Firefox draws its own and ignores all of
   this, which is why the field itself opens the picker too (see app.js). */
/* Capped, unlike the text fields: full width strands the calendar button an
   inch off the right edge of a laptop, nowhere near the date it belongs to. */
input[type=date] { max-width: 340px; padding-right: 8px; }
input[type=date]::-webkit-calendar-picker-indicator {
  width: 30px;
  height: 30px;
  padding: 3px;
  margin-left: 6px;
  border-radius: 6px;
  cursor: pointer;
  opacity: .75;
}
input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: #ece4cd; }

/* The date read back in words, so a mis-keyed 07/12 vs 12/07 is obvious before
   it reaches the engraving. */
.date-long {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--label);
  font-weight: 600;
}
.date-long[hidden] { display: none; }
.date-long.bad { color: var(--errd); }

.hint { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.err { color: var(--errd); font-size: 14px; margin: 0 0 14px; font-weight: 600; }
.err[hidden] { display: none; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .grid2 { grid-template-columns: 1fr; } }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   inputs, and none of them read this comment. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── hole picker ──────────────────────────────────────────────────────────── */
.holes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.hole {
  position: relative;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--paper2);
  display: block;
}
.hole input { position: absolute; opacity: 0; pointer-events: none; }
/* 12/5 = 2.4:1, the photo window on the mount — not the 2:1 sheet. Matches the
   crop build_web_photos.py applies, so a thumbnail shows the same picture the
   proof will. */
.hole img { display: block; width: 100%; aspect-ratio: 12 / 5; object-fit: cover; }
.hole .cap {
  padding: 8px 10px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.hole .cap b { font-weight: 600; }
.hole .cap span { color: var(--muted); }
.hole:hover { border-color: var(--line); }
.hole.sel { border-color: var(--gold); background: #f2e9cf; }
.hole:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── chips (tees) ─────────────────────────────────────────────────────────── */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--line);
  background: var(--paper2);
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
}
.chip input:checked + span { background: var(--gold); border-color: #a8862f; color: #14301f; font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--label); outline-offset: 2px; }

/* ── sizes ────────────────────────────────────────────────────────────────── */
.sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.size { position: relative; }
.size input { position: absolute; opacity: 0; pointer-events: none; }
.size span {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: var(--paper2);
}
.size b { display: block; font-size: 17px; margin-bottom: 3px; }
.size em { font-style: normal; color: var(--muted); font-size: 14px; }
.size .scale { display: block; margin-top: 10px; height: 4px; background: var(--line); border-radius: 2px; }
.size input:checked + span { border-color: var(--gold); background: #f2e9cf; }
.size input:checked + span .scale { background: #a8862f; }
.size input:focus-visible + span { outline: 2px solid var(--label); outline-offset: 2px; }

/* ── proof ────────────────────────────────────────────────────────────────── */
.proof { margin: 0 0 18px; }
.proof canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;             /* holds the box before the canvas is sized */
  border-radius: 6px;
  /* The sheet is white paper, so the placeholder behind an unloaded canvas is
     white too — a dark box would flash a frame that doesn't exist. The shadow
     is what separates the mount from the page. */
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.proof.small canvas { max-width: 460px; }

.summary { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 20px; font-size: 15px; }
.summary dt { color: var(--label); font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; align-self: center; }
.summary dd { margin: 0; }

/* ── sign-off ─────────────────────────────────────────────────────────────── */
.signoff { border: 1px solid var(--gold); border-radius: 8px; padding: 18px; margin-bottom: 18px; background: #fdf8e9; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin-bottom: 18px; }
/* Dark green, not gold: this is the tick that makes the customer responsible
   for the spelling, so "on" has to be unmistakable — gold on cream reads as
   half-lit. */
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--label); }
.check span { font-size: 15px; }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn {
  appearance: none;
  border: 0;
  border-radius: 7px;
  background: var(--gold);
  color: #14301f;
  font: 600 16px/1 inherit;
  font-family: inherit;
  padding: 14px 26px;
  cursor: pointer;
}
.btn:hover { background: var(--goldl); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); font-weight: 400; }
.btn.ghost:hover { border-color: var(--label); background: transparent; }
.btn:focus-visible { outline: 2px solid var(--label); outline-offset: 2px; }

/* ── done ─────────────────────────────────────────────────────────────────── */
.done h2 { font-family: Georgia, serif; color: var(--label); font-weight: normal; margin-top: 0; }
.done .ref { font-size: 19px; }
.done .ref strong { font-family: 'Copperplate CC', Georgia, serif; letter-spacing: .1em; color: var(--label); }

.foot { text-align: center; padding: 0 20px 50px; color: var(--dim); font-size: 13px; }
.foot p { margin: 4px 0; }