/* Pursue Learning Phase 5 additions to the curriculum guide.
   Uses the guide's own colour variables (--panel, --ink, --accent, --line...) so it follows
   the guide's light and dark themes. Every rule is scoped to .pl5-* classes or #pl5 ids. */

/* Wide screens: two header buttons that wrap together as one unit. Below 600px they are
   replaced by one "Updates & feedback" button (placed after the search box) that opens a small
   chooser, so the button adds no row to the guide's sticky header. */
.pl5-header-actions{display:inline-flex;gap:.5rem;flex-wrap:nowrap}
.pl5-narrow{display:none}
.pl5-print-short{display:none}
@media (max-width:599.98px){
  .pl5-header-actions{display:none}
  .tools>.pl5-narrow{display:inline-block;font-size:.85rem;padding:.3rem .65rem;line-height:1.3}
  /* The guide's search box (flex-basis 220px) would otherwise push the button onto a row of
     its own. A smaller basis lets them share the first row; the box still grows to fill it.
     The guide's print button shows "Print" (its name stays "Print / save PDF"), so between
     about 540 and 599px it still fits beside the button. This stylesheet is only loaded on the
     packaged /phase5/ page. */
  .tools>#search{flex-basis:120px}
  #printBtn .pl5-print-full{display:none}
  #printBtn .pl5-print-short{display:inline}
}

/* "Give feedback" in Pursue Learning gold so it stands out beside the blue updates button
   (Eliot, 1 November 2026). Navy on gold is about 8:1 contrast, and the button keeps its own
   colours in the guide's dark theme. The focus ring uses --ink so it shows on light and dark. */
#pl5FeedbackBtn,.pl5-option[data-pl5-open="feedback"]{background:#f5a623;border-color:#f5a623;color:#0b2545}
#pl5FeedbackBtn:hover,.pl5-option[data-pl5-open="feedback"]:hover{background:#e0951a;border-color:#e0951a}
#pl5FeedbackBtn:focus-visible,.pl5-option[data-pl5-open="feedback"]:focus-visible{background:#e0951a;outline:3px solid var(--ink);outline-offset:2px}
.pl5-option[data-pl5-open="feedback"] span{color:#0b2545}

/* Phone chooser: two large options that open the existing signup and feedback dialogs. */
.pl5-chooser{width:min(380px,calc(100vw - 1.5rem))}
.pl5-options{display:grid;gap:.6rem}
.pl5-option{display:grid;gap:.2rem;width:100%;min-height:56px;padding:.75rem .9rem;text-align:left;border:1px solid var(--line2);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer}
.pl5-option strong{font-size:1rem}
.pl5-option span{font-size:.88rem;color:var(--ink2)}
.pl5-option:hover{border-color:var(--accent)}
.pl5-option:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Cloudflare Turnstile widget. It appears only if Cloudflare needs the reader to do something
   (appearance "interaction-only"), so the box takes no space otherwise. */
.pl5-turnstile{margin:.6rem 0 0}
.pl5-turnstile:focus{outline:none}
.pl5-turnstile-status{margin:.4rem 0 0;font-weight:650}
.pl5-turnstile-status:empty{margin:0}
.pl5-turnstile-retry{margin:.4rem 0 0;min-height:44px}

.pl5-preview-label{display:inline-block;margin-right:.5rem;padding:.05rem .45rem;border:1px solid var(--warn,#9a5b00);border-radius:999px;color:var(--warn,#9a5b00);font-weight:700;letter-spacing:.04em}

.pl5-dialog{width:min(560px,calc(100vw - 1.5rem));max-height:88vh;overflow:auto;border:1px solid var(--line2);border-radius:14px;padding:1.2rem 1.3rem 1.4rem;background:var(--panel);color:var(--ink);box-shadow:0 20px 70px rgba(0,0,0,.25)}
.pl5-dialog::backdrop{background:rgba(15,24,35,.55)}
.pl5-dialog h2{font-size:1.3rem;margin:0}
.pl5-dialog h3{font-size:1rem;margin:1rem 0 .3rem}
.pl5-dialog p{margin:.35em 0 .8em}
.pl5-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.6rem}
.pl5-close{border:1px solid var(--line2);background:var(--panel);color:var(--ink);border-radius:8px;min-width:44px;min-height:44px;font-size:1.4rem;line-height:1;cursor:pointer}
.pl5-label{display:block;font-weight:650;margin:.8rem 0 .3rem}
.pl5-input{display:block;width:100%;padding:.6rem .7rem;border:1px solid var(--line2);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;min-height:44px}
textarea.pl5-input{resize:vertical;min-height:84px}
.pl5-input[aria-invalid="true"]{border-color:var(--bad,#b23a3a);box-shadow:0 0 0 1px var(--bad,#b23a3a)}
.pl5-small{font-size:.88rem;color:var(--ink2)}
.pl5-check{display:flex;gap:.6rem;align-items:flex-start;margin:.8rem 0;line-height:1.45;cursor:pointer}
.pl5-check input,.pl5-choice input{accent-color:var(--accent);width:18px;height:18px;flex:0 0 auto;margin:.15rem 0 0}
.pl5-dialog fieldset{border:0;padding:0;margin:0 0 1.2rem;min-width:0}
.pl5-dialog legend{font-weight:700;margin-bottom:.5rem;padding:0}
.pl5-choices{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.pl5-choice{display:flex;gap:.55rem;align-items:flex-start;padding:.65rem .75rem;border:1px solid var(--line2);border-radius:8px;line-height:1.35;cursor:pointer;min-height:48px;font-size:.94rem}
.pl5-choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.pl5-details{margin:.4rem 0 1rem}
.pl5-details>summary{cursor:pointer;font-weight:650;padding:.65rem .9rem;flex-wrap:nowrap}
.pl5-details>summary>span{min-width:0;flex:1}
.pl5-details>.body{padding-top:.2rem}
.pl5-contact{border-top:1px solid var(--line);padding-top:.8rem;margin-top:.6rem}
.pl5-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:1rem}
.pl5-actions .btn{min-height:44px;font-weight:650}
.pl5-actions .btn[aria-disabled="true"]{opacity:.6;cursor:progress}
/* Alert and status regions stay rendered while empty, so screen readers announce changes. */
.pl5-error{color:var(--bad,#b23a3a);font-weight:650;margin:.6rem 0 0}
.pl5-error:empty{margin:0}
.pl5-result{background:var(--good-soft,#e4f4ea);border-left:4px solid var(--good,#1b7f4b);padding:.8rem 1rem;margin-top:1rem;border-radius:6px}
.pl5-result:empty{padding:0;margin:0;border:0;background:none}
.pl5-link{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:.2em;font:inherit;cursor:pointer}
.pl5-link:focus-visible,.pl5-close:focus-visible,.pl5-input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Hidden from people; automated form fillers often complete it. */
.pl5-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

/* Invitation shown after the current section's content. Sits inside the space the guide
   already reserves above its fixed bottom bar. */
.pl5-invite{max-width:1180px;margin:-4.5rem auto 0;padding:0 1rem 6rem;color:var(--ink2);font-size:.95rem}
.pl5-invite p{margin:.2rem 0}
.pl5-invite .pl5-link{font-weight:650}

@media (max-width:480px){.pl5-choices{grid-template-columns:1fr}.pl5-dialog{padding:1rem}.pl5-actions .btn{width:100%}}

/* Never print the signup, feedback or invitation. */
@media print{.pl5-ui,.pl5-dialog,.pl5-invite,.pl5-preview-label{display:none!important}}
body.printing .pl5-ui,body.printing .pl5-invite{display:none!important}