/* ============================================================
   Harrington Compliance — oversized course marks
   Used by courses.html (WebGL marks) and courses-test.html, the
   flat-SVG variant kept for comparison.
   The panel icon leaves its glass box and becomes a large,
   slow-moving watermark behind the course title.
   ============================================================ */

/* Taller header so the mark has room to be a mark, not an icon. */
.cpanel-vis--mark{
  min-height:232px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(22px,2.8vw,32px);
}

/* A second, slowly wandering glow so the panel never sits still. */
.cpanel-vis--mark::after{
  width:420px;height:420px;top:-190px;right:-130px;
  animation:markGlow 26s ease-in-out infinite;
}
@keyframes markGlow{
  0%,100%{transform:translate(0,0) scale(1);opacity:1}
  50%{transform:translate(-46px,38px) scale(1.14);opacity:.78}
}

/* ---------- the mark ---------- */
.cpanel-mark{
  position:absolute;z-index:0;pointer-events:none;
  right:-8%;top:46%;
  width:clamp(190px,52%,288px);aspect-ratio:1;
  display:grid;place-items:center;
  color:#fff;
  animation:markDrift 24s ease-in-out infinite;
}
@keyframes markDrift{
  0%,100%{transform:translate(0,-50%) rotate(-2.6deg) scale(1)}
  50%    {transform:translate(-14px,-54%) rotate(2.6deg) scale(1.05)}
}

.cpanel-mark svg,
.cpanel-mark canvas{
  width:100%;height:100%;display:block;
}

/* Stroke styling lives here because the mark clones the symbol's
   children rather than <use>-ing it — so CSS can actually reach them. */
.cpanel-mark svg[data-mark]{
  fill:none;
  stroke:currentColor;
  stroke-width:.42;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.2;
  filter:drop-shadow(0 0 14px rgba(99,222,255,.4));
  transition:opacity .5s var(--ease-out);
}
.cpanel-mark svg[data-mark] [fill="currentColor"]{fill:currentColor;stroke:none}

/* The <use> the catalogue script drives stays in the DOM as the
   source of truth, but is never seen. */
.cpanel-ico-src{position:absolute;width:0;height:0;overflow:hidden;opacity:0}

/* Title and category sit above the mark. */
.cpanel-vis--mark .cpanel-cat,
.cpanel-vis--mark .cpanel-title{position:relative;z-index:2}
.cpanel-vis--mark .cpanel-title{
  font-size:clamp(1.5rem,2.7vw,2.05rem);
  max-width:82%;
  text-shadow:0 2px 22px rgba(4,16,43,.5);
}
.cpanel-vis--mark .cpanel-cat{margin-bottom:.6rem}

/* ---------- 3D variant ---------- */
.cpanel-mark--3d canvas{
  position:absolute;inset:0;
  opacity:0;transform:scale(.94);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.cpanel-mark--3d.is-live canvas{opacity:1;transform:none}
/* SVG holds the space until WebGL proves it can take over. */
.cpanel-mark--3d.is-live svg[data-mark]{opacity:0}

@media(max-width:940px){
  .cpanel-vis--mark{min-height:168px}
  .cpanel-mark{width:clamp(150px,52%,220px);right:-7%}
  .cpanel-vis--mark .cpanel-title{max-width:88%}
}

@media(prefers-reduced-motion:reduce){
  .cpanel-mark,.cpanel-vis--mark::after{animation:none}
  .cpanel-mark{transform:translateY(-50%)}
}

/* Test-page marker. */
.test-flag{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.4em .95em;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--amber-100);color:#8A5A05;border:1px solid #F2D9A8;font-weight:600;
}