/* KM Club Performance, sign-in site: the forms, tables and messages of the site's own pages (sign-in, the Face ID
   offer, Who has access). Loaded after the dashboard's stylesheet (/ds/styles.css), whose header, tab row, type and
   dark and light colours every page now shares (Caroline, 28 Sep 2026, item 10); the names below point at its colours. */

:root {
  --back: var(--bg);
  --tint: var(--surface-2);
  --good: var(--green);
  --bad: var(--red);
}

* { box-sizing: border-box; }

/* A hidden thing stays hidden, whatever layout its class gives it. */
[hidden] { display: none !important; }

body.site-page {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
.site-page .masthead { padding-top: max(12px, env(safe-area-inset-top)); }
.site-page .masthead-end { display: flex; align-items: center; gap: 8px; }
.site-page .header-button[aria-current="page"] { box-shadow: var(--inset-light), inset 0 -2px 0 var(--navy-fill); }
.site-page a.tab { text-decoration: none; }
/* The line with the person's name, left-aligned at every width, as on the dashboard's strip (Caroline, 28 Sep 2026, item 3) */
.site-who { max-width: 720px; margin: 0 auto; padding: 12px 16px 0; color: var(--muted); font-size: .9375rem; text-align: left; }
.site-who a { color: var(--ink); text-underline-offset: 3px; }

main.site-main { max-width: 720px; margin: 0 auto; padding: 16px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 20px;
}
.centred { text-align: left; }

h1 { font-family: var(--display); font-weight: 500; font-size: 26px; margin: 0 0 8px; letter-spacing: -0.02em; }
h2 { font-family: var(--display); font-weight: 500; font-size: 18px; margin: 28px 0 8px; letter-spacing: -0.01em; }

.lead { margin: 0 0 16px; color: var(--muted); }
.plainly { background: var(--tint); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 0 0 20px; }
.small { font-size: 14px; }
.muted { color: var(--muted); }
.note { background: var(--tint); border-left: 3px solid var(--line); padding: 10px 12px; margin: 16px 0; }
.good { background: var(--green-soft); border-left: 3px solid var(--good); padding: 10px 12px; margin: 16px 0; }
.bad { background: var(--red-soft); border-left: 3px solid var(--bad); padding: 10px 12px; margin: 16px 0; }

button, .primary {
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
}
button.primary {
  display: block;
  width: 100%;
  padding: 15px 20px;
  background: var(--navy-fill);
  color: #fff;
  border: 0;
  min-height: 48px;
}
button.primary:disabled { opacity: 0.5; cursor: default; }
button.primary.big { font-size: 20px; padding: 20px 24px; min-height: 64px; margin: 8px 0 20px; }
button.plain, a.plain {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.danger {
  background: none;
  border: 1px solid var(--line);
  color: var(--bad);
  padding: 6px 12px;
  min-height: 36px;
}

.stack { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.stack label { font-weight: 500; font-size: 14px; }
input[type="text"], input[type="email"], select {
  font: inherit;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  min-height: 48px;
  width: 100%;
}
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 8px 0; }
legend { font-weight: 500; font-size: 14px; padding: 0 6px; }
.tick { display: flex; align-items: center; gap: 8px; font-weight: 400; padding: 6px 0; }
.tick input { width: 20px; height: 20px; }
.boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }

ul.clubs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
a.club {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  background: var(--tint);
}
.club-name { display: block; font-weight: 500; }
.club-full { display: block; font-size: 13px; color: var(--muted); }

table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); padding: 8px 6px; }
td { border-bottom: 1px solid var(--line); padding: 10px 6px; vertical-align: top; }
tr.gone td { color: var(--muted); }
.tag { font-size: 11px; background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; vertical-align: 2px; }
.doings { white-space: nowrap; }
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0 0 6px; }
form.inline select { width: auto; min-height: 36px; padding: 6px 8px; }

.foot { max-width: 720px; margin: 0 auto; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); color: var(--muted); font-size: 13px; }

