/* Help Desk's own styles. The club palette, type and top bar come from
   style.css, shared with the other club apps; everything here is the furniture
   this app needs on top - stat tiles, status badges, the ticket page. */

/* A ticket's own head: its number and status at the left, the status
   buttons at the right - kept where they are, with the reply form. */
.ticket-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ticket-head h1 { margin-bottom: 2px; }
.ticket-head .subtitle { margin: 0; }

/* A page's head (views/_page-head.ejs), the same in all four club apps: the
   heading and its key numbers always shown, and under them a folded "About
   this page and actions" holding the description and the buttons in their
   four groups - Go to, WhatsApp, Download, Send - each a row with its label
   at the left. */
details.page-head { margin: 0 0 16px; }
.page-head > summary { cursor: pointer; color: var(--primary); font-size: 0.92rem; }
.page-head > summary .muted { margin-left: 4px; }
.page-head .subtitle { margin: 10px 0 12px; max-width: 760px; }
.page-head-numbers { color: var(--muted); margin: 0 0 6px; }
.page-head-groups { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.page-head-group { display: flex; gap: 6px 8px; align-items: center; flex-wrap: wrap; }
.page-head-group-label { flex: none; min-width: 84px; font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.page-head-group-name { text-transform: none; letter-spacing: 0; font-weight: 400; }
.page-head-group .inline-form { display: inline; margin: 0; }
h1 .heading-tag { font-size: 0.55em; vertical-align: middle; }



/* The headline numbers. Four tiles read as one row on a laptop and wrap to two
   columns on a phone rather than shrinking to illegibility. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-attention { border-left-color: var(--gold); }
.stat-good { border-left-color: #2e7d4f; }

.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; }

.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  background: #eef1f6;
  color: var(--muted);
  text-transform: capitalize;
}

.row-actions a, .row-actions button.quiet { font-size: 0.85rem; margin-right: 8px; }
form.inline { display: inline; margin: 0; }
/* A button that needs a little room above it, where it follows a box or a
   choice rather than a field with its own margin. */
.gap-above { margin-top: 12px; }
.gap-above-small { margin-top: 0.4rem; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 16px; }

label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 10px; }
label.check input { width: auto; margin: 0; flex-shrink: 0; }


.code-input { letter-spacing: 0.4em; font-size: 1.3rem; text-align: center; }

.back-link {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
}
.back-link:hover { color: var(--primary); text-decoration: underline; }


/* The top bar holds more links than the shared style.css expected. On a
   laptop-width screen they wrap onto a second line rather than pushing Log out
   off the page; below 640px the menu collapses as before. */
@media (min-width: 641px) {
  header.topbar { gap: 16px; }
  header.topbar .brand { flex: none; }
  header.topbar nav { flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; min-width: 0; }
}

/* A stat tile that opens what it counts. */
a.stat-link { color: inherit; text-decoration: none; }
a.stat-link:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
a.stat-link:hover .stat-label { text-decoration: underline; }

/* A row's actions in a "⋮" menu, as in Club Contacts and Team Sheets. The list is
   position:fixed (placed by _action-menu-script) so the scrolling table never
   clips it or widens for it. */
.row-menu-cell { width: 1%; text-align: right; }
.action-menu { position: relative; display: inline-block; }
.action-menu > summary { list-style: none; cursor: pointer; padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 1.1rem; line-height: 1.4; color: var(--muted); user-select: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu > summary:hover, .action-menu[open] > summary { border-color: var(--primary); color: var(--primary); }
.action-menu-list { position: fixed; visibility: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); min-width: 180px; z-index: 30; padding: 4px; text-align: left; }
.action-menu-item { display: block; padding: 8px 10px; border-radius: 6px; font-size: 0.88rem; color: var(--text); text-decoration: none; white-space: nowrap; }
.action-menu-item:hover { background: var(--bg); }
.action-menu-list form { margin: 0; }
button.action-menu-item { width: 100%; margin: 0; background: none; border: none; text-align: left; font: inherit; font-size: 0.88rem; color: var(--text); cursor: pointer; }
button.action-menu-item:hover { background: var(--bg); }
.action-menu-item.danger { color: var(--danger); }
tr.editing td { background: #fff8e6; }

/* The Users form, the width of the list below it: email, name, mobile and what
   they see on one line, the permissions under them. */
.user-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; align-items: end; }
.user-fields input, .user-fields select { margin-bottom: 12px; }
.user-checks { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.user-form.editing { border-color: var(--gold); }

/* style.css styles text, email and date inputs; these match them. */
input[type="tel"], input[type="search"], textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 16px;
  background: var(--card);
  color: var(--text);
}
textarea { resize: vertical; }

.small { font-size: 0.82rem; }
.break { overflow-wrap: anywhere; }
.plain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

/* Ticket statuses: new wants somebody, open has somebody, closed is done. */
.badge-new { background: #fff4d9; color: #8a5a00; }
.badge-open { background: #e8eefb; color: #274690; }
.badge-closed { background: #eaf7ee; color: #1f6b3e; }
.badge-app { background: #f0eef6; color: #4a4363; text-transform: none; }
.badge-category { background: #eef4f0; color: #3d5a47; text-transform: none; }
.badge-lg { font-size: 0.85rem; vertical-align: 3px; margin-left: 6px; }



/* A whole row opens its ticket, not just the number. */
.tickets-table tbody tr { cursor: pointer; }
.tickets-table tbody tr:hover td { background: #faf6f5; }
.tickets-table tr.status-closed td { color: var(--muted); }
.tickets-table td.problem { min-width: 260px; }

.status-switch { display: flex; gap: 8px; margin: 0; }
.status-switch button { text-transform: capitalize; }
.status-switch button[disabled] { opacity: 1; cursor: default; }

/* The ticket: what's wrong and what's been said on the left, who and where
   on the right; one column on a phone. */
.ticket-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 800px) { .ticket-layout { grid-template-columns: 1fr; } }
.description { white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; }
.facts { width: 100%; }
.facts th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.82rem; white-space: nowrap; padding-right: 12px; vertical-align: top; width: 1%; }
.facts td, .facts th { padding-top: 6px; padding-bottom: 6px; }
.comment { border-left: 3px solid var(--border); padding: 4px 0 4px 12px; margin-bottom: 14px; }
.comment-reply { border-left-color: #274690; }

/* A card holding several stacked actions (a form, a note, a disclosure)
   rather than one plain button - the refund card's Approve/Deny/Mark paid.
   Its own inputs skip the ordinary margin-bottom, since the flex gap
   already spaces them. */
.action-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.action-stack input[type="text"], .action-stack textarea { margin-bottom: 0; width: 100%; }
.action-stack form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.action-stack form input[type="text"] { width: 110px; flex: 0 0 auto; }
.action-stack details { width: 100%; }
.action-stack summary.btn { list-style: none; width: fit-content; }
.action-stack summary.btn::-webkit-details-marker { display: none; }
.action-stack details form { margin-top: 8px; flex-direction: column; align-items: stretch; }
/* The member's side of the conversation, set off from the club's. */
.comment-member { border-left-color: var(--gold); background: #fffaf2; border-radius: 0 6px 6px 0; }
.badge-reply { background: #e8eefb; color: #274690; }
.badge-member { background: #fff4d9; color: #8a5a00; text-transform: none; }
.comment-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }

/* Three tiles always sit in one row - on a phone they'd otherwise stack and
   push the list off the first screen. */
.stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .stat { padding: 10px 12px; }
  .stat-value { font-size: 1.2rem; }
}

/* Close opens a box under it for the closing message, since closing emails
   the member. */
.status-switch { align-items: flex-start; }
details.close-ticket { position: relative; }
details.close-ticket summary { list-style: none; cursor: pointer; }
details.close-ticket summary::-webkit-details-marker { display: none; }
details.close-ticket form {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(360px, 90vw);
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
details.close-ticket textarea { margin-bottom: 8px; }
details.close-ticket form button { width: 100%; }
details.close-ticket form button { text-transform: none; }

/* Adding a passkey. The name box is a name, not an essay, and the buttons sit
   in a row under it with the lesser choice as a secondary - two full-strength
   buttons stacked read as two equal decisions, which they are not. */
.passkey-name, .passkey-code { max-width: 260px; }
.passkey-code { max-width: 140px; letter-spacing: 0.12em; }
.passkey-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; }
.passkey-actions form { display: inline; margin: 0; }
.passkey-actions button { margin: 0; }

/* The member side: the "what would you like to do?" chooser, a registration to
   pick a refund against, and the arithmetic behind what it is worth. Appended
   as its own block rather than folded into the rules above, which belong to the
   admin pages. */
.choice-list { display: grid; gap: 12px; max-width: 640px; }
a.card.choice { display: block; text-decoration: none; color: inherit; }
a.card.choice strong { display: block; margin-bottom: 4px; }
a.card.choice:hover { border-color: var(--accent, #c8102e); }

label.registration {
  display: flex; gap: 10px; align-items: flex-start; font-weight: normal;
  border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px;
}
label.registration input { width: auto; margin-top: 3px; }
/* The text beside the radio takes the rest of the row and never more, so a
   long line wraps inside the card rather than pushing it wider. */
label.registration > span { flex: 1; min-width: 0; }
label.registration:hover { background: rgba(0, 0, 0, 0.02); }
/* The refund form's registrations, by season; earlier seasons folded away. */
.registration-season { font-size: 0.95rem; margin: 16px 0 8px; }
details.previous-seasons { margin-top: 16px; }
details.previous-seasons > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }

/* The working, line by line: the figures right-aligned so they read as a sum,
   anything the club has not set yet visibly absent rather than zero. */
table.refund-working { width: 100%; max-width: 380px; margin: 8px 0; border-collapse: collapse; }
table.refund-working caption { text-align: left; padding-bottom: 4px; }
/* Plain sentence-case labels, not the site's upper-case table headings. */
table.refund-working th {
  text-align: left; font-weight: normal; padding: 2px 8px 2px 0;
  text-transform: none; letter-spacing: normal; font-size: inherit; color: var(--text);
}
table.refund-working td { text-align: right; padding: 2px 0; white-space: nowrap; }
/* An explanation under a line wraps; only the amounts are kept on one line. */
table.refund-working tr.refund-working-note td { white-space: normal; }
table.refund-working tr.refund-working-unset td { font-style: italic; opacity: 0.7; }
table.refund-working tr.refund-working-note th, table.refund-working tr.refund-working-note td { text-align: left; padding: 0 0 4px; }
table.refund-working tr.refund-working-total th, table.refund-working tr.refund-working-total td {
  border-top: 1px solid var(--border); padding-top: 4px; font-weight: 600;
}

/* Off screen but still in the page - the feedback form's robot trap. Without
   this rule the box shows, and a person typing in it is thanked and ignored. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The feedback form: radio and tick choices wrap in a row, with an "Other"
   box on the same line. */
.feedback-form { max-width: 820px; }
.feedback-form h2 { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }
.feedback-form h2:first-of-type { margin-top: 8px; border-top: none; padding-top: 0; }
.feedback-form fieldset { border: none; padding: 0; margin: 0 0 16px; }
.feedback-form legend { font-weight: 600; font-size: 0.85rem; margin-bottom: 8px; padding: 0; }
.feedback-form .choices { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.feedback-form .choices label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.feedback-form .choices input[type="radio"], .feedback-form .choices input[type="checkbox"] { width: auto; margin: 0; }
.feedback-form .inline-other { width: 12rem; margin: 0; padding: 6px 8px; }
.feedback-form .req { color: var(--danger); }
.feedback-form .error ul { margin: 6px 0 0; padding-left: 1.2em; }
.row-form-actions { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.attachments-head { font-size: 0.95rem; margin: 16px 0 8px; }

/* How a refund request goes - five steps in a row with arrows between, on the
   refund form and on a request's own page; one column on a phone. */
.refund-steps { margin: 0 0 20px; }
.refund-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.refund-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 10px; border-radius: 10px; font-size: 0.85rem; }
.refund-step:not(:last-child)::after { content: '\2192'; position: absolute; right: -18px; top: 42%; color: var(--muted); font-size: 1.1rem; }
.refund-step.step-1 { background: #e8f0fb; } .refund-step.step-1 .refund-step-icon { background: #2563a8; }
.refund-step.step-2 { background: #e3f5f1; } .refund-step.step-2 .refund-step-icon { background: #1f8a78; }
.refund-step.step-3 { background: #fdf3d8; } .refund-step.step-3 .refund-step-icon { background: #e0a31a; }
.refund-step.step-4 { background: #f0e9fb; } .refund-step.step-4 .refund-step-icon { background: #7c4dd6; }
.refund-step.step-5 { background: #e6f1fb; } .refund-step.step-5 .refund-step-icon { background: #1e6fb8; }
.refund-step-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.refund-step-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.refund-step strong { font-size: 0.92rem; }
.refund-step-text { color: var(--text); line-height: 1.35; }
/* On a request's own page: what's behind it fades, where it is stands out. */
.refund-step.done { opacity: 0.55; }
.refund-step.skipped { opacity: 0.35; }
.refund-step.current { outline: 2px solid var(--primary); outline-offset: 2px; }
.refund-step-here { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); }
.refund-steps-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; padding: 12px 16px; background: #f4f6f9; border-radius: 10px; font-size: 0.82rem; }
.refund-steps-notes div { display: flex; flex-direction: column; gap: 2px; }
.refund-steps-notes span { color: var(--muted); }
@media (max-width: 760px) {
  .refund-steps ol { grid-template-columns: 1fr; gap: 10px; }
  .refund-step { flex-direction: row; text-align: left; flex-wrap: wrap; }
  .refund-step:not(:last-child)::after { content: none; }
  .refund-step-text { flex-basis: 100%; }
  .refund-steps-notes { grid-template-columns: 1fr; }
}

/* Refund schedule's admin fees: three stages, the inputs sitting in the row. */
table.admin-fee-ladder { width: 100%; max-width: 620px; margin: 8px 0 12px; }
table.admin-fee-ladder input { margin: 0; }
table.admin-fee-ladder td { vertical-align: middle; }
/* The date box sits in the same column as the plain dates above and below
   it, so it is sized to a date rather than stretched across the cell. */
table.admin-fee-ladder input[type="date"] { width: 11.5em; max-width: 100%; padding: 6px 8px; }
table.admin-fee-ladder input[type="text"] { width: 7em; padding: 6px 8px; text-align: right; }
table.refund-reference { font-size: 0.9rem; }
table.refund-reference th.num, table.refund-reference td.num { text-align: right; white-space: nowrap; }

table.fee-structure { width: auto; margin: 4px 0 8px; }
table.fee-structure td:not(:first-child), table.fee-structure th:not(:first-child) { text-align: right; }
table.fee-structure tr.total td { font-weight: 600; border-top: 2px solid var(--border, #ccc); }

/* A refund's own page: the request on the left, the money on the right. */
.refund-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 800px) { .refund-layout { grid-template-columns: 1fr; } }
.refund-layout h3 { font-size: 0.95rem; margin: 16px 0 6px; }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.wrap-anywhere { overflow-wrap: anywhere; }
form.inline-date { display: flex; gap: 8px; align-items: center; margin: 0; }
form.inline-date input[type="date"] { width: auto; margin: 0; }
form.inline-date button { margin: 0; }

/* The imported transactions, filtered and searched. */
table.transactions { font-size: 0.86rem; }
table.transactions td.num, table.transactions th.num { text-align: right; white-space: nowrap; }
table.transactions tr.transactions-match td { background: #fff7d6; }

.card-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card-heading h2 { margin: 0; }
.card-heading + * { margin-top: 12px; }

/* Admin: the refund pages as cards to jump to. */
/* The top bar's dropdown - Refunds. The summary reads like the links beside
   it, with a caret; the menu opens as a card below it (Venue Hire's). */
header.topbar details.nav-menu { position: relative; }
header.topbar details.nav-menu summary {
  list-style: none; cursor: pointer; opacity: 0.85; display: flex; align-items: center; gap: 5px;
}
header.topbar details.nav-menu summary::-webkit-details-marker { display: none; }
header.topbar details.nav-menu summary::after {
  content: ''; width: 0; height: 0; margin-top: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
}
header.topbar details.nav-menu[open] summary::after { transform: rotate(180deg); }
header.topbar details.nav-menu summary:hover,
header.topbar details.nav-menu[open] summary,
header.topbar details.nav-menu summary.active { opacity: 1; }
header.topbar .nav-menu-items {
  position: absolute; top: calc(100% + 12px); left: -12px; z-index: 30; min-width: 260px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
/* A menu near the right edge can open leftwards to stay on screen. */
header.topbar details.nav-menu-right .nav-menu-items { left: auto; right: -12px; }
header.topbar .nav-menu-items a {
  color: var(--text); opacity: 1; padding: 8px 10px; border-radius: 6px; font-size: 0.92rem;
}
header.topbar .nav-menu-items a:hover { background: #f4f1f0; text-decoration: none; }
header.topbar .nav-menu-items a.active { color: var(--primary); background: #f7eeed; }
header.topbar .nav-menu-items a span { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 400; }
@media (max-width: 640px) {
  header.topbar .nav-menu-items {
    position: static; box-shadow: none; border: none; background: transparent; padding: 6px 0 0 12px; min-width: 0;
  }
  header.topbar .nav-menu-items a { color: #fff; padding: 6px 0; }
  header.topbar .nav-menu-items a:hover, header.topbar .nav-menu-items a.active { background: transparent; color: #fff; }
  header.topbar .nav-menu-items a span { color: rgba(255, 255, 255, 0.7); }
}


/* What the club allows, under the working. */
form.allowances { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); display: grid; gap: 4px; }
form.allowances label.check { margin: 0; }
form.allowances input:disabled + * , form.allowances label:has(input:disabled) { color: var(--muted); }
.action-stack form label.decision-note-label { width: 100%; margin: 6px 0 0; font-weight: 600; font-size: 0.9rem; }
form.allowances label.goodwill { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }

/* Claude's assessment of a refund, beside the request. */
.card.assessment .assessment-text { font-size: 0.92rem; line-height: 1.5; }

/* The investigate flag: a bug or data issue to look into from the laptop. */
.badge.badge-investigate.bug { background: #fdecec; color: #b91c1c; }
.badge.badge-investigate.data { background: #fff1e0; color: #b45309; }
.badge.badge-investigate.done { background: #e7f6ec; color: #15803d; }
.card-heading { flex-wrap: wrap; }
form.investigate-form { margin: 0 0 0 auto; }
form.investigate-form select { width: auto; margin: 0; padding: 4px 8px; font-size: 0.85rem; }

/* A refund's decision beside its category on Tickets. */
.badge.badge-refund.approved { background: #e7f6ec; color: #15803d; }
.badge.badge-refund.paid { background: #e0f0ff; color: #1d4ed8; }
.badge.badge-refund.denied { background: #fdecec; color: #b91c1c; }

/* Files on a reply or note: photos as thumbnails, a PDF as a link. */
.comment-files { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 2px; }
.comment-file-thumb img { display: block; max-width: 180px; max-height: 140px; border: 1px solid var(--border); border-radius: 6px; }
/* The reply form's files before sending - a pasted screenshot shows here. */
.paste-files-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.paste-files-list:empty { display: none; }
.paste-file { display: flex; flex-direction: column; gap: 4px; max-width: 160px; }
.paste-file img { max-width: 160px; max-height: 120px; border: 1px solid var(--border); border-radius: 6px; }
.paste-file .small { overflow-wrap: anywhere; }
#reply input[type=file] { margin-bottom: 12px; }

/* The filters every list page shares (JPI-3, as Club Volunteers';
   views/_filters.ejs, lib/filters.js). The search box on its own line; what
   is on as chips with "Showing N of M"; the rest folded under More filters,
   tick lists in a grid, Apply and Clear all bottom right. */
.filters { padding: 14px 20px; }
.filters-scope { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.filters-scope label { margin: 0; }
.filters-scope select { margin: 0; width: auto; max-width: 100%; }
.filters-search { display: flex; gap: 8px; align-items: center; max-width: 560px; }
.filters-search input { margin: 0; flex: 1 1 auto; width: 100%; }
.filters-search noscript { display: flex; }
.filters-state { display: flex; gap: 6px 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; min-height: 1.4em; }
.filters-state:empty { display: none; }
.filters-showing { font-size: 0.88rem; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 10px; border: 1px solid var(--primary); border-radius: 999px; background: #fbf4f3; color: var(--primary); font-size: 0.82rem; text-decoration: none; line-height: 1.3; }
.chip:hover, .chip:focus-visible { background: var(--primary); color: #fff; }
.chip-x { font-weight: 700; font-size: 1rem; line-height: 1; }
.filters-more { margin-top: 10px; }
.filters-more > summary { cursor: pointer; color: var(--primary); font-size: 0.92rem; }
.filters-on { color: var(--muted); }
.filters-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 20px; margin-top: 12px; }
.filters-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.filters-group legend, .filters-field label { padding: 0; margin: 0 0 4px; font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.filters-field input { margin: 0; }
.filters-group .tick { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 4px 0; font-weight: 400; font-size: 0.92rem; cursor: pointer; }
.filters-group .tick input { margin: 3px 0 0; flex: none; width: auto; }
.filters-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
/* A lit tile is red through: its labels go white too, not grey on red. */
a.stat-on, a.stat-on:hover, a.stat-on:focus-visible { background: var(--primary); color: #fff; border-color: var(--primary); }
a.stat-on .stat-label { color: #fff; }
.stat-note { text-transform: none; letter-spacing: 0; }
/* While the server is asked again for a search, the list fades a little. */
[data-swap].swapping { opacity: 0.55; transition: opacity 0.15s; }
@media (max-width: 640px) {
  .filters { padding: 12px 14px; }
  .filters-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .filters-actions { justify-content: stretch; }
  .filters-actions > * { flex: 1; text-align: center; }
}

/* The x that empties a search box (public/search-clear.js, as the other club
   apps'): inside the box at its right, in the iPhone's shape, in place of the
   browser's own (hidden, so there are never two). Its height is set by the
   script, to the box's middle. */
.search-clear-wrap { position: relative; vertical-align: middle; }
.search-clear-wrap > input { padding-right: 40px; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: var(--text); color: var(--card); font-size: 16px; font-weight: 700; line-height: 22px; text-align: center; cursor: pointer; box-shadow: none; }
.search-clear:hover { background: var(--text); color: var(--card); }
/* Shown once something is typed: the button rule's display would otherwise
   outrank the browser's own [hidden]. */
.search-clear[hidden] { display: none; }
/* A bigger target than it looks, for a thumb. */
.search-clear::before { content: ''; position: absolute; inset: -10px; }
/* A filter form inside a card already (the transactions browser) sits flat
   in it rather than drawing a second card. */
.card .filters.card { border: 0; box-shadow: none; padding: 0; margin: 0 0 12px; background: none; }

/* Ask BlazerBot: the question, the answer and its sources, and the club's
   list of what has been asked. The same classes as the other three apps'. */
.help-bot { max-width: 760px; }
.help-bot textarea { width: 100%; }
.help-bot-docs { font-size: 0.85rem; }
.help-bot-docs .badge { margin: 2px 2px 2px 0; text-decoration: none; }
.help-bot-note { font-size: 0.85rem; margin-top: -4px; }
.help-bot-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.help-bot-sources { font-size: 0.88rem; margin-top: 0; padding-left: 1.2em; }
.help-list { list-style: none; margin: 0; padding: 0; }
.help-bot-asked { padding: 12px 0; border-top: 1px solid var(--border); }
.help-bot-asked:first-child { border-top: 0; }
.help-bot-asked details { font-size: 0.9rem; }
.help-list-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.help-list-desc { margin: 6px 0; overflow-wrap: anywhere; }
.help-when { font-size: 0.8rem; }
.badge.help-bot-down { background: #fdecec; color: #b91c1c; }
.badge.help-bot-up { background: #e7f6ec; color: #15803d; }
.badge.help-bot-warn { background: #fff1e0; color: #b45309; }

/* Ask BlazerBot as a chat (JPI-83, as in Club Volunteers): the asker's
   messages on the right, BlazerBot's answers on the left, then the box for
   the next message. */
.help-chat-turn { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.help-chat-me { align-self: flex-end; max-width: 85%; background: var(--primary); color: #fff; border-radius: 14px 14px 4px 14px; padding: 8px 14px; }
.help-chat-me p { margin: 0; white-space: pre-line; }
.help-chat-bot { align-self: flex-start; max-width: 92%; background: var(--bg); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 10px 14px; }
.help-chat-bot > p:last-child, .help-chat-bot > ul:last-child, .help-chat-bot > form:last-child { margin-bottom: 0; }
.help-chat-who { margin: 0 0 4px; font-size: 0.8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.help-chat-form { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }
.help-chat > p.muted + .help-chat-form { border-top: 0; padding-top: 0; }
@media (max-width: 640px) { .help-chat-bot { max-width: 100%; } }

/* BlazerBot's face beside each of its answers (JPI-82): the avatar is the
   head in a cream badge, so it reads on a light bubble and in dark mode. */
.help-chat-who { display: flex; align-items: center; gap: 8px; }
.help-chat-avatar { width: 40px; height: 40px; flex: none; }
/* Faded where the documents didn't hold the answer. */
.help-chat-avatar.is-faded { opacity: 0.45; filter: grayscale(0.6); }
/* On Questions asked: the face beside what BlazerBot said. */
.help-asked-answer { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
.help-asked-answer > div { flex: 1; min-width: 0; }
.help-asked-answer > div > p:first-child { margin-top: 0; }

/* The full mascot on Ask BlazerBot: at the right of the title, standing down
   over the top edge of the chat's card - only as far as the card's own
   padding, so it never covers the first message. It comes first in the page
   so that on a phone it can float beside the title with the words running
   round it; on a wider screen it is put last. */
.help-bot-head { display: flex; align-items: flex-end; gap: 24px; }
.help-bot-head-text { flex: 1; min-width: 0; }
.help-bot-head-text > p:last-child { margin-bottom: 14px; }
.help-bot-mascot { order: 2; width: 150px; height: auto; flex: none; margin-bottom: -22px; position: relative; z-index: 1; }
@media (max-width: 640px) {
  .help-bot-head { display: block; }
  .help-bot-head::after { content: ''; display: block; clear: both; }
  .help-bot-mascot { float: right; width: 96px; margin: 0 0 6px 10px; }
}

/* The top bar's shortcut to BlazerBot (JPI-82): a pill with its face and
   "Ask BlazerBot", right after the app's name, outlined in gold on the Ask
   page. It is the logo's height, so the bar is no deeper for it. The words
   drop before the bar's links would wrap - sooner on the long bar of the
   people who work tickets - and on a phone it is the face alone, a 44px
   round button beside the menu button. */
header.topbar .ask-bot {
  display: flex; align-items: center; gap: 8px; flex: none; box-sizing: border-box;
  height: 40px; padding: 3px 14px 3px 3px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff; font-weight: 600; font-size: 0.92rem; white-space: nowrap;
}
header.topbar .ask-bot:hover { background: rgba(255, 255, 255, 0.22); text-decoration: none; }
header.topbar .ask-bot[aria-current] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
header.topbar .ask-bot img { width: 32px; height: 32px; display: block; }
/* Measured as somebody who works tickets and manages users, with room for
   Refunds in the bar: the words fit beside one row of links from about
   1100px; a member's bar is short. */
@media (max-width: 1139px) {
  header.topbar .ask-bot-long { padding: 3px; }
  header.topbar .ask-bot-long .ask-bot-words { display: none; }
}
@media (max-width: 899px) {
  header.topbar .ask-bot { padding: 3px; }
  header.topbar .ask-bot .ask-bot-words { display: none; }
}
/* It sits beside the app's name and the links keep to the right: the bar
   needn't spread its items. */
@media (min-width: 641px) {
  header.topbar { justify-content: flex-start; }
  header.topbar nav { margin-left: auto; }
}
@media (max-width: 640px) {
  header.topbar .ask-bot { width: 44px; height: 44px; justify-content: center; margin: 0 12px 0 auto; }
  header.topbar .ask-bot img { width: 38px; height: 38px; }
}
/* Its face beside the Help menu's own entry. */
header.topbar .nav-menu-items a.nav-bot { display: flex; align-items: center; gap: 10px; font-weight: 600; }
header.topbar .nav-menu-items a.nav-bot img { width: 30px; height: 30px; flex: none; }

/* The page's one Back (views/_back.ejs), at its head. */
p.back-line { margin: 0 0 10px; font-size: 0.92rem; }