/* Brand tokens shared with theclubupproject.com and the structure chart —
   Montserrat, the blue and the yellow — but deliberately NOT the site's
   comic-book treatment. This is a form somebody fills in at a venue under time
   pressure; halftone behind a data-entry grid would be hostile. */
:root {
  --brand: #1c208b;
  --accent: #fcc200;
  --ink: #1c1c1c;
  --muted: #5b5b66;
  --page: #ffffff;
  --wash: #f2f2f6;
  --line: #d8d8de;
  --radius: 8px;
  --focus: 0 0 0 3px rgba(28, 32, 139, 0.25);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--wash);
  line-height: 1.45;
}
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }

.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
h1 { font-size: 1.75rem; margin: 0; color: var(--brand); }
.lede { margin: 4px 0 0; color: var(--muted); font-size: .95rem; }
.back { color: var(--brand); font-weight: 600; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.back:hover { text-decoration: underline; }

h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--brand); margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 20px 0 4px; color: var(--brand); }

.card { background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.card.sitting { border-left: 5px solid var(--accent); }

.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.field { display: block; margin-bottom: 10px; }
.field-label { display: block; font-size: .75rem; font-weight: 600; margin-bottom: 4px; }
.hint, .note { color: var(--muted); font-size: .75rem; }
.hint { display: block; margin-top: 3px; font-style: italic; }
.note { margin: 2px 0 8px; }

input, select, textarea {
  width: 100%; font: inherit; font-size: .9rem; padding: 8px 9px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--page); color: inherit;
}
textarea { resize: vertical; min-height: 120px; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--brand); }

button { font: inherit; cursor: pointer; }
.act {
  background: var(--brand); color: #fff; border: none; border-radius: 6px;
  padding: 11px 18px; font-weight: 600; font-size: .95rem;
}
.act:disabled { opacity: .45; cursor: not-allowed; }
.ghost { background: var(--page); color: var(--brand); border: 2px solid var(--brand); border-radius: 6px; padding: 8px 14px; font-weight: 600; font-size: .85rem; }
.link { background: none; border: none; color: var(--brand); font-weight: 600; font-size: .85rem; text-decoration: underline; padding: 2px; }
.remove, .close { background: none; border: none; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: 2px 6px; }
.remove:hover, .close:hover { color: #b00; }

/* The grid. One row per contest, so the whole day is visible at once and a
   date that differs from the rest announces itself. */
.scroll { overflow-x: auto; margin-bottom: 12px; position: relative; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 760px; }
th { background: var(--brand); color: #fff; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; padding: 9px 8px; text-align: left; font-weight: 600; }
td { border-bottom: 1px solid var(--line); padding: 7px 8px; vertical-align: middle; }
td select, td input { border-color: transparent; background: transparent; }
td select:hover, td input:hover { border-color: var(--line); }
td select:focus, td input:focus { background: var(--page); }
.num { text-align: center; } .num input { width: 68px; text-align: center; }
.total { font-weight: 700; }
tfoot td { background: var(--wash); font-weight: 600; }
/* The contest cell holds the longest text on the row — a club name plus a contest
   type — and with columns sized to their content it took width from the cells beside
   it until "15 October 2026" wrapped onto two lines. Pinned, so the caption wraps
   inside its own cell instead of pushing the day about. */
th:first-child { width: 32%; }
.prints {
  display: block; font-size: .68rem; color: var(--muted); font-style: italic;
  padding: 0 9px; overflow-wrap: break-word;
}

/* Row order is print order, so the controls for it sit with the row. */
.order { white-space: nowrap; text-align: center; width: 1%; }
.move {
  background: none; border: none; color: var(--muted);
  font-size: .9rem; line-height: 1; padding: 3px 2px;
}
.move:hover:not(:disabled) { color: var(--brand); }
.move:disabled { opacity: .25; cursor: default; }

/* Visible to a screen reader, not on the page.
   Absolutely positioned, so it is laid out against the nearest positioned
   ancestor and NOT clipped by a scrolling one in between. The single span of
   this class sits in the contests table, which is 760px wide inside a 328px
   scroller on a phone — so it was being placed at x=742 and dragging the whole
   document 352px wider than the screen, header, buttons and all. The `.scroll`
   panel is positioned now, which puts this back inside the box that clips it
   (#94). `left: 0` keeps it out of the far corner wherever it is used next. */
.sr {
  position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* An inherited value is text, not a control — quiet until you click it. */
.inherit {
  display: flex; align-items: center; gap: 6px; width: 100%; white-space: nowrap;
  background: none; border: 1px dashed var(--line); border-radius: 6px;
  padding: 7px 9px; color: var(--muted); font-style: italic; font-size: .85rem; text-align: left;
}
.inherit:hover { border-color: var(--brand); color: var(--brand); }
.arrow { margin-left: auto; font-style: normal; }
.override { display: flex; align-items: center; gap: 4px; }
.revert { background: none; border: none; color: var(--muted); font-size: 1rem; padding: 2px 4px; }
.revert:hover { color: var(--brand); }

.actions { background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.count { font-size: 1.05rem; font-weight: 600; }
.count b { font-size: 1.6rem; color: var(--brand); }
.printing { font-size: .85rem; color: var(--muted); margin: 6px 0 14px; }
.printing b { color: var(--ink); }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.busy { font-weight: 600; color: var(--brand); margin: 6px 0 0; }
.problem { color: #b00; font-weight: 600; font-size: .85rem; margin-top: 10px; }

/* Not an error — the certificates were produced and are correct. It is a job the
   operator has to finish by hand, so it wears the accent rather than the red. */
.caution {
  margin-top: 14px; padding: 12px 14px; font-size: .82rem;
  background: #fffaea; border-left: 4px solid var(--accent); border-radius: 4px;
}
.caution b { display: block; margin-bottom: 2px; }
.caution ul { margin: 8px 0; padding-left: 20px; }
.caution li { margin-bottom: 2px; }
.caution p { margin: 8px 0 0; color: var(--muted); }
.caution .which { color: var(--muted); font-style: italic; }
.advanced { flex: 1 1 340px; }
.advanced summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--muted); padding: 10px 0; }
.advanced[open] summary { color: var(--brand); }
.check { display: flex; align-items: center; gap: 8px; font-size: .85rem; margin-bottom: 10px; }
.check input { width: auto; }

/* A native <dialog>, so most of the UA's own styling has to be undone: it centres
   a dialog and sizes it to its contents, and this one is a full-height panel down
   the right-hand edge. Being modal it sits in the top layer, so it needs no z-index
   to stay above the form. */
.drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(420px, 100%); max-width: 100%; height: 100%; max-height: 100%;
  background: var(--page); color: inherit;
  border: none; border-left: 4px solid var(--brand);
  padding: 22px; overflow-y: auto; box-shadow: -10px 0 30px rgba(0,0,0,.14);
}
/* The page behind a modal dialog is inert but still scrolls, which reads as the
   drawer having come loose from it. */
.drawer::backdrop { background: rgba(28, 32, 139, .28); }
html:has(dialog.drawer[open]) { overflow: hidden; }
.drawer .close { position: absolute; top: 12px; right: 14px; font-size: 1.5rem; }
.drawer .row3 { grid-template-columns: 1fr; }
.drawer .tally { font-weight: 600; margin: 18px 0 14px; }

.foot { margin-top: 28px; font-size: .75rem; color: var(--muted); }
.foot p { margin: 0 0 8px; }
.confirm { color: var(--ink); }

@media (max-width: 760px) {
  .row3 { grid-template-columns: 1fr; }
  .top { flex-direction: column; }
  main { padding: 16px 12px 48px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }