/* FFSL Availability Portal — coach-facing, mobile-first.
 * Self-contained palette (the venue's public design direction arrives with
 * the Stage 4 widget; this page is a utility and stays deliberately plain). */
.ffsl-ap { max-width: 680px; margin: 0 auto; padding: 12px; }
.ffsl-ap .ap-card {
  background: #ffffff; color: #17202a;
  border: 1px solid #d5dbe1; border-radius: 10px;
  padding: 18px; display: grid; gap: 10px;
}
.ffsl-ap h2 { margin: 0 0 4px 0; font-size: 1.3rem; }
.ffsl-ap h3 { margin: 14px 0 2px 0; font-size: 1.02rem; border-top: 1px solid #e4e8ec; padding-top: 12px; }
.ffsl-ap .ap-hint { margin: 2px 0; font-size: .86rem; color: #5b6772; }
.ffsl-ap .ap-error { color: #a4262c; font-weight: 600; }
.ffsl-ap .ap-warn { color: #8a5a00; }
.ffsl-ap .ap-ok { color: #1d6f42; }
.ffsl-ap .ap-wait { color: #5b6772; }
.ffsl-ap button {
  background: #17202a; color: #ffffff; border: 0; border-radius: 8px;
  padding: 9px 14px; font-size: .92rem; cursor: pointer;
}
.ffsl-ap button:disabled { opacity: .55; }
.ffsl-ap .ap-save { background: #1d6f42; font-weight: 600; }
.ffsl-ap .ap-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.ffsl-ap .ap-tools button { background: #eef1f4; color: #17202a; }
.ffsl-ap input, .ffsl-ap .ap-note, .ffsl-ap .ap-range {
  padding: 9px 10px; border: 1px solid #c5cdd5; border-radius: 8px;
  font-size: .95rem; width: 100%; box-sizing: border-box; background: #fff; color: #17202a;
}
.ffsl-ap .ap-away-row, .ffsl-ap .ap-away-add {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.ffsl-ap .ap-away-row span { flex: 1; }
.ffsl-ap .ap-busy { font-size: .88rem; color: #444f5a; }
.ffsl-ap details { border: 1px solid #e4e8ec; border-radius: 8px; padding: 8px 10px; }
.ffsl-ap details summary { cursor: pointer; font-weight: 600; }
.ffsl-ap details ol { margin: 6px 0 6px 18px; padding: 0; font-size: .9rem; }
/* paint grid colours (structure comes from availability-grid.js) */
.ffsl-ap .ap-grid .fag-cell { background: #eef1f4; }
.ffsl-ap .ap-grid .fag-cell.on { background: #1d6f42; }
.ap-toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: #17202a; color: #fff; padding: 10px 16px; border-radius: 999px;
  font-size: .9rem; z-index: 9999; box-shadow: 0 4px 18px rgba(0,0,0,.25);
}