/* Gordon FC Certificate Maker
   ---------------------------------------------------------------------------
   Two visual layers live in this file, and they must not bleed into each other:

   1. The tool: a broadsheet, printed-matter aesthetic. Warm newsprint ground,
      raised paper panels, heavy rules, a display numeral per section. The tool
      should feel like the thing it produces, not like a settings screen.

   2. The certificate itself: fixed at 794 x 558 px, which is exactly A5
      landscape at 96dpi, so it prints at 100% with no resampling. Nothing in
      that layer may depend on the viewport or the printed sheet drifts away
      from the preview. That block is at the bottom and is deliberately
      untouched by the styling above it.
   --------------------------------------------------------------------------- */

:root {
  /* Ground and paper. Warm rather than neutral grey: the page is pretending
     to be newsprint, and a cold grey reads as a settings dialog. */
  --paper:        #eeebe4;
  --paper-raised: #fbfaf7;
  --paper-sunk:   #e4e0d6;

  --ink:          #14120f;
  --ink-mid:      #45403a;
  --ink-soft:     #6d675f;
  --hairline:     #d9d4c9;
  --hairline-firm:#c4bdae;

  --accent:       #0088b0;
  --accent-hover: #1186ac;
  --accent-deep:  #00637f;
  --accent-tint:  #e4f5fb;

  /* The preview sits on a dark ground so the white certificates read as
     physical objects on a light table. On a pale page they vanish. */
  --stage:        #1d1b18;
  --stage-edge:   #33302b;

  --danger:       #a8301f;
  --danger-tint:  #fbf1ef;

  --navy:         #16256b;
  --gold:         #e3b341;
  --header-muted: #9fb2e8;
  --footer-tint:  #f2f5fc;
  --mascot-tint:  #eef2fc;
  --plate-ink:    #1b2a5e;

  --shadow-panel: 0 1px 2px rgba(20, 18, 15, .05), 0 6px 18px rgba(20, 18, 15, .06);
  --shadow-pop:   0 8px 28px rgba(20, 18, 15, .18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Any later `display` rule silently beats the hidden attribute, which has
   already caused two "why is this empty box here" bugs. Settle it once. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* A faint paper grain. Cheap, inline, and it stops large flat areas from
   looking like an untextured screenshot. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.app-root {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 32px 96px;
}

a { color: var(--accent-deep); text-underline-offset: 2px; }
a:hover { color: var(--accent); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Everything arrives in sequence rather than all at once. Small move, short
   distance: this is a work tool, not a landing page. */
@media (prefers-reduced-motion: no-preference) {
  .masthead, .panel, .faq, footer {
    animation: rise .5s cubic-bezier(.2, .7, .3, 1) backwards;
  }
  .panel:nth-of-type(1) { animation-delay: .05s; }
  .panel:nth-of-type(2) { animation-delay: .1s; }
  .panel:nth-of-type(3) { animation-delay: .15s; }
  .faq { animation-delay: .2s; }
  footer { animation-delay: .25s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- masthead */

.masthead { margin-bottom: 40px; }

.masthead-top { display: flex; align-items: center; gap: 18px; }
.masthead-crest { width: 62px; height: auto; flex: none; }

.kicker {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 600;
}

h1 {
  font-size: clamp(38px, 6vw, 58px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-top: 6px;
}

.lede {
  margin-top: 18px;
  max-width: 54ch;
  font-size: 19px;
  color: var(--ink-mid);
}

.lede-note {
  margin-top: 8px;
  max-width: 58ch;
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
}

.masthead-rules { margin-top: 24px; }
.masthead-rules div:first-child { height: 4px; background: var(--ink); }
.masthead-rules div:last-child  { height: 1px; background: var(--ink); margin-top: 3px; }

/* ------------------------------------------------------------------ panels */

.panel {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  box-shadow: var(--shadow-panel);
  padding: 26px 30px 32px;
  margin-bottom: 26px;
}

.panel-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
}

/* The certificate's own display face, used as tool furniture. It ties the
   chrome to the artefact and gives each section a real anchor. */
.panel-num {
  font-family: 'Lilita One', Impact, sans-serif;
  font-size: 30px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: .02em;
  flex: none;
}

.panel-head h2 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  flex: none;
}

.panel-rule {
  flex: 1;
  height: 1px;
  background: var(--hairline-firm);
  align-self: center;
}

/* ------------------------------------------------------------------ fields */

.setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  max-width: 800px;
}

.field { display: flex; flex-direction: column; min-width: 0; }
/* Any direct child of the grid can span it, not just .field: the team and
   mascot pair is a wrapper, and .field.full would silently skip it. */
.setup-grid > .full { grid-column: 1 / -1; }

.field label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 6px;
  color: var(--ink);
}

/* The help button sits beside the label rather than inside it. Inside, a click
   on the button is also a click on the label, which forwards a second click to
   the input and instantly dismisses the tooltip that just opened. */
.label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.label-row label { margin-bottom: 0; }

.input {
  font-family: inherit;
  font-size: 15px;
  padding: 9px 11px;
  border: 1px solid var(--hairline-firm);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.input:hover { border-color: var(--ink-soft); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2345403a' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 32px;
  cursor: pointer;
}
textarea.input { min-height: 62px; resize: vertical; line-height: 1.5; }

/* Clear button, tucked inside the field. Padding on the right keeps typed text
   from running underneath it. */
.input-wrap { position: relative; display: flex; }
.input-wrap .input { padding-right: 32px; }
.clear-btn {
  position: absolute;
  top: 7px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .13s, color .13s;
}
.clear-btn[hidden] { display: none !important; }
.clear-btn:hover { background: var(--paper-sunk); color: var(--ink); }
.clear-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }

/* Character limits are noise until you are actually typing in the field, so
   they only appear once it has focus. Same information, none of the clutter. */
.fine {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 5px;
  opacity: 0;
  transition: opacity .15s;
}
.field:focus-within .fine { opacity: 1; }
.line-foot .fine { margin-top: 0; }

/* ---------------------------------------------------------------- tooltips */

.tip {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--hairline-firm);
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.tip:hover, .tip[aria-expanded="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.tip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.tip-bubble {
  position: absolute;
  z-index: 60;
  max-width: 320px;
  background: var(--ink);
  color: #f4f1ea;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 11px 14px;
  border-radius: 3px;
  box-shadow: var(--shadow-pop);
}
.tip-bubble::after {
  content: "";
  position: absolute;
  top: -5px;
  left: var(--arrow-x, 16px);
  width: 10px; height: 10px;
  background: var(--ink);
  transform: rotate(45deg);
}
.tip-bubble.below::after { top: auto; bottom: -5px; }

/* ---------------------------------------------------------- buttons, chips */

.btn {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 2px;
  border: 1px solid var(--hairline-firm);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .1s;
}
.btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 9px 20px;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-primary[disabled] { background: #b3ada3; border-color: #b3ada3; cursor: progress; }

.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn-quiet:hover { background: #fff; border-color: var(--hairline-firm); }

.btn-small { font-size: 12.5px; padding: 5px 11px; }
.btn-block { width: 100%; margin-top: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.chip {
  font-family: inherit;
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink-mid);
  cursor: pointer;
  text-align: left;
  transition: background .13s, color .13s, border-color .13s;
}
.chip:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-deep); }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }

/* The eight suggestion sentences used to run five rows deep and dominated the
   section. Behind a button they cost one line until asked for. */
.line-field { margin-top: 18px; position: relative; }
.line-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  min-height: 26px;
}

