/*
 * Group Members: this page's own styles.
 *
 * Why it is a file rather than a <style> block in app.html.
 *
 * cPanel's virus scanner refused to accept app.html four times:
 *
 *     Sanesecurity.Phishing.Pay.5799.UNOFFICIAL FOUND
 *
 * On 13 September Codex localised it by uploading cumulative prefixes of
 * the file. The first eighth was already rejected, and the head above the
 * style block is only 315 bytes of it - so whatever the signature matches
 * was inside these rules. Sanesecurity's phishing signatures target HTML,
 * and a stylesheet is not HTML, so moving them here takes the matched text
 * out of the file being scanned as a page.
 *
 * Nothing is hidden from the scanner: this file is uploaded and scanned
 * like every other. What changed is where the rules live.
 *
 * Loaded AFTER theme.css, which supplies the custom properties these rules
 * refer to, and which therefore has to come first.
 *
 * October 2026, the shared component system. This file used to hold three
 * generations of the same page on top of each other: .card at 8px corners and
 * then 24px, a global button rule whose hover turned navy buttons green, and
 * Georgia, Sora, Inter and system fonts on one screen. It is in two parts now:
 *
 *   1. The sign-in screen. Kept as it was at first; Peter, 13 October 2026,
 *      asked for the signed-out screens to take the new look too, so it now
 *      uses the shared type, card, fields and buttons like everything else.
 *      The steps and the wording are unchanged.
 *   2. The signed-in Group Members page, which uses theme.css's shared type,
 *      cards, buttons and summary cards (body class sp-app) and keeps here
 *      only the layout that is this page's own.
 */

/* This page has always reset every margin and padding. Its own components
   set theirs explicitly, so the reset stays rather than every <p> on the page
   gaining a margin it never had.
   Text fields are left out of it. Their padding comes from theme.css's shared
   rule, which is written with :where() and so carries no weight; this reset
   came later in the cascade and set it back to 0, putting the typing hard
   against the left edge of every box (Peter, 14 October 2026). */
