/* The Designer, dressed like the shop: cream paper, ink, mint, Anton headings and Inter text. */

@font-face {
  font-family: "Anton";
  src: url("/static/fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #141414;
  --muted: #5c574d;
  --line: #d8d0bf;
  --cream: #f4efe4;
  --paper: #fbf8f2;
  --charcoal: #1a1a1a;
  --mint: #8edcbc;
  --mint-hover: #74cfaa;
  --mint-deep: #1e7a57;
  --mint-soft: #e3f5ec;
  --red: #b3261e;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Film grain for the dark header, and a torn paper edge under it (the shop's hero has both). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'%3E%3Cpath d='M0 16V9l6-3 5 4 6-5 7 4 6-5 6 4 5-2 6 5 6-4 7 2 6-5 6 4 7-2 6 4 6-5 6 3 6-4 5 3 6-3 6 3v10z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.5 var(--text);
  color: var(--ink);
  background: var(--cream);
}

header.site {
  position: relative;
  padding: 18px 16px 30px;
  text-align: center;
  background: var(--charcoal) var(--grain);
}
header.site::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 16px;
  background: var(--cream);
  -webkit-mask: var(--torn) repeat-x left bottom / 120px 16px;
  mask: var(--torn) repeat-x left bottom / 120px 16px;
}
/* A placeholder wordmark until KeepTix's logo files arrive. */
header.site .logo { display: inline-block; font: italic 700 26px/28px var(--display); color: #fff; }
main { max-width: 860px; margin: 0 auto; padding: 22px 16px 64px; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; }
h1 { font-size: 44px; margin: 4px 0 6px; }
h2 { font-size: 26px; margin: 0; }
h3 { font-size: 20px; margin: 0; }
h1 em, h2 em { font-style: normal; color: var(--mint-deep); }
.intro p { margin: 0 0 18px; color: var(--muted); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 18px;
  margin-bottom: 20px;
}
.message h1, .message h2 { margin-bottom: 10px; }
.head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }

button {
  font: 700 14px/1.2 var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 16px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--mint-soft); }
button.primary { background: var(--mint); border-color: var(--mint); }
button.primary:hover:not(:disabled) { background: var(--mint-hover); border-color: var(--mint-hover); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--mint-deep); outline-offset: 2px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 10px; }

/* Ticket 1, Ticket 2, ... */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs button { padding: 7px 12px; font-size: 12px; border-color: var(--line); }
.tabs button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Concert / Sports / Your own lines */
.kind { display: inline-flex; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.kind button { border: 0; border-radius: 0; padding: 8px 14px; font-size: 12px; }
.kind button + button { border-left: 2px solid var(--ink); }
.kind button.on { background: var(--mint); }

/* Classic / Bold, and the six colors */
.look-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid var(--paper); background: var(--swatch);
  box-shadow: 0 0 0 2px var(--line); }
.swatch:hover:not(:disabled) { background: var(--swatch); box-shadow: 0 0 0 2px var(--ink); }
.swatch.on { box-shadow: 0 0 0 3px var(--ink); }
.look-name { font-weight: 700; font-size: 14px; }

.preview { margin: 0 0 16px; }
.preview svg { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 10px 24px #0003, 0 2px 5px #0002; }
.preview:empty { aspect-ratio: 450 / 162; background: var(--mint-soft); border-radius: 4px; }
/* Keep the ticket in view while typing in the fields below it, no taller than a third of the
   screen. In a shop's frame this never sticks (the frame doesn't scroll); the shop page pins its
   own copy instead (the Shopify block's ticket-designer.js). */
.card > .preview { position: sticky; top: 0; z-index: 1; background: var(--paper); padding: 10px 0 14px; margin: 0 0 8px; }
.card > .preview svg { max-width: calc(35vh * 450 / 162); margin: 0 auto; }

fieldset { border: 0; padding: 0; margin: 0 0 10px; }
legend { font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-deep); margin-bottom: 10px; padding: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.field { margin-bottom: 12px; }
.field label, .line-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
input[type="text"], input:not([type]), input[type="date"], input[type="time"] {
  font: inherit;
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-transform: uppercase; /* tickets print in capitals */
}
input:hover { border-color: #bfb59f; }
input[aria-invalid="true"] { border-color: var(--red); }
input[type="checkbox"] { accent-color: var(--mint-deep); }
.note { font-size: 13px; color: var(--muted); margin: 4px 0 0; min-height: 0; }
.note.error, .errors { color: var(--red); }
.errors { margin: 4px 0 0; padding-left: 20px; font-size: 14px; }

.review-ticket { padding: 14px 0; border-top: 2px dashed var(--line); }
.review-ticket:first-of-type { border-top: 0; }
.confirm { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 4px; font-weight: 700; }
.confirm input { margin-top: 3px; width: 20px; height: 20px; flex: none; }

.status { font-size: 14px; color: var(--muted); margin: 10px 0 0; min-height: 1.5em; }
.status.bad { color: var(--red); }

@media (max-width: 520px) {
  h1 { font-size: 34px; }
  .card { padding: 14px; box-shadow: 4px 4px 0 var(--ink); }
  .actions { flex-direction: column-reverse; } /* full-width buttons, the main one (last in each row) on top */
}

/* DIY lines: text, size, remove. */
.line { margin-bottom: 10px; }
.line-row { display: flex; gap: 8px; align-items: center; }
.line-row input { flex: 1; min-width: 0; }
.line-row select { font: inherit; padding: 10px 8px; border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.line-row .remove { padding: 8px 12px; font-size: 18px; line-height: 1; border-color: var(--line); }
.line-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; }
.line-actions .note { margin: 0; }

/* On a shop's product page: no header, no page margins, the shop's own background around the cards.
   Room for the cards' offset shadows. The page makes the frame as tall as the designer, so the frame
   never scrolls: without this, a frame a few pixels short shows a scrollbar beside the designer. */
html.embed { overflow: hidden; }
body.embed { background: transparent; }
body.embed main { max-width: none; padding: 0 6px 6px 0; }
body.embed .card:last-child { margin-bottom: 0; }

/* On a product page: how many tickets, how they're seated, and their seats. */
.note.lead { margin: -4px 0 12px; }
.note.showing { text-align: center; margin: -8px 0 12px; }
legend.sub { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.stepper { display: inline-flex; border: 2px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.stepper:focus-within { border-color: var(--mint-deep); }
.stepper button { border: 0; border-radius: 0; padding: 0 16px; font-size: 20px; letter-spacing: 0; }
.stepper input { width: 64px; border: 0; border-radius: 0; text-align: center; font-weight: 700; }
.stepper input:focus-visible { outline: 0; }
.seating { margin-bottom: 12px; }
.choice { display: flex; gap: 10px; align-items: center; padding: 5px 0; cursor: pointer; font-size: 15px; }
.choice input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--mint-deep); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0 10px; }
.review-ticket h3 .times { color: var(--mint-deep); }