.suggest-panel {
  margin-top: 8px;
  border: 1px solid var(--hairline-firm);
  border-radius: 3px;
  background: #fff;
  box-shadow: var(--shadow-panel);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}
.suggest-panel .chip {
  border: 0;
  border-radius: 2px;
  background: transparent;
  font-size: 13.5px;
  padding: 7px 10px;
  width: 100%;
}
.suggest-panel .chip:hover { background: var(--accent-tint); }

/* ------------------------------------------------------------------ roster */

.players-grid {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  gap: 34px;
}

.roster-col { min-width: 0; }

.roster { display: flex; flex-direction: column; gap: 1px; }

.roster-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 2px;
  cursor: pointer;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: background .13s, border-color .13s;
}
.roster-row:hover { background: var(--paper-sunk); }
.roster-row[aria-current="true"] {
  background: var(--accent-tint);
  border-left-color: var(--accent);
}
.roster-row .num {
  font-family: 'Lilita One', Impact, sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  width: 20px;
  flex: none;
}
.roster-row[aria-current="true"] .num { color: var(--accent-deep); }
.roster-row .title {
  flex: 1;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roster-row .remove {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 5px;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity .13s, color .13s;
}
.roster-row:hover .remove,
.roster-row[aria-current="true"] .remove { opacity: 1; }
.roster-row .remove:hover { color: var(--danger); }
.roster-row .remove:focus-visible { opacity: 1; outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }

.editor { max-width: 580px; min-width: 0; }
.editor-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.decor-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: start; }