@media (max-width: 600px) {
  .card { padding: 20px 16px; border-radius: 10px; }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  .people tr, .log tr, .senders tr, .received tr { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
  .people td, .log td, .senders td, .received td { border: 0; padding: 4px 2px; }
  .doings { white-space: normal; }
}

/* Reports by email, on Who has access, and the upload page (Caroline, 30 Sep 2026; specs/reports-straight-to-the-site.md). */
h3 { font-family: var(--display); font-weight: 500; font-size: 16px; margin: 20px 0 6px; }
.received { table-layout: fixed; }
.received th:nth-child(1) { width: 15%; }
.received th:nth-child(2), .received th:nth-child(3) { width: 27%; }
.received td { overflow-wrap: break-word; }
tr.held td { background: var(--red-soft); }
.tag.held { border-color: var(--bad); color: var(--bad); }
form.note-setting { display: inline-flex; flex-direction: column; align-items: flex-start; }
.note-row { display: inline-flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.tick.monday { padding: 0; font-size: 14px; white-space: nowrap; }
.tick.monday input { width: 18px; height: 18px; }
input[type="file"] { font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); width: 100%; min-height: 48px; }
button.secondary:disabled { opacity: 0.5; cursor: default; }

details.change { margin: 0 0 8px; }
details.change > summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
details.change .stack { margin: 8px 0 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--tint); }
details.change .stack button.primary { margin-top: 6px; }

/* The coverage line (session 2, 23 Sep 2026): "X of Y clubs reported for <date>", the missing clubs on tap. */
.coverage { margin: 0 0 12px; font-weight: 500; }
details.coverage summary { cursor: pointer; }
details.coverage p { margin: 6px 0 0; font-weight: 400; color: var(--muted); }

/* Sign-in screen and the Face ID offer (Caroline, 23 Sep 2026): the email box always there, Face ID beside it
   for those set up, and after a first sign-in on a device a big Yes and a small Not now. */
button.secondary {
  display: block; width: 100%; padding: 13px 20px; min-height: 48px;
  background: var(--object); color: var(--object-ink); border: 1px solid var(--object-border);
}
.or { text-align: center; color: var(--muted); font-size: 14px; margin: 14px 0 0; }
.offer { background: var(--green-soft); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 12px 0 20px; }
.offer h2 { margin-top: 0; }
.offer .not-now { display: block; margin: 12px auto 0; font-size: 14px; }

/* Send a new invitation, on the row of someone invited and not signed in yet (Caroline, 28 Sep 2026, item 11) */
button.resend { background: var(--object); color: var(--object-ink); border: 1px solid var(--object-border); padding: 6px 12px; min-height: 36px; }

/* Who has access on a laptop (NEXT-STEPS, 30 Sep 2026: the people table ran past its card): the page is wider than the others, up to 1100px, so the
   table sits inside its card; where the screen is narrower than the table, the table scrolls sideways inside the card rather than past it. */
.page-admin main.site-main, .page-admin .site-who, .page-admin .foot { max-width: 1100px; }
.table-scroll { max-width: 100%; overflow-x: auto; }
@media (max-width: 600px) { .table-scroll { overflow-x: visible; } }

/* The read-back on the upload page (Caroline, 2 Nov 2026): one column on a phone, no sideways scroll, long names wrap; the lines to check in yellow. */
.read-back-heading { font-size: 18px; margin: 20px 0 2px; }
.read-back-night { margin: 0 0 12px; color: var(--muted); }
.read-back-flags { background: var(--amber-soft); border-left: 3px solid var(--gold); padding: 10px 12px; margin: 12px 0; overflow-wrap: anywhere; }
.read-back-flags p { margin: 0 0 6px; }
.read-back-flags p:last-child { margin-bottom: 0; }
.read-back-flags ul { margin: 0 0 8px; padding-left: 18px; }
.read-back-question, .read-back-check { font-weight: 600; }
.read-back-top { margin: 12px 0; }
.read-back-top div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.read-back-top dt { color: var(--muted); }
.read-back-top dd { margin: 0; font-weight: 600; }
.read-back-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.read-back-table th, .read-back-table td { padding: 5px 6px 5px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; overflow-wrap: anywhere; vertical-align: top; }
.read-back-table thead th { font-weight: 600; }
.read-back-table .read-back-figure { text-align: right; padding-right: 0; padding-left: 6px; }
.read-back-table tbody th, .read-back-table thead th { text-transform: none; letter-spacing: normal; font-size: 14px; color: inherit; }
.read-back-table thead { display: table-header-group; }
.read-back-table tbody { display: table-row-group; }
.read-back-table tr { display: table-row; }
.read-back-table th, .read-back-table td { display: table-cell; width: auto; }
table.read-back-table { display: table; table-layout: fixed; }
.read-back-table th:first-child { width: 42%; }