/* Synod check-in
   Atkinson Hyperlegible throughout: built for low-vision legibility, which suits
   a kiosk read at arm's length by people of every age. */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --stone: #eef2f0;      /* page */
  --mist: #d3dcd8;       /* lines, quiet surfaces */
  --slate: #1b2a3a;      /* text, bar */
  --slate-soft: #4a5a68; /* secondary text */
  --pounamu: #1e6b54;    /* signed in, primary action */
  --harbour: #2c5a85;    /* already signed in */
  --kowhai: #e2a72e;     /* see the desk */
  --white: #ffffff;

  --font: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-sm: 6px;
  --radius-lg: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--slate);
  background: var(--stone);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2 { margin: 0; line-height: 1.1; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--harbour); outline-offset: 3px; }

/* ---------- Bar ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(0.75rem + env(safe-area-inset-top)) 1.25rem 0.75rem;
  background: var(--slate); color: var(--white);
}
.brand { font-weight: 700; font-size: 1rem; }
.day {
  font-size: 1rem; font-weight: 700;
  padding: 0.2rem 0.75rem; border-radius: 999px;
  background: var(--pounamu); color: var(--white);
}
.day[data-day="closed"] { background: transparent; color: #c6d0d8; border: 1px solid #56687a; font-weight: 400; }

/* ---------- Buttons ---------- */
.btn {
  font: inherit; font-weight: 700; cursor: pointer;
  border-radius: var(--radius-sm); border: 2px solid transparent;
  padding: 0.85rem 1.4rem; min-height: 3.25rem;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--pounamu); color: var(--white); }
.btn-primary:active { background: #16533f; }
.btn-quiet { background: transparent; color: var(--slate); border-color: var(--mist); font-weight: 400; }
.btn-quiet:active { background: var(--mist); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Scan view ---------- */
.scan-view {
  min-height: calc(100% - 3.5rem);
  display: flex; flex-direction: column;
  padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  gap: 1.25rem;
}
.prompt h1 { font-size: 1.75rem; }
.prompt-sub { color: var(--slate-soft); margin-top: 0.35rem; }

.camera {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 1 / 1; max-height: 62vh;
  border-radius: var(--radius-lg);
  background: var(--slate);
}
.camera video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Corner guides only, so the viewfinder reads as a target, not a box. */
.frame {
  position: absolute; inset: 18%;
  background:
    linear-gradient(var(--white), var(--white)) top left / 2.2rem 4px,
    linear-gradient(var(--white), var(--white)) top left / 4px 2.2rem,
    linear-gradient(var(--white), var(--white)) top right / 2.2rem 4px,
    linear-gradient(var(--white), var(--white)) top right / 4px 2.2rem,
    linear-gradient(var(--white), var(--white)) bottom left / 2.2rem 4px,
    linear-gradient(var(--white), var(--white)) bottom left / 4px 2.2rem,
    linear-gradient(var(--white), var(--white)) bottom right / 2.2rem 4px,
    linear-gradient(var(--white), var(--white)) bottom right / 4px 2.2rem;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
}
.camera-msg {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 1.5rem; color: var(--white); background: var(--slate);
}

.actions { display: flex; flex-direction: column; gap: 0.75rem; }
.actions .btn { width: 100%; }

.only-large { display: none; }
.only-small { display: inline; }

/* ---------- Search ---------- */
.search-view {
  padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  max-width: 44rem; margin: 0 auto;
}
.back { margin-bottom: 1.5rem; }
.search-label { display: block; font-weight: 700; font-size: 1.5rem; margin-bottom: 0.5rem; }
.search-input {
  width: 100%; font: inherit; font-size: 1.5rem;
  padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  border: 2px solid var(--slate-soft); background: var(--white); color: var(--slate);
}
.search-input:focus { outline: none; border-color: var(--pounamu); box-shadow: 0 0 0 3px rgba(30, 107, 84, 0.25); }
.search-hint { color: var(--slate-soft); margin: 0.75rem 0 1rem; }
.results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mist); }
.results li { border-bottom: 1px solid var(--mist); }
.result-btn {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: inherit; background: none; border: 0;
  padding: 1rem 0.25rem; min-height: 3.5rem;
}
.result-btn:active { background: var(--mist); }
.result-name { display: block; font-weight: 700; font-size: 1.25rem; }
.result-parish { display: block; color: var(--slate-soft); }

