* {
  box-sizing: border-box;
}
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: #f3f5f9;
  color: #121827;
}
header, footer {
  padding: 14px 16px;
  background: #1f2937;
  color: #fff;
}
/* The company's own bar: their logo and name are the only mark on it, and an
   Admin can put an image of their choosing behind them. AhsomO's mark and the
   page's title sit in the band below — see .page-band. */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  padding: 18px 16px 20px;
}
/* Set by company-logo.js from the org's saved image. The tint on top is what
   keeps white text readable over a photo nobody vetted for contrast — it's
   part of the same background stack so no overlay element is needed, and the
   class is what stops `none` invalidating the whole declaration. */
header.header--has-image {
  background-image:
    linear-gradient(rgba(17, 24, 39, 0.62), rgba(17, 24, 39, 0.62)),
    var(--header-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
footer {
  text-align: center;
}
/* The band under the company's bar, holding AhsomO's mark and the page's own
   title. Equal outer thirds so the title is centred on the PAGE rather than
   in the space the left-hand mark leaves over. */
.page-band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px 12px;
  padding: 16px 16px 4px;
}
.page-band .logo-link {
  grid-column: 1;
  justify-self: start;
}
.page-band-titles {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}
/* Smaller than the company name above it. The two are the only headings on
   the page and the company's is meant to be the one that reads first. */
.page-band-titles h1 {
  margin: 0 0 6px;
  font-size: 1.6rem;
}
.page-band-titles p {
  margin: 0;
  color: #4b5563;
}
/* AhsomO's mark — the full wordmark now, not just the "Ah" icon, so the pill
   is sized to its width rather than a fixed square. Smaller than the
   company's and dimmed until you reach for it. On the page's own background
   now rather than the dark bar, so the tile is edged in grey — a white
   border on white would have no edge at all. */
.logo-link {
  height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e6ee;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  opacity: 0.75;
  transition: opacity 0.15s;
}
.logo-link:hover,
.logo-link:focus-visible {
  opacity: 1;
}
.logo-link img {
  height: 26px;
  width: auto;
  display: block;
}

/* The company's logo and name. Below MIN_ROW_WIDTH (see the media query
   under .company-name) there isn't room to show them side by side without
   one crowding the other or the auth badge, so the base rules here are the
   stacked fallback: logo on its own line pinned left, name centred beneath
   it — safe at any width, including the very narrowest. */
.company-logo {
  display: flex;
  flex-direction: column;
  gap: 6px 0;
  width: 100%;
}
.company-logo[hidden] {
  display: none;
}
/* Positioning context for the admin ✎, which would otherwise anchor to the
   full-width spot and end up at the far edge of the page. */
.company-logo-slot {
  position: relative;
  align-self: flex-start;
  /* Reserved here rather than as padding on .company-logo, so the logo's own
     row stays clear of the auth badge without shifting where the name below
     centres itself. Only load-bearing in the stacked layout below — the
     side-by-side layout replaces it with its own spacer. */
  max-width: calc(100% - 210px);
  min-width: 0;
}
.company-logo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The company's own name on their own bar, so it's set at heading weight
   rather than as a caption — and in white, because it sits on the dark
   header now instead of the light band. The shadow is for the photo case:
   it holds the letters apart from whatever is immediately behind them,
   which the flat tint alone can't guarantee. */
.company-name {
  align-self: center;
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 12px rgba(15, 23, 42, 0.55);
  max-width: 520px;
  word-break: break-word;
}
.company-name--editable {
  cursor: text;
  border-radius: 6px;
  padding: 1px 6px;
  outline: 2px dashed transparent;
  transition: outline 0.1s, background 0.1s;
}
.company-name--editable:hover {
  outline-color: #c4b5fd;
  background: rgba(255, 255, 255, 0.12);
}
.company-name--editable:focus {
  outline: 2px solid #c4b5fd;
  background: rgba(255, 255, 255, 0.16);
}
/* MIN_ROW_WIDTH: wide enough that logo, name, and the auth badge's reserved
   210px all fit on one line even at the name's 520px max-width, so this is
   where the stacked fallback above gives way to a single row — logo left,
   name vertically centred against its height rather than sitting under it.
   A ::after spacer mirrors the logo's own share of the row (flex: 1 1 0% on
   both), which is what puts the name on the TRUE centre of the bar rather
   than the middle of whatever space the logo leaves; the spacer's min-width
   is what guarantees that share never shrinks past the badge's own room. */
@media (min-width: 900px) {
  .company-logo {
    flex-direction: row;
    align-items: center;
    gap: 8px 20px;
  }
  .company-logo::after {
    content: '';
    flex: 1 1 0%;
    min-width: 210px;
  }
  /* flex: 1 1 0% grows the slot to match the spacer's share, which can leave
     it wider than the logo itself — display:flex + justify-content is what
     then keeps the logo pinned to the slot's own start (the bar's left
     edge) instead of .company-logo-inner centring it in that extra width.
     The stacked layout's own badge-clearance no longer applies once the
     spacer is doing that job. */
  .company-logo-slot {
    display: flex;
    justify-content: flex-start;
    align-self: auto;
    flex: 1 1 0%;
    max-width: none;
  }
  .company-name {
    align-self: auto;
  }
}
.company-logo-img {
  max-height: 132px;
  /* The 100% is what lets a wide logo scale down on a narrow screen rather
     than holding the lockup open at its natural width. */
  max-width: min(420px, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}
/* Stands in for the logo when a company hasn't set one: the name becomes the
   mark itself rather than sitting next to an empty "a logo goes here" box,
   so it's set larger than the caption version above. */
.company-wordmark {
  display: flex;
  align-items: center;
  min-height: 64px;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(15, 23, 42, 0.55);
  max-width: 620px;
  word-break: break-word;
}

/* Only an Admin is shown this, so it's an invitation, not a gap. Translucent
   rather than the light card it used to be — it sits on the dark header. */
.company-logo-placeholder {
  min-width: 220px;
  padding: 22px 20px;
  border: 2px dashed rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
}

/* Admin-only edit control, anchored to the logo's top-right corner. */
.logo-edit-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #1f2937;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.35);
  padding: 0;
  z-index: 3;
}
.logo-edit-btn:hover,
.logo-edit-btn.is-open { background: #4c1d95; }
.logo-edit-menu {
  position: absolute;
  top: 28px;
  right: -10px;
  min-width: 190px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
  padding: 6px;
  z-index: 4;
  text-align: left;
}
.logo-edit-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.9rem;
  color: #111827;
  cursor: pointer;
}
.logo-edit-item:hover { background: #eef2ff; }
.logo-edit-item--danger { color: #b91c1c; }
.logo-edit-item--danger:hover { background: #fef2f2; }
/* Separates the logo's items from the header background's — the menu covers
   two different images and the pairs read as one list without it. */
.logo-edit-divider {
  height: 1px;
  margin: 5px 8px;
  background: #e5e7eb;
}
.logo-edit-status {
  margin: 6px 4px 2px;
  font-size: 0.8rem;
  color: #4b5563;
}
.logo-edit-status--error { color: #b91c1c; }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
  display: grid;
  gap: 24px;
}
a{
  color: #de9b00;
  
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}
.feature-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 56px;
  padding: 10px 14px;
  text-align: left;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  color: #111827;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid #e5e7eb;
}
.feature-card:hover {
  background: #eef2ff;
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature-icon svg {
  width: 22px;
  height: 22px;
  fill: #4f46e5;
}
.feature-label {
  line-height: 1.25;
  font-size: 0.92rem;
}
.feature-card--hr .feature-icon svg    { fill: #7c3aed; }
.feature-card--admin .feature-icon svg { fill: #dc2626; }

/* ── Locked by plan ────────────────────────────────────────────────
   A feature the company's plan doesn't include (server/src/lib/
   entitlements.ts). Greyed and inert rather than hidden: an admin cannot
   decide to buy something they have never seen, and clicking one opens the
   upgrade dialog (upgrade-prompt.js) instead of following the link.

   Deliberately NOT the same treatment as a disabled button. The card keeps
   its shape and its label — it is a real part of the product, on offer —
   and only the colour says it isn't switched on yet. */
.feature-card.is-locked {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
  box-shadow: none;
  cursor: pointer;
}
.feature-card.is-locked:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.feature-card.is-locked .feature-icon svg { fill: #cbd5e1; }
.feature-lock {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.feature-lock svg {
  width: 14px;
  height: 14px;
  fill: #94a3b8;
}

/* A panel that MANAGES a locked feature — the paid sections of the Admin
   panel and the Leadership Team dashboard. Dimmed in place, with its
   controls made inert so nothing inside can be typed into or submitted;
   the click lands on the panel itself, which auth.js turns into the
   upgrade dialog. */
[data-paid-feature].is-locked {
  position: relative;
  opacity: 0.55;
  cursor: pointer;
}
[data-paid-feature].is-locked > * {
  pointer-events: none;
}
[data-paid-feature].is-locked::after {
  content: 'Paid plan';
  position: absolute;
  top: 12px;
  right: 16px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── The upgrade dialog ────────────────────────────────────────────
   Built on demand by upgrade-prompt.js; nothing is added to a page where
   every feature is included. */
.upgrade-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.45);
}
.upgrade-backdrop[hidden] { display: none; }
body.upgrade-open { overflow: hidden; }
.upgrade-modal {
  width: min(460px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}
.upgrade-modal h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.upgrade-lede {
  margin: 0 0 12px;
  font-weight: 700;
  color: #111827;
}
.upgrade-sub {
  margin: 0 0 12px;
  color: #4b5563;
  font-size: 0.92rem;
  line-height: 1.5;
}
.upgrade-list {
  margin: 0 0 16px;
  padding-left: 20px;
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.6;
}
.upgrade-foot {
  margin: 0 0 18px;
  color: #6b7280;
  font-size: 0.86rem;
  line-height: 1.5;
}
.upgrade-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.upgrade-dismiss {
  /* The form reset above sizes every button to the full width of its
     container, which puts these two on separate rows. */
  width: auto;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 600;
  cursor: pointer;
}
.upgrade-dismiss:hover { background: #e2e8f0; }
.upgrade-cta {
  background: #4f46e5;
  color: #fff;
  border-radius: 10px;
  padding: 9px 18px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.upgrade-cta[hidden] { display: none; }
.upgrade-cta:hover { background: #4338ca; color: #fff; }
.card.chart-card {
  text-align: center;
}
.pie-chart {
  width: 220px;
  height: 220px;
  margin: 0 auto 18px;
  display: block;
}
.pie-chart circle {
  fill: none;
  stroke-width: 18;
}
.pie-chart .bg {
  stroke: #e5e7eb;
}
.pie-chart .progress {
  stroke: #4f46e5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
}
.chart-label {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: #374151;
}
.chart-value {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.chart-legend {
  display: grid;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}
.chart-legend div {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #4b5563;
}
.chart-legend span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
}
.chart-legend .actual {
  background: #4f46e5;
}
.chart-legend .goal {
  background: #1f2937;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.metric-card {
  background: #eef2ff;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}
.metric-card p {
  margin: 0;
}
.metric-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.panel {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.panel-header {
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}
.panel-header h2 {
  margin: 0 0 8px;
}
.panel-header p {
  margin: 0;
  color: #4b5563;
}

/* Panel icons (Admin & Leadership Team dashboards). A tinted badge in front
   of each panel title so a stack of collapsed panels stays scannable.
   See panel-icons.js. */
.panel-title--iconed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.panel-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.panel-icon svg {
  width: 21px;
  height: 21px;
  display: block;
}
.panel-icon--blue   { background: #eff6ff; color: #2563eb; }
.panel-icon--red    { background: #fef2f2; color: #dc2626; }
.panel-icon--violet { background: #f5f3ff; color: #7c3aed; }
.panel-icon--amber  { background: #fffbeb; color: #d97706; }
.panel-icon--orange { background: #fff7ed; color: #ea580c; }
.panel-icon--teal   { background: #f0fdfa; color: #0d9488; }
.panel-icon--indigo { background: #eef2ff; color: #4f46e5; }
.panel-icon--sky    { background: #f0f9ff; color: #0284c7; }
.panel-icon--green  { background: #f0fdf4; color: #16a34a; }
.panel-icon--slate  { background: #f1f5f9; color: #475569; }

/* Collapsible dashboard panels (Admin & Leadership Team). The header is a
   toggle; the body drops down when opened. See collapsible-panels.js. */
.panel-header--toggle {
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-right: 48px;
  padding-left: 48px;
}
.panel-header--toggle:hover { background: #f9fafb; }
.panel-toggle-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  transition: transform 0.2s ease;
}
.panel--collapsed .panel-toggle-arrow { transform: translateY(-50%) rotate(-90deg); }
.panel--collapsed .panel-header { border-bottom: none; }
.panel--collapsed > *:not(.panel-header) { display: none; }
.content-grid {
  display: grid;
  gap: 20px;
  padding: 24px;
}
.card {
  background: #f9fafb;
  border-radius: 18px;
  padding: 20px;
}
.card-form {
  min-width: 280px;
}
.card-form form {
  display: grid;
  gap: 16px;
}
label {
  display: grid;
  gap: 8px;
  font-size: 0.95rem;
  color: #374151;
}
/* The link out to volunteer opportunities, under My Goals on the profile. */
.profile-goals-link {
  margin: 12px 0 0;
  font-size: 0.875rem;
}

/* "Who's going" roster, shown on event details and volunteer opportunities.
   Built by AhsomShared.buildAttendeeList, so both pages render it the same. */
.attendee-list {
  margin-top: 10px;
}

.attendee-list-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 6px;
}

.attendee-names {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.attendee-chip {
  display: inline-block;
  width: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.8rem;
  line-height: 1.4;
}

.attendee-chip--me {
  background: #eef2ff;
  color: #4338ca;
  font-weight: 600;
}

/* A host's view of someone who signed up: the name plus the email they
   signed up with, as plain text to read and copy. Only the host of that
   event is sent those addresses, so for everyone else the chips stay
   plain names. */
.attendee-chip--contact {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  /* Name and address together are far wider than a name, and this list sits
     in a narrow card on the organizer page. Without these the pill grows
     past the card instead of the address dropping under the name. */
  max-width: 100%;
  min-width: 0;
}
.attendee-chip-email {
  color: #6b7280;
  font-size: 0.75rem;
  /* An address has no spaces to break at, so a long one has to be allowed
     to break mid-word or it sets the pill's minimum width on its own. */
  overflow-wrap: anywhere;
}

input, textarea, select, button {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  padding: 12px 14px;
  font-size: 1rem;
  /* Inherit the page font (Inter). Without this, controls fall back to UA
     defaults — inputs render in Arial and textareas in monospace — which
     makes the mixed input/textarea fields (e.g. Hobbies & Interests) look
     like they use different fonts. */
  font-family: inherit;
}
/* shared.js opens a date field's calendar from a click anywhere in the field,
   not just the icon at its right edge, so the whole field takes the pointer
   cursor that says as much. */
input[type="date"],
input[type="datetime-local"] {
  cursor: pointer;
}

/* The quarter-hour time picker's list (AhsomShared.makeTimeSelect). A native
   <select> popup can't be shortened — the browser decides its height — and 96
   quarter hours cover the screen, so shared.js suppresses that popup and opens
   this panel in its place, on every browser alike. It lives on <body> and is
   positioned against the field it belongs to. */
.time-picker {
  --time-row-height: 34px;
  position: fixed;
  z-index: 10000;
  /* Seven rows, then scroll — the whole point of the panel. */
  max-height: calc(var(--time-row-height) * 7 + 8px);
  overflow-y: auto;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.14);
  color: #1f2937;
}
.time-picker[hidden] {
  display: none;
}
.time-picker-row {
  display: flex;
  align-items: center;
  height: var(--time-row-height);
  padding: 0 10px;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
}
.time-picker-row:hover {
  background: #f3f4f6;
}
.time-picker-row.is-active {
  background: #eef2ff;
  color: #3730a3;
  font-weight: 600;
}
/* Times ruled out by the form's own floors (no past starts, no end before
   the start) — shown, so the list doesn't appear to jump, but inert. */
.time-picker-row.is-disabled {
  color: #9ca3af;
  cursor: default;
}
.time-picker-row.is-disabled:hover {
  background: transparent;
}

/* Optional "good to know" detail on the volunteer posting forms, boxed off
   so it reads as a set of extras rather than more required fields. */
.event-extras {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 14px 16px 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}
.event-extras > legend {
  padding: 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #374151;
}
.event-extras > legend small {
  font-weight: 400;
  color: #6b7280;
}

/* The sponsored slot on a volunteer posting (AhsomShared.buildSponsorSlot).
   One block, styled once, wherever the posting is shown: the opportunity
   card, the event detail, and the organizer's own list. Quiet on purpose —
   a credit sits beside the event, it doesn't compete with it. */
.event-sponsor {
  display: grid;
  gap: 2px;
  justify-items: start;
  margin-top: 10px;
  padding: 8px 12px;
  border-left: 3px solid #c7d2fe;
  border-radius: 0 8px 8px 0;
  background: #f8fafc;
  font-size: 0.85rem;
}
.event-sponsor-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}
.event-sponsor-name {
  font-weight: 600;
  color: #1f2937;
}
.event-sponsor-message {
  margin: 0;
  color: #4b5563;
}
.event-sponsor-link {
  margin-top: 2px;
  color: #4338ca;
  font-weight: 600;
  text-decoration: none;
}
.event-sponsor-link:hover {
  text-decoration: underline;
}

textarea {
  resize: vertical;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
}
button {
  background: #4f46e5;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
button:hover {
  background: #4338ca;
}

/* ── Drag to reorder (AhsomShared.makeSortable) ────────────────
   The grip on a row whose position is itself an edit — a survey question, a
   game on a week's card. Deliberately quiet until the row is hovered: the
   order matters, but it is not the first thing to read. */
.drag-grip {
  width: auto;
  flex-shrink: 0;
  align-self: center;
  background: none;
  border: none;
  padding: 4px 3px;
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 1rem;
  line-height: 1;
  cursor: grab;
  /* Without this a touch drag scrolls the page instead of moving the row. */
  touch-action: none;
}
.sq-bank-item:hover .drag-grip,
.goal-bank-item:hover .drag-grip {
  color: #9ca3af;
}
.drag-grip:hover {
  background: #f3f4f6;
  color: #4b5563;
}
.drag-grip:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 1px;
  color: #4f46e5;
}
/* The row in flight: lifted off the list and following the pointer. */
.is-dragging {
  position: relative;
  z-index: 5;
  cursor: grabbing;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.18);
  opacity: 0.96;
}
.is-dragging .drag-grip {
  cursor: grabbing;
  color: #4f46e5;
}
/* Mid-drag the pointer sweeps across every row it passes; without this the
   list picks up a text selection instead of reading as a list being sorted. */
.is-sorting > * {
  user-select: none;
}
/* The survey bank clips its rows so their corners follow the list's own — but
   a row in flight is meant to sit ABOVE the list, and clipped it vanishes the
   moment it is lifted past either end. Only while a drag is happening. */
.sq-bank-list.is-sorting {
  overflow: visible;
}
.card-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.card-list li {
  background: #fff;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
}
/* Event lists as tile grids — 3 per row */
.card-list ul.event-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}
.event-grid li {
  display: flex;
  flex-direction: column;
}
.event-grid .event-tile-body,
.event-grid .volunteer-details,
.event-grid .vo-event-info {
  width: 100%;
  flex: 1 1 auto;
}
.event-grid li > button {
  margin-top: 12px;
}
.event-grid .event-grid-empty,
.event-grid .vo-empty {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .card-list ul.event-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .card-list ul.event-grid { grid-template-columns: 1fr; }
}
.event-type.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.event-type.badge.personal {
  background: #e0f2fe;
  color: #0369a1;
}
.event-type.badge.company {
  background: #ede9fe;
  color: #4338ca;
}
.event-type.badge.volunteer {
  background: #dcfce7;
  color: #166534;
}
.event-type.badge.national {
  background: #fee2e2;
  color: #991b1b;
}
.event-type.badge.general {
  background: #fef9c3;
  color: #713f12;
}
.event-type.badge.company-volunteer {
  background: #d1fae5;
  color: #065f46;
}
.calendar-header {
  padding: 14px 10px;
  font-weight: 700;
  color: #4b5563;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}
.calendar-day {
  min-height: 130px;
}
.calendar-date {
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}
.calendar-date.today {
  color: #4f46e5;
}
.calendar-empty {
  margin: 0;
  color: #6b7280;
  font-size: 0.92rem;
}
.calendar-event {
  background: #f8fafc;
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid #d1d5db;
  font-size: 0.92rem;
  line-height: 1.3;
}
.calendar-event.company {
  border-color: #c4b5fd;
  background: #f5f3ff;
}
.calendar-event.personal {
  border-color: #bfdbfe;
  background: #eff6ff;
}
.calendar-event.volunteer {
  border-color: #bbf7d0;
  background: #ecfdf5;
}
.event-type-pill {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(79, 70, 229, 0.08);
  color: #4f46e5;
}
.pickem-matchup {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}
.pickem-matchup:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.pickem-matchup p {
  margin: 0 0 4px;
  font-weight: 700;
}
.pickem-matchup label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pickem-matchup input[type='radio'] {
  accent-color: #4f46e5;
}
.pickem-matchup label:hover {
  border-color: #a5b4fc;
  background: #f5f3ff;
}
/* A field event — one event, many entrants, pick the winner. Two sides fit on
   screen as a pair; a field of forty does not, so it scrolls inside its own
   box rather than pushing the submit button off the end of a long page. The
   max-height is deliberately not a round number of rows: showing part of the
   next one is what makes it read as scrollable without a scrollbar to prove
   it. */
.pickem-matchup--field {
  max-height: 19rem;
  overflow-y: auto;
  gap: 6px;
  padding: 4px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}
/* The heading is the event's name, and it has to stay put while the field
   scrolls under it — otherwise you lose track of which event you are picking
   in halfway down the list. */
.pickem-matchup--field p {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 8px 8px 6px;
  background: #f9fafb;
}
#pickem-results p {
  margin: 0 0 12px;
}
#pickem-results ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
#pickem-results li {
  background: #eef2ff;
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid #c7d2fe;
}
.card-calendar {
  padding: 24px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.calendar-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.calendar-controls select,
.calendar-controls input {
  padding: 8px 10px;
  border-radius: 12px;
}
.calendar-controls button {
  background: #eef2ff;
  border: 1px solid #e5e7eb;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
}
.calendar-cell {
  background: #eef2ff;
  padding: 14px;
  border-radius: 16px;
  min-height: 110px;
}
.calendar-cell h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}
.calendar-cell p {
  margin: 0;
  color: #4b5563;
  font-size: 0.88rem;
}
.profile-grid {
  display: grid;
  gap: 14px;
}
.profile-card {
  background: #fff;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
}
.profile-card h4 {
  margin: 0 0 8px;
}
.profile-card p {
  margin: 4px 0;
  font-size: 0.93rem;
  color: #4b5563;
}
@media (min-width: 900px) {
  .content-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .calendar-grid {
    grid-template-columns: 1fr;
  }
}

/* Auth badge — role pill + sign-out button injected into every page header.
   Centred on the header's full height, which is fine while the header is
   one row (logo and name side by side, ≥900px — see .company-logo). Below
   that the header can be two rows (logo, then name stacked under it), and
   centring on the WHOLE thing would let the badge drift down into the name
   row instead of staying level with the logo's, so it pins near the top
   there instead — see the override below. */
.auth-badge {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 899px) {
  .auth-badge {
    top: 18px;
    transform: none;
  }
}

.auth-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2px solid rgba(255, 255, 255, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.auth-avatar:hover {
  border-color: #a5b4fc;
  transform: scale(1.06);
}
.auth-avatar svg {
  width: 24px;
  height: 24px;
  fill: #9ca3af;
}
.auth-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "Use My Location" control shared by event-posting forms */
.locate-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: -4px;
  margin-bottom: 8px;
}
.locate-btn {
  width: auto;
  padding: 7px 14px;
  background: #eef2ff;
  color: #4338ca;
  border: 1.5px solid #c7d2fe;
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.locate-btn:hover { background: #e0e7ff; }
.location-status {
  font-size: 0.82rem;
  color: #6b7280;
}

.auth-role-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.auth-role-pill--employee            { background: #e0f2fe; color: #0369a1; }
.auth-role-pill--hr                  { background: #ede9fe; color: #5b21b6; }
.auth-role-pill--admin               { background: #fee2e2; color: #991b1b; }
.auth-role-pill--volunteer-organizer { background: #d1fae5; color: #065f46; }
.auth-role-pill--ahsomo-staff        { background: #fef3c7; color: #92400e; }

.auth-signout-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  width: auto;
}

.auth-signout-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Event images */
.event-img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
  display: block;
}

.event-img-preview {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 8px;
  display: block;
  border: 1.5px solid #e5e7eb;
}

.event-img-input-label small {
  font-weight: 400;
  color: #6b7280;
}

/* Role-specific nav cards: hidden by default, shown by auth.js for the matching role */
.feature-card[data-role] { display: none; }

.feature-card--hr    { background: #f5f3ff; border-color: #c4b5fd; color: #4c1d95; }
.feature-card--admin { background: #fff1f2; border-color: #fca5a5; color: #7f1d1d; }

/* HR inline content editing */
.hr-edit-hint {
  background: #f5f3ff;
  border-left: 4px solid #7c3aed;
  color: #4c1d95;
  padding: 10px 16px;
  font-size: 0.87rem;
  font-weight: 500;
  border-radius: 0 8px 8px 0;
  margin-bottom: 16px;
}
.hr-editable {
  border-radius: 3px;
  cursor: text;
  transition: outline 0.1s, background 0.1s;
  outline: 2px dashed transparent;
}
.hr-editable:hover {
  outline: 2px dashed #a78bfa;
  background: rgba(167, 139, 250, 0.08);
}
.hr-editable:focus {
  outline: 2px solid #7c3aed;
  background: rgba(124, 58, 237, 0.08);
}

/* Company goals: display cards (home + company stats) */
.goal-value-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.goal-big-value {
  font-size: 2.6rem;
  font-weight: 800;
  color: #4f46e5;
  margin: 36px 0 6px;
}
.goal-value-caption {
  color: #6b7280;
  margin: 0 0 36px;
  font-size: 0.9rem;
}
.goal-empty {
  color: #6b7280;
  margin: 0;
  text-align: center;
}

/* Company goals: TL/Admin manager */
.goal-mgr-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.goal-mgr-count {
  font-size: 0.9rem;
  color: #6b7280;
}
.goal-add-toggle {
  background: #eef2ff;
  color: #4f46e5;
  border: 1.5px dashed #a5b4fc;
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
}
.goal-add-toggle:hover {
  background: #e0e7ff;
}
.goal-add-wrap {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}
.goal-add-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}
.goal-add-form input,
.goal-add-form select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-size: 0.9rem;
  background: #fff;
  color: #1f2937;
}
.goal-add-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.goal-add-row label {
  flex: 1;
  min-width: 150px;
}
.goal-add-form button[type="submit"] {
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}
.goal-add-form button[type="submit"]:hover {
  background: #4338ca;
}
.goal-bank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.goal-bank-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
}
.goal-bank-check {
  padding-top: 3px;
}
.goal-bank-info {
  flex: 1;
  min-width: 0;
}
.goal-bank-titlerow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.goal-bank-title {
  font-weight: 700;
  color: #1f2937;
}
.goal-badge {
  font-size: 0.72rem;
  font-weight: 600;
  background: #eef2ff;
  color: #4f46e5;
  padding: 2px 8px;
  border-radius: 999px;
}
.goal-badge--default {
  background: #f3f4f6;
  color: #6b7280;
}

/* ── Week sections in the game manager ────────────────────────
   Played / live / scheduled weeks are each their own boxed section with a
   colour-coded border, tinted ground and a bold status pill, so which kind
   of week you're looking at reads before any heading. Same three-colour
   language as the survey preview: indigo = still to come, teal = live now,
   grey = already played (a record, not a decision). */
.games-week {
  list-style: none;
  border: 2px solid #e5e7eb;
  border-left-width: 6px;
  border-radius: 16px;
  padding: 10px 16px 16px;
  background: #fff;
}
.games-week--upcoming {
  border-color: #4f46e5;
  background: #eef2ff;
}
.games-week--live {
  border-color: #0d9488;
  background: #f0fdfa;
  box-shadow: 0 2px 10px rgba(13, 148, 136, 0.16);
}
.games-week--played {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.games-week--played .games-week-body {
  opacity: 0.6;
}
.games-week-body {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.games-sort-hint {
  margin: 0 0 12px;
  color: #6b7280;
  font-size: 0.85rem;
  line-height: 1.5;
}
/* A day inside a week. Its games sit in a list of their own, which is also the
   boundary a drag stays inside: the kickoff decides the day, the manager
   decides the order within it. */
.games-day {
  list-style: none;
}
.games-day-head {
  margin: 10px 0 6px;
  color: #374151;
  font-size: 0.9em;
  font-weight: 600;
}
.games-day-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.games-week-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.games-week-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #111827;
}
.games-week-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
}
.games-week-badge--upcoming {
  background: #4f46e5;
  color: #fff;
}
.games-week-badge--live {
  background: #0d9488;
  color: #fff;
}
.games-week-badge--played {
  background: #e2e8f0;
  color: #475569;
}
.games-week-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75em;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 6px;
  padding: 2px 8px;
}
.games-week-count {
  margin-left: auto;
  color: #6b7280;
  font-size: 0.85em;
  font-weight: 600;
}

/* Says where the weeks older than the schedule window went. Deliberately
   quiet — it is a footnote to the calendar, not a week of its own. */
.games-week-cutoff {
  list-style: none;
  color: #6b7280;
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 4px 6px;
}
.goal-bank-editors {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.goal-bank-editors label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: #6b7280;
  font-weight: 600;
  margin: 0;
}
.goal-bank-editors input,
.goal-bank-editors select {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-size: 0.88rem;
  background: #fff;
  color: #1f2937;
  width: 120px;
}
.goal-bank-editors select {
  width: auto;
}
.goal-bank-preview {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 8px;
}
.goal-remove-btn {
  background: #fee2e2;
  color: #b91c1c;
  border: none;
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
  width: auto;
  align-self: center;
}
.goal-remove-btn:hover {
  background: #fecaca;
}
/* Opens a game's row as a form — the same size and shape as Remove beside it,
   but neutral, because correcting a team name is the ordinary thing to do with
   a game and dropping it from the card is not. */
.row-edit-btn {
  background: #f3f4f6;
  color: #374151;
  border: none;
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
  width: auto;
  align-self: center;
}
.row-edit-btn:hover {
  background: #e5e7eb;
}
/* A row opened for editing: it becomes the form, in place, so the game (or the
   question) keeps its spot in the list while it is corrected. */
.goal-bank-item--editing {
  display: block;
  background: #f9fafb;
  box-shadow: inset 3px 0 0 #4f46e5;
}
.goal-bank-item--editing .goal-add-form label {
  margin-bottom: 10px;
}
.goal-bank-item--editing .goal-bank-editors input {
  width: 150px;
}
.row-edit-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.row-edit-save {
  width: auto;
  border-radius: 12px;
  padding: 7px 18px;
  font-size: 0.85rem;
}
.row-edit-cancel {
  width: auto;
  background: none;
  border: 1px solid #d1d5db;
  color: #374151;
  border-radius: 12px;
  padding: 6px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.row-edit-cancel:hover {
  background: #f3f4f6;
}
/* The one row button that takes something away for good: removing a person
   from the company (team.js). Solid rather than tinted, because it sits
   next to Claim / Release / About Me and must not read as one of them. */
.goal-remove-btn--danger {
  background: #dc2626;
  color: #fff;
}
.goal-remove-btn--danger:hover {
  background: #b91c1c;
}

/* Shoutouts */
.shoutout-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shoutout-list .shoutout-item {
  border: 1px solid #e5e7eb;
  border-left: 4px solid #6366f1;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fafafe;
}
.shoutout-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.shoutout-to {
  font-weight: 700;
  color: #4338ca;
  font-size: 0.9rem;
}
.shoutout-meta {
  font-size: 0.78rem;
  color: #6b7280;
  white-space: nowrap;
}
.shoutout-msg {
  color: #1f2937;
  font-size: 0.95rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.shoutout-list .shoutout-empty {
  list-style: none;
  color: #6b7280;
  padding: 10px 0;
  font-size: 0.92rem;
  background: none;
  border: none;
}
.shoutout-confirm {
  color: #065f46;
  background: #d1fae5;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  margin-top: 12px;
}
/* How many of this week's two are left, under the shoutout form. Plain grey
   while there are some; amber once they're spent, when it's the reason the
   send button is disabled. */
.shoutout-allowance {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 0.875rem;
}

.shoutout-allowance--spent {
  color: #92400e;
  font-weight: 600;
}
.shoutout-more {
  margin: 14px 0 0;
  font-size: 0.88rem;
}
/* Nudge above the shoutout form to prompt more submissions. */
.panel-header p.shoutout-prompt {
  margin: 10px 0 0;
  font-weight: 600;
  color: #111827;
}
/* Posting-fee refund terms, stated before anyone pays. */
.vo-refund-policy {
  font-size: 0.85rem;
  color: #4b5563;
  margin: 4px 0 0;
}

/* Event "Time" choice: set times, all day, or times may vary. Picking either
   of the last two hides the time fields below it — see initTimeMode(). */
.time-mode {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 14px 12px;
  margin: 0 0 4px;
}
.time-mode legend {
  font-size: 0.82rem;
  font-weight: 600;
  color: #4b5563;
  padding: 0 6px;
}
.time-mode label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 400;
  color: #1f2937;
  padding: 3px 0;
  margin: 0;
  cursor: pointer;
}
.time-mode input[type="radio"] {
  width: auto;
  margin: 0;
}

/* "Who it's for" — one person, or them and everyone under them. Built by
   shoutouts.js once it knows who's selected, and absent when the person
   picked has nobody reporting to them. */
.shoutout-scope {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 14px 12px;
  margin: 0 0 4px;
}
.shoutout-scope legend {
  font-size: 0.82rem;
  font-weight: 600;
  color: #4b5563;
  padding: 0 6px;
}
.shoutout-scope-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #1f2937;
  padding: 3px 0;
  cursor: pointer;
}
.shoutout-scope-option input {
  width: auto;
  margin: 0;
}

/* Contact info + poster link */
.contact-saved {
  color: #065f46;
  background: #d1fae5;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  margin-top: 12px;
}
.volunteer-poster {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #6b7280;
}
.event-modal-poster {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: #6b7280;
}
.poster-link {
  width: auto;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #4338ca;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.poster-link:hover { color: #3730a3; background: none; }

.contact-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1100; /* above the event detail modal (z-index 1000) */
}
.contact-modal {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 380px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
.contact-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: auto;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
}
.contact-modal-close:hover { color: #111827; background: none; }
.contact-modal-name {
  margin: 0 0 2px;
  color: #111827;
  font-size: 1.25rem;
}
.contact-modal-org {
  margin: 0 0 12px;
  color: #4338ca;
  font-weight: 600;
  font-size: 0.9rem;
}
.contact-modal-details {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
}
.contact-modal-details dt {
  font-weight: 600;
  color: #6b7280;
  font-size: 0.9rem;
}
.contact-modal-details dd {
  margin: 0;
  color: #1f2937;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.contact-modal-details dd a { color: #4338ca; }
.contact-modal-empty {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 0.9rem;
}

/* Way through to the preview page from the dashboards that host the survey
   and game managers — the answer to "fine, but what will they see?". */
.preview-link {
  max-width: 1100px;
  margin: 16px auto -8px;
  padding: 0 16px;
  font-weight: 600;
}

/* Weekly game prizes — the manager's editor (weekly-games.js) and the
   player-facing "What you can win" list on the game page. */
.pickem-rewards-editor {
  padding: 10px 0 14px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 14px;
}
.pickem-rewards-title {
  margin: 0 0 4px;
  font-size: 1rem;
  color: #111827;
}
.pickem-rewards-note {
  margin: 0 0 10px;
  color: #6b7280;
  font-size: 0.85rem;
}
/* What a team already gets from above — context for what you're adding to,
   not something this editor can change. */
.pickem-rewards-inherited {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.pickem-rewards-inherited-title {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
}
.pickem-rewards-inherited ul {
  margin: 0;
  padding-left: 18px;
  color: #4b5563;
  font-size: 0.85rem;
}
.pickem-rewards-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pickem-rewards-rows label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
}
.pickem-rewards-rows input {
  width: 100%;
  margin-top: 4px;
  font-weight: 400;
}
.pickem-rewards-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.pickem-rewards-status {
  color: #6b7280;
  font-size: 0.85rem;
}
@media (max-width: 720px) {
  .pickem-rewards-rows { grid-template-columns: 1fr; }
}

/* Player-facing prize list, inside the "How to play" card. Amber, so it reads
   as the reward it is rather than as more instructions. */
.pickem-prizes {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}
.pickem-prizes-title {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: #92400e;
}
.pickem-prizes ul {
  margin: 0;
  padding-left: 18px;
  color: #374151;
  font-size: 0.9rem;
}
.pickem-prizes li { margin-bottom: 4px; }

/* About Me: a start date recorded before the field was a date picker, which
   the picker therefore can't display. Amber rather than red — nothing is
   broken, but it needs a person to replace it before reminders resume. */
.about-date-note {
  margin: -4px 0 10px;
  padding: 8px 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  color: #92400e;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* When a lead hears about their team's milestones (Leadership Team → My Team).
   Sits above the roster: it governs the mail, not any one person on the list. */
.milestone-timing {
  padding: 12px 14px;
  margin-bottom: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.milestone-timing-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: #111827;
}
.milestone-timing-note {
  margin: 0 0 10px;
  color: #6b7280;
  font-size: 0.83rem;
}
.milestone-timing-choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
}
.milestone-timing-choice input { margin-top: 3px; flex-shrink: 0; }
.milestone-timing-choice strong {
  display: block;
  font-size: 0.88rem;
  color: #1f2937;
  font-weight: 600;
}
.milestone-timing-choice small {
  display: block;
  font-size: 0.78rem;
  color: #6b7280;
}
.milestone-timing-status {
  color: #065f46;
  font-size: 0.82rem;
  font-weight: 600;
}