/* ============================================================
   REGULATOR PAGE — interaction layer.

   Loaded after regulator.css so it can override the design's
   own rules where behaviour demands it. Kept separate because
   regulator.css is generated from the fragment and must not be
   hand-edited.
   ============================================================ */

/* ---- Concern chips as a filter, not a jump ----
   The design shows a panel with `.panel:target`, which needs a hash — and a
   hash makes the browser scroll. Once the script is live, `[data-js="1"]`
   raises the specificity above the :target rule so class-based filtering wins
   and no hash is ever set. Without the script, :target still works. */
.pe-reg[data-js="1"] .panel{display:none}
.pe-reg[data-js="1"] .panel:target{display:none}
.pe-reg[data-js="1"] .panel.is-open{display:block}

.pe-reg .chip{cursor:pointer}
.pe-reg .chip.is-on,
.pe-reg .chip[aria-pressed="true"]{
  background:var(--navy) !important;
  border-color:var(--navy) !important;
  color:#fff !important;
}
.pe-reg .chip:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ---- Add to basket ----
   The fragment styles `.add` as a link. These states are what tell a visitor
   the course is already theirs, and stop them clicking through to a page they
   did not ask for. */
.pe-reg .add{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,opacity .16s;
}
.pe-reg .add .add-label{font:inherit;letter-spacing:inherit}

.pe-reg .add.is-busy,
.pe-reg .ci-add.is-busy{opacity:.55;pointer-events:none}

/* Added: unmistakable, and not a link any more. */
.pe-reg .add.is-added{
  background:var(--green,#0F7B5A) !important;
  border-color:var(--green,#0F7B5A) !important;
  color:#fff !important;
  cursor:default;
  pointer-events:none;
}
.pe-reg .add.is-added .add-label{
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.01em;
}
.pe-reg .add.is-added .add-label::before{
  content:"\2713";
  display:inline-block;
  margin-right:7px;
  font-weight:700;
}

.pe-reg .ci-add.is-added{pointer-events:none;cursor:default}
.pe-reg .ci-add.is-added .ci-plus{color:var(--green,#0F7B5A);font-weight:700}
.pe-reg .ci-add.is-added .ci-meta{opacity:.75}

/* ---- The ghost that flies into the basket ---- */
.pe-fly{
  position:fixed;z-index:200;
  border-radius:12px;
  background:rgba(30,95,208,.22);
  border:2px solid rgba(30,95,208,.5);
  box-shadow:0 10px 30px rgba(15,27,51,.22);
  pointer-events:none;
  transition:transform .6s cubic-bezier(.5,-0.2,.7,1),opacity .6s ease-in;
  will-change:transform,opacity;
}

/* The dock acknowledging the arrival. */
.pe-basket__dock.is-bumped{animation:pe-bump .42s cubic-bezier(.34,1.5,.64,1)}
@keyframes pe-bump{
  0%{transform:scale(1)}
  40%{transform:scale(1.14)}
  100%{transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .pe-fly{display:none}
  .pe-basket__dock.is-bumped{animation:none}
}

/* ---- "On this page" ----
   Sticky on a phone, where a 7,000-word page is a long scroll and the section
   list is the only way back. Left in flow on desktop, where the whole page is
   reachable without it and a fixed strip would just eat vertical space.

   The breakpoint matches the design's own. */
@media (max-width:820px){
  .pe-reg .pagenav{
    position:sticky;
    top:0;
    z-index:60;
    background:var(--card,#fff);
    border-bottom:1px solid var(--line,#DDE5F1);
    box-shadow:0 2px 10px rgba(15,27,51,.06);
  }
  .pe-reg .pagenav > .wrap{
    display:flex;
    align-items:center;
    gap:10px;
    padding-top:10px;
    padding-bottom:10px;
  }
  /* The heading would take a whole line to itself on a narrow screen. */
  .pe-reg .pagenav b{
    flex:0 0 auto;
    margin:0;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.08em;
    opacity:.7;
  }
  /* One scrolling row rather than a wrapped block that pushes the page down. */
  .pe-reg .pagenav ul{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    margin:0;
    padding:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .pe-reg .pagenav ul::-webkit-scrollbar{display:none}
  .pe-reg .pagenav li{flex:0 0 auto;margin:0}
  .pe-reg .pagenav a{white-space:nowrap}
}

/* An anchor jump must not land under the sticky strip. */
@media (max-width:820px){
  .pe-reg section[id]{scroll-margin-top:64px}
}

/* A heading that has just been scrolled to should not draw a focus ring — the
   focus is there so keyboards and screen readers follow the jump, not as a
   visible state. */
.pe-reg section[id]:focus{outline:none}
.pe-reg section[id]:focus-visible{outline:2px solid var(--navy);outline-offset:4px}

/* Anchors should clear the header wherever they land. */
.pe-reg section[id],
.pe-reg [id^="pe-reg-"]{scroll-margin-top:24px}