/* The Pilot pill and its feedback window. Colours are fixed pairs (white on deep violet and deep magenta, both above 6:1),
   so the pill reads the same on every page and in every theme; the word carries the meaning, not the colour. */
.pilot-pill{ display:inline-flex; align-items:center; min-height:32px; padding:.15rem .75rem; margin-left:.5rem; border:0; border-radius:999px;
  background:linear-gradient(100deg, #5b2bd6, #a3246e); color:#fff; font:inherit; font-size:.8rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer; vertical-align:middle; white-space:nowrap; box-shadow:0 2px 8px rgba(91,43,214,.25); }
.pilot-pill:hover{ filter:brightness(1.08); }
.pilot-pill:focus-visible{ outline:3px solid #5b2bd6; outline-offset:3px; }
/* a lesson is running on this phone: the pill steps aside */
body.in-activity .pilot-pill{ display:none; }
@media (prefers-reduced-motion: no-preference){ .pilot-pill{ transition:filter .15s ease; } }
html.pl-open{ overflow:hidden; }
.pl-overlay{ position:fixed; inset:0; background:rgba(15,12,30,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:1000; }
.pl-overlay[hidden]{ display:none; }
.pl-panel{ position:relative; background:#fff; color:#1b1834; border-radius:18px; padding:1.4rem 1.4rem 1.2rem; width:min(100%, 30rem); max-height:calc(100vh - 32px); overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); font-family:inherit; line-height:1.5; }
.pl-panel h2{ margin:.1rem 2rem .6rem 0; font-size:1.3rem; }
.pl-panel p{ margin:.5rem 0; }
.pl-x{ position:absolute; top:.6rem; right:.6rem; width:44px; height:44px; border:0; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer; color:#1b1834; border-radius:50%; }
.pl-x:focus-visible{ outline:3px solid #5b2bd6; }
.pl-kinds{ border:0; padding:0; margin:.6rem 0; display:flex; flex-wrap:wrap; gap:.4rem 1rem; }
.pl-kinds legend{ font-weight:700; margin-bottom:.3rem; padding:0; }
.pl-kinds label, .pl-check{ display:flex; align-items:center; gap:.45rem; min-height:44px; cursor:pointer; }
.pl-kinds input, .pl-check input{ width:1.2rem; height:1.2rem; margin:0; }
.pl-panel label[for="plText"]{ display:block; font-weight:700; margin-top:.4rem; }
.pl-panel textarea{ width:100%; box-sizing:border-box; margin-top:.3rem; padding:.6rem .7rem; border:2px solid #7d7898; border-radius:12px; font:inherit; color:#1b1834; background:#fff; resize:vertical; }
.pl-panel textarea:focus-visible{ outline:3px solid #5b2bd6; outline-offset:1px; }
.pl-note, .pl-contact{ font-size:.92rem; color:#4f4a6b; }
.pl-contact a{ color:#5b2bd6; }
.pl-err{ color:#b42318; font-weight:700; min-height:1.2em; }
.pl-send{ min-height:48px; padding:.5rem 1.4rem; border:0; border-radius:999px; background:#5b2bd6; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.pl-send:disabled{ opacity:.6; cursor:default; }
.pl-send:focus-visible{ outline:3px solid #1b1834; outline-offset:2px; }
/* the students' card under the join and waiting screens: bright enough to be noticed, gone during an activity */
.pilot-join-wrap{ display:flex; justify-content:center; padding:0 16px 1rem; }
.pilot-join-wrap:empty{ display:none; }
.pilot-pill.pilot-join{ position:relative; overflow:hidden; display:flex; align-items:center; gap:.7rem; width:100%; max-width:560px; min-height:56px; margin:0;
  padding:.6rem 1rem; border-radius:16px; text-transform:none; letter-spacing:0; font-size:1rem; text-align:left;
  background:linear-gradient(110deg, #5b2bd6 0%, #8a2bb8 55%, #a3246e 100%); box-shadow:0 8px 24px rgba(91,43,214,.35); }
.pilot-join .pl-tag{ flex:0 0 auto; font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:.15rem .55rem; }
.pilot-join .pl-cta{ flex:1 1 auto; font-weight:800; }
.pilot-join .pl-arrow{ flex:0 0 auto; font-size:1.2rem; font-weight:900; }
body.in-activity .pilot-join-wrap{ display:none; }
@media (prefers-reduced-motion: no-preference){
  html:not([data-calm="on"]) .pilot-join::after{ content:""; position:absolute; top:0; bottom:0; width:40%; left:-50%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); animation:pl-shine 4.5s ease-in-out 1.2s infinite; pointer-events:none; }
  html:not([data-calm="on"]) .pilot-join .pl-arrow{ animation:pl-nudge 4.5s ease-in-out 1.2s infinite; }
}
@keyframes pl-shine{ 0%{ left:-50%; } 35%{ left:120%; } 100%{ left:120%; } }
@keyframes pl-nudge{ 0%,30%,100%{ transform:none; } 15%{ transform:translateX(4px); } }
/* star picker for a review: five radio buttons shown as stars, keyboard arrows move between them */
.pl-stars{ border:0; padding:0; margin:.4rem 0; }
.pl-stars[hidden]{ display:none; }
.pl-stars legend{ font-weight:700; padding:0; margin-bottom:.2rem; }
.pl-opt{ font-weight:400; color:#4f4a6b; }
.pl-starrow{ display:flex; gap:.25rem; }
.pl-starrow input{ position:absolute; opacity:0; width:1px; height:1px; }
.pl-starrow label{ display:grid; place-items:center; width:44px; height:44px; font-size:1.7rem; color:#c9c6d8; cursor:pointer; border-radius:10px; }
.pl-starrow label:has(~ input:checked), .pl-starrow input:checked + label{ color:#9a6a00; }
.pl-starrow input:focus-visible + label{ outline:3px solid #5b2bd6; outline-offset:1px; }
.pl-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* the lecturer's and admin top bars are full of buttons: a compact pill, and the small "host"/"admin" label steps aside
   where space is short, so the help button stays on the first line */
.bar .pilot-pill{ min-height:30px; margin-left:.3rem; padding:0 .55rem; font-size:.7rem; letter-spacing:.04em; }
@media (max-width:1500px){ .bar:has(.pilot-pill) h1 .sub{ display:none; } }