.team-mascot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px 28px;
  align-items: start;
}
.team-mascot .warn { grid-column: 1 / -1; }

.mascot-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mascot-row .input { flex: 1 1 150px; min-width: 0; }
.mascot-row .input { max-width: 260px; }
/* Big enough to actually recognise the mascot the moment a team is chosen, and
   clickable for a proper look, the same as a certificate. */
.mascot-thumb {
  border: 0;
  padding: 0;
  background-color: transparent;
  cursor: zoom-in;
  border-radius: 3px;
  transition: transform .13s, box-shadow .13s;
  width: 56px;
  height: 56px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex: none;
}
.mascot-thumb:hover:not([disabled]) { transform: scale(1.08); }
.mascot-thumb:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }
.mascot-thumb[disabled] { cursor: default; }

/* -------------------------------------------------------- segmented control */

.seg {
  /* Sized to its options. Left to stretch it fills the whole grid cell and
     trails a large empty box after the last button. */
  align-self: start;
  display: inline-flex;
  border: 1px solid var(--hairline-firm);
  border-radius: 2px;
  overflow: hidden;
  background: #fff;
}
.seg[hidden] { display: none; }
.seg button {
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 15px;
  border: 0;
  background: transparent;
  color: var(--ink-mid);
  cursor: pointer;
  white-space: nowrap;
  transition: background .13s, color .13s;
}
.seg button + button { border-left: 1px solid var(--hairline-firm); }
.seg button:hover { background: var(--paper-sunk); }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 600; }
.seg button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-tint); }

/* ----------------------------------------------------------------- preview */

.panel-preview { padding-bottom: 26px; }

.preview-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.preview-bar .spacer { flex: 1; }
.count-line { font-size: 13px; color: var(--ink-soft); }

/* The light table. White certificates on a pale page have no edge and the
   whole section reads as empty; on a dark ground they become objects. */
.stage {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 3px;
  background:
    radial-gradient(ellipse at 50% 0%, #2a2723 0%, var(--stage) 62%);
  border: 1px solid var(--stage-edge);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, .4);
}

.cert-slot {
  position: absolute;
  left: 50%;
  top: 18px;
  transform-origin: top center;
  transition: transform .45s cubic-bezier(.22, .9, .3, 1), opacity .45s;
}
.cert-slot .cert { box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.stage { touch-action: pan-y; }
.stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.warn {
  margin-top: 12px;
  padding: 10px 13px;
  border-left: 3px solid var(--danger);
  background: var(--danger-tint);
  font-size: 13.5px;
  color: #6d1f18;
  max-width: 70ch;
  border-radius: 0 2px 2px 0;
}

.stage-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.stage-nav[hidden] { display: none; }

.nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline-firm);
  background: #fff;
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .13s, color .13s, opacity .13s;
}
.nav-btn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent-deep); }
.nav-btn[disabled] { opacity: .3; cursor: default; }
.nav-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }

.stage-dots { display: flex; gap: 7px; align-items: center; }
.dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--hairline-firm);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.dot:hover { background: var(--ink-soft); }
.dot.on { background: var(--accent); transform: scale(1.35); }
.dot:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }

/* The whole point of the tool is the print, so it gets to be unmissable. */
.print-cta {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.btn-print {
  font-family: inherit;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 15px 46px;
  border-radius: 3px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--accent-deep), 0 6px 18px rgba(0, 136, 176, .28);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.btn-print:hover { background: var(--accent-hover); }
.btn-print:active { transform: translateY(2px); box-shadow: 0 0 0 var(--accent-deep); }
.btn-print:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-tint); }
.btn-print[disabled] {
  background: #b3ada3;
  border-color: #b3ada3;
  box-shadow: none;
  cursor: progress;
}
.print-cta-note { font-size: 13px; color: var(--ink-soft); }

.mode-control { display: flex; align-items: center; gap: 10px; }
.mode-label { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }

/* A magnifier on the card that can actually be opened. At carousel scale the
   personal line is barely legible, and it is worth checking a name before
   printing twenty of them. */
.cert-slot.is-active::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(20, 18, 15, .62) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M15.5 15.5L21 21'/><path d='M10.5 7.5v6M7.5 10.5h6'/></svg>") center / 22px no-repeat;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
.cert-slot.is-active:hover::after { opacity: 1; transform: scale(1); }
/* Touch has no hover, so keep it permanently visible there. */
@media (hover: none) {
  .cert-slot.is-active::after { opacity: .9; transform: none; }
}

.zoom {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(14, 13, 11, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  animation: zoomIn .18s ease-out;
}
.zoom[hidden] { display: none !important; }
@keyframes zoomIn { from { opacity: 0; } to { opacity: 1; } }
body.zoomed { overflow: hidden; }

.zoom-frame {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  flex: none;
}
/* The certificate keeps its fixed 794x558 canvas and is scaled as a whole, so
   nothing inside it reflows and the close up matches the print exactly. */
.zoom-frame .cert { transform-origin: top left; }

/* A mascot is a plain transparent image, so it wants the dark backdrop showing
   through rather than the white sheet a certificate sits on. */
.zoom-frame.zoom-mascot {
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom-frame.zoom-mascot img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55));
}

.zoom-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}
.zoom-close:hover { background: rgba(255, 255, 255, .25); }
.zoom-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.zoom-arrow {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.zoom-arrow:hover:not([disabled]) { background: rgba(255, 255, 255, .28); }
.zoom-arrow[disabled] { opacity: .25; cursor: default; }
.zoom-arrow[hidden] { display: none !important; }
.zoom-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.zoom-hint {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
}

/* --------------------------------------------------------------------- faq */

.faq {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
}
.faq-aside {
  display: flex;
  align-items: baseline;
  gap: 12px;
  position: sticky;
  top: 28px;
}
.faq h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.faq-list { max-width: 70ch; }

.faq details {
  border-bottom: 1px solid var(--hairline);
}
.faq details:first-of-type { border-top: 1px solid var(--hairline); }

.faq summary {
  cursor: pointer;
  padding: 13px 28px 13px 0;
  font-size: 15.5px;
  font-weight: 600;
  list-style: none;
  position: relative;
  transition: color .13s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-deep); }
.faq summary:focus-visible { outline: none; color: var(--accent-deep); }

.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.6px solid var(--ink-soft);
  border-bottom: 1.6px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }

.faq details p {
  padding: 0 28px 15px 0;
  font-size: 14.5px;
  color: var(--ink-mid);
  margin-top: -2px;
}

/* ------------------------------------------------------------------ footer */