* { margin: 0; box-sizing: border-box; }
:where(*:not(input, select, textarea)) { padding: 0; }
.hidden { display: none; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.tab-content.active { animation:reveal .35s ease both; }
@keyframes reveal { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce) { .tab-content.active { animation:none; } }
.admin-only[hidden] { display:none !important; }

/* =====================================================================
 * 1. The sign-in screen
 * ===================================================================== */
.container { max-width:var(--sp-page-max); margin:0 auto; padding:var(--sp-page-pad-y) var(--sp-page-pad-x) 48px; }
/* The page's outer wrapper. It used to be a big white panel with a deep
   shadow; the form's own card is the panel now, as on every other page. */
.card { margin:0; padding:0; background:transparent; border:0; box-shadow:none; }
#authForm { max-width:460px; margin:var(--sp-space-6) auto; color:var(--ink); }
/* The logo is the brand on this screen, centred above the card. */
#authForm .programme-brand { margin-left:auto !important; margin-right:auto !important; object-position:center !important; }
.sign-in-strapline { margin:0 auto var(--sp-space-5); max-width:44ch; color:var(--muted); text-align:center; }
#authForm .tab-content { padding:var(--sp-pad-spacious); background:var(--surface); border:1px solid var(--line); border-radius:var(--sp-radius-card); box-shadow:var(--sp-shadow-card); }
#authForm h2 { margin-bottom:var(--sp-space-5); color:var(--ink); font:var(--sp-weight-medium) var(--sp-text-h1)/var(--sp-leading-h1) var(--sp-font); }
#authForm .tab-content > p { margin:0 0 var(--sp-space-4); color:var(--muted); font-size:var(--sp-text-control); }
#authForm .form-group { margin-bottom:var(--sp-space-4); }
#authForm label { display:block; margin-bottom:6px; color:var(--muted); font:var(--sp-weight-medium) var(--sp-text-control)/var(--sp-leading-control) var(--sp-font); }
#authForm input:not([type=checkbox]), #authForm select { width:100%; }
#authForm .sp-button { margin-top:var(--sp-space-2); }
#authForm a { color:var(--navy); font-size:var(--sp-text-control); }
.error, .success { display:none; margin-bottom:var(--sp-space-4); padding:var(--sp-space-3) var(--sp-space-4); border:1px solid; border-radius:var(--sp-radius-control); font-size:var(--sp-text-control); }
.error { background:var(--sp-danger-bg); border-color:var(--sp-danger-line); color:var(--sp-danger-ink); }
.success { background:var(--sp-success-bg); border-color:var(--sp-success-line); color:var(--sp-success-ink); }
/* Signed in, a message can come from anywhere on the page - Add Member at the
   top, trusted devices at the foot - so it floats where it will be seen. */
html.sp-has-nav .card > .error, html.sp-has-nav .card > .success { position:fixed; z-index:9000; left:50%; transform:translateX(-50%); bottom:calc(var(--sp-shell-bottom) + var(--sp-space-4)); width:max-content; max-width:min(560px, calc(100vw - 32px)); margin:0; box-shadow:0 10px 30px rgba(16,42,67,.18); }

/* =====================================================================
 * 2. Signed in: Group Members
 * ===================================================================== */
.is-signed-in .container { max-width:var(--sp-page-max); padding:var(--sp-page-pad-y) var(--sp-page-pad-x) 48px; }
.is-signed-in .card { padding:0; margin:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
.dashboard { display: none; position:relative; }
.dashboard-title { display:none; }
.group-logo-top { display:none; position:absolute; top:0; right:0; z-index:5; width:auto; height:96px; max-width:180px; object-fit:contain; border-radius:var(--sp-radius-control); background:#fff; padding:4px; border:1px solid var(--line); }

/* The add-a-member form, above the directory. A grid on a desktop. */
#membersTab .form-group { margin:0 0 14px; max-width:460px; }
#membersTab .form-group label { display:block; margin-bottom:6px; color:var(--muted); font:var(--sp-weight-medium) var(--sp-text-control)/var(--sp-leading-control) var(--sp-font); }
#membersTab input, #membersTab select { width:100%; }
#membersTab > .member-primary-action { justify-self:start; margin:4px 0 22px; }
.member-admin-note { margin:18px 0 0; color:var(--muted); font-size:var(--sp-text-control); }

.member-directory { margin-top:var(--sp-space-6); }
.member-directory-header { display:flex; justify-content:space-between; gap:18px; align-items:end; margin-bottom:14px; }
.member-directory-header p { margin:2px 0 0; color:var(--muted); font-size:var(--sp-text-control); }
.section-filter { margin:0; min-width:190px; color:var(--muted); font:var(--sp-weight-medium) var(--sp-text-control)/var(--sp-leading-control) var(--sp-font); }
.section-filter select, .section-filter input { display:block; width:100%; margin-top:6px; }
.member-controls { display:flex; gap:12px; flex-wrap:wrap; align-items:end; }

/* Pagination replaces the old inner scroll area, so a long member list
   no longer sits behind an endless scroll. */
.members-list { list-style:none; }
.member-pager { display:flex; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.member-pager span { color:var(--muted); font-size:var(--sp-text-control); }

.section-logo { width:26px; height:26px; display:block; border-radius:5px; object-fit:cover; }
.section-logo.beavers { background:#6f6f73; } .section-logo.cubs { background:#d51e3a; }
.section-logo.scouts { background:#087b69; } .section-logo.ventures { background:#ee8d1c; }
.section-logo.rovers { background:#7a388e; } .section-logo.scouter { background:#123c66; }
.section-logo.unknown { background:#82919a; }
.member-row-click { cursor:pointer; }
/* The members table (from the ScoutHQ build, 27 October 2026). Headings stay in
   view; on a desktop the columns scroll sideways; on a phone each row is a card. */
.member-table-wrap { overflow-x:auto; margin:0 0 var(--sp-space-4); border:1px solid var(--line); border-radius:var(--sp-radius-control); background:var(--surface); }
.member-table { width:100%; border-collapse:collapse; font-size:var(--sp-text-control); }
.member-table th, .member-table td { padding:8px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.member-table thead th { position:sticky; top:0; z-index:1; background:var(--surface-quiet); color:var(--muted); font-weight:var(--sp-weight-medium); font-size:var(--sp-text-small); white-space:nowrap; }
.member-table tbody tr.member-row-click:hover { background:var(--surface-quiet); }
.member-table th[scope="row"] { font-weight:var(--sp-weight-medium); }
.member-table .member-row-name { color:var(--navy); }
/* Each column's two sort arrows (27 October 2026). The one in use is navy. */
.member-sort { display:inline-flex; align-items:center; gap:6px; }
.member-sort-buttons { display:inline-flex; flex-direction:column; gap:1px; }
.member-sort-button { display:block; min-width:18px; padding:0 3px; border:0; border-radius:4px; background:none; color:#a7b3c4; font-size:9px; line-height:10px; cursor:pointer; }
.member-sort-button:hover { color:var(--navy); background:var(--surface); }
.member-sort-button[aria-pressed="true"] { color:var(--navy); }
.member-sort-button:focus-visible { outline:var(--sp-focus-light); outline-offset:1px; }
.member-table .section-logo { display:inline-block; width:22px; height:22px; object-fit:contain; vertical-align:middle; margin:0 8px 0 0; }
.member-table-section-cell { white-space:nowrap; }
.member-guardian { min-width:180px; overflow-wrap:anywhere; }
/* Grey, not red (27 October 2026): with few details filled in yet, red made most rows look like errors. */
.member-missing { color:var(--muted); }
.member-table-actions { text-align:right; white-space:nowrap; }
.member-table-actions .member-actions { display:inline-flex; gap:4px; }
.member-table-actions .member-actions button.danger { color:var(--sp-danger-ink); }
.member-table-host .empty-members { color:var(--muted); }
@media (max-width: 640px) {
    .member-table-wrap { overflow-x:visible; border:0; background:none; }
    .member-table, .member-table tbody, .member-table tr, .member-table th, .member-table td { display:block; width:100%; box-sizing:border-box; }
    /* On a phone the headings are a row of sort controls above the cards. */
    .member-table thead { display:block; }
    .member-table thead tr { display:flex; flex-wrap:wrap; gap:6px; padding:0 0 10px; }
    .member-table thead th { position:static; display:inline-flex; width:auto; padding:4px 6px 4px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
    .member-table thead th.member-actions-head { display:none; }
    .member-sort-button { min-width:28px; font-size:11px; line-height:14px; padding:2px 6px; }
    .member-table tr.member-row-click { margin:0 0 8px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--sp-radius-control); background:var(--surface); }
    .member-table th, .member-table td { border:0; padding:3px 0; }
    /* Each label beside its value, so a card stays short. */
    .member-table td[data-label] { display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr); gap:8px; }
    .member-table td[data-label]::before { content:attr(data-label); color:var(--muted); font-size:var(--sp-text-small); }
    /* A phone's card leaves out what is not filled in, rather than a row of dashes. */
    .member-table td.is-empty { display:none; }
    .member-table-actions { text-align:left; padding-top:6px; }
}
@media (max-width:560px) {
    .member-directory-header { align-items:stretch; flex-direction:column; }
    .section-filter { min-width:0; flex:1 1 100%; }
}
/* Dense desktop member workspace */
@media (min-width:701px) {
    #membersTab { display:grid; grid-template-columns:minmax(280px, 1fr) minmax(280px, 1fr); gap:10px 18px; align-items:end; }
    #membersTab > .sp-page-header { grid-column:1/-1; margin-bottom:8px; }
    #membersTab > .form-group { margin:0; max-width:none; }
    #membersTab > .member-primary-action { margin:0; align-self:end; }
    #membersTab > .member-admin-note { grid-column:1/-1; }
    .member-directory { grid-column:1/-1; margin-top:8px; }
}

/* The Logout button Peter approved: red, right-aligned, at the foot. */
.logout-btn { display:block; width:max-content; margin:34px 0 4px auto; padding:12px 18px; border:0; border-radius:10px; background:#c9283e; color:#fff; font:var(--sp-weight-medium) 14px/20px var(--sp-font); cursor:pointer; }
.logout-btn:hover { background:#a61e32; }
.logout-btn:focus-visible { outline:var(--sp-focus-light); outline-offset:3px; }
@media (max-width:700px) { .logout-btn { margin-top:26px; } }

/* --- The two panels: a member's details, and their attendance ----------- */
.modal { display: none; position: fixed; z-index: 100; inset: 0; background: rgba(7,7,63,.55); overflow-y: auto; }
.modal.active { display: block; }
.modal-content { position:relative; width:90%; max-width:820px; margin:4vh auto; padding:24px; background:var(--surface); border-radius:var(--sp-radius-card); box-shadow:var(--sp-shadow-dialog); }
.close-modal { float:right; margin:-4px -4px 0 12px; }
@media (max-width:700px) { .modal-content { width:94%; padding:20px 16px; } }

/* One young person's attendance, in the modal. */
.attendance-lead { margin:4px 0 18px; color:var(--muted); }
.attendance-stats { margin:0 0 20px; }
.attendance-list { list-style:none; margin:0; padding:0; display:grid; gap:4px; max-height:46vh; overflow:auto; }
.attendance-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 92px; align-items:center;
                  gap:10px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--sp-radius-control); font-size:var(--sp-text-control); }
.attendance-venue { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attendance-mark { text-align:right; font-weight:var(--sp-weight-medium); }
.attendance-mark.here { color:var(--navy); }
.attendance-mark.away { color:var(--muted); }
.attendance-empty { color:var(--muted); }
@media (max-width:560px) { .attendance-row { grid-template-columns:minmax(0,1fr) 80px; } .attendance-venue { grid-column:1; grid-row:2; } }

/* The member details popout. Peter, 24 September: clicking a member's row
   shows what the Group holds on them, rather than only their attendance. */
.md-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:16px; }
.md-head h2 { margin:0; font-size:var(--sp-text-h1); line-height:var(--sp-leading-h1); }
.md-sub { margin:2px 0 0; color:var(--muted); font-size:14px; }
.md-number { color:var(--muted); font-size:var(--sp-text-control); text-align:right; padding-top:4px; }
.md-number span { color:var(--ink); }
.md-none { color:var(--muted); font-style:italic; }
.md-section { margin:0 0 10px; color:var(--muted); font:var(--sp-weight-medium) var(--sp-text-small)/var(--sp-leading-small) var(--sp-font);
  text-transform:uppercase; letter-spacing:.06em; }
.md-grid { display:grid; grid-template-columns:132px 1fr; gap:6px 12px; font-size:var(--sp-text-control); margin-bottom:22px; }
.md-label { color:var(--muted); }
.md-box { background:var(--page-bg); border-radius:var(--sp-radius-control); padding:12px 14px;
  font-size:var(--sp-text-control); margin-bottom:22px; }
.md-big { font-size:24px; font-weight:var(--sp-weight-medium); margin-right:12px; }
.md-quiet { color:var(--muted); }
.md-pill { display:inline-block; background:#fff; border:1px solid var(--line);
  border-radius:var(--sp-radius-pill); padding:4px 12px; margin:0 8px 8px 0; font-size:14px; }
.md-badge { display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--line); }
.md-badge:last-child { border-bottom:0; }
.md-chip { background:#fff; border:1px solid var(--line); border-radius:var(--sp-radius-pill);
  padding:2px 10px; font-size:12px; white-space:nowrap; }
/* Badge artwork, added 25 September. Peter asked for the real badges on a
   member's page rather than text: the Adventure Skills badge for the level
   she holds, with "Backwoods 1" under it, and her Special Interest badges
   on one line per section. */
.md-name { display:flex; align-items:center; gap:10px; }
.md-section-logo { width:30px; height:30px; flex:0 0 30px; object-fit:cover;
  border-radius:6px; }
.md-badges { display:flex; flex-wrap:wrap; gap:14px 16px; }
/* One box for both, because the two sets of artwork are different shapes -
   Adventure Skills square, Special Interest a landscape triangle - and
   sizing them separately would make one half look more important. */
.md-badge-tile { position:relative; margin:0; width:74px; text-align:center; }
.md-badge-tile img { display:block; width:74px; height:60px; object-fit:contain; }
.md-badge-tile figcaption { margin-top:5px; font-size:12px; line-height:1.25;
  color:var(--ink); font-weight:var(--sp-weight-medium); }
/* Three can be earned in one area in one section, so they collapse to one
   picture with the count on it. */
.md-badge-count { position:absolute; top:-5px; right:2px; min-width:18px; height:18px;
  padding:0 4px; border-radius:var(--sp-radius-pill); background:var(--navy); color:#fff;
  font:var(--sp-weight-medium) 11px/18px var(--sp-font); box-shadow:0 0 0 2px #fff; }
/* One line per section, oldest first, and only for sections she has
   something in. */
.md-sib-line { display:flex; align-items:flex-start; gap:14px; padding:12px 0;
  border-top:1px solid var(--line); }
.md-sib-line:first-child { border-top:0; padding-top:0; }
.md-sib-line:last-child { padding-bottom:0; }
.md-sib-section { flex:0 0 74px; padding-top:4px; color:var(--muted);
  font:var(--sp-weight-medium) var(--sp-text-small)/var(--sp-leading-small) var(--sp-font);
  text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:520px) {
  .md-sib-line { flex-direction:column; gap:6px; }
  .md-sib-section { flex:1 1 auto; padding-top:0; }
}
.md-foot { margin:4px 0 0; padding-top:14px; border-top:1px solid var(--line);
  color:var(--muted); font-size:var(--sp-text-control); }
@media (max-width:520px) {
  .md-head { flex-direction:column; }
  .md-number { text-align:left; }
  .md-grid { grid-template-columns:1fr; gap:2px 0; }
  .md-label { margin-top:8px; }
}

/* Editing a member. */
.edit-member-panel .form-group { margin:0 0 14px; }
.edit-member-panel label { display:block; margin-bottom:6px; color:var(--muted); font:var(--sp-weight-medium) var(--sp-text-control)/var(--sp-leading-control) var(--sp-font); }
.edit-member-panel input, .edit-member-panel select { width:100%; }