/* ---------- Confirm ---------- */
.confirm {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: 1.25rem;
  background: rgba(27, 42, 58, 0.55);
}
.confirm-card {
  width: 100%; max-width: 30rem;
  background: var(--white); border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.confirm-card h2 { font-size: 1.25rem; font-weight: 400; color: var(--slate-soft); }
.confirm-name { font-size: 2rem; font-weight: 700; line-height: 1.15; margin-top: 0.5rem; }
.confirm-parish { color: var(--slate-soft); margin-top: 0.25rem; }
.confirm-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- Result ----------
   The one loud moment: the whole screen turns the colour of the outcome and the
   greeting is set as large as it will go. */
.result {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; justify-content: center;
  padding: 2rem 1.5rem;
  color: var(--white); background: var(--pounamu);
  cursor: pointer;
}
.result[data-kind="already"] { background: var(--harbour); }
.result[data-kind="desk"] { background: var(--kowhai); color: var(--slate); }
.result-text { font-size: clamp(2.25rem, 9vw, 7.5rem); font-weight: 700; line-height: 1.05; max-width: 16ch; text-wrap: balance; }
.result-sub { font-size: clamp(1.1rem, 2.6vw, 2rem); margin-top: 1rem; max-width: 34ch; }
.result-sub:empty { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .result:not([hidden]) { animation: result-in 160ms ease-out; }
  @keyframes result-in { from { opacity: 0; } to { opacity: 1; } }
}

/* Staff phones: the result is a band over the top of the camera, so the next
   person can be scanned straight away. */
.result.result--band {
  inset: auto 0 auto 0; top: 0;
  padding: calc(1rem + env(safe-area-inset-top)) 1.25rem 1.25rem;
}
.result.result--band .result-text { font-size: 1.6rem; max-width: none; }
.result.result--band .result-sub { font-size: 1rem; margin-top: 0.35rem; }

/* ---------- Large screens: kiosk ---------- */
@media (min-width: 900px) {
  .only-large { display: inline; }
  .only-small { display: none; }
  .actions .btn.only-large { display: block; }

  .bar { padding: 1rem 3rem; }
  .brand, .day { font-size: 1.25rem; }

  .scan-view {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    padding: 3rem 4rem;
    gap: 2rem 4rem;
  }
  .prompt { grid-column: 1; align-self: center; }
  .scan-view:has(.camera[hidden]) .prompt { grid-column: 1 / -1; }
  .scan-view:has(.camera[hidden]) .prompt h1 { font-size: clamp(4rem, 9vw, 8.5rem); max-width: none; }
  .prompt h1 { font-size: clamp(3.5rem, 7vw, 6.5rem); letter-spacing: -0.01em; max-width: 9ch; }
  .prompt-sub { font-size: 1.6rem; margin-top: 1.25rem; max-width: 26ch; }
  .camera { grid-column: 2; grid-row: 1; max-height: 60vh; }
  .actions { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.5rem; }
  .actions .btn { width: auto; }
  .actions .btn-primary { font-size: 1.5rem; padding: 1.1rem 2rem; }

  .search-view { padding-top: 3rem; }
  .search-label { font-size: 2.25rem; }
  .search-input { font-size: 2rem; }
  .result-name { font-size: 1.5rem; }

  .result { padding: 4rem 6rem; }
}

/* Small screens: no prompt text, camera first. */
@media (max-width: 899px) {
  .scan-page .prompt { display: none; }
}

/* ---------- Login ---------- */
.login-page main {
  min-height: 100%; display: grid; place-items: center; padding: 1.5rem;
}
.login-card { width: 100%; max-width: 24rem; }
.login-card h1 { font-size: 2rem; margin-bottom: 1.5rem; }
.login-card label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.login-card input {
  width: 100%; font: inherit; font-size: 1.25rem;
  padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
  border: 2px solid var(--slate-soft); background: var(--white);
}
.login-card input:focus { outline: none; border-color: var(--pounamu); box-shadow: 0 0 0 3px rgba(30, 107, 84, 0.25); }
.login-card .btn { width: 100%; margin-top: 1rem; }
.form-error { color: #9b2c1f; margin-top: 0.75rem; min-height: 1.5em; }

/* ---------- Admin ---------- */
.admin-page { font-size: 1rem; }
.admin-main { max-width: 56rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.admin-section { padding: 1.75rem 0; border-bottom: 1px solid var(--mist); }
.admin-section:first-child { padding-top: 0; }
.admin-section h2 { font-size: 1.35rem; margin-bottom: 0.9rem; }
.admin-note { color: var(--slate-soft); margin-top: 0.6rem; }

.day-switch { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.day-switch .btn { min-width: 8.5rem; background: var(--white); border-color: var(--mist); color: var(--slate); font-weight: 400; }
.day-switch .btn[aria-pressed="true"] { background: var(--slate); border-color: var(--slate); color: var(--white); font-weight: 700; }

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.figure { background: var(--white); border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.figure-value { display: block; font-size: 2rem; font-weight: 700; line-height: 1.1; }
.figure-label { display: block; color: var(--slate-soft); }
.figure--warn { box-shadow: inset 4px 0 0 var(--kowhai); }
.sync-line { margin-top: 1rem; color: var(--slate-soft); }
.sync-error { margin-top: 0.4rem; color: #9b2c1f; }

.admin-search { width: 100%; font: inherit; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); border: 2px solid var(--slate-soft); background: var(--white); }
.admin-search:focus { outline: none; border-color: var(--pounamu); }
.people { list-style: none; margin: 1rem 0 0; padding: 0; }
.person { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--mist); }
.person-name { font-weight: 700; }
.person-parish, .person-times { color: var(--slate-soft); }
.person-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.person-actions .btn { min-height: 2.5rem; padding: 0.4rem 0.9rem; font-size: 0.95rem; }

.danger-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.75rem; }
.danger-row select, .danger-row input { font: inherit; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); border: 2px solid var(--slate-soft); background: var(--white); }
.btn-danger { background: #9b2c1f; color: var(--white); }
.admin-links { display: flex; gap: 1rem; margin-top: 2rem; }
.admin-links a { color: var(--harbour); }
.admin-label { display: block; color: var(--slate-soft); margin-bottom: 0.4rem; }