footer {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 3px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.footer-credit { font-style: italic; }
.footer-credit a { font-style: normal; font-weight: 600; }
.heart { color: var(--danger); font-style: normal; }

/* ------------------------------------------------------------- narrow view */

@media (max-width: 860px) {
  .app-root { padding: 36px 20px 72px; }
  .setup-grid { grid-template-columns: 1fr; }
  .players-grid { grid-template-columns: 1fr; gap: 24px; }
  .editor-row { grid-template-columns: 1fr; }
  .panel { padding: 22px 18px 26px; }
  .stage { height: 300px; }
  .team-mascot { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: 10px; }
  .faq-aside { position: static; }
  .btn-print { width: 100%; font-size: 17px; padding: 14px 20px; }
  .mode-control { flex-wrap: wrap; gap: 6px; }
  .zoom { padding: 10px; gap: 6px; }
  .zoom-arrow { width: 38px; height: 38px; }
  .preview-bar { gap: 10px; }
}

/* ===================================================================
   THE CERTIFICATE
   794 x 558 px is A5 landscape at 96dpi. Every value below is in those
   fixed pixels so the printed sheet matches the preview exactly.
   =================================================================== */

.cert {
  position: relative;
  width: 794px;
  height: 558px;
  background: #ffffff;
  overflow: hidden;
  font-family: 'Quicksand', 'Trebuchet MS', sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.c-display { font-family: 'Lilita One', Impact, sans-serif; font-weight: 400; }
.c-script  { font-family: 'Dancing Script', 'Brush Script MT', cursive; font-weight: 600; }

/* ---- Theme A: Classic fun ---- */

.c-trophy { position: absolute; left: 28px; top: 14px; width: 176px; }
.c-trophy img { width: 176px; display: block; }
/* Measured against the supplied trophy render: this box sits inside the
   plaque's silver frame and fully covers the "2026" baked into the artwork. */
.c-plate {
  position: absolute;
  left: 30.6%; top: 80.2%; width: 38.2%; height: 9.8%;
  background: linear-gradient(180deg, #e6e9ee, #b7bec9);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Lilita One', Impact, sans-serif;
  font-size: 15px; letter-spacing: 0.05em; color: var(--plate-ink);
  line-height: 1;
}

.c-corner-logo  { position: absolute; right: 20px; top: 12px; width: 150px; }
.c-corner-medal { position: absolute; right: 36px; top: -4px; width: 112px; }

/* background-image, not <img>, so "no mascot" renders nothing at all */
.c-mascot {
  position: absolute; right: 24px; bottom: 119px;
  width: 168px; height: 194px;
  background-size: contain; background-repeat: no-repeat; background-position: center bottom;
}

.c-col { position: absolute; left: 212px; right: 212px; top: 56px; text-align: center; }
.c-team, .c-award { font-size: 36px; line-height: 1.12; color: #141414; text-transform: uppercase; }
.c-tagline { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #3a3a3a; margin-top: 14px; }
.c-player { font-size: 52px; line-height: 1.15; color: #111111; margin-top: 46px; }
.c-rule { border-bottom: 5px dotted #1a1a1a; }
.c-line { font-size: 16px; font-weight: 600; color: #222222; margin-top: 10px; min-height: 22px; }

/* Same bounds as the text column, so the two signatures sit centred under it. */
.c-sigs { position: absolute; left: 212px; right: 212px; bottom: 96px; display: flex; justify-content: center; gap: 64px; }
.c-sig { width: 160px; text-align: center; }
/* A typed name longer than the 160px slot must not wrap: the second line would
   drop straight through the dotted rule and collide with the role label. Let a
   long signature run wide instead, the way a handwritten one would. */
.c-sig .name {
  font-size: 21px; height: 28px; color: #111111; line-height: 28px;
  white-space: nowrap; overflow: visible;
}
.c-sig .line { border-top: 2px dotted #333333; }
.c-sig .role { font-size: 13px; font-weight: 600; margin-top: 5px; color: #333333; }

.c-grass { position: absolute; left: 0; bottom: -2px; width: 100%; display: block; }
.c-ball { position: absolute; left: 36px; bottom: 22px; width: 118px; }
.c-boot { position: absolute; left: 30px; bottom: 18px; width: 160px; }

/* ---- Theme B: Club blue ---- */

.c-band { position: absolute; top: 0; left: 0; right: 0; height: 116px; background: var(--navy); }
/* The club jersey's shard camo, lifted from the shirt and reduced to a
   white-on-transparent alpha texture, so the band still takes its colour from
   --navy. Replaces the generic diagonal pinstripes. */
.c-band-stripes {
  position: absolute; top: 0; left: 0; right: 0; height: 116px;
  background-image: url("assets/jersey-pattern.png");
  background-size: 150px 150px;
  background-repeat: repeat;
}
.c-crest-disc {
  position: absolute; left: 26px; top: 15px; width: 86px; height: 86px;
  border-radius: 50%; background: #ffffff;
  display: flex; align-items: center; justify-content: center;
}
.c-crest-disc img { width: 66px; }
.c-band-left { position: absolute; left: 132px; top: 22px; right: 200px; }
.c-band-club { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; color: var(--header-muted); text-transform: uppercase; }
.c-band-team { font-size: 33px; color: #ffffff; text-transform: uppercase; line-height: 1.05; margin-top: 6px; }
.c-band-right { position: absolute; right: 28px; top: 26px; text-align: right; }
.c-band-right .label { font-size: 11px; font-weight: 700; letter-spacing: 0.28em; color: var(--header-muted); text-transform: uppercase; }
.c-band-right .value { font-size: 28px; color: #ffffff; }

.c-mascot-disc {
  position: absolute; right: 34px; top: 170px; width: 186px; height: 186px;
  border-radius: 50%; background: var(--mascot-tint);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.c-mascot-disc .art { width: 148px; height: 148px; background-size: contain; background-repeat: no-repeat; background-position: center; }

.c-col-blue { position: absolute; left: 44px; width: 480px; top: 178px; text-align: center; }
.c-col-blue .award { font-size: 38px; line-height: 1.1; color: var(--navy); text-transform: uppercase; }
.c-col-blue .tagline { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #5a6478; margin-top: 10px; }
.c-col-blue .player { font-size: 56px; line-height: 1.15; color: var(--navy); margin-top: 42px; }
.c-col-blue .gold { width: 220px; height: 3px; background: var(--gold); margin: 4px auto 0; }
.c-col-blue .line { font-size: 16px; font-weight: 500; color: #2c2c2c; margin-top: 12px; min-height: 22px; }

.c-footer-band { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: var(--footer-tint); }
.c-sigs-blue { position: absolute; left: 44px; width: 480px; bottom: 24px; display: flex; justify-content: center; gap: 64px; }
.c-sigs-blue .name {
  font-size: 21px; height: 28px; color: #1a1a1a; line-height: 28px;
  white-space: nowrap; overflow: visible;
}
.c-sigs-blue .line { border-top: 2px dotted #5a6478; }
.c-sigs-blue .role { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 5px; color: #5a6478; }
.c-stamp { position: absolute; right: 60px; bottom: 36px; white-space: nowrap; font-size: 15px; letter-spacing: 0.06em; color: var(--navy); }
.c-gold-line { position: absolute; left: 0; right: 0; bottom: 12px; height: 3px; background: var(--gold); }
.c-navy-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--navy); }

/* ===================================================================
   PRINT
   Strip the tool away, unscale the certificates, one per page.
   =================================================================== */

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .app-root { padding: 0; max-width: none; margin: 0; }
  /* Any stray margin here spills the last certificate onto an extra blank
     sheet: three 558px certificates fill three A5 pages with only 0.36mm to
     spare, so the section's 42px top margin alone is enough to overflow. */
  section { margin: 0; }
  .stage { position: static; height: auto; overflow: visible; margin: 0; }
  .cert { display: block; margin: 0; }
  .cert-slot {
    position: static;
    transform: none;
    opacity: 1;
    z-index: auto;
    transition: none;
  }
  .cert-slot .cert { box-shadow: none; }
  /* Both layouts print on A4 portrait, which is the paper a club actually has.
     One per sheet leaves the lower half blank, so there is a single straight
     cut; two per sheet fill it exactly and are cut once across the middle. */
  .mode-one .cert-slot:not(:last-child) { page-break-after: always; }
  .mode-two .cert-slot:nth-child(even):not(:last-child) { page-break-after: always; }
  .zoom { display: none !important